From c7fa25a5d1031c67a868cb164470a48243f53cb7 Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Thu, 5 Mar 2026 14:08:29 +0100
Subject: [PATCH] feat: Implement an Apple-inspired design system with
 dark/light modes and introduce the initial dashboard layout including a
 heatmap grid component.

---
 src/app/(dashboard)/layout.tsx                |  2 +-
 src/app/globals.css                           |  4 +--
 src/features/grid/components/grid-client.tsx  | 26 ++++++++++++-------
 src/features/grid/components/heatmap-grid.tsx |  6 ++---
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index 9827a52..b370a4a 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -7,7 +7,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
             <Sidebar />
             <main className="flex-1 flex flex-col h-full min-w-0 overflow-hidden">
                 <Header />
-                <div className="flex-1 overflow-auto p-4 md:p-8">
+                <div className="flex-1 overflow-hidden flex flex-col p-4 md:p-8">
                     {children}
                 </div>
             </main>
diff --git a/src/app/globals.css b/src/app/globals.css
index cf06e15..2415593 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -192,8 +192,8 @@
 
 /* ── Refined scrollbar ── */
 .overflow-auto::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+  width: 8px;
+  height: 8px;
 }
 
 .overflow-auto::-webkit-scrollbar-track {
diff --git a/src/features/grid/components/grid-client.tsx b/src/features/grid/components/grid-client.tsx
index b4290ae..ab5e4ca 100644
--- a/src/features/grid/components/grid-client.tsx
+++ b/src/features/grid/components/grid-client.tsx
@@ -78,9 +78,9 @@ export function GridClient({ initialRows, nomFournisseur, fournisseurs, magasins
     const activeStoreNom = magasins.find(m => m.code === magasin)?.nom || "National (Total)";
 
     return (
-        <div className="space-y-3 pb-20">
+        <div className="flex flex-col h-full space-y-3 min-h-0 pb-12">
             {/* Header */}
-            <div className="flex items-end justify-between">
+            <div className="flex items-end justify-between shrink-0">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight">Révision d&apos;Assortiment</h1>
                     <p className="text-[13px] mt-0.5" style={{ color: "var(--text-secondary)" }}>
@@ -114,18 +114,24 @@ export function GridClient({ initialRows, nomFournisseur, fournisseurs, magasins
             </div>
 
             {/* Filters */}
-            <GridFilterBar fournisseurs={fournisseurs} magasins={magasins} nomenclature={nomenclature} />
+            <div className="shrink-0">
+                <GridFilterBar fournisseurs={fournisseurs} magasins={magasins} nomenclature={nomenclature} />
+            </div>
 
             {/* Bulk toolbar (contextual) */}
-            <BulkActionToolbar
-                selectedCodeins={selectedCodeins}
-                onClearSelection={() => setSelectedCodeins([])}
-            />
+            <div className="shrink-0">
+                <BulkActionToolbar
+                    selectedCodeins={selectedCodeins}
+                    onClearSelection={() => setSelectedCodeins([])}
+                />
+            </div>
 
             {/* Main grid */}
-            <HeatmapGrid
-                onSelectionChange={setSelectedCodeins}
-            />
+            <div className="flex-1 min-h-0 min-w-0">
+                <HeatmapGrid
+                    onSelectionChange={setSelectedCodeins}
+                />
+            </div>
 
             {/* Summary bar */}
             <FloatingSummaryBar />
diff --git a/src/features/grid/components/heatmap-grid.tsx b/src/features/grid/components/heatmap-grid.tsx
index 944d339..af235b4 100644
--- a/src/features/grid/components/heatmap-grid.tsx
+++ b/src/features/grid/components/heatmap-grid.tsx
@@ -441,9 +441,8 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) {
     if (!isMounted) {
         return (
             <div
-                className="overflow-auto rounded-[12px] flex items-center justify-center"
+                className="h-full w-full overflow-auto rounded-[12px] flex items-center justify-center"
                 style={{
-                    height: "calc(100vh - 240px)",
                     background: "var(--bg-surface)",
                     border: "1px solid var(--border)",
                 }}
@@ -456,9 +455,8 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) {
     return (
         <div
             ref={tableContainerRef}
-            className="overflow-auto rounded-[12px] scroll-smooth"
+            className="h-full w-full overflow-auto rounded-[12px] scroll-smooth"
             style={{
-                height: "calc(100vh - 240px)",
                 background: "var(--bg-surface)",
                 border: "1px solid var(--border)",
                 boxShadow: "var(--shadow-sm)"