Phase 4

client/src/App.jsx

@@ -1,56 +1,39 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import ViolationForm from './components/ViolationForm';
+import Dashboard     from './components/Dashboard';
 
-const styles = {
-    body: {
-        fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        minHeight: '100vh',
-        padding: '20px',
-        margin: 0,
-    },
-    container: {
-        maxWidth: '1200px',
-        margin: '0 auto',
-        background: 'white',
-        borderRadius: '12px',
-        boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
-        overflow: 'hidden',
-    },
-    header: {
-        background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)',
-        color: 'white',
-        padding: '30px',
-        textAlign: 'center',
-    },
-    statusBar: {
-        fontSize: '11px',
-        color: '#aaa',
-        marginTop: '6px',
-    }
+const tabs = [
+    { id: 'dashboard', label: '📊 Dashboard' },
+    { id: 'violation', label: '+ New Violation' },
+];
+
+const s = {
+    app:     { minHeight: '100vh', background: '#f5f6fa', fontFamily: "'Segoe UI', Arial, sans-serif" },
+    nav:     { background: 'linear-gradient(135deg, #2c3e50, #34495e)', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0 },
+    logo:    { color: 'white', fontWeight: 800, fontSize: '18px', letterSpacing: '0.5px', marginRight: '32px', padding: '18px 0' },
+    tab:     (active) => ({
+        padding: '18px 22px', color: active ? 'white' : 'rgba(255,255,255,0.6)',
+        borderBottom: active ? '3px solid #667eea' : '3px solid transparent',
+        cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
+        background: 'none', border: 'none', borderBottom: active ? '3px solid #667eea' : '3px solid transparent',
+    }),
+    card:    { maxWidth: '1100px', margin: '30px auto', background: 'white', borderRadius: '10px', boxShadow: '0 2px 12px rgba(0,0,0,0.08)' },
 };
 
 export default function App() {
-    const [apiStatus, setApiStatus] = useState('checking...');
-
-    useEffect(() => {
-        fetch('/api/health')
-            .then(r => r.json())
-            .then(() => setApiStatus('● API connected'))
-            .catch(() => setApiStatus('⚠ API unreachable'));
-    }, []);
-
+    const [tab, setTab] = useState('dashboard');
     return (
-        <div style={styles.body}>
-            <div style={styles.container}>
-                <div style={styles.header}>
-                    <h1 style={{ margin: 0, fontSize: '28px' }}>CPAS Violation Documentation System</h1>
-                    <p style={{ margin: '8px 0 0', fontSize: '14px', opacity: 0.9 }}>
-                        Generate Individual Violation Records with Contextual Fields
-                    </p>
-                    <p style={styles.statusBar}>{apiStatus}</p>
-                </div>
-                <ViolationForm />
+        <div style={s.app}>
+            <nav style={s.nav}>
+                <div style={s.logo}>CPAS Tracker</div>
+                {tabs.map(t => (
+                    <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
+                        {t.label}
+                    </button>
+                ))}
+            </nav>
+            <div style={s.card}>
+                {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
             </div>
         </div>
     );