77 lines
2.7 KiB
JavaScript
Executable File
77 lines
2.7 KiB
JavaScript
Executable File
import React, { useState } from 'react';
|
|
import ViolationForm from './components/ViolationForm';
|
|
import Dashboard from './components/Dashboard';
|
|
import ReadmeModal from './components/ReadmeModal';
|
|
import ToastProvider from './components/ToastProvider';
|
|
|
|
const tabs = [
|
|
{ id: 'dashboard', label: '📊 Dashboard' },
|
|
{ id: 'violation', label: '+ New Violation' },
|
|
];
|
|
|
|
const s = {
|
|
app: { minHeight: '100vh', background: '#050608', fontFamily: "'Segoe UI', Arial, sans-serif", color: '#f8f9fa' },
|
|
nav: { background: '#000000', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0, borderBottom: '1px solid #333' },
|
|
logoWrap: { display: 'flex', alignItems: 'center', marginRight: '32px', padding: '14px 0' },
|
|
logoImg: { height: '28px', marginRight: '10px' },
|
|
logoText: { color: '#f8f9fa', fontWeight: 800, fontSize: '18px', letterSpacing: '0.5px' },
|
|
tab: (active) => ({
|
|
padding: '18px 22px',
|
|
color: active ? '#f8f9fa' : 'rgba(248,249,250,0.6)',
|
|
borderBottom: active ? '3px solid #d4af37' : '3px solid transparent',
|
|
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 [showReadme, setShowReadme] = useState(false);
|
|
|
|
return (
|
|
<ToastProvider>
|
|
<div style={s.app}>
|
|
<nav style={s.nav}>
|
|
<div style={s.logoWrap}>
|
|
<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>
|
|
</ToastProvider>
|
|
);
|
|
}
|