@7365admin1/layer-common 4.65.2 → 4.66.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @iservice365/layer-common
 
+## 4.66.0
+
+### Minor Changes
+
+- c8c7091: Members > Service Providers: new `MemberServiceProviders` component listing every person from the site's service providers who can open its information - company chips with head counts, service and company filters, search, role at the site, date added, status, "Invited by" for subcontractors, Export to Excel and an "Email company" action. `MemberMain` takes `extraTabs` so an app can add the tab beside Active / Inactive.
+- 4a3ea41: Service Providers screen: a subcontractor another provider brought onto the site reads "Invited by <provider>" (list and details), the invite form says Seven365 approves every invitation and calls the field "Service", and the bell opens SP Approvals for a waiting invitation and the hygiene Service Providers page for an answered one.
+
+## 4.65.3
+
+### Patch Changes
+
+- dcb2632: Invitations list: a site app now lists only the current site's invitations.
+  `InvitationMain` sends the page's `siteId` to `GET /api/verifications` (it was
+  commented out, so every site showed the whole organisation's invitations - owner
+  report 2026-09-28, Wing Tai / The LakeGarden Residences). The org console sends
+  no site and is unchanged. The empty table now reads "No pending invitations for
+  <site>. Use Invite member to add someone." / "No expired invitations."
+
+  Members → Assign Role: a member's role from ANOTHER site (roleState other-site,
+  other-org, deleted, missing) is no longer pre-filled or offered ("Role already
+  assigned"); only this site's roles are listed. A site with no role says "No roles
+  created for <site> yet. Create one in Roles & Permissions." with a link that
+  returns to Members after the role is created (`?returnTo=`).
+
+- 9e895e2: Visitor Management search box: waits 350 ms after typing and searches from 2 characters (trimmed), so a burst of typing, a paste or a scanner no longer leaves the table showing the first letter's results; a late reply for an older search is never shown; a new search goes back to page 1; clearing the box resets at once; the address-bar sync no longer puts back an older value over letters typed since; the empty table says "No visitors match '<search>'"; Download Report uses the same search as the table.
+
 ## 4.65.2
 
 ### Patch Changes
@@ -1773,11 +1799,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                              GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                              GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                  GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                  GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                              owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                              staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                  owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                  staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/InvitationMain.vue

@@ -50,6 +50,7 @@
           hide-default-footer
           style="max-height: calc(100vh - (126px))"
           :loading="loading"
+          :no-data-text="emptyText"
         >
           <template #item.permissions="{ value }">
             <span class="text-caption font-weight-bold text-capitalize">
@@ -137,6 +138,9 @@
 </template>
 
 <script setup lang="ts">
+// Relative import: this layer's `utils/` is not auto-imported into consumers.
+import { invitationsEmptyText } from "../utils/invitations-empty-text";
+
 /** The same two tabs, same labels, same routes. */
 const invitationTabs = [
   { status: "pending", label: "Pending" },
@@ -260,7 +264,10 @@ const {
       type: "member-invite",
       app: props.app,
       orgId: props.org,
-      // siteId: props.siteId,
+      // A site app lists only THIS site's invitations; the server checks the
+      // caller reaches it (owner report 2026-09-28: LakeGarden's invitations
+      // showed on every Wing Tai site). The org console passes no site.
+      siteId: props.siteId,
     }),
   {
     watch: [() => props.status]
@@ -269,6 +276,22 @@ const {
 
 const loading = computed(() => getVerificationsStatus.value === "pending");
 
+// A plain empty state instead of "No data available" (QA sweep 2026-09-28).
+const siteName = ref("");
+if (props.siteId) {
+  useSite()
+    .getSiteById(props.siteId)
+    .then((site) => (siteName.value = site?.name ?? ""))
+    .catch(() => {});
+}
+const emptyText = computed(() =>
+  invitationsEmptyText({
+    status: props.status,
+    siteName: props.siteId ? siteName.value || "this site" : "",
+    canInvite: props.inviteMember,
+  }),
+);
+
 watchEffect(() => {
   if (getVerificationsReq.value) {
     items.value = getVerificationsReq.value.items;

package/components/MemberMain.vue

@@ -250,7 +250,11 @@
               <v-col cols="12">
                 <v-row no-gutters>
                   <InputLabel class="text-capitalize" title="Name" required />
-                  <v-col cols="12">
+                  <v-col v-if="noSiteRoles" cols="12" class="py-2" data-test="assign-role-empty">
+                    <p class="text-body-2 mb-2">{{ noSiteRolesText }}</p>
+                    <NuxtLink v-if="rolesPageLink" :to="rolesPageLink">Go to Roles &amp; Permissions</NuxtLink>
+                  </v-col>
+                  <v-col v-else cols="12">
                     <v-select
                       v-model="selectedRole"
                       :items="pickerRoles"
@@ -287,7 +291,7 @@
             <v-btn
               class="screen-btn-primary"
               variant="flat"
-              :disabled="!memberRoleForm"
+              :disabled="!memberRoleForm || noSiteRoles"
               type="submit"
             >
               Submit
@@ -300,7 +304,14 @@
 </template>
 
 <script setup lang="ts">
-import { memberRoleChip, otherSiteBannerText, withCurrentRole } from "../utils/role";
+import {
+  memberRoleChip,
+  noRolesForSiteText,
+  otherSiteBannerText,
+  roleUsableHere,
+  safeReturnTo,
+  withCurrentRole,
+} from "../utils/role";
 
 const props = defineProps({
   /** The design's page title. Every app that mounts this screen calls it
@@ -391,6 +402,15 @@ const props = defineProps({
       },
     ],
   },
+  /**
+   * Tabs after Active / Inactive that the app renders itself on the same
+   * route (e.g. property management's "Service Providers"). Clicking one
+   * sets the route's `status` like the built-in tabs do.
+   */
+  extraTabs: {
+    type: Array as PropType<Array<{ name: string; status: string }>>,
+    default: () => [],
+  },
 });
 
 const items = ref<Array<Record<string, any>>>([]);
@@ -431,6 +451,7 @@ const normalizedRouteParams = computed(() => {
 const tabOptions = [
   { name: "Active", status: "active" },
   { name: "Inactive", status: "suspended" },
+  ...props.extraTabs,
 ];
 
 function toRoute(status: any) {
@@ -547,9 +568,14 @@ function setMember({
   }
 
   selectedMemberId.value = role._id;
-  selectedRole.value = role.role;
-  selectedMemberRole.value = role.role;
-  selectedMemberRoleName.value = role.roleName ?? "";
+  // A role the member cannot use HERE (another site's, another organisation's,
+  // deleted, none) is neither pre-filled nor offered (owner report 2026-09-28,
+  // One Pearl Bank: The Loft's "Security" appeared as if created for this site).
+  const usable = roleUsableHere(role);
+  selectedRole.value = usable ? role.role : null;
+  selectedMemberRole.value = usable ? role.role : "";
+  selectedMemberRoleName.value = usable ? role.roleName ?? "" : "";
+  if (dialog) refreshRoles();
 }
 
 const roles = ref<Array<Record<string, any>>>([]);
@@ -593,7 +619,7 @@ const pickerRoles = computed(() =>
  * filter would be decorative -- the same trap the server's own Redis key had.
  */
 const { getRoles } = useRole();
-const { data: getAllRoleReq } = useLazyAsyncData(
+const { data: getAllRoleReq, refresh: refreshRoles } = useLazyAsyncData(
   `get-roles-${props.type}-${props.orgId}-${props.siteId}`,
   () =>
     getRoles({
@@ -610,6 +636,33 @@ watchEffect(() => {
   }
 });
 
+/* No role exists for this site yet: say so and point at Roles & Permissions,
+   which sends the user back here after creating one (`returnTo`). */
+const noSiteRoles = computed(
+  () => !!props.siteId && !!getAllRoleReq.value && pickerRoles.value.length === 0
+);
+const assignSiteName = ref("");
+if (props.siteId) {
+  useSite()
+    .getSiteById(props.siteId)
+    .then((site) => (assignSiteName.value = site?.name ?? ""))
+    .catch(() => {});
+}
+const noSiteRolesText = computed(() => noRolesForSiteText(assignSiteName.value));
+const memberRoute = useRoute();
+const rolesPageLink = computed(() => {
+  const here = memberRoute.path;
+  const path = here.replace(/\/members(\/.*)?$/, "/roles-permissions");
+  if (path === here) return "";
+  try {
+    return useRouter().resolve(path).matched.length
+      ? `${path}?returnTo=${encodeURIComponent(here)}`
+      : "";
+  } catch {
+    return "";
+  }
+});
+
 watchEffect(() => {
   if (selectedRole.value) {
     message.value = "";

package/components/MemberServiceProviders.vue

@@ -0,0 +1,327 @@
+<template>
+  <div>
+    <!--
+      Members > Service Providers (owner request 2026-09-28). The property
+      manager sees who from its service providers can open this site's
+      information. Read only: each provider manages its own people.
+    -->
+    <PageHeader
+      :title="props.title"
+      subtitle="People from your service providers who can open this site's information. Their company manages who is on this list."
+    >
+      <template #actions>
+        <AppButton
+          variant="ghost"
+          :loading="exporting"
+          :disabled="!visible.length"
+          data-test="sp-members-export"
+          @click="exportExcel"
+        >
+          Export to Excel
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <!-- One chip per provider company; a click filters to that company. -->
+    <div v-if="companies.length" class="sp-chips mb-3" data-test="sp-members-companies">
+      <button
+        v-for="c in companies"
+        :key="c.orgId"
+        type="button"
+        class="sp-chip"
+        :class="{ 'sp-chip--active': company === c.orgId }"
+        :aria-pressed="company === c.orgId"
+        @click="company = company === c.orgId ? '' : c.orgId"
+      >
+        <span class="sp-chip__name">{{ companyChipText(c.name, c.people) }}</span>
+        <span class="sp-chip__type">{{ c.typeLabel }}<template v-if="c.invitedVia"> · via {{ c.invitedVia }}</template></span>
+      </button>
+    </div>
+
+    <AppCard class="table-card">
+      <CardToolbar :count="countText">
+        <template #tabs>
+          <button
+            v-for="tab in props.tabs"
+            :key="tab.status"
+            type="button"
+            role="tab"
+            class="app-tab"
+            :class="{ 'app-tab--active': tab.status === props.status }"
+            :aria-selected="tab.status === props.status"
+            @click="toTab(tab.status)"
+          >
+            {{ tab.name }}
+          </button>
+        </template>
+
+        <template #right>
+          <AppField
+            v-model="search"
+            search
+            compact
+            placeholder="Search name, email, company"
+            klass="app-toolbar__search"
+          />
+          <v-select
+            v-model="type"
+            :items="typeItems"
+            item-title="title"
+            item-value="value"
+            density="compact"
+            variant="outlined"
+            hide-details
+            class="sp-type-filter"
+            aria-label="Service"
+            data-test="sp-members-type"
+          />
+          <AppButton
+            variant="icon"
+            icon="mdi-refresh"
+            aria-label="Refresh"
+            @click="load()"
+          />
+        </template>
+      </CardToolbar>
+
+      <div class="app-table-scroll">
+        <v-data-table
+          :headers="headers"
+          :items="visible"
+          item-value="_id"
+          :items-per-page="50"
+          fixed-header
+          :loading="loading"
+          style="max-height: calc(100vh - 320px)"
+        >
+          <template #item.name="{ item }">
+            <div class="font-weight-medium">{{ item.name || "-" }}</div>
+            <div class="sp-sub">{{ item.email }}</div>
+          </template>
+          <template #item.company="{ item }">
+            <div>{{ item.company || "-" }}</div>
+            <div v-if="item.invitedVia" class="sp-sub">Invited by {{ item.invitedVia }}</div>
+          </template>
+          <template #item.typeLabel="{ item }">
+            <StatusChip :dot="false" pill tone="info" :label="item.typeLabel" />
+          </template>
+          <template #item.role="{ item }">
+            {{ item.role || "No role" }}
+          </template>
+          <template #item.addedAt="{ item }">
+            {{ spDay(item.addedAt) || "-" }}
+          </template>
+          <template #item.status="{ item }">
+            <StatusChip
+              :tone="item.status === 'active' ? 'ok' : 'neutral'"
+              :label="item.status === 'active' ? 'Active' : 'Inactive'"
+            />
+          </template>
+          <template #item.actions="{ item }">
+            <v-btn
+              v-if="mailFor(item)"
+              variant="text"
+              size="small"
+              class="text-none"
+              :href="mailFor(item)"
+              data-test="sp-members-email"
+            >
+              Email company
+            </v-btn>
+          </template>
+          <template #no-data>
+            <div class="pa-8 text-center text-body-2 text-medium-emphasis" data-test="sp-members-empty">
+              {{ emptyText }}
+            </div>
+          </template>
+        </v-data-table>
+      </div>
+    </AppCard>
+
+    <Snackbar v-model="snackbar" :text="message" color="error" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  TSiteProviderCompany,
+  TSiteProviderMember,
+} from "../composables/useServiceProvider";
+import {
+  companyChipText,
+  concernMailto,
+  filterProviderMembers,
+  providerMembersEmptyText,
+  serviceTypeOptions,
+} from "../utils/site-provider-members";
+import { spDay } from "../utils/sp-inviter-row";
+import { saveBlob } from "../composables/useInventory";
+
+const props = defineProps({
+  title: { type: String, default: "Members" },
+  siteId: { type: String, default: "" },
+  siteName: { type: String, default: "" },
+  /** the page's current tab (route `status`) */
+  status: { type: String, default: "service-providers" },
+  /** the Members tabs, in order; clicking one changes the route's `status` */
+  tabs: {
+    type: Array as PropType<Array<{ name: string; status: string }>>,
+    default: () => [
+      { name: "Active", status: "active" },
+      { name: "Inactive", status: "suspended" },
+      { name: "Service Providers", status: "service-providers" },
+    ],
+  },
+});
+
+const { getSiteMembers, exportSiteMembers } = useServiceProvider();
+const { getSiteById } = useSite();
+// The site in words, for the export file name and the email subject.
+const siteLabel = ref(props.siteName);
+
+const items = ref<TSiteProviderMember[]>([]);
+const companies = ref<TSiteProviderCompany[]>([]);
+const loading = ref(false);
+const exporting = ref(false);
+const search = ref("");
+const type = ref("");
+const company = ref("");
+const snackbar = ref(false);
+const message = ref("");
+
+const headers = [
+  { title: "Name", key: "name", sortable: true, minWidth: "180px" },
+  { title: "Company", key: "company", sortable: true, minWidth: "160px" },
+  { title: "Service", key: "typeLabel", sortable: true },
+  { title: "Role at this site", key: "role", sortable: true },
+  { title: "Added", key: "addedAt", sortable: true },
+  { title: "Status", key: "status", sortable: true },
+  { title: "", key: "actions", sortable: false, align: "end" as const },
+];
+
+const typeItems = computed(() => [
+  { title: "All services", value: "" },
+  ...serviceTypeOptions(items.value),
+]);
+
+const filters = computed(() => ({
+  type: type.value,
+  company: company.value,
+  search: search.value,
+}));
+
+const visible = computed(() => filterProviderMembers(items.value, filters.value));
+
+const countText = computed(() =>
+  loading.value && !items.value.length
+    ? ""
+    : `${visible.value.length} of ${items.value.length}`,
+);
+
+const emptyText = computed(() =>
+  providerMembersEmptyText({
+    companies: companies.value.length,
+    total: items.value.length,
+    filtered: Boolean(type.value || company.value || search.value.trim()),
+  }),
+);
+
+function mailFor(item: TSiteProviderMember) {
+  const c = companies.value.find((x) => x.orgId === item.companyId);
+  return concernMailto({
+    companyEmail: c?.email,
+    person: item.name || item.email,
+    siteName: siteLabel.value,
+  });
+}
+
+async function load() {
+  if (!props.siteId) return;
+  loading.value = true;
+  try {
+    const data = await getSiteMembers(props.siteId);
+    items.value = Array.isArray(data?.items) ? data.items : [];
+    companies.value = Array.isArray(data?.companies) ? data.companies : [];
+  } catch (error: any) {
+    items.value = [];
+    companies.value = [];
+    message.value = error?.data?.message || "Could not load your service providers' people.";
+    snackbar.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function exportExcel() {
+  exporting.value = true;
+  try {
+    const blob = await exportSiteMembers(props.siteId, filters.value);
+    saveBlob(blob, `${siteLabel.value || "Site"} - service provider people.xlsx`);
+  } catch {
+    message.value = "Could not export the list.";
+    snackbar.value = true;
+  } finally {
+    exporting.value = false;
+  }
+}
+
+const route = useRoute();
+function toTab(status: string) {
+  if (status === props.status) return;
+  navigateTo({
+    name: route.name as string,
+    params: { ...(route.params as Record<string, string>), status },
+  });
+}
+
+watch(() => props.siteId, load);
+onMounted(async () => {
+  load();
+  if (!siteLabel.value && props.siteId) {
+    const site: any = await getSiteById(props.siteId).catch(() => null);
+    siteLabel.value = site?.name ?? "";
+  }
+});
+</script>
+
+<style scoped>
+.sp-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.sp-chip {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.sp-chip--active {
+  border-color: var(--accent-strong);
+  box-shadow: inset 0 0 0 1px var(--accent-strong);
+}
+
+.sp-chip__name {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.sp-chip__type,
+.sp-sub {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.sp-type-filter {
+  min-width: 170px;
+  max-width: 220px;
+}
+</style>

package/components/RolePermissionMain.vue

@@ -204,7 +204,7 @@
 
 <script setup lang="ts">
 // Relative import: this layer's `utils/` is not auto-imported into consumers.
-import { showSiteField } from "../utils/role";
+import { safeReturnTo, showSiteField } from "../utils/role";
 import { holdsPermission } from "../utils/permission-spellings";
 import {
   catalogueForOrg,
@@ -509,6 +509,10 @@ const siteFieldShown = computed(() =>
 function success() {
   createDialog.value = false;
   getRoles();
+  // Came here from Members -> Assign Role with no role for the site: go back to
+  // finish assigning (same-app path only).
+  const back = safeReturnTo(useRoute().query.returnTo);
+  if (back) navigateTo(back);
 }
 
 const previewDialog = ref(false);

package/components/ServiceProviderMain.vue

@@ -106,6 +106,10 @@
               :class="{ 'sp-muted': item.companyKnown === false }"
             >{{ item.companyName }}</span>
             <div v-if="item.contactPhone" class="sp-sub">{{ item.contactPhone }}</div>
+            <!-- A subcontractor another provider brought onto this site. -->
+            <div v-if="item.invitedVia" class="sp-sub" data-test="sp-invited-via">
+              Invited by {{ item.invitedVia }}
+            </div>
           </template>
           <template #item.invited="{ item }">
             <span class="d-block text-truncate">{{ item.invitedLine || "-" }}</span>
@@ -631,7 +635,7 @@
             <template v-if="!existingAccount">
               <v-col cols="12">
                 <v-row no-gutters>
-                  <InputLabel class="text-capitalize" title="App" required />
+                  <InputLabel class="text-capitalize" title="Service" required />
                   <v-col cols="12">
                     <v-select
                       v-model="serviceProviderInvite.app"
@@ -667,6 +671,12 @@
               </v-col>
             </template>
 
+            <v-col cols="12">
+              <div class="sp-sub" data-test="sp-invite-approval-note">
+                Seven365 approves every invitation before the provider receives it.
+              </div>
+            </v-col>
+
             <!-- Error message -->
             <v-col cols="12" class="my-2">
               <v-row no-gutters>
@@ -752,6 +762,8 @@ type TableRow = {
   /** shown under a "Not approved" row, in Seven365's own words */
   rejectionReason?: string;
   siteName?: string;
+  /** a subcontractor: the provider that brought it onto this site */
+  invitedVia?: string;
 };
 
 type ServiceProviderMemberRow = {
@@ -1259,6 +1271,7 @@ const providerLines = computed<Array<[string, string]>>(() => {
     ["Email", row.contactEmail || row.email],
   ];
   if (row.contactPhone) lines.push(["Phone", row.contactPhone]);
+  if (row.invitedVia) lines.push(["Invited by", row.invitedVia]);
   if (row.source === "invite") {
     lines.push(["Invited", row.invitedLine || "-"]);
     if (row.answeredAt) lines.push(["Accepted", spDay(row.answeredAt)]);
@@ -1337,6 +1350,7 @@ function mapProviderRows(raw: Record<string, any>[]): TableRow[] {
     members: formatMembersCell(row.members),
     status: statusDisplay(row.status ?? "active", "provider"),
     source: row.source === "engagement" ? "engagement" : "provider",
+    invitedVia: String(row.invitedVia ?? ""),
   }));
 }
 

package/components/VisitorManagement.vue

@@ -85,7 +85,8 @@
             <v-text-field
               v-model="searchInput"
               density="compact"
-              placeholder="Search"
+              placeholder="Name, plate, phone, unit..."
+              aria-label="Search visitors"
               clearable
               max-width="300"
               append-inner-icon="mdi-magnify"
@@ -592,6 +593,12 @@
           >
         </span>
       </template>
+      <template #no-data>
+        <div class="table-card__empty">
+          <v-icon icon="mdi-magnify-close" size="32" />
+          <span>{{ visitorSearchEmptyText(searchQuery) }}</span>
+        </div>
+      </template>
     </TableMain>
 
     <v-dialog v-model="dialog.showSelection" width="450" persistent>
@@ -1455,6 +1462,11 @@
 <script setup lang="ts">
 import moment from "moment-timezone";
 import QRCode from "qrcode";
+import {
+  VISITOR_SEARCH_DEBOUNCE_MS,
+  visitorSearchEmptyText,
+  visitorSearchQuery,
+} from "../utils/visitor-search";
 
 
 const { downloadPDF } = usePDFDownload();
@@ -1648,6 +1660,20 @@ watch(hidQrDialog, (open) => {
 
 //filter states
 const searchInput = ref("");
+// What is actually searched: the box, trimmed, from 2 characters, sent
+// VISITOR_SEARCH_DEBOUNCE_MS after the last keystroke (cleared at once). The
+// list used to refetch on every keystroke, and a burst of typing (or a paste,
+// or a scanner) could leave the table showing the FIRST letter's results.
+const searchQuery = ref("");
+// Reads the box when it fires, so a clear that lands inside the wait is not
+// overwritten by the text that was there before it.
+const applySearch = debounce(() => {
+  searchQuery.value = visitorSearchQuery(searchInput.value);
+}, VISITOR_SEARCH_DEBOUNCE_MS);
+watch(searchInput, (value) => {
+  if (!visitorSearchQuery(value)) searchQuery.value = "";
+  else applySearch();
+});
 
 const today = new Date();
 const oneMonthAgo = new Date();
@@ -2154,7 +2180,7 @@ const {
     const params: any = {
       page: page.value,
       site: siteId,
-      search: searchInput.value,
+      search: searchQuery.value,
       dateTo: dateTo.value
         ? moment(dateTo.value).endOf("day").toISOString()
         : undefined,
@@ -2195,7 +2221,9 @@ const {
     // }
 
     try {
-      return await getVisitors(params);
+      const res = await getVisitors(params);
+      // Remember which search this answers, so a late reply is not shown.
+      return res ? { ...res, _search: params.search } : res;
     } catch (error: any) {
       // Refused by the server: say so with its own message, hide the tab and
       // go back to Registered - no empty "No data available" table.
@@ -2212,7 +2240,7 @@ const {
   {
     watch: [
       page,
-      searchInput,
+      searchQuery,
       dateFrom,
       dateTo,
       filterTypes,
@@ -2224,6 +2252,11 @@ const {
 );
 
 watch(getVisitorReq, (newData: any) => {
+  // An answer for an older search: ask again for the current one.
+  if (newData && newData._search !== searchQuery.value) {
+    getVisitorRefresh();
+    return;
+  }
   if (newData) {
     items.value = newData.items ?? [];
     pages.value = newData.pages ?? 0;
@@ -2722,7 +2755,7 @@ async function handleNfcCheckout() {
 function buildReportParams(): any {
   const params: any = {
     site: siteId,
-    search: searchInput.value,
+    search: searchQuery.value,
     dateTo: dateTo.value
       ? moment(dateTo.value).endOf("day").toISOString()
       : undefined,
@@ -2766,7 +2799,7 @@ async function handleDownloadPDFReport() {
 
     // Build URL with query parameters
     const queryParams = new URLSearchParams();
-    if (searchInput.value) queryParams.append("search", searchInput.value);
+    if (searchQuery.value) queryParams.append("search", searchQuery.value);
     if (dateFrom.value) queryParams.append("dateFrom", dateFrom.value);
     if (dateTo.value) queryParams.append("dateTo", dateTo.value);
     if (filterTypes.value.length > 0)
@@ -2915,7 +2948,7 @@ const updateRouteQuery = debounce(
 );
 
 watch(
-  [searchInput, dateFrom, dateTo, filterTypes, activeTab, displayNotCheckedOut],
+  [searchQuery, dateFrom, dateTo, filterTypes, activeTab, displayNotCheckedOut],
   ([search, from, to, types, tab, checkedOut]) => {
     const normalizedFrom = normalizeDateOnly(from);
     const normalizedTo = normalizeDateOnly(to);
@@ -2935,7 +2968,7 @@ watch(
   },
   { deep: true }
 );
-watch([searchInput, dateFrom, dateTo, filterTypes, activeTab], () => {
+watch([searchQuery, dateFrom, dateTo, filterTypes, activeTab], () => {
   page.value = 1;
 });
 
@@ -2955,9 +2988,13 @@ const syncVisitorFiltersFromRoute = () => {
     activeTab.value = nextTab;
   }
 
-  const nextSearch = (route.query.search as string) || "";
-  if (searchInput.value !== nextSearch) {
+  // Compared with the SEARCHED text, not the box: the route only ever holds
+  // what was searched, so comparing with the box put back an older value over
+  // letters typed since. A different value is an outside link (e.g. ?search=).
+  const nextSearch = visitorSearchQuery(route.query.search);
+  if (searchQuery.value !== nextSearch) {
     searchInput.value = nextSearch;
+    searchQuery.value = nextSearch;
   }
 
   if (route.query.dateFrom) {

package/composables/useServiceProvider.ts

@@ -1,3 +1,31 @@
+/** One person from a provider company with a membership at this site. */
+export type TSiteProviderMember = {
+  _id: string;
+  name: string;
+  email: string;
+  companyId: string;
+  company: string;
+  /** the company's service code (e.g. "security_agency") */
+  type: string;
+  typeLabel: string;
+  role: string;
+  status: string;
+  addedAt?: string | null;
+  /** a subcontractor: the provider that brought its company onto the site */
+  invitedVia?: string;
+};
+
+export type TSiteProviderCompany = {
+  orgId: string;
+  name: string;
+  type: string;
+  typeLabel: string;
+  email?: string;
+  since?: string | null;
+  invitedVia?: string;
+  people: number;
+};
+
 export default function useServiceProvider() {
   const serviceProviders = useState<Array<TServiceProvider>>(
     "serviceProviders",
@@ -259,7 +287,38 @@ export default function useServiceProvider() {
     );
   }
 
+  /**
+   * Members > Service Providers: the provider people with access to this
+   * site, and one entry per provider company with its head count. The
+   * site's own organisation only - the server refuses anyone else.
+   */
+  function getSiteMembers(siteId: string): Promise<{
+    items: TSiteProviderMember[];
+    companies: TSiteProviderCompany[];
+  }> {
+    return useNuxtApp().$api("/api/service-providers/site-members", {
+      method: "GET",
+      query: { siteId },
+    });
+  }
+
+  /** The same list as an Excel file, under the same filters. */
+  function exportSiteMembers(
+    siteId: string,
+    filters: { type?: string; company?: string; search?: string } = {},
+  ): Promise<Blob> {
+    const query: Record<string, string> = { siteId, format: "xlsx" };
+    for (const [k, v] of Object.entries(filters)) if (v) query[k] = v;
+    return useNuxtApp().$api<Blob>("/api/service-providers/site-members", {
+      method: "GET",
+      query,
+      responseType: "blob",
+    });
+  }
+
   return {
+    getSiteMembers,
+    exportSiteMembers,
     serviceProviders,
     serviceProvider,
     serviceProviderCategories,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.65.2",
+  "version": "4.66.0",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/invitations-empty-text.ts

@@ -0,0 +1,14 @@
+/**
+ * The Invitations table's empty state (QA sweep 2026-09-28), e.g.
+ * "No pending invitations for The LakeGarden Residences. Use Invite member to
+ * add someone." / "No expired invitations."
+ */
+export function invitationsEmptyText({
+  status = "pending",
+  siteName = "",
+  canInvite = true,
+}: { status?: string; siteName?: string; canInvite?: boolean } = {}): string {
+  if (status === "expired") return "No expired invitations.";
+  const where = siteName ? ` for ${siteName}` : "";
+  return `No pending invitations${where}.${canInvite ? " Use Invite member to add someone." : ""}`;
+}

package/utils/notification-target.ts

@@ -182,9 +182,8 @@ const SITE_PAGES: Record<string, TSitePage[]> = {
     { apps: ["security"], page: () => "virtual-patrol/cctv" },
     { apps: ["property-management"], page: () => "cctv" },
   ],
-  serviceProviderInviteAnswer: [
-    { apps: SERVICE_APPS.filter((a) => a !== "hygiene"), page: () => "service-providers" },
-  ],
+  // hygiene has its Service Providers page too since 2026-09-28
+  serviceProviderInviteAnswer: [{ apps: SERVICE_APPS, page: () => "service-providers" }],
 };
 SITE_PAGES.myVisitors = SITE_PAGES.visitors;
 
@@ -196,6 +195,7 @@ export const WEB_TARGET_KINDS = [
   "robot",
   "client",
   "clientInvitation",
+  "spApproval",
 ];
 
 function sitePageTarget(
@@ -221,6 +221,10 @@ function sitePageTarget(
 function staffTarget(kind: string, item: TTargetRow): TNotificationTarget | null {
   const id = String(item.params?.id ?? "").trim();
   if (kind === "robot") return { candidates: [{ app: "org", path: "/super-admin/robots" }] };
+  // A service-provider invitation waiting in SP Approvals.
+  if (kind === "spApproval") {
+    return { candidates: [{ app: "org", path: "/super-admin/sp-approvals" }] };
+  }
   if (kind === "clientInvitation") {
     return { candidates: [{ app: "org", path: "/super-admin/client-list" }] };
   }

package/utils/role.ts

@@ -73,3 +73,24 @@ export function otherSiteBannerText(count: unknown): string | null {
     ? "1 member here has a role from another site. Assign them a role for this site."
     : `${n} members here have a role from another site. Assign each one a role for this site.`;
 }
+
+/**
+ * Can this member's CURRENT role be used on the screen's site? The server's
+ * `roleState` is empty for a usable role and names the problem otherwise
+ * ("other-site", "other-org", "deleted", "missing"). An unusable role is never
+ * pre-filled in Assign Role nor offered in its list (owner report 2026-09-28).
+ */
+export function roleUsableHere(member: { role?: unknown; roleState?: unknown }): boolean {
+  return !!member?.role && !member?.roleState;
+}
+
+/** Assign Role's empty state when the site has no role of its own yet. */
+export function noRolesForSiteText(siteName?: string | null): string {
+  return `No roles created for ${siteName || "this site"} yet. Create one in Roles & Permissions.`;
+}
+
+/** A same-app path to return to (`?returnTo=`), or "" - never another origin. */
+export function safeReturnTo(value: unknown): string {
+  const path = Array.isArray(value) ? value[0] : value;
+  return typeof path === "string" && /^\/(?!\/)[^\s\\]*$/.test(path) ? path : "";
+}

package/utils/site-provider-members.ts

@@ -0,0 +1,96 @@
+/**
+ * Members > Service Providers (owner request 2026-09-28): the property
+ * manager sees every person from its service providers who can open this
+ * site's information. Pure helpers, so the screen's wording and filters are
+ * tested without mounting it. The server applies the same filter rule to the
+ * Excel export (`filterSiteProviderMembers` in core).
+ */
+
+export type TProviderMemberRow = {
+  name?: string;
+  email?: string;
+  company?: string;
+  companyId?: string;
+  type?: string;
+  role?: string;
+  invitedVia?: string;
+};
+
+export type TProviderMemberFilters = {
+  type?: string;
+  company?: string;
+  search?: string;
+};
+
+export function filterProviderMembers<T extends TProviderMemberRow>(
+  items: T[],
+  { type = "", company = "", search = "" }: TProviderMemberFilters,
+): T[] {
+  const needle = search.trim().toLowerCase();
+  return items.filter(
+    (m) =>
+      (!type || m.type === type) &&
+      (!company || m.companyId === company) &&
+      (!needle ||
+        [m.name, m.email, m.company, m.role, m.invitedVia]
+          .map((v) => String(v ?? "").toLowerCase())
+          .some((v) => v.includes(needle))),
+  );
+}
+
+/** "Aigle Security · 12 people" */
+export function companyChipText(name: string, people: number): string {
+  return `${name || "Unnamed company"} · ${people} ${people === 1 ? "person" : "people"}`;
+}
+
+/** What an empty table says: nothing on site, nobody added yet, or the filters. */
+export function providerMembersEmptyText({
+  companies,
+  total,
+  filtered,
+}: {
+  companies: number;
+  total: number;
+  filtered: boolean;
+}): string {
+  if (!companies) return "No service providers work at this site yet.";
+  if (!total) return "Your service providers have not given anyone access to this site yet.";
+  if (filtered) return "No one matches these filters.";
+  return "No one to show.";
+}
+
+/** The service types present, for the filter, in a stable order. */
+export function serviceTypeOptions(
+  items: Array<{ type?: string; typeLabel?: string }>,
+): Array<{ title: string; value: string }> {
+  const seen = new Map<string, string>();
+  for (const m of items) {
+    const value = String(m.type ?? "");
+    if (value && !seen.has(value)) seen.set(value, String(m.typeLabel || value));
+  }
+  return [...seen.entries()]
+    .map(([value, title]) => ({ title, value }))
+    .sort((a, b) => a.title.localeCompare(b.title));
+}
+
+/**
+ * "Email the company" about one person: a mail to the provider company,
+ * naming the person and the site. Nothing is changed in the app - the
+ * provider manages its own people.
+ */
+export function concernMailto({
+  companyEmail,
+  person,
+  siteName,
+}: {
+  companyEmail?: string;
+  person: string;
+  siteName?: string;
+}): string {
+  const to = String(companyEmail ?? "").trim();
+  if (!to) return "";
+  const where = siteName ? ` at ${siteName}` : "";
+  const subject = `About ${person}${where}`;
+  const body = `Hello,\n\nWe would like to talk about ${person}'s access${where}.\n\n`;
+  return `mailto:${encodeURIComponent(to)}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+}

package/utils/visitor-search.ts

@@ -0,0 +1,23 @@
+/**
+ * Visitor Management search box rules (VisitorManagement.vue). The server does
+ * the matching (name, plate, phone, NRIC, company, purpose, block/unit - see
+ * @7365admin1/core visitor-search.util); this only decides WHEN to ask.
+ * Browser-safe: no Node globals. Tested by utils/visitor-search.test.ts.
+ */
+
+/** Characters needed before a search is sent; shorter means "no search". */
+export const VISITOR_SEARCH_MIN_LENGTH = 2;
+
+/** Wait after the last keystroke before searching. */
+export const VISITOR_SEARCH_DEBOUNCE_MS = 350;
+
+/** The text to send for what is in the box: trimmed, or "" when too short. */
+export function visitorSearchQuery(raw: unknown): string {
+  const text = typeof raw === "string" ? raw.replace(/\s+/g, " ").trim() : "";
+  return text.length >= VISITOR_SEARCH_MIN_LENGTH ? text : "";
+}
+
+/** The empty-table sentence: names the search when there is one. */
+export function visitorSearchEmptyText(query: string): string {
+  return query ? `No visitors match '${query}'` : "No data available";
+}