e.key === 'Enter' && onClick()}
+ aria-label={`Voir le détail de ${nom}`}
+ >
+ {/* Liseré de couleur en haut selon le budget */}
+
20000 ? 'bg-red-500' : 'bg-orange-400') : 'bg-green-500'}`}
+ />
+
+
+ {/* En-tête */}
+
+
+ {/* Budget total */}
+
+
+ Budget renouvellement 2027
+
+
+ {formatEuros(stats.budget_total)}
+
+
+
+ {/* Indicateurs fixes */}
+
+
+
+
+ PC Fixes
+
+
+ {stats.nb_fixes_renouveler}/{stats.nb_fixes_total}
+ à renouveler
+
+
+
+
+
+
+
+
+ PC Portables
+
+
+ {stats.nb_portables_renouveler}/{stats.nb_portables_total}
+ à renouveler
+
+
+
+
+
+
+
+ );
+}
diff --git a/client/src/components/EtablissementDetail.tsx b/client/src/components/EtablissementDetail.tsx
new file mode 100644
index 0000000..3f817e5
--- /dev/null
+++ b/client/src/components/EtablissementDetail.tsx
@@ -0,0 +1,327 @@
+// Composant EtablissementDetail — Design Corporate Modernism Itinova
+// Panneau de détail d'un établissement avec budget détaillé et liste des équipements
+
+import { useState } from 'react';
+import { X, Monitor, Laptop, Euro, AlertTriangle, CheckCircle, Printer } from 'lucide-react';
+import type { Etablissement } from '../types/budget';
+import { formatEuros, getVetustePercent, getBarColor } from '../lib/format';
+import { MaterielTable } from './MaterielTable';
+
+interface EtablissementDetailProps {
+ etablissement: Etablissement | null;
+ onClose: () => void;
+ coutFixe: number;
+ coutPortable: number;
+ seuilFixesAns: number;
+ seuilPortablesAns: number;
+}
+
+type TabType = 'resume' | 'fixes' | 'portables';
+
+export function EtablissementDetail({
+ etablissement,
+ onClose,
+ coutFixe,
+ coutPortable,
+ seuilFixesAns,
+ seuilPortablesAns,
+}: EtablissementDetailProps) {
+ const [activeTab, setActiveTab] = useState
('resume');
+ const [showOnlyToRenew, setShowOnlyToRenew] = useState(false);
+
+ if (!etablissement) return null;
+
+ const { stats, nom, code, fixes, portables } = etablissement;
+ const percentFixes = getVetustePercent(stats.nb_fixes_renouveler, stats.nb_fixes_total);
+ const percentPortables = getVetustePercent(stats.nb_portables_renouveler, stats.nb_portables_total);
+
+ const handlePrint = () => {
+ window.print();
+ };
+
+ return (
+ <>
+ {/* Overlay */}
+
+
+ {/* Panneau latéral */}
+
+ {/* En-tête */}
+
+
+
+
{code}
+
+ {nom}
+
+
Budget Renouvellement Informatique 2027
+
+
+
+
+
+ {/* Résumé budgétaire */}
+
+
+ {/* Budget total */}
+
+
+ Budget total
+
+
{formatEuros(stats.budget_total)}
+
TTC — exercice 2027
+
+
+ {/* PC Fixes */}
+
+
+ PC Fixes
+
+
{formatEuros(stats.budget_fixes)}
+
+ {stats.nb_fixes_renouveler} PC × {formatEuros(coutFixe)}
+
+
+
+ {stats.nb_fixes_renouveler}/{stats.nb_fixes_total} à renouveler
+ {percentFixes}%
+
+
+
+
+
+ {/* PC Portables */}
+
+
+ PC Portables
+
+
{formatEuros(stats.budget_portables)}
+
+ {stats.nb_portables_renouveler} PC × {formatEuros(coutPortable)}
+
+
+
+ {stats.nb_portables_renouveler}/{stats.nb_portables_total} à renouveler
+ {percentPortables}%
+
+
+
+
+
+
+ {/* Règles de calcul */}
+
+
+
+
+
+
+
+
+
+
+ {/* Onglets */}
+
+
+ {[
+ { id: 'resume' as TabType, label: 'Résumé', count: null },
+ { id: 'fixes' as TabType, label: 'PC Fixes', count: stats.nb_fixes_total },
+ { id: 'portables' as TabType, label: 'PC Portables', count: stats.nb_portables_total },
+ ].map((tab) => (
+ setActiveTab(tab.id)}
+ className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+ activeTab === tab.id
+ ? 'border-primary text-primary'
+ : 'border-transparent text-muted-foreground hover:text-foreground'
+ }`}
+ >
+ {tab.label}
+ {tab.count !== null && (
+
+ {tab.count}
+
+ )}
+
+ ))}
+
+
+
+ {/* Contenu des onglets */}
+
+ {activeTab === 'resume' && (
+
+
+ Synthèse du renouvellement
+
+
+ {/* Tableau récapitulatif */}
+
+
+
+
+ Catégorie
+ Parc total
+ À renouveler
+ Coût unitaire
+ Budget
+
+
+
+
+
+ PC Fixes
+ (seuil {seuilFixesAns} ans)
+
+ {stats.nb_fixes_total}
+
+ 0 ? 'text-orange-600' : 'text-green-600'}`}>
+ {stats.nb_fixes_renouveler}
+
+
+ {formatEuros(coutFixe)}
+ {formatEuros(stats.budget_fixes)}
+
+
+
+ PC Portables
+ (seuil {seuilPortablesAns} ans)
+
+ {stats.nb_portables_total}
+
+ 0 ? 'text-orange-600' : 'text-green-600'}`}>
+ {stats.nb_portables_renouveler}
+
+
+ {formatEuros(coutPortable)}
+ {formatEuros(stats.budget_portables)}
+
+
+ TOTAL
+
+ {stats.nb_fixes_renouveler + stats.nb_portables_renouveler}
+
+
+ {formatEuros(stats.budget_total)}
+
+
+
+
+
+
+ {/* Avertissements */}
+ {(stats.nb_fixes_sans_date > 0 || stats.nb_portables_sans_date > 0) && (
+
+
+
+
+
Données manquantes
+
+ {stats.nb_fixes_sans_date > 0 && `${stats.nb_fixes_sans_date} PC fixe(s) sans date d'achat. `}
+ {stats.nb_portables_sans_date > 0 && `${stats.nb_portables_sans_date} PC portable(s) sans date d'achat. `}
+ Ces équipements ne sont pas comptabilisés dans le budget.
+
+
+
+
+ )}
+
+ {stats.budget_total === 0 && (
+
+
+
+
+ Aucun renouvellement nécessaire pour cet établissement en 2027.
+
+
+
+ )}
+
+ )}
+
+ {activeTab === 'fixes' && (
+
+
+
+ PC Fixes — {stats.nb_fixes_total} équipements
+
+
+
+
+
+
+
+ )}
+
+ {activeTab === 'portables' && (
+
+
+
+ PC Portables — {stats.nb_portables_total} équipements
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ {label}
+
+
{value}
+ {subtitle && (
+
{subtitle}
+ )}
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ Libellé
+
+
+ Fabricant / Modèle
+
+
+ Date d'achat
+
+
+ Vétusté
+
+
+ Statut
+
+
+
+
+ {displayed.map((m, i) => (
+
+ {m.libelle}
+
+ {m.fabricant}
+ {m.modele !== '-' && (
+ — {m.modele}
+ )}
+
+
+ {m.date_achat === '-' ? (
+ Non renseignée
+ ) : (
+ m.date_achat
+ )}
+
+
+
+ {getVetusteLabel(m.age_ans, type)}
+
+
+
+ {m.age_ans === null ? (
+
+
+ ))}
+
+
+
('budget_total');
+ const [sortOrder, setSortOrder] = useState('desc');
+ const [filterType, setFilterType] = useState('all');
+
+ const filteredAndSorted = useMemo(() => {
+ let list: Etablissement[] = [...budgetData.etablissements];
+
+ // Filtre par recherche
+ if (search.trim()) {
+ const q = search.toLowerCase().trim();
+ list = list.filter(
+ (e) =>
+ e.nom.toLowerCase().includes(q) ||
+ e.code.toLowerCase().includes(q)
+ );
+ }
+
+ // Filtre par type
+ if (filterType === 'has_budget') {
+ list = list.filter((e) => e.stats.budget_total > 0);
+ } else if (filterType === 'no_budget') {
+ list = list.filter((e) => e.stats.budget_total === 0);
+ }
+
+ // Tri
+ list.sort((a, b) => {
+ let valA: number | string;
+ let valB: number | string;
+
+ switch (sortField) {
+ case 'nom':
+ valA = a.nom;
+ valB = b.nom;
+ break;
+ case 'code':
+ valA = a.code;
+ valB = b.code;
+ break;
+ case 'budget_total':
+ valA = a.stats.budget_total;
+ valB = b.stats.budget_total;
+ break;
+ case 'nb_fixes_renouveler':
+ valA = a.stats.nb_fixes_renouveler;
+ valB = b.stats.nb_fixes_renouveler;
+ break;
+ case 'nb_portables_renouveler':
+ valA = a.stats.nb_portables_renouveler;
+ valB = b.stats.nb_portables_renouveler;
+ break;
+ default:
+ valA = a.stats.budget_total;
+ valB = b.stats.budget_total;
+ }
+
+ if (typeof valA === 'string' && typeof valB === 'string') {
+ return sortOrder === 'asc'
+ ? valA.localeCompare(valB, 'fr')
+ : valB.localeCompare(valA, 'fr');
+ }
+
+ return sortOrder === 'asc'
+ ? (valA as number) - (valB as number)
+ : (valB as number) - (valA as number);
+ });
+
+ return list;
+ }, [search, sortField, sortOrder, filterType]);
+
+ const toggleSort = (field: SortField) => {
+ if (sortField === field) {
+ setSortOrder((o) => (o === 'asc' ? 'desc' : 'asc'));
+ } else {
+ setSortField(field);
+ setSortOrder('desc');
+ }
+ };
+
+ return {
+ meta: budgetData.meta,
+ etablissements: filteredAndSorted,
+ totalEtablissements: budgetData.etablissements.length,
+ search,
+ setSearch,
+ sortField,
+ sortOrder,
+ toggleSort,
+ filterType,
+ setFilterType,
+ };
+}
diff --git a/client/src/index.css b/client/src/index.css
index 72b423d..dd32870 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,3 +1,12 @@
+/* =============================================================
+ ITINOVA — Budget Renouvellement SI 2027
+ Design: Corporate Modernism
+ Palette: Bleu marine sidebar #1A2E4A, Blanc cassé #F8F6F2,
+ Bleu Itinova #0066CC, Orange vétusté #E8820C,
+ Vert récent #3D7A5F, Anthracite #2C2C2C
+ Fonts: Sora (titres) + Inter (corps)
+ ============================================================= */
+
@import "tailwindcss";
@import "tw-animate-css";
@@ -40,77 +49,53 @@
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
+
+ /* Custom Itinova tokens */
+ --font-display: 'Sora', sans-serif;
+ --font-body: 'Inter', sans-serif;
+ --itinova-navy: oklch(0.22 0.06 240);
+ --itinova-navy-light: oklch(0.28 0.06 240);
+ --itinova-blue: oklch(0.48 0.18 255);
+ --itinova-orange: oklch(0.65 0.17 50);
+ --itinova-green: oklch(0.50 0.10 160);
+ --itinova-red: oklch(0.55 0.20 25);
+ --itinova-bg: oklch(0.985 0.005 80);
}
: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);
+ --radius: 0.5rem;
+ --background: oklch(0.985 0.005 80);
+ --foreground: oklch(0.18 0.01 260);
--card: oklch(1 0 0);
- --card-foreground: oklch(0.235 0.015 65);
+ --card-foreground: oklch(0.18 0.01 260);
--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);
- --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);
-}
-
-.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);
- --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);
+ --popover-foreground: oklch(0.18 0.01 260);
+ --primary: oklch(0.48 0.18 255);
+ --primary-foreground: oklch(0.98 0 0);
+ --secondary: oklch(0.95 0.005 240);
+ --secondary-foreground: oklch(0.22 0.06 240);
+ --muted: oklch(0.94 0.005 80);
+ --muted-foreground: oklch(0.50 0.01 260);
+ --accent: oklch(0.93 0.01 240);
+ --accent-foreground: oklch(0.22 0.06 240);
+ --destructive: oklch(0.55 0.20 25);
+ --destructive-foreground: oklch(0.98 0 0);
+ --border: oklch(0.88 0.005 260);
+ --input: oklch(0.92 0.005 260);
+ --ring: oklch(0.48 0.18 255);
+ --chart-1: oklch(0.48 0.18 255);
+ --chart-2: oklch(0.65 0.17 50);
+ --chart-3: oklch(0.50 0.10 160);
+ --chart-4: oklch(0.55 0.20 25);
+ --chart-5: oklch(0.22 0.06 240);
+ --sidebar: oklch(0.22 0.06 240);
+ --sidebar-foreground: oklch(0.92 0.01 240);
+ --sidebar-primary: oklch(0.48 0.18 255);
+ --sidebar-primary-foreground: oklch(0.98 0 0);
+ --sidebar-accent: oklch(0.28 0.06 240);
+ --sidebar-accent-foreground: oklch(0.92 0.01 240);
+ --sidebar-border: oklch(0.30 0.05 240);
+ --sidebar-ring: oklch(0.48 0.18 255);
}
@layer base {
@@ -119,6 +104,10 @@
}
body {
@apply bg-background text-foreground;
+ font-family: 'Inter', sans-serif;
+ }
+ h1, h2, h3, h4, h5, h6 {
+ font-family: 'Sora', sans-serif;
}
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
@@ -134,24 +123,11 @@
}
@layer components {
- /**
- * Custom container utility that centers content and adds responsive padding.
- *
- * This overrides Tailwind's default container behavior to:
- * - Auto-center content (mx-auto)
- * - Add responsive horizontal padding
- * - Set max-width for large screens
- *
- * Usage: ...
- *
- * For custom widths, use max-w-* utilities directly:
- * ...
- */
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
- padding-left: 1rem; /* 16px - mobile padding */
+ padding-left: 1rem;
padding-right: 1rem;
}
@@ -162,16 +138,76 @@
@media (min-width: 640px) {
.container {
- padding-left: 1.5rem; /* 24px - tablet padding */
+ padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
- padding-left: 2rem; /* 32px - desktop padding */
+ padding-left: 2rem;
padding-right: 2rem;
- max-width: 1280px; /* Standard content width */
+ max-width: 1400px;
}
}
-}
\ No newline at end of file
+
+ /* Barre de vétusté */
+ .vetusite-bar {
+ height: 4px;
+ border-radius: 2px;
+ transition: width 0.6s ease-out;
+ }
+
+ /* Card établissement */
+ .etab-card {
+ transition: transform 0.15s ease, box-shadow 0.15s ease;
+ }
+ .etab-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 24px oklch(0.22 0.06 240 / 0.12);
+ }
+
+ /* Liseré coloré en haut des sections */
+ .section-accent {
+ border-top: 3px solid oklch(0.48 0.18 255);
+ }
+
+ /* Chiffre clé */
+ .kpi-value {
+ font-family: 'Sora', sans-serif;
+ font-weight: 800;
+ letter-spacing: -0.02em;
+ }
+}
+
+/* Animations d'entrée */
+@keyframes fadeSlideUp {
+ from {
+ opacity: 0;
+ transform: translateY(12px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.animate-fade-slide-up {
+ animation: fadeSlideUp 0.35s ease-out forwards;
+}
+
+/* Scrollbar personnalisée */
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+::-webkit-scrollbar-track {
+ background: oklch(0.94 0.005 80);
+}
+::-webkit-scrollbar-thumb {
+ background: oklch(0.70 0.01 260);
+ border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+ background: oklch(0.48 0.18 255);
+}
diff --git a/client/src/lib/format.ts b/client/src/lib/format.ts
new file mode 100644
index 0000000..44d2667
--- /dev/null
+++ b/client/src/lib/format.ts
@@ -0,0 +1,72 @@
+// Utilitaires de formatage — Budget SI 2027 Itinova
+
+/**
+ * Formate un montant en euros avec séparateur de milliers
+ */
+export function formatEuros(amount: number): string {
+ return new Intl.NumberFormat('fr-FR', {
+ style: 'currency',
+ currency: 'EUR',
+ minimumFractionDigits: 0,
+ maximumFractionDigits: 0,
+ }).format(amount);
+}
+
+/**
+ * Formate un nombre avec séparateur de milliers
+ */
+export function formatNumber(n: number): string {
+ return new Intl.NumberFormat('fr-FR').format(n);
+}
+
+/**
+ * Retourne la couleur de vétusté selon l'âge
+ */
+export function getVetusteColor(ageAns: number | null, type: 'fixe' | 'portable'): string {
+ if (ageAns === null) return 'text-muted-foreground';
+ const seuil = type === 'fixe' ? 5 : 4;
+ if (ageAns >= seuil + 2) return 'text-red-600';
+ if (ageAns >= seuil) return 'text-orange-500';
+ if (ageAns >= seuil - 1) return 'text-yellow-600';
+ return 'text-green-600';
+}
+
+/**
+ * Retourne la classe de badge de vétusté
+ */
+export function getVetusteBadgeClass(ageAns: number | null, type: 'fixe' | 'portable'): string {
+ if (ageAns === null) return 'bg-gray-100 text-gray-500';
+ const seuil = type === 'fixe' ? 5 : 4;
+ if (ageAns >= seuil + 2) return 'bg-red-100 text-red-700 border border-red-200';
+ if (ageAns >= seuil) return 'bg-orange-100 text-orange-700 border border-orange-200';
+ if (ageAns >= seuil - 1) return 'bg-yellow-100 text-yellow-700 border border-yellow-200';
+ return 'bg-green-100 text-green-700 border border-green-200';
+}
+
+/**
+ * Retourne le libellé de vétusté
+ */
+export function getVetusteLabel(ageAns: number | null, type: 'fixe' | 'portable'): string {
+ if (ageAns === null) return 'Date inconnue';
+ const seuil = type === 'fixe' ? 5 : 4;
+ if (ageAns >= seuil) return `À renouveler (${ageAns.toFixed(1)} ans)`;
+ return `${ageAns.toFixed(1)} ans`;
+}
+
+/**
+ * Calcule le pourcentage de vétusté pour la barre de progression
+ */
+export function getVetustePercent(nbRenouveler: number, nbTotal: number): number {
+ if (nbTotal === 0) return 0;
+ return Math.round((nbRenouveler / nbTotal) * 100);
+}
+
+/**
+ * Retourne la couleur de la barre de vétusté selon le pourcentage
+ */
+export function getBarColor(percent: number): string {
+ if (percent >= 70) return 'bg-red-500';
+ if (percent >= 40) return 'bg-orange-400';
+ if (percent >= 20) return 'bg-yellow-400';
+ return 'bg-green-500';
+}
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index 0b184dd..aeeda80 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -1,25 +1,297 @@
-import { Button } from "@/components/ui/button";
-import { Loader2 } from "lucide-react";
-import { Streamdown } from 'streamdown';
+// Page principale — Budget Renouvellement SI 2027 - Itinova
+// Design: Corporate Modernism — Sidebar bleu marine + grille de cards
+
+import { useState } from 'react';
+import {
+ Building2,
+ Monitor,
+ Laptop,
+ Euro,
+ Search,
+ SortAsc,
+ SortDesc,
+ Filter,
+ BarChart3,
+ AlertTriangle,
+ CheckCircle,
+ ChevronDown,
+} from 'lucide-react';
+import { useBudgetData } from '../hooks/useBudgetData';
+import { formatEuros, formatNumber } from '../lib/format';
+import { EtablissementCard } from '../components/EtablissementCard';
+import { EtablissementDetail } from '../components/EtablissementDetail';
+import { KpiCard } from '../components/KpiCard';
+import type { Etablissement, SortField, FilterType } from '../types/budget';
-/**
- * All content in this page are only for example, replace with your own feature implementation
- * When building pages, remember your instructions in Frontend Best Practices, Design Guide and Common Pitfalls
- */
export default function Home() {
- // If theme is switchable in App.tsx, we can implement theme toggling like this:
- // const { theme, toggleTheme } = useTheme();
+ const {
+ meta,
+ etablissements,
+ totalEtablissements,
+ search,
+ setSearch,
+ sortField,
+ sortOrder,
+ toggleSort,
+ filterType,
+ setFilterType,
+ } = useBudgetData();
+
+ const [selectedEtab, setSelectedEtab] = useState(null);
+ const [sidebarOpen, setSidebarOpen] = useState(true);
+
+ const sortOptions: { value: SortField; label: string }[] = [
+ { value: 'budget_total', label: 'Budget total' },
+ { value: 'nom', label: 'Nom' },
+ { value: 'code', label: 'Code' },
+ { value: 'nb_fixes_renouveler', label: 'PC Fixes à renouveler' },
+ { value: 'nb_portables_renouveler', label: 'PC Portables à renouveler' },
+ ];
+
+ const filterOptions: { value: FilterType; label: string }[] = [
+ { value: 'all', label: 'Tous les établissements' },
+ { value: 'has_budget', label: 'Avec budget de renouvellement' },
+ { value: 'no_budget', label: 'Sans renouvellement nécessaire' },
+ ];
return (
-
-
- {/* Example: lucide-react for icons */}
- Any **markdown** content
- Example Button
+
+ {/* Sidebar */}
+
+
+ {/* Contenu principal */}
+
+ {/* En-tête */}
+
+
+ {/* KPIs globaux */}
+
+
+ {/* Barre de filtres */}
+
+
+ {/* Recherche */}
+
+
+
+ {/* Filtre */}
+
+ setFilterType(e.target.value as FilterType)}
+ className="pl-8 pr-8 py-2 text-sm bg-muted/50 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 appearance-none cursor-pointer"
+ >
+ {filterOptions.map((opt) => (
+
+ {opt.label}
+
+ ))}
+
+
+
+ {/* Tri */}
+
+
Trier par :
+
+ toggleSort(e.target.value as SortField)}
+ className="pl-3 pr-8 py-2 text-sm bg-muted/50 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 appearance-none cursor-pointer"
+ >
+ {sortOptions.map((opt) => (
+
+ {opt.label}
+
+ ))}
+
+
+
toggleSort(sortField)}
+ className="p-2 rounded-lg border border-border bg-muted/50 hover:bg-muted transition-colors"
+ title={sortOrder === 'asc' ? 'Croissant' : 'Décroissant'}
+ >
+ {sortOrder === 'asc' ? (
+
+
+
+
+ {etablissements.length === 0 ? (
+
+
+
Aucun établissement trouvé
+
+ Modifiez vos critères de recherche ou de filtre.
+
+
+ ) : (
+
+ {etablissements.map((etab, index) => (
+ setSelectedEtab(etab)}
+ index={index}
+ />
+ ))}
+
+ )}
+
+
+ {/* Panneau de détail */}
+ {selectedEtab && (
+
setSelectedEtab(null)}
+ coutFixe={meta.cout_fixe}
+ coutPortable={meta.cout_portable}
+ seuilFixesAns={meta.seuil_fixes_ans}
+ seuilPortablesAns={meta.seuil_portables_ans}
+ />
+ )}
+0.07
+
+
+**Design Movement:** Corporate Modernism — Bauhaus appliqué au tableau de bord analytique
+
+**Core Principles:**
+1. Hiérarchie visuelle stricte : chaque information a un rang clair (titre > chiffre clé > détail)
+2. Densité informationnelle maîtrisée : beaucoup de données sans surcharge cognitive
+3. Couleur fonctionnelle : la couleur encode le sens (vert = bon, orange = attention, rouge = critique)
+4. Grille asymétrique : sidebar fixe à gauche, contenu principal à droite
+
+**Color Philosophy:**
+- Fond principal : blanc cassé chaud `#F8F6F2`
+- Sidebar : bleu marine profond `#1A2E4A` (autorité, confiance)
+- Accent primaire : bleu Itinova `#0066CC`
+- Alerte vétusté : orange ambré `#E8820C`
+- Succès/récent : vert sauge `#3D7A5F`
+- Texte : anthracite `#2C2C2C`
+
+**Layout Paradigm:**
+Sidebar fixe (240px) + zone principale scrollable. En-tête avec KPIs globaux en bandeaux horizontaux. Liste des établissements en grille 3 colonnes avec cards. Fenêtre de détail en panneau latéral droit (drawer) ou modal pleine largeur.
+
+**Signature Elements:**
+1. Barre de vétusté colorée (rouge/orange/vert) sur chaque card établissement
+2. Chiffres budgétaires en grande typographie avec unité en exposant
+3. Ligne de séparation colorée en haut de chaque section (liseré 3px couleur primaire)
+
+**Interaction Philosophy:**
+Hover sur les cards révèle les détails. Clic ouvre un drawer latéral avec le détail complet. Filtres persistants dans la sidebar.
+
+**Animation:**
+- Entrée des cards : fade-in + slide-up (stagger 50ms)
+- Ouverture drawer : slide depuis la droite (300ms ease-out)
+- Compteurs budgétaires : animation count-up au chargement
+
+**Typography System:**
+- Titres : `Sora` Bold (moderne, institutionnel)
+- Corps : `Inter` Regular/Medium
+- Chiffres clés : `Sora` ExtraBold, taille 2xl-4xl
+
+
+
+
+
+0.06
+
+
+**Design Movement:** Data-Forward Minimalism — Inspiration Bloomberg Terminal modernisé
+
+**Core Principles:**
+1. L'information prime sur la décoration
+2. Contraste élevé pour lisibilité en conditions de bureau
+3. Tableaux comme élément central, pas les cards
+4. Navigation par onglets horizontaux
+
+**Color Philosophy:**
+- Fond sombre `#0F1923` (confort visuel sur longues sessions)
+- Texte blanc `#E8EDF2`
+- Accent cyan `#00B4D8` pour les chiffres importants
+- Rouge `#FF4757` pour les équipements à renouveler
+- Vert `#2ED573` pour les équipements récents
+
+**Layout Paradigm:**
+Full-width avec navigation top. Dashboard principal avec 4 KPI cards en ligne. Tableau principal avec tri/filtre. Modal de détail.
+
+**Signature Elements:**
+1. Indicateurs LED (points colorés) pour le statut de vétusté
+2. Mini sparklines dans les cells du tableau
+3. Header avec gradient sombre
+
+**Interaction Philosophy:**
+Tri de colonnes, filtres inline, export CSV.
+
+**Animation:**
+Transitions subtiles, pas d'animations ostentatoires.
+
+**Typography System:**
+- `JetBrains Mono` pour les chiffres et codes
+- `IBM Plex Sans` pour les libellés
+
+
+
+
+
+0.08
+
+
+**Design Movement:** Institutional Clarity — Design système gouvernemental français modernisé
+
+**Core Principles:**
+1. Accessibilité maximale (WCAG AA)
+2. Structure tabulaire claire avec alternance de lignes
+3. Couleurs institutionnelles sobres
+4. Formulaires et filtres bien structurés
+
+**Color Philosophy:**
+- Fond blanc pur `#FFFFFF`
+- Bleu institutionnel `#003189`
+- Gris clair `#F5F5F5` pour alternance
+- Orange `#E05206` pour alertes
+
+**Layout Paradigm:**
+Navigation top fixe. Contenu centré max-width 1200px. Tableau principal avec pagination.
+
+**Signature Elements:**
+1. Bandeau bleu en header avec logo Itinova
+2. Tableau avec en-têtes fixes et tri
+3. Badges colorés pour les statuts
+
+**Interaction Philosophy:**
+Simplicité maximale, pas d'effets superflus.
+
+**Animation:**
+Aucune animation, priorité à la performance.
+
+**Typography System:**
+- `Marianne` (police officielle française) ou `Source Sans Pro`
+- Hiérarchie claire H1/H2/H3
+
+
+
+
+---
+
+## Choix retenu : Approche 1 — Corporate Modernism
+
+Design professionnel avec sidebar bleu marine, cards d'établissements avec indicateurs de vétusté colorés, et drawer de détail. Typographie Sora + Inter pour un rendu institutionnel moderne.