From 882636de8f2751f612ef977dba6f0f91a9e85f0b Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Thu, 9 Apr 2026 01:15:13 +0000
Subject: [PATCH] Add nuisance report detail to status by ID page

---
 ts/rmo/components/NuisanceReportDetail.vue | 59 ++++++++++++++++++++++
 ts/rmo/components/ReportDetailEntry.vue    | 17 +++++++
 ts/rmo/view/StatusByID.vue                 |  5 ++
 3 files changed, 81 insertions(+)
 create mode 100644 ts/rmo/components/NuisanceReportDetail.vue
 create mode 100644 ts/rmo/components/ReportDetailEntry.vue

diff --git a/ts/rmo/components/NuisanceReportDetail.vue b/ts/rmo/components/NuisanceReportDetail.vue
new file mode 100644
index 00000000..4b97d6ce
--- /dev/null
+++ b/ts/rmo/components/NuisanceReportDetail.vue
@@ -0,0 +1,59 @@
+<template>
+	<ReportDetailEntry
+		label="Active early morning (5a-8a)?"
+		:value="nuisance.time_of_day_early.toString()"
+	/>
+	<ReportDetailEntry
+		label="Active daytime (5a-8a)?"
+		:value="nuisance.time_of_day_day.toString()"
+	/>
+	<ReportDetailEntry
+		label="Active evening (5p-9p)?"
+		:value="nuisance.time_of_day_evening.toString()"
+	/>
+	<ReportDetailEntry
+		label="Active night (9p-5a)?"
+		:value="nuisance.time_of_day_night.toString()"
+	/>
+	<ReportDetailEntry label="Duration" :value="nuisance.duration" />
+	<ReportDetailEntry
+		label="Active in backyard?"
+		:value="nuisance.is_location_backyard.toString()"
+	/>
+	<ReportDetailEntry
+		label="Active in frontyard?"
+		:value="nuisance.is_location_frontyard.toString()"
+	/>
+	<ReportDetailEntry
+		label="Active in garden?"
+		:value="nuisance.is_location_garden.toString()"
+	/>
+	<ReportDetailEntry
+		label="Active in other?"
+		:value="nuisance.is_location_other.toString()"
+	/>
+	<ReportDetailEntry
+		label="Active in pool?"
+		:value="nuisance.is_location_pool.toString()"
+	/>
+	<ReportDetailEntry
+		label="Stagnant water?"
+		:value="nuisance.source_stagnant.toString()"
+	/>
+	<ReportDetailEntry
+		label="container?"
+		:value="nuisance.source_container.toString()"
+	/>
+	<ReportDetailEntry
+		label="Sprinklers and/or gutters?"
+		:value="nuisance.source_gutter.toString()"
+	/>
+</template>
+<script setup lang="ts">
+import type { Nuisance } from "@/type/api";
+import ReportDetailEntry from "@/rmo/components/ReportDetailEntry.vue";
+interface Props {
+	nuisance: Nuisance;
+}
+const props = defineProps<Props>();
+</script>
diff --git a/ts/rmo/components/ReportDetailEntry.vue b/ts/rmo/components/ReportDetailEntry.vue
new file mode 100644
index 00000000..17af837f
--- /dev/null
+++ b/ts/rmo/components/ReportDetailEntry.vue
@@ -0,0 +1,17 @@
+<template>
+	<div class="row">
+		<div class="col-md-4">
+			<strong>{{ label }}</strong>
+		</div>
+		<div class="col-md-6">
+			<span>{{ value }}</span>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+interface Props {
+	label: string;
+	value: string;
+}
+const props = defineProps<Props>();
+</script>
diff --git a/ts/rmo/view/StatusByID.vue b/ts/rmo/view/StatusByID.vue
index 75ba66bc..f3ba1fe4 100644
--- a/ts/rmo/view/StatusByID.vue
+++ b/ts/rmo/view/StatusByID.vue
@@ -90,6 +90,10 @@
 						</span>
 					</div>
 				</div>
+				<NuisanceReportDetail
+					:nuisance="report.nuisance"
+					v-if="report.nuisance"
+				/>
 			</div>
 		</div>
 
@@ -140,6 +144,7 @@ import { computedAsync } from "@vueuse/core";
 import Header from "@/rmo/components/Header.vue";
 import HeaderDistrict from "@/components/HeaderDistrict.vue";
 import MapLocatorDisplay from "@/components/MapLocatorDisplay.vue";
+import NuisanceReportDetail from "@/rmo/components/NuisanceReportDetail.vue";
 import { useStoreDistrict } from "@/rmo/store/district";
 import { useStorePublicReport } from "@/store/publicreport";
 import type { Marker } from "@/types";