Add basic frontend: sidebar, views and inventory table

2026-08-03 22:06:00 +00:00
parent 00ecb1862d
commit 871f4d0547
11 changed files with 373 additions and 1 deletions
@@ -0,0 +1,14 @@
+import { AppLayout } from '../components/AppLayout';
+
+export function DiscoveryJobsView() {
+  return (
+    <AppLayout current="discovery" onNavigate={() => {}}>
+      <header className="header">
+        <h1 className="page-title">Discovery Jobs</h1>
+      </header>
+      <div className="card">
+        <p className="empty">Job di discovery: prossima implementazione.</p>
+      </div>
+    </AppLayout>
+  );
+}
@@ -0,0 +1,14 @@
+import { AppLayout } from '../components/AppLayout';
+
+export function IPsView() {
+  return (
+    <AppLayout current="ips" onNavigate={() => {}}>
+      <header className="header">
+        <h1 className="page-title">IPs</h1>
+      </header>
+      <div className="card">
+        <p className="empty">Registro IP: prossima implementazione.</p>
+      </div>
+    </AppLayout>
+  );
+}
@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import { AppLayout } from '../components/AppLayout';
+import { fetchObjects } from '../lib/api';
+
+export function InventoryView() {
+  const [objects, setObjects] = useState<Awaited<ReturnType<typeof fetchObjects>>>([]);
+
+  useEffect(() => {
+    fetchObjects().then(setObjects);
+  }, []);
+
+  return (
+    <AppLayout current="inventory" onNavigate={() => {}}>
+      <header className="header">
+        <h1 className="page-title">Inventory</h1>
+      </header>
+      <div className="card">
+        <table className="table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Vendor</th>
+              <th>Model</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {objects.length === 0 && (
+              <tr>
+                <td colSpan={5} className="empty">Nessun oggetto</td>
+              </tr>
+            )}
+            {objects.map(o => (
+              <tr key={o.id}>
+                <td>{o.name}</td>
+                <td>{o.type}</td>
+                <td>{o.vendor ?? '-'}</td>
+                <td>{o.model ?? '-'}</td>
+                <td>{o.status ?? '-'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </AppLayout>
+  );
+}
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { AppLayout } from '../components/AppLayout';
+import type { ViewKey } from '../types';
+import { fetchObjects } from '../lib/api';
+
+export function TopologyView() {
+  const [objects, setObjects] = useState<Awaited<ReturnType<typeof fetchObjects>>>([]);
+
+  useState(() => {
+    fetchObjects().then(setObjects);
+  });
+
+  return (
+    <AppLayout current="topology" onNavigate={() => {}}>
+      <header className="header">
+        <h1 className="page-title">Topology</h1>
+      </header>
+      <div className="card">
+        <p className="empty">Vista topologia: prossima implementazione (grafo/annidamento).</p>
+        <div style={{ marginTop: '1rem' }}>
+          <strong>Oggetti mockati:</strong>
+          <pre style={{ marginTop: '0.5rem', fontSize: '0.85rem' }}>
+            {JSON.stringify(objects, null, 2)}
+          </pre>
+        </div>
+      </div>
+    </AppLayout>
+  );
+}