139
Total User Interface
62
Low Complexity
66
Medium Complexity
11
High Complexity
4
Shared

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

Login Screen

The primary authentication entry point for the Meander mobile app. Presents email and password fields, a submit button, and navigates to the...

low Email & Password Login
BankID Screen

Flutter screen that initiates the BankID OAuth/OIDC authentication flow via a secure in-app browser. Presents the BankID option clearly alon...

high BankID Authentication
Vipps Screen

The mobile screen that initiates and manages the Vipps login flow. Renders the Vipps login button, launches the Vipps app or browser fallbac...

medium Vipps Authentication
Biometric Auth Widget

Full-screen biometric prompt overlay that triggers Face ID or fingerprint authentication via Flutter's local_auth package. Displays contextu...

medium Biometric Login (Face ID / Fingerprint)
Role Guard Widget

Flutter widget that conditionally renders UI elements and navigation items based on the current user's decoded JWT role claims. Enforces cli...

medium Role-Based Access Control
Avatar Upload Widget

Reusable widget for selecting and uploading a profile photo from camera or device gallery. Handles image source selection, crops to avatar d...

low Profile Data & Settings
Profile Screen

Main profile view and edit screen for peer mentors and coordinators. Displays user identity, role assignments, local association, and organi...

medium Profile Data & Settings
Role Switch Widget

A UI widget accessible from the hamburger menu and profile screen that lists all roles and org/association combinations available to the aut...

medium Profile Switching
Share Profile Screen

Mobile screen that displays the peer mentor's shareable profile summary and triggers the OS-level share sheet. Shows display name, role titl...

low Share Profile
Passkey Management Screen

Displays all registered passkeys for the authenticated user and allows revocation of individual passkeys. Accessible from profile settings a...

medium Authentication Methods (Passkeys)
Passkey Setup Screen

Guides the user through registering a new passkey on their device. Handles device capability detection, prompts the platform authenticator (...

high Authentication Methods (Passkeys)
Quick Log Screen

Single-screen form for recording a completed peer mentor interaction with minimal input. Presents pre-filled defaults (today's date, 30-minu...

medium Simple Activity Logging
Activity Wizard Screen

Multi-step wizard container managing the full activity registration flow using Flutter Navigator 2.0. Hosts the step page stack, renders the...

high Activity Registration Wizard
Wizard Progress Indicator

Accessible step progress bar widget rendered at the top of the wizard screen. Shows current step index vs total steps with ARIA progress rol...

low Activity Registration Wizard
Wizard Step - Activity Type

Step 3 of the wizard. Renders a list of available activity types fetched from the Activity Repository. Supports organisation-specific termin...

low Activity Registration Wizard
Wizard Step - Contact Selection

Step 1 of the wizard. Renders a searchable contact picker backed by the Contact Repository. Emits a validation event before allowing forward...

medium Activity Registration Wizard
Wizard Step - Date / Time / Duration

Step 2 of the wizard. Provides date picker, start-time picker, and duration selector (or end-time with cross-field validation enforced by Ac...

medium Activity Registration Wizard
Wizard Step - Summary & Notes

Step 4 (final) of the wizard. Renders an optional free-text summary/notes field. Displays a full review of the data entered across all prior...

medium Activity Registration Wizard
Calendar Event Suggestion Widget

Renders a dismissible list of upcoming calendar events matched to known contacts, surfaced inside the Activity Registration Wizard as pre-fi...

low Calendar Sync
Calendar Permission Widget

Handles the full permission request lifecycle for calendar access on iOS and Android. Presents a contextual rationale dialog explaining exac...

medium Calendar Sync
Calendar Sync Settings Widget

Settings screen section that shows the current calendar permission state and lets the user revoke or re-grant permission from within the app...

low Calendar Sync
Speech Input Widget

Microphone icon button that overlays on any compatible text field (activity summary, notes) to trigger dictation mode. Displays a real-time ...

medium Speech-to-Text Input
Peer Mentor Selector Widget

Reusable mobile widget that loads and displays peer mentors scoped to the coordinator's local association. Supports name search and single s...

low shared Coordinator Proxy Reporting
Proxy Registration Screen

Main screen allowing coordinators to register activities on behalf of a selected peer mentor. Displays a persistent proxy-context banner thr...

medium Coordinator Proxy Reporting
Bulk Registration Screen

Primary screen for coordinators to perform bulk activity registration. Presents an activity template form followed by a multi-select partici...

high Bulk Registration
Participant Multi-Select Widget

Reusable Flutter widget providing a searchable, filterable multi-select list of peer mentors and contacts within the coordinator's local ass...

medium Bulk Registration
Event Creation Wizard

Multi-step Flutter screen guiding users through event creation: title, date, time, duration, location, and summary. Managed by BLoC with inl...

medium Event Creation
Event Card Widget

Reusable Flutter card widget presenting a single event summary including title, date, time, location, and a participant count badge. Impleme...

low Event Listing
Event Filter Bar

Compact filter widget embedded in the Event List Screen toolbar that allows users to narrow the event list by date range or status (upcoming...

low Event Listing
Event List Screen

BLoC-driven Flutter screen presenting a paginated, scrollable list of upcoming and past events within the user's organization. Displays even...

low Event Listing
Event Sign-up Screen

Displays full event details and a confirmation action for the user to register themselves or a contact. Handles the sign-up flow including a...

medium Event Sign-up
Expense Registration Screen

Flutter screen for logging reimbursable travel costs including kilometre allowances, toll fees, parking, and public transport. Presents fixe...

medium Travel Expense Registration
Receipt Camera Widget

Flutter widget that invokes the device camera or photo library via image_picker. Displays a capture button with descriptive WCAG-compliant l...

medium Receipt Photo Upload
Receipt Thumbnail Strip

Horizontal scrollable strip that renders compressed preview thumbnails of attached receipts within the expense registration form. Supports t...

low Receipt Photo Upload
Expense Type Selector

Flutter screen component that displays the organisation-scoped catalogue of reimbursable expense types as a reactive selection list. Enforce...

medium Expense Types & Requirements
Declaration Screen

Full-screen declaration view that fetches the organisation's declaration template and renders the legally binding text. The accept button is...

low Confidentiality Declarations
Contact Filter Widget

Filter chip row allowing users to narrow the contact list by status (active, inactive) or relationship type. Rendered as horizontally scroll...

low Contact List & Search
Contact List Screen

Primary screen displaying the user's assigned contacts in a scrollable, accessible list. Uses Flutter ListView.builder for efficient renderi...

medium Contact List & Search
Contact Search Bar Widget

Persistent search bar widget embedded in the contact list screen. Implements debounced input handling to trigger either client-side filterin...

low Contact List & Search
Contact Detail Screen

Full-profile screen for a single contact displaying personal information, activity history, assigned peer mentor, and follow-up status. Enfo...

medium Contact Detail & Edit
Contact Edit Screen

Edit form screen allowing authorised users to update mutable contact fields such as phone number, address, and situational notes. Reuses App...

medium Contact Detail & Edit
Caregiver Detail Screen

Expandable card section rendered within the contact detail screen that lists all caregiver and next-of-kin records for a contact. Displays e...

low Caregiver & Next-of-Kin
Caregiver Edit Bottom Sheet

Modal bottom sheet for creating and updating caregiver records. Presents fields for caregiver name, relationship type via a predefined dropd...

low Caregiver & Next-of-Kin
Notes List Screen

Flutter screen displaying a paginated, searchable list of notes associated with the authenticated user's contacts and activities. Renders no...

low Notes List
Notes Search & Filter Bar

Reusable Flutter widget providing an accessible search text field and sort controls for the notes list. Debounces search input to minimise A...

low Notes List
Note Editor Screen

Full-screen Flutter editor for creating and editing free-text notes linked to a contact and optional activity. Renders a multi-line TextFiel...

medium Note Editor
Activity Breakdown Chart

A chart widget using fl_chart to visualise activity distribution by type and time. Includes off-screen semantic list rendering for VoiceOver...

medium Personal Activity Statistics
Personal Stats Screen

The main statistics dashboard screen for peer mentors, displaying aggregated activity data with charts and filters. Renders activity counts ...

medium Personal Activity Statistics
Stats Date Range Picker

A reusable date range selection widget used within the statistics screen to filter data by custom time periods (week, month, quarter, year, ...

low Personal Activity Statistics
Team Report Screen

Main mobile screen giving coordinators a sortable, filterable summary of team activity across all peer mentors in their local association. D...

medium Coordinator Team Reports
Bufdir Report Screen

Mobile screen enabling coordinators and org admins to initiate Bufdir report generation, preview aggregated data per reporting period, and t...

medium Bufdir Report Generation
Reporting Period Selector Widget

Reusable dropdown/picker widget for selecting the active reporting period scoped to the user's organization. Supports both mobile and admin ...

low Bufdir Report Generation
Export Action Widget

A single-button widget in the Flutter mobile app that triggers the Bufdir report export. Displays a loading indicator during asynchronous fi...

low Bufdir Export
Assignment Detail Screen

Renders the fully decrypted assignment content - name, address, and medical summary - after the Encryption Service decrypts the payload on-d...

high Encrypted Assignment Dispatch
Assignment Inbox Screen

Displays all assignments dispatched to the peer mentor, showing status indicators for each: unread, read, and contact established. Supports ...

medium Encrypted Assignment Dispatch
Assignment Counter Widget

Flutter BLoC widget displayed on the peer mentor home screen showing current completed assignment count, the next threshold value, and the d...

low Assignment Threshold Tracking
Coordinator Threshold Overview Widget

Read-only widget embedded in coordinator oversight screens listing peer mentors with their completed assignment counts and current honorariu...

low Assignment Threshold Tracking
Notification Inbox Screen

Displays the in-app notification inbox listing all received push notifications for the user. Provides an accessible fallback for users who m...

medium Push Notifications
Notification Settings Screen

Flutter settings page presenting toggles per notification category (new assignments, activity reminders, event updates, coordinator messages...

low Notification Settings
Share Invite Screen

Full-screen mobile UI that displays the generated QR code and invite link for the current user. Provides action buttons for sharing via nati...

medium Invite Link & QR Sharing
Referral Dashboard Widget

Inline dashboard widget displayed on the home screen or within the referral section, showing key recruitment metrics for the current user. S...

medium Recruitment Tracking
Referral List Screen

Full-screen view listing all referrals for the current user with status badges (invited, registered, active) and last-updated timestamps. Su...

medium Recruitment Tracking
Course Detail Screen

Presents full course details including description, schedule, prerequisites, capacity, and waitlist position. Provides primary enroll and un...

medium Course Registration
Course List Screen

Displays available training courses for the authenticated user's organization, with filtering by status (open, waitlisted, completed) and ca...

medium Course Registration
My Courses Screen

Shows the authenticated user's personal enrollment history including active enrollments, waitlist positions, and completed courses. Entry po...

low Course Registration
Certificate Screen

Dedicated Flutter screen displaying the peer mentor's verified digital certificate, including their name, issuing organization branding, val...

medium Digital Peer Mentor Certificate
Workshop Screen

Primary Flutter screen for facilitating structured two-day group mentoring sessions. Displays participant list, session notes, and to-do che...

medium Career Workshops
Workshop To-Do Widget

Reusable Flutter checklist widget for managing facilitator to-do items during a workshop session. Renders checkbox list with add/remove cont...

low Career Workshops
Annual Summary Screen

Full-screen animated presentation that renders the peer mentor's yearly review as swipeable slides in a Spotify Wrapped-style format. Each s...

high Annual Summary (Wrapped)
Badges Screen

Flutter screen displaying the peer mentor's earned and locked achievement badges. Earned badges are shown in full color with unlock date; lo...

medium Achievement Badges
Calculator Screen

Self-contained Flutter screen that lets peer mentors and coordinators input activity hours, activity types, and geographic region to compute...

medium Advantage Calculator
Talking Cards Screen

Displays the curated collection of conversation-starter cards organized by topic or theme. Renders cards as scrollable, accessible Flutter w...

low Talking Cards Toolbox
Accessible Widget Library

A suite of custom Flutter widgets (AppButton, AppTextField, AppCard, AppSlider, etc.) with accessibility built in at the component level. Ev...

high shared WCAG 2.2 AA Compliance
Readout Warning Widget

Flutter widget that renders a dismissible warning banner or dialog when a screen reader is active and focus moves to a sensitive field. The ...

medium Sensitive Field Readout Warning
Sensitive Field Wrapper Widget

Composable Flutter widget that wraps any field or text node marked as containing sensitive personal information. It detects screen reader ac...

medium Sensitive Field Readout Warning
Language Selector Widget

In-app UI control that allows users to select their preferred display language (Norwegian, English, or Northern Sami). Renders as a modal or...

low Sami Language Support
Bottom Navigation Bar

Persistent bottom navigation shell with five tabs (Home, Contacts, Add, Work, Notifications) rendered consistently across Peer Mentor and Co...

low shared Role-Specific Home Dashboard
Coordinator Home Screen

Role-specific home screen for Coordinators surfacing team overviews, pending expense approvals, and encrypted assignment queues. Consolidate...

medium Role-Specific Home Dashboard
Dashboard Skeleton Loader

Animated shimmer skeleton placeholder widgets displayed during dashboard data fetch to provide visual feedback and prevent cumulative layout...

low Role-Specific Home Dashboard
Peer Mentor Home Screen

Role-specific home screen for Peer Mentors displaying recent activities, upcoming contacts, and personal statistics. Implements skeleton loa...

medium Role-Specific Home Dashboard
Settings Screen

Centralized settings screen accessible from the hamburger menu overlay. Displays a flat, scannable list of user-scoped preference controls i...

low App Settings & Preferences
Resources Screen

Stateless Flutter screen displaying a scannable list of external resource links fetched from the backend. Each item renders as a tappable li...

low External Resource Links
Contact Us Screen

Flutter screen providing a structured support request form with a dropdown for inquiry category (technical issue, account help, feedback) an...

low Contact Us
Privacy Policy Screen

Scrollable full-screen view that renders the platform's privacy policy text with accessible typography. Displays a version label and last-up...

low Privacy Policy
Accessibility Statement Screen

A dedicated in-app screen that renders the platform's formal accessibility statement, covering WCAG 2.2 Level AA conformance status, known l...

low Accessibility Statement
FAQ Screen

Searchable frequently asked questions screen with category grouping and inline expansion. Uses Flutter ExpansionTile widgets for each Q&A pa...

low FAQ
Offline Status Indicator

A persistent widget displayed in the app shell that communicates current connectivity state to the user. Shows distinct visual states for on...

low Offline Data Support
Sync Status Indicator

A compact widget displayed in the app shell that communicates the current synchronisation state to the user: idle, syncing, pending items, o...

low Background Sync
KPI Dashboard Page

Main admin dashboard page displaying real-time KPI cards for active peer mentors, activity counts, pending approvals, and Bufdir reporting s...

medium Dashboard KPIs
KPI Stat Card Widget

Reusable stat card component displaying a single KPI metric with value, label, trend arrow, and optional link to the detailed page. Consiste...

low shared Dashboard KPIs
Activity Feed Widget

Paginated, filterable chronological stream of recent organization events rendered as typed feed cards in the admin portal. Supports filter c...

medium Activity Feed
User Detail Page

Server-rendered Next.js page exposing full profile information, role assignments, activity history summaries, and account status for a singl...

high User CRUD
User Invite Modal

Modal dialog for inviting new peer mentors or coordinators by email. Captures initial role, local association context, and sends a tokenized...

medium User CRUD
User List Page

Server-rendered Next.js page presenting a searchable, filterable, paginated table of all users within the administrator's organization scope...

medium User CRUD
Role Assignment Widget

Embedded widget rendered within the User Detail Page and accessible as a standalone workflow from bulk actions. Presents a controlled select...

medium Role Assignment
Bulk Action Toolbar

Contextual toolbar that appears above the user list when one or more users are selected via checkboxes. Provides action selector dropdown (b...

medium Bulk Actions
Result Summary Panel

Dismissible inline panel rendered after a bulk operation completes, displaying a breakdown of success count, skipped count (tenancy validati...

low Bulk Actions
Activity Review Page

Main admin portal page for coordinators and org admins to inspect, filter, and act on submitted activity registrations. Displays a paginated...

medium Activity Review & Approval
Activity Status Badge

Reusable badge component that renders approval status (pending, approved, rejected) with colour-coded styling for use in the admin review ta...

low Activity Review & Approval
Flag Action Widget

Inline action widget rendered within activity list rows and detail views in the admin portal, providing coordinators and admins with a one-c...

low Activity Flagging
Flagged Activities Filter View

Dedicated filtered list page within the admin portal that surfaces only flagged activities, enabling coordinators to triage outstanding flag...

medium Activity Flagging
Expense Queue Page

Paginated admin portal page listing all pending and historical expense claims submitted by peer mentors. Supports filtering by status, date ...

medium Expense Approval Queue
Auto-Approval Rules Page

Next.js SSR admin page for viewing, creating, editing, and disabling auto-approval rules. Includes a form-driven rule builder with fields fo...

medium Auto-Approval Rules
Reimbursement Overview Page

Server-side rendered Next.js dashboard page displaying aggregated reimbursement metrics for the scoped organization or local association. Sh...

medium Reimbursement Overview
Report Filter Panel

UI panel containing filter controls for scoping report data. Manages form state for date range picker, activity type multi-select, coordinat...

low Team Reports
Reports Dashboard Page

Server-rendered Next.js page that displays aggregated activity data across peer mentors and local associations. Provides filtering controls ...

medium Team Reports
Bufdir Export Page

Next.js admin portal page where organization administrators select a reporting period and trigger Bufdir export generation. Displays export ...

medium Bufdir Export
Custom Report Builder

Next.js client-rendered page presenting a form-based query builder. Users select dimensions (activity_type, local_association, user_role, ti...

high Custom Reports
Organization Settings Page

Tabbed admin portal page for managing all organization-level configuration. Groups settings into four tabs - General, Notifications, Data, a...

medium Organization Settings
Terminology Editor

Admin portal page providing a table of all overridable Meander terms with their canonical defaults, current organization override (if any), ...

medium Custom Terminology
Feature Toggle Page

Admin portal page presenting all toggleable platform features for an organization. Displays each feature with its name, description, and an ...

medium Feature Toggles
Hierarchy Management Page

Full-page admin interface for viewing and managing the multi-level organization tree. Renders an interactive tree view using a React tree co...

high Multi-Organization Hierarchy
Organization Tree Widget

Reusable interactive tree visualization widget built on a React tree library. Handles recursive node rendering, selection state, keyboard na...

medium Multi-Organization Hierarchy
Association Management Page

Admin portal page for creating, editing, and deleting local associations (lokallag). Displays a searchable, paginated list of associations w...

medium Member Associations
Member Assignment Widget

Reusable widget embedded in the Association Management Page that renders a searchable user list with checkboxes for bulk selection. Supports...

low Member Associations
Integration Settings Page

Admin page for configuring the external Dynamics portal connection, entering credentials, defining field mappings, and toggling sync rules. ...

high External Portal Integration
Accounting Code Mapping Page

Admin portal page for configuring expense type to accounting code mappings per organization. Allows org admins to map Meander expense types ...

medium Accounting API
Security Alert Panel

Widget embedded in the Security Dashboard Page that lists active anomaly alerts with severity badges, timestamp, affected user, and one-clic...

low Security Dashboard
Security Dashboard Page

Server-rendered Next.js page providing organization and global admins with a real-time overview of the platform security posture. Displays K...

medium Security Dashboard
Audit Log Page

Paginated, filterable admin page displaying all audit log entries for the organization. Provides date range picker, user filter, event type ...

medium Audit Log
Session Management Page

Admin portal page displaying all active sessions for users within the administrator's organization. Provides a tabular view of session metad...

medium Session Management
Call-to-Action Section

A bottom-of-page conversion section with a prominent call-to-action driving visitors toward demo booking. Contains secondary headline reinfo...

low Product Landing Page
Features Showcase Section

A grid-based section highlighting Meander's core platform capabilities relevant to prospective organizations. Each feature card presents an ...

low Product Landing Page
Hero Section

The primary above-the-fold section communicating the core value proposition to decision-makers at disability and voluntary organizations. Co...

low Product Landing Page
Landing Page

The root Next.js page component for the product sales website. Assembles all landing page sections into a single SEO-optimized, WCAG 2.2 AA ...

medium Product Landing Page
Trust & Compliance Badges Section

A dedicated section displaying trust signals critical for regulated-sector buyers: WCAG 2.2 AA badge, GDPR compliance, Bufdir compatibility,...

low Product Landing Page
Compliance Badge Section

Prominent UI component displaying compliance badges for WCAG 2.2 AA, GDPR, and Bufdir readiness. Addresses top-of-mind regulatory concerns f...

low Feature Overview
Feature Overview Page

Next.js statically generated page presenting Meander platform capabilities organized by product area (Mobile App, Admin Portal, Shared Platf...

low Feature Overview
Feature Section Block

Reusable section component that renders a named product area with a short description, an icon-annotated feature list, and relevant complian...

low Feature Overview
Calculator Widget

Interactive client-side ROI calculator widget embedded on the product sales website. Renders input controls for peer mentor headcount, month...

medium Impact Calculator
Cost Comparison Widget

Two-column comparison widget presenting current-state costs versus Meander subscription costs over a 12-month horizon. Supports toggling bet...

low Cost Comparison
Booking Form Widget

Interactive multi-field form for prospective organizations to request a product demo. Collects organization name, contact name, email, phone...

low Booking Form
Demo Booking Page

Full-page layout for the demo booking flow on the product sales website. Composes the booking form widget within a structured marketing page...

low Booking Form
Booking Confirmation Page

On-page confirmation state rendered after successful demo booking form submission. Displays a thank-you message, summary of submitted detail...

low Booking Confirmation
Privacy Policy Page

Static Next.js page rendering the full GDPR-compliant Privacy Policy for the Meander sales website. Structured with anchor-linked headings f...

low Privacy Policy
Terms of Service Page

Static Next.js page rendering the full Terms of Service document for the Meander platform. Displays numbered sections with anchor navigation...

low Terms of Service
DPA Page

Static Next.js page presenting the Data Processing Agreement under GDPR Article 28. Renders structured legal content including subject matte...

low Data Processing Agreement
Cookie Policy Page

Static Next.js page presenting the full cookie policy for the Meander sales website. Renders a structured table of all cookies by name, purp...

low Cookie Policy
SLA Page

Static Next.js page presenting the Service Level Agreement for the Meander platform. Displays uptime commitments, support tiers, severity-le...

low Service Level Agreement