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

Phase 4

Browse Source
This commit is contained in:
Jason UNRAID
2026-03-06 12:53:40 -06:00
parent e8962f058c
commit 333cad41d7
7 changed files with 671 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
client/src/App.jsx
View File

@@ -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>
);

173
client/src/components/Dashboard.jsx Executable file
View File

@@ -0,0 +1,173 @@
import React, { useState, useEffect, useCallback } from 'react';
import axios from 'axios';
import CpasBadge, { getTier } from './CpasBadge';
import EmployeeModal from './EmployeeModal';
const AT_RISK_THRESHOLD = 2; // points within next tier boundary
const TIERS = [
{ min: 0, max: 4 },
{ min: 5, max: 9 },
{ min: 10, max: 14 },
{ min: 15, max: 19 },
{ min: 20, max: 24 },
{ min: 25, max: 29 },
{ min: 30, max: 999},
];
function nextTierBoundary(points) {
for (const t of TIERS) {
if (points >= t.min && points <= t.max && t.max < 999)
return t.max + 1;
}
return null;
}
function isAtRisk(points) {
const boundary = nextTierBoundary(points);
return boundary !== null && (boundary - points) <= AT_RISK_THRESHOLD;
}
const s = {
wrap: { padding: '40px' },
header: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px', flexWrap: 'wrap', gap: '12px' },
title: { fontSize: '24px', fontWeight: 700, color: '#2c3e50' },
subtitle: { fontSize: '13px', color: '#888', marginTop: '3px' },
statsRow: { display: 'flex', gap: '16px', flexWrap: 'wrap', marginBottom: '28px' },
statCard: { flex: '1', minWidth: '140px', background: '#f8f9fa', border: '1px solid #dee2e6', borderRadius: '8px', padding: '16px', textAlign: 'center' },
statNum: { fontSize: '28px', fontWeight: 800, color: '#2c3e50' },
statLbl: { fontSize: '11px', color: '#888', marginTop: '4px' },
search: { padding: '10px 14px', border: '1px solid #ddd', borderRadius: '6px', fontSize: '14px', width: '260px' },
table: { width: '100%', borderCollapse: 'collapse', background: 'white', borderRadius: '8px', overflow: 'hidden', boxShadow: '0 1px 4px rgba(0,0,0,0.08)' },
th: { background: '#34495e', color: 'white', padding: '10px 14px', textAlign: 'left', fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' },
td: { padding: '11px 14px', borderBottom: '1px solid #f0f0f0', fontSize: '13px', verticalAlign: 'middle' },
nameBtn: { background: 'none', border: 'none', cursor: 'pointer', fontWeight: 600, color: '#667eea', fontSize: '14px', padding: 0, textDecoration: 'underline dotted' },
atRiskBadge: { display: 'inline-block', marginLeft: '8px', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#fff3cd', color: '#856404', border: '1px solid #ffc107', verticalAlign: 'middle' },
zeroRow: { color: '#aaa', fontStyle: 'italic', fontSize: '12px' },
refreshBtn:{ padding: '9px 18px', background: '#667eea', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' },
};
export default function Dashboard() {
const [employees, setEmployees] = useState([]);
const [filtered, setFiltered] = useState([]);
const [search, setSearch] = useState('');
const [selectedId, setSelectedId] = useState(null);
const [loading, setLoading] = useState(true);
const load = useCallback(() => {
setLoading(true);
axios.get('/api/dashboard')
.then(r => { setEmployees(r.data); setFiltered(r.data); })
.finally(() => setLoading(false));
}, []);
useEffect(() => { load(); }, [load]);
useEffect(() => {
const q = search.toLowerCase();
setFiltered(employees.filter(e =>
e.name.toLowerCase().includes(q) ||
(e.department || '').toLowerCase().includes(q) ||
(e.supervisor || '').toLowerCase().includes(q)
));
}, [search, employees]);
const atRiskCount = employees.filter(e => isAtRisk(e.active_points)).length;
const activeCount = employees.filter(e => e.active_points > 0).length;
const cleanCount = employees.filter(e => e.active_points === 0).length;
const maxPoints = employees.reduce((m, e) => Math.max(m, e.active_points), 0);
return (
<div style={s.wrap}>
<div style={s.header}>
<div>
<div style={s.title}>Company Dashboard</div>
<div style={s.subtitle}>Click any employee name to view their full profile</div>
</div>
<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
<input style={s.search} placeholder="Search name, dept, supervisor…" value={search} onChange={e => setSearch(e.target.value)} />
<button style={s.refreshBtn} onClick={load}>↻ Refresh</button>
</div>
</div>
{/* ── Stat cards ───────────────────────────────────────── */}
<div style={s.statsRow}>
<div style={s.statCard}>
<div style={s.statNum}>{employees.length}</div>
<div style={s.statLbl}>Total Employees</div>
</div>
<div style={{ ...s.statCard, borderTop: '3px solid #28a745' }}>
<div style={{ ...s.statNum, color: '#28a745' }}>{cleanCount}</div>
<div style={s.statLbl}>Elite Standing (0 pts)</div>
</div>
<div style={{ ...s.statCard, borderTop: '3px solid #856404' }}>
<div style={{ ...s.statNum, color: '#856404' }}>{activeCount}</div>
<div style={s.statLbl}>With Active Points</div>
</div>
<div style={{ ...s.statCard, borderTop: '3px solid #ffc107' }}>
<div style={{ ...s.statNum, color: '#856404' }}>{atRiskCount}</div>
<div style={s.statLbl}>At Risk (≤{AT_RISK_THRESHOLD} pts to next tier)</div>
</div>
<div style={{ ...s.statCard, borderTop: '3px solid #c0392b' }}>
<div style={{ ...s.statNum, color: '#c0392b' }}>{maxPoints}</div>
<div style={s.statLbl}>Highest Active Score</div>
</div>
</div>
{/* ── Scoreboard table ─────────────────────────────────── */}
{loading ? (
<p style={{ color: '#aaa', textAlign: 'center', padding: '40px' }}>Loading…</p>
) : (
<table style={s.table}>
<thead>
<tr>
<th style={s.th}>#</th>
<th style={s.th}>Employee</th>
<th style={s.th}>Department</th>
<th style={s.th}>Supervisor</th>
<th style={s.th}>Tier / Standing</th>
<th style={s.th}>Active Points</th>
<th style={s.th}>90-Day Violations</th>
</tr>
</thead>
<tbody>
{filtered.length === 0 && (
<tr><td colSpan={7} style={{ ...s.td, textAlign: 'center', ...s.zeroRow }}>No employees found.</td></tr>
)}
{filtered.map((emp, i) => {
const risk = isAtRisk(emp.active_points);
const tier = getTier(emp.active_points);
const boundary = nextTierBoundary(emp.active_points);
return (
<tr key={emp.id} style={{ background: risk ? '#fffdf0' : i % 2 === 0 ? 'white' : '#fafafa' }}>
<td style={{ ...s.td, color: '#aaa', fontSize: '12px' }}>{i + 1}</td>
<td style={s.td}>
<button style={s.nameBtn} onClick={() => setSelectedId(emp.id)}>{emp.name}</button>
{risk && (
<span style={s.atRiskBadge}>
⚠ {boundary - emp.active_points} pt{boundary - emp.active_points > 1 ? 's' : ''} to {getTier(boundary).label.split('—')[0].trim()}
</span>
)}
</td>
<td style={{ ...s.td, color: '#666' }}>{emp.department || '—'}</td>
<td style={{ ...s.td, color: '#666' }}>{emp.supervisor || '—'}</td>
<td style={s.td}><CpasBadge points={emp.active_points} /></td>
<td style={{ ...s.td, fontWeight: 700, color: tier.color, fontSize: '16px' }}>{emp.active_points}</td>
<td style={{ ...s.td, color: '#666' }}>{emp.violation_count}</td>
</tr>
);
})}
</tbody>
</table>
)}
{/* ── Employee profile modal ───────────────────────────── */}
{selectedId && (
<EmployeeModal
employeeId={selectedId}
onClose={() => { setSelectedId(null); load(); }}
/>
)}
</div>
);
}

245
client/src/components/EmployeeModal.jsx Executable file
View File

@@ -0,0 +1,245 @@
import React, { useState, useEffect, useCallback } from 'react';
import axios from 'axios';
import CpasBadge, { getTier } from './CpasBadge';
import NegateModal from './NegateModal';
const s = {
overlay: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.55)', zIndex: 1000, display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end' },
panel: { background: 'white', width: '680px', maxWidth: '95vw', height: '100vh', overflowY: 'auto', boxShadow: '-4px 0 24px rgba(0,0,0,0.18)', display: 'flex', flexDirection: 'column' },
header: { background: 'linear-gradient(135deg, #2c3e50, #34495e)', color: 'white', padding: '24px 28px', position: 'sticky', top: 0, zIndex: 10 },
closeBtn: { float: 'right', background: 'none', border: 'none', color: 'white', fontSize: '22px', cursor: 'pointer', lineHeight: 1, marginTop: '-2px' },
body: { padding: '24px 28px', flex: 1 },
scoreRow: { display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '24px' },
scoreCard: { flex: '1', minWidth: '100px', background: '#f8f9fa', borderRadius: '8px', padding: '14px', textAlign: 'center', border: '1px solid #dee2e6' },
scoreNum: { fontSize: '26px', fontWeight: 800 },
scoreLbl: { fontSize: '11px', color: '#888', marginTop: '3px' },
sectionHd: { fontSize: '13px', fontWeight: 700, color: '#34495e', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '10px', marginTop: '24px' },
table: { width: '100%', borderCollapse: 'collapse', fontSize: '12px' },
th: { background: '#f1f3f5', padding: '8px 10px', textAlign: 'left', color: '#555', fontWeight: 600, fontSize: '11px', textTransform: 'uppercase' },
td: { padding: '9px 10px', borderBottom: '1px solid #f0f0f0', verticalAlign: 'top' },
negatedRow: { background: '#f8f8f8', color: '#aaa' },
actionBtn: (color) => ({ background: 'none', border: `1px solid ${color}`, color, borderRadius: '4px', padding: '3px 8px', fontSize: '11px', cursor: 'pointer', marginRight: '4px', fontWeight: 600 }),
resTag: { display: 'inline-block', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#d4edda', color: '#155724', border: '1px solid #c3e6cb' },
pdfBtn: { background: 'none', border: '1px solid #667eea', color: '#667eea', borderRadius: '4px', padding: '3px 8px', fontSize: '11px', cursor: 'pointer', fontWeight: 600 },
deleteConfirm: { background: '#f8d7da', border: '1px solid #f5c6cb', borderRadius: '6px', padding: '12px', marginTop: '8px', fontSize: '12px' },
};
const RESOLUTION_TYPES = [
'Corrective Training Completed',
'Management Discretion',
'Data Entry Error',
'Successfully Appealed',
];
export default function EmployeeModal({ employeeId, onClose }) {
const [employee, setEmployee] = useState(null);
const [score, setScore] = useState(null);
const [violations, setViolations] = useState([]);
const [loading, setLoading] = useState(true);
const [negating, setNegating] = useState(null); // violation object being soft-negated
const [confirmDel, setConfirmDel] = useState(null); // violation id pending hard delete
const load = useCallback(() => {
setLoading(true);
Promise.all([
axios.get('/api/employees'),
axios.get(`/api/employees/${employeeId}/score`),
axios.get(`/api/violations/employee/${employeeId}?limit=100`),
]).then(([empRes, scoreRes, violRes]) => {
const emp = empRes.data.find(e => e.id === employeeId);
setEmployee(emp || null);
setScore(scoreRes.data);
setViolations(violRes.data);
}).finally(() => setLoading(false));
}, [employeeId]);
useEffect(() => { load(); }, [load]);
const handleDownloadPdf = async (violId, empName, date) => {
const response = await axios.get(`/api/violations/${violId}/pdf`, { responseType: 'blob' });
const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/pdf' }));
const link = document.createElement('a');
link.href = url;
link.download = `CPAS_${(empName||'').replace(/[^a-z0-9]/gi,'_')}_${date}.pdf`;
document.body.appendChild(link);
link.click();
link.remove();
window.URL.revokeObjectURL(url);
};
const handleHardDelete = async (id) => {
await axios.delete(`/api/violations/${id}`);
setConfirmDel(null);
load();
};
const handleRestore = async (id) => {
await axios.patch(`/api/violations/${id}/restore`);
load();
};
const tier = score ? getTier(score.active_points) : null;
const active = violations.filter(v => !v.negated);
const negated = violations.filter(v => v.negated);
return (
<div style={s.overlay} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
<div style={s.panel}>
{/* ── Header ──────────────────────────────────── */}
<div style={s.header}>
<button style={s.closeBtn} onClick={onClose}>✕</button>
<div style={{ fontSize: '20px', fontWeight: 700 }}>
{loading ? 'Loading…' : (employee?.name || 'Employee Profile')}
</div>
{employee && (
<div style={{ fontSize: '12px', opacity: 0.75, marginTop: '4px' }}>
{[employee.department, employee.supervisor ? `Supervisor: ${employee.supervisor}` : null].filter(Boolean).join(' · ')}
</div>
)}
</div>
<div style={s.body}>
{loading ? (
<p style={{ color: '#aaa', textAlign: 'center', paddingTop: '40px' }}>Loading…</p>
) : (<>
{/* ── Score cards ───────────────────────── */}
<div style={s.scoreRow}>
<div style={{ ...s.scoreCard, borderTop: `3px solid ${tier?.color}` }}>
<div style={{ ...s.scoreNum, color: tier?.color }}>{score?.active_points ?? 0}</div>
<div style={s.scoreLbl}>Active Points</div>
</div>
<div style={s.scoreCard}>
<div style={s.scoreNum}>{score?.violation_count ?? 0}</div>
<div style={s.scoreLbl}>90-Day Violations</div>
</div>
<div style={s.scoreCard}>
<div style={s.scoreNum}>{active.length}</div>
<div style={s.scoreLbl}>Total On Record</div>
</div>
<div style={s.scoreCard}>
<div style={{ ...s.scoreNum, color: '#888' }}>{negated.length}</div>
<div style={s.scoreLbl}>Negated</div>
</div>
</div>
{tier && (
<div style={{ background: '#f8f9fa', borderRadius: '6px', padding: '10px 14px', marginBottom: '16px', fontSize: '13px', border: `1px solid ${tier.color}33` }}>
<strong style={{ color: tier.color }}>{tier.label}</strong>
<span style={{ color: '#888', marginLeft: '10px', fontSize: '12px' }}>Rolling 90-day window · Points expire automatically</span>
</div>
)}
{/* ── Active violations ─────────────────── */}
<div style={s.sectionHd}>Active Violations</div>
{active.length === 0 ? (
<p style={{ color: '#aaa', fontSize: '13px', fontStyle: 'italic' }}>No active violations on record.</p>
) : (
<table style={s.table}>
<thead>
<tr>
<th style={s.th}>Date</th>
<th style={s.th}>Violation</th>
<th style={s.th}>Pts</th>
<th style={s.th}>Actions</th>
</tr>
</thead>
<tbody>
{active.map(v => (
<tr key={v.id}>
<td style={s.td}>{v.incident_date}</td>
<td style={s.td}>
<div style={{ fontWeight: 600 }}>{v.violation_name}</div>
<div style={{ color: '#888', fontSize: '11px' }}>{v.category}</div>
{v.details && <div style={{ color: '#666', fontSize: '11px', marginTop: '3px', fontStyle: 'italic' }}>{v.details}</div>}
</td>
<td style={{ ...s.td, fontWeight: 700, color: '#c0392b' }}>{v.points}</td>
<td style={s.td}>
<button style={s.actionBtn('#856404')} onClick={() => setNegating(v)}>⊘ Negate</button>
<button style={s.pdfBtn} onClick={() => handleDownloadPdf(v.id, employee?.name, v.incident_date)}>PDF</button>
<br />
{confirmDel === v.id ? (
<div style={s.deleteConfirm}>
<strong>Permanently delete?</strong> This cannot be undone.
<div style={{ marginTop: '8px', display: 'flex', gap: '8px' }}>
<button style={s.actionBtn('#c0392b')} onClick={() => handleHardDelete(v.id)}>Confirm Delete</button>
<button style={s.actionBtn('#666')} onClick={() => setConfirmDel(null)}>Cancel</button>
</div>
</div>
) : (
<button style={{ ...s.actionBtn('#c0392b'), marginTop: '4px' }} onClick={() => setConfirmDel(v.id)}>✕ Delete</button>
)}
</td>
</tr>
))}
</tbody>
</table>
)}
{/* ── Negated violations ────────────────── */}
{negated.length > 0 && (<>
<div style={s.sectionHd}>Negated / Resolved Violations</div>
<table style={s.table}>
<thead>
<tr>
<th style={s.th}>Date</th>
<th style={s.th}>Violation</th>
<th style={s.th}>Pts</th>
<th style={s.th}>Resolution</th>
<th style={s.th}>Actions</th>
</tr>
</thead>
<tbody>
{negated.map(v => (
<tr key={v.id} style={s.negatedRow}>
<td style={s.td}>{v.incident_date}</td>
<td style={s.td}>
<div style={{ textDecoration: 'line-through' }}>{v.violation_name}</div>
<div style={{ fontSize: '11px', color: '#aaa' }}>{v.category}</div>
</td>
<td style={{ ...s.td, textDecoration: 'line-through', color: '#aaa' }}>{v.points}</td>
<td style={s.td}>
<span style={s.resTag}>{v.resolution_type}</span>
{v.resolution_details && <div style={{ fontSize: '11px', marginTop: '3px', color: '#666' }}>{v.resolution_details}</div>}
{v.resolved_by && <div style={{ fontSize: '10px', color: '#aaa' }}>by {v.resolved_by}</div>}
</td>
<td style={s.td}>
<button style={s.actionBtn('#28a745')} onClick={() => handleRestore(v.id)}>↩ Restore</button>
{confirmDel === v.id ? (
<div style={s.deleteConfirm}>
<strong>Permanently delete?</strong>
<div style={{ marginTop: '8px', display: 'flex', gap: '8px' }}>
<button style={s.actionBtn('#c0392b')} onClick={() => handleHardDelete(v.id)}>Confirm</button>
<button style={s.actionBtn('#666')} onClick={() => setConfirmDel(null)}>Cancel</button>
</div>
</div>
) : (
<button style={s.actionBtn('#c0392b')} onClick={() => setConfirmDel(v.id)}>✕ Delete</button>
)}
</td>
</tr>
))}
</tbody>
</table>
</>)}
</>)}
</div>
</div>
{/* ── Negate sub-modal ────────────────────────────────── */}
{negating && (
<NegateModal
violation={negating}
onConfirm={async ({ resolution_type, details, resolved_by }) => {
await axios.patch(`/api/violations/${negating.id}/negate`, { resolution_type, details, resolved_by });
setNegating(null);
load();
}}
onCancel={() => setNegating(null)}
/>
)}
</div>
);
}

68
client/src/components/NegateModal.jsx Executable file
View File

@@ -0,0 +1,68 @@
import React, { useState } from 'react';
const RESOLUTION_TYPES = [
'Corrective Training Completed',
'Management Discretion',
'Data Entry Error',
'Successfully Appealed',
];
const s = {
overlay: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.65)', zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center' },
box: { background: 'white', borderRadius: '10px', padding: '28px', width: '440px', maxWidth: '95vw', boxShadow: '0 8px 32px rgba(0,0,0,0.22)' },
title: { fontSize: '17px', fontWeight: 700, color: '#2c3e50', marginBottom: '6px' },
sub: { fontSize: '12px', color: '#888', marginBottom: '20px' },
label: { fontWeight: 600, color: '#555', fontSize: '12px', marginBottom: '5px', display: 'block' },
input: { width: '100%', padding: '9px 12px', border: '1px solid #ddd', borderRadius: '5px', fontSize: '13px', fontFamily: 'inherit', marginBottom: '14px' },
btnRow: { display: 'flex', gap: '10px', justifyContent: 'flex-end', marginTop: '8px' },
btnOk: { padding: '10px 22px', background: '#856404', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 700, fontSize: '13px' },
btnCancel:{ padding: '10px 22px', background: '#f1f3f5', color: '#555', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' },
violBox: { background: '#fff3cd', border: '1px solid #ffc107', borderRadius: '6px', padding: '10px 14px', marginBottom: '18px', fontSize: '13px' },
};
export default function NegateModal({ violation, onConfirm, onCancel }) {
const [resType, setResType] = useState('');
const [details, setDetails] = useState('');
const [resolvedBy, setResolvedBy] = useState('');
const [error, setError] = useState('');
const handleSubmit = () => {
if (!resType) { setError('Please select a resolution type.'); return; }
onConfirm({ resolution_type: resType, details, resolved_by: resolvedBy });
};
return (
<div style={s.overlay}>
<div style={s.box}>
<div style={s.title}>⊘ Negate Violation Points</div>
<div style={s.sub}>This will zero out the points from this incident. The record remains in the audit log.</div>
<div style={s.violBox}>
<strong>{violation.violation_name}</strong> &nbsp;·&nbsp; {violation.points} pts &nbsp;·&nbsp; {violation.incident_date}
</div>
<label style={s.label}>Resolution Type *</label>
<select style={s.input} value={resType} onChange={e => { setResType(e.target.value); setError(''); }}>
<option value="">-- Select Resolution --</option>
{RESOLUTION_TYPES.map(r => <option key={r} value={r}>{r}</option>)}
</select>
<label style={s.label}>Additional Details</label>
<textarea style={{ ...s.input, resize: 'vertical', minHeight: '70px' }}
placeholder="Training course completed, specific context, approving manager notes…"
value={details} onChange={e => setDetails(e.target.value)} />
<label style={s.label}>Resolved By</label>
<input style={s.input} type="text" placeholder="Officer / Manager name"
value={resolvedBy} onChange={e => setResolvedBy(e.target.value)} />
{error && <div style={{ color: '#c0392b', fontSize: '12px', marginBottom: '10px' }}>{error}</div>}
<div style={s.btnRow}>
<button style={s.btnCancel} onClick={onCancel}>Cancel</button>
<button style={s.btnOk} onClick={handleSubmit}>Confirm Negation</button>
</div>
</div>
</div>
);
}