470 lines
20 KiB
TypeScript
470 lines
20 KiB
TypeScript
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 {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
LayoutGrid,
|
|
List,
|
|
ExternalLink,
|
|
Calendar,
|
|
MapPin,
|
|
Tag,
|
|
Layers,
|
|
FileSearch,
|
|
Loader2,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Eye,
|
|
Globe,
|
|
BookOpen,
|
|
} 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;
|
|
source: string | null;
|
|
passage: 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 TYPE_HEADER_BG: Record<string, string> = {
|
|
reglementaire: "from-blue-50 to-blue-100/30 border-blue-200",
|
|
concurrentielle: "from-purple-50 to-purple-100/30 border-purple-200",
|
|
technologique: "from-emerald-50 to-emerald-100/30 border-emerald-200",
|
|
generale: "from-amber-50 to-amber-100/30 border-amber-200",
|
|
};
|
|
|
|
const PAGE_SIZE = 24;
|
|
|
|
function formatDate(d: Date | null | undefined): string | null {
|
|
if (!d) return null;
|
|
try { return format(new Date(d), "d MMMM yyyy", { locale: fr }); }
|
|
catch { return null; }
|
|
}
|
|
|
|
// ─── Boîte de dialogue Détail ─────────────────────────────────────────────────
|
|
|
|
function VeilleDetailDialog({
|
|
item,
|
|
open,
|
|
onClose,
|
|
}: {
|
|
item: VeilleItem | null;
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}) {
|
|
if (!item) return null;
|
|
|
|
const typeKey = item.typeVeille as TypeVeille;
|
|
const headerBg = TYPE_HEADER_BG[typeKey] || "from-muted to-muted/30 border-border";
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(v) => !v && onClose()}>
|
|
<DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto p-0">
|
|
{/* En-tête coloré */}
|
|
<div className={cn("bg-gradient-to-br border-b px-6 py-5", headerBg)}>
|
|
<DialogHeader>
|
|
<div className="flex items-start gap-3">
|
|
<Badge
|
|
variant="outline"
|
|
className={cn("text-xs flex-shrink-0 mt-0.5", TYPE_COLORS[typeKey])}
|
|
>
|
|
{TYPE_LABELS[typeKey] || item.typeVeille}
|
|
</Badge>
|
|
{item.datePublication && (
|
|
<span className="text-xs text-muted-foreground flex items-center gap-1 mt-0.5 ml-auto">
|
|
<Calendar size={11} />
|
|
{formatDate(item.datePublication)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<DialogTitle className="text-lg font-bold text-foreground leading-snug mt-2 pr-6">
|
|
{item.titre}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
</div>
|
|
|
|
{/* Corps */}
|
|
<div className="px-6 py-5 space-y-5">
|
|
|
|
{/* Métadonnées en grille */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
|
{item.categorie && (
|
|
<div className="flex items-start gap-2 p-3 rounded-lg bg-muted/40 border border-border/50">
|
|
<Tag size={14} className="text-muted-foreground mt-0.5 shrink-0" />
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-wide text-muted-foreground font-medium">Catégorie</p>
|
|
<p className="text-sm font-medium text-foreground">{item.categorie}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{item.niveau && (
|
|
<div className="flex items-start gap-2 p-3 rounded-lg bg-violet-50 border border-violet-200">
|
|
<Layers size={14} className="text-violet-500 mt-0.5 shrink-0" />
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-wide text-violet-400 font-medium">Niveau</p>
|
|
<p className="text-sm font-medium text-violet-800">{item.niveau}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{item.territoire && (
|
|
<div className="flex items-start gap-2 p-3 rounded-lg bg-teal-50 border border-teal-200">
|
|
<MapPin size={14} className="text-teal-500 mt-0.5 shrink-0" />
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-wide text-teal-400 font-medium">Territoire</p>
|
|
<p className="text-sm font-medium text-teal-800">{item.territoire}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{item.source && (
|
|
<div className="flex items-start gap-2 p-3 rounded-lg bg-orange-50 border border-orange-200">
|
|
<Globe size={14} className="text-orange-500 mt-0.5 shrink-0" />
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-wide text-orange-400 font-medium">Source</p>
|
|
<p className="text-sm font-medium text-orange-800">{item.source}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{item.passage && (
|
|
<div className="flex items-start gap-2 p-3 rounded-lg bg-muted/40 border border-border/50 col-span-2">
|
|
<Calendar size={14} className="text-muted-foreground mt-0.5 shrink-0" />
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-wide text-muted-foreground font-medium">Passage en vigueur</p>
|
|
<p className="text-sm font-medium text-foreground">{item.passage}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Résumé complet */}
|
|
{item.resume && (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<BookOpen size={14} className="text-primary" />
|
|
<h3 className="text-sm font-semibold text-foreground">Résumé</h3>
|
|
</div>
|
|
<div className="p-4 rounded-lg bg-muted/20 border border-border/50">
|
|
<p className="text-sm text-foreground leading-relaxed whitespace-pre-wrap">{item.resume}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Lien externe */}
|
|
{item.lien && (
|
|
<div className="pt-1 border-t border-border/50">
|
|
<a
|
|
href={item.lien}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 text-sm font-medium text-primary hover:text-primary/80 transition-colors group"
|
|
>
|
|
<ExternalLink size={14} className="group-hover:translate-x-0.5 transition-transform" />
|
|
Accéder à la source originale
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
// ─── Composant principal ──────────────────────────────────────────────────────
|
|
|
|
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 [selectedItem, setSelectedItem] = useState<VeilleItem | null>(null);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
|
|
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 openDetail = (item: VeilleItem) => {
|
|
setSelectedItem(item);
|
|
setDialogOpen(true);
|
|
};
|
|
|
|
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} onDetail={openDetail} />
|
|
) : (
|
|
<VeilleGridView items={items} onDetail={openDetail} />
|
|
)}
|
|
|
|
{/* 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>
|
|
)}
|
|
|
|
{/* Boîte de dialogue détail */}
|
|
<VeilleDetailDialog
|
|
item={selectedItem}
|
|
open={dialogOpen}
|
|
onClose={() => setDialogOpen(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Vue Liste ────────────────────────────────────────────────────────────────
|
|
|
|
function VeilleListView({ items, onDetail }: { items: VeilleItem[]; onDetail: (item: VeilleItem) => void }) {
|
|
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-20">Actions</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">
|
|
<div className="flex items-center gap-1.5">
|
|
{/* Bouton Détail — bleu */}
|
|
<button
|
|
onClick={() => onDetail(item)}
|
|
className="inline-flex items-center justify-center w-7 h-7 rounded-md bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 transition-colors border border-blue-200"
|
|
title="Voir le détail complet"
|
|
>
|
|
<Eye size={13} />
|
|
</button>
|
|
{/* Bouton Lien externe — vert */}
|
|
{item.lien && (
|
|
<a
|
|
href={item.lien}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center justify-center w-7 h-7 rounded-md bg-emerald-50 text-emerald-600 hover:bg-emerald-100 hover:text-emerald-700 transition-colors border border-emerald-200"
|
|
title="Ouvrir la source"
|
|
>
|
|
<ExternalLink size={13} />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Vue Vignettes ────────────────────────────────────────────────────────────
|
|
|
|
function VeilleGridView({ items, onDetail }: { items: VeilleItem[]; onDetail: (item: VeilleItem) => void }) {
|
|
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>
|
|
<div className="flex items-center gap-1.5 flex-shrink-0">
|
|
{/* Bouton Détail */}
|
|
<button
|
|
onClick={() => onDetail(item)}
|
|
className="text-muted-foreground hover:text-primary transition-colors"
|
|
title="Voir le détail complet"
|
|
>
|
|
<Eye size={14} />
|
|
</button>
|
|
{item.lien && (
|
|
<a href={item.lien} target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-accent transition-colors">
|
|
<ExternalLink size={14} />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</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>
|
|
);
|
|
}
|