OPC # 0001: Extract OPC into standalone repo

2026-04-25 17:26:42 -04:00
commit 42383bdc03
170 changed files with 21365 additions and 0 deletions
@@ -0,0 +1,76 @@
+import '@blueprintjs/core/lib/css/blueprint.css';
+import './App.css';
+import { useState } from 'react';
+import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import DashboardPage from './pages/DashboardPage';
+import PipelinesPage from './pages/PipelinesPage';
+import BuildMonitorPage from './pages/BuildMonitorPage';
+import ImageBuildPage from './pages/ImageBuildPage';
+import BranchPage from './pages/BranchPage';
+import OpcPage from './opc/OpcPage';
+import InfraPage from './pages/InfraPage';
+
+function App() {
+  const [activeNav, setActiveNav] = useState('opc');
+
+  return (
+    <div className="cp-shell">
+      {/* ── Sidebar ── */}
+      <aside className="cp-sidebar">
+        <div className="cp-sidebar-brand">
+          <span className="brand-mark">CP</span>
+          <span className="brand-name">Control Plane</span>
+        </div>
+
+        <div className="cp-sidebar-nav">
+          <Menu className="cp-sidebar-menu">
+            <MenuItem icon="cloud-upload" text="Deployments" active={activeNav === 'deployments'} onClick={() => setActiveNav('deployments')} />
+            <MenuItem icon="git-branch"   text="Pipelines"   active={activeNav === 'pipelines'}    onClick={() => setActiveNav('pipelines')} />
+            <MenuItem icon="git-merge"     text="Branch Ladder" active={activeNav === 'branches'}   onClick={() => setActiveNav('branches')} />
+            <MenuItem icon="build"        text="Image Build" active={activeNav === 'image-build'}  onClick={() => setActiveNav('image-build')} />
+            <MenuItem icon="pulse"        text="Build Monitor" active={activeNav === 'build-monitor'} onClick={() => setActiveNav('build-monitor')} />
+            <MenuDivider />
+            <MenuItem icon="heat-grid"  text="Infrastructure" active={activeNav === 'infra'}   onClick={() => setActiveNav('infra')} />
+            <MenuItem icon="clipboard"  text="OPC"            active={activeNav === 'opc'}     onClick={() => setActiveNav('opc')} />
+            <MenuItem icon="people"       text="Clients"     active={activeNav === 'clients'}      onClick={() => setActiveNav('clients')} />
+            <MenuItem icon="cog"          text="Settings"    active={activeNav === 'settings'}     onClick={() => setActiveNav('settings')} />
+          </Menu>
+        </div>
+
+        <div className="cp-sidebar-footer">
+          <div className="cp-sidebar-user">
+            <div className="user-avatar">A</div>
+            <div className="user-info">
+              <span className="user-name">Platform Admin</span>
+              <span className="user-role">Clarity Internal</span>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      {/* ── Main content ── */}
+      <main className="cp-main">
+        {activeNav === 'deployments'   && <DashboardPage />}
+        {activeNav === 'pipelines'     && <PipelinesPage />}
+        {activeNav === 'branches'      && <BranchPage />}
+        {activeNav === 'image-build'   && <ImageBuildPage />}
+        {activeNav === 'build-monitor' && <BuildMonitorPage />}
+        {activeNav === 'infra'         && <InfraPage />}
+        {activeNav === 'opc'           && <OpcPage />}
+        {activeNav === 'clients'       && <PlaceholderPage title="Clients" />}
+        {activeNav === 'settings'      && <PlaceholderPage title="Settings" />}
+      </main>
+    </div>
+  );
+}
+
+function PlaceholderPage({ title }: { title: string }) {
+  return (
+    <div className="page-header">
+      <h1>{title}</h1>
+      <p>Coming soon.</p>
+    </div>
+  );
+}
+
+export default App;