feat: add global user administration for admin users
Backend: - Add getAllUsuarios() to get users from all tenants - Add updateUsuarioGlobal() to edit users and change their tenant - Add deleteUsuarioGlobal() for global user deletion - Add global admin check based on tenant RFC - Add new API routes: /usuarios/global/* Frontend: - Add UserListItem.tenantId and tenantName fields - Add /admin/usuarios page with full user management - Support filtering by tenant and search - Inline editing for name, role, and tenant assignment - Group users by company for better organization - Add "Admin Usuarios" menu item for admin navigation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Consultoria AS
305
apps/web/app/(dashboard)/admin/usuarios/page.tsx
Normal file
305
apps/web/app/(dashboard)/admin/usuarios/page.tsx
Normal file
@@ -0,0 +1,305 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } 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 { useAllUsuarios, useUpdateUsuarioGlobal, useDeleteUsuarioGlobal } from '@/lib/hooks/use-usuarios';
|
||||
import { getTenants, type Tenant } from '@/lib/api/tenants';
|
||||
import { useAuthStore } from '@/stores/auth-store';
|
||||
import { Users, Pencil, Trash2, Shield, Eye, Calculator, Building2, X, Check } 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-green-600' },
|
||||
visor: { label: 'Visor', icon: Eye, color: 'text-muted-foreground' },
|
||||
};
|
||||
|
||||
interface EditingUser {
|
||||
id: string;
|
||||
nombre: string;
|
||||
role: 'admin' | 'contador' | 'visor';
|
||||
tenantId: string;
|
||||
}
|
||||
|
||||
export default function AdminUsuariosPage() {
|
||||
const { user: currentUser } = useAuthStore();
|
||||
const { data: usuarios, isLoading, error } = useAllUsuarios();
|
||||
const updateUsuario = useUpdateUsuarioGlobal();
|
||||
const deleteUsuario = useDeleteUsuarioGlobal();
|
||||
|
||||
const [tenants, setTenants] = useState<Tenant[]>([]);
|
||||
const [editingUser, setEditingUser] = useState<EditingUser | null>(null);
|
||||
const [filterTenant, setFilterTenant] = useState<string>('all');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
getTenants().then(setTenants).catch(console.error);
|
||||
}, []);
|
||||
|
||||
const handleEdit = (usuario: any) => {
|
||||
setEditingUser({
|
||||
id: usuario.id,
|
||||
nombre: usuario.nombre,
|
||||
role: usuario.role,
|
||||
tenantId: usuario.tenantId,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!editingUser) return;
|
||||
try {
|
||||
await updateUsuario.mutateAsync({
|
||||
id: editingUser.id,
|
||||
data: {
|
||||
nombre: editingUser.nombre,
|
||||
role: editingUser.role,
|
||||
tenantId: editingUser.tenantId,
|
||||
},
|
||||
});
|
||||
setEditingUser(null);
|
||||
} catch (err: any) {
|
||||
alert(err.response?.data?.error || 'Error al actualizar usuario');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm('Estas seguro de eliminar este usuario?')) return;
|
||||
try {
|
||||
await deleteUsuario.mutateAsync(id);
|
||||
} catch (err: any) {
|
||||
alert(err.response?.data?.error || 'Error al eliminar usuario');
|
||||
}
|
||||
};
|
||||
|
||||
const filteredUsuarios = usuarios?.filter(u => {
|
||||
const matchesTenant = filterTenant === 'all' || u.tenantId === filterTenant;
|
||||
const matchesSearch = !searchTerm ||
|
||||
u.nombre.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
u.email.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
return matchesTenant && matchesSearch;
|
||||
});
|
||||
|
||||
// Agrupar por empresa
|
||||
const groupedByTenant = filteredUsuarios?.reduce((acc, u) => {
|
||||
const key = u.tenantId || 'sin-empresa';
|
||||
if (!acc[key]) {
|
||||
acc[key] = {
|
||||
tenantName: u.tenantName || 'Sin empresa',
|
||||
users: [],
|
||||
};
|
||||
}
|
||||
acc[key].users.push(u);
|
||||
return acc;
|
||||
}, {} as Record<string, { tenantName: string; users: typeof filteredUsuarios }>);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<DashboardShell title="Administracion de Usuarios">
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center">
|
||||
<p className="text-destructive">
|
||||
No tienes permisos para ver esta pagina o ocurrio un error.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DashboardShell>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DashboardShell title="Administracion de Usuarios">
|
||||
<div className="space-y-4">
|
||||
{/* Filtros */}
|
||||
<Card>
|
||||
<CardContent className="py-4">
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<Input
|
||||
placeholder="Buscar por nombre o email..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-[250px]">
|
||||
<Select value={filterTenant} onValueChange={setFilterTenant}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Filtrar por empresa" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Todas las empresas</SelectItem>
|
||||
{tenants.map(t => (
|
||||
<SelectItem key={t.id} value={t.id}>{t.nombre}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-5 w-5" />
|
||||
<span className="font-medium">{filteredUsuarios?.length || 0} usuarios</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Building2 className="h-4 w-4" />
|
||||
<span className="text-sm">{Object.keys(groupedByTenant || {}).length} empresas</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Users by tenant */}
|
||||
{isLoading ? (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center text-muted-foreground">
|
||||
Cargando usuarios...
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
Object.entries(groupedByTenant || {}).map(([tenantId, { tenantName, users }]) => (
|
||||
<Card key={tenantId}>
|
||||
<CardHeader className="py-3">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Building2 className="h-4 w-4" />
|
||||
{tenantName}
|
||||
<span className="text-muted-foreground font-normal text-sm">
|
||||
({users?.length} usuarios)
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{users?.map(usuario => {
|
||||
const roleInfo = roleLabels[usuario.role];
|
||||
const RoleIcon = roleInfo.icon;
|
||||
const isCurrentUser = usuario.id === currentUser?.id;
|
||||
const isEditing = editingUser?.id === usuario.id;
|
||||
|
||||
return (
|
||||
<div key={usuario.id} className="p-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<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 className="flex-1">
|
||||
{isEditing ? (
|
||||
<div className="space-y-2">
|
||||
<Input
|
||||
value={editingUser.nombre}
|
||||
onChange={(e) => setEditingUser({ ...editingUser, nombre: e.target.value })}
|
||||
className="h-8"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<Select
|
||||
value={editingUser.role}
|
||||
onValueChange={(v) => setEditingUser({ ...editingUser, role: v as any })}
|
||||
>
|
||||
<SelectTrigger className="h-8 w-[140px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="admin">Administrador</SelectItem>
|
||||
<SelectItem value="contador">Contador</SelectItem>
|
||||
<SelectItem value="visor">Visor</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select
|
||||
value={editingUser.tenantId}
|
||||
onValueChange={(v) => setEditingUser({ ...editingUser, tenantId: v })}
|
||||
>
|
||||
<SelectTrigger className="h-8 flex-1">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{tenants.map(t => (
|
||||
<SelectItem key={t.id} value={t.id}>{t.nombre}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</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">Tu</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">
|
||||
{!isEditing && (
|
||||
<div className={cn('flex items-center gap-1', roleInfo.color)}>
|
||||
<RoleIcon className="h-4 w-4" />
|
||||
<span className="text-sm">{roleInfo.label}</span>
|
||||
</div>
|
||||
)}
|
||||
{!isCurrentUser && (
|
||||
<div className="flex gap-1">
|
||||
{isEditing ? (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleSave}
|
||||
disabled={updateUsuario.isPending}
|
||||
>
|
||||
<Check className="h-4 w-4 text-green-600" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setEditingUser(null)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleEdit(usuario)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDelete(usuario.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</DashboardShell>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user