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

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

@@ -32,13 +32,18 @@
         </template>
 
         <template #item.createdBy="{ item }">
-          <v-avatar
-            size="32"
-            class="mr-2"
-            :color="getAvatarColor(item.createdBy)"
-          >
-            <span class="white--text">{{ getInitials(item.createdBy) }}</span>
-          </v-avatar>
+          <!--
+            THE 3.12:1 `HS` CHIP.
+
+            This was a hand-rolled copy of `AvatarMain` with two problems: its
+            fill was Vuetify's MATERIAL `blue`/`purple`/`grey` (not a theme
+            token, so no `on-*` pair applied to it) and its `white--text` is
+            Vuetify 2 syntax that does nothing in Vuetify 3 - leaving Vuetify to
+            derive WHITE, which reads 3.12:1 on that blue in BOTH themes.
+            `AvatarMain` draws the same circle with the same initials and now
+            guarantees its label clears 4.5:1.
+          -->
+          <AvatarMain :name="item.createdBy" :size="32" class="mr-2" />
           {{ item.createdBy || "N/A" }}
         </template>
 
@@ -47,13 +52,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 +60,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>
@@ -133,24 +136,6 @@ const headers = [
 
 const { formatDate } = useUtils();
 
-function getInitials(name: string) {
-  if (!name) return "";
-  return name
-    .split(" ")
-    .map((n) => n[0])
-    .join("")
-    .toUpperCase();
-}
-function getAvatarColor(name: string) {
-  if (name === "Demo Smith") return "purple";
-  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 +155,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

@@ -1,115 +1,91 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-3">
-      <v-row no-gutters align="center" justify="space-between">
-        <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"
-            @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"
-            @click="
-              (createInviteDialog = true),
-                setServiceProvider({ mode: 'invite' })
-            "
-          >
-            Invite
-          </v-btn>
-          <v-btn
-            v-if="showBillingButton"
-            class="text-none mr-2"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="
-              useRouter().push({
-                name: 'org-site-service-provider-mgmt-billing',
-              })
-            "
-          >
-            Billing
-          </v-btn>
-        </div>
-
-        <v-text-field
-          v-model="searchText"
-          placeholder="Search"
-          variant="outlined"
-          density="comfortable"
-          clearable
-          hide-details
-          prepend-inner-icon="mdi-magnify"
-          class="ml-2"
-          style="max-width: 280px"
-        />
-      </v-row>
-    </v-col>
-
-    <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
-        <div class="sp-table-header">
-          <!-- No fixed colour: `grey-lighten-4` is a light-mode grey in both
-               themes, which is what made this strip a white slab in dark
-               mode. `transparent` lets the themed .sp-table-header show. -->
-          <v-toolbar
-            density="compact"
-            color="transparent"
-            flat
-            class="sp-toolbar-top px-2"
-          >
-            <v-btn
-              icon
-              variant="text"
-              density="comfortable"
-              @click="loadList()"
-            >
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-
-            <v-spacer />
-
-            <template v-if="canViewServiceProviders">
-              <span class="mr-2 text-caption text-medium-emphasis">{{
-                pageRange
-              }}</span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="loadList()"
-              />
-            </template>
-          </v-toolbar>
-
-          <v-tabs
-            v-model="listTab"
-            color="primary"
-            density="comfortable"
-            class="sp-tabs"
-            align-tabs="start"
+  <div>
+    <!--
+      THE DESIGN'S PAGE SCAFFOLD (same shape as Members).
+
+      The screen had no title at all, its primary actions sat top-LEFT, the
+      search box floated outside the card, and the refresh + pager sat on one
+      row with the tabs stacked on a second row below. The design draws a 22px
+      title with the actions on the right of that line, then ONE row inside the
+      card: tabs left, search / refresh / count / pager right.
+
+      Placement only. The same buttons open the same dialogs under the same
+      permission conditions, the same three tabs load the same three lists, the
+      same search feeds the same debounced `loadList()`, and the table, its
+      columns and its row menu are untouched.
+    -->
+    <PageHeader title="Service Providers">
+      <template #actions>
+        <AppButton
+          v-if="showBillingButton"
+          variant="ghost"
+          @click="
+            useRouter().push({
+              name: 'org-site-service-provider-mgmt-billing',
+            })
+          "
+        >
+          Billing
+        </AppButton>
+        <AppButton
+          v-if="showAddButton && canAddServiceProvider"
+          variant="ghost"
+          @click="(createDialog = true), setServiceProvider({ mode: 'add' })"
+        >
+          Add
+        </AppButton>
+        <AppButton
+          v-if="canInviteServiceProvider"
+          @click="
+            (createInviteDialog = true), setServiceProvider({ mode: 'invite' })
+          "
+        >
+          Invite
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <AppCard class="table-card">
+      <CardToolbar :count="canViewServiceProviders ? pageRange : ''">
+        <template #tabs>
+          <button
+            v-for="tab in listTabs"
+            :key="tab.value"
+            type="button"
+            role="tab"
+            class="app-tab"
+            :class="{ 'app-tab--active': listTab === tab.value }"
+            :aria-selected="listTab === tab.value"
+            @click="listTab = tab.value"
           >
-            <v-tab value="active" class="text-none">Service Providers</v-tab>
-            <v-tab value="pending" class="text-none">Pending</v-tab>
-            <v-tab value="inactive" class="text-none">In-Active</v-tab>
-          </v-tabs>
-        </div>
-
+            {{ tab.label }}
+          </button>
+        </template>
+
+        <template #right>
+          <AppField
+            v-model="searchText"
+            search
+            compact
+            placeholder="Search"
+            klass="app-toolbar__search"
+          />
+          <AppButton
+            variant="icon"
+            icon="mdi-refresh"
+            aria-label="Refresh"
+            @click="loadList()"
+          />
+          <local-pagination
+            v-if="canViewServiceProviders"
+            v-model="page"
+            :length="pages"
+            @update:value="loadList()"
+          />
+        </template>
+      </CardToolbar>
+
+      <div class="app-table-scroll">
         <v-data-table
           v-if="canViewServiceProviders"
           :headers="headers"
@@ -118,6 +94,7 @@
           :items-per-page="pageSize"
           fixed-header
           hide-default-footer
+          :loading="loading"
           class="sp-table"
           style="max-height: calc(100vh - 280px)"
         >
@@ -147,14 +124,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"
@@ -232,12 +206,16 @@
             </v-menu>
           </template>
         </v-data-table>
-        <v-card-text v-else class="text-body-2 text-medium-emphasis">
-          You do not have permission to view service providers.
-        </v-card-text>
-      </v-card>
-    </v-col>
-  </v-row>
+      </div>
+
+      <div
+        v-if="!canViewServiceProviders"
+        class="pa-4 text-body-2 text-medium-emphasis"
+      >
+        You do not have permission to view service providers.
+      </div>
+    </AppCard>
+  </div>
 
   <v-dialog v-model="viewDialog" max-width="514">
     <v-card rounded="lg" class="sp-members-card">
@@ -520,7 +498,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
@@ -801,6 +779,12 @@ const { requiredRule, emailRule, debounce } = useUtils();
 const { getUserByEmail } = useUser();
 
 const listTab = ref<ListTab>("active");
+/** The same three tabs, in the same order, with the same labels. */
+const listTabs: Array<{ value: ListTab; label: string }> = [
+  { value: "active", label: "Service Providers" },
+  { value: "pending", label: "Pending" },
+  { value: "inactive", label: "In-Active" },
+];
 const page = ref(1);
 const pages = ref(0);
 const pageRange = ref("-- - -- of --");
@@ -1147,24 +1131,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;
@@ -1514,32 +1483,8 @@ async function submitServiceProviderInvite() {
 </script>
 
 <style scoped>
-.sp-toolbar-top {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 4px;
-}
-
-.sp-table-header {
-  /* Was a hardcoded #f5f5f5 with a black border: in dark mode the tab strip
-     became a white slab and the tab labels and the page range disappeared
-     into it. These take the colour of whichever theme they are in. */
-  background: rgb(var(--v-theme-surface-light, var(--v-theme-surface)));
-  border-bottom: 1px solid
-    rgba(var(--v-border-color), var(--v-border-opacity));
-}
-
-.sp-tabs {
-  width: 100%;
-  min-height: 40px;
-}
-
-.sp-tabs :deep(.v-tab) {
-  min-width: 120px;
-  justify-content: flex-start;
-  text-transform: none;
-}
+/* The tab strip's own theming went with the strip: the tabs are the card's
+   first row now and take `.app-tab` from the shared primitives. */
 
 .sp-col-company {
   max-width: 220px;