Agregar boton editar a estudios complementarios

src/App.tsx

@@ -157,6 +157,7 @@ function AppContent() {
             onActualizarCultivo={store.actualizarCultivo}
             onEliminarCultivo={store.eliminarCultivo}
             onAgregarEstudioComplementario={(e) => store.agregarEstudioComplementario({ ...e, internacionId: internacion.id })}
+            onActualizarEstudioComplementario={store.actualizarEstudioComplementario}
             onEliminarEstudioComplementario={store.eliminarEstudioComplementario}
             onActualizarInternacion={store.actualizarInternacion}
             onActualizarCama={store.actualizarCama}

src/sections/HistoriaClinica.tsx

@@ -75,6 +75,7 @@ interface HistoriaClinicaProps {
   onActualizarCultivo: (id: string, datos: Partial<Cultivo>) => void;
   onEliminarCultivo: (id: string) => void;
   onAgregarEstudioComplementario: (estudio: Omit<EstudioComplementario, 'id'>) => void;
+  onActualizarEstudioComplementario: (id: string, datos: Partial<EstudioComplementario>) => void;
   onEliminarEstudioComplementario: (id: string) => void;
   onActualizarInternacion: (id: string, datos: Partial<Internacion>) => void;
   onActualizarCama: (id: string, datos: Partial<Cama>) => void;
@@ -305,7 +306,7 @@ export function HistoriaClinica({
                 <p className="font-medium">{internacion.diagnosticoIngreso}</p>
               </div>
 
-              <Accordion type="single" collapsible defaultValue="item-1">
+              <Accordion type="single" collapsible>
                 <AccordionItem value="item-1">
                   <AccordionTrigger>Detalle Episodio Actual</AccordionTrigger>
                   <AccordionContent className="p4">
@@ -473,8 +474,8 @@ export function HistoriaClinica({
           </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">Ácido-Base</span>
+            <span className="hidden sm:inline">EAB</span>
-            <span className="sm:hidden">AB</span>
+            <span className="sm:hidden">EAB</span>
             ({acidosBase.length})
           </TabsTrigger>
           <TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
@@ -513,6 +514,8 @@ export function HistoriaClinica({
             internacionId={internacion.id}
             pacienteId={paciente.id}
             add={onAgregarEstudioComplementario}
+            // @ts-expect-error - type issue with onActualizarEstudioComplementario
+            update={onActualizarEstudioComplementario}
             del={onEliminarEstudioComplementario}
           />
         </TabsContent>
@@ -1835,11 +1838,12 @@ function SeccionCultivos({ cults, patient, add, update, del }: {
   );
 }
 
-function SeccionEstudiosComplementarios({ estudios, internacionId, pacienteId, add, del }: {
+function SeccionEstudiosComplementarios({ estudios, internacionId, pacienteId, add, update, del }: {
   estudios: EstudioComplementario[];
   internacionId: string;
   pacienteId: string;
   add: (e: Omit<EstudioComplementario, 'id'>) => void;
+  update: (id: string, datos: Partial<EstudioComplementario>) => void;
   del: (id: string) => void;
 }) {
   const [dialog, setDialog] = useState(false);
@@ -1847,6 +1851,7 @@ function SeccionEstudiosComplementarios({ estudios, internacionId, pacienteId, a
   const [fecha, setFecha] = useState(new Date().toISOString().split('T')[0]);
   const [tipo, setTipo] = useState('');
   const [resultado, setResultado] = useState('');
+  const [edit, setEdit] = useState<EstudioComplementario | null>(null);
 
   const estudiosFiltrados = filtro === 'internacion'
     ? estudios.filter(e => e.internacionId === internacionId)
@@ -1856,17 +1861,30 @@ function SeccionEstudiosComplementarios({ estudios, internacionId, pacienteId, a
     setFecha(new Date().toISOString().split('T')[0]);
     setTipo('');
     setResultado('');
+    setEdit(null);
+  };
+
+  const loadEdit = (e: EstudioComplementario) => {
+    setEdit(e);
+    setFecha(e.fecha);
+    setTipo(e.tipo);
+    setResultado(e.resultado);
+    setDialog(true);
   };
 
   const handleGuardar = () => {
     if (!tipo || !resultado) return;
-    add({
+    if (edit) {
-      pacienteId,
+      update(edit.id, { fecha, tipo, resultado });
-      internacionId,
+    } else {
-      fecha,
+      add({
-      tipo,
+        pacienteId,
-      resultado,
+        internacionId,
-    });
+        fecha,
+        tipo,
+        resultado,
+      });
+    }
     setDialog(false);
     reset();
   };
@@ -1894,7 +1912,7 @@ function SeccionEstudiosComplementarios({ estudios, internacionId, pacienteId, a
       <Dialog open={dialog} onOpenChange={setDialog}>
         <DialogContent className="sm:max-w-lg">
           <DialogHeader>
-            <DialogTitle>Nuevo Estudio Complementario</DialogTitle>
+            <DialogTitle>{edit ? 'Editar' : 'Nuevo'} Estudio Complementario</DialogTitle>
           </DialogHeader>
           <div className="space-y-4">
             <div>
@@ -1948,9 +1966,14 @@ function SeccionEstudiosComplementarios({ estudios, internacionId, pacienteId, a
                     <h4 className="font-semibold text-gray-900 dark:text-white">{e.tipo}</h4>
                     <p className="text-sm text-gray-600 dark:text-gray-300 mt-1 whitespace-pre-wrap">{e.resultado}</p>
                   </div>
-                  <Button size="sm" variant="outline" className="text-red-600 self-start" onClick={() => del(e.id)}>
+                  <div className="flex gap-1 self-start">
-                    <Trash2 className="h-4 w-4" />
+                    <Button size="sm" variant="outline" onClick={() => loadEdit(e)}>
-                  </Button>
+                      <Pencil className="h-4 w-4" />
+                    </Button>
+                    <Button size="sm" variant="outline" className="text-red-600" onClick={() => del(e.id)}>
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
                 </div>
               </CardContent>
             </Card>