From a6912929a7f1353c19fb52789e182b46bc69a11f Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Thu, 9 Apr 2026 17:35:00 +0000
Subject: [PATCH] Establish basic pattern for compliance data flow

We can get location, images, and string data. It's the trifecta.
---
 ts/rmo/content/compliance/Address.vue  |   6 +-
 ts/rmo/content/compliance/Evidence.vue | 135 ++++++++++++-------------
 ts/rmo/view/Compliance.vue             |  15 ++-
 3 files changed, 81 insertions(+), 75 deletions(-)

diff --git a/ts/rmo/content/compliance/Address.vue b/ts/rmo/content/compliance/Address.vue
index 88ec8627..bf24a15c 100644
--- a/ts/rmo/content/compliance/Address.vue
+++ b/ts/rmo/content/compliance/Address.vue
@@ -26,8 +26,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import type { District } from "@/type/api";
 import { router } from "@/rmo/router";
+import type { District } from "@/type/api";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
 import AddressAndMapLocator from "@/rmo/components/AddressAndMapLocator.vue";
@@ -44,6 +44,8 @@ const props = defineProps<Props>();
 const locator = ref<Locator | null>(null);
 function doContinue() {
 	emit("doLocator", locator.value);
-	router.push("./concern");
+	// re-add when we have the concern data to show
+	// router.push("./concern");
+	router.push("./evidence");
 }
 </script>
diff --git a/ts/rmo/content/compliance/Evidence.vue b/ts/rmo/content/compliance/Evidence.vue
index 464f9a96..d42f01c2 100644
--- a/ts/rmo/content/compliance/Evidence.vue
+++ b/ts/rmo/content/compliance/Evidence.vue
@@ -107,92 +107,83 @@
 				</div>
 			</div>
 
-			<form
-				id="photo-form"
-				method="POST"
-				action="/compliance/photos"
-				enctype="multipart/form-data"
-			>
-				<!-- Upload Area -->
-				<div class="mb-4">
-					<label class="form-label fw-semibold">Photos</label>
-					<div
-						class="upload-area"
-						id="upload-area"
-						onclick="document.getElementById('file-input').click()"
-					>
-						<i
-							class="bi bi-camera-fill"
-							style="font-size: 2.5rem; color: #0d6efd"
-						></i>
-						<p class="mb-2 mt-2 fw-semibold">Tap to take photo or upload</p>
-						<p class="text-muted small mb-0">You can add multiple photos</p>
-					</div>
-					<input
-						type="file"
-						id="file-input"
-						name="photos"
-						accept="image/*"
-						capture="environment"
-						multiple
-					/>
-				</div>
+			<!-- Upload Area -->
+			<div class="mb-4">
+				<label class="form-label fw-semibold">Photos</label>
+				<ImageUpload v-model="images" />
+			</div>
 
-				<!-- Photo Previews -->
-				<div id="photo-previews" class="mb-4">
-					<!-- Thumbnails will be dynamically added here -->
-					<div class="row g-2" id="preview-container" style="display: none">
-						<!-- Example preview structure (hidden by default, shown when photos added):
-                                                <div class="col-4">
-                                                        <div class="photo-preview">
-                                                                <img src="..." alt="Preview">
-                                                                <button type="button" class="remove-btn" data-index="0">
-                                                                        <i class="bi bi-x-lg"></i>
-                                                                </button>
-                                                        </div>
-                                                </div>
-                                                -->
-					</div>
+			<!-- Photo Previews -->
+			<div id="photo-previews" class="mb-4">
+				<!-- Thumbnails will be dynamically added here -->
+				<div class="row g-2" id="preview-container" style="display: none">
+					<!-- Example preview structure (hidden by default, shown when photos added):
+											<div class="col-4">
+													<div class="photo-preview">
+															<img src="..." alt="Preview">
+															<button type="button" class="remove-btn" data-index="0">
+																	<i class="bi bi-x-lg"></i>
+															</button>
+													</div>
+											</div>
+											-->
 				</div>
+			</div>
 
-				<!-- Additional Comments -->
-				<div class="mb-4">
-					<label for="comments" class="form-label fw-semibold">
-						Additional Comments
-						<span class="text-muted fw-normal">(Optional)</span>
-					</label>
-					<textarea
-						class="form-control"
-						id="comments"
-						name="comments"
-						rows="4"
-						placeholder="Provide any additional information that may be helpful..."
-					></textarea>
-					<div class="form-text">
-						Example: "This standing water appeared after recent rain" or "I've
-						already taken steps to address this issue"
-					</div>
+			<!-- Additional Comments -->
+			<div class="mb-4">
+				<label for="comments" class="form-label fw-semibold">
+					Additional Comments
+					<span class="text-muted fw-normal">(Optional)</span>
+				</label>
+				<textarea
+					class="form-control"
+					id="comments"
+					name="comments"
+					placeholder="Provide any additional information that may be helpful..."
+					rows="4"
+					v-model="comments"
+				></textarea>
+				<div class="form-text">
+					Example: "This standing water appeared after recent rain" or "I've
+					already taken steps to address this issue"
 				</div>
+			</div>
 
-				<!-- Navigation Buttons -->
-				<div class="d-flex gap-2 mt-4">
-					<RouterLink to="./concern" class="btn btn-outline-secondary">
-						Back
-					</RouterLink>
-					<RouterLink to="permission" class="btn btn-primary flex-grow-1">
-						Continue
-					</RouterLink>
-				</div>
-			</form>
+			<!-- Navigation Buttons -->
+			<div class="d-flex gap-2 mt-4">
+				<RouterLink to="./address" class="btn btn-outline-secondary">
+					Back
+				</RouterLink>
+				<button class="btn btn-primary flex-grow-1" @click="doContinue">
+					Continue
+				</button>
+			</div>
 		</main>
 	</div>
 </template>
 <script setup lang="ts">
+import { ref } from "vue";
+
+import { router } from "@/rmo/router";
 import type { District } from "@/type/api";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
+import ImageUpload, { Image } from "@/components/ImageUpload.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
+interface Emits {
+	(e: "doComments", comments: string): void;
+	(e: "doImages", images: Image[]): void;
+}
 interface Props {
 	district: District;
 }
+const comments = ref<string>("");
+const emit = defineEmits<Emits>();
+const images = ref<Image[]>([]);
 const props = defineProps<Props>();
+function doContinue() {
+	emit("doComments", comments.value);
+	emit("doImages", images.value);
+	router.push("./permission");
+}
 </script>
diff --git a/ts/rmo/view/Compliance.vue b/ts/rmo/view/Compliance.vue
index c5d1dbf6..273efb71 100644
--- a/ts/rmo/view/Compliance.vue
+++ b/ts/rmo/view/Compliance.vue
@@ -18,7 +18,13 @@ body > .container-fluid {
 <template>
 	<template v-if="district">
 		<router-view v-slot="{ Component }">
-			<component :is="Component" :district="district" @doLocator="doLocator" />
+			<component
+				:is="Component"
+				:district="district"
+				@doComments="doComments"
+				@doImages="doImages"
+				@doLocator="doLocator"
+			/>
 		</router-view>
 	</template>
 	<template v-else>
@@ -30,6 +36,7 @@ body > .container-fluid {
 import { computed, onMounted, ref } from "vue";
 import { computedAsync } from "@vueuse/core";
 
+import type { Image } from "@/components/ImageUpload.vue";
 import { useStoreDistrict } from "@/rmo/store/district";
 import Intro from "@/rmo/content/compliance/Intro.vue";
 import type { District } from "@/type/api";
@@ -46,6 +53,12 @@ const district = computedAsync(async (): Promise<District | undefined> => {
 	const districts = await districtStore.list();
 	return districts.find((district: District) => district.slug == props.slug);
 });
+function doComments(comments: string) {
+	console.log("comments", comments);
+}
+function doImages(images: Image[]) {
+	console.log("images", images);
+}
 function doLocator(locator: Locator | null) {
 	console.log("locator", locator);
 }