OlympiaIntranet/docs/superpowers/plans/2026-03-27-scostamento-performance-grid-layout.md

# gvScostamentoPerformance Grid Layout — Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Migliorare la leggibilità e la presentazione visiva della griglia `gvScostamentoPerformance` in `ScostamentoPerformance.aspx` — colonne fisse in px, scroll orizzontale, colonne bloccate, tema Aqua uniforme e CSS override mirati.

**Architecture:** Tutte le modifiche sono confinate al solo file `ScostamentoPerformance.aspx`. Il markup ASPX viene aggiornato inline (attributi DevExpress + blocco `<style>`). Nessuna modifica al code-behind né al datasource.

**Tech Stack:** ASP.NET Web Forms 4.7.2, DevExpress ASPxGridView v23.2, tema Aqua, CSS inline override.

---

## File coinvolti

| Operazione | File |
|---|---|
| Modify | `OlympiaIntranet/ScostamentoPerformance.aspx` |

Nessun file creato. Nessun file di test (il progetto non ha suite di test — verifica visiva via IIS Express).

---

### Task 1: Tema Aqua e scroll orizzontale

Modificare gli attributi radice di `gvScostamentoPerformance` per cambiare tema e abilitare lo scroll orizzontale.

**Files:**
- Modify: `OlympiaIntranet/ScostamentoPerformance.aspx:64-77`

- [ ] **Step 1: Cambiare Theme da Office2010Blue ad Aqua**

Nel tag di apertura `<dx:ASPxGridView ID="gvScostamentoPerformance"` alla riga 64, sostituire:
```xml
Theme="Office2010Blue"
```
con:
```xml
Theme="Aqua"
```

- [ ] **Step 2: Aggiungere HorizontalScrollBarMode al blocco Settings**

Sostituire il blocco `<Settings ... />` esistente (riga 77):
```xml
<Settings ShowFilterRow="True" ShowHeaderFilterButton="True" ShowFilterBar="Visible" VerticalScrollBarMode="Visible" VerticalScrollableHeight="750" />
```
con:
```xml
<Settings ShowFilterRow="True" ShowHeaderFilterButton="True" ShowFilterBar="Visible" VerticalScrollBarMode="Visible" VerticalScrollableHeight="750" HorizontalScrollBarMode="Visible" />
```

- [ ] **Step 3: Verifica rapida in Visual Studio**

Aprire il file in VS2022 e controllare che non ci siano errori di markup (il designer dovrebbe caricare senza errori). Se `HorizontalScrollBarMode` non è un attributo valido su `<Settings>` per questa versione di DevExpress, rimuoverlo — lo scroll orizzontale verrà gestito dal CSS nel Task 3.

- [ ] **Step 4: Commit**

```bash
git add OlympiaIntranet/ScostamentoPerformance.aspx
git commit -m "style: change gvScostamentoPerformance theme to Aqua, enable horizontal scroll"
```

---

### Task 2: Colonne bloccate e larghezze in pixel fissi

Aggiornare ogni colonna: `Fixed="True"` sulle prime 4, larghezza in px su tutte.

**Files:**
- Modify: `OlympiaIntranet/ScostamentoPerformance.aspx:88-139`

- [ ] **Step 1: Bloccare la colonna Command (riga 88)**

Sostituire:
```xml
<dx:GridViewCommandColumn ShowEditButton="True" VisibleIndex="0" Width="50px" Caption=" " />
```
con:
```xml
<dx:GridViewCommandColumn ShowEditButton="True" VisibleIndex="0" Width="50px" Caption=" " Fixed="True" />
```

- [ ] **Step 2: Bloccare e fissare la colonna Gestore (riga 90)**

Sostituire:
```xml
<dx:GridViewDataTextColumn FieldName="Gestore" Caption="Gestore" VisibleIndex="2" ReadOnly="true" Width="6%" />
```
con:
```xml
<dx:GridViewDataTextColumn FieldName="Gestore" Caption="Gestore" VisibleIndex="2" ReadOnly="true" Width="90px" Fixed="True" />
```

- [ ] **Step 3: Bloccare e fissare la colonna Portafoglio (riga 91)**

Sostituire:
```xml
<dx:GridViewDataTextColumn FieldName="Portafoglio" Caption="Portafoglio" VisibleIndex="3" ReadOnly="true" Width="6%" />
```
con:
```xml
<dx:GridViewDataTextColumn FieldName="Portafoglio" Caption="Portafoglio" VisibleIndex="3" ReadOnly="true" Width="90px" Fixed="True" />
```

- [ ] **Step 4: Bloccare e fissare la colonna Intestazione (riga 92)**

Sostituire:
```xml
<dx:GridViewDataTextColumn FieldName="Intestazione" Caption="Intestazione" VisibleIndex="4" ReadOnly="true" Width="10%" />
```
con:
```xml
<dx:GridViewDataTextColumn FieldName="Intestazione" Caption="Intestazione" VisibleIndex="4" ReadOnly="true" Width="150px" Fixed="True" />
```

- [ ] **Step 5: Aggiornare larghezze delle colonne restanti**

Sostituire le colonne seguenti (solo attributo `Width`, nessun altro cambiamento):

```xml
<!-- Linea: 6% → 90px -->
<dx:GridViewDataTextColumn FieldName="Linea" Caption="Linea" VisibleIndex="5" ReadOnly="true" Width="90px" />

<!-- Patrimonio: 6% → 110px -->
<dx:GridViewDataTextColumn FieldName="Patrimonio" Caption="Patrimonio" VisibleIndex="6" ReadOnly="true" Width="110px">
    <PropertiesTextEdit DisplayFormatString="N0" />
</dx:GridViewDataTextColumn>

<!-- DataApertura: 5% → 90px -->
<dx:GridViewDataTextColumn FieldName="DataApertura" Caption="Data Ap." VisibleIndex="7" ReadOnly="true" Width="90px">
    <PropertiesTextEdit DisplayFormatString="dd/MM/yyyy" />
</dx:GridViewDataTextColumn>

<!-- PerfTWRPtf: 4% → 85px -->
<dx:GridViewDataTextColumn FieldName="PerfTWRPtf" Caption="TWR Ptf" VisibleIndex="8" ReadOnly="true" Width="85px">
    <PropertiesTextEdit DisplayFormatString="N2" />
</dx:GridViewDataTextColumn>

<!-- PerfTWRLinea: 5% → 95px -->
<dx:GridViewDataTextColumn FieldName="PerfTWRLinea" Caption="TWR Linea" VisibleIndex="9" ReadOnly="true" Width="95px">
    <PropertiesTextEdit DisplayFormatString="N2" />
</dx:GridViewDataTextColumn>

<!-- DeltaTWR: 4% → 80px -->
<dx:GridViewDataTextColumn FieldName="DeltaTWR" Caption="Delta" VisibleIndex="10" ReadOnly="true" Width="80px">
    <PropertiesTextEdit DisplayFormatString="N2" />
</dx:GridViewDataTextColumn>

<!-- Benchmark: 4% → 90px -->
<dx:GridViewDataTextColumn FieldName="Benchmark" Caption="Benchmark" VisibleIndex="10" ReadOnly="true" Width="90px">
    <PropertiesTextEdit DisplayFormatString="N2" />
</dx:GridViewDataTextColumn>

<!-- Apporti: 5% → 95px -->
<dx:GridViewDataTextColumn FieldName="Apporti" Caption="Apporti" VisibleIndex="11" ReadOnly="true" Width="95px">
    <PropertiesTextEdit DisplayFormatString="N0" />
</dx:GridViewDataTextColumn>

<!-- Prelievi: 5% → 95px -->
<dx:GridViewDataTextColumn FieldName="Prelievi" Caption="Prelievi" VisibleIndex="12" ReadOnly="true" Width="95px">
    <PropertiesTextEdit DisplayFormatString="N0" />
</dx:GridViewDataTextColumn>

<!-- Addebiti: 5% → 95px -->
<dx:GridViewDataTextColumn FieldName="Addebiti" Caption="Addebiti" VisibleIndex="13" ReadOnly="true" Width="95px">
    <PropertiesTextEdit DisplayFormatString="N0" />
</dx:GridViewDataTextColumn>

<!-- Commento: 16% → 210px -->
<dx:GridViewDataComboBoxColumn FieldName="Commento" Caption="Commento" VisibleIndex="14" Width="210px">
    <!-- PropertiesComboBox invariato -->
</dx:GridViewDataComboBoxColumn>

<!-- Note: 12% → 170px -->
<dx:GridViewDataMemoColumn FieldName="Note" Caption="Note" VisibleIndex="14" Width="170px">
    <PropertiesMemoEdit Rows="3" />
</dx:GridViewDataMemoColumn>

<!-- BloccoCommento: 3% → 60px -->
<dx:GridViewDataCheckColumn FieldName="BloccoCommento" Caption="Blocco" VisibleIndex="15" Width="60px" />
```

- [ ] **Step 6: Commit**

```bash
git add OlympiaIntranet/ScostamentoPerformance.aspx
git commit -m "style: fix column widths to px and freeze Gestore/Portafoglio/Intestazione columns"
```

---

### Task 3: CSS override nel blocco `<head>`

Aggiungere gli stili inline che correggono padding, bordo inferiore, filter bar e separatore colonne bloccate.

**Files:**
- Modify: `OlympiaIntranet/ScostamentoPerformance.aspx:10-12`

- [ ] **Step 1: Aggiungere il blocco CSS dopo lo stile esistente**

Il blocco `<style>` attuale (righe 10–12) contiene:
```html
<style>
    html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; }
</style>
```

Sostituirlo con:
```html
<style>
    html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; }

    /* Padding celle griglia */
    .dxgvDataRow_Aqua td,
    .dxgvDataRow_Aqua td.dxgvTD_Aqua {
        padding: 6px 8px !important;
    }

    /* Bordo inferiore griglia */
    .dxgvControl_Aqua {
        border-bottom: 2px solid #4a90d9 !important;
    }

    /* Filter bar ("Crea Filtro") visibile */
    .dxgvFilterBar_Aqua {
        background-color: #e0f0fb !important;
        border-top: 1px solid #b0cfe8 !important;
        color: #1a6bb5 !important;
    }

    /* Separatore visivo tra colonne bloccate e scorrevoli */
    .dxgvFixedColumnLeftDivider_Aqua {
        border-right: 2px solid #2a6fb0 !important;
    }
</style>
```

> **Nota:** I selettori CSS usano i nomi di classe generati da DevExpress per il tema Aqua. Se a runtime le classi effettive differiscono (verificabile con DevTools del browser → Inspect sull'elemento griglia), aggiornare i selettori con quelli reali. Il pattern è sempre `dxgv<Elemento>_<Tema>`.

- [ ] **Step 2: Verifica visiva in IIS Express**

Avviare il progetto (F5 in VS2022), navigare a `ScostamentoPerformance.aspx` e controllare:
- ✅ Header griglia in blu Aqua (coerente con il form filtri sopra)
- ✅ Colonne Gestore/Portafoglio/Intestazione restano visibili durante lo scroll orizzontale
- ✅ Celle con padding sufficiente (non schiacciate)
- ✅ Bordo inferiore della griglia visibile
- ✅ "Crea Filtro" (filter bar) con sfondo azzurro chiaro e testo leggibile

Se uno o più CSS override non producono effetto, aprire DevTools (F12), ispezionare l'elemento e trovare il selettore corretto generato da DevExpress, quindi aggiornarlo nel markup.

- [ ] **Step 3: Commit finale**

```bash
git add OlympiaIntranet/ScostamentoPerformance.aspx
git commit -m "style: add CSS overrides for Aqua theme — padding, bottom border, filter bar, fixed column divider"
```

---

### Task 4: Push su remote

- [ ] **Step 1: Push su Gitea**

```bash
git push origin master
```

Verifica su `https://git.smart-roots.net/glicciardello/OlympiaIntranet` che i 3 commit siano visibili nel branch `master`.