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

package/components/ServiceProviderMain.vue

@@ -1,112 +1,93 @@
 <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>
+        <!--
+          `showBillingButton` defaults to true, so this button rendered in every
+          app that mounts this screen - but only property-management has a
+          service-provider-mgmt/billing page, so everywhere else the click threw
+          on an unknown route name. Render it only where the page exists.
+        -->
+        <AppButton
+          v-if="showBillingButton && billingRouteName"
+          variant="ghost"
+          @click="useRouter().push({ name: billingRouteName })"
+        >
+          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,39 +96,89 @@
           :items-per-page="pageSize"
           fixed-header
           hide-default-footer
+          :loading="loading"
           class="sp-table"
           style="max-height: calc(100vh - 280px)"
         >
           <template #item.companyName="{ item }">
-            <span class="text-body-2 d-block text-truncate sp-col-company">{{
+            <span class="d-block text-truncate sp-col-company">{{
               item.companyName
             }}</span>
           </template>
           <template #item.email="{ item }">
-            <span class="text-body-2 d-block text-truncate sp-col-email">{{
+            <span class="d-block text-truncate sp-col-email">{{
               item.email
             }}</span>
           </template>
           <template #item.type="{ item }">
-            <span class="text-body-2 d-block text-truncate sp-col-type">{{
+            <span class="d-block text-truncate sp-col-type">{{
               item.type
             }}</span>
           </template>
           <template #item.members="{ item }">
-            <span class="text-body-2">{{ item.members }}</span>
+            <span>{{ 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"
-            >
-              {{ item.status }}
-            </v-chip>
+              :status="item.statusRaw || item.status"
+              :label="item.status"
+            />
+            <!-- Was `text-caption text-medium-emphasis` - Roboto 12px at
+                 Vuetify's 60% opacity. The design's sub-line is `--muted`. -->
+            <div v-if="item.rejectionReason" class="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')"
+                />
+                <!-- `base-color="error"` is Vuetify's own red (#B00020 light,
+                     #CF6679 dark), not the design's `--err`. -->
+                <v-list-item
+                  title="Delete invitation"
+                  class="sp-menu-danger"
+                  @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"
@@ -167,82 +198,109 @@
                 />
                 <v-list-item
                   :title="rowActionLabel(item)"
-                  :base-color="
-                    item.source === 'provider' && listTab === 'inactive'
-                      ? undefined
-                      : 'error'
-                  "
+                  :class="{
+                    'sp-menu-danger': !(
+                      item.source === 'provider' && listTab === 'inactive'
+                    ),
+                  }"
                   @click="onDeleteRow(item)"
                 />
               </v-list>
             </v-menu>
           </template>
+          <!--
+            "There are none" and "we could not fetch them" are not the same
+            sentence, and this table drew the first for both: a failed request
+            left `items` at [] and the default no-data row read "No data
+            available". That is what hid the Pending tab being unreachable in
+            six apps for months. `loadFailed` splits them.
+          -->
+          <template #no-data>
+            <DashboardEmptyState :error="loadFailed" />
+          </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 sp-no-permission">
+        You do not have permission to view service providers.
+      </div>
+    </AppCard>
+  </div>
+
+  <!--
+    THE MEMBERS DIALOG ON THE DESIGN'S MODAL.
+
+    Was a `rounded="lg"` v-card whose title was a hand-drawn 20px/700 bar and
+    whose table painted its own 64px rows in `#667085` - a literal grey that is
+    the same grey on the dark theme, where the card behind it is nearly black.
+    It is `.screen-modal` now: the design's radius, shadow and card surface, the
+    shared `v-card-title` size/weight, the body as the thing that scrolls, and
+    the shared ghost footer instead of a block text button pretending to be one.
+
+    Same members, same two columns, same loading and empty copy, same close.
+  -->
   <v-dialog v-model="viewDialog" max-width="514">
-    <v-card rounded="lg" class="sp-members-card">
-      <v-card-title class="sp-members-title">
-        Members ({{ memberDialogCount }})
-      </v-card-title>
-
-      <v-divider />
-
-      <v-table class="sp-members-table">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th class="text-right">Role</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-if="loadingMembers">
-            <td colspan="2" class="text-center text-medium-emphasis">
-              Loading...
-            </td>
-          </tr>
-          <tr v-else-if="!serviceProviderMembers.length">
-            <td colspan="2" class="text-center text-medium-emphasis">
-              No members found.
-            </td>
-          </tr>
-          <template v-else>
-            <tr v-for="member in serviceProviderMembers" :key="member._id">
-              <td>{{ member.name }}</td>
-              <td class="text-right">{{ member.role }}</td>
+    <v-card class="screen-modal">
+      <v-card-title>Members ({{ memberDialogCount }})</v-card-title>
+
+      <div class="screen-modal__body sp-members-scroll">
+        <v-table class="sp-members-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th class="text-right">Role</th>
             </tr>
-          </template>
-        </tbody>
-      </v-table>
-
-      <v-divider />
+          </thead>
+          <tbody>
+            <tr v-if="loadingMembers">
+              <td colspan="2" class="text-center sp-members-note">
+                Loading...
+              </td>
+            </tr>
+            <tr v-else-if="!serviceProviderMembers.length">
+              <td colspan="2" class="text-center sp-members-note">
+                No members found.
+              </td>
+            </tr>
+            <template v-else>
+              <tr v-for="member in serviceProviderMembers" :key="member._id">
+                <td>{{ member.name }}</td>
+                <td class="text-right">{{ member.role }}</td>
+              </tr>
+            </template>
+          </tbody>
+        </v-table>
+      </div>
 
-      <v-card-actions class="pa-0">
+      <div class="screen-modal__footer">
         <v-btn
-          block
-          variant="text"
-          height="56"
-          class="text-none font-weight-bold"
+          class="screen-btn-ghost"
+          variant="outlined"
           @click="viewDialog = false"
         >
           Close
         </v-btn>
-      </v-card-actions>
+      </div>
     </v-card>
   </v-dialog>
 
-  <v-dialog v-model="statusDialog" max-width="728" persistent>
-    <v-card rounded="lg" class="sp-status-card">
-      <v-card-title class="sp-status-title">
-        {{ statusDialogTitle }}
-      </v-card-title>
+  <!--
+    THE TWO CONFIRMATIONS ON THE DESIGN'S MODAL.
 
-      <v-card-text class="sp-status-body">
+    Both were a 728px card with an 82px `#f5f5f5` title bar in 28px/700, a
+    44px/46px body in 24px type, and two 82px-tall half-width buttons on
+    hardcoded `#ffffff` / `#00263a` - none of which is a token, so the whole
+    thing drew light-theme colours on the dark theme. They are the shared
+    confirmation shape now: `.screen-modal`, the design's title, the body at
+    `--fs-cell`, and the ghost-then-primary footer stated once in `screens.css`.
+
+    Same question, same copy, same labels, same handlers, same busy states.
+  -->
+  <v-dialog v-model="statusDialog" max-width="520" persistent>
+    <v-card class="screen-modal">
+      <v-card-title>{{ statusDialogTitle }}</v-card-title>
+
+      <v-card-text class="screen-modal__body">
         <div class="sp-status-question">
           {{ statusDialogQuestion }}
         </div>
@@ -251,47 +309,87 @@
         </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="statusUpdating"
-              @click="closeStatusDialog"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="flat"
-              height="82"
-              class="text-none sp-status-confirm"
-              :loading="statusUpdating"
-              @click="confirmStatusChange"
-            >
-              {{ statusConfirmLabel }}
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-card-actions>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="statusUpdating"
+          @click="closeStatusDialog"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="statusUpdating"
+          @click="confirmStatusChange"
+        >
+          {{ statusConfirmLabel }}
+        </v-btn>
+      </div>
     </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="520" persistent>
+    <v-card class="screen-modal">
+      <v-card-title>{{ inviteDialogTitle }}</v-card-title>
+
+      <v-card-text class="screen-modal__body">
+        <div class="sp-status-question">
+          {{ inviteDialogQuestion }}
+        </div>
+        <div class="sp-status-copy">
+          {{ inviteDialogCopy }}
+        </div>
+      </v-card-text>
+
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="inviteWorking"
+          @click="closeInviteDialog"
+        >
+          Keep it
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="inviteWorking"
+          @click="confirmInviteAction"
+        >
+          {{ inviteConfirmLabel }}
+        </v-btn>
+      </div>
+    </v-card>
+  </v-dialog>
+
+  <!--
+    ADD SERVICE PROVIDER, on the design's modal.
+
+    The heading was a bare `v-toolbar` - Vuetify paints that from its own
+    `surface`, a grey slab across the top of the card and visibly lighter than
+    the card on the dark theme - carrying a `text-h5` (24px/500 Roboto). The
+    footer was a SECOND toolbar holding a text Cancel and a `color="black"`
+    Submit: a literal black fill in both themes. Both are the shared shapes now,
+    and the four untokenised fields take `.filter-field`.
+  -->
   <v-dialog v-model="createDialog" width="500" persistent>
-    <v-card width="100%">
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h5"> Add Service Provider </span>
-        </v-row>
-      </v-toolbar>
-      <v-card-text style="max-height: 100vh; overflow-y: auto">
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Add Service Provider
+        <v-spacer />
+        <v-btn
+          variant="text"
+          icon="mdi-close"
+          class="screen-modal__close"
+          aria-label="Close"
+          @click="setServiceProvider({ mode: 'add', dialog: false })"
+        />
+      </v-card-title>
+      <v-card-text class="screen-modal__body">
         <v-form
           v-model="validServiceProvider"
           :disabled="disableServiceProvider"
@@ -305,6 +403,7 @@
                     v-model="serviceProvider.name"
                     density="comfortable"
                     :rules="[requiredRule]"
+                    class="filter-field"
                   ></v-text-field>
                 </v-col>
               </v-row>
@@ -321,6 +420,7 @@
                     :items="natureOfBusinessV3"
                     density="comfortable"
                     :rules="[requiredRule]"
+                    class="filter-field"
                   ></v-select>
                 </v-col>
               </v-row>
@@ -334,6 +434,7 @@
                     v-model="serviceProvider.email"
                     density="comfortable"
                     :rules="[emailRule, requiredRule]"
+                    class="filter-field"
                   ></v-text-field>
                 </v-col>
               </v-row>
@@ -348,6 +449,7 @@
                     density="comfortable"
                     no-resize
                     rows="2"
+                    class="filter-field"
                   ></v-textarea>
                 </v-col>
               </v-row>
@@ -370,9 +472,10 @@
             <v-col cols="12" class="my-2">
               <v-row no-gutters>
                 <v-col cols="12" class="text-center">
-                  <span
-                    class="text-none text-subtitle-2 font-weight-medium text-error"
-                  >
+                  <!-- `text-error` is Vuetify's error colour, not the design's
+                       `--err`; the two disagree, and only one of them moves
+                       with the theme. -->
+                  <span class="sp-form-error">
                     {{ messageServiceProvider }}
                   </span>
                 </v-col>
@@ -381,50 +484,52 @@
           </v-row>
         </v-form>
       </v-card-text>
-      <v-toolbar>
-        <v-row class="px-6">
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="setServiceProvider({ mode: 'add', dialog: false })"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none"
-              size="small"
-              :disabled="!validServiceProvider"
-              :loading="disableServiceProvider"
-              @click="submitServiceProviderAdd"
-            >
-              Submit
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          @click="setServiceProvider({ mode: 'add', dialog: false })"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :disabled="!validServiceProvider"
+          :loading="disableServiceProvider"
+          @click="submitServiceProviderAdd"
+        >
+          Submit
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
+  <!--
+    INVITE SERVICE PROVIDER, on the design's modal.
+
+    Was a `rounded="lg"` card with a 76px toolbar heading in `text-h5`, a body
+    padded 48/44/34 whose fields were forced to 64px tall and 20px type, and a
+    footer of two 76px square-cornered buttons on hardcoded `#ffffff` /
+    `#0b253b` at 20px/700. None of those figures is in the handoff and none of
+    those colours is a token. It is the shared modal now, with the same fields
+    and the same two actions in the same order.
+  -->
   <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-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h5">
-            Invite Service Provider
-          </span>
-        </v-row>
-      </v-toolbar>
-
-      <v-card-text class="sp-invite-body">
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Invite Service Provider
+        <v-spacer />
+        <v-btn
+          variant="text"
+          icon="mdi-close"
+          class="screen-modal__close"
+          aria-label="Close"
+          @click="setServiceProvider({ mode: 'invite', dialog: false })"
+        />
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
         <v-form
           v-model="validServiceProvider"
           :disabled="disableServiceProvider"
@@ -440,6 +545,7 @@
                     variant="outlined"
                     density="comfortable"
                     :rules="[requiredRule, emailRule]"
+                    class="filter-field"
                   ></v-text-field>
                 </v-col>
               </v-row>
@@ -465,6 +571,7 @@
                     readonly
                     variant="outlined"
                     density="comfortable"
+                    class="filter-field"
                   />
                 </v-col>
               </v-row>
@@ -488,6 +595,7 @@
                       variant="outlined"
                       density="comfortable"
                       :rules="[requiredRule]"
+                      class="filter-field"
                     ></v-select>
                   </v-col>
                 </v-row>
@@ -505,6 +613,7 @@
                       variant="outlined"
                       density="comfortable"
                       :rules="[requiredRule]"
+                      class="filter-field"
                       @update:model-value="setInviteSiteName"
                     ></v-select>
                   </v-col>
@@ -516,9 +625,10 @@
             <v-col cols="12" class="my-2">
               <v-row no-gutters>
                 <v-col cols="12" class="text-center">
-                  <span
-                    class="text-none text-subtitle-2 font-weight-medium text-error"
-                  >
+                  <!-- `text-error` is Vuetify's error colour, not the design's
+                       `--err`; the two disagree, and only one of them moves
+                       with the theme. -->
+                  <span class="sp-form-error">
                     {{ messageServiceProvider }}
                   </span>
                 </v-col>
@@ -528,35 +638,24 @@
         </v-form>
       </v-card-text>
 
-      <v-toolbar flat height="76" class="sp-invite-footer">
-        <v-row no-gutters class="fill-height">
-          <v-col cols="6" class="fill-height">
-            <v-btn
-              block
-              variant="flat"
-              class="text-none sp-invite-footer-btn"
-              height="76"
-              @click="setServiceProvider({ mode: 'invite', dialog: false })"
-            >
-              Back
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6" class="fill-height">
-            <v-btn
-              block
-              variant="flat"
-              class="text-none sp-invite-submit-btn"
-              height="76"
-              :disabled="!canSubmitInvite"
-              :loading="disableServiceProvider"
-              @click="submitServiceProviderInvite()"
-            >
-              Submit
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          @click="setServiceProvider({ mode: 'invite', dialog: false })"
+        >
+          Back
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :disabled="!canSubmitInvite"
+          :loading="disableServiceProvider"
+          @click="submitServiceProviderInvite()"
+        >
+          Submit
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
@@ -569,6 +668,7 @@ import useUser from "../composables/useUser";
 import useVerification from "../composables/useVerification";
 // import useRole from "../composables/useRole";
 import { errorConverter } from "../utils/data";
+import { pickRouteName } from "../utils/route-name";
 
 type ListTab = "active" | "pending" | "inactive";
 
@@ -582,6 +682,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 = {
@@ -642,6 +747,14 @@ const props = defineProps({
   },
 });
 
+// Only property-management contributes a service-provider-mgmt/billing page;
+// null in every other consumer, which hides the button instead of throwing.
+const billingRouteName = pickRouteName(
+  useRouter(),
+  "org-site-service-provider-mgmt-billing",
+  "service-provider-mgmt-billing"
+);
+
 const headers = [
   {
     title: "Company name",
@@ -692,6 +805,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 --");
@@ -703,6 +822,8 @@ const messageColor = ref("");
 
 const items = ref<TableRow[]>([]);
 const loading = ref(false);
+/** The last load failed, as opposed to genuinely returning nothing. */
+const loadFailed = ref(false);
 
 const validServiceProvider = ref(false);
 const disableServiceProvider = ref(false);
@@ -739,6 +860,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 +1005,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 +1139,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 +1159,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 +1237,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",
   }));
 }
@@ -1020,18 +1256,31 @@ async function loadList() {
   // }
 
   loading.value = true;
+  loadFailed.value = false;
+  // A request that never reaches the API can still resolve: a path with no
+  // proxy rule is answered by the SPA fallback with 200 text/html, and ofetch
+  // hands that back as a STRING. `.items` on a string is undefined, so
+  // `?? []` used to turn that into a clean empty table. Anything that is not
+  // an array is a failure, not a zero - say so.
+  const rowsOf = (data: any) => {
+    if (!Array.isArray(data?.items)) {
+      throw new Error("The server did not return a list. Please try again.");
+    }
+    return data.items;
+  };
   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 ?? []);
+      items.value = mapInviteRows(rowsOf(data));
       pages.value = data.pages ?? 0;
       pageRange.value = data.pageRange ?? "-- - -- of --";
       return;
@@ -1045,10 +1294,11 @@ async function loadList() {
       limit: pageSize,
       status: statusParam,
     });
-    items.value = mapProviderRows(data.items ?? []);
+    items.value = mapProviderRows(rowsOf(data));
     pages.value = data.pages ?? 0;
     pageRange.value = data.pageRange ?? "-- - -- of --";
   } catch (error: any) {
+    loadFailed.value = true;
     showMessage(errorConverter(error), "error");
     items.value = [];
     pages.value = 0;
@@ -1274,28 +1524,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;
@@ -1309,142 +1539,81 @@ async function submitServiceProviderInvite() {
   max-width: 180px;
 }
 
-.sp-table :deep(thead th) {
-  font-weight: 600;
-  font-size: 0.8125rem;
-  color: rgba(0, 0, 0, 0.7);
-}
-
+/* The header/cell type is `.table-card`'s, stated once in `screens.css`; what
+   was here was a `rgba(0,0,0,0.7)` header that never reached the glass anyway
+   (the shared rule carries `!important`) and would have been a black-on-black
+   header on the dark theme if it had. Only the alignment is kept. */
 .sp-table :deep(tbody td) {
   vertical-align: middle;
 }
 
-.sp-invite-card {
-  overflow: hidden;
+/* The design's sub-line: `--muted` at 12px, the same figure batch I's
+   `AttachmentsViewer` settled on. There is no `--fs-sub` token. */
+.sp-reject-reason,
+.sp-no-permission,
+.sp-members-note {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  color: var(--muted);
 }
 
-.sp-invite-body {
-  max-height: 100vh;
-  overflow-y: auto;
-  padding: 48px 44px 34px;
+/* A row menu is teleported out of this component's subtree by `v-menu`, so the
+   scoped attribute lands on the item and the title needs `:deep`. */
+.sp-menu-danger :deep(.v-list-item-title) {
+  color: var(--err);
 }
 
-.sp-invite-body :deep(.v-field) {
-  border-radius: 6px;
-}
-
-.sp-invite-body :deep(.v-field__input) {
-  min-height: 64px;
-  font-size: 1.25rem;
-}
-
-.sp-invite-footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.sp-invite-footer-btn {
-  border-radius: 0;
-  background: #ffffff !important;
-  color: #111827 !important;
-  font-size: 1.25rem;
-  font-weight: 700;
-}
-
-.sp-invite-submit-btn {
-  border-radius: 0;
-  background: #0b253b !important;
-  color: #ffffff !important;
-  font-size: 1.25rem;
-  font-weight: 700;
-}
-
-.sp-members-card {
-  overflow: hidden;
-}
-
-.sp-members-title {
-  min-height: 56px;
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  font-size: 1.25rem;
-  font-weight: 700;
+.sp-form-error {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--err);
 }
 
-.sp-members-table {
+/* The modal body scrolls, not the card - the shared rule; this only bounds it
+   so a long member list does not push the footer off the screen. */
+.sp-members-scroll {
   max-height: 444px;
-  overflow-y: auto;
 }
 
 .sp-members-table :deep(th) {
-  height: 64px;
-  color: #667085;
-  font-size: 1rem;
-  font-weight: 500;
+  color: var(--muted);
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  background: var(--thead);
 }
 
 .sp-members-table :deep(td) {
-  height: 64px;
-  color: #667085;
-  font-size: 1rem;
-}
-
-.sp-status-card {
-  overflow: hidden;
-}
-
-.sp-status-title {
-  min-height: 82px;
-  display: flex;
-  align-items: center;
-  padding: 0 24px;
-  background: #f5f5f5;
-  color: #101828;
-  font-size: 1.75rem;
-  font-weight: 700;
-}
-
-.sp-status-body {
-  padding: 44px 46px 42px;
+  color: var(--text);
+  font-size: var(--fs-cell);
 }
 
 .sp-status-question {
-  color: #101828;
-  font-size: 1.5rem;
-  font-weight: 700;
+  color: var(--text);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
   line-height: 1.35;
 }
 
 .sp-status-copy {
-  margin-top: 28px;
-  color: #667085;
-  font-size: 1.5rem;
-  line-height: 1.2;
-}
-
-.sp-status-cancel {
-  color: #101828;
-  background: #ffffff;
-  font-size: 1.5rem;
-  font-weight: 700;
+  margin-top: 12px;
+  color: var(--muted);
+  font-size: var(--fs-cell);
+  line-height: 1.5;
 }
 
-.sp-status-confirm {
-  color: #ffffff;
-  background: #00263a;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
 .sp-existing-title {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: #101828;
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
   margin-bottom: 16px;
 }
 
 .sp-existing-copy {
-  font-size: 1rem;
-  color: #344054;
+  font-size: var(--fs-cell);
+  color: var(--muted);
   line-height: 1.5;
   margin-bottom: 24px;
 }