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

package/components/ServiceProviderMain.vue

@@ -1,112 +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">
-          <v-toolbar
-            density="compact"
-            color="grey-lighten-4"
-            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"
@@ -115,6 +94,7 @@
           :items-per-page="pageSize"
           fixed-header
           hide-default-footer
+          :loading="loading"
           class="sp-table"
           style="max-height: calc(100vh - 280px)"
         >
@@ -137,17 +117,65 @@
             <span class="text-body-2">{{ item.members }}</span>
           </template>
           <template #item.status="{ item }">
-            <v-chip
-              :color="statusChipColor(item.status)"
-              size="small"
-              variant="tonal"
+            <!--
+              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.
+            -->
+            <StatusChip
               class="text-none"
+              :status="item.statusRaw || item.status"
+              :label="item.status"
+            />
+            <div
+              v-if="item.rejectionReason"
+              class="text-caption text-medium-emphasis mt-1 sp-reject-reason"
             >
-              {{ item.status }}
-            </v-chip>
+              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"
@@ -178,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">
@@ -284,6 +316,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>
@@ -416,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
@@ -582,6 +664,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 = {
@@ -692,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 --");
@@ -739,6 +832,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 +977,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 +1111,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,13 +1131,9 @@ function statusDisplay(raw: string, source: TableRow["source"]) {
   return raw.charAt(0).toUpperCase() + raw.slice(1).toLowerCase();
 }
 
-function statusChipColor(statusLabel: string) {
-  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;
@@ -1006,7 +1209,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 +1230,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 ?? []);
@@ -1274,28 +1483,8 @@ async function submitServiceProviderInvite() {
 </script>
 
 <style scoped>
-.sp-toolbar-top {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 4px;
-}
-
-.sp-table-header {
-  background: #f5f5f5;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.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;