From bfa28781097657c1668941ee8b8b3d9a410663ff Mon Sep 17 00:00:00 2001
From: Boris Cherepanov <cherr_guw@mail.ru>
Date: Fri, 3 Oct 2025 01:10:06 +0300
Subject: [PATCH] feat: added nav

---
 client/src/components/index.ts                |   1 +
 client/src/components/nav-menu/index.ts       |   1 +
 client/src/components/nav-menu/nav-menu.tsx   |  31 +++
 .../src/pages/certificates/certificates.tsx   |  52 ++++
 client/src/pages/certificates/index.ts        |   1 +
 client/src/pages/dashboard/dashboard.tsx      |  29 ++
 client/src/pages/dashboard/index.ts           |   1 +
 client/src/pages/home/home.tsx                | 254 +-----------------
 client/src/pages/home/utils.ts                |  26 ++
 .../pages/inbound-binding/inbound-binding.tsx |  55 ++++
 client/src/pages/inbound-binding/index.ts     |   1 +
 .../inbound-templates/inboud-templates.tsx    |  60 +++++
 client/src/pages/inbound-templates/index.ts   |   1 +
 client/src/pages/index.ts                     |   6 +
 client/src/pages/servers/index.ts             |   1 +
 client/src/pages/servers/servers.tsx          |  40 +++
 client/src/pages/users/index.ts               |   1 +
 client/src/pages/users/users.tsx              |  40 +++
 client/src/router/router.tsx                  |  18 +-
 19 files changed, 369 insertions(+), 250 deletions(-)
 create mode 100644 client/src/components/index.ts
 create mode 100644 client/src/components/nav-menu/index.ts
 create mode 100644 client/src/components/nav-menu/nav-menu.tsx
 create mode 100644 client/src/pages/certificates/certificates.tsx
 create mode 100644 client/src/pages/certificates/index.ts
 create mode 100644 client/src/pages/dashboard/dashboard.tsx
 create mode 100644 client/src/pages/dashboard/index.ts
 create mode 100644 client/src/pages/home/utils.ts
 create mode 100644 client/src/pages/inbound-binding/inbound-binding.tsx
 create mode 100644 client/src/pages/inbound-binding/index.ts
 create mode 100644 client/src/pages/inbound-templates/inboud-templates.tsx
 create mode 100644 client/src/pages/inbound-templates/index.ts
 create mode 100644 client/src/pages/servers/index.ts
 create mode 100644 client/src/pages/servers/servers.tsx
 create mode 100644 client/src/pages/users/index.ts
 create mode 100644 client/src/pages/users/users.tsx

diff --git a/client/src/components/index.ts b/client/src/components/index.ts
new file mode 100644
index 0000000..09b18cd
--- /dev/null
+++ b/client/src/components/index.ts
@@ -0,0 +1 @@
+export * from './nav-menu';
diff --git a/client/src/components/nav-menu/index.ts b/client/src/components/nav-menu/index.ts
new file mode 100644
index 0000000..09b18cd
--- /dev/null
+++ b/client/src/components/nav-menu/index.ts
@@ -0,0 +1 @@
+export * from './nav-menu';
diff --git a/client/src/components/nav-menu/nav-menu.tsx b/client/src/components/nav-menu/nav-menu.tsx
new file mode 100644
index 0000000..6cf62de
--- /dev/null
+++ b/client/src/components/nav-menu/nav-menu.tsx
@@ -0,0 +1,31 @@
+import { Link, useLocation } from 'react-router';
+import { clsx } from 'clsx';
+
+interface NavMenuItems {
+  href: string;
+  label: string;
+}
+
+interface NavMenuProps {
+  items: NavMenuItems[];
+}
+
+export const NavMenu = (props: NavMenuProps) => {
+  const { items } = props;
+  const { pathname } = useLocation();
+
+  return (
+    <div className="tabs">
+      {items.map(({ href, label }) => (
+        <Link
+          className={clsx('tab', {
+            active: href === pathname,
+          })}
+          to={href}
+        >
+          {label}
+        </Link>
+      ))}
+    </div>
+  );
+};
diff --git a/client/src/pages/certificates/certificates.tsx b/client/src/pages/certificates/certificates.tsx
new file mode 100644
index 0000000..c0f9a21
--- /dev/null
+++ b/client/src/pages/certificates/certificates.tsx
@@ -0,0 +1,52 @@
+import type { RouteObject } from 'react-router';
+
+export const Certificates = () => {
+  return (
+    <div id="certificates" className="tab-content active">
+      <div className="section">
+        <h2>Add Certificate</h2>
+        <form id="certificateForm">
+          <div className="form-group">
+            <label>Name:</label>
+            <input type="text" id="certName" required />
+          </div>
+          <div className="form-group">
+            <label>Domain:</label>
+            <input
+              type="text"
+              id="certDomain"
+              placeholder="example.com"
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label>Certificate Type:</label>
+            <select id="certType" required>
+              <option value="self_signed">Self-Signed</option>
+            </select>
+          </div>
+          <div className="form-group">
+            <label>
+              <input type="checkbox" id="certAutoRenew" checked /> Auto Renew
+            </label>
+          </div>
+          <button type="submit" className="btn btn-primary">
+            Generate Certificate
+          </button>
+        </form>
+      </div>
+
+      <div className="section">
+        <h2>Certificates List</h2>
+        <div id="certificatesList" className="loading">
+          Loading...
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const CertificatesRoute: RouteObject = {
+  path: '/certificates',
+  Component: Certificates,
+};
diff --git a/client/src/pages/certificates/index.ts b/client/src/pages/certificates/index.ts
new file mode 100644
index 0000000..05d91dd
--- /dev/null
+++ b/client/src/pages/certificates/index.ts
@@ -0,0 +1 @@
+export * from './certificates';
diff --git a/client/src/pages/dashboard/dashboard.tsx b/client/src/pages/dashboard/dashboard.tsx
new file mode 100644
index 0000000..becfeb0
--- /dev/null
+++ b/client/src/pages/dashboard/dashboard.tsx
@@ -0,0 +1,29 @@
+import type { RouteObject } from 'react-router';
+
+export const Dashboard = () => {
+  return (
+    <div id="dashboard" className="tab-content active">
+      <div className="section">
+        <h2>Statistics</h2>
+        <p>
+          Servers: <span id="serverCount">Loading...</span>
+        </p>
+        <p>
+          Templates: <span id="templateCount">Loading...</span>
+        </p>
+        <p>
+          Certificates: <span id="certCount">Loading...</span>
+        </p>
+        <p>
+          Users: <span id="userCount">Loading...</span>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export const DashboardRoute: RouteObject = {
+  index: true,
+  path: '/',
+  Component: Dashboard,
+};
diff --git a/client/src/pages/dashboard/index.ts b/client/src/pages/dashboard/index.ts
new file mode 100644
index 0000000..b58b6c9
--- /dev/null
+++ b/client/src/pages/dashboard/index.ts
@@ -0,0 +1 @@
+export * from './dashboard';
diff --git a/client/src/pages/home/home.tsx b/client/src/pages/home/home.tsx
index 2c226a8..f7dd629 100644
--- a/client/src/pages/home/home.tsx
+++ b/client/src/pages/home/home.tsx
@@ -1,5 +1,7 @@
 import { Outlet } from 'react-router';
 import './home.css';
+import { NavMenu } from '../../components/nav-menu/nav-menu';
+import { navItems } from './utils';
 
 export const Home = () => {
   return (
@@ -10,266 +12,21 @@ export const Home = () => {
         {/* <!-- Toast notifications container --> */}
         <div className="toast-container" id="toastContainer"></div>
 
-        <div className="tabs">
-          <div
-            className="tab active"
-            //   onClick="showTab('dashboard')"
-          >
-            Dashboard
-          </div>
-          <div
-            className="tab"
-            // onClick="showTab('servers')"
-          >
-            Servers
-          </div>
-          <div
-            className="tab"
-            //onClick="showTab('templates')"
-          >
-            Inbound Templates
-          </div>
-          <div
-            className="tab"
-            // onClick="showTab('certificates')"
-          >
-            Certificates
-          </div>
-          <div
-            className="tab"
-            // onClick="showTab('inbounds')"
-          >
-            Inbound Binding
-          </div>
-          <div
-            className="tab"
-            // onClick="showTab('users')"
-          >
-            Users
-          </div>
-        </div>
+        <NavMenu items={navItems} />
 
         {/* <!-- Dashboard --> */}
-        <div id="dashboard" className="tab-content active">
-          <div className="section">
-            <h2>Statistics</h2>
-            <p>
-              Servers: <span id="serverCount">Loading...</span>
-            </p>
-            <p>
-              Templates: <span id="templateCount">Loading...</span>
-            </p>
-            <p>
-              Certificates: <span id="certCount">Loading...</span>
-            </p>
-            <p>
-              Users: <span id="userCount">Loading...</span>
-            </p>
-          </div>
-        </div>
+
+        <Outlet />
 
         {/* <!-- Servers --> */}
-        <div id="servers" className="tab-content">
-          <div className="section">
-            <h2>Add Server</h2>
-            <form id="serverForm">
-              <div className="form-group">
-                <label>Name:</label>
-                <input type="text" id="serverName" required />
-              </div>
-              <div className="form-group">
-                <label>Hostname:</label>
-                <input type="text" id="serverHostname" required />
-              </div>
-              <div className="form-group">
-                <label>gRPC Port:</label>
-                <input type="number" id="serverPort" value="2053" />
-              </div>
-              <button type="submit" className="btn btn-primary">
-                Add Server
-              </button>
-            </form>
-          </div>
-
-          <div className="section">
-            <h2>Servers List</h2>
-            <div id="serversList" className="loading">
-              Loading...
-            </div>
-          </div>
-        </div>
 
         {/* <!-- Templates --> */}
-        <div id="templates" className="tab-content">
-          <div className="section">
-            <h2>Add Template</h2>
-            <form id="templateForm">
-              <div className="form-group">
-                <label>Name:</label>
-                <input type="text" id="templateName" required />
-              </div>
-              <div className="form-group">
-                <label>Protocol:</label>
-                <select id="templateProtocol" required>
-                  <option value="vless">VLESS</option>
-                  <option value="vmess">VMess</option>
-                  <option value="trojan">Trojan</option>
-                  <option value="shadowsocks">Shadowsocks</option>
-                </select>
-              </div>
-              <div className="form-group">
-                <label>Default Port:</label>
-                <input type="number" id="templatePort" value="443" required />
-              </div>
-              <div className="form-group">
-                <label>
-                  <input type="checkbox" id="templateTls" /> Requires TLS
-                </label>
-              </div>
-              <div className="form-group">
-                <label>Configuration Template:</label>
-                <textarea
-                  id="templateConfig"
-                  rows={6}
-                  style={{
-                    width: '300px',
-                  }}
-                ></textarea>
-              </div>
-              <button type="submit" className="btn btn-primary">
-                Add Template
-              </button>
-            </form>
-          </div>
-
-          <div className="section">
-            <h2>Templates List</h2>
-            <div id="templatesList" className="loading">
-              Loading...
-            </div>
-          </div>
-        </div>
 
         {/* <!-- Certificates --> */}
-        <div id="certificates" className="tab-content">
-          <div className="section">
-            <h2>Add Certificate</h2>
-            <form id="certificateForm">
-              <div className="form-group">
-                <label>Name:</label>
-                <input type="text" id="certName" required />
-              </div>
-              <div className="form-group">
-                <label>Domain:</label>
-                <input
-                  type="text"
-                  id="certDomain"
-                  placeholder="example.com"
-                  required
-                />
-              </div>
-              <div className="form-group">
-                <label>Certificate Type:</label>
-                <select id="certType" required>
-                  <option value="self_signed">Self-Signed</option>
-                </select>
-              </div>
-              <div className="form-group">
-                <label>
-                  <input type="checkbox" id="certAutoRenew" checked /> Auto
-                  Renew
-                </label>
-              </div>
-              <button type="submit" className="btn btn-primary">
-                Generate Certificate
-              </button>
-            </form>
-          </div>
-
-          <div className="section">
-            <h2>Certificates List</h2>
-            <div id="certificatesList" className="loading">
-              Loading...
-            </div>
-          </div>
-        </div>
 
         {/* <!-- Server Inbounds --> */}
-        <div id="inbounds" className="tab-content">
-          <div className="section">
-            <h2>Bind Template to Server</h2>
-            <form id="inboundForm">
-              <div className="form-group">
-                <label>Server:</label>
-                <select id="inboundServer" required>
-                  <option value="">Select Server...</option>
-                </select>
-              </div>
-              <div className="form-group">
-                <label>Template:</label>
-                <select id="inboundTemplate" required>
-                  <option value="">Select Template...</option>
-                </select>
-              </div>
-              <div className="form-group">
-                <label>Port:</label>
-                <input type="number" id="inboundPort" value="443" required />
-              </div>
-              <div className="form-group">
-                <label>Certificate:</label>
-                <select id="inboundCertificate">
-                  <option value="">No Certificate</option>
-                </select>
-              </div>
-              <div className="form-group">
-                <label>
-                  <input type="checkbox" id="inboundActive" checked /> Active
-                </label>
-              </div>
-              <button type="submit" className="btn btn-primary">
-                Bind Template
-              </button>
-            </form>
-          </div>
-
-          <div className="section">
-            <h2>Server Inbounds</h2>
-            <div id="inboundsList" className="loading">
-              Loading...
-            </div>
-          </div>
-        </div>
 
         {/* <!-- Users --> */}
-        <div id="users" className="tab-content">
-          <div className="section">
-            <h2>Add User</h2>
-            <form id="userForm">
-              <div className="form-group">
-                <label>Name:</label>
-                <input type="text" id="userName" required />
-              </div>
-              <div className="form-group">
-                <label>Comment:</label>
-                <input type="text" id="userComment" />
-              </div>
-              <div className="form-group">
-                <label>Telegram ID:</label>
-                <input type="number" id="userTelegram" />
-              </div>
-              <button type="submit" className="btn btn-primary">
-                Add User
-              </button>
-            </form>
-          </div>
-
-          <div className="section">
-            <h2>Users List</h2>
-            <div id="usersList" className="loading">
-              Loading...
-            </div>
-          </div>
-        </div>
       </div>
 
       {/* <!-- Modal dialogs --> */}
@@ -333,7 +90,6 @@ export const Home = () => {
           </div>
         </div>
       </div>
-      <Outlet />
     </div>
   );
 };
diff --git a/client/src/pages/home/utils.ts b/client/src/pages/home/utils.ts
new file mode 100644
index 0000000..394b3ad
--- /dev/null
+++ b/client/src/pages/home/utils.ts
@@ -0,0 +1,26 @@
+export const navItems = [
+  {
+    href: '/',
+    label: 'Dashboard',
+  },
+  {
+    href: '/servers',
+    label: 'Servers',
+  },
+  {
+    href: '/inbound-templates',
+    label: 'Inbound Templates',
+  },
+  {
+    href: '/certificates',
+    label: 'Certificates',
+  },
+  {
+    href: '/inbound-binding',
+    label: 'Inbound Binding',
+  },
+  {
+    href: '/users',
+    label: 'Users',
+  },
+];
diff --git a/client/src/pages/inbound-binding/inbound-binding.tsx b/client/src/pages/inbound-binding/inbound-binding.tsx
new file mode 100644
index 0000000..3459a80
--- /dev/null
+++ b/client/src/pages/inbound-binding/inbound-binding.tsx
@@ -0,0 +1,55 @@
+import type { RouteObject } from 'react-router';
+
+export const InboundBinding = () => {
+  return (
+    <div id="inbounds" className="tab-content active">
+      <div className="section">
+        <h2>Bind Template to Server</h2>
+        <form id="inboundForm">
+          <div className="form-group">
+            <label>Server:</label>
+            <select id="inboundServer" required>
+              <option value="">Select Server...</option>
+            </select>
+          </div>
+          <div className="form-group">
+            <label>Template:</label>
+            <select id="inboundTemplate" required>
+              <option value="">Select Template...</option>
+            </select>
+          </div>
+          <div className="form-group">
+            <label>Port:</label>
+            <input type="number" id="inboundPort" value="443" required />
+          </div>
+          <div className="form-group">
+            <label>Certificate:</label>
+            <select id="inboundCertificate">
+              <option value="">No Certificate</option>
+            </select>
+          </div>
+          <div className="form-group">
+            <label>
+              <input type="checkbox" id="inboundActive" checked /> Active
+            </label>
+          </div>
+          <button type="submit" className="btn btn-primary">
+            Bind Template
+          </button>
+        </form>
+      </div>
+
+      <div className="section">
+        <h2>Server Inbounds</h2>
+        <div id="inboundsList" className="loading">
+          Loading...
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const InboundBindingRoute: RouteObject = {
+  path: '/inbound-binding',
+  Component: InboundBinding,
+};
diff --git a/client/src/pages/inbound-binding/index.ts b/client/src/pages/inbound-binding/index.ts
new file mode 100644
index 0000000..8869d0b
--- /dev/null
+++ b/client/src/pages/inbound-binding/index.ts
@@ -0,0 +1 @@
+export * from './inbound-binding';
diff --git a/client/src/pages/inbound-templates/inboud-templates.tsx b/client/src/pages/inbound-templates/inboud-templates.tsx
new file mode 100644
index 0000000..160210f
--- /dev/null
+++ b/client/src/pages/inbound-templates/inboud-templates.tsx
@@ -0,0 +1,60 @@
+import type { RouteObject } from 'react-router';
+
+export const InboundTemplates = () => {
+  return (
+    <div id="templates" className="tab-content active">
+      <div className="section">
+        <h2>Add Template</h2>
+        <form id="templateForm">
+          <div className="form-group">
+            <label>Name:</label>
+            <input type="text" id="templateName" required />
+          </div>
+          <div className="form-group">
+            <label>Protocol:</label>
+            <select id="templateProtocol" required>
+              <option value="vless">VLESS</option>
+              <option value="vmess">VMess</option>
+              <option value="trojan">Trojan</option>
+              <option value="shadowsocks">Shadowsocks</option>
+            </select>
+          </div>
+          <div className="form-group">
+            <label>Default Port:</label>
+            <input type="number" id="templatePort" value="443" required />
+          </div>
+          <div className="form-group">
+            <label>
+              <input type="checkbox" id="templateTls" /> Requires TLS
+            </label>
+          </div>
+          <div className="form-group">
+            <label>Configuration Template:</label>
+            <textarea
+              id="templateConfig"
+              rows={6}
+              style={{
+                width: '300px',
+              }}
+            ></textarea>
+          </div>
+          <button type="submit" className="btn btn-primary">
+            Add Template
+          </button>
+        </form>
+      </div>
+
+      <div className="section">
+        <h2>Templates List</h2>
+        <div id="templatesList" className="loading">
+          Loading...
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const InboundTemplatesRoute: RouteObject = {
+  path: '/inbound-templates',
+  Component: InboundTemplates,
+};
diff --git a/client/src/pages/inbound-templates/index.ts b/client/src/pages/inbound-templates/index.ts
new file mode 100644
index 0000000..26ae699
--- /dev/null
+++ b/client/src/pages/inbound-templates/index.ts
@@ -0,0 +1 @@
+export * from './inboud-templates';
diff --git a/client/src/pages/index.ts b/client/src/pages/index.ts
index e20557b..326fd2c 100644
--- a/client/src/pages/index.ts
+++ b/client/src/pages/index.ts
@@ -1 +1,7 @@
 export * from './home';
+export * from './certificates';
+export * from './dashboard';
+export * from './inbound-binding';
+export * from './inbound-templates';
+export * from './servers';
+export * from './users';
diff --git a/client/src/pages/servers/index.ts b/client/src/pages/servers/index.ts
new file mode 100644
index 0000000..aeb0ea6
--- /dev/null
+++ b/client/src/pages/servers/index.ts
@@ -0,0 +1 @@
+export * from './servers';
diff --git a/client/src/pages/servers/servers.tsx b/client/src/pages/servers/servers.tsx
new file mode 100644
index 0000000..4a9da10
--- /dev/null
+++ b/client/src/pages/servers/servers.tsx
@@ -0,0 +1,40 @@
+import type { RouteObject } from 'react-router';
+
+export const Servers = () => {
+  return (
+    <div id="servers" className="tab-content active">
+      <div className="section">
+        <h2>Add Server</h2>
+        <form id="serverForm">
+          <div className="form-group">
+            <label>Name:</label>
+            <input type="text" id="serverName" required />
+          </div>
+          <div className="form-group">
+            <label>Hostname:</label>
+            <input type="text" id="serverHostname" required />
+          </div>
+          <div className="form-group">
+            <label>gRPC Port:</label>
+            <input type="number" id="serverPort" value="2053" />
+          </div>
+          <button type="submit" className="btn btn-primary">
+            Add Server
+          </button>
+        </form>
+      </div>
+
+      <div className="section">
+        <h2>Servers List</h2>
+        <div id="serversList" className="loading">
+          Loading...
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ServersRoute: RouteObject = {
+  path: '/servers',
+  Component: Servers,
+};
diff --git a/client/src/pages/users/index.ts b/client/src/pages/users/index.ts
new file mode 100644
index 0000000..b18bf4c
--- /dev/null
+++ b/client/src/pages/users/index.ts
@@ -0,0 +1 @@
+export * from './users';
diff --git a/client/src/pages/users/users.tsx b/client/src/pages/users/users.tsx
new file mode 100644
index 0000000..d135915
--- /dev/null
+++ b/client/src/pages/users/users.tsx
@@ -0,0 +1,40 @@
+import type { RouteObject } from 'react-router';
+
+export const Users = () => {
+  return (
+    <div id="users" className="tab-content active">
+      <div className="section">
+        <h2>Add User</h2>
+        <form id="userForm">
+          <div className="form-group">
+            <label>Name:</label>
+            <input type="text" id="userName" required />
+          </div>
+          <div className="form-group">
+            <label>Comment:</label>
+            <input type="text" id="userComment" />
+          </div>
+          <div className="form-group">
+            <label>Telegram ID:</label>
+            <input type="number" id="userTelegram" />
+          </div>
+          <button type="submit" className="btn btn-primary">
+            Add User
+          </button>
+        </form>
+      </div>
+
+      <div className="section">
+        <h2>Users List</h2>
+        <div id="usersList" className="loading">
+          Loading...
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const UsersRoute: RouteObject = {
+  path: '/users',
+  Component: Users,
+};
diff --git a/client/src/router/router.tsx b/client/src/router/router.tsx
index d503f5d..5b50144 100644
--- a/client/src/router/router.tsx
+++ b/client/src/router/router.tsx
@@ -1,9 +1,25 @@
 import { createBrowserRouter } from 'react-router';
-import { Home } from '../pages';
+import {
+  Home,
+  DashboardRoute,
+  ServersRoute,
+  InboundTemplatesRoute,
+  CertificatesRoute,
+  InboundBindingRoute,
+  UsersRoute,
+} from '../pages';
 
 export const router = createBrowserRouter([
   {
     path: '/',
     Component: Home,
+    children: [
+      DashboardRoute,
+      ServersRoute,
+      InboundTemplatesRoute,
+      CertificatesRoute,
+      InboundBindingRoute,
+      UsersRoute,
+    ],
   },
 ]);