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.

2026-03-16 10:45:35 -04:00
parent 5000fc555d
commit 8fb71e8bda
27 changed files with 4525 additions and 184 deletions
--- a/client/src/pages/VeilleDashboard.tsx
+++ b/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>
+  );
+}