@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/HidAccessLogDashboard.vue

@@ -1,132 +1,151 @@
+<!--
+  HID ACCESS LOG DASHBOARD - who went through a reader, and when.
+
+  Was a bespoke screen: an above-card toolbar, a `v-tabs` strip, a raw
+  `v-table`, a footer pager, an empty state and its own two-colour chip
+  palette, in about forty literal hexes. Those literals are why it had no dark
+  theme - `#0a2638` on the dark card measures **1.07:1**.
+
+  It is the design's standard table screen WITH TABS, so it is drawn with the
+  shared one: `TableMain` supplies the heading, the card, the in-card toolbar,
+  the `app-tab` strip, the uppercase header row, the row spec and the pager;
+  search, the reader picker and the status filter move onto the card's
+  `extension` row. Every row, tab, action, dialog and handler is unchanged -
+  the same `paginatedRows` still feed the table and the history icon still
+  opens the same dialog.
+
+  The handoff draws no HID table, so it states no column proportions - the
+  table takes `TableMain`'s automatic layout, as panels 2 and 4 do.
+-->
 <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.
+    <TableMain
+      title="Access Logs"
+      :headers="logHeaders"
+      :items="paginatedRows"
+      :loading="loading"
+      :items-per-page="-1"
+      :page="page"
+      :pages="pages"
+      :page-range="pageRange"
+      item-value="key"
+      show-header
+      @refresh="loadDashboard"
+      @update:page="page = $event"
+    >
+      <template #actions>
+        <AppButton icon="mdi-download" @click="openExportDialog">Export</AppButton>
+      </template>
+
+      <!-- Was `v-tabs`/`v-tab`, whose selected state is drawn from Vuetify's
+           `on-surface` rather than the design's accent underline. `.app-tab` is
+           the shared strip every other tabbed table already uses. -->
+      <template #tabs>
+        <button
+          v-for="tab in tabOptions"
+          :key="tab.value"
+          type="button"
+          role="tab"
+          class="app-tab"
+          :class="{ 'app-tab--active': activeTab === tab.value }"
+          :aria-selected="activeTab === tab.value"
+          @click="activeTab = tab.value; onTabChange(tab.value)"
+        >
+          {{ tab.label }}
+        </button>
+      </template>
+
+      <template #extension>
+        <div class="app-filter-row hid-log-filters">
+          <AppSelect
+            v-if="readers.length"
+            v-model="selectedReaderId"
+            class="reader-select"
+            :items="readerOptions"
+            @update:model-value="loadDashboard"
+          />
+          <AppField v-model="search" search placeholder="Search" />
+          <AppSelect
+            v-model="status"
+            :items="statusOptions"
+            placeholder="Status"
+            clearable
+          />
+          <AppSelect
+            v-model="accessMethod"
+            :items="accessMethodFilterOptions"
+            placeholder="Access Method"
+            clearable
+          />
         </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++"
+      </template>
+
+      <!-- Staging's hover-the-full-name tooltip, kept. -->
+      <template #[`item.name`]="{ item }">
+        <span class="app-cell--strong">
+          {{ item.name }}
+          <v-tooltip
+            v-if="item.name && item.name !== 'N/A'"
+            activator="parent"
+            location="top"
+          >
+            {{ item.name }}
+          </v-tooltip>
+        </span>
+      </template>
+
+      <!-- The face thumbnail, unchanged. It prints whatever the row already
+           carried; this screen does not read or export a template. -->
+      <template #[`item.facialData`]="{ item }">
+        <v-avatar v-if="item.faceImage" size="34" rounded="lg" class="hid-face-avatar">
+          <v-img :src="item.faceImage" cover />
+        </v-avatar>
+        <span v-else class="app-cell--muted">{{ item.facialData }}</span>
+      </template>
+
+      <template #[`item.method`]="{ item }">
+        <span class="app-cell--muted">{{ item.method }}</span>
+      </template>
+
+      <template #[`item.lastAccessTime`]="{ item }">
+        <span class="app-cell--num">{{ item.lastAccessTime }}</span>
+      </template>
+
+      <!-- The shared chip. This screen's `mapped-chip` / `unmapped-chip` /
+           `unknown-chip` were a private copy of the same three tones
+           `utils/status.ts` now carries for Authorized / Not Authorized /
+           Unknown. Staging's reason tooltip rides on the chip. -->
+      <template #[`item.status`]="{ item }">
+        <StatusChip :status="item.status">
+          {{ item.status }}
+          <v-tooltip
+            v-if="item.authorizationReason"
+            activator="parent"
+            location="top"
+          >
+            {{ item.authorizationReason }}
+          </v-tooltip>
+        </StatusChip>
+      </template>
+
+      <template #[`item.action-table`]="{ item }">
+        <AppButton
+          variant="row"
+          icon="mdi-history"
+          aria-label="View access history"
+          @click="openHistoryDialog(item)"
         />
-      </div>
-    </v-card>
+      </template>
+
+      <!-- The screen's own sentence, kept: the shared empty state says "No data
+           available", which says less than naming what was searched for. -->
+      <template #no-data>
+        <div class="table-card__empty">
+          <v-icon icon="mdi-history" size="32" />
+          <span>No access logs found.</span>
+        </div>
+      </template>
+    </TableMain>
 
     <v-dialog v-model="historyDialog" max-width="980">
       <v-card class="history-dialog" rounded="lg">
@@ -134,17 +153,16 @@
 
         <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')"
-            >
+            <AppButton icon="mdi-download" @click="openExportDialog('history')">
               Export Log
-            </v-btn>
+            </AppButton>
             <div class="toolbar-spacer" />
-            <v-btn icon="mdi-close" variant="text" density="comfortable" @click="historyDialog = false" />
+            <AppButton
+              variant="icon"
+              icon="mdi-close"
+              aria-label="Close access log"
+              @click="historyDialog = false"
+            />
           </div>
 
           <v-card flat border class="history-table-card">
@@ -159,6 +177,7 @@
                   <th>Reader Location</th>
                   <th>Access Method</th>
                   <th>Access Date and Time</th>
+                  <th>Status</th>
                 </tr>
               </thead>
               <tbody>
@@ -168,6 +187,18 @@
                   <td>{{ row.readerLocation }}</td>
                   <td>{{ row.method }}</td>
                   <td>{{ row.lastAccessTime }}</td>
+                  <!-- Staging's authorization column, on the shared chip: the
+                       private `mapped-chip`/`unmapped-chip`/`unknown-chip`
+                       palette is gone, and `utils/status.ts` carries the same
+                       three tones for these three words. -->
+                  <td>
+                    <StatusChip :status="row.status">
+                      {{ row.status }}
+                      <v-tooltip v-if="row.authorizationReason" activator="parent" location="top">
+                        {{ row.authorizationReason }}
+                      </v-tooltip>
+                    </StatusChip>
+                  </td>
                 </tr>
               </tbody>
             </v-table>
@@ -185,116 +216,55 @@
         <v-card-title class="dialog-title">Export</v-card-title>
 
         <v-card-text class="dialog-body">
+          <!--
+            Was a `v-menu` + `v-text-field` + `v-date-picker` per date. The
+            design's date end is `AppDateField` - a native `<input type="date">`,
+            which brings the platform's own picker, localisation and keyboard
+            support instead of a 320px popover. `exportForm` still holds
+            DD/MM/YYYY, so everything downstream is untouched; the two computeds
+            below translate at the edge.
+          -->
           <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>
+          <AppDateField v-model="exportStartInput" aria-label="Start Date" class="mb-3" />
 
           <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>
+          <AppDateField v-model="exportEndInput" aria-label="End Date" class="mb-3" />
 
           <div class="field-label">Users</div>
-          <v-select
+          <AppSelect
             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
+          <AppSelect
             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
+          <AppSelect
             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
+          <AppSelect
             v-model="exportForm.status"
             :items="statusOptions"
             aria-label="Status"
             placeholder="Select"
-            density="compact"
-            variant="outlined"
-            hide-details="auto"
+            clearable
           />
         </v-card-text>
 
@@ -324,9 +294,12 @@ const props = defineProps({
 });
 
 type AccessTab = "resident" | "visitor" | "administrator";
+type AuthorizationStatus = "Authorized" | "Not Authorized" | "Unknown";
 type AccessRow = {
   key: string;
   identityKey: string;
+  identityType?: string;
+  visitorId?: string;
   name: string;
   facialData: string;
   faceImage?: string;
@@ -335,7 +308,8 @@ type AccessRow = {
   lastAccessTime: string;
   lastAccessDate?: Date;
   readerLocation: string;
-  status: "Mapped" | "Unmapped";
+  status: AuthorizationStatus;
+  authorizationReason?: string;
 };
 
 type PdfAccessRow = {
@@ -351,6 +325,7 @@ const { getVisitors } = useVisitor();
 
 const readers = ref<Record<string, any>[]>([]);
 const identities = ref<Record<string, any>[]>([]);
+const allIdentities = ref<Record<string, any>[]>([]);
 const visitorRecords = ref<Record<string, any>>({});
 const logs = ref<Record<string, any>[]>([]);
 const liveAccessLogs = ref<Record<string, any>[]>([]);
@@ -360,32 +335,32 @@ const userImages = ref<Record<string, string>>({});
 const selectedReaderId = ref("");
 const activeTab = ref<AccessTab>("resident");
 const search = ref("");
-const status = ref("Status");
+const status = ref("");
+const accessMethod = ref("");
 const page = ref(1);
-const limit = 20;
+const limit = 10;
 const loading = ref(false);
 const loadSequence = ref(0);
 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",
+  status: "",
 });
 
-const statusOptions = ["Status", "Mapped", "Unmapped"];
-const accessMethodOptions = ["All", "Facial", "QR Code", "ID and Password", "PIN", "Card"];
+const statusOptions = ["Authorized", "Not Authorized", "Unknown"];
+const accessMethodFilterOptions = ["Facial", "QR Code", "ID and Password", "PIN", "Card"];
+const accessMethodOptions = ["All", ...accessMethodFilterOptions];
 
 const readerOptions = computed(() =>
   readers.value.map((reader) => ({
-    title: reader.name || reader.deviceId || reader._id,
+    title: `${reader.name || reader.deviceId || reader._id} — ${reader.portalName || "Portal not configured"}`,
     value: reader._id,
   })),
 );
@@ -418,8 +393,17 @@ 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);
+  const selectedIdentity = findIdentityByKey(selectedKey);
+  const matchedLogs = logs.value.filter((log) =>
+    selectedIdentity
+      ? accessLogMatchesIdentity(log, selectedIdentity)
+      : getLogIdentityKey(log) === selectedKey,
+  );
+  const matchedLiveLogs = liveAccessLogs.value.filter((log) =>
+    selectedIdentity
+      ? accessLogMatchesIdentity(log, selectedIdentity)
+      : getAccessLogIdentityKey(log) === selectedKey,
+  );
 
   if (!matchedLogs.length && !matchedLiveLogs.length) {
     return rows.value.filter((row) => row.identityKey === selectedKey);
@@ -436,7 +420,7 @@ const selectedHistoryRows = computed<AccessRow[]>(() => {
     lastAccessTime: formatDate(getLogAccessDateValue(log)),
     lastAccessDate: parseDate(getLogAccessDateValue(log)),
     readerLocation: getLogReaderLocation(log),
-    status: selectedHistoryRow.value?.status || "Mapped",
+    ...getAuthorizationStatus(log.payload || log, log),
   }));
 
   const liveRows = matchedLiveLogs.map((log, index) => ({
@@ -450,7 +434,7 @@ const selectedHistoryRows = computed<AccessRow[]>(() => {
     lastAccessTime: formatDate(getAccessLogTime(log, {})),
     lastAccessDate: parseDate(getAccessLogTime(log, {})),
     readerLocation: selectedReader.value?.location || "N/A",
-    status: selectedHistoryRow.value?.status || "Mapped",
+    ...getAuthorizationStatus(log, {}),
   }));
 
   return [...historyRows, ...liveRows].sort((a, b) => {
@@ -472,12 +456,40 @@ const filteredRows = computed(() => {
       row.status,
     ].some((value) => String(value ?? "").toLowerCase().includes(query));
 
-    const matchesStatus = status.value === "Status" || row.status === status.value;
+    const matchesStatus = !status.value || row.status === status.value;
+    const matchesMethod = !accessMethod.value || row.method === accessMethod.value;
 
-    return matchesSearch && matchesStatus;
+    return matchesSearch && matchesStatus && matchesMethod;
   });
 });
 
+/**
+ * The three tabs, as data rather than three `v-tab` elements, so the shared
+ * `app-tab` strip can render them. Same values, same order, same handler.
+ */
+const tabOptions: Array<{ label: string; value: AccessTab }> = [
+  { label: "Resident", value: "resident" },
+  { label: "Visitor", value: "visitor" },
+  { label: "Administrator", value: "administrator" },
+];
+
+/**
+ * `sortable: false` keeps the previous behaviour - the raw `v-table` never
+ * sorted - and no `weight` is set, so the table uses `TableMain`'s automatic
+ * layout. The handoff draws no HID table, so the screen's own fixed column
+ * percentages had no design number behind them.
+ */
+const logHeaders = [
+  { title: "Name", value: "name", sortable: false },
+  { title: "Facial Data", value: "facialData", sortable: false },
+  // Staging (b0667a7) dropped Unit from this table - the unit still shows in
+  // the per-identity history dialog, so the column is not carried back.
+  { title: "Last Access Method", value: "method", sortable: false },
+  { title: "Last access time", value: "lastAccessTime", sortable: false },
+  { title: "Status", value: "status", sortable: false },
+  { title: "", value: "action-table", sortable: false },
+];
+
 const pages = computed(() => Math.max(1, Math.ceil(filteredRows.value.length / limit)));
 
 const paginatedRows = computed(() => {
@@ -500,7 +512,7 @@ const exportRowsData = computed(() =>
     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 matchesStatus = !exportForm.status || row.status === exportForm.status;
     const matchesDate = isWithinExportRange(row.lastAccessDate);
 
     return matchesUsers && matchesMethod && matchesLocation && matchesStatus && matchesDate;
@@ -513,7 +525,7 @@ watch(
   { immediate: true },
 );
 
-watch([search, status, activeTab], () => {
+watch([search, status, accessMethod, activeTab], () => {
   page.value = 1;
 });
 
@@ -546,31 +558,41 @@ async function loadDashboard() {
   loading.value = true;
   resetDashboardData();
   try {
-    const isAdministratorTab = activeTab.value === "administrator";
     const isVisitorTab = activeTab.value === "visitor";
     const [identityResponse, logResponse, hidAccessLogs, configurationResponse, roleResponse, visitorResponse, readerUserResponse] = await Promise.all([
-      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),
+      loadDashboardSource(
+        getIdentities(selectedReaderId.value, {
+          page: 1,
+          limit: 500,
+        }),
+        null,
+        "identities",
+      ),
+      loadDashboardSource(
+        getLogs(selectedReaderId.value, {
+          page: 1,
+          limit: 500,
+        }),
+        null,
+        "persisted access logs",
+      ),
+      loadDashboardSource(loadLiveAccessLogs(selectedReaderId.value), [], "live access logs"),
+      loadDashboardSource(loadReaderConfiguration(selectedReaderId.value), {}, "reader configuration"),
+      loadDashboardSource(loadAdministratorRoles(selectedReaderId.value), null, "administrator roles"),
       isVisitorTab && props.org
-        ? getVisitors({
-            org: props.org,
-            site: props.site,
-            page: 1,
-            limit: 500,
-            order: "desc",
-          })
+        ? loadDashboardSource(
+            getVisitors({
+              org: props.org,
+              site: props.site,
+              page: 1,
+              limit: 500,
+              order: "desc",
+            }),
+            null,
+            "visitor records",
+          )
         : Promise.resolve(null),
-      loadReaderUsers(selectedReaderId.value),
+      loadDashboardSource(loadReaderUsers(selectedReaderId.value), [], "reader users"),
     ]);
 
     if (sequence !== loadSequence.value) return;
@@ -578,18 +600,14 @@ async function loadDashboard() {
     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]))
-      : {};
+    visitorRecords.value = Object.fromEntries(
+      loadedVisitors.map((visitor: Record<string, any>) => [String(visitor._id), visitor]),
+    );
     administratorUserIds.value = getAdministratorRoleUserIds(roleResponse);
-    identities.value = isAdministratorTab
-      ? mergedIdentities.filter((identity: Record<string, any>) => {
-          const hidUserId = toHidNumericId(identity.hidUserId);
-          return Boolean(hidUserId && administratorUserIds.value.has(hidUserId));
-        })
-      : isVisitorTab
-        ? mergedIdentities.filter((identity: Record<string, any>) => Boolean(getVisitorRecord(identity)))
-      : mergedIdentities;
+    allIdentities.value = mergedIdentities;
+    identities.value = mergedIdentities.filter(
+      (identity: Record<string, unknown>) => classifyIdentity(identity) === activeTab.value,
+    );
     logs.value = logResponse?.items ?? logResponse?.data?.items ?? logResponse?.data?.logs ?? [];
     liveAccessLogs.value = hidAccessLogs;
     readerConfiguration.value = normalizeReaderConfiguration(configurationResponse);
@@ -601,6 +619,15 @@ async function loadDashboard() {
   }
 }
 
+async function loadDashboardSource<T>(request: Promise<T>, fallback: T, label: string): Promise<T> {
+  try {
+    return await request;
+  } catch (error) {
+    console.warn(`Unable to load HID ${label}`, error);
+    return fallback;
+  }
+}
+
 async function loadUserImages(items: Record<string, any>[]) {
   if (!selectedReaderId.value) return;
 
@@ -722,8 +749,10 @@ function normalizeHidUsers(response: Record<string, any>) {
         registration: user.registration,
         cardNo: user.card_value || user.cardNo || "",
         name: user.name,
+        hidUserTypeId: user.user_type_id,
         metadata: {
           name: user.name,
+          hidUserTypeId: user.user_type_id,
           imageTimestamp: user.image_timestamp ? String(user.image_timestamp) : "",
           hidReaderSource: true,
         },
@@ -766,6 +795,7 @@ function mergeReaderUsersWithIdentities(readerUsers: Record<string, any>[], iden
 function resetDashboardData() {
   selectedHistoryRow.value = undefined;
   identities.value = [];
+  allIdentities.value = [];
   visitorRecords.value = {};
   logs.value = [];
   liveAccessLogs.value = [];
@@ -773,23 +803,24 @@ function resetDashboardData() {
   administratorUserIds.value = new Set();
 }
 
-function getIdentityType(tab: AccessTab) {
-  if (tab === "administrator") return "admin";
-  return tab;
-}
-
 function isVisibleForActiveTab(row: AccessRow) {
   const identity = findIdentityByKey(row.identityKey);
-  if (activeTab.value === "visitor") {
-    return Boolean(identity && getVisitorRecord(identity));
-  }
+  return classifyIdentity(identity, row) === activeTab.value;
+}
 
-  if (activeTab.value === "administrator") {
-    const hidUserId = toHidNumericId(identity?.hidUserId ?? row.identityKey.split("|")[0]);
-    return Boolean(hidUserId && administratorUserIds.value.has(hidUserId));
-  }
+function isVisitorIdentity(identity: Record<string, unknown> | undefined) {
+  return Boolean(identity && (
+    identity.type === "visitor"
+    || identity.visitor
+    || Number(identity.hidUserTypeId ?? (identity.metadata as Record<string, unknown> | undefined)?.hidUserTypeId) === 1
+  ));
+}
 
-  return !identity || !getVisitorRecord(identity);
+function classifyIdentity(identity?: Record<string, unknown>, row?: AccessRow): AccessTab {
+  const hidUserId = toHidNumericId(identity?.hidUserId ?? row?.identityKey.split("|")[0]);
+  if (hidUserId && administratorUserIds.value.has(hidUserId)) return "administrator";
+  if (row?.identityType === "visitor" || row?.visitorId || isVisitorIdentity(identity)) return "visitor";
+  return "resident";
 }
 
 function loadAdministratorRoles(readerId: string) {
@@ -835,13 +866,13 @@ function getIdentityKey(identity: Record<string, any>) {
   return [
     identity.hidUserId,
     identity.registration,
-    identity.cardNo,
+    identity.cardNo || identity.metadata?.qrCodeValue,
   ].filter(Boolean).join("|");
 }
 
 function findIdentityByKey(identityKey: string) {
   if (!identityKey) return undefined;
-  return identities.value.find((identity) => getIdentityKey(identity) === identityKey);
+  return allIdentities.value.find((identity) => getIdentityKey(identity) === identityKey);
 }
 
 function getLogIdentityKey(log: Record<string, any>) {
@@ -851,7 +882,7 @@ function getLogIdentityKey(log: Record<string, any>) {
   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,
+    identity.cardNo || lookup.cardNo || rawLog.card_value || rawLog.cardNo || rawLog.qrcode_value,
   ].filter(Boolean).join("|");
 }
 
@@ -1007,18 +1038,32 @@ function parseExportDate(value: string, endOfDay: boolean) {
   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;
-  }
+/**
+ * `exportForm` stores DD/MM/YYYY, because that is what `parseExportDate`,
+ * `isWithinExportRange` and the PDF header all read. A native `<input
+ * type="date">` speaks YYYY-MM-DD. Rather than change the stored format - which
+ * would reach into the export itself - the translation happens here, at the
+ * edge, exactly where the old `v-date-picker` did it.
+ */
+function exportDateModel(field: "startDate" | "endDate") {
+  return computed({
+    get: () => {
+      const date = parseExportDate(exportForm[field], false);
+      if (!date) return "";
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      return `${date.getFullYear()}-${month}-${day}`;
+    },
+    set: (value: string) => {
+      const date = normalizePickerDate(value);
+      exportForm[field] = date ? toDisplayDate(date) : "";
+    },
+  });
 }
 
+const exportStartInput = exportDateModel("startDate");
+const exportEndInput = exportDateModel("endDate");
+
 function normalizePickerDate(value: unknown) {
   if (value instanceof Date && !Number.isNaN(value.getTime())) {
     return value;
@@ -1140,17 +1185,33 @@ function getRawAccessLogs(event: Record<string, any>) {
     payload.access_logs ||
     payload.accessLogs;
 
-  return Array.isArray(accessLogs) ? accessLogs : [];
+  if (Array.isArray(accessLogs)) return accessLogs;
+
+  const objectChanges: unknown = payload.object_changes || result.object_changes || [];
+  return Array.isArray(objectChanges)
+    ? objectChanges.flatMap((change: unknown) => {
+        const record = toUnknownRecord(change);
+        const values = toUnknownRecord(record.values);
+        return record.object === "access_logs" && record.type !== "deleted" && Object.keys(values).length
+          ? [values]
+          : [];
+      })
+    : [];
 }
 
 function mapAccessLogToRow(rawLog: Record<string, any>, event: Record<string, any>, index: string): AccessRow {
   const identity = findIdentityForAccessLog(rawLog, event);
+  const eventIdentity = event.payload?.identity || event.payload?.identityLookup || {};
   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,
+    identityType: identity
+      ? classifyIdentity(identity)
+      : String(eventIdentity.type || "").toLowerCase() || undefined,
+    visitorId: String(identity?.visitor || eventIdentity.visitor || "") || undefined,
     name: identity ? getName(identity) : getRawLogName(rawLog, event),
     facialData: identity ? getFacialData(identity) : "N/A",
     faceImage: identity ? getUserImageSrc(identity) : "",
@@ -1159,39 +1220,85 @@ function mapAccessLogToRow(rawLog: Record<string, any>, event: Record<string, an
     lastAccessTime: formatDate(rawAccessTime),
     lastAccessDate: parseDate(rawAccessTime),
     readerLocation: getLogReaderLocation(event),
-    status: identity ? "Mapped" : "Unmapped",
+    ...getAuthorizationStatus(rawLog, event),
+  };
+}
+
+function getAuthorizationStatus(
+  rawLog: Record<string, any>,
+  event: Record<string, any>,
+): Pick<AccessRow, "status" | "authorizationReason"> {
+  const authorization = event.payload?.authorization || rawLog.authorization;
+  if (typeof authorization?.granted === "boolean") {
+    return {
+      status: authorization.granted ? "Authorized" : "Not Authorized",
+      authorizationReason: String(
+        authorization.reason || (authorization.granted ? "Access granted" : "Access denied"),
+      ),
+    };
+  }
+
+  const eventCode = Number(
+    rawLog.event ?? rawLog.event_id ?? rawLog.eventId ?? event.payload?.event,
+  );
+  if (eventCode === 7) {
+    return { status: "Authorized", authorizationReason: "Access granted by HID authorization." };
+  }
+  if (eventCode === 6) {
+    return { status: "Not Authorized", authorizationReason: "Access denied by HID authorization." };
+  }
+
+  const eventLabel = String(
+    getConfigurationLabel("event_types", eventCode) || rawLog.event_name || rawLog.eventName || "",
+  ).toLowerCase();
+  if (/not authorized|unauthori[sz]ed|access denied|denied|rejected/.test(eventLabel)) {
+    return { status: "Not Authorized", authorizationReason: eventLabel };
+  }
+  if (/authorized|access granted|granted|released|opened/.test(eventLabel)) {
+    return { status: "Authorized", authorizationReason: eventLabel };
+  }
+
+  return {
+    status: "Unknown",
+    authorizationReason: "This access log does not include an authorization result.",
   };
 }
 
 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 byId = allIdentities.value.find((identity) => String(identity._id) === String(eventIdentityId));
+    const rawUserId = rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId;
+    if (byId && (
+      rawUserId === undefined
+      || rawUserId === null
+      || String(byId.hidUserId) === String(rawUserId)
+    )) return byId;
   }
 
   const hidUserId = rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId ?? event.payload?.identity?.hidUserId ?? event.payload?.identityLookup?.hidUserId;
   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;
+  const qrCodeValue = rawLog.qrcode_value || rawLog.qrCode || rawLog.qrcode;
 
-  return identities.value.find((identity) => {
+  return allIdentities.value.find((identity) => {
     return (
       (hidUserId !== undefined && hidUserId !== null && String(identity.hidUserId) === String(hidUserId)) ||
       (registration && identity.registration === registration) ||
-      (cardNo && String(identity.cardNo) === String(cardNo))
+      (cardNo && String(identity.cardNo) === String(cardNo)) ||
+      (qrCodeValue && String(identity.metadata?.qrCodeValue || "") === String(qrCodeValue))
     );
   });
 }
 
 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)
+    .filter((log) => accessLogMatchesIdentity(log, identity))
     .sort((a, b) => {
       const aTime = parseDate(getAccessLogTime(a, {}))?.getTime() || 0;
       const bTime = parseDate(getAccessLogTime(b, {}))?.getTime() || 0;
@@ -1199,11 +1306,46 @@ function getLatestAccessLogForIdentity(identity: Record<string, any>) {
     })[0];
 }
 
+function toUnknownRecord(value: unknown): Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : {};
+}
+
+function accessLogMatchesIdentity(log: unknown, identity: unknown) {
+  const logRecord = toUnknownRecord(log);
+  const identityRecord = toUnknownRecord(identity);
+  const payload = toUnknownRecord(logRecord.payload);
+  const rawLog = Object.keys(toUnknownRecord(payload.rawAccessLog)).length
+    ? toUnknownRecord(payload.rawAccessLog)
+    : logRecord;
+  const eventIdentity = Object.keys(toUnknownRecord(payload.identity)).length
+    ? toUnknownRecord(payload.identity)
+    : toUnknownRecord(payload.identityLookup);
+  const metadata = toUnknownRecord(identityRecord.metadata);
+  const hidUserId = rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId ?? eventIdentity.hidUserId;
+  const registration = rawLog.registration || eventIdentity.registration;
+  const credential =
+    rawLog.card_value ||
+    rawLog.cardNo ||
+    rawLog.qrcode_value ||
+    rawLog.qrCode ||
+    rawLog.qrcode ||
+    eventIdentity.cardNo;
+  const identityCredential = identityRecord.cardNo || metadata.qrCodeValue;
+
+  return Boolean(
+    (hidUserId !== undefined && hidUserId !== null && String(identityRecord.hidUserId) === String(hidUserId)) ||
+    (registration && identityRecord.registration === registration) ||
+    (credential && identityCredential && String(identityCredential) === String(credential)),
+  );
+}
+
 function getAccessLogIdentityKey(rawLog: Record<string, any>) {
   return [
     rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId,
     rawLog.registration,
-    rawLog.card_value || rawLog.cardNo,
+    rawLog.card_value || rawLog.cardNo || rawLog.qrcode_value,
   ].filter(Boolean).join("|");
 }
 
@@ -1343,6 +1485,12 @@ function drawAccessLogPdf(pdf: any, rows: PdfAccessRow[]) {
   });
 }
 
+/**
+ * The EXPORTED PDF, not a screen. Its colours stay literal on purpose: a PDF is
+ * white paper with dark ink whichever theme the operator happens to be in, and
+ * theming it would produce a document that does not match what prints. Same
+ * reasoning as the printed pass preview in `HidQrCodeConfiguration`.
+ */
 function buildPdfHtml() {
   const rows = exportRowsData.value.map((row) => ({
     name: row.name,
@@ -1520,103 +1668,53 @@ function escapeHtml(value: unknown) {
 </script>
 
 <style scoped>
+/*
+  WHAT IS LEFT AFTER THE CARD, TABS AND TABLE MOVED TO `TableMain`.
+
+  The toolbar, the card, the `v-tabs` strip and its seven column widths, the
+  footer pager, the empty state and the two private chip palettes are gone -
+  they were a private copy of the shared table drawn in literal hexes. The
+  `compact-date-menu` / `compact-date-picker` global overrides go with the
+  `v-date-picker` they were correcting: a native date input needs none of them.
+
+  What remains is the two dialogs, and every colour in them is now a token, so
+  the dark theme reaches them for the first time.
+*/
 .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;
+.hid-log-filters {
+  /* The filter row sits INSIDE the card's extension, so it needs the card's
+     own side padding rather than the row's default bottom margin. */
+  margin: 0;
+  padding: 10px 14px;
 }
 
-.reader-input,
-.search-input {
+.hid-log-filters :deep(.app-field) {
   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%;
+/* The reader option now reads "Reader - Portal", so it needs more room than
+   the other filters. `AppSelect`'s root class IS `app-field`, so this has to
+   be more specific than the rule above rather than a `.app-select` one. */
+.hid-log-filters :deep(.app-field.reader-select) {
+  max-width: 320px;
 }
 
 .history-dialog {
   overflow: hidden;
 }
 
+/* Was `#4d9bc2`, a fixed blue that sat on the dark card unchanged. */
 .history-title {
-  color: #4d9bc2;
+  color: var(--accent-text);
   font-size: 18px;
   font-weight: 600;
   padding: 16px 20px 8px;
@@ -1636,10 +1734,34 @@ function escapeHtml(value: unknown) {
 .history-table-card {
   overflow-x: auto;
   overflow-y: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
 }
 
 .history-table-card :deep(table) {
   min-width: 760px;
+  background: transparent;
+}
+
+/*
+  The history table stays a `v-table` rather than a nested `TableMain` - it is
+  a read-only strip inside a dialog with no toolbar, pager or filters, and
+  nesting the full card inside a dialog would draw a second heading. Its
+  colours become tokens so it follows the theme; its SHAPE is unchanged.
+*/
+.history-table-card :deep(th) {
+  background: var(--thead);
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.history-table-card :deep(td) {
+  color: var(--text);
+  font-size: 13px;
 }
 
 .table-refresh {
@@ -1647,74 +1769,16 @@ function escapeHtml(value: unknown) {
   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;
+  background: var(--thead);
+  border-bottom: 1px solid var(--border);
+  color: var(--muted);
 }
 
 .empty-state {
   min-height: 280px;
   display: grid;
   place-items: center;
-  color: #687382;
+  color: var(--muted);
   font-size: 13px;
 }
 
@@ -1726,73 +1790,52 @@ function escapeHtml(value: unknown) {
   font-size: 14px;
   font-weight: 700;
   padding: 12px 16px;
-  border-bottom: 1px solid #ececec;
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
 }
 
 .dialog-body {
   padding: 18px 16px 20px;
 }
 
+/* Was `#4f5a66` / `#e53935` - the same two colours on both themes. */
 .field-label {
-  color: #4f5a66;
+  color: var(--text2);
   font-size: 12px;
   font-weight: 600;
   margin-bottom: 6px;
 }
 
 .field-label span {
-  color: #e53935;
+  color: var(--err);
 }
 
+/* The split footer bar. The handoff does not draw one, so the SHAPE is the
+   screen's own; only the colours change - `#062d42` was a fixed navy that sat
+   on the dark card unchanged. Same treatment as panels 2 and 4. */
 .dialog-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
 }
 
 .action-cancel {
-  background: #ffffff;
-  color: #111827;
+  background: var(--card);
+  color: var(--text2);
   border-radius: 0;
 }
 
 .action-submit {
-  background: #062d42;
-  color: #ffffff;
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
   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;
+.hid-face-avatar {
+  border: 1px solid var(--border);
+  background: var(--hover);
 }
 
 @media (max-width: 960px) {
-  .toolbar,
   .history-toolbar {
     align-items: stretch;
   }
@@ -1801,17 +1844,11 @@ function escapeHtml(value: unknown) {
     display: none;
   }
 
-  .export-button,
-  .reader-input,
-  .search-input,
-  .status-input {
+  .hid-log-filters :deep(.app-field),
+  .hid-log-filters :deep(.app-select) {
     max-width: none;
     width: 100%;
   }
-
-  .table-card {
-    min-height: 360px;
-  }
 }
 
 @media (max-width: 600px) {
@@ -1819,14 +1856,6 @@ function escapeHtml(value: unknown) {
     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;
   }
@@ -1843,12 +1872,5 @@ function escapeHtml(value: unknown) {
     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>