From 5cdbc4eb539703b6024eb19c0569d06a52b137f4 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Wed, 22 Apr 2026 14:49:04 +0000
Subject: [PATCH] Fix links in the compliance process

---
 ts/rmo/content/compliance/Address.vue    | 10 +++++--
 ts/rmo/content/compliance/Contact.vue    | 10 +++++--
 ts/rmo/content/compliance/Evidence.vue   | 10 +++++--
 ts/rmo/content/compliance/Permission.vue | 10 +++++--
 ts/rmo/content/compliance/Process.vue    | 13 +++++++--
 ts/rmo/content/compliance/Submit.vue     | 10 +++++--
 ts/rmo/route/config.ts                   | 16 +++++-----
 ts/rmo/route/name.ts                     |  8 +++++
 ts/rmo/route/use.ts                      | 37 +++++++++++++++++++-----
 9 files changed, 96 insertions(+), 28 deletions(-)

diff --git a/ts/rmo/content/compliance/Address.vue b/ts/rmo/content/compliance/Address.vue
index cf8c48c8..c5aebeeb 100644
--- a/ts/rmo/content/compliance/Address.vue
+++ b/ts/rmo/content/compliance/Address.vue
@@ -16,7 +16,10 @@
 			/>
 
 			<div class="d-flex gap-2 mt-4">
-				<RouterLink class="btn btn-outline-secondary" to="../compliance">
+				<RouterLink
+					class="btn btn-outline-secondary"
+					:to="routes.ComplianceIntro(props.publicID)"
+				>
 					Back
 				</RouterLink>
 				<button class="btn btn-primary flex-grow-1" @click="doContinue">
@@ -35,6 +38,7 @@ import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
 import AddressAndMapLocator from "@/rmo/components/AddressAndMapLocator.vue";
 import { Camera } from "@/type/map";
+import { useRoutes } from "@/rmo/route/use";
 
 interface Emits {
 	(e: "doAddress"): void;
@@ -43,6 +47,7 @@ interface Emits {
 interface Props {
 	district: District;
 	modelValue: PublicReportCompliance;
+	publicID: string;
 }
 const emit = defineEmits<Emits>();
 const error = ref<string>("");
@@ -56,11 +61,12 @@ const initialCamera = computed((): Camera | undefined => {
 	}
 	return undefined;
 });
+const routes = useRoutes();
 function doContinue() {
 	emit("update:modelValue", props.modelValue);
 	emit("doAddress");
 	// re-add when we have the concern data to show
 	// router.push("./concern");
-	router.push(`/district/${props.district.slug}/compliance/evidence`);
+	router.push(routes.ComplianceEvidence(props.publicID));
 }
 </script>
diff --git a/ts/rmo/content/compliance/Contact.vue b/ts/rmo/content/compliance/Contact.vue
index 4209bfe7..c0631a79 100644
--- a/ts/rmo/content/compliance/Contact.vue
+++ b/ts/rmo/content/compliance/Contact.vue
@@ -119,7 +119,10 @@
 
 			<!-- Navigation Buttons -->
 			<div class="d-flex gap-2 mt-4">
-				<RouterLink class="btn btn-outline-secondary" to="./permission">
+				<RouterLink
+					class="btn btn-outline-secondary"
+					:to="routes.CompliancePermission(publicID)"
+				>
 					Back
 				</RouterLink>
 				<button class="btn btn-primary flex-grow-1" @click="doContinue()">
@@ -136,6 +139,7 @@ import { router } from "@/rmo/route/config";
 import type { Contact, District, PublicReport } from "@/type/api";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
+import { useRoutes } from "@/rmo/route/use";
 
 interface Emits {
 	(e: "doContact"): void;
@@ -144,12 +148,14 @@ interface Emits {
 interface Props {
 	district: District;
 	modelValue: PublicReport;
+	publicID: string;
 }
 const emit = defineEmits<Emits>();
 const props = defineProps<Props>();
+const routes = useRoutes();
 function doContinue() {
 	emit("update:modelValue", props.modelValue);
 	emit("doContact");
-	router.push("./process");
+	router.push(routes.ComplianceProcess(props.publicID));
 }
 </script>
diff --git a/ts/rmo/content/compliance/Evidence.vue b/ts/rmo/content/compliance/Evidence.vue
index 59286dcd..f9c1e58d 100644
--- a/ts/rmo/content/compliance/Evidence.vue
+++ b/ts/rmo/content/compliance/Evidence.vue
@@ -147,7 +147,10 @@
 
 			<!-- Navigation Buttons -->
 			<div class="d-flex gap-2 mt-4">
-				<RouterLink to="./address" class="btn btn-outline-secondary">
+				<RouterLink
+					class="btn btn-outline-secondary"
+					:to="routes.ComplianceAddress(publicID)"
+				>
 					Back
 				</RouterLink>
 				<button class="btn btn-primary flex-grow-1" @click="doContinue">
@@ -165,6 +168,7 @@ import type { District, PublicReportCompliance } from "@/type/api";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ImageUpload, { Image } from "@/components/ImageUpload.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
+import { useRoutes } from "@/rmo/route/use";
 
 interface Emits {
 	(e: "update:modelValue", value: PublicReportCompliance): void;
@@ -173,13 +177,15 @@ interface Emits {
 interface Props {
 	district: District;
 	modelValue: PublicReportCompliance;
+	publicID: string;
 }
 const emit = defineEmits<Emits>();
 const images = ref<Image[]>([]);
 const props = defineProps<Props>();
+const routes = useRoutes();
 function doContinue() {
 	emit("update:modelValue", props.modelValue);
 	emit("doEvidence", images.value);
-	router.push("./permission");
+	router.push(routes.CompliancePermission(props.publicID));
 }
 </script>
diff --git a/ts/rmo/content/compliance/Permission.vue b/ts/rmo/content/compliance/Permission.vue
index 043b2a2e..1cccab17 100644
--- a/ts/rmo/content/compliance/Permission.vue
+++ b/ts/rmo/content/compliance/Permission.vue
@@ -268,7 +268,10 @@
 
 			<!-- Navigation Buttons -->
 			<div class="d-flex gap-2 mt-4">
-				<RouterLink class="btn btn-outline-secondary" to="./evidence">
+				<RouterLink
+					class="btn btn-outline-secondary"
+					:to="routes.ComplianceEvidence(publicID)"
+				>
 					Back
 				</RouterLink>
 				<button class="btn btn-primary flex-grow-1" @click="doContinue">
@@ -283,6 +286,7 @@ import { onMounted, ref } from "vue";
 import { router } from "@/rmo/route/config";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
+import { useRoutes } from "@/rmo/route/use";
 import {
 	type District,
 	PermissionType,
@@ -296,12 +300,14 @@ interface Emits {
 interface Props {
 	district: District;
 	modelValue: PublicReportCompliance;
+	publicID: string;
 }
 const emit = defineEmits<Emits>();
 const props = defineProps<Props>();
+const routes = useRoutes();
 function doContinue() {
 	emit("update:modelValue", props.modelValue);
 	emit("doPermission");
-	router.push("./contact");
+	router.push(routes.ComplianceContact(props.publicID));
 }
 </script>
diff --git a/ts/rmo/content/compliance/Process.vue b/ts/rmo/content/compliance/Process.vue
index 67b59ede..b840424f 100644
--- a/ts/rmo/content/compliance/Process.vue
+++ b/ts/rmo/content/compliance/Process.vue
@@ -136,10 +136,16 @@
 
 			<!-- Navigation Buttons -->
 			<div class="d-flex gap-2 mt-4">
-				<RouterLink to="contact" class="btn btn-outline-secondary">
+				<RouterLink
+					class="btn btn-outline-secondary"
+					:to="routes.ComplianceContact(publicID)"
+				>
 					Back
 				</RouterLink>
-				<RouterLink to="submit" class="btn btn-primary flex-grow-1">
+				<RouterLink
+					class="btn btn-primary flex-grow-1"
+					:to="routes.ComplianceSubmit(publicID)"
+				>
 					Continue
 				</RouterLink>
 			</div>
@@ -150,8 +156,11 @@
 import type { District } from "@/type/api";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
+import { useRoutes } from "@/rmo/route/use";
 interface Props {
 	district: District;
+	publicID: string;
 }
 const props = defineProps<Props>();
+const routes = useRoutes();
 </script>
diff --git a/ts/rmo/content/compliance/Submit.vue b/ts/rmo/content/compliance/Submit.vue
index eb051303..402e7d71 100644
--- a/ts/rmo/content/compliance/Submit.vue
+++ b/ts/rmo/content/compliance/Submit.vue
@@ -230,7 +230,10 @@
 
 			<!-- Submit Button -->
 			<div class="d-flex gap-2 mt-4">
-				<RouterLink class="btn btn-outline-secondary" to="process">
+				<RouterLink
+					class="btn btn-outline-secondary"
+					:to="routes.ComplianceProcess(publicID)"
+				>
 					Back
 				</RouterLink>
 				<button class="btn btn-primary flex-grow-1" @click="doContinue()">
@@ -252,6 +255,7 @@
 import { router } from "@/rmo/route/config";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
+import { useRoutes } from "@/rmo/route/use";
 import {
 	type District,
 	PermissionType,
@@ -264,11 +268,13 @@ interface Emits {
 interface Props {
 	modelValue: PublicReportCompliance;
 	district: District;
+	publicID: string;
 }
 const emit = defineEmits<Emits>();
 const props = defineProps<Props>();
+const routes = useRoutes();
 function doContinue() {
 	emit("doSubmit");
-	router.push("./complete");
+	router.push(routes.ComplianceComplete(props.publicID));
 }
 </script>
diff --git a/ts/rmo/route/config.ts b/ts/rmo/route/config.ts
index 02de2a1a..b69ea134 100644
--- a/ts/rmo/route/config.ts
+++ b/ts/rmo/route/config.ts
@@ -46,7 +46,7 @@ const routes: RouteRecordRaw[] = [
 		children: [
 			{
 				component: ComplianceIntro,
-				name: "ComplianceIntro",
+				name: ROUTE_NAMES.COMPLIANCE_INTRO,
 				path: "",
 			},
 			{
@@ -56,37 +56,37 @@ const routes: RouteRecordRaw[] = [
 			},
 			{
 				component: ComplianceComplete,
-				name: "ComplianceComplete",
+				name: ROUTE_NAMES.COMPLIANCE_COMPLETE,
 				path: "complete",
 			},
 			{
 				component: ComplianceConcern,
-				name: "ComplianceConcern",
+				name: ROUTE_NAMES.COMPLIANCE_CONCERN,
 				path: "concern",
 			},
 			{
 				component: ComplianceContact,
-				name: "ComplianceContact",
+				name: ROUTE_NAMES.COMPLIANCE_CONTACT,
 				path: "contact",
 			},
 			{
 				component: ComplianceEvidence,
-				name: "ComplianceEvidence",
+				name: ROUTE_NAMES.COMPLIANCE_EVIDENCE,
 				path: "evidence",
 			},
 			{
 				component: CompliancePermission,
-				name: "CompliancePermission",
+				name: ROUTE_NAMES.COMPLIANCE_PERMISSION,
 				path: "permission",
 			},
 			{
 				component: ComplianceProcess,
-				name: "ComplianceProcess",
+				name: ROUTE_NAMES.COMPLIANCE_PROCESS,
 				path: "process",
 			},
 			{
 				component: ComplianceSubmit,
-				name: "ComplianceSubmit",
+				name: ROUTE_NAMES.COMPLIANCE_SUBMIT,
 				path: "submit",
 			},
 		],
diff --git a/ts/rmo/route/name.ts b/ts/rmo/route/name.ts
index 5b1121cd..5d47b068 100644
--- a/ts/rmo/route/name.ts
+++ b/ts/rmo/route/name.ts
@@ -1,5 +1,13 @@
 export const ROUTE_NAMES = {
 	COMPLIANCE_ADDRESS: "compliance-address",
+	COMPLIANCE_COMPLETE: "compliance-complete",
+	COMPLIANCE_CONCERN: "compliance-concern",
+	COMPLIANCE_CONTACT: "compliance-contact",
+	COMPLIANCE_EVIDENCE: "compliance-evidence",
+	COMPLIANCE_INTRO: "compliance-intro",
+	COMPLIANCE_PERMISSION: "compliance-permission",
+	COMPLIANCE_PROCESS: "compliance-process",
+	COMPLIANCE_SUBMIT: "compliance-submit",
 	REVIEW_SITE: "review-site",
 } as const;
 
diff --git a/ts/rmo/route/use.ts b/ts/rmo/route/use.ts
index 4c995c58..c2c9bdd1 100644
--- a/ts/rmo/route/use.ts
+++ b/ts/rmo/route/use.ts
@@ -1,6 +1,16 @@
 import { RouteLocationRaw } from "vue-router";
 import { ROUTE_NAMES } from "@/rmo/route/name";
 
+function complianceRoute(name: string) {
+	return (publicID: string): RouteLocationRaw => {
+		return {
+			name: name,
+			params: {
+				public_id: publicID,
+			},
+		};
+	};
+}
 export function useRoutes() {
 	/*
 	const RMOComplianceAddress = (publicID: string): RouteLocationRaw => {
@@ -10,15 +20,26 @@ export function useRoutes() {
 		}
 	}
    */
-	const ComplianceAddress = (publicID: string): RouteLocationRaw => {
-		return {
-			name: ROUTE_NAMES.COMPLIANCE_ADDRESS,
-			params: {
-				public_id: publicID,
-			},
-		};
-	};
+	const ComplianceAddress = complianceRoute(ROUTE_NAMES.COMPLIANCE_ADDRESS);
+	const ComplianceComplete = complianceRoute(ROUTE_NAMES.COMPLIANCE_COMPLETE);
+	const ComplianceConcern = complianceRoute(ROUTE_NAMES.COMPLIANCE_CONCERN);
+	const ComplianceContact = complianceRoute(ROUTE_NAMES.COMPLIANCE_CONTACT);
+	const ComplianceEvidence = complianceRoute(ROUTE_NAMES.COMPLIANCE_EVIDENCE);
+	const ComplianceIntro = complianceRoute(ROUTE_NAMES.COMPLIANCE_INTRO);
+	const CompliancePermission = complianceRoute(
+		ROUTE_NAMES.COMPLIANCE_PERMISSION,
+	);
+	const ComplianceProcess = complianceRoute(ROUTE_NAMES.COMPLIANCE_PROCESS);
+	const ComplianceSubmit = complianceRoute(ROUTE_NAMES.COMPLIANCE_SUBMIT);
 	return {
 		ComplianceAddress,
+		ComplianceComplete,
+		ComplianceConcern,
+		ComplianceContact,
+		ComplianceEvidence,
+		ComplianceIntro,
+		CompliancePermission,
+		ComplianceProcess,
+		ComplianceSubmit,
 	};
 }