feat: build OpenVPN operations dashboard and VPS management UI

src/components/Sidebar.tsx

@@ -7,51 +7,95 @@ import {
   Shield,
 } from "lucide-react";
 
+type OpenVpnStatus = "online" | "degraded" | "offline" | "checking";
+
 type Props = {
   page: string;
   onPageChange: (page: string) => void;
+  openVpnStatus?: OpenVpnStatus;
 };
 
-export function Sidebar({ page, onPageChange }: Props) {
+export function Sidebar({
+  page,
+  onPageChange,
+  openVpnStatus = "checking",
+}: Props) {
+  const statusLabel = {
+    online: "Online",
+    degraded: "Degradado",
+    offline: "Offline",
+    checking: "A verificar...",
+  }[openVpnStatus];
+
   return (
     <aside className="sidebar">
       <div className="brand">
-        <img className="brand-logo" src="/src/assets/lr-logo.png" alt="LitoralRegas" />
+        <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
+          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
+          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
+          className={page === "clients" ? "active" : ""}
+          onClick={() => onPageChange("clients")}
+        >
+          <Shield size={18} />
+          Clientes OpenVPN
         </button>
 
-        <button className={page === "deployments" ? "active" : ""} onClick={() => onPageChange("deployments")}>
-          <Activity size={18} /> Deployments
+        <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
+          className={page === "servers" ? "active" : ""}
+          onClick={() => onPageChange("servers")}
+        >
+          <Server size={18} />
+          Servidor VPS
         </button>
 
-        <button className={page === "settings" ? "active" : ""} onClick={() => onPageChange("settings")}>
-          <Settings size={18} /> Settings
+        <button
+          className={page === "settings" ? "active" : ""}
+          onClick={() => onPageChange("settings")}
+        >
+          <Settings size={18} />
+          Definições
         </button>
       </nav>
 
       <div className="status-card">
-        <strong>OpenVPN Status</strong>
+        <strong>Estado OpenVPN</strong>
+
         <p>
-          <span className="dot" /> Online
+          <span className={`dot ${openVpnStatus}`} /> {statusLabel}
         </p>
       </div>
     </aside>