dolibarr user
This commit is contained in:
parent
e9f246deb1
commit
be309e0c68
@ -407,78 +407,85 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
if (loading) return <div className="text-center p-4">Loading...</div>;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-4 p-6 bg-gray-100 rounded-lg">
|
||||
<div className="flex justify-between items-center">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Rechercher un utilisateur..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="max-w-sm"
|
||||
className="max-w-sm bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
<Dialog open={newUserDialog} onOpenChange={setNewUserDialog}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>Ajouter un utilisateur</Button>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
Ajouter un utilisateur
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-h-[85vh] overflow-y-auto">
|
||||
<DialogContent className="max-h-[85vh] overflow-y-auto bg-white text-black border border-gray-300">
|
||||
<DialogHeader>
|
||||
<DialogTitle>New User</DialogTitle>
|
||||
<DialogTitle className="text-gray-900">Nouvel Utilisateur</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleAddUser} className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="username">Username</Label>
|
||||
<Label htmlFor="username" className="text-gray-900">Nom d'utilisateur</Label>
|
||||
<Input
|
||||
id="username"
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, username: e.target.value.trim() }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Label htmlFor="email" className="text-gray-900">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value.trim() }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="firstName">First Name</Label>
|
||||
<Label htmlFor="firstName" className="text-gray-900">Prénom</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, firstName: e.target.value.trim() }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lastName">Last Name</Label>
|
||||
<Label htmlFor="lastName" className="text-gray-900">Nom</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, lastName: e.target.value.trim() }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Label htmlFor="password" className="text-gray-900">Mot de passe</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))}
|
||||
required
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Roles</Label>
|
||||
<div className="grid grid-cols-2 gap-2 max-h-[120px] overflow-y-auto border rounded-md p-2">
|
||||
<Label className="text-gray-900">Rôles</Label>
|
||||
<div className="grid grid-cols-2 gap-2 max-h-[120px] overflow-y-auto border border-gray-300 rounded-md p-2 bg-white">
|
||||
{roles.map((role) => (
|
||||
<div key={role.id} className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
@ -492,41 +499,42 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
: prev.roles.filter(r => r !== role.name)
|
||||
}));
|
||||
}}
|
||||
className="border-gray-500"
|
||||
/>
|
||||
<Label htmlFor={`role-${role.id}`} className="text-sm">{role.name}</Label>
|
||||
<Label htmlFor={`role-${role.id}`} className="text-sm text-gray-900">{role.name}</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" className="w-full">Create User</Button>
|
||||
<Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700 text-white">Créer Utilisateur</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<Table className="bg-white border border-gray-300 rounded-md">
|
||||
<TableHeader className="bg-gray-50">
|
||||
<TableRow>
|
||||
<TableHead>Username</TableHead>
|
||||
<TableHead>First Name</TableHead>
|
||||
<TableHead>Last Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Created At</TableHead>
|
||||
<TableHead>Roles</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
<TableHead className="text-gray-900">Username</TableHead>
|
||||
<TableHead className="text-gray-900">First Name</TableHead>
|
||||
<TableHead className="text-gray-900">Last Name</TableHead>
|
||||
<TableHead className="text-gray-900">Email</TableHead>
|
||||
<TableHead className="text-gray-900">Created At</TableHead>
|
||||
<TableHead className="text-gray-900">Roles</TableHead>
|
||||
<TableHead className="text-gray-900 text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{paginatedUsers.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell>{user.username}</TableCell>
|
||||
<TableCell>{user.firstName || "-"}</TableCell>
|
||||
<TableCell>{user.lastName || "-"}</TableCell>
|
||||
<TableCell>{user.email || "-"}</TableCell>
|
||||
<TableCell>
|
||||
<TableRow key={user.id} className="hover:bg-gray-50 border-t border-gray-200">
|
||||
<TableCell className="text-gray-900">{user.username}</TableCell>
|
||||
<TableCell className="text-gray-900">{user.firstName || "-"}</TableCell>
|
||||
<TableCell className="text-gray-900">{user.lastName || "-"}</TableCell>
|
||||
<TableCell className="text-gray-900">{user.email || "-"}</TableCell>
|
||||
<TableCell className="text-gray-900">
|
||||
{new Date(user.createdTimestamp).toLocaleDateString()}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<TableCell className="text-gray-900">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{(user.roles || []).map((role) => (
|
||||
<span key={role} className="inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
|
||||
@ -535,7 +543,7 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
))}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<TableCell className="text-gray-900 text-right">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
@ -550,14 +558,15 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
<DropdownMenuContent align="end" className="bg-white border border-gray-300">
|
||||
<DropdownMenuLabel className="text-gray-900">Actions</DropdownMenuLabel>
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleEdit(user.id);
|
||||
}}
|
||||
className="text-gray-900 hover:bg-gray-100"
|
||||
>
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
Modifier
|
||||
@ -568,6 +577,7 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
e.stopPropagation();
|
||||
handleManageRoles(user.id);
|
||||
}}
|
||||
className="text-gray-900 hover:bg-gray-100"
|
||||
>
|
||||
<UserPlus className="mr-2 h-4 w-4" />
|
||||
Gérer les rôles
|
||||
@ -578,6 +588,7 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
e.stopPropagation();
|
||||
handleChangePassword(user.id);
|
||||
}}
|
||||
className="text-gray-900 hover:bg-gray-100"
|
||||
>
|
||||
<Key className="mr-2 h-4 w-4" />
|
||||
Changer le mot de passe
|
||||
@ -588,6 +599,7 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
e.stopPropagation();
|
||||
handleToggleUserStatus(user.id, user.enabled);
|
||||
}}
|
||||
className="text-gray-900 hover:bg-gray-100"
|
||||
>
|
||||
{user.enabled ? (
|
||||
<>
|
||||
@ -603,7 +615,7 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="text-red-600"
|
||||
className="text-red-600 hover:bg-red-50 hover:text-red-700"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -636,34 +648,37 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
}
|
||||
setEditUserDialog(open);
|
||||
}}>
|
||||
<DialogContent>
|
||||
<DialogContent className="bg-white text-black border border-gray-300">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Modifier l'utilisateur</DialogTitle>
|
||||
<DialogTitle className="text-gray-900">Modifier l'utilisateur</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleUpdateUser} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-firstName">Prénom</Label>
|
||||
<Label htmlFor="edit-firstName" className="text-gray-900">Prénom</Label>
|
||||
<Input
|
||||
id="edit-firstName"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, firstName: e.target.value }))}
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-lastName">Nom</Label>
|
||||
<Label htmlFor="edit-lastName" className="text-gray-900">Nom</Label>
|
||||
<Input
|
||||
id="edit-lastName"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, lastName: e.target.value }))}
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-email">Email</Label>
|
||||
<Label htmlFor="edit-email" className="text-gray-900">Email</Label>
|
||||
<Input
|
||||
id="edit-email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
|
||||
className="bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end space-x-2">
|
||||
@ -683,10 +698,11 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
enabled: true,
|
||||
});
|
||||
}}
|
||||
className="border-gray-300 text-gray-800 hover:bg-gray-100"
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
Modifier
|
||||
</Button>
|
||||
</div>
|
||||
@ -701,14 +717,14 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
}
|
||||
setManageRolesDialog(open);
|
||||
}}>
|
||||
<DialogContent>
|
||||
<DialogContent className="bg-white text-black border border-gray-300">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Manage roles for {selectedUser?.username}</DialogTitle>
|
||||
<DialogTitle className="text-gray-900">Gérer les rôles pour {selectedUser?.username}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Available Roles</Label>
|
||||
<div className="grid grid-cols-2 gap-2 max-h-[200px] overflow-y-auto border rounded-md p-2">
|
||||
<Label className="text-gray-900">Rôles disponibles</Label>
|
||||
<div className="grid grid-cols-2 gap-2 max-h-[200px] overflow-y-auto border border-gray-300 rounded-md p-2 bg-white">
|
||||
{roles.map((role) => (
|
||||
<div key={role.id} className="flex items-center space-x-2 p-2 rounded-md hover:bg-gray-100">
|
||||
<Checkbox
|
||||
@ -722,10 +738,11 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
: prev.roles.filter(r => r !== role.name)
|
||||
}));
|
||||
}}
|
||||
className="border-gray-500"
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`manage-role-${role.id}`}
|
||||
className="text-sm"
|
||||
className="text-sm text-gray-900"
|
||||
>
|
||||
{role.name}
|
||||
</Label>
|
||||
@ -741,11 +758,12 @@ export function UsersTable({ userRole = [] }: UsersTableProps) {
|
||||
setSelectedUser(null);
|
||||
setFormData(prev => ({ ...prev, roles: [] }));
|
||||
}}
|
||||
className="border-gray-300 text-gray-800 hover:bg-gray-100"
|
||||
>
|
||||
Cancel
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleUpdateRoles}>
|
||||
Update Roles
|
||||
<Button onClick={handleUpdateRoles} className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
Mettre à jour les rôles
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user