-

CLAUDE.md

@@ -52,32 +52,44 @@ XX. **Nome Problema (FIX/IMPLEMENTATO DATA):** - **Problema:** Descrizione breve
 
 **Lavoro completato nell'ultima sessione:**
 
-- **NUOVA FEATURE: Pannelli Ridimensionabili e Collassabili nel Report Designer** - COMPLETATO
+- **NUOVA FEATURE: Sistema Pannelli Drag-and-Drop con Sidebar Ridimensionabili** - COMPLETATO
-  - **Obiettivo:** I pannelli del report designer devono essere collassabili, ridimensionabili, riposizionabili e la configurazione deve essere persistita
+  - **Obiettivo:** I pannelli del report designer devono poter essere trascinati tra sidebar sinistra e destra, con ridimensionamento orizzontale a livello sidebar
-  - **Nuovi file creati:**
+  - **Architettura implementata:**
-    - `frontend/src/hooks/useLocalStorage.ts` - Hook generico per persistenza in localStorage
+    - `SidebarDropZone.tsx` - Contenitore sidebar con:
-    - `frontend/src/hooks/usePanelLayout.ts` - Hook per gestire configurazione pannelli (larghezza, collapsed, posizione)
+      - Drop zone per drag-and-drop pannelli (HTML5 Drag and Drop API)
-    - `frontend/src/components/reportEditor/ResizablePanel.tsx` - Componente pannello ridimensionabile con:
+      - Handle di resize orizzontale sul bordo interno
-      - Handle di resize trascinabile sul bordo
+      - Indicatore visivo durante il drag
-      - Stato collassato con icona, badge e titolo verticale
+      - Props: `position`, `width`, `onWidthChange`, `onPanelDrop`, `panelIds`
-      - Header compatto con titolo, icona e pulsante collasso
+    - `ResizablePanel.tsx` - Pannello individuale con:
-      - Nessuna scrollbar visibile (hidden ma funzionale)
+      - Header trascinabile (`draggable="true"`)
-  - **Configurazione pannelli:**
+      - Resize verticale (flex) tra pannelli nella stessa sidebar
-    - Salvata in localStorage con chiave `apollinare-report-editor-panels`
+      - Stato collassato con icona e titolo verticale
-    - Default: Pages (sinistra, 220px), Data (destra, 280px), Properties (destra, 280px)
+      - `width: 100%` - si adatta alla larghezza della sidebar
-    - Ogni pannello ha: id, width, collapsed, position (left/right), order
+    - `usePanelLayout.ts` - Hook per gestione stato:
-  - **Scrollbar nascoste:** Usato CSS per nascondere scrollbar mantenendo funzionalità scroll
+      - `sidebarWidths: { left: number, right: number }` per larghezza sidebar
-    - `&::-webkit-scrollbar: { width: 0 }` per Chrome/Safari
+      - `panels[]` con `flex` per distribuzione verticale
-    - `scrollbarWidth: "none"` per Firefox
+      - `movePanelToPosition()` redistribuisce flex quando un pannello viene droppato
-    - `msOverflowStyle: "none"` per IE/Edge
+      - Persistenza in localStorage (versione 3)
-  - **Canvas centrato:** La viewport del report rimane sempre al centro dell'area disponibile
+  - **Comportamento:**
-  - **File modificati:**
+    - Trascinando l'header di un pannello si può spostarlo tra sidebar
-    - `ReportEditorPage.tsx` - Integrato `usePanelLayout`, usato `ResizablePanel` per tutti i pannelli
+    - Quando un pannello viene droppato, tutti i pannelli nella sidebar di destinazione ottengono `flex: 1` (distribuzione equa)
-    - `PageNavigator.tsx` - Aggiunto CSS per nascondere scrollbar
+    - Il resize orizzontale agisce sulla sidebar intera, non sui singoli pannelli
-    - `DataBindingPanel.tsx` - Aggiunto CSS per nascondere scrollbar
+    - I pannelli adottano automaticamente la larghezza della sidebar
-    - `PropertiesPanel.tsx` - Aggiunto CSS per nascondere scrollbar
+  - **Layout Full-Width:**
-  - **File rimossi:**
+    - `Layout.tsx` modificato per Report Editor: `p: 0`, `overflow: hidden`, `width: 100vw - drawerWidth`
-    - `CollapsiblePanel.tsx` - Sostituito da `ResizablePanel`
+    - `ReportEditorPage.tsx`: `flex: 1`, `minHeight: 0` per espansione corretta
+    - Canvas container: `width: 100%` per occupare tutto lo spazio disponibile
+
+- **FIX: Layout Report Designer Non Full-Width** - COMPLETATO
+  - **Problema:** Il report designer non occupava tutta la larghezza del browser
+  - **Causa:** Il Layout usava `width: 100%` invece di `100vw` e il padding non veniva rimosso per il report editor
+  - **Soluzione:**
+    - `Layout.tsx`: Usato `width: 100vw` e `calc(100vw - drawerWidth)` invece di `100%`
+    - `Layout.tsx`: Padding condizionale `p: 0` per route `/report-editor`
+    - `Layout.tsx`: `overflow: hidden` e `height: 100vh` per contenitore main
+    - `ReportEditorPage.tsx`: Rimossi margini negativi, usato `flex: 1` e `minHeight: 0`
+    - `EditorCanvas.tsx`: Modifiche utente per larghezza canvas
+  - **File modificati:** `Layout.tsx`, `ReportEditorPage.tsx`, `EditorCanvas.tsx`
 
 - **NUOVA FEATURE: Panning e Zoom stile Draw.io nel Report Designer** - COMPLETATO (sessione precedente)
   - **Problema:** Le scorciatoie da tastiera (Ctrl+X, Ctrl+C, etc.) venivano intercettate dal browser invece che dalla pagina
@@ -1272,6 +1284,32 @@ frontend/src/
       - Implementate tutte le scorciatoie dichiarate nel context menu (Ctrl+X/C/V/D/A/L/G, Ctrl+[/], Delete, Escape)
     - **File:** `EditorCanvas.tsx` (aggiunto `isTextEditing()` a `EditorCanvasRef`), `ReportEditorPage.tsx` (riscritto `useEffect` delle scorciatoie, aggiunto `canvasRef`)
 
+29. **Sistema Pannelli Drag-and-Drop tra Sidebar (IMPLEMENTATO 29/11/2025):**
+    - **Obiettivo:** Permettere agli utenti di trascinare i pannelli tra sidebar sinistra e destra, con ridimensionamento a livello sidebar
+    - **Implementazione:**
+      - `SidebarDropZone.tsx` - Drop zone con HTML5 Drag and Drop API e resize orizzontale
+      - `ResizablePanel.tsx` - Pannello con header draggable e resize verticale (flex)
+      - `usePanelLayout.ts` - Hook con `sidebarWidths` invece di larghezza per-pannello
+      - Versione config incrementata a 3 per forzare migrazione localStorage
+    - **Comportamento chiave:**
+      - `movePanelToPosition()` redistribuisce `flex: 1` a tutti i pannelli nella sidebar di destinazione
+      - Pannelli usano `width: 100%` per adattarsi alla sidebar
+      - `PANEL_DRAG_TYPE = "application/x-panel-id"` per identificare i drag
+    - **File:** `SidebarDropZone.tsx`, `ResizablePanel.tsx`, `usePanelLayout.ts`, `ReportEditorPage.tsx`
+
+30. **Layout Report Designer Non Full-Width (FIX 29/11/2025):**
+    - **Problema:** Il report designer non occupava tutta la larghezza disponibile del browser
+    - **Causa:** Il Layout usava `width: 100%` che si riferisce al parent, non al viewport. Inoltre il padding non veniva rimosso per il report editor
+    - **Soluzione:**
+      - `Layout.tsx`: Cambiato `width: 100%` → `width: 100vw` e `calc(100vw - drawerWidth)`
+      - `Layout.tsx`: Aggiunto controllo condizionale per route `/report-editor`: `p: 0`, `overflow: hidden`
+      - `Layout.tsx`: Cambiato `minHeight: 100vh` → `height: 100vh` con `overflow: hidden`
+      - `Layout.tsx`: Content box usa `flex: 1` con `minHeight: 0` (fondamentale per flexbox)
+      - `ReportEditorPage.tsx`: Rimossi margini negativi, usato `flex: 1` e `minHeight: 0`
+      - `ReportEditorPage.tsx`: Canvas container con `width: 100%`
+    - **Nota:** `minHeight: 0` è fondamentale in flexbox per permettere ai contenitori di ridursi sotto la dimensione del loro contenuto
+    - **File:** `Layout.tsx`, `ReportEditorPage.tsx`, `EditorCanvas.tsx`
+
 ### Schema Database Report System
 
 Le tabelle sono già nel DbContext (`AppollinareDbContext.cs`):

frontend/src/components/Layout.tsx

@@ -215,23 +215,31 @@ export default function Layout() {
         sx={{
           flexGrow: 1,
           width: {
-            xs: "100%",
+            xs: "100vw",
-            sm: `calc(100% - ${drawerWidth}px)`,
+            sm: `calc(100vw - ${drawerWidth}px)`,
           },
-          minHeight: "100vh",
+          height: "100vh",
           display: "flex",
           flexDirection: "column",
+          overflow: "hidden",
         }}
       >
         {/* Toolbar spacer */}
-        <Toolbar sx={{ minHeight: { xs: 56, sm: 64 } }} />
+        <Toolbar sx={{ minHeight: { xs: 56, sm: 64 }, flexShrink: 0 }} />
 
         {/* Content */}
         <Box
           sx={{
-            flexGrow: 1,
+            flex: 1,
-            p: { xs: 1.5, sm: 2, md: 3 },
+            display: "flex",
-            overflow: "auto",
+            flexDirection: "column",
+            minHeight: 0, // Important: allows flex children to shrink below content size
+            p: location.pathname.startsWith("/report-editor")
+              ? 0
+              : { xs: 1.5, sm: 2, md: 3 },
+            overflow: location.pathname.startsWith("/report-editor")
+              ? "hidden"
+              : "auto",
           }}
         >
           <Outlet />

frontend/src/components/reportEditor/EditorCanvas.tsx

@@ -1522,6 +1522,7 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
         sx={{
           flex: 1,
           overflow: "auto",
+          width: "100%",
           display: "flex",
           justifyContent: "center",
           alignItems: "flex-start",

frontend/src/pages/ReportEditorPage.tsx

@@ -1862,9 +1862,9 @@ export default function ReportEditorPage() {
       sx={{
         display: "flex",
         flexDirection: "column",
-        height: { xs: "calc(100vh - 56px)", sm: "calc(100vh - 64px)" },
+        flex: 1,
-        mx: { xs: -1.5, sm: -2, md: -3 },
+        width: "100%",
-        mt: { xs: -1.5, sm: -2, md: -3 },
+        minHeight: 0, // Important: allows flex container to shrink
         overflow: "hidden",
       }}
     >