snlavaise/administracionHospital
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
snlavaise
2026-04-14 01:10:31 -03:00
parent d43163590c
commit e47818d3d2
2 changed files with 217 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sections/EditIngreso.tsx
+102 -113
View File
@@ -96,10 +96,10 @@ export function EditIngreso({
</div> </div>
</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 */} {/* Columna 1: Datos del Paciente, Cama y Datos Adicionales */}
<div className="space-y-6"> <div className="space-y-6">
<Card> <Card className="min-h-[200px]">
<CardContent className="pt-6 space-y-4"> <CardContent className="pt-6 space-y-4">
<h3 className="font-semibold text-gray-900 flex items-center gap-2"> <h3 className="font-semibold text-gray-900 flex items-center gap-2">
<User className="h-4 w-4" /> <User className="h-4 w-4" />
@@ -151,8 +151,11 @@ export function EditIngreso({
)} )}
</CardContent> </CardContent>
</Card> </Card>
</div>
<Card> {/* Columna 2: Cama */}
<div className="space-y-6">
<Card className="min-h-[200px]">
<CardContent className="pt-6 space-y-4"> <CardContent className="pt-6 space-y-4">
<h3 className="font-semibold text-gray-900 flex items-center gap-2"> <h3 className="font-semibold text-gray-900 flex items-center gap-2">
<Bed className="h-4 w-4" /> <Bed className="h-4 w-4" />
@@ -160,7 +163,7 @@ export function EditIngreso({
</h3> </h3>
<div> <div>
<Label>Cama *</Label>
<Select value={camaSeleccionada} onValueChange={setCamaSeleccionada}> <Select value={camaSeleccionada} onValueChange={setCamaSeleccionada}>
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder="Seleccionar cama" /> <SelectValue placeholder="Seleccionar cama" />
@@ -168,7 +171,7 @@ export function EditIngreso({
<SelectContent> <SelectContent>
{camas.map(c => ( {camas.map(c => (
<SelectItem key={c.id} value={c.id}> <SelectItem key={c.id} value={c.id}>
{c.numero} - {getAreaName(c.areaId)} ({c.tipo}) {c.numero} - {getAreaName(c.areaId)}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
@@ -176,43 +179,19 @@ export function EditIngreso({
</div> </div>
</CardContent> </CardContent>
</Card> </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>
</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> <div>
<Label>Fecha Ingreso al Hospital</Label> <Label>Fecha Ingreso al Hospital</Label>
<Input <Input
@@ -229,14 +208,7 @@ export function EditIngreso({
onChange={(e) => setFechaIngresoClinica(e.target.value)} onChange={(e) => setFechaIngresoClinica(e.target.value)}
/> />
</div> </div>
<div>
<Label>Apache / Mortalidad</Label>
<Input
placeholder="Valor Apache o riesgo"
value={apache}
onChange={(e) => setApache(e.target.value)}
/>
</div>
<div> <div>
<Label>Derivado de</Label> <Label>Derivado de</Label>
<Input <Input
@@ -245,79 +217,96 @@ export function EditIngreso({
onChange={(e) => setDerivacion(e.target.value)} onChange={(e) => setDerivacion(e.target.value)}
/> />
</div> </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> <div>
<Label>Médico Ingresante *</Label> <Label>Apache / Mortalidad</Label>
<Input <Input
placeholder="Nombre del médico" placeholder="Valor Apache o riesgo"
value={medico} value={apache}
onChange={(e) => setMedico(e.target.value)} onChange={(e) => setApache(e.target.value)}
/> />
</div> </div>
</CardContent> </div>
</Card> </CardContent>
</div> </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>
<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> </div>
); );
} }
src/sections/NuevoIngreso.tsx
+91 -89
View File
@@ -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 { ArrowLeft, Save, X, Bed, Calendar, Stethoscope, User, ClipboardList } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button'; 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 selectedPaciente = pacientes.find(p => p.id === pacienteSeleccionado);
const camasDisponibles = camaSeleccionada
? []
: camas.filter(c => c.estado === 'Disponible' && !c.pacienteId);
return ( return (
<div className="space-y-6"> <div className="space-y-6">
@@ -104,10 +101,10 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
</div> </div>
</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 */} {/* Columna 1: Datos del Paciente */}
<div className="space-y-6"> <div className="space-y-6">
<Card> <Card className="min-h-[200px]">
<CardContent className="pt-6 space-y-4"> <CardContent className="pt-6 space-y-4">
<h3 className="font-semibold text-gray-900 flex items-center gap-2"> <h3 className="font-semibold text-gray-900 flex items-center gap-2">
<User className="h-4 w-4" /> <User className="h-4 w-4" />
@@ -162,8 +159,11 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
)} )}
</CardContent> </CardContent>
</Card> </Card>
</div>
<Card> {/* Columna 2: Cama */}
<div className="space-y-6">
<Card className="min-h-[200px]">
<CardContent className="pt-6 space-y-4"> <CardContent className="pt-6 space-y-4">
<h3 className="font-semibold text-gray-900 flex items-center gap-2"> <h3 className="font-semibold text-gray-900 flex items-center gap-2">
<Bed className="h-4 w-4" /> <Bed className="h-4 w-4" />
@@ -179,7 +179,7 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
<SelectContent> <SelectContent>
{camas.map(c => ( {camas.map(c => (
<SelectItem key={c.id} value={c.id}> <SelectItem key={c.id} value={c.id}>
{c.numero} - {getAreaName(c.areaId)} ({c.tipo}) {c.numero} - {getAreaName(c.areaId)}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
@@ -187,19 +187,18 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div>
{/* Columna 2: Fechas y Médico */} <div className="space-y-6">
<div className="space-y-6"> <Card>
<Card> <CardContent className="pt-6 space-y-4">
<CardContent className="pt-6 space-y-4"> <h3 className="font-semibold text-gray-900 flex items-center gap-2">
<h3 className="font-semibold text-gray-900 flex items-center gap-2"> <Calendar className="h-4 w-4" />
<Calendar className="h-4 w-4" /> Datos de Ingreso
Datos de Ingreso </h3>
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<Label>Fecha Ingreso al Hospital</Label> <Label>Fecha Ingreso al Hospital</Label>
<Input <Input
@@ -216,14 +215,7 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
onChange={(e) => setFechaIngresoClinica(e.target.value)} onChange={(e) => setFechaIngresoClinica(e.target.value)}
/> />
</div> </div>
<div>
<Label>Apache / Mortalidad</Label>
<Input
placeholder="Valor Apache o riesgo"
value={apache}
onChange={(e) => setApache(e.target.value)}
/>
</div>
<div> <div>
<Label>Derivado de</Label> <Label>Derivado de</Label>
<Input <Input
@@ -232,78 +224,88 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
onChange={(e) => setDerivacion(e.target.value)} onChange={(e) => setDerivacion(e.target.value)}
/> />
</div> </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> <div>
<Label>Médico Ingresante *</Label> <Label>Apache / Mortalidad</Label>
<Input <Input
placeholder="Nombre del médico" placeholder="Valor Apache o riesgo"
value={medico} value={apache}
onChange={(e) => setMedico(e.target.value)} onChange={(e) => setApache(e.target.value)}
/> />
</div> </div>
</CardContent> </div>
</Card> </CardContent>
</div> </Card>
</div>
{/* Columna 3: Datos Clínicos */} <div className="space-y-6">
<div className="space-y-6"> <Card>
<Card> <CardContent className="pt-6 space-y-4">
<CardContent className="pt-6 space-y-4"> <h3 className="font-semibold text-gray-900">
<h3 className="font-semibold text-gray-900"> Datos Clínicos
Datos Clínicos </h3>
</h3>
<div> <div>
<Label>Motivo de Consulta *</Label> <Label>Motivo de Consulta *</Label>
<textarea <textarea
className="w-full p-2 border rounded-md text-sm min-h-[80px]" className="w-full p-2 border rounded-md text-sm min-h-[80px]"
placeholder="Motivo por el cual consulta" placeholder="Motivo por el cual consulta"
value={motivoConsulta} value={motivoConsulta}
onChange={(e) => setMotivoConsulta(e.target.value)} onChange={(e) => setMotivoConsulta(e.target.value)}
/> />
</div> </div>
<div> <div>
<Label>Diagnóstico de Ingreso *</Label> <Label>Diagnóstico de Ingreso *</Label>
<textarea <textarea
className="w-full p-2 border rounded-md text-sm min-h-[80px]" className="w-full p-2 border rounded-md text-sm min-h-[80px]"
placeholder="Diagnóstico principal" placeholder="Diagnóstico principal"
value={diagnosticoIngreso} value={diagnosticoIngreso}
onChange={(e) => setDiagnosticoIngreso(e.target.value)} onChange={(e) => setDiagnosticoIngreso(e.target.value)}
/> />
</div> </div>
<div> <div>
<Label>Enfermedad Actual *</Label> <Label>Enfermedad Actual *</Label>
<textarea <textarea
className="w-full p-2 border rounded-md text-sm min-h-[100px]" className="w-full p-2 border rounded-md text-sm min-h-[100px]"
placeholder="Descripción de la enfermedad actual" placeholder="Descripción de la enfermedad actual"
value={enfermedadActual} value={enfermedadActual}
onChange={(e) => setEnfermedadActual(e.target.value)} onChange={(e) => setEnfermedadActual(e.target.value)}
/> />
</div> </div>
<div> <div>
<Label>Antecedentes de la Enfermedad Actual</Label> <Label>Antecedentes de la Enfermedad Actual</Label>
<textarea <textarea
className="w-full p-2 border rounded-md text-sm min-h-[80px]" className="w-full p-2 border rounded-md text-sm min-h-[80px]"
placeholder="Antecedentes relevantes" placeholder="Antecedentes relevantes"
value={antecedentesEnfermedadActual} value={antecedentesEnfermedadActual}
onChange={(e) => setAntecedentesEnfermedadActual(e.target.value)} onChange={(e) => setAntecedentesEnfermedadActual(e.target.value)}
/> />
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div> </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>
</div> </div>
); );