From bf0439c49dc77515919d8ac35355cb17537eedc7 Mon Sep 17 00:00:00 2001
From: Sergio Nicolas Lavaise <snlavaise@gmail.com>
Date: Tue, 21 Apr 2026 03:00:38 -0300
Subject: [PATCH] refactor: remove unused state variables and streamline Tabs
 layout in HistoriaClinica component

---
 src/sections/HistoriaClinica.tsx | 242 ++++++++++++++++---------------
 1 file changed, 128 insertions(+), 114 deletions(-)

diff --git a/src/sections/HistoriaClinica.tsx b/src/sections/HistoriaClinica.tsx
index 222ca9b..4dac8f3 100644
--- a/src/sections/HistoriaClinica.tsx
+++ b/src/sections/HistoriaClinica.tsx
@@ -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>