NetMapper2026/frontend/src/App.tsx

import { useState } from 'react';
import { InventoryPage } from './pages/InventoryPage';
import './app-shell.css';

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: 'Roadmap e link a Gitea per lo sviluppo.' },
];

function ShellCard({ title, children, tone = 'default' }: { title: string; children: React.ReactNode; tone?: 'default' | 'accent' | 'warning' }) {
  return (
    <section className={`shell-card ${tone}`}>
      <div className="shell-card-header">
        <h3>{title}</h3>
      </div>
      <div className="shell-card-body">{children}</div>
    </section>
  );
}

function OverviewTab() {
  return (
    <div className="shell-grid">
      <ShellCard title="Workspace status" tone="accent">
        <ul className="shell-list">
          <li>Frontend inventory collegato al backend.</li>
          <li>Tree gerarchico e context panel attivi.</li>
          <li>Navigazione tra parent, children e relazioni disponibile.</li>
        </ul>
      </ShellCard>
      <ShellCard title="Milestone attive">
        <ul className="shell-list">
          <li>Reintegro layout persistente completato.</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>I moduli servizi confluiranno nel menu Options.</li>
          <li>L'accesso dovrà essere autenticato prima delle integrazioni remote.</li>
          <li>Serve hardening progressivo di sessione e permessi.</li>
        </ul>
      </ShellCard>
    </div>
  );
}

function DiscoveryTab() {
  return (
    <div className="shell-grid two-columns">
      <ShellCard title="Discovery pipeline">
        <ul className="shell-list">
          <li>Seed scan subnet.</li>
          <li>Classificazione host e object binding.</li>
          <li>Correlazione con relazioni inventory.</li>
        </ul>
      </ShellCard>
      <ShellCard title="Job queue / WIP">
        <ul className="shell-list">
          <li>SNMP collector — WIP.</li>
          <li>LLDP ingestion — WIP.</li>
          <li>Port mapping inference — WIP.</li>
        </ul>
      </ShellCard>
    </div>
  );
}

function TopologyTab() {
  return (
    <div className="shell-grid two-columns">
      <ShellCard title="Topology roadmap">
        <ul className="shell-list">
          <li>Vista fisica dispositivi.</li>
          <li>Vista logica host / VM / container / app.</li>
          <li>Layer networking e dipendenze.</li>
        </ul>
      </ShellCard>
      <ShellCard title="Planned interactions">
        <ul className="shell-list">
          <li>Drag & drop dei contenitori.</li>
          <li>Link fisici e logici cliccabili.</li>
          <li>Focus node e highlight dei vicini.</li>
        </ul>
      </ShellCard>
    </div>
  );
}

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">
      <ShellCard title="Roadmap" tone="accent">
        <ul className="shell-list">
          <li>La roadmap è centralizzata su Gitea: issues, milestone e board.</li>
          <li>I WIP visibili sono rimossi dal frontend per evitare rumore.</li>
          <li>Le card di Overview riportano solo milestone attive, non backlog.</li>
        </ul>
      </ShellCard>
      <ShellCard title="Gitea link">
        <ul className="shell-list">
          <li>Issues aperte, board e roadmap del progetto NetMapper.</li>
          <li>Link placeholder: <code>https://git.lelekaos.com/admin/NetMapper2026/issues</code></li>
          <li>Da integrare in futuro con widget o embed della board.</li>
        </ul>
      </ShellCard>
    </div>
  );
}

function App() {
  const [activeTab, setActiveTab] = useState<TabKey>('inventory');
  const currentTab = tabs.find((tab) => tab.key === activeTab)!;

  return (
    <div className="app-shell">
      <aside className="app-sidebar">
        <div className="app-brand">
          <div className="app-brand-mark">NM</div>
          <div>
            <h1>NetMapper</h1>
            <p>Homelab workspace</p>
          </div>
        </div>

        <nav className="app-nav">
          {tabs.map((tab) => (
            <button
              key={tab.key}
              className={`app-nav-item ${activeTab === tab.key ? 'active' : ''}`}
              onClick={() => setActiveTab(tab.key)}
            >
              <span>{tab.label}</span>
              <small>{tab.label === 'WIP' ? 'Roadmap e link a Gitea per lo sviluppo.' : tab.description}</small>
            </button>
          ))}
        </nav>

        <div className="app-sidebar-footer">
          <span className="shell-pill">MVP</span>
          <span className="shell-pill">Inventory online</span>
          <span className="shell-pill">Options added</span>
        </div>
      </aside>

      <main className="app-main">
        <header className="app-header">
          <div>
            <h2>{currentTab.label}</h2>
            <p>{currentTab.label === 'WIP' ? 'Roadmap e link a Gitea per lo sviluppo.' : currentTab.description}</p>
          </div>
          <div className="app-header-actions">
            <span className="shell-pill">Book of truth</span>
            <span className="shell-pill">Auth roadmap</span>
          </div>
        </header>

        <section style={{ display: activeTab === 'overview' ? 'block' : 'none' }}>
          <OverviewTab />
        </section>
        <section style={{ display: activeTab === 'inventory' ? 'block' : 'none' }}>
          <InventoryPage />
        </section>
        <section style={{ display: activeTab === 'discovery' ? 'block' : 'none' }}>
          <DiscoveryTab />
        </section>
        <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>
      </main>
    </div>
  );
}

export default App;