Implement router provisioning lifecycle and deployment UI

2026-05-06 10:22:21 +01:00
parent 20a0dbe794
commit 90bfc090bd
21 changed files with 1380 additions and 268 deletions
@@ -0,0 +1,59 @@
+import {
+  Activity,
+  LayoutDashboard,
+  Router,
+  Server,
+  Settings,
+  Shield,
+} from "lucide-react";
+
+type Props = {
+  page: string;
+  onPageChange: (page: string) => void;
+};
+
+export function Sidebar({ page, onPageChange }: Props) {
+  return (
+    <aside className="sidebar">
+      <div className="brand">
+        <img className="brand-logo" src="/src/assets/lr-logo.png" alt="LitoralRegas" />
+        <div>
+          <strong>OpenVPN Tool</strong>
+        </div>
+      </div>
+
+      <nav>
+        <button className={page === "dashboard" ? "active" : ""} onClick={() => onPageChange("dashboard")}>
+          <LayoutDashboard size={18} /> Dashboard
+        </button>
+
+        <button className={page === "routers" ? "active" : ""} onClick={() => onPageChange("routers")}>
+          <Router size={18} /> Routers
+        </button>
+
+        <button className={page === "clients" ? "active" : ""} onClick={() => onPageChange("clients")}>
+          <Shield size={18} /> OpenVPN Clients
+        </button>
+
+        <button className={page === "deployments" ? "active" : ""} onClick={() => onPageChange("deployments")}>
+          <Activity size={18} /> Deployments
+        </button>
+
+        <button className={page === "servers" ? "active" : ""} onClick={() => onPageChange("servers")}>
+          <Server size={18} /> VPS Servers
+        </button>
+
+        <button className={page === "settings" ? "active" : ""} onClick={() => onPageChange("settings")}>
+          <Settings size={18} /> Settings
+        </button>
+      </nav>
+
+      <div className="status-card">
+        <strong>OpenVPN Status</strong>
+        <p>
+          <span className="dot" /> Online
+        </p>
+      </div>
+    </aside>
+  );
+}