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
@@ -1,39 +1,132 @@
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import NotFound from "@/pages/NotFound";
|
||||
import { Route, Switch } from "wouter";
|
||||
import { Route, Switch, Redirect } from "wouter";
|
||||
import ErrorBoundary from "./components/ErrorBoundary";
|
||||
import { ThemeProvider } from "./contexts/ThemeContext";
|
||||
import Home from "./pages/Home";
|
||||
import { LocalAuthProvider, useLocalAuth } from "./contexts/LocalAuthContext";
|
||||
import { AppLayout } from "./components/AppLayout";
|
||||
import Login from "./pages/Login";
|
||||
import VeilleDashboard from "./pages/VeilleDashboard";
|
||||
import AAPDashboard from "./pages/AAPDashboard";
|
||||
import Settings from "./pages/Settings";
|
||||
import UsersAdmin from "./pages/UsersAdmin";
|
||||
import ImportLogs from "./pages/ImportLogs";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
// ─── Guard d'authentification ─────────────────────────────────────────────────
|
||||
|
||||
function AuthGuard({ children }: { children: React.ReactNode }) {
|
||||
const { user, loading } = useLocalAuth();
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-background">
|
||||
<Loader2 size={32} className="animate-spin text-primary" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return <Redirect to="/login" />;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
// ─── Layout avec sidebar ──────────────────────────────────────────────────────
|
||||
|
||||
function DashboardWrapper({ children }: { children: React.ReactNode }) {
|
||||
const { user, logout } = useLocalAuth();
|
||||
return (
|
||||
<AppLayout user={user} onLogout={logout}>
|
||||
{children}
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Pages protégées ──────────────────────────────────────────────────────────
|
||||
|
||||
function VeillePage() {
|
||||
return (
|
||||
<AuthGuard>
|
||||
<DashboardWrapper>
|
||||
<VeilleDashboard />
|
||||
</DashboardWrapper>
|
||||
</AuthGuard>
|
||||
);
|
||||
}
|
||||
|
||||
function AAPPage() {
|
||||
return (
|
||||
<AuthGuard>
|
||||
<DashboardWrapper>
|
||||
<AAPDashboard />
|
||||
</DashboardWrapper>
|
||||
</AuthGuard>
|
||||
);
|
||||
}
|
||||
|
||||
function SettingsPage() {
|
||||
return (
|
||||
<AuthGuard>
|
||||
<DashboardWrapper>
|
||||
<Settings />
|
||||
</DashboardWrapper>
|
||||
</AuthGuard>
|
||||
);
|
||||
}
|
||||
|
||||
function UsersPage() {
|
||||
return (
|
||||
<AuthGuard>
|
||||
<DashboardWrapper>
|
||||
<UsersAdmin />
|
||||
</DashboardWrapper>
|
||||
</AuthGuard>
|
||||
);
|
||||
}
|
||||
|
||||
function LogsPage() {
|
||||
return (
|
||||
<AuthGuard>
|
||||
<DashboardWrapper>
|
||||
<ImportLogs />
|
||||
</DashboardWrapper>
|
||||
</AuthGuard>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Routeur principal ────────────────────────────────────────────────────────
|
||||
|
||||
function Router() {
|
||||
// make sure to consider if you need authentication for certain routes
|
||||
return (
|
||||
<Switch>
|
||||
<Route path={"/"} component={Home} />
|
||||
<Route path={"/404"} component={NotFound} />
|
||||
{/* Final fallback route */}
|
||||
<Route path="/login" component={Login} />
|
||||
<Route path="/">
|
||||
<Redirect to="/veille" />
|
||||
</Route>
|
||||
<Route path="/veille" component={VeillePage} />
|
||||
<Route path="/aap" component={AAPPage} />
|
||||
<Route path="/admin/settings" component={SettingsPage} />
|
||||
<Route path="/admin/users" component={UsersPage} />
|
||||
<Route path="/admin/logs" component={LogsPage} />
|
||||
<Route path="/404" component={NotFound} />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
|
||||
// NOTE: About Theme
|
||||
// - First choose a default theme according to your design style (dark or light bg), than change color palette in index.css
|
||||
// to keep consistent foreground/background color across components
|
||||
// - If you want to make theme switchable, pass `switchable` ThemeProvider and use `useTheme` hook
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<ThemeProvider
|
||||
defaultTheme="light"
|
||||
// switchable
|
||||
>
|
||||
<TooltipProvider>
|
||||
<Toaster />
|
||||
<Router />
|
||||
</TooltipProvider>
|
||||
<ThemeProvider defaultTheme="light">
|
||||
<LocalAuthProvider>
|
||||
<TooltipProvider>
|
||||
<Toaster richColors position="top-right" />
|
||||
<Router />
|
||||
</TooltipProvider>
|
||||
</LocalAuthProvider>
|
||||
</ThemeProvider>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
|
||||
284
client/src/components/AppLayout.tsx
Normal file
284
client/src/components/AppLayout.tsx
Normal file
@@ -0,0 +1,284 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Link, useLocation } from "wouter";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
FileSearch,
|
||||
Target,
|
||||
Settings,
|
||||
Users,
|
||||
LogOut,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
FileText,
|
||||
Activity,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
RefreshCw,
|
||||
Menu,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { trpc } from "@/lib/trpc";
|
||||
import { toast } from "sonner";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface NavItem {
|
||||
label: string;
|
||||
href: string;
|
||||
icon: React.ReactNode;
|
||||
badge?: string;
|
||||
adminOnly?: boolean;
|
||||
}
|
||||
|
||||
interface NavGroup {
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
items: NavItem[];
|
||||
defaultOpen?: boolean;
|
||||
}
|
||||
|
||||
const NAV_GROUPS: NavGroup[] = [
|
||||
{
|
||||
label: "Tableaux de bord",
|
||||
icon: <LayoutDashboard size={18} />,
|
||||
defaultOpen: true,
|
||||
items: [
|
||||
{ label: "Veille Stratégique", href: "/veille", icon: <FileSearch size={16} /> },
|
||||
{ label: "Appels à Projets", href: "/aap", icon: <Target size={16} /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Administration",
|
||||
icon: <Settings size={18} />,
|
||||
defaultOpen: false,
|
||||
items: [
|
||||
{ label: "Logs d'import", href: "/admin/logs", icon: <Activity size={16} />, adminOnly: true },
|
||||
{ label: "Utilisateurs", href: "/admin/users", icon: <Users size={16} />, adminOnly: true },
|
||||
{ label: "Paramètres", href: "/admin/settings", icon: <Settings size={16} />, adminOnly: true },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
interface AppLayoutProps {
|
||||
children: React.ReactNode;
|
||||
user: { name?: string | null; email?: string | null; role?: string } | null;
|
||||
onLogout: () => void;
|
||||
}
|
||||
|
||||
export function AppLayout({ children, user, onLogout }: AppLayoutProps) {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({
|
||||
"Tableaux de bord": true,
|
||||
"Administration": false,
|
||||
});
|
||||
const [location] = useLocation();
|
||||
|
||||
const isAdmin = user?.role === "admin";
|
||||
|
||||
const importMutation = trpc.import.run.useMutation({
|
||||
onSuccess: (data) => {
|
||||
const v = "veille" in data ? data.veille : null;
|
||||
const a = "aap" in data ? data.aap : null;
|
||||
const msg = [
|
||||
v ? `Veille: +${v.newRows} nouvelles entrées` : null,
|
||||
a ? `AAP: +${a.newRows} nouvelles entrées` : null,
|
||||
].filter(Boolean).join(" | ");
|
||||
toast.success("Import terminé", { description: msg || "Aucune nouvelle entrée" });
|
||||
},
|
||||
onError: (e) => toast.error("Erreur d'import", { description: e.message }),
|
||||
});
|
||||
|
||||
const toggleGroup = (label: string) => {
|
||||
setOpenGroups((prev) => ({ ...prev, [label]: !prev[label] }));
|
||||
};
|
||||
|
||||
const SidebarContent = () => (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Logo */}
|
||||
<div className={cn(
|
||||
"flex items-center gap-3 px-4 py-5 border-b border-sidebar-border",
|
||||
collapsed && "justify-center px-2"
|
||||
)}>
|
||||
<div className="w-9 h-9 rounded-xl bg-sidebar-primary flex items-center justify-center flex-shrink-0 shadow-lg">
|
||||
<FileText size={18} className="text-sidebar-primary-foreground" />
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-bold text-sidebar-foreground leading-tight truncate">Veille Réglementaire</p>
|
||||
<p className="text-xs text-sidebar-foreground/60 truncate">Direction des Opérations</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto py-4 px-2 space-y-1">
|
||||
{NAV_GROUPS.map((group) => {
|
||||
const isOpen = openGroups[group.label] ?? group.defaultOpen;
|
||||
const visibleItems = group.items.filter((item) => !item.adminOnly || isAdmin);
|
||||
if (visibleItems.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div key={group.label}>
|
||||
{!collapsed && (
|
||||
<button
|
||||
onClick={() => toggleGroup(group.label)}
|
||||
className="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-sidebar-foreground/50 uppercase tracking-wider hover:text-sidebar-foreground transition-colors"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
{group.icon}
|
||||
{group.label}
|
||||
</span>
|
||||
{isOpen ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{(isOpen || collapsed) && (
|
||||
<div className="space-y-0.5 mt-1">
|
||||
{visibleItems.map((item) => {
|
||||
const active = location === item.href || location.startsWith(item.href + "/");
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-150 cursor-pointer group",
|
||||
active
|
||||
? "bg-sidebar-primary text-sidebar-primary-foreground shadow-sm"
|
||||
: "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
collapsed && "justify-center px-2"
|
||||
)}
|
||||
title={collapsed ? item.label : undefined}
|
||||
>
|
||||
<span className={cn("flex-shrink-0", active ? "text-sidebar-primary-foreground" : "text-sidebar-foreground/60 group-hover:text-sidebar-accent-foreground")}>
|
||||
{item.icon}
|
||||
</span>
|
||||
{!collapsed && (
|
||||
<span className="truncate">{item.label}</span>
|
||||
)}
|
||||
{!collapsed && item.badge && (
|
||||
<Badge variant="secondary" className="ml-auto text-xs">
|
||||
{item.badge}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Import rapide */}
|
||||
{isAdmin && (
|
||||
<div className={cn("px-2 py-2 border-t border-sidebar-border", collapsed && "flex justify-center")}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={cn(
|
||||
"text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent w-full",
|
||||
collapsed && "w-10 h-10 p-0"
|
||||
)}
|
||||
onClick={() => importMutation.mutate({ type: "all" })}
|
||||
disabled={importMutation.isPending}
|
||||
title="Lancer l'import maintenant"
|
||||
>
|
||||
<RefreshCw size={16} className={cn(importMutation.isPending && "animate-spin")} />
|
||||
{!collapsed && <span className="ml-2 text-xs">Importer maintenant</span>}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Utilisateur */}
|
||||
<div className={cn(
|
||||
"px-2 py-3 border-t border-sidebar-border",
|
||||
collapsed && "flex justify-center"
|
||||
)}>
|
||||
{!collapsed ? (
|
||||
<div className="flex items-center gap-2 px-2">
|
||||
<div className="w-8 h-8 rounded-full bg-sidebar-primary/30 flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-xs font-bold text-sidebar-primary-foreground">
|
||||
{(user?.name || user?.email || "?")[0].toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs font-semibold text-sidebar-foreground truncate">{user?.name || "Utilisateur"}</p>
|
||||
<p className="text-xs text-sidebar-foreground/50 truncate">{user?.role === "admin" ? "Administrateur" : user?.role === "readonly" ? "Lecture seule" : "Utilisateur"}</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-7 h-7 text-sidebar-foreground/50 hover:text-sidebar-foreground hover:bg-sidebar-accent flex-shrink-0"
|
||||
onClick={onLogout}
|
||||
title="Se déconnecter"
|
||||
>
|
||||
<LogOut size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-9 h-9 text-sidebar-foreground/50 hover:text-sidebar-foreground hover:bg-sidebar-accent"
|
||||
onClick={onLogout}
|
||||
title="Se déconnecter"
|
||||
>
|
||||
<LogOut size={16} />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-background overflow-hidden">
|
||||
{/* Sidebar desktop */}
|
||||
<aside
|
||||
className={cn(
|
||||
"hidden md:flex flex-col bg-sidebar border-r border-sidebar-border transition-all duration-300 ease-in-out flex-shrink-0",
|
||||
collapsed ? "w-16" : "w-64"
|
||||
)}
|
||||
>
|
||||
<SidebarContent />
|
||||
{/* Toggle collapse */}
|
||||
<button
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
className="absolute left-0 top-1/2 -translate-y-1/2 translate-x-full w-5 h-10 bg-sidebar border border-sidebar-border rounded-r-md flex items-center justify-center text-sidebar-foreground/50 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors z-10"
|
||||
style={{ left: collapsed ? "3.5rem" : "15.5rem" }}
|
||||
>
|
||||
{collapsed ? <ChevronRight size={12} /> : <ChevronLeft size={12} />}
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
{/* Sidebar mobile overlay */}
|
||||
{mobileOpen && (
|
||||
<div className="fixed inset-0 z-40 md:hidden">
|
||||
<div className="absolute inset-0 bg-black/50" onClick={() => setMobileOpen(false)} />
|
||||
<aside className="absolute left-0 top-0 bottom-0 w-72 bg-sidebar border-r border-sidebar-border animate-slide-in-left">
|
||||
<SidebarContent />
|
||||
</aside>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Contenu principal */}
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* Header mobile */}
|
||||
<header className="md:hidden flex items-center gap-3 px-4 py-3 bg-card border-b border-border">
|
||||
<Button variant="ghost" size="icon" onClick={() => setMobileOpen(true)}>
|
||||
<Menu size={20} />
|
||||
</Button>
|
||||
<span className="font-semibold text-foreground">Veille Réglementaire</span>
|
||||
</header>
|
||||
|
||||
{/* Zone de contenu scrollable */}
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
149
client/src/components/FilterBar.tsx
Normal file
149
client/src/components/FilterBar.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import { useState } from "react";
|
||||
import { Search, X, Filter, ChevronDown } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface FilterOption {
|
||||
key: string;
|
||||
label: string;
|
||||
options?: string[];
|
||||
type?: "select" | "date";
|
||||
}
|
||||
|
||||
interface FilterBarProps {
|
||||
filters: FilterOption[];
|
||||
values: Record<string, string>;
|
||||
onChange: (key: string, value: string) => void;
|
||||
onReset: () => void;
|
||||
searchKey?: string;
|
||||
searchPlaceholder?: string;
|
||||
totalCount?: number;
|
||||
filteredCount?: number;
|
||||
}
|
||||
|
||||
export function FilterBar({
|
||||
filters,
|
||||
values,
|
||||
onChange,
|
||||
onReset,
|
||||
searchKey = "search",
|
||||
searchPlaceholder = "Rechercher…",
|
||||
totalCount,
|
||||
filteredCount,
|
||||
}: FilterBarProps) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const activeCount = Object.values(values).filter((v) => v && v !== "all").length;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Barre principale */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{/* Recherche */}
|
||||
<div className="relative flex-1 min-w-48">
|
||||
<Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder={searchPlaceholder}
|
||||
value={values[searchKey] || ""}
|
||||
onChange={(e) => onChange(searchKey, e.target.value)}
|
||||
className="pl-9 h-9 bg-background"
|
||||
/>
|
||||
{values[searchKey] && (
|
||||
<button
|
||||
onClick={() => onChange(searchKey, "")}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bouton filtres */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className={cn("gap-2 h-9", activeCount > 0 && "border-primary text-primary")}
|
||||
>
|
||||
<Filter size={14} />
|
||||
Filtres
|
||||
{activeCount > 0 && (
|
||||
<Badge variant="default" className="h-4 w-4 p-0 flex items-center justify-center text-xs rounded-full">
|
||||
{activeCount}
|
||||
</Badge>
|
||||
)}
|
||||
<ChevronDown size={12} className={cn("transition-transform", expanded && "rotate-180")} />
|
||||
</Button>
|
||||
|
||||
{/* Reset */}
|
||||
{activeCount > 0 && (
|
||||
<Button variant="ghost" size="sm" onClick={onReset} className="h-9 text-muted-foreground hover:text-foreground gap-1">
|
||||
<X size={14} />
|
||||
Réinitialiser
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Compteur */}
|
||||
{totalCount !== undefined && (
|
||||
<span className="text-sm text-muted-foreground ml-auto">
|
||||
{filteredCount !== undefined && filteredCount !== totalCount
|
||||
? `${filteredCount} / ${totalCount} résultats`
|
||||
: `${totalCount} résultat${totalCount !== 1 ? "s" : ""}`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filtres étendus */}
|
||||
{expanded && (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2 p-3 bg-muted/30 rounded-lg border border-border/50 animate-fade-up">
|
||||
{filters.map((filter) => {
|
||||
if (filter.type === "date") {
|
||||
return (
|
||||
<div key={filter.key} className="space-y-1">
|
||||
<label className="text-xs font-medium text-muted-foreground">{filter.label}</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={values[filter.key] || ""}
|
||||
onChange={(e) => onChange(filter.key, e.target.value)}
|
||||
className="h-8 text-sm bg-background"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={filter.key} className="space-y-1">
|
||||
<label className="text-xs font-medium text-muted-foreground">{filter.label}</label>
|
||||
<Select
|
||||
value={values[filter.key] || "all"}
|
||||
onValueChange={(v) => onChange(filter.key, v === "all" ? "" : v)}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-sm bg-background">
|
||||
<SelectValue placeholder={`Tous`} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Tous</SelectItem>
|
||||
{filter.options?.map((opt) => (
|
||||
<SelectItem key={opt} value={opt}>
|
||||
{opt}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
78
client/src/contexts/LocalAuthContext.tsx
Normal file
78
client/src/contexts/LocalAuthContext.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { createContext, useContext, useState, useEffect, ReactNode } from "react";
|
||||
import { trpc } from "@/lib/trpc";
|
||||
|
||||
interface LocalUser {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
role: "admin" | "user" | "readonly";
|
||||
}
|
||||
|
||||
interface LocalAuthContextType {
|
||||
user: LocalUser | null;
|
||||
loading: boolean;
|
||||
login: (email: string, password: string) => Promise<void>;
|
||||
logout: () => Promise<void>;
|
||||
isAuthenticated: boolean;
|
||||
}
|
||||
|
||||
const LocalAuthContext = createContext<LocalAuthContextType | null>(null);
|
||||
|
||||
const LOCAL_USER_KEY = "veille_local_user";
|
||||
|
||||
export function LocalAuthProvider({ children }: { children: ReactNode }) {
|
||||
const [user, setUser] = useState<LocalUser | null>(() => {
|
||||
try {
|
||||
const stored = localStorage.getItem(LOCAL_USER_KEY);
|
||||
return stored ? JSON.parse(stored) : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const loginMutation = trpc.auth.localLogin.useMutation();
|
||||
const logoutMutation = trpc.auth.localLogout.useMutation();
|
||||
|
||||
const login = async (email: string, password: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await loginMutation.mutateAsync({ email, password });
|
||||
const localUser = result.user as LocalUser;
|
||||
setUser(localUser);
|
||||
localStorage.setItem(LOCAL_USER_KEY, JSON.stringify(localUser));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const logout = async () => {
|
||||
try {
|
||||
await logoutMutation.mutateAsync();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
setUser(null);
|
||||
localStorage.removeItem(LOCAL_USER_KEY);
|
||||
};
|
||||
|
||||
return (
|
||||
<LocalAuthContext.Provider
|
||||
value={{
|
||||
user,
|
||||
loading,
|
||||
login,
|
||||
logout,
|
||||
isAuthenticated: !!user,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</LocalAuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useLocalAuth() {
|
||||
const ctx = useContext(LocalAuthContext);
|
||||
if (!ctx) throw new Error("useLocalAuth must be used within LocalAuthProvider");
|
||||
return ctx;
|
||||
}
|
||||
@@ -43,74 +43,77 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: var(--color-blue-700);
|
||||
--primary-foreground: var(--color-blue-50);
|
||||
--sidebar-primary: var(--color-blue-600);
|
||||
--sidebar-primary-foreground: var(--color-blue-50);
|
||||
--chart-1: var(--color-blue-300);
|
||||
--chart-2: var(--color-blue-500);
|
||||
--chart-3: var(--color-blue-600);
|
||||
--chart-4: var(--color-blue-700);
|
||||
--chart-5: var(--color-blue-800);
|
||||
--radius: 0.65rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.235 0.015 65);
|
||||
--background: oklch(0.98 0.004 240);
|
||||
--foreground: oklch(0.15 0.02 240);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.235 0.015 65);
|
||||
--card-foreground: oklch(0.15 0.02 240);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.235 0.015 65);
|
||||
--secondary: oklch(0.98 0.001 286.375);
|
||||
--secondary-foreground: oklch(0.4 0.015 65);
|
||||
--muted: oklch(0.967 0.001 286.375);
|
||||
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||
--accent: oklch(0.967 0.001 286.375);
|
||||
--accent-foreground: oklch(0.141 0.005 285.823);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--popover-foreground: oklch(0.15 0.02 240);
|
||||
/* Bleu marine Itinova */
|
||||
--primary: oklch(0.32 0.12 240);
|
||||
--primary-foreground: oklch(0.98 0.004 240);
|
||||
--secondary: oklch(0.94 0.01 240);
|
||||
--secondary-foreground: oklch(0.32 0.12 240);
|
||||
--muted: oklch(0.95 0.005 240);
|
||||
--muted-foreground: oklch(0.50 0.02 240);
|
||||
/* Teal accent */
|
||||
--accent: oklch(0.55 0.14 195);
|
||||
--accent-foreground: oklch(1 0 0);
|
||||
--destructive: oklch(0.55 0.22 25);
|
||||
--destructive-foreground: oklch(0.985 0 0);
|
||||
--border: oklch(0.92 0.004 286.32);
|
||||
--input: oklch(0.92 0.004 286.32);
|
||||
--ring: oklch(0.623 0.214 259.815);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.235 0.015 65);
|
||||
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||
--sidebar-accent-foreground: oklch(0.141 0.005 285.823);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.623 0.214 259.815);
|
||||
--border: oklch(0.88 0.01 240);
|
||||
--input: oklch(0.92 0.008 240);
|
||||
--ring: oklch(0.32 0.12 240);
|
||||
--chart-1: oklch(0.55 0.14 195);
|
||||
--chart-2: oklch(0.45 0.12 240);
|
||||
--chart-3: oklch(0.65 0.12 160);
|
||||
--chart-4: oklch(0.60 0.15 280);
|
||||
--chart-5: oklch(0.55 0.18 30);
|
||||
/* Sidebar sombre */
|
||||
--sidebar: oklch(0.20 0.06 240);
|
||||
--sidebar-foreground: oklch(0.92 0.01 240);
|
||||
--sidebar-primary: oklch(0.60 0.14 195);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.28 0.08 240);
|
||||
--sidebar-accent-foreground: oklch(0.92 0.01 240);
|
||||
--sidebar-border: oklch(0.28 0.06 240);
|
||||
--sidebar-ring: oklch(0.60 0.14 195);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--primary: var(--color-blue-700);
|
||||
--primary-foreground: var(--color-blue-50);
|
||||
--sidebar-primary: var(--color-blue-500);
|
||||
--sidebar-primary-foreground: var(--color-blue-50);
|
||||
--background: oklch(0.141 0.005 285.823);
|
||||
--foreground: oklch(0.85 0.005 65);
|
||||
--card: oklch(0.21 0.006 285.885);
|
||||
--card-foreground: oklch(0.85 0.005 65);
|
||||
--popover: oklch(0.21 0.006 285.885);
|
||||
--popover-foreground: oklch(0.85 0.005 65);
|
||||
--secondary: oklch(0.24 0.006 286.033);
|
||||
--secondary-foreground: oklch(0.7 0.005 65);
|
||||
--muted: oklch(0.274 0.006 286.033);
|
||||
--muted-foreground: oklch(0.705 0.015 286.067);
|
||||
--accent: oklch(0.274 0.006 286.033);
|
||||
--accent-foreground: oklch(0.92 0.005 65);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--background: oklch(0.12 0.02 240);
|
||||
--foreground: oklch(0.92 0.01 240);
|
||||
--card: oklch(0.17 0.03 240);
|
||||
--card-foreground: oklch(0.92 0.01 240);
|
||||
--popover: oklch(0.17 0.03 240);
|
||||
--popover-foreground: oklch(0.92 0.01 240);
|
||||
--primary: oklch(0.60 0.14 195);
|
||||
--primary-foreground: oklch(0.12 0.02 240);
|
||||
--secondary: oklch(0.22 0.04 240);
|
||||
--secondary-foreground: oklch(0.92 0.01 240);
|
||||
--muted: oklch(0.22 0.04 240);
|
||||
--muted-foreground: oklch(0.60 0.02 240);
|
||||
--accent: oklch(0.60 0.14 195);
|
||||
--accent-foreground: oklch(0.12 0.02 240);
|
||||
--destructive: oklch(0.60 0.22 25);
|
||||
--destructive-foreground: oklch(0.985 0 0);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.488 0.243 264.376);
|
||||
--chart-1: var(--color-blue-300);
|
||||
--chart-2: var(--color-blue-500);
|
||||
--chart-3: var(--color-blue-600);
|
||||
--chart-4: var(--color-blue-700);
|
||||
--chart-5: var(--color-blue-800);
|
||||
--sidebar: oklch(0.21 0.006 285.885);
|
||||
--sidebar-foreground: oklch(0.85 0.005 65);
|
||||
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.488 0.243 264.376);
|
||||
--border: oklch(0.28 0.04 240);
|
||||
--input: oklch(0.22 0.04 240);
|
||||
--ring: oklch(0.60 0.14 195);
|
||||
--chart-1: oklch(0.65 0.14 195);
|
||||
--chart-2: oklch(0.55 0.12 240);
|
||||
--chart-3: oklch(0.70 0.12 160);
|
||||
--chart-4: oklch(0.65 0.15 280);
|
||||
--chart-5: oklch(0.60 0.18 30);
|
||||
--sidebar: oklch(0.14 0.03 240);
|
||||
--sidebar-foreground: oklch(0.88 0.01 240);
|
||||
--sidebar-primary: oklch(0.60 0.14 195);
|
||||
--sidebar-primary-foreground: oklch(0.12 0.02 240);
|
||||
--sidebar-accent: oklch(0.20 0.04 240);
|
||||
--sidebar-accent-foreground: oklch(0.88 0.01 240);
|
||||
--sidebar-border: oklch(0.22 0.04 240);
|
||||
--sidebar-ring: oklch(0.60 0.14 195);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
192
client/src/pages/ImportLogs.tsx
Normal file
192
client/src/pages/ImportLogs.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
133
client/src/pages/Login.tsx
Normal file
133
client/src/pages/Login.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
366
client/src/pages/Settings.tsx
Normal file
366
client/src/pages/Settings.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
313
client/src/pages/UsersAdmin.tsx
Normal file
313
client/src/pages/UsersAdmin.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
281
client/src/pages/VeilleDashboard.tsx
Normal file
281
client/src/pages/VeilleDashboard.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user