From 8fcd926d43f1c796169ac338a9e8cf7ae61896e1 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Tue, 28 Apr 2026 05:33:53 +0000
Subject: [PATCH] Format report IDs with hyphens

---
 ts/rmo/view/RegisterNotificationsComplete.vue | 6 ++++--
 ts/rmo/view/ReportSubmitted.vue               | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/ts/rmo/view/RegisterNotificationsComplete.vue b/ts/rmo/view/RegisterNotificationsComplete.vue
index 29899c4b..4be10d61 100644
--- a/ts/rmo/view/RegisterNotificationsComplete.vue
+++ b/ts/rmo/view/RegisterNotificationsComplete.vue
@@ -49,8 +49,8 @@
 								report updates.
 							</p>
 							<div class="alert alert-secondary py-3 mt-3">
-								<strong>Report ID:</strong>
-								<span class="fs-5">{{ id }}</span>
+								<strong>Report ID: </strong>
+								<span class="fs-5">{{ formatReportID(id) }}</span>
 							</div>
 						</div>
 
@@ -170,6 +170,8 @@
 	</div>
 </template>
 <script setup lang="ts">
+import { formatReportID } from "@/format";
+
 interface Props {
 	id: string;
 }
diff --git a/ts/rmo/view/ReportSubmitted.vue b/ts/rmo/view/ReportSubmitted.vue
index bfe797ea..e157154b 100644
--- a/ts/rmo/view/ReportSubmitted.vue
+++ b/ts/rmo/view/ReportSubmitted.vue
@@ -30,8 +30,8 @@
 					<div class="card-body p-4">
 						<div class="text-center mb-4">
 							<div class="alert alert-info py-3">
-								<strong>Your Report ID:</strong>
-								<span class="fs-4 fw-bold">{{ id }}</span>
+								<strong>Your Report ID: </strong>
+								<span class="fs-4 fw-bold">{{ formatReportID(id) }}</span>
 							</div>
 						</div>
 
@@ -275,6 +275,8 @@
 import { ref, onMounted } from "vue";
 import { computedAsync } from "@vueuse/core";
 import { useRouter } from "vue-router";
+
+import { formatReportID } from "@/format";
 import { useRoutes } from "@/rmo/route/use";
 import { useStoreDistrict } from "@/rmo/store/district";
 import { useStorePublicReport } from "@/store/publicreport";