This commit is contained in:
alma 2025-05-05 10:23:39 +02:00
parent 1c9b5f608e
commit 2a9135debe

View File

@ -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>