RAPIDA UI

Submission Confirmation

A full-width confirmation message shown after a damage report is submitted. Composes Icon, Badge, and Button atoms into a centered, reassuring layout. Provides immediate feedback that the report was recorded and its current sync status.

Preview — Synced Report

Your report was received. Your report is saved. It will send automatically when you're connected. You don't need to do anything else.

Thank you for helping your community.

Partial Synced

Report ID: RPT-2026-042

Submitted:

Preview — Pending Sync

Your report was received. Your report is saved. It will send automatically when you're connected. You don't need to do anything else.

Thank you for helping your community.

Complete Pending sync

Report ID: RPT-2026-043

Submitted:

Damage Levels

Your report was received. Your report is saved. It will send automatically when you're connected. You don't need to do anything else.

Thank you for helping your community.

Minimal Synced

Report ID: RPT-001

Your report was received. Your report is saved. It will send automatically when you're connected. You don't need to do anything else.

Thank you for helping your community.

Partial Pending sync

Report ID: RPT-002

Your report was received. Your report is saved. It will send automatically when you're connected. You don't need to do anything else.

Thank you for helping your community.

Complete Sync failed

Report ID: RPT-003

Accessibility

  • Uses role="status" and aria-live="polite" for screen reader announcement.
  • Check circle icon is decorative — the heading text "Report Submitted" carries the meaning.
  • Damage level and sync status are communicated via Badge atom text labels.
  • Action buttons ("Submit Another Report", "View Report") have clear, descriptive labels.

Trauma-Informed Design

  • Green background and check icon provide positive reinforcement — the reporter's effort was recorded.
  • Report ID gives a concrete reference number, building trust that the report exists in the system.
  • Sync status badge provides honest feedback about whether the report reached coordinators.
  • Two clear action buttons prevent the "now what?" feeling after form submission.