refactor: remove unused state variables and streamline Tabs layout in HistoriaClinica component
This commit is contained in:
+128
-114
@@ -206,15 +206,7 @@ export function HistoriaClinica({
|
||||
onEditarIngreso,
|
||||
}: HistoriaClinicaProps) {
|
||||
const [tabActivo, setTabActivo] = useState('evoluciones');
|
||||
const [detalleExpandido, setDetalleExpandido] = useState(false);
|
||||
const [editIngresoDialog, setEditIngresoDialog] = useState(false);
|
||||
const [editFechaIngreso, setEditFechaIngreso] = useState(internacion.fechaIngresoClinica);
|
||||
const [editMotivoConsulta, setEditMotivoConsulta] = useState(internacion.motivoConsulta || '');
|
||||
const [editDiagnostico, setEditDiagnostico] = useState(internacion.diagnosticoIngreso || '');
|
||||
const [editEnfermedadActual, setEditEnfermedadActual] = useState(internacion.enfermedadActual || '');
|
||||
const [editAntecedentes, setEditAntecedentes] = useState(internacion.antecedentesEnfermedadActual || '');
|
||||
const [editMedico, setEditMedico] = useState(internacion.medicoIngresante || '');
|
||||
const [editCamaId, setEditCamaId] = useState(internacion.camaId || '');
|
||||
|
||||
|
||||
const calcularEdad = (fechaNacimiento: string) => {
|
||||
const hoy = new Date();
|
||||
@@ -250,18 +242,19 @@ export function HistoriaClinica({
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex gap-2 ml-auto sm:ml-0">
|
||||
<Button variant="secondary" onClick={onVolver}>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Volver
|
||||
</Button>
|
||||
<Button onClick={onEditarIngreso}>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
Editar Ingreso
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 ml-auto sm:ml-0">
|
||||
<Button variant="secondary" onClick={onVolver}>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Volver
|
||||
</Button>
|
||||
<Button onClick={onEditarIngreso}>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
Editar Ingreso
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
@@ -472,105 +465,108 @@ export function HistoriaClinica({
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid grid-cols-1 w-full">
|
||||
<div className="w-full overflow-x-auto rounded-md border pb-2">
|
||||
<Tabs className="w-full" value={tabActivo} onValueChange={setTabActivo}>
|
||||
<ScrollArea className="w-full rounded-md border bg-background whitespace-nowrap">
|
||||
<TabsList>
|
||||
<TabsTrigger value="evoluciones">
|
||||
<FileText className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
<span>Evoluciones</span>
|
||||
({evoluciones.length})
|
||||
</TabsTrigger>
|
||||
|
||||
<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="indicaciones">
|
||||
<List className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
<span>Indicaciones</span>
|
||||
|
||||
<TabsTrigger value="indicaciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
||||
<List className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
<span className="hidden sm:inline">Indicaciones</span>
|
||||
</TabsTrigger>
|
||||
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="laboratorios">
|
||||
<FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
<span>Laboratorio</span>
|
||||
({laboratorios.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="acidobase">
|
||||
<Activity className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
<span>EAB</span>
|
||||
({acidosBase.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="cultivos">
|
||||
<Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
<span>Cultivos</span>
|
||||
({cultivos.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="atb">
|
||||
<Pill className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
<span>ATB</span>
|
||||
({atb.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="estudios">
|
||||
<ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
<span>Estudios</span>
|
||||
({estudiosComplementarios.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="interconsultas">
|
||||
<Users className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
<span>Interconsultas</span>
|
||||
({interconsultas.length})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
|
||||
<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-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-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-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>
|
||||
({atb.length})
|
||||
</TabsTrigger>
|
||||
<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-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})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<TabsContent value="evoluciones" className="mt-4">
|
||||
<SeccionEvoluciones evos={evoluciones} internacionId={internacion.id} add={onAgregarEvolucion} update={onActualizarEvolucion} del={onEliminarEvolucion} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="evoluciones" className="mt-4">
|
||||
<SeccionEvoluciones evos={evoluciones} internacionId={internacion.id} add={onAgregarEvolucion} update={onActualizarEvolucion} del={onEliminarEvolucion} />
|
||||
</TabsContent>
|
||||
<TabsContent value="acidobase" className="mt-4">
|
||||
<SeccionAcidosBase ab={acidosBase} patientId={paciente.id} add={onAgregarAcidoBase} update={onActualizarAcidoBase} del={onEliminarAcidoBase} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="acidobase" className="mt-4">
|
||||
<SeccionAcidosBase ab={acidosBase} patientId={paciente.id} add={onAgregarAcidoBase} update={onActualizarAcidoBase} del={onEliminarAcidoBase} />
|
||||
</TabsContent>
|
||||
<TabsContent value="cultivos" className="mt-4">
|
||||
<SeccionCultivos cults={cultivos} patient={paciente} add={onAgregarCultivo} update={onActualizarCultivo} del={onEliminarCultivo} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="cultivos" className="mt-4">
|
||||
<SeccionCultivos cults={cultivos} patient={paciente} add={onAgregarCultivo} update={onActualizarCultivo} del={onEliminarCultivo} />
|
||||
</TabsContent>
|
||||
<TabsContent value="atb" className="mt-4">
|
||||
<SeccionATB
|
||||
atb={atb}
|
||||
internacionId={internacion.id}
|
||||
pacienteId={paciente.id}
|
||||
add={onAgregarATB}
|
||||
update={onActualizarATB}
|
||||
del={onEliminarATB}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="atb" className="mt-4">
|
||||
<SeccionATB
|
||||
atb={atb}
|
||||
internacionId={internacion.id}
|
||||
pacienteId={paciente.id}
|
||||
add={onAgregarATB}
|
||||
update={onActualizarATB}
|
||||
del={onEliminarATB}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="estudios" className="mt-4">
|
||||
<SeccionEstudiosComplementarios
|
||||
estudios={estudiosComplementarios}
|
||||
internacionId={internacion.id}
|
||||
pacienteId={paciente.id}
|
||||
add={onAgregarEstudioComplementario}
|
||||
update={onActualizarEstudioComplementario}
|
||||
del={onEliminarEstudioComplementario}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="estudios" className="mt-4">
|
||||
<SeccionEstudiosComplementarios
|
||||
estudios={estudiosComplementarios}
|
||||
internacionId={internacion.id}
|
||||
pacienteId={paciente.id}
|
||||
add={onAgregarEstudioComplementario}
|
||||
update={onActualizarEstudioComplementario}
|
||||
del={onEliminarEstudioComplementario}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="interconsultas" className="mt-4">
|
||||
<SeccionInterconsultas
|
||||
interconsultas={interconsultas as Interconsulta[]}
|
||||
pacienteId={paciente.id}
|
||||
internacionId={internacion.id}
|
||||
add={onAgregarInterconsulta}
|
||||
update={onActualizarInterconsulta}
|
||||
del={onEliminarInterconsulta}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
<TabsContent value="interconsultas" className="mt-4">
|
||||
<SeccionInterconsultas
|
||||
interconsultas={interconsultas as Interconsulta[]}
|
||||
pacienteId={paciente.id}
|
||||
internacionId={internacion.id}
|
||||
add={onAgregarInterconsulta}
|
||||
update={onActualizarInterconsulta}
|
||||
del={onEliminarInterconsulta}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1388,10 +1384,10 @@ function SeccionEvoluciones({ evos, internacionId, add, update, del }: {
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div><Label>Novedades</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[80px] bg-transparent dark:bg-input/30" value={novedades} onChange={e => setNovedades(e.target.value)} placeholder="Novedades..." /></div>
|
||||
<div><Label>Comentario</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[80px] bg-transparent dark:bg-input/30" value={comentario} onChange={e => setComentario(e.target.value)} placeholder="Comentarios adicionales..." /></div>
|
||||
<div><Label>Pendientes</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[80px] bg-transparent dark:bg-input/30" value={pendientes} onChange={e => setPendientes(e.target.value)} placeholder="Pendientes..." /></div>
|
||||
</div>
|
||||
<div><Label>Novedades</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[80px] bg-transparent dark:bg-input/30" value={novedades} onChange={e => setNovedades(e.target.value)} placeholder="Novedades..." /></div>
|
||||
<div><Label>Comentario</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[80px] bg-transparent dark:bg-input/30" value={comentario} onChange={e => setComentario(e.target.value)} placeholder="Comentarios adicionales..." /></div>
|
||||
<div><Label>Pendientes</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[80px] bg-transparent dark:bg-input/30" value={pendientes} onChange={e => setPendientes(e.target.value)} placeholder="Pendientes..." /></div>
|
||||
</div>
|
||||
<div><Label>Médico *</Label><Input value={medico} onChange={e => setMedico(e.target.value)} placeholder="Nombre del médico" /></div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 mt-4"><Button variant="outline" onClick={() => { reset(); setDialog(false); }}><X className="h-4 w-4 mr-2" />Cancelar</Button><Button onClick={handle} disabled={!medico}><Save className="h-4 w-4 mr-2" />Guardar Evolución</Button></div>
|
||||
@@ -1409,8 +1405,8 @@ function SeccionEvoluciones({ evos, internacionId, add, update, del }: {
|
||||
<div><p className="font-medium">{e.fecha} {e.hora}</p><p className="text-sm text-gray-600">Médico: {e.medico}</p></div>
|
||||
<div className="flex gap-1">
|
||||
<Button size="sm" variant="outline" onClick={() => setExpanded(isExpanded ? null : e.id)}>{isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}</Button>
|
||||
<Button size="sm" variant="ghost" onClick={() => openEdit(e)}><Pencil /></Button>
|
||||
<Button size="sm" variant="ghost" className="text-red-600" onClick={() => del(e.id)}><Trash2 /></Button>
|
||||
<Button size="sm" variant="outline" onClick={() => openEdit(e)}><Pencil /></Button>
|
||||
<Button size="sm" variant="outline" className="text-red-600" onClick={() => del(e.id)}><Trash2 /></Button>
|
||||
</div>
|
||||
</div>
|
||||
{svText && <div className="bg-blue-50 p-2 rounded-lg"><p className="text-sm font-medium text-blue-800 flex items-center gap-2"><Activity className="h-4 w-4" />Signos Vitales: {svText}</p></div>}
|
||||
@@ -1602,6 +1598,7 @@ function SeccionAcidosBase({ ab, patientId, add, update, del }: {
|
||||
<TableHead>Lactato</TableHead>
|
||||
<TableHead>FiO2</TableHead>
|
||||
<TableHead>PaFiO2</TableHead>
|
||||
<TableHead>...</TableHead>
|
||||
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
@@ -1617,6 +1614,23 @@ function SeccionAcidosBase({ ab, patientId, add, update, del }: {
|
||||
<TableCell>{a.sato2}</TableCell>
|
||||
<TableCell>{a.lactato}</TableCell>
|
||||
<TableCell>{a.fio2}</TableCell>
|
||||
<TableCell>{(() => {
|
||||
if (a.fio2 == null || a.fio2 <= 0) return <span className="badge">—</span>;
|
||||
|
||||
const pf = a.po2 / a.fio2;
|
||||
|
||||
const color =
|
||||
pf > 300 ? "green" :
|
||||
pf > 200 ? "yellow" :
|
||||
pf > 100 ? "orange" :
|
||||
"red";
|
||||
|
||||
return (
|
||||
<span className={`badge badge-${color}`}>
|
||||
{pf.toFixed(1)}
|
||||
</span>
|
||||
);
|
||||
})()}</TableCell>
|
||||
|
||||
|
||||
<TableCell>
|
||||
|
||||
Reference in New Issue
Block a user