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:
Santiago Lavaise
2026-04-14 01:10:31 -03:00
parent 111863baf2
commit 7705e4147e
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
+121 -132
View File
@@ -20,16 +20,16 @@ interface EditIngresoProps {
getAreaName: (areaId: string | undefined) => string; getAreaName: (areaId: string | undefined) => string;
} }
export function EditIngreso({ export function EditIngreso({
internacion, internacion,
paciente: pacienteOriginal, paciente: pacienteOriginal,
cama: camaOriginal, cama: camaOriginal,
pacientes, pacientes,
camas, camas,
areas, areas,
onActualizarInternacion, onActualizarInternacion,
onVolver, onVolver,
getAreaName getAreaName
}: EditIngresoProps) { }: EditIngresoProps) {
const [pacienteSeleccionado, setPacienteSeleccionado] = useState(internacion.pacienteId); const [pacienteSeleccionado, setPacienteSeleccionado] = useState(internacion.pacienteId);
const [busqueda, setBusqueda] = useState(''); const [busqueda, setBusqueda] = useState('');
@@ -96,16 +96,16 @@ 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" />
Datos del Paciente Datos del Paciente
</h3> </h3>
{selectedPaciente ? ( {selectedPaciente ? (
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<Badge className="bg-blue-100 text-blue-800"> <Badge className="bg-blue-100 text-blue-800">
@@ -127,7 +127,7 @@ export function EditIngreso({
if (!q) { if (!q) {
return <div className="p-2 text-sm text-gray-500">Escriba para buscar</div>; return <div className="p-2 text-sm text-gray-500">Escriba para buscar</div>;
} }
const matches = pacientes.filter(p => const matches = pacientes.filter(p =>
p.apellido.toLowerCase().includes(q) || p.apellido.toLowerCase().includes(q) ||
p.nombre.toLowerCase().includes(q) || p.nombre.toLowerCase().includes(q) ||
p.dni.includes(q) p.dni.includes(q)
@@ -151,16 +151,19 @@ 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" />
Asignación de Cama Asignación de Cama
</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,148 +179,134 @@ 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"> <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">
<ClipboardList className="h-4 w-4" /> <ClipboardList 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
type="date" type="date"
value={fechaIngresoHospital} value={fechaIngresoHospital}
onChange={(e) => setFechaIngresoHospital(e.target.value)} onChange={(e) => setFechaIngresoHospital(e.target.value)}
/> />
</div> </div>
<div> <div>
<Label>Fecha Ingreso a Clínica Médica</Label> <Label>Fecha Ingreso a Clínica Médica</Label>
<Input <Input
type="date" type="date"
value={fechaIngresoClinica} value={fechaIngresoClinica}
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
placeholder="Hospital o clínica de derivación" placeholder="Hospital o clínica de derivación"
value={derivacion} value={derivacion}
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
+96 -94
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>
); );