259
Total User Interface
133
Low Complexity
102
Medium Complexity
24
High Complexity
59
Shared

User Interface components handle presentation logic, user interactions, and visual elements of the application.

Organization Card Widget

A reusable card widget that displays a single organization's logo, name, and visual branding. Handles tap interactions and communicates sele...

low Organization Selection Screen
Organization Selection Screen

The pre-login entry point screen that presents available organizations for the user to select before authentication. Renders a list of organ...

low Organization Selection Screen
Login Form

WCAG 2.2 AA compliant email and password form widget. Renders accessible AppTextField components for credentials, an AppButton for submissio...

medium Email and Password Login
Login Screen

The root screen for email/password authentication, composing the login form within a keyboard-aware, scrollable layout. Handles screen-level...

low Email and Password Login
Password Visibility Toggle

Accessible icon button embedded within the password field that toggles between obscured and visible password text. Meets WCAG 2.2 AA touch t...

low Email and Password Login
Authentication Method Selector Screen

Screen presented after organization selection that lets the user choose between BankID, Vipps, or email/password login. Renders method cards...

low BankID and Vipps Login
BankID Authentication Screen

Handles the BankID authentication flow, rendering an embedded WebView or triggering a redirect to the BankID broker. Displays progress and e...

high BankID and Vipps Login
Biometric Authentication Screen

Presents the biometric prompt (Face ID or fingerprint) for returning users who have already completed BankID or Vipps first-time verificatio...

medium BankID and Vipps Login
Personnummer Confirmation Widget

Inline widget shown after a successful Vipps login that informs the user that their national identity number has been retrieved and shared w...

low BankID and Vipps Login
Vipps Authentication Screen

Initiates and displays the Vipps Login OAuth flow. Handles the redirect to the Vipps app or Vipps web, monitors the deep-link callback, and ...

medium BankID and Vipps Login
Biometric Prompt Overlay

Full-screen overlay displayed on app resume that triggers the native biometric authentication dialog. Shows the app logo, a brief prompt mes...

low Biometric Session Authentication
Biometric Unavailable Banner

Inline banner or modal shown when biometric hardware is absent or not enrolled on the device. Guides the user to device settings to enable b...

low Biometric Session Authentication
No-Access Screen

Displayed to global admin users on the mobile app, since their administration is performed via a separate admin portal. Communicates clearly...

low Role-Based Access Control
Role Switch Widget

Shared widget that allows users holding multiple roles to switch their active role within the app session. Triggers role state update and ca...

medium shared Role-Based Access Control
Role-Aware Bottom Navigation

Bottom navigation bar that conditionally renders tabs and restricts navigation options based on the user's active role. Integrates with Stat...

medium shared Role-Based Access Control
Role-Based Home Screen

Renders distinct home screen content based on the authenticated user's active role. Displays coordinator dashboards, peer mentor activity su...

medium Role-Based Access Control
No-Access Screen

Full-screen terminal route widget displayed when the authenticated user's role is not permitted to use the mobile application. Renders the o...

low No-Access Screen for Restricted Roles
Activity Registration Bottom Sheet

The primary modal entry point for activity logging, implemented as a bottom-sheet wizard container. Hosts all wizard steps in sequence and m...

medium Quick Activity Registration
Activity Type Selection Step

Wizard step 1 that presents available activity types as selectable chips or list items. Pre-selects the most recently used activity type fro...

low Quick Activity Registration
Date Selection Step

Wizard step 2 that defaults to today's date with a calendar picker available for override. The default state satisfies the overwhelming majo...

low Quick Activity Registration
Duration Selection Step

Wizard step 3 offering preset duration chips (15 min, 30 min, 1 h, 2 h) for one-tap selection, backed by a free-entry fallback for non-stand...

low Quick Activity Registration
Optional Notes Input Step

Wizard step 4 providing a free-text notes field that is fully optional and clearly labelled as such. Supports both keyboard input and OS-lev...

low Quick Activity Registration
Registration Confirmation View

The terminal state of the wizard that displays a strong, unambiguous visual confirmation that the activity record was saved. Designed to eli...

low Quick Activity Registration
Activity Type Admin Screen

Admin portal screen for managing the per-organisation catalogue of activity types. Displays a list of all configured activity types with the...

medium Activity Type Configuration
Activity Type Form Screen

Create and edit form screen in the admin portal for configuring a single activity type. Captures display name, metadata flags, Bufdir catego...

medium Activity Type Configuration
Activity Type Selection Screen

Mobile screen shown during the activity registration wizard that allows a peer mentor to pick an activity type from their organisation's cat...

low shared Activity Type Configuration
Dynamic Field Renderer

Renders form fields at runtime from a JSON field schema fetched from Supabase. Supports text, multiline text, checkbox group, radio, and dat...

high Structured Post-Session Report
Post-Session Report Screen

The primary screen for composing and submitting a structured report after a home visit or one-on-one session. Renders all org-specific field...

high Structured Post-Session Report
Speech-to-Text Field Overlay

A per-field microphone trigger widget that activates Flutter's speech_to_text package and appends the transcription result into the associat...

medium shared Structured Post-Session Report
Way Forward Section Widget

A dedicated UI section within the report form for entering one or more 'way forward' entries that function as task handoffs to the coordinat...

medium Structured Post-Session Report
Attestation Queue Screen

Coordinator-facing screen displaying all expense claims that exceed the auto-approval threshold and require manual review. Lists pending cla...

medium Travel & Expense Registration
Driver Honorarium Form

Blindeforbundet-specific form extension rendered conditionally when the activity type involves client transport. Captures driver honorarium ...

medium Travel & Expense Registration
Expense Registration Screen

Primary screen for logging travel expenses attached to an activity record. Presents the expense type selector, dynamic form fields based on ...

high Travel & Expense Registration
Expense Summary Card

Read-only card widget displayed on the activity detail view summarising the attached expense claim, its approval status badge, and a link to...

low Travel & Expense Registration
Expense Type Selector Widget

Custom multi-select widget that enforces mutual exclusion rules between logically incompatible expense types (e.g. kilometre allowance and b...

high Travel & Expense Registration
Receipt Capture Widget

Reusable widget for capturing or selecting a receipt photo via the device camera or gallery using image_picker. Displays the attached image ...

medium shared Travel & Expense Registration
Bulk Registration Confirmation Screen

Review screen presented before final submission in bulk mode, listing all selected peer mentors alongside the single activity record that wi...

medium Bulk & Proxy Registration
Peer Mentor Multi-Select List

Multi-select version of the peer mentor contact list specifically for bulk mode, allowing coordinators to select several peer mentors simult...

medium Bulk & Proxy Registration
Peer Mentor Single Selector

Searchable list of peer mentors drawn from the coordinator's existing contact list, allowing selection of exactly one peer mentor for single...

low shared Bulk & Proxy Registration
Proxy Activity Wizard

Adaptation of the standard activity wizard that visibly indicates the coordinator is recording on behalf of another person. Displays a persi...

medium Bulk & Proxy Registration
Proxy Audit Badge Widget

Reusable inline widget that renders a subtle 'Recorded by coordinator' badge on any activity card or detail view where recorded_by_user_id d...

low shared Bulk & Proxy Registration
Proxy Mode Selector Screen

Entry screen allowing coordinators to choose between single-proxy mode (one peer mentor) and bulk mode (multiple peer mentors). Presents cle...

low Bulk & Proxy Registration
Activity Chart Widget

Bar or line chart rendered via fl_chart showing activity volume over time within the selected window. Provides visual context for trends acr...

medium Activity Statistics Dashboard
Coordinator Stats Screen

Aggregated statistics screen for coordinators showing totals across all peer mentors in their local chapter(s). Supports multi-chapter coord...

high Activity Statistics Dashboard
Peer Mentor Stats List

Scrollable list shown on the coordinator stats screen enumerating all peer mentors in scope with their individual totals for the selected ti...

medium Activity Statistics Dashboard
Peer Mentor Stats Screen

The primary statistics screen shown to peer mentors displaying their own aggregated totals for the selected time window. Shows session count...

medium Activity Statistics Dashboard
Stats Summary Cards

A row of stat cards displaying the key KPIs: total sessions, total hours, and (for peer mentors) pending reimbursement amount. Uses the desi...

low Activity Statistics Dashboard
Time Window Selector

Segmented control or tab bar widget allowing the user to switch between current month, quarter, and year time windows. Emits a TimeWindow va...

low Activity Statistics Dashboard
Bufdir Export Screen

Main screen for initiating a Bufdir export. Hosts scope selector, period picker, preview panel, and confirmation flow in a single scrollable...

medium Bufdir Report Export
Export Confirmation Dialog

Modal dialog that presents a final summary to the user and requests explicit confirmation before generating the export. Offers format select...

low Bufdir Report Export
Export History List

Lists previously generated Bufdir exports for the current scope, showing date, period, format, and download status. Allows re-downloading pa...

low Bufdir Report Export
Export Period Picker

Date range picker pre-configured with common Bufdir reporting periods (quarterly, annual). Users can also pick a custom date range. Validate...

low shared Bufdir Report Export
Export Preview Panel

Displays a structured summary of the data that will be included in the export before the user confirms: number of peer mentors, total activi...

medium Bufdir Report Export
Export Progress Indicator

Full-screen loading overlay displayed while the Supabase Edge Function processes the export. Shows progress messaging and cancellation optio...

low Bufdir Report Export
Export Scope Selector

Dropdown or segmented control allowing the user to choose the organisational scope of the export: local chapter, region, or national level. ...

medium Bufdir Report Export
Deduplication Queue Screen

Coordinator-only screen that lists all activity records flagged as potential duplicates where the submitting peer mentor has not yet resolve...

medium Duplicate Activity Detection
Duplicate Comparison Panel

Reusable widget that renders a structured side-by-side or stacked comparison of two activity records, highlighting differing fields. Used in...

medium Duplicate Activity Detection
Duplicate Warning Bottom Sheet

Non-blocking modal bottom sheet that surfaces when a potential duplicate activity is detected during submission. Presents the side-by-side c...

medium Duplicate Activity Detection
Contact Card Widget

Reusable card widget displaying a contact's key information (name, role, organization, notes snippet). Styled with design tokens and meets W...

low shared Contact List Management
Contact List Screen

Main screen rendering role-specific contact list views for coordinators, org admins, and peer mentors. Composes the search bar, view switche...

medium Contact List Management
Contact Search Bar

Accessible search input component with debounce support for filtering contacts by name and notes. Built on the shared AppTextField widget an...

low shared Contact List Management
Contact View Switcher

Toggle control that switches the list between contact view and peer mentor view, notably required for Barnekreftforeningen. Renders as a seg...

low Contact List Management
Peer Mentor Card Widget

Reusable card widget for displaying peer mentor-specific information including availability status, assigned members count, and certificatio...

low shared Contact List Management
Activity History List

Scrollable list section within the contact detail screen showing the contact's past activities, dates, and durations. Provides an at-a-glanc...

low shared Contact Detail & Edit Screen
Assignment Status Indicator

Badge or status chip displaying the current assignment state (open, pending, completed) for Blindeforbundet contacts. Uses organization-spec...

low Contact Detail & Edit Screen
Contact Detail Screen

Main screen displaying the full profile of a contact or peer mentor, including affiliation, role, and activity history. Adapts layout and vi...

medium Contact Detail & Edit Screen
Edit Contact Screen

Form screen allowing coordinators and admins to update contact information using AppTextField and custom fields table widgets. Enforces clie...

medium Contact Detail & Edit Screen
Encrypted Field Display Widget

Specialized display layer for Blindeforbundet's sensitive contact data (name, address, medical summary). Reveals decrypted content only on e...

high Contact Detail & Edit Screen
Multi-Chapter Affiliation Chip Widget

Reusable chip/tag widget displaying a contact's membership across up to 5 local chapters simultaneously (NHF requirement). Supports both rea...

medium shared Contact Detail & Edit Screen
Assigned Contacts List

Scrollable list section displaying the contacts currently assigned to this peer mentor. Each row shows contact name, assignment date, and la...

low Peer Mentor Profile & Status Screen
Certification Alert Banner

Conditional banner displayed when a peer mentor's HLF certification has expired or is within 30 days of expiry. Presents a clear call-to-act...

low Peer Mentor Profile & Status Screen
Certification Status Badge

Reusable widget rendering a pill-shaped badge indicating a peer mentor's certification state: active, paused, or expired. Uses design token ...

low shared Peer Mentor Profile & Status Screen
Mentor Activity Summary Panel

Card panel displaying aggregated activity statistics for the peer mentor: total activities, hours logged, and activity breakdown by type. Pr...

low Peer Mentor Profile & Status Screen
Peer Mentor Detail Screen

Top-level Flutter screen widget that orchestrates the peer mentor profile view. Assembles all sub-sections (profile header, status badge, as...

medium Peer Mentor Profile & Status Screen
Peer Mentor Profile Header

Displays the peer mentor's avatar, full name, organization label, and primary status badge in a prominent card at the top of the detail scre...

low Peer Mentor Profile & Status Screen
Pause / Reactivate Toggle

Primary UI control on the peer mentor profile screen that allows a mentor to toggle their status between active and paused. Displays current...

low Peer Mentor Pause & Reactivation
Pause Confirmation Dialog

Modal dialog that prompts the peer mentor to confirm a pause action and optionally provide a reason. Communicates that the coordinator will ...

low Peer Mentor Pause & Reactivation
Pause Status Banner

Informational banner shown on coordinator-facing peer mentor list and detail views when a mentor is paused. Prevents coordinators from unkno...

low Peer Mentor Pause & Reactivation
Chapter Affiliations Panel

Displays all chapter memberships for a contact on their profile screen, showing up to 5 simultaneous local chapter affiliations. Renders eac...

medium Multi-Chapter Membership Handling
Chapter Assignment Editor

Modal or bottom-sheet UI allowing coordinators to add or remove chapter affiliations for a contact, enforcing the maximum of 5 simultaneous ...

medium Multi-Chapter Membership Handling
Duplicate Activity Warning Dialog

Dismissible warning dialog surfaced during activity submission when the system detects a potential duplicate across coordinators from differ...

medium shared Multi-Chapter Membership Handling
Accessible Search Input Field

A semantically labeled TextField for entering search queries, supporting screen readers (VoiceOver/JAWS) via Semantics widget and voice-to-t...

low Contact & Notes Search
Contact Search Screen

Main screen for searching contacts and notes, providing a search input field and a filtered results list. Renders ContactCard and PeerMentor...

low Contact & Notes Search
Search Results List

Displays filtered search results as a scrollable list of ContactCard and PeerMentorCard widgets. The list is wrapped in a Semantics widget s...

low Contact & Notes Search
Bulk Proxy Registration Screen

Dedicated screen for registering a recurring group activity across multiple peer mentors simultaneously. Coordinator selects a recurring act...

high Coordinator Proxy Registration for Contacts
Mentor Multi-Select Widget

Reusable multi-select contact list widget that allows coordinators to pick one or more peer mentors from their managed contacts. Supports se...

medium shared Coordinator Proxy Registration for Contacts
Proxy Confirmation Screen

Confirmation step presented before final proxy submission, showing a full summary of the activity details and the complete list of attribute...

low Coordinator Proxy Registration for Contacts
Proxy Registration Screen

Primary screen allowing coordinators to register a single activity on behalf of a specific peer mentor. Displays the acting coordinator iden...

medium Coordinator Proxy Registration for Contacts
Recurring Activity Template Selector

Dropdown or bottom-sheet selector that lists the coordinator's saved recurring activity templates. Populates the bulk registration form with...

low Coordinator Proxy Registration for Contacts
Location Consent Dialog

Modal dialog shown to peer mentors when they are invited to share their location. Explains what data is collected, how it is used, and links...

low Geographic Peer Mentor Map View
Map / List View Toggle Button

Persistent toggle button always visible on the map screen that switches between the interactive map view and the accessible list view fallba...

low Geographic Peer Mentor Map View
Map Filter Panel

Collapsible filter panel allowing coordinators to narrow visible mentor markers by availability status or specialization. Emits filter chang...

medium shared Geographic Peer Mentor Map View
Map View Screen

Main interactive map screen displaying peer mentor locations as clickable markers. Renders the full-screen map canvas with overlay controls ...

high Geographic Peer Mentor Map View
Mentor Info Popup Card

Overlay card displayed when a mentor marker is tapped, showing name, specializations, and availability. Includes a deep link button navigati...

low Geographic Peer Mentor Map View
Mentor List Fallback View

Accessible list-based alternative to the map that always remains available for screen reader users and low-vision users who cannot interact ...

low Geographic Peer Mentor Map View
Mentor Map Marker Widget

Custom map marker widget representing a single peer mentor on the map. Displays availability status via color coding and opens a detail popu...

medium Geographic Peer Mentor Map View
Expense Calculation Preview

Displays the automatically computed reimbursement estimate for the current selection in real time. Updates as the user selects or deselects ...

low Expense Type Selection with Mutual Exclusion
Expense Type Picker Widget

A stateful multi-select widget presenting the four fixed expense categories (kilometers driven, tolls, parking, public transit) as discrete ...

medium Expense Type Selection with Mutual Exclusion
Distance Input Field Widget

A numeric Flutter input field for entering kilometres driven. Accepts a pre-filled default from the last-used distance cache and fires a cal...

low Mileage Reimbursement Entry
Mileage Entry Form

The primary Flutter form screen allowing peer mentors to log a mileage claim. Renders origin, optional destination, and distance fields with...

medium Mileage Reimbursement Entry
Real-Time Reimbursement Display Widget

A stateful Flutter widget that reactively shows the calculated payout as the peer mentor enters or adjusts the distance. Calculation is perf...

low Mileage Reimbursement Entry
Route Input Fields Widget

A reusable Flutter widget pair providing the origin text field and the optional destination text field. The destination field is clearly lab...

low Mileage Reimbursement Entry
Receipt Attachment Indicator

Compact inline widget shown on the expense form step to indicate whether a receipt is attached, required, or optional based on the configure...

low Receipt Capture and Attachment
Receipt Camera Sheet

Inline bottom sheet presented within the expense wizard that offers camera capture and file-picker upload options without navigating away fr...

medium Receipt Capture and Attachment
Receipt Thumbnail Preview Widget

Displays a thumbnail of the captured or selected receipt image before form submission. Shows a remove button, file type indicator for PDFs, ...

low Receipt Capture and Attachment
Approval Action Bottom Sheet

Modal bottom sheet presented when a coordinator reviews an individual claim. Provides approve and reject actions with an optional freetext c...

medium Threshold-Based Expense Approval Workflow
Bulk Approval Action Bar

Sticky bottom action bar that appears when one or more claims are selected in the review queue. Displays the count of selected items and pro...

low Threshold-Based Expense Approval Workflow
Claim Status Audit Timeline

Read-only timeline widget embedded in the claim detail screen, showing every state transition with actor, timestamp, and optional comment. D...

low Threshold-Based Expense Approval Workflow
Claim Status Badge

Compact, reusable chip widget that renders the current status of a claim (draft, submitted, approved, rejected, exported) with a distinct co...

low shared Threshold-Based Expense Approval Workflow
Coordinator Review Queue Screen

Paginated list screen displaying all pending expense claims awaiting coordinator review. Supports multi-select for bulk approval and provide...

high Threshold-Based Expense Approval Workflow
Confidentiality Declaration Acknowledgement Screen

Screen presented to the driver to read and confirm receipt of the confidentiality declaration. Implements a lightweight e-signature flow usi...

medium Driver Administration and Confidentiality Declarations
Confidentiality Declaration Send Screen

Screen that allows a coordinator or peer mentor to attach an existing confidentiality declaration template or trigger electronic delivery to...

medium Driver Administration and Confidentiality Declarations
Declaration Status Badge

Compact UI widget that displays the current status of a confidentiality declaration (pending, sent, acknowledged, expired) with appropriate ...

low Driver Administration and Confidentiality Declarations
Driver Assignment History List

List view showing all recorded driver assignments for a coordinator, including linked contact, fee amount, date, and declaration status. Sup...

medium Driver Administration and Confidentiality Declarations
Driver Feature Flag Guard Widget

Wrapper widget that conditionally renders driver-related UI elements based on the organization-level feature flag. Ensures driver fee fields...

low Driver Administration and Confidentiality Declarations
Driver Fee Registration Form

Form screen for recording a driving assignment linked to a specific contact, capturing the agreed driver fee amount, and initiating the conf...

medium Driver Administration and Confidentiality Declarations
Accounting Export Screen

Main administrative screen where coordinators and org admins initiate accounting system exports. Displays available export configurations pe...

medium Accounting System Export and Integration
Export Confirmation Dialog

Modal dialog shown after an export run completes. Summarizes the number of expense claims included in the export file, lists any claims skip...

low Accounting System Export and Integration
Export Date Range Picker

Reusable UI component for selecting a configurable start and end date for export operations. Used in both accounting export and Bufdir repor...

low shared Accounting System Export and Integration
Export History Panel

Panel within the accounting export screen that lists previous export runs for the organization, showing timestamp, triggered-by user, claim ...

low Accounting System Export and Integration
Aggregation Progress Indicator

Shows the status of an in-progress aggregation computation, providing visual feedback when Supabase RPC functions are executing. Displays wa...

low Bufdir Data Aggregation
Aggregation Summary Widget

Displays a real-time summary of aggregated Bufdir metrics for the current reporting period, including participant counts, activity hours, an...

medium Bufdir Data Aggregation
Custom Date Range Picker

Reusable date range selection widget used when predefined presets do not cover the required period. Enforces logical date ordering and surfa...

low shared Bufdir Report Period Selection
Period Preset List Widget

Renders the list of predefined period options (calendar year, Bufdir fiscal periods) sourced from the organization's configuration. Each pre...

low Bufdir Report Period Selection
Period Selection Screen

Primary screen allowing coordinators and organization admins to choose a Bufdir report period. Displays predefined grant-cycle period option...

low Bufdir Report Period Selection
Record Count Confirmation Banner

Displays the number of activity records falling within the selected period and warns the user if the period end date is in the future or if ...

low Bufdir Report Period Selection
Bufdir Field Row Widget

Renders a single label-value pair from the Bufdir form with an inline validation state indicator. Supports three visual states: normal, warn...

medium Bufdir Report Preview
Bufdir Report Preview Screen

Full-screen preview of the assembled Bufdir report, organized into the official form's sections and field order. Renders all aggregated figu...

high Bufdir Report Preview
Bufdir Report Section Widget

Renders a single named section of the Bufdir report (e.g., 'Individrettede aktiviteter', 'Gruppetilbud') as a collapsible card containing a ...

medium Bufdir Report Preview
Period Comparison Diff View

Optional side-by-side or inline diff panel that shows each numeric field's value for the current reporting period alongside the correspondin...

medium Bufdir Report Preview
Validation Summary Banner

Sticky banner at the top of the preview screen that summarises the number and severity of validation issues found in the current report draf...

low Bufdir Report Preview
Report History List Item Widget

Card widget representing a single past Bufdir report entry. Displays the reporting period, generation timestamp, generating user name, and a...

low Bufdir Report History & Audit Log
Report History Screen

Main screen displaying a chronological list of all previously generated Bufdir reports scoped to the organization. Shows period covered, gen...

low Bufdir Report History & Audit Log
Report Summary Metrics Widget

Inline summary widget displayed per report entry showing key figures extracted at generation time — total activities, total hours, and parti...

low Bufdir Report History & Audit Log
Bulk Participant List Widget

Scrollable list widget displaying peer mentors selected for a bulk registration. Each row shows the mentor's name, a duplicate-conflict badg...

low Proxy & Bulk Activity Registration
Bulk Registration Screen

Screen for coordinators to register the same recurring activity (e.g. weekly training session) for multiple peer mentors in a single operati...

high Proxy & Bulk Activity Registration
Duplicate Activity Warning Dialog

Modal dialog displayed when the duplicate detection service identifies a conflicting activity record for the same peer mentor, date, and act...

low shared Proxy & Bulk Activity Registration
Proxy Activity Form

Reusable activity form pre-configured for proxy entry. Shows all standard activity fields (date, type, duration, notes) and adds an attribut...

medium shared Proxy & Bulk Activity Registration
Proxy Peer Mentor Selector

Search and select widget that lets a coordinator pick one or more peer mentors from their chapter's roster. Supports typeahead search by nam...

medium shared Proxy & Bulk Activity Registration
Proxy Registration Screen

Main screen allowing coordinators to register an activity on behalf of a single peer mentor. Presents a peer mentor selector followed by the...

medium Proxy & Bulk Activity Registration
Certification Expiry Warning Banner

In-app warning component shown to coordinators when a peer mentor's certification is approaching expiry. Displays days remaining and provide...

low Peer Mentor Pause & Status Management
Coordinator Pause Roster Screen

Dedicated screen for coordinators to view all peer mentors under their management with their current pause and certification statuses. Suppo...

medium Peer Mentor Pause & Status Management
Expected Return Date Picker

Reusable date selection widget used within the pause activation flow to capture an optional expected return date. Enforces future-only date ...

low shared Peer Mentor Pause & Status Management
Pause Activation Screen

Full-screen modal allowing a peer mentor to activate or lift a pause. Collects optional expected return date and displays current pause stat...

low shared Peer Mentor Pause & Status Management
Pause Status Indicator

Reusable badge/chip widget rendering the peer mentor's status enum (active, paused, expired_cert, resigned) with appropriate color coding an...

low shared Peer Mentor Pause & Status Management
Activity Log Viewer

Scrollable, filterable log of all activities across the org's chapters, visible to org admins. Supports filtering by chapter, date range, ac...

medium Organisation Admin Portal
Admin Dashboard Screen

Main entry screen for organisation admins showing aggregated KPI widgets across the entire org hierarchy. Displays active peer mentors, acti...

high Organisation Admin Portal
Admin Export Panel

UI panel for triggering CSV and Excel exports of org-level data for Bufdir grant reporting and internal governance. Allows selecting the org...

medium Organisation Admin Portal
Admin KPI Stat Widget

Reusable stat card widget displaying a single KPI metric (e.g., active peer mentors, activities this month, pending reimbursements). Support...

low shared Organisation Admin Portal
Certification Status Panel

Dedicated view within the admin portal displaying peer mentors with expiring or expired certifications across the org. Groups mentors by cha...

medium Organisation Admin Portal
Organisation Hierarchy Navigator

Tree-based navigation component for browsing deeply nested org structures (NHF: national association → region → local chapter) as well as fl...

high shared Organisation Admin Portal
Role Assignment Panel

Modal or slide-over panel for assigning or changing a user's role within the organisation (peer mentor, coordinator, org_admin). Enforces ro...

medium Organisation Admin Portal
User Account Management Screen

Paginated list and management UI for all users within the admin's org scope. Supports filtering by role, chapter, status (active, paused, pe...

high Organisation Admin Portal
Bufdir Export Trigger Screen

The primary screen presenting the single-button export experience for generating Bufdir reports. Guides the user through period selection, f...

medium Bufdir Reporting & Export
Bufdir Period Selector Widget

Reusable date-range picker pre-configured for common Bufdir reporting periods (quarter, half-year, full year). Validates that the selected r...

low shared Bufdir Reporting & Export
Export Confirmation Dialog

Modal dialog that presents a summary of export parameters (organisation, period, format, estimated row count) before the user confirms the e...

low Bufdir Reporting & Export
Export Format Selector

UI control allowing the user to choose between available export formats (Excel, CSV, PDF). Displays format descriptions and compatibility no...

low Bufdir Reporting & Export
Export History List

Displays the audit log of past Bufdir exports for the current organisation, showing who triggered each export, the period covered, format, a...

medium shared Bufdir Reporting & Export
Attachment Picker UI

Multi-source file picker allowing coordinators to select documents or images from the device camera roll or file system. Enforces format con...

medium Document Attachments for Activities
Attachment Preview Modal

Full-screen modal that renders image or PDF content retrieved via a signed URL. Provides a download/share action and a close button, and han...

low Document Attachments for Activities
Attachment Thumbnail Grid

Displays a compact grid of attachment thumbnails within the activity detail view. Renders image previews for JPEG and PNG files and a docume...

low Document Attachments for Activities
Certification Expiry Badge

A reusable badge widget that surfaces certification expiry warnings inline within peer mentor list cards, the peer mentor detail screen, and...

low Peer Mentor Certification Management
Certification Status Screen

Displays the full certification record for a peer mentor, including issue date, expiry date, cert type, and renewal history. Accessible from...

medium Peer Mentor Certification Management
Certifications Expiring This Month Widget

A coordinator dashboard widget that lists peer mentors whose certifications are expiring within the current calendar month. Each entry is ta...

low Peer Mentor Certification Management
Record Renewal Screen

A coordinator-facing screen for manually recording a peer mentor certification renewal after in-person course completion. Captures new issue...

low Peer Mentor Certification Management
Activity Type Donut Chart

Donut chart built with fl_chart showing breakdown of activities by type for the selected coordinator and period. Includes a legend listing e...

medium shared Coordinator Statistics Dashboard
Coordinator Statistics Dashboard Screen

Main dashboard screen for coordinators showing aggregated statistics across their supervised peer mentor roster. Displays total activities, ...

high Coordinator Statistics Dashboard
Monthly Activity Bar Chart

Bar chart built with fl_chart showing activity count per month for the selected period. Supports tap-to-highlight and animated transitions w...

medium shared Coordinator Statistics Dashboard
Peer Mentor Statistics List

Scrollable list of peer mentor roster rows showing each mentor's individual stats (activities, hours, status) within the coordinator dashboa...

medium Coordinator Statistics Dashboard
Personal Peer Mentor Statistics View

Individual statistics view for a single peer mentor showing their own contribution over time. Used both in the coordinator drill-down and as...

medium Coordinator Statistics Dashboard
Statistics Period Filter Bar

Horizontal filter bar allowing selection of time period (this month, last 3 months, this year, custom range) and optionally filtering by act...

low shared Coordinator Statistics Dashboard
Statistics Summary Cards

Row of stat cards displaying key coordinator KPIs: total activities this month and year-to-date, hours of peer mentor support delivered, rei...

low shared Coordinator Statistics Dashboard
Notification Badge Widget

Unread count badge overlaid on the Notifications tab in the bottom navigation bar. Subscribes to a real-time unread count stream and updates...

low shared Push Notification Delivery
Notification Center Screen

Full-screen list of all received notifications sorted by recency, with read/unread visual differentiation and swipe-to-dismiss. Supports Voi...

medium Push Notification Delivery
Notification List Item Widget

Reusable card widget representing a single notification entry with title, body, timestamp, read indicator, and role-context icon. Tapping na...

low Push Notification Delivery
Notification Settings Screen

Per-category opt-in toggle screen allowing users to manage notification fatigue without losing critical alerts. Categories include new assig...

low Push Notification Delivery
Coordinator Escalation Notification Card

In-app notification card shown to coordinators when a peer mentor has not responded to a reminder within the secondary escalation window. Su...

low Assignment Follow-up Reminders
Reminder Notification Card

In-app notification card displayed in the Notifications tab when a peer mentor has not recorded contact within the configured window. Includ...

low Assignment Follow-up Reminders
Reminder Threshold Settings UI

Settings screen section allowing organisation administrators to configure the reminder and escalation day thresholds per organisation. Displ...

low Assignment Follow-up Reminders
Certificate Expiry Notification Banner

Persistent in-app banner displayed in the Notifications tab for peer mentors with an expiring or expired certificate. The banner remains vis...

low Certificate Expiry Notifications
Certificate Expiry Notification Detail View

Full-screen detail view for a certificate expiry notification, available to both the peer mentor and coordinator. Coordinators see an additi...

medium Certificate Expiry Notifications
Certificate Expiry Status Indicator

Reusable widget that visually communicates a peer mentor's certificate status across multiple surfaces such as coordinator contact lists, me...

low shared Certificate Expiry Notifications
Pause Status Notification Card

In-app notification card that displays pause and resume status change events to coordinators. Shows peer mentor name, effective date, option...

low Pause Status Change Notifications
Peer Mentor Confirmation Banner

Inline confirmation banner shown to the peer mentor on both pause activation and deactivation transitions. Confirms the state change was rec...

low Pause Status Change Notifications
Scenario Configuration Screen

Coordinator-facing settings screen that lists available scenario rule templates and allows toggling which scenarios are active for their cha...

medium Scenario-based Follow-up Prompts
Scenario Prompt Detail Bottom Sheet

Modal bottom sheet presented when a peer mentor taps a scenario prompt. Shows full context including the triggering activity summary, the su...

medium Scenario-based Follow-up Prompts
Scenario Prompt Notification Card

Displays an actionable scenario-based prompt in the notifications tab with contextual description and a primary CTA button. Tapping the card...

medium Scenario-based Follow-up Prompts
Notification Centre Screen

Main screen for the Notifications tab (fifth bottom nav item) presenting a chronological, filterable feed of all system notifications for th...

medium In-app Notification Centre
Notification Empty State Widget

Displayed when the filtered or unfiltered notification feed is empty. Shows a contextual illustration and message appropriate to whether the...

low In-app Notification Centre
Notification Filter Bar

Horizontal chip row allowing users to filter the notification feed by type (assignments, certificates, activities, system) and read state (a...

low In-app Notification Centre
Notification List Item

Individual row widget displaying a single notification with its type icon, short summary text, relative timestamp, and read/unread visual in...

low In-app Notification Centre
Notification Tab Badge

Unread count badge overlaid on the Notifications bottom navigation tab icon. Listens to the notification BLoC stream and updates the badge c...

low In-app Notification Centre
Activity Type Breakdown Widget

Visualises the distribution of a peer mentor's activities by type (e.g., home visits, phone calls, group sessions) using animated bar or pie...

medium Annual Impact Summary (Wrapped)
Animated Stat Card Widget

Reusable animated card that reveals a single statistic (e.g., total hours volunteered, number of people helped) with a count-up animation an...

medium shared Annual Impact Summary (Wrapped)
Milestone Badge Widget

Displays a personal milestone achievement (e.g., first session, 100 hours, 50 people helped) as an animated badge with an icon, title, and s...

medium Annual Impact Summary (Wrapped)
Summary Period Selector

Allows the user to toggle between yearly and half-year summary views. Renders as a segmented control or tab bar with accessible labels, and ...

low Annual Impact Summary (Wrapped)
Summary Share Overlay

Bottom sheet or full-screen overlay that presents sharing options: copy to clipboard, save as image, or share via the system share sheet. Tr...

medium Annual Impact Summary (Wrapped)
Wrapped Summary Screen

Full-screen animated presentation that walks the peer mentor through their year in review, slide by slide. Implements Flutter Hero animation...

high Annual Impact Summary (Wrapped)
Badge Card Widget

Individual badge display card showing icon, name label, and earned/locked state. Meets WCAG 2.2 AA contrast requirements with text labels ac...

low Achievement Badges & Status Recognition
Badge Detail Modal

Bottom sheet modal displayed when a user taps a badge, showing full badge description, earning criteria, earned date if applicable, and prog...

low Achievement Badges & Status Recognition
Badge Earned Celebration Overlay

Transient full-screen or banner overlay that celebrates a newly earned badge immediately after the triggering activity is saved. Provides po...

medium Achievement Badges & Status Recognition
Badge Shelf Widget

Displays a horizontal scrollable shelf of earned and locked badges on the peer mentor profile screen. Each badge shows locked/unlocked state...

medium Achievement Badges & Status Recognition
Recognition Tier Banner

Displays named recognition tiers such as 'Coordinator of the Year' and seasonal awards on the peer mentor profile. Shows current tier status...

low Achievement Badges & Status Recognition
Coordinator Team Summary View

Aggregated summary screen visible only to coordinators, listing each peer mentor's period metrics in a scrollable list. Highlights underacti...

medium Periodic Activity Summaries
Period Comparison Widget

Reusable widget that visualises the difference between the current period and the equivalent period in the prior year. Renders a numeric del...

low Periodic Activity Summaries
Periodic Summary Digest Card

In-app card rendered on the home screen during the relevant summary period showing key metrics: sessions held, hours contributed, and year-o...

medium Periodic Activity Summaries
In-App Notification Banner

WCAG 2.2 AA compliant in-app banner component that renders scenario-based notification messages while the user is active in the app. Support...

low shared Scenario-Based Engagement Push Notifications
Notification Preferences Screen

Settings screen allowing peer mentors to configure which scenario-based notification types they wish to receive. Supports per-scenario opt-o...

low Scenario-Based Engagement Push Notifications
Scenario Notification Detail View

Read-only detail screen surfaced when a user taps a scenario notification from the notification centre or a push alert. Shows the scenario c...

low Scenario-Based Engagement Push Notifications
Coordinator Recruitment Dashboard

A section within the coordinator statistics view that shows recruitment performance per peer mentor. Lists referral links issued, click-thro...

medium Membership Recruitment (Verving)
New Member Onboarding Screen

A lightweight in-app screen (or deep-link landing page) that receives the referred new member after they follow the referral link. Captures ...

medium Membership Recruitment (Verving)
Recruitment Stats Widget

A reusable card widget showing the peer mentor's recruitment summary — total invites sent, successful conversions, and pending signups. Embe...

low Membership Recruitment (Verving)
Referral Code Screen

Displays the peer mentor's unique referral QR code and shareable link in a prominent, easy-to-share format. Provides a one-tap action to ope...

medium Membership Recruitment (Verving)
Benefit Calculator Screen

Main interactive screen that guides the peer mentor through the benefit calculation flow. Presents input controls, live-updating results, an...

low Volunteer Benefit Calculator
Benefit Metric Tile

Reusable accessible tile widget rendering a single computed benefit metric with an icon, numeric value, unit label, and optional explanatory...

low Volunteer Benefit Calculator
Benefit Results Card

Visually rich results card consistent with the Wrapped design language that displays the calculated personal benefit (hours saved, travel co...

low Volunteer Benefit Calculator
Calculator Input Panel

Form panel collecting the volunteer activity parameters used as inputs to the calculation — primarily session count and average duration. Us...

low Volunteer Benefit Calculator
Accessible Bottom Navigation

Custom semantics layer over the app's five-tab bottom navigation bar ensuring each tab exposes its label, selected state, and tab index to V...

high Screen Reader Support
Accessible Modal Sheet Widget

Wraps bottom sheets and modal dialogs with correct focus trapping, initial focus placement, and focus restoration on close. Announces the sh...

high shared Screen Reader Support
Activity Wizard Step Semantics

Provides custom semantics for each step of the multi-step activity registration wizard, announcing the current step number and total, the st...

medium Screen Reader Support
Live Region Announcer

Provides live-region announcements for asynchronous state changes such as loading completions, form submission results, error messages, and ...

medium shared Screen Reader Support
Semantics Wrapper Widget

A reusable Flutter widget that wraps interactive elements with Flutter Semantics properties, providing labels, roles, hints, and state annou...

medium shared Screen Reader Support
Sensitive Field Warning Dialog

An OS-level alert dialog that fires before a screen reader vocalises a field flagged as containing sensitive personal data (e.g., name, addr...

high shared Screen Reader Support
Confirm Before Submit Screen

A reusable summary screen inserted as the final step of every activity or report wizard. Lists all entered values in a readable table so the...

medium shared Cognitive Accessibility
Inline Contextual Help Widget

Provides field-level and screen-level help text inline within the UI, replacing separate help sections. Help is revealed by tapping a labell...

low shared Cognitive Accessibility
Labelled Navigation Bar

Flutter NavigationBar implementation that enforces labelled icons — no icon-only buttons. All tabs display both icon and text label at all t...

low shared Cognitive Accessibility
Plain Language Error Display

Renders form and server errors in plain Norwegian using a two-part structure: what went wrong and how to fix it. Never shows raw error codes...

low shared Cognitive Accessibility
Single-Action Screen Layout

A composable screen wrapper that enforces the cognitive accessibility rule of at most three primary choices per screen. Provides consistent ...

medium shared Cognitive Accessibility
Wizard Progress Indicator

Displays current step position and total step count in all multi-step wizards. Enforces the maximum of 5 steps and provides clear visual fee...

low shared Cognitive Accessibility
Accessible Text Style System

Provides a Flutter TextTheme derived entirely from design tokens, ensuring all body copy uses FontWeight.w400 or heavier and that no italic ...

medium shared Visual Design Accessibility
Accessible Touch Target Wrapper

A Flutter widget wrapper that enforces a minimum 44×44 pt tappable area for all interactive controls. Wraps GestureDetector or InkWell with ...

low shared Visual Design Accessibility
Contrast-Safe Color Palette Widget

A Flutter ThemeData color scheme built exclusively from contrast-verified token pairs. Exposes foreground/background pairs guaranteed to mee...

medium shared Visual Design Accessibility
Interactive Control Spacing System

Enforces token-defined minimum spacing between adjacent interactive controls to prevent mis-taps in dense form layouts. Provides a layout wi...

low Visual Design Accessibility
Accessible Bottom Navigation Bar

A persistent five-tab bottom navigation bar built on StatefulShellRoute that preserves tab state across navigation events. Relies exclusivel...

medium shared Navigation & Gesture Accessibility
Modal Close Button

A clearly labelled close IconButton injected into every ModalBottomSheet, AlertDialog, and full-screen overlay. Ensures users can dismiss mo...

low shared Navigation & Gesture Accessibility
Persistent Back Button

A back control that appears on every screen that is not a root tab destination, providing an explicit tap-based way to navigate up the stack...

low shared Navigation & Gesture Accessibility
Vertical Scroll Container

A scroll view wrapper that enforces vertical-only scrolling throughout the application, preventing horizontal carousels and swipe-to-navigat...

low shared Navigation & Gesture Accessibility
Dictation Microphone Button

A microphone icon button rendered inline within free-text report fields to trigger dictation. Only appears on fields explicitly designated f...

low Speech-to-Text Input
Recording State Indicator

A prominent in-field overlay or banner that displays the current dictation state (idle, recording, processing, error) using both visual and ...

low Speech-to-Text Input
Transcription Preview Field

An augmented free-text input field that displays live partial transcription results as the user dictates, allowing them to monitor accuracy ...

medium Speech-to-Text Input
Multi-Organization Context Switcher

Dedicated UI component presented to users who hold roles in more than one partner organization. Allows clean switching between tenant contex...

medium Organization Selection & Onboarding
Onboarding Progress Indicator

Visual step indicator widget shown during the onboarding flow to communicate to the user which stage they are on (organization selection → a...

low Organization Selection & Onboarding
Organization Card Widget

Reusable card widget that displays a single partner organization with its logo, display name, and a brief descriptor. Renders the organizati...

low shared Organization Selection & Onboarding
Organization Selection Screen

Full-screen onboarding view presented at first launch and whenever no organization context exists. Displays the list of partner organization...

medium Organization Selection & Onboarding
Terminology Admin Preview Screen

An administrative UI screen that displays the full terminology map for the selected organization, allowing admins to inspect current label k...

low Dynamic Terminology & Labels System
Terminology-Aware Text Widget

A drop-in replacement for Flutter Text widgets that automatically resolves label keys through the active organization's terminology map. Acc...

low shared Dynamic Terminology & Labels System
Feature Flag Admin Screen

An administrative screen accessible to organization admins that displays all available feature flags for the current organization and their ...

medium Organization-scoped Feature Flags
FeatureGate Widget

A conditional rendering wrapper widget that gates any child widget behind a single boolean feature flag check. Accepts a flag key and option...

low shared Organization-scoped Feature Flags
Chapter Switcher

Slack-style workspace-switching bottom sheet that appears for users (typically NHF peer mentors) who belong to multiple local chapters simul...

medium shared Organizational Hierarchy & Structure Management
Hierarchy Admin Portal Screen

Top-level screen in the organization admin portal dedicated to hierarchy management. Combines the tree view with action buttons to add child...

high Organizational Hierarchy & Structure Management
Hierarchy Node Editor Screen

Full-screen form for creating and editing a single organization unit node. Allows setting the node name, level type, and parent assignment v...

medium Organizational Hierarchy & Structure Management
Hierarchy Tree View

Flutter widget that renders the full organizational hierarchy as a collapsible, scrollable tree. Displays national associations, regions, an...

high Organizational Hierarchy & Structure Management
Unit Assignment Panel

Admin UI panel embedded within a user's profile or a hierarchy node detail page that shows current unit assignments for that user and allows...

medium Organizational Hierarchy & Structure Management
Credential Management Form

Secure form component for entering and updating API credentials (API keys, client secrets, OAuth tokens) for external integrations. Masks se...

medium External System Integration Configuration
Excluded Features Configuration Panel

Admin panel allowing HLF administrators to mark which application features should be suppressed to avoid overlap with HLF's Dynamics-based '...

medium External System Integration Configuration
Field Mapping Editor

Visual editor component allowing administrators to map internal application fields to external system fields for each integration type. Supp...

high External System Integration Configuration
Integration Configuration Dashboard

Admin portal screen listing all configured external integrations for the current organization, showing integration type, connection status, ...

medium External System Integration Configuration
Integration Setup Wizard

Multi-step wizard in the admin portal that guides administrators through configuring a new external integration. Covers integration type sel...

high External System Integration Configuration
Sync Schedule Configuration

UI component for configuring automated sync schedules between the application and external systems. Supports selection of frequency (daily, ...

low External System Integration Configuration