jason/cpas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "client/src"

Browse Source
This commit is contained in:
jason
2026-03-06 14:11:36 -06:00
parent 590aae5cca
commit 8bbfd90f48
1 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
client/src/App.jsx
View File

@@ -3,38 +3,44 @@ import ViolationForm from './components/ViolationForm';
import Dashboard from './components/Dashboard'; import Dashboard from './components/Dashboard';
const tabs = [ const tabs = [
{ id: 'dashboard', label: '📊 Dashboard' }, { id: 'dashboard', label: '📊 Dashboard' },
{ id: 'violation', label: '+ New Violation' }, { id: 'violation', label: '+ New Violation' },
]; ];
const s = { const s = {
app: { minHeight: '100vh', background: '#f5f6fa', fontFamily: "'Segoe UI', Arial, sans-serif" }, app: { minHeight: '100vh', background: '#050608', fontFamily: "'Segoe UI', Arial, sans-serif", color: '#f8f9fa' },
nav: { background: 'linear-gradient(135deg, #2c3e50, #34495e)', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0 }, nav: { background: '#000000', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0, borderBottom: '1px solid #333' },
logo: { color: 'white', fontWeight: 800, fontSize: '18px', letterSpacing: '0.5px', marginRight: '32px', padding: '18px 0' }, logoWrap: { display: 'flex', alignItems: 'center', marginRight: '32px', padding: '14px 0' },
tab: (active) => ({ logoImg: { height: '28px', marginRight: '10px' },
padding: '18px 22px', color: active ? 'white' : 'rgba(255,255,255,0.6)', logoText: { color: '#f8f9fa', fontWeight: 800, fontSize: '18px', letterSpacing: '0.5px' },
borderBottom: active ? '3px solid #667eea' : '3px solid transparent', tab: (active) => ({
cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px', padding: '18px 22px',
background: 'none', border: 'none', borderBottom: active ? '3px solid #667eea' : '3px solid transparent', color: active ? '#f8f9fa' : 'rgba(248,249,250,0.6)',
}), borderBottom: active ? '3px solid #d4af37' : '3px solid transparent',
card: { maxWidth: '1100px', margin: '30px auto', background: 'white', borderRadius: '10px', boxShadow: '0 2px 12px rgba(0,0,0,0.08)' }, cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
background: 'none', border: 'none',
}),
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() { export default function App() {
const [tab, setTab] = useState('dashboard'); const [tab, setTab] = useState('dashboard');
return ( return (
<div style={s.app}> <div style={s.app}>
<nav style={s.nav}> <nav style={s.nav}>
<div style={s.logo}>CPAS Tracker</div> <div style={s.logoWrap}>
{tabs.map(t => ( <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
<button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}> <div style={s.logoText}>CPAS Tracker</div>
{t.label}
</button>
))}
</nav>
<div style={s.card}>
{tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
</div>
</div> </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>
);
} }