From d4638783a4b49c3a38eea12a6bb3102ac43629c5 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:52:16 -0600
Subject: [PATCH] =?UTF-8?q?feat:=20add=20Docs=20button=20to=20navbar=20?=
 =?UTF-8?q?=E2=80=94=20opens=20ReadmeModal=20slide-in=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/App.jsx | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 6fdac9c..8639fb6 100755
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import ViolationForm from './components/ViolationForm';
 import Dashboard     from './components/Dashboard';
+import ReadmeModal   from './components/ReadmeModal';
 
 const tabs = [
   { id: 'dashboard', label: '📊 Dashboard' },
@@ -20,11 +21,29 @@ const s = {
     cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
     background: 'none', border: 'none',
   }),
+  // Docs button sits flush-right in the nav
+  docsBtn: {
+    marginLeft: 'auto',
+    background: 'none',
+    border: '1px solid #2a2b3a',
+    color: '#9ca0b8',
+    borderRadius: '6px',
+    padding: '6px 14px',
+    fontSize: '12px',
+    cursor: 'pointer',
+    fontWeight: 600,
+    letterSpacing: '0.3px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+  },
   card: { maxWidth: '1100px', margin: '30px auto', background: '#111217', borderRadius: '10px', boxShadow: '0 2px 16px rgba(0,0,0,0.6)', border: '1px solid #222' },
 };
 
 export default function App() {
-  const [tab, setTab] = useState('dashboard');
+  const [tab,        setTab]        = useState('dashboard');
+  const [showReadme, setShowReadme] = useState(false);
+
   return (
     <div style={s.app}>
       <nav style={s.nav}>
@@ -32,15 +51,23 @@ export default function App() {
           <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
           <div style={s.logoText}>CPAS Tracker</div>
         </div>
+
         {tabs.map(t => (
           <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
             {t.label}
           </button>
         ))}
+
+        <button style={s.docsBtn} onClick={() => setShowReadme(true)} title="Open admin documentation">
+          <span>?</span> Docs
+        </button>
       </nav>
+
       <div style={s.card}>
         {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
       </div>
+
+      {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
     </div>
   );
 }