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

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>

package/components/ServiceProviderMain.vue

@@ -65,9 +65,12 @@
         :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="grey-lighten-4"
+            color="transparent"
             flat
             class="sp-toolbar-top px-2"
           >
@@ -137,17 +140,68 @@
             <span class="text-body-2">{{ item.members }}</span>
           </template>
           <template #item.status="{ item }">
+            <!--
+              Invitation rows use a FILLED chip, not a tonal one. A tonal chip
+              paints the status colour as TEXT, and measured on white the
+              warning and info tokens come out at 2.4:1 and 3.1:1 — under the
+              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)"
+              :color="statusChipColor(item.status, item.statusRaw)"
               size="small"
-              variant="tonal"
+              :variant="item.source === 'invite' ? 'flat' : 'tonal'"
               class="text-none"
             >
               {{ item.status }}
             </v-chip>
+            <div
+              v-if="item.rejectionReason"
+              class="text-caption text-medium-emphasis mt-1 sp-reject-reason"
+            >
+              Seven365 said: {{ item.rejectionReason }}
+            </div>
           </template>
           <template #item.actions="{ item }">
-            <v-menu v-if="item.source === 'provider'" location="bottom end">
+            <!--
+              Invitation rows. The menu used to be drawn only for
+              `source === 'provider'`, so a pending invitation showed no
+              actions at all and the cancel already wired up behind it was
+              unreachable.
+            -->
+            <v-menu v-if="item.source === 'invite'" location="bottom end">
+              <template #activator="{ props: menuProps }">
+                <v-btn
+                  v-bind="menuProps"
+                  icon
+                  variant="text"
+                  density="comfortable"
+                  aria-label="Invitation actions"
+                >
+                  <v-icon>mdi-dots-vertical</v-icon>
+                </v-btn>
+              </template>
+              <v-list density="compact" min-width="220">
+                <v-list-item
+                  title="Cancel invitation"
+                  :disabled="!canCancelInvite(item)"
+                  :subtitle="canCancelInvite(item) ? undefined : 'Only while it is still waiting.'"
+                  @click="openInviteAction(item, 'cancel')"
+                />
+                <v-list-item
+                  title="Resend invitation"
+                  :disabled="!canResendInvite(item)"
+                  :subtitle="resendHint(item)"
+                  @click="openInviteAction(item, 'resend')"
+                />
+                <v-list-item
+                  title="Delete invitation"
+                  base-color="error"
+                  @click="openInviteAction(item, 'delete')"
+                />
+              </v-list>
+            </v-menu>
+            <v-menu v-else-if="item.source === 'provider'" location="bottom end">
               <template #activator="{ props: menuProps }">
                 <v-btn
                   v-bind="menuProps"
@@ -284,6 +338,56 @@
     </v-card>
   </v-dialog>
 
+  <!-- Cancel / Resend / Delete an invitation. Same shape as the provider
+       dialog above so the two read as one product. -->
+  <v-dialog v-model="inviteDialog" max-width="728" persistent>
+    <v-card rounded="lg" class="sp-status-card">
+      <v-card-title class="sp-status-title">
+        {{ inviteDialogTitle }}
+      </v-card-title>
+
+      <v-card-text class="sp-status-body">
+        <div class="sp-status-question">
+          {{ inviteDialogQuestion }}
+        </div>
+        <div class="sp-status-copy">
+          {{ inviteDialogCopy }}
+        </div>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="pa-0">
+        <v-row no-gutters class="fill-height">
+          <v-col cols="6">
+            <v-btn
+              block
+              variant="flat"
+              height="82"
+              class="text-none sp-status-cancel"
+              :disabled="inviteWorking"
+              @click="closeInviteDialog"
+            >
+              Keep it
+            </v-btn>
+          </v-col>
+          <v-col cols="6">
+            <v-btn
+              block
+              variant="flat"
+              height="82"
+              class="text-none sp-status-confirm"
+              :loading="inviteWorking"
+              @click="confirmInviteAction"
+            >
+              {{ inviteConfirmLabel }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
   <v-dialog v-model="createDialog" width="500" persistent>
     <v-card width="100%">
       <v-toolbar>
@@ -582,6 +686,11 @@ type TableRow = {
   members: string;
   status: string;
   source: "provider" | "invite";
+  /** the stored status, for deciding which actions a row may offer */
+  statusRaw?: string;
+  /** shown under a "Not approved" row, in Seven365's own words */
+  rejectionReason?: string;
+  siteName?: string;
 };
 
 type ServiceProviderMemberRow = {
@@ -739,6 +848,13 @@ const { getAll: getAllMembers, getAllByUserId } = useMember();
 const { getVerifications, cancelUserInvitation, getVerificationByEmail } =
   useVerification();
 
+const {
+  getInvitations,
+  cancelInvitation,
+  resendInvitation,
+  deleteInvitation,
+} = useServiceProviderInvitation();
+
 const existingAccount = ref<any>(null);
 const checkingExistingAccount = ref(false);
 // const { getRoles } = useRole();
@@ -877,6 +993,109 @@ function canViewMembers(row: TableRow) {
   return row.source === "provider";
 }
 
+// --- invitation actions (Cancel / Resend / Delete) ---------------------------
+//
+// Each one confirms first, and each one leaves an audit line on the server —
+// who did it, when, and what. Delete is a SOFT delete: the row leaves this
+// list, Seven365 keeps the record and its history.
+
+type InviteAction = "cancel" | "resend" | "delete";
+
+const inviteDialog = ref(false);
+const inviteWorking = ref(false);
+const inviteActionRow = ref<TableRow | null>(null);
+const inviteAction = ref<InviteAction>("cancel");
+
+function canCancelInvite(row: TableRow) {
+  return ["awaiting-approval", "pending"].includes(row.statusRaw ?? "");
+}
+
+function canResendInvite(row: TableRow) {
+  return (row.statusRaw ?? "") === "pending";
+}
+
+function resendHint(row: TableRow) {
+  if (canResendInvite(row)) return undefined;
+  return (row.statusRaw ?? "") === "awaiting-approval"
+    ? "You can resend once Seven365 has approved it."
+    : "Only an approved invitation can be sent again.";
+}
+
+const inviteDialogTitle = computed(() => {
+  if (inviteAction.value === "resend") return "Resend Invitation";
+  if (inviteAction.value === "delete") return "Delete Invitation";
+  return "Cancel Invitation";
+});
+
+const inviteDialogQuestion = computed(() => {
+  const row = inviteActionRow.value;
+  const who = row?.companyName && row.companyName !== "-" ? row.companyName : row?.email;
+  const site = row?.siteName ? ` for ${row.siteName}` : "";
+
+  if (inviteAction.value === "resend") {
+    return `Send this invitation again to ${row?.email}?`;
+  }
+  if (inviteAction.value === "delete") {
+    return "Delete this invitation permanently?";
+  }
+  return `Cancel this invitation to ${who}${site}?`;
+});
+
+const inviteDialogCopy = computed(() => {
+  if (inviteAction.value === "resend") {
+    return "They will get a fresh message and another 3 days to accept. This does not create a second invitation.";
+  }
+  if (inviteAction.value === "delete") {
+    return "It will disappear from this list. Seven365 keeps the record of who sent it and what happened to it.";
+  }
+  return "They will not be able to accept it. You can send a new one later.";
+});
+
+const inviteConfirmLabel = computed(() => {
+  if (inviteAction.value === "resend") return "Resend";
+  if (inviteAction.value === "delete") return "Delete";
+  return "Cancel invitation";
+});
+
+function openInviteAction(row: TableRow, action: InviteAction) {
+  if (action === "cancel" && !canCancelInvite(row)) return;
+  if (action === "resend" && !canResendInvite(row)) return;
+  inviteActionRow.value = row;
+  inviteAction.value = action;
+  inviteDialog.value = true;
+}
+
+function closeInviteDialog() {
+  if (inviteWorking.value) return;
+  inviteDialog.value = false;
+  inviteActionRow.value = null;
+}
+
+async function confirmInviteAction() {
+  const row = inviteActionRow.value;
+  if (!row) return;
+
+  inviteWorking.value = true;
+  try {
+    const run =
+      inviteAction.value === "resend"
+        ? resendInvitation
+        : inviteAction.value === "delete"
+          ? deleteInvitation
+          : cancelInvitation;
+
+    const result = await run(row._id);
+    showMessage(result?.message ?? "Done.", "success");
+    inviteDialog.value = false;
+    inviteActionRow.value = null;
+    await loadList();
+  } catch (error: any) {
+    showMessage(errorConverter(error), "error");
+  } finally {
+    inviteWorking.value = false;
+  }
+}
+
 const statusDialog = ref(false);
 const statusUpdating = ref(false);
 const statusActionRow = ref<TableRow | null>(null);
@@ -908,7 +1127,11 @@ function rowActionLabel(row: TableRow) {
 
 function typeDisplay(type: string, nature?: string) {
   if (nature && String(nature).trim()) return String(nature);
-  const list = natureOfBusinessV3.value as Array<{
+  // useLocal returns a plain array; reading `.value` off it was always
+  // undefined, so every row fell through to the raw stored slug
+  // ("security_agency") instead of "Security".
+  const source = natureOfBusinessV3 as any;
+  const list = (Array.isArray(source) ? source : source?.value) as Array<{
     title?: string;
     value?: string;
   }>;
@@ -924,7 +1147,18 @@ function statusDisplay(raw: string, source: TableRow["source"]) {
   return raw.charAt(0).toUpperCase() + raw.slice(1).toLowerCase();
 }
 
-function statusChipColor(statusLabel: string) {
+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";
@@ -1006,7 +1240,12 @@ function mapInviteRows(raw: Record<string, any>[]): TableRow[] {
       ? typeDisplay(row.metadata.app)
       : inviteTypeLabel(row.type ?? ""),
     members: "-",
-    status: "Pending",
+    // Every invitation used to read "Pending" whatever had happened to it. It
+    // now says which of the seven states it is actually in, in words.
+    status: row.statusLabel || serviceProviderInviteLabel(row.status),
+    statusRaw: String(row.status ?? ""),
+    rejectionReason: row.rejectionReason ?? "",
+    siteName: row.metadata?.siteName ?? "",
     source: "invite",
   }));
 }
@@ -1022,13 +1261,14 @@ async function loadList() {
   loading.value = true;
   try {
     if (listTab.value === "pending") {
-      const data = await getVerifications({
-        status: "pending",
-        type: "service-provider-invite,service-provider-create-org",
+      // Everything that is not a finished engagement, so a rejection or a
+      // cancellation is visible here instead of the row simply vanishing.
+      const data = await getInvitations({
+        org: props.orgId,
+        status:
+          "awaiting-approval,pending,rejected,declined,cancelled,expired",
         page: page.value,
         search: searchText.value?.trim() || "",
-        siteId: props.siteId,
-        orgId: props.orgId,
         limit: pageSize,
       });
       items.value = mapInviteRows(data.items ?? []);
@@ -1282,8 +1522,12 @@ async function submitServiceProviderInvite() {
 }
 
 .sp-table-header {
-  background: #f5f5f5;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  /* 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 {

package/components/SiteSettings.vue

@@ -163,7 +163,7 @@
             @refresh="refreshSiteData"
           />
           <v-divider class="my-4" />
-          <HidQrCodeConfiguration :site="siteId" />
+          <HidQrCodeConfiguration :site="siteId" :org="orgId" />
         </v-expansion-panel-text>
       </v-expansion-panel>
 
@@ -266,7 +266,9 @@ const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
   `site-${props.siteId}`,
   () => getSiteById(props.siteId)
 );
-const orgId = computed(() => props.orgId || String((siteData.value as any)?.orgId ?? ""));
+const orgId = computed(
+  () => props.orgId || String((siteData.value as TSite | null)?.orgId ?? "")
+);
 
 watch(
   siteData,