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.
This commit is contained in:
Manus
312
client/src/pages/AAPDashboard.tsx
Normal file
312
client/src/pages/AAPDashboard.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user