@7365admin1/layer-common 3.2.2-staging.125 → 3.2.2-staging.126

package/components/DashboardMain.vue

@@ -479,54 +479,34 @@
           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
-              class="dashboard-row-card 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-high-emphasis text-truncate"
-                  >
-                    {{ item.title }}
-                  </div>
-                  <div class="text-caption text-medium-emphasis 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-medium-emphasis"
-                >
-                  <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 />
         </DashboardPanel>
@@ -543,35 +523,22 @@
           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
-              class="dashboard-row-card 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-high-emphasis text-truncate"
-                  >
-                    {{ item.name }}
-                  </div>
-                  <div class="text-caption text-medium-emphasis mt-1 text-truncate">
-                    {{ item.role }}
-                  </div>
-                </div>
-                <v-chip
-                  size="small"
-                  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 />
         </DashboardPanel>
@@ -583,76 +550,28 @@
           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 dashboard-feedback-row"
-              style="
-                padding: 16px 20px;
-                border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-                border-radius: 12px;
-                margin-bottom: 12px;
-                background-color: rgb(var(--v-theme-surface-bright));
-                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: rgb(var(--v-theme-on-surface));
-                    margin-bottom: 4px;
-                  "
-                  >{{ item.title }}</strong
-                >
-                <span style="font-size: 13px; color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
-                  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: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
-                  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="primary"
-                  style="
-                    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-                    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 />
@@ -943,20 +862,15 @@
                 </div>
 
                 <div class="active-patrol-action">
-                  <v-btn
-                    variant="outlined"
-                    class="text-none font-weight-medium"
-                    size="small"
-                    color="primary"
-                    style="
-                      border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-                      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>
@@ -978,62 +892,28 @@
             </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 rgba(var(--v-border-color), var(--v-border-opacity));
-                  border-radius: 12px;
-                  margin-bottom: 12px;
-                  background-color: rgb(var(--v-theme-surface-bright));
-                  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: rgb(var(--v-theme-on-surface));
-                        margin-bottom: 4px;
-                      "
-                      >{{
-                        item.userName || item.personName || "Unassigned"
-                      }}</strong
-                    >
-                    <span style="font-size: 13px; color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
-                      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 />
@@ -1048,76 +928,28 @@
           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 dashboard-feedback-row"
-              style="
-                padding: 16px 20px;
-                border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-                border-radius: 12px;
-                margin-bottom: 12px;
-                background-color: rgb(var(--v-theme-surface-bright));
-                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: rgb(var(--v-theme-on-surface));
-                    margin-bottom: 4px;
-                  "
-                  >{{ item.title }}</strong
-                >
-                <span style="font-size: 13px; color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
-                  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: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
-                  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="primary"
-                  style="
-                    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
-                    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 />
@@ -3182,17 +3014,6 @@ 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: "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
@@ -3207,17 +3028,6 @@ function getPatrolStatusStyle(status: any) {
   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: "var(--ok-bg)", color: "var(--ok)" };
-  if (s === "on break" || s === "on-break")
-    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 }) {
   const percent = Math.min(100, Math.max(0, Number(item.percent) || 0));
   return { backgroundColor: item.color, width: `${percent}%` };
@@ -4367,6 +4177,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%;
@@ -4447,7 +4312,10 @@ function formatDashboardTime(value?: string) {
   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;

package/components/DashboardPanel.vue

@@ -1,31 +1,37 @@
+<!--
+  THE DASHBOARD PANEL.
+
+  The `isPropertyMode` branch of DashboardMain already draws its panels the
+  design's way, inline: a `.dashboard-card` surface carrying `.figma-panel`
+  padding, a header whose `h2` is the card title and whose action is a bare
+  text affordance, then the body. This component is what the OTHER two
+  branches use, and it was still a `v-card` with Vuetify typography - which is
+  why the same dashboard looked new for property-management and old for the
+  five service verticals.
+
+  So it now draws that same construction, with the property branch's literal
+  values, on `AppCard`. Copied here rather than reached for across components:
+  the `.figma-*` rules are global to DashboardMain, and depending on a
+  sibling's stylesheet is how a panel silently loses its padding later.
+-->
 <template>
-  <v-card
-    flat
-    border
-    rounded="lg"
-    class="d-flex flex-column w-100"
-    style="min-height: 200px"
-  >
-    <div class="d-flex align-center justify-space-between pa-5 pb-3">
-      <h2 class="text-body-1 font-weight-black text-high-emphasis mb-0">
-        {{ title }}
-      </h2>
-      <v-btn
+  <AppCard class="dashboard-panel">
+    <div class="dashboard-panel__header">
+      <h2>{{ title }}</h2>
+      <button
         v-if="actionLabel"
-        variant="text"
-        color="primary"
-        size="small"
-        class="text-none font-weight-bold"
+        class="dashboard-panel__action"
+        type="button"
         @click="$emit('action')"
       >
         {{ actionLabel }}
-      </v-btn>
+      </button>
     </div>
 
-    <div class="flex-1-1-100 overflow-y-auto pa-5 pt-0" style="max-height: 400px">
+    <div class="dashboard-panel__body">
       <slot />
     </div>
-  </v-card>
+  </AppCard>
 </template>
 
 <script setup lang="ts">
@@ -36,9 +42,66 @@ defineProps({
   },
   actionLabel: {
     type: String,
-    default: '',
+    default: "",
   },
 });
 
-defineEmits(['action']);
+defineEmits(["action"]);
 </script>
+
+<style scoped>
+/* `.dashboard-card` + `.dashboard-panel` + `.figma-panel`, resolved: the
+   figma layer wins the shadow and the padding, so the panel is a flat 14px
+   card at 26px/28px/24px and 276px tall. */
+.dashboard-panel {
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-sans);
+  height: 100%;
+  min-height: 276px;
+  padding: 26px 28px 24px;
+  width: 100%;
+}
+
+.dashboard-panel__header {
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  min-height: 18px;
+}
+
+/* The panel heading is the design's card title: 15.5px/800, sentence case. */
+.dashboard-panel__header h2 {
+  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: none;
+}
+
+/* Not an AppButton: the design's panel action is a text affordance, 12px/800
+   with no box - the same one the property branch already ships. */
+.dashboard-panel__action {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: rgb(var(--v-theme-primary));
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.dashboard-panel__body {
+  flex: 1;
+  margin-top: 20px;
+  min-width: 0;
+}
+</style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.125",
+  "version": "3.2.2-staging.126",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",