@7365admin1/layer-common 4.108.0 → 4.109.0

package/components/Nfc/PatrolReport/PatrolRouteDetailsDialog.vue

@@ -0,0 +1,214 @@
+<!--
+  One run of a patrol route, opened from a row of the daily Patrol Route
+  Summary: who patrolled it, schedule against actual, and every checkpoint.
+
+  A skipped checkpoint shows the guard's remarks and, when one was attached,
+  the photo taken at the skip (`SkipPhotoThumb`), which opens full size.
+
+  Status colours follow `PatrolActivityTable`: `success`/`error` are the
+  design's `--ok`/`--err` by way of `utils/theme.ts`. A checkpoint still
+  `Pending` (a run not finished) stays neutral rather than red.
+-->
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    max-width="960"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <v-card v-if="row?.detail" class="screen-modal">
+      <div class="route-details__head">
+        <div>
+          <v-card-title class="pa-0">Patrol Route Details</v-card-title>
+          <p class="route-details__sub">
+            {{ row.detail.routeSummary.routeName || "-" }} ·
+            <template v-if="row.date">{{ formatReportDate(row.date) }} · </template>
+            {{ row.detail.routeSummary.schedule.start }} - {{ row.detail.routeSummary.schedule.end }}
+          </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">
+        <dl class="route-details__facts">
+          <div>
+            <dt>Security Personnel</dt>
+            <dd>{{ row.guardName || "-" }}</dd>
+          </div>
+          <div>
+            <dt>Signature</dt>
+            <dd>
+              <v-img
+                v-if="row.guardSignatureFileId"
+                :src="getFileUrl(row.guardSignatureFileId)"
+                :alt="`${row.guardName || worker.one} signature`"
+                class="route-details__signature"
+                contain
+              />
+              <span v-else>-</span>
+            </dd>
+          </div>
+          <div>
+            <dt>Checked</dt>
+            <dd>{{ row.checked }}</dd>
+          </div>
+          <div>
+            <dt>Missed</dt>
+            <dd>{{ row.missed }}</dd>
+          </div>
+          <div>
+            <dt>Status</dt>
+            <dd :class="row.status === 'Completed' ? 'text-success' : 'text-error'">
+              {{ row.status }}
+            </dd>
+          </div>
+        </dl>
+
+        <PatrolRouteSummary :summary="row.detail.routeSummary" />
+
+        <div class="table-card table-card__shrink">
+          <div class="route-details__table-head">
+            <span class="screen-card-title">Checkpoints</span>
+          </div>
+
+          <v-table>
+            <thead>
+              <tr>
+                <th>Checkpoint</th>
+                <th>Start - End Time</th>
+                <th>Status</th>
+                <th>Remarks</th>
+                <th>Skip Photo</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(activity, index) in row.detail.activities"
+                :key="`${activity.id}-${index}`"
+              >
+                <td>{{ activity.checkpoint }}</td>
+                <td class="text-no-wrap">
+                  <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+                  {{ activity.startTime }}
+                  <v-icon size="small" class="mx-2">mdi-arrow-right</v-icon>
+                  <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
+                  {{ activity.endTime }}
+                </td>
+                <td>
+                  <v-chip :color="statusColor(activity.status)" size="small" variant="flat">
+                    {{ activity.status }}
+                    <v-icon v-if="activity.status === 'Skipped'" size="small" class="ml-1">
+                      mdi-flag
+                    </v-icon>
+                  </v-chip>
+                </td>
+                <td class="route-details__remarks">
+                  <template v-if="activity.status === 'Skipped'">
+                    {{ activity.remarks || "No remarks provided" }}
+                  </template>
+                  <template v-else>-</template>
+                </td>
+                <td>
+                  <SkipPhotoThumb :activity="activity" :size="64" />
+                </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>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import useWorkerTerm from "../../../composables/useWorkerTerm";
+import type { NFCPatrolReportSummaryRow } from "../../../types/nfc-patrol-report";
+import { formatReportDate } from "../../../utils/report-export";
+import PatrolRouteSummary from "./PatrolRouteSummary.vue";
+import SkipPhotoThumb from "./SkipPhotoThumb.vue";
+
+defineProps<{
+  modelValue: boolean;
+  row: NFCPatrolReportSummaryRow | null;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+const worker = useWorkerTerm();
+const { getFileUrl } = useFile();
+
+function statusColor(status: string) {
+  if (status === "Completed") return "success";
+  if (status === "Skipped") return "error";
+  return undefined;
+}
+
+function close() {
+  emit("update:modelValue", false);
+}
+</script>
+
+<style scoped>
+.route-details__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 20px 24px;
+}
+
+.route-details__sub {
+  margin: 4px 0 0;
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+
+.route-details__facts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 16px;
+  margin: 0 0 24px;
+}
+
+.route-details__facts dt {
+  display: block;
+  margin-bottom: 4px;
+  font-size: var(--fs-section-label);
+  font-weight: var(--fw-section-label);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+}
+
+.route-details__facts dd {
+  margin: 0;
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
+
+.route-details__signature {
+  width: 80px;
+  height: 40px;
+}
+
+.route-details__table-head {
+  padding: 14px var(--cellpad-x);
+  border-bottom: 1px solid var(--border);
+}
+
+.route-details__remarks {
+  min-width: 160px;
+  white-space: pre-line;
+}
+</style>

package/components/Nfc/PatrolReport/ReportLocationHeader.vue

@@ -9,9 +9,12 @@
   The two type classes are Vuetify's Roboto scale. `--fs-card-title` and
   `--text2` are the design's, and `--text2` measures 9.62:1 on a card where
   `--medium-emphasis` is an opacity applied to the theme ink.
+
+  `data-pdf-hide` leaves the card out of the PDF, whose page header names the
+  site instead (`useReportPdf`).
 -->
 <template>
-  <div class="app-card text-center pa-8 mt-2">
+  <div class="app-card text-center pa-8 mt-2" data-pdf-hide>
     <v-icon size="64" class="mb-4">mdi-office-building</v-icon>
     <p class="location-header__name">{{ location.name }}</p>
     <p class="location-header__address mb-0">{{ location.address }}</p>

package/components/Nfc/PatrolReport/SkipPhotoDetails.vue

@@ -0,0 +1,137 @@
+<!--
+  Skipped checkpoints with their photo, time and remarks, drawn in a report's
+  PDF directly under the row they belong to: under the checkpoint's own row
+  on the Patrol report (`inline`: one photo beside its remarks), under the
+  patrol run's row on the Daily report (a grid, one card per checkpoint). A
+  photo is never pooled away from the checkpoint and run it was taken at.
+
+  Plain `<img>` with `crossorigin`, not `v-img`: html2canvas ignores
+  `object-fit`, so each photo keeps its own proportions inside its frame (both
+  sides `auto` under max caps, never stretched), and it loads at once rather
+  than when scrolled into view - the rows it sits in are hidden on screen.
+-->
+<template>
+  <div class="skip-details" :class="{ 'skip-details--inline': inline }">
+    <figure
+      v-for="(activity, index) in activities"
+      :key="`${activity.id}-${index}`"
+      class="skip-details__item"
+    >
+      <div class="skip-details__frame">
+        <img
+          v-if="activity.skippedPhotoFileId"
+          :src="getFileUrl(activity.skippedPhotoFileId)"
+          :alt="`Skip photo for ${activity.checkpoint}`"
+          crossorigin="anonymous"
+        />
+        <span v-else class="skip-details__none">No photo attached</span>
+      </div>
+      <figcaption>
+        <span v-if="!inline" class="skip-details__checkpoint">{{ activity.checkpoint }}</span>
+        <span class="skip-details__meta">Skipped at {{ activity.endTime }}</span>
+        <span class="skip-details__label">Remarks</span>
+        <span class="skip-details__remarks">{{ activity.remarks || "No remarks provided" }}</span>
+      </figcaption>
+    </figure>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NFCPatrolActivity } from "../../../types/nfc-patrol-report";
+
+defineProps<{
+  activities: NFCPatrolActivity[];
+  /** Under the checkpoint's own row: one photo beside its remarks, no name. */
+  inline?: boolean;
+}>();
+
+const { getFileUrl } = useFile();
+</script>
+
+<style scoped>
+.skip-details {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--text);
+}
+
+.skip-details__item {
+  margin: 0;
+}
+
+.skip-details__frame {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 170px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--thead);
+  overflow: hidden;
+}
+
+/* Both sides `auto` under the two caps keeps the photo's own proportions -
+   html2canvas draws the box it is given. */
+.skip-details__frame img {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.skip-details__none {
+  color: var(--muted);
+}
+
+.skip-details__item figcaption {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 8px;
+}
+
+.skip-details__checkpoint {
+  font-weight: 700;
+}
+
+.skip-details__meta {
+  color: var(--text2);
+}
+
+.skip-details__label {
+  margin-top: 4px;
+  font-size: var(--fs-section-label);
+  font-weight: var(--fw-section-label);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+}
+
+.skip-details__remarks {
+  white-space: pre-line;
+}
+
+.skip-details--inline {
+  display: block;
+}
+
+.skip-details--inline .skip-details__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.skip-details--inline .skip-details__frame {
+  flex: 0 0 280px;
+  height: 200px;
+}
+
+.skip-details--inline .skip-details__item figcaption {
+  margin-top: 0;
+}
+</style>

package/components/Nfc/PatrolReport/SkipPhotoThumb.vue

@@ -0,0 +1,132 @@
+<!--
+  The photo a guard attached when skipping a checkpoint (`skippedPhotoFileId`
+  on the log's checkpoint): a thumbnail that opens the photo full size, with
+  the guard's remarks under it. Used by the Patrol Activity table and the
+  Patrol Route Details dialog.
+
+  The thumbnail's click stops at the button: in the Patrol Activity table the
+  whole skipped row already opens the remarks dialog.
+
+  The thumbnail is a cropped background, not a `v-img`: it crops the same in
+  html2canvas (which ignores `object-fit`) and loads without being scrolled
+  into view. The PDF itself leaves this column out and draws the photo full
+  size under its checkpoint (`SkipPhotoDetails`).
+-->
+<template>
+  <span class="skip-photo">
+    <button
+      v-if="activity.skippedPhotoFileId"
+      type="button"
+      class="skip-photo__thumb"
+      :aria-label="`View skip photo for ${activity.checkpoint}`"
+      @click.stop="open = true"
+    >
+      <span
+        class="skip-photo__img"
+        role="img"
+        :aria-label="`Skip photo for ${activity.checkpoint}`"
+        :style="{
+          width: `${size}px`,
+          height: `${size}px`,
+          backgroundImage: `url('${getFileUrl(activity.skippedPhotoFileId)}')`,
+        }"
+      />
+    </button>
+    <span v-else-if="activity.status === 'Skipped'" class="screen-hint">No photo</span>
+    <span v-else>-</span>
+
+    <v-dialog v-if="activity.skippedPhotoFileId" v-model="open" max-width="820">
+      <v-card class="screen-modal">
+        <div class="skip-photo__head">
+          <v-card-title class="pa-0">Skip Photo: {{ activity.checkpoint }}</v-card-title>
+          <v-btn
+            class="screen-modal__close"
+            icon="mdi-close"
+            variant="flat"
+            aria-label="Close"
+            @click="open = false"
+          />
+        </div>
+
+        <div class="screen-modal__body px-6 pb-6">
+          <v-img
+            :src="getFileUrl(activity.skippedPhotoFileId)"
+            :alt="`Skip photo for ${activity.checkpoint}`"
+            max-height="70vh"
+            contain
+          />
+          <p class="skip-photo__remarks">
+            <span class="skip-photo__label">Remarks</span>
+            {{ activity.remarks || "No remarks provided" }}
+          </p>
+          <a :href="getFileUrl(activity.skippedPhotoFileId)" target="_blank" rel="noopener">
+            Open full size
+          </a>
+        </div>
+      </v-card>
+    </v-dialog>
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { NFCPatrolActivity } from "../../../types/nfc-patrol-report";
+
+withDefaults(
+  defineProps<{
+    activity: NFCPatrolActivity;
+    size?: number;
+  }>(),
+  { size: 56 },
+);
+
+const { getFileUrl } = useFile();
+
+const open = ref(false);
+</script>
+
+<style scoped>
+.skip-photo__thumb {
+  display: block;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  overflow: hidden;
+  background: none;
+  cursor: zoom-in;
+}
+
+.skip-photo__img {
+  display: block;
+  background-size: cover;
+  background-position: center;
+}
+
+.skip-photo__thumb:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.skip-photo__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 20px 24px;
+}
+
+.skip-photo__remarks {
+  margin: 16px 0 8px;
+  color: var(--text);
+  white-space: pre-line;
+}
+
+.skip-photo__label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: var(--fs-section-label);
+  font-weight: var(--fw-section-label);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+}
+</style>

package/components/Nfc/PatrolReport/SummaryReportTable.vue

@@ -12,6 +12,10 @@
   swapping them to `StatusChip` would be a meaning change, not a restyle:
   `utils/status.ts` does not name "Missed", so the shared map would render it
   NEUTRAL and a missed patrol would stop being red. Raised, not decided here.
+
+  In the PDF each patrol run's skipped checkpoints - photo, time, remarks -
+  are drawn in a row of their own right under that run (`SkipPhotoDetails`),
+  so a day of many runs keeps every photo with the run it was taken on.
 -->
 <template>
   <div class="table-card table-card__shrink mb-6">
@@ -33,7 +37,15 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="row in rows" :key="row.id">
+          <template v-for="row in rows" :key="row.id">
+          <tr
+            :class="{ 'summary-table__row--link': row.detail }"
+            :data-pdf-keep-with-next="skipped(row).length > 0 || undefined"
+            :tabindex="row.detail ? 0 : undefined"
+            :title="row.detail ? 'View patrol route details' : undefined"
+            @click="row.detail && emit('select', row)"
+            @keydown.enter="row.detail && emit('select', row)"
+          >
             <td>{{ row.routeName }}</td>
             <td>
               <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
@@ -47,6 +59,7 @@
                 :alt="`${row.guardName || worker.one} signature`"
                 class="guard-signature"
                 contain
+                eager
               />
               <span v-else>-</span>
             </td>
@@ -58,6 +71,12 @@
               </span>
             </td>
           </tr>
+          <tr v-if="skipped(row).length" data-pdf-only>
+            <td colspan="7" class="summary-table__skips">
+              <SkipPhotoDetails :activities="skipped(row)" />
+            </td>
+          </tr>
+          </template>
         </tbody>
       </v-table>
     </div>
@@ -70,6 +89,7 @@ import type {
   NFCPatrolReportSummaryRow,
   NFCPatrolReportSummaryStatus,
 } from "../../../types/nfc-patrol-report";
+import SkipPhotoDetails from "./SkipPhotoDetails.vue";
 
 const worker = useWorkerTerm();
 defineProps<{
@@ -77,8 +97,16 @@ defineProps<{
   rows: NFCPatrolReportSummaryRow[];
 }>();
 
+const emit = defineEmits<{
+  select: [row: NFCPatrolReportSummaryRow];
+}>();
+
 const { getFileUrl } = useFile();
 
+function skipped(row: NFCPatrolReportSummaryRow) {
+  return row.detail?.activities.filter((activity) => activity.status === "Skipped") ?? [];
+}
+
 function statusClass(status: NFCPatrolReportSummaryStatus) {
   return status === "Completed" ? "text-success" : "text-error";
 }
@@ -90,6 +118,19 @@ function statusClass(status: NFCPatrolReportSummaryStatus) {
   border-bottom: 1px solid var(--border);
 }
 
+.summary-table__skips {
+  padding-top: 0 !important;
+}
+
+.summary-table__row--link {
+  cursor: pointer;
+}
+
+.summary-table__row--link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
 .guard-signature {
   width: 80px;
   height: 40px;

package/components/SiteSettings.vue

@@ -63,6 +63,10 @@
                 </v-col>
                 <v-col cols="12" lg="6" class="mt-2 pl-lg-2">
                   <InputLabel title="Site Documents" class="d-block mb-1" />
+                  <p class="text-caption text-medium-emphasis mb-2">
+                    Every resident of this site can open these in the Service365 app (About this site) - for example
+                    by-laws, house rules or the site plan. Documents for one unit only go on that unit instead.
+                  </p>
                   <InputFileV2 v-model="siteDocuments" :multiple="true" accept="*/*" title="Upload documents"
                     :height="104" />
                 </v-col>

package/components/VehicleManagement.vue

@@ -6,7 +6,10 @@
       heading. Same handler, same permission gate.
     -->
     <v-col cols="12">
-      <PageHeader title="Vehicle Mgmt">
+      <PageHeader
+        title="Vehicle Mgmt"
+        subtitle="The register of residents' and visitors' vehicles. Works with or without number-plate (LPR) cameras - cameras only add automatic plate matching at the gate."
+      >
         <template #actions>
           <AppButton v-if="qrStickersOn" icon="mdi-qrcode" variant="ghost" @click="openStickerDialog()">
             Print QR stickers

package/composables/useNFCPatrolDailyReport.ts

@@ -5,6 +5,7 @@ import type {
 } from "../types/nfc-patrol-report";
 import useNFCPatrolLog from "./useNFCPatrolLog";
 import useSite from "./useSite";
+import { mapLogToSummaryRow } from "../utils/nfc-patrol-report";
 
 interface NFCPatrolLogListResponse {
   items?: Record<string, any>[];
@@ -25,23 +26,6 @@ function buildAddress(address?: Record<string, string>) {
   return parts.length ? parts.join(", ") : undefined;
 }
 
-function mapLogToSummaryRow(log: Record<string, any>, index: number): NFCPatrolSummaryRow {
-  const checkpoints: Record<string, any>[] = log.checkPoints ?? [];
-  const checked = checkpoints.filter((cp) => cp.status === "Completed").length;
-  const missed = checkpoints.filter((cp) => cp.status === "Skipped").length;
-
-  return {
-    id: log._id,
-    routeName: `${index + 1}. ${log.route?.name ?? "-"}`,
-    securityCheckSchedule: log.route?.startTime ?? "-",
-    guardName: log.sign?.guardName,
-    guardSignatureFileId: log.sign?.guardSignatureFileId,
-    checked,
-    missed,
-    status: missed === 0 ? "Completed" : "Incomplete",
-  };
-}
-
 export function useNFCPatrolDailyReport(
   filters: NFCPatrolReportFilters,
   site: string,
@@ -94,7 +78,9 @@ export function useNFCPatrolDailyReport(
             address: buildAddress(siteInfo.address),
           },
           title: `Patrol Route Summary: ${routeName}`,
-          rows: logs.map(mapLogToSummaryRow),
+          rows: logs.map((log, index) =>
+            mapLogToSummaryRow(log, index, (siteInfo as { timezone?: string }).timezone),
+          ),
         };
       } else {
         report.value = null;