@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

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>
@@ -66,7 +67,7 @@
             :y="label.y"
             text-anchor="end"
             alignment-baseline="middle"
-            style="fill: #7e8b96; font-size: 11px; font-weight: 500"
+            style="fill: #64748b; font-size: 11px; font-weight: 500"
           >
             {{ label.text }}
           </text>
@@ -112,14 +113,15 @@
             :x="label.x"
             y="246"
             text-anchor="middle"
-            style="fill: #7e8b96; font-size: 12px; font-weight: 600"
+            style="fill: #64748b; font-size: 12px; font-weight: 600"
           >
             {{ label.text }}
           </text>
         </svg>
         <div class="d-flex align-center justify-center ga-5 mt-2">
           <span
-            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-blue-grey"
+            class="d-inline-flex align-center ga-2 text-caption font-weight-bold"
+            style="color: #64748b"
           >
             <span
               class="rounded-circle"
@@ -133,7 +135,8 @@
             {{ primaryLegendLabel }}
           </span>
           <span
-            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-blue-grey"
+            class="d-inline-flex align-center ga-2 text-caption font-weight-bold"
+            style="color: #64748b"
           >
             <span
               class="rounded-circle"
@@ -203,46 +206,36 @@
 
   <section v-else class="unified-dashboard pb-8">
     <!-- ── Header ──────────────────────────────────────────────────────────── -->
-    <div
-      class="d-flex flex-column flex-md-row align-md-start justify-space-between ga-5 mb-6"
+    <PageHeader
+      :title="dashboardTitle"
+      :subtitle="currentSiteName || 'Selected site'"
+      subtitle-icon="mdi-map-marker"
     >
-      <div>
-        <h1 class="text-h5 font-weight-black text-blue-grey-darken-4 mb-0">
-          {{ dashboardTitle }}
-        </h1>
-        <div class="d-flex align-center text-blue-grey ga-1 mt-2 text-caption">
-          <v-icon icon="mdi-map-marker" size="16" />
-          <span>{{ currentSiteName || "Selected site" }}</span>
-        </div>
-      </div>
-
-      <div
-        v-if="showHeaderActions"
-        class="d-flex flex-wrap align-center justify-md-end ga-3"
-      >
-        <v-btn
-          variant="outlined"
-          color="blue-grey-darken-1"
-          class="text-none font-weight-bold"
-          prepend-icon="mdi-tune-variant"
+      <!--
+        The design's three actions: two 38px ghost buttons and the accent
+        segmented control. Same dialog, same export menu, same range model -
+        `Customize Dashboard` and `Export` shorten to the labels the prototype
+        prints, and the export menu keeps both of its formats.
+      -->
+      <template v-if="showHeaderActions" #actions>
+        <AppButton
+          variant="ghost"
+          icon="mdi-tune-variant"
           @click="openCustomizeDialog"
         >
-          Customize Dashboard
-        </v-btn>
+          Customize
+        </AppButton>
 
         <v-menu>
           <template #activator="{ props: menuProps }">
-            <v-btn
+            <AppButton
               v-bind="menuProps"
-              variant="outlined"
-              color="blue-grey-darken-1"
-              class="text-none font-weight-bold"
-              append-icon="mdi-chevron-down"
-              :loading="isExporting"
+              variant="ghost"
+              icon="mdi-download-outline"
               :disabled="isExporting"
             >
               Export
-            </v-btn>
+            </AppButton>
           </template>
 
           <v-list density="compact" border rounded="lg" elevation="3">
@@ -251,36 +244,9 @@
           </v-list>
         </v-menu>
 
-        <v-btn-toggle
-          v-model="selectedRange"
-          mandatory
-          density="comfortable"
-          divided
-          variant="outlined"
-          class="bg-white"
-          style="border-radius: 8px; border-color: #d9e1e8"
-        >
-          <v-btn
-            v-for="range in rangeOptions"
-            :key="range.value"
-            :value="range.value"
-            class="text-none"
-            size="small"
-            :style="
-              selectedRange === range.value
-                ? {
-                    backgroundColor: '#e2e8f0',
-                    color: '#0b2f47',
-                    fontWeight: '600',
-                  }
-                : { backgroundColor: 'transparent', color: '#64748b' }
-            "
-          >
-            {{ range.label }}
-          </v-btn>
-        </v-btn-toggle>
-      </div>
-    </div>
+        <AppSegmented v-model="selectedRange" :options="rangeOptions" />
+      </template>
+    </PageHeader>
 
     <v-progress-linear
       v-if="finalLoading"
@@ -289,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
@@ -300,22 +287,24 @@
         lg="3"
         class="d-flex"
       >
-        <v-card
-          flat
-          border
-          rounded="lg"
-          class="pa-4 flex-grow-1"
-          style="min-height: 158px"
+        <!--
+          The same figures the tile has always shown, in the arrangement the
+          handoff draws them: icon and label on one row, the number with its
+          percentage pill beside it, the sub-line under both. The filter menu
+          and the facility "View All" keep their place at the end of the first
+          row and do exactly what they did.
+        -->
+        <AppKpiTile
+          :icon="card.icon"
+          :tint="card.tint"
+          :color="card.color"
+          :label="card.title"
+          :value="card.value"
+          :chip="kpiChipText(card)"
+          :down="Number(card.percentage) < 0"
+          :sub="card.meta"
         >
-          <div class="d-flex align-start justify-space-between">
-            <div
-              class="d-inline-flex align-center justify-center rounded-lg"
-              style="height: 28px; width: 28px; flex-shrink: 0"
-              :style="{ backgroundColor: card.tint }"
-            >
-              <v-icon :icon="card.icon" :color="card.color" size="15" />
-            </div>
-
+          <template v-if="card.filter || card.key === 'facilityBookings'" #action>
             <v-menu v-if="card.filter" v-model="filterMenus[card.key]">
               <template #activator="{ props: menuProps }">
                 <v-btn
@@ -359,61 +348,29 @@
             >
               View All
             </button>
-          </div>
+          </template>
 
-          <div class="mt-6 w-100">
-            <p
-              class="text-caption font-weight-black text-uppercase text-blue-grey-darken-2 mb-3"
-            >
-              {{ card.title }}
-            </p>
-            <template
-              v-if="
-                card.key === 'supplyAlert' && Array.isArray(card.raw?.items)
-              "
-            >
-              <div class="d-flex flex-column ga-2 mt-2">
-                <div
-                  v-for="item in card.raw.items"
-                  :key="item._id || item.name"
-                  class="d-flex justify-space-between text-body-2 text-blue-grey-darken-4 font-weight-medium"
-                >
-                  <span>{{ item.name }}</span>
-                  <span class="text-blue-grey">Balance: {{ item.qty }}</span>
-                </div>
-              </div>
-            </template>
-            <template v-else>
-              <div class="d-flex align-center mb-3" style="min-height: 31px">
-                <span class="text-h5 font-weight-black text-blue-grey-darken-4">
-                  {{ card.value }}
-                </span>
-              </div>
-              <div class="d-flex align-center flex-wrap ga-2">
-                <span v-if="card.meta" class="text-caption text-blue-grey">{{
-                  card.meta
-                }}</span>
-                <v-chip
-                  :color="card.percentage >= 0 ? 'success' : 'error'"
-                  size="x-small"
-                  variant="flat"
-                  class="font-weight-bold"
-                >
-                  <v-icon
-                    :icon="
-                      card.percentage >= 0
-                        ? 'mdi-arrow-up-right'
-                        : 'mdi-arrow-down-right'
-                    "
-                    size="13"
-                    start
-                  />
-                  {{ Math.abs(card.percentage) }}%
-                </v-chip>
+          <!-- The supply tile lists items instead of counting one figure. -->
+          <template
+            v-if="card.key === 'supplyAlert' && Array.isArray(card.raw?.items)"
+          >
+            <!--
+              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"
+                class="d-flex justify-space-between text-body-2 text-high-emphasis font-weight-medium"
+              >
+                <span>{{ item.name }}</span>
+                <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
               </div>
-            </template>
-          </div>
-        </v-card>
+            </div>
+            <DashboardEmptyState v-else compact />
+          </template>
+        </AppKpiTile>
       </v-col>
     </v-row>
 
@@ -421,16 +378,37 @@
     <v-card
       v-if="isWidgetVisible('activity')"
       flat
-      border
-      rounded="lg"
-      class="px-5 pt-4 pb-3 mt-3"
+      class="dashboard-card px-5 pt-4 pb-3 mt-3"
     >
       <div class="d-flex align-center justify-space-between">
-        <h2 class="text-body-1 font-weight-black text-blue-grey-darken-4 mb-0">
+        <h2 class="dashboard-card-title mb-0">
           {{ activityTitle }}
         </h2>
       </div>
 
+      <!--
+        THE TWO SERIES COLOURS STAY LITERAL, AND HERE IS WHY.
+
+        Everything else in this chart already follows the theme - the gridlines,
+        the axis labels and the ring around each dot are all Vuetify theme vars.
+        The two series are not, and they are the only chart colours in the file
+        that are still hexes.
+
+        They are left that way deliberately. The handoff names no chart palette
+        at all (searched: no "chart", no "legend", no "graph", and neither hex
+        appears anywhere in it), so the fallback rule is "use the token the
+        literal was already imitating". `#e53935` is plainly `--err`. `#ff9b9b`
+        is a second, softer red, and the palette has no second red - the only
+        other red token is `--err-bg`, a 10%-alpha FILL that would be invisible
+        as a 3px line. Re-pointing just one of them would collapse the pair in
+        dark mode, where `--err` is `rgb(229,115,115)` and would sit almost on
+        top of `#ff9b9b`'s `rgb(255,155,155)` - two lines the reader could no
+        longer tell apart. That is the same "do not merge two series into one
+        colour" trap as the Work Order Status bars below.
+
+        So: a two-series chart palette is missing from the design system, and
+        that is a designer question, not something to invent here.
+      -->
       <div v-if="hasChartData" class="mt-4" ref="chartContainerRef">
         <svg
           :viewBox="`0 0 ${chartWidth} 260`"
@@ -444,7 +422,7 @@
             :y1="tick"
             :x2="chartWidth - 20"
             :y2="tick"
-            style="stroke: #e9eef2; stroke-width: 1"
+            style="stroke: rgba(var(--v-theme-on-surface), 0.12); stroke-width: 1"
           />
           <text
             v-for="label in chartYLabels"
@@ -453,7 +431,7 @@
             :y="label.y"
             text-anchor="end"
             alignment-baseline="middle"
-            style="fill: #7e8b96; font-size: 11px; font-weight: 500"
+            style="fill: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); font-size: 11px; font-weight: 500"
           >
             {{ label.text }}
           </text>
@@ -483,7 +461,7 @@
             :cx="point.x"
             :cy="point.y"
             r="4"
-            style="fill: #ff9b9b; stroke: #fff; stroke-width: 2"
+            style="fill: #ff9b9b; stroke: rgb(var(--v-theme-surface)); stroke-width: 2"
           />
           <circle
             v-for="point in secondaryDots"
@@ -491,7 +469,7 @@
             :cx="point.x"
             :cy="point.y"
             r="4"
-            style="fill: #e53935; stroke: #fff; stroke-width: 2"
+            style="fill: #e53935; stroke: rgb(var(--v-theme-surface)); stroke-width: 2"
           />
           <text
             v-for="label in chartAxisLabels"
@@ -499,7 +477,7 @@
             :x="label.x"
             y="246"
             text-anchor="middle"
-            style="fill: #7e8b96; font-size: 12px; font-weight: 600"
+            style="fill: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); font-size: 12px; font-weight: 600"
           >
             {{ label.text }}
           </text>
@@ -507,7 +485,7 @@
 
         <div class="d-flex align-center justify-center ga-5 mt-2">
           <span
-            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-blue-grey"
+            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-medium-emphasis"
           >
             <span
               class="rounded-circle"
@@ -521,7 +499,7 @@
             {{ primaryLegendLabel }}
           </span>
           <span
-            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-blue-grey"
+            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-medium-emphasis"
           >
             <span
               class="rounded-circle"
@@ -537,7 +515,7 @@
         </div>
       </div>
 
-      <DashboardEmptyState v-else />
+      <DashboardEmptyState v-else :error="chartFailed" />
     </v-card>
 
     <!-- ── Hygiene / M&E / Landscape / Pest / Pool — task + attendance ────── -->
@@ -553,58 +531,36 @@
           action-label="View All"
           @action="goToDashboardRoute(primaryListConfig.route)"
         >
-          <div v-if="taskScheduleItems.length" class="d-flex flex-column ga-3">
-            <v-card
+          <div v-if="taskScheduleItems.length" class="figma-list">
+            <div
               v-for="item in taskScheduleItems"
               :key="item.id"
-              flat
-              border
-              rounded="lg"
-              class="pa-3"
+              class="figma-list-row figma-list-row--wide"
             >
-              <div class="d-flex align-center flex-wrap ga-3">
-                <div class="flex-grow-1" style="min-width: 0">
-                  <div
-                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
-                  >
-                    {{ item.title }}
-                  </div>
-                  <div class="text-caption text-blue-grey mt-1 text-truncate">
-                    {{ item.subtitle
-                    }}<template v-if="item.subtitle && item.time">
-                      &bull; </template
-                    >{{ item.time }}
-                  </div>
-                </div>
-                <div
-                  class="d-flex align-center ga-2 text-caption text-blue-grey"
-                >
-                  <AvatarMain :name="item.person" :size="30" />
-                  <span class="text-truncate" style="max-width: 100px">{{
-                    item.person
-                  }}</span>
-                </div>
-                <v-chip
-                  size="small"
-                  :color="getStatusTone(item.status)"
-                  variant="tonal"
-                  label
-                >
-                  {{ item.status }}
-                </v-chip>
-                <v-btn
-                  variant="outlined"
-                  color="primary"
-                  size="small"
-                  class="text-none font-weight-bold"
-                  @click="goToListItem(item, primaryListConfig.route)"
-                >
-                  View
-                </v-btn>
+              <div class="figma-list-main">
+                <strong>{{ item.title }}</strong>
+                <p v-if="item.subtitle || item.time">
+                  {{ item.subtitle
+                  }}<template v-if="item.subtitle && item.time">
+                    &bull; </template
+                  >{{ item.time }}
+                </p>
               </div>
-            </v-card>
+              <div class="figma-list-person">
+                <AvatarMain :name="item.person" :size="30" />
+                <span>{{ item.person }}</span>
+              </div>
+              <StatusChip :status="item.status" pill />
+              <button
+                class="figma-row-action"
+                type="button"
+                @click="goToListItem(item, primaryListConfig.route)"
+              >
+                View
+              </button>
+            </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="taskScheduleFailed" />
         </DashboardPanel>
       </v-col>
 
@@ -619,40 +575,24 @@
           action-label="View All"
           @action="goToDashboardRoute('attendance')"
         >
-          <div v-if="staffStatusItems.length" class="d-flex flex-column ga-3">
-            <v-card
+          <div v-if="staffStatusItems.length" class="figma-list">
+            <div
               v-for="item in staffStatusItems"
               :key="item.id"
-              flat
-              border
-              rounded="lg"
-              class="pa-3"
+              class="figma-list-row"
             >
-              <div class="d-flex align-start ga-3">
-                <AvatarMain :name="item.name" :size="32" />
-                <div class="flex-grow-1" style="min-width: 0">
-                  <div
-                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
-                  >
-                    {{ item.name }}
-                  </div>
-                  <div class="text-caption text-blue-grey mt-1 text-truncate">
-                    {{ item.role }}
-                  </div>
-                </div>
-                <v-chip
-                  size="small"
-                  color="blue-grey-darken-1"
-                  variant="tonal"
-                  label
-                  class="ml-auto flex-shrink-0 font-weight-bold"
-                >
-                  {{ item.totalHours || 0 }} hrs
-                </v-chip>
+              <AvatarMain :name="item.name" :size="32" />
+              <div class="figma-list-main">
+                <strong>{{ item.name }}</strong>
+                <p v-if="item.role">{{ item.role }}</p>
               </div>
-            </v-card>
+              <!-- Hours are a FIGURE, not a status: no tone to read, so the
+                   design's neutral pill rather than a StatusChip, which would
+                   have coloured "8 hrs" as if it were a word it knows. -->
+              <span class="figma-row-figure">{{ item.totalHours || 0 }} hrs</span>
+            </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="attendanceFailed" />
         </DashboardPanel>
       </v-col>
 
@@ -662,79 +602,31 @@
           action-label="View All"
           @action="goToDashboardRoute('feedbacks')"
         >
-          <div v-if="feedbackItems.length" class="figma-list mt-2">
+          <div v-if="feedbackItems.length" class="figma-list">
             <div
               v-for="item in feedbackItems"
               :key="item.id"
-              class="d-flex align-center justify-space-between"
-              style="
-                padding: 16px 20px;
-                border: 1px solid #e2e8f0;
-                border-radius: 12px;
-                margin-bottom: 12px;
-                background-color: #ffffff;
-                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
-              "
+              class="figma-list-row figma-list-row--wide"
             >
-              <div style="flex: 1; min-width: 140px">
-                <strong
-                  style="
-                    display: block;
-                    font-size: 15px;
-                    font-weight: 700;
-                    color: #0b2f47;
-                    margin-bottom: 4px;
-                  "
-                  >{{ item.title }}</strong
-                >
-                <span style="font-size: 13px; color: #94a3b8">{{
-                  item.subtitle
-                }}</span>
-              </div>
-
-              <div
-                style="flex: 1; display: flex; align-items: center; gap: 12px"
-              >
-                <AvatarMain :name="item.person" :size="36" />
-                <span style="font-size: 14px; color: #64748b">{{
-                  item.person
-                }}</span>
-              </div>
-
-              <div style="flex: 1; display: flex; justify-content: center">
-                <div
-                  :style="getStatusPillStyle(item.status)"
-                  style="
-                    padding: 6px 16px;
-                    border-radius: 20px;
-                    font-size: 13px;
-                    font-weight: 500;
-                    text-transform: capitalize;
-                  "
-                >
-                  {{ item.status || "To-Do" }}
-                </div>
+              <div class="figma-list-main">
+                <strong>{{ item.title }}</strong>
+                <p v-if="item.subtitle">{{ item.subtitle }}</p>
               </div>
-
-              <div style="flex: 0 0 auto; text-align: right">
-                <v-btn
-                  variant="outlined"
-                  class="text-none font-weight-medium"
-                  size="small"
-                  color="#3b82f6"
-                  style="
-                    border-color: #e2e8f0;
-                    border-radius: 8px;
-                    padding: 0 16px;
-                    height: 32px;
-                  "
-                  @click="goToListItem(item, 'feedbacks')"
-                  >View</v-btn
-                >
+              <div class="figma-list-person">
+                <AvatarMain :name="item.person" :size="30" />
+                <span>{{ item.person }}</span>
               </div>
+              <StatusChip :status="item.status || 'To-Do'" pill />
+              <button
+                class="figma-row-action"
+                type="button"
+                @click="goToListItem(item, 'feedbacks')"
+              >
+                View
+              </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="feedbacksFailed" />
         </DashboardPanel>
       </v-col>
     </v-row>
@@ -779,7 +671,7 @@
                 </button>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -824,7 +716,7 @@
                 </button>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -832,7 +724,7 @@
       <v-col v-if="isWidgetVisible('todayAttentions')" cols="12" lg="6">
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
-            <h2>Today's Attentions</h2>
+            <h2>Needs Attention</h2>
           </div>
           <div class="figma-panel-body">
             <div v-if="todayAttentions.length" class="figma-list">
@@ -873,7 +765,7 @@
                 </button>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -909,7 +801,7 @@
                 </div>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -957,7 +849,7 @@
               </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="feedbacksFailed" />
         </DashboardPanel>
       </v-col>
     </v-row>
@@ -967,7 +859,7 @@
       <v-col v-if="isWidgetVisible('activePatrol')" cols="12" lg="6">
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
-            <h2>ACTIVE PATROL</h2>
+            <h2>Active Patrol</h2>
             <button
               class="figma-panel-action"
               type="button"
@@ -1022,24 +914,19 @@
                 </div>
 
                 <div class="active-patrol-action">
-                  <v-btn
-                    variant="outlined"
-                    class="text-none font-weight-medium"
-                    size="small"
-                    color="#3b82f6"
-                    style="
-                      border-color: #e2e8f0;
-                      border-radius: 8px;
-                      padding: 0 16px;
-                      height: 32px;
-                    "
+                  <!-- Chrome only: the route and the Virtual Patrol flow
+                       behind it are unchanged. -->
+                  <button
+                    class="figma-row-action"
+                    type="button"
                     @click="goToDashboardRoute('virtual-patrol')"
-                    >View</v-btn
                   >
+                    View
+                  </button>
                 </div>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -1047,7 +934,7 @@
       <v-col v-if="isWidgetVisible('staffStatus')" cols="12" lg="6">
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
-            <h2>STAFF STATUS</h2>
+            <h2>Staff Status</h2>
             <button
               class="figma-panel-action"
               type="button"
@@ -1057,65 +944,31 @@
             </button>
           </div>
           <div class="figma-panel-body">
-            <div v-if="securityStaffItems.length" class="figma-list mt-2">
+            <div v-if="securityStaffItems.length" class="figma-list">
               <div
                 v-for="item in securityStaffItems"
                 :key="item._id || item.id"
-                class="d-flex align-center justify-space-between"
-                style="
-                  padding: 16px 20px;
-                  border: 1px solid #e2e8f0;
-                  border-radius: 12px;
-                  margin-bottom: 12px;
-                  background-color: #ffffff;
-                  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
-                "
+                class="figma-list-row"
               >
-                <div style="display: flex; align-items: center; gap: 16px">
-                  <AvatarMain
-                    :name="
-                      item.personName ||
-                      item.employeeName ||
-                      item.userName ||
-                      'Unassigned'
-                    "
-                    :size="40"
-                  />
-                  <div>
-                    <strong
-                      style="
-                        display: block;
-                        font-size: 15px;
-                        font-weight: 700;
-                        color: #0b2f47;
-                        margin-bottom: 4px;
-                      "
-                      >{{
-                        item.userName || item.personName || "Unassigned"
-                      }}</strong
-                    >
-                    <span style="font-size: 13px; color: #94a3b8">{{
-                      item.role || item.designation || "Officer"
-                    }}</span>
-                  </div>
-                </div>
-
-                <div style="flex: 0 0 auto">
-                  <div
-                    :style="getStaffStatusPillStyle(item.status)"
-                    style="
-                      padding: 6px 16px;
-                      border-radius: 20px;
-                      font-size: 13px;
-                      font-weight: 500;
-                    "
-                  >
-                    {{ item.status || "On duty" }}
-                  </div>
+                <AvatarMain
+                  :name="
+                    item.personName ||
+                    item.employeeName ||
+                    item.userName ||
+                    'Unassigned'
+                  "
+                  :size="32"
+                />
+                <div class="figma-list-main">
+                  <strong>{{
+                    item.userName || item.personName || "Unassigned"
+                  }}</strong>
+                  <p>{{ item.role || item.designation || "Officer" }}</p>
                 </div>
+                <StatusChip :status="item.status || 'On duty'" pill />
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="attendanceFailed" />
           </div>
         </div>
       </v-col>
@@ -1127,79 +980,31 @@
           action-label="View All"
           @action="goToDashboardRoute('feedbacks')"
         >
-          <div v-if="feedbackItems.length" class="figma-list mt-2">
+          <div v-if="feedbackItems.length" class="figma-list">
             <div
               v-for="item in feedbackItems"
               :key="item.id"
-              class="d-flex align-center justify-space-between"
-              style="
-                padding: 16px 20px;
-                border: 1px solid #e2e8f0;
-                border-radius: 12px;
-                margin-bottom: 12px;
-                background-color: #ffffff;
-                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
-              "
+              class="figma-list-row figma-list-row--wide"
             >
-              <div style="flex: 1; min-width: 140px">
-                <strong
-                  style="
-                    display: block;
-                    font-size: 15px;
-                    font-weight: 700;
-                    color: #0b2f47;
-                    margin-bottom: 4px;
-                  "
-                  >{{ item.title }}</strong
-                >
-                <span style="font-size: 13px; color: #94a3b8">{{
-                  item.subtitle
-                }}</span>
-              </div>
-
-              <div
-                style="flex: 1; display: flex; align-items: center; gap: 12px"
-              >
-                <AvatarMain :name="item.person" :size="36" />
-                <span style="font-size: 14px; color: #64748b">{{
-                  item.person
-                }}</span>
-              </div>
-
-              <div style="flex: 1; display: flex; justify-content: center">
-                <div
-                  :style="getStatusPillStyle(item.status)"
-                  style="
-                    padding: 6px 16px;
-                    border-radius: 20px;
-                    font-size: 13px;
-                    font-weight: 500;
-                    text-transform: capitalize;
-                  "
-                >
-                  {{ item.status || "To-Do" }}
-                </div>
+              <div class="figma-list-main">
+                <strong>{{ item.title }}</strong>
+                <p v-if="item.subtitle">{{ item.subtitle }}</p>
               </div>
-
-              <div style="flex: 0 0 auto; text-align: right">
-                <v-btn
-                  variant="outlined"
-                  class="text-none font-weight-medium"
-                  size="small"
-                  color="#3b82f6"
-                  style="
-                    border-color: #e2e8f0;
-                    border-radius: 8px;
-                    padding: 0 16px;
-                    height: 32px;
-                  "
-                  @click="goToListItem(item, 'feedbacks')"
-                  >View</v-btn
-                >
+              <div class="figma-list-person">
+                <AvatarMain :name="item.person" :size="30" />
+                <span>{{ item.person }}</span>
               </div>
+              <StatusChip :status="item.status || 'To-Do'" pill />
+              <button
+                class="figma-row-action"
+                type="button"
+                @click="goToListItem(item, 'feedbacks')"
+              >
+                View
+              </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="feedbacksFailed" />
         </DashboardPanel>
       </v-col>
     </v-row>
@@ -1211,10 +1016,10 @@
           class="d-flex align-start justify-space-between pa-6 pb-4 border-b"
         >
           <div>
-            <div class="text-h6 font-weight-black text-blue-grey-darken-4">
+            <div class="text-h6 font-weight-black text-high-emphasis">
               Customize Dashboard
             </div>
-            <div class="text-caption text-blue-grey mt-1">
+            <div class="text-caption text-medium-emphasis mt-1">
               Select which widgets to display on your dashboard
             </div>
           </div>
@@ -1240,7 +1045,6 @@
           <div class="d-flex justify-end mt-3 mb-1">
             <v-btn
               variant="text"
-              color="blue-grey-darken-4"
               size="small"
               class="text-none font-weight-bold"
               prepend-icon="mdi-refresh"
@@ -1262,11 +1066,11 @@
               <div class="d-flex align-center justify-space-between ga-4">
                 <div>
                   <div
-                    class="text-body-2 font-weight-black text-blue-grey-darken-4"
+                    class="text-body-2 font-weight-black text-high-emphasis"
                   >
                     {{ widget.title }}
                   </div>
-                  <div class="text-caption text-blue-grey mt-1">
+                  <div class="text-caption text-medium-emphasis mt-1">
                     {{ widget.description }}
                   </div>
                 </div>
@@ -1292,7 +1096,7 @@
         <v-card-actions class="pa-6 pt-4 border-t justify-end ga-3">
           <v-btn
             variant="text"
-            class="text-none font-weight-bold text-blue-grey"
+            class="text-none font-weight-bold text-medium-emphasis"
             @click="cancelCustomize"
           >
             Cancel
@@ -1320,7 +1124,7 @@
         <v-card-title
           class="d-flex align-center justify-space-between pa-6 pb-3"
         >
-          <div class="text-body-1 font-weight-black text-blue-grey-darken-4">
+          <div class="text-body-1 font-weight-black text-high-emphasis">
             Facility Booking
           </div>
           <v-btn
@@ -1381,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 = {
@@ -1678,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
@@ -1695,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)
@@ -1720,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
@@ -1737,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
@@ -1754,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
@@ -1771,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
@@ -1816,44 +1647,82 @@ 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
+  // `taskCompleted` the same completed count. Carry BOTH names - the Word export
+  // reads `workOrders`/`taskCompleted`, and the open/closed pair is what tells
+  // the chart legend these are work orders and not checklist tasks.
+  const openSeries = weeklyActivity.map(
+    (item: any) => item.workOrder ?? item.openWorkOrder
+  );
+  const closedSeries = weeklyActivity.map(
+    (item: any) => item.taskCompleted ?? item.closedWorkOrder
+  );
   const activityChart = {
     labels: weeklyActivity.map((item: any) => item.day || item.label),
-    workOrders: weeklyActivity.map(
-      (item: any) => item.workOrder ?? item.openWorkOrder
-    ),
-    taskCompleted: weeklyActivity.map(
-      (item: any) => item.taskCompleted ?? item.closedWorkOrder
-    ),
+    workOrders: openSeries,
+    taskCompleted: closedSeries,
+    openWorkOrder: openSeries,
+    closedWorkOrder: closedSeries,
   };
 
   if (isHygieneMode.value) {
@@ -1931,27 +1800,64 @@ const finalDashboardData = computed<Record<string, any>>(() => {
 
 // ─── Card Value Configs ───────────────────────────────────────────────────────
 
+/**
+ * THE KPI TILE PALETTE.
+ *
+ * Was eleven hand-picked hexes restated in four places and blind to the theme:
+ * the SAME orange glyph on the SAME pink tint in light and in dark, because a
+ * literal cannot follow a theme. Its worst pairing measured 1.36:1 and the one
+ * that actually shipped measured 1.74:1 - the lowest readings in the package,
+ * on the first screen every account type opens.
+ *
+ * The handoff names no colour for a KPI tile. It DOES name four status tones
+ * and their soft fills, and the hexes that were here were already those four
+ * hues (`#1d5f99` blue, `#b73535` red, `#d28722` amber, `#23824f` green). So
+ * each pair is re-pointed at the token it was imitating rather than given a
+ * new colour. That also makes each tile the design's own chip pairing, which
+ * is the ruling this project already follows.
+ */
+const KPI_TONES = {
+  info: { color: "var(--info)", tint: "var(--info-bg)" },
+  err: { color: "var(--err)", tint: "var(--err-bg)" },
+  ok: { color: "var(--ok)", tint: "var(--ok-bg)" },
+  warn: { color: "var(--warn)", tint: "var(--warn-bg)" },
+} as const;
+
 const defaultCardValues: TDashboardCardValue[] = [
   {
     key: "openWorkOrder",
     periodKey: "period",
     title: "Open Work Order",
     icon: "mdi-briefcase",
-    color: "#0b2f47",
+    /** The same tile is `#1d5f99` blue in the other two branches - info. */
+    color: KPI_TONES.info.color,
   },
   {
     key: "taskCompleted",
     periodKey: "period",
     title: "Task Completed",
     icon: "mdi-clipboard-check-outline",
-    color: "#f4a340",
+    /** `utils/status.ts`: "completed" is `ok`. This was the 1.74:1 orange. */
+    color: KPI_TONES.ok.color,
   },
   {
     key: "supplyAlert",
     periodKey: "period",
-    title: "Supply Alert",
-    icon: "mdi-alert",
-    color: "#d32f2f",
+    /**
+     * 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,
   },
 ];
 
@@ -1961,28 +1867,28 @@ const propertyCardValues: TDashboardCardValue[] = [
     periodKey: "period",
     title: "Open Work Order",
     icon: "mdi-briefcase",
-    color: "#1d5f99",
+    color: KPI_TONES.info.color,
   },
   {
     key: "incidents",
     periodKey: "period",
     title: "Open Incidents",
     icon: "mdi-alert",
-    color: "#b73535",
+    color: KPI_TONES.err.color,
   },
   {
     key: "visitors",
     periodKey: "period",
     title: "Visitors",
     icon: "mdi-account-multiple",
-    color: "#d28722",
+    color: KPI_TONES.warn.color,
   },
   {
     key: "facilityBookings",
     periodKey: "period",
     title: "Facility Booking",
     icon: "mdi-office-building",
-    color: "#23824f",
+    color: KPI_TONES.ok.color,
   },
 ];
 
@@ -1992,28 +1898,28 @@ const securityCardValues: TDashboardCardValue[] = [
     periodKey: "period",
     title: "Open Work Order",
     icon: "mdi-briefcase",
-    color: "#1d5f99",
+    color: KPI_TONES.info.color,
   },
   {
     key: "incidents",
     periodKey: "period",
     title: "Open Incidents",
     icon: "mdi-alert",
-    color: "#b73535",
+    color: KPI_TONES.err.color,
   },
   {
     key: "visitors",
     periodKey: "period",
     title: "Visitors",
     icon: "mdi-account-multiple",
-    color: "#d28722",
+    color: KPI_TONES.warn.color,
   },
   {
     key: "patrolCompliance",
     periodKey: "period",
     title: "Patrol Compliance",
     icon: "mdi-office-building",
-    color: "#23824f",
+    color: KPI_TONES.ok.color,
   },
 ];
 
@@ -2026,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 = [
@@ -2058,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 [
@@ -2078,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) =>
@@ -2112,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",
@@ -2136,9 +2084,9 @@ const customizeWidgets = computed(() => {
       },
       {
         key: "todayAttentions",
-        title: "Today's Attentions",
+        title: "Needs Attention",
         description:
-          "Items that require review overdue, pending, or unacknowledged.",
+          "Everything still pending or unacknowledged, not only today's.",
       },
       {
         key: "workOrderStatus",
@@ -2169,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",
@@ -2226,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.",
-    },
   ];
 });
 
@@ -2342,10 +2285,10 @@ function getPropertyKpiCards() {
       key: "workOrders",
       title: "Open Work Order",
       icon: "mdi-briefcase",
-      color: "#1d5f99",
-      tint: "#d7ecff",
+      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,
@@ -2354,10 +2297,10 @@ function getPropertyKpiCards() {
       key: "incidents",
       title: "Open Incidents",
       icon: "mdi-alert",
-      color: "#b73535",
-      tint: "#ffdede",
+      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,
@@ -2366,10 +2309,10 @@ function getPropertyKpiCards() {
       key: "visitors",
       title: "Visitors",
       icon: "mdi-account-multiple",
-      color: "#d28722",
-      tint: "#ffe4bd",
+      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: {
@@ -2385,10 +2328,10 @@ function getPropertyKpiCards() {
       key: "facilityBookings",
       title: "Facility Booking",
       icon: "mdi-office-building",
-      color: "#23824f",
-      tint: "#c8f3da",
+      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,
@@ -2420,10 +2363,10 @@ function getSecurityKpiCards() {
       key: "workOrders",
       title: "Open Work Order",
       icon: "mdi-briefcase",
-      color: "#1d5f99",
-      tint: "#d7ecff",
+      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,
@@ -2432,10 +2375,10 @@ function getSecurityKpiCards() {
       key: "incidents",
       title: "Open Incidents",
       icon: "mdi-alert",
-      color: "#b73535",
-      tint: "#ffdede",
+      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,
@@ -2444,10 +2387,10 @@ function getSecurityKpiCards() {
       key: "visitors",
       title: "Visitors",
       icon: "mdi-account-multiple",
-      color: "#d28722",
-      tint: "#ffe4bd",
+      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: {
@@ -2463,10 +2406,12 @@ function getSecurityKpiCards() {
       key: "patrolCompliance",
       title: "Patrol Compliance",
       icon: "mdi-office-building",
-      color: "#23824f",
-      tint: "#c8f3da",
-      value: `${toNumber(patrolMetric?.count)}%`,
-      percentage: toNumber(patrolMetric?.percentage),
+      color: KPI_TONES.ok.color,
+      tint: KPI_TONES.ok.tint,
+      // 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,
@@ -2474,7 +2419,7 @@ function getSecurityKpiCards() {
   ];
 }
 
-const kpiCards = computed(() => {
+const rawKpiCards = computed(() => {
   if (isPropertyMode.value) return getPropertyKpiCards();
   if (isSecurityMode.value) return getSecurityKpiCards();
 
@@ -2493,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,
@@ -2501,10 +2446,37 @@ 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))
 );
 
+/**
+ * The percentage pill's label. Same number the chip has always shown, written
+ * the way the handoff prints it - `+0%` / `-6.4%`, the sign carrying what the
+ * arrow icon used to. A card without a percentage gets no pill.
+ */
+function kpiChipText(card: Record<string, any>): string {
+  const value = Number(card?.percentage);
+  if (!Number.isFinite(value)) return "";
+  return `${value < 0 ? "-" : "+"}${Math.abs(value)}%`;
+}
+
 // ─── Dashboard Title ──────────────────────────────────────────────────────────
 
 const dashboardTitle = computed(() => {
@@ -2515,6 +2487,12 @@ const dashboardTitle = computed(() => {
   return `${getServiceDisplayName(props.serviceType || appName)} - Dashboard`;
 });
 
+const taskScheduleTitle = computed(() => {
+  if (selectedRange.value === "This Month") return "This Month's Task Schedule";
+  if (selectedRange.value === "This Week") return "This Week's Task Schedule";
+  return "Today's Task Schedule";
+});
+
 // ─── Primary list / staff config ─────────────────────────────────────────────
 
 const primaryListConfig = computed(() =>
@@ -2525,7 +2503,11 @@ const primaryListConfig = computed(() =>
         keys: ["activePatrolItems", "patrolItems"],
       }
     : {
-        title: "Today's Task Schedule",
+        // The endpoint behind this panel takes the selected period
+        // (`getServiceTodayTaskSchedule` -> `getDateRange(period)`), so on the
+        // Week or Month range the list was a week's or a month's work under a
+        // heading that said "Today's".
+        title: taskScheduleTitle.value,
         route: "scheduleTask",
         keys: [
           "taskScheduleItems",
@@ -2576,8 +2558,12 @@ const primarySeries = computed(() =>
 const secondarySeries = computed(() =>
   normalizeSeries(activityChart.value.secondary, chartLabels.value.length)
 );
-const primaryLegendLabel = computed(() => "Closed Work Order");
-const secondaryLegendLabel = computed(() => "Open Work Order");
+// The legend must name the series it is drawn beside. These were hard-coded, and
+// hard-coded the wrong way round: the primary line is the OPEN work orders and
+// was labelled "Closed Work Order". `normalizeActivityChart()` already works out
+// what each series is from the payload it found - read that instead of guessing.
+const primaryLegendLabel = computed(() => activityChart.value.primaryLabel);
+const secondaryLegendLabel = computed(() => activityChart.value.secondaryLabel);
 const chartMax = computed(() =>
   Math.max(1, ...primarySeries.value, ...secondarySeries.value)
 );
@@ -2685,42 +2671,38 @@ const todayAttentions = computed(() =>
   normalizeListItems(["todayAttentions", "attentions"])
 );
 
-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: "#2fb84d",
-    },
-    {
-      label: "In Progress",
-      value: inProgress,
-      percent: (inProgress / max) * 100,
-      color: "#f12d2d",
-    },
-    {
-      label: "Pending",
-      value: pending,
-      percent: (pending / max) * 100,
-      color: "#ff8900",
-    },
-  ];
-});
+/**
+ * THE WORK ORDER STATUS BARS.
+ *
+ * Was three hand-picked hexes - `#2fb84d` green, `#f12d2d` red, `#ff8900`
+ * orange - and blind to the theme: the SAME three bars in light and in dark,
+ * because a literal cannot follow a theme. Each is re-pointed at the token
+ * whose hue it was already imitating, which is the same treatment the KPI
+ * tiles got, and which keeps all three bars distinguishable.
+ *
+ * ONE OF THEM DOES NOT AGREE WITH `utils/status.ts`, ON PURPOSE.
+ * That file maps `completed -> ok` and `pending -> warn` (both honoured here),
+ * but it also maps `in progress -> warn` - the SAME tone as `pending`. Applying
+ * it literally would paint two of these three bars the same amber and make the
+ * chart unreadable, which is a regression, not a fix. So "In Progress" keeps
+ * the tone it is drawn in today (`--err`, the token `#f12d2d` was imitating)
+ * and this stays a colour change with no behaviour change.
+ *
+ * That leaves a real inconsistency to settle: on this very page the "In
+ * Progress" feedback CHIP is amber (`warn`) while this bar is red. Resolving it
+ * means either giving `in progress` its own tone in `utils/status.ts` - which
+ * 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(() =>
+  // 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[]>(
@@ -2808,7 +2790,7 @@ const printTableSections = computed<PrintTableSection[]>(() => {
       },
       {
         key: "todayAttentions",
-        title: "Today's Attentions",
+        title: "Needs Attention",
         columns: [
           { key: "title", label: "Attention", width: "40%", strong: true },
           { key: "subtitle", label: "Details / Subtitle", width: "60%" },
@@ -2913,7 +2895,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 });
 });
@@ -2933,7 +2929,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);
@@ -2951,11 +2949,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" ||
@@ -3251,34 +3256,18 @@ function getInitials(name?: string) {
 
 // ─── Status Style Helpers ────────────────────────────────────────────────────
 
-function getStatusPillStyle(status: any) {
-  const tone = getStatusTone(status);
-  const map: Record<string, { backgroundColor: string; color: string }> = {
-    success: { backgroundColor: "#72e3a1", color: "#0f5132" },
-    warning: { backgroundColor: "#fde68a", color: "#92400e" },
-    error: { backgroundColor: "#fecaca", color: "#b91c1c" },
-    neutral: { backgroundColor: "#e2e8f0", color: "#64748b" },
-  };
-  return map[tone] || map.neutral;
-}
-
+/**
+ * The pills are drawn by inline style, so the literal colours lived here rather
+ * than in the stylesheet - which is why they survived the dark-mode repair and
+ * still measured 3.86:1. Same three cases, same words, the design's tones.
+ */
 function getPatrolStatusStyle(status: any) {
   const s = String(status || "").toLowerCase();
   if (s === "completed" || s === "complete")
-    return { backgroundColor: "#72e3a1", color: "#0f5132" };
+    return { backgroundColor: "var(--ok-bg)", color: "var(--ok)" };
   if (s === "on paused" || s === "paused")
-    return { backgroundColor: "#dcdcdc", color: "#64748b" };
-  return { backgroundColor: "#e2e8f0", color: "#64748b" };
-}
-
-function getStaffStatusPillStyle(status: any) {
-  const s = String(status || "").toLowerCase();
-  if (s === "on duty" || s === "on-duty")
-    return { backgroundColor: "#72e3a1", color: "#0f5132" };
-  if (s === "on break" || s === "on-break")
-    return { backgroundColor: "#fde68a", color: "#92400e" };
-  if (s === "absent") return { backgroundColor: "#fecaca", color: "#b91c1c" };
-  return { backgroundColor: "#e2e8f0", color: "#64748b" };
+    return { backgroundColor: "var(--hover)", color: "var(--text2)" };
+  return { backgroundColor: "var(--hover)", color: "var(--text2)" };
 }
 
 function getStatusProgressStyle(item: { percent: number; color: string }) {
@@ -3508,6 +3497,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;
 }
@@ -3607,6 +3599,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) {
@@ -3619,6 +3618,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>`;
             });
@@ -3735,7 +3737,7 @@ async function exportDashboard(format: "PDF" | "Word") {
         }
         wordHtml += `</tbody></table>`;
 
-        wordHtml += `<div class="section-title">Today's Attentions</div>`;
+        wordHtml += `<div class="section-title">Needs Attention</div>`;
         wordHtml += `<table class="data-table">`;
         wordHtml += `<thead><tr><th>Attention</th><th>Details / Subtitle</th></tr></thead><tbody>`;
         if (todayAttentions.value.length > 0) {
@@ -3860,18 +3862,33 @@ async function exportDashboard(format: "PDF" | "Word") {
 
 // ─── Card Color Helpers ───────────────────────────────────────────────────────
 
+/** The rotation an unstyled `cardValues` entry falls into - same four tones. */
+const KPI_ROTATION = [
+  KPI_TONES.info,
+  KPI_TONES.err,
+  KPI_TONES.ok,
+  KPI_TONES.warn,
+] as const;
+
 function getCardColor(index: number) {
-  return ["#155178", "#9f2f29", "#1f8a56", "#b96d17"][index % 4];
+  return KPI_ROTATION[index % KPI_ROTATION.length].color;
 }
 
+/**
+ * A tint for whatever colour the caller gave. `props.cardValues` comes from
+ * eleven applications and still arrives as a raw hex in places, so the hex
+ * matching stays - the token names are matched alongside it, not instead.
+ */
 function getCardTint(color: string, index: number) {
-  const tints = ["#dbeeff", "#f8c6c3", "#d8f5e5", "#ffe7c2"];
-  if (!color) return tints[index % tints.length];
+  if (!color) return KPI_ROTATION[index % KPI_ROTATION.length].tint;
   const n = color.toLowerCase();
-  if (n.includes("f44336") || n.includes("d32f2f")) return "#f8c6c3";
-  if (n.includes("4caf50") || n.includes("43a047")) return "#d8f5e5";
-  if (n.includes("ff9800") || n.includes("ffa726")) return "#ffe7c2";
-  return "#dbeeff";
+  if (n.includes("--err") || n.includes("f44336") || n.includes("d32f2f"))
+    return KPI_TONES.err.tint;
+  if (n.includes("--ok") || n.includes("4caf50") || n.includes("43a047"))
+    return KPI_TONES.ok.tint;
+  if (n.includes("--warn") || n.includes("ff9800") || n.includes("ffa726"))
+    return KPI_TONES.warn.tint;
+  return KPI_TONES.info.tint;
 }
 
 // ─── Generic Helpers ─────────────────────────────────────────────────────────
@@ -3909,6 +3926,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";
@@ -4158,6 +4190,29 @@ function formatDashboardTime(value?: string) {
   text-transform: capitalize;
 }
 
+/* THESE FIVE ARE LITERAL ON PURPOSE - THE PRINT VIEW IS PAPER.
+ *
+ * `.print-dashboard-view` above pins its surface to `#ffffff` and its ink to
+ * `#1e293b` in BOTH themes, because a printed page is white however the app is
+ * themed. Putting the status tokens on these badges therefore did the opposite
+ * of what tokenising usually does: it let the SCREEN theme reach a surface that
+ * does not follow it. Measured on the print branch at 1440:
+ *
+ *   light  In Progress  rgb(59,111,212)  on rgb(235,241,251)  4.20:1
+ *   light  Completed    rgb(15,138,98)   on rgb(231,243,239)  3.82:1
+ *   dark   In Progress  rgb(125,166,236) on rgb(239,244,253)  2.23:1
+ *   dark   Completed    rgb(65,199,149)  on rgb(232,248,242)  1.93:1
+ *
+ * The dark rows are the defect: the dark-theme INK composited over the white
+ * paper the print view forces, so anyone who exports the dashboard while the
+ * app is in dark mode gets washed-out badges - 1.93:1, the lowest reading taken
+ * on this component. So these go back to fixed pastels, and specifically to the
+ * SAME five pairs the Word export writes into its own stylesheet further up, so
+ * the on-page print view and the exported document finally match.
+ *
+ * Same rule as the signature pad: a surface that does not follow the theme must
+ * not be painted with tokens that do.
+ */
 .badge-success {
   background-color: #d1fae5;
   color: #065f46;
@@ -4184,11 +4239,70 @@ function formatDashboardTime(value?: string) {
   color: #475569;
 }
 
+/* ------------------------------------------------------------------ */
+/* PHASE 5 - the design's card, type and semantic tones.               */
+/*                                                                     */
+/* The dark-mode repair earlier today moved these surfaces off literal */
+/* white onto the Vuetify theme; this keeps that and takes the last    */
+/* step, onto the design tokens themselves - so the dashboard's cards, */
+/* headings and pills are the same 14px card, the same Manrope and the */
+/* same four status tones as every other screen.                       */
+/* ------------------------------------------------------------------ */
+
 .dashboard-card {
-  background: #fff;
-  border: 1px solid #d9e0e7;
-  border-radius: 8px;
-  box-shadow: 0 1px 2px rgba(15, 35, 54, 0.04);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow);
+  font-family: var(--font-sans);
+}
+
+/* The KPI tile and the rows inside a panel are the same card, one step in. */
+.dashboard-kpi-card,
+.dashboard-row-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow);
+  font-family: var(--font-sans);
+}
+
+.dashboard-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-h1);
+  font-weight: var(--fw-h1);
+  letter-spacing: var(--ls-h1);
+  color: var(--text);
+}
+
+.dashboard-card-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  letter-spacing: 0;
+  color: var(--text);
+}
+
+/* 11px/800 uppercase over a 30px/800 number, tabular so the columns of
+   figures line up - the design's KPI, and the same header type the table
+   card already uses. */
+.dashboard-kpi-label {
+  font-family: var(--font-sans);
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.dashboard-kpi-value {
+  font-family: var(--font-sans);
+  font-size: var(--fs-kpi);
+  font-weight: var(--fw-kpi);
+  letter-spacing: var(--ls-kpi);
+  line-height: 1.1;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
 }
 
 .dashboard-section-grid {
@@ -4209,7 +4323,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-panel {
-  border-color: #dde4ea;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: none;
   min-height: 276px;
   padding: 26px 28px 24px;
@@ -4223,14 +4337,17 @@ function formatDashboardTime(value?: string) {
   min-height: 18px;
 }
 
+/* The panel heading is the design's card title: 15.5px/800, sentence case. It
+   was a 12px/900 uppercase label from the earlier Figma. */
 .figma-panel-header h2 {
-  color: #18324a;
-  font-size: 12px;
-  font-weight: 900;
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
   letter-spacing: 0;
   line-height: 1.2;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .figma-panel-action,
@@ -4238,7 +4355,7 @@ function formatDashboardTime(value?: string) {
   appearance: none;
   background: transparent;
   border: 0;
-  color: #1976d2;
+  color: rgb(var(--v-theme-primary));
   cursor: pointer;
   font-size: 12px;
   font-weight: 800;
@@ -4248,7 +4365,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .facility-booking-modal {
-  border: 1px solid #d9e0e7;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: 0 18px 48px rgba(15, 35, 54, 0.18);
 }
 
@@ -4269,7 +4386,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .facility-booking-summary-label {
-  color: #1565c0;
+  color: rgb(var(--v-theme-primary));
   font-size: 16px;
   font-weight: 500;
   line-height: 1.25;
@@ -4289,7 +4406,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .facility-booking-summary-dots {
-  border-bottom: 2px dotted #9aa3ad;
+  border-bottom: 2px dotted rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: block;
   height: 1px;
   min-width: 32px;
@@ -4297,7 +4414,7 @@ function formatDashboardTime(value?: string) {
 
 .facility-booking-summary-value,
 .facility-booking-total-label {
-  color: #0b2f47;
+  color: rgb(var(--v-theme-on-surface));
   font-size: 16px;
   font-weight: 800;
   line-height: 1.25;
@@ -4320,8 +4437,8 @@ function formatDashboardTime(value?: string) {
 
 .figma-list-row {
   align-items: center;
-  background: #fff;
-  border: 1px solid #e1e7ed;
+  background: rgb(var(--v-theme-surface-bright));
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 6px;
   display: grid;
   gap: 10px;
@@ -4332,7 +4449,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-list-row:hover {
-  border-color: #d5e0ea;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: 0 6px 14px rgba(15, 44, 69, 0.05);
 }
 
@@ -4341,7 +4458,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-list-main strong {
-  color: #152f47;
+  color: rgb(var(--v-theme-on-surface));
   display: block;
   font-size: 12px;
   font-weight: 800;
@@ -4352,7 +4469,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-list-main p {
-  color: #7b8895;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-size: 11px;
   font-weight: 700;
   line-height: 1.3;
@@ -4366,6 +4483,61 @@ function formatDashboardTime(value?: string) {
   justify-self: end;
 }
 
+/* The service-vertical and security rows carry two more cells than the
+   property rows do - who it is assigned to, and the status. Same row, four
+   columns instead of three; there is no second row style. */
+.figma-list-row--wide {
+  grid-template-columns:
+    minmax(0, 1fr) minmax(0, auto) auto minmax(38px, auto);
+}
+
+.figma-list-person {
+  align-items: center;
+  color: var(--muted);
+  display: flex;
+  font-family: var(--font-sans);
+  font-size: 11px;
+  font-weight: 700;
+  gap: 8px;
+  min-width: 0;
+}
+
+.figma-list-person span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A figure, not a status - the neutral pill, so a number is never coloured as
+   if it were a word `utils/status.ts` recognised. */
+/* The same pill StatusChip draws for `tone-neutral` - `--hover` on `--text2`,
+   3px/10px, `--r-pill` - reproduced rather than reused because StatusChip's
+   rules are scoped to its own file. */
+.figma-row-figure {
+  background: var(--hover);
+  border-radius: var(--r-pill);
+  color: var(--text2);
+  font-family: var(--font-sans);
+  font-size: var(--fs-chip);
+  font-weight: var(--fw-chip);
+  justify-self: end;
+  line-height: 1.4;
+  padding: 3px 10px;
+  white-space: nowrap;
+}
+
+/* Below the design's tablet break the four columns will not hold a readable
+   title, so the row stacks - the same thing the property rows do. */
+@media (max-width: 700px) {
+  .figma-list-row--wide {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .figma-list-row--wide .figma-list-main {
+    grid-column: 1 / -1;
+  }
+}
+
 .figma-event-dot {
   align-self: center;
   border-radius: 50%;
@@ -4377,30 +4549,30 @@ function formatDashboardTime(value?: string) {
 
 .figma-event-dot-info,
 .figma-event-dot-neutral {
-  background: #c9e6ff;
-  border: 2px solid #77bef9;
+  background: var(--info-bg);
+  border: 2px solid var(--info);
 }
 
 .figma-event-dot-success {
-  background: #2fb84d;
-  border: 2px solid #c9efd4;
+  background: var(--ok-bg);
+  border: 2px solid var(--ok);
 }
 
 .figma-event-dot-danger {
-  background: #ffd9d6;
-  border: 2px solid #f9a6a0;
+  background: var(--err-bg);
+  border: 2px solid var(--err);
 }
 
 .figma-event-dot-warning {
-  background: #ffe9c7;
-  border: 2px solid #f9c97c;
+  background: var(--warn-bg);
+  border: 2px solid var(--warn);
 }
 
 .active-patrol-row {
   align-items: center;
-  background-color: #ffffff;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
+  background-color: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner-lg);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
   display: grid;
   gap: 10px;
@@ -4416,7 +4588,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .active-patrol-main strong {
-  color: #0b2f47;
+  color: rgb(var(--v-theme-on-surface));
   display: block;
   font-size: 13px;
   font-weight: 700;
@@ -4426,7 +4598,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .active-patrol-main span {
-  color: #94a3b8;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: block;
   font-size: 11px;
   line-height: 1.25;
@@ -4442,19 +4614,37 @@ function formatDashboardTime(value?: string) {
 
 .active-patrol-assignee {
   align-items: center;
-  background: #f8fafc;
-  border: 1px solid #e7edf3;
+  background: rgba(var(--v-theme-on-surface), 0.05);
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 999px;
   display: inline-flex;
-  flex: 1 1 auto;
+  /* `1 1 auto` let the chip GROW to fill the column, so one assignee drew as a
+     full-width bordered box that reads as an empty text input. It is a chip -
+     it shrinks, it does not grow. */
+  flex: 0 1 auto;
   gap: 6px;
   max-width: 100%;
   min-width: 0;
   padding: 2px 8px 2px 3px;
 }
 
+/**
+ * Carried from Phase 1: `AvatarMain` colours each person from their NAME, and
+ * writes WHITE initials on whatever tint it picks - 2.34:1 on this dashboard.
+ * That is right in a members list, where the colour tells two people apart,
+ * and wrong on a dashboard, where the same face appears in four panels.
+ *
+ * The component is left alone - Phase 2 took exactly this route for the top
+ * bar's own avatar - and the dashboard paints every avatar it draws with the
+ * design's accent pair instead. One rule, all seven call sites.
+ */
+.unified-dashboard :deep(.v-avatar) {
+  background: var(--accent-soft) !important;
+  color: var(--accent-text) !important;
+}
+
 .active-patrol-assignee span {
-  color: #475569;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-size: 11px;
   font-weight: 600;
   line-height: 1.2;
@@ -4484,10 +4674,10 @@ function formatDashboardTime(value?: string) {
 
 .active-patrol-more-pill {
   align-items: center;
-  background: #eef3f8;
-  border: 1px solid #dbe4ed;
+  background: rgba(var(--v-theme-on-surface), 0.05);
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 999px;
-  color: #607386;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: inline-flex;
   flex: 0 0 auto;
   font-size: 11px;
@@ -4507,11 +4697,11 @@ function formatDashboardTime(value?: string) {
 }
 
 .active-patrol-tooltip::after {
-  background: #0f2638;
-  border-radius: 6px;
+  background: var(--text);
+  border-radius: var(--r-inner-sm);
   bottom: calc(100% + 8px);
-  box-shadow: 0 8px 24px rgba(15, 38, 56, 0.18);
-  color: #ffffff;
+  box-shadow: var(--shadow-menu);
+  color: var(--card);
   content: attr(data-tooltip);
   font-size: 11px;
   font-weight: 600;
@@ -4541,6 +4731,28 @@ function formatDashboardTime(value?: string) {
   }
 }
 
+/**
+ * Carried from Phase 1: the dashboard scrolled sideways at 360. This row is a
+ * four-column grid whose last two columns are `max-content`, so on a phone the
+ * assignee pill, the status pill and the action button cannot fit beside a
+ * 120px title and the row pushes ~39px past the viewport.
+ *
+ * Below 600 the four columns become one. Nothing is hidden, dropped or
+ * reordered - the same four blocks, stacked in the same order.
+ */
+@media (max-width: 599.98px) {
+  .active-patrol-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .active-patrol-action,
+  .active-patrol-statuses,
+  .active-patrol-assignees {
+    justify-self: start;
+    text-align: left;
+  }
+}
+
 .figma-icon-badge {
   align-items: center;
   border-radius: 50%;
@@ -4552,28 +4764,28 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-icon-badge-danger {
-  background: #ffe0de;
-  color: #d72f2f;
+  background: var(--err-bg);
+  color: var(--err);
 }
 
 .figma-icon-badge-info {
-  background: #e8e2ff;
-  color: #6d4bd8;
+  background: var(--info-bg);
+  color: var(--info);
 }
 
 .figma-icon-badge-success {
-  background: #ddf7e6;
-  color: #229852;
+  background: var(--ok-bg);
+  color: var(--ok);
 }
 
 .figma-icon-badge-warning {
-  background: #ffeed4;
-  color: #c57916;
+  background: var(--warn-bg);
+  color: var(--warn);
 }
 
 .figma-icon-badge-neutral {
-  background: #edf2f6;
-  color: #607386;
+  background: var(--hover);
+  color: var(--text2);
 }
 
 .figma-status-stack {
@@ -4587,7 +4799,7 @@ function formatDashboardTime(value?: string) {
 
 .figma-status-label {
   align-items: center;
-  color: #263d53;
+  color: rgb(var(--v-theme-on-surface));
   display: flex;
   font-size: 12px;
   font-weight: 800;
@@ -4597,13 +4809,13 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-status-label strong {
-  color: #18324a;
+  color: rgb(var(--v-theme-on-surface));
   font-size: 12px;
   font-weight: 900;
 }
 
 .figma-progress-track {
-  background: #edf2f6;
+  background: rgba(var(--v-theme-on-surface), 0.08);
   border-radius: 999px;
   height: 6px;
   overflow: hidden;
@@ -4624,9 +4836,9 @@ function formatDashboardTime(value?: string) {
 
 .feedback-row {
   align-items: center;
-  background: #fff;
-  border: 1px solid #e0e5ea;
-  border-radius: 8px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner-lg);
   display: grid;
   gap: 16px;
   grid-template-columns: minmax(180px, 225px) minmax(130px, 175px) 100px auto;
@@ -4635,8 +4847,41 @@ function formatDashboardTime(value?: string) {
   transition: border-color 0.16s ease, box-shadow 0.16s ease;
 }
 
+/**
+ * The property-mode feedback row is four flex children that each ask for at
+ * least 140px, so on a 360px phone the status pill and the View button were
+ * clipped by the card edge - visible, but cut in half. It wraps now, and below
+ * 600 each block takes the full width: same four blocks, same order.
+ */
+.dashboard-feedback-row {
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+@media (max-width: 599.98px) {
+  .dashboard-feedback-row > div {
+    flex: 1 1 100% !important;
+    justify-content: flex-start !important;
+    text-align: left !important;
+  }
+}
+
+/* Same story as the patrol row: four fixed-ish columns need ~600px, so on a
+   phone the status pill and the View button were clipped by the card edge.
+   One column below 600, same blocks, same order. */
+@media (max-width: 599.98px) {
+  .feedback-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .feedback-status-pill,
+  .feedback-action {
+    justify-self: start;
+  }
+}
+
 .feedback-row:hover {
-  border-color: #d8e3ec;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: 0 6px 14px rgba(15, 44, 69, 0.04);
 }
 
@@ -4645,7 +4890,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .feedback-summary strong {
-  color: #132b43;
+  color: rgb(var(--v-theme-on-surface));
   display: block;
   font-size: 12px;
   font-weight: 800;
@@ -4656,7 +4901,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .feedback-summary p {
-  color: #888;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-size: 12px;
   font-weight: 500;
   line-height: 1.35;
@@ -4679,11 +4924,13 @@ function formatDashboardTime(value?: string) {
   white-space: nowrap;
 }
 
+/* Carried from Phase 1: the initials measured 1.26:1 in dark mode, because the
+   tint was a literal light blue whatever the theme. */
 .feedback-avatar {
   align-items: center;
-  background: #d1e8ff;
+  background: var(--accent-soft);
   border-radius: 50%;
-  color: #1d5f99;
+  color: var(--accent-text);
   display: inline-flex;
   flex-shrink: 0;
   font-size: 11px;
@@ -4702,31 +4949,32 @@ function formatDashboardTime(value?: string) {
   white-space: nowrap;
 }
 
+/* The other two carried Phase 1 items: hard-coded chips. */
 .feedback-status-pill-completed {
-  background: #72e3a1;
-  color: #0f5132;
+  background: var(--ok-bg);
+  color: var(--ok);
 }
 
 .feedback-status-pill-progress {
-  background: #fde68a;
-  color: #92400e;
+  background: var(--warn-bg);
+  color: var(--warn);
 }
 
 .feedback-status-pill-danger {
-  background: #fecaca;
-  color: #b91c1c;
+  background: var(--err-bg);
+  color: var(--err);
 }
 
 .feedback-status-pill-todo {
-  background: #e2e8f0;
-  color: #64748b;
+  background: var(--hover);
+  color: var(--text2);
 }
 
 .feedback-view-button {
   appearance: none;
   background: transparent;
   border: 0;
-  color: #2196f3;
+  color: rgb(var(--v-theme-primary));
   cursor: pointer;
   font-size: 12px;
   font-weight: 800;