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,
|
onEditarIngreso,
|
||||||
}: HistoriaClinicaProps) {
|
}: HistoriaClinicaProps) {
|
||||||
const [tabActivo, setTabActivo] = useState('evoluciones');
|
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 calcularEdad = (fechaNacimiento: string) => {
|
||||||
const hoy = new Date();
|
const hoy = new Date();
|
||||||
@@ -250,18 +242,19 @@ export function HistoriaClinica({
|
|||||||
</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>
|
|
||||||
</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>
|
<Card>
|
||||||
<CardContent className="p-4">
|
<CardContent className="p-4">
|
||||||
@@ -472,105 +465,108 @@ export function HistoriaClinica({
|
|||||||
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</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}>
|
<TabsTrigger value="indicaciones">
|
||||||
<ScrollArea className="w-full max-w-full">
|
<List className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||||
<TabsList className="inline-flex w-max min-w-full justify-start gap-1 p-1">
|
<span>Indicaciones</span>
|
||||||
<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" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
</TabsTrigger>
|
||||||
<List className="h-3 w-3 sm:h-4 sm:w-4" />
|
|
||||||
<span className="hidden sm:inline">Indicaciones</span>
|
|
||||||
|
|
||||||
</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">
|
<TabsContent value="laboratorios" className="mt-4 min-w-0 w-full overflow-hidden">
|
||||||
<FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
|
<SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} />
|
||||||
<span className="hidden sm:inline">Laboratorio</span>
|
</TabsContent>
|
||||||
({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">
|
<TabsContent value="evoluciones" className="mt-4">
|
||||||
<SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} />
|
<SeccionEvoluciones evos={evoluciones} internacionId={internacion.id} add={onAgregarEvolucion} update={onActualizarEvolucion} del={onEliminarEvolucion} />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="evoluciones" className="mt-4">
|
<TabsContent value="acidobase" className="mt-4">
|
||||||
<SeccionEvoluciones evos={evoluciones} internacionId={internacion.id} add={onAgregarEvolucion} update={onActualizarEvolucion} del={onEliminarEvolucion} />
|
<SeccionAcidosBase ab={acidosBase} patientId={paciente.id} add={onAgregarAcidoBase} update={onActualizarAcidoBase} del={onEliminarAcidoBase} />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="acidobase" className="mt-4">
|
<TabsContent value="cultivos" className="mt-4">
|
||||||
<SeccionAcidosBase ab={acidosBase} patientId={paciente.id} add={onAgregarAcidoBase} update={onActualizarAcidoBase} del={onEliminarAcidoBase} />
|
<SeccionCultivos cults={cultivos} patient={paciente} add={onAgregarCultivo} update={onActualizarCultivo} del={onEliminarCultivo} />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="cultivos" className="mt-4">
|
<TabsContent value="atb" className="mt-4">
|
||||||
<SeccionCultivos cults={cultivos} patient={paciente} add={onAgregarCultivo} update={onActualizarCultivo} del={onEliminarCultivo} />
|
<SeccionATB
|
||||||
</TabsContent>
|
atb={atb}
|
||||||
|
internacionId={internacion.id}
|
||||||
|
pacienteId={paciente.id}
|
||||||
|
add={onAgregarATB}
|
||||||
|
update={onActualizarATB}
|
||||||
|
del={onEliminarATB}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="atb" className="mt-4">
|
<TabsContent value="estudios" className="mt-4">
|
||||||
<SeccionATB
|
<SeccionEstudiosComplementarios
|
||||||
atb={atb}
|
estudios={estudiosComplementarios}
|
||||||
internacionId={internacion.id}
|
internacionId={internacion.id}
|
||||||
pacienteId={paciente.id}
|
pacienteId={paciente.id}
|
||||||
add={onAgregarATB}
|
add={onAgregarEstudioComplementario}
|
||||||
update={onActualizarATB}
|
update={onActualizarEstudioComplementario}
|
||||||
del={onEliminarATB}
|
del={onEliminarEstudioComplementario}
|
||||||
/>
|
/>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="estudios" className="mt-4">
|
<TabsContent value="interconsultas" className="mt-4">
|
||||||
<SeccionEstudiosComplementarios
|
<SeccionInterconsultas
|
||||||
estudios={estudiosComplementarios}
|
interconsultas={interconsultas as Interconsulta[]}
|
||||||
internacionId={internacion.id}
|
pacienteId={paciente.id}
|
||||||
pacienteId={paciente.id}
|
internacionId={internacion.id}
|
||||||
add={onAgregarEstudioComplementario}
|
add={onAgregarInterconsulta}
|
||||||
update={onActualizarEstudioComplementario}
|
update={onActualizarInterconsulta}
|
||||||
del={onEliminarEstudioComplementario}
|
del={onEliminarInterconsulta}
|
||||||
/>
|
/>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
<TabsContent value="interconsultas" className="mt-4">
|
</div>
|
||||||
<SeccionInterconsultas
|
</div>
|
||||||
interconsultas={interconsultas as Interconsulta[]}
|
|
||||||
pacienteId={paciente.id}
|
|
||||||
internacionId={internacion.id}
|
|
||||||
add={onAgregarInterconsulta}
|
|
||||||
update={onActualizarInterconsulta}
|
|
||||||
del={onEliminarInterconsulta}
|
|
||||||
/>
|
|
||||||
</TabsContent>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1388,10 +1384,10 @@ function SeccionEvoluciones({ evos, internacionId, add, update, del }: {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-4">
|
<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>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>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><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>
|
||||||
<div><Label>Médico *</Label><Input value={medico} onChange={e => setMedico(e.target.value)} placeholder="Nombre del médico" /></div>
|
<div><Label>Médico *</Label><Input value={medico} onChange={e => setMedico(e.target.value)} placeholder="Nombre del médico" /></div>
|
||||||
</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>
|
<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><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">
|
<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="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="outline" 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" className="text-red-600" onClick={() => del(e.id)}><Trash2 /></Button>
|
||||||
</div>
|
</div>
|
||||||
</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>}
|
{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>Lactato</TableHead>
|
||||||
<TableHead>FiO2</TableHead>
|
<TableHead>FiO2</TableHead>
|
||||||
<TableHead>PaFiO2</TableHead>
|
<TableHead>PaFiO2</TableHead>
|
||||||
|
<TableHead>...</TableHead>
|
||||||
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
@@ -1617,6 +1614,23 @@ function SeccionAcidosBase({ ab, patientId, add, update, del }: {
|
|||||||
<TableCell>{a.sato2}</TableCell>
|
<TableCell>{a.sato2}</TableCell>
|
||||||
<TableCell>{a.lactato}</TableCell>
|
<TableCell>{a.lactato}</TableCell>
|
||||||
<TableCell>{a.fio2}</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>
|
<TableCell>
|
||||||
|
|||||||
Reference in New Issue
Block a user