58 lines
1.7 KiB
React
58 lines
1.7 KiB
React
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import ViolationForm from './components/ViolationForm';
|
||
|
|
|
||
|
|
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',
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
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'));
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
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>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|