vscode

Reviewed-on: #43

.vscode/settings.json

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

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
@@ -25,5 +34,6 @@ 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

@@ -353,7 +353,6 @@ Effort ratings: 🟢 Low · 🟡 Medium · 🔴 High
 | 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 |
-| CSV export of dashboard | 🟢 | Client-side Blob download of the current filtered employee view; no backend changes needed |
 
 #### Reporting & Analytics
 
@@ -362,7 +361,6 @@ Effort ratings: 🟢 Low · 🟡 Medium · 🔴 High
 | 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 |
-| CSV / Excel bulk export | 🟡 | Full export of violations or dashboard data for external reporting or payroll integration |
 
 #### Employee Management
 
@@ -376,14 +374,12 @@ Effort ratings: 🟢 Low · 🟡 Medium · 🔴 High
 | Feature | Effort | Description |
 |---------|--------|-------------|
 | 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 |
 | Violation templates | 🟢 | Pre-fill the form with a saved violation type + common details for frequently logged incidents |
 
 #### Notifications & Escalation
 
 | Feature | Effort | Description |
 |---------|--------|-------------|
-| Scheduled expiration digest | 🟡 | Weekly or daily email listing violations rolling off in the next 7 days; `nodemailer` + cron on the Node server |
 | 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` |

client/public/version.json

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

client/src/App.jsx

@@ -3,8 +3,11 @@ 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) {
@@ -42,8 +45,13 @@ function GiteaIcon() {
   );
 }
 
-function AppFooter() {
+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>{`
@@ -51,15 +59,40 @@ function AppFooter() {
           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}>
-        <span style={sf.copy}>© {year} Jason Stedwell</span>
-        <span style={sf.sep}>·</span>
+      <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}>·</span>
+        <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>
     </>
   );
@@ -70,6 +103,21 @@ const tabs = [
   { 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', display: 'flex', flexDirection: 'column' },
   nav:      { background: '#000000', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0, borderBottom: '1px solid #333' },
@@ -102,6 +150,58 @@ const s = {
   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',
@@ -129,34 +229,49 @@ const sf = {
 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 (
     <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}>
-          <div style={s.logoWrap}>
-            <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
-            <div style={s.logoText}>CPAS Tracker</div>
+        <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)} onClick={() => setTab(t.id)}>
-              {t.label}
+              <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} onClick={() => setShowReadme(true)} title="Open admin documentation">
+          <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}>
+          <div style={s.card} className="main-card">
             {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
           </div>
         </div>
 
-        <AppFooter />
+        <AppFooter version={version} />
 
         {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
       </div>

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 =>
+    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)
-    ));
-  }, [search, employees]);
+      );
+    }
+
+    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 style={s.toolbarRight}>
+          </div>
+          <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/EmployeeModal.jsx

@@ -103,13 +103,12 @@ export default function EmployeeModal({ employeeId, onClose }) {
   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);
       })

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/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/ViolationForm.jsx

@@ -35,6 +35,7 @@ const s = {
 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: '',
 };
@@ -43,7 +44,7 @@ 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);
 
@@ -108,6 +109,7 @@ export default function ViolationForm() {
       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);

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;
+  }
+}

server.js

@@ -11,6 +11,10 @@ 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.
@@ -29,8 +33,19 @@ function audit(action, entityType, entityId, performedBy, details) {
   }
 }
 
+// ── 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 */ }
+
 // Health
-app.get('/api/health', (req, res) => res.json({ status: 'ok', timestamp: new Date().toISOString() }));
+app.get('/api/health', (req, res) => res.json({
+  status:    'ok',
+  timestamp: new Date().toISOString(),
+  version:   BUILD_VERSION,
+}));
 
 // ── Employees ────────────────────────────────────────────────────────────────
 app.get('/api/employees', (req, res) => {
@@ -38,6 +53,13 @@ app.get('/api/employees', (req, res) => {
   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' });
@@ -47,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 (?, ?, ?)')
@@ -279,6 +304,17 @@ app.post('/api/violations', (req, res) => {
 // 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', '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);
   const { changed_by, ...updates } = req.body;
@@ -296,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);
       }
@@ -380,6 +412,38 @@ app.delete('/api/violations/:id', (req, res) => {
   res.json({ success: true });
 });
 
+// ── 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);