feat(employees): management surface — /employees API routes + owner-only Employees page
Phase 2 of the quote-to-close funnel slice. Six /employees routes in apps/hq/src/api.ts (GET requireAuth for the picker; POST/PATCH/deactivate/ reactivate/password owner-only, acting as the signed-in user); Employees page (table + add/edit/reset-password forms, email immutable on edit, count shown, no truncation); owner-only nav item beside Document Template; typed client fns in hq-web api.ts. 6 new route tests (192 total). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>feat/client-detail-redesign
Thomas Joise
5 days ago
parent
51e6d30e86
commit
d4388c4f63
@ -0,0 +1,191 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { Badge, Button, DataTable, EmptyState, Field, Notice, PageHeader, Toolbar } from '@sims/ui'
|
||||||
|
import {
|
||||||
|
createEmployee, deactivateEmployee, getEmployees, patchEmployee,
|
||||||
|
reactivateEmployee, resetEmployeePassword,
|
||||||
|
EMPLOYEE_ROLES, type Employee, type EmployeeRole,
|
||||||
|
} from '../api'
|
||||||
|
import { useData } from './Clients'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Employee management (owner-only page; the nav item is hidden for others and the
|
||||||
|
* server 403s every mutation anyway). Standard table per spec §6a: name, email,
|
||||||
|
* role, active, actions — plus add / edit / reset-password forms. Email is the
|
||||||
|
* login id and is immutable once created.
|
||||||
|
*/
|
||||||
|
export function Employees() {
|
||||||
|
const list = useData(getEmployees, [])
|
||||||
|
const [adding, setAdding] = useState(false)
|
||||||
|
const [editing, setEditing] = useState<Employee | undefined>()
|
||||||
|
const [resetting, setResetting] = useState<Employee | undefined>()
|
||||||
|
const [error, setError] = useState<string | undefined>()
|
||||||
|
|
||||||
|
const act = (p: Promise<unknown>) => {
|
||||||
|
setError(undefined)
|
||||||
|
p.then(() => list.reload()).catch((e: Error) => setError(e.message))
|
||||||
|
}
|
||||||
|
|
||||||
|
const employees = list.data?.employees
|
||||||
|
return (
|
||||||
|
<div className="wf-page">
|
||||||
|
<PageHeader
|
||||||
|
title="Employees"
|
||||||
|
desc="Console users — owner manages accounts, roles and passwords. Deactivation locks the account out immediately."
|
||||||
|
actions={(
|
||||||
|
<Button tone="primary" onClick={() => { setAdding((v) => !v); setEditing(undefined); setResetting(undefined) }}>
|
||||||
|
+ Add employee
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{adding && (
|
||||||
|
<AddEmployeeForm
|
||||||
|
onDone={() => { setAdding(false); list.reload() }}
|
||||||
|
onCancel={() => setAdding(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{editing !== undefined && (
|
||||||
|
<EditEmployeeForm
|
||||||
|
key={editing.id}
|
||||||
|
employee={editing}
|
||||||
|
onDone={() => { setEditing(undefined); list.reload() }}
|
||||||
|
onCancel={() => setEditing(undefined)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{resetting !== undefined && (
|
||||||
|
<ResetPasswordForm
|
||||||
|
key={resetting.id}
|
||||||
|
employee={resetting}
|
||||||
|
onDone={() => { setResetting(undefined); list.reload() }}
|
||||||
|
onCancel={() => setResetting(undefined)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{error !== undefined && <Notice tone="err">{error}</Notice>}
|
||||||
|
{list.error !== undefined && <Notice tone="err">{list.error}</Notice>}
|
||||||
|
{employees === undefined ? <EmptyState>Loading…</EmptyState>
|
||||||
|
: employees.length === 0 ? <EmptyState>No employees yet.</EmptyState> : (
|
||||||
|
<>
|
||||||
|
<DataTable
|
||||||
|
columns={[
|
||||||
|
{ key: 'name', label: 'Name' }, { key: 'email', label: 'Email' },
|
||||||
|
{ key: 'role', label: 'Role' }, { key: 'active', label: 'Active' },
|
||||||
|
{ key: 'actions', label: 'Actions' },
|
||||||
|
]}
|
||||||
|
rows={employees.map((e) => ({
|
||||||
|
name: e.displayName, email: e.email,
|
||||||
|
role: <Badge tone={e.role === 'owner' ? 'accent' : undefined}>{e.role}</Badge>,
|
||||||
|
active: e.active ? <Badge tone="ok">active</Badge> : <Badge tone="err">inactive</Badge>,
|
||||||
|
actions: (
|
||||||
|
<span style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
|
||||||
|
<Button onClick={() => { setEditing(e); setAdding(false); setResetting(undefined) }}>Edit</Button>
|
||||||
|
<Button onClick={() => { setResetting(e); setAdding(false); setEditing(undefined) }}>Reset pw</Button>
|
||||||
|
{e.active
|
||||||
|
? <Button tone="danger" onClick={() => act(deactivateEmployee(e.id))}>Deactivate</Button>
|
||||||
|
: <Button onClick={() => act(reactivateEmployee(e.id))}>Reactivate</Button>}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
<Toolbar>
|
||||||
|
<Badge>{list.data!.total} employee{list.data!.total === 1 ? '' : 's'}</Badge>
|
||||||
|
<span style={{ fontSize: 12, opacity: 0.7 }}>
|
||||||
|
Guards: the last active owner cannot be demoted or deactivated; you cannot deactivate yourself.
|
||||||
|
</span>
|
||||||
|
</Toolbar>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AddEmployeeForm(props: { onDone: () => void; onCancel: () => void }) {
|
||||||
|
const [f, setF] = useState({ email: '', displayName: '', role: 'staff' as EmployeeRole, password: '' })
|
||||||
|
const [error, setError] = useState<string | undefined>()
|
||||||
|
const set = (k: keyof typeof f) => (e: { target: { value: string } }) =>
|
||||||
|
setF((p) => ({ ...p, [k]: e.target.value }))
|
||||||
|
|
||||||
|
const save = () => {
|
||||||
|
if (f.email.trim() === '' || f.displayName.trim() === '') { setError('Email and name are required'); return }
|
||||||
|
if (f.password.length < 8) { setError('Initial password must be at least 8 characters'); return }
|
||||||
|
setError(undefined)
|
||||||
|
createEmployee({ email: f.email.trim(), displayName: f.displayName.trim(), role: f.role, password: f.password })
|
||||||
|
.then(props.onDone)
|
||||||
|
.catch((e: Error) => setError(e.message))
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ border: '1px solid var(--border)', borderRadius: 8, padding: 12, marginBottom: 12 }}>
|
||||||
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
||||||
|
<Field label="Email (login id)"><input className="wf" type="email" autoFocus value={f.email} onChange={set('email')} /></Field>
|
||||||
|
<Field label="Name"><input className="wf" value={f.displayName} onChange={set('displayName')} /></Field>
|
||||||
|
<Field label="Role">
|
||||||
|
<select className="wf" value={f.role} onChange={set('role')}>
|
||||||
|
{EMPLOYEE_ROLES.map((r) => <option key={r} value={r}>{r}</option>)}
|
||||||
|
</select>
|
||||||
|
</Field>
|
||||||
|
<Field label="Initial password (min 8)"><input className="wf" type="password" value={f.password} onChange={set('password')} /></Field>
|
||||||
|
<Button tone="primary" onClick={save}>Create employee</Button>
|
||||||
|
<Button onClick={props.onCancel}>Cancel</Button>
|
||||||
|
</div>
|
||||||
|
{error !== undefined && <Notice tone="err">{error}</Notice>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function EditEmployeeForm(props: { employee: Employee; onDone: () => void; onCancel: () => void }) {
|
||||||
|
const [f, setF] = useState({ displayName: props.employee.displayName, role: props.employee.role })
|
||||||
|
const [error, setError] = useState<string | undefined>()
|
||||||
|
|
||||||
|
const save = () => {
|
||||||
|
if (f.displayName.trim() === '') { setError('Name is required'); return }
|
||||||
|
setError(undefined)
|
||||||
|
patchEmployee(props.employee.id, { displayName: f.displayName.trim(), role: f.role })
|
||||||
|
.then(props.onDone)
|
||||||
|
.catch((e: Error) => setError(e.message))
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ border: '1px solid var(--border)', borderRadius: 8, padding: 12, marginBottom: 12 }}>
|
||||||
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
||||||
|
{/* Email is the login id — immutable after creation. */}
|
||||||
|
<Field label="Email (immutable)"><input className="wf" value={props.employee.email} disabled /></Field>
|
||||||
|
<Field label="Name">
|
||||||
|
<input className="wf" autoFocus value={f.displayName} onChange={(e) => setF((p) => ({ ...p, displayName: e.target.value }))} />
|
||||||
|
</Field>
|
||||||
|
<Field label="Role">
|
||||||
|
<select className="wf" value={f.role} onChange={(e) => setF((p) => ({ ...p, role: e.target.value as EmployeeRole }))}>
|
||||||
|
{EMPLOYEE_ROLES.map((r) => <option key={r} value={r}>{r}</option>)}
|
||||||
|
</select>
|
||||||
|
</Field>
|
||||||
|
<Button tone="primary" onClick={save}>Save changes</Button>
|
||||||
|
<Button onClick={props.onCancel}>Cancel</Button>
|
||||||
|
</div>
|
||||||
|
{error !== undefined && <Notice tone="err">{error}</Notice>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function ResetPasswordForm(props: { employee: Employee; onDone: () => void; onCancel: () => void }) {
|
||||||
|
const [password, setPassword] = useState('')
|
||||||
|
const [error, setError] = useState<string | undefined>()
|
||||||
|
|
||||||
|
const save = () => {
|
||||||
|
if (password.length < 8) { setError('New password must be at least 8 characters'); return }
|
||||||
|
setError(undefined)
|
||||||
|
resetEmployeePassword(props.employee.id, password)
|
||||||
|
.then(props.onDone)
|
||||||
|
.catch((e: Error) => setError(e.message))
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ border: '1px solid var(--border)', borderRadius: 8, padding: 12, marginBottom: 12 }}>
|
||||||
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
||||||
|
<Field label={`New password for ${props.employee.email} (min 8)`}>
|
||||||
|
<input className="wf" type="password" autoFocus value={password} onChange={(e) => setPassword(e.target.value)} />
|
||||||
|
</Field>
|
||||||
|
<Button tone="primary" onClick={save}>Reset password</Button>
|
||||||
|
<Button onClick={props.onCancel}>Cancel</Button>
|
||||||
|
</div>
|
||||||
|
{error !== undefined && <Notice tone="err">{error}</Notice>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
// apps/hq/test/employees-routes.test.ts — Phase 2: /employees API surface.
|
||||||
|
// Mutations are owner-only; GET is any signed-in user (name/owner picker).
|
||||||
|
import { describe, it, expect, afterAll } from 'vitest'
|
||||||
|
import express from 'express'
|
||||||
|
import { openDb } from '../src/db'
|
||||||
|
import { seedIfEmpty } from '../src/seed'
|
||||||
|
import { createStaff, login } from '../src/auth'
|
||||||
|
import { apiRouter } from '../src/api'
|
||||||
|
|
||||||
|
function appWith() {
|
||||||
|
const db = openDb(':memory:'); seedIfEmpty(db)
|
||||||
|
createStaff(db, { email: 'owner@test.in', displayName: 'Owner', role: 'owner', password: 'owner-password' })
|
||||||
|
createStaff(db, { email: 'staff@test.in', displayName: 'Staffer', role: 'staff', password: 'staff-password' })
|
||||||
|
const app = express(); app.use(express.json()); app.locals['db'] = db; app.use('/api', apiRouter(db))
|
||||||
|
const server = app.listen(0)
|
||||||
|
const base = `http://localhost:${(server.address() as { port: number }).port}/api`
|
||||||
|
return { db, server, base }
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('/employees routes', () => {
|
||||||
|
const ctx = appWith()
|
||||||
|
afterAll(() => ctx.server.close())
|
||||||
|
|
||||||
|
const tokenOf = async (email: string, password: string) =>
|
||||||
|
(await (await fetch(`${ctx.base}/auth/login`, {
|
||||||
|
method: 'POST', headers: { 'content-type': 'application/json' },
|
||||||
|
body: JSON.stringify({ email, password }),
|
||||||
|
})).json() as { token: string }).token
|
||||||
|
|
||||||
|
const call = async (token: string | null, method: string, path: string, body?: unknown) => {
|
||||||
|
const res = await fetch(`${ctx.base}${path}`, {
|
||||||
|
method,
|
||||||
|
headers: { 'content-type': 'application/json', ...(token !== null ? { authorization: `Bearer ${token}` } : {}) },
|
||||||
|
...(body !== undefined ? { body: JSON.stringify(body) } : {}),
|
||||||
|
})
|
||||||
|
return { status: res.status, json: await res.json() as any }
|
||||||
|
}
|
||||||
|
|
||||||
|
it('GET /employees requires auth', async () => {
|
||||||
|
expect((await call(null, 'GET', '/employees')).status).toBe(401)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('GET /employees works for any signed-in user (staff picker) and returns all rows + total', async () => {
|
||||||
|
const token = await tokenOf('staff@test.in', 'staff-password')
|
||||||
|
const out = await call(token, 'GET', '/employees')
|
||||||
|
expect(out.status).toBe(200)
|
||||||
|
expect(out.json.ok).toBe(true)
|
||||||
|
// seed owner + test owner + staffer — every row present, no silent truncation
|
||||||
|
expect(out.json.employees.length).toBeGreaterThanOrEqual(3)
|
||||||
|
expect(out.json.total).toBe(out.json.employees.length)
|
||||||
|
for (const e of out.json.employees) {
|
||||||
|
expect(e).not.toHaveProperty('pw_salt')
|
||||||
|
expect(e).not.toHaveProperty('pw_hash')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
it('owner CRUD round-trips: create → list → patch → deactivate → reactivate → password', async () => {
|
||||||
|
const token = await tokenOf('owner@test.in', 'owner-password')
|
||||||
|
|
||||||
|
const created = await call(token, 'POST', '/employees', {
|
||||||
|
email: 'New@Test.in', displayName: 'Newbie', role: 'manager', password: 'password-9',
|
||||||
|
})
|
||||||
|
expect(created.status).toBe(200)
|
||||||
|
expect(created.json.employee).toMatchObject({ email: 'new@test.in', displayName: 'Newbie', role: 'manager', active: true })
|
||||||
|
const id = created.json.employee.id as string
|
||||||
|
|
||||||
|
const listed = await call(token, 'GET', '/employees')
|
||||||
|
expect(listed.json.employees.some((e: { id: string }) => e.id === id)).toBe(true)
|
||||||
|
|
||||||
|
const patched = await call(token, 'PATCH', `/employees/${id}`, { displayName: 'Renamed', role: 'staff' })
|
||||||
|
expect(patched.status).toBe(200)
|
||||||
|
expect(patched.json.employee).toMatchObject({ id, displayName: 'Renamed', role: 'staff' })
|
||||||
|
|
||||||
|
const deactivated = await call(token, 'POST', `/employees/${id}/deactivate`)
|
||||||
|
expect(deactivated.status).toBe(200)
|
||||||
|
expect(deactivated.json.employee.active).toBe(false)
|
||||||
|
|
||||||
|
const reactivated = await call(token, 'POST', `/employees/${id}/reactivate`)
|
||||||
|
expect(reactivated.status).toBe(200)
|
||||||
|
expect(reactivated.json.employee.active).toBe(true)
|
||||||
|
|
||||||
|
const pw = await call(token, 'POST', `/employees/${id}/password`, { password: 'brand-new-secret' })
|
||||||
|
expect(pw.status).toBe(200)
|
||||||
|
expect(login(ctx.db, 'new@test.in', 'password-9')).toBeNull()
|
||||||
|
expect(login(ctx.db, 'new@test.in', 'brand-new-secret')).not.toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('non-owner gets 403 on every mutation route', async () => {
|
||||||
|
const owner = await tokenOf('owner@test.in', 'owner-password')
|
||||||
|
const target = (await call(owner, 'POST', '/employees', {
|
||||||
|
email: 'victim@test.in', displayName: 'Victim', role: 'staff', password: 'password-9',
|
||||||
|
})).json.employee.id as string
|
||||||
|
|
||||||
|
const token = await tokenOf('staff@test.in', 'staff-password')
|
||||||
|
const attempts = [
|
||||||
|
call(token, 'POST', '/employees', { email: 'x@x.co', displayName: 'X', role: 'staff', password: 'password-9' }),
|
||||||
|
call(token, 'PATCH', `/employees/${target}`, { displayName: 'Hacked' }),
|
||||||
|
call(token, 'POST', `/employees/${target}/deactivate`),
|
||||||
|
call(token, 'POST', `/employees/${target}/reactivate`),
|
||||||
|
call(token, 'POST', `/employees/${target}/password`, { password: 'password-hacked' }),
|
||||||
|
]
|
||||||
|
for (const attempt of await Promise.all(attempts)) expect(attempt.status).toBe(403)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('repo validation surfaces as 400; unknown id as 404', async () => {
|
||||||
|
const token = await tokenOf('owner@test.in', 'owner-password')
|
||||||
|
const badRole = await call(token, 'POST', '/employees', {
|
||||||
|
email: 'y@x.co', displayName: 'Y', role: 'admin', password: 'password-9',
|
||||||
|
})
|
||||||
|
expect(badRole.status).toBe(400)
|
||||||
|
expect(badRole.json.error).toMatch(/role/i)
|
||||||
|
|
||||||
|
const shortPw = await call(token, 'POST', '/employees', {
|
||||||
|
email: 'y@x.co', displayName: 'Y', role: 'staff', password: 'short',
|
||||||
|
})
|
||||||
|
expect(shortPw.status).toBe(400)
|
||||||
|
|
||||||
|
expect((await call(token, 'PATCH', '/employees/nope', { displayName: 'Z' })).status).toBe(404)
|
||||||
|
expect((await call(token, 'POST', '/employees/nope/deactivate')).status).toBe(404)
|
||||||
|
expect((await call(token, 'POST', '/employees/nope/reactivate')).status).toBe(404)
|
||||||
|
expect((await call(token, 'POST', '/employees/nope/password', { password: 'password-9' })).status).toBe(404)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('mutations act as the signed-in user (audit userId = actor)', async () => {
|
||||||
|
const token = await tokenOf('owner@test.in', 'owner-password')
|
||||||
|
const created = await call(token, 'POST', '/employees', {
|
||||||
|
email: 'audited@test.in', displayName: 'Audited', role: 'staff', password: 'password-9',
|
||||||
|
})
|
||||||
|
const id = created.json.employee.id as string
|
||||||
|
const ownerId = (ctx.db.prepare(`SELECT id FROM staff_user WHERE email='owner@test.in'`).get() as { id: string }).id
|
||||||
|
const row = ctx.db.prepare(
|
||||||
|
`SELECT user_id FROM audit_log WHERE entity='staff_user' AND entity_id=? AND action='create'`,
|
||||||
|
).get(id) as { user_id: string }
|
||||||
|
expect(row.user_id).toBe(ownerId)
|
||||||
|
})
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue