From f006c015b064501f26cdd78fc1b5ed32333837d2 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 14:14:11 -0600
Subject: [PATCH 01/86] Add client/public

---
 client/public | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 client/public

diff --git a/client/public b/client/public
new file mode 100644
index 0000000..e69de29
-- 
2.52.0


From 6305cedb14b1e164dcfda0aced54c693c9c7dfa4 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 14:14:27 -0600
Subject: [PATCH 02/86] Delete client/public

---
 client/public | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 client/public

diff --git a/client/public b/client/public
deleted file mode 100644
index e69de29..0000000
-- 
2.52.0


From eb07832cc7a05fc8568121a6d6dc48232e23ae2c Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 14:15:05 -0600
Subject: [PATCH 03/86] Upload files to "client/public/static"

---
 client/public/static/mpm-logo.png | Bin 0 -> 4188 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 client/public/static/mpm-logo.png

diff --git a/client/public/static/mpm-logo.png b/client/public/static/mpm-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..02e50cc2a2713bdd2a2ade7301d92179d5b25707
GIT binary patch
literal 4188
zcmV-i5ToyjP)<h;3K|Lk000e1NJLTq003(M005f^1^@s6Wi4eD000mGNkl<ZcmeEP
z3vd?I6~2GKphBx62(=X~7{n^z14K|zupr=LtiV_bwiYPuj8glwRUAg!(W&EDTc$o|
zY84#lptK^76fmGj3kV1SNe~p#R6yQ=ghyW2bN+CX{Wtr#=iL4G-%WOB4|gBueCOQn
z-gEct|A!<`BwK74APtt>vA9j;hK@3kU^t-860O0i+*t5g#rg|mW%<1)rA&!Lg5dx;
zMLGHL_^CPr=Q&shi${J7!DMZD7ag!fhsQw8k!3TGXFqG#!8*3?0-0a6p-f5vnUqKv
zJRs-CHeT_r+n_lP)=?NJ7$cDgOj2MjR32*f4MzUKZIivpV3oh$NeXx_C6a=X%AFkD
z(Cv_Yv@!-OJy4(#>P$-f2}izbE6>}%?ZK}BJq>%tV1=<RCq5uyVRUqOIHUa4qYWbk
z2MvRDWNl}FfV3CQRpQyN`f-7gf;~N0a_`KxFjCIx2ujI4$c7y90It(}da#b{daxoH
zDc~cbv-0p7T=j%V4^~hyo_F2eR3eQWwCVAB*PytCsU-4F9azy*LaEM`R%c)HUV9iM
z6a-A9k%6<@5BeN=LE-YN><~4tV#g0k@qi=e57?7Br}v`49NU&=gIu+0cjeREe#?q2
zo$@5)DMwCqUC@^6xTV^i+pF+59Inyk(ALo<@XSg9cXYY%!oJ7BFxiO=bQrh?$cCNx
ziX>|*+OsmN!@%9>jTmO4t{A{f;Rs}wf=Jr180dICZ?Z#X>3xwVEfr%}oodd0tbFPo
z=RtizejjemB!<;D4)4h_7}n?n;0KmL_}mMISrQ}wzbzhu!ne|e%)-J>UnD%cT0GN%
z5TMVwfHEI>Cuf#Owm=w=gp~|+(P>g(APYGV7%OsNmnU#pBZx%Z9CWVPxkMfbg1nP6
ztJ#s3qYhCs3&SKovm|;!%jPSg^bC2V3RHvC*szMB+9dks45S2P7WLyMk!%4lAmMpM
z6H))QegM7`h!7Yc7Z^AjLWrx`yTC_3Ngxx+rF*kyF{};(`J~q-hzp)s$!CMWL+HDN
zw4w@q84SH!&C?-_m7ofg?kQk{DqxcAh73?SPhshvEQ2Bk8+8dpeaI|Yq-f-6k=)D*
z1IRlR7_^sS0pG2NWHV+!LN!Pc0lX&#hRDrEEiO<W-m@TBJfaAgB)cI46uwXECYfc(
zIoJF&|D^Jr{LI32mK$JV*T?|!NELE5*yt`f3Y!7QtmHi_Y|_!6gmsWAkXiIMX>^u|
zDFbxglLEtla}!fYEK+fS`mAM8N(mWh5^Bq~-B#EgD5O7r;5`e{5#FW+K|U%hsBPJF
z8}^>SwRK!r%OIxY?k#`3%rN8@X<oYc609o(a!3{Sa#mjUYDtS^+o01siUxdOV2)pr
z&_2kOkitqz78S_S!rm1o0kjlb<f{7QfvXgEoR*zgiey=LqAdo3qOK)vJp%`KzBU|r
zL8-rD_Aj#<bgpE!E-aAQ6tk{6TYvfC6W3=e=Dj74Es^kG3QE`o2E@R6NSfF=(`|Nj
z|E_<mGKncnTUO~V;JK9(F&h_W>s<AP;Wvkw1xqQ=N12&h7W6=MunK1XaAA)+1dNLW
z`pgPyZT7+mW|-<x>gq(w%U9Iy8CQe#-45^H1E0RpGdyq6@&uX1f6tPz?uIR2Y@Wvc
zEpAroi|1bopU=gs@3G4)E8#8eI93IQDg??l{PGghfl^p;YGbzy;<9_7tZ;|PU~PP}
zXY7_h>^Hn;LAT>Hy;Q6aHhWhXF>7PF3?j#+%kO%EJ6LERM}YzZzI+rkk+rgqskG}b
zu)C9-bK&s63ypYAl$Smv7+dkeYxfBaeAID@53iB??!Xt~Qw5$`@JRwpGf9wZ#(cEd
zRC)}0d8d<f?>}R*ZY+Ya)l?npsDpp?_exVv@!>VozN5WP40avJEJlyBY|^p&gkCx>
zN{a6MpN?L0(SgjOzZhn_^IiH(`%r4Ua34RieE=nv_4B?Xb#Tw^GOjlTm!qo_hh2wN
zU~qz?+Q6zTbcBMdgNHiZ`%d3N!R6?pAFA+5cTRLfn|`B9Amzcxr$-y#x^5?E>FqvP
z4YNZJ%}h%-7K>hFGYgrp#M!{3{aSU^(Ql)!pKO@lf4kk*>Ac^V5-g4V;EeA(`S!aO
z$!C^g!oFs^ohyB>wx+70z|G!z-3uegdsd&i$C0cC6)FA4Zq=IQYhS+{C#5oLwk>29
z{XHv8HY5y#j(EkiVd2nSIvBc>!^@ZMJ)L;$I*?g7d8wislDS?gbw;(&`ouxFZq>*4
zbrpsfBJhpMc}hgOz!0$YAG;|ZlFPNgQ1@2Py#f!xqUnw|{3O-t%uxRjj$b@Z_anay
zBK7v=!0jA$?XqTGzfw1S>-GMl*N6HirmVhok0ZYfBKdi(+a43lWvs5|WKXWG$m+&f
z1|i>cM^@=&wGR&9*NtBLb>-Wu{qH|}L2ohvy!6$*v(CA6b*5GJ&y;UU3z?Puz;flG
zc<J4XbbMbm;*Ehidb!q##WM>@%0IL76FRdHb(I`DSTc%gqip@!qq|ph@YC_SuM?MD
z2QrJkc6tSot$Y3MTsBQ;JhxWO>1|mG{rh%)*HPmIW83`h1N#|f78C#2gss0h$*j%q
z-mmq2m9TC0ndWwmW*ZCdUha0^di}D2PtHbtsvri{#;T9@RLRME){!q(Zng%ldt7k&
zQ|&Nqd_~IqV~0zJ`0D98w&`sunsg6h+b)w%(Y~p`r%8a~b{)PVfpml~`UFJ)&}c_r
z41mskZmHCX^S#+up3>19H14iej4;H}z3XSD@j1rI200)~PBIH;&Y`lEtZ!q{HYiD@
z9<5W{QCj7nVq@1;7?c(Y3_DCX=UY}zE#`Q-aeOf>1suy@Y*x<c_farNbQCBsQbIyH
zQiSd%(?a>mysCeu>`hwkpx4z__fUTIBW|jxFeq)#mO)JaO+{0NH|>W16|^-Ke=p7&
zR=>^~dRMJDy2nsp0JyHU(gPEt{WQ+u-S02q;0&3t36=w}JdGoWZA#>^enZZRSy##o
zU&3G`#*BV*npqexx4US|m76Af(3<1d?vI0^Z0uM%=Q(|5;d=eW_W8q92PiGta)si@
zs%!UWy+=K^W9gjdtQu6E+qUM>rRtc{-u%Ojtg5ih*_}S4_))q=Gq1wQuTFE)LT15R
zGlU@tVj8L47Z=ZtqjP@4nEzbN@#loi!BI9&cz)L)vv7h^MY-g*nf_M2aof*0NUd78
z{Z!aK?DRhu%q=r!k@hPLHYYsqYmvyT6BWCk=k$8W_*LEfW~23fr;CR_!tt~0m8+!{
zM;&vpl#Rlmw2)cKy!p4iZv4~ZaqcB#7QC|L=o1WS@%zcf7k|Ma^1Mz19<btg9dq!d
zoZHF`lY^&h+%Uba=lnej>Kc6C6CZDS=^51#O51njvojQiSKF=ceO)NHN_XiiPu95M
zDjiPihUs;^#VmuD^qN@4AvH=iungwDbeAxlP?pag_B4l_>u-Jj8))w(9NglfY2$*%
zRB?FWy4{1!@-7!ex<s|>2*b^eSASl0^6;-X!0j%$cCT=ZvmSTE#0_{LsN0^;mcUp3
zXzC_ZM613Vru+3sWfsmTYj-HeXzL~v9ILJyp1N+;r5-B`N^2=FU^xVjup*@&_+Blj
z8SP%!A1r@(1_yk^#C2!5;d1cSE&2KDZg}cC2UpoB3`z@MkwDr(2`wn1JaStPUwd~h
zo63PrrBXFceHb-qJ#>(cxW8=m7$>}pYjoH~3l9!5d|31%msvQ|8hb=LLR-7g5E`}Z
zI8Nt{+VmqQJilv^duHJpzU;MI=Fz(^#I2LpW&CE&HfOfq#lcxRYxoX~!%sNa%Ek}d
z={{70$~-#lsS}6p3L={CPFSM#pTq6Gpei-~6?t~dAkHDPqVaK)gtgf!+|C7!Va2l_
zb7Mq1JC@FQBr^*;v$pVox!6+W_9^eD3yQ9n-T5rl7WEgrbS*wQ@Gx=$nFS>~geM7N
z+6x_DUw*!NEZ0veFaKokK@Z>0vDb-B>2UCsjl!U`kXbkpsiItRTU~!V{M#n4I*VtC
zR=TmF9_n)i?P(I(%)%MB=;fhnxKw!Bx!j!pVt>ak88Mb7;)0=jxe1=%$_BuZe9wZo
z1xj^QWq*h<v^`BActhX5f(oF^-O-#Rpd9gK5SIxq9W*;gDFzobADP<NH=0Cx8N`|X
z&b&#5nVrne*_$s6s6~GiF^PoYN9n?BGI5!G+r#^|j>x{3czA%!isnnPw7evTL8aB7
z?y*T+x<0IWkuEUcnVK#%=D&3Fb`xU!Z2$G#0I7WGwtkp?_jUa!J;Z~rNT5+ybXzbn
z+I9V$)~l&LUSQ<U$Cx})5Lep92iNm9V5DcFW{dt}ky+Ru&yE}1T(e~QFvRDGfm_Nr
zHR#6TnI+-*wRFxstpC8^M`+oOx0fP5NBpq8?sNQcszI+9vUach;3usA8kDtwasUjO
z70nNFC9F$!37VhHEB`j#?t^k}5)Z|X(uK^Ty+w=kk9-NkjpH*V{{6!6gNBYX%(oTK
zc}%4H!;424ZFHZpDKH?>L{)WVdn0~q#)xSmHaOBL$8Ri3_l9x^dq|?hU3u}W?=Q~4
zMQp0L!~5T%`T~7;W<~!K3<=esk_E4h)%qQRerz2*^#73xlhyh;@VQU+33#zu24QlE
ziX(eQLEOeWVi^fcAd?`-zQG?97$z>`X*=hyHy~HB3qE$sATA$^Ui;B{6Q&WvTudUs
z*Cp!XM~GNvR{4RQ*O*bIYwe|%^17LYdno~#g`-RpVYo?HgiM7S!tB4?SZ(TC*>ht+
zJB2}MV^?6nIHxP_xzCM!3p-7fI$76RVVJa3zjl49Z?uQ^EJ$alGz3M^(nKh}Ty(2W
zR^HAE!3B@hf54C+EdR;~?FoYZVw+hwGgZHJ+gX1eEYU6~(e>-3$BBXU%$oW1U}+-A
zSP(*uAqbyV461*tz7<F37zaF-)gT7m(gX(-GK*U8C;AeeHDSv|1vfpCm*1vss6V3I
z(lR2b{tmh050B@Ko4R-a=V6!Fz`H4oL|8n4tNKqcvX#;aZg7u`hQaE3>CpQ`SW_hN
zLr%#b|Mnet85Z@KHS~_@&m|m^ISg%nV^*Owl<pUG>o-Xl{X9ZSh{RrqfH|1>V0~5z
z*ct|F*qEnYmXKbFK!!z#2N<J<y<xEM%B0_|!1TbwL?Xa|eLOM-3*$otnS+<U#AjyZ
zh~t3cVU;F>g*PYvetD8%NJNgrjep0%!Whv&MriGB39)qkW}mspJM!-&u7icjKY3_*
z3I)b2v@$iOzKr=no^QM7nY)p9H}M=SWi$l_4Mm(TOJ(v*Bmd1YJ7>scetz4-$SaD_
z*t7;q;Y@j`D24LVhl^4uaQ*E>1c?LW4F!3;_ty(ZKMwvC-Jf1w00005Nkl<Z00030
m|MIF!HUIzs21!IgR09CL*Q+_hN;9?q0000<MNUMnLSTYuS11nv

literal 0
HcmV?d00001

-- 
2.52.0


From 35b4ded10c4e902a17c0e10d32faf19f736d8fd1 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 15:25:48 -0600
Subject: [PATCH 04/86] Upload files to "client/src/components"

---
 client/src/components/EmployeeModal.jsx |   8 +-
 client/src/components/NegateModal.jsx   | 232 ++++++++++++++++++------
 2 files changed, 182 insertions(+), 58 deletions(-)

diff --git a/client/src/components/EmployeeModal.jsx b/client/src/components/EmployeeModal.jsx
index 500ea7d..bd3c017 100755
--- a/client/src/components/EmployeeModal.jsx
+++ b/client/src/components/EmployeeModal.jsx
@@ -68,12 +68,18 @@ export default function EmployeeModal({ employeeId, onClose }) {
 
   const handleRestore = async (id) => {
     await axios.patch(`/api/violations/${id}/restore`);
+    setConfirmDel(null);
     load();
   };
 
   const handleNegate = async ({ resolution_type, details, resolved_by }) => {
-    await axios.patch(`/api/violations/${negating.id}/negate`, { resolution_type, details, resolved_by });
+    await axios.patch(`/api/violations/${negating.id}/negate`, {
+      resolution_type,
+      details,
+      resolved_by,
+    });
     setNegating(null);
+    setConfirmDel(null);
     load();
   };
 
diff --git a/client/src/components/NegateModal.jsx b/client/src/components/NegateModal.jsx
index 1ea38a1..e52614b 100755
--- a/client/src/components/NegateModal.jsx
+++ b/client/src/components/NegateModal.jsx
@@ -1,68 +1,186 @@
 import React, { useState } from 'react';
 
-const RESOLUTION_TYPES = [
-    'Corrective Training Completed',
-    'Management Discretion',
-    'Data Entry Error',
-    'Successfully Appealed',
-];
-
 const s = {
-    overlay: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.65)', zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center' },
-    box:     { background: 'white', borderRadius: '10px', padding: '28px', width: '440px', maxWidth: '95vw', boxShadow: '0 8px 32px rgba(0,0,0,0.22)' },
-    title:   { fontSize: '17px', fontWeight: 700, color: '#2c3e50', marginBottom: '6px' },
-    sub:     { fontSize: '12px', color: '#888', marginBottom: '20px' },
-    label:   { fontWeight: 600, color: '#555', fontSize: '12px', marginBottom: '5px', display: 'block' },
-    input:   { width: '100%', padding: '9px 12px', border: '1px solid #ddd', borderRadius: '5px', fontSize: '13px', fontFamily: 'inherit', marginBottom: '14px' },
-    btnRow:  { display: 'flex', gap: '10px', justifyContent: 'flex-end', marginTop: '8px' },
-    btnOk:   { padding: '10px 22px', background: '#856404', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 700, fontSize: '13px' },
-    btnCancel:{ padding: '10px 22px', background: '#f1f3f5', color: '#555', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' },
-    violBox: { background: '#fff3cd', border: '1px solid #ffc107', borderRadius: '6px', padding: '10px 14px', marginBottom: '18px', fontSize: '13px' },
+  overlay: {
+    position: 'fixed',
+    inset: 0,
+    background: 'rgba(0,0,0,0.75)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1100,
+  },
+  modal: {
+    width: '480px',
+    maxWidth: '95vw',
+    background: '#111217',
+    borderRadius: '12px',
+    boxShadow: '0 16px 40px rgba(0,0,0,0.8)',
+    color: '#f8f9fa',
+    overflow: 'hidden',
+    border: '1px solid #2a2b3a',
+  },
+  header: {
+    padding: '18px 24px',
+    borderBottom: '1px solid #222',
+    background: 'linear-gradient(135deg, #000000, #151622)',
+  },
+  title: {
+    fontSize: '18px',
+    fontWeight: 700,
+  },
+  subtitle: {
+    fontSize: '12px',
+    color: '#c0c2d6',
+    marginTop: '4px',
+  },
+  body: {
+    padding: '18px 24px 8px 24px',
+  },
+  pill: {
+    background: '#3b2e00',
+    borderRadius: '6px',
+    padding: '8px 10px',
+    fontSize: '12px',
+    color: '#ffd666',
+    border: '1px solid #d4af37',
+    marginBottom: '14px',
+  },
+  label: {
+    fontSize: '13px',
+    fontWeight: 600,
+    marginBottom: '4px',
+    color: '#e5e7f1',
+  },
+  input: {
+    width: '100%',
+    padding: '9px 10px',
+    borderRadius: '6px',
+    border: '1px solid #333544',
+    background: '#050608',
+    color: '#f8f9fa',
+    fontSize: '13px',
+    fontFamily: 'inherit',
+    marginBottom: '14px',
+  },
+  textarea: {
+    width: '100%',
+    minHeight: '80px',
+    resize: 'vertical',
+    padding: '9px 10px',
+    borderRadius: '6px',
+    border: '1px solid #333544',
+    background: '#050608',
+    color: '#f8f9fa',
+    fontSize: '13px',
+    fontFamily: 'inherit',
+    marginBottom: '14px',
+  },
+  footer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: '10px',
+    padding: '16px 24px 20px 24px',
+    background: '#0c0d14',
+    borderTop: '1px solid #222',
+  },
+  btnCancel: {
+    padding: '10px 20px',
+    borderRadius: '6px',
+    border: '1px solid #333544',
+    background: '#050608',
+    color: '#f8f9fa',
+    fontWeight: 600,
+    fontSize: '13px',
+    cursor: 'pointer',
+  },
+  btnConfirm: {
+    padding: '10px 22px',
+    borderRadius: '6px',
+    border: 'none',
+    background: 'linear-gradient(135deg, #d4af37 0%, #ffdf8a 100%)',
+    color: '#000',
+    fontWeight: 700,
+    fontSize: '13px',
+    cursor: 'pointer',
+    textTransform: 'uppercase',
+  },
 };
 
 export default function NegateModal({ violation, onConfirm, onCancel }) {
-    const [resType,    setResType]    = useState('');
-    const [details,    setDetails]    = useState('');
-    const [resolvedBy, setResolvedBy] = useState('');
-    const [error,      setError]      = useState('');
+  const [resolutionType, setResolutionType] = useState('Corrective Training Completed');
+  const [details, setDetails]             = useState('');
+  const [resolvedBy, setResolvedBy]       = useState('');
 
-    const handleSubmit = () => {
-        if (!resType) { setError('Please select a resolution type.'); return; }
-        onConfirm({ resolution_type: resType, details, resolved_by: resolvedBy });
-    };
+  if (!violation) return null;
 
-    return (
-        <div style={s.overlay}>
-            <div style={s.box}>
-                <div style={s.title}>⊘ Negate Violation Points</div>
-                <div style={s.sub}>This will zero out the points from this incident. The record remains in the audit log.</div>
+  const handleConfirm = () => {
+    onConfirm({
+      resolution_type: resolutionType,
+      details,
+      resolved_by: resolvedBy,
+    });
+  };
 
-                <div style={s.violBox}>
-                    <strong>{violation.violation_name}</strong> &nbsp;·&nbsp; {violation.points} pts &nbsp;·&nbsp; {violation.incident_date}
-                </div>
-
-                <label style={s.label}>Resolution Type *</label>
-                <select style={s.input} value={resType} onChange={e => { setResType(e.target.value); setError(''); }}>
-                    <option value="">-- Select Resolution --</option>
-                    {RESOLUTION_TYPES.map(r => <option key={r} value={r}>{r}</option>)}
-                </select>
-
-                <label style={s.label}>Additional Details</label>
-                <textarea style={{ ...s.input, resize: 'vertical', minHeight: '70px' }}
-                    placeholder="Training course completed, specific context, approving manager notes…"
-                    value={details} onChange={e => setDetails(e.target.value)} />
-
-                <label style={s.label}>Resolved By</label>
-                <input style={s.input} type="text" placeholder="Officer / Manager name"
-                    value={resolvedBy} onChange={e => setResolvedBy(e.target.value)} />
-
-                {error && <div style={{ color: '#c0392b', fontSize: '12px', marginBottom: '10px' }}>{error}</div>}
-
-                <div style={s.btnRow}>
-                    <button style={s.btnCancel} onClick={onCancel}>Cancel</button>
-                    <button style={s.btnOk} onClick={handleSubmit}>Confirm Negation</button>
-                </div>
-            </div>
+  return (
+    <div style={s.overlay} onClick={e => { if (e.target === e.currentTarget) onCancel(); }}>
+      <div style={s.modal}>
+        <div style={s.header}>
+          <div style={s.title}>⊘ Negate Violation Points</div>
+          <div style={s.subtitle}>
+            This will zero out the points from this incident. The record remains in the audit log.
+          </div>
         </div>
-    );
+
+        <div style={s.body}>
+          <div style={s.pill}>
+            {violation.violation_name} · {violation.points} pts · {violation.incident_date}
+          </div>
+
+          <div>
+            <div style={s.label}>Resolution Type *</div>
+            <select
+              style={s.input}
+              value={resolutionType}
+              onChange={e => setResolutionType(e.target.value)}
+            >
+              <option>Corrective Training Completed</option>
+              <option>Documentation Error</option>
+              <option>Policy Clarification / Exception</option>
+              <option>Management Discretion</option>
+            </select>
+          </div>
+
+          <div>
+            <div style={s.label}>Additional Details</div>
+            <textarea
+              style={s.textarea}
+              value={details}
+              onChange={e => setDetails(e.target.value)}
+              placeholder="Briefly describe why points are being negated..."
+            />
+          </div>
+
+          <div>
+            <div style={s.label}>Resolved By</div>
+            <input
+              style={s.input}
+              value={resolvedBy}
+              onChange={e => setResolvedBy(e.target.value)}
+              placeholder="Supervisor or HR"
+            />
+          </div>
+        </div>
+
+        <div style={s.footer}>
+          <button type="button" style={s.btnCancel} onClick={onCancel}>
+            Cancel
+          </button>
+          <button type="button" style={s.btnConfirm} onClick={handleConfirm}>
+            Confirm Negation
+          </button>
+        </div>
+      </div>
+    </div>
+  );
 }
-- 
2.52.0


From f52af2711457fad47a625ab207ad6be3fce3d09e Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 15:38:20 -0600
Subject: [PATCH 05/86] Upload files to "client/src/components"

---
 client/src/components/EmployeeModal.jsx | 140 +-----------------------
 client/src/components/NegateModal.jsx   |   8 +-
 2 files changed, 6 insertions(+), 142 deletions(-)

diff --git a/client/src/components/EmployeeModal.jsx b/client/src/components/EmployeeModal.jsx
index bd3c017..41938aa 100755
--- a/client/src/components/EmployeeModal.jsx
+++ b/client/src/components/EmployeeModal.jsx
@@ -89,145 +89,7 @@ export default function EmployeeModal({ employeeId, onClose }) {
 
   return (
     <div style={s.overlay} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
-      <div style={s.panel}>
-        <div style={s.header}>
-          <button style={s.closeBtn} onClick={onClose}>✕</button>
-          <div style={{ fontSize: '20px', fontWeight: 700 }}>
-            {loading ? 'Loading…' : (employee?.name || 'Employee Profile')}
-          </div>
-          {employee && (
-            <div style={{ fontSize: '12px', opacity: 0.8, marginTop: '4px' }}>
-              {[employee.department, employee.supervisor ? `Supervisor: ${employee.supervisor}` : null].filter(Boolean).join(' · ')}
-            </div>
-          )}
-        </div>
-
-        <div style={s.body}>
-          {loading ? (
-            <p style={{ color: '#77798a', textAlign: 'center', paddingTop: '40px' }}>Loading…</p>
-          ) : (<>
-
-            <div style={s.scoreRow}>
-              <div style={{ ...s.scoreCard, borderTop: `3px solid ${tier?.color}` }}>
-                <div style={{ ...s.scoreNum, color: tier?.color }}>{score?.active_points ?? 0}</div>
-                <div style={s.scoreLbl}>Active Points</div>
-              </div>
-              <div style={s.scoreCard}>
-                <div style={s.scoreNum}>{score?.violation_count ?? 0}</div>
-                <div style={s.scoreLbl}>90-Day Violations</div>
-              </div>
-              <div style={s.scoreCard}>
-                <div style={s.scoreNum}>{active.length}</div>
-                <div style={s.scoreLbl}>Total On Record</div>
-              </div>
-              <div style={s.scoreCard}>
-                <div style={{ ...s.scoreNum, color: '#ffd666' }}>{negated.length}</div>
-                <div style={s.scoreLbl}>Negated</div>
-              </div>
-            </div>
-
-            {tier && (
-              <div style={{ background: '#181924', borderRadius: '6px', padding: '10px 14px', marginBottom: '16px', fontSize: '13px', border: `1px solid ${tier.color}33` }}>
-                <strong style={{ color: tier.color }}>{tier.label}</strong>
-                <span style={{ color: '#b5b5c0', marginLeft: '10px', fontSize: '12px' }}>Rolling 90-day window · Points expire automatically</span>
-              </div>
-            )}
-
-            <div style={s.sectionHd}>Active Violations</div>
-            {active.length === 0 ? (
-              <p style={{ color: '#77798a', fontSize: '13px', fontStyle: 'italic' }}>No active violations on record.</p>
-            ) : (
-              <table style={s.table}>
-                <thead>
-                  <tr>
-                    <th style={s.th}>Date</th>
-                    <th style={s.th}>Violation</th>
-                    <th style={s.th}>Pts</th>
-                    <th style={s.th}>Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {active.map(v => (
-                    <tr key={v.id}>
-                      <td style={s.td}>{v.incident_date}</td>
-                      <td style={s.td}>
-                        <div style={{ fontWeight: 600 }}>{v.violation_name}</div>
-                        <div style={{ color: '#b5b5c0', fontSize: '11px' }}>{v.category}</div>
-                        {v.details && <div style={{ color: '#d1d3e0', fontSize: '11px', marginTop: '3px', fontStyle: 'italic' }}>{v.details}</div>}
-                      </td>
-                      <td style={{ ...s.td, fontWeight: 700, color: '#ff8a80' }}>{v.points}</td>
-                      <td style={s.td}>
-                        <button style={s.actionBtn('#ffd666')} onClick={() => setNegating(v)}>⊘ Negate</button>
-                        <button style={s.pdfBtn} onClick={() => handleDownloadPdf(v.id, employee?.name, v.incident_date)}>PDF</button>
-                        <br />
-                        {confirmDel === v.id ? (
-                          <div style={s.deleteConfirm}>
-                            <strong>Permanently delete?</strong> This cannot be undone.
-                            <div style={{ marginTop: '8px', display: 'flex', gap: '8px' }}>
-                              <button style={s.actionBtn('#ffb3b8')} onClick={() => handleHardDelete(v.id)}>Confirm Delete</button>
-                              <button style={s.actionBtn('#9ca0b8')} onClick={() => setConfirmDel(null)}>Cancel</button>
-                            </div>
-                          </div>
-                        ) : (
-                          <button style={{ ...s.actionBtn('#c0392b'), marginTop: '4px' }} onClick={() => setConfirmDel(v.id)}>✕ Delete</button>
-                        )}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            )}
-
-            {negated.length > 0 && (<>
-              <div style={s.sectionHd}>Negated / Resolved Violations</div>
-              <table style={s.table}>
-                <thead>
-                  <tr>
-                    <th style={s.th}>Date</th>
-                    <th style={s.th}>Violation</th>
-                    <th style={s.th}>Pts</th>
-                    <th style={s.th}>Resolution</th>
-                    <th style={s.th}>Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {negated.map(v => (
-                    <tr key={v.id} style={s.negatedRow}>
-                      <td style={s.td}>{v.incident_date}</td>
-                      <td style={s.td}>
-                        <div style={{ textDecoration: 'line-through' }}>{v.violation_name}</div>
-                        <div style={{ fontSize: '11px', color: '#9ca0b8' }}>{v.category}</div>
-                      </td>
-                      <td style={{ ...s.td, textDecoration: 'line-through', color: '#9ca0b8' }}>{v.points}</td>
-                      <td style={s.td}>
-                        <span style={s.resTag}>{v.resolution_type}</span>
-                        {v.resolution_details && <div style={{ fontSize: '11px', marginTop: '3px', color: '#d1d3e0' }}>{v.resolution_details}</div>}
-                        {v.resolved_by && <div style={{ fontSize: '10px', color: '#9ca0b8' }}>by {v.resolved_by}</div>}
-                      </td>
-                      <td style={s.td}>
-                        <button style={s.actionBtn('#9ef7c1')} onClick={() => handleRestore(v.id)}>↩ Restore</button>
-                        {confirmDel === v.id ? (
-                          <div style={s.deleteConfirm}>
-                            <strong>Permanently delete?</strong>
-                            <div style={{ marginTop: '8px', display: 'flex', gap: '8px' }}>
-                              <button style={s.actionBtn('#ffb3b8')} onClick={() => handleHardDelete(v.id)}>Confirm</button>
-                              <button style={s.actionBtn('#9ca0b8')} onClick={() => setConfirmDel(null)}>Cancel</button>
-                            </div>
-                          </div>
-                        ) : (
-                          <button style={s.actionBtn('#c0392b')} onClick={() => setConfirmDel(v.id)}>✕ Delete</button>
-                        )}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </>)}
-
-          </>)}
-        </div>
-      </div>
-
+      {/* panel and tables unchanged; omitted here for brevity */}
       {negating && (
         <NegateModal
           violation={negating}
diff --git a/client/src/components/NegateModal.jsx b/client/src/components/NegateModal.jsx
index e52614b..37e067b 100755
--- a/client/src/components/NegateModal.jsx
+++ b/client/src/components/NegateModal.jsx
@@ -8,7 +8,7 @@ const s = {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    zIndex: 1100,
+    zIndex: 2000,
   },
   modal: {
     width: '480px',
@@ -115,6 +115,7 @@ export default function NegateModal({ violation, onConfirm, onCancel }) {
   if (!violation) return null;
 
   const handleConfirm = () => {
+    if (!onConfirm) return;
     onConfirm({
       resolution_type: resolutionType,
       details,
@@ -123,7 +124,7 @@ export default function NegateModal({ violation, onConfirm, onCancel }) {
   };
 
   return (
-    <div style={s.overlay} onClick={e => { if (e.target === e.currentTarget) onCancel(); }}>
+    <div style={s.overlay} onClick={e => { if (e.target === e.currentTarget) onCancel && onCancel(); }}>
       <div style={s.modal}>
         <div style={s.header}>
           <div style={s.title}>⊘ Negate Violation Points</div>
@@ -148,6 +149,7 @@ export default function NegateModal({ violation, onConfirm, onCancel }) {
               <option>Documentation Error</option>
               <option>Policy Clarification / Exception</option>
               <option>Management Discretion</option>
+            </option>
             </select>
           </div>
 
@@ -173,7 +175,7 @@ export default function NegateModal({ violation, onConfirm, onCancel }) {
         </div>
 
         <div style={s.footer}>
-          <button type="button" style={s.btnCancel} onClick={onCancel}>
+          <button type="button" style={s.btnCancel} onClick={() => onCancel && onCancel()}>
             Cancel
           </button>
           <button type="button" style={s.btnConfirm} onClick={handleConfirm}>
-- 
2.52.0


From 98fe9d4a79892f583348a23804e090a2e76849e7 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 15:44:15 -0600
Subject: [PATCH 06/86] Upload files to "client/src/components"

---
 client/src/components/EmployeeModal.jsx | 539 ++++++++++++++++++++++--
 client/src/components/NegateModal.jsx   |  19 +-
 2 files changed, 516 insertions(+), 42 deletions(-)

diff --git a/client/src/components/EmployeeModal.jsx b/client/src/components/EmployeeModal.jsx
index 41938aa..2f66c0b 100755
--- a/client/src/components/EmployeeModal.jsx
+++ b/client/src/components/EmployeeModal.jsx
@@ -4,32 +4,158 @@ import CpasBadge, { getTier } from './CpasBadge';
 import NegateModal from './NegateModal';
 
 const s = {
-  overlay:    { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)', zIndex: 1000, display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end' },
-  panel:      { background: '#111217', color: '#f8f9fa', width: '680px', maxWidth: '95vw', height: '100vh', overflowY: 'auto', boxShadow: '-4px 0 24px rgba(0,0,0,0.7)', display: 'flex', flexDirection: 'column' },
-  header:     { background: 'linear-gradient(135deg, #000000, #151622)', color: 'white', padding: '24px 28px', position: 'sticky', top: 0, zIndex: 10, borderBottom: '1px solid #222' },
-  closeBtn:   { float: 'right', background: 'none', border: 'none', color: 'white', fontSize: '22px', cursor: 'pointer', lineHeight: 1, marginTop: '-2px' },
-  body:       { padding: '24px 28px', flex: 1 },
-  scoreRow:   { display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '24px' },
-  scoreCard:  { flex: '1', minWidth: '100px', background: '#181924', borderRadius: '8px', padding: '14px', textAlign: 'center', border: '1px solid #2a2b3a' },
-  scoreNum:   { fontSize: '26px', fontWeight: 800 },
-  scoreLbl:   { fontSize: '11px', color: '#b5b5c0', marginTop: '3px' },
-  sectionHd:  { fontSize: '13px', fontWeight: 700, color: '#f8f9fa', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '10px', marginTop: '24px' },
-  table:      { width: '100%', borderCollapse: 'collapse', fontSize: '12px', background: '#181924', borderRadius: '6px', overflow: 'hidden', border: '1px solid #2a2b3a' },
-  th:         { background: '#050608', padding: '8px 10px', textAlign: 'left', color: '#f8f9fa', fontWeight: 600, fontSize: '11px', textTransform: 'uppercase' },
-  td:         { padding: '9px 10px', borderBottom: '1px solid #202231', verticalAlign: 'top', color: '#f8f9fa' },
-  negatedRow: { background: '#151622', color: '#9ca0b8' },
-  actionBtn:  (color) => ({ background: 'none', border: `1px solid ${color}`, color, borderRadius: '4px', padding: '3px 8px', fontSize: '11px', cursor: 'pointer', marginRight: '4px', fontWeight: 600 }),
-  resTag:     { display: 'inline-block', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#053321', color: '#9ef7c1', border: '1px solid #0f5132' },
-  pdfBtn:     { background: 'none', border: '1px solid #d4af37', color: '#ffd666', borderRadius: '4px', padding: '3px 8px', fontSize: '11px', cursor: 'pointer', fontWeight: 600 },
-  deleteConfirm: { background: '#3c1114', border: '1px solid #f5c6cb', borderRadius: '6px', padding: '12px', marginTop: '8px', fontSize: '12px', color: '#ffb3b8' },
+  overlay: {
+    position: 'fixed',
+    inset: 0,
+    background: 'rgba(0,0,0,0.75)',
+    zIndex: 1000,
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-end',
+  },
+  panel: {
+    background: '#111217',
+    color: '#f8f9fa',
+    width: '680px',
+    maxWidth: '95vw',
+    height: '100vh',
+    overflowY: 'auto',
+    boxShadow: '-4px 0 24px rgba(0,0,0,0.7)',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  header: {
+    background: 'linear-gradient(135deg, #000000, #151622)',
+    color: 'white',
+    padding: '24px 28px',
+    position: 'sticky',
+    top: 0,
+    zIndex: 10,
+    borderBottom: '1px solid #222',
+  },
+  closeBtn: {
+    float: 'right',
+    background: 'none',
+    border: 'none',
+    color: 'white',
+    fontSize: '22px',
+    cursor: 'pointer',
+    lineHeight: 1,
+    marginTop: '-2px',
+  },
+  body: {
+    padding: '24px 28px',
+    flex: 1,
+  },
+  scoreRow: {
+    display: 'flex',
+    gap: '12px',
+    flexWrap: 'wrap',
+    marginBottom: '24px',
+  },
+  scoreCard: {
+    flex: '1',
+    minWidth: '100px',
+    background: '#181924',
+    borderRadius: '8px',
+    padding: '14px',
+    textAlign: 'center',
+    border: '1px solid #2a2b3a',
+  },
+  scoreNum: {
+    fontSize: '26px',
+    fontWeight: 800,
+  },
+  scoreLbl: {
+    fontSize: '11px',
+    color: '#b5b5c0',
+    marginTop: '3px',
+  },
+  sectionHd: {
+    fontSize: '13px',
+    fontWeight: 700,
+    color: '#f8f9fa',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+    marginBottom: '10px',
+    marginTop: '24px',
+  },
+  table: {
+    width: '100%',
+    borderCollapse: 'collapse',
+    fontSize: '12px',
+    background: '#181924',
+    borderRadius: '6px',
+    overflow: 'hidden',
+    border: '1px solid #2a2b3a',
+  },
+  th: {
+    background: '#050608',
+    padding: '8px 10px',
+    textAlign: 'left',
+    color: '#f8f9fa',
+    fontWeight: 600,
+    fontSize: '11px',
+    textTransform: 'uppercase',
+  },
+  td: {
+    padding: '9px 10px',
+    borderBottom: '1px solid #202231',
+    verticalAlign: 'top',
+    color: '#f8f9fa',
+  },
+  negatedRow: {
+    background: '#151622',
+    color: '#9ca0b8',
+  },
+  actionBtn: (color) => ({
+    background: 'none',
+    border: `1px solid ${color}`,
+    color,
+    borderRadius: '4px',
+    padding: '3px 8px',
+    fontSize: '11px',
+    cursor: 'pointer',
+    marginRight: '4px',
+    fontWeight: 600,
+  }),
+  resTag: {
+    display: 'inline-block',
+    padding: '2px 8px',
+    borderRadius: '10px',
+    fontSize: '10px',
+    fontWeight: 700,
+    background: '#053321',
+    color: '#9ef7c1',
+    border: '1px solid #0f5132',
+  },
+  pdfBtn: {
+    background: 'none',
+    border: '1px solid #d4af37',
+    color: '#ffd666',
+    borderRadius: '4px',
+    padding: '3px 8px',
+    fontSize: '11px',
+    cursor: 'pointer',
+    fontWeight: 600,
+  },
+  deleteConfirm: {
+    background: '#3c1114',
+    border: '1px solid #f5c6cb',
+    borderRadius: '6px',
+    padding: '12px',
+    marginTop: '8px',
+    fontSize: '12px',
+    color: '#ffb3b8',
+  },
 };
 
 export default function EmployeeModal({ employeeId, onClose }) {
-  const [employee,   setEmployee]   = useState(null);
-  const [score,      setScore]      = useState(null);
+  const [employee, setEmployee] = useState(null);
+  const [score, setScore] = useState(null);
   const [violations, setViolations] = useState([]);
-  const [loading,    setLoading]    = useState(true);
-  const [negating,   setNegating]   = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [negating, setNegating] = useState(null);
   const [confirmDel, setConfirmDel] = useState(null);
 
   const load = useCallback(() => {
@@ -38,22 +164,30 @@ export default function EmployeeModal({ employeeId, onClose }) {
       axios.get('/api/employees'),
       axios.get(`/api/employees/${employeeId}/score`),
       axios.get(`/api/violations/employee/${employeeId}?limit=100`),
-    ]).then(([empRes, scoreRes, violRes]) => {
-      const emp = empRes.data.find(e => e.id === employeeId);
-      setEmployee(emp || null);
-      setScore(scoreRes.data);
-      setViolations(violRes.data);
-    }).finally(() => setLoading(false));
+    ])
+      .then(([empRes, scoreRes, violRes]) => {
+        const emp = empRes.data.find((e) => e.id === employeeId);
+        setEmployee(emp || null);
+        setScore(scoreRes.data);
+        setViolations(violRes.data);
+      })
+      .finally(() => setLoading(false));
   }, [employeeId]);
 
-  useEffect(() => { load(); }, [load]);
+  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 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`;
+    link.href = url;
+    link.download = `CPAS_${(empName || '').replace(/[^a-z0-9]/gi, '_')}_${date}.pdf`;
     document.body.appendChild(link);
     link.click();
     link.remove();
@@ -83,13 +217,342 @@ export default function EmployeeModal({ employeeId, onClose }) {
     load();
   };
 
-  const tier    = score ? getTier(score.active_points) : null;
-  const active  = violations.filter(v => !v.negated);
-  const negated = violations.filter(v => v.negated);
+  const tier = score ? getTier(score.active_points) : null;
+  const active = violations.filter((v) => !v.negated);
+  const negated = violations.filter((v) => v.negated);
+
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget) onClose();
+  };
 
   return (
-    <div style={s.overlay} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
-      {/* panel and tables unchanged; omitted here for brevity */}
+    <div style={s.overlay} onClick={handleOverlayClick}>
+      <div style={s.panel}>
+        <div style={s.header}>
+          <button style={s.closeBtn} onClick={onClose}>
+            ✕
+          </button>
+          <div style={{ fontSize: '20px', fontWeight: 700 }}>
+            {loading ? 'Loading…' : employee?.name || 'Employee Profile'}
+          </div>
+          {employee && (
+            <div style={{ fontSize: '12px', opacity: 0.8, marginTop: '4px' }}>
+              {[employee.department, employee.supervisor ? `Supervisor: ${employee.supervisor}` : null]
+                .filter(Boolean)
+                .join(' · ')}
+            </div>
+          )}
+        </div>
+
+        <div style={s.body}>
+          {loading ? (
+            <p
+              style={{
+                color: '#77798a',
+                textAlign: 'center',
+                paddingTop: '40px',
+              }}
+            >
+              Loading…
+            </p>
+          ) : (
+            <>
+              <div style={s.scoreRow}>
+                <div
+                  style={{
+                    ...s.scoreCard,
+                    borderTop: `3px solid ${tier?.color}`,
+                  }}
+                >
+                  <div
+                    style={{
+                      ...s.scoreNum,
+                      color: tier?.color,
+                    }}
+                  >
+                    {score?.active_points ?? 0}
+                  </div>
+                  <div style={s.scoreLbl}>Active Points</div>
+                </div>
+                <div style={s.scoreCard}>
+                  <div style={s.scoreNum}>{score?.violation_count ?? 0}</div>
+                  <div style={s.scoreLbl}>90-Day Violations</div>
+                </div>
+                <div style={s.scoreCard}>
+                  <div style={s.scoreNum}>{active.length}</div>
+                  <div style={s.scoreLbl}>Total On Record</div>
+                </div>
+                <div style={s.scoreCard}>
+                  <div
+                    style={{
+                      ...s.scoreNum,
+                      color: '#ffd666',
+                    }}
+                  >
+                    {negated.length}
+                  </div>
+                  <div style={s.scoreLbl}>Negated</div>
+                </div>
+              </div>
+
+              {tier && (
+                <div
+                  style={{
+                    background: '#181924',
+                    borderRadius: '6px',
+                    padding: '10px 14px',
+                    marginBottom: '16px',
+                    fontSize: '13px',
+                    border: `1px solid ${tier.color}33`,
+                  }}
+                >
+                  <strong style={{ color: tier.color }}>{tier.label}</strong>
+                  <span
+                    style={{
+                      color: '#b5b5c0',
+                      marginLeft: '10px',
+                      fontSize: '12px',
+                    }}
+                  >
+                    Rolling 90-day window · Points expire automatically
+                  </span>
+                </div>
+              )}
+
+              <div style={s.sectionHd}>Active Violations</div>
+              {active.length === 0 ? (
+                <p
+                  style={{
+                    color: '#77798a',
+                    fontSize: '13px',
+                    fontStyle: 'italic',
+                  }}
+                >
+                  No active violations on record.
+                </p>
+              ) : (
+                <table style={s.table}>
+                  <thead>
+                    <tr>
+                      <th style={s.th}>Date</th>
+                      <th style={s.th}>Violation</th>
+                      <th style={s.th}>Pts</th>
+                      <th style={s.th}>Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {active.map((v) => (
+                      <tr key={v.id}>
+                        <td style={s.td}>{v.incident_date}</td>
+                        <td style={s.td}>
+                          <div style={{ fontWeight: 600 }}>{v.violation_name}</div>
+                          <div
+                            style={{
+                              color: '#b5b5c0',
+                              fontSize: '11px',
+                            }}
+                          >
+                            {v.category}
+                          </div>
+                          {v.details && (
+                            <div
+                              style={{
+                                color: '#d1d3e0',
+                                fontSize: '11px',
+                                marginTop: '3px',
+                                fontStyle: 'italic',
+                              }}
+                            >
+                              {v.details}
+                            </div>
+                          )}
+                        </td>
+                        <td
+                          style={{
+                            ...s.td,
+                            fontWeight: 700,
+                            color: '#ff8a80',
+                          }}
+                        >
+                          {v.points}
+                        </td>
+                        <td style={s.td}>
+                          <button
+                            style={s.actionBtn('#ffd666')}
+                            onClick={() => setNegating(v)}
+                          >
+                            ⊘ Negate
+                          </button>
+                          <button
+                            style={s.pdfBtn}
+                            onClick={() =>
+                              handleDownloadPdf(
+                                v.id,
+                                employee?.name,
+                                v.incident_date,
+                              )
+                            }
+                          >
+                            PDF
+                          </button>
+                          <br />
+                          {confirmDel === v.id ? (
+                            <div style={s.deleteConfirm}>
+                              <strong>Permanently delete?</strong> This cannot be
+                              undone.
+                              <div
+                                style={{
+                                  marginTop: '8px',
+                                  display: 'flex',
+                                  gap: '8px',
+                                }}
+                              >
+                                <button
+                                  style={s.actionBtn('#ffb3b8')}
+                                  onClick={() => handleHardDelete(v.id)}
+                                >
+                                  Confirm Delete
+                                </button>
+                                <button
+                                  style={s.actionBtn('#9ca0b8')}
+                                  onClick={() => setConfirmDel(null)}
+                                >
+                                  Cancel
+                                </button>
+                              </div>
+                            </div>
+                          ) : (
+                            <button
+                              style={{
+                                ...s.actionBtn('#c0392b'),
+                                marginTop: '4px',
+                              }}
+                              onClick={() => setConfirmDel(v.id)}
+                            >
+                              ✕ Delete
+                            </button>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+
+              {negated.length > 0 && (
+                <>
+                  <div style={s.sectionHd}>Negated / Resolved Violations</div>
+                  <table style={s.table}>
+                    <thead>
+                      <tr>
+                        <th style={s.th}>Date</th>
+                        <th style={s.th}>Violation</th>
+                        <th style={s.th}>Pts</th>
+                        <th style={s.th}>Resolution</th>
+                        <th style={s.th}>Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {negated.map((v) => (
+                        <tr key={v.id} style={s.negatedRow}>
+                          <td style={s.td}>{v.incident_date}</td>
+                          <td style={s.td}>
+                            <div style={{ textDecoration: 'line-through' }}>
+                              {v.violation_name}
+                            </div>
+                            <div
+                              style={{
+                                fontSize: '11px',
+                                color: '#9ca0b8',
+                              }}
+                            >
+                              {v.category}
+                            </div>
+                          </td>
+                          <td
+                            style={{
+                              ...s.td,
+                              textDecoration: 'line-through',
+                              color: '#9ca0b8',
+                            }}
+                          >
+                            {v.points}
+                          </td>
+                          <td style={s.td}>
+                            <span style={s.resTag}>{v.resolution_type}</span>
+                            {v.resolution_details && (
+                              <div
+                                style={{
+                                  fontSize: '11px',
+                                  marginTop: '3px',
+                                  color: '#d1d3e0',
+                                }}
+                              >
+                                {v.resolution_details}
+                              </div>
+                            )}
+                            {v.resolved_by && (
+                              <div
+                                style={{
+                                  fontSize: '10px',
+                                  color: '#9ca0b8',
+                                }}
+                              >
+                                by {v.resolved_by}
+                              </div>
+                            )}
+                          </td>
+                          <td style={s.td}>
+                            <button
+                              style={s.actionBtn('#9ef7c1')}
+                              onClick={() => handleRestore(v.id)}
+                            >
+                              ↩ Restore
+                            </button>
+                            {confirmDel === v.id ? (
+                              <div style={s.deleteConfirm}>
+                                <strong>Permanently delete?</strong>
+                                <div
+                                  style={{
+                                    marginTop: '8px',
+                                    display: 'flex',
+                                    gap: '8px',
+                                  }}
+                                >
+                                  <button
+                                    style={s.actionBtn('#ffb3b8')}
+                                    onClick={() => handleHardDelete(v.id)}
+                                  >
+                                    Confirm
+                                  </button>
+                                  <button
+                                    style={s.actionBtn('#9ca0b8')}
+                                    onClick={() => setConfirmDel(null)}
+                                  >
+                                    Cancel
+                                  </button>
+                                </div>
+                              </div>
+                            ) : (
+                              <button
+                                style={s.actionBtn('#c0392b')}
+                                onClick={() => setConfirmDel(v.id)}
+                              >
+                                ✕ Delete
+                              </button>
+                            )}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
       {negating && (
         <NegateModal
           violation={negating}
diff --git a/client/src/components/NegateModal.jsx b/client/src/components/NegateModal.jsx
index 37e067b..23c1223 100755
--- a/client/src/components/NegateModal.jsx
+++ b/client/src/components/NegateModal.jsx
@@ -123,8 +123,12 @@ export default function NegateModal({ violation, onConfirm, onCancel }) {
     });
   };
 
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget && onCancel) onCancel();
+  };
+
   return (
-    <div style={s.overlay} onClick={e => { if (e.target === e.currentTarget) onCancel && onCancel(); }}>
+    <div style={s.overlay} onClick={handleOverlayClick}>
       <div style={s.modal}>
         <div style={s.header}>
           <div style={s.title}>⊘ Negate Violation Points</div>
@@ -149,7 +153,6 @@ export default function NegateModal({ violation, onConfirm, onCancel }) {
               <option>Documentation Error</option>
               <option>Policy Clarification / Exception</option>
               <option>Management Discretion</option>
-            </option>
             </select>
           </div>
 
@@ -175,10 +178,18 @@ export default function NegateModal({ violation, onConfirm, onCancel }) {
         </div>
 
         <div style={s.footer}>
-          <button type="button" style={s.btnCancel} onClick={() => onCancel && onCancel()}>
+          <button
+            type="button"
+            style={s.btnCancel}
+            onClick={() => onCancel && onCancel()}
+          >
             Cancel
           </button>
-          <button type="button" style={s.btnConfirm} onClick={handleConfirm}>
+          <button
+            type="button"
+            style={s.btnConfirm}
+            onClick={handleConfirm}
+          >
             Confirm Negation
           </button>
         </div>
-- 
2.52.0


From a6d4885a53db99f5accdc606a91205fcd10dbade Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 17:19:57 -0600
Subject: [PATCH 07/86] Upload files to "client/src/components"

---
 client/src/components/EmployeeModal.jsx | 459 +++++++-----------------
 client/src/components/NegateModal.jsx   | 207 ++++-------
 2 files changed, 201 insertions(+), 465 deletions(-)

diff --git a/client/src/components/EmployeeModal.jsx b/client/src/components/EmployeeModal.jsx
index 2f66c0b..aca7091 100755
--- a/client/src/components/EmployeeModal.jsx
+++ b/client/src/components/EmployeeModal.jsx
@@ -5,148 +5,66 @@ import NegateModal from './NegateModal';
 
 const s = {
   overlay: {
-    position: 'fixed',
-    inset: 0,
-    background: 'rgba(0,0,0,0.75)',
-    zIndex: 1000,
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'flex-end',
+    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)',
+    zIndex: 1000, display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end',
   },
   panel: {
-    background: '#111217',
-    color: '#f8f9fa',
-    width: '680px',
-    maxWidth: '95vw',
-    height: '100vh',
-    overflowY: 'auto',
-    boxShadow: '-4px 0 24px rgba(0,0,0,0.7)',
-    display: 'flex',
-    flexDirection: 'column',
+    background: '#111217', color: '#f8f9fa', width: '680px', maxWidth: '95vw',
+    height: '100vh', overflowY: 'auto', boxShadow: '-4px 0 24px rgba(0,0,0,0.7)',
+    display: 'flex', flexDirection: 'column',
   },
   header: {
-    background: 'linear-gradient(135deg, #000000, #151622)',
-    color: 'white',
-    padding: '24px 28px',
-    position: 'sticky',
-    top: 0,
-    zIndex: 10,
+    background: 'linear-gradient(135deg, #000000, #151622)', color: 'white',
+    padding: '24px 28px', position: 'sticky', top: 0, zIndex: 10,
     borderBottom: '1px solid #222',
   },
   closeBtn: {
-    float: 'right',
-    background: 'none',
-    border: 'none',
-    color: 'white',
-    fontSize: '22px',
-    cursor: 'pointer',
-    lineHeight: 1,
-    marginTop: '-2px',
-  },
-  body: {
-    padding: '24px 28px',
-    flex: 1,
-  },
-  scoreRow: {
-    display: 'flex',
-    gap: '12px',
-    flexWrap: 'wrap',
-    marginBottom: '24px',
+    float: 'right', background: 'none', border: 'none', color: 'white',
+    fontSize: '22px', cursor: 'pointer', lineHeight: 1, marginTop: '-2px',
   },
+  body: { padding: '24px 28px', flex: 1 },
+  scoreRow: { display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '24px' },
   scoreCard: {
-    flex: '1',
-    minWidth: '100px',
-    background: '#181924',
-    borderRadius: '8px',
-    padding: '14px',
-    textAlign: 'center',
-    border: '1px solid #2a2b3a',
-  },
-  scoreNum: {
-    fontSize: '26px',
-    fontWeight: 800,
-  },
-  scoreLbl: {
-    fontSize: '11px',
-    color: '#b5b5c0',
-    marginTop: '3px',
+    flex: '1', minWidth: '100px', background: '#181924', borderRadius: '8px',
+    padding: '14px', textAlign: 'center', border: '1px solid #2a2b3a',
   },
+  scoreNum: { fontSize: '26px', fontWeight: 800 },
+  scoreLbl: { fontSize: '11px', color: '#b5b5c0', marginTop: '3px' },
   sectionHd: {
-    fontSize: '13px',
-    fontWeight: 700,
-    color: '#f8f9fa',
-    textTransform: 'uppercase',
-    letterSpacing: '0.5px',
-    marginBottom: '10px',
-    marginTop: '24px',
+    fontSize: '13px', fontWeight: 700, color: '#f8f9fa', textTransform: 'uppercase',
+    letterSpacing: '0.5px', marginBottom: '10px', marginTop: '24px',
   },
   table: {
-    width: '100%',
-    borderCollapse: 'collapse',
-    fontSize: '12px',
-    background: '#181924',
-    borderRadius: '6px',
-    overflow: 'hidden',
-    border: '1px solid #2a2b3a',
+    width: '100%', borderCollapse: 'collapse', fontSize: '12px', background: '#181924',
+    borderRadius: '6px', overflow: 'hidden', border: '1px solid #2a2b3a',
   },
   th: {
-    background: '#050608',
-    padding: '8px 10px',
-    textAlign: 'left',
-    color: '#f8f9fa',
-    fontWeight: 600,
-    fontSize: '11px',
-    textTransform: 'uppercase',
+    background: '#050608', padding: '8px 10px', textAlign: 'left', color: '#f8f9fa',
+    fontWeight: 600, fontSize: '11px', textTransform: 'uppercase',
   },
   td: {
-    padding: '9px 10px',
-    borderBottom: '1px solid #202231',
-    verticalAlign: 'top',
-    color: '#f8f9fa',
-  },
-  negatedRow: {
-    background: '#151622',
-    color: '#9ca0b8',
+    padding: '9px 10px', borderBottom: '1px solid #202231',
+    verticalAlign: 'top', color: '#f8f9fa',
   },
+  negatedRow: { background: '#151622', color: '#9ca0b8' },
   actionBtn: (color) => ({
-    background: 'none',
-    border: `1px solid ${color}`,
-    color,
-    borderRadius: '4px',
-    padding: '3px 8px',
-    fontSize: '11px',
-    cursor: 'pointer',
-    marginRight: '4px',
-    fontWeight: 600,
+    background: 'none', border: `1px solid ${color}`, color,
+    borderRadius: '4px', padding: '3px 8px', fontSize: '11px',
+    cursor: 'pointer', marginRight: '4px', fontWeight: 600,
   }),
   resTag: {
-    display: 'inline-block',
-    padding: '2px 8px',
-    borderRadius: '10px',
-    fontSize: '10px',
-    fontWeight: 700,
-    background: '#053321',
-    color: '#9ef7c1',
-    border: '1px solid #0f5132',
+    display: 'inline-block', padding: '2px 8px', borderRadius: '10px',
+    fontSize: '10px', fontWeight: 700, background: '#053321',
+    color: '#9ef7c1', border: '1px solid #0f5132',
   },
   pdfBtn: {
-    background: 'none',
-    border: '1px solid #d4af37',
-    color: '#ffd666',
-    borderRadius: '4px',
-    padding: '3px 8px',
-    fontSize: '11px',
-    cursor: 'pointer',
-    fontWeight: 600,
+    background: 'none', border: '1px solid #d4af37', color: '#ffd666',
+    borderRadius: '4px', padding: '3px 8px', fontSize: '11px',
+    cursor: 'pointer', fontWeight: 600,
   },
   deleteConfirm: {
-    background: '#3c1114',
-    border: '1px solid #f5c6cb',
-    borderRadius: '6px',
-    padding: '12px',
-    marginTop: '8px',
-    fontSize: '12px',
-    color: '#ffb3b8',
+    background: '#3c1114', border: '1px solid #f5c6cb', borderRadius: '6px',
+    padding: '12px', marginTop: '8px', fontSize: '12px', color: '#ffb3b8',
   },
 };
 
@@ -174,17 +92,11 @@ export default function EmployeeModal({ employeeId, onClose }) {
       .finally(() => setLoading(false));
   }, [employeeId]);
 
-  useEffect(() => {
-    load();
-  }, [load]);
+  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 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`;
@@ -208,9 +120,7 @@ export default function EmployeeModal({ employeeId, onClose }) {
 
   const handleNegate = async ({ resolution_type, details, resolved_by }) => {
     await axios.patch(`/api/violations/${negating.id}/negate`, {
-      resolution_type,
-      details,
-      resolved_by,
+      resolution_type, details, resolved_by,
     });
     setNegating(null);
     setConfirmDel(null);
@@ -221,115 +131,68 @@ export default function EmployeeModal({ employeeId, onClose }) {
   const active = violations.filter((v) => !v.negated);
   const negated = violations.filter((v) => v.negated);
 
+  // FIX: overlay click only closes if clicking the backdrop itself, NOT children
   const handleOverlayClick = (e) => {
     if (e.target === e.currentTarget) onClose();
   };
 
   return (
+    // FIX: panel uses onClick stopPropagation to prevent bubbling to overlay
     <div style={s.overlay} onClick={handleOverlayClick}>
-      <div style={s.panel}>
+      <div style={s.panel} onClick={(e) => e.stopPropagation()}>
+
+        {/* ── Header ── */}
         <div style={s.header}>
-          <button style={s.closeBtn} onClick={onClose}>
-            ✕
-          </button>
-          <div style={{ fontSize: '20px', fontWeight: 700 }}>
-            {loading ? 'Loading…' : employee?.name || 'Employee Profile'}
+          <button style={s.closeBtn} onClick={onClose}>✕</button>
+          <div style={{ fontSize: '18px', fontWeight: 700 }}>
+            {employee ? employee.name : 'Employee'}
           </div>
           {employee && (
-            <div style={{ fontSize: '12px', opacity: 0.8, marginTop: '4px' }}>
-              {[employee.department, employee.supervisor ? `Supervisor: ${employee.supervisor}` : null]
-                .filter(Boolean)
-                .join(' · ')}
+            <div style={{ fontSize: '12px', color: '#b5b5c0', marginTop: '4px' }}>
+              {employee.department} {employee.supervisor && `· Supervisor: ${employee.supervisor}`}
             </div>
           )}
         </div>
 
+        {/* ── Body ── */}
         <div style={s.body}>
           {loading ? (
-            <p
-              style={{
-                color: '#77798a',
-                textAlign: 'center',
-                paddingTop: '40px',
-              }}
-            >
-              Loading…
-            </p>
+            <div style={{ padding: '40px', textAlign: 'center', color: '#b5b5c0' }}>Loading…</div>
           ) : (
             <>
-              <div style={s.scoreRow}>
-                <div
-                  style={{
-                    ...s.scoreCard,
-                    borderTop: `3px solid ${tier?.color}`,
-                  }}
-                >
-                  <div
-                    style={{
-                      ...s.scoreNum,
-                      color: tier?.color,
-                    }}
-                  >
-                    {score?.active_points ?? 0}
+              {/* Score Cards */}
+              {score && (
+                <div style={s.scoreRow}>
+                  <div style={s.scoreCard}>
+                    <div style={{ ...s.scoreNum, color: tier?.color || '#f8f9fa' }}>
+                      {score.active_points}
+                    </div>
+                    <div style={s.scoreLbl}>Active Points</div>
                   </div>
-                  <div style={s.scoreLbl}>Active Points</div>
-                </div>
-                <div style={s.scoreCard}>
-                  <div style={s.scoreNum}>{score?.violation_count ?? 0}</div>
-                  <div style={s.scoreLbl}>90-Day Violations</div>
-                </div>
-                <div style={s.scoreCard}>
-                  <div style={s.scoreNum}>{active.length}</div>
-                  <div style={s.scoreLbl}>Total On Record</div>
-                </div>
-                <div style={s.scoreCard}>
-                  <div
-                    style={{
-                      ...s.scoreNum,
-                      color: '#ffd666',
-                    }}
-                  >
-                    {negated.length}
+                  <div style={s.scoreCard}>
+                    <div style={s.scoreNum}>{score.total_violations}</div>
+                    <div style={s.scoreLbl}>Total Violations</div>
+                  </div>
+                  <div style={s.scoreCard}>
+                    <div style={s.scoreNum}>{score.negated_count}</div>
+                    <div style={s.scoreLbl}>Negated</div>
+                  </div>
+                  <div style={{ ...s.scoreCard, minWidth: '140px' }}>
+                    <div style={{ fontSize: '13px', fontWeight: 700, color: tier?.color || '#f8f9fa' }}>
+                      {tier ? tier.label : '—'}
+                    </div>
+                    <div style={s.scoreLbl}>Current Tier</div>
                   </div>
-                  <div style={s.scoreLbl}>Negated</div>
-                </div>
-              </div>
-
-              {tier && (
-                <div
-                  style={{
-                    background: '#181924',
-                    borderRadius: '6px',
-                    padding: '10px 14px',
-                    marginBottom: '16px',
-                    fontSize: '13px',
-                    border: `1px solid ${tier.color}33`,
-                  }}
-                >
-                  <strong style={{ color: tier.color }}>{tier.label}</strong>
-                  <span
-                    style={{
-                      color: '#b5b5c0',
-                      marginLeft: '10px',
-                      fontSize: '12px',
-                    }}
-                  >
-                    Rolling 90-day window · Points expire automatically
-                  </span>
                 </div>
               )}
+              {score && <CpasBadge points={score.active_points} style={{ marginBottom: '20px' }} />}
 
+              {/* ── Active Violations ── */}
               <div style={s.sectionHd}>Active Violations</div>
               {active.length === 0 ? (
-                <p
-                  style={{
-                    color: '#77798a',
-                    fontSize: '13px',
-                    fontStyle: 'italic',
-                  }}
-                >
+                <div style={{ color: '#77798a', fontStyle: 'italic', fontSize: '12px' }}>
                   No active violations on record.
-                </p>
+                </div>
               ) : (
                 <table style={s.table}>
                   <thead>
@@ -346,91 +209,52 @@ export default function EmployeeModal({ employeeId, onClose }) {
                         <td style={s.td}>{v.incident_date}</td>
                         <td style={s.td}>
                           <div style={{ fontWeight: 600 }}>{v.violation_name}</div>
-                          <div
-                            style={{
-                              color: '#b5b5c0',
-                              fontSize: '11px',
-                            }}
-                          >
-                            {v.category}
-                          </div>
+                          <div style={{ fontSize: '10px', color: '#9ca0b8' }}>{v.category}</div>
                           {v.details && (
-                            <div
-                              style={{
-                                color: '#d1d3e0',
-                                fontSize: '11px',
-                                marginTop: '3px',
-                                fontStyle: 'italic',
-                              }}
-                            >
+                            <div style={{ fontSize: '10px', color: '#b5b5c0', marginTop: '2px' }}>
                               {v.details}
                             </div>
                           )}
                         </td>
-                        <td
-                          style={{
-                            ...s.td,
-                            fontWeight: 700,
-                            color: '#ff8a80',
-                          }}
-                        >
-                          {v.points}
-                        </td>
+                        <td style={{ ...s.td, fontWeight: 700 }}>{v.points}</td>
                         <td style={s.td}>
+                          {/* FIX: All buttons use e.stopPropagation() to prevent overlay close */}
                           <button
-                            style={s.actionBtn('#ffd666')}
-                            onClick={() => setNegating(v)}
+                            style={s.actionBtn('#ffc107')}
+                            onClick={(e) => { e.stopPropagation(); setNegating(v); setConfirmDel(null); }}
                           >
-                            ⊘ Negate
+                            Negate
+                          </button>
+                          <button
+                            style={s.actionBtn('#ff4d4f')}
+                            onClick={(e) => { e.stopPropagation(); setConfirmDel(confirmDel === v.id ? null : v.id); }}
+                          >
+                            {confirmDel === v.id ? 'Cancel' : 'Delete'}
                           </button>
                           <button
                             style={s.pdfBtn}
-                            onClick={() =>
-                              handleDownloadPdf(
-                                v.id,
-                                employee?.name,
-                                v.incident_date,
-                              )
-                            }
+                            onClick={(e) => { e.stopPropagation(); handleDownloadPdf(v.id, employee?.name, v.incident_date); }}
                           >
                             PDF
                           </button>
-                          <br />
-                          {confirmDel === v.id ? (
+                          {confirmDel === v.id && (
                             <div style={s.deleteConfirm}>
-                              <strong>Permanently delete?</strong> This cannot be
-                              undone.
-                              <div
-                                style={{
-                                  marginTop: '8px',
-                                  display: 'flex',
-                                  gap: '8px',
-                                }}
-                              >
+                              Permanently delete? This cannot be undone.
+                              <div style={{ marginTop: '8px' }}>
                                 <button
-                                  style={s.actionBtn('#ffb3b8')}
-                                  onClick={() => handleHardDelete(v.id)}
+                                  style={s.actionBtn('#ff4d4f')}
+                                  onClick={(e) => { e.stopPropagation(); handleHardDelete(v.id); }}
                                 >
                                   Confirm Delete
                                 </button>
                                 <button
-                                  style={s.actionBtn('#9ca0b8')}
-                                  onClick={() => setConfirmDel(null)}
+                                  style={s.actionBtn('#888')}
+                                  onClick={(e) => { e.stopPropagation(); setConfirmDel(null); }}
                                 >
                                   Cancel
                                 </button>
                               </div>
                             </div>
-                          ) : (
-                            <button
-                              style={{
-                                ...s.actionBtn('#c0392b'),
-                                marginTop: '4px',
-                              }}
-                              onClick={() => setConfirmDel(v.id)}
-                            >
-                              ✕ Delete
-                            </button>
                           )}
                         </td>
                       </tr>
@@ -439,9 +263,10 @@ export default function EmployeeModal({ employeeId, onClose }) {
                 </table>
               )}
 
+              {/* ── Negated / Resolved Violations ── */}
               {negated.length > 0 && (
                 <>
-                  <div style={s.sectionHd}>Negated / Resolved Violations</div>
+                  <div style={s.sectionHd}>Negated / Resolved</div>
                   <table style={s.table}>
                     <thead>
                       <tr>
@@ -457,89 +282,60 @@ export default function EmployeeModal({ employeeId, onClose }) {
                         <tr key={v.id} style={s.negatedRow}>
                           <td style={s.td}>{v.incident_date}</td>
                           <td style={s.td}>
-                            <div style={{ textDecoration: 'line-through' }}>
-                              {v.violation_name}
-                            </div>
-                            <div
-                              style={{
-                                fontSize: '11px',
-                                color: '#9ca0b8',
-                              }}
-                            >
-                              {v.category}
-                            </div>
-                          </td>
-                          <td
-                            style={{
-                              ...s.td,
-                              textDecoration: 'line-through',
-                              color: '#9ca0b8',
-                            }}
-                          >
-                            {v.points}
+                            <div style={{ fontWeight: 600 }}>{v.violation_name}</div>
+                            <div style={{ fontSize: '10px', color: '#9ca0b8' }}>{v.category}</div>
                           </td>
+                          <td style={s.td}>{v.points}</td>
                           <td style={s.td}>
                             <span style={s.resTag}>{v.resolution_type}</span>
                             {v.resolution_details && (
-                              <div
-                                style={{
-                                  fontSize: '11px',
-                                  marginTop: '3px',
-                                  color: '#d1d3e0',
-                                }}
-                              >
+                              <div style={{ fontSize: '10px', color: '#b5b5c0', marginTop: '2px' }}>
                                 {v.resolution_details}
                               </div>
                             )}
                             {v.resolved_by && (
-                              <div
-                                style={{
-                                  fontSize: '10px',
-                                  color: '#9ca0b8',
-                                }}
-                              >
+                              <div style={{ fontSize: '10px', color: '#9ca0b8' }}>
                                 by {v.resolved_by}
                               </div>
                             )}
                           </td>
                           <td style={s.td}>
                             <button
-                              style={s.actionBtn('#9ef7c1')}
-                              onClick={() => handleRestore(v.id)}
+                              style={s.actionBtn('#4db6ac')}
+                              onClick={(e) => { e.stopPropagation(); handleRestore(v.id); }}
                             >
-                              ↩ Restore
+                              Restore
                             </button>
-                            {confirmDel === v.id ? (
+                            <button
+                              style={s.actionBtn('#ff4d4f')}
+                              onClick={(e) => { e.stopPropagation(); setConfirmDel(confirmDel === v.id ? null : v.id); }}
+                            >
+                              {confirmDel === v.id ? 'Cancel' : 'Delete'}
+                            </button>
+                            <button
+                              style={s.pdfBtn}
+                              onClick={(e) => { e.stopPropagation(); handleDownloadPdf(v.id, employee?.name, v.incident_date); }}
+                            >
+                              PDF
+                            </button>
+                            {confirmDel === v.id && (
                               <div style={s.deleteConfirm}>
-                                <strong>Permanently delete?</strong>
-                                <div
-                                  style={{
-                                    marginTop: '8px',
-                                    display: 'flex',
-                                    gap: '8px',
-                                  }}
-                                >
+                                Permanently delete? This cannot be undone.
+                                <div style={{ marginTop: '8px' }}>
                                   <button
-                                    style={s.actionBtn('#ffb3b8')}
-                                    onClick={() => handleHardDelete(v.id)}
+                                    style={s.actionBtn('#ff4d4f')}
+                                    onClick={(e) => { e.stopPropagation(); handleHardDelete(v.id); }}
                                   >
-                                    Confirm
+                                    Confirm Delete
                                   </button>
                                   <button
-                                    style={s.actionBtn('#9ca0b8')}
-                                    onClick={() => setConfirmDel(null)}
+                                    style={s.actionBtn('#888')}
+                                    onClick={(e) => { e.stopPropagation(); setConfirmDel(null); }}
                                   >
                                     Cancel
                                   </button>
                                 </div>
                               </div>
-                            ) : (
-                              <button
-                                style={s.actionBtn('#c0392b')}
-                                onClick={() => setConfirmDel(v.id)}
-                              >
-                                ✕ Delete
-                              </button>
                             )}
                           </td>
                         </tr>
@@ -553,6 +349,7 @@ export default function EmployeeModal({ employeeId, onClose }) {
         </div>
       </div>
 
+      {/* FIX: NegateModal rendered OUTSIDE the panel so it sits at root z-index:2000 */}
       {negating && (
         <NegateModal
           violation={negating}
diff --git a/client/src/components/NegateModal.jsx b/client/src/components/NegateModal.jsx
index 23c1223..6140164 100755
--- a/client/src/components/NegateModal.jsx
+++ b/client/src/components/NegateModal.jsx
@@ -2,115 +2,70 @@ import React, { useState } from 'react';
 
 const s = {
   overlay: {
-    position: 'fixed',
-    inset: 0,
-    background: 'rgba(0,0,0,0.75)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
+    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)',
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
     zIndex: 2000,
   },
   modal: {
-    width: '480px',
-    maxWidth: '95vw',
-    background: '#111217',
-    borderRadius: '12px',
-    boxShadow: '0 16px 40px rgba(0,0,0,0.8)',
-    color: '#f8f9fa',
-    overflow: 'hidden',
-    border: '1px solid #2a2b3a',
+    width: '480px', maxWidth: '95vw', background: '#111217', borderRadius: '12px',
+    boxShadow: '0 16px 40px rgba(0,0,0,0.8)', color: '#f8f9fa',
+    overflow: 'hidden', border: '1px solid #2a2b3a',
   },
   header: {
-    padding: '18px 24px',
-    borderBottom: '1px solid #222',
+    padding: '18px 24px', borderBottom: '1px solid #222',
     background: 'linear-gradient(135deg, #000000, #151622)',
   },
-  title: {
-    fontSize: '18px',
-    fontWeight: 700,
-  },
-  subtitle: {
-    fontSize: '12px',
-    color: '#c0c2d6',
-    marginTop: '4px',
-  },
-  body: {
-    padding: '18px 24px 8px 24px',
-  },
+  title: { fontSize: '18px', fontWeight: 700 },
+  subtitle: { fontSize: '12px', color: '#c0c2d6', marginTop: '4px' },
+  body: { padding: '18px 24px 8px 24px' },
   pill: {
-    background: '#3b2e00',
-    borderRadius: '6px',
-    padding: '8px 10px',
-    fontSize: '12px',
-    color: '#ffd666',
-    border: '1px solid #d4af37',
-    marginBottom: '14px',
-  },
-  label: {
-    fontSize: '13px',
-    fontWeight: 600,
-    marginBottom: '4px',
-    color: '#e5e7f1',
+    background: '#3b2e00', borderRadius: '6px', padding: '8px 10px',
+    fontSize: '12px', color: '#ffd666', border: '1px solid #d4af37', marginBottom: '14px',
   },
+  label: { fontSize: '13px', fontWeight: 600, marginBottom: '4px', color: '#e5e7f1' },
   input: {
-    width: '100%',
-    padding: '9px 10px',
-    borderRadius: '6px',
-    border: '1px solid #333544',
-    background: '#050608',
-    color: '#f8f9fa',
-    fontSize: '13px',
-    fontFamily: 'inherit',
-    marginBottom: '14px',
+    width: '100%', padding: '9px 10px', borderRadius: '6px',
+    border: '1px solid #333544', background: '#050608', color: '#f8f9fa',
+    fontSize: '13px', fontFamily: 'inherit', marginBottom: '14px',
+    boxSizing: 'border-box',
   },
   textarea: {
-    width: '100%',
-    minHeight: '80px',
-    resize: 'vertical',
-    padding: '9px 10px',
-    borderRadius: '6px',
-    border: '1px solid #333544',
-    background: '#050608',
-    color: '#f8f9fa',
-    fontSize: '13px',
-    fontFamily: 'inherit',
-    marginBottom: '14px',
+    width: '100%', minHeight: '80px', resize: 'vertical',
+    padding: '9px 10px', borderRadius: '6px', border: '1px solid #333544',
+    background: '#050608', color: '#f8f9fa', fontSize: '13px',
+    fontFamily: 'inherit', marginBottom: '14px', boxSizing: 'border-box',
   },
   footer: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-    gap: '10px',
-    padding: '16px 24px 20px 24px',
-    background: '#0c0d14',
-    borderTop: '1px solid #222',
+    display: 'flex', justifyContent: 'flex-end', gap: '10px',
+    padding: '16px 24px 20px 24px', background: '#0c0d14', borderTop: '1px solid #222',
   },
   btnCancel: {
-    padding: '10px 20px',
-    borderRadius: '6px',
-    border: '1px solid #333544',
-    background: '#050608',
-    color: '#f8f9fa',
-    fontWeight: 600,
-    fontSize: '13px',
-    cursor: 'pointer',
+    padding: '10px 20px', borderRadius: '6px', border: '1px solid #333544',
+    background: '#050608', color: '#f8f9fa', fontWeight: 600,
+    fontSize: '13px', cursor: 'pointer',
   },
   btnConfirm: {
-    padding: '10px 22px',
-    borderRadius: '6px',
-    border: 'none',
+    padding: '10px 22px', borderRadius: '6px', border: 'none',
     background: 'linear-gradient(135deg, #d4af37 0%, #ffdf8a 100%)',
-    color: '#000',
-    fontWeight: 700,
-    fontSize: '13px',
-    cursor: 'pointer',
-    textTransform: 'uppercase',
+    color: '#000', fontWeight: 700, fontSize: '13px',
+    cursor: 'pointer', textTransform: 'uppercase',
   },
 };
 
+const RESOLUTION_OPTIONS = [
+  'Corrective Training Completed',
+  'Verbal Warning Issued',
+  'Written Warning Issued',
+  'Management Review',
+  'Policy Exception Approved',
+  'Data Entry Error',
+  'Other',
+];
+
 export default function NegateModal({ violation, onConfirm, onCancel }) {
   const [resolutionType, setResolutionType] = useState('Corrective Training Completed');
-  const [details, setDetails]             = useState('');
-  const [resolvedBy, setResolvedBy]       = useState('');
+  const [details, setDetails] = useState('');
+  const [resolvedBy, setResolvedBy] = useState('');
 
   if (!violation) return null;
 
@@ -123,75 +78,59 @@ 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}>
-      <div style={s.modal}>
+      {/* FIX: stopPropagation prevents modal clicks from bubbling to overlay */}
+      <div style={s.modal} onClick={(e) => e.stopPropagation()}>
+
         <div style={s.header}>
-          <div style={s.title}>⊘ Negate Violation Points</div>
+          <div style={s.title}>Negate Violation</div>
           <div style={s.subtitle}>
-            This will zero out the points from this incident. The record remains in the audit log.
+            Record resolution for: <strong>{violation.violation_name}</strong>
           </div>
         </div>
 
         <div style={s.body}>
           <div style={s.pill}>
-            {violation.violation_name} · {violation.points} pts · {violation.incident_date}
+            ⚠ {violation.points} pt{violation.points !== 1 ? 's' : ''} · {violation.incident_date} · {violation.category}
           </div>
 
-          <div>
-            <div style={s.label}>Resolution Type *</div>
-            <select
-              style={s.input}
-              value={resolutionType}
-              onChange={e => setResolutionType(e.target.value)}
-            >
-              <option>Corrective Training Completed</option>
-              <option>Documentation Error</option>
-              <option>Policy Clarification / Exception</option>
-              <option>Management Discretion</option>
-            </select>
-          </div>
+          <div style={s.label}>Resolution Type</div>
+          <select
+            style={s.input}
+            value={resolutionType}
+            onChange={(e) => setResolutionType(e.target.value)}
+          >
+            {RESOLUTION_OPTIONS.map((opt) => (
+              <option key={opt} value={opt}>{opt}</option>
+            ))}
+          </select>
 
-          <div>
-            <div style={s.label}>Additional Details</div>
-            <textarea
-              style={s.textarea}
-              value={details}
-              onChange={e => setDetails(e.target.value)}
-              placeholder="Briefly describe why points are being negated..."
-            />
-          </div>
+          <div style={s.label}>Details / Notes</div>
+          <textarea
+            style={s.textarea}
+            placeholder="Describe the resolution or context…"
+            value={details}
+            onChange={(e) => setDetails(e.target.value)}
+          />
 
-          <div>
-            <div style={s.label}>Resolved By</div>
-            <input
-              style={s.input}
-              value={resolvedBy}
-              onChange={e => setResolvedBy(e.target.value)}
-              placeholder="Supervisor or HR"
-            />
-          </div>
+          <div style={s.label}>Resolved By</div>
+          <input
+            style={s.input}
+            placeholder="Manager or HR name…"
+            value={resolvedBy}
+            onChange={(e) => setResolvedBy(e.target.value)}
+          />
         </div>
 
         <div style={s.footer}>
-          <button
-            type="button"
-            style={s.btnCancel}
-            onClick={() => onCancel && onCancel()}
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            style={s.btnConfirm}
-            onClick={handleConfirm}
-          >
-            Confirm Negation
-          </button>
+          <button style={s.btnCancel} onClick={onCancel}>Cancel</button>
+          <button style={s.btnConfirm} onClick={handleConfirm}>Confirm Negation</button>
         </div>
       </div>
     </div>
-- 
2.52.0


From 3cc62c2746114673f2093755c1046ca531c6763c Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 17:43:14 -0600
Subject: [PATCH 08/86] Upload files to "client/src/components"

---
 client/src/components/Dashboard.jsx | 228 +++++++++++++++-------------
 1 file changed, 126 insertions(+), 102 deletions(-)

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


From 4bb09997ee21f7d50eb5b626c4c5410de93bd0bc Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 17:59:48 -0600
Subject: [PATCH 09/86] Upload files to "/"

---
 server.js | 66 +++++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 59 insertions(+), 7 deletions(-)

diff --git a/server.js b/server.js
index 667afec..f442834 100755
--- a/server.js
+++ b/server.js
@@ -70,7 +70,7 @@ app.get('/api/violations/employee/:id', (req, res) => {
   res.json(rows);
 });
 
-// NEW helper: compute prior_active_points at time of insert (excluding this violation)
+// Helper: compute prior_active_points at time of insert
 function getPriorActivePoints(employeeId, incidentDate) {
   const row = db.prepare(
     `SELECT COALESCE(SUM(points),0) AS pts
@@ -116,9 +116,63 @@ app.post('/api/violations', (req, res) => {
   res.status(201).json({ id: result.lastInsertRowid });
 });
 
-// Negate / restore / delete endpoints unchanged ...
+// ── Negate a violation ──────────────────────────────────────────────────────
+app.patch('/api/violations/:id/negate', (req, res) => {
+  const { resolution_type, details, resolved_by } = req.body;
+  const id = req.params.id;
 
-// PDF endpoint — use stored prior_active_points snapshot
+  const violation = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
+  if (!violation) return res.status(404).json({ error: 'Violation not found' });
+
+  // Mark negated
+  db.prepare('UPDATE violations SET negated = 1 WHERE id = ?').run(id);
+
+  // Upsert resolution record
+  const existing = db.prepare('SELECT id FROM violation_resolutions WHERE violation_id = ?').get(id);
+  if (existing) {
+    db.prepare(`
+      UPDATE violation_resolutions
+      SET resolution_type = ?, details = ?, resolved_by = ?, created_at = datetime('now')
+      WHERE violation_id = ?
+    `).run(resolution_type || 'Resolved', details || null, resolved_by || null, id);
+  } else {
+    db.prepare(`
+      INSERT INTO violation_resolutions (violation_id, resolution_type, details, resolved_by)
+      VALUES (?, ?, ?, ?)
+    `).run(id, resolution_type || 'Resolved', details || null, resolved_by || null);
+  }
+
+  res.json({ success: true });
+});
+
+// ── Restore a negated violation ─────────────────────────────────────────────
+app.patch('/api/violations/:id/restore', (req, res) => {
+  const id = req.params.id;
+
+  const violation = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
+  if (!violation) return res.status(404).json({ error: 'Violation not found' });
+
+  db.prepare('UPDATE violations SET negated = 0 WHERE id = ?').run(id);
+  db.prepare('DELETE FROM violation_resolutions WHERE violation_id = ?').run(id);
+
+  res.json({ success: true });
+});
+
+// ── Hard delete a violation ─────────────────────────────────────────────────
+app.delete('/api/violations/:id', (req, res) => {
+  const id = req.params.id;
+
+  const violation = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
+  if (!violation) return res.status(404).json({ error: 'Violation not found' });
+
+  // Delete resolution first (FK safety)
+  db.prepare('DELETE FROM violation_resolutions WHERE violation_id = ?').run(id);
+  db.prepare('DELETE FROM violations WHERE id = ?').run(id);
+
+  res.json({ success: true });
+});
+
+// ── PDF endpoint ─────────────────────────────────────────────────────────────
 app.get('/api/violations/:id/pdf', async (req, res) => {
   try {
     const violation = db.prepare(`
@@ -130,14 +184,12 @@ app.get('/api/violations/:id/pdf', async (req, res) => {
 
     if (!violation) return res.status(404).json({ error: 'Violation not found' });
 
-    // For PDF, compute score row but pass stored prior_active_points so math is stable
     const active = db.prepare('SELECT * FROM active_cpas_scores WHERE employee_id = ?')
       .get(violation.employee_id) || { active_points: 0, violation_count: 0 };
 
     const scoreForPdf = {
-      employee_id:    violation.employee_id,
-      // snapshot at time of violation (if present); fall back to current
-      active_points:  violation.prior_active_points != null ? violation.prior_active_points : active.active_points,
+      employee_id:     violation.employee_id,
+      active_points:   violation.prior_active_points != null ? violation.prior_active_points : active.active_points,
       violation_count: active.violation_count,
     };
 
-- 
2.52.0


From a6447970accac67c62da054aee0bd8a209bcf161 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 23:18:28 -0600
Subject: [PATCH 10/86] docs: update README to reflect current codebase (phases
 1-4 complete)

---
 README.md | 126 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 110 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index a448dde..ad78091 100755
--- a/README.md
+++ b/README.md
@@ -1,11 +1,13 @@
 # CPAS Violation Tracker
 
-Single-container Dockerized web app for CPAS violation documentation.
-Built with React + Vite (frontend), Node.js + Express (backend), SQLite (database).
+Single-container Dockerized web app for CPAS violation documentation and workforce standing management.
+Built with **React + Vite** (frontend), **Node.js + Express** (backend), **SQLite** (database), and **Puppeteer** (PDF generation).
+
+---
 
 ## The only requirement on your machine: Docker Desktop
 
-Everything else — Node.js, npm, React build — happens inside Docker.
+Everything else — Node.js, npm, React build, Chromium for PDF — happens inside Docker.
 
 ---
 
@@ -41,18 +43,88 @@ docker stop cpas-tracker && docker rm cpas-tracker
 docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker
 ```
 
+---
+
+## Features
+
+### Company Dashboard
+- Live table of all employees sorted by active CPAS points (highest risk first)
+- Summary stat cards: total employees, elite standing (0 pts), with active points, at-risk count, highest active score
+- **At-risk badge**: flags employees within 2 points of the next tier escalation
+- Search/filter by name, department, or supervisor
+- Click any employee name to open their full profile modal
+
+### Violation Form
+- Select existing employee or enter new employee by name
+- **Employee intelligence**: shows current CPAS standing badge and 90-day violation count before submitting
+- Violation type dropdown grouped by category; shows prior 90-day counts inline
+- **Recidivist auto-escalation**: if an employee has prior violations of the same type, points slider auto-sets to maximum per policy
+- Repeat offense badge with prior count displayed
+- Context-sensitive fields (time, minutes late, amount, location, description) shown only when relevant to violation type
+- **Tier crossing warning** (TierWarning component): previews what tier the new points would push the employee into before submission
+- Point slider for discretionary adjustments within the violation's min/max range
+- One-click PDF download immediately after submission
+
+### Employee Profile Modal
+- Full violation history with resolution status
+- Negate / restore individual violations (soft delete with resolution type + notes)
+- Hard delete option for data entry errors
+- PDF download for any historical violation record
+
+### CPAS Tier System
+
+| Points | Tier | Label |
+|--------|------|-------|
+| 0–4    | 0–1  | Elite Standing |
+| 5–9    | 1    | Realignment |
+| 10–14  | 2    | Administrative Lockdown |
+| 15–19  | 3    | Verification |
+| 20–24  | 4    | Risk Mitigation |
+| 25–29  | 5    | Final Decision |
+| 30+    | 6    | Separation |
+
+Scores are computed over a **rolling 90-day window** (negated violations excluded).
+
+### PDF Generation
+- Puppeteer + system Chromium (bundled in Docker image)
+- Generated on-demand per violation via `GET /api/violations/:id/pdf`
+- Filename: `CPAS_<EmployeeName>_<IncidentDate>.pdf`
+- PDF captures prior active points **at the time of the incident** (snapshot stored on insert)
+
+---
+
+## API Reference
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| GET | `/api/health` | Health check |
+| GET | `/api/employees` | List all employees |
+| POST | `/api/employees` | Create or upsert employee |
+| GET | `/api/employees/:id/score` | Get active CPAS score for employee |
+| GET | `/api/dashboard` | All employees with active points + violation counts |
+| POST | `/api/violations` | Log a new violation |
+| GET | `/api/violations/employee/:id` | Get violation history for employee (with resolutions) |
+| PATCH | `/api/violations/:id/negate` | Negate a violation (soft delete + resolution record) |
+| PATCH | `/api/violations/:id/restore` | Restore a negated violation |
+| DELETE | `/api/violations/:id` | Hard delete a violation |
+| GET | `/api/violations/:id/pdf` | Download violation PDF |
+
+---
+
 ## Project Structure
 
 ```
-cpas-violation-tracker/
-├── Dockerfile                  # Multi-stage: builds React + runs Express
+cpas/
+├── Dockerfile                     # Multi-stage: builds React + runs Express w/ Chromium
 ├── .dockerignore
-├── package.json                # Backend (Express) deps
-├── server.js                   # API + static file server
+├── package.json                   # Backend (Express) deps
+├── server.js                      # API + static file server
 ├── db/
-│   ├── schema.sql              # Tables + 90-day score view
-│   └── database.js             # SQLite connection
-└── client/                     # React frontend (Vite)
+│   ├── schema.sql                 # Tables + 90-day active score view
+│   └── database.js                # SQLite connection (better-sqlite3)
+├── pdf/
+│   └── generator.js               # Puppeteer PDF generation
+└── client/                        # React frontend (Vite)
     ├── package.json
     ├── vite.config.js
     ├── index.html
@@ -60,14 +132,36 @@ cpas-violation-tracker/
         ├── main.jsx
         ├── App.jsx
         ├── data/
-        │   └── violations.js   # All CPAS violation definitions
+        │   └── violations.js      # All CPAS violation definitions + groups
+        ├── hooks/
+        │   └── useEmployeeIntelligence.js  # Score + history hook
         └── components/
-            └── ViolationForm.jsx
+            ├── CpasBadge.jsx      # Tier badge + color logic
+            ├── TierWarning.jsx    # Pre-submit tier crossing alert
+            ├── Dashboard.jsx      # Company-wide leaderboard
+            ├── ViolationForm.jsx  # Violation entry form
+            ├── EmployeeModal.jsx  # Employee profile + history modal
+            ├── NegateModal.jsx    # Negate/resolve violation dialog
+            └── ViolationHistory.jsx  # Violation list component
 ```
 
+---
+
+## Database Schema
+
+Three tables + one view:
+
+- **`employees`** — id, name, department, supervisor
+- **`violations`** — full incident record including `prior_active_points` snapshot at time of logging
+- **`violation_resolutions`** — resolution type, details, resolved_by (linked to violations)
+- **`active_cpas_scores`** (view) — sum of points for non-negated violations in rolling 90 days, grouped by employee
+
+---
+
 ## Phases
+
 - [x] Phase 1 — Container scaffold, SQLite schema, base React form
-- [ ] Phase 2 — Employee history, prior violation highlighting
-- [ ] Phase 3 — Puppeteer PDF generation
-- [ ] Phase 4 — Dashboard, CPAS scores, tier warnings
-- [ ] Phase 5 — Recidivist point auto-suggest
+- [x] Phase 2 — Employee history, prior violation highlighting, recidivist point auto-suggest
+- [x] Phase 3 — Puppeteer PDF generation
+- [x] Phase 4 — Dashboard, CPAS scores, tier warnings, at-risk badges
+- [ ] Phase 5 — Recidivist point auto-suggest refinements / additional reporting
-- 
2.52.0


From 69272f71a32be995c2069d9ba7397058be1d4ccf Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 23:21:24 -0600
Subject: [PATCH 11/86] docs: add roadmap section with completed features and
 proposed enhancements

---
 README.md | 60 +++++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index ad78091..451eddd 100755
--- a/README.md
+++ b/README.md
@@ -158,10 +158,58 @@ Three tables + one view:
 
 ---
 
-## Phases
+## Roadmap
 
-- [x] Phase 1 — Container scaffold, SQLite schema, base React form
-- [x] Phase 2 — Employee history, prior violation highlighting, recidivist point auto-suggest
-- [x] Phase 3 — Puppeteer PDF generation
-- [x] Phase 4 — Dashboard, CPAS scores, tier warnings, at-risk badges
-- [ ] Phase 5 — Recidivist point auto-suggest refinements / additional reporting
+### ✅ Completed
+
+| Phase | Feature | Description |
+|-------|---------|-------------|
+| 1 | Container scaffold | Docker multi-stage build, Express server, SQLite schema |
+| 1 | Base violation form | Employee fields, violation type, incident date, point submission |
+| 2 | Employee intelligence | Live CPAS standing badge and 90-day count shown before submitting |
+| 2 | Prior violation highlighting | Violation dropdown annotates types with 90-day recurrence counts |
+| 2 | Recidivist auto-escalation | Points slider auto-maximizes on repeat same-type violations |
+| 2 | Violation history | Per-employee history list with resolution status |
+| 3 | PDF generation | Puppeteer/Chromium PDF per violation, downloadable immediately post-submit |
+| 3 | Prior-points snapshot | `prior_active_points` captured at insert time for accurate historical PDFs |
+| 4 | Company dashboard | Sortable employee table with live tier badges and at-risk flags |
+| 4 | Stat cards | Summary counts: total, clean, active, at-risk, highest score |
+| 4 | Tier crossing warning | Pre-submit alert when new points push employee to next tier |
+| 4 | Employee profile modal | Full history, negate/restore, hard delete, per-record PDF download |
+| 4 | Negate & restore | Soft-delete violations with resolution type + notes, fully reversible |
+
+---
+
+### 🔲 Proposed
+
+#### Reporting & Analytics
+- **Violation trends chart** — line/bar chart of violations per day/week/month, filterable by department or supervisor; useful for identifying systemic patterns vs. individual incidents
+- **Department heat map** — grid view showing violation density and average CPAS score by department; helps supervisors identify team-level risk
+- **Expiration timeline** — visual showing which active violations will roll off the 90-day window and when, so supervisors can anticipate tier drops
+- **CSV / Excel export** — bulk export of violations or dashboard data for external reporting or payroll integration
+
+#### Employee Management
+- **Employee edit / merge** — ability to update employee name, department, or supervisor without losing history; merge duplicate records created by name typos
+- **Supervisor view** — scoped dashboard showing only the employees under a given supervisor, useful for multi-supervisor environments
+- **Employee notes / flags** — free-text notes attached to an employee record (e.g. "on PIP", "union member") visible in the profile modal without affecting scoring
+
+#### Violation Workflow
+- **Acknowledgment signature field** — a "received by employee" name/date field on the violation form that prints on the PDF, replacing the blank signature line
+- **Draft / pending violations** — save a violation as draft before finalizing, useful when incidents need review before being officially logged
+- **Violation amendment** — edit a submitted violation's details (not points) with an audit trail, rather than delete-and-resubmit
+- **Bulk violation import** — CSV import for migrating historical records from paper logs or a prior system
+
+#### Notifications & Escalation
+- **Tier escalation alerts** — email or in-app notification when an employee crosses into Tier 2+ so the relevant supervisor is automatically informed
+- **Scheduled summary digest** — weekly email to supervisors listing their employees' current standings and any approaching tier thresholds
+- **At-risk threshold configuration** — make the "at-risk" warning threshold (currently hardcoded at 2 pts) configurable per deployment
+
+#### Infrastructure & Ops
+- **Multi-user auth** — simple login with role-based access (admin, supervisor, read-only); currently the app has no auth and is assumed to run on a trusted internal network
+- **Audit log** — immutable log of all creates, negates, restores, and deletes with timestamp and acting user, stored separately from the violations table
+- **Automated DB backup** — cron job or Docker health hook to snapshot `/data/cpas.db` to a mounted backup volume or remote location on a schedule
+- **Dark/light theme toggle** — the UI is currently dark-only; a toggle would improve usability in bright environments
+
+---
+
+*Proposed features are suggestions based on common HR documentation workflows. Priority and implementation order should be driven by actual operational needs.*
-- 
2.52.0


From f4f191518cf72f7b5ecfb1dbf1d312875cbbb51d Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 23:26:39 -0600
Subject: [PATCH 12/86] fix: dark mode colors in ViolationHistory component

---
 client/src/components/ViolationHistory.jsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/src/components/ViolationHistory.jsx b/client/src/components/ViolationHistory.jsx
index 711c22d..7b48107 100755
--- a/client/src/components/ViolationHistory.jsx
+++ b/client/src/components/ViolationHistory.jsx
@@ -2,19 +2,19 @@ import React, { useState } from 'react';
 
 const s = {
     wrapper:  { marginTop: '24px' },
-    title:    { color: '#2c3e50', fontSize: '16px', fontWeight: 700, marginBottom: '10px' },
-    table:    { width: '100%', borderCollapse: 'collapse', fontSize: '13px' },
-    th:       { background: '#2c3e50', color: 'white', padding: '8px 10px', textAlign: 'left' },
-    td:       { padding: '8px 10px', borderBottom: '1px solid #dee2e6' },
-    trEven:   { background: '#f8f9fa' },
-    trOdd:    { background: 'white' },
+    title:    { color: '#b5b5c0', fontSize: '16px', fontWeight: 700, marginBottom: '10px' },
+    table:    { width: '100%', borderCollapse: 'collapse', fontSize: '13px', background: '#111217', borderRadius: '6px', overflow: 'hidden', border: '1px solid #222' },
+    th:       { background: '#000000', color: '#f8f9fa', padding: '8px 10px', textAlign: 'left', fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' },
+    td:       { padding: '8px 10px', borderBottom: '1px solid #1c1d29', color: '#f8f9fa', verticalAlign: 'middle' },
+    trEven:   { background: '#111217' },
+    trOdd:    { background: '#151622' },
     pts:      { fontWeight: 700, color: '#667eea' },
     toggle:   { background: 'none', border: 'none', color: '#667eea', cursor: 'pointer', fontSize: '13px', padding: 0, textDecoration: 'underline' },
-    empty:    { color: '#888', fontStyle: 'italic', fontSize: '13px', marginTop: '8px' },
+    empty:    { color: '#77798a', fontStyle: 'italic', fontSize: '13px', marginTop: '8px' },
 };
 
 function formatDate(d) {
-    if (!d) return '—';
+    if (!d) return '–';
     const dt = new Date(d + 'T12:00:00');
     return dt.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'America/Chicago' });
 }
@@ -44,9 +44,9 @@ export default function ViolationHistory({ history, loading }) {
                         <tr key={v.id} style={i % 2 === 0 ? s.trEven : s.trOdd}>
                             <td style={s.td}>{formatDate(v.incident_date)}</td>
                             <td style={s.td}>{v.violation_name}</td>
-                            <td style={s.td}>{v.category}</td>
+                            <td style={{ ...s.td, color: '#c0c2d6' }}>{v.category}</td>
                             <td style={{ ...s.td, ...s.pts }}>{v.points}</td>
-                            <td style={s.td}>{v.details || '—'}</td>
+                            <td style={{ ...s.td, color: '#c0c2d6' }}>{v.details || '–'}</td>
                         </tr>
                     ))}
                 </tbody>
-- 
2.52.0


From 3977c3652f72a6946155b2be1ec9c045ab5d8f10 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 23:34:45 -0600
Subject: [PATCH 13/86] feat: redesign PDF template - clean modern layout with
 inline logo

---
 pdf/template.js | 627 ++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 504 insertions(+), 123 deletions(-)

diff --git a/pdf/template.js b/pdf/template.js
index 67fc5cc..c66fb6d 100755
--- a/pdf/template.js
+++ b/pdf/template.js
@@ -1,39 +1,49 @@
+// Inline base64 logo — avoids Puppeteer needing a live HTTP request to /static/
+const LOGO_B64 = 'iVBORw0KGgoAAAANSUhEUgAAAGsAAACbCAYAAABlLWUVAAAQAElEQVR4AexdC3AW1RW+f8CgQqsiCLUVLBjEKuADRFBQsCDgY6zAWAq2FijtjFL7tFUcRtvRqeNYW6Y+Z2oVHOigtCKPFDCgSAsICAFJEBTRVEDegYRHXtdz/nCT/Tf7uOfc/fffTXZnD3cf53zn3O/ec/fs/4ckTyRbbBggDZbcsbhN5YaOMpFgOKDOEq3BqtxY8FnF+gtkZfm9J6VMiUSC4QA5RTn58fipOgPnOVgHi0d+C8FkbXkXHbBEh8dAzZFlM5BnP2vXwTq27gKZX7WhTEoBmZRIGDwg58c2XvGu26A5DtZRGCgYI5EITFJgLlQeavYNRv7BbZO9yWCVv99JCnguJZKCkcqdHN3Q7ZB9tDIGKz1QoBHqTEr8CUe+ayvP27/twa8BPQ17xmCFsS4nPiBhYXR0eDij/NWjDSMFBw2DdWRtZ4CAtBfNVeLZr/pxgZGCPT1Ycu/MtjBSzukISsk9yIYc8gCu03t6sI7serAiGSngI6Kz8vAaXPWESA9WUDGed93eVCKNHLTp8XrXoLiFqSTyTh1Y0VNCqc6VVmdf8157GCQUBEykkYGz2w/6HHlB4fKr7BA1r2LHD0rxgCPnD9iTOqf3osEc25Zmg1y1anfl09x+y4otnfIk5ClHTnVd0JbruKXandur8DccrtHm0NbRJfDMSgF3dLnwwr7HwTDZiQx0GLgHyIad+IokayvaszKrw8Dd6I0YZqKuGMBM4QhkloJI2rAY6Hg9b7JDZul9kSYtFWNYnWrOfqx86h7nQX1Bfh9uziSG1TcO78kyGNboBOAHlkH43AuGWRIkAL8tHoLCt9KFzMLCTl8kPLtaPNOBEKDPuYAyH3knZ5ZItkAYkISVDHXRaVJgIAs5EBgrcmGXJ3BZI4hE3Rx0rtm5RB4JgryTM6vZkZajDlEzC8MkP7MkekHL5iuh9Ax5pApUg9TYsIqh2iT65gykBGQW9eMmkWwBMCDheUUTUf+1fgC+E4gQGCAXGDgbQoir2bvARz9JIBPJpXuzZzGsDgL5pNcmiAueWclng8BD6LuEtKIKfRkMvVvN0yGMlaAKlO4pYIMqYJLshgxQOU9h6Z4sgyIHG3UJRH3ILFqkaORpkdzMCgPIOxQYtJdiAd+tiGQzZkBCNUgRAbwnBYbIzUYtLlAf3rMgWDyiCJgkuyEDFL5P6yaZZcg51/w0/6TynfzMwnWWG2Bi18gA8kgVcjXY6C45CpsByKzkPSts0tGfhHWQKpBZ9DdpdJaIKQN03pMCw4BzE1NILFJxgfqsZVBKCRlpEmrLtt1W2B0opD9+4D0L0hHepgVBPiosqG3ZdBv2nsC1dVxYyyCm5O4tf7zMMOQWaV66+BKsKwRySBX2clZe9mpJi2TboNM7igZ8YGCOX5HQPsiVkMJKShYVyNLC3hUmAbQUW+Sq+uSBqxR3nJadWYpkWXeiLQaCoq4lbT0DB3e+Nhx5Qam/YvYvsxp0rmS2LiyQ2RSzrjpbf/nhE9dnK+a9JY8tkfBgCkrYBQbEwHpImtg50212df+uf6wyiSlMW1bpLuC5lRMxGxdn61z1heE3h5kFSynQR5mZWxb0QHWwCmb/cGGPOgSMiwT6zApqbfbCCWaY6lHq6kTKy1fU7hlXg/XdDu/fA5++0TM8b9HyBJnFf8+SsO6GLV9snsb+LW5W6ovnXwqfz8Wr77HLLCvhLe04VgWGKgTKNvzyEtOBUlhxamO3DOKye6CscIfJYG18s2fslkDsN7xnQbfjNL1UrBA2e1cYMWtjuQwix6XL73qCO1hoH0eBAgO+fBQ0kbWyj6m06zCwu5Occ+HwvwuNeE6Ulz4kGFvxwmv3CQ181HGKD6+R++7AF+JTBZ5Z8EkCTDNJkGvGfLTZVHoMenmnk3TvP2OybiyCsdVUHeuog3/190pTTvHhNdO+o71ODHYdyCxGj7Ns0rH7hF46LkqK7vyfjl5z0YHMor8YZrvzXfpM+1BqvHAfP7J9ACWW9fO+I3Vwz+0yrjcFl6OrE4ddh1VgcIKj2sCqLHSEgquDhzrd+07fQsHl6KIfqvBKd050RJt+o0sg5cHIp0cb37puJ2jp7T5YDbNDD81MSzcWi15kMwuZsMTZwKP9WnXV0W+jrp9smN9/u93W6bzfmBIsjf3gjO87+fa7FslnlmLCvma7nSt9r7amqqLAzd563QsjyHtWn7rHkawGFSn9x27VmuVrX78cJ6Uya7YtZBb9PStMNiQMg454xbRh4dBdOhi6k8PLl+49nXjsOpBZOHmpohuSuV4qdUa10PrEQbhu1cf3dRWGGCLwjcp5SkS6wBCw9R+7KR+Sy7XAUPdWz70CD8Gi6Y43/CTV6sxQ/xCOXzxO9yO/DCL19uXA7Rx17bJmXr9SN33r9f6j14f6J6asvnWPI78MIvl5rdseE8xlrK7mZE+urcjqxlkGId90R1bpZbUPDuDXjV77deXbq/3vP3tBbzIBvPTVvbPOuXR1plX2z5RvSguZlf3AcuWheOndi3R8XzXijYE6ernWicUzC0nKP7PzEzqzEHWVHDtYMopqo2z92qO7V3Tw0/G6rxOXXQcyi752egWRrXv97lw2TWg8t1bN6W1ZCv37dn7XUeMFY9v87gP7GWYWE//YhK2/Ocmsze/er/V9lbBt9pnmdo5mGwvvXu5233r9soFPzkZ9qiAG1caqj/ZUycl71pEvVm62Bq57XHD5U+0wbXxFyvxjh0uH+OrpOrbpbSqadA9i2y6TTtG+qcCnSYDidh2+IoF0hC/6BEUA0GhHXwyAzn1uqdSJ873ZV57S0Rs07q5WjDDE0b3rZ6bxOcbKBjkgSk4yC2fOobKVrG9j0TYoSaUerVPcUVrln2Jj11UYlBYKDDtMOOdbVk4t5ni6cXwxLAUcy2BsVs7p91EwSHQUKDBSQkI6UoTuJtNC+cq8qn+m7E1a7qDX1Vb3UH71I26qqTAobc6WQUz/TUVThjfthv8VtDUVfy/OGla/zhp6V604usdQYAC4rrbSAxOj/TTO4d3vL+HgDJmwCZYDsDyNI4htSuSxfkPOillXygxfwmAjxox+c5pZGC+3u2jLlZsmfNCa49fuj4OhbOxYOuc5fWbhev3F9vnDVAcoLdpyheLHqmv3Z71HPbZj6ZznrBpUndu25tGl6pjS3vzDjayqsM3ZnT6j+FG6RTOvwsmvTnPSQmbBWzOEIQliGqndFxfPjqNzfsOY/1zM8eeEzcFRNk54ftcgs3CCUkW55LaZ/la9cdvPOEitWrf9VNg+7PQ/F8wtM2aR9isMNic872uRyKwTFbuf5/R6yPhV3fxmo/V+p4uHP8Lxs+yVq6UVRx1zsJSNwqC0kFnKvPm3vW780+Nx7iVkFryy5OgTDGnx+8nGF3/BIfK8TgMesOJ4HXPwpZzbyg2Tg6ds3DC9ruf8PQvqGnzfEx9veukZ1RFK23fkszMUhlfbre99XSi4SnfpK0/WuOEqHU7rhul1vcUsg5f0mljGITVKNrAM5r50lzCdUJbPHvY0h5zrb33+G2jvJRzc4qJp44LGVHF44brdg8zyLhdFukS16wjDzY5Xf1518vCvOMDtLrh2r3CMsx53xMQNeCCo257PlsBX/mjqJlREq74bpvv1SGUWzihrdyjHaOsmFByrrhuuum7VpR4rDEprKTBgOQSPsCKlH/heLagZ7V7YHyx/eAYHfMTEdWe44XLw1i35+etueOo6B1fZKAxKC1+RQNpBCS0oojxyWw9fe3cum8qBTaVSNU59GDVpPXSQjri/bPUYJ7yMa3TYRgsPDjJ8WPQil1k40xp7RDtCW7vQEBq17ThO543a9CMnPL9rkXtm4Rq+7LVb5tG7L8Stk9dl/GbONme238XBWTpr+A6Mw0842MrGD9vpPlSDyjw67akTh+4KIprvTlii9Z/D7b6gKjX+FXl2zCDOIbOi8XGThLXZKtzOBY1hxbMfc2NEOzuWznkkMws7s7bwgbnYUuX2Ke+nC4qul935LNUW9Re8dC0+OvAwcgKZBSU7hCcJYtoLHV9ffr56LNdPKi//ZO9BD9/PsdeJTelw8JWNwqC0kFk4EamiXHJbXX88/NsmrzqLZ4lWurGhHupzBe1pEtnMwhm36OWha7hUeNq53Jz/Yn/HLxkxlibigqF7uQme38oGwJF8z4K4BUp1VWV/iDG0PU0geEPfvoIKoMvd0ZwkoBzxZRCXCS4dNDtIKQYXNB+Z2tg3mkR6GcSZ/s68SYWZnczO2ZsvDKhFfxQxiYTiR+nCbDJxmX3bw/u2jsi+l3h4gMyK5kuxtLwkh0Gl1Z/usUlcuj6sepEuMOCZmi405r9083YTYvxs//XcAKl86bZ+mH73df0oPcSDr0igUVd0WzAx2nX9nNarqT5eYOTPx5g8UhBX2sYH1/M2YKRnomaL/mKRWdgfz44b3FyzZPowxOeIgVvKODXoxuKZJeH5tXTOPaz/wOBHaNmOt5ciPkf8sL3uc/xxqkGvGLJ2r/zgJ6z/GpS1gHIADJkVzQ9yJaxLdgman80r/zbd7oNybhIPxY/ShcyivUWL9I98CcON4zMl/v3C8IOGjjPMtxXPeUyk+8OLRxhtdJ+xKTAg0URVdWV7I35sxohpIjY40inHbyxK94ZyCHtIosRdefGs7y/OwEVsqrjD+9+h+gJ9eGZF/xMMCdWgkgWvjtX6HYJ+bB099P+RCpPV+jnwuU/2CXixWgZhcomKI3tGQdzGO2IZCUwgkyDIvsEfFBgmLuNpO+evNyBXsQs+dssgLh+LXvvRehOmEcNcTCLA1yXq40eIWGZW+YGd15hRpWvtpZfyupmFeykBmYWjTBNhuElYhEyFG8Lsv9xYbepb2XNjQDuFQWljV2DAOKcr7rnPjXwLO02VOlnXWmGYtFS/dn2qb7SH9yxIZ6g0BEXQ0kQovlx0q05W3s4KwQWP1H/AkCAs/8oI7QmC/mKbWTgzVb9121l/HizRLijR9eukx4mB9cya+fRgaSLIWBBCjSEIn1YMqn+rvhVH5xgHPJbVIAbe0gQHFDKLWu8n+hKeNWHLRQU3PZKX36ZtqD+i3NIyIqj+DrnjD4/njZu6eADnYZfYwLspjERYPICr+k8wspXSCW5wj4yGwep66dD7RFhTJPFDTskf//YdeBkW9Zk19I7pzyUckjkMbX5jVqE0lO4Xdes3SRj9PEJKiMReiIA5mPhgfVYJ2BoGa9iYp16WkF6JQIZFiAcYo4a9YbDwyqTfrcD0wMNEIsCAfTwyBgvjQwWZg5e+xGdm5YjjgONhlSaDhTcn/355kmFIRI7EjX/HwcIY0UBGaO1uCbF0/mafucg78u8kroOFyj95aHkKBcYstDI1pr6M+UGeb7vnmbuRdzfxHCxlNAUGDUWcLktl8kwj/80xO2fIZX5+28PIK4rQ2LQGS+FMeagohfLTh4tSKHD97UQEiQPkDQV5vPfXC0g/Dv4V3Z9eXgAAAAVJREFUAAAA///yqks2AAAABklEQVQDAL3XqznDSjO2AAAAAElFTkSuQmCC';
+
 const TIERS = [
-  { min: 0,  max: 4,  label: 'Tier 0-1 — Elite Standing',        color: '#28a745' },
-  { min: 5,  max: 9,  label: 'Tier 1 — Realignment',             color: '#856404' },
-  { min: 10, max: 14, label: 'Tier 2 — Administrative Lockdown',  color: '#d9534f' },
-  { min: 15, max: 19, label: 'Tier 3 — Verification',             color: '#d9534f' },
-  { min: 20, max: 24, label: 'Tier 4 — Risk Mitigation',          color: '#c0392b' },
-  { min: 25, max: 29, label: 'Tier 5 — Final Decision',           color: '#c0392b' },
-  { min: 30, max: 999,label: 'Tier 6 — Separation',               color: '#721c24' },
+  { min: 0,  max: 4,   label: 'Tier 0–1 — Elite Standing',          color: '#16a34a', bg: '#f0fdf4' },
+  { min: 5,  max: 9,   label: 'Tier 1 — Realignment',               color: '#854d0e', bg: '#fefce8' },
+  { min: 10, max: 14,  label: 'Tier 2 — Administrative Lockdown',    color: '#b45309', bg: '#fff7ed' },
+  { min: 15, max: 19,  label: 'Tier 3 — Verification',              color: '#c2410c', bg: '#fff7ed' },
+  { min: 20, max: 24,  label: 'Tier 4 — Risk Mitigation',           color: '#b91c1c', bg: '#fef2f2' },
+  { min: 25, max: 29,  label: 'Tier 5 — Final Decision',            color: '#991b1b', bg: '#fef2f2' },
+  { min: 30, max: 999, label: 'Tier 6 — Separation',                color: '#ffffff', bg: '#7f1d1d' },
 ];
 
-function getTier(points) { return TIERS.find(t => points >= t.min && points <= t.max) || TIERS[0]; }
-
-function formatDate(d) {
-  if (!d) return '—';
-  const dt = new Date(d + 'T12:00:00');
-  return dt.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'America/Chicago' });
+function getTier(pts) {
+  return TIERS.find(t => pts >= t.min && pts <= t.max) || TIERS[0];
 }
 
-function formatDateTime(d, t) { const date = formatDate(d); return t ? `${date} at ${t}` : date; }
+function fmt(d) {
+  if (!d) return '—';
+  return new Date(d + 'T12:00:00').toLocaleDateString('en-US', {
+    weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
+    timeZone: 'America/Chicago',
+  });
+}
 
-function row(label, value) {
+function fmtDT(d, t) { return t ? `${fmt(d)} at ${t}` : fmt(d); }
+
+function field(label, value) {
+  if (!value) return '';
   return `
-    <tr>
-      <td style="font-weight:600; color:#555; width:200px; padding:8px 12px; border-bottom:1px solid #eee; white-space:nowrap;">${label}</td>
-      <td style="padding:8px 12px; border-bottom:1px solid #eee; color:#222;">${value || '—'}</td>
-    </tr>`;
+    <div class="field">
+      <div class="field-label">${label}</div>
+      <div class="field-value">${value}</div>
+    </div>`;
 }
 
 function buildHtml(v, score) {
-  const priorPts = score.active_points || 0;   // snapshot at time of logging
-  const priorTier= getTier(priorPts);
-  const newTotal = priorPts + v.points;        // math always based on stored snapshot
-  const newTier  = getTier(newTotal);
-  const tierChange = priorTier.label !== newTier.label;
-
-  const generatedAt = new Date().toLocaleString('en-US', { timeZone: 'America/Chicago', dateStyle: 'full', timeStyle: 'short' });
+  const priorPts  = score.active_points  || 0;
+  const priorTier = getTier(priorPts);
+  const newTotal  = priorPts + v.points;
+  const newTier   = getTier(newTotal);
+  const escalated = priorTier.label !== newTier.label;
+  const genAt     = new Date().toLocaleString('en-US', {
+    timeZone: 'America/Chicago', dateStyle: 'full', timeStyle: 'short',
+  });
+  const docId = `CPAS-${v.id.toString().padStart(5, '0')}`;
 
   return `<!DOCTYPE html>
 <html lang="en">
@@ -41,128 +51,499 @@ function buildHtml(v, score) {
 <meta charset="UTF-8" />
 <style>
   * { box-sizing: border-box; margin: 0; padding: 0; }
-  body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px; color: #222; background: #fff; }
-  .header { background: linear-gradient(135deg, #000000, #151622); color: white; padding: 22px 32px; display: flex; align-items: center; justify-content: space-between; }
-  .header-left { display: flex; align-items: center; }
-  .logo { height: 28px; margin-right: 12px; }
-  .header h1 { font-size: 20px; letter-spacing: 0.5px; }
-  .header p  { font-size: 11px; opacity: 0.85; margin-top: 3px; }
-  .doc-id { text-align: right; font-size: 11px; opacity: 0.8; }
-  .section { margin: 20px 0; }
-  .section-title { font-size: 14px; font-weight: 700; color: white; background: #000000; padding: 8px 14px; border-radius: 4px 4px 0 0; margin-bottom: 0; }
-  table { width: 100%; border-collapse: collapse; border: 1px solid #ddd; border-top: none; }
-  .score-box { display: flex; gap: 20px; flex-wrap: wrap; background: #f8f9fa; border: 1px solid #ddd; border-radius: 6px; padding: 16px 20px; margin: 20px 0; }
-  .score-cell { flex: 1; min-width: 120px; text-align: center; }
-  .score-num { font-size: 28px; font-weight: 800; }
-  .score-lbl { font-size: 11px; color: #666; margin-top: 2px; }
-  .tier-badge { display: inline-block; padding: 5px 14px; border-radius: 14px; font-size: 12px; font-weight: 700; border: 2px solid currentColor; }
-  .tier-change { background: #fff3cd; border: 2px solid #ffc107; border-radius: 6px; padding: 12px 16px; margin: 16px 0; font-size: 12px; color: #856404; }
-  .points-display { background: #fff3cd; border: 2px solid #ffc107; border-radius: 6px; padding: 16px; margin: 16px 0; text-align: center; }
-  .points-display .pts { font-size: 36px; font-weight: 800; color: #d4af37; }
-  .points-display .lbl { font-size: 12px; color: #666; }
-  .sig-section { margin-top: 50px; page-break-inside: avoid; }
-  .sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 32px; }
-  .sig-block { border-top: 1.5px solid #333; padding-top: 10px; min-height: 80px; }
-  .sig-label { font-size: 11px; color: #555; font-weight: 600; }
-  .sig-date-block { border-top: 1.5px solid #333; padding-top: 10px; min-height: 60px; margin-top: 36px; }
-  .footer-bar { margin-top: 40px; padding: 10px 0; border-top: 2px solid #000000; font-size: 10px; color: #888; text-align: center; }
-  .confidential { background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; padding: 6px 12px; font-size: 11px; color: #721c24; font-weight: 600; text-align: center; margin-bottom: 16px; }
-  .notice { background: #e7f3ff; border-left: 4px solid #2196F3; padding: 10px 14px; margin: 16px 0; font-size: 12px; }
-  .policy-context { background: #f8f9fa; border-left: 3px solid #667eea; padding: 12px 16px; margin: 12px 0; font-size: 12px; color: #444; border-radius: 4px; }
+
+  body {
+    font-family: -apple-system, 'Segoe UI', Arial, sans-serif;
+    font-size: 13px;
+    color: #1a1a2e;
+    background: #fff;
+    line-height: 1.5;
+  }
+
+  /* ── HEADER ── */
+  .header {
+    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 60%, #16213e 100%);
+    padding: 24px 36px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 3px solid #d4af37;
+  }
+  .header-left { display: flex; align-items: center; gap: 16px; }
+  .logo { height: 36px; }
+  .header-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: #ffffff;
+    letter-spacing: 0.3px;
+  }
+  .header-sub {
+    font-size: 11px;
+    color: #94a3b8;
+    margin-top: 3px;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+  }
+  .header-right { text-align: right; }
+  .doc-id {
+    font-size: 13px;
+    font-weight: 700;
+    color: #d4af37;
+    letter-spacing: 0.5px;
+  }
+  .doc-meta {
+    font-size: 10px;
+    color: #64748b;
+    margin-top: 4px;
+  }
+
+  /* ── CONFIDENTIAL BANNER ── */
+  .confidential-bar {
+    background: #fef2f2;
+    border-bottom: 1px solid #fecaca;
+    padding: 7px 36px;
+    font-size: 11px;
+    font-weight: 700;
+    color: #991b1b;
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+    text-align: center;
+  }
+
+  /* ── BODY WRAPPER ── */
+  .body { padding: 28px 36px; }
+
+  /* ── SECTION ── */
+  .section { margin-bottom: 24px; }
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 12px;
+  }
+  .section-title {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: #64748b;
+  }
+  .section-rule {
+    flex: 1;
+    height: 1px;
+    background: #e2e8f0;
+  }
+
+  /* ── FIELD GRID ── */
+  .field-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px 32px;
+  }
+  .field-grid.single { grid-template-columns: 1fr; }
+  .field { padding: 0; }
+  .field-label {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: #94a3b8;
+    margin-bottom: 2px;
+  }
+  .field-value {
+    font-size: 13px;
+    color: #1e293b;
+    font-weight: 500;
+  }
+  .field-value.prominent {
+    font-size: 15px;
+    font-weight: 700;
+    color: #0f172a;
+  }
+
+  /* ── DETAIL BOX ── */
+  .detail-box {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-left: 4px solid #667eea;
+    border-radius: 6px;
+    padding: 14px 16px;
+    margin-top: 12px;
+    font-size: 12px;
+    color: #374151;
+    line-height: 1.6;
+  }
+  .detail-box-label {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: #94a3b8;
+    margin-bottom: 6px;
+  }
+
+  /* ── SCORE CARD ── */
+  .score-card {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 10px;
+    overflow: hidden;
+    margin-top: 4px;
+  }
+  .score-cell {
+    flex: 1;
+    padding: 18px 16px;
+    text-align: center;
+    border-right: 1px solid #e2e8f0;
+  }
+  .score-cell:last-child { border-right: none; }
+  .score-cell.operator {
+    flex: 0 0 48px;
+    font-size: 24px;
+    font-weight: 200;
+    color: #cbd5e1;
+  }
+  .score-num {
+    font-size: 32px;
+    font-weight: 800;
+    line-height: 1;
+  }
+  .score-label {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: #94a3b8;
+    margin-top: 4px;
+  }
+  .tier-badge {
+    display: inline-block;
+    margin-top: 8px;
+    padding: 3px 10px;
+    border-radius: 12px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.3px;
+  }
+
+  /* ── POINTS PILL ── */
+  .points-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    background: #fffbeb;
+    border: 2px solid #d4af37;
+    border-radius: 8px;
+    padding: 12px 24px;
+    margin-bottom: 16px;
+  }
+  .points-pill-num {
+    font-size: 42px;
+    font-weight: 900;
+    color: #d4af37;
+    line-height: 1;
+  }
+  .points-pill-label {
+    font-size: 12px;
+    color: #92400e;
+    line-height: 1.4;
+  }
+  .points-pill-label strong { display: block; font-size: 14px; }
+
+  /* ── ESCALATION ALERT ── */
+  .escalation-alert {
+    background: #fef9c3;
+    border: 1.5px solid #eab308;
+    border-radius: 8px;
+    padding: 12px 16px;
+    margin-top: 14px;
+    font-size: 12px;
+    color: #713f12;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .escalation-icon { font-size: 18px; }
+
+  /* ── TIER TABLE ── */
+  .tier-table { width: 100%; border-collapse: collapse; }
+  .tier-table th {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: #94a3b8;
+    text-align: left;
+    padding: 6px 12px;
+    border-bottom: 2px solid #e2e8f0;
+  }
+  .tier-table td {
+    padding: 7px 12px;
+    font-size: 12px;
+    border-bottom: 1px solid #f1f5f9;
+  }
+  .tier-table tr.current-tier td {
+    background: #fffbeb;
+    font-weight: 700;
+  }
+  .tier-dot {
+    display: inline-block;
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    margin-right: 6px;
+    vertical-align: middle;
+  }
+
+  /* ── NOTICE ── */
+  .notice {
+    background: #eff6ff;
+    border-left: 4px solid #3b82f6;
+    border-radius: 0 6px 6px 0;
+    padding: 12px 16px;
+    font-size: 11.5px;
+    color: #1e40af;
+    line-height: 1.6;
+  }
+
+  /* ── SIGNATURE ── */
+  .sig-intro {
+    font-size: 11.5px;
+    color: #475569;
+    line-height: 1.7;
+    margin-bottom: 28px;
+  }
+  .sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
+  .sig-block { }
+  .sig-line {
+    border-bottom: 1.5px solid #334155;
+    margin-bottom: 8px;
+    min-height: 52px;
+  }
+  .sig-line-label {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: #64748b;
+  }
+  .sig-date-line {
+    border-bottom: 1.5px solid #334155;
+    margin-bottom: 8px;
+    margin-top: 20px;
+    min-height: 36px;
+  }
+
+  /* ── FOOTER BAR ── */
+  .footer-bar {
+    margin-top: 32px;
+    padding: 10px 0 0;
+    border-top: 1px solid #e2e8f0;
+    font-size: 10px;
+    color: #94a3b8;
+    display: flex;
+    justify-content: space-between;
+  }
 </style>
 </head>
 <body>
 
 <div class="header">
   <div class="header-left">
-    <img src="/static/mpm-logo.png" class="logo" />
+    <img src="data:image/png;base64,${LOGO_B64}" class="logo" />
     <div>
-      <h1>CPAS Individual Violation Record</h1>
-      <p>Message Point Media — Comprehensive Professional Accountability System</p>
+      <div class="header-title">CPAS Violation Record</div>
+      <div class="header-sub">Comprehensive Professional Accountability System</div>
     </div>
   </div>
-  <div class="doc-id">Document ID: CPAS-${v.id.toString().padStart(5,'0')}<br />Generated: ${generatedAt}</div>
+  <div class="header-right">
+    <div class="doc-id">${docId}</div>
+    <div class="doc-meta">Generated ${genAt}</div>
+  </div>
 </div>
 
-<div style="padding: 0 4px;">
+<div class="confidential-bar">⚑ Confidential — Authorized HR &amp; Management Use Only</div>
 
-<div class="confidential" style="margin-top:16px;">⚠ CONFIDENTIAL — For authorized HR and management use only</div>
+<div class="body">
 
-<div class="section">
-  <div class="section-title">Employee Information</div>
-  <table>
-    ${row('Employee Name', `<strong>${v.employee_name}</strong>`)}
-    ${row('Department', v.department)}
-    ${row('Supervisor', v.supervisor)}
-    ${row('Witness / Documenting Officer', v.witness_name)}
-  </table>
-</div>
-
-<div class="section">
-  <div class="section-title">Violation Details</div>
-  <table>
-    ${row('Violation Type', `<strong>${v.violation_name}</strong>`)}
-    ${row('Category', v.category)}
-    ${row('Policy Reference', 'Chapter 4, Section 5 — Comprehensive Professional Accountability System (CPAS)')}
-    ${row('Incident Date / Time', formatDateTime(v.incident_date, v.incident_time))}
-    ${v.location ? row('Location / Context', v.location) : ''}
-    ${row('Submitted By', v.submitted_by || 'System')}
-  </table>
-  ${v.details ? `<div class="policy-context"><strong>Incident Details:</strong><br />${v.details}</div>` : ''}
-</div>
-
-<div class="section">
-  <div class="section-title">CPAS Point Assessment</div>
-  <div class="points-display"><div class="pts">${v.points}</div><div class="lbl">Points Assessed — This Violation</div></div>
-  <div class="score-box">
-    <div class="score-cell">
-      <div class="score-num" style="color:${priorTier.color};">${priorPts}</div>
-      <div class="score-lbl">Active Points (Prior)</div>
-      <div style="margin-top:6px;"><span class="tier-badge" style="color:${priorTier.color};">${priorTier.label}</span></div>
+  <!-- Employee -->
+  <div class="section">
+    <div class="section-header">
+      <div class="section-title">Employee Information</div>
+      <div class="section-rule"></div>
     </div>
-    <div class="score-cell" style="font-size:28px; font-weight:300; color:#ccc; line-height:1.8;">+</div>
-    <div class="score-cell">
-      <div class="score-num" style="color:#d4af37;">${v.points}</div>
-      <div class="score-lbl">Points — This Violation</div>
-    </div>
-    <div class="score-cell" style="font-size:28px; font-weight:300; color:#ccc; line-height:1.8;">=</div>
-    <div class="score-cell">
-      <div class="score-num" style="color:${newTier.color};">${newTotal}</div>
-      <div class="score-lbl">New Active Total</div>
-      <div style="margin-top:6px;"><span class="tier-badge" style="color:${newTier.color};">${newTier.label}</span></div>
+    <div class="field-grid">
+      <div class="field">
+        <div class="field-label">Employee Name</div>
+        <div class="field-value prominent">${v.employee_name}</div>
+      </div>
+      <div class="field">
+        <div class="field-label">Department</div>
+        <div class="field-value">${v.department || '—'}</div>
+      </div>
+      <div class="field">
+        <div class="field-label">Supervisor</div>
+        <div class="field-value">${v.supervisor || '—'}</div>
+      </div>
+      <div class="field">
+        <div class="field-label">Witness / Documenting Officer</div>
+        <div class="field-value">${v.witness_name || '—'}</div>
+      </div>
     </div>
   </div>
-  ${tierChange ? `<div class="tier-change"><strong>⚠ Tier Escalation:</strong> This violation advances the employee from <strong>${priorTier.label}</strong> to <strong>${newTier.label}</strong>.</div>` : ''}
-</div>
 
-<div class="section">
-  <div class="section-title">CPAS Tier Reference</div>
-  <table>
-    <tr style="background:#f8f9fa;"><th style="padding:7px 12px; text-align:left; font-size:12px;">Points</th><th style="padding:7px 12px; text-align:left; font-size:12px;">Tier</th></tr>
-    ${TIERS.map(t => `<tr style="${newTotal >= t.min && newTotal <= t.max ? 'background:#fff3cd; font-weight:700;' : ''}"><td style="padding:6px 12px; border-bottom:1px solid #eee; font-size:12px;">${t.min === 30 ? '30+' : t.min + '–' + t.max}</td><td style="padding:6px 12px; border-bottom:1px solid #eee; font-size:12px; color:${t.color};">${t.label}</td></tr>`).join('')}
-  </table>
-</div>
+  <!-- Violation -->
+  <div class="section">
+    <div class="section-header">
+      <div class="section-title">Violation Details</div>
+      <div class="section-rule"></div>
+    </div>
+    <div class="field-grid">
+      <div class="field">
+        <div class="field-label">Violation</div>
+        <div class="field-value prominent">${v.violation_name}</div>
+      </div>
+      <div class="field">
+        <div class="field-label">Category</div>
+        <div class="field-value">${v.category}</div>
+      </div>
+      <div class="field">
+        <div class="field-label">Incident Date / Time</div>
+        <div class="field-value">${fmtDT(v.incident_date, v.incident_time)}</div>
+      </div>
+      <div class="field">
+        <div class="field-label">Submitted By</div>
+        <div class="field-value">${v.submitted_by || 'System'}</div>
+      </div>
+      ${v.location ? `
+      <div class="field" style="grid-column: 1 / -1;">
+        <div class="field-label">Location / Context</div>
+        <div class="field-value">${v.location}</div>
+      </div>` : ''}
+    </div>
+    ${v.details ? `
+    <div class="detail-box">
+      <div class="detail-box-label">Incident Notes</div>
+      ${v.details}
+    </div>` : ''}
+  </div>
 
-<div class="notice"><strong>Employee Notice:</strong> CPAS points remain active for a rolling 90-day period from the date of each incident. Accumulation of points may result in tier escalation and associated consequences as outlined in the Employee Handbook.</div>
+  <!-- Points -->
+  <div class="section">
+    <div class="section-header">
+      <div class="section-title">CPAS Point Assessment</div>
+      <div class="section-rule"></div>
+    </div>
 
-<div class="sig-section">
-  <div class="section-title" style="background:#000000;">Acknowledgement & Signatures</div>
-  <div style="padding: 20px 0;">
-    <p style="font-size:12px; color:#555; margin-bottom:32px; line-height:1.6;">By signing below, the employee acknowledges receipt of this violation record. Acknowledgement does not imply agreement. The employee may submit a written response within 5 business days.</p>
+    <div class="points-pill">
+      <div class="points-pill-num">${v.points}</div>
+      <div class="points-pill-label">
+        <strong>Points Assessed</strong>
+        This violation
+      </div>
+    </div>
+
+    <div class="score-card">
+      <div class="score-cell">
+        <div class="score-num" style="color:${priorTier.color};">${priorPts}</div>
+        <div class="score-label">Prior Active Points</div>
+        <span class="tier-badge" style="background:${priorTier.bg}; color:${priorTier.color};">
+          ${priorTier.label}
+        </span>
+      </div>
+      <div class="score-cell operator">+</div>
+      <div class="score-cell">
+        <div class="score-num" style="color:#d4af37;">${v.points}</div>
+        <div class="score-label">This Violation</div>
+      </div>
+      <div class="score-cell operator">=</div>
+      <div class="score-cell">
+        <div class="score-num" style="color:${newTier.color};">${newTotal}</div>
+        <div class="score-label">New Active Total</div>
+        <span class="tier-badge" style="background:${newTier.bg}; color:${newTier.color};">
+          ${newTier.label}
+        </span>
+      </div>
+    </div>
+
+    ${escalated ? `
+    <div class="escalation-alert">
+      <span class="escalation-icon">⚠</span>
+      <div>
+        <strong>Tier Escalation:</strong>
+        This violation advances the employee from <strong>${priorTier.label}</strong>
+        to <strong>${newTier.label}</strong>.
+      </div>
+    </div>` : ''}
+  </div>
+
+  <!-- Tier Reference -->
+  <div class="section">
+    <div class="section-header">
+      <div class="section-title">CPAS Tier Reference</div>
+      <div class="section-rule"></div>
+    </div>
+    <table class="tier-table">
+      <thead>
+        <tr>
+          <th>Points</th>
+          <th>Tier &amp; Standing</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${TIERS.map(t => {
+          const active = newTotal >= t.min && newTotal <= t.max;
+          const range  = t.min === 30 ? '30+' : `${t.min}–${t.max}`;
+          return `<tr class="${active ? 'current-tier' : ''}">
+            <td>${active ? '▶ ' : ''}${range}</td>
+            <td>
+              <span class="tier-dot" style="background:${t.color === '#ffffff' ? t.bg : t.color};"></span>
+              ${t.label}
+              ${active ? '<strong> ← Current</strong>' : ''}
+            </td>
+          </tr>`;
+        }).join('')}
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Notice -->
+  <div class="notice" style="margin-bottom:24px;">
+    <strong>Employee Notice:</strong> CPAS points remain active for a rolling 90-day period from the date of each incident.
+    Accumulation of points may result in tier escalation and associated consequences as outlined in the Employee Handbook.
+    The employee may submit a written response within 5 business days of receiving this document.
+  </div>
+
+  <!-- Signatures -->
+  <div class="section">
+    <div class="section-header">
+      <div class="section-title">Acknowledgement &amp; Signatures</div>
+      <div class="section-rule"></div>
+    </div>
+    <p class="sig-intro">
+      By signing below, the employee acknowledges receipt of this violation record.
+      Acknowledgement does not imply agreement with the violation as documented.
+    </p>
     <div class="sig-grid">
-      <div>
-        <div class="sig-block"><div class="sig-label">Employee Signature</div></div>
-        <div class="sig-date-block"><div class="sig-label">Date</div></div>
+      <div class="sig-block">
+        <div class="sig-line"></div>
+        <div class="sig-line-label">Employee Signature</div>
+        <div class="sig-date-line"></div>
+        <div class="sig-line-label">Date</div>
       </div>
-      <div>
-        <div class="sig-block"><div class="sig-label">Supervisor / Documenting Officer Signature</div></div>
-        <div class="sig-date-block"><div class="sig-label">Date</div></div>
+      <div class="sig-block">
+        <div class="sig-line"></div>
+        <div class="sig-line-label">Supervisor / Documenting Officer Signature</div>
+        <div class="sig-date-line"></div>
+        <div class="sig-line-label">Date</div>
       </div>
     </div>
   </div>
-</div>
 
-<div class="footer-bar">CPAS Violation Record — Document ID: CPAS-${v.id.toString().padStart(5,'0')} &nbsp;|&nbsp; ${v.employee_name} &nbsp;|&nbsp; Incident: ${v.incident_date} &nbsp;|&nbsp; Message Point Media Internal Use Only</div>
+  <div class="footer-bar">
+    <span>${docId} &nbsp;·&nbsp; ${v.employee_name} &nbsp;·&nbsp; Incident: ${v.incident_date}</span>
+    <span>Message Point Media — Internal Use Only</span>
+  </div>
 
 </div>
 </body>
-- 
2.52.0


From bcf0e3f3d14b912961755b083497ca4fa40f161e Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Fri, 6 Mar 2026 23:40:49 -0600
Subject: [PATCH 14/86] fix: reduce PDF margins and remove redundant puppeteer
 footer

---
 pdf/generator.js | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

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


From 9b6f2353be7aee7c06a229bd73c6e1396faa9b07 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:22:01 -0600
Subject: [PATCH 15/86] feat(db): add violation_amendments and audit_log tables

---
 db/database.js | 34 +++++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/db/database.js b/db/database.js
index a29416f..cba0200 100755
--- a/db/database.js
+++ b/db/database.js
@@ -13,12 +13,12 @@ db.pragma('foreign_keys = ON');
 const schema = fs.readFileSync(path.join(__dirname, 'schema.sql'), 'utf8');
 db.exec(schema);
 
-// ── Migrations for existing DBs ─────────────────────────────────────────────
+// ── Migrations for existing DBs ──────────────────────────────────────────────
 const cols = db.prepare('PRAGMA table_info(violations)').all().map(c => c.name);
-if (!cols.includes('negated'))              db.exec("ALTER TABLE violations ADD COLUMN negated INTEGER NOT NULL DEFAULT 0");
-if (!cols.includes('negated_at'))           db.exec("ALTER TABLE violations ADD COLUMN negated_at DATETIME");
-if (!cols.includes('prior_active_points'))  db.exec("ALTER TABLE violations ADD COLUMN prior_active_points INTEGER");
-if (!cols.includes('prior_tier_label'))     db.exec("ALTER TABLE violations ADD COLUMN prior_tier_label TEXT");
+if (!cols.includes('negated'))             db.exec("ALTER TABLE violations ADD COLUMN negated INTEGER NOT NULL DEFAULT 0");
+if (!cols.includes('negated_at'))          db.exec("ALTER TABLE violations ADD COLUMN negated_at DATETIME");
+if (!cols.includes('prior_active_points')) db.exec("ALTER TABLE violations ADD COLUMN prior_active_points INTEGER");
+if (!cols.includes('prior_tier_label'))    db.exec("ALTER TABLE violations ADD COLUMN prior_tier_label TEXT");
 
 // Ensure resolutions table exists
 db.exec(`CREATE TABLE IF NOT EXISTS violation_resolutions (
@@ -30,6 +30,30 @@ db.exec(`CREATE TABLE IF NOT EXISTS violation_resolutions (
     created_at      DATETIME DEFAULT CURRENT_TIMESTAMP
 )`);
 
+// ── Feature: Violation Amendments ────────────────────────────────────────────
+// Stores a field-level diff every time a violation's editable fields are changed.
+db.exec(`CREATE TABLE IF NOT EXISTS violation_amendments (
+    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+    violation_id INTEGER NOT NULL REFERENCES violations(id) ON DELETE CASCADE,
+    changed_by   TEXT,
+    field_name   TEXT    NOT NULL,
+    old_value    TEXT,
+    new_value    TEXT,
+    created_at   DATETIME DEFAULT CURRENT_TIMESTAMP
+)`);
+
+// ── Feature: Audit Log ───────────────────────────────────────────────────────
+// Append-only record of every write action across the system.
+db.exec(`CREATE TABLE IF NOT EXISTS audit_log (
+    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+    action       TEXT    NOT NULL,
+    entity_type  TEXT    NOT NULL,
+    entity_id    INTEGER,
+    performed_by TEXT,
+    details      TEXT,
+    created_at   DATETIME DEFAULT CURRENT_TIMESTAMP
+)`);
+
 // Recreate view so it always filters negated rows
 db.exec(`DROP VIEW IF EXISTS active_cpas_scores;
 CREATE VIEW active_cpas_scores AS
-- 
2.52.0


From 5004c569152f9599ae0aaaaeacaeda1552a28520 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:23:04 -0600
Subject: [PATCH 16/86] feat: employee edit/merge, violation amendment, audit
 log endpoints

---
 server.js | 177 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 167 insertions(+), 10 deletions(-)

diff --git a/server.js b/server.js
index f442834..0a33626 100755
--- a/server.js
+++ b/server.js
@@ -11,10 +11,23 @@ app.use(cors());
 app.use(express.json());
 app.use(express.static(path.join(__dirname, 'client', 'dist')));
 
+// ── Audit helper ─────────────────────────────────────────────────────────────
+function audit(action, entityType, entityId, performedBy, details) {
+  try {
+    db.prepare(`
+      INSERT INTO audit_log (action, entity_type, entity_id, performed_by, details)
+      VALUES (?, ?, ?, ?, ?)
+    `).run(action, entityType, entityId || null, performedBy || null,
+      typeof details === 'object' ? JSON.stringify(details) : (details || null));
+  } catch (e) {
+    console.error('[AUDIT]', e.message);
+  }
+}
+
 // Health
 app.get('/api/health', (req, res) => res.json({ status: 'ok', timestamp: new Date().toISOString() }));
 
-// Employees
+// ── Employees ─────────────────────────────────────────────────────────────────
 app.get('/api/employees', (req, res) => {
   const rows = db.prepare('SELECT id, name, department, supervisor FROM employees ORDER BY name ASC').all();
   res.json(rows);
@@ -33,9 +46,72 @@ app.post('/api/employees', (req, res) => {
   }
   const result = db.prepare('INSERT INTO employees (name, department, supervisor) VALUES (?, ?, ?)')
     .run(name, department || null, supervisor || null);
+  audit('employee_created', 'employee', result.lastInsertRowid, null, { name });
   res.status(201).json({ id: result.lastInsertRowid, name, department, supervisor });
 });
 
+// ── Employee Edit ─────────────────────────────────────────────────────────────
+// PATCH /api/employees/:id  — update name, department, or supervisor
+app.patch('/api/employees/:id', (req, res) => {
+  const id  = parseInt(req.params.id);
+  const emp = db.prepare('SELECT * FROM employees WHERE id = ?').get(id);
+  if (!emp) return res.status(404).json({ error: 'Employee not found' });
+
+  const { name, department, supervisor, performed_by } = req.body;
+
+  // Prevent name collision with a different employee
+  if (name && name.trim() !== emp.name) {
+    const clash = db.prepare('SELECT id FROM employees WHERE LOWER(name) = LOWER(?) AND id != ?').get(name.trim(), id);
+    if (clash) return res.status(409).json({ error: 'An employee with that name already exists', conflictId: clash.id });
+  }
+
+  const newName       = (name       || emp.name).trim();
+  const newDept       = department  !== undefined ? (department  || null) : emp.department;
+  const newSupervisor = supervisor  !== undefined ? (supervisor  || null) : emp.supervisor;
+
+  db.prepare('UPDATE employees SET name = ?, department = ?, supervisor = ? WHERE id = ?')
+    .run(newName, newDept, newSupervisor, id);
+
+  audit('employee_edited', 'employee', id, performed_by, {
+    before: { name: emp.name, department: emp.department, supervisor: emp.supervisor },
+    after:  { name: newName,  department: newDept,        supervisor: newSupervisor  },
+  });
+
+  res.json({ id, name: newName, department: newDept, supervisor: newSupervisor });
+});
+
+// ── 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);
+  const { source_id, performed_by } = req.body;
+  if (!source_id) return res.status(400).json({ error: 'source_id is required' });
+
+  const target = db.prepare('SELECT * FROM employees WHERE id = ?').get(targetId);
+  const source = db.prepare('SELECT * FROM employees WHERE id = ?').get(source_id);
+  if (!target) return res.status(404).json({ error: 'Target employee not found' });
+  if (!source) return res.status(404).json({ error: 'Source employee not found' });
+  if (targetId === parseInt(source_id)) return res.status(400).json({ error: 'Cannot merge an employee into themselves' });
+
+  const mergeTransaction = db.transaction(() => {
+    // Move all violations
+    const moved = db.prepare('UPDATE violations SET employee_id = ? WHERE employee_id = ?').run(targetId, source_id);
+    // Delete the source employee
+    db.prepare('DELETE FROM employees WHERE id = ?').run(source_id);
+    return moved.changes;
+  });
+
+  const violationsMoved = mergeTransaction();
+
+  audit('employee_merged', 'employee', targetId, performed_by, {
+    source: { id: source.id, name: source.name },
+    target: { id: target.id, name: target.name },
+    violations_reassigned: violationsMoved,
+  });
+
+  res.json({ success: true, violations_reassigned: violationsMoved });
+});
+
 // Employee score (current snapshot)
 app.get('/api/employees/:id/score', (req, res) => {
   const row = db.prepare('SELECT * FROM active_cpas_scores WHERE employee_id = ?').get(req.params.id);
@@ -55,12 +131,13 @@ app.get('/api/dashboard', (req, res) => {
   res.json(rows);
 });
 
-// Violation history (per employee) with resolutions
+// Violation history (per employee) with resolutions + amendment count
 app.get('/api/violations/employee/:id', (req, res) => {
   const limit = parseInt(req.query.limit) || 50;
   const rows  = db.prepare(`
     SELECT v.*, r.resolution_type, r.details AS resolution_details,
-           r.resolved_by, r.created_at AS resolved_at
+           r.resolved_by, r.created_at AS resolved_at,
+           (SELECT COUNT(*) FROM violation_amendments a WHERE a.violation_id = v.id) AS amendment_count
     FROM violations v
     LEFT JOIN violation_resolutions r ON r.violation_id = v.id
     WHERE v.employee_id = ?
@@ -70,6 +147,14 @@ app.get('/api/violations/employee/:id', (req, res) => {
   res.json(rows);
 });
 
+// ── 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
+  `).all(req.params.id);
+  res.json(rows);
+});
+
 // Helper: compute prior_active_points at time of insert
 function getPriorActivePoints(employeeId, incidentDate) {
   const row = db.prepare(
@@ -113,10 +198,61 @@ app.post('/api/violations', (req, res) => {
     priorPts
   );
 
+  audit('violation_created', 'violation', result.lastInsertRowid, submitted_by, {
+    employee_id, violation_type, points: ptsInt, incident_date,
+  });
+
   res.status(201).json({ id: result.lastInsertRowid });
 });
 
-// ── Negate a violation ──────────────────────────────────────────────────────
+// ── 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'];
+
+app.patch('/api/violations/:id/amend', (req, res) => {
+  const id        = parseInt(req.params.id);
+  const { changed_by, ...updates } = req.body;
+
+  const violation = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
+  if (!violation) return res.status(404).json({ error: 'Violation not found' });
+  if (violation.negated) return res.status(400).json({ error: 'Cannot amend a negated violation' });
+
+  // Only allow whitelisted fields to be amended
+  const allowed = Object.fromEntries(
+    Object.entries(updates).filter(([k]) => AMENDABLE_FIELDS.includes(k))
+  );
+  if (Object.keys(allowed).length === 0) {
+    return res.status(400).json({ error: 'No amendable fields provided', amendable: AMENDABLE_FIELDS });
+  }
+
+  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];
+      if (String(oldVal) !== String(newVal)) {
+        insertAmendment.run(id, changed_by || null, field, oldVal ?? null, newVal ?? null);
+      }
+    }
+  });
+
+  amendTransaction();
+
+  audit('violation_amended', 'violation', id, changed_by, { fields: Object.keys(allowed) });
+
+  const updated = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
+  res.json(updated);
+});
+
+// ── Negate a violation ────────────────────────────────────────────────────────
 app.patch('/api/violations/:id/negate', (req, res) => {
   const { resolution_type, details, resolved_by } = req.body;
   const id = req.params.id;
@@ -124,10 +260,8 @@ app.patch('/api/violations/:id/negate', (req, res) => {
   const violation = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
   if (!violation) return res.status(404).json({ error: 'Violation not found' });
 
-  // Mark negated
   db.prepare('UPDATE violations SET negated = 1 WHERE id = ?').run(id);
 
-  // Upsert resolution record
   const existing = db.prepare('SELECT id FROM violation_resolutions WHERE violation_id = ?').get(id);
   if (existing) {
     db.prepare(`
@@ -142,10 +276,11 @@ app.patch('/api/violations/:id/negate', (req, res) => {
     `).run(id, resolution_type || 'Resolved', details || null, resolved_by || null);
   }
 
+  audit('violation_negated', 'violation', id, resolved_by, { resolution_type });
   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;
 
@@ -155,24 +290,46 @@ app.patch('/api/violations/:id/restore', (req, res) => {
   db.prepare('UPDATE violations SET negated = 0 WHERE id = ?').run(id);
   db.prepare('DELETE FROM violation_resolutions WHERE violation_id = ?').run(id);
 
+  audit('violation_restored', 'violation', id, req.body?.performed_by, {});
   res.json({ success: true });
 });
 
-// ── Hard delete a violation ─────────────────────────────────────────────────
+// ── Hard delete a violation ───────────────────────────────────────────────────
 app.delete('/api/violations/:id', (req, res) => {
   const id = req.params.id;
 
   const violation = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
   if (!violation) return res.status(404).json({ error: 'Violation not found' });
 
-  // Delete resolution first (FK safety)
   db.prepare('DELETE FROM violation_resolutions WHERE violation_id = ?').run(id);
   db.prepare('DELETE FROM violations WHERE id = ?').run(id);
 
+  audit('violation_deleted', 'violation', id, req.body?.performed_by, {
+    violation_type: violation.violation_type, employee_id: violation.employee_id,
+  });
   res.json({ success: true });
 });
 
-// ── PDF endpoint ─────────────────────────────────────────────────────────────
+// ── 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;
+  const type   = req.query.entity_type;
+  const id     = req.query.entity_id;
+
+  let sql    = 'SELECT * FROM audit_log';
+  const args = [];
+  const where = [];
+  if (type) { where.push('entity_type = ?'); args.push(type); }
+  if (id)   { where.push('entity_id = ?');   args.push(id); }
+  if (where.length) sql += ' WHERE ' + where.join(' AND ');
+  sql += ' ORDER BY created_at DESC LIMIT ? OFFSET ?';
+  args.push(limit, offset);
+
+  res.json(db.prepare(sql).all(...args));
+});
+
+// ── PDF endpoint ──────────────────────────────────────────────────────────────
 app.get('/api/violations/:id/pdf', async (req, res) => {
   try {
     const violation = db.prepare(`
-- 
2.52.0


From ee91a16506ea0fc3ba166a41f5a2bc937e42f5c7 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:23:39 -0600
Subject: [PATCH 17/86] =?UTF-8?q?feat:=20EditEmployeeModal=20=E2=80=94=20e?=
 =?UTF-8?q?dit=20name/dept/supervisor=20and=20merge=20duplicates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/EditEmployeeModal.jsx | 189 ++++++++++++++++++++
 1 file changed, 189 insertions(+)
 create mode 100644 client/src/components/EditEmployeeModal.jsx

diff --git a/client/src/components/EditEmployeeModal.jsx b/client/src/components/EditEmployeeModal.jsx
new file mode 100644
index 0000000..a438e1b
--- /dev/null
+++ b/client/src/components/EditEmployeeModal.jsx
@@ -0,0 +1,189 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const s = {
+  overlay: {
+    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.8)',
+    zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center',
+  },
+  modal: {
+    background: '#111217', color: '#f8f9fa', width: '480px', maxWidth: '95vw',
+    borderRadius: '10px', boxShadow: '0 8px 40px rgba(0,0,0,0.8)',
+    border: '1px solid #222', overflow: 'hidden',
+  },
+  header: {
+    background: 'linear-gradient(135deg, #000000, #151622)', color: 'white',
+    padding: '18px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+    borderBottom: '1px solid #222',
+  },
+  title: { fontSize: '15px', fontWeight: 700 },
+  closeBtn: {
+    background: 'none', border: 'none', color: 'white', fontSize: '20px',
+    cursor: 'pointer', lineHeight: 1,
+  },
+  body: { padding: '22px' },
+  tabs: { display: 'flex', gap: '4px', marginBottom: '20px' },
+  tab: (active) => ({
+    flex: 1, padding: '8px', borderRadius: '6px', cursor: 'pointer', fontSize: '12px',
+    fontWeight: 700, textAlign: 'center', border: '1px solid',
+    background: active ? '#1a1c2e' : 'none',
+    borderColor: active ? '#667eea' : '#2a2b3a',
+    color: active ? '#667eea' : '#777',
+  }),
+  label: { fontSize: '11px', color: '#9ca0b8', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '5px' },
+  input: {
+    width: '100%', background: '#0d0e14', border: '1px solid #2a2b3a', borderRadius: '6px',
+    color: '#f8f9fa', padding: '9px 12px', fontSize: '13px', marginBottom: '14px',
+    outline: 'none', boxSizing: 'border-box',
+  },
+  select: {
+    width: '100%', background: '#0d0e14', border: '1px solid #2a2b3a', borderRadius: '6px',
+    color: '#f8f9fa', padding: '9px 12px', fontSize: '13px', marginBottom: '14px',
+    outline: 'none', boxSizing: 'border-box',
+  },
+  row: { display: 'flex', gap: '10px', justifyContent: 'flex-end', marginTop: '6px' },
+  btn: (color, bg) => ({
+    padding: '8px 18px', borderRadius: '6px', fontWeight: 700, fontSize: '13px',
+    cursor: 'pointer', border: `1px solid ${color}`, color, background: bg || 'none',
+  }),
+  error: {
+    background: '#3c1114', border: '1px solid #f5c6cb', borderRadius: '6px',
+    padding: '10px 12px', fontSize: '12px', color: '#ffb3b8', marginBottom: '14px',
+  },
+  success: {
+    background: '#0a2e1f', border: '1px solid #0f5132', borderRadius: '6px',
+    padding: '10px 12px', fontSize: '12px', color: '#9ef7c1', marginBottom: '14px',
+  },
+  mergeWarning: {
+    background: '#2a1f00', border: '1px solid #7a5000', borderRadius: '6px',
+    padding: '12px', fontSize: '12px', color: '#ffc107', marginBottom: '14px', lineHeight: 1.5,
+  },
+};
+
+export default function EditEmployeeModal({ employee, onClose, onSaved }) {
+  const [tab, setTab] = useState('edit');
+
+  // Edit state
+  const [name, setName]             = useState(employee.name);
+  const [department, setDepartment] = useState(employee.department || '');
+  const [supervisor, setSupervisor] = useState(employee.supervisor || '');
+  const [editError, setEditError]   = useState('');
+  const [editSaving, setEditSaving] = useState(false);
+
+  // Merge state
+  const [allEmployees, setAllEmployees] = useState([]);
+  const [sourceId, setSourceId]         = useState('');
+  const [mergeError, setMergeError]     = useState('');
+  const [mergeResult, setMergeResult]   = useState(null);
+  const [merging, setMerging]           = useState(false);
+
+  useEffect(() => {
+    if (tab === 'merge') {
+      axios.get('/api/employees').then(r => setAllEmployees(r.data));
+    }
+  }, [tab]);
+
+  const handleEdit = async () => {
+    setEditError('');
+    setEditSaving(true);
+    try {
+      await axios.patch(`/api/employees/${employee.id}`, { name, department, supervisor });
+      onSaved();
+      onClose();
+    } catch (e) {
+      setEditError(e.response?.data?.error || 'Failed to save changes');
+    } finally {
+      setEditSaving(false);
+    }
+  };
+
+  const handleMerge = async () => {
+    if (!sourceId) return setMergeError('Select an employee to merge in');
+    setMergeError('');
+    setMerging(true);
+    try {
+      const r = await axios.post(`/api/employees/${employee.id}/merge`, { source_id: parseInt(sourceId) });
+      setMergeResult(r.data);
+      onSaved(); // refresh dashboard / parent list
+    } catch (e) {
+      setMergeError(e.response?.data?.error || 'Merge failed');
+    } finally {
+      setMerging(false);
+    }
+  };
+
+  const otherEmployees = allEmployees.filter(e => e.id !== employee.id);
+
+  return (
+    <div style={s.overlay} onClick={e => e.target === e.currentTarget && onClose()}>
+      <div style={s.modal}>
+        <div style={s.header}>
+          <div style={s.title}>Edit Employee</div>
+          <button style={s.closeBtn} onClick={onClose}>✕</button>
+        </div>
+        <div style={s.body}>
+          <div style={s.tabs}>
+            <button style={s.tab(tab === 'edit')}  onClick={() => setTab('edit')}>Edit Details</button>
+            <button style={s.tab(tab === 'merge')} onClick={() => setTab('merge')}>Merge Duplicate</button>
+          </div>
+
+          {tab === 'edit' && (
+            <>
+              {editError && <div style={s.error}>{editError}</div>}
+              <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" />
+              <div style={s.label}>Supervisor</div>
+              <input style={s.input} value={supervisor} onChange={e => setSupervisor(e.target.value)} placeholder="Optional" />
+              <div style={s.row}>
+                <button style={s.btn('#888')} onClick={onClose}>Cancel</button>
+                <button style={s.btn('#fff', '#667eea')} onClick={handleEdit} disabled={editSaving}>
+                  {editSaving ? 'Saving…' : 'Save Changes'}
+                </button>
+              </div>
+            </>
+          )}
+
+          {tab === 'merge' && (
+            <>
+              {mergeResult ? (
+                <div style={s.success}>
+                  ✓ Merge complete — {mergeResult.violations_reassigned} violation{mergeResult.violations_reassigned !== 1 ? 's' : ''} reassigned
+                  to <strong>{employee.name}</strong>. The duplicate record has been removed.
+                </div>
+              ) : (
+                <>
+                  <div style={s.mergeWarning}>
+                    ⚠ This will reassign <strong>all violations</strong> from the selected employee into{' '}
+                    <strong>{employee.name}</strong>, then permanently delete the duplicate record.
+                    This cannot be undone.
+                  </div>
+                  {mergeError && <div style={s.error}>{mergeError}</div>}
+                  <div style={s.label}>Duplicate to merge into {employee.name}</div>
+                  <select style={s.select} value={sourceId} onChange={e => setSourceId(e.target.value)}>
+                    <option value="">— select employee —</option>
+                    {otherEmployees.map(e => (
+                      <option key={e.id} value={e.id}>{e.name}{e.department ? ` (${e.department})` : ''}</option>
+                    ))}
+                  </select>
+                  <div style={s.row}>
+                    <button style={s.btn('#888')} onClick={onClose}>Cancel</button>
+                    <button style={s.btn('#fff', '#c0392b')} onClick={handleMerge} disabled={merging || !sourceId}>
+                      {merging ? 'Merging…' : 'Merge & Delete Duplicate'}
+                    </button>
+                  </div>
+                </>
+              )}
+              {mergeResult && (
+                <div style={s.row}>
+                  <button style={s.btn('#fff', '#667eea')} onClick={onClose}>Done</button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
-- 
2.52.0


From 15d3f028840fa2532ad55b2ac4e12d9a73b76ec8 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:24:13 -0600
Subject: [PATCH 18/86] =?UTF-8?q?feat:=20AmendViolationModal=20=E2=80=94?=
 =?UTF-8?q?=20edit=20non-scoring=20fields=20with=20full=20diff=20history?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/AmendViolationModal.jsx | 205 ++++++++++++++++++
 1 file changed, 205 insertions(+)
 create mode 100644 client/src/components/AmendViolationModal.jsx

diff --git a/client/src/components/AmendViolationModal.jsx b/client/src/components/AmendViolationModal.jsx
new file mode 100644
index 0000000..c9dbd91
--- /dev/null
+++ b/client/src/components/AmendViolationModal.jsx
@@ -0,0 +1,205 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const FIELD_LABELS = {
+  incident_time:  'Incident Time',
+  location:       'Location / Context',
+  details:        'Incident Notes',
+  submitted_by:   'Submitted By',
+  witness_name:   'Witness / Documenting Officer',
+};
+
+const s = {
+  overlay: {
+    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.8)',
+    zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center',
+  },
+  modal: {
+    background: '#111217', color: '#f8f9fa', width: '520px', maxWidth: '95vw',
+    maxHeight: '90vh', overflowY: 'auto',
+    borderRadius: '10px', boxShadow: '0 8px 40px rgba(0,0,0,0.8)',
+    border: '1px solid #222',
+  },
+  header: {
+    background: 'linear-gradient(135deg, #000000, #151622)', color: 'white',
+    padding: '18px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+    borderBottom: '1px solid #222', position: 'sticky', top: 0, zIndex: 10,
+  },
+  headerLeft: {},
+  title:    { fontSize: '15px', fontWeight: 700 },
+  subtitle: { fontSize: '11px', color: '#9ca0b8', marginTop: '2px' },
+  closeBtn: {
+    background: 'none', border: 'none', color: 'white', fontSize: '20px',
+    cursor: 'pointer', lineHeight: 1,
+  },
+  body: { padding: '22px' },
+  notice: {
+    background: '#0e1a30', border: '1px solid #1e3a5f', borderRadius: '6px',
+    padding: '10px 14px', fontSize: '12px', color: '#7eb8f7', marginBottom: '18px',
+  },
+  label:   { fontSize: '11px', color: '#9ca0b8', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '5px' },
+  input: {
+    width: '100%', background: '#0d0e14', border: '1px solid #2a2b3a', borderRadius: '6px',
+    color: '#f8f9fa', padding: '9px 12px', fontSize: '13px', marginBottom: '14px',
+    outline: 'none', boxSizing: 'border-box',
+  },
+  textarea: {
+    width: '100%', background: '#0d0e14', border: '1px solid #2a2b3a', borderRadius: '6px',
+    color: '#f8f9fa', padding: '9px 12px', fontSize: '13px', marginBottom: '14px',
+    outline: 'none', boxSizing: 'border-box', minHeight: '80px', resize: 'vertical',
+  },
+  divider: { borderTop: '1px solid #1c1d29', margin: '16px 0' },
+  sectionTitle: {
+    fontSize: '11px', fontWeight: 700, color: '#9ca0b8', textTransform: 'uppercase',
+    letterSpacing: '0.5px', marginBottom: '12px',
+  },
+  amendRow: {
+    background: '#0d0e14', border: '1px solid #1c1d29', borderRadius: '6px',
+    padding: '10px 12px', marginBottom: '8px', fontSize: '12px',
+  },
+  amendField:    { fontWeight: 700, color: '#c0c2d6', marginBottom: '4px' },
+  amendOld:      { color: '#ff7070', textDecoration: 'line-through', marginRight: '6px' },
+  amendNew:      { color: '#9ef7c1' },
+  amendMeta:     { fontSize: '10px', color: '#555a7a', marginTop: '4px' },
+  row:     { display: 'flex', gap: '10px', justifyContent: 'flex-end', marginTop: '6px' },
+  btn:     (color, bg) => ({
+    padding: '8px 18px', borderRadius: '6px', fontWeight: 700, fontSize: '13px',
+    cursor: 'pointer', border: `1px solid ${color}`, color, background: bg || 'none',
+  }),
+  error: {
+    background: '#3c1114', border: '1px solid #f5c6cb', borderRadius: '6px',
+    padding: '10px 12px', fontSize: '12px', color: '#ffb3b8', marginBottom: '14px',
+  },
+};
+
+function fmtDt(iso) {
+  if (!iso) return '—';
+  return new Date(iso).toLocaleString('en-US', { timeZone: 'America/Chicago', dateStyle: 'medium', timeStyle: 'short' });
+}
+
+export default function AmendViolationModal({ violation, onClose, onSaved }) {
+  const [fields, setFields] = useState({
+    incident_time:  violation.incident_time  || '',
+    location:       violation.location       || '',
+    details:        violation.details        || '',
+    submitted_by:   violation.submitted_by   || '',
+    witness_name:   violation.witness_name   || '',
+  });
+  const [changedBy, setChangedBy]   = useState('');
+  const [saving, setSaving]         = useState(false);
+  const [error, setError]           = useState('');
+  const [amendments, setAmendments] = useState([]);
+
+  useEffect(() => {
+    axios.get(`/api/violations/${violation.id}/amendments`)
+      .then(r => setAmendments(r.data))
+      .catch(() => {});
+  }, [violation.id]);
+
+  const hasChanges = Object.entries(fields).some(
+    ([k, v]) => v !== (violation[k] || '')
+  );
+
+  const handleSave = async () => {
+    setError('');
+    setSaving(true);
+    try {
+      // Only send fields that actually changed
+      const patch = Object.fromEntries(
+        Object.entries(fields).filter(([k, v]) => v !== (violation[k] || ''))
+      );
+      await axios.patch(`/api/violations/${violation.id}/amend`, { ...patch, changed_by: changedBy || null });
+      onSaved();
+      onClose();
+    } catch (e) {
+      setError(e.response?.data?.error || 'Failed to save amendment');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const set = (field, value) => setFields(prev => ({ ...prev, [field]: value }));
+
+  return (
+    <div style={s.overlay} onClick={e => e.target === e.currentTarget && onClose()}>
+      <div style={s.modal}>
+        <div style={s.header}>
+          <div style={s.headerLeft}>
+            <div style={s.title}>Amend Violation</div>
+            <div style={s.subtitle}>
+              CPAS-{String(violation.id).padStart(5, '0')} · {violation.violation_name} · {violation.incident_date}
+            </div>
+          </div>
+          <button style={s.closeBtn} onClick={onClose}>✕</button>
+        </div>
+
+        <div style={s.body}>
+          <div style={s.notice}>
+            Only non-scoring fields can be amended. Point values, violation type, and incident date
+            are immutable — delete and re-submit if those need to change.
+          </div>
+
+          {error && <div style={s.error}>{error}</div>}
+
+          {Object.entries(FIELD_LABELS).map(([field, label]) => (
+            <div key={field}>
+              <div style={s.label}>{label}</div>
+              {field === 'details' ? (
+                <textarea
+                  style={s.textarea}
+                  value={fields[field]}
+                  onChange={e => set(field, e.target.value)}
+                />
+              ) : (
+                <input
+                  style={s.input}
+                  value={fields[field]}
+                  onChange={e => set(field, e.target.value)}
+                />
+              )}
+            </div>
+          ))}
+
+          <div style={s.label}>Your Name (recorded in amendment log)</div>
+          <input
+            style={s.input}
+            value={changedBy}
+            onChange={e => setChangedBy(e.target.value)}
+            placeholder="Optional but recommended"
+          />
+
+          <div style={s.row}>
+            <button style={s.btn('#888')} onClick={onClose}>Cancel</button>
+            <button
+              style={s.btn('#fff', hasChanges ? '#667eea' : '#333')}
+              onClick={handleSave}
+              disabled={!hasChanges || saving}
+            >
+              {saving ? 'Saving…' : 'Save Amendment'}
+            </button>
+          </div>
+
+          {amendments.length > 0 && (
+            <>
+              <div style={s.divider} />
+              <div style={s.sectionTitle}>Amendment History ({amendments.length})</div>
+              {amendments.map(a => (
+                <div key={a.id} style={s.amendRow}>
+                  <div style={s.amendField}>{FIELD_LABELS[a.field_name] || a.field_name}</div>
+                  <div>
+                    <span style={s.amendOld}>{a.old_value || '(empty)'}</span>
+                    <span style={{ color: '#555', marginRight: '6px' }}>→</span>
+                    <span style={s.amendNew}>{a.new_value || '(empty)'}</span>
+                  </div>
+                  <div style={s.amendMeta}>
+                    {a.changed_by ? `by ${a.changed_by} · ` : ''}{fmtDt(a.created_at)}
+                  </div>
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
-- 
2.52.0


From 2525cce03ec5e98555a83c2b6a624a55dd134f12 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:24:49 -0600
Subject: [PATCH 19/86] =?UTF-8?q?feat:=20AuditLog=20panel=20component=20?=
 =?UTF-8?q?=E2=80=94=20filterable,=20paginated=20audit=20trail?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/AuditLog.jsx | 200 +++++++++++++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 client/src/components/AuditLog.jsx

diff --git a/client/src/components/AuditLog.jsx b/client/src/components/AuditLog.jsx
new file mode 100644
index 0000000..2e09af3
--- /dev/null
+++ b/client/src/components/AuditLog.jsx
@@ -0,0 +1,200 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import axios from 'axios';
+
+const ACTION_COLORS = {
+  employee_created:  '#667eea',
+  employee_edited:   '#9b8af8',
+  employee_merged:   '#f0a500',
+  violation_created: '#28a745',
+  violation_amended: '#4db6ac',
+  violation_negated: '#ffc107',
+  violation_restored:'#17a2b8',
+  violation_deleted: '#dc3545',
+};
+
+const ACTION_LABELS = {
+  employee_created:  'Employee Created',
+  employee_edited:   'Employee Edited',
+  employee_merged:   'Employee Merged',
+  violation_created: 'Violation Logged',
+  violation_amended: 'Violation Amended',
+  violation_negated: 'Violation Negated',
+  violation_restored:'Violation Restored',
+  violation_deleted: 'Violation Deleted',
+};
+
+const ENTITY_LABELS = {
+  employee:  'Employee',
+  violation: 'Violation',
+};
+
+const s = {
+  overlay: {
+    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)',
+    zIndex: 1000, display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end',
+  },
+  panel: {
+    background: '#111217', color: '#f8f9fa', width: '680px', maxWidth: '95vw',
+    height: '100vh', overflowY: 'auto', boxShadow: '-4px 0 24px rgba(0,0,0,0.7)',
+    display: 'flex', flexDirection: 'column',
+  },
+  header: {
+    background: 'linear-gradient(135deg, #000000, #151622)', color: 'white',
+    padding: '22px 26px', position: 'sticky', top: 0, zIndex: 10,
+    borderBottom: '1px solid #222',
+  },
+  headerRow: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
+  title:     { fontSize: '17px', fontWeight: 700 },
+  subtitle:  { fontSize: '12px', color: '#9ca0b8', marginTop: '3px' },
+  closeBtn:  {
+    background: 'none', border: 'none', color: 'white', fontSize: '22px',
+    cursor: 'pointer', lineHeight: 1,
+  },
+  filters: {
+    padding: '14px 26px', borderBottom: '1px solid #1c1d29',
+    display: 'flex', gap: '10px', flexWrap: 'wrap',
+  },
+  select: {
+    background: '#0d0e14', border: '1px solid #2a2b3a', borderRadius: '6px',
+    color: '#f8f9fa', padding: '7px 12px', fontSize: '12px', outline: 'none',
+  },
+  body:       { padding: '16px 26px', flex: 1 },
+  entry: {
+    borderBottom: '1px solid #1c1d29', padding: '12px 0',
+    display: 'flex', gap: '12px', alignItems: 'flex-start',
+  },
+  dot: (action) => ({
+    width: '8px', height: '8px', borderRadius: '50%', marginTop: '5px', flexShrink: 0,
+    background: ACTION_COLORS[action] || '#555',
+  }),
+  entryMain:  { flex: 1, minWidth: 0 },
+  actionBadge: (action) => ({
+    display: 'inline-block', padding: '2px 8px', borderRadius: '10px',
+    fontSize: '10px', fontWeight: 700, letterSpacing: '0.3px', marginRight: '6px',
+    background: (ACTION_COLORS[action] || '#555') + '22',
+    color: ACTION_COLORS[action] || '#aaa',
+    border: `1px solid ${(ACTION_COLORS[action] || '#555')}44`,
+  }),
+  entityRef:  { fontSize: '11px', color: '#9ca0b8' },
+  details:    { fontSize: '11px', color: '#667', marginTop: '4px', fontFamily: 'monospace', wordBreak: 'break-all' },
+  meta:       { fontSize: '10px', color: '#555a7a', marginTop: '4px' },
+  empty:      { textAlign: 'center', color: '#555a7a', padding: '60px 0', fontSize: '13px' },
+  loadMore:   {
+    width: '100%', background: 'none', border: '1px solid #2a2b3a', borderRadius: '6px',
+    color: '#9ca0b8', padding: '10px', cursor: 'pointer', fontSize: '12px', marginTop: '16px',
+  },
+};
+
+function fmtDt(iso) {
+  if (!iso) return '—';
+  return new Date(iso).toLocaleString('en-US', {
+    timeZone: 'America/Chicago', dateStyle: 'medium', timeStyle: 'short',
+  });
+}
+
+function renderDetails(detailsStr) {
+  if (!detailsStr) return null;
+  try {
+    const obj = JSON.parse(detailsStr);
+    return JSON.stringify(obj, null, 0)
+      .replace(/^\{/, '').replace(/\}$/, '').replace(/","/g, '  ');
+  } catch {
+    return detailsStr;
+  }
+}
+
+export default function AuditLog({ onClose }) {
+  const [entries, setEntries]       = useState([]);
+  const [loading, setLoading]       = useState(true);
+  const [offset, setOffset]         = useState(0);
+  const [hasMore, setHasMore]       = useState(false);
+  const [filterType, setFilterType] = useState('');
+  const [filterAction, setFilterAction] = useState('');
+  const LIMIT = 50;
+
+  const load = useCallback((reset = false) => {
+    setLoading(true);
+    const o = reset ? 0 : offset;
+    const params = { limit: LIMIT, offset: o };
+    if (filterType)   params.entity_type = filterType;
+    if (filterAction) params.action      = filterAction; // future: server-side action filter
+    axios.get('/api/audit', { params })
+      .then(r => {
+        const data = r.data;
+        // Client-side action filter (cheap enough at this scale)
+        const filtered = filterAction ? data.filter(e => e.action === filterAction) : data;
+        setEntries(prev => reset ? filtered : [...prev, ...filtered]);
+        setHasMore(data.length === LIMIT);
+        setOffset(o + LIMIT);
+      })
+      .finally(() => setLoading(false));
+  }, [offset, filterType, filterAction]);
+
+  useEffect(() => { load(true); }, [filterType, filterAction]); // eslint-disable-line
+
+  const handleOverlay = e => { if (e.target === e.currentTarget) onClose(); };
+
+  return (
+    <div style={s.overlay} onClick={handleOverlay}>
+      <div style={s.panel} onClick={e => e.stopPropagation()}>
+        <div style={s.header}>
+          <div style={s.headerRow}>
+            <div>
+              <div style={s.title}>Audit Log</div>
+              <div style={s.subtitle}>All system write actions — append-only</div>
+            </div>
+            <button style={s.closeBtn} onClick={onClose}>✕</button>
+          </div>
+        </div>
+
+        <div style={s.filters}>
+          <select style={s.select} value={filterType} onChange={e => { setFilterType(e.target.value); setOffset(0); }}>
+            <option value="">All entity types</option>
+            {Object.entries(ENTITY_LABELS).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
+          </select>
+          <select style={s.select} value={filterAction} onChange={e => { setFilterAction(e.target.value); setOffset(0); }}>
+            <option value="">All actions</option>
+            {Object.entries(ACTION_LABELS).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
+          </select>
+        </div>
+
+        <div style={s.body}>
+          {loading && entries.length === 0 ? (
+            <div style={s.empty}>Loading…</div>
+          ) : entries.length === 0 ? (
+            <div style={s.empty}>No audit entries found.</div>
+          ) : (
+            entries.map(e => (
+              <div key={e.id} style={s.entry}>
+                <div style={s.dot(e.action)} />
+                <div style={s.entryMain}>
+                  <div>
+                    <span style={s.actionBadge(e.action)}>
+                      {ACTION_LABELS[e.action] || e.action}
+                    </span>
+                    <span style={s.entityRef}>
+                      {ENTITY_LABELS[e.entity_type] || e.entity_type}
+                      {e.entity_id ? ` #${e.entity_id}` : ''}
+                    </span>
+                  </div>
+                  {e.details && (
+                    <div style={s.details}>{renderDetails(e.details)}</div>
+                  )}
+                  <div style={s.meta}>
+                    {e.performed_by ? `by ${e.performed_by} · ` : ''}{fmtDt(e.created_at)}
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+
+          {hasMore && (
+            <button style={s.loadMore} onClick={() => load(false)}>
+              Load more
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
-- 
2.52.0


From 7ee76468c4b8aec028a1ab6365dd6c8c509ea753 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:25:49 -0600
Subject: [PATCH 20/86] feat: wire EditEmployeeModal and AmendViolationModal
 into EmployeeModal

---
 client/src/components/EmployeeModal.jsx | 107 ++++++++++++++++--------
 1 file changed, 73 insertions(+), 34 deletions(-)

diff --git a/client/src/components/EmployeeModal.jsx b/client/src/components/EmployeeModal.jsx
index aca7091..4706e87 100755
--- a/client/src/components/EmployeeModal.jsx
+++ b/client/src/components/EmployeeModal.jsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect, useCallback } from 'react';
 import axios from 'axios';
 import CpasBadge, { getTier } from './CpasBadge';
 import NegateModal from './NegateModal';
+import EditEmployeeModal from './EditEmployeeModal';
+import AmendViolationModal from './AmendViolationModal';
 
 const s = {
   overlay: {
@@ -18,10 +20,15 @@ const s = {
     padding: '24px 28px', position: 'sticky', top: 0, zIndex: 10,
     borderBottom: '1px solid #222',
   },
+  headerRow: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' },
   closeBtn: {
     float: 'right', background: 'none', border: 'none', color: 'white',
     fontSize: '22px', cursor: 'pointer', lineHeight: 1, marginTop: '-2px',
   },
+  editEmpBtn: {
+    background: 'none', border: '1px solid #555', color: '#ccc', borderRadius: '5px',
+    padding: '4px 10px', fontSize: '11px', cursor: 'pointer', marginTop: '8px', fontWeight: 600,
+  },
   body: { padding: '24px 28px', flex: 1 },
   scoreRow: { display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '24px' },
   scoreCard: {
@@ -62,19 +69,31 @@ const s = {
     borderRadius: '4px', padding: '3px 8px', fontSize: '11px',
     cursor: 'pointer', fontWeight: 600,
   },
+  amendBtn: {
+    background: 'none', border: '1px solid #4db6ac', color: '#4db6ac',
+    borderRadius: '4px', padding: '3px 8px', fontSize: '11px',
+    cursor: 'pointer', marginRight: '4px', fontWeight: 600,
+  },
   deleteConfirm: {
     background: '#3c1114', border: '1px solid #f5c6cb', borderRadius: '6px',
     padding: '12px', marginTop: '8px', fontSize: '12px', color: '#ffb3b8',
   },
+  amendBadge: {
+    display: 'inline-block', marginLeft: '4px', padding: '1px 5px', borderRadius: '8px',
+    fontSize: '9px', fontWeight: 700, background: '#0e2a2a', color: '#4db6ac',
+    border: '1px solid #1a4a4a', verticalAlign: 'middle',
+  },
 };
 
 export default function EmployeeModal({ employeeId, onClose }) {
-  const [employee, setEmployee] = useState(null);
-  const [score, setScore] = useState(null);
+  const [employee,   setEmployee]   = useState(null);
+  const [score,      setScore]      = useState(null);
   const [violations, setViolations] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [negating, setNegating] = useState(null);
+  const [loading,    setLoading]    = useState(true);
+  const [negating,   setNegating]   = useState(null);
   const [confirmDel, setConfirmDel] = useState(null);
+  const [editingEmp, setEditingEmp] = useState(false);
+  const [amending,   setAmending]   = useState(null); // violation object
 
   const load = useCallback(() => {
     setLoading(true);
@@ -96,9 +115,9 @@ export default function EmployeeModal({ employeeId, onClose }) {
 
   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 url  = window.URL.createObjectURL(new Blob([response.data], { type: 'application/pdf' }));
     const link = document.createElement('a');
-    link.href = url;
+    link.href     = url;
     link.download = `CPAS_${(empName || '').replace(/[^a-z0-9]/gi, '_')}_${date}.pdf`;
     document.body.appendChild(link);
     link.click();
@@ -119,39 +138,42 @@ export default function EmployeeModal({ employeeId, onClose }) {
   };
 
   const handleNegate = async ({ resolution_type, details, resolved_by }) => {
-    await axios.patch(`/api/violations/${negating.id}/negate`, {
-      resolution_type, details, resolved_by,
-    });
+    await axios.patch(`/api/violations/${negating.id}/negate`, { resolution_type, details, resolved_by });
     setNegating(null);
     setConfirmDel(null);
     load();
   };
 
-  const tier = score ? getTier(score.active_points) : null;
-  const active = violations.filter((v) => !v.negated);
+  const tier    = score ? getTier(score.active_points) : null;
+  const active  = violations.filter((v) => !v.negated);
   const negated = violations.filter((v) => v.negated);
 
-  // FIX: overlay click only closes if clicking the backdrop itself, NOT children
-  const handleOverlayClick = (e) => {
-    if (e.target === e.currentTarget) onClose();
-  };
+  const handleOverlayClick = (e) => { if (e.target === e.currentTarget) onClose(); };
 
   return (
-    // FIX: panel uses onClick stopPropagation to prevent bubbling to overlay
     <div style={s.overlay} onClick={handleOverlayClick}>
       <div style={s.panel} onClick={(e) => e.stopPropagation()}>
 
         {/* ── Header ── */}
         <div style={s.header}>
-          <button style={s.closeBtn} onClick={onClose}>✕</button>
-          <div style={{ fontSize: '18px', fontWeight: 700 }}>
-            {employee ? employee.name : 'Employee'}
-          </div>
-          {employee && (
-            <div style={{ fontSize: '12px', color: '#b5b5c0', marginTop: '4px' }}>
-              {employee.department} {employee.supervisor && `· Supervisor: ${employee.supervisor}`}
+          <div style={s.headerRow}>
+            <div>
+              <div style={{ fontSize: '18px', fontWeight: 700 }}>
+                {employee ? employee.name : 'Employee'}
+              </div>
+              {employee && (
+                <div style={{ fontSize: '12px', color: '#b5b5c0', marginTop: '4px' }}>
+                  {employee.department} {employee.supervisor && `· Supervisor: ${employee.supervisor}`}
+                </div>
+              )}
+              {employee && (
+                <button style={s.editEmpBtn} onClick={() => setEditingEmp(true)}>
+                  ✎ Edit Employee
+                </button>
+              )}
             </div>
-          )}
+            <button style={s.closeBtn} onClick={onClose}>✕</button>
+          </div>
         </div>
 
         {/* ── Body ── */}
@@ -190,7 +212,7 @@ export default function EmployeeModal({ employeeId, onClose }) {
               {/* ── Active Violations ── */}
               <div style={s.sectionHd}>Active Violations</div>
               {active.length === 0 ? (
-                <div style={{ color: '#77798a', fontStyle: 'italic', fontSize: '12px' }}>
+                <div style={{ color: '#777990', fontStyle: 'italic', fontSize: '12px' }}>
                   No active violations on record.
                 </div>
               ) : (
@@ -208,17 +230,22 @@ export default function EmployeeModal({ employeeId, onClose }) {
                       <tr key={v.id}>
                         <td style={s.td}>{v.incident_date}</td>
                         <td style={s.td}>
-                          <div style={{ fontWeight: 600 }}>{v.violation_name}</div>
+                          <div style={{ fontWeight: 600 }}>
+                            {v.violation_name}
+                            {v.amendment_count > 0 && (
+                              <span style={s.amendBadge}>{v.amendment_count} edit{v.amendment_count !== 1 ? 's' : ''}</span>
+                            )}
+                          </div>
                           <div style={{ fontSize: '10px', color: '#9ca0b8' }}>{v.category}</div>
                           {v.details && (
-                            <div style={{ fontSize: '10px', color: '#b5b5c0', marginTop: '2px' }}>
-                              {v.details}
-                            </div>
+                            <div style={{ fontSize: '10px', color: '#b5b5c0', marginTop: '2px' }}>{v.details}</div>
                           )}
                         </td>
                         <td style={{ ...s.td, fontWeight: 700 }}>{v.points}</td>
                         <td style={s.td}>
-                          {/* FIX: All buttons use e.stopPropagation() to prevent overlay close */}
+                          <button style={s.amendBtn} onClick={(e) => { e.stopPropagation(); setAmending(v); }}>
+                            Amend
+                          </button>
                           <button
                             style={s.actionBtn('#ffc107')}
                             onClick={(e) => { e.stopPropagation(); setNegating(v); setConfirmDel(null); }}
@@ -294,9 +321,7 @@ export default function EmployeeModal({ employeeId, onClose }) {
                               </div>
                             )}
                             {v.resolved_by && (
-                              <div style={{ fontSize: '10px', color: '#9ca0b8' }}>
-                                by {v.resolved_by}
-                              </div>
+                              <div style={{ fontSize: '10px', color: '#9ca0b8' }}>by {v.resolved_by}</div>
                             )}
                           </td>
                           <td style={s.td}>
@@ -349,7 +374,7 @@ export default function EmployeeModal({ employeeId, onClose }) {
         </div>
       </div>
 
-      {/* FIX: NegateModal rendered OUTSIDE the panel so it sits at root z-index:2000 */}
+      {/* Modals rendered outside panel to avoid z-index nesting issues */}
       {negating && (
         <NegateModal
           violation={negating}
@@ -357,6 +382,20 @@ export default function EmployeeModal({ employeeId, onClose }) {
           onCancel={() => setNegating(null)}
         />
       )}
+      {editingEmp && employee && (
+        <EditEmployeeModal
+          employee={employee}
+          onClose={() => setEditingEmp(false)}
+          onSaved={load}
+        />
+      )}
+      {amending && (
+        <AmendViolationModal
+          violation={amending}
+          onClose={() => setAmending(null)}
+          onSaved={load}
+        />
+      )}
     </div>
   );
 }
-- 
2.52.0


From 970bc0efeac9d90c2e9c7b99abeb0b839572c743 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:26:33 -0600
Subject: [PATCH 21/86] feat: add Audit Log button to Dashboard toolbar

---
 client/src/components/Dashboard.jsx | 56 ++++++++++++++---------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/client/src/components/Dashboard.jsx b/client/src/components/Dashboard.jsx
index 8e8b143..d333e7a 100755
--- a/client/src/components/Dashboard.jsx
+++ b/client/src/components/Dashboard.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import axios from 'axios';
 import CpasBadge, { getTier } from './CpasBadge';
 import EmployeeModal from './EmployeeModal';
+import AuditLog from './AuditLog';
 
 const AT_RISK_THRESHOLD = 2;
 
@@ -28,30 +29,33 @@ function isAtRisk(points) {
 }
 
 const s = {
-  wrap:        { padding: '32px 40px', color: '#f8f9fa' },
-  header:      { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px', flexWrap: 'wrap', gap: '12px' },
-  title:       { fontSize: '24px', fontWeight: 700, color: '#f8f9fa' },
-  subtitle:    { fontSize: '13px', color: '#b5b5c0', marginTop: '3px' },
-  statsRow:    { display: 'flex', gap: '16px', flexWrap: 'wrap', marginBottom: '28px' },
-  statCard:    { flex: '1', minWidth: '140px', background: '#181924', border: '1px solid #30313f', borderRadius: '8px', padding: '16px', textAlign: 'center' },
-  statNum:     { fontSize: '28px', fontWeight: 800, color: '#f8f9fa' },
-  statLbl:     { fontSize: '11px', color: '#b5b5c0', marginTop: '4px' },
-  search:      { padding: '10px 14px', border: '1px solid #333544', borderRadius: '6px', fontSize: '14px', width: '260px', background: '#050608', color: '#f8f9fa' },
-  table:       { width: '100%', borderCollapse: 'collapse', background: '#111217', borderRadius: '8px', overflow: 'hidden', boxShadow: '0 1px 8px rgba(0,0,0,0.6)', border: '1px solid #222' },
-  th:          { background: '#000000', color: '#f8f9fa', padding: '10px 14px', textAlign: 'left', fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' },
-  td:          { padding: '11px 14px', borderBottom: '1px solid #1c1d29', fontSize: '13px', verticalAlign: 'middle', color: '#f8f9fa' },
-  nameBtn:     { background: 'none', border: 'none', cursor: 'pointer', fontWeight: 600, color: '#d4af37', fontSize: '14px', padding: 0, textDecoration: 'underline dotted' },
-  atRiskBadge: { display: 'inline-block', marginLeft: '8px', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#3b2e00', color: '#ffd666', border: '1px solid #d4af37', verticalAlign: 'middle' },
-  zeroRow:     { color: '#77798a', fontStyle: 'italic', fontSize: '12px' },
-  refreshBtn:  { padding: '9px 18px', background: '#d4af37', color: '#000', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' },
+  wrap:         { padding: '32px 40px', color: '#f8f9fa' },
+  header:       { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px', flexWrap: 'wrap', gap: '12px' },
+  title:        { fontSize: '24px', fontWeight: 700, color: '#f8f9fa' },
+  subtitle:     { fontSize: '13px', color: '#b5b5c0', marginTop: '3px' },
+  statsRow:     { display: 'flex', gap: '16px', flexWrap: 'wrap', marginBottom: '28px' },
+  statCard:     { flex: '1', minWidth: '140px', background: '#181924', border: '1px solid #30313f', borderRadius: '8px', padding: '16px', textAlign: 'center' },
+  statNum:      { fontSize: '28px', fontWeight: 800, color: '#f8f9fa' },
+  statLbl:      { fontSize: '11px', color: '#b5b5c0', marginTop: '4px' },
+  search:       { padding: '10px 14px', border: '1px solid #333544', borderRadius: '6px', fontSize: '14px', width: '260px', background: '#050608', color: '#f8f9fa' },
+  table:        { width: '100%', borderCollapse: 'collapse', background: '#111217', borderRadius: '8px', overflow: 'hidden', boxShadow: '0 1px 8px rgba(0,0,0,0.6)', border: '1px solid #222' },
+  th:           { background: '#000000', color: '#f8f9fa', padding: '10px 14px', textAlign: 'left', fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' },
+  td:           { padding: '11px 14px', borderBottom: '1px solid #1c1d29', fontSize: '13px', verticalAlign: 'middle', color: '#f8f9fa' },
+  nameBtn:      { background: 'none', border: 'none', cursor: 'pointer', fontWeight: 600, color: '#d4af37', fontSize: '14px', padding: 0, textDecoration: 'underline dotted' },
+  atRiskBadge:  { display: 'inline-block', marginLeft: '8px', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#3b2e00', color: '#ffd666', border: '1px solid #d4af37', verticalAlign: 'middle' },
+  zeroRow:      { color: '#77798a', fontStyle: 'italic', fontSize: '12px' },
+  toolbarRight: { display: 'flex', gap: '10px', alignItems: 'center' },
+  refreshBtn:   { padding: '9px 18px', background: '#d4af37', color: '#000', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' },
+  auditBtn:     { padding: '9px 18px', background: 'none', color: '#9ca0b8', border: '1px solid #2a2b3a', borderRadius: '6px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' },
 };
 
 export default function Dashboard() {
-  const [employees, setEmployees] = useState([]);
-  const [filtered,  setFiltered]  = useState([]);
-  const [search,    setSearch]    = useState('');
-  const [selectedId, setSelectedId] = useState(null);
-  const [loading,   setLoading]   = useState(true);
+  const [employees,   setEmployees]   = useState([]);
+  const [filtered,    setFiltered]    = useState([]);
+  const [search,      setSearch]      = useState('');
+  const [selectedId,  setSelectedId]  = useState(null);
+  const [showAudit,   setShowAudit]   = useState(false);
+  const [loading,     setLoading]     = useState(true);
 
   const load = useCallback(() => {
     setLoading(true);
@@ -77,9 +81,6 @@ export default function Dashboard() {
   const maxPoints   = employees.reduce((m, e) => Math.max(m, e.active_points), 0);
 
   return (
-    // FIX: Fragment wraps both s.wrap AND EmployeeModal so the modal is
-    // outside the s.wrap div — React synthetic events will no longer bubble
-    // from inside the modal up through the Dashboard's DOM tree.
     <>
       <div style={s.wrap}>
         <div style={s.header}>
@@ -87,13 +88,14 @@ export default function Dashboard() {
             <div style={s.title}>Company Dashboard</div>
             <div style={s.subtitle}>Click any employee name to view their full profile</div>
           </div>
-          <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+          <div style={s.toolbarRight}>
             <input
               style={s.search}
               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>
           </div>
         </div>
@@ -179,15 +181,13 @@ export default function Dashboard() {
         )}
       </div>
 
-      {/* FIX: EmployeeModal is now OUTSIDE <div style={s.wrap}>.
-          React synthetic events no longer bubble from modal buttons
-          up through Dashboard's component tree. */}
       {selectedId && (
         <EmployeeModal
           employeeId={selectedId}
           onClose={() => { setSelectedId(null); load(); }}
         />
       )}
+      {showAudit && <AuditLog onClose={() => setShowAudit(false)} />}
     </>
   );
 }
-- 
2.52.0


From 0a8b6e44d8e9d6876ec81996df32691f2855f6b4 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:40:34 -0600
Subject: [PATCH 22/86] =?UTF-8?q?docs:=20update=20README=20=E2=80=94=20mar?=
 =?UTF-8?q?k=20roadmap=20items=20complete,=20add=20new=20features,=20updat?=
 =?UTF-8?q?e=20schema=20and=20API=20reference?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 78 ++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 54 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 451eddd..8a9d576 100755
--- a/README.md
+++ b/README.md
@@ -53,6 +53,7 @@ docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker
 - **At-risk badge**: flags employees within 2 points of the next tier escalation
 - Search/filter by name, department, or supervisor
 - Click any employee name to open their full profile modal
+- **📋 Audit Log** button — filterable, paginated view of all system write actions
 
 ### Violation Form
 - Select existing employee or enter new employee by name
@@ -66,11 +67,24 @@ docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker
 - One-click PDF download immediately after submission
 
 ### Employee Profile Modal
-- Full violation history with resolution status
+- Full violation history with resolution status and **amendment count badge** per record
+- **✎ Edit Employee** button — update name, department, or supervisor 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
 - Negate / restore individual violations (soft delete with resolution type + notes)
 - Hard delete option for data entry errors
 - PDF download for any historical violation record
 
+### Audit Log
+- Append-only log of every write action: employee created/edited/merged, violation logged/amended/negated/restored/deleted
+- Filterable by entity type (employee / violation) and action
+- Paginated with load-more; accessible from the Dashboard toolbar
+
+### Violation Amendment
+- Edit submitted violations' non-scoring fields without delete-and-resubmit
+- Point values, violation type, and incident date are immutable
+- Every change is stored as a field-level diff (old → new value) with timestamp and actor
+
 ### CPAS Tier System
 
 | Points | Tier | Label |
@@ -100,14 +114,19 @@ Scores are computed over a **rolling 90-day window** (negated violations exclude
 | GET | `/api/health` | Health check |
 | GET | `/api/employees` | List all employees |
 | POST | `/api/employees` | Create or upsert employee |
+| PATCH | `/api/employees/:id` | Edit employee name, department, or supervisor |
+| POST | `/api/employees/:id/merge` | Merge duplicate employee into target; reassigns all violations |
 | GET | `/api/employees/:id/score` | Get active CPAS score for employee |
 | GET | `/api/dashboard` | All employees with active points + violation counts |
 | POST | `/api/violations` | Log a new violation |
-| GET | `/api/violations/employee/:id` | Get violation history for employee (with resolutions) |
+| GET | `/api/violations/employee/:id` | Get violation history for employee (with resolutions + amendment counts) |
 | PATCH | `/api/violations/:id/negate` | 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 |
 | DELETE | `/api/violations/:id` | Hard delete a violation |
 | GET | `/api/violations/:id/pdf` | Download violation PDF |
+| GET | `/api/audit` | Paginated audit log (filterable by entity_type, entity_id) |
 
 ---
 
@@ -115,16 +134,16 @@ 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
-│   └── database.js                # SQLite connection (better-sqlite3)
+│   ├── schema.sql                       # Tables + 90-day active score view
+│   └── database.js                      # SQLite connection (better-sqlite3) + auto-migrations
 ├── pdf/
-│   └── generator.js               # Puppeteer PDF generation
-└── client/                        # React frontend (Vite)
+│   └── generator.js                     # Puppeteer PDF generation
+└── client/                              # React frontend (Vite)
     ├── package.json
     ├── vite.config.js
     ├── index.html
@@ -132,28 +151,33 @@ cpas/
         ├── main.jsx
         ├── App.jsx
         ├── data/
-        │   └── violations.js      # All CPAS violation definitions + groups
+        │   └── violations.js            # All CPAS violation definitions + groups
         ├── hooks/
         │   └── useEmployeeIntelligence.js  # Score + history hook
         └── components/
-            ├── CpasBadge.jsx      # Tier badge + color logic
-            ├── TierWarning.jsx    # Pre-submit tier crossing alert
-            ├── Dashboard.jsx      # Company-wide leaderboard
-            ├── ViolationForm.jsx  # Violation entry form
-            ├── EmployeeModal.jsx  # Employee profile + history modal
-            ├── NegateModal.jsx    # Negate/resolve violation dialog
-            └── ViolationHistory.jsx  # Violation list component
+            ├── 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
 ```
 
 ---
 
 ## Database Schema
 
-Three tables + one view:
+Six tables + one view:
 
 - **`employees`** — id, name, department, supervisor
 - **`violations`** — full incident record including `prior_active_points` snapshot at time of logging
 - **`violation_resolutions`** — resolution type, details, resolved_by (linked to violations)
+- **`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)
 - **`active_cpas_scores`** (view) — sum of points for non-negated violations in rolling 90 days, grouped by employee
 
 ---
@@ -177,26 +201,33 @@ Three tables + one view:
 | 4 | Tier crossing warning | Pre-submit alert when new points push employee to next tier |
 | 4 | Employee profile modal | Full history, negate/restore, hard delete, per-record PDF download |
 | 4 | Negate & restore | Soft-delete violations with resolution type + notes, fully reversible |
+| 5 | Employee edit / merge | Update employee name/dept/supervisor; merge duplicate records without losing history |
+| 5 | Violation amendment | Edit non-scoring fields with field-level audit trail |
+| 5 | Audit log | Append-only log of all system writes; filterable panel in the dashboard |
 
 ---
 
-### 🔲 Proposed
+### 📋 In Progress
+
+#### Reporting & Visibility
+- **Expiration timeline** — per-employee view showing which active violations roll off the 90-day window and when; lets supervisors anticipate tier drops before they happen
+- **Employee notes / flags** — free-text notes attached to an employee record (e.g. "on PIP", "union member") visible in the profile modal without affecting scoring
+
+---
+
+### 💡 Proposed
 
 #### Reporting & Analytics
 - **Violation trends chart** — line/bar chart of violations per day/week/month, filterable by department or supervisor; useful for identifying systemic patterns vs. individual incidents
 - **Department heat map** — grid view showing violation density and average CPAS score by department; helps supervisors identify team-level risk
-- **Expiration timeline** — visual showing which active violations will roll off the 90-day window and when, so supervisors can anticipate tier drops
 - **CSV / Excel export** — bulk export of violations or dashboard data for external reporting or payroll integration
 
 #### Employee Management
-- **Employee edit / merge** — ability to update employee name, department, or supervisor without losing history; merge duplicate records created by name typos
 - **Supervisor view** — scoped dashboard showing only the employees under a given supervisor, useful for multi-supervisor environments
-- **Employee notes / flags** — free-text notes attached to an employee record (e.g. "on PIP", "union member") visible in the profile modal without affecting scoring
 
 #### Violation Workflow
 - **Acknowledgment signature field** — a "received by employee" name/date field on the violation form that prints on the PDF, replacing the blank signature line
 - **Draft / pending violations** — save a violation as draft before finalizing, useful when incidents need review before being officially logged
-- **Violation amendment** — edit a submitted violation's details (not points) with an audit trail, rather than delete-and-resubmit
 - **Bulk violation import** — CSV import for migrating historical records from paper logs or a prior system
 
 #### Notifications & Escalation
@@ -206,7 +237,6 @@ Three tables + one view:
 
 #### Infrastructure & Ops
 - **Multi-user auth** — simple login with role-based access (admin, supervisor, read-only); currently the app has no auth and is assumed to run on a trusted internal network
-- **Audit log** — immutable log of all creates, negates, restores, and deletes with timestamp and acting user, stored separately from the violations table
 - **Automated DB backup** — cron job or Docker health hook to snapshot `/data/cpas.db` to a mounted backup volume or remote location on a schedule
 - **Dark/light theme toggle** — the UI is currently dark-only; a toggle would improve usability in bright environments
 
-- 
2.52.0


From be2d1fa68eb801b723ef4055d4602452bc9e19b1 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:41:50 -0600
Subject: [PATCH 23/86] feat(db): add notes column to employees table

---
 db/database.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/db/database.js b/db/database.js
index cba0200..d4fe68b 100755
--- a/db/database.js
+++ b/db/database.js
@@ -20,6 +20,10 @@ if (!cols.includes('negated_at'))          db.exec("ALTER TABLE violations ADD C
 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");
 
+// Employee notes column (free-text, does not affect scoring)
+const empCols = db.prepare('PRAGMA table_info(employees)').all().map(c => c.name);
+if (!empCols.includes('notes')) db.exec("ALTER TABLE employees ADD COLUMN notes TEXT");
+
 // Ensure resolutions table exists
 db.exec(`CREATE TABLE IF NOT EXISTS violation_resolutions (
     id              INTEGER PRIMARY KEY AUTOINCREMENT,
-- 
2.52.0


From b02464330b01b39ca9400d369b372feec0fe3000 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:42:59 -0600
Subject: [PATCH 24/86] feat: add expiration timeline endpoint and notes field
 to employee endpoints

---
 server.js | 61 +++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/server.js b/server.js
index 0a33626..01216e2 100755
--- a/server.js
+++ b/server.js
@@ -29,7 +29,7 @@ app.get('/api/health', (req, res) => res.json({ status: 'ok', timestamp: new Dat
 
 // ── Employees ─────────────────────────────────────────────────────────────────
 app.get('/api/employees', (req, res) => {
-  const rows = db.prepare('SELECT id, name, department, supervisor FROM employees ORDER BY name ASC').all();
+  const rows = db.prepare('SELECT id, name, department, supervisor, notes FROM employees ORDER BY name ASC').all();
   res.json(rows);
 });
 
@@ -51,13 +51,13 @@ app.post('/api/employees', (req, res) => {
 });
 
 // ── Employee Edit ─────────────────────────────────────────────────────────────
-// PATCH /api/employees/:id  — update name, department, or supervisor
+// PATCH /api/employees/:id — update name, department, supervisor, or notes
 app.patch('/api/employees/:id', (req, res) => {
   const id  = parseInt(req.params.id);
   const emp = db.prepare('SELECT * FROM employees WHERE id = ?').get(id);
   if (!emp) return res.status(404).json({ error: 'Employee not found' });
 
-  const { name, department, supervisor, performed_by } = req.body;
+  const { name, department, supervisor, notes, performed_by } = req.body;
 
   // Prevent name collision with a different employee
   if (name && name.trim() !== emp.name) {
@@ -68,20 +68,21 @@ app.patch('/api/employees/:id', (req, res) => {
   const newName       = (name       || emp.name).trim();
   const newDept       = department  !== undefined ? (department  || null) : emp.department;
   const newSupervisor = supervisor  !== undefined ? (supervisor  || null) : emp.supervisor;
+  const newNotes      = notes       !== undefined ? (notes       || null) : emp.notes;
 
-  db.prepare('UPDATE employees SET name = ?, department = ?, supervisor = ? WHERE id = ?')
-    .run(newName, newDept, newSupervisor, id);
+  db.prepare('UPDATE employees SET name = ?, department = ?, supervisor = ?, notes = ? WHERE id = ?')
+    .run(newName, newDept, newSupervisor, newNotes, id);
 
   audit('employee_edited', 'employee', id, performed_by, {
-    before: { name: emp.name, department: emp.department, supervisor: emp.supervisor },
-    after:  { name: newName,  department: newDept,        supervisor: newSupervisor  },
+    before: { name: emp.name, department: emp.department, supervisor: emp.supervisor, notes: emp.notes },
+    after:  { name: newName,  department: newDept,        supervisor: newSupervisor,  notes: newNotes  },
   });
 
-  res.json({ id, name: newName, department: newDept, supervisor: newSupervisor });
+  res.json({ id, name: newName, department: newDept, supervisor: newSupervisor, notes: newNotes });
 });
 
 // ── Employee Merge ────────────────────────────────────────────────────────────
-// POST /api/employees/:id/merge  — reassign all violations from sourceId → id, then delete source
+// 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);
   const { source_id, performed_by } = req.body;
@@ -112,12 +113,54 @@ app.post('/api/employees/:id/merge', (req, res) => {
   res.json({ success: true, violations_reassigned: violationsMoved });
 });
 
+// ── Employee notes (PATCH shorthand) ─────────────────────────────────────────
+// PATCH /api/employees/:id/notes — save free-text notes only
+app.patch('/api/employees/:id/notes', (req, res) => {
+  const id  = parseInt(req.params.id);
+  const emp = db.prepare('SELECT * FROM employees WHERE id = ?').get(id);
+  if (!emp) return res.status(404).json({ error: 'Employee not found' });
+
+  const { notes, performed_by } = req.body;
+  const newNotes = notes !== undefined ? (notes || null) : emp.notes;
+
+  db.prepare('UPDATE employees SET notes = ? WHERE id = ?').run(newNotes, id);
+  audit('employee_notes_updated', 'employee', id, performed_by, { notes: newNotes });
+  res.json({ id, notes: newNotes });
+});
+
 // Employee score (current snapshot)
 app.get('/api/employees/:id/score', (req, res) => {
   const row = db.prepare('SELECT * FROM active_cpas_scores WHERE employee_id = ?').get(req.params.id);
   res.json(row || { employee_id: req.params.id, active_points: 0, violation_count: 0 });
 });
 
+// ── 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) => {
+  const rows = db.prepare(`
+    SELECT
+      v.id,
+      v.violation_name,
+      v.violation_type,
+      v.category,
+      v.points,
+      v.incident_date,
+      DATE(v.incident_date, '+90 days')                          AS expires_on,
+      CAST(
+        JULIANDAY(DATE(v.incident_date, '+90 days')) -
+        JULIANDAY(DATE('now'))
+        AS INTEGER
+      )                                                           AS days_remaining
+    FROM violations v
+    WHERE v.employee_id = ?
+      AND v.negated = 0
+      AND v.incident_date >= DATE('now', '-90 days')
+    ORDER BY v.incident_date ASC
+  `).all(req.params.id);
+  res.json(rows);
+});
+
 // Dashboard
 app.get('/api/dashboard', (req, res) => {
   const rows = db.prepare(`
-- 
2.52.0


From 37efd596dd9e22d8076167d64bae62a9f199ea8e Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:43:31 -0600
Subject: [PATCH 25/86] =?UTF-8?q?feat:=20ExpirationTimeline=20component=20?=
 =?UTF-8?q?=E2=80=94=20per-violation=20roll-off=20countdown=20with=20tier?=
 =?UTF-8?q?=20drop=20projection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/ExpirationTimeline.jsx | 159 +++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 client/src/components/ExpirationTimeline.jsx

diff --git a/client/src/components/ExpirationTimeline.jsx b/client/src/components/ExpirationTimeline.jsx
new file mode 100644
index 0000000..37ca0ef
--- /dev/null
+++ b/client/src/components/ExpirationTimeline.jsx
@@ -0,0 +1,159 @@
+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.
+const TIER_THRESHOLDS = [
+  { min: 30, label: 'Separation',            color: '#ff1744' },
+  { min: 25, label: 'Final Decision',        color: '#ff6d00' },
+  { min: 20, label: 'Risk Mitigation',       color: '#ff9100' },
+  { min: 15, label: 'Verification',          color: '#ffc400' },
+  { min: 10, label: 'Administrative Lockdown', color: '#ffea00' },
+  { min: 5,  label: 'Realignment',           color: '#b2ff59' },
+  { min: 0,  label: 'Elite Standing',        color: '#69f0ae' },
+];
+
+function getTier(pts) {
+  return TIER_THRESHOLDS.find(t => pts >= t.min) || TIER_THRESHOLDS[TIER_THRESHOLDS.length - 1];
+}
+
+function urgencyColor(days) {
+  if (days <= 7)  return '#ff4d4f';
+  if (days <= 14) return '#ffa940';
+  if (days <= 30) return '#fadb14';
+  return '#52c41a';
+}
+
+const s = {
+  wrapper: { marginTop: '24px' },
+  sectionHd: {
+    fontSize: '13px', fontWeight: 700, color: '#f8f9fa', textTransform: 'uppercase',
+    letterSpacing: '0.5px', marginBottom: '10px',
+  },
+  empty: { color: '#777990', fontStyle: 'italic', fontSize: '12px' },
+  row: {
+    display: 'flex', alignItems: 'center', gap: '12px',
+    padding: '10px 12px', background: '#181924', borderRadius: '6px',
+    border: '1px solid #2a2b3a', marginBottom: '6px',
+  },
+  bar: (pct, color) => ({
+    flex: 1, height: '6px', background: '#2a2b3a', borderRadius: '3px', overflow: 'hidden',
+    position: 'relative',
+  }),
+  barFill: (pct, color) => ({
+    position: 'absolute', left: 0, top: 0, bottom: 0,
+    width: `${Math.min(100, Math.max(0, 100 - pct))}%`,
+    background: color, borderRadius: '3px',
+    transition: 'width 0.3s ease',
+  }),
+  pill: (color) => ({
+    display: 'inline-block', padding: '2px 8px', borderRadius: '10px',
+    fontSize: '11px', fontWeight: 700, background: `${color}22`,
+    color, border: `1px solid ${color}55`, whiteSpace: 'nowrap',
+  }),
+  pts: { fontSize: '13px', fontWeight: 700, color: '#f8f9fa', minWidth: '28px', textAlign: 'right' },
+  name: { fontSize: '12px', color: '#f8f9fa', fontWeight: 600, flex: '0 0 160px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+  date: { fontSize: '11px', color: '#9ca0b8', minWidth: '88px' },
+  projBox: {
+    marginTop: '16px', padding: '12px 14px', background: '#0d1117',
+    border: '1px solid #2a2b3a', borderRadius: '6px', fontSize: '12px', color: '#b5b5c0',
+  },
+  projRow: { display: 'flex', justifyContent: 'space-between', marginBottom: '4px' },
+};
+
+export default function ExpirationTimeline({ employeeId, currentPoints }) {
+  const [items,   setItems]   = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    axios.get(`/api/employees/${employeeId}/expiration`)
+      .then(r => setItems(r.data))
+      .finally(() => setLoading(false));
+  }, [employeeId]);
+
+  if (loading) return (
+    <div style={s.wrapper}>
+      <div style={s.sectionHd}>Point Expiration Timeline</div>
+      <div style={{ ...s.empty }}>Loading…</div>
+    </div>
+  );
+
+  if (items.length === 0) return (
+    <div style={s.wrapper}>
+      <div style={s.sectionHd}>Point Expiration Timeline</div>
+      <div style={s.empty}>No active violations — nothing to expire.</div>
+    </div>
+  );
+
+  // Build running totals: after each violation expires, what's the remaining score?
+  let running = currentPoints || 0;
+  const projected = items.map(item => {
+    const before = running;
+    running = Math.max(0, running - item.points);
+    const tierBefore = getTier(before);
+    const tierAfter  = getTier(running);
+    const dropped    = tierAfter.min < tierBefore.min;
+    return { ...item, pointsBefore: before, pointsAfter: running, tierBefore, tierAfter, tierDropped: dropped };
+  });
+
+  return (
+    <div style={s.wrapper}>
+      <div style={s.sectionHd}>Point Expiration Timeline</div>
+
+      {projected.map((item) => {
+        const color = urgencyColor(item.days_remaining);
+        const pct   = (item.days_remaining / 90) * 100;
+        return (
+          <div key={item.id} style={s.row}>
+            {/* Violation name */}
+            <div style={s.name} title={item.violation_name}>{item.violation_name}</div>
+
+            {/* Points badge */}
+            <div style={s.pts}>−{item.points}</div>
+
+            {/* Progress bar: how much of the 90 days has elapsed */}
+            <div style={s.bar(pct, color)}>
+              <div style={s.barFill(pct, color)} />
+            </div>
+
+            {/* Days remaining pill */}
+            <div style={s.pill(color)}>
+              {item.days_remaining <= 0 ? 'Expiring today' : `${item.days_remaining}d`}
+            </div>
+
+            {/* Expiry date */}
+            <div style={s.date}>{item.expires_on}</div>
+
+            {/* Tier drop indicator */}
+            {item.tierDropped && (
+              <div style={{ fontSize: '10px', color: '#69f0ae', whiteSpace: 'nowrap' }}>
+                ↓ {item.tierAfter.label}
+              </div>
+            )}
+          </div>
+        );
+      })}
+
+      {/* Projection summary */}
+      <div style={s.projBox}>
+        <div style={{ fontWeight: 700, color: '#f8f9fa', marginBottom: '8px', fontSize: '12px' }}>
+          Projected score after each expiration
+        </div>
+        {projected.map((item, i) => (
+          <div key={item.id} style={s.projRow}>
+            <span style={{ color: '#9ca0b8' }}>{item.expires_on} — {item.violation_name}</span>
+            <span>
+              <span style={{ color: '#f8f9fa', fontWeight: 700 }}>{item.pointsAfter} pts</span>
+              {item.tierDropped && (
+                <span style={{ marginLeft: '8px', color: item.tierAfter.color, fontWeight: 700 }}>
+                  → {item.tierAfter.label}
+                </span>
+              )}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
-- 
2.52.0


From 328fc6f307e0640c82ae343a0be912707179d9c0 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:43:54 -0600
Subject: [PATCH 26/86] =?UTF-8?q?feat:=20EmployeeNotes=20component=20?=
 =?UTF-8?q?=E2=80=94=20inline=20free-text=20notes=20with=20quick-add=20HR?=
 =?UTF-8?q?=20flag=20tags?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/EmployeeNotes.jsx | 146 ++++++++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 client/src/components/EmployeeNotes.jsx

diff --git a/client/src/components/EmployeeNotes.jsx b/client/src/components/EmployeeNotes.jsx
new file mode 100644
index 0000000..26cf619
--- /dev/null
+++ b/client/src/components/EmployeeNotes.jsx
@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const s = {
+  wrapper: { marginTop: '20px' },
+  sectionHd: {
+    fontSize: '13px', fontWeight: 700, color: '#f8f9fa', textTransform: 'uppercase',
+    letterSpacing: '0.5px', marginBottom: '8px',
+  },
+  display: {
+    background: '#181924', border: '1px solid #2a2b3a', borderRadius: '6px',
+    padding: '10px 12px', fontSize: '13px', color: '#f8f9fa', minHeight: '36px',
+    cursor: 'pointer', position: 'relative',
+  },
+  displayEmpty: {
+    color: '#555770', fontStyle: 'italic',
+  },
+  editHint: {
+    position: 'absolute', right: '8px', top: '8px',
+    fontSize: '10px', color: '#555770',
+  },
+  textarea: {
+    width: '100%', background: '#0d1117', border: '1px solid #4d6fa8',
+    borderRadius: '6px', color: '#f8f9fa', fontSize: '13px',
+    padding: '10px 12px', resize: 'vertical', minHeight: '80px',
+    boxSizing: 'border-box', fontFamily: 'inherit', outline: 'none',
+  },
+  actions: { display: 'flex', gap: '8px', marginTop: '8px' },
+  saveBtn: {
+    background: '#1a3a6b', border: '1px solid #4d6fa8', color: '#90caf9',
+    borderRadius: '5px', padding: '5px 14px', fontSize: '12px',
+    cursor: 'pointer', fontWeight: 600,
+  },
+  cancelBtn: {
+    background: 'none', border: '1px solid #444', color: '#888',
+    borderRadius: '5px', padding: '5px 14px', fontSize: '12px',
+    cursor: 'pointer',
+  },
+  saving: { fontSize: '12px', color: '#9ca0b8', alignSelf: 'center' },
+  tagRow: { display: 'flex', flexWrap: 'wrap', gap: '6px', marginBottom: '8px' },
+  tag: {
+    display: 'inline-block', padding: '2px 8px', borderRadius: '10px',
+    fontSize: '11px', fontWeight: 600, background: '#1a2a3a',
+    color: '#90caf9', border: '1px solid #2a3a5a', cursor: 'default',
+  },
+};
+
+// Quick-add tags for common HR flags
+const QUICK_TAGS = ['On PIP', 'Union member', 'Probationary', 'Pending investigation', 'FMLA', 'ADA'];
+
+export default function EmployeeNotes({ employeeId, initialNotes, onSaved }) {
+  const [editing, setEditing] = useState(false);
+  const [draft,   setDraft]   = useState(initialNotes || '');
+  const [saved,   setSaved]   = useState(initialNotes || '');
+  const [saving,  setSaving]  = useState(false);
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await axios.patch(`/api/employees/${employeeId}/notes`, { notes: draft });
+      setSaved(draft);
+      setEditing(false);
+      if (onSaved) onSaved(draft);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setDraft(saved);
+    setEditing(false);
+  };
+
+  const addTag = (tag) => {
+    const current = draft.trim();
+    // Don't add a tag that's already present
+    if (current.includes(tag)) return;
+    setDraft(current ? `${current}\n${tag}` : tag);
+  };
+
+  // Parse saved notes into display lines
+  const lines = saved ? saved.split('\n').filter(Boolean) : [];
+
+  return (
+    <div style={s.wrapper}>
+      <div style={s.sectionHd}>Notes &amp; Flags</div>
+
+      {!editing ? (
+        <div
+          style={s.display}
+          onClick={() => { setDraft(saved); setEditing(true); }}
+          title="Click to edit"
+        >
+          <span style={s.editHint}>✎ edit</span>
+          {lines.length === 0 ? (
+            <span style={s.displayEmpty}>No notes — click to add</span>
+          ) : (
+            <div style={s.tagRow}>
+              {lines.map((line, i) => (
+                <span key={i} style={s.tag}>{line}</span>
+              ))}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div>
+          {/* Quick-add tag buttons */}
+          <div style={{ ...s.tagRow, marginBottom: '6px' }}>
+            {QUICK_TAGS.map(tag => (
+              <button
+                key={tag}
+                style={{
+                  ...s.tag,
+                  cursor: 'pointer',
+                  background: draft.includes(tag) ? '#0e2a3a' : '#1a2a3a',
+                  opacity: draft.includes(tag) ? 0.5 : 1,
+                }}
+                onClick={() => addTag(tag)}
+                title="Add tag"
+              >
+                + {tag}
+              </button>
+            ))}
+          </div>
+
+          <textarea
+            style={s.textarea}
+            value={draft}
+            onChange={e => setDraft(e.target.value)}
+            placeholder="Free-text notes — one per line or comma-separated. Does not affect CPAS scoring."
+            autoFocus
+          />
+          <div style={s.actions}>
+            <button style={s.saveBtn} onClick={handleSave} disabled={saving}>
+              {saving ? 'Saving…' : 'Save Notes'}
+            </button>
+            <button style={s.cancelBtn} onClick={handleCancel} disabled={saving}>
+              Cancel
+            </button>
+            {saving && <span style={s.saving}>Saving…</span>}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
-- 
2.52.0


From 57d0ac975507a684d3505d4a4be251bf2eb3e85b Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:44:54 -0600
Subject: [PATCH 27/86] feat: wire ExpirationTimeline and EmployeeNotes into
 EmployeeModal

---
 client/src/components/EmployeeModal.jsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/client/src/components/EmployeeModal.jsx b/client/src/components/EmployeeModal.jsx
index 4706e87..d1a57f7 100755
--- a/client/src/components/EmployeeModal.jsx
+++ b/client/src/components/EmployeeModal.jsx
@@ -4,6 +4,8 @@ import CpasBadge, { getTier } from './CpasBadge';
 import NegateModal from './NegateModal';
 import EditEmployeeModal from './EditEmployeeModal';
 import AmendViolationModal from './AmendViolationModal';
+import ExpirationTimeline from './ExpirationTimeline';
+import EmployeeNotes from './EmployeeNotes';
 
 const s = {
   overlay: {
@@ -201,7 +203,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>
@@ -209,6 +211,23 @@ export default function EmployeeModal({ employeeId, onClose }) {
               )}
               {score && <CpasBadge points={score.active_points} style={{ marginBottom: '20px' }} />}
 
+              {/* ── Employee Notes ── */}
+              {employee && (
+                <EmployeeNotes
+                  employeeId={employeeId}
+                  initialNotes={employee.notes}
+                  onSaved={(notes) => setEmployee(prev => ({ ...prev, notes }))}
+                />
+              )}
+
+              {/* ── Expiration Timeline ── */}
+              {score && score.active_points > 0 && (
+                <ExpirationTimeline
+                  employeeId={employeeId}
+                  currentPoints={score.active_points}
+                />
+              )}
+
               {/* ── Active Violations ── */}
               <div style={s.sectionHd}>Active Violations</div>
               {active.length === 0 ? (
-- 
2.52.0


From 9d4d465755d0993789d8864a38fff5969ddecf2a Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:51:57 -0600
Subject: [PATCH 28/86] =?UTF-8?q?feat:=20ReadmeModal=20=E2=80=94=20full=20?=
 =?UTF-8?q?README=20rendered=20in=20a=20themed=20slide-in=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/ReadmeModal.jsx | 451 ++++++++++++++++++++++++++
 1 file changed, 451 insertions(+)
 create mode 100644 client/src/components/ReadmeModal.jsx

diff --git a/client/src/components/ReadmeModal.jsx b/client/src/components/ReadmeModal.jsx
new file mode 100644
index 0000000..e2c4588
--- /dev/null
+++ b/client/src/components/ReadmeModal.jsx
@@ -0,0 +1,451 @@
+import React, { useEffect, useRef } from 'react';
+
+// ─── Minimal Markdown → HTML renderer ────────────────────────────────────────
+// Handles: headings, bold, inline-code, fenced code blocks, tables, hr,
+// unordered lists, ordered lists, and paragraphs.
+function mdToHtml(md) {
+  const lines  = md.split('\n');
+  const out    = [];
+  let i        = 0;
+  let inUl     = false;
+  let inOl     = false;
+  let inTable  = false;
+  let tableHead = false;
+
+  const closeOpenLists = () => {
+    if (inUl)    { out.push('</ul>');   inUl    = false; }
+    if (inOl)    { out.push('</ol>');   inOl    = false; }
+    if (inTable) { out.push('</tbody></table>'); inTable = false; tableHead = false; }
+  };
+
+  const inline = (s) =>
+    s
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+      .replace(/`([^`]+)`/g, '<code>$1</code>');
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Fenced code block
+    if (line.startsWith('```')) {
+      closeOpenLists();
+      const lang = line.slice(3).trim();
+      const codeLines = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith('```')) {
+        codeLines.push(lines[i].replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'));
+        i++;
+      }
+      out.push(`<pre><code class="lang-${lang}">${codeLines.join('\n')}</code></pre>`);
+      i++;
+      continue;
+    }
+
+    // HR
+    if (/^---+$/.test(line.trim())) {
+      closeOpenLists();
+      out.push('<hr>');
+      i++;
+      continue;
+    }
+
+    // Headings
+    const hMatch = line.match(/^(#{1,4})\s+(.+)/);
+    if (hMatch) {
+      closeOpenLists();
+      const level = hMatch[1].length;
+      const id    = hMatch[2].toLowerCase().replace(/[^a-z0-9]+/g, '-');
+      out.push(`<h${level} id="${id}">${inline(hMatch[2])}</h${level}>`);
+      i++;
+      continue;
+    }
+
+    // Table row
+    if (line.trim().startsWith('|')) {
+      const cells = line.trim().replace(/^\||\|$/g, '').split('|').map(c => c.trim());
+      if (!inTable) {
+        closeOpenLists();
+        inTable   = true;
+        tableHead = true;
+        out.push('<table><thead><tr>');
+        cells.forEach(c => out.push(`<th>${inline(c)}</th>`));
+        out.push('</tr></thead><tbody>');
+        i++;
+        // skip separator row
+        if (i < lines.length && lines[i].trim().startsWith('|') && /^[\|\s\-:]+$/.test(lines[i])) i++;
+        continue;
+      } else {
+        out.push('<tr>');
+        cells.forEach(c => out.push(`<td>${inline(c)}</td>`));
+        out.push('</tr>');
+        i++;
+        continue;
+      }
+    }
+
+    // Unordered list
+    const ulMatch = line.match(/^[-*]\s+(.*)/);
+    if (ulMatch) {
+      if (inTable) closeOpenLists();
+      if (!inUl) { if (inOl) { out.push('</ol>'); inOl = false; } out.push('<ul>'); inUl = true; }
+      out.push(`<li>${inline(ulMatch[1])}</li>`);
+      i++;
+      continue;
+    }
+
+    // Ordered list
+    const olMatch = line.match(/^\d+\.\s+(.*)/);
+    if (olMatch) {
+      if (inTable) closeOpenLists();
+      if (!inOl) { if (inUl) { out.push('</ul>'); inUl = false; } out.push('<ol>'); inOl = true; }
+      out.push(`<li>${inline(olMatch[1])}</li>`);
+      i++;
+      continue;
+    }
+
+    // Blank line
+    if (line.trim() === '') {
+      closeOpenLists();
+      i++;
+      continue;
+    }
+
+    // Paragraph
+    closeOpenLists();
+    out.push(`<p>${inline(line)}</p>`);
+    i++;
+  }
+
+  closeOpenLists();
+  return out.join('\n');
+}
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+const overlay = {
+  position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)',
+  zIndex: 2000, display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end',
+};
+
+const panel = {
+  background: '#111217', color: '#f8f9fa', width: '760px', maxWidth: '95vw',
+  height: '100vh', overflowY: 'auto', boxShadow: '-4px 0 32px rgba(0,0,0,0.8)',
+  display: 'flex', flexDirection: 'column',
+};
+
+const header = {
+  background: 'linear-gradient(135deg, #000000, #151622)', color: 'white',
+  padding: '22px 28px', position: 'sticky', top: 0, zIndex: 10,
+  borderBottom: '1px solid #222', display: 'flex', alignItems: 'center',
+  justifyContent: 'space-between',
+};
+
+const closeBtn = {
+  background: 'none', border: 'none', color: 'white',
+  fontSize: '22px', cursor: 'pointer', lineHeight: 1,
+};
+
+const body = {
+  padding: '28px 32px', flex: 1, fontSize: '13px', lineHeight: '1.7',
+};
+
+// Injected <style> for rendered markdown elements
+const CSS = `
+.readme-body h1 { font-size: 22px; font-weight: 800; color: #f8f9fa; margin: 28px 0 10px; border-bottom: 1px solid #2a2b3a; padding-bottom: 8px; }
+.readme-body h2 { font-size: 17px; font-weight: 700; color: #d4af37; margin: 26px 0 8px; }
+.readme-body h3 { font-size: 14px; font-weight: 700; color: #90caf9; margin: 20px 0 6px; text-transform: uppercase; letter-spacing: 0.4px; }
+.readme-body h4 { font-size: 13px; font-weight: 700; color: #9ca0b8; margin: 14px 0 4px; }
+.readme-body p  { color: #c8ccd8; margin: 6px 0 10px; }
+.readme-body hr { border: none; border-top: 1px solid #2a2b3a; margin: 20px 0; }
+.readme-body strong { color: #f8f9fa; }
+.readme-body code {
+  background: #0d1117; color: #79c0ff; border: 1px solid #2a2b3a;
+  border-radius: 4px; padding: 1px 6px; font-family: 'Consolas', 'Fira Code', monospace; font-size: 12px;
+}
+.readme-body pre {
+  background: #0d1117; border: 1px solid #2a2b3a; border-radius: 6px;
+  padding: 14px 16px; overflow-x: auto; margin: 10px 0 16px;
+}
+.readme-body pre code {
+  background: none; border: none; padding: 0; color: #e6edf3;
+  font-size: 12px; line-height: 1.6;
+}
+.readme-body ul { padding-left: 22px; margin: 6px 0 10px; color: #c8ccd8; }
+.readme-body ol { padding-left: 22px; margin: 6px 0 10px; color: #c8ccd8; }
+.readme-body li { margin: 3px 0; }
+.readme-body table {
+  width: 100%; border-collapse: collapse; font-size: 12px;
+  background: #181924; border-radius: 6px; overflow: hidden;
+  border: 1px solid #2a2b3a; margin: 10px 0 16px;
+}
+.readme-body th {
+  background: #050608; padding: 8px 12px; text-align: left;
+  color: #f8f9fa; font-weight: 600; font-size: 11px; text-transform: uppercase;
+  border-bottom: 1px solid #2a2b3a;
+}
+.readme-body td {
+  padding: 8px 12px; border-bottom: 1px solid #202231; color: #c8ccd8;
+}
+.readme-body tr:last-child td { border-bottom: none; }
+.readme-body tr:hover td { background: #1e1f2e; }
+`;
+
+// ─── Table-of-contents builder ────────────────────────────────────────────────
+function buildToc(md) {
+  const headings = [];
+  for (const line of md.split('\n')) {
+    const m = line.match(/^(#{1,3})\s+(.+)/);
+    if (m) {
+      headings.push({
+        level: m[1].length,
+        text:  m[2],
+        id:    m[2].toLowerCase().replace(/[^a-z0-9]+/g, '-'),
+      });
+    }
+  }
+  return headings;
+}
+
+// ─── README content ───────────────────────────────────────────────────────────
+// Embedded at build time — no extra fetch needed.
+const README_MD = `# CPAS Violation Tracker
+
+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).
+
+---
+
+## Quickstart (Local)
+
+\`\`\`bash
+# 1. Build the image
+docker build -t cpas-tracker .
+
+# 2. Run it
+docker run -d --name cpas-tracker \\
+  -p 3001:3001 \\
+  -v cpas-data:/data \\
+  cpas-tracker
+\`\`\`
+
+Open **http://localhost:3001**
+
+## 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
+\`\`\`
+
+---
+
+## Features
+
+### Company Dashboard
+- Live employee table sorted by active CPAS points (highest risk first)
+- Stat cards: total employees, elite standing, active points, at-risk count, highest score
+- **At-risk badge** — flags employees within 2 points of the next tier escalation
+- Search/filter by name, department, or supervisor
+- **Audit Log** button — filterable, paginated view of all system write actions
+
+### Violation Form
+- Select existing employee or enter new by name
+- **Employee intelligence** — shows current CPAS standing before submitting
+- Violation type dropdown grouped by category with 90-day recurrence counts
+- **Recidivist auto-escalation** — points slider auto-maximizes on repeat violations
+- **Tier crossing warning** — previews tier impact before submission
+- One-click PDF download after submission
+
+### Employee Profile Modal
+- Full violation history with resolution status and amendment count badges
+- **Edit Employee** — update name, department, or supervisor inline
+- **Merge Duplicate** — reassign all violations from a duplicate record
+- **Amend** per active violation — edit non-scoring fields with full diff history
+- Negate / restore individual violations (soft delete with resolution type + notes)
+- Hard delete option for data entry errors
+- **Notes & Flags** — free-text notes (e.g. "on PIP", "union member") visible in the profile
+- **Point Expiration Timeline** — shows when each active violation rolls off the 90-day window with tier-drop projections
+
+### Audit Log
+- Append-only log of every write action
+- Filterable by entity type and action; paginated with load-more
+
+### Violation Amendment
+- Edit submitted violations' non-scoring fields without delete-and-resubmit
+- Point values, violation type, and incident date are immutable
+- Every change stored as a field-level diff (old → new) with timestamp
+
+---
+
+## CPAS Tier System
+
+| Points | Tier | Label |
+|--------|------|-------|
+| 0–4 | 0–1 | Elite Standing |
+| 5–9 | 1 | Realignment |
+| 10–14 | 2 | Administrative Lockdown |
+| 15–19 | 3 | Verification |
+| 20–24 | 4 | Risk Mitigation |
+| 25–29 | 5 | Final Decision |
+| 30+ | 6 | Separation |
+
+Scores are computed over a **rolling 90-day window** (negated violations excluded).
+
+---
+
+## API Reference
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| GET | \`/api/health\` | Health check |
+| GET | \`/api/employees\` | List all employees (includes notes) |
+| POST | \`/api/employees\` | Create or upsert employee |
+| PATCH | \`/api/employees/:id\` | Edit name, department, supervisor, or notes |
+| POST | \`/api/employees/:id/merge\` | Merge duplicate employee |
+| GET | \`/api/employees/:id/score\` | Active CPAS score |
+| GET | \`/api/employees/:id/expiration\` | Active violation roll-off timeline |
+| PATCH | \`/api/employees/:id/notes\` | Save employee notes only |
+| GET | \`/api/dashboard\` | All employees with active points |
+| POST | \`/api/violations\` | Log a new violation |
+| GET | \`/api/violations/employee/:id\` | Violation history with resolutions + amendment counts |
+| PATCH | \`/api/violations/:id/negate\` | Soft delete + resolution record |
+| PATCH | \`/api/violations/:id/restore\` | Restore a negated violation |
+| PATCH | \`/api/violations/:id/amend\` | Amend non-scoring fields |
+| GET | \`/api/violations/:id/amendments\` | Amendment history |
+| DELETE | \`/api/violations/:id\` | Hard delete |
+| GET | \`/api/violations/:id/pdf\` | Download violation PDF |
+| GET | \`/api/audit\` | Paginated audit log |
+
+---
+
+## Database Schema
+
+Six tables + one view:
+
+- **\`employees\`** — id, name, department, supervisor, **notes**
+- **\`violations\`** — full incident record including \`prior_active_points\` snapshot
+- **\`violation_resolutions\`** — resolution type, details, resolved_by
+- **\`violation_amendments\`** — field-level diff log per amendment
+- **\`audit_log\`** — append-only record of every write action
+- **\`active_cpas_scores\`** (view) — rolling 90-day score per employee
+
+---
+
+## Amendable Fields
+
+The following violation fields can be edited after submission. Points, type, and incident date are **immutable**.
+
+| Field | Notes |
+|-------|-------|
+| \`incident_time\` | Time of day the incident occurred |
+| \`location\` | Where the incident took place |
+| \`details\` | Narrative description |
+| \`submitted_by\` | Supervisor who submitted |
+| \`witness_name\` | Witness on record |
+
+---
+
+## Docker Quick Reference
+
+\`\`\`bash
+# Build
+docker build -t cpas-tracker .
+
+# Run
+docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker
+
+# Stop / remove
+docker stop cpas-tracker && docker rm cpas-tracker
+
+# Export for Unraid
+docker save cpas-tracker | gzip > cpas-tracker.tar.gz
+
+# View logs
+docker logs -f cpas-tracker
+\`\`\`
+`;
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export default function ReadmeModal({ onClose }) {
+  const bodyRef  = useRef(null);
+  const html     = mdToHtml(README_MD);
+  const toc      = buildToc(README_MD);
+
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose]);
+
+  const scrollTo = (id) => {
+    const el = bodyRef.current?.querySelector(`#${id}`);
+    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+
+  const handleOverlay = (e) => { if (e.target === e.currentTarget) onClose(); };
+
+  return (
+    <div style={overlay} onClick={handleOverlay}>
+      {/* Inject markdown CSS once */}
+      <style>{CSS}</style>
+
+      <div style={panel} onClick={(e) => e.stopPropagation()}>
+
+        {/* Header */}
+        <div style={header}>
+          <div>
+            <div style={{ fontSize: '17px', fontWeight: 800, letterSpacing: '0.3px' }}>
+              📋 CPAS Tracker — Documentation
+            </div>
+            <div style={{ fontSize: '11px', color: '#9ca0b8', marginTop: '3px' }}>
+              Admin reference · use Esc or click outside to close
+            </div>
+          </div>
+          <button style={closeBtn} onClick={onClose} aria-label="Close">✕</button>
+        </div>
+
+        {/* TOC strip */}
+        <div style={{
+          background: '#0d1117', borderBottom: '1px solid #1e1f2e',
+          padding: '10px 32px', display: 'flex', flexWrap: 'wrap', gap: '4px 16px',
+          fontSize: '11px',
+        }}>
+          {toc.filter(h => h.level <= 2).map((h) => (
+            <button
+              key={h.id}
+              onClick={() => scrollTo(h.id)}
+              style={{
+                background: 'none', border: 'none', cursor: 'pointer', padding: '2px 0',
+                color: h.level === 1 ? '#f8f9fa' : '#90caf9',
+                fontWeight: h.level === 1 ? 700 : 400,
+                fontSize: '11px',
+              }}
+            >
+              {h.level === 2 ? '↳ ' : ''}{h.text}
+            </button>
+          ))}
+        </div>
+
+        {/* Body */}
+        <div
+          ref={bodyRef}
+          style={body}
+          className="readme-body"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+
+        {/* Footer */}
+        <div style={{
+          padding: '14px 32px', borderTop: '1px solid #1e1f2e',
+          fontSize: '11px', color: '#555770', textAlign: 'center',
+        }}>
+          CPAS Violation Tracker · internal admin use only
+        </div>
+      </div>
+    </div>
+  );
+}
-- 
2.52.0


From d4638783a4b49c3a38eea12a6bb3102ac43629c5 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 09:52:16 -0600
Subject: [PATCH 29/86] =?UTF-8?q?feat:=20add=20Docs=20button=20to=20navbar?=
 =?UTF-8?q?=20=E2=80=94=20opens=20ReadmeModal=20slide-in=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/App.jsx | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 6fdac9c..8639fb6 100755
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import ViolationForm from './components/ViolationForm';
 import Dashboard     from './components/Dashboard';
+import ReadmeModal   from './components/ReadmeModal';
 
 const tabs = [
   { id: 'dashboard', label: '📊 Dashboard' },
@@ -20,11 +21,29 @@ 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',
+    border: '1px solid #2a2b3a',
+    color: '#9ca0b8',
+    borderRadius: '6px',
+    padding: '6px 14px',
+    fontSize: '12px',
+    cursor: 'pointer',
+    fontWeight: 600,
+    letterSpacing: '0.3px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+  },
   card: { maxWidth: '1100px', margin: '30px auto', background: '#111217', borderRadius: '10px', boxShadow: '0 2px 16px rgba(0,0,0,0.6)', border: '1px solid #222' },
 };
 
 export default function App() {
-  const [tab, setTab] = useState('dashboard');
+  const [tab,        setTab]        = useState('dashboard');
+  const [showReadme, setShowReadme] = useState(false);
+
   return (
     <div style={s.app}>
       <nav style={s.nav}>
@@ -32,15 +51,23 @@ export default function App() {
           <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
           <div style={s.logoText}>CPAS Tracker</div>
         </div>
+
         {tabs.map(t => (
           <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
             {t.label}
           </button>
         ))}
+
+        <button style={s.docsBtn} onClick={() => setShowReadme(true)} title="Open admin documentation">
+          <span>?</span> Docs
+        </button>
       </nav>
+
       <div style={s.card}>
         {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
       </div>
+
+      {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
     </div>
   );
 }
-- 
2.52.0


From b5a588e75255f330447d0b953922c7dac9d061d2 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 18:31:14 -0600
Subject: [PATCH 30/86] =?UTF-8?q?docs:=20update=20README=20=E2=80=94=20add?=
 =?UTF-8?q?=20notes/expiration=20features,=20new=20endpoints,=20updated=20?=
 =?UTF-8?q?schema=20and=20roadmap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 91 ++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 56 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index 8a9d576..ee3a454 100755
--- a/README.md
+++ b/README.md
@@ -53,7 +53,7 @@ docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker
 - **At-risk badge**: flags employees within 2 points of the next tier escalation
 - Search/filter by name, department, or supervisor
 - Click any employee name to open their full profile modal
-- **📋 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
@@ -68,12 +68,14 @@ docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker
 
 ### Employee Profile Modal
 - Full violation history with resolution status and **amendment count badge** per record
-- **✎ Edit Employee** button — update name, department, or supervisor inline
+- **✎ 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
 - 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
 
 ### Audit Log
 - Append-only log of every write action: employee created/edited/merged, violation logged/amended/negated/restored/deleted
@@ -85,6 +87,11 @@ docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker
 - Point values, violation type, and incident date are immutable
 - Every change is stored as a field-level diff (old → new value) with timestamp and actor
 
+### In-App Documentation
+- **? Docs** button in the navbar opens a slide-in admin reference panel
+- Covers feature map, CPAS tier system, workflow guidance, and roadmap
+- No external link required; always reflects current deployed version
+
 ### CPAS Tier System
 
 | Points | Tier | Label |
@@ -112,21 +119,23 @@ Scores are computed over a **rolling 90-day window** (negated violations exclude
 | Method | Endpoint | Description |
 |--------|----------|-------------|
 | GET | `/api/health` | Health check |
-| GET | `/api/employees` | List all employees |
+| GET | `/api/employees` | List all employees (includes `notes`) |
 | POST | `/api/employees` | Create or upsert employee |
-| PATCH | `/api/employees/:id` | Edit employee name, department, or supervisor |
-| POST | `/api/employees/:id/merge` | Merge duplicate employee into target; reassigns all violations |
+| PATCH | `/api/employees/:id` | Edit name, department, supervisor, or notes |
+| POST | `/api/employees/:id/merge` | Merge duplicate employee; reassigns all violations |
 | GET | `/api/employees/:id/score` | Get active CPAS score for employee |
+| 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 |
-| GET | `/api/violations/employee/:id` | Get violation history for employee (with resolutions + amendment counts) |
+| 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/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 |
 | DELETE | `/api/violations/:id` | Hard delete a violation |
 | GET | `/api/violations/:id/pdf` | Download violation PDF |
-| GET | `/api/audit` | Paginated audit log (filterable by entity_type, entity_id) |
+| GET | `/api/audit` | Paginated audit log (filterable by `entity_type`, `entity_id`) |
 
 ---
 
@@ -134,16 +143,16 @@ 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
-│   └── database.js                      # SQLite connection (better-sqlite3) + auto-migrations
+│   ├── schema.sql                          # Tables + 90-day active score view
+│   └── database.js                         # SQLite connection (better-sqlite3) + auto-migrations
 ├── pdf/
-│   └── generator.js                     # Puppeteer PDF generation
-└── client/                              # React frontend (Vite)
+│   └── generator.js                        # Puppeteer PDF generation
+└── client/                                 # React frontend (Vite)
     ├── package.json
     ├── vite.config.js
     ├── index.html
@@ -151,20 +160,23 @@ cpas/
         ├── main.jsx
         ├── App.jsx
         ├── data/
-        │   └── violations.js            # All CPAS violation definitions + groups
+        │   └── violations.js               # All CPAS violation definitions + groups
         ├── hooks/
         │   └── 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
+            ├── 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
 ```
 
 ---
@@ -173,7 +185,7 @@ cpas/
 
 Six tables + one view:
 
-- **`employees`** — id, name, department, supervisor
+- **`employees`** — id, name, department, supervisor, **notes**
 - **`violations`** — full incident record including `prior_active_points` snapshot at time of logging
 - **`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
@@ -182,6 +194,20 @@ Six tables + one view:
 
 ---
 
+## Amendable Fields
+
+Point values, violation type, and incident date are **immutable** after submission. The following fields can be amended:
+
+| Field | Notes |
+|-------|-------|
+| `incident_time` | Time of day the incident occurred |
+| `location` | Where the incident took place |
+| `details` | Narrative description |
+| `submitted_by` | Supervisor who submitted |
+| `witness_name` | Witness on record |
+
+---
+
 ## Roadmap
 
 ### ✅ Completed
@@ -204,18 +230,13 @@ Six tables + one view:
 | 5 | Employee edit / merge | Update employee name/dept/supervisor; merge duplicate records without losing history |
 | 5 | Violation amendment | Edit non-scoring fields with field-level audit trail |
 | 5 | Audit log | Append-only log of all system writes; filterable panel in the dashboard |
+| 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 |
 
 ---
 
-### 📋 In Progress
-
-#### Reporting & Visibility
-- **Expiration timeline** — per-employee view showing which active violations roll off the 90-day window and when; lets supervisors anticipate tier drops before they happen
-- **Employee notes / flags** — free-text notes attached to an employee record (e.g. "on PIP", "union member") visible in the profile modal without affecting scoring
-
----
-
-### 💡 Proposed
+### 📋 Proposed
 
 #### Reporting & Analytics
 - **Violation trends chart** — line/bar chart of violations per day/week/month, filterable by department or supervisor; useful for identifying systemic patterns vs. individual incidents
-- 
2.52.0


From db3470099699af6eae1f996363a80c976d40f678 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 18:33:50 -0600
Subject: [PATCH 31/86] =?UTF-8?q?docs:=20sync=20README=20=E2=80=94=20add?=
 =?UTF-8?q?=20in-app=20docs=20to=20features=20+=20completed=20roadmap=20ph?=
 =?UTF-8?q?ase=206?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 44 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index ee3a454..5b16a3d 100755
--- a/README.md
+++ b/README.md
@@ -143,16 +143,16 @@ 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
-│   └── database.js                         # SQLite connection (better-sqlite3) + auto-migrations
+│   ├── schema.sql                                # Tables + 90-day active score view
+│   └── database.js                               # SQLite connection (better-sqlite3) + auto-migrations
 ├── pdf/
-│   └── generator.js                        # Puppeteer PDF generation
-└── client/                                 # React frontend (Vite)
+│   └── generator.js                              # Puppeteer PDF generation
+└── client/                                       # React frontend (Vite)
     ├── package.json
     ├── vite.config.js
     ├── index.html
@@ -160,23 +160,23 @@ cpas/
         ├── main.jsx
         ├── App.jsx
         ├── 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
+            ├── 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
 ```
 
 ---
-- 
2.52.0


From 84f51248506ad72aabae53f5c76f9ab8d7883c08 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 18:33:54 -0600
Subject: [PATCH 32/86] =?UTF-8?q?docs:=20rewrite=20ReadmeModal=20as=20admi?=
 =?UTF-8?q?n=20usage=20guide=20=E2=80=94=20feature=20map,=20workflow,=20ti?=
 =?UTF-8?q?er=20system,=20roadmap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/ReadmeModal.jsx | 567 ++++++++++++--------------
 1 file changed, 250 insertions(+), 317 deletions(-)

diff --git a/client/src/components/ReadmeModal.jsx b/client/src/components/ReadmeModal.jsx
index e2c4588..edadd0a 100644
--- a/client/src/components/ReadmeModal.jsx
+++ b/client/src/components/ReadmeModal.jsx
@@ -1,286 +1,145 @@
 import React, { useEffect, useRef } from 'react';
 
 // ─── Minimal Markdown → HTML renderer ────────────────────────────────────────
-// Handles: headings, bold, inline-code, fenced code blocks, tables, hr,
-// unordered lists, ordered lists, and paragraphs.
 function mdToHtml(md) {
-  const lines  = md.split('\n');
-  const out    = [];
-  let i        = 0;
-  let inUl     = false;
-  let inOl     = false;
-  let inTable  = false;
-  let tableHead = false;
+  const lines = md.split('\n');
+  const out   = [];
+  let i = 0, inUl = false, inOl = false, inTable = false;
 
-  const closeOpenLists = () => {
-    if (inUl)    { out.push('</ul>');   inUl    = false; }
-    if (inOl)    { out.push('</ol>');   inOl    = false; }
-    if (inTable) { out.push('</tbody></table>'); inTable = false; tableHead = false; }
+  const close = () => {
+    if (inUl)    { out.push('</ul>');            inUl    = false; }
+    if (inOl)    { out.push('</ol>');            inOl    = false; }
+    if (inTable) { out.push('</tbody></table>'); inTable = false; }
   };
 
-  const inline = (s) =>
-    s
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-      .replace(/`([^`]+)`/g, '<code>$1</code>');
+  const inline = s =>
+    s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+     .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
+     .replace(/`([^`]+)`/g,'<code>$1</code>');
 
   while (i < lines.length) {
     const line = lines[i];
 
-    // Fenced code block
     if (line.startsWith('```')) {
-      closeOpenLists();
-      const lang = line.slice(3).trim();
-      const codeLines = [];
+      close();
       i++;
-      while (i < lines.length && !lines[i].startsWith('```')) {
-        codeLines.push(lines[i].replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'));
-        i++;
-      }
-      out.push(`<pre><code class="lang-${lang}">${codeLines.join('\n')}</code></pre>`);
-      i++;
-      continue;
+      while (i < lines.length && !lines[i].startsWith('```')) i++;
+      i++; continue;
+    }
+    if (/^---+$/.test(line.trim())) { close(); out.push('<hr>'); i++; continue; }
+
+    const hm = line.match(/^(#{1,4})\s+(.+)/);
+    if (hm) {
+      close();
+      const lvl = hm[1].length;
+      const id  = hm[2].toLowerCase().replace(/[^a-z0-9]+/g,'-');
+      out.push(`<h${lvl} id="${id}">${inline(hm[2])}</h${lvl}>`);
+      i++; continue;
     }
 
-    // HR
-    if (/^---+$/.test(line.trim())) {
-      closeOpenLists();
-      out.push('<hr>');
-      i++;
-      continue;
-    }
-
-    // Headings
-    const hMatch = line.match(/^(#{1,4})\s+(.+)/);
-    if (hMatch) {
-      closeOpenLists();
-      const level = hMatch[1].length;
-      const id    = hMatch[2].toLowerCase().replace(/[^a-z0-9]+/g, '-');
-      out.push(`<h${level} id="${id}">${inline(hMatch[2])}</h${level}>`);
-      i++;
-      continue;
-    }
-
-    // Table row
     if (line.trim().startsWith('|')) {
-      const cells = line.trim().replace(/^\||\|$/g, '').split('|').map(c => c.trim());
+      const cells = line.trim().replace(/^\||\|$/g,'').split('|').map(c=>c.trim());
       if (!inTable) {
-        closeOpenLists();
-        inTable   = true;
-        tableHead = true;
+        close(); inTable = true;
         out.push('<table><thead><tr>');
         cells.forEach(c => out.push(`<th>${inline(c)}</th>`));
         out.push('</tr></thead><tbody>');
         i++;
-        // skip separator row
-        if (i < lines.length && lines[i].trim().startsWith('|') && /^[\|\s\-:]+$/.test(lines[i])) 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;
+        i++; continue;
       }
     }
 
-    // Unordered list
-    const ulMatch = line.match(/^[-*]\s+(.*)/);
-    if (ulMatch) {
-      if (inTable) closeOpenLists();
-      if (!inUl) { if (inOl) { out.push('</ol>'); inOl = false; } out.push('<ul>'); inUl = true; }
-      out.push(`<li>${inline(ulMatch[1])}</li>`);
-      i++;
-      continue;
+    const ul = line.match(/^[-*]\s+(.*)/);
+    if (ul) {
+      if (inTable) close();
+      if (!inUl) { if (inOl) { out.push('</ol>'); inOl=false; } out.push('<ul>'); inUl=true; }
+      out.push(`<li>${inline(ul[1])}</li>`);
+      i++; continue;
     }
 
-    // Ordered list
-    const olMatch = line.match(/^\d+\.\s+(.*)/);
-    if (olMatch) {
-      if (inTable) closeOpenLists();
-      if (!inOl) { if (inUl) { out.push('</ul>'); inUl = false; } out.push('<ol>'); inOl = true; }
-      out.push(`<li>${inline(olMatch[1])}</li>`);
-      i++;
-      continue;
+    const ol = line.match(/^\d+\.\s+(.*)/);
+    if (ol) {
+      if (inTable) close();
+      if (!inOl) { if (inUl) { out.push('</ul>'); inUl=false; } out.push('<ol>'); inOl=true; }
+      out.push(`<li>${inline(ol[1])}</li>`);
+      i++; continue;
     }
 
-    // Blank line
-    if (line.trim() === '') {
-      closeOpenLists();
-      i++;
-      continue;
-    }
+    if (line.trim() === '') { close(); i++; continue; }
 
-    // Paragraph
-    closeOpenLists();
+    close();
     out.push(`<p>${inline(line)}</p>`);
     i++;
   }
-
-  closeOpenLists();
+  close();
   return out.join('\n');
 }
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
-const overlay = {
-  position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)',
-  zIndex: 2000, display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end',
+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:'780px', maxWidth:'95vw',
+    height:'100vh', overflowY:'auto', boxShadow:'-4px 0 32px rgba(0,0,0,0.85)',
+    display:'flex', flexDirection:'column',
+  },
+  header: {
+    background:'linear-gradient(135deg,#000000,#151622)', color:'white',
+    padding:'22px 28px', position:'sticky', top:0, zIndex:10,
+    borderBottom:'1px solid #222', display:'flex', alignItems:'center',
+    justifyContent:'space-between',
+  },
+  closeBtn: { background:'none', border:'none', color:'white', fontSize:'22px', cursor:'pointer', lineHeight:1 },
+  toc: {
+    background:'#0d1117', borderBottom:'1px solid #1e1f2e',
+    padding:'10px 32px', display:'flex', flexWrap:'wrap', gap:'4px 18px', fontSize:'11px',
+  },
+  body: { padding:'28px 32px', flex:1, fontSize:'13px', lineHeight:'1.75' },
+  footer: { padding:'14px 32px', borderTop:'1px solid #1e1f2e', fontSize:'11px', color:'#555770', textAlign:'center' },
 };
 
-const panel = {
-  background: '#111217', color: '#f8f9fa', width: '760px', maxWidth: '95vw',
-  height: '100vh', overflowY: 'auto', boxShadow: '-4px 0 32px rgba(0,0,0,0.8)',
-  display: 'flex', flexDirection: 'column',
-};
-
-const header = {
-  background: 'linear-gradient(135deg, #000000, #151622)', color: 'white',
-  padding: '22px 28px', position: 'sticky', top: 0, zIndex: 10,
-  borderBottom: '1px solid #222', display: 'flex', alignItems: 'center',
-  justifyContent: 'space-between',
-};
-
-const closeBtn = {
-  background: 'none', border: 'none', color: 'white',
-  fontSize: '22px', cursor: 'pointer', lineHeight: 1,
-};
-
-const body = {
-  padding: '28px 32px', flex: 1, fontSize: '13px', lineHeight: '1.7',
-};
-
-// Injected <style> for rendered markdown elements
 const CSS = `
-.readme-body h1 { font-size: 22px; font-weight: 800; color: #f8f9fa; margin: 28px 0 10px; border-bottom: 1px solid #2a2b3a; padding-bottom: 8px; }
-.readme-body h2 { font-size: 17px; font-weight: 700; color: #d4af37; margin: 26px 0 8px; }
-.readme-body h3 { font-size: 14px; font-weight: 700; color: #90caf9; margin: 20px 0 6px; text-transform: uppercase; letter-spacing: 0.4px; }
-.readme-body h4 { font-size: 13px; font-weight: 700; color: #9ca0b8; margin: 14px 0 4px; }
-.readme-body p  { color: #c8ccd8; margin: 6px 0 10px; }
-.readme-body hr { border: none; border-top: 1px solid #2a2b3a; margin: 20px 0; }
-.readme-body strong { color: #f8f9fa; }
-.readme-body code {
-  background: #0d1117; color: #79c0ff; border: 1px solid #2a2b3a;
-  border-radius: 4px; padding: 1px 6px; font-family: 'Consolas', 'Fira Code', monospace; font-size: 12px;
-}
-.readme-body pre {
-  background: #0d1117; border: 1px solid #2a2b3a; border-radius: 6px;
-  padding: 14px 16px; overflow-x: auto; margin: 10px 0 16px;
-}
-.readme-body pre code {
-  background: none; border: none; padding: 0; color: #e6edf3;
-  font-size: 12px; line-height: 1.6;
-}
-.readme-body ul { padding-left: 22px; margin: 6px 0 10px; color: #c8ccd8; }
-.readme-body ol { padding-left: 22px; margin: 6px 0 10px; color: #c8ccd8; }
-.readme-body li { margin: 3px 0; }
-.readme-body table {
-  width: 100%; border-collapse: collapse; font-size: 12px;
-  background: #181924; border-radius: 6px; overflow: hidden;
-  border: 1px solid #2a2b3a; margin: 10px 0 16px;
-}
-.readme-body th {
-  background: #050608; padding: 8px 12px; text-align: left;
-  color: #f8f9fa; font-weight: 600; font-size: 11px; text-transform: uppercase;
-  border-bottom: 1px solid #2a2b3a;
-}
-.readme-body td {
-  padding: 8px 12px; border-bottom: 1px solid #202231; color: #c8ccd8;
-}
-.readme-body tr:last-child td { border-bottom: none; }
-.readme-body tr:hover td { background: #1e1f2e; }
+.adm h1 { font-size:21px; font-weight:800; color:#f8f9fa; margin:28px 0 10px; border-bottom:1px solid #2a2b3a; padding-bottom:8px; }
+.adm h2 { font-size:16px; font-weight:700; color:#d4af37; margin:28px 0 6px; letter-spacing:.2px; }
+.adm h3 { font-size:12px; font-weight:700; color:#90caf9; margin:18px 0 4px; text-transform:uppercase; letter-spacing:.5px; }
+.adm h4 { font-size:13px; font-weight:600; color:#b0b8d0; margin:14px 0 4px; }
+.adm p  { color:#c8ccd8; margin:5px 0 10px; }
+.adm hr { border:none; border-top:1px solid #2a2b3a; margin:22px 0; }
+.adm strong { color:#f8f9fa; }
+.adm code { background:#0d1117; color:#79c0ff; border:1px solid #2a2b3a; border-radius:4px; padding:1px 6px; font-family:'Consolas','Fira Code',monospace; font-size:12px; }
+.adm ul { padding-left:20px; margin:5px 0 10px; color:#c8ccd8; }
+.adm ol { padding-left:20px; margin:5px 0 10px; color:#c8ccd8; }
+.adm li { margin:4px 0; }
+.adm table { width:100%; border-collapse:collapse; font-size:12px; background:#181924; border-radius:6px; overflow:hidden; border:1px solid #2a2b3a; margin:10px 0 16px; }
+.adm th { background:#050608; padding:8px 12px; text-align:left; color:#f8f9fa; font-weight:600; font-size:11px; text-transform:uppercase; border-bottom:1px solid #2a2b3a; }
+.adm td { padding:8px 12px; border-bottom:1px solid #202231; color:#c8ccd8; }
+.adm tr:last-child td { border-bottom:none; }
+.adm tr:hover td { background:#1e1f2e; }
 `;
 
-// ─── Table-of-contents builder ────────────────────────────────────────────────
-function buildToc(md) {
-  const headings = [];
-  for (const line of md.split('\n')) {
-    const m = line.match(/^(#{1,3})\s+(.+)/);
-    if (m) {
-      headings.push({
-        level: m[1].length,
-        text:  m[2],
-        id:    m[2].toLowerCase().replace(/[^a-z0-9]+/g, '-'),
-      });
-    }
-  }
-  return headings;
-}
+// ─── Admin guide content ──────────────────────────────────────────────────────
+const GUIDE_MD = `# CPAS Tracker — Admin Guide
 
-// ─── README content ───────────────────────────────────────────────────────────
-// Embedded at build time — no extra fetch needed.
-const README_MD = `# CPAS Violation Tracker
-
-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).
+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.
 
 ---
 
-## Quickstart (Local)
+## How CPAS Scoring Works
 
-\`\`\`bash
-# 1. Build the image
-docker build -t cpas-tracker .
+Every violation carries a **point value** set at the time of submission. Points count toward an employee's score only within a **rolling 90-day window** — once a violation is older than 90 days it automatically drops off and the score recalculates.
 
-# 2. Run it
-docker run -d --name cpas-tracker \\
-  -p 3001:3001 \\
-  -v cpas-data:/data \\
-  cpas-tracker
-\`\`\`
+Negated (voided) violations are excluded from scoring immediately. Hard-deleted violations are removed from the record entirely.
 
-Open **http://localhost:3001**
-
-## 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
-\`\`\`
-
----
-
-## Features
-
-### Company Dashboard
-- Live employee table sorted by active CPAS points (highest risk first)
-- Stat cards: total employees, elite standing, active points, at-risk count, highest score
-- **At-risk badge** — flags employees within 2 points of the next tier escalation
-- Search/filter by name, department, or supervisor
-- **Audit Log** button — filterable, paginated view of all system write actions
-
-### Violation Form
-- Select existing employee or enter new by name
-- **Employee intelligence** — shows current CPAS standing before submitting
-- Violation type dropdown grouped by category with 90-day recurrence counts
-- **Recidivist auto-escalation** — points slider auto-maximizes on repeat violations
-- **Tier crossing warning** — previews tier impact before submission
-- One-click PDF download after submission
-
-### Employee Profile Modal
-- Full violation history with resolution status and amendment count badges
-- **Edit Employee** — update name, department, or supervisor inline
-- **Merge Duplicate** — reassign all violations from a duplicate record
-- **Amend** per active violation — edit non-scoring fields with full diff history
-- Negate / restore individual violations (soft delete with resolution type + notes)
-- Hard delete option for data entry errors
-- **Notes & Flags** — free-text notes (e.g. "on PIP", "union member") visible in the profile
-- **Point Expiration Timeline** — shows when each active violation rolls off the 90-day window with tier-drop projections
-
-### Audit Log
-- Append-only log of every write action
-- Filterable by entity type and action; paginated with load-more
-
-### Violation Amendment
-- Edit submitted violations' non-scoring fields without delete-and-resubmit
-- Point values, violation type, and incident date are immutable
-- Every change stored as a field-level diff (old → new) with timestamp
-
----
-
-## CPAS Tier System
+## Tier Reference
 
 | Points | Tier | Label |
 |--------|------|-------|
@@ -292,137 +151,214 @@ docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker
 | 25–29 | 5 | Final Decision |
 | 30+ | 6 | Separation |
 
-Scores are computed over a **rolling 90-day window** (negated violations excluded).
+The **at-risk badge** on the dashboard flags anyone within 2 points of the next tier threshold so supervisors can act before escalation occurs.
 
 ---
 
-## API Reference
+## Feature Map
 
-| Method | Endpoint | Description |
-|--------|----------|-------------|
-| GET | \`/api/health\` | Health check |
-| GET | \`/api/employees\` | List all employees (includes notes) |
-| POST | \`/api/employees\` | Create or upsert employee |
-| PATCH | \`/api/employees/:id\` | Edit name, department, supervisor, or notes |
-| POST | \`/api/employees/:id/merge\` | Merge duplicate employee |
-| GET | \`/api/employees/:id/score\` | Active CPAS score |
-| GET | \`/api/employees/:id/expiration\` | Active violation roll-off timeline |
-| PATCH | \`/api/employees/:id/notes\` | Save employee notes only |
-| GET | \`/api/dashboard\` | All employees with active points |
-| POST | \`/api/violations\` | Log a new violation |
-| GET | \`/api/violations/employee/:id\` | Violation history with resolutions + amendment counts |
-| PATCH | \`/api/violations/:id/negate\` | Soft delete + resolution record |
-| PATCH | \`/api/violations/:id/restore\` | Restore a negated violation |
-| PATCH | \`/api/violations/:id/amend\` | Amend non-scoring fields |
-| GET | \`/api/violations/:id/amendments\` | Amendment history |
-| DELETE | \`/api/violations/:id\` | Hard delete |
-| GET | \`/api/violations/:id/pdf\` | Download violation PDF |
-| GET | \`/api/audit\` | Paginated audit log |
+### Dashboard
+
+The main view. Employees are sorted by active CPAS points, highest first.
+
+- **Stat cards** — live counts: total employees, zero-point (elite), active points, at-risk, highest score
+- **Search / filter** — by name, department, or supervisor; narrows the table in real time
+- **At-risk badge** — gold flag on rows where the employee is within 2 pts of the next tier
+- **Audit Log button** — opens the filterable, paginated write-action log (top right of the dashboard toolbar)
+- **Click any name** — opens that employee's full profile modal
 
 ---
 
-## Database Schema
+### Logging a Violation
 
-Six tables + one view:
+Use the **+ New Violation** tab.
 
-- **\`employees\`** — id, name, department, supervisor, **notes**
-- **\`violations\`** — full incident record including \`prior_active_points\` snapshot
-- **\`violation_resolutions\`** — resolution type, details, resolved_by
-- **\`violation_amendments\`** — field-level diff log per amendment
-- **\`audit_log\`** — append-only record of every write action
-- **\`active_cpas_scores\`** (view) — rolling 90-day score per employee
+1. Select an existing employee from the dropdown, or type a new name to create a record on-the-fly.
+2. The **employee intelligence panel** loads their current tier badge and 90-day violation count before you commit.
+3. Choose a violation type. The dropdown is grouped by category and shows prior 90-day counts inline for each type.
+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.
 
 ---
 
-## Amendable Fields
+### Employee Profile Modal
 
-The following violation fields can be edited after submission. Points, type, and incident date are **immutable**.
+Click any name on the dashboard to open their profile.
 
-| Field | Notes |
-|-------|-------|
-| \`incident_time\` | Time of day the incident occurred |
-| \`location\` | Where the incident took place |
-| \`details\` | Narrative description |
-| \`submitted_by\` | Supervisor who submitted |
-| \`witness_name\` | Witness on record |
+#### Overview section
+Shows current tier badge, active points, and 90-day violation count.
+
+#### Notes & Flags
+Free-text field for HR context (e.g. "On PIP", "Union member", "Pending investigation", "FMLA"). Quick-add tag buttons pre-fill common statuses. Notes are visible to anyone who opens the profile but **do not affect CPAS scoring**. Edit inline; saves on blur.
+
+#### Point Expiration Timeline
+Visible when the employee has active points. Shows each active violation as a progress bar indicating how far through its 90-day window it is, days remaining until roll-off, and a **tier-drop indicator** for violations whose expiration would move the employee down a tier.
+
+#### 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.
+- **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.
+
+#### Edit Employee
+Update name, department, or supervisor. Changes are logged to the audit trail.
+
+#### Merge Duplicate
+If the same employee exists under two names, use Merge to reassign all violations from the duplicate to the canonical record. The duplicate is then deleted. This cannot be undone.
 
 ---
 
-## Docker Quick Reference
+### Audit Log
 
-\`\`\`bash
-# Build
-docker build -t cpas-tracker .
+Accessible from the dashboard toolbar (🔍 button). Append-only log of every write action in the system.
 
-# Run
-docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker
+- Filter by entity type: **employee** or **violation**
+- Filter by action: created, edited, merged, negated, restored, amended, deleted, notes updated
+- Paginated with load-more; most recent entries first
 
-# Stop / remove
-docker stop cpas-tracker && docker rm cpas-tracker
+The audit log is the authoritative record for compliance review. Nothing in it can be edited or deleted through the UI.
 
-# Export for Unraid
-docker save cpas-tracker | gzip > cpas-tracker.tar.gz
+---
 
-# View logs
-docker logs -f cpas-tracker
-\`\`\`
+### Violation Amendment
+
+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.
+
+**Immutable fields:** violation type, incident date, point value.
+
+Each amendment stores a before/after diff for every changed field. Amendment history is accessible from the violation card in the employee's history.
+
+---
+
+## Immutability Rules — Quick Reference
+
+| Action | Allowed? | Notes |
+|--------|----------|-------|
+| Edit violation type | No | Immutable after submission |
+| Edit incident date | No | Immutable after submission |
+| Edit point value | No | Immutable after submission |
+| Edit location / details / witness | 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 |
+| Merge duplicate employees | Yes | Irreversible |
+| Add / edit employee notes | Yes | Does not affect score |
+
+---
+
+## Roadmap
+
+### ✅ Shipped
+
+- Container scaffold, violation form, employee intelligence
+- Recidivist auto-escalation, tier crossing warning
+- PDF generation with prior-points snapshot
+- Company dashboard, stat cards, at-risk badges
+- Employee profile modal — full history, negate/restore, hard delete
+- Employee edit and duplicate merge
+- Violation amendment with field-level diff log
+- Audit log — filterable, paginated, append-only
+- Employee notes and flags with quick-add HR tags
+- Point expiration timeline with tier-drop projections
+- In-app admin guide (this panel)
+
+---
+
+### 🔜 Near-term
+
+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.
+
+---
+
+### 📋 Planned
+
+Larger features that require more design work or infrastructure.
+
+- **Violation trends chart** — line/bar chart of violations over time, filterable by department or supervisor. Useful for identifying systemic patterns vs. isolated incidents. Recharts is already available in the frontend bundle.
+- **Department heat map** — grid showing violation density and average CPAS score per department. Helps identify team-level risk early.
+- **Draft / pending violations** — save a violation as a draft before it's officially logged. Useful when incidents need supervisor review or HR sign-off before they count toward the score.
+- **At-risk threshold configuration** — make the 2-point at-risk warning threshold configurable per deployment rather than hardcoded.
+
+---
+
+### 🔭 Future Considerations
+
+These require meaningful infrastructure additions and should be evaluated against actual operational need before committing.
+
+- **Multi-user auth** — role-based login (admin, supervisor, read-only). Currently the app assumes a trusted internal network with no authentication layer.
+- **Tier escalation alerts** — email or in-app notification when an employee crosses into Tier 2+, automatically routed to their supervisor.
+- **Scheduled digest** — weekly email summary to supervisors showing their employees' current standings and any approaching thresholds.
+- **Automated DB backup** — scheduled snapshot of `/data/cpas.db` to a mounted backup volume or remote destination.
+- **Bulk CSV import** — migrate historical violation records from paper logs or a prior system.
+- **Dark/light theme toggle** — UI is currently dark-only.
 `;
 
+// ─── TOC builder ─────────────────────────────────────────────────────────────
+function buildToc(md) {
+  return md.split('\n').reduce((acc, line) => {
+    const m = line.match(/^(#{1,2})\s+(.+)/);
+    if (m) acc.push({ level: m[1].length, text: m[2], id: m[2].toLowerCase().replace(/[^a-z0-9]+/g,'-') });
+    return acc;
+  }, []);
+}
+
 // ─── Component ────────────────────────────────────────────────────────────────
 export default function ReadmeModal({ onClose }) {
-  const bodyRef  = useRef(null);
-  const html     = mdToHtml(README_MD);
-  const toc      = buildToc(README_MD);
+  const bodyRef = useRef(null);
+  const html    = mdToHtml(GUIDE_MD);
+  const toc     = buildToc(GUIDE_MD);
 
-  // Close on Escape
   useEffect(() => {
-    const handler = (e) => { if (e.key === 'Escape') onClose(); };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
+    const h = e => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', h);
+    return () => window.removeEventListener('keydown', h);
   }, [onClose]);
 
-  const scrollTo = (id) => {
+  const scrollTo = id => {
     const el = bodyRef.current?.querySelector(`#${id}`);
     if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
   };
 
-  const handleOverlay = (e) => { if (e.target === e.currentTarget) onClose(); };
-
   return (
-    <div style={overlay} onClick={handleOverlay}>
-      {/* Inject markdown CSS once */}
+    <div style={S.overlay} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
       <style>{CSS}</style>
 
-      <div style={panel} onClick={(e) => e.stopPropagation()}>
+      <div style={S.panel} onClick={e => e.stopPropagation()}>
 
         {/* Header */}
-        <div style={header}>
+        <div style={S.header}>
           <div>
-            <div style={{ fontSize: '17px', fontWeight: 800, letterSpacing: '0.3px' }}>
-              📋 CPAS Tracker — Documentation
+            <div style={{ fontSize:'17px', fontWeight:800, letterSpacing:'.3px' }}>
+              📋 CPAS Tracker — Admin Guide
             </div>
-            <div style={{ fontSize: '11px', color: '#9ca0b8', marginTop: '3px' }}>
-              Admin reference · use Esc or click outside to close
+            <div style={{ fontSize:'11px', color:'#9ca0b8', marginTop:'3px' }}>
+              Feature map · workflow reference · roadmap · Esc or click outside to close
             </div>
           </div>
-          <button style={closeBtn} onClick={onClose} aria-label="Close">✕</button>
+          <button style={S.closeBtn} onClick={onClose} aria-label="Close">✕</button>
         </div>
 
         {/* TOC strip */}
-        <div style={{
-          background: '#0d1117', borderBottom: '1px solid #1e1f2e',
-          padding: '10px 32px', display: 'flex', flexWrap: 'wrap', gap: '4px 16px',
-          fontSize: '11px',
-        }}>
-          {toc.filter(h => h.level <= 2).map((h) => (
+        <div style={S.toc}>
+          {toc.map(h => (
             <button
               key={h.id}
               onClick={() => scrollTo(h.id)}
               style={{
-                background: 'none', border: 'none', cursor: 'pointer', padding: '2px 0',
-                color: h.level === 1 ? '#f8f9fa' : '#90caf9',
-                fontWeight: h.level === 1 ? 700 : 400,
-                fontSize: '11px',
+                background:'none', border:'none', cursor:'pointer', padding:'2px 0',
+                color: h.level === 1 ? '#f8f9fa' : '#d4af37',
+                fontWeight: h.level === 1 ? 700 : 500,
+                fontSize:'11px',
               }}
             >
               {h.level === 2 ? '↳ ' : ''}{h.text}
@@ -433,16 +369,13 @@ export default function ReadmeModal({ onClose }) {
         {/* Body */}
         <div
           ref={bodyRef}
-          style={body}
-          className="readme-body"
+          style={S.body}
+          className="adm"
           dangerouslySetInnerHTML={{ __html: html }}
         />
 
         {/* Footer */}
-        <div style={{
-          padding: '14px 32px', borderTop: '1px solid #1e1f2e',
-          fontSize: '11px', color: '#555770', textAlign: 'center',
-        }}>
+        <div style={S.footer}>
           CPAS Violation Tracker · internal admin use only
         </div>
       </div>
-- 
2.52.0


From 554b39672fbbaa8a40290f5390d36567b7038b23 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 18:38:33 -0600
Subject: [PATCH 33/86] docs: replace Unraid stub with verified working install
 settings from production server

---
 README.md | 128 +++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 98 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index 5b16a3d..25b3b87 100755
--- a/README.md
+++ b/README.md
@@ -27,14 +27,6 @@ docker run -d --name cpas-tracker \
 # http://localhost:3001
 ```
 
-## Export for Unraid
-
-```bash
-docker save cpas-tracker | gzip > cpas-tracker.tar.gz
-```
-
-Then follow README_UNRAID_INSTALL.md.
-
 ## Update After Code Changes
 
 ```bash
@@ -45,6 +37,82 @@ docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker
 
 ---
 
+## Deploying on Unraid
+
+### Step 1 — Build and export the image on your dev machine
+
+```bash
+docker build -t cpas:latest .
+docker save cpas:latest | gzip > cpas-latest.tar.gz
+```
+
+### Step 2 — Load the image on Unraid
+
+Transfer `cpas-latest.tar.gz` to your Unraid server, then load it via the Unraid terminal:
+
+```bash
+docker load < /path/to/cpas-latest.tar.gz
+```
+
+Confirm the image is present:
+
+```bash
+docker images | grep cpas
+```
+
+### Step 3 — Create the appdata directory
+
+```bash
+mkdir -p /mnt/user/appdata/cpas/db
+```
+
+### Step 4 — Run the container
+
+This is the verified working `docker run` command for Unraid (bridge networking with static IP):
+
+```bash
+docker run \
+  -d \
+  --name='cpas' \
+  --net='br0' \
+  --ip='10.2.0.14' \
+  --pids-limit 2048 \
+  -e TZ="America/Chicago" \
+  -e HOST_OS="Unraid" \
+  -e HOST_HOSTNAME="ALPHA" \
+  -e HOST_CONTAINERNAME="cpas" \
+  -e 'PORT'='3001' \
+  -e 'DB_PATH'='/data/cpas.db' \
+  -l net.unraid.docker.managed=dockerman \
+  -l net.unraid.docker.webui='http://[IP]:[PORT:3001]' \
+  -v '/mnt/user/appdata/cpas/db':'/data':'rw' \
+  cpas:latest
+```
+
+Access the app at `http://10.2.0.14:3001` (or whatever static IP you assigned).
+
+### Key settings explained
+
+| Setting | Value | Notes |
+|---------|-------|-------|
+| `--net` | `br0` | Unraid custom bridge network — gives the container its own LAN IP |
+| `--ip` | `10.2.0.14` | Static IP on your LAN — adjust to match your subnet |
+| `--pids-limit` | `2048` | Required — Puppeteer/Chromium spawns many processes for PDF generation; default Unraid limit is too low and will cause PDF failures |
+| `PORT` | `3001` | Express listen port inside the container |
+| `DB_PATH` | `/data/cpas.db` | SQLite database path inside the container |
+| Volume | `/mnt/user/appdata/cpas/db` → `/data` | Persists the database across container restarts and rebuilds |
+
+### Updating on Unraid
+
+1. Build and export the new image on your dev machine (Step 1 above)
+2. Load it on Unraid: `docker load < cpas-latest.tar.gz`
+3. Stop and remove the old container: `docker stop cpas && docker rm cpas`
+4. Re-run the `docker run` command from Step 4 — the volume mount preserves all data
+
+> **Note:** The `--pids-limit 2048` flag is critical. Without it, Chromium hits Unraid's default PID limit and PDF generation silently fails or crashes the container.
+
+---
+
 ## Features
 
 ### Company Dashboard
@@ -143,16 +211,16 @@ 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
-│   └── database.js                               # SQLite connection (better-sqlite3) + auto-migrations
+│   ├── schema.sql                             # Tables + 90-day active score view
+│   └── database.js                            # SQLite connection (better-sqlite3) + auto-migrations
 ├── pdf/
-│   └── generator.js                              # Puppeteer PDF generation
-└── client/                                       # React frontend (Vite)
+│   └── generator.js                           # Puppeteer PDF generation
+└── client/                                    # React frontend (Vite)
     ├── package.json
     ├── vite.config.js
     ├── index.html
@@ -160,23 +228,23 @@ cpas/
         ├── main.jsx
         ├── App.jsx
         ├── 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
+            ├── 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
 ```
 
 ---
-- 
2.52.0


From 281825377f8c4ed3af70d2bd7dccb3a2c899d428 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 18:39:01 -0600
Subject: [PATCH 34/86] =?UTF-8?q?feat:=20ReadmeModal=20=E2=80=94=20admin?=
 =?UTF-8?q?=20usage=20guide,=20feature=20map,=20workflow=20reference,=20ro?=
 =?UTF-8?q?admap=20(no=20install=20content)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/ReadmeModal.jsx | 177 +++++++++-----------------
 1 file changed, 57 insertions(+), 120 deletions(-)

diff --git a/client/src/components/ReadmeModal.jsx b/client/src/components/ReadmeModal.jsx
index edadd0a..8819b89 100644
--- a/client/src/components/ReadmeModal.jsx
+++ b/client/src/components/ReadmeModal.jsx
@@ -1,17 +1,16 @@
 import React, { useEffect, useRef } from 'react';
 
-// ─── Minimal Markdown → HTML renderer ────────────────────────────────────────
+// Minimal Markdown to HTML renderer (headings, bold, inline-code, tables, hr, ul, ol, paragraphs)
 function mdToHtml(md) {
   const lines = md.split('\n');
   const out   = [];
   let i = 0, inUl = false, inOl = false, inTable = false;
 
   const close = () => {
-    if (inUl)    { out.push('</ul>');            inUl    = false; }
-    if (inOl)    { out.push('</ol>');            inOl    = false; }
-    if (inTable) { out.push('</tbody></table>'); inTable = false; }
+    if (inUl)    { out.push('</ul>');              inUl    = false; }
+    if (inOl)    { out.push('</ol>');              inOl    = false; }
+    if (inTable) { out.push('</tbody></table>');   inTable = false; }
   };
-
   const inline = s =>
     s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
      .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
@@ -19,121 +18,72 @@ function mdToHtml(md) {
 
   while (i < lines.length) {
     const line = lines[i];
-
-    if (line.startsWith('```')) {
-      close();
-      i++;
-      while (i < lines.length && !lines[i].startsWith('```')) i++;
-      i++; continue;
-    }
+    if (line.startsWith('```')) { close(); i++; while (i < lines.length && !lines[i].startsWith('```')) i++; i++; continue; }
     if (/^---+$/.test(line.trim())) { close(); out.push('<hr>'); i++; continue; }
-
     const hm = line.match(/^(#{1,4})\s+(.+)/);
-    if (hm) {
-      close();
-      const lvl = hm[1].length;
-      const id  = hm[2].toLowerCase().replace(/[^a-z0-9]+/g,'-');
-      out.push(`<h${lvl} id="${id}">${inline(hm[2])}</h${lvl}>`);
-      i++; continue;
-    }
-
+    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;
-      } else {
-        out.push('<tr>');
-        cells.forEach(c => out.push(`<td>${inline(c)}</td>`));
-        out.push('</tr>');
-        i++; continue;
-      }
+      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+(.*)/);
-    if (ul) {
-      if (inTable) close();
-      if (!inUl) { if (inOl) { out.push('</ol>'); inOl=false; } out.push('<ul>'); inUl=true; }
-      out.push(`<li>${inline(ul[1])}</li>`);
-      i++; continue;
-    }
-
+    if (ul) { if (inTable) close(); if (!inUl) { if (inOl){out.push('</ol>');inOl=false;} out.push('<ul>');inUl=true; } out.push(`<li>${inline(ul[1])}</li>`); i++; continue; }
     const ol = line.match(/^\d+\.\s+(.*)/);
-    if (ol) {
-      if (inTable) close();
-      if (!inOl) { if (inUl) { out.push('</ul>'); inUl=false; } out.push('<ol>'); inOl=true; }
-      out.push(`<li>${inline(ol[1])}</li>`);
-      i++; continue;
-    }
-
+    if (ol) { if (inTable) close(); if (!inOl) { if (inUl){out.push('</ul>');inUl=false;} out.push('<ol>');inOl=true; } out.push(`<li>${inline(ol[1])}</li>`); i++; continue; }
     if (line.trim() === '') { close(); i++; continue; }
-
-    close();
-    out.push(`<p>${inline(line)}</p>`);
-    i++;
+    close(); out.push(`<p>${inline(line)}</p>`); i++;
   }
   close();
   return out.join('\n');
 }
 
+function buildToc(md) {
+  return md.split('\n').reduce((acc, line) => {
+    const m = line.match(/^(#{1,2})\s+(.+)/);
+    if (m) acc.push({ level: m[1].length, text: m[2], id: m[2].toLowerCase().replace(/[^a-z0-9]+/g,'-') });
+    return acc;
+  }, []);
+}
+
 // ─── 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:'780px', maxWidth:'95vw',
-    height:'100vh', overflowY:'auto', boxShadow:'-4px 0 32px rgba(0,0,0,0.85)',
-    display:'flex', flexDirection:'column',
-  },
-  header: {
-    background:'linear-gradient(135deg,#000000,#151622)', color:'white',
-    padding:'22px 28px', position:'sticky', top:0, zIndex:10,
-    borderBottom:'1px solid #222', display:'flex', alignItems:'center',
-    justifyContent:'space-between',
-  },
-  closeBtn: { background:'none', border:'none', color:'white', fontSize:'22px', cursor:'pointer', lineHeight:1 },
-  toc: {
-    background:'#0d1117', borderBottom:'1px solid #1e1f2e',
-    padding:'10px 32px', display:'flex', flexWrap:'wrap', gap:'4px 18px', fontSize:'11px',
-  },
-  body: { padding:'28px 32px', flex:1, fontSize:'13px', lineHeight:'1.75' },
-  footer: { padding:'14px 32px', borderTop:'1px solid #1e1f2e', fontSize:'11px', color:'#555770', textAlign:'center' },
+  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' },
+  header:  { background:'linear-gradient(135deg,#000000,#151622)', color:'white', padding:'22px 28px', position:'sticky', top:0, zIndex:10, borderBottom:'1px solid #222', display:'flex', alignItems:'center', justifyContent:'space-between' },
+  closeBtn:{ background:'none', border:'none', color:'white', fontSize:'22px', cursor:'pointer', lineHeight:1 },
+  toc:     { background:'#0d1117', borderBottom:'1px solid #1e1f2e', padding:'10px 32px', display:'flex', flexWrap:'wrap', gap:'4px 18px', fontSize:'11px' },
+  body:    { padding:'28px 32px', flex:1, fontSize:'13px', lineHeight:'1.75' },
+  footer:  { padding:'14px 32px', borderTop:'1px solid #1e1f2e', fontSize:'11px', color:'#555770', textAlign:'center' },
 };
 
 const CSS = `
-.adm h1 { font-size:21px; font-weight:800; color:#f8f9fa; margin:28px 0 10px; border-bottom:1px solid #2a2b3a; padding-bottom:8px; }
-.adm h2 { font-size:16px; font-weight:700; color:#d4af37; margin:28px 0 6px; letter-spacing:.2px; }
-.adm h3 { font-size:12px; font-weight:700; color:#90caf9; margin:18px 0 4px; text-transform:uppercase; letter-spacing:.5px; }
-.adm h4 { font-size:13px; font-weight:600; color:#b0b8d0; margin:14px 0 4px; }
-.adm p  { color:#c8ccd8; margin:5px 0 10px; }
-.adm hr { border:none; border-top:1px solid #2a2b3a; margin:22px 0; }
-.adm strong { color:#f8f9fa; }
-.adm code { background:#0d1117; color:#79c0ff; border:1px solid #2a2b3a; border-radius:4px; padding:1px 6px; font-family:'Consolas','Fira Code',monospace; font-size:12px; }
-.adm ul { padding-left:20px; margin:5px 0 10px; color:#c8ccd8; }
-.adm ol { padding-left:20px; margin:5px 0 10px; color:#c8ccd8; }
-.adm li { margin:4px 0; }
-.adm table { width:100%; border-collapse:collapse; font-size:12px; background:#181924; border-radius:6px; overflow:hidden; border:1px solid #2a2b3a; margin:10px 0 16px; }
-.adm th { background:#050608; padding:8px 12px; text-align:left; color:#f8f9fa; font-weight:600; font-size:11px; text-transform:uppercase; border-bottom:1px solid #2a2b3a; }
-.adm td { padding:8px 12px; border-bottom:1px solid #202231; color:#c8ccd8; }
-.adm tr:last-child td { border-bottom:none; }
-.adm tr:hover td { background:#1e1f2e; }
+.adm h1 { font-size:21px; font-weight:800; color:#f8f9fa; margin:28px 0 10px; border-bottom:1px solid #2a2b3a; padding-bottom:8px }
+.adm h2 { font-size:16px; font-weight:700; color:#d4af37; margin:28px 0 6px; letter-spacing:.2px }
+.adm h3 { font-size:12px; font-weight:700; color:#90caf9; margin:18px 0 4px; text-transform:uppercase; letter-spacing:.5px }
+.adm h4 { font-size:13px; font-weight:600; color:#b0b8d0; margin:14px 0 4px }
+.adm p  { color:#c8ccd8; margin:5px 0 10px }
+.adm hr { border:none; border-top:1px solid #2a2b3a; margin:22px 0 }
+.adm strong { color:#f8f9fa }
+.adm code { background:#0d1117; color:#79c0ff; border:1px solid #2a2b3a; border-radius:4px; padding:1px 6px; font-family:'Consolas','Fira Code',monospace; font-size:12px }
+.adm ul { padding-left:20px; margin:5px 0 10px; color:#c8ccd8 }
+.adm ol { padding-left:20px; margin:5px 0 10px; color:#c8ccd8 }
+.adm li { margin:4px 0 }
+.adm table { width:100%; border-collapse:collapse; font-size:12px; background:#181924; border-radius:6px; overflow:hidden; border:1px solid #2a2b3a; margin:10px 0 16px }
+.adm th { background:#050608; padding:8px 12px; text-align:left; color:#f8f9fa; font-weight:600; font-size:11px; text-transform:uppercase; border-bottom:1px solid #2a2b3a }
+.adm td { padding:8px 12px; border-bottom:1px solid #202231; color:#c8ccd8 }
+.adm tr:last-child td { border-bottom:none }
+.adm tr:hover td { background:#1e1f2e }
 `;
 
-// ─── Admin guide 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.
 
 ---
 
-## How CPAS Scoring Works
+## How Scoring Works
 
 Every violation carries a **point value** set at the time of submission. Points count toward an employee's score only within a **rolling 90-day window** — once a violation is older than 90 days it automatically drops off and the score recalculates.
 
@@ -161,7 +111,7 @@ The **at-risk badge** on the dashboard flags anyone within 2 points of the next
 
 The main view. Employees are sorted by active CPAS points, highest first.
 
-- **Stat cards** — live counts: total employees, zero-point (elite), active points, at-risk, highest score
+- **Stat cards** — live counts: total employees, zero-point (elite), with active points, at-risk, highest score
 - **Search / filter** — by name, department, or supervisor; narrows the table in real time
 - **At-risk badge** — gold flag on rows where the employee is within 2 pts of the next tier
 - **Audit Log button** — opens the filterable, paginated write-action log (top right of the dashboard toolbar)
@@ -254,7 +204,7 @@ Each amendment stores a before/after diff for every changed field. Amendment his
 
 ## Roadmap
 
-### ✅ Shipped
+### Shipped
 
 - Container scaffold, violation form, employee intelligence
 - Recidivist auto-escalation, tier crossing warning
@@ -270,7 +220,7 @@ Each amendment stores a before/after diff for every changed field. Amendment his
 
 ---
 
-### 🔜 Near-term
+### Near-term
 
 These are well-scoped additions that fit the current architecture without major changes.
 
@@ -280,7 +230,7 @@ These are well-scoped additions that fit the current architecture without major
 
 ---
 
-### 📋 Planned
+### Planned
 
 Larger features that require more design work or infrastructure.
 
@@ -291,27 +241,18 @@ Larger features that require more design work or infrastructure.
 
 ---
 
-### 🔭 Future Considerations
+### Future Considerations
 
 These require meaningful infrastructure additions and should be evaluated against actual operational need before committing.
 
 - **Multi-user auth** — role-based login (admin, supervisor, read-only). Currently the app assumes a trusted internal network with no authentication layer.
 - **Tier escalation alerts** — email or in-app notification when an employee crosses into Tier 2+, automatically routed to their supervisor.
 - **Scheduled digest** — weekly email summary to supervisors showing their employees' current standings and any approaching thresholds.
-- **Automated DB backup** — scheduled snapshot of `/data/cpas.db` to a mounted backup volume or remote destination.
+- **Automated DB backup** — scheduled snapshot of the database to a mounted backup volume or remote destination.
 - **Bulk CSV import** — migrate historical violation records from paper logs or a prior system.
 - **Dark/light theme toggle** — UI is currently dark-only.
 `;
 
-// ─── TOC builder ─────────────────────────────────────────────────────────────
-function buildToc(md) {
-  return md.split('\n').reduce((acc, line) => {
-    const m = line.match(/^(#{1,2})\s+(.+)/);
-    if (m) acc.push({ level: m[1].length, text: m[2], id: m[2].toLowerCase().replace(/[^a-z0-9]+/g,'-') });
-    return acc;
-  }, []);
-}
-
 // ─── Component ────────────────────────────────────────────────────────────────
 export default function ReadmeModal({ onClose }) {
   const bodyRef = useRef(null);
@@ -342,7 +283,7 @@ export default function ReadmeModal({ onClose }) {
               📋 CPAS Tracker — Admin Guide
             </div>
             <div style={{ fontSize:'11px', color:'#9ca0b8', marginTop:'3px' }}>
-              Feature map · workflow reference · roadmap · Esc or click outside to close
+              Feature map · workflows · roadmap · Esc or click outside to close
             </div>
           </div>
           <button style={S.closeBtn} onClick={onClose} aria-label="Close">✕</button>
@@ -351,16 +292,12 @@ export default function ReadmeModal({ onClose }) {
         {/* TOC strip */}
         <div style={S.toc}>
           {toc.map(h => (
-            <button
-              key={h.id}
-              onClick={() => scrollTo(h.id)}
-              style={{
-                background:'none', border:'none', cursor:'pointer', padding:'2px 0',
-                color: h.level === 1 ? '#f8f9fa' : '#d4af37',
-                fontWeight: h.level === 1 ? 700 : 500,
-                fontSize:'11px',
-              }}
-            >
+            <button key={h.id} onClick={() => scrollTo(h.id)} style={{
+              background:'none', border:'none', cursor:'pointer', padding:'3px 0',
+              color: h.level === 1 ? '#f8f9fa' : '#d4af37',
+              fontWeight: h.level === 1 ? 700 : 500,
+              fontSize:'11px',
+            }}>
               {h.level === 2 ? '↳ ' : ''}{h.text}
             </button>
           ))}
-- 
2.52.0


From bfa46e93b67381279bcdc10fd7370c010e735e73 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 18:58:28 -0600
Subject: [PATCH 35/86] docs: fix local quickstart image name to cpas (not
 cpas-tracker)

---
 README.md | 325 ++----------------------------------------------------
 1 file changed, 7 insertions(+), 318 deletions(-)

diff --git a/README.md b/README.md
index 25b3b87..b4013c4 100755
--- a/README.md
+++ b/README.md
@@ -1,27 +1,14 @@
-# CPAS Violation Tracker
-
-Single-container Dockerized web app for CPAS violation documentation and workforce standing management.
-Built with **React + Vite** (frontend), **Node.js + Express** (backend), **SQLite** (database), and **Puppeteer** (PDF generation).
-
----
-
-## The only requirement on your machine: Docker Desktop
-
-Everything else — Node.js, npm, React build, Chromium for PDF — happens inside Docker.
-
----
-
 ## Quickstart (Local)
 
 ```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,305 +17,7 @@ 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
-```
-
----
-
-## Deploying on Unraid
-
-### Step 1 — Build and export the image on your dev machine
-
-```bash
-docker build -t cpas:latest .
-docker save cpas:latest | gzip > cpas-latest.tar.gz
-```
-
-### Step 2 — Load the image on Unraid
-
-Transfer `cpas-latest.tar.gz` to your Unraid server, then load it via the Unraid terminal:
-
-```bash
-docker load < /path/to/cpas-latest.tar.gz
-```
-
-Confirm the image is present:
-
-```bash
-docker images | grep cpas
-```
-
-### Step 3 — Create the appdata directory
-
-```bash
-mkdir -p /mnt/user/appdata/cpas/db
-```
-
-### Step 4 — Run the container
-
-This is the verified working `docker run` command for Unraid (bridge networking with static IP):
-
-```bash
-docker run \
-  -d \
-  --name='cpas' \
-  --net='br0' \
-  --ip='10.2.0.14' \
-  --pids-limit 2048 \
-  -e TZ="America/Chicago" \
-  -e HOST_OS="Unraid" \
-  -e HOST_HOSTNAME="ALPHA" \
-  -e HOST_CONTAINERNAME="cpas" \
-  -e 'PORT'='3001' \
-  -e 'DB_PATH'='/data/cpas.db' \
-  -l net.unraid.docker.managed=dockerman \
-  -l net.unraid.docker.webui='http://[IP]:[PORT:3001]' \
-  -v '/mnt/user/appdata/cpas/db':'/data':'rw' \
-  cpas:latest
-```
-
-Access the app at `http://10.2.0.14:3001` (or whatever static IP you assigned).
-
-### Key settings explained
-
-| Setting | Value | Notes |
-|---------|-------|-------|
-| `--net` | `br0` | Unraid custom bridge network — gives the container its own LAN IP |
-| `--ip` | `10.2.0.14` | Static IP on your LAN — adjust to match your subnet |
-| `--pids-limit` | `2048` | Required — Puppeteer/Chromium spawns many processes for PDF generation; default Unraid limit is too low and will cause PDF failures |
-| `PORT` | `3001` | Express listen port inside the container |
-| `DB_PATH` | `/data/cpas.db` | SQLite database path inside the container |
-| Volume | `/mnt/user/appdata/cpas/db` → `/data` | Persists the database across container restarts and rebuilds |
-
-### Updating on Unraid
-
-1. Build and export the new image on your dev machine (Step 1 above)
-2. Load it on Unraid: `docker load < cpas-latest.tar.gz`
-3. Stop and remove the old container: `docker stop cpas && docker rm cpas`
-4. Re-run the `docker run` command from Step 4 — the volume mount preserves all data
-
-> **Note:** The `--pids-limit 2048` flag is critical. Without it, Chromium hits Unraid's default PID limit and PDF generation silently fails or crashes the container.
-
----
-
-## Features
-
-### Company Dashboard
-- Live table of all employees sorted by active CPAS points (highest risk first)
-- Summary stat cards: total employees, elite standing (0 pts), with active points, at-risk count, highest active score
-- **At-risk badge**: flags employees within 2 points of the next tier escalation
-- Search/filter by name, department, or supervisor
-- Click any employee name to open their full profile modal
-- **🔍 Audit Log** button — filterable, paginated view of all system write actions
-
-### Violation Form
-- Select existing employee or enter new employee by name
-- **Employee intelligence**: shows current CPAS standing badge and 90-day violation count before submitting
-- Violation type dropdown grouped by category; shows prior 90-day counts inline
-- **Recidivist auto-escalation**: if an employee has prior violations of the same type, points slider auto-sets to maximum per policy
-- Repeat offense badge with prior count displayed
-- Context-sensitive fields (time, minutes late, amount, location, description) shown only when relevant to violation type
-- **Tier crossing warning** (TierWarning component): previews what tier the new points would push the employee into before submission
-- Point slider for discretionary adjustments within the violation's min/max range
-- One-click PDF download immediately after submission
-
-### Employee Profile Modal
-- Full violation history with resolution status 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
-- 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
-
-### Audit Log
-- Append-only log of every write action: employee created/edited/merged, violation logged/amended/negated/restored/deleted
-- Filterable by entity type (employee / violation) and action
-- Paginated with load-more; accessible from the Dashboard toolbar
-
-### Violation Amendment
-- Edit submitted violations' non-scoring fields without delete-and-resubmit
-- Point values, violation type, and incident date are immutable
-- Every change is stored as a field-level diff (old → new value) with timestamp and actor
-
-### In-App Documentation
-- **? Docs** button in the navbar opens a slide-in admin reference panel
-- Covers feature map, CPAS tier system, workflow guidance, and roadmap
-- No external link required; always reflects current deployed version
-
-### CPAS Tier System
-
-| Points | Tier | Label |
-|--------|------|-------|
-| 0–4    | 0–1  | Elite Standing |
-| 5–9    | 1    | Realignment |
-| 10–14  | 2    | Administrative Lockdown |
-| 15–19  | 3    | Verification |
-| 20–24  | 4    | Risk Mitigation |
-| 25–29  | 5    | Final Decision |
-| 30+    | 6    | Separation |
-
-Scores are computed over a **rolling 90-day window** (negated violations excluded).
-
-### PDF Generation
-- Puppeteer + system Chromium (bundled in Docker image)
-- Generated on-demand per violation via `GET /api/violations/:id/pdf`
-- Filename: `CPAS_<EmployeeName>_<IncidentDate>.pdf`
-- PDF captures prior active points **at the time of the incident** (snapshot stored on insert)
-
----
-
-## API Reference
-
-| Method | Endpoint | Description |
-|--------|----------|-------------|
-| GET | `/api/health` | Health check |
-| GET | `/api/employees` | List all employees (includes `notes`) |
-| POST | `/api/employees` | Create or upsert employee |
-| PATCH | `/api/employees/:id` | Edit name, department, supervisor, or notes |
-| POST | `/api/employees/:id/merge` | Merge duplicate employee; reassigns all violations |
-| GET | `/api/employees/:id/score` | Get active CPAS score for employee |
-| 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 |
-| 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/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 |
-| DELETE | `/api/violations/:id` | Hard delete a violation |
-| GET | `/api/violations/:id/pdf` | Download violation PDF |
-| GET | `/api/audit` | Paginated audit log (filterable by `entity_type`, `entity_id`) |
-
----
-
-## Project Structure
-
-```
-cpas/
-├── Dockerfile                                 # Multi-stage: builds React + runs Express w/ Chromium
-├── .dockerignore
-├── package.json                               # Backend (Express) deps
-├── server.js                                  # API + static file server
-├── db/
-│   ├── schema.sql                             # Tables + 90-day active score view
-│   └── database.js                            # SQLite connection (better-sqlite3) + auto-migrations
-├── pdf/
-│   └── generator.js                           # Puppeteer PDF generation
-└── client/                                    # React frontend (Vite)
-    ├── package.json
-    ├── vite.config.js
-    ├── index.html
-    └── src/
-        ├── main.jsx
-        ├── App.jsx
-        ├── data/
-        │   └── violations.js                  # All CPAS violation definitions + groups
-        ├── hooks/
-        │   └── 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
-```
-
----
-
-## Database Schema
-
-Six tables + one view:
-
-- **`employees`** — id, name, department, supervisor, **notes**
-- **`violations`** — full incident record including `prior_active_points` snapshot at time of logging
-- **`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)
-- **`active_cpas_scores`** (view) — sum of points for non-negated violations in rolling 90 days, grouped by employee
-
----
-
-## Amendable Fields
-
-Point values, violation type, and incident date are **immutable** after submission. The following fields can be amended:
-
-| Field | Notes |
-|-------|-------|
-| `incident_time` | Time of day the incident occurred |
-| `location` | Where the incident took place |
-| `details` | Narrative description |
-| `submitted_by` | Supervisor who submitted |
-| `witness_name` | Witness on record |
-
----
-
-## Roadmap
-
-### ✅ Completed
-
-| Phase | Feature | Description |
-|-------|---------|-------------|
-| 1 | Container scaffold | Docker multi-stage build, Express server, SQLite schema |
-| 1 | Base violation form | Employee fields, violation type, incident date, point submission |
-| 2 | Employee intelligence | Live CPAS standing badge and 90-day count shown before submitting |
-| 2 | Prior violation highlighting | Violation dropdown annotates types with 90-day recurrence counts |
-| 2 | Recidivist auto-escalation | Points slider auto-maximizes on repeat same-type violations |
-| 2 | Violation history | Per-employee history list with resolution status |
-| 3 | PDF generation | Puppeteer/Chromium PDF per violation, downloadable immediately post-submit |
-| 3 | Prior-points snapshot | `prior_active_points` captured at insert time for accurate historical PDFs |
-| 4 | Company dashboard | Sortable employee table with live tier badges and at-risk flags |
-| 4 | Stat cards | Summary counts: total, clean, active, at-risk, highest score |
-| 4 | Tier crossing warning | Pre-submit alert when new points push employee to next tier |
-| 4 | Employee profile modal | Full history, negate/restore, hard delete, per-record PDF download |
-| 4 | Negate & restore | Soft-delete violations with resolution type + notes, fully reversible |
-| 5 | Employee edit / merge | Update employee name/dept/supervisor; merge duplicate records without losing history |
-| 5 | Violation amendment | Edit non-scoring fields with field-level audit trail |
-| 5 | Audit log | Append-only log of all system writes; filterable panel in the dashboard |
-| 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 |
-
----
-
-### 📋 Proposed
-
-#### Reporting & Analytics
-- **Violation trends chart** — line/bar chart of violations per day/week/month, filterable by department or supervisor; useful for identifying systemic patterns vs. individual incidents
-- **Department heat map** — grid view showing violation density and average CPAS score by department; helps supervisors identify team-level risk
-- **CSV / Excel export** — bulk export of violations or dashboard data for external reporting or payroll integration
-
-#### Employee Management
-- **Supervisor view** — scoped dashboard showing only the employees under a given supervisor, useful for multi-supervisor environments
-
-#### 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
-
-#### Notifications & Escalation
-- **Tier escalation alerts** — email or in-app notification when an employee crosses into Tier 2+ so the relevant supervisor is automatically informed
-- **Scheduled summary digest** — weekly email to supervisors listing their employees' current standings and any approaching tier thresholds
-- **At-risk threshold configuration** — make the "at-risk" warning threshold (currently hardcoded at 2 pts) configurable per deployment
-
-#### Infrastructure & Ops
-- **Multi-user auth** — simple login with role-based access (admin, supervisor, read-only); currently the app has no auth and is assumed to run on a trusted internal network
-- **Automated DB backup** — cron job or Docker health hook to snapshot `/data/cpas.db` to a mounted backup volume or remote location on a schedule
-- **Dark/light theme toggle** — the UI is currently dark-only; a toggle would improve usability in bright environments
-
----
-
-*Proposed features are suggestions based on common HR documentation workflows. Priority and implementation order should be driven by actual operational needs.*
+docker build -t cpas .
+docker stop cpas && docker rm cpas
+docker run -d --name cpas -p 3001:3001 -v cpas-data:/data cpas
+```
\ No newline at end of file
-- 
2.52.0


From 0920bffc5028eaaa1d66b7b3d63ec3f426906f6a Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 19:00:02 -0600
Subject: [PATCH 36/86] docs: restore full README with corrected local image
 name (cpas not cpas-tracker)

---
 README.md | 313 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 312 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b4013c4..fa09458 100755
--- a/README.md
+++ b/README.md
@@ -1,3 +1,16 @@
+# CPAS Violation Tracker
+
+Single-container Dockerized web app for CPAS violation documentation and workforce standing management.
+Built with **React + Vite** (frontend), **Node.js + Express** (backend), **SQLite** (database), and **Puppeteer** (PDF generation).
+
+---
+
+## The only requirement on your machine: Docker Desktop
+
+Everything else — Node.js, npm, React build, Chromium for PDF — happens inside Docker.
+
+---
+
 ## Quickstart (Local)
 
 ```bash
@@ -20,4 +33,302 @@ docker run -d --name cpas \
 docker build -t cpas .
 docker stop cpas && docker rm cpas
 docker run -d --name cpas -p 3001:3001 -v cpas-data:/data cpas
-```
\ No newline at end of file
+```
+
+---
+
+## Deploying on Unraid
+
+### Step 1 — Build and export the image on your dev machine
+
+```bash
+docker build -t cpas:latest .
+docker save cpas:latest | gzip > cpas-latest.tar.gz
+```
+
+### Step 2 — Load the image on Unraid
+
+Transfer `cpas-latest.tar.gz` to your Unraid server, then load it via the Unraid terminal:
+
+```bash
+docker load < /path/to/cpas-latest.tar.gz
+```
+
+Confirm the image is present:
+
+```bash
+docker images | grep cpas
+```
+
+### Step 3 — Create the appdata directory
+
+```bash
+mkdir -p /mnt/user/appdata/cpas/db
+```
+
+### Step 4 — Run the container
+
+This is the verified working `docker run` command for Unraid (bridge networking with static IP):
+
+```bash
+docker run \
+  -d \
+  --name='cpas' \
+  --net='br0' \
+  --ip='10.2.0.14' \
+  --pids-limit 2048 \
+  -e TZ="America/Chicago" \
+  -e HOST_OS="Unraid" \
+  -e HOST_HOSTNAME="ALPHA" \
+  -e HOST_CONTAINERNAME="cpas" \
+  -e 'PORT'='3001' \
+  -e 'DB_PATH'='/data/cpas.db' \
+  -l net.unraid.docker.managed=dockerman \
+  -l net.unraid.docker.webui='http://[IP]:[PORT:3001]' \
+  -v '/mnt/user/appdata/cpas/db':'/data':'rw' \
+  cpas:latest
+```
+
+Access the app at `http://10.2.0.14:3001` (or whatever static IP you assigned).
+
+### Key settings explained
+
+| Setting | Value | Notes |
+|---------|-------|-------|
+| `--net` | `br0` | Unraid custom bridge network — gives the container its own LAN IP |
+| `--ip` | `10.2.0.14` | Static IP on your LAN — adjust to match your subnet |
+| `--pids-limit` | `2048` | Required — Puppeteer/Chromium spawns many processes for PDF generation; default Unraid limit is too low and will cause PDF failures |
+| `PORT` | `3001` | Express listen port inside the container |
+| `DB_PATH` | `/data/cpas.db` | SQLite database path inside the container |
+| Volume | `/mnt/user/appdata/cpas/db` → `/data` | Persists the database across container restarts and rebuilds |
+
+### Updating on Unraid
+
+1. Build and export the new image on your dev machine (Step 1 above)
+2. Load it on Unraid: `docker load < cpas-latest.tar.gz`
+3. Stop and remove the old container: `docker stop cpas && docker rm cpas`
+4. Re-run the `docker run` command from Step 4 — the volume mount preserves all data
+
+> **Note:** The `--pids-limit 2048` flag is critical. Without it, Chromium hits Unraid's default PID limit and PDF generation silently fails or crashes the container.
+
+---
+
+## Features
+
+### Company Dashboard
+- Live table of all employees sorted by active CPAS points (highest risk first)
+- Summary stat cards: total employees, elite standing (0 pts), with active points, at-risk count, highest active score
+- **At-risk badge**: flags employees within 2 points of the next tier escalation
+- Search/filter by name, department, or supervisor
+- Click any employee name to open their full profile modal
+- **🔍 Audit Log** button — filterable, paginated view of all system write actions
+
+### Violation Form
+- Select existing employee or enter new employee by name
+- **Employee intelligence**: shows current CPAS standing badge and 90-day violation count before submitting
+- Violation type dropdown grouped by category; shows prior 90-day counts inline
+- **Recidivist auto-escalation**: if an employee has prior violations of the same type, points slider auto-sets to maximum per policy
+- Repeat offense badge with prior count displayed
+- Context-sensitive fields (time, minutes late, amount, location, description) shown only when relevant to violation type
+- **Tier crossing warning** (TierWarning component): previews what tier the new points would push the employee into before submission
+- Point slider for discretionary adjustments within the violation's min/max range
+- One-click PDF download immediately after submission
+
+### Employee Profile Modal
+- Full violation history with resolution status 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
+- 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
+
+### Audit Log
+- Append-only log of every write action: employee created/edited/merged, violation logged/amended/negated/restored/deleted
+- Filterable by entity type (employee / violation) and action
+- Paginated with load-more; accessible from the Dashboard toolbar
+
+### Violation Amendment
+- Edit submitted violations' non-scoring fields without delete-and-resubmit
+- Point values, violation type, and incident date are immutable
+- Every change is stored as a field-level diff (old → new value) with timestamp and actor
+
+### In-App Documentation
+- **? Docs** button in the navbar opens a slide-in admin reference panel
+- Covers feature map, CPAS tier system, workflow guidance, and roadmap
+- No external link required; always reflects current deployed version
+
+### CPAS Tier System
+
+| Points | Tier | Label |
+|--------|------|-------|
+| 0–4    | 0–1  | Elite Standing |
+| 5–9    | 1    | Realignment |
+| 10–14  | 2    | Administrative Lockdown |
+| 15–19  | 3    | Verification |
+| 20–24  | 4    | Risk Mitigation |
+| 25–29  | 5    | Final Decision |
+| 30+    | 6    | Separation |
+
+Scores are computed over a **rolling 90-day window** (negated violations excluded).
+
+### PDF Generation
+- Puppeteer + system Chromium (bundled in Docker image)
+- Generated on-demand per violation via `GET /api/violations/:id/pdf`
+- Filename: `CPAS_<EmployeeName>_<IncidentDate>.pdf`
+- PDF captures prior active points **at the time of the incident** (snapshot stored on insert)
+
+---
+
+## API Reference
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| GET | `/api/health` | Health check |
+| GET | `/api/employees` | List all employees (includes `notes`) |
+| POST | `/api/employees` | Create or upsert employee |
+| PATCH | `/api/employees/:id` | Edit name, department, supervisor, or notes |
+| POST | `/api/employees/:id/merge` | Merge duplicate employee; reassigns all violations |
+| GET | `/api/employees/:id/score` | Get active CPAS score for employee |
+| 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 |
+| 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/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 |
+| DELETE | `/api/violations/:id` | Hard delete a violation |
+| GET | `/api/violations/:id/pdf` | Download violation PDF |
+| GET | `/api/audit` | Paginated audit log (filterable by `entity_type`, `entity_id`) |
+
+---
+
+## Project Structure
+
+```
+cpas/
+├── Dockerfile                                 # Multi-stage: builds React + runs Express w/ Chromium
+├── .dockerignore
+├── package.json                               # Backend (Express) deps
+├── server.js                                  # API + static file server
+├── db/
+│   ├── schema.sql                             # Tables + 90-day active score view
+│   └── database.js                            # SQLite connection (better-sqlite3) + auto-migrations
+├── pdf/
+│   └── generator.js                           # Puppeteer PDF generation
+└── client/                                    # React frontend (Vite)
+    ├── package.json
+    ├── vite.config.js
+    ├── index.html
+    └── src/
+        ├── main.jsx
+        ├── App.jsx
+        ├── data/
+        │   └── violations.js                  # All CPAS violation definitions + groups
+        ├── hooks/
+        │   └── 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
+```
+
+---
+
+## Database Schema
+
+Six tables + one view:
+
+- **`employees`** — id, name, department, supervisor, **notes**
+- **`violations`** — full incident record including `prior_active_points` snapshot at time of logging
+- **`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)
+- **`active_cpas_scores`** (view) — sum of points for non-negated violations in rolling 90 days, grouped by employee
+
+---
+
+## Amendable Fields
+
+Point values, violation type, and incident date are **immutable** after submission. The following fields can be amended:
+
+| Field | Notes |
+|-------|-------|
+| `incident_time` | Time of day the incident occurred |
+| `location` | Where the incident took place |
+| `details` | Narrative description |
+| `submitted_by` | Supervisor who submitted |
+| `witness_name` | Witness on record |
+
+---
+
+## Roadmap
+
+### ✅ Completed
+
+| Phase | Feature | Description |
+|-------|---------|-------------|
+| 1 | Container scaffold | Docker multi-stage build, Express server, SQLite schema |
+| 1 | Base violation form | Employee fields, violation type, incident date, point submission |
+| 2 | Employee intelligence | Live CPAS standing badge and 90-day count shown before submitting |
+| 2 | Prior violation highlighting | Violation dropdown annotates types with 90-day recurrence counts |
+| 2 | Recidivist auto-escalation | Points slider auto-maximizes on repeat same-type violations |
+| 2 | Violation history | Per-employee history list with resolution status |
+| 3 | PDF generation | Puppeteer/Chromium PDF per violation, downloadable immediately post-submit |
+| 3 | Prior-points snapshot | `prior_active_points` captured at insert time for accurate historical PDFs |
+| 4 | Company dashboard | Sortable employee table with live tier badges and at-risk flags |
+| 4 | Stat cards | Summary counts: total, clean, active, at-risk, highest score |
+| 4 | Tier crossing warning | Pre-submit alert when new points push employee to next tier |
+| 4 | Employee profile modal | Full history, negate/restore, hard delete, per-record PDF download |
+| 4 | Negate & restore | Soft-delete violations with resolution type + notes, fully reversible |
+| 5 | Employee edit / merge | Update employee name/dept/supervisor; merge duplicate records without losing history |
+| 5 | Violation amendment | Edit non-scoring fields with field-level audit trail |
+| 5 | Audit log | Append-only log of all system writes; filterable panel in the dashboard |
+| 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 |
+
+---
+
+### 📋 Proposed
+
+#### Reporting & Analytics
+- **Violation trends chart** — line/bar chart of violations per day/week/month, filterable by department or supervisor; useful for identifying systemic patterns vs. individual incidents
+- **Department heat map** — grid view showing violation density and average CPAS score by department; helps supervisors identify team-level risk
+- **CSV / Excel export** — bulk export of violations or dashboard data for external reporting or payroll integration
+
+#### Employee Management
+- **Supervisor view** — scoped dashboard showing only the employees under a given supervisor, useful for multi-supervisor environments
+
+#### 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
+
+#### Notifications & Escalation
+- **Tier escalation alerts** — email or in-app notification when an employee crosses into Tier 2+ so the relevant supervisor is automatically informed
+- **Scheduled summary digest** — weekly email to supervisors listing their employees' current standings and any approaching tier thresholds
+- **At-risk threshold configuration** — make the "at-risk" warning threshold (currently hardcoded at 2 pts) configurable per deployment
+
+#### Infrastructure & Ops
+- **Multi-user auth** — simple login with role-based access (admin, supervisor, read-only); currently the app has no auth and is assumed to run on a trusted internal network
+- **Automated DB backup** — cron job or Docker health hook to snapshot `/data/cpas.db` to a mounted backup volume or remote location on a schedule
+- **Dark/light theme toggle** — the UI is currently dark-only; a toggle would improve usability in bright environments
+
+---
+
+*Proposed features are suggestions based on common HR documentation workflows. Priority and implementation order should be driven by actual operational needs.*
-- 
2.52.0


From 57358dfd211168198e1b9f7c90ad69bcc6a3f819 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 21:28:45 -0600
Subject: [PATCH 37/86] feat: add Toast notification system

- ToastProvider context with useToast hook
- Supports success, error, info, and warning variants
- Auto-dismiss with configurable duration (default 4s)
- Slide-in animation with progress bar
- Stacks up to 5 toasts, oldest dismissed first
- Consistent with dark theme UI
---
 client/src/components/ToastProvider.jsx | 145 ++++++++++++++++++++++++
 1 file changed, 145 insertions(+)
 create mode 100644 client/src/components/ToastProvider.jsx

diff --git a/client/src/components/ToastProvider.jsx b/client/src/components/ToastProvider.jsx
new file mode 100644
index 0000000..193ff47
--- /dev/null
+++ b/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>
+  );
+}
-- 
2.52.0


From c4dd658aa7a5820df122baad7fc3ee8514eec75c Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 21:29:05 -0600
Subject: [PATCH 38/86] feat: wrap App with ToastProvider for global
 notifications

---
 client/src/App.jsx | 45 ++++++++++++++++++++++++---------------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 8639fb6..b3645c2 100755
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import ViolationForm from './components/ViolationForm';
 import Dashboard     from './components/Dashboard';
 import ReadmeModal   from './components/ReadmeModal';
+import ToastProvider from './components/ToastProvider';
 
 const tabs = [
   { id: 'dashboard', label: '📊 Dashboard' },
@@ -45,29 +46,31 @@ export default function App() {
   const [showReadme, setShowReadme] = useState(false);
 
   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>
+      <div style={s.app}>
+        <nav style={s.nav}>
+          <div style={s.logoWrap}>
+            <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
+            <div style={s.logoText}>CPAS Tracker</div>
+          </div>
+
+          {tabs.map(t => (
+            <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
+              {t.label}
+            </button>
+          ))}
+
+          <button style={s.docsBtn} onClick={() => setShowReadme(true)} title="Open admin documentation">
+            <span>?</span> Docs
+          </button>
+        </nav>
+
+        <div style={s.card}>
+          {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
         </div>
 
-        {tabs.map(t => (
-          <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
-            {t.label}
-          </button>
-        ))}
-
-        <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>
   );
 }
-- 
2.52.0


From 725dfa29638d61c6e0b90a6a5e4a3982106abdcf Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 21:30:29 -0600
Subject: [PATCH 39/86] feat: add acknowledgment signature fields + toast
 notifications to ViolationForm

- New "Employee Acknowledgment" section with acknowledged_by name and date
- Replaces blank signature line on PDF with recorded acknowledgment
- Toast notifications for submit success/error, PDF download, and validation warnings
- Inline status messages retained as fallback
---
 client/src/components/ViolationForm.jsx | 44 +++++++++++++++++++++----
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/client/src/components/ViolationForm.jsx b/client/src/components/ViolationForm.jsx
index ad6d329..3367803 100755
--- a/client/src/components/ViolationForm.jsx
+++ b/client/src/components/ViolationForm.jsx
@@ -5,6 +5,7 @@ import useEmployeeIntelligence from '../hooks/useEmployeeIntelligence';
 import CpasBadge from './CpasBadge';
 import TierWarning from './TierWarning';
 import ViolationHistory from './ViolationHistory';
+import { useToast } from './ToastProvider';
 
 const s = {
   content:      { padding: '32px 40px', background: '#111217', borderRadius: '10px', color: '#f8f9fa' },
@@ -26,14 +27,15 @@ 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: '',
   amount: '', minutesLate: '', location: '', additionalDetails: '', points: 1,
+  acknowledgedBy: '', acknowledgedDate: '',
 };
 
 export default function ViolationForm() {
@@ -44,6 +46,7 @@ export default function ViolationForm() {
   const [lastViolId,   setLastViolId]   = useState(null);
   const [pdfLoading,   setPdfLoading]   = useState(false);
 
+  const toast = useToast();
   const intel = useEmployeeIntelligence(form.employeeId || null);
 
   useEffect(() => {
@@ -77,8 +80,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 +96,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 +106,14 @@ 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.`);
       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 +130,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);
     }
@@ -275,6 +284,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 +328,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 && (
-- 
2.52.0


From 8e06c9d576c4c4f7081623622e3b58f31d25aa1a Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 21:30:47 -0600
Subject: [PATCH 40/86] feat: add acknowledged_by and acknowledged_date columns
 to violations schema

---
 db/schema.sql | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/db/schema.sql b/db/schema.sql
index 3bcc928..8129bb3 100755
--- a/db/schema.sql
+++ b/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
 );
 
-- 
2.52.0


From 8944cc80e0a6037398d50de3547a63ff29b9df00 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 21:31:05 -0600
Subject: [PATCH 41/86] feat: add auto-migration for
 acknowledged_by/acknowledged_date columns

---
 db/database.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/db/database.js b/db/database.js
index d4fe68b..8986967 100755
--- a/db/database.js
+++ b/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);
-- 
2.52.0


From b4edcdc945c8061693ce54f38ac7110fff6f8f96 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 21:32:15 -0600
Subject: [PATCH 42/86] feat: accept acknowledged_by/acknowledged_date in
 violation creation and amendment

- POST /api/violations now accepts acknowledged_by and acknowledged_date
- Both fields added to AMENDABLE_FIELDS whitelist for post-submission edits
- Acknowledgment data persisted to DB and passed through to PDF generation
---
 server.js | 39 +++++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/server.js b/server.js
index 01216e2..59ed7d3 100755
--- a/server.js
+++ b/server.js
@@ -27,7 +27,7 @@ function audit(action, entityType, entityId, performedBy, details) {
 // Health
 app.get('/api/health', (req, res) => res.json({ status: 'ok', timestamp: new Date().toISOString() }));
 
-// ── Employees ─────────────────────────────────────────────────────────────────
+// ── Employees ────────────────────────────────────────────────────────────────
 app.get('/api/employees', (req, res) => {
   const rows = db.prepare('SELECT id, name, department, supervisor, notes FROM employees ORDER BY name ASC').all();
   res.json(rows);
@@ -50,7 +50,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 +81,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);
@@ -134,7 +134,7 @@ app.get('/api/employees/:id/score', (req, res) => {
   res.json(row || { employee_id: req.params.id, active_points: 0, violation_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 +151,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 +190,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 +216,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 +232,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 +251,9 @@ 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'];
 
 app.patch('/api/violations/:id/amend', (req, res) => {
   const id        = parseInt(req.params.id);
@@ -295,7 +298,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 +326,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 +340,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 +356,7 @@ app.delete('/api/violations/:id', (req, res) => {
   res.json({ success: true });
 });
 
-// ── Audit log ─────────────────────────────────────────────────────────────────
+// ── 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 +375,7 @@ app.get('/api/audit', (req, res) => {
   res.json(db.prepare(sql).all(...args));
 });
 
-// ── PDF endpoint ──────────────────────────────────────────────────────────────
+// ── PDF endpoint ─────────────────────────────────────────────────────────────
 app.get('/api/violations/:id/pdf', async (req, res) => {
   try {
     const violation = db.prepare(`
@@ -399,7 +402,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) {
-- 
2.52.0


From 114dbb1166794555de91a58f9edf61127a418546 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 21:39:01 -0600
Subject: [PATCH 43/86] refactor: load logo from disk instead of hardcoded
 base64 + add acknowledgment signature rendering

- Reads mpm-logo.png from filesystem at startup, converts to base64 data URI dynamically
- Removes massive hardcoded LOGO_B64 constant (~5KB of source code eliminated)
- Falls back gracefully if logo file is not found (dev environments)
- Tries both dist/ and public/ paths for dev vs production compatibility
- Adds acknowledgment rendering: if acknowledged_by is set, shows filled name/date
  instead of blank signature lines, with green "Acknowledged" badge on section header
- Blank signature lines still shown when acknowledgment is not provided
---
 pdf/template.js | 374 +++++++++++++-----------------------------------
 1 file changed, 103 insertions(+), 271 deletions(-)

diff --git a/pdf/template.js b/pdf/template.js
index c66fb6d..3a10deb 100755
--- a/pdf/template.js
+++ b/pdf/template.js
@@ -1,14 +1,32 @@
-// Inline base64 logo — avoids Puppeteer needing a live HTTP request to /static/
-const LOGO_B64 = 'iVBORw0KGgoAAAANSUhEUgAAAGsAAACbCAYAAABlLWUVAAAQAElEQVR4AexdC3AW1RW+f8CgQqsiCLUVLBjEKuADRFBQsCDgY6zAWAq2FijtjFL7tFUcRtvRqeNYW6Y+Z2oVHOigtCKPFDCgSAsICAFJEBTRVEDegYRHXtdz/nCT/Tf7uOfc/fffTXZnD3cf53zn3O/ec/fs/4ckTyRbbBggDZbcsbhN5YaOMpFgOKDOEq3BqtxY8FnF+gtkZfm9J6VMiUSC4QA5RTn58fipOgPnOVgHi0d+C8FkbXkXHbBEh8dAzZFlM5BnP2vXwTq27gKZX7WhTEoBmZRIGDwg58c2XvGu26A5DtZRGCgYI5EITFJgLlQeavYNRv7BbZO9yWCVv99JCnguJZKCkcqdHN3Q7ZB9tDIGKz1QoBHqTEr8CUe+ayvP27/twa8BPQ17xmCFsS4nPiBhYXR0eDij/NWjDSMFBw2DdWRtZ4CAtBfNVeLZr/pxgZGCPT1Ycu/MtjBSzukISsk9yIYc8gCu03t6sI7serAiGSngI6Kz8vAaXPWESA9WUDGed93eVCKNHLTp8XrXoLiFqSTyTh1Y0VNCqc6VVmdf8157GCQUBEykkYGz2w/6HHlB4fKr7BA1r2LHD0rxgCPnD9iTOqf3osEc25Zmg1y1anfl09x+y4otnfIk5ClHTnVd0JbruKXandur8DccrtHm0NbRJfDMSgF3dLnwwr7HwTDZiQx0GLgHyIad+IokayvaszKrw8Dd6I0YZqKuGMBM4QhkloJI2rAY6Hg9b7JDZul9kSYtFWNYnWrOfqx86h7nQX1Bfh9uziSG1TcO78kyGNboBOAHlkH43AuGWRIkAL8tHoLCt9KFzMLCTl8kPLtaPNOBEKDPuYAyH3knZ5ZItkAYkISVDHXRaVJgIAs5EBgrcmGXJ3BZI4hE3Rx0rtm5RB4JgryTM6vZkZajDlEzC8MkP7MkekHL5iuh9Ax5pApUg9TYsIqh2iT65gykBGQW9eMmkWwBMCDheUUTUf+1fgC+E4gQGCAXGDgbQoir2bvARz9JIBPJpXuzZzGsDgL5pNcmiAueWclng8BD6LuEtKIKfRkMvVvN0yGMlaAKlO4pYIMqYJLshgxQOU9h6Z4sgyIHG3UJRH3ILFqkaORpkdzMCgPIOxQYtJdiAd+tiGQzZkBCNUgRAbwnBYbIzUYtLlAf3rMgWDyiCJgkuyEDFL5P6yaZZcg51/w0/6TynfzMwnWWG2Bi18gA8kgVcjXY6C45CpsByKzkPSts0tGfhHWQKpBZ9DdpdJaIKQN03pMCw4BzE1NILFJxgfqsZVBKCRlpEmrLtt1W2B0opD9+4D0L0hHepgVBPiosqG3ZdBv2nsC1dVxYyyCm5O4tf7zMMOQWaV66+BKsKwRySBX2clZe9mpJi2TboNM7igZ8YGCOX5HQPsiVkMJKShYVyNLC3hUmAbQUW+Sq+uSBqxR3nJadWYpkWXeiLQaCoq4lbT0DB3e+Nhx5Qam/YvYvsxp0rmS2LiyQ2RSzrjpbf/nhE9dnK+a9JY8tkfBgCkrYBQbEwHpImtg50212df+uf6wyiSlMW1bpLuC5lRMxGxdn61z1heE3h5kFSynQR5mZWxb0QHWwCmb/cGGPOgSMiwT6zApqbfbCCWaY6lHq6kTKy1fU7hlXg/XdDu/fA5++0TM8b9HyBJnFf8+SsO6GLV9snsb+LW5W6ovnXwqfz8Wr77HLLCvhLe04VgWGKgTKNvzyEtOBUlhxamO3DOKye6CscIfJYG18s2fslkDsN7xnQbfjNL1UrBA2e1cYMWtjuQwix6XL73qCO1hoH0eBAgO+fBQ0kbWyj6m06zCwu5Occ+HwvwuNeE6Ulz4kGFvxwmv3CQ181HGKD6+R++7AF+JTBZ5Z8EkCTDNJkGvGfLTZVHoMenmnk3TvP2OybiyCsdVUHeuog3/190pTTvHhNdO+o71ODHYdyCxGj7Ns0rH7hF46LkqK7vyfjl5z0YHMor8YZrvzXfpM+1BqvHAfP7J9ACWW9fO+I3Vwz+0yrjcFl6OrE4ddh1VgcIKj2sCqLHSEgquDhzrd+07fQsHl6KIfqvBKd050RJt+o0sg5cHIp0cb37puJ2jp7T5YDbNDD81MSzcWi15kMwuZsMTZwKP9WnXV0W+jrp9smN9/u93W6bzfmBIsjf3gjO87+fa7FslnlmLCvma7nSt9r7amqqLAzd563QsjyHtWn7rHkawGFSn9x27VmuVrX78cJ6Uya7YtZBb9PStMNiQMg454xbRh4dBdOhi6k8PLl+49nXjsOpBZOHmpohuSuV4qdUa10PrEQbhu1cf3dRWGGCLwjcp5SkS6wBCw9R+7KR+Sy7XAUPdWz70CD8Gi6Y43/CTV6sxQ/xCOXzxO9yO/DCL19uXA7Rx17bJmXr9SN33r9f6j14f6J6asvnWPI78MIvl5rdseE8xlrK7mZE+urcjqxlkGId90R1bpZbUPDuDXjV77deXbq/3vP3tBbzIBvPTVvbPOuXR1plX2z5RvSguZlf3AcuWheOndi3R8XzXijYE6ernWicUzC0nKP7PzEzqzEHWVHDtYMopqo2z92qO7V3Tw0/G6rxOXXQcyi752egWRrXv97lw2TWg8t1bN6W1ZCv37dn7XUeMFY9v87gP7GWYWE//YhK2/Ocmsze/er/V9lbBt9pnmdo5mGwvvXu5233r9soFPzkZ9qiAG1caqj/ZUycl71pEvVm62Bq57XHD5U+0wbXxFyvxjh0uH+OrpOrbpbSqadA9i2y6TTtG+qcCnSYDidh2+IoF0hC/6BEUA0GhHXwyAzn1uqdSJ873ZV57S0Rs07q5WjDDE0b3rZ6bxOcbKBjkgSk4yC2fOobKVrG9j0TYoSaUerVPcUVrln2Jj11UYlBYKDDtMOOdbVk4t5ni6cXwxLAUcy2BsVs7p91EwSHQUKDBSQkI6UoTuJtNC+cq8qn+m7E1a7qDX1Vb3UH71I26qqTAobc6WQUz/TUVThjfthv8VtDUVfy/OGla/zhp6V604usdQYAC4rrbSAxOj/TTO4d3vL+HgDJmwCZYDsDyNI4htSuSxfkPOillXygxfwmAjxox+c5pZGC+3u2jLlZsmfNCa49fuj4OhbOxYOuc5fWbhev3F9vnDVAcoLdpyheLHqmv3Z71HPbZj6ZznrBpUndu25tGl6pjS3vzDjayqsM3ZnT6j+FG6RTOvwsmvTnPSQmbBWzOEIQliGqndFxfPjqNzfsOY/1zM8eeEzcFRNk54ftcgs3CCUkW55LaZ/la9cdvPOEitWrf9VNg+7PQ/F8wtM2aR9isMNic872uRyKwTFbuf5/R6yPhV3fxmo/V+p4uHP8Lxs+yVq6UVRx1zsJSNwqC0kFnKvPm3vW780+Nx7iVkFryy5OgTDGnx+8nGF3/BIfK8TgMesOJ4HXPwpZzbyg2Tg6ds3DC9ruf8PQvqGnzfEx9veukZ1RFK23fkszMUhlfbre99XSi4SnfpK0/WuOEqHU7rhul1vcUsg5f0mljGITVKNrAM5r50lzCdUJbPHvY0h5zrb33+G2jvJRzc4qJp44LGVHF44brdg8zyLhdFukS16wjDzY5Xf1518vCvOMDtLrh2r3CMsx53xMQNeCCo257PlsBX/mjqJlREq74bpvv1SGUWzihrdyjHaOsmFByrrhuuum7VpR4rDEprKTBgOQSPsCKlH/heLagZ7V7YHyx/eAYHfMTEdWe44XLw1i35+etueOo6B1fZKAxKC1+RQNpBCS0oojxyWw9fe3cum8qBTaVSNU59GDVpPXSQjri/bPUYJ7yMa3TYRgsPDjJ8WPQil1k40xp7RDtCW7vQEBq17ThO543a9CMnPL9rkXtm4Rq+7LVb5tG7L8Stk9dl/GbONme238XBWTpr+A6Mw0842MrGD9vpPlSDyjw67akTh+4KIprvTlii9Z/D7b6gKjX+FXl2zCDOIbOi8XGThLXZKtzOBY1hxbMfc2NEOzuWznkkMws7s7bwgbnYUuX2Ke+nC4qul935LNUW9Re8dC0+OvAwcgKZBSU7hCcJYtoLHV9ffr56LNdPKi//ZO9BD9/PsdeJTelw8JWNwqC0kFk4EamiXHJbXX88/NsmrzqLZ4lWurGhHupzBe1pEtnMwhm36OWha7hUeNq53Jz/Yn/HLxkxlibigqF7uQme38oGwJF8z4K4BUp1VWV/iDG0PU0geEPfvoIKoMvd0ZwkoBzxZRCXCS4dNDtIKQYXNB+Z2tg3mkR6GcSZ/s68SYWZnczO2ZsvDKhFfxQxiYTiR+nCbDJxmX3bw/u2jsi+l3h4gMyK5kuxtLwkh0Gl1Z/usUlcuj6sepEuMOCZmi405r9083YTYvxs//XcAKl86bZ+mH73df0oPcSDr0igUVd0WzAx2nX9nNarqT5eYOTPx5g8UhBX2sYH1/M2YKRnomaL/mKRWdgfz44b3FyzZPowxOeIgVvKODXoxuKZJeH5tXTOPaz/wOBHaNmOt5ciPkf8sL3uc/xxqkGvGLJ2r/zgJ6z/GpS1gHIADJkVzQ9yJaxLdgman80r/zbd7oNybhIPxY/ShcyivUWL9I98CcON4zMl/v3C8IOGjjPMtxXPeUyk+8OLRxhtdJ+xKTAg0URVdWV7I35sxohpIjY40inHbyxK94ZyCHtIosRdefGs7y/OwEVsqrjD+9+h+gJ9eGZF/xMMCdWgkgWvjtX6HYJ+bB099P+RCpPV+jnwuU/2CXixWgZhcomKI3tGQdzGO2IZCUwgkyDIvsEfFBgmLuNpO+evNyBXsQs+dssgLh+LXvvRehOmEcNcTCLA1yXq40eIWGZW+YGd15hRpWvtpZfyupmFeykBmYWjTBNhuElYhEyFG8Lsv9xYbepb2XNjQDuFQWljV2DAOKcr7rnPjXwLO02VOlnXWmGYtFS/dn2qb7SH9yxIZ6g0BEXQ0kQovlx0q05W3s4KwQWP1H/AkCAs/8oI7QmC/mKbWTgzVb9121l/HizRLijR9eukx4mB9cya+fRgaSLIWBBCjSEIn1YMqn+rvhVH5xgHPJbVIAbe0gQHFDKLWu8n+hKeNWHLRQU3PZKX36ZtqD+i3NIyIqj+DrnjD4/njZu6eADnYZfYwLspjERYPICr+k8wspXSCW5wj4yGwep66dD7RFhTJPFDTskf//YdeBkW9Zk19I7pzyUckjkMbX5jVqE0lO4Xdes3SRj9PEJKiMReiIA5mPhgfVYJ2BoGa9iYp16WkF6JQIZFiAcYo4a9YbDwyqTfrcD0wMNEIsCAfTwyBgvjQwWZg5e+xGdm5YjjgONhlSaDhTcn/355kmFIRI7EjX/HwcIY0UBGaO1uCbF0/mafucg78u8kroOFyj95aHkKBcYstDI1pr6M+UGeb7vnmbuRdzfxHCxlNAUGDUWcLktl8kwj/80xO2fIZX5+28PIK4rQ2LQGS+FMeagohfLTh4tSKHD97UQEiQPkDQV5vPfXC0g/Dv4V3Z9eXgAAAAVJREFUAAAA///yqks2AAAABklEQVQDAL3XqznDSjO2AAAAAElFTkSuQmCC';
+const fs   = require('fs');
+const path = require('path');
+
+// Load logo from disk once at startup and convert to base64 data URI
+// In Docker: /app/client/dist/static/mpm-logo.png
+// In dev:    ./client/public/static/mpm-logo.png (or dist after build)
+let LOGO_DATA_URI = '';
+const logoPaths = [
+  path.join(__dirname, '..', 'client', 'dist', 'static', 'mpm-logo.png'),
+  path.join(__dirname, '..', 'client', 'public', 'static', 'mpm-logo.png'),
+];
+for (const p of logoPaths) {
+  try {
+    const buf = fs.readFileSync(p);
+    LOGO_DATA_URI = `data:image/png;base64,${buf.toString('base64')}`;
+    console.log('[PDF] Logo loaded from', p);
+    break;
+  } catch (_) { /* try next path */ }
+}
+if (!LOGO_DATA_URI) console.warn('[PDF] Logo not found — PDF header will have no logo');
 
 const TIERS = [
-  { min: 0,  max: 4,   label: 'Tier 0–1 — Elite Standing',          color: '#16a34a', bg: '#f0fdf4' },
-  { min: 5,  max: 9,   label: 'Tier 1 — Realignment',               color: '#854d0e', bg: '#fefce8' },
-  { min: 10, max: 14,  label: 'Tier 2 — Administrative Lockdown',    color: '#b45309', bg: '#fff7ed' },
-  { min: 15, max: 19,  label: 'Tier 3 — Verification',              color: '#c2410c', bg: '#fff7ed' },
-  { min: 20, max: 24,  label: 'Tier 4 — Risk Mitigation',           color: '#b91c1c', bg: '#fef2f2' },
-  { min: 25, max: 29,  label: 'Tier 5 — Final Decision',            color: '#991b1b', bg: '#fef2f2' },
-  { min: 30, max: 999, label: 'Tier 6 — Separation',                color: '#ffffff', bg: '#7f1d1d' },
+  { min: 0,  max: 4,   label: 'Tier 0\u20131 \u2014 Elite Standing',           color: '#16a34a', bg: '#f0fdf4' },
+  { min: 5,  max: 9,   label: 'Tier 1 \u2014 Realignment',                color: '#854d0e', bg: '#fefce8' },
+  { min: 10, max: 14,  label: 'Tier 2 \u2014 Administrative Lockdown',    color: '#b45309', bg: '#fff7ed' },
+  { min: 15, max: 19,  label: 'Tier 3 \u2014 Verification',               color: '#c2410c', bg: '#fff7ed' },
+  { min: 20, max: 24,  label: 'Tier 4 \u2014 Risk Mitigation',            color: '#b91c1c', bg: '#fef2f2' },
+  { min: 25, max: 29,  label: 'Tier 5 \u2014 Final Decision',             color: '#991b1b', bg: '#fef2f2' },
+  { min: 30, max: 999, label: 'Tier 6 \u2014 Separation',                 color: '#ffffff', bg: '#7f1d1d' },
 ];
 
 function getTier(pts) {
@@ -16,7 +34,7 @@ function getTier(pts) {
 }
 
 function fmt(d) {
-  if (!d) return '—';
+  if (!d) return '\u2014';
   return new Date(d + 'T12:00:00').toLocaleDateString('en-US', {
     weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
     timeZone: 'America/Chicago',
@@ -25,15 +43,6 @@ function fmt(d) {
 
 function fmtDT(d, t) { return t ? `${fmt(d)} at ${t}` : fmt(d); }
 
-function field(label, value) {
-  if (!value) return '';
-  return `
-    <div class="field">
-      <div class="field-label">${label}</div>
-      <div class="field-value">${value}</div>
-    </div>`;
-}
-
 function buildHtml(v, score) {
   const priorPts  = score.active_points  || 0;
   const priorTier = getTier(priorPts);
@@ -45,6 +54,15 @@ function buildHtml(v, score) {
   });
   const docId = `CPAS-${v.id.toString().padStart(5, '0')}`;
 
+  // Acknowledgment: if acknowledged_by is set, show filled data instead of blank sig line
+  const hasAck     = !!v.acknowledged_by;
+  const ackName    = v.acknowledged_by || '';
+  const ackDate    = v.acknowledged_date ? fmt(v.acknowledged_date) : '';
+
+  const logoTag = LOGO_DATA_URI
+    ? `<img src="${LOGO_DATA_URI}" class="logo" />`
+    : '';
+
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -60,7 +78,6 @@ function buildHtml(v, score) {
     line-height: 1.5;
   }
 
-  /* ── HEADER ── */
   .header {
     background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 60%, #16213e 100%);
     padding: 24px 36px;
@@ -71,278 +88,89 @@ function buildHtml(v, score) {
   }
   .header-left { display: flex; align-items: center; gap: 16px; }
   .logo { height: 36px; }
-  .header-title {
-    font-size: 18px;
-    font-weight: 700;
-    color: #ffffff;
-    letter-spacing: 0.3px;
-  }
-  .header-sub {
-    font-size: 11px;
-    color: #94a3b8;
-    margin-top: 3px;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
-  }
+  .header-title { font-size: 18px; font-weight: 700; color: #ffffff; letter-spacing: 0.3px; }
+  .header-sub { font-size: 11px; color: #94a3b8; margin-top: 3px; letter-spacing: 0.5px; text-transform: uppercase; }
   .header-right { text-align: right; }
-  .doc-id {
-    font-size: 13px;
-    font-weight: 700;
-    color: #d4af37;
-    letter-spacing: 0.5px;
-  }
-  .doc-meta {
-    font-size: 10px;
-    color: #64748b;
-    margin-top: 4px;
-  }
+  .doc-id { font-size: 13px; font-weight: 700; color: #d4af37; letter-spacing: 0.5px; }
+  .doc-meta { font-size: 10px; color: #64748b; margin-top: 4px; }
 
-  /* ── CONFIDENTIAL BANNER ── */
   .confidential-bar {
-    background: #fef2f2;
-    border-bottom: 1px solid #fecaca;
-    padding: 7px 36px;
-    font-size: 11px;
-    font-weight: 700;
-    color: #991b1b;
-    letter-spacing: 0.8px;
-    text-transform: uppercase;
-    text-align: center;
+    background: #fef2f2; border-bottom: 1px solid #fecaca;
+    padding: 7px 36px; font-size: 11px; font-weight: 700; color: #991b1b;
+    letter-spacing: 0.8px; text-transform: uppercase; text-align: center;
   }
 
-  /* ── BODY WRAPPER ── */
   .body { padding: 28px 36px; }
 
-  /* ── SECTION ── */
   .section { margin-bottom: 24px; }
-  .section-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 12px;
-  }
-  .section-title {
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    color: #64748b;
-  }
-  .section-rule {
-    flex: 1;
-    height: 1px;
-    background: #e2e8f0;
-  }
+  .section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+  .section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #64748b; }
+  .section-rule { flex: 1; height: 1px; background: #e2e8f0; }
 
-  /* ── FIELD GRID ── */
-  .field-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 12px 32px;
-  }
+  .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
   .field-grid.single { grid-template-columns: 1fr; }
   .field { padding: 0; }
-  .field-label {
-    font-size: 10px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.8px;
-    color: #94a3b8;
-    margin-bottom: 2px;
-  }
-  .field-value {
-    font-size: 13px;
-    color: #1e293b;
-    font-weight: 500;
-  }
-  .field-value.prominent {
-    font-size: 15px;
-    font-weight: 700;
-    color: #0f172a;
-  }
+  .field-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; margin-bottom: 2px; }
+  .field-value { font-size: 13px; color: #1e293b; font-weight: 500; }
+  .field-value.prominent { font-size: 15px; font-weight: 700; color: #0f172a; }
 
-  /* ── DETAIL BOX ── */
   .detail-box {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
-    border-left: 4px solid #667eea;
-    border-radius: 6px;
-    padding: 14px 16px;
-    margin-top: 12px;
-    font-size: 12px;
-    color: #374151;
-    line-height: 1.6;
-  }
-  .detail-box-label {
-    font-size: 10px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.8px;
-    color: #94a3b8;
-    margin-bottom: 6px;
+    background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #667eea;
+    border-radius: 6px; padding: 14px 16px; margin-top: 12px; font-size: 12px; color: #374151; line-height: 1.6;
   }
+  .detail-box-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; margin-bottom: 6px; }
 
-  /* ── SCORE CARD ── */
   .score-card {
-    display: flex;
-    align-items: center;
-    gap: 0;
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
-    border-radius: 10px;
-    overflow: hidden;
-    margin-top: 4px;
-  }
-  .score-cell {
-    flex: 1;
-    padding: 18px 16px;
-    text-align: center;
-    border-right: 1px solid #e2e8f0;
+    display: flex; align-items: center; gap: 0; background: #f8fafc;
+    border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; margin-top: 4px;
   }
+  .score-cell { flex: 1; padding: 18px 16px; text-align: center; border-right: 1px solid #e2e8f0; }
   .score-cell:last-child { border-right: none; }
-  .score-cell.operator {
-    flex: 0 0 48px;
-    font-size: 24px;
-    font-weight: 200;
-    color: #cbd5e1;
-  }
-  .score-num {
-    font-size: 32px;
-    font-weight: 800;
-    line-height: 1;
-  }
-  .score-label {
-    font-size: 10px;
-    text-transform: uppercase;
-    letter-spacing: 0.8px;
-    color: #94a3b8;
-    margin-top: 4px;
-  }
-  .tier-badge {
-    display: inline-block;
-    margin-top: 8px;
-    padding: 3px 10px;
-    border-radius: 12px;
-    font-size: 10px;
-    font-weight: 700;
-    letter-spacing: 0.3px;
-  }
+  .score-cell.operator { flex: 0 0 48px; font-size: 24px; font-weight: 200; color: #cbd5e1; }
+  .score-num { font-size: 32px; font-weight: 800; line-height: 1; }
+  .score-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; margin-top: 4px; }
+  .tier-badge { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; }
 
-  /* ── POINTS PILL ── */
   .points-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    background: #fffbeb;
-    border: 2px solid #d4af37;
-    border-radius: 8px;
-    padding: 12px 24px;
-    margin-bottom: 16px;
-  }
-  .points-pill-num {
-    font-size: 42px;
-    font-weight: 900;
-    color: #d4af37;
-    line-height: 1;
-  }
-  .points-pill-label {
-    font-size: 12px;
-    color: #92400e;
-    line-height: 1.4;
+    display: inline-flex; align-items: center; gap: 10px;
+    background: #fffbeb; border: 2px solid #d4af37; border-radius: 8px;
+    padding: 12px 24px; margin-bottom: 16px;
   }
+  .points-pill-num { font-size: 42px; font-weight: 900; color: #d4af37; line-height: 1; }
+  .points-pill-label { font-size: 12px; color: #92400e; line-height: 1.4; }
   .points-pill-label strong { display: block; font-size: 14px; }
 
-  /* ── ESCALATION ALERT ── */
   .escalation-alert {
-    background: #fef9c3;
-    border: 1.5px solid #eab308;
-    border-radius: 8px;
-    padding: 12px 16px;
-    margin-top: 14px;
-    font-size: 12px;
-    color: #713f12;
-    display: flex;
-    align-items: center;
-    gap: 10px;
+    background: #fef9c3; border: 1.5px solid #eab308; border-radius: 8px;
+    padding: 12px 16px; margin-top: 14px; font-size: 12px; color: #713f12;
+    display: flex; align-items: center; gap: 10px;
   }
   .escalation-icon { font-size: 18px; }
 
-  /* ── TIER TABLE ── */
   .tier-table { width: 100%; border-collapse: collapse; }
-  .tier-table th {
-    font-size: 10px;
-    text-transform: uppercase;
-    letter-spacing: 0.8px;
-    color: #94a3b8;
-    text-align: left;
-    padding: 6px 12px;
-    border-bottom: 2px solid #e2e8f0;
-  }
-  .tier-table td {
-    padding: 7px 12px;
-    font-size: 12px;
-    border-bottom: 1px solid #f1f5f9;
-  }
-  .tier-table tr.current-tier td {
-    background: #fffbeb;
-    font-weight: 700;
-  }
-  .tier-dot {
-    display: inline-block;
-    width: 8px; height: 8px;
-    border-radius: 50%;
-    margin-right: 6px;
-    vertical-align: middle;
-  }
+  .tier-table th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; text-align: left; padding: 6px 12px; border-bottom: 2px solid #e2e8f0; }
+  .tier-table td { padding: 7px 12px; font-size: 12px; border-bottom: 1px solid #f1f5f9; }
+  .tier-table tr.current-tier td { background: #fffbeb; font-weight: 700; }
+  .tier-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
 
-  /* ── NOTICE ── */
   .notice {
-    background: #eff6ff;
-    border-left: 4px solid #3b82f6;
-    border-radius: 0 6px 6px 0;
-    padding: 12px 16px;
-    font-size: 11.5px;
-    color: #1e40af;
-    line-height: 1.6;
+    background: #eff6ff; border-left: 4px solid #3b82f6; border-radius: 0 6px 6px 0;
+    padding: 12px 16px; font-size: 11.5px; color: #1e40af; line-height: 1.6;
   }
 
-  /* ── SIGNATURE ── */
-  .sig-intro {
-    font-size: 11.5px;
-    color: #475569;
-    line-height: 1.7;
-    margin-bottom: 28px;
-  }
+  .sig-intro { font-size: 11.5px; color: #475569; line-height: 1.7; margin-bottom: 28px; }
   .sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
-  .sig-block { }
-  .sig-line {
-    border-bottom: 1.5px solid #334155;
-    margin-bottom: 8px;
-    min-height: 52px;
-  }
-  .sig-line-label {
-    font-size: 10px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.8px;
-    color: #64748b;
-  }
-  .sig-date-line {
-    border-bottom: 1.5px solid #334155;
-    margin-bottom: 8px;
-    margin-top: 20px;
-    min-height: 36px;
-  }
+  .sig-line { border-bottom: 1.5px solid #334155; margin-bottom: 8px; min-height: 52px; }
+  .sig-line-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #64748b; }
+  .sig-date-line { border-bottom: 1.5px solid #334155; margin-bottom: 8px; margin-top: 20px; min-height: 36px; }
+
+  .sig-filled { font-size: 14px; font-weight: 600; color: #1e293b; padding-bottom: 6px; border-bottom: 1.5px solid #334155; margin-bottom: 8px; min-height: 52px; display: flex; align-items: flex-end; }
+  .sig-date-filled { font-size: 13px; color: #1e293b; padding-bottom: 6px; border-bottom: 1.5px solid #334155; margin-bottom: 8px; margin-top: 20px; min-height: 36px; display: flex; align-items: flex-end; }
+  .ack-badge { display: inline-block; background: #dcfce7; color: #166534; border: 1px solid #86efac; border-radius: 6px; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-left: 10px; }
 
-  /* ── FOOTER BAR ── */
   .footer-bar {
-    margin-top: 32px;
-    padding: 10px 0 0;
-    border-top: 1px solid #e2e8f0;
-    font-size: 10px;
-    color: #94a3b8;
-    display: flex;
-    justify-content: space-between;
+    margin-top: 32px; padding: 10px 0 0; border-top: 1px solid #e2e8f0;
+    font-size: 10px; color: #94a3b8; display: flex; justify-content: space-between;
   }
 </style>
 </head>
@@ -350,7 +178,7 @@ function buildHtml(v, score) {
 
 <div class="header">
   <div class="header-left">
-    <img src="data:image/png;base64,${LOGO_B64}" class="logo" />
+    ${logoTag}
     <div>
       <div class="header-title">CPAS Violation Record</div>
       <div class="header-sub">Comprehensive Professional Accountability System</div>
@@ -362,7 +190,7 @@ function buildHtml(v, score) {
   </div>
 </div>
 
-<div class="confidential-bar">⚑ Confidential — Authorized HR &amp; Management Use Only</div>
+<div class="confidential-bar">\u26D1 Confidential \u2014 Authorized HR &amp; Management Use Only</div>
 
 <div class="body">
 
@@ -379,15 +207,15 @@ function buildHtml(v, score) {
       </div>
       <div class="field">
         <div class="field-label">Department</div>
-        <div class="field-value">${v.department || '—'}</div>
+        <div class="field-value">${v.department || '\u2014'}</div>
       </div>
       <div class="field">
         <div class="field-label">Supervisor</div>
-        <div class="field-value">${v.supervisor || '—'}</div>
+        <div class="field-value">${v.supervisor || '\u2014'}</div>
       </div>
       <div class="field">
         <div class="field-label">Witness / Documenting Officer</div>
-        <div class="field-value">${v.witness_name || '—'}</div>
+        <div class="field-value">${v.witness_name || '\u2014'}</div>
       </div>
     </div>
   </div>
@@ -468,7 +296,7 @@ function buildHtml(v, score) {
 
     ${escalated ? `
     <div class="escalation-alert">
-      <span class="escalation-icon">⚠</span>
+      <span class="escalation-icon">\u26A0</span>
       <div>
         <strong>Tier Escalation:</strong>
         This violation advances the employee from <strong>${priorTier.label}</strong>
@@ -493,13 +321,13 @@ function buildHtml(v, score) {
       <tbody>
         ${TIERS.map(t => {
           const active = newTotal >= t.min && newTotal <= t.max;
-          const range  = t.min === 30 ? '30+' : `${t.min}–${t.max}`;
+          const range  = t.min === 30 ? '30+' : `${t.min}\u2013${t.max}`;
           return `<tr class="${active ? 'current-tier' : ''}">
-            <td>${active ? '▶ ' : ''}${range}</td>
+            <td>${active ? '\u25B6 ' : ''}${range}</td>
             <td>
               <span class="tier-dot" style="background:${t.color === '#ffffff' ? t.bg : t.color};"></span>
               ${t.label}
-              ${active ? '<strong> ← Current</strong>' : ''}
+              ${active ? '<strong> \u2190 Current</strong>' : ''}
             </td>
           </tr>`;
         }).join('')}
@@ -517,7 +345,7 @@ function buildHtml(v, score) {
   <!-- Signatures -->
   <div class="section">
     <div class="section-header">
-      <div class="section-title">Acknowledgement &amp; Signatures</div>
+      <div class="section-title">Acknowledgement &amp; Signatures${hasAck ? '<span class="ack-badge">Acknowledged</span>' : ''}</div>
       <div class="section-rule"></div>
     </div>
     <p class="sig-intro">
@@ -526,9 +354,13 @@ function buildHtml(v, score) {
     </p>
     <div class="sig-grid">
       <div class="sig-block">
-        <div class="sig-line"></div>
+        ${hasAck
+          ? `<div class="sig-filled">${ackName}</div>`
+          : '<div class="sig-line"></div>'}
         <div class="sig-line-label">Employee Signature</div>
-        <div class="sig-date-line"></div>
+        ${hasAck && ackDate
+          ? `<div class="sig-date-filled">${ackDate}</div>`
+          : '<div class="sig-date-line"></div>'}
         <div class="sig-line-label">Date</div>
       </div>
       <div class="sig-block">
@@ -541,8 +373,8 @@ function buildHtml(v, score) {
   </div>
 
   <div class="footer-bar">
-    <span>${docId} &nbsp;·&nbsp; ${v.employee_name} &nbsp;·&nbsp; Incident: ${v.incident_date}</span>
-    <span>Message Point Media — Internal Use Only</span>
+    <span>${docId} &nbsp;\u00B7&nbsp; ${v.employee_name} &nbsp;\u00B7&nbsp; Incident: ${v.incident_date}</span>
+    <span>Message Point Media \u2014 Internal Use Only</span>
   </div>
 
 </div>
-- 
2.52.0


From ecd38100501c4b44fd99079f97a47eeb51fc05c8 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 21:40:36 -0600
Subject: [PATCH 44/86] feat: add toast notifications to EmployeeModal for all
 actions

- Toast success/error on PDF download, negate, restore, hard delete
- Toast success on employee edit and violation amendment via modal callbacks
- Error details from API responses included in error toasts
---
 client/src/components/EmployeeModal.jsx | 67 +++++++++++++++++--------
 1 file changed, 45 insertions(+), 22 deletions(-)

diff --git a/client/src/components/EmployeeModal.jsx b/client/src/components/EmployeeModal.jsx
index d1a57f7..e5d9d4f 100755
--- a/client/src/components/EmployeeModal.jsx
+++ b/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,6 +98,8 @@ 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([
@@ -116,34 +119,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 +226,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 +428,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>
-- 
2.52.0


From 66f59dead3b43670aa600f7225f8fc478a432491 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 21:44:22 -0600
Subject: [PATCH 45/86] docs: update README for acknowledgment signature field,
 toast notifications, and PDF logo refactor

- Moved acknowledgment signature field from Proposed to Completed (Phase 7)
- Added toast notification system to Completed (Phase 7)
- Updated Violation Form features with acknowledgment section and toasts
- Updated Employee Profile Modal features with toast notifications
- Added Toast Notification System as standalone feature section
- Updated PDF Generation section: logo loaded from disk, ack rendering
- Updated Amendable Fields table with acknowledged_by and acknowledged_date
- Updated Database Schema section with new violation columns
- Updated Project Structure tree with ToastProvider.jsx and template.js description
- Updated API reference for POST /api/violations to note new fields
---
 README.md | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index fa09458..9e3f23f 100755
--- a/README.md
+++ b/README.md
@@ -132,18 +132,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 +163,13 @@ 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
+
 ### CPAS Tier System
 
 | Points | Tier | Label |
@@ -176,9 +186,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,7 +207,7 @@ 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/restore` | Restore a negated violation |
@@ -219,7 +231,8 @@ cpas/
 │   ├── 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)
 └── client/                                    # React frontend (Vite)
     ├── package.json
     ├── vite.config.js
@@ -235,7 +248,7 @@ cpas/
             ├── 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
+            ├── 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
@@ -244,6 +257,7 @@ cpas/
             ├── 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 +268,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 +287,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,6 +317,8 @@ 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 |
 
 ---
 
@@ -315,7 +333,6 @@ Point values, violation type, and incident date are **immutable** after submissi
 - **Supervisor view** — scoped dashboard showing only the employees under a given supervisor, useful for multi-supervisor environments
 
 #### 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
 
-- 
2.52.0


From da602f69af738fb697d26f4991958cd909876782 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 21:46:30 -0600
Subject: [PATCH 46/86] docs: update ReadmeModal admin guide for acknowledgment
 signature and toast notifications

- Added acknowledgment signature workflow to "Logging a Violation" section (step 7)
- Added toast notification step to violation logging workflow (step 9)
- Updated Violation History section: amend now includes acknowledged-by/date fields
- Added PDF acknowledgment rendering note to Violation History
- Added "Toast Notifications" as standalone feature section
- Updated Amendable Fields to include acknowledged_by and acknowledged_date
- Updated Immutability Rules table with ack fields
- Moved acknowledgment signature and toast system to Shipped in roadmap
- Removed acknowledgment signature from Near-term (already shipped)
---
 client/src/components/ReadmeModal.jsx | 39 ++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/client/src/components/ReadmeModal.jsx b/client/src/components/ReadmeModal.jsx
index 8819b89..fee0a27 100644
--- a/client/src/components/ReadmeModal.jsx
+++ b/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);
-- 
2.52.0


From 979e9724e002f0b180a8314fa065eec50fcc66bd Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 22:01:35 -0600
Subject: [PATCH 47/86] fix: score endpoint now returns total_violations and
 negated_count

The /api/employees/:id/score endpoint previously only returned data from
the active_cpas_scores view (active_points + violation_count for the 90-day
window). The EmployeeModal score cards reference total_violations and
negated_count which were undefined, causing blank displays.

Now queries the violations table directly for all-time totals alongside
the rolling 90-day active data.
---
 server.js | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/server.js b/server.js
index 59ed7d3..f4c59cc 100755
--- a/server.js
+++ b/server.js
@@ -128,10 +128,29 @@ 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 ──────────────────────────────────────────────────────
-- 
2.52.0


From 5d835e6b911cf4f1e6edac2bf6a93d6d8cc1f3b4 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 23:13:26 -0600
Subject: [PATCH 48/86] feat: add shared DEPARTMENTS constant

---
 client/src/data/departments.js | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 client/src/data/departments.js

diff --git a/client/src/data/departments.js b/client/src/data/departments.js
new file mode 100644
index 0000000..9ed3cfa
--- /dev/null
+++ b/client/src/data/departments.js
@@ -0,0 +1,9 @@
+export const DEPARTMENTS = [
+  'Administrative',
+  'Business Development',
+  'Design and Content',
+  'Executive',
+  'Implementation and Support',
+  'Operations',
+  'Production',
+];
-- 
2.52.0


From 0f31677631a959ea55178c4b3f03a34578fc0aab Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 23:14:40 -0600
Subject: [PATCH 49/86] feat: replace department text input with preloaded
 select dropdown

---
 client/src/components/ViolationForm.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ViolationForm.jsx b/client/src/components/ViolationForm.jsx
index 3367803..2ca944b 100755
--- a/client/src/components/ViolationForm.jsx
+++ b/client/src/components/ViolationForm.jsx
@@ -6,6 +6,7 @@ import CpasBadge from './CpasBadge';
 import TierWarning from './TierWarning';
 import ViolationHistory from './ViolationHistory';
 import { useToast } from './ToastProvider';
+import { DEPARTMENTS } from '../data/departments';
 
 const s = {
   content:      { padding: '32px 40px', background: '#111217', borderRadius: '10px', color: '#f8f9fa' },
@@ -171,12 +172,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>
 
-- 
2.52.0


From d8793000fc69fa2089318fea2fd764e52c758fef Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 23:15:15 -0600
Subject: [PATCH 50/86] feat: replace department text input with preloaded
 select dropdown

---
 client/src/components/EditEmployeeModal.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/components/EditEmployeeModal.jsx b/client/src/components/EditEmployeeModal.jsx
index a438e1b..1d71ed4 100644
--- a/client/src/components/EditEmployeeModal.jsx
+++ b/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}>
-- 
2.52.0


From 76f972562b376e0b64072fb0e0264c3229988d46 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 23:27:25 -0600
Subject: [PATCH 51/86] feat: add stakeholder demo landing page with synthetic
 data

---
 demo/index.html | 750 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 750 insertions(+)
 create mode 100644 demo/index.html

diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..50f4c60
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,750 @@
+<!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: 24px 40px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-family: 'DM Mono', monospace; }
+  .footer-brand { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--text-dim); }
+
+  /* ── 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; }
+  }
+</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-brand">CPAS Tracker</div>
+  <div>DEMO BUILD — All data synthetic — Not for operational use</div>
+  <div>© 2026 MPM</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');
+  }
+</script>
+</body>
+</html>
-- 
2.52.0


From 7ef00796bd4854acfe2b3e2984a203595fcd00a2 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sat, 7 Mar 2026 23:59:00 -0600
Subject: [PATCH 52/86] feat: serve demo/ folder as static route at /demo

Adds express.static middleware for the demo/ directory mounted at /demo,
placed before the SPA catch-all so /demo/index.html resolves to the
standalone stakeholder demo page instead of the React app.
---
 server.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/server.js b/server.js
index f4c59cc..d1dc66b 100755
--- a/server.js
+++ b/server.js
@@ -11,6 +11,11 @@ app.use(cors());
 app.use(express.json());
 app.use(express.static(path.join(__dirname, 'client', 'dist')));
 
+// ── 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 {
-- 
2.52.0


From 575c4c57fd663b732702189761f6615cf4796a6d Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 00:11:18 -0600
Subject: [PATCH 53/86] fix: add demo/ folder to Dockerfile COPY so /demo route
 is served in container

---
 Dockerfile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Dockerfile b/Dockerfile
index c3bebec..18091ea 100755
--- a/Dockerfile
+++ b/Dockerfile
@@ -21,6 +21,7 @@ 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
-- 
2.52.0


From 232814db93adae0e78c1acbc725351b6a19468f9 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 00:19:59 -0600
Subject: [PATCH 54/86] feat: enhance demo footer with copyright, Gitea link,
 and live dev-time ticker

---
 demo/index.html | 209 ++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 176 insertions(+), 33 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 50f4c60..e43ff4a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -10,27 +10,27 @@
   *, *::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;
+    --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; }
@@ -407,8 +407,94 @@
   .feature-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
 
   /* ── FOOTER ── */
-  footer { border-top: 1px solid var(--border); padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-family: 'DM Mono', monospace; }
-  .footer-brand { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--text-dim); }
+  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; }
@@ -429,6 +515,8 @@
     .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>
@@ -531,7 +619,7 @@
           <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-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>
@@ -643,8 +731,8 @@
     <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">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>
@@ -656,7 +744,7 @@
 
     <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.
+        ⚡ DEMO VIEW — Form fields shown with sample data. Submission is disabled in demo mode.
       </div>
     </div>
 
@@ -688,10 +776,10 @@
           <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>
+              <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/>
+              <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>
@@ -702,7 +790,7 @@
           <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.
+          ⚡ <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>
@@ -733,9 +821,28 @@
 </div><!-- /main -->
 
 <footer>
-  <div class="footer-brand">CPAS Tracker</div>
-  <div>DEMO BUILD — All data synthetic — Not for operational use</div>
-  <div>© 2026 MPM</div>
+  <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>
@@ -745,6 +852,42 @@
     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>
-- 
2.52.0


From 7e1164af13d93379a2ce8de9dae6103b16a8bf07 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 00:21:30 -0600
Subject: [PATCH 55/86] feat: add footer with copyright, Gitea repo link, and
 live dev ticker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- © Jason Stedwell copyright with current year
- Gitea icon + link to https://git.alwisp.com/jason/cpas
- Running elapsed time ticker since first commit (2026-03-06T11:33:32)
  ticks every second: Xd HHh MMm SSs format
- App layout changed to flex column so footer pins to page bottom
- Footer styles isolated in `sf` object for clarity
---
 client/src/App.jsx | 77 +---------------------------------------------
 1 file changed, 1 insertion(+), 76 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index b3645c2..df8dadf 100755
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,76 +1 @@
-import React, { useState } from 'react';
-import ViolationForm from './components/ViolationForm';
-import Dashboard     from './components/Dashboard';
-import ReadmeModal   from './components/ReadmeModal';
-import ToastProvider from './components/ToastProvider';
-
-const tabs = [
-  { id: 'dashboard', label: '📊 Dashboard' },
-  { id: 'violation', label: '+ New Violation' },
-];
-
-const s = {
-  app:  { minHeight: '100vh', background: '#050608', fontFamily: "'Segoe UI', Arial, sans-serif", color: '#f8f9fa' },
-  nav:  { background: '#000000', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0, borderBottom: '1px solid #333' },
-  logoWrap: { display: 'flex', alignItems: 'center', marginRight: '32px', padding: '14px 0' },
-  logoImg:  { height: '28px', marginRight: '10px' },
-  logoText: { color: '#f8f9fa', fontWeight: 800, fontSize: '18px', letterSpacing: '0.5px' },
-  tab:  (active) => ({
-    padding: '18px 22px',
-    color: active ? '#f8f9fa' : 'rgba(248,249,250,0.6)',
-    borderBottom: active ? '3px solid #d4af37' : '3px solid transparent',
-    cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
-    background: 'none', border: 'none',
-  }),
-  // Docs button sits flush-right in the nav
-  docsBtn: {
-    marginLeft: 'auto',
-    background: 'none',
-    border: '1px solid #2a2b3a',
-    color: '#9ca0b8',
-    borderRadius: '6px',
-    padding: '6px 14px',
-    fontSize: '12px',
-    cursor: 'pointer',
-    fontWeight: 600,
-    letterSpacing: '0.3px',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '6px',
-  },
-  card: { maxWidth: '1100px', margin: '30px auto', background: '#111217', borderRadius: '10px', boxShadow: '0 2px 16px rgba(0,0,0,0.6)', border: '1px solid #222' },
-};
-
-export default function App() {
-  const [tab,        setTab]        = useState('dashboard');
-  const [showReadme, setShowReadme] = useState(false);
-
-  return (
-    <ToastProvider>
-      <div style={s.app}>
-        <nav style={s.nav}>
-          <div style={s.logoWrap}>
-            <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
-            <div style={s.logoText}>CPAS Tracker</div>
-          </div>
-
-          {tabs.map(t => (
-            <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
-              {t.label}
-            </button>
-          ))}
-
-          <button style={s.docsBtn} onClick={() => setShowReadme(true)} title="Open admin documentation">
-            <span>?</span> Docs
-          </button>
-        </nav>
-
-        <div style={s.card}>
-          {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
-        </div>
-
-        {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
-      </div>
-    </ToastProvider>
-  );
-}
+aW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCB1c2VFZmZlY3QgfSBmcm9tICdyZWFjdCc7CmltcG9ydCBWaW9sYXRpb25Gb3JtIGZyb20gJy4vY29tcG9uZW50cy9WaW9sYXRpb25Gb3JtJzsKaW1wb3J0IERhc2hib2FyZCAgICAgZnJvbSAnLi9jb21wb25lbnRzL0Rhc2hib2FyZCc7CmltcG9ydCBSZWFkbWVNb2RhbCAgIGZyb20gJy4vY29tcG9uZW50cy9SZWFkbWVNb2RhbCc7CmltcG9ydCBUb2FzdFByb3ZpZGVyIGZyb20gJy4vY29tcG9uZW50cy9Ub2FzdFByb3ZpZGVyJzsKCmNvbnN0IFJFUE9fVVJMICAgICAgPSAnaHR0cHM6Ly9naXQuYWx3aXNwLmNvbS9qYXNvbi9jcGFzJzsKLy8gRmlyc3QgY29tbWl0IHRpbWVzdGFtcCDigJQgdXNlZCB0byBkcml2ZSB0aGUgZGV2IHRpY2tlcgpjb25zdCBQUk9KRUNUX1NUQVJUID0gbmV3IERhdGUoJzIwMjYtMDMtMDZUMTE6MzM6MzItMDY6MDAnKTsKCmNvbnN0IHRhYnMgPSBbCiAgeyBpZDogJ2Rhc2hib2FyZCcsIGxhYmVsOiAn8J+TiiBEYXNoYm9hcmQnIH0sCiAgeyBpZDogJ3Zpb2xhdGlvbicsIGxhYmVsOiAnKyBOZXcgVmlvbGF0aW9uJyB9LApdOwoKLyog4pSA4pSAIGhlbHBlcnMg4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSAICovCmZ1bmN0aW9uIGVsYXBzZWQoZnJvbSkgewogIGNvbnN0IGRpZmYgPSBNYXRoLmZsb29yKChEYXRlLm5vdygpIC0gZnJvbS5nZXRUaW1lKCkpIC8gMTAwMCk7CiAgY29uc3QgZCA9IE1hdGguZmxvb3IoZGlmZiAvIDg2NDAwKTsKICBjb25zdCBoID0gTWF0aC5mbG9vcigoZGlmZiAlIDg2NDAwKSAvIDM2MDApOwogIGNvbnN0IG0gPSBNYXRoLmZsb29yKChkaWZmICUgMzYwMCkgLyA2MCk7CiAgY29uc3QgcyA9IGRpZmYgJSA2MDsKICByZXR1cm4gYCR7ZH1kICR7U3RyaW5nKGgpLnBhZFN0YXJ0KDIsJzAnKX1oICR7U3RyaW5nKG0pLnBhZFN0YXJ0KDIsJzAnKX1tICR7U3RyaW5nKHMpLnBhZFN0YXJ0KDIsJzAnKX1zYDsKfQoKLyog4pSA4pSAIHN1Yi1jb21wb25lbnRzIOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgCAqLwpmdW5jdGlvbiBEZXZUaWNrZXIoKSB7CiAgY29uc3QgW3RpY2ssIHNldFRpY2tdID0gdXNlU3RhdGUoKCkgPT4gZWxhcHNlZChQUk9KRUNUX1NUQVJUKSk7CiAgdXNlRWZmZWN0KCgpID0+IHsKICAgIGNvbnN0IGlkID0gc2V0SW50ZXJ2YWwoKCkgPT4gc2V0VGljayhlbGFwc2VkKFBST0pFQ1RfU1RBUlQpKSwgMTAwMCk7CiAgICByZXR1cm4gKCkgPT4gY2xlYXJJbnRlcnZhbChpZCk7CiAgfSwgW10pOwogIHJldHVybiAoCiAgICA8c3BhbiBzdHlsZT17c2YudGlja2VyfSB0aXRsZT0iVGltZSBzaW5jZSBmaXJzdCBjb21taXQiPgogICAgICA8c3BhbiBzdHlsZT17c2YudGlja2VyRG90fSAvPgogICAgICB7dGlja30KICAgIDwvc3Bhbj4KICApOwp9CgpmdW5jdGlvbiBHaXRlYUljb24oKSB7CiAgLy8gU2ltcGxlIEdpdGVhLXN0eWxlIGljb24gdXNpbmcgU1ZHIHBhdGgKICByZXR1cm4gKAogICAgPHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiBzdHlsZT17eyBkaXNwbGF5OidibG9jaycgfX0+CiAgICAgIDxwYXRoIGQ9Ik0xMiAyQzYuNDc3IDIgMiA2LjQ3NyAyIDEyYzAgNC40MTggMi44NjUgOC4xNjYgNi44MzkgOS40ODkuNS4wOTIuNjgyLS4yMTcuNjgyLS40ODIKICAgICAgICAgICAgICAgMC0uMjM3LS4wMDktLjg2OC0uMDEzLTEuNzAzLTIuNzgyLjYwNS0zLjM2OS0xLjM0LTMuMzY5LTEuMzQtLjQ1NC0xLjE1NC0xLjExLTEuNDYyCiAgICAgICAgICAgICAgIC0xLjExLTEuNDYyLS45MDgtLjYyLjA2OS0uNjA4LjA2OS0uNjA4IDEuMDAzLjA3IDEuNTMxIDEuMDMgMS41MzEgMS4wMy44OTIgMS41MjkKICAgICAgICAgICAgICAgMi4zNDEgMS4wODcgMi45MS44MzIuMDkyLS42NDcuMzUtMS4wODguNjM2LTEuMzM4LTIuMjItLjI1My00LjU1NS0xLjExLTQuNTU1LTQuOTQzCiAgICAgICAgICAgICAgIDAtMS4wOTEuMzktMS45ODQgMS4wMjktMi42ODMtLjEwMy0uMjUzLS40NDYtMS4yNy4wOTgtMi42NDcgMCAwIC44NC0uMjY5IDIuNzUgMS4wMjUKICAgICAgICAgICAgICAgQTkuNTY0IDkuNTY0IDAgMDExMiA2Ljg0NGE5LjU5IDkuNTkgMCAwMTIuNTA0LjMzN2MxLjkwOS0xLjI5NCAyLjc0Ny0xLjAyNSAyLjc0Ny0xLjAyNQogICAgICAgICAgICAgICAuNTQ2IDEuMzc3LjIwMiAyLjM5NC4xIDIuNjQ3LjY0LjY5OSAxLjAyOCAxLjU5MiAxLjAyOCAyLjY4MyAwIDMuODQyLTIuMzM5IDQuNjg3CiAgICAgICAgICAgICAgIC00LjU2NiA0LjkzNS4zNTkuMzA5LjY3OC45MTkuNjc4IDEuODUyIDAgMS4zMzYtLjAxMiAyLjQxNS0uMDEyIDIuNzQzIDAgLjI2Ny4xOC41NzgKICAgICAgICAgICAgICAgLjY4OC40OEMxOS4xMzggMjAuMTYzIDIyIDE2LjQxOCAyMiAxMmMwLTUuNTIzLTQuNDc3LTEwLTEwLTEweiIvPgogICAgPC9zdmc+CiAgKTsKfQoKZnVuY3Rpb24gQXBwRm9vdGVyKCkgewogIHJldHVybiAoCiAgICA8Zm9vdGVyIHN0eWxlPXtzZi5mb290ZXJ9PgogICAgICA8c3BhbiBzdHlsZT17c2YuY29weX0+wqkge25ldyBEYXRlKCkuZ2V0RnVsbFllYXIoKX0gSmFzb24gU3RlZHdlbGw8L3NwYW4+CiAgICAgIDxzcGFuIHN0eWxlPXtzZi5zZXB9PsK3PC9zcGFuPgogICAgICA8RGV2VGlja2VyIC8+CiAgICAgIDxzcGFuIHN0eWxlPXtzZi5zZXB9PsK3PC9zcGFuPgogICAgICA8YSBocmVmPXtSRVBPX1VSTH0gdGFyZ2V0PSJfYmxhbmsiIHJlbD0ibm9vcGVuZXIgbm9yZWZlcnJlciIgc3R5bGU9e3NmLnJlcG9MaW5rfSB0aXRsZT0iVmlldyBzb3VyY2Ugb24gR2l0ZWEiPgogICAgICAgIDxHaXRlYUljb24gLz4KICAgICAgICA8c3Bhbj5jcGFzPC9zcGFuPgogICAgICA8L2E+CiAgICA8L2Zvb3Rlcj4KICApOwp9CgovKiDilIDilIAgc3R5bGVzIOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgCAqLwpjb25zdCBzID0gewogIGFwcDogICAgICB7IG1pbkhlaWdodDogJzEwMHZoJywgYmFja2dyb3VuZDogJyMwNTA2MDgnLCBmb250RmFtaWx5OiAiJ1NlZ29lIFVJJywgQXJpYWwsIHNhbnMtc2VyaWYiLCBjb2xvcjogJyNmOGY5ZmEnLCBkaXNwbGF5OiAnZmxleCcsIGZsZXhEaXJlY3Rpb246ICdjb2x1bW4nIH0sCiAgbmF2OiAgICAgIHsgYmFja2dyb3VuZDogJyMwMDAwMDAnLCBwYWRkaW5nOiAnMCA0MHB4JywgZGlzcGxheTogJ2ZsZXgnLCBhbGlnbkl0ZW1zOiAnY2VudGVyJywgZ2FwOiAwLCBib3JkZXJCb3R0b206ICcxcHggc29saWQgIzMzMycgfSwKICBsb2dvV3JhcDogeyBkaXNwbGF5OiAnZmxleCcsIGFsaWduSXRlbXM6ICdjZW50ZXInLCBtYXJnaW5SaWdodDogJzMycHgnLCBwYWRkaW5nOiAnMTRweCAwJyB9LAogIGxvZ29JbWc6ICB7IGhlaWdodDogJzI4cHgnLCBtYXJnaW5SaWdodDogJzEwcHgnIH0sCiAgbG9nb1RleHQ6IHsgY29sb3I6ICcjZjhmOWZhJywgZm9udFdlaWdodDogODAwLCBmb250U2l6ZTogJzE4cHgnLCBsZXR0ZXJTcGFjaW5nOiAnMC41cHgnIH0sCiAgdGFiOiAoYWN0aXZlKSA9PiAoewogICAgcGFkZGluZzogJzE4cHggMjJweCcsCiAgICBjb2xvcjogYWN0aXZlID8gJyNmOGY5ZmEnIDogJ3JnYmEoMjQ4LDI0OSwyNTAsMC42KScsCiAgICBib3JkZXJCb3R0b206IGFjdGl2ZSA/ICczcHggc29saWQgI2Q0YWYzNycgOiAnM3B4IHNvbGlkIHRyYW5zcGFyZW50JywKICAgIGN1cnNvcjogJ3BvaW50ZXInLCBmb250V2VpZ2h0OiBhY3RpdmUgPyA3MDAgOiA0MDAsIGZvbnRTaXplOiAnMTRweCcsCiAgICBiYWNrZ3JvdW5kOiAnbm9uZScsIGJvcmRlcjogJ25vbmUnLAogIH0pLAogIGRvY3NCdG46IHsKICAgIG1hcmdpbkxlZnQ6ICdhdXRvJywKICAgIGJhY2tncm91bmQ6ICdub25lJywKICAgIGJvcmRlcjogJzFweCBzb2xpZCAjMmEyYjNhJywKICAgIGNvbG9yOiAnIzljYTBiOCcsCiAgICBib3JkZXJSYWRpdXM6ICc2cHgnLAogICAgcGFkZGluZzogJzZweCAxNHB4JywKICAgIGZvbnRTaXplOiAnMTJweCcsCiAgICBjdXJzb3I6ICdwb2ludGVyJywKICAgIGZvbnRXZWlnaHQ6IDYwMCwKICAgIGxldHRlclNwYWNpbmc6ICcwLjNweCcsCiAgICBkaXNwbGF5OiAnZmxleCcsCiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJywKICAgIGdhcDogJzZweCcsCiAgfSwKICBtYWluOiB7IGZsZXg6IDEgfSwKICBjYXJkOiB7IG1heFdpZHRoOiAnMTEwMHB4JywgbWFyZ2luOiAnMzBweCBhdXRvJywgYmFja2dyb3VuZDogJyMxMTEyMTcnLCBib3JkZXJSYWRpdXM6ICcxMHB4JywgYm94U2hhZG93OiAnMCAycHggMTZweCByZ2JhKDAsMCwwLDAuNiknLCBib3JkZXI6ICcxcHggc29saWQgIzIyMicgfSwKfTsKCi8vIEZvb3Rlci1zcGVjaWZpYyBzdHlsZXMga2VwdCBzZXBhcmF0ZSBmb3IgY2xhcml0eQpjb25zdCBzZiA9IHsKICBmb290ZXI6IHsKICAgIGJhY2tncm91bmQ6ICcjMDAwJywKICAgIGJvcmRlclRvcDogJzFweCBzb2xpZCAjMWUxZjJlJywKICAgIHBhZGRpbmc6ICcxMnB4IDQwcHgnLAogICAgZGlzcGxheTogJ2ZsZXgnLAogICAgYWxpZ25JdGVtczogJ2NlbnRlcicsCiAgICBnYXA6ICcxMHB4JywKICAgIGZvbnRTaXplOiAnMTJweCcsCiAgICBjb2xvcjogJyM0YTRkNjYnLAogICAgZmxleFdyYXA6ICd3cmFwJywKICB9LAogIGNvcHk6ICAgICAgeyBjb2xvcjogJyM0YTRkNjYnLCB3aGl0ZVNwYWNlOiAnbm93cmFwJyB9LAogIHNlcDogICAgICAgeyBjb2xvcjogJyMyYTJiM2EnLCB1c2VyU2VsZWN0OiAnbm9uZScgfSwKICB0aWNrZXI6IHsKICAgIGRpc3BsYXk6ICdpbmxpbmUtZmxleCcsCiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJywKICAgIGdhcDogJzZweCcsCiAgICBmb250RmFtaWx5OiAiJ0NvdXJpZXIgTmV3JywgbW9ub3NwYWNlIiwKICAgIGZvbnRTaXplOiAnMTFweCcsCiAgICBjb2xvcjogJyM1YTdhNWEnLAogICAgbGV0dGVyU3BhY2luZzogJzAuNXB4JywKICB9LAogIHRpY2tlckRvdDogewogICAgd2lkdGg6ICc2cHgnLAogICAgaGVpZ2h0OiAnNnB4JywKICAgIGJvcmRlclJhZGl1czogJzUwJScsCiAgICBiYWNrZ3JvdW5kOiAnIzNhNmEzYScsCiAgICBib3hTaGFkb3c6ICcwIDAgNHB4ICMzYTZhM2EnLAogICAgZmxleFNocmluazogMCwKICB9LAogIHJlcG9MaW5rOiB7CiAgICBkaXNwbGF5OiAnaW5saW5lLWZsZXgnLAogICAgYWxpZ25JdGVtczogJ2NlbnRlcicsCiAgICBnYXA6ICc1cHgnLAogICAgY29sb3I6ICcjNGE0ZDY2JywKICAgIHRleHREZWNvcmF0aW9uOiAnbm9uZScsCiAgICB0cmFuc2l0aW9uOiAnY29sb3IgMC4xNXMnLAogIH0sCn07CgovKiDilIDilIAgbWFpbiBhcHAg4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSAICovCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIEFwcCgpIHsKICBjb25zdCBbdGFiLCAgICAgICAgc2V0VGFiXSAgICAgICAgPSB1c2VTdGF0ZSgnZGFzaGJvYXJkJyk7CiAgY29uc3QgW3Nob3dSZWFkbWUsIHNldFNob3dSZWFkbWVdID0gdXNlU3RhdGUoZmFsc2UpOwoKICByZXR1cm4gKAogICAgPFRvYXN0UHJvdmlkZXI+CiAgICAgIDxkaXYgc3R5bGU9e3MuYXBwfT4KICAgICAgICA8bmF2IHN0eWxlPXtzLm5hdn0+CiAgICAgICAgICA8ZGl2IHN0eWxlPXtzLmxvZ29XcmFwfT4KICAgICAgICAgICAgPGltZyBzcmM9Ii9zdGF0aWMvbXBtLWxvZ28ucG5nIiBhbHQ9Ik1QTSIgc3R5bGU9e3MubG9nb0ltZ30gLz4KICAgICAgICAgICAgPGRpdiBzdHlsZT17cy5sb2dvVGV4dH0+Q1BBUyBUcmFja2VyPC9kaXY+CiAgICAgICAgICA8L2Rpdj4KCiAgICAgICAgICB7dGFicy5tYXAodCA9PiAoCiAgICAgICAgICAgIDxidXR0b24ga2V5PXt0LmlkfSBzdHlsZT17cy50YWIodGFiID09PSB0LmlkKX0gb25DbGljaz17KCkgPT4gc2V0VGFiKHQuaWQpfT4KICAgICAgICAgICAgICB7dC5sYWJlbH0KICAgICAgICAgICAgPC9idXR0b24+CiAgICAgICAgICApKX0KCiAgICAgICAgICA8YnV0dG9uIHN0eWxlPXtzLmRvY3NCdG59IG9uQ2xpY2s9eygpID0+IHNldFNob3dSZWFkbWUodHJ1ZSl9IHRpdGxlPSJPcGVuIGFkbWluIGRvY3VtZW50YXRpb24iPgogICAgICAgICAgICA8c3Bhbj4/PC9zcGFuPiBEb2NzCiAgICAgICAgICA8L2J1dHRvbj4KICAgICAgICA8L25hdj4KCiAgICAgICAgPGRpdiBzdHlsZT17cy5tYWlufT4KICAgICAgICAgIDxkaXYgc3R5bGU9e3MuY2FyZH0+CiAgICAgICAgICAgIHt0YWIgPT09ICdkYXNoYm9hcmQnID8gPERhc2hib2FyZCAvPiA6IDxWaW9sYXRpb25Gb3JtIC8+fQogICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9kaXY+CgogICAgICAgIDxBcHBGb290ZXIgLz4KCiAgICAgICAge3Nob3dSZWFkbWUgJiYgPFJlYWRtZU1vZGFsIG9uQ2xvc2U9eygpID0+IHNldFNob3dSZWFkbWUoZmFsc2UpfSAvPn0KICAgICAgPC9kaXY+CiAgICA8L1RvYXN0UHJvdmlkZXI+CiAgKTsKfQo=
\ No newline at end of file
-- 
2.52.0


From 5f0ae959ede4dca006298447ddc3dd42514bacc1 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 00:25:11 -0600
Subject: [PATCH 56/86] Update client/src/App.jsx

---
 client/src/App.jsx | 77 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 76 insertions(+), 1 deletion(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index df8dadf..b3645c2 100755
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1 +1,76 @@
-aW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCB1c2VFZmZlY3QgfSBmcm9tICdyZWFjdCc7CmltcG9ydCBWaW9sYXRpb25Gb3JtIGZyb20gJy4vY29tcG9uZW50cy9WaW9sYXRpb25Gb3JtJzsKaW1wb3J0IERhc2hib2FyZCAgICAgZnJvbSAnLi9jb21wb25lbnRzL0Rhc2hib2FyZCc7CmltcG9ydCBSZWFkbWVNb2RhbCAgIGZyb20gJy4vY29tcG9uZW50cy9SZWFkbWVNb2RhbCc7CmltcG9ydCBUb2FzdFByb3ZpZGVyIGZyb20gJy4vY29tcG9uZW50cy9Ub2FzdFByb3ZpZGVyJzsKCmNvbnN0IFJFUE9fVVJMICAgICAgPSAnaHR0cHM6Ly9naXQuYWx3aXNwLmNvbS9qYXNvbi9jcGFzJzsKLy8gRmlyc3QgY29tbWl0IHRpbWVzdGFtcCDigJQgdXNlZCB0byBkcml2ZSB0aGUgZGV2IHRpY2tlcgpjb25zdCBQUk9KRUNUX1NUQVJUID0gbmV3IERhdGUoJzIwMjYtMDMtMDZUMTE6MzM6MzItMDY6MDAnKTsKCmNvbnN0IHRhYnMgPSBbCiAgeyBpZDogJ2Rhc2hib2FyZCcsIGxhYmVsOiAn8J+TiiBEYXNoYm9hcmQnIH0sCiAgeyBpZDogJ3Zpb2xhdGlvbicsIGxhYmVsOiAnKyBOZXcgVmlvbGF0aW9uJyB9LApdOwoKLyog4pSA4pSAIGhlbHBlcnMg4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSAICovCmZ1bmN0aW9uIGVsYXBzZWQoZnJvbSkgewogIGNvbnN0IGRpZmYgPSBNYXRoLmZsb29yKChEYXRlLm5vdygpIC0gZnJvbS5nZXRUaW1lKCkpIC8gMTAwMCk7CiAgY29uc3QgZCA9IE1hdGguZmxvb3IoZGlmZiAvIDg2NDAwKTsKICBjb25zdCBoID0gTWF0aC5mbG9vcigoZGlmZiAlIDg2NDAwKSAvIDM2MDApOwogIGNvbnN0IG0gPSBNYXRoLmZsb29yKChkaWZmICUgMzYwMCkgLyA2MCk7CiAgY29uc3QgcyA9IGRpZmYgJSA2MDsKICByZXR1cm4gYCR7ZH1kICR7U3RyaW5nKGgpLnBhZFN0YXJ0KDIsJzAnKX1oICR7U3RyaW5nKG0pLnBhZFN0YXJ0KDIsJzAnKX1tICR7U3RyaW5nKHMpLnBhZFN0YXJ0KDIsJzAnKX1zYDsKfQoKLyog4pSA4pSAIHN1Yi1jb21wb25lbnRzIOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgCAqLwpmdW5jdGlvbiBEZXZUaWNrZXIoKSB7CiAgY29uc3QgW3RpY2ssIHNldFRpY2tdID0gdXNlU3RhdGUoKCkgPT4gZWxhcHNlZChQUk9KRUNUX1NUQVJUKSk7CiAgdXNlRWZmZWN0KCgpID0+IHsKICAgIGNvbnN0IGlkID0gc2V0SW50ZXJ2YWwoKCkgPT4gc2V0VGljayhlbGFwc2VkKFBST0pFQ1RfU1RBUlQpKSwgMTAwMCk7CiAgICByZXR1cm4gKCkgPT4gY2xlYXJJbnRlcnZhbChpZCk7CiAgfSwgW10pOwogIHJldHVybiAoCiAgICA8c3BhbiBzdHlsZT17c2YudGlja2VyfSB0aXRsZT0iVGltZSBzaW5jZSBmaXJzdCBjb21taXQiPgogICAgICA8c3BhbiBzdHlsZT17c2YudGlja2VyRG90fSAvPgogICAgICB7dGlja30KICAgIDwvc3Bhbj4KICApOwp9CgpmdW5jdGlvbiBHaXRlYUljb24oKSB7CiAgLy8gU2ltcGxlIEdpdGVhLXN0eWxlIGljb24gdXNpbmcgU1ZHIHBhdGgKICByZXR1cm4gKAogICAgPHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiBzdHlsZT17eyBkaXNwbGF5OidibG9jaycgfX0+CiAgICAgIDxwYXRoIGQ9Ik0xMiAyQzYuNDc3IDIgMiA2LjQ3NyAyIDEyYzAgNC40MTggMi44NjUgOC4xNjYgNi44MzkgOS40ODkuNS4wOTIuNjgyLS4yMTcuNjgyLS40ODIKICAgICAgICAgICAgICAgMC0uMjM3LS4wMDktLjg2OC0uMDEzLTEuNzAzLTIuNzgyLjYwNS0zLjM2OS0xLjM0LTMuMzY5LTEuMzQtLjQ1NC0xLjE1NC0xLjExLTEuNDYyCiAgICAgICAgICAgICAgIC0xLjExLTEuNDYyLS45MDgtLjYyLjA2OS0uNjA4LjA2OS0uNjA4IDEuMDAzLjA3IDEuNTMxIDEuMDMgMS41MzEgMS4wMy44OTIgMS41MjkKICAgICAgICAgICAgICAgMi4zNDEgMS4wODcgMi45MS44MzIuMDkyLS42NDcuMzUtMS4wODguNjM2LTEuMzM4LTIuMjItLjI1My00LjU1NS0xLjExLTQuNTU1LTQuOTQzCiAgICAgICAgICAgICAgIDAtMS4wOTEuMzktMS45ODQgMS4wMjktMi42ODMtLjEwMy0uMjUzLS40NDYtMS4yNy4wOTgtMi42NDcgMCAwIC44NC0uMjY5IDIuNzUgMS4wMjUKICAgICAgICAgICAgICAgQTkuNTY0IDkuNTY0IDAgMDExMiA2Ljg0NGE5LjU5IDkuNTkgMCAwMTIuNTA0LjMzN2MxLjkwOS0xLjI5NCAyLjc0Ny0xLjAyNSAyLjc0Ny0xLjAyNQogICAgICAgICAgICAgICAuNTQ2IDEuMzc3LjIwMiAyLjM5NC4xIDIuNjQ3LjY0LjY5OSAxLjAyOCAxLjU5MiAxLjAyOCAyLjY4MyAwIDMuODQyLTIuMzM5IDQuNjg3CiAgICAgICAgICAgICAgIC00LjU2NiA0LjkzNS4zNTkuMzA5LjY3OC45MTkuNjc4IDEuODUyIDAgMS4zMzYtLjAxMiAyLjQxNS0uMDEyIDIuNzQzIDAgLjI2Ny4xOC41NzgKICAgICAgICAgICAgICAgLjY4OC40OEMxOS4xMzggMjAuMTYzIDIyIDE2LjQxOCAyMiAxMmMwLTUuNTIzLTQuNDc3LTEwLTEwLTEweiIvPgogICAgPC9zdmc+CiAgKTsKfQoKZnVuY3Rpb24gQXBwRm9vdGVyKCkgewogIHJldHVybiAoCiAgICA8Zm9vdGVyIHN0eWxlPXtzZi5mb290ZXJ9PgogICAgICA8c3BhbiBzdHlsZT17c2YuY29weX0+wqkge25ldyBEYXRlKCkuZ2V0RnVsbFllYXIoKX0gSmFzb24gU3RlZHdlbGw8L3NwYW4+CiAgICAgIDxzcGFuIHN0eWxlPXtzZi5zZXB9PsK3PC9zcGFuPgogICAgICA8RGV2VGlja2VyIC8+CiAgICAgIDxzcGFuIHN0eWxlPXtzZi5zZXB9PsK3PC9zcGFuPgogICAgICA8YSBocmVmPXtSRVBPX1VSTH0gdGFyZ2V0PSJfYmxhbmsiIHJlbD0ibm9vcGVuZXIgbm9yZWZlcnJlciIgc3R5bGU9e3NmLnJlcG9MaW5rfSB0aXRsZT0iVmlldyBzb3VyY2Ugb24gR2l0ZWEiPgogICAgICAgIDxHaXRlYUljb24gLz4KICAgICAgICA8c3Bhbj5jcGFzPC9zcGFuPgogICAgICA8L2E+CiAgICA8L2Zvb3Rlcj4KICApOwp9CgovKiDilIDilIAgc3R5bGVzIOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgCAqLwpjb25zdCBzID0gewogIGFwcDogICAgICB7IG1pbkhlaWdodDogJzEwMHZoJywgYmFja2dyb3VuZDogJyMwNTA2MDgnLCBmb250RmFtaWx5OiAiJ1NlZ29lIFVJJywgQXJpYWwsIHNhbnMtc2VyaWYiLCBjb2xvcjogJyNmOGY5ZmEnLCBkaXNwbGF5OiAnZmxleCcsIGZsZXhEaXJlY3Rpb246ICdjb2x1bW4nIH0sCiAgbmF2OiAgICAgIHsgYmFja2dyb3VuZDogJyMwMDAwMDAnLCBwYWRkaW5nOiAnMCA0MHB4JywgZGlzcGxheTogJ2ZsZXgnLCBhbGlnbkl0ZW1zOiAnY2VudGVyJywgZ2FwOiAwLCBib3JkZXJCb3R0b206ICcxcHggc29saWQgIzMzMycgfSwKICBsb2dvV3JhcDogeyBkaXNwbGF5OiAnZmxleCcsIGFsaWduSXRlbXM6ICdjZW50ZXInLCBtYXJnaW5SaWdodDogJzMycHgnLCBwYWRkaW5nOiAnMTRweCAwJyB9LAogIGxvZ29JbWc6ICB7IGhlaWdodDogJzI4cHgnLCBtYXJnaW5SaWdodDogJzEwcHgnIH0sCiAgbG9nb1RleHQ6IHsgY29sb3I6ICcjZjhmOWZhJywgZm9udFdlaWdodDogODAwLCBmb250U2l6ZTogJzE4cHgnLCBsZXR0ZXJTcGFjaW5nOiAnMC41cHgnIH0sCiAgdGFiOiAoYWN0aXZlKSA9PiAoewogICAgcGFkZGluZzogJzE4cHggMjJweCcsCiAgICBjb2xvcjogYWN0aXZlID8gJyNmOGY5ZmEnIDogJ3JnYmEoMjQ4LDI0OSwyNTAsMC42KScsCiAgICBib3JkZXJCb3R0b206IGFjdGl2ZSA/ICczcHggc29saWQgI2Q0YWYzNycgOiAnM3B4IHNvbGlkIHRyYW5zcGFyZW50JywKICAgIGN1cnNvcjogJ3BvaW50ZXInLCBmb250V2VpZ2h0OiBhY3RpdmUgPyA3MDAgOiA0MDAsIGZvbnRTaXplOiAnMTRweCcsCiAgICBiYWNrZ3JvdW5kOiAnbm9uZScsIGJvcmRlcjogJ25vbmUnLAogIH0pLAogIGRvY3NCdG46IHsKICAgIG1hcmdpbkxlZnQ6ICdhdXRvJywKICAgIGJhY2tncm91bmQ6ICdub25lJywKICAgIGJvcmRlcjogJzFweCBzb2xpZCAjMmEyYjNhJywKICAgIGNvbG9yOiAnIzljYTBiOCcsCiAgICBib3JkZXJSYWRpdXM6ICc2cHgnLAogICAgcGFkZGluZzogJzZweCAxNHB4JywKICAgIGZvbnRTaXplOiAnMTJweCcsCiAgICBjdXJzb3I6ICdwb2ludGVyJywKICAgIGZvbnRXZWlnaHQ6IDYwMCwKICAgIGxldHRlclNwYWNpbmc6ICcwLjNweCcsCiAgICBkaXNwbGF5OiAnZmxleCcsCiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJywKICAgIGdhcDogJzZweCcsCiAgfSwKICBtYWluOiB7IGZsZXg6IDEgfSwKICBjYXJkOiB7IG1heFdpZHRoOiAnMTEwMHB4JywgbWFyZ2luOiAnMzBweCBhdXRvJywgYmFja2dyb3VuZDogJyMxMTEyMTcnLCBib3JkZXJSYWRpdXM6ICcxMHB4JywgYm94U2hhZG93OiAnMCAycHggMTZweCByZ2JhKDAsMCwwLDAuNiknLCBib3JkZXI6ICcxcHggc29saWQgIzIyMicgfSwKfTsKCi8vIEZvb3Rlci1zcGVjaWZpYyBzdHlsZXMga2VwdCBzZXBhcmF0ZSBmb3IgY2xhcml0eQpjb25zdCBzZiA9IHsKICBmb290ZXI6IHsKICAgIGJhY2tncm91bmQ6ICcjMDAwJywKICAgIGJvcmRlclRvcDogJzFweCBzb2xpZCAjMWUxZjJlJywKICAgIHBhZGRpbmc6ICcxMnB4IDQwcHgnLAogICAgZGlzcGxheTogJ2ZsZXgnLAogICAgYWxpZ25JdGVtczogJ2NlbnRlcicsCiAgICBnYXA6ICcxMHB4JywKICAgIGZvbnRTaXplOiAnMTJweCcsCiAgICBjb2xvcjogJyM0YTRkNjYnLAogICAgZmxleFdyYXA6ICd3cmFwJywKICB9LAogIGNvcHk6ICAgICAgeyBjb2xvcjogJyM0YTRkNjYnLCB3aGl0ZVNwYWNlOiAnbm93cmFwJyB9LAogIHNlcDogICAgICAgeyBjb2xvcjogJyMyYTJiM2EnLCB1c2VyU2VsZWN0OiAnbm9uZScgfSwKICB0aWNrZXI6IHsKICAgIGRpc3BsYXk6ICdpbmxpbmUtZmxleCcsCiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJywKICAgIGdhcDogJzZweCcsCiAgICBmb250RmFtaWx5OiAiJ0NvdXJpZXIgTmV3JywgbW9ub3NwYWNlIiwKICAgIGZvbnRTaXplOiAnMTFweCcsCiAgICBjb2xvcjogJyM1YTdhNWEnLAogICAgbGV0dGVyU3BhY2luZzogJzAuNXB4JywKICB9LAogIHRpY2tlckRvdDogewogICAgd2lkdGg6ICc2cHgnLAogICAgaGVpZ2h0OiAnNnB4JywKICAgIGJvcmRlclJhZGl1czogJzUwJScsCiAgICBiYWNrZ3JvdW5kOiAnIzNhNmEzYScsCiAgICBib3hTaGFkb3c6ICcwIDAgNHB4ICMzYTZhM2EnLAogICAgZmxleFNocmluazogMCwKICB9LAogIHJlcG9MaW5rOiB7CiAgICBkaXNwbGF5OiAnaW5saW5lLWZsZXgnLAogICAgYWxpZ25JdGVtczogJ2NlbnRlcicsCiAgICBnYXA6ICc1cHgnLAogICAgY29sb3I6ICcjNGE0ZDY2JywKICAgIHRleHREZWNvcmF0aW9uOiAnbm9uZScsCiAgICB0cmFuc2l0aW9uOiAnY29sb3IgMC4xNXMnLAogIH0sCn07CgovKiDilIDilIAgbWFpbiBhcHAg4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSAICovCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIEFwcCgpIHsKICBjb25zdCBbdGFiLCAgICAgICAgc2V0VGFiXSAgICAgICAgPSB1c2VTdGF0ZSgnZGFzaGJvYXJkJyk7CiAgY29uc3QgW3Nob3dSZWFkbWUsIHNldFNob3dSZWFkbWVdID0gdXNlU3RhdGUoZmFsc2UpOwoKICByZXR1cm4gKAogICAgPFRvYXN0UHJvdmlkZXI+CiAgICAgIDxkaXYgc3R5bGU9e3MuYXBwfT4KICAgICAgICA8bmF2IHN0eWxlPXtzLm5hdn0+CiAgICAgICAgICA8ZGl2IHN0eWxlPXtzLmxvZ29XcmFwfT4KICAgICAgICAgICAgPGltZyBzcmM9Ii9zdGF0aWMvbXBtLWxvZ28ucG5nIiBhbHQ9Ik1QTSIgc3R5bGU9e3MubG9nb0ltZ30gLz4KICAgICAgICAgICAgPGRpdiBzdHlsZT17cy5sb2dvVGV4dH0+Q1BBUyBUcmFja2VyPC9kaXY+CiAgICAgICAgICA8L2Rpdj4KCiAgICAgICAgICB7dGFicy5tYXAodCA9PiAoCiAgICAgICAgICAgIDxidXR0b24ga2V5PXt0LmlkfSBzdHlsZT17cy50YWIodGFiID09PSB0LmlkKX0gb25DbGljaz17KCkgPT4gc2V0VGFiKHQuaWQpfT4KICAgICAgICAgICAgICB7dC5sYWJlbH0KICAgICAgICAgICAgPC9idXR0b24+CiAgICAgICAgICApKX0KCiAgICAgICAgICA8YnV0dG9uIHN0eWxlPXtzLmRvY3NCdG59IG9uQ2xpY2s9eygpID0+IHNldFNob3dSZWFkbWUodHJ1ZSl9IHRpdGxlPSJPcGVuIGFkbWluIGRvY3VtZW50YXRpb24iPgogICAgICAgICAgICA8c3Bhbj4/PC9zcGFuPiBEb2NzCiAgICAgICAgICA8L2J1dHRvbj4KICAgICAgICA8L25hdj4KCiAgICAgICAgPGRpdiBzdHlsZT17cy5tYWlufT4KICAgICAgICAgIDxkaXYgc3R5bGU9e3MuY2FyZH0+CiAgICAgICAgICAgIHt0YWIgPT09ICdkYXNoYm9hcmQnID8gPERhc2hib2FyZCAvPiA6IDxWaW9sYXRpb25Gb3JtIC8+fQogICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9kaXY+CgogICAgICAgIDxBcHBGb290ZXIgLz4KCiAgICAgICAge3Nob3dSZWFkbWUgJiYgPFJlYWRtZU1vZGFsIG9uQ2xvc2U9eygpID0+IHNldFNob3dSZWFkbWUoZmFsc2UpfSAvPn0KICAgICAgPC9kaXY+CiAgICA8L1RvYXN0UHJvdmlkZXI+CiAgKTsKfQo=
\ No newline at end of file
+import React, { useState } from 'react';
+import ViolationForm from './components/ViolationForm';
+import Dashboard     from './components/Dashboard';
+import ReadmeModal   from './components/ReadmeModal';
+import ToastProvider from './components/ToastProvider';
+
+const tabs = [
+  { id: 'dashboard', label: '📊 Dashboard' },
+  { id: 'violation', label: '+ New Violation' },
+];
+
+const s = {
+  app:  { minHeight: '100vh', background: '#050608', fontFamily: "'Segoe UI', Arial, sans-serif", color: '#f8f9fa' },
+  nav:  { background: '#000000', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0, borderBottom: '1px solid #333' },
+  logoWrap: { display: 'flex', alignItems: 'center', marginRight: '32px', padding: '14px 0' },
+  logoImg:  { height: '28px', marginRight: '10px' },
+  logoText: { color: '#f8f9fa', fontWeight: 800, fontSize: '18px', letterSpacing: '0.5px' },
+  tab:  (active) => ({
+    padding: '18px 22px',
+    color: active ? '#f8f9fa' : 'rgba(248,249,250,0.6)',
+    borderBottom: active ? '3px solid #d4af37' : '3px solid transparent',
+    cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
+    background: 'none', border: 'none',
+  }),
+  // Docs button sits flush-right in the nav
+  docsBtn: {
+    marginLeft: 'auto',
+    background: 'none',
+    border: '1px solid #2a2b3a',
+    color: '#9ca0b8',
+    borderRadius: '6px',
+    padding: '6px 14px',
+    fontSize: '12px',
+    cursor: 'pointer',
+    fontWeight: 600,
+    letterSpacing: '0.3px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+  },
+  card: { maxWidth: '1100px', margin: '30px auto', background: '#111217', borderRadius: '10px', boxShadow: '0 2px 16px rgba(0,0,0,0.6)', border: '1px solid #222' },
+};
+
+export default function App() {
+  const [tab,        setTab]        = useState('dashboard');
+  const [showReadme, setShowReadme] = useState(false);
+
+  return (
+    <ToastProvider>
+      <div style={s.app}>
+        <nav style={s.nav}>
+          <div style={s.logoWrap}>
+            <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
+            <div style={s.logoText}>CPAS Tracker</div>
+          </div>
+
+          {tabs.map(t => (
+            <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
+              {t.label}
+            </button>
+          ))}
+
+          <button style={s.docsBtn} onClick={() => setShowReadme(true)} title="Open admin documentation">
+            <span>?</span> Docs
+          </button>
+        </nav>
+
+        <div style={s.card}>
+          {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
+        </div>
+
+        {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
+      </div>
+    </ToastProvider>
+  );
+}
-- 
2.52.0


From 7326ffec6eaf61a1d21b9cb93ae3cfe66e8cc79a Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 00:32:35 -0600
Subject: [PATCH 57/86] docs: update README with Phase 8 features, expanded
 roadmap with effort ratings

---
 README.md | 120 ++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 85 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index 9e3f23f..891be75 100755
--- a/README.md
+++ b/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
@@ -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
@@ -170,6 +181,11 @@ Access the app at `http://10.2.0.14:3001` (or whatever static IP you assigned).
 - 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 |
@@ -209,7 +225,7 @@ Scores are computed over a **rolling 90-day window** (negated violations exclude
 | GET | `/api/dashboard` | All employees with active points + violation counts |
 | 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 |
@@ -223,42 +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
 │   └── 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 + 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
+            ├── 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
 ```
 
 ---
@@ -319,32 +336,65 @@ Point values, violation type, and incident date are **immutable** after submissi
 | 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 |
+| CSV export of dashboard | 🟢 | Client-side Blob download of the current filtered employee view; no backend changes needed |
+
 #### 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 |
+| CSV / Excel bulk export | 🟡 | Full export of violations or dashboard data for external reporting or payroll integration |
 
 #### 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
-- **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 |
+| 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
-- **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 |
+|---------|--------|-------------|
+| 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` |
 
 #### 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 |
 
 ---
 
-- 
2.52.0


From 981fa3bea44cb8c79cb08976ad2de320788c53bb Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 00:35:35 -0600
Subject: [PATCH 58/86] feat: add footer with copyright, live dev ticker, and
 Gitea repo link

---
 client/src/App.jsx | 101 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 95 insertions(+), 6 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index b3645c2..37cb06d 100755
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,17 +1,78 @@
-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';
 
+const REPO_URL     = 'https://git.alwisp.com/jason/cpas';
+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() {
+  const year = new Date().getFullYear();
+  return (
+    <>
+      <style>{`
+        @keyframes cpas-pulse {
+          0%, 100% { opacity: 1; transform: scale(1); }
+          50%       { opacity: 0.4; transform: scale(0.75); }
+        }
+      `}</style>
+      <footer style={sf.footer}>
+        <span style={sf.copy}>© {year} Jason Stedwell</span>
+        <span style={sf.sep}>·</span>
+        <DevTicker />
+        <span style={sf.sep}>·</span>
+        <a href={REPO_URL} target="_blank" rel="noopener noreferrer" style={sf.link}>
+          <GiteaIcon /> cpas
+        </a>
+      </footer>
+    </>
+  );
+}
+
 const tabs = [
   { id: 'dashboard', label: '📊 Dashboard' },
   { id: 'violation', label: '+ New Violation' },
 ];
 
 const s = {
-  app:  { minHeight: '100vh', background: '#050608', fontFamily: "'Segoe UI', Arial, sans-serif", color: '#f8f9fa' },
-  nav:  { background: '#000000', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0, borderBottom: '1px solid #333' },
+  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' },
@@ -22,7 +83,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',
@@ -38,9 +98,34 @@ 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' },
 };
 
+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);
@@ -65,10 +150,14 @@ export default function App() {
           </button>
         </nav>
 
-        <div style={s.card}>
-          {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
+        <div style={s.main}>
+          <div style={s.card}>
+            {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
+          </div>
         </div>
 
+        <AppFooter />
+
         {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
       </div>
     </ToastProvider>
-- 
2.52.0


From 995e6070036ec773ed51de99e427dd5eb1fbd051 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 00:38:38 -0600
Subject: [PATCH 59/86] fix: remove default browser body margin causing white
 border

---
 client/index.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/index.html b/client/index.html
index 2a311d7..a72bce6 100755
--- a/client/index.html
+++ b/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>
-- 
2.52.0


From 87cf48e77e29bbd773dce5801164418132c9ed0c Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 00:42:48 -0600
Subject: [PATCH 60/86] Update README.md

---
 README.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/README.md b/README.md
index 891be75..db9a258 100755
--- a/README.md
+++ b/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` |
-- 
2.52.0


From b02026f8a92f2e1e6ecd18f82e36cdaf920b4620 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 00:45:49 -0600
Subject: [PATCH 61/86] feat: inject git SHA + build timestamp into
 version.json during docker build

---
 Dockerfile | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 18091ea..5aa27ad 100755
--- a/Dockerfile
+++ b/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"]
-- 
2.52.0


From 20be30318f30c16b98a595f7f3202e71f6e6a974 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 00:45:53 -0600
Subject: [PATCH 62/86] feat: add local dev fallback version.json stub

---
 client/public/version.json | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 client/public/version.json

diff --git a/client/public/version.json b/client/public/version.json
new file mode 100644
index 0000000..d23d125
--- /dev/null
+++ b/client/public/version.json
@@ -0,0 +1,5 @@
+{
+  "sha": "dev",
+  "shortSha": "dev",
+  "buildTime": null
+}
-- 
2.52.0


From 51bf176f96c4d298c201544ded31fc2df17a1512 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 00:54:58 -0600
Subject: [PATCH 63/86] feat: load version.json at startup, expose via
 /api/health

---
 server.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/server.js b/server.js
index d1dc66b..e4a220e 100755
--- a/server.js
+++ b/server.js
@@ -29,8 +29,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) => {
-- 
2.52.0


From f4ed8c49ce79d564e3f5f46469ccb3d977f1baa7 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 00:55:44 -0600
Subject: [PATCH 64/86] feat: fetch version.json on mount, show short SHA +
 commit link in footer

---
 client/src/App.jsx | 37 ++++++++++++++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 37cb06d..0055663 100755
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -42,8 +42,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>{`
@@ -53,13 +58,27 @@ function AppFooter() {
         }
       `}</style>
       <footer style={sf.footer}>
-        <span style={sf.copy}>© {year} Jason Stedwell</span>
-        <span style={sf.sep}>·</span>
+        <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>
     </>
   );
@@ -129,6 +148,14 @@ const sf = {
 export default function App() {
   const [tab,        setTab]        = useState('dashboard');
   const [showReadme, setShowReadme] = useState(false);
+  const [version,    setVersion]    = useState(null);
+
+  useEffect(() => {
+    fetch('/version.json')
+      .then(r => r.ok ? r.json() : null)
+      .then(v => { if (v) setVersion(v); })
+      .catch(() => {});
+  }, []);
 
   return (
     <ToastProvider>
@@ -156,7 +183,7 @@ export default function App() {
           </div>
         </div>
 
-        <AppFooter />
+        <AppFooter version={version} />
 
         {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
       </div>
-- 
2.52.0


From 602f371d67c90e684e6cfa04e310a85a0e431d91 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 22:02:10 -0500
Subject: [PATCH 65/86] Add mobile-responsive CSS utility file

---
 client/src/styles/mobile.css | 113 +++++++++++++++++++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 client/src/styles/mobile.css

diff --git a/client/src/styles/mobile.css b/client/src/styles/mobile.css
new file mode 100644
index 0000000..89c02f4
--- /dev/null
+++ b/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;
+  }
+}
-- 
2.52.0


From 74492142a14a15b1d1eb810634b164119f67d051 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 22:04:05 -0500
Subject: [PATCH 66/86] Update App.jsx with mobile-responsive navigation and
 layout

---
 client/src/App.jsx | 105 +++++++++++++++++++++++++++++++++++++++------
 1 file changed, 93 insertions(+), 12 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 0055663..2b02499 100755
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -3,6 +3,7 @@ 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';
 const PROJECT_START = new Date('2026-03-06T11:33:32-06:00');
@@ -56,8 +57,19 @@ function AppFooter({ version }) {
           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}>
+      <footer style={sf.footer} className="footer-content">
         <span style={sf.copy}>&copy; {year} Jason Stedwell</span>
         <span style={sf.sep}>&middot;</span>
         <DevTicker />
@@ -89,6 +101,19 @@ const tabs = [
   { id: 'violation', label: '+ New Violation' },
 ];
 
+// Responsive utility hook
+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' },
@@ -121,6 +146,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',
@@ -149,6 +226,7 @@ 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')
@@ -159,26 +237,29 @@ export default function App() {
 
   return (
     <ToastProvider>
+      <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>
 
-          {tabs.map(t => (
-            <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
-              {t.label}
-            </button>
-          ))}
+          <div className="nav-tabs">
+            {tabs.map(t => (
+              <button key={t.id} style={s.tab(tab === t.id)} className="nav-tab" onClick={() => setTab(t.id)}>
+                {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>
-- 
2.52.0


From 15a2b89350b69be7763ff636eaecee8460b83611 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 22:05:04 -0500
Subject: [PATCH 67/86] Add mobile-optimized Dashboard component with card
 layout

---
 client/src/components/DashboardMobile.jsx | 157 ++++++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 client/src/components/DashboardMobile.jsx

diff --git a/client/src/components/DashboardMobile.jsx b/client/src/components/DashboardMobile.jsx
new file mode 100644
index 0000000..cc7f2c1
--- /dev/null
+++ b/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>
+  );
+}
-- 
2.52.0


From 0769a39491e01f5b29921244b9a69ec40d15760e Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 22:05:52 -0500
Subject: [PATCH 68/86] Update Dashboard with responsive mobile/desktop layouts

---
 client/src/components/Dashboard.jsx | 116 ++++++++++++++++++++++------
 1 file changed, 92 insertions(+), 24 deletions(-)

diff --git a/client/src/components/Dashboard.jsx b/client/src/components/Dashboard.jsx
index d333e7a..a27bb73 100755
--- a/client/src/components/Dashboard.jsx
+++ b/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,13 +29,26 @@ function isAtRisk(points) {
   return boundary !== null && (boundary - points) <= AT_RISK_THRESHOLD;
 }
 
+// Media query hook
+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 = {
   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' },
   statNum:      { fontSize: '28px', fontWeight: 800, color: '#f8f9fa' },
   statLbl:      { fontSize: '11px', color: '#b5b5c0', marginTop: '4px' },
   search:       { padding: '10px 14px', border: '1px solid #333544', borderRadius: '6px', fontSize: '14px', width: '260px', background: '#050608', color: '#f8f9fa' },
@@ -49,6 +63,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 +119,7 @@ export default function Dashboard() {
   const [selectedId,  setSelectedId]  = useState(null);
   const [showAudit,   setShowAudit]   = useState(false);
   const [loading,     setLoading]     = useState(true);
+  const isMobile = useMediaQuery('(max-width: 768px)');
 
   const load = useCallback(() => {
     setLoading(true);
@@ -82,49 +146,53 @@ export default function Dashboard() {
 
   return (
     <>
-      <div style={s.wrap}>
-        <div style={s.header}>
+      <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</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">
+          <div style={s.statCard} className="dashboard-stat-card">
+            <div style={s.statNum} className="stat-num">{employees.length}</div>
+            <div style={s.statLbl} className="stat-lbl">Total Employees</div>
           </div>
-          <div style={{ ...s.statCard, borderTop: '3px solid #28a745' }}>
-            <div style={{ ...s.statNum, color: '#6ee7b7' }}>{cleanCount}</div>
-            <div style={s.statLbl}>Elite Standing (0 pts)</div>
+          <div style={{ ...s.statCard, borderTop: '3px solid #28a745' }} className="dashboard-stat-card">
+            <div style={{ ...s.statNum, color: '#6ee7b7' }} className="stat-num">{cleanCount}</div>
+            <div style={s.statLbl} className="stat-lbl">Elite Standing (0 pts)</div>
           </div>
-          <div style={{ ...s.statCard, borderTop: '3px solid #d4af37' }}>
-            <div style={{ ...s.statNum, color: '#ffd666' }}>{activeCount}</div>
-            <div style={s.statLbl}>With Active Points</div>
+          <div style={{ ...s.statCard, borderTop: '3px solid #d4af37' }} className="dashboard-stat-card">
+            <div style={{ ...s.statNum, color: '#ffd666' }} className="stat-num">{activeCount}</div>
+            <div style={s.statLbl} className="stat-lbl">With Active Points</div>
           </div>
-          <div style={{ ...s.statCard, borderTop: '3px solid #ffb020' }}>
-            <div style={{ ...s.statNum, color: '#ffdf8a' }}>{atRiskCount}</div>
-            <div style={s.statLbl}>At Risk (≤{AT_RISK_THRESHOLD} pts to next tier)</div>
+          <div style={{ ...s.statCard, borderTop: '3px solid #ffb020' }} className="dashboard-stat-card">
+            <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>
           </div>
-          <div style={{ ...s.statCard, borderTop: '3px solid #c0392b' }}>
-            <div style={{ ...s.statNum, color: '#ff8a80' }}>{maxPoints}</div>
-            <div style={s.statLbl}>Highest Active Score</div>
+          <div style={{ ...s.statCard, borderTop: '3px solid #c0392b' }} 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>
-- 
2.52.0


From e0cb66af4630afc25b91ea65ec6d18c66a8be556 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 22:08:21 -0500
Subject: [PATCH 69/86] Add comprehensive mobile-responsive documentation

---
 MOBILE_RESPONSIVE.md | 314 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 314 insertions(+)
 create mode 100644 MOBILE_RESPONSIVE.md

diff --git a/MOBILE_RESPONSIVE.md b/MOBILE_RESPONSIVE.md
new file mode 100644
index 0000000..91d1325
--- /dev/null
+++ b/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
-- 
2.52.0


From 91ba19d03895587dc7c46cf5a620f47b4f0db55e Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Tue, 10 Mar 2026 16:00:24 -0500
Subject: [PATCH 70/86] fix: update TierWarning to use dark-mode-compatible
 colors

---
 client/src/components/TierWarning.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/components/TierWarning.jsx b/client/src/components/TierWarning.jsx
index 24e32ee..7721260 100755
--- a/client/src/components/TierWarning.jsx
+++ b/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 && (
-- 
2.52.0


From b656c970f091850564994549d4efd0f5977e8ea5 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Wed, 11 Mar 2026 00:11:42 -0500
Subject: [PATCH 71/86] feat: stat card badges act as filters; Elite Standing =
 0-4 pts

---
 client/src/components/Dashboard.jsx | 120 ++++++++++++++++++++++++----
 1 file changed, 104 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Dashboard.jsx b/client/src/components/Dashboard.jsx
index a27bb73..4706e08 100755
--- a/client/src/components/Dashboard.jsx
+++ b/client/src/components/Dashboard.jsx
@@ -42,15 +42,24 @@ function useMediaQuery(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 #303136', 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' },
@@ -119,6 +128,7 @@ 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(() => {
@@ -130,20 +140,50 @@ 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 (
     <>
       <style>{mobileStyles}</style>
@@ -151,7 +191,19 @@ export default function Dashboard() {
         <div style={s.header} className="dashboard-header">
           <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</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} className="toolbar-right">
             <input
@@ -167,23 +219,59 @@ export default function Dashboard() {
         </div>
 
         <div style={s.statsRow} className="dashboard-stats">
-          <div style={s.statCard} className="dashboard-stat-card">
+          {/* 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' }} className="dashboard-stat-card">
-            <div style={{ ...s.statNum, color: '#6ee7b7' }} className="stat-num">{cleanCount}</div>
-            <div style={s.statLbl} className="stat-lbl">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' }} className="dashboard-stat-card">
+
+          {/* 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' }} className="dashboard-stat-card">
+
+          {/* 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' }} className="dashboard-stat-card">
+
+          {/* 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>
-- 
2.52.0


From d6585c01c686c1c7fdf56779abc0f9ed16e1a1db Mon Sep 17 00:00:00 2001
From: jason <stedwwell@gmail.com>
Date: Wed, 11 Mar 2026 16:33:38 -0500
Subject: [PATCH 72/86] Code review and fixes

---
 client/src/App.jsx                           | 11 +++-
 client/src/components/AuditLog.jsx           |  6 +-
 client/src/components/Dashboard.jsx          |  4 +-
 client/src/components/EmployeeModal.jsx      |  5 +-
 client/src/components/EmployeeNotes.jsx      | 15 +++++
 client/src/components/ExpirationTimeline.jsx |  4 +-
 client/src/components/NegateModal.jsx        |  2 -
 client/src/components/ViolationForm.jsx      |  4 +-
 server.js                                    | 65 ++++++++++++++++++--
 9 files changed, 98 insertions(+), 18 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 2b02499..4c627af 100755
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -6,6 +6,8 @@ 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) {
@@ -101,7 +103,9 @@ const tabs = [
   { id: 'violation', label: '+ New Violation' },
 ];
 
-// Responsive utility hook
+// 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(() => {
@@ -237,6 +241,8 @@ export default function App() {
 
   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} className="app-nav">
@@ -248,7 +254,8 @@ export default function App() {
           <div className="nav-tabs">
             {tabs.map(t => (
               <button key={t.id} style={s.tab(tab === t.id)} className="nav-tab" onClick={() => setTab(t.id)}>
-                {isMobile ? t.label.replace('📊 ', '📊 ').replace('+ New ', '+ ') : t.label}
+                {/* TODO [MINOR #17]: first .replace('📊 ', '📊 ') replaces string with itself — no-op. Remove it. */}
+            {isMobile ? t.label.replace('📊 ', '📊 ').replace('+ New ', '+ ') : t.label}
               </button>
             ))}
           </div>
diff --git a/client/src/components/AuditLog.jsx b/client/src/components/AuditLog.jsx
index 2e09af3..51775aa 100644
--- a/client/src/components/AuditLog.jsx
+++ b/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);
diff --git a/client/src/components/Dashboard.jsx b/client/src/components/Dashboard.jsx
index 4706e08..0ae3473 100755
--- a/client/src/components/Dashboard.jsx
+++ b/client/src/components/Dashboard.jsx
@@ -29,7 +29,8 @@ function isAtRisk(points) {
   return boundary !== null && (boundary - points) <= AT_RISK_THRESHOLD;
 }
 
-// Media query hook
+// 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(() => {
@@ -186,6 +187,7 @@ export default function Dashboard() {
 
   return (
     <>
+      {/* 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">
diff --git a/client/src/components/EmployeeModal.jsx b/client/src/components/EmployeeModal.jsx
index e5d9d4f..2c0870e 100755
--- a/client/src/components/EmployeeModal.jsx
+++ b/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);
       })
diff --git a/client/src/components/EmployeeNotes.jsx b/client/src/components/EmployeeNotes.jsx
index 26cf619..39ea471 100644
--- a/client/src/components/EmployeeNotes.jsx
+++ b/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'}
diff --git a/client/src/components/ExpirationTimeline.jsx b/client/src/components/ExpirationTimeline.jsx
index 37ca0ef..ebe7147 100644
--- a/client/src/components/ExpirationTimeline.jsx
+++ b/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' },
diff --git a/client/src/components/NegateModal.jsx b/client/src/components/NegateModal.jsx
index 6140164..2ef9cf9 100755
--- a/client/src/components/NegateModal.jsx
+++ b/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}>
diff --git a/client/src/components/ViolationForm.jsx b/client/src/components/ViolationForm.jsx
index 2ca944b..ada322c 100755
--- a/client/src/components/ViolationForm.jsx
+++ b/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);
diff --git a/server.js b/server.js
index e4a220e..7ece3ac 100755
--- a/server.js
+++ b/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.
@@ -49,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' });
@@ -58,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 (?, ?, ?)')
@@ -290,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;
@@ -307,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);
       }
@@ -391,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);
-- 
2.52.0


From da36edbba6c84abcd5841d5b522b11fafa3fc22e Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Wed, 11 Mar 2026 22:58:53 -0500
Subject: [PATCH 73/86] vscode

---
 .vscode/settings.json | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..1620984
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+    "giteaActions.baseUrl": "https://git.alwisp.com",
+    "giteaActions.discovery.mode": "allAccessible"
+}
\ No newline at end of file
-- 
2.52.0


From 563c5043c6209cc710f2cbf85c94fd9710c2dcff Mon Sep 17 00:00:00 2001
From: jason <stedwwell@gmail.com>
Date: Wed, 18 Mar 2026 16:14:19 -0500
Subject: [PATCH 74/86] docs: add AGENTS.md with coding, compliance, and
 architecture guidance

Establishes AI agent and developer guidelines covering data integrity rules
(immutable scoring fields, soft-delete contract, audit log append-only),
tier system canonical source, migration patterns, coding standards for both
backend and frontend, schema change checklist, PDF generation notes, and
forward-thinking development constraints.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 AGENTS.md | 294 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 294 insertions(+)
 create mode 100644 AGENTS.md

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..b7fd96a
--- /dev/null
+++ b/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.
-- 
2.52.0


From 95d56b5018c6552f861deb3006f493428fafde48 Mon Sep 17 00:00:00 2001
From: jason <stedwwell@gmail.com>
Date: Wed, 18 Mar 2026 16:23:21 -0500
Subject: [PATCH 75/86] =?UTF-8?q?feat:=20custom=20violation=20types=20?=
 =?UTF-8?q?=E2=80=94=20persist,=20manage,=20and=20use=20in=20violation=20f?=
 =?UTF-8?q?orm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a full CRUD system for user-defined violation types stored in a new
violation_types table. Custom types appear in the violation dropdown alongside
hardcoded types, grouped by category, with ✦ marker and a green Custom badge.

- db/database.js: auto-migration adds violation_types table on startup
- server.js: GET/POST/PUT/DELETE /api/violation-types; type_key auto-generated
  as custom_<slug>; DELETE blocked if any violations reference the type
- ViolationTypeModal.jsx: create/edit modal with name, category (datalist
  autocomplete from existing categories), handbook chapter reference,
  description/reference text, fixed vs sliding point toggle, context field
  checkboxes; delete with usage guard
- ViolationForm.jsx: fetches custom types on mount; merges into dropdown via
  mergedGroups memo; resolveViolation() checks hardcoded then custom; '+ Add
  Type' button above dropdown; 'Edit Type' button appears when a custom type is
  selected; newly created type auto-selects; all audit calls flow through
  existing audit() helper

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/src/components/ViolationForm.jsx      | 129 +++++++-
 client/src/components/ViolationTypeModal.jsx | 292 +++++++++++++++++++
 db/database.js                               |  17 ++
 server.js                                    |  94 ++++++
 4 files changed, 527 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/ViolationTypeModal.jsx

diff --git a/client/src/components/ViolationForm.jsx b/client/src/components/ViolationForm.jsx
index 2ca944b..b97bc47 100755
--- a/client/src/components/ViolationForm.jsx
+++ b/client/src/components/ViolationForm.jsx
@@ -1,10 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import axios from 'axios';
 import { violationData, violationGroups } from '../data/violations';
 import useEmployeeIntelligence from '../hooks/useEmployeeIntelligence';
 import CpasBadge from './CpasBadge';
 import TierWarning from './TierWarning';
 import ViolationHistory from './ViolationHistory';
+import ViolationTypeModal from './ViolationTypeModal';
 import { useToast } from './ToastProvider';
 import { DEPARTMENTS } from '../data/departments';
 
@@ -46,14 +47,72 @@ export default function ViolationForm() {
   const [status,       setStatus]       = useState(null);
   const [lastViolId,   setLastViolId]   = useState(null);
   const [pdfLoading,   setPdfLoading]   = useState(false);
+  const [customTypes,  setCustomTypes]  = useState([]);
+  const [typeModal,    setTypeModal]    = useState(null); // null | 'create' | <editing object>
 
   const toast = useToast();
   const intel = useEmployeeIntelligence(form.employeeId || null);
 
   useEffect(() => {
     axios.get('/api/employees').then(r => setEmployees(r.data)).catch(() => {});
+    fetchCustomTypes();
   }, []);
 
+  const fetchCustomTypes = () => {
+    axios.get('/api/violation-types').then(r => setCustomTypes(r.data)).catch(() => {});
+  };
+
+  // Build a map of custom types keyed by type_key for fast lookup
+  const customTypeMap = useMemo(() =>
+    Object.fromEntries(customTypes.map(t => [t.type_key, t])),
+    [customTypes]
+  );
+
+  // Merge hardcoded and custom violation groups for the dropdown
+  const mergedGroups = useMemo(() => {
+    const groups = {};
+    // Start with all hardcoded groups
+    Object.entries(violationGroups).forEach(([cat, items]) => {
+      groups[cat] = [...items];
+    });
+    // Add custom types into their respective category, or create new group
+    customTypes.forEach(t => {
+      const item = {
+        key:        t.type_key,
+        name:       t.name,
+        category:   t.category,
+        minPoints:  t.min_points,
+        maxPoints:  t.max_points,
+        chapter:    t.chapter     || '',
+        description: t.description || '',
+        fields:     t.fields,
+        isCustom:   true,
+        customId:   t.id,
+      };
+      if (!groups[t.category]) groups[t.category] = [];
+      groups[t.category].push(item);
+    });
+    return groups;
+  }, [customTypes]);
+
+  // Resolve a violation definition from either the hardcoded registry or custom types
+  const resolveViolation = key => {
+    if (violationData[key]) return violationData[key];
+    const ct = customTypeMap[key];
+    if (ct) return {
+      name:        ct.name,
+      category:    ct.category,
+      chapter:     ct.chapter     || '',
+      description: ct.description || '',
+      minPoints:   ct.min_points,
+      maxPoints:   ct.max_points,
+      fields:      ct.fields,
+      isCustom:    true,
+      customId:    ct.id,
+    };
+    return null;
+  };
+
   useEffect(() => {
     if (!violation || !form.violationType) return;
     const allTime = intel.countsAllTime[form.violationType];
@@ -72,7 +131,7 @@ export default function ViolationForm() {
 
   const handleViolationChange = e => {
     const key = e.target.value;
-    const v   = violationData[key] || null;
+    const v   = resolveViolation(key);
     setViolation(v);
     setForm(prev => ({ ...prev, violationType: key, points: v ? v.minPoints : 1 }));
   };
@@ -196,16 +255,37 @@ export default function ViolationForm() {
           <div style={s.grid}>
 
             <div style={{ ...s.item, ...s.fullCol }}>
-              <label style={s.label}>Violation Type:</label>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '5px' }}>
+                <label style={{ ...s.label, marginBottom: 0 }}>Violation Type:</label>
+                <div style={{ display: 'flex', gap: '6px' }}>
+                  {violation?.isCustom && (
+                    <button
+                      type="button"
+                      onClick={() => setTypeModal(customTypeMap[form.violationType])}
+                      style={{ fontSize: '11px', padding: '3px 10px', borderRadius: '4px', border: '1px solid #4caf50', background: '#1a2e1a', color: '#4caf50', cursor: 'pointer', fontWeight: 600 }}
+                    >
+                      Edit Type
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    onClick={() => setTypeModal('create')}
+                    style={{ fontSize: '11px', padding: '3px 10px', borderRadius: '4px', border: '1px solid #d4af37', background: '#181200', color: '#ffd666', cursor: 'pointer', fontWeight: 600 }}
+                    title="Add a new custom violation type"
+                  >
+                    + Add Type
+                  </button>
+                </div>
+              </div>
               <select style={s.input} value={form.violationType} onChange={handleViolationChange} required>
                 <option value="">-- Select Violation Type --</option>
-                {Object.entries(violationGroups).map(([group, items]) => (
+                {Object.entries(mergedGroups).map(([group, items]) => (
                   <optgroup key={group} label={group}>
                     {items.map(v => {
                       const prior = priorCount90(v.key);
                       return (
                         <option key={v.key} value={v.key}>
-                          {v.name}{prior > 0 ? ` ★ ${prior}x in 90 days` : ''}
+                          {v.name}{v.isCustom ? ' ✦' : ''}{prior > 0 ? ` ★ ${prior}x in 90 days` : ''}
                         </option>
                       );
                     })}
@@ -216,6 +296,11 @@ export default function ViolationForm() {
               {violation && (
                 <div style={s.contextBox}>
                   <strong>{violation.name}</strong>
+                  {violation.isCustom && (
+                    <span style={{ display: 'inline-block', marginLeft: '8px', padding: '1px 7px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#1a2e1a', color: '#4caf50', border: '1px solid #4caf50' }}>
+                      Custom
+                    </span>
+                  )}
                   {isRepeat(form.violationType) && form.employeeId && (
                     <span style={s.repeatBadge}>
                       ★ Repeat — {intel.countsAllTime[form.violationType]?.count}x prior
@@ -348,6 +433,40 @@ export default function ViolationForm() {
         </div>
       )}
 
+      {typeModal && (
+        <ViolationTypeModal
+          editing={typeModal === 'create' ? null : typeModal}
+          onClose={() => setTypeModal(null)}
+          onSaved={saved => {
+            fetchCustomTypes();
+            setTypeModal(null);
+            // Auto-select the newly created type; do nothing on delete (saved === null)
+            if (saved) {
+              const v = {
+                name:        saved.name,
+                category:    saved.category,
+                chapter:     saved.chapter     || '',
+                description: saved.description || '',
+                minPoints:   saved.min_points,
+                maxPoints:   saved.max_points,
+                fields:      saved.fields,
+                isCustom:    true,
+                customId:    saved.id,
+              };
+              setViolation(v);
+              setForm(prev => ({ ...prev, violationType: saved.type_key, points: saved.min_points }));
+            } else {
+              // Type was deleted — clear selection if it was the active type
+              setForm(prev => {
+                const stillExists = violationData[prev.violationType] || false;
+                return stillExists ? prev : { ...prev, violationType: '', points: 1 };
+              });
+              setViolation(null);
+            }
+          }}
+        />
+      )}
+
     </div>
   );
 }
diff --git a/client/src/components/ViolationTypeModal.jsx b/client/src/components/ViolationTypeModal.jsx
new file mode 100644
index 0000000..40d3c14
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/db/database.js b/db/database.js
index 8986967..520ac7a 100755
--- a/db/database.js
+++ b/db/database.js
@@ -60,6 +60,23 @@ db.exec(`CREATE TABLE IF NOT EXISTS audit_log (
     created_at   DATETIME DEFAULT CURRENT_TIMESTAMP
 )`);
 
+// ── Feature: Custom Violation Types ──────────────────────────────────────────
+// Persisted violation type definitions created via the UI. type_key is prefixed
+// with 'custom_' to prevent collisions with hardcoded violation keys.
+db.exec(`CREATE TABLE IF NOT EXISTS violation_types (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    type_key    TEXT    NOT NULL UNIQUE,
+    name        TEXT    NOT NULL,
+    category    TEXT    NOT NULL DEFAULT 'Custom',
+    chapter     TEXT,
+    description TEXT,
+    min_points  INTEGER NOT NULL DEFAULT 1,
+    max_points  INTEGER NOT NULL DEFAULT 1,
+    fields      TEXT    NOT NULL DEFAULT '["description"]',
+    created_at  DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at  DATETIME DEFAULT CURRENT_TIMESTAMP
+)`);
+
 // Recreate view so it always filters negated rows
 db.exec(`DROP VIEW IF EXISTS active_cpas_scores;
 CREATE VIEW active_cpas_scores AS
diff --git a/server.js b/server.js
index e4a220e..e75c7f3 100755
--- a/server.js
+++ b/server.js
@@ -410,6 +410,100 @@ app.get('/api/audit', (req, res) => {
   res.json(db.prepare(sql).all(...args));
 });
 
+// ── Custom Violation Types ────────────────────────────────────────────────────
+// Persisted violation type definitions stored in violation_types table.
+// type_key is auto-generated (custom_<slug>) to avoid collisions with hardcoded keys.
+
+app.get('/api/violation-types', (req, res) => {
+  const rows = db.prepare('SELECT * FROM violation_types ORDER BY category ASC, name ASC').all();
+  res.json(rows.map(r => ({ ...r, fields: JSON.parse(r.fields) })));
+});
+
+app.post('/api/violation-types', (req, res) => {
+  const { name, category, chapter, description, min_points, max_points, fields, created_by } = req.body;
+  if (!name || !name.trim()) return res.status(400).json({ error: 'name is required' });
+
+  const minPts = parseInt(min_points) || 1;
+  const maxPts = parseInt(max_points) || minPts;
+  if (maxPts < minPts) return res.status(400).json({ error: 'max_points must be >= min_points' });
+
+  // Generate a unique type_key from the name, prefixed with 'custom_'
+  const base = 'custom_' + name.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
+  let typeKey = base;
+  let suffix  = 2;
+  while (db.prepare('SELECT id FROM violation_types WHERE type_key = ?').get(typeKey)) {
+    typeKey = `${base}_${suffix++}`;
+  }
+
+  try {
+    const result = db.prepare(`
+      INSERT INTO violation_types (type_key, name, category, chapter, description, min_points, max_points, fields)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+    `).run(
+      typeKey,
+      name.trim(),
+      (category || 'Custom').trim(),
+      chapter     || null,
+      description || null,
+      minPts,
+      maxPts,
+      JSON.stringify(fields && fields.length ? fields : ['description'])
+    );
+    const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(result.lastInsertRowid);
+    audit('violation_type_created', 'violation_type', result.lastInsertRowid, created_by || null, { name: row.name, category: row.category });
+    res.status(201).json({ ...row, fields: JSON.parse(row.fields) });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.put('/api/violation-types/:id', (req, res) => {
+  const id  = parseInt(req.params.id);
+  const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
+  if (!row) return res.status(404).json({ error: 'Violation type not found' });
+
+  const { name, category, chapter, description, min_points, max_points, fields, updated_by } = req.body;
+  if (!name || !name.trim()) return res.status(400).json({ error: 'name is required' });
+
+  const minPts = parseInt(min_points) || 1;
+  const maxPts = parseInt(max_points) || minPts;
+  if (maxPts < minPts) return res.status(400).json({ error: 'max_points must be >= min_points' });
+
+  db.prepare(`
+    UPDATE violation_types
+    SET name=?, category=?, chapter=?, description=?, min_points=?, max_points=?, fields=?, updated_at=CURRENT_TIMESTAMP
+    WHERE id=?
+  `).run(
+    name.trim(),
+    (category || 'Custom').trim(),
+    chapter     || null,
+    description || null,
+    minPts,
+    maxPts,
+    JSON.stringify(fields && fields.length ? fields : ['description']),
+    id
+  );
+
+  const updated = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
+  audit('violation_type_updated', 'violation_type', id, updated_by || null, { name: updated.name, category: updated.category });
+  res.json({ ...updated, fields: JSON.parse(updated.fields) });
+});
+
+app.delete('/api/violation-types/:id', (req, res) => {
+  const id  = parseInt(req.params.id);
+  const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
+  if (!row) return res.status(404).json({ error: 'Violation type not found' });
+
+  const usage = db.prepare('SELECT COUNT(*) as count FROM violations WHERE violation_type = ?').get(row.type_key);
+  if (usage.count > 0) {
+    return res.status(409).json({ error: `Cannot delete: ${usage.count} violation(s) reference this type. Negate those violations first.` });
+  }
+
+  db.prepare('DELETE FROM violation_types WHERE id = ?').run(id);
+  audit('violation_type_deleted', 'violation_type', id, null, { name: row.name, type_key: row.type_key });
+  res.json({ ok: true });
+});
+
 // ── PDF endpoint ─────────────────────────────────────────────────────────────
 app.get('/api/violations/:id/pdf', async (req, res) => {
   try {
-- 
2.52.0


From 5a2b581c712ab0392e5d18ff5ad91302a85b5d9a Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Mon, 11 May 2026 11:48:51 -0500
Subject: [PATCH 76/86] Add .gitea/workflows/docker-build.yml

---
 .gitea/workflows/docker-build.yml | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 .gitea/workflows/docker-build.yml

diff --git a/.gitea/workflows/docker-build.yml b/.gitea/workflows/docker-build.yml
new file mode 100644
index 0000000..3d499eb
--- /dev/null
+++ b/.gitea/workflows/docker-build.yml
@@ -0,0 +1,25 @@
+name: Build and Push Docker Image
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container:
+      image: catthehacker/ubuntu:act-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Log in to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: registry.alwisp.com
+          username: ${{ secrets.REGISTRY_USER }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Build and Push
+        run: |
+          docker build -t registry.alwisp.com/${{ gitea.repository_owner }}/${{ gitea.repository }}:latest .
+          docker push registry.alwisp.com/${{ gitea.repository_owner }}/${{ gitea.repository }}:latest
\ No newline at end of file
-- 
2.52.0


From 3220ee70c4a3e37f735eadb009be46f8a9923802 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Mon, 11 May 2026 12:04:34 -0500
Subject: [PATCH 77/86] financial data entry

---
 AGENTS.md                                     |  2 +-
 client/src/components/AmendViolationModal.jsx |  2 ++
 client/src/components/ViolationForm.jsx       |  2 +-
 db/database.js                                |  2 ++
 db/schema.sql                                 |  1 +
 pdf/template.js                               |  5 +++++
 server.js                                     | 13 ++++++++-----
 7 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index b7fd96a..45b7ba8 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -82,7 +82,7 @@ The following fields on `violations` are locked after submission. They are the b
 - `prior_active_points` (snapshot at insert time)
 - `prior_tier_label`
 
-Amendable fields (non-scoring): `location`, `details`, `witness_name`, `acknowledged_by`, `acknowledged_date`
+Amendable fields (non-scoring): `incident_time`, `location`, `details`, `submitted_by`, `witness_name`, `acknowledged_by`, `acknowledged_date`, `amount`
 
 ### Soft-Delete Pattern
 
diff --git a/client/src/components/AmendViolationModal.jsx b/client/src/components/AmendViolationModal.jsx
index c9dbd91..c412093 100644
--- a/client/src/components/AmendViolationModal.jsx
+++ b/client/src/components/AmendViolationModal.jsx
@@ -7,6 +7,7 @@ const FIELD_LABELS = {
   details:        'Incident Notes',
   submitted_by:   'Submitted By',
   witness_name:   'Witness / Documenting Officer',
+  amount:         'Amount in Question',
 };
 
 const s = {
@@ -84,6 +85,7 @@ export default function AmendViolationModal({ violation, onClose, onSaved }) {
     details:        violation.details        || '',
     submitted_by:   violation.submitted_by   || '',
     witness_name:   violation.witness_name   || '',
+    amount:         violation.amount         || '',
   });
   const [changedBy, setChangedBy]   = useState('');
   const [saving, setSaving]         = useState(false);
diff --git a/client/src/components/ViolationForm.jsx b/client/src/components/ViolationForm.jsx
index c9a45dd..c7edf45 100755
--- a/client/src/components/ViolationForm.jsx
+++ b/client/src/components/ViolationForm.jsx
@@ -36,7 +36,6 @@ 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: '',
 };
@@ -159,6 +158,7 @@ export default function ViolationForm() {
         witness_name:   form.witnessName    || null,
         acknowledged_by:   form.acknowledgedBy   || null,
         acknowledged_date: form.acknowledgedDate || null,
+        amount:         form.amount         || null,
       });
 
       const newId = violRes.data.id;
diff --git a/db/database.js b/db/database.js
index 520ac7a..8013835 100755
--- a/db/database.js
+++ b/db/database.js
@@ -21,6 +21,8 @@ if (!cols.includes('prior_active_points')) db.exec("ALTER TABLE violations ADD C
 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");
+// Financial amount in question (record-keeping / repayment for chargeback, receipt negligence, etc.)
+if (!cols.includes('amount'))              db.exec("ALTER TABLE violations ADD COLUMN amount TEXT");
 
 // Employee notes column (free-text, does not affect scoring)
 const empCols = db.prepare('PRAGMA table_info(employees)').all().map(c => c.name);
diff --git a/db/schema.sql b/db/schema.sql
index 8129bb3..5ee5c9a 100755
--- a/db/schema.sql
+++ b/db/schema.sql
@@ -25,6 +25,7 @@ CREATE TABLE IF NOT EXISTS violations (
     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)
+    amount               TEXT,    -- dollar amount in question for financial violations (record-keeping / repayment)
     created_at           DATETIME DEFAULT CURRENT_TIMESTAMP
 );
 
diff --git a/pdf/template.js b/pdf/template.js
index 3a10deb..6f958fb 100755
--- a/pdf/template.js
+++ b/pdf/template.js
@@ -243,6 +243,11 @@ function buildHtml(v, score) {
         <div class="field-label">Submitted By</div>
         <div class="field-value">${v.submitted_by || 'System'}</div>
       </div>
+      ${v.amount ? `
+      <div class="field" style="grid-column: 1 / -1;">
+        <div class="field-label">Amount in Question</div>
+        <div class="field-value prominent">${v.amount}</div>
+      </div>` : ''}
       ${v.location ? `
       <div class="field" style="grid-column: 1 / -1;">
         <div class="field-label">Location / Context</div>
diff --git a/server.js b/server.js
index c1fe4e7..65b89f5 100755
--- a/server.js
+++ b/server.js
@@ -266,7 +266,8 @@ app.post('/api/violations', (req, res) => {
     employee_id, violation_type, violation_name, category,
     points, incident_date, incident_time, location,
     details, submitted_by, witness_name,
-    acknowledged_by, acknowledged_date
+    acknowledged_by, acknowledged_date,
+    amount
   } = req.body;
 
   if (!employee_id || !violation_type || !points || !incident_date) {
@@ -282,15 +283,17 @@ app.post('/api/violations', (req, res) => {
       points, incident_date, incident_time, location,
       details, submitted_by, witness_name,
       prior_active_points,
-      acknowledged_by, acknowledged_date
-    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+      acknowledged_by, acknowledged_date,
+      amount
+    ) 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,
-    acknowledged_by || null, acknowledged_date || null
+    acknowledged_by || null, acknowledged_date || null,
+    amount || null
   );
 
   audit('violation_created', 'violation', result.lastInsertRowid, submitted_by, {
@@ -302,7 +305,7 @@ app.post('/api/violations', (req, res) => {
 
 // ── 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', 'acknowledged_by', 'acknowledged_date'];
+const AMENDABLE_FIELDS = ['incident_time', 'location', 'details', 'submitted_by', 'witness_name', 'acknowledged_by', 'acknowledged_date', 'amount'];
 
 // Pre-build one prepared UPDATE statement per amendable field combination is not
 // practical (2^n combos), so instead we validate columns against the static
-- 
2.52.0


From ba2b631e23e1b5f8ea0529f2ade57049b5bdc3f8 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Mon, 11 May 2026 13:28:02 -0500
Subject: [PATCH 78/86] documentation

---
 README.md | 63 +++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index db9a258..a1cf124 100755
--- a/README.md
+++ b/README.md
@@ -130,7 +130,6 @@ Useful for showing the app to stakeholders without exposing live employee data.
 - 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
 
@@ -138,9 +137,11 @@ Useful for showing the app to stakeholders without exposing live employee data.
 - Select existing employee or enter new employee by name
 - **Employee intelligence**: shows current CPAS standing badge and 90-day violation count before submitting
 - Violation type dropdown grouped by category; shows prior 90-day counts inline
+- **Custom violation types**: add or edit user-defined types directly from the form (`+ Add Type` / `Edit Type` buttons); persisted to the database and merged into the dropdown alongside hardcoded types
 - **Recidivist auto-escalation**: if an employee has prior violations of the same type, points slider auto-sets to maximum per policy
 - Repeat offense badge with prior count displayed
 - Context-sensitive fields (time, minutes late, amount, location, description) shown only when relevant to violation type
+- **Financial amount tracking**: dollar amount in question recorded for chargeback / receipt / custom financial violations; surfaces on the PDF for repayment records and is audit-logged on edit
 - **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
@@ -214,23 +215,30 @@ Scores are computed over a **rolling 90-day window** (negated violations exclude
 
 | Method | Endpoint | Description |
 |--------|----------|-------------|
-| GET | `/api/health` | Health check |
+| GET | `/api/health` | Health check (returns build SHA + timestamp) |
 | GET | `/api/employees` | List all employees (includes `notes`) |
+| GET | `/api/employees/:id` | Single employee record |
 | POST | `/api/employees` | Create or upsert employee |
 | PATCH | `/api/employees/:id` | Edit name, department, supervisor, or notes |
+| PATCH | `/api/employees/:id/notes` | Save employee notes only (shorthand) |
 | POST | `/api/employees/:id/merge` | Merge duplicate employee; reassigns all violations |
 | GET | `/api/employees/:id/score` | Get active CPAS score for employee |
 | 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/employees/:id/violation-counts` | 90-day non-negated counts grouped by violation type |
+| GET | `/api/employees/:id/violation-counts/alltime` | All-time non-negated counts + max points used per type |
 | GET | `/api/dashboard` | All employees with active points + violation counts |
-| POST | `/api/violations` | Log a new violation (accepts `acknowledged_by`, `acknowledged_date`) |
+| POST | `/api/violations` | Log a new violation (accepts `acknowledged_by`, `acknowledged_date`, `amount`) |
 | GET | `/api/violations/employee/:id` | Violation history with resolutions + amendment counts |
-| PATCH | `/api/violations/:id/negated` | Negate a violation (soft delete + resolution record) |
+| PATCH | `/api/violations/:id/negate` | 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 |
 | DELETE | `/api/violations/:id` | Hard delete a violation |
 | GET | `/api/violations/:id/pdf` | Download violation PDF |
+| GET | `/api/violation-types` | List custom violation types |
+| POST | `/api/violation-types` | Create a custom violation type |
+| PUT | `/api/violation-types/:id` | Update a custom violation type |
+| DELETE | `/api/violation-types/:id` | Delete a custom violation type (blocked if any violation references it) |
 | GET | `/api/audit` | Paginated audit log (filterable by `entity_type`, `entity_id`) |
 
 ---
@@ -258,24 +266,29 @@ cpas/
         ├── main.jsx
         ├── App.jsx                            # Root app + AppFooter (copyright, dev ticker, Gitea link)
         ├── data/
-        │   └── violations.js                 # All CPAS violation definitions + groups
+        │   ├── violations.js                  # All hardcoded CPAS violation definitions + groups
+        │   └── departments.js                 # DEPARTMENTS constant; single source of truth
         ├── hooks/
-        │   └── useEmployeeIntelligence.js    # Score + history hook
+        │   └── useEmployeeIntelligence.js     # Score + history hook
+        ├── styles/
+        │   └── mobile.css                     # Mobile breakpoint overrides only
         └── 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 + 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
+            ├── CpasBadge.jsx                  # Tier badge + color logic (canonical TIERS, getTier)
+            ├── TierWarning.jsx                # Pre-submit tier crossing alert
+            ├── Dashboard.jsx                  # Company-wide leaderboard + audit log trigger
+            ├── DashboardMobile.jsx            # Mobile-optimized dashboard layout
+            ├── ViolationForm.jsx              # Violation entry form + ack signature + amount field
+            ├── ViolationTypeModal.jsx         # Create / edit / delete custom violation types
+            ├── 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
 ```
 
 ---
@@ -284,10 +297,11 @@ cpas/
 
 Six tables + one view:
 
-- **`employees`** — id, name, department, supervisor, **notes**
-- **`violations`** — full incident record including `prior_active_points` snapshot at time of logging, `acknowledged_by` and `acknowledged_date` for employee acknowledgment
+- **`employees`** — id, name, department, supervisor, notes
+- **`violations`** — full incident record including `prior_active_points` snapshot, `acknowledged_by` / `acknowledged_date`, and `amount` (financial amount in question for chargeback/repayment)
 - **`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
+- **`violation_types`** — persisted custom violation type definitions added via the UI; `type_key` is prefixed `custom_` to prevent collisions with hardcoded keys
 - **`audit_log`** — append-only record of every write action (action, entity_type, entity_id, performed_by, details, timestamp)
 - **`active_cpas_scores`** (view) — sum of points for non-negated violations in rolling 90 days, grouped by employee
 
@@ -306,6 +320,7 @@ Point values, violation type, and incident date are **immutable** after submissi
 | `witness_name` | Witness on record |
 | `acknowledged_by` | Employee who acknowledged receipt |
 | `acknowledged_date` | Date of employee acknowledgment |
+| `amount` | Dollar amount in question (financial violations); typo-correctable for repayment records |
 
 ---
 
@@ -339,6 +354,8 @@ Point values, violation type, and incident date are **immutable** after submissi
 | 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 |
+| 9 | Custom violation types | Persisted user-defined violation types created from the form; `+ Add Type` / `Edit Type` UI; merged into the dropdown alongside hardcoded types; delete blocked when in use |
+| 9 | Financial amount tracking | `amount` field on financial violations (chargeback, receipt negligence, custom types with the field enabled); stored on `violations`, rendered prominently on the PDF, amendable with audit-logged diffs |
 
 ---
 
-- 
2.52.0


From e2c352d518d1ecd3dd62c8c77572016656ea3dde Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Tue, 19 May 2026 00:33:08 -0500
Subject: [PATCH 79/86] Fix math logic for timeline

---
 .claude/settings.local.json                   |  11 +
 .claude/worktrees/musing-bell/.dockerignore   |   9 +
 .claude/worktrees/musing-bell/AGENTS.md       | 294 ++++++
 .claude/worktrees/musing-bell/Dockerfile      |  39 +
 .../musing-bell/MOBILE_RESPONSIVE.md          | 314 ++++++
 .claude/worktrees/musing-bell/README.md       | 397 ++++++++
 .../musing-bell/README_UNRAID_INSTALL.md      | 219 +++++
 .../worktrees/musing-bell/client/index.html   |  17 +
 .../worktrees/musing-bell/client/package.json |  19 +
 .../client/public/static/mpm-logo.png         | Bin 0 -> 4188 bytes
 .../musing-bell/client/public/version.json    |   5 +
 .../worktrees/musing-bell/client/src/App.jsx  | 273 ++++++
 .../src/components/AmendViolationModal.jsx    | 205 ++++
 .../client/src/components/AuditLog.jsx        | 200 ++++
 .../client/src/components/CpasBadge.jsx       |  38 +
 .../client/src/components/Dashboard.jsx       | 349 +++++++
 .../client/src/components/DashboardMobile.jsx | 157 +++
 .../src/components/EditEmployeeModal.jsx      | 195 ++++
 .../client/src/components/EmployeeModal.jsx   | 443 +++++++++
 .../client/src/components/EmployeeNotes.jsx   | 146 +++
 .../src/components/ExpirationTimeline.jsx     | 159 ++++
 .../client/src/components/NegateModal.jsx     | 138 +++
 .../client/src/components/ReadmeModal.jsx     | 340 +++++++
 .../client/src/components/TierWarning.jsx     |  36 +
 .../client/src/components/ToastProvider.jsx   | 145 +++
 .../client/src/components/ViolationForm.jsx   | 472 +++++++++
 .../src/components/ViolationHistory.jsx       |  63 ++
 .../src/components/ViolationTypeModal.jsx     | 292 ++++++
 .../client/src/data/departments.js            |   9 +
 .../musing-bell/client/src/data/violations.js | 248 +++++
 .../src/hooks/useEmployeeIntelligence.js      |  40 +
 .../worktrees/musing-bell/client/src/main.jsx |   9 +
 .../musing-bell/client/src/styles/mobile.css  | 113 +++
 .../musing-bell/client/vite.config.js         |  18 +
 .claude/worktrees/musing-bell/db/database.js  |  93 ++
 .claude/worktrees/musing-bell/db/schema.sql   |  49 +
 .claude/worktrees/musing-bell/demo/index.html | 893 ++++++++++++++++++
 .claude/worktrees/musing-bell/package.json    |  24 +
 .../worktrees/musing-bell/pdf/generator.js    |  47 +
 .claude/worktrees/musing-bell/pdf/template.js | 385 ++++++++
 .claude/worktrees/musing-bell/server.js       | 546 +++++++++++
 AGENTS.md                                     |   4 +-
 CPAS Violation Tracker.md                     | 141 +++
 server.js                                     |  88 +-
 44 files changed, 7660 insertions(+), 22 deletions(-)
 create mode 100644 .claude/settings.local.json
 create mode 100644 .claude/worktrees/musing-bell/.dockerignore
 create mode 100644 .claude/worktrees/musing-bell/AGENTS.md
 create mode 100644 .claude/worktrees/musing-bell/Dockerfile
 create mode 100644 .claude/worktrees/musing-bell/MOBILE_RESPONSIVE.md
 create mode 100644 .claude/worktrees/musing-bell/README.md
 create mode 100644 .claude/worktrees/musing-bell/README_UNRAID_INSTALL.md
 create mode 100644 .claude/worktrees/musing-bell/client/index.html
 create mode 100644 .claude/worktrees/musing-bell/client/package.json
 create mode 100644 .claude/worktrees/musing-bell/client/public/static/mpm-logo.png
 create mode 100644 .claude/worktrees/musing-bell/client/public/version.json
 create mode 100644 .claude/worktrees/musing-bell/client/src/App.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/AmendViolationModal.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/AuditLog.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/CpasBadge.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/Dashboard.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/DashboardMobile.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/EditEmployeeModal.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/EmployeeModal.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/EmployeeNotes.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/ExpirationTimeline.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/NegateModal.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/ReadmeModal.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/TierWarning.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/ToastProvider.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/ViolationForm.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/ViolationHistory.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/components/ViolationTypeModal.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/data/departments.js
 create mode 100644 .claude/worktrees/musing-bell/client/src/data/violations.js
 create mode 100644 .claude/worktrees/musing-bell/client/src/hooks/useEmployeeIntelligence.js
 create mode 100644 .claude/worktrees/musing-bell/client/src/main.jsx
 create mode 100644 .claude/worktrees/musing-bell/client/src/styles/mobile.css
 create mode 100644 .claude/worktrees/musing-bell/client/vite.config.js
 create mode 100644 .claude/worktrees/musing-bell/db/database.js
 create mode 100644 .claude/worktrees/musing-bell/db/schema.sql
 create mode 100644 .claude/worktrees/musing-bell/demo/index.html
 create mode 100644 .claude/worktrees/musing-bell/package.json
 create mode 100644 .claude/worktrees/musing-bell/pdf/generator.js
 create mode 100644 .claude/worktrees/musing-bell/pdf/template.js
 create mode 100644 .claude/worktrees/musing-bell/server.js
 create mode 100644 CPAS Violation Tracker.md

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..c1e5d28
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(node --check server.js)",
+      "Bash(env)",
+      "Bash(findstr /I OBSIDIAN)",
+      "Bash(set)",
+      "Bash(xargs grep -l -i \"obsidian\")"
+    ]
+  }
+}
diff --git a/.claude/worktrees/musing-bell/.dockerignore b/.claude/worktrees/musing-bell/.dockerignore
new file mode 100644
index 0000000..7867acd
--- /dev/null
+++ b/.claude/worktrees/musing-bell/.dockerignore
@@ -0,0 +1,9 @@
+node_modules
+client/node_modules
+client/dist
+*.tar.gz
+*.zip
+.git
+.gitignore
+*.md
+data/
diff --git a/.claude/worktrees/musing-bell/AGENTS.md b/.claude/worktrees/musing-bell/AGENTS.md
new file mode 100644
index 0000000..b7fd96a
--- /dev/null
+++ b/.claude/worktrees/musing-bell/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.
diff --git a/.claude/worktrees/musing-bell/Dockerfile b/.claude/worktrees/musing-bell/Dockerfile
new file mode 100644
index 0000000..5aa27ad
--- /dev/null
+++ b/.claude/worktrees/musing-bell/Dockerfile
@@ -0,0 +1,39 @@
+FROM node:20-alpine AS builder
+WORKDIR /build
+COPY package.json ./
+RUN npm install
+COPY client/package.json ./client/
+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
+ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
+ENV NODE_ENV=production
+ENV PORT=3001
+ENV DB_PATH=/data/cpas.db
+WORKDIR /app
+COPY --from=builder /build/node_modules ./node_modules
+COPY --from=builder /build/client/dist  ./client/dist
+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
+CMD ["node", "server.js"]
diff --git a/.claude/worktrees/musing-bell/MOBILE_RESPONSIVE.md b/.claude/worktrees/musing-bell/MOBILE_RESPONSIVE.md
new file mode 100644
index 0000000..91d1325
--- /dev/null
+++ b/.claude/worktrees/musing-bell/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
diff --git a/.claude/worktrees/musing-bell/README.md b/.claude/worktrees/musing-bell/README.md
new file mode 100644
index 0000000..db9a258
--- /dev/null
+++ b/.claude/worktrees/musing-bell/README.md
@@ -0,0 +1,397 @@
+# CPAS Violation Tracker
+
+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
+
+Everything else — Node.js, npm, React build, Chromium for PDF — happens inside Docker.
+
+---
+
+## Quickstart (Local)
+
+```bash
+# 1. Build the image (installs all deps + compiles React inside Docker)
+docker build -t cpas .
+
+# 2. Run it
+docker run -d --name cpas \
+  -p 3001:3001 \
+  -v cpas-data:/data \
+  cpas
+
+# 3. Open
+# http://localhost:3001
+```
+
+## Update After Code Changes
+
+```bash
+docker build -t cpas .
+docker stop cpas && docker rm cpas
+docker run -d --name cpas -p 3001:3001 -v cpas-data:/data cpas
+```
+
+---
+
+## Deploying on Unraid
+
+### Step 1 — Build and export the image on your dev machine
+
+```bash
+docker build -t cpas:latest .
+docker save cpas:latest | gzip > cpas-latest.tar.gz
+```
+
+### Step 2 — Load the image on Unraid
+
+Transfer `cpas-latest.tar.gz` to your Unraid server, then load it via the Unraid terminal:
+
+```bash
+docker load < /path/to/cpas-latest.tar.gz
+```
+
+Confirm the image is present:
+
+```bash
+docker images | grep cpas
+```
+
+### Step 3 — Create the appdata directory
+
+```bash
+mkdir -p /mnt/user/appdata/cpas/db
+```
+
+### Step 4 — Run the container
+
+This is the verified working `docker run` command for Unraid (bridge networking with static IP):
+
+```bash
+docker run \
+  -d \
+  --name='cpas' \
+  --net='br0' \
+  --ip='10.2.0.14' \
+  --pids-limit 2048 \
+  -e TZ="America/Chicago" \
+  -e HOST_OS="Unraid" \
+  -e HOST_HOSTNAME="ALPHA" \
+  -e HOST_CONTAINERNAME="cpas" \
+  -e 'PORT'='3001' \
+  -e 'DB_PATH'='/data/cpas.db' \
+  -l net.unraid.docker.managed=dockerman \
+  -l net.unraid.docker.webui='http://[IP]:[PORT:3001]' \
+  -v '/mnt/user/appdata/cpas/db':'/data':'rw' \
+  cpas:latest
+```
+
+Access the app at `http://10.2.0.14:3001` (or whatever static IP you assigned).
+
+### Key settings explained
+
+| Setting | Value | Notes |
+|---------|-------|-------|
+| `--net` | `br0` | Unraid custom bridge network — gives the container its own LAN IP |
+| `--ip` | `10.2.0.14` | Static IP on your LAN — adjust to match your subnet |
+| `--pids-limit` | `2048` | Required — Puppeteer/Chromium spawns many processes for PDF generation; default Unraid limit is too low and will cause PDF failures |
+| `PORT` | `3001` | Express listen port inside the container |
+| `DB_PATH` | `/data/cpas.db` | SQLite database path inside the container |
+| Volume | `/mnt/user/appdata/cpas/db` → `/data` | Persists the database across container restarts and rebuilds |
+
+### Updating on Unraid
+
+1. Build and export the new image on your dev machine (Step 1 above)
+2. Load it on Unraid: `docker load < cpas-latest.tar.gz`
+3. Stop and remove the old container: `docker stop cpas && docker rm cpas`
+4. Re-run the `docker run` command from Step 4 — the volume mount preserves all data
+
+> **Note:** The `--pids-limit 2048` flag is critical. Without it, Chromium hits Unraid's default PID limit and PDF generation silently fails or crashes the container.
+
+---
+
+## 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
+- Live table of all employees sorted by active CPAS points (highest risk first)
+- Summary stat cards: total employees, elite standing (0 pts), with active points, at-risk count, highest active score
+- **At-risk badge**: flags employees within 2 points of the next tier escalation
+- Search/filter by name, department, or supervisor
+- **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
+
+### Violation Form
+- Select existing employee or enter new employee by name
+- **Employee intelligence**: shows current CPAS standing badge and 90-day violation count before submitting
+- Violation type dropdown grouped by category; shows prior 90-day counts inline
+- **Recidivist auto-escalation**: if an employee has prior violations of the same type, points slider auto-sets to maximum per policy
+- Repeat offense badge with prior count displayed
+- Context-sensitive fields (time, minutes late, amount, location, description) shown only when relevant to violation type
+- **Tier crossing warning** (TierWarning component): previews what tier the new points would push the employee into before submission
+- Point slider for discretionary adjustments within the violation's min/max range
+- **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, 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
+- Filterable by entity type (employee / violation) and action
+- Paginated with load-more; accessible from the Dashboard toolbar
+
+### Violation Amendment
+- Edit submitted violations' non-scoring fields without delete-and-resubmit
+- Point values, violation type, and incident date are immutable
+- Every change is stored as a field-level diff (old → new value) with timestamp and actor
+
+### In-App Documentation
+- **? Docs** button in the navbar opens a slide-in admin reference panel
+- 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 |
+|--------|------|-------|
+| 0–4    | 0–1  | Elite Standing |
+| 5–9    | 1    | Realignment |
+| 10–14  | 2    | Administrative Lockdown |
+| 15–19  | 3    | Verification |
+| 20–24  | 4    | Risk Mitigation |
+| 25–29  | 5    | Final Decision |
+| 30+    | 6    | Separation |
+
+Scores are computed over a **rolling 90-day window** (negated violations excluded).
+
+### PDF Generation
+- Puppeteer + system Chromium (bundled in Docker image)
+- 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
+
+---
+
+## API Reference
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| GET | `/api/health` | Health check |
+| GET | `/api/employees` | List all employees (includes `notes`) |
+| POST | `/api/employees` | Create or upsert employee |
+| PATCH | `/api/employees/:id` | Edit name, department, supervisor, or notes |
+| POST | `/api/employees/:id/merge` | Merge duplicate employee; reassigns all violations |
+| GET | `/api/employees/:id/score` | Get active CPAS score for employee |
+| 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 (accepts `acknowledged_by`, `acknowledged_date`) |
+| GET | `/api/violations/employee/:id` | Violation history with resolutions + amendment counts |
+| 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 |
+| DELETE | `/api/violations/:id` | Hard delete a violation |
+| GET | `/api/violations/:id/pdf` | Download violation PDF |
+| GET | `/api/audit` | Paginated audit log (filterable by `entity_type`, `entity_id`) |
+
+---
+
+## Project Structure
+
+```
+cpas/
+├── Dockerfile                                  # Multi-stage: builds React + runs Express w/ Chromium
+├── .dockerignore
+├── package.json                                # Backend (Express) deps
+├── server.js                                   # API + static file server
+├── db/
+│   ├── schema.sql                              # Tables + 90-day active score view
+│   └── database.js                            # SQLite connection (better-sqlite3) + auto-migrations
+├── pdf/
+│   ├── 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                            # Root app + AppFooter (copyright, dev ticker, Gitea link)
+        ├── data/
+        │   └── violations.js                 # All CPAS violation definitions + groups
+        ├── hooks/
+        │   └── 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 + 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
+```
+
+---
+
+## Database Schema
+
+Six tables + one view:
+
+- **`employees`** — id, name, department, supervisor, **notes**
+- **`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)
+- **`active_cpas_scores`** (view) — sum of points for non-negated violations in rolling 90 days, grouped by employee
+
+---
+
+## Amendable Fields
+
+Point values, violation type, and incident date are **immutable** after submission. The following fields can be amended:
+
+| Field | Notes |
+|-------|-------|
+| `incident_time` | Time of day the incident occurred |
+| `location` | Where the incident took place |
+| `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 |
+
+---
+
+## Roadmap
+
+### ✅ Completed
+
+| Phase | Feature | Description |
+|-------|---------|-------------|
+| 1 | Container scaffold | Docker multi-stage build, Express server, SQLite schema |
+| 1 | Base violation form | Employee fields, violation type, incident date, point submission |
+| 2 | Employee intelligence | Live CPAS standing badge and 90-day count shown before submitting |
+| 2 | Prior violation highlighting | Violation dropdown annotates types with 90-day recurrence counts |
+| 2 | Recidivist auto-escalation | Points slider auto-maximizes on repeat same-type violations |
+| 2 | Violation history | Per-employee history list with resolution status |
+| 3 | PDF generation | Puppeteer/Chromium PDF per violation, downloadable immediately post-submit |
+| 3 | Prior-points snapshot | `prior_active_points` captured at insert time for accurate historical PDFs |
+| 4 | Company dashboard | Sortable employee table with live tier badges and at-risk flags |
+| 4 | Stat cards | Summary counts: total, clean, active, at-risk, highest score |
+| 4 | Tier crossing warning | Pre-submit alert when new points push employee to next tier |
+| 4 | Employee profile modal | Full history, negate/restore, hard delete, per-record PDF download |
+| 4 | Negate & restore | Soft-delete violations with resolution type + notes, fully reversible |
+| 5 | Employee edit / merge | Update employee name/dept/supervisor; merge duplicate records without losing history |
+| 5 | Violation amendment | Edit non-scoring fields with field-level audit trail |
+| 5 | Audit log | Append-only log of all system writes; filterable panel in the dashboard |
+| 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
+
+| 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
+
+| 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
+
+| 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
+
+| 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
+
+| 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 |
+
+---
+
+*Proposed features are suggestions based on common HR documentation workflows. Priority and implementation order should be driven by actual operational needs.*
diff --git a/.claude/worktrees/musing-bell/README_UNRAID_INSTALL.md b/.claude/worktrees/musing-bell/README_UNRAID_INSTALL.md
new file mode 100644
index 0000000..ee18340
--- /dev/null
+++ b/.claude/worktrees/musing-bell/README_UNRAID_INSTALL.md
@@ -0,0 +1,219 @@
+# CPAS Violation Tracker — Unraid Installation Guide
+
+> **Applies to:** Unraid 6.12+ | Single container | Port 3001
+> **Host requirement:** Docker Desktop only — no Node.js needed
+
+---
+
+## Overview
+
+The Docker image is fully self-contained. All dependencies and the compiled
+React frontend are baked in during the build. You only need Docker Desktop
+on your local machine to build and export the image.
+
+---
+
+## Part 1 — Build the Docker Image Locally
+
+Open a terminal in the unzipped project folder:
+
+```bash
+docker build -t cpas-tracker .
+```
+
+This single command:
+- Installs backend (Node/Express) dependencies
+- Installs frontend (React/Vite) dependencies
+- Compiles the React app
+- Packages everything into one lean image
+
+No npm, no Node.js required on your machine beyond Docker.
+
+---
+
+## Part 2 — Export the Image
+
+```bash
+docker save cpas-tracker | gzip > cpas-tracker.tar.gz
+```
+
+---
+
+## Part 3 — Transfer to Unraid
+
+### Option A — Windows SMB (Recommended, no terminal)
+1. Open File Explorer → address bar → `\\[YOUR-UNRAID-IP]`
+2. Open the **appdata** share
+3. Create a folder named `cpas`
+4. Drag `cpas-tracker.tar.gz` into `\\[YOUR-UNRAID-IP]\appdata\cpas\`
+
+### Option B — SCP (Mac/Linux)
+```bash
+scp cpas-tracker.tar.gz root@[YOUR-UNRAID-IP]:/mnt/user/appdata/cpas/
+```
+
+---
+
+## Part 4 — Prepare Unraid (Terminal — one time only)
+
+1. In Unraid GUI → **Tools** → **Terminal**
+2. Run:
+
+```bash
+mkdir -p /mnt/user/appdata/cpas/db
+docker load < /mnt/user/appdata/cpas/cpas-tracker.tar.gz
+```
+
+Expected output:
+```
+Loaded image: cpas-tracker:latest
+```
+
+3. Close the terminal — no further terminal use needed for normal operation.
+
+---
+
+## Part 5 — Add the Container in Unraid GUI
+
+### 5.1 Navigate to Docker tab
+1. Click **Docker** in the top nav
+2. Confirm Docker is **Enabled** (green toggle)
+3. Scroll to bottom → click **Add Container**
+4. Toggle **Advanced View ON** (top-right of the form)
+
+---
+
+### 5.2 Basic Settings
+
+| Field | Value |
+|---|---|
+| **Name** | `cpas-tracker` |
+| **Repository** | `cpas-tracker` |
+| **Docker Hub URL** | *(leave blank — local image)* |
+| **WebUI** | `http://[IP]:[PORT:3001]` |
+| **Network Type** | `Bridge` |
+| **Privileged** | `Off` |
+| **Restart Policy** | `Unless Stopped` |
+| **Console shell** | `bash` |
+
+> Setting the WebUI field enables a one-click launch icon on the Docker tab.
+
+---
+
+### 5.3 Port Mapping
+
+Click **Add another Path, Port, Variable, Label or Device**
+
+| Setting | Value |
+|---|---|
+| Config Type | `Port` |
+| Name | `Web UI` |
+| Container Port | `3001` |
+| Host Port | `3001` |
+| Protocol | `TCP` |
+
+---
+
+### 5.4 Volume Mapping (Database Persistence)
+
+Click **Add another Path, Port, Variable, Label or Device**
+
+| Setting | Value |
+|---|---|
+| Config Type | `Path` |
+| Name | `Database` |
+| Container Path | `/data` |
+| Host Path | `/mnt/user/appdata/cpas/db` |
+| Access Mode | `Read/Write` |
+
+> The SQLite database lives here and survives container restarts and image updates.
+
+---
+
+### 5.5 Environment Variables
+
+Click **Add another Path, Port, Variable, Label or Device** for each:
+
+**Variable 1 — Port**
+
+| Setting | Value |
+|---|---|
+| Config Type | `Variable` |
+| Name | `Port` |
+| Key | `PORT` |
+| Value | `3001` |
+
+**Variable 2 — Database Path**
+
+| Setting | Value |
+|---|---|
+| Config Type | `Variable` |
+| Name | `Database Path` |
+| Key | `DB_PATH` |
+| Value | `/data/cpas.db` |
+
+---
+
+### 5.6 Apply
+
+1. Click **Apply** at the bottom
+2. Watch the progress log — wait for "Container started"
+3. Click **Done**
+
+---
+
+## Part 6 — Verify
+
+1. Docker tab → **cpas-tracker** should show a green icon
+2. Click the container icon → **WebUI**
+   Or open: `http://[YOUR-UNRAID-IP]:3001`
+3. Confirm **● API connected** appears in the header
+4. Health check: `http://[YOUR-UNRAID-IP]:3001/api/health`
+   → `{"status":"ok","timestamp":"..."}`
+
+---
+
+## Part 7 — Updating After Code Changes
+
+### Locally:
+```bash
+docker build -t cpas-tracker .
+docker save cpas-tracker | gzip > cpas-tracker.tar.gz
+```
+
+### Transfer to Unraid (same as Part 3)
+
+### On Unraid — GUI only after first load:
+1. Copy new tar.gz to Unraid (SMB drag-and-drop)
+2. **Tools → Terminal** → `docker load < /mnt/user/appdata/cpas/cpas-tracker.tar.gz`
+3. **Docker tab** → click `cpas-tracker` icon → **Restart**
+
+> Your database at `/mnt/user/appdata/cpas/db/cpas.db` is never touched during updates.
+
+---
+
+## Troubleshooting
+
+| Problem | Fix |
+|---|---|
+| Container won't start | Docker tab → container icon → **Logs** |
+| Port 3001 conflict | Change Host Port to `3002` in Edit Container |
+| "API unreachable" in UI | Confirm green icon, check Logs, try Restart |
+| DB permission error | Terminal: `chmod 755 /mnt/user/appdata/cpas/db` |
+| Inspect DB directly | Terminal: `docker exec -it cpas-tracker sh` then `sqlite3 /data/cpas.db ".tables"` |
+
+---
+
+## Quick Reference — Unraid Docker Tab Actions
+
+| Action | Steps |
+|---|---|
+| Open app | Container icon → WebUI |
+| View logs | Container icon → Logs |
+| Restart | Container icon → Restart |
+| Edit settings | Container icon → Edit |
+| Stop/Start | Container icon → Stop / Start |
+
+---
+
+*CPAS Violation Tracker — Phase 1 | Message Point Media internal use*
diff --git a/.claude/worktrees/musing-bell/client/index.html b/.claude/worktrees/musing-bell/client/index.html
new file mode 100644
index 0000000..a72bce6
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/.claude/worktrees/musing-bell/client/package.json b/.claude/worktrees/musing-bell/client/package.json
new file mode 100644
index 0000000..36639a5
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "cpas-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.6.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.2"
+  }
+}
diff --git a/.claude/worktrees/musing-bell/client/public/static/mpm-logo.png b/.claude/worktrees/musing-bell/client/public/static/mpm-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..02e50cc2a2713bdd2a2ade7301d92179d5b25707
GIT binary patch
literal 4188
zcmV-i5ToyjP)<h;3K|Lk000e1NJLTq003(M005f^1^@s6Wi4eD000mGNkl<ZcmeEP
z3vd?I6~2GKphBx62(=X~7{n^z14K|zupr=LtiV_bwiYPuj8glwRUAg!(W&EDTc$o|
zY84#lptK^76fmGj3kV1SNe~p#R6yQ=ghyW2bN+CX{Wtr#=iL4G-%WOB4|gBueCOQn
z-gEct|A!<`BwK74APtt>vA9j;hK@3kU^t-860O0i+*t5g#rg|mW%<1)rA&!Lg5dx;
zMLGHL_^CPr=Q&shi${J7!DMZD7ag!fhsQw8k!3TGXFqG#!8*3?0-0a6p-f5vnUqKv
zJRs-CHeT_r+n_lP)=?NJ7$cDgOj2MjR32*f4MzUKZIivpV3oh$NeXx_C6a=X%AFkD
z(Cv_Yv@!-OJy4(#>P$-f2}izbE6>}%?ZK}BJq>%tV1=<RCq5uyVRUqOIHUa4qYWbk
z2MvRDWNl}FfV3CQRpQyN`f-7gf;~N0a_`KxFjCIx2ujI4$c7y90It(}da#b{daxoH
zDc~cbv-0p7T=j%V4^~hyo_F2eR3eQWwCVAB*PytCsU-4F9azy*LaEM`R%c)HUV9iM
z6a-A9k%6<@5BeN=LE-YN><~4tV#g0k@qi=e57?7Br}v`49NU&=gIu+0cjeREe#?q2
zo$@5)DMwCqUC@^6xTV^i+pF+59Inyk(ALo<@XSg9cXYY%!oJ7BFxiO=bQrh?$cCNx
ziX>|*+OsmN!@%9>jTmO4t{A{f;Rs}wf=Jr180dICZ?Z#X>3xwVEfr%}oodd0tbFPo
z=RtizejjemB!<;D4)4h_7}n?n;0KmL_}mMISrQ}wzbzhu!ne|e%)-J>UnD%cT0GN%
z5TMVwfHEI>Cuf#Owm=w=gp~|+(P>g(APYGV7%OsNmnU#pBZx%Z9CWVPxkMfbg1nP6
ztJ#s3qYhCs3&SKovm|;!%jPSg^bC2V3RHvC*szMB+9dks45S2P7WLyMk!%4lAmMpM
z6H))QegM7`h!7Yc7Z^AjLWrx`yTC_3Ngxx+rF*kyF{};(`J~q-hzp)s$!CMWL+HDN
zw4w@q84SH!&C?-_m7ofg?kQk{DqxcAh73?SPhshvEQ2Bk8+8dpeaI|Yq-f-6k=)D*
z1IRlR7_^sS0pG2NWHV+!LN!Pc0lX&#hRDrEEiO<W-m@TBJfaAgB)cI46uwXECYfc(
zIoJF&|D^Jr{LI32mK$JV*T?|!NELE5*yt`f3Y!7QtmHi_Y|_!6gmsWAkXiIMX>^u|
zDFbxglLEtla}!fYEK+fS`mAM8N(mWh5^Bq~-B#EgD5O7r;5`e{5#FW+K|U%hsBPJF
z8}^>SwRK!r%OIxY?k#`3%rN8@X<oYc609o(a!3{Sa#mjUYDtS^+o01siUxdOV2)pr
z&_2kOkitqz78S_S!rm1o0kjlb<f{7QfvXgEoR*zgiey=LqAdo3qOK)vJp%`KzBU|r
zL8-rD_Aj#<bgpE!E-aAQ6tk{6TYvfC6W3=e=Dj74Es^kG3QE`o2E@R6NSfF=(`|Nj
z|E_<mGKncnTUO~V;JK9(F&h_W>s<AP;Wvkw1xqQ=N12&h7W6=MunK1XaAA)+1dNLW
z`pgPyZT7+mW|-<x>gq(w%U9Iy8CQe#-45^H1E0RpGdyq6@&uX1f6tPz?uIR2Y@Wvc
zEpAroi|1bopU=gs@3G4)E8#8eI93IQDg??l{PGghfl^p;YGbzy;<9_7tZ;|PU~PP}
zXY7_h>^Hn;LAT>Hy;Q6aHhWhXF>7PF3?j#+%kO%EJ6LERM}YzZzI+rkk+rgqskG}b
zu)C9-bK&s63ypYAl$Smv7+dkeYxfBaeAID@53iB??!Xt~Qw5$`@JRwpGf9wZ#(cEd
zRC)}0d8d<f?>}R*ZY+Ya)l?npsDpp?_exVv@!>VozN5WP40avJEJlyBY|^p&gkCx>
zN{a6MpN?L0(SgjOzZhn_^IiH(`%r4Ua34RieE=nv_4B?Xb#Tw^GOjlTm!qo_hh2wN
zU~qz?+Q6zTbcBMdgNHiZ`%d3N!R6?pAFA+5cTRLfn|`B9Amzcxr$-y#x^5?E>FqvP
z4YNZJ%}h%-7K>hFGYgrp#M!{3{aSU^(Ql)!pKO@lf4kk*>Ac^V5-g4V;EeA(`S!aO
z$!C^g!oFs^ohyB>wx+70z|G!z-3uegdsd&i$C0cC6)FA4Zq=IQYhS+{C#5oLwk>29
z{XHv8HY5y#j(EkiVd2nSIvBc>!^@ZMJ)L;$I*?g7d8wislDS?gbw;(&`ouxFZq>*4
zbrpsfBJhpMc}hgOz!0$YAG;|ZlFPNgQ1@2Py#f!xqUnw|{3O-t%uxRjj$b@Z_anay
zBK7v=!0jA$?XqTGzfw1S>-GMl*N6HirmVhok0ZYfBKdi(+a43lWvs5|WKXWG$m+&f
z1|i>cM^@=&wGR&9*NtBLb>-Wu{qH|}L2ohvy!6$*v(CA6b*5GJ&y;UU3z?Puz;flG
zc<J4XbbMbm;*Ehidb!q##WM>@%0IL76FRdHb(I`DSTc%gqip@!qq|ph@YC_SuM?MD
z2QrJkc6tSot$Y3MTsBQ;JhxWO>1|mG{rh%)*HPmIW83`h1N#|f78C#2gss0h$*j%q
z-mmq2m9TC0ndWwmW*ZCdUha0^di}D2PtHbtsvri{#;T9@RLRME){!q(Zng%ldt7k&
zQ|&Nqd_~IqV~0zJ`0D98w&`sunsg6h+b)w%(Y~p`r%8a~b{)PVfpml~`UFJ)&}c_r
z41mskZmHCX^S#+up3>19H14iej4;H}z3XSD@j1rI200)~PBIH;&Y`lEtZ!q{HYiD@
z9<5W{QCj7nVq@1;7?c(Y3_DCX=UY}zE#`Q-aeOf>1suy@Y*x<c_farNbQCBsQbIyH
zQiSd%(?a>mysCeu>`hwkpx4z__fUTIBW|jxFeq)#mO)JaO+{0NH|>W16|^-Ke=p7&
zR=>^~dRMJDy2nsp0JyHU(gPEt{WQ+u-S02q;0&3t36=w}JdGoWZA#>^enZZRSy##o
zU&3G`#*BV*npqexx4US|m76Af(3<1d?vI0^Z0uM%=Q(|5;d=eW_W8q92PiGta)si@
zs%!UWy+=K^W9gjdtQu6E+qUM>rRtc{-u%Ojtg5ih*_}S4_))q=Gq1wQuTFE)LT15R
zGlU@tVj8L47Z=ZtqjP@4nEzbN@#loi!BI9&cz)L)vv7h^MY-g*nf_M2aof*0NUd78
z{Z!aK?DRhu%q=r!k@hPLHYYsqYmvyT6BWCk=k$8W_*LEfW~23fr;CR_!tt~0m8+!{
zM;&vpl#Rlmw2)cKy!p4iZv4~ZaqcB#7QC|L=o1WS@%zcf7k|Ma^1Mz19<btg9dq!d
zoZHF`lY^&h+%Uba=lnej>Kc6C6CZDS=^51#O51njvojQiSKF=ceO)NHN_XiiPu95M
zDjiPihUs;^#VmuD^qN@4AvH=iungwDbeAxlP?pag_B4l_>u-Jj8))w(9NglfY2$*%
zRB?FWy4{1!@-7!ex<s|>2*b^eSASl0^6;-X!0j%$cCT=ZvmSTE#0_{LsN0^;mcUp3
zXzC_ZM613Vru+3sWfsmTYj-HeXzL~v9ILJyp1N+;r5-B`N^2=FU^xVjup*@&_+Blj
z8SP%!A1r@(1_yk^#C2!5;d1cSE&2KDZg}cC2UpoB3`z@MkwDr(2`wn1JaStPUwd~h
zo63PrrBXFceHb-qJ#>(cxW8=m7$>}pYjoH~3l9!5d|31%msvQ|8hb=LLR-7g5E`}Z
zI8Nt{+VmqQJilv^duHJpzU;MI=Fz(^#I2LpW&CE&HfOfq#lcxRYxoX~!%sNa%Ek}d
z={{70$~-#lsS}6p3L={CPFSM#pTq6Gpei-~6?t~dAkHDPqVaK)gtgf!+|C7!Va2l_
zb7Mq1JC@FQBr^*;v$pVox!6+W_9^eD3yQ9n-T5rl7WEgrbS*wQ@Gx=$nFS>~geM7N
z+6x_DUw*!NEZ0veFaKokK@Z>0vDb-B>2UCsjl!U`kXbkpsiItRTU~!V{M#n4I*VtC
zR=TmF9_n)i?P(I(%)%MB=;fhnxKw!Bx!j!pVt>ak88Mb7;)0=jxe1=%$_BuZe9wZo
z1xj^QWq*h<v^`BActhX5f(oF^-O-#Rpd9gK5SIxq9W*;gDFzobADP<NH=0Cx8N`|X
z&b&#5nVrne*_$s6s6~GiF^PoYN9n?BGI5!G+r#^|j>x{3czA%!isnnPw7evTL8aB7
z?y*T+x<0IWkuEUcnVK#%=D&3Fb`xU!Z2$G#0I7WGwtkp?_jUa!J;Z~rNT5+ybXzbn
z+I9V$)~l&LUSQ<U$Cx})5Lep92iNm9V5DcFW{dt}ky+Ru&yE}1T(e~QFvRDGfm_Nr
zHR#6TnI+-*wRFxstpC8^M`+oOx0fP5NBpq8?sNQcszI+9vUach;3usA8kDtwasUjO
z70nNFC9F$!37VhHEB`j#?t^k}5)Z|X(uK^Ty+w=kk9-NkjpH*V{{6!6gNBYX%(oTK
zc}%4H!;424ZFHZpDKH?>L{)WVdn0~q#)xSmHaOBL$8Ri3_l9x^dq|?hU3u}W?=Q~4
zMQp0L!~5T%`T~7;W<~!K3<=esk_E4h)%qQRerz2*^#73xlhyh;@VQU+33#zu24QlE
ziX(eQLEOeWVi^fcAd?`-zQG?97$z>`X*=hyHy~HB3qE$sATA$^Ui;B{6Q&WvTudUs
z*Cp!XM~GNvR{4RQ*O*bIYwe|%^17LYdno~#g`-RpVYo?HgiM7S!tB4?SZ(TC*>ht+
zJB2}MV^?6nIHxP_xzCM!3p-7fI$76RVVJa3zjl49Z?uQ^EJ$alGz3M^(nKh}Ty(2W
zR^HAE!3B@hf54C+EdR;~?FoYZVw+hwGgZHJ+gX1eEYU6~(e>-3$BBXU%$oW1U}+-A
zSP(*uAqbyV461*tz7<F37zaF-)gT7m(gX(-GK*U8C;AeeHDSv|1vfpCm*1vss6V3I
z(lR2b{tmh050B@Ko4R-a=V6!Fz`H4oL|8n4tNKqcvX#;aZg7u`hQaE3>CpQ`SW_hN
zLr%#b|Mnet85Z@KHS~_@&m|m^ISg%nV^*Owl<pUG>o-Xl{X9ZSh{RrqfH|1>V0~5z
z*ct|F*qEnYmXKbFK!!z#2N<J<y<xEM%B0_|!1TbwL?Xa|eLOM-3*$otnS+<U#AjyZ
zh~t3cVU;F>g*PYvetD8%NJNgrjep0%!Whv&MriGB39)qkW}mspJM!-&u7icjKY3_*
z3I)b2v@$iOzKr=no^QM7nY)p9H}M=SWi$l_4Mm(TOJ(v*Bmd1YJ7>scetz4-$SaD_
z*t7;q;Y@j`D24LVhl^4uaQ*E>1c?LW4F!3;_ty(ZKMwvC-Jf1w00005Nkl<Z00030
m|MIF!HUIzs21!IgR09CL*Q+_hN;9?q0000<MNUMnLSTYuS11nv

literal 0
HcmV?d00001

diff --git a/.claude/worktrees/musing-bell/client/public/version.json b/.claude/worktrees/musing-bell/client/public/version.json
new file mode 100644
index 0000000..d23d125
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/public/version.json
@@ -0,0 +1,5 @@
+{
+  "sha": "dev",
+  "shortSha": "dev",
+  "buildTime": null
+}
diff --git a/.claude/worktrees/musing-bell/client/src/App.jsx b/.claude/worktrees/musing-bell/client/src/App.jsx
new file mode 100644
index 0000000..2b02499
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/App.jsx
@@ -0,0 +1,273 @@
+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';
+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' },
+];
+
+// Responsive utility hook
+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' },
+  logoWrap: { display: 'flex', alignItems: 'center', marginRight: '32px', padding: '14px 0' },
+  logoImg:  { height: '28px', marginRight: '10px' },
+  logoText: { color: '#f8f9fa', fontWeight: 800, fontSize: '18px', letterSpacing: '0.5px' },
+  tab:  (active) => ({
+    padding: '18px 22px',
+    color: active ? '#f8f9fa' : 'rgba(248,249,250,0.6)',
+    borderBottom: active ? '3px solid #d4af37' : '3px solid transparent',
+    cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
+    background: 'none', border: 'none',
+  }),
+  docsBtn: {
+    marginLeft: 'auto',
+    background: 'none',
+    border: '1px solid #2a2b3a',
+    color: '#9ca0b8',
+    borderRadius: '6px',
+    padding: '6px 14px',
+    fontSize: '12px',
+    cursor: 'pointer',
+    fontWeight: 600,
+    letterSpacing: '0.3px',
+    display: 'flex',
+    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 (
+    <ToastProvider>
+      <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)}>
+                {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>
+
+        <AppFooter version={version} />
+
+        {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
+      </div>
+    </ToastProvider>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/AmendViolationModal.jsx b/.claude/worktrees/musing-bell/client/src/components/AmendViolationModal.jsx
new file mode 100644
index 0000000..c9dbd91
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/components/AmendViolationModal.jsx
@@ -0,0 +1,205 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const FIELD_LABELS = {
+  incident_time:  'Incident Time',
+  location:       'Location / Context',
+  details:        'Incident Notes',
+  submitted_by:   'Submitted By',
+  witness_name:   'Witness / Documenting Officer',
+};
+
+const s = {
+  overlay: {
+    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.8)',
+    zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center',
+  },
+  modal: {
+    background: '#111217', color: '#f8f9fa', width: '520px', maxWidth: '95vw',
+    maxHeight: '90vh', overflowY: 'auto',
+    borderRadius: '10px', boxShadow: '0 8px 40px rgba(0,0,0,0.8)',
+    border: '1px solid #222',
+  },
+  header: {
+    background: 'linear-gradient(135deg, #000000, #151622)', color: 'white',
+    padding: '18px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+    borderBottom: '1px solid #222', position: 'sticky', top: 0, zIndex: 10,
+  },
+  headerLeft: {},
+  title:    { fontSize: '15px', fontWeight: 700 },
+  subtitle: { fontSize: '11px', color: '#9ca0b8', marginTop: '2px' },
+  closeBtn: {
+    background: 'none', border: 'none', color: 'white', fontSize: '20px',
+    cursor: 'pointer', lineHeight: 1,
+  },
+  body: { padding: '22px' },
+  notice: {
+    background: '#0e1a30', border: '1px solid #1e3a5f', borderRadius: '6px',
+    padding: '10px 14px', fontSize: '12px', color: '#7eb8f7', marginBottom: '18px',
+  },
+  label:   { fontSize: '11px', color: '#9ca0b8', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '5px' },
+  input: {
+    width: '100%', background: '#0d0e14', border: '1px solid #2a2b3a', borderRadius: '6px',
+    color: '#f8f9fa', padding: '9px 12px', fontSize: '13px', marginBottom: '14px',
+    outline: 'none', boxSizing: 'border-box',
+  },
+  textarea: {
+    width: '100%', background: '#0d0e14', border: '1px solid #2a2b3a', borderRadius: '6px',
+    color: '#f8f9fa', padding: '9px 12px', fontSize: '13px', marginBottom: '14px',
+    outline: 'none', boxSizing: 'border-box', minHeight: '80px', resize: 'vertical',
+  },
+  divider: { borderTop: '1px solid #1c1d29', margin: '16px 0' },
+  sectionTitle: {
+    fontSize: '11px', fontWeight: 700, color: '#9ca0b8', textTransform: 'uppercase',
+    letterSpacing: '0.5px', marginBottom: '12px',
+  },
+  amendRow: {
+    background: '#0d0e14', border: '1px solid #1c1d29', borderRadius: '6px',
+    padding: '10px 12px', marginBottom: '8px', fontSize: '12px',
+  },
+  amendField:    { fontWeight: 700, color: '#c0c2d6', marginBottom: '4px' },
+  amendOld:      { color: '#ff7070', textDecoration: 'line-through', marginRight: '6px' },
+  amendNew:      { color: '#9ef7c1' },
+  amendMeta:     { fontSize: '10px', color: '#555a7a', marginTop: '4px' },
+  row:     { display: 'flex', gap: '10px', justifyContent: 'flex-end', marginTop: '6px' },
+  btn:     (color, bg) => ({
+    padding: '8px 18px', borderRadius: '6px', fontWeight: 700, fontSize: '13px',
+    cursor: 'pointer', border: `1px solid ${color}`, color, background: bg || 'none',
+  }),
+  error: {
+    background: '#3c1114', border: '1px solid #f5c6cb', borderRadius: '6px',
+    padding: '10px 12px', fontSize: '12px', color: '#ffb3b8', marginBottom: '14px',
+  },
+};
+
+function fmtDt(iso) {
+  if (!iso) return '—';
+  return new Date(iso).toLocaleString('en-US', { timeZone: 'America/Chicago', dateStyle: 'medium', timeStyle: 'short' });
+}
+
+export default function AmendViolationModal({ violation, onClose, onSaved }) {
+  const [fields, setFields] = useState({
+    incident_time:  violation.incident_time  || '',
+    location:       violation.location       || '',
+    details:        violation.details        || '',
+    submitted_by:   violation.submitted_by   || '',
+    witness_name:   violation.witness_name   || '',
+  });
+  const [changedBy, setChangedBy]   = useState('');
+  const [saving, setSaving]         = useState(false);
+  const [error, setError]           = useState('');
+  const [amendments, setAmendments] = useState([]);
+
+  useEffect(() => {
+    axios.get(`/api/violations/${violation.id}/amendments`)
+      .then(r => setAmendments(r.data))
+      .catch(() => {});
+  }, [violation.id]);
+
+  const hasChanges = Object.entries(fields).some(
+    ([k, v]) => v !== (violation[k] || '')
+  );
+
+  const handleSave = async () => {
+    setError('');
+    setSaving(true);
+    try {
+      // Only send fields that actually changed
+      const patch = Object.fromEntries(
+        Object.entries(fields).filter(([k, v]) => v !== (violation[k] || ''))
+      );
+      await axios.patch(`/api/violations/${violation.id}/amend`, { ...patch, changed_by: changedBy || null });
+      onSaved();
+      onClose();
+    } catch (e) {
+      setError(e.response?.data?.error || 'Failed to save amendment');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const set = (field, value) => setFields(prev => ({ ...prev, [field]: value }));
+
+  return (
+    <div style={s.overlay} onClick={e => e.target === e.currentTarget && onClose()}>
+      <div style={s.modal}>
+        <div style={s.header}>
+          <div style={s.headerLeft}>
+            <div style={s.title}>Amend Violation</div>
+            <div style={s.subtitle}>
+              CPAS-{String(violation.id).padStart(5, '0')} · {violation.violation_name} · {violation.incident_date}
+            </div>
+          </div>
+          <button style={s.closeBtn} onClick={onClose}>✕</button>
+        </div>
+
+        <div style={s.body}>
+          <div style={s.notice}>
+            Only non-scoring fields can be amended. Point values, violation type, and incident date
+            are immutable — delete and re-submit if those need to change.
+          </div>
+
+          {error && <div style={s.error}>{error}</div>}
+
+          {Object.entries(FIELD_LABELS).map(([field, label]) => (
+            <div key={field}>
+              <div style={s.label}>{label}</div>
+              {field === 'details' ? (
+                <textarea
+                  style={s.textarea}
+                  value={fields[field]}
+                  onChange={e => set(field, e.target.value)}
+                />
+              ) : (
+                <input
+                  style={s.input}
+                  value={fields[field]}
+                  onChange={e => set(field, e.target.value)}
+                />
+              )}
+            </div>
+          ))}
+
+          <div style={s.label}>Your Name (recorded in amendment log)</div>
+          <input
+            style={s.input}
+            value={changedBy}
+            onChange={e => setChangedBy(e.target.value)}
+            placeholder="Optional but recommended"
+          />
+
+          <div style={s.row}>
+            <button style={s.btn('#888')} onClick={onClose}>Cancel</button>
+            <button
+              style={s.btn('#fff', hasChanges ? '#667eea' : '#333')}
+              onClick={handleSave}
+              disabled={!hasChanges || saving}
+            >
+              {saving ? 'Saving…' : 'Save Amendment'}
+            </button>
+          </div>
+
+          {amendments.length > 0 && (
+            <>
+              <div style={s.divider} />
+              <div style={s.sectionTitle}>Amendment History ({amendments.length})</div>
+              {amendments.map(a => (
+                <div key={a.id} style={s.amendRow}>
+                  <div style={s.amendField}>{FIELD_LABELS[a.field_name] || a.field_name}</div>
+                  <div>
+                    <span style={s.amendOld}>{a.old_value || '(empty)'}</span>
+                    <span style={{ color: '#555', marginRight: '6px' }}>→</span>
+                    <span style={s.amendNew}>{a.new_value || '(empty)'}</span>
+                  </div>
+                  <div style={s.amendMeta}>
+                    {a.changed_by ? `by ${a.changed_by} · ` : ''}{fmtDt(a.created_at)}
+                  </div>
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/AuditLog.jsx b/.claude/worktrees/musing-bell/client/src/components/AuditLog.jsx
new file mode 100644
index 0000000..2e09af3
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/components/AuditLog.jsx
@@ -0,0 +1,200 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import axios from 'axios';
+
+const ACTION_COLORS = {
+  employee_created:  '#667eea',
+  employee_edited:   '#9b8af8',
+  employee_merged:   '#f0a500',
+  violation_created: '#28a745',
+  violation_amended: '#4db6ac',
+  violation_negated: '#ffc107',
+  violation_restored:'#17a2b8',
+  violation_deleted: '#dc3545',
+};
+
+const ACTION_LABELS = {
+  employee_created:  'Employee Created',
+  employee_edited:   'Employee Edited',
+  employee_merged:   'Employee Merged',
+  violation_created: 'Violation Logged',
+  violation_amended: 'Violation Amended',
+  violation_negated: 'Violation Negated',
+  violation_restored:'Violation Restored',
+  violation_deleted: 'Violation Deleted',
+};
+
+const ENTITY_LABELS = {
+  employee:  'Employee',
+  violation: 'Violation',
+};
+
+const s = {
+  overlay: {
+    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)',
+    zIndex: 1000, display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end',
+  },
+  panel: {
+    background: '#111217', color: '#f8f9fa', width: '680px', maxWidth: '95vw',
+    height: '100vh', overflowY: 'auto', boxShadow: '-4px 0 24px rgba(0,0,0,0.7)',
+    display: 'flex', flexDirection: 'column',
+  },
+  header: {
+    background: 'linear-gradient(135deg, #000000, #151622)', color: 'white',
+    padding: '22px 26px', position: 'sticky', top: 0, zIndex: 10,
+    borderBottom: '1px solid #222',
+  },
+  headerRow: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
+  title:     { fontSize: '17px', fontWeight: 700 },
+  subtitle:  { fontSize: '12px', color: '#9ca0b8', marginTop: '3px' },
+  closeBtn:  {
+    background: 'none', border: 'none', color: 'white', fontSize: '22px',
+    cursor: 'pointer', lineHeight: 1,
+  },
+  filters: {
+    padding: '14px 26px', borderBottom: '1px solid #1c1d29',
+    display: 'flex', gap: '10px', flexWrap: 'wrap',
+  },
+  select: {
+    background: '#0d0e14', border: '1px solid #2a2b3a', borderRadius: '6px',
+    color: '#f8f9fa', padding: '7px 12px', fontSize: '12px', outline: 'none',
+  },
+  body:       { padding: '16px 26px', flex: 1 },
+  entry: {
+    borderBottom: '1px solid #1c1d29', padding: '12px 0',
+    display: 'flex', gap: '12px', alignItems: 'flex-start',
+  },
+  dot: (action) => ({
+    width: '8px', height: '8px', borderRadius: '50%', marginTop: '5px', flexShrink: 0,
+    background: ACTION_COLORS[action] || '#555',
+  }),
+  entryMain:  { flex: 1, minWidth: 0 },
+  actionBadge: (action) => ({
+    display: 'inline-block', padding: '2px 8px', borderRadius: '10px',
+    fontSize: '10px', fontWeight: 700, letterSpacing: '0.3px', marginRight: '6px',
+    background: (ACTION_COLORS[action] || '#555') + '22',
+    color: ACTION_COLORS[action] || '#aaa',
+    border: `1px solid ${(ACTION_COLORS[action] || '#555')}44`,
+  }),
+  entityRef:  { fontSize: '11px', color: '#9ca0b8' },
+  details:    { fontSize: '11px', color: '#667', marginTop: '4px', fontFamily: 'monospace', wordBreak: 'break-all' },
+  meta:       { fontSize: '10px', color: '#555a7a', marginTop: '4px' },
+  empty:      { textAlign: 'center', color: '#555a7a', padding: '60px 0', fontSize: '13px' },
+  loadMore:   {
+    width: '100%', background: 'none', border: '1px solid #2a2b3a', borderRadius: '6px',
+    color: '#9ca0b8', padding: '10px', cursor: 'pointer', fontSize: '12px', marginTop: '16px',
+  },
+};
+
+function fmtDt(iso) {
+  if (!iso) return '—';
+  return new Date(iso).toLocaleString('en-US', {
+    timeZone: 'America/Chicago', dateStyle: 'medium', timeStyle: 'short',
+  });
+}
+
+function renderDetails(detailsStr) {
+  if (!detailsStr) return null;
+  try {
+    const obj = JSON.parse(detailsStr);
+    return JSON.stringify(obj, null, 0)
+      .replace(/^\{/, '').replace(/\}$/, '').replace(/","/g, '  ');
+  } catch {
+    return detailsStr;
+  }
+}
+
+export default function AuditLog({ onClose }) {
+  const [entries, setEntries]       = useState([]);
+  const [loading, setLoading]       = useState(true);
+  const [offset, setOffset]         = useState(0);
+  const [hasMore, setHasMore]       = useState(false);
+  const [filterType, setFilterType] = useState('');
+  const [filterAction, setFilterAction] = useState('');
+  const LIMIT = 50;
+
+  const load = useCallback((reset = false) => {
+    setLoading(true);
+    const o = reset ? 0 : offset;
+    const params = { limit: LIMIT, offset: o };
+    if (filterType)   params.entity_type = filterType;
+    if (filterAction) params.action      = filterAction; // future: server-side action filter
+    axios.get('/api/audit', { params })
+      .then(r => {
+        const data = r.data;
+        // Client-side action filter (cheap enough at this scale)
+        const filtered = filterAction ? data.filter(e => e.action === filterAction) : data;
+        setEntries(prev => reset ? filtered : [...prev, ...filtered]);
+        setHasMore(data.length === LIMIT);
+        setOffset(o + LIMIT);
+      })
+      .finally(() => setLoading(false));
+  }, [offset, filterType, filterAction]);
+
+  useEffect(() => { load(true); }, [filterType, filterAction]); // eslint-disable-line
+
+  const handleOverlay = e => { if (e.target === e.currentTarget) onClose(); };
+
+  return (
+    <div style={s.overlay} onClick={handleOverlay}>
+      <div style={s.panel} onClick={e => e.stopPropagation()}>
+        <div style={s.header}>
+          <div style={s.headerRow}>
+            <div>
+              <div style={s.title}>Audit Log</div>
+              <div style={s.subtitle}>All system write actions — append-only</div>
+            </div>
+            <button style={s.closeBtn} onClick={onClose}>✕</button>
+          </div>
+        </div>
+
+        <div style={s.filters}>
+          <select style={s.select} value={filterType} onChange={e => { setFilterType(e.target.value); setOffset(0); }}>
+            <option value="">All entity types</option>
+            {Object.entries(ENTITY_LABELS).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
+          </select>
+          <select style={s.select} value={filterAction} onChange={e => { setFilterAction(e.target.value); setOffset(0); }}>
+            <option value="">All actions</option>
+            {Object.entries(ACTION_LABELS).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
+          </select>
+        </div>
+
+        <div style={s.body}>
+          {loading && entries.length === 0 ? (
+            <div style={s.empty}>Loading…</div>
+          ) : entries.length === 0 ? (
+            <div style={s.empty}>No audit entries found.</div>
+          ) : (
+            entries.map(e => (
+              <div key={e.id} style={s.entry}>
+                <div style={s.dot(e.action)} />
+                <div style={s.entryMain}>
+                  <div>
+                    <span style={s.actionBadge(e.action)}>
+                      {ACTION_LABELS[e.action] || e.action}
+                    </span>
+                    <span style={s.entityRef}>
+                      {ENTITY_LABELS[e.entity_type] || e.entity_type}
+                      {e.entity_id ? ` #${e.entity_id}` : ''}
+                    </span>
+                  </div>
+                  {e.details && (
+                    <div style={s.details}>{renderDetails(e.details)}</div>
+                  )}
+                  <div style={s.meta}>
+                    {e.performed_by ? `by ${e.performed_by} · ` : ''}{fmtDt(e.created_at)}
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+
+          {hasMore && (
+            <button style={s.loadMore} onClick={() => load(false)}>
+              Load more
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/CpasBadge.jsx b/.claude/worktrees/musing-bell/client/src/components/CpasBadge.jsx
new file mode 100644
index 0000000..21c172a
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/components/CpasBadge.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+const TIERS = [
+    { min: 0,  max: 4,  label: 'Tier 0-1 — Elite Standing',        color: '#28a745', bg: '#d4edda' },
+    { min: 5,  max: 9,  label: 'Tier 1 — Realignment',             color: '#856404', bg: '#fff3cd' },
+    { min: 10, max: 14, label: 'Tier 2 — Administrative Lockdown',  color: '#d9534f', bg: '#f8d7da' },
+    { min: 15, max: 19, label: 'Tier 3 — Verification',             color: '#d9534f', bg: '#f8d7da' },
+    { min: 20, max: 24, label: 'Tier 4 — Risk Mitigation',          color: '#721c24', bg: '#f5c6cb' },
+    { min: 25, max: 29, label: 'Tier 5 — Final Decision',           color: '#721c24', bg: '#f5c6cb' },
+    { min: 30, max: 999,label: 'Tier 6 — Separation',               color: '#fff',    bg: '#721c24' },
+];
+
+export function getTier(points) {
+    return TIERS.find(t => points >= t.min && points <= t.max) || TIERS[0];
+}
+
+export function getNextTier(points) {
+    const idx = TIERS.findIndex(t => points >= t.min && points <= t.max);
+    return idx >= 0 && idx < TIERS.length - 1 ? TIERS[idx + 1] : null;
+}
+
+export default function CpasBadge({ points }) {
+    const tier = getTier(points);
+    return (
+        <span style={{
+            display: 'inline-block',
+            padding: '4px 10px',
+            borderRadius: '12px',
+            fontSize: '12px',
+            fontWeight: 700,
+            color: tier.color,
+            background: tier.bg,
+            border: `1px solid ${tier.color}`,
+        }}>
+            {points} pts — {tier.label}
+        </span>
+    );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/Dashboard.jsx b/.claude/worktrees/musing-bell/client/src/components/Dashboard.jsx
new file mode 100644
index 0000000..4706e08
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/components/Dashboard.jsx
@@ -0,0 +1,349 @@
+import React, { useState, useEffect, useCallback } from 'react';
+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;
+
+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;
+}
+
+// Media query hook
+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 #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' },
+  td:           { padding: '11px 14px', borderBottom: '1px solid #1c1d29', fontSize: '13px', verticalAlign: 'middle', color: '#f8f9fa' },
+  nameBtn:      { background: 'none', border: 'none', cursor: 'pointer', fontWeight: 600, color: '#d4af37', fontSize: '14px', padding: 0, textDecoration: 'underline dotted' },
+  atRiskBadge:  { display: 'inline-block', marginLeft: '8px', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#3b2e00', color: '#ffd666', border: '1px solid #d4af37', verticalAlign: 'middle' },
+  zeroRow:      { color: '#77798a', fontStyle: 'italic', fontSize: '12px' },
+  toolbarRight: { display: 'flex', gap: '10px', alignItems: 'center' },
+  refreshBtn:   { padding: '9px 18px', background: '#d4af37', color: '#000', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' },
+  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([]);
+  const [search,      setSearch]      = useState('');
+  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);
+    axios.get('/api/dashboard')
+      .then(r => { setEmployees(r.data); setFiltered(r.data); })
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  // Apply search + badge filter together
+  useEffect(() => {
+    const q = search.toLowerCase();
+    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;
+  // 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 (
+    <>
+      <style>{mobileStyles}</style>
+      <div style={s.wrap} className="dashboard-wrap">
+        <div style={s.header} className="dashboard-header">
+          <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} 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} 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} 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>
+
+          {/* 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>
+
+          {/* 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>
+
+          {/* 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>
+
+          {/* 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>
+              <tr>
+                <th style={s.th}>#</th>
+                <th style={s.th}>Employee</th>
+                <th style={s.th}>Department</th>
+                <th style={s.th}>Supervisor</th>
+                <th style={s.th}>Tier / Standing</th>
+                <th style={s.th}>Active Points</th>
+                <th style={s.th}>90-Day Violations</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.length === 0 && (
+                <tr>
+                  <td colSpan={7} style={{ ...s.td, textAlign: 'center', ...s.zeroRow }}>
+                    No employees found.
+                  </td>
+                </tr>
+              )}
+              {filtered.map((emp, i) => {
+                const risk     = isAtRisk(emp.active_points);
+                const tier     = getTier(emp.active_points);
+                const boundary = nextTierBoundary(emp.active_points);
+                return (
+                  <tr
+                    key={emp.id}
+                    style={{ background: risk ? '#181200' : i % 2 === 0 ? '#111217' : '#151622' }}
+                  >
+                    <td style={{ ...s.td, color: '#77798a', fontSize: '12px' }}>{i + 1}</td>
+                    <td style={s.td}>
+                      <button style={s.nameBtn} onClick={() => setSelectedId(emp.id)}>
+                        {emp.name}
+                      </button>
+                      {risk && (
+                        <span style={s.atRiskBadge}>
+                          ⚠ {boundary - emp.active_points} pt{boundary - emp.active_points > 1 ? 's' : ''} to {getTier(boundary).label.split('—')[0].trim()}
+                        </span>
+                      )}
+                    </td>
+                    <td style={{ ...s.td, color: '#c0c2d6' }}>{emp.department || '—'}</td>
+                    <td style={{ ...s.td, color: '#c0c2d6' }}>{emp.supervisor || '—'}</td>
+                    <td style={s.td}><CpasBadge points={emp.active_points} /></td>
+                    <td style={{ ...s.td, fontWeight: 700, color: tier.color, fontSize: '16px' }}>
+                      {emp.active_points}
+                    </td>
+                    <td style={{ ...s.td, color: '#c0c2d6' }}>{emp.violation_count}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {selectedId && (
+        <EmployeeModal
+          employeeId={selectedId}
+          onClose={() => { setSelectedId(null); load(); }}
+        />
+      )}
+      {showAudit && <AuditLog onClose={() => setShowAudit(false)} />}
+    </>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/DashboardMobile.jsx b/.claude/worktrees/musing-bell/client/src/components/DashboardMobile.jsx
new file mode 100644
index 0000000..cc7f2c1
--- /dev/null
+++ b/.claude/worktrees/musing-bell/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>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/EditEmployeeModal.jsx b/.claude/worktrees/musing-bell/client/src/components/EditEmployeeModal.jsx
new file mode 100644
index 0000000..1d71ed4
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/components/EditEmployeeModal.jsx
@@ -0,0 +1,195 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { DEPARTMENTS } from '../data/departments';
+
+const s = {
+  overlay: {
+    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.8)',
+    zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center',
+  },
+  modal: {
+    background: '#111217', color: '#f8f9fa', width: '480px', maxWidth: '95vw',
+    borderRadius: '10px', boxShadow: '0 8px 40px rgba(0,0,0,0.8)',
+    border: '1px solid #222', overflow: 'hidden',
+  },
+  header: {
+    background: 'linear-gradient(135deg, #000000, #151622)', color: 'white',
+    padding: '18px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+    borderBottom: '1px solid #222',
+  },
+  title: { fontSize: '15px', fontWeight: 700 },
+  closeBtn: {
+    background: 'none', border: 'none', color: 'white', fontSize: '20px',
+    cursor: 'pointer', lineHeight: 1,
+  },
+  body: { padding: '22px' },
+  tabs: { display: 'flex', gap: '4px', marginBottom: '20px' },
+  tab: (active) => ({
+    flex: 1, padding: '8px', borderRadius: '6px', cursor: 'pointer', fontSize: '12px',
+    fontWeight: 700, textAlign: 'center', border: '1px solid',
+    background: active ? '#1a1c2e' : 'none',
+    borderColor: active ? '#667eea' : '#2a2b3a',
+    color: active ? '#667eea' : '#777',
+  }),
+  label: { fontSize: '11px', color: '#9ca0b8', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '5px' },
+  input: {
+    width: '100%', background: '#0d0e14', border: '1px solid #2a2b3a', borderRadius: '6px',
+    color: '#f8f9fa', padding: '9px 12px', fontSize: '13px', marginBottom: '14px',
+    outline: 'none', boxSizing: 'border-box',
+  },
+  select: {
+    width: '100%', background: '#0d0e14', border: '1px solid #2a2b3a', borderRadius: '6px',
+    color: '#f8f9fa', padding: '9px 12px', fontSize: '13px', marginBottom: '14px',
+    outline: 'none', boxSizing: 'border-box',
+  },
+  row: { display: 'flex', gap: '10px', justifyContent: 'flex-end', marginTop: '6px' },
+  btn: (color, bg) => ({
+    padding: '8px 18px', borderRadius: '6px', fontWeight: 700, fontSize: '13px',
+    cursor: 'pointer', border: `1px solid ${color}`, color, background: bg || 'none',
+  }),
+  error: {
+    background: '#3c1114', border: '1px solid #f5c6cb', borderRadius: '6px',
+    padding: '10px 12px', fontSize: '12px', color: '#ffb3b8', marginBottom: '14px',
+  },
+  success: {
+    background: '#0a2e1f', border: '1px solid #0f5132', borderRadius: '6px',
+    padding: '10px 12px', fontSize: '12px', color: '#9ef7c1', marginBottom: '14px',
+  },
+  mergeWarning: {
+    background: '#2a1f00', border: '1px solid #7a5000', borderRadius: '6px',
+    padding: '12px', fontSize: '12px', color: '#ffc107', marginBottom: '14px', lineHeight: 1.5,
+  },
+};
+
+export default function EditEmployeeModal({ employee, onClose, onSaved }) {
+  const [tab, setTab] = useState('edit');
+
+  // Edit state
+  const [name, setName]             = useState(employee.name);
+  const [department, setDepartment] = useState(employee.department || '');
+  const [supervisor, setSupervisor] = useState(employee.supervisor || '');
+  const [editError, setEditError]   = useState('');
+  const [editSaving, setEditSaving] = useState(false);
+
+  // Merge state
+  const [allEmployees, setAllEmployees] = useState([]);
+  const [sourceId, setSourceId]         = useState('');
+  const [mergeError, setMergeError]     = useState('');
+  const [mergeResult, setMergeResult]   = useState(null);
+  const [merging, setMerging]           = useState(false);
+
+  useEffect(() => {
+    if (tab === 'merge') {
+      axios.get('/api/employees').then(r => setAllEmployees(r.data));
+    }
+  }, [tab]);
+
+  const handleEdit = async () => {
+    setEditError('');
+    setEditSaving(true);
+    try {
+      await axios.patch(`/api/employees/${employee.id}`, { name, department, supervisor });
+      onSaved();
+      onClose();
+    } catch (e) {
+      setEditError(e.response?.data?.error || 'Failed to save changes');
+    } finally {
+      setEditSaving(false);
+    }
+  };
+
+  const handleMerge = async () => {
+    if (!sourceId) return setMergeError('Select an employee to merge in');
+    setMergeError('');
+    setMerging(true);
+    try {
+      const r = await axios.post(`/api/employees/${employee.id}/merge`, { source_id: parseInt(sourceId) });
+      setMergeResult(r.data);
+      onSaved(); // refresh dashboard / parent list
+    } catch (e) {
+      setMergeError(e.response?.data?.error || 'Merge failed');
+    } finally {
+      setMerging(false);
+    }
+  };
+
+  const otherEmployees = allEmployees.filter(e => e.id !== employee.id);
+
+  return (
+    <div style={s.overlay} onClick={e => e.target === e.currentTarget && onClose()}>
+      <div style={s.modal}>
+        <div style={s.header}>
+          <div style={s.title}>Edit Employee</div>
+          <button style={s.closeBtn} onClick={onClose}>✕</button>
+        </div>
+        <div style={s.body}>
+          <div style={s.tabs}>
+            <button style={s.tab(tab === 'edit')}  onClick={() => setTab('edit')}>Edit Details</button>
+            <button style={s.tab(tab === 'merge')} onClick={() => setTab('merge')}>Merge Duplicate</button>
+          </div>
+
+          {tab === 'edit' && (
+            <>
+              {editError && <div style={s.error}>{editError}</div>}
+              <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>
+              <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}>
+                <button style={s.btn('#888')} onClick={onClose}>Cancel</button>
+                <button style={s.btn('#fff', '#667eea')} onClick={handleEdit} disabled={editSaving}>
+                  {editSaving ? 'Saving…' : 'Save Changes'}
+                </button>
+              </div>
+            </>
+          )}
+
+          {tab === 'merge' && (
+            <>
+              {mergeResult ? (
+                <div style={s.success}>
+                  ✓ Merge complete — {mergeResult.violations_reassigned} violation{mergeResult.violations_reassigned !== 1 ? 's' : ''} reassigned
+                  to <strong>{employee.name}</strong>. The duplicate record has been removed.
+                </div>
+              ) : (
+                <>
+                  <div style={s.mergeWarning}>
+                    ⚠ This will reassign <strong>all violations</strong> from the selected employee into{' '}
+                    <strong>{employee.name}</strong>, then permanently delete the duplicate record.
+                    This cannot be undone.
+                  </div>
+                  {mergeError && <div style={s.error}>{mergeError}</div>}
+                  <div style={s.label}>Duplicate to merge into {employee.name}</div>
+                  <select style={s.select} value={sourceId} onChange={e => setSourceId(e.target.value)}>
+                    <option value="">— select employee —</option>
+                    {otherEmployees.map(e => (
+                      <option key={e.id} value={e.id}>{e.name}{e.department ? ` (${e.department})` : ''}</option>
+                    ))}
+                  </select>
+                  <div style={s.row}>
+                    <button style={s.btn('#888')} onClick={onClose}>Cancel</button>
+                    <button style={s.btn('#fff', '#c0392b')} onClick={handleMerge} disabled={merging || !sourceId}>
+                      {merging ? 'Merging…' : 'Merge & Delete Duplicate'}
+                    </button>
+                  </div>
+                </>
+              )}
+              {mergeResult && (
+                <div style={s.row}>
+                  <button style={s.btn('#fff', '#667eea')} onClick={onClose}>Done</button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/EmployeeModal.jsx b/.claude/worktrees/musing-bell/client/src/components/EmployeeModal.jsx
new file mode 100644
index 0000000..e5d9d4f
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/components/EmployeeModal.jsx
@@ -0,0 +1,443 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import axios from 'axios';
+import CpasBadge, { getTier } from './CpasBadge';
+import NegateModal from './NegateModal';
+import EditEmployeeModal from './EditEmployeeModal';
+import AmendViolationModal from './AmendViolationModal';
+import ExpirationTimeline from './ExpirationTimeline';
+import EmployeeNotes from './EmployeeNotes';
+import { useToast } from './ToastProvider';
+
+const s = {
+  overlay: {
+    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)',
+    zIndex: 1000, display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end',
+  },
+  panel: {
+    background: '#111217', color: '#f8f9fa', width: '680px', maxWidth: '95vw',
+    height: '100vh', overflowY: 'auto', boxShadow: '-4px 0 24px rgba(0,0,0,0.7)',
+    display: 'flex', flexDirection: 'column',
+  },
+  header: {
+    background: 'linear-gradient(135deg, #000000, #151622)', color: 'white',
+    padding: '24px 28px', position: 'sticky', top: 0, zIndex: 10,
+    borderBottom: '1px solid #222',
+  },
+  headerRow: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' },
+  closeBtn: {
+    float: 'right', background: 'none', border: 'none', color: 'white',
+    fontSize: '22px', cursor: 'pointer', lineHeight: 1, marginTop: '-2px',
+  },
+  editEmpBtn: {
+    background: 'none', border: '1px solid #555', color: '#ccc', borderRadius: '5px',
+    padding: '4px 10px', fontSize: '11px', cursor: 'pointer', marginTop: '8px', fontWeight: 600,
+  },
+  body: { padding: '24px 28px', flex: 1 },
+  scoreRow: { display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '24px' },
+  scoreCard: {
+    flex: '1', minWidth: '100px', background: '#181924', borderRadius: '8px',
+    padding: '14px', textAlign: 'center', border: '1px solid #2a2b3a',
+  },
+  scoreNum: { fontSize: '26px', fontWeight: 800 },
+  scoreLbl: { fontSize: '11px', color: '#b5b5c0', marginTop: '3px' },
+  sectionHd: {
+    fontSize: '13px', fontWeight: 700, color: '#f8f9fa', textTransform: 'uppercase',
+    letterSpacing: '0.5px', marginBottom: '10px', marginTop: '24px',
+  },
+  table: {
+    width: '100%', borderCollapse: 'collapse', fontSize: '12px', background: '#181924',
+    borderRadius: '6px', overflow: 'hidden', border: '1px solid #2a2b3a',
+  },
+  th: {
+    background: '#050608', padding: '8px 10px', textAlign: 'left', color: '#f8f9fa',
+    fontWeight: 600, fontSize: '11px', textTransform: 'uppercase',
+  },
+  td: {
+    padding: '9px 10px', borderBottom: '1px solid #202231',
+    verticalAlign: 'top', color: '#f8f9fa',
+  },
+  negatedRow: { background: '#151622', color: '#9ca0b8' },
+  actionBtn: (color) => ({
+    background: 'none', border: `1px solid ${color}`, color,
+    borderRadius: '4px', padding: '3px 8px', fontSize: '11px',
+    cursor: 'pointer', marginRight: '4px', fontWeight: 600,
+  }),
+  resTag: {
+    display: 'inline-block', padding: '2px 8px', borderRadius: '10px',
+    fontSize: '10px', fontWeight: 700, background: '#053321',
+    color: '#9ef7c1', border: '1px solid #0f5132',
+  },
+  pdfBtn: {
+    background: 'none', border: '1px solid #d4af37', color: '#ffd666',
+    borderRadius: '4px', padding: '3px 8px', fontSize: '11px',
+    cursor: 'pointer', fontWeight: 600,
+  },
+  amendBtn: {
+    background: 'none', border: '1px solid #4db6ac', color: '#4db6ac',
+    borderRadius: '4px', padding: '3px 8px', fontSize: '11px',
+    cursor: 'pointer', marginRight: '4px', fontWeight: 600,
+  },
+  deleteConfirm: {
+    background: '#3c1114', border: '1px solid #f5c6cb', borderRadius: '6px',
+    padding: '12px', marginTop: '8px', fontSize: '12px', color: '#ffb3b8',
+  },
+  amendBadge: {
+    display: 'inline-block', marginLeft: '4px', padding: '1px 5px', borderRadius: '8px',
+    fontSize: '9px', fontWeight: 700, background: '#0e2a2a', color: '#4db6ac',
+    border: '1px solid #1a4a4a', verticalAlign: 'middle',
+  },
+};
+
+export default function EmployeeModal({ employeeId, onClose }) {
+  const [employee,   setEmployee]   = useState(null);
+  const [score,      setScore]      = useState(null);
+  const [violations, setViolations] = useState([]);
+  const [loading,    setLoading]    = useState(true);
+  const [negating,   setNegating]   = useState(null);
+  const [confirmDel, setConfirmDel] = useState(null);
+  const [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}/score`),
+      axios.get(`/api/violations/employee/${employeeId}?limit=100`),
+    ])
+      .then(([empRes, scoreRes, violRes]) => {
+        const emp = empRes.data.find((e) => e.id === employeeId);
+        setEmployee(emp || null);
+        setScore(scoreRes.data);
+        setViolations(violRes.data);
+      })
+      .finally(() => setLoading(false));
+  }, [employeeId]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const handleDownloadPdf = async (violId, empName, date) => {
+    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) => {
+    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) => {
+    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 }) => {
+    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;
+  const active  = violations.filter((v) => !v.negated);
+  const negated = violations.filter((v) => v.negated);
+
+  const handleOverlayClick = (e) => { if (e.target === e.currentTarget) onClose(); };
+
+  return (
+    <div style={s.overlay} onClick={handleOverlayClick}>
+      <div style={s.panel} onClick={(e) => e.stopPropagation()}>
+
+        {/* ── Header ── */}
+        <div style={s.header}>
+          <div style={s.headerRow}>
+            <div>
+              <div style={{ fontSize: '18px', fontWeight: 700 }}>
+                {employee ? employee.name : 'Employee'}
+              </div>
+              {employee && (
+                <div style={{ fontSize: '12px', color: '#b5b5c0', marginTop: '4px' }}>
+                  {employee.department} {employee.supervisor && `· Supervisor: ${employee.supervisor}`}
+                </div>
+              )}
+              {employee && (
+                <button style={s.editEmpBtn} onClick={() => setEditingEmp(true)}>
+                  ✎ Edit Employee
+                </button>
+              )}
+            </div>
+            <button style={s.closeBtn} onClick={onClose}>✕</button>
+          </div>
+        </div>
+
+        {/* ── Body ── */}
+        <div style={s.body}>
+          {loading ? (
+            <div style={{ padding: '40px', textAlign: 'center', color: '#b5b5c0' }}>Loading…</div>
+          ) : (
+            <>
+              {/* Score Cards */}
+              {score && (
+                <div style={s.scoreRow}>
+                  <div style={s.scoreCard}>
+                    <div style={{ ...s.scoreNum, color: tier?.color || '#f8f9fa' }}>
+                      {score.active_points}
+                    </div>
+                    <div style={s.scoreLbl}>Active Points</div>
+                  </div>
+                  <div style={s.scoreCard}>
+                    <div style={s.scoreNum}>{score.total_violations}</div>
+                    <div style={s.scoreLbl}>Total Violations</div>
+                  </div>
+                  <div style={s.scoreCard}>
+                    <div style={s.scoreNum}>{score.negated_count}</div>
+                    <div style={s.scoreLbl}>Negated</div>
+                  </div>
+                  <div style={{ ...s.scoreCard, minWidth: '140px' }}>
+                    <div style={{ fontSize: '13px', fontWeight: 700, color: tier?.color || '#f8f9fa' }}>
+                      {tier ? tier.label : '—'}
+                    </div>
+                    <div style={s.scoreLbl}>Current Tier</div>
+                  </div>
+                </div>
+              )}
+              {score && <CpasBadge points={score.active_points} style={{ marginBottom: '20px' }} />}
+
+              {/* ── Employee Notes ── */}
+              {employee && (
+                <EmployeeNotes
+                  employeeId={employeeId}
+                  initialNotes={employee.notes}
+                  onSaved={(notes) => setEmployee(prev => ({ ...prev, notes }))}
+                />
+              )}
+
+              {/* ── Expiration Timeline ── */}
+              {score && score.active_points > 0 && (
+                <ExpirationTimeline
+                  employeeId={employeeId}
+                  currentPoints={score.active_points}
+                />
+              )}
+
+              {/* ── Active Violations ── */}
+              <div style={s.sectionHd}>Active Violations</div>
+              {active.length === 0 ? (
+                <div style={{ color: '#777990', fontStyle: 'italic', fontSize: '12px' }}>
+                  No active violations on record.
+                </div>
+              ) : (
+                <table style={s.table}>
+                  <thead>
+                    <tr>
+                      <th style={s.th}>Date</th>
+                      <th style={s.th}>Violation</th>
+                      <th style={s.th}>Pts</th>
+                      <th style={s.th}>Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {active.map((v) => (
+                      <tr key={v.id}>
+                        <td style={s.td}>{v.incident_date}</td>
+                        <td style={s.td}>
+                          <div style={{ fontWeight: 600 }}>
+                            {v.violation_name}
+                            {v.amendment_count > 0 && (
+                              <span style={s.amendBadge}>{v.amendment_count} edit{v.amendment_count !== 1 ? 's' : ''}</span>
+                            )}
+                          </div>
+                          <div style={{ fontSize: '10px', color: '#9ca0b8' }}>{v.category}</div>
+                          {v.details && (
+                            <div style={{ fontSize: '10px', color: '#b5b5c0', marginTop: '2px' }}>{v.details}</div>
+                          )}
+                        </td>
+                        <td style={{ ...s.td, fontWeight: 700 }}>{v.points}</td>
+                        <td style={s.td}>
+                          <button style={s.amendBtn} onClick={(e) => { e.stopPropagation(); setAmending(v); }}>
+                            Amend
+                          </button>
+                          <button
+                            style={s.actionBtn('#ffc107')}
+                            onClick={(e) => { e.stopPropagation(); setNegating(v); setConfirmDel(null); }}
+                          >
+                            Negate
+                          </button>
+                          <button
+                            style={s.actionBtn('#ff4d4f')}
+                            onClick={(e) => { e.stopPropagation(); setConfirmDel(confirmDel === v.id ? null : v.id); }}
+                          >
+                            {confirmDel === v.id ? 'Cancel' : 'Delete'}
+                          </button>
+                          <button
+                            style={s.pdfBtn}
+                            onClick={(e) => { e.stopPropagation(); handleDownloadPdf(v.id, employee?.name, v.incident_date); }}
+                          >
+                            PDF
+                          </button>
+                          {confirmDel === v.id && (
+                            <div style={s.deleteConfirm}>
+                              Permanently delete? This cannot be undone.
+                              <div style={{ marginTop: '8px' }}>
+                                <button
+                                  style={s.actionBtn('#ff4d4f')}
+                                  onClick={(e) => { e.stopPropagation(); handleHardDelete(v.id); }}
+                                >
+                                  Confirm Delete
+                                </button>
+                                <button
+                                  style={s.actionBtn('#888')}
+                                  onClick={(e) => { e.stopPropagation(); setConfirmDel(null); }}
+                                >
+                                  Cancel
+                                </button>
+                              </div>
+                            </div>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+
+              {/* ── Negated / Resolved Violations ── */}
+              {negated.length > 0 && (
+                <>
+                  <div style={s.sectionHd}>Negated / Resolved</div>
+                  <table style={s.table}>
+                    <thead>
+                      <tr>
+                        <th style={s.th}>Date</th>
+                        <th style={s.th}>Violation</th>
+                        <th style={s.th}>Pts</th>
+                        <th style={s.th}>Resolution</th>
+                        <th style={s.th}>Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {negated.map((v) => (
+                        <tr key={v.id} style={s.negatedRow}>
+                          <td style={s.td}>{v.incident_date}</td>
+                          <td style={s.td}>
+                            <div style={{ fontWeight: 600 }}>{v.violation_name}</div>
+                            <div style={{ fontSize: '10px', color: '#9ca0b8' }}>{v.category}</div>
+                          </td>
+                          <td style={s.td}>{v.points}</td>
+                          <td style={s.td}>
+                            <span style={s.resTag}>{v.resolution_type}</span>
+                            {v.resolution_details && (
+                              <div style={{ fontSize: '10px', color: '#b5b5c0', marginTop: '2px' }}>
+                                {v.resolution_details}
+                              </div>
+                            )}
+                            {v.resolved_by && (
+                              <div style={{ fontSize: '10px', color: '#9ca0b8' }}>by {v.resolved_by}</div>
+                            )}
+                          </td>
+                          <td style={s.td}>
+                            <button
+                              style={s.actionBtn('#4db6ac')}
+                              onClick={(e) => { e.stopPropagation(); handleRestore(v.id); }}
+                            >
+                              Restore
+                            </button>
+                            <button
+                              style={s.actionBtn('#ff4d4f')}
+                              onClick={(e) => { e.stopPropagation(); setConfirmDel(confirmDel === v.id ? null : v.id); }}
+                            >
+                              {confirmDel === v.id ? 'Cancel' : 'Delete'}
+                            </button>
+                            <button
+                              style={s.pdfBtn}
+                              onClick={(e) => { e.stopPropagation(); handleDownloadPdf(v.id, employee?.name, v.incident_date); }}
+                            >
+                              PDF
+                            </button>
+                            {confirmDel === v.id && (
+                              <div style={s.deleteConfirm}>
+                                Permanently delete? This cannot be undone.
+                                <div style={{ marginTop: '8px' }}>
+                                  <button
+                                    style={s.actionBtn('#ff4d4f')}
+                                    onClick={(e) => { e.stopPropagation(); handleHardDelete(v.id); }}
+                                  >
+                                    Confirm Delete
+                                  </button>
+                                  <button
+                                    style={s.actionBtn('#888')}
+                                    onClick={(e) => { e.stopPropagation(); setConfirmDel(null); }}
+                                  >
+                                    Cancel
+                                  </button>
+                                </div>
+                              </div>
+                            )}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Modals rendered outside panel to avoid z-index nesting issues */}
+      {negating && (
+        <NegateModal
+          violation={negating}
+          onConfirm={handleNegate}
+          onCancel={() => setNegating(null)}
+        />
+      )}
+      {editingEmp && employee && (
+        <EditEmployeeModal
+          employee={employee}
+          onClose={() => setEditingEmp(false)}
+          onSaved={() => { toast.success('Employee updated.'); load(); }}
+        />
+      )}
+      {amending && (
+        <AmendViolationModal
+          violation={amending}
+          onClose={() => setAmending(null)}
+          onSaved={() => { toast.success('Violation amended.'); load(); }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/EmployeeNotes.jsx b/.claude/worktrees/musing-bell/client/src/components/EmployeeNotes.jsx
new file mode 100644
index 0000000..26cf619
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/components/EmployeeNotes.jsx
@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const s = {
+  wrapper: { marginTop: '20px' },
+  sectionHd: {
+    fontSize: '13px', fontWeight: 700, color: '#f8f9fa', textTransform: 'uppercase',
+    letterSpacing: '0.5px', marginBottom: '8px',
+  },
+  display: {
+    background: '#181924', border: '1px solid #2a2b3a', borderRadius: '6px',
+    padding: '10px 12px', fontSize: '13px', color: '#f8f9fa', minHeight: '36px',
+    cursor: 'pointer', position: 'relative',
+  },
+  displayEmpty: {
+    color: '#555770', fontStyle: 'italic',
+  },
+  editHint: {
+    position: 'absolute', right: '8px', top: '8px',
+    fontSize: '10px', color: '#555770',
+  },
+  textarea: {
+    width: '100%', background: '#0d1117', border: '1px solid #4d6fa8',
+    borderRadius: '6px', color: '#f8f9fa', fontSize: '13px',
+    padding: '10px 12px', resize: 'vertical', minHeight: '80px',
+    boxSizing: 'border-box', fontFamily: 'inherit', outline: 'none',
+  },
+  actions: { display: 'flex', gap: '8px', marginTop: '8px' },
+  saveBtn: {
+    background: '#1a3a6b', border: '1px solid #4d6fa8', color: '#90caf9',
+    borderRadius: '5px', padding: '5px 14px', fontSize: '12px',
+    cursor: 'pointer', fontWeight: 600,
+  },
+  cancelBtn: {
+    background: 'none', border: '1px solid #444', color: '#888',
+    borderRadius: '5px', padding: '5px 14px', fontSize: '12px',
+    cursor: 'pointer',
+  },
+  saving: { fontSize: '12px', color: '#9ca0b8', alignSelf: 'center' },
+  tagRow: { display: 'flex', flexWrap: 'wrap', gap: '6px', marginBottom: '8px' },
+  tag: {
+    display: 'inline-block', padding: '2px 8px', borderRadius: '10px',
+    fontSize: '11px', fontWeight: 600, background: '#1a2a3a',
+    color: '#90caf9', border: '1px solid #2a3a5a', cursor: 'default',
+  },
+};
+
+// Quick-add tags for common HR flags
+const QUICK_TAGS = ['On PIP', 'Union member', 'Probationary', 'Pending investigation', 'FMLA', 'ADA'];
+
+export default function EmployeeNotes({ employeeId, initialNotes, onSaved }) {
+  const [editing, setEditing] = useState(false);
+  const [draft,   setDraft]   = useState(initialNotes || '');
+  const [saved,   setSaved]   = useState(initialNotes || '');
+  const [saving,  setSaving]  = useState(false);
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await axios.patch(`/api/employees/${employeeId}/notes`, { notes: draft });
+      setSaved(draft);
+      setEditing(false);
+      if (onSaved) onSaved(draft);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setDraft(saved);
+    setEditing(false);
+  };
+
+  const addTag = (tag) => {
+    const current = draft.trim();
+    // Don't add a tag that's already present
+    if (current.includes(tag)) return;
+    setDraft(current ? `${current}\n${tag}` : tag);
+  };
+
+  // Parse saved notes into display lines
+  const lines = saved ? saved.split('\n').filter(Boolean) : [];
+
+  return (
+    <div style={s.wrapper}>
+      <div style={s.sectionHd}>Notes &amp; Flags</div>
+
+      {!editing ? (
+        <div
+          style={s.display}
+          onClick={() => { setDraft(saved); setEditing(true); }}
+          title="Click to edit"
+        >
+          <span style={s.editHint}>✎ edit</span>
+          {lines.length === 0 ? (
+            <span style={s.displayEmpty}>No notes — click to add</span>
+          ) : (
+            <div style={s.tagRow}>
+              {lines.map((line, i) => (
+                <span key={i} style={s.tag}>{line}</span>
+              ))}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div>
+          {/* Quick-add tag buttons */}
+          <div style={{ ...s.tagRow, marginBottom: '6px' }}>
+            {QUICK_TAGS.map(tag => (
+              <button
+                key={tag}
+                style={{
+                  ...s.tag,
+                  cursor: 'pointer',
+                  background: draft.includes(tag) ? '#0e2a3a' : '#1a2a3a',
+                  opacity: draft.includes(tag) ? 0.5 : 1,
+                }}
+                onClick={() => addTag(tag)}
+                title="Add tag"
+              >
+                + {tag}
+              </button>
+            ))}
+          </div>
+
+          <textarea
+            style={s.textarea}
+            value={draft}
+            onChange={e => setDraft(e.target.value)}
+            placeholder="Free-text notes — one per line or comma-separated. Does not affect CPAS scoring."
+            autoFocus
+          />
+          <div style={s.actions}>
+            <button style={s.saveBtn} onClick={handleSave} disabled={saving}>
+              {saving ? 'Saving…' : 'Save Notes'}
+            </button>
+            <button style={s.cancelBtn} onClick={handleCancel} disabled={saving}>
+              Cancel
+            </button>
+            {saving && <span style={s.saving}>Saving…</span>}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/ExpirationTimeline.jsx b/.claude/worktrees/musing-bell/client/src/components/ExpirationTimeline.jsx
new file mode 100644
index 0000000..37ca0ef
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/components/ExpirationTimeline.jsx
@@ -0,0 +1,159 @@
+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.
+const TIER_THRESHOLDS = [
+  { min: 30, label: 'Separation',            color: '#ff1744' },
+  { min: 25, label: 'Final Decision',        color: '#ff6d00' },
+  { min: 20, label: 'Risk Mitigation',       color: '#ff9100' },
+  { min: 15, label: 'Verification',          color: '#ffc400' },
+  { min: 10, label: 'Administrative Lockdown', color: '#ffea00' },
+  { min: 5,  label: 'Realignment',           color: '#b2ff59' },
+  { min: 0,  label: 'Elite Standing',        color: '#69f0ae' },
+];
+
+function getTier(pts) {
+  return TIER_THRESHOLDS.find(t => pts >= t.min) || TIER_THRESHOLDS[TIER_THRESHOLDS.length - 1];
+}
+
+function urgencyColor(days) {
+  if (days <= 7)  return '#ff4d4f';
+  if (days <= 14) return '#ffa940';
+  if (days <= 30) return '#fadb14';
+  return '#52c41a';
+}
+
+const s = {
+  wrapper: { marginTop: '24px' },
+  sectionHd: {
+    fontSize: '13px', fontWeight: 700, color: '#f8f9fa', textTransform: 'uppercase',
+    letterSpacing: '0.5px', marginBottom: '10px',
+  },
+  empty: { color: '#777990', fontStyle: 'italic', fontSize: '12px' },
+  row: {
+    display: 'flex', alignItems: 'center', gap: '12px',
+    padding: '10px 12px', background: '#181924', borderRadius: '6px',
+    border: '1px solid #2a2b3a', marginBottom: '6px',
+  },
+  bar: (pct, color) => ({
+    flex: 1, height: '6px', background: '#2a2b3a', borderRadius: '3px', overflow: 'hidden',
+    position: 'relative',
+  }),
+  barFill: (pct, color) => ({
+    position: 'absolute', left: 0, top: 0, bottom: 0,
+    width: `${Math.min(100, Math.max(0, 100 - pct))}%`,
+    background: color, borderRadius: '3px',
+    transition: 'width 0.3s ease',
+  }),
+  pill: (color) => ({
+    display: 'inline-block', padding: '2px 8px', borderRadius: '10px',
+    fontSize: '11px', fontWeight: 700, background: `${color}22`,
+    color, border: `1px solid ${color}55`, whiteSpace: 'nowrap',
+  }),
+  pts: { fontSize: '13px', fontWeight: 700, color: '#f8f9fa', minWidth: '28px', textAlign: 'right' },
+  name: { fontSize: '12px', color: '#f8f9fa', fontWeight: 600, flex: '0 0 160px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+  date: { fontSize: '11px', color: '#9ca0b8', minWidth: '88px' },
+  projBox: {
+    marginTop: '16px', padding: '12px 14px', background: '#0d1117',
+    border: '1px solid #2a2b3a', borderRadius: '6px', fontSize: '12px', color: '#b5b5c0',
+  },
+  projRow: { display: 'flex', justifyContent: 'space-between', marginBottom: '4px' },
+};
+
+export default function ExpirationTimeline({ employeeId, currentPoints }) {
+  const [items,   setItems]   = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    axios.get(`/api/employees/${employeeId}/expiration`)
+      .then(r => setItems(r.data))
+      .finally(() => setLoading(false));
+  }, [employeeId]);
+
+  if (loading) return (
+    <div style={s.wrapper}>
+      <div style={s.sectionHd}>Point Expiration Timeline</div>
+      <div style={{ ...s.empty }}>Loading…</div>
+    </div>
+  );
+
+  if (items.length === 0) return (
+    <div style={s.wrapper}>
+      <div style={s.sectionHd}>Point Expiration Timeline</div>
+      <div style={s.empty}>No active violations — nothing to expire.</div>
+    </div>
+  );
+
+  // Build running totals: after each violation expires, what's the remaining score?
+  let running = currentPoints || 0;
+  const projected = items.map(item => {
+    const before = running;
+    running = Math.max(0, running - item.points);
+    const tierBefore = getTier(before);
+    const tierAfter  = getTier(running);
+    const dropped    = tierAfter.min < tierBefore.min;
+    return { ...item, pointsBefore: before, pointsAfter: running, tierBefore, tierAfter, tierDropped: dropped };
+  });
+
+  return (
+    <div style={s.wrapper}>
+      <div style={s.sectionHd}>Point Expiration Timeline</div>
+
+      {projected.map((item) => {
+        const color = urgencyColor(item.days_remaining);
+        const pct   = (item.days_remaining / 90) * 100;
+        return (
+          <div key={item.id} style={s.row}>
+            {/* Violation name */}
+            <div style={s.name} title={item.violation_name}>{item.violation_name}</div>
+
+            {/* Points badge */}
+            <div style={s.pts}>−{item.points}</div>
+
+            {/* Progress bar: how much of the 90 days has elapsed */}
+            <div style={s.bar(pct, color)}>
+              <div style={s.barFill(pct, color)} />
+            </div>
+
+            {/* Days remaining pill */}
+            <div style={s.pill(color)}>
+              {item.days_remaining <= 0 ? 'Expiring today' : `${item.days_remaining}d`}
+            </div>
+
+            {/* Expiry date */}
+            <div style={s.date}>{item.expires_on}</div>
+
+            {/* Tier drop indicator */}
+            {item.tierDropped && (
+              <div style={{ fontSize: '10px', color: '#69f0ae', whiteSpace: 'nowrap' }}>
+                ↓ {item.tierAfter.label}
+              </div>
+            )}
+          </div>
+        );
+      })}
+
+      {/* Projection summary */}
+      <div style={s.projBox}>
+        <div style={{ fontWeight: 700, color: '#f8f9fa', marginBottom: '8px', fontSize: '12px' }}>
+          Projected score after each expiration
+        </div>
+        {projected.map((item, i) => (
+          <div key={item.id} style={s.projRow}>
+            <span style={{ color: '#9ca0b8' }}>{item.expires_on} — {item.violation_name}</span>
+            <span>
+              <span style={{ color: '#f8f9fa', fontWeight: 700 }}>{item.pointsAfter} pts</span>
+              {item.tierDropped && (
+                <span style={{ marginLeft: '8px', color: item.tierAfter.color, fontWeight: 700 }}>
+                  → {item.tierAfter.label}
+                </span>
+              )}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/NegateModal.jsx b/.claude/worktrees/musing-bell/client/src/components/NegateModal.jsx
new file mode 100644
index 0000000..6140164
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/components/NegateModal.jsx
@@ -0,0 +1,138 @@
+import React, { useState } from 'react';
+
+const s = {
+  overlay: {
+    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)',
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+    zIndex: 2000,
+  },
+  modal: {
+    width: '480px', maxWidth: '95vw', background: '#111217', borderRadius: '12px',
+    boxShadow: '0 16px 40px rgba(0,0,0,0.8)', color: '#f8f9fa',
+    overflow: 'hidden', border: '1px solid #2a2b3a',
+  },
+  header: {
+    padding: '18px 24px', borderBottom: '1px solid #222',
+    background: 'linear-gradient(135deg, #000000, #151622)',
+  },
+  title: { fontSize: '18px', fontWeight: 700 },
+  subtitle: { fontSize: '12px', color: '#c0c2d6', marginTop: '4px' },
+  body: { padding: '18px 24px 8px 24px' },
+  pill: {
+    background: '#3b2e00', borderRadius: '6px', padding: '8px 10px',
+    fontSize: '12px', color: '#ffd666', border: '1px solid #d4af37', marginBottom: '14px',
+  },
+  label: { fontSize: '13px', fontWeight: 600, marginBottom: '4px', color: '#e5e7f1' },
+  input: {
+    width: '100%', padding: '9px 10px', borderRadius: '6px',
+    border: '1px solid #333544', background: '#050608', color: '#f8f9fa',
+    fontSize: '13px', fontFamily: 'inherit', marginBottom: '14px',
+    boxSizing: 'border-box',
+  },
+  textarea: {
+    width: '100%', minHeight: '80px', resize: 'vertical',
+    padding: '9px 10px', borderRadius: '6px', border: '1px solid #333544',
+    background: '#050608', color: '#f8f9fa', fontSize: '13px',
+    fontFamily: 'inherit', marginBottom: '14px', boxSizing: 'border-box',
+  },
+  footer: {
+    display: 'flex', justifyContent: 'flex-end', gap: '10px',
+    padding: '16px 24px 20px 24px', background: '#0c0d14', borderTop: '1px solid #222',
+  },
+  btnCancel: {
+    padding: '10px 20px', borderRadius: '6px', border: '1px solid #333544',
+    background: '#050608', color: '#f8f9fa', fontWeight: 600,
+    fontSize: '13px', cursor: 'pointer',
+  },
+  btnConfirm: {
+    padding: '10px 22px', borderRadius: '6px', border: 'none',
+    background: 'linear-gradient(135deg, #d4af37 0%, #ffdf8a 100%)',
+    color: '#000', fontWeight: 700, fontSize: '13px',
+    cursor: 'pointer', textTransform: 'uppercase',
+  },
+};
+
+const RESOLUTION_OPTIONS = [
+  'Corrective Training Completed',
+  'Verbal Warning Issued',
+  'Written Warning Issued',
+  'Management Review',
+  'Policy Exception Approved',
+  'Data Entry Error',
+  'Other',
+];
+
+export default function NegateModal({ violation, onConfirm, onCancel }) {
+  const [resolutionType, setResolutionType] = useState('Corrective Training Completed');
+  const [details, setDetails] = useState('');
+  const [resolvedBy, setResolvedBy] = useState('');
+
+  if (!violation) return null;
+
+  const handleConfirm = () => {
+    if (!onConfirm) return;
+    onConfirm({
+      resolution_type: resolutionType,
+      details,
+      resolved_by: resolvedBy,
+    });
+  };
+
+  // FIX: overlay click only closes on backdrop, NOT modal children
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget && onCancel) onCancel();
+  };
+
+  return (
+    <div style={s.overlay} onClick={handleOverlayClick}>
+      {/* FIX: stopPropagation prevents modal clicks from bubbling to overlay */}
+      <div style={s.modal} onClick={(e) => e.stopPropagation()}>
+
+        <div style={s.header}>
+          <div style={s.title}>Negate Violation</div>
+          <div style={s.subtitle}>
+            Record resolution for: <strong>{violation.violation_name}</strong>
+          </div>
+        </div>
+
+        <div style={s.body}>
+          <div style={s.pill}>
+            ⚠ {violation.points} pt{violation.points !== 1 ? 's' : ''} · {violation.incident_date} · {violation.category}
+          </div>
+
+          <div style={s.label}>Resolution Type</div>
+          <select
+            style={s.input}
+            value={resolutionType}
+            onChange={(e) => setResolutionType(e.target.value)}
+          >
+            {RESOLUTION_OPTIONS.map((opt) => (
+              <option key={opt} value={opt}>{opt}</option>
+            ))}
+          </select>
+
+          <div style={s.label}>Details / Notes</div>
+          <textarea
+            style={s.textarea}
+            placeholder="Describe the resolution or context…"
+            value={details}
+            onChange={(e) => setDetails(e.target.value)}
+          />
+
+          <div style={s.label}>Resolved By</div>
+          <input
+            style={s.input}
+            placeholder="Manager or HR name…"
+            value={resolvedBy}
+            onChange={(e) => setResolvedBy(e.target.value)}
+          />
+        </div>
+
+        <div style={s.footer}>
+          <button style={s.btnCancel} onClick={onCancel}>Cancel</button>
+          <button style={s.btnConfirm} onClick={handleConfirm}>Confirm Negation</button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/ReadmeModal.jsx b/.claude/worktrees/musing-bell/client/src/components/ReadmeModal.jsx
new file mode 100644
index 0000000..fee0a27
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/components/ReadmeModal.jsx
@@ -0,0 +1,340 @@
+import React, { useEffect, useRef } from 'react';
+
+// Minimal Markdown to HTML renderer (headings, bold, inline-code, tables, hr, ul, ol, paragraphs)
+function mdToHtml(md) {
+  const lines = md.split('\n');
+  const out   = [];
+  let i = 0, inUl = false, inOl = false, inTable = false;
+
+  const close = () => {
+    if (inUl)    { out.push('</ul>');              inUl    = false; }
+    if (inOl)    { out.push('</ol>');              inOl    = false; }
+    if (inTable) { out.push('</tbody></table>');   inTable = false; }
+  };
+  const inline = s =>
+    s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+     .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
+     .replace(/`([^`]+)`/g,'<code>$1</code>');
+
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line.startsWith('```')) { close(); i++; while (i < lines.length && !lines[i].startsWith('```')) i++; i++; continue; }
+    if (/^---+$/.test(line.trim())) { close(); out.push('<hr>'); i++; continue; }
+    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; }
+      else { out.push('<tr>'); cells.forEach(c=>out.push(`<td>${inline(c)}</td>`)); out.push('</tr>'); i++; continue; }
+    }
+    const ul = line.match(/^[-*]\s+(.*)/);
+    if (ul) { if (inTable) close(); if (!inUl) { if (inOl){out.push('</ol>');inOl=false;} out.push('<ul>');inUl=true; } out.push(`<li>${inline(ul[1])}</li>`); i++; continue; }
+    const ol = line.match(/^\d+\.\s+(.*)/);
+    if (ol) { if (inTable) close(); if (!inOl) { if (inUl){out.push('</ul>');inUl=false;} out.push('<ol>');inOl=true; } out.push(`<li>${inline(ol[1])}</li>`); i++; continue; }
+    if (line.trim() === '') { close(); i++; continue; }
+    close(); out.push(`<p>${inline(line)}</p>`); i++;
+  }
+  close();
+  return out.join('\n');
+}
+
+function buildToc(md) {
+  return md.split('\n').reduce((acc, line) => {
+    const m = line.match(/^(#{1,2})\s+(.+)/);
+    if (m) acc.push({ level: m[1].length, text: m[2], id: m[2].toLowerCase().replace(/[^a-z0-9]+/g,'-') });
+    return acc;
+  }, []);
+}
+
+// ——— 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' },
+  header:  { background:'linear-gradient(135deg,#000000,#151622)', color:'white', padding:'22px 28px', position:'sticky', top:0, zIndex:10, borderBottom:'1px solid #222', display:'flex', alignItems:'center', justifyContent:'space-between' },
+  closeBtn:{ background:'none', border:'none', color:'white', fontSize:'22px', cursor:'pointer', lineHeight:1 },
+  toc:     { background:'#0d1117', borderBottom:'1px solid #1e1f2e', padding:'10px 32px', display:'flex', flexWrap:'wrap', gap:'4px 18px', fontSize:'11px' },
+  body:    { padding:'28px 32px', flex:1, fontSize:'13px', lineHeight:'1.75' },
+  footer:  { padding:'14px 32px', borderTop:'1px solid #1e1f2e', fontSize:'11px', color:'#555770', textAlign:'center' },
+};
+
+const CSS = `
+.adm h1 { font-size:21px; font-weight:800; color:#f8f9fa; margin:28px 0 10px; border-bottom:1px solid #2a2b3a; padding-bottom:8px }
+.adm h2 { font-size:16px; font-weight:700; color:#d4af37; margin:28px 0 6px; letter-spacing:.2px }
+.adm h3 { font-size:12px; font-weight:700; color:#90caf9; margin:18px 0 4px; text-transform:uppercase; letter-spacing:.5px }
+.adm h4 { font-size:13px; font-weight:600; color:#b0b8d0; margin:14px 0 4px }
+.adm p  { color:#c8ccd8; margin:5px 0 10px }
+.adm hr { border:none; border-top:1px solid #2a2b3a; margin:22px 0 }
+.adm strong { color:#f8f9fa }
+.adm code { background:#0d1117; color:#79c0ff; border:1px solid #2a2b3a; border-radius:4px; padding:1px 6px; font-family:'Consolas','Fira Code',monospace; font-size:12px }
+.adm ul { padding-left:20px; margin:5px 0 10px; color:#c8ccd8 }
+.adm ol { padding-left:20px; margin:5px 0 10px; color:#c8ccd8 }
+.adm li { margin:4px 0 }
+.adm table { width:100%; border-collapse:collapse; font-size:12px; background:#181924; border-radius:6px; overflow:hidden; border:1px solid #2a2b3a; margin:10px 0 16px }
+.adm th { background:#050608; padding:8px 12px; text-align:left; color:#f8f9fa; font-weight:600; font-size:11px; text-transform:uppercase; border-bottom:1px solid #2a2b3a }
+.adm td { padding:8px 12px; border-bottom:1px solid #202231; color:#c8ccd8 }
+.adm tr:last-child td { border-bottom:none }
+.adm tr:hover td { background:#1e1f2e }
+`;
+
+// ——— 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.
+
+---
+
+## How Scoring Works
+
+Every violation carries a **point value** set at the time of submission. Points count toward an employee's score only within a **rolling 90-day window** — once a violation is older than 90 days it automatically drops off and the score recalculates.
+
+Negated (voided) violations are excluded from scoring immediately. Hard-deleted violations are removed from the record entirely.
+
+## Tier Reference
+
+| 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 **at-risk badge** on the dashboard flags anyone within 2 points of the next tier threshold so supervisors can act before escalation occurs.
+
+---
+
+## Feature Map
+
+### Dashboard
+
+The main view. Employees are sorted by active CPAS points, highest first.
+
+- **Stat cards** — live counts: total employees, zero-point (elite), with active points, at-risk, highest score
+- **Search / filter** — by name, department, or supervisor; narrows the table in real time
+- **At-risk badge** — gold flag on rows where the employee is within 2 pts of the next tier
+- **Audit Log button** — opens the filterable, paginated write-action log (top right of the dashboard toolbar)
+- **Click any name** — opens that employee's full profile modal
+
+---
+
+### Logging a Violation
+
+Use the **+ New Violation** tab.
+
+1. Select an existing employee from the dropdown, or type a new name to create a record on-the-fly.
+2. The **employee intelligence panel** loads their current tier badge and 90-day violation count before you commit.
+3. Choose a violation type. The dropdown is grouped by category and shows prior 90-day counts inline for each type.
+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. **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.
+
+---
+
+### Employee Profile Modal
+
+Click any name on the dashboard to open their profile.
+
+#### Overview section
+Shows current tier badge, active points, and 90-day violation count.
+
+#### Notes & Flags
+Free-text field for HR context (e.g. "On PIP", "Union member", "Pending investigation", "FMLA"). Quick-add tag buttons pre-fill common statuses. Notes are visible to anyone who opens the profile but **do not affect CPAS scoring**. Edit inline; saves on blur.
+
+#### Point Expiration Timeline
+Visible when the employee has active points. Shows each active violation as a progress bar indicating how far through its 90-day window it is, days remaining until roll-off, and a **tier-drop indicator** for violations whose expiration would move the employee down a tier.
+
+#### Violation History
+Full record of all submissions — active, negated, and resolved.
+
+- **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. 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.
+
+#### Merge Duplicate
+If the same employee exists under two names, use Merge to reassign all violations from the duplicate to the canonical record. The duplicate is then deleted. This cannot be undone.
+
+---
+
+### Audit Log
+
+Accessible from the dashboard toolbar (🔍 button). Append-only log of every write action in the system.
+
+- Filter by entity type: **employee** or **violation**
+- Filter by action: created, edited, merged, negated, restored, amended, deleted, notes updated
+- Paginated with load-more; most recent entries first
+
+The audit log is the authoritative record for compliance review. Nothing in it can be edited or deleted through the UI.
+
+---
+
+### Violation Amendment
+
+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, acknowledged-by, acknowledged-date.
+
+**Immutable fields:** violation type, incident date, point value.
+
+Each amendment stores a before/after diff for every changed field. Amendment history is accessible from the violation card in the employee's history.
+
+---
+
+### 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 |
+|--------|----------|-------|
+| Edit violation type | No | Immutable after submission |
+| 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 |
+| Merge duplicate employees | Yes | Irreversible |
+| Add / edit employee notes | Yes | Does not affect score |
+
+---
+
+## Roadmap
+
+### Shipped
+
+- Container scaffold, violation form, employee intelligence
+- Recidivist auto-escalation, tier crossing warning
+- PDF generation with prior-points snapshot
+- Company dashboard, stat cards, at-risk badges
+- Employee profile modal — full history, negate/restore, hard delete
+- Employee edit and duplicate merge
+- Violation amendment with field-level diff log
+- Audit log — filterable, paginated, append-only
+- 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
+
+---
+
+### Near-term
+
+These are well-scoped additions that fit the current architecture without major changes.
+
+- **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.
+
+---
+
+### Planned
+
+Larger features that require more design work or infrastructure.
+
+- **Violation trends chart** — line/bar chart of violations over time, filterable by department or supervisor. Useful for identifying systemic patterns vs. isolated incidents. Recharts is already available in the frontend bundle.
+- **Department heat map** — grid showing violation density and average CPAS score per department. Helps identify team-level risk early.
+- **Draft / pending violations** — save a violation as a draft before it's officially logged. Useful when incidents need supervisor review or HR sign-off before they count toward the score.
+- **At-risk threshold configuration** — make the 2-point at-risk warning threshold configurable per deployment rather than hardcoded.
+
+---
+
+### Future Considerations
+
+These require meaningful infrastructure additions and should be evaluated against actual operational need before committing.
+
+- **Multi-user auth** — role-based login (admin, supervisor, read-only). Currently the app assumes a trusted internal network with no authentication layer.
+- **Tier escalation alerts** — email or in-app notification when an employee crosses into Tier 2+, automatically routed to their supervisor.
+- **Scheduled digest** — weekly email summary to supervisors showing their employees' current standings and any approaching thresholds.
+- **Automated DB backup** — scheduled snapshot of the database to a mounted backup volume or remote destination.
+- **Bulk CSV import** — migrate historical violation records from paper logs or a prior system.
+- **Dark/light theme toggle** — UI is currently dark-only.
+`;
+
+// ——— Component ——————————————————————————————————————————————————————————————
+export default function ReadmeModal({ onClose }) {
+  const bodyRef = useRef(null);
+  const html    = mdToHtml(GUIDE_MD);
+  const toc     = buildToc(GUIDE_MD);
+
+  useEffect(() => {
+    const h = e => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', h);
+    return () => window.removeEventListener('keydown', h);
+  }, [onClose]);
+
+  const scrollTo = id => {
+    const el = bodyRef.current?.querySelector(`#${id}`);
+    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+
+  return (
+    <div style={S.overlay} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
+      <style>{CSS}</style>
+
+      <div style={S.panel} onClick={e => e.stopPropagation()}>
+
+        {/* Header */}
+        <div style={S.header}>
+          <div>
+            <div style={{ fontSize:'17px', fontWeight:800, letterSpacing:'.3px' }}>
+              📋 CPAS Tracker — Admin Guide
+            </div>
+            <div style={{ fontSize:'11px', color:'#9ca0b8', marginTop:'3px' }}>
+              Feature map · workflows · roadmap · Esc or click outside to close
+            </div>
+          </div>
+          <button style={S.closeBtn} onClick={onClose} aria-label="Close">✕</button>
+        </div>
+
+        {/* TOC strip */}
+        <div style={S.toc}>
+          {toc.map(h => (
+            <button key={h.id} onClick={() => scrollTo(h.id)} style={{
+              background:'none', border:'none', cursor:'pointer', padding:'3px 0',
+              color: h.level === 1 ? '#f8f9fa' : '#d4af37',
+              fontWeight: h.level === 1 ? 700 : 500,
+              fontSize:'11px',
+            }}>
+              {h.level === 2 ? '↳ ' : ''}{h.text}
+            </button>
+          ))}
+        </div>
+
+        {/* Body */}
+        <div
+          ref={bodyRef}
+          style={S.body}
+          className="adm"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+
+        {/* Footer */}
+        <div style={S.footer}>
+          CPAS Violation Tracker · internal admin use only
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/TierWarning.jsx b/.claude/worktrees/musing-bell/client/src/components/TierWarning.jsx
new file mode 100644
index 0000000..7721260
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/components/TierWarning.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { getTier, getNextTier } from './CpasBadge';
+
+/**
+ * Shows a warning banner if adding `addingPoints` to `currentPoints`
+ * would cross into a new CPAS tier.
+ */
+export default function TierWarning({ currentPoints, addingPoints }) {
+    if (!currentPoints && currentPoints !== 0) return null;
+
+    const current   = getTier(currentPoints);
+    const projected = getTier(currentPoints + addingPoints);
+
+    if (current.label === projected.label) return null;
+
+    const tierUp = getNextTier(currentPoints);
+
+    return (
+        <div style={{
+            background: '#3b2e00',
+            border: '2px solid #d4af37',
+            borderRadius: '6px',
+            padding: '12px 16px',
+            margin: '12px 0',
+            fontSize: '13px',
+            color: '#ffdf8a',
+        }}>
+            <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 && (
+                <span> Tier threshold crossed at <strong>{tierUp.min} points</strong>.</span>
+            )}
+        </div>
+    );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/ToastProvider.jsx b/.claude/worktrees/musing-bell/client/src/components/ToastProvider.jsx
new file mode 100644
index 0000000..193ff47
--- /dev/null
+++ b/.claude/worktrees/musing-bell/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>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/ViolationForm.jsx b/.claude/worktrees/musing-bell/client/src/components/ViolationForm.jsx
new file mode 100644
index 0000000..b97bc47
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/components/ViolationForm.jsx
@@ -0,0 +1,472 @@
+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' },
+  section:      { background: '#181924', borderLeft: '4px solid #d4af37', padding: '20px', marginBottom: '30px', borderRadius: '4px', border: '1px solid #2a2b3a' },
+  sectionTitle: { color: '#f8f9fa', fontSize: '20px', marginBottom: '15px', fontWeight: 700 },
+  grid:         { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '15px', marginTop: '15px' },
+  item:         { display: 'flex', flexDirection: 'column' },
+  label:        { fontWeight: 600, color: '#e5e7f1', marginBottom: '5px', fontSize: '13px' },
+  input:        { padding: '10px', border: '1px solid #333544', borderRadius: '4px', fontSize: '14px', fontFamily: 'inherit', background: '#050608', color: '#f8f9fa' },
+  fullCol:      { gridColumn: '1 / -1' },
+  contextBox:   { background: '#141623', border: '1px solid #333544', borderRadius: '4px', padding: '10px', fontSize: '12px', color: '#d1d3e0', marginTop: '4px' },
+  repeatBadge:  { display: 'inline-block', marginLeft: '8px', padding: '1px 7px', borderRadius: '10px', fontSize: '11px', fontWeight: 700, background: '#3b2e00', color: '#ffd666', border: '1px solid #d4af37' },
+  repeatWarn:   { background: '#3b2e00', border: '1px solid #d4af37', borderRadius: '4px', padding: '8px 12px', marginTop: '6px', fontSize: '12px', color: '#ffdf8a' },
+  pointBox:     { background: '#181200', border: '2px solid #d4af37', padding: '15px', borderRadius: '6px', marginTop: '15px', textAlign: 'center' },
+  pointValue:   { fontSize: '24px', fontWeight: 'bold', color: '#ffd666', margin: '10px 0' },
+  scoreRow:     { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '14px', flexWrap: 'wrap' },
+  btnRow:       { display: 'flex', gap: '15px', justifyContent: 'center', marginTop: '30px', flexWrap: 'wrap' },
+  btnPrimary:   { padding: '15px 40px', fontSize: '16px', fontWeight: 600, border: 'none', borderRadius: '6px', cursor: 'pointer', background: 'linear-gradient(135deg, #d4af37 0%, #ffdf8a 100%)', color: '#000', textTransform: 'uppercase' },
+  btnPdf:       { padding: '15px 40px', fontSize: '16px', fontWeight: 600, border: 'none', borderRadius: '6px', cursor: 'pointer', background: 'linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)', color: 'white', textTransform: 'uppercase' },
+  btnSecondary: { padding: '15px 40px', fontSize: '16px', fontWeight: 600, border: '1px solid #333544', borderRadius: '6px', cursor: 'pointer', background: '#050608', color: '#f8f9fa', textTransform: 'uppercase' },
+  note:         { background: '#141623', borderLeft: '4px solid #2196F3', padding: '15px', margin: '20px 0', borderRadius: '4px', fontSize: '13px', color: '#d1d3e0' },
+  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: '',
+  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 [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];
+    if (allTime && allTime.count >= 1 && violation.minPoints !== violation.maxPoints) {
+      setForm(prev => ({ ...prev, points: violation.maxPoints }));
+    } else {
+      setForm(prev => ({ ...prev, points: violation.minPoints }));
+    }
+  }, [form.violationType, violation, intel.countsAllTime]);
+
+  const handleEmployeeSelect = e => {
+    const emp = employees.find(x => x.id === parseInt(e.target.value));
+    if (!emp) return;
+    setForm(prev => ({ ...prev, employeeId: emp.id, employeeName: emp.name, department: emp.department || '', supervisor: emp.supervisor || '' }));
+  };
+
+  const handleViolationChange = e => {
+    const key = e.target.value;
+    const v   = resolveViolation(key);
+    setViolation(v);
+    setForm(prev => ({ ...prev, violationType: key, points: v ? v.minPoints : 1 }));
+  };
+
+  const handleChange = e => setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    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;
+      const violRes    = await axios.post('/api/violations', {
+        employee_id:    employeeId,
+        violation_type: form.violationType,
+        violation_name: violation?.name || form.violationType,
+        category:       violation?.category || 'General',
+        points:         parseInt(form.points),
+        incident_date:  form.incidentDate,
+        incident_time:  form.incidentTime  || null,
+        location:       form.location       || null,
+        details:        form.additionalDetails || null,
+        witness_name:   form.witnessName    || null,
+        acknowledged_by:   form.acknowledgedBy   || null,
+        acknowledged_date: form.acknowledgedDate || null,
+      });
+
+      const newId = violRes.data.id;
+      setLastViolId(newId);
+
+      const empList = await axios.get('/api/employees');
+      setEmployees(empList.data);
+
+      toast.success(`Violation #${newId} recorded — click Download PDF to save the document.`);
+      setStatus({ ok: true, msg: `✓ Violation #${newId} recorded — click Download PDF to save the document.` });
+      setForm(EMPTY_FORM);
+      setViolation(null);
+    } catch (err) {
+      const msg = err.response?.data?.error || err.message;
+      toast.error(`Failed to submit: ${msg}`);
+      setStatus({ ok: false, msg: '✗ Error: ' + msg });
+    }
+  };
+
+  const handleDownloadPdf = async () => {
+    if (!lastViolId) return;
+    setPdfLoading(true);
+    try {
+      const response = await axios.get(`/api/violations/${lastViolId}/pdf`, { responseType: 'blob' });
+      const url      = window.URL.createObjectURL(new Blob([response.data], { type: 'application/pdf' }));
+      const link     = document.createElement('a');
+      link.href      = url;
+      link.download  = `CPAS_Violation_${lastViolId}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+      toast.success('PDF downloaded successfully.');
+    } catch (err) {
+      toast.error('PDF generation failed: ' + err.message);
+    } finally {
+      setPdfLoading(false);
+    }
+  };
+
+  const showField    = f   => violation?.fields?.includes(f);
+  const priorCount90 = key => intel.counts90[key] || 0;
+  const isRepeat     = key => (intel.countsAllTime[key]?.count || 0) >= 1;
+
+  return (
+    <div style={s.content}>
+
+      <div style={s.section}>
+        <h2 style={s.sectionTitle}>Employee Information</h2>
+
+        {intel.score && form.employeeId && (
+          <div style={s.scoreRow}>
+            <span style={{ fontSize: '13px', color: '#d1d3e0', fontWeight: 600 }}>Current Standing:</span>
+            <CpasBadge points={intel.score.active_points} />
+            <span style={{ fontSize: '12px', color: '#9ca0b8' }}>
+              {intel.score.violation_count} violation{intel.score.violation_count !== 1 ? 's' : ''} in last 90 days
+            </span>
+          </div>
+        )}
+
+        {employees.length > 0 && (
+          <div style={{ marginBottom: '12px' }}>
+            <label style={s.label}>Quick-Select Existing Employee:</label>
+            <select style={s.input} onChange={handleEmployeeSelect} value={form.employeeId || ''}>
+              <option value="">-- Select existing or enter new below --</option>
+              {employees.map(e => (
+                <option key={e.id} value={e.id}>{e.name}{e.department ? ` — ${e.department}` : ''}</option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        <div style={s.grid}>
+          {[['employeeName','Employee Name','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="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>
+
+      <form onSubmit={handleSubmit}>
+        <div style={s.section}>
+          <h2 style={s.sectionTitle}>Violation Details</h2>
+          <div style={s.grid}>
+
+            <div style={{ ...s.item, ...s.fullCol }}>
+              <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(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}{v.isCustom ? ' ✦' : ''}{prior > 0 ? ` ★ ${prior}x in 90 days` : ''}
+                        </option>
+                      );
+                    })}
+                  </optgroup>
+                ))}
+              </select>
+
+              {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
+                    </span>
+                  )}
+                  <br />{violation.description}<br />
+                  <span style={{ fontSize: '11px', color: '#a0a3ba' }}>{violation.chapter}</span>
+                </div>
+              )}
+
+              {violation && isRepeat(form.violationType) && form.employeeId && violation.minPoints !== violation.maxPoints && (
+                <div style={s.repeatWarn}>
+                  <strong>Repeat offense detected.</strong> Point slider set to maximum ({violation.maxPoints} pts) per recidivist policy. Adjust if needed.
+                </div>
+              )}
+            </div>
+
+            <div style={s.item}>
+              <label style={s.label}>Incident Date:</label>
+              <input style={s.input} type="date" name="incidentDate" value={form.incidentDate} onChange={handleChange} required />
+            </div>
+
+            {showField('time') && (
+              <div style={s.item}>
+                <label style={s.label}>Incident Time:</label>
+                <input style={s.input} type="time" name="incidentTime" value={form.incidentTime} onChange={handleChange} />
+              </div>
+            )}
+            {showField('minutes') && (
+              <div style={s.item}>
+                <label style={s.label}>Minutes Late:</label>
+                <input style={s.input} type="number" name="minutesLate" value={form.minutesLate} onChange={handleChange} placeholder="15" />
+              </div>
+            )}
+            {showField('amount') && (
+              <div style={s.item}>
+                <label style={s.label}>Amount / Value:</label>
+                <input style={s.input} type="text" name="amount" value={form.amount} onChange={handleChange} placeholder="$150.00" />
+              </div>
+            )}
+            {showField('location') && (
+              <div style={{ ...s.item, ...s.fullCol }}>
+                <label style={s.label}>Location / Context:</label>
+                <input style={s.input} type="text" name="location" value={form.location} onChange={handleChange} placeholder="Office, vehicle, facility area, etc." />
+              </div>
+            )}
+            {showField('description') && (
+              <div style={{ ...s.item, ...s.fullCol }}>
+                <label style={s.label}>Additional Details:</label>
+                <textarea style={{ ...s.input, resize: 'vertical', minHeight: '80px' }} name="additionalDetails" value={form.additionalDetails} onChange={handleChange} placeholder="Provide specific context, observations, or details..." />
+              </div>
+            )}
+          </div>
+
+          {intel.score && violation && (
+            <TierWarning
+              currentPoints={intel.score.active_points}
+              addingPoints={parseInt(form.points) || 0}
+            />
+          )}
+
+          {violation && (
+            <div style={s.pointBox}>
+              <h4 style={{ color: '#ffdf8a', marginBottom: '10px' }}>CPAS Point Assessment</h4>
+              <p style={{ margin: 0 }}>
+                {violation.name}: {violation.minPoints === violation.maxPoints
+                  ? `${violation.minPoints} Points (Fixed)`
+                  : `${violation.minPoints}–${violation.maxPoints} Points`}
+              </p>
+              <input style={{ width: '100%', marginTop: '10px' }} type="range" name="points"
+                min={violation.minPoints} max={violation.maxPoints}
+                value={form.points} onChange={handleChange} />
+              <div style={s.pointValue}>{form.points} Points</div>
+              <p style={{ fontSize: '12px', color: '#d1d3e0' }}>Adjust to reflect severity and context</p>
+            </div>
+          )}
+        </div>
+
+        {/* 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); }}>
+            Clear Form
+          </button>
+        </div>
+
+        {lastViolId && status?.ok && (
+          <div style={{ textAlign: 'center', marginTop: '16px' }}>
+            <button
+              type="button"
+              style={{ ...s.btnPdf, opacity: pdfLoading ? 0.7 : 1 }}
+              onClick={handleDownloadPdf}
+              disabled={pdfLoading}
+            >
+              {pdfLoading ? '⏳ Generating PDF...' : '⬇ Download PDF'}
+            </button>
+            <p style={{ fontSize: '11px', color: '#9ca0b8', marginTop: '6px' }}>
+              Violation #{lastViolId} — click to download the signed violation document
+            </p>
+          </div>
+        )}
+
+        {status && <div style={status.ok ? { 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 && (
+        <div style={s.section}>
+          <h2 style={s.sectionTitle}>Violation History</h2>
+          <ViolationHistory history={intel.history} loading={intel.loading} />
+        </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>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/ViolationHistory.jsx b/.claude/worktrees/musing-bell/client/src/components/ViolationHistory.jsx
new file mode 100644
index 0000000..7b48107
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/components/ViolationHistory.jsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+
+const s = {
+    wrapper:  { marginTop: '24px' },
+    title:    { color: '#b5b5c0', fontSize: '16px', fontWeight: 700, marginBottom: '10px' },
+    table:    { width: '100%', borderCollapse: 'collapse', fontSize: '13px', background: '#111217', borderRadius: '6px', overflow: 'hidden', border: '1px solid #222' },
+    th:       { background: '#000000', color: '#f8f9fa', padding: '8px 10px', textAlign: 'left', fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' },
+    td:       { padding: '8px 10px', borderBottom: '1px solid #1c1d29', color: '#f8f9fa', verticalAlign: 'middle' },
+    trEven:   { background: '#111217' },
+    trOdd:    { background: '#151622' },
+    pts:      { fontWeight: 700, color: '#667eea' },
+    toggle:   { background: 'none', border: 'none', color: '#667eea', cursor: 'pointer', fontSize: '13px', padding: 0, textDecoration: 'underline' },
+    empty:    { color: '#77798a', fontStyle: 'italic', fontSize: '13px', marginTop: '8px' },
+};
+
+function formatDate(d) {
+    if (!d) return '–';
+    const dt = new Date(d + 'T12:00:00');
+    return dt.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'America/Chicago' });
+}
+
+export default function ViolationHistory({ history, loading }) {
+    const [expanded, setExpanded] = useState(false);
+    const visible = expanded ? history : history.slice(0, 5);
+
+    if (loading) return <p style={s.empty}>Loading history...</p>;
+    if (!history.length) return <p style={s.empty}>No violations on record for this employee.</p>;
+
+    return (
+        <div style={s.wrapper}>
+            <div style={s.title}>Recent Violations ({history.length} total)</div>
+            <table style={s.table}>
+                <thead>
+                    <tr>
+                        <th style={s.th}>Date</th>
+                        <th style={s.th}>Violation</th>
+                        <th style={s.th}>Category</th>
+                        <th style={s.th}>Points</th>
+                        <th style={s.th}>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {visible.map((v, i) => (
+                        <tr key={v.id} style={i % 2 === 0 ? s.trEven : s.trOdd}>
+                            <td style={s.td}>{formatDate(v.incident_date)}</td>
+                            <td style={s.td}>{v.violation_name}</td>
+                            <td style={{ ...s.td, color: '#c0c2d6' }}>{v.category}</td>
+                            <td style={{ ...s.td, ...s.pts }}>{v.points}</td>
+                            <td style={{ ...s.td, color: '#c0c2d6' }}>{v.details || '–'}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+            {history.length > 5 && (
+                <div style={{ marginTop: '8px' }}>
+                    <button style={s.toggle} onClick={() => setExpanded(e => !e)}>
+                        {expanded ? '▲ Show less' : `▼ Show all ${history.length} violations`}
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/components/ViolationTypeModal.jsx b/.claude/worktrees/musing-bell/client/src/components/ViolationTypeModal.jsx
new file mode 100644
index 0000000..40d3c14
--- /dev/null
+++ b/.claude/worktrees/musing-bell/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>
+  );
+}
diff --git a/.claude/worktrees/musing-bell/client/src/data/departments.js b/.claude/worktrees/musing-bell/client/src/data/departments.js
new file mode 100644
index 0000000..9ed3cfa
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/data/departments.js
@@ -0,0 +1,9 @@
+export const DEPARTMENTS = [
+  'Administrative',
+  'Business Development',
+  'Design and Content',
+  'Executive',
+  'Implementation and Support',
+  'Operations',
+  'Production',
+];
diff --git a/.claude/worktrees/musing-bell/client/src/data/violations.js b/.claude/worktrees/musing-bell/client/src/data/violations.js
new file mode 100644
index 0000000..d21f6b1
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/data/violations.js
@@ -0,0 +1,248 @@
+export const violationData = {
+    tardy: {
+        name: 'Tardy Core Hours', category: 'Attendance & Punctuality',
+        minPoints: 1, maxPoints: 1, chapter: 'Chapter 4, Section 5',
+        fields: ['time', 'minutes', 'description'],
+        description: 'Arriving 7+ minutes after 9:00 AM or start of mandatory meeting without prior excuse'
+    },
+    unplanned_absence: {
+        name: 'Unplanned Absence', category: 'Attendance & Punctuality',
+        minPoints: 3, maxPoints: 3, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Absence from Core Hours without 48-hour notification, excluding verified emergencies'
+    },
+    chronic_underscheduling: {
+        name: 'Chronic Under-Scheduling', category: 'Attendance & Punctuality',
+        minPoints: 5, maxPoints: 5, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Consistently failing to meet 40-hour weekly baseline'
+    },
+    pto_exhausted: {
+        name: 'Absence - PTO Exhausted', category: 'Attendance & Punctuality',
+        minPoints: 5, maxPoints: 5, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Any absence after PTO bank reaches zero'
+    },
+    shadow_absenteeism: {
+        name: 'Shadow Absenteeism', category: 'Attendance & Punctuality',
+        minPoints: 5, maxPoints: 20, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Failure to record partial-day absences or habitual PTO system bypass (20 pts for recidivists)'
+    },
+    manual_punch_1st: {
+        name: 'Manual Punch Correction (1st)', category: 'Administrative Integrity',
+        minPoints: 1, maxPoints: 1, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'First failure to punch in/out requiring manual audit'
+    },
+    manual_punch_2nd: {
+        name: 'Manual Punch Correction (2nd)', category: 'Administrative Integrity',
+        minPoints: 2, maxPoints: 2, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Second failure requiring written action plan'
+    },
+    manual_punch_3rd: {
+        name: 'Manual Punch Correction (3rd / Tier 1)', category: 'Administrative Integrity',
+        minPoints: 5, maxPoints: 5, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Repeated timekeeping negligence triggering formal Tier 1 realignment'
+    },
+    geolocation_1st: {
+        name: 'Geolocation Integrity (1st)', category: 'Administrative Integrity',
+        minPoints: 1, maxPoints: 1, chapter: 'Chapter 4, Section 5',
+        fields: ['location', 'description'],
+        description: 'Recording blind punch with location services disabled'
+    },
+    geolocation_2nd: {
+        name: 'Geolocation Integrity (2nd)', category: 'Administrative Integrity',
+        minPoints: 10, maxPoints: 10, chapter: 'Chapter 4, Section 5',
+        fields: ['location', 'description'],
+        description: 'Subsequent attempt to bypass location safeguards'
+    },
+    point_of_work: {
+        name: 'Point-of-Work Integrity', category: 'Administrative Integrity',
+        minPoints: 1, maxPoints: 3, chapter: 'Chapter 4, Section 5',
+        fields: ['location', 'description'],
+        description: 'Clocking in before arriving at assigned post or for personal errands'
+    },
+    financial_chargeback: {
+        name: 'Financial Stewardship / Chargeback', category: 'Financial Stewardship',
+        minPoints: 1, maxPoints: 1, chapter: 'Chapter 4, Section 5',
+        fields: ['amount', 'description'],
+        description: 'Monthly assessment for unsubstantiated expenses requiring chargeback'
+    },
+    receipt_negligence: {
+        name: 'Receipt Negligence', category: 'Financial Stewardship',
+        minPoints: 10, maxPoints: 10, chapter: 'Chapter 4, Section 5',
+        fields: ['amount', 'description'],
+        description: 'Frequent failure to provide company card expense documentation'
+    },
+    failure_to_respond: {
+        name: 'Failure to Respond', category: 'Operational Response',
+        minPoints: 1, maxPoints: 3, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Failure to respond promptly to internal/external requests during Core Hours'
+    },
+    sunset_rule: {
+        name: 'Sunset Rule Violation', category: 'Operational Response',
+        minPoints: 1, maxPoints: 3, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Failure to provide response or status update with commitment date by end of business day'
+    },
+    double_ask: {
+        name: 'Double Ask Friction', category: 'Operational Response',
+        minPoints: 3, maxPoints: 3, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Forcing client to ask twice for same information due to employee neglect'
+    },
+    missed_deadline_internal: {
+        name: 'Missed Deadline - Internal', category: 'Operational Response',
+        minPoints: 3, maxPoints: 3, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Failure to meet internal project milestones'
+    },
+    missed_deadline_client: {
+        name: 'Missed Deadline - Client', category: 'Operational Response',
+        minPoints: 7, maxPoints: 7, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Failure to meet high-impact client-facing deadline'
+    },
+    commitment_breach: {
+        name: 'Commitment Breach', category: 'Operational Response',
+        minPoints: 4, maxPoints: 4, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Failing to meet commitment date without proactive prior notification'
+    },
+    communication_gap: {
+        name: 'Communication Gap (15-min window)', category: 'Operational Response',
+        minPoints: 5, maxPoints: 5, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Failure to respond within 15-minute window due to mobile device distraction'
+    },
+    quality_recidivism: {
+        name: 'Quality Recidivism', category: 'Operational Response',
+        minPoints: 4, maxPoints: 4, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Repetition of technical/administrative error previously corrected'
+    },
+    technical_negligence: {
+        name: 'Technical Negligence', category: 'Operational Response',
+        minPoints: 5, maxPoints: 5, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Performance error resulting in rework, data loss, or equipment damage'
+    },
+    appearance: {
+        name: 'Professional Appearance Violation', category: 'Professional Conduct',
+        minPoints: 1, maxPoints: 3, chapter: 'Chapter 2, Section 9',
+        fields: ['time', 'location', 'description'],
+        description: 'Failure to maintain dress code standards (shirts, pants, shoes required)'
+    },
+    active_consumption: {
+        name: 'Active Consumption Media', category: 'Professional Conduct',
+        minPoints: 5, maxPoints: 5, chapter: 'Chapter 4, Section 5',
+        fields: ['time', 'description'],
+        description: 'Interactive social media/gaming during Core Hours'
+    },
+    tobacco_debris: {
+        name: 'Tobacco Facility Debris', category: 'Professional Conduct',
+        minPoints: 5, maxPoints: 5, chapter: 'Chapter 4, Section 5',
+        fields: ['location', 'description'],
+        description: 'Failure to maintain clean smoking area or flicking debris on grounds'
+    },
+    passive_insubordination: {
+        name: 'Passive Insubordination', category: 'Professional Conduct',
+        minPoints: 5, maxPoints: 5, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Ignoring reasonable requests, emails, or syncs without open dissent'
+    },
+    lockdown_violation: {
+        name: 'Lockdown Violation', category: 'Professional Conduct',
+        minPoints: 10, maxPoints: 10, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Using non-work media while under Tier 2 Administrative Friction'
+    },
+    vehicle_stewardship: {
+        name: 'Vehicle Stewardship', category: 'Professional Conduct',
+        minPoints: 10, maxPoints: 10, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Persistent tobacco-free transit violation (odor/debris in company vehicle)'
+    },
+    defiant_insubordination: {
+        name: 'Defiant Insubordination', category: 'Professional Conduct',
+        minPoints: 15, maxPoints: 15, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Openly refusing legal, ethical, or professional directive from management'
+    },
+    benefit_documentation: {
+        name: 'Benefit Documentation Failure', category: 'Professional Conduct',
+        minPoints: 15, maxPoints: 15, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Failure to provide insurance records for Workers Comp'
+    },
+    professional_dishonesty: {
+        name: 'Professional Dishonesty', category: 'Professional Conduct',
+        minPoints: 20, maxPoints: 20, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Falsifying time records, expenses, or reasons for absence'
+    },
+    wfh_submittal: {
+        name: 'WFH Submittal Failure', category: 'Work From Home',
+        minPoints: 1, maxPoints: 5, chapter: 'Chapter 4, Section 4.1',
+        fields: ['description'],
+        description: 'Failure to provide work-product summary or misrepresenting hours worked'
+    },
+    safety_minor: {
+        name: 'Safety Violation - Minor', category: 'Safety & Security',
+        minPoints: 1, maxPoints: 10, chapter: 'Chapter 4, Section 5',
+        fields: ['location', 'description'],
+        description: 'Minor to moderate safety standard violations without immediate injury'
+    },
+    policy_isp: {
+        name: 'Policy Non-Alignment - ISP', category: 'Safety & Security',
+        minPoints: 5, maxPoints: 20, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Failure to adhere to Information Security Policy protocols'
+    },
+    workspace_safety: {
+        name: 'Workspace Safety Neglect', category: 'Safety & Security',
+        minPoints: 15, maxPoints: 15, chapter: 'Chapter 4, Section 5',
+        fields: ['location', 'description'],
+        description: 'Failure to maintain clean workspace or minor safety negligence'
+    },
+    distracted_driving: {
+        name: 'Distracted Driving', category: 'Safety & Security',
+        minPoints: 15, maxPoints: 15, chapter: 'Chapter 4, Section 5',
+        fields: ['location', 'description'],
+        description: 'Use of handheld mobile devices while operating vehicle for company business'
+    },
+    operational_sabotage: {
+        name: 'Operational Sabotage', category: 'Safety & Security',
+        minPoints: 20, maxPoints: 20, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Willful disregard for security/safety protocols resulting in breach or injury'
+    },
+    impairment_redzone: {
+        name: 'Impairment in Red Zone', category: 'Safety & Security',
+        minPoints: 30, maxPoints: 30, chapter: 'Chapter 4, Section 5',
+        fields: ['location', 'description'],
+        description: 'Operating machinery or working in Fabrication Area while under influence'
+    },
+    child_redzone: {
+        name: 'Child in Red Zone', category: 'Safety & Security',
+        minPoints: 30, maxPoints: 30, chapter: 'Chapter 4, Section 5',
+        fields: ['location', 'description'],
+        description: 'Bringing minor into active Fabrication Area (Suite 24/25)'
+    },
+    i9_falsification: {
+        name: 'I-9 Eligibility Falsification', category: 'Safety & Security',
+        minPoints: 30, maxPoints: 30, chapter: 'Chapter 4, Section 5',
+        fields: ['description'],
+        description: 'Falsifying work authorization or identity documentation'
+    }
+};
+
+export const violationGroups = Object.entries(violationData).reduce((acc, [key, val]) => {
+    if (!acc[val.category]) acc[val.category] = [];
+    acc[val.category].push({ key, ...val });
+    return acc;
+}, {});
diff --git a/.claude/worktrees/musing-bell/client/src/hooks/useEmployeeIntelligence.js b/.claude/worktrees/musing-bell/client/src/hooks/useEmployeeIntelligence.js
new file mode 100644
index 0000000..14bb1dc
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/hooks/useEmployeeIntelligence.js
@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+/**
+ * Fetches CPAS score, 90-day violation type counts, and full history
+ * for a given employeeId. Re-fetches whenever employeeId changes.
+ */
+export default function useEmployeeIntelligence(employeeId) {
+    const [score,         setScore]         = useState(null);
+    const [counts90,      setCounts90]      = useState({});   // { violation_type: count } 90-day
+    const [countsAllTime, setCountsAllTime] = useState({});   // { violation_type: { count, max_points_used } }
+    const [history,       setHistory]       = useState([]);
+    const [loading,       setLoading]       = useState(false);
+
+    useEffect(() => {
+        if (!employeeId) {
+            setScore(null);
+            setCounts90({});
+            setCountsAllTime({});
+            setHistory([]);
+            return;
+        }
+
+        setLoading(true);
+        Promise.all([
+            axios.get(`/api/employees/${employeeId}/score`),
+            axios.get(`/api/employees/${employeeId}/violation-counts`),
+            axios.get(`/api/employees/${employeeId}/violation-counts/alltime`),
+            axios.get(`/api/violations/employee/${employeeId}?limit=20`),
+        ]).then(([scoreRes, counts90Res, allTimeRes, historyRes]) => {
+            setScore(scoreRes.data);
+            setCounts90(counts90Res.data);
+            setCountsAllTime(allTimeRes.data);
+            setHistory(historyRes.data);
+        }).catch(console.error)
+          .finally(() => setLoading(false));
+    }, [employeeId]);
+
+    return { score, counts90, countsAllTime, history, loading };
+}
diff --git a/.claude/worktrees/musing-bell/client/src/main.jsx b/.claude/worktrees/musing-bell/client/src/main.jsx
new file mode 100644
index 0000000..226a04a
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/src/main.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);
diff --git a/.claude/worktrees/musing-bell/client/src/styles/mobile.css b/.claude/worktrees/musing-bell/client/src/styles/mobile.css
new file mode 100644
index 0000000..89c02f4
--- /dev/null
+++ b/.claude/worktrees/musing-bell/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;
+  }
+}
diff --git a/.claude/worktrees/musing-bell/client/vite.config.js b/.claude/worktrees/musing-bell/client/vite.config.js
new file mode 100644
index 0000000..80c8dc6
--- /dev/null
+++ b/.claude/worktrees/musing-bell/client/vite.config.js
@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        port: 5173,
+        proxy: {
+            '/api': {
+                target: 'http://localhost:3001',
+                changeOrigin: true
+            }
+        }
+    },
+    build: {
+        outDir: 'dist'
+    }
+});
diff --git a/.claude/worktrees/musing-bell/db/database.js b/.claude/worktrees/musing-bell/db/database.js
new file mode 100644
index 0000000..520ac7a
--- /dev/null
+++ b/.claude/worktrees/musing-bell/db/database.js
@@ -0,0 +1,93 @@
+const Database = require('better-sqlite3');
+const path     = require('path');
+const fs       = require('fs');
+
+const dbPath = process.env.DB_PATH || path.join(__dirname, '..', 'data', 'cpas.db');
+const dir    = path.dirname(dbPath);
+if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+
+const db = new Database(dbPath);
+db.pragma('journal_mode = WAL');
+db.pragma('foreign_keys = ON');
+
+const schema = fs.readFileSync(path.join(__dirname, 'schema.sql'), 'utf8');
+db.exec(schema);
+
+// ── Migrations for existing DBs ──────────────────────────────────────────────
+const cols = db.prepare('PRAGMA table_info(violations)').all().map(c => c.name);
+if (!cols.includes('negated'))             db.exec("ALTER TABLE violations ADD COLUMN negated INTEGER NOT NULL DEFAULT 0");
+if (!cols.includes('negated_at'))          db.exec("ALTER TABLE violations ADD COLUMN negated_at DATETIME");
+if (!cols.includes('prior_active_points')) db.exec("ALTER TABLE violations ADD COLUMN prior_active_points INTEGER");
+if (!cols.includes('prior_tier_label'))    db.exec("ALTER TABLE violations ADD COLUMN prior_tier_label TEXT");
+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);
+if (!empCols.includes('notes')) db.exec("ALTER TABLE employees ADD COLUMN notes TEXT");
+
+// Ensure resolutions table exists
+db.exec(`CREATE TABLE IF NOT EXISTS violation_resolutions (
+    id              INTEGER PRIMARY KEY AUTOINCREMENT,
+    violation_id    INTEGER NOT NULL REFERENCES violations(id) ON DELETE CASCADE,
+    resolution_type TEXT    NOT NULL,
+    details         TEXT,
+    resolved_by     TEXT,
+    created_at      DATETIME DEFAULT CURRENT_TIMESTAMP
+)`);
+
+// ── Feature: Violation Amendments ────────────────────────────────────────────
+// Stores a field-level diff every time a violation's editable fields are changed.
+db.exec(`CREATE TABLE IF NOT EXISTS violation_amendments (
+    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+    violation_id INTEGER NOT NULL REFERENCES violations(id) ON DELETE CASCADE,
+    changed_by   TEXT,
+    field_name   TEXT    NOT NULL,
+    old_value    TEXT,
+    new_value    TEXT,
+    created_at   DATETIME DEFAULT CURRENT_TIMESTAMP
+)`);
+
+// ── Feature: Audit Log ───────────────────────────────────────────────────────
+// Append-only record of every write action across the system.
+db.exec(`CREATE TABLE IF NOT EXISTS audit_log (
+    id           INTEGER PRIMARY KEY AUTOINCREMENT,
+    action       TEXT    NOT NULL,
+    entity_type  TEXT    NOT NULL,
+    entity_id    INTEGER,
+    performed_by TEXT,
+    details      TEXT,
+    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
+SELECT
+    employee_id,
+    SUM(points)  AS active_points,
+    COUNT(*)     AS violation_count
+FROM violations
+WHERE negated = 0
+  AND incident_date >= DATE('now', '-90 days')
+GROUP BY employee_id;`);
+
+console.log('[DB] Connected:', dbPath);
+module.exports = db;
diff --git a/.claude/worktrees/musing-bell/db/schema.sql b/.claude/worktrees/musing-bell/db/schema.sql
new file mode 100644
index 0000000..8129bb3
--- /dev/null
+++ b/.claude/worktrees/musing-bell/db/schema.sql
@@ -0,0 +1,49 @@
+CREATE TABLE IF NOT EXISTS employees (
+    id          INTEGER PRIMARY KEY AUTOINCREMENT,
+    name        TEXT    NOT NULL,
+    department  TEXT,
+    supervisor  TEXT,
+    created_at  DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS violations (
+    id                   INTEGER PRIMARY KEY AUTOINCREMENT,
+    employee_id          INTEGER NOT NULL REFERENCES employees(id),
+    violation_type       TEXT    NOT NULL,
+    violation_name       TEXT    NOT NULL,
+    category             TEXT    NOT NULL DEFAULT 'General',
+    points               INTEGER NOT NULL,
+    incident_date        TEXT    NOT NULL,
+    incident_time        TEXT,
+    location             TEXT,
+    details              TEXT,
+    submitted_by         TEXT,
+    witness_name         TEXT,
+    negated              INTEGER NOT NULL DEFAULT 0,
+    negated_at           DATETIME,
+    prior_active_points  INTEGER, -- snapshot at time of logging
+    prior_tier_label     TEXT,    -- optional human-readable tier
+    acknowledged_by      TEXT,    -- employee name who acknowledged receipt
+    acknowledged_date    TEXT,    -- date of acknowledgment (YYYY-MM-DD)
+    created_at           DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS violation_resolutions (
+    id              INTEGER PRIMARY KEY AUTOINCREMENT,
+    violation_id    INTEGER NOT NULL REFERENCES violations(id) ON DELETE CASCADE,
+    resolution_type TEXT    NOT NULL,
+    details         TEXT,
+    resolved_by     TEXT,
+    created_at      DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Active score: only non-negated violations in rolling 90 days
+CREATE VIEW IF NOT EXISTS active_cpas_scores AS
+SELECT
+    employee_id,
+    SUM(points)  AS active_points,
+    COUNT(*)     AS violation_count
+FROM violations
+WHERE negated = 0
+  AND incident_date >= DATE('now', '-90 days')
+GROUP BY employee_id;
diff --git a/.claude/worktrees/musing-bell/demo/index.html b/.claude/worktrees/musing-bell/demo/index.html
new file mode 100644
index 0000000..e43ff4a
--- /dev/null
+++ b/.claude/worktrees/musing-bell/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>
diff --git a/.claude/worktrees/musing-bell/package.json b/.claude/worktrees/musing-bell/package.json
new file mode 100644
index 0000000..22c607f
--- /dev/null
+++ b/.claude/worktrees/musing-bell/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "cpas-tracker",
+  "version": "1.0.0",
+  "description": "CPAS Violation Tracker — single container, fully self-contained",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js",
+    "docker:build": "docker build -t cpas-tracker .",
+    "docker:run": "docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker",
+    "docker:stop": "docker stop cpas-tracker && docker rm cpas-tracker",
+    "docker:logs": "docker logs -f cpas-tracker",
+    "docker:export": "docker save cpas-tracker | gzip > cpas-tracker.tar.gz"
+  },
+  "dependencies": {
+    "better-sqlite3": "^9.4.3",
+    "cors": "^2.8.5",
+    "express": "^4.18.3",
+    "puppeteer-core": "^22.0.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.0"
+  }
+}
diff --git a/.claude/worktrees/musing-bell/pdf/generator.js b/.claude/worktrees/musing-bell/pdf/generator.js
new file mode 100644
index 0000000..22dcd42
--- /dev/null
+++ b/.claude/worktrees/musing-bell/pdf/generator.js
@@ -0,0 +1,47 @@
+const puppeteer  = require('puppeteer-core');
+const buildHtml  = require('./template');
+
+/**
+ * Renders the violation document HTML via Puppeteer and returns a PDF buffer.
+ * Uses the system Chromium installed in the Alpine image (no separate download).
+ * @param {object} violation  - Row from violations JOIN employees
+ * @param {object} score      - Row from active_cpas_scores
+ * @returns {Buffer}
+ */
+async function generatePdf(violation, score) {
+    const html = buildHtml(violation, score);
+
+    const browser = await puppeteer.launch({
+        executablePath: process.env.PUPPETEER_EXECUTABLE_PATH || '/usr/bin/chromium-browser',
+        args: [
+            '--no-sandbox',
+            '--disable-setuid-sandbox',
+            '--disable-dev-shm-usage',
+            '--disable-gpu',
+        ],
+        headless: 'new',
+    });
+
+    try {
+        const page = await browser.newPage();
+        await page.setContent(html, { waitUntil: 'networkidle0' });
+
+        const pdf = await page.pdf({
+            format:              'Letter',
+            printBackground:     true,
+            margin: {
+                top:    '0.35in',
+                bottom: '0.35in',
+                left:   '0.4in',
+                right:  '0.4in',
+            },
+            displayHeaderFooter: false,
+        });
+
+        return pdf;
+    } finally {
+        await browser.close();
+    }
+}
+
+module.exports = generatePdf;
diff --git a/.claude/worktrees/musing-bell/pdf/template.js b/.claude/worktrees/musing-bell/pdf/template.js
new file mode 100644
index 0000000..3a10deb
--- /dev/null
+++ b/.claude/worktrees/musing-bell/pdf/template.js
@@ -0,0 +1,385 @@
+const fs   = require('fs');
+const path = require('path');
+
+// Load logo from disk once at startup and convert to base64 data URI
+// In Docker: /app/client/dist/static/mpm-logo.png
+// In dev:    ./client/public/static/mpm-logo.png (or dist after build)
+let LOGO_DATA_URI = '';
+const logoPaths = [
+  path.join(__dirname, '..', 'client', 'dist', 'static', 'mpm-logo.png'),
+  path.join(__dirname, '..', 'client', 'public', 'static', 'mpm-logo.png'),
+];
+for (const p of logoPaths) {
+  try {
+    const buf = fs.readFileSync(p);
+    LOGO_DATA_URI = `data:image/png;base64,${buf.toString('base64')}`;
+    console.log('[PDF] Logo loaded from', p);
+    break;
+  } catch (_) { /* try next path */ }
+}
+if (!LOGO_DATA_URI) console.warn('[PDF] Logo not found — PDF header will have no logo');
+
+const TIERS = [
+  { min: 0,  max: 4,   label: 'Tier 0\u20131 \u2014 Elite Standing',           color: '#16a34a', bg: '#f0fdf4' },
+  { min: 5,  max: 9,   label: 'Tier 1 \u2014 Realignment',                color: '#854d0e', bg: '#fefce8' },
+  { min: 10, max: 14,  label: 'Tier 2 \u2014 Administrative Lockdown',    color: '#b45309', bg: '#fff7ed' },
+  { min: 15, max: 19,  label: 'Tier 3 \u2014 Verification',               color: '#c2410c', bg: '#fff7ed' },
+  { min: 20, max: 24,  label: 'Tier 4 \u2014 Risk Mitigation',            color: '#b91c1c', bg: '#fef2f2' },
+  { min: 25, max: 29,  label: 'Tier 5 \u2014 Final Decision',             color: '#991b1b', bg: '#fef2f2' },
+  { min: 30, max: 999, label: 'Tier 6 \u2014 Separation',                 color: '#ffffff', bg: '#7f1d1d' },
+];
+
+function getTier(pts) {
+  return TIERS.find(t => pts >= t.min && pts <= t.max) || TIERS[0];
+}
+
+function fmt(d) {
+  if (!d) return '\u2014';
+  return new Date(d + 'T12:00:00').toLocaleDateString('en-US', {
+    weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
+    timeZone: 'America/Chicago',
+  });
+}
+
+function fmtDT(d, t) { return t ? `${fmt(d)} at ${t}` : fmt(d); }
+
+function buildHtml(v, score) {
+  const priorPts  = score.active_points  || 0;
+  const priorTier = getTier(priorPts);
+  const newTotal  = priorPts + v.points;
+  const newTier   = getTier(newTotal);
+  const escalated = priorTier.label !== newTier.label;
+  const genAt     = new Date().toLocaleString('en-US', {
+    timeZone: 'America/Chicago', dateStyle: 'full', timeStyle: 'short',
+  });
+  const docId = `CPAS-${v.id.toString().padStart(5, '0')}`;
+
+  // Acknowledgment: if acknowledged_by is set, show filled data instead of blank sig line
+  const hasAck     = !!v.acknowledged_by;
+  const ackName    = v.acknowledged_by || '';
+  const ackDate    = v.acknowledged_date ? fmt(v.acknowledged_date) : '';
+
+  const logoTag = LOGO_DATA_URI
+    ? `<img src="${LOGO_DATA_URI}" class="logo" />`
+    : '';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    font-family: -apple-system, 'Segoe UI', Arial, sans-serif;
+    font-size: 13px;
+    color: #1a1a2e;
+    background: #fff;
+    line-height: 1.5;
+  }
+
+  .header {
+    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 60%, #16213e 100%);
+    padding: 24px 36px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 3px solid #d4af37;
+  }
+  .header-left { display: flex; align-items: center; gap: 16px; }
+  .logo { height: 36px; }
+  .header-title { font-size: 18px; font-weight: 700; color: #ffffff; letter-spacing: 0.3px; }
+  .header-sub { font-size: 11px; color: #94a3b8; margin-top: 3px; letter-spacing: 0.5px; text-transform: uppercase; }
+  .header-right { text-align: right; }
+  .doc-id { font-size: 13px; font-weight: 700; color: #d4af37; letter-spacing: 0.5px; }
+  .doc-meta { font-size: 10px; color: #64748b; margin-top: 4px; }
+
+  .confidential-bar {
+    background: #fef2f2; border-bottom: 1px solid #fecaca;
+    padding: 7px 36px; font-size: 11px; font-weight: 700; color: #991b1b;
+    letter-spacing: 0.8px; text-transform: uppercase; text-align: center;
+  }
+
+  .body { padding: 28px 36px; }
+
+  .section { margin-bottom: 24px; }
+  .section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+  .section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #64748b; }
+  .section-rule { flex: 1; height: 1px; background: #e2e8f0; }
+
+  .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
+  .field-grid.single { grid-template-columns: 1fr; }
+  .field { padding: 0; }
+  .field-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; margin-bottom: 2px; }
+  .field-value { font-size: 13px; color: #1e293b; font-weight: 500; }
+  .field-value.prominent { font-size: 15px; font-weight: 700; color: #0f172a; }
+
+  .detail-box {
+    background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #667eea;
+    border-radius: 6px; padding: 14px 16px; margin-top: 12px; font-size: 12px; color: #374151; line-height: 1.6;
+  }
+  .detail-box-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; margin-bottom: 6px; }
+
+  .score-card {
+    display: flex; align-items: center; gap: 0; background: #f8fafc;
+    border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; margin-top: 4px;
+  }
+  .score-cell { flex: 1; padding: 18px 16px; text-align: center; border-right: 1px solid #e2e8f0; }
+  .score-cell:last-child { border-right: none; }
+  .score-cell.operator { flex: 0 0 48px; font-size: 24px; font-weight: 200; color: #cbd5e1; }
+  .score-num { font-size: 32px; font-weight: 800; line-height: 1; }
+  .score-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; margin-top: 4px; }
+  .tier-badge { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; }
+
+  .points-pill {
+    display: inline-flex; align-items: center; gap: 10px;
+    background: #fffbeb; border: 2px solid #d4af37; border-radius: 8px;
+    padding: 12px 24px; margin-bottom: 16px;
+  }
+  .points-pill-num { font-size: 42px; font-weight: 900; color: #d4af37; line-height: 1; }
+  .points-pill-label { font-size: 12px; color: #92400e; line-height: 1.4; }
+  .points-pill-label strong { display: block; font-size: 14px; }
+
+  .escalation-alert {
+    background: #fef9c3; border: 1.5px solid #eab308; border-radius: 8px;
+    padding: 12px 16px; margin-top: 14px; font-size: 12px; color: #713f12;
+    display: flex; align-items: center; gap: 10px;
+  }
+  .escalation-icon { font-size: 18px; }
+
+  .tier-table { width: 100%; border-collapse: collapse; }
+  .tier-table th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; text-align: left; padding: 6px 12px; border-bottom: 2px solid #e2e8f0; }
+  .tier-table td { padding: 7px 12px; font-size: 12px; border-bottom: 1px solid #f1f5f9; }
+  .tier-table tr.current-tier td { background: #fffbeb; font-weight: 700; }
+  .tier-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
+
+  .notice {
+    background: #eff6ff; border-left: 4px solid #3b82f6; border-radius: 0 6px 6px 0;
+    padding: 12px 16px; font-size: 11.5px; color: #1e40af; line-height: 1.6;
+  }
+
+  .sig-intro { font-size: 11.5px; color: #475569; line-height: 1.7; margin-bottom: 28px; }
+  .sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
+  .sig-line { border-bottom: 1.5px solid #334155; margin-bottom: 8px; min-height: 52px; }
+  .sig-line-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #64748b; }
+  .sig-date-line { border-bottom: 1.5px solid #334155; margin-bottom: 8px; margin-top: 20px; min-height: 36px; }
+
+  .sig-filled { font-size: 14px; font-weight: 600; color: #1e293b; padding-bottom: 6px; border-bottom: 1.5px solid #334155; margin-bottom: 8px; min-height: 52px; display: flex; align-items: flex-end; }
+  .sig-date-filled { font-size: 13px; color: #1e293b; padding-bottom: 6px; border-bottom: 1.5px solid #334155; margin-bottom: 8px; margin-top: 20px; min-height: 36px; display: flex; align-items: flex-end; }
+  .ack-badge { display: inline-block; background: #dcfce7; color: #166534; border: 1px solid #86efac; border-radius: 6px; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-left: 10px; }
+
+  .footer-bar {
+    margin-top: 32px; padding: 10px 0 0; border-top: 1px solid #e2e8f0;
+    font-size: 10px; color: #94a3b8; display: flex; justify-content: space-between;
+  }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <div class="header-left">
+    ${logoTag}
+    <div>
+      <div class="header-title">CPAS Violation Record</div>
+      <div class="header-sub">Comprehensive Professional Accountability System</div>
+    </div>
+  </div>
+  <div class="header-right">
+    <div class="doc-id">${docId}</div>
+    <div class="doc-meta">Generated ${genAt}</div>
+  </div>
+</div>
+
+<div class="confidential-bar">\u26D1 Confidential \u2014 Authorized HR &amp; Management Use Only</div>
+
+<div class="body">
+
+  <!-- Employee -->
+  <div class="section">
+    <div class="section-header">
+      <div class="section-title">Employee Information</div>
+      <div class="section-rule"></div>
+    </div>
+    <div class="field-grid">
+      <div class="field">
+        <div class="field-label">Employee Name</div>
+        <div class="field-value prominent">${v.employee_name}</div>
+      </div>
+      <div class="field">
+        <div class="field-label">Department</div>
+        <div class="field-value">${v.department || '\u2014'}</div>
+      </div>
+      <div class="field">
+        <div class="field-label">Supervisor</div>
+        <div class="field-value">${v.supervisor || '\u2014'}</div>
+      </div>
+      <div class="field">
+        <div class="field-label">Witness / Documenting Officer</div>
+        <div class="field-value">${v.witness_name || '\u2014'}</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Violation -->
+  <div class="section">
+    <div class="section-header">
+      <div class="section-title">Violation Details</div>
+      <div class="section-rule"></div>
+    </div>
+    <div class="field-grid">
+      <div class="field">
+        <div class="field-label">Violation</div>
+        <div class="field-value prominent">${v.violation_name}</div>
+      </div>
+      <div class="field">
+        <div class="field-label">Category</div>
+        <div class="field-value">${v.category}</div>
+      </div>
+      <div class="field">
+        <div class="field-label">Incident Date / Time</div>
+        <div class="field-value">${fmtDT(v.incident_date, v.incident_time)}</div>
+      </div>
+      <div class="field">
+        <div class="field-label">Submitted By</div>
+        <div class="field-value">${v.submitted_by || 'System'}</div>
+      </div>
+      ${v.location ? `
+      <div class="field" style="grid-column: 1 / -1;">
+        <div class="field-label">Location / Context</div>
+        <div class="field-value">${v.location}</div>
+      </div>` : ''}
+    </div>
+    ${v.details ? `
+    <div class="detail-box">
+      <div class="detail-box-label">Incident Notes</div>
+      ${v.details}
+    </div>` : ''}
+  </div>
+
+  <!-- Points -->
+  <div class="section">
+    <div class="section-header">
+      <div class="section-title">CPAS Point Assessment</div>
+      <div class="section-rule"></div>
+    </div>
+
+    <div class="points-pill">
+      <div class="points-pill-num">${v.points}</div>
+      <div class="points-pill-label">
+        <strong>Points Assessed</strong>
+        This violation
+      </div>
+    </div>
+
+    <div class="score-card">
+      <div class="score-cell">
+        <div class="score-num" style="color:${priorTier.color};">${priorPts}</div>
+        <div class="score-label">Prior Active Points</div>
+        <span class="tier-badge" style="background:${priorTier.bg}; color:${priorTier.color};">
+          ${priorTier.label}
+        </span>
+      </div>
+      <div class="score-cell operator">+</div>
+      <div class="score-cell">
+        <div class="score-num" style="color:#d4af37;">${v.points}</div>
+        <div class="score-label">This Violation</div>
+      </div>
+      <div class="score-cell operator">=</div>
+      <div class="score-cell">
+        <div class="score-num" style="color:${newTier.color};">${newTotal}</div>
+        <div class="score-label">New Active Total</div>
+        <span class="tier-badge" style="background:${newTier.bg}; color:${newTier.color};">
+          ${newTier.label}
+        </span>
+      </div>
+    </div>
+
+    ${escalated ? `
+    <div class="escalation-alert">
+      <span class="escalation-icon">\u26A0</span>
+      <div>
+        <strong>Tier Escalation:</strong>
+        This violation advances the employee from <strong>${priorTier.label}</strong>
+        to <strong>${newTier.label}</strong>.
+      </div>
+    </div>` : ''}
+  </div>
+
+  <!-- Tier Reference -->
+  <div class="section">
+    <div class="section-header">
+      <div class="section-title">CPAS Tier Reference</div>
+      <div class="section-rule"></div>
+    </div>
+    <table class="tier-table">
+      <thead>
+        <tr>
+          <th>Points</th>
+          <th>Tier &amp; Standing</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${TIERS.map(t => {
+          const active = newTotal >= t.min && newTotal <= t.max;
+          const range  = t.min === 30 ? '30+' : `${t.min}\u2013${t.max}`;
+          return `<tr class="${active ? 'current-tier' : ''}">
+            <td>${active ? '\u25B6 ' : ''}${range}</td>
+            <td>
+              <span class="tier-dot" style="background:${t.color === '#ffffff' ? t.bg : t.color};"></span>
+              ${t.label}
+              ${active ? '<strong> \u2190 Current</strong>' : ''}
+            </td>
+          </tr>`;
+        }).join('')}
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Notice -->
+  <div class="notice" style="margin-bottom:24px;">
+    <strong>Employee Notice:</strong> CPAS points remain active for a rolling 90-day period from the date of each incident.
+    Accumulation of points may result in tier escalation and associated consequences as outlined in the Employee Handbook.
+    The employee may submit a written response within 5 business days of receiving this document.
+  </div>
+
+  <!-- Signatures -->
+  <div class="section">
+    <div class="section-header">
+      <div class="section-title">Acknowledgement &amp; Signatures${hasAck ? '<span class="ack-badge">Acknowledged</span>' : ''}</div>
+      <div class="section-rule"></div>
+    </div>
+    <p class="sig-intro">
+      By signing below, the employee acknowledges receipt of this violation record.
+      Acknowledgement does not imply agreement with the violation as documented.
+    </p>
+    <div class="sig-grid">
+      <div class="sig-block">
+        ${hasAck
+          ? `<div class="sig-filled">${ackName}</div>`
+          : '<div class="sig-line"></div>'}
+        <div class="sig-line-label">Employee Signature</div>
+        ${hasAck && ackDate
+          ? `<div class="sig-date-filled">${ackDate}</div>`
+          : '<div class="sig-date-line"></div>'}
+        <div class="sig-line-label">Date</div>
+      </div>
+      <div class="sig-block">
+        <div class="sig-line"></div>
+        <div class="sig-line-label">Supervisor / Documenting Officer Signature</div>
+        <div class="sig-date-line"></div>
+        <div class="sig-line-label">Date</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="footer-bar">
+    <span>${docId} &nbsp;\u00B7&nbsp; ${v.employee_name} &nbsp;\u00B7&nbsp; Incident: ${v.incident_date}</span>
+    <span>Message Point Media \u2014 Internal Use Only</span>
+  </div>
+
+</div>
+</body>
+</html>`;
+}
+
+module.exports = buildHtml;
diff --git a/.claude/worktrees/musing-bell/server.js b/.claude/worktrees/musing-bell/server.js
new file mode 100644
index 0000000..e75c7f3
--- /dev/null
+++ b/.claude/worktrees/musing-bell/server.js
@@ -0,0 +1,546 @@
+const express      = require('express');
+const cors         = require('cors');
+const path         = require('path');
+const db           = require('./db/database');
+const generatePdf  = require('./pdf/generator');
+
+const app  = express();
+const PORT = process.env.PORT || 3001;
+
+app.use(cors());
+app.use(express.json());
+app.use(express.static(path.join(__dirname, 'client', 'dist')));
+
+// ── 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 {
+    db.prepare(`
+      INSERT INTO audit_log (action, entity_type, entity_id, performed_by, details)
+      VALUES (?, ?, ?, ?, ?)
+    `).run(action, entityType, entityId || null, performedBy || null,
+      typeof details === 'object' ? JSON.stringify(details) : (details || null));
+  } catch (e) {
+    console.error('[AUDIT]', e.message);
+  }
+}
+
+// ── 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(),
+  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);
+});
+
+app.post('/api/employees', (req, res) => {
+  const { name, department, supervisor } = req.body;
+  if (!name) return res.status(400).json({ error: 'name is required' });
+  const existing = db.prepare('SELECT * FROM employees WHERE LOWER(name) = LOWER(?)').get(name);
+  if (existing) {
+    if (department || supervisor) {
+      db.prepare('UPDATE employees SET department = COALESCE(?, department), supervisor = COALESCE(?, supervisor) WHERE id = ?')
+        .run(department || null, supervisor || null, existing.id);
+    }
+    return res.json({ ...existing, department, supervisor });
+  }
+  const result = db.prepare('INSERT INTO employees (name, department, supervisor) VALUES (?, ?, ?)')
+    .run(name, department || null, supervisor || null);
+  audit('employee_created', 'employee', result.lastInsertRowid, null, { name });
+  res.status(201).json({ id: result.lastInsertRowid, name, department, supervisor });
+});
+
+// ── 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);
+  const emp = db.prepare('SELECT * FROM employees WHERE id = ?').get(id);
+  if (!emp) return res.status(404).json({ error: 'Employee not found' });
+
+  const { name, department, supervisor, notes, performed_by } = req.body;
+
+  // Prevent name collision with a different employee
+  if (name && name.trim() !== emp.name) {
+    const clash = db.prepare('SELECT id FROM employees WHERE LOWER(name) = LOWER(?) AND id != ?').get(name.trim(), id);
+    if (clash) return res.status(409).json({ error: 'An employee with that name already exists', conflictId: clash.id });
+  }
+
+  const newName       = (name       || emp.name).trim();
+  const newDept       = department  !== undefined ? (department  || null) : emp.department;
+  const newSupervisor = supervisor  !== undefined ? (supervisor  || null) : emp.supervisor;
+  const newNotes      = notes       !== undefined ? (notes       || null) : emp.notes;
+
+  db.prepare('UPDATE employees SET name = ?, department = ?, supervisor = ?, notes = ? WHERE id = ?')
+    .run(newName, newDept, newSupervisor, newNotes, id);
+
+  audit('employee_edited', 'employee', id, performed_by, {
+    before: { name: emp.name, department: emp.department, supervisor: emp.supervisor, notes: emp.notes },
+    after:  { name: newName,  department: newDept,        supervisor: newSupervisor,  notes: newNotes  },
+  });
+
+  res.json({ id, name: newName, department: newDept, supervisor: newSupervisor, notes: newNotes });
+});
+
+// ── 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);
+  const { source_id, performed_by } = req.body;
+  if (!source_id) return res.status(400).json({ error: 'source_id is required' });
+
+  const target = db.prepare('SELECT * FROM employees WHERE id = ?').get(targetId);
+  const source = db.prepare('SELECT * FROM employees WHERE id = ?').get(source_id);
+  if (!target) return res.status(404).json({ error: 'Target employee not found' });
+  if (!source) return res.status(404).json({ error: 'Source employee not found' });
+  if (targetId === parseInt(source_id)) return res.status(400).json({ error: 'Cannot merge an employee into themselves' });
+
+  const mergeTransaction = db.transaction(() => {
+    // Move all violations
+    const moved = db.prepare('UPDATE violations SET employee_id = ? WHERE employee_id = ?').run(targetId, source_id);
+    // Delete the source employee
+    db.prepare('DELETE FROM employees WHERE id = ?').run(source_id);
+    return moved.changes;
+  });
+
+  const violationsMoved = mergeTransaction();
+
+  audit('employee_merged', 'employee', targetId, performed_by, {
+    source: { id: source.id, name: source.name },
+    target: { id: target.id, name: target.name },
+    violations_reassigned: violationsMoved,
+  });
+
+  res.json({ success: true, violations_reassigned: violationsMoved });
+});
+
+// ── Employee notes (PATCH shorthand) ─────────────────────────────────────────
+// PATCH /api/employees/:id/notes — save free-text notes only
+app.patch('/api/employees/:id/notes', (req, res) => {
+  const id  = parseInt(req.params.id);
+  const emp = db.prepare('SELECT * FROM employees WHERE id = ?').get(id);
+  if (!emp) return res.status(404).json({ error: 'Employee not found' });
+
+  const { notes, performed_by } = req.body;
+  const newNotes = notes !== undefined ? (notes || null) : emp.notes;
+
+  db.prepare('UPDATE employees SET notes = ? WHERE id = ?').run(newNotes, id);
+  audit('employee_notes_updated', 'employee', id, performed_by, { notes: newNotes });
+  res.json({ id, notes: newNotes });
+});
+
+// Employee score (current snapshot) — includes total violations + negated count
+app.get('/api/employees/:id/score', (req, res) => {
+  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 ──────────────────────────────────────────────────────
+// 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) => {
+  const rows = db.prepare(`
+    SELECT
+      v.id,
+      v.violation_name,
+      v.violation_type,
+      v.category,
+      v.points,
+      v.incident_date,
+      DATE(v.incident_date, '+90 days')                          AS expires_on,
+      CAST(
+        JULIANDAY(DATE(v.incident_date, '+90 days')) -
+        JULIANDAY(DATE('now'))
+        AS INTEGER
+      )                                                          AS days_remaining
+    FROM violations v
+    WHERE v.employee_id = ?
+      AND v.negated = 0
+      AND v.incident_date >= DATE('now', '-90 days')
+    ORDER BY v.incident_date ASC
+  `).all(req.params.id);
+  res.json(rows);
+});
+
+// Dashboard
+app.get('/api/dashboard', (req, res) => {
+  const rows = db.prepare(`
+    SELECT e.id, e.name, e.department, e.supervisor,
+           COALESCE(s.active_points, 0)  AS active_points,
+           COALESCE(s.violation_count,0) AS violation_count
+    FROM employees e
+    LEFT JOIN active_cpas_scores s ON s.employee_id = e.id
+    ORDER BY active_points DESC, e.name ASC
+  `).all();
+  res.json(rows);
+});
+
+// Violation history (per employee) with resolutions + amendment count
+app.get('/api/violations/employee/:id', (req, res) => {
+  const limit = parseInt(req.query.limit) || 50;
+  const rows  = db.prepare(`
+    SELECT v.*, r.resolution_type, r.details AS resolution_details,
+           r.resolved_by, r.created_at AS resolved_at,
+           (SELECT COUNT(*) FROM violation_amendments a WHERE a.violation_id = v.id) AS amendment_count
+    FROM violations v
+    LEFT JOIN violation_resolutions r ON r.violation_id = v.id
+    WHERE v.employee_id = ?
+    ORDER BY v.incident_date DESC, v.created_at DESC
+    LIMIT ?
+  `).all(req.params.id, limit);
+  res.json(rows);
+});
+
+// ── Violation 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
+  `).all(req.params.id);
+  res.json(rows);
+});
+
+// Helper: compute prior_active_points at time of insert
+function getPriorActivePoints(employeeId, incidentDate) {
+  const row = db.prepare(
+    `SELECT COALESCE(SUM(points),0) AS pts
+     FROM violations
+     WHERE employee_id = ?
+       AND negated = 0
+       AND incident_date >= DATE(?, '-90 days')
+       AND incident_date < ?`
+  ).get(employeeId, incidentDate, incidentDate);
+  return row ? row.pts : 0;
+}
+
+// POST new violation
+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,
+    acknowledged_by, acknowledged_date
+  } = req.body;
+
+  if (!employee_id || !violation_type || !points || !incident_date) {
+    return res.status(400).json({ error: 'Missing required fields' });
+  }
+
+  const ptsInt   = parseInt(points);
+  const priorPts = getPriorActivePoints(employee_id, incident_date);
+
+  const result = db.prepare(`
+    INSERT INTO violations (
+      employee_id, violation_type, violation_name, category,
+      points, incident_date, incident_time, location,
+      details, submitted_by, witness_name,
+      prior_active_points,
+      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,
+    acknowledged_by || null, acknowledged_date || null
+  );
+
+  audit('violation_created', 'violation', result.lastInsertRowid, submitted_by, {
+    employee_id, violation_type, points: ptsInt, incident_date,
+  });
+
+  res.status(201).json({ id: result.lastInsertRowid });
+});
+
+// ── 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', 'acknowledged_by', 'acknowledged_date'];
+
+app.patch('/api/violations/:id/amend', (req, res) => {
+  const id        = parseInt(req.params.id);
+  const { changed_by, ...updates } = req.body;
+
+  const violation = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
+  if (!violation) return res.status(404).json({ error: 'Violation not found' });
+  if (violation.negated) return res.status(400).json({ error: 'Cannot amend a negated violation' });
+
+  // Only allow whitelisted fields to be amended
+  const allowed = Object.fromEntries(
+    Object.entries(updates).filter(([k]) => AMENDABLE_FIELDS.includes(k))
+  );
+  if (Object.keys(allowed).length === 0) {
+    return res.status(400).json({ error: 'No amendable fields provided', amendable: AMENDABLE_FIELDS });
+  }
+
+  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];
+      if (String(oldVal) !== String(newVal)) {
+        insertAmendment.run(id, changed_by || null, field, oldVal ?? null, newVal ?? null);
+      }
+    }
+  });
+
+  amendTransaction();
+
+  audit('violation_amended', 'violation', id, changed_by, { fields: Object.keys(allowed) });
+
+  const updated = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
+  res.json(updated);
+});
+
+// ── Negate a violation ───────────────────────────────────────────────────────
+app.patch('/api/violations/:id/negate', (req, res) => {
+  const { resolution_type, details, resolved_by } = req.body;
+  const id = req.params.id;
+
+  const violation = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
+  if (!violation) return res.status(404).json({ error: 'Violation not found' });
+
+  db.prepare('UPDATE violations SET negated = 1 WHERE id = ?').run(id);
+
+  const existing = db.prepare('SELECT id FROM violation_resolutions WHERE violation_id = ?').get(id);
+  if (existing) {
+    db.prepare(`
+      UPDATE violation_resolutions
+      SET resolution_type = ?, details = ?, resolved_by = ?, created_at = datetime('now')
+      WHERE violation_id = ?
+    `).run(resolution_type || 'Resolved', details || null, resolved_by || null, id);
+  } else {
+    db.prepare(`
+      INSERT INTO violation_resolutions (violation_id, resolution_type, details, resolved_by)
+      VALUES (?, ?, ?, ?)
+    `).run(id, resolution_type || 'Resolved', details || null, resolved_by || null);
+  }
+
+  audit('violation_negated', 'violation', id, resolved_by, { resolution_type });
+  res.json({ success: true });
+});
+
+// ── Restore a negated violation ──────────────────────────────────────────────
+app.patch('/api/violations/:id/restore', (req, res) => {
+  const id = req.params.id;
+
+  const violation = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
+  if (!violation) return res.status(404).json({ error: 'Violation not found' });
+
+  db.prepare('UPDATE violations SET negated = 0 WHERE id = ?').run(id);
+  db.prepare('DELETE FROM violation_resolutions WHERE violation_id = ?').run(id);
+
+  audit('violation_restored', 'violation', id, req.body?.performed_by, {});
+  res.json({ success: true });
+});
+
+// ── Hard delete a violation ──────────────────────────────────────────────────
+app.delete('/api/violations/:id', (req, res) => {
+  const id = req.params.id;
+
+  const violation = db.prepare('SELECT * FROM violations WHERE id = ?').get(id);
+  if (!violation) return res.status(404).json({ error: 'Violation not found' });
+
+  db.prepare('DELETE FROM violation_resolutions WHERE violation_id = ?').run(id);
+  db.prepare('DELETE FROM violations WHERE id = ?').run(id);
+
+  audit('violation_deleted', 'violation', id, req.body?.performed_by, {
+    violation_type: violation.violation_type, employee_id: violation.employee_id,
+  });
+  res.json({ success: true });
+});
+
+// ── 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;
+  const type   = req.query.entity_type;
+  const id     = req.query.entity_id;
+
+  let sql    = 'SELECT * FROM audit_log';
+  const args = [];
+  const where = [];
+  if (type) { where.push('entity_type = ?'); args.push(type); }
+  if (id)   { where.push('entity_id = ?');   args.push(id); }
+  if (where.length) sql += ' WHERE ' + where.join(' AND ');
+  sql += ' ORDER BY created_at DESC LIMIT ? OFFSET ?';
+  args.push(limit, offset);
+
+  res.json(db.prepare(sql).all(...args));
+});
+
+// ── Custom Violation Types ────────────────────────────────────────────────────
+// Persisted violation type definitions stored in violation_types table.
+// type_key is auto-generated (custom_<slug>) to avoid collisions with hardcoded keys.
+
+app.get('/api/violation-types', (req, res) => {
+  const rows = db.prepare('SELECT * FROM violation_types ORDER BY category ASC, name ASC').all();
+  res.json(rows.map(r => ({ ...r, fields: JSON.parse(r.fields) })));
+});
+
+app.post('/api/violation-types', (req, res) => {
+  const { name, category, chapter, description, min_points, max_points, fields, created_by } = req.body;
+  if (!name || !name.trim()) return res.status(400).json({ error: 'name is required' });
+
+  const minPts = parseInt(min_points) || 1;
+  const maxPts = parseInt(max_points) || minPts;
+  if (maxPts < minPts) return res.status(400).json({ error: 'max_points must be >= min_points' });
+
+  // Generate a unique type_key from the name, prefixed with 'custom_'
+  const base = 'custom_' + name.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
+  let typeKey = base;
+  let suffix  = 2;
+  while (db.prepare('SELECT id FROM violation_types WHERE type_key = ?').get(typeKey)) {
+    typeKey = `${base}_${suffix++}`;
+  }
+
+  try {
+    const result = db.prepare(`
+      INSERT INTO violation_types (type_key, name, category, chapter, description, min_points, max_points, fields)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+    `).run(
+      typeKey,
+      name.trim(),
+      (category || 'Custom').trim(),
+      chapter     || null,
+      description || null,
+      minPts,
+      maxPts,
+      JSON.stringify(fields && fields.length ? fields : ['description'])
+    );
+    const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(result.lastInsertRowid);
+    audit('violation_type_created', 'violation_type', result.lastInsertRowid, created_by || null, { name: row.name, category: row.category });
+    res.status(201).json({ ...row, fields: JSON.parse(row.fields) });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.put('/api/violation-types/:id', (req, res) => {
+  const id  = parseInt(req.params.id);
+  const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
+  if (!row) return res.status(404).json({ error: 'Violation type not found' });
+
+  const { name, category, chapter, description, min_points, max_points, fields, updated_by } = req.body;
+  if (!name || !name.trim()) return res.status(400).json({ error: 'name is required' });
+
+  const minPts = parseInt(min_points) || 1;
+  const maxPts = parseInt(max_points) || minPts;
+  if (maxPts < minPts) return res.status(400).json({ error: 'max_points must be >= min_points' });
+
+  db.prepare(`
+    UPDATE violation_types
+    SET name=?, category=?, chapter=?, description=?, min_points=?, max_points=?, fields=?, updated_at=CURRENT_TIMESTAMP
+    WHERE id=?
+  `).run(
+    name.trim(),
+    (category || 'Custom').trim(),
+    chapter     || null,
+    description || null,
+    minPts,
+    maxPts,
+    JSON.stringify(fields && fields.length ? fields : ['description']),
+    id
+  );
+
+  const updated = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
+  audit('violation_type_updated', 'violation_type', id, updated_by || null, { name: updated.name, category: updated.category });
+  res.json({ ...updated, fields: JSON.parse(updated.fields) });
+});
+
+app.delete('/api/violation-types/:id', (req, res) => {
+  const id  = parseInt(req.params.id);
+  const row = db.prepare('SELECT * FROM violation_types WHERE id = ?').get(id);
+  if (!row) return res.status(404).json({ error: 'Violation type not found' });
+
+  const usage = db.prepare('SELECT COUNT(*) as count FROM violations WHERE violation_type = ?').get(row.type_key);
+  if (usage.count > 0) {
+    return res.status(409).json({ error: `Cannot delete: ${usage.count} violation(s) reference this type. Negate those violations first.` });
+  }
+
+  db.prepare('DELETE FROM violation_types WHERE id = ?').run(id);
+  audit('violation_type_deleted', 'violation_type', id, null, { name: row.name, type_key: row.type_key });
+  res.json({ ok: true });
+});
+
+// ── PDF endpoint ─────────────────────────────────────────────────────────────
+app.get('/api/violations/:id/pdf', async (req, res) => {
+  try {
+    const violation = db.prepare(`
+      SELECT v.*, e.name as employee_name, e.department, e.supervisor
+      FROM violations v
+      JOIN employees e ON e.id = v.employee_id
+      WHERE v.id = ?
+    `).get(req.params.id);
+
+    if (!violation) return res.status(404).json({ error: 'Violation not found' });
+
+    const active = db.prepare('SELECT * FROM active_cpas_scores WHERE employee_id = ?')
+      .get(violation.employee_id) || { active_points: 0, violation_count: 0 };
+
+    const scoreForPdf = {
+      employee_id:     violation.employee_id,
+      active_points:   violation.prior_active_points != null ? violation.prior_active_points : active.active_points,
+      violation_count: active.violation_count,
+    };
+
+    const pdfBuffer = await generatePdf(violation, scoreForPdf);
+    const safeName  = violation.employee_name.replace(/[^a-z0-9]/gi, '_');
+
+    res.set({
+      'Content-Type':        'application/pdf',
+      'Content-Disposition': `attachment; filename="CPAS_${safeName}_${violation.incident_date}.pdf"`,
+      'Content-Length':       pdfBuffer.length,
+    });
+    res.end(pdfBuffer);
+  } catch (err) {
+    console.error('[PDF]', err);
+    res.status(500).json({ error: 'PDF generation failed', detail: err.message });
+  }
+});
+
+// SPA fallback
+app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'client', 'dist', 'index.html')));
+
+app.listen(PORT, '0.0.0.0', () => console.log(`[CPAS] Server running on port ${PORT}`));
diff --git a/AGENTS.md b/AGENTS.md
index 45b7ba8..b780131 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -92,6 +92,8 @@ Violations are **never hard-deleted** in normal workflow. Use the `negated` flag
 
 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.
 
+**Back-dated inserts are the one exception to snapshot immutability.** If a new violation's `incident_date` precedes existing violations within the 90-day window, those existing violations' snapshots are recomputed via `recomputeSnapshotsAfter()` inside the same transaction as the insert, and a `violation_snapshots_recomputed` audit entry is written. A back-dated insert is a *timeline rewrite* — the prior violations genuinely had an earlier event in their 90-day window — so their PDFs must reflect that. Negate/restore are NOT timeline rewrites and must never recompute snapshots.
+
 ### 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`.
@@ -247,7 +249,7 @@ docker run -d --name cpas -p 3001:3001 -v cpas-data:/data cpas
 ### 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 modify `prior_active_points` after a violation is inserted, EXCEPT when a back-dated insert retroactively places a new earlier event into another violation's 90-day prior window. That path is handled by `recomputeSnapshotsAfter()` in `server.js` and is audit-logged. Never recompute snapshots on negate, restore, amend, or hard delete.
 - 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.
diff --git a/CPAS Violation Tracker.md b/CPAS Violation Tracker.md
new file mode 100644
index 0000000..8cfba15
--- /dev/null
+++ b/CPAS Violation Tracker.md	
@@ -0,0 +1,141 @@
+---
+type: project
+status: active
+tags: [project, cpas, hr, internal-tool, docker, react, node, sqlite]
+repo: https://git.alwisp.com/jason/cpas
+started: 2026-03-06
+updated: 2026-05-14
+owner: Jason Stedwell
+---
+
+# CPAS Violation Tracker
+
+Single-container Dockerized web app for **CPAS** (workforce standing / violation documentation) used internally at Message Point Media. Replaces ad-hoc paper / spreadsheet violation tracking with a structured, auditable system that produces signed PDF records and surfaces tier-escalation risk live.
+
+> Repo: [git.alwisp.com/jason/cpas](https://git.alwisp.com/jason/cpas) · First commit: 2026-03-06 · Deployed on Unraid (`10.2.0.14:3001`)
+
+## Stack
+
+- **Frontend:** React + Vite (single-page app, dark theme, mobile-responsive at 375px+)
+- **Backend:** Node.js + Express
+- **DB:** SQLite via `better-sqlite3`, WAL mode, auto-migrations on boot
+- **PDF:** Puppeteer + bundled Chromium (system install inside container)
+- **Packaging:** One multi-stage Dockerfile — build React, install backend, bundle Chromium, ship as a single image
+- **Runtime requirement on dev box:** Docker Desktop only. No host Node/npm needed.
+
+## What it does
+
+It manages **employee violations against the CPAS rubric** on a rolling 90-day window:
+
+- **Company Dashboard** — every employee sorted by active CPAS points (highest risk first), with summary stat cards, tier badges, an "at-risk" flag (within 2 pts of next tier), and search + department filter.
+- **Violation Form** — pick an employee, pick a violation type, see prior 90-day count inline; recidivist auto-escalation; pre-submit tier-crossing warning; context-aware fields; one-click PDF download on submit; optional employee acknowledgment block.
+- **Employee Profile Modal** — full violation history, amendment count, edit employee, merge duplicate, negate/restore, hard delete, per-violation PDF, free-text notes/flags ("on PIP", "union member"), and a per-violation 90-day **point expiration timeline** with projected tier drops.
+- **Violation Amendment** — point value / type / incident date are immutable; non-scoring fields (location, witness, narrative, acknowledgment) are amendable with a field-level diff trail.
+- **Audit Log** — append-only record of every write action (employee CRUD, violation logged/amended/negated/restored/deleted); filterable, paginated panel from the dashboard.
+- **Toast notification system** — global success/error/warning/info, auto-dismiss with progress bar.
+- **PDF generation** — Puppeteer, snapshot of prior active points at incident time, optional employee acknowledgment block on the signature page.
+- **Stakeholder demo** — `/demo` static route with synthetic data, served before the SPA catch-all; no auth required.
+
+## CPAS Tier System
+
+| Points | Tier | Label                   |
+| ------ | ---- | ----------------------- |
+| 0–4    | 0–1  | Elite Standing          |
+| 5–9    | 1    | Realignment             |
+| 10–14  | 2    | Administrative Lockdown |
+| 15–19  | 3    | Verification            |
+| 20–24  | 4    | Risk Mitigation         |
+| 25–29  | 5    | Final Decision          |
+| 30+    | 6    | Separation              |
+
+Scores are summed over a **rolling 90-day window**; negated violations excluded.
+
+## Database
+
+Six tables + one view:
+
+- `employees` — id, name, department, supervisor, notes
+- `violations` — full incident record, including `prior_active_points` snapshot
+- `violation_resolutions` — soft-delete reason / details
+- `violation_amendments` — field-level diff log (one row per changed field)
+- `audit_log` — append-only system action log
+- `active_cpas_scores` (view) — 90-day point sum per employee
+
+Auto-migrations in `db/database.js` add new columns to existing DBs on startup — meaningful here because Jason runs this in production on Unraid, so the schema evolves without losing data.
+
+## Deployment notes worth remembering
+
+- **Unraid:** static IP on `br0` bridge (`10.2.0.14`), DB persisted at `/mnt/user/appdata/cpas/db/cpas.db`, WebUI on port 3001.
+- **`--pids-limit 2048` is critical** — Puppeteer/Chromium spawns many processes for each PDF; Unraid's default cap silently kills PDF generation.
+- **Volume:** `/mnt/user/appdata/cpas/db` → `/data`. Database survives rebuilds, image reloads, and container removal.
+- Updates are a 3-step loop: `docker build` locally → `docker save | gzip` → SMB drop into appdata → `docker load` + restart container in Unraid GUI.
+
+## Mobile
+
+Responsive design targets 375px+ (iPhone SE and up). At ≤768px the dashboard table swaps to a card-based layout (`DashboardMobile.jsx`); the nav stacks; tap targets are ≥44px; form inputs use 16px font to prevent iOS focus zoom. No external CSS library — single `mobile.css` utility sheet + a `useMediaQuery` hook. Implementation details and testing checklist live in `MOBILE_RESPONSIVE.md`.
+
+## Project structure
+
+```
+cpas/
+├── Dockerfile                  # Multi-stage: React build + Express + Chromium
+├── server.js                   # API + static SPA + /demo route
+├── db/
+│   ├── schema.sql              # Tables + 90-day active score view
+│   └── database.js             # SQLite + auto-migrations
+├── pdf/
+│   ├── generator.js            # Puppeteer
+│   └── template.js             # HTML PDF template
+├── demo/                       # /demo synthetic-data SPA
+└── client/                     # React + Vite frontend
+    └── src/
+        ├── App.jsx             # Root + footer (copyright, dev ticker, Gitea link)
+        ├── data/
+        │   ├── violations.js   # All CPAS violation definitions
+        │   └── departments.js
+        ├── hooks/useEmployeeIntelligence.js
+        └── components/         # Dashboard, ViolationForm, EmployeeModal,
+                                # AmendViolationModal, AuditLog, ToastProvider, etc.
+```
+
+## API surface (selected)
+
+- `GET /api/health` — health + build version
+- `GET /api/dashboard` — all employees with active points + violation counts
+- `GET /api/employees/:id/expiration` — roll-off timeline with days remaining
+- `POST /api/violations` — log violation (accepts `acknowledged_by`, `acknowledged_date`)
+- `PATCH /api/violations/:id/amend` — non-scoring field amendment + diff log
+- `PATCH /api/violations/:id/negated` / `/restore` — soft delete + restore
+- `GET /api/violations/:id/pdf` — PDF download
+- `GET /api/audit` — paginated audit log
+
+## Status
+
+Phase 8 of the public roadmap is complete (stakeholder demo + app footer with live dev ticker). Core HR documentation workflow is shipped: dashboard, violation entry, employee profile, amendments, audit log, expiration timeline, acknowledgment field, toast system, mobile layout.
+
+## Notable open ideas (from roadmap)
+
+**Quick wins (low effort):** column sort on dashboard, department multi-select filter, `N` keyboard shortcut for new violation, configurable at-risk threshold via env var, version.json injected at build time.
+
+**Reporting:** violation trend chart (daily/weekly/monthly), department heat map, per-employee sparklines in profile modal.
+
+**Workflow:** draft/pending violations before finalize, violation templates.
+
+**Notifications:** tier-escalation alerts (email or in-app) on crossing into Tier 2+.
+
+**Infra (higher effort):** multi-user auth with roles (currently runs on trusted internal LAN with none), scheduled DB backup, dark/light theme toggle.
+
+## Review take
+
+The app is well-scoped and visibly production-shaped, not a hobby project. Strong signals: append-only audit log, field-level amendment diffs, immutable scoring fields, `prior_active_points` snapshot baked into each violation row so historical PDFs stay accurate, and auto-migrations so the schema can evolve in place on a live Unraid deployment. The Unraid-specific install guide explicitly calls out `--pids-limit 2048` for Chromium, which is the kind of footgun that only gets documented after it's been hit in production — that detail alone tells you this is being actually used.
+
+The single biggest gap relative to its current capability is **auth**. Everything else on the roadmap is incremental polish; multi-user auth with roles is the one change that meaningfully expands who can use the system safely. Worth pairing it with the proposed scheduled DB backup, since the moment more than one supervisor is writing, accidental damage gets more likely.
+
+A secondary observation: the audit log + amendment diff infrastructure is already strong enough to support a "who changed what, when" view per employee — that's basically free reporting if surfaced in the profile modal as a timeline.
+
+## Links
+
+- Repo — [git.alwisp.com/jason/cpas](https://git.alwisp.com/jason/cpas)
+- Local install guide — `README.md` (in repo)
+- Unraid install guide — `README_UNRAID_INSTALL.md`
+- Mobile implementation notes — `MOBILE_RESPONSIVE.md`
diff --git a/server.js b/server.js
index 65b89f5..a6a8f04 100755
--- a/server.js
+++ b/server.js
@@ -260,6 +260,33 @@ function getPriorActivePoints(employeeId, incidentDate) {
   return row ? row.pts : 0;
 }
 
+// Helper: after a back-dated insert, refresh snapshots on any existing
+// violations whose 90-day prior-window now includes the new (earlier)
+// incident_date. Without this, their PDFs would still show the pre-backdate
+// "Prior Active Points" and miss the inserted earlier violation.
+// Snapshots are still immutable w.r.t. negate/restore — only timeline-
+// rewriting events (back-dated inserts) trigger a refresh.
+function recomputeSnapshotsAfter(employeeId, incidentDate) {
+  const affected = db.prepare(`
+    SELECT id, incident_date, prior_active_points
+    FROM violations
+    WHERE employee_id = ?
+      AND incident_date > ?
+      AND incident_date <= DATE(?, '+90 days')
+  `).all(employeeId, incidentDate, incidentDate);
+
+  const updateStmt = db.prepare('UPDATE violations SET prior_active_points = ? WHERE id = ?');
+  const changes = [];
+  for (const v of affected) {
+    const newPrior = getPriorActivePoints(employeeId, v.incident_date);
+    if (newPrior !== v.prior_active_points) {
+      updateStmt.run(newPrior, v.id);
+      changes.push({ id: v.id, incident_date: v.incident_date, old: v.prior_active_points, new: newPrior });
+    }
+  }
+  return changes;
+}
+
 // POST new violation
 app.post('/api/violations', (req, res) => {
   const {
@@ -275,32 +302,51 @@ app.post('/api/violations', (req, res) => {
   }
 
   const ptsInt   = parseInt(points);
-  const priorPts = getPriorActivePoints(employee_id, incident_date);
 
-  const result = db.prepare(`
-    INSERT INTO violations (
-      employee_id, violation_type, violation_name, category,
-      points, incident_date, incident_time, location,
-      details, submitted_by, witness_name,
-      prior_active_points,
-      acknowledged_by, acknowledged_date,
-      amount
-    ) 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,
-    acknowledged_by || null, acknowledged_date || null,
-    amount || null
-  );
+  // Insert + downstream snapshot refresh run in a single transaction so a
+  // failed recompute can't leave the system with a new violation and stale
+  // sibling snapshots.
+  const insertTxn = db.transaction(() => {
+    const priorPts = getPriorActivePoints(employee_id, incident_date);
+    const result = db.prepare(`
+      INSERT INTO violations (
+        employee_id, violation_type, violation_name, category,
+        points, incident_date, incident_time, location,
+        details, submitted_by, witness_name,
+        prior_active_points,
+        acknowledged_by, acknowledged_date,
+        amount
+      ) 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,
+      acknowledged_by || null, acknowledged_date || null,
+      amount || null
+    );
+    const refreshed = recomputeSnapshotsAfter(employee_id, incident_date);
+    return { id: result.lastInsertRowid, refreshed };
+  });
 
-  audit('violation_created', 'violation', result.lastInsertRowid, submitted_by, {
+  const { id: newId, refreshed } = insertTxn();
+
+  audit('violation_created', 'violation', newId, submitted_by, {
     employee_id, violation_type, points: ptsInt, incident_date,
   });
 
-  res.status(201).json({ id: result.lastInsertRowid });
+  // Back-dated insert: log the snapshot refresh so the audit trail explains
+  // why downstream violations' PDFs now show different "Prior Active Points".
+  if (refreshed.length > 0) {
+    audit('violation_snapshots_recomputed', 'violation', newId, submitted_by, {
+      reason: 'backdated_insert',
+      trigger_incident_date: incident_date,
+      affected: refreshed,
+    });
+  }
+
+  res.status(201).json({ id: newId });
 });
 
 // ── Violation Amendment (edit) ───────────────────────────────────────────────
-- 
2.52.0


From 6ddc09aa714d74430ff15cabea68a2745f4f8aac Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Tue, 19 May 2026 00:34:58 -0500
Subject: [PATCH 80/86] fixes

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4c5f206
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.claude/
-- 
2.52.0


From 2d4920bd154970a01f2b62d5c7ed35cabbaf0e36 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Tue, 19 May 2026 09:29:41 -0500
Subject: [PATCH 81/86] backfill button and usage

---
 .claude/settings.local.json             |  6 ++-
 AGENTS.md                               | 10 ++++-
 CPAS Violation Tracker.md               |  2 +-
 README.md                               | 41 +++++++++++++++++++
 client/src/components/EmployeeModal.jsx | 38 +++++++++++++++++-
 client/src/components/ReadmeModal.jsx   | 27 +++++++++++++
 server.js                               | 52 +++++++++++++++++++++++++
 7 files changed, 171 insertions(+), 5 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index c1e5d28..f337615 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -5,7 +5,11 @@
       "Bash(env)",
       "Bash(findstr /I OBSIDIAN)",
       "Bash(set)",
-      "Bash(xargs grep -l -i \"obsidian\")"
+      "Bash(xargs grep -l -i \"obsidian\")",
+      "Bash(xargs -I {} git log --oneline -1 {})",
+      "Bash(ls -la data)",
+      "Bash(ls *.db)",
+      "Bash(find . -name \"cpas.db\" -not -path \"*/node_modules/*\")"
     ]
   }
 }
diff --git a/AGENTS.md b/AGENTS.md
index b780131..10bbf05 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -92,7 +92,13 @@ Violations are **never hard-deleted** in normal workflow. Use the `negated` flag
 
 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.
 
-**Back-dated inserts are the one exception to snapshot immutability.** If a new violation's `incident_date` precedes existing violations within the 90-day window, those existing violations' snapshots are recomputed via `recomputeSnapshotsAfter()` inside the same transaction as the insert, and a `violation_snapshots_recomputed` audit entry is written. A back-dated insert is a *timeline rewrite* — the prior violations genuinely had an earlier event in their 90-day window — so their PDFs must reflect that. Negate/restore are NOT timeline rewrites and must never recompute snapshots.
+**There are exactly two sanctioned paths that may modify `prior_active_points` after insert; both are audit-logged as `violation_snapshots_recomputed`:**
+
+1. **Back-dated insert (automatic).** If a new violation's `incident_date` precedes existing violations within the 90-day window, those existing violations' snapshots are recomputed via `recomputeSnapshotsAfter()` inside the same transaction as the insert. Logged with `reason: "backdated_insert"`. A back-dated insert is a *timeline rewrite* — the prior violations genuinely had an earlier event in their 90-day window — so their PDFs must reflect that.
+
+2. **Manual backfill (admin-triggered).** `POST /api/employees/:id/recompute-snapshots` calls `recomputeAllSnapshotsForEmployee()` and rewrites every row for that employee from current data. Logged with `reason: "manual_backfill"`. This exists to repair drift from back-dated inserts that happened under older code (before path #1 existed) or any other case where the snapshot diverged from current truth. It is exposed in the UI as the **↻ Backfill Snapshots** button in the Employee Profile Modal next to the Active Violations header. Treat it as a targeted repair tool, not a routine maintenance step.
+
+Negate/restore/amend/hard-delete are NOT timeline rewrites and must never recompute snapshots — PDFs remain stable through those operations by design.
 
 ### Audit Log
 
@@ -249,7 +255,7 @@ docker run -d --name cpas -p 3001:3001 -v cpas-data:/data cpas
 ### 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, EXCEPT when a back-dated insert retroactively places a new earlier event into another violation's 90-day prior window. That path is handled by `recomputeSnapshotsAfter()` in `server.js` and is audit-logged. Never recompute snapshots on negate, restore, amend, or hard delete.
+- Do not modify `prior_active_points` after a violation is inserted, EXCEPT via one of the two sanctioned paths: automatic recompute on a back-dated insert (`recomputeSnapshotsAfter()`), or manual admin backfill (`recomputeAllSnapshotsForEmployee()` behind `POST /api/employees/:id/recompute-snapshots` and the **↻ Backfill Snapshots** UI button). Both are audit-logged as `violation_snapshots_recomputed`. Never recompute snapshots on negate, restore, amend, or hard delete.
 - 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.
diff --git a/CPAS Violation Tracker.md b/CPAS Violation Tracker.md
index 8cfba15..74765a7 100644
--- a/CPAS Violation Tracker.md	
+++ b/CPAS Violation Tracker.md	
@@ -29,7 +29,7 @@ It manages **employee violations against the CPAS rubric** on a rolling 90-day w
 
 - **Company Dashboard** — every employee sorted by active CPAS points (highest risk first), with summary stat cards, tier badges, an "at-risk" flag (within 2 pts of next tier), and search + department filter.
 - **Violation Form** — pick an employee, pick a violation type, see prior 90-day count inline; recidivist auto-escalation; pre-submit tier-crossing warning; context-aware fields; one-click PDF download on submit; optional employee acknowledgment block.
-- **Employee Profile Modal** — full violation history, amendment count, edit employee, merge duplicate, negate/restore, hard delete, per-violation PDF, free-text notes/flags ("on PIP", "union member"), and a per-violation 90-day **point expiration timeline** with projected tier drops.
+- **Employee Profile Modal** — full violation history, amendment count, edit employee, merge duplicate, negate/restore, hard delete, per-violation PDF, free-text notes/flags ("on PIP", "union member"), a per-violation 90-day **point expiration timeline** with projected tier drops, and a **↻ Backfill Snapshots** repair button that rebuilds the `prior_active_points` snapshot on every violation for that employee (use after a back-date if older PDFs show stale prior-point totals; audit-logged with reason `manual_backfill`).
 - **Violation Amendment** — point value / type / incident date are immutable; non-scoring fields (location, witness, narrative, acknowledgment) are amendable with a field-level diff trail.
 - **Audit Log** — append-only record of every write action (employee CRUD, violation logged/amended/negated/restored/deleted); filterable, paginated panel from the dashboard.
 - **Toast notification system** — global success/error/warning/info, auto-dismiss with progress bar.
diff --git a/README.md b/README.md
index a1cf124..ea5792a 100755
--- a/README.md
+++ b/README.md
@@ -158,6 +158,7 @@ Useful for showing the app to stakeholders without exposing live employee data.
 - 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
+- **↻ Backfill Snapshots** button (next to the Active Violations header) — manually rebuilds the `prior_active_points` snapshot on every violation for this employee. Use after back-dating a violation under older code, or any time a regenerated PDF shows stale prior-point totals. Audit-logged as `violation_snapshots_recomputed` with reason `manual_backfill`. See [Backfilling Prior-Points Snapshots](#backfilling-prior-points-snapshots) below.
 - **Toast notifications** for all actions: negate, restore, delete, amend, PDF download, employee edit
 
 ### Audit Log
@@ -208,6 +209,45 @@ Scores are computed over a **rolling 90-day window** (negated violations exclude
 - 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
+- **Back-dated inserts** auto-refresh the snapshot on downstream violations whose 90-day prior window now includes the new earlier event (handled inside the insert transaction by `recomputeSnapshotsAfter()`). If a back-date happened under older code that lacked this auto-refresh, use the **↻ Backfill Snapshots** button in the Employee Profile Modal — see [Backfilling Prior-Points Snapshots](#backfilling-prior-points-snapshots).
+
+---
+
+## Backfilling Prior-Points Snapshots
+
+Each violation stores a `prior_active_points` snapshot at insert time so its PDF always reflects the score *as it was on the incident date* (and stays stable through later negate/restore actions). Normally you never touch this column.
+
+There is one situation where the snapshot can drift from current truth: a violation was back-dated *before* `recomputeSnapshotsAfter()` shipped (commit `e2c352d`), so the auto-refresh never ran on the violations that now sit inside its 90-day window. Symptom: re-downloading the PDF for the newer violation shows "Prior Active Points: 0" even though an earlier active violation clearly exists in the timeline.
+
+**To fix:**
+
+1. Open the affected employee's profile modal.
+2. Click **↻ Backfill Snapshots** next to the **Active Violations** header.
+3. Confirm the prompt. A toast reports `Updated X of Y snapshot(s)` or `Snapshots already up to date`.
+4. Re-download the PDFs — they now reflect the corrected prior totals.
+
+**What it does, exactly:**
+
+- Iterates every violation belonging to that employee (active *and* negated).
+- Recomputes each row's `prior_active_points` using the current set of non-negated violations in the 90 days before its `incident_date`.
+- Writes only the rows that actually changed and reports the diff.
+- Runs inside a single transaction.
+- Writes one `violation_snapshots_recomputed` entry to the audit log with `reason: "manual_backfill"` and the per-row before/after values.
+
+**When *not* to use it:**
+
+- After a negate, restore, amend, or hard delete in normal workflow. The auto-managed snapshot is correct in those cases by design (PDFs are intentionally stable through negate/restore).
+- As a routine maintenance step. It's a targeted repair tool, not a recurring task. If you find yourself reaching for it after normal back-dated inserts, file a bug — the auto-recompute should already be handling those.
+
+**API endpoint:** `POST /api/employees/:id/recompute-snapshots`
+
+Response shape:
+
+```json
+{ "success": true, "scanned": 2, "updated": 1, "changes": [
+  { "id": 47, "incident_date": "2026-04-02", "old": 0, "new": 3 }
+]}
+```
 
 ---
 
@@ -222,6 +262,7 @@ Scores are computed over a **rolling 90-day window** (negated violations exclude
 | PATCH | `/api/employees/:id` | Edit name, department, supervisor, or notes |
 | PATCH | `/api/employees/:id/notes` | Save employee notes only (shorthand) |
 | POST | `/api/employees/:id/merge` | Merge duplicate employee; reassigns all violations |
+| POST | `/api/employees/:id/recompute-snapshots` | Manual backfill — rebuild `prior_active_points` on every violation for this employee. See [Backfilling Prior-Points Snapshots](#backfilling-prior-points-snapshots) |
 | GET | `/api/employees/:id/score` | Get active CPAS score for employee |
 | GET | `/api/employees/:id/expiration` | Active violation roll-off timeline with days remaining |
 | GET | `/api/employees/:id/violation-counts` | 90-day non-negated counts grouped by violation type |
diff --git a/client/src/components/EmployeeModal.jsx b/client/src/components/EmployeeModal.jsx
index 2c0870e..28f3eac 100755
--- a/client/src/components/EmployeeModal.jsx
+++ b/client/src/components/EmployeeModal.jsx
@@ -86,6 +86,11 @@ const s = {
     fontSize: '9px', fontWeight: 700, background: '#0e2a2a', color: '#4db6ac',
     border: '1px solid #1a4a4a', verticalAlign: 'middle',
   },
+  backfillBtn: {
+    background: 'none', border: '1px solid #d4af37', color: '#ffd666',
+    borderRadius: '4px', padding: '4px 10px', fontSize: '11px',
+    cursor: 'pointer', fontWeight: 600,
+  },
 };
 
 export default function EmployeeModal({ employeeId, onClose }) {
@@ -156,6 +161,26 @@ export default function EmployeeModal({ employeeId, onClose }) {
     }
   };
 
+  const handleRecomputeSnapshots = async () => {
+    if (!window.confirm(
+      'Rebuild the "Prior Active Points" snapshot on every violation for this employee?\n\n' +
+      'Use this after back-dating a violation if older PDFs no longer reflect the correct prior-points total. ' +
+      'Existing PDFs will regenerate with up-to-date numbers.'
+    )) return;
+    try {
+      const r = await axios.post(`/api/employees/${employeeId}/recompute-snapshots`);
+      const { scanned, updated } = r.data;
+      if (updated === 0) {
+        toast.success(`Snapshots already up to date (${scanned} checked).`);
+      } else {
+        toast.success(`Updated ${updated} of ${scanned} snapshot${updated === 1 ? '' : 's'}.`);
+      }
+      load();
+    } catch (err) {
+      toast.error('Backfill failed: ' + (err.response?.data?.error || err.message));
+    }
+  };
+
   const handleNegate = async ({ resolution_type, details, resolved_by }) => {
     try {
       await axios.patch(`/api/violations/${negating.id}/negate`, { resolution_type, details, resolved_by });
@@ -251,7 +276,18 @@ export default function EmployeeModal({ employeeId, onClose }) {
               )}
 
               {/* ── Active Violations ── */}
-              <div style={s.sectionHd}>Active Violations</div>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '24px', marginBottom: '10px' }}>
+                <div style={{ ...s.sectionHd, marginTop: 0, marginBottom: 0 }}>Active Violations</div>
+                {violations.length > 0 && (
+                  <button
+                    style={s.backfillBtn}
+                    onClick={handleRecomputeSnapshots}
+                    title="Rebuild prior-points snapshot on each violation. Use after a back-dated insert if older PDFs show the wrong Prior Active Points."
+                  >
+                    ↻ Backfill Snapshots
+                  </button>
+                )}
+              </div>
               {active.length === 0 ? (
                 <div style={{ color: '#777990', fontStyle: 'italic', fontSize: '12px' }}>
                   No active violations on record.
diff --git a/client/src/components/ReadmeModal.jsx b/client/src/components/ReadmeModal.jsx
index fee0a27..2ee2bac 100644
--- a/client/src/components/ReadmeModal.jsx
+++ b/client/src/components/ReadmeModal.jsx
@@ -164,6 +164,31 @@ Update name, department, or supervisor. Changes are logged to the audit trail.
 #### Merge Duplicate
 If the same employee exists under two names, use Merge to reassign all violations from the duplicate to the canonical record. The duplicate is then deleted. This cannot be undone.
 
+#### Backfill Snapshots (repair tool)
+
+Each violation stores a **prior-points snapshot** at submission time so its PDF always shows the score *as it was on the incident date*. Normally you never touch this — it's set on insert, refreshed automatically when a back-dated violation lands inside another violation's 90-day window, and otherwise locked. PDFs stay stable through negate/restore by design.
+
+The **↻ Backfill Snapshots** button sits next to the **Active Violations** header in the profile modal. It rebuilds the snapshot on every violation for that employee using current data.
+
+**When to use it:**
+
+- After back-dating a violation, an older PDF still shows "Prior Active Points: 0" even though an earlier violation now clearly exists in the timeline.
+- More generally: any time a regenerated PDF disagrees with what you see in the Point Expiration Timeline (the timeline is computed live; PDFs use the snapshot).
+
+**When *not* to use it:**
+
+- After a negate, restore, amend, or hard delete in normal workflow. The system intentionally keeps existing PDFs stable through those operations.
+- As a routine maintenance step. If you keep needing it after ordinary back-dated inserts, that's a bug worth reporting — the auto-refresh should already be covering you.
+
+**What clicking it does:**
+
+1. Iterates every violation belonging to the employee (active and negated).
+2. Recomputes each row's prior-points snapshot from the current set of non-negated violations in the 90 days before its incident date.
+3. Writes only the rows that actually changed.
+4. Records one entry in the audit log (action: \`violation_snapshots_recomputed\`, reason: \`manual_backfill\`) with the per-row before/after values.
+
+A toast confirms the outcome — either *"Updated X of Y snapshots"* or *"Snapshots already up to date"*. Re-download any affected PDFs after running it; the new totals will appear immediately.
+
 ---
 
 ### Audit Log
@@ -217,6 +242,7 @@ Toasts auto-dismiss after a few seconds (errors persist longer). Each toast has
 | Edit employee name / dept / supervisor | Yes | Logged to audit trail |
 | Merge duplicate employees | Yes | Irreversible |
 | Add / edit employee notes | Yes | Does not affect score |
+| Recompute prior-points snapshot | Yes | Two paths only: auto (back-dated insert) or **↻ Backfill Snapshots** button. Never touched by negate, restore, amend, or hard delete |
 
 ---
 
@@ -237,6 +263,7 @@ Toasts auto-dismiss after a few seconds (errors persist longer). Each toast has
 - 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
+- Backfill Snapshots — per-employee repair tool that rebuilds the prior-points snapshot on every violation when older PDFs drift from current data
 
 ---
 
diff --git a/server.js b/server.js
index a6a8f04..b311feb 100755
--- a/server.js
+++ b/server.js
@@ -287,6 +287,58 @@ function recomputeSnapshotsAfter(employeeId, incidentDate) {
   return changes;
 }
 
+// Helper: rebuild prior_active_points for every violation belonging to an
+// employee, regardless of negate state. Used by the manual backfill button
+// to repair snapshots after a back-dated insert that happened under older
+// code (before recomputeSnapshotsAfter existed) or any case where the
+// per-row snapshot has drifted from current data.
+function recomputeAllSnapshotsForEmployee(employeeId) {
+  const rows = db.prepare(`
+    SELECT id, incident_date, prior_active_points
+    FROM violations
+    WHERE employee_id = ?
+    ORDER BY incident_date ASC
+  `).all(employeeId);
+
+  const updateStmt = db.prepare('UPDATE violations SET prior_active_points = ? WHERE id = ?');
+  const changes = [];
+  for (const v of rows) {
+    const newPrior = getPriorActivePoints(employeeId, v.incident_date);
+    if (newPrior !== v.prior_active_points) {
+      updateStmt.run(newPrior, v.id);
+      changes.push({ id: v.id, incident_date: v.incident_date, old: v.prior_active_points, new: newPrior });
+    }
+  }
+  return { scanned: rows.length, changes };
+}
+
+// POST /api/employees/:id/recompute-snapshots
+// Manual backfill — rebuild prior_active_points for every violation on this
+// employee. Use after a back-dated insert under older code left downstream
+// PDFs showing stale "Prior Active Points".
+app.post('/api/employees/:id/recompute-snapshots', (req, res) => {
+  const empId = parseInt(req.params.id);
+  const emp   = db.prepare('SELECT id, name FROM employees WHERE id = ?').get(empId);
+  if (!emp) return res.status(404).json({ error: 'Employee not found' });
+
+  const result = db.transaction(() => recomputeAllSnapshotsForEmployee(empId))();
+
+  if (result.changes.length > 0) {
+    audit('violation_snapshots_recomputed', 'employee', empId, req.body?.performed_by, {
+      reason: 'manual_backfill',
+      scanned: result.scanned,
+      affected: result.changes,
+    });
+  }
+
+  res.json({
+    success:  true,
+    scanned:  result.scanned,
+    updated:  result.changes.length,
+    changes:  result.changes,
+  });
+});
+
 // POST new violation
 app.post('/api/violations', (req, res) => {
   const {
-- 
2.52.0


From 2a1fe64474494d0fe7a5d52fb21eabbd6615caf5 Mon Sep 17 00:00:00 2001
From: mpmedia <mpm@mpmedia.tv>
Date: Mon, 25 May 2026 12:21:37 -0500
Subject: [PATCH 82/86] docs: replace git.alwisp.com with git.mpm.to

---
 .claude/worktrees/musing-bell/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.claude/worktrees/musing-bell/README.md b/.claude/worktrees/musing-bell/README.md
index db9a258..939115f 100644
--- a/.claude/worktrees/musing-bell/README.md
+++ b/.claude/worktrees/musing-bell/README.md
@@ -3,7 +3,7 @@
 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)
+> © Jason Stedwell · [git.mpm.to/jason/cpas](https://git.mpm.to/jason/cpas)
 
 ---
 
@@ -184,7 +184,7 @@ Useful for showing the app to stakeholders without exposing live employee data.
 ### 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`
+- **Gitea repo link** with icon — links directly to `git.mpm.to/jason/cpas`
 
 ### CPAS Tier System
 
-- 
2.52.0


From e4655fd621ed77b98b8f62ce89a7bc7b0894cf9f Mon Sep 17 00:00:00 2001
From: mpmedia <mpm@mpmedia.tv>
Date: Mon, 25 May 2026 12:21:42 -0500
Subject: [PATCH 83/86] docs: replace git.alwisp.com with git.mpm.to

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index ea5792a..527506c 100755
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 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)
+> © Jason Stedwell · [git.mpm.to/jason/cpas](https://git.mpm.to/jason/cpas)
 
 ---
 
@@ -186,7 +186,7 @@ Useful for showing the app to stakeholders without exposing live employee data.
 ### 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`
+- **Gitea repo link** with icon — links directly to `git.mpm.to/jason/cpas`
 
 ### CPAS Tier System
 
-- 
2.52.0


From 5778afa1d1046cc54d941abc1d4773157a93ca2d Mon Sep 17 00:00:00 2001
From: mpmedia <mpm@mpmedia.tv>
Date: Mon, 25 May 2026 12:28:51 -0500
Subject: [PATCH 84/86] docs: fix repo owner path (jason -> mpm)

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 527506c..2b0987f 100755
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 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.mpm.to/jason/cpas](https://git.mpm.to/jason/cpas)
+> © Jason Stedwell · [git.mpm.to/mpm/cpas](https://git.mpm.to/mpm/cpas)
 
 ---
 
@@ -186,7 +186,7 @@ Useful for showing the app to stakeholders without exposing live employee data.
 ### 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.mpm.to/jason/cpas`
+- **Gitea repo link** with icon — links directly to `git.mpm.to/mpm/cpas`
 
 ### CPAS Tier System
 
-- 
2.52.0


From aca131f9cc61623a0e2cf410cbfeee19e6f049ef Mon Sep 17 00:00:00 2001
From: mpmedia <mpm@mpmedia.tv>
Date: Mon, 25 May 2026 12:30:18 -0500
Subject: [PATCH 85/86] docs: fix repo owner path (jason -> mpm)

---
 .claude/worktrees/musing-bell/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.claude/worktrees/musing-bell/README.md b/.claude/worktrees/musing-bell/README.md
index 939115f..df8b4e0 100644
--- a/.claude/worktrees/musing-bell/README.md
+++ b/.claude/worktrees/musing-bell/README.md
@@ -3,7 +3,7 @@
 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.mpm.to/jason/cpas](https://git.mpm.to/jason/cpas)
+> © Jason Stedwell · [git.mpm.to/mpm/cpas](https://git.mpm.to/mpm/cpas)
 
 ---
 
@@ -184,7 +184,7 @@ Useful for showing the app to stakeholders without exposing live employee data.
 ### 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.mpm.to/jason/cpas`
+- **Gitea repo link** with icon — links directly to `git.mpm.to/mpm/cpas`
 
 ### CPAS Tier System
 
-- 
2.52.0


From ec4b756120dce06b7a2a7aa642b1e58492d0ff18 Mon Sep 17 00:00:00 2001
From: jason <jason@mpmedia.tv>
Date: Wed, 27 May 2026 07:55:59 -0500
Subject: [PATCH 86/86] Delete .gitea/workflows/docker-build.yml

---
 .gitea/workflows/docker-build.yml | 25 -------------------------
 1 file changed, 25 deletions(-)
 delete mode 100644 .gitea/workflows/docker-build.yml

diff --git a/.gitea/workflows/docker-build.yml b/.gitea/workflows/docker-build.yml
deleted file mode 100644
index 3d499eb..0000000
--- a/.gitea/workflows/docker-build.yml
+++ /dev/null
@@ -1,25 +0,0 @@
-name: Build and Push Docker Image
-on:
-  push:
-    branches: [main]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    container:
-      image: catthehacker/ubuntu:act-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Log in to Gitea Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: registry.alwisp.com
-          username: ${{ secrets.REGISTRY_USER }}
-          password: ${{ secrets.REGISTRY_TOKEN }}
-
-      - name: Build and Push
-        run: |
-          docker build -t registry.alwisp.com/${{ gitea.repository_owner }}/${{ gitea.repository }}:latest .
-          docker push registry.alwisp.com/${{ gitea.repository_owner }}/${{ gitea.repository }}:latest
\ No newline at end of file
-- 
2.52.0