[STU-111] Add Civil ID fact panel to candidate profile

[BAWES]

Summary

Adds a dedicated Civil ID fact panel below the profile facts grid on the candidate profile page. The panel shows:

• Civil ID number and expiry date
• Amber "Expires soon" badge when expiry is within 90 days
• Red "Expired" badge when expiry is in the past
• "Needs verification" badge when flagged
• Photo front/back thumbnails with responsive layout
• Dark mode support

Changes

• src/modules/candidates/CandidateProfile.tsx — Added CivilIdPanel component + wired it below the facts grid
• src/app/styles.css — Added ~103 lines of CSS for .civilIdPanel, badges, photos, dark mode, and responsive breakpoints

Test plan

• TypeScript compiles with zero errors (in changed files)
• Build passes
• Panel hidden when candidate has no civil ID data
• ID number and expiry date display correctly
• Expiry badges (amber/red) render based on date thresholds
• Needs verification badge renders when flagged
• Photo thumbnails render when available
• Dark mode CSS classes present
• Responsive layout (photos stack vertically below 760px)

Database has candidates covering all scenarios (see QA test matrix in STU-125).

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Civil ID panel added to candidate profiles showing verification status (on file/verified/expired/expiring), ID number, expiry date, and optional front/back images.
  • Request details now surface rejection reasons where applicable.

• Style

  • New professional Civil ID styling with responsive mobile layout and dark-theme support; color-coded indicators for expired/warning states.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
studenthub-next	Error		May 21, 2026 9:11pm

[coderabbitai]

Walkthrough

Adds a CivilIdPanel component and corresponding CSS, updates CandidateProfile to render the panel and simplify the Civil ID fact display, and includes two small fixes: form action prop changes and adding rejection_reason to a Prisma select.

Changes

Civil ID Panel

Layer / File(s)	Summary
CivilIdPanel component and integration src/modules/candidates/CandidateProfile.tsx	CivilIdPanel computes expiry status and verification badge, and conditionally renders ID number, formatted expiry date, and front/back images. CandidateProfile now shows the ID value (or verification/not-set text) and renders CivilIdPanel after the facts grid.
CivilIdPanel styling src/app/styles.css	New CSS selectors for .civilIdPanel define layout, fields grid typography, expired/warning colors, photo gallery cropping and sizing, clear-verification button styles with hover, dark-theme override, and a responsive rule collapsing photos to one column on small screens.

Miscellaneous fixes

Layer / File(s)	Summary
WorkLog form action props src/modules/candidates/WorkLogStaffActions.tsx	Rejection and approval <form> elements now receive rejectAction/approveAction directly as their action prop (removed explicit TypeScript assertions).
Inspector ID request select src/modules/workspace/data.ts	getInspectorIdRequestDetail Prisma select now includes rejection_reason: true, so returned request includes the rejection reason field.

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs:

• BAWES/studenthub-codex#27: Overlapping civilIdPanel / CSS selector changes in src/app/styles.css.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a Civil ID fact panel to the candidate profile page.
Description check	✅ Passed	The description covers summary, changes, test plan, and includes Agent Notes. However, required checklist items are not completed and Type selection is not marked.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/STU-111-civil-id-panel

⚔️ Resolve merge conflicts

• Resolve merge conflict in branch feature/STU-111-civil-id-panel

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

src/modules/candidates/WorkLogStaffActions.tsx (1)

17-24: ⚡ Quick win

Remove redundant as WorkLogAction casts in useActionState

approveWorkLog and rejectWorkLog in src/modules/candidates/worklog-actions.ts have the same signature as WorkLogAction ((state: { error: string }, formData: FormData) => Promise<{ error: string }>), so the as WorkLogAction casts at src/modules/candidates/WorkLogStaffActions.tsx lines 18 and 22 are unnecessary.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/modules/candidates/WorkLogStaffActions.tsx` around lines 17 - 24, The
explicit type assertions "as WorkLogAction" on approveWorkLog and rejectWorkLog
are redundant; remove the casts so useActionState is called with approveWorkLog
and rejectWorkLog directly. Update the two lines that call useActionState with
approveWorkLog and rejectWorkLog in WorkLogStaffActions.tsx (keeping the same
initial state { error: "" }) and ensure no other code relies on those casts; the
function signatures already match the WorkLogAction type.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/modules/candidates/WorkLogStaffActions.tsx`:
- Around line 17-24: The explicit type assertions "as WorkLogAction" on
approveWorkLog and rejectWorkLog are redundant; remove the casts so
useActionState is called with approveWorkLog and rejectWorkLog directly. Update
the two lines that call useActionState with approveWorkLog and rejectWorkLog in
WorkLogStaffActions.tsx (keeping the same initial state { error: "" }) and
ensure no other code relies on those casts; the function signatures already
match the WorkLogAction type.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: a25d406f-b7f8-48a6-aa49-3330c2721fd1

📥 Commits

Reviewing files that changed from the base of the PR and between 95f02d9 and 0a9a24c.

📒 Files selected for processing (2)

• src/modules/candidates/WorkLogStaffActions.tsx
• src/modules/workspace/data.ts