Auto-Approval Config UI
Component Detail
User Interface
medium complexity
frontend
0
Dependencies
0
Dependents
0
Entities
0
Integrations
Description
Admin Web Portal page for creating, editing, enabling, and disabling per-organization auto-approval rules. Displays numeric threshold inputs per rule dimension (max distance km, max amount NOK, receipt requirement threshold) alongside a live preview showing how many recent claims would match the current settings.
auto-approval-config-ui
Sources & reasoning
The UI is required so org admins can configure threshold-based rules per organization without code changes. The live preview differentiates this from a plain CRUD form - admins need to see the impact of a rule before activating it, as described in the implementation notes.
No source references — this artifact was included based on reasoning alone (see above).
Responsibilities
- Render rule list with enable/disable toggles per rule
- Provide form inputs for threshold dimensions per expense type
- Show live preview count of recent claims matching current rule configuration
- Validate input ranges and prevent invalid combinations before save
- Reflect rule activation status changes immediately after save
Interfaces
renderRuleList(rules: ApprovalRule[]): void
openRuleEditor(ruleId?: string): void
saveRule(draft: ApprovalRuleDraft): Promise<void>
toggleRuleEnabled(ruleId: string, enabled: boolean): Promise<void>
deleteRule(ruleId: string): Promise<void>
fetchLivePreview(draft: ApprovalRuleDraft): Promise<PreviewResult>