snlavaise/administracionHospital
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: responsive grids en Evoluciones (grid-cols-1 sm:grid-cols-2)

Browse Source
This commit is contained in:
snlavaise
2026-04-18 15:07:02 -03:00
parent ea90228a3f
commit 02fbf4c90e
2 changed files with 60 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sections/Evoluciones.tsx
+4 -4
View File
@@ -197,7 +197,7 @@ export function Evoluciones({
Nueva Evolución Nueva Evolución
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-3xl max-h-[90vh] overflow-y-auto"> <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle>
{evolucionEditando ? 'Editar Evolución' : 'Nueva Evolución'} {evolucionEditando ? 'Editar Evolución' : 'Nueva Evolución'}
@@ -222,7 +222,7 @@ export function Evoluciones({
</div> </div>
)} )}
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<Label>Fecha *</Label> <Label>Fecha *</Label>
<Input type="date" value={fecha} onChange={(e) => setFecha(e.target.value)} /> <Input type="date" value={fecha} onChange={(e) => setFecha(e.target.value)} />
@@ -238,7 +238,7 @@ export function Evoluciones({
<Activity className="h-4 w-4" /> <Activity className="h-4 w-4" />
Signos Vitales Signos Vitales
</p> </p>
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div> <div>
<Label className="flex items-center gap-1"> <Label className="flex items-center gap-1">
<Heart className="h-4 w-4" />TAS <Heart className="h-4 w-4" />TAS
@@ -486,7 +486,7 @@ export function Evoluciones({
{evolucion.examenFisico && ( {evolucion.examenFisico && (
<div className="bg-green-50 p-3 rounded-lg border border-green-200"> <div className="bg-green-50 p-3 rounded-lg border border-green-200">
<p className="text-sm font-medium text-green-800 mb-2">Examen Físico:</p> <p className="text-sm font-medium text-green-800 mb-2">Examen Físico:</p>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs"> <div className="grid grid-cols-1 sm:grid-cols-4 gap-2 text-xs">
{evolucion.examenFisico.SNC && <div><span className="font-medium">SNC:</span> {evolucion.examenFisico.SNC}</div>} {evolucion.examenFisico.SNC && <div><span className="font-medium">SNC:</span> {evolucion.examenFisico.SNC}</div>}
{evolucion.examenFisico.Cardiovascular && <div><span className="font-medium">CV:</span> {evolucion.examenFisico.Cardiovascular}</div>} {evolucion.examenFisico.Cardiovascular && <div><span className="font-medium">CV:</span> {evolucion.examenFisico.Cardiovascular}</div>}
{evolucion.examenFisico.Respiratorio && <div><span className="font-medium">Resp:</span> {evolucion.examenFisico.Respiratorio}</div>} {evolucion.examenFisico.Respiratorio && <div><span className="font-medium">Resp:</span> {evolucion.examenFisico.Respiratorio}</div>}
src/sections/HistoriaClinica.tsx
+56 -53
View File
@@ -48,6 +48,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import type { Laboratorio, AcidoBase, Cultivo, Paciente, ResultadoLaboratorio, Internacion, Evolucion, Cama, EstudioComplementario, Interconsulta } from '@/types'; import type { Laboratorio, AcidoBase, Cultivo, Paciente, ResultadoLaboratorio, Internacion, Evolucion, Cama, EstudioComplementario, Interconsulta } from '@/types';
@@ -240,17 +241,17 @@ export function HistoriaClinica({
<p className="text-gray-500 dark:text-gray-400">Módulo de Historia Clínica de Internación</p> <p className="text-gray-500 dark:text-gray-400">Módulo de Historia Clínica de Internación</p>
</div> </div>
<div className="flex items-center gap-2">
<Button variant="outline" onClick={onVolver}>
<ArrowLeft className="h-4 w-4 mr-2" /> <Button variant="outline" onClick={onVolver}>
Volver <ArrowLeft className="h-4 w-4 mr-2" />
</Button> Volver
<Button variant="outline" onClick={onEditarIngreso}> </Button>
<Pencil className="h-4 w-4 mr-2" /> <Button variant="outline" onClick={onEditarIngreso}>
Editar Ingreso <Pencil className="h-4 w-4 mr-2" />
</Button> Editar Ingreso
</div> </Button>
</div> </div>
@@ -461,52 +462,54 @@ export function HistoriaClinica({
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<Tabs value={tabActivo} onValueChange={setTabActivo}> <Tabs className="w-full p-4" value={tabActivo} onValueChange={setTabActivo}>
<div className="overflow-x-auto -mx-4 px-4"> <ScrollArea className="w-full whitespace-nowrap rounded-md">
<TabsList className="inline-flex min-w-full gap-1"> <TabsList>
<TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm whitespace-nowrap"> <TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm whitespace-nowrap">
<FileText className="h-3 w-3 sm:h-4 sm:w-4" /> <FileText className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Evoluciones</span> <span className="hidden sm:inline">Evoluciones</span>
<span className="sm:hidden">Evol</span> ({evoluciones.length})
({evoluciones.length}) </TabsTrigger>
</TabsTrigger> <TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
<FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline">Laboratorio</span>
<span className="hidden sm:inline">Laboratorio</span>
<span className="sm:hidden">Lab</span> ({laboratorios.length})
({laboratorios.length}) </TabsTrigger>
</TabsTrigger> <TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
<Activity className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline">EAB</span>
<span className="hidden sm:inline">EAB</span>
<span className="sm:hidden">EAB</span> ({acidosBase.length})
({acidosBase.length}) </TabsTrigger>
</TabsTrigger> <TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
<Microscope className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline">Cultivos</span>
<span className="hidden sm:inline">Cultivos</span>
<span className="sm:hidden">Cult</span> ({cultivos.length})
({cultivos.length}) </TabsTrigger>
</TabsTrigger> <TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <Pill className="h-3 w-3 sm:h-4 sm:w-4" />
<Pill className="h-3 w-3 sm:h-4 sm:w-4" /> <span className="hidden sm:inline">ATB</span>
<span className="hidden sm:inline">ATB</span>
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" /> <ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Estudios</span> <span className="hidden sm:inline">Estudios</span>
<span className="sm:hidden">Est</span>
({estudiosComplementarios.length}) ({estudiosComplementarios.length})
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<Users className="h-3 w-3 sm:h-4 sm:w-4" /> <Users className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Interconsultas</span> <span className="hidden sm:inline">Interconsultas</span>
</TabsTrigger> ({interconsultas.length})
</TabsList> </TabsTrigger>
</div> </TabsList>
<ScrollBar orientation="horizontal" />
</ScrollArea>
<TabsContent value="laboratorios" className="mt-4"> <TabsContent value="laboratorios" className="mt-4">
<SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} /> <SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} />