Fix: Layout NuevoIngreso igual a EditIngreso, cards del mismo tamaño

2026-04-14 01:10:31 -03:00
parent 111863baf2
commit 7705e4147e
2 changed files with 217 additions and 226 deletions
@@ -96,10 +96,10 @@ export function EditIngreso({
        </div>
      </div>

-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {/* Columna 1: Datos del Paciente, Cama y Datos Adicionales */}
        <div className="space-y-6">
-          <Card>
+          <Card className="min-h-[200px]">
            <CardContent className="pt-6 space-y-4">
              <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                <User className="h-4 w-4" />
@@ -151,8 +151,11 @@ export function EditIngreso({
              )}
            </CardContent>
          </Card>
+        </div>

-          <Card>
+        {/* Columna 2: Cama */}
+        <div className="space-y-6">
+          <Card className="min-h-[200px]">
            <CardContent className="pt-6 space-y-4">
              <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                <Bed className="h-4 w-4" />
@@ -160,7 +163,7 @@ export function EditIngreso({
              </h3>

              <div>
-                <Label>Cama *</Label>
+
                <Select value={camaSeleccionada} onValueChange={setCamaSeleccionada}>
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar cama" />
@@ -168,7 +171,7 @@ export function EditIngreso({
                  <SelectContent>
                    {camas.map(c => (
                      <SelectItem key={c.id} value={c.id}>
-                        {c.numero} - {getAreaName(c.areaId)} ({c.tipo})
+                        {c.numero} - {getAreaName(c.areaId)}
                      </SelectItem>
                    ))}
                  </SelectContent>
@@ -176,35 +179,10 @@ export function EditIngreso({
              </div>
            </CardContent>
          </Card>
-
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <h3 className="font-semibold text-gray-900 flex items-center gap-2">
-                <ClipboardList className="h-4 w-4" />
-                Datos Adicionales
-              </h3>
-              
-              <div>
-                <Label>Apache / Mortalidad</Label>
-                <Input 
-                  placeholder="Valor Apache o riesgo" 
-                  value={apache}
-                  onChange={(e) => setApache(e.target.value)}
-                />
        </div>
-              <div>
-                <Label>Derivado de</Label>
-                <Input 
-                  placeholder="Hospital o clínica de derivación" 
-                  value={derivacion}
-                  onChange={(e) => setDerivacion(e.target.value)}
-                />
-              </div>
-            </CardContent>
-          </Card>
      </div>

-        {/* Columna 2: Datos de Ingreso */}
+
      <div className="space-y-6">
        <Card>
          <CardContent className="pt-6 space-y-4">
@@ -213,6 +191,7 @@ export function EditIngreso({
              Datos de Ingreso
            </h3>

+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <Label>Fecha Ingreso al Hospital</Label>
                <Input
@@ -229,14 +208,7 @@ export function EditIngreso({
                  onChange={(e) => setFechaIngresoClinica(e.target.value)}
                />
              </div>
-              <div>
-                <Label>Apache / Mortalidad</Label>
-                <Input 
-                  placeholder="Valor Apache o riesgo" 
-                  value={apache}
-                  onChange={(e) => setApache(e.target.value)}
-                />
-              </div>
+
              <div>
                <Label>Derivado de</Label>
                <Input
@@ -245,29 +217,23 @@ export function EditIngreso({
                  onChange={(e) => setDerivacion(e.target.value)}
                />
              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <h3 className="font-semibold text-gray-900 flex items-center gap-2">
-                <Stethoscope className="h-4 w-4" />
-                Médico Ingresante
-              </h3>

              <div>
-                <Label>Médico Ingresante *</Label>
+                <Label>Apache / Mortalidad</Label>
                <Input
-                  placeholder="Nombre del médico" 
-                  value={medico}
-                  onChange={(e) => setMedico(e.target.value)}
+                  placeholder="Valor Apache o riesgo"
+                  value={apache}
+                  onChange={(e) => setApache(e.target.value)}
                />
              </div>
+            </div>
          </CardContent>
        </Card>
+
      </div>

-        {/* Columna 3: Datos Clínicos */}
+
+
      <div className="space-y-6">
        <Card>
          <CardContent className="pt-6 space-y-4">
@@ -306,7 +272,7 @@ export function EditIngreso({
            </div>

            <div>
-                <Label>Antecedentes de la Enfermedad Actual</Label>
+              <Label>Antecedentes de Enfermedad Actual</Label>
              <textarea
                className="w-full p-2 border rounded-md text-sm min-h-[80px]"
                placeholder="Antecedentes relevantes"
@@ -317,7 +283,30 @@ export function EditIngreso({
          </CardContent>
        </Card>
      </div>
+
+
+      {/* Columna 4: Médico Ingresante */}
+      <div className="space-y-6">
+
+        <Card>
+          <CardContent className="pt-6 space-y-4">
+            <h3 className="font-semibold text-gray-900 flex items-center gap-2">
+              <Stethoscope className="h-4 w-4" />
+              Médico Ingresante
+            </h3>
+
+            <div>
+              <Label>Médico Ingresante *</Label>
+              <Input
+                placeholder="Nombre del médico"
+                value={medico}
+                onChange={(e) => setMedico(e.target.value)}
+              />
            </div>
+          </CardContent>
+        </Card>
+      </div>
+
    </div>
  );
 }
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { ArrowLeft, Save, X, Bed, Calendar, Stethoscope, User, ClipboardList } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -73,9 +73,6 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
  };

  const selectedPaciente = pacientes.find(p => p.id === pacienteSeleccionado);
-  const camasDisponibles = camaSeleccionada 
-    ? []
-    : camas.filter(c => c.estado === 'Disponible' && !c.pacienteId);

  return (
    <div className="space-y-6">
@@ -104,10 +101,10 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
        </div>
      </div>

-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Columna 1: Datos del Paciente, Cama y Datos Adicionales */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {/* Columna 1: Datos del Paciente */}
        <div className="space-y-6">
-          <Card>
+          <Card className="min-h-[200px]">
            <CardContent className="pt-6 space-y-4">
              <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                <User className="h-4 w-4" />
@@ -162,8 +159,11 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
              )}
            </CardContent>
          </Card>
+        </div>

-          <Card>
+        {/* Columna 2: Cama */}
+        <div className="space-y-6">
+          <Card className="min-h-[200px]">
            <CardContent className="pt-6 space-y-4">
              <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                <Bed className="h-4 w-4" />
@@ -179,7 +179,7 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
                  <SelectContent>
                    {camas.map(c => (
                      <SelectItem key={c.id} value={c.id}>
-                        {c.numero} - {getAreaName(c.areaId)} ({c.tipo})
+                        {c.numero} - {getAreaName(c.areaId)}
                      </SelectItem>
                    ))}
                  </SelectContent>
@@ -187,11 +187,9 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
              </div>
            </CardContent>
          </Card>
-
-          
+        </div>
      </div>

-        {/* Columna 2: Fechas y Médico */}
      <div className="space-y-6">
        <Card>
          <CardContent className="pt-6 space-y-4">
@@ -200,6 +198,7 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
              Datos de Ingreso
            </h3>
            
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <Label>Fecha Ingreso al Hospital</Label>
                <Input 
@@ -216,14 +215,7 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
                  onChange={(e) => setFechaIngresoClinica(e.target.value)}
                />
              </div>
-              <div>
-                <Label>Apache / Mortalidad</Label>
-                <Input 
-                  placeholder="Valor Apache o riesgo" 
-                  value={apache}
-                  onChange={(e) => setApache(e.target.value)}
-                />
-              </div>
+
              <div>
                <Label>Derivado de</Label>
                <Input 
@@ -232,29 +224,20 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
                  onChange={(e) => setDerivacion(e.target.value)}
                />
              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <h3 className="font-semibold text-gray-900 flex items-center gap-2">
-                <Stethoscope className="h-4 w-4" />
-                Médico Ingresante
-              </h3>

              <div>
-                <Label>Médico Ingresante *</Label>
+                <Label>Apache / Mortalidad</Label>
                <Input 
-                  placeholder="Nombre del médico" 
-                  value={medico}
-                  onChange={(e) => setMedico(e.target.value)}
+                  placeholder="Valor Apache o riesgo" 
+                  value={apache}
+                  onChange={(e) => setApache(e.target.value)}
                />
              </div>
+            </div>
          </CardContent>
        </Card>
      </div>

-        {/* Columna 3: Datos Clínicos */}
      <div className="space-y-6">
        <Card>
          <CardContent className="pt-6 space-y-4">
@@ -304,6 +287,25 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
          </CardContent>
        </Card>
      </div>
+
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6 space-y-4">
+            <h3 className="font-semibold text-gray-900 flex items-center gap-2">
+              <Stethoscope className="h-4 w-4" />
+              Médico Ingresante
+            </h3>
+            
+            <div>
+              <Label>Médico Ingresante *</Label>
+              <Input 
+                placeholder="Nombre del médico" 
+                value={medico}
+                onChange={(e) => setMedico(e.target.value)}
+              />
+            </div>
+          </CardContent>
+        </Card>
      </div>
    </div>
  );