fix: reduce PDF margins and remove redundant puppeteer footer

Reviewed-on: #19

Dockerfile

@@ -1,62 +1,28 @@
-# ─────────────────────────────────────────────────────────────────────────────
-# Stage 1: Builder
-# Installs ALL dependencies and compiles the React frontend inside Docker.
-# Nothing needs to be installed on the host machine except Docker itself.
-# ─────────────────────────────────────────────────────────────────────────────
 FROM node:20-alpine AS builder
-
 WORKDIR /build
-
-# Install backend deps
 COPY package.json ./
 RUN npm install
-
-# Install frontend deps and build React app
 COPY client/package.json ./client/
 RUN cd client && npm install
-
 COPY client/ ./client/
 RUN cd client && npm run build
 
-# ─────────────────────────────────────────────────────────────────────────────
-# Stage 2: Production image
-# Copies only what's needed to run — no dev tools, no node_modules for client.
-# Final image is lean (~180MB) and ready to run with zero host setup.
-# ─────────────────────────────────────────────────────────────────────────────
 FROM node:20-alpine AS production
-
-# Chromium + deps for Phase 3 Puppeteer PDF generation
-RUN apk add --no-cache \
-    chromium \
-    nss \
-    freetype \
-    harfbuzz \
-    ca-certificates \
-    ttf-freefont
-
+RUN apk add --no-cache chromium nss freetype harfbuzz ca-certificates ttf-freefont
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
 ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
 ENV NODE_ENV=production
 ENV PORT=3001
 ENV DB_PATH=/data/cpas.db
-
 WORKDIR /app
-
-# Copy backend deps from builder
 COPY --from=builder /build/node_modules ./node_modules
 COPY --from=builder /build/client/dist  ./client/dist
-
-# Copy backend source
-COPY server.js   ./
-COPY db/         ./db/
+COPY server.js    ./
 COPY package.json ./
-
-# Ensure data directory exists (will be overridden by volume mount)
+COPY db/          ./db/
+COPY pdf/         ./pdf/
+COPY client/public/static ./client/dist/static
 RUN mkdir -p /data
-
 EXPOSE 3001
-
-HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
-    CMD wget -qO- http://localhost:3001/api/health || exit 1
-
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3   CMD wget -qO- http://localhost:3001/api/health || exit 1
 CMD ["node", "server.js"]

README.md

@@ -1,11 +1,13 @@
 # CPAS Violation Tracker
 
-Single-container Dockerized web app for CPAS violation documentation.
-Built with React + Vite (frontend), Node.js + Express (backend), SQLite (database).
+Single-container Dockerized web app for CPAS violation documentation and workforce standing management.
+Built with **React + Vite** (frontend), **Node.js + Express** (backend), **SQLite** (database), and **Puppeteer** (PDF generation).
+
+---
 
 ## The only requirement on your machine: Docker Desktop
 
-Everything else — Node.js, npm, React build — happens inside Docker.
+Everything else — Node.js, npm, React build, Chromium for PDF — happens inside Docker.
 
 ---
 
@@ -41,18 +43,88 @@ docker stop cpas-tracker && docker rm cpas-tracker
 docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker
 ```
 
+---
+
+## Features
+
+### Company Dashboard
+- Live table of all employees sorted by active CPAS points (highest risk first)
+- Summary stat cards: total employees, elite standing (0 pts), with active points, at-risk count, highest active score
+- **At-risk badge**: flags employees within 2 points of the next tier escalation
+- Search/filter by name, department, or supervisor
+- Click any employee name to open their full profile modal
+
+### Violation Form
+- Select existing employee or enter new employee by name
+- **Employee intelligence**: shows current CPAS standing badge and 90-day violation count before submitting
+- Violation type dropdown grouped by category; shows prior 90-day counts inline
+- **Recidivist auto-escalation**: if an employee has prior violations of the same type, points slider auto-sets to maximum per policy
+- Repeat offense badge with prior count displayed
+- Context-sensitive fields (time, minutes late, amount, location, description) shown only when relevant to violation type
+- **Tier crossing warning** (TierWarning component): previews what tier the new points would push the employee into before submission
+- Point slider for discretionary adjustments within the violation's min/max range
+- One-click PDF download immediately after submission
+
+### Employee Profile Modal
+- Full violation history with resolution status
+- Negate / restore individual violations (soft delete with resolution type + notes)
+- Hard delete option for data entry errors
+- PDF download for any historical violation record
+
+### CPAS Tier System
+
+| Points | Tier | Label |
+|--------|------|-------|
+| 0–4    | 0–1  | Elite Standing |
+| 5–9    | 1    | Realignment |
+| 10–14  | 2    | Administrative Lockdown |
+| 15–19  | 3    | Verification |
+| 20–24  | 4    | Risk Mitigation |
+| 25–29  | 5    | Final Decision |
+| 30+    | 6    | Separation |
+
+Scores are computed over a **rolling 90-day window** (negated violations excluded).
+
+### PDF Generation
+- Puppeteer + system Chromium (bundled in Docker image)
+- Generated on-demand per violation via `GET /api/violations/:id/pdf`
+- Filename: `CPAS_<EmployeeName>_<IncidentDate>.pdf`
+- PDF captures prior active points **at the time of the incident** (snapshot stored on insert)
+
+---
+
+## API Reference
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| GET | `/api/health` | Health check |
+| GET | `/api/employees` | List all employees |
+| POST | `/api/employees` | Create or upsert employee |
+| GET | `/api/employees/:id/score` | Get active CPAS score for employee |
+| GET | `/api/dashboard` | All employees with active points + violation counts |
+| POST | `/api/violations` | Log a new violation |
+| GET | `/api/violations/employee/:id` | Get violation history for employee (with resolutions) |
+| PATCH | `/api/violations/:id/negate` | Negate a violation (soft delete + resolution record) |
+| PATCH | `/api/violations/:id/restore` | Restore a negated violation |
+| DELETE | `/api/violations/:id` | Hard delete a violation |
+| GET | `/api/violations/:id/pdf` | Download violation PDF |
+
+---
+
 ## Project Structure
 
 ```
-cpas-violation-tracker/
-├── Dockerfile                  # Multi-stage: builds React + runs Express
+cpas/
+├── Dockerfile                     # Multi-stage: builds React + runs Express w/ Chromium
 ├── .dockerignore
-├── package.json                # Backend (Express) deps
-├── server.js                   # API + static file server
+├── package.json                   # Backend (Express) deps
+├── server.js                      # API + static file server
 ├── db/
-│   ├── schema.sql              # Tables + 90-day score view
-│   └── database.js             # SQLite connection
-└── client/                     # React frontend (Vite)
+│   ├── schema.sql                 # Tables + 90-day active score view
+│   └── database.js                # SQLite connection (better-sqlite3)
+├── pdf/
+│   └── generator.js               # Puppeteer PDF generation
+└── client/                        # React frontend (Vite)
     ├── package.json
     ├── vite.config.js
     ├── index.html
@@ -60,14 +132,84 @@ cpas-violation-tracker/
         ├── main.jsx
         ├── App.jsx
         ├── data/
-        │   └── violations.js   # All CPAS violation definitions
+        │   └── violations.js      # All CPAS violation definitions + groups
+        ├── hooks/
+        │   └── useEmployeeIntelligence.js  # Score + history hook
         └── components/
-            └── ViolationForm.jsx
+            ├── CpasBadge.jsx      # Tier badge + color logic
+            ├── TierWarning.jsx    # Pre-submit tier crossing alert
+            ├── Dashboard.jsx      # Company-wide leaderboard
+            ├── ViolationForm.jsx  # Violation entry form
+            ├── EmployeeModal.jsx  # Employee profile + history modal
+            ├── NegateModal.jsx    # Negate/resolve violation dialog
+            └── ViolationHistory.jsx  # Violation list component
 ```
 
-## Phases
-- [x] Phase 1 — Container scaffold, SQLite schema, base React form
-- [ ] Phase 2 — Employee history, prior violation highlighting
-- [ ] Phase 3 — Puppeteer PDF generation
-- [ ] Phase 4 — Dashboard, CPAS scores, tier warnings
-- [ ] Phase 5 — Recidivist point auto-suggest
+---
+
+## Database Schema
+
+Three tables + one view:
+
+- **`employees`** — id, name, department, supervisor
+- **`violations`** — full incident record including `prior_active_points` snapshot at time of logging
+- **`violation_resolutions`** — resolution type, details, resolved_by (linked to violations)
+- **`active_cpas_scores`** (view) — sum of points for non-negated violations in rolling 90 days, grouped by employee
+
+---
+
+## Roadmap
+
+### ✅ Completed
+
+| Phase | Feature | Description |
+|-------|---------|-------------|
+| 1 | Container scaffold | Docker multi-stage build, Express server, SQLite schema |
+| 1 | Base violation form | Employee fields, violation type, incident date, point submission |
+| 2 | Employee intelligence | Live CPAS standing badge and 90-day count shown before submitting |
+| 2 | Prior violation highlighting | Violation dropdown annotates types with 90-day recurrence counts |
+| 2 | Recidivist auto-escalation | Points slider auto-maximizes on repeat same-type violations |
+| 2 | Violation history | Per-employee history list with resolution status |
+| 3 | PDF generation | Puppeteer/Chromium PDF per violation, downloadable immediately post-submit |
+| 3 | Prior-points snapshot | `prior_active_points` captured at insert time for accurate historical PDFs |
+| 4 | Company dashboard | Sortable employee table with live tier badges and at-risk flags |
+| 4 | Stat cards | Summary counts: total, clean, active, at-risk, highest score |
+| 4 | Tier crossing warning | Pre-submit alert when new points push employee to next tier |
+| 4 | Employee profile modal | Full history, negate/restore, hard delete, per-record PDF download |
+| 4 | Negate & restore | Soft-delete violations with resolution type + notes, fully reversible |
+
+---
+
+### 🔲 Proposed
+
+#### Reporting & Analytics
+- **Violation trends chart** — line/bar chart of violations per day/week/month, filterable by department or supervisor; useful for identifying systemic patterns vs. individual incidents
+- **Department heat map** — grid view showing violation density and average CPAS score by department; helps supervisors identify team-level risk
+- **Expiration timeline** — visual showing which active violations will roll off the 90-day window and when, so supervisors can anticipate tier drops
+- **CSV / Excel export** — bulk export of violations or dashboard data for external reporting or payroll integration
+
+#### Employee Management
+- **Employee edit / merge** — ability to update employee name, department, or supervisor without losing history; merge duplicate records created by name typos
+- **Supervisor view** — scoped dashboard showing only the employees under a given supervisor, useful for multi-supervisor environments
+- **Employee notes / flags** — free-text notes attached to an employee record (e.g. "on PIP", "union member") visible in the profile modal without affecting scoring
+
+#### Violation Workflow
+- **Acknowledgment signature field** — a "received by employee" name/date field on the violation form that prints on the PDF, replacing the blank signature line
+- **Draft / pending violations** — save a violation as draft before finalizing, useful when incidents need review before being officially logged
+- **Violation amendment** — edit a submitted violation's details (not points) with an audit trail, rather than delete-and-resubmit
+- **Bulk violation import** — CSV import for migrating historical records from paper logs or a prior system
+
+#### Notifications & Escalation
+- **Tier escalation alerts** — email or in-app notification when an employee crosses into Tier 2+ so the relevant supervisor is automatically informed
+- **Scheduled summary digest** — weekly email to supervisors listing their employees' current standings and any approaching tier thresholds
+- **At-risk threshold configuration** — make the "at-risk" warning threshold (currently hardcoded at 2 pts) configurable per deployment
+
+#### Infrastructure & Ops
+- **Multi-user auth** — simple login with role-based access (admin, supervisor, read-only); currently the app has no auth and is assumed to run on a trusted internal network
+- **Audit log** — immutable log of all creates, negates, restores, and deletes with timestamp and acting user, stored separately from the violations table
+- **Automated DB backup** — cron job or Docker health hook to snapshot `/data/cpas.db` to a mounted backup volume or remote location on a schedule
+- **Dark/light theme toggle** — the UI is currently dark-only; a toggle would improve usability in bright environments
+
+---
+
+*Proposed features are suggestions based on common HR documentation workflows. Priority and implementation order should be driven by actual operational needs.*

client/src/App.jsx

@@ -1,57 +1,46 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import ViolationForm from './components/ViolationForm';
+import Dashboard     from './components/Dashboard';
 
-const styles = {
-    body: {
-        fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        minHeight: '100vh',
-        padding: '20px',
-        margin: 0,
-    },
-    container: {
-        maxWidth: '1200px',
-        margin: '0 auto',
-        background: 'white',
-        borderRadius: '12px',
-        boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
-        overflow: 'hidden',
-    },
-    header: {
-        background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)',
-        color: 'white',
-        padding: '30px',
-        textAlign: 'center',
-    },
-    statusBar: {
-        fontSize: '11px',
-        color: '#aaa',
-        marginTop: '6px',
-    }
+const tabs = [
+  { id: 'dashboard', label: '📊 Dashboard' },
+  { id: 'violation', label: '+ New Violation' },
+];
+
+const s = {
+  app:  { minHeight: '100vh', background: '#050608', fontFamily: "'Segoe UI', Arial, sans-serif", color: '#f8f9fa' },
+  nav:  { background: '#000000', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0, borderBottom: '1px solid #333' },
+  logoWrap: { display: 'flex', alignItems: 'center', marginRight: '32px', padding: '14px 0' },
+  logoImg:  { height: '28px', marginRight: '10px' },
+  logoText: { color: '#f8f9fa', fontWeight: 800, fontSize: '18px', letterSpacing: '0.5px' },
+  tab:  (active) => ({
+    padding: '18px 22px',
+    color: active ? '#f8f9fa' : 'rgba(248,249,250,0.6)',
+    borderBottom: active ? '3px solid #d4af37' : '3px solid transparent',
+    cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
+    background: 'none', border: 'none',
+  }),
+  card: { maxWidth: '1100px', margin: '30px auto', background: '#111217', borderRadius: '10px', boxShadow: '0 2px 16px rgba(0,0,0,0.6)', border: '1px solid #222' },
 };
 
 export default function App() {
-    const [apiStatus, setApiStatus] = useState('checking...');
-
-    useEffect(() => {
-        fetch('/api/health')
-            .then(r => r.json())
-            .then(() => setApiStatus('● API connected'))
-            .catch(() => setApiStatus('⚠ API unreachable'));
-    }, []);
-
-    return (
-        <div style={styles.body}>
-            <div style={styles.container}>
-                <div style={styles.header}>
-                    <h1 style={{ margin: 0, fontSize: '28px' }}>CPAS Violation Documentation System</h1>
-                    <p style={{ margin: '8px 0 0', fontSize: '14px', opacity: 0.9 }}>
-                        Generate Individual Violation Records with Contextual Fields
-                    </p>
-                    <p style={styles.statusBar}>{apiStatus}</p>
-                </div>
-                <ViolationForm />
-            </div>
+  const [tab, setTab] = useState('dashboard');
+  return (
+    <div style={s.app}>
+      <nav style={s.nav}>
+        <div style={s.logoWrap}>
+          <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
+          <div style={s.logoText}>CPAS Tracker</div>
         </div>
-    );
+        {tabs.map(t => (
+          <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
+            {t.label}
+          </button>
+        ))}
+      </nav>
+      <div style={s.card}>
+        {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
+      </div>
+    </div>
+  );
 }

client/src/components/Dashboard.jsx

@@ -0,0 +1,193 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import axios from 'axios';
+import CpasBadge, { getTier } from './CpasBadge';
+import EmployeeModal from './EmployeeModal';
+
+const AT_RISK_THRESHOLD = 2;
+
+const TIERS = [
+  { min: 0,  max: 4   },
+  { min: 5,  max: 9   },
+  { min: 10, max: 14  },
+  { min: 15, max: 19  },
+  { min: 20, max: 24  },
+  { min: 25, max: 29  },
+  { min: 30, max: 999 },
+];
+
+function nextTierBoundary(points) {
+  for (const t of TIERS) {
+    if (points >= t.min && points <= t.max && t.max < 999) return t.max + 1;
+  }
+  return null;
+}
+
+function isAtRisk(points) {
+  const boundary = nextTierBoundary(points);
+  return boundary !== null && (boundary - points) <= AT_RISK_THRESHOLD;
+}
+
+const s = {
+  wrap:        { padding: '32px 40px', color: '#f8f9fa' },
+  header:      { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px', flexWrap: 'wrap', gap: '12px' },
+  title:       { fontSize: '24px', fontWeight: 700, color: '#f8f9fa' },
+  subtitle:    { fontSize: '13px', color: '#b5b5c0', marginTop: '3px' },
+  statsRow:    { display: 'flex', gap: '16px', flexWrap: 'wrap', marginBottom: '28px' },
+  statCard:    { flex: '1', minWidth: '140px', background: '#181924', border: '1px solid #30313f', borderRadius: '8px', padding: '16px', textAlign: 'center' },
+  statNum:     { fontSize: '28px', fontWeight: 800, color: '#f8f9fa' },
+  statLbl:     { fontSize: '11px', color: '#b5b5c0', marginTop: '4px' },
+  search:      { padding: '10px 14px', border: '1px solid #333544', borderRadius: '6px', fontSize: '14px', width: '260px', background: '#050608', color: '#f8f9fa' },
+  table:       { width: '100%', borderCollapse: 'collapse', background: '#111217', borderRadius: '8px', overflow: 'hidden', boxShadow: '0 1px 8px rgba(0,0,0,0.6)', border: '1px solid #222' },
+  th:          { background: '#000000', color: '#f8f9fa', padding: '10px 14px', textAlign: 'left', fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' },
+  td:          { padding: '11px 14px', borderBottom: '1px solid #1c1d29', fontSize: '13px', verticalAlign: 'middle', color: '#f8f9fa' },
+  nameBtn:     { background: 'none', border: 'none', cursor: 'pointer', fontWeight: 600, color: '#d4af37', fontSize: '14px', padding: 0, textDecoration: 'underline dotted' },
+  atRiskBadge: { display: 'inline-block', marginLeft: '8px', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#3b2e00', color: '#ffd666', border: '1px solid #d4af37', verticalAlign: 'middle' },
+  zeroRow:     { color: '#77798a', fontStyle: 'italic', fontSize: '12px' },
+  refreshBtn:  { padding: '9px 18px', background: '#d4af37', color: '#000', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' },
+};
+
+export default function Dashboard() {
+  const [employees, setEmployees] = useState([]);
+  const [filtered,  setFiltered]  = useState([]);
+  const [search,    setSearch]    = useState('');
+  const [selectedId, setSelectedId] = useState(null);
+  const [loading,   setLoading]   = useState(true);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    axios.get('/api/dashboard')
+      .then(r => { setEmployees(r.data); setFiltered(r.data); })
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  useEffect(() => {
+    const q = search.toLowerCase();
+    setFiltered(employees.filter(e =>
+      e.name.toLowerCase().includes(q) ||
+      (e.department || '').toLowerCase().includes(q) ||
+      (e.supervisor || '').toLowerCase().includes(q)
+    ));
+  }, [search, employees]);
+
+  const atRiskCount = employees.filter(e => isAtRisk(e.active_points)).length;
+  const activeCount = employees.filter(e => e.active_points > 0).length;
+  const cleanCount  = employees.filter(e => e.active_points === 0).length;
+  const maxPoints   = employees.reduce((m, e) => Math.max(m, e.active_points), 0);
+
+  return (
+    // FIX: Fragment wraps both s.wrap AND EmployeeModal so the modal is
+    // outside the s.wrap div — React synthetic events will no longer bubble
+    // from inside the modal up through the Dashboard's DOM tree.
+    <>
+      <div style={s.wrap}>
+        <div style={s.header}>
+          <div>
+            <div style={s.title}>Company Dashboard</div>
+            <div style={s.subtitle}>Click any employee name to view their full profile</div>
+          </div>
+          <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+            <input
+              style={s.search}
+              placeholder="Search name, dept, supervisor…"
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+            />
+            <button style={s.refreshBtn} onClick={load}>↻ Refresh</button>
+          </div>
+        </div>
+
+        <div style={s.statsRow}>
+          <div style={s.statCard}>
+            <div style={s.statNum}>{employees.length}</div>
+            <div style={s.statLbl}>Total Employees</div>
+          </div>
+          <div style={{ ...s.statCard, borderTop: '3px solid #28a745' }}>
+            <div style={{ ...s.statNum, color: '#6ee7b7' }}>{cleanCount}</div>
+            <div style={s.statLbl}>Elite Standing (0 pts)</div>
+          </div>
+          <div style={{ ...s.statCard, borderTop: '3px solid #d4af37' }}>
+            <div style={{ ...s.statNum, color: '#ffd666' }}>{activeCount}</div>
+            <div style={s.statLbl}>With Active Points</div>
+          </div>
+          <div style={{ ...s.statCard, borderTop: '3px solid #ffb020' }}>
+            <div style={{ ...s.statNum, color: '#ffdf8a' }}>{atRiskCount}</div>
+            <div style={s.statLbl}>At Risk (≤{AT_RISK_THRESHOLD} pts to next tier)</div>
+          </div>
+          <div style={{ ...s.statCard, borderTop: '3px solid #c0392b' }}>
+            <div style={{ ...s.statNum, color: '#ff8a80' }}>{maxPoints}</div>
+            <div style={s.statLbl}>Highest Active Score</div>
+          </div>
+        </div>
+
+        {loading ? (
+          <p style={{ color: '#77798a', textAlign: 'center', padding: '40px' }}>Loading…</p>
+        ) : (
+          <table style={s.table}>
+            <thead>
+              <tr>
+                <th style={s.th}>#</th>
+                <th style={s.th}>Employee</th>
+                <th style={s.th}>Department</th>
+                <th style={s.th}>Supervisor</th>
+                <th style={s.th}>Tier / Standing</th>
+                <th style={s.th}>Active Points</th>
+                <th style={s.th}>90-Day Violations</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.length === 0 && (
+                <tr>
+                  <td colSpan={7} style={{ ...s.td, textAlign: 'center', ...s.zeroRow }}>
+                    No employees found.
+                  </td>
+                </tr>
+              )}
+              {filtered.map((emp, i) => {
+                const risk     = isAtRisk(emp.active_points);
+                const tier     = getTier(emp.active_points);
+                const boundary = nextTierBoundary(emp.active_points);
+                return (
+                  <tr
+                    key={emp.id}
+                    style={{ background: risk ? '#181200' : i % 2 === 0 ? '#111217' : '#151622' }}
+                  >
+                    <td style={{ ...s.td, color: '#77798a', fontSize: '12px' }}>{i + 1}</td>
+                    <td style={s.td}>
+                      <button style={s.nameBtn} onClick={() => setSelectedId(emp.id)}>
+                        {emp.name}
+                      </button>
+                      {risk && (
+                        <span style={s.atRiskBadge}>
+                          ⚠ {boundary - emp.active_points} pt{boundary - emp.active_points > 1 ? 's' : ''} to {getTier(boundary).label.split('—')[0].trim()}
+                        </span>
+                      )}
+                    </td>
+                    <td style={{ ...s.td, color: '#c0c2d6' }}>{emp.department || '—'}</td>
+                    <td style={{ ...s.td, color: '#c0c2d6' }}>{emp.supervisor || '—'}</td>
+                    <td style={s.td}><CpasBadge points={emp.active_points} /></td>
+                    <td style={{ ...s.td, fontWeight: 700, color: tier.color, fontSize: '16px' }}>
+                      {emp.active_points}
+                    </td>
+                    <td style={{ ...s.td, color: '#c0c2d6' }}>{emp.violation_count}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {/* FIX: EmployeeModal is now OUTSIDE <div style={s.wrap}>.
+          React synthetic events no longer bubble from modal buttons
+          up through Dashboard's component tree. */}
+      {selectedId && (
+        <EmployeeModal
+          employeeId={selectedId}
+          onClose={() => { setSelectedId(null); load(); }}
+        />
+      )}
+    </>
+  );
+}

client/src/components/EmployeeModal.jsx

@@ -0,0 +1,362 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import axios from 'axios';
+import CpasBadge, { getTier } from './CpasBadge';
+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',
+  },
+  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',
+  },
+  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' },
+  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,
+  },
+  deleteConfirm: {
+    background: '#3c1114', border: '1px solid #f5c6cb', borderRadius: '6px',
+    padding: '12px', marginTop: '8px', fontSize: '12px', color: '#ffb3b8',
+  },
+};
+
+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 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) => {
+    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);
+  };
+
+  const handleHardDelete = async (id) => {
+    await axios.delete(`/api/violations/${id}`);
+    setConfirmDel(null);
+    load();
+  };
+
+  const handleRestore = async (id) => {
+    await axios.patch(`/api/violations/${id}/restore`);
+    setConfirmDel(null);
+    load();
+  };
+
+  const handleNegate = async ({ resolution_type, details, resolved_by }) => {
+    await axios.patch(`/api/violations/${negating.id}/negate`, {
+      resolution_type, details, resolved_by,
+    });
+    setNegating(null);
+    setConfirmDel(null);
+    load();
+  };
+
+  const tier = score ? getTier(score.active_points) : null;
+  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} onClick={(e) => e.stopPropagation()}>
+
+        {/* ── Header ── */}
+        <div style={s.header}>
+          <button style={s.closeBtn} onClick={onClose}>✕</button>
+          <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>
+          )}
+        </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' }} />}
+
+              {/* ── Active Violations ── */}
+              <div style={s.sectionHd}>Active Violations</div>
+              {active.length === 0 ? (
+                <div style={{ color: '#77798a', 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}</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}>
+                          {/* FIX: All buttons use e.stopPropagation() to prevent overlay close */}
+                          <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>
+
+      {/* FIX: NegateModal rendered OUTSIDE the panel so it sits at root z-index:2000 */}
+      {negating && (
+        <NegateModal
+          violation={negating}
+          onConfirm={handleNegate}
+          onCancel={() => setNegating(null)}
+        />
+      )}
+    </div>
+  );
+}

client/src/components/NegateModal.jsx

@@ -0,0 +1,138 @@
+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',
+    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',
+  },
+  header: {
+    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' },
+  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' },
+  input: {
+    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', boxSizing: 'border-box',
+  },
+  footer: {
+    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',
+  },
+  btnConfirm: {
+    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',
+  },
+};
+
+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('');
+  const [resolvedBy, setResolvedBy] = useState('');
+
+  if (!violation) return null;
+
+  const handleConfirm = () => {
+    if (!onConfirm) return;
+    onConfirm({
+      resolution_type: resolutionType,
+      details,
+      resolved_by: resolvedBy,
+    });
+  };
+
+  // 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}>
+      {/* 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</div>
+          <div style={s.subtitle}>
+            Record resolution for: <strong>{violation.violation_name}</strong>
+          </div>
+        </div>
+
+        <div style={s.body}>
+          <div style={s.pill}>
+            ⚠ {violation.points} pt{violation.points !== 1 ? 's' : ''} · {violation.incident_date} · {violation.category}
+          </div>
+
+          <div style={s.label}>Resolution Type</div>
+          <select
+            style={s.input}
+            value={resolutionType}
+            onChange={(e) => setResolutionType(e.target.value)}
+          >
+            {RESOLUTION_OPTIONS.map((opt) => (
+              <option key={opt} value={opt}>{opt}</option>
+            ))}
+          </select>
+
+          <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)}
+          />
+
+          <div style={s.label}>Resolved By</div>
+          <input
+            style={s.input}
+            placeholder="Manager or HR name…"
+            value={resolvedBy}
+            onChange={(e) => setResolvedBy(e.target.value)}
+          />
+        </div>
+
+        <div style={s.footer}>
+          <button style={s.btnCancel} onClick={onCancel}>Cancel</button>
+          <button style={s.btnConfirm} onClick={handleConfirm}>Confirm Negation</button>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/ViolationForm.jsx

@@ -7,281 +7,307 @@ import TierWarning from './TierWarning';
 import ViolationHistory from './ViolationHistory';
 
 const s = {
-    content:      { padding: '40px' },
-    section:      { background: '#f8f9fa', borderLeft: '4px solid #667eea', padding: '20px', marginBottom: '30px', borderRadius: '4px' },
-    sectionTitle: { color: '#2c3e50', fontSize: '20px', marginBottom: '15px' },
-    grid:         { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '15px', marginTop: '15px' },
-    item:         { display: 'flex', flexDirection: 'column' },
-    label:        { fontWeight: 600, color: '#555', marginBottom: '5px', fontSize: '13px' },
-    input:        { padding: '10px', border: '1px solid #ddd', borderRadius: '4px', fontSize: '14px', fontFamily: 'inherit' },
-    fullCol:      { gridColumn: '1 / -1' },
-    contextBox:   { background: '#f1f3f5', border: '1px solid #ced4da', borderRadius: '4px', padding: '10px', fontSize: '12px', color: '#444', marginTop: '4px' },
-    repeatBadge:  { display: 'inline-block', marginLeft: '8px', padding: '1px 7px', borderRadius: '10px', fontSize: '11px', fontWeight: 700, background: '#fff3cd', color: '#856404', border: '1px solid #ffc107' },
-    repeatWarn:   { background: '#fff3cd', border: '1px solid #ffc107', borderRadius: '4px', padding: '8px 12px', marginTop: '6px', fontSize: '12px', color: '#856404' },
-    pointBox:     { background: '#fff3cd', border: '2px solid #ffc107', padding: '15px', borderRadius: '6px', marginTop: '15px', textAlign: 'center' },
-    pointValue:   { fontSize: '24px', fontWeight: 'bold', color: '#667eea', margin: '10px 0' },
-    scoreRow:     { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '14px', flexWrap: 'wrap' },
-    btnRow:       { display: 'flex', gap: '15px', justifyContent: 'center', marginTop: '30px', flexWrap: 'wrap' },
-    btnPrimary:   { padding: '15px 40px', fontSize: '16px', fontWeight: 600, border: 'none', borderRadius: '6px', cursor: 'pointer', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', color: 'white', textTransform: 'uppercase' },
-    btnSecondary: { padding: '15px 40px', fontSize: '16px', fontWeight: 600, border: 'none', borderRadius: '6px', cursor: 'pointer', background: '#6c757d', color: 'white', textTransform: 'uppercase' },
-    note:         { background: '#e7f3ff', borderLeft: '4px solid #2196F3', padding: '15px', margin: '20px 0', borderRadius: '4px' },
-    statusOk:     { marginTop: '15px', padding: '15px', borderRadius: '6px', textAlign: 'center', fontWeight: 600, background: '#d4edda', color: '#155724', border: '1px solid #c3e6cb' },
-    statusErr:    { marginTop: '15px', padding: '15px', borderRadius: '6px', textAlign: 'center', fontWeight: 600, background: '#f8d7da', color: '#721c24', border: '1px solid #f5c6cb' },
+  content:      { padding: '32px 40px', background: '#111217', borderRadius: '10px', color: '#f8f9fa' },
+  section:      { background: '#181924', borderLeft: '4px solid #d4af37', padding: '20px', marginBottom: '30px', borderRadius: '4px', border: '1px solid #2a2b3a' },
+  sectionTitle: { color: '#f8f9fa', fontSize: '20px', marginBottom: '15px', fontWeight: 700 },
+  grid:         { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '15px', marginTop: '15px' },
+  item:         { display: 'flex', flexDirection: 'column' },
+  label:        { fontWeight: 600, color: '#e5e7f1', marginBottom: '5px', fontSize: '13px' },
+  input:        { padding: '10px', border: '1px solid #333544', borderRadius: '4px', fontSize: '14px', fontFamily: 'inherit', background: '#050608', color: '#f8f9fa' },
+  fullCol:      { gridColumn: '1 / -1' },
+  contextBox:   { background: '#141623', border: '1px solid #333544', borderRadius: '4px', padding: '10px', fontSize: '12px', color: '#d1d3e0', marginTop: '4px' },
+  repeatBadge:  { display: 'inline-block', marginLeft: '8px', padding: '1px 7px', borderRadius: '10px', fontSize: '11px', fontWeight: 700, background: '#3b2e00', color: '#ffd666', border: '1px solid #d4af37' },
+  repeatWarn:   { background: '#3b2e00', border: '1px solid #d4af37', borderRadius: '4px', padding: '8px 12px', marginTop: '6px', fontSize: '12px', color: '#ffdf8a' },
+  pointBox:     { background: '#181200', border: '2px solid #d4af37', padding: '15px', borderRadius: '6px', marginTop: '15px', textAlign: 'center' },
+  pointValue:   { fontSize: '24px', fontWeight: 'bold', color: '#ffd666', margin: '10px 0' },
+  scoreRow:     { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '14px', flexWrap: 'wrap' },
+  btnRow:       { display: 'flex', gap: '15px', justifyContent: 'center', marginTop: '30px', flexWrap: 'wrap' },
+  btnPrimary:   { padding: '15px 40px', fontSize: '16px', fontWeight: 600, border: 'none', borderRadius: '6px', cursor: 'pointer', background: 'linear-gradient(135deg, #d4af37 0%, #ffdf8a 100%)', color: '#000', textTransform: 'uppercase' },
+  btnPdf:       { padding: '15px 40px', fontSize: '16px', fontWeight: 600, border: 'none', borderRadius: '6px', cursor: 'pointer', background: 'linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)', color: 'white', textTransform: 'uppercase' },
+  btnSecondary: { padding: '15px 40px', fontSize: '16px', fontWeight: 600, border: '1px solid #333544', borderRadius: '6px', cursor: 'pointer', background: '#050608', color: '#f8f9fa', textTransform: 'uppercase' },
+  note:         { background: '#141623', borderLeft: '4px solid #2196F3', padding: '15px', margin: '20px 0', borderRadius: '4px', fontSize: '13px', color: '#d1d3e0' },
+  statusOk:     { marginTop: '15px', padding: '15px', borderRadius: '6px', textAlign: 'center', fontWeight: 600, background: '#053321', color: '#9ef7c1', border: '1px solid #0f5132' },
+  statusErr:    { marginTop: '15px', padding: '15px', borderRadius: '6px', textAlign: 'center', fontWeight: 600, background: '#3c1114', color: '#ffb3b8', border: '1px solid #f5c6cb' },
 };
 
 const EMPTY_FORM = {
-    employeeId: '', employeeName: '', department: '', supervisor: '', witnessName: '',
-    violationType: '', incidentDate: '', incidentTime: '',
-    amount: '', minutesLate: '', location: '', additionalDetails: '', points: 1,
+  employeeId: '', employeeName: '', department: '', supervisor: '', witnessName: '',
+  violationType: '', incidentDate: '', incidentTime: '',
+  amount: '', minutesLate: '', location: '', additionalDetails: '', points: 1,
 };
 
 export default function ViolationForm() {
-    const [employees, setEmployees] = useState([]);
-    const [form, setForm]           = useState(EMPTY_FORM);
-    const [violation, setViolation] = useState(null);
-    const [status, setStatus]       = useState(null);
+  const [employees,    setEmployees]    = useState([]);
+  const [form,         setForm]         = useState(EMPTY_FORM);
+  const [violation,    setViolation]    = useState(null);
+  const [status,       setStatus]       = useState(null);
+  const [lastViolId,   setLastViolId]   = useState(null);
+  const [pdfLoading,   setPdfLoading]   = useState(false);
 
-    // Phase 2: pull score + history whenever employee changes
-    const intel = useEmployeeIntelligence(form.employeeId || null);
+  const intel = useEmployeeIntelligence(form.employeeId || null);
 
-    useEffect(() => {
-        axios.get('/api/employees').then(r => setEmployees(r.data)).catch(() => {});
-    }, []);
+  useEffect(() => {
+    axios.get('/api/employees').then(r => setEmployees(r.data)).catch(() => {});
+  }, []);
 
-    // When violation type changes, check all-time counts and auto-suggest higher pts for recidivists
-    useEffect(() => {
-        if (!violation || !form.violationType) return;
-        const allTime = intel.countsAllTime[form.violationType];
-        if (allTime && allTime.count >= 1 && violation.minPoints !== violation.maxPoints) {
-            // Suggest max points for repeat offenders
-            setForm(prev => ({ ...prev, points: violation.maxPoints }));
-        } else {
-            setForm(prev => ({ ...prev, points: violation.minPoints }));
-        }
-    }, [form.violationType, violation, intel.countsAllTime]);
+  useEffect(() => {
+    if (!violation || !form.violationType) return;
+    const allTime = intel.countsAllTime[form.violationType];
+    if (allTime && allTime.count >= 1 && violation.minPoints !== violation.maxPoints) {
+      setForm(prev => ({ ...prev, points: violation.maxPoints }));
+    } else {
+      setForm(prev => ({ ...prev, points: violation.minPoints }));
+    }
+  }, [form.violationType, violation, intel.countsAllTime]);
 
-    const handleEmployeeSelect = e => {
-        const emp = employees.find(x => x.id === parseInt(e.target.value));
-        if (!emp) return;
-        setForm(prev => ({ ...prev, employeeId: emp.id, employeeName: emp.name, department: emp.department || '', supervisor: emp.supervisor || '' }));
-    };
+  const handleEmployeeSelect = e => {
+    const emp = employees.find(x => x.id === parseInt(e.target.value));
+    if (!emp) return;
+    setForm(prev => ({ ...prev, employeeId: emp.id, employeeName: emp.name, department: emp.department || '', supervisor: emp.supervisor || '' }));
+  };
 
-    const handleViolationChange = e => {
-        const key = e.target.value;
-        const v   = violationData[key] || null;
-        setViolation(v);
-        setForm(prev => ({ ...prev, violationType: key, points: v ? v.minPoints : 1 }));
-    };
+  const handleViolationChange = e => {
+    const key = e.target.value;
+    const v   = violationData[key] || null;
+    setViolation(v);
+    setForm(prev => ({ ...prev, violationType: key, points: v ? v.minPoints : 1 }));
+  };
 
-    const handleChange = e => setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
+  const handleChange = e => setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
 
-    const handleSubmit = async e => {
-        e.preventDefault();
-        if (!form.violationType) return setStatus({ ok: false, msg: 'Please select a violation type.' });
-        if (!form.employeeName)  return setStatus({ ok: false, msg: 'Please enter an employee name.' });
-        try {
-            const empRes     = await axios.post('/api/employees', { name: form.employeeName, department: form.department, supervisor: form.supervisor });
-            const employeeId = empRes.data.id;
-            await axios.post('/api/violations', {
-                employee_id: employeeId, violation_type: form.violationType,
-                violation_name: violation?.name || form.violationType,
-                category: violation?.category || 'General', points: parseInt(form.points),
-                incident_date: form.incidentDate, incident_time: form.incidentTime || null,
-                location: form.location || null, details: form.additionalDetails || null,
-                witness_name: form.witnessName || null,
-            });
-            // Refresh employee list and re-run intel for updated score
-            const empList = await axios.get('/api/employees');
-            setEmployees(empList.data);
-            setStatus({ ok: true, msg: '✓ Violation recorded successfully' });
-            setForm(EMPTY_FORM);
-            setViolation(null);
-        } catch (err) {
-            setStatus({ ok: false, msg: '✗ Error: ' + (err.response?.data?.error || err.message) });
-        }
-    };
+  const handleSubmit = async e => {
+    e.preventDefault();
+    if (!form.violationType) return setStatus({ ok: false, msg: 'Please select a violation type.' });
+    if (!form.employeeName)  return setStatus({ ok: false, msg: 'Please enter an employee name.' });
+    try {
+      const empRes     = await axios.post('/api/employees', { name: form.employeeName, department: form.department, supervisor: form.supervisor });
+      const employeeId = empRes.data.id;
+      const violRes    = await axios.post('/api/violations', {
+        employee_id:    employeeId,
+        violation_type: form.violationType,
+        violation_name: violation?.name || form.violationType,
+        category:       violation?.category || 'General',
+        points:         parseInt(form.points),
+        incident_date:  form.incidentDate,
+        incident_time:  form.incidentTime  || null,
+        location:       form.location       || null,
+        details:        form.additionalDetails || null,
+        witness_name:   form.witnessName    || null,
+      });
 
-    const showField    = f   => violation?.fields?.includes(f);
-    const priorCount90 = key => intel.counts90[key] || 0;
-    const isRepeat     = key => (intel.countsAllTime[key]?.count || 0) >= 1;
+      const newId = violRes.data.id;
+      setLastViolId(newId);
 
-    return (
-        <div style={s.content}>
+      const empList = await axios.get('/api/employees');
+      setEmployees(empList.data);
 
-            {/* ── Employee Information ────────────────────────────────── */}
-            <div style={s.section}>
-                <h2 style={s.sectionTitle}>Employee Information</h2>
+      setStatus({ ok: true, msg: `✓ Violation #${newId} recorded — click Download PDF to save the document.` });
+      setForm(EMPTY_FORM);
+      setViolation(null);
+    } catch (err) {
+      setStatus({ ok: false, msg: '✗ Error: ' + (err.response?.data?.error || err.message) });
+    }
+  };
 
-                {/* CPAS score banner — shown once employee is selected */}
-                {intel.score && form.employeeId && (
-                    <div style={s.scoreRow}>
-                        <span style={{ fontSize: '13px', color: '#555', fontWeight: 600 }}>Current Standing:</span>
-                        <CpasBadge points={intel.score.active_points} />
-                        <span style={{ fontSize: '12px', color: '#888' }}>
-                            {intel.score.violation_count} violation{intel.score.violation_count !== 1 ? 's' : ''} in last 90 days
-                        </span>
-                    </div>
-                )}
+  const handleDownloadPdf = async () => {
+    if (!lastViolId) return;
+    setPdfLoading(true);
+    try {
+      const response = await axios.get(`/api/violations/${lastViolId}/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_Violation_${lastViolId}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+    } catch (err) {
+      setStatus({ ok: false, msg: '✗ PDF generation failed: ' + err.message });
+    } finally {
+      setPdfLoading(false);
+    }
+  };
 
-                {employees.length > 0 && (
-                    <div style={{ marginBottom: '12px' }}>
-                        <label style={s.label}>Quick-Select Existing Employee:</label>
-                        <select style={s.input} onChange={handleEmployeeSelect} value={form.employeeId || ''}>
-                            <option value="">-- Select existing or enter new below --</option>
-                            {employees.map(e => (
-                                <option key={e.id} value={e.id}>{e.name}{e.department ? ` — ${e.department}` : ''}</option>
-                            ))}
-                        </select>
-                    </div>
-                )}
+  const showField    = f   => violation?.fields?.includes(f);
+  const priorCount90 = key => intel.counts90[key] || 0;
+  const isRepeat     = key => (intel.countsAllTime[key]?.count || 0) >= 1;
 
-                <div style={s.grid}>
-                    {[['employeeName','Employee Name','text','John Doe'],['department','Department','text','Engineering'],['supervisor','Supervisor Name','text','Jane Smith'],['witnessName','Witness Name (Officer)','text','Officer Name']].map(([name,label,type,ph]) => (
-                        <div key={name} style={s.item}>
-                            <label style={s.label}>{label}:</label>
-                            <input style={s.input} type={type} name={name} value={form[name]} onChange={handleChange} placeholder={ph} />
-                        </div>
-                    ))}
+  return (
+    <div style={s.content}>
+
+      <div style={s.section}>
+        <h2 style={s.sectionTitle}>Employee Information</h2>
+
+        {intel.score && form.employeeId && (
+          <div style={s.scoreRow}>
+            <span style={{ fontSize: '13px', color: '#d1d3e0', fontWeight: 600 }}>Current Standing:</span>
+            <CpasBadge points={intel.score.active_points} />
+            <span style={{ fontSize: '12px', color: '#9ca0b8' }}>
+              {intel.score.violation_count} violation{intel.score.violation_count !== 1 ? 's' : ''} in last 90 days
+            </span>
+          </div>
+        )}
+
+        {employees.length > 0 && (
+          <div style={{ marginBottom: '12px' }}>
+            <label style={s.label}>Quick-Select Existing Employee:</label>
+            <select style={s.input} onChange={handleEmployeeSelect} value={form.employeeId || ''}>
+              <option value="">-- Select existing or enter new below --</option>
+              {employees.map(e => (
+                <option key={e.id} value={e.id}>{e.name}{e.department ? ` — ${e.department}` : ''}</option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        <div style={s.grid}>
+          {[['employeeName','Employee Name','text','John Doe'],['department','Department','text','Engineering'],['supervisor','Supervisor Name','text','Jane Smith'],['witnessName','Witness Name (Officer)','text','Officer Name']].map(([name,label,type,ph]) => (
+            <div key={name} style={s.item}>
+              <label style={s.label}>{label}:</label>
+              <input style={s.input} type={type} name={name} value={form[name]} onChange={handleChange} placeholder={ph} />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        <div style={s.section}>
+          <h2 style={s.sectionTitle}>Violation Details</h2>
+          <div style={s.grid}>
+
+            <div style={{ ...s.item, ...s.fullCol }}>
+              <label style={s.label}>Violation Type:</label>
+              <select style={s.input} value={form.violationType} onChange={handleViolationChange} required>
+                <option value="">-- Select Violation Type --</option>
+                {Object.entries(violationGroups).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` : ''}
+                        </option>
+                      );
+                    })}
+                  </optgroup>
+                ))}
+              </select>
+
+              {violation && (
+                <div style={s.contextBox}>
+                  <strong>{violation.name}</strong>
+                  {isRepeat(form.violationType) && form.employeeId && (
+                    <span style={s.repeatBadge}>
+                      ★ Repeat — {intel.countsAllTime[form.violationType]?.count}x prior
+                    </span>
+                  )}
+                  <br />{violation.description}<br />
+                  <span style={{ fontSize: '11px', color: '#a0a3ba' }}>{violation.chapter}</span>
                 </div>
+              )}
+
+              {violation && isRepeat(form.violationType) && form.employeeId && violation.minPoints !== violation.maxPoints && (
+                <div style={s.repeatWarn}>
+                  <strong>Repeat offense detected.</strong> Point slider set to maximum ({violation.maxPoints} pts) per recidivist policy. Adjust if needed.
+                </div>
+              )}
             </div>
 
-            {/* ── Violation Details ────────────────────────────────────── */}
-            <form onSubmit={handleSubmit}>
-                <div style={s.section}>
-                    <h2 style={s.sectionTitle}>Violation Details</h2>
-                    <div style={s.grid}>
+            <div style={s.item}>
+              <label style={s.label}>Incident Date:</label>
+              <input style={s.input} type="date" name="incidentDate" value={form.incidentDate} onChange={handleChange} required />
+            </div>
 
-                        {/* Violation type dropdown with prior-use badges */}
-                        <div style={{ ...s.item, ...s.fullCol }}>
-                            <label style={s.label}>Violation Type:</label>
-                            <select style={s.input} value={form.violationType} onChange={handleViolationChange} required>
-                                <option value="">-- Select Violation Type --</option>
-                                {Object.entries(violationGroups).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` : ''}
-                                                </option>
-                                            );
-                                        })}
-                                    </optgroup>
-                                ))}
-                            </select>
-
-                            {/* Handbook definition */}
-                            {violation && (
-                                <div style={s.contextBox}>
-                                    <strong>{violation.name}</strong>
-                                    {isRepeat(form.violationType) && form.employeeId && (
-                                        <span style={s.repeatBadge}>
-                                            ★ Repeat — {intel.countsAllTime[form.violationType]?.count}x prior
-                                        </span>
-                                    )}
-                                    <br />
-                                    {violation.description}<br />
-                                    <span style={{ fontSize: '11px', color: '#666' }}>{violation.chapter}</span>
-                                </div>
-                            )}
-
-                            {/* Recidivist auto-suggest notice */}
-                            {violation && isRepeat(form.violationType) && form.employeeId && violation.minPoints !== violation.maxPoints && (
-                                <div style={s.repeatWarn}>
-                                    <strong>Repeat offense detected.</strong> Point slider set to maximum ({violation.maxPoints} pts) per recidivist policy. Adjust if needed.
-                                </div>
-                            )}
-                        </div>
-
-                        {/* Incident date */}
-                        <div style={s.item}>
-                            <label style={s.label}>Incident Date:</label>
-                            <input style={s.input} type="date" name="incidentDate" value={form.incidentDate} onChange={handleChange} required />
-                        </div>
-
-                        {showField('time') && (
-                            <div style={s.item}>
-                                <label style={s.label}>Incident Time:</label>
-                                <input style={s.input} type="time" name="incidentTime" value={form.incidentTime} onChange={handleChange} />
-                            </div>
-                        )}
-                        {showField('minutes') && (
-                            <div style={s.item}>
-                                <label style={s.label}>Minutes Late:</label>
-                                <input style={s.input} type="number" name="minutesLate" value={form.minutesLate} onChange={handleChange} placeholder="15" />
-                            </div>
-                        )}
-                        {showField('amount') && (
-                            <div style={s.item}>
-                                <label style={s.label}>Amount / Value:</label>
-                                <input style={s.input} type="text" name="amount" value={form.amount} onChange={handleChange} placeholder="$150.00" />
-                            </div>
-                        )}
-                        {showField('location') && (
-                            <div style={{ ...s.item, ...s.fullCol }}>
-                                <label style={s.label}>Location / Context:</label>
-                                <input style={s.input} type="text" name="location" value={form.location} onChange={handleChange} placeholder="Office, vehicle, facility area, etc." />
-                            </div>
-                        )}
-                        {showField('description') && (
-                            <div style={{ ...s.item, ...s.fullCol }}>
-                                <label style={s.label}>Additional Details:</label>
-                                <textarea style={{ ...s.input, resize: 'vertical', minHeight: '80px' }} name="additionalDetails" value={form.additionalDetails} onChange={handleChange} placeholder="Provide specific context, observations, or details..." />
-                            </div>
-                        )}
-                    </div>
-
-                    {/* Tier escalation warning */}
-                    {intel.score && violation && (
-                        <TierWarning
-                            currentPoints={intel.score.active_points}
-                            addingPoints={parseInt(form.points) || 0}
-                        />
-                    )}
-
-                    {/* Point slider */}
-                    {violation && (
-                        <div style={s.pointBox}>
-                            <h4 style={{ color: '#856404', marginBottom: '10px' }}>CPAS Point Assessment</h4>
-                            <p style={{ margin: 0 }}>
-                                {violation.name}: {violation.minPoints === violation.maxPoints
-                                    ? `${violation.minPoints} Points (Fixed)`
-                                    : `${violation.minPoints}–${violation.maxPoints} Points`}
-                            </p>
-                            <input
-                                style={{ width: '100%', marginTop: '10px' }}
-                                type="range" name="points"
-                                min={violation.minPoints} max={violation.maxPoints}
-                                value={form.points} onChange={handleChange}
-                            />
-                            <div style={s.pointValue}>{form.points} Points</div>
-                            <p style={{ fontSize: '12px', color: '#666' }}>Adjust to reflect severity and context</p>
-                        </div>
-                    )}
-                </div>
-
-                <div style={s.note}>
-                    <strong>Note:</strong> Submitting saves the violation to the database linked to the employee record. PDF generation available in Phase 3.
-                </div>
-
-                <div style={s.btnRow}>
-                    <button type="submit" style={s.btnPrimary}>Submit Violation</button>
-                    <button type="button" style={s.btnSecondary} onClick={() => { setForm(EMPTY_FORM); setViolation(null); setStatus(null); }}>
-                        Clear Form
-                    </button>
-                </div>
-
-                {status && <div style={status.ok ? s.statusOk : s.statusErr}>{status.msg}</div>}
-            </form>
-
-            {/* ── Violation History Panel ──────────────────────────────── */}
-            {form.employeeId && (
-                <div style={s.section}>
-                    <h2 style={s.sectionTitle}>Violation History</h2>
-                    <ViolationHistory history={intel.history} loading={intel.loading} />
-                </div>
+            {showField('time') && (
+              <div style={s.item}>
+                <label style={s.label}>Incident Time:</label>
+                <input style={s.input} type="time" name="incidentTime" value={form.incidentTime} onChange={handleChange} />
+              </div>
             )}
+            {showField('minutes') && (
+              <div style={s.item}>
+                <label style={s.label}>Minutes Late:</label>
+                <input style={s.input} type="number" name="minutesLate" value={form.minutesLate} onChange={handleChange} placeholder="15" />
+              </div>
+            )}
+            {showField('amount') && (
+              <div style={s.item}>
+                <label style={s.label}>Amount / Value:</label>
+                <input style={s.input} type="text" name="amount" value={form.amount} onChange={handleChange} placeholder="$150.00" />
+              </div>
+            )}
+            {showField('location') && (
+              <div style={{ ...s.item, ...s.fullCol }}>
+                <label style={s.label}>Location / Context:</label>
+                <input style={s.input} type="text" name="location" value={form.location} onChange={handleChange} placeholder="Office, vehicle, facility area, etc." />
+              </div>
+            )}
+            {showField('description') && (
+              <div style={{ ...s.item, ...s.fullCol }}>
+                <label style={s.label}>Additional Details:</label>
+                <textarea style={{ ...s.input, resize: 'vertical', minHeight: '80px' }} name="additionalDetails" value={form.additionalDetails} onChange={handleChange} placeholder="Provide specific context, observations, or details..." />
+              </div>
+            )}
+          </div>
 
+          {intel.score && violation && (
+            <TierWarning
+              currentPoints={intel.score.active_points}
+              addingPoints={parseInt(form.points) || 0}
+            />
+          )}
+
+          {violation && (
+            <div style={s.pointBox}>
+              <h4 style={{ color: '#ffdf8a', marginBottom: '10px' }}>CPAS Point Assessment</h4>
+              <p style={{ margin: 0 }}>
+                {violation.name}: {violation.minPoints === violation.maxPoints
+                  ? `${violation.minPoints} Points (Fixed)`
+                  : `${violation.minPoints}–${violation.maxPoints} Points`}
+              </p>
+              <input style={{ width: '100%', marginTop: '10px' }} type="range" name="points"
+                min={violation.minPoints} max={violation.maxPoints}
+                value={form.points} onChange={handleChange} />
+              <div style={s.pointValue}>{form.points} Points</div>
+              <p style={{ fontSize: '12px', color: '#d1d3e0' }}>Adjust to reflect severity and context</p>
+            </div>
+          )}
         </div>
-    );
+
+        <div style={s.btnRow}>
+          <button type="submit" style={s.btnPrimary}>Submit Violation</button>
+          <button type="button" style={s.btnSecondary} onClick={() => { setForm(EMPTY_FORM); setViolation(null); setStatus(null); setLastViolId(null); }}>
+            Clear Form
+          </button>
+        </div>
+
+        {lastViolId && status?.ok && (
+          <div style={{ textAlign: 'center', marginTop: '16px' }}>
+            <button
+              type="button"
+              style={{ ...s.btnPdf, opacity: pdfLoading ? 0.7 : 1 }}
+              onClick={handleDownloadPdf}
+              disabled={pdfLoading}
+            >
+              {pdfLoading ? '⏳ Generating PDF...' : '⬇ Download PDF'}
+            </button>
+            <p style={{ fontSize: '11px', color: '#9ca0b8', marginTop: '6px' }}>
+              Violation #{lastViolId} — click to download the signed violation document
+            </p>
+          </div>
+        )}
+
+        {status && <div style={status.ok ? s.statusOk : s.statusErr}>{status.msg}</div>}
+      </form>
+
+      {form.employeeId && (
+        <div style={s.section}>
+          <h2 style={s.sectionTitle}>Violation History</h2>
+          <ViolationHistory history={intel.history} loading={intel.loading} />
+        </div>
+      )}
+
+    </div>
+  );
 }

client/src/components/ViolationHistory.jsx

@@ -2,19 +2,19 @@ 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' },
+    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: '#888', fontStyle: 'italic', fontSize: '13px', marginTop: '8px' },
+    empty:    { color: '#77798a', fontStyle: 'italic', fontSize: '13px', marginTop: '8px' },
 };
 
 function formatDate(d) {
-    if (!d) return '—';
+    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' });
 }
@@ -44,9 +44,9 @@ export default function ViolationHistory({ history, loading }) {
                         <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, color: '#c0c2d6' }}>{v.category}</td>
                             <td style={{ ...s.td, ...s.pts }}>{v.points}</td>
-                            <td style={s.td}>{v.details || '—'}</td>
+                            <td style={{ ...s.td, color: '#c0c2d6' }}>{v.details || '–'}</td>
                         </tr>
                     ))}
                 </tbody>

db/database.js

@@ -2,18 +2,45 @@ const Database = require('better-sqlite3');
 const path     = require('path');
 const fs       = require('fs');
 
-const DB_PATH     = process.env.DB_PATH || '/data/cpas.db';
-const SCHEMA_PATH = path.join(__dirname, 'schema.sql');
+const dbPath = process.env.DB_PATH || path.join(__dirname, '..', 'data', 'cpas.db');
+const dir    = path.dirname(dbPath);
+if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
 
-const dbDir = path.dirname(DB_PATH);
-if (!fs.existsSync(dbDir)) fs.mkdirSync(dbDir, { recursive: true });
-
-const db = new Database(DB_PATH);
+const db = new Database(dbPath);
 db.pragma('journal_mode = WAL');
 db.pragma('foreign_keys = ON');
 
-const schema = fs.readFileSync(SCHEMA_PATH, 'utf8');
+const schema = fs.readFileSync(path.join(__dirname, 'schema.sql'), 'utf8');
 db.exec(schema);
 
-console.log(`[DB] Connected: ${DB_PATH}`);
+// ── Migrations for existing DBs ─────────────────────────────────────────────
+const cols = db.prepare('PRAGMA table_info(violations)').all().map(c => c.name);
+if (!cols.includes('negated'))              db.exec("ALTER TABLE violations ADD COLUMN negated INTEGER NOT NULL DEFAULT 0");
+if (!cols.includes('negated_at'))           db.exec("ALTER TABLE violations ADD COLUMN negated_at DATETIME");
+if (!cols.includes('prior_active_points'))  db.exec("ALTER TABLE violations ADD COLUMN prior_active_points INTEGER");
+if (!cols.includes('prior_tier_label'))     db.exec("ALTER TABLE violations ADD COLUMN prior_tier_label TEXT");
+
+// Ensure resolutions table exists
+db.exec(`CREATE TABLE IF NOT EXISTS violation_resolutions (
+    id              INTEGER PRIMARY KEY AUTOINCREMENT,
+    violation_id    INTEGER NOT NULL REFERENCES violations(id) ON DELETE CASCADE,
+    resolution_type TEXT    NOT NULL,
+    details         TEXT,
+    resolved_by     TEXT,
+    created_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
+SELECT
+    employee_id,
+    SUM(points)  AS active_points,
+    COUNT(*)     AS violation_count
+FROM violations
+WHERE negated = 0
+  AND incident_date >= DATE('now', '-90 days')
+GROUP BY employee_id;`);
+
+console.log('[DB] Connected:', dbPath);
 module.exports = db;

db/schema.sql

@@ -1,36 +1,47 @@
 CREATE TABLE IF NOT EXISTS employees (
     id          INTEGER PRIMARY KEY AUTOINCREMENT,
-    name        TEXT NOT NULL,
+    name        TEXT    NOT NULL,
     department  TEXT,
     supervisor  TEXT,
     created_at  DATETIME DEFAULT CURRENT_TIMESTAMP
 );
 
 CREATE TABLE IF NOT EXISTS violations (
+    id                   INTEGER PRIMARY KEY AUTOINCREMENT,
+    employee_id          INTEGER NOT NULL REFERENCES employees(id),
+    violation_type       TEXT    NOT NULL,
+    violation_name       TEXT    NOT NULL,
+    category             TEXT    NOT NULL DEFAULT 'General',
+    points               INTEGER NOT NULL,
+    incident_date        TEXT    NOT NULL,
+    incident_time        TEXT,
+    location             TEXT,
+    details              TEXT,
+    submitted_by         TEXT,
+    witness_name         TEXT,
+    negated              INTEGER NOT NULL DEFAULT 0,
+    negated_at           DATETIME,
+    prior_active_points  INTEGER, -- snapshot at time of logging
+    prior_tier_label     TEXT,    -- optional human-readable tier
+    created_at           DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS violation_resolutions (
     id              INTEGER PRIMARY KEY AUTOINCREMENT,
-    employee_id     INTEGER NOT NULL REFERENCES employees(id),
-    violation_type  TEXT NOT NULL,
-    violation_name  TEXT NOT NULL,
-    category        TEXT NOT NULL,
-    points          INTEGER NOT NULL,
-    incident_date   DATE NOT NULL,
-    incident_time   TEXT,
-    location        TEXT,
+    violation_id    INTEGER NOT NULL REFERENCES violations(id) ON DELETE CASCADE,
+    resolution_type TEXT    NOT NULL,
     details         TEXT,
-    submitted_by    TEXT,
-    witness_name    TEXT,
+    resolved_by     TEXT,
     created_at      DATETIME DEFAULT CURRENT_TIMESTAMP
 );
 
+-- Active score: only non-negated violations in rolling 90 days
 CREATE VIEW IF NOT EXISTS active_cpas_scores AS
 SELECT
-    e.id                        AS employee_id,
-    e.name                      AS employee_name,
-    e.department,
-    COALESCE(SUM(v.points), 0)  AS active_points,
-    COUNT(v.id)                 AS violation_count
-FROM employees e
-LEFT JOIN violations v
-    ON v.employee_id = e.id
-    AND v.incident_date >= DATE('now', '-90 days')
-GROUP BY e.id;
+    employee_id,
+    SUM(points)  AS active_points,
+    COUNT(*)     AS violation_count
+FROM violations
+WHERE negated = 0
+  AND incident_date >= DATE('now', '-90 days')
+GROUP BY employee_id;

package.json

@@ -15,7 +15,8 @@
   "dependencies": {
     "better-sqlite3": "^9.4.3",
     "cors": "^2.8.5",
-    "express": "^4.18.3"
+    "express": "^4.18.3",
+    "puppeteer-core": "^22.0.0"
   },
   "devDependencies": {
     "nodemon": "^3.1.0"

pdf/generator.js

@@ -0,0 +1,47 @@
+const puppeteer  = require('puppeteer-core');
+const buildHtml  = require('./template');
+
+/**
+ * Renders the violation document HTML via Puppeteer and returns a PDF buffer.
+ * Uses the system Chromium installed in the Alpine image (no separate download).
+ * @param {object} violation  - Row from violations JOIN employees
+ * @param {object} score      - Row from active_cpas_scores
+ * @returns {Buffer}
+ */
+async function generatePdf(violation, score) {
+    const html = buildHtml(violation, score);
+
+    const browser = await puppeteer.launch({
+        executablePath: process.env.PUPPETEER_EXECUTABLE_PATH || '/usr/bin/chromium-browser',
+        args: [
+            '--no-sandbox',
+            '--disable-setuid-sandbox',
+            '--disable-dev-shm-usage',
+            '--disable-gpu',
+        ],
+        headless: 'new',
+    });
+
+    try {
+        const page = await browser.newPage();
+        await page.setContent(html, { waitUntil: 'networkidle0' });
+
+        const pdf = await page.pdf({
+            format:              'Letter',
+            printBackground:     true,
+            margin: {
+                top:    '0.35in',
+                bottom: '0.35in',
+                left:   '0.4in',
+                right:  '0.4in',
+            },
+            displayHeaderFooter: false,
+        });
+
+        return pdf;
+    } finally {
+        await browser.close();
+    }
+}
+
+module.exports = generatePdf;

server.js

@@ -1,7 +1,8 @@
-const express = require('express');
-const cors    = require('cors');
-const path    = require('path');
-const db      = require('./db/database');
+const express      = require('express');
+const cors         = require('cors');
+const path         = require('path');
+const db           = require('./db/database');
+const generatePdf  = require('./pdf/generator');
 
 const app  = express();
 const PORT = process.env.PORT || 3001;
@@ -10,128 +11,204 @@ app.use(cors());
 app.use(express.json());
 app.use(express.static(path.join(__dirname, 'client', 'dist')));
 
-// ── Health ─────────────────────────────────────────────────────────────────
-app.get('/api/health', (req, res) => {
-    res.json({ status: 'ok', timestamp: new Date().toISOString() });
-});
+// Health
+app.get('/api/health', (req, res) => res.json({ status: 'ok', timestamp: new Date().toISOString() }));
 
-// ── Employees ──────────────────────────────────────────────────────────────
+// Employees
 app.get('/api/employees', (req, res) => {
-    const rows = db.prepare(
-        'SELECT id, name, department, supervisor FROM employees ORDER BY name ASC'
-    ).all();
-    res.json(rows);
+  const rows = db.prepare('SELECT id, name, department, supervisor FROM employees ORDER BY name ASC').all();
+  res.json(rows);
 });
 
 app.post('/api/employees', (req, res) => {
-    const { name, department, supervisor } = req.body;
-    if (!name) return res.status(400).json({ error: 'name is required' });
-
-    const existing = db.prepare(
-        'SELECT * FROM employees WHERE LOWER(name) = LOWER(?)'
-    ).get(name);
-
-    if (existing) {
-        if (department || supervisor) {
-            db.prepare(
-                'UPDATE employees SET department = COALESCE(?, department), supervisor = COALESCE(?, supervisor) WHERE id = ?'
-            ).run(department || null, supervisor || null, existing.id);
-        }
-        return res.json({ ...existing, department, supervisor });
+  const { name, department, supervisor } = req.body;
+  if (!name) return res.status(400).json({ error: 'name is required' });
+  const existing = db.prepare('SELECT * FROM employees WHERE LOWER(name) = LOWER(?)').get(name);
+  if (existing) {
+    if (department || supervisor) {
+      db.prepare('UPDATE employees SET department = COALESCE(?, department), supervisor = COALESCE(?, supervisor) WHERE id = ?')
+        .run(department || null, supervisor || null, existing.id);
     }
-
-    const result = db.prepare(
-        'INSERT INTO employees (name, department, supervisor) VALUES (?, ?, ?)'
-    ).run(name, department || null, supervisor || null);
-
-    res.status(201).json({ id: result.lastInsertRowid, name, department, supervisor });
+    return res.json({ ...existing, department, supervisor });
+  }
+  const result = db.prepare('INSERT INTO employees (name, department, supervisor) VALUES (?, ?, ?)')
+    .run(name, department || null, supervisor || null);
+  res.status(201).json({ id: result.lastInsertRowid, name, department, supervisor });
 });
 
-// ── Employee CPAS Score (rolling 90-day) ───────────────────────────────────
-app.get('/api/employees/:employeeId/score', (req, res) => {
-    const row = db.prepare(
-        'SELECT * FROM active_cpas_scores WHERE employee_id = ?'
-    ).get(req.params.employeeId);
-    res.json(row || { employee_id: req.params.employeeId, active_points: 0, violation_count: 0 });
+// Employee score (current snapshot)
+app.get('/api/employees/:id/score', (req, res) => {
+  const row = db.prepare('SELECT * FROM active_cpas_scores WHERE employee_id = ?').get(req.params.id);
+  res.json(row || { employee_id: req.params.id, active_points: 0, violation_count: 0 });
 });
 
-// ── Violation type usage counts for an employee (90-day window) ────────────
-// Returns { violation_type: count } so the frontend can badge the dropdown
-app.get('/api/employees/:employeeId/violation-counts', (req, res) => {
-    const rows = db.prepare(`
-        SELECT violation_type, COUNT(*) as count
-        FROM violations
-        WHERE employee_id = ?
-          AND incident_date >= DATE('now', '-90 days')
-        GROUP BY violation_type
-    `).all(req.params.employeeId);
-
-    const map = {};
-    rows.forEach(r => { map[r.violation_type] = r.count; });
-    res.json(map);
+// Dashboard
+app.get('/api/dashboard', (req, res) => {
+  const rows = db.prepare(`
+    SELECT e.id, e.name, e.department, e.supervisor,
+           COALESCE(s.active_points, 0)  AS active_points,
+           COALESCE(s.violation_count,0) AS violation_count
+    FROM employees e
+    LEFT JOIN active_cpas_scores s ON s.employee_id = e.id
+    ORDER BY active_points DESC, e.name ASC
+  `).all();
+  res.json(rows);
 });
 
-// ── All-time violation type counts for recidivist point suggestion ─────────
-app.get('/api/employees/:employeeId/violation-counts/alltime', (req, res) => {
-    const rows = db.prepare(`
-        SELECT violation_type, COUNT(*) as count, MAX(points) as max_points_used
-        FROM violations
-        WHERE employee_id = ?
-        GROUP BY violation_type
-    `).all(req.params.employeeId);
-
-    const map = {};
-    rows.forEach(r => { map[r.violation_type] = { count: r.count, max_points_used: r.max_points_used }; });
-    res.json(map);
+// Violation history (per employee) with resolutions
+app.get('/api/violations/employee/:id', (req, res) => {
+  const limit = parseInt(req.query.limit) || 50;
+  const rows  = db.prepare(`
+    SELECT v.*, r.resolution_type, r.details AS resolution_details,
+           r.resolved_by, r.created_at AS resolved_at
+    FROM violations v
+    LEFT JOIN violation_resolutions r ON r.violation_id = v.id
+    WHERE v.employee_id = ?
+    ORDER BY v.incident_date DESC, v.created_at DESC
+    LIMIT ?
+  `).all(req.params.id, limit);
+  res.json(rows);
 });
 
-// ── Violation history for an employee ─────────────────────────────────────
-app.get('/api/violations/employee/:employeeId', (req, res) => {
-    const limit = parseInt(req.query.limit) || 50;
-    const rows  = db.prepare(`
-        SELECT * FROM violations
-        WHERE employee_id = ?
-        ORDER BY incident_date DESC, created_at DESC
-        LIMIT ?
-    `).all(req.params.employeeId, limit);
-    res.json(rows);
-});
+// Helper: compute prior_active_points at time of insert
+function getPriorActivePoints(employeeId, incidentDate) {
+  const row = db.prepare(
+    `SELECT COALESCE(SUM(points),0) AS pts
+     FROM violations
+     WHERE employee_id = ?
+       AND negated = 0
+       AND incident_date >= DATE(?, '-90 days')
+       AND incident_date < ?`
+  ).get(employeeId, incidentDate, incidentDate);
+  return row ? row.pts : 0;
+}
 
-// ── POST new violation ─────────────────────────────────────────────────────
+// POST new violation
 app.post('/api/violations', (req, res) => {
-    const {
-        employee_id, violation_type, violation_name, category,
-        points, incident_date, incident_time, location,
-        details, submitted_by, witness_name
-    } = req.body;
+  const {
+    employee_id, violation_type, violation_name, category,
+    points, incident_date, incident_time, location,
+    details, submitted_by, witness_name
+  } = req.body;
 
-    if (!employee_id || !violation_type || !points || !incident_date) {
-        return res.status(400).json({
-            error: 'Missing required fields: employee_id, violation_type, points, incident_date'
-        });
-    }
+  if (!employee_id || !violation_type || !points || !incident_date) {
+    return res.status(400).json({ error: 'Missing required fields' });
+  }
 
-    const result = db.prepare(`
-        INSERT INTO violations (
-            employee_id, violation_type, violation_name, category,
-            points, incident_date, incident_time, location,
-            details, submitted_by, witness_name
-        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-    `).run(
-        employee_id, violation_type, violation_name || violation_type,
-        category || 'General', points, incident_date,
-        incident_time || null, location || null,
-        details || null, submitted_by || null, witness_name || null
-    );
+  const ptsInt   = parseInt(points);
+  const priorPts = getPriorActivePoints(employee_id, incident_date);
 
-    res.status(201).json({ id: result.lastInsertRowid });
+  const result = db.prepare(`
+    INSERT INTO violations (
+      employee_id, violation_type, violation_name, category,
+      points, incident_date, incident_time, location,
+      details, submitted_by, witness_name,
+      prior_active_points
+    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `).run(
+    employee_id, violation_type, violation_name || violation_type,
+    category || 'General', ptsInt, incident_date,
+    incident_time || null, location || null,
+    details || null, submitted_by || null, witness_name || null,
+    priorPts
+  );
+
+  res.status(201).json({ id: result.lastInsertRowid });
 });
 
-// ── SPA fallback ───────────────────────────────────────────────────────────
-app.get('*', (req, res) => {
-    res.sendFile(path.join(__dirname, 'client', 'dist', 'index.html'));
+// ── Negate a violation ──────────────────────────────────────────────────────
+app.patch('/api/violations/:id/negate', (req, res) => {
+  const { resolution_type, details, resolved_by } = req.body;
+  const id = req.params.id;
+
+  const violation = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
+  if (!violation) return res.status(404).json({ error: 'Violation not found' });
+
+  // Mark negated
+  db.prepare('UPDATE violations SET negated = 1 WHERE id = ?').run(id);
+
+  // Upsert resolution record
+  const existing = db.prepare('SELECT id FROM violation_resolutions WHERE violation_id = ?').get(id);
+  if (existing) {
+    db.prepare(`
+      UPDATE violation_resolutions
+      SET resolution_type = ?, details = ?, resolved_by = ?, created_at = datetime('now')
+      WHERE violation_id = ?
+    `).run(resolution_type || 'Resolved', details || null, resolved_by || null, id);
+  } else {
+    db.prepare(`
+      INSERT INTO violation_resolutions (violation_id, resolution_type, details, resolved_by)
+      VALUES (?, ?, ?, ?)
+    `).run(id, resolution_type || 'Resolved', details || null, resolved_by || null);
+  }
+
+  res.json({ success: true });
 });
 
-app.listen(PORT, '0.0.0.0', () => {
-    console.log(`[CPAS] Server running on port ${PORT}`);
+// ── Restore a negated violation ─────────────────────────────────────────────
+app.patch('/api/violations/:id/restore', (req, res) => {
+  const id = req.params.id;
+
+  const violation = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
+  if (!violation) return res.status(404).json({ error: 'Violation not found' });
+
+  db.prepare('UPDATE violations SET negated = 0 WHERE id = ?').run(id);
+  db.prepare('DELETE FROM violation_resolutions WHERE violation_id = ?').run(id);
+
+  res.json({ success: true });
 });
+
+// ── Hard delete a violation ─────────────────────────────────────────────────
+app.delete('/api/violations/:id', (req, res) => {
+  const id = req.params.id;
+
+  const violation = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
+  if (!violation) return res.status(404).json({ error: 'Violation not found' });
+
+  // Delete resolution first (FK safety)
+  db.prepare('DELETE FROM violation_resolutions WHERE violation_id = ?').run(id);
+  db.prepare('DELETE FROM violations WHERE id = ?').run(id);
+
+  res.json({ success: true });
+});
+
+// ── PDF endpoint ─────────────────────────────────────────────────────────────
+app.get('/api/violations/:id/pdf', async (req, res) => {
+  try {
+    const violation = db.prepare(`
+      SELECT v.*, e.name as employee_name, e.department, e.supervisor
+      FROM violations v
+      JOIN employees e ON e.id = v.employee_id
+      WHERE v.id = ?
+    `).get(req.params.id);
+
+    if (!violation) return res.status(404).json({ error: 'Violation not found' });
+
+    const active = db.prepare('SELECT * FROM active_cpas_scores WHERE employee_id = ?')
+      .get(violation.employee_id) || { active_points: 0, violation_count: 0 };
+
+    const scoreForPdf = {
+      employee_id:     violation.employee_id,
+      active_points:   violation.prior_active_points != null ? violation.prior_active_points : active.active_points,
+      violation_count: active.violation_count,
+    };
+
+    const pdfBuffer = await generatePdf(violation, scoreForPdf);
+    const safeName  = violation.employee_name.replace(/[^a-z0-9]/gi, '_');
+
+    res.set({
+      'Content-Type':        'application/pdf',
+      'Content-Disposition': `attachment; filename="CPAS_${safeName}_${violation.incident_date}.pdf"`,
+      'Content-Length':      pdfBuffer.length,
+    });
+    res.end(pdfBuffer);
+  } catch (err) {
+    console.error('[PDF]', err);
+    res.status(500).json({ error: 'PDF generation failed', detail: err.message });
+  }
+});
+
+// SPA fallback
+app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'client', 'dist', 'index.html')));
+
+app.listen(PORT, '0.0.0.0', () => console.log(`[CPAS] Server running on port ${PORT}`));