feat: agregar sistema de autenticación con usuarios y roles
- Agregar Login con autenticación por DNI y contraseña - Crear tabla de usuarios con roles (admin, médico, enfermero) - Implementar gestión de usuarios (CRUD) para administradores - Agregar control de permisos basado en roles en el menú - Persistir estado de sesión en backend - Inicializar usuario admin por defecto (DNI: 12345678, pass: admin123) - Corregir inicialización de arrays en el store para evitar errores al cargar estado
This commit is contained in:
@@ -0,0 +1,275 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useHospitalStore } from '@/hooks/useHospitalStore';
|
||||
import type { Usuario, RolUsuario } from '@/types';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Plus, Pencil, Trash2, UserCog, Mail, Shield } from 'lucide-react';
|
||||
|
||||
const API_BASE = 'http://localhost:4001/api';
|
||||
|
||||
export function GestionUsuarios() {
|
||||
const { logout, areas } = useHospitalStore();
|
||||
const [usuarios, setUsuarios] = useState<Usuario[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editUsuario, setEditUsuario] = useState<Usuario | null>(null);
|
||||
|
||||
const [form, setForm] = useState({
|
||||
apellido: '',
|
||||
nombre: '',
|
||||
dni: '',
|
||||
fechaNacimiento: '',
|
||||
email: '',
|
||||
rol: 'medico' as RolUsuario,
|
||||
matriculaProfesional: '',
|
||||
password: '',
|
||||
areaId: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsuarios();
|
||||
}, []);
|
||||
|
||||
const fetchUsuarios = async () => {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/usuarios`);
|
||||
const data = await res.json();
|
||||
setUsuarios(data);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setForm({
|
||||
apellido: '',
|
||||
nombre: '',
|
||||
dni: '',
|
||||
fechaNacimiento: '',
|
||||
email: '',
|
||||
rol: 'medico',
|
||||
matriculaProfesional: '',
|
||||
password: '',
|
||||
areaId: '',
|
||||
});
|
||||
setEditUsuario(null);
|
||||
};
|
||||
|
||||
const openEdit = (usu: Usuario) => {
|
||||
setEditUsuario(usu);
|
||||
setForm({
|
||||
apellido: usu.apellido,
|
||||
nombre: usu.nombre,
|
||||
dni: usu.dni,
|
||||
fechaNacimiento: usu.fechaNacimiento,
|
||||
email: usu.email,
|
||||
rol: usu.rol,
|
||||
matriculaProfesional: usu.matriculaProfesional || '',
|
||||
password: '',
|
||||
areaId: usu.areaId || '',
|
||||
});
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
if (editUsuario) {
|
||||
await fetch(`${API_BASE}/usuarios/${editUsuario.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
} else {
|
||||
await fetch(`${API_BASE}/usuarios`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
}
|
||||
setDialogOpen(false);
|
||||
resetForm();
|
||||
fetchUsuarios();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Error al guardar usuario');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm('¿Está seguro de eliminar este usuario?')) return;
|
||||
try {
|
||||
await fetch(`${API_BASE}/usuarios/${id}`, { method: 'DELETE' });
|
||||
fetchUsuarios();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const getRolLabel = (rol: RolUsuario) => {
|
||||
switch (rol) {
|
||||
case 'admin': return 'Administrador';
|
||||
case 'medico': return 'Médico';
|
||||
case 'enfermero': return 'Enfermero';
|
||||
}
|
||||
};
|
||||
|
||||
const getAreaName = (areaId?: string) => {
|
||||
if (!areaId) return '-';
|
||||
return areas.find(a => a.id === areaId)?.nombre || '-';
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div>Cargando...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold dark:text-white">Gestión de Usuarios</h1>
|
||||
<p className="text-gray-500 dark:text-gray-400">Administrar usuarios del sistema</p>
|
||||
</div>
|
||||
<Button onClick={() => { resetForm(); setDialogOpen(true); }}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Nuevo Usuario
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Apellido, Nombre</TableHead>
|
||||
<TableHead>DNI</TableHead>
|
||||
<TableHead>Rol</TableHead>
|
||||
<TableHead>Área</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Matrícula</TableHead>
|
||||
<TableHead>Acciones</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{usuarios.map((usu) => (
|
||||
<TableRow key={usu.id}>
|
||||
<TableCell className="font-medium">{usu.apellido}, {usu.nombre}</TableCell>
|
||||
<TableCell>{usu.dni}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={usu.rol === 'admin' ? 'default' : 'secondary'}>
|
||||
{getRolLabel(usu.rol)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{getAreaName(usu.areaId)}</TableCell>
|
||||
<TableCell>{usu.email}</TableCell>
|
||||
<TableCell>{usu.matriculaProfesional || '-'}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" size="icon" onClick={() => openEdit(usu)}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => handleDelete(usu.id)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editUsuario ? 'Editar Usuario' : 'Nuevo Usuario'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Apellido</Label>
|
||||
<Input value={form.apellido} onChange={(e) => setForm({ ...form, apellido: e.target.value })} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Nombre</Label>
|
||||
<Input value={form.nombre} onChange={(e) => setForm({ ...form, nombre: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>DNI</Label>
|
||||
<Input value={form.dni} onChange={(e) => setForm({ ...form, dni: e.target.value })} disabled={!!editUsuario} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Fecha de Nacimiento</Label>
|
||||
<Input type="date" value={form.fechaNacimiento} onChange={(e) => setForm({ ...form, fechaNacimiento: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Email</Label>
|
||||
<Input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Rol</Label>
|
||||
<Select value={form.rol} onValueChange={(v) => setForm({ ...form, rol: v as RolUsuario })}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="admin">Administrador</SelectItem>
|
||||
<SelectItem value="medico">Médico</SelectItem>
|
||||
<SelectItem value="enfermero">Enfermero</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Matrícula Profesional</Label>
|
||||
<Input value={form.matriculaProfesional} onChange={(e) => setForm({ ...form, matriculaProfesional: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{form.rol === 'medico' && (
|
||||
<div className="space-y-2">
|
||||
<Label>Área Asignada</Label>
|
||||
<Select value={form.areaId} onValueChange={(v) => setForm({ ...form, areaId: v })}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Seleccionar área" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{areas.map((area) => (
|
||||
<SelectItem key={area.id} value={area.id}>{area.nombre}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>{editUsuario ? 'Nueva Contraseña (opcional)' : 'Contraseña'}</Label>
|
||||
<Input type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 mt-4">
|
||||
<Button variant="outline" onClick={() => setDialogOpen(false)}>Cancelar</Button>
|
||||
<Button onClick={handleSubmit}>
|
||||
{editUsuario ? 'Actualizar' : 'Crear'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user