Fix: signos vitales siempre debajo de datos del paciente en Evoluciones
This commit is contained in:
@@ -322,7 +322,7 @@ export function HistoriaClinica({
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger>Detalle Episodio Actual</AccordionTrigger>
|
||||
<AccordionContent className="p4">
|
||||
<div className="border-t p-4 space-y-4">
|
||||
<div className="border-t space-y-4">
|
||||
|
||||
|
||||
<div>
|
||||
@@ -465,39 +465,35 @@ export function HistoriaClinica({
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Tabs className="w-full p-4" value={tabActivo} onValueChange={setTabActivo}>
|
||||
<ScrollArea className="w-full whitespace-nowrap rounded-md">
|
||||
<TabsList className="flex gap-1 flex-wrap">
|
||||
<TabsTrigger value="evoluciones" className="flex-shrink flex items-center gap-1 text-xs sm:text-sm">
|
||||
<Tabs className="w-full max-w-full min-w-0" value={tabActivo} onValueChange={setTabActivo}>
|
||||
<ScrollArea className="w-full max-w-full">
|
||||
<TabsList className="inline-flex w-max min-w-full justify-start gap-1 p-1">
|
||||
<TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
||||
<FileText className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
<span className="hidden sm:inline">Evoluciones</span>
|
||||
({evoluciones.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="laboratorios" className="flex-shrink 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" />
|
||||
<span className="hidden sm:inline">Laboratorio</span>
|
||||
({laboratorios.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="acidobase" className="flex-shrink 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" />
|
||||
<span className="hidden sm:inline">EAB</span>
|
||||
({acidosBase.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="cultivos" className="flex-shrink 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" />
|
||||
<span className="hidden sm:inline">Cultivos</span>
|
||||
({cultivos.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="atb" className="flex-shrink flex items-center gap-1 text-xs sm:text-sm">
|
||||
<Pill className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
<span className="hidden sm:inline">ATB</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="estudios" className="flex-shrink 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" />
|
||||
<span className="hidden sm:inline">Estudios</span>
|
||||
({estudiosComplementarios.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="interconsultas" className="flex-shrink 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" />
|
||||
<span className="hidden sm:inline">Interconsultas</span>
|
||||
({interconsultas.length})
|
||||
@@ -506,7 +502,7 @@ export function HistoriaClinica({
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
|
||||
<TabsContent value="laboratorios" className="mt-4">
|
||||
<TabsContent value="laboratorios" className="mt-4 min-w-0 w-full overflow-hidden">
|
||||
<SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} />
|
||||
</TabsContent>
|
||||
|
||||
@@ -910,7 +906,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del, addAcidoBase }:
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-4 w-full max-w-full min-w-0">
|
||||
<div className="flex justify-between">
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => { reset(); setDialog(true); }}><Plus className="h-4 w-4 mr-2" />Nuevo Laboratorio</Button>
|
||||
@@ -1150,88 +1146,90 @@ function SeccionLaboratorios({ lab, patientId, add, update, del, addAcidoBase }:
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{labs.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-400"><FlaskConical className="h-12 w-12 mx-auto mb-2 opacity-50" /><p>No hay laboratorios</p></div>
|
||||
) : (
|
||||
<div className="relative overflow-x-auto">
|
||||
|
||||
<Table className="w-full min-w-[600px]">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="cursor-pointer hover:bg-muted" onClick={() => setLabSortAsc(!labSortAsc)}>
|
||||
Fecha {labSortAsc ? '↑' : '↓'}
|
||||
</TableHead>
|
||||
<TableHead>Hto</TableHead>
|
||||
<TableHead>Hb</TableHead>
|
||||
<TableHead>GB</TableHead>
|
||||
<TableHead>Plaq</TableHead>
|
||||
<TableHead>Gluc</TableHead>
|
||||
<TableHead>Urea</TableHead>
|
||||
<TableHead>Creat.</TableHead>
|
||||
<TableHead>Na+</TableHead>
|
||||
<TableHead>K+</TableHead>
|
||||
<TableHead>Cl-</TableHead>
|
||||
<TableHead>BT</TableHead>
|
||||
<TableHead>BDir</TableHead>
|
||||
<TableHead>GOT</TableHead>
|
||||
<TableHead>GPT</TableHead>
|
||||
<TableHead>TP</TableHead>
|
||||
<TableHead>KPTT</TableHead>
|
||||
<TableHead>RIN</TableHead>
|
||||
<TableHead>Acciones</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{labs.map(l => (
|
||||
<TableRow key={l.id}>
|
||||
<TableCell>{l.fecha} {l.hora || ''}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Hematocrito')}>{getValor(l, 'Hematocrito')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Hemoglobina')}>{getValor(l, 'Hemoglobina')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Leucocitos')}>{getValor(l, 'Leucocitos')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Plaquetas')}>{getValor(l, 'Plaquetas')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Glucemia')}>{getValor(l, 'Glucemia')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Urea')}>{getValor(l, 'Urea')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Creatinina')}>{getValor(l, 'Creatinina')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Sodio')}>{getValor(l, 'Sodio')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Potasio')}>{getValor(l, 'Potasio')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Cloro')}>{getValor(l, 'Cloro')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Bilirrubina Total')}>{getValor(l, 'Bilirrubina Total')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Bilirrubina Directa')}>{getValor(l, 'Bilirrubina Directa')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'GOT')}>{getValor(l, 'GOT')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'GPT')}>{getValor(l, 'GPT')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Tiempo de Protrombina')}>{getValor(l, 'Tiempo de Protrombina')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'KPTT')}>{getValor(l, 'KPTT')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'INR')}>{getValor(l, 'INR')}</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button size="sm" variant="ghost" className="h-8 w-8 p-0">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => loadEdit(l)}>
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
Editar
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => del(l.id)} className="text-red-600">
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Eliminar
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => { setObsLab(l); setObsDialog(true); }}>
|
||||
<ClipboardList className="mr-2 h-4 w-4" />
|
||||
Ver Observaciones
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
{labs.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-400"><FlaskConical className="h-12 w-12 mx-auto mb-2 opacity-50" /><p>No hay laboratorios</p></div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 w-full">
|
||||
<div className="w-full overflow-x-auto rounded-md border pb-2">
|
||||
|
||||
<Table className="w-full min-w-max text-sm">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="cursor-pointer hover:bg-muted" onClick={() => setLabSortAsc(!labSortAsc)}>
|
||||
Fecha {labSortAsc ? '↑' : '↓'}
|
||||
</TableHead>
|
||||
<TableHead>Hto</TableHead>
|
||||
<TableHead>Hb</TableHead>
|
||||
<TableHead>GB</TableHead>
|
||||
<TableHead>Plaq</TableHead>
|
||||
<TableHead>Gluc</TableHead>
|
||||
<TableHead>Urea</TableHead>
|
||||
<TableHead>Creat.</TableHead>
|
||||
<TableHead>Na+</TableHead>
|
||||
<TableHead>K+</TableHead>
|
||||
<TableHead>Cl-</TableHead>
|
||||
<TableHead>BT</TableHead>
|
||||
<TableHead>BDir</TableHead>
|
||||
<TableHead>GOT</TableHead>
|
||||
<TableHead>GPT</TableHead>
|
||||
<TableHead>TP</TableHead>
|
||||
<TableHead>KPTT</TableHead>
|
||||
<TableHead>RIN</TableHead>
|
||||
<TableHead>+</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{labs.map(l => (
|
||||
<TableRow key={l.id}>
|
||||
<TableCell>{l.fecha} {l.hora || ''}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Hematocrito')}>{getValor(l, 'Hematocrito')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Hemoglobina')}>{getValor(l, 'Hemoglobina')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Leucocitos')}>{getValor(l, 'Leucocitos')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Plaquetas')}>{getValor(l, 'Plaquetas')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Glucemia')}>{getValor(l, 'Glucemia')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Urea')}>{getValor(l, 'Urea')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Creatinina')}>{getValor(l, 'Creatinina')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Sodio')}>{getValor(l, 'Sodio')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Potasio')}>{getValor(l, 'Potasio')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Cloro')}>{getValor(l, 'Cloro')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Bilirrubina Total')}>{getValor(l, 'Bilirrubina Total')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Bilirrubina Directa')}>{getValor(l, 'Bilirrubina Directa')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'GOT')}>{getValor(l, 'GOT')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'GPT')}>{getValor(l, 'GPT')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'Tiempo de Protrombina')}>{getValor(l, 'Tiempo de Protrombina')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'KPTT')}>{getValor(l, 'KPTT')}</TableCell>
|
||||
<TableCell className={getValorStyle(l, 'INR')}>{getValor(l, 'INR')}</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button size="sm" variant="ghost" className="h-8 w-8 p-0">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => loadEdit(l)}>
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
Editar
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => del(l.id)} className="text-red-600">
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Eliminar
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => { setObsLab(l); setObsDialog(true); }}>
|
||||
<ClipboardList className="mr-2 h-4 w-4" />
|
||||
Ver Observaciones
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1564,7 +1562,7 @@ function SeccionAcidosBase({ ab, patientId, add, update, del }: {
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div><p className="font-medium">{a.fecha} {a.hora}</p></div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-end gap-2">
|
||||
|
||||
<Badge variant="outline" className="text-xs">{a.fio2 && a.po2 && <span className="mr-1">PaFiO2: {Math.round(a.po2 / a.fio2 * 100) / 100}</span>}</Badge>
|
||||
<Badge variant="outline" className="text-xs">{a.fio2 && <span className="mr-1">FiO₂:{a.fio2}</span>}</Badge>
|
||||
|
||||
Reference in New Issue
Block a user