alma/NeahNew
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dolibarr user

Browse Source
This commit is contained in:
alma 2025-05-04 10:32:55 +02:00
parent 8596cddffe
commit 1e5df56832
1 changed files with 142 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

271
components/groups/groups-table.tsx
View File

@ -340,101 +340,101 @@ export function GroupsTable({ userRole = [] }: GroupsTableProps) {
} }
}; };
const filteredGroups = groups.filter(group => if (loading) return <div className="text-center p-4">Loading...</div>;
group.name.toLowerCase().includes(searchTerm.toLowerCase())
);
return ( return (
<div className='flex flex-col space-y-4'> <div className="space-y-4 p-6 bg-gray-100 rounded-lg">
<div className='flex justify-between items-center mb-6'> <div className="flex justify-between items-center">
<h1 className='text-2xl font-semibold text-white'>Gestion des groupes</h1> <Input
<div className="flex items-center space-x-4"> type="text"
<div className="relative w-64"> placeholder="Rechercher un groupe..."
<Input value={searchTerm}
type="text" onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Rechercher un groupe..." className="max-w-xs bg-white text-gray-900 border-gray-300"
value={searchTerm} />
onChange={(e) => setSearchTerm(e.target.value)} <Dialog open={newGroupDialog} onOpenChange={setNewGroupDialog}>
className="w-full bg-black/20 border-0 text-white placeholder:text-gray-400" <DialogTrigger asChild>
/> <Button className="bg-blue-600 hover:bg-blue-700 text-white">
</div> <Plus className="mr-2 h-4 w-4" /> Ajouter un groupe
<Dialog open={newGroupDialog} onOpenChange={setNewGroupDialog}> </Button>
<DialogTrigger asChild> </DialogTrigger>
<Button variant="outline" className="bg-blue-600 text-white hover:bg-blue-700 border-0"> <DialogContent className="bg-white text-black border border-gray-300">
<Plus className="mr-2 h-4 w-4" /> <DialogHeader>
Nouveau groupe <DialogTitle className="text-gray-900">Nouveau Groupe</DialogTitle>
</Button> </DialogHeader>
</DialogTrigger> <div className="space-y-4">
<DialogContent> <div className="space-y-2">
<DialogHeader> <Label htmlFor="groupName" className="text-gray-900">Nom du groupe</Label>
<DialogTitle>Créer un nouveau groupe</DialogTitle> <Input
</DialogHeader> id="groupName"
<div className="space-y-4"> value={newGroupName}
<div className="space-y-2"> onChange={(e) => setNewGroupName(e.target.value)}
<Label htmlFor="name">Nom du groupe</Label> placeholder="Entrez le nom du groupe"
<Input className="bg-white text-gray-900 border-gray-300"
id="name" />
value={newGroupName}
onChange={(e) => setNewGroupName(e.target.value)}
placeholder="Entrez le nom du groupe"
/>
</div>
<Button onClick={handleCreateGroup} className="w-full">
Créer le groupe
</Button>
</div> </div>
</DialogContent> <Button
</Dialog> onClick={handleCreateGroup}
</div> className="w-full bg-blue-600 hover:bg-blue-700 text-white"
>
Créer le groupe
</Button>
</div>
</DialogContent>
</Dialog>
</div> </div>
<div className="rounded-lg overflow-hidden"> <Table className="bg-white border border-gray-300 rounded-md">
<Table> <TableHeader className="bg-gray-50">
<TableHeader> <TableRow>
<TableRow className="bg-black/20 border-0"> <TableHead className="text-gray-900">Nom</TableHead>
<TableHead className="text-gray-400">Nom du groupe</TableHead> <TableHead className="text-gray-900">Chemin</TableHead>
<TableHead className="text-gray-400">Chemin</TableHead> <TableHead className="text-gray-900">Membres</TableHead>
<TableHead className="text-gray-400">Nombre de membres</TableHead> <TableHead className="text-right text-gray-900">Actions</TableHead>
<TableHead className="text-gray-400 text-right">Actions</TableHead> </TableRow>
</TableRow> </TableHeader>
</TableHeader> <TableBody>
<TableBody> {groups
{filteredGroups.map((group) => ( .filter(group =>
<TableRow group.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
key={group.id} group.path.toLowerCase().includes(searchTerm.toLowerCase())
className="border-0 bg-black/10 hover:bg-black/20" )
> .map((group) => (
<TableCell className="text-white">{group.name}</TableCell> <TableRow key={group.id} className="hover:bg-gray-50 border-t border-gray-200">
<TableCell className="text-white">{group.path}</TableCell> <TableCell className="text-gray-900 font-medium">{group.name}</TableCell>
<TableCell className="text-white">{group.membersCount}</TableCell> <TableCell className="text-gray-900">{group.path}</TableCell>
<TableCell className="text-gray-900">{group.membersCount}</TableCell>
<TableCell className="text-right"> <TableCell className="text-right">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0 text-white hover:bg-black/20"> <Button
variant="ghost"
className="h-8 w-8 p-0"
>
<span className="sr-only">Open menu</span> <span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" /> <MoreHorizontal className="h-4 w-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" className="bg-black/90 border-gray-700"> <DropdownMenuContent align="end" className="bg-white border border-gray-300">
<DropdownMenuLabel className="text-gray-400">Actions</DropdownMenuLabel> <DropdownMenuLabel className="text-gray-900">Actions</DropdownMenuLabel>
<DropdownMenuItem <DropdownMenuItem
onClick={() => handleModifyGroup(group.id)} onClick={() => handleModifyGroup(group.id)}
className="text-white hover:bg-black/50" className="text-gray-900 hover:bg-gray-100"
> >
<Edit className="mr-2 h-4 w-4" /> <Edit className="mr-2 h-4 w-4" />
Modifier Modifier
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onClick={() => handleManageMembers(group.id)} onClick={() => handleManageMembers(group.id)}
className="text-white hover:bg-black/50" className="text-gray-900 hover:bg-gray-100"
> >
<Users className="mr-2 h-4 w-4" /> <Users className="mr-2 h-4 w-4" />
Gérer les membres Gérer les membres
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator className="bg-gray-700" /> <DropdownMenuSeparator />
<DropdownMenuItem <DropdownMenuItem
className="text-red-400 hover:bg-black/50"
onClick={() => handleDeleteGroup(group.id)} onClick={() => handleDeleteGroup(group.id)}
className="text-red-600 hover:bg-red-50 hover:text-red-700"
> >
<Trash className="mr-2 h-4 w-4" /> <Trash className="mr-2 h-4 w-4" />
Supprimer Supprimer
@ -444,93 +444,102 @@ export function GroupsTable({ userRole = [] }: GroupsTableProps) {
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
</Table> </Table>
</div>
<Dialog open={modifyGroupDialog} onOpenChange={setModifyGroupDialog}> <Dialog open={modifyGroupDialog} onOpenChange={setModifyGroupDialog}>
<DialogContent> <DialogContent className="bg-white text-black border border-gray-300">
<DialogHeader> <DialogHeader>
<DialogTitle>Modifier le groupe</DialogTitle> <DialogTitle className="text-gray-900">Modifier le groupe</DialogTitle>
</DialogHeader> </DialogHeader>
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="name">Nom du groupe</Label> <Label htmlFor="modifiedGroupName" className="text-gray-900">Nom du groupe</Label>
<Input <Input
id="name" id="modifiedGroupName"
value={modifiedGroupName} value={modifiedGroupName}
onChange={(e) => setModifiedGroupName(e.target.value)} onChange={(e) => setModifiedGroupName(e.target.value)}
placeholder="Entrez le nouveau nom du groupe" className="bg-white text-gray-900 border-gray-300"
/> />
</div> </div>
<Button <Button
onClick={handleUpdateGroup} onClick={handleUpdateGroup}
className="w-full" className="w-full bg-blue-600 hover:bg-blue-700 text-white"
> >
Modifier Mettre à jour
</Button> </Button>
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
<Dialog open={manageMembersDialog} onOpenChange={setManageMembersDialog}> <Dialog open={manageMembersDialog} onOpenChange={setManageMembersDialog}>
<DialogContent className="max-h-[80vh] overflow-y-auto"> <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto bg-white text-black border border-gray-300">
<DialogHeader> <DialogHeader>
<DialogTitle>Gérer les membres du groupe {selectedGroup?.name}</DialogTitle> <DialogTitle className="text-gray-900">
Gérer les membres - {selectedGroup?.name}
</DialogTitle>
</DialogHeader> </DialogHeader>
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div>
<Label>Current Members</Label> <h3 className="text-lg font-medium mb-2 text-gray-900">Membres actuels</h3>
<div className="max-h-[200px] overflow-y-auto border rounded-md p-2"> {groupMembers.length === 0 ? (
{groupMembers.length === 0 ? ( <p className="text-gray-600">Ce groupe n'a pas de membres.</p>
<p className="text-sm text-muted-foreground">No members</p> ) : (
) : ( <div className="space-y-2">
<div className="space-y-2"> {groupMembers.map((member) => (
{groupMembers.map((member) => ( <div key={member.id} className="flex items-center justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
<div key={member.id} className="flex items-center justify-between p-2 hover:bg-muted rounded-md"> <div className="text-gray-900">
<div> <div className="font-medium">{member.username}</div>
<p className="font-medium">{member.lastName} {member.firstName}</p> <div className="text-sm text-gray-600">{member.firstName} {member.lastName} ({member.email})</div>
<p className="text-sm text-muted-foreground">{member.email}</p>
</div>
<Button
variant="ghost"
size="sm"
onClick={() => handleRemoveMember(member.id)}
>
<Trash className="h-4 w-4" />
</Button>
</div> </div>
))} <Button
</div> variant="outline"
)} size="sm"
</div> onClick={() => handleRemoveMember(member.id)}
className="text-red-600 hover:bg-red-50 hover:text-red-700 border-red-200"
>
<Trash className="h-4 w-4" />
</Button>
</div>
))}
</div>
)}
</div> </div>
<div className="space-y-2">
<Label>Add Member</Label> <div>
<div className="max-h-[200px] overflow-y-auto border rounded-md p-2"> <h3 className="text-lg font-medium mb-2 text-gray-900">Ajouter des membres</h3>
{availableUsers.length === 0 ? ( <Input
<p className="text-sm text-muted-foreground">No users available</p> type="text"
) : ( placeholder="Rechercher un utilisateur..."
<div className="space-y-2"> value={searchTerm}
{availableUsers onChange={(e) => setSearchTerm(e.target.value)}
.sort((a, b) => (a.lastName + a.firstName).localeCompare(b.lastName + b.firstName)) className="mb-2 bg-white text-gray-900 border-gray-300"
.map((user) => ( />
<div key={user.id} className="flex items-center justify-between p-2 hover:bg-muted rounded-md"> <div className="space-y-2 max-h-[250px] overflow-y-auto">
<div> {availableUsers
<p className="font-medium">{user.lastName} {user.firstName}</p> .filter(user =>
<p className="text-sm text-muted-foreground">{user.email}</p> !groupMembers.some(member => member.id === user.id) &&
</div> (user.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
<Button user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
variant="ghost" user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
size="sm" user.lastName.toLowerCase().includes(searchTerm.toLowerCase()))
onClick={() => handleAddMember(user.id)} )
> .map((user) => (
<Plus className="h-4 w-4" /> <div key={user.id} className="flex items-center justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
</Button> <div className="text-gray-900">
</div> <div className="font-medium">{user.username}</div>
))} <div className="text-sm text-gray-600">{user.firstName} {user.lastName} ({user.email})</div>
</div> </div>
)} <Button
variant="outline"
size="sm"
onClick={() => handleAddMember(user.id)}
className="text-green-600 hover:bg-green-50 hover:text-green-700 border-green-200"
>
<Plus className="h-4 w-4" />
</Button>
</div>
))}
</div> </div>
</div> </div>
</div> </div>