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

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/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/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.596",
   "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/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;
+}