Merge pull request 'Upload files to "client/src/components"' (#17) from p4-hotfixes into master
Reviewed-on: #17
This commit was merged in pull request #17.
This commit is contained in:
@@ -5,148 +5,66 @@ import NegateModal from './NegateModal';
|
||||
|
||||
const s = {
|
||||
overlay: {
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
background: 'rgba(0,0,0,0.75)',
|
||||
zIndex: 1000,
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'flex-end',
|
||||
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',
|
||||
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,
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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,
|
||||
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',
|
||||
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,
|
||||
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',
|
||||
background: '#3c1114', border: '1px solid #f5c6cb', borderRadius: '6px',
|
||||
padding: '12px', marginTop: '8px', fontSize: '12px', color: '#ffb3b8',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -174,17 +92,11 @@ export default function EmployeeModal({ employeeId, onClose }) {
|
||||
.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 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`;
|
||||
@@ -208,9 +120,7 @@ export default function EmployeeModal({ employeeId, onClose }) {
|
||||
|
||||
const handleNegate = async ({ resolution_type, details, resolved_by }) => {
|
||||
await axios.patch(`/api/violations/${negating.id}/negate`, {
|
||||
resolution_type,
|
||||
details,
|
||||
resolved_by,
|
||||
resolution_type, details, resolved_by,
|
||||
});
|
||||
setNegating(null);
|
||||
setConfirmDel(null);
|
||||
@@ -221,115 +131,68 @@ export default function EmployeeModal({ employeeId, onClose }) {
|
||||
const active = violations.filter((v) => !v.negated);
|
||||
const negated = violations.filter((v) => v.negated);
|
||||
|
||||
// FIX: overlay click only closes if clicking the backdrop itself, NOT children
|
||||
const handleOverlayClick = (e) => {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
// FIX: panel uses onClick stopPropagation to prevent bubbling to overlay
|
||||
<div style={s.overlay} onClick={handleOverlayClick}>
|
||||
<div style={s.panel}>
|
||||
<div style={s.panel} onClick={(e) => e.stopPropagation()}>
|
||||
|
||||
{/* ── Header ── */}
|
||||
<div style={s.header}>
|
||||
<button style={s.closeBtn} onClick={onClose}>
|
||||
✕
|
||||
</button>
|
||||
<div style={{ fontSize: '20px', fontWeight: 700 }}>
|
||||
{loading ? 'Loading…' : employee?.name || 'Employee Profile'}
|
||||
<button style={s.closeBtn} onClick={onClose}>✕</button>
|
||||
<div style={{ fontSize: '18px', fontWeight: 700 }}>
|
||||
{employee ? employee.name : 'Employee'}
|
||||
</div>
|
||||
{employee && (
|
||||
<div style={{ fontSize: '12px', opacity: 0.8, marginTop: '4px' }}>
|
||||
{[employee.department, employee.supervisor ? `Supervisor: ${employee.supervisor}` : null]
|
||||
.filter(Boolean)
|
||||
.join(' · ')}
|
||||
<div style={{ fontSize: '12px', color: '#b5b5c0', marginTop: '4px' }}>
|
||||
{employee.department} {employee.supervisor && `· Supervisor: ${employee.supervisor}`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Body ── */}
|
||||
<div style={s.body}>
|
||||
{loading ? (
|
||||
<p
|
||||
style={{
|
||||
color: '#77798a',
|
||||
textAlign: 'center',
|
||||
paddingTop: '40px',
|
||||
}}
|
||||
>
|
||||
Loading…
|
||||
</p>
|
||||
<div style={{ padding: '40px', textAlign: 'center', color: '#b5b5c0' }}>Loading…</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Score Cards */}
|
||||
{score && (
|
||||
<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 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?.violation_count ?? 0}</div>
|
||||
<div style={s.scoreLbl}>90-Day Violations</div>
|
||||
<div style={s.scoreNum}>{score.total_violations}</div>
|
||||
<div style={s.scoreLbl}>Total 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.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>
|
||||
|
||||
{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>
|
||||
)}
|
||||
{score && <CpasBadge points={score.active_points} style={{ marginBottom: '20px' }} />}
|
||||
|
||||
{/* ── Active Violations ── */}
|
||||
<div style={s.sectionHd}>Active Violations</div>
|
||||
{active.length === 0 ? (
|
||||
<p
|
||||
style={{
|
||||
color: '#77798a',
|
||||
fontSize: '13px',
|
||||
fontStyle: 'italic',
|
||||
}}
|
||||
>
|
||||
<div style={{ color: '#77798a', fontStyle: 'italic', fontSize: '12px' }}>
|
||||
No active violations on record.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<table style={s.table}>
|
||||
<thead>
|
||||
@@ -346,91 +209,52 @@ export default function EmployeeModal({ employeeId, onClose }) {
|
||||
<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>
|
||||
<div style={{ fontSize: '10px', color: '#9ca0b8' }}>{v.category}</div>
|
||||
{v.details && (
|
||||
<div
|
||||
style={{
|
||||
color: '#d1d3e0',
|
||||
fontSize: '11px',
|
||||
marginTop: '3px',
|
||||
fontStyle: 'italic',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '10px', color: '#b5b5c0', marginTop: '2px' }}>
|
||||
{v.details}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
...s.td,
|
||||
fontWeight: 700,
|
||||
color: '#ff8a80',
|
||||
}}
|
||||
>
|
||||
{v.points}
|
||||
</td>
|
||||
<td style={{ ...s.td, fontWeight: 700 }}>{v.points}</td>
|
||||
<td style={s.td}>
|
||||
{/* FIX: All buttons use e.stopPropagation() to prevent overlay close */}
|
||||
<button
|
||||
style={s.actionBtn('#ffd666')}
|
||||
onClick={() => setNegating(v)}
|
||||
style={s.actionBtn('#ffc107')}
|
||||
onClick={(e) => { e.stopPropagation(); setNegating(v); setConfirmDel(null); }}
|
||||
>
|
||||
⊘ Negate
|
||||
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={() =>
|
||||
handleDownloadPdf(
|
||||
v.id,
|
||||
employee?.name,
|
||||
v.incident_date,
|
||||
)
|
||||
}
|
||||
onClick={(e) => { e.stopPropagation(); handleDownloadPdf(v.id, employee?.name, v.incident_date); }}
|
||||
>
|
||||
PDF
|
||||
</button>
|
||||
<br />
|
||||
{confirmDel === v.id ? (
|
||||
{confirmDel === v.id && (
|
||||
<div style={s.deleteConfirm}>
|
||||
<strong>Permanently delete?</strong> This cannot be
|
||||
undone.
|
||||
<div
|
||||
style={{
|
||||
marginTop: '8px',
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
Permanently delete? This cannot be undone.
|
||||
<div style={{ marginTop: '8px' }}>
|
||||
<button
|
||||
style={s.actionBtn('#ffb3b8')}
|
||||
onClick={() => handleHardDelete(v.id)}
|
||||
style={s.actionBtn('#ff4d4f')}
|
||||
onClick={(e) => { e.stopPropagation(); handleHardDelete(v.id); }}
|
||||
>
|
||||
Confirm Delete
|
||||
</button>
|
||||
<button
|
||||
style={s.actionBtn('#9ca0b8')}
|
||||
onClick={() => setConfirmDel(null)}
|
||||
style={s.actionBtn('#888')}
|
||||
onClick={(e) => { e.stopPropagation(); setConfirmDel(null); }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
style={{
|
||||
...s.actionBtn('#c0392b'),
|
||||
marginTop: '4px',
|
||||
}}
|
||||
onClick={() => setConfirmDel(v.id)}
|
||||
>
|
||||
✕ Delete
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -439,9 +263,10 @@ export default function EmployeeModal({ employeeId, onClose }) {
|
||||
</table>
|
||||
)}
|
||||
|
||||
{/* ── Negated / Resolved Violations ── */}
|
||||
{negated.length > 0 && (
|
||||
<>
|
||||
<div style={s.sectionHd}>Negated / Resolved Violations</div>
|
||||
<div style={s.sectionHd}>Negated / Resolved</div>
|
||||
<table style={s.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -457,89 +282,60 @@ export default function EmployeeModal({ employeeId, onClose }) {
|
||||
<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}
|
||||
<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: '11px',
|
||||
marginTop: '3px',
|
||||
color: '#d1d3e0',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '10px', color: '#b5b5c0', marginTop: '2px' }}>
|
||||
{v.resolution_details}
|
||||
</div>
|
||||
)}
|
||||
{v.resolved_by && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
color: '#9ca0b8',
|
||||
}}
|
||||
>
|
||||
<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)}
|
||||
style={s.actionBtn('#4db6ac')}
|
||||
onClick={(e) => { e.stopPropagation(); handleRestore(v.id); }}
|
||||
>
|
||||
↩ Restore
|
||||
Restore
|
||||
</button>
|
||||
{confirmDel === v.id ? (
|
||||
<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}>
|
||||
<strong>Permanently delete?</strong>
|
||||
<div
|
||||
style={{
|
||||
marginTop: '8px',
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
Permanently delete? This cannot be undone.
|
||||
<div style={{ marginTop: '8px' }}>
|
||||
<button
|
||||
style={s.actionBtn('#ffb3b8')}
|
||||
onClick={() => handleHardDelete(v.id)}
|
||||
style={s.actionBtn('#ff4d4f')}
|
||||
onClick={(e) => { e.stopPropagation(); handleHardDelete(v.id); }}
|
||||
>
|
||||
Confirm
|
||||
Confirm Delete
|
||||
</button>
|
||||
<button
|
||||
style={s.actionBtn('#9ca0b8')}
|
||||
onClick={() => setConfirmDel(null)}
|
||||
style={s.actionBtn('#888')}
|
||||
onClick={(e) => { e.stopPropagation(); setConfirmDel(null); }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
style={s.actionBtn('#c0392b')}
|
||||
onClick={() => setConfirmDel(v.id)}
|
||||
>
|
||||
✕ Delete
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -553,6 +349,7 @@ export default function EmployeeModal({ employeeId, onClose }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FIX: NegateModal rendered OUTSIDE the panel so it sits at root z-index:2000 */}
|
||||
{negating && (
|
||||
<NegateModal
|
||||
violation={negating}
|
||||
|
||||
@@ -2,111 +2,66 @@ import React, { useState } from 'react';
|
||||
|
||||
const s = {
|
||||
overlay: {
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
background: 'rgba(0,0,0,0.75)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
zIndex: 2000,
|
||||
},
|
||||
modal: {
|
||||
width: '480px',
|
||||
maxWidth: '95vw',
|
||||
background: '#111217',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 16px 40px rgba(0,0,0,0.8)',
|
||||
color: '#f8f9fa',
|
||||
overflow: 'hidden',
|
||||
border: '1px solid #2a2b3a',
|
||||
width: '480px', maxWidth: '95vw', background: '#111217', borderRadius: '12px',
|
||||
boxShadow: '0 16px 40px rgba(0,0,0,0.8)', color: '#f8f9fa',
|
||||
overflow: 'hidden', border: '1px solid #2a2b3a',
|
||||
},
|
||||
header: {
|
||||
padding: '18px 24px',
|
||||
borderBottom: '1px solid #222',
|
||||
padding: '18px 24px', borderBottom: '1px solid #222',
|
||||
background: 'linear-gradient(135deg, #000000, #151622)',
|
||||
},
|
||||
title: {
|
||||
fontSize: '18px',
|
||||
fontWeight: 700,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: '12px',
|
||||
color: '#c0c2d6',
|
||||
marginTop: '4px',
|
||||
},
|
||||
body: {
|
||||
padding: '18px 24px 8px 24px',
|
||||
},
|
||||
title: { fontSize: '18px', fontWeight: 700 },
|
||||
subtitle: { fontSize: '12px', color: '#c0c2d6', marginTop: '4px' },
|
||||
body: { padding: '18px 24px 8px 24px' },
|
||||
pill: {
|
||||
background: '#3b2e00',
|
||||
borderRadius: '6px',
|
||||
padding: '8px 10px',
|
||||
fontSize: '12px',
|
||||
color: '#ffd666',
|
||||
border: '1px solid #d4af37',
|
||||
marginBottom: '14px',
|
||||
},
|
||||
label: {
|
||||
fontSize: '13px',
|
||||
fontWeight: 600,
|
||||
marginBottom: '4px',
|
||||
color: '#e5e7f1',
|
||||
background: '#3b2e00', borderRadius: '6px', padding: '8px 10px',
|
||||
fontSize: '12px', color: '#ffd666', border: '1px solid #d4af37', marginBottom: '14px',
|
||||
},
|
||||
label: { fontSize: '13px', fontWeight: 600, marginBottom: '4px', color: '#e5e7f1' },
|
||||
input: {
|
||||
width: '100%',
|
||||
padding: '9px 10px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #333544',
|
||||
background: '#050608',
|
||||
color: '#f8f9fa',
|
||||
fontSize: '13px',
|
||||
fontFamily: 'inherit',
|
||||
marginBottom: '14px',
|
||||
width: '100%', padding: '9px 10px', borderRadius: '6px',
|
||||
border: '1px solid #333544', background: '#050608', color: '#f8f9fa',
|
||||
fontSize: '13px', fontFamily: 'inherit', marginBottom: '14px',
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
textarea: {
|
||||
width: '100%',
|
||||
minHeight: '80px',
|
||||
resize: 'vertical',
|
||||
padding: '9px 10px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #333544',
|
||||
background: '#050608',
|
||||
color: '#f8f9fa',
|
||||
fontSize: '13px',
|
||||
fontFamily: 'inherit',
|
||||
marginBottom: '14px',
|
||||
width: '100%', minHeight: '80px', resize: 'vertical',
|
||||
padding: '9px 10px', borderRadius: '6px', border: '1px solid #333544',
|
||||
background: '#050608', color: '#f8f9fa', fontSize: '13px',
|
||||
fontFamily: 'inherit', marginBottom: '14px', boxSizing: 'border-box',
|
||||
},
|
||||
footer: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
gap: '10px',
|
||||
padding: '16px 24px 20px 24px',
|
||||
background: '#0c0d14',
|
||||
borderTop: '1px solid #222',
|
||||
display: 'flex', justifyContent: 'flex-end', gap: '10px',
|
||||
padding: '16px 24px 20px 24px', background: '#0c0d14', borderTop: '1px solid #222',
|
||||
},
|
||||
btnCancel: {
|
||||
padding: '10px 20px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #333544',
|
||||
background: '#050608',
|
||||
color: '#f8f9fa',
|
||||
fontWeight: 600,
|
||||
fontSize: '13px',
|
||||
cursor: 'pointer',
|
||||
padding: '10px 20px', borderRadius: '6px', border: '1px solid #333544',
|
||||
background: '#050608', color: '#f8f9fa', fontWeight: 600,
|
||||
fontSize: '13px', cursor: 'pointer',
|
||||
},
|
||||
btnConfirm: {
|
||||
padding: '10px 22px',
|
||||
borderRadius: '6px',
|
||||
border: 'none',
|
||||
padding: '10px 22px', borderRadius: '6px', border: 'none',
|
||||
background: 'linear-gradient(135deg, #d4af37 0%, #ffdf8a 100%)',
|
||||
color: '#000',
|
||||
fontWeight: 700,
|
||||
fontSize: '13px',
|
||||
cursor: 'pointer',
|
||||
textTransform: 'uppercase',
|
||||
color: '#000', fontWeight: 700, fontSize: '13px',
|
||||
cursor: 'pointer', textTransform: 'uppercase',
|
||||
},
|
||||
};
|
||||
|
||||
const RESOLUTION_OPTIONS = [
|
||||
'Corrective Training Completed',
|
||||
'Verbal Warning Issued',
|
||||
'Written Warning Issued',
|
||||
'Management Review',
|
||||
'Policy Exception Approved',
|
||||
'Data Entry Error',
|
||||
'Other',
|
||||
];
|
||||
|
||||
export default function NegateModal({ violation, onConfirm, onCancel }) {
|
||||
const [resolutionType, setResolutionType] = useState('Corrective Training Completed');
|
||||
const [details, setDetails] = useState('');
|
||||
@@ -123,75 +78,59 @@ export default function NegateModal({ violation, onConfirm, onCancel }) {
|
||||
});
|
||||
};
|
||||
|
||||
// FIX: overlay click only closes on backdrop, NOT modal children
|
||||
const handleOverlayClick = (e) => {
|
||||
if (e.target === e.currentTarget && onCancel) onCancel();
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={s.overlay} onClick={handleOverlayClick}>
|
||||
<div style={s.modal}>
|
||||
{/* FIX: stopPropagation prevents modal clicks from bubbling to overlay */}
|
||||
<div style={s.modal} onClick={(e) => e.stopPropagation()}>
|
||||
|
||||
<div style={s.header}>
|
||||
<div style={s.title}>⊘ Negate Violation Points</div>
|
||||
<div style={s.title}>Negate Violation</div>
|
||||
<div style={s.subtitle}>
|
||||
This will zero out the points from this incident. The record remains in the audit log.
|
||||
Record resolution for: <strong>{violation.violation_name}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={s.body}>
|
||||
<div style={s.pill}>
|
||||
{violation.violation_name} · {violation.points} pts · {violation.incident_date}
|
||||
⚠ {violation.points} pt{violation.points !== 1 ? 's' : ''} · {violation.incident_date} · {violation.category}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={s.label}>Resolution Type *</div>
|
||||
<div style={s.label}>Resolution Type</div>
|
||||
<select
|
||||
style={s.input}
|
||||
value={resolutionType}
|
||||
onChange={e => setResolutionType(e.target.value)}
|
||||
onChange={(e) => setResolutionType(e.target.value)}
|
||||
>
|
||||
<option>Corrective Training Completed</option>
|
||||
<option>Documentation Error</option>
|
||||
<option>Policy Clarification / Exception</option>
|
||||
<option>Management Discretion</option>
|
||||
{RESOLUTION_OPTIONS.map((opt) => (
|
||||
<option key={opt} value={opt}>{opt}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={s.label}>Additional Details</div>
|
||||
<div style={s.label}>Details / Notes</div>
|
||||
<textarea
|
||||
style={s.textarea}
|
||||
placeholder="Describe the resolution or context…"
|
||||
value={details}
|
||||
onChange={e => setDetails(e.target.value)}
|
||||
placeholder="Briefly describe why points are being negated..."
|
||||
onChange={(e) => setDetails(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={s.label}>Resolved By</div>
|
||||
<input
|
||||
style={s.input}
|
||||
placeholder="Manager or HR name…"
|
||||
value={resolvedBy}
|
||||
onChange={e => setResolvedBy(e.target.value)}
|
||||
placeholder="Supervisor or HR"
|
||||
onChange={(e) => setResolvedBy(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={s.footer}>
|
||||
<button
|
||||
type="button"
|
||||
style={s.btnCancel}
|
||||
onClick={() => onCancel && onCancel()}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
style={s.btnConfirm}
|
||||
onClick={handleConfirm}
|
||||
>
|
||||
Confirm Negation
|
||||
</button>
|
||||
<button style={s.btnCancel} onClick={onCancel}>Cancel</button>
|
||||
<button style={s.btnConfirm} onClick={handleConfirm}>Confirm Negation</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user