feat: scaffold operator-first 3proxy panel ui

src/App.tsx

@@ -0,0 +1,381 @@
+import { FormEvent, useMemo, useState } from 'react';
+import './app.css';
+import { dashboardSnapshot, panelAuth } from './data/mockDashboard';
+import {
+  buildProxyLink,
+  formatBytes,
+  formatQuotaState,
+  formatTrafficShare,
+  getServiceTone,
+  isQuotaExceeded,
+} from './lib/3proxy';
+
+type TabId = 'dashboard' | 'users' | 'system';
+
+const tabs: Array<{ id: TabId; label: string; description: string }> = [
+  { id: 'dashboard', label: 'Dashboard', description: 'Health, traffic, quick actions' },
+  { id: 'users', label: 'Users', description: 'Accounts, quotas, quick-copy links' },
+  { id: 'system', label: 'System', description: 'Config profile, ports, runtime controls' },
+];
+
+function LoginGate({ onUnlock }: { onUnlock: () => void }) {
+  const [login, setLogin] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (login === panelAuth.login && password === panelAuth.password) {
+      setError('');
+      onUnlock();
+      return;
+    }
+
+    setError('Wrong panel credentials. Check the hardcoded startup values.');
+  };
+
+  return (
+    <main className="login-shell">
+      <section className="login-card">
+        <p className="eyebrow">3proxy control plane</p>
+        <h1>Minimal panel, operator-first signal.</h1>
+        <p className="lede">
+          The first slice focuses on clarity: health, users, quotas, and system controls without
+          dashboard noise.
+        </p>
+        <form className="login-form" onSubmit={handleSubmit}>
+          <label>
+            Login
+            <input
+              autoComplete="username"
+              name="login"
+              value={login}
+              onChange={(event) => setLogin(event.target.value)}
+            />
+          </label>
+          <label>
+            Password
+            <input
+              autoComplete="current-password"
+              name="password"
+              type="password"
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+            />
+          </label>
+          <button type="submit">Open panel</button>
+          {error ? <p className="form-error">{error}</p> : null}
+        </form>
+        <div className="login-note">
+          <span>Prototype auth is intentionally hardcoded.</span>
+          <span>Runtime-backed auth will replace this in the next phase.</span>
+        </div>
+      </section>
+    </main>
+  );
+}
+
+function DashboardTab() {
+  const serviceTone = getServiceTone(dashboardSnapshot.service.status);
+
+  return (
+    <section className="tab-grid">
+      <article className="panel-card hero-card">
+        <div>
+          <p className="eyebrow">3proxy runtime</p>
+          <h2>Service health stays front and center.</h2>
+          <p className="muted">
+            The live card will be wired to process health and graceful reload endpoints in the next
+            implementation step.
+          </p>
+        </div>
+        <div className="hero-status">
+          <span className={`status-pill ${serviceTone}`}>{dashboardSnapshot.service.status}</span>
+          <span>{dashboardSnapshot.service.pidLabel}</span>
+          <span>{dashboardSnapshot.service.versionLabel}</span>
+        </div>
+        <div className="action-row">
+          <button type="button">Start</button>
+          <button type="button" className="secondary">
+            Restart
+          </button>
+        </div>
+      </article>
+
+      <article className="panel-card">
+        <p className="section-label">Traffic</p>
+        <strong className="metric">{formatBytes(dashboardSnapshot.traffic.totalBytes)}</strong>
+        <p className="muted">
+          {dashboardSnapshot.traffic.liveConnections} live connections across{' '}
+          {dashboardSnapshot.traffic.activeUsers} active users.
+        </p>
+        <div className="sparkline-list">
+          {dashboardSnapshot.traffic.daily.map((bucket) => (
+            <div key={bucket.day} className="sparkline-row">
+              <span>{bucket.day}</span>
+              <div className="sparkline-track">
+                <div style={{ width: `${bucket.share * 100}%` }} />
+              </div>
+              <span>{formatBytes(bucket.bytes)}</span>
+            </div>
+          ))}
+        </div>
+      </article>
+
+      <article className="panel-card">
+        <p className="section-label">User pressure</p>
+        <strong className="metric">{dashboardSnapshot.users.total}</strong>
+        <p className="muted">Configured users in the current proxy profile.</p>
+        <div className="stat-stack">
+          <div>
+            <span>Live now</span>
+            <strong>{dashboardSnapshot.users.live}</strong>
+          </div>
+          <div>
+            <span>Near quota</span>
+            <strong>{dashboardSnapshot.users.nearQuota}</strong>
+          </div>
+          <div>
+            <span>Exceeded</span>
+            <strong>{dashboardSnapshot.users.exceeded}</strong>
+          </div>
+        </div>
+      </article>
+
+      <article className="panel-card">
+        <p className="section-label">Runtime attention</p>
+        <div className="attention-list">
+          {dashboardSnapshot.attention.map((item) => (
+            <div key={item.title} className="attention-item">
+              <span className={`dot ${item.level}`} />
+              <div>
+                <strong>{item.title}</strong>
+                <p>{item.message}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </article>
+    </section>
+  );
+}
+
+function UsersTab() {
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  const handleCopy = async (userId: string, proxyLink: string) => {
+    await navigator.clipboard.writeText(proxyLink);
+    setCopiedId(userId);
+    window.setTimeout(() => setCopiedId((value) => (value === userId ? null : value)), 1200);
+  };
+
+  return (
+    <section className="tab-grid users-grid">
+      <article className="panel-card user-form-card">
+        <p className="section-label">Add user</p>
+        <h2>Shape new access without leaving the panel.</h2>
+        <form className="user-form">
+          <label>
+            Username
+            <input placeholder="night-shift-01" />
+          </label>
+          <label>
+            Password
+            <input placeholder="generated secret" />
+          </label>
+          <label>
+            Service port
+            <input placeholder="1080" />
+          </label>
+          <label>
+            Quota (MB)
+            <input placeholder="Optional" />
+          </label>
+          <button type="button">Queue user creation</button>
+        </form>
+        <p className="muted">
+          Final flow will write `users`, `allow`, and quota counters into generated 3proxy config
+          and data files.
+        </p>
+      </article>
+
+      <article className="panel-card table-card">
+        <div className="table-header">
+          <div>
+            <p className="section-label">Users</p>
+            <h2>Traffic, quota, and copyable proxy links.</h2>
+          </div>
+          <span className="muted">{dashboardSnapshot.userRecords.length} rows</span>
+        </div>
+        <div className="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>User</th>
+                <th>Status</th>
+                <th>Traffic</th>
+                <th>Quota</th>
+                <th>Share</th>
+                <th>Proxy</th>
+              </tr>
+            </thead>
+            <tbody>
+              {dashboardSnapshot.userRecords.map((user) => {
+                const proxyLink = buildProxyLink(user.username, user.password, user.host, user.port);
+                const exhausted = isQuotaExceeded(user.usedBytes, user.quotaBytes);
+
+                return (
+                  <tr key={user.id}>
+                    <td>
+                      <div className="user-cell">
+                        <strong>{user.username}</strong>
+                        <span>{user.host}</span>
+                      </div>
+                    </td>
+                    <td>
+                      <span className={`status-pill ${getServiceTone(user.status)}`}>{user.status}</span>
+                    </td>
+                    <td>{formatBytes(user.usedBytes)}</td>
+                    <td>{formatQuotaState(user.usedBytes, user.quotaBytes)}</td>
+                    <td>{formatTrafficShare(user.usedBytes, dashboardSnapshot.traffic.totalBytes)}</td>
+                    <td>
+                      <button
+                        type="button"
+                        className={exhausted ? 'danger-link' : 'copy-link'}
+                        onClick={() => handleCopy(user.id, proxyLink)}
+                      >
+                        {copiedId === user.id ? 'Copied' : 'Copy'}
+                      </button>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </article>
+    </section>
+  );
+}
+
+function SystemTab() {
+  const serviceToggles = useMemo(
+    () =>
+      dashboardSnapshot.system.services.map((service) => (
+        <div key={service.name} className="service-row">
+          <div>
+            <strong>{service.name}</strong>
+            <span>{service.description}</span>
+          </div>
+          <div className="service-meta">
+            <span>:{service.port}</span>
+            <span className={`status-pill ${service.enabled ? 'live' : 'idle'}`}>
+              {service.enabled ? 'enabled' : 'disabled'}
+            </span>
+          </div>
+        </div>
+      )),
+    [],
+  );
+
+  return (
+    <section className="tab-grid system-grid">
+      <article className="panel-card">
+        <p className="section-label">Runtime model</p>
+        <h2>One place for ports, services, and reload strategy.</h2>
+        <div className="system-stats">
+          <div>
+            <span>Config mode</span>
+            <strong>{dashboardSnapshot.system.configMode}</strong>
+          </div>
+          <div>
+            <span>Reload</span>
+            <strong>{dashboardSnapshot.system.reloadMode}</strong>
+          </div>
+          <div>
+            <span>Storage</span>
+            <strong>{dashboardSnapshot.system.storageMode}</strong>
+          </div>
+        </div>
+      </article>
+
+      <article className="panel-card">
+        <p className="section-label">Services</p>
+        <div className="service-list">{serviceToggles}</div>
+      </article>
+
+      <article className="panel-card config-card">
+        <div className="table-header">
+          <div>
+            <p className="section-label">Generated config preview</p>
+            <h2>Readable before it becomes writable.</h2>
+          </div>
+          <span className="muted">View-only for now</span>
+        </div>
+        <pre>{dashboardSnapshot.system.previewConfig}</pre>
+      </article>
+    </section>
+  );
+}
+
+export default function App() {
+  const [isAuthed, setIsAuthed] = useState(false);
+  const [activeTab, setActiveTab] = useState<TabId>('dashboard');
+
+  if (!isAuthed) {
+    return <LoginGate onUnlock={() => setIsAuthed(true)} />;
+  }
+
+  return (
+    <main className="app-shell">
+      <aside className="sidebar">
+        <div className="brand-block">
+          <p className="eyebrow">3proxy UI</p>
+          <h1>Operator panel</h1>
+          <p className="muted">
+            Dashboard, users, and system settings aligned with official 3proxy primitives.
+          </p>
+        </div>
+
+        <nav className="nav-list" aria-label="Primary">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              className={activeTab === tab.id ? 'nav-item active' : 'nav-item'}
+              onClick={() => setActiveTab(tab.id)}
+            >
+              <span>{tab.label}</span>
+              <small>{tab.description}</small>
+            </button>
+          ))}
+        </nav>
+
+        <div className="sidebar-foot">
+          <span className={`status-pill ${getServiceTone(dashboardSnapshot.service.status)}`}>
+            {dashboardSnapshot.service.status}
+          </span>
+          <p>{dashboardSnapshot.service.lastEvent}</p>
+        </div>
+      </aside>
+
+      <section className="content-shell">
+        <header className="topbar">
+          <div>
+            <p className="section-label">Current host</p>
+            <h2>{dashboardSnapshot.system.publicHost}</h2>
+          </div>
+          <div className="topbar-meta">
+            <span>{dashboardSnapshot.service.versionLabel}</span>
+            <span>{dashboardSnapshot.service.uptimeLabel}</span>
+          </div>
+        </header>
+
+        {activeTab === 'dashboard' ? <DashboardTab /> : null}
+        {activeTab === 'users' ? <UsersTab /> : null}
+        {activeTab === 'system' ? <SystemTab /> : null}
+      </section>
+    </main>
+  );
+}