@7365admin1/layer-common 3.2.1 → 3.2.2-staging.100

package/components/FeedbackMain.vue

@@ -1,7 +1,17 @@
 <template>
-  <v-row no-gutters>
+  <div>
+    <!-- The design's title row: the page's name at 22px and its primary
+         action on the right of that same line. Placement only - the same
+         button opens the same dialog under the same permission. -->
+    <PageHeader title="Feedbacks">
+      <template v-if="canCreateFeedback" #actions>
+        <AppButton @click="showCreateDialog = true">Create Feedback</AppButton>
+      </template>
+    </PageHeader>
+
+    <v-row no-gutters>
     <v-col cols="12" class="mb-2">
-      <v-row no-gutters align="center">
+      <v-row no-gutters align="center" class="filter-bar">
         <v-text-field
           v-model="searchText"
           placeholder="Search feedback..."
@@ -50,51 +60,32 @@
             <v-date-picker v-model="endDate" width="320" :locale="locale" />
           </v-card>
         </v-dialog>
-        <v-btn
-          v-if="canCreateFeedback"
-          text="create feedback"
-          class="text-none text-capitalize ml-2"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="showCreateDialog = true"
-        />
       </v-row>
     </v-col>
 
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn
-              fab
-              icon
-              density="comfortable"
+      <AppCard class="table-card">
+        <!-- One row inside the card - refresh, the range and the pager - in
+             place of a `v-toolbar` that stacked them above the table. Same
+             three controls, same handlers. -->
+        <CardToolbar :count="pageRange">
+          <template #left>
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
               @click="(page = 1), refreshFeedbacks()"
-            >
-              <v-icon icon="mdi-refresh" />
-            </v-btn>
+            />
           </template>
 
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="updatePage"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="updatePage"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
 
         <v-data-table
           :headers="headers"
@@ -104,6 +95,7 @@
           fixed-header
           hide-default-footer
           :hide-default-header="false"
+          :loading="loading"
           @click:row="tableRowClickHandler"
           style="max-height: calc(100vh - (200px))"
         >
@@ -139,13 +131,7 @@
           </template>
           <template #item.status="{ value }">
             <span class="d-inline-block text-truncate">
-              <v-chip
-                :color="getStatusColor(value ?? '')"
-                class="pa-5 text-capitalize text-center whitespace-nowrap text-body-1"
-                variant="flat"
-              >
-                {{ value }}
-              </v-chip>
+              <StatusChip class="text-capitalize" :status="value" />
             </span>
           </template>
           <template #item.assigneeInfo="{ item, index }">
@@ -183,9 +169,10 @@
             <span v-else class="mt-1 text-wrap"> Not Assigned </span>
           </template>
         </v-data-table>
-      </v-card>
+      </AppCard>
     </v-col>
-  </v-row>
+    </v-row>
+  </div>
 
   <!-- <FeedbackForm
     v-model="showCreateDialog"
@@ -660,7 +647,6 @@ const _feedback = ref({
 });
 
 const {
-  getStatusColor,
   debounce,
   standardFormatDateTime,
   standardFormatDate,
@@ -721,9 +707,9 @@ const {
     _getFeedbacks({
       page: page.value,
       site: route.params.site as string,
-      provider: currentUser.value.serviceProvider,
-      ...(currentUser.value.type != "site" && {
-        userId: currentUser.value._id,
+      provider: currentUser.value?.serviceProvider,
+      ...(currentUser.value?.type != "site" && {
+        userId: currentUser.value?._id,
       }),
       service: "Security",
       dateFrom: moment(startDate.value, "DD/MM/YYYY").startOf("day"),
@@ -998,9 +984,9 @@ async function handleAccept() {
         _id: feedbackData.value._id,
         statusUpdate: {
           status: "In-Progress",
-          updatedById: currentUser.value._id,
-          updatedByName: `${currentUser.value.givenName} ${currentUser.value.surname}`,
-          assignee: currentUser.value._id,
+          updatedById: currentUser.value?._id,
+          updatedByName: `${currentUser.value?.givenName} ${currentUser.value?.surname}`,
+          assignee: currentUser.value?._id,
           provider: currentUser.value?.serviceProvider,
         },
       };
@@ -1158,7 +1144,7 @@ async function submit() {
     isSubmitting.value = true;
 
     const result = await createFeedback({
-      createdBy: currentUser.value._id,
+      createdBy: currentUser.value?._id,
       description: _feedback.value.description,
       attachments: _feedback.value.attachments,
       site: route.params.site as string,

package/components/FormDialog.vue

@@ -1,31 +1,35 @@
+<!--
+  PHASE 3 - THE MODAL.
+
+  520px, 16px radius and the design's overlay and shadow, with the BODY as the
+  only thing that scrolls so the footer never leaves the screen. Same dialog,
+  same slots, same close behaviour, same `persistent`.
+
+  The two `theme.name.value === ...` branches are gone, and that is a fix, not
+  a preference: they hard-coded `bg-white` and Vuetify's `grey-darken-4`, so
+  the card was painted by a literal colour instead of by the theme it is in.
+  `--card` is that surface in each theme.
+-->
 <template>
-  <v-dialog v-model="model" max-width="600" persistent>
-    <v-card
-      class="px-3 d-flex flex-column"
-      :class="`${theme.name.value === 'light' ? 'bg-white' : ''} ${
-        mdAndUp ? 'rounded-xl' : ''
-      }`"
-      :style="{ border: 'none', boxShadow: 'none' }"
-    >
+  <v-dialog v-model="model" :max-width="520" persistent class="form-dialog">
+    <v-card class="d-flex flex-column form-dialog__card" :style="{ border: 'none' }">
       <v-toolbar
-        :color="theme.name.value === 'dark' ? 'grey-darken-4' : 'white'"
-        class="flex-shrink-0 mb-3"
+        color="transparent"
+        class="flex-shrink-0 form-dialog__head"
         style="position: sticky; top: 0; z-index: 10"
       >
         <slot name="title">
-          <span class="text-h6 font-weight-medium pt-1 text-capitalize">
-            Dialog
-          </span>
+          <span class="form-dialog__title"> Dialog </span>
         </slot>
         <v-spacer />
-        <v-btn icon="mdi-close" @click="closeDialog" />
+        <v-btn icon="mdi-close" variant="text" @click="closeDialog" />
       </v-toolbar>
 
-      <v-sheet class="flex-grow-1 overflow-y-auto px-3">
+      <v-sheet class="flex-grow-1 overflow-y-auto px-4 form-dialog__body">
         <slot />
       </v-sheet>
 
-      <v-sheet class="flex-shrink-0 px-3 py-2">
+      <v-sheet class="flex-shrink-0 px-4 py-3 form-dialog__footer">
         <slot name="footer" />
       </v-sheet>
     </v-card>
@@ -33,11 +37,6 @@
 </template>
 
 <script setup lang="ts">
-import { useTheme, useDisplay } from "vuetify";
-
-const theme = useTheme().global;
-const { mdAndUp } = useDisplay();
-
 const props = defineProps<{
   modelValue: boolean;
 }>();
@@ -62,4 +61,44 @@ function closeDialog() {
 :deep(.v-dialog .v-overlay__content) {
   margin: auto;
 }
+
+.form-dialog__card {
+  font-family: var(--font-sans);
+  background: var(--card);
+  /* `!important` because Vuetify's own `.v-overlay__content > .v-card` rule is
+     more specific than a class on the card, and it is what keeps the dialog at
+     its factory 4px. */
+  border-radius: var(--r-modal) !important;
+  box-shadow: var(--shadow-modal);
+  /* Never taller than the screen it has to fit inside; the body is what
+     scrolls, so the Cancel/Submit footer cannot be pushed out of view. */
+  max-height: calc(100vh - 32px);
+  overflow: hidden;
+}
+
+.form-dialog__head {
+  border-bottom: 1px solid var(--border);
+}
+
+.form-dialog__title {
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+  text-transform: capitalize;
+}
+
+.form-dialog__body,
+.form-dialog__footer {
+  background: var(--card);
+}
+
+.form-dialog__footer {
+  border-top: 1px solid var(--border);
+}
+
+@media (max-width: 599.98px) {
+  .form-dialog__card {
+    max-height: calc(100dvh - 32px);
+  }
+}
 </style>

package/components/HidAccessLogDashboard.vue

@@ -327,6 +327,8 @@ type AccessTab = "resident" | "visitor" | "administrator";
 type AccessRow = {
   key: string;
   identityKey: string;
+  identityType?: string;
+  visitorId?: string;
   name: string;
   facialData: string;
   faceImage?: string;
@@ -351,6 +353,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>[]>([]);
@@ -418,8 +421,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);
@@ -549,28 +561,41 @@ async function loadDashboard() {
     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"),
+      isAdministratorTab
+        ? loadDashboardSource(loadAdministratorRoles(selectedReaderId.value), null, "administrator roles")
+        : Promise.resolve(null),
       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 +603,19 @@ 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);
+    allIdentities.value = mergedIdentities;
     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;
+      : activeTab.value === "visitor"
+        ? mergedIdentities.filter(isVisitorIdentity)
+        : mergedIdentities.filter((identity: Record<string, any>) => !isVisitorIdentity(identity));
     logs.value = logResponse?.items ?? logResponse?.data?.items ?? logResponse?.data?.logs ?? [];
     liveAccessLogs.value = hidAccessLogs;
     readerConfiguration.value = normalizeReaderConfiguration(configurationResponse);
@@ -601,6 +627,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;
 
@@ -766,6 +801,7 @@ function mergeReaderUsersWithIdentities(readerUsers: Record<string, any>[], iden
 function resetDashboardData() {
   selectedHistoryRow.value = undefined;
   identities.value = [];
+  allIdentities.value = [];
   visitorRecords.value = {};
   logs.value = [];
   liveAccessLogs.value = [];
@@ -773,15 +809,11 @@ 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);
+  const isVisitor = row.identityType === "visitor" || Boolean(row.visitorId) || isVisitorIdentity(identity);
   if (activeTab.value === "visitor") {
-    return Boolean(identity && getVisitorRecord(identity));
+    return isVisitor;
   }
 
   if (activeTab.value === "administrator") {
@@ -789,7 +821,11 @@ function isVisibleForActiveTab(row: AccessRow) {
     return Boolean(hidUserId && administratorUserIds.value.has(hidUserId));
   }
 
-  return !identity || !getVisitorRecord(identity);
+  return !isVisitor;
+}
+
+function isVisitorIdentity(identity: Record<string, unknown> | undefined) {
+  return Boolean(identity && (identity.type === "visitor" || identity.visitor));
 }
 
 function loadAdministratorRoles(readerId: string) {
@@ -835,13 +871,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 +887,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("|");
 }
 
@@ -1145,12 +1181,15 @@ function getRawAccessLogs(event: Record<string, any>) {
 
 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: String(identity?.type || 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) : "",
@@ -1166,32 +1205,33 @@ function mapAccessLogToRow(rawLog: Record<string, any>, event: Record<string, an
 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));
+    const byId = allIdentities.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;
+  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 +1239,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("|");
 }