@7365admin1/layer-common 3.0.18 → 3.0.20

package/components/HidAccessLogDashboard.vue

@@ -313,6 +313,10 @@
 
 <script setup lang="ts">
 const props = defineProps({
+  org: {
+    type: String,
+    default: "",
+  },
   site: {
     type: String,
     required: true,
@@ -360,6 +364,7 @@ const status = ref("Status");
 const page = ref(1);
 const limit = 20;
 const loading = ref(false);
+const loadSequence = ref(0);
 const exportDialog = ref(false);
 const historyDialog = ref(false);
 const selectedHistoryRow = ref<AccessRow>();
@@ -503,7 +508,7 @@ const exportRowsData = computed(() =>
 );
 
 watch(
-  () => props.site,
+  () => [props.org, props.site],
   () => init(),
   { immediate: true },
 );
@@ -532,18 +537,18 @@ async function loadReaders() {
 
 async function loadDashboard() {
   if (!selectedReaderId.value) {
-    identities.value = [];
-    visitorRecords.value = {};
-    logs.value = [];
-    liveAccessLogs.value = [];
+    resetDashboardData();
     return;
   }
 
+  const sequence = loadSequence.value + 1;
+  loadSequence.value = sequence;
   loading.value = true;
+  resetDashboardData();
   try {
     const isAdministratorTab = activeTab.value === "administrator";
     const isVisitorTab = activeTab.value === "visitor";
-    const [identityResponse, logResponse, hidAccessLogs, configurationResponse, roleResponse, visitorResponse] = await Promise.all([
+    const [identityResponse, logResponse, hidAccessLogs, configurationResponse, roleResponse, visitorResponse, readerUserResponse] = await Promise.all([
       getIdentities(selectedReaderId.value, {
         page: 1,
         limit: 500,
@@ -556,29 +561,43 @@ async function loadDashboard() {
       loadLiveAccessLogs(selectedReaderId.value),
       loadReaderConfiguration(selectedReaderId.value),
       isAdministratorTab ? loadAdministratorRoles(selectedReaderId.value) : Promise.resolve(null),
-      isVisitorTab ? getVisitors({ site: props.site, page: 1, limit: 500, order: "desc" }) : Promise.resolve(null),
+      isVisitorTab && props.org
+        ? getVisitors({
+            org: props.org,
+            site: props.site,
+            page: 1,
+            limit: 500,
+            order: "desc",
+          })
+        : Promise.resolve(null),
+      loadReaderUsers(selectedReaderId.value),
     ]);
 
+    if (sequence !== loadSequence.value) return;
+
     const loadedIdentities = identityResponse?.items ?? identityResponse?.data?.items ?? identityResponse?.data?.identities ?? [];
+    const mergedIdentities = mergeReaderUsersWithIdentities(readerUserResponse, loadedIdentities);
     const loadedVisitors = visitorResponse?.items ?? visitorResponse?.data?.items ?? visitorResponse?.data?.visitors ?? [];
     visitorRecords.value = isVisitorTab
       ? Object.fromEntries(loadedVisitors.map((visitor: Record<string, any>) => [String(visitor._id), visitor]))
       : {};
     administratorUserIds.value = getAdministratorRoleUserIds(roleResponse);
     identities.value = isAdministratorTab
-      ? loadedIdentities.filter((identity: Record<string, any>) => {
+      ? mergedIdentities.filter((identity: Record<string, any>) => {
           const hidUserId = toHidNumericId(identity.hidUserId);
           return Boolean(hidUserId && administratorUserIds.value.has(hidUserId));
         })
       : isVisitorTab
-        ? loadedIdentities.filter((identity: Record<string, any>) => Boolean(getVisitorRecord(identity)))
-      : loadedIdentities;
+        ? mergedIdentities.filter((identity: Record<string, any>) => Boolean(getVisitorRecord(identity)))
+      : mergedIdentities;
     logs.value = logResponse?.items ?? logResponse?.data?.items ?? logResponse?.data?.logs ?? [];
     liveAccessLogs.value = hidAccessLogs;
     readerConfiguration.value = normalizeReaderConfiguration(configurationResponse);
     await loadUserImages(identities.value);
   } finally {
-    loading.value = false;
+    if (sequence === loadSequence.value) {
+      loading.value = false;
+    }
   }
 }
 
@@ -586,9 +605,9 @@ async function loadUserImages(items: Record<string, any>[]) {
   if (!selectedReaderId.value) return;
 
   await Promise.all(items.map(async (identity) => {
-    const hidUserId = identity.hidUserId;
+    const hidUserId = toHidNumericId(identity.hidUserId);
     const key = String(hidUserId || "");
-    if (!hidUserId || userImages.value[key] || identity?.metadata?.photo) return;
+    if (!hidUserId || userImages.value[key] || identity?.metadata?.photo || !hasHidImageHint(identity)) return;
 
     try {
       const response = await getUserImage(selectedReaderId.value, hidUserId);
@@ -602,6 +621,18 @@ async function loadUserImages(items: Record<string, any>[]) {
   }));
 }
 
+function hasHidImageHint(identity: Record<string, any>) {
+  return Boolean(
+    identity?.metadata?.imageTimestamp ||
+      identity?.metadata?.facialData ||
+      identity?.metadata?.photo ||
+      identity?.imageTimestamp ||
+      identity?.image_timestamp ||
+      identity?.facialData ||
+      identity?.photo,
+  );
+}
+
 async function loadLiveAccessLogs(readerId: string) {
   const allLogs: Record<string, any>[] = [];
   const limit = 500;
@@ -652,20 +683,113 @@ async function loadReaderConfiguration(readerId: string) {
   }
 }
 
-function onTabChange() {
+async function onTabChange(tab: AccessTab) {
+  if (tab) {
+    activeTab.value = tab;
+  }
   page.value = 1;
+  resetDashboardData();
+  await nextTick();
   loadDashboard();
 }
 
+async function loadReaderUsers(readerId: string) {
+  try {
+    const response = await runObjectOperation(readerId, {
+      operation: "load",
+      object: "users",
+      limit: 500,
+      offset: 0,
+    });
+    return normalizeHidUsers(response);
+  } catch (error) {
+    console.warn("Unable to load HID users for access log images", error);
+    return [];
+  }
+}
+
+function normalizeHidUsers(response: Record<string, any>) {
+  const items =
+    response?.data?.users ||
+    response?.data?.data?.users ||
+    response?.users ||
+    [];
+
+  return Array.isArray(items)
+    ? items.map((user) => ({
+        hidUserId: String(user.id || ""),
+        rawHidUserId: user.id,
+        registration: user.registration,
+        cardNo: user.card_value || user.cardNo || "",
+        name: user.name,
+        metadata: {
+          name: user.name,
+          imageTimestamp: user.image_timestamp ? String(user.image_timestamp) : "",
+          hidReaderSource: true,
+        },
+      }))
+    : [];
+}
+
+function mergeReaderUsersWithIdentities(readerUsers: Record<string, any>[], identities: Record<string, any>[]) {
+  const identityById = new Map<string, Record<string, any>>();
+  identities.forEach((identity) => {
+    const id = toHidNumericId(identity.hidUserId);
+    if (id) identityById.set(String(id), identity);
+  });
+
+  const mergedReaderUsers = readerUsers.map((readerUser) => {
+    const identity = identityById.get(String(toHidNumericId(readerUser.hidUserId)));
+    if (!identity) return readerUser;
+
+    return {
+      ...readerUser,
+      ...identity,
+      hidUserId: identity.hidUserId || readerUser.hidUserId,
+      rawHidUserId: readerUser.rawHidUserId,
+      name: identity.metadata?.name || identity.name || readerUser.name,
+      registration: identity.registration || readerUser.registration,
+      cardNo: identity.cardNo || readerUser.cardNo,
+      metadata: {
+        ...readerUser.metadata,
+        ...identity.metadata,
+        imageTimestamp: identity.metadata?.imageTimestamp || readerUser.metadata?.imageTimestamp,
+      },
+    };
+  });
+
+  const readerUserIds = new Set(readerUsers.map((user) => String(toHidNumericId(user.hidUserId))));
+  const identitiesOnly = identities.filter((identity) => !readerUserIds.has(String(toHidNumericId(identity.hidUserId))));
+  return [...mergedReaderUsers, ...identitiesOnly];
+}
+
+function resetDashboardData() {
+  selectedHistoryRow.value = undefined;
+  identities.value = [];
+  visitorRecords.value = {};
+  logs.value = [];
+  liveAccessLogs.value = [];
+  readerConfiguration.value = {};
+  administratorUserIds.value = new Set();
+}
+
 function getIdentityType(tab: AccessTab) {
   if (tab === "administrator") return "admin";
   return tab;
 }
 
 function isVisibleForActiveTab(row: AccessRow) {
-  if (activeTab.value !== "administrator") return true;
-  const hidUserId = toHidNumericId(row.identityKey.split("|")[0]);
-  return Boolean(hidUserId && administratorUserIds.value.has(hidUserId));
+  const identity = findIdentityByKey(row.identityKey);
+  if (activeTab.value === "visitor") {
+    return Boolean(identity && getVisitorRecord(identity));
+  }
+
+  if (activeTab.value === "administrator") {
+    const hidUserId = toHidNumericId(identity?.hidUserId ?? row.identityKey.split("|")[0]);
+    return Boolean(hidUserId && administratorUserIds.value.has(hidUserId));
+  }
+
+  return !identity || !getVisitorRecord(identity);
 }
 
 function loadAdministratorRoles(readerId: string) {
@@ -715,6 +839,11 @@ function getIdentityKey(identity: Record<string, any>) {
   ].filter(Boolean).join("|");
 }
 
+function findIdentityByKey(identityKey: string) {
+  if (!identityKey) return undefined;
+  return identities.value.find((identity) => getIdentityKey(identity) === identityKey);
+}
+
 function getLogIdentityKey(log: Record<string, any>) {
   const identity = log.payload?.identity || {};
   const lookup = log.payload?.identityLookup || {};
@@ -731,11 +860,12 @@ function getName(identity: Record<string, any>) {
 }
 
 function getFacialData(identity: Record<string, any>) {
-  return identity.metadata?.facialData || (identity.metadata?.photo ? identity.hidUserId : "N/A");
+  return identity.metadata?.facialData || identity.metadata?.imageTimestamp || (identity.metadata?.photo ? identity.hidUserId : "N/A");
 }
 
 function getUserImageSrc(identity: Record<string, any>) {
-  return identity?.metadata?.photo || userImages.value[String(identity?.hidUserId || "")] || "";
+  const hidUserId = toHidNumericId(identity?.hidUserId);
+  return identity?.metadata?.photo || (hidUserId ? userImages.value[String(hidUserId)] : "") || "";
 }
 
 function getUnit(identity: Record<string, any>) {
@@ -758,27 +888,60 @@ function getAccessMethod(identity: Record<string, any>, log?: Record<string, any
   if (configuredLogType) return configuredLogType;
   const configuredRule = getConfigurationLabel("identification_rules", payload.identification_rule_id || payload.identificationRuleId);
   if (configuredRule) return configuredRule;
+  const rawIdentification = String(payload.identification || payload.identification_type || payload.identificationType || "").toLowerCase();
+  if (rawIdentification.includes("facial") || rawIdentification.includes("face")) return "Facial";
   if (payload.qrcode_value || payload.qrCode || payload.qrcode) return "QR Code";
   if (payload.card_value || payload.cardNo || identity.cardNo) return "Card";
   if (payload.pin_value) return "PIN";
-  if (payload.password_value || payload.password || payload.identifier_id) return "ID and Password";
   if (payload.confidence || payload.user_id || payload.userId || payload.hidUserId) return "Facial";
+  if (payload.password_value || payload.password || isValidIdentifierId(payload.identifier_id)) return "ID and Password";
   if (identity.metadata?.pinPassword) return "ID and Password";
   return identity.metadata?.photo || identity.metadata?.facialData ? "Facial" : "N/A";
 }
 
 function formatDate(value?: string | number) {
   if (!value) return "N/A";
+  if (typeof value === "number") return formatHidEpochDate(value);
   const date = typeof value === "number" ? new Date(value * 1000) : new Date(value);
   return Number.isNaN(date.getTime()) ? "N/A" : date.toLocaleString();
 }
 
 function parseDate(value?: string | number) {
   if (!value) return undefined;
-  const date = typeof value === "number" ? new Date(value * 1000) : new Date(value);
+  const date = typeof value === "number" ? parseHidEpochDate(value) : new Date(value);
   return Number.isNaN(date.getTime()) ? undefined : date;
 }
 
+function isValidIdentifierId(value: unknown) {
+  if (value === undefined || value === null || value === "") return false;
+  return Number(value) >= 0;
+}
+
+function parseHidEpochDate(value: number) {
+  const date = new Date(value * 1000);
+  return new Date(
+    date.getUTCFullYear(),
+    date.getUTCMonth(),
+    date.getUTCDate(),
+    date.getUTCHours(),
+    date.getUTCMinutes(),
+    date.getUTCSeconds(),
+  );
+}
+
+function formatHidEpochDate(value: number) {
+  const date = new Date(value * 1000);
+  if (Number.isNaN(date.getTime())) return "N/A";
+
+  const time = [
+    date.getUTCHours(),
+    date.getUTCMinutes(),
+    date.getUTCSeconds(),
+  ].map((part) => String(part).padStart(2, "0")).join(":");
+
+  return `${time} ${date.getUTCDate()}/${date.getUTCMonth() + 1}/${date.getUTCFullYear()}`;
+}
+
 function openHistoryDialog(row: AccessRow) {
   selectedHistoryRow.value = row;
   historyDialog.value = true;

package/components/HidReaderForm.vue

@@ -17,16 +17,18 @@
           class="mb-3"
         />
 
-        <div class="field-label">Base URL / IP address <span>*</span></div>
-        <v-text-field
-          v-model="draft.baseUrl"
-          aria-label="Base URL / IP address"
-          placeholder="http://192.168.0.129"
-          variant="outlined"
-          density="compact"
-          hide-details="auto"
-          class="mb-3"
-        />
+        <template v-if="mode === 'add'">
+          <div class="field-label">Base URL / IP address <span>*</span></div>
+          <v-text-field
+            v-model="draft.baseUrl"
+            aria-label="Base URL / IP address"
+            placeholder="http://192.168.x.x."
+            variant="outlined"
+            density="compact"
+            hide-details="auto"
+            class="mb-3"
+          />
+        </template>
 
         <div class="field-label">Device ID <span>*</span></div>
         <v-text-field
@@ -166,12 +168,18 @@ function close() {
 }
 
 function submit() {
-  emit("submit", {
+  const payload: Record<string, any> = {
     ...draft,
     monitorPath: monitorEnabled.value ? "api/notifications" : "",
     enabled: monitorEnabled.value,
     status: monitorEnabled.value ? "active" : "inactive",
-  });
+  };
+
+  if (props.mode === "edit") {
+    delete payload.baseUrl;
+  }
+
+  emit("submit", payload);
 }
 </script>
 

package/components/HidReaderManagement.vue

@@ -38,31 +38,26 @@
         <v-btn icon="mdi-refresh" variant="text" density="comfortable" :loading="loading" @click="loadReaders" />
       </div>
 
-      <v-table>
+      <v-table class="reader-table">
         <thead>
           <tr>
-            <th>Name</th>
-            <th>Location</th>
-            <th>Base URL</th>
-            <th>Device ID</th>
-            <th>Status</th>
-            <th>Last sync at</th>
-            <th>Last sync message</th>
-            <th class="text-right"></th>
+            <th class="name-column">Name</th>
+            <th class="location-column">Location</th>
+            <th class="device-column">Device ID</th>
+            <th class="status-column">Status</th>
+            <th class="sync-at-column">Last sync at</th>
+            <th class="message-column">Last sync message</th>
+            <th class="action-column"></th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="reader in filteredReaders" :key="reader._id">
-            <td>{{ reader.name || "N/A" }}</td>
-            <td>{{ reader.location || "N/A" }}</td>
-            <td>
-              <a v-if="reader.baseUrl" :href="reader.baseUrl" target="_blank" rel="noopener">
-                {{ reader.baseUrl }}
-              </a>
-              <span v-else>N/A</span>
+            <td class="name-cell">
+              <span class="cell-strong">{{ reader.name || "N/A" }}</span>
             </td>
-            <td>{{ reader.deviceId || "N/A" }}</td>
-            <td>
+            <td class="location-cell">{{ reader.location || "N/A" }}</td>
+            <td class="device-cell">{{ reader.deviceId || "N/A" }}</td>
+            <td class="status-cell">
               <v-chip
                 size="small"
                 variant="flat"
@@ -72,12 +67,22 @@
                 {{ formatReaderStatus(resolveReaderStatus(reader)) }}
               </v-chip>
             </td>
-            <td>{{ formatDate(reader.lastSyncAt) }}</td>
-            <td>{{ reader.lastSyncMessage || "N/A" }}</td>
-            <td class="text-right">
+            <td class="sync-at-cell">{{ formatDate(reader.lastSyncAt) }}</td>
+            <td class="message-cell">
+              <span class="message-text" :title="reader.lastSyncMessage || 'N/A'">
+                {{ reader.lastSyncMessage || "N/A" }}
+              </span>
+            </td>
+            <td class="action-cell">
               <v-menu>
                 <template #activator="{ props: menuProps }">
-                  <v-btn v-bind="menuProps" icon="mdi-dots-vertical" variant="text" density="comfortable" />
+                  <v-btn
+                    v-bind="menuProps"
+                    icon="mdi-dots-vertical"
+                    variant="text"
+                    density="comfortable"
+                    class="action-menu-button"
+                  />
                 </template>
 
                 <v-list density="compact" min-width="180">
@@ -112,7 +117,6 @@
         <v-card-text>
           <div class="detail-grid">
             <span>HID reader name</span><strong>{{ selectedReader?.name || "N/A" }}</strong>
-            <span>Base URL / IP address</span><strong>{{ selectedReader?.baseUrl || "N/A" }}</strong>
             <span>Device ID</span><strong>{{ selectedReader?.deviceId || "N/A" }}</strong>
             <span>Location</span><strong>{{ selectedReader?.location || "N/A" }}</strong>
             <span>Monitor Path</span><strong>{{ selectedReader?.monitorPath || "N/A" }}</strong>
@@ -140,10 +144,6 @@
           <v-icon icon="mdi-database-sync-outline" color="#1976d2" size="48" />
           <h3>Test Device Connection</h3>
           <p>You are about to test the connection for {{ selectedReader?.name || "this HID Reader" }}.</p>
-          <div class="reader-action-meta">
-            <span>IP Address:</span>
-            <strong>{{ readerIpAddress }}</strong>
-          </div>
         </v-card-text>
 
         <v-card-text v-else-if="pendingAction === 'sync' && actionStage === 'confirm'" class="reader-action-content">
@@ -312,7 +312,7 @@ const confirmMessage = computed(() => {
     return `You're about to sync data with ${selectedReader.value?.name || "this HID Reader"}.`;
   }
   if (pendingAction.value === "test") {
-    return `You are about to test the connection to ${selectedReader.value?.baseUrl || "this HID Reader"}.`;
+    return `You are about to test the connection for ${selectedReader.value?.name || "this HID Reader"}.`;
   }
   return "Are you sure you want to permanently delete reader?";
 });
@@ -325,8 +325,6 @@ const confirmActionLabel = computed(() => {
   return "Confirm";
 });
 
-const readerIpAddress = computed(() => getReaderHost(selectedReader.value?.baseUrl));
-
 watch(
   () => props.site,
   () => loadReaders(),
@@ -830,15 +828,6 @@ function countFacialData(users: Record<string, any>[]) {
   return users.filter((user) => user.face || user.photo || user.image || user.imageUrl || user.faceImage).length;
 }
 
-function getReaderHost(value?: string) {
-  if (!value) return "N/A";
-  try {
-    return new URL(value).hostname || value;
-  } catch {
-    return value.replace(/^https?:\/\//, "").split("/")[0] || value;
-  }
-}
-
 function getFriendlyHidError(error: any) {
   const message = getHidErrorMessage(error);
   const lowerMessage = message.toLowerCase();
@@ -863,7 +852,7 @@ function getFriendlyHidError(error: any) {
     lowerMessage.includes("network error") ||
     lowerMessage.includes("no route to host")
   ) {
-    return "Unable to connect to the HID device. Please check that the reader is online, reachable from the server, and the Base URL/IP address is correct.";
+    return "Unable to connect to the HID device. Please check that the reader is online and reachable from the server.";
   }
 
   if (lowerMessage.includes("login failed") || lowerMessage.includes("session")) {
@@ -972,63 +961,119 @@ function formatReaderStatus(value?: string) {
   overflow-y: hidden;
 }
 
-.table-card :deep(table) {
+.reader-table :deep(table) {
   table-layout: fixed;
   width: 100%;
-  min-width: 1120px;
+  min-width: 920px;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.reader-table :deep(th) {
+  height: 44px;
+  background: #f8fafc;
+  color: #344054;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+  border-bottom: 1px solid #e7ebef;
+}
+
+.reader-table :deep(td) {
+  height: 64px;
+  color: #1f2937;
+  font-size: 13px;
+  border-bottom: 1px solid #edf0f3;
+  vertical-align: middle;
+}
+
+.reader-table :deep(tbody tr) {
+  transition: background-color 0.15s ease;
 }
 
-.table-card :deep(th),
-.table-card :deep(td) {
+.reader-table :deep(tbody tr:hover) {
+  background: #fbfcfe;
+}
+
+.reader-table :deep(th),
+.reader-table :deep(td) {
+  padding: 0 14px !important;
   white-space: nowrap;
 }
 
-.table-card :deep(th:nth-child(1)),
-.table-card :deep(td:nth-child(1)) {
+.name-column,
+.name-cell {
+  width: 19%;
+}
+
+.location-column,
+.location-cell {
   width: 14%;
 }
 
-.table-card :deep(th:nth-child(2)),
-.table-card :deep(td:nth-child(2)) {
+.device-column,
+.device-cell {
+  width: 15%;
+}
+
+.status-column,
+.status-cell {
   width: 12%;
 }
 
-.table-card :deep(th:nth-child(3)),
-.table-card :deep(td:nth-child(3)) {
-  width: 18%;
+.sync-at-column,
+.sync-at-cell {
+  width: 15%;
 }
 
-.table-card :deep(th:nth-child(4)),
-.table-card :deep(td:nth-child(4)) {
-  width: 12%;
+.message-column,
+.message-cell {
+  width: 20%;
+  min-width: 0;
 }
 
-.table-card :deep(th:nth-child(5)),
-.table-card :deep(td:nth-child(5)) {
-  width: 10%;
+.action-column,
+.action-cell {
+  width: 5%;
+  text-align: right;
 }
 
-.table-card :deep(th:nth-child(6)),
-.table-card :deep(td:nth-child(6)) {
-  width: 14%;
+.cell-strong {
+  display: block;
+  overflow: hidden;
+  color: #111827;
+  font-weight: 600;
+  text-overflow: ellipsis;
 }
 
-.table-card :deep(th:nth-child(7)),
-.table-card :deep(td:nth-child(7)) {
-  width: 14%;
+.location-cell,
+.device-cell,
+.sync-at-cell {
+  overflow: hidden;
+  color: #475467;
+  text-overflow: ellipsis;
+}
+
+.message-text {
+  display: block;
+  max-width: 100%;
   overflow: hidden;
+  color: #475467;
+  line-height: 1.35;
   text-overflow: ellipsis;
 }
 
-.table-card :deep(th:nth-child(8)),
-.table-card :deep(td:nth-child(8)) {
-  width: 6%;
+.action-menu-button {
+  color: #344054;
 }
 
 .table-refresh {
   display: flex;
-  padding: 8px 10px;
-  border-bottom: 1px solid #eeeeee;
+  justify-content: flex-start;
+  padding: 10px 14px;
+  border-bottom: 1px solid #e7ebef;
+  background: #ffffff;
 }
 
 .empty-state {
@@ -1116,18 +1161,6 @@ function formatReaderStatus(value?: string) {
   line-height: 1.45;
 }
 
-.reader-action-meta {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  color: #344054;
-  font-size: 13px;
-}
-
-.reader-action-meta strong {
-  font-weight: 700;
-}
-
 .reader-sync-review {
   justify-items: stretch;
   text-align: left;