@7365admin1/layer-common 3.2.2-staging.183 → 3.2.2-staging.189

package/components/DashboardMain.vue

@@ -21,7 +21,7 @@
         <template
           v-if="card.key === 'supplyAlert' && Array.isArray(card.raw?.items)"
         >
-          <div class="d-flex flex-column ga-2 mt-2">
+          <div v-if="card.raw.items.length" class="d-flex flex-column ga-2 mt-2">
             <div
               v-for="item in card.raw.items"
               :key="item._id || item.name"
@@ -31,6 +31,7 @@
               <span class="text-blue-grey">Balance: {{ item.qty }}</span>
             </div>
           </div>
+          <div v-else class="print-kpi-meta mt-2">No supplies recorded</div>
         </template>
         <template v-else>
           <div class="print-kpi-value">{{ card.value }}</div>
@@ -254,6 +255,27 @@
       class="mb-4"
     />
 
+    <!--
+      SAY IT ONCE AT THE TOP, THEN AGAIN WHERE IT HAPPENED. A failed request
+      used to be invisible: zeros in the tiles, "No data to display" in the
+      lists, nothing else. This names what did not load; each tile and panel
+      below carries its own failure too, so nobody has to guess which zero is
+      real. `variant="tonal"` on purpose - Vuetify derives a WHITE label for a
+      filled error alert, which measures 3.60:1 in these themes.
+    -->
+    <v-alert
+      v-if="failedWidgetLabels.length"
+      type="error"
+      variant="tonal"
+      density="compact"
+      icon="mdi-cloud-alert-outline"
+      class="mb-4"
+    >
+      Some of this dashboard could not be loaded ({{
+        failedWidgetLabels.join(", ")
+      }}). The figures for it are missing, not zero — refresh to try again.
+    </v-alert>
+
     <!-- ── KPI Cards ───────────────────────────────────────────────────────── -->
     <v-row dense class="mb-1 align-stretch">
       <v-col
@@ -332,7 +354,11 @@
           <template
             v-if="card.key === 'supplyAlert' && Array.isArray(card.raw?.items)"
           >
-            <div class="d-flex flex-column ga-2">
+            <!--
+              An empty list used to render a title and a blank card - no number,
+              no words, nothing to read. The tile now says what it found.
+            -->
+            <div v-if="card.raw.items.length" class="d-flex flex-column ga-2">
               <div
                 v-for="item in card.raw.items"
                 :key="item._id || item.name"
@@ -342,6 +368,7 @@
                 <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
               </div>
             </div>
+            <DashboardEmptyState v-else compact />
           </template>
         </AppKpiTile>
       </v-col>
@@ -488,7 +515,7 @@
         </div>
       </div>
 
-      <DashboardEmptyState v-else />
+      <DashboardEmptyState v-else :error="chartFailed" />
     </v-card>
 
     <!-- ── Hygiene / M&E / Landscape / Pest / Pool — task + attendance ────── -->
@@ -533,7 +560,7 @@
               </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="taskScheduleFailed" />
         </DashboardPanel>
       </v-col>
 
@@ -565,7 +592,7 @@
               <span class="figma-row-figure">{{ item.totalHours || 0 }} hrs</span>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="attendanceFailed" />
         </DashboardPanel>
       </v-col>
 
@@ -599,7 +626,7 @@
               </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="feedbacksFailed" />
         </DashboardPanel>
       </v-col>
     </v-row>
@@ -644,7 +671,7 @@
                 </button>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -689,7 +716,7 @@
                 </button>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -738,7 +765,7 @@
                 </button>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -774,7 +801,7 @@
                 </div>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -822,7 +849,7 @@
               </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="feedbacksFailed" />
         </DashboardPanel>
       </v-col>
     </v-row>
@@ -899,7 +926,7 @@
                 </div>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -941,7 +968,7 @@
                 <StatusChip :status="item.status || 'On duty'" pill />
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="attendanceFailed" />
           </div>
         </div>
       </v-col>
@@ -977,7 +1004,7 @@
               </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="feedbacksFailed" />
         </DashboardPanel>
       </v-col>
     </v-row>
@@ -1158,6 +1185,15 @@
 </template>
 
 <script setup lang="ts">
+// The one non-auto-imported thing this file needs: the cookie options type, so
+// `runtimeConfig.public.cookieConfig` (typed `unknown`) can be narrowed once
+// rather than at the call site. Same import `useThemePreference.ts` uses.
+import type { CookieOptions } from "#app";
+// Explicitly, not by auto-import: every other component in this layer reaches
+// its utils by relative path (`StatusChip.vue`, `CameraWall.vue`,
+// `plugins/vuetify.ts`), and a bare call resolved to nothing when driven.
+import { buildWorkOrderStatus } from "../utils/dashboard";
+
 // ─── Types ────────────────────────────────────────────────────────────────────
 
 type DashboardMetric = {
@@ -1455,8 +1491,11 @@ const currentVisitorTypeParam = computed(
 // ─── Data Fetching ────────────────────────────────────────────────────────────
 
 // Hygiene / M&E / Landscape / Pest / Pool main metrics
-const { data: getDashboardReq, pending: loadingMetrics } =
-  await useLazyAsyncData(
+const {
+  data: getDashboardReq,
+  pending: loadingMetrics,
+  error: metricsError,
+} = await useLazyAsyncData(
     `get-dashboard-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType && isHygieneMode.value
@@ -1472,8 +1511,11 @@ const { data: getDashboardReq, pending: loadingMetrics } =
   );
 
 // Property / Security main metrics (uses generic getDashboard with visitor type)
-const { data: getDashboardAltReq, pending: loadingAltMetrics } =
-  await useLazyAsyncData(
+const {
+  data: getDashboardAltReq,
+  pending: loadingAltMetrics,
+  error: altMetricsError,
+} = await useLazyAsyncData(
     `get-dashboard-alt-${props.site}-${props.serviceType}`,
     () =>
       props.site && (isPropertyMode.value || isSecurityMode.value)
@@ -1497,8 +1539,11 @@ const { data: getDashboardAltReq, pending: loadingAltMetrics } =
   );
 
 // Weekly activity (all modes)
-const { data: weeklyActivityReq, pending: loadingWeeklyActivity } =
-  await useLazyAsyncData(
+const {
+  data: weeklyActivityReq,
+  pending: loadingWeeklyActivity,
+  error: weeklyActivityError,
+} = await useLazyAsyncData(
     `get-dashboard-weekly-activity-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType
@@ -1514,8 +1559,11 @@ const { data: weeklyActivityReq, pending: loadingWeeklyActivity } =
   );
 
 // Task schedule (hygiene mode only)
-const { data: taskScheduleReq, pending: loadingTaskSchedule } =
-  await useLazyAsyncData(
+const {
+  data: taskScheduleReq,
+  pending: loadingTaskSchedule,
+  error: taskScheduleError,
+} = await useLazyAsyncData(
     `get-dashboard-task-schedule-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType && isHygieneMode.value
@@ -1531,8 +1579,11 @@ const { data: taskScheduleReq, pending: loadingTaskSchedule } =
   );
 
 // Attendance (hygiene + security modes)
-const { data: attendanceReq, pending: loadingAttendance } =
-  await useLazyAsyncData(
+const {
+  data: attendanceReq,
+  pending: loadingAttendance,
+  error: attendanceError,
+} = await useLazyAsyncData(
     `get-dashboard-attendance-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType && !isPropertyMode.value
@@ -1548,8 +1599,11 @@ const { data: attendanceReq, pending: loadingAttendance } =
   );
 
 // Feedbacks (all modes)
-const { data: feedbacksReq, pending: loadingFeedbacks } =
-  await useLazyAsyncData(
+const {
+  data: feedbacksReq,
+  pending: loadingFeedbacks,
+  error: feedbacksError,
+} = await useLazyAsyncData(
     `get-dashboard-feedbacks-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType
@@ -1593,35 +1647,64 @@ const finalLoading = computed(() => {
   );
 });
 
+// ─── Request Failures ─────────────────────────────────────────────────────────
+
+/**
+ * A DEAD API USED TO LOOK EXACTLY LIKE A QUIET DAY.
+ *
+ * Every request's result was read as `x.value ?? <zero>`, so a rejected call
+ * produced the same screen as a site with nothing on it: every tile 0, every
+ * trend +0%, every list "No data to display", and not one word to say the data
+ * never arrived. That ambiguity has cost this estate days before now.
+ *
+ * `useLazyAsyncData` already hands back an `error` ref; these carry it to the
+ * widgets that asked for the data, so a zero on this page is a measurement and
+ * a failure says so.
+ */
+const metricsFailed = computed(() =>
+  Boolean(isHygieneMode.value ? metricsError.value : altMetricsError.value)
+);
+const chartFailed = computed(() => Boolean(weeklyActivityError.value));
+const taskScheduleFailed = computed(() => Boolean(taskScheduleError.value));
+const attendanceFailed = computed(() => Boolean(attendanceError.value));
+const feedbacksFailed = computed(() => Boolean(feedbacksError.value));
+
+/** The header banner - one line, whatever combination failed. */
+const failedWidgetLabels = computed(() => {
+  const labels: string[] = [];
+  if (metricsFailed.value) labels.push("the summary tiles");
+  if (chartFailed.value) labels.push("the activity chart");
+  if (taskScheduleFailed.value && isHygieneMode.value)
+    labels.push(primaryListConfig.value.title.toLowerCase());
+  if (attendanceFailed.value && !isPropertyMode.value) labels.push("staff");
+  if (feedbacksFailed.value) labels.push("feedbacks");
+  return labels;
+});
+
+/** The text a tile or panel shows in place of a figure it does not have. */
+const LOAD_FAILED_TEXT = "Couldn't load";
+
 // ─── Merged Dashboard Data ────────────────────────────────────────────────────
 
 const finalDashboardData = computed<Record<string, any>>(() => {
   if (!props.serviceType) return props.dashboardData || {};
 
-  let weeklyActivity = weeklyActivityReq.value ?? [];
-  const hasNoActivity =
-    !weeklyActivity.length ||
-    weeklyActivity.every(
-      (item: any) =>
-        !item.workOrder &&
-        !item.taskCompleted &&
-        !item.openWorkOrder &&
-        !item.closedWorkOrder &&
-        !item.incidents &&
-        !item.visitors
-    );
-
-  if (hasNoActivity && currentPeriod.value === "thisWeek") {
-    weeklyActivity = [
-      { day: "Mon", workOrder: 800, taskCompleted: 1400 },
-      { day: "Tue", workOrder: 450, taskCompleted: 900 },
-      { day: "Wed", workOrder: 950, taskCompleted: 1640 },
-      { day: "Thu", workOrder: 2000, taskCompleted: 2100 },
-      { day: "Fri", workOrder: 2000, taskCompleted: 2700 },
-      { day: "Sat", workOrder: 2200, taskCompleted: 3100 },
-      { day: "Sun", workOrder: 2800, taskCompleted: 3200 },
-    ];
-  }
+  /**
+   * A QUIET WEEK IS NOT A BUSY ONE.
+   *
+   * This used to substitute a hard-coded seven-day curve - Mon 800/1400 through
+   * Sun 2800/3200 - whenever the week's activity came back with nothing in it,
+   * and draw it as real, y-axis to 3,200. The backend zero-fills one row per
+   * day and never returns an empty array, so "nothing in it" is exactly what a
+   * genuinely quiet site looks like; `?? []` made it exactly what a FAILED
+   * request looks like too. And it left the screen: Export -> Word wrote those
+   * invented figures into a document a manager can hand to a client.
+   *
+   * Deleted outright. An empty week now falls through to `hasChartData` and
+   * renders the empty state, a failed one renders the error state, and the Word
+   * export's chart table is already gated on the same `hasChartData`.
+   */
+  const weeklyActivity = weeklyActivityReq.value ?? [];
 
   // `weekly-activity` returns each interval twice over: `openWorkOrder` and
   // `workOrder` are the same not-yet-completed count, `closedWorkOrder` and
@@ -1760,9 +1843,21 @@ const defaultCardValues: TDashboardCardValue[] = [
   {
     key: "supplyAlert",
     periodKey: "period",
-    title: "Supply Alert",
-    icon: "mdi-alert",
-    color: KPI_TONES.err.color,
+    /**
+     * IT IS NOT AN ALERT, SO IT NO LONGER SAYS ALERT.
+     *
+     * The server returns the three lowest-quantity active supplies and NO
+     * threshold of any kind (new-dashboard.repo.ts) - so 900 gloves appeared
+     * under a red "SUPPLY ALERT" heading with a warning triangle, next to
+     * items that genuinely were low, and nothing distinguished them. The title,
+     * the icon and the tone now describe what the data is.
+     *
+     * A real low-stock alert needs a per-supply reorder level the server does
+     * not hold. That is backend work and is deliberately NOT invented here.
+     */
+    title: "Lowest Stock",
+    icon: "mdi-package-variant",
+    color: KPI_TONES.info.color,
   },
 ];
 
@@ -1837,12 +1932,16 @@ const resolvedCardValues = computed(() => {
 
 // ─── Widget Keys by Mode ──────────────────────────────────────────────────────
 
+// "recentActivity" was in this list and in the Customize dialog, and NOTHING
+// renders it - `isWidgetVisible("recentActivity")` appears nowhere in the
+// template. Five apps offered a switch that did nothing whichever way it was
+// set. Removed rather than built: there is no Recent Activity panel anywhere in
+// the estate to connect it to, and inventing one is a new feature, not a fix.
 const defaultExtraWidgetKeys = [
   "activity",
   "taskSchedule",
   "staffStatus",
   "feedbacks",
-  "recentActivity",
 ];
 
 const propertyDefaultWidgetKeys = [
@@ -1869,6 +1968,36 @@ const securityDefaultWidgetKeys = [
   "feedbacks",
 ];
 
+/**
+ * THE CUSTOMISE CHOICE, REMEMBERED.
+ *
+ * Hiding a widget worked and then forgot: nothing was written anywhere, so a
+ * reload brought every panel back and the dialog was decoration.
+ *
+ * A COOKIE, and specifically the layer's own `cookieConfig` - the same
+ * mechanism `sid`, `user`, `landing-page` and the light/dark preference already
+ * travel on (see `composables/useThemePreference.ts` for the full reasoning).
+ * localStorage would be per-origin, and this is one component shipped into
+ * seven applications on seven hostnames. No new storage mechanism, and no
+ * invented endpoint - there is no save API on the server for this.
+ *
+ * One cookie per dashboard MODE, because the three modes have different widget
+ * sets and a security member's choice must not decide what a hygiene member
+ * sees.
+ */
+const widgetPrefsCookie = useCookie<string[] | null>(
+  `dashboard-widgets-${
+    isPropertyMode.value
+      ? "property"
+      : isSecurityMode.value
+      ? "security"
+      : "service"
+  }`,
+  runtimeConfig.public.cookieConfig as CookieOptions<string[] | null> & {
+    readonly?: false;
+  }
+);
+
 const defaultVisibleWidgetKeys = computed(() => {
   if (props.extraWidgetKeys && props.extraWidgetKeys.length > 0) {
     return [
@@ -1889,8 +2018,16 @@ watch(
   (keys) => {
     const nextKeys = [...keys];
     if (!visibleWidgetKeys.value.length) {
-      visibleWidgetKeys.value = nextKeys;
-      draftVisibleWidgetKeys.value = nextKeys;
+      // A remembered choice wins on first paint, filtered against the keys this
+      // mode actually has so a stale cookie cannot resurrect a removed widget.
+      // `Array.isArray` rather than a length check: "the user hid everything"
+      // and "there is no cookie" are different answers.
+      const remembered = Array.isArray(widgetPrefsCookie.value)
+        ? widgetPrefsCookie.value.filter((k) => nextKeys.includes(k))
+        : null;
+      const initial = remembered ?? nextKeys;
+      visibleWidgetKeys.value = initial;
+      draftVisibleWidgetKeys.value = [...initial];
       return;
     }
     visibleWidgetKeys.value = visibleWidgetKeys.value.filter((k) =>
@@ -1923,7 +2060,7 @@ const customizeWidgets = computed(() => {
         key: "visitors",
         title: "Visitors",
         description:
-          "See today's visitor traffic and who is currently on site.",
+          "See today's visitor traffic, and how many passes are still not checked out.",
       },
       {
         key: "facilityBookings",
@@ -1980,7 +2117,7 @@ const customizeWidgets = computed(() => {
         key: "visitors",
         title: "Visitors",
         description:
-          "See today's visitor traffic and who is currently on site.",
+          "See today's visitor traffic, and how many passes are still not checked out.",
       },
       {
         key: "patrolCompliance",
@@ -2037,11 +2174,6 @@ const customizeWidgets = computed(() => {
       title: "Feedbacks",
       description: "Show recent feedback and resolution state.",
     },
-    {
-      key: "recentActivity",
-      title: "Recent Activity",
-      description: "Latest updates across the service.",
-    },
   ];
 });
 
@@ -2156,7 +2288,7 @@ function getPropertyKpiCards() {
       color: KPI_TONES.info.color,
       tint: KPI_TONES.info.tint,
       value: formatNumber(toNumber(workOrderMetric?.count)),
-      percentage: toNumber(workOrderMetric?.percentage),
+      percentage: toNumberOrNaN(workOrderMetric?.percentage),
       meta: getMetricMeta(workOrderMetric),
       raw: workOrderMetric,
       filter: undefined,
@@ -2168,7 +2300,7 @@ function getPropertyKpiCards() {
       color: KPI_TONES.err.color,
       tint: KPI_TONES.err.tint,
       value: formatNumber(toNumber(incidentMetric?.count)),
-      percentage: toNumber(incidentMetric?.percentage),
+      percentage: toNumberOrNaN(incidentMetric?.percentage),
       meta: getMetricMeta(incidentMetric),
       raw: incidentMetric,
       filter: undefined,
@@ -2180,7 +2312,7 @@ function getPropertyKpiCards() {
       color: KPI_TONES.warn.color,
       tint: KPI_TONES.warn.tint,
       value: formatNumber(toNumber(visitorMetric?.count)),
-      percentage: toNumber(visitorMetric?.percentage),
+      percentage: toNumberOrNaN(visitorMetric?.percentage),
       meta: getMetricMeta(visitorMetric),
       raw: visitorMetric,
       filter: {
@@ -2199,7 +2331,7 @@ function getPropertyKpiCards() {
       color: KPI_TONES.ok.color,
       tint: KPI_TONES.ok.tint,
       value: formatNumber(toNumber(facilityMetric?.count)),
-      percentage: toNumber(facilityMetric?.percentage),
+      percentage: toNumberOrNaN(facilityMetric?.percentage),
       meta: getMetricMeta(facilityMetric),
       raw: facilityMetric,
       filter: undefined,
@@ -2234,7 +2366,7 @@ function getSecurityKpiCards() {
       color: KPI_TONES.info.color,
       tint: KPI_TONES.info.tint,
       value: formatNumber(toNumber(workOrderMetric?.count)),
-      percentage: toNumber(workOrderMetric?.percentage),
+      percentage: toNumberOrNaN(workOrderMetric?.percentage),
       meta: getMetricMeta(workOrderMetric),
       raw: workOrderMetric,
       filter: undefined,
@@ -2246,7 +2378,7 @@ function getSecurityKpiCards() {
       color: KPI_TONES.err.color,
       tint: KPI_TONES.err.tint,
       value: formatNumber(toNumber(incidentMetric?.count)),
-      percentage: toNumber(incidentMetric?.percentage),
+      percentage: toNumberOrNaN(incidentMetric?.percentage),
       meta: getMetricMeta(incidentMetric),
       raw: incidentMetric,
       filter: undefined,
@@ -2258,7 +2390,7 @@ function getSecurityKpiCards() {
       color: KPI_TONES.warn.color,
       tint: KPI_TONES.warn.tint,
       value: formatNumber(toNumber(visitorMetric?.count)),
-      percentage: toNumber(visitorMetric?.percentage),
+      percentage: toNumberOrNaN(visitorMetric?.percentage),
       meta: getMetricMeta(visitorMetric),
       raw: visitorMetric,
       filter: {
@@ -2276,8 +2408,10 @@ function getSecurityKpiCards() {
       icon: "mdi-office-building",
       color: KPI_TONES.ok.color,
       tint: KPI_TONES.ok.tint,
-      value: `${toNumber(patrolMetric?.count)}%`,
-      percentage: toNumber(patrolMetric?.percentage),
+      // Through the shared helper, so a `null` rate (no checkpoint was due)
+      // reads as not-measured here too, not as 0%.
+      value: getMetricValue(patrolMetric, "patrolCompliance"),
+      percentage: toNumberOrNaN(patrolMetric?.percentage),
       meta: getMetricMeta(patrolMetric),
       raw: patrolMetric,
       filter: undefined,
@@ -2285,7 +2419,7 @@ function getSecurityKpiCards() {
   ];
 }
 
-const kpiCards = computed(() => {
+const rawKpiCards = computed(() => {
   if (isPropertyMode.value) return getPropertyKpiCards();
   if (isSecurityMode.value) return getSecurityKpiCards();
 
@@ -2304,7 +2438,7 @@ const kpiCards = computed(() => {
       tint: getCardTint(mapping.color, index),
       color: mapping.color || getCardColor(index),
       value: typeof value === "string" ? value : formatNumber(value),
-      percentage: toNumber(metric.percentage),
+      percentage: toNumberOrNaN(metric.percentage),
       meta: getMetricMeta(metric),
       raw: metric,
       filter: undefined as any,
@@ -2312,6 +2446,22 @@ const kpiCards = computed(() => {
   });
 });
 
+/**
+ * A tile whose request failed shows an em dash and says so, never a zero.
+ * `percentage: NaN` is what suppresses the pill - `kpiChipText()` returns ""
+ * for anything non-finite - and `raw: {}` empties the supply list with it.
+ */
+const kpiCards = computed(() => {
+  if (!metricsFailed.value) return rawKpiCards.value;
+  return rawKpiCards.value.map((card) => ({
+    ...card,
+    value: "—",
+    percentage: NaN,
+    meta: LOAD_FAILED_TEXT,
+    raw: {} as any,
+  }));
+});
+
 const visibleKpiCards = computed(() =>
   kpiCards.value.filter((card) => isWidgetVisible(card.key))
 );
@@ -2534,42 +2684,15 @@ const todayAttentions = computed(() =>
  * is shared by every chip in the estate - or ruling that a chart series is not
  * a status chip. Both are design decisions, so neither is taken here.
  */
-const workOrderStatus = computed(() => {
-  const summary = finalDashboardData.value?.workOrderStatusSummary;
-  const metric = getMetric(["openWorkOrder", "workOrders", "workOrder"]);
-
-  const src = summary || metric;
-  if (!src) return [];
-
-  const completed = Number(src.completed ?? 0);
-  const inProgress = Number(src.inProgress ?? 0);
-  const pending =
-    src.pending !== undefined
-      ? Number(src.pending)
-      : Math.max(0, Number(src.count ?? 0) - inProgress);
-  const max = Math.max(completed, inProgress, pending, 1);
-
-  return [
-    {
-      label: "Completed",
-      value: completed,
-      percent: (completed / max) * 100,
-      color: "var(--ok)",
-    },
-    {
-      label: "In Progress",
-      value: inProgress,
-      percent: (inProgress / max) * 100,
-      color: "var(--err)",
-    },
-    {
-      label: "Pending",
-      value: pending,
-      percent: (pending / max) * 100,
-      color: "var(--warn)",
-    },
-  ];
-});
+const workOrderStatus = computed(() =>
+  // The arithmetic and the "no breakdown, no bars" rule live in
+  // `utils/dashboard.ts` so they have a test; the tone -> token mapping stays
+  // here because it is this template's colour question, not the server's.
+  buildWorkOrderStatus(finalDashboardData.value?.workOrderStatus).map((row) => ({
+    ...row,
+    color: `var(--${row.tone})`,
+  }))
+);
 
 // Security-mode lists
 const activePatrolItems = computed<any[]>(
@@ -2762,7 +2885,21 @@ onUnmounted(() => {
 watch(selectedRange, (period) => {
   if (props.serviceType) {
     const apiPeriod = periodValue[period];
-    if (apiPeriod) currentPeriod.value = apiPeriod;
+    if (apiPeriod) {
+      currentPeriod.value = apiPeriod;
+      /**
+       * The component already READ `?period=` on mount and never wrote it
+       * back, so a refresh - or a link sent to a colleague - silently returned
+       * to Today while the button still said This Month. Writing it closes
+       * both. `replace`, not `push`: changing the range is not a navigation
+       * step the Back button should have to walk through.
+       *
+       * What each range MEANS is untouched here.
+       */
+      if (route.query.period !== apiPeriod) {
+        router.replace({ query: { ...route.query, period: apiPeriod } });
+      }
+    }
   }
   emit("updatePeriod", { key: "__all__", period });
 });
@@ -2782,7 +2919,9 @@ function getMetric(keys: string[]): DashboardMetric {
 
 function getMetricValue(metric: DashboardMetric, key?: string) {
   if (key === "patrolCompliance") {
-    return `${formatNumber(toNumber(metric.count))}%`;
+    const rate = toNumberOrNaN(metric.count);
+    // `null` = no checkpoint was due in this period. Not 0%, not 100%.
+    return Number.isFinite(rate) ? `${formatNumber(rate)}%` : "—";
   }
   const completed = toNumber(metric.completed);
   const total = toNumber(metric.total);
@@ -2800,11 +2939,18 @@ function getMetricMeta(metric: DashboardMetric) {
     parts.push(`${formatNumber(toNumber(metric.inProgress))} in progress`);
   if (typeof metric.pending !== "undefined")
     parts.push(`${formatNumber(toNumber(metric.pending))} pending`);
-  if (typeof metric.highSeverity !== "undefined")
+  // `null` here is the API saying incident severity is not recorded at all.
+  // Printing "0 high severity" would answer a question nothing measured.
+  if (metric.highSeverity !== undefined && metric.highSeverity !== null)
     parts.push(`${formatNumber(toNumber(metric.highSeverity))} high severity`);
-  if (typeof metric.currentlyOnSite !== "undefined")
+  // NOT a live occupancy figure. The server counts every visitor transaction
+  // with a check-in and no check-out, with NO date bound, and nothing in the
+  // product ever closes a stale one - so a pass left open years ago is still
+  // in here. Say what it counts. Same wording the Visitor Management screen
+  // already uses for the same filter ("Not Checked Out").
+  if (metric.currentlyOnSite !== undefined && metric.currentlyOnSite !== null)
     parts.push(
-      `${formatNumber(toNumber(metric.currentlyOnSite))} currently on site`
+      `${formatNumber(toNumber(metric.currentlyOnSite))} not checked out (all time)`
     );
   if (
     typeof (metric as any).missedCheckpoints !== "undefined" ||
@@ -3341,6 +3487,9 @@ function resetCustomizeDraft() {
 
 function submitCustomize() {
   visibleWidgetKeys.value = [...draftVisibleWidgetKeys.value];
+  // The write is the whole point - see `widgetPrefsCookie`. Saving on Submit
+  // rather than on every switch keeps Cancel meaning cancel.
+  widgetPrefsCookie.value = [...draftVisibleWidgetKeys.value];
   widgetSearch.value = "";
   customizeDialog.value = false;
 }
@@ -3440,6 +3589,13 @@ async function exportDashboard(format: "PDF" | "Word") {
 <body>
   <h1>${props.title || dashboardTitle.value}</h1>
   <div class="subtitle">Site: ${siteName} | Period: ${periodLabel}</div>
+  ${
+    failedWidgetLabels.value.length
+      ? `<div class="subtitle" style="color:#b73535;">Incomplete report: ${failedWidgetLabels.value.join(
+          ", "
+        )} could not be loaded. Any figure shown as — is missing, not zero.</div>`
+      : ""
+  }
       `;
 
       if (visibleKpiCards.value && visibleKpiCards.value.length > 0) {
@@ -3452,6 +3608,9 @@ async function exportDashboard(format: "PDF" | "Word") {
           let kpiValueHtml = `<div class="kpi-value">${card.value}</div>`;
           if (card.key === "supplyAlert" && Array.isArray(card.raw?.items)) {
             kpiValueHtml = '<div style="font-size: 9pt; margin-top: 4px;">';
+            if (!card.raw.items.length) {
+              kpiValueHtml += "<div>No supplies recorded</div>";
+            }
             card.raw.items.forEach((item: any) => {
               kpiValueHtml += `<div><strong>${item.name}</strong>: Balance ${item.qty}</div>`;
             });
@@ -3757,6 +3916,21 @@ function toNumber(value: any) {
   return Number.isFinite(n) ? n : 0;
 }
 
+/**
+ * A figure the server may report as "not measured".
+ *
+ * `toNumber()` turns `null` into `0`, which is wrong for anything the API
+ * deliberately sends as `null` - a trend with no prior period to compare
+ * against, a compliance rate with no checkpoint due, a severity the incident
+ * form never records. Those must read as absent, not as zero. `NaN` is what
+ * the tile already treats as "no pill" / "no figure".
+ */
+function toNumberOrNaN(value: any) {
+  if (value === null || value === undefined || value === "") return NaN;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : NaN;
+}
+
 function normalizeStatus(value: any) {
   const text = String(value || "").trim();
   if (!text) return "To-Do";