From b4527fba8be407339ae3466e48a93ef4507873f9 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Wed, 22 Apr 2026 14:31:05 +0000
Subject: [PATCH] Develop patterns for creating links outside router

---
 ts/AppSync.vue                              |  2 +-
 ts/rmo/App.vue                              |  2 +-
 ts/rmo/content/compliance/Address.vue       |  2 +-
 ts/rmo/content/compliance/Contact.vue       |  2 +-
 ts/rmo/content/compliance/Evidence.vue      |  2 +-
 ts/rmo/content/compliance/Intro.vue         |  8 ++++++-
 ts/rmo/content/compliance/Permission.vue    |  2 +-
 ts/rmo/content/compliance/Submit.vue        |  2 +-
 ts/rmo/{router.ts => route/config.ts}       |  5 ++++-
 ts/rmo/route/name.ts                        |  6 ++++++
 ts/rmo/route/use.ts                         | 24 +++++++++++++++++++++
 ts/rmo/view/Compliance.vue                  |  1 +
 ts/{router.ts => route/config.ts}           |  4 +++-
 ts/route/name.ts                            |  6 ++++++
 ts/route/use.ts                             | 22 +++++++++++++++++++
 ts/view/Authenticated.vue                   |  2 +-
 ts/view/Home.vue                            |  2 +-
 ts/view/Signin.vue                          |  2 +-
 ts/view/Signout.vue                         |  2 +-
 ts/view/configuration/UploadPoolCustom.vue  |  2 +-
 ts/view/configuration/UploadPoolFlyover.vue |  2 +-
 ts/view/review/Mailer.vue                   |  9 +++-----
 vite/rmo/main.ts                            |  2 +-
 vite/sync/main.ts                           |  2 +-
 24 files changed, 91 insertions(+), 24 deletions(-)
 rename ts/rmo/{router.ts => route/config.ts} (97%)
 create mode 100644 ts/rmo/route/name.ts
 create mode 100644 ts/rmo/route/use.ts
 rename ts/{router.ts => route/config.ts} (98%)
 create mode 100644 ts/route/name.ts
 create mode 100644 ts/route/use.ts

diff --git a/ts/AppSync.vue b/ts/AppSync.vue
index 6471ee92..df26484c 100644
--- a/ts/AppSync.vue
+++ b/ts/AppSync.vue
@@ -6,7 +6,7 @@
 import * as Sentry from "@sentry/vue";
 import { onMounted } from "vue";
 import { apiClient } from "@/client";
-import router from "@/router";
+import router from "@/route/config";
 
 import { SSEManager, type SSEMessage } from "@/SSEManager";
 
diff --git a/ts/rmo/App.vue b/ts/rmo/App.vue
index 4890db87..de40f605 100644
--- a/ts/rmo/App.vue
+++ b/ts/rmo/App.vue
@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 //import { useHead } from "@vueuse/head";
-import { router } from "@/rmo/router";
+import { router } from "@/rmo/route/config";
 import { useStoreDistrict } from "@/rmo/store/district";
 import type { District } from "@/type/api";
 
diff --git a/ts/rmo/content/compliance/Address.vue b/ts/rmo/content/compliance/Address.vue
index 7444cecd..cf8c48c8 100644
--- a/ts/rmo/content/compliance/Address.vue
+++ b/ts/rmo/content/compliance/Address.vue
@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 
-import { router } from "@/rmo/router";
+import { router } from "@/rmo/route/config";
 import type { District, PublicReportCompliance } from "@/type/api";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
diff --git a/ts/rmo/content/compliance/Contact.vue b/ts/rmo/content/compliance/Contact.vue
index 6aab9f61..4209bfe7 100644
--- a/ts/rmo/content/compliance/Contact.vue
+++ b/ts/rmo/content/compliance/Contact.vue
@@ -132,7 +132,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import { router } from "@/rmo/router";
+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";
diff --git a/ts/rmo/content/compliance/Evidence.vue b/ts/rmo/content/compliance/Evidence.vue
index 648dcdaa..59286dcd 100644
--- a/ts/rmo/content/compliance/Evidence.vue
+++ b/ts/rmo/content/compliance/Evidence.vue
@@ -160,7 +160,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import { router } from "@/rmo/router";
+import { router } from "@/rmo/route/config";
 import type { District, PublicReportCompliance } from "@/type/api";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ImageUpload, { Image } from "@/components/ImageUpload.vue";
diff --git a/ts/rmo/content/compliance/Intro.vue b/ts/rmo/content/compliance/Intro.vue
index 64a9b7a0..110e466e 100644
--- a/ts/rmo/content/compliance/Intro.vue
+++ b/ts/rmo/content/compliance/Intro.vue
@@ -20,7 +20,10 @@
 			</div>
 
 			<div class="d-grid mt-4">
-				<RouterLink class="btn btn-primary btn-lg" to="./compliance/address">
+				<RouterLink
+					class="btn btn-primary btn-lg"
+					:to="routes.ComplianceAddress(props.publicID)"
+				>
 					Get Started</RouterLink
 				>
 			</div>
@@ -31,8 +34,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/Permission.vue b/ts/rmo/content/compliance/Permission.vue
index 53447e98..043b2a2e 100644
--- a/ts/rmo/content/compliance/Permission.vue
+++ b/ts/rmo/content/compliance/Permission.vue
@@ -280,7 +280,7 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { router } from "@/rmo/router";
+import { router } from "@/rmo/route/config";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
 import {
diff --git a/ts/rmo/content/compliance/Submit.vue b/ts/rmo/content/compliance/Submit.vue
index b770d282..eb051303 100644
--- a/ts/rmo/content/compliance/Submit.vue
+++ b/ts/rmo/content/compliance/Submit.vue
@@ -249,7 +249,7 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { router } from "@/rmo/router";
+import { router } from "@/rmo/route/config";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
 import {
diff --git a/ts/rmo/router.ts b/ts/rmo/route/config.ts
similarity index 97%
rename from ts/rmo/router.ts
rename to ts/rmo/route/config.ts
index f5ccb2e5..02de2a1a 100644
--- a/ts/rmo/router.ts
+++ b/ts/rmo/route/config.ts
@@ -22,6 +22,9 @@ import StatusByID from "@/rmo/view/StatusByID.vue";
 import StatusDistrict from "@/rmo/view/district/Status.vue";
 import Water from "@/rmo/view/Water.vue";
 import WaterDistrict from "@/rmo/view/district/Water.vue";
+
+import { ROUTE_NAMES } from "@/rmo/route/name";
+
 const routes: RouteRecordRaw[] = [
 	{
 		path: "/",
@@ -48,7 +51,7 @@ const routes: RouteRecordRaw[] = [
 			},
 			{
 				component: ComplianceAddress,
-				name: "ComplianceAddress",
+				name: ROUTE_NAMES.COMPLIANCE_ADDRESS,
 				path: "address",
 			},
 			{
diff --git a/ts/rmo/route/name.ts b/ts/rmo/route/name.ts
new file mode 100644
index 00000000..5b1121cd
--- /dev/null
+++ b/ts/rmo/route/name.ts
@@ -0,0 +1,6 @@
+export const ROUTE_NAMES = {
+	COMPLIANCE_ADDRESS: "compliance-address",
+	REVIEW_SITE: "review-site",
+} as const;
+
+export type RouteName = (typeof ROUTE_NAMES)[keyof typeof ROUTE_NAMES];
diff --git a/ts/rmo/route/use.ts b/ts/rmo/route/use.ts
new file mode 100644
index 00000000..4c995c58
--- /dev/null
+++ b/ts/rmo/route/use.ts
@@ -0,0 +1,24 @@
+import { RouteLocationRaw } from "vue-router";
+import { ROUTE_NAMES } from "@/rmo/route/name";
+
+export function useRoutes() {
+	/*
+	const RMOComplianceAddress = (publicID: string): RouteLocationRaw => {
+		return {
+			name: ROUTE_NAMES.COMPLIANCE_ADDRESS,
+			...(publicID && { query: { publicID: publicID } })
+		}
+	}
+   */
+	const ComplianceAddress = (publicID: string): RouteLocationRaw => {
+		return {
+			name: ROUTE_NAMES.COMPLIANCE_ADDRESS,
+			params: {
+				public_id: publicID,
+			},
+		};
+	};
+	return {
+		ComplianceAddress,
+	};
+}
diff --git a/ts/rmo/view/Compliance.vue b/ts/rmo/view/Compliance.vue
index 76735032..755eb150 100644
--- a/ts/rmo/view/Compliance.vue
+++ b/ts/rmo/view/Compliance.vue
@@ -31,6 +31,7 @@ body > .container-fluid {
 					@doEvidence="doEvidence"
 					@doPermission="doPermission"
 					@doSubmit="doSubmit"
+					:publicID="report?.public_id ?? 'unset'"
 					v-model="report"
 				/>
 			</template>
diff --git a/ts/router.ts b/ts/route/config.ts
similarity index 98%
rename from ts/router.ts
rename to ts/route/config.ts
index e32338ef..70ca2825 100644
--- a/ts/router.ts
+++ b/ts/route/config.ts
@@ -35,6 +35,8 @@ import Signup from "@/view/Signup.vue";
 import Sudo from "@/view/Sudo.vue";
 import { apiClient } from "@/client";
 
+import { ROUTE_NAMES } from "@/route/name";
+
 const routes: RouteRecordRaw[] = [
 	{
 		path: "/",
@@ -166,7 +168,7 @@ const routes: RouteRecordRaw[] = [
 			},
 			{
 				path: "/_/review/site",
-				name: "Site Review",
+				name: ROUTE_NAMES.REVIEW_SITE,
 				component: ReviewSite,
 			},
 			{
diff --git a/ts/route/name.ts b/ts/route/name.ts
new file mode 100644
index 00000000..5b1121cd
--- /dev/null
+++ b/ts/route/name.ts
@@ -0,0 +1,6 @@
+export const ROUTE_NAMES = {
+	COMPLIANCE_ADDRESS: "compliance-address",
+	REVIEW_SITE: "review-site",
+} as const;
+
+export type RouteName = (typeof ROUTE_NAMES)[keyof typeof ROUTE_NAMES];
diff --git a/ts/route/use.ts b/ts/route/use.ts
new file mode 100644
index 00000000..38eeee2f
--- /dev/null
+++ b/ts/route/use.ts
@@ -0,0 +1,22 @@
+import { RouteLocationRaw } from "vue-router";
+import { ROUTE_NAMES } from "@/route/name";
+
+export function useRoutes() {
+	/*
+	const RMOComplianceAddress = (publicID: string): RouteLocationRaw => {
+		return {
+			name: ROUTE_NAMES.COMPLIANCE_ADDRESS,
+			...(publicID && { query: { publicID: publicID } })
+		}
+	}
+   */
+	const ReviewSite = (siteID: string): RouteLocationRaw => {
+		return {
+			name: ROUTE_NAMES.REVIEW_SITE,
+			query: { site: siteID },
+		};
+	};
+	return {
+		ReviewSite,
+	};
+}
diff --git a/ts/view/Authenticated.vue b/ts/view/Authenticated.vue
index 7f3afb3e..fb9555ba 100644
--- a/ts/view/Authenticated.vue
+++ b/ts/view/Authenticated.vue
@@ -24,7 +24,7 @@ import { onMounted } from "vue";
 import Sidebar from "@/components/layout/Sidebar.vue";
 import MainContent from "@/components/layout/MainContent.vue";
 import { Session } from "@/type/api";
-import { router } from "@/router";
+import { router } from "@/route/config";
 import { useSessionStore } from "@/store/session";
 
 const session = useSessionStore();
diff --git a/ts/view/Home.vue b/ts/view/Home.vue
index 66a02b8d..c804b836 100644
--- a/ts/view/Home.vue
+++ b/ts/view/Home.vue
@@ -5,7 +5,7 @@
 import { onMounted } from "vue";
 import { useSessionStore } from "@/store/session";
 import { Session } from "@/type/api";
-import { router } from "@/router";
+import { router } from "@/route/config";
 
 const session = useSessionStore();
 onMounted(() => {
diff --git a/ts/view/Signin.vue b/ts/view/Signin.vue
index fbf3a39f..66e2f45a 100644
--- a/ts/view/Signin.vue
+++ b/ts/view/Signin.vue
@@ -112,7 +112,7 @@
 import { ref } from "vue";
 import { apiClient } from "@/client";
 import ButtonLoading from "@/components/common/ButtonLoading.vue";
-import { router } from "@/router";
+import { router } from "@/route/config";
 
 const error = ref<string>("");
 const loading = ref<boolean>(false);
diff --git a/ts/view/Signout.vue b/ts/view/Signout.vue
index 40db7dde..d8a231e8 100644
--- a/ts/view/Signout.vue
+++ b/ts/view/Signout.vue
@@ -4,7 +4,7 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
 import { apiClient } from "@/client";
-import { router } from "@/router";
+import { router } from "@/route/config";
 import { useSessionStore } from "@/store/session";
 
 const session = useSessionStore();
diff --git a/ts/view/configuration/UploadPoolCustom.vue b/ts/view/configuration/UploadPoolCustom.vue
index c5977bef..b1b3d871 100644
--- a/ts/view/configuration/UploadPoolCustom.vue
+++ b/ts/view/configuration/UploadPoolCustom.vue
@@ -35,7 +35,7 @@ import CSVUpload from "@/components/CSVUpload.vue";
 import TableUploadRequirements, {
 	UploadRequirement,
 } from "@/components/TableUploadRequirements.vue";
-import { router } from "@/router";
+import { router } from "@/route/config";
 
 const requirements = ref<UploadRequirement[]>([
 	{
diff --git a/ts/view/configuration/UploadPoolFlyover.vue b/ts/view/configuration/UploadPoolFlyover.vue
index 478b18e4..6e14d1e3 100644
--- a/ts/view/configuration/UploadPoolFlyover.vue
+++ b/ts/view/configuration/UploadPoolFlyover.vue
@@ -35,7 +35,7 @@ import CSVUpload from "@/components/CSVUpload.vue";
 import TableUploadRequirements, {
 	UploadRequirement,
 } from "@/components/TableUploadRequirements.vue";
-import { router } from "@/router";
+import { router } from "@/route/config";
 
 const requirements = ref<UploadRequirement[]>([
 	{
diff --git a/ts/view/review/Mailer.vue b/ts/view/review/Mailer.vue
index 7e294a58..9caf8bc2 100644
--- a/ts/view/review/Mailer.vue
+++ b/ts/view/review/Mailer.vue
@@ -44,12 +44,7 @@
 											</span>
 										</td>
 										<td>
-											<RouterLink
-												:to="{
-													name: 'Site Review',
-													query: { site: mailer.site_id },
-												}"
-											>
+											<RouterLink :to="routes.ReviewSite(mailer.site_id)">
 												{{ formatAddressShort(mailer.address) }}
 											</RouterLink>
 										</td>
@@ -87,6 +82,7 @@ import { computedAsync } from "@vueuse/core";
 import { formatDate, formatAddressShort } from "@/format";
 import { useStoreMailer } from "@/store/mailer";
 import { Mailer, MailerStatus } from "@/type/api";
+import { useRoutes } from "@/route/use";
 
 const formatStatus = (status: MailerStatus): string => {
 	return status.charAt(0).toUpperCase() + status.slice(1);
@@ -105,4 +101,5 @@ const storeMailer = useStoreMailer();
 const mailers = computedAsync(async (): Promise<Mailer[]> => {
 	return await storeMailer.list();
 });
+const routes = useRoutes();
 </script>
diff --git a/vite/rmo/main.ts b/vite/rmo/main.ts
index c1613d6d..8228e536 100644
--- a/vite/rmo/main.ts
+++ b/vite/rmo/main.ts
@@ -4,7 +4,7 @@ import { createPinia } from "pinia";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import "@/gen/custom-icons.scss";
 import "@/style/rmo.scss";
-import router from "@/rmo/router";
+import router from "@/rmo/route/config";
 import App from "@/rmo/App.vue";
 
 const app = createApp(App);
diff --git a/vite/sync/main.ts b/vite/sync/main.ts
index bb3fd960..69834dea 100644
--- a/vite/sync/main.ts
+++ b/vite/sync/main.ts
@@ -1,7 +1,7 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import App from "@/AppSync.vue";
-import router from "@/router";
+import router from "@/route/config";
 import * as config from "@/config";
 
 import "maplibre-gl/dist/maplibre-gl.css";