@7365admin1/layer-common 4.108.0 → 4.109.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @iservice365/layer-common
 
+## 4.109.1
+
+### Patch Changes
+
+- 518f053: Task Calendar: the dashboard panel "Upcoming Events" is now "Task Calendar" (property apps); the sidebar groups the renamed menu item under PROPERTY.
+
+## 4.109.0
+
+### Minor Changes
+
+- e45a6e7: Bulletin Board: an announcement can be an event (start, end, venue) with optional resident RSVP (close time, places); the estate team sees who is coming and can download the list. Clearer copy: bulletin file size, Vehicle Mgmt works without LPR cameras, Site Documents are visible to residents.
+- 9a29b8e: NFC patrol report: clicking a row of the daily Patrol Route Summary opens a Patrol Route Details dialog - the guard and signature, schedule against actual, and every checkpoint with its times and status. Skipped checkpoints show the photo taken at the skip (`skippedPhotoFileId`) in a new Skip Photo column, both in that dialog and in the Patrol tab's Patrol Activity table; the thumbnail opens the photo full size with the guard's remarks (new `SkipPhotoThumb`). The log-to-run mapping moved to `mapLogToPatrolRun()` in `utils/nfc-patrol-report.ts` so the Patrol tab and the dialog share it.
+
+The report PDF is laid out as a document rather than a screenshot cut into pages (new `useReportPdf`, page planning in `utils/report-export.ts`): A4 with margins, a header on every page (report, site and address, route, date, time) and a footer (when it was generated, page X of Y); pages break only between rows, photos and sections, and a table that carries on repeats its header row; always the light theme, at one width whatever the screen; file named after the report, route and date. Skip photos sit with what they belong to in the PDF (new `SkipPhotoDetails`, PDF only): on the Patrol report each skipped checkpoint has its photo, time and remarks right under its row, kept on the same page; on the Daily report each patrol run has its skipped checkpoints under its row. A row or block marked `data-pdf-only` is hidden on screen and drawn in the PDF, `data-pdf-hide` the other way round.
+
+The report CSV is built from the report's data instead of read off the first table on screen (`buildReportCsv` in `utils/report-export.ts`, `patrolReportCsv` / `dailyReportCsv` / `monthlyReportCsv` in `utils/nfc-patrol-report.ts`; each tab's `export` event now carries its tables): the report, site, route and date on the first lines, then every table under its title. The Patrol CSV now has every checkpoint, with each skip's remarks and photo link on its row (it used to carry only schedule against actual); the Daily CSV adds a Skipped Checkpoints table, one row per skip naming its run. UTF-8 with a byte order mark so Excel reads it, cells a spreadsheet would run as a formula kept as text, and named like the PDF. Signatures load eagerly so ones below the fold are no longer missing from the PDF.
+
+Monthly report: a month that had patrols opens the list of that month's patrol runs (new `PatrolMonthDialog`) - by day then scheduled start, with the month's totals in its title, ten runs a page ("1-10 of 124" and the arrows, like the app's tables) - and each run opens the same Patrol Route Details dialog, checkpoints and skip photos included. Built from the year of logs the report already loads (`mapLogsToMonthRuns`, sharing `monthIndexOf` with the yearly table so a month's list adds up to its row), so opening a month asks the server nothing. The summary-row mapping moved from the daily composable to `mapLogToSummaryRow()` and now carries the run's `date`, which the details dialog shows.
+- 8d3d430: NFC Routes: the Security Check Schedule reads at a glance. Each check window is a pill that never breaks across lines ("09:01 – 14:40"), earliest first instead of in the order the times were typed, with "+1" on a window that ends the next day (new `NFCRouteScheduleTimes`, `routeWindows` in `utils/nfc-patrol-schedule.ts`). The table shows the first three and folds the rest into "+N more" (all of them on hover), so a busy route keeps a normal row; the Route Details dialog shows them all under "Security Check Schedule · 9 checks a day". Route days read Monday first with runs as ranges - "Mon – Sat", "Every day" - instead of "Mon, Wed, Fri, Tue, Thu, Sat" (`formatRouteDays`).
+
 ## 4.108.0
 
 ### Minor Changes

package/assets/css/screens.css

@@ -1246,3 +1246,14 @@
   letter-spacing: 0;
   color: var(--muted);
 }
+
+/**
+ * Report PDF only. A report's PDF is drawn from a copy of its `.report-export`
+ * area (`useReportPdf`), which shows `data-pdf-only` and drops `data-pdf-hide`.
+ * On screen the first never shows - e.g. the skip photos under each skipped
+ * checkpoint, which the tables already carry as thumbnails. Scoped to a
+ * report's export area, so the attribute means nothing anywhere else.
+ */
+.report-export [data-pdf-only] {
+  display: none !important;
+}

package/components/BulletinBoardForm.vue

@@ -103,10 +103,75 @@
             />
           </v-col>
 
+          <!-- Event with RSVP (owner 2026-10-07, 1PAM: "Mooncake Festival - time, RSVP, RSVP closes"). -->
+          <v-col cols="12" class="mt-2">
+            <v-checkbox
+              v-model="eventForm.enabled"
+              hide-details
+              label="This announcement is an event people can attend"
+              data-test="bulletin-event-toggle"
+            />
+            <p class="text-caption text-medium-emphasis ml-10 mb-2">
+              For example a festival, a briefing or a gathering. The date, time and place are shown on the
+              announcement in the residents' and service providers' apps.
+            </p>
+          </v-col>
+          <template v-if="eventForm.enabled">
+            <v-col cols="12" md="6" class="pr-md-2">
+              <InputLabel title="Event starts" required />
+              <InputDateTimePicker v-model:utc="eventForm.startAt" :rules="[eventStartRule]" />
+            </v-col>
+            <v-col cols="12" md="6" class="pl-md-2">
+              <InputLabel title="Event ends (optional)" />
+              <InputDateTimePicker v-model:utc="eventForm.endAt" :rules="[eventEndRule]" />
+            </v-col>
+            <v-col cols="12">
+              <InputLabel title="Venue (optional)" />
+              <v-text-field v-model.trim="eventForm.venue" density="compact" placeholder="e.g. Function Room, Block 2" maxlength="200" />
+            </v-col>
+            <v-col cols="12">
+              <v-checkbox
+                v-model="eventForm.rsvp"
+                hide-details
+                label="Ask residents to RSVP (Going / Not going)"
+                data-test="bulletin-rsvp-toggle"
+              />
+              <p class="text-caption text-medium-emphasis ml-10 mb-2">
+                Residents answer in the Service365 app and say how many people are coming. You see every answer, with
+                the unit, when you open this announcement.
+              </p>
+              <p v-if="eventForm.rsvp && !bulletinForm.recipients.includes('resident')" class="text-caption text-warning ml-10 mb-2">
+                Add "Resident" to the recipients so residents can see and answer it.
+              </p>
+            </v-col>
+            <template v-if="eventForm.rsvp">
+              <v-col cols="12" md="6" class="pr-md-2">
+                <InputLabel title="RSVP closes (optional)" />
+                <InputDateTimePicker v-model:utc="eventForm.rsvpClosesAt" :rules="[rsvpCloseRule]" />
+                <p class="text-caption text-medium-emphasis">Leave empty to take answers until the event starts.</p>
+              </v-col>
+              <v-col cols="12" md="6" class="pl-md-2">
+                <InputLabel title="Places available (optional)" />
+                <v-text-field
+                  v-model.number="eventForm.capacity"
+                  type="number"
+                  min="1"
+                  density="compact"
+                  :rules="[capacityRule]"
+                  hint="Total people across all units. Leave empty for no limit."
+                  persistent-hint
+                />
+              </v-col>
+            </template>
+          </template>
+
           <v-col cols="12">
             <v-col cols="12" class="font-weight-bold text-h6"
               >Attachments</v-col
             >
+            <v-col cols="12" class="text-caption text-medium-emphasis py-0">
+              Photos, videos and documents, up to 25 MB each.
+            </v-col>
             <v-col cols="12">
               <!-- Was `color="primary-button"` on an OUTLINED button, i.e. a
                    FILL token used as ink - the exact case `utils/theme.ts`
@@ -228,6 +293,42 @@ const bulletinForm = reactive<TCreateAnnouncementPayload>({
 
 const emit = defineEmits(["close", "done"]);
 
+const eventForm = reactive({
+  enabled: false,
+  startAt: "",
+  endAt: "",
+  venue: "",
+  rsvp: false,
+  rsvpClosesAt: "",
+  capacity: null as number | null,
+});
+
+function eventStartRule(v: string) {
+  return !eventForm.enabled || !!v || "Please choose when the event starts";
+}
+function eventEndRule(v: string) {
+  return !v || !eventForm.startAt || new Date(v) > new Date(eventForm.startAt) || "The event must end after it starts";
+}
+function rsvpCloseRule(v: string) {
+  return !v || !eventForm.startAt || new Date(v) <= new Date(eventForm.startAt) || "RSVP must close before the event starts";
+}
+function capacityRule(v: any) {
+  return v === null || v === "" || v === undefined || (Number.isInteger(Number(v)) && Number(v) >= 1) || "Enter a whole number of 1 or more";
+}
+
+/** What is sent: no event = `null`, so turning the event off on edit clears it. */
+function eventPayload() {
+  if (!eventForm.enabled) return null;
+  return {
+    startAt: eventForm.startAt,
+    endAt: eventForm.endAt || null,
+    venue: eventForm.venue || "",
+    rsvp: eventForm.rsvp,
+    rsvpClosesAt: eventForm.rsvp ? eventForm.rsvpClosesAt || null : null,
+    capacity: eventForm.rsvp && eventForm.capacity ? Number(eventForm.capacity) : null,
+  };
+}
+
 const validForm = ref(false);
 const formRef = ref<HTMLFormElement>();
 const formKey = ref(0);
@@ -289,6 +390,16 @@ watch(
       bulletinForm.endDate = newData?.endDate;
       bulletinForm.file = newData?.file;
       bulletinForm.recipients = newData?.recipients;
+      const ev = newData?.event;
+      Object.assign(eventForm, {
+        enabled: !!ev?.startAt,
+        startAt: ev?.startAt ?? "",
+        endAt: ev?.endAt ?? "",
+        venue: ev?.venue ?? "",
+        rsvp: !!ev?.rsvp,
+        rsvpClosesAt: ev?.rsvpClosesAt ?? "",
+        capacity: ev?.capacity ?? null,
+      });
 
       // mapped rawFileArray
 
@@ -393,6 +504,7 @@ async function onSubmit() {
     const { site, ...rest } = bulletinForm;
     payload = rest;
   }
+  (payload as any).event = eventPayload();
 
   try {
     loading.processing = true;

package/components/BulletinBoardView.vue

@@ -33,6 +33,8 @@
           </v-col>
         </template>
 
+        <BulletinEventRsvp :announcement="prop.activeAnnouncement" :can-see-answers="canUpdate" />
+
         <v-col
           cols="12"
           v-if="prop.activeAnnouncement?.file?.length > 0"

package/components/BulletinEventRsvp.vue

@@ -0,0 +1,126 @@
+<template>
+  <!--
+    The event part of an announcement (owner 2026-10-07, 1PAM "Mooncake
+    Festival"): when, where, and - for the estate team - who is coming.
+    Residents answer in the Service365 app; this only reads the answers.
+  -->
+  <v-col v-if="event?.startAt" cols="12" class="mb-5" data-test="bulletin-event">
+    <v-row no-gutters>
+      <v-col class="font-weight-bold">Event:</v-col>
+      <v-col cols="9" class="px-10">
+        <div>{{ when }}</div>
+        <div v-if="event.venue" class="text-medium-emphasis">{{ event.venue }}</div>
+
+        <template v-if="event.rsvp">
+          <div class="text-caption text-medium-emphasis mt-1">
+            RSVP {{ closed ? "closed" : "open" }} {{ closed ? "on" : "until" }} {{ fmt(event.rsvpClosesAt || event.startAt) }}{{
+              event.capacity ? ` · ${event.capacity} places` : " · no limit on places"
+            }}
+          </div>
+
+          <template v-if="canSeeAnswers">
+            <v-alert v-if="error" type="error" variant="tonal" density="compact" class="mt-3">{{ error }}</v-alert>
+            <div v-else-if="loading" class="text-caption mt-3">Loading answers...</div>
+            <template v-else-if="summary">
+              <div class="d-flex flex-wrap ga-2 mt-3" data-test="bulletin-rsvp-summary">
+                <v-chip size="small" color="success" variant="tonal">
+                  Going: {{ summary.goingPeople }} {{ summary.goingPeople === 1 ? "person" : "people" }} ({{ summary.goingHouseholds }}
+                  {{ summary.goingHouseholds === 1 ? "unit" : "units" }})
+                </v-chip>
+                <v-chip size="small" variant="tonal">Not going: {{ summary.notGoing }}</v-chip>
+                <v-chip v-if="summary.capacity" size="small" variant="tonal">
+                  Places left: {{ Math.max(summary.capacity - summary.goingPeople, 0) }}
+                </v-chip>
+                <v-btn
+                  v-if="items.length"
+                  size="small"
+                  variant="outlined"
+                  class="text-none screen-btn-ghost"
+                  prepend-icon="mdi-download"
+                  data-test="bulletin-rsvp-export"
+                  @click="exportCsv"
+                >
+                  Download list (CSV)
+                </v-btn>
+              </div>
+              <p v-if="!items.length" class="text-caption text-medium-emphasis mt-2">
+                No answers yet. Residents answer in the Service365 app.
+              </p>
+              <v-table v-else density="compact" class="mt-2 border rounded">
+                <thead>
+                  <tr><th>Unit</th><th>Name</th><th>Answer</th><th>People</th><th>Answered</th></tr>
+                </thead>
+                <tbody>
+                  <tr v-for="r in items" :key="r._id">
+                    <td>{{ r.unit || "-" }}</td>
+                    <td>{{ r.name || r.email || "-" }}</td>
+                    <td>{{ r.response === "going" ? "Going" : "Not going" }}</td>
+                    <td>{{ r.response === "going" ? r.attendees : "-" }}</td>
+                    <td>{{ fmt(r.updatedAt) }}</td>
+                  </tr>
+                </tbody>
+              </v-table>
+            </template>
+          </template>
+        </template>
+      </v-col>
+    </v-row>
+  </v-col>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  announcement: { type: Object as PropType<Record<string, any> | null>, default: null },
+  /** The estate team (bulletin edit right) sees who answered. */
+  canSeeAnswers: { type: Boolean, default: false },
+});
+
+const event = computed(() => props.announcement?.event ?? null);
+const items = ref<Record<string, any>[]>([]);
+const summary = ref<Record<string, any> | null>(null);
+const loading = ref(false);
+const error = ref("");
+
+const fmt = (v: any) =>
+  v ? new Date(v).toLocaleString(undefined, { day: "numeric", month: "short", year: "numeric", hour: "numeric", minute: "2-digit" }) : "";
+const when = computed(() => {
+  const e = event.value;
+  if (!e?.startAt) return "";
+  return e.endAt ? `${fmt(e.startAt)} - ${fmt(e.endAt)}` : fmt(e.startAt);
+});
+const closed = computed(() => {
+  const at = event.value?.rsvpClosesAt || event.value?.startAt;
+  return !!at && new Date(at) < new Date();
+});
+
+async function load() {
+  items.value = [];
+  summary.value = null;
+  error.value = "";
+  if (!event.value?.rsvp || !props.canSeeAnswers || !props.announcement?._id) return;
+  loading.value = true;
+  try {
+    const res: any = await useNuxtApp().$api(`/api/bulletin-boards/id/${props.announcement._id}/rsvps`);
+    items.value = res?.items ?? [];
+    summary.value = res?.summary ?? null;
+  } catch (e: any) {
+    error.value = e?.data?.message || "The answers could not be loaded. Please try again.";
+  } finally {
+    loading.value = false;
+  }
+}
+watch(() => [props.announcement?._id, props.canSeeAnswers], load, { immediate: true });
+
+function exportCsv() {
+  const q = (v: any) => `"${String(v ?? "").replace(/"/g, '""')}"`;
+  const rows = [["Unit", "Name", "Email", "Answer", "People", "Answered"]].concat(
+    items.value.map((r) => [r.unit, r.name, r.email, r.response === "going" ? "Going" : "Not going", r.response === "going" ? r.attendees : 0, fmt(r.updatedAt)]),
+  );
+  const blob = new Blob([rows.map((r) => r.map(q).join(",")).join("\n")], { type: "text/csv" });
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(blob);
+  a.download = `rsvp-${String(props.announcement?.title || "event").replace(/[^A-Za-z0-9]+/g, "-")}.csv`;
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(a.href), 5000);
+}
+</script>

package/components/DashboardMain.vue

@@ -676,7 +676,7 @@
       <v-col v-if="isWidgetVisible('upcomingEvents')" cols="12" lg="6">
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
-            <h2>Upcoming Events</h2>
+            <h2>Task Calendar</h2>
             <button
               class="figma-panel-action"
               type="button"
@@ -2167,8 +2167,8 @@ const customizeWidgets = computed(() => {
       },
       {
         key: "upcomingEvents",
-        title: "Upcoming Events",
-        description: "Quick view of scheduled events happening soon.",
+        title: "Task Calendar",
+        description: "Upcoming tasks and dates on your management team's calendar.",
       },
       {
         key: "todayReminders",
@@ -2928,9 +2928,9 @@ const printTableSections = computed<PrintTableSection[]>(() => {
     sections.push(
       {
         key: "upcomingEvents",
-        title: "Upcoming Events",
+        title: "Task Calendar",
         columns: [
-          { key: "title", label: "Event Title", width: "40%", strong: true },
+          { key: "title", label: "Title", width: "40%", strong: true },
           { key: "subtitle", label: "Description / Subtitle", width: "60%" },
         ],
         rows: upcomingEvents.value,
@@ -3873,9 +3873,9 @@ async function exportDashboard(format: "PDF" | "Word") {
       }
 
       if (isPropertyMode.value) {
-        wordHtml += `<div class="section-title">Upcoming Events</div>`;
+        wordHtml += `<div class="section-title">Task Calendar</div>`;
         wordHtml += `<table class="data-table">`;
-        wordHtml += `<thead><tr><th>Event Title</th><th>Description / Subtitle</th></tr></thead><tbody>`;
+        wordHtml += `<thead><tr><th>Title</th><th>Description / Subtitle</th></tr></thead><tbody>`;
         if (upcomingEvents.value.length > 0) {
           upcomingEvents.value.forEach((item) => {
             wordHtml += `<tr>

package/components/Nfc/NFCPatrolReportMain.vue

@@ -86,15 +86,20 @@
 </template>
 
 <script setup lang="ts">
-import html2canvas from "html2canvas";
-import jsPDF from "jspdf";
-
 import type {
   NFCPatrolReportFilters,
   NFCPatrolReportTab,
 } from "../../types/nfc-patrol-report";
 
 import { useNFCPatrolReportFilters } from "../../composables/useNFCPatrolReportFilters";
+import useReportPdf, { type ReportPdfMeta } from "../../composables/useReportPdf";
+import {
+  buildReportCsv,
+  formatGeneratedAt,
+  formatReportDate,
+  reportFileName,
+  type CsvSection,
+} from "../../utils/report-export";
 
 import PatrolReportTab from "./PatrolReport/PatrolReportTab.vue";
 import DailyReportTab from "./PatrolReport/DailyReportTab.vue";
@@ -134,7 +139,42 @@ function updateFilters(value: NFCPatrolReportFilters) {
   filters.date = value.date;
 }
 
-async function exportReport(type: "pdf" | "csv") {
+const { exportReportPdf } = useReportPdf();
+
+/** An export's heading and file name: which report, where, and for what. */
+function reportMeta(report: HTMLElement, extension: "pdf" | "csv"): ReportPdfMeta {
+  const tab = reportTabs.find(({ value }) => value === activeTab.value);
+  const route = options.value.routes.find(({ value }) => value === filters.route)?.title;
+  const text = (selector: string) => report.querySelector(selector)?.textContent?.trim() || undefined;
+
+  // The yearly table always covers the current year (useNFCPatrolMonthlyReport).
+  const period =
+    activeTab.value === "monthly"
+      ? { label: "Year", value: String(new Date().getFullYear()) }
+      : { label: "Date", value: formatReportDate(filters.date) };
+  const details = [{ label: "Route", value: route ?? "-" }, period];
+  if (activeTab.value === "patrol" && filters.timeRange) {
+    details.push({ label: "Time", value: filters.timeRange });
+  }
+
+  return {
+    title: tab?.label ?? "Patrol Report",
+    site: text(".location-header__name"),
+    address: text(".location-header__address"),
+    details,
+    fileName: reportFileName(
+      [
+        tab?.label,
+        route,
+        activeTab.value === "monthly" ? period.value : filters.date,
+        activeTab.value === "patrol" ? filters.timeRange.split(" - ")[0]?.replace(":", "") : undefined,
+      ],
+      extension,
+    ),
+  };
+}
+
+async function exportReport(type: "pdf" | "csv", sections: CsvSection[] = []) {
   const report = document.querySelector(
     ".report-export",
   ) as HTMLElement | null;
@@ -142,82 +182,31 @@ async function exportReport(type: "pdf" | "csv") {
   if (!report) return;
 
   if (type === "pdf") {
-    const canvas = await html2canvas(report, {
-      scale: 2,
-      useCORS: true,
-      backgroundColor: "#fff",
-    });
-
-    const pdf = new jsPDF("p", "mm", "a4");
-
-    const pdfWidth = pdf.internal.pageSize.getWidth();
-    const pdfHeight = pdf.internal.pageSize.getHeight();
-
-    const imgWidth = pdfWidth;
-    const imgHeight = (canvas.height * imgWidth) / canvas.width;
-
-    const imgData = canvas.toDataURL("image/png");
-
-    let heightLeft = imgHeight;
-    let position = 0;
-
-    pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
-
-    heightLeft -= pdfHeight;
-
-    while (heightLeft > 0) {
-      position -= pdfHeight;
-
-      pdf.addPage();
-      pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
-
-      heightLeft -= pdfHeight;
-    }
-
-    pdf.save(`${activeTab.value}-report.pdf`);
+    await exportReportPdf(report, reportMeta(report, "pdf"));
     return;
   }
 
-  const table = report.querySelector("table");
-
-  if (!table) return;
-
-  const csv = Array.from(table.querySelectorAll("tr"))
-    .map((row) =>
-      Array.from(row.querySelectorAll("th,td"))
-        .map((cell) => escapeCsvCell(getCsvCellValue(cell)))
-        .join(","),
-    )
-    .join("\n");
-
-  const blob = new Blob([csv], {
-    type: "text/csv;charset=utf-8;",
+  // Built from the report's data by its tab, not read off the screen: every
+  // table, with each skip's remarks and photo link on its checkpoint's row.
+  if (!sections.length) return;
+
+  const meta = reportMeta(report, "csv");
+  const csv = buildReportCsv({
+    title: meta.title,
+    details: [
+      { label: "Site", value: meta.site },
+      { label: "Address", value: meta.address },
+      ...meta.details,
+      { label: "Generated", value: formatGeneratedAt() },
+    ],
+    sections,
   });
 
   const link = document.createElement("a");
-
-  link.href = URL.createObjectURL(blob);
-  link.download = `${activeTab.value}-report.csv`;
+  link.href = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8;" }));
+  link.download = meta.fileName;
   link.click();
 
   URL.revokeObjectURL(link.href);
 }
-
-function getCsvCellValue(cell: Element) {
-  const image = cell.querySelector("img");
-
-  if (image) {
-    const imageUrl = image.currentSrc || image.src;
-
-    if (imageUrl) {
-      return imageUrl;
-    }
-  }
-
-  return cell.textContent?.trim() ?? "";
-}
-
-function escapeCsvCell(value: string) {
-  return `"${value.replace(/"/g, '""')}"`;
-}
 </script>

package/components/Nfc/NFCPatrolRouteMain.vue

@@ -54,11 +54,10 @@
           </div>
         </template>
 
+        <!-- Earliest first, one unbreakable pill per window; past three the
+             rest fold into "+N more" so a busy route keeps a normal row. -->
         <template #item.schedules="{ value }">
-          <span v-if="Array.isArray(value) && value.length > 0">
-            {{ value.map((s: any) => `${s.start}-${s.end}`).join(", ") }}
-          </span>
-          <span v-else>--</span>
+          <NFCRouteScheduleTimes :windows="value || []" :limit="3" />
         </template>
 
         <template #item.repeatDays="{ value }">
@@ -152,10 +151,14 @@
               class="mb-2"
               v-if="selectedRoute.schedules && selectedRoute.schedules.length"
             >
-              Security Check Schedule:
-              <span class="font-weight-bold">
-                {{ selectedRoute.schedules.map(s => `${s.start}-${s.end}`).join(", ") }}
-              </span>
+              <div class="mb-2">
+                Security Check Schedule
+                <span class="route-preview__count">
+                  · {{ selectedRoute.schedules.length }}
+                  {{ selectedRoute.schedules.length === 1 ? "check" : "checks" }} a day
+                </span>
+              </div>
+              <NFCRouteScheduleTimes :windows="selectedRoute.schedules" />
             </v-col>
 
             <v-col
@@ -291,6 +294,8 @@
 
 <script setup lang="ts">
 import useNFCPatrolRoute from "../../composables/useNFCPatrolRoute";
+import { formatRouteDays, routeWindows } from "../../utils/nfc-patrol-schedule";
+import NFCRouteScheduleTimes from "./NFCRouteScheduleTimes.vue";
 
 const props = defineProps({
   site: {
@@ -343,21 +348,6 @@ const searchInput = ref("");
 const { getAll: getAllRoutes, getById: getRouteById, deleteById: deleteRouteById } =
   useNFCPatrolRoute();
 
-function calculateEndTime(startTime: string, toleranceMinutes: number): string {
-  if (!startTime) return '';
-  
-  const [hours, minutes] = startTime.split(':').map(Number);
-  if (isNaN(hours) || isNaN(minutes)) return startTime;
-  
-  const totalMinutes = hours * 60 + minutes + toleranceMinutes;
-  const wrappedMinutes = ((totalMinutes % 1440) + 1440) % 1440;
-  
-  const endHours = String(Math.floor(wrappedMinutes / 60)).padStart(2, '0');
-  const endMins = String(wrappedMinutes % 60).padStart(2, '0');
-  
-  return `${endHours}:${endMins}`;
-}
-
 // Use a reactive trigger for manual refresh
 const refreshTrigger = ref(0);
 
@@ -389,14 +379,9 @@ watchEffect(() => {
       // Display fields for the table
       routeName: item.name,
       numberOfCheckpoints: item.checkPointNumber,
-      schedules: item.startTimes?.map((time: string) => ({
-        start: time,
-        end: calculateEndTime(time, item.tolerance || 0)
-      })) || [],
-      repeatDays: item.days?.map((d: number) => {
-        const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-        return dayNames[d];
-      }).join(', ') || '--',
+      // Each start time's window, earliest first; days Monday first, runs as ranges.
+      schedules: routeWindows(item.startTimes, item.tolerance),
+      repeatDays: formatRouteDays(item.days) || '--',
       checkpoints: item.checkPoints?.map((cp: any) => ({
         nfcTagId: cp.nfcTag_id,
       })) || []
@@ -529,6 +514,11 @@ async function submitDelete() {
   }
 }
 </script>
+<style scoped>
+.route-preview__count {
+  color: var(--text2);
+}
+</style>
 <!--
   The screen's own table CSS is gone with the `v-data-table` it styled: it
   hardcoded an `rgb(250,250,250)` header fill and black-alpha borders, which