From c7a0dd33a2bee425a075cfc506bbb29a4905f91e Mon Sep 17 00:00:00 2001
From: CarterPerez-dev <cartertechsolution@gmail.com>
Date: Sun, 3 May 2026 06:49:16 -0400
Subject: [PATCH] feat(monitor/frontend): dashboard 3-col grid layout (320 /
 1fr / 320, no body scroll)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the demolition scaffold with the structural grid that Tasks 8-21
fill in. Root is a 4-row grid (topstrip / alertbanner / main / bottomticker)
with named grid-areas; the main row contains a 3-col sub-grid (left aside /
center section / right aside) at fixed 320px / 1fr / 320px. 100dvh, no body
scroll, ethos custom properties only — no template SCSS variables touched.

Adds --col-panel-width: 320px to the ethos token block (no magic number in
the layout module). index.tsx becomes a one-line re-export of Dashboard so
the lazy-route contract in routers.tsx stays unchanged.

No placeholder components. The empty <aside>/<section> elements are the
column containers themselves; subsequent tasks add real children inside
them rather than swap stub components.

Verified in browser at 1920x1080: rgb(10,10,10) bg, 320/1247/320 col rects,
1px var(--fg-4) rules between columns, body has no scroll. All 5 Plan 5
Task 7 Design QA boxes checked.
---
 .../src/pages/dashboard/Dashboard.module.scss | 43 +++++++++++++++++++
 .../src/pages/dashboard/Dashboard.tsx         | 18 ++++++++
 .../src/pages/dashboard/dashboard.module.scss | 19 --------
 .../frontend/src/pages/dashboard/index.tsx    | 12 +-----
 .../frontend/src/styles/_tokens.scss          |  3 ++
 5 files changed, 65 insertions(+), 30 deletions(-)
 create mode 100644 PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.module.scss
 create mode 100644 PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx
 delete mode 100644 PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/dashboard.module.scss

diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.module.scss
new file mode 100644
index 00000000..1bf97f83
--- /dev/null
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.module.scss
@@ -0,0 +1,43 @@
+// ©AngelaMos | 2026
+// Dashboard.module.scss
+
+.root {
+  display: grid;
+  grid-template-rows: auto auto 1fr auto;
+  grid-template-areas:
+    'topstrip'
+    'alertbanner'
+    'main'
+    'bottomticker';
+  height: 100dvh;
+  width: 100vw;
+  background: var(--bg);
+  color: var(--fg-1);
+  overflow: hidden;
+}
+
+.grid {
+  grid-area: main;
+  display: grid;
+  grid-template-columns: var(--col-panel-width) 1fr var(--col-panel-width);
+  min-height: 0;
+}
+
+.left {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  border-right: 1px solid var(--fg-4);
+}
+
+.center {
+  position: relative;
+  overflow: hidden;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  border-left: 1px solid var(--fg-4);
+}
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx
new file mode 100644
index 00000000..0a6fcf55
--- /dev/null
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/Dashboard.tsx
@@ -0,0 +1,18 @@
+// ©AngelaMos | 2026
+// Dashboard.tsx
+
+import styles from './Dashboard.module.scss'
+
+export function Dashboard(): React.ReactElement {
+  return (
+    <div className={styles.root}>
+      <main className={styles.grid}>
+        <aside className={styles.left} />
+        <section className={styles.center} />
+        <aside className={styles.right} />
+      </main>
+    </div>
+  )
+}
+
+Dashboard.displayName = 'Dashboard'
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/dashboard.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/dashboard.module.scss
deleted file mode 100644
index 0fa5d6d3..00000000
--- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/dashboard.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// ©AngelaMos | 2026
-// dashboard.module.scss
-
-.scaffold {
-  height: 100dvh;
-  width: 100%;
-  background: var(--bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.label {
-  font-family: var(--font-sans);
-  font-size: var(--type-label);
-  letter-spacing: var(--letter-spacing-label);
-  text-transform: uppercase;
-  color: var(--fg-3);
-}
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/index.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/index.tsx
index a418e3db..b183a002 100644
--- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/index.tsx
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/index.tsx
@@ -1,14 +1,4 @@
 // ©AngelaMos | 2026
 // index.tsx
 
-import styles from './dashboard.module.scss'
-
-export function Component(): React.ReactElement {
-  return (
-    <div className={styles.scaffold}>
-      <span className={styles.label}>MONITOR THE SITUATION · SCAFFOLD</span>
-    </div>
-  )
-}
-
-Component.displayName = 'Dashboard'
+export { Dashboard as Component } from './Dashboard'
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles/_tokens.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles/_tokens.scss
index 2bfdcd91..22d26385 100644
--- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles/_tokens.scss
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/styles/_tokens.scss
@@ -208,4 +208,7 @@ $container-full: 100%;
   --type-label:  11px;   // UPPERCASE labels
   --type-num-l:  20px;   // KPI numbers
   --type-num-xl: 28px;   // hero KPI numbers (rare; only top-of-panel)
+
+  // Layout — fixed panel column width (spec §11.1)
+  --col-panel-width: 320px;
 }