@7365admin1/layer-common 3.0.8 → 3.0.9

package/components/HidAccessLogDashboard.vue

@@ -0,0 +1,1691 @@
+<template>
+  <section class="hid-access-log-dashboard">
+    <div class="toolbar">
+      <v-btn
+        rounded="xl"
+        class="text-none export-button"
+        variant="flat"
+        prepend-icon="mdi-download"
+        @click="openExportDialog"
+      >
+        Export
+      </v-btn>
+
+      <v-select
+        v-if="readers.length > 1"
+        v-model="selectedReaderId"
+        :items="readerOptions"
+        item-title="title"
+        item-value="value"
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="reader-input"
+        @update:model-value="loadDashboard"
+      />
+
+      <div class="toolbar-spacer" />
+
+      <v-text-field
+        v-model="search"
+        placeholder="Search"
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="search-input"
+      />
+
+      <v-select
+        v-model="status"
+        :items="statusOptions"
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="status-input"
+      />
+    </div>
+
+    <v-card flat border class="table-card">
+      <v-tabs
+        v-model="activeTab"
+        class="access-tabs"
+        density="compact"
+        @update:model-value="onTabChange"
+      >
+        <v-tab value="resident" class="text-none">Resident</v-tab>
+        <v-tab value="visitor" class="text-none">Visitor</v-tab>
+        <v-tab value="administrator" class="text-none">Administrator</v-tab>
+      </v-tabs>
+
+      <div class="table-body">
+        <v-table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Facial Data</th>
+              <th>Unit</th>
+              <th>Last Access Method</th>
+              <th>Last access time</th>
+              <th>Status</th>
+              <th class="text-right"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in paginatedRows" :key="row.key">
+              <td>{{ row.name }}</td>
+              <td>
+                <v-avatar v-if="row.faceImage" size="34" rounded="lg" class="hid-face-avatar">
+                  <v-img :src="row.faceImage" cover />
+                </v-avatar>
+                <span v-else>{{ row.facialData }}</span>
+              </td>
+              <td>{{ row.unit }}</td>
+              <td>{{ row.method }}</td>
+              <td>{{ row.lastAccessTime }}</td>
+              <td>
+                <v-chip
+                  size="small"
+                  variant="flat"
+                  class="status-chip"
+                  :class="row.status === 'Mapped' ? 'mapped-chip' : 'unmapped-chip'"
+                >
+                  {{ row.status }}
+                </v-chip>
+              </td>
+              <td class="text-right">
+                <v-btn
+                  icon="mdi-history"
+                  variant="text"
+                  density="comfortable"
+                  @click="openHistoryDialog(row)"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </v-table>
+
+        <div v-if="!filteredRows.length" class="empty-state">
+          No access logs found.
+        </div>
+      </div>
+
+      <div class="table-footer">
+        <span>{{ pageRange }}</span>
+        <v-btn
+          icon="mdi-chevron-left"
+          variant="text"
+          density="comfortable"
+          :disabled="page <= 1"
+          @click="page--"
+        />
+        <v-btn
+          icon="mdi-chevron-right"
+          variant="text"
+          density="comfortable"
+          :disabled="page >= pages"
+          @click="page++"
+        />
+      </div>
+    </v-card>
+
+    <v-dialog v-model="historyDialog" max-width="980">
+      <v-card class="history-dialog" rounded="lg">
+        <v-card-title class="history-title">Access Log</v-card-title>
+
+        <v-card-text class="history-body">
+          <div class="history-toolbar">
+            <v-btn
+              rounded="xl"
+              class="text-none export-button"
+              variant="flat"
+              prepend-icon="mdi-download"
+              @click="openExportDialog('history')"
+            >
+              Export Log
+            </v-btn>
+            <div class="toolbar-spacer" />
+            <v-btn icon="mdi-close" variant="text" density="comfortable" @click="historyDialog = false" />
+          </div>
+
+          <v-card flat border class="history-table-card">
+            <div class="table-refresh">
+              <v-icon size="16">mdi-refresh</v-icon>
+            </div>
+            <v-table>
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Unit No.</th>
+                  <th>Reader Location</th>
+                  <th>Access Method</th>
+                  <th>Access Date and Time</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="row in selectedHistoryRows" :key="row.key">
+                  <td>{{ row.name }}</td>
+                  <td>{{ row.unit }}</td>
+                  <td>{{ row.readerLocation }}</td>
+                  <td>{{ row.method }}</td>
+                  <td>{{ row.lastAccessTime }}</td>
+                </tr>
+              </tbody>
+            </v-table>
+
+            <div v-if="!selectedHistoryRows.length" class="empty-state">
+              No access logs found.
+            </div>
+          </v-card>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="exportDialog" max-width="430" persistent>
+      <v-card class="export-dialog" rounded="lg">
+        <v-card-title class="dialog-title">Export</v-card-title>
+
+        <v-card-text class="dialog-body">
+          <div class="field-label">Start Date <span>*</span></div>
+          <v-menu
+            v-model="startDateMenu"
+            :close-on-content-click="false"
+            location="bottom"
+            content-class="compact-date-menu"
+          >
+            <template #activator="{ props: menuProps }">
+              <v-text-field
+                v-bind="menuProps"
+                v-model="exportForm.startDate"
+                aria-label="Start Date"
+                prepend-inner-icon="mdi-calendar"
+                placeholder="DD/MM/YYYY"
+                density="compact"
+                variant="outlined"
+                hide-details="auto"
+                readonly
+                class="mb-3"
+              />
+            </template>
+            <v-date-picker
+              :model-value="parseExportDate(exportForm.startDate, false)"
+              hide-header
+              width="320"
+              class="compact-date-picker"
+              @update:model-value="setExportDate('startDate', $event)"
+            />
+          </v-menu>
+
+          <div class="field-label">End Date <span>*</span></div>
+          <v-menu
+            v-model="endDateMenu"
+            :close-on-content-click="false"
+            location="bottom"
+            content-class="compact-date-menu"
+          >
+            <template #activator="{ props: menuProps }">
+              <v-text-field
+                v-bind="menuProps"
+                v-model="exportForm.endDate"
+                aria-label="End Date"
+                prepend-inner-icon="mdi-calendar"
+                placeholder="DD/MM/YYYY"
+                density="compact"
+                variant="outlined"
+                hide-details="auto"
+                readonly
+                class="mb-3"
+              />
+            </template>
+            <v-date-picker
+              :model-value="parseExportDate(exportForm.endDate, false)"
+              hide-header
+              width="320"
+              class="compact-date-picker"
+              @update:model-value="setExportDate('endDate', $event)"
+            />
+          </v-menu>
+
+          <div class="field-label">Users</div>
+          <v-select
+            v-model="exportForm.users"
+            :items="userOptions"
+            item-title="title"
+            item-value="value"
+            aria-label="Users"
+            placeholder="Select"
+            density="compact"
+            variant="outlined"
+            hide-details="auto"
+            multiple
+            chips
+            closable-chips
+            class="mb-3"
+          />
+
+          <div class="field-label">Access Method</div>
+          <v-select
+            v-model="exportForm.accessMethod"
+            :items="accessMethodOptions"
+            aria-label="Access Method"
+            placeholder="Select"
+            density="compact"
+            variant="outlined"
+            hide-details="auto"
+            class="mb-3"
+          />
+
+          <div class="field-label">Reader Location</div>
+          <v-select
+            v-model="exportForm.readerLocation"
+            :items="readerLocationOptions"
+            aria-label="Reader Location"
+            placeholder="Select"
+            density="compact"
+            variant="outlined"
+            hide-details="auto"
+            class="mb-3"
+          />
+
+          <div class="field-label">Status (Optional)</div>
+          <v-select
+            v-model="exportForm.status"
+            :items="statusOptions"
+            aria-label="Status"
+            placeholder="Select"
+            density="compact"
+            variant="outlined"
+            hide-details="auto"
+          />
+        </v-card-text>
+
+        <v-card-actions class="dialog-actions pa-0">
+          <v-btn class="text-none action-cancel" variant="flat" height="48" @click="exportDialog = false">
+            Cancel
+          </v-btn>
+          <v-btn class="text-none action-submit" variant="flat" height="48" @click="exportRows">
+            Export
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </section>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  site: {
+    type: String,
+    required: true,
+  },
+});
+
+type AccessTab = "resident" | "visitor" | "administrator";
+type AccessRow = {
+  key: string;
+  identityKey: string;
+  name: string;
+  facialData: string;
+  faceImage?: string;
+  unit: string;
+  method: string;
+  lastAccessTime: string;
+  lastAccessDate?: Date;
+  readerLocation: string;
+  status: "Mapped" | "Unmapped";
+};
+
+type PdfAccessRow = {
+  name: string;
+  unit: string;
+  readerLocation: string;
+  method: string;
+  accessDateTime: string;
+};
+
+const { getReaders, getIdentities, getLogs, getUserImage, runObjectOperation, getReaderConfiguration } = useHidAmico();
+const { getVisitors } = useVisitor();
+
+const readers = ref<Record<string, any>[]>([]);
+const identities = ref<Record<string, any>[]>([]);
+const visitorRecords = ref<Record<string, any>>({});
+const logs = ref<Record<string, any>[]>([]);
+const liveAccessLogs = ref<Record<string, any>[]>([]);
+const readerConfiguration = ref<Record<string, any>>({});
+const administratorUserIds = ref<Set<number>>(new Set());
+const userImages = ref<Record<string, string>>({});
+const selectedReaderId = ref("");
+const activeTab = ref<AccessTab>("resident");
+const search = ref("");
+const status = ref("Status");
+const page = ref(1);
+const limit = 20;
+const loading = ref(false);
+const exportDialog = ref(false);
+const historyDialog = ref(false);
+const selectedHistoryRow = ref<AccessRow>();
+const exportScope = ref<"dashboard" | "history">("dashboard");
+const startDateMenu = ref(false);
+const endDateMenu = ref(false);
+const exportForm = reactive({
+  startDate: "",
+  endDate: "",
+  users: [] as string[],
+  accessMethod: "All",
+  readerLocation: "All",
+  status: "Status",
+});
+
+const statusOptions = ["Status", "Mapped", "Unmapped"];
+const accessMethodOptions = ["All", "Facial", "QR Code", "ID and Password", "PIN", "Card"];
+
+const readerOptions = computed(() =>
+  readers.value.map((reader) => ({
+    title: reader.name || reader.deviceId || reader._id,
+    value: reader._id,
+  })),
+);
+
+const selectedReader = computed(() =>
+  readers.value.find((reader) => reader._id === selectedReaderId.value),
+);
+
+const readerLocationOptions = computed(() => {
+  const locations = readers.value
+    .map((reader) => reader.location)
+    .filter((location) => !!location);
+  return ["All", ...Array.from(new Set(locations))];
+});
+
+const userOptions = computed(() => [
+  { title: "All", value: "all" },
+  ...identities.value.map((identity) => ({
+    title: getName(identity),
+    value: getIdentityKey(identity),
+  })),
+]);
+
+const rows = computed<AccessRow[]>(() => {
+  const logRows = normalizeAccessRows(normalizeAccessLogs()).filter(isVisibleForActiveTab);
+  return logRows.sort(sortAccessRowsByDateDesc);
+});
+
+const selectedHistoryRows = computed<AccessRow[]>(() => {
+  if (!selectedHistoryRow.value) return [];
+
+  const selectedKey = selectedHistoryRow.value.identityKey;
+  const matchedLogs = logs.value.filter((log) => getLogIdentityKey(log) === selectedKey);
+  const matchedLiveLogs = liveAccessLogs.value.filter((log) => getAccessLogIdentityKey(log) === selectedKey);
+
+  if (!matchedLogs.length && !matchedLiveLogs.length) {
+    return rows.value.filter((row) => row.identityKey === selectedKey);
+  }
+
+  const historyRows = matchedLogs.map((log, index) => ({
+    key: `${selectedHistoryRow.value?.key || "history"}-${log._id || log.id || index}`,
+    identityKey: selectedKey,
+    name: selectedHistoryRow.value?.name || "N/A",
+    facialData: selectedHistoryRow.value?.facialData || "N/A",
+    faceImage: selectedHistoryRow.value?.faceImage,
+    unit: selectedHistoryRow.value?.unit || "N/A",
+    method: getAccessMethod({}, log),
+    lastAccessTime: formatDate(getLogAccessDateValue(log)),
+    lastAccessDate: parseDate(getLogAccessDateValue(log)),
+    readerLocation: getLogReaderLocation(log),
+    status: selectedHistoryRow.value?.status || "Mapped",
+  }));
+
+  const liveRows = matchedLiveLogs.map((log, index) => ({
+    key: `${selectedHistoryRow.value?.key || "history"}-live-${log.id || log.time || index}`,
+    identityKey: selectedKey,
+    name: selectedHistoryRow.value?.name || "N/A",
+    facialData: selectedHistoryRow.value?.facialData || "N/A",
+    faceImage: selectedHistoryRow.value?.faceImage,
+    unit: selectedHistoryRow.value?.unit || "N/A",
+    method: getAccessMethod({}, { payload: { rawAccessLog: log } }),
+    lastAccessTime: formatDate(getAccessLogTime(log, {})),
+    lastAccessDate: parseDate(getAccessLogTime(log, {})),
+    readerLocation: selectedReader.value?.location || "N/A",
+    status: selectedHistoryRow.value?.status || "Mapped",
+  }));
+
+  return [...historyRows, ...liveRows].sort((a, b) => {
+    const aTime = a.lastAccessDate?.getTime() || 0;
+    const bTime = b.lastAccessDate?.getTime() || 0;
+    return bTime - aTime;
+  });
+});
+
+const filteredRows = computed(() => {
+  const query = search.value.trim().toLowerCase();
+  return rows.value.filter((row) => {
+    const matchesSearch = !query || [
+      row.name,
+      row.facialData,
+      row.unit,
+      row.method,
+      row.lastAccessTime,
+      row.status,
+    ].some((value) => String(value ?? "").toLowerCase().includes(query));
+
+    const matchesStatus = status.value === "Status" || row.status === status.value;
+
+    return matchesSearch && matchesStatus;
+  });
+});
+
+const pages = computed(() => Math.max(1, Math.ceil(filteredRows.value.length / limit)));
+
+const paginatedRows = computed(() => {
+  const currentPage = Math.min(page.value, pages.value);
+  const start = (currentPage - 1) * limit;
+  return filteredRows.value.slice(start, start + limit);
+});
+
+const pageRange = computed(() => {
+  if (!filteredRows.value.length) return "0-0 of 0";
+  const currentPage = Math.min(page.value, pages.value);
+  const start = (currentPage - 1) * limit + 1;
+  const end = Math.min(currentPage * limit, filteredRows.value.length);
+  return `${start}-${end} of ${filteredRows.value.length}`;
+});
+
+const exportRowsData = computed(() =>
+  getExportSourceRows().filter((row) => {
+    const selectedUsers = exportForm.users.filter((user) => user !== "all");
+    const matchesUsers = !selectedUsers.length || selectedUsers.includes(row.key) || selectedUsers.includes(row.identityKey);
+    const matchesMethod = exportForm.accessMethod === "All" || row.method === exportForm.accessMethod;
+    const matchesLocation = exportForm.readerLocation === "All" || row.readerLocation === exportForm.readerLocation;
+    const matchesStatus = exportForm.status === "Status" || row.status === exportForm.status;
+    const matchesDate = isWithinExportRange(row.lastAccessDate);
+
+    return matchesUsers && matchesMethod && matchesLocation && matchesStatus && matchesDate;
+  }),
+);
+
+watch(
+  () => props.site,
+  () => init(),
+  { immediate: true },
+);
+
+watch([search, status, activeTab], () => {
+  page.value = 1;
+});
+
+watch(pages, () => {
+  if (page.value > pages.value) page.value = pages.value;
+});
+
+async function init() {
+  await loadReaders();
+  await loadDashboard();
+}
+
+async function loadReaders() {
+  if (!props.site) return;
+  const response = await getReaders({ site: props.site, page: 1, limit: 100 });
+  readers.value = response?.items ?? response?.data?.items ?? response?.data?.readers ?? [];
+  if (!selectedReaderId.value && readers.value.length) {
+    selectedReaderId.value = readers.value[0]._id;
+  }
+}
+
+async function loadDashboard() {
+  if (!selectedReaderId.value) {
+    identities.value = [];
+    visitorRecords.value = {};
+    logs.value = [];
+    liveAccessLogs.value = [];
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const isAdministratorTab = activeTab.value === "administrator";
+    const isVisitorTab = activeTab.value === "visitor";
+    const [identityResponse, logResponse, hidAccessLogs, configurationResponse, roleResponse, visitorResponse] = await Promise.all([
+      getIdentities(selectedReaderId.value, {
+        page: 1,
+        limit: 500,
+        ...(!isAdministratorTab ? { type: getIdentityType(activeTab.value) } : {}),
+      }),
+      getLogs(selectedReaderId.value, {
+        page: 1,
+        limit: 500,
+      }),
+      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),
+    ]);
+
+    const loadedIdentities = identityResponse?.items ?? identityResponse?.data?.items ?? identityResponse?.data?.identities ?? [];
+    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>) => {
+          const hidUserId = toHidNumericId(identity.hidUserId);
+          return Boolean(hidUserId && administratorUserIds.value.has(hidUserId));
+        })
+      : isVisitorTab
+        ? loadedIdentities.filter((identity: Record<string, any>) => Boolean(getVisitorRecord(identity)))
+      : loadedIdentities;
+    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;
+  }
+}
+
+async function loadUserImages(items: Record<string, any>[]) {
+  if (!selectedReaderId.value) return;
+
+  await Promise.all(items.map(async (identity) => {
+    const hidUserId = identity.hidUserId;
+    const key = String(hidUserId || "");
+    if (!hidUserId || userImages.value[key] || identity?.metadata?.photo) return;
+
+    try {
+      const response = await getUserImage(selectedReaderId.value, hidUserId);
+      const image = response?.data || response;
+      userImages.value[key] = image?.base64
+        ? `data:${image.contentType || "image/jpeg"};base64,${image.base64}`
+        : "";
+    } catch {
+      userImages.value[key] = "";
+    }
+  }));
+}
+
+async function loadLiveAccessLogs(readerId: string) {
+  const allLogs: Record<string, any>[] = [];
+  const limit = 500;
+  const maxPages = 20;
+
+  for (let pageIndex = 0; pageIndex < maxPages; pageIndex += 1) {
+    try {
+      const response = await runObjectOperation(readerId, {
+      operation: "load",
+      object: "access_logs",
+      where: {
+        access_logs: {},
+      },
+        limit,
+        offset: pageIndex * limit,
+      });
+
+      const pageLogs = normalizeHidAccessLogs(response);
+      allLogs.push(...pageLogs);
+
+      if (pageLogs.length < limit) break;
+    } catch (error) {
+      console.warn("Unable to load HID live access logs", error);
+      break;
+    }
+  }
+
+  return dedupeAccessLogs(allLogs).sort((a, b) => {
+    const aTime = parseDate(getAccessLogTime(a, {}))?.getTime() || 0;
+    const bTime = parseDate(getAccessLogTime(b, {}))?.getTime() || 0;
+    return bTime - aTime;
+  });
+}
+
+async function loadReaderConfiguration(readerId: string) {
+  try {
+    return await getReaderConfiguration(readerId, {
+      access_logs: [],
+      event_types: [],
+      log_types: [],
+      identification_rules: [],
+      portals: [],
+      users: [],
+    });
+  } catch (error) {
+    console.warn("Unable to load HID configuration", error);
+    return {};
+  }
+}
+
+function onTabChange() {
+  page.value = 1;
+  loadDashboard();
+}
+
+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));
+}
+
+function loadAdministratorRoles(readerId: string) {
+  return runObjectOperation(readerId, {
+    operation: "load",
+    object: "user_roles",
+    where: {
+      user_roles: {
+        role: 1,
+      },
+    },
+    limit: 500,
+    offset: 0,
+  });
+}
+
+function getAdministratorRoleUserIds(response: Record<string, any> | null) {
+  const data = response?.data || response || {};
+  const roles =
+    data?.user_roles ||
+    data?.data?.user_roles ||
+    data?.result?.user_roles ||
+    [];
+
+  return new Set(
+    (Array.isArray(roles) ? roles : [])
+      .map((role) => toHidNumericId(role.user_id))
+      .filter((userId): userId is number => Boolean(userId)),
+  );
+}
+
+function toHidNumericId(value: unknown) {
+  const raw = String(value ?? "").trim();
+  if (!raw) return undefined;
+  const numeric = Number(raw);
+  if (Number.isInteger(numeric) && numeric > 0) return numeric;
+  const match = raw.match(/(\d+)$/);
+  const parsed = match ? Number(match[1]) : NaN;
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined;
+}
+
+function getIdentityKey(identity: Record<string, any>) {
+  return [
+    identity.hidUserId,
+    identity.registration,
+    identity.cardNo,
+  ].filter(Boolean).join("|");
+}
+
+function getLogIdentityKey(log: Record<string, any>) {
+  const identity = log.payload?.identity || {};
+  const lookup = log.payload?.identityLookup || {};
+  const rawLog = log.payload?.rawAccessLog || log;
+  return [
+    identity.hidUserId || lookup.hidUserId || rawLog.user_id || rawLog.userId || rawLog.hidUserId,
+    identity.registration || lookup.registration,
+    identity.cardNo || lookup.cardNo || rawLog.card_value || rawLog.cardNo,
+  ].filter(Boolean).join("|");
+}
+
+function getName(identity: Record<string, any>) {
+  return getVisitorRecord(identity)?.name || identity.metadata?.name || identity.name || "N/A";
+}
+
+function getFacialData(identity: Record<string, any>) {
+  return identity.metadata?.facialData || (identity.metadata?.photo ? identity.hidUserId : "N/A");
+}
+
+function getUserImageSrc(identity: Record<string, any>) {
+  return identity?.metadata?.photo || userImages.value[String(identity?.hidUserId || "")] || "";
+}
+
+function getUnit(identity: Record<string, any>) {
+  const visitor = getVisitorRecord(identity);
+  if (visitor) {
+    return visitor.unitName || [visitor.block, visitor.level, visitor.unit].filter(Boolean).join("/") || "N/A";
+  }
+
+  return identity.metadata?.unitLabel || [identity.metadata?.block, identity.metadata?.level, identity.metadata?.unit].filter(Boolean).join("/") || "N/A";
+}
+
+function getVisitorRecord(identity: Record<string, any>) {
+  const visitorId = identity?.visitor;
+  return visitorId ? visitorRecords.value[String(visitorId)] : undefined;
+}
+
+function getAccessMethod(identity: Record<string, any>, log?: Record<string, any>) {
+  const payload = log?.payload?.rawAccessLog || log?.payload || log || {};
+  const configuredLogType = getConfigurationLabel("log_types", payload.log_type_id || payload.logTypeId);
+  if (configuredLogType) return configuredLogType;
+  const configuredRule = getConfigurationLabel("identification_rules", payload.identification_rule_id || payload.identificationRuleId);
+  if (configuredRule) return configuredRule;
+  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 (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";
+  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);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+}
+
+function openHistoryDialog(row: AccessRow) {
+  selectedHistoryRow.value = row;
+  historyDialog.value = true;
+}
+
+function openExportDialog(scope: "dashboard" | "history" = "dashboard") {
+  exportScope.value = scope;
+
+  if (scope === "history" && selectedHistoryRow.value) {
+    exportForm.users = [selectedHistoryRow.value.identityKey];
+  } else {
+    exportForm.users = ["all"];
+  }
+
+  const dateRange = getDefaultExportDateRange();
+  const today = toDisplayDate(new Date());
+  exportForm.startDate = dateRange.startDate || today;
+  exportForm.endDate = dateRange.endDate || today;
+  exportDialog.value = true;
+}
+
+function getDefaultExportDateRange() {
+  const dates = getExportSourceRows()
+    .map((row) => row.lastAccessDate)
+    .filter((date): date is Date => Boolean(date && !Number.isNaN(date.getTime())))
+    .sort((a, b) => a.getTime() - b.getTime());
+
+  return {
+    startDate: dates[0] ? toDisplayDate(dates[0]) : "",
+    endDate: dates[dates.length - 1] ? toDisplayDate(dates[dates.length - 1]) : "",
+  };
+}
+
+function toDisplayDate(date: Date) {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  return `${day}/${month}/${date.getFullYear()}`;
+}
+
+function isWithinExportRange(value?: Date) {
+  if (!value || (!exportForm.startDate && !exportForm.endDate)) return true;
+
+  const start = parseExportDate(exportForm.startDate, false);
+  const end = parseExportDate(exportForm.endDate, true);
+
+  if (start && value < start) return false;
+  if (end && value > end) return false;
+  return true;
+}
+
+function parseExportDate(value: string, endOfDay: boolean) {
+  if (!value) return undefined;
+  const match = value.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+  if (!match) return undefined;
+  const [, day, month, year] = match;
+  const date = new Date(Number(year), Number(month) - 1, Number(day));
+  if (Number.isNaN(date.getTime())) return undefined;
+  if (endOfDay) {
+    date.setHours(23, 59, 59, 999);
+  } else {
+    date.setHours(0, 0, 0, 0);
+  }
+  return date;
+}
+
+function setExportDate(field: "startDate" | "endDate", value: unknown) {
+  const date = normalizePickerDate(value);
+  if (!date) return;
+
+  exportForm[field] = toDisplayDate(date);
+  if (field === "startDate") {
+    startDateMenu.value = false;
+  } else {
+    endDateMenu.value = false;
+  }
+}
+
+function normalizePickerDate(value: unknown) {
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const [year, month, day] = value.split("-").map(Number);
+    if (year && month && day) {
+      return new Date(year, month - 1, day);
+    }
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? undefined : date;
+  }
+  return undefined;
+}
+
+function normalizeAccessLogs() {
+  const persistedRows = logs.value.flatMap((event, eventIndex) => {
+    const rawLogs = getRawAccessLogs(event);
+    if (rawLogs.length) {
+      return rawLogs.map((rawLog, rawIndex) => mapAccessLogToRow(rawLog, event, `${eventIndex}-${rawIndex}`));
+    }
+
+    if (event.payload?.identity || event.payload?.identityLookup) {
+      return [mapAccessLogToRow(event.payload, event, `${eventIndex}`)];
+    }
+
+    return [];
+  });
+
+  const liveRows = liveAccessLogs.value.map((rawLog, rawIndex) =>
+    mapAccessLogToRow(rawLog, { id: "hid-live", payload: { reader: selectedReader.value } }, `live-${rawIndex}`),
+  );
+
+  return [...persistedRows, ...liveRows];
+}
+
+function normalizeAccessRows(rows: AccessRow[]) {
+  const seen = new Set<string>();
+  return rows.filter((row) => {
+    const key = [
+      row.identityKey,
+      row.lastAccessDate?.getTime() || row.lastAccessTime,
+      row.method,
+      row.readerLocation,
+    ].join("|");
+
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
+function sortAccessRowsByDateDesc(a: AccessRow, b: AccessRow) {
+  const aTime = a.lastAccessDate?.getTime() || 0;
+  const bTime = b.lastAccessDate?.getTime() || 0;
+  return bTime - aTime;
+}
+
+function dedupeAccessLogs(items: Record<string, any>[]) {
+  const seen = new Set<string>();
+  return items.filter((item) => {
+    const key = [
+      item.id,
+      item.time,
+      item.user_id ?? item.userId ?? item.hidUserId,
+      item.card_value ?? item.cardNo,
+    ].join("|");
+
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
+function normalizeHidAccessLogs(response: Record<string, any>) {
+  const data = response?.data || response || {};
+  const accessLogs =
+    data.access_logs ||
+    data.data?.access_logs ||
+    data.accessLogs ||
+    data.data?.accessLogs ||
+    data.result?.access_logs ||
+    data.result?.data?.access_logs;
+
+  return Array.isArray(accessLogs) ? accessLogs : [];
+}
+
+function normalizeReaderConfiguration(response: Record<string, any>) {
+  const data = response?.data || response || {};
+  return data?.data || data?.result || data;
+}
+
+function getConfigurationLabel(section: string, id: unknown) {
+  if (id === undefined || id === null || id === "" || Number(id) === -1) return "";
+  const entries = readerConfiguration.value?.[section];
+  if (!entries) return "";
+
+  const items = Array.isArray(entries)
+    ? entries
+    : typeof entries === "object"
+      ? Object.values(entries)
+      : [];
+
+  const match = items.find((item: any) => {
+    if (!item || typeof item !== "object") return false;
+    return String(item.id ?? item.value ?? item.key ?? item.code) === String(id);
+  }) as Record<string, any> | undefined;
+
+  return match?.name || match?.label || match?.description || match?.title || "";
+}
+
+function getRawAccessLogs(event: Record<string, any>) {
+  const payload = event.payload || {};
+  const result = payload.result || payload.data || {};
+  const accessLogs =
+    result.access_logs ||
+    result.data?.access_logs ||
+    result.accessLogs ||
+    payload.access_logs ||
+    payload.accessLogs;
+
+  return Array.isArray(accessLogs) ? accessLogs : [];
+}
+
+function mapAccessLogToRow(rawLog: Record<string, any>, event: Record<string, any>, index: string): AccessRow {
+  const identity = findIdentityForAccessLog(rawLog, event);
+  const rawAccessTime = getAccessLogTime(rawLog, event);
+  const identityKey = identity ? getIdentityKey(identity) : getLogIdentityKey({ ...event, payload: { ...event.payload, rawAccessLog: rawLog } });
+
+  return {
+    key: `${event._id || event.id || "log"}-${rawLog.id || rawLog.time || index}`,
+    identityKey,
+    name: identity ? getName(identity) : getRawLogName(rawLog, event),
+    facialData: identity ? getFacialData(identity) : "N/A",
+    faceImage: identity ? getUserImageSrc(identity) : "",
+    unit: identity ? getUnit(identity) : "N/A",
+    method: getAccessMethod(identity || {}, { ...event, payload: { ...event.payload, rawAccessLog: rawLog } }),
+    lastAccessTime: formatDate(rawAccessTime),
+    lastAccessDate: parseDate(rawAccessTime),
+    readerLocation: getLogReaderLocation(event),
+    status: identity ? "Mapped" : "Unmapped",
+  };
+}
+
+function findIdentityForAccessLog(rawLog: Record<string, any>, event: Record<string, any>) {
+  const eventIdentityId = event.payload?.identity?._id;
+  if (eventIdentityId) {
+    const byId = identities.value.find((identity) => String(identity._id) === String(eventIdentityId));
+    if (byId) return byId;
+  }
+
+  const hidUserId = rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId ?? event.payload?.identity?.hidUserId ?? event.payload?.identityLookup?.hidUserId;
+  const registration = rawLog.registration ?? event.payload?.identity?.registration ?? event.payload?.identityLookup?.registration;
+  const cardNo = rawLog.card_value || rawLog.cardNo || event.payload?.identity?.cardNo || event.payload?.identityLookup?.cardNo;
+
+  return identities.value.find((identity) => {
+    return (
+      (hidUserId !== undefined && hidUserId !== null && String(identity.hidUserId) === String(hidUserId)) ||
+      (registration && identity.registration === registration) ||
+      (cardNo && String(identity.cardNo) === String(cardNo))
+    );
+  });
+}
+
+function getLatestAccessLogForIdentity(identity: Record<string, any>) {
+  const identityKey = getIdentityKey(identity);
+  const accessLogs = [
+    ...liveAccessLogs.value,
+    ...logs.value.flatMap((event) => getRawAccessLogs(event)),
+  ];
+
+  return accessLogs
+    .filter((log) => getAccessLogIdentityKey(log) === identityKey)
+    .sort((a, b) => {
+      const aTime = parseDate(getAccessLogTime(a, {}))?.getTime() || 0;
+      const bTime = parseDate(getAccessLogTime(b, {}))?.getTime() || 0;
+      return bTime - aTime;
+    })[0];
+}
+
+function getAccessLogIdentityKey(rawLog: Record<string, any>) {
+  return [
+    rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId,
+    rawLog.registration,
+    rawLog.card_value || rawLog.cardNo,
+  ].filter(Boolean).join("|");
+}
+
+function getAccessLogTime(rawLog: Record<string, any>, event: Record<string, any>) {
+  return rawLog.time || rawLog.createdAt || rawLog.accessedAt || event.createdAt;
+}
+
+function getRawLogName(rawLog: Record<string, any>, event: Record<string, any>) {
+  return rawLog.name || event.payload?.identity?.name || event.payload?.name || "Unmapped";
+}
+
+function exportRows() {
+  exportRowsAsPdf();
+  exportDialog.value = false;
+}
+
+function getExportSourceRows() {
+  return exportScope.value === "history" ? selectedHistoryRows.value : filteredRows.value;
+}
+
+function getLogAccessDateValue(log: Record<string, any>) {
+  const payload = log.payload || {};
+  return log.createdAt || payload.createdAt || payload.accessedAt || payload.time || payload.eventTime;
+}
+
+function getLogReaderLocation(log: Record<string, any>) {
+  return log.payload?.reader?.location || log.payload?.readerLocation || selectedReader.value?.location || "N/A";
+}
+
+async function exportRowsAsPdf() {
+  if (typeof window === "undefined") return;
+
+  const { jsPDF } = await import("jspdf");
+  const pdf = new jsPDF({ unit: "mm", format: "a4", orientation: "portrait" });
+  const rows = exportRowsData.value.map((row) => ({
+    name: row.name,
+    unit: row.unit,
+    readerLocation: row.readerLocation,
+    method: row.method,
+    accessDateTime: row.lastAccessTime,
+  }));
+
+  drawAccessLogPdf(pdf, rows);
+  pdf.save(`hid-access-log-${activeTab.value}.pdf`);
+}
+
+function drawAccessLogPdf(pdf: any, rows: PdfAccessRow[]) {
+  const margin = 12;
+  const pageWidth = pdf.internal.pageSize.getWidth();
+  const pageHeight = pdf.internal.pageSize.getHeight();
+  const tableWidth = pageWidth - margin * 2;
+  const columns = [
+    { title: "Name", key: "name", width: 38 },
+    { title: "Unit No.", key: "unit", width: 26 },
+    { title: "Reader Location", key: "readerLocation", width: 42 },
+    { title: "Access Method", key: "method", width: 36 },
+    { title: "Access Date and Time", key: "accessDateTime", width: tableWidth - 142 },
+  ];
+  let y = margin;
+
+  const addHeader = () => {
+    pdf.setFillColor(6, 45, 66);
+    pdf.rect(margin, y, tableWidth, 14, "F");
+    pdf.setTextColor(255, 255, 255);
+    pdf.setFont("helvetica", "bold");
+    pdf.setFontSize(13);
+    pdf.text("Access Log", margin + 4, y + 9);
+    y += 20;
+
+    pdf.setTextColor(10, 38, 56);
+    pdf.setFontSize(9);
+    pdf.setFont("helvetica", "bold");
+    pdf.text("Date", margin, y);
+    pdf.text("Site", margin + 72, y);
+    pdf.setFont("helvetica", "normal");
+    pdf.text(`${exportForm.startDate || "-"} - ${exportForm.endDate || "-"}`, margin, y + 6);
+    pdf.text(getPdfSiteName(), margin + 72, y + 6);
+    y += 16;
+  };
+
+  const addTableHeader = () => {
+    pdf.setFillColor(241, 243, 245);
+    pdf.rect(margin, y, tableWidth, 9, "F");
+    pdf.setDrawColor(218, 224, 231);
+    pdf.setTextColor(10, 38, 56);
+    pdf.setFont("helvetica", "bold");
+    pdf.setFontSize(8);
+
+    let x = margin;
+    columns.forEach((column) => {
+      pdf.rect(x, y, column.width, 9);
+      pdf.text(column.title, x + 2, y + 6);
+      x += column.width;
+    });
+    y += 9;
+  };
+
+  const ensureSpace = (height: number) => {
+    if (y + height <= pageHeight - margin) return;
+    pdf.addPage();
+    y = margin;
+    addHeader();
+    addTableHeader();
+  };
+
+  addHeader();
+  addTableHeader();
+
+  if (!rows.length) {
+    pdf.setFont("helvetica", "normal");
+    pdf.setFontSize(10);
+    pdf.setTextColor(104, 115, 130);
+    pdf.text("No access logs found.", margin, y + 8);
+    return;
+  }
+
+  rows.forEach((row) => {
+    const cellLines = columns.map((column) => {
+      const value = String(row[column.key as keyof PdfAccessRow] ?? "N/A");
+      return pdf.splitTextToSize(value, column.width - 4);
+    });
+    const rowHeight = Math.max(9, Math.max(...cellLines.map((lines: string[]) => lines.length)) * 4.2 + 5);
+    ensureSpace(rowHeight);
+
+    pdf.setFont("helvetica", "normal");
+    pdf.setFontSize(8);
+    pdf.setTextColor(10, 38, 56);
+
+    let x = margin;
+    columns.forEach((column, index) => {
+      pdf.setDrawColor(230, 233, 237);
+      pdf.rect(x, y, column.width, rowHeight);
+      pdf.text(cellLines[index], x + 2, y + 5);
+      x += column.width;
+    });
+    y += rowHeight;
+  });
+}
+
+function buildPdfHtml() {
+  const rows = exportRowsData.value.map((row) => ({
+    name: row.name,
+    unit: row.unit,
+    readerLocation: row.readerLocation,
+    method: row.method,
+    accessDateTime: row.lastAccessTime,
+  }));
+  const groupedRows = groupRowsByName(rows);
+  const dateRange = `${exportForm.startDate || "-"} - ${exportForm.endDate || "-"}`;
+  const siteName = getPdfSiteName();
+
+  return `
+    <div class="hid-access-log-pdf">
+      <style>
+        .hid-access-log-pdf {
+          width: 190mm;
+          min-height: 277mm;
+          padding: 10mm;
+          background: #ffffff;
+          color: #0a2638;
+          font-family: Arial, Helvetica, sans-serif;
+          font-size: 9px;
+        }
+
+        .pdf-summary {
+          display: grid;
+          grid-template-columns: 64mm 64mm 1fr;
+          border: 1px solid #d9dee5;
+          margin-bottom: 8mm;
+        }
+
+        .pdf-title {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #062d42;
+          color: #ffffff;
+          font-size: 12px;
+          font-weight: 600;
+        }
+
+        .pdf-summary-cell {
+          min-height: 18mm;
+          padding: 4mm 3mm;
+          border-left: 1px solid #d9dee5;
+        }
+
+        .pdf-label {
+          display: block;
+          margin-bottom: 2mm;
+          color: #314155;
+          font-size: 7px;
+          font-weight: 700;
+        }
+
+        .pdf-value {
+          font-size: 10px;
+          line-height: 1.35;
+        }
+
+        .pdf-table {
+          width: 100%;
+          border-collapse: collapse;
+          margin-bottom: 8mm;
+          page-break-inside: avoid;
+        }
+
+        .pdf-table th {
+          background: #f1f1f1;
+          color: #0a2638;
+          font-size: 8px;
+          font-weight: 700;
+          text-align: left;
+          padding: 4mm 3mm;
+          border: 1px solid #e2e5e9;
+        }
+
+        .pdf-table td {
+          padding: 3.2mm 3mm;
+          border: 1px solid #e6e9ed;
+          color: #0a2638;
+          vertical-align: middle;
+        }
+
+        .pdf-empty {
+          padding: 12mm;
+          border: 1px solid #e6e9ed;
+          color: #687382;
+          text-align: center;
+        }
+      </style>
+
+      <div class="pdf-summary">
+        <div class="pdf-title">Access Log</div>
+        <div class="pdf-summary-cell">
+          <span class="pdf-label">Date</span>
+          <div class="pdf-value">${escapeHtml(dateRange)}</div>
+        </div>
+        <div class="pdf-summary-cell">
+          <span class="pdf-label">Site</span>
+          <div class="pdf-value">${escapeHtml(siteName)}</div>
+        </div>
+      </div>
+
+      ${
+        groupedRows.length
+          ? groupedRows.map((group) => buildPdfTable(group.rows)).join("")
+          : `<div class="pdf-empty">No access logs found.</div>`
+      }
+    </div>
+  `;
+}
+
+function groupRowsByName(rows: PdfAccessRow[]) {
+  const groups = new Map<string, PdfAccessRow[]>();
+  rows.forEach((row) => {
+    const key = row.name || "N/A";
+    const group = groups.get(key) || [];
+    group.push(row);
+    groups.set(key, group);
+  });
+
+  return Array.from(groups.entries()).map(([name, groupRows]) => ({
+    name,
+    rows: groupRows,
+  }));
+}
+
+function buildPdfTable(rows: PdfAccessRow[]) {
+  const body = rows
+    .map(
+      (row) => `
+        <tr>
+          <td>${escapeHtml(row.name)}</td>
+          <td>${escapeHtml(row.unit)}</td>
+          <td>${escapeHtml(row.readerLocation)}</td>
+          <td>${escapeHtml(row.method)}</td>
+          <td>${escapeHtml(row.accessDateTime)}</td>
+        </tr>
+      `,
+    )
+    .join("");
+
+  return `
+    <table class="pdf-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Unit No.</th>
+          <th>Reader Location</th>
+          <th>Access Method</th>
+          <th>Access Date and Time</th>
+        </tr>
+      </thead>
+      <tbody>${body}</tbody>
+    </table>
+  `;
+}
+
+function getPdfSiteName() {
+  const readerSite = selectedReader.value?.site;
+  if (typeof readerSite === "object" && readerSite?.name) return readerSite.name;
+  return selectedReader.value?.siteName || selectedReader.value?.metadata?.siteName || props.site;
+}
+
+function escapeHtml(value: unknown) {
+  return String(value ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+</script>
+
+<style scoped>
+.hid-access-log-dashboard {
+  padding: 24px 0;
+  width: 100%;
+  min-width: 0;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.toolbar-spacer {
+  flex: 1;
+}
+
+.export-button {
+  min-width: 170px;
+  background: #e4e4e4;
+  color: #0a2638;
+}
+
+.reader-input,
+.search-input {
+  max-width: 240px;
+}
+
+.status-input {
+  max-width: 160px;
+}
+
+.table-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 430px;
+  overflow: hidden;
+}
+
+.table-body {
+  flex: 1;
+  overflow-x: auto;
+}
+
+.table-card :deep(table) {
+  table-layout: fixed;
+  width: 100%;
+  min-width: 980px;
+}
+
+.table-card :deep(th),
+.table-card :deep(td) {
+  white-space: nowrap;
+}
+
+.table-card :deep(th:nth-child(1)),
+.table-card :deep(td:nth-child(1)) {
+  width: 16%;
+}
+
+.table-card :deep(th:nth-child(2)),
+.table-card :deep(td:nth-child(2)) {
+  width: 14%;
+}
+
+.table-card :deep(th:nth-child(3)),
+.table-card :deep(td:nth-child(3)) {
+  width: 12%;
+}
+
+.table-card :deep(th:nth-child(4)),
+.table-card :deep(td:nth-child(4)) {
+  width: 20%;
+}
+
+.table-card :deep(th:nth-child(5)),
+.table-card :deep(td:nth-child(5)) {
+  width: 18%;
+}
+
+.table-card :deep(th:nth-child(6)),
+.table-card :deep(td:nth-child(6)) {
+  width: 14%;
+}
+
+.table-card :deep(th:nth-child(7)),
+.table-card :deep(td:nth-child(7)) {
+  width: 6%;
+}
+
+.history-dialog {
+  overflow: hidden;
+}
+
+.history-title {
+  color: #4d9bc2;
+  font-size: 18px;
+  font-weight: 600;
+  padding: 16px 20px 8px;
+}
+
+.history-body {
+  padding: 0 20px 20px;
+}
+
+.history-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.history-table-card {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.history-table-card :deep(table) {
+  min-width: 760px;
+}
+
+.table-refresh {
+  height: 34px;
+  display: flex;
+  align-items: center;
+  padding: 0 14px;
+  background: #f3f3f3;
+  border-bottom: 1px solid #e7e7e7;
+  color: #0a2638;
+}
+
+.table-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 4px 10px;
+  border-top: 1px solid #eeeeee;
+  background: #f6f6f6;
+  color: #0a2638;
+  font-size: 13px;
+}
+
+.access-tabs {
+  border-bottom: 1px solid #eeeeee;
+}
+
+.access-tabs :deep(.v-slide-group__content) {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  width: 100%;
+}
+
+.access-tabs :deep(.v-tab) {
+  flex: none;
+  min-width: 0;
+  width: 100%;
+  max-width: none;
+  color: #0a2638;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.access-tabs :deep(.v-tab--selected) {
+  font-weight: 600;
+}
+
+.status-chip {
+  min-width: 110px;
+  justify-content: center;
+  font-weight: 600;
+}
+
+.mapped-chip {
+  background: #dff7e7 !important;
+  color: #1b7f3a !important;
+}
+
+.unmapped-chip {
+  background: #fff0cc !important;
+  color: #9a6700 !important;
+}
+
+.hid-face-avatar {
+  border: 1px solid #d8dde4;
+  background: #f2f4f7;
+}
+
+.empty-state {
+  min-height: 280px;
+  display: grid;
+  place-items: center;
+  color: #687382;
+  font-size: 13px;
+}
+
+.export-dialog {
+  overflow: hidden;
+}
+
+.dialog-title {
+  font-size: 14px;
+  font-weight: 700;
+  padding: 12px 16px;
+  border-bottom: 1px solid #ececec;
+}
+
+.dialog-body {
+  padding: 18px 16px 20px;
+}
+
+.field-label {
+  color: #4f5a66;
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.field-label span {
+  color: #e53935;
+}
+
+.dialog-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.action-cancel {
+  background: #ffffff;
+  color: #111827;
+  border-radius: 0;
+}
+
+.action-submit {
+  background: #062d42;
+  color: #ffffff;
+  border-radius: 0;
+}
+
+:global(.compact-date-menu) {
+  max-width: 320px;
+}
+
+:global(.compact-date-menu .v-overlay__content) {
+  max-width: 320px;
+}
+
+:global(.compact-date-picker) {
+  border-radius: 8px;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
+}
+
+:global(.compact-date-picker .v-picker-title),
+:global(.compact-date-picker .v-date-picker-header) {
+  display: none;
+}
+
+:global(.compact-date-picker .v-picker__body) {
+  padding-top: 4px;
+}
+
+:global(.compact-date-picker .v-date-picker-month) {
+  padding: 0 12px 12px;
+}
+
+:global(.compact-date-picker .v-date-picker-month__day) {
+  height: 34px;
+}
+
+@media (max-width: 960px) {
+  .toolbar,
+  .history-toolbar {
+    align-items: stretch;
+  }
+
+  .toolbar-spacer {
+    display: none;
+  }
+
+  .export-button,
+  .reader-input,
+  .search-input,
+  .status-input {
+    max-width: none;
+    width: 100%;
+  }
+
+  .table-card {
+    min-height: 360px;
+  }
+}
+
+@media (max-width: 600px) {
+  .hid-access-log-dashboard {
+    padding: 12px 0;
+  }
+
+  .access-tabs :deep(.v-slide-group__content) {
+    display: flex;
+  }
+
+  .access-tabs :deep(.v-tab) {
+    min-width: 132px;
+  }
+
+  .history-body {
+    padding: 0 12px 12px;
+  }
+
+  .history-toolbar {
+    flex-wrap: wrap;
+  }
+
+  .dialog-actions {
+    grid-template-columns: 1fr;
+  }
+
+  :global(.v-dialog > .v-overlay__content) {
+    max-width: calc(100vw - 24px) !important;
+    margin: 12px !important;
+  }
+
+  :global(.compact-date-menu),
+  :global(.compact-date-menu .v-overlay__content),
+  :global(.compact-date-picker) {
+    max-width: calc(100vw - 32px) !important;
+    width: calc(100vw - 32px) !important;
+  }
+}
+</style>