Add options section and security roadmap to app shell

frontend/src/App.tsx

@@ -2,13 +2,14 @@ import { useState } from 'react';
 import { InventoryPage } from './pages/InventoryPage';
 import './app-shell.css';
 
-type TabKey = 'overview' | 'inventory' | 'discovery' | 'topology' | 'wip';
+type TabKey = 'overview' | 'inventory' | 'discovery' | 'topology' | 'options' | 'wip';
 
 const tabs: { key: TabKey; label: string; description: string }[] = [
   { key: 'overview', label: 'Overview', description: 'Stato generale del workspace NetMapper.' },
   { key: 'inventory', label: 'Inventory', description: 'Tree fisico/logico e navigazione tra oggetti.' },
   { key: 'discovery', label: 'Discovery', description: 'Pipeline e job di raccolta dati.' },
   { key: 'topology', label: 'Topology', description: 'Vista futura della mappa multilivello.' },
+  { key: 'options', label: 'Options', description: 'Utenti, impostazioni, servizi di sistema e sicurezza.' },
   { key: 'wip', label: 'WIP', description: 'Blocchi provvisori, note e parti in corso.' },
 ];
 
@@ -35,16 +36,16 @@ function OverviewTab() {
       </ShellCard>
       <ShellCard title="Milestone attive">
         <ul className="shell-list">
-          <li>Reintegro layout persistente.</li>
+          <li>Reintegro layout persistente completato.</li>
-          <li>Tab dedicate per viste future.</li>
+          <li>Roadmap di security e options introdotta.</li>
           <li>Preparazione vista topology multilivello.</li>
         </ul>
       </ShellCard>
       <ShellCard title="Quick notes" tone="warning">
         <ul className="shell-list">
-          <li>La discovery avanzata è ancora in fase iniziale.</li>
+          <li>I moduli servizi confluiranno nel menu Options.</li>
-          <li>I badge e il contesto nodo sono MVP, non finali.</li>
+          <li>L'accesso dovrà essere autenticato prima delle integrazioni remote.</li>
-          <li>Serve reintegro progressivo delle sezioni storiche.</li>
+          <li>Serve hardening progressivo di sessione e permessi.</li>
         </ul>
       </ShellCard>
     </div>
@@ -93,6 +94,72 @@ function TopologyTab() {
   );
 }
 
+function OptionsTab() {
+  return (
+    <div className="shell-stack">
+      <div className="shell-grid two-columns">
+        <ShellCard title="User management" tone="accent">
+          <ul className="shell-list">
+            <li>Utenti locali e ruoli applicativi.</li>
+            <li>Disattivazione account inattivi o non più autorizzati.</li>
+            <li>Storico accessi e audit trail amministrativo.</li>
+          </ul>
+        </ShellCard>
+        <ShellCard title="System settings">
+          <ul className="shell-list">
+            <li>Parametri workspace e branding dell'istanza.</li>
+            <li>Configurazione discovery, inventory e policy future.</li>
+            <li>Feature flags per moduli sperimentali.</li>
+          </ul>
+        </ShellCard>
+      </div>
+
+      <div className="shell-grid two-columns">
+        <ShellCard title="Services backlog">
+          <ul className="shell-list">
+            <li>La sezione Servizi viene assorbita nel menu Options.</li>
+            <li>Qui confluiranno terminale remoto, job runner e integrazioni di sistema.</li>
+            <li>Ogni funzione sensibile dovrà essere protetta da permessi espliciti.</li>
+          </ul>
+        </ShellCard>
+        <ShellCard title="Security roadmap" tone="warning">
+          <ul className="shell-list">
+            <li>Login obbligatorio per tutte le viste non pubbliche.</li>
+            <li>MFA per admin e per funzioni ad alto impatto.</li>
+            <li>Controlli server-side su ogni richiesta, deny-by-default e audit centralizzato.</li>
+          </ul>
+        </ShellCard>
+      </div>
+
+      <ShellCard title="Book of truth guardrails">
+        <div className="options-roadmap">
+          <div className="options-roadmap-item">
+            <span className="options-step">1</span>
+            <div>
+              <strong>Authentication foundation</strong>
+              <p>Sessioni sicure, logout reale, protezione delle rotte e bootstrap identità all'avvio.</p>
+            </div>
+          </div>
+          <div className="options-roadmap-item">
+            <span className="options-step">2</span>
+            <div>
+              <strong>Authorization model</strong>
+              <p>Ruoli base, policy per risorse sensibili e blocco di azioni per utenti non autorizzati.</p>
+            </div>
+          </div>
+          <div className="options-roadmap-item">
+            <span className="options-step">3</span>
+            <div>
+              <strong>Remote access hardening</strong>
+              <p>Prima di un modulo tipo Termix: MFA, audit, approvazione esplicita e tracciamento comandi.</p>
+            </div>
+          </div>
+        </div>
+      </ShellCard>
+    </div>
+  );
+}
+
 function WipTab() {
   return (
     <div className="shell-grid two-columns">
@@ -105,8 +172,8 @@ function WipTab() {
       </ShellCard>
       <ShellCard title="Note operative">
         <ul className="shell-list">
-          <li>Non rimuovere più la shell quando si aggiungono nuove viste.</li>
+          <li>Le nuove funzioni sensibili passano da Options.</li>
-          <li>Le nuove sezioni devono entrare come tab del workspace.</li>
+          <li>Inventory resta il book of truth, ma protetto da auth futura.</li>
           <li>Persistenza dello stato UI da migliorare nei prossimi step.</li>
         </ul>
       </ShellCard>
@@ -145,7 +212,7 @@ function App() {
         <div className="app-sidebar-footer">
           <span className="shell-pill">MVP</span>
           <span className="shell-pill">Inventory online</span>
-          <span className="shell-pill">WIP restored</span>
+          <span className="shell-pill">Options added</span>
         </div>
       </aside>
 
@@ -156,8 +223,8 @@ function App() {
             <p>{currentTab.description}</p>
           </div>
           <div className="app-header-actions">
-            <span className="shell-pill">LXC ready</span>
+            <span className="shell-pill">Book of truth</span>
-            <span className="shell-pill">Docker-ready base</span>
+            <span className="shell-pill">Auth roadmap</span>
           </div>
         </header>
 
@@ -173,6 +240,9 @@ function App() {
         <section style={{ display: activeTab === 'topology' ? 'block' : 'none' }}>
           <TopologyTab />
         </section>
+        <section style={{ display: activeTab === 'options' ? 'block' : 'none' }}>
+          <OptionsTab />
+        </section>
         <section style={{ display: activeTab === 'wip' ? 'block' : 'none' }}>
           <WipTab />
         </section>

frontend/src/app-shell.css

@@ -126,6 +126,11 @@ body {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.shell-stack {
+  display: grid;
+  gap: 16px;
+}
+
 .shell-card {
   background: rgba(17, 24, 39, 0.88);
   border: 1px solid rgba(255,255,255,0.08);
@@ -153,6 +158,38 @@ body {
   color: #cbd5e1;
 }
 
+.options-roadmap {
+  display: grid;
+  gap: 12px;
+}
+
+.options-roadmap-item {
+  display: grid;
+  grid-template-columns: 40px minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+  padding: 12px;
+  border-radius: 12px;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.06);
+}
+
+.options-roadmap-item p {
+  margin: 6px 0 0;
+  color: #94a3b8;
+}
+
+.options-step {
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: rgba(37, 99, 235, 0.18);
+  color: #bfdbfe;
+  font-weight: 700;
+}
+
 @media (max-width: 1100px) {
   .app-shell {
     grid-template-columns: 1fr;