User Interface
122 components in the user interface layer
User Interface components handle presentation logic, user interactions, and visual elements of the application.
The primary authentication screen presented to all user types at app launch. It collects email and password credentials and provides inline ...
Renders the BankID login entry point within the Meander authentication flow. Presents the "Log in with BankID" action and handles user initi...
Presents the Vipps login entry point to the user, displaying the Vipps branding and initiating the OAuth redirect flow. Handles the pre-redi...
Native biometric prompt overlay shown at app launch when a stored session token exists. Triggers the platform biometric dialog (Face ID on i...
Bottom-sheet or modal widget presented on the login screen when a stored passkey credential is detected for the device. Allows the user to a...
Settings page listing all passkeys registered by the authenticated user across their devices. Allows renaming and deleting individual creden...
Full-screen flow for registering a new passkey on the user's device. Guides the user through the biometric/PIN prompt and confirms successfu...
Client-side gate widget that conditionally renders navigation items, screens, and action controls based on the role context returned at sess...
An editable form component that allows users to update their contact details and account settings. Validates input client-side before submit...
The read-only profile overview screen displays the authenticated user's personal information, contact details, and account settings. It adap...
A persistent UI control displayed in the app header or home screen that shows the user's currently active profile and organization context. ...
Minimal-friction mobile screen for recording peer mentor interactions. Presents intelligent defaults (today's date, 30-minute duration) so t...
Multi-step wizard screen that guides peer mentors through the structured activity registration flow. Renders each sequential step (contact s...
An inline microphone button and transcript preview panel that appears within text input fields. It displays real-time transcription results ...
A mobile UI widget that lets peer mentors select files from the device file picker or camera roll and attach them to an activity record. It ...
Mobile screen presenting the structured home-visit report form to the volunteer. It renders checkbox groups and short free-text fields for h...
Inline selector widget that lets a coordinator search for and choose a peer mentor from the mentors assigned to their organization. It fetch...
Full-screen form view that coordinators use to register activities on behalf of a peer mentor. It mirrors the standard activity registration...
The coordinator-facing screen for submitting a single activity record across multiple peer mentors at once. It provides peer mentor selectio...
Multi-step wizard screen that guides peer mentors and coordinators through scheduling a new event. Collects title, date, time, duration, loc...
The primary screen for browsing upcoming and past events within the user's organization. Renders a scrollable, searchable list showing event...
A bottom sheet overlay that appears on the event detail view, allowing peer mentors and coordinators to register attendance for a scheduled ...
Mobile screen for registering travel expenses including kilometer reimbursement, tolls, parking, and public transport costs. Presents fixed-...
Mobile UI widget that lets peer mentors capture or select a receipt photo from the device camera or photo library. It compresses the image c...
Mobile UI widget that renders the list of allowed expense types for an organization and enforces mutual-exclusivity rules through reactive d...
A blocking modal or full-screen overlay that appears within the expense registration flow when a qualifying driver or sensitive-role expense...
The primary screen displaying a scrollable list of contacts scoped to the authenticated user's role. Peer mentors see only their own contact...
An inline search input that filters the contact list by name or phone number without requiring additional navigation. Search operates agains...
Displays a contact's full profile including personal details, role tags, linked activities, and caregiver relationships. Serves as the navig...
Provides a role-scoped form for editing contact fields, exposing limited fields to peer mentors and full access to coordinators. Applies edi...
Renders the caregiver list within the contact detail screen as a dedicated collapsible section. Displays each caregiver's name, relationship...
The primary mobile screen for browsing all personal notes belonging to the authenticated user. It renders a scrollable list of note cards wi...
Full-screen text editing interface for creating and updating notes. Renders an optional title field and a free-form plaintext body input wit...
Displays a visual dashboard of the peer mentor's own activity history and contribution metrics. Renders charts, summary cards, and trend ind...
Mobile screen that presents aggregated team-level activity metrics for all peer mentors within the coordinator's local association. Displays...
Shows the full details of a single assignment including the encrypted payload preview (decrypted client-side), delivery timeline, and read-r...
Displays the coordinator's overview of all open assignments with their current delivery and read-receipt status. Provides filtering and sort...
Displays each peer mentor's cumulative assignment count and active honorarium tier for the current reporting period. Coordinators can scan t...
Presents the digital consent workflow to peer mentors when they first encounter a new sensitive assignment type. Guides the user through con...
Mobile screen that allows peer mentors and coordinators to register a relative of a primary contact as an independent record. Presents a for...
A bidirectional navigation widget rendered on both the contact detail screen and the relative detail screen. It displays all relatives linke...
An inline widget rendered within the case link record view for assigning and displaying a semantic role to a relative. It presents a dropdow...
A bottom sheet modal that prompts the peer mentor to confirm their intent to pause their active status. It displays a brief explanation of w...
Dedicated screen shown to a paused peer mentor who initiates a return to active status. Displays current pause status, total pause duration,...
The primary screen that renders an interactive geographic map showing active peer mentor locations across regions and local associations. It...
Compact UI control that lets coordinators set a maximum travel radius and toggle proximity-based filtering on or off. Renders inside the geo...
Displays ranked peer mentor suggestions for a given assignment target, showing distance, availability, and match score. Coordinator-facing p...
Individual card component representing one ranked mentor candidate within the GeographyMatchPanel. Displays name, distance, composite match ...
Shows full metadata and lifecycle controls for a single karriereverksted session. Coordinators can edit session details, manage scheduling a...
Displays the full list of karriereverksted sessions available to the coordinator. Provides filtering, sorting, and status indicators for eac...
A freeform note-taking editor scoped to a single workshop session, allowing peer mentors and coordinators to create, edit, and review sessio...
Displays the list of peer mentors registered for a specific workshop session. Coordinators can mark attendance, add new participants, and re...
Renders the to-do list panel inside the workshop detail view, displaying all action items for the current session. Provides inline controls ...
Mobile screen displaying the user's notification inbox as a scrollable list of received push messages. Users can view, acknowledge, and act ...
A dedicated settings screen that allows peer mentors and coordinators to configure which notification types they receive and through which c...
A full-screen widget that renders a scannable QR code encoding the peer mentor's referral link, optimised for in-person display at events or...
The primary screen where peer mentors generate and share their personalized invite link. It displays the unique referral URL, provides one-t...
A dashboard widget displayed on the peer mentor and coordinator home screen showing real-time recruitment counts and a list of recent recrui...
Displays a browsable list of available courses for peer mentors and coordinators. Supports filtering by category, organization context (HLF ...
Presents full course details and the enrollment action for a selected course. Handles confirmation of registration, displays prerequisite or...
Displays the peer mentor's verified digital certificate including certified status, expiry date, and issuing organization. Provides share fu...
The main screen that displays a peer mentor's or coordinator's year-in-review summary. It presents aggregated statistics, milestones, and hi...
A self-contained animated widget that presents individual summary cards in a Spotify Wrapped-style sequence. It handles transitions, timing,...
Compact embeddable widget that displays a summary of the user's most recently earned or nearest-to-unlock badge. Intended for placement on d...
Full-screen view displaying all achievement badges available to the current user, organized by category or milestone type. Shows earned badg...
The main screen peer mentors use to view their calculated impact metrics and volunteer benefits. It presents estimated advantages derived fr...
Shows the full content of a single conversation-starter card, including its topic, question or prompt, and any supporting guidance notes. Pr...
Displays the full thematic deck of conversation-starter cards to the peer mentor. Cards are presented in a browsable grid or list organized ...
Defines the canonical design token set enforcing WCAG 2.2 AA visual requirements across the entire app. Tokens cover minimum contrast ratios...
A reusable widget that wraps sensitive form fields and intercepts accessibility focus events before screen reader content is announced. It r...
The entry-point screen rendered for authenticated coordinator users. It surfaces team oversight widgets and a pending approval queue so coor...
The entry-point screen rendered for authenticated peer mentor users. It displays a personal activity feed, quick-log action shortcuts, and a...
The main settings screen accessible via the hamburger menu, presenting all user-configurable options in a single consolidated view. It rende...
Displays the organization-configured list of external resource links within the app. Each link opens in an external browser and shows title,...
Full-screen form for submitting support requests directly from within the app. User identity fields are pre-populated from the active sessio...
Reusable block that renders a single named policy section with a heading and body text. Handles paragraph formatting and inline emphasis. Us...
Full-screen scrollable view rendering the platform privacy policy text. Accessible from Help & Support without authentication. Meets WCAG 2....
A static screen presenting the application's formal WCAG 2.2 AA accessibility declaration in plain Norwegian. It displays compliance status,...
The main FAQ screen renders a searchable, categorized list of frequently asked questions for peer mentors and coordinators. It supports full...
The primary landing screen for organization administrators after login. It composes KPI cards into a structured overview grid and handles in...
A reusable card component that displays a single KPI metric with its label, current value, and optional trend indicator. It receives data as...
Renders a chronological stream of platform events on the Admin Web Portal dashboard. Displays activity registrations, user actions, pending ...
Modal dialog that collects an email address and target role for a new user invitation. Submits the invitation request to AdminUserService an...
Full-screen view of a single user's profile, roles, and audit history within the tenant. Allows Org Admins to edit display name, role assign...
Paginated table view of all users within the current tenant, accessible to Org Admins and Global Admins (with active support grant). Display...
Admin Web Portal widget for viewing and changing a user's functional role. Renders a role selector with the current role pre-selected and su...
Contextual toolbar that appears in the Admin Web Portal user list when one or more user rows are checked. It surfaces available bulk operati...
Modal dialog that displays the full detail of a single activity record for administrator review. It allows the reviewer to approve or reject...
Admin portal page that presents a paginated, filterable list of all activities logged by peer mentors across the organization. Coordinators ...
Inline widget rendered on activity records that allows coordinators and administrators to raise, edit, or remove flags. Displays current fla...
A warning banner displayed in the admin portal when a potential duplicate activity record is detected. It surfaces similarity details and pr...
Admin-facing web page that displays the queue of pending expense reimbursement claims awaiting manual review. It renders each claim with exp...
Settings page in the Admin Web Portal for managing auto-approval rules. Administrators can create, edit, enable/disable, and delete threshol...
Administrator dashboard displaying aggregated expense activity across the organization. Renders summary statistics (approved totals, pending...
Renders aggregated team activity statistics for coordinators and organization administrators in the Admin Web Portal. Displays pre-aggregate...
Admin Web Portal page for generating and previewing Bufdir reports. Allows coordinators to select a reporting period, preview the structured...
A trigger button rendered on the Bufdir report preview page that initiates the export flow. It is enabled only when a valid snapshot exists ...
Visual report configuration interface for organization administrators. Allows users to select dimensions, apply date and category filters, a...
Centralized admin interface for configuring organization-wide settings including display name, contact information, locale, timezone, and su...
Admin portal page that lets Org Admins view and override the default display labels used across the platform. Presents a list of all configu...
Admin UI page that lists all toggleable platform modules for the current organization. Org Admins can enable or disable each module via togg...
Interactive tree view page for visualizing and managing nested organizational units. Administrators can create, edit, and reorder nodes in t...
Displays and manages membership records between users and organizational units in the hierarchy. Org Admins can view rosters, create or remo...
Administration page where Org Admins register an external portal endpoint and configure data domain authority. Allows scheduling or triggeri...
Admin Web Portal page that provides the full export workflow for organization administrators. Allows selecting date ranges, filtering by cos...
The main dashboard view rendered for Organization and Global Administrators showing the platform's current security posture. It displays met...
Administrative page that renders a filterable, paginated table of audit log entries for the current tenant. Provides filter controls for dat...
Administration page that displays all active sessions within the organization in a tabular layout. Each row shows device type, login timesta...
A self-contained section within the landing page that presents a visual overview of Meander's modular capabilities across the Mobile App and...
The root public-facing page that serves as the primary entry point for prospective organizations evaluating the Meander platform. It assembl...
Static marketing page listing all Meander platform capabilities organized by functional area. Communicates the modular, toggleable nature of...
The main page component for the Impact Calculator tool on the Meander Sales Website. It renders the input form and displays computed results...
Client-side widget that renders a side-by-side cost breakdown comparing manual reporting workflows against Meander's digitized approach. Acc...
The primary landing page component that renders the demo booking form on the sales website. It collects contact information and organization...
A static confirmation page rendered after a demo request form is successfully submitted. It acknowledges receipt of the request and communic...
GDPR-compliant cookie consent overlay displayed on first visit across the entire Sales Website. Lets visitors accept, reject, or customise a...
Static page rendering the full privacy policy text for the Meander Sales Website. Covers GDPR data-subject rights, retention periods, demo-b...
Static page displaying the full Terms of Service for Norse Digital Products and the Meander Sales Website. Renders all contractual sections ...
Full-page static document view rendering the GDPR Article 28 Data Processing Agreement. Presents all DPA sections in a readable, printable l...
Sticky sidebar or inline navigation widget listing all DPA sections by heading. Allows procurement reviewers to jump directly to clauses of ...
Overlay banner displayed on first visit that requests explicit prior consent before any non-essential cookies are placed. It provides accept...
Static page listing every cookie and tracking technology used by the Meander Sales Website. Each entry includes the cookie name, purpose, ty...
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.