Split out ComplianceDistrict view for creating new compliance reports

The idea here is that we'll make compliance reports two different ways,
The first is if the user navigates to /district/:slug/compliance, the
second if they open a QR code from a mailer. In both cases we create the
report then feed them into a flow for updating the data on that report.

ts/rmo/view/ComplianceDistrict.vue

@@ -0,0 +1,72 @@
+<template>
+	<div class="container">
+		<div class="row min-vh-100 align-items-center justify-content-center">
+			<div class="col-auto text-center">
+				<div class="spinner-border text-primary" role="status">
+					<span class="visually-hidden">Loading...</span>
+				</div>
+				<p class="mt-3 text-muted">Loading report details...</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { computedAsync } from "@vueuse/core";
+
+import type { Image } from "@/components/ImageUpload.vue";
+import { useStoreDistrict } from "@/rmo/store/district";
+import { useStoreLocal } from "@/store/local";
+import { useStorePublicReport } from "@/store/publicreport";
+import Intro from "@/rmo/content/compliance/Intro.vue";
+import LoadingOverlay from "@/components/LoadingOverlay.vue";
+import {
+	type ComplianceUpdate,
+	type District,
+	PublicReport,
+	PublicReportCompliance,
+	PublicReportComplianceOptions,
+} from "@/type/api";
+import { Contact, Address, PermissionType } from "@/type/api";
+
+interface Props {
+	slug: string;
+}
+
+const districtStore = useStoreDistrict();
+
+const props = defineProps<Props>();
+const router = useRouter();
+const storeLocal = useStoreLocal();
+const storePublicReport = useStorePublicReport();
+async function doMounted() {
+	const client_id = storeLocal.getClientID();
+	const report_uri = storeLocal.getExistingComplianceReportURI();
+	if (report_uri) {
+		const report = await storePublicReport.byURI(report_uri);
+		if (report && report.public_id) {
+			router.replace(`/compliance/${report.public_id}`);
+			return;
+		}
+	}
+	const districts = await districtStore.list();
+	const district = districts.find(
+		(district: District) => district.slug == props.slug,
+	);
+	if (!district) {
+		console.error("failed to find matching district", props.slug, districts);
+		return;
+	}
+	const report = await storePublicReport.create({
+		client_id: client_id,
+		district: district.uri,
+	});
+	storeLocal.setExistingComplianceReportURI(report.uri);
+	router.replace(`/compliance/${report.public_id}`);
+}
+onMounted(() => {
+	doMounted();
+});
+</script>