From f4354f2e9bf0cc2e8a0e58c6f3579d19b296e94f Mon Sep 17 00:00:00 2001 From: alma Date: Mon, 5 May 2025 10:28:23 +0200 Subject: [PATCH] missions --- components/missions/missions-admin-panel.tsx | 336 ++++++++++++++++++- 1 file changed, 334 insertions(+), 2 deletions(-) diff --git a/components/missions/missions-admin-panel.tsx b/components/missions/missions-admin-panel.tsx index 00467441..f836c534 100644 --- a/components/missions/missions-admin-panel.tsx +++ b/components/missions/missions-admin-panel.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { Tabs, TabsContent, @@ -17,11 +17,82 @@ import { CardContent } from "../ui/card"; import { Badge } from "../ui/badge"; -import { X } from "lucide-react"; +import { X, Search, UserPlus, Users } from "lucide-react"; + +// Mock user data - in a real app, this would come from an API +const mockUsers = [ + { id: '1', username: 'user1', firstName: 'John', lastName: 'Doe', email: 'john@example.com' }, + { id: '2', username: 'user2', firstName: 'Jane', lastName: 'Smith', email: 'jane@example.com' }, + { id: '3', username: 'user3', firstName: 'Alice', lastName: 'Johnson', email: 'alice@example.com' }, + { id: '4', username: 'user4', firstName: 'Bob', lastName: 'Brown', email: 'bob@example.com' }, + { id: '5', username: 'user5', firstName: 'Eva', lastName: 'Martinez', email: 'eva@example.com' }, +]; + +// Mock group data +const mockGroups = [ + { id: '1', name: 'Group A', path: '/group-a', membersCount: 3 }, + { id: '2', name: 'Group B', path: '/group-b', membersCount: 5 }, + { id: '3', name: 'Group C', path: '/group-c', membersCount: 2 }, +]; export function MissionsAdminPanel() { const [selectedServices, setSelectedServices] = useState([]); const [selectedProfils, setSelectedProfils] = useState([]); + const [searchTerm, setSearchTerm] = useState(""); + const [selectedTab, setSelectedTab] = useState<'users' | 'groups'>('users'); + const [gardienDuTemps, setGardienDuTemps] = useState(null); + const [gardienDeLaParole, setGardienDeLaParole] = useState(null); + const [gardienDeLaMemoire, setGardienDeLaMemoire] = useState(null); + + // Filtered users based on search term + const filteredUsers = mockUsers.filter(user => + user.username.toLowerCase().includes(searchTerm.toLowerCase()) || + user.email.toLowerCase().includes(searchTerm.toLowerCase()) || + user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) || + user.lastName.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + // Filtered groups based on search term + const filteredGroups = mockGroups.filter(group => + group.name.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + // Function to check if a user is already selected for a role + const isUserAssigned = (userId: string) => { + return gardienDuTemps === userId || + gardienDeLaParole === userId || + gardienDeLaMemoire === userId; + }; + + // Function to get role name by user id + const getUserRole = (userId: string) => { + if (gardienDuTemps === userId) return "Gardien du Temps"; + if (gardienDeLaParole === userId) return "Gardien de la Parole"; + if (gardienDeLaMemoire === userId) return "Gardien de la Mémoire"; + return null; + }; + + // Function to assign a user to a role + const assignUserRole = (userId: string, role: 'temps' | 'parole' | 'memoire') => { + if (role === 'temps') { + setGardienDuTemps(userId); + } else if (role === 'parole') { + setGardienDeLaParole(userId); + } else if (role === 'memoire') { + setGardienDeLaMemoire(userId); + } + }; + + // Function to remove a user from a role + const removeUserRole = (role: 'temps' | 'parole' | 'memoire') => { + if (role === 'temps') { + setGardienDuTemps(null); + } else if (role === 'parole') { + setGardienDeLaParole(null); + } else if (role === 'memoire') { + setGardienDeLaMemoire(null); + } + }; return (
@@ -33,6 +104,7 @@ export function MissionsAdminPanel() { Details Attachments Skills + Membres @@ -435,6 +507,266 @@ export function MissionsAdminPanel() {
+ + +
+
+

Rôles clés pour la mission

+ +
+ {/* Gardien du Temps */} +
+
+

Gardien du Temps

+ {gardienDuTemps && ( + + )} +
+ {gardienDuTemps ? ( +
+ {(() => { + const user = mockUsers.find(u => u.id === gardienDuTemps); + return user ? ( +
+
+ {user.firstName[0]}{user.lastName[0]} +
+
+
{user.firstName} {user.lastName}
+
{user.email}
+
+
+ ) : "Utilisateur non trouvé"; + })()} +
+ ) : ( +
+ Aucun utilisateur sélectionné +
+ )} +
+ + {/* Gardien de la Parole */} +
+
+

Gardien de la Parole

+ {gardienDeLaParole && ( + + )} +
+ {gardienDeLaParole ? ( +
+ {(() => { + const user = mockUsers.find(u => u.id === gardienDeLaParole); + return user ? ( +
+
+ {user.firstName[0]}{user.lastName[0]} +
+
+
{user.firstName} {user.lastName}
+
{user.email}
+
+
+ ) : "Utilisateur non trouvé"; + })()} +
+ ) : ( +
+ Aucun utilisateur sélectionné +
+ )} +
+ + {/* Gardien de la Mémoire */} +
+
+

Gardien de la Mémoire

+ {gardienDeLaMemoire && ( + + )} +
+ {gardienDeLaMemoire ? ( +
+ {(() => { + const user = mockUsers.find(u => u.id === gardienDeLaMemoire); + return user ? ( +
+
+ {user.firstName[0]}{user.lastName[0]} +
+
+
{user.firstName} {user.lastName}
+
{user.email}
+
+
+ ) : "Utilisateur non trouvé"; + })()} +
+ ) : ( +
+ Aucun utilisateur sélectionné +
+ )} +
+
+
+ +
+
+
+

Sélectionner des membres

+
+ + +
+
+ +
+ + setSearchTerm(e.target.value)} + className="pl-9 bg-white text-gray-900 border-gray-300" + /> +
+ +
+ {selectedTab === 'users' ? ( + filteredUsers.length > 0 ? ( +
+ {filteredUsers.map(user => ( +
+
+
+ {user.firstName[0]}{user.lastName[0]} +
+
+
{user.firstName} {user.lastName}
+
{user.email}
+
+
+ {isUserAssigned(user.id) ? ( + + {getUserRole(user.id)} + + ) : ( +
+ + + +
+ )} +
+ ))} +
+ ) : ( +
+ Aucun utilisateur trouvé +
+ ) + ) : ( + filteredGroups.length > 0 ? ( +
+ {filteredGroups.map(group => ( +
+
+
+ +
+
+
{group.name}
+
{group.membersCount} membres
+
+
+ +
+ ))} +
+ ) : ( +
+ Aucun groupe trouvé +
+ ) + )} +
+
+
+
+