feat(alertas): add alerts CRUD with stats and management UI
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Consultoria AS
200
apps/web/app/(dashboard)/usuarios/page.tsx
Normal file
200
apps/web/app/(dashboard)/usuarios/page.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { DashboardShell } from '@/components/layouts/dashboard-shell';
|
||||
import { Card, CardContent, 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 { useUsuarios, useInviteUsuario, useUpdateUsuario, useDeleteUsuario } from '@/lib/hooks/use-usuarios';
|
||||
import { useAuthStore } from '@/stores/auth-store';
|
||||
import { Users, UserPlus, Trash2, Shield, Eye, Calculator } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const roleLabels = {
|
||||
admin: { label: 'Administrador', icon: Shield, color: 'text-primary' },
|
||||
contador: { label: 'Contador', icon: Calculator, color: 'text-success' },
|
||||
visor: { label: 'Visor', icon: Eye, color: 'text-muted-foreground' },
|
||||
};
|
||||
|
||||
export default function UsuariosPage() {
|
||||
const { user: currentUser } = useAuthStore();
|
||||
const { data: usuarios, isLoading } = useUsuarios();
|
||||
const inviteUsuario = useInviteUsuario();
|
||||
const updateUsuario = useUpdateUsuario();
|
||||
const deleteUsuario = useDeleteUsuario();
|
||||
|
||||
const [showInvite, setShowInvite] = useState(false);
|
||||
const [inviteForm, setInviteForm] = useState({ email: '', nombre: '', role: 'visor' as const });
|
||||
|
||||
const handleInvite = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await inviteUsuario.mutateAsync(inviteForm);
|
||||
setShowInvite(false);
|
||||
setInviteForm({ email: '', nombre: '', role: 'visor' });
|
||||
} catch (error: any) {
|
||||
alert(error.response?.data?.message || 'Error al invitar usuario');
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleActive = (id: string, active: boolean) => {
|
||||
updateUsuario.mutate({ id, data: { active: !active } });
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
if (confirm('¿Eliminar este usuario?')) {
|
||||
deleteUsuario.mutate(id);
|
||||
}
|
||||
};
|
||||
|
||||
const isAdmin = currentUser?.role === 'admin';
|
||||
|
||||
return (
|
||||
<DashboardShell
|
||||
title="Usuarios"
|
||||
description="Gestiona los usuarios de tu empresa"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-5 w-5" />
|
||||
<span className="font-medium">{usuarios?.length || 0} usuarios</span>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<Button onClick={() => setShowInvite(true)}>
|
||||
<UserPlus className="h-4 w-4 mr-2" />
|
||||
Invitar Usuario
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Invite Form */}
|
||||
{showInvite && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Invitar Nuevo Usuario</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleInvite} className="space-y-4">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={inviteForm.email}
|
||||
onChange={e => setInviteForm({ ...inviteForm, email: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nombre">Nombre</Label>
|
||||
<Input
|
||||
id="nombre"
|
||||
value={inviteForm.nombre}
|
||||
onChange={e => setInviteForm({ ...inviteForm, nombre: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="role">Rol</Label>
|
||||
<Select
|
||||
value={inviteForm.role}
|
||||
onValueChange={(v: 'admin' | 'contador' | 'visor') => setInviteForm({ ...inviteForm, role: v })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="admin">Administrador</SelectItem>
|
||||
<SelectItem value="contador">Contador</SelectItem>
|
||||
<SelectItem value="visor">Visor</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button type="submit" disabled={inviteUsuario.isPending}>
|
||||
{inviteUsuario.isPending ? 'Enviando...' : 'Enviar Invitación'}
|
||||
</Button>
|
||||
<Button type="button" variant="outline" onClick={() => setShowInvite(false)}>
|
||||
Cancelar
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Users List */}
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
{isLoading ? (
|
||||
<div className="text-center py-8 text-muted-foreground">Cargando...</div>
|
||||
) : (
|
||||
<div className="divide-y">
|
||||
{usuarios?.map(usuario => {
|
||||
const roleInfo = roleLabels[usuario.role];
|
||||
const RoleIcon = roleInfo.icon;
|
||||
const isCurrentUser = usuario.id === currentUser?.id;
|
||||
|
||||
return (
|
||||
<div key={usuario.id} className="p-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={cn(
|
||||
'w-10 h-10 rounded-full flex items-center justify-center',
|
||||
'bg-primary/10 text-primary font-medium'
|
||||
)}>
|
||||
{usuario.nombre.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{usuario.nombre}</span>
|
||||
{isCurrentUser && (
|
||||
<span className="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded">Tú</span>
|
||||
)}
|
||||
{!usuario.active && (
|
||||
<span className="text-xs bg-destructive/10 text-destructive px-2 py-0.5 rounded">Inactivo</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">{usuario.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={cn('flex items-center gap-1', roleInfo.color)}>
|
||||
<RoleIcon className="h-4 w-4" />
|
||||
<span className="text-sm">{roleInfo.label}</span>
|
||||
</div>
|
||||
{isAdmin && !isCurrentUser && (
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleToggleActive(usuario.id, usuario.active)}
|
||||
>
|
||||
{usuario.active ? 'Desactivar' : 'Activar'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDelete(usuario.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</DashboardShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user