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

package/components/Chat/Information.vue

@@ -1,21 +1,16 @@
 <template>
   <v-sheet
-    elevation="1"
+    elevation="0"
     rounded="0"
-    class="fill-height d-flex flex-column"
-    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
+    class="chat-info fill-height d-flex flex-column"
   >
     <v-row class="pa-4">
       <v-sheet
         class="overflow-y-auto flex-grow-1"
         :style="{ height: 'calc(100vh - 250px)', overflowX: 'hidden' }"
       >
-        <v-col
-          cols="12"
-          class="mb-2"
-          style="position: sticky; top: 0; background-color: white; z-index: 1"
-        >
-          <h3 class="text-h6">
+        <v-col cols="12" class="chat-info__head mb-2">
+          <h3 class="screen-card-title">
             {{ type === "workOrder" ? "Work Order" : "Feedback" }} Information
           </h3>
         </v-col>
@@ -105,7 +100,7 @@
             </v-col>
             <v-col v-else cols="6" class="py-1 text-right">
               <v-btn
-                class="text-none text-capitalize text-blue"
+                class="chat-info__link text-none"
                 rounded="pill"
                 variant="flat"
                 size="small"
@@ -130,13 +125,7 @@
           <v-row dense class="my-1">
             <v-col cols="6" class="py-1"><strong>Status:</strong></v-col>
             <v-col cols="6" class="py-1 text-right">
-              <v-chip
-                :color="getColorStatus(item.status)"
-                size="x-small"
-                text-color="white"
-              >
-                {{ item.status }}
-              </v-chip>
+              <StatusChip :status="item.status" />
             </v-col>
           </v-row>
 
@@ -152,12 +141,11 @@
       </v-sheet>
     </v-row>
 
-    <v-sheet class="px-4 py-2">
+    <v-sheet class="chat-info__actions px-4 py-2">
       <v-btn
         block
-        color="primary"
         variant="flat"
-        class="mb-2 text-capitalize"
+        class="screen-btn-primary mb-2"
         @click="$emit('edit')"
       >
         Edit
@@ -165,23 +153,15 @@
       <v-btn
         v-if="item?.status !== 'Completed'"
         block
-        color="primary-button"
-        density="default"
-        class="mb-2 text-capitalize"
+        variant="flat"
+        class="screen-btn-primary mb-2"
         @click="$emit('mark-complete-request')"
       >
         Mark as Complete
       </v-btn>
-      <v-btn
-        block
-        variant="flat"
-        color="red"
-        density="default"
-        class="text-white text-capitalize"
-        @click="$emit('delete')"
-      >
+      <AppButton variant="err" class="chat-info__delete" @click="$emit('delete')">
         Delete
-      </v-btn>
+      </AppButton>
     </v-sheet>
 
     <WorkOrderCreate
@@ -414,3 +394,40 @@ function showWorkOrderInfo(workOrderId: string) {
   };
 }
 </script>
+
+<style scoped>
+/* The same two hard-coded #e0e0e0 hairlines the other two chat panels carried,
+   and a sticky heading whose background was the literal word `white` - i.e. a
+   white bar across the dark theme. */
+.chat-info {
+  background: var(--card);
+  border-right: 1px solid var(--border);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-sans);
+  color: var(--text);
+}
+
+.chat-info__head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--card);
+}
+
+.chat-info__actions {
+  background: var(--card);
+}
+
+/* AppButton is a <button>, not a v-btn, so `block` does not reach it. */
+.chat-info__delete {
+  width: 100%;
+}
+
+/* Was `text-blue` - a Vuetify palette word, not a token. */
+.chat-info__link {
+  background: transparent;
+  color: var(--accent-text);
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn-strong);
+}
+</style>

package/components/Chat/ListCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="mb-2 pa-2 rounded-lg border-sm" elevation="0">
+  <v-card class="chat-listcard screen-card mb-2 pa-2" elevation="0">
     <v-row no-gutters align="center">
       <v-col cols="12" sm="4" class="d-flex justify-center align-center">
         <v-img
@@ -15,30 +15,30 @@
       <v-col cols="12" sm="8" class="py-2 pe-1">
         <v-row dense>
           <v-col cols="12" class="d-flex align-center flex-wrap">
-            <span class="text-caption font-weight-medium me-1">Created by</span>
+            <span class="chat-listcard__label me-1">Created by</span>
 
-            <v-avatar color="surface-variant" size="20" class="me-1">
+            <v-avatar class="chat-listcard__avatar me-1" size="20">
               <v-img
                 v-if="userProfile"
                 :src="userProfile"
                 width="20"
                 height="20"
               />
-              <span v-else class="text-overline">
+              <span v-else class="chat-listcard__initials">
                 {{ getNameInitials }}
               </span>
             </v-avatar>
 
-            <span class="text-caption">{{ createdByName || "Unknown" }}</span>
+            <span class="chat-listcard__cell">{{ createdByName || "Unknown" }}</span>
           </v-col>
 
-          <v-col cols="12" class="text-caption">Subject: {{ subject }}</v-col>
+          <v-col cols="12" class="chat-listcard__cell">Subject: {{ subject }}</v-col>
 
-          <v-col cols="12" class="text-caption">
-            Status: <span class="text-orange">{{ status }}</span>
+          <v-col cols="12" class="chat-listcard__cell d-flex align-center ga-1">
+            Status: <StatusChip :status="status" />
           </v-col>
 
-          <v-col cols="12" class="text-caption">
+          <v-col cols="12" class="chat-listcard__cell">
             Date Created: {{ createdAt }}
           </v-col>
         </v-row>
@@ -60,3 +60,32 @@ defineProps({
   getNameInitials: Function,
 });
 </script>
+
+<style scoped>
+.chat-listcard {
+  font-family: var(--font-sans);
+  color: var(--text);
+}
+
+.chat-listcard__cell,
+.chat-listcard__label {
+  font-size: var(--fs-cell-dense);
+}
+
+.chat-listcard__label {
+  font-weight: 600;
+}
+
+/* Was `color="surface-variant"` with `text-overline` initials - 10px letters
+   with 1.6px tracking inside a 20px circle, which drew as one clipped glyph. */
+.chat-listcard__avatar {
+  background: var(--hover);
+  color: var(--text2);
+}
+
+.chat-listcard__initials {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+</style>

package/components/Chat/Message.vue

@@ -1,18 +1,17 @@
 <template>
   <v-sheet
-    elevation="1"
+    elevation="0"
     rounded="0"
-    class="fill-height d-flex flex-column"
-    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
+    class="chat-panel fill-height d-flex flex-column"
   >
-    <div style="border-bottom: 1px solid #e0e0e0" class="px-4 pt-4 pb-2 mb-2">
-      <h3 class="text-h6">
+    <div class="chat-panel__head px-4 pt-4 pb-2 mb-2">
+      <h3 class="screen-card-title">
         {{ type === "workOrder" ? "Work Order" : "Feedback" }} Chat
       </h3>
     </div>
 
     <v-sheet
-      class="overflow-y-auto flex-grow-1 pa-3"
+      class="chat-panel__thread overflow-y-auto flex-grow-1 pa-3"
       :style="{ height: 'calc(100vh - 300px)', overflowX: 'hidden' }"
     >
       <v-row
@@ -35,10 +34,11 @@
       </v-row>
     </v-sheet>
 
-    <v-card class="mx-4 mb-4 mt-2 pa-3 rounded-lg" elevation="2">
+    <v-card class="screen-card mx-4 mb-4 mt-2 pa-3" elevation="0">
       <v-row no-gutters align="end">
         <v-col cols="10">
           <v-textarea
+            class="filter-field"
             label="Message"
             auto-grow
             hide-details
@@ -47,9 +47,7 @@
           />
         </v-col>
         <v-col cols="2" class="pl-2">
-          <v-btn color="primary-button" block class="pa-4 py-6 text-capitalize"
-            >Send</v-btn
-          >
+          <v-btn class="screen-btn-primary" variant="flat" block>Send</v-btn>
         </v-col>
       </v-row>
 
@@ -57,23 +55,27 @@
 
       <v-row justify="start" no-gutters align="center">
         <v-col cols="auto">
-          <v-icon size="20" class="mr-3">mdi-paperclip</v-icon>
+          <v-icon size="20" class="chat-panel__tool mr-3">mdi-paperclip</v-icon>
         </v-col>
 
         <v-col cols="auto">
-          <v-icon size="20" class="mr-3">mdi-emoticon-happy-outline</v-icon>
+          <v-icon size="20" class="chat-panel__tool mr-3"
+            >mdi-emoticon-happy-outline</v-icon
+          >
         </v-col>
 
         <v-col cols="auto">
           <v-menu location="top" offset="10">
             <template #activator="{ props }">
               <v-btn icon v-bind="props" density="compact" variant="text">
-                <v-icon size="20" color="gray">mdi-message-outline</v-icon>
+                <v-icon size="20" class="chat-panel__tool"
+                  >mdi-message-outline</v-icon
+                >
               </v-btn>
             </template>
 
-            <v-card min-width="350" class="rounded-lg">
-              <v-card-title class="text-subtitle-1 font-weight-medium pb-1"
+            <v-card min-width="350" class="screen-card">
+              <v-card-title class="screen-card-title pb-1"
                 >Quick Chat</v-card-title
               >
               <v-divider class="mb-1" />
@@ -156,3 +158,27 @@ const selectQuickChat = (msg: string) => {
   console.log("Quick Chat Selected:", msg);
 };
 </script>
+
+<style scoped>
+/* The panel's two rules were hard-coded `1px solid #e0e0e0`, which is a light-
+   theme hairline drawn on the dark theme as well. Same lines, on `--border`. */
+.chat-panel {
+  background: var(--card);
+  border-right: 1px solid var(--border);
+  border-top: 1px solid var(--border);
+}
+
+.chat-panel__head {
+  border-bottom: 1px solid var(--border);
+}
+
+.chat-panel__thread {
+  background: var(--bg);
+}
+
+/* Was a bare icon and one `color="gray"` - not a token, and not the same tone
+   as the icon beside it. */
+.chat-panel__tool {
+  color: var(--muted);
+}
+</style>

package/components/Chat/Navigation.vue

@@ -1,31 +1,24 @@
 <template>
-  <v-sheet
-    elevation="1"
-    rounded="0"
-    class="pa-4 fill-height"
-    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
-  >
-    <h3 class="text-h6 mb-4">{{ title }}</h3>
+  <v-sheet elevation="0" rounded="0" class="chat-nav pa-4 fill-height">
+    <h3 class="screen-card-title mb-4">{{ title }}</h3>
 
     <v-text-field
       v-model="search"
       @input="_search"
       label="Search"
       prepend-inner-icon="mdi-magnify"
-      density="compact"
       hide-details
       variant="outlined"
-      class="mb-4"
+      class="filter-field mb-4"
     />
 
     <v-select
       label="Filter by Status"
       :items="['All', 'In Progress', 'To Do', 'Done']"
       v-model="selectedStatus"
-      density="compact"
       hide-details
       variant="outlined"
-      class="mb-4"
+      class="filter-field mb-4"
     />
 
     <v-row dense class="mb-4" align="center">
@@ -43,7 +36,7 @@
               v-bind="props"
               v-model="startDate"
               label="Start Date"
-              density="compact"
+              class="filter-field"
               variant="outlined"
               readonly
               hide-details
@@ -63,7 +56,7 @@
       </v-col>
 
       <v-col cols="2" class="d-flex align-center justify-center">
-        <span class="text-subtitle-2">to</span>
+        <span class="chat-nav__to">to</span>
       </v-col>
 
       <v-col cols="5">
@@ -80,7 +73,7 @@
               v-bind="props"
               v-model="endDate"
               label="End Date"
-              density="compact"
+              class="filter-field"
               variant="outlined"
               readonly
               hide-details
@@ -101,7 +94,7 @@
     </v-row>
 
     <v-sheet
-      class="overflow-y-auto flex-grow-1 pa-3"
+      class="chat-nav__list overflow-y-auto flex-grow-1 pa-3"
       :style="{ height: 'calc(100vh - 320px)', overflowX: 'hidden' }"
     >
       <v-row dense>
@@ -148,3 +141,22 @@ function _search() {
   emit("search", search.value);
 }
 </script>
+
+<style scoped>
+/* Same two hard-coded #e0e0e0 hairlines the chat panel carried, on --border. */
+.chat-nav {
+  background: var(--card);
+  border-right: 1px solid var(--border);
+  border-top: 1px solid var(--border);
+}
+
+.chat-nav__list {
+  background: var(--bg);
+}
+
+.chat-nav__to {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+</style>

package/components/Chat/SkeletonLoader.vue

@@ -58,12 +58,19 @@ const chatSkeletons = ref([
   overflow-y: auto;
 }
 
+/*
+ * `background-color: white` used to sit here and never applied: the footer
+ * carries `color="background"`, and Vuetify's `.bg-background` sets the
+ * background with `!important`. It is deleted rather than out-specified - the
+ * theme colour is the one that should win, and a literal white would have been
+ * wrong in the dark theme anyway. The border was a literal `#ddd` for the same
+ * reason and is now the shared rule colour.
+ */
 .chat-footer {
   position: sticky;
   bottom: 0;
   width: 100%;
-  background-color: white;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--border);
   display: flex;
   justify-content: center;
   align-items: center;

package/components/ChecklistItemRow.vue

@@ -10,7 +10,7 @@
         "
         :disabled="readOnly"
         size="small"
-        class="me-2"
+        class="me-2 checklist-action"
         icon
         @click.stop="handleReject"
       >
@@ -27,6 +27,7 @@
         "
         :disabled="readOnly"
         size="small"
+        class="checklist-action"
         icon
         @click.stop="handleApprove"
       >
@@ -52,3 +53,26 @@ function handleApprove() {
   emit("approve", props.item);
 }
 </script>
+
+<style scoped>
+/*
+ * The reject/approve pair is the design's bordered icon square (`.screen-icon-btn`
+ * geometry) rather than Vuetify's pill: 36px, `--r-inner`, `--border`.
+ *
+ * `color="error"` / `color="success"` are LEFT ALONE - unlike `--success`/`--error`,
+ * which are not CSS tokens, Vuetify's `success`/`error` theme names are mapped in
+ * `utils/theme.ts` to the design's `ok`/`err`, so the chosen state already paints
+ * the right tone. Only the un-chosen (outlined) state was factory Vuetify.
+ */
+.checklist-action.v-btn {
+  width: var(--icon-btn);
+  height: var(--icon-btn);
+  min-width: var(--icon-btn);
+  border-radius: var(--r-inner);
+}
+
+.checklist-action.v-btn--variant-outlined {
+  border: 1px solid var(--border);
+  color: var(--text2);
+}
+</style>

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 }">
           {{
@@ -104,11 +98,15 @@
         </template>
       </TableMain>
       <div v-else class="pa-4">
-        <v-card variant="outlined" class="pa-4">
-          <div class="text-subtitle-1">
+        <!--
+          Was an outlined `v-card` painted from Vuetify's own `surface`. The
+          design's card, and the notice at the design's cell size.
+        -->
+        <AppCard class="pa-4">
+          <div class="cs-no-permission">
             You do not have permission to view cleaning schedules.
           </div>
-        </v-card>
+        </AppCard>
       </div>
     </v-col>
   </v-row>
@@ -159,33 +157,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);
@@ -344,3 +331,11 @@ function showMessage(msg: string, color: string = "error") {
   }
 }
 </script>
+
+<style scoped>
+.cs-no-permission {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+</style>