64 lines
3.1 KiB
React
64 lines
3.1 KiB
React
|
import React, { useState } from 'react';
|
|||
|
|
|
|||
|
|
const s = {
|
|||
|
|
wrapper: { marginTop: '24px' },
|
|||
|
|
title: { color: '#b5b5c0', fontSize: '16px', fontWeight: 700, marginBottom: '10px' },
|
|||
|
|
table: { width: '100%', borderCollapse: 'collapse', fontSize: '13px', background: '#111217', borderRadius: '6px', overflow: 'hidden', border: '1px solid #222' },
|
|||
|
|
th: { background: '#000000', color: '#f8f9fa', padding: '8px 10px', textAlign: 'left', fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' },
|
|||
|
|
td: { padding: '8px 10px', borderBottom: '1px solid #1c1d29', color: '#f8f9fa', verticalAlign: 'middle' },
|
|||
|
|
trEven: { background: '#111217' },
|
|||
|
|
trOdd: { background: '#151622' },
|
|||
|
|
pts: { fontWeight: 700, color: '#667eea' },
|
|||
|
|
toggle: { background: 'none', border: 'none', color: '#667eea', cursor: 'pointer', fontSize: '13px', padding: 0, textDecoration: 'underline' },
|
|||
|
|
empty: { color: '#77798a', fontStyle: 'italic', fontSize: '13px', marginTop: '8px' },
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function formatDate(d) {
|
|||
|
|
if (!d) return '–';
|
|||
|
|
const dt = new Date(d + 'T12:00:00');
|
|||
|
|
return dt.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'America/Chicago' });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function ViolationHistory({ history, loading }) {
|
|||
|
|
const [expanded, setExpanded] = useState(false);
|
|||
|
|
const visible = expanded ? history : history.slice(0, 5);
|
|||
|
|
|
|||
|
|
if (loading) return <p style={s.empty}>Loading history...</p>;
|
|||
|
|
if (!history.length) return <p style={s.empty}>No violations on record for this employee.</p>;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={s.wrapper}>
|
|||
|
|
<div style={s.title}>Recent Violations ({history.length} total)</div>
|
|||
|
|
<table style={s.table}>
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th style={s.th}>Date</th>
|
|||
|
|
<th style={s.th}>Violation</th>
|
|||
|
|
<th style={s.th}>Category</th>
|
|||
|
|
<th style={s.th}>Points</th>
|
|||
|
|
<th style={s.th}>Details</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{visible.map((v, i) => (
|
|||
|
|
<tr key={v.id} style={i % 2 === 0 ? s.trEven : s.trOdd}>
|
|||
|
|
<td style={s.td}>{formatDate(v.incident_date)}</td>
|
|||
|
|
<td style={s.td}>{v.violation_name}</td>
|
|||
|
|
<td style={{ ...s.td, color: '#c0c2d6' }}>{v.category}</td>
|
|||
|
|
<td style={{ ...s.td, ...s.pts }}>{v.points}</td>
|
|||
|
|
<td style={{ ...s.td, color: '#c0c2d6' }}>{v.details || '–'}</td>
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
{history.length > 5 && (
|
|||
|
|
<div style={{ marginTop: '8px' }}>
|
|||
|
|
<button style={s.toggle} onClick={() => setExpanded(e => !e)}>
|
|||
|
|
{expanded ? '▲ Show less' : `▼ Show all ${history.length} violations`}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|