From 2a9135debecef10d3c0d789f3a16056b51974b15 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Mon, 5 May 2025 10:23:39 +0200
Subject: [PATCH] missions

---
 components/missions/missions-admin-panel.tsx | 195 ++++++++++++++++---
 1 file changed, 172 insertions(+), 23 deletions(-)

diff --git a/components/missions/missions-admin-panel.tsx b/components/missions/missions-admin-panel.tsx
index 70ead0e9..00467441 100644
--- a/components/missions/missions-admin-panel.tsx
+++ b/components/missions/missions-admin-panel.tsx
@@ -16,8 +16,13 @@ import {
   Card, 
   CardContent
 } from "../ui/card";
+import { Badge } from "../ui/badge";
+import { X } from "lucide-react";
 
 export function MissionsAdminPanel() {
+  const [selectedServices, setSelectedServices] = useState<string[]>([]);
+  const [selectedProfils, setSelectedProfils] = useState<string[]>([]);
+
   return (
     <div className="w-full">
       <Card className="border shadow-sm bg-white">
@@ -157,16 +162,67 @@ export function MissionsAdminPanel() {
                   
                   <div>
                     <label className="block text-sm font-medium mb-1 text-gray-700">Services</label>
-                    <Select>
-                      <SelectTrigger className="bg-white border-gray-300">
-                        <SelectValue placeholder="Select services" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="gite">Gite</SelectItem>
-                        <SelectItem value="artlab">ArtLab</SelectItem>
-                        <SelectItem value="calcul">Calcul</SelectItem>
-                      </SelectContent>
-                    </Select>
+                    <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>
                 
@@ -198,19 +254,112 @@ export function MissionsAdminPanel() {
                   
                   <div>
                     <label className="block text-sm font-medium mb-1 text-gray-700">Profils</label>
-                    <Select>
-                      <SelectTrigger className="bg-white border-gray-300">
-                        <SelectValue placeholder="Select profils" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="dataintelligence">DataIntelligence</SelectItem>
-                        <SelectItem value="expression">Expression</SelectItem>
-                        <SelectItem value="mediation">Mediation</SelectItem>
-                        <SelectItem value="investigation">Investigation</SelectItem>
-                        <SelectItem value="coding">Coding</SelectItem>
-                        <SelectItem value="lean">Lean</SelectItem>
-                      </SelectContent>
-                    </Select>
+                    <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>