@7365admin1/layer-common 4.73.1-staging.456 → 4.75.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @iservice365/layer-common
 
+## 4.75.0
+
+### Minor Changes
+
+- aa8c658: Organization app Members: lists every person of the organisation, including people limited to specific sites (one row each, labelled "Limited to: Site A, Site B"; organisation-wide people read "All sites"); a Site access button on every row; the actions column stays pinned on the right; shorter dates; at organisation level the "role from another site" banner is gone and such a role reads "Security (The Loft)". Needs core with `GET /members?people=1` (older servers refuse the flag).
+
+## 4.74.0
+
+### Minor Changes
+
+- 92ff5ab: Members: the "role from another site" banner gets "Fix roles from other sites" — a preview of each member, their site, the current role and the role proposed at their own site (warnings for fewer permissions or several/no matches, never pre-ticked), Apply, an automatic undo file download and an Undo button. Uses `GET/POST /api/members/cross-site-roles/fix` and `POST /api/members/cross-site-roles/undo` (core). The list and the banner count refresh after it.
+- 8cca55f: Security role editor: NFC Patrol now offers Add, Update and Delete routes, and Site Settings offers Manage NFC Management and Manage NFC Patrol Settings. The strings and descriptions are Property Management's, so no new spelling is introduced; the security web app's NFC Patrol pages and Site Settings panels gate on them.
+
+### Patch Changes
+
+- 8df8f59: Robot maps: a robot that reports its floor but no position on the plan (Ounitech, now that its API reports the floor) is listed under the map ("can't be placed on the map, so it is listed but not drawn") instead of silently missing.
+
 ## 4.73.0
 
 ### Minor Changes
@@ -1885,11 +1902,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/assets/css/primitives.css

@@ -775,49 +775,6 @@ select option {
   box-shadow: var(--shadow-menu);
 }
 
-/* The filter box of a `searchable` AppSelect. Sticky rather than scrolled
-   away with the options: the list it filters is long enough to need scrolling,
-   which is the only reason the box is there. */
-.app-select__search {
-  position: sticky;
-  top: -6px;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: -6px -6px 4px;
-  padding: 8px 10px;
-  border-bottom: 1px solid var(--border);
-  background: var(--card);
-  color: var(--muted);
-}
-
-.app-select__search-input {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  outline: none;
-  background: none;
-  font-family: var(--font-sans);
-  font-size: var(--fs-cell);
-  font-weight: 500;
-  color: var(--text);
-}
-
-.app-select__search-input::placeholder {
-  color: var(--muted);
-  font-weight: 500;
-}
-
-.app-select__empty {
-  margin: 0;
-  padding: 10px 8px;
-  font-family: var(--font-sans);
-  font-size: var(--fs-cell);
-  color: var(--muted);
-  text-align: center;
-}
-
 .app-select__option {
   display: flex;
   align-items: center;

package/components/AccessCardPreviewDialog.vue

@@ -18,98 +18,50 @@
 
       <v-card-text class="pa-4">
         <div class="text-caption text-fontgray mb-4">
-          <!-- The card number is the one fact this dialog is about, so it is
-               not greyed out with the "Card:" label around it. `text-high-emphasis`
-               rather than a literal black: every app has a light/dark toggle
-               (plugins/vuetify.ts), and #000 here would be black text on a dark
-               panel. It resolves to black in the light theme. -->
-          Card:
-          <strong class="text-body-2 font-weight-bold text-high-emphasis">{{
-            selectedCardInUnit?.cardNo
-          }}</strong>
+          Card: <strong class="text-body-2">{{ selectedCardInUnit?.cardNo }}</strong>
         </div>
 
-        <!--
-          WHO the card is being given to. The dialog only ever offered the
-          unit's residents and tenants; Management and Service Providers are
-          the other two groups of people who hold cards on a site. A select
-          rather than a button toggle: three labels this long overflow a 420px
-          dialog, and this stays legible at phone width.
-        -->
-        <InputLabel title="Assign to" required class="mb-1" />
-        <v-select
-          v-model="assignCategory"
-          :items="assignCategories"
+        <!-- Person Type Filter -->
+        <!-- <div class="text-caption font-weight-bold mb-1 text-uppercase text-grey-darken-1">Person Type</div>
+        <v-btn-toggle
+          v-model="assignPersonType"
+          color="primary"
           density="compact"
-          item-title="label"
-          item-value="value"
-          hide-details
+          variant="outlined"
+          rounded="pill"
           class="mb-4"
-          @update:model-value="onAssignCategoryChange"
-        />
+        >
+          <v-btn value="" size="small" class="text-none px-3">All</v-btn>
+          <v-btn value="owner" size="small" class="text-none px-3">Unit Owner</v-btn>
+          <v-btn value="resident" size="small" class="text-none px-3">Resident</v-btn>
+          <v-btn value="tenant" size="small" class="text-none px-3">Tenant</v-btn>
+        </v-btn-toggle> -->
 
         <!-- Person Selector -->
         <InputLabel title="Person" required class="mb-1" />
         <v-select
           v-model="assignPerson"
-          :items="assignPeopleItems"
+          :items="filteredPeopleItems"
           density="compact"
           item-title="name"
-          item-value="assigneeId"
+          item-value="_id"
           hide-details="auto"
           placeholder="Select person..."
           persistent-placeholder
           :loading="peopleLoading"
-          :disabled="peopleLoading"
           return-object
-          :no-data-text="assignNoDataText"
+          no-data-text="No residents or tenants found for this unit"
         >
-          <!--
-            Three lines: who they are, their email, and what they are here -
-            the member's role, or the provider's line of business. `title` is
-            bound rather than left to `itemProps` so the subtitle slot can add
-            the third line under it.
-          -->
           <template #item="{ props: itemProps, item }">
-            <v-list-item v-bind="itemProps" :title="item.raw.name">
-              <template v-if="item.raw.subtitle || item.raw.meta" #subtitle>
-                <div v-if="item.raw.subtitle" class="text-truncate">
-                  {{ item.raw.subtitle }}
-                </div>
-                <div v-if="item.raw.meta" class="text-caption text-medium-emphasis">
-                  {{ item.raw.meta }}
-                </div>
-              </template>
-            </v-list-item>
+            <v-list-item v-bind="itemProps" :subtitle="personTypeLabel(item.raw)" />
           </template>
-          <!--
-            The same two lines once a person is chosen. A member's name is
-            often their email, so a selection showing the name alone would drop
-            the one thing that tells two of them apart - their role.
-          -->
           <template #selection="{ item }">
-            <div class="assign-selection">
-              <div class="text-truncate">{{ item.raw.name }}</div>
-              <div
-                v-if="item.raw.subtitle || item.raw.meta"
-                class="text-caption text-medium-emphasis text-truncate"
-              >
-                {{ [item.raw.subtitle, item.raw.meta].filter(Boolean).join(" · ") }}
-              </div>
-            </div>
+            <span>{{ item.raw.name }}</span>
+            <v-chip size="x-small" class="ml-2" variant="tonal">
+              {{ personTypeLabel(item.raw) }}
+            </v-chip>
           </template>
         </v-select>
-
-        <!--
-          A card is assigned by writing the person's USER id onto it, so a row
-          the list cannot give one for must not be sent - the server stores
-          whatever id it is handed without checking, which would silently bind
-          the card to nobody. Data-driven rather than per-group, so this
-          disappears by itself once the endpoint carries the id.
-        -->
-        <p v-if="assignPerson && !assignPerson.assigneeId" class="text-warning text-caption mt-2">
-          {{ assignUnassignableText }}
-        </p>
         <p v-if="assignError" class="text-error text-caption mt-2">{{ assignError }}</p>
       </v-card-text>
 
@@ -124,7 +76,7 @@
         <v-btn
           variant="flat"
           class="text-none screen-btn-primary"
-          :disabled="!assignPerson?.assigneeId || assignLoading"
+          :disabled="!assignPerson || assignLoading"
           :loading="assignLoading"
           @click="confirmAssign"
         >
@@ -452,54 +404,12 @@ const emit = defineEmits<{
 
 const { getResidents, assignUser } = useAccessManagement();
 const { getEncryptedAcmUrl } = useSiteEntryPassSettings();
-const { getAll: getMembers } = useMember();
-const { getAll: getServiceProviders } = useServiceProvider();
 
 const historyDialog = ref(false);
 const showAssignForm = ref(false);
+const assignPersonType = ref<string>("");
 const assignPerson = ref<Record<string, any> | null>(null);
-
-/**
- * WHO A CARD CAN BE GIVEN TO.
- *
- * The dialog only ever listed the unit's residents and tenants. Management
- * (the site's own members) and Service Providers hold cards on a site too, so
- * the operator picks the group first and then the person.
- *
- * `value` is only ever read here; nothing is sent to the server, which takes a
- * flat list of user ids and does not know about these groups.
- */
-type AssignCategory = "residents" | "management" | "providers";
-
-const assignCategories: { value: AssignCategory; label: string }[] = [
-  { value: "residents", label: "Resident / Tenant" },
-  { value: "management", label: "Management" },
-  { value: "providers", label: "Service Provider" },
-];
-
-const assignCategory = ref<AssignCategory>("residents");
-
-/**
- * One row shape for all three groups, so the picker does not care which it is
- * showing.
- *
- * `assigneeId` is the person's USER id - the id `assignUser` sends and the
- * server writes onto the card. Residents already come from the users
- * collection, and a member row carries its `user`. A row that cannot supply
- * one keeps `assigneeId: ""`, which is what disables Assign for it rather than
- * sending an id that binds the card to nobody.
- */
-type AssignRow = {
-  assigneeId: string;
-  name: string;
-  /** Second line - the email, or what kind of resident this is. */
-  subtitle: string;
-  /** Third line, under the subtitle - the member's role or the provider's service. */
-  meta?: string;
-  raw: Record<string, any>;
-};
-
-const assignPeopleItems = ref<AssignRow[]>([]);
+const peopleItems = ref<Record<string, any>[]>([]);
 const peopleLoading = ref(false);
 const assignLoading = ref(false);
 const assignError = ref("");
@@ -542,6 +452,12 @@ const isSelectedCardDeletable = computed(() => {
   ].some((c) => c._id === id);
 });
 
+const filteredPeopleItems = computed(() => {
+  if (!assignPersonType.value) return peopleItems.value;
+  if (assignPersonType.value === "owner") return peopleItems.value.filter((p) => p.isOwner);
+  return peopleItems.value.filter((p) => p.type === assignPersonType.value && !p.isOwner);
+});
+
 const personTypeLabel = (person: Record<string, any>) => {
   if (person.isOwner) return "Unit Owner";
   if (person.type === "resident") return "Resident";
@@ -549,168 +465,34 @@ const personTypeLabel = (person: Record<string, any>) => {
   return person.type ?? "";
 };
 
-const assignNoDataText = computed(() => {
-  if (peopleLoading.value) return "Loading...";
-  if (assignCategory.value === "management") return "No management members assigned to this unit";
-  if (assignCategory.value === "providers") return "No service providers assigned to this unit";
-  return "No residents or tenants found for this unit";
-});
-
-const assignUnassignableText = computed(() =>
-  assignCategory.value === "providers"
-    ? "A card is held by a person, and this is the provider company. Assigning to service providers needs the server to say which account the card belongs to."
-    : "This person has no user account, so a card cannot be assigned to them.",
-);
-
-/** Residents and tenants of THIS UNIT - the list the dialog has always shown. */
-async function loadResidentRows(): Promise<AssignRow[]> {
-  if (!props.unit?._id || !props.orgId || !props.siteId) return [];
-  const res = await getResidents({
-    orgId: props.orgId,
-    siteId: props.siteId,
-    unitId: props.unit._id,
-  });
-  const rows = res?.data ?? [];
-  return rows.map((person: Record<string, any>) => ({
-    // Already the users collection's own `_id` - see core's residents repo.
-    assigneeId: String(person._id ?? ""),
-    name: person.name ?? "",
-    subtitle: person.email ?? "",
-    meta: personTypeLabel(person),
-    raw: person,
-  }));
-}
-
-/**
- * Management - the site's own members ATTACHED TO THIS UNIT.
- *
- * `unit` comes from core #2515 (Unit Management tab), which gave members a
- * `unit`/`unitName` and taught `GET /api/members` to filter on it. Narrowing
- * to the unit matches what the card is: it belongs to a unit, so the people
- * offered are the ones that unit has.
- *
- * `type` is the member type of whichever app this layer is running in
- * (`property_management_agency`, `security_agency`, ...) - the endpoint
- * requires it and rejects an empty string, and `limit` is capped at 50 there.
- */
-async function loadManagementRows(): Promise<AssignRow[]> {
-  if (!props.orgId || !props.siteId || !props.unit?._id) return [];
-  const res: any = await getMembers({
-    org: props.orgId,
-    siteId: props.siteId,
-    unit: props.unit._id,
-    type: String(useRuntimeConfig().public.APP ?? ""),
-    status: "active",
-    page: 1,
-    limit: 50,
-  });
-  const rows: Record<string, any>[] = res?.items ?? res?.data ?? [];
-  return rows.map((member) => ({
-    // `user` is the account; `_id` is the membership record and is NOT it.
-    assigneeId: String(member.user ?? ""),
-    name: member.name ?? member.email ?? "",
-    // One line under the name: "Access Mgmt Only · towefa4573@aghism.com".
-    // The role first, because that is what distinguishes two members of the
-    // same unit from each other. Either half is dropped if the row lacks it,
-    // so the separator never dangles.
-    subtitle: [member.roleName, member.email].filter(Boolean).join(" · "),
-    raw: member,
-  }));
-}
-
-/**
- * Service Providers ATTACHED TO THIS UNIT.
- *
- * `GET /api/service-providers?siteId&status=active&unit=<id>` - the same list
- * and the same unit filter the Unit Management tab uses (core #2515), so the
- * providers offered are the ones this unit actually has.
- *
- * These rows are COMPANIES, not people: the list has `name`, `email` and the
- * service `type`, and there is no user account behind a company. See
- * `assigneeId` below.
- */
-async function loadProviderRows(): Promise<AssignRow[]> {
-  if (!props.siteId || !props.unit?._id) return [];
-  const res: any = await getServiceProviders({
-    siteId: props.siteId,
-    unit: props.unit._id,
-    status: "active",
-    page: 1,
-    limit: 50,
-  });
-  const rows: Record<string, any>[] = res?.items ?? [];
-  return rows.map((provider) => ({
-    /*
-     * Empty on purpose, and not a missing field: a card is assigned by writing
-     * a USER id onto it, and a provider company has no user account. Which id a
-     * company-held card should carry - the `service-providers` row, the
-     * provider `orgId`, or a person from that company - is a backend decision
-     * that has not been made. Sending one anyway would write an id the server
-     * stores without checking and that matches no user.
-     */
-    assigneeId: "",
-    name: provider.name ?? "",
-    subtitle: provider.email ?? "",
-    // The service code is a database value; show what people call it.
-    meta: serviceTypeLabel(provider.type),
-    raw: provider,
-  }));
-}
-
-/** Load the chosen group, dropping a response that a later switch superseded. */
-let assignLoadSeq = 0;
-async function loadAssignPeople() {
-  const seq = ++assignLoadSeq;
-  const category = assignCategory.value;
-  peopleLoading.value = true;
-  assignPeopleItems.value = [];
-  try {
-    const rows =
-      category === "management"
-        ? await loadManagementRows()
-        : category === "providers"
-          ? await loadProviderRows()
-          : await loadResidentRows();
-    if (seq !== assignLoadSeq) return;
-    assignPeopleItems.value = rows;
-  } catch {
-    if (seq !== assignLoadSeq) return;
-    assignPeopleItems.value = [];
-  } finally {
-    if (seq === assignLoadSeq) peopleLoading.value = false;
-  }
-}
-
-function onAssignCategoryChange() {
-  assignPerson.value = null;
-  assignError.value = "";
-  loadAssignPeople();
-}
-
 async function openAssignForm() {
   showAssignForm.value = true;
   assignPerson.value = null;
-  assignCategory.value = "residents";
+  assignPersonType.value = "";
   assignError.value = "";
-  assignPeopleItems.value = [];
+  peopleItems.value = [];
   encryptedAcmUrl.value = "";
 
   if (!props.unit?._id || !props.orgId || !props.siteId) return;
-
-  // The ACM URL is needed whichever group the card goes to, so it is fetched
-  // once here rather than with each list.
-  getEncryptedAcmUrl(props.siteId)
-    .then((url) => { encryptedAcmUrl.value = url ?? ""; })
-    .catch(() => { encryptedAcmUrl.value = ""; });
-
-  await loadAssignPeople();
+  peopleLoading.value = true;
+  try {
+    const [residentsRes, acmUrl] = await Promise.all([
+      getResidents({ orgId: props.orgId, siteId: props.siteId, unitId: props.unit._id }),
+      getEncryptedAcmUrl(props.siteId),
+    ]);
+    peopleItems.value = residentsRes?.data ?? [];
+    encryptedAcmUrl.value = acmUrl ?? "";
+  } catch {
+    peopleItems.value = [];
+  } finally {
+    peopleLoading.value = false;
+  }
 }
 
 function cancelAssign() {
   showAssignForm.value = false;
   assignPerson.value = null;
-  assignCategory.value = "residents";
-  assignPeopleItems.value = [];
+  assignPersonType.value = "";
   assignError.value = "";
 }
 
@@ -725,16 +507,12 @@ const selectedCardType = computed(() => {
 });
 
 async function confirmAssign() {
-  // `assigneeId` rather than `_id`: the rows now come from three different
-  // lists and only this field is the user account the card is written to. The
-  // Assign button is already disabled without one; this is the guard behind it.
-  const assigneeId = assignPerson.value?.assigneeId;
-  if (!assigneeId || !props.unit?._id) return;
+  if (!assignPerson.value || !props.unit?._id) return;
   assignLoading.value = true;
   assignError.value = "";
   try {
     await assignUser({
-      assignees: [assigneeId],
+      assignees: [assignPerson.value._id],
       unit: props.unit._id,
       type: selectedCardType.value,
       acm_url: encryptedAcmUrl.value,
@@ -742,9 +520,7 @@ async function confirmAssign() {
     });
     emit("assign-to-person", {
       card: props.selectedCardInUnit,
-      // The original record, not the picker's row, so listeners see the same
-      // shape they always have.
-      person: assignPerson.value?.raw ?? assignPerson.value,
+      person: assignPerson.value,
     });
     showToast("Card assigned successfully.", "success");
     cancelAssign();
@@ -768,15 +544,3 @@ function toggleCard(card: Record<string, any>) {
   );
 }
 </script>
-
-<style scoped>
-/* The chosen person, two lines inside the field. `min-width: 0` is what lets
-   `text-truncate` work at all here - the selection sits in a flex row, and a
-   flex child will not shrink below its content without it, so a long email
-   would push the field wide instead of ellipsing. */
-.assign-selection {
-  min-width: 0;
-  line-height: 1.25;
-  padding-block: 2px;
-}
-</style>

package/components/AppSelect.vue

@@ -18,8 +18,7 @@
 <template>
   <v-menu
     v-if="!multiple"
-    v-model="singleOpen"
-    :close-on-content-click="!searchable"
+    :close-on-content-click="true"
     :disabled="disabled"
     location="bottom start"
     offset="4"
@@ -54,21 +53,8 @@
     </template>
 
     <div class="app-select__menu" role="listbox">
-      <div v-if="searchable" class="app-select__search">
-        <v-icon icon="mdi-magnify" size="16" />
-        <input
-          ref="singleSearchInput"
-          v-model="search"
-          type="text"
-          class="app-select__search-input"
-          :placeholder="searchPlaceholder"
-          aria-label="Search options"
-          @keydown.enter.prevent="selectFirstMatch"
-          @keydown.esc.stop="singleOpen = false"
-        >
-      </div>
       <button
-        v-for="opt in visibleOptions"
+        v-for="opt in normalized"
         :key="String(opt.value)"
         type="button"
         class="app-select__option"
@@ -80,9 +66,6 @@
         <span class="app-select__option-text">{{ opt.title }}</span>
         <v-icon v-if="isSingleOn(opt)" icon="mdi-check" size="17" />
       </button>
-      <p v-if="searchable && !visibleOptions.length" class="app-select__empty">
-        {{ normalized.length ? "No matches" : "Nothing to choose from" }}
-      </p>
     </div>
   </v-menu>
 
@@ -139,18 +122,8 @@
     </template>
 
     <div class="app-select__menu">
-      <div v-if="searchable" class="app-select__search">
-        <v-icon icon="mdi-magnify" size="16" />
-        <input
-          v-model="search"
-          type="text"
-          class="app-select__search-input"
-          :placeholder="searchPlaceholder"
-          aria-label="Search options"
-        >
-      </div>
       <button
-        v-for="opt in visibleOptions"
+        v-for="opt in normalized"
         :key="String(opt.value)"
         type="button"
         class="app-select__option"
@@ -165,9 +138,6 @@
         />
         <span class="app-select__option-text">{{ opt.title }}</span>
       </button>
-      <p v-if="searchable && !visibleOptions.length" class="app-select__empty">
-        {{ normalized.length ? "No matches" : "Nothing to choose from" }}
-      </p>
     </div>
   </v-menu>
 </template>
@@ -198,13 +168,6 @@ const props = defineProps({
   returnObject: { type: Boolean, default: false },
   clearable: { type: Boolean, default: false },
   placeholder: { type: String, default: "" },
-  /**
-   * A filter box at the top of the popover. Opt-in, so the 44 consumers that
-   * do not ask for it render exactly the DOM they render today - a list short
-   * enough to read does not want a search field in front of it.
-   */
-  searchable: { type: Boolean, default: false },
-  searchPlaceholder: { type: String, default: "Search" },
 });
 
 const normalized = computed(() =>
@@ -215,38 +178,6 @@ const normalized = computed(() =>
   )
 );
 
-/* ---- search ---------------------------------------------------------- */
-
-const search = ref("");
-const singleOpen = ref(false);
-const singleSearchInput = ref<HTMLInputElement | null>(null);
-
-/* Case-insensitive substring over what the option READS AS, not its value:
-   the title is the only part the user can see to type. */
-const visibleOptions = computed(() => {
-  const term = search.value.trim().toLowerCase();
-  if (!props.searchable || !term) return normalized.value;
-  return normalized.value.filter((opt) =>
-    String(opt.title ?? "").toLowerCase().includes(term)
-  );
-});
-
-/* A stale term would hide the list the next time the popover opens, so it is
-   dropped on every open - and the caret goes into the box, since opening a
-   searchable select is almost always a prelude to typing. */
-watch(singleOpen, async (open) => {
-  if (!props.searchable) return;
-  search.value = "";
-  if (!open) return;
-  await nextTick();
-  singleSearchInput.value?.focus();
-});
-
-function selectFirstMatch() {
-  const [first] = visibleOptions.value;
-  if (first) selectSingle(first);
-}
-
 /* A model entry is either the plain value or - under `return-object` - the
    source item, so everything compares on this one key. */
 const keyOf = (v: any) =>
@@ -274,11 +205,6 @@ const isSingleOn = (opt: any) =>
 function selectSingle(opt: any) {
   if (props.disabled) return;
   model.value = props.returnObject ? opt.raw : String(opt.value);
-  // `close-on-content-click` has to be OFF while searching - it fires on the
-  // click that puts the caret in the search box, so the popover would shut the
-  // moment it was typed into. With it off, picking an option has to close the
-  // popover by hand.
-  if (props.searchable) singleOpen.value = false;
 }
 
 function clearSingle() {

package/components/BuildingUnitFormEdit.vue

@@ -10,7 +10,6 @@
         <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>
@@ -171,11 +170,6 @@
         </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">