@7365admin1/layer-common 4.107.0 → 4.109.0

package/components/Nfc/PatrolReport/DailyReportTab.vue

@@ -5,7 +5,7 @@
       :options="options"
       :show-time-filter="false"
       @update:model-value="$emit('update:filters', $event)"
-      @export="(type) => $emit('export', type)"
+      @export="(type) => $emit('export', type, csvSections())"
     />
     <div class="report-export">
     <v-divider :thickness="1" class="border-opacity-100" />
@@ -13,7 +13,7 @@
     <template v-if="report">
       <ReportLocationHeader :location="report.location" />
       <v-divider :thickness="1" class="border-opacity-100 mb-6" />
-      <SummaryReportTable :title="report.title" :rows="report.rows" />
+      <SummaryReportTable :title="report.title" :rows="report.rows" @select="openDetails" />
     </template>
 
 
@@ -31,6 +31,8 @@
     />
 
     <ReportEmptyState v-else-if="!loading" />
+
+    <PatrolRouteDetailsDialog v-model="detailsOpen" :row="selectedRow" />
     </div>
   </div>
 </template>
@@ -39,8 +41,12 @@
 import type {
   NFCPatrolReportFilterOptions,
   NFCPatrolReportFilters,
+  NFCPatrolReportSummaryRow,
 } from "../../../types/nfc-patrol-report";
 import { useNFCPatrolDailyReport } from "../../../composables/useNFCPatrolDailyReport";
+import { dailyReportCsv } from "../../../utils/nfc-patrol-report";
+import type { CsvSection } from "../../../utils/report-export";
+import PatrolRouteDetailsDialog from "./PatrolRouteDetailsDialog.vue";
 import ReportEmptyState from "./ReportEmptyState.vue";
 import ReportFilters from "./ReportFilters.vue";
 import ReportLocationHeader from "./ReportLocationHeader.vue";
@@ -55,7 +61,8 @@ const props = defineProps<{
 
 defineEmits<{
   "update:filters": [value: NFCPatrolReportFilters];
-  export: [type: "pdf" | "csv"];
+  /** `csv` is the report's tables, built from its data rather than read off the screen. */
+  export: [type: "pdf" | "csv", csv: CsvSection[]];
 }>();
 
 const { report, loading, notFound, failed, fetchReport } = useNFCPatrolDailyReport(
@@ -63,6 +70,20 @@ const { report, loading, notFound, failed, fetchReport } = useNFCPatrolDailyRepo
   props.site,
 );
 
+const { getFileUrl } = useFile();
+
+function csvSections() {
+  return report.value ? dailyReportCsv(report.value, getFileUrl) : [];
+}
+
+const detailsOpen = ref(false);
+const selectedRow = ref<NFCPatrolReportSummaryRow | null>(null);
+
+function openDetails(row: NFCPatrolReportSummaryRow) {
+  selectedRow.value = row;
+  detailsOpen.value = true;
+}
+
 watch(
   () => [props.filters.route, props.filters.date, props.active],
   () => {

package/components/Nfc/PatrolReport/MonthlyReportTab.vue

@@ -6,7 +6,7 @@
       :show-time-filter="false"
       :show-date-filter="false"
       @update:model-value="$emit('update:filters', $event)"
-      @export="(type) => $emit('export', type)"
+      @export="(type) => $emit('export', type, csvSections())"
     />
     <div class="report-export">
     <v-divider :thickness="1" class="border-opacity-100" />
@@ -18,6 +18,7 @@
       <MonthlyReportTable
         :title="report.title"
         :rows="report.rows"
+        @select="openMonth"
       />
     </template>
 
@@ -33,6 +34,13 @@
       title="No Monthly Report"
       message="No patrol log found for this route"
     />
+
+    <PatrolMonthDialog
+      v-model="monthOpen"
+      :title="monthTitle"
+      :route-name="monthRows[0]?.detail?.routeSummary.routeName ?? ''"
+      :rows="monthRows"
+    />
     </div>
   </div>
 </template>
@@ -41,9 +49,13 @@
 import type {
   NFCPatrolReportFilterOptions,
   NFCPatrolReportFilters,
+  NFCPatrolReportSummaryRow,
 } from "../../../types/nfc-patrol-report";
 
 import { useNFCPatrolMonthlyReport } from "../../../composables/useNFCPatrolMonthlyReport";
+import { monthlyReportCsv } from "../../../utils/nfc-patrol-report";
+import PatrolMonthDialog from "./PatrolMonthDialog.vue";
+import type { CsvSection } from "../../../utils/report-export";
 
 import ReportEmptyState from "./ReportEmptyState.vue";
 import ReportFilters from "./ReportFilters.vue";
@@ -59,12 +71,29 @@ const props = defineProps<{
 
 defineEmits<{
   "update:filters": [value: NFCPatrolReportFilters];
-  export: [type: "pdf" | "csv"];
+  /** `csv` is the report's tables, built from its data rather than read off the screen. */
+  export: [type: "pdf" | "csv", csv: CsvSection[]];
 }>();
 
-const { report, loading, notFound, failed, fetchReport } =
+const { report, loading, notFound, failed, fetchReport, monthRuns } =
   useNFCPatrolMonthlyReport(props.filters, props.site);
 
+// A month's row opens the list of that month's patrols.
+const monthOpen = ref(false);
+const monthTitle = ref("");
+const monthRows = shallowRef<NFCPatrolReportSummaryRow[]>([]);
+
+function openMonth(monthIndex: number) {
+  // The yearly report always covers the current year (useNFCPatrolMonthlyReport).
+  monthTitle.value = `${report.value?.rows[monthIndex]?.month ?? ""} ${new Date().getFullYear()}`;
+  monthRows.value = monthRuns(monthIndex);
+  monthOpen.value = true;
+}
+
+function csvSections() {
+  return report.value ? monthlyReportCsv(report.value) : [];
+}
+
 watch(
   () => [props.filters.route, props.active],
   () => {

package/components/Nfc/PatrolReport/MonthlyReportTable.vue

@@ -1,3 +1,8 @@
+<!--
+  The year, month by month. A month that had patrols opens its list of patrol
+  runs (`PatrolMonthDialog`), and each run there opens its checkpoints and
+  skip photos.
+-->
 <template>
   <div class="mt-6">
     <div class="screen-card-title mb-4">
@@ -17,8 +22,13 @@
 
       <tbody>
         <tr
-          v-for="row in rows"
+          v-for="(row, index) in rows"
           :key="row.month"
+          :class="{ 'monthly-table__row--link': row.runs }"
+          :tabindex="row.runs ? 0 : undefined"
+          :title="row.runs ? `View the patrols of ${row.month}` : undefined"
+          @click="row.runs && emit('select', index)"
+          @keydown.enter="row.runs && emit('select', index)"
         >
           <td>{{ row.month }}</td>
 
@@ -52,6 +62,11 @@ defineProps<{
   title: string;
   rows: NFCPatrolMonthlyReportRow[];
 }>();
+
+const emit = defineEmits<{
+  /** The month (0-11) whose patrols to list. */
+  select: [monthIndex: number];
+}>();
 </script>
 
 <style scoped>
@@ -68,4 +83,17 @@ thead th {
 tbody td {
   height: 56px;
 }
+
+.monthly-table__row--link {
+  cursor: pointer;
+}
+
+.monthly-table__row--link:hover > td {
+  background: var(--hover);
+}
+
+.monthly-table__row--link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
 </style>

package/components/Nfc/PatrolReport/PatrolActivityTable.vue

@@ -10,6 +10,11 @@
   tokens by way of `utils/theme.ts`, and `utils/status.ts` does not name
   "Skipped", so routing this through `StatusChip` would turn a red skipped
   checkpoint neutral. That is a design decision, not a conversion.
+
+  A skipped checkpoint's photo shows in its own column (`SkipPhotoThumb`); the
+  thumbnail opens the photo, the rest of the row still opens the remarks. The
+  PDF drops that column and draws the photo with its remarks in a row of its
+  own right under the checkpoint (`SkipPhotoDetails`), kept on the same page.
 -->
 <template>
   <div class="table-card table-card__shrink">
@@ -26,13 +31,14 @@
             <th>Signature</th>
             <th>Start - End Time</th>
             <th>Status</th>
+            <th data-pdf-hide>Skip Photo</th>
           </tr>
         </thead>
         <tbody>
+          <template v-for="(activity, index) in activities" :key="`${activity.id}-${index}`">
           <tr
-            v-for="activity in activities"
-            :key="activity.id"
             :class="{ 'cursor-pointer': activity.status === 'Skipped' }"
+            :data-pdf-keep-with-next="activity.status === 'Skipped' || undefined"
             @click="handleActivityClick(activity)"
           >
             <td>{{ activity.checkpoint }}</td>
@@ -44,6 +50,7 @@
                 :alt="`${activity.guardName || worker.one} signature`"
                 class="guard-signature"
                 contain
+                eager
               />
               <span v-else>-</span>
             </td>
@@ -62,7 +69,16 @@
                 </v-icon>
               </v-chip>
             </td>
+            <td data-pdf-hide>
+              <SkipPhotoThumb :activity="activity" />
+            </td>
+          </tr>
+          <tr v-if="activity.status === 'Skipped'" data-pdf-only>
+            <td colspan="5" class="activity-table__skip">
+              <SkipPhotoDetails :activities="[activity]" inline />
+            </td>
           </tr>
+          </template>
         </tbody>
       </v-table>
     </div>
@@ -75,6 +91,8 @@ import type {
   NFCPatrolActivity,
   NFCPatrolActivityStatus,
 } from "../../../types/nfc-patrol-report";
+import SkipPhotoDetails from "./SkipPhotoDetails.vue";
+import SkipPhotoThumb from "./SkipPhotoThumb.vue";
 
 const worker = useWorkerTerm();
 defineProps<{
@@ -104,6 +122,10 @@ function handleActivityClick(activity: NFCPatrolActivity) {
   border-bottom: 1px solid var(--border);
 }
 
+.activity-table__skip {
+  padding-top: 0 !important;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }

package/components/Nfc/PatrolReport/PatrolMonthDialog.vue

@@ -0,0 +1,195 @@
+<!--
+  Every patrol run of one month of the yearly report, opened from its month's
+  row: by day, then by scheduled start. A run opens the same Patrol Route
+  Details dialog as the daily summary - checkpoints, remarks, skip photos.
+
+  The month's totals sit in the title row so the list can be checked against
+  the yearly table it came from.
+
+  Ten runs a page, paged the way the app's tables are ("1-10 of 124" and the
+  two arrows). The month is already loaded, so paging asks the server nothing.
+-->
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    max-width="960"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <v-card class="screen-modal">
+      <div class="month-dialog__head">
+        <div>
+          <v-card-title class="pa-0">{{ title }}</v-card-title>
+          <p class="month-dialog__sub">
+            {{ routeName }} · {{ rows.length }} {{ rows.length === 1 ? "patrol" : "patrols" }} ·
+            {{ checked }} checked · {{ missed }} missed
+          </p>
+        </div>
+        <v-btn
+          class="screen-modal__close"
+          icon="mdi-close"
+          variant="flat"
+          aria-label="Close"
+          @click="close"
+        />
+      </div>
+
+      <div class="screen-modal__body px-6 pb-6">
+        <div class="table-card table-card__shrink">
+          <div class="month-dialog__pager">
+            <span class="table-card__range">{{ pageRange }}</span>
+            <v-btn
+              icon="mdi-chevron-left"
+              variant="text"
+              density="comfortable"
+              aria-label="Previous page"
+              :disabled="page <= 1"
+              @click="page--"
+            />
+            <v-btn
+              icon="mdi-chevron-right"
+              variant="text"
+              density="comfortable"
+              aria-label="Next page"
+              :disabled="page >= pages"
+              @click="page++"
+            />
+          </div>
+          <v-table>
+            <thead>
+              <tr>
+                <th>Date</th>
+                <th>Security Check Schedule</th>
+                <th>Security Personnel</th>
+                <th>Checked</th>
+                <th>Missed</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="row in pageRows"
+                :key="row.id"
+                class="month-dialog__row"
+                tabindex="0"
+                title="View patrol route details"
+                @click="open(row)"
+                @keydown.enter="open(row)"
+              >
+                <td class="text-no-wrap">{{ formatReportDate(row.date ?? "") }}</td>
+                <td>
+                  <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+                  {{ row.securityCheckSchedule }}
+                </td>
+                <td>{{ row.guardName || "-" }}</td>
+                <td>{{ row.checked }}</td>
+                <td>{{ row.missed }}</td>
+                <td>
+                  <span :class="row.status === 'Completed' ? 'text-success' : 'text-error'">
+                    {{ row.status }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+        </div>
+      </div>
+
+      <div class="screen-modal__footer">
+        <v-btn variant="outlined" class="screen-btn-ghost" @click="close">Close</v-btn>
+      </div>
+
+      <PatrolRouteDetailsDialog v-model="detailsOpen" :row="selected" />
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import type { NFCPatrolReportSummaryRow } from "../../../types/nfc-patrol-report";
+import { formatReportDate } from "../../../utils/report-export";
+import PatrolRouteDetailsDialog from "./PatrolRouteDetailsDialog.vue";
+
+const props = defineProps<{
+  modelValue: boolean;
+  /** "October 2026" */
+  title: string;
+  routeName: string;
+  rows: NFCPatrolReportSummaryRow[];
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+const PAGE_SIZE = 10;
+const page = ref(1);
+const pages = computed(() => Math.max(1, Math.ceil(props.rows.length / PAGE_SIZE)));
+const pageRows = computed(() => props.rows.slice((page.value - 1) * PAGE_SIZE, page.value * PAGE_SIZE));
+const pageRange = computed(() => {
+  const total = props.rows.length;
+  if (!total) return "0 of 0";
+  const from = (page.value - 1) * PAGE_SIZE + 1;
+  return `${from}-${Math.min(total, page.value * PAGE_SIZE)} of ${total}`;
+});
+
+// Another month opens on its first page.
+watch(
+  () => props.rows,
+  () => {
+    page.value = 1;
+  },
+);
+
+const checked = computed(() => props.rows.reduce((sum, row) => sum + row.checked, 0));
+const missed = computed(() => props.rows.reduce((sum, row) => sum + row.missed, 0));
+
+const detailsOpen = ref(false);
+const selected = ref<NFCPatrolReportSummaryRow | null>(null);
+
+function open(row: NFCPatrolReportSummaryRow) {
+  selected.value = row;
+  detailsOpen.value = true;
+}
+
+function close() {
+  detailsOpen.value = false;
+  emit("update:modelValue", false);
+}
+</script>
+
+<style scoped>
+.month-dialog__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 20px 24px;
+}
+
+.month-dialog__sub {
+  margin: 4px 0 0;
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+
+.month-dialog__pager {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.month-dialog__pager .table-card__range {
+  margin-right: 6px;
+}
+
+.month-dialog__row {
+  cursor: pointer;
+}
+
+.month-dialog__row:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+</style>

package/components/Nfc/PatrolReport/PatrolReportTab.vue

@@ -4,7 +4,7 @@
       :model-value="filters"
       :options="options"
       @update:model-value="$emit('update:filters', $event)"
-      @export="(type) => $emit('export', type)"
+      @export="(type) => $emit('export', type, csvSections())"
     />
     <div class="report-export">
     <v-divider :thickness="1" class="border-opacity-100" />
@@ -47,6 +47,8 @@ import type {
   NFCPatrolReportFilters,
 } from "../../../types/nfc-patrol-report";
 import { useNFCPatrolReport } from "../../../composables/useNFCPatrolReport";
+import { patrolReportCsv } from "../../../utils/nfc-patrol-report";
+import type { CsvSection } from "../../../utils/report-export";
 import PatrolActivityTable from "./PatrolActivityTable.vue";
 import PatrolRouteSummary from "./PatrolRouteSummary.vue";
 import RemarksDialog from "./RemarksDialog.vue";
@@ -63,7 +65,8 @@ const props = defineProps<{
 
 defineEmits<{
   "update:filters": [value: NFCPatrolReportFilters];
-  export: [type: "pdf" | "csv"];
+  /** `csv` is the report's tables, built from its data rather than read off the screen. */
+  export: [type: "pdf" | "csv", csv: CsvSection[]];
 }>();
 
 const {
@@ -77,6 +80,12 @@ const {
   openRemarksDialog,
 } = useNFCPatrolReport(props.filters, props.site);
 
+const { getFileUrl } = useFile();
+
+function csvSections() {
+  return report.value ? patrolReportCsv(report.value, getFileUrl) : [];
+}
+
 watch(
   () => [props.filters.route, props.filters.timeRange, props.filters.date, props.active],
   () => {