Separar formulario de nuevo registro en un modal propio y cambiar etiqueta Categoría a Tipo de Determinación
This commit is contained in:
@@ -1063,10 +1063,10 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
|
|||||||
};
|
};
|
||||||
|
|
||||||
const [otrosDialog, setOtrosDialog] = useState(false);
|
const [otrosDialog, setOtrosDialog] = useState(false);
|
||||||
|
const [nuevoOtroDialog, setNuevoOtroDialog] = useState(false);
|
||||||
const [nuevaObsFecha, setNuevaObsFecha] = useState(getLocalToday());
|
const [nuevaObsFecha, setNuevaObsFecha] = useState(getLocalToday());
|
||||||
const [nuevaObsTexto, setNuevaObsTexto] = useState('');
|
const [nuevaObsTexto, setNuevaObsTexto] = useState('');
|
||||||
const [nuevaObsCategoria, setNuevaObsCategoria] = useState<string>('Otros');
|
const [nuevaObsCategoria, setNuevaObsCategoria] = useState<string>('Otros');
|
||||||
const [mostrarNuevoFormOtros, setMostrarNuevoFormOtros] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const [editOtrosDialog, setEditOtrosDialog] = useState(false);
|
const [editOtrosDialog, setEditOtrosDialog] = useState(false);
|
||||||
const [editOtrosItem, setEditOtrosItem] = useState<{ id: string; fecha: string; hora: string; observaciones: string; categoria?: string; source: 'lab' | 'otros' } | null>(null);
|
const [editOtrosItem, setEditOtrosItem] = useState<{ id: string; fecha: string; hora: string; observaciones: string; categoria?: string; source: 'lab' | 'otros' } | null>(null);
|
||||||
@@ -1807,102 +1807,29 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
|
|||||||
<Dialog open={otrosDialog} onOpenChange={setOtrosDialog}>
|
<Dialog open={otrosDialog} onOpenChange={setOtrosDialog}>
|
||||||
<DialogContent className="sm:max-w-2xl max-h-[85vh] overflow-y-auto">
|
<DialogContent className="sm:max-w-2xl max-h-[85vh] overflow-y-auto">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Otros / Observaciones de Laboratorio</DialogTitle>
|
<DialogTitle>Otras Determinaciones - Laboratorio</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<div className="space-y-4 my-2">
|
<div className="space-y-4 my-2">
|
||||||
|
|
||||||
{canEdit && (
|
<div className="flex justify-between items-center pb-2 border-b">
|
||||||
<div className="flex justify-between items-center bg-gray-50 dark:bg-gray-800/60 p-3 rounded-lg border border-gray-200 dark:border-gray-700">
|
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Registros Existentes</h4>
|
||||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
{canEdit && (
|
||||||
¿Desea agregar una nueva observación?
|
|
||||||
</span>
|
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
variant={mostrarNuevoFormOtros ? "outline" : "default"}
|
onClick={() => {
|
||||||
onClick={() => setMostrarNuevoFormOtros(!mostrarNuevoFormOtros)}
|
setNuevaObsFecha(getLocalToday());
|
||||||
|
setNuevaObsTexto('');
|
||||||
|
setNuevaObsCategoria('Otros');
|
||||||
|
setNuevoOtroDialog(true);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{mostrarNuevoFormOtros ? (
|
<Plus className="h-4 w-4 mr-1.5" /> Nuevo Registro
|
||||||
<>
|
|
||||||
<X className="h-4 w-4 mr-1.5" /> Ocultar Formulario
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Plus className="h-4 w-4 mr-1.5" /> Nuevo Registro
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
)}
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
{canEdit && mostrarNuevoFormOtros && (
|
|
||||||
<div className="bg-blue-50/40 dark:bg-gray-900 p-4 rounded-lg border border-blue-200 dark:border-gray-700 space-y-3 mb-4 animate-in fade-in duration-200">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<h4 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Agregar Nuevo Registro</h4>
|
|
||||||
<Button size="icon" variant="ghost" className="h-6 w-6 text-gray-500 hover:text-gray-700" onClick={() => setMostrarNuevoFormOtros(false)}>
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
||||||
<div>
|
|
||||||
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Categoría</Label>
|
|
||||||
<Select value={nuevaObsCategoria} onValueChange={setNuevaObsCategoria}>
|
|
||||||
<SelectTrigger className="h-9 bg-white dark:bg-gray-800">
|
|
||||||
<SelectValue placeholder="Seleccionar categoría" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{CATEGORIAS_OTROS.map(cat => (
|
|
||||||
<SelectItem key={cat} value={cat}>{cat}</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Fecha</Label>
|
|
||||||
<Input type="date" className="h-9 bg-white dark:bg-gray-800" value={nuevaObsFecha} onChange={e => setNuevaObsFecha(e.target.value)} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Observaciones / Determinaciones</Label>
|
|
||||||
<Textarea
|
|
||||||
placeholder="Ingrese los detalles, resultados, etc..."
|
|
||||||
value={nuevaObsTexto}
|
|
||||||
onChange={e => setNuevaObsTexto(e.target.value)}
|
|
||||||
className="min-h-[80px] bg-white dark:bg-gray-800"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-2 pt-1">
|
|
||||||
<Button variant="outline" size="sm" onClick={() => setMostrarNuevoFormOtros(false)}>
|
|
||||||
Cancelar
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" onClick={() => {
|
|
||||||
if (addOtroLaboratorio && nuevaObsTexto.trim() !== '') {
|
|
||||||
addOtroLaboratorio({
|
|
||||||
pacienteId: patientId,
|
|
||||||
internacionId,
|
|
||||||
fecha: nuevaObsFecha,
|
|
||||||
hora: new Date().toTimeString().slice(0, 5),
|
|
||||||
observaciones: nuevaObsTexto,
|
|
||||||
categoria: nuevaObsCategoria
|
|
||||||
});
|
|
||||||
setNuevaObsTexto('');
|
|
||||||
setNuevaObsFecha(getLocalToday());
|
|
||||||
setNuevaObsCategoria('Otros');
|
|
||||||
setMostrarNuevoFormOtros(false);
|
|
||||||
toast.success('Registro guardado correctamente');
|
|
||||||
}
|
|
||||||
}} disabled={!nuevaObsTexto.trim()}>
|
|
||||||
<Save className="h-4 w-4 mr-1.5" /> Guardar
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 border-b pb-2">Registros</h4>
|
<div className="space-y-3 max-h-[50vh] overflow-y-auto pr-2">
|
||||||
<div className="space-y-3 max-h-[45vh] overflow-y-auto pr-2">
|
|
||||||
{[
|
{[
|
||||||
...labsConObservaciones.map(l => ({ id: l.id, fecha: l.fecha, hora: l.hora, observaciones: l.observaciones, categoria: 'Obs. de Lab', source: 'lab' as const })),
|
...labsConObservaciones.map(l => ({ id: l.id, fecha: l.fecha, hora: l.hora, observaciones: l.observaciones, categoria: 'Obs. de Lab', source: 'lab' as const })),
|
||||||
...(otrosLaboratorios || []).filter(o => o.pacienteId === patientId).map(o => ({ id: o.id, fecha: o.fecha, hora: o.hora, observaciones: o.observaciones, categoria: o.categoria || 'Otros', source: 'otros' as const }))
|
...(otrosLaboratorios || []).filter(o => o.pacienteId === patientId).map(o => ({ id: o.id, fecha: o.fecha, hora: o.hora, observaciones: o.observaciones, categoria: o.categoria || 'Otros', source: 'otros' as const }))
|
||||||
@@ -1947,6 +1874,66 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
|
|||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
|
<Dialog open={nuevoOtroDialog} onOpenChange={setNuevoOtroDialog}>
|
||||||
|
<DialogContent className="sm:max-w-md">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Nuevo Registro - Otras Determinaciones</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4 my-2">
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Tipo de Determinación</Label>
|
||||||
|
<Select value={nuevaObsCategoria} onValueChange={setNuevaObsCategoria}>
|
||||||
|
<SelectTrigger className="h-9">
|
||||||
|
<SelectValue placeholder="Seleccionar tipo" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{CATEGORIAS_OTROS.map(cat => (
|
||||||
|
<SelectItem key={cat} value={cat}>{cat}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Fecha</Label>
|
||||||
|
<Input type="date" className="h-9" value={nuevaObsFecha} onChange={e => setNuevaObsFecha(e.target.value)} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Observaciones / Determinaciones</Label>
|
||||||
|
<Textarea
|
||||||
|
placeholder="Ingrese los detalles, resultados, etc..."
|
||||||
|
value={nuevaObsTexto}
|
||||||
|
onChange={e => setNuevaObsTexto(e.target.value)}
|
||||||
|
className="min-h-[100px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end gap-2 mt-2">
|
||||||
|
<Button variant="outline" onClick={() => setNuevoOtroDialog(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => {
|
||||||
|
if (addOtroLaboratorio && nuevaObsTexto.trim() !== '') {
|
||||||
|
addOtroLaboratorio({
|
||||||
|
pacienteId: patientId,
|
||||||
|
internacionId,
|
||||||
|
fecha: nuevaObsFecha,
|
||||||
|
hora: new Date().toTimeString().slice(0, 5),
|
||||||
|
observaciones: nuevaObsTexto,
|
||||||
|
categoria: nuevaObsCategoria
|
||||||
|
});
|
||||||
|
setNuevaObsTexto('');
|
||||||
|
setNuevaObsFecha(getLocalToday());
|
||||||
|
setNuevaObsCategoria('Otros');
|
||||||
|
setNuevoOtroDialog(false);
|
||||||
|
toast.success('Registro guardado correctamente');
|
||||||
|
}
|
||||||
|
}} disabled={!nuevaObsTexto.trim()}>
|
||||||
|
<Save className="h-4 w-4 mr-1.5" /> Guardar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
<Dialog open={editOtrosDialog} onOpenChange={setEditOtrosDialog}>
|
<Dialog open={editOtrosDialog} onOpenChange={setEditOtrosDialog}>
|
||||||
<DialogContent className="sm:max-w-md">
|
<DialogContent className="sm:max-w-md">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
@@ -1955,10 +1942,10 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
|
|||||||
<div className="space-y-4 my-2">
|
<div className="space-y-4 my-2">
|
||||||
{editOtrosItem?.source === 'otros' && (
|
{editOtrosItem?.source === 'otros' && (
|
||||||
<div>
|
<div>
|
||||||
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Categoría</Label>
|
<Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Tipo de Determinación</Label>
|
||||||
<Select value={editOtrosCategoria} onValueChange={setEditOtrosCategoria}>
|
<Select value={editOtrosCategoria} onValueChange={setEditOtrosCategoria}>
|
||||||
<SelectTrigger className="h-9">
|
<SelectTrigger className="h-9">
|
||||||
<SelectValue placeholder="Seleccionar categoría" />
|
<SelectValue placeholder="Seleccionar tipo" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{CATEGORIAS_OTROS.map(cat => (
|
{CATEGORIAS_OTROS.map(cat => (
|
||||||
|
|||||||
Reference in New Issue
Block a user