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

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

@@ -0,0 +1,150 @@
+<template>
+  <v-card
+    v-if="invitation"
+    width="100%"
+    rounded="lg"
+    variant="outlined"
+    border="thin"
+    class="sp-invite-prompt"
+  >
+    <v-card-item>
+      <template #prepend>
+        <v-avatar color="primary" variant="tonal" size="44">
+          <v-icon>mdi-office-building-marker-outline</v-icon>
+        </v-avatar>
+      </template>
+      <v-card-title class="text-wrap sp-invite-prompt-title">
+        {{ invitation.orgName }} has invited you to {{ invitation.siteName }}
+      </v-card-title>
+      <v-card-subtitle class="text-wrap">
+        Approved by Seven365 · {{ expiryLine }}
+      </v-card-subtitle>
+    </v-card-item>
+
+    <v-card-text class="text-body-2">
+      {{ 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.
+    </v-card-text>
+
+    <v-card-actions class="px-4 pb-4">
+      <v-btn
+        variant="flat"
+        color="primary"
+        class="text-none"
+        :loading="working === 'accept'"
+        :disabled="Boolean(working) || !open"
+        @click="accept"
+      >
+        Accept
+      </v-btn>
+      <v-btn
+        variant="outlined"
+        class="text-none ml-2"
+        :loading="working === 'decline'"
+        :disabled="Boolean(working) || !open"
+        @click="decline"
+      >
+        Decline
+      </v-btn>
+      <v-spacer />
+      <v-chip
+        v-if="!open"
+        size="small"
+        variant="tonal"
+        class="text-none"
+        :color="invitation.status === 'complete' ? 'success' : undefined"
+      >
+        {{ invitation.statusLabel }}
+      </v-chip>
+    </v-card-actions>
+  </v-card>
+
+  <v-card v-else-if="error" width="100%" rounded="lg" variant="outlined" border="thin">
+    <v-card-text class="text-body-2">{{ error }}</v-card-text>
+  </v-card>
+</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>
+.sp-invite-prompt-title {
+  font-size: 1.05rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+</style>