feat: CRUD admin for skills and teams

components/admin/utils/admin-filters.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Users, Target, Building2, Filter } from "lucide-react";
+import { Team } from "@/lib/types";
+import { TeamStats } from "@/services/admin-service";
+import { MultiSelectFilter } from "./multi-select-filter";
+
+interface AdminFiltersProps {
+  teams: Team[];
+  teamStats: TeamStats[];
+  selectedDirections: string[];
+  selectedTeams: string[];
+  onDirectionsChange: (directions: string[]) => void;
+  onTeamsChange: (teams: string[]) => void;
+  getFilteredTeamStats: () => TeamStats[];
+}
+
+export function AdminFilters({
+  teams,
+  teamStats,
+  selectedDirections,
+  selectedTeams,
+  onDirectionsChange,
+  onTeamsChange,
+  getFilteredTeamStats,
+}: AdminFiltersProps) {
+  const hasFilters = selectedDirections.length > 0 || selectedTeams.length > 0;
+
+  const directionOptions = Array.from(
+    new Set(
+      teamStats
+        .filter((team) => team.totalMembers > 0)
+        .map((team) => team.direction)
+    )
+  ).map((direction) => ({
+    id: direction,
+    label: direction,
+    count: teamStats.filter(
+      (team) => team.direction === direction && team.totalMembers > 0
+    ).length,
+  }));
+
+  const teamOptions = teams
+    .filter((team) => {
+      const teamStat = teamStats.find((stat) => stat.teamId === team.id);
+      return teamStat && teamStat.totalMembers > 0;
+    })
+    .map((team) => ({
+      id: team.id,
+      label: `${team.name} (${team.direction})`,
+      count:
+        teamStats.find((stat) => stat.teamId === team.id)?.totalMembers || 0,
+    }));
+
+  const handleReset = () => {
+    onDirectionsChange([]);
+    onTeamsChange([]);
+  };
+
+  return (
+    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
+      <div className="flex items-center gap-2 mb-6">
+        <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
+          <Filter className="h-4 w-4 text-blue-400" />
+        </div>
+        <h3 className="text-lg font-semibold text-white">Filtres avancés</h3>
+      </div>
+
+      <div className="flex flex-col lg:flex-row gap-4">
+        <div className="flex-1">
+          <MultiSelectFilter
+            title="Directions"
+            options={directionOptions}
+            selectedValues={selectedDirections}
+            onChange={onDirectionsChange}
+            placeholder="Toutes les directions"
+            icon={<Building2 className="h-4 w-4" />}
+          />
+        </div>
+        <div className="flex-1">
+          <MultiSelectFilter
+            title="Équipes"
+            options={teamOptions}
+            selectedValues={selectedTeams}
+            onChange={onTeamsChange}
+            placeholder="Toutes les équipes"
+            icon={<Users className="h-4 w-4" />}
+          />
+        </div>
+
+        {/* Résumé des filtres actifs */}
+        {hasFilters && (
+          <div className="flex flex-col lg:flex-row items-center gap-3">
+            <div className="bg-blue-500/20 border border-blue-500/30 rounded-xl px-3 py-2">
+              <div className="flex items-center gap-2">
+                <Target className="h-3 w-3 text-blue-400" />
+                <span className="text-sm text-blue-300 font-medium">
+                  {getFilteredTeamStats().reduce(
+                    (sum, t) => sum + t.totalMembers,
+                    0
+                  )}{" "}
+                  membres
+                </span>
+              </div>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleReset}
+              className="text-xs text-slate-400 hover:text-white hover:bg-white/10"
+            >
+              Réinitialiser
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

components/admin/utils/admin-header.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Building2, Settings } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+export function AdminHeader() {
+  return (
+    <div className="text-center space-y-4 mb-12">
+      <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
+        <Building2 className="h-4 w-4 text-blue-400" />
+        <span className="text-sm font-medium text-slate-200">
+          Administration
+        </span>
+      </div>
+
+      <h1 className="text-4xl font-bold text-white">Dashboard Managérial</h1>
+
+      <p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
+        Vue d'ensemble des compétences par équipe et direction pour pilotage
+        stratégique
+      </p>
+
+      <div className="flex justify-center gap-4 pt-4">
+        <Link href="/admin">
+          <Button
+            variant="outline"
+            className="border-white/20 text-white hover:bg-white/10"
+          >
+            <Building2 className="w-4 h-4 mr-2" />
+            Vue d'ensemble
+          </Button>
+        </Link>
+        <Link href="/admin/manage">
+          <Button
+            variant="outline"
+            className="border-white/20 text-white hover:bg-white/10"
+          >
+            <Settings className="w-4 h-4 mr-2" />
+            Gestion
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+}

components/admin/utils/index.ts

@@ -0,0 +1,4 @@
+// Composants utilitaires
+export { AdminHeader } from "./admin-header";
+export { AdminFilters } from "./admin-filters";
+export { MultiSelectFilter } from "./multi-select-filter";

components/admin/utils/multi-select-filter.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Filter, X, ChevronDown } from "lucide-react";
+
+interface FilterOption {
+  id: string;
+  label: string;
+  count?: number;
+}
+
+interface MultiSelectFilterProps {
+  title: string;
+  options: FilterOption[];
+  selectedValues: string[];
+  onChange: (selectedValues: string[]) => void;
+  placeholder?: string;
+  icon?: React.ReactNode;
+}
+
+export function MultiSelectFilter({
+  title,
+  options,
+  selectedValues,
+  onChange,
+  placeholder = "Sélectionner...",
+  icon = <Filter className="h-4 w-4" />,
+}: MultiSelectFilterProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggle = (value: string) => {
+    const newSelected = selectedValues.includes(value)
+      ? selectedValues.filter((v) => v !== value)
+      : [...selectedValues, value];
+    onChange(newSelected);
+  };
+
+  const handleSelectAll = () => {
+    if (selectedValues.length === options.length) {
+      onChange([]);
+    } else {
+      onChange(options.map((opt) => opt.id));
+    }
+  };
+
+  const clearSelection = () => {
+    onChange([]);
+  };
+
+  const getDisplayText = () => {
+    if (selectedValues.length === 0) return placeholder;
+    if (selectedValues.length === 1) {
+      const option = options.find((opt) => opt.id === selectedValues[0]);
+      return option?.label || selectedValues[0];
+    }
+    return `${selectedValues.length} sélectionné(s)`;
+  };
+
+  return (
+    <div className="space-y-2">
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className="w-full justify-between h-auto min-h-10 p-3 bg-white/5 border-white/20 text-white hover:bg-white/10 hover:border-white/30"
+          >
+            <div className="flex items-center gap-2">
+              {icon}
+              <span className="font-medium text-sm text-slate-300">
+                {title}:
+              </span>
+              <span className="text-sm text-slate-400">{getDisplayText()}</span>
+            </div>
+            <ChevronDown className="h-4 w-4 text-slate-400" />
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          className="w-80 p-0 bg-slate-800 border-white/20"
+          align="start"
+        >
+          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl">
+            <div className="p-4 space-y-3">
+              {/* Header avec actions */}
+              <div className="flex items-center justify-between">
+                <span className="font-medium text-sm text-white">{title}</span>
+                <div className="flex gap-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleSelectAll}
+                    className="text-xs h-7 text-slate-400 hover:text-white hover:bg-white/10"
+                  >
+                    {selectedValues.length === options.length
+                      ? "Tout déselectionner"
+                      : "Tout sélectionner"}
+                  </Button>
+                  {selectedValues.length > 0 && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={clearSelection}
+                      className="text-xs h-7 text-slate-400 hover:text-white hover:bg-white/10"
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              {/* Options */}
+              <div className="space-y-2 max-h-60 overflow-y-auto">
+                {options.map((option) => (
+                  <div
+                    key={option.id}
+                    className="flex items-center space-x-2 p-2 rounded-lg hover:bg-white/10 cursor-pointer transition-colors"
+                    onClick={() => handleToggle(option.id)}
+                  >
+                    <Checkbox
+                      id={option.id}
+                      checked={selectedValues.includes(option.id)}
+                      onChange={() => {}} // Géré par le onClick du div parent
+                    />
+                    <label
+                      htmlFor={option.id}
+                      className="text-sm flex-1 cursor-pointer flex items-center justify-between text-white"
+                    >
+                      <span>{option.label}</span>
+                      {option.count !== undefined && (
+                        <div className="px-2 py-1 bg-blue-500/20 border border-blue-500/30 rounded">
+                          <span className="text-xs text-blue-300 font-medium">
+                            {option.count}
+                          </span>
+                        </div>
+                      )}
+                    </label>
+                  </div>
+                ))}
+              </div>
+
+              {/* Résumé de la sélection */}
+              {selectedValues.length > 0 && (
+                <div className="pt-3 border-t border-white/10">
+                  <div className="flex flex-wrap gap-1">
+                    {selectedValues.slice(0, 3).map((value) => {
+                      const option = options.find((opt) => opt.id === value);
+                      return (
+                        <div
+                          key={value}
+                          className="px-2 py-1 bg-green-500/20 border border-green-500/30 rounded"
+                        >
+                          <span className="text-xs text-green-300 font-medium">
+                            {option?.label || value}
+                          </span>
+                        </div>
+                      );
+                    })}
+                    {selectedValues.length > 3 && (
+                      <div className="px-2 py-1 bg-slate-500/20 border border-slate-500/30 rounded">
+                        <span className="text-xs text-slate-300 font-medium">
+                          +{selectedValues.length - 3}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}