Fix: Layout NuevoIngreso igual a EditIngreso, cards del mismo tamaño
This commit is contained in:
+102
-113
@@ -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,43 +179,19 @@ 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>
|
||||
</div>
|
||||
|
||||
{/* Columna 2: Datos de Ingreso */}
|
||||
<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">
|
||||
<ClipboardList className="h-4 w-4" />
|
||||
Datos de Ingreso
|
||||
</h3>
|
||||
|
||||
<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">
|
||||
<ClipboardList className="h-4 w-4" />
|
||||
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,79 +217,96 @@ 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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Columna 3: Datos Clínicos */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<h3 className="font-semibold text-gray-900">
|
||||
Datos Clínicos
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<Label>Motivo de Consulta *</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
|
||||
placeholder="Motivo por el cual consulta"
|
||||
value={motivoConsulta}
|
||||
onChange={(e) => setMotivoConsulta(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Diagnóstico de Ingreso *</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
|
||||
placeholder="Diagnóstico principal"
|
||||
value={diagnosticoIngreso}
|
||||
onChange={(e) => setDiagnosticoIngreso(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Enfermedad Actual *</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[100px]"
|
||||
placeholder="Descripción de la enfermedad actual"
|
||||
value={enfermedadActual}
|
||||
onChange={(e) => setEnfermedadActual(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]"
|
||||
placeholder="Antecedentes relevantes"
|
||||
value={antecedentesEnfermedadActual}
|
||||
onChange={(e) => setAntecedentesEnfermedadActual(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<h3 className="font-semibold text-gray-900">
|
||||
Datos Clínicos
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<Label>Motivo de Consulta *</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
|
||||
placeholder="Motivo por el cual consulta"
|
||||
value={motivoConsulta}
|
||||
onChange={(e) => setMotivoConsulta(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Diagnóstico de Ingreso *</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
|
||||
placeholder="Diagnóstico principal"
|
||||
value={diagnosticoIngreso}
|
||||
onChange={(e) => setDiagnosticoIngreso(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Enfermedad Actual *</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[100px]"
|
||||
placeholder="Descripción de la enfermedad actual"
|
||||
value={enfermedadActual}
|
||||
onChange={(e) => setEnfermedadActual(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Antecedentes de Enfermedad Actual</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
|
||||
placeholder="Antecedentes relevantes"
|
||||
value={antecedentesEnfermedadActual}
|
||||
onChange={(e) => setAntecedentesEnfermedadActual(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</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,19 +187,18 @@ 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">
|
||||
<h3 className="font-semibold text-gray-900 flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4" />
|
||||
Datos de Ingreso
|
||||
</h3>
|
||||
<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">
|
||||
<Calendar className="h-4 w-4" />
|
||||
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,78 +224,88 @@ 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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Columna 3: Datos Clínicos */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<h3 className="font-semibold text-gray-900">
|
||||
Datos Clínicos
|
||||
</h3>
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<h3 className="font-semibold text-gray-900">
|
||||
Datos Clínicos
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<Label>Motivo de Consulta *</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
|
||||
placeholder="Motivo por el cual consulta"
|
||||
value={motivoConsulta}
|
||||
onChange={(e) => setMotivoConsulta(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Motivo de Consulta *</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
|
||||
placeholder="Motivo por el cual consulta"
|
||||
value={motivoConsulta}
|
||||
onChange={(e) => setMotivoConsulta(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Diagnóstico de Ingreso *</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
|
||||
placeholder="Diagnóstico principal"
|
||||
value={diagnosticoIngreso}
|
||||
onChange={(e) => setDiagnosticoIngreso(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Diagnóstico de Ingreso *</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
|
||||
placeholder="Diagnóstico principal"
|
||||
value={diagnosticoIngreso}
|
||||
onChange={(e) => setDiagnosticoIngreso(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Enfermedad Actual *</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[100px]"
|
||||
placeholder="Descripción de la enfermedad actual"
|
||||
value={enfermedadActual}
|
||||
onChange={(e) => setEnfermedadActual(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Enfermedad Actual *</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[100px]"
|
||||
placeholder="Descripción de la enfermedad actual"
|
||||
value={enfermedadActual}
|
||||
onChange={(e) => setEnfermedadActual(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]"
|
||||
placeholder="Antecedentes relevantes"
|
||||
value={antecedentesEnfermedadActual}
|
||||
onChange={(e) => setAntecedentesEnfermedadActual(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Antecedentes de la Enfermedad Actual</Label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded-md text-sm min-h-[80px]"
|
||||
placeholder="Antecedentes relevantes"
|
||||
value={antecedentesEnfermedadActual}
|
||||
onChange={(e) => setAntecedentesEnfermedadActual(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user