Plan: add AlertHub-style sidebar layout to frontend refactor

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

docs/plan-mailbox-scanning.md

@@ -21,25 +21,74 @@ Microsoft Graph dekt dit slechts gedeeltelijk (vooral folder-permissies). De vol
 
 ## 2. Layout-wijzigingen frontend
 
-Huidige website is volledig op SharePoint gemodelleerd (één scanflow, één resultaattabel). Voorstel:
+Huidige website is volledig op SharePoint gemodelleerd (één scanflow, één resultaattabel) en bestaat uit één lange single-page met alle panels (Tenants, Start New Scan, Scan Jobs, Job Details) onder elkaar. Voorstel: opsplitsen in pagina's met een **vaste linker zijbalk** zoals AlertHub gebruikt.
 
-**a. Scan-type keuze in "Start New Scan"**
+**a. Sidebar-layout (geïnspireerd op AlertHub)**
-- Tabs of segmented control bovenaan: **SharePoint Sites** / **Mailboxes**
-- Bij Mailboxes verandert het invoerveld: één UPN/email per regel (geen "skip default sites")
-- CSV-import: extra accept-formaat (kolom `UserPrincipalName` / `Email` / `Mailbox`)
 
-**b. Jobs-tabel**
+Vaste zijbalk links (~200px, donkere achtergrond, logo bovenaan, account-blok onderaan):
+
+```
+┌────────────┬──────────────────────────────────┐
+│ Clearview  │                                  │
+│ ─────────  │  (page content)                  │
+│ Dashboard  │                                  │
+│ Scan Jobs  │                                  │
+│ ─────────  │                                  │
+│ SharePoint │                                  │
+│   New Scan │                                  │
+│ Mailboxes  │                                  │
+│   New Scan │                                  │
+│ ─────────  │                                  │
+│ Tenants    │                                  │
+│ Settings   │                                  │
+│ ─────────  │                                  │
+│ Manual     │                                  │
+│ Changelog  │                                  │
+│ ─────────  │                                  │
+│ [account]  │                                  │
+└────────────┴──────────────────────────────────┘
+```
+
+Items:
+- **Dashboard** — hero/KPI's (Tenants, Jobs, Active Jobs) — huidige `hero` sectie
+- **Scan Jobs** — gecombineerde lijst van alle jobs (filter op type/tenant) + Job Details als detail-view (klik op job → toont onder lijst óf als aparte route)
+- **SharePoint → New Scan** — formulier alleen voor SharePoint-scans (URLs / CSV)
+- **Mailboxes → New Scan** — formulier alleen voor mailbox-scans (UPNs / CSV)
+- **Tenants** — huidige tenants-panel
+- **Settings** — placeholder voor toekomstige instellingen (timeouts, env-overrides als die exposed worden)
+- **Manual** / **Changelog** — statische docs als die online beschikbaar moeten komen
+- Account-blok onderaan: huidige sessie / build-versie
+
+Implementatie blijft **vanilla HTML/JS/CSS** (geen React-introductie — dat zou een grote scope-uitbreiding zijn). Concreet:
+- `index.html` houdt alle secties als `<section data-route="...">`, default verborgen
+- Hash-based routing in `app.js` (`#/jobs`, `#/scan/sharepoint`, `#/scan/mailbox`, `#/tenants`, …)
+- `styles.css` krijgt grid-layout met sidebar + content area
+- Geen page reloads; navigatie wisselt zichtbaarheid van secties en update active-state in de sidebar
+
+Voordelen tegenover de huidige single-scroll:
+- Scan-typen visueel gescheiden — voorkomt verwarring tussen SharePoint- en Mailbox-formulieren
+- Schaalt naar meer scan-types (OneDrive, Teams) zonder dat de pagina nóg langer wordt
+- Visuele consistentie met AlertHub binnen jouw productenfamilie
+
+**b. Scan-formulier per type (gescheiden pagina's)**
+- SharePoint-pagina: huidige URLs/CSV-formulier, ongewijzigd qua velden
+- Mailbox-pagina: invoerveld voor UPN/email (één per regel), géén "skip default sites"
+- CSV-import per pagina, met geschikte kolomdetectie (`URL`/`Site URL` versus `UserPrincipalName`/`Email`/`Mailbox`)
+
+**c. Jobs-pagina**
+- Gecombineerde tabel met alle jobs ongeacht type
 - Nieuwe kolom **Type** (SharePoint / Mailbox)
 - Tenant-filter blijft, extra filter op type
+- Klik op een job opent de detail-view (sectie eronder of dedicated route `#/jobs/{id}`)
 
-**c. Job Details panel**
+**d. Job Details (binnen Jobs-pagina)**
 - Sectie heading wordt dynamisch: "Targets" blijft, maar URL-kolom wordt "Mailbox" voor mailbox-jobs
 - Permission Deviations tabel krijgt voor mailbox-jobs andere kolommen:
   - Mailbox · Folder (leeg voor mailbox-level) · Permission Type (FullAccess/SendAs/SendOnBehalf/Folder) · Principal · Access Rights
 - SharingLinks-blok wordt verborgen voor mailbox-jobs
 - Site-filter wordt mailbox-filter
 
-**d. Tenants-panel**
+**e. Tenants-pagina**
 - In de onboarding-instructies een extra stap erbij: API permission `Office 365 Exchange Online → Exchange.ManageAsApp` + role `Exchange Administrator` toekennen aan de service principal. Voor de geautomatiseerde flow betekent dit een extra Graph-call (rol-toekenning kan niet altijd, dus mogelijk handmatige stap).
 - Statuskolom `Auth` toont al cert/secret; voorstel: extra capability-badge per tenant (`SP`, `EXO`) zodat zichtbaar is welke scans mogelijk zijn.
 
@@ -104,11 +153,12 @@ Nieuwe response-velden in `ScanJobDetail`: `scan_type`, en deviations krijgen `p
 
 1. Backend refactor: scanner-module opsplitsen, geen functionele wijziging (groen test)
 2. Datamodel: `scan_type` + `permission_type` toevoegen, default `'sharepoint'`
-3. Mailbox-scanner: PS-scripts + Python-wrapper + dispatcher; alleen via API testbaar
+3. Frontend layout-refactor: sidebar + hash-routing introduceren, bestaande functionaliteit (alleen SharePoint) verdelen over pagina's. Nog géén mailbox-UI.
-4. API: scan-job creatie uitbreiden met `scan_type`/`mailboxes`
+4. Mailbox-scanner: PS-scripts + Python-wrapper + dispatcher; alleen via API testbaar
-5. Frontend: scan-type segment in formulier + dynamische kolommen in details
+5. API: scan-job creatie uitbreiden met `scan_type`/`mailboxes`
-6. Onboarding-tekst en build (Dockerfile voor `pwsh`)
+6. Frontend: Mailboxes-pagina toevoegen + dynamische kolommen in Job Details
-7. Documentatie: TECHNICAL.md + changelog-develop.md
+7. Onboarding-tekst en build (Dockerfile voor `pwsh`)
+8. Documentatie: TECHNICAL.md + changelog-develop.md
 
 ## Open vragen