fix: reduce PDF margins and remove redundant puppeteer footer

Reviewed-on: #19

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/components/Dashboard.jsx

@@ -6,13 +6,13 @@ 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},
+  { 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) {
@@ -28,30 +28,30 @@ function isAtRisk(points) {
 }
 
 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' },
+  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' },
+  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 [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);
@@ -77,93 +77,117 @@ export default function Dashboard() {
   const maxPoints   = employees.reduce((m, e) => Math.max(m, e.active_points), 0);
 
   return (
-    <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>
+    // 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={{ 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 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>
-        <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>
-                    )}
+        {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>
-                  <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>
-      )}
+              )}
+              {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(); }}
         />
       )}
-    </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>

pdf/generator.js

@@ -30,18 +30,12 @@ async function generatePdf(violation, score) {
             format:              'Letter',
             printBackground:     true,
             margin: {
-                top:    '0.6in',
-                bottom: '0.7in',
-                left:   '0.75in',
-                right:  '0.75in',
+                top:    '0.35in',
+                bottom: '0.35in',
+                left:   '0.4in',
+                right:  '0.4in',
             },
-            displayHeaderFooter: true,
-            headerTemplate:      '<div></div>',
-            footerTemplate: `
-                <div style="font-size:9px; color:#888; width:100%; text-align:center; padding:0 0.75in;">
-                    CONFIDENTIAL — MPM Internal HR Document &nbsp;|&nbsp;
-                    Page <span class="pageNumber"></span> of <span class="totalPages"></span>
-                </div>`,
+            displayHeaderFooter: false,
         });
 
         return pdf;

server.js

@@ -70,7 +70,7 @@ app.get('/api/violations/employee/:id', (req, res) => {
   res.json(rows);
 });
 
-// NEW helper: compute prior_active_points at time of insert (excluding this violation)
+// Helper: compute prior_active_points at time of insert
 function getPriorActivePoints(employeeId, incidentDate) {
   const row = db.prepare(
     `SELECT COALESCE(SUM(points),0) AS pts
@@ -116,9 +116,63 @@ app.post('/api/violations', (req, res) => {
   res.status(201).json({ id: result.lastInsertRowid });
 });
 
-// Negate / restore / delete endpoints unchanged ...
+// ── Negate a violation ──────────────────────────────────────────────────────
+app.patch('/api/violations/:id/negate', (req, res) => {
+  const { resolution_type, details, resolved_by } = req.body;
+  const id = req.params.id;
 
-// PDF endpoint — use stored prior_active_points snapshot
+  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 });
+});
+
+// ── 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(`
@@ -130,14 +184,12 @@ app.get('/api/violations/:id/pdf', async (req, res) => {
 
     if (!violation) return res.status(404).json({ error: 'Violation not found' });
 
-    // For PDF, compute score row but pass stored prior_active_points so math is stable
     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,
-      // snapshot at time of violation (if present); fall back to current
-      active_points:  violation.prior_active_points != null ? violation.prior_active_points : active.active_points,
+      employee_id:     violation.employee_id,
+      active_points:   violation.prior_active_points != null ? violation.prior_active_points : active.active_points,
       violation_count: active.violation_count,
     };