@7365admin1/layer-common 3.2.2-staging.86 → 3.2.2-staging.88

package/assets/css/screens.css

@@ -398,6 +398,21 @@
   background: var(--hover);
 }
 
+/**
+ * The grouped list (`TableHygiene`) draws its own rows instead of a <table>,
+ * so it cannot inherit the two rules above. Its group header takes the header
+ * row's surface and its rows the card's - replacing the literal
+ * `grey-lighten-4` and `white` that painted the whole list near-white on a
+ * dark card.
+ */
+.table-card__group {
+  background: var(--thead);
+}
+
+.table-card__row {
+  background: var(--card);
+}
+
 /* ------------------------------------------------------------------ */
 /* Empty state, in-card search, buttons and in-card tabs.              */
 /* ------------------------------------------------------------------ */

package/components/AreaChecklistHistoryMain.vue

@@ -33,7 +33,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"
+              class="w-100 filter-bar d-flex align-center ga-5"
               flat
               :height="60"
             >
@@ -80,7 +80,11 @@
           </div>
         </template>
         <template #item.status="{ value }">
-          <v-chip class="text-capitalize">{{ value || "No Status" }}</v-chip>
+          <StatusChip
+            class="text-capitalize"
+            :status="value"
+            :label="value || 'No Status'"
+          />
         </template>
       </TableMain></v-col
     >

package/components/AreaMain.vue

@@ -49,10 +49,8 @@
                 <!-- Primary action -->
                 <v-btn
                   v-if="canCreateArea"
-                  class="text-none mr-3"
-                  rounded="pill"
-                  variant="tonal"
-                  size="large"
+                  class="text-none mr-3 screen-btn-primary"
+                  variant="flat"
                   @click="onCreateItem"
                 >
                   {{ createLabel }}
@@ -63,10 +61,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       href="/files/area-sample-data.xlsx"
                       target="_blank"
                       download
@@ -81,10 +77,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       @click="onImportData"
                     >
                       <v-icon>mdi-upload</v-icon>
@@ -97,10 +91,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       @click="handleDownloadExcel"
                       :loading="isDownloading"
                     >
@@ -114,7 +106,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"

package/components/BillingMain.vue

@@ -1,14 +1,12 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="false"
-      >
-        <v-toolbar density="compact" color="grey-lighten-4">
+      <v-card width="100%" variant="flat" class="table-card" :loading="false">
+        <v-toolbar
+          density="compact"
+          color="transparent"
+          class="table-card__toolbar"
+        >
           <template #prepend>
             <v-btn fab icon density="comfortable">
               <v-icon>mdi-refresh</v-icon>
@@ -16,7 +14,7 @@
           </template>
           <template #append>
             <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
+              <span class="mr-2 table-card__range">
                 {{ pageRange }}
               </span>
               <local-pagination v-model="page" :length="pages" />
@@ -38,7 +36,7 @@
             <span class="text-caption font-weight-bold text-capitalize">
               permissions
             </span>
-            <v-chip>{{ value.length }}</v-chip>
+            <StatusChip :dot="false" tone="neutral" :label="`${value.length}`" />
           </template>
 
           <template #item.nature="{ item }">

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;
 }
 
@@ -651,9 +651,9 @@ onUnmounted(() => {
   gap: 12px;
 }
 .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,7 +662,7 @@ onUnmounted(() => {
   white-space: nowrap;
   transition: background 0.15s;
 }
-.btn-invite:hover { background: #F9FAFB; }
+.btn-invite:hover { background: var(--hover); }
 
 .search-wrap {
   position: relative;
@@ -672,16 +672,16 @@ onUnmounted(() => {
 .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,13 +698,13 @@ 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;
@@ -721,8 +721,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 +730,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 +755,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 +767,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 +777,7 @@ onUnmounted(() => {
   background: none;
   border: none;
   cursor: pointer;
-  color: #6B7280;
+  color: var(--muted);
   width: 28px;
   height: 28px;
   border-radius: 6px;
@@ -786,14 +786,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 +801,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 +824,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 +848,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 +889,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 +907,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 +932,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 +945,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 +982,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 +992,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 +1002,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 +1020,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 +1039,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/EntryPassMain.vue

@@ -6,8 +6,8 @@
     v-if="loading"
   />
   <v-row no-gutters v-if="!loading">
-    <v-col cols="12" elevation="3" class="border">
-      <v-tabs v-model="activeTab" color="primary" class="px-2">
+    <v-col cols="12" elevation="3" class="screen-card">
+      <v-tabs v-model="activeTab" color="primary" class="px-2 screen-tabs">
         <v-tab value="general">
           <v-icon start>mdi-cog-outline</v-icon>
           General

package/components/EquipmentItemMain.vue

@@ -20,10 +20,8 @@
           <v-row no-gutters align="center" class="w-100">
             <v-col cols="auto" v-if="canCreateEquipmentItem">
               <v-btn
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 @click="openEquipmentItemDialog()"
               >
                 Checkout Item
@@ -32,7 +30,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"

package/components/EquipmentManagementMain.vue

@@ -20,10 +20,8 @@
           <v-row no-gutters align="center" class="w-100">
             <v-col cols="auto" v-if="canAddEquipment">
               <v-btn
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 @click="onCreateUnit()"
               >
                 Add Equipment
@@ -32,7 +30,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"
@@ -60,7 +58,11 @@
         </template>
 
         <template #item.status="{ value }">
-          <v-chip class="text-capitalize">{{ value || "N/A" }}</v-chip>
+          <StatusChip
+            class="text-capitalize"
+            :status="value"
+            :label="value || 'N/A'"
+          />
         </template>
 
         <template #item.block="{ value }">

package/components/FeedbackMain.vue

@@ -1,7 +1,7 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12" class="mb-2">
-      <v-row no-gutters align="center">
+      <v-row no-gutters align="center" class="filter-bar">
         <v-text-field
           v-model="searchText"
           placeholder="Search feedback..."
@@ -53,24 +53,20 @@
         <v-btn
           v-if="canCreateFeedback"
           text="create feedback"
-          class="text-none text-capitalize ml-2"
-          rounded="pill"
-          variant="tonal"
-          size="large"
+          class="text-none text-capitalize ml-2 screen-btn-primary filter-bar__fit"
+          variant="flat"
           @click="showCreateDialog = true"
         />
       </v-row>
     </v-col>
 
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
-        <v-toolbar density="compact" color="grey-lighten-4">
+      <v-card width="100%" variant="flat" class="table-card" :loading="loading">
+        <v-toolbar
+          density="compact"
+          color="transparent"
+          class="table-card__toolbar"
+        >
           <template #prepend>
             <v-btn
               fab
@@ -84,7 +80,7 @@
 
           <template #append>
             <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
+              <span class="mr-2 table-card__range">
                 {{ pageRange }}
               </span>
               <local-pagination
@@ -139,13 +135,7 @@
           </template>
           <template #item.status="{ value }">
             <span class="d-inline-block text-truncate">
-              <v-chip
-                :color="getStatusColor(value ?? '')"
-                class="pa-5 text-capitalize text-center whitespace-nowrap text-body-1"
-                variant="flat"
-              >
-                {{ value }}
-              </v-chip>
+              <StatusChip class="text-capitalize" :status="value" />
             </span>
           </template>
           <template #item.assigneeInfo="{ item, index }">
@@ -660,7 +650,6 @@ const _feedback = ref({
 });
 
 const {
-  getStatusColor,
   debounce,
   standardFormatDateTime,
   standardFormatDate,

package/components/ManageChecklistMain.vue

@@ -10,10 +10,10 @@
         </v-col>
         <v-spacer />
         <v-col v-if="isScheduleClosed" cols="auto" class="d-flex align-center">
-          <v-chip color="error" variant="tonal" class="text-capitalize">
-            <v-icon start>mdi-lock</v-icon>
+          <StatusChip status="Closed" class="text-capitalize">
+            <v-icon size="14">mdi-lock</v-icon>
             Closed – View Only
-          </v-chip>
+          </StatusChip>
         </v-col>
       </v-row>
       <TableHygiene
@@ -85,7 +85,7 @@
               <v-sheet
                 border
                 rounded="lg"
-                class="d-inline-flex flex-column pa-3 bg-grey-lighten-5"
+                class="d-inline-flex flex-column pa-3"
                 style="max-width: 420px"
               >
                 <div class="d-flex align-center ga-2 mb-2">
@@ -93,9 +93,7 @@
                   <span class="text-caption font-weight-bold">
                     Rejection details
                   </span>
-                  <v-chip size="x-small" color="error" variant="tonal">
-                    Rejected
-                  </v-chip>
+                  <StatusChip status="Rejected" :dot="false" />
                 </div>
                 <div
                   v-if="item.remarks"
@@ -173,22 +171,24 @@
         <template #group-header-append="{ group }">
           <v-row no-gutters align="center" class="ga-2">
             <v-col v-if="isGroupAnyApproved(group)" cols="auto">
-              <v-chip
-                size="x-small"
-                :color="isGroupComplete(group) ? 'success' : 'warning'"
-                variant="tonal"
-                :prepend-icon="
-                  isGroupComplete(group)
-                    ? 'mdi-check-circle-outline'
-                    : 'mdi-progress-clock'
-                "
+              <StatusChip
+                :status="isGroupComplete(group) ? 'Completed' : 'Ongoing'"
+                :tone="isGroupComplete(group) ? 'ok' : 'warn'"
+                :dot="false"
                 class="text-none"
               >
+                <v-icon size="12">
+                  {{
+                    isGroupComplete(group)
+                      ? "mdi-check-circle-outline"
+                      : "mdi-progress-clock"
+                  }}
+                </v-icon>
                 {{ isGroupComplete(group) ? "Completed" : "Ongoing" }}
                 <template v-if="getGroupCompletedByName(group)">
                   · {{ getGroupCompletedByName(group) }}
                 </template>
-              </v-chip>
+              </StatusChip>
             </v-col>
             <v-col
               v-if="group.attachments && group.attachments.length > 0"

package/components/ScheduleAreaMain.vue

@@ -21,7 +21,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"
+              class="w-100 filter-bar d-flex align-center ga-5"
               flat
               :height="60"
             >
@@ -68,20 +68,18 @@
             <v-spacer />
 
             <v-col cols="auto">
-              <v-chip
+              <StatusChip
                 v-if="isScheduleClosed"
-                color="error"
-                variant="tonal"
+                status="Closed"
                 class="text-capitalize mr-2"
               >
-                <v-icon start>mdi-lock</v-icon>
+                <v-icon size="14">mdi-lock</v-icon>
                 Closed – View Only
-              </v-chip>
+              </StatusChip>
               <v-btn
                 v-if="canViewHistory"
-                class="text-none mr-2"
-                size="large"
-                color="primary"
+                class="text-none mr-2 screen-btn-primary"
+                variant="flat"
                 aria-label="History"
                 @click="openHistory"
               >
@@ -89,9 +87,8 @@
               </v-btn>
               <v-btn
                 v-if="canGenerateChecklist"
-                class="text-none"
-                size="large"
-                color="primary"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 aria-label="Generate"
                 @click="_generateChecklist"
                 :loading="submitting"
@@ -114,20 +111,13 @@
             </span>
           </div>
           <div v-else-if="isScheduleClosed">
-            <v-chip
-              size="small"
-              color="error"
-              variant="tonal"
-              class="text-capitalize"
-              >Closed</v-chip
-            >
+            <StatusChip status="Closed" class="text-capitalize" />
           </div>
           <div v-else>
             <v-btn
               v-if="canManageScheduleTasks"
               variant="outlined"
-              size="medium"
-              class="text-capitalize px-4 py-2"
+              class="text-capitalize screen-btn-ghost"
               @click.stop="() => _acceptAreaChecklist(item._id)"
             >
               Accept
@@ -146,14 +136,11 @@
         </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>
       </TableMain></v-col
     >
@@ -262,27 +249,6 @@ watchEffect(() => {
   }
 });
 
-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";
-  }
-};
-
 function showMessage(msg: string, color: string = "error") {
   message.value = msg;
   messageColor.value = color;

package/components/ScheduleTastTicketMain.vue

@@ -47,13 +47,7 @@
         </template>
 
         <template #item.status="{ value }">
-          <v-chip
-            :color="getStatusColor(value)"
-            class="font-weight-bold"
-            style="background: #ffe6c2; color: #ff9800"
-          >
-            {{ value || "To-Do" }}
-          </v-chip>
+          <StatusChip :status="value || 'To-Do'" :label="value || 'To-Do'" />
         </template>
         <!-- Completion Date/Time -->
         <template #item.completionDate="{ value }">
@@ -61,7 +55,11 @@
         </template>
         <!-- Action (Accept button) -->
         <template #item.action="{ item }">
-          <v-btn outlined class="accept-btn" @click.stop="acceptTask(item)">
+          <v-btn
+            variant="outlined"
+            class="text-none screen-btn-ghost"
+            @click.stop="acceptTask(item)"
+          >
             Accept
           </v-btn>
         </template>
@@ -146,11 +144,6 @@ function getAvatarColor(name: string) {
   if (name === "Hygiene SP") return "blue";
   return "grey";
 }
-function getStatusColor(status: string) {
-  if (status === "To-Do") return "orange";
-  if (status === "Completed") return "green";
-  return "grey";
-}
 function acceptTask(item: any) {
   selectedTask.value = item;
   showAcceptDialog.value = true;
@@ -170,13 +163,3 @@ function onRowClick(data: any) {
   }
 }
 </script>
-
-<style scoped>
-.accept-btn {
-  border: 1px solid #333;
-  background: #fff;
-  border-radius: 4px;
-  cursor: pointer;
-  min-width: 80px;
-}
-</style>

package/components/SiteSettings.vue

@@ -1,8 +1,13 @@
 <template>
   <v-row no-gutters>
-    <v-expansion-panels multiple v-model="openPanels">
+    <!--
+      The design draws settings as a stack of bordered sections with one open
+      at a time. `multiple` is BEHAVIOUR - which sections a user may have open
+      together - so it is left exactly as it was and only the drawing changes.
+    -->
+    <v-expansion-panels multiple v-model="openPanels" class="screen-accordion">
       <!-- SITE SETTINGS -->
-      <v-expansion-panel v-if="canManageSiteInformation" color="primary">
+      <v-expansion-panel v-if="canManageSiteInformation">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-cog</v-icon>
           Site Information
@@ -22,7 +27,7 @@
                   <v-img v-if="coverPhotoUrl" :src="coverPhotoUrl" aspect-ratio="16/9" cover rounded="lg"
                     class="w-100 border" />
                   <div v-else
-                    class="w-100 d-flex align-center justify-center rounded-lg bg-grey-lighten-4 border border-dashed"
+                    class="w-100 d-flex align-center justify-center rounded-lg border border-dashed site-settings__placeholder"
                     style="aspect-ratio: 16/9">
                     <span class="text-caption text-medium-emphasis">No cover photo uploaded</span>
                   </div>
@@ -76,7 +81,7 @@
       </v-expansion-panel>
 
       <!-- ANPR CAMERA -->
-      <v-expansion-panel v-if="showAnprCamera && canManageANPRCamera" color="primary">
+      <v-expansion-panel v-if="showAnprCamera && canManageANPRCamera">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-camera</v-icon>
           ANPR Camera
@@ -118,7 +123,7 @@
       </v-expansion-panel>
 
       <!-- CCTV CAMERA -->
-      <v-expansion-panel v-if="showCctvCamera && canManageCCTVCamera" color="primary">
+      <v-expansion-panel v-if="showCctvCamera && canManageCCTVCamera">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-cctv</v-icon>
           CCTV Camera
@@ -129,7 +134,7 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel v-if="showDeliveryCompanies && canManageDeliveryCompanies" color="primary">
+      <v-expansion-panel v-if="showDeliveryCompanies && canManageDeliveryCompanies">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-truck</v-icon>
           Delivery Companies
@@ -140,7 +145,7 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel v-if="showResidentVisitors && canManageResidentVisitors" color="primary">
+      <v-expansion-panel v-if="showResidentVisitors && canManageResidentVisitors">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-car</v-icon>
           Resident Visitors
@@ -150,7 +155,7 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel color="primary">
+      <v-expansion-panel>
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-face-recognition</v-icon>
           HID Face Reader
@@ -421,3 +426,11 @@ const saveANPRSettings = async () => {
   }
 };
 </script>
+
+<style scoped>
+/* Was `bg-grey-lighten-4`: a literal light grey, so the empty cover-photo tile
+   stayed a white slab on the dark page. */
+.site-settings__placeholder {
+  background: var(--thead);
+}
+</style>

package/components/TableHygiene.vue

@@ -5,10 +5,8 @@
         <slot name="actions">
           <v-btn
             v-if="canCreate"
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
+            class="text-none screen-btn-primary"
+            variant="flat"
             @click="emits('create')"
           >
             {{ createLabel }}
@@ -18,16 +16,11 @@
     </v-col>
 
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
+      <v-card width="100%" variant="flat" class="table-card" :loading="loading">
         <v-toolbar
           density="compact"
-          color="grey-lighten-4"
+          color="transparent"
+          class="table-card__toolbar"
           :extension-height="extensionHeight"
         >
           <template #prepend>
@@ -46,7 +39,7 @@
 
           <template #append>
             <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
+              <span class="mr-2 table-card__range">
                 {{ pageRange }}
               </span>
               <local-pagination
@@ -68,25 +61,16 @@
           :max-height="`calc(100vh - (${offset}px))`"
           class="overflow-y-auto"
         >
-          <v-row
-            v-if="groupedItems.length === 0"
-            no-gutters
-            justify="center"
-            class="py-10"
-          >
-            <v-col
-              cols="auto"
-              class="text-center text-medium-emphasis text-body-2"
-            >
-              {{ noDataText }}
-            </v-col>
-          </v-row>
+          <div v-if="groupedItems.length === 0" class="table-card__empty">
+            <v-icon icon="mdi-magnify-close" size="32" />
+            <span>{{ noDataText }}</span>
+          </div>
 
           <template
             v-for="(group, groupIndex) in groupedItems"
             :key="`group-${groupIndex}`"
           >
-            <v-sheet color="grey-lighten-4" border="b t">
+            <v-sheet color="transparent" class="table-card__group" border="b t">
               <v-row no-gutters align="center" class="px-4 py-2">
                 <v-col cols="auto" class="d-flex align-center ga-2">
                   <span
@@ -94,39 +78,37 @@
                   >
                     Set {{ group.set }}
                   </span>
-                  <v-chip
+                  <StatusChip
                     v-if="group.isScheduleTask"
-                    size="x-small"
-                    color="info"
-                    variant="tonal"
-                    prepend-icon="mdi-calendar-clock"
+                    tone="info"
+                    :dot="false"
                     class="text-none"
                   >
+                    <v-icon size="12">mdi-calendar-clock</v-icon>
                     Schedule Task
-                  </v-chip>
+                  </StatusChip>
                   <slot name="group-header-chips" :group="group">
-                    <v-chip
+                    <StatusChip
                       v-if="group.completedByName && isGroupComplete(group)"
-                      size="x-small"
-                      color="success"
-                      variant="tonal"
-                      prepend-icon="mdi-check-circle-outline"
+                      status="Completed"
+                      :dot="false"
                       class="text-none"
                     >
+                      <v-icon size="12">mdi-check-circle-outline</v-icon>
                       Completed · {{ group.completedByName }}
-                    </v-chip>
-                    <v-chip
+                    </StatusChip>
+                    <StatusChip
                       v-else-if="
                         group.completedByName && isGroupInProgress(group)
                       "
-                      size="x-small"
-                      color="warning"
-                      variant="tonal"
-                      prepend-icon="mdi-progress-clock"
+                      status="Ongoing"
+                      tone="warn"
+                      :dot="false"
                       class="text-none"
                     >
+                      <v-icon size="12">mdi-progress-clock</v-icon>
                       Ongoing · {{ group.completedByName }}
-                    </v-chip>
+                    </StatusChip>
                   </slot>
                 </v-col>
                 <v-spacer />
@@ -139,7 +121,8 @@
             <v-sheet
               v-for="item in group.items"
               :key="item[itemValue]"
-              color="white"
+              color="transparent"
+              class="table-card__row"
               border="b"
             >
               <v-row no-gutters align="center" class="px-4 py-2">

package/components/UnitMain.vue

@@ -24,10 +24,8 @@
                 <!-- Primary action -->
                 <v-btn
                   v-if="canCreateUnit"
-                  class="text-none mr-3"
-                  rounded="pill"
-                  variant="tonal"
-                  size="large"
+                  class="text-none mr-3 screen-btn-primary"
+                  variant="flat"
                   @click="onCreateUnit()"
                 >
                   Add Unit
@@ -37,10 +35,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       href="/files/unit-sample-data.xlsx"
                       target="_blank"
                       download
@@ -55,10 +51,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       @click="onImportData"
                     >
                       <v-icon>mdi-upload</v-icon>
@@ -71,10 +65,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       @click="handleDownloadExcel"
                       :loading="isDownloading"
                     >
@@ -88,7 +80,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"

package/package.json

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