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

Fix: Evoluciones responsive improvements

Browse Source
This commit is contained in:
snlavaise
2026-04-18 15:24:50 -03:00
parent 0cad2527fd
commit 708068167a
1 changed files with 53 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sections/Evoluciones.tsx
+53 -53
View File
@@ -20,11 +20,11 @@ interface EvolucionesProps {
getInternacionActivaByPaciente: (pacienteId: string) => Internacion | undefined; getInternacionActivaByPaciente: (pacienteId: string) => Internacion | undefined;
} }
export function Evoluciones({ export function Evoluciones({
evoluciones, evoluciones,
internaciones, internaciones,
pacientes, pacientes,
onAgregarEvolucion, onAgregarEvolucion,
onActualizarEvolucion, onActualizarEvolucion,
onEliminarEvolucion, onEliminarEvolucion,
getPacienteById, getPacienteById,
@@ -35,7 +35,7 @@ export function Evoluciones({
const [dialogoAbierto, setDialogoAbierto] = useState(false); const [dialogoAbierto, setDialogoAbierto] = useState(false);
const [evolucionExpandida, setEvolucionExpandida] = useState<string | null>(null); const [evolucionExpandida, setEvolucionExpandida] = useState<string | null>(null);
const [evolucionEditando, setEvolucionEditando] = useState<Evolucion | null>(null); const [evolucionEditando, setEvolucionEditando] = useState<Evolucion | null>(null);
const [fecha, setFecha] = useState(new Date().toISOString().split('T')[0]); const [fecha, setFecha] = useState(new Date().toISOString().split('T')[0]);
const [hora, setHora] = useState(new Date().toTimeString().slice(0, 5)); const [hora, setHora] = useState(new Date().toTimeString().slice(0, 5));
const [medico, setMedico] = useState(''); const [medico, setMedico] = useState('');
@@ -110,26 +110,26 @@ export function Evoluciones({
const signosVitales: SignosVitales | undefined = const signosVitales: SignosVitales | undefined =
temperatura || presionSistolica || frecuenciaCardiaca temperatura || presionSistolica || frecuenciaCardiaca
? { ? {
temperatura: temperatura ? parseFloat(temperatura) : undefined, temperatura: temperatura ? parseFloat(temperatura) : undefined,
presionSistolica: presionSistolica ? parseInt(presionSistolica) : undefined, presionSistolica: presionSistolica ? parseInt(presionSistolica) : undefined,
presionDiastolica: presionDiastolica ? parseInt(presionDiastolica) : undefined, presionDiastolica: presionDiastolica ? parseInt(presionDiastolica) : undefined,
frecuenciaCardiaca: frecuenciaCardiaca ? parseInt(frecuenciaCardiaca) : undefined, frecuenciaCardiaca: frecuenciaCardiaca ? parseInt(frecuenciaCardiaca) : undefined,
frecuenciaRespiratoria: frecuenciaRespiratoria ? parseInt(frecuenciaRespiratoria) : undefined, frecuenciaRespiratoria: frecuenciaRespiratoria ? parseInt(frecuenciaRespiratoria) : undefined,
saturacionO2: saturacionO2 ? parseInt(saturacionO2) : undefined, saturacionO2: saturacionO2 ? parseInt(saturacionO2) : undefined,
} }
: undefined; : undefined;
const examenFisico: ExamenFisico | undefined = const examenFisico: ExamenFisico | undefined =
snc || cardiovascular || respiratorio || abdominal || genitourinario || pielAnexos || soma snc || cardiovascular || respiratorio || abdominal || genitourinario || pielAnexos || soma
? { ? {
SNC: snc || undefined, SNC: snc || undefined,
Cardiovascular: cardiovascular || undefined, Cardiovascular: cardiovascular || undefined,
Respiratorio: respiratorio || undefined, Respiratorio: respiratorio || undefined,
Abdominal: abdominal || undefined, Abdominal: abdominal || undefined,
Genitourinario: genitourinario || undefined, Genitourinario: genitourinario || undefined,
PielAnexos: pielAnexos || undefined, PielAnexos: pielAnexos || undefined,
SOMA: soma || undefined, SOMA: soma || undefined,
} }
: undefined; : undefined;
const evolucionData = { const evolucionData = {
@@ -164,8 +164,8 @@ export function Evoluciones({
if (!internacion) return false; if (!internacion) return false;
const paciente = getPacienteById(internacion.pacienteId); const paciente = getPacienteById(internacion.pacienteId);
if (!paciente) return false; if (!paciente) return false;
return !busqueda || return !busqueda ||
paciente.nombre.toLowerCase().includes(busqueda.toLowerCase()) || paciente.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
paciente.apellido.toLowerCase().includes(busqueda.toLowerCase()) || paciente.apellido.toLowerCase().includes(busqueda.toLowerCase()) ||
paciente.dni.includes(busqueda); paciente.dni.includes(busqueda);
@@ -184,7 +184,7 @@ export function Evoluciones({
}; };
return ( return (
<div className="space-y-6 dark:text-white overflow-x-hidden"> <div className="space-y-6 dark:text-white overflow-x-hidden max-w-screen">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Evoluciones Diarias</h1> <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Evoluciones Diarias</h1>
@@ -221,7 +221,7 @@ export function Evoluciones({
</Select> </Select>
</div> </div>
)} )}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<Label>Fecha *</Label> <Label>Fecha *</Label>
@@ -243,7 +243,7 @@ export function Evoluciones({
<Label className="flex items-center gap-1"> <Label className="flex items-center gap-1">
<Heart className="h-4 w-4" />TAS <Heart className="h-4 w-4" />TAS
</Label> </Label>
<Input <Input
type="number" type="number"
value={presionSistolica} value={presionSistolica}
onChange={(e) => setPresionSistolica(e.target.value)} onChange={(e) => setPresionSistolica(e.target.value)}
@@ -254,7 +254,7 @@ export function Evoluciones({
<Label className="flex items-center gap-1"> <Label className="flex items-center gap-1">
<Heart className="h-4 w-4" />TAD <Heart className="h-4 w-4" />TAD
</Label> </Label>
<Input <Input
type="number" type="number"
value={presionDiastolica} value={presionDiastolica}
onChange={(e) => setPresionDiastolica(e.target.value)} onChange={(e) => setPresionDiastolica(e.target.value)}
@@ -265,7 +265,7 @@ export function Evoluciones({
<Label className="flex items-center gap-1"> <Label className="flex items-center gap-1">
<Activity className="h-4 w-4" />FC <Activity className="h-4 w-4" />FC
</Label> </Label>
<Input <Input
type="number" type="number"
value={frecuenciaCardiaca} value={frecuenciaCardiaca}
onChange={(e) => setFrecuenciaCardiaca(e.target.value)} onChange={(e) => setFrecuenciaCardiaca(e.target.value)}
@@ -276,7 +276,7 @@ export function Evoluciones({
<Label className="flex items-center gap-1"> <Label className="flex items-center gap-1">
<Wind className="h-4 w-4" />FR <Wind className="h-4 w-4" />FR
</Label> </Label>
<Input <Input
type="number" type="number"
value={frecuenciaRespiratoria} value={frecuenciaRespiratoria}
onChange={(e) => setFrecuenciaRespiratoria(e.target.value)} onChange={(e) => setFrecuenciaRespiratoria(e.target.value)}
@@ -287,7 +287,7 @@ export function Evoluciones({
<Label className="flex items-center gap-1"> <Label className="flex items-center gap-1">
<Thermometer className="h-4 w-4" />T° <Thermometer className="h-4 w-4" />T°
</Label> </Label>
<Input <Input
type="number" type="number"
step="0.1" step="0.1"
value={temperatura} value={temperatura}
@@ -299,7 +299,7 @@ export function Evoluciones({
<Label className="flex items-center gap-1"> <Label className="flex items-center gap-1">
<Droplets className="h-4 w-4" />SatO2 <Droplets className="h-4 w-4" />SatO2
</Label> </Label>
<Input <Input
type="number" type="number"
value={saturacionO2} value={saturacionO2}
onChange={(e) => setSaturacionO2(e.target.value)} onChange={(e) => setSaturacionO2(e.target.value)}
@@ -378,7 +378,7 @@ export function Evoluciones({
<div> <div>
<Label>Médico *</Label> <Label>Médico *</Label>
<Input <Input
value={medico} value={medico}
onChange={(e) => setMedico(e.target.value)} onChange={(e) => setMedico(e.target.value)}
placeholder="Nombre del médico" placeholder="Nombre del médico"
@@ -391,12 +391,12 @@ export function Evoluciones({
Cancelar Cancelar
</Button> </Button>
<Button variant="outline" <Button variant="outline"
onClick={handleGuardar} onClick={handleGuardar}
disabled={!medico || (!evolucionEditando && !pacienteSeleccionado)} disabled={!medico || (!evolucionEditando && !pacienteSeleccionado)}
> >
<Save className="h-4 w-4 mr-2" /> <Save className="h-4 w-4 mr-2" />
Guardar Evolución Guardar Evolución
</Button> </Button>
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@@ -422,12 +422,12 @@ export function Evoluciones({
const paciente = internacion ? getPacienteById(internacion.pacienteId) : null; const paciente = internacion ? getPacienteById(internacion.pacienteId) : null;
const signosTexto = getSignosVitalesTexto(evolucion.signosVitales); const signosTexto = getSignosVitalesTexto(evolucion.signosVitales);
const estaExpandida = evolucionExpandida === evolucion.id; const estaExpandida = evolucionExpandida === evolucion.id;
return ( return (
<Card key={evolucion.id} className="hover:shadow-md transition-shadow"> <Card key={evolucion.id} className="hover:shadow-md transition-shadow">
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex flex-col sm:flex-row gap-3"> <div className="flex flex-col sm:flex-row gap-3">
<div className="flex items-start justify-between w-full"> <div className="flex flex-col sm:flex-row items-start justify-between w-full">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> <div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
<FileText className="h-5 w-5 text-blue-600" /> <FileText className="h-5 w-5 text-blue-600" />
@@ -450,8 +450,8 @@ export function Evoluciones({
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"
onClick={() => setEvolucionExpandida(estaExpandida ? null : evolucion.id)} onClick={() => setEvolucionExpandida(estaExpandida ? null : evolucion.id)}
> >
@@ -462,16 +462,16 @@ export function Evoluciones({
<Pencil className="h-4 w-4" /> <Pencil className="h-4 w-4" />
</Button> </Button>
)} )}
<Button variant="outline" <Button variant="outline"
size="sm" size="sm"
className="text-red-600" className="text-red-600"
onClick={() => onEliminarEvolucion(evolucion.id)} onClick={() => onEliminarEvolucion(evolucion.id)}
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</Button> </Button>
</div> </div>
</div> </div>
{signosTexto && ( {signosTexto && (
<div className="bg-blue-50 p-2 rounded-lg"> <div className="bg-blue-50 p-2 rounded-lg">
<p className="text-sm font-medium text-blue-800 flex items-center gap-2"> <p className="text-sm font-medium text-blue-800 flex items-center gap-2">
@@ -480,7 +480,7 @@ export function Evoluciones({
</p> </p>
</div> </div>
)} )}
{estaExpandida && ( {estaExpandida && (
<> <>
{evolucion.examenFisico && ( {evolucion.examenFisico && (
@@ -497,21 +497,21 @@ export function Evoluciones({
</div> </div>
</div> </div>
)} )}
{evolucion.novedades && ( {evolucion.novedades && (
<div className="bg-red-50 p-3 rounded-lg border border-red-200 mt-3"> <div className="bg-red-50 p-3 rounded-lg border border-red-200 mt-3">
<p className="text-sm font-medium text-red-800 mb-1">Novedades:</p> <p className="text-sm font-medium text-red-800 mb-1">Novedades:</p>
<p className="text-sm text-gray-800 whitespace-pre-wrap">{evolucion.novedades}</p> <p className="text-sm text-gray-800 whitespace-pre-wrap">{evolucion.novedades}</p>
</div> </div>
)} )}
{evolucion.comentario && ( {evolucion.comentario && (
<div> <div>
<p className="text-sm font-medium text-gray-700">Comentario:</p> <p className="text-sm font-medium text-gray-700">Comentario:</p>
<p className="text-sm text-gray-600 whitespace-pre-wrap">{evolucion.comentario}</p> <p className="text-sm text-gray-600 whitespace-pre-wrap">{evolucion.comentario}</p>
</div> </div>
)} )}
{evolucion.pendientes && ( {evolucion.pendientes && (
<div className="bg-amber-50 p-3 rounded-lg border border-amber-200"> <div className="bg-amber-50 p-3 rounded-lg border border-amber-200">
<p className="text-sm font-medium text-amber-800 mb-1">Pendientes:</p> <p className="text-sm font-medium text-amber-800 mb-1">Pendientes:</p>