From 060d0dd95f68ea0ef6a93d46c9995c89c1000d8f Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Tue, 28 Apr 2026 15:22:20 +0000
Subject: [PATCH] Add compliance card detail information display

---
 ts/components/PublicReportCard.vue           | 10 +++
 ts/components/PublicReportCardCompliance.vue | 91 ++++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 ts/components/PublicReportCardCompliance.vue

diff --git a/ts/components/PublicReportCard.vue b/ts/components/PublicReportCard.vue
index e375e21e..2fb518c4 100644
--- a/ts/components/PublicReportCard.vue
+++ b/ts/components/PublicReportCard.vue
@@ -16,6 +16,10 @@
 		<div class="d-flex justify-content-between align-items-start mb-3">
 			<div>
 				<h5 class="mb-1">
+					<span v-if="report.type === 'compliance'">
+						<i class="bi bi-postcard icon-compliance"></i>
+						Compliance Report
+					</span>
 					<span v-if="report.type === 'nuisance'">
 						<i class="bi bi-mosquito icon-nuisance"></i>
 						Nuisance Report
@@ -88,6 +92,10 @@
 			</div>
 		</div>
 
+		<div v-if="report instanceof PublicReportCompliance">
+			<PublicReportCardCompliance :report="report" />
+		</div>
+
 		<div v-if="report instanceof PublicReportNuisance">
 			<PublicReportCardNuisance :report="report" />
 		</div>
@@ -136,11 +144,13 @@
 import { computed } from "vue";
 import MapMultipoint from "@/components/MapMultipoint.vue";
 import TimeRelative from "@/components/TimeRelative.vue";
+import PublicReportCardCompliance from "@/components/PublicReportCardCompliance.vue";
 import PublicReportCardNuisance from "@/components/PublicReportCardNuisance.vue";
 import PublicReportCardWater from "@/components/PublicReportCardWater.vue";
 import { formatAddress } from "@/format";
 import {
 	PublicReport,
+	PublicReportCompliance,
 	PublicReportNuisance,
 	PublicReportWater,
 } from "@/type/api";
diff --git a/ts/components/PublicReportCardCompliance.vue b/ts/components/PublicReportCardCompliance.vue
new file mode 100644
index 00000000..17841f74
--- /dev/null
+++ b/ts/components/PublicReportCardCompliance.vue
@@ -0,0 +1,91 @@
+<template>
+	<div class="card-header bg-danger bg-opacity-10">
+		<i class="bi bi-exclamation-triangle"></i> Compliance Details
+	</div>
+	<div class="card-body">
+		<div class="row g-3">
+			<div class="col-md-12">
+				<label
+					class="form-label small mb-0"
+					v-if="report.permission_type == 'granted'"
+				>
+					<i class="bi bi-check"></i> Access granted for tech to enter even if
+					not at home.
+				</label>
+				<label
+					class="form-label small mb-0"
+					v-else-if="report.permission_type == 'with-owner'"
+				>
+					<i class="bi bi-info-square"></i> Access granted for tech, but owner
+					must be present
+				</label>
+				<label
+					class="form-label small mb-0"
+					v-else-if="report.permission_type == 'denied'"
+				>
+					<i class="bi bi-exclamation-triangle"></i> Access denied
+				</label>
+				<label
+					class="form-label small mb-0"
+					v-else-if="report.permission_type == 'unselected'"
+				>
+					<i class="bi bi-question"></i> No access information provided
+				</label>
+			</div>
+			<div class="col-md-6" v-if="report.wants_scheduled">
+				<label class="form-label text-muted small mb-0">
+					<i class="bi bi-clock"></i> Owner requests a scheduled visit
+				</label>
+			</div>
+			<div class="col-md-6">
+				<label class="form-label text-muted small mb-0">
+					<i class="bi bi-key"></i> Access Instructions
+				</label>
+				<div class="p-2 bg-light rounded">
+					{{ report.access_instructions || "none" }}
+				</div>
+			</div>
+			<div class="col-md-6">
+				<label class="form-label text-muted small mb-0">
+					<i class="bi bi-clock"></i> Availability Notes
+				</label>
+				<div class="p-2 bg-light rounded">
+					{{ report.availability_notes || "none" }}
+				</div>
+			</div>
+			<div class="col-md-6">
+				<label class="form-label text-muted small mb-0">
+					<i class="bi bi-pencil-square"></i> Comments
+				</label>
+				<div class="p-2 bg-light rounded">
+					{{ report.comments || "none" }}
+				</div>
+			</div>
+			<div class="col-md-6">
+				<label class="form-label text-muted small mb-0">
+					<i class="bi bi-key"></i> Gate Code
+				</label>
+				<div class="p-2 bg-light rounded">
+					{{ report.gate_code || "none" }}
+				</div>
+			</div>
+			<div class="col-md-6">
+				<label class="form-label text-muted small mb-0" v-if="report.has_dog">
+					<i class="bi bi-dog"></i> Has Dog
+				</label>
+			</div>
+			<div class="col-md-6">
+				<label class="form-label text-muted small mb-0" v-if="report.has_dog">
+					<i class="bi bi-dog"></i> Has Dog
+				</label>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { PublicReportCompliance } from "@/type/api";
+interface Props {
+	report: PublicReportCompliance;
+}
+const props = defineProps<Props>();
+</script>