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

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>
 
@@ -300,51 +297,41 @@
         </HygieneUpdateMoreAction>
       </v-dialog>
 
-      <v-dialog v-model="dialogDeleteTask" max-width="450">
-        <v-card>
-          <v-toolbar>
-            <v-row no-gutters class="fill-height px-6" align="center">
-              <span class="font-weight-bold text-h6 text-capitalize">
-                Delete {{ selectedTask?.title || "Schedule Task" }}
-              </span>
-            </v-row>
-          </v-toolbar>
-          <v-card-text>
-            <span class="text-subtitle-2"
-              >Are you sure you want to delete this schedule task?</span
-            >
+      <!--
+        Was a `v-toolbar` title bar (Vuetify paints that from its own `surface`,
+        a grey slab visibly lighter than the card on dark) over a second toolbar
+        carrying two block buttons, the confirm one on `color="black"` - not a
+        token, so it drew a light-theme fill on the dark theme. It is the shared
+        confirmation shape now, the same one every converted screen uses.
+      -->
+      <v-dialog v-model="dialogDeleteTask" max-width="520">
+        <v-card class="screen-modal">
+          <v-card-title class="text-capitalize">
+            Delete {{ selectedTask?.title || "Schedule Task" }}
+          </v-card-title>
+
+          <v-card-text class="screen-modal__body">
+            Are you sure you want to delete this schedule task?
           </v-card-text>
 
-          <v-toolbar class="pa-0" density="compact">
-            <v-row no-gutters>
-              <v-col cols="6" class="pa-0">
-                <v-btn
-                  block
-                  variant="text"
-                  class="text-none"
-                  size="large"
-                  @click="dialogDeleteTask = false"
-                  height="48"
-                >
-                  Cancel
-                </v-btn>
-              </v-col>
-
-              <v-col cols="6" class="pa-0">
-                <v-btn
-                  block
-                  variant="flat"
-                  color="black"
-                  class="text-none font-weight-bold"
-                  height="48"
-                  :loading="submitting"
-                  @click="_deleteScheduleTask"
-                >
-                  Delete
-                </v-btn>
-              </v-col>
-            </v-row>
-          </v-toolbar>
+          <div class="screen-modal__footer">
+            <v-btn
+              class="screen-btn-ghost"
+              variant="outlined"
+              :disabled="submitting"
+              @click="dialogDeleteTask = false"
+            >
+              Cancel
+            </v-btn>
+            <v-btn
+              class="screen-btn-primary"
+              variant="flat"
+              :loading="submitting"
+              @click="_deleteScheduleTask"
+            >
+              Delete
+            </v-btn>
+          </div>
         </v-card>
       </v-dialog>
 

package/components/SearchVehicleNumberUser.vue

@@ -1,44 +1,35 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters>
-        <v-col cols="12" class="text-h6 font-weight-bold px-3">Vehicle Number ({{ vehicleNumber }})</v-col>
-      </v-row>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal search-vehicle-user">
+    <v-card-title>Vehicle Number ({{ vehicleNumber }})</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto">
-      <v-data-table :items="prop.vehicleNumberUsersList" hide-default-footer :headers="headers" density="comfortable" 
-        item-key="_id ">
-        <template #item.name="{ item }">
-          <span class="d-flex align-center ga-2">
-            <span>
-              <AvatarMain :name="item?.name" :size="20" :id="item?._id" />
+    <div class="screen-modal__body search-vehicle-user__body">
+      <!-- `table-card` is the shared table card's own class, so the header
+           type, the cell padding and the row rule are the design's - without
+           TableMain's page toolbar, which a two-row picker inside a dialog
+           has nothing to put in. -->
+      <AppCard class="table-card">
+        <v-data-table :items="prop.vehicleNumberUsersList" hide-default-footer :headers="headers" density="comfortable"
+          item-key="_id ">
+          <template #item.name="{ item }">
+            <span class="d-flex align-center ga-2">
+              <span>
+                <AvatarMain :name="item?.name" :size="20" :id="item?._id" />
+              </span>
+              <span class="text-capitalize">{{ item?.name }}</span>
             </span>
-            <span class="text-capitalize">{{ item?.name }}</span>
-          </span>
-        </template>
+          </template>
 
-        <template #item.actions="{ item }">
-          <v-btn text="Select" rounded="md" flat color="blue" density="comfortable" :ripple="false" @click="handleSelectUser(item)" />
-        </template>
-      </v-data-table>
-    </v-card-text>
+          <template #item.actions="{ item }">
+            <AppButton variant="ghost" @click="handleSelectUser(item)">Select</AppButton>
+          </template>
+        </v-data-table>
+      </AppCard>
+    </div>
 
-    <v-toolbar class="pa-0" density="compact">
-      <v-row no-gutters>
-        <v-col cols="6" class="pa-0">
-          <v-btn block variant="text" class="text-none" size="large" @click="emit('close')" height="48">
-            Close
-          </v-btn>
-        </v-col>
-
-        <v-col cols="6" class="pa-0">
-          <v-btn block variant="flat" color="black" class="text-none" height="48" tile @click="emit('close')">
-            Add Different User
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    <div class="search-vehicle-user__footer">
+      <AppButton variant="ghost" @click="emit('close')">Close</AppButton>
+      <AppButton @click="emit('close')">Add Different User</AppButton>
+    </div>
     <v-dialog v-model="confirmAction" persistent max-width="450">
       <DialogReplaceAutofillPrompt  @close="confirmAction = false" @proceed="handleUpdateUserDetails"/>
     </v-dialog>
@@ -89,4 +80,15 @@ onMounted(() => {
 })
 </script>
 
-<style scoped></style>
+<style scoped>
+.search-vehicle-user__body {
+  padding: 4px 20px 0;
+}
+
+.search-vehicle-user__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>

package/components/ServiceProviderFormCreate.vue

@@ -1,21 +1,29 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5">
-          {{ props.title }}
-        </span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto">
+  <!--
+    A dialog card, so it wears `.screen-modal` (16px corner, the modal shadow,
+    the `--card` surface) rather than Vuetify's 4px factory card. The two
+    `v-toolbar`s this used to have were grey slabs standing in for a title row
+    and a footer; a `v-card-title` and a `v-card-actions` are those two rows
+    without the slab, and they follow the theme instead of staying grey in dark.
+  -->
+  <v-card width="100%" class="screen-modal">
+    <v-card-title>{{ props.title }}</v-card-title>
+
+    <v-card-text class="screen-modal__body">
       <v-form v-model="validForm" :disabled="disable">
         <v-row no-gutters>
           <v-col cols="12" class="mt-2">
             <v-row no-gutters>
               <InputLabel class="text-capitalize" title="Email" required />
               <v-col cols="12">
+                <!-- Still a `v-text-field`, not an `AppField`: the Submit
+                     button is gated on `validForm`, which only exists because
+                     these `:rules` run. `.filter-field` is the established way
+                     to give a Vuetify input the design's 40px/10px/13.5px shape
+                     without taking its validation away. -->
                 <v-text-field
                   v-model="email"
+                  class="filter-field"
                   density="comfortable"
                   :rules="[requiredRule, emailRule]"
                 ></v-text-field>
@@ -38,27 +46,28 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar>
-      <v-row class="px-6">
-        <v-col cols="6">
+    <!-- The two-across, full-width footer is kept: the handoff draws no modal,
+         so its layout is not specified and changing it would be invention.
+         What changes is the chrome - `color="black"` was a hardcoded fill that
+         ignored the theme, and the bare text Cancel had no shape at all. -->
+    <v-card-actions class="screen-modal__footer">
+      <v-row class="px-4" no-gutters>
+        <v-col cols="6" class="pr-2">
           <v-btn
             block
-            variant="text"
-            class="text-none"
-            size="large"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="cancel"
           >
             Cancel
           </v-btn>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="6" class="pl-2">
           <v-btn
             block
             variant="flat"
-            color="black"
-            class="text-none"
-            size="large"
+            class="text-none screen-btn-primary"
             :disabled="!validForm"
             @click="submit"
           >
@@ -66,7 +75,7 @@
           </v-btn>
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </template>
 

package/components/ServiceProviderInvitationPrompt.vue

@@ -0,0 +1,155 @@
+<template>
+  <!-- `AppCard` is the design's card - 14px radius, a 1px `--border` rule and
+       the one-pixel shadow on `--card`. The `v-card rounded="lg"
+       variant="outlined"` it replaced was Vuetify's own card at its own
+       radius and border weight. -->
+  <AppCard v-if="invitation" class="sp-invite-prompt">
+    <div class="d-flex align-start ga-3 pa-4">
+      <v-avatar color="primary" variant="tonal" size="44">
+        <v-icon>mdi-office-building-marker-outline</v-icon>
+      </v-avatar>
+      <div class="flex-grow-1">
+        <div class="screen-card-title">
+          {{ invitation.orgName }} has invited you to {{ invitation.siteName }}
+        </div>
+        <div class="screen-hint sp-invite-prompt__sub">
+          Approved by Seven365 · {{ expiryLine }}
+        </div>
+      </div>
+    </div>
+
+    <div class="px-4 sp-invite-prompt__body">
+      {{ invitation.orgName }} would like your company to provide services at
+      <strong>{{ invitation.siteName }}</strong
+      >. If you accept, this site will be added to your list of sites.
+    </div>
+
+    <div class="d-flex align-center ga-2 px-4 py-4">
+      <!-- Both stay `v-btn`s: `loading` is the only signal that an accept or a
+           decline is in flight, and `AppButton` has no equivalent. They take
+           the design's two button classes instead. -->
+      <v-btn
+        variant="flat"
+        class="screen-btn-primary"
+        :loading="working === 'accept'"
+        :disabled="Boolean(working) || !open"
+        @click="accept"
+      >
+        Accept
+      </v-btn>
+      <v-btn
+        variant="outlined"
+        class="screen-btn-ghost"
+        :loading="working === 'decline'"
+        :disabled="Boolean(working) || !open"
+        @click="decline"
+      >
+        Decline
+      </v-btn>
+      <v-spacer />
+      <!-- Was a raw `v-chip` on Vuetify's fixed `success` green, or no colour
+           at all for every other outcome. `StatusChip` maps the status WORD
+           through the shared `utils/status.ts` tones, so "complete" and
+           "declined" come out the same colours they do everywhere else. -->
+      <StatusChip
+        v-if="!open"
+        :status="invitation.status"
+        :label="invitation.statusLabel"
+      />
+    </div>
+  </AppCard>
+
+  <AppCard v-else-if="error">
+    <div class="pa-4 sp-invite-prompt__body">{{ error }}</div>
+  </AppCard>
+</template>
+
+<script setup lang="ts">
+/**
+ * The invitation as the service provider sees it — inside the app they already
+ * use, from the session they already have.
+ *
+ * There is deliberately no sign-up and no one-time code anywhere on this
+ * screen: a company that already exists on iService365 never creates a second
+ * account. The email they receive only carries them here.
+ *
+ * An invitation that has not been approved by Seven365 is not readable at all —
+ * the server answers "not found" — so this component cannot show one.
+ */
+const props = defineProps({
+  invitationId: { type: String, required: true },
+});
+
+const emit = defineEmits<{ (e: "answered", status: string): void }>();
+
+const { getInvitation, declineInvitation } = useServiceProviderInvitation();
+const { addViaInvite } = useCustomerSite();
+
+const invitation = ref<any>(null);
+const error = ref("");
+const working = ref("");
+
+const open = computed(() => invitation.value?.status === "pending");
+
+const expiryLine = computed(() => {
+  const expires = invitation.value?.expireAt;
+  if (!expires) return "";
+  const days = Math.max(
+    0,
+    Math.ceil((new Date(expires).getTime() - Date.now()) / 86400000),
+  );
+  if (!open.value) return "no longer waiting for an answer";
+  return days <= 1 ? "expires within a day" : `expires in ${days} days`;
+});
+
+async function load() {
+  try {
+    invitation.value = await getInvitation(props.invitationId);
+  } catch (err: any) {
+    error.value =
+      err?.data?.message || "This invitation is no longer available.";
+  }
+}
+
+async function accept() {
+  working.value = "accept";
+  try {
+    await addViaInvite(props.invitationId);
+    await load();
+    emit("answered", "complete");
+  } catch (err: any) {
+    error.value = err?.data?.message || "Could not accept this invitation.";
+  } finally {
+    working.value = "";
+  }
+}
+
+async function decline() {
+  working.value = "decline";
+  try {
+    await declineInvitation(props.invitationId);
+    await load();
+    emit("answered", "declined");
+  } catch (err: any) {
+    error.value = err?.data?.message || "Could not decline this invitation.";
+  } finally {
+    working.value = "";
+  }
+}
+
+await load();
+</script>
+
+<style scoped>
+/* The title was a hand-set 1.05rem/600; `.screen-card-title` is the design's
+   15.5px/800, so only the wrap and the leading are left here. */
+.sp-invite-prompt :deep(.screen-card-title) {
+  display: block;
+  line-height: 1.35;
+}
+
+.sp-invite-prompt__sub,
+.sp-invite-prompt__body {
+  font-size: var(--fs-cell);
+}
+</style>