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
+8 -6
View File
@@ -423,11 +423,12 @@ 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 flex-col gap-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> <div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
<FileText className="h-5 w-5 text-blue-600" /> <FileText className="h-5 w-5 text-blue-600" />
@@ -436,7 +437,7 @@ export function Evoluciones({
<h3 className="font-bold"> <h3 className="font-bold">
{paciente ? `${paciente.apellido}, ${paciente.nombre}` : 'Paciente no encontrado'} {paciente ? `${paciente.apellido}, ${paciente.nombre}` : 'Paciente no encontrado'}
</h3> </h3>
<div className="flex items-center gap-3 text-sm text-gray-500"> <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-gray-500">
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Calendar className="h-3 w-3" /> <Calendar className="h-3 w-3" />
{evolucion.fecha} {evolucion.fecha}
@@ -449,7 +450,7 @@ export function Evoluciones({
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"
@@ -468,12 +469,13 @@ export function Evoluciones({
onClick={() => onEliminarEvolucion(evolucion.id)} onClick={() => onEliminarEvolucion(evolucion.id)}
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
Eliminar
</Button> </Button>
</div> </div>
</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}
+20 -22
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,12 +1146,13 @@ 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)}>
@@ -1178,7 +1175,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del, addAcidoBase }:
<TableHead>TP</TableHead> <TableHead>TP</TableHead>
<TableHead>KPTT</TableHead> <TableHead>KPTT</TableHead>
<TableHead>RIN</TableHead> <TableHead>RIN</TableHead>
<TableHead>Acciones</TableHead> <TableHead>+</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -1230,8 +1227,9 @@ function SeccionLaboratorios({ lab, patientId, add, update, del, addAcidoBase }:
</TableBody> </TableBody>
</Table> </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>