Component Library
Every component the FinCheqIQ build will use, in every state it can reach. Later phases compose from this page — they do not restyle it, and they do not add a component here that isn't demonstrated below.
Buttons
One primary action per screen region. Destructive actions never sit adjacent to the primary action without a confirmation step.
Variants · default state
States · hover, focus, active, disabled, loading
Loading buttons keep their width so the layout never jumps, and become pointer-events: none so a second submit is impossible.
Sizes
Inputs & controls
Every field carries a label, an optional hint, and a message slot reserved beneath it so validation never shifts the layout. Read-only and disabled are deliberately different: read-only keeps ink-coloured data behind a dashed border; disabled greys out entirely.
Text · states
Format: CHQ-YYYY-NNNNNNN. Helper text shows before the field is touched.
Cheque number must be six digits.
From Customer Master — not editable here.
Select · date · search
Post-dated and stale rules are bank-configured.
File drop · toggles
Image quality is assessed before extraction; low-quality images route to review, never to auto-approval.
Form validation primitives
The shared vocabulary every form in every later phase must use. The timing rules below are a contract, not a preference — inconsistent validation timing is the fastest way for an operations tool to feel untrustworthy.
Validation timing contract
| Trigger | What is validated | Used for |
|---|---|---|
| On blur | The single field the user just left, if it was touched or is required | Every field, by default |
| On input | Only a field already showing an error — so the error clears as soon as it is fixed | Error recovery only. Never used to raise a first error. |
| On submit | The whole form, plus the error-summary banner when two or more fields fail | Every form |
| Live | Fields marked data-live="true" | Password strength and confirm-password match only |
Conventions
- Required fields take a brand-coloured asterisk after the label plus aria-required. Optional fields say “Optional” in muted text — never both conventions in one form.
- Errors appear directly under the field with an icon, in danger ink, settling in over 220ms rather than popping.
- Success affirmation is used sparingly — password match, verified code, resolved duplicate — never on every field.
- Helper text is muted and sits in the same slot an error would take, so the layout never shifts.
Live demo · submit empty, then fix a field
Status badges
The states named in the FRD, each drawn from one of the seven families. Colour, glyph shape and the left state-cap always travel together.
Validation decision
Processing & workflow
Signature verification
Duplicate detection & integration
Solid variant · one per screen, for the headline decision
Status-change pulse · advance a cheque through its lifecycle
Confidence & risk indicators
The numeral is always present alongside the shape — a score is never communicated by colour alone. Bar meters carry a notch at the bank's configured threshold so a reviewer can see how far a field sits from the cut-off.
Field-level confidence
| Amount (numeric) | 97.4 |
| Amount (words) | 71.2 |
| MICR line | 99.1 |
| Payee | 34.0 |
| Signature region | — |
Threshold notch shown at 85 — illustrative. Actual thresholds are bank-configured and labelled Target — to be validated during POC.
Cheque-level scores
Signature comparison result
Data table
Dense by default, sticky header, row selection, and three states every queue screen must implement. At tablet it scrolls horizontally with the cheque ID pinned; at mobile it becomes one card per row.
| Cheque ID ▲ | Customer ▲ | Received ▲ | Amount ▲ | Signature | Confidence | Decision | ||
|---|---|---|---|---|---|---|---|---|
| CHQ-2026-0041827 | Al Nahda Trading LLC CUST-00214 |
14 Aug · 09:41 | 12,450.000 | No usable signature | 72.4 | Review required | ||
| CHQ-2026-0041828 | Muscat Marine Services SAOC CUST-00871 |
14 Aug · 09:44 | 3,900.500 | High confidence match | 96.8 | Valid | ||
| CHQ-2026-0041829 | Sur Logistics Co. CUST-01490 |
14 Aug · 09:52 | 147.250 | Medium confidence | 64.1 | Processing | ||
| CHQ-2026-0041830 | Bahla Foods LLC CUST-00033 |
14 Aug · 10:03 | 88,000.000 | High confidence match | 93.7 | Above approval threshold | ||
| CHQ-2026-0041831 | Nizwa Contracting LLC CUST-00762 |
14 Aug · 10:07 | 6,215.750 | Low confidence match | 28.9 | Invalid | ||
No cheques match these filtersNothing in this queue for 14 Aug 2026 with the current filter set. Clear the date filter or widen the decision states to see more. | ||||||||
Cards & panels
Three shapes only: a content card, a KPI card, and a comparison card for putting master data beside extracted data — the pattern the review workbench, signature comparison and master screens all inherit. Every figure below is illustrative placeholder data, not a bank metric — actual volumes, STP rates and thresholds are supplied by the bank.
Cheque summary
Review requiredMaster data comparison
2 mismatchesModal, drawer & toast
Drawers carry context beside a table — the review workbench pattern. Modals carry a decision that must be made before anything else continues. Toasts confirm something that already happened and never carry a decision.
Navigation & feedback
Tabs, breadcrumbs, tooltips, the user menu and the notification bell — all live in the topbar above. Repeated here in isolation so later phases can copy the exact markup.
Tabs
Twelve fields extracted; two fell below the configured confidence threshold and are flagged for the reviewer.
Account holder name and account status do not reconcile with the Customer Master.
Signature region extracted at 41.0 image quality — below the usable threshold.
Nine state transitions recorded since intake, each timestamped and attributed.
Breadcrumbs
Tooltip · avatar · bell · pagination
Empty state · used wherever a list can be empty
Nothing awaiting your approval
Every exception assigned to you has been actioned. New items appear here the moment a maker submits.
Reject this cheque?
CHQ-2026-0041827 · Al Nahda Trading LLC · OMR 12,450.000
The cheque moves to the Exception Queue and the maker is notified. This action is recorded against the tamper-evident audit trail and cannot be edited afterwards.