User Interface
139 components in the user interface layer
User Interface components handle presentation logic, user interactions, and visual elements of the application.
The primary authentication entry point for the Meander mobile app. Presents email and password fields, a submit button, and navigates to the...
Flutter screen that initiates the BankID OAuth/OIDC authentication flow via a secure in-app browser. Presents the BankID option clearly alon...
The mobile screen that initiates and manages the Vipps login flow. Renders the Vipps login button, launches the Vipps app or browser fallbac...
Full-screen biometric prompt overlay that triggers Face ID or fingerprint authentication via Flutter's local_auth package. Displays contextu...
Flutter widget that conditionally renders UI elements and navigation items based on the current user's decoded JWT role claims. Enforces cli...
Reusable widget for selecting and uploading a profile photo from camera or device gallery. Handles image source selection, crops to avatar d...
Main profile view and edit screen for peer mentors and coordinators. Displays user identity, role assignments, local association, and organi...
A UI widget accessible from the hamburger menu and profile screen that lists all roles and org/association combinations available to the aut...
Mobile screen that displays the peer mentor's shareable profile summary and triggers the OS-level share sheet. Shows display name, role titl...
Displays all registered passkeys for the authenticated user and allows revocation of individual passkeys. Accessible from profile settings a...
Guides the user through registering a new passkey on their device. Handles device capability detection, prompts the platform authenticator (...
Single-screen form for recording a completed peer mentor interaction with minimal input. Presents pre-filled defaults (today's date, 30-minu...
Multi-step wizard container managing the full activity registration flow using Flutter Navigator 2.0. Hosts the step page stack, renders the...
Accessible step progress bar widget rendered at the top of the wizard screen. Shows current step index vs total steps with ARIA progress rol...
Step 3 of the wizard. Renders a list of available activity types fetched from the Activity Repository. Supports organisation-specific termin...
Step 1 of the wizard. Renders a searchable contact picker backed by the Contact Repository. Emits a validation event before allowing forward...
Step 2 of the wizard. Provides date picker, start-time picker, and duration selector (or end-time with cross-field validation enforced by Ac...
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...
Renders a dismissible list of upcoming calendar events matched to known contacts, surfaced inside the Activity Registration Wizard as pre-fi...
Handles the full permission request lifecycle for calendar access on iOS and Android. Presents a contextual rationale dialog explaining exac...
Settings screen section that shows the current calendar permission state and lets the user revoke or re-grant permission from within the app...
Microphone icon button that overlays on any compatible text field (activity summary, notes) to trigger dictation mode. Displays a real-time ...
Reusable mobile widget that loads and displays peer mentors scoped to the coordinator's local association. Supports name search and single s...
Main screen allowing coordinators to register activities on behalf of a selected peer mentor. Displays a persistent proxy-context banner thr...
Primary screen for coordinators to perform bulk activity registration. Presents an activity template form followed by a multi-select partici...
Reusable Flutter widget providing a searchable, filterable multi-select list of peer mentors and contacts within the coordinator's local ass...
Multi-step Flutter screen guiding users through event creation: title, date, time, duration, location, and summary. Managed by BLoC with inl...
Reusable Flutter card widget presenting a single event summary including title, date, time, location, and a participant count badge. Impleme...
Compact filter widget embedded in the Event List Screen toolbar that allows users to narrow the event list by date range or status (upcoming...
BLoC-driven Flutter screen presenting a paginated, scrollable list of upcoming and past events within the user's organization. Displays even...
Displays full event details and a confirmation action for the user to register themselves or a contact. Handles the sign-up flow including a...
Flutter screen for logging reimbursable travel costs including kilometre allowances, toll fees, parking, and public transport. Presents fixe...
Flutter widget that invokes the device camera or photo library via image_picker. Displays a capture button with descriptive WCAG-compliant l...
Horizontal scrollable strip that renders compressed preview thumbnails of attached receipts within the expense registration form. Supports t...
Flutter screen component that displays the organisation-scoped catalogue of reimbursable expense types as a reactive selection list. Enforce...
Full-screen declaration view that fetches the organisation's declaration template and renders the legally binding text. The accept button is...
Filter chip row allowing users to narrow the contact list by status (active, inactive) or relationship type. Rendered as horizontally scroll...
Primary screen displaying the user's assigned contacts in a scrollable, accessible list. Uses Flutter ListView.builder for efficient renderi...
Persistent search bar widget embedded in the contact list screen. Implements debounced input handling to trigger either client-side filterin...
Full-profile screen for a single contact displaying personal information, activity history, assigned peer mentor, and follow-up status. Enfo...
Edit form screen allowing authorised users to update mutable contact fields such as phone number, address, and situational notes. Reuses App...
Expandable card section rendered within the contact detail screen that lists all caregiver and next-of-kin records for a contact. Displays e...
Modal bottom sheet for creating and updating caregiver records. Presents fields for caregiver name, relationship type via a predefined dropd...
Flutter screen displaying a paginated, searchable list of notes associated with the authenticated user's contacts and activities. Renders no...
Reusable Flutter widget providing an accessible search text field and sort controls for the notes list. Debounces search input to minimise A...
Full-screen Flutter editor for creating and editing free-text notes linked to a contact and optional activity. Renders a multi-line TextFiel...
A chart widget using fl_chart to visualise activity distribution by type and time. Includes off-screen semantic list rendering for VoiceOver...
The main statistics dashboard screen for peer mentors, displaying aggregated activity data with charts and filters. Renders activity counts ...
A reusable date range selection widget used within the statistics screen to filter data by custom time periods (week, month, quarter, year, ...
Main mobile screen giving coordinators a sortable, filterable summary of team activity across all peer mentors in their local association. D...
Mobile screen enabling coordinators and org admins to initiate Bufdir report generation, preview aggregated data per reporting period, and t...
Reusable dropdown/picker widget for selecting the active reporting period scoped to the user's organization. Supports both mobile and admin ...
A single-button widget in the Flutter mobile app that triggers the Bufdir report export. Displays a loading indicator during asynchronous fi...
Renders the fully decrypted assignment content - name, address, and medical summary - after the Encryption Service decrypts the payload on-d...
Displays all assignments dispatched to the peer mentor, showing status indicators for each: unread, read, and contact established. Supports ...
Flutter BLoC widget displayed on the peer mentor home screen showing current completed assignment count, the next threshold value, and the d...
Read-only widget embedded in coordinator oversight screens listing peer mentors with their completed assignment counts and current honorariu...
Displays the in-app notification inbox listing all received push notifications for the user. Provides an accessible fallback for users who m...
Flutter settings page presenting toggles per notification category (new assignments, activity reminders, event updates, coordinator messages...
Full-screen mobile UI that displays the generated QR code and invite link for the current user. Provides action buttons for sharing via nati...
Inline dashboard widget displayed on the home screen or within the referral section, showing key recruitment metrics for the current user. S...
Full-screen view listing all referrals for the current user with status badges (invited, registered, active) and last-updated timestamps. Su...
Presents full course details including description, schedule, prerequisites, capacity, and waitlist position. Provides primary enroll and un...
Displays available training courses for the authenticated user's organization, with filtering by status (open, waitlisted, completed) and ca...
Shows the authenticated user's personal enrollment history including active enrollments, waitlist positions, and completed courses. Entry po...
Dedicated Flutter screen displaying the peer mentor's verified digital certificate, including their name, issuing organization branding, val...
Primary Flutter screen for facilitating structured two-day group mentoring sessions. Displays participant list, session notes, and to-do che...
Reusable Flutter checklist widget for managing facilitator to-do items during a workshop session. Renders checkbox list with add/remove cont...
Full-screen animated presentation that renders the peer mentor's yearly review as swipeable slides in a Spotify Wrapped-style format. Each s...
Flutter screen displaying the peer mentor's earned and locked achievement badges. Earned badges are shown in full color with unlock date; lo...
Self-contained Flutter screen that lets peer mentors and coordinators input activity hours, activity types, and geographic region to compute...
Displays the curated collection of conversation-starter cards organized by topic or theme. Renders cards as scrollable, accessible Flutter w...
A suite of custom Flutter widgets (AppButton, AppTextField, AppCard, AppSlider, etc.) with accessibility built in at the component level. Ev...
Flutter widget that renders a dismissible warning banner or dialog when a screen reader is active and focus moves to a sensitive field. The ...
Composable Flutter widget that wraps any field or text node marked as containing sensitive personal information. It detects screen reader ac...
In-app UI control that allows users to select their preferred display language (Norwegian, English, or Northern Sami). Renders as a modal or...
Persistent bottom navigation shell with five tabs (Home, Contacts, Add, Work, Notifications) rendered consistently across Peer Mentor and Co...
Role-specific home screen for Coordinators surfacing team overviews, pending expense approvals, and encrypted assignment queues. Consolidate...
Animated shimmer skeleton placeholder widgets displayed during dashboard data fetch to provide visual feedback and prevent cumulative layout...
Role-specific home screen for Peer Mentors displaying recent activities, upcoming contacts, and personal statistics. Implements skeleton loa...
Centralized settings screen accessible from the hamburger menu overlay. Displays a flat, scannable list of user-scoped preference controls i...
Stateless Flutter screen displaying a scannable list of external resource links fetched from the backend. Each item renders as a tappable li...
Flutter screen providing a structured support request form with a dropdown for inquiry category (technical issue, account help, feedback) an...
Scrollable full-screen view that renders the platform's privacy policy text with accessible typography. Displays a version label and last-up...
A dedicated in-app screen that renders the platform's formal accessibility statement, covering WCAG 2.2 Level AA conformance status, known l...
Searchable frequently asked questions screen with category grouping and inline expansion. Uses Flutter ExpansionTile widgets for each Q&A pa...
A persistent widget displayed in the app shell that communicates current connectivity state to the user. Shows distinct visual states for on...
A compact widget displayed in the app shell that communicates the current synchronisation state to the user: idle, syncing, pending items, o...
Main admin dashboard page displaying real-time KPI cards for active peer mentors, activity counts, pending approvals, and Bufdir reporting s...
Reusable stat card component displaying a single KPI metric with value, label, trend arrow, and optional link to the detailed page. Consiste...
Paginated, filterable chronological stream of recent organization events rendered as typed feed cards in the admin portal. Supports filter c...
Server-rendered Next.js page exposing full profile information, role assignments, activity history summaries, and account status for a singl...
Modal dialog for inviting new peer mentors or coordinators by email. Captures initial role, local association context, and sends a tokenized...
Server-rendered Next.js page presenting a searchable, filterable, paginated table of all users within the administrator's organization scope...
Embedded widget rendered within the User Detail Page and accessible as a standalone workflow from bulk actions. Presents a controlled select...
Contextual toolbar that appears above the user list when one or more users are selected via checkboxes. Provides action selector dropdown (b...
Dismissible inline panel rendered after a bulk operation completes, displaying a breakdown of success count, skipped count (tenancy validati...
Main admin portal page for coordinators and org admins to inspect, filter, and act on submitted activity registrations. Displays a paginated...
Reusable badge component that renders approval status (pending, approved, rejected) with colour-coded styling for use in the admin review ta...
Inline action widget rendered within activity list rows and detail views in the admin portal, providing coordinators and admins with a one-c...
Dedicated filtered list page within the admin portal that surfaces only flagged activities, enabling coordinators to triage outstanding flag...
Paginated admin portal page listing all pending and historical expense claims submitted by peer mentors. Supports filtering by status, date ...
Next.js SSR admin page for viewing, creating, editing, and disabling auto-approval rules. Includes a form-driven rule builder with fields fo...
Server-side rendered Next.js dashboard page displaying aggregated reimbursement metrics for the scoped organization or local association. Sh...
UI panel containing filter controls for scoping report data. Manages form state for date range picker, activity type multi-select, coordinat...
Server-rendered Next.js page that displays aggregated activity data across peer mentors and local associations. Provides filtering controls ...
Next.js admin portal page where organization administrators select a reporting period and trigger Bufdir export generation. Displays export ...
Next.js client-rendered page presenting a form-based query builder. Users select dimensions (activity_type, local_association, user_role, ti...
Tabbed admin portal page for managing all organization-level configuration. Groups settings into four tabs - General, Notifications, Data, a...
Admin portal page providing a table of all overridable Meander terms with their canonical defaults, current organization override (if any), ...
Admin portal page presenting all toggleable platform features for an organization. Displays each feature with its name, description, and an ...
Full-page admin interface for viewing and managing the multi-level organization tree. Renders an interactive tree view using a React tree co...
Reusable interactive tree visualization widget built on a React tree library. Handles recursive node rendering, selection state, keyboard na...
Admin portal page for creating, editing, and deleting local associations (lokallag). Displays a searchable, paginated list of associations w...
Reusable widget embedded in the Association Management Page that renders a searchable user list with checkboxes for bulk selection. Supports...
Admin page for configuring the external Dynamics portal connection, entering credentials, defining field mappings, and toggling sync rules. ...
Admin portal page for configuring expense type to accounting code mappings per organization. Allows org admins to map Meander expense types ...
Widget embedded in the Security Dashboard Page that lists active anomaly alerts with severity badges, timestamp, affected user, and one-clic...
Server-rendered Next.js page providing organization and global admins with a real-time overview of the platform security posture. Displays K...
Paginated, filterable admin page displaying all audit log entries for the organization. Provides date range picker, user filter, event type ...
Admin portal page displaying all active sessions for users within the administrator's organization. Provides a tabular view of session metad...
A bottom-of-page conversion section with a prominent call-to-action driving visitors toward demo booking. Contains secondary headline reinfo...
A grid-based section highlighting Meander's core platform capabilities relevant to prospective organizations. Each feature card presents an ...
The primary above-the-fold section communicating the core value proposition to decision-makers at disability and voluntary organizations. Co...
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 ...
A dedicated section displaying trust signals critical for regulated-sector buyers: WCAG 2.2 AA badge, GDPR compliance, Bufdir compatibility,...
Prominent UI component displaying compliance badges for WCAG 2.2 AA, GDPR, and Bufdir readiness. Addresses top-of-mind regulatory concerns f...
Next.js statically generated page presenting Meander platform capabilities organized by product area (Mobile App, Admin Portal, Shared Platf...
Reusable section component that renders a named product area with a short description, an icon-annotated feature list, and relevant complian...
Interactive client-side ROI calculator widget embedded on the product sales website. Renders input controls for peer mentor headcount, month...
Two-column comparison widget presenting current-state costs versus Meander subscription costs over a 12-month horizon. Supports toggling bet...
Interactive multi-field form for prospective organizations to request a product demo. Collects organization name, contact name, email, phone...
Full-page layout for the demo booking flow on the product sales website. Composes the booking form widget within a structured marketing page...
On-page confirmation state rendered after successful demo booking form submission. Displays a thank-you message, summary of submitted detail...
Static Next.js page rendering the full GDPR-compliant Privacy Policy for the Meander sales website. Structured with anchor-linked headings f...
Static Next.js page rendering the full Terms of Service document for the Meander platform. Displays numbered sections with anchor navigation...
Static Next.js page presenting the Data Processing Agreement under GDPR Article 28. Renders structured legal content including subject matte...
Static Next.js page presenting the full cookie policy for the Meander sales website. Renders a structured table of all cookies by name, purp...
Static Next.js page presenting the Service Level Agreement for the Meander platform. Displays uptime commitments, support tiers, severity-le...
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.