Submitting from Basic Info complained that required fields on the Settings
tab were empty — a correct error the user could not act on, since Settings
had not been shown yet.
The primary action now reads "Next" while Basic Info is open and validates
only that tab before moving on; Create/Update appears on Settings, the final
step, alongside a Back button. Submit still checks both tabs, since the tab
headers stay clickable and a user can reach Settings without going through
Next.
The detail page fired assign/draw requests blind and surfaced the raw
backend key to the user — a locked paper showed up as the literal string
"paper_locked_after_registration" in a toast.
Manage Questions is now disabled once any candidate has registered, with a
tooltip and badge explaining why; both the manual assign and the random draw
live behind that modal, so one guard covers the same ground the backend's
assertPaperEditable does. The empty-paper alert now explains the deadlock
instead of telling the user to click a button that will fail, and both
error handlers translate paper_locked_after_registration in case someone
registers while the modal is open.
Registrations come from the query ExamCandidatesPanel already runs on this
page, so RTK Query serves it from cache rather than issuing a second request.
Wires useGetGradingSheetQuery into the grading modal: a new 'Candidate's
Answer' column shows the selected option or essay text per question, and
whichever CHOICE scores auto-grading could already compute get prefilled
into the score inputs (tagged 'Auto-graded', still editable — the examiner
can override). Grading a mixed or ESSAY paper no longer means guessing at
what was answered or re-deriving the CHOICE portion by eye.
Degrades to blank inputs exactly as before for an OFFLINE candidate or one
who hasn't sat an online attempt (gradingSheet returns empty answers for
those, not an error).
Frontend half of the backend change: ExamPage no longer disables the
form Select or force-resets it to CHOICE when administrationMethod is
ONLINE (backend's assertOnlineIsChoiceOnly is gone, matching gate
removed here). Also wires up GET .../grading-sheet as
useGetGradingSheetQuery — RecordResultModal wiring (show candidate
answers, prefill auto-computed CHOICE scores) is next.
eligibleQuestions filtered by q.form === exam.form, which matched the
backend's own restriction (assertUsable) only for ONLINE exams. Once
exam.form gained the "BOTH" value for OFFLINE mixed papers, no question
ever has form "BOTH", so the picker silently emptied out or, for a
plain CHOICE-form exam, looked CHOICE-only regardless of administration
method. Now mirrors the backend: CHOICE-only gate applies only when
administrationMethod is ONLINE.
- Introduced rankKey field in Certification interface and payloads.
- Updated CertificationForm to handle rankKey input.
- Enhanced ScheduleExamModal to filter exams based on rank.
- Added getEligibleExams API query to fetch exams relevant to the application's rank.
- Updated related components and types to accommodate new rankKey functionality.
Both themes set `fontFamily: Inter`, and Inter carries no Ge'ez glyphs. So
every Amharic string in a bilingual system — 45-73 KB of locale data per app —
has been rendering in whatever font the OS happened to substitute: different on
Windows, macOS and Android, and matching neither the design nor each other.
Noto Sans Ethiopic goes directly after Inter in one stack rather than being
swapped in under `[lang='am']`. Browsers fall back per glyph, not per element,
so a single stack renders Latin in Inter and Ge'ez in Noto automatically —
including within one string. That is the case that matters here: a registry is
full of mixed-script lines like an Amharic name beside a Latin IMO number, and
a language-scoped swap renders half of those in the wrong face.
Heading line-heights go up a step at the same time. Ge'ez has taller ascenders
and deeper descenders than Latin, so headings set to Inter's natural leading
clip once Ethiopic is actually being rendered. This was deliberately held back
from the theme refactor so that change could prove it altered nothing.
The gallery gains Ge'ez headings and a mixed-script line, so the baselines
cover the case rather than only Latin.
Follow-up: both fonts still load from Google Fonts via a render-blocking CSS
@import. Self-hosting with a subset and preload links is worth doing —
government networks frequently make fonts.googleapis.com slow or unreachable,
and silent Amharic fallback is precisely the failure this commit fixes.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Adds the layer feature code has been missing: tokens that name a role — page
surface, subtle border, danger — instead of a colour. Every one resolves to a
Mantine variable rather than a literal, so they follow the colour scheme for
free and cannot drift from the theme. A parallel palette of raw hexes would
have recreated exactly the problem this exists to fix.
Also closes three accessibility gaps that had no implementation anywhere in the
codebase: no :focus-visible rule, no screen-reader-only utility, and no global
prefers-reduced-motion handling.
The focus work found a real bug, and nearly introduced a worse one. Mantine
already rings its own controls, so the first attempt deferred to it with
`outline: none` on .mantine-focus-auto. That suppressed Mantine's ring without
replacing it, leaving portal buttons with no focus indicator at all — and it
only showed up in one app, because which rule won depended on stylesheet order.
The rules use identical values, so overlapping them is invisible and safe;
opting out is not. The focus test now asserts computed outline width and style,
not just pixels, since a screenshot alone would not have caught this.
`status-tone.ts` establishes the six-tone vocabulary that the 48 scattered
status→colour maps will eventually collapse onto. Nothing consumes it yet.
No visual change: the 8 existing baselines pass unmodified.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Tailwind was configured but had no effect. There is no postcss config anywhere
in the repo, so the three `@tailwind` directives in the backoffice stylesheet
were never expanded — they passed through verbatim into the production CSS
bundle as invalid at-rules for browsers to discard. The portal's copy could not
even do that: nothing imports `apps/portal/src/styles.css`.
The utility classes visible in the built CSS come from the vendored
@tria-plc/iamui package, which ships its own pre-compiled stylesheet and
declares only React as a peer dependency. Removing Tailwind here does not
affect it.
`tailwind-merge` goes too — no file in apps/ or libs/ imports it. postcss and
autoprefixer stay; Vite uses them independently.
Also fixes a bug this uncovered. The orphaned portal stylesheet was not dead
code — it contained scrollbar theming the portal never received, so it has been
rendering raw OS scrollbars while the backoffice got themed ones. Those rules
move to portal.css, which actually loads. Deleting the file without reading it
would have silently kept that gap.
No visual change: all 8 baselines pass unmodified.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The two apps had drifted into unrelated themes. The portal's carried a full
type scale, radius scale, shadow ramp and component defaults; the backoffice's
had none of them — 55 lines defining two colour ramps and little else. With
nothing to inherit, its 23 features each invented their own sizing, which is
the real source of the inconsistency the UI reads with.
Promote the portal's structure to `libs/shared` as `baseTheme`, and reduce both
themes to what they should differ on: brand. The backoffice keeps #1e40af and
the portal keeps Coastal Modern — a distinct accent tells an officer which of
the two systems they are in, and the ramps are not interchangeable in contrast.
Both export names are preserved, so no consumer import changes.
Two properties are deliberately held back rather than shared:
- `colors.gray`: the portal's blue-tinted neutrals retint every dimmed label,
neutral badge and table border. The backoffice adopts them as its own
reviewed change, not as a side effect of sharing a base.
- `primaryShade.dark`: moves every filled control in dark mode; waits until
dark mode is verified end to end.
Also fixes a live bug: PageLoader coloured its primary label `navy.9`, which is
defined in neither theme. Mantine drops unresolved colour keys silently, so the
label in a component used by 20 files had been rendering an inherited colour.
Adds a visual-regression harness to make all of this reviewable. It runs
against a static gallery route rather than real pages, so it needs no API,
database or auth — a theme diff cannot be masked by a migration or an expired
token. The portal is the control group: it is pixel-identical across all four
light/dark × desktop/tablet baselines, which is what makes the refactor
provably lossless.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
