Fix: signos vitales siempre debajo de datos del paciente en Evoluciones

This commit is contained in:
2026-04-18 19:08:45 -03:00
parent b158a342ef
commit 03b2a925f3
2 changed files with 147 additions and 147 deletions
+52 -50
View File
@@ -423,57 +423,59 @@ export function Evoluciones({
const signosTexto = getSignosVitalesTexto(evolucion.signosVitales); const signosTexto = getSignosVitalesTexto(evolucion.signosVitales);
const estaExpandida = evolucionExpandida === evolucion.id; const estaExpandida = evolucionExpandida === evolucion.id;
return ( return (
<Card key={evolucion.id} className="hover:shadow-md transition-shadow"> <Card key={evolucion.id} className="hover:shadow-md transition-shadow">
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex flex-col sm:flex-row gap-3"> <div className="flex flex-col gap-4">
<div className="flex flex-col sm:flex-row items-start justify-between w-full"> {/* Patient Info */}
<div className="flex items-center gap-3"> <div className="flex flex-col gap-3">
<div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> <div className="flex items-center gap-3">
<FileText className="h-5 w-5 text-blue-600" /> <div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
</div> <FileText className="h-5 w-5 text-blue-600" />
<div> </div>
<h3 className="font-bold"> <div>
{paciente ? `${paciente.apellido}, ${paciente.nombre}` : 'Paciente no encontrado'} <h3 className="font-bold">
</h3> {paciente ? `${paciente.apellido}, ${paciente.nombre}` : 'Paciente no encontrado'}
<div className="flex items-center gap-3 text-sm text-gray-500"> </h3>
<span className="flex items-center gap-1"> <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-gray-500">
<Calendar className="h-3 w-3" /> <span className="flex items-center gap-1">
{evolucion.fecha} <Calendar className="h-3 w-3" />
</span> {evolucion.fecha}
<span className="flex items-center gap-1"> </span>
<Clock className="h-3 w-3" /> <span className="flex items-center gap-1">
{evolucion.hora} <Clock className="h-3 w-3" />
</span> {evolucion.hora}
<Badge variant="outline">{evolucion.medico}</Badge> </span>
</div> <Badge variant="outline">{evolucion.medico}</Badge>
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> </div>
<Button <div className="flex flex-wrap items-center gap-2">
size="sm" <Button
variant="outline" size="sm"
onClick={() => setEvolucionExpandida(estaExpandida ? null : evolucion.id)} variant="outline"
> onClick={() => setEvolucionExpandida(estaExpandida ? null : evolucion.id)}
{estaExpandida ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />} >
</Button> {estaExpandida ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
{onActualizarEvolucion && ( </Button>
<Button size="sm" variant="outline" onClick={() => abrirEditar(evolucion)}> {onActualizarEvolucion && (
<Pencil className="h-4 w-4" /> <Button size="sm" variant="outline" onClick={() => abrirEditar(evolucion)}>
</Button> <Pencil className="h-4 w-4" />
)} </Button>
<Button variant="outline" )}
size="sm" <Button variant="outline"
className="text-red-600" size="sm"
onClick={() => onEliminarEvolucion(evolucion.id)} className="text-red-600"
> onClick={() => onEliminarEvolucion(evolucion.id)}
<Trash2 className="h-4 w-4" /> >
</Button> <Trash2 className="h-4 w-4" />
</div> Eliminar
</div> </Button>
</div>
</div>
{signosTexto && ( {signosTexto && (
<div className="bg-blue-50 p-2 rounded-lg"> <div className="bg-blue-50 p-3 rounded-lg">
<p className="text-sm font-medium text-blue-800 flex items-center gap-2"> <p className="text-sm font-medium text-blue-800 flex items-center gap-2">
<Activity className="h-4 w-4" /> <Activity className="h-4 w-4" />
Signos Vitales: {signosTexto} Signos Vitales: {signosTexto}
+93 -95
View File
@@ -322,7 +322,7 @@ export function HistoriaClinica({
<AccordionItem value="item-1"> <AccordionItem value="item-1">
<AccordionTrigger>Detalle Episodio Actual</AccordionTrigger> <AccordionTrigger>Detalle Episodio Actual</AccordionTrigger>
<AccordionContent className="p4"> <AccordionContent className="p4">
<div className="border-t p-4 space-y-4"> <div className="border-t space-y-4">
<div> <div>
@@ -465,39 +465,35 @@ export function HistoriaClinica({
</CardContent> </CardContent>
</Card> </Card>
<Tabs className="w-full p-4" value={tabActivo} onValueChange={setTabActivo}> <Tabs className="w-full max-w-full min-w-0" value={tabActivo} onValueChange={setTabActivo}>
<ScrollArea className="w-full whitespace-nowrap rounded-md"> <ScrollArea className="w-full max-w-full">
<TabsList className="flex gap-1 flex-wrap"> <TabsList className="inline-flex w-max min-w-full justify-start gap-1 p-1">
<TabsTrigger value="evoluciones" className="flex-shrink flex items-center gap-1 text-xs sm:text-sm"> <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" /> <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>
({evoluciones.length}) ({evoluciones.length})
</TabsTrigger> </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" /> <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>
({laboratorios.length}) ({laboratorios.length})
</TabsTrigger> </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" /> <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>
({acidosBase.length}) ({acidosBase.length})
</TabsTrigger> </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" /> <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>
({cultivos.length}) ({cultivos.length})
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="atb" 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">
<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">
<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>
({estudiosComplementarios.length}) ({estudiosComplementarios.length})
</TabsTrigger> </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" /> <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>
({interconsultas.length}) ({interconsultas.length})
@@ -506,7 +502,7 @@ export function HistoriaClinica({
<ScrollBar orientation="horizontal" /> <ScrollBar orientation="horizontal" />
</ScrollArea> </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} /> <SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} />
</TabsContent> </TabsContent>
@@ -910,7 +906,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del, addAcidoBase }:
}); });
return ( 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 justify-between">
<div className="flex gap-2"> <div className="flex gap-2">
<Button variant="outline" onClick={() => { reset(); setDialog(true); }}><Plus className="h-4 w-4 mr-2" />Nuevo Laboratorio</Button> <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> </DialogContent>
</Dialog> </Dialog>
{labs.length === 0 ? ( {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="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"> <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-[600px]"> <Table className="w-full min-w-max text-sm">
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead className="cursor-pointer hover:bg-muted" onClick={() => setLabSortAsc(!labSortAsc)}> <TableHead className="cursor-pointer hover:bg-muted" onClick={() => setLabSortAsc(!labSortAsc)}>
Fecha {labSortAsc ? '↑' : '↓'} Fecha {labSortAsc ? '↑' : '↓'}
</TableHead> </TableHead>
<TableHead>Hto</TableHead> <TableHead>Hto</TableHead>
<TableHead>Hb</TableHead> <TableHead>Hb</TableHead>
<TableHead>GB</TableHead> <TableHead>GB</TableHead>
<TableHead>Plaq</TableHead> <TableHead>Plaq</TableHead>
<TableHead>Gluc</TableHead> <TableHead>Gluc</TableHead>
<TableHead>Urea</TableHead> <TableHead>Urea</TableHead>
<TableHead>Creat.</TableHead> <TableHead>Creat.</TableHead>
<TableHead>Na+</TableHead> <TableHead>Na+</TableHead>
<TableHead>K+</TableHead> <TableHead>K+</TableHead>
<TableHead>Cl-</TableHead> <TableHead>Cl-</TableHead>
<TableHead>BT</TableHead> <TableHead>BT</TableHead>
<TableHead>BDir</TableHead> <TableHead>BDir</TableHead>
<TableHead>GOT</TableHead> <TableHead>GOT</TableHead>
<TableHead>GPT</TableHead> <TableHead>GPT</TableHead>
<TableHead>TP</TableHead> <TableHead>TP</TableHead>
<TableHead>KPTT</TableHead> <TableHead>KPTT</TableHead>
<TableHead>RIN</TableHead> <TableHead>RIN</TableHead>
<TableHead>Acciones</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> </TableRow>
))} </TableHeader>
</TableBody> <TableBody>
</Table> {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>
)} )}
</div> </div>
); );
} }
@@ -1564,7 +1562,7 @@ function SeccionAcidosBase({ ab, patientId, add, update, del }: {
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div><p className="font-medium">{a.fecha} {a.hora}</p></div> <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 && 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> <Badge variant="outline" className="text-xs">{a.fio2 && <span className="mr-1">FiO:{a.fio2}</span>}</Badge>