feat: custom violation types — persist, manage, and use in violation form #46

Merged
jason merged 1 commits from claude/musing-bell into master 2026-03-18 16:25:53 -05:00
4 changed files with 527 additions and 5 deletions
Showing only changes of commit 95d56b5018 - Show all commits

View File

@@ -1,10 +1,11 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useMemo } from 'react';
import axios from 'axios';
import { violationData, violationGroups } from '../data/violations';
import useEmployeeIntelligence from '../hooks/useEmployeeIntelligence';
import CpasBadge from './CpasBadge';
import TierWarning from './TierWarning';
import ViolationHistory from './ViolationHistory';
import ViolationTypeModal from './ViolationTypeModal';
import { useToast } from './ToastProvider';
import { DEPARTMENTS } from '../data/departments';
@@ -46,14 +47,72 @@ export default function ViolationForm() {
const [status, setStatus] = useState(null);
const [lastViolId, setLastViolId] = useState(null);
const [pdfLoading, setPdfLoading] = useState(false);
const [customTypes, setCustomTypes] = useState([]);
const [typeModal, setTypeModal] = useState(null); // null | 'create' | <editing object>
const toast = useToast();
const intel = useEmployeeIntelligence(form.employeeId || null);
useEffect(() => {
axios.get('/api/employees').then(r => setEmployees(r.data)).catch(() => {});
fetchCustomTypes();
}, []);
const fetchCustomTypes = () => {
axios.get('/api/violation-types').then(r => setCustomTypes(r.data)).catch(() => {});
};
// Build a map of custom types keyed by type_key for fast lookup
const customTypeMap = useMemo(() =>
Object.fromEntries(customTypes.map(t => [t.type_key, t])),
[customTypes]
);
// Merge hardcoded and custom violation groups for the dropdown
const mergedGroups = useMemo(() => {
const groups = {};
// Start with all hardcoded groups
Object.entries(violationGroups).forEach(([cat, items]) => {
groups[cat] = [...items];
});
// Add custom types into their respective category, or create new group
customTypes.forEach(t => {
const item = {
key: t.type_key,
name: t.name,
category: t.category,
minPoints: t.min_points,
maxPoints: t.max_points,
chapter: t.chapter || '',
description: t.description || '',
fields: t.fields,
isCustom: true,
customId: t.id,
};
if (!groups[t.category]) groups[t.category] = [];
groups[t.category].push(item);
});
return groups;
}, [customTypes]);
// Resolve a violation definition from either the hardcoded registry or custom types
const resolveViolation = key => {
if (violationData[key]) return violationData[key];
const ct = customTypeMap[key];
if (ct) return {
name: ct.name,
category: ct.category,
chapter: ct.chapter || '',
description: ct.description || '',
minPoints: ct.min_points,
maxPoints: ct.max_points,
fields: ct.fields,
isCustom: true,
customId: ct.id,
};
return null;
};
useEffect(() => {
if (!violation || !form.violationType) return;
const allTime = intel.countsAllTime[form.violationType];
@@ -72,7 +131,7 @@ export default function ViolationForm() {
const handleViolationChange = e => {
const key = e.target.value;
const v = violationData[key] || null;
const v = resolveViolation(key);
setViolation(v);
setForm(prev => ({ ...prev, violationType: key, points: v ? v.minPoints : 1 }));
};
@@ -196,16 +255,37 @@ export default function ViolationForm() {
<div style={s.grid}>
<div style={{ ...s.item, ...s.fullCol }}>
<label style={s.label}>Violation Type:</label>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '5px' }}>
<label style={{ ...s.label, marginBottom: 0 }}>Violation Type:</label>
<div style={{ display: 'flex', gap: '6px' }}>
{violation?.isCustom && (
<button
type="button"
onClick={() => setTypeModal(customTypeMap[form.violationType])}
style={{ fontSize: '11px', padding: '3px 10px', borderRadius: '4px', border: '1px solid #4caf50', background: '#1a2e1a', color: '#4caf50', cursor: 'pointer', fontWeight: 600 }}
>
Edit Type
</button>
)}
<button
type="button"
onClick={() => setTypeModal('create')}
style={{ fontSize: '11px', padding: '3px 10px', borderRadius: '4px', border: '1px solid #d4af37', background: '#181200', color: '#ffd666', cursor: 'pointer', fontWeight: 600 }}
title="Add a new custom violation type"
>
+ Add Type
</button>
</div>
</div>
<select style={s.input} value={form.violationType} onChange={handleViolationChange} required>
<option value="">-- Select Violation Type --</option>
{Object.entries(violationGroups).map(([group, items]) => (
{Object.entries(mergedGroups).map(([group, items]) => (
<optgroup key={group} label={group}>
{items.map(v => {
const prior = priorCount90(v.key);
return (
<option key={v.key} value={v.key}>
{v.name}{prior > 0 ? `${prior}x in 90 days` : ''}
{v.name}{v.isCustom ? ' ✦' : ''}{prior > 0 ? `${prior}x in 90 days` : ''}
</option>
);
})}
@@ -216,6 +296,11 @@ export default function ViolationForm() {
{violation && (
<div style={s.contextBox}>
<strong>{violation.name}</strong>
{violation.isCustom && (
<span style={{ display: 'inline-block', marginLeft: '8px', padding: '1px 7px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#1a2e1a', color: '#4caf50', border: '1px solid #4caf50' }}>
Custom
</span>
)}
{isRepeat(form.violationType) && form.employeeId && (
<span style={s.repeatBadge}>
Repeat {intel.countsAllTime[form.violationType]?.count}x prior
@@ -348,6 +433,40 @@ export default function ViolationForm() {
</div>
)}
{typeModal && (
<ViolationTypeModal
editing={typeModal === 'create' ? null : typeModal}
onClose={() => setTypeModal(null)}
onSaved={saved => {
fetchCustomTypes();
setTypeModal(null);
// Auto-select the newly created type; do nothing on delete (saved === null)
if (saved) {
const v = {
name: saved.name,
category: saved.category,
chapter: saved.chapter || '',
description: saved.description || '',
minPoints: saved.min_points,
maxPoints: saved.max_points,
fields: saved.fields,
isCustom: true,
customId: saved.id,
};
setViolation(v);
setForm(prev => ({ ...prev, violationType: saved.type_key, points: saved.min_points }));
} else {
// Type was deleted — clear selection if it was the active type
setForm(prev => {
const stillExists = violationData[prev.violationType] || false;
return stillExists ? prev : { ...prev, violationType: '', points: 1 };
});
setViolation(null);
}
}}
/>
)}
</div>
);
}

View File

@@ -0,0 +1,292 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useToast } from './ToastProvider';
// Existing hardcoded categories — used for datalist autocomplete
const KNOWN_CATEGORIES = [
'Attendance & Punctuality',
'Administrative Integrity',
'Financial Stewardship',
'Operational Response',
'Professional Conduct',
'Work From Home',
'Safety & Security',
];
const CONTEXT_FIELDS = [
{ key: 'time', label: 'Incident Time' },
{ key: 'minutes', label: 'Minutes Late' },
{ key: 'amount', label: 'Amount / Value' },
{ key: 'location', label: 'Location / Context' },
{ key: 'description', label: 'Additional Details' },
];
const s = {
overlay: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px' },
modal: { background: '#111217', border: '1px solid #2a2b3a', borderRadius: '10px', width: '100%', maxWidth: '620px', maxHeight: '90vh', overflowY: 'auto', padding: '32px' },
title: { color: '#f8f9fa', fontSize: '20px', fontWeight: 700, marginBottom: '24px', borderBottom: '1px solid #2a2b3a', paddingBottom: '12px' },
label: { fontWeight: 600, color: '#e5e7f1', marginBottom: '5px', fontSize: '13px', display: 'block' },
input: { width: '100%', padding: '10px', border: '1px solid #333544', borderRadius: '4px', fontSize: '14px', fontFamily: 'inherit', background: '#050608', color: '#f8f9fa', boxSizing: 'border-box' },
textarea: { width: '100%', padding: '10px', border: '1px solid #333544', borderRadius: '4px', fontSize: '13px', fontFamily: 'inherit', background: '#050608', color: '#f8f9fa', resize: 'vertical', minHeight: '80px', boxSizing: 'border-box' },
group: { marginBottom: '18px' },
hint: { fontSize: '11px', color: '#9ca0b8', marginTop: '4px', fontStyle: 'italic' },
row: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px' },
toggle: { display: 'flex', gap: '8px', marginTop: '6px' },
toggleBtn: (active) => ({
padding: '7px 18px', borderRadius: '4px', fontSize: '13px', fontWeight: 600, cursor: 'pointer', border: '1px solid',
background: active ? '#d4af37' : '#050608',
color: active ? '#000' : '#9ca0b8',
borderColor: active ? '#d4af37' : '#333544',
}),
fieldGrid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', marginTop: '8px' },
checkbox: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', color: '#d1d3e0', cursor: 'pointer' },
btnRow: { display: 'flex', gap: '12px', justifyContent: 'flex-end', marginTop: '28px', paddingTop: '16px', borderTop: '1px solid #2a2b3a' },
btnSave: { padding: '10px 28px', fontSize: '14px', fontWeight: 600, border: 'none', borderRadius: '6px', cursor: 'pointer', background: 'linear-gradient(135deg, #d4af37 0%, #ffdf8a 100%)', color: '#000' },
btnDanger: { padding: '10px 18px', fontSize: '14px', fontWeight: 600, border: '1px solid #721c24', borderRadius: '6px', cursor: 'pointer', background: '#3c1114', color: '#ffb3b8' },
btnCancel: { padding: '10px 18px', fontSize: '14px', fontWeight: 600, border: '1px solid #333544', borderRadius: '6px', cursor: 'pointer', background: '#050608', color: '#f8f9fa' },
section: { background: '#181924', border: '1px solid #2a2b3a', borderRadius: '6px', padding: '16px', marginBottom: '18px' },
secTitle: { color: '#d4af37', fontSize: '13px', fontWeight: 700, marginBottom: '12px', textTransform: 'uppercase', letterSpacing: '0.05em' },
customBadge: { display: 'inline-block', marginLeft: '8px', padding: '1px 7px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#1a2e1a', color: '#4caf50', border: '1px solid #4caf50', verticalAlign: 'middle' },
};
const EMPTY = {
name: '', category: '', chapter: '', description: '',
pointType: 'fixed', // 'fixed' | 'sliding'
fixedPoints: 1,
minPoints: 1,
maxPoints: 5,
fields: ['description'],
};
export default function ViolationTypeModal({ onClose, onSaved, editing = null }) {
const [form, setForm] = useState(EMPTY);
const [saving, setSaving] = useState(false);
const [deleting, setDeleting] = useState(false);
const toast = useToast();
// Populate form when editing an existing type
useEffect(() => {
if (editing) {
const isSliding = editing.min_points !== editing.max_points;
setForm({
name: editing.name,
category: editing.category,
chapter: editing.chapter || '',
description: editing.description || '',
pointType: isSliding ? 'sliding' : 'fixed',
fixedPoints: isSliding ? editing.min_points : editing.min_points,
minPoints: editing.min_points,
maxPoints: editing.max_points,
fields: editing.fields || ['description'],
});
}
}, [editing]);
const set = (key, val) => setForm(prev => ({ ...prev, [key]: val }));
const toggleField = key => {
setForm(prev => ({
...prev,
fields: prev.fields.includes(key)
? prev.fields.filter(f => f !== key)
: [...prev.fields, key],
}));
};
const handleSave = async () => {
if (!form.name.trim()) { toast.warning('Violation name is required.'); return; }
if (!form.category.trim()) { toast.warning('Category is required.'); return; }
const minPts = form.pointType === 'fixed' ? parseInt(form.fixedPoints) || 1 : parseInt(form.minPoints) || 1;
const maxPts = form.pointType === 'fixed' ? minPts : parseInt(form.maxPoints) || 1;
if (maxPts < minPts) { toast.warning('Max points must be >= min points.'); return; }
if (form.fields.length === 0) { toast.warning('Select at least one context field.'); return; }
const payload = {
name: form.name.trim(),
category: form.category.trim(),
chapter: form.chapter.trim() || null,
description: form.description.trim() || null,
min_points: minPts,
max_points: maxPts,
fields: form.fields,
};
setSaving(true);
try {
let saved;
if (editing) {
const res = await axios.put(`/api/violation-types/${editing.id}`, payload);
saved = res.data;
toast.success(`"${saved.name}" updated.`);
} else {
const res = await axios.post('/api/violation-types', payload);
saved = res.data;
toast.success(`"${saved.name}" added to violation types.`);
}
onSaved(saved);
} catch (err) {
toast.error(err.response?.data?.error || err.message);
} finally {
setSaving(false);
}
};
const handleDelete = async () => {
if (!editing) return;
if (!window.confirm(`Delete "${editing.name}"? This cannot be undone and will fail if any violations reference this type.`)) return;
setDeleting(true);
try {
await axios.delete(`/api/violation-types/${editing.id}`);
toast.success(`"${editing.name}" deleted.`);
onSaved(null); // null signals a deletion to the parent
} catch (err) {
toast.error(err.response?.data?.error || err.message);
} finally {
setDeleting(false);
}
};
return (
<div style={s.overlay} onClick={e => e.target === e.currentTarget && onClose()}>
<div style={s.modal}>
<div style={s.title}>
{editing ? 'Edit Violation Type' : 'Add Violation Type'}
{editing && <span style={s.customBadge}>CUSTOM</span>}
</div>
{/* Basic Info */}
<div style={s.section}>
<div style={s.secTitle}>Violation Definition</div>
<div style={s.group}>
<label style={s.label}>Violation Name *</label>
<input
style={s.input}
type="text"
value={form.name}
onChange={e => set('name', e.target.value)}
placeholder="e.g. Unauthorized System Access"
/>
</div>
<div style={s.group}>
<label style={s.label}>Category *</label>
<input
style={s.input}
type="text"
list="vt-categories"
value={form.category}
onChange={e => set('category', e.target.value)}
placeholder="Select existing or type new category"
/>
<datalist id="vt-categories">
{KNOWN_CATEGORIES.map(c => <option key={c} value={c} />)}
</datalist>
<div style={s.hint}>Choose an existing category or type a new one to create a new group in the dropdown.</div>
</div>
<div style={s.group}>
<label style={s.label}>Handbook Reference / Chapter</label>
<input
style={s.input}
type="text"
value={form.chapter}
onChange={e => set('chapter', e.target.value)}
placeholder="e.g. Chapter 4, Section 6"
/>
</div>
<div style={s.group}>
<label style={s.label}>Description / Reference Text</label>
<textarea
style={s.textarea}
value={form.description}
onChange={e => set('description', e.target.value)}
placeholder="Paste the relevant handbook language or describe the infraction in plain terms..."
/>
<div style={s.hint}>Shown in the context box on the violation form and printed on the PDF.</div>
</div>
</div>
{/* Point Assignment */}
<div style={s.section}>
<div style={s.secTitle}>Point Assignment</div>
<label style={s.label}>Point Type</label>
<div style={s.toggle}>
<button type="button" style={s.toggleBtn(form.pointType === 'fixed')} onClick={() => set('pointType', 'fixed')}>Fixed</button>
<button type="button" style={s.toggleBtn(form.pointType === 'sliding')} onClick={() => set('pointType', 'sliding')}>Sliding Range</button>
</div>
<div style={{ ...s.hint, marginTop: '6px' }}>
Fixed = exact value every time. Sliding = supervisor adjusts within a min/max range.
</div>
{form.pointType === 'fixed' ? (
<div style={{ ...s.group, marginTop: '14px' }}>
<label style={s.label}>Points (Fixed)</label>
<input
style={{ ...s.input, width: '120px' }}
type="number" min="1" max="30"
value={form.fixedPoints}
onChange={e => set('fixedPoints', e.target.value)}
/>
</div>
) : (
<div style={{ ...s.row, marginTop: '14px' }}>
<div style={s.group}>
<label style={s.label}>Min Points</label>
<input
style={s.input}
type="number" min="1" max="30"
value={form.minPoints}
onChange={e => set('minPoints', e.target.value)}
/>
</div>
<div style={s.group}>
<label style={s.label}>Max Points</label>
<input
style={s.input}
type="number" min="1" max="30"
value={form.maxPoints}
onChange={e => set('maxPoints', e.target.value)}
/>
</div>
</div>
)}
</div>
{/* Context Fields */}
<div style={s.section}>
<div style={s.secTitle}>Context Fields</div>
<div style={s.hint}>Select which additional fields appear on the violation form for this type.</div>
<div style={s.fieldGrid}>
{CONTEXT_FIELDS.map(({ key, label }) => (
<label key={key} style={s.checkbox}>
<input
type="checkbox"
checked={form.fields.includes(key)}
onChange={() => toggleField(key)}
/>
{label}
</label>
))}
</div>
</div>
<div style={s.btnRow}>
{editing && (
<button type="button" style={s.btnDanger} onClick={handleDelete} disabled={deleting}>
{deleting ? 'Deleting…' : 'Delete Type'}
</button>
)}
<button type="button" style={s.btnCancel} onClick={onClose}>Cancel</button>
<button type="button" style={s.btnSave} onClick={handleSave} disabled={saving}>
{saving ? 'Saving…' : editing ? 'Save Changes' : 'Add Violation Type'}
</button>
</div>
</div>
</div>
);
}

View File

@@ -60,6 +60,23 @@ db.exec(`CREATE TABLE IF NOT EXISTS audit_log (
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)`);
// ── Feature: Custom Violation Types ──────────────────────────────────────────
// Persisted violation type definitions created via the UI. type_key is prefixed
// with 'custom_' to prevent collisions with hardcoded violation keys.
db.exec(`CREATE TABLE IF NOT EXISTS violation_types (
id INTEGER PRIMARY KEY AUTOINCREMENT,
type_key TEXT NOT NULL UNIQUE,
name TEXT NOT NULL,
category TEXT NOT NULL DEFAULT 'Custom',
chapter TEXT,
description TEXT,
min_points INTEGER NOT NULL DEFAULT 1,
max_points INTEGER NOT NULL DEFAULT 1,
fields TEXT NOT NULL DEFAULT '["description"]',
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
)`);
// Recreate view so it always filters negated rows
db.exec(`DROP VIEW IF EXISTS active_cpas_scores;
CREATE VIEW active_cpas_scores AS

View File

@@ -410,6 +410,100 @@ app.get('/api/audit', (req, res) => {
res.json(db.prepare(sql).all(...args));
});
// ── Custom Violation Types ────────────────────────────────────────────────────
// Persisted violation type definitions stored in violation_types table.
// type_key is auto-generated (custom_<slug>) to avoid collisions with hardcoded keys.
app.get('/api/violation-types', (req, res) => {
const rows = db.prepare('SELECT * FROM violation_types ORDER BY category ASC, name ASC').all();
res.json(rows.map(r => ({ ...r, fields: JSON.parse(r.fields) })));
});
app.post('/api/violation-types', (req, res) => {
const { name, category, chapter, description, min_points, max_points, fields, created_by } = req.body;
if (!name || !name.trim()) return res.status(400).json({ error: 'name is required' });
const minPts = parseInt(min_points) || 1;
const maxPts = parseInt(max_points) || minPts;
if (maxPts < minPts) return res.status(400).json({ error: 'max_points must be >= min_points' });
// Generate a unique type_key from the name, prefixed with 'custom_'
const base = 'custom_' + name.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
let typeKey = base;
let suffix = 2;
while (db.prepare('SELECT id FROM violation_types WHERE type_key = ?').get(typeKey)) {
typeKey = `${base}_${suffix++}`;
}
try {
const result = db.prepare(`
INSERT INTO violation_types (type_key, name, category, chapter, description, min_points, max_points, fields)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)
`).run(
typeKey,
name.trim(),
(category || 'Custom').trim(),
chapter || null,
description || null,
minPts,
maxPts,
JSON.stringify(fields && fields.length ? fields : ['description'])
);
const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(result.lastInsertRowid);
audit('violation_type_created', 'violation_type', result.lastInsertRowid, created_by || null, { name: row.name, category: row.category });
res.status(201).json({ ...row, fields: JSON.parse(row.fields) });
} catch (err) {
res.status(500).json({ error: err.message });
}
});
app.put('/api/violation-types/:id', (req, res) => {
const id = parseInt(req.params.id);
const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
if (!row) return res.status(404).json({ error: 'Violation type not found' });
const { name, category, chapter, description, min_points, max_points, fields, updated_by } = req.body;
if (!name || !name.trim()) return res.status(400).json({ error: 'name is required' });
const minPts = parseInt(min_points) || 1;
const maxPts = parseInt(max_points) || minPts;
if (maxPts < minPts) return res.status(400).json({ error: 'max_points must be >= min_points' });
db.prepare(`
UPDATE violation_types
SET name=?, category=?, chapter=?, description=?, min_points=?, max_points=?, fields=?, updated_at=CURRENT_TIMESTAMP
WHERE id=?
`).run(
name.trim(),
(category || 'Custom').trim(),
chapter || null,
description || null,
minPts,
maxPts,
JSON.stringify(fields && fields.length ? fields : ['description']),
id
);
const updated = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
audit('violation_type_updated', 'violation_type', id, updated_by || null, { name: updated.name, category: updated.category });
res.json({ ...updated, fields: JSON.parse(updated.fields) });
});
app.delete('/api/violation-types/:id', (req, res) => {
const id = parseInt(req.params.id);
const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
if (!row) return res.status(404).json({ error: 'Violation type not found' });
const usage = db.prepare('SELECT COUNT(*) as count FROM violations WHERE violation_type = ?').get(row.type_key);
if (usage.count > 0) {
return res.status(409).json({ error: `Cannot delete: ${usage.count} violation(s) reference this type. Negate those violations first.` });
}
db.prepare('DELETE FROM violation_types WHERE id = ?').run(id);
audit('violation_type_deleted', 'violation_type', id, null, { name: row.name, type_key: row.type_key });
res.json({ ok: true });
});
// ── PDF endpoint ─────────────────────────────────────────────────────────────
app.get('/api/violations/:id/pdf', async (req, res) => {
try {