Duplicate Comparison Panel
Component Detail
Description
Reusable widget that renders a structured side-by-side or stacked comparison of two activity records, highlighting differing fields. Used inside the duplicate warning bottom sheet and the coordinator deduplication queue detail view.
duplicate-comparison-panel
Summaries
The Duplicate Comparison Panel gives users and coordinators an immediate, at-a-glance understanding of exactly how two activity records differ, eliminating guesswork when deciding whether a duplicate is genuine or a valid separate entry. By visually highlighting conflicting fields — such as date, activity type, or session duration — the panel empowers peer mentors to make confident, informed decisions without needing to navigate away from their current workflow. For coordinators managing the deduplication queue, the panel reduces resolution time per record, allowing higher throughput when cleaning flagged data. This reusable component appears in both the submission-time warning sheet and the back-office coordinator view, meaning its quality directly affects user experience at two critical touchpoints in the duplicate management workflow, multiplying its value across the product.
The Duplicate Comparison Panel is a medium-complexity, reusable UI widget with no service dependencies, making it a parallelisable work item that can be built and tested independently before the larger flows that consume it are ready. It is consumed by two parent components — the Duplicate Warning Bottom Sheet and the Deduplication Queue Screen — so any breaking interface change will require coordinated updates across both. The build(existingActivity, pendingActivity) interface must align with the Activity data model schema agreed by the backend team. Field highlighting logic via highlightDiff(fieldName) needs visual design sign-off before implementation to ensure consistency with the broader design system.
Testing should cover identical records (no diff), fully differing records, and partial matches. Accessibility testing for colour contrast on highlighted fields is mandatory, especially for users with colour vision deficiencies.
The Duplicate Comparison Panel is a pure UI widget with three interface methods: build(existingActivity, pendingActivity) which initialises the component with two Activity objects, highlightDiff(fieldName) which programmatically marks a specific field as conflicting, and getConflictingFields() which returns the set of field names where the two records differ. Internally, it computes field-level diffs on construction using shallow equality across the Activity model's comparable fields (peer_mentor_id, activity_type_id, date, duration, notes, location). The layout is either side-by-side (tablet/desktop) or stacked (mobile), responsive to available width. Differing fields are rendered with a distinct highlight token from the design system rather than hardcoded colour values, ensuring theme compatibility.
Since this component has no service dependencies, it is fully unit-testable with mock Activity objects. Consider memoising the diff computation if the panel is re-rendered frequently within a scrollable coordinator queue list.
Responsibilities
- Render two activity records with field-level layout
- Highlight fields that differ between the two records
- Display peer mentor name, activity type, date, and submission context
Interfaces
build(existingActivity, pendingActivity)
highlightDiff(fieldName)
getConflictingFields()
Relationships
Dependents (2)
Components that depend on this component