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