@7365admin1/layer-common 4.35.1-staging.430 → 4.35.1-staging.432

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
@@ -547,9 +558,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 +609,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 +626,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/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/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>
@@ -1557,6 +1564,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();
@@ -1750,6 +1762,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();
@@ -2322,7 +2348,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,
@@ -2363,7 +2389,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.
@@ -2380,7 +2408,7 @@ const {
   {
     watch: [
       page,
-      searchInput,
+      searchQuery,
       dateFrom,
       dateTo,
       filterTypes,
@@ -2392,6 +2420,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;
@@ -2890,7 +2923,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,
@@ -2934,7 +2967,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)
@@ -3083,7 +3116,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);
@@ -3103,7 +3136,7 @@ watch(
   },
   { deep: true }
 );
-watch([searchInput, dateFrom, dateTo, filterTypes, activeTab], () => {
+watch([searchQuery, dateFrom, dateTo, filterTypes, activeTab], () => {
   page.value = 1;
 });
 
@@ -3123,9 +3156,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/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.35.1-staging.430",
+  "version": "4.35.1-staging.432",
   "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/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/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";
+}