@7365admin1/layer-common 3.2.1 → 3.2.2-staging.100

package/components/CardToolbar.vue

@@ -0,0 +1,37 @@
+<!--
+  THE IN-CARD TOP ROW.
+
+  The design does NOT put a screen's tabs above its card - they are the card's
+  own first row, with the pagination on the opposite end of that same line, and
+  the tab underline meets the card's rule. Today those tabs sit in a
+  `v-toolbar`'s extension slot, which stacks them BELOW a separate bar and
+  costs a whole row of height.
+
+  Two shapes, both from the handoff: with tabs (`0 20px`, the tabs supply the
+  vertical padding) and without (`10px 14px`, a refresh button on the left).
+  This component only places things - the tabs, the count and the pager are
+  passed in and keep their own behaviour.
+-->
+<template>
+  <div class="app-toolbar" :class="{ 'app-toolbar--plain': !$slots.tabs }">
+    <div v-if="$slots.tabs" class="app-tabs" role="tablist">
+      <slot name="tabs" />
+    </div>
+
+    <slot name="left" />
+
+    <div class="app-toolbar__spacer" />
+
+    <div class="app-toolbar__right">
+      <span v-if="count" class="app-toolbar__count">{{ count }}</span>
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  /** The design's `1-1 of 1` range, printed as the screen already computes it. */
+  count: { type: String, default: "" },
+});
+</script>

package/components/CleaningScheduleMain.vue

@@ -17,11 +17,7 @@
       >
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
-            <v-card
-              class="w-100 px-3 d-flex align-center ga-5 py-2"
-              flat
-              :height="60"
-            >
+            <div class="filter-bar">
               <InputDateTimePicker
                 v-model:utc="startDate"
                 density="compact"
@@ -47,7 +43,7 @@
                 item-value="value"
                 label="Status"
               />
-            </v-card>
+            </div>
           </v-row>
         </template>
 
@@ -60,25 +56,23 @@
               : ""
           }}
         </template>
+        <!--
+          A countdown, not a status word, so it passes the tone the screen has
+          already worked out from the time left rather than a word to map.
+        -->
         <template #item.closeIn="{ item }">
-          <v-chip
+          <StatusChip
             class="text-capitalize"
-            variant="flat"
-            :color="getCloseInColor(item._id)"
-            pill
-          >
-            {{ remainingTime[item._id] || "00h 00m" }}
-          </v-chip>
+            :tone="getCloseInTone(item._id)"
+            :label="remainingTime[item._id] || '00h 00m'"
+          />
         </template>
         <template #item.status="{ value }">
-          <v-chip
+          <StatusChip
             class="text-capitalize"
-            :color="getStatusColor(value)"
-            variant="flat"
-            pill
-          >
-            {{ value || "No Status" }}
-          </v-chip>
+            :status="value"
+            :label="value || 'No Status'"
+          />
         </template>
         <template #item.completedAt="{ value }">
           {{
@@ -159,33 +153,22 @@ const downloadingId = ref<string | null>(null);
 const { getCleaningSchedules, downloadChecklistPdf } = useCleaningSchedules();
 const { formatDate } = useUtils();
 
-const getStatusColor = (status: unknown): string => {
-  if (!status) return "grey";
-
-  const normalized = String(status).toLowerCase();
-
-  switch (normalized) {
-    case "open":
-      return "grey";
-    case "ongoing":
-      return "primary";
-    case "completed":
-    case "accepted":
-      return "success";
-    case "closed":
-    case "rejected":
-      return "error";
-    default:
-      return "secondary";
-  }
-};
-
-const getCloseInColor = (id: string): string => {
+/**
+ * The status word now picks its own colour, from the one shared mapping in
+ * `utils/status.ts` - which carries every word this screen used to switch on,
+ * with the tone it used to give it. The screen no longer keeps a private
+ * palette that only it agrees with.
+ *
+ * The countdown is not a status word, so the thresholds stay here; only the
+ * NAMES change, from Vuetify colours to the design's tones. Same three bands,
+ * same boundaries.
+ */
+const getCloseInTone = (id: string): "info" | "warn" | "err" => {
   const secs = remainingSeconds.value[id];
-  if (secs === undefined) return "primary";
-  if (secs <= 0) return "error";
-  if (secs < 3 * 3600) return "warning";
-  return "primary";
+  if (secs === undefined) return "info";
+  if (secs <= 0) return "err";
+  if (secs < 3 * 3600) return "warn";
+  return "info";
 };
 
 const canDownloadSchedule = computed(() => props.canDownloadSchedule);

package/components/ClientMain.vue

@@ -632,7 +632,7 @@ onUnmounted(() => {
 .page-wrap {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-size: 14px;
-  color: #111827;
+  color: var(--text);
   background: transparent;
 }
 
@@ -643,17 +643,21 @@ onUnmounted(() => {
   gap: 12px;
   padding: 12px 0;
   background: transparent;
+  /* The title, the 260px search and the invite button do not fit a phone on
+     one line, and without this the whole page scrolled sideways. */
+  flex-wrap: wrap;
 }
 .topbar-right {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 12px;
+  flex-wrap: wrap;
 }
 .btn-invite {
-  background: #fff;
-  color: #111827;
-  border: 1px solid #D1D5DB;
+  background: var(--card);
+  color: var(--text);
+  border: 1px solid var(--border);
   border-radius: 24px;
   padding: 10px 22px;
   font-size: 14px;
@@ -662,26 +666,27 @@ onUnmounted(() => {
   white-space: nowrap;
   transition: background 0.15s;
 }
-.btn-invite:hover { background: #F9FAFB; }
+.btn-invite:hover { background: var(--hover); }
 
 .search-wrap {
   position: relative;
   width: 260px;
+  max-width: 100%;
   flex-shrink: 0;
 }
 .search-input {
   width: 100%;
   height: 36px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 0 34px 0 12px;
   font-size: 13px;
-  color: #111827;
-  background: #fff;
+  color: var(--text);
+  background: var(--card);
   outline: none;
 }
-.search-input:focus { border-color: #9CA3AF; }
-.search-input::placeholder { color: #9CA3AF; }
+.search-input:focus { border-color: var(--muted); }
+.search-input::placeholder { color: var(--muted); }
 .search-icon {
   position: absolute;
   right: 12px;
@@ -698,18 +703,25 @@ onUnmounted(() => {
   transform: translateY(-50%);
   border: none;
   background: transparent;
-  color: #9CA3AF;
+  color: var(--muted);
   font-size: 16px;
   cursor: pointer;
   line-height: 1;
   padding: 0;
 }
-.clear-btn:hover { color: #374151; }
+.clear-btn:hover { color: var(--text2); }
 
 .filter-wrap {
   display: flex;
   gap: 10px;
-  flex-shrink: 0;
+  /* Three filters do not fit a phone beside the search box. `flex-shrink: 0`
+     kept this row at its 463px content width, so it never wrapped and the
+     whole page scrolled sideways at 360. */
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.filter-wrap > * {
+  max-width: 100%;
 }
 .filter-field {
   position: relative;
@@ -721,8 +733,8 @@ onUnmounted(() => {
   top: -8px;
   left: 9px;
   font-size: 10px;
-  color: #6B7280;
-  background: #fff;
+  color: var(--muted);
+  background: var(--card);
   padding: 0 3px;
   pointer-events: none;
   z-index: 1;
@@ -730,18 +742,18 @@ onUnmounted(() => {
 }
 .filter-field select {
   height: 36px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 0 28px 0 10px;
   font-size: 13px;
-  color: #111827;
-  background: #fff;
+  color: var(--text);
+  background: var(--card);
   appearance: none;
   cursor: pointer;
   outline: none;
   min-width: 110px;
 }
-.filter-field select:focus { border-color: #9CA3AF; }
+.filter-field select:focus { border-color: var(--muted); }
 .chevron {
   position: absolute;
   right: 9px;
@@ -755,8 +767,8 @@ onUnmounted(() => {
 /* ===== TABLE CARD ===== */
 .table-card {
   margin: 12px 0 0 0;
-  background: #fff;
-  border: 1px solid #E5E7EB;
+  background: var(--card);
+  border: 1px solid var(--border);
   border-radius: 10px;
   overflow: hidden;
 }
@@ -767,8 +779,8 @@ onUnmounted(() => {
   align-items: center;
   justify-content: space-between;
   padding: 6px 12px;
-  background: #fff;
-  border-bottom: 1px solid #F3F4F6;
+  background: var(--card);
+  border-bottom: 1px solid var(--hover);
 }
 .toolbar-left { display: flex; align-items: center; }
 .toolbar-right { display: flex; align-items: center; gap: 6px; }
@@ -777,7 +789,7 @@ onUnmounted(() => {
   background: none;
   border: none;
   cursor: pointer;
-  color: #6B7280;
+  color: var(--muted);
   width: 28px;
   height: 28px;
   border-radius: 6px;
@@ -786,14 +798,14 @@ onUnmounted(() => {
   justify-content: center;
   transition: background 0.15s;
 }
-.refresh-btn:hover { background: #F3F4F6; }
+.refresh-btn:hover { background: var(--hover); }
 .refresh-btn.spinning svg { animation: spin 0.8s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
 
-.page-range-text { font-size: 12px; color: #6B7280; }
+.page-range-text { font-size: 12px; color: var(--muted); }
 .page-btn {
   background: none;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border);
   border-radius: 5px;
   width: 24px;
   height: 24px;
@@ -801,22 +813,22 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: #374151;
+  color: var(--text2);
   transition: background 0.1s;
 }
-.page-btn:hover:not(:disabled) { background: #F3F4F6; }
+.page-btn:hover:not(:disabled) { background: var(--hover); }
 .page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
 
 /* ===== TABS ===== */
 .tabs-row {
   display: flex;
-  border-bottom: 1px solid #E5E7EB;
+  border-bottom: 1px solid var(--border);
   padding: 0 16px;
 }
 .tab {
   padding: 10px 14px;
   font-size: 13px;
-  color: #6B7280;
+  color: var(--muted);
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
@@ -824,15 +836,15 @@ onUnmounted(() => {
   margin-bottom: -1px;
   transition: color 0.15s, border-color 0.15s;
 }
-.tab:hover { color: #374151; }
-.tab.active { color: #111827; border-bottom-color: #111827; font-weight: 500; }
+.tab:hover { color: var(--text2); }
+.tab.active { color: var(--text); border-bottom-color: var(--text); font-weight: 500; }
 
 /* ===== LOADING BAR ===== */
-.loading-bar { height: 2px; background: #F3F4F6; overflow: hidden; }
+.loading-bar { height: 2px; background: var(--hover); overflow: hidden; }
 .loading-bar-fill {
   height: 100%;
   width: 35%;
-  background: #6B7280;
+  background: var(--muted);
   animation: slide 1.1s ease-in-out infinite;
 }
 @keyframes slide {
@@ -848,34 +860,34 @@ thead th {
   text-align: left;
   font-weight: 600;
   font-size: 13px;
-  color: #374151;
-  border-bottom: 1px solid #E5E7EB;
+  color: var(--text2);
+  border-bottom: 1px solid var(--border);
   white-space: nowrap;
-  background: #fff;
+  background: var(--card);
 }
-tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
+tbody tr { border-bottom: 1px solid var(--hover); transition: background 0.1s; }
 tbody tr:last-child { border-bottom: none; }
-tbody tr:hover { background: #FAFAFA; }
+tbody tr:hover { background: var(--thead); }
 tbody td { padding: 14px 16px; vertical-align: middle; }
 
-.empty { text-align: center; color: #9CA3AF; padding: 48px 0 !important; }
-.td-name { font-weight: 500; color: #111827; }
-.td-muted { color: #6B7280; font-size: 13px; }
+.empty { text-align: center; color: var(--muted); padding: 48px 0 !important; }
+.td-name { font-weight: 500; color: var(--text); }
+.td-muted { color: var(--muted); font-size: 13px; }
 
 .sites-badge {
   display: inline-block;
-  background: #F3F4F6;
+  background: var(--hover);
   border-radius: 20px;
   padding: 3px 12px;
   font-size: 12px;
-  color: #374151;
+  color: var(--text2);
 }
 .date-cell {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 13px;
-  color: #374151;
+  color: var(--text2);
 }
 
 /* ===== STATUS CHIPS ===== */
@@ -889,12 +901,12 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   font-weight: 500;
 }
 .status-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
-.status-chip.active    { background: #D1FAE5; color: #065F46; }
-.status-chip.active::before    { background: #10B981; }
-.status-chip.suspended { background: #FEE2E2; color: #991B1B; }
-.status-chip.suspended::before { background: #EF4444; }
-.status-chip.pending   { background: #FEF9C3; color: #854D0E; }
-.status-chip.pending::before   { background: #EAB308; }
+.status-chip.active    { background: var(--ok-bg); color: var(--ok); }
+.status-chip.active::before    { background: currentColor; }
+.status-chip.suspended { background: var(--err-bg); color: var(--err); }
+.status-chip.suspended::before { background: currentColor; }
+.status-chip.pending   { background: var(--warn-bg); color: var(--warn); }
+.status-chip.pending::before   { background: currentColor; }
 
 /* ===== ACTION MENU ===== */
 .action-wrap { position: relative; }
@@ -907,16 +919,16 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   border-radius: 6px;
   padding: 6px 8px;
   cursor: pointer;
-  color: #9CA3AF;
+  color: var(--muted);
   transition: background 0.15s;
 }
-.dots-btn:hover { background: #F3F4F6; color: #374151; }
+.dots-btn:hover { background: var(--hover); color: var(--text2); }
 .dots-btn span { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
 
 .dropdown {
   position: fixed;
-  background: #fff;
-  border: 1px solid #E5E7EB;
+  background: var(--card);
+  border: 1px solid var(--border);
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.08);
   min-width: 130px;
@@ -932,12 +944,12 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   background: none;
   border: none;
   cursor: pointer;
-  color: #374151;
+  color: var(--text2);
   transition: background 0.1s;
 }
-.dd-item:hover { background: #F9FAFB; }
-.dd-item.danger { color: #DC2626; }
-.dd-item.danger:hover { background: #FEF2F2; }
+.dd-item:hover { background: var(--hover); }
+.dd-item.danger { color: var(--err); }
+.dd-item.danger:hover { background: var(--err-bg); }
 
 .cancel-btn {
   display: inline-flex;
@@ -945,27 +957,27 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   gap: 6px;
   padding: 5px 12px;
   font-size: 12px;
-  color: #DC2626;
-  background: #FEF2F2;
-  border: 1px solid #FECACA;
+  color: var(--err);
+  background: var(--err-bg);
+  border: 1px solid var(--err-bg);
   border-radius: 6px;
   cursor: pointer;
   transition: background 0.15s;
 }
-.cancel-btn:hover { background: #FEE2E2; }
+.cancel-btn:hover { background: var(--err-bg); }
 .cancel-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 .spinner {
   display: inline-block;
   width: 11px;
   height: 11px;
-  border: 1.5px solid #FECACA;
-  border-top-color: #DC2626;
+  border: 1.5px solid var(--err-bg);
+  border-top-color: var(--err);
   border-radius: 50%;
   animation: spin 0.7s linear infinite;
 }
 .spinner-light {
   border: 1.5px solid rgba(255,255,255,0.5);
-  border-top-color: #fff;
+  border-top-color: var(--card);
 }
 
 .client-detail {
@@ -982,7 +994,7 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   z-index: 1000;
 }
 .dialog-box {
-  background: #fff;
+  background: var(--card);
   border-radius: 12px;
   max-width: 500px;
   width: 90%;
@@ -992,7 +1004,7 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
 
 /* ===== SUSPEND CONFIRMATION DIALOG ===== */
 .confirm-box {
-  background: #fff;
+  background: var(--card);
   border-radius: 12px;
   max-width: 380px;
   width: 90%;
@@ -1002,12 +1014,12 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
 .confirm-title {
   font-size: 16px;
   font-weight: 600;
-  color: #111827;
+  color: var(--text);
   margin-bottom: 8px;
 }
 .confirm-text {
   font-size: 13.5px;
-  color: #4B5563;
+  color: var(--text2);
   line-height: 1.5;
   margin-bottom: 20px;
 }
@@ -1020,14 +1032,14 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   padding: 8px 16px;
   font-size: 13px;
   font-weight: 500;
-  border: 1px solid #D1D5DB;
+  border: 1px solid var(--border);
   border-radius: 8px;
-  background: #fff;
-  color: #374151;
+  background: var(--card);
+  color: var(--text2);
   cursor: pointer;
   transition: background 0.15s;
 }
-.btn-cancel:hover { background: #F9FAFB; }
+.btn-cancel:hover { background: var(--hover); }
 .btn-confirm-danger {
   display: inline-flex;
   align-items: center;
@@ -1039,11 +1051,11 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   font-weight: 500;
   border: none;
   border-radius: 8px;
-  background: #DC2626;
-  color: #fff;
+  background: var(--err);
+  color: var(--card);
   cursor: pointer;
   transition: background 0.15s;
 }
-.btn-confirm-danger:hover:not(:disabled) { background: #B91C1C; }
+.btn-confirm-danger:hover:not(:disabled) { background: var(--err); }
 .btn-confirm-danger:disabled { opacity: 0.7; cursor: not-allowed; }
 </style>

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>