@7365admin1/layer-common 4.97.1-staging.595 → 4.97.1-staging.597

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
@@ -451,7 +453,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 ||
@@ -468,6 +470,8 @@ const selectedScheduleStatus = useState<string>(
   () => ""
 );
 
+const selectedScheduleDay = useState<string>("selectedScheduleDay", () => "");
+
 const isItemClosed = (item: any): boolean =>
   String(item?.status ?? "").toLowerCase() === "closed";
 
@@ -483,8 +487,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>
@@ -54,6 +54,8 @@ 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;

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.97.1-staging.595",
+  "version": "4.97.1-staging.597",
   "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;
+}