Merge pull request 'feat: custom violation types — persist, manage, and use in violation form' (#46) from claude/musing-bell into master

Reviewed-on: #46

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "giteaActions.baseUrl": "https://git.alwisp.com",
+    "giteaActions.discovery.mode": "allAccessible"
+}

AGENTS.md

@@ -0,0 +1,294 @@
+# AGENTS.md — CPAS Violation Tracker
+
+Developer and AI agent guidance for working on this codebase. Read this before making changes.
+
+---
+
+## Project Purpose
+
+CPAS (Corrective & Progressive Accountability System) is an internal HR tool for documenting employee violations, managing disciplinary tier escalation via a rolling 90-day point system, and producing auditable PDF records. It is a single-container Docker app deployed on a trusted internal network.
+
+**This is a compliance tool.** Data integrity, auditability, and reversibility are first-class concerns. Every architectural decision below exists for a reason.
+
+---
+
+## Stack at a Glance
+
+| Layer | Tech |
+|---|---|
+| Frontend | React 18 + Vite (SPA, served statically by Express) |
+| Backend | Node.js + Express (REST API, `server.js`) |
+| Database | SQLite via `better-sqlite3` (synchronous, WAL mode, FK enforcement) |
+| PDF | Puppeteer + system Chromium (Alpine-bundled in Docker) |
+| Styling | Inline React style objects; `client/src/styles/mobile.css` for breakpoints only |
+| Deploy | Docker multi-stage build (Alpine); single container + volume mount at `/data` |
+
+---
+
+## Repository Layout
+
+```
+cpas/
+├── Dockerfile                      # Multi-stage: builder (Node+React) → production (Alpine+Chromium)
+├── server.js                       # All API routes + audit helper; single Express entry point
+├── db/
+│   ├── schema.sql                  # Base table + view definitions (CREATE TABLE IF NOT EXISTS)
+│   └── database.js                 # DB connection, WAL/FK pragmas, auto-migrations on startup
+├── pdf/
+│   ├── generator.js                # Puppeteer launcher; --no-sandbox for Docker
+│   └── template.js                 # HTML template builder; loads logo from disk
+├── demo/                           # Static stakeholder demo page served at /demo
+│   └── index.html                  # Synthetic data, no live API calls; registered before SPA catch-all
+├── client/
+│   ├── vite.config.js
+│   ├── src/
+│   │   ├── App.jsx                 # Root component + AppFooter
+│   │   ├── main.jsx                # React DOM mount
+│   │   ├── data/
+│   │   │   ├── violations.js       # Canonical violation type registry (type key → metadata)
+│   │   │   └── departments.js      # DEPARTMENTS constant; single source of truth
+│   │   ├── hooks/
+│   │   │   └── useEmployeeIntelligence.js  # Score + history fetch hook
+│   │   ├── components/             # One file per component; no barrel index
+│   │   └── styles/
+│   │       └── mobile.css          # Media query overrides only; all other styles are inline
+└── README.md / README_UNRAID_INSTALL.md
+```
+
+---
+
+## Data Model & Compliance Rules
+
+### Tables
+
+| Table | Purpose |
+|---|---|
+| `employees` | id, name, department, supervisor, notes |
+| `violations` | Full incident record; contains immutable scoring fields |
+| `violation_resolutions` | Soft-delete records (resolution type, reason, resolver) |
+| `violation_amendments` | Field-level diff per amendment (old → new, changed_by, timestamp) |
+| `audit_log` | Append-only write action log; never delete from this table |
+| `active_cpas_scores` | VIEW: SUM(points) for negated=0 AND incident_date >= 90 days |
+
+### Immutable Fields (DO NOT allow amendment of these)
+
+The following fields on `violations` are locked after submission. They are the basis for tier calculation and PDF accuracy. **Never expose them to amendment endpoints:**
+
+- `points`
+- `violation_type`
+- `violation_name`
+- `category`
+- `incident_date`
+- `prior_active_points` (snapshot at insert time)
+- `prior_tier_label`
+
+Amendable fields (non-scoring): `location`, `details`, `witness_name`, `acknowledged_by`, `acknowledged_date`
+
+### Soft-Delete Pattern
+
+Violations are **never hard-deleted** in normal workflow. Use the `negated` flag + `violation_resolutions` record. Hard delete is reserved for confirmed data-entry errors and requires explicit user confirmation in the UI.
+
+### Prior-Points Snapshot
+
+Every `INSERT` into `violations` must compute and store `prior_active_points` (the employee's current active score before this violation is added). This snapshot ensures PDFs always reflect the accurate historical tier state regardless of subsequent negate/restore actions.
+
+### Audit Log
+
+Every write action (employee created/edited/merged, violation logged/amended/negated/restored/deleted) must call the `audit()` helper in `server.js`. Never skip audit calls on write routes. The audit log is append-only — no UPDATE or DELETE against `audit_log`.
+
+---
+
+## CPAS Tier System
+
+These thresholds are the authoritative values. Any feature touching tiers must use them.
+
+| 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 |
+
+The canonical tier logic lives in `client/src/components/CpasBadge.jsx` (`TIERS` array, `getTier()`, `getNextTier()`). Do not duplicate this logic elsewhere — import from `CpasBadge`.
+
+The 90-day rolling window is computed by the `active_cpas_scores` view. This view is **dropped and recreated** in `database.js` on every startup to ensure it always reflects the correct `negated=0` filter.
+
+---
+
+## Violation Type Registry
+
+All violation types are defined in `client/src/data/violations.js` as `violationData`. Each entry includes:
+
+```js
+{
+  name: string,         // Display name
+  category: string,     // Grouping for UI display
+  minPoints: number,    // Slider minimum
+  maxPoints: number,    // Slider maximum (min === max means fixed, no slider)
+  chapter: string,      // Policy chapter reference
+  fields: string[],     // Which context fields to show ('time', 'minutes', 'amount', 'location', 'description')
+  description: string,  // Plain-language definition shown in UI
+}
+```
+
+To add a new violation type: add an entry to `violationData` with a unique camelCase key. Do not add new categories without confirming with the project owner — categories appear in UI groupings.
+
+---
+
+## Coding Standards
+
+### Backend (`server.js`)
+
+- Use `better-sqlite3` synchronous API. No async DB calls. This is intentional — it simplifies route handlers and matches Express's sync error handling.
+- All prepared statements use positional `?` parameters. Never interpolate user input into SQL strings.
+- Every POST/PUT/PATCH/DELETE route must:
+  1. Validate required inputs and return `400` with a descriptive `{ error: '...' }` body on failure.
+  2. Call `audit()` on success.
+  3. Return `{ error: '...' }` (not HTML) on all error paths.
+- Group routes by resource (Employees, Violations, Dashboard, Audit). Match the existing comment banner style: `// ── Resource Name ───`.
+- Do not add authentication middleware. This runs on a trusted internal network by design.
+
+### Frontend (React)
+
+- **Styling**: Use inline style objects defined as a `const s = { ... }` block at the top of each component file. Do not add CSS classes or CSS modules — except for responsive breakpoints which go in `mobile.css`.
+- **Data constants**: Import violation types from `../data/violations`, departments from `../data/departments`, tier logic from `./CpasBadge`. Do not hardcode these values in components.
+- **Toasts**: Use `useToast()` from `ToastProvider` for all user-facing feedback. Do not use `alert()` or `console.log` for user messages.
+- **HTTP**: Use `axios` (already imported in form/modal components). Do not introduce `fetch` unless there is a compelling reason — keep it consistent.
+- **State**: Prefer local `useState` over lifting state unless data is needed by multiple unrelated components. The only global context is `ToastProvider`.
+- **Mobile**: Test layout at 768px breakpoint. Use the `isMobile` media query pattern already in `Dashboard.jsx` / `DashboardMobile.jsx`. Add breakpoint rules to `mobile.css`, not inline styles.
+- **Component files**: One component per file. Name the file to match the export. No barrel `index.js` files.
+
+### Database Migrations
+
+New columns are added via the auto-migration pattern in `database.js`. Do not modify `schema.sql` for columns that already exist in production. Instead:
+
+```js
+// Example: adding a new column to violations
+const cols = db.prepare('PRAGMA table_info(violations)').all().map(c => c.name);
+if (!cols.includes('new_column')) db.exec("ALTER TABLE violations ADD COLUMN new_column TEXT");
+```
+
+Add a comment describing the feature the column enables. `schema.sql` is only for base tables — use it only for brand-new tables.
+
+---
+
+## Schema Changes: Decision Checklist
+
+Before adding a column or table, answer:
+
+1. **Does it affect scoring?** If yes, it must be immutable after insert and included in `prior_active_points` computation logic.
+2. **Does it need audit trail?** If it tracks a change to an existing record, add a corresponding entry pattern to `violation_amendments` or `audit_log`.
+3. **Is it soft-deletable?** Prefer `negated`/flag patterns over hard deletes for anything HR might need to reverse.
+4. **Does it appear on PDFs?** Update `pdf/template.js` to reflect it. Test PDF output after schema changes.
+5. **Does `active_cpas_scores` view need updating?** If the new column affects point calculations, update the view recreation block in `database.js`.
+
+---
+
+## PDF Generation
+
+- PDFs are generated on-demand via `GET /api/violations/:id/pdf`. No pre-caching.
+- Template is built in `pdf/template.js`. It receives the full violation + employee record. Logo is loaded from disk at startup and embedded as base64.
+- Puppeteer launches with `--no-sandbox --disable-setuid-sandbox` (required for Docker; safe in this deployment context).
+- Acknowledgment rendering: if `acknowledged_by` is set, show name + date in signature block. If not, render blank wet-ink signature lines.
+- After any schema change that adds user-visible fields, update the template to include the new field where appropriate.
+
+---
+
+## Development Workflow
+
+### Local Development (without Docker)
+
+```bash
+# Terminal 1 — backend
+npm install
+node server.js          # Serves API on :3001 and client/dist statically
+
+# Terminal 2 — frontend (hot reload)
+cd client
+npm install
+npm run dev             # Vite dev server on :5173 (proxy to :3001 configured in vite.config.js)
+```
+
+### Build & Deploy
+
+```bash
+# Build Docker image (compiles React inside container)
+docker build -t cpas .
+
+# Run (local)
+docker run -d --name cpas -p 3001:3001 -v cpas-data:/data cpas
+
+# Unraid: build → save → transfer → load → run with --pids-limit 2048
+# See README_UNRAID_INSTALL.md for full Unraid instructions
+```
+
+**Unraid PID limit is critical.** Chromium spawns many child processes for PDF generation. Always include `--pids-limit 2048` on Unraid containers or PDF generation will fail silently.
+
+### Health Check
+
+`GET /api/health` returns `{ status: 'ok', timestamp, version }`. The `version` field is populated by the Dockerfile at build time from git commit SHA. In local dev it returns `{ sha: 'dev' }` — this is expected.
+
+---
+
+## Forward-Thinking Development Guidelines
+
+### Adding New Features
+
+- **Score-affecting logic belongs in SQL**, not JavaScript. The `active_cpas_scores` view is the single source of truth for point totals. If you need a new score variant (e.g., 30-day window, category-filtered), add a new SQL view — don't compute it in a route handler.
+- **New violation fields**: Add to `schema.sql` for fresh installs AND to the migration block in `database.js` for existing databases. Both are required.
+- **Reporting features**: Future aggregate queries should join against `active_cpas_scores` view and `audit_log` rather than re-implementing point logic. Structure new API endpoints under `/api/reports/` namespace.
+- **Notifications/alerts**: Any future alerting feature (email, Slack) should read from `audit_log` or query `active_cpas_scores` — do not add side effects directly into violation insert routes.
+- **Authentication**: If auth is ever added, implement it as Express middleware applied globally before all `/api` routes. Do not add per-route auth checks. Session data (user identity) should flow into `performed_by` fields on audit and amendment records.
+- **Multi-tenant / multi-site**: The schema is single-tenant. If site isolation is ever needed, add a `site_id` foreign key to `employees` and `violations` as a migration column, then scope all queries with a `WHERE site_id = ?` clause.
+
+### What NOT to Do
+
+- Do not compute active CPAS scores in JavaScript by summing violations client-side. Always fetch from the `active_cpas_scores` view.
+- Do not modify `prior_active_points` after a violation is inserted. It is a historical snapshot, not a live value.
+- Do not add columns to `audit_log`. It is append-only with a fixed schema.
+- Do not add a framework or ORM. Raw SQL with prepared statements is intentional — it keeps the query behavior explicit and the dependency surface small.
+- Do not add a build step beyond `vite build`. The backend is plain CommonJS `require()`; do not transpile it.
+- Do not use `alert()`, `console.log` for user messages, or `document.querySelector` inside React components.
+
+---
+
+## Documentation Standards
+
+### Code Comments
+
+- Comment **why**, not **what**. If the reason for a decision is not obvious from the code, explain it.
+- Use the existing banner style for section groupings in `server.js`:
+  ```js
+  // ── Section Name ─────────────────────────────────────────────────────────────
+  ```
+- Mark non-obvious schema columns with inline SQL comments (see `schema.sql` for examples).
+- When adding a migration block, include a comment naming the feature it enables.
+
+### In-App Documentation
+
+The `ReadmeModal.jsx` component renders an admin reference panel accessible via the `? Docs` button. When adding a significant new feature:
+- Add it to the feature map section of the docs modal.
+- Update the tier system table if thresholds change.
+- Move completed roadmap items from the "Proposed" section to the "Completed" section.
+
+### README
+
+Update `README.md` when:
+- A new environment variable is introduced.
+- The Docker run command changes (new volume, port, or flag).
+- A new top-level feature is added that HR administrators need to know about.
+
+Do not add implementation details to README — that belongs in code comments or AGENTS.md.
+
+---
+
+## Constraints & Non-Goals
+
+- **No authentication.** This is intentional. The app runs on a trusted LAN. Do not add auth without explicit direction from the project owner.
+- **No external dependencies beyond what's in `package.json`.** Avoid introducing new npm packages unless they solve a clearly scoped problem. Prefer using existing stack capabilities.
+- **No client-side routing library.** Navigation between Violation Form, Dashboard, and modals is handled via `App.jsx` state (`view` prop). Do not introduce React Router unless the navigation model meaningfully grows beyond 3–4 views.
+- **No test suite currently.** If adding tests, use Vitest for frontend and a lightweight assertion library for backend routes. Do not add a full testing framework without discussion.
+- **SQLite only.** Do not introduce Postgres, Redis, or other datastores. The single-file DB on a Docker volume is the correct solution for this scale.

Dockerfile

@@ -7,6 +7,15 @@ RUN cd client && npm install
 COPY client/ ./client/
 RUN cd client && npm run build
 
+# ── Version metadata ──────────────────────────────────────────────────────────
+# Pass these at build time:
+#   docker build --build-arg GIT_SHA=$(git rev-parse HEAD) \
+#                --build-arg BUILD_TIME=$(date -u +%Y-%m-%dT%H:%M:%SZ) .
+ARG GIT_SHA=dev
+ARG BUILD_TIME=unknown
+RUN echo "{\"sha\":\"${GIT_SHA}\",\"shortSha\":\"${GIT_SHA:0:7}\",\"buildTime\":\"${BUILD_TIME}\"}" \
+    > /build/client/dist/version.json
+
 FROM node:20-alpine AS production
 RUN apk add --no-cache chromium nss freetype harfbuzz ca-certificates ttf-freefont
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
@@ -21,8 +30,10 @@ COPY server.js    ./
 COPY package.json ./
 COPY db/          ./db/
 COPY pdf/         ./pdf/
+COPY demo/        ./demo/
 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"]

MOBILE_RESPONSIVE.md

@@ -0,0 +1,314 @@
+# Mobile-Responsive Implementation Guide
+
+## Overview
+
+This document describes the mobile-responsive updates implemented for the CPAS Tracker application. The design targets **standard phones (375px+ width)** with graceful degradation for smaller devices.
+
+## Key Changes
+
+### 1. **Responsive Utility Stylesheet** (`client/src/styles/mobile.css`)
+
+A centralized CSS file providing:
+- Media query breakpoints (768px, 480px)
+- Touch-friendly tap targets (min 44px height)
+- iOS input zoom prevention (16px font size)
+- Utility classes for mobile layouts
+- Card-based layout helpers
+- Horizontal scroll containers
+
+**Utility Classes:**
+- `.hide-mobile` - Hide on screens ≤768px
+- `.hide-tablet` - Hide on screens ≤1024px  
+- `.mobile-full-width` - Full width on mobile
+- `.mobile-stack` - Stack flex items vertically
+- `.mobile-scroll-x` - Enable horizontal scrolling
+- `.mobile-card` - Card layout container
+- `.mobile-sticky-top` - Sticky header positioning
+
+### 2. **App Navigation** (`client/src/App.jsx`)
+
+**Desktop Behavior:**
+- Horizontal navigation bar
+- Logo left, tabs center, docs button right
+- Full tab labels displayed
+
+**Mobile Behavior (768px):**
+- Logo centered with full width
+- Tabs stacked horizontally below logo
+- Docs button positioned absolutely top-right
+- Shortened tab labels ("📊 Dashboard" → "📊")
+- Flexible padding (40px → 16px)
+
+**Features:**
+- `useMediaQuery()` hook for responsive detection
+- Dynamic style injection via `<style>` tag
+- Separate mobile CSS classes for targeted overrides
+
+### 3. **Dashboard Layout** (`client/src/components/Dashboard.jsx`)
+
+**Desktop View:**
+- Traditional HTML table layout
+- 7 columns (Index, Employee, Dept, Supervisor, Tier, Points, Violations)
+- Horizontal scrolling for overflow
+
+**Mobile View (768px):**
+- Switches to card-based layout (DashboardMobile component)
+- Each employee = one card with vertical data rows
+- Touch-optimized tap targets
+- Improved readability with larger fonts
+
+**Mobile Stat Cards:**
+- 2 columns on phones (480px+)
+- 1 column on small phones (<480px)
+- Reduced font sizes (28px → 24px)
+- Compact padding
+
+**Toolbar Adjustments:**
+- Search input: 260px → 100% width
+- Buttons stack vertically
+- Full-width button styling
+
+### 4. **Mobile Dashboard Component** (`client/src/components/DashboardMobile.jsx`)
+
+A dedicated mobile-optimized employee card component:
+
+**Card Structure:**
+```
++--------------------------------+
+| Employee Name [Button]         |
+| [At Risk Badge if applicable]  |
+|--------------------------------|
+| Tier / Standing: [Badge]       |
+| Active Points: [Large #]       |
+| 90-Day Violations: [#]         |
+| Department: [Name]             |
+| Supervisor: [Name]             |
++--------------------------------+
+```
+
+**Visual Features:**
+- At-risk employees: Gold border + dark gold background
+- Touch-friendly employee name buttons
+- Color-coded point displays matching tier colors
+- Compact spacing (12px margins)
+- Subtle shadows for depth
+
+### 5. **Responsive Breakpoints**
+
+| Breakpoint | Target Devices | Layout Changes |
+|------------|----------------|----------------|
+| **1024px** | Tablets & below | Reduced padding, simplified nav |
+| **768px**  | Phones (landscape) | Card layouts, stacked navigation |
+| **480px**  | Small phones | Single-column stats, minimal spacing |
+| **375px**  | iPhone SE/6/7/8 | Optimized for minimum supported width |
+
+### 6. **Touch Optimization**
+
+**Tap Target Sizes:**
+- All buttons: 44px minimum height (iOS/Android guidelines)
+- Form inputs: 44px minimum height
+- Navigation tabs: 44px touch area
+
+**Typography:**
+- Form inputs: 16px font size (prevents iOS zoom-in on focus)
+- Readable body text: 13-14px
+- Headers scale down appropriately
+
+**Scrolling:**
+- `-webkit-overflow-scrolling: touch` for smooth momentum scrolling
+- Horizontal scroll on tables (desktop fallback)
+- Vertical card scrolling on mobile
+
+## Implementation Details
+
+### Media Query Hook
+
+```javascript
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) setMatches(media.matches);
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+  return matches;
+}
+```
+
+**Usage:**
+```javascript
+const isMobile = useMediaQuery('(max-width: 768px)');
+```
+
+### Conditional Rendering Pattern
+
+```javascript
+{isMobile ? (
+  <DashboardMobile employees={filtered} onEmployeeClick={setSelectedId} />
+) : (
+  <table style={s.table}>
+    {/* Desktop table layout */}
+  </table>
+)}
+```
+
+### Dynamic Style Injection
+
+```javascript
+const mobileStyles = `
+  @media (max-width: 768px) {
+    .dashboard-wrap {
+      padding: 16px !important;
+    }
+  }
+`;
+
+return (
+  <>
+    <style>{mobileStyles}</style>
+    {/* Component JSX */}
+  </>
+);
+```
+
+## Testing Checklist
+
+### Desktop (>768px)
+- [ ] Navigation displays horizontally
+- [ ] Dashboard shows full table
+- [ ] All columns visible
+- [ ] Docs button on right side
+- [ ] Full tab labels visible
+
+### Tablet (768px - 1024px)
+- [ ] Reduced padding maintains readability
+- [ ] Stats cards wrap to 2-3 columns
+- [ ] Table scrolls horizontally if needed
+
+### Mobile Portrait (375px - 768px)
+- [ ] Logo centered, tabs stacked
+- [ ] Dashboard shows card layout
+- [ ] Search input full width
+- [ ] Buttons stack vertically
+- [ ] Employee cards display all data
+- [ ] Tap targets ≥44px
+- [ ] No horizontal scroll required
+
+### Small Mobile (<480px)
+- [ ] Stat cards single column
+- [ ] Text remains readable
+- [ ] No layout breakage
+- [ ] Footer wraps properly
+
+### iOS-Specific
+- [ ] Input focus doesn't zoom page (16px font)
+- [ ] Smooth momentum scrolling
+- [ ] Tap highlights work correctly
+
+### Android-Specific
+- [ ] Touch feedback visible
+- [ ] Back button behavior correct
+- [ ] Keyboard doesn't break layout
+
+## Browser Support
+
+- **Chrome/Edge:** 88+
+- **Firefox:** 85+
+- **Safari:** 14+
+- **iOS Safari:** 14+
+- **Chrome Android:** 88+
+
+## Performance Considerations
+
+1. **Media query hook** re-renders only on breakpoint changes, not continuous resize
+2. **Card layout** renders fewer DOM elements than table on mobile
+3. **CSS injection** happens once per component mount
+4. **No external CSS libraries** (zero KB bundle increase)
+
+## Future Enhancements
+
+### Phase 2 (Optional)
+- [ ] ViolationForm mobile optimization with multi-step wizard
+- [ ] Modal responsive sizing and animations
+- [ ] Swipe gestures for employee cards
+- [ ] Pull-to-refresh on mobile
+- [ ] Offline support with service workers
+
+### Phase 3 (Advanced)
+- [ ] Progressive Web App (PWA) capabilities
+- [ ] Native app shell with Capacitor
+- [ ] Biometric authentication
+- [ ] Push notifications
+
+## File Structure
+
+```
+client/src/
+├── App.jsx                    # Updated with mobile nav
+├── components/
+│   ├── Dashboard.jsx           # Responsive table/card switch
+│   ├── DashboardMobile.jsx     # Mobile card layout (NEW)
+│   └── ...                     # Other components
+└── styles/
+    └── mobile.css              # Responsive utilities (NEW)
+```
+
+## Maintenance Notes
+
+### Adding New Components
+
+When creating new components, follow this pattern:
+
+1. **Import mobile.css utility classes:**
+   ```javascript
+   import '../styles/mobile.css';
+   ```
+
+2. **Use media query hook:**
+   ```javascript
+   const isMobile = useMediaQuery('(max-width: 768px)');
+   ```
+
+3. **Provide mobile-specific styles:**
+   ```javascript
+   const mobileStyles = `
+     @media (max-width: 768px) {
+       .my-component { /* mobile overrides */ }
+     }
+   `;
+   ```
+
+4. **Test on real devices** (Chrome DevTools is insufficient for touch testing)
+
+### Debugging Tips
+
+- Use Chrome DevTools Device Mode (Ctrl+Shift+M)
+- Test on actual devices when possible
+- Check console for media query match state
+- Verify tap target sizes with Chrome Lighthouse audit
+- Test keyboard behavior on Android
+
+## Deployment
+
+1. Merge `feature/mobile-responsive` into `master`
+2. Rebuild client bundle: `cd client && npm run build`
+3. Restart server
+4. Clear browser cache (Ctrl+Shift+R)
+5. Test on production URL with mobile devices
+
+## Support
+
+For issues or questions about mobile-responsive implementation:
+- Check browser console for errors
+- Verify `mobile.css` is loaded
+- Test with different screen sizes
+- Review media query breakpoints
+
+---
+
+**Branch:** `feature/mobile-responsive`  
+**Target Width:** 375px+ (standard phones)  
+**Last Updated:** March 8, 2026  
+**Maintainer:** Jason Stedwell

README.md

@@ -3,6 +3,8 @@
 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).
 
+> © Jason Stedwell · [git.alwisp.com/jason/cpas](https://git.alwisp.com/jason/cpas)
+
 ---
 
 ## The only requirement on your machine: Docker Desktop
@@ -15,13 +17,13 @@ Everything else — Node.js, npm, React build, Chromium for PDF — happens insi
 
 ```bash
 # 1. Build the image (installs all deps + compiles React inside Docker)
-docker build -t cpas-tracker .
+docker build -t cpas .
 
 # 2. Run it
-docker run -d --name cpas-tracker \
+docker run -d --name cpas \
   -p 3001:3001 \
   -v cpas-data:/data \
-  cpas-tracker
+  cpas
 
 # 3. Open
 # http://localhost:3001
@@ -30,9 +32,9 @@ docker run -d --name cpas-tracker \
 ## Update After Code Changes
 
 ```bash
-docker build -t cpas-tracker .
-docker stop cpas-tracker && docker rm cpas-tracker
-docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker
+docker build -t cpas .
+docker stop cpas && docker rm cpas
+docker run -d --name cpas -p 3001:3001 -v cpas-data:/data cpas
 ```
 
 ---
@@ -113,6 +115,14 @@ Access the app at `http://10.2.0.14:3001` (or whatever static IP you assigned).
 
 ---
 
+## Stakeholder Demo
+
+A standalone demo page with synthetic data is available at `/demo` (e.g. `http://localhost:3001/demo`).
+It is served as a static route before the SPA catch-all and requires no authentication.
+Useful for showing the app to stakeholders without exposing live employee data.
+
+---
+
 ## Features
 
 ### Company Dashboard
@@ -120,8 +130,9 @@ Access the app at `http://10.2.0.14:3001` (or whatever static IP you assigned).
 - 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
+- **Department filter**: pre-loaded dropdown of all departments for quick scoped views
 - Click any employee name to open their full profile modal
-- **🔍 Audit Log** button — filterable, paginated view of all system write actions
+- **📋 Audit Log** button — filterable, paginated view of all system write actions
 
 ### Violation Form
 - Select existing employee or enter new employee by name
@@ -132,18 +143,21 @@ Access the app at `http://10.2.0.14:3001` (or whatever static IP you assigned).
 - 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
+- **Employee Acknowledgment section**: optional "received by employee" name and date fields; when filled, the PDF signature block shows the recorded acknowledgment instead of a blank signature line
 - One-click PDF download immediately after submission
+- **Toast notifications**: success/error/warning feedback for form submissions, validation, and PDF downloads
 
 ### Employee Profile Modal
 - Full violation history with resolution status and **amendment count badge** per record
 - **✎ Edit Employee** button — update name, department, supervisor, or notes inline
 - **Merge Duplicate** tab — reassign all violations from a duplicate record and delete it
-- **Amend** button per active violation — edit non-scoring fields (location, notes, witness, etc.) with a full field-level diff history
+- **Amend** button per active violation — edit non-scoring fields (location, notes, witness, acknowledgment, etc.) with a full field-level diff history
 - Negate / restore individual violations (soft delete with resolution type + notes)
 - Hard delete option for data entry errors
 - PDF download for any historical violation record
 - **Notes & Flags** — free-text notes (e.g. "on PIP", "union member") with quick-add tag buttons; visible in the profile modal without affecting scoring
 - **Point Expiration Timeline** — shows when each active violation rolls off the 90-day window, with a progress bar, days-remaining countdown, and projected tier-drop indicators
+- **Toast notifications** for all actions: negate, restore, delete, amend, PDF download, employee edit
 
 ### Audit Log
 - Append-only log of every write action: employee created/edited/merged, violation logged/amended/negated/restored/deleted
@@ -160,6 +174,18 @@ Access the app at `http://10.2.0.14:3001` (or whatever static IP you assigned).
 - Covers feature map, CPAS tier system, workflow guidance, and roadmap
 - No external link required; always reflects current deployed version
 
+### Toast Notification System
+- Global toast notifications for all user actions across the application
+- Four variants: success (green), error (red), warning (gold), info (blue)
+- Auto-dismiss with configurable duration and visual progress bar countdown
+- Slide-in animation; stacks up to 5 notifications simultaneously
+- Consistent dark theme styling matching the rest of the UI
+
+### App Footer
+- **© Jason Stedwell** copyright with auto-advancing year
+- **Live dev ticker**: real-time elapsed counter since first commit (`2026-03-06`), ticking every second in `Xd HHh MMm SSs` format with a pulsing green dot
+- **Gitea repo link** with icon — links directly to `git.alwisp.com/jason/cpas`
+
 ### CPAS Tier System
 
 | Points | Tier | Label |
@@ -176,9 +202,11 @@ Scores are computed over a **rolling 90-day window** (negated violations exclude
 
 ### PDF Generation
 - Puppeteer + system Chromium (bundled in Docker image)
+- Logo loaded from disk at startup (no hardcoded base64); falls back gracefully if not found
 - 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)
+- **Acknowledgment rendering**: if the violation has an `acknowledged_by` value, the employee signature block on the PDF shows the recorded name and date with an "Acknowledged" badge; otherwise, blank signature lines are rendered for wet-ink signing
 
 ---
 
@@ -195,9 +223,9 @@ Scores are computed over a **rolling 90-day window** (negated violations exclude
 | GET | `/api/employees/:id/expiration` | Active violation roll-off timeline with days remaining |
 | PATCH | `/api/employees/:id/notes` | Save employee notes only (shorthand) |
 | GET | `/api/dashboard` | All employees with active points + violation counts |
-| POST | `/api/violations` | Log a new violation |
+| POST | `/api/violations` | Log a new violation (accepts `acknowledged_by`, `acknowledged_date`) |
 | GET | `/api/violations/employee/:id` | Violation history with resolutions + amendment counts |
-| PATCH | `/api/violations/:id/negate` | Negate a violation (soft delete + resolution record) |
+| PATCH | `/api/violations/:id/negated` | Negate a violation (soft delete + resolution record) |
 | PATCH | `/api/violations/:id/restore` | Restore a negated violation |
 | PATCH | `/api/violations/:id/amend` | Amend non-scoring fields with field-level diff logging |
 | GET | `/api/violations/:id/amendments` | Get amendment history for a violation |
@@ -211,40 +239,43 @@ Scores are computed over a **rolling 90-day window** (negated violations exclude
 
 ```
 cpas/
-├── Dockerfile                                 # Multi-stage: builds React + runs Express w/ Chromium
+├── 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 active score view
+│   ├── schema.sql                              # Tables + 90-day active score view
 │   └── database.js                            # SQLite connection (better-sqlite3) + auto-migrations
 ├── pdf/
-│   └── generator.js                           # Puppeteer PDF generation
+│   ├── generator.js                           # Puppeteer PDF generation
+│   └── template.js                            # HTML template (loads logo from disk, ack signature rendering)
+├── demo/                                       # Static stakeholder demo page (served at /demo)
 └── client/                                    # React frontend (Vite)
     ├── package.json
     ├── vite.config.js
     ├── index.html
     └── src/
         ├── main.jsx
-        ├── App.jsx
+        ├── App.jsx                            # Root app + AppFooter (copyright, dev ticker, Gitea link)
         ├── data/
-        │   └── violations.js                  # All CPAS violation definitions + groups
+        │   └── violations.js                 # All CPAS violation definitions + groups
         ├── hooks/
-        │   └── useEmployeeIntelligence.js     # Score + history hook
+        │   └── useEmployeeIntelligence.js    # Score + history hook
         └── components/
-            ├── CpasBadge.jsx                  # Tier badge + color logic
-            ├── TierWarning.jsx                # Pre-submit tier crossing alert
-            ├── Dashboard.jsx                  # Company-wide leaderboard + audit log trigger
-            ├── ViolationForm.jsx              # Violation entry form
-            ├── EmployeeModal.jsx              # Employee profile + history modal
-            ├── EditEmployeeModal.jsx          # Employee edit + merge duplicate
-            ├── AmendViolationModal.jsx        # Non-scoring field amendment + diff history
-            ├── AuditLog.jsx                   # Filterable audit log panel
-            ├── NegateModal.jsx                # Negate/resolve violation dialog
-            ├── ViolationHistory.jsx           # Violation list component
-            ├── ExpirationTimeline.jsx         # Per-violation 90-day roll-off countdown
-            ├── EmployeeNotes.jsx              # Inline notes editor with quick-add HR tags
-            └── ReadmeModal.jsx                # In-app admin documentation panel
+            ├── CpasBadge.jsx                 # Tier badge + color logic
+            ├── TierWarning.jsx               # Pre-submit tier crossing alert
+            ├── Dashboard.jsx                 # Company-wide leaderboard + audit log trigger
+            ├── ViolationForm.jsx             # Violation entry form + ack signature fields
+            ├── EmployeeModal.jsx             # Employee profile + history modal
+            ├── EditEmployeeModal.jsx         # Employee edit + merge duplicate
+            ├── AmendViolationModal.jsx       # Non-scoring field amendment + diff history
+            ├── AuditLog.jsx                  # Filterable audit log panel
+            ├── NegateModal.jsx               # Negate/resolve violation dialog
+            ├── ViolationHistory.jsx          # Violation list component
+            ├── ExpirationTimeline.jsx        # Per-violation 90-day roll-off countdown
+            ├── EmployeeNotes.jsx             # Inline notes editor with quick-add HR tags
+            ├── ToastProvider.jsx             # Global toast notification system + useToast hook
+            └── ReadmeModal.jsx              # In-app admin documentation panel
 ```
 
 ---
@@ -254,7 +285,7 @@ cpas/
 Six tables + one view:
 
 - **`employees`** — id, name, department, supervisor, **notes**
-- **`violations`** — full incident record including `prior_active_points` snapshot at time of logging
+- **`violations`** — full incident record including `prior_active_points` snapshot at time of logging, `acknowledged_by` and `acknowledged_date` for employee acknowledgment
 - **`violation_resolutions`** — resolution type, details, resolved_by (linked to violations)
 - **`violation_amendments`** — field-level diff log for violation edits; one row per changed field per amendment
 - **`audit_log`** — append-only record of every write action (action, entity_type, entity_id, performed_by, details, timestamp)
@@ -273,6 +304,8 @@ Point values, violation type, and incident date are **immutable** after submissi
 | `details` | Narrative description |
 | `submitted_by` | Supervisor who submitted |
 | `witness_name` | Witness on record |
+| `acknowledged_by` | Employee who acknowledged receipt |
+| `acknowledged_date` | Date of employee acknowledgment |
 
 ---
 
@@ -301,33 +334,63 @@ Point values, violation type, and incident date are **immutable** after submissi
 | 6 | Employee notes / flags | Free-text notes on employee record with quick-add HR tags; does not affect scoring |
 | 6 | Point expiration timeline | Per-violation roll-off countdown with tier-drop projections |
 | 6 | In-app documentation | Admin usage guide and feature map accessible from the navbar |
+| 7 | Acknowledgment signature field | "Received by employee" name + date on the violation form; renders on the PDF replacing blank signature lines with recorded acknowledgment |
+| 7 | Toast notification system | Global success/error/warning/info notifications for all user actions; auto-dismiss with progress bar; consistent dark theme |
+| 7 | Department dropdown | Pre-loaded select on the violation form replacing free-text department input; shared `DEPARTMENTS` constant |
+| 8 | Stakeholder demo page | Standalone `/demo` route with synthetic data; static HTML served before SPA catch-all; useful for non-live presentations |
+| 8 | App footer | Copyright (© Jason Stedwell), live dev ticker since first commit, Gitea repo icon+link |
 
 ---
 
 ### 📋 Proposed
 
+Effort ratings: 🟢 Low · 🟡 Medium · 🔴 High
+
+#### Quick Wins (High value, low effort)
+
+| Feature | Effort | Description |
+|---------|--------|-------------|
+| Column sort on dashboard | 🟢 | Click `Tier`, `Active Points`, or `Department` headers to sort in-place; one `useState` + comparator, no API changes |
+| Department filter on dashboard | 🟢 | Multi-select dropdown to scope the employee table by department; `DEPARTMENTS` constant already exists |
+| Keyboard shortcut: New Violation | 🟢 | `N` key triggers tab switch to the violation form; ~5 lines of code |
+
 #### 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
-- **CSV / Excel export** — bulk export of violations or dashboard data for external reporting or payroll integration
+
+| Feature | Effort | Description |
+|---------|--------|-------------|
+| Violation trend chart | 🟡 | Line/bar chart of violations per day/week/month, filterable by department or supervisor; useful for identifying systemic patterns |
+| Department heat map | 🟡 | Grid view showing violation density and average CPAS score by department; helps supervisors identify team-level risk |
+| Violation sparklines per employee | 🟡 | Tiny inline bar chart of points over the last 6 months in the employee modal |
 
 #### Employee Management
-- **Supervisor view** — scoped dashboard showing only the employees under a given supervisor, useful for multi-supervisor environments
+
+| Feature | Effort | Description |
+|---------|--------|-------------|
+| Supervisor scoped view | 🟡 | Dashboard filtered to a supervisor's direct reports, accessible via URL param (`?supervisor=Name`); no schema changes required |
+| Employee photo / avatar | 🟢 | Optional avatar upload stored alongside the employee record; shown in the profile modal and dashboard row |
 
 #### 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
-- **Bulk violation import** — CSV import for migrating historical records from paper logs or a prior system
+
+| Feature | Effort | Description |
+|---------|--------|-------------|
+| Draft / pending violations | 🟡 | Save a violation as draft before finalizing; useful when incidents need review before being officially logged |
+| Violation templates | 🟢 | Pre-fill the form with a saved violation type + common details for frequently logged incidents |
 
 #### 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
+
+| Feature | Effort | Description |
+|---------|--------|-------------|
+| Tier escalation alerts | 🟡 | Email or in-app notification when an employee crosses into Tier 2+ so the relevant supervisor is automatically informed |
+| At-risk threshold config | 🟢 | Make the "at-risk" warning threshold (currently hardcoded at 2 pts) configurable per deployment via an env var |
+| version.json / build badge | 🟢 | Inject git SHA + build timestamp into a static file during `docker build`; surfaced in the footer and `/api/health` |
 
 #### 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
-- **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
+
+| Feature | Effort | Description |
+|---------|--------|-------------|
+| Multi-user auth | 🔴 | Simple login with role-based access (admin, supervisor, read-only); currently the app runs on a trusted internal network with no auth |
+| 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 |
 
 ---
 

client/index.html

@@ -4,6 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CPAS Violation Tracker</title>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; height: 100%; }
+      #root { height: 100%; }
+    </style>
   </head>
   <body>
     <div id="root"></div>

client/public/version.json

@@ -0,0 +1,5 @@
+{
+  "sha": "dev",
+  "shortSha": "dev",
+  "buildTime": null
+}

client/src/App.jsx

@@ -1,16 +1,126 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import ViolationForm from './components/ViolationForm';
 import Dashboard     from './components/Dashboard';
 import ReadmeModal   from './components/ReadmeModal';
+import ToastProvider from './components/ToastProvider';
+import './styles/mobile.css';
+
+const REPO_URL     = 'https://git.alwisp.com/jason/cpas';
+// TODO [CLEANUP #18]: DevTicker is a dev vanity widget that ships to prod.
+// Either gate with `import.meta.env.DEV` or remove from the footer.
+const PROJECT_START = new Date('2026-03-06T11:33:32-06:00');
+
+function elapsed(from) {
+  const totalSec = Math.floor((Date.now() - from.getTime()) / 1000);
+  const d = Math.floor(totalSec / 86400);
+  const h = Math.floor((totalSec % 86400) / 3600);
+  const m = Math.floor((totalSec % 3600) / 60);
+  const s = totalSec % 60;
+  return `${d}d ${String(h).padStart(2,'0')}h ${String(m).padStart(2,'0')}m ${String(s).padStart(2,'0')}s`;
+}
+
+function DevTicker() {
+  const [tick, setTick] = useState(() => elapsed(PROJECT_START));
+  useEffect(() => {
+    const id = setInterval(() => setTick(elapsed(PROJECT_START)), 1000);
+    return () => clearInterval(id);
+  }, []);
+  return (
+    <span title="Time since first commit" style={{ display: 'inline-flex', alignItems: 'center', gap: '5px' }}>
+      <span style={{
+        width: '7px', height: '7px', borderRadius: '50%',
+        background: '#22c55e', display: 'inline-block',
+        animation: 'cpas-pulse 1.4s ease-in-out infinite',
+      }} />
+      {tick}
+    </span>
+  );
+}
+
+function GiteaIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style={{ verticalAlign: 'middle' }}>
+      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
+    </svg>
+  );
+}
+
+function AppFooter({ version }) {
+  const year = new Date().getFullYear();
+  const sha  = version?.shortSha || null;
+  const built = version?.buildTime
+    ? new Date(version.buildTime).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    : null;
+
+  return (
+    <>
+      <style>{`
+        @keyframes cpas-pulse {
+          0%, 100% { opacity: 1; transform: scale(1); }
+          50%       { opacity: 0.4; transform: scale(0.75); }
+        }
+
+        /* Mobile-specific footer adjustments */
+        @media (max-width: 768px) {
+          .footer-content {
+            flex-wrap: wrap;
+            justify-content: center;
+            font-size: 10px;
+            padding: 10px 16px;
+            gap: 8px;
+          }
+        }
+      `}</style>
+      <footer style={sf.footer} className="footer-content">
+        <span style={sf.copy}>&copy; {year} Jason Stedwell</span>
+        <span style={sf.sep}>&middot;</span>
+        <DevTicker />
+        <span style={sf.sep}>&middot;</span>
+        <a href={REPO_URL} target="_blank" rel="noopener noreferrer" style={sf.link}>
+          <GiteaIcon /> cpas
+        </a>
+        {sha && sha !== 'dev' && (
+          <>
+            <span style={sf.sep}>&middot;</span>
+            <a
+              href={`${REPO_URL}/commit/${version.sha}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={sf.link}
+              title={built ? `Built ${built}` : 'View commit'}
+            >
+              {sha}
+            </a>
+          </>
+        )}
+      </footer>
+    </>
+  );
+}
 
 const tabs = [
   { id: 'dashboard', label: '📊 Dashboard' },
   { id: 'violation', label: '+ New Violation' },
 ];
 
+// TODO [MAJOR #8]: Move to src/hooks/useMediaQuery.js — this hook is duplicated
+// verbatim in Dashboard.jsx. Also remove `matches` from the useEffect dep array
+// (it changes inside the effect, which can cause a loop on strict-mode mount).
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) setMatches(media.matches);
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+  return matches;
+}
+
 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' },
+  app:      { minHeight: '100vh', background: '#050608', fontFamily: "'Segoe UI', Arial, sans-serif", color: '#f8f9fa', display: 'flex', flexDirection: 'column' },
+  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' },
@@ -21,7 +131,6 @@ const s = {
     cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
     background: 'none', border: 'none',
   }),
-  // Docs button sits flush-right in the nav
   docsBtn: {
     marginLeft: 'auto',
     background: 'none',
@@ -37,37 +146,135 @@ const s = {
     alignItems: 'center',
     gap: '6px',
   },
+  main: { flex: 1 },
   card: { maxWidth: '1100px', margin: '30px auto', background: '#111217', borderRadius: '10px', boxShadow: '0 2px 16px rgba(0,0,0,0.6)', border: '1px solid #222' },
 };
 
+// Mobile-responsive style overrides
+const mobileStyles = `
+  @media (max-width: 768px) {
+    .app-nav {
+      padding: 0 16px !important;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    .logo-wrap {
+      margin-right: 0 !important;
+      padding: 12px 0 !important;
+      width: 100%;
+      justify-content: center;
+      border-bottom: 1px solid #1a1b22;
+    }
+    .nav-tabs {
+      display: flex;
+      width: 100%;
+      justify-content: space-around;
+    }
+    .nav-tab {
+      flex: 1;
+      text-align: center;
+      padding: 14px 8px !important;
+      font-size: 13px !important;
+    }
+    .docs-btn {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      padding: 4px 10px !important;
+      font-size: 11px !important;
+    }
+    .docs-btn span:first-child {
+      display: none;
+    }
+    .main-card {
+      margin: 12px !important;
+      border-radius: 8px !important;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .logo-text {
+      font-size: 16px !important;
+    }
+    .logo-img {
+      height: 24px !important;
+    }
+  }
+`;
+
+const sf = {
+  footer: {
+    borderTop: '1px solid #1a1b22',
+    padding: '12px 40px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    fontSize: '11px',
+    color: 'rgba(248,249,250,0.35)',
+    background: '#000',
+    flexShrink: 0,
+  },
+  copy: { color: 'rgba(248,249,250,0.35)' },
+  sep:  { color: 'rgba(248,249,250,0.15)' },
+  link: {
+    color: 'rgba(248,249,250,0.35)',
+    textDecoration: 'none',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '4px',
+    transition: 'color 0.15s',
+  },
+};
+
 export default function App() {
   const [tab,        setTab]        = useState('dashboard');
   const [showReadme, setShowReadme] = useState(false);
+  const [version,    setVersion]    = useState(null);
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  useEffect(() => {
+    fetch('/version.json')
+      .then(r => r.ok ? r.json() : null)
+      .then(v => { if (v) setVersion(v); })
+      .catch(() => {});
+  }, []);
 
   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>
+    <ToastProvider>
+      {/* TODO [MAJOR #9]: Inline <style> tags re-inject on every render and duplicate
+           the same block from Dashboard.jsx. Move all shared mobile CSS to mobile.css */}
+      <style>{mobileStyles}</style>
+      <div style={s.app}>
+        <nav style={s.nav} className="app-nav">
+          <div style={s.logoWrap} className="logo-wrap">
+            <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} className="logo-img" />
+            <div style={s.logoText} className="logo-text">CPAS Tracker</div>
+          </div>
+
+          <div className="nav-tabs">
+            {tabs.map(t => (
+              <button key={t.id} style={s.tab(tab === t.id)} className="nav-tab" onClick={() => setTab(t.id)}>
+                {/* TODO [MINOR #17]: first .replace('📊 ', '📊 ') replaces string with itself — no-op. Remove it. */}
+            {isMobile ? t.label.replace('📊 ', '📊 ').replace('+ New ', '+ ') : t.label}
+              </button>
+            ))}
+          </div>
+
+          <button style={s.docsBtn} className="docs-btn" onClick={() => setShowReadme(true)} title="Open admin documentation">
+            <span>?</span> Docs
+          </button>
+        </nav>
+
+        <div style={s.main}>
+          <div style={s.card} className="main-card">
+            {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
+          </div>
         </div>
 
-        {tabs.map(t => (
-          <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
-            {t.label}
-          </button>
-        ))}
+        <AppFooter version={version} />
 
-        <button style={s.docsBtn} onClick={() => setShowReadme(true)} title="Open admin documentation">
-          <span>?</span> Docs
-        </button>
-      </nav>
-
-      <div style={s.card}>
-        {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
+        {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
       </div>
-
-      {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
-    </div>
+    </ToastProvider>
   );
 }

client/src/components/AuditLog.jsx

@@ -112,6 +112,9 @@ export default function AuditLog({ onClose }) {
   const [filterAction, setFilterAction] = useState('');
   const LIMIT = 50;
 
+  // TODO [MAJOR #5]: `offset` in useCallback deps causes the callback to be
+  // re-created on each load-more, which triggers the filterType/filterAction
+  // useEffect unexpectedly. Track offset in a useRef instead.
   const load = useCallback((reset = false) => {
     setLoading(true);
     const o = reset ? 0 : offset;
@@ -121,7 +124,8 @@ export default function AuditLog({ onClose }) {
     axios.get('/api/audit', { params })
       .then(r => {
         const data = r.data;
-        // Client-side action filter (cheap enough at this scale)
+        // TODO [MINOR]: client-side action filter means server still fetches LIMIT
+        // rows before filtering — add server-side `action` param to /api/audit.
         const filtered = filterAction ? data.filter(e => e.action === filterAction) : data;
         setEntries(prev => reset ? filtered : [...prev, ...filtered]);
         setHasMore(data.length === LIMIT);

client/src/components/Dashboard.jsx

@@ -3,6 +3,7 @@ import axios from 'axios';
 import CpasBadge, { getTier } from './CpasBadge';
 import EmployeeModal from './EmployeeModal';
 import AuditLog from './AuditLog';
+import DashboardMobile from './DashboardMobile';
 
 const AT_RISK_THRESHOLD = 2;
 
@@ -28,15 +29,38 @@ function isAtRisk(points) {
   return boundary !== null && (boundary - points) <= AT_RISK_THRESHOLD;
 }
 
+// TODO [MAJOR #8]: Same hook is defined in App.jsx — extract to src/hooks/useMediaQuery.js
+// Also: `matches` in the dep array can cause a loop on strict-mode initial mount.
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) setMatches(media.matches);
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+  return matches;
+}
+
+// Filter keys
+const FILTER_NONE     = null;
+const FILTER_TOTAL    = 'total';
+const FILTER_ELITE    = 'elite';
+const FILTER_ACTIVE   = 'active';
+const FILTER_AT_RISK  = 'at_risk';
+
 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' },
+  statCard:     { flex: '1', minWidth: '140px', background: '#181924', border: '1px solid #303136', borderRadius: '8px', padding: '16px', textAlign: 'center', cursor: 'pointer', transition: 'border-color 0.15s, box-shadow 0.15s' },
+  statCardActive: { boxShadow: '0 0 0 2px #d4af37', border: '1px solid #d4af37' },
   statNum:      { fontSize: '28px', fontWeight: 800, color: '#f8f9fa' },
   statLbl:      { fontSize: '11px', color: '#b5b5c0', marginTop: '4px' },
+  filterBadge:  { fontSize: '10px', color: '#d4af37', marginTop: '4px', fontWeight: 600 },
   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' },
@@ -49,6 +73,55 @@ const s = {
   auditBtn:     { padding: '9px 18px', background: 'none', color: '#9ca0b8', border: '1px solid #2a2b3a', borderRadius: '6px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' },
 };
 
+// Mobile styles
+const mobileStyles = `
+  @media (max-width: 768px) {
+    .dashboard-wrap {
+      padding: 16px !important;
+    }
+    .dashboard-header {
+      flex-direction: column;
+      align-items: flex-start !important;
+    }
+    .dashboard-title {
+      font-size: 20px !important;
+    }
+    .dashboard-subtitle {
+      font-size: 12px !important;
+    }
+    .dashboard-stats {
+      gap: 10px !important;
+    }
+    .dashboard-stat-card {
+      min-width: calc(50% - 5px) !important;
+      padding: 12px !important;
+    }
+    .stat-num {
+      font-size: 24px !important;
+    }
+    .stat-lbl {
+      font-size: 10px !important;
+    }
+    .toolbar-right {
+      width: 100%;
+      flex-direction: column;
+    }
+    .search-input {
+      width: 100% !important;
+    }
+    .toolbar-btn {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .dashboard-stat-card {
+      min-width: 100% !important;
+    }
+  }
+`;
+
 export default function Dashboard() {
   const [employees,   setEmployees]   = useState([]);
   const [filtered,    setFiltered]    = useState([]);
@@ -56,6 +129,8 @@ export default function Dashboard() {
   const [selectedId,  setSelectedId]  = useState(null);
   const [showAudit,   setShowAudit]   = useState(false);
   const [loading,     setLoading]     = useState(true);
+  const [activeFilter, setActiveFilter] = useState(FILTER_NONE);
+  const isMobile = useMediaQuery('(max-width: 768px)');
 
   const load = useCallback(() => {
     setLoading(true);
@@ -66,65 +141,148 @@ export default function Dashboard() {
 
   useEffect(() => { load(); }, [load]);
 
+  // Apply search + badge filter together
   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]);
+    let base = employees;
+
+    if (activeFilter === FILTER_ELITE) {
+      base = base.filter(e => e.active_points >= 0 && e.active_points <= 4);
+    } else if (activeFilter === FILTER_ACTIVE) {
+      base = base.filter(e => e.active_points > 0);
+    } else if (activeFilter === FILTER_AT_RISK) {
+      base = base.filter(e => isAtRisk(e.active_points));
+    }
+    // FILTER_TOTAL and FILTER_NONE show all
+
+    if (q) {
+      base = base.filter(e =>
+        e.name.toLowerCase().includes(q) ||
+        (e.department || '').toLowerCase().includes(q) ||
+        (e.supervisor || '').toLowerCase().includes(q)
+      );
+    }
+
+    setFiltered(base);
+  }, [search, employees, activeFilter]);
 
   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;
+  // Elite Standing: 0–4 pts (Tier 0-1)
+  const eliteCount  = employees.filter(e => e.active_points >= 0 && e.active_points <= 4).length;
   const maxPoints   = employees.reduce((m, e) => Math.max(m, e.active_points), 0);
 
+  function handleBadgeClick(filterKey) {
+    setActiveFilter(prev => prev === filterKey ? FILTER_NONE : filterKey);
+  }
+
+  function cardStyle(filterKey, extra = {}) {
+    const isActive = activeFilter === filterKey;
+    return {
+      ...s.statCard,
+      ...(isActive ? s.statCardActive : {}),
+      ...extra,
+    };
+  }
+
   return (
     <>
-      <div style={s.wrap}>
-        <div style={s.header}>
+      {/* TODO [MAJOR #9]: Same mobileStyles block exists in App.jsx. Move to mobile.css */}
+      <style>{mobileStyles}</style>
+      <div style={s.wrap} className="dashboard-wrap">
+        <div style={s.header} className="dashboard-header">
           <div>
-            <div style={s.title}>Company Dashboard</div>
-            <div style={s.subtitle}>Click any employee name to view their full profile</div>
+            <div style={s.title} className="dashboard-title">Company Dashboard</div>
+            <div style={s.subtitle} className="dashboard-subtitle">
+              Click any employee name to view their full profile
+              {activeFilter && activeFilter !== FILTER_NONE && (
+                <span style={{ marginLeft: '10px', color: '#d4af37', fontWeight: 600 }}>
+                  · Filtered: {activeFilter === FILTER_ELITE ? 'Elite Standing (0–4 pts)' : activeFilter === FILTER_ACTIVE ? 'With Active Points' : activeFilter === FILTER_AT_RISK ? 'At Risk' : 'All'}
+                  <button
+                    onClick={() => setActiveFilter(FILTER_NONE)}
+                    style={{ marginLeft: '6px', background: 'none', border: 'none', color: '#9ca0b8', cursor: 'pointer', fontSize: '12px' }}
+                    title="Clear filter"
+                  >✕</button>
+                </span>
+              )}
+            </div>
           </div>
-          <div style={s.toolbarRight}>
+          <div style={s.toolbarRight} className="toolbar-right">
             <input
               style={s.search}
+              className="search-input"
               placeholder="Search name, dept, supervisor…"
               value={search}
               onChange={e => setSearch(e.target.value)}
             />
-            <button style={s.auditBtn} onClick={() => setShowAudit(true)}>📋 Audit Log</button>
-            <button style={s.refreshBtn} onClick={load}>↻ Refresh</button>
+            <button style={s.auditBtn} className="toolbar-btn" onClick={() => setShowAudit(true)}>📋 Audit Log</button>
+            <button style={s.refreshBtn} className="toolbar-btn" 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} className="dashboard-stats">
+          {/* Total Employees — clicking shows all */}
+          <div
+            style={cardStyle(FILTER_TOTAL)}
+            className="dashboard-stat-card"
+            onClick={() => handleBadgeClick(FILTER_TOTAL)}
+            title="Click to show all employees"
+          >
+            <div style={s.statNum} className="stat-num">{employees.length}</div>
+            <div style={s.statLbl} className="stat-lbl">Total Employees</div>
+            {activeFilter === FILTER_TOTAL && <div style={s.filterBadge}>▼ Showing All</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>
+
+          {/* Elite Standing: 0–4 pts */}
+          <div
+            style={cardStyle(FILTER_ELITE, { borderTop: '3px solid #28a745' })}
+            className="dashboard-stat-card"
+            onClick={() => handleBadgeClick(FILTER_ELITE)}
+            title="Click to filter: Elite Standing (0–4 pts)"
+          >
+            <div style={{ ...s.statNum, color: '#6ee7b7' }} className="stat-num">{eliteCount}</div>
+            <div style={s.statLbl} className="stat-lbl">Elite Standing (0–4 pts)</div>
+            {activeFilter === FILTER_ELITE && <div style={s.filterBadge}>▼ Filtered</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>
+
+          {/* With Active Points */}
+          <div
+            style={cardStyle(FILTER_ACTIVE, { borderTop: '3px solid #d4af37' })}
+            className="dashboard-stat-card"
+            onClick={() => handleBadgeClick(FILTER_ACTIVE)}
+            title="Click to filter: employees with active points"
+          >
+            <div style={{ ...s.statNum, color: '#ffd666' }} className="stat-num">{activeCount}</div>
+            <div style={s.statLbl} className="stat-lbl">With Active Points</div>
+            {activeFilter === FILTER_ACTIVE && <div style={s.filterBadge}>▼ Filtered</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>
+
+          {/* At Risk */}
+          <div
+            style={cardStyle(FILTER_AT_RISK, { borderTop: '3px solid #ffb020' })}
+            className="dashboard-stat-card"
+            onClick={() => handleBadgeClick(FILTER_AT_RISK)}
+            title={`Click to filter: at risk (≤${AT_RISK_THRESHOLD} pts to next tier)`}
+          >
+            <div style={{ ...s.statNum, color: '#ffdf8a' }} className="stat-num">{atRiskCount}</div>
+            <div style={s.statLbl} className="stat-lbl">At Risk (≤{AT_RISK_THRESHOLD} pts to next tier)</div>
+            {activeFilter === FILTER_AT_RISK && <div style={s.filterBadge}>▼ Filtered</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>
+
+          {/* Highest Score — display only, no filter */}
+          <div
+            style={{ ...s.statCard, borderTop: '3px solid #c0392b', cursor: 'default' }}
+            className="dashboard-stat-card"
+          >
+            <div style={{ ...s.statNum, color: '#ff8a80' }} className="stat-num">{maxPoints}</div>
+            <div style={s.statLbl} className="stat-lbl">Highest Active Score</div>
           </div>
         </div>
 
         {loading ? (
           <p style={{ color: '#77798a', textAlign: 'center', padding: '40px' }}>Loading…</p>
+        ) : isMobile ? (
+          <DashboardMobile employees={filtered} onEmployeeClick={setSelectedId} />
         ) : (
           <table style={s.table}>
             <thead>

client/src/components/DashboardMobile.jsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import CpasBadge, { getTier } from './CpasBadge';
+
+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 = {
+  card: {
+    background: '#181924',
+    border: '1px solid #2a2b3a',
+    borderRadius: '10px',
+    padding: '16px',
+    marginBottom: '12px',
+    boxShadow: '0 1px 4px rgba(0,0,0,0.4)',
+  },
+  cardAtRisk: {
+    background: '#181200',
+    border: '1px solid #d4af37',
+  },
+  row: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '8px 0',
+    borderBottom: '1px solid rgba(255,255,255,0.05)',
+  },
+  rowLast: {
+    borderBottom: 'none',
+  },
+  label: {
+    fontSize: '11px',
+    fontWeight: 600,
+    color: '#9ca0b8',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+  },
+  value: {
+    fontSize: '14px',
+    fontWeight: 600,
+    color: '#f8f9fa',
+    textAlign: 'right',
+  },
+  name: {
+    fontSize: '16px',
+    fontWeight: 700,
+    color: '#d4af37',
+    marginBottom: '8px',
+    cursor: 'pointer',
+    textDecoration: 'underline dotted',
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    textAlign: 'left',
+    width: '100%',
+  },
+  atRiskBadge: {
+    display: 'inline-block',
+    marginTop: '4px',
+    padding: '3px 8px',
+    borderRadius: '10px',
+    fontSize: '10px',
+    fontWeight: 700,
+    background: '#3b2e00',
+    color: '#ffd666',
+    border: '1px solid #d4af37',
+  },
+  points: {
+    fontSize: '28px',
+    fontWeight: 800,
+    textAlign: 'center',
+    margin: '8px 0',
+  },
+};
+
+export default function DashboardMobile({ employees, onEmployeeClick }) {
+  if (!employees || employees.length === 0) {
+    return (
+      <div style={{ padding: '20px', textAlign: 'center', color: '#77798a', fontStyle: 'italic' }}>
+        No employees found.
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ padding: '12px' }}>
+      {employees.map((emp) => {
+        const risk = isAtRisk(emp.active_points);
+        const tier = getTier(emp.active_points);
+        const boundary = nextTierBoundary(emp.active_points);
+        const cardStyle = risk ? { ...s.card, ...s.cardAtRisk } : s.card;
+
+        return (
+          <div key={emp.id} style={cardStyle}>
+            <button style={s.name} onClick={() => onEmployeeClick(emp.id)}>
+              {emp.name}
+            </button>
+            {risk && (
+              <div style={s.atRiskBadge}>
+                ⚠ {boundary - emp.active_points} pt{boundary - emp.active_points > 1 ? 's' : ''} to {getTier(boundary).label.split('—')[0].trim()}
+              </div>
+            )}
+
+            <div style={{ ...s.row, marginTop: '12px' }}>
+              <span style={s.label}>Tier / Standing</span>
+              <span style={s.value}><CpasBadge points={emp.active_points} /></span>
+            </div>
+
+            <div style={s.row}>
+              <span style={s.label}>Active Points</span>
+              <span style={{ ...s.points, color: tier.color }}>{emp.active_points}</span>
+            </div>
+
+            <div style={s.row}>
+              <span style={s.label}>90-Day Violations</span>
+              <span style={s.value}>{emp.violation_count}</span>
+            </div>
+
+            {emp.department && (
+              <div style={s.row}>
+                <span style={s.label}>Department</span>
+                <span style={{ ...s.value, color: '#c0c2d6' }}>{emp.department}</span>
+              </div>
+            )}
+
+            {emp.supervisor && (
+              <div style={{ ...s.row, ...s.rowLast }}>
+                <span style={s.label}>Supervisor</span>
+                <span style={{ ...s.value, color: '#c0c2d6' }}>{emp.supervisor}</span>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

client/src/components/EditEmployeeModal.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import { DEPARTMENTS } from '../data/departments';
 
 const s = {
   overlay: {
@@ -133,7 +134,12 @@ export default function EditEmployeeModal({ employee, onClose, onSaved }) {
               <div style={s.label}>Full Name</div>
               <input style={s.input} value={name} onChange={e => setName(e.target.value)} />
               <div style={s.label}>Department</div>
-              <input style={s.input} value={department} onChange={e => setDepartment(e.target.value)} placeholder="Optional" />
+              <select style={s.select} value={department} onChange={e => setDepartment(e.target.value)}>
+                <option value="">-- Select Department --</option>
+                {DEPARTMENTS.map(d => (
+                  <option key={d} value={d}>{d}</option>
+                ))}
+              </select>
               <div style={s.label}>Supervisor</div>
               <input style={s.input} value={supervisor} onChange={e => setSupervisor(e.target.value)} placeholder="Optional" />
               <div style={s.row}>

client/src/components/EmployeeModal.jsx

@@ -6,6 +6,7 @@ import EditEmployeeModal from './EditEmployeeModal';
 import AmendViolationModal from './AmendViolationModal';
 import ExpirationTimeline from './ExpirationTimeline';
 import EmployeeNotes from './EmployeeNotes';
+import { useToast } from './ToastProvider';
 
 const s = {
   overlay: {
@@ -97,16 +98,17 @@ export default function EmployeeModal({ employeeId, onClose }) {
   const [editingEmp, setEditingEmp] = useState(false);
   const [amending,   setAmending]   = useState(null); // violation object
 
+  const toast = useToast();
+
   const load = useCallback(() => {
     setLoading(true);
     Promise.all([
-      axios.get('/api/employees'),
+      axios.get(`/api/employees/${employeeId}`),
       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);
+        setEmployee(empRes.data || null);
         setScore(scoreRes.data);
         setViolations(violRes.data);
       })
@@ -116,34 +118,54 @@ export default function EmployeeModal({ employeeId, onClose }) {
   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);
+    try {
+      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);
+      toast.success('PDF downloaded.');
+    } catch (err) {
+      toast.error('PDF generation failed: ' + (err.response?.data?.error || err.message));
+    }
   };
 
   const handleHardDelete = async (id) => {
-    await axios.delete(`/api/violations/${id}`);
-    setConfirmDel(null);
-    load();
+    try {
+      await axios.delete(`/api/violations/${id}`);
+      toast.success('Violation permanently deleted.');
+      setConfirmDel(null);
+      load();
+    } catch (err) {
+      toast.error('Delete failed: ' + (err.response?.data?.error || err.message));
+    }
   };
 
   const handleRestore = async (id) => {
-    await axios.patch(`/api/violations/${id}/restore`);
-    setConfirmDel(null);
-    load();
+    try {
+      await axios.patch(`/api/violations/${id}/restore`);
+      toast.success('Violation restored to active.');
+      setConfirmDel(null);
+      load();
+    } catch (err) {
+      toast.error('Restore failed: ' + (err.response?.data?.error || err.message));
+    }
   };
 
   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();
+    try {
+      await axios.patch(`/api/violations/${negating.id}/negate`, { resolution_type, details, resolved_by });
+      toast.success('Violation negated.');
+      setNegating(null);
+      setConfirmDel(null);
+      load();
+    } catch (err) {
+      toast.error('Negate failed: ' + (err.response?.data?.error || err.message));
+    }
   };
 
   const tier    = score ? getTier(score.active_points) : null;
@@ -203,7 +225,7 @@ export default function EmployeeModal({ employeeId, onClose }) {
                   </div>
                   <div style={{ ...s.scoreCard, minWidth: '140px' }}>
                     <div style={{ fontSize: '13px', fontWeight: 700, color: tier?.color || '#f8f9fa' }}>
-                      {tier ? tier.label : '–'}
+                      {tier ? tier.label : '—'}
                     </div>
                     <div style={s.scoreLbl}>Current Tier</div>
                   </div>
@@ -405,14 +427,14 @@ export default function EmployeeModal({ employeeId, onClose }) {
         <EditEmployeeModal
           employee={employee}
           onClose={() => setEditingEmp(false)}
-          onSaved={load}
+          onSaved={() => { toast.success('Employee updated.'); load(); }}
         />
       )}
       {amending && (
         <AmendViolationModal
           violation={amending}
           onClose={() => setAmending(null)}
-          onSaved={load}
+          onSaved={() => { toast.success('Violation amended.'); load(); }}
         />
       )}
     </div>

client/src/components/EmployeeNotes.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import axios from 'axios';
+import { useToast } from './ToastProvider';
 
 const s = {
   wrapper: { marginTop: '20px' },
@@ -53,14 +54,23 @@ export default function EmployeeNotes({ employeeId, initialNotes, onSaved }) {
   const [draft,   setDraft]   = useState(initialNotes || '');
   const [saved,   setSaved]   = useState(initialNotes || '');
   const [saving,  setSaving]  = useState(false);
+  const [saveErr, setSaveErr] = useState('');
+
+  const toast = useToast();
 
   const handleSave = async () => {
     setSaving(true);
+    setSaveErr('');
     try {
       await axios.patch(`/api/employees/${employeeId}/notes`, { notes: draft });
       setSaved(draft);
       setEditing(false);
       if (onSaved) onSaved(draft);
+    } catch (err) {
+      const msg = err.response?.data?.error || err.message || 'Failed to save notes';
+      setSaveErr(msg);
+      toast.error('Notes save failed: ' + msg);
+      // Keep editing open so the user doesn't lose their changes
     } finally {
       setSaving(false);
     }
@@ -130,6 +140,11 @@ export default function EmployeeNotes({ employeeId, initialNotes, onSaved }) {
             placeholder="Free-text notes — one per line or comma-separated. Does not affect CPAS scoring."
             autoFocus
           />
+          {saveErr && (
+            <div style={{ fontSize: '12px', color: '#ff7070', marginBottom: '6px' }}>
+              ✗ {saveErr}
+            </div>
+          )}
           <div style={s.actions}>
             <button style={s.saveBtn} onClick={handleSave} disabled={saving}>
               {saving ? 'Saving…' : 'Save Notes'}

client/src/components/ExpirationTimeline.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 
-// Tier thresholds used to compute what tier an employee would drop to
-// after a given violation rolls off.
+// TODO [MINOR #10]: This TIER_THRESHOLDS array duplicates tiers defined in CpasBadge.jsx
+// and Dashboard.jsx. Export TIERS from CpasBadge.jsx and import here instead.
 const TIER_THRESHOLDS = [
   { min: 30, label: 'Separation',            color: '#ff1744' },
   { min: 25, label: 'Final Decision',        color: '#ff6d00' },

client/src/components/NegateModal.jsx

@@ -78,14 +78,12 @@ export default function NegateModal({ violation, onConfirm, onCancel }) {
     });
   };
 
-  // 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}>

client/src/components/ReadmeModal.jsx

@@ -23,8 +23,8 @@ function mdToHtml(md) {
     const hm = line.match(/^(#{1,4})\s+(.+)/);
     if (hm) { close(); const lv=hm[1].length, id=hm[2].toLowerCase().replace(/[^a-z0-9]+/g,'-'); out.push(`<h${lv} id="${id}">${inline(hm[2])}</h${lv}>`); i++; continue; }
     if (line.trim().startsWith('|')) {
-      const cells = line.trim().replace(/^\||\|$/g,'').split('|').map(c=>c.trim());
-      if (!inTable) { close(); inTable=true; out.push('<table><thead><tr>'); cells.forEach(c=>out.push(`<th>${inline(c)}</th>`)); out.push('</tr></thead><tbody>'); i++; if (i < lines.length && /^[\|\s\-:]+$/.test(lines[i])) i++; continue; }
+      const cells = line.trim().replace(/^\|||\|$/g,'').split('|').map(c=>c.trim());
+      if (!inTable) { close(); inTable=true; out.push('<table><thead><tr>'); cells.forEach(c=>out.push(`<th>${inline(c)}</th>`)); out.push('</tr></thead><tbody>'); i++; if (i < lines.length && /^[\|\s\:\-]+$/.test(lines[i])) i++; continue; }
       else { out.push('<tr>'); cells.forEach(c=>out.push(`<td>${inline(c)}</td>`)); out.push('</tr>'); i++; continue; }
     }
     const ul = line.match(/^[-*]\s+(.*)/);
@@ -46,7 +46,7 @@ function buildToc(md) {
   }, []);
 }
 
-// ─── Styles ───────────────────────────────────────────────────────────────────
+// ——— Styles ——————————————————————————————————————————————————————————————————
 const S = {
   overlay: { position:'fixed', inset:0, background:'rgba(0,0,0,0.75)', zIndex:2000, display:'flex', alignItems:'flex-start', justifyContent:'flex-end' },
   panel:   { background:'#111217', color:'#f8f9fa', width:'760px', maxWidth:'95vw', height:'100vh', overflowY:'auto', boxShadow:'-4px 0 32px rgba(0,0,0,0.85)', display:'flex', flexDirection:'column' },
@@ -76,7 +76,7 @@ const CSS = `
 .adm tr:hover td { background:#1e1f2e }
 `;
 
-// ─── Admin guide content (no install / Docker content) ────────────────────────
+// ——— Admin guide content (no install / Docker content) ————————————————————
 const GUIDE_MD = `# CPAS Tracker — Admin Guide
 
 Internal tool for CPAS violation documentation, workforce standing management, and audit compliance. All data is stored locally in the Docker container volume — there is no external dependency.
@@ -129,7 +129,9 @@ Use the **+ New Violation** tab.
 4. If the employee has a prior violation of the same type, the **recidivist auto-escalation** rule triggers — the points slider jumps to the maximum allowed for that violation type.
 5. The **tier crossing warning** previews what tier the submission would land the employee in. Review before submitting.
 6. Adjust points using the slider if discretionary reduction is warranted (within the violation's allowed min/max range).
-7. Submit. A **PDF download link** appears immediately — download it for the employee's file.
+7. **Employee Acknowledgment** (optional): if the employee is present and acknowledges receipt, enter their printed name and the acknowledgment date. This replaces the blank signature line on the PDF with a recorded acknowledgment and an "Acknowledged" badge. Leave blank if the employee is not present or declines.
+8. Submit. A **PDF download link** appears immediately — download it for the employee's file.
+9. **Toast notifications** confirm success or surface errors at the top right of the screen. Toasts auto-dismiss after a few seconds.
 
 ---
 
@@ -149,10 +151,12 @@ Visible when the employee has active points. Shows each active violation as a pr
 #### Violation History
 Full record of all submissions — active, negated, and resolved.
 
-- **Amend** — edit non-scoring fields (location, details, witness, submitted-by, incident time) on any active violation. Every change is logged as a field-level diff (old → new) with timestamp. Points, type, and incident date are immutable.
+- **Amend** — edit non-scoring fields (location, details, witness, submitted-by, incident time, acknowledged-by, acknowledged-date) on any active violation. Every change is logged as a field-level diff (old → new) with timestamp. Points, type, and incident date are immutable.
 - **Negate** — soft-delete a violation with a resolution type and notes. The record is preserved in history; the points are immediately removed from the score. Fully reversible via **Restore**.
 - **Hard delete** — permanent removal. Use only for genuine data entry errors.
-- **PDF** — download the formal violation document for any historical record.
+- **PDF** — download the formal violation document for any historical record. If the violation has an employee acknowledgment on record, the PDF shows the filled-in name and date instead of blank signature lines.
+
+All actions trigger **toast notifications** confirming success or surfacing errors.
 
 #### Edit Employee
 Update name, department, or supervisor. Changes are logged to the audit trail.
@@ -178,7 +182,7 @@ The audit log is the authoritative record for compliance review. Nothing in it c
 
 Amendments allow corrections to a violation's non-scoring fields without deleting and re-submitting, which would disrupt the audit trail and the prior-points snapshot.
 
-**Amendable fields:** incident time, location, details, submitted-by, witness name.
+**Amendable fields:** incident time, location, details, submitted-by, witness name, acknowledged-by, acknowledged-date.
 
 **Immutable fields:** violation type, incident date, point value.
 
@@ -186,6 +190,19 @@ Each amendment stores a before/after diff for every changed field. Amendment his
 
 ---
 
+### Toast Notifications
+
+All user actions across the application produce **toast notifications** — small slide-in messages at the top right of the screen.
+
+- **Success** (green) — violation submitted, PDF downloaded, employee updated, etc.
+- **Error** (red) — API failures, validation errors, PDF generation issues
+- **Warning** (gold) — missing required fields, policy alerts
+- **Info** (blue) — general informational messages
+
+Toasts auto-dismiss after a few seconds (errors persist longer). Each toast has a progress bar countdown and a manual dismiss button. Up to 5 toasts can stack simultaneously.
+
+---
+
 ## Immutability Rules — Quick Reference
 
 | Action | Allowed? | Notes |
@@ -194,6 +211,7 @@ Each amendment stores a before/after diff for every changed field. Amendment his
 | Edit incident date | No | Immutable after submission |
 | Edit point value | No | Immutable after submission |
 | Edit location / details / witness | Yes | Via Amend |
+| Edit acknowledged-by / acknowledged-date | Yes | Via Amend |
 | Negate (void) a violation | Yes | Soft delete; reversible |
 | Hard delete a violation | Yes | Permanent; use sparingly |
 | Edit employee name / dept / supervisor | Yes | Logged to audit trail |
@@ -217,6 +235,8 @@ Each amendment stores a before/after diff for every changed field. Amendment his
 - Employee notes and flags with quick-add HR tags
 - Point expiration timeline with tier-drop projections
 - In-app admin guide (this panel)
+- Acknowledgment signature field — employee name + date on form and PDF
+- Toast notification system — global feedback for all user actions
 
 ---
 
@@ -224,7 +244,6 @@ Each amendment stores a before/after diff for every changed field. Amendment his
 
 These are well-scoped additions that fit the current architecture without major changes.
 
-- **Acknowledgment signature field** — "received by employee" name + date on the violation form; prints on the PDF in place of the blank signature line. Addresses the most common field workflow gap.
 - **CSV export** — one endpoint returning violations or dashboard data as a downloadable CSV for payroll or external reporting.
 - **Supervisor-scoped view** — filter the dashboard to a single supervisor's team via URL param; useful in multi-supervisor environments without requiring full auth.
 
@@ -253,7 +272,7 @@ These require meaningful infrastructure additions and should be evaluated agains
 - **Dark/light theme toggle** — UI is currently dark-only.
 `;
 
-// ─── Component ────────────────────────────────────────────────────────────────
+// ——— Component ——————————————————————————————————————————————————————————————
 export default function ReadmeModal({ onClose }) {
   const bodyRef = useRef(null);
   const html    = mdToHtml(GUIDE_MD);

client/src/components/TierWarning.jsx

@@ -17,14 +17,15 @@ export default function TierWarning({ currentPoints, addingPoints }) {
 
     return (
         <div style={{
-            background: '#fff3cd',
-            border: '2px solid #ffc107',
+            background: '#3b2e00',
+            border: '2px solid #d4af37',
             borderRadius: '6px',
             padding: '12px 16px',
             margin: '12px 0',
             fontSize: '13px',
+            color: '#ffdf8a',
         }}>
-            <strong>⚠ Tier Escalation Warning</strong><br />
+            <strong style={{ color: '#ffd666' }}>⚠ Tier Escalation Warning</strong><br />
             Adding <strong>{addingPoints} point{addingPoints !== 1 ? 's' : ''}</strong> will move this employee
             from <strong>{current.label}</strong> to <strong>{projected.label}</strong>.
             {tierUp && (

client/src/components/ToastProvider.jsx

@@ -0,0 +1,145 @@
+import React, { createContext, useContext, useState, useCallback, useRef, useEffect } from 'react';
+
+const ToastContext = createContext(null);
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used within a ToastProvider');
+  return ctx;
+}
+
+const VARIANTS = {
+  success: { bg: '#053321', border: '#0f5132', color: '#9ef7c1', icon: '✓' },
+  error:   { bg: '#3c1114', border: '#f5c6cb', color: '#ffb3b8', icon: '✗' },
+  info:    { bg: '#0c1f3f', border: '#2563eb', color: '#93c5fd', icon: 'ℹ' },
+  warning: { bg: '#3b2e00', border: '#d4af37', color: '#ffdf8a', icon: '⚠' },
+};
+
+let nextId = 0;
+
+function Toast({ toast, onDismiss }) {
+  const v = VARIANTS[toast.variant] || VARIANTS.info;
+  const [exiting, setExiting] = useState(false);
+  const timerRef = useRef(null);
+
+  useEffect(() => {
+    timerRef.current = setTimeout(() => {
+      setExiting(true);
+      setTimeout(() => onDismiss(toast.id), 280);
+    }, toast.duration || 4000);
+    return () => clearTimeout(timerRef.current);
+  }, [toast.id, toast.duration, onDismiss]);
+
+  const handleDismiss = () => {
+    clearTimeout(timerRef.current);
+    setExiting(true);
+    setTimeout(() => onDismiss(toast.id), 280);
+  };
+
+  return (
+    <div style={{
+      background: v.bg,
+      border: `1px solid ${v.border}`,
+      borderRadius: '8px',
+      padding: '12px 16px',
+      display: 'flex',
+      alignItems: 'flex-start',
+      gap: '10px',
+      color: v.color,
+      fontSize: '13px',
+      fontWeight: 500,
+      minWidth: '320px',
+      maxWidth: '480px',
+      boxShadow: '0 4px 24px rgba(0,0,0,0.5)',
+      animation: exiting ? 'toastOut 0.28s ease-in forwards' : 'toastIn 0.28s ease-out',
+      position: 'relative',
+      overflow: 'hidden',
+    }}>
+      <span style={{ fontSize: '16px', lineHeight: 1, flexShrink: 0, marginTop: '1px' }}>{v.icon}</span>
+      <span style={{ flex: 1, lineHeight: 1.5 }}>{toast.message}</span>
+      <button
+        onClick={handleDismiss}
+        style={{
+          background: 'none', border: 'none', color: v.color, cursor: 'pointer',
+          fontSize: '16px', padding: '0 0 0 8px', opacity: 0.7, lineHeight: 1, flexShrink: 0,
+        }}
+        aria-label="Dismiss"
+      >
+        ×
+      </button>
+      <div style={{
+        position: 'absolute', bottom: 0, left: 0, height: '3px',
+        background: v.color, opacity: 0.4, borderRadius: '0 0 8px 8px',
+        animation: `toastProgress ${toast.duration || 4000}ms linear forwards`,
+      }} />
+    </div>
+  );
+}
+
+export default function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+
+  const dismiss = useCallback((id) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  }, []);
+
+  const addToast = useCallback((message, variant = 'info', duration = 4000) => {
+    const id = ++nextId;
+    setToasts(prev => {
+      const next = [...prev, { id, message, variant, duration }];
+      return next.length > 5 ? next.slice(-5) : next;
+    });
+    return id;
+  }, []);
+
+  const toast = useCallback({
+    success: (msg, dur) => addToast(msg, 'success', dur),
+    error:   (msg, dur) => addToast(msg, 'error', dur || 6000),
+    info:    (msg, dur) => addToast(msg, 'info', dur),
+    warning: (msg, dur) => addToast(msg, 'warning', dur || 5000),
+  }, [addToast]);
+
+  // Inject keyframes once
+  useEffect(() => {
+    if (document.getElementById('toast-keyframes')) return;
+    const style = document.createElement('style');
+    style.id = 'toast-keyframes';
+    style.textContent = `
+      @keyframes toastIn {
+        from { opacity: 0; transform: translateX(100%); }
+        to   { opacity: 1; transform: translateX(0); }
+      }
+      @keyframes toastOut {
+        from { opacity: 1; transform: translateX(0); }
+        to   { opacity: 0; transform: translateX(100%); }
+      }
+      @keyframes toastProgress {
+        from { width: 100%; }
+        to   { width: 0%; }
+      }
+    `;
+    document.head.appendChild(style);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={toast}>
+      {children}
+      <div style={{
+        position: 'fixed',
+        top: '16px',
+        right: '16px',
+        zIndex: 99999,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        pointerEvents: 'none',
+      }}>
+        {toasts.map(t => (
+          <div key={t.id} style={{ pointerEvents: 'auto' }}>
+            <Toast toast={t} onDismiss={dismiss} />
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}

client/src/components/ViolationForm.jsx

@@ -1,10 +1,13 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import axios from 'axios';
 import { violationData, violationGroups } from '../data/violations';
 import useEmployeeIntelligence from '../hooks/useEmployeeIntelligence';
 import CpasBadge from './CpasBadge';
 import TierWarning from './TierWarning';
 import ViolationHistory from './ViolationHistory';
+import ViolationTypeModal from './ViolationTypeModal';
+import { useToast } from './ToastProvider';
+import { DEPARTMENTS } from '../data/departments';
 
 const s = {
   content:      { padding: '32px 40px', background: '#111217', borderRadius: '10px', color: '#f8f9fa' },
@@ -26,30 +29,91 @@ const s = {
   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' },
+  ackSection:   { background: '#181924', borderLeft: '4px solid #2196F3', padding: '20px', marginBottom: '30px', borderRadius: '4px', border: '1px solid #2a2b3a' },
+  ackHint:      { fontSize: '12px', color: '#9ca0b8', marginTop: '4px', fontStyle: 'italic' },
 };
 
 const EMPTY_FORM = {
   employeeId: '', employeeName: '', department: '', supervisor: '', witnessName: '',
   violationType: '', incidentDate: '', incidentTime: '',
+  // TODO [MAJOR #6]: `amount` and `minutesLate` are rendered but never sent to the API
   amount: '', minutesLate: '', location: '', additionalDetails: '', points: 1,
+  acknowledgedBy: '', acknowledgedDate: '',
 };
 
 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 [status,       setStatus]       = useState(null);  // TODO [MAJOR #7]: remove — toast covers this
   const [lastViolId,   setLastViolId]   = useState(null);
   const [pdfLoading,   setPdfLoading]   = useState(false);
+  const [customTypes,  setCustomTypes]  = useState([]);
+  const [typeModal,    setTypeModal]    = useState(null); // null | 'create' | <editing object>
 
+  const toast = useToast();
   const intel = useEmployeeIntelligence(form.employeeId || null);
 
   useEffect(() => {
     axios.get('/api/employees').then(r => setEmployees(r.data)).catch(() => {});
+    fetchCustomTypes();
   }, []);
 
+  const fetchCustomTypes = () => {
+    axios.get('/api/violation-types').then(r => setCustomTypes(r.data)).catch(() => {});
+  };
+
+  // Build a map of custom types keyed by type_key for fast lookup
+  const customTypeMap = useMemo(() =>
+    Object.fromEntries(customTypes.map(t => [t.type_key, t])),
+    [customTypes]
+  );
+
+  // Merge hardcoded and custom violation groups for the dropdown
+  const mergedGroups = useMemo(() => {
+    const groups = {};
+    // Start with all hardcoded groups
+    Object.entries(violationGroups).forEach(([cat, items]) => {
+      groups[cat] = [...items];
+    });
+    // Add custom types into their respective category, or create new group
+    customTypes.forEach(t => {
+      const item = {
+        key:        t.type_key,
+        name:       t.name,
+        category:   t.category,
+        minPoints:  t.min_points,
+        maxPoints:  t.max_points,
+        chapter:    t.chapter     || '',
+        description: t.description || '',
+        fields:     t.fields,
+        isCustom:   true,
+        customId:   t.id,
+      };
+      if (!groups[t.category]) groups[t.category] = [];
+      groups[t.category].push(item);
+    });
+    return groups;
+  }, [customTypes]);
+
+  // Resolve a violation definition from either the hardcoded registry or custom types
+  const resolveViolation = key => {
+    if (violationData[key]) return violationData[key];
+    const ct = customTypeMap[key];
+    if (ct) return {
+      name:        ct.name,
+      category:    ct.category,
+      chapter:     ct.chapter     || '',
+      description: ct.description || '',
+      minPoints:   ct.min_points,
+      maxPoints:   ct.max_points,
+      fields:      ct.fields,
+      isCustom:    true,
+      customId:    ct.id,
+    };
+    return null;
+  };
+
   useEffect(() => {
     if (!violation || !form.violationType) return;
     const allTime = intel.countsAllTime[form.violationType];
@@ -68,7 +132,7 @@ export default function ViolationForm() {
 
   const handleViolationChange = e => {
     const key = e.target.value;
-    const v   = violationData[key] || null;
+    const v   = resolveViolation(key);
     setViolation(v);
     setForm(prev => ({ ...prev, violationType: key, points: v ? v.minPoints : 1 }));
   };
@@ -77,8 +141,8 @@ export default function ViolationForm() {
 
   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.' });
+    if (!form.violationType) { toast.warning('Please select a violation type.'); return; }
+    if (!form.employeeName)  { toast.warning('Please enter an employee name.'); return; }
     try {
       const empRes     = await axios.post('/api/employees', { name: form.employeeName, department: form.department, supervisor: form.supervisor });
       const employeeId = empRes.data.id;
@@ -93,6 +157,8 @@ export default function ViolationForm() {
         location:       form.location       || null,
         details:        form.additionalDetails || null,
         witness_name:   form.witnessName    || null,
+        acknowledged_by:   form.acknowledgedBy   || null,
+        acknowledged_date: form.acknowledgedDate || null,
       });
 
       const newId = violRes.data.id;
@@ -101,11 +167,15 @@ export default function ViolationForm() {
       const empList = await axios.get('/api/employees');
       setEmployees(empList.data);
 
+      toast.success(`Violation #${newId} recorded — click Download PDF to save the document.`);
+      // TODO [MAJOR #7]: remove setStatus — toast above already covers this message
       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) });
+      const msg = err.response?.data?.error || err.message;
+      toast.error(`Failed to submit: ${msg}`);
+      setStatus({ ok: false, msg: '✗ Error: ' + msg });
     }
   };
 
@@ -122,8 +192,9 @@ export default function ViolationForm() {
       link.click();
       link.remove();
       window.URL.revokeObjectURL(url);
+      toast.success('PDF downloaded successfully.');
     } catch (err) {
-      setStatus({ ok: false, msg: '✗ PDF generation failed: ' + err.message });
+      toast.error('PDF generation failed: ' + err.message);
     } finally {
       setPdfLoading(false);
     }
@@ -162,12 +233,21 @@ export default function ViolationForm() {
         )}
 
         <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]) => (
+          {[['employeeName','Employee Name','John Doe'],['supervisor','Supervisor Name','Jane Smith'],['witnessName','Witness Name (Officer)','Officer Name']].map(([name,label,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} />
+              <input style={s.input} type="text" name={name} value={form[name]} onChange={handleChange} placeholder={ph} />
             </div>
           ))}
+          <div style={s.item}>
+            <label style={s.label}>Department:</label>
+            <select style={s.input} name="department" value={form.department} onChange={handleChange}>
+              <option value="">-- Select Department --</option>
+              {DEPARTMENTS.map(d => (
+                <option key={d} value={d}>{d}</option>
+              ))}
+            </select>
+          </div>
         </div>
       </div>
 
@@ -177,16 +257,37 @@ export default function ViolationForm() {
           <div style={s.grid}>
 
             <div style={{ ...s.item, ...s.fullCol }}>
-              <label style={s.label}>Violation Type:</label>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '5px' }}>
+                <label style={{ ...s.label, marginBottom: 0 }}>Violation Type:</label>
+                <div style={{ display: 'flex', gap: '6px' }}>
+                  {violation?.isCustom && (
+                    <button
+                      type="button"
+                      onClick={() => setTypeModal(customTypeMap[form.violationType])}
+                      style={{ fontSize: '11px', padding: '3px 10px', borderRadius: '4px', border: '1px solid #4caf50', background: '#1a2e1a', color: '#4caf50', cursor: 'pointer', fontWeight: 600 }}
+                    >
+                      Edit Type
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    onClick={() => setTypeModal('create')}
+                    style={{ fontSize: '11px', padding: '3px 10px', borderRadius: '4px', border: '1px solid #d4af37', background: '#181200', color: '#ffd666', cursor: 'pointer', fontWeight: 600 }}
+                    title="Add a new custom violation type"
+                  >
+                    + Add Type
+                  </button>
+                </div>
+              </div>
               <select style={s.input} value={form.violationType} onChange={handleViolationChange} required>
                 <option value="">-- Select Violation Type --</option>
-                {Object.entries(violationGroups).map(([group, items]) => (
+                {Object.entries(mergedGroups).map(([group, items]) => (
                   <optgroup key={group} label={group}>
                     {items.map(v => {
                       const prior = priorCount90(v.key);
                       return (
                         <option key={v.key} value={v.key}>
-                          {v.name}{prior > 0 ? ` ★ ${prior}x in 90 days` : ''}
+                          {v.name}{v.isCustom ? ' ✦' : ''}{prior > 0 ? ` ★ ${prior}x in 90 days` : ''}
                         </option>
                       );
                     })}
@@ -197,6 +298,11 @@ export default function ViolationForm() {
               {violation && (
                 <div style={s.contextBox}>
                   <strong>{violation.name}</strong>
+                  {violation.isCustom && (
+                    <span style={{ display: 'inline-block', marginLeft: '8px', padding: '1px 7px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#1a2e1a', color: '#4caf50', border: '1px solid #4caf50' }}>
+                      Custom
+                    </span>
+                  )}
                   {isRepeat(form.violationType) && form.employeeId && (
                     <span style={s.repeatBadge}>
                       ★ Repeat — {intel.countsAllTime[form.violationType]?.count}x prior
@@ -275,6 +381,27 @@ export default function ViolationForm() {
           )}
         </div>
 
+        {/* Acknowledgment Signature Section */}
+        <div style={s.ackSection}>
+          <h2 style={{ ...s.sectionTitle, fontSize: '17px' }}>Employee Acknowledgment</h2>
+          <p style={{ fontSize: '12px', color: '#9ca0b8', marginBottom: '14px', lineHeight: 1.6 }}>
+            If the employee is present and acknowledges receipt of this violation, enter their name and the date below.
+            This replaces the blank signature line on the PDF with a recorded acknowledgment.
+          </p>
+          <div style={s.grid}>
+            <div style={s.item}>
+              <label style={s.label}>Acknowledged By (Employee Name):</label>
+              <input style={s.input} type="text" name="acknowledgedBy" value={form.acknowledgedBy} onChange={handleChange} placeholder="Employee's printed name" />
+              <div style={s.ackHint}>Leave blank if employee is not present or declines to sign</div>
+            </div>
+            <div style={s.item}>
+              <label style={s.label}>Acknowledgment Date:</label>
+              <input style={s.input} type="date" name="acknowledgedDate" value={form.acknowledgedDate} onChange={handleChange} />
+              <div style={s.ackHint}>Date the employee received and acknowledged this document</div>
+            </div>
+          </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); }}>
@@ -298,7 +425,7 @@ export default function ViolationForm() {
           </div>
         )}
 
-        {status && <div style={status.ok ? s.statusOk : s.statusErr}>{status.msg}</div>}
+        {status && <div style={status.ok ? { marginTop: '15px', padding: '15px', borderRadius: '6px', textAlign: 'center', fontWeight: 600, background: '#053321', color: '#9ef7c1', border: '1px solid #0f5132' } : { marginTop: '15px', padding: '15px', borderRadius: '6px', textAlign: 'center', fontWeight: 600, background: '#3c1114', color: '#ffb3b8', border: '1px solid #f5c6cb' }}>{status.msg}</div>}
       </form>
 
       {form.employeeId && (
@@ -308,6 +435,40 @@ export default function ViolationForm() {
         </div>
       )}
 
+      {typeModal && (
+        <ViolationTypeModal
+          editing={typeModal === 'create' ? null : typeModal}
+          onClose={() => setTypeModal(null)}
+          onSaved={saved => {
+            fetchCustomTypes();
+            setTypeModal(null);
+            // Auto-select the newly created type; do nothing on delete (saved === null)
+            if (saved) {
+              const v = {
+                name:        saved.name,
+                category:    saved.category,
+                chapter:     saved.chapter     || '',
+                description: saved.description || '',
+                minPoints:   saved.min_points,
+                maxPoints:   saved.max_points,
+                fields:      saved.fields,
+                isCustom:    true,
+                customId:    saved.id,
+              };
+              setViolation(v);
+              setForm(prev => ({ ...prev, violationType: saved.type_key, points: saved.min_points }));
+            } else {
+              // Type was deleted — clear selection if it was the active type
+              setForm(prev => {
+                const stillExists = violationData[prev.violationType] || false;
+                return stillExists ? prev : { ...prev, violationType: '', points: 1 };
+              });
+              setViolation(null);
+            }
+          }}
+        />
+      )}
+
     </div>
   );
 }

client/src/components/ViolationTypeModal.jsx

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

client/src/data/departments.js

@@ -0,0 +1,9 @@
+export const DEPARTMENTS = [
+  'Administrative',
+  'Business Development',
+  'Design and Content',
+  'Executive',
+  'Implementation and Support',
+  'Operations',
+  'Production',
+];

client/src/styles/mobile.css

@@ -0,0 +1,113 @@
+/* Mobile-Responsive Utilities for CPAS Tracker */
+/* Target: Standard phones 375px+ with graceful degradation */
+
+/* Base responsive utilities */
+@media (max-width: 768px) {
+  /* Hide scrollbars but keep functionality */
+  * {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Touch-friendly tap targets (min 44px) */
+  button, a, input, select {
+    min-height: 44px;
+  }
+
+  /* Improve form input sizing on mobile */
+  input, select, textarea {
+    font-size: 16px !important; /* Prevents iOS zoom on focus */
+  }
+}
+
+/* Tablet and below */
+@media (max-width: 1024px) {
+  .hide-tablet {
+    display: none !important;
+  }
+}
+
+/* Mobile portrait and landscape */
+@media (max-width: 768px) {
+  .hide-mobile {
+    display: none !important;
+  }
+
+  .mobile-full-width {
+    width: 100% !important;
+  }
+
+  .mobile-text-center {
+    text-align: center !important;
+  }
+
+  .mobile-no-padding {
+    padding: 0 !important;
+  }
+
+  .mobile-small-padding {
+    padding: 12px !important;
+  }
+
+  /* Stack flex containers vertically */
+  .mobile-stack {
+    flex-direction: column !important;
+  }
+
+  /* Allow horizontal scroll for tables */
+  .mobile-scroll-x {
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Card-based layout helpers */
+  .mobile-card {
+    display: block !important;
+    padding: 16px;
+    margin-bottom: 12px;
+    border-radius: 8px;
+    background: #181924;
+    border: 1px solid #2a2b3a;
+  }
+
+  .mobile-card-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    border-bottom: 1px solid #1c1d29;
+  }
+
+  .mobile-card-row:last-child {
+    border-bottom: none;
+  }
+
+  .mobile-card-label {
+    font-weight: 600;
+    color: #9ca0b8;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .mobile-card-value {
+    font-weight: 600;
+    color: #f8f9fa;
+    text-align: right;
+  }
+}
+
+/* Small mobile phones */
+@media (max-width: 480px) {
+  .hide-small-mobile {
+    display: none !important;
+  }
+}
+
+/* Utility for sticky positioning on mobile */
+@media (max-width: 768px) {
+  .mobile-sticky-top {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: #000000;
+  }
+}

db/database.js

@@ -19,6 +19,8 @@ if (!cols.includes('negated'))             db.exec("ALTER TABLE violations ADD C
 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");
+if (!cols.includes('acknowledged_by'))     db.exec("ALTER TABLE violations ADD COLUMN acknowledged_by TEXT");
+if (!cols.includes('acknowledged_date'))   db.exec("ALTER TABLE violations ADD COLUMN acknowledged_date TEXT");
 
 // Employee notes column (free-text, does not affect scoring)
 const empCols = db.prepare('PRAGMA table_info(employees)').all().map(c => c.name);
@@ -58,6 +60,23 @@ db.exec(`CREATE TABLE IF NOT EXISTS audit_log (
     created_at   DATETIME DEFAULT CURRENT_TIMESTAMP
 )`);
 
+// ── Feature: Custom Violation Types ──────────────────────────────────────────
+// Persisted violation type definitions created via the UI. type_key is prefixed
+// with 'custom_' to prevent collisions with hardcoded violation keys.
+db.exec(`CREATE TABLE IF NOT EXISTS violation_types (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    type_key    TEXT    NOT NULL UNIQUE,
+    name        TEXT    NOT NULL,
+    category    TEXT    NOT NULL DEFAULT 'Custom',
+    chapter     TEXT,
+    description TEXT,
+    min_points  INTEGER NOT NULL DEFAULT 1,
+    max_points  INTEGER NOT NULL DEFAULT 1,
+    fields      TEXT    NOT NULL DEFAULT '["description"]',
+    created_at  DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at  DATETIME DEFAULT CURRENT_TIMESTAMP
+)`);
+
 // Recreate view so it always filters negated rows
 db.exec(`DROP VIEW IF EXISTS active_cpas_scores;
 CREATE VIEW active_cpas_scores AS

db/schema.sql

@@ -23,6 +23,8 @@ CREATE TABLE IF NOT EXISTS violations (
     negated_at           DATETIME,
     prior_active_points  INTEGER, -- snapshot at time of logging
     prior_tier_label     TEXT,    -- optional human-readable tier
+    acknowledged_by      TEXT,    -- employee name who acknowledged receipt
+    acknowledged_date    TEXT,    -- date of acknowledgment (YYYY-MM-DD)
     created_at           DATETIME DEFAULT CURRENT_TIMESTAMP
 );
 

demo/index.html

@@ -0,0 +1,893 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>CPAS Tracker — Demo Preview</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  :root {
+    --gold:       #d4af37;
+    --gold-lt:    #ffdf8a;
+    --gold-dk:    #a88520;
+    --bg:         #050608;
+    --bg-nav:     #000000;
+    --bg-card:    #111217;
+    --bg-section: #181924;
+    --border:     #222;
+    --border-lt:  #2a2b3a;
+    --text:       #f8f9fa;
+    --text-muted: #9ca0b8;
+    --text-dim:   #d1d3e0;
+    --green:      #28a745;
+    --green-bg:   #d4edda;
+    --yellow:     #856404;
+    --yellow-bg:  #fff3cd;
+    --red:        #d9534f;
+    --red-bg:     #f8d7da;
+    --red-dk:     #721c24;
+    --red-dk-bg:  #f5c6cb;
+    --sep:        #721c24;
+  }
+
+  html { scroll-behavior: smooth; }
+
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'Inter', sans-serif;
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+
+  /* ── DEMO BANNER ── */
+  .demo-banner {
+    background: linear-gradient(90deg, #1a1200 0%, #2a1f00 50%, #1a1200 100%);
+    border-bottom: 1px solid var(--gold-dk);
+    padding: 8px 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    font-family: 'DM Mono', monospace;
+    font-size: 11px;
+    color: var(--gold-lt);
+    letter-spacing: 0.8px;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+  }
+  .demo-banner .dot {
+    width: 6px; height: 6px; border-radius: 50%;
+    background: var(--gold);
+    animation: pulse 2s infinite;
+  }
+  @keyframes pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.4; transform: scale(0.7); }
+  }
+
+  /* ── NAV ── */
+  nav {
+    background: var(--bg-nav);
+    padding: 0 40px;
+    display: flex;
+    align-items: center;
+    gap: 0;
+    border-bottom: 1px solid #333;
+    position: sticky;
+    top: 33px;
+    z-index: 999;
+  }
+  .logo-wrap {
+    display: flex; align-items: center;
+    margin-right: 32px; padding: 14px 0;
+    gap: 10px;
+  }
+  .logo-icon {
+    width: 28px; height: 28px;
+    background: linear-gradient(135deg, var(--gold), var(--gold-lt));
+    border-radius: 6px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 14px; font-weight: 900; color: #000;
+    font-family: 'Syne', sans-serif;
+    flex-shrink: 0;
+  }
+  .logo-text {
+    color: var(--text);
+    font-weight: 800;
+    font-size: 18px;
+    letter-spacing: 0.5px;
+    font-family: 'Syne', sans-serif;
+  }
+  .nav-tab {
+    padding: 18px 22px;
+    color: rgba(248,249,250,0.55);
+    border-bottom: 3px solid transparent;
+    cursor: pointer;
+    font-weight: 400;
+    font-size: 14px;
+    background: none;
+    border-top: none; border-left: none; border-right: none;
+    transition: color 0.2s;
+    text-decoration: none;
+    display: inline-block;
+  }
+  .nav-tab.active {
+    color: var(--text);
+    border-bottom-color: var(--gold);
+    font-weight: 700;
+  }
+  .nav-tab:hover { color: var(--text); }
+  .nav-docs {
+    margin-left: auto;
+    background: none;
+    border: 1px solid var(--border-lt);
+    color: var(--text-muted);
+    border-radius: 6px;
+    padding: 6px 14px;
+    font-size: 12px;
+    cursor: pointer;
+    font-weight: 600;
+  }
+
+  /* ── MAIN LAYOUT ── */
+  .main {
+    max-width: 1100px;
+    margin: 30px auto;
+    padding: 0 20px 60px;
+  }
+
+  /* ── HERO ── */
+  .hero {
+    background: var(--bg-card);
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    padding: 48px 48px 40px;
+    margin-bottom: 24px;
+    position: relative;
+    overflow: hidden;
+  }
+  .hero::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, transparent, var(--gold), var(--gold-lt), var(--gold), transparent);
+  }
+  .hero::after {
+    content: 'DEMO';
+    position: absolute;
+    top: 20px; right: 24px;
+    font-family: 'DM Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 2px;
+    color: var(--gold-dk);
+    border: 1px solid var(--gold-dk);
+    padding: 2px 8px;
+    border-radius: 3px;
+  }
+  .hero-eyebrow {
+    font-family: 'DM Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 2px;
+    color: var(--gold);
+    text-transform: uppercase;
+    margin-bottom: 14px;
+  }
+  .hero h1 {
+    font-family: 'Syne', sans-serif;
+    font-size: 36px;
+    font-weight: 800;
+    color: var(--text);
+    line-height: 1.1;
+    margin-bottom: 14px;
+  }
+  .hero h1 span { color: var(--gold); }
+  .hero p {
+    font-size: 15px;
+    color: var(--text-dim);
+    max-width: 580px;
+    line-height: 1.7;
+    margin-bottom: 28px;
+  }
+  .hero-stats {
+    display: flex;
+    gap: 32px;
+    flex-wrap: wrap;
+  }
+  .hero-stat {
+    display: flex; flex-direction: column; gap: 3px;
+  }
+  .hero-stat .val {
+    font-family: 'Syne', sans-serif;
+    font-size: 28px;
+    font-weight: 800;
+    color: var(--gold-lt);
+    line-height: 1;
+  }
+  .hero-stat .lbl {
+    font-size: 11px;
+    color: var(--text-muted);
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    font-family: 'DM Mono', monospace;
+  }
+  .hero-stat-divider {
+    width: 1px; background: var(--border-lt);
+    align-self: stretch; margin: 4px 0;
+  }
+
+  /* ── SECTION TITLE ── */
+  .section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+  .section-title {
+    font-family: 'Syne', sans-serif;
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .section-title::before {
+    content: '';
+    display: block;
+    width: 3px; height: 14px;
+    background: var(--gold);
+    border-radius: 2px;
+  }
+
+  /* ── KPI CARDS ROW ── */
+  .kpi-row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 14px;
+    margin-bottom: 24px;
+  }
+  .kpi-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 20px 22px;
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.2s, transform 0.15s;
+  }
+  .kpi-card:hover { border-color: var(--border-lt); transform: translateY(-1px); }
+  .kpi-card .kpi-label {
+    font-size: 11px;
+    font-family: 'DM Mono', monospace;
+    letter-spacing: 0.8px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    margin-bottom: 10px;
+  }
+  .kpi-card .kpi-val {
+    font-family: 'Syne', sans-serif;
+    font-size: 32px;
+    font-weight: 800;
+    color: var(--text);
+    line-height: 1;
+    margin-bottom: 6px;
+  }
+  .kpi-card .kpi-sub { font-size: 11px; color: var(--text-muted); }
+  .kpi-card .kpi-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }
+  .kpi-accent-gold { background: linear-gradient(90deg, var(--gold-dk), var(--gold)); }
+  .kpi-accent-red  { background: linear-gradient(90deg, #a02020, #e74c3c); }
+  .kpi-accent-blue { background: linear-gradient(90deg, #1a3a6a, #3b82f6); }
+  .kpi-accent-green{ background: linear-gradient(90deg, #0a3d20, #28a745); }
+
+  /* ── TWO COLUMNS ── */
+  .two-col {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin-bottom: 24px;
+  }
+  .panel {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    overflow: hidden;
+  }
+  .panel-head {
+    background: var(--bg-section);
+    border-bottom: 1px solid var(--border);
+    padding: 14px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .panel-title {
+    font-size: 13px; font-weight: 700;
+    color: var(--text); font-family: 'Syne', sans-serif;
+  }
+
+  /* ── EMPLOYEE TABLE ── */
+  .emp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  .emp-table th {
+    padding: 10px 16px; text-align: left;
+    font-size: 10px; font-family: 'DM Mono', monospace;
+    letter-spacing: 1px; text-transform: uppercase;
+    color: var(--text-muted); border-bottom: 1px solid var(--border);
+    background: var(--bg-section);
+  }
+  .emp-table td { padding: 11px 16px; border-bottom: 1px solid #18191f; vertical-align: middle; }
+  .emp-table tr:last-child td { border-bottom: none; }
+  .emp-table tr:hover td { background: rgba(255,255,255,0.02); }
+  .emp-name { font-weight: 600; color: var(--text); }
+
+  /* ── TIER BADGES ── */
+  .tier-badge {
+    display: inline-block; padding: 3px 9px; border-radius: 10px;
+    font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid;
+  }
+  .tier-0 { color: #28a745; background: #d4edda; border-color: #28a745; }
+  .tier-1 { color: #856404; background: #fff3cd; border-color: #c9a000; }
+  .tier-2 { color: #d9534f; background: #f8d7da; border-color: #d9534f; }
+  .tier-3 { color: #d9534f; background: #f8d7da; border-color: #d9534f; }
+  .tier-4 { color: #721c24; background: #f5c6cb; border-color: #c0392b; }
+  .tier-5 { color: #721c24; background: #f5c6cb; border-color: #c0392b; }
+  .tier-6 { color: #fff; background: #721c24; border-color: #5a1520; }
+
+  /* ── VIOLATION FEED ── */
+  .viol-item {
+    padding: 13px 18px; border-bottom: 1px solid #18191f;
+    display: flex; align-items: flex-start; gap: 12px;
+  }
+  .viol-item:last-child { border-bottom: none; }
+  .viol-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
+  .viol-dot-red    { background: #e74c3c; box-shadow: 0 0 6px rgba(231,76,60,0.5); }
+  .viol-dot-yellow { background: var(--gold); box-shadow: 0 0 6px rgba(212,175,55,0.5); }
+  .viol-dot-green  { background: #28a745; }
+  .viol-info { flex: 1; min-width: 0; }
+  .viol-name { font-size: 13px; font-weight: 600; color: var(--text); }
+  .viol-type { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
+  .viol-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--text-muted); font-family: 'DM Mono', monospace; }
+  .viol-pts { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; color: var(--gold-lt); flex-shrink: 0; }
+  .repeat-tag { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 700; background: #3b2e00; color: #ffd666; border: 1px solid var(--gold-dk); margin-left: 4px; }
+
+  /* ── DEPT BREAKDOWN ── */
+  .dept-row { padding: 12px 18px; border-bottom: 1px solid #18191f; display: flex; align-items: center; gap: 12px; }
+  .dept-row:last-child { border-bottom: none; }
+  .dept-name { font-size: 13px; color: var(--text-dim); min-width: 160px; }
+  .dept-bar-track { flex: 1; height: 6px; background: var(--border-lt); border-radius: 3px; overflow: hidden; }
+  .dept-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-dk), var(--gold)); }
+  .dept-count { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-muted); min-width: 28px; text-align: right; }
+
+  /* ── FORM PREVIEW ── */
+  .form-preview { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 24px; overflow: hidden; }
+  .form-section { background: var(--bg-section); border-left: 4px solid var(--gold); padding: 20px 24px; margin: 20px; border-radius: 4px; border-top: 1px solid var(--border-lt); border-right: 1px solid var(--border-lt); border-bottom: 1px solid var(--border-lt); }
+  .form-section-title { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
+  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
+  .form-item { display: flex; flex-direction: column; gap: 5px; }
+  .form-label { font-size: 12px; font-weight: 600; color: #e5e7f1; }
+  .form-input { padding: 9px 12px; border: 1px solid var(--border-lt); border-radius: 4px; font-size: 13px; background: #050608; color: var(--text-muted); font-family: 'Inter', sans-serif; pointer-events: none; }
+  .form-input.filled { color: var(--text); border-color: #3a3d52; }
+  .point-val { font-family: 'Syne', sans-serif; font-size: 28px; font-weight: 800; color: var(--gold-lt); }
+
+  /* ── TIER SCALE ── */
+  .tier-timeline { display: flex; align-items: stretch; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; }
+  .tier-seg { flex: 1; padding: 12px 8px 10px; text-align: center; border-right: 1px solid rgba(255,255,255,0.05); }
+  .tier-seg:last-child { border-right: none; }
+  .tier-seg .ts-pts { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 800; margin-bottom: 3px; }
+  .tier-seg .ts-label { font-size: 9px; font-family: 'DM Mono', monospace; letter-spacing: 0.5px; opacity: 0.8; line-height: 1.3; }
+  .ts-0 { background: rgba(40,167,69,0.12);  color: #28a745; }
+  .ts-1 { background: rgba(133,100,4,0.15);  color: #c9a000; }
+  .ts-2 { background: rgba(217,83,79,0.15);  color: #d9534f; }
+  .ts-3 { background: rgba(217,83,79,0.18);  color: #d9534f; }
+  .ts-4 { background: rgba(114,28,36,0.20);  color: #e87070; }
+  .ts-5 { background: rgba(114,28,36,0.25);  color: #e87070; }
+  .ts-6 { background: rgba(114,28,36,0.50);  color: #ff9999; }
+
+  /* ── AUDIT LOG ── */
+  .audit-item { padding: 11px 18px; border-bottom: 1px solid #18191f; display: flex; align-items: center; gap: 12px; font-size: 12px; }
+  .audit-item:last-child { border-bottom: none; }
+  .audit-time { font-family: 'DM Mono', monospace; color: var(--text-muted); font-size: 11px; min-width: 80px; }
+  .audit-action { flex: 1; color: var(--text-dim); }
+  .audit-action strong { color: var(--text); font-weight: 600; }
+  .audit-pts { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gold); font-weight: 700; }
+
+  /* ── FEATURES ── */
+  .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
+  .feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 22px; transition: border-color 0.2s, transform 0.15s; }
+  .feature-card:hover { border-color: var(--border-lt); transform: translateY(-2px); }
+  .feature-icon { font-size: 22px; margin-bottom: 12px; display: block; }
+  .feature-title { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
+  .feature-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
+
+  /* ── FOOTER ── */
+  footer {
+    border-top: 1px solid var(--border);
+    padding: 20px 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+    font-size: 11px;
+    color: var(--text-muted);
+    font-family: 'DM Mono', monospace;
+    background: var(--bg-nav);
+  }
+  .footer-left {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+  }
+  .footer-brand {
+    font-family: 'Syne', sans-serif;
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--text-dim);
+  }
+  .footer-copy {
+    color: var(--text-muted);
+    font-size: 11px;
+  }
+  .footer-gitea {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: 4px 10px;
+    border: 1px solid var(--border-lt);
+    border-radius: 5px;
+    transition: border-color 0.2s, color 0.2s;
+    font-size: 11px;
+  }
+  .footer-gitea:hover {
+    border-color: var(--gold-dk);
+    color: var(--gold-lt);
+  }
+  .footer-gitea svg {
+    width: 14px;
+    height: 14px;
+    fill: currentColor;
+    flex-shrink: 0;
+  }
+  .footer-right {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+  }
+  .footer-ticker {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(212,175,55,0.06);
+    border: 1px solid rgba(212,175,55,0.2);
+    border-radius: 5px;
+    padding: 4px 12px;
+  }
+  .footer-ticker-label {
+    font-size: 10px;
+    color: var(--text-muted);
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+  }
+  .footer-ticker-time {
+    font-family: 'DM Mono', monospace;
+    font-size: 12px;
+    color: var(--gold);
+    font-weight: 500;
+    letter-spacing: 1px;
+  }
+  .footer-ticker-dot {
+    width: 5px; height: 5px; border-radius: 50%;
+    background: var(--gold);
+    animation: pulse 2s infinite;
+    flex-shrink: 0;
+  }
+  .footer-divider {
+    width: 1px;
+    height: 16px;
+    background: var(--border-lt);
+  }
+
+  /* ── ANIMATIONS ── */
+  .fade-in { opacity: 0; transform: translateY(16px); animation: fadeUp 0.5s ease forwards; }
+  @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
+  .fade-in:nth-child(1) { animation-delay: 0.05s; }
+  .fade-in:nth-child(2) { animation-delay: 0.10s; }
+  .fade-in:nth-child(3) { animation-delay: 0.15s; }
+  .fade-in:nth-child(4) { animation-delay: 0.20s; }
+
+  .tab-pane { display: none; }
+  .tab-pane.active { display: block; }
+
+  @media (max-width: 768px) {
+    .kpi-row { grid-template-columns: repeat(2, 1fr); }
+    .two-col { grid-template-columns: 1fr; }
+    .features-grid { grid-template-columns: 1fr 1fr; }
+    .hero { padding: 30px 24px; }
+    .hero h1 { font-size: 26px; }
+    nav { padding: 0 16px; }
+    .main { padding: 0 12px 60px; }
+    footer { padding: 16px 20px; flex-direction: column; align-items: flex-start; }
+    .footer-right { flex-wrap: wrap; }
+  }
+</style>
+</head>
+<body>
+
+<!-- Demo Banner -->
+<div class="demo-banner">
+  <div class="dot"></div>
+  DEMO ENVIRONMENT — Simulated data for stakeholder preview only — Not connected to live database
+  <div class="dot"></div>
+</div>
+
+<!-- Navigation -->
+<nav>
+  <div class="logo-wrap">
+    <div class="logo-icon">C</div>
+    <div class="logo-text">CPAS Tracker</div>
+  </div>
+  <a class="nav-tab active" href="#" onclick="switchTab('dashboard', this); return false;">📊 Dashboard</a>
+  <a class="nav-tab" href="#" onclick="switchTab('violations', this); return false;">+ New Violation</a>
+  <button class="nav-docs">? Docs</button>
+</nav>
+
+<div class="main">
+
+  <!-- ── DASHBOARD TAB ── -->
+  <div id="tab-dashboard" class="tab-pane active">
+
+    <div class="hero fade-in">
+      <div class="hero-eyebrow">Corrective Performance Action System</div>
+      <h1>Employee <span>Compliance</span> Dashboard</h1>
+      <p>Real-time visibility into workforce disciplinary standing. Track violations, monitor tier escalations, and generate signed documentation — all in one place.</p>
+      <div class="hero-stats">
+        <div class="hero-stat"><div class="val">47</div><div class="lbl">Total Employees</div></div>
+        <div class="hero-stat-divider"></div>
+        <div class="hero-stat"><div class="val">23</div><div class="lbl">Active Violations (90d)</div></div>
+        <div class="hero-stat-divider"></div>
+        <div class="hero-stat"><div class="val">3</div><div class="lbl">At-Risk (Tier 3+)</div></div>
+        <div class="hero-stat-divider"></div>
+        <div class="hero-stat"><div class="val">91%</div><div class="lbl">In Good Standing</div></div>
+      </div>
+    </div>
+
+    <div class="kpi-row">
+      <div class="kpi-card fade-in">
+        <div class="kpi-label">New This Week</div>
+        <div class="kpi-val">6</div>
+        <div class="kpi-sub">+2 vs prior week</div>
+        <div class="kpi-accent kpi-accent-gold"></div>
+      </div>
+      <div class="kpi-card fade-in">
+        <div class="kpi-label">Tier 3+ Employees</div>
+        <div class="kpi-val">3</div>
+        <div class="kpi-sub">Requires attention</div>
+        <div class="kpi-accent kpi-accent-red"></div>
+      </div>
+      <div class="kpi-card fade-in">
+        <div class="kpi-label">PDFs Generated</div>
+        <div class="kpi-val">18</div>
+        <div class="kpi-sub">This month</div>
+        <div class="kpi-accent kpi-accent-blue"></div>
+      </div>
+      <div class="kpi-card fade-in">
+        <div class="kpi-label">Expiring (30d)</div>
+        <div class="kpi-val">9</div>
+        <div class="kpi-sub">Points rolling off</div>
+        <div class="kpi-accent kpi-accent-green"></div>
+      </div>
+    </div>
+
+    <div class="two-col">
+      <!-- Employee Roster -->
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">Employee Roster</span>
+          <span style="font-size:11px;color:var(--text-muted);font-family:'DM Mono',monospace;">47 total</span>
+        </div>
+        <table class="emp-table">
+          <thead><tr><th>Employee</th><th>Dept</th><th>Standing</th></tr></thead>
+          <tbody>
+            <tr><td><div class="emp-name">Marcus T.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Operations</div></td><td><span class="tier-badge tier-4">22 pts — Tier 4</span></td></tr>
+            <tr><td><div class="emp-name">Janelle R.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Production</div></td><td><span class="tier-badge tier-3">17 pts — Tier 3</span></td></tr>
+            <tr><td><div class="emp-name">Devon H.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Operations</div></td><td><span class="tier-badge tier-3">15 pts — Tier 3</span></td></tr>
+            <tr><td><div class="emp-name">Priya S.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Impl &amp; Support</div></td><td><span class="tier-badge tier-2">12 pts — Tier 2</span></td></tr>
+            <tr><td><div class="emp-name">Carlos M.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Production</div></td><td><span class="tier-badge tier-1">7 pts — Tier 1</span></td></tr>
+            <tr><td><div class="emp-name">Aisha W.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Administrative</div></td><td><span class="tier-badge tier-1">5 pts — Tier 1</span></td></tr>
+            <tr><td><div class="emp-name">Tom B.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Design &amp; Content</div></td><td><span class="tier-badge tier-0">2 pts — Elite</span></td></tr>
+            <tr><td><div class="emp-name">Sandra K.</div></td><td><div style="font-size:11px;color:var(--text-muted);">Business Dev</div></td><td><span class="tier-badge tier-0">0 pts — Elite</span></td></tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Recent Violations -->
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">Recent Violations</span>
+          <span style="font-size:11px;color:var(--text-muted);font-family:'DM Mono',monospace;">Last 7 days</span>
+        </div>
+        <div>
+          <div class="viol-item">
+            <div class="viol-dot viol-dot-red"></div>
+            <div class="viol-info">
+              <div class="viol-name">Marcus T. <span class="repeat-tag">☆ REPEAT</span></div>
+              <div class="viol-type">Unauthorized Absence — Operations</div>
+              <div class="viol-meta"><span>Mar 6</span><span>·</span><span>D. Williams</span></div>
+            </div>
+            <div class="viol-pts">+5</div>
+          </div>
+          <div class="viol-item">
+            <div class="viol-dot viol-dot-red"></div>
+            <div class="viol-info">
+              <div class="viol-name">Janelle R.</div>
+              <div class="viol-type">Insubordination — Production</div>
+              <div class="viol-meta"><span>Mar 5</span><span>·</span><span>K. Thompson</span></div>
+            </div>
+            <div class="viol-pts">+4</div>
+          </div>
+          <div class="viol-item">
+            <div class="viol-dot viol-dot-yellow"></div>
+            <div class="viol-info">
+              <div class="viol-name">Devon H.</div>
+              <div class="viol-type">Tardiness (3×) — Operations</div>
+              <div class="viol-meta"><span>Mar 4</span><span>·</span><span>D. Williams</span></div>
+            </div>
+            <div class="viol-pts">+3</div>
+          </div>
+          <div class="viol-item">
+            <div class="viol-dot viol-dot-yellow"></div>
+            <div class="viol-info">
+              <div class="viol-name">Carlos M.</div>
+              <div class="viol-type">Cell Phone Policy — Production</div>
+              <div class="viol-meta"><span>Mar 3</span><span>·</span><span>K. Thompson</span></div>
+            </div>
+            <div class="viol-pts">+2</div>
+          </div>
+          <div class="viol-item">
+            <div class="viol-dot viol-dot-yellow"></div>
+            <div class="viol-info">
+              <div class="viol-name">Priya S.</div>
+              <div class="viol-type">Dress Code Violation — Impl &amp; Support</div>
+              <div class="viol-meta"><span>Mar 2</span><span>·</span><span>M. Johnson</span></div>
+            </div>
+            <div class="viol-pts">+1</div>
+          </div>
+          <div class="viol-item">
+            <div class="viol-dot viol-dot-green"></div>
+            <div class="viol-info">
+              <div class="viol-name">Aisha W.</div>
+              <div class="viol-type">Late Return from Break — Administrative</div>
+              <div class="viol-meta"><span>Mar 1</span><span>·</span><span>S. Martinez</span></div>
+            </div>
+            <div class="viol-pts">+1</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="two-col">
+      <!-- Dept Breakdown -->
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">Violations by Department</span>
+          <span style="font-size:11px;color:var(--text-muted);font-family:'DM Mono',monospace;">90-day window</span>
+        </div>
+        <div style="padding:8px 0;">
+          <div class="dept-row"><div class="dept-name">Operations</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:88%"></div></div><div class="dept-count">8</div></div>
+          <div class="dept-row"><div class="dept-name">Production</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:66%"></div></div><div class="dept-count">6</div></div>
+          <div class="dept-row"><div class="dept-name">Impl &amp; Support</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:44%"></div></div><div class="dept-count">4</div></div>
+          <div class="dept-row"><div class="dept-name">Administrative</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:22%"></div></div><div class="dept-count">2</div></div>
+          <div class="dept-row"><div class="dept-name">Business Dev</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:11%"></div></div><div class="dept-count">1</div></div>
+          <div class="dept-row"><div class="dept-name">Design &amp; Content</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:11%"></div></div><div class="dept-count">1</div></div>
+          <div class="dept-row"><div class="dept-name">Executive</div><div class="dept-bar-track"><div class="dept-bar-fill" style="width:0%"></div></div><div class="dept-count">0</div></div>
+        </div>
+      </div>
+
+      <!-- Audit Log -->
+      <div class="panel">
+        <div class="panel-head">
+          <span class="panel-title">Audit Log</span>
+          <span style="font-size:11px;color:var(--text-muted);font-family:'DM Mono',monospace;">System activity</span>
+        </div>
+        <div>
+          <div class="audit-item"><div class="audit-time">03/06 2:14p</div><div class="audit-action"><strong>Violation #41</strong> created — Marcus T.</div><div class="audit-pts">+5 pts</div></div>
+          <div class="audit-item"><div class="audit-time">03/06 2:15p</div><div class="audit-action">PDF generated for <strong>Violation #41</strong></div><div class="audit-pts">—</div></div>
+          <div class="audit-item"><div class="audit-time">03/05 9:40a</div><div class="audit-action"><strong>Violation #40</strong> created — Janelle R.</div><div class="audit-pts">+4 pts</div></div>
+          <div class="audit-item"><div class="audit-time">03/04 11:20a</div><div class="audit-action">Employee <strong>Devon H.</strong> record updated</div><div class="audit-pts">—</div></div>
+          <div class="audit-item"><div class="audit-time">03/04 8:55a</div><div class="audit-action"><strong>Violation #39</strong> created — Devon H.</div><div class="audit-pts">+3 pts</div></div>
+          <div class="audit-item"><div class="audit-time">03/03 3:30p</div><div class="audit-action"><strong>Violation #38</strong> amended — Carlos M.</div><div class="audit-pts">−1 pt</div></div>
+          <div class="audit-item"><div class="audit-time">03/02 1:05p</div><div class="audit-action"><strong>Duplicate record</strong> merged — R. Johnson</div><div class="audit-pts">—</div></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- CPAS Tier Scale -->
+    <div style="margin-bottom:24px;">
+      <div class="section-header">
+        <div class="section-title">CPAS Tier Scale</div>
+      </div>
+      <div class="tier-timeline">
+        <div class="tier-seg ts-0"><div class="ts-pts">0–4</div><div class="ts-label">Elite<br/>Standing</div></div>
+        <div class="tier-seg ts-1"><div class="ts-pts">5–9</div><div class="ts-label">Tier 1<br/>Realignment</div></div>
+        <div class="tier-seg ts-2"><div class="ts-pts">10–14</div><div class="ts-label">Tier 2<br/>Admin Lockdown</div></div>
+        <div class="tier-seg ts-3"><div class="ts-pts">15–19</div><div class="ts-label">Tier 3<br/>Verification</div></div>
+        <div class="tier-seg ts-4"><div class="ts-pts">20–24</div><div class="ts-label">Tier 4<br/>Risk Mitigation</div></div>
+        <div class="tier-seg ts-5"><div class="ts-pts">25–29</div><div class="ts-label">Tier 5<br/>Final Decision</div></div>
+        <div class="tier-seg ts-6"><div class="ts-pts">30+</div><div class="ts-label">Tier 6<br/>Separation</div></div>
+      </div>
+    </div>
+
+    <!-- System Capabilities -->
+    <div class="section-header"><div class="section-title">System Capabilities</div></div>
+    <div class="features-grid">
+      <div class="feature-card fade-in"><span class="feature-icon">⚡</span><div class="feature-title">Repeat Offense Detection</div><div class="feature-desc">Automatically flags prior violations for the same type and escalates point recommendations per recidivist policy.</div></div>
+      <div class="feature-card fade-in"><span class="feature-icon">📄</span><div class="feature-title">One-Click PDF Generation</div><div class="feature-desc">Generates signed, professional violation documents instantly — with or without employee acknowledgment signatures.</div></div>
+      <div class="feature-card fade-in"><span class="feature-icon">📀</span><div class="feature-title">Duplicate Record Merge</div><div class="feature-desc">Consolidate duplicate employee records while preserving full violation history under the canonical profile.</div></div>
+      <div class="feature-card fade-in"><span class="feature-icon">🕊</span><div class="feature-title">90-Day Rolling Window</div><div class="feature-desc">Points automatically expire after 90 days. Active standing reflects only the current compliance window.</div></div>
+      <div class="feature-card fade-in"><span class="feature-icon">🏷️</span><div class="feature-title">Tier Escalation Warnings</div><div class="feature-desc">Real-time alerts when a new violation would push an employee across a tier boundary before you submit.</div></div>
+      <div class="feature-card fade-in"><span class="feature-icon">🗂️</span><div class="feature-title">Full Audit Trail</div><div class="feature-desc">Every create, amendment, merge, and PDF generation is logged with timestamp and operator attribution.</div></div>
+    </div>
+
+  </div><!-- /tab-dashboard -->
+
+  <!-- ── VIOLATION FORM TAB ── -->
+  <div id="tab-violations" class="tab-pane">
+
+    <div style="margin-bottom:20px;">
+      <div style="background:#181200;border:1px solid var(--gold-dk);border-radius:8px;padding:12px 18px;font-size:12px;color:var(--gold-lt);font-family:'DM Mono',monospace;letter-spacing:0.4px;">
+        ⚡ DEMO VIEW — Form fields shown with sample data. Submission is disabled in demo mode.
+      </div>
+    </div>
+
+    <div class="form-preview">
+      <div class="form-section">
+        <div class="form-section-title">Employee Information</div>
+        <div style="margin-bottom:16px;">
+          <div class="form-label" style="margin-bottom:6px;">Quick-Select Existing Employee:</div>
+          <div class="form-input filled" style="display:flex;align-items:center;justify-content:space-between;">
+            <span>Marcus Thompson — Operations</span><span style="color:var(--text-muted);font-size:11px;">▼</span>
+          </div>
+          <div style="margin-top:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
+            <span style="font-size:12px;color:var(--text-dim);font-weight:600;">Current Standing:</span>
+            <span class="tier-badge tier-4">22 pts — Tier 4 · Risk Mitigation</span>
+            <span style="font-size:11px;color:var(--text-muted);">4 violations in last 90 days</span>
+          </div>
+        </div>
+        <div class="form-grid">
+          <div class="form-item"><div class="form-label">Employee Name:</div><div class="form-input filled">Marcus Thompson</div></div>
+          <div class="form-item"><div class="form-label">Department:</div><div class="form-input filled" style="display:flex;align-items:center;justify-content:space-between;"><span>Operations</span><span style="color:var(--text-muted);font-size:11px;">▼</span></div></div>
+          <div class="form-item"><div class="form-label">Supervisor Name:</div><div class="form-input filled">D. Williams</div></div>
+          <div class="form-item"><div class="form-label">Witness Name (Officer):</div><div class="form-input">Officer Name</div></div>
+        </div>
+      </div>
+
+      <div class="form-section">
+        <div class="form-section-title">Violation Details</div>
+        <div class="form-grid">
+          <div class="form-item" style="grid-column:1 / -1;">
+            <div class="form-label">Violation Type:</div>
+            <div class="form-input filled" style="display:flex;align-items:center;justify-content:space-between;">
+              <span>Unauthorized Absence ☆ 2x in 90 days</span><span style="color:var(--text-muted);font-size:11px;">▼</span>
+            </div>
+            <div style="background:#141623;border:1px solid var(--border-lt);border-radius:4px;padding:10px;font-size:12px;color:var(--text-dim);margin-top:6px;">
+              <strong>Unauthorized Absence</strong> <span class="repeat-tag">☆ Repeat — 2x prior</span><br/>
+              Absence from scheduled work without prior approval or acceptable documentation.<br/>
+              <span style="font-size:10px;color:#a0a3ba;">Chapter 4, Section 4.1 — Attendance &amp; Punctuality</span>
+            </div>
+            <div style="background:#3b2e00;border:1px solid var(--gold-dk);border-radius:4px;padding:8px 12px;margin-top:6px;font-size:12px;color:#ffdf8a;">
+              <strong>Repeat offense detected.</strong> Point slider set to maximum (5 pts) per recidivist policy. Adjust if needed.
+            </div>
+          </div>
+          <div class="form-item"><div class="form-label">Incident Date:</div><div class="form-input filled">2026-03-06</div></div>
+        </div>
+        <div style="background:#2d1a00;border:1px solid #a06000;border-radius:6px;padding:12px 16px;margin-top:16px;font-size:13px;color:#ffc107;">
+          ⚡ <strong>Tier escalation warning:</strong> Adding 5 pts will bring Marcus to <strong>27 pts (Tier 5 — Final Decision)</strong>. This is one tier below Separation. Review carefully.
+        </div>
+        <div style="background:#181200;border:2px solid var(--gold);padding:14px;border-radius:6px;margin:16px 0 0;text-align:center;">
+          <div style="color:#ffdf8a;font-weight:700;margin-bottom:8px;">CPAS Point Assessment</div>
+          <div style="font-size:13px;color:var(--text-dim);">Unauthorized Absence: 3–5 Points</div>
+          <div style="width:100%;height:6px;background:var(--border-lt);border-radius:3px;margin:12px 0 4px;overflow:hidden;"><div style="width:100%;height:100%;background:linear-gradient(90deg,var(--gold-dk),var(--gold));border-radius:3px;"></div></div>
+          <div class="point-val">5 Points</div>
+          <div style="font-size:12px;color:var(--text-dim);margin-top:4px;">Adjust to reflect severity and context</div>
+        </div>
+      </div>
+
+      <div style="background:var(--bg-section);border-left:4px solid #2196F3;padding:20px 24px;margin:20px;border-radius:4px;border:1px solid var(--border-lt);">
+        <div style="font-family:'Syne',sans-serif;font-size:16px;font-weight:700;margin-bottom:8px;">Employee Acknowledgment</div>
+        <div style="font-size:12px;color:var(--text-muted);margin-bottom:14px;line-height:1.6;">If the employee is present and acknowledges receipt of this violation, enter their name and the date below.</div>
+        <div class="form-grid">
+          <div class="form-item"><div class="form-label">Acknowledged By:</div><div class="form-input">Employee's printed name</div></div>
+          <div class="form-item"><div class="form-label">Acknowledgment Date:</div><div class="form-input">yyyy-mm-dd</div></div>
+        </div>
+      </div>
+
+      <div style="display:flex;gap:14px;justify-content:center;padding:20px 20px 28px;">
+        <button style="padding:14px 36px;font-size:15px;font-weight:700;border:none;border-radius:6px;cursor:not-allowed;background:linear-gradient(135deg,#d4af37,#ffdf8a);color:#000;text-transform:uppercase;opacity:0.5;">Submit Violation</button>
+        <button style="padding:14px 36px;font-size:15px;font-weight:700;border:1px solid var(--border-lt);border-radius:6px;cursor:not-allowed;background:#050608;color:var(--text);text-transform:uppercase;opacity:0.5;">Clear Form</button>
+      </div>
+    </div>
+
+  </div><!-- /tab-violations -->
+
+</div><!-- /main -->
+
+<footer>
+  <div class="footer-left">
+    <div class="footer-brand">CPAS Tracker</div>
+    <div class="footer-divider"></div>
+    <div class="footer-copy">© 2026 Jason Stedwell</div>
+    <div class="footer-divider"></div>
+    <div style="font-size:11px;color:var(--text-muted);">DEMO BUILD — All data synthetic</div>
+  </div>
+  <div class="footer-right">
+    <a class="footer-gitea" href="https://git.alwisp.com/jason/cpas" target="_blank" rel="noopener">
+      <!-- Gitea logo SVG -->
+      <svg viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg">
+        <path d="M321.6 3.2C146.4 3.2 3.2 146.4 3.2 321.6c0 141.6 91.8 261.9 219.7 304.1 16.1 3 22-7 22-15.5 0-7.6-.3-32.8-.4-59.5-89.5 19.4-108.4-38.4-108.4-38.4-14.6-37.2-35.7-47.1-35.7-47.1-29.2-20 2.2-19.6 2.2-19.6 32.3 2.3 49.3 33.1 49.3 33.1 28.7 49.2 75.3 35 93.7 26.7 2.9-20.8 11.2-35 20.4-43-71.4-8.1-146.5-35.7-146.5-158.9 0-35.1 12.5-63.8 33.1-86.3-3.3-8.1-14.4-40.8 3.1-85.1 0 0 27-8.7 88.4 32.9 25.6-7.1 53.1-10.7 80.4-10.8 27.3.1 54.8 3.7 80.5 10.8 61.3-41.6 88.3-32.9 88.3-32.9 17.6 44.3 6.5 77 3.2 85.1 20.6 22.5 33 51.2 33 86.3 0 123.5-75.2 150.7-146.8 158.7 11.5 10 21.8 29.7 21.8 59.8 0 43.2-.4 78-0.4 88.6 0 8.6 5.8 18.6 22.1 15.5C524.8 583.2 616.8 463.1 616.8 321.6 616.8 146.4 473.6 3.2 298.4 3.2z"/>
+      </svg>
+      jason/cpas
+    </a>
+    <div class="footer-divider"></div>
+    <div class="footer-ticker">
+      <div class="footer-ticker-dot"></div>
+      <div class="footer-ticker-label">Dev Time</div>
+      <div class="footer-ticker-time" id="dev-ticker">—</div>
+    </div>
+  </div>
+</footer>
+
+<script>
+  function switchTab(name, el) {
+    document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
+    document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
+    document.getElementById('tab-' + name).classList.add('active');
+    el.classList.add('active');
+  }
+
+  // ── DEV TIME TICKER ──────────────────────────────────────────────────────────
+  // Base dev time calculated from real commit sessions (30-min gap = new session).
+  // Each session timed as (last_commit - first_commit) + 15min overhead.
+  //
+  // Session 1: 2026-03-06 11:33 → 12:05  = 32min + 15 = 47min
+  // Session 2: 2026-03-06 12:19 → 18:00  = 341min + 15 = 356min
+  // Session 3: 2026-03-06 23:18 → 23:41  = 23min + 15 = 38min
+  // Session 4: 2026-03-07 09:22 → 09:53  = 31min + 15 = 46min
+  // Session 5: 2026-03-07 18:31 → 19:02  = 31min + 15 = 46min
+  // Session 6: 2026-03-07 21:28 → 22:02  = 34min + 15 = 49min
+  // Session 7: 2026-03-07 23:13 → 23:59  = 46min + 15 = 61min
+  // Session 8: 2026-03-08 00:11 → 00:12  = 1min + 15 = 16min
+  // Total: 659min = 39,540 seconds
+  //
+  // Anchor: last commit timestamp 2026-03-08T06:12:11Z (UTC)
+  // Ticker ticks up every second from that base.
+
+  const BASE_SECONDS = 39540;
+  const ANCHOR_UTC   = new Date('2026-03-08T06:12:11Z').getTime();
+
+  function formatDevTime(totalSec) {
+    const h = Math.floor(totalSec / 3600);
+    const m = Math.floor((totalSec % 3600) / 60);
+    const s = totalSec % 60;
+    return `${String(h).padStart(2,'0')}h ${String(m).padStart(2,'0')}m ${String(s).padStart(2,'0')}s`;
+  }
+
+  function updateTicker() {
+    const elapsed = Math.floor((Date.now() - ANCHOR_UTC) / 1000);
+    const total   = BASE_SECONDS + Math.max(0, elapsed);
+    document.getElementById('dev-ticker').textContent = formatDevTime(total);
+  }
+
+  updateTicker();
+  setInterval(updateTicker, 1000);
+</script>
+</body>
+</html>

server.js

@@ -11,6 +11,15 @@ app.use(cors());
 app.use(express.json());
 app.use(express.static(path.join(__dirname, 'client', 'dist')));
 
+// TODO [CRITICAL #1]: No authentication on any route. Add an auth middleware
+// (e.g. express-session + password, or JWT) before all /api/* routes.
+// Anyone on the network can currently create, delete, or negate violations.
+
+// ── Demo static route ─────────────────────────────────────────────────────────
+// Serves the standalone stakeholder demo page at /demo/index.html
+// Must be registered before the SPA catch-all below.
+app.use('/demo', express.static(path.join(__dirname, 'demo')));
+
 // ── Audit helper ─────────────────────────────────────────────────────────────
 function audit(action, entityType, entityId, performedBy, details) {
   try {
@@ -24,15 +33,33 @@ function audit(action, entityType, entityId, performedBy, details) {
   }
 }
 
-// Health
-app.get('/api/health', (req, res) => res.json({ status: 'ok', timestamp: new Date().toISOString() }));
+// ── Version info (written by Dockerfile at build time) ───────────────────────
+// Falls back to { sha: 'dev' } when running outside a Docker build (local dev).
+let BUILD_VERSION = { sha: 'dev', shortSha: 'dev', buildTime: null };
+try {
+  BUILD_VERSION = require('./client/dist/version.json');
+} catch (_) { /* pre-build or local dev — stub values are fine */ }
 
-// ── Employees ─────────────────────────────────────────────────────────────────
+// Health
+app.get('/api/health', (req, res) => res.json({
+  status:    'ok',
+  timestamp: new Date().toISOString(),
+  version:   BUILD_VERSION,
+}));
+
+// ── Employees ────────────────────────────────────────────────────────────────
 app.get('/api/employees', (req, res) => {
   const rows = db.prepare('SELECT id, name, department, supervisor, notes FROM employees ORDER BY name ASC').all();
   res.json(rows);
 });
 
+// GET /api/employees/:id — single employee record
+app.get('/api/employees/:id', (req, res) => {
+  const emp = db.prepare('SELECT id, name, department, supervisor, notes FROM employees WHERE id = ?').get(req.params.id);
+  if (!emp) return res.status(404).json({ error: 'Employee not found' });
+  res.json(emp);
+});
+
 app.post('/api/employees', (req, res) => {
   const { name, department, supervisor } = req.body;
   if (!name) return res.status(400).json({ error: 'name is required' });
@@ -42,6 +69,9 @@ app.post('/api/employees', (req, res) => {
       db.prepare('UPDATE employees SET department = COALESCE(?, department), supervisor = COALESCE(?, supervisor) WHERE id = ?')
         .run(department || null, supervisor || null, existing.id);
     }
+    // TODO [MINOR #16]: Spreading `existing` then overwriting with possibly-undefined
+    // `department`/`supervisor` returns `undefined` for unset fields.
+    // Re-query after update or only spread defined values.
     return res.json({ ...existing, department, supervisor });
   }
   const result = db.prepare('INSERT INTO employees (name, department, supervisor) VALUES (?, ?, ?)')
@@ -50,7 +80,7 @@ app.post('/api/employees', (req, res) => {
   res.status(201).json({ id: result.lastInsertRowid, name, department, supervisor });
 });
 
-// ── Employee Edit ─────────────────────────────────────────────────────────────
+// ── Employee Edit ────────────────────────────────────────────────────────────
 // PATCH /api/employees/:id — update name, department, supervisor, or notes
 app.patch('/api/employees/:id', (req, res) => {
   const id  = parseInt(req.params.id);
@@ -81,7 +111,7 @@ app.patch('/api/employees/:id', (req, res) => {
   res.json({ id, name: newName, department: newDept, supervisor: newSupervisor, notes: newNotes });
 });
 
-// ── Employee Merge ────────────────────────────────────────────────────────────
+// ── Employee Merge ───────────────────────────────────────────────────────────
 // POST /api/employees/:id/merge — reassign all violations from sourceId → id, then delete source
 app.post('/api/employees/:id/merge', (req, res) => {
   const targetId = parseInt(req.params.id);
@@ -128,13 +158,32 @@ app.patch('/api/employees/:id/notes', (req, res) => {
   res.json({ id, notes: newNotes });
 });
 
-// Employee score (current snapshot)
+// Employee score (current snapshot) — includes total violations + negated count
 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 });
+  const empId = req.params.id;
+
+  // Active points from the 90-day rolling view
+  const active = db.prepare('SELECT * FROM active_cpas_scores WHERE employee_id = ?').get(empId);
+
+  // Total violations (all time) and negated count
+  const totals = db.prepare(`
+    SELECT
+      COUNT(*)                    AS total_violations,
+      COALESCE(SUM(negated), 0)  AS negated_count
+    FROM violations
+    WHERE employee_id = ?
+  `).get(empId);
+
+  res.json({
+    employee_id:      empId,
+    active_points:    active ? active.active_points    : 0,
+    violation_count:  active ? active.violation_count   : 0,
+    total_violations: totals ? totals.total_violations  : 0,
+    negated_count:    totals ? totals.negated_count     : 0,
+  });
 });
 
-// ── Expiration Timeline ───────────────────────────────────────────────────────
+// ── Expiration Timeline ──────────────────────────────────────────────────────
 // GET /api/employees/:id/expiration — active violations sorted by roll-off date
 // Returns each active violation with days_remaining until it exits the 90-day window.
 app.get('/api/employees/:id/expiration', (req, res) => {
@@ -151,7 +200,7 @@ app.get('/api/employees/:id/expiration', (req, res) => {
         JULIANDAY(DATE(v.incident_date, '+90 days')) -
         JULIANDAY(DATE('now'))
         AS INTEGER
-      )                                                           AS days_remaining
+      )                                                          AS days_remaining
     FROM violations v
     WHERE v.employee_id = ?
       AND v.negated = 0
@@ -190,7 +239,7 @@ app.get('/api/violations/employee/:id', (req, res) => {
   res.json(rows);
 });
 
-// ── Violation amendment history ───────────────────────────────────────────────
+// ── Violation amendment history ──────────────────────────────────────────────
 app.get('/api/violations/:id/amendments', (req, res) => {
   const rows = db.prepare(`
     SELECT * FROM violation_amendments WHERE violation_id = ? ORDER BY created_at DESC
@@ -216,7 +265,8 @@ 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
+    details, submitted_by, witness_name,
+    acknowledged_by, acknowledged_date
   } = req.body;
 
   if (!employee_id || !violation_type || !points || !incident_date) {
@@ -231,14 +281,16 @@ app.post('/api/violations', (req, res) => {
       employee_id, violation_type, violation_name, category,
       points, incident_date, incident_time, location,
       details, submitted_by, witness_name,
-      prior_active_points
-    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+      prior_active_points,
+      acknowledged_by, acknowledged_date
+    ) 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
+    priorPts,
+    acknowledged_by || null, acknowledged_date || null
   );
 
   audit('violation_created', 'violation', result.lastInsertRowid, submitted_by, {
@@ -248,9 +300,20 @@ app.post('/api/violations', (req, res) => {
   res.status(201).json({ id: result.lastInsertRowid });
 });
 
-// ── Violation Amendment (edit) ────────────────────────────────────────────────
+// ── Violation Amendment (edit) ───────────────────────────────────────────────
 // PATCH /api/violations/:id/amend — edit mutable fields; logs a diff per changed field
-const AMENDABLE_FIELDS = ['incident_time', 'location', 'details', 'submitted_by', 'witness_name'];
+const AMENDABLE_FIELDS = ['incident_time', 'location', 'details', 'submitted_by', 'witness_name', 'acknowledged_by', 'acknowledged_date'];
+
+// Pre-build one prepared UPDATE statement per amendable field combination is not
+// practical (2^n combos), so instead we validate columns against the static
+// whitelist and build the clause only from known-safe names at startup.
+// The whitelist itself is the guard; no user-supplied column name ever enters SQL.
+const AMEND_UPDATE_STMTS = Object.fromEntries(
+  AMENDABLE_FIELDS.map(f => [
+    f,
+    db.prepare(`UPDATE violations SET ${f} = ? WHERE id = ?`)
+  ])
+);
 
 app.patch('/api/violations/:id/amend', (req, res) => {
   const id        = parseInt(req.params.id);
@@ -269,18 +332,14 @@ app.patch('/api/violations/:id/amend', (req, res) => {
   }
 
   const amendTransaction = db.transaction(() => {
-    // Build UPDATE
-    const setClauses = Object.keys(allowed).map(k => `${k} = ?`).join(', ');
-    const values     = [...Object.values(allowed), id];
-    db.prepare(`UPDATE violations SET ${setClauses} WHERE id = ?`).run(...values);
-
-    // Insert an amendment record per changed field
     const insertAmendment = db.prepare(`
       INSERT INTO violation_amendments (violation_id, changed_by, field_name, old_value, new_value)
       VALUES (?, ?, ?, ?, ?)
     `);
     for (const [field, newVal] of Object.entries(allowed)) {
       const oldVal = violation[field];
+      // Use the pre-built statement for this field — no runtime interpolation
+      AMEND_UPDATE_STMTS[field].run(newVal, id);
       if (String(oldVal) !== String(newVal)) {
         insertAmendment.run(id, changed_by || null, field, oldVal ?? null, newVal ?? null);
       }
@@ -295,7 +354,7 @@ app.patch('/api/violations/:id/amend', (req, res) => {
   res.json(updated);
 });
 
-// ── Negate a violation ────────────────────────────────────────────────────────
+// ── Negate a violation ───────────────────────────────────────────────────────
 app.patch('/api/violations/:id/negate', (req, res) => {
   const { resolution_type, details, resolved_by } = req.body;
   const id = req.params.id;
@@ -323,7 +382,7 @@ app.patch('/api/violations/:id/negate', (req, res) => {
   res.json({ success: true });
 });
 
-// ── Restore a negated violation ───────────────────────────────────────────────
+// ── Restore a negated violation ──────────────────────────────────────────────
 app.patch('/api/violations/:id/restore', (req, res) => {
   const id = req.params.id;
 
@@ -337,7 +396,7 @@ app.patch('/api/violations/:id/restore', (req, res) => {
   res.json({ success: true });
 });
 
-// ── Hard delete a violation ───────────────────────────────────────────────────
+// ── Hard delete a violation ──────────────────────────────────────────────────
 app.delete('/api/violations/:id', (req, res) => {
   const id = req.params.id;
 
@@ -353,7 +412,39 @@ app.delete('/api/violations/:id', (req, res) => {
   res.json({ success: true });
 });
 
-// ── Audit log ─────────────────────────────────────────────────────────────────
+// ── Violation counts per employee ────────────────────────────────────────────
+// GET /api/employees/:id/violation-counts
+// Returns { violation_type: count } for the rolling 90-day window (non-negated).
+app.get('/api/employees/:id/violation-counts', (req, res) => {
+  const rows = db.prepare(`
+    SELECT violation_type, COUNT(*) AS count
+    FROM violations
+    WHERE employee_id = ?
+      AND negated = 0
+      AND incident_date >= DATE('now', '-90 days')
+    GROUP BY violation_type
+  `).all(req.params.id);
+  const result = {};
+  for (const r of rows) result[r.violation_type] = r.count;
+  res.json(result);
+});
+
+// GET /api/employees/:id/violation-counts/alltime
+// Returns { violation_type: { count, max_points_used } } across all time (non-negated).
+app.get('/api/employees/:id/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 = ?
+      AND negated = 0
+    GROUP BY violation_type
+  `).all(req.params.id);
+  const result = {};
+  for (const r of rows) result[r.violation_type] = { count: r.count, max_points_used: r.max_points_used };
+  res.json(result);
+});
+
+// ── Audit log ────────────────────────────────────────────────────────────────
 app.get('/api/audit', (req, res) => {
   const limit  = Math.min(parseInt(req.query.limit)  || 100, 500);
   const offset = parseInt(req.query.offset) || 0;
@@ -372,7 +463,101 @@ app.get('/api/audit', (req, res) => {
   res.json(db.prepare(sql).all(...args));
 });
 
-// ── PDF endpoint ──────────────────────────────────────────────────────────────
+// ── Custom Violation Types ────────────────────────────────────────────────────
+// Persisted violation type definitions stored in violation_types table.
+// type_key is auto-generated (custom_<slug>) to avoid collisions with hardcoded keys.
+
+app.get('/api/violation-types', (req, res) => {
+  const rows = db.prepare('SELECT * FROM violation_types ORDER BY category ASC, name ASC').all();
+  res.json(rows.map(r => ({ ...r, fields: JSON.parse(r.fields) })));
+});
+
+app.post('/api/violation-types', (req, res) => {
+  const { name, category, chapter, description, min_points, max_points, fields, created_by } = req.body;
+  if (!name || !name.trim()) return res.status(400).json({ error: 'name is required' });
+
+  const minPts = parseInt(min_points) || 1;
+  const maxPts = parseInt(max_points) || minPts;
+  if (maxPts < minPts) return res.status(400).json({ error: 'max_points must be >= min_points' });
+
+  // Generate a unique type_key from the name, prefixed with 'custom_'
+  const base = 'custom_' + name.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
+  let typeKey = base;
+  let suffix  = 2;
+  while (db.prepare('SELECT id FROM violation_types WHERE type_key = ?').get(typeKey)) {
+    typeKey = `${base}_${suffix++}`;
+  }
+
+  try {
+    const result = db.prepare(`
+      INSERT INTO violation_types (type_key, name, category, chapter, description, min_points, max_points, fields)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+    `).run(
+      typeKey,
+      name.trim(),
+      (category || 'Custom').trim(),
+      chapter     || null,
+      description || null,
+      minPts,
+      maxPts,
+      JSON.stringify(fields && fields.length ? fields : ['description'])
+    );
+    const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(result.lastInsertRowid);
+    audit('violation_type_created', 'violation_type', result.lastInsertRowid, created_by || null, { name: row.name, category: row.category });
+    res.status(201).json({ ...row, fields: JSON.parse(row.fields) });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.put('/api/violation-types/:id', (req, res) => {
+  const id  = parseInt(req.params.id);
+  const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
+  if (!row) return res.status(404).json({ error: 'Violation type not found' });
+
+  const { name, category, chapter, description, min_points, max_points, fields, updated_by } = req.body;
+  if (!name || !name.trim()) return res.status(400).json({ error: 'name is required' });
+
+  const minPts = parseInt(min_points) || 1;
+  const maxPts = parseInt(max_points) || minPts;
+  if (maxPts < minPts) return res.status(400).json({ error: 'max_points must be >= min_points' });
+
+  db.prepare(`
+    UPDATE violation_types
+    SET name=?, category=?, chapter=?, description=?, min_points=?, max_points=?, fields=?, updated_at=CURRENT_TIMESTAMP
+    WHERE id=?
+  `).run(
+    name.trim(),
+    (category || 'Custom').trim(),
+    chapter     || null,
+    description || null,
+    minPts,
+    maxPts,
+    JSON.stringify(fields && fields.length ? fields : ['description']),
+    id
+  );
+
+  const updated = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
+  audit('violation_type_updated', 'violation_type', id, updated_by || null, { name: updated.name, category: updated.category });
+  res.json({ ...updated, fields: JSON.parse(updated.fields) });
+});
+
+app.delete('/api/violation-types/:id', (req, res) => {
+  const id  = parseInt(req.params.id);
+  const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
+  if (!row) return res.status(404).json({ error: 'Violation type not found' });
+
+  const usage = db.prepare('SELECT COUNT(*) as count FROM violations WHERE violation_type = ?').get(row.type_key);
+  if (usage.count > 0) {
+    return res.status(409).json({ error: `Cannot delete: ${usage.count} violation(s) reference this type. Negate those violations first.` });
+  }
+
+  db.prepare('DELETE FROM violation_types WHERE id = ?').run(id);
+  audit('violation_type_deleted', 'violation_type', id, null, { name: row.name, type_key: row.type_key });
+  res.json({ ok: true });
+});
+
+// ── PDF endpoint ─────────────────────────────────────────────────────────────
 app.get('/api/violations/:id/pdf', async (req, res) => {
   try {
     const violation = db.prepare(`
@@ -399,7 +584,7 @@ app.get('/api/violations/:id/pdf', async (req, res) => {
     res.set({
       'Content-Type':        'application/pdf',
       'Content-Disposition': `attachment; filename="CPAS_${safeName}_${violation.incident_date}.pdf"`,
-      'Content-Length':      pdfBuffer.length,
+      'Content-Length':       pdfBuffer.length,
     });
     res.end(pdfBuffer);
   } catch (err) {