@7365admin1/layer-common 4.147.2 → 4.148.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @iservice365/layer-common
 
+## 4.148.0
+
+### Minor Changes
+
+- 4b2d44f: Daily Checklist: the help box points to the Task Calendar for extra checks; the day page names its day, says "Visits today", offers the Closed filter and stays view-only on a closed day even when opened from a link; the unit page explains Done / Needs redo; "Visit N" instead of "Set N"; the PDF file is named after its day; the setup banner uses the area list's unit counts instead of one request per area.
+- 5276d06: Trade apps: Task Calendar becomes one page with two tabs, "From managing agent" (view only) and "My extra checks" (the Extra Checks list with add / edit / pause / delete), and one short "How the Task Calendar works" help box. New `TaskCalendarMain` component; `ScheduleTaskMain` and `TaskCalendarReadOnly` gain an `embedded` prop (default off, so existing pages are unchanged). Breadcrumb for the old Extra Checks address now reads "Task Calendar".
+
+### Patch Changes
+
+- 2c5bc62: Task Calendar "From managing agent" tab: a plain sentence per tab when it is empty instead of "No data available".
+
 ## 4.147.2
 
 ### Patch Changes
@@ -3493,11 +3504,11 @@ Monthly report: a month that had patrols opens the list of that month's patrol r
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/AreaChecklistHistoryLogs.vue

@@ -117,7 +117,7 @@
                         v-if="checklistSet.set !== undefined"
                         class="text-subtitle-2 font-weight-bold px-0"
                       >
-                        Set {{ checklistSet.set }}
+                        {{ visitLabel(checklistSet.set) }}
                         <StatusChip
                           v-if="checklistSet.isScheduleTask"
                           tone="info"
@@ -262,7 +262,7 @@
 </template>
 
 <script setup lang="ts">
-import { dailyStatusLabel, extraCheckLabel, historyUnitLabel } from "../utils/schedule-task";
+import { dailyStatusLabel, extraCheckLabel, historyUnitLabel, visitLabel } from "../utils/schedule-task";
 const props = defineProps({
   orgId: { type: String, required: true, default: "" },
   site: { type: String, required: true, default: "" },

package/components/CleaningScheduleMain.vue

@@ -14,8 +14,10 @@
         <ol class="sg-steps">
           <li>
             Every midnight a new row appears here for the day. It holds every
-            area, with as many visits as the area's "visits per day", plus
-            any <strong>Extra Checks</strong> set for that day.
+            area, with as many visits as the area's "visits per day". An
+            <strong>extra check</strong> from the <strong>Task Calendar</strong>
+            ("My extra checks") adds one more visit to its areas at its set
+            time that day.
           </li>
           <li>
             Staff open the same list in their mobile app and tick each unit
@@ -403,7 +405,7 @@ async function downloadItem(item: any) {
 
   try {
     downloadingId.value = id;
-    await downloadChecklistPdf(id);
+    await downloadChecklistPdf(id, item?.createdAt);
   } catch (err) {
     showMessage(
       (err as any)?.data?.message ||
@@ -420,6 +422,8 @@ const selectedScheduleStatus = useState<string>(
   () => ""
 );
 
+const selectedScheduleDay = useState<string>("selectedScheduleDay", () => "");
+
 const isItemClosed = (item: any): boolean =>
   String(item?.status ?? "").toLowerCase() === "closed";
 
@@ -435,8 +439,9 @@ function onRowClick(data: any) {
       return;
     }
 
-    // Store status so nested pages know whether the schedule is closed
+    // Store status and day so nested pages know whether the list is closed and which day it is
     selectedScheduleStatus.value = String(item?.status ?? "");
+    selectedScheduleDay.value = String(item?.createdAt ?? "");
 
     if (props.type === "toilet") {
       const path = `/${props.orgId}/${props.site}/toilet-checklist/${id}`;

package/components/ManageChecklistMain.vue

@@ -16,6 +16,13 @@
           </StatusChip>
         </v-col>
       </v-row>
+      <p class="checklist-intro" data-test="checklist-intro">
+        Each visit lists this area's units. Staff tick them on their phone; here
+        you can mark a unit <strong>Done</strong> (&#10003;) or send it back with
+        <strong>Needs redo</strong> (&#10007;, with a remark). The last unit of a
+        visit needs a photo. A visit marked "Extra check" was added from the Task
+        Calendar.
+      </p>
       <TableHygiene
         :title="scheduleTitle"
         :headers="headers"
@@ -249,8 +256,8 @@
       <v-card-title>
         {{
           modalData.currentSet !== undefined
-            ? `Set ${modalData.currentSet} Completed`
-            : "All Items Checked"
+            ? `${visitLabel(modalData.currentSet)} done`
+            : "All units ticked"
         }}
       </v-card-title>
 
@@ -285,7 +292,7 @@
               v-if="!modalData.photoIds.length"
               class="text-caption text-medium-emphasis mt-1"
             >
-              At least one photo is required to complete this task. You can take
+              At least one photo is needed to finish this visit. You can take
               or upload more than one.
             </p>
           </v-col>
@@ -382,7 +389,7 @@
   <v-dialog v-model="showAttachmentDialog" max-width="700" scrollable>
     <v-card class="screen-modal">
       <v-card-title class="d-flex align-center">
-        <span>Set {{ attachmentDialogSetNum }} — Attachments</span>
+        <span>{{ visitLabel(attachmentDialogSetNum) }} — photos</span>
         <v-spacer />
         <v-btn
           icon="mdi-close"
@@ -462,6 +469,7 @@
 
 <script setup lang="ts">
 import { readListPage } from "../utils/list-page";
+import { isClosedDay, visitLabel } from "../utils/schedule-task";
 import { isPhotoRefusal, isSetFinished } from "../utils/checklist-set";
 import useCleaningSchedules from "../composables/useCleaningSchedules";
 import useWorkerTerm from "../composables/useWorkerTerm";
@@ -504,8 +512,9 @@ const selectedScheduleStatus = useState<string>(
   "selectedScheduleStatus",
   () => ""
 );
-const isScheduleClosed = computed(
-  () => selectedScheduleStatus.value.toLowerCase() === "closed"
+// Opened from the day list it knows; from a link or a refresh the units tell.
+const isScheduleClosed = computed(() =>
+  isClosedDay(selectedScheduleStatus.value, items.value as any[]),
 );
 
 const page = ref<number>(1);
@@ -1075,13 +1084,13 @@ async function _updateUnitChecklist({
       );
     }
 
-    showMessage(`Set ${setNumber} done`, "success");
+    showMessage(`${visitLabel(setNumber)} done`, "success");
 
     // Refresh data
     await getUnitCleanerChecklistRefresh();
   } catch (error: any) {
     console.error("Error approving set:", error);
-    showMessage(error?.message || "Could not finish this set", "error");
+    showMessage(error?.message || "Could not finish this visit", "error");
   } finally {
     submitting.value = false;
   }
@@ -1089,6 +1098,11 @@ async function _updateUnitChecklist({
 </script>
 
 <style scoped>
+.checklist-intro {
+  margin: 0 0 12px;
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
 /* The idle checklist circle. `--muted` is the design's de-emphasis token and
    clears the 3:1 bar a non-text indicator needs; Vuetify's `grey-lighten-2`
    read 1.32:1. */

package/components/ScheduleAreaMain.vue

@@ -6,10 +6,10 @@
         :site="site"
         :service-type="serviceType"
         :schedule-route="scheduleRoute"
-        text="These are the areas on this day's checklist. Click an area to see each unit, tick it as done, or send it back to be redone."
+        text="These are the areas on this day's checklist. Click an area to see each unit, tick it as done, or send it back to be redone. Visits today counts the area's normal visits plus any extra checks added today."
       />
       <TableMain
-        :title="pageTitle"
+        :title="dayTitle"
         :headers="headers"
         :items="items"
         :loading="loading"
@@ -143,7 +143,12 @@
 
 <script setup lang="ts">
 import useCleaningSchedules from "../composables/useCleaningSchedules";
-import { dailyChecklistTitle, dailyStatusLabel } from "../utils/schedule-task";
+import {
+  dailyChecklistTitle,
+  dailyStatusLabel,
+  dayLabel,
+  isClosedDay,
+} from "../utils/schedule-task";
 import useUtils from "../composables/useUtils";
 
 const props = defineProps({
@@ -177,7 +182,8 @@ const headers = [
   { title: "Area", value: "name" },
   { title: "Status", value: "status" },
   ...(props.showAreaType ? [{ title: "Type", value: "type" }] : []),
-  { title: "Visits per day", value: "set" },
+  // The highest visit number on today's list: normal visits plus any extra checks added.
+  { title: "Visits today", value: "set" },
 ];
 
 const { formatDate, back } = useUtils();
@@ -190,9 +196,16 @@ const selectedScheduleStatus = useState<string>(
   "selectedScheduleStatus",
   () => ""
 );
-const isScheduleClosed = computed(
-  () => selectedScheduleStatus.value.toLowerCase() === "closed"
+// Opened from the day list it knows; from a link or a refresh the rows tell.
+const isScheduleClosed = computed(() =>
+  isClosedDay(selectedScheduleStatus.value, items.value),
 );
+const selectedScheduleDay = useState<string>("selectedScheduleDay", () => "");
+// "Daily Checklist – Cleaning – Sat, 24 Oct 2026" (the day only when known).
+const dayTitle = computed(() => {
+  const day = dayLabel(selectedScheduleDay.value);
+  return day ? `${pageTitle} – ${day}` : pageTitle;
+});
 
 const items = ref<Array<Record<string, any>>>([]);
 
@@ -202,6 +215,7 @@ const statusOptions = [
   { title: "Not started", value: "open" },
   { title: "In progress", value: "ongoing" },
   { title: "Done", value: "completed" },
+  { title: "Closed", value: "closed" },
 ];
 const areaTypeFilter = ref<TAreaType>("all");
 const typeOptions = [

package/components/ScheduleGuide.vue

@@ -132,8 +132,14 @@ async function check() {
     }
 
     const noUnits: string[] = [];
+    // A newer server lists each area's unit count: no lookups at all. Older
+    // replies (or cached ones) fall back to one capped lookup per area.
+    for (const a of areas) {
+      if (typeof a.unitCount === "number" && a.unitCount === 0) noUnits.push(a.name);
+    }
+    const unknown = areas.filter((a) => typeof a.unitCount !== "number");
     await Promise.all(
-      areas.slice(0, MAX_UNIT_CHECKS).map(async (a) => {
+      unknown.slice(0, MAX_UNIT_CHECKS).map(async (a) => {
         try {
           const full = await getAreaById(a._id);
           if (!(full?.units || []).length) noUnits.push(a.name);

package/components/ScheduleTaskMain.vue

@@ -5,8 +5,8 @@
         :org-id="orgId"
         :site="site"
         :service-type="serviceType"
-        :text="FEATURE_SUBTITLE"
-        how-title="How extra checks work"
+        :text="embedded ? '' : FEATURE_SUBTITLE"
+        :how-title="embedded ? '' : 'How extra checks work'"
         how-key="extra-visits"
       >
         <ol class="sg-steps">
@@ -509,6 +509,8 @@ const props = defineProps({
   canUpdateScheduleTask: { type: Boolean, default: false },
   canDeleteScheduleTask: { type: Boolean, default: false },
   canViewScheduleTaskDetails: { type: Boolean, default: false },
+  /** Inside the Task Calendar page: its one help box replaces this page's own. */
+  embedded: { type: Boolean, default: false },
 });
 
 const { formatDate, debounce } = useUtils();

package/components/TableHygiene.vue

@@ -83,7 +83,7 @@
                   <span
                     class="text-caption font-weight-bold text-medium-emphasis text-uppercase"
                   >
-                    Set {{ group.set }}
+                    {{ visitLabel(group.set) }}
                   </span>
                   <StatusChip
                     v-if="group.isScheduleTask"
@@ -206,7 +206,7 @@
 </template>
 
 <script lang="ts" setup>
-import { extraCheckLabel } from "../utils/schedule-task";
+import { extraCheckLabel, visitLabel } from "../utils/schedule-task";
 defineOptions({ inheritAttrs: false });
 
 const props = defineProps({

package/components/TaskCalendarMain.vue

@@ -0,0 +1,200 @@
+<!--
+  TASK CALENDAR for the five trade apps (owner 24 Oct 2026): one page for every
+  scheduled job at the site, in two tabs.
+
+    "From managing agent" - tasks the managing agent gave this company
+                            (TaskCalendarReadOnly, view only).
+    "My extra checks"     - the company's own extra checks
+                            (ScheduleTaskMain, add / edit / pause / delete).
+
+  Each tab shows only when the viewer's role already allows it (the same keys
+  the two separate menu items used), so nobody gains or loses access. The tab
+  is kept in the address (?tab=agent | extra) so a link opens the right one.
+-->
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <PageHeader title="Task Calendar" />
+
+      <v-expansion-panels
+        v-model="helpPanel"
+        class="tc-help mb-4"
+        variant="accordion"
+        flat
+      >
+        <v-expansion-panel value="how">
+          <v-expansion-panel-title class="tc-help__title">
+            <v-icon size="20" class="mr-2">mdi-help-circle-outline</v-icon>
+            How the Task Calendar works
+          </v-expansion-panel-title>
+          <v-expansion-panel-text class="tc-help__body">
+            <ul class="tc-help__list">
+              <li v-if="showAgent">
+                <strong>From managing agent</strong> - jobs the building's
+                managing agent gave your company, for example a monthly pump
+                service. You can only look at them here. The managing agent
+                marks them done.
+              </li>
+              <li v-if="showExtra">
+                <strong>My extra checks</strong> - checks your company adds on
+                top of the normal daily rounds, for example "Lunch toilet
+                check, Lobby Toilets, 2:00 pm every weekday". The managing
+                agent can see them too, but cannot change them.
+              </li>
+              <li v-if="showExtra">
+                At the set time, the extra check appears in staff's
+                <strong>Daily Checklist</strong> on their phone and they get a
+                notification. They tick each unit there.
+              </li>
+            </ul>
+            <div class="tc-help__h">What the words mean</div>
+            <dl class="tc-help__legend">
+              <template v-for="h in words" :key="h.word">
+                <dt><StatusChip :status="h.word" :label="h.word" :tone="h.tone" /></dt>
+                <dd>{{ h.meaning }}</dd>
+              </template>
+            </dl>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+
+      <div v-if="tabs.length > 1" class="app-tabs mb-4" role="tablist">
+        <button
+          v-for="t in tabs"
+          :key="t.key"
+          type="button"
+          role="tab"
+          class="app-tab"
+          :class="{ 'app-tab--active': tab === t.key }"
+          :aria-selected="tab === t.key"
+          :data-test="`task-calendar-tab-${t.key}`"
+          @click="chooseTab(t.key)"
+        >
+          {{ t.name }}
+        </button>
+      </div>
+
+      <TaskCalendarReadOnly
+        v-if="tab === 'agent'"
+        :site-id="siteId"
+        embedded
+      />
+      <ScheduleTaskMain
+        v-else-if="tab === 'extra'"
+        :org-id="orgId"
+        :site="siteId"
+        :service-type="serviceType"
+        :can-view-schedule-tasks="canViewScheduleTasks"
+        :can-create-schedule-task="canCreateScheduleTask"
+        :can-update-schedule-task="canUpdateScheduleTask"
+        :can-delete-schedule-task="canDeleteScheduleTask"
+        :can-view-schedule-task-details="canViewScheduleTaskDetails"
+        embedded
+      />
+      <v-alert v-else type="info" variant="tonal" class="ma-4">
+        Your role does not include the Task Calendar.
+      </v-alert>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import {
+  pickTaskCalendarTab,
+  taskCalendarWords,
+  type TTaskCalendarTab,
+} from "../utils/task-calendar-tabs";
+
+const props = defineProps({
+  orgId: { type: String, required: true },
+  siteId: { type: String, required: true },
+  serviceType: { type: String, default: "" },
+  /** Opened from an old Extra Checks link: start on "My extra checks". */
+  initialTab: { type: String, default: "" },
+  canViewTaskCalendar: { type: Boolean, default: false },
+  canViewScheduleTasks: { type: Boolean, default: false },
+  canCreateScheduleTask: { type: Boolean, default: false },
+  canUpdateScheduleTask: { type: Boolean, default: false },
+  canDeleteScheduleTask: { type: Boolean, default: false },
+  canViewScheduleTaskDetails: { type: Boolean, default: false },
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const showAgent = computed(() => props.canViewTaskCalendar);
+const showExtra = computed(() => props.canViewScheduleTasks);
+
+const words = computed(() =>
+  taskCalendarWords({ agent: showAgent.value, extra: showExtra.value }),
+);
+
+const tabs = computed(() => [
+  ...(showAgent.value ? [{ key: "agent" as const, name: "From managing agent" }] : []),
+  ...(showExtra.value ? [{ key: "extra" as const, name: "My extra checks" }] : []),
+]);
+
+const tab = computed<TTaskCalendarTab | "">(() =>
+  pickTaskCalendarTab(route.query.tab, props.initialTab, {
+    agent: showAgent.value,
+    extra: showExtra.value,
+  }),
+);
+
+function chooseTab(key: TTaskCalendarTab) {
+  if (key === tab.value) return;
+  router.replace({ query: { ...route.query, tab: key } });
+}
+
+// Open until the viewer closes it; remembered on this browser only.
+const HELP_STORE = "task-calendar-help";
+const helpPanel = ref<string | undefined>("how");
+onMounted(() => {
+  try {
+    if (localStorage.getItem(HELP_STORE) === "closed") helpPanel.value = undefined;
+  } catch {
+    // storage blocked: stay open
+  }
+});
+watch(helpPanel, (v) => {
+  try {
+    localStorage.setItem(HELP_STORE, v ? "open" : "closed");
+  } catch {
+    // storage blocked: nothing to remember
+  }
+});
+</script>
+
+<style scoped>
+.tc-help {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+.tc-help__title {
+  font-weight: 700;
+}
+.tc-help__body {
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+.tc-help__list {
+  margin: 0 0 12px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.tc-help__h {
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+.tc-help__legend {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 6px 12px;
+  align-items: center;
+  margin: 0;
+}
+.tc-help__legend dd {
+  margin: 0;
+}
+</style>

package/components/TaskCalendarReadOnly.vue

@@ -1,6 +1,6 @@
 <template>
     <v-row no-gutters>
-        <v-col cols="12">
+        <v-col v-if="!embedded" cols="12">
             <PageHeader title="Task Calendar"
                 subtitle="Tasks the managing agent assigned to your company at this site. View only - the managing agent marks them done." />
         </v-col>
@@ -16,8 +16,11 @@
                 </button>
             </template>
 
-            <template v-if="error" #no-data>
-                <DashboardEmptyState error />
+            <template #no-data>
+                <DashboardEmptyState v-if="error" error />
+                <div v-else class="tc-ro-empty" data-test="task-calendar-agent-empty">
+                    {{ EMPTY_TEXT[status] || EMPTY_TEXT.planned }}
+                </div>
             </template>
 
             <template v-slot:item.dateTime="{ item }">{{ dueDate(item.dateTime) }}</template>
@@ -54,9 +57,17 @@ import { readListPage } from '../utils/list-page';
 
 const props = defineProps({
     siteId: { type: String, required: true },
+    /** Inside the Task Calendar page (TaskCalendarMain), which has the title and help. */
+    embedded: { type: Boolean, default: false },
 });
 
 const LIMIT = 20;
+// Per tab, in plain words (owner 24 Oct): never a bare "No data available".
+const EMPTY_TEXT: Record<string, string> = {
+    planned: "No jobs from the managing agent yet. When they give your company a job at this site, it shows here.",
+    overdue: "Nothing overdue. Jobs from the managing agent that pass their due date show here.",
+    completed: "No finished jobs yet. Jobs the managing agent marks done show here.",
+};
 const TABS = [
     { name: "Open", status: "planned" },
     { name: "Overdue", status: "overdue" },
@@ -113,3 +124,11 @@ function taskState(task: Record<string, any>) {
     return { label: "Upcoming", color: "primary" };
 }
 </script>
+
+<style scoped>
+.tc-ro-empty {
+    padding: 24px 16px;
+    font-size: var(--fs-cell);
+    color: var(--text2);
+}
+</style>

package/composables/useCleaningSchedules.ts

@@ -1,3 +1,5 @@
+import { checklistPdfName } from "../utils/schedule-task";
+
 export default function useCleaningSchedules() {
   const _cleanerChecklists = ref({
     _id: "",
@@ -199,7 +201,8 @@ export default function useCleaningSchedules() {
     window.URL.revokeObjectURL(downloadUrl);
   }
 
-  async function downloadChecklistPdf(scheduleId: string) {
+  /** `day`: the day the list is for (the row's createdAt), used to name the file. */
+  async function downloadChecklistPdf(scheduleId: string, day?: string | Date) {
     const res = await useNuxtApp().$api<Blob | MediaSource>(
       `/api/hygiene-area-checklist/schedule/${scheduleId}/pdf`,
       {
@@ -210,17 +213,10 @@ export default function useCleaningSchedules() {
 
     if (!res) throw new Error("Error downloading checklist PDF");
 
-    const date = new Date();
-    const formattedDate = `${String(date.getDate()).padStart(2, "0")}_${String(
-      date.getMonth() + 1,
-    ).padStart(2, "0")}_${date.getFullYear()} ${String(
-      date.getHours(),
-    ).padStart(2, "0")}_${String(date.getMinutes()).padStart(2, "0")}`;
-
     const downloadUrl = window.URL.createObjectURL(res);
     const a = document.createElement("a");
     a.href = downloadUrl;
-    a.download = `CHECKLIST_DOWNLOADED_${formattedDate}.pdf`;
+    a.download = checklistPdfName(day);
     a.target = "_blank";
     a.rel = "noopener noreferrer";
     document.body.appendChild(a);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.147.2",
+  "version": "4.148.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/utils/breadcrumb.ts

@@ -26,8 +26,9 @@ const RENAMED: [string, string][] = [
   ["Building Mgmt", "Occupancy Mgmt"],
   ["Event Mgmt", "Task Calendar"],
   // Schedule screens (owner 21 Oct): the same names the menu and the mobile apps use.
-  ["Schedule Task", "Extra Checks"],
-  ["Extra Visits", "Extra Checks"],
+  // Extra Checks live inside the Task Calendar page since 24 Oct 2026.
+  ["Schedule Task", "Task Calendar"],
+  ["Extra Visits", "Task Calendar"],
   ...["Cleaning", "Technician", "Pest", "Pool", "Landscape"].flatMap((t): [string, string][] => [
     [`${t} Schedule Area`, "Area"],
     [`${t} Schedule Unit`, "Unit"],

package/utils/schedule-task.ts

@@ -405,3 +405,48 @@ export function historyUnitLabel(status: string | null | undefined): "Done" | "N
   if (s === "rejected" || s === "needs redo") return "Needs redo";
   return "Missed";
 }
+
+/** "Visit 2": one round of an area's units ("set" in the data). Same word as "Visits per day". */
+export function visitLabel(set: number | string | null | undefined): string {
+  return set === null || set === undefined || set === "" ? "Visit" : `Visit ${set}`;
+}
+
+/**
+ * Is this day's list closed (view only)? The day list says so when it is
+ * opened from there; opened from a link or after a refresh only the rows can
+ * tell, and at midnight the server closes every area and unit at once.
+ */
+export function isClosedDay(
+  dayStatus: string | null | undefined,
+  rows: { status?: string | null; units?: { status?: string | null }[] | null }[] | null | undefined = [],
+): boolean {
+  const closed = (s: unknown) => String(s ?? "").trim().toLowerCase() === "closed";
+  if (closed(dayStatus)) return true;
+  return (rows ?? []).some((r) => closed(r?.status) || (r?.units ?? []).some((u) => closed(u?.status)));
+}
+
+/** "Fri 24 Oct 2026" (Singapore), the day a list is for; "" when unknown. */
+export function dayLabel(value: string | Date | null | undefined): string {
+  if (!value) return "";
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return "";
+  return d.toLocaleDateString("en-SG", {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    timeZone: "Asia/Singapore",
+  });
+}
+
+/**
+ * The saved PDF's name: the DAY the list is for (Singapore), so three past
+ * days downloaded in a row do not all carry today's time.
+ * "Daily-Checklist-2026-10-24.pdf"; without a day, the old download-time name.
+ */
+export function checklistPdfName(day: string | Date | null | undefined, now: Date = new Date()): string {
+  const d = day ? new Date(day) : null;
+  if (d && !Number.isNaN(d.getTime())) return `Daily-Checklist-${sgtParts(d).date}.pdf`;
+  const p = (n: number) => String(n).padStart(2, "0");
+  return `CHECKLIST_DOWNLOADED_${p(now.getDate())}_${p(now.getMonth() + 1)}_${now.getFullYear()} ${p(now.getHours())}_${p(now.getMinutes())}.pdf`;
+}

package/utils/task-calendar-tabs.ts

@@ -0,0 +1,56 @@
+/**
+ * Trade apps' Task Calendar (owner 24 Oct 2026): which tab to show, and the
+ * words of its one help box. Pure: no Vue, unit-tested with `node --test`.
+ */
+
+export type TTaskCalendarTab = "agent" | "extra";
+
+/**
+ * The tab to open: the address (?tab=) when the viewer may see it, else the
+ * page's own start tab (an old Extra Checks link starts on "extra"), else the
+ * first tab the viewer may see. "" = no tab at all (role has neither).
+ */
+export function pickTaskCalendarTab(
+  query: unknown,
+  initial: unknown,
+  allowed: { agent: boolean; extra: boolean },
+): TTaskCalendarTab | "" {
+  const ok = (t: unknown): t is TTaskCalendarTab =>
+    (t === "agent" && allowed.agent) || (t === "extra" && allowed.extra);
+  const asked = Array.isArray(query) ? query[0] : query;
+  if (ok(asked)) return asked;
+  if (ok(initial)) return initial;
+  if (allowed.agent) return "agent";
+  if (allowed.extra) return "extra";
+  return "";
+}
+
+/** One line per status word, only for the tabs the viewer sees. */
+export function taskCalendarWords(show: { agent: boolean; extra: boolean }): { word: string; meaning: string; tone?: "info" | "err" }[] {
+  const words: { word: string; meaning: string; tone?: "info" | "err" }[] = [];
+  if (show.agent) {
+    words.push(
+      { word: "Upcoming", meaning: "Managing agent job, not due yet.", tone: "info" },
+      { word: "Overdue", meaning: "Managing agent job, due date passed and not marked done.", tone: "err" },
+    );
+  }
+  if (show.extra) {
+    words.push(
+      { word: "Active", meaning: "Extra check: it will be added at its next date and time." },
+      { word: "Paused", meaning: "Extra check: stopped for now. Press Resume to start it again." },
+      { word: "Finished", meaning: "Extra check: its last date has passed. Press \"Extend or repeat\" to keep it going." },
+      { word: "In progress", meaning: "Last check: some units are ticked, the rest can still be done today." },
+      { word: "Missed", meaning: "Last check: the day ended with units not done." },
+      { word: "Needs redo", meaning: "Last check: a supervisor sent a unit back to be done again." },
+    );
+  }
+  const done = [
+    show.agent ? "the managing agent marked the job done" : "",
+    show.extra ? "staff ticked every unit of the extra check" : "",
+  ].filter(Boolean);
+  if (done.length) {
+    const text = done.join("; or ");
+    words.push({ word: "Done", meaning: `${text.charAt(0).toUpperCase()}${text.slice(1)}.` });
+  }
+  return words;
+}