Duplicate Warning Bottom Sheet
Component Detail
Description
Non-blocking modal bottom sheet that surfaces when a potential duplicate activity is detected during submission. Presents the side-by-side comparison of the existing record and the current entry, along with three action buttons: Proceed, Merge, and Cancel.
duplicate-warning-bottom-sheet
Summaries
The Duplicate Warning Bottom Sheet protects data integrity across the organisation by intercepting likely duplicate activity submissions before they are committed to the database. When a peer mentor accidentally submits the same session twice — a common occurrence in high-volume programmes — this component presents a clear, non-disruptive prompt that allows them to review, merge, or confirm the entry. This directly reduces coordinator overhead spent manually reviewing and cleaning duplicate records, saving administrative time and improving reporting accuracy. Clean data translates to more reliable programme metrics, stronger grant reporting, and better-informed decisions by leadership.
By surfacing the issue at the point of submission rather than after the fact, the product turns a data quality problem into a seamless, self-correcting user experience that builds confidence in the system.
The Duplicate Warning Bottom Sheet has medium complexity due to its coordination across three concerns: UI state management, communication with the detection service, and integration with the activity wizard flow. It depends on the Duplicate Comparison Panel and the Duplicate Detection Service, meaning those two components must be stable before this sheet can be fully integrated and tested end-to-end. The three-button action model (Proceed, Merge, Cancel) requires clear UX sign-off on what each action triggers downstream — particularly the Merge path, which may involve additional backend logic. Loading state management via setLoading must be tested for edge cases like slow network conditions.
Mobile layout testing across screen sizes is required to ensure the bottom sheet does not obscure critical content. Plan for at least one round of user testing with peer mentors to validate that the warning copy is clear and actionable.
The Duplicate Warning Bottom Sheet is a stateful UI component targeting both frontend web and mobile (Flutter or React Native) execution contexts. It exposes show(existingActivity, pendingActivity) to receive the two activity records from the wizard flow and renders the Duplicate Comparison Panel as an embedded child widget. The three action callbacks — onProceed, onMerge, onCancel — are wired to the parent wizard's state machine, which determines the next navigation step. setLoading(bool) drives a loading overlay during async operations triggered by Merge or Proceed.
The dismiss() method handles back-gesture and outside-tap dismissal, which should be treated as a Cancel. Dependency on Duplicate Detection Service is indirect — the service runs before the sheet is shown, passing candidates as constructor arguments. State should not be held inside this component beyond the current session; all persistence is handled upstream. Ensure accessibility: focus trap within the sheet, screen reader labels on all three action buttons.
Responsibilities
- Render bottom sheet overlay triggered by duplicate detection result
- Display action buttons for Proceed, Merge, and Cancel decisions
- Communicate user decision back to the activity wizard flow
Interfaces
show(existingActivity, pendingActivity)
onProceed()
onMerge()
onCancel()
dismiss()
setLoading(bool)
Relationships
Dependencies (2)
Components this component depends on