Checkpoint: Application complète : deux tableaux de bord (Veille Stratégique + AAP), import Excel quotidien avec déduplication, sources multiples (local/OneDrive/FTP/SharePoint), affichage liste/vignettes, filtres multi-critères, gestion utilisateurs, logs d'import, page paramètres, authentification locale, tâche cron 06h00, 13 tests Vitest passants.

client/src/pages/AAPDashboard.tsx

@@ -0,0 +1,312 @@
+import { useState, useMemo } from "react";
+import { trpc } from "@/lib/trpc";
+import { FilterBar } from "@/components/FilterBar";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  LayoutGrid,
+  List,
+  ExternalLink,
+  Calendar,
+  MapPin,
+  Target,
+  Loader2,
+  ChevronLeft,
+  ChevronRight,
+  AlertCircle,
+  Clock,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { format, isPast, differenceInDays } from "date-fns";
+import { fr } from "date-fns/locale";
+
+type AAPCategorie = "Handicap" | "PA" | "Enfance" | "Précarité" | "Sanitaire" | "Autre";
+
+interface AAPItem {
+  id: number;
+  titre: string;
+  categorie: string;
+  region: string | null;
+  departement: string | null;
+  dateCloture: Date | null;
+  datePublication: Date | null;
+  lien: string | null;
+  importedAt: Date;
+}
+
+const CAT_COLORS: Record<string, string> = {
+  Handicap: "bg-violet-100 text-violet-800 border-violet-200",
+  PA: "bg-sky-100 text-sky-800 border-sky-200",
+  Enfance: "bg-pink-100 text-pink-800 border-pink-200",
+  "Précarité": "bg-orange-100 text-orange-800 border-orange-200",
+  Sanitaire: "bg-teal-100 text-teal-800 border-teal-200",
+  Autre: "bg-gray-100 text-gray-700 border-gray-200",
+};
+
+const CAT_ACCENT: Record<string, string> = {
+  Handicap: "border-l-violet-500",
+  PA: "border-l-sky-500",
+  Enfance: "border-l-pink-500",
+  "Précarité": "border-l-orange-500",
+  Sanitaire: "border-l-teal-500",
+  Autre: "border-l-gray-400",
+};
+
+const PAGE_SIZE = 24;
+
+function formatDate(d: Date | null | undefined): string | null {
+  if (!d) return null;
+  try { return format(new Date(d), "d MMM yyyy", { locale: fr }); }
+  catch { return null; }
+}
+
+function ClotureStatus({ date }: { date: Date | null | undefined }) {
+  if (!date) return <span className="text-muted-foreground text-xs">—</span>;
+  const d = new Date(date);
+  const past = isPast(d);
+  const daysLeft = differenceInDays(d, new Date());
+
+  if (past) {
+    return (
+      <span className="inline-flex items-center gap-1 text-xs text-red-600 font-medium">
+        <AlertCircle size={11} />
+        Clôturé
+      </span>
+    );
+  }
+  if (daysLeft <= 7) {
+    return (
+      <span className="inline-flex items-center gap-1 text-xs text-amber-600 font-medium">
+        <Clock size={11} />
+        {daysLeft}j restants
+      </span>
+    );
+  }
+  return <span className="text-xs text-muted-foreground">{formatDate(d)}</span>;
+}
+
+export default function AAPDashboard() {
+  const [viewMode, setViewMode] = useState<"list" | "grid">("list");
+  const [activeTab, setActiveTab] = useState<AAPCategorie | "all">("all");
+  const [page, setPage] = useState(1);
+  const [filterValues, setFilterValues] = useState<Record<string, string>>({});
+
+  const filtersQuery = trpc.aap.filters.useQuery();
+
+  const queryInput = useMemo(() => ({
+    categorie: activeTab !== "all" ? activeTab : undefined,
+    region: filterValues.region || undefined,
+    departement: filterValues.departement || undefined,
+    search: filterValues.search || undefined,
+    dateFrom: filterValues.dateFrom ? new Date(filterValues.dateFrom) : undefined,
+    dateTo: filterValues.dateTo ? new Date(filterValues.dateTo) : undefined,
+    clotureFrom: filterValues.clotureFrom ? new Date(filterValues.clotureFrom) : undefined,
+    clotureTo: filterValues.clotureTo ? new Date(filterValues.clotureTo) : undefined,
+    page,
+    pageSize: PAGE_SIZE,
+  }), [activeTab, filterValues, page]);
+
+  const itemsQuery = trpc.aap.list.useQuery(queryInput);
+
+  const handleFilterChange = (key: string, value: string) => {
+    setFilterValues((prev) => ({ ...prev, [key]: value }));
+    setPage(1);
+  };
+
+  const handleReset = () => {
+    setFilterValues({});
+    setPage(1);
+  };
+
+  const items = (itemsQuery.data?.items ?? []) as AAPItem[];
+  const total = itemsQuery.data?.total ?? 0;
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  const filterOptions = [
+    { key: "region", label: "Région", options: filtersQuery.data?.regions ?? [] },
+    { key: "departement", label: "Département", options: filtersQuery.data?.departements ?? [] },
+    { key: "dateFrom", label: "Publié depuis", type: "date" as const },
+    { key: "dateTo", label: "Publié jusqu'à", type: "date" as const },
+    { key: "clotureFrom", label: "Clôture depuis", type: "date" as const },
+    { key: "clotureTo", label: "Clôture jusqu'à", type: "date" as const },
+  ];
+
+  const categories: AAPCategorie[] = ["Handicap", "PA", "Enfance", "Précarité", "Sanitaire", "Autre"];
+
+  return (
+    <div className="p-6 space-y-6 animate-fade-up">
+      {/* En-tête */}
+      <div className="flex items-start justify-between gap-4 flex-wrap">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <Target size={22} className="text-primary" />
+            <h1 className="text-2xl font-bold text-foreground">Appels à Projets</h1>
+          </div>
+          <p className="text-muted-foreground text-sm">
+            Handicap, Personnes Âgées, Enfance, Précarité, Sanitaire et Autre
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant={viewMode === "list" ? "default" : "outline"} size="sm" onClick={() => setViewMode("list")} className="gap-2">
+            <List size={15} />Liste
+          </Button>
+          <Button variant={viewMode === "grid" ? "default" : "outline"} size="sm" onClick={() => setViewMode("grid")} className="gap-2">
+            <LayoutGrid size={15} />Vignettes
+          </Button>
+        </div>
+      </div>
+
+      {/* Onglets */}
+      <Tabs value={activeTab} onValueChange={(v) => { setActiveTab(v as AAPCategorie | "all"); setPage(1); }}>
+        <TabsList className="bg-muted/50 flex-wrap h-auto gap-1">
+          <TabsTrigger value="all">Tous</TabsTrigger>
+          {categories.map((c) => (
+            <TabsTrigger key={c} value={c}>{c}</TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+
+      {/* Filtres */}
+      <FilterBar
+        filters={filterOptions}
+        values={filterValues}
+        onChange={handleFilterChange}
+        onReset={handleReset}
+        searchPlaceholder="Rechercher dans les titres…"
+        totalCount={total}
+      />
+
+      {/* Contenu */}
+      {itemsQuery.isLoading ? (
+        <div className="flex items-center justify-center py-24">
+          <Loader2 size={32} className="animate-spin text-primary" />
+        </div>
+      ) : items.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-24 text-center">
+          <Target size={48} className="text-muted-foreground/30 mb-4" />
+          <p className="text-muted-foreground font-medium">Aucun appel à projets trouvé</p>
+          <p className="text-muted-foreground/60 text-sm mt-1">Modifiez vos filtres ou importez des données</p>
+        </div>
+      ) : viewMode === "list" ? (
+        <AAPListView items={items} />
+      ) : (
+        <AAPGridView items={items} />
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2 pt-2">
+          <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1}>
+            <ChevronLeft size={14} />
+          </Button>
+          <span className="text-sm text-muted-foreground px-2">Page {page} / {totalPages}</span>
+          <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page === totalPages}>
+            <ChevronRight size={14} />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Vue Liste ────────────────────────────────────────────────────────────────
+
+function AAPListView({ items }: { items: AAPItem[] }) {
+  return (
+    <div className="rounded-xl border border-border overflow-hidden shadow-sm">
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-muted/50 border-b border-border">
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-8">#</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground">Titre</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-28">Catégorie</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-36">Région</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-32">Département</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-28">Publication</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-32">Clôture</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-16">Lien</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border">
+            {items.map((item, idx) => (
+              <tr key={item.id} className={cn("hover:bg-muted/30 transition-colors border-l-4", CAT_ACCENT[item.categorie] || "border-l-transparent")}>
+                <td className="px-4 py-3 text-muted-foreground/50 text-xs">{idx + 1}</td>
+                <td className="px-4 py-3">
+                  <p className="font-medium text-foreground line-clamp-2 max-w-sm leading-snug">{item.titre}</p>
+                </td>
+                <td className="px-4 py-3">
+                  <Badge variant="outline" className={cn("text-xs", CAT_COLORS[item.categorie])}>
+                    {item.categorie}
+                  </Badge>
+                </td>
+                <td className="px-4 py-3 text-muted-foreground text-xs">{item.region || "—"}</td>
+                <td className="px-4 py-3 text-muted-foreground text-xs">{item.departement || "—"}</td>
+                <td className="px-4 py-3 text-muted-foreground text-xs whitespace-nowrap">{formatDate(item.datePublication) || "—"}</td>
+                <td className="px-4 py-3"><ClotureStatus date={item.dateCloture} /></td>
+                <td className="px-4 py-3">
+                  {item.lien && (
+                    <a href={item.lien} target="_blank" rel="noopener noreferrer" className="text-accent hover:text-accent/80 transition-colors">
+                      <ExternalLink size={15} />
+                    </a>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+// ─── Vue Vignettes ────────────────────────────────────────────────────────────
+
+function AAPGridView({ items }: { items: AAPItem[] }) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+      {items.map((item) => (
+        <Card key={item.id} className={cn("group hover:shadow-md transition-all duration-200 border-border overflow-hidden border-l-4", CAT_ACCENT[item.categorie] || "")}>
+          <CardHeader className="pb-2 pt-4 px-4">
+            <div className="flex items-start justify-between gap-2">
+              <Badge variant="outline" className={cn("text-xs flex-shrink-0", CAT_COLORS[item.categorie])}>
+                {item.categorie}
+              </Badge>
+              {item.lien && (
+                <a href={item.lien} target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-accent transition-colors flex-shrink-0">
+                  <ExternalLink size={14} />
+                </a>
+              )}
+            </div>
+            <h3 className="font-semibold text-sm text-foreground leading-snug line-clamp-3 mt-2">{item.titre}</h3>
+          </CardHeader>
+          <CardContent className="px-4 pb-4 space-y-2">
+            <div className="flex flex-wrap gap-2">
+              {item.region && (
+                <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                  <MapPin size={10} />{item.region}
+                </span>
+              )}
+              {item.departement && (
+                <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                  <MapPin size={10} />{item.departement}
+                </span>
+              )}
+            </div>
+            <div className="flex items-center justify-between pt-1 border-t border-border/50">
+              {item.datePublication && (
+                <span className="inline-flex items-center gap-1 text-xs text-muted-foreground/70">
+                  <Calendar size={10} />
+                  {formatDate(item.datePublication)}
+                </span>
+              )}
+              <ClotureStatus date={item.dateCloture} />
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

client/src/pages/ImportLogs.tsx

@@ -0,0 +1,192 @@
+import { useState } from "react";
+import { trpc } from "@/lib/trpc";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Activity,
+  CheckCircle,
+  XCircle,
+  Loader2,
+  RefreshCw,
+  ChevronLeft,
+  ChevronRight,
+  Clock,
+  FileText,
+} from "lucide-react";
+import { format } from "date-fns";
+import { fr } from "date-fns/locale";
+import { cn } from "@/lib/utils";
+
+interface ImportLog {
+  id: number;
+  fileType: "veille" | "aap";
+  status: "success" | "error" | "partial";
+  newRows: number | null;
+  skippedRows: number | null;
+  totalRows: number | null;
+  errorMessage: string | null;
+  startedAt: Date;
+  completedAt: Date | null;
+  source: string | null;
+}
+
+const STATUS_CONFIG = {
+  success: { label: "Succès", color: "bg-emerald-100 text-emerald-800 border-emerald-200", icon: <CheckCircle size={12} /> },
+  error: { label: "Erreur", color: "bg-red-100 text-red-800 border-red-200", icon: <XCircle size={12} /> },
+  partial: { label: "Partiel", color: "bg-amber-100 text-amber-800 border-amber-200", icon: <Activity size={12} /> },
+};
+
+const FILE_CONFIG = {
+  veille: { label: "Veille Stratégique", color: "bg-blue-100 text-blue-800 border-blue-200" },
+  aap: { label: "Appels à Projets", color: "bg-violet-100 text-violet-800 border-violet-200" },
+};
+
+const PAGE_SIZE = 20;
+
+export default function ImportLogs() {
+  const [page, setPage] = useState(1);
+
+  const logsQuery = trpc.import.logs.useQuery({ page, pageSize: PAGE_SIZE });
+  const importMutation = trpc.import.run.useMutation({
+    onSuccess: () => logsQuery.refetch(),
+  });
+
+  const logs = (logsQuery.data?.logs ?? []) as unknown as ImportLog[];
+  const total = logsQuery.data?.total ?? 0;
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  return (
+    <div className="p-6 space-y-6 animate-fade-up">
+      {/* En-tête */}
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <Activity size={22} className="text-primary" />
+            <h1 className="text-2xl font-bold text-foreground">Logs d'import</h1>
+          </div>
+          <p className="text-muted-foreground text-sm">Historique des imports automatiques et manuels</p>
+        </div>
+        <Button
+          onClick={() => importMutation.mutate({ type: "all" })}
+          disabled={importMutation.isPending}
+          className="gap-2"
+        >
+          {importMutation.isPending ? <Loader2 size={15} className="animate-spin" /> : <RefreshCw size={15} />}
+          Importer maintenant
+        </Button>
+      </div>
+
+      {/* Stats rapides */}
+      {logsQuery.data?.stats && (
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          {[
+            { label: "Total imports", value: logsQuery.data.stats.total, icon: <FileText size={16} />, color: "text-primary" },
+            { label: "Succès", value: logsQuery.data.stats.success, icon: <CheckCircle size={16} />, color: "text-emerald-600" },
+            { label: "Erreurs", value: logsQuery.data.stats.errors, icon: <XCircle size={16} />, color: "text-red-500" },
+            { label: "Nouvelles entrées", value: logsQuery.data.stats.totalNewRows, icon: <Activity size={16} />, color: "text-accent" },
+          ].map((stat) => (
+            <Card key={stat.label} className="border-border/50">
+              <CardContent className="p-4">
+                <div className={cn("flex items-center gap-2 mb-1", stat.color)}>
+                  {stat.icon}
+                  <span className="text-xs font-medium text-muted-foreground">{stat.label}</span>
+                </div>
+                <p className={cn("text-2xl font-bold", stat.color)}>{stat.value}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* Tableau des logs */}
+      <Card>
+        <CardContent className="p-0">
+          {logsQuery.isLoading ? (
+            <div className="flex items-center justify-center py-16">
+              <Loader2 size={28} className="animate-spin text-primary" />
+            </div>
+          ) : logs.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-center">
+              <Activity size={40} className="text-muted-foreground/30 mb-3" />
+              <p className="text-muted-foreground">Aucun log d'import</p>
+              <p className="text-xs text-muted-foreground/60 mt-1">Les imports apparaîtront ici</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-border bg-muted/30">
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground">Date</th>
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-36">Fichier</th>
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-24">Statut</th>
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-28">Nouvelles</th>
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-24">Ignorées</th>
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-24">Total</th>
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-24">Durée</th>
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground">Message</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-border">
+                  {logs.map((log) => {
+                    const status = STATUS_CONFIG[log.status] || STATUS_CONFIG.error;
+                    const fileConf = FILE_CONFIG[log.fileType] || FILE_CONFIG.veille;
+                    return (
+                      <tr key={log.id} className="hover:bg-muted/20 transition-colors">
+                        <td className="px-4 py-3 text-xs text-muted-foreground whitespace-nowrap">
+                          <div className="flex items-center gap-1">
+                            <Clock size={11} />
+                            {format(new Date(log.startedAt), "d MMM yyyy HH:mm", { locale: fr })}
+                          </div>
+                        </td>
+                        <td className="px-4 py-3">
+                          <Badge variant="outline" className={cn("text-xs", fileConf.color)}>
+                            {fileConf.label}
+                          </Badge>
+                        </td>
+                        <td className="px-4 py-3">
+                          <Badge variant="outline" className={cn("text-xs gap-1", status.color)}>
+                            {status.icon}
+                            {status.label}
+                          </Badge>
+                        </td>
+                        <td className="px-4 py-3">
+                          <span className="font-semibold text-emerald-600">+{log.newRows}</span>
+                        </td>
+                        <td className="px-4 py-3 text-muted-foreground">{log.skippedRows}</td>
+                        <td className="px-4 py-3 text-muted-foreground">{log.totalRows}</td>
+                        <td className="px-4 py-3 text-xs text-muted-foreground">
+                          {log.startedAt && log.completedAt
+                            ? `${((new Date(log.completedAt).getTime() - new Date(log.startedAt).getTime()) / 1000).toFixed(1)}s`
+                            : "—"}
+                        </td>
+                        <td className="px-4 py-3 text-xs text-muted-foreground max-w-xs">
+                          {log.errorMessage ? (
+                            <span className="text-red-500">{log.errorMessage}</span>
+                          ) : "—"}
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1}>
+            <ChevronLeft size={14} />
+          </Button>
+          <span className="text-sm text-muted-foreground px-2">Page {page} / {totalPages}</span>
+          <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page === totalPages}>
+            <ChevronRight size={14} />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

client/src/pages/Login.tsx

@@ -0,0 +1,133 @@
+import { useState } from "react";
+import { useLocation } from "wouter";
+import { useLocalAuth } from "@/contexts/LocalAuthContext";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { FileText, Eye, EyeOff, Loader2, Shield } from "lucide-react";
+import { toast } from "sonner";
+
+export default function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { login } = useLocalAuth();
+  const [, navigate] = useLocation();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email || !password) return;
+    setLoading(true);
+    try {
+      await login(email, password);
+      navigate("/veille");
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : "Erreur de connexion";
+      toast.error("Connexion échouée", { description: msg });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-primary/5 via-background to-accent/5 flex items-center justify-center p-4">
+      {/* Décoration de fond */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute -top-40 -right-40 w-96 h-96 rounded-full bg-primary/5 blur-3xl" />
+        <div className="absolute -bottom-40 -left-40 w-96 h-96 rounded-full bg-accent/5 blur-3xl" />
+      </div>
+
+      <div className="relative w-full max-w-md">
+        {/* Logo et titre */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary shadow-lg mb-4">
+            <FileText size={28} className="text-primary-foreground" />
+          </div>
+          <h1 className="text-2xl font-bold text-foreground">Veille Réglementaire</h1>
+          <p className="text-muted-foreground mt-1 text-sm">Direction des Opérations — Itinova</p>
+        </div>
+
+        <Card className="border-border/50 shadow-xl">
+          <CardHeader className="space-y-1 pb-4">
+            <div className="flex items-center gap-2">
+              <Shield size={16} className="text-accent" />
+              <CardTitle className="text-lg">Connexion sécurisée</CardTitle>
+            </div>
+            <CardDescription>
+              Entrez vos identifiants pour accéder à l'application
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email">Adresse e-mail</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="votre@email.fr"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  autoComplete="email"
+                  required
+                  className="h-11"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="password">Mot de passe</Label>
+                <div className="relative">
+                  <Input
+                    id="password"
+                    type={showPassword ? "text" : "password"}
+                    placeholder="••••••••"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    autoComplete="current-password"
+                    required
+                    className="h-11 pr-10"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                  </button>
+                </div>
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full h-11 bg-primary hover:bg-primary/90 text-primary-foreground font-semibold"
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <Loader2 size={16} className="animate-spin mr-2" />
+                    Connexion en cours…
+                  </>
+                ) : (
+                  "Se connecter"
+                )}
+              </Button>
+            </form>
+
+            <div className="mt-6 p-3 rounded-lg bg-muted/50 border border-border/50">
+              <p className="text-xs text-muted-foreground text-center">
+                Compte par défaut : <span className="font-mono font-semibold">admin@itinova.fr</span>
+                <br />
+                Mot de passe : <span className="font-mono font-semibold">Admin@Itinova2024!</span>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <p className="text-center text-xs text-muted-foreground mt-6">
+          © {new Date().getFullYear()} Itinova — Application interne
+        </p>
+      </div>
+    </div>
+  );
+}

client/src/pages/Settings.tsx

@@ -0,0 +1,366 @@
+import { useState, useEffect } from "react";
+import { trpc } from "@/lib/trpc";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import {
+  Settings as SettingsIcon,
+  HardDrive,
+  Cloud,
+  Server,
+  Globe,
+  Save,
+  RefreshCw,
+  CheckCircle,
+  Clock,
+  Loader2,
+  Info,
+} from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+
+type SourceType = "local" | "onedrive" | "ftp" | "sharepoint";
+
+const SOURCE_ICONS: Record<SourceType, React.ReactNode> = {
+  local: <HardDrive size={18} />,
+  onedrive: <Cloud size={18} />,
+  ftp: <Server size={18} />,
+  sharepoint: <Globe size={18} />,
+};
+
+const SOURCE_LABELS: Record<SourceType, string> = {
+  local: "Fichier local",
+  onedrive: "OneDrive",
+  ftp: "Serveur FTP",
+  sharepoint: "SharePoint",
+};
+
+export default function SettingsPage() {
+  const settingsQuery = trpc.settings.get.useQuery();
+  const saveMutation = trpc.settings.save.useMutation({
+    onSuccess: () => toast.success("Paramètres sauvegardés"),
+    onError: (e) => toast.error("Erreur", { description: e.message }),
+  });
+  const importMutation = trpc.import.run.useMutation({
+    onSuccess: (data) => {
+      const v = "veille" in data ? data.veille : null;
+      const a = "aap" in data ? data.aap : null;
+      toast.success("Import terminé", {
+        description: [
+          v ? `Veille: +${v.newRows} nouvelles entrées (${v.skippedRows} ignorées)` : null,
+          a ? `AAP: +${a.newRows} nouvelles entrées (${a.skippedRows} ignorées)` : null,
+        ].filter(Boolean).join(" | "),
+      });
+    },
+    onError: (e) => toast.error("Erreur d'import", { description: e.message }),
+  });
+
+  const [form, setForm] = useState<Record<string, string>>({
+    source_type: "local",
+    veille_file_path: "",
+    aap_file_path: "",
+    ftp_host: "",
+    ftp_port: "21",
+    ftp_user: "",
+    ftp_password: "",
+    ftp_secure: "false",
+    onedrive_token: "",
+    sharepoint_site_url: "",
+    sharepoint_token: "",
+    auth_mode: "local",
+    import_time: "06:00",
+  });
+
+  useEffect(() => {
+    if (settingsQuery.data) {
+      setForm((prev) => ({ ...prev, ...settingsQuery.data }));
+    }
+  }, [settingsQuery.data]);
+
+  const set = (key: string, value: string) => setForm((prev) => ({ ...prev, [key]: value }));
+
+  const handleSave = () => {
+    saveMutation.mutate(form as Parameters<typeof saveMutation.mutate>[0]);
+  };
+
+  const sourceType = (form.source_type || "local") as SourceType;
+
+  return (
+    <div className="p-6 space-y-6 max-w-4xl animate-fade-up">
+      {/* En-tête */}
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <SettingsIcon size={22} className="text-primary" />
+            <h1 className="text-2xl font-bold text-foreground">Paramètres</h1>
+          </div>
+          <p className="text-muted-foreground text-sm">Configuration de l'application et des imports</p>
+        </div>
+        <Button onClick={handleSave} disabled={saveMutation.isPending} className="gap-2">
+          {saveMutation.isPending ? <Loader2 size={15} className="animate-spin" /> : <Save size={15} />}
+          Enregistrer
+        </Button>
+      </div>
+
+      <Tabs defaultValue="source">
+        <TabsList className="bg-muted/50">
+          <TabsTrigger value="source">Source des fichiers</TabsTrigger>
+          <TabsTrigger value="import">Import & Planification</TabsTrigger>
+          <TabsTrigger value="auth">Authentification</TabsTrigger>
+        </TabsList>
+
+        {/* ─── Source des fichiers ─────────────────────────────────────── */}
+        <TabsContent value="source" className="space-y-4 mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Type de source</CardTitle>
+              <CardDescription>Choisissez où sont stockés les fichiers Excel à importer</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                {(["local", "onedrive", "ftp", "sharepoint"] as SourceType[]).map((s) => (
+                  <button
+                    key={s}
+                    onClick={() => set("source_type", s)}
+                    className={cn(
+                      "flex flex-col items-center gap-2 p-4 rounded-xl border-2 transition-all duration-150 text-sm font-medium",
+                      sourceType === s
+                        ? "border-primary bg-primary/5 text-primary"
+                        : "border-border bg-card text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                    )}
+                  >
+                    {SOURCE_ICONS[s]}
+                    {SOURCE_LABELS[s]}
+                  </button>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Chemins des fichiers */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Chemins des fichiers</CardTitle>
+              <CardDescription>
+                {sourceType === "local"
+                  ? "Chemin absolu vers les fichiers sur le serveur"
+                  : sourceType === "ftp"
+                  ? "Chemin relatif sur le serveur FTP"
+                  : "URL complète vers les fichiers"}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label>Fichier Veille Stratégique</Label>
+                <Input
+                  placeholder={sourceType === "local" ? "/data/veille/Veillestratégique.xlsx" : "https://..."}
+                  value={form.veille_file_path}
+                  onChange={(e) => set("veille_file_path", e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>Fichier Appels à Projets</Label>
+                <Input
+                  placeholder={sourceType === "local" ? "/data/veille/AAP2étendu.xlsx" : "https://..."}
+                  value={form.aap_file_path}
+                  onChange={(e) => set("aap_file_path", e.target.value)}
+                />
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Configuration FTP */}
+          {sourceType === "ftp" && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base flex items-center gap-2"><Server size={16} />Configuration FTP</CardTitle>
+              </CardHeader>
+              <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label>Hôte FTP</Label>
+                  <Input placeholder="ftp.exemple.fr" value={form.ftp_host} onChange={(e) => set("ftp_host", e.target.value)} />
+                </div>
+                <div className="space-y-2">
+                  <Label>Port</Label>
+                  <Input type="number" placeholder="21" value={form.ftp_port} onChange={(e) => set("ftp_port", e.target.value)} />
+                </div>
+                <div className="space-y-2">
+                  <Label>Utilisateur</Label>
+                  <Input placeholder="user" value={form.ftp_user} onChange={(e) => set("ftp_user", e.target.value)} />
+                </div>
+                <div className="space-y-2">
+                  <Label>Mot de passe</Label>
+                  <Input type="password" placeholder="••••••••" value={form.ftp_password} onChange={(e) => set("ftp_password", e.target.value)} />
+                </div>
+                <div className="flex items-center gap-3 col-span-2">
+                  <Switch
+                    checked={form.ftp_secure === "true"}
+                    onCheckedChange={(v) => set("ftp_secure", v ? "true" : "false")}
+                  />
+                  <Label>Connexion sécurisée (FTPS)</Label>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Configuration OneDrive */}
+          {sourceType === "onedrive" && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base flex items-center gap-2"><Cloud size={16} />Configuration OneDrive</CardTitle>
+                <CardDescription>Token d'accès Microsoft Graph API</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label>Token d'accès</Label>
+                  <Input type="password" placeholder="eyJ0eXAiOiJKV1Qi..." value={form.onedrive_token} onChange={(e) => set("onedrive_token", e.target.value)} />
+                </div>
+                <div className="flex items-start gap-2 p-3 rounded-lg bg-blue-50 border border-blue-200">
+                  <Info size={14} className="text-blue-600 mt-0.5 flex-shrink-0" />
+                  <p className="text-xs text-blue-700">
+                    Obtenez un token via <strong>Azure Active Directory</strong> avec les permissions <code>Files.Read</code>. Les URLs des fichiers doivent être des liens de téléchargement directs.
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Configuration SharePoint */}
+          {sourceType === "sharepoint" && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base flex items-center gap-2"><Globe size={16} />Configuration SharePoint</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label>URL du site SharePoint</Label>
+                  <Input placeholder="https://monorg.sharepoint.com/sites/monsite" value={form.sharepoint_site_url} onChange={(e) => set("sharepoint_site_url", e.target.value)} />
+                </div>
+                <div className="space-y-2">
+                  <Label>Token d'accès</Label>
+                  <Input type="password" placeholder="eyJ0eXAiOiJKV1Qi..." value={form.sharepoint_token} onChange={(e) => set("sharepoint_token", e.target.value)} />
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+
+        {/* ─── Import & Planification ──────────────────────────────────── */}
+        <TabsContent value="import" className="space-y-4 mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base flex items-center gap-2"><Clock size={16} />Planification de l'import</CardTitle>
+              <CardDescription>L'import automatique s'exécute quotidiennement à l'heure configurée</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2 max-w-xs">
+                <Label>Heure d'import quotidien</Label>
+                <Input
+                  type="time"
+                  value={form.import_time || "06:00"}
+                  onChange={(e) => set("import_time", e.target.value)}
+                  className="h-11"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Prochain import : demain à {form.import_time || "06:00"}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base flex items-center gap-2"><RefreshCw size={16} />Import manuel</CardTitle>
+              <CardDescription>Déclenchez un import immédiat des deux fichiers</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="flex flex-wrap gap-3">
+                <Button
+                  onClick={() => importMutation.mutate({ type: "all" })}
+                  disabled={importMutation.isPending}
+                  className="gap-2"
+                >
+                  {importMutation.isPending ? <Loader2 size={15} className="animate-spin" /> : <RefreshCw size={15} />}
+                  Importer les deux fichiers
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => importMutation.mutate({ type: "veille" })}
+                  disabled={importMutation.isPending}
+                  className="gap-2"
+                >
+                  Veille uniquement
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => importMutation.mutate({ type: "aap" })}
+                  disabled={importMutation.isPending}
+                  className="gap-2"
+                >
+                  AAP uniquement
+                </Button>
+              </div>
+              {importMutation.isSuccess && (
+                <div className="flex items-center gap-2 text-sm text-emerald-600">
+                  <CheckCircle size={14} />
+                  Import terminé avec succès
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* ─── Authentification ────────────────────────────────────────── */}
+        <TabsContent value="auth" className="space-y-4 mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Mode d'accès</CardTitle>
+              <CardDescription>Définissez si l'application nécessite une authentification</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <button
+                  onClick={() => set("auth_mode", "local")}
+                  className={cn(
+                    "flex flex-col items-start gap-1 p-4 rounded-xl border-2 transition-all duration-150 text-left",
+                    form.auth_mode === "local"
+                      ? "border-primary bg-primary/5"
+                      : "border-border bg-card hover:border-primary/50"
+                  )}
+                >
+                  <div className="flex items-center gap-2 font-semibold text-sm">
+                    <Server size={15} className={form.auth_mode === "local" ? "text-primary" : "text-muted-foreground"} />
+                    Authentification locale
+                    {form.auth_mode === "local" && <Badge className="ml-auto text-xs">Actif</Badge>}
+                  </div>
+                  <p className="text-xs text-muted-foreground">Les utilisateurs doivent se connecter avec un compte local</p>
+                </button>
+                <button
+                  onClick={() => set("auth_mode", "free")}
+                  className={cn(
+                    "flex flex-col items-start gap-1 p-4 rounded-xl border-2 transition-all duration-150 text-left",
+                    form.auth_mode === "free"
+                      ? "border-primary bg-primary/5"
+                      : "border-border bg-card hover:border-primary/50"
+                  )}
+                >
+                  <div className="flex items-center gap-2 font-semibold text-sm">
+                    <Globe size={15} className={form.auth_mode === "free" ? "text-primary" : "text-muted-foreground"} />
+                    Accès libre
+                    {form.auth_mode === "free" && <Badge className="ml-auto text-xs">Actif</Badge>}
+                  </div>
+                  <p className="text-xs text-muted-foreground">L'application est accessible sans connexion (lecture seule)</p>
+                </button>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

client/src/pages/UsersAdmin.tsx

@@ -0,0 +1,313 @@
+import { useState } from "react";
+import { trpc } from "@/lib/trpc";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+  Users,
+  Plus,
+  Pencil,
+  Trash2,
+  Loader2,
+  ShieldCheck,
+  User,
+  Eye,
+  CheckCircle,
+  XCircle,
+} from "lucide-react";
+import { toast } from "sonner";
+import { format } from "date-fns";
+import { fr } from "date-fns/locale";
+import { cn } from "@/lib/utils";
+
+type Role = "admin" | "user" | "readonly";
+
+interface LocalUser {
+  id: number;
+  name: string;
+  email: string;
+  role: Role;
+  isActive: boolean;
+  createdAt: Date;
+  lastSignedIn: Date | null;
+}
+
+const ROLE_LABELS: Record<Role, string> = {
+  admin: "Administrateur",
+  user: "Utilisateur",
+  readonly: "Lecture seule",
+};
+
+const ROLE_COLORS: Record<Role, string> = {
+  admin: "bg-red-100 text-red-800 border-red-200",
+  user: "bg-blue-100 text-blue-800 border-blue-200",
+  readonly: "bg-gray-100 text-gray-700 border-gray-200",
+};
+
+const ROLE_ICONS: Record<Role, React.ReactNode> = {
+  admin: <ShieldCheck size={12} />,
+  user: <User size={12} />,
+  readonly: <Eye size={12} />,
+};
+
+interface UserFormData {
+  name: string;
+  email: string;
+  password: string;
+  role: Role;
+  isActive: boolean;
+}
+
+const DEFAULT_FORM: UserFormData = { name: "", email: "", password: "", role: "user", isActive: true };
+
+export default function UsersAdmin() {
+  const [showDialog, setShowDialog] = useState(false);
+  const [editingUser, setEditingUser] = useState<LocalUser | null>(null);
+  const [form, setForm] = useState<UserFormData>(DEFAULT_FORM);
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+
+  const usersQuery = trpc.users.list.useQuery();
+  const utils = trpc.useUtils();
+
+  const createMutation = trpc.users.create.useMutation({
+    onSuccess: () => {
+      toast.success("Utilisateur créé");
+      utils.users.list.invalidate();
+      setShowDialog(false);
+      setForm(DEFAULT_FORM);
+    },
+    onError: (e) => toast.error("Erreur", { description: e.message }),
+  });
+
+  const updateMutation = trpc.users.update.useMutation({
+    onSuccess: () => {
+      toast.success("Utilisateur mis à jour");
+      utils.users.list.invalidate();
+      setShowDialog(false);
+      setEditingUser(null);
+    },
+    onError: (e) => toast.error("Erreur", { description: e.message }),
+  });
+
+  const deleteMutation = trpc.users.delete.useMutation({
+    onSuccess: () => {
+      toast.success("Utilisateur supprimé");
+      utils.users.list.invalidate();
+      setDeleteId(null);
+    },
+    onError: (e) => toast.error("Erreur", { description: e.message }),
+  });
+
+  const openCreate = () => {
+    setEditingUser(null);
+    setForm(DEFAULT_FORM);
+    setShowDialog(true);
+  };
+
+  const openEdit = (user: LocalUser) => {
+    setEditingUser(user);
+    setForm({ name: user.name, email: user.email, password: "", role: user.role, isActive: user.isActive });
+    setShowDialog(true);
+  };
+
+  const handleSubmit = () => {
+    if (editingUser) {
+      const data: Parameters<typeof updateMutation.mutate>[0] = {
+        id: editingUser.id,
+        name: form.name,
+        email: form.email,
+        role: form.role,
+        isActive: form.isActive,
+      };
+      if (form.password) data.password = form.password;
+      updateMutation.mutate(data);
+    } else {
+      createMutation.mutate({ name: form.name, email: form.email, password: form.password, role: form.role });
+    }
+  };
+
+  const users = (usersQuery.data ?? []) as LocalUser[];
+
+  return (
+    <div className="p-6 space-y-6 animate-fade-up">
+      {/* En-tête */}
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <Users size={22} className="text-primary" />
+            <h1 className="text-2xl font-bold text-foreground">Gestion des utilisateurs</h1>
+          </div>
+          <p className="text-muted-foreground text-sm">{users.length} utilisateur{users.length !== 1 ? "s" : ""} enregistré{users.length !== 1 ? "s" : ""}</p>
+        </div>
+        <Button onClick={openCreate} className="gap-2">
+          <Plus size={15} />
+          Nouvel utilisateur
+        </Button>
+      </div>
+
+      {/* Tableau */}
+      <Card>
+        <CardContent className="p-0">
+          {usersQuery.isLoading ? (
+            <div className="flex items-center justify-center py-16">
+              <Loader2 size={28} className="animate-spin text-primary" />
+            </div>
+          ) : users.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-center">
+              <Users size={40} className="text-muted-foreground/30 mb-3" />
+              <p className="text-muted-foreground">Aucun utilisateur</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-border bg-muted/30">
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground">Nom</th>
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground">Email</th>
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-36">Rôle</th>
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-24">Statut</th>
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-32">Dernière connexion</th>
+                    <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-24">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-border">
+                  {users.map((user) => (
+                    <tr key={user.id} className="hover:bg-muted/20 transition-colors">
+                      <td className="px-4 py-3">
+                        <div className="flex items-center gap-2">
+                          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+                            <span className="text-xs font-bold text-primary">{user.name[0]?.toUpperCase()}</span>
+                          </div>
+                          <span className="font-medium text-foreground">{user.name}</span>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 text-muted-foreground">{user.email}</td>
+                      <td className="px-4 py-3">
+                        <Badge variant="outline" className={cn("text-xs gap-1", ROLE_COLORS[user.role])}>
+                          {ROLE_ICONS[user.role]}
+                          {ROLE_LABELS[user.role]}
+                        </Badge>
+                      </td>
+                      <td className="px-4 py-3">
+                        {user.isActive ? (
+                          <span className="inline-flex items-center gap-1 text-xs text-emerald-600">
+                            <CheckCircle size={12} />Actif
+                          </span>
+                        ) : (
+                          <span className="inline-flex items-center gap-1 text-xs text-red-500">
+                            <XCircle size={12} />Inactif
+                          </span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3 text-xs text-muted-foreground">
+                        {user.lastSignedIn
+                          ? format(new Date(user.lastSignedIn), "d MMM yyyy", { locale: fr })
+                          : "Jamais"}
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="flex items-center gap-1">
+                          <Button variant="ghost" size="icon" className="w-7 h-7 text-muted-foreground hover:text-foreground" onClick={() => openEdit(user)}>
+                            <Pencil size={13} />
+                          </Button>
+                          <Button variant="ghost" size="icon" className="w-7 h-7 text-muted-foreground hover:text-destructive" onClick={() => setDeleteId(user.id)}>
+                            <Trash2 size={13} />
+                          </Button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Dialog création/modification */}
+      <Dialog open={showDialog} onOpenChange={setShowDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{editingUser ? "Modifier l'utilisateur" : "Nouvel utilisateur"}</DialogTitle>
+            <DialogDescription>
+              {editingUser ? "Modifiez les informations de l'utilisateur" : "Créez un nouveau compte utilisateur"}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-2">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2 col-span-2">
+                <Label>Nom complet</Label>
+                <Input placeholder="Jean Dupont" value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} />
+              </div>
+              <div className="space-y-2 col-span-2">
+                <Label>Adresse e-mail</Label>
+                <Input type="email" placeholder="jean@itinova.fr" value={form.email} onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))} />
+              </div>
+              <div className="space-y-2 col-span-2">
+                <Label>{editingUser ? "Nouveau mot de passe (laisser vide pour ne pas changer)" : "Mot de passe"}</Label>
+                <Input type="password" placeholder="••••••••" value={form.password} onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))} />
+              </div>
+              <div className="space-y-2">
+                <Label>Rôle</Label>
+                <Select value={form.role} onValueChange={(v) => setForm((f) => ({ ...f, role: v as Role }))}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="admin">Administrateur</SelectItem>
+                    <SelectItem value="user">Utilisateur</SelectItem>
+                    <SelectItem value="readonly">Lecture seule</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              {editingUser && (
+                <div className="space-y-2">
+                  <Label>Statut</Label>
+                  <div className="flex items-center gap-2 pt-2">
+                    <Switch checked={form.isActive} onCheckedChange={(v) => setForm((f) => ({ ...f, isActive: v }))} />
+                    <span className="text-sm">{form.isActive ? "Actif" : "Inactif"}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowDialog(false)}>Annuler</Button>
+            <Button onClick={handleSubmit} disabled={createMutation.isPending || updateMutation.isPending}>
+              {(createMutation.isPending || updateMutation.isPending) && <Loader2 size={14} className="animate-spin mr-2" />}
+              {editingUser ? "Enregistrer" : "Créer"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Dialog suppression */}
+      <Dialog open={deleteId !== null} onOpenChange={() => setDeleteId(null)}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Supprimer l'utilisateur</DialogTitle>
+            <DialogDescription>Cette action est irréversible. L'utilisateur ne pourra plus se connecter.</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteId(null)}>Annuler</Button>
+            <Button variant="destructive" onClick={() => deleteId && deleteMutation.mutate({ id: deleteId })} disabled={deleteMutation.isPending}>
+              {deleteMutation.isPending && <Loader2 size={14} className="animate-spin mr-2" />}
+              Supprimer
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

client/src/pages/VeilleDashboard.tsx

@@ -0,0 +1,281 @@
+import { useState, useMemo } from "react";
+import { trpc } from "@/lib/trpc";
+import { FilterBar } from "@/components/FilterBar";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  LayoutGrid,
+  List,
+  ExternalLink,
+  Calendar,
+  MapPin,
+  Tag,
+  Layers,
+  FileSearch,
+  Loader2,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { fr } from "date-fns/locale";
+
+type TypeVeille = "reglementaire" | "concurrentielle" | "technologique" | "generale";
+
+interface VeilleItem {
+  id: number;
+  titre: string;
+  typeVeille: string;
+  categorie: string | null;
+  niveau: string | null;
+  territoire: string | null;
+  resume: string | null;
+  lien: string | null;
+  datePublication: Date | null;
+  importedAt: Date;
+}
+
+const TYPE_LABELS: Record<TypeVeille, string> = {
+  reglementaire: "Réglementaire",
+  concurrentielle: "Concurrentielle",
+  technologique: "Technologique",
+  generale: "Générale",
+};
+
+const TYPE_COLORS: Record<string, string> = {
+  reglementaire: "bg-blue-100 text-blue-800 border-blue-200",
+  concurrentielle: "bg-purple-100 text-purple-800 border-purple-200",
+  technologique: "bg-emerald-100 text-emerald-800 border-emerald-200",
+  generale: "bg-amber-100 text-amber-800 border-amber-200",
+};
+
+const TYPE_ACCENT: Record<string, string> = {
+  reglementaire: "border-l-blue-500",
+  concurrentielle: "border-l-purple-500",
+  technologique: "border-l-emerald-500",
+  generale: "border-l-amber-500",
+};
+
+const PAGE_SIZE = 24;
+
+function formatDate(d: Date | null | undefined): string | null {
+  if (!d) return null;
+  try { return format(new Date(d), "d MMM yyyy", { locale: fr }); }
+  catch { return null; }
+}
+
+export default function VeilleDashboard() {
+  const [viewMode, setViewMode] = useState<"list" | "grid">("list");
+  const [activeTab, setActiveTab] = useState<TypeVeille | "all">("all");
+  const [page, setPage] = useState(1);
+  const [filterValues, setFilterValues] = useState<Record<string, string>>({});
+
+  const filtersQuery = trpc.veille.filters.useQuery();
+
+  const queryInput = useMemo(() => ({
+    typeVeille: activeTab !== "all" ? activeTab : undefined,
+    categorie: filterValues.categorie || undefined,
+    niveau: filterValues.niveau || undefined,
+    territoire: filterValues.territoire || undefined,
+    search: filterValues.search || undefined,
+    dateFrom: filterValues.dateFrom ? new Date(filterValues.dateFrom) : undefined,
+    dateTo: filterValues.dateTo ? new Date(filterValues.dateTo) : undefined,
+    page,
+    pageSize: PAGE_SIZE,
+  }), [activeTab, filterValues, page]);
+
+  const itemsQuery = trpc.veille.list.useQuery(queryInput);
+
+  const handleFilterChange = (key: string, value: string) => {
+    setFilterValues((prev) => ({ ...prev, [key]: value }));
+    setPage(1);
+  };
+
+  const handleReset = () => {
+    setFilterValues({});
+    setPage(1);
+  };
+
+  const items = (itemsQuery.data?.items ?? []) as VeilleItem[];
+  const total = itemsQuery.data?.total ?? 0;
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  const filterOptions = [
+    { key: "categorie", label: "Catégorie", options: filtersQuery.data?.categories ?? [] },
+    { key: "niveau", label: "Niveau", options: filtersQuery.data?.niveaux ?? [] },
+    { key: "territoire", label: "Territoire", options: filtersQuery.data?.territoires ?? [] },
+    { key: "dateFrom", label: "Date depuis", type: "date" as const },
+    { key: "dateTo", label: "Date jusqu'à", type: "date" as const },
+  ];
+
+  return (
+    <div className="p-6 space-y-6 animate-fade-up">
+      {/* En-tête */}
+      <div className="flex items-start justify-between gap-4 flex-wrap">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <FileSearch size={22} className="text-primary" />
+            <h1 className="text-2xl font-bold text-foreground">Veille Stratégique</h1>
+          </div>
+          <p className="text-muted-foreground text-sm">
+            Suivi réglementaire, concurrentiel, technologique et général
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant={viewMode === "list" ? "default" : "outline"} size="sm" onClick={() => setViewMode("list")} className="gap-2">
+            <List size={15} />Liste
+          </Button>
+          <Button variant={viewMode === "grid" ? "default" : "outline"} size="sm" onClick={() => setViewMode("grid")} className="gap-2">
+            <LayoutGrid size={15} />Vignettes
+          </Button>
+        </div>
+      </div>
+
+      {/* Onglets */}
+      <Tabs value={activeTab} onValueChange={(v) => { setActiveTab(v as TypeVeille | "all"); setPage(1); }}>
+        <TabsList className="bg-muted/50">
+          <TabsTrigger value="all">Tous</TabsTrigger>
+          {(Object.keys(TYPE_LABELS) as TypeVeille[]).map((t) => (
+            <TabsTrigger key={t} value={t}>{TYPE_LABELS[t]}</TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+
+      {/* Filtres */}
+      <FilterBar
+        filters={filterOptions}
+        values={filterValues}
+        onChange={handleFilterChange}
+        onReset={handleReset}
+        searchPlaceholder="Rechercher dans les titres et résumés…"
+        totalCount={total}
+      />
+
+      {/* Contenu */}
+      {itemsQuery.isLoading ? (
+        <div className="flex items-center justify-center py-24">
+          <Loader2 size={32} className="animate-spin text-primary" />
+        </div>
+      ) : items.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-24 text-center">
+          <FileSearch size={48} className="text-muted-foreground/30 mb-4" />
+          <p className="text-muted-foreground font-medium">Aucun résultat trouvé</p>
+          <p className="text-muted-foreground/60 text-sm mt-1">Modifiez vos filtres ou importez des données</p>
+        </div>
+      ) : viewMode === "list" ? (
+        <VeilleListView items={items} />
+      ) : (
+        <VeilleGridView items={items} />
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2 pt-2">
+          <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1}>
+            <ChevronLeft size={14} />
+          </Button>
+          <span className="text-sm text-muted-foreground px-2">Page {page} / {totalPages}</span>
+          <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page === totalPages}>
+            <ChevronRight size={14} />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Vue Liste ────────────────────────────────────────────────────────────────
+
+function VeilleListView({ items }: { items: VeilleItem[] }) {
+  return (
+    <div className="rounded-xl border border-border overflow-hidden shadow-sm">
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-muted/50 border-b border-border">
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-8">#</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground">Titre</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-32">Type</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-28">Catégorie</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-24">Niveau</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-36">Territoire</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-28">Date</th>
+              <th className="text-left px-4 py-3 font-semibold text-muted-foreground w-16">Lien</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border">
+            {items.map((item, idx) => (
+              <tr key={item.id} className={cn("hover:bg-muted/30 transition-colors border-l-4", TYPE_ACCENT[item.typeVeille] || "border-l-transparent")}>
+                <td className="px-4 py-3 text-muted-foreground/50 text-xs">{idx + 1}</td>
+                <td className="px-4 py-3">
+                  <div className="max-w-md">
+                    <p className="font-medium text-foreground line-clamp-2 leading-snug">{item.titre}</p>
+                    {item.resume && <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{item.resume}</p>}
+                  </div>
+                </td>
+                <td className="px-4 py-3">
+                  <Badge variant="outline" className={cn("text-xs", TYPE_COLORS[item.typeVeille])}>
+                    {TYPE_LABELS[item.typeVeille as TypeVeille] || item.typeVeille}
+                  </Badge>
+                </td>
+                <td className="px-4 py-3 text-muted-foreground text-xs">{item.categorie || "—"}</td>
+                <td className="px-4 py-3 text-muted-foreground text-xs">{item.niveau || "—"}</td>
+                <td className="px-4 py-3 text-muted-foreground text-xs">{item.territoire || "—"}</td>
+                <td className="px-4 py-3 text-muted-foreground text-xs whitespace-nowrap">{formatDate(item.datePublication) || "—"}</td>
+                <td className="px-4 py-3">
+                  {item.lien && (
+                    <a href={item.lien} target="_blank" rel="noopener noreferrer" className="text-accent hover:text-accent/80 transition-colors" title="Ouvrir">
+                      <ExternalLink size={15} />
+                    </a>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+// ─── Vue Vignettes ────────────────────────────────────────────────────────────
+
+function VeilleGridView({ items }: { items: VeilleItem[] }) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+      {items.map((item) => (
+        <Card key={item.id} className={cn("group hover:shadow-md transition-all duration-200 border-border overflow-hidden border-l-4", TYPE_ACCENT[item.typeVeille] || "")}>
+          <CardHeader className="pb-2 pt-4 px-4">
+            <div className="flex items-start justify-between gap-2">
+              <Badge variant="outline" className={cn("text-xs flex-shrink-0", TYPE_COLORS[item.typeVeille])}>
+                {TYPE_LABELS[item.typeVeille as TypeVeille] || item.typeVeille}
+              </Badge>
+              {item.lien && (
+                <a href={item.lien} target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-accent transition-colors flex-shrink-0">
+                  <ExternalLink size={14} />
+                </a>
+              )}
+            </div>
+            <h3 className="font-semibold text-sm text-foreground leading-snug line-clamp-3 mt-2">{item.titre}</h3>
+          </CardHeader>
+          <CardContent className="px-4 pb-4 space-y-2">
+            {item.resume && <p className="text-xs text-muted-foreground line-clamp-3 leading-relaxed">{item.resume}</p>}
+            <div className="flex flex-wrap gap-1.5 pt-1">
+              {item.categorie && <span className="inline-flex items-center gap-1 text-xs text-muted-foreground"><Tag size={10} />{item.categorie}</span>}
+              {item.territoire && <span className="inline-flex items-center gap-1 text-xs text-muted-foreground"><MapPin size={10} />{item.territoire}</span>}
+              {item.niveau && <span className="inline-flex items-center gap-1 text-xs text-muted-foreground"><Layers size={10} />{item.niveau}</span>}
+            </div>
+            {item.datePublication && (
+              <div className="flex items-center gap-1 text-xs text-muted-foreground/70 pt-1 border-t border-border/50">
+                <Calendar size={10} />
+                {formatDate(item.datePublication)}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}