User Interface

Multi-step onboarding wizard shown to new users after their first successful authentication. Guides users through role confirmation, organiz...

Full-screen UI presented on first app launch that lists all available organizations (NHF, Blindeforbundet, HLF, Barnekreftforeningen, etc.) ...

Stateless Flutter widget driven by a BLoC that manages the email and password login form. Handles form validation, loading states, and error...

Full-screen UI that initiates the BankID OIDC authentication flow by launching an in-app browser session. Displays the BankID provider optio...

Full-screen UI that initiates the Vipps Login OAuth flow via an in-app browser. Communicates to the user that Vipps login may return their n...

The entry screen shown on app launch for returning authenticated users. Displays a biometric prompt (Face ID or fingerprint) and handles the...

A dedicated screen displayed to authenticated users whose role does not have mobile app access, specifically Global Administrators who are r...

Bottom sheet or modal action menu that appears when a peer mentor taps the central Add tab in the bottom navigation bar. Presents quick-acti...

Full-screen selector presenting available activity types loaded from the REST API and cached locally via SQLite for offline availability. Re...

WCAG 2.2 AA compliant reusable picker widget providing 44×44px touch targets, keyboard-accessible numeric inputs, and screen reader semantic...

Root Flutter PageView-based wizard container that manages step rendering, back-button navigation, and overall wizard lifecycle. Accepts a pr...

First wizard step allowing the peer mentor to search for and select one or more contacts associated with the activity. Reads from the local ...

Second wizard step presenting WCAG 2.2 AA compliant custom date and time pickers with 44×44px touch targets and fully keyboard-accessible nu...

Third wizard step for specifying activity duration using predefined quick-select options (e.g., 30 min, 1 hr, 2 hr) alongside a custom numer...

Final wizard step presenting a structured review of all entered data — contacts, date, time, duration, and activity type — before submission...

Multi-step wizard screen for creating group events, guiding coordinators and peer mentors through title, date/time, duration, location, and ...

Reusable Flutter widget that wraps any TextField with a microphone button, enabling peer mentors to dictate text instead of typing. Displays...

Primary screen enabling coordinators to register activities on behalf of one or more peer mentors in a single workflow. Integrates PeerMento...

Screen that allows a coordinator to browse and select one or more peer mentors from their local association for proxy activity registration....

Persistent UI widget displayed at the top of the activity wizard when operating in proxy mode. Shows the coordinator's name as the submitter...

A Flutter widget that wraps image_picker and file_picker plugins to allow users to select images and PDF files from their device. Provides i...

A conditional wizard step injected by WizardStateManager when the selected activity type is a home visit category. Renders the structured po...

Compact list-item card displaying a contact's name, role context, and last interaction summary. Meets WCAG 2.2 AA minimum 44×44 dp touch tar...

Reusable search input widget that triggers real-time filtering across contacts and notes content. Implements debounce logic to avoid excessi...

Primary screen displaying all contacts associated with the current user's role context. Coordinators see their full peer mentor roster while...

Segmented control widget allowing users to toggle the contacts list between 'Contacts' and 'Peer Mentors' modes. Persists the last selected ...

Full-profile screen for a single contact, organized into sectioned cards covering personal info, recent activities, notes preview, and careg...

Reusable form widget for contact data entry and editing, built entirely with AppTextField widgets from the design system for consistent styl...

Screen wrapping the Contact Form Widget in edit mode, handling optimistic updates and sync coordination. Edit access is gated by role — peer...

Reusable card component that renders a peer mentor's summary information in list contexts. Extends the base card layout from the design syst...

Full-screen profile view for a single peer mentor, displaying certification status, activity history, assignment count, pause status, and or...

Segmented control (tab bar) widget that allows coordinators to toggle between the contacts list and the peer mentor roster within the same n...

Displays full details of a single caregiver or next-of-kin record including relationship type, full name, phone, email, and notification con...

Displays all caregivers and next-of-kin associated with a specific contact, embedded as a section within the Contact Detail Screen. Shows re...

A colored status banner injected at the top of the Peer Mentor Detail Screen that visually communicates the mentor's current availability st...

A dedicated full-screen flow that guides the peer mentor or coordinator through activating or lifting a pause. Uses AppButton and AppTextFie...

Compact card widget that renders a single note entry in the Notes List Screen. Displays the note's creation timestamp, a truncated preview o...

Full-screen editor for creating and editing freeform text notes linked to a contact. Uses a Flutter multiline TextField with optional speech...

Displays all notes for a given contact in reverse chronological order as a scrollable feed of NoteCardWidgets. Rendered as an embedded secti...

Accessible toggle button that switches the coordinator between the interactive map view and a plain list view of peer mentors sorted by dist...

Primary screen rendering an interactive map with clustered peer mentor pins within the coordinator's coverage area. Supports tap-to-expand c...

Modal bottom sheet presented when a coordinator taps a mentor pin on the map. Embeds the shared PeerMentorCardWidget and exposes a 'View Pro...

Custom Flutter map marker widget representing an individual peer mentor on the map canvas. Displays a styled pin with optional availability ...

A reusable card widget that displays a single aggregated metric — such as total hours, total contacts, or activity count — with an icon, lab...

A horizontal scrollable chip list that lets the user filter statistics by a specific activity type (e.g., home visit, phone call, event). Se...

A segmented control and optional date-picker widget allowing users to switch between preset periods (this week, this month, this year, custo...

The main statistics screen for peer mentors and coordinators showing aggregated personal activity data. Displays total hours, activity count...

A compact list row widget displaying a single peer mentor's aggregated statistics within the team report screen. Shows name, activity count,...

Reusable Flutter widget providing reactive filter controls for the team report, including date range picker, activity type selector, and ind...

Full-page Flutter screen restricted to Coordinator and above roles that displays aggregated activity data across all peer mentors in the coo...

An in-app preview screen that renders the structured Bufdir report data before export, allowing coordinators to review aggregated figures an...

The primary screen for coordinators and administrators to configure and trigger Bufdir report generation. Allows selection of organization, ...

A prominent, accessible action widget that triggers immediate Bufdir report generation and export with a single tap. Supports multiple expor...

A date range picker widget specialized for Bufdir reporting periods, offering preset options (quarterly, annually, custom) that align with B...

Non-blocking inline warning widget displayed on the summary step of the activity wizard when a potential duplicate is detected. Presents a c...

Primary screen for registering travel reimbursements and out-of-pocket expenses. Presents a streamlined form driven by Riverpod-managed stat...

Fixed-choice selector widget for expense category (mileage, toll, parking, public transport). Enforces mutual-exclusion rules at the UI leve...

Dedicated numeric input widget for registering kilometer-based travel reimbursement. Only rendered when the mileage expense type is selected...

Amount input widget for toll and parking expenses, rendered conditionally based on the selected expense type. Supports currency formatting, ...

Full-screen camera and photo library picker interface for capturing receipt images. Displays a live camera preview with accessible capture c...

Inline widget embedded in both the queue list and the claim detail screen that presents approve, reject, and request-clarification actions f...

Full-detail view of a single reimbursement claim shown to coordinators during the manual review process. Displays all submitted expense line...

Displays the list of reimbursement claims pending manual review for coordinators and organization administrators. Supports filtering by stat...

Compact badge widget that renders the current approval status of a reimbursement claim with color coding and localized label. Used inline in...

Allows coordinators to compose and dispatch a new encrypted assignment to a selected peer mentor. Provides fields for sensitive data entry (...

Displays the full decrypted content of a single assignment including sensitive personal details (name, address, medical summary excerpts). R...

Displays the coordinator's list of dispatched assignments and the peer mentor's list of received assignments. Shows assignment status indica...

Renders a mandatory in-app acknowledgement action that the peer mentor must explicitly complete before the coordinator is notified of read s...

Displays the peer mentor's current assignment count and visual progress toward the next honorarium threshold tier. Renders a progress indica...

An inline coordinator-facing banner that surfaces when a peer mentor has crossed an honorarium threshold. Presents the peer mentor name, the...

A reusable badge widget displayed on the Notifications tab in the bottom navigation bar showing the count of unread notifications. The badge...

A paginated list screen displaying the user's notification history, including unread indicators and notification content. Users can review a...

A dedicated settings screen allowing users to manage their reminder preferences per scenario type. Users can opt out of non-critical reminde...

Settings screen where users configure calendar synchronization preferences. Allows users to enable or disable calendar sync, authenticate th...

Persistent Material 3 NavigationBar shell widget wrapping all five tab destinations (Home, Contacts, Add, Work, Notifications) for all authe...

Role-specific home screen for Coordinator users, providing immediate visibility into team status, pending reimbursement approvals, and bulk ...

Role-specific home screen for Organization Administrator users, displaying organization-level KPIs, recent activity across the association, ...

Role-specific home screen for Peer Mentor users, surfacing quick-access shortcuts to activity registration, recent activity history, and per...

Reusable widget that renders individual settings items as tappable card rows with a leading icon, label, optional subtitle, and trailing che...

Main settings screen accessible via the hamburger menu, presenting categorized configuration options as a scrollable list of tappable menu c...

Main screen displaying the curated list of external resources configured for the user's organization. Renders resource entries as tappable c...

Reusable search bar and category filter chip row widget used within the Talking Cards Screen. Executes client-side filtering over the locall...

Full-screen card reading widget that displays the complete content of a single talking card or resource sheet. Supports dynamic text scaling...

Main browsable screen displaying the organization's library of talking cards and toolbox resources. Renders a scrollable grid or list of car...

A confirmation dialog presented before deactivating a user account, summarizing any active assignments or open activities that will be affec...

A modal or inline form used by Organization Administrators and Global Administrators to invite new users by email address, assigning them a ...

The primary admin screen for viewing and managing all users within an organization. Displays a paginated, searchable list of users with thei...

An inline widget embedded within the user management screen and invite form that displays and edits a user's role-organization mapping. Supp...

Admin panel screen for managing top-level organization settings including contact details, logo upload, and feature toggle flags. Provides a...

Admin panel screen that allows organization administrators to view and edit all string label keys used throughout the mobile app and admin p...

The primary dashboard view for Organization Administrators and Coordinators in the Next.js admin panel. Renders a role-scoped overview of KP...

UI control allowing admins and coordinators to select a date range for dashboard KPI filtering. Provides preset options (last 30 days, last ...

Componentized, reusable metric cards displayed on the admin dashboard. Each widget renders a single KPI value (e.g., total registered activi...

Renders time-series engagement trend charts using Recharts or Chart.js within the admin panel. Displays activity registrations, active peer ...

Composable filter panel used on the oversight screen to build query parameters for the admin activities API endpoint. Supports date range pi...

Admin panel screen listing all submitted activities with filtering controls for date range, peer mentor, activity type, and approval status....

Detailed activity review screen for coordinators and organization administrators to inspect a single submitted activity record, add coordina...

Inline badge component that surfaces duplicate activity detection results as visual warnings on activity list items and detail views. Displa...

The primary admin panel screen for generating and exporting Bufdir-compliant reports. Allows Organization and Global Administrators to selec...

Overlay modal that displays receipt images fetched via signed URLs from object storage, preventing unauthorized direct access to receipt fil...

Composable filter panel rendered above the reimbursement list, enabling administrators to narrow results by peer mentor, expense type, appro...

Centralized admin screen for coordinators and organization administrators to review all reimbursement requests within their organizational s...

An inline widget that presents the user's list of affiliated local associations and allows them to select or switch the active association c...

A compact, persistent UI element displayed in the app header or settings that shows the currently active association and allows quick switch...

Admin panel screen for configuring external system integrations per organization. Allows organization administrators to manage API keys, end...

Provides coordinators with a real-time view of course enrollment across their local association. Displays participant lists per course, show...

Presents full course details and enables users to enroll in or withdraw from a course. Shows session dates, location, capacity remaining, pr...

Displays available training courses in a scrollable list with filtering and search capabilities. Shows course title, date, location, capacit...

Coordinator-facing screen in the admin panel that allows manual issuance, renewal, and revocation of peer mentor certificates. Lists all cer...

Full-screen presentation of the peer mentor's digital certificate, styled as a prestige card using the design token system. Displays the men...

Reusable card-style widget that renders a compact or full representation of a peer mentor certificate. Uses the design token system for cons...

Main screen for coordinators managing mentor program sessions and career workshops. Displays a list of workshop sessions with status indicat...

Reusable widget that displays and manages the participant roster for a workshop session. Allows coordinators to add participants from existi...

Rich text editor scoped to a specific workshop session, allowing coordinators to capture structured session notes, to-do items, and follow-u...

Detail view for a single workshop session aggregating notes, participant list, and to-do status. Provides coordinators with a unified view o...

Form screen for creating and editing a mentor program workshop session. Captures session metadata including title, dates, location, number o...

The primary screen enabling peer mentors to act as membership ambassadors. Displays a shareable referral link or code unique to the peer men...

Full-screen animated presentation that showcases the peer mentor's yearly contributions in a Spotify Wrapped-style story format. Displays sl...

Reusable animated widget that renders individual impact metric slides within the annual summary presentation. Handles animated counters, pro...

Widget that provides share and export controls at the end of the annual summary experience. Allows the peer mentor to share their wrapped su...

Reusable widget that renders a single badge tile with its SVG or PNG asset, title, and status indicator. Handles locked state (greyscale ove...

Full-screen page displaying all badges available in the system, grouped by category (earned, in-progress, locked). Each badge shows its icon...

Admin panel screen allowing coordinators and organization administrators to grant nomination-based badges such as Coordinator of the Year to...

Main interactive screen that presents the peer mentor advantage calculator. Displays a visual breakdown of personal benefits earned through ...

Reusable Flutter widget that renders a visual chart of individual benefit categories using the fl_chart package. Supports bar charts and pie...

Provides share and export actions for the advantage calculator result. Supports generating a static image snapshot or a PDF summary that the...

Accessible, reusable button widget used throughout the Flutter app. Enforces minimum 24x24 logical pixel touch targets per WCAG 2.2, require...

Accessible text input widget enforcing WCAG 2.2 AA requirements for form fields across the entire app. Requires an explicit accessibility la...

Widget utilities managing modal presentation, dismissal, and focus trapping to meet WCAG 2.2 focus management requirements. Traps keyboard f...

Standardized page header widget providing consistent visual hierarchy, back navigation, and screen reader announcement across all screens. A...

A persistent UI widget that communicates the current synchronization state to the user. Displays pending queue count, last sync timestamp, a...

Service Layer components contain business logic, orchestrate operations, and provide core application functionality.

Data Layer components manage data persistence, storage operations, and data access patterns throughout the application.

Infrastructure components provide foundational utilities, system integrations, and supporting functionality for the application.