Agregar hora a laboratorios: modal importar, save con hora seleccionada

src/components/ui/accordion.tsx

@@ -1,64 +1,55 @@
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
+import { ChevronDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function Accordion({
+const Accordion = AccordionPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
 
-function AccordionItem({
+const AccordionItem = React.forwardRef<
-  className,
+  React.ElementRef<typeof AccordionPrimitive.Item>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+>(({ className, ...props }, ref) => (
-  return (
   <AccordionPrimitive.Item
-      data-slot="accordion-item"
+    ref={ref}
-      className={cn("border-b last:border-b-0", className)}
+    className={cn("border-b", className)}
     {...props}
   />
-  )
+))
-}
+AccordionItem.displayName = "AccordionItem"
 
-function AccordionTrigger({
+const AccordionTrigger = React.forwardRef<
-  className,
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  children,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
-  ...props
+>(({ className, children, ...props }, ref) => (
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
+      ref={ref}
       className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}
     >
       {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-  )
+))
-}
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
 
-function AccordionContent({
+const AccordionContent = React.forwardRef<
-  className,
+  React.ElementRef<typeof AccordionPrimitive.Content>,
-  children,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
-  ...props
+>(({ className, children, ...props }, ref) => (
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
   <AccordionPrimitive.Content
-      data-slot="accordion-content"
+    ref={ref}
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
   </AccordionPrimitive.Content>
-  )
+))
-}
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/sections/EditIngreso.tsx

@@ -84,9 +84,7 @@ export function EditIngreso({
     <div className="space-y-6 dark:text-white">
       <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
         <div className="flex items-center gap-4">
-          <Button variant="ghost" size="icon" onClick={onVolver}>
+
-            <ArrowLeft className="h-5 w-5" />
-          </Button>
           <div>
             <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
               <User className="h-6 w-6 text-blue-600" />

src/sections/HistoriaClinica.tsx

@@ -1,5 +1,13 @@
 import { useState } from 'react';
 import { PDFDocument } from 'pdf-lib';
+import { User } from 'lucide-react';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
 import {
   FlaskConical,
   Microscope,
@@ -145,6 +153,8 @@ function wrapText(text: string, font: any, fontSize: number, maxWidth: number):
   return lines;
 }
 
+
+
 export function HistoriaClinica({
   internacion,
   paciente,
@@ -203,40 +213,23 @@ export function HistoriaClinica({
     return Math.floor(diff / (1000 * 60 * 60 * 24));
   };
 
-  const handleGuardarEdicion = () => {
+
-    if (editCamaId && editCamaId !== internacion.camaId && cama) {
-      onActualizarCama(cama.id, { estado: 'Disponible', pacienteId: undefined, internacionId: undefined });
-    }
-    if (editCamaId) {
-      onActualizarCama(editCamaId, { estado: 'Ocupada', pacienteId: paciente.id, internacionId: internacion.id });
-    }
-    onActualizarInternacion(internacion.id, {
-      fechaIngresoClinica: editFechaIngreso,
-      motivoConsulta: editMotivoConsulta,
-      diagnosticoIngreso: editDiagnostico,
-      enfermedadActual: editEnfermedadActual,
-      antecedentesEnfermedadActual: editAntecedentes,
-      medicoIngresante: editMedico,
-      camaId: editCamaId || undefined,
-    });
-    setEditIngresoDialog(false);
-  };
 
   return (
     <div className="space-y-6 dark:text-white">
-      <div>
+
-        <div className="flex items-center gap-4 mb-4">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
 
         <div>
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2"><ClipboardList className="h-6 w-6" />Historia Clínica</h1>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
-            <p className="text-gray-500">
+            <ClipboardList className="h-6 w-6 text-blue-600" />
-              Cama: {cama?.numero || 'N/A'} | {paciente.apellido}, {paciente.nombre} | {paciente.fechaNacimiento ? calcularEdad(paciente.fechaNacimiento) + ' años' : ''} | DNI: {paciente.dni}
+            {cama?.numero || 'N/A'} - Historia Clínica
-            </p>
+          </h1>
+          <p className="text-gray-500 dark:text-gray-400">Módulo de Historia Clínica de Internación</p>
         </div>
 
-        </div>
+        <div className="flex items-center gap-2">
 
-        <div className="flex items-center gap-2 flex-wrap">
           <Button variant="outline" onClick={onVolver}>
             <ArrowLeft className="h-4 w-4 mr-2" />
             Volver
@@ -246,120 +239,79 @@ export function HistoriaClinica({
             Editar Ingreso
           </Button>
         </div>
-
       </div>
 
 
-
-
-
-      <Dialog open={editIngresoDialog} onOpenChange={setEditIngresoDialog}>
-        <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle>Editar Ingreso</DialogTitle>
-          </DialogHeader>
-          <Card className="bg-muted/50">
-            <CardContent className="p-4">
-              <div className="flex flex-wrap gap-2 mb-2">
-                <Badge variant="outline" className="bg-primary/10 text-primary border-primary/30">
-                  {paciente.apellido}, {paciente.nombre}
-                </Badge>
-                <Badge variant="outline" className="bg-primary/10 text-primary border-primary/30">
-                  {paciente.fechaNacimiento ? calcularEdad(paciente.fechaNacimiento) + ' años' : ''}
-                </Badge>
-                <Badge variant="outline" className="bg-primary/10 text-primary border-primary/30">
-                  DNI: {paciente.dni}
-                </Badge>
-              </div>
-              <div className="flex flex-wrap gap-2">
-                <Badge variant="secondary">
-                  HC: {paciente.historiaClinica || 'N/A'}
-                </Badge>
-                <Badge variant="secondary">
-                  {paciente.obraSocial || 'Sin obra social'}
-                </Badge>
-                <Badge variant="secondary">
-                  {paciente.nacionalidad || 'N/A'}
-                </Badge>
-              </div>
-            </CardContent>
-          </Card>
-          <div className="space-y-4">
-            <div className="grid grid-cols-3 gap-4">
-              <div>
-                <Label>Fecha de Ingreso *</Label>
-                <Input type="date" value={editFechaIngreso} onChange={e => setEditFechaIngreso(e.target.value)} />
-              </div>
-              <div>
-                <Label>Médico Ingresante *</Label>
-                <Input value={editMedico} onChange={e => setEditMedico(e.target.value)} placeholder="Nombre del médico" />
-              </div>
-              <div>
-                <Label>Cama</Label>
-                <Select value={editCamaId} onValueChange={setEditCamaId}>
-                  <SelectTrigger><SelectValue placeholder="Seleccionar cama" /></SelectTrigger>
-                  <SelectContent>
-                    {(allCamas || []).filter((c: Cama) => c.estado === 'Disponible' || c.id === cama?.id).map((c: Cama) => (
-                      <SelectItem key={c.id} value={c.id}>{c.numero}</SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-            <div>
-              <Label>Motivo de Consulta</Label>
-              <textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={editMotivoConsulta} onChange={e => setEditMotivoConsulta(e.target.value)} />
-            </div>
-            <div>
-              <Label>Diagnóstico de Ingreso *</Label>
-              <textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={editDiagnostico} onChange={e => setEditDiagnostico(e.target.value)} />
-            </div>
-            <div>
-              <Label>Enfermedad Actual</Label>
-              <textarea className="w-full p-2 border rounded-md text-sm min-h-[80px]" value={editEnfermedadActual} onChange={e => setEditEnfermedadActual(e.target.value)} />
-            </div>
-            <div>
-              <Label>Antecedentes de la Enfermedad Actual</Label>
-              <textarea className="w-full p-2 border rounded-md text-sm min-h-[80px]" value={editAntecedentes} onChange={e => setEditAntecedentes(e.target.value)} />
-            </div>
-          </div>
-          <div className="flex justify-end gap-2 mt-4">
-            <Button variant="outline" onClick={() => setEditIngresoDialog(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button>
-            <Button onClick={handleGuardarEdicion} disabled={!editFechaIngreso || !editDiagnostico || !editMedico}><Save className="h-4 w-4 mr-2" />Guardar</Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
       <Card>
-        <CardContent className="p-0">
+        <CardContent className="p-4">
-          <button type="button" className="w-full p-4 flex items-center justify-between hover:bg-gray-50" onClick={() => setDetalleExpandido(!detalleExpandido)}>
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm w-full">
+            <div><h2 className="font-bold text-lg text-gray-900 flex items-center gap-2">
+              <User className="h-4 w-4" />
+              {paciente.apellido}, {paciente.nombre}
+            </h2>
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge className={internacion.fechaIngresoClinica && calcularDiasInternado(internacion.fechaIngresoClinica) > 7 ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800'}>
+                {internacion.fechaIngresoClinica ? calcularDiasInternado(internacion.fechaIngresoClinica) : 0} días internado
+              </Badge>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex flex-wrap gap-2">
+              <Badge variant="outline" className="text-sm px-3 py-1 bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">
+                {paciente.fechaNacimiento ? calcularEdad(paciente.fechaNacimiento) + ' años' : ''}
+              </Badge>
+
+              <Badge variant="outline" className="text-sm px-3 py-1 bg-blue-50 text-blue-700 border-blue-200">
+                DNI: {paciente.dni}
+              </Badge>
+
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              <Badge variant="secondary" className="text-sm px-3 py-1">
+                HC: {paciente.historiaClinica || 'No posee'}
+              </Badge>
+              <Badge variant="secondary" className="text-sm px-3 py-1">
+                OS: {paciente.obraSocial || 'No posee'}
+              </Badge>
+              <Badge variant="secondary" className="text-sm px-3 py-1">
+                Nacionalidad: {paciente.nacionalidad || 'N/A'}
+              </Badge>
+            </div>
+
+            <div className="border-t p-4 space-y-4">
+
 
               <div>
-                <p className="text-gray-500">Antecedentes</p>
+                <p className="text-gray-500 text-sm">Antecedentes</p>
-                <p className="font-medium truncate">{paciente.antecedentes || 'No constan'}</p>
+                <p className="font-medium">{paciente.antecedentes || 'No refiere'}</p>
+              </div>
+
+
+              <div>
+                <p className="text-gray-500 text-sm">MH</p>
+                <p className="font-medium">{paciente.medicacionHabitual || 'No refiere'}</p>
               </div>
 
               <div>
                 <p className="text-gray-500">Fecha de Ingreso</p>
                 <p className="font-medium">{internacion.fechaIngresoClinica ? formatDateDDMMYYYY(internacion.fechaIngresoClinica) : 'N/A'}</p>
               </div>
+
               <div>
                 <p className="text-gray-500">Diagnóstico de Ingreso</p>
-                <p className="font-medium truncate">{internacion.diagnosticoIngreso}</p>
+                <p className="font-medium">{internacion.diagnosticoIngreso}</p>
-              </div>
-              <div>
-                <p className="text-gray-500">Días de Internación</p>
-                <Badge className={internacion.fechaIngresoClinica && calcularDiasInternado(internacion.fechaIngresoClinica) > 7 ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800'}>
-                  {internacion.fechaIngresoClinica ? calcularDiasInternado(internacion.fechaIngresoClinica) : 0} días
-                </Badge>
               </div>
 
-            </div>
+              <Accordion type="single" collapsible defaultValue="item-1">
-            {detalleExpandido ? <ChevronUp className="h-5 w-5 text-gray-400" /> : <ChevronDown className="h-5 w-5 text-gray-400" />}
+                <AccordionItem value="item-1">
-          </button>
+                  <AccordionTrigger>Detalle Episodio Actual</AccordionTrigger>
-          {detalleExpandido && (
+                  <AccordionContent className="p4">
                     <div className="border-t p-4 space-y-4">
+
+
                       <div>
                         <p className="text-gray-500 text-sm">Motivo de Consulta</p>
                         <p className="font-medium">{internacion.motivoConsulta || 'Sin motivo registrado'}</p>
@@ -489,10 +441,22 @@ export function HistoriaClinica({
                         Descargar Formulario de Ingreso
                       </Button>
                     </div>
-          )}
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+
+            </div>
+
+          </div>
+
         </CardContent>
       </Card>
 
+
+
+
+
+
       <Tabs value={tabActivo} onValueChange={setTabActivo}>
         <TabsList className="flex w-full overflow-x-auto gap-1 pb-2">
           <TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
@@ -1146,7 +1110,7 @@ for (const linea of lineas) {
             <Button variant="outline" onClick={() => setImportDialog(false)}>Cancelar</Button>
             <Button onClick={handleImportarLaboratorio} disabled={importResultados.length === 0 && !importObservaciones && !importAcidoBase}>
               <Save className="h-4 w-4 mr-2" />
-              {(importAcidoBase ? 'Guardar Gasometría' : 'Guardar Laboratorio')}
+              {(importAcidoBase ? 'Guardar' : 'Guardar Laboratorio')}
             </Button>
           </div>
         </DialogContent>

src/sections/Internaciones.tsx

@@ -310,8 +310,7 @@ export function Internaciones({
               <CardContent className="p-4 dark:bg-gray-800">
                 <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
                   <div className="flex items-start gap-4">
-                    <div className={`h-12 w-12 rounded-full flex items-center justify-center flex-shrink-0 ${
+                    <div className={`h-12 w-12 rounded-full flex items-center justify-center flex-shrink-0 ${internacion.activa ? 'bg-purple-100' : 'bg-gray-100'
-                      internacion.activa ? 'bg-purple-100' : 'bg-gray-100'
                       }`}>
                       {internacion.activa ? (
                         <ClipboardList className="h-6 w-6 text-purple-600" />