From 5e33a4db221145b1114c3720ff1b3046ba9d0aad Mon Sep 17 00:00:00 2001
From: CarterPerez-dev <cartertechsolution@gmail.com>
Date: Sun, 3 May 2026 06:56:03 -0400
Subject: [PATCH] feat(monitor/frontend): top strip (title + UTC clock +
 about/user icons)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Thin 36px strip in the topstrip grid-area: left = MONITORING THE SITUATION
label + about-trigger icon, center = HH:MM:SS UTC mono clock with tabular-nums
ticking once per second, right = settings gear (auth) or user (anonymous)
that navigates via ROUTES.{SETTINGS,LOGIN}. About icon dispatches openAbout
on the ui store; the modal itself is Task 23.

Pure monochrome — title --fg-2 letter-spaced uppercase --type-label, clock
--fg-2 mono, icons --fg-3 with --fg-1 hover color shift (no transition,
no scale, no rounded surface). Reads tmux-status-line, not SaaS app header.
focus-visible outline 1px --fg-2 for keyboard a11y. Dashboard.tsx renders
<TopStrip /> as a direct child of .root so it auto-places into the
topstrip named area.

Plan 5 Task 8 Design QA: strip height, label tier, mono tabular clock,
zero rounding, tmux feel — all verified.
---
 .../src/pages/dashboard/Dashboard.tsx         |  2 +
 .../src/pages/dashboard/TopStrip.module.scss  | 64 +++++++++++++++++
 .../frontend/src/pages/dashboard/TopStrip.tsx | 70 +++++++++++++++++++
 3 files changed, 136 insertions(+)
 create mode 100644 PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.module.scss
 create mode 100644 PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.tsx

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
index 0a6fcf55..cc5791b3 100644
--- 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
@@ -2,10 +2,12 @@
 // Dashboard.tsx
 
 import styles from './Dashboard.module.scss'
+import { TopStrip } from './TopStrip'
 
 export function Dashboard(): React.ReactElement {
   return (
     <div className={styles.root}>
+      <TopStrip />
       <main className={styles.grid}>
         <aside className={styles.left} />
         <section className={styles.center} />
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.module.scss
new file mode 100644
index 00000000..a47c71ba
--- /dev/null
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.module.scss
@@ -0,0 +1,64 @@
+// ©AngelaMos | 2026
+// TopStrip.module.scss
+
+.strip {
+  grid-area: topstrip;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  height: 36px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--fg-4);
+  background: var(--bg);
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-self: start;
+}
+
+.title {
+  font-size: var(--type-label);
+  letter-spacing: var(--letter-spacing-label);
+  text-transform: uppercase;
+  color: var(--fg-2);
+}
+
+.clock {
+  font-family: var(--font-mono);
+  font-size: var(--type-body);
+  color: var(--fg-2);
+  justify-self: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-self: end;
+}
+
+.iconButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  width: 24px;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: var(--fg-3);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--fg-1);
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--fg-2);
+    outline-offset: 1px;
+  }
+}
diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.tsx
new file mode 100644
index 00000000..eab6f1d5
--- /dev/null
+++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/TopStrip.tsx
@@ -0,0 +1,70 @@
+// ©AngelaMos | 2026
+// TopStrip.tsx
+
+import { useEffect, useState } from 'react'
+import { FiHelpCircle, FiSettings, FiUser } from 'react-icons/fi'
+import { useNavigate } from 'react-router-dom'
+import { ROUTES } from '@/config'
+import { useAuthStore } from '@/core/lib/auth.store'
+import { useUIStore } from '@/stores/ui'
+import styles from './TopStrip.module.scss'
+
+const CLOCK_TICK_MS = 1000
+
+export function TopStrip(): React.ReactElement {
+  const [now, setNow] = useState(() => new Date())
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
+  const openAbout = useUIStore((s) => s.openAbout)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(new Date()), CLOCK_TICK_MS)
+    return () => clearInterval(id)
+  }, [])
+
+  return (
+    <header className={styles.strip}>
+      <div className={styles.left}>
+        <span className={styles.title}>MONITORING THE SITUATION</span>
+        <button
+          type="button"
+          className={styles.iconButton}
+          onClick={openAbout}
+          aria-label="About"
+        >
+          <FiHelpCircle aria-hidden />
+        </button>
+      </div>
+
+      <div className={styles.clock}>{formatUTC(now)}</div>
+
+      <div className={styles.right}>
+        {isAuthenticated ? (
+          <button
+            type="button"
+            className={styles.iconButton}
+            onClick={() => navigate(ROUTES.SETTINGS)}
+            aria-label="Preferences"
+          >
+            <FiSettings aria-hidden />
+          </button>
+        ) : (
+          <button
+            type="button"
+            className={styles.iconButton}
+            onClick={() => navigate(ROUTES.LOGIN)}
+            aria-label="Login"
+          >
+            <FiUser aria-hidden />
+          </button>
+        )}
+      </div>
+    </header>
+  )
+}
+
+TopStrip.displayName = 'TopStrip'
+
+function formatUTC(d: Date): string {
+  return `${d.toISOString().slice(11, 19)} UTC`
+}