Phase 2

client/src/components/ViolationHistory.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+
+const s = {
+    wrapper:  { marginTop: '24px' },
+    title:    { color: '#2c3e50', fontSize: '16px', fontWeight: 700, marginBottom: '10px' },
+    table:    { width: '100%', borderCollapse: 'collapse', fontSize: '13px' },
+    th:       { background: '#2c3e50', color: 'white', padding: '8px 10px', textAlign: 'left' },
+    td:       { padding: '8px 10px', borderBottom: '1px solid #dee2e6' },
+    trEven:   { background: '#f8f9fa' },
+    trOdd:    { background: 'white' },
+    pts:      { fontWeight: 700, color: '#667eea' },
+    toggle:   { background: 'none', border: 'none', color: '#667eea', cursor: 'pointer', fontSize: '13px', padding: 0, textDecoration: 'underline' },
+    empty:    { color: '#888', 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}>{v.category}</td>
+                            <td style={{ ...s.td, ...s.pts }}>{v.points}</td>
+                            <td style={s.td}>{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>
+    );
+}