@7365admin1/layer-common 4.35.1-staging.443 → 4.35.1-staging.445

package/components/BuildingUnitFormEdit.vue

@@ -10,6 +10,7 @@
         <v-tab value="general">General</v-tab>
         <v-tab value="residents">Residents/Tenants</v-tab>
         <v-tab value="vehicles">Vehicles</v-tab>
+        <v-tab value="management">Management</v-tab>
         <v-tab value="others">Others</v-tab>
       </v-tabs>
     </v-toolbar>
@@ -170,6 +171,11 @@
         </TableMain>
       </template>
 
+      <template v-else-if="tab === 'management'">
+        <BuildingUnitManagement :unit-id="buildingUnit._id" :site-id="buildingUnit?.site?._id"
+          :can-update="canUpdateUnit" />
+      </template>
+
       <template v-else-if="tab === 'others'">
         <v-row>
           <!-- <v-col cols="12" md="6" class="mt-2">

package/components/BuildingUnitManagement.vue

@@ -0,0 +1,277 @@
+<template>
+  <v-card width="100%">
+    <v-expansion-panels v-model="panels" variant="accordion" multiple>
+      <v-expansion-panel v-for="section in sections" :key="section.key" :value="section.key">
+        <v-expansion-panel-title class="bg-primary">
+          <span>{{ section.title }} ({{ section.items.length }})</span>
+          <v-spacer />
+          <!-- @click.stop: the button sits in the panel header, so a click must
+               not also open or close the panel. -->
+          <v-btn v-if="canUpdate" size="small" variant="tonal" class="text-none mr-4" prepend-icon="mdi-plus"
+            @click.stop="openAdd(section.key)">
+            Add
+          </v-btn>
+        </v-expansion-panel-title>
+
+        <v-expansion-panel-text>
+          <v-progress-linear v-if="section.loading" indeterminate color="primary" />
+          <v-list v-if="section.items.length" density="compact" class="bg-transparent">
+            <v-list-item v-for="item in section.items" :key="item._id" :title="item.name"
+              :subtitle="section.subtitle(item)">
+              <template v-if="canUpdate" #append>
+                <v-btn icon="mdi-close" size="small" variant="text" :loading="removing === item._id"
+                  :aria-label="`Remove ${item.name} from this unit`" @click="confirmRemove(section.key, item)" />
+              </template>
+            </v-list-item>
+          </v-list>
+          <p v-else-if="!section.loading" class="font-weight-semibold text-caption ml-2 mt-5">
+            **No {{ section.empty }} to display**
+          </p>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+
+    <p v-if="message" class="text-center text-subtitle-2 font-weight-medium text-error mt-4">
+      {{ message }}
+    </p>
+
+    <v-dialog v-model="removeDialog" width="450" persistent>
+      <v-card width="100%">
+        <v-toolbar density="compact" class="pl-4">
+          <span class="font-weight-medium text-h5">
+            Remove {{ pendingRemove?.section === "members" ? "Management" : "Service Provider" }}
+          </span>
+        </v-toolbar>
+
+        <v-card-text>
+          <p class="text-subtitle-2 text-center">
+            Are you sure you want to remove <strong>{{ pendingRemove?.name }}</strong> from this unit?
+          </p>
+        </v-card-text>
+
+        <v-toolbar density="compact">
+          <v-row no-gutters>
+            <v-col cols="6">
+              <v-btn tile block size="48" variant="text" class="text-none" :disabled="!!removing"
+                @click="removeDialog = false">
+                Cancel
+              </v-btn>
+            </v-col>
+            <v-col cols="6">
+              <v-btn tile block size="48" color="primary-button" variant="flat" class="text-none"
+                :loading="!!removing" @click="remove">
+                Remove
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="addDialog" width="520" persistent>
+      <v-card>
+        <v-toolbar density="compact" class="pl-4">
+          <span class="font-weight-medium text-h6">Add {{ adding === "members" ? "Management" : "Service Providers" }}</span>
+        </v-toolbar>
+        <v-card-text>
+          <p class="text-caption mb-3">
+            Only active {{ adding === "members" ? "members" : "service providers" }} that are not assigned to a unit
+            yet are listed.
+          </p>
+          <v-autocomplete v-model="selected" v-model:search="candidateSearch" :items="candidates"
+            :loading="candidatesLoading" item-title="name" item-value="_id" multiple chips closable-chips
+            no-filter density="comfortable" placeholder="Search by name"
+            :no-data-text="candidatesLoading ? 'Loading...' : 'No one available'">
+            <template #item="{ props: itemProps, item }">
+              <v-list-item v-bind="itemProps" :subtitle="subtitleOf(item.raw)" />
+            </template>
+          </v-autocomplete>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn class="text-none" :disabled="saving" @click="addDialog = false">Cancel</v-btn>
+          <v-btn class="text-none" color="primary" variant="flat" :loading="saving" :disabled="!selected.length"
+            @click="add">
+            Add
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+/**
+ * A building unit's Management tab: the management members and the service
+ * providers attached to this unit. Each can be on one unit at a time, and
+ * only while active - the server detaches them the moment they are suspended,
+ * set inactive or deleted, so they simply drop off this list.
+ */
+type TSection = "members" | "providers";
+type TRow = { _id: string; name: string; email?: string; roleName?: string; type?: string };
+
+const props = defineProps({
+  unitId: {
+    type: String,
+    required: true,
+  },
+  /** The unit's site. The route's `site` is used when this is empty. */
+  siteId: {
+    type: String,
+    default: "",
+  },
+  /** The membership type whose members manage the site. */
+  managementType: {
+    type: String,
+    default: "property_management_agency",
+  },
+  canUpdate: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const route = useRoute();
+const org = computed(() => (route.params.org as string) ?? "");
+const site = computed(() => props.siteId || ((route.params.site as string) ?? ""));
+
+const { getAll: getMembers, updateMemberUnit } = useMember();
+const { getAll: getProviders, updateUnit: updateProviderUnit } = useServiceProvider();
+const { debounce } = useUtils();
+
+const panels = ref<TSection[]>(["members", "providers"]);
+const message = ref("");
+const removing = ref("");
+
+function membersQuery(unit: string, search = "") {
+  return getMembers({ org: org.value, siteId: site.value, type: props.managementType, status: "active", unit, search, limit: 50 });
+}
+
+function providersQuery(unit: string, search = "") {
+  return getProviders({ siteId: site.value, status: "active", unit, search, limit: 50 });
+}
+
+const { data: memberRes, pending: membersLoading, refresh: refreshMembers } = useLazyAsyncData(
+  `unit-management-members-${props.unitId}`,
+  () => membersQuery(props.unitId),
+);
+const { data: providerRes, pending: providersLoading, refresh: refreshProviders } = useLazyAsyncData(
+  `unit-management-providers-${props.unitId}`,
+  () => providersQuery(props.unitId),
+);
+
+function subtitleOf(row: TRow) {
+  return [row.roleName || row.type?.replace(/_/g, " "), row.email].filter(Boolean).join(" · ");
+}
+
+const sections = computed(() => [
+  {
+    key: "members" as TSection,
+    title: "Management",
+    empty: "management",
+    items: (memberRes.value?.items ?? []) as TRow[],
+    loading: membersLoading.value,
+    subtitle: subtitleOf,
+  },
+  {
+    key: "providers" as TSection,
+    title: "Service Providers",
+    empty: "service providers",
+    items: (providerRes.value?.items ?? []) as TRow[],
+    loading: providersLoading.value,
+    subtitle: subtitleOf,
+  },
+]);
+
+function refresh(section: TSection) {
+  return section === "members" ? refreshMembers() : refreshProviders();
+}
+
+function assign(section: TSection, id: string, unit: string) {
+  return section === "members" ? updateMemberUnit(id, unit) : updateProviderUnit(id, unit);
+}
+
+function errorOf(error: any, fallback: string) {
+  return error?.response?._data?.message || error?.data?.message || fallback;
+}
+
+// --- Remove: confirmed first ---
+const removeDialog = ref(false);
+const pendingRemove = ref<{ section: TSection; id: string; name: string } | null>(null);
+
+function confirmRemove(section: TSection, row: TRow) {
+  message.value = "";
+  pendingRemove.value = { section, id: row._id, name: row.name };
+  removeDialog.value = true;
+}
+
+async function remove() {
+  if (!pendingRemove.value) return;
+  const { section, id } = pendingRemove.value;
+  removing.value = id;
+  try {
+    await assign(section, id, "");
+    await refresh(section);
+  } catch (error: any) {
+    message.value = errorOf(error, "Failed to remove from unit.");
+  } finally {
+    removing.value = "";
+    removeDialog.value = false;
+    pendingRemove.value = null;
+  }
+}
+
+// --- Add dialog: active rows on no unit yet ---
+const addDialog = ref(false);
+const adding = ref<TSection>("members");
+const selected = ref<string[]>([]);
+const candidates = ref<TRow[]>([]);
+const candidateSearch = ref("");
+const candidatesLoading = ref(false);
+const saving = ref(false);
+
+async function loadCandidates() {
+  candidatesLoading.value = true;
+  try {
+    const search = candidateSearch.value?.trim() ?? "";
+    const res = adding.value === "members" ? await membersQuery("none", search) : await providersQuery("none", search);
+    // Keep what is already picked, so a new search does not drop the chips.
+    const picked = candidates.value.filter((c) => selected.value.includes(c._id));
+    const found = ((res?.items ?? []) as TRow[]).filter((c) => !selected.value.includes(c._id));
+    candidates.value = [...picked, ...found];
+  } catch (error: any) {
+    message.value = errorOf(error, "Failed to load the list.");
+  } finally {
+    candidatesLoading.value = false;
+  }
+}
+
+const debouncedLoad = debounce(loadCandidates, 400);
+watch(candidateSearch, () => {
+  if (addDialog.value) debouncedLoad();
+});
+
+function openAdd(section: TSection) {
+  message.value = "";
+  adding.value = section;
+  selected.value = [];
+  candidates.value = [];
+  candidateSearch.value = "";
+  addDialog.value = true;
+  loadCandidates();
+}
+
+async function add() {
+  saving.value = true;
+  message.value = "";
+  const section = adding.value;
+  const results = await Promise.allSettled(selected.value.map((id) => assign(section, id, props.unitId)));
+  const failed = results.filter((r): r is PromiseRejectedResult => r.status === "rejected");
+  if (failed.length) {
+    message.value = errorOf(failed[0].reason, `${failed.length} could not be added.`);
+  }
+  await refresh(section);
+  saving.value = false;
+  addDialog.value = false;
+}
+</script>

package/components/RolePermissionFormCreate.vue

@@ -216,17 +216,21 @@
             </div>
           </v-col>
 
-          <v-col cols="12" class="my-2">
-            <v-row no-gutters>
-              <v-col cols="12" class="text-center">
-                <span class="role-create__error">{{ message }}</span>
-              </v-col>
-            </v-row>
-          </v-col>
         </v-row>
       </v-form>
     </div>
 
+    <!--
+      WHY A SAVE FAILED, where it can be seen (owner, 2026-09-29: Wing Tai pressed
+      Submit on a 35-module role and "nothing happened"). The server's answer
+      used to be printed at the END of the scrolling list, below every module,
+      so a refused save looked like an ignored click. It now sits above the
+      buttons, outside the scroll, and is read out by screen readers.
+    -->
+    <div v-if="message" class="role-create__save-error" role="alert">
+      Couldn't save: {{ message }}
+    </div>
+
     <div class="role-create__footer">
       <AppButton
         v-if="disabledModuleCount > 0 || !showDisabledModules"
@@ -257,6 +261,11 @@ import {
 import useRole from "../composables/useRole";
 import useUtils from "../composables/useUtils";
 import useSite from "../composables/useSite";
+import { readApiError } from "../utils/subscription-form";
+
+/** Shown after "Couldn't save:" when the server gave no reason (network, timeout). */
+const SAVE_FALLBACK =
+  "the server could not be reached. Please check your connection and try again.";
 
 const props = defineProps({
   permissions: {
@@ -487,6 +496,7 @@ watch(
 
 async function submit() {
   disable.value = true;
+  message.value = "";
   try {
     await createRole({
       name: name.value,
@@ -500,9 +510,7 @@ async function submit() {
     // Same unguarded chain as the preview dialog had: on a network or timeout
     // failure `error.response` is undefined and the catch threw inside itself,
     // leaving the user with no message at all.
-    message.value =
-      error?.response?._data?.message ??
-      "Could not create this role. Please check your connection and try again.";
+    message.value = readApiError(error, SAVE_FALLBACK);
   } finally {
     disable.value = false;
   }
@@ -703,10 +711,15 @@ const isAllSelected = computed(() => {
   color: var(--text2);
 }
 
-.role-create__error {
+.role-create__save-error {
+  margin: 0 16px;
+  padding: 8px 12px;
+  border-radius: 6px;
   font-size: var(--fs-cell);
   font-weight: 600;
   color: var(--err);
+  background: var(--err-bg);
+  border: 1px solid var(--err-border, transparent);
 }
 
 /* The design's dialog footer. Deliberately not the shared

package/components/RolePermissionFormPreviewUpdate.vue

@@ -216,22 +216,23 @@
             </div>
           </v-col>
 
-          <!--
-            One message, once. This block used to appear twice -- inside
-            `v-if="edit"` and again unconditionally -- so a refused save printed
-            the server's sentence back to back.
-          -->
-          <v-col v-if="message" cols="12" class="my-2">
-            <v-row no-gutters>
-              <v-col cols="12" class="text-center">
-                <span class="role-perm__error">{{ message }}</span>
-              </v-col>
-            </v-row>
-          </v-col>
         </v-row>
       </v-form>
     </div>
 
+    <!--
+      WHY A SAVE FAILED - or why Submit is switched off - where it can be seen:
+      above the buttons, outside the scrolling list (owner, 2026-09-29: a refused
+      save printed below 35 modules looked like an ignored click). One message,
+      once; read out by screen readers.
+    -->
+    <div v-if="message" class="role-perm__save-error" role="alert">
+      Couldn't save: {{ message }}
+    </div>
+    <div v-else-if="edit && errorMessages" class="role-perm__save-error" role="alert">
+      {{ errorMessages }}
+    </div>
+
     <div class="role-perm__footer">
       <AppButton
         v-if="disabledModuleCount > 0 || showDisabledModules"
@@ -266,6 +267,7 @@ import {
 } from "../utils/permission-labels";
 import useRole from "../composables/useRole";
 import useUtils from "../composables/useUtils";
+import { readApiError } from "../utils/subscription-form";
 import {
   holdsPermission,
   withoutPermission,
@@ -692,8 +694,13 @@ const errorMessages = computed(() => {
 
 const { updatePermissionById } = useRole();
 
+/** Shown after "Couldn't save:" when the server gave no reason (network, timeout). */
+const SAVE_FALLBACK =
+  "the server could not be reached. Please check your connection and try again.";
+
 async function submit() {
   disable.value = true;
+  message.value = "";
   try {
     await updatePermissionById(props.id, definedModel.value);
     emit("success");
@@ -701,9 +708,7 @@ async function submit() {
     // `error.response` is undefined on a network or timeout failure, so the old
     // unguarded chain threw inside its own catch: nothing was shown, the button
     // came back enabled, and the save looked like it had simply been ignored.
-    message.value =
-      error?.response?._data?.message ??
-      "Could not save this role. Please check your connection and try again.";
+    message.value = readApiError(error, SAVE_FALLBACK);
   } finally {
     disable.value = false;
   }
@@ -779,6 +784,17 @@ async function submit() {
   color: var(--err);
 }
 
+.role-perm__save-error {
+  margin: 0 16px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--err);
+  background: var(--err-bg);
+  border: 1px solid var(--err-border, transparent);
+}
+
 /* The design's dialog footer. Deliberately not the shared
    `.screen-modal__footer` - that class is on the batch-D branch (#1150), not
    on this base, and a second copy in `screens.css` would collide with it. */

package/composables/useMember.ts

@@ -70,6 +70,8 @@ export default function useMember() {
     status = "active",
     siteId = "",
     roleState = "",
+    /** A building unit id, or "none": members on no unit yet. */
+    unit = "",
   } = {}) {
     const query: Record<string, any> = { page, limit, type, status };
 
@@ -79,6 +81,7 @@ export default function useMember() {
     if (user) query.user = user;
     if (org) query.org = org;
     if (siteId) query.siteId = siteId;
+    if (unit) query.unit = unit;
     return useNuxtApp().$api<Record<string, any>>("/api/members", {
       method: "GET",
       query,
@@ -154,6 +157,14 @@ export default function useMember() {
     });
   }
 
+  /** Attach a member to a building unit, or detach them (`unit` ""). */
+  function updateMemberUnit(id: string, unit: string) {
+    return useNuxtApp().$api<Record<string, any>>("/api/members/unit", {
+      method: "PUT",
+      body: { id, unit },
+    });
+  }
+
   function getByUserTypeOrg(user: string, type: string, org: string) {
     return useNuxtApp().$api<TMember>(
       `/api/members/user/${user}/app/${type}/org`,
@@ -197,6 +208,7 @@ export default function useMember() {
   return {
     getSiteAccess,
     saveSiteAccess,
+    updateMemberUnit,
     members,
     member,
     page,

package/composables/useServiceProvider.ts

@@ -90,6 +90,8 @@ export default function useServiceProvider() {
     status = "",
     /** "engagements": also providers engaged through an accepted invitation. */
     include = "",
+    /** A building unit id, or "none": providers on no unit yet. */
+    unit = "",
   } = {}) {
     return useNuxtApp().$api<Record<string, any>>("/api/service-providers", {
       method: "GET",
@@ -102,6 +104,7 @@ export default function useServiceProvider() {
         siteId,
         ...(status ? { status } : {}),
         ...(include ? { include } : {}),
+        ...(unit ? { unit } : {}),
       },
     });
   }
@@ -269,6 +272,17 @@ export default function useServiceProvider() {
     );
   }
 
+  /** Attach a provider to a building unit, or detach it (`unit` ""). */
+  async function updateUnit(id: string, unit: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/service-providers/${id}/unit`,
+      {
+        method: "PATCH",
+        body: { unit },
+      }
+    );
+  }
+
    async function getByEmail({
     email = "",
     orgId = "",
@@ -338,6 +352,7 @@ export default function useServiceProvider() {
     add,
     addViaInvite,
     updateStatus,
+    updateUnit,
     getByEmail,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.35.1-staging.443",
+  "version": "4.35.1-staging.445",
   "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/types/member.d.ts

@@ -10,6 +10,10 @@ declare type TMember = {
   customerOrgId?: string;
   customerSiteId?: string;
   status?: string;
+  email?: string;
+  /** The building unit this member manages (a unit's Management tab). */
+  unit?: string | null;
+  unitName?: string;
   createdAt?: string;
   updatedAt?: string;
   deletedAt?: string;

package/types/service-provider.d.ts

@@ -7,6 +7,11 @@ declare type TServiceProvider = {
   serviceProviderOrgId: string;
   type: string;
   nature: string;
+  status?: string;
+  email?: string;
+  /** The building unit this provider serves (a unit's Management tab). */
+  unit?: string | null;
+  unitName?: string;
 };
 
 declare type TServiceProviderName = {