Compare commits
3 Commits
de07e77e07
...
2ac330904d
| Author | SHA1 | Date | |
|---|---|---|---|
| 2ac330904d | |||
| 60e9da488c | |||
| 1a09efbfe5 |
@@ -4,237 +4,231 @@ 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' },
|
||||
overlay: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)', zIndex: 1000, display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end' },
|
||||
panel: { background: '#111217', color: '#f8f9fa', width: '680px', maxWidth: '95vw', height: '100vh', overflowY: 'auto', boxShadow: '-4px 0 24px rgba(0,0,0,0.7)', display: 'flex', flexDirection: 'column' },
|
||||
header: { background: 'linear-gradient(135deg, #000000, #151622)', color: 'white', padding: '24px 28px', position: 'sticky', top: 0, zIndex: 10, borderBottom: '1px solid #222' },
|
||||
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: '#181924', borderRadius: '8px', padding: '14px', textAlign: 'center', border: '1px solid #2a2b3a' },
|
||||
scoreNum: { fontSize: '26px', fontWeight: 800 },
|
||||
scoreLbl: { fontSize: '11px', color: '#b5b5c0', marginTop: '3px' },
|
||||
sectionHd: { fontSize: '13px', fontWeight: 700, color: '#f8f9fa', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '10px', marginTop: '24px' },
|
||||
table: { width: '100%', borderCollapse: 'collapse', fontSize: '12px', background: '#181924', borderRadius: '6px', overflow: 'hidden', border: '1px solid #2a2b3a' },
|
||||
th: { background: '#050608', padding: '8px 10px', textAlign: 'left', color: '#f8f9fa', fontWeight: 600, fontSize: '11px', textTransform: 'uppercase' },
|
||||
td: { padding: '9px 10px', borderBottom: '1px solid #202231', verticalAlign: 'top', color: '#f8f9fa' },
|
||||
negatedRow: { background: '#151622', color: '#9ca0b8' },
|
||||
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: '#053321', color: '#9ef7c1', border: '1px solid #0f5132' },
|
||||
pdfBtn: { background: 'none', border: '1px solid #d4af37', color: '#ffd666', borderRadius: '4px', padding: '3px 8px', fontSize: '11px', cursor: 'pointer', fontWeight: 600 },
|
||||
deleteConfirm: { background: '#3c1114', border: '1px solid #f5c6cb', borderRadius: '6px', padding: '12px', marginTop: '8px', fontSize: '12px', color: '#ffb3b8' },
|
||||
};
|
||||
|
||||
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);
|
||||
const [confirmDel, setConfirmDel] = useState(null);
|
||||
const [employee, setEmployee] = useState(null);
|
||||
const [score, setScore] = useState(null);
|
||||
const [violations, setViolations] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [negating, setNegating] = useState(null);
|
||||
const [confirmDel, setConfirmDel] = useState(null);
|
||||
|
||||
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]);
|
||||
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]);
|
||||
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 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(); // ← refetch employee list, score, and violations
|
||||
};
|
||||
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(); // ← refetch employee list, score, and violations
|
||||
};
|
||||
const handleRestore = async (id) => {
|
||||
await axios.patch(`/api/violations/${id}/restore`);
|
||||
load();
|
||||
};
|
||||
|
||||
const handleNegate = async ({ resolution_type, details, resolved_by }) => {
|
||||
await axios.patch(`/api/violations/${negating.id}/negate`, { resolution_type, details, resolved_by });
|
||||
setNegating(null);
|
||||
load(); // ← CRITICAL FIX: refetch score immediately after negation
|
||||
};
|
||||
const handleNegate = async ({ resolution_type, details, resolved_by }) => {
|
||||
await axios.patch(`/api/violations/${negating.id}/negate`, { resolution_type, details, resolved_by });
|
||||
setNegating(null);
|
||||
load();
|
||||
};
|
||||
|
||||
const tier = score ? getTier(score.active_points) : null;
|
||||
const active = violations.filter(v => !v.negated);
|
||||
const negated = violations.filter(v => v.negated);
|
||||
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}>
|
||||
return (
|
||||
<div style={s.overlay} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
|
||||
<div style={s.panel}>
|
||||
<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.8, marginTop: '4px' }}>
|
||||
{[employee.department, employee.supervisor ? `Supervisor: ${employee.supervisor}` : null].filter(Boolean).join(' · ')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── 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: '#77798a', textAlign: 'center', paddingTop: '40px' }}>Loading…</p>
|
||||
) : (<>
|
||||
|
||||
<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 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: '#ffd666' }}>{negated.length}</div>
|
||||
<div style={s.scoreLbl}>Negated</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Negate sub-modal ────────────────────────────────── */}
|
||||
{negating && (
|
||||
<NegateModal
|
||||
violation={negating}
|
||||
onConfirm={handleNegate}
|
||||
onCancel={() => setNegating(null)}
|
||||
/>
|
||||
{tier && (
|
||||
<div style={{ background: '#181924', 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: '#b5b5c0', marginLeft: '10px', fontSize: '12px' }}>Rolling 90-day window · Points expire automatically</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={s.sectionHd}>Active Violations</div>
|
||||
{active.length === 0 ? (
|
||||
<p style={{ color: '#77798a', 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: '#b5b5c0', fontSize: '11px' }}>{v.category}</div>
|
||||
{v.details && <div style={{ color: '#d1d3e0', fontSize: '11px', marginTop: '3px', fontStyle: 'italic' }}>{v.details}</div>}
|
||||
</td>
|
||||
<td style={{ ...s.td, fontWeight: 700, color: '#ff8a80' }}>{v.points}</td>
|
||||
<td style={s.td}>
|
||||
<button style={s.actionBtn('#ffd666')} 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('#ffb3b8')} onClick={() => handleHardDelete(v.id)}>Confirm Delete</button>
|
||||
<button style={s.actionBtn('#9ca0b8')} 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.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: '#9ca0b8' }}>{v.category}</div>
|
||||
</td>
|
||||
<td style={{ ...s.td, textDecoration: 'line-through', color: '#9ca0b8' }}>{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: '#d1d3e0' }}>{v.resolution_details}</div>}
|
||||
{v.resolved_by && <div style={{ fontSize: '10px', color: '#9ca0b8' }}>by {v.resolved_by}</div>}
|
||||
</td>
|
||||
<td style={s.td}>
|
||||
<button style={s.actionBtn('#9ef7c1')} 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('#ffb3b8')} onClick={() => handleHardDelete(v.id)}>Confirm</button>
|
||||
<button style={s.actionBtn('#9ca0b8')} onClick={() => setConfirmDel(null)}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button style={s.actionBtn('#c0392b')} onClick={() => setConfirmDel(v.id)}>✕ Delete</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>)}
|
||||
|
||||
</>)}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
|
||||
{negating && (
|
||||
<NegateModal
|
||||
violation={negating}
|
||||
onConfirm={handleNegate}
|
||||
onCancel={() => setNegating(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
172
pdf/template.js
172
pdf/template.js
@@ -1,5 +1,3 @@
|
||||
/** PDF template with MPM logo from /static/mpm-logo.png */
|
||||
|
||||
const TIERS = [
|
||||
{ min: 0, max: 4, label: 'Tier 0-1 — Elite Standing', color: '#28a745' },
|
||||
{ min: 5, max: 9, label: 'Tier 1 — Realignment', color: '#856404' },
|
||||
@@ -10,17 +8,12 @@ const TIERS = [
|
||||
{ min: 30, max: 999,label: 'Tier 6 — Separation', color: '#721c24' },
|
||||
];
|
||||
|
||||
function getTier(points) {
|
||||
return TIERS.find(t => points >= t.min && points <= t.max) || TIERS[0];
|
||||
}
|
||||
function getTier(points) { return TIERS.find(t => points >= t.min && points <= t.max) || TIERS[0]; }
|
||||
|
||||
function formatDate(d) {
|
||||
if (!d) return '—';
|
||||
const dt = new Date(d + 'T12:00:00');
|
||||
return dt.toLocaleDateString('en-US', {
|
||||
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
|
||||
timeZone: 'America/Chicago'
|
||||
});
|
||||
return dt.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'America/Chicago' });
|
||||
}
|
||||
|
||||
function formatDateTime(d, t) {
|
||||
@@ -37,16 +30,13 @@ function row(label, value) {
|
||||
}
|
||||
|
||||
function buildHtml(v, score) {
|
||||
const activePts = score.active_points || 0;
|
||||
const tier = getTier(activePts);
|
||||
const newTotal = activePts + v.points;
|
||||
const newTier = getTier(newTotal);
|
||||
const tierChange = tier.label !== newTier.label;
|
||||
const activePts = score.active_points || 0;
|
||||
const tier = getTier(activePts);
|
||||
const newTotal = activePts + v.points;
|
||||
const newTier = getTier(newTotal);
|
||||
const tierChange= tier.label !== newTier.label;
|
||||
|
||||
const generatedAt = new Date().toLocaleString('en-US', {
|
||||
timeZone: 'America/Chicago',
|
||||
dateStyle: 'full', timeStyle: 'short'
|
||||
});
|
||||
const generatedAt = new Date().toLocaleString('en-US', { timeZone: 'America/Chicago', dateStyle: 'full', timeStyle: 'short' });
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
@@ -55,86 +45,33 @@ function buildHtml(v, score) {
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; color: #222; background: #fff; }
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #000000, #111217);
|
||||
color: white;
|
||||
padding: 22px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header { background: linear-gradient(135deg, #000000, #151622); color: white; padding: 22px 32px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.header-left { display: flex; align-items: center; }
|
||||
.logo {
|
||||
height: 28px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.logo { height: 28px; margin-right: 12px; }
|
||||
.header h1 { font-size: 20px; letter-spacing: 0.5px; }
|
||||
.header p { font-size: 11px; opacity: 0.85; margin-top: 3px; }
|
||||
|
||||
.doc-id { text-align: right; font-size: 11px; opacity: 0.8; }
|
||||
|
||||
.section { margin: 20px 0; }
|
||||
.section-title {
|
||||
font-size: 14px; font-weight: 700; color: white;
|
||||
background: #000000; padding: 8px 14px;
|
||||
border-radius: 4px 4px 0 0; margin-bottom: 0;
|
||||
}
|
||||
.section-title { font-size: 14px; font-weight: 700; color: white; background: #000000; padding: 8px 14px; border-radius: 4px 4px 0 0; margin-bottom: 0; }
|
||||
table { width: 100%; border-collapse: collapse; border: 1px solid #ddd; border-top: none; }
|
||||
|
||||
.score-box {
|
||||
display: flex; gap: 20px; flex-wrap: wrap;
|
||||
background: #f8f9fa; border: 1px solid #ddd;
|
||||
border-radius: 6px; padding: 16px 20px; margin: 20px 0;
|
||||
}
|
||||
.score-box { display: flex; gap: 20px; flex-wrap: wrap; background: #f8f9fa; border: 1px solid #ddd; border-radius: 6px; padding: 16px 20px; margin: 20px 0; }
|
||||
.score-cell { flex: 1; min-width: 120px; text-align: center; }
|
||||
.score-num { font-size: 28px; font-weight: 800; }
|
||||
.score-lbl { font-size: 11px; color: #666; margin-top: 2px; }
|
||||
|
||||
.tier-badge {
|
||||
display: inline-block; padding: 5px 14px;
|
||||
border-radius: 14px; font-size: 12px; font-weight: 700;
|
||||
border: 2px solid currentColor;
|
||||
}
|
||||
.tier-change {
|
||||
background: #fff3cd; border: 2px solid #ffc107;
|
||||
border-radius: 6px; padding: 12px 16px; margin: 16px 0;
|
||||
font-size: 12px; color: #856404;
|
||||
}
|
||||
|
||||
.points-display {
|
||||
background: #fff3cd; border: 2px solid #ffc107;
|
||||
border-radius: 6px; padding: 16px; margin: 16px 0; text-align: center;
|
||||
}
|
||||
.score-num { font-size: 28px; font-weight: 800; }
|
||||
.score-lbl { font-size: 11px; color: #666; margin-top: 2px; }
|
||||
.tier-badge { display: inline-block; padding: 5px 14px; border-radius: 14px; font-size: 12px; font-weight: 700; border: 2px solid currentColor; }
|
||||
.tier-change { background: #fff3cd; border: 2px solid #ffc107; border-radius: 6px; padding: 12px 16px; margin: 16px 0; font-size: 12px; color: #856404; }
|
||||
.points-display { background: #fff3cd; border: 2px solid #ffc107; border-radius: 6px; padding: 16px; margin: 16px 0; text-align: center; }
|
||||
.points-display .pts { font-size: 36px; font-weight: 800; color: #d4af37; }
|
||||
.points-display .lbl { font-size: 12px; color: #666; }
|
||||
|
||||
.sig-section { margin-top: 40px; page-break-inside: avoid; }
|
||||
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 24px; }
|
||||
.sig-block { border-top: 1.5px solid #333; padding-top: 8px; min-height: 60px; }
|
||||
.sig-section { margin-top: 50px; page-break-inside: avoid; }
|
||||
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 32px; }
|
||||
.sig-block { border-top: 1.5px solid #333; padding-top: 10px; min-height: 80px; }
|
||||
.sig-label { font-size: 11px; color: #555; font-weight: 600; }
|
||||
.sig-date-block { border-top: 1.5px solid #333; padding-top: 8px; min-height: 50px; margin-top: 32px; }
|
||||
|
||||
.footer-bar {
|
||||
margin-top: 40px; padding: 10px 0;
|
||||
border-top: 2px solid #000000;
|
||||
font-size: 10px; color: #888; text-align: center;
|
||||
}
|
||||
.confidential {
|
||||
background: #f8d7da; border: 1px solid #f5c6cb;
|
||||
border-radius: 4px; padding: 6px 12px;
|
||||
font-size: 11px; color: #721c24; font-weight: 600;
|
||||
text-align: center; margin-bottom: 16px;
|
||||
}
|
||||
.notice {
|
||||
background: #e7f3ff; border-left: 4px solid #2196F3;
|
||||
padding: 10px 14px; margin: 16px 0; font-size: 12px;
|
||||
}
|
||||
.policy-context {
|
||||
background: #f8f9fa; border-left: 3px solid #667eea;
|
||||
padding: 12px 16px; margin: 12px 0; font-size: 12px; color: #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.sig-date-block { border-top: 1.5px solid #333; padding-top: 10px; min-height: 60px; margin-top: 36px; }
|
||||
.footer-bar { margin-top: 40px; padding: 10px 0; border-top: 2px solid #000000; font-size: 10px; color: #888; text-align: center; }
|
||||
.confidential { background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; padding: 6px 12px; font-size: 11px; color: #721c24; font-weight: 600; text-align: center; margin-bottom: 16px; }
|
||||
.notice { background: #e7f3ff; border-left: 4px solid #2196F3; padding: 10px 14px; margin: 16px 0; font-size: 12px; }
|
||||
.policy-context { background: #f8f9fa; border-left: 3px solid #667eea; padding: 12px 16px; margin: 12px 0; font-size: 12px; color: #444; border-radius: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -155,9 +92,7 @@ function buildHtml(v, score) {
|
||||
|
||||
<div style="padding: 0 4px;">
|
||||
|
||||
<div class="confidential" style="margin-top:16px;">
|
||||
⚠ CONFIDENTIAL — For authorized HR and management use only
|
||||
</div>
|
||||
<div class="confidential" style="margin-top:16px;">⚠ CONFIDENTIAL — For authorized HR and management use only</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">Employee Information</div>
|
||||
@@ -179,26 +114,17 @@ function buildHtml(v, score) {
|
||||
${v.location ? row('Location / Context', v.location) : ''}
|
||||
${row('Submitted By', v.submitted_by || 'System')}
|
||||
</table>
|
||||
${v.details ? `
|
||||
<div class="policy-context">
|
||||
<strong>Incident Details:</strong><br />
|
||||
${v.details}
|
||||
</div>` : ''}
|
||||
${v.details ? `<div class="policy-context"><strong>Incident Details:</strong><br />${v.details}</div>` : ''}
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">CPAS Point Assessment</div>
|
||||
<div class="points-display">
|
||||
<div class="pts">${v.points}</div>
|
||||
<div class="lbl">Points Assessed — This Violation</div>
|
||||
</div>
|
||||
<div class="points-display"><div class="pts">${v.points}</div><div class="lbl">Points Assessed — This Violation</div></div>
|
||||
<div class="score-box">
|
||||
<div class="score-cell">
|
||||
<div class="score-num" style="color:${tier.color};">${activePts}</div>
|
||||
<div class="score-lbl">Active Points (Prior)</div>
|
||||
<div style="margin-top:6px;">
|
||||
<span class="tier-badge" style="color:${tier.color};">${tier.label}</span>
|
||||
</div>
|
||||
<div style="margin-top:6px;"><span class="tier-badge" style="color:${tier.color};">${tier.label}</span></div>
|
||||
</div>
|
||||
<div class="score-cell" style="font-size:28px; font-weight:300; color:#ccc; line-height:1.8;">+</div>
|
||||
<div class="score-cell">
|
||||
@@ -209,46 +135,26 @@ function buildHtml(v, score) {
|
||||
<div class="score-cell">
|
||||
<div class="score-num" style="color:${newTier.color};">${newTotal}</div>
|
||||
<div class="score-lbl">New Active Total</div>
|
||||
<div style="margin-top:6px;">
|
||||
<span class="tier-badge" style="color:${newTier.color};">${newTier.label}</span>
|
||||
</div>
|
||||
<div style="margin-top:6px;"><span class="tier-badge" style="color:${newTier.color};">${newTier.label}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
${tierChange ? `
|
||||
<div class="tier-change">
|
||||
<strong>⚠ Tier Escalation:</strong> This violation advances the employee from
|
||||
<strong>${tier.label}</strong> to <strong>${newTier.label}</strong>.
|
||||
</div>` : ''}
|
||||
${tierChange ? `<div class="tier-change"><strong>⚠ Tier Escalation:</strong> This violation advances the employee from <strong>${tier.label}</strong> to <strong>${newTier.label}</strong>.</div>` : ''}
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">CPAS Tier Reference</div>
|
||||
<table>
|
||||
<tr style="background:#f8f9fa;">
|
||||
<th style="padding:7px 12px; text-align:left; font-size:12px;">Points</th>
|
||||
<th style="padding:7px 12px; text-align:left; font-size:12px;">Tier</th>
|
||||
</tr>
|
||||
${TIERS.map(t => `
|
||||
<tr style="${newTotal >= t.min && newTotal <= t.max ? 'background:#fff3cd; font-weight:700;' : ''}">
|
||||
<td style="padding:6px 12px; border-bottom:1px solid #eee; font-size:12px;">${t.min === 30 ? '30+' : t.min + '–' + t.max}</td>
|
||||
<td style="padding:6px 12px; border-bottom:1px solid #eee; font-size:12px; color:${t.color};">${t.label}</td>
|
||||
</tr>`).join('')}
|
||||
<tr style="background:#f8f9fa;"><th style="padding:7px 12px; text-align:left; font-size:12px;">Points</th><th style="padding:7px 12px; text-align:left; font-size:12px;">Tier</th></tr>
|
||||
${TIERS.map(t => `<tr style="${newTotal >= t.min && newTotal <= t.max ? 'background:#fff3cd; font-weight:700;' : ''}"><td style="padding:6px 12px; border-bottom:1px solid #eee; font-size:12px;">${t.min === 30 ? '30+' : t.min + '–' + t.max}</td><td style="padding:6px 12px; border-bottom:1px solid #eee; font-size:12px; color:${t.color};">${t.label}</td></tr>`).join('')}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="notice">
|
||||
<strong>Employee Notice:</strong> CPAS points remain active for a rolling 90-day period from the date of each incident.
|
||||
Accumulation of points may result in tier escalation and associated consequences as outlined in the Employee Handbook.
|
||||
</div>
|
||||
<div class="notice"><strong>Employee Notice:</strong> CPAS points remain active for a rolling 90-day period from the date of each incident. Accumulation of points may result in tier escalation and associated consequences as outlined in the Employee Handbook.</div>
|
||||
|
||||
<div class="sig-section">
|
||||
<div class="section-title" style="background:#000000;">Acknowledgement & Signatures</div>
|
||||
<div style="padding: 16px 0;">
|
||||
<p style="font-size:12px; color:#555; margin-bottom:28px; line-height:1.6;">
|
||||
By signing below, the employee acknowledges receipt of this violation record.
|
||||
Acknowledgement does not imply agreement. The employee may submit a written
|
||||
response within 5 business days.
|
||||
</p>
|
||||
<div style="padding: 20px 0;">
|
||||
<p style="font-size:12px; color:#555; margin-bottom:32px; line-height:1.6;">By signing below, the employee acknowledges receipt of this violation record. Acknowledgement does not imply agreement. The employee may submit a written response within 5 business days.</p>
|
||||
<div class="sig-grid">
|
||||
<div>
|
||||
<div class="sig-block"><div class="sig-label">Employee Signature</div></div>
|
||||
@@ -262,11 +168,7 @@ function buildHtml(v, score) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bar">
|
||||
CPAS Violation Record — Document ID: CPAS-${v.id.toString().padStart(5,'0')} |
|
||||
${v.employee_name} | Incident: ${v.incident_date} |
|
||||
Message Point Media Internal Use Only
|
||||
</div>
|
||||
<div class="footer-bar">CPAS Violation Record — Document ID: CPAS-${v.id.toString().padStart(5,'0')} | ${v.employee_name} | Incident: ${v.incident_date} | Message Point Media Internal Use Only</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user