785 lines
41 KiB
TypeScript
785 lines
41 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import {
|
|
Tabs,
|
|
TabsContent,
|
|
TabsList,
|
|
TabsTrigger
|
|
} from "../ui/tabs";
|
|
import { Input } from "../ui/input";
|
|
import { Button } from "../ui/button";
|
|
import { Textarea } from "../ui/textarea";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
|
|
import { Checkbox } from "../ui/checkbox";
|
|
import {
|
|
Card,
|
|
CardContent
|
|
} from "../ui/card";
|
|
import { Badge } from "../ui/badge";
|
|
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">
|
|
<Card className="border shadow-sm bg-white">
|
|
<CardContent className="pt-6">
|
|
<Tabs defaultValue="general" className="w-full">
|
|
<TabsList className="mb-4 bg-gray-100">
|
|
<TabsTrigger value="general" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">General</TabsTrigger>
|
|
<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">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">Nom de la Mission</label>
|
|
<Input placeholder="Project title" className="bg-white border-gray-300" />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">Logo</label>
|
|
<div className="border border-dashed rounded-md p-6 text-center bg-gray-50">
|
|
<Button variant="outline" className="mb-2 bg-white text-gray-700 border-gray-300 hover:bg-gray-50">Browse</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">ODD scope</label>
|
|
<Select>
|
|
<SelectTrigger className="bg-white border-gray-300">
|
|
<SelectValue placeholder="Select ODD scope" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="odd-1">1. Pas de pauvreté</SelectItem>
|
|
<SelectItem value="odd-2">2. Faim "zéro"</SelectItem>
|
|
<SelectItem value="odd-3">3. Bonne santé et bien-être</SelectItem>
|
|
<SelectItem value="odd-4">4. Éducation de qualité</SelectItem>
|
|
<SelectItem value="odd-5">5. Égalité entre les sexes</SelectItem>
|
|
<SelectItem value="odd-6">6. Eau propre et assainissement</SelectItem>
|
|
<SelectItem value="odd-7">7. Énergie propre et d'un coût abordable</SelectItem>
|
|
<SelectItem value="odd-8">8. Travail décent et croissance économique</SelectItem>
|
|
<SelectItem value="odd-9">9. Industrie, innovation et infrastructure</SelectItem>
|
|
<SelectItem value="odd-10">10. Inégalités réduites</SelectItem>
|
|
<SelectItem value="odd-11">11. Villes et communautés durables</SelectItem>
|
|
<SelectItem value="odd-12">12. Consommation et production responsables</SelectItem>
|
|
<SelectItem value="odd-13">13. Mesures relatives à la lutte contre les changements climatiques</SelectItem>
|
|
<SelectItem value="odd-14">14. Vie aquatique</SelectItem>
|
|
<SelectItem value="odd-15">15. Vie terrestre</SelectItem>
|
|
<SelectItem value="odd-16">16. Paix, justice et institutions efficaces</SelectItem>
|
|
<SelectItem value="odd-17">17. Partenariats pour la réalisation des objectifs</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">Niveau</label>
|
|
<Select>
|
|
<SelectTrigger className="bg-white border-gray-300">
|
|
<SelectValue placeholder="Select niveau" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="a">A- Apprentissage</SelectItem>
|
|
<SelectItem value="b">B- Basique</SelectItem>
|
|
<SelectItem value="c">C- Complex</SelectItem>
|
|
<SelectItem value="s">S- Spécial</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">Intention</label>
|
|
<div className="border rounded-md border-gray-300">
|
|
<div className="bg-gray-50 p-2 border-b flex items-center space-x-2">
|
|
<span className="text-gray-700">Paragraphe</span>
|
|
<div className="flex items-center space-x-1">
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">B</Button>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">I</Button>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">•</Button>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">1.</Button>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">"</Button>
|
|
</div>
|
|
</div>
|
|
<Textarea className="min-h-[200px] border-0 bg-white" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="details" className="space-y-6">
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">Type de mission</label>
|
|
<Select>
|
|
<SelectTrigger className="bg-white border-gray-300">
|
|
<SelectValue placeholder="Select location type" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="remote">Remote</SelectItem>
|
|
<SelectItem value="onsite">On Site</SelectItem>
|
|
<SelectItem value="hybrid">Hybrid</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">Donneur d'ordre</label>
|
|
<Select>
|
|
<SelectTrigger className="bg-white border-gray-300">
|
|
<SelectValue placeholder="Select volunteer type" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="individual">Individual</SelectItem>
|
|
<SelectItem value="group">Group</SelectItem>
|
|
<SelectItem value="organization">Organization</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">Projection</label>
|
|
<Select>
|
|
<SelectTrigger className="bg-white border-gray-300">
|
|
<SelectValue placeholder="Select duration" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="short">Short Term (< 1 month)</SelectItem>
|
|
<SelectItem value="medium">Medium Term (1-3 months)</SelectItem>
|
|
<SelectItem value="long">Long Term (> 3 months)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">Services</label>
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap gap-1 mb-2">
|
|
{selectedServices.map((service) => (
|
|
<Badge key={service} className="bg-blue-100 text-blue-800 hover:bg-blue-200 px-2 py-1">
|
|
{service}
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedServices(selectedServices.filter(s => s !== service))}
|
|
className="ml-1 text-blue-600 hover:text-blue-800"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="gite"
|
|
checked={selectedServices.includes('Gite')}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
setSelectedServices([...selectedServices, 'Gite']);
|
|
} else {
|
|
setSelectedServices(selectedServices.filter(s => s !== 'Gite'));
|
|
}
|
|
}}
|
|
className="border-gray-300"
|
|
/>
|
|
<label htmlFor="gite" className="text-sm text-gray-700">Gite</label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="artlab"
|
|
checked={selectedServices.includes('ArtLab')}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
setSelectedServices([...selectedServices, 'ArtLab']);
|
|
} else {
|
|
setSelectedServices(selectedServices.filter(s => s !== 'ArtLab'));
|
|
}
|
|
}}
|
|
className="border-gray-300"
|
|
/>
|
|
<label htmlFor="artlab" className="text-sm text-gray-700">ArtLab</label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="calcul"
|
|
checked={selectedServices.includes('Calcul')}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
setSelectedServices([...selectedServices, 'Calcul']);
|
|
} else {
|
|
setSelectedServices(selectedServices.filter(s => s !== 'Calcul'));
|
|
}
|
|
}}
|
|
className="border-gray-300"
|
|
/>
|
|
<label htmlFor="calcul" className="text-sm text-gray-700">Calcul</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">Participation</label>
|
|
<Select>
|
|
<SelectTrigger className="bg-white border-gray-300">
|
|
<SelectValue placeholder="Select participation" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="volontaire">Volontaire</SelectItem>
|
|
<SelectItem value="cooptation">Cooptation</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">Location</label>
|
|
<Input placeholder="Enter location" className="bg-white border-gray-300" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">Language</label>
|
|
<Input placeholder="Enter language" className="bg-white border-gray-300" />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">Profils</label>
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap gap-1 mb-2">
|
|
{selectedProfils.map((profil) => (
|
|
<Badge key={profil} className="bg-blue-100 text-blue-800 hover:bg-blue-200 px-2 py-1">
|
|
{profil}
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedProfils(selectedProfils.filter(p => p !== profil))}
|
|
className="ml-1 text-blue-600 hover:text-blue-800"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="dataintelligence"
|
|
checked={selectedProfils.includes('DataIntelligence')}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
setSelectedProfils([...selectedProfils, 'DataIntelligence']);
|
|
} else {
|
|
setSelectedProfils(selectedProfils.filter(p => p !== 'DataIntelligence'));
|
|
}
|
|
}}
|
|
className="border-gray-300"
|
|
/>
|
|
<label htmlFor="dataintelligence" className="text-sm text-gray-700">DataIntelligence</label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="expression"
|
|
checked={selectedProfils.includes('Expression')}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
setSelectedProfils([...selectedProfils, 'Expression']);
|
|
} else {
|
|
setSelectedProfils(selectedProfils.filter(p => p !== 'Expression'));
|
|
}
|
|
}}
|
|
className="border-gray-300"
|
|
/>
|
|
<label htmlFor="expression" className="text-sm text-gray-700">Expression</label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="mediation"
|
|
checked={selectedProfils.includes('Mediation')}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
setSelectedProfils([...selectedProfils, 'Mediation']);
|
|
} else {
|
|
setSelectedProfils(selectedProfils.filter(p => p !== 'Mediation'));
|
|
}
|
|
}}
|
|
className="border-gray-300"
|
|
/>
|
|
<label htmlFor="mediation" className="text-sm text-gray-700">Mediation</label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="investigation"
|
|
checked={selectedProfils.includes('Investigation')}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
setSelectedProfils([...selectedProfils, 'Investigation']);
|
|
} else {
|
|
setSelectedProfils(selectedProfils.filter(p => p !== 'Investigation'));
|
|
}
|
|
}}
|
|
className="border-gray-300"
|
|
/>
|
|
<label htmlFor="investigation" className="text-sm text-gray-700">Investigation</label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="coding"
|
|
checked={selectedProfils.includes('Coding')}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
setSelectedProfils([...selectedProfils, 'Coding']);
|
|
} else {
|
|
setSelectedProfils(selectedProfils.filter(p => p !== 'Coding'));
|
|
}
|
|
}}
|
|
className="border-gray-300"
|
|
/>
|
|
<label htmlFor="coding" className="text-sm text-gray-700">Coding</label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="lean"
|
|
checked={selectedProfils.includes('Lean')}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
setSelectedProfils([...selectedProfils, 'Lean']);
|
|
} else {
|
|
setSelectedProfils(selectedProfils.filter(p => p !== 'Lean'));
|
|
}
|
|
}}
|
|
className="border-gray-300"
|
|
/>
|
|
<label htmlFor="lean" className="text-sm text-gray-700">Lean</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="attachments" className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1 text-gray-700">Attachments</label>
|
|
<div className="border border-dashed rounded-md p-6 text-center bg-gray-50">
|
|
<Button variant="outline" className="mb-2 bg-white text-gray-700 border-gray-300 hover:bg-gray-50">Browse</Button>
|
|
<p className="text-sm text-gray-500">Upload file .pdf, .doc, .docx</p>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="skills" className="space-y-6">
|
|
<div>
|
|
<div className="flex justify-between mb-4">
|
|
<h3 className="text-lg font-medium text-gray-700">Skills</h3>
|
|
<Button variant="outline" size="sm" className="bg-white text-gray-700 border-gray-300 hover:bg-gray-50">Select / Deselect All</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox id="photoshop" className="border-gray-300" />
|
|
<label htmlFor="photoshop" className="text-sm text-gray-700">Adobe Photoshop</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox id="xd" className="border-gray-300" />
|
|
<label htmlFor="xd" className="text-sm text-gray-700">Adobe XD</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox id="android" className="border-gray-300" />
|
|
<label htmlFor="android" className="text-sm text-gray-700">Android Developer</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox id="artist" className="border-gray-300" />
|
|
<label htmlFor="artist" className="text-sm text-gray-700">Artist</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox id="computer" className="border-gray-300" />
|
|
<label htmlFor="computer" className="text-sm text-gray-700">Computer</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox id="developer" className="border-gray-300" />
|
|
<label htmlFor="developer" className="text-sm text-gray-700">Developer</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox id="frontend" className="border-gray-300" />
|
|
<label htmlFor="frontend" className="text-sm text-gray-700">Front end Developer</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox id="ios" className="border-gray-300" />
|
|
<label htmlFor="ios" className="text-sm text-gray-700">iOS Developer</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox id="support" className="border-gray-300" />
|
|
<label htmlFor="support" className="text-sm text-gray-700">Support Agent</label>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox id="writer" className="border-gray-300" />
|
|
<label htmlFor="writer" className="text-sm text-gray-700">Writer</label>
|
|
</div>
|
|
</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">
|
|
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
|
Save & Preview
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-2">
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
<polyline points="12 5 19 12 12 19"></polyline>
|
|
</svg>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|