feat: introduce heatmap grid component for displaying and managing product data with virtualization and performance optimizations.

src/features/grid/components/heatmap-grid.tsx

@@ -490,27 +490,19 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) {
     }
 
     return (
-        <div
+        <div className="flex flex-col h-full w-full gap-3 relative">
-            ref={tableContainerRef}
+            <div className="flex justify-end items-center w-full px-1">
-            className="h-full w-full overflow-auto rounded-[12px] scroll-smooth relative"
-            style={{
-                background: "var(--bg-surface)",
-                border: "1px solid var(--border)",
-                boxShadow: "var(--shadow-sm)"
-            }}
-        >
-            <div className="absolute top-2 right-4 z-50">
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                         <button
-                            className="flex items-center gap-2 px-3 py-1.5 rounded-md text-xs font-semibold bg-[var(--bg-elevated)] border border-[var(--border-strong)] hover:border-emerald-500 hover:text-emerald-500 transition-colors shadow-sm"
+                            className="flex items-center justify-center gap-2 px-3 py-1.5 rounded-md text-sm font-semibold bg-[var(--action-secondary-bg)] text-[var(--action-secondary-text)] border border-[var(--border-strong)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-all shadow-sm apple-btn-secondary"
                             aria-label="Afficher/masquer les colonnes"
                         >
-                            <SlidersHorizontal className="w-3.5 h-3.5" />
+                            <SlidersHorizontal className="w-4 h-4" />
                             Colonnes
                         </button>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end" className="w-[200px] max-h-[400px] overflow-y-auto z-50">
+                    <DropdownMenuContent align="end" className="w-[220px] max-h-[50vh] overflow-y-auto z-50">
                         {table
                             .getAllLeafColumns()
                             .filter((column: any) => column.getCanHide())
@@ -518,7 +510,7 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) {
                                 return (
                                     <DropdownMenuCheckboxItem
                                         key={column.id}
-                                        className="capitalize text-xs cursor-pointer"
+                                        className="capitalize text-xs cursor-pointer font-medium"
                                         checked={column.getIsVisible()}
                                         onCheckedChange={(value) => column.toggleVisibility(!!value)}
                                         onSelect={(e: Event) => e.preventDefault()}
@@ -535,6 +527,15 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) {
                 </DropdownMenu>
             </div>
 
+            <div
+                ref={tableContainerRef}
+                className="flex-1 min-h-0 w-full overflow-auto rounded-[12px] scroll-smooth relative"
+                style={{
+                    background: "var(--bg-surface)",
+                    border: "1px solid var(--border)",
+                    boxShadow: "var(--shadow-sm)"
+                }}
+            >
                 <table className="text-sm block" style={{ width: "100%", minWidth: totalWidth }}>
                     <thead className="sticky top-0 z-10 block" style={{
                         background: "linear-gradient(to bottom, var(--bg-elevated), var(--bg-surface))",
@@ -598,5 +599,6 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) {
                     </tbody>
                 </table>
             </div>
+        </div>
     );
 }