Activity Type Form Screen
Component Detail
Description
Create and edit form screen in the admin portal for configuring a single activity type. Captures display name, metadata flags, Bufdir category mapping, and organisation-specific label overrides. Used for both creation and editing workflows.
activity-type-form-screen
Summaries
The Activity Type Form Screen is the configuration gateway that governs how every activity in the system is classified, reimbursed, and reported to grant authorities. By centralising metadata flag configuration — travel expense eligibility, reimbursement workflow triggers, report form requirements, and Bufdir grant reporting category mapping — this screen ensures compliance metadata is correct from the moment an activity type is created. Errors at this layer propagate into grant reports and financial reimbursement claims, making accuracy here directly tied to funding security and regulatory compliance. Supporting both creation and editing workflows in a single screen reduces maintenance overhead and keeps the admin experience consistent.
The Activity Type Form Screen is a medium-complexity frontend component that serves dual purposes — creation and editing — reducing the overall screen count and keeping scope manageable. It contains two parallelisable sub-components, the Bufdir Category Selector and the Metadata Flags Panel, which can be built independently and integrated into the parent form. Key scheduling risk is the Bufdir category data source: the selector cannot be fully tested without a stable list of valid categories, requiring early alignment with the data team. Validation rules for metadata flag combinations must be defined with business stakeholders before implementation begins to avoid rework.
Both entry paths — empty create and pre-populated edit — require dedicated test coverage.
The Activity Type Form Screen is a frontend component using the initWithActivityType(activityType?) pattern to support both create (undefined argument) and edit (populated argument) workflows from a single screen instance. It composes two sub-components: the Bufdir Category Selector, which exposes loadCategories(), onCategorySelected(category), and getSelectedCategory(); and the Metadata Flags Panel, which exposes initWithFlags(flags), onFlagChanged(flag, value), and getCurrentFlags(). The parent form orchestrates validateForm() before invoking the activity-type-service for persistence, then dispatches displaySaveSuccess() or displaySaveError(error) based on the async result. Inline validation feedback is rendered via displayValidationErrors(errors).
Flag combination validation logic should be shared between client and server to prevent divergence. The activity-type data model is persisted to Supabase.
Responsibilities
- Collect and validate activity type name and description
- Toggle metadata flags: travel expense eligible, report form required, reimbursement workflow trigger
- Select Bufdir reporting category from a controlled list
- Save or update the activity type to Supabase
Interfaces
initWithActivityType(activityType?)
onSaveTap()
onCancelTap()
validateForm()
onMetadataFlagToggle(flag, value)
onBufdirCategorySelect(category)
displayValidationErrors(errors)
displaySaveSuccess()
displaySaveError(error)
Relationships
Sub-Components (2)
Dropdown or modal picker component for mapping an activity type to the correct Bufdir reporting category. Displays human-readable category labels derived from Bufdir's grant reporting taxonomy.
- Present the list of valid Bufdir reporting categories
- Return the selected category identifier to the parent form
A grouped set of toggle switches rendered inside the activity type form for controlling the four metadata flags. Each flag has a label, an explanatory subtitle, and a boolean toggle. Validates that flag combinations are logically consistent.
- Render toggle controls for travel-expense eligibility, report-form requirement, reimbursement workflow, and Bufdir category
- Emit change events to the parent form on each toggle
Related Data Entities (1)
Data entities managed by this component