@7365admin1/layer-common 4.107.0 → 4.109.0

package/composables/useNFCPatrolMonthlyReport.ts

@@ -6,7 +6,12 @@ import type {
 } from "../types/nfc-patrol-report";
 import useNFCPatrolLog from "./useNFCPatrolLog";
 import useSite from "./useSite";
-import { collectAllPages, mapLogsToMonthlyRows } from "../utils/nfc-patrol-report";
+import {
+  collectAllPages,
+  mapLogsToMonthlyRows,
+  mapLogsToMonthRuns,
+  monthIndexOf,
+} from "../utils/nfc-patrol-report";
 
 interface NFCPatrolLogListResponse {
   items?: Record<string, any>[];
@@ -48,9 +53,15 @@ export function useNFCPatrolMonthlyReport(
    */
   const failed = ref(false);
 
+  // The year's patrol logs, kept so a month's row can open its list without
+  // asking the server again. Not deep-reactive: nothing edits them.
+  const logs = shallowRef<Record<string, any>[]>([]);
+  let siteTimezone: string | undefined;
+
   async function fetchReport() {
     if (!site || !filters.route) {
       report.value = null;
+      logs.value = [];
       notFound.value = false;
       failed.value = false;
       return;
@@ -63,7 +74,7 @@ export function useNFCPatrolMonthlyReport(
     try {
       // The whole year, not page one of it. `collectAllPages` reads the page
       // count out of the first reply and walks the rest.
-      const [logs, siteInfo] = await Promise.all([
+      const [yearLogs, siteInfo] = await Promise.all([
         collectAllPages((page) =>
           getPatrolLogs({
             page,
@@ -77,8 +88,16 @@ export function useNFCPatrolMonthlyReport(
         getSiteById(site),
       ]);
 
-      if (logs.length) {
-        const routeName = logs[0]?.route?.name ?? "-";
+      logs.value = yearLogs;
+      siteTimezone = (siteInfo as { timezone?: string }).timezone;
+
+      if (yearLogs.length) {
+        const routeName = yearLogs[0]?.route?.name ?? "-";
+        const runs = Array<number>(12).fill(0);
+        for (const log of yearLogs) {
+          const month = monthIndexOf(log);
+          if (!Number.isNaN(month)) runs[month]++;
+        }
 
         report.value = {
           location: {
@@ -86,7 +105,10 @@ export function useNFCPatrolMonthlyReport(
             address: buildAddress(siteInfo.address),
           },
           title: `Patrol Route Summary: ${routeName}`,
-          rows: mapLogsToMonthlyRows(logs),
+          rows: mapLogsToMonthlyRows(yearLogs).map((row, month) => ({
+            ...row,
+            runs: runs[month],
+          })),
         };
       } else {
         report.value = null;
@@ -94,6 +116,7 @@ export function useNFCPatrolMonthlyReport(
       }
     } catch {
       report.value = null;
+      logs.value = [];
       notFound.value = false;
       failed.value = true;
     } finally {
@@ -101,8 +124,14 @@ export function useNFCPatrolMonthlyReport(
     }
   }
 
+  /** The patrol runs of one month (0-11), in the order they ran. */
+  function monthRuns(monthIndex: number) {
+    return mapLogsToMonthRuns(logs.value, monthIndex, siteTimezone);
+  }
+
   return {
     report,
+    monthRuns,
     loading,
     notFound,
     failed,

package/composables/useNFCPatrolReport.ts

@@ -5,12 +5,7 @@ import type {
 } from "../types/nfc-patrol-report";
 import useNFCPatrolLog from "./useNFCPatrolLog";
 import useSite from "./useSite";
-import {
-  actualPatrolSpan,
-  checkpointClock,
-  clockTime,
-  DEFAULT_PATROL_TIMEZONE,
-} from "../utils/nfc-patrol-time";
+import { mapLogToPatrolRun } from "../utils/nfc-patrol-report";
 
 interface NFCPatrolLogListResponse {
   items?: Record<string, any>[];
@@ -18,69 +13,6 @@ interface NFCPatrolLogListResponse {
   pageRange?: string;
 }
 
-  function formatDuration(totalMinutes: number) {
-    if (totalMinutes < 60) return `${totalMinutes} mins`;
-
-    const hrs = Math.floor(totalMinutes / 60);
-    const mins = totalMinutes % 60;
-
-    if (mins === 0) return `${hrs} hrs`;
-    return `${hrs} hrs ${mins} mins`;
-  }
-
-  function diffMinutes(startIso?: string | Date, endIso?: string | Date) {
-    if (!startIso || !endIso) return "-";
-    const totalMinutes = Math.max(
-      0,
-      Math.round((new Date(endIso).getTime() - new Date(startIso).getTime()) / 60000),
-    );
-    return formatDuration(totalMinutes);
-  }
-
-
-function mapLogToPatrolReport(
-  log: Record<string, any>,
-  location: NFCPatrolReport["location"],
-  siteTimezone?: string,
-): NFCPatrolReport {
-  const checkpoints: Record<string, any>[] = log.checkPoints ?? [];
-  const timezone = log.timezone || siteTimezone || DEFAULT_PATROL_TIMEZONE;
-  const actual = actualPatrolSpan(log);
-
-  const activities: NFCPatrolActivity[] = checkpoints.map((cp) => {
-    const clock = checkpointClock(log, cp, siteTimezone);
-    return {
-      id: cp.nfcTag_id,
-      checkpoint: cp.nfcTag_name,
-      guardName: log.sign?.guardName,
-      guardSignatureFileId: log.sign?.guardSignatureFileId,
-      startTime: clock.start,
-      endTime: clock.end,
-      status: cp.status,
-      remarks: cp.skippedRemarks && cp.skippedRemarks !== "N/A" ? cp.skippedRemarks : undefined,
-    };
-  });
-
-  return {
-    location,
-    routeSummary: {
-      routeName: log.route?.name,
-      tolerance: Number(log.route?.tolerance) || 0,
-      schedule: {
-        start: log.route?.startTime,
-        end: log.route?.endTime,
-        totalTime: diffMinutes(log.startDateTime, log.endDateTime),
-      },
-      actual: {
-        start: clockTime(actual.start, timezone),
-        end: clockTime(actual.end, timezone),
-        totalTime: diffMinutes(actual.start, actual.end),
-      },
-    },
-    activities,
-  };
-}
-
 export function useNFCPatrolReport(
   filters: NFCPatrolReportFilters,
   site: string,
@@ -128,14 +60,13 @@ export function useNFCPatrolReport(
       const log = logsRes.items?.[0];
 
       if (log) {
-        report.value = mapLogToPatrolReport(
-          log,
-          {
+        report.value = {
+          location: {
             name: siteInfo.name,
             address: buildAddress(siteInfo.address),
           },
-          (siteInfo as { timezone?: string }).timezone,
-        );
+          ...mapLogToPatrolRun(log, (siteInfo as { timezone?: string }).timezone),
+        };
       } else {
         report.value = null;
         notFound.value = true;

package/composables/useReportPdf.ts

@@ -0,0 +1,220 @@
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+import { formatGeneratedAt, planPdfPages, type PdfTable } from "../utils/report-export";
+
+export type ReportPdfMeta = {
+  /** "Patrol Report" */
+  title: string;
+  site?: string;
+  address?: string;
+  /** Shown top right of every page: Route, Date, Time... */
+  details: Array<{ label: string; value: string }>;
+  fileName: string;
+};
+
+/**
+ * A report area (`.report-export`) as an A4 PDF.
+ *
+ * The area is drawn the way the old export drew it - html2canvas, one tall
+ * image - but onto a page rather than across it:
+ *
+ * - laid out at one width whatever the screen, so a PDF from a laptop and
+ *   one from a 4K monitor read the same, and always in the light theme;
+ * - inside margins, under a header (report, site, route, date) and over a
+ *   footer (when it was made, page X of Y) drawn as real text on every page;
+ * - cut only between rows, photos and sections (`planPdfPages`), repeating a
+ *   table's header row on the page it carries on to;
+ * - without the on-screen site card and dividers: the header says it.
+ *
+ * Everything PDF-only happens on html2canvas's clone of the page, so the
+ * screen never changes. `report-export--pdf` marks that clone: under it
+ * `data-pdf-only` shows (hidden on screen by screens.css) and `data-pdf-hide`
+ * goes. A row marked `data-pdf-keep-with-next` is never the last on a page,
+ * so a checkpoint stays with the skip photo drawn under it.
+ */
+
+const RENDER_WIDTH = 1000; // CSS px the report is laid out at for the PDF
+const SCALE = 2;
+
+// A4 portrait, in mm.
+const PAGE_W = 210;
+const PAGE_H = 297;
+const MARGIN = 12;
+const CONTENT_TOP = 38;
+const CONTENT_BOTTOM = PAGE_H - MARGIN - 9;
+const CONTENT_W = PAGE_W - MARGIN * 2;
+const DETAILS_LABEL_X = 134;
+const DETAILS_VALUE_X = 150;
+
+const INK: [number, number, number] = [20, 22, 26];
+const MUTED: [number, number, number] = [100, 104, 112];
+const RULE: [number, number, number] = [220, 222, 226];
+
+const PDF_CSS = `
+  .report-export--pdf { width: ${RENDER_WIDTH}px !important; max-width: none !important; background: #fff; }
+  .report-export--pdf > .v-divider, .report-export--pdf [data-pdf-hide] { display: none !important; }
+  .report-export--pdf tr[data-pdf-only] { display: table-row !important; }
+  .report-export--pdf [data-pdf-only]:not(tr) { display: block !important; }
+  .report-export--pdf tr[data-pdf-keep-with-next] > td { border-bottom-color: transparent !important; }
+  .report-export--pdf .table-card, .report-export--pdf .app-card { box-shadow: none !important; }
+  .report-export--pdf .v-table__wrapper { overflow: visible !important; }
+  .report-export--pdf tbody tr:hover > td { background: transparent !important; }
+  /* html2canvas draws digits at their plain widths but places them where the
+     page laid out tabular ones, so "10:33" came out "10 :33". */
+  .report-export--pdf * { font-variant-numeric: normal !important; }
+`;
+
+/** Where the report can be cut, and where its tables are, measured on the clone. */
+function measure(clone: HTMLElement) {
+  const origin = clone.getBoundingClientRect().top;
+  const top = (el: Element) => el.getBoundingClientRect().top - origin;
+  const bottom = (el: Element) => el.getBoundingClientRect().bottom - origin;
+
+  // Between sections, between table rows (the last row ends with its card,
+  // and a row stays with the skip photos under it), and between lines of
+  // skip photos. Never right under a heading.
+  const breaks = [
+    ...Array.from(clone.children),
+    ...Array.from(clone.querySelectorAll("tbody tr:not(:last-child):not([data-pdf-keep-with-next])")),
+    ...Array.from(clone.querySelectorAll(".skip-details__item")),
+  ].map(bottom);
+
+  const tables: PdfTable[] = Array.from(clone.querySelectorAll("table")).flatMap((table) => {
+    const head = table.querySelector("thead");
+    return head
+      ? [{ top: top(table), bottom: bottom(table), head: { top: top(head), bottom: bottom(head) } }]
+      : [];
+  });
+
+  return { height: clone.getBoundingClientRect().height, breaks, tables };
+}
+
+function drawHeader(pdf: jsPDF, meta: ReportPdfMeta) {
+  pdf.setTextColor(...INK);
+  pdf.setFont("helvetica", "bold");
+  pdf.setFontSize(15);
+  pdf.text(meta.title, MARGIN, MARGIN + 5);
+
+  let y = MARGIN + 11.5;
+  if (meta.site) {
+    pdf.setFontSize(10);
+    pdf.text(pdf.splitTextToSize(meta.site, DETAILS_LABEL_X - MARGIN - 6)[0], MARGIN, y);
+    y += 4.5;
+  }
+  if (meta.address) {
+    pdf.setFont("helvetica", "normal");
+    pdf.setFontSize(8.5);
+    pdf.setTextColor(...MUTED);
+    pdf.text(pdf.splitTextToSize(meta.address, DETAILS_LABEL_X - MARGIN - 6).slice(0, 2), MARGIN, y);
+  }
+
+  let dy = MARGIN + 4;
+  for (const { label, value } of meta.details) {
+    pdf.setFont("helvetica", "normal");
+    pdf.setFontSize(8.5);
+    pdf.setTextColor(...MUTED);
+    pdf.text(label, DETAILS_LABEL_X, dy);
+
+    const lines: string[] = pdf.splitTextToSize(value || "-", PAGE_W - MARGIN - DETAILS_VALUE_X);
+    pdf.setFont("helvetica", "bold");
+    pdf.setTextColor(...INK);
+    pdf.text(lines.length > 1 ? `${lines[0].replace(/\s+$/, "")}…` : lines[0], DETAILS_VALUE_X, dy);
+    dy += 5;
+  }
+
+  pdf.setDrawColor(...RULE);
+  pdf.setLineWidth(0.3);
+  pdf.line(MARGIN, CONTENT_TOP - 4, PAGE_W - MARGIN, CONTENT_TOP - 4);
+}
+
+function drawFooter(pdf: jsPDF, page: number, pages: number, generatedAt: string) {
+  const y = PAGE_H - MARGIN;
+  pdf.setDrawColor(...RULE);
+  pdf.setLineWidth(0.3);
+  pdf.line(MARGIN, y - 5, PAGE_W - MARGIN, y - 5);
+
+  pdf.setFont("helvetica", "normal");
+  pdf.setFontSize(8);
+  pdf.setTextColor(...MUTED);
+  pdf.text(`Generated ${generatedAt}`, MARGIN, y);
+  pdf.text(`Page ${page} of ${pages}`, PAGE_W - MARGIN, y, { align: "right" });
+}
+
+export default function useReportPdf() {
+  async function exportReportPdf(report: HTMLElement, meta: ReportPdfMeta) {
+    let layout = { height: 0, breaks: [] as number[], tables: [] as PdfTable[] };
+
+    const canvas = await html2canvas(report, {
+      scale: SCALE,
+      useCORS: true,
+      backgroundColor: "#fff",
+      windowWidth: Math.max(window.innerWidth, RENDER_WIDTH + 200),
+      onclone: (doc, clone) => {
+        // A PDF is read on white: the dark theme's tokens hang off this class.
+        doc.querySelectorAll(".v-theme--dark").forEach((el) => {
+          el.classList.replace("v-theme--dark", "v-theme--light");
+        });
+        const style = doc.createElement("style");
+        style.textContent = PDF_CSS;
+        doc.head.appendChild(style);
+        clone.classList.add("report-export--pdf");
+        layout = measure(clone);
+      },
+    });
+
+    // Canvas px per report px, and report px per mm on the page.
+    const k = canvas.height / layout.height;
+    const pxPerMm = canvas.width / k / CONTENT_W;
+    const pages = planPdfPages(
+      layout.height,
+      (CONTENT_BOTTOM - CONTENT_TOP) * pxPerMm,
+      layout.breaks,
+      layout.tables,
+    );
+
+    const pdf = new jsPDF({ unit: "mm", format: "a4", orientation: "portrait" });
+
+    pages.forEach((page, index) => {
+      if (index > 0) pdf.addPage();
+
+      const headPx = page.head ? page.head.bottom - page.head.top : 0;
+      const bodyPx = page.bottom - page.top;
+      const part = document.createElement("canvas");
+      part.width = canvas.width;
+      part.height = Math.max(1, Math.round((headPx + bodyPx) * k));
+
+      const ctx = part.getContext("2d");
+      if (!ctx) return;
+      ctx.fillStyle = "#fff";
+      ctx.fillRect(0, 0, part.width, part.height);
+      if (page.head) {
+        const h = Math.round(headPx * k);
+        ctx.drawImage(canvas, 0, Math.round(page.head.top * k), canvas.width, h, 0, 0, canvas.width, h);
+      }
+      const bodyTop = Math.round(page.top * k);
+      const bodyH = Math.round(page.bottom * k) - bodyTop;
+      ctx.drawImage(canvas, 0, bodyTop, canvas.width, bodyH, 0, Math.round(headPx * k), canvas.width, bodyH);
+
+      pdf.addImage(
+        part.toDataURL("image/jpeg", 0.92),
+        "JPEG",
+        MARGIN,
+        CONTENT_TOP,
+        CONTENT_W,
+        part.height / k / pxPerMm,
+      );
+    });
+
+    const generatedAt = formatGeneratedAt();
+    const total = pdf.getNumberOfPages();
+    for (let page = 1; page <= total; page++) {
+      pdf.setPage(page);
+      drawHeader(pdf, meta);
+      drawFooter(pdf, page, total, generatedAt);
+    }
+
+    pdf.save(meta.fileName);
+  }
+
+  return { exportReportPdf };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.107.0",
+  "version": "4.109.0",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/types/bulletin-board.d.ts

@@ -12,6 +12,16 @@ declare  interface TAnnouncement {
   startDate: string;
   endDate: string;
   status: TAnnouncementStatus
+  event?: TAnnouncementEvent | null;
+}
+
+declare interface TAnnouncementEvent {
+  startAt: string;
+  endAt?: string | null;
+  venue?: string;
+  rsvp?: boolean;
+  rsvpClosesAt?: string | null;
+  capacity?: number | null;
 }
 
 declare interface TAnnouncementFile {
@@ -24,6 +34,6 @@ declare type TAnnouncementRecipients = "resident" | "security_agency" | "cleanin
 
 
 
-declare type TCreateAnnouncementPayload = Pick<TAnnouncement, "recipients" | "file" | "site" | "noExpiration" | "startDate" | "endDate" | "content" | "title">
+declare type TCreateAnnouncementPayload = Pick<TAnnouncement, "recipients" | "file" | "site" | "noExpiration" | "startDate" | "endDate" | "content" | "title"> & { event?: TAnnouncementEvent | null }
 
 declare type TAnnouncementStatus = "active" | "expired"

package/types/nfc-patrol-report.ts

@@ -53,6 +53,14 @@ export interface NFCPatrolActivity {
   endTime: string;
   status: NFCPatrolActivityStatus;
   remarks?: string;
+  /** Photo the guard attached when skipping (an uploaded file's id). */
+  skippedPhotoFileId?: string;
+}
+
+/** One patrol run: its schedule-vs-actual and its checkpoints. */
+export interface NFCPatrolRunDetail {
+  routeSummary: NFCPatrolRouteSummary;
+  activities: NFCPatrolActivity[];
 }
 
 export interface NFCPatrolReport {
@@ -65,6 +73,8 @@ export type NFCPatrolReportSummaryStatus = "Completed" | "Incomplete";
 
 export interface NFCPatrolReportSummaryRow {
   id: string;
+  /** The patrol's day, "YYYY-MM-DD". */
+  date?: string;
   routeName: string;
   securityCheckSchedule: string;
   guardName?: string;
@@ -72,6 +82,8 @@ export interface NFCPatrolReportSummaryRow {
   checked: number;
   missed: number;
   status: NFCPatrolReportSummaryStatus;
+  /** The run behind the row, opened in the route details dialog. */
+  detail?: NFCPatrolRunDetail;
 }
 
 export interface NFCPatrolSummaryReport {
@@ -82,6 +94,8 @@ export interface NFCPatrolSummaryReport {
 
 export interface NFCPatrolMonthlyReportRow {
   month: string;
+  /** Patrol runs that month; a month with none has no list to open. */
+  runs?: number;
   checked: number;
   /** `null` when no checkpoint was due that month - see `utils/nfc-patrol-report.ts`. */
   checkedPercentage: number | null;