@7365admin1/layer-common 3.2.2-staging.89 → 3.2.2-staging.90

package/components/DashboardEmptyState.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex flex-column align-center justify-center text-center text-blue-grey-lighten-1"
+    class="d-flex flex-column align-center justify-center text-center dashboard-empty"
     :style="{ minHeight: compact ? '72px' : '140px', gap: '8px' }"
   >
     <v-icon icon="mdi-database-search-outline" size="28" />
@@ -16,3 +16,13 @@ defineProps({
   },
 });
 </script>
+
+<style scoped>
+/* Was `text-blue-grey-lighten-1`, a fixed Vuetify grey that measured 2.4:1 in
+   LIGHT mode - the empty state was the hardest thing on the page to read. The
+   muted token is the design's own and follows the theme. */
+.dashboard-empty {
+  font-family: var(--font-sans);
+  color: var(--muted);
+}
+</style>

package/components/DashboardMain.vue

@@ -207,7 +207,7 @@
       class="d-flex flex-column flex-md-row align-md-start justify-space-between ga-5 mb-6"
     >
       <div>
-        <h1 class="text-h5 font-weight-black text-high-emphasis mb-0">
+        <h1 class="dashboard-title mb-0">
           {{ dashboardTitle }}
         </h1>
         <div class="d-flex align-center text-medium-emphasis ga-1 mt-2 text-caption">
@@ -300,9 +300,7 @@
       >
         <v-card
           flat
-          border
-          rounded="lg"
-          class="pa-4 flex-grow-1"
+          class="dashboard-card dashboard-kpi-card pa-4 flex-grow-1"
           style="min-height: 158px"
         >
           <div class="d-flex align-start justify-space-between">
@@ -360,9 +358,7 @@
           </div>
 
           <div class="mt-6 w-100">
-            <p
-              class="text-caption font-weight-black text-uppercase text-medium-emphasis mb-3"
-            >
+            <p class="dashboard-kpi-label mb-3">
               {{ card.title }}
             </p>
             <template
@@ -383,7 +379,7 @@
             </template>
             <template v-else>
               <div class="d-flex align-center mb-3" style="min-height: 31px">
-                <span class="text-h5 font-weight-black text-high-emphasis">
+                <span class="dashboard-kpi-value">
                   {{ card.value }}
                 </span>
               </div>
@@ -419,12 +415,10 @@
     <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-high-emphasis mb-0">
+        <h2 class="dashboard-card-title mb-0">
           {{ activityTitle }}
         </h2>
       </div>
@@ -556,9 +550,7 @@
               v-for="item in taskScheduleItems"
               :key="item.id"
               flat
-              border
-              rounded="lg"
-              class="pa-3"
+              class="dashboard-row-card pa-3"
             >
               <div class="d-flex align-center flex-wrap ga-3">
                 <div class="flex-grow-1" style="min-width: 0">
@@ -622,9 +614,7 @@
               v-for="item in staffStatusItems"
               :key="item.id"
               flat
-              border
-              rounded="lg"
-              class="pa-3"
+              class="dashboard-row-card pa-3"
             >
               <div class="d-flex align-start ga-3">
                 <AvatarMain :name="item.name" :size="32" />
@@ -663,7 +653,7 @@
             <div
               v-for="item in feedbackItems"
               :key="item.id"
-              class="d-flex align-center justify-space-between"
+              class="d-flex align-center justify-space-between dashboard-feedback-row"
               style="
                 padding: 16px 20px;
                 border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
@@ -1128,7 +1118,7 @@
             <div
               v-for="item in feedbackItems"
               :key="item.id"
-              class="d-flex align-center justify-space-between"
+              class="d-flex align-center justify-space-between dashboard-feedback-row"
               style="
                 padding: 16px 20px;
                 border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
@@ -3250,31 +3240,37 @@ function getInitials(name?: string) {
 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" },
+    success: { backgroundColor: "var(--ok-bg)", color: "var(--ok)" },
+    warning: { backgroundColor: "var(--warn-bg)", color: "var(--warn)" },
+    error: { backgroundColor: "var(--err-bg)", color: "var(--err)" },
+    neutral: { backgroundColor: "var(--hover)", color: "var(--text2)" },
   };
   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" };
+    return { backgroundColor: "var(--hover)", color: "var(--text2)" };
+  return { backgroundColor: "var(--hover)", color: "var(--text2)" };
 }
 
 function getStaffStatusPillStyle(status: any) {
   const s = String(status || "").toLowerCase();
   if (s === "on duty" || s === "on-duty")
-    return { backgroundColor: "#72e3a1", color: "#0f5132" };
+    return { backgroundColor: "var(--ok-bg)", color: "var(--ok)" };
   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(--warn-bg)", color: "var(--warn)" };
+  if (s === "absent")
+    return { backgroundColor: "var(--err-bg)", color: "var(--err)" };
+  return { backgroundColor: "var(--hover)", color: "var(--text2)" };
 }
 
 function getStatusProgressStyle(item: { percent: number; color: string }) {
@@ -4154,37 +4150,98 @@ function formatDashboardTime(value?: string) {
   text-transform: capitalize;
 }
 
+/* Was five pairs of literal pastels - the same pale green on the dark page,
+   and none of them the tones the rest of the product uses. */
 .badge-success {
-  background-color: #d1fae5;
-  color: #065f46;
+  background-color: var(--ok-bg);
+  color: var(--ok);
 }
 
 .badge-info {
-  background-color: #e0f2fe;
-  color: #075985;
+  background-color: var(--info-bg);
+  color: var(--info);
 }
 
 .badge-danger,
 .badge-error {
-  background-color: #fee2e2;
-  color: #991b1b;
+  background-color: var(--err-bg);
+  color: var(--err);
 }
 
 .badge-warning {
-  background-color: #fef3c7;
-  color: #92400e;
+  background-color: var(--warn-bg);
+  color: var(--warn);
 }
 
 .badge-neutral {
-  background-color: #f1f5f9;
-  color: #475569;
+  background-color: var(--hover);
+  color: var(--text2);
 }
 
+/* ------------------------------------------------------------------ */
+/* 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: rgb(var(--v-theme-surface));
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  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 {
@@ -4219,14 +4276,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: rgb(var(--v-theme-on-surface));
-  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,
@@ -4373,30 +4433,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: rgb(var(--v-theme-surface-bright));
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  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;
@@ -4449,6 +4509,21 @@ function formatDashboardTime(value?: string) {
   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: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-size: 11px;
@@ -4503,11 +4578,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;
@@ -4537,6 +4612,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%;
@@ -4548,28 +4645,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 {
@@ -4620,9 +4717,9 @@ function formatDashboardTime(value?: string) {
 
 .feedback-row {
   align-items: center;
-  background: rgb(var(--v-theme-surface-bright));
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  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;
@@ -4631,6 +4728,39 @@ 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: rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: 0 6px 14px rgba(15, 44, 69, 0.04);
@@ -4675,11 +4805,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;
@@ -4698,24 +4830,25 @@ 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 {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.89",
+  "version": "3.2.2-staging.90",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {