User Interface
158 components in the user interface layer
User Interface components handle presentation logic, user interactions, and visual elements of the application.
Email and password sign-in form rendered in both the mobile app and admin portal. Displays accessible email and password fields with a visib...
Shown when a returning BankID identity does not automatically match an existing Meander account. Presents the verified identity summary and ...
Primary mobile screen that initiates and manages the BankID authentication flow. Displays loading and redirect states while the certified br...
Full-screen entry point for the Vipps OpenID Connect login flow on mobile. Displays the Vipps-branded login button and handles the app-to-ap...
Flutter widget that triggers the platform biometric authentication dialog using the local_auth package. Renders a prompt screen with a scan ...
Static Flutter widget displayed when an authenticated user navigates to a surface outside their assigned role. Shows a clear explanation and...
Form screen for editing personal profile data including name, contact details, profile photo, and language preferences. State is managed by ...
Read-only view of the user's personal information including name, contact details, profile photo, language preference, and organization memb...
Hamburger menu widget that renders the user's active organization memberships and enables single-tap context switching. Visible only when th...
Lightweight Next.js static route rendered under the sales or admin domain that displays the shared peer mentor profile card for recipients w...
Mobile screen that presents a preview of the shareable peer mentor profile card and provides platform-native sharing options via the Flutter...
Bottom-sheet modal that guides the user through the FIDO2 registration ceremony, collecting an optional friendly credential name and trigger...
Lists all registered passkeys for the current user, showing credential name, device name, creation date, and last-used timestamp. Provides a...
A minimal, accessible form screen for recording a peer mentor activity. Pre-fills today's date and a 30-minute duration as overridable defau...
A prominent floating action button surfaced on both Peer Mentor and Coordinator home screens, providing a one-tap entry point to the activit...
Multi-step wizard container screen orchestrating the full activity registration flow via Flutter Navigator 2.0 route stack. Hosts individual...
Step widget for selecting the activity type from the organisation's configured list. Types are rendered as accessible tappable cards with ic...
Optional final step for attaching supporting documents such as invitations or screenshots required for Bufdir audit trails. Supports file pi...
Step widget for selecting the contact associated with the activity. Renders a searchable, paginated contact list filtered to the peer mentor...
Step widget covering date, start time, and activity duration. Defaults to today's date and a configurable default duration (30 min) that the...
Accessible step progress widget displayed in the wizard chrome. Communicates current step index and total steps visually via filled/unfilled...
Step widget for entering a free-text narrative summary of the activity. Integrates with the speech-to-text affordance when the speech-to-tex...
Dedicated screen where users grant calendar permission and configure sync preferences. Displays connection status for linked calendars and p...
Reusable Flutter widget that attaches to any opt-in TextFormField as a microphone icon button. Manages the full recording lifecycle: permiss...
Animated overlay widget that renders inside the Speech Input Widget to signal active listening state. Pulses when the microphone is open and...
Searchable multi-select widget that fetches and renders the coordinator's managed peer mentor list for proxy submission targeting. Supports ...
Full proxy registration screen that prepends a peer-mentor selection step to the standard activity wizard flow. Coordinators pick one or mor...
Main coordinator screen for bulk activity registration. Combines a shared-fields activity form (type, date, duration, summary) with a partic...
Multi-step guided wizard for creating events in the Meander mobile app. Presents discrete input steps for title, date, time, duration, locat...
Read-only detail view for a single event record fetched by ID. Displays the full event record including title, date, time, location, descrip...
Scrollable, paginated list of upcoming and past events scoped to the user's organization. Displays each event's title, date, time, location,...
Reusable modal widget that lets coordinators select a contact from their organization roster for proxy registration actions. Scoped to the c...
Stateful BLoC widget embedded in the Event Detail Screen that manages participant registration flow. Renders sign-up/sign-off button, displa...
Expense Form Screen
Flutter widget integrating device camera and photo library for capturing receipt images within the expense registration flow. Displays a thu...
Inline progress indicator rendered inside the expense form during active receipt upload. Displays percentage progress during live upload and...
Flutter widget that renders the organization-specific expense type list dynamically from backend configuration. Enforces mutual exclusivity ...
Declaration Form Screen
Inline search input built on the shared AppTextField widget that filters the contact list in real time via case-insensitive substring matchi...
Main screen displaying a scrollable, role-filtered list of contacts assigned to the current user. Uses ListView.builder for efficient render...
Full-screen view displaying all stored information for an individual contact, including personal details, contact history, associated activi...
Inline edit mode rendered within the Contact Detail Screen, toggled via a local boolean state flag rather than a separate route. All contact...
Displays all caregiver and next-of-kin records linked to a contact. Rendered inline within the contact detail view and provides one-tap tel:...
Modal bottom sheet form for creating and editing caregiver records. Uses a lightweight subset of the contact form fields: name, relationship...
Riverpod-managed Flutter screen displaying all notes for the current user. Shows creation date, associated contact name, and truncated body ...
Inline widget embedded in the Note Editor Screen that renders the list of attachments for the current note and provides add/remove controls....
Flutter screen for creating and editing individual notes. Provides a multi-line AppTextField for freeform body text, an optional contact pic...
Full-screen Flutter view displaying a peer mentor's personal activity statistics: total activities, hours, contacts supported, and time-buck...
Reusable Flutter widget wrapping fl_chart (or charts_flutter) that renders a bar or line chart for time-bucketed activity data. Enforces WCA...
Drill-down screen displaying an individual peer mentor's contribution breakdown within the coordinator's team report. Surfaces full activity...
Inline filter controls embedded in the team report screen allowing coordinators to scope the report by date range, individual peer mentor, a...
Main coordinator report screen showing aggregate activity totals across all peer mentors in the coordinator's local association. Displays da...
Next.js admin portal page for Organization Admins and Global Admins to generate and review Bufdir reports. Supports single-organization gene...
Flutter mobile screen for coordinators to initiate, preview, and review Bufdir government funding reports for their organization. Displays p...
Reusable Flutter widget for selecting the Bufdir reporting period (quarterly or annual) with date range confirmation. Validates the selected...
Lightweight bottom-sheet or dropdown widget that lets users choose the export format (PDF, CSV, XML) before triggering the export. Defaults ...
Read-only list widget embedded in the Bufdir report screen that surfaces the last N export log entries for the current report. Allows admins...
Prominent export trigger widget displayed on the Bufdir report screen in both the mobile app and admin web portal. Initiates the export pipe...
Presents decrypted sensitive assignment content (name, address, medical summary) after an explicit acknowledgment tap that records a read re...
Displays the peer mentor's inbox of incoming assignments showing sender, date, and status without revealing sensitive content until explicit...
Coordinator-facing Flutter widget displaying each peer mentor's current assignment count, distance to next threshold, and milestone history....
Unread count badge overlay rendered on the Notifications tab in the bottom navigation bar. Subscribes reactively to the unread count stream ...
Full-screen inbox displaying paginated notification history for the authenticated user, with unread/read state, typed notification icons, an...
Full-screen settings view allowing users to toggle notification categories per channel (push, email, SMS) and configure quiet hours. Mandato...
Accessible time-range picker for quiet hours start and end, displaying values in the device locale while persisting as UTC offsets. Validate...
Primary screen for generating and distributing personalized invite links and QR codes. Displays the signed invite URL, renders the QR code v...
Reusable Flutter widget that renders a QR code image from a URL string using the qr_flutter package entirely client-side. No server round-tr...
Reusable StatelessWidget rendering a single row in the recruiter leaderboard. Shows peer mentor display name, total invitations sent, and to...
Coordinator-facing Flutter StatelessWidget that displays referral funnel metrics: invitations sent, redemptions, and a ranked list of most a...
Paginated browsable list of available training courses with dates, availability, and prerequisites. Peer mentors and coordinators can filter...
Multi-step enrollment flow following the Activity Wizard pattern. Collects enrollment details, displays course summary, and confirms submiss...
Inline banner widget that surfaces an expiry warning when the certificate validity window is within the configured threshold. Displayed on t...
Renders the peer mentor's digital certificate as a styled card showing mentor name, issuing organization, issue date, and expiry date. Desig...
Read-heavy screen displaying workshop session metadata, participant roster, and session schedule. Fetches data from the API and renders part...
Embeddable note-taking widget scoped to a workshop session context rather than a user context. Stores notes in the notes table using a works...
Animated year-in-review screen sequence that presents the peer mentor's annual impact data using progressive disclosure. Built with Flutter ...
Captures a static image snapshot of the peer mentor's key stats using Flutter's RepaintBoundary widget and shares it externally via the shar...
Flutter screen displaying the full badge catalogue with earned and locked states. Computes lock/unlock state client-side from the fetched ba...
Flutter screen that presents the peer mentor's accumulated impact as animated metric cards. Calls the backend on mount, debounces re-calls w...
Reusable Flutter widget that displays a single impact metric (label, numeric value, unit, formula tooltip) with smooth number-roll animation...
Small status banner displayed at the top of the Advantage Calculator Screen when the current impact result originates from the local cache r...
Full-screen card deck display for peer mentors, presenting conversation-starter cards organized by topic and situation. Supports swipeable o...
A library of reusable Flutter widgets that wrap primitives with mandatory semantic labels, ARIA-equivalent Semantics properties, visible foc...
A Flutter-native design token system that encodes WCAG 2.2 AA contrast ratios, minimum touch target sizes, spacing scales, and scalable typo...
Accessible modal overlay that intercepts screen reader focus on annotated sensitive fields and presents a configurable warning before allowi...
Flutter Semantics wrapper widget applied at the data-binding layer to any widget rendering an annotated sensitive field. Intercepts accessib...
Settings widget that lists available locales and conditionally surfaces Northern Sami only when the ARB bundle is marked complete. Renders i...
Persistent five-tab bottom navigation bar (Home, Contacts, Add, Work, Notifications) that anchors the mobile app shell. Tabs are mounted at ...
Entry screen for Coordinator role users, assembled at runtime from the enabled module set. Surfaces team overview, pending approvals, and as...
Entry screen for Peer Mentor role users, assembled at runtime from the enabled module set via the Module Registry Service. Displays recent a...
Centralized settings screen accessible from the hamburger menu, rendered as a declarative list-item widget pattern (title, subtitle, trailin...
Reusable list-item widget rendering a single external resource link with icon, display name, and description. Consistent with Contacts and N...
Flutter screen displaying a curated, org-configurable catalogue of external URLs grouped by category. Fetches links from the backend on moun...
Minimal support contact screen presenting email, phone, and in-app request form options. Always accessible regardless of module toggles or a...
Renders the platform's privacy policy as formatted, scrollable text inside the mobile app. Applies platform typography tokens for consistent...
Flutter screen that fetches and displays the versioned accessibility statement content from the backend. Renders structured text including c...
Displays frequently asked questions organized into expandable category sections using ExpansionTile widgets. Supports client-side keyword se...
Settings screen panel for sync diagnostics that exposes detailed sync health information including per-item retry counts, dead-letter queue ...
Home screen status bar widget that surfaces real-time sync state to the user, including pending mutation count, last successful sync timesta...
The admin portal home screen displaying real-time KPI stat cards for coordinators and org admins. Renders skeleton loaders during fetch and ...
Reusable stat card component rendering a single KPI metric with its label, value, and trend indicator. Supports skeleton loading state and g...
Infinite-scroll list rendered in the admin portal displaying a chronological stream of recent organizational events. Each entry shows actor,...
Combined view and edit page for a single user, displaying contact details, organization memberships, and role summary. Supports inline editi...
Modal form for inviting a new user by email address. Collects the invitee's email, target organization assignment, and initial role, then tr...
Server-side rendered admin page displaying a paginated, filterable list of users within the requesting admin's organization scope. Supports ...
Role Assignment Widget
Contextual toolbar that appears on the Users List Page when one or more rows are selected. Renders selected-count badge and action buttons (...
Modal dialog shown before executing bulk deactivation. Displays the count of affected users and a non-recoverable-action warning. Requires e...
Checkbox controls embedded in the Users List Page table that manage three selection states: individual row, select-all on current page, and ...
Expandable side panel rendered alongside the review queue that displays the full record of a selected activity registration, including conta...
Server-side rendered Next.js page providing coordinators and org admins with a paginated queue of pending activity registrations awaiting re...
A compact inline widget rendered on individual activity rows and detail views in the admin portal, allowing coordinators and admins to manua...
An admin portal widget embedded on the Activity Review page that surfaces potential duplicate activity registrations as actionable alert car...
Server-side-rendered Next.js page providing coordinators and org admins with a paginated, filterable inbox of submitted expense claims. Disp...
Slide-over or modal panel rendered within the Expense Approval Page that displays the full detail of a single expense claim, including all e...
Next.js server component presenting threshold rules as structured form inputs for organization administrators. Renders enabled/disabled togg...
Read-only dry-run panel embedded within the Auto-Approval Config Widget that executes a historical backtest against the current (unsaved) ru...
Widget embedded in the Reimbursement Dashboard Page that allows admins to narrow aggregate metrics by individual peer mentor, expense type, ...
Next.js server component delivering aggregate expense metrics to organization admins. Displays KPI cards (total claims, approved amount, ave...
Responsive paginated table component rendering per-peer-mentor activity rows within the Team Reports page. Supports column sorting, paginati...
Composite filter control bar rendered above the reports table, providing date range picker, activity type multi-select, and organizational u...
Row of summary stat cards displayed at the top of the Team Reports page showing key aggregate metrics for the filtered data set. Cards are n...
Server-side rendered Next.js page providing coordinators and organization admins with aggregated activity data across all peer mentors in th...
Primary action button in the Admin Web Portal that triggers the Bufdir export pipeline with a single click. Displays export period selector ...
Tabular view in the Reporting & Export section listing all past Bufdir exports for the organization. Each row shows the reporting period, ex...
Modal overlay that appears after export is triggered and polls the export_logs table via the status endpoint until the job reaches a termina...
Admin Web Portal page providing the full report builder interface: dimension pickers (activity type, date range, peer mentor, contact catego...
Reusable dynamic table widget that renders paginated JSON report results with sortable column headers. Adapts its columns based on the dimen...
Primary admin portal page for managing an organization's operational configuration. Renders structured form sections for profile (name, cont...
Admin portal form that lists every overrideable label key alongside its current organization value and platform default. Provides inline edi...
Admin portal page listing all toggleable platform areas for an organization, showing current enabled state and declared inter-module depende...
Full-page admin interface for viewing and managing the multi-level organization tree (national, regional, local). Renders a collapsible tree...
Admin web portal page for managing user memberships within a selected organizational unit. Displays current members with their roles and pri...
Admin page for configuring per-organization external portal connections. Exposes fields for OAuth 2.0 credentials or API keys, field mapping...
Embedded widget displayed within the integration config page and the admin security dashboard, showing sync job history, error counts, last ...
Admin UI widget for configuring per-organization accounting system connections. Allows administrators to select the accounting provider (Xle...
Server-side rendered Next.js page providing organization administrators with a real-time overview of platform security posture. Aggregates a...
Expandable inline panel or slide-over drawer that shows the full detail of a single audit log entry. Renders the raw metadata JSON blob in a...
Reusable filter control bar for the audit log page. Renders date range picker, event type multi-select, actor user search input, and organiz...
Paginated, server-side-rendered admin portal page displaying the immutable audit trail. Provides filterable table view with columns for time...
Next.js SSR admin page listing all active sessions for users within the administrator's organization. Displays device type, IP address, loca...
A guided multi-step qualification flow that helps prospective organizations assess whether Meander meets their needs, presenting tailored be...
The primary marketing entry point for the Meander platform, presenting the value proposition, key capabilities, social proof, and a clear ca...
Static Next.js page presenting Meander platform capabilities organized by functional area. Each area section lists key features with brief d...
Companion section covering onboarding process, support channels, SLA basics, and available training materials. Lowers perceived onboarding r...
Main interactive calculator page on the sales website allowing prospective organizations to input parameters and view projected ROI metrics....
Accessible form component with labeled numeric inputs for organization size, active mentor count, average monthly activity frequency, and cu...
Summary card component displaying headline ROI metrics computed from user inputs, including projected monthly time savings, reporting accura...
Export action component that triggers the browser print dialog with print-optimized styles applied to the results card only. Enables prospec...
Two-column comparison table rendered as a React component in the Next.js sales website. Displays manual-process line items on the left (staf...
Server-rendered Next.js page presenting the demo booking form to prospective organizations. Collects organization name, contact person, emai...
Server-side rendered Next.js route displayed immediately after a successful demo booking submission. Shows a branded success message, a summ...
Static Next.js route at /privacy-policy rendering the full GDPR-compliant privacy policy for the Meander sales website. Displays structured ...
Static Next.js route at /terms-of-service rendering the full contractual terms between Norse Digital Products and subscribing organizations....
Static Next.js page at /data-processing-agreement rendering the full GDPR Article 28 Data Processing Agreement. Displays structured annex se...
Site-wide consent banner displayed on first visit to the sales website. Blocks non-essential cookies until user grants consent per category ...
Static Next.js page at /cookie-policy that discloses all cookies and tracking technologies used on the Meander sales website. Organizes cook...
Static Next.js page at /sla presenting the full Service Level Agreement document. Renders uptime commitments, support tier matrix, incident ...
Other Component Types
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.