@7365admin1/layer-common 4.1.2 → 4.1.3-staging.249

package/components/HidQrCodeConfiguration.vue

@@ -21,30 +21,6 @@
     <div class="config-body">
       <div class="section-label config-body__title">HID Configuration</div>
 
-      <div class="form-section">
-        <div class="section-label">Visitor QR Reader</div>
-        <p class="section-description">
-          Select the HID reader and portal used when creating a Visitor QR pass.
-        </p>
-        <div class="reader-grid">
-          <AppSelect
-            v-model="form.readerId"
-            :items="visitorQrReaderOptions"
-            placeholder="Select a HID reader"
-            :disabled="Boolean(savingSection) || visitorQrReaderOptions.length === 0"
-          />
-          <AppButton
-            icon="mdi-content-save-outline"
-            :disabled="Boolean(savingSection) || !form.readerId"
-            @click="saveSection('reader')"
-          >
-            Save Reader
-          </AppButton>
-        </div>
-      </div>
-
-      <v-divider />
-
       <div class="form-section identification-section">
         <div class="section-label">Enable/disable reader identification method</div>
         <p class="section-description">
@@ -137,79 +113,67 @@
       <v-divider />
 
       <div v-if="isPermissionManager" class="permission-section">
-        <div class="permission-location">
-          <div class="permission-copy">
-            <div class="section-label">Permission Location</div>
-            <p class="section-description">
-              Permissions are scoped to the location configured on the HID Face Reader.
-            </p>
-          </div>
-          <AppSelect
-            v-model="permissionReaderId"
-            class="permission-location__select"
-            :items="permissionLocations"
-            item-title="label"
-            item-value="readerId"
-            placeholder="Select a Face Reader location"
-            :disabled="permissionLocations.length === 0"
-            @update:model-value="loadPermissions"
-          />
+        <div class="permission-copy">
+          <div class="section-label">Visitor QR Access Permission</div>
+          <p class="section-description">
+            Select the connected HID Reader and Portal gates where Visitor QR codes may be scanned.
+          </p>
         </div>
 
         <v-alert
-          v-if="permissionLocations.length === 0"
+          v-if="visitorQrGateOptions.length === 0"
           class="mb-4"
           type="warning"
           variant="tonal"
           density="compact"
         >
-          Add a Location to a Face Reader before assigning HID permissions.
+          Connect a HID Reader and select its portal before configuring Visitor QR gates.
         </v-alert>
 
-        <v-divider />
-
         <div class="permission-row">
           <div class="permission-copy">
-            <div class="section-label">Access Permission</div>
+            <div class="section-label">Resident QR Gates</div>
             <p class="section-description">
-              Select who can use the enabled HID identification methods at this site.
+              QR codes created by a Resident app can be scanned only at these gates.
             </p>
           </div>
-          <div class="permission-actions">
-            <AppButton
-              v-for="option in accessPermissionOptions"
-              :key="option.category"
-              variant="ghost"
-              class="permission-button"
-              :disabled="!form.onlineMode || !permissionReaderId"
-              @click="openPermissionDialog(option.category)"
-            >
-              <span class="permission-count">{{ permissionCount(option.category) }}</span>
-              <span>{{ option.label }}</span>
-            </AppButton>
-          </div>
+          <AppSelect
+            v-model="form.qrGatePermissions.resident"
+            class="permission-location__select"
+            :items="visitorQrGateOptions"
+            multiple
+            placeholder="Select Resident QR gates"
+            :disabled="Boolean(savingSection) || visitorQrGateOptions.length === 0"
+          />
         </div>
 
         <v-divider />
 
-        <div class="permission-row permission-row--intercom">
+        <div class="permission-row">
           <div class="permission-copy">
-            <div class="section-label">Access Intercom</div>
+            <div class="section-label">Property Management QR Gates</div>
             <p class="section-description">
-              Choose which authorized people and providers may use HID intercom access.
+              QR codes created by the Property Management app can be scanned only at these gates.
             </p>
           </div>
-          <div class="permission-actions permission-actions--single">
-            <AppButton
-              variant="ghost"
-              class="permission-button"
-              :disabled="!form.onlineMode || !permissionReaderId || permissionState.assignments.length === 0"
-              @click="openPermissionDialog('intercom')"
-            >
-              <span class="permission-count">{{ permissionState.counts.intercom }}</span>
-              <span>Intercom Permissions</span>
-            </AppButton>
-          </div>
+          <AppSelect
+            v-model="form.qrGatePermissions.propertyManagement"
+            class="permission-location__select"
+            :items="visitorQrGateOptions"
+            multiple
+            placeholder="Select Property Management QR gates"
+            :disabled="Boolean(savingSection) || visitorQrGateOptions.length === 0"
+          />
+        </div>
+
+        <div class="permission-actions permission-actions--single mt-4">
+          <AppButton
+            icon="mdi-content-save-outline"
+            :disabled="Boolean(savingSection)"
+            @click="saveSection('qr-gates')"
+          >
+            Save QR Gate Permissions
+          </AppButton>
         </div>
       </div>
     </div>
@@ -254,81 +218,6 @@
       </v-card>
     </v-dialog>
 
-    <v-dialog v-model="permissionDialog" max-width="680" persistent>
-      <v-card class="permission-dialog">
-        <v-card-title class="permission-dialog__header">
-          <div>
-            <div class="permission-dialog__title">{{ permissionDialogTitle }}</div>
-            <div class="permission-dialog__subtitle">{{ permissionDialogDescription }}</div>
-          </div>
-          <AppButton
-            variant="icon"
-            icon="mdi-close"
-            aria-label="Close permission dialog"
-            @click="closePermissionDialog"
-          />
-        </v-card-title>
-
-        <v-card-text class="permission-dialog__body">
-          <AppField
-            v-model="permissionSearch"
-            search
-            placeholder="Search by name or details"
-          />
-
-          <div class="permission-list-summary" aria-live="polite">
-            <span>{{ visiblePermissionCandidates.length }} entries</span>
-            <span class="permission-list-summary__selected">
-              {{ selectedPermissionIds.size }} selected
-            </span>
-          </div>
-
-          <div class="permission-list" :class="{ 'permission-list--loading': loadingPermissionCandidates }">
-            <div v-if="loadingPermissionCandidates" class="permission-empty">
-              <v-progress-circular indeterminate class="permission-spinner" size="28" />
-              <span>Loading permissions...</span>
-            </div>
-
-            <template v-else-if="visiblePermissionCandidates.length">
-              <label
-                v-for="candidate in visiblePermissionCandidates"
-                :key="`${candidate.category}:${candidate.subjectId}`"
-                class="permission-list-item"
-                :class="{ 'permission-list-item--selected': selectedPermissionIds.has(candidate.subjectId) }"
-              >
-                <span class="permission-list-item__content">
-                  <strong>{{ candidate.name }}</strong>
-                  <small>{{ candidate.subtitle || permissionCategoryLabel(candidate.category) }}</small>
-                </span>
-                <span class="permission-list-item__group">{{ permissionCategoryLabel(candidate.category) }}</span>
-                <v-checkbox-btn
-                  class="permission-list-item__checkbox"
-                  :model-value="selectedPermissionIds.has(candidate.subjectId)"
-                  :aria-label="`Select ${candidate.name}`"
-                  @update:model-value="togglePermissionCandidate(candidate.subjectId, Boolean($event))"
-                />
-              </label>
-            </template>
-
-            <div v-else class="permission-empty">
-              <v-icon icon="mdi-account-search-outline" size="30" />
-              <span>{{ permissionEmptyMessage }}</span>
-            </div>
-          </div>
-        </v-card-text>
-
-        <v-card-actions class="permission-dialog__actions">
-          <AppButton variant="ghost" @click="closePermissionDialog">Cancel</AppButton>
-          <AppButton
-            :disabled="loadingPermissionCandidates || savingPermissions"
-            @click="savePermissions"
-          >
-            Save Permissions
-          </AppButton>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </section>
 </template>
@@ -339,10 +228,14 @@ type HidIdentificationMethod = keyof NonNullable<THidQrCodePassConfig["identific
 
 type HidQrConfig = Omit<
   THidQrCodePassConfig,
-  "identificationMethods" | "onlineMode" | "updatedAt"
+  "identificationMethods" | "onlineMode" | "updatedAt" | "qrGatePermissions"
 > & {
   onlineMode: boolean;
   identificationMethods: Record<HidIdentificationMethod, boolean>;
+  qrGatePermissions: {
+    resident: string[];
+    propertyManagement: string[];
+  };
 };
 
 type HidReaderOption = {
@@ -350,6 +243,8 @@ type HidReaderOption = {
   name?: string;
   deviceId?: string;
   location?: string;
+  portalId?: number;
+  portalName?: string;
 };
 
 type HidReaderListResponse = {
@@ -374,9 +269,6 @@ const {
   getReaders,
   getReaderConfiguration,
   setReaderConfiguration,
-  getSitePermissions,
-  getPermissionCandidates,
-  updateSitePermissions,
 } = useHidAmico();
 const {
   requestDevice: requestPrinterDevice,
@@ -387,6 +279,10 @@ const defaultConfig: HidQrConfig = {
   enabled: false,
   onlineMode: false,
   readerId: "",
+  qrGatePermissions: {
+    resident: [],
+    propertyManagement: [],
+  },
   qrFormat: "0",
   identificationMethods: {
     facial: true,
@@ -416,35 +312,15 @@ const testingPrinter = ref(false);
 const message = ref("");
 const messageColor = ref("success");
 const messageSnackbar = ref(false);
-const permissionState = reactive<THidSitePermissions>({
-  orgId: props.org,
-  site: props.site,
-  readerId: "",
-  location: "",
-  assignments: [],
-  counts: {
-    resident: 0,
-    propertyManagement: 0,
-    serviceProvider: 0,
-    intercom: 0,
-  },
-});
-const permissionDialog = ref(false);
-const permissionReaderId = ref("");
-const permissionDialogCategory = ref<THidPermissionCategory | "intercom">("resident");
-const permissionCandidates = ref<THidPermissionCandidate[]>([]);
-const selectedPermissionIds = ref(new Set<string>());
-const permissionSearch = ref("");
-const loadingPermissionCandidates = ref(false);
-const savingPermissions = ref(false);
-
 const hasPrinterConfig = computed(() =>
   Boolean(form.printer.vendorId && form.printer.productId),
 );
-const visitorQrReaderOptions = computed(() => readers.value.map((reader) => ({
-  title: String(reader.name || reader.deviceId || reader._id) + " - " + (reader.portalName || "Portal not configured"),
-  value: reader._id,
-})));
+const visitorQrGateOptions = computed(() => readers.value
+  .filter((reader) => Boolean(reader.portalId))
+  .map((reader) => ({
+    title: String(reader.name || reader.deviceId || reader._id) + " - " + String(reader.portalName || "Portal"),
+    value: reader._id,
+  })));
 const identificationMethodOptions: Array<{
   key: HidIdentificationMethod;
   label: string;
@@ -455,37 +331,13 @@ const identificationMethodOptions: Array<{
   { key: "idPassword", label: "ID Password" },
   { key: "pin", label: "PIN" },
 ];
-const accessPermissionOptions: Array<{
-  category: THidPermissionCategory;
-  label: string;
-}> = [
-  { category: "resident", label: "Resident" },
-  { category: "property_management", label: "Property Management" },
-  { category: "service_provider", label: "Service Provider" },
-];
-
-const permissionLocations = computed(() => {
-  const seen = new Set<string>();
-  return readers.value.reduce<Array<{ readerId: string; location: string; label: string }>>((items, reader) => {
-    const location = reader.location?.trim();
-    const key = location?.toLocaleLowerCase();
-    if (!location || !key || seen.has(key)) return items;
-    seen.add(key);
-    items.push({
-      readerId: reader._id,
-      location,
-      label: location,
-    });
-    return items;
-  }, []);
-});
-const selectedPermissionLocation = computed(() => (
-  permissionLocations.value.find((item) => item.readerId === permissionReaderId.value)?.location
-  || "the selected location"
-));
-
 const siteName = computed(() => siteData.value?.name || "Site");
 const siteLabel = computed(() => siteData.value?.code || siteData.value?.block || props.site);
+const primaryQrGateReaderId = computed(() => (
+  form.qrGatePermissions.resident[0]
+  || form.qrGatePermissions.propertyManagement[0]
+  || ""
+));
 const validityText = computed(() =>
   form.validityMinutes ? `${form.validityMinutes} minutes` : "Not set",
 );
@@ -502,30 +354,6 @@ const validityInput = computed({
     form.validityMinutes = value === "" ? null : Number(value);
   },
 });
-const visiblePermissionCandidates = computed(() => {
-  const search = permissionSearch.value.trim().toLowerCase();
-  if (!search) return permissionCandidates.value;
-  return permissionCandidates.value.filter((candidate) => (
-    candidate.name.toLowerCase().includes(search)
-    || candidate.subtitle?.toLowerCase().includes(search)
-  ));
-});
-const permissionDialogTitle = computed(() => (
-  permissionDialogCategory.value === "intercom"
-    ? "Intercom Permissions"
-    : `${permissionCategoryLabel(permissionDialogCategory.value)} Access Permission`
-));
-const permissionDialogDescription = computed(() => (
-  permissionDialogCategory.value === "intercom"
-    ? `Select from people and providers who already have HID access permission at ${selectedPermissionLocation.value}.`
-    : `Select the ${permissionCategoryLabel(permissionDialogCategory.value).toLowerCase()} entries allowed to use HID access at ${selectedPermissionLocation.value}.`
-));
-const permissionEmptyMessage = computed(() => (
-  permissionDialogCategory.value === "intercom" && permissionState.assignments.length === 0
-    ? "Add an access permission before assigning intercom access."
-    : "No matching entries found."
-));
-
 watch(
   () => [props.org, props.site],
   () => loadConfig(),
@@ -549,7 +377,20 @@ async function loadConfig() {
     // Visitor QR is reader-local. Do not restore a legacy Online Mode value
     // from the site record and accidentally make a scan depend on Monitor.
     onlineMode: false,
-    readerId: String(config.readerId || readers.value[0]?._id || ""),
+    qrGatePermissions: {
+      resident: Array.isArray(config.qrGatePermissions?.resident)
+        ? config.qrGatePermissions.resident.map(String)
+        : [],
+      propertyManagement: Array.isArray(config.qrGatePermissions?.propertyManagement)
+        ? config.qrGatePermissions.propertyManagement.map(String)
+        : [],
+    },
+    readerId: String(
+      config.qrGatePermissions?.resident?.[0]
+      || config.qrGatePermissions?.propertyManagement?.[0]
+      || config.readerId
+      || "",
+    ),
     qrFormat: "0",
     identificationMethods: {
       facial: configuredMethods?.facial ?? true,
@@ -570,132 +411,7 @@ async function loadConfig() {
     validityMinutes: config.validityMinutes ? Number(config.validityMinutes) : null,
   });
 
-  permissionReaderId.value = permissionLocations.value.find((item) => item.readerId === form.readerId)?.readerId
-    || permissionLocations.value[0]?.readerId
-    || "";
-
-  await Promise.all([
-    loadReaderConfiguration(),
-    isPermissionManager.value ? loadPermissions() : Promise.resolve(),
-  ]);
-}
-
-async function loadPermissions() {
-  if (!props.org || !props.site || !permissionReaderId.value) {
-    Object.assign(permissionState, {
-      orgId: props.org,
-      site: props.site,
-      readerId: "",
-      location: "",
-      assignments: [],
-      counts: { resident: 0, propertyManagement: 0, serviceProvider: 0, intercom: 0 },
-    });
-    return;
-  }
-  try {
-    const response = await getSitePermissions(props.site, props.org, permissionReaderId.value);
-    Object.assign(permissionState, response.data);
-  } catch (error: unknown) {
-    console.error("Unable to load HID permissions:", errorConverter(error));
-  }
-}
-
-function permissionCategoryLabel(category: THidPermissionCategory) {
-  return accessPermissionOptions.find((option) => option.category === category)?.label || "Permission";
-}
-
-function permissionCount(category: THidPermissionCategory) {
-  if (category === "property_management") return permissionState.counts.propertyManagement;
-  if (category === "service_provider") return permissionState.counts.serviceProvider;
-  return permissionState.counts.resident;
-}
-
-async function openPermissionDialog(category: THidPermissionCategory | "intercom") {
-  if (!props.org || !permissionReaderId.value) return;
-  permissionDialogCategory.value = category;
-  permissionSearch.value = "";
-  permissionCandidates.value = [];
-  selectedPermissionIds.value = new Set<string>();
-  permissionDialog.value = true;
-  loadingPermissionCandidates.value = true;
-
-  try {
-    const response = await getPermissionCandidates(props.site, {
-      orgId: props.org,
-      readerId: permissionReaderId.value,
-      category,
-      page: 1,
-      limit: 500,
-    });
-    permissionCandidates.value = response.items ?? response.data?.items ?? [];
-    selectedPermissionIds.value = new Set(
-      permissionCandidates.value
-        .filter((candidate) => category === "intercom" ? candidate.intercom : candidate.selected)
-        .map((candidate) => candidate.subjectId),
-    );
-  } catch (error: unknown) {
-    showMessage(errorConverter(error), "error");
-  } finally {
-    loadingPermissionCandidates.value = false;
-  }
-}
-
-function closePermissionDialog() {
-  if (savingPermissions.value) return;
-  permissionDialog.value = false;
-}
-
-function togglePermissionCandidate(subjectId: string, selected: boolean) {
-  const next = new Set(selectedPermissionIds.value);
-  if (selected) next.add(subjectId);
-  else next.delete(subjectId);
-  selectedPermissionIds.value = next;
-}
-
-async function savePermissions() {
-  const category = permissionDialogCategory.value;
-  let assignments: Array<Pick<THidPermissionAssignment, "subjectId" | "category" | "intercom">>;
-
-  if (category === "intercom") {
-    assignments = permissionState.assignments.map((assignment) => ({
-      subjectId: assignment.subjectId,
-      category: assignment.category,
-      intercom: selectedPermissionIds.value.has(assignment.subjectId),
-    }));
-  } else {
-    const retained = permissionState.assignments
-      .filter((assignment) => assignment.category !== category)
-      .map((assignment) => ({
-        subjectId: assignment.subjectId,
-        category: assignment.category,
-        intercom: assignment.intercom,
-      }));
-    const selected = permissionCandidates.value
-      .filter((candidate) => selectedPermissionIds.value.has(candidate.subjectId))
-      .map((candidate) => ({
-        subjectId: candidate.subjectId,
-        category: candidate.category,
-        intercom: candidate.intercom,
-      }));
-    assignments = [...retained, ...selected];
-  }
-
-  savingPermissions.value = true;
-  try {
-    const response = await updateSitePermissions(
-      props.site,
-      props.org,
-      permissionReaderId.value,
-      assignments,
-    );
-    Object.assign(permissionState, response.data);
-    permissionDialog.value = false;
-    showMessage("HID permissions updated.", "success");
-  } catch (error: unknown) {
-    showMessage(errorConverter(error), "error");
-  } finally {
-    savingPermissions.value = false;
-  }
+  await loadReaderConfiguration();
 }
 
 function isUnknownRecord(value: unknown): value is Record<string, unknown> {
@@ -746,7 +462,13 @@ function buildPayload() {
     hidQrCodePass: {
       enabled: form.identificationMethods.qrCode,
       onlineMode: false,
-      readerId: form.readerId,
+      // Kept only for old background/mobile flows. Gate permissions, not this
+      // compatibility value, decide where a new Visitor QR may be scanned.
+      readerId: primaryQrGateReaderId.value,
+      qrGatePermissions: {
+        resident: [...new Set(form.qrGatePermissions.resident)],
+        propertyManagement: [...new Set(form.qrGatePermissions.propertyManagement)],
+      },
       // Visitor QR passes always use Amico alphanumeric qrcodes.
       qrFormat: "0",
       identificationMethods: { ...form.identificationMethods },
@@ -768,6 +490,10 @@ function buildPayload() {
 
 async function saveSection(section: string) {
   if (!props.site) return;
+  if (section === "qr-gates" && !primaryQrGateReaderId.value) {
+    showMessage("Select at least one Resident or Property Management QR gate.", "error");
+    return;
+  }
 
   savingSection.value = section;
   try {
@@ -1025,10 +751,6 @@ function showMessage(text: string, color: string) {
   padding: 18px 0;
 }
 
-.permission-row--intercom {
-  padding-bottom: 4px;
-}
-
 .permission-copy {
   min-width: 0;
 }
@@ -1044,190 +766,6 @@ function showMessage(text: string, color: string) {
   justify-content: end;
 }
 
-/* A ghost button carrying a count badge. `AppButton --ghost` supplies the
-   height, radius, border and type; only the alignment is local. */
-.permission-button {
-  justify-content: flex-start;
-  min-height: 42px;
-}
-
-.permission-count {
-  display: inline-grid;
-  place-items: center;
-  width: 20px;
-  height: 20px;
-  margin-right: 8px;
-  border-radius: 50%;
-  background: var(--accent-soft);
-  color: var(--accent-text);
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.permission-button:not(:disabled):hover {
-  border-color: var(--accent);
-  color: var(--accent-text);
-}
-
-.permission-dialog {
-  overflow: hidden;
-  border-radius: var(--r-modal);
-  background: var(--card);
-}
-
-.permission-dialog__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 16px 18px 14px;
-  border-bottom: 1px solid var(--border);
-}
-
-.permission-dialog__title {
-  color: var(--text);
-  font-family: var(--font-sans);
-  font-size: 18px;
-  font-weight: 800;
-}
-
-.permission-dialog__subtitle {
-  margin-top: 4px;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 600;
-  white-space: normal;
-}
-
-.permission-dialog__body {
-  display: grid;
-  gap: 10px;
-  padding: 14px 18px 16px;
-}
-
-.permission-list-summary {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 22px;
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.permission-list-summary__selected {
-  color: var(--ok);
-  font-weight: 700;
-}
-
-.permission-list {
-  min-height: 180px;
-  max-height: min(360px, 48vh);
-  overflow-y: auto;
-  border: 1px solid var(--border);
-  border-radius: var(--r-inner);
-  background: var(--card);
-}
-
-.permission-list--loading {
-  display: grid;
-  place-items: center;
-}
-
-.permission-list-item {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) max-content 32px;
-  gap: 12px;
-  align-items: center;
-  min-height: 56px;
-  padding: 7px 12px;
-  border-bottom: 1px solid var(--border);
-  cursor: pointer;
-  transition: background-color var(--motion) ease;
-}
-
-.permission-list-item:last-child {
-  border-bottom: 0;
-}
-
-.permission-list-item:hover {
-  background: var(--hover);
-}
-
-.permission-list-item--selected,
-.permission-list-item--selected:hover {
-  background: var(--accent-soft);
-}
-
-.permission-list-item__content {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-}
-
-.permission-list-item__content strong,
-.permission-list-item__content small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.permission-list-item__content strong {
-  color: var(--text);
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.35;
-}
-
-.permission-list-item__content small,
-.permission-list-item__group {
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.permission-list-item__group {
-  max-width: 170px;
-  overflow: hidden;
-  padding: 4px 9px;
-  border-radius: var(--r-tag);
-  background: var(--hover);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.permission-list-item__checkbox {
-  justify-self: end;
-}
-
-.permission-list-item__checkbox :deep(.v-selection-control) {
-  min-height: 32px;
-}
-
-.permission-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  min-height: 180px;
-  padding: 24px;
-  color: var(--muted);
-  font-size: 13px;
-  text-align: center;
-}
-
-.permission-spinner {
-  color: var(--accent);
-}
-
-.permission-dialog__actions {
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 18px;
-  border-top: 1px solid var(--border);
-}
-
 /*
   THE PRINTED PASS - the one thing here that is NOT themed.
 
@@ -1368,21 +906,5 @@ function showMessage(text: string, color: string) {
     justify-content: stretch;
   }
 
-  .permission-list-item {
-    grid-template-columns: minmax(0, 1fr) 32px;
-    gap: 8px;
-  }
-
-  .permission-list-item__group {
-    grid-column: 1;
-    grid-row: 2;
-    justify-self: start;
-    max-width: 100%;
-  }
-
-  .permission-list-item__checkbox {
-    grid-column: 2;
-    grid-row: 1 / span 2;
-  }
 }
 </style>

package/components/HidReaderManagement.vue

@@ -122,6 +122,7 @@
           <div class="detail-grid">
             <span>HID reader name</span><strong>{{ selectedReader?.name || "N/A" }}</strong>
             <span>Device ID</span><strong>{{ selectedReader?.deviceId || "N/A" }}</strong>
+            <span>Firmware</span><strong>{{ selectedReader?.firmwareVersion || "Not reported" }}</strong>
             <span>Location</span><strong>{{ selectedReader?.location || "N/A" }}</strong>
             <span>HID Portal</span><strong>{{ selectedReader?.portalName || selectedReader?.portalId || "N/A" }}</strong>
             <span>Monitor Path</span><strong>{{ selectedReader?.monitorPath || "N/A" }}</strong>
@@ -573,7 +574,12 @@ async function runConfirmedAction() {
     if (pendingAction.value === "test") {
       const response = await testReader(selectedReader.value._id);
       const message = response?.data?.message || response?.message || "Device connection successful.";
-      await applyReaderSyncState(selectedReader.value._id, "completed", message);
+      const firmwareVersion = String(
+        response?.data?.firmwareVersion ?? response?.firmwareVersion ?? "",
+      ).trim();
+      await applyReaderSyncState(selectedReader.value._id, "completed", message, {
+        ...(firmwareVersion ? { firmwareVersion } : {}),
+      });
       showResult(true, "Test Device Connection", message);
     }
     if (pendingAction.value === "sync") {
@@ -622,12 +628,18 @@ async function runConfirmedAction() {
   }
 }
 
-async function applyReaderSyncState(readerId: string, status: "completed" | "failed", message: string) {
+async function applyReaderSyncState(
+  readerId: string,
+  status: "completed" | "failed",
+  message: string,
+  extra: Pick<HidRecord, "firmwareVersion"> = {},
+) {
   const lastSyncAt = new Date().toISOString();
   const patch: HidRecord = {
     lastSyncAt,
     lastSyncStatus: status,
     lastSyncMessage: message,
+    ...extra,
   };
   if (status === "failed") {
     patch.status = "offline";

package/components/Input/DatePicker.vue

@@ -35,9 +35,15 @@ const dateFormattedReadOnly = ref<string | null>(null)
 
 const dateInput = ref<HTMLInputElement | null>(null)
 const datePickerRef = ref<HTMLInputElement | null>(null)
+let nativeInput: HTMLInputElement | null = null
 
 const isInitialLoad = ref(true)
 
+function handleNativeInputClick(e: MouseEvent) {
+    e.stopPropagation()
+    openDatePicker()
+}
+
 function clearDate() {
     date.value = null
     dateFormattedReadOnly.value = null
@@ -88,15 +94,17 @@ watch(date, () => {
 onMounted(async () => {
     await nextTick()
     isInitialLoad.value = false
-    const nativeInput = (datePickerRef.value as any)?.$el?.querySelector('input')
+    nativeInput = (datePickerRef.value as any)?.$el?.querySelector('input')
     if (nativeInput) {
-        nativeInput.addEventListener('click', (e: MouseEvent) => {
-            e.stopPropagation()
-            openDatePicker()
-        })
+        nativeInput.addEventListener('click', handleNativeInputClick)
     }
 })
 
+onBeforeUnmount(() => {
+    nativeInput?.removeEventListener('click', handleNativeInputClick)
+    nativeInput = null
+})
+
 defineExpose({
     validate
 })

package/components/Input/DateTimePicker.vue

@@ -70,9 +70,15 @@ const inputPlaceholder = computed(
 
 const dateInput = ref<HTMLInputElement | null>(null);
 const dateTimePickerRef = ref<HTMLInputElement | null>(null);
+let nativeInput: HTMLInputElement | null = null;
 
 const isInitialLoad = ref(true);
 
+function handleNativeInputClick(e: MouseEvent) {
+  e.stopPropagation();
+  openDatePicker();
+}
+
 function openDatePicker() {
   setTimeout(() => {
     dateInput.value?.showPicker?.();
@@ -177,17 +183,19 @@ onMounted(async () => {
   await nextTick();
   isInitialLoad.value = false;
   // Wait until Vuetify renders its internal input
-  const nativeInput = (dateTimePickerRef.value as any)?.$el?.querySelector(
+  nativeInput = (dateTimePickerRef.value as any)?.$el?.querySelector(
     "input"
   );
   if (nativeInput) {
-    nativeInput.addEventListener("click", (e: MouseEvent) => {
-      e.stopPropagation();
-      openDatePicker();
-    });
+    nativeInput.addEventListener("click", handleNativeInputClick);
   }
 });
 
+onBeforeUnmount(() => {
+  nativeInput?.removeEventListener("click", handleNativeInputClick);
+  nativeInput = null;
+});
+
 defineExpose({
   validate,
 });

package/components/VisitorManagement.vue

@@ -1758,9 +1758,14 @@ function closeApproveRejectVisitorDialog() {
 async function updateVisitorApprovalStatus() {
   isApprovingRejectingVisitor.value = true;
   try {
-    await updateVisitor(selectedVisitorForApproval.value._id, {
+    const approval = {
+      approvedBy: currentUser.value?._id,
       status: approveRejectVisitorDialog.value.status,
       remarks: visitorApproveRejectRemarks.value,
+      approvedAt: new Date(),
+    };
+    await updateVisitor(selectedVisitorForApproval.value._id, {
+      approval,
       updatedBy: currentUser.value?._id,
     } as any);
     showMessage(
@@ -1891,7 +1896,9 @@ const {
       // A self-service submission awaiting Approve/Reject (Self-Service
       // Auto-Approvals off) lands here as "pending" alongside already
       // "approved" guests, rather than being hidden until someone acts on it.
-      params.status = "approved,pending";
+      // "rejected" is included too, so a rejected submission stays visible
+      // on this tab instead of disappearing once acted on.
+      params.status = "approved,pending,rejected";
     } else if (activeTab.value === "resident-transactions") {
       params.status = "registered";
       params.type = "resident,tenant";
@@ -2429,7 +2436,7 @@ function buildReportParams(): any {
     // report generated from this tab would silently omit contractors and
     // pending rows the screen is actually showing.
     params.type = "guest,contractor";
-    params.status = "approved,pending";
+    params.status = "approved,pending,rejected";
   } else if (activeTab.value === "resident-transactions") {
     params.status = "registered";
     params.type = "resident,tenant";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.1.2",
+  "version": "4.1.3-staging.249",
   "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/site.d.ts

@@ -40,6 +40,10 @@ declare type THidQrCodePassConfig = {
   enabled: boolean;
   onlineMode?: boolean;
   readerId: string;
+  qrGatePermissions?: {
+    resident: string[];
+    propertyManagement: string[];
+  };
   qrFormat: THidQrCodeFormat;
   identificationMethods?: {
     facial: boolean;