User Interface
114 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 rendered as a Flutter form widget with email and password fields, error display, and a forgot-passwor...
Flutter screen that accepts a user email address and triggers the reset-link email flow. Handles both the request step and the new-password ...
Presents the native biometric prompt (Face ID, Touch ID, or Android fingerprint/face) using Flutter's local_auth package on app resume or se...
Flutter screen that initiates and completes passkey registration for an existing authenticated user. Guides the user through device biometri...
Flutter widget shown on the login screen that offers passkey-based sign-in as an alternative to email/password. Triggers the FIDO2 assertion...
Full-screen informational view rendered when a Global Admin authenticates on the Mobile App. Displays a redirect message and a deep-link but...
A brief full-screen loading overlay shown while the app invalidates all organization-scoped Riverpod providers and re-fetches the module reg...
A bottom-sheet picker that lists all role-organization pairs available to the current user, sourced from user_organization_roles. Renders on...
Single-screen Flutter UI that lets a peer mentor record a completed interaction in two taps. Pre-fills today's date and a 30-minute duration...
Flutter multi-screen wizard flow that guides the peer mentor through sequential steps: contact selection, date, time, duration, and narrativ...
A microphone button widget that appears inside text fields (activity summary, notes) when the organization config flag for speech input is e...
Entry-point widget for selecting files to attach to an activity. Wraps the file_picker and image_picker Flutter plugins to expose gallery se...
Read-only display component shown in the activity detail card that renders server-generated thumbnails for all attachments linked to an acti...
Flutter screen rendered after a home-visit activity wizard completes, presenting a series of typed input widgets - radio groups for health s...
A reusable widget that presents a searchable, scrollable list of peer mentors managed by the current coordinator. It enforces org-boundary f...
The main screen for coordinators to register an activity on behalf of a peer mentor. It branches from the standard activity wizard by insert...
The primary screen for bulk activity registration, combining a shared activity metadata form (type, date, duration, summary) with a searchab...
Multi-step Flutter wizard for creating events, covering title, date, time, duration, location, and summary in sequential steps. Reuses share...
Paginated Flutter screen displaying upcoming and past events scoped to the user's organisation. Renders role-aware content - peer mentors se...
Single-tap sign-up and cancellation widget rendered on the event detail screen. Displays current participant count and the user's own regist...
Read-only summary screen shown after an expense is submitted, confirming the recorded details and displaying the approval status (auto-appro...
Primary mobile screen for logging travel expenses including kilometre allowances, toll fees, parking, and public transport. Uses fixed selec...
Flutter widget giving peer mentors access to device camera and photo library for capturing physical receipts. Displays a preview thumbnail a...
A validated picker widget that renders the organisation-configured catalogue of expense types (km allowance, toll, parking, public transport...
Flutter screen presenting a scrollable confidentiality declaration text, a mandatory confirmation checkbox that activates only after the use...
Role-specific paginated list screen displaying contacts scoped to the authenticated user's role. Peer mentors see only their assigned contac...
Collapsible Flutter widget rendered inside the contact detail screen, listing linked relatives with their role tags and providing add, edit,...
Flutter screen displaying a paginated, filterable list of notes scoped by contact or aggregated across all of a user's notes. Provides a deb...
Full-screen Flutter composing interface for creating and updating notes linked to a specific contact. Supports free-text entry with basic fo...
Flutter screen displaying a peer mentor's personal activity statistics including counts by type, total hours, and monthly trend charts. Rend...
Flutter screen displaying per-mentor activity rows, aggregate totals, and a time-period filter picker scoped to the coordinator's local asso...
Decrypts and renders the full assignment payload - name, address, and medical summary - after the peer mentor taps an inbox entry. Navigatin...
Displays the peer mentor's list of received assignments with real-time delivery and read status indicators. Each assignment card shows maske...
Inline widget rendered on the Assignment Inbox Screen showing the peer mentor's current completed-assignment count and the distance to the n...
Full-screen consent presentation that intercepts navigation to sensitive assignment content when a required consent is absent. Renders the c...
Flutter screen for creating and editing relative contact records linked to a primary contact. Presents a simplified mandatory field set (nam...
Modal or sheet UI for linking and unlinking a relative to a contact/case, accessible from both the Relative detail screen and Contact detail...
Flutter screen presenting a pause toggle control on the peer mentor's profile, guarded by a confirmation dialog before committing the status...
Flutter screen that guides a paused peer mentor through reactivation: a brief confirmation step verifying availability preferences, with inl...
Flutter widget rendered on the peer mentor home screen when a certification is within the warning window or has lapsed. Shows remaining days...
Full-screen interactive map displaying active peer mentor locations as clustered pins within the coordinator's organization scope. Provides ...
Reusable map pin widget representing a single peer mentor location with availability color coding and tap-to-profile navigation. Emits seman...
Multi-step BLoC-managed form covering title, description, date range, and location fields required to create a new workshop record. Follows ...
Displays upcoming and past karriereverksted sessions scoped to the current user's organization via a Riverpod StreamProvider. Renders sessio...
Shows full details for a single workshop session including title, date range, location, and coordinator. Surfaces embedded workshop notes, t...
Full-screen note editor scoped to a specific workshop session, supporting free-text multi-line input with a visible save-state indicator acc...
A modal bottom sheet that allows coordinators to search existing contacts and peer mentors within their organization and add them to the wor...
Displays the full roster of attendees for a specific career workshop session, showing each participant's name, role, and attendance status i...
Compact checklist component rendered inside the workshop detail screen, listing all to-do items scoped to a specific workshop. Supports inli...
Admin portal page for creating, editing, and activating notification scenario templates per organization. Provides a form-driven interface f...
Flutter screen accessible from the hamburger menu that presents grouped toggle switches for each notification category and channel preferenc...
Full-screen mobile UI for generating, displaying, and sharing a personalized invite link and QR code. Presents the QR code, shareable link t...
Reusable Flutter widget that renders a QR code image from an invite URL string using the qr_flutter package. Caches the rendered QR bitmap l...
Displays a scrollable, org-filtered list of available courses fetched from the REST API and cached locally via Drift for offline browsing. S...
Shows full metadata for a selected course - description, schedule, requirements, and certification linkage - alongside a primary enroll or w...
Read-only Flutter screen presenting the peer mentor's digital certificate including name, organization, certification type, issue date, expi...
Paginated card deck screen rendering each yearly metric (activities, hours, contacts, milestones) as an animated card following Spotify Wrap...
Flutter widget rendering the peer mentor's badge grid on profile and summary screens. Displays each badge in a uniform card with locked/unlo...
Interactive Flutter screen presenting a form where peer mentors enter activity parameters (activity type, hours contributed, number of conta...
A scrollable Flutter widget that presents conversation-starter cards organised by theme tags. Supports offline browsing via Drift and meets ...
Shared Flutter widget set including AppButton, AppTextField, and focus-indicator wrappers that enforce WCAG 2.2 AA requirements across every...
A Flutter SensitiveFieldWrapper widget that intercepts screen reader focus on sensitive content and presents an accessible modal warning bef...
The primary landing screen for coordinator and org admin users (org admins surface as coordinators on mobile), showing team summary widgets,...
The primary landing screen for peer mentor users, showing quick-access activity logging, recent contacts, and enabled module widgets assembl...
A slot-based container widget that areas register their home widgets against at startup. Queries the module registry at mount time, filters ...
Centralized settings screen accessible from the hamburger menu, presenting grouped preference controls for notifications, accessibility, and...
Displays an organization-configured list of external URLs with descriptive labels, grouped by category. Each entry opens in the device brows...
Static Flutter screen listing support contact options for the Meander platform and the user's organization. Renders email and phone entries ...
A read-only scrollable Flutter screen that renders the platform's privacy policy using a Markdown/rich-text widget. Accessible without authe...
A static Flutter screen displaying the platform's formal WCAG 2.2 AA compliance statement, structured into sections for conformance level, s...
Flutter screen presenting a searchable, role-filtered accordion list of frequently asked questions using ExpansionTile widgets. Organized by...
Reusable card component rendering a single KPI metric with its label, current value, trend arrow, and optional sparkline. Accepts a typed KP...
Server-rendered Next.js page displaying organization-scoped KPI cards for activity counts, user engagement, expense totals, and assignment c...
Scrollable chronological feed widget displaying recent activity registrations, expense submissions, and system events for organization admin...
Unified card component that renders a single polymorphic feed entry with type-specific icons (activity, expense, system event), timestamps, ...
Modal dialog for updating an existing user's profile fields (name, email) within the admin's organization. Loads current values on open and ...
Modal dialog allowing an org admin to enter a new user's email address and assign an initial role before sending a tokenized invitation emai...
Server-side-rendered Next.js page presenting a filterable data table of all users within the admin's organization. Each row shows inline sta...
Admin Web Portal page/dialog that lists users in the organization with their current role and provides controls to assign, change, or revoke...
Layered onto the existing user management table, this component adds a sticky checkbox column for row selection and an action toolbar that a...
Server-side-rendered Next.js page in the Admin Web Portal presenting a paginated, filterable list of submitted peer mentor activities. Suppo...
Expandable inline panel or modal drawer that displays the full details of a selected activity submission, including contact, date, duration,...
An inline panel or modal on the activity detail page in the Admin Web Portal that allows org admins and coordinators to flag an activity wit...
A dedicated Duplicates tab within the Activity Oversight admin interface that renders ranked pairs of suspected duplicate activities with si...
Slide-over or modal panel showing the complete context of a single expense claim - submitter profile, activity link, expense type, distance,...
Server-rendered Next.js page listing all pending expense claims for the admin's organization, scoped to status=pending_review. Displays subm...
Admin Web Portal page for creating, editing, enabling, and disabling per-organization auto-approval rules. Displays numeric threshold inputs...
Server-side rendered Next.js page in the Admin Web Portal that displays aggregated activity data for the authenticated organization's peer m...
Next.js server-rendered page restricted to Org Admin role that presents a period selector, preview table of aggregated figures, and a genera...
Embedded panel within the report builder that displays a structured breakdown of aggregated activity counts, durations, and contact categori...
A confirmation modal displayed before triggering the Bufdir report download. Shows the report period, key aggregate totals, and an explicit ...
Next.js client-side page that lets Org Admins and Coordinators select dimensions, filters (date range, activity type, contact category, peer...
Server-side-rendered Next.js page under /admin/settings that provides Org Admins with a centralized control panel for tenant configuration. ...
Admin Web Portal page (Next.js) that renders a configuration table of all overrideable term keys, showing each org's current override alongs...
Admin page in the Next.js portal under Organization Management that lists all functional areas as toggleable modules per tenant. Renders a d...
Next.js admin page rendering an interactive tree view of organizational nodes (national associations, regions, local chapters). Allows admin...
Next.js admin page providing a dual-view interface for managing organizational memberships: a user-centric view listing all org memberships ...
A declarative UI panel listing functional capabilities that may exist in both Meander and the external portal, allowing admins to mark which...
Next.js admin page under Organization Management allowing admins to declare the external portal URL, OAuth client credentials, scope mapping...
Next.js server-rendered admin portal page providing organization administrators with a centralized view of security events. Displays authent...
Server-side rendered admin page displaying the organization-scoped audit trail with cursor-based pagination. Provides filter controls for ac...
Admin page displaying active sessions scoped to the administrator's tenant, showing user identity, device info, and last-activity timestamps...
The primary public-facing page of the Meander sales website, presenting the platform value proposition, module-toggle model, and WCAG 2.2 AA...
Static footer for the sales website containing links to legal documents (Privacy Policy, Terms of Service, DPA, Cookie Policy), contact info...
Top navigation bar for the sales website providing links to key sections - Features, Calculator, Demo Booking, and Legal pages. Fully static...
A static, public-facing page on the Sales Website that presents Meander's full capability set organized by functional area (the canonical ar...
Side-by-side comparison table or card pair showing manual reporting costs versus Meander subscription cost and net saving. Accepts organizat...
A static HTML/React form on the Sales Website that collects contact and organizational details from prospective buyers requesting a product ...
Inline validation feedback component that displays field-level error messages and a global submission error banner when the form handler ret...
Static confirmation page rendered after a successful demo booking form submission. Displays a success heading, next-steps message, expected ...
Static page rendering the full GDPR privacy policy for the Meander Sales Website. Built as a statically generated page (Next.js or Astro) au...
Static page on the Sales Website presenting the platform's contractual terms governing organization use. Displays versioned content with a v...
Static page rendering the full GDPR Article 28 Data Processing Agreement on the Sales Website. Displays effective date, version number, and ...
Static page on the Sales Website that discloses all cookies and tracking technologies deployed on the site, categorized by type (strictly ne...
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.