@7365admin1/layer-common 3.2.2-staging.85 → 3.2.2-staging.87

package/components/InvitationMain.vue

@@ -3,10 +3,8 @@
     <v-col cols="12" class="mb-2">
       <v-row no-gutters>
         <v-btn
-          class="text-none mr-2"
-          rounded="pill"
-          variant="tonal"
-          size="large"
+          class="text-none mr-2 screen-btn-primary"
+          variant="flat"
           @click="inviteMember()"
           v-if="props.inviteMember"
         >
@@ -15,8 +13,12 @@
       </v-row>
     </v-col>
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-        <v-toolbar density="compact" color="grey-lighten-4">
+      <v-card width="100%" variant="flat" class="table-card">
+        <v-toolbar
+          density="compact"
+          color="transparent"
+          class="table-card__toolbar"
+        >
           <template #prepend>
             <v-btn
               fab
@@ -30,7 +32,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
@@ -77,7 +79,7 @@
             <span class="text-caption font-weight-bold text-capitalize">
               permissions
             </span>
-            <v-chip>{{ value.length }}</v-chip>
+            <StatusChip :dot="false" tone="info" :label="String(value.length)" />
           </template>
           <template #item.createdAt="{ item }">
             {{ item.createdAt ? formatDate(item.createdAt) : "" }}

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/MemberMain.vue

@@ -4,9 +4,8 @@
       <v-row no-gutters>
         <v-btn
           v-if="props.seatManagement !== 'index'"
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
+          class="text-none screen-btn-primary"
+          variant="flat"
           :to="{
             name: props.seatManagement,
             params: { organization: props.orgId },
@@ -19,8 +18,12 @@
     </v-col>
 
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-        <v-toolbar density="compact" color="grey-lighten-4">
+      <v-card width="100%" variant="flat" class="table-card">
+        <v-toolbar
+          density="compact"
+          color="transparent"
+          class="table-card__toolbar"
+        >
           <template #prepend>
             <v-btn fab icon density="comfortable" @click="getAll()">
               <v-icon>mdi-refresh</v-icon>
@@ -29,7 +32,7 @@
 
           <template #append>
             <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-font gray">
+              <span class="mr-2 table-card__range">
                 {{ pageRange }}
               </span>
               <local-pagination

package/components/MyAttendanceMain.vue

@@ -17,10 +17,8 @@
           <v-row no-gutters align="center" class="w-100">
             <v-col cols="auto" v-if="canCheckInOut">
               <v-btn
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 @click="onCreateItem"
               >
                 {{ hasCheckedInToday ? "Check Out" : "Check In" }}
@@ -28,7 +26,7 @@
             </v-col>
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"

package/components/RolePermissionMain.vue

@@ -3,11 +3,9 @@
     <v-col cols="12" class="mb-2">
       <v-row no-gutters>
         <v-btn
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
+          class="text-none screen-btn-primary"
+          variant="flat"
           @click="createDialog = true"
-          size="large"
           v-if="canCreateRole"
         >
           Create role
@@ -17,12 +15,15 @@
     <v-col cols="12">
       <v-card
         width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
+        variant="flat"
+        class="table-card"
         :loading="loading"
       >
-        <v-toolbar density="compact" color="grey-lighten-4">
+        <v-toolbar
+          density="compact"
+          color="transparent"
+          class="table-card__toolbar"
+        >
           <template #prepend>
             <v-btn fab icon density="comfortable" @click="getRoles()">
               <v-icon>mdi-refresh</v-icon>
@@ -31,7 +32,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
@@ -58,7 +59,11 @@
             <span class="text-caption font-weight-bold text-capitalize">
               permissions
             </span>
-            <v-chip>{{ getPermissionCount(value) }}</v-chip>
+            <StatusChip
+              :dot="false"
+              tone="info"
+              :label="String(getPermissionCount(value))"
+            />
           </template>
 
           <template #item.action-table="{ item }" v-if="canDeleteRole">

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/ScheduleTaskMain.vue

@@ -21,10 +21,8 @@
           <v-row no-gutters align="center" class="w-100">
             <v-col cols="auto" v-if="canCreateScheduleTask">
               <v-btn
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 @click="openFormDialog"
               >
                 Create Schedule Task
@@ -33,7 +31,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"
@@ -49,28 +47,31 @@
 
         <template #item.areas="{ value }">
           <div v-if="value && value.length > 0">
-            <v-chip
+            <StatusChip
               v-for="(area, idx) in value.slice(0, 2)"
               :key="idx"
-              size="small"
               class="mr-1 mb-1"
-            >
-              {{ area.name }}
-            </v-chip>
-            <v-chip v-if="value.length > 2" size="small" class="mb-1">
-              +{{ value.length - 2 }} more
-            </v-chip>
+              :dot="false"
+              tone="neutral"
+              :label="area.name"
+            />
+            <StatusChip
+              v-if="value.length > 2"
+              class="mb-1"
+              :dot="false"
+              tone="neutral"
+              :label="`+${value.length - 2} more`"
+            />
           </div>
           <span v-else>N/A</span>
         </template>
 
         <template #item.status="{ value }">
-          <v-chip
-            :color="value === 'active' ? 'success' : 'default'"
+          <StatusChip
             class="text-capitalize"
-          >
-            {{ value || "N/A" }}
-          </v-chip>
+            :status="value"
+            :label="value || 'N/A'"
+          />
         </template>
       </TableMain>
 
@@ -270,15 +271,11 @@
                     Status:
                   </v-col>
                   <v-col cols="7" class="text-subtitle-2">
-                    <v-chip
-                      :color="
-                        selectedTask.status === 'active' ? 'success' : 'default'
-                      "
-                      size="small"
+                    <StatusChip
                       class="text-capitalize"
-                    >
-                      {{ selectedTask.status || "N/A" }}
-                    </v-chip>
+                      :status="selectedTask.status"
+                      :label="selectedTask.status || 'N/A'"
+                    />
                   </v-col>
                 </v-row>
 

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/ServiceProviderMain.vue

@@ -5,20 +5,16 @@
         <div class="d-flex flex-wrap align-center">
           <v-btn
             v-if="showAddButton && canAddServiceProvider"
-            class="text-none mr-2"
-            rounded="pill"
-            variant="tonal"
-            size="large"
+            class="text-none mr-2 screen-btn-primary"
+            variant="flat"
             @click="(createDialog = true), setServiceProvider({ mode: 'add' })"
           >
             Add
           </v-btn>
           <v-btn
             v-if="canInviteServiceProvider"
-            class="text-none mr-2"
-            rounded="pill"
-            variant="tonal"
-            size="large"
+            class="text-none mr-2 screen-btn-primary"
+            variant="flat"
             @click="
               (createInviteDialog = true),
                 setServiceProvider({ mode: 'invite' })
@@ -28,10 +24,8 @@
           </v-btn>
           <v-btn
             v-if="showBillingButton"
-            class="text-none mr-2"
-            rounded="pill"
-            variant="tonal"
-            size="large"
+            class="text-none mr-2 screen-btn-primary"
+            variant="flat"
             @click="
               useRouter().push({
                 name: 'org-site-service-provider-mgmt-billing',
@@ -59,9 +53,8 @@
     <v-col cols="12">
       <v-card
         width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
+        variant="flat"
+        class="table-card"
         :loading="loading"
       >
         <div class="sp-table-header">
@@ -101,7 +94,7 @@
             v-model="listTab"
             color="primary"
             density="comfortable"
-            class="sp-tabs"
+            class="sp-tabs screen-tabs"
             align-tabs="start"
           >
             <v-tab value="active" class="text-none">Service Providers</v-tab>
@@ -147,14 +140,11 @@
               4.5:1 a 12px label needs. Filled puts the colour in the
               background and lets Vuetify pick a readable foreground for it.
             -->
-            <v-chip
-              :color="statusChipColor(item.status, item.statusRaw)"
-              size="small"
-              :variant="item.source === 'invite' ? 'flat' : 'tonal'"
+            <StatusChip
               class="text-none"
-            >
-              {{ item.status }}
-            </v-chip>
+              :status="item.statusRaw || item.status"
+              :label="item.status"
+            />
             <div
               v-if="item.rejectionReason"
               class="text-caption text-medium-emphasis mt-1 sp-reject-reason"
@@ -520,7 +510,7 @@
 
   <v-dialog v-model="createInviteDialog" width="580" persistent>
     <v-card width="100%" rounded="lg" class="sp-invite-card">
-      <v-toolbar flat color="grey-lighten-4" height="76">
+      <v-toolbar flat color="transparent" class="table-card__toolbar" height="76">
         <v-row no-gutters class="fill-height px-6" align="center">
           <span class="font-weight-bold text-h5">
             Invite Service Provider
@@ -1147,24 +1137,9 @@ function statusDisplay(raw: string, source: TableRow["source"]) {
   return raw.charAt(0).toUpperCase() + raw.slice(1).toLowerCase();
 }
 
-const INVITE_STATUS_COLOURS: Record<string, string> = {
-  "awaiting-approval": "warning",
-  pending: "info",
-  complete: "success",
-  rejected: "error",
-  declined: "default",
-  cancelled: "default",
-  expired: "default",
-};
-
-function statusChipColor(statusLabel: string, statusRaw?: string) {
-  if (statusRaw) return INVITE_STATUS_COLOURS[statusRaw] ?? "primary";
-  const s = statusLabel.toLowerCase();
-  if (s === "active") return "success";
-  if (s === "pending") return "warning";
-  if (s === "in-active" || s === "inactive") return "default";
-  return "primary";
-}
+/* The status chips read their tone from the shared mapping in
+   `utils/status.ts` now - which carries every raw invitation status this map
+   carried, with the same tone. */
 
 // async function loadInviteRoles() {
 //   loadingInviteRoles.value = true;

package/components/StatusChip.vue

@@ -12,7 +12,10 @@
 <template>
   <span class="status-chip" :class="[toneClass, { 'status-chip--plain': !dot }]">
     <span v-if="dot" class="status-chip__dot" />
-    {{ label ?? status }}
+    <!-- The slot is for the chips that already carried an icon next to their
+         word - a padlock on "Closed - View Only" - so adopting the design's
+         pill does not quietly drop it. -->
+    <slot>{{ label ?? status }}</slot>
   </span>
 </template>
 
@@ -26,9 +29,20 @@ const props = defineProps({
   label: { type: String, default: undefined },
   /** The design's tag chips (pass IDs, role names) carry no leading dot. */
   dot: { type: Boolean, default: true },
+  /**
+   * For the chips that are not a status WORD at all - a countdown, a rating, a
+   * count - where the screen has already worked out the meaning and only needs
+   * the design's tone. Given, it wins over the word mapping.
+   */
+  tone: {
+    type: String as PropType<"ok" | "warn" | "err" | "info" | "neutral" | "">,
+    default: "",
+  },
 });
 
-const toneClass = computed(() => statusToneClass(props.status));
+const toneClass = computed(() =>
+  props.tone ? `tone-${props.tone}` : statusToneClass(props.status)
+);
 </script>
 
 <style scoped>