snlavaise/administracionHospital
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove unused state variables and streamline Tabs layout in HistoriaClinica component

Browse Source
This commit is contained in:
snlavaise
2026-04-21 03:00:38 -03:00
parent c17202d3e3
commit bf0439c49d
1 changed files with 128 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sections/HistoriaClinica.tsx
+47 -33
View File
@@ -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,6 +242,9 @@ export function HistoriaClinica({
</div> </div>
</div>
<div className="flex gap-2 ml-auto sm:ml-0"> <div className="flex gap-2 ml-auto sm:ml-0">
<Button variant="secondary" onClick={onVolver}> <Button variant="secondary" onClick={onVolver}>
<ArrowLeft className="h-4 w-4 mr-2" /> <ArrowLeft className="h-4 w-4 mr-2" />
@@ -260,8 +255,6 @@ export function HistoriaClinica({
Editar Ingreso Editar Ingreso
</Button> </Button>
</div> </div>
</div>
<Card> <Card>
<CardContent className="p-4"> <CardContent className="p-4">
@@ -472,50 +465,51 @@ export function HistoriaClinica({
</CardContent> </CardContent>
</Card> </Card>
<div className="grid grid-cols-1 w-full">
<Tabs className="w-full max-w-full min-w-0" value={tabActivo} onValueChange={setTabActivo}> <div className="w-full overflow-x-auto rounded-md border pb-2">
<ScrollArea className="w-full max-w-full"> <Tabs className="w-full" value={tabActivo} onValueChange={setTabActivo}>
<TabsList className="inline-flex w-max min-w-full justify-start gap-1 p-1"> <ScrollArea className="w-full rounded-md border bg-background whitespace-nowrap">
<TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <TabsList>
<TabsTrigger value="evoluciones">
<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>Evoluciones</span>
({evoluciones.length}) ({evoluciones.length})
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="indicaciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <TabsTrigger value="indicaciones">
<List className="h-3 w-3 sm:h-4 sm:w-4" /> <List className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Indicaciones</span> <span>Indicaciones</span>
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <TabsTrigger value="laboratorios">
<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>Laboratorio</span>
({laboratorios.length}) ({laboratorios.length})
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <TabsTrigger value="acidobase">
<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>EAB</span>
({acidosBase.length}) ({acidosBase.length})
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <TabsTrigger value="cultivos">
<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>Cultivos</span>
({cultivos.length}) ({cultivos.length})
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <TabsTrigger value="atb">
<Pill className="h-3 w-3 sm:h-4 sm:w-4" /> <Pill className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">ATB</span> <span>ATB</span>
({atb.length}) ({atb.length})
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <TabsTrigger value="estudios">
<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>Estudios</span>
({estudiosComplementarios.length}) ({estudiosComplementarios.length})
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <TabsTrigger value="interconsultas">
<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>Interconsultas</span>
({interconsultas.length}) ({interconsultas.length})
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
@@ -572,6 +566,8 @@ export function HistoriaClinica({
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </div>
</div>
</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>