Renombrar 'Areas' a 'Grupos' y actualizar dependencias

This commit is contained in:
2026-08-09 20:05:08 +00:00
parent 91cde0e5d9
commit dc108a9699
12 changed files with 421 additions and 342 deletions
+62 -62
View File
@@ -3,76 +3,76 @@ import { Bed, CheckCircle2, Clock, Wrench, User, Plus, Trash, Edit2, Save, X } f
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { formatDateDDMMYYYY, getNombreProfesional, isCamaFueraDeArea } from '@/lib/utils';
import { formatDateDDMMYYYY, getNombreProfesional, isCamaFueraDeGrupo } from '@/lib/utils';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import type { Cama, Paciente, Internacion, Area } from '@/types';
import type { Cama, Paciente, Internacion, Grupo } from '@/types';
import { useHospitalStore } from '@/hooks/useHospitalStore';
interface MapaCamasProps {
camas: Cama[];
areas: Area[];
grupos: Grupo[];
pacientes: Paciente[];
internaciones: Internacion[];
onActualizarCama: (id: string, datos: Partial<Cama>) => void;
onAgregarCama: (cama: Omit<Cama, 'id'>) => any;
onEliminarCama: (id: string) => void;
onIniciarInternacion: (internacion: Omit<Internacion, 'id' | 'activa'>) => Promise<string>;
onAgregarArea: (area: Omit<Area, 'id'>) => any;
onActualizarArea: (id: string, datos: Partial<Area>) => void;
onEliminarArea: (id: string) => void;
onAgregarGrupo: (grupo: Omit<Grupo, 'id'>) => any;
onActualizarGrupo: (id: string, datos: Partial<Grupo>) => void;
onEliminarGrupo: (id: string) => void;
getPacienteById: (id: string) => Paciente | undefined;
getInternacionById: (id: string) => Internacion | undefined;
}
export function MapaCamas({
camas,
areas,
grupos,
pacientes,
internaciones,
onActualizarCama,
onAgregarCama,
onEliminarCama,
onIniciarInternacion,
onAgregarArea,
onActualizarArea,
onEliminarArea,
onAgregarGrupo,
onActualizarGrupo,
onEliminarGrupo,
getPacienteById,
getInternacionById
}: MapaCamasProps) {
const { canEditCama, canAccessArea, currentUser } = useHospitalStore();
const { canEditCama, canAccessGrupo, currentUser } = useHospitalStore();
const [filtroSala, setFiltroSala] = useState<string>('todas');
const [filtroTipo, setFiltroTipo] = useState<string>('todos');
const [filtroEstado, setFiltroEstado] = useState<string>('todos');
const [camaSeleccionada, setCamaSeleccionada] = useState<Cama | null>(null);
const [areaSeleccionada, setAreaSeleccionada] = useState<string>('');
const [grupoSeleccionada, setGrupoSeleccionada] = useState<string>('');
const [pacienteSeleccionado, setPacienteSeleccionado] = useState<string>('');
const [diagnostico, setDiagnostico] = useState('');
const [enfermedadActual, setEnfermedadActual] = useState('');
const [antecedentesEnfermedadActual, setAntecedentesEnfermedadActual] = useState('');
const effectiveMedico = getNombreProfesional(currentUser);
const [dialogoAbierto, setDialogoAbierto] = useState(false);
// Area dialog state
const [areaDialogOpen, setAreaDialogOpen] = useState(false);
const [areaNombre, setAreaNombre] = useState('');
const [editingAreaId, setEditingAreaId] = useState<string | null>(null);
// Grupo dialog state
const [grupoDialogOpen, setGrupoDialogOpen] = useState(false);
const [grupoNombre, setGrupoNombre] = useState('');
const [editingGrupoId, setEditingGrupoId] = useState<string | null>(null);
// Cama dialog state
const [bedDialogOpen, setBedDialogOpen] = useState(false);
const [editingBed, setEditingBed] = useState<Cama | null>(null);
const [bedNumero, setBedNumero] = useState('');
const [bedTipo, setBedTipo] = useState<Cama['tipo']>('General');
const [bedAreaId, setBedAreaId] = useState<string | undefined>(undefined);
const [bedGrupoId, setBedGrupoId] = useState<string | undefined>(undefined);
const salas = Array.from(new Set(camas.map(c => c.areaId).filter(Boolean))) as string[];
const areaById = Object.fromEntries(areas.map(a => [a.id, a.nombre]));
const salas = Array.from(new Set(camas.map(c => c.grupoId).filter(Boolean))) as string[];
const grupoById = Object.fromEntries(grupos.map(a => [a.id, a.nombre]));
const tipos = Array.from(new Set(camas.map(c => c.tipo)));
const camasFiltradas = camas.filter(cama => {
if (filtroSala !== 'todas' && cama.areaId !== filtroSala) return false;
if (filtroSala !== 'todas' && cama.grupoId !== filtroSala) return false;
if (filtroTipo !== 'todos' && cama.tipo !== filtroTipo) return false;
if (filtroEstado !== 'todos' && cama.estado !== filtroEstado) return false;
return true;
@@ -149,11 +149,11 @@ export function MapaCamas({
});
const handleOcuparCama = () => {
if (camaSeleccionada && areaSeleccionada && pacienteSeleccionado && diagnostico && enfermedadActual && effectiveMedico) {
if (camaSeleccionada && grupoSeleccionada && pacienteSeleccionado && diagnostico && enfermedadActual && effectiveMedico) {
onIniciarInternacion({
pacienteId: pacienteSeleccionado,
camaId: camaSeleccionada.id,
areaId: areaSeleccionada,
grupoId: grupoSeleccionada,
diagnosticoIngreso: diagnostico,
enfermedadActual,
antecedentesEnfermedadActual: antecedentesEnfermedadActual || undefined,
@@ -161,7 +161,7 @@ export function MapaCamas({
});
setDialogoAbierto(false);
setCamaSeleccionada(null);
setAreaSeleccionada('');
setGrupoSeleccionada('');
setPacienteSeleccionado('');
setDiagnostico('');
setEnfermedadActual('');
@@ -187,24 +187,24 @@ export function MapaCamas({
</div>
<div className="flex items-center gap-2">
<Badge variant="outline" className="bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-300 dark:border-green-700">
{camas.filter(c => c.estado === 'Disponible' && !isCamaFueraDeArea(c, areas)).length} Disponibles
{camas.filter(c => c.estado === 'Disponible' && !isCamaFueraDeGrupo(c, grupos)).length} Disponibles
</Badge>
<Badge variant="outline" className="bg-red-50 text-red-700 dark:bg-red-900 dark:text-red-300 dark:border-red-700">
{camas.filter(c => c.estado === 'Ocupada' && !isCamaFueraDeArea(c, areas)).length} Ocupadas
{camas.filter(c => c.estado === 'Ocupada' && !isCamaFueraDeGrupo(c, grupos)).length} Ocupadas
</Badge>
<div className="ml-4 flex items-center gap-2 flex-wrap sm:flex-nowrap">
<Button variant="outline" onClick={() => {
setEditingAreaId(null);
setAreaNombre('');
setAreaDialogOpen(true);
setEditingGrupoId(null);
setGrupoNombre('');
setGrupoDialogOpen(true);
}} className="text-xs px-2 py-1 sm:text-sm sm:px-4 sm:py-2">
Administrar Áreas
Administrar Grupos
</Button>
<Button variant="outline" onClick={() => {
setEditingBed(null);
setBedNumero('');
setBedTipo('General');
setBedAreaId(areas?.[0]?.id);
setBedGrupoId(grupos?.[0]?.id);
setBedDialogOpen(true);
}} className="text-xs px-2 py-1 sm:text-sm sm:px-4 sm:py-2">
<Plus className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
@@ -219,15 +219,15 @@ export function MapaCamas({
<CardContent className="p-4">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<Label className="text-xs text-gray-500 mb-1 block">Área</Label>
<Label className="text-xs text-gray-500 mb-1 block">Grupo / Área</Label>
<Select value={filtroSala} onValueChange={setFiltroSala}>
<SelectTrigger>
<SelectValue placeholder="Todas las áreas" />
<SelectValue placeholder="Todos los grupos" />
</SelectTrigger>
<SelectContent>
<SelectItem value="todas">Todas las áreas</SelectItem>
<SelectItem value="todas">Todos los grupos</SelectItem>
{salas.map(sala => (
<SelectItem key={sala} value={sala}>{areaById[sala] ?? sala}</SelectItem>
<SelectItem key={sala} value={sala}>{grupoById[sala] ?? sala}</SelectItem>
))}
</SelectContent>
</Select>
@@ -284,7 +284,7 @@ export function MapaCamas({
{getEstadoIcono(cama)}
</div>
<p className="font-bold text-sm sm:text-lg">{cama.numero}</p>
<p className="text-xs opacity-75 truncate">{cama.areaId ? areaById[cama.areaId] ?? 'Área desconocida' : 'Sin área'}</p>
<p className="text-xs opacity-75 truncate">{cama.grupoId ? grupoById[cama.grupoId] ?? 'Grupo desconocido' : 'Sin grupo'}</p>
<Badge variant="outline" className="mt-1 sm:mt-2 text-xs bg-white/50 dark:bg-gray-800 dark:text-gray-300">
{cama.tipo}
</Badge>
@@ -305,7 +305,7 @@ export function MapaCamas({
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Bed className="h-5 w-5" />
Cama {cama.numero} - {cama.areaId ? areaById[cama.areaId] ?? 'Área desconocida' : 'Sin área'}
Cama {cama.numero} - {cama.grupoId ? grupoById[cama.grupoId] ?? 'Grupo desconocido' : 'Sin grupo'}
</DialogTitle>
</DialogHeader>
<div className="space-y-4">
@@ -365,13 +365,13 @@ export function MapaCamas({
</Select>
</div>
<div>
<Label>Área de Trabajo *</Label>
<Select value={areaSeleccionada} onValueChange={setAreaSeleccionada}>
<Label>Grupo de Trabajo *</Label>
<Select value={grupoSeleccionada} onValueChange={setGrupoSeleccionada}>
<SelectTrigger>
<SelectValue placeholder="Seleccionar área" />
</SelectTrigger>
<SelectContent>
{areas.filter(a => a.nombre !== 'Fuera de area').map(a => (
{grupos.filter(a => a.nombre !== 'Fuera de grupo').map(a => (
<SelectItem key={a.id} value={a.id}>
{a.nombre}
</SelectItem>
@@ -471,7 +471,7 @@ export function MapaCamas({
setEditingBed(cama);
setBedNumero(cama.numero);
setBedTipo(cama.tipo);
setBedAreaId(cama.areaId);
setBedGrupoId(cama.grupoId);
setBedDialogOpen(true);
}}>
<Edit2 className="h-4 w-4 mr-1" />Editar
@@ -496,46 +496,46 @@ export function MapaCamas({
})}
</div>
{/* Area dialog */}
<Dialog open={areaDialogOpen} onOpenChange={setAreaDialogOpen}>
{/* Grupo dialog */}
<Dialog open={grupoDialogOpen} onOpenChange={setGrupoDialogOpen}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>{editingAreaId ? 'Editar Área' : 'Nueva Área'}</DialogTitle>
<DialogTitle>{editingGrupoId ? 'Editar Grupo' : 'Nuevo Grupo'}</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div>
<Label>Nombre</Label>
<Input value={areaNombre} onChange={(e) => setAreaNombre(e.target.value)} />
<Input value={grupoNombre} onChange={(e) => setGrupoNombre(e.target.value)} />
</div>
<div className="flex gap-2 justify-end">
{editingAreaId && (
<Button size="sm" variant="destructive" onClick={() => { if (confirm('Eliminar área?')) { onEliminarArea(editingAreaId); setAreaDialogOpen(false); } }}>
{editingGrupoId && (
<Button size="sm" variant="destructive" onClick={() => { if (confirm('Eliminar grupo?')) { onEliminarGrupo(editingGrupoId); setGrupoDialogOpen(false); } }}>
<Trash className="h-4 w-4" />
</Button>
)}
<Button size="sm" variant="outline" onClick={() => setAreaDialogOpen(false)}>
<Button size="sm" variant="outline" onClick={() => setGrupoDialogOpen(false)}>
<X className="h-4 w-4" />
</Button>
<Button size="sm" variant="outline" onClick={() => {
if (!areaNombre.trim()) return alert('Nombre requerido');
if (editingAreaId) onActualizarArea(editingAreaId, { nombre: areaNombre });
else onAgregarArea({ nombre: areaNombre });
setAreaDialogOpen(false);
if (!grupoNombre.trim()) return alert('Nombre requerido');
if (editingGrupoId) onActualizarGrupo(editingGrupoId, { nombre: grupoNombre });
else onAgregarGrupo({ nombre: grupoNombre });
setGrupoDialogOpen(false);
}}>
<Save className="h-4 w-4" />
</Button>
</div>
<div>
<p className="text-sm font-medium">Áreas existentes</p>
<p className="text-sm font-medium">Grupos existentes</p>
<div className="mt-2 space-y-2">
{areas.map(a => (
{grupos.map(a => (
<div key={a.id} className="flex items-center justify-between">
<div>{a.nombre}</div>
<div className="flex gap-1">
<Button size="sm" variant="outline" onClick={() => { setEditingAreaId(a.id); setAreaNombre(a.nombre); }}>
<Button size="sm" variant="outline" onClick={() => { setEditingGrupoId(a.id); setGrupoNombre(a.nombre); }}>
<Edit2 className="h-4 w-4" />
</Button>
<Button size="sm" variant="outline" className="text-red-600" onClick={() => { if (confirm('Eliminar área?')) onEliminarArea(a.id); }}>
<Button size="sm" variant="outline" className="text-red-600" onClick={() => { if (confirm('Eliminar grupo?')) onEliminarGrupo(a.id); }}>
<Trash className="h-4 w-4" />
</Button>
</div>
@@ -574,14 +574,14 @@ export function MapaCamas({
</Select>
</div>
<div>
<Label>Área</Label>
<Select value={bedAreaId ?? '__none'} onValueChange={(v) => setBedAreaId(v === '__none' ? undefined : v)}>
<Label>Grupo / Área</Label>
<Select value={bedGrupoId ?? '__none'} onValueChange={(v) => setBedGrupoId(v === '__none' ? undefined : v)}>
<SelectTrigger>
<SelectValue placeholder="Seleccione área" />
<SelectValue placeholder="Seleccione grupo" />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none">Sin área</SelectItem>
{areas.map(a => (
<SelectItem value="__none">Sin grupo</SelectItem>
{grupos.map(a => (
<SelectItem key={a.id} value={a.id}>{a.nombre}</SelectItem>
))}
</SelectContent>
@@ -597,9 +597,9 @@ export function MapaCamas({
<Button variant="outline" onClick={() => {
if (!bedNumero.trim()) return alert('Número requerido');
if (editingBed) {
onActualizarCama(editingBed.id, { numero: bedNumero, tipo: bedTipo, areaId: bedAreaId });
onActualizarCama(editingBed.id, { numero: bedNumero, tipo: bedTipo, grupoId: bedGrupoId });
} else {
onAgregarCama({ numero: bedNumero, tipo: bedTipo, estado: 'Disponible', areaId: bedAreaId });
onAgregarCama({ numero: bedNumero, tipo: bedTipo, estado: 'Disponible', grupoId: bedGrupoId });
}
setBedDialogOpen(false);
}}>Guardar</Button>