@7365admin1/layer-common 4.82.1-staging.476 → 4.84.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.84.0
+
+### Minor Changes
+
+- 57abba1: Suspended access: when the API answers ACCESS_SUSPENDED (every membership of the person is suspended), the app signs out and the sign-in page shows the server's message. Role names are unique per site, so role pickers and the roles table show "Admin · St. Regis Residences" (`roleLabel`), and the Members role chip uses the same "Role · Site" form.
+
+## 4.83.0
+
+### Minor Changes
+
+- b69f1d9: "Open as Seven365 staff": persistent staff-view banner with Exit in every app's top bar, and staff in an open view work at that client with full setup rights without a membership.
+
 ## 4.82.0
 
 ### Minor Changes
@@ -1962,11 +1974,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,63 +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;
-}
-
-/* The footer of a paging AppSelect. Same voice as the empty state - it is the
-   same kind of message about the list rather than an option in it - with a rule
-   above so it does not read as one more row to click. */
-.app-select__loading {
-  margin: 6px 0 0;
-  padding: 9px 8px;
-  border-top: 1px solid var(--border);
-  font-family: var(--font-sans);
-  font-size: var(--fs-cell);
-  font-weight: 600;
-  color: var(--muted);
-  text-align: center;
-}
-
 .app-select__option {
   display: flex;
   align-items: center;

package/assets/css/screens.css

@@ -809,14 +809,10 @@
   color: var(--muted);
 }
 
-/* The title-row search beside the primary button. `--search` alone is
-   `flex: 1`, written for a filter row; in the actions group that collapses it,
-   so it gets a fixed width here and never more than the row on a phone. */
-.table-card__search.app-field--search {
-  flex: 0 0 auto;
-  width: 260px;
-  max-width: 100%;
-  min-width: 0;
+/* The in-card variant: 34px, 10px radius, as drawn. */
+.table-card__search .v-field {
+  border-radius: var(--r-inner);
+  font-size: var(--fs-cell);
 }
 
 .table-card__primary {

package/components/AccessCardDetailsDialog.vue

@@ -47,22 +47,14 @@
           <div>
             <div class="card-details__label">User</div>
             <div class="card-details__value">
-              <template v-if="holderState === 'named'">
-                {{ holderName }}
-                <template v-if="details.user?.email">({{ details.user.email }})</template>
-              </template>
-              <!-- Assigned, but the server did not send the name back. Saying
-                   so beats "N/A", which reads as "nobody holds this card". -->
-              <template v-else-if="holderState === 'assigned'">
-                <span class="text-medium-emphasis">Assigned — name unavailable</span>
-              </template>
-              <template v-else>Unassigned</template>
+              {{ details.userCred?.name ?? details.user?.name ?? "N/A" }}
+              <template v-if="details.user?.email">({{ details.user.email }})</template>
             </div>
           </div>
 
-          <div v-if="holderType">
+          <div v-if="details.userType">
             <div class="card-details__label">User Type</div>
-            <div class="card-details__value">{{ holderType }}</div>
+            <div class="card-details__value">{{ details.userType }}</div>
           </div>
 
           <!-- Visitor / Resident Credentials -->
@@ -224,51 +216,6 @@ const sortedHistory = computed(() =>
   )
 );
 
-/**
- * WHO HOLDS THIS CARD.
- *
- * `userCred` is written by the visitor-pass flow and carries the person's
- * details on the card itself. `user` is the resolved account - the card only
- * stores `userId`, so the server has to join it.
- *
- * `card-details` does not do that join today (the lookup is commented out in
- * core's `getCardDetailsRepo`), so this is empty for every card assigned
- * through Assign to Person and the field falls through to `holderState`.
- * Nothing here needs to change when the join is restored.
- */
-const holderName = computed(
-  () => details.value?.userCred?.name ?? details.value?.user?.name ?? "",
-);
-
-/**
- * A card with a `userId` IS assigned, whether or not the name came back.
- *
- * Printing "N/A" for both cases is the actual defect here: it reads as "nobody
- * holds this card", which is the opposite of the truth for an assigned one and
- * could have someone hand out a card that is already in use.
- */
-const holderState = computed<"named" | "assigned" | "unassigned">(() => {
-  if (holderName.value) return "named";
-  return details.value?.userId ? "assigned" : "unassigned";
-});
-
-/**
- * WHICH KIND OF PERSON HOLDS THIS CARD — Visitor/Resident, Management or
- * Service Provider, matching the groups Assign to Person offers.
- *
- * `holderType` is what the server should send once it records the category the
- * card was assigned under. `userType` is NOT that: it is the card's own pool,
- * and `getCardDetailsRepo` filters on `EAccessCardUserTypes.DEFAULT`, so every
- * card this dialog can load has the literal value "Visitor/Resident" whoever
- * actually holds it. Preferring `holderType` means a card given to Management
- * stops describing itself as a resident's the day the field arrives.
- *
- * Falls back to `userType` so nothing disappears in the meantime.
- */
-const holderType = computed(
-  () => details.value?.holderType ?? details.value?.userType ?? "",
-);
-
 watch(
   () => props.modelValue,
   async (val) => {

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 { getSiteMembers } = 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,173 +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 provider members assigned to this unit";
-  return "No residents or tenants found for this unit";
-});
-
-const assignUnassignableText = computed(
-  () => "This person has no account on record, 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 - the provider PEOPLE attached to this unit.
- *
- * `GET /api/service-providers/site-members?siteId&unit=<id>`. A card is held by
- * a person, so this lists provider staff rather than the companies
- * `GET /api/service-providers` returns, and the `unit` filter keeps it to the
- * people that unit actually has - the same scoping Management uses.
- *
- * The response also carries a `companies` summary; only `items` is people.
- */
-async function loadProviderRows(): Promise<AssignRow[]> {
-  if (!props.siteId || !props.unit?._id) return [];
-  const res = await getSiteMembers(props.siteId, props.unit._id);
-  const rows = res?.items ?? [];
-  return rows.map((member: Record<string, any>) => ({
-    /*
-     * `user` when the endpoint returns it, otherwise the MEMBERSHIP `_id`.
-     *
-     * `site-members` does not carry `user` today (the repository projects it,
-     * the service layer drops it), and the product decision is to assign on
-     * `_id` rather than wait. Worth knowing what that means: the card's
-     * `userId` then holds a `service-provider-members` id, so the card list's
-     * `userId -> users` lookup finds nothing and the holder column reads blank
-     * for these cards. The door access itself is unaffected - the ACM command
-     * is built from the CARD's id, not the assignee's.
-     *
-     * `user` is preferred so that the day it starts arriving, these cards
-     * begin resolving to real people with no change here.
-     */
-    assigneeId: String(member.user ?? member._id ?? ""),
-    name: member.name || member.email || "",
-    subtitle: member.email ?? "",
-    /*
-     * The service the company provides, plus this person's role - two people
-     * from the same company differ only by role ("VMS Access" vs "Security
-     * Access"). `typeLabel` is computed by the endpoint; the local converter is
-     * the fallback for a row that predates it.
-     */
-    meta:
-      [member.typeLabel || serviceTypeLabel(member.type), member.role]
-        .filter(Boolean)
-        .join(" · "),
-    raw: member,
-  }));
-}
-
-/** 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 = "";
 }
 
@@ -730,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,
@@ -747,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();
@@ -773,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>