From 0a8b6e44d8e9d6876ec81996df32691f2855f6b4 Mon Sep 17 00:00:00 2001 From: jason Date: Sat, 7 Mar 2026 09:40:34 -0600 Subject: [PATCH 1/6] =?UTF-8?q?docs:=20update=20README=20=E2=80=94=20mark?= =?UTF-8?q?=20roadmap=20items=20complete,=20add=20new=20features,=20update?= =?UTF-8?q?=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 From be2d1fa68eb801b723ef4055d4602452bc9e19b1 Mon Sep 17 00:00:00 2001 From: jason Date: Sat, 7 Mar 2026 09:41:50 -0600 Subject: [PATCH 2/6] 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, From b02464330b01b39ca9400d369b372feec0fe3000 Mon Sep 17 00:00:00 2001 From: jason Date: Sat, 7 Mar 2026 09:42:59 -0600 Subject: [PATCH 3/6] 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(` From 37efd596dd9e22d8076167d64bae62a9f199ea8e Mon Sep 17 00:00:00 2001 From: jason Date: Sat, 7 Mar 2026 09:43:31 -0600 Subject: [PATCH 4/6] =?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 ( +
+
Point Expiration Timeline
+
Loading…
+
+ ); + + if (items.length === 0) return ( +
+
Point Expiration Timeline
+
No active violations β€” nothing to expire.
+
+ ); + + // 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 ( +
+
Point Expiration Timeline
+ + {projected.map((item) => { + const color = urgencyColor(item.days_remaining); + const pct = (item.days_remaining / 90) * 100; + return ( +
+ {/* Violation name */} +
{item.violation_name}
+ + {/* Points badge */} +
βˆ’{item.points}
+ + {/* Progress bar: how much of the 90 days has elapsed */} +
+
+
+ + {/* Days remaining pill */} +
+ {item.days_remaining <= 0 ? 'Expiring today' : `${item.days_remaining}d`} +
+ + {/* Expiry date */} +
{item.expires_on}
+ + {/* Tier drop indicator */} + {item.tierDropped && ( +
+ ↓ {item.tierAfter.label} +
+ )} +
+ ); + })} + + {/* Projection summary */} +
+
+ Projected score after each expiration +
+ {projected.map((item, i) => ( +
+ {item.expires_on} β€” {item.violation_name} + + {item.pointsAfter} pts + {item.tierDropped && ( + + β†’ {item.tierAfter.label} + + )} + +
+ ))} +
+
+ ); +} From 328fc6f307e0640c82ae343a0be912707179d9c0 Mon Sep 17 00:00:00 2001 From: jason Date: Sat, 7 Mar 2026 09:43:54 -0600 Subject: [PATCH 5/6] =?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 ( +
+
Notes & Flags
+ + {!editing ? ( +
{ setDraft(saved); setEditing(true); }} + title="Click to edit" + > + ✎ edit + {lines.length === 0 ? ( + No notes β€” click to add + ) : ( +
+ {lines.map((line, i) => ( + {line} + ))} +
+ )} +
+ ) : ( +
+ {/* Quick-add tag buttons */} +
+ {QUICK_TAGS.map(tag => ( + + ))} +
+ +