bas/solelog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a32406de69f90d4b789b241ed7d3290252a7193a
solelog/docs/superpowers/plans/2026-06-24-phase-3b2-reports-export.md

1397 lines
50 KiB
Markdown
Raw Blame History

# Phase 3b·2 — Reports + All-Users Export — Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Give the admin a Rapporten screen with period + worker/type/activity filters showing headline totals and three breakdowns (per worker / activity / type), plus an all-users CSV export of the matching completed sessions.
**Architecture:** Two new endpoints under the existing `/api/admin/*` admin guard share one filtered-query helper. `GET /api/admin/report` fetches the filtered joined rows and aggregates in JS into `ReportResponse`. `GET /api/admin/export` streams the same rows as CSV via a shared `buildSessionsCsv(rows, {includeWorker})` extracted from the existing self-scoped `/api/export`. A tables-only Reports screen drives both via React Query; the bearer-auth'd CSV download uses a raw `fetch` → Blob.
**Tech Stack:** Hono, Drizzle (libsql/SQLite), zod (`@solelog/shared`), React + React Query + Vite (admin), Vitest + Testing Library.
## Global Constraints
- **Completed-only:** every total and exported row is `status='completed'`. Active/discarded never counts. (Verbatim from spec §scope-decision 3.)
- **Metrics (all four):** `worked_seconds` (sum of `duration_seconds`, already excludes paused), `paused_seconds`, `pairs` (sum of `pair_count`), `sessions` (row count).
- **Admin-gated:** both endpoints live under the existing `adminRoutes.use('/api/admin/*', …)` guard → 401 (no session) / 403 (non-admin) for free.
- **Date semantics:** client sends `from`/`to` as ISO instants spanning whole local days; server compares them against `start_time` inclusively. No server-side timezone logic.
- **Dependency-light:** no new runtime dependencies (no chart library). Reuse `lib/csv` (`quote`, `formatDuration`) and admin `lib/elapsed` (`formatTime`).
- **CSV byte-compatibility:** the refactor must keep `/api/export` output byte-identical (existing `apps/api/test/export.test.ts` is the regression guard).
- **Code style:** oxfmt — 2-space, single quotes, semicolons, width 100, trailing-comma `all`. Run `npx oxfmt <files>` before committing.
---
### Task 1: DRY CSV builder — extract `buildSessionsCsv`
Extract the inline header/row builder from the self-scoped `/api/export` into a reusable function so the new admin export shares one format. Output for the existing route stays byte-identical.
**Files:**
- Modify: `apps/api/src/lib/csv.ts` (add `SessionCsvRow` + `buildSessionsCsv`)
- Modify: `apps/api/src/routes/sessions.ts:12-67` (use the new builder)
- Test: `apps/api/test/csv.test.ts` (new — unit test for the builder)
- Regression: `apps/api/test/export.test.ts` (must still pass unchanged)
**Interfaces:**
- Produces: `buildSessionsCsv(rows: SessionCsvRow[], opts?: { includeWorker?: boolean }): string` and the `SessionCsvRow` interface — consumed by Task 3.
- [ ] **Step 1: Write the failing unit test**
Create `apps/api/test/csv.test.ts`:
```ts
import { describe, it, expect } from 'vitest';
import { buildSessionsCsv, type SessionCsvRow } from '../src/lib/csv';
const row: SessionCsvRow = {
id: 7,
activityName: 'Frezen',
userName: 'Jan',
insoleType: 'Kurk',
pairCount: 2,
startTime: new Date('2026-06-17T08:00:00Z'),
endTime: new Date('2026-06-17T08:01:30Z'),
durationSeconds: 90,
pausedSeconds: 0,
};
describe('buildSessionsCsv', () => {
it('omits the Worker column by default (legacy header)', () => {
const lines = buildSessionsCsv([row]).split('\n');
expect(lines[0]).toBe(
'"ID","Task","Insole Type","No. of Insoles","Date","Total Duration","Paused Duration","Start Time","End Time"',
);
expect(lines[1]).toContain('"Frezen"');
expect(lines[1]).toContain('"00:01:30"');
expect(lines[1]).not.toContain('"Jan"');
});
it('prepends a Worker column when includeWorker is true', () => {
const lines = buildSessionsCsv([row], { includeWorker: true }).split('\n');
expect(lines[0]).toBe(
'"Worker","ID","Task","Insole Type","No. of Insoles","Date","Total Duration","Paused Duration","Start Time","End Time"',
);
expect(lines[1].startsWith('"Jan"')).toBe(true);
});
});
```
- [ ] **Step 2: Run it to verify it fails**
Run: `yarn workspace @solelog/api test csv`
Expected: FAIL — `buildSessionsCsv` is not exported.
- [ ] **Step 3: Implement the builder**
Append to `apps/api/src/lib/csv.ts`:
```ts
// One completed session, flattened for CSV. Times accept Date | number | string.
export interface SessionCsvRow {
id: number;
activityName: string | null;
userName?: string | null;
insoleType: string | null;
pairCount: number;
startTime: Date | number | string;
endTime: Date | number | string | null;
durationSeconds: number | null;
pausedSeconds: number | null;
}
// Build the CSV body shared by the worker self-export and the admin all-users export.
// includeWorker prepends a Worker column; everything else matches the legacy format byte-for-byte.
export function buildSessionsCsv(
rows: SessionCsvRow[],
opts: { includeWorker?: boolean } = {},
): string {
const includeWorker = opts.includeWorker ?? false;
const header = [
...(includeWorker ? ['Worker'] : []),
'ID',
'Task',
'Insole Type',
'No. of Insoles',
'Date',
'Total Duration',
'Paused Duration',
'Start Time',
'End Time',
]
.map(quote)
.join(',');
const dataLines = rows.map((row) => {
const start = new Date(row.startTime);
const end = row.endTime ? new Date(row.endTime) : null;
return [
...(includeWorker ? [row.userName ?? ''] : []),
row.id,
row.activityName ?? '',
row.insoleType ?? 'Kurk',
row.pairCount ?? 2,
start.toLocaleDateString('nl-BE', { day: '2-digit', month: '2-digit', year: 'numeric' }),
formatDuration(row.durationSeconds ?? 0),
formatDuration(row.pausedSeconds ?? 0),
start.toLocaleTimeString('nl-BE', { hour: '2-digit', minute: '2-digit', second: '2-digit' }),
end
? end.toLocaleTimeString('nl-BE', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
: '',
]
.map(quote)
.join(',');
});
return [header, ...dataLines].join('\n');
}
```
- [ ] **Step 4: Rewire the self-scoped export to use the builder**
In `apps/api/src/routes/sessions.ts`, replace the body of the `/api/export` handler (the `header`/`dataLines`/`csv` block, current lines ~23-61) so it builds via the shared function. The query stays the same; map its rows into `SessionCsvRow`:
```ts
const csv = buildSessionsCsv(
rows.map(({ session, activityName }) => ({
id: session.id,
activityName,
insoleType: session.insoleType,
pairCount: session.pairCount,
startTime: session.startTime,
endTime: session.endTime,
durationSeconds: session.durationSeconds,
pausedSeconds: session.pausedSeconds,
})),
);
return c.body(csv, 200, {
'Content-Type': 'text/csv; charset=utf-8',
'Content-Disposition': 'attachment; filename="insole-production-report.csv"',
});
```
Update the import line in `sessions.ts` from `import { quote, formatDuration } from '../lib/csv';` to `import { buildSessionsCsv } from '../lib/csv';` (the route no longer references `quote`/`formatDuration` directly).
- [ ] **Step 5: Run the new unit test + the regression suite**
Run: `yarn workspace @solelog/api test csv export`
Expected: PASS — both `csv.test.ts` and the unchanged `export.test.ts` are green (byte-identical output).
- [ ] **Step 6: Typecheck, format, commit**
```bash
yarn workspace @solelog/api typecheck
npx oxfmt apps/api/src/lib/csv.ts apps/api/src/routes/sessions.ts apps/api/test/csv.test.ts
git add apps/api/src/lib/csv.ts apps/api/src/routes/sessions.ts apps/api/test/csv.test.ts
git commit -m "refactor(api): extract buildSessionsCsv shared by worker + admin exports"
```
---
### Task 2: Shared report contracts + `/api/admin/report`
Add the `ReportResponse` contracts and the report endpoint with its shared filter helper. Aggregation happens in JS over the filtered joined rows.
**Files:**
- Modify: `packages/shared/src/index.ts` (append Report* schemas)
- Modify: `apps/api/src/routes/admin.ts` (add `parseReportQuery`, `buildSessionFilters`, the report route, imports)
- Test: `apps/api/test/report.test.ts` (new)
**Interfaces:**
- Consumes: `baseSelect`, `workSessions`, `activities`, `user` (already in `admin.ts`).
- Produces:
- shared `ReportResponse` (+ `ReportTotals`, `ReportWorkerRow`, `ReportActivityRow`, `ReportTypeRow`) — consumed by Tasks 4-5.
- `parseReportQuery(c): ReportQuery | null` and `buildSessionFilters(q: ReportQuery): SQL[]` — consumed by Task 3.
- `type ReportQuery = { from: Date; to: Date; userId?: string; insoleType?: string; activityId?: number }`.
- [ ] **Step 1: Add the shared contracts**
Append to `packages/shared/src/index.ts`:
```ts
export const ReportTotals = z.object({
worked_seconds: z.number().int(),
paused_seconds: z.number().int(),
pairs: z.number().int(),
sessions: z.number().int(),
});
export type ReportTotals = z.infer<typeof ReportTotals>;
export const ReportWorkerRow = ReportTotals.extend({
user_id: z.string(),
user_name: z.string(),
});
export type ReportWorkerRow = z.infer<typeof ReportWorkerRow>;
export const ReportActivityRow = ReportTotals.extend({
activity_id: z.number().int(),
activity_name: z.string(),
});
export type ReportActivityRow = z.infer<typeof ReportActivityRow>;
export const ReportTypeRow = ReportTotals.extend({
insole_type: z.string(),
});
export type ReportTypeRow = z.infer<typeof ReportTypeRow>;
export const ReportResponse = z.object({
range: z.object({ from: z.string(), to: z.string() }),
totals: ReportTotals,
by_worker: z.array(ReportWorkerRow),
by_activity: z.array(ReportActivityRow),
by_type: z.array(ReportTypeRow),
});
export type ReportResponse = z.infer<typeof ReportResponse>;
```
- [ ] **Step 2: Write the failing endpoint test**
Create `apps/api/test/report.test.ts`. Reuse the `completedSession` pattern (start → backdate → stop) so durations are exact. Helper builds a wide `from`/`to` window.
```ts
import { describe, it, expect } from 'vitest';
import type { Hono } from 'hono';
import { createApp } from '../src/app';
import { db } from '../src/db/client';
import { workSessions } from '../src/db/schema';
import { eq } from 'drizzle-orm';
import { authToken, bearer, seedActivity } from './helpers';
const WIDE = `from=${new Date('2000-01-01').toISOString()}&to=${new Date('2100-01-01').toISOString()}`;
async function completed(
app: Hono,
token: string,
activityId: number,
insoleType: string,
durationSeconds: number,
pairCount = 2,
): Promise<number> {
const startRes = await app.request('/api/sessions/start', {
method: 'POST',
headers: bearer(token),
body: JSON.stringify({ activity_id: activityId, insole_type: insoleType, pair_count: pairCount }),
});
const started = await startRes.json();
await db
.update(workSessions)
.set({ startTime: new Date(Date.now() - durationSeconds * 1000) })
.where(eq(workSessions.id, started.id));
await app.request(`/api/sessions/${started.id}/stop`, { method: 'POST', headers: bearer(token) });
return started.id as number;
}
describe('GET /api/admin/report', () => {
it('401s without a token and 403s for a worker', async () => {
const app = createApp();
expect((await app.request(`/api/admin/report?${WIDE}`)).status).toBe(401);
const workerTok = await authToken(app, 'report-worker@example.com');
const res = await app.request(`/api/admin/report?${WIDE}`, { headers: bearer(workerTok) });
expect(res.status).toBe(403);
});
it('400s on a missing or inverted range', async () => {
const app = createApp();
const adminTok = await authToken(app, 'report-badrange@example.com', 'admin');
expect((await app.request('/api/admin/report', { headers: bearer(adminTok) })).status).toBe(400);
const inverted = `from=${new Date('2026-02-01').toISOString()}&to=${new Date('2026-01-01').toISOString()}`;
expect(
(await app.request(`/api/admin/report?${inverted}`, { headers: bearer(adminTok) })).status,
).toBe(400);
});
it('aggregates totals that equal the sum of each breakdown', async () => {
const app = createApp();
const adminTok = await authToken(app, 'report-agg-admin@example.com', 'admin');
const workerTok = await authToken(app, 'report-agg-worker@example.com'); // 'report-agg-worker'
const frezen = await seedActivity('Frezen');
const lijmen = await seedActivity('Lijmen');
await completed(app, workerTok, frezen, 'Kurk', 100, 2);
await completed(app, workerTok, lijmen, 'Berk', 50, 3);
const res = await app.request(`/api/admin/report?${WIDE}`, { headers: bearer(adminTok) });
expect(res.status).toBe(200);
const body = await res.json();
expect(body.totals.worked_seconds).toBe(150);
expect(body.totals.pairs).toBe(5);
expect(body.totals.sessions).toBe(2);
const sum = (rows: { worked_seconds: number; pairs: number; sessions: number }[]) =>
rows.reduce(
(a, r) => ({
worked_seconds: a.worked_seconds + r.worked_seconds,
pairs: a.pairs + r.pairs,
sessions: a.sessions + r.sessions,
}),
{ worked_seconds: 0, pairs: 0, sessions: 0 },
);
expect(sum(body.by_worker)).toEqual({ worked_seconds: 150, pairs: 5, sessions: 2 });
expect(sum(body.by_activity)).toEqual({ worked_seconds: 150, pairs: 5, sessions: 2 });
expect(sum(body.by_type)).toEqual({ worked_seconds: 150, pairs: 5, sessions: 2 });
expect(body.by_activity).toHaveLength(2);
expect(body.by_type.map((t: { insole_type: string }) => t.insole_type).sort()).toEqual([
'Berk',
'Kurk',
]);
});
it('excludes active/discarded and respects the user and type filters', async () => {
const app = createApp();
const adminTok = await authToken(app, 'report-filter-admin@example.com', 'admin');
const a = await authToken(app, 'report-filter-a@example.com');
const b = await authToken(app, 'report-filter-b@example.com');
const act = await seedActivity('Slijpen');
await completed(app, a, act, 'Kurk', 30, 2); // counts for A/Kurk
await completed(app, b, act, 'Berk', 40, 2); // counts for B/Berk
// A: an active session (no duration) — must be excluded.
await app.request('/api/sessions/start', {
method: 'POST',
headers: bearer(a),
body: JSON.stringify({ activity_id: act, insole_type: 'Kurk', pair_count: 2 }),
});
// Resolve A's user id via the roster.
const roster = await (
await app.request('/api/admin/users', { headers: bearer(adminTok) })
).json();
const userA = roster.find((u: { email: string }) => u.email === 'report-filter-a@example.com');
const res = await app.request(
`/api/admin/report?${WIDE}&user_id=${userA.id}&insole_type=Kurk`,
{ headers: bearer(adminTok) },
);
const body = await res.json();
expect(body.totals.sessions).toBe(1); // only A's completed Kurk session
expect(body.totals.worked_seconds).toBe(30);
});
it('returns zeros and empty arrays for an empty range', async () => {
const app = createApp();
const adminTok = await authToken(app, 'report-empty-admin@example.com', 'admin');
const empty = `from=${new Date('1990-01-01').toISOString()}&to=${new Date('1990-02-01').toISOString()}`;
const res = await app.request(`/api/admin/report?${empty}`, { headers: bearer(adminTok) });
const body = await res.json();
expect(body.totals).toEqual({ worked_seconds: 0, paused_seconds: 0, pairs: 0, sessions: 0 });
expect(body.by_worker).toEqual([]);
expect(body.by_activity).toEqual([]);
expect(body.by_type).toEqual([]);
});
});
```
- [ ] **Step 3: Run it to verify it fails**
Run: `yarn workspace @solelog/api test report`
Expected: FAIL — `/api/admin/report` returns 404 (route not defined).
- [ ] **Step 4: Implement the filter helper + route**
In `apps/api/src/routes/admin.ts`:
Update the drizzle import to add `and`, `gte`, `lte`, and the `SQL` type:
```ts
import { and, asc, desc, eq, gte, lte, type SQL } from 'drizzle-orm';
```
Add the shared `InsoleType` import:
```ts
import { AdminUpdateSessionInput, CreateManualSessionInput, InsoleType } from '@solelog/shared';
```
Add (near the top, after `computeDuration`):
```ts
type ReportQuery = {
from: Date;
to: Date;
userId?: string;
insoleType?: string;
activityId?: number;
};
// Parse + validate the shared report/export query params. Returns null on a bad range.
function parseReportQuery(c: { req: { query: (k: string) => string | undefined } }): ReportQuery | null {
const fromRaw = c.req.query('from');
const toRaw = c.req.query('to');
if (!fromRaw || !toRaw) return null;
const from = new Date(fromRaw);
const to = new Date(toRaw);
if (Number.isNaN(from.getTime()) || Number.isNaN(to.getTime()) || to < from) return null;
const insoleType = c.req.query('insole_type') || undefined;
if (insoleType && !InsoleType.safeParse(insoleType).success) return null;
const activityIdRaw = c.req.query('activity_id');
let activityId: number | undefined;
if (activityIdRaw) {
activityId = Number.parseInt(activityIdRaw, 10);
if (Number.isNaN(activityId)) return null;
}
return { from, to, userId: c.req.query('user_id') || undefined, insoleType, activityId };
}
// completed + date-range + optional worker/type/activity — shared by report and export.
function buildSessionFilters(q: ReportQuery): SQL[] {
const conds: SQL[] = [
eq(workSessions.status, 'completed'),
gte(workSessions.startTime, q.from),
lte(workSessions.startTime, q.to),
];
if (q.userId) conds.push(eq(workSessions.userId, q.userId));
if (q.insoleType) conds.push(eq(workSessions.insoleType, q.insoleType));
if (q.activityId !== undefined) conds.push(eq(workSessions.activityId, q.activityId));
return conds;
}
```
Add the route (after the existing `/api/admin/users` route is fine):
```ts
adminRoutes.get('/api/admin/report', async (c) => {
const q = parseReportQuery(c);
if (!q) return c.json({ error: 'Invalid query' }, 400);
const rows = await db
.select(baseSelect)
.from(workSessions)
.leftJoin(activities, eq(workSessions.activityId, activities.id))
.leftJoin(user, eq(workSessions.userId, user.id))
.where(and(...buildSessionFilters(q)));
const totals = { worked_seconds: 0, paused_seconds: 0, pairs: 0, sessions: 0 };
const workers = new Map<
string,
{ user_id: string; user_name: string; worked_seconds: number; paused_seconds: number; pairs: number; sessions: number }
>();
const acts = new Map<
number,
{ activity_id: number; activity_name: string; worked_seconds: number; paused_seconds: number; pairs: number; sessions: number }
>();
const types = new Map<
string,
{ insole_type: string; worked_seconds: number; paused_seconds: number; pairs: number; sessions: number }
>();
for (const r of rows) {
const worked = r.session.durationSeconds ?? 0;
const paused = r.session.pausedSeconds ?? 0;
const pairs = r.session.pairCount ?? 0;
totals.worked_seconds += worked;
totals.paused_seconds += paused;
totals.pairs += pairs;
totals.sessions += 1;
const uid = r.session.userId;
const w =
workers.get(uid) ??
{ user_id: uid, user_name: r.userName ?? 'Onbekend', worked_seconds: 0, paused_seconds: 0, pairs: 0, sessions: 0 };
w.worked_seconds += worked;
w.paused_seconds += paused;
w.pairs += pairs;
w.sessions += 1;
workers.set(uid, w);
const aid = r.session.activityId;
const a =
acts.get(aid) ??
{ activity_id: aid, activity_name: r.activityName ?? 'Onbekend', worked_seconds: 0, paused_seconds: 0, pairs: 0, sessions: 0 };
a.worked_seconds += worked;
a.paused_seconds += paused;
a.pairs += pairs;
a.sessions += 1;
acts.set(aid, a);
const tkey = r.session.insoleType ?? 'Onbekend';
const t =
types.get(tkey) ??
{ insole_type: tkey, worked_seconds: 0, paused_seconds: 0, pairs: 0, sessions: 0 };
t.worked_seconds += worked;
t.paused_seconds += paused;
t.pairs += pairs;
t.sessions += 1;
types.set(tkey, t);
}
const byWorked = (x: { worked_seconds: number }, y: { worked_seconds: number }) =>
y.worked_seconds - x.worked_seconds;
return c.json({
range: { from: q.from.toISOString(), to: q.to.toISOString() },
totals,
by_worker: [...workers.values()].sort(byWorked),
by_activity: [...acts.values()].sort(byWorked),
by_type: [...types.values()].sort(byWorked),
});
});
```
- [ ] **Step 5: Run the test to verify it passes**
Run: `yarn workspace @solelog/api test report`
Expected: PASS — all five cases green.
- [ ] **Step 6: Typecheck, format, commit**
```bash
yarn workspace @solelog/api typecheck
npx oxfmt packages/shared/src/index.ts apps/api/src/routes/admin.ts apps/api/test/report.test.ts
git add packages/shared/src/index.ts apps/api/src/routes/admin.ts apps/api/test/report.test.ts
git commit -m "feat(api): admin report endpoint + ReportResponse contracts"
```
---
### Task 3: `/api/admin/export` — all-users filtered CSV
Reuse `buildSessionFilters` (Task 2) and `buildSessionsCsv` (Task 1) to emit the detail CSV with a Worker column.
**Files:**
- Modify: `apps/api/src/routes/admin.ts` (add the export route + `buildSessionsCsv` import)
- Test: `apps/api/test/report.test.ts` (add an `admin export` describe block — same file)
**Interfaces:**
- Consumes: `parseReportQuery`, `buildSessionFilters` (Task 2), `buildSessionsCsv` (Task 1).
- [ ] **Step 1: Add the failing export tests**
Append to `apps/api/test/report.test.ts`:
```ts
describe('GET /api/admin/export', () => {
it('401s without a token and 403s for a worker', async () => {
const app = createApp();
expect((await app.request(`/api/admin/export?${WIDE}`)).status).toBe(401);
const workerTok = await authToken(app, 'export-admin-worker@example.com');
const res = await app.request(`/api/admin/export?${WIDE}`, { headers: bearer(workerTok) });
expect(res.status).toBe(403);
});
it('exports all workers with a leading Worker column, range in the filename', async () => {
const app = createApp();
const adminTok = await authToken(app, 'export-admin@example.com', 'admin');
const a = await authToken(app, 'export-allusers-a@example.com');
const b = await authToken(app, 'export-allusers-b@example.com');
const act = await seedActivity('Frezen');
await completed(app, a, act, 'Kurk', 90, 2);
await completed(app, b, act, 'Berk', 60, 2);
const res = await app.request(`/api/admin/export?${WIDE}`, { headers: bearer(adminTok) });
expect(res.status).toBe(200);
expect(res.headers.get('content-type')).toContain('text/csv');
expect(res.headers.get('content-disposition')).toMatch(
/attachment; filename="solelog-report_\d{4}-\d{2}-\d{2}_\d{4}-\d{2}-\d{2}\.csv"/,
);
const lines = (await res.text()).split('\n');
expect(lines[0]).toBe(
'"Worker","ID","Task","Insole Type","No. of Insoles","Date","Total Duration","Paused Duration","Start Time","End Time"',
);
expect(lines).toHaveLength(3); // header + 2 workers' sessions
expect(lines.some((l) => l.includes('export-allusers-a'))).toBe(true);
expect(lines.some((l) => l.includes('export-allusers-b'))).toBe(true);
});
it('respects the type filter', async () => {
const app = createApp();
const adminTok = await authToken(app, 'export-typefilter-admin@example.com', 'admin');
const a = await authToken(app, 'export-typefilter-a@example.com');
const act = await seedActivity('Lijmen');
await completed(app, a, act, 'Kurk', 30, 2);
await completed(app, a, act, 'Berk', 40, 2);
const res = await app.request(`/api/admin/export?${WIDE}&insole_type=Berk`, {
headers: bearer(adminTok),
});
const lines = (await res.text()).split('\n');
expect(lines).toHaveLength(2); // header + only the Berk row
expect(lines[1]).toContain('"Berk"');
});
});
```
- [ ] **Step 2: Run it to verify it fails**
Run: `yarn workspace @solelog/api test report`
Expected: FAIL — `/api/admin/export` returns 404.
- [ ] **Step 3: Implement the export route**
In `apps/api/src/routes/admin.ts`, add `buildSessionsCsv` to the csv import. There is currently no csv import in `admin.ts`, so add:
```ts
import { buildSessionsCsv } from '../lib/csv';
```
Add the route after the report route:
```ts
adminRoutes.get('/api/admin/export', async (c) => {
const q = parseReportQuery(c);
if (!q) return c.json({ error: 'Invalid query' }, 400);
const rows = await db
.select(baseSelect)
.from(workSessions)
.leftJoin(activities, eq(workSessions.activityId, activities.id))
.leftJoin(user, eq(workSessions.userId, user.id))
.where(and(...buildSessionFilters(q)))
.orderBy(asc(workSessions.startTime));
const csv = buildSessionsCsv(
rows.map((r) => ({
id: r.session.id,
activityName: r.activityName,
userName: r.userName,
insoleType: r.session.insoleType,
pairCount: r.session.pairCount,
startTime: r.session.startTime,
endTime: r.session.endTime,
durationSeconds: r.session.durationSeconds,
pausedSeconds: r.session.pausedSeconds,
})),
{ includeWorker: true },
);
const fromDate = q.from.toISOString().slice(0, 10);
const toDate = q.to.toISOString().slice(0, 10);
return c.body(csv, 200, {
'Content-Type': 'text/csv; charset=utf-8',
'Content-Disposition': `attachment; filename="solelog-report_${fromDate}_${toDate}.csv"`,
});
});
```
- [ ] **Step 4: Run the test to verify it passes**
Run: `yarn workspace @solelog/api test report`
Expected: PASS — report + export describes all green.
- [ ] **Step 5: Full API suite, typecheck, format, commit**
```bash
yarn workspace @solelog/api test
yarn workspace @solelog/api typecheck
npx oxfmt apps/api/src/routes/admin.ts apps/api/test/report.test.ts
git add apps/api/src/routes/admin.ts apps/api/test/report.test.ts
git commit -m "feat(api): admin all-users filtered CSV export"
```
---
### Task 4: Admin API client — `useReport` + `downloadExport`
The React Query hook for the report and the bearer-auth'd CSV download helper.
**Files:**
- Create: `apps/admin/src/api/reports.ts`
- Test: `apps/admin/src/api/reports.test.ts`
**Interfaces:**
- Consumes: `apiFetch`, `API_URL` from `../lib/api`; `getToken` from `../lib/auth-storage`; `ReportResponse` from `@solelog/shared`.
- Produces:
- `interface ReportFilters { from: string; to: string; userId?: string; insoleType?: string; activityId?: number }`
- `filtersToQuery(f: ReportFilters): string`
- `useReport(filters: ReportFilters)` (React Query)
- `downloadExport(filters: ReportFilters): Promise<void>` — consumed by Task 5.
- [ ] **Step 1: Write the failing test**
Create `apps/admin/src/api/reports.test.ts`:
```ts
import { afterEach, describe, expect, it, vi } from 'vitest';
import { filtersToQuery, downloadExport, type ReportFilters } from './reports';
vi.mock('../lib/auth-storage', () => ({ getToken: () => 'tok-123' }));
const FILTERS: ReportFilters = {
from: '2026-06-15T00:00:00.000Z',
to: '2026-06-21T22:00:00.000Z',
userId: 'u1',
insoleType: 'Kurk',
activityId: 7,
};
describe('filtersToQuery', () => {
it('serializes all params', () => {
const q = new URLSearchParams(filtersToQuery(FILTERS));
expect(q.get('from')).toBe(FILTERS.from);
expect(q.get('to')).toBe(FILTERS.to);
expect(q.get('user_id')).toBe('u1');
expect(q.get('insole_type')).toBe('Kurk');
expect(q.get('activity_id')).toBe('7');
});
it('omits empty optional filters', () => {
const q = new URLSearchParams(filtersToQuery({ from: 'a', to: 'b' }));
expect(q.has('user_id')).toBe(false);
expect(q.has('insole_type')).toBe(false);
expect(q.has('activity_id')).toBe(false);
});
});
describe('downloadExport', () => {
afterEach(() => vi.restoreAllMocks());
it('fetches with the bearer token and triggers a download', async () => {
const blob = new Blob(['csv'], { type: 'text/csv' });
const fetchMock = vi.fn().mockResolvedValue({
ok: true,
blob: () => Promise.resolve(blob),
headers: new Headers({
'content-disposition': 'attachment; filename="solelog-report_2026-06-15_2026-06-21.csv"',
}),
});
vi.stubGlobal('fetch', fetchMock);
const createUrl = vi.fn(() => 'blob:x');
const revokeUrl = vi.fn();
vi.stubGlobal('URL', { ...URL, createObjectURL: createUrl, revokeObjectURL: revokeUrl });
const click = vi.fn();
vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(click);
await downloadExport(FILTERS);
expect(fetchMock).toHaveBeenCalledTimes(1);
const [url, init] = fetchMock.mock.calls[0];
expect(url).toContain('/api/admin/export?');
expect(url).toContain('insole_type=Kurk');
expect((init.headers as Record<string, string>).Authorization).toBe('Bearer tok-123');
expect(createUrl).toHaveBeenCalledWith(blob);
expect(click).toHaveBeenCalledTimes(1);
expect(revokeUrl).toHaveBeenCalledWith('blob:x');
});
it('throws on a non-ok response', async () => {
vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: false, status: 500 }));
await expect(downloadExport(FILTERS)).rejects.toThrow();
});
});
```
- [ ] **Step 2: Run it to verify it fails**
Run: `yarn workspace @solelog/admin test reports`
Expected: FAIL — `./reports` module not found.
- [ ] **Step 3: Implement the client**
Create `apps/admin/src/api/reports.ts`:
```ts
import { useQuery } from '@tanstack/react-query';
import type { ReportResponse } from '@solelog/shared';
import { API_URL, apiFetch } from '../lib/api';
import { getToken } from '../lib/auth-storage';
export interface ReportFilters {
from: string; // ISO instant (start of from-day, local tz)
to: string; // ISO instant (end of to-day, local tz)
userId?: string;
insoleType?: string;
activityId?: number;
}
// Build the querystring; omit empty optional filters.
export function filtersToQuery(f: ReportFilters): string {
const params = new URLSearchParams();
params.set('from', f.from);
params.set('to', f.to);
if (f.userId) params.set('user_id', f.userId);
if (f.insoleType) params.set('insole_type', f.insoleType);
if (f.activityId !== undefined) params.set('activity_id', String(f.activityId));
return params.toString();
}
export function useReport(filters: ReportFilters) {
return useQuery({
queryKey: ['admin', 'report', filters],
queryFn: () => apiFetch<ReportResponse>(`/api/admin/report?${filtersToQuery(filters)}`),
});
}
function filenameFromResponse(res: Response): string {
const cd = res.headers.get('content-disposition');
const m = cd?.match(/filename="(.+?)"/);
return m ? m[1] : 'solelog-report.csv';
}
// The export endpoint is bearer-auth'd, so a plain <a href> can't carry the token:
// fetch with the Authorization header, then download the resulting Blob.
export async function downloadExport(filters: ReportFilters): Promise<void> {
const token = getToken();
const res = await fetch(`${API_URL}/api/admin/export?${filtersToQuery(filters)}`, {
headers: token ? { Authorization: `Bearer ${token}` } : {},
});
if (!res.ok) throw new Error(`Export mislukt: ${res.status}`);
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filenameFromResponse(res);
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(url);
}
```
- [ ] **Step 4: Run the test to verify it passes**
Run: `yarn workspace @solelog/admin test reports`
Expected: PASS — both describes green.
- [ ] **Step 5: Typecheck, format, commit**
```bash
yarn workspace @solelog/admin typecheck
npx oxfmt apps/admin/src/api/reports.ts apps/admin/src/api/reports.test.ts
git add apps/admin/src/api/reports.ts apps/admin/src/api/reports.test.ts
git commit -m "feat(admin): reports API client (useReport + downloadExport)"
```
---
### Task 5: Rapporten screen + nav wiring
The tables-only screen: filter bar with presets, headline totals, three breakdown tables, and the export button. Plus the sidebar/route wiring.
**Files:**
- Create: `apps/admin/src/screens/Reports.tsx`
- Create: `apps/admin/src/lib/date-range.ts` (preset/date helpers — pure, unit-tested)
- Modify: `apps/admin/src/components/Sidebar.tsx` (move Rapporten into nav)
- Modify: `apps/admin/src/App.tsx` (add `/rapporten` route)
- Modify: `apps/admin/src/styles.css` (report table styles — minimal, reuse existing classes where possible)
- Test: `apps/admin/src/lib/date-range.test.ts`, `apps/admin/src/screens/Reports.test.tsx`
**Interfaces:**
- Consumes: `useReport`, `downloadExport`, `ReportFilters` (Task 4); `useAdminUsers` (`../api/admin-sessions`); `useActivities` (`../api/activities`); `formatTime` (`../lib/elapsed`).
- Produces: `localDayRange` helpers (see below) and the `<Reports />` screen.
- [ ] **Step 1: Write the failing date-range helper test**
Create `apps/admin/src/lib/date-range.test.ts`:
```ts
import { describe, expect, it } from 'vitest';
import { dayStartISO, dayEndISO, thisWeek, thisMonth } from './date-range';
describe('date-range helpers', () => {
it('dayStartISO/dayEndISO bound a local day', () => {
const start = new Date(dayStartISO('2026-06-17'));
const end = new Date(dayEndISO('2026-06-17'));
expect(start.getHours()).toBe(0);
expect(start.getMinutes()).toBe(0);
expect(end.getHours()).toBe(23);
expect(end.getMinutes()).toBe(59);
expect(end.getTime()).toBeGreaterThan(start.getTime());
});
it('thisWeek returns Monday..today (from/to are YYYY-MM-DD)', () => {
const ref = new Date('2026-06-17T12:00:00'); // a Wednesday
const { from, to } = thisWeek(ref);
expect(from).toBe('2026-06-15'); // Monday
expect(to).toBe('2026-06-17');
});
it('thisMonth returns the 1st..today', () => {
const ref = new Date('2026-06-17T12:00:00');
const { from, to } = thisMonth(ref);
expect(from).toBe('2026-06-01');
expect(to).toBe('2026-06-17');
});
});
```
- [ ] **Step 2: Run it to verify it fails**
Run: `yarn workspace @solelog/admin test date-range`
Expected: FAIL — `./date-range` not found.
- [ ] **Step 3: Implement the date-range helpers**
Create `apps/admin/src/lib/date-range.ts`:
```ts
// Helpers for the report filter bar. Dates are 'YYYY-MM-DD' (what <input type="date"> uses);
// the *ISO instants* sent to the API are derived in the admin's local timezone so a picked
// day means that whole local day.
function pad(n: number): string {
return String(n).padStart(2, '0');
}
export function toDateStr(d: Date): string {
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
}
// Start of the given local day, as an ISO instant.
export function dayStartISO(dateStr: string): string {
const [y, m, d] = dateStr.split('-').map(Number);
return new Date(y, m - 1, d, 0, 0, 0, 0).toISOString();
}
// End of the given local day, as an ISO instant.
export function dayEndISO(dateStr: string): string {
const [y, m, d] = dateStr.split('-').map(Number);
return new Date(y, m - 1, d, 23, 59, 59, 999).toISOString();
}
export function thisWeek(ref: Date): { from: string; to: string } {
const day = ref.getDay(); // 0=Sun..6=Sat
const diffToMonday = (day + 6) % 7;
const monday = new Date(ref.getFullYear(), ref.getMonth(), ref.getDate() - diffToMonday);
return { from: toDateStr(monday), to: toDateStr(ref) };
}
export function thisMonth(ref: Date): { from: string; to: string } {
const first = new Date(ref.getFullYear(), ref.getMonth(), 1);
return { from: toDateStr(first), to: toDateStr(ref) };
}
// 'Alles' — a wide window from epoch-ish to today.
export function allTime(ref: Date): { from: string; to: string } {
return { from: '2000-01-01', to: toDateStr(ref) };
}
```
- [ ] **Step 4: Run the helper test to verify it passes**
Run: `yarn workspace @solelog/admin test date-range`
Expected: PASS.
- [ ] **Step 5: Write the failing Reports screen test**
Create `apps/admin/src/screens/Reports.test.tsx`:
```tsx
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import type { ReportResponse } from '@solelog/shared';
import Reports from './Reports';
import { apiFetch } from '../lib/api';
import * as reportsApi from '../api/reports';
vi.mock('../lib/api', () => ({ apiFetch: vi.fn(), API_URL: 'http://test' }));
const mockApiFetch = vi.mocked(apiFetch);
const REPORT: ReportResponse = {
range: { from: '2026-06-15T00:00:00.000Z', to: '2026-06-17T21:59:59.999Z' },
totals: { worked_seconds: 7800, paused_seconds: 600, pairs: 84, sessions: 36 },
by_worker: [
{ user_id: 'u1', user_name: 'Jan', worked_seconds: 4500, paused_seconds: 300, pairs: 48, sessions: 21 },
{ user_id: 'u2', user_name: 'An', worked_seconds: 3300, paused_seconds: 300, pairs: 36, sessions: 15 },
],
by_activity: [
{ activity_id: 1, activity_name: 'Frezen', worked_seconds: 4900, paused_seconds: 200, pairs: 40, sessions: 18 },
{ activity_id: 2, activity_name: 'Lijmen', worked_seconds: 2900, paused_seconds: 400, pairs: 44, sessions: 18 },
],
by_type: [
{ insole_type: 'Kurk', worked_seconds: 5000, paused_seconds: 300, pairs: 50, sessions: 20 },
{ insole_type: 'Berk', worked_seconds: 2800, paused_seconds: 300, pairs: 34, sessions: 16 },
],
};
function mockEndpoints() {
mockApiFetch.mockImplementation((path: string) => {
if (path.startsWith('/api/admin/report')) return Promise.resolve(REPORT as never);
if (path === '/api/admin/users')
return Promise.resolve([{ id: 'u1', name: 'Jan', email: 'jan@x' }] as never);
if (path === '/api/activities') return Promise.resolve([] as never);
return Promise.resolve([] as never);
});
}
function renderReports() {
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
return render(
<QueryClientProvider client={queryClient}>
<Reports />
</QueryClientProvider>,
);
}
describe('Reports', () => {
beforeEach(() => mockApiFetch.mockReset());
afterEach(() => vi.clearAllMocks());
it('renders headline totals and the three breakdown tables', async () => {
mockEndpoints();
renderReports();
// Headline: 7800s = 02:10:00 worked, 84 zolen, 36 sessies.
expect(await screen.findByText(/02:10:00/)).toBeInTheDocument();
expect(screen.getByText(/84/)).toBeInTheDocument();
expect(screen.getByText(/36/)).toBeInTheDocument();
expect(screen.getByText('Per medewerker')).toBeInTheDocument();
expect(screen.getByText('Per handeling')).toBeInTheDocument();
expect(screen.getByText('Per type')).toBeInTheDocument();
expect(screen.getByText('Jan')).toBeInTheDocument();
expect(screen.getByText('Frezen')).toBeInTheDocument();
expect(screen.getByText('Kurk')).toBeInTheDocument();
});
it('refetches with new params when a preset is clicked', async () => {
mockEndpoints();
renderReports();
await screen.findByText('Jan');
const callsBefore = mockApiFetch.mock.calls.filter((c) =>
String(c[0]).startsWith('/api/admin/report'),
).length;
await userEvent.click(screen.getByRole('button', { name: 'Deze maand' }));
await waitFor(() => {
const reportCalls = mockApiFetch.mock.calls.filter((c) =>
String(c[0]).startsWith('/api/admin/report'),
);
expect(reportCalls.length).toBeGreaterThan(callsBefore);
});
});
it('calls downloadExport with the current filters when Exporteer CSV is clicked', async () => {
mockEndpoints();
const spy = vi.spyOn(reportsApi, 'downloadExport').mockResolvedValue();
renderReports();
await screen.findByText('Jan');
await userEvent.click(screen.getByRole('button', { name: 'Exporteer CSV' }));
expect(spy).toHaveBeenCalledTimes(1);
const arg = spy.mock.calls[0][0];
expect(arg.from).toBeTruthy();
expect(arg.to).toBeTruthy();
});
});
```
- [ ] **Step 6: Run it to verify it fails**
Run: `yarn workspace @solelog/admin test Reports`
Expected: FAIL — `./Reports` not found.
- [ ] **Step 7: Implement the screen**
Create `apps/admin/src/screens/Reports.tsx`. It imports `downloadExport` via the module namespace so the test's `vi.spyOn(reportsApi, 'downloadExport')` intercepts it.
```tsx
import { useMemo, useState } from 'react';
import type { InsoleType, ReportTotals } from '@solelog/shared';
import { useReport, type ReportFilters } from '../api/reports';
import * as reportsApi from '../api/reports';
import { useAdminUsers } from '../api/admin-sessions';
import { useActivities } from '../api/activities';
import { formatTime } from '../lib/elapsed';
import { allTime, dayEndISO, dayStartISO, thisMonth, thisWeek, toDateStr } from '../lib/date-range';
type DateRange = { from: string; to: string }; // YYYY-MM-DD
const TYPES: InsoleType[] = ['Kurk', 'Berk', '3D'];
export default function Reports() {
const [range, setRange] = useState<DateRange>(() => thisWeek(new Date()));
const [userId, setUserId] = useState('');
const [insoleType, setInsoleType] = useState('');
const [activityId, setActivityId] = useState('');
const filters: ReportFilters = useMemo(
() => ({
from: dayStartISO(range.from),
to: dayEndISO(range.to),
userId: userId || undefined,
insoleType: insoleType || undefined,
activityId: activityId ? Number(activityId) : undefined,
}),
[range, userId, insoleType, activityId],
);
const reportQuery = useReport(filters);
const usersQuery = useAdminUsers();
const activitiesQuery = useActivities();
const [exportError, setExportError] = useState<string | null>(null);
async function onExport() {
setExportError(null);
try {
await reportsApi.downloadExport(filters);
} catch {
setExportError('Export mislukt. Probeer opnieuw.');
}
}
const t = reportQuery.data?.totals;
return (
<div className="screen">
<div className="reports-head">
<h1 className="screen-title">Rapporten</h1>
<button type="button" className="btn-primary" onClick={onExport}>
Exporteer CSV
</button>
</div>
<div className="reports-filters">
<div className="reports-presets">
<button type="button" onClick={() => setRange(thisWeek(new Date()))}>
Deze week
</button>
<button type="button" onClick={() => setRange(thisMonth(new Date()))}>
Deze maand
</button>
<button type="button" onClick={() => setRange(allTime(new Date()))}>
Alles
</button>
</div>
<label>
Van
<input
type="date"
value={range.from}
max={range.to}
onChange={(e) => setRange((r) => ({ ...r, from: e.target.value }))}
/>
</label>
<label>
Tot
<input
type="date"
value={range.to}
min={range.from}
max={toDateStr(new Date())}
onChange={(e) => setRange((r) => ({ ...r, to: e.target.value }))}
/>
</label>
<label>
Medewerker
<select value={userId} onChange={(e) => setUserId(e.target.value)}>
<option value="">Alle</option>
{(usersQuery.data ?? []).map((u) => (
<option key={u.id} value={u.id}>
{u.name}
</option>
))}
</select>
</label>
<label>
Type
<select value={insoleType} onChange={(e) => setInsoleType(e.target.value)}>
<option value="">Alle</option>
{TYPES.map((ty) => (
<option key={ty} value={ty}>
{ty}
</option>
))}
</select>
</label>
<label>
Handeling
<select value={activityId} onChange={(e) => setActivityId(e.target.value)}>
<option value="">Alle</option>
{(activitiesQuery.data ?? []).map((a) => (
<option key={a.id} value={String(a.id)}>
{a.name}
</option>
))}
</select>
</label>
</div>
{exportError && <p className="form-error">{exportError}</p>}
{reportQuery.isLoading ? (
<p className="muted">Laden…</p>
) : reportQuery.isError ? (
<p className="muted">Kon rapport niet laden.</p>
) : (
<>
<div className="reports-totals">
<strong>{formatTime(t?.worked_seconds ?? 0)}</strong> gewerkt ·{' '}
<strong>{t?.pairs ?? 0}</strong> zolen · <strong>{t?.sessions ?? 0}</strong> sessies ·{' '}
<strong>{formatTime(t?.paused_seconds ?? 0)}</strong> pauze
</div>
<BreakdownTable
title="Per medewerker"
label="Medewerker"
rows={(reportQuery.data?.by_worker ?? []).map((r) => ({ key: r.user_id, name: r.user_name, ...r }))}
/>
<BreakdownTable
title="Per handeling"
label="Handeling"
rows={(reportQuery.data?.by_activity ?? []).map((r) => ({ key: String(r.activity_id), name: r.activity_name, ...r }))}
/>
<BreakdownTable
title="Per type"
label="Type"
rows={(reportQuery.data?.by_type ?? []).map((r) => ({ key: r.insole_type, name: r.insole_type, ...r }))}
/>
</>
)}
</div>
);
}
type BreakdownRow = ReportTotals & { key: string; name: string };
function BreakdownTable({ title, label, rows }: { title: string; label: string; rows: BreakdownRow[] }) {
return (
<section className="reports-section">
<h2 className="reports-section-title">{title}</h2>
{rows.length === 0 ? (
<p className="muted">Geen gegevens.</p>
) : (
<table className="reports-table">
<thead>
<tr>
<th>{label}</th>
<th>Gewerkt</th>
<th>Zolen</th>
<th>Sessies</th>
<th>Pauze</th>
</tr>
</thead>
<tbody>
{rows.map((r) => (
<tr key={r.key}>
<td>{r.name}</td>
<td>{formatTime(r.worked_seconds)}</td>
<td>{r.pairs}</td>
<td>{r.sessions}</td>
<td>{formatTime(r.paused_seconds)}</td>
</tr>
))}
</tbody>
</table>
)}
</section>
);
}
```
- [ ] **Step 8: Wire nav + route**
In `apps/admin/src/components/Sidebar.tsx`, move Rapporten into `navItems` and shrink `soonItems`:
```tsx
const navItems = [
{ to: '/', label: 'Live' },
{ to: '/handelingen', label: 'Handelingen' },
{ to: '/sessies', label: 'Sessies' },
{ to: '/rapporten', label: 'Rapporten' },
] as const;
// Sections planned for the final Phase 3b cycle — shown muted/disabled.
const soonItems = ['Gebruikers'] as const;
```
In `apps/admin/src/App.tsx`, import and add the route:
```tsx
import Reports from './screens/Reports';
```
```tsx
<Route path="/sessies" element={<Sessions />} />
<Route path="/rapporten" element={<Reports />} />
```
- [ ] **Step 9: Add minimal styles**
Append to `apps/admin/src/styles.css`:
```css
.reports-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.reports-filters {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
margin: 1rem 0;
}
.reports-filters label {
display: flex;
flex-direction: column;
font-size: 0.8rem;
gap: 0.25rem;
}
.reports-presets {
display: flex;
gap: 0.5rem;
}
.reports-totals {
padding: 0.75rem 1rem;
background: var(--surface, #f4f4f5);
border-radius: 0.5rem;
margin-bottom: 1.5rem;
}
.reports-section {
margin-bottom: 1.5rem;
}
.reports-section-title {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.reports-table {
width: 100%;
border-collapse: collapse;
}
.reports-table th,
.reports-table td {
text-align: left;
padding: 0.4rem 0.6rem;
border-bottom: 1px solid var(--border, #e4e4e7);
}
.reports-table td:not(:first-child),
.reports-table th:not(:first-child) {
text-align: right;
}
```
- [ ] **Step 10: Run the screen + helper tests**
Run: `yarn workspace @solelog/admin test Reports date-range`
Expected: PASS — all three Reports cases + date-range cases green.
- [ ] **Step 11: Full admin suite, typecheck, build, format, commit**
```bash
yarn workspace @solelog/admin test
yarn workspace @solelog/admin typecheck
yarn workspace @solelog/admin build
npx oxfmt apps/admin/src/screens/Reports.tsx apps/admin/src/screens/Reports.test.tsx apps/admin/src/lib/date-range.ts apps/admin/src/lib/date-range.test.ts apps/admin/src/components/Sidebar.tsx apps/admin/src/App.tsx
git add apps/admin/src/screens/Reports.tsx apps/admin/src/screens/Reports.test.tsx apps/admin/src/lib/date-range.ts apps/admin/src/lib/date-range.test.ts apps/admin/src/components/Sidebar.tsx apps/admin/src/App.tsx apps/admin/src/styles.css
git commit -m "feat(admin): Rapporten screen with filters, totals, breakdowns + CSV export"
```
---
## Final verification (after all tasks)
- [ ] `yarn workspace @solelog/api test` — all green (incl. `csv`, `report`, regression `export`).
- [ ] `yarn workspace @solelog/admin test` — all green (incl. `reports`, `date-range`, `Reports`).
- [ ] `yarn workspace @solelog/api typecheck` && `yarn workspace @solelog/admin typecheck` — clean.
- [ ] `yarn workspace @solelog/admin build` — succeeds.
- [ ] `npx oxlint` — clean.
- [ ] `git log --oneline` shows five task commits.
## Self-review notes (plan vs spec)
- **Spec A (report endpoint):** Task 2. Filtered query helper, JS aggregation, sort by worked desc, empty→zeros, null type bucketed. ✓
- **Spec A (export endpoint):** Task 3. All-users, Worker column, range filename, filter-respecting. ✓
- **Spec A (DRY refactor):** Task 1. `buildSessionsCsv` with `includeWorker`; regression guard via existing `export.test.ts`. ✓
- **Spec B (contracts):** Task 2 Step 1. `ReportResponse` + row types. ✓
- **Spec C (UI):** Task 5. Sidebar move, `/rapporten` route, filter bar + presets, headline totals, three tables, bearer download. ✓ Task 4 supplies `useReport`/`downloadExport`/`filtersToQuery`. ✓
- **Metrics (all four):** worked/paused/pairs/sessions in totals + every breakdown row + table columns. ✓
- **Completed-only / admin-gated / date semantics:** Global Constraints; enforced in `buildSessionFilters` + `parseReportQuery` (server) and `date-range.ts` (client). ✓
- **Testing:** API aggregation/boundary/filter/gating + export; admin client + screen + date helpers. ✓
- **No new deps; tables-only:** confirmed — only `URLSearchParams`, Blob, existing helpers. ✓
Reference in New Issue View Git Blame Copy Permalink