missions
This commit is contained in:
parent
2a9135debe
commit
f4354f2e9b
@ -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<string[]>([]);
|
||||
const [selectedProfils, setSelectedProfils] = useState<string[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [selectedTab, setSelectedTab] = useState<'users' | 'groups'>('users');
|
||||
const [gardienDuTemps, setGardienDuTemps] = useState<string | null>(null);
|
||||
const [gardienDeLaParole, setGardienDeLaParole] = useState<string | null>(null);
|
||||
const [gardienDeLaMemoire, setGardienDeLaMemoire] = useState<string | null>(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 (
|
||||
<div className="w-full">
|
||||
@ -33,6 +104,7 @@ export function MissionsAdminPanel() {
|
||||
<TabsTrigger value="details" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">Details</TabsTrigger>
|
||||
<TabsTrigger value="attachments" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">Attachments</TabsTrigger>
|
||||
<TabsTrigger value="skills" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">Skills</TabsTrigger>
|
||||
<TabsTrigger value="membres" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">Membres</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="general" className="space-y-6">
|
||||
@ -435,6 +507,266 @@ export function MissionsAdminPanel() {
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="membres" className="space-y-6">
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-medium text-gray-700 mb-4">Rôles clés pour la mission</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Gardien du Temps */}
|
||||
<div className="border rounded-md p-4 bg-white">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h4 className="font-medium text-gray-800">Gardien du Temps</h4>
|
||||
{gardienDuTemps && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => removeUserRole('temps')}
|
||||
className="text-red-600 hover:bg-red-50 border-red-200 h-8"
|
||||
>
|
||||
<X size={16} className="mr-1" />
|
||||
Supprimer
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{gardienDuTemps ? (
|
||||
<div className="bg-blue-50 border border-blue-100 rounded-md p-3">
|
||||
{(() => {
|
||||
const user = mockUsers.find(u => u.id === gardienDuTemps);
|
||||
return user ? (
|
||||
<div className="flex items-center">
|
||||
<div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-medium mr-3">
|
||||
{user.firstName[0]}{user.lastName[0]}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{user.firstName} {user.lastName}</div>
|
||||
<div className="text-sm text-gray-500">{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : "Utilisateur non trouvé";
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-md p-3 text-gray-500 text-center">
|
||||
Aucun utilisateur sélectionné
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Gardien de la Parole */}
|
||||
<div className="border rounded-md p-4 bg-white">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h4 className="font-medium text-gray-800">Gardien de la Parole</h4>
|
||||
{gardienDeLaParole && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => removeUserRole('parole')}
|
||||
className="text-red-600 hover:bg-red-50 border-red-200 h-8"
|
||||
>
|
||||
<X size={16} className="mr-1" />
|
||||
Supprimer
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{gardienDeLaParole ? (
|
||||
<div className="bg-blue-50 border border-blue-100 rounded-md p-3">
|
||||
{(() => {
|
||||
const user = mockUsers.find(u => u.id === gardienDeLaParole);
|
||||
return user ? (
|
||||
<div className="flex items-center">
|
||||
<div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-medium mr-3">
|
||||
{user.firstName[0]}{user.lastName[0]}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{user.firstName} {user.lastName}</div>
|
||||
<div className="text-sm text-gray-500">{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : "Utilisateur non trouvé";
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-md p-3 text-gray-500 text-center">
|
||||
Aucun utilisateur sélectionné
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Gardien de la Mémoire */}
|
||||
<div className="border rounded-md p-4 bg-white">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h4 className="font-medium text-gray-800">Gardien de la Mémoire</h4>
|
||||
{gardienDeLaMemoire && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => removeUserRole('memoire')}
|
||||
className="text-red-600 hover:bg-red-50 border-red-200 h-8"
|
||||
>
|
||||
<X size={16} className="mr-1" />
|
||||
Supprimer
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{gardienDeLaMemoire ? (
|
||||
<div className="bg-blue-50 border border-blue-100 rounded-md p-3">
|
||||
{(() => {
|
||||
const user = mockUsers.find(u => u.id === gardienDeLaMemoire);
|
||||
return user ? (
|
||||
<div className="flex items-center">
|
||||
<div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-medium mr-3">
|
||||
{user.firstName[0]}{user.lastName[0]}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{user.firstName} {user.lastName}</div>
|
||||
<div className="text-sm text-gray-500">{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : "Utilisateur non trouvé";
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-md p-3 text-gray-500 text-center">
|
||||
Aucun utilisateur sélectionné
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border rounded-md p-4">
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h4 className="font-medium text-gray-800">Sélectionner des membres</h4>
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
variant={selectedTab === 'users' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setSelectedTab('users')}
|
||||
className={selectedTab === 'users' ? 'bg-blue-600 text-white' : 'text-gray-700'}
|
||||
>
|
||||
<Users size={16} className="mr-1" />
|
||||
Utilisateurs
|
||||
</Button>
|
||||
<Button
|
||||
variant={selectedTab === 'groups' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setSelectedTab('groups')}
|
||||
className={selectedTab === 'groups' ? 'bg-blue-600 text-white' : 'text-gray-700'}
|
||||
>
|
||||
<Users size={16} className="mr-1" />
|
||||
Groupes
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mb-4">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={`Rechercher ${selectedTab === 'users' ? 'un utilisateur' : 'un groupe'}...`}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-9 bg-white text-gray-900 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="border rounded-md max-h-[300px] overflow-y-auto">
|
||||
{selectedTab === 'users' ? (
|
||||
filteredUsers.length > 0 ? (
|
||||
<div className="divide-y divide-gray-200">
|
||||
{filteredUsers.map(user => (
|
||||
<div key={user.id} className="p-3 hover:bg-gray-50 flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 font-medium mr-3">
|
||||
{user.firstName[0]}{user.lastName[0]}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{user.firstName} {user.lastName}</div>
|
||||
<div className="text-sm text-gray-500">{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
{isUserAssigned(user.id) ? (
|
||||
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200 px-2 py-1">
|
||||
{getUserRole(user.id)}
|
||||
</Badge>
|
||||
) : (
|
||||
<div className="flex space-x-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => assignUserRole(user.id, 'temps')}
|
||||
disabled={gardienDuTemps !== null}
|
||||
className="text-blue-600 hover:bg-blue-50 border-blue-200 h-8"
|
||||
>
|
||||
Temps
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => assignUserRole(user.id, 'parole')}
|
||||
disabled={gardienDeLaParole !== null}
|
||||
className="text-blue-600 hover:bg-blue-50 border-blue-200 h-8"
|
||||
>
|
||||
Parole
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => assignUserRole(user.id, 'memoire')}
|
||||
disabled={gardienDeLaMemoire !== null}
|
||||
className="text-blue-600 hover:bg-blue-50 border-blue-200 h-8"
|
||||
>
|
||||
Mémoire
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
Aucun utilisateur trouvé
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
filteredGroups.length > 0 ? (
|
||||
<div className="divide-y divide-gray-200">
|
||||
{filteredGroups.map(group => (
|
||||
<div key={group.id} className="p-3 hover:bg-gray-50 flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 font-medium mr-3">
|
||||
<Users size={16} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{group.name}</div>
|
||||
<div className="text-sm text-gray-500">{group.membersCount} membres</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-blue-600 hover:bg-blue-50 border-blue-200 h-8"
|
||||
>
|
||||
<UserPlus size={16} className="mr-1" />
|
||||
Voir membres
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
Aucun groupe trouvé
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="mt-8 flex justify-end">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user