Fix math logic for timeline
This commit is contained in:
@@ -0,0 +1,443 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import axios from 'axios';
|
||||
import CpasBadge, { getTier } from './CpasBadge';
|
||||
import NegateModal from './NegateModal';
|
||||
import EditEmployeeModal from './EditEmployeeModal';
|
||||
import AmendViolationModal from './AmendViolationModal';
|
||||
import ExpirationTimeline from './ExpirationTimeline';
|
||||
import EmployeeNotes from './EmployeeNotes';
|
||||
import { useToast } from './ToastProvider';
|
||||
|
||||
const s = {
|
||||
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',
|
||||
},
|
||||
headerRow: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' },
|
||||
closeBtn: {
|
||||
float: 'right', background: 'none', border: 'none', color: 'white',
|
||||
fontSize: '22px', cursor: 'pointer', lineHeight: 1, marginTop: '-2px',
|
||||
},
|
||||
editEmpBtn: {
|
||||
background: 'none', border: '1px solid #555', color: '#ccc', borderRadius: '5px',
|
||||
padding: '4px 10px', fontSize: '11px', cursor: 'pointer', marginTop: '8px', fontWeight: 600,
|
||||
},
|
||||
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,
|
||||
},
|
||||
amendBtn: {
|
||||
background: 'none', border: '1px solid #4db6ac', color: '#4db6ac',
|
||||
borderRadius: '4px', padding: '3px 8px', fontSize: '11px',
|
||||
cursor: 'pointer', marginRight: '4px', fontWeight: 600,
|
||||
},
|
||||
deleteConfirm: {
|
||||
background: '#3c1114', border: '1px solid #f5c6cb', borderRadius: '6px',
|
||||
padding: '12px', marginTop: '8px', fontSize: '12px', color: '#ffb3b8',
|
||||
},
|
||||
amendBadge: {
|
||||
display: 'inline-block', marginLeft: '4px', padding: '1px 5px', borderRadius: '8px',
|
||||
fontSize: '9px', fontWeight: 700, background: '#0e2a2a', color: '#4db6ac',
|
||||
border: '1px solid #1a4a4a', verticalAlign: 'middle',
|
||||
},
|
||||
};
|
||||
|
||||
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 [editingEmp, setEditingEmp] = useState(false);
|
||||
const [amending, setAmending] = useState(null); // violation object
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
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) => {
|
||||
try {
|
||||
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);
|
||||
toast.success('PDF downloaded.');
|
||||
} catch (err) {
|
||||
toast.error('PDF generation failed: ' + (err.response?.data?.error || err.message));
|
||||
}
|
||||
};
|
||||
|
||||
const handleHardDelete = async (id) => {
|
||||
try {
|
||||
await axios.delete(`/api/violations/${id}`);
|
||||
toast.success('Violation permanently deleted.');
|
||||
setConfirmDel(null);
|
||||
load();
|
||||
} catch (err) {
|
||||
toast.error('Delete failed: ' + (err.response?.data?.error || err.message));
|
||||
}
|
||||
};
|
||||
|
||||
const handleRestore = async (id) => {
|
||||
try {
|
||||
await axios.patch(`/api/violations/${id}/restore`);
|
||||
toast.success('Violation restored to active.');
|
||||
setConfirmDel(null);
|
||||
load();
|
||||
} catch (err) {
|
||||
toast.error('Restore failed: ' + (err.response?.data?.error || err.message));
|
||||
}
|
||||
};
|
||||
|
||||
const handleNegate = async ({ resolution_type, details, resolved_by }) => {
|
||||
try {
|
||||
await axios.patch(`/api/violations/${negating.id}/negate`, { resolution_type, details, resolved_by });
|
||||
toast.success('Violation negated.');
|
||||
setNegating(null);
|
||||
setConfirmDel(null);
|
||||
load();
|
||||
} catch (err) {
|
||||
toast.error('Negate failed: ' + (err.response?.data?.error || err.message));
|
||||
}
|
||||
};
|
||||
|
||||
const tier = score ? getTier(score.active_points) : null;
|
||||
const active = violations.filter((v) => !v.negated);
|
||||
const negated = violations.filter((v) => v.negated);
|
||||
|
||||
const handleOverlayClick = (e) => { if (e.target === e.currentTarget) onClose(); };
|
||||
|
||||
return (
|
||||
<div style={s.overlay} onClick={handleOverlayClick}>
|
||||
<div style={s.panel} onClick={(e) => e.stopPropagation()}>
|
||||
|
||||
{/* ── Header ── */}
|
||||
<div style={s.header}>
|
||||
<div style={s.headerRow}>
|
||||
<div>
|
||||
<div style={{ fontSize: '18px', fontWeight: 700 }}>
|
||||
{employee ? employee.name : 'Employee'}
|
||||
</div>
|
||||
{employee && (
|
||||
<div style={{ fontSize: '12px', color: '#b5b5c0', marginTop: '4px' }}>
|
||||
{employee.department} {employee.supervisor && `· Supervisor: ${employee.supervisor}`}
|
||||
</div>
|
||||
)}
|
||||
{employee && (
|
||||
<button style={s.editEmpBtn} onClick={() => setEditingEmp(true)}>
|
||||
✎ Edit Employee
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button style={s.closeBtn} onClick={onClose}>✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Body ── */}
|
||||
<div style={s.body}>
|
||||
{loading ? (
|
||||
<div style={{ padding: '40px', textAlign: 'center', color: '#b5b5c0' }}>Loading…</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Score Cards */}
|
||||
{score && (
|
||||
<div style={s.scoreRow}>
|
||||
<div style={s.scoreCard}>
|
||||
<div style={{ ...s.scoreNum, color: tier?.color || '#f8f9fa' }}>
|
||||
{score.active_points}
|
||||
</div>
|
||||
<div style={s.scoreLbl}>Active Points</div>
|
||||
</div>
|
||||
<div style={s.scoreCard}>
|
||||
<div style={s.scoreNum}>{score.total_violations}</div>
|
||||
<div style={s.scoreLbl}>Total Violations</div>
|
||||
</div>
|
||||
<div style={s.scoreCard}>
|
||||
<div style={s.scoreNum}>{score.negated_count}</div>
|
||||
<div style={s.scoreLbl}>Negated</div>
|
||||
</div>
|
||||
<div style={{ ...s.scoreCard, minWidth: '140px' }}>
|
||||
<div style={{ fontSize: '13px', fontWeight: 700, color: tier?.color || '#f8f9fa' }}>
|
||||
{tier ? tier.label : '—'}
|
||||
</div>
|
||||
<div style={s.scoreLbl}>Current Tier</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{score && <CpasBadge points={score.active_points} style={{ marginBottom: '20px' }} />}
|
||||
|
||||
{/* ── Employee Notes ── */}
|
||||
{employee && (
|
||||
<EmployeeNotes
|
||||
employeeId={employeeId}
|
||||
initialNotes={employee.notes}
|
||||
onSaved={(notes) => setEmployee(prev => ({ ...prev, notes }))}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ── Expiration Timeline ── */}
|
||||
{score && score.active_points > 0 && (
|
||||
<ExpirationTimeline
|
||||
employeeId={employeeId}
|
||||
currentPoints={score.active_points}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ── Active Violations ── */}
|
||||
<div style={s.sectionHd}>Active Violations</div>
|
||||
{active.length === 0 ? (
|
||||
<div style={{ color: '#777990', fontStyle: 'italic', fontSize: '12px' }}>
|
||||
No active violations on record.
|
||||
</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}>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}
|
||||
{v.amendment_count > 0 && (
|
||||
<span style={s.amendBadge}>{v.amendment_count} edit{v.amendment_count !== 1 ? 's' : ''}</span>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ fontSize: '10px', color: '#9ca0b8' }}>{v.category}</div>
|
||||
{v.details && (
|
||||
<div style={{ fontSize: '10px', color: '#b5b5c0', marginTop: '2px' }}>{v.details}</div>
|
||||
)}
|
||||
</td>
|
||||
<td style={{ ...s.td, fontWeight: 700 }}>{v.points}</td>
|
||||
<td style={s.td}>
|
||||
<button style={s.amendBtn} onClick={(e) => { e.stopPropagation(); setAmending(v); }}>
|
||||
Amend
|
||||
</button>
|
||||
<button
|
||||
style={s.actionBtn('#ffc107')}
|
||||
onClick={(e) => { e.stopPropagation(); setNegating(v); setConfirmDel(null); }}
|
||||
>
|
||||
Negate
|
||||
</button>
|
||||
<button
|
||||
style={s.actionBtn('#ff4d4f')}
|
||||
onClick={(e) => { e.stopPropagation(); setConfirmDel(confirmDel === v.id ? null : v.id); }}
|
||||
>
|
||||
{confirmDel === v.id ? 'Cancel' : 'Delete'}
|
||||
</button>
|
||||
<button
|
||||
style={s.pdfBtn}
|
||||
onClick={(e) => { e.stopPropagation(); handleDownloadPdf(v.id, employee?.name, v.incident_date); }}
|
||||
>
|
||||
PDF
|
||||
</button>
|
||||
{confirmDel === v.id && (
|
||||
<div style={s.deleteConfirm}>
|
||||
Permanently delete? This cannot be undone.
|
||||
<div style={{ marginTop: '8px' }}>
|
||||
<button
|
||||
style={s.actionBtn('#ff4d4f')}
|
||||
onClick={(e) => { e.stopPropagation(); handleHardDelete(v.id); }}
|
||||
>
|
||||
Confirm Delete
|
||||
</button>
|
||||
<button
|
||||
style={s.actionBtn('#888')}
|
||||
onClick={(e) => { e.stopPropagation(); setConfirmDel(null); }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
{/* ── Negated / Resolved Violations ── */}
|
||||
{negated.length > 0 && (
|
||||
<>
|
||||
<div style={s.sectionHd}>Negated / Resolved</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={{ fontWeight: 600 }}>{v.violation_name}</div>
|
||||
<div style={{ fontSize: '10px', color: '#9ca0b8' }}>{v.category}</div>
|
||||
</td>
|
||||
<td style={s.td}>{v.points}</td>
|
||||
<td style={s.td}>
|
||||
<span style={s.resTag}>{v.resolution_type}</span>
|
||||
{v.resolution_details && (
|
||||
<div style={{ fontSize: '10px', color: '#b5b5c0', marginTop: '2px' }}>
|
||||
{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('#4db6ac')}
|
||||
onClick={(e) => { e.stopPropagation(); handleRestore(v.id); }}
|
||||
>
|
||||
Restore
|
||||
</button>
|
||||
<button
|
||||
style={s.actionBtn('#ff4d4f')}
|
||||
onClick={(e) => { e.stopPropagation(); setConfirmDel(confirmDel === v.id ? null : v.id); }}
|
||||
>
|
||||
{confirmDel === v.id ? 'Cancel' : 'Delete'}
|
||||
</button>
|
||||
<button
|
||||
style={s.pdfBtn}
|
||||
onClick={(e) => { e.stopPropagation(); handleDownloadPdf(v.id, employee?.name, v.incident_date); }}
|
||||
>
|
||||
PDF
|
||||
</button>
|
||||
{confirmDel === v.id && (
|
||||
<div style={s.deleteConfirm}>
|
||||
Permanently delete? This cannot be undone.
|
||||
<div style={{ marginTop: '8px' }}>
|
||||
<button
|
||||
style={s.actionBtn('#ff4d4f')}
|
||||
onClick={(e) => { e.stopPropagation(); handleHardDelete(v.id); }}
|
||||
>
|
||||
Confirm Delete
|
||||
</button>
|
||||
<button
|
||||
style={s.actionBtn('#888')}
|
||||
onClick={(e) => { e.stopPropagation(); setConfirmDel(null); }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modals rendered outside panel to avoid z-index nesting issues */}
|
||||
{negating && (
|
||||
<NegateModal
|
||||
violation={negating}
|
||||
onConfirm={handleNegate}
|
||||
onCancel={() => setNegating(null)}
|
||||
/>
|
||||
)}
|
||||
{editingEmp && employee && (
|
||||
<EditEmployeeModal
|
||||
employee={employee}
|
||||
onClose={() => setEditingEmp(false)}
|
||||
onSaved={() => { toast.success('Employee updated.'); load(); }}
|
||||
/>
|
||||
)}
|
||||
{amending && (
|
||||
<AmendViolationModal
|
||||
violation={amending}
|
||||
onClose={() => setAmending(null)}
|
||||
onSaved={() => { toast.success('Violation amended.'); load(); }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user