@7365admin1/layer-common 3.2.2-staging.106 → 3.2.2-staging.108

package/components/CreateSubsciptionPlan.vue

@@ -1,22 +1,12 @@
 <template>
-  <v-card class="pa-2">
+  <v-card class="pa-2 pb-0">
     <!-- Header -->
-    <v-card-title class="d-flex align-center justify-space-between pb-2">
+    <v-card-title class="pb-2">
       <span class="text-h6 font-weight-bold">
         {{ isEditing ? "Edit Plan" : "Create New Plan" }}
       </span>
-
-      <v-btn
-        icon="mdi-close"
-        variant="text"
-        density="comfortable"
-        aria-label="Close"
-        @click="$emit('cancel')"
-      />
     </v-card-title>
 
-    <v-divider />
-
     <!-- Form Content -->
     <v-form ref="formRef" class="my-4" @submit.prevent="submit">
       <v-card-text class="pa-2 max-h-70vh overflow-y-auto">
@@ -68,8 +58,6 @@
           </template>
         </v-text-field>
 
-        <v-divider class="my-4" />
-
         <!-- Pricing Section -->
         <div class="text-subtitle-2 font-weight-bold mb-3 text-grey-darken-3">
           Pricing
@@ -116,14 +104,14 @@
             selected-class="bg-grey-darken-3 text-white"
           >
             <v-chip
-              v-for="app in AVAILABLE_APPLICATIONS"
-              :key="app.id"
-              :value="app.id"
+              v-for="app in APP_LIST"
+              :key="app.value"
+              :value="app.value"
               filter
               variant="outlined"
               size="small"
             >
-              {{ app.name }}
+              {{ app.title }}
             </v-chip>
           </v-chip-group>
         </div>
@@ -155,26 +143,37 @@
           <v-card variant="outlined" class="pa-1 mb-3">
             <v-list density="compact" class="py-0">
               <v-list-item
-                v-for="app in AVAILABLE_APPLICATIONS"
-                :key="app.id"
+                v-for="app in APP_LIST"
+                :key="app.value"
                 class="px-2"
               >
                 <template #prepend>
                   <v-checkbox-btn
-                    :model-value="form.customApps.includes(app.id)"
+                    :model-value="form.customApps.includes(app.value)"
                     density="compact"
-                    @update:model-value="toggleApp(form.customApps, app.id)"
+                    @update:model-value="toggleApp(form.customApps, app.value)"
                   />
                 </template>
 
                 <v-list-item-title class="text-body-2">
-                  {{ app.name }}
+                  {{ app.title }}
                 </v-list-item-title>
 
                 <template #append>
-                  <span class="text-caption text-grey">
-                    ${{ form.billingCycle === 'annually' ? app.yearlyPrice : app.monthlyPrice }}/{{ form.billingCycle === 'annually' ? 'yr' : 'mo' }}
-                  </span>
+                  <div class="d-flex align-center" style="gap: 4px">
+                    <span class="text-caption text-grey">$</span>
+                    <v-text-field
+                      v-model.number="form.customAppPrices[app.value]"
+                      type="number"
+                      min="0"
+                      density="compact"
+                      variant="outlined"
+                      hide-details
+                      style="width: 84px"
+                      :disabled="!form.customApps.includes(app.value)"
+                    />
+                    <span class="text-caption text-grey">/{{ form.billingCycle === 'annually' ? 'yr' : 'mo' }}</span>
+                  </div>
                 </template>
               </v-list-item>
             </v-list>
@@ -211,28 +210,21 @@
         </v-alert>
       </v-card-text>
 
-      <v-divider />
-
       <!-- Footer Buttons -->
-      <v-card-actions class="pt-3 px-2">
-        <v-btn
-          variant="outlined"
-          color="grey-darken-1"
-          class="flex-1 text-none"
-          @click="$emit('cancel')"
-        >
-          Cancel
-        </v-btn>
-
-        <v-btn
-          type="submit"
-          color="grey-darken-4"
-          variant="flat"
-          class="flex-1 text-none"
-        >
-          {{ isEditing ? "Save Changes" : "Create Plan" }}
-        </v-btn>
-      </v-card-actions>
+      <v-toolbar density="compact">
+        <v-row no-gutters>
+          <v-col cols="6">
+            <v-btn tile block variant="text" class="text-none" size="48" @click="$emit('cancel')">
+              Cancel
+            </v-btn>
+          </v-col>
+          <v-col cols="6">
+            <v-btn tile block type="submit" variant="flat" color="primary" class="text-none" size="48">
+              {{ isEditing ? "Save Changes" : "Create Plan" }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
     </v-form>
   </v-card>
 </template>
@@ -241,7 +233,9 @@
 import { reactive, computed, watch } from "vue";
 
 import {
-  AVAILABLE_APPLICATIONS,
+  APP_LIST,
+  STATIC_APP_MONTHLY_PRICE,
+  STATIC_APP_YEARLY_PRICE,
   type PlanFormState,
   type SubscriptionPlan,
 } from "../types/subscription";
@@ -284,6 +278,14 @@ const form = reactive<PlanFormState>({
     props.initialPlan?.planType === "custom_apps"
       ? [...(props.initialPlan?.applicationIds ?? [])]
       : [],
+  customAppPrices: Object.fromEntries(
+    APP_LIST.map((app) => [
+      app.value,
+      props.initialPlan?.billingCycle === "annually"
+        ? STATIC_APP_YEARLY_PRICE
+        : STATIC_APP_MONTHLY_PRICE,
+    ])
+  ),
 });
 
 const errors = reactive({
@@ -304,6 +306,29 @@ watch(
   }
 );
 
+function staticPriceForCycle(cycle: typeof form.billingCycle) {
+  return cycle === "annually" ? STATIC_APP_YEARLY_PRICE : STATIC_APP_MONTHLY_PRICE;
+}
+
+/*
+ * Keep custom app prices in sync with the billing cycle, but only for
+ * apps still sitting at the previous cycle's default (leave manual edits alone)
+ */
+watch(
+  () => form.billingCycle,
+  (newCycle, oldCycle) => {
+    const oldDefault = staticPriceForCycle(oldCycle);
+    const newDefault = staticPriceForCycle(newCycle);
+    if (oldDefault === newDefault) return;
+
+    for (const app of APP_LIST) {
+      if (form.customAppPrices[app.value] === oldDefault) {
+        form.customAppPrices[app.value] = newDefault;
+      }
+    }
+  }
+);
+
 /*
  * Toggle application selection helper
  */
@@ -320,15 +345,10 @@ function toggleApp(list: string[], id: string) {
  * Custom app total price calculation
  */
 const customTotalPrice = computed(() => {
-  return form.customApps.reduce((total, id) => {
-    const app = AVAILABLE_APPLICATIONS.find((item) => item.id === id);
-    if (!app) return total;
-
-    return (
-      total +
-      (form.billingCycle === "annually" ? app.yearlyPrice : app.monthlyPrice)
-    );
-  }, 0);
+  return form.customApps.reduce(
+    (total, value) => total + (form.customAppPrices[value] ?? 0),
+    0
+  );
 });
 
 /*
@@ -340,6 +360,11 @@ function validate(): boolean {
 
   if (form.planType !== "free_bundle" && !form.billingCycle) {
     errors.pricing = "Please select a billing cycle.";
+  } else if (
+    (form.planType === "free_bundle" || form.planType === "paid_bundle") &&
+    form.bundleApps.length === 0
+  ) {
+    errors.pricing = "Select at least one application.";
   } else if (
     form.planType === "paid_bundle" &&
     (!form.bundlePrice || form.bundlePrice <= 0)

package/components/EntryPassInformation.vue

@@ -166,8 +166,28 @@
       </template>
 
       <template v-if="passType === 'HID_QR'">
+        <v-card variant="tonal" color="primary" class="mt-3 pa-3" rounded="lg">
+          <div class="d-flex align-center ga-3">
+            <v-icon icon="mdi-door-open" size="28" />
+            <div>
+              <div class="text-caption text-medium-emphasis">Access Reader</div>
+              <div class="text-subtitle-2 font-weight-bold">{{ hidReaderName || "Reader not configured" }}</div>
+              <div class="text-caption mt-1">Access Portal: {{ hidPortalName || "Portal not configured" }}</div>
+            </div>
+          </div>
+        </v-card>
+        <v-alert
+          v-if="!hidPortalName"
+          type="warning"
+          variant="tonal"
+          density="compact"
+          class="mt-3"
+          icon="mdi-alert"
+        >
+          Reconnect this HID reader and select a portal before generating a visitor QR code.
+        </v-alert>
         <v-alert
-          v-if="!hidQrPrinterConfigured"
+          v-else-if="!hidQrPrinterConfigured"
           type="info"
           variant="tonal"
           density="compact"
@@ -283,6 +303,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hidReaderName: {
+    type: String,
+    default: "",
+  },
+  hidPortalName: {
+    type: String,
+    default: "",
+  },
   excludedCardIds: {
     type: Array as PropType<string[]>,
     default: () => [],

package/components/HidAccessLogDashboard.vue

@@ -12,7 +12,7 @@
       </v-btn>
 
       <v-select
-        v-if="readers.length > 1"
+        v-if="readers.length"
         v-model="selectedReaderId"
         :items="readerOptions"
         item-title="title"
@@ -412,7 +412,7 @@ const accessMethodOptions = ["All", "Facial", "QR Code", "ID and Password", "PIN
 
 const readerOptions = computed(() =>
   readers.value.map((reader) => ({
-    title: reader.name || reader.deviceId || reader._id,
+    title: `${reader.name || reader.deviceId || reader._id} — ${reader.portalName || "Portal not configured"}`,
     value: reader._id,
   })),
 );
@@ -582,7 +582,6 @@ async function loadDashboard() {
   loading.value = true;
   resetDashboardData();
   try {
-    const isAdministratorTab = activeTab.value === "administrator";
     const isVisitorTab = activeTab.value === "visitor";
     const [identityResponse, logResponse, hidAccessLogs, configurationResponse, roleResponse, visitorResponse, readerUserResponse] = await Promise.all([
       loadDashboardSource(
@@ -603,9 +602,7 @@ async function loadDashboard() {
       ),
       loadDashboardSource(loadLiveAccessLogs(selectedReaderId.value), [], "live access logs"),
       loadDashboardSource(loadReaderConfiguration(selectedReaderId.value), {}, "reader configuration"),
-      isAdministratorTab
-        ? loadDashboardSource(loadAdministratorRoles(selectedReaderId.value), null, "administrator roles")
-        : Promise.resolve(null),
+      loadDashboardSource(loadAdministratorRoles(selectedReaderId.value), null, "administrator roles"),
       isVisitorTab && props.org
         ? loadDashboardSource(
             getVisitors({
@@ -632,14 +629,9 @@ async function loadDashboard() {
     );
     administratorUserIds.value = getAdministratorRoleUserIds(roleResponse);
     allIdentities.value = mergedIdentities;
-    identities.value = isAdministratorTab
-      ? mergedIdentities.filter((identity: Record<string, any>) => {
-          const hidUserId = toHidNumericId(identity.hidUserId);
-          return Boolean(hidUserId && administratorUserIds.value.has(hidUserId));
-        })
-      : activeTab.value === "visitor"
-        ? mergedIdentities.filter(isVisitorIdentity)
-        : mergedIdentities.filter((identity: Record<string, any>) => !isVisitorIdentity(identity));
+    identities.value = mergedIdentities.filter(
+      (identity: Record<string, any>) => classifyIdentity(identity) === activeTab.value,
+    );
     logs.value = logResponse?.items ?? logResponse?.data?.items ?? logResponse?.data?.logs ?? [];
     liveAccessLogs.value = hidAccessLogs;
     readerConfiguration.value = normalizeReaderConfiguration(configurationResponse);
@@ -781,8 +773,10 @@ function normalizeHidUsers(response: Record<string, any>) {
         registration: user.registration,
         cardNo: user.card_value || user.cardNo || "",
         name: user.name,
+        hidUserTypeId: user.user_type_id,
         metadata: {
           name: user.name,
+          hidUserTypeId: user.user_type_id,
           imageTimestamp: user.image_timestamp ? String(user.image_timestamp) : "",
           hidReaderSource: true,
         },
@@ -835,21 +829,22 @@ function resetDashboardData() {
 
 function isVisibleForActiveTab(row: AccessRow) {
   const identity = findIdentityByKey(row.identityKey);
-  const isVisitor = row.identityType === "visitor" || Boolean(row.visitorId) || isVisitorIdentity(identity);
-  if (activeTab.value === "visitor") {
-    return isVisitor;
-  }
-
-  if (activeTab.value === "administrator") {
-    const hidUserId = toHidNumericId(identity?.hidUserId ?? row.identityKey.split("|")[0]);
-    return Boolean(hidUserId && administratorUserIds.value.has(hidUserId));
-  }
-
-  return !isVisitor;
+  return classifyIdentity(identity, row) === activeTab.value;
 }
 
 function isVisitorIdentity(identity: Record<string, unknown> | undefined) {
-  return Boolean(identity && (identity.type === "visitor" || identity.visitor));
+  return Boolean(identity && (
+    identity.type === "visitor"
+    || identity.visitor
+    || Number(identity.hidUserTypeId ?? (identity.metadata as Record<string, unknown> | undefined)?.hidUserTypeId) === 1
+  ));
+}
+
+function classifyIdentity(identity?: Record<string, any>, row?: AccessRow): AccessTab {
+  const hidUserId = toHidNumericId(identity?.hidUserId ?? row?.identityKey.split("|")[0]);
+  if (hidUserId && administratorUserIds.value.has(hidUserId)) return "administrator";
+  if (row?.identityType === "visitor" || row?.visitorId || isVisitorIdentity(identity)) return "visitor";
+  return "resident";
 }
 
 function loadAdministratorRoles(readerId: string) {
@@ -1200,7 +1195,18 @@ function getRawAccessLogs(event: Record<string, any>) {
     payload.access_logs ||
     payload.accessLogs;
 
-  return Array.isArray(accessLogs) ? accessLogs : [];
+  if (Array.isArray(accessLogs)) return accessLogs;
+
+  const objectChanges = payload.object_changes || result.object_changes || [];
+  return Array.isArray(objectChanges)
+    ? objectChanges
+        .filter((change: Record<string, any>) => (
+          change?.object === "access_logs"
+          && change?.type !== "deleted"
+          && change?.values
+        ))
+        .map((change: Record<string, any>) => change.values)
+    : [];
 }
 
 function mapAccessLogToRow(rawLog: Record<string, any>, event: Record<string, any>, index: string): AccessRow {
@@ -1212,7 +1218,9 @@ function mapAccessLogToRow(rawLog: Record<string, any>, event: Record<string, an
   return {
     key: `${event._id || event.id || "log"}-${rawLog.id || rawLog.time || index}`,
     identityKey,
-    identityType: String(identity?.type || eventIdentity.type || "").toLowerCase() || undefined,
+    identityType: identity
+      ? classifyIdentity(identity)
+      : String(eventIdentity.type || "").toLowerCase() || undefined,
     visitorId: String(identity?.visitor || eventIdentity.visitor || "") || undefined,
     name: identity ? getName(identity) : getRawLogName(rawLog, event),
     facialData: identity ? getFacialData(identity) : "N/A",
@@ -1276,7 +1284,12 @@ function findIdentityForAccessLog(rawLog: Record<string, any>, event: Record<str
   const eventIdentityId = event.payload?.identity?._id;
   if (eventIdentityId) {
     const byId = allIdentities.value.find((identity) => String(identity._id) === String(eventIdentityId));
-    if (byId) return byId;
+    const rawUserId = rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId;
+    if (byId && (
+      rawUserId === undefined
+      || rawUserId === null
+      || String(byId.hidUserId) === String(rawUserId)
+    )) return byId;
   }
 
   const hidUserId = rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId ?? event.payload?.identity?.hidUserId ?? event.payload?.identityLookup?.hidUserId;

package/components/HidIntercomManagement.vue

@@ -24,6 +24,19 @@
         {{ webPhone.callState.value === 'incoming' ? 'Incoming Call' : 'Web Call' }}
       </v-btn>
 
+      <v-select
+        v-if="readers.length"
+        v-model="selectedReaderId"
+        :items="readerOptions"
+        item-title="title"
+        item-value="value"
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="reader-input"
+        @update:model-value="page = 1"
+      />
+
       <div class="toolbar-spacer" />
 
       <v-text-field
@@ -702,6 +715,7 @@ const {
 
 const activeTab = ref<IntercomTab>("intercom");
 const readers = ref<Record<string, any>[]>([]);
+const selectedReaderId = ref("");
 const intercomRows = ref<IntercomRow[]>([]);
 const contacts = ref<ContactRow[]>([]);
 const loading = ref(false);
@@ -821,6 +835,11 @@ const contactForm = reactive({
   serverAddress: "",
 });
 
+const readerOptions = computed(() => readers.value.map((reader) => ({
+  title: `${reader.name || reader.deviceId || reader._id} — ${reader.portalName || "Portal not configured"}`,
+  value: reader._id,
+})));
+
 const visibleRows = computed(() => activeTab.value === "intercom" ? filteredIntercomRows.value : filteredContacts.value);
 const pages = computed(() => Math.max(1, Math.ceil(visibleRows.value.length / limit)));
 const pageRange = computed(() => {
@@ -834,6 +853,7 @@ const pageRange = computed(() => {
 const filteredIntercomRows = computed(() => {
   const query = search.value.trim().toLowerCase();
   return intercomRows.value.filter((row) => {
+    const matchesReader = !selectedReaderId.value || row.reader._id === selectedReaderId.value;
     const matchesSearch = !query || [
       row.name,
       row.location,
@@ -843,18 +863,22 @@ const filteredIntercomRows = computed(() => {
       row.status,
     ].some((value) => String(value || "").toLowerCase().includes(query));
     const matchesStatus = statusFilter.value === "Status" || row.status === statusFilter.value;
-    return matchesSearch && matchesStatus;
+    return matchesReader && matchesSearch && matchesStatus;
   });
 });
 
 const filteredContacts = computed(() => {
   const query = search.value.trim().toLowerCase();
-  return contacts.value.filter((contact) => !query || [
-    contact.name,
-    contact.location,
-    contact.serverAddress,
-    contact.dialCode,
-  ].some((value) => String(value || "").toLowerCase().includes(query)));
+  return contacts.value.filter((contact) => {
+    const matchesReader = !selectedReaderId.value || contact.readerId === selectedReaderId.value;
+    const matchesSearch = !query || [
+      contact.name,
+      contact.location,
+      contact.serverAddress,
+      contact.dialCode,
+    ].some((value) => String(value || "").toLowerCase().includes(query));
+    return matchesReader && matchesSearch;
+  });
 });
 
 const paginatedIntercomRows = computed(() => paginate(filteredIntercomRows.value));
@@ -977,6 +1001,9 @@ async function reload() {
   try {
     const response = await getReaders({ site: props.site, page: 1, limit: 100 });
     readers.value = response?.items ?? response?.data?.items ?? response?.data?.readers ?? [];
+    if (!readers.value.some((reader) => reader._id === selectedReaderId.value)) {
+      selectedReaderId.value = readers.value[0]?._id || "";
+    }
     await loadIntercomRows();
     await loadContacts();
   } catch (error: any) {
@@ -1328,9 +1355,10 @@ function toggleWebMute() {
 function openContactDialog(contact?: ContactRow) {
   selectedContact.value = contact || null;
   contactForm.id = contact?.id;
-  contactForm.readerId = contact?.readerId || readers.value[0]?._id || "";
+  contactForm.readerId = contact?.readerId || selectedReaderId.value || readers.value[0]?._id || "";
   contactForm.name = contact?.name === "N/A" ? "" : contact?.name || "";
-  contactForm.location = contact?.location === "N/A" ? "" : contact?.location || readers.value[0]?.location || "";
+  const selectedReader = readers.value.find((reader) => reader._id === contactForm.readerId);
+  contactForm.location = contact?.location === "N/A" ? "" : contact?.location || selectedReader?.location || "";
   contactForm.serverAddress = contact?.serverAddress === "N/A" ? "" : contact?.serverAddress || "";
   contactDialog.value = true;
 }
@@ -1695,6 +1723,11 @@ export default {
   max-width: 220px;
 }
 
+.reader-input {
+  width: 300px;
+  max-width: 36vw;
+}
+
 .status-input {
   max-width: 160px;
 }
@@ -2673,6 +2706,7 @@ export default {
   }
 
   .top-placeholder,
+  .reader-input,
   .search-input,
   .status-input {
     width: 100%;

package/components/HidQrCodeConfiguration.vue

@@ -501,7 +501,6 @@ const identificationMethodOptions: Array<{
   { key: "qrCode", label: "QR Code" },
   { key: "idPassword", label: "ID Password" },
   { key: "pin", label: "PIN" },
-  { key: "bluetooth", label: "Bluetooth" },
 ];
 const accessPermissionOptions: Array<{
   category: THidPermissionCategory;
@@ -590,7 +589,7 @@ async function loadConfig() {
       qrCode: configuredMethods?.qrCode ?? Boolean(config.enabled),
       idPassword: configuredMethods?.idPassword ?? true,
       pin: configuredMethods?.pin ?? false,
-      bluetooth: configuredMethods?.bluetooth ?? false,
+      bluetooth: false,
     },
     printer: {
       vendorId: String(config.printer?.vendorId || ""),