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

package/components/VisitorFormSelection.vue

@@ -1,46 +1,23 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
-          {{ mode }} Visitor
-        </span>
-      </v-row>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal visitor-select">
+    <v-card-title class="text-capitalize">{{ mode }} Visitor</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
-      <span class="text-subtitle-2 w-100 font-weight-medium d-flex justify-center mb-3">Please Select Visitor Type</span>
+    <div class="screen-modal__body visitor-select__body">
+      <p class="visitor-select__hint">Please Select Visitor Type</p>
       <template v-for="item in selection" :key="item.value">
-        <v-btn
+        <AppButton
           v-if="showSelection(item)"
-          color="primary-button"
-          block
-          variant="flat"
-          rounded="md"
-          size="48"
-          :text="item.label"
+          class="visitor-select__option"
           @click="select(item.value)"
-          class="my-2 text-capitalize text-subtitle-2"
-        />
+        >
+          {{ item.label }}
+        </AppButton>
       </template>
-    </v-card-text>
+    </div>
 
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="12">
-          <v-btn
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="cancel"
-          >
-            Cancel
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    <div class="visitor-select__footer">
+      <AppButton variant="ghost" @click="cancel">Cancel</AppButton>
+    </div>
   </v-card>
 </template>
 
@@ -69,6 +46,32 @@ function showSelection(item: any) {
   if(item.value === 'walk-in' && prop.mode === 'register') {
     return false ;
   } return true;
-  
+
 }
 </script>
+
+<style scoped>
+/* Same shape as the Add Vehicle prompt: full-width choices, one per row. */
+.visitor-select__body {
+  padding: 20px;
+}
+
+.visitor-select__hint {
+  margin: 0 0 14px;
+  text-align: center;
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+
+.visitor-select__option {
+  display: flex;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.visitor-select__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 20px 20px;
+}
+</style>

package/components/VisitorManagement.vue

@@ -1,50 +1,28 @@
 <template>
   <v-row no-gutters>
-    <TableMain
-      :headers="headers"
-      :items="items"
-      :loading="getVisitorPending"
-      :page="page"
-      :pages="pages"
-      :extension-height="110"
-      :offset="300"
-      :pageRange="pageRange"
-      @refresh="getVisitorRefresh"
-      @update:page="handleUpdatePage"
-      show-header
-      @row-click="handleRowClick"
-    >
-      <template #actions>
-        <v-row no-gutters>
-          <v-btn
-            v-if="canAddVisitor"
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="handleAddNew"
-            text="Add Visitor"
-          />
-          <v-btn
+    <!--
+      THE DESIGN'S PAGE TITLE ROW (Phase 9).
+
+      Drawn here rather than through `TableMain`'s `title` prop because the
+      design puts the screen's actions on the title line, and `TableMain`
+      renders its `actions` slot as a separate row under the heading. Same
+      three buttons, same handlers, same permission gates - moved, not changed.
+    -->
+    <v-col cols="12">
+      <PageHeader title="Visitor Mgmt">
+        <template #actions>
+          <AppButton
             v-if="canScanVisitorQRCode"
-            text="Scan QR Code"
-            class="text-none ml-2"
-            rounded="pill"
-            variant="tonal"
-            size="large"
+            variant="ghost"
             @click="dialog.scanVisitorQRCode = true"
-          />
+          >
+            Scan QR Code
+          </AppButton>
           <v-menu>
             <template #activator="{ props }">
-              <v-btn
-                v-bind="props"
-                text="Download Report"
-                class="text-none ml-2"
-                prepend-icon="mdi-download"
-                rounded="pill"
-                variant="tonal"
-                size="large"
-              />
+              <AppButton v-bind="props" variant="ghost" icon="mdi-download">
+                Download Report
+              </AppButton>
             </template>
             <v-list>
               <v-list-item
@@ -59,8 +37,27 @@
               />
             </v-list>
           </v-menu>
-        </v-row>
-      </template>
+          <AppButton v-if="canAddVisitor" icon="mdi-plus" @click="handleAddNew">
+            Add Visitor
+          </AppButton>
+        </template>
+      </PageHeader>
+    </v-col>
+
+    <TableMain
+      :headers="headers"
+      :items="items"
+      :loading="getVisitorPending"
+      :page="page"
+      :pages="pages"
+      :extension-height="110"
+      :offset="300"
+      :pageRange="pageRange"
+      @refresh="getVisitorRefresh"
+      @update:page="handleUpdatePage"
+      show-header
+      @row-click="handleRowClick"
+    >
       <template #extension>
         <v-row no-gutters class="w-100 d-flex flex-column">
           <v-tabs
@@ -109,32 +106,18 @@
               hide-details
             />
             <InputDatePicker v-model="dateTo" density="compact" hide-details />
-            <v-select
+            <AppSelect
               v-if="activeTab == 'registered'"
               v-model="filterTypes"
               label="Filter by types"
               item-title="label"
               item-value="value"
               :items="visitorSelection"
-              density="compact"
+              class="visitor-type-filter"
+              compact
               clearable
               multiple
-              max-width="200"
-              hide-details
-            >
-              <template v-slot:selection="{ item, index }">
-                <div class="d-flex align-center text-caption text-nowrap">
-                  <v-chip
-                    v-if="index === 0"
-                    color="error"
-                    :text="filterTypeSelectionLabel()"
-                    size="x-small"
-                    variant="tonal"
-                    class="ml-2"
-                  />
-                </div>
-              </template>
-            </v-select>
+            />
           </v-card>
         </v-row>
       </template>
@@ -303,6 +286,18 @@
             >
           </div>
 
+          <v-btn
+            v-if="hidQrEnabled"
+            icon="mdi-qrcode"
+            size="x-small"
+            variant="text"
+            color="primary"
+            title="View HID QR code"
+            aria-label="View HID QR code"
+            class="align-self-start mt-1"
+            @click.stop="openVisitorHidQr(item)"
+          />
+
           <v-menu :close-on-content-click="true">
             <template v-slot:activator="{ props: menuProps }">
               <div
@@ -618,15 +613,21 @@
                 class="d-flex align-center"
               >
                 <strong>{{ label }}:</strong>
-                <v-btn
-                  size="x-small"
-                  class="ml-3 text-capitalize"
-                  color="success"
-                  text="Checkin"
+                <!-- The design's check-in / check-out pair. Was Vuetify's
+                     `color="success"` beside a hardcoded `color="red"` - two
+                     different systems on one field list, and neither of them a
+                     token. `:loading` is dropped rather than re-invented: the
+                     same flag already drives `:disabled`, which is the
+                     precedent set when the scanned-visitor form converted. -->
+                <AppButton
+                  variant="ok"
+                  icon="mdi-check"
+                  class="ml-3"
                   :disabled="isVisitorDataFromScannedQRCodeCheckingInOut"
                   @click="handleCheckin(selectedVisitorDataObject)"
-                  :loading="isVisitorDataFromScannedQRCodeCheckingInOut"
-                />
+                >
+                  Check In
+                </AppButton>
               </span>
               <span
                 v-if="
@@ -638,14 +639,15 @@
                 class="d-flex align-center"
               >
                 <strong>{{ label }}:</strong>
-                <v-btn
-                  size="x-small"
-                  class="ml-3 text-capitalize"
-                  color="red"
-                  text="Checkout"
+                <AppButton
+                  variant="err"
+                  icon="mdi-close"
+                  class="ml-3"
                   :disabled="loading.checkingOut"
                   @click="handleCheckout(selectedVisitorId as string)"
-                />
+                >
+                  Check Out
+                </AppButton>
               </span>
 
               <span
@@ -1177,12 +1179,52 @@
       </v-card>
     </v-dialog>
 
+    <v-dialog v-model="hidQrDialog" max-width="440" persistent>
+      <v-card>
+        <v-toolbar color="transparent" density="comfortable" class="px-2">
+          <v-toolbar-title class="text-subtitle-1 font-weight-bold">Visitor QR Code</v-toolbar-title>
+          <v-btn icon="mdi-close" variant="text" title="Close" @click="hidQrDialog = false" />
+        </v-toolbar>
+        <v-card-text class="px-8 pb-6 text-center">
+          <v-progress-circular v-if="hidQrLoading" indeterminate color="primary" class="my-10" />
+          <template v-else-if="hidQrImageUrl">
+            <div class="text-h6 font-weight-bold">{{ hidQrVisitor?.name || "Visitor Access Pass" }}</div>
+            <div class="visitor-hid-qr my-5">
+              <v-img :src="hidQrImageUrl" width="280" height="280" alt="Visitor HID QR code" />
+            </div>
+            <div class="text-caption text-medium-emphasis">
+              Valid until {{ formatHidQrExpiry(hidQrExpiresAt) }}
+            </div>
+            <v-chip class="mt-2" size="small" :color="hidQrExpired ? 'error' : 'success'" variant="tonal">
+              {{ hidQrExpired ? "Expired" : `Expires in ${formatHidQrCountdown(hidQrRemainingSeconds)}` }}
+            </v-chip>
+          </template>
+          <v-alert v-if="hidQrError" type="warning" variant="tonal" density="compact" class="mt-4 text-left">
+            {{ hidQrError }}
+          </v-alert>
+          <v-btn
+            v-if="!hidQrLoading && (!hidQrImageUrl || hidQrExpired)"
+            block
+            color="primary-button"
+            variant="flat"
+            class="mt-4 text-none"
+            prepend-icon="mdi-refresh"
+            :loading="hidQrGenerating"
+            @click="generateVisitorHidQr"
+          >
+            {{ hidQrExpired ? "Generate QR again" : "Generate HID QR code" }}
+          </v-btn>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
 
 <script setup lang="ts">
 import moment from "moment-timezone";
+import QRCode from "qrcode";
 
 definePageMeta({
   middleware: ["01-auth", "02-org"],
@@ -1244,6 +1286,8 @@ const {
 } = useUtils();
 const { formatLocation } = useSecurityUtils();
 const { getFileUrlAnpr } = useFile();
+const { getSiteById } = useSite();
+const { getIdentities, issueVisitorQr } = useHidAmico();
 // const { status: visitorStatus, search } = useRoute().query as { status: string, search: string};
 
 const routeName = route.name;
@@ -1255,6 +1299,106 @@ const pageRange = ref("-- - -- of --");
 const activeTab = ref("registered");
 const activeVisitorFormType = ref<TVisitorType | null>(null);
 const selectedVisitorId = ref<string | null>(""); // selected visitor for viewing/actions
+const hidQrDialog = ref(false);
+const hidQrLoading = ref(false);
+const hidQrGenerating = ref(false);
+const hidQrError = ref("");
+const hidQrImageUrl = ref("");
+const hidQrExpiresAt = ref("");
+const hidQrNow = ref(Date.now());
+const hidQrVisitor = ref<Record<string, any> | null>(null);
+const hidQrConfig = ref({ enabled: false, readerId: "", validityMinutes: 60 });
+let hidQrTimer: ReturnType<typeof setInterval> | null = null;
+const hidQrEnabled = computed(() => hidQrConfig.value.enabled && Boolean(hidQrConfig.value.readerId));
+const hidQrRemainingSeconds = computed(() => {
+  const expiry = new Date(hidQrExpiresAt.value).getTime();
+  return Number.isFinite(expiry) ? Math.max(0, Math.ceil((expiry - hidQrNow.value) / 1000)) : 0;
+});
+const hidQrExpired = computed(() => Boolean(hidQrExpiresAt.value) && hidQrRemainingSeconds.value === 0);
+
+async function loadHidQrConfig() {
+  try {
+    const response: any = await getSiteById(siteId);
+    const site = response?.data ?? response;
+    const config = site?.metadata?.hidQrCodePass ?? {};
+    hidQrConfig.value = {
+      enabled: Boolean(config.enabled && config.onlineMode !== false),
+      readerId: String(config.readerId || ""),
+      validityMinutes: Number(config.validityMinutes) > 0 ? Number(config.validityMinutes) : 60,
+    };
+  } catch {
+    hidQrConfig.value = { enabled: false, readerId: "", validityMinutes: 60 };
+  }
+}
+
+function extractIdentityItems(response: any) {
+  return response?.items ?? response?.data?.items ?? [];
+}
+
+async function openVisitorHidQr(visitor: Record<string, any>) {
+  hidQrVisitor.value = visitor;
+  hidQrDialog.value = true;
+  hidQrLoading.value = true;
+  hidQrError.value = "";
+  hidQrImageUrl.value = "";
+  hidQrExpiresAt.value = "";
+  try {
+    const response = await getIdentities(hidQrConfig.value.readerId, { type: "visitor", limit: 100 });
+    const identity = extractIdentityItems(response).find(
+      (item: any) => String(item.visitor || item.metadata?.visitor || "") === String(visitor._id),
+    );
+    const qrValue = String(identity?.metadata?.qrValue || identity?.cardNo || "");
+    hidQrExpiresAt.value = String(identity?.metadata?.expiresAt || "");
+    if (!qrValue || !hidQrExpiresAt.value) {
+      hidQrError.value = "This visitor does not have an HID QR code yet.";
+      return;
+    }
+    hidQrImageUrl.value = await QRCode.toDataURL(qrValue, { width: 360, margin: 2, errorCorrectionLevel: "M" });
+    hidQrNow.value = Date.now();
+  } catch (error: unknown) {
+    hidQrError.value = errorConverter(error) || "Unable to load the visitor HID QR code.";
+  } finally {
+    hidQrLoading.value = false;
+  }
+}
+
+async function generateVisitorHidQr() {
+  if (!hidQrVisitor.value?._id || !hidQrConfig.value.readerId) return;
+  hidQrGenerating.value = true;
+  hidQrError.value = "";
+  try {
+    const response = await issueVisitorQr(hidQrConfig.value.readerId, {
+      visitorId: String(hidQrVisitor.value._id),
+      validityMinutes: hidQrConfig.value.validityMinutes,
+    });
+    const credential = "data" in response ? response.data : response;
+    hidQrImageUrl.value = await QRCode.toDataURL(credential.qrValue, { width: 360, margin: 2, errorCorrectionLevel: "M" });
+    hidQrExpiresAt.value = credential.expiresAt;
+    hidQrNow.value = Date.now();
+  } catch (error: unknown) {
+    hidQrError.value = errorConverter(error) || "Unable to generate the visitor HID QR code.";
+  } finally {
+    hidQrGenerating.value = false;
+  }
+}
+
+function formatHidQrExpiry(value: string) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+}
+
+function formatHidQrCountdown(totalSeconds: number) {
+  const safe = Math.max(0, totalSeconds);
+  const hours = Math.floor(safe / 3600);
+  const minutes = Math.floor((safe % 3600) / 60);
+  const seconds = safe % 60;
+  return [hours, minutes, seconds].map((part) => String(part).padStart(2, "0")).join(":");
+}
+
+watch(hidQrDialog, (open) => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+  hidQrTimer = open ? setInterval(() => { hidQrNow.value = Date.now(); }, 1000) : null;
+});
 
 //filter states
 const searchInput = ref("");
@@ -1505,11 +1649,6 @@ const formattedFields = {
   attachments: "Attachments",
 } as const;
 
-function filterTypeSelectionLabel() {
-  const length = filterTypes.value.length;
-  return `${length} selected ${length === 1 ? "type" : "types"}` as string;
-}
-
 const passStatusOptions = [
   { label: "Returned", value: "Returned" },
   { label: "Not Returned", value: "In Use" },
@@ -1601,7 +1740,6 @@ const {
 watch(getVisitorReq, (newData: any) => {
   if (newData) {
     items.value = newData.items ?? [];
-    // items.value = [{ _id: "testid", name: "John Doe", type: "Contractor", company: "ABC Corp", location: "Block A, Level 1, Unit 101", contact: "12345678", plateNumber: "SGX1234A", checkIn: new Date().toISOString(), checkOut: null, status: "registered", visitorPass: [{ _id: "1", keyId: "pass1", prefixAndName: "VIP Pass" }, { _id: "2", keyId: "pass2", prefixAndName: "VIP Pass 2" }], passKeys: [{ _id: "1", keyId: "key2", prefixAndName: "Master Key" }] }];
     pages.value = newData.pages ?? 0;
     pageRange.value = newData?.pageRange ?? "-- - -- of --";
   }
@@ -2347,7 +2485,14 @@ const syncVisitorFiltersFromRoute = () => {
   }
 };
 
-onMounted(syncVisitorFiltersFromRoute);
+onMounted(() => {
+  syncVisitorFiltersFromRoute();
+  void loadHidQrConfig();
+});
+
+onBeforeUnmount(() => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+});
 
 watch(() => route.query, syncVisitorFiltersFromRoute, { deep: true });
 
@@ -2398,4 +2543,16 @@ watchEffect(async () => {
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+/* The width the type filter carried as `max-width="200"` on the v-select. */
+.visitor-type-filter {
+  max-width: 200px;
+}
+
+.visitor-hid-qr {
+  display: inline-flex;
+  padding: 12px;
+  border: 1px solid #dce3e8;
+  background: #fff;
+}
+</style>

package/components/VisitorPassKeyQRScanner.vue

@@ -3,26 +3,27 @@
         @after-enter="handleScanVisitorQRCode">
         <v-container class="d-flex justify-center" max-height="90vh">
             <!-- QR code reader container -->
-            <v-card elevation="2" class="d-flex flex-column align-center pa-2 w-100 h-100">
-                <v-toolbar>
-                    <v-card-title class="text-h5"> Scan QR Code </v-card-title>
-                    <v-spacer />
-                    <v-btn color="grey-darken-1" icon="mdi-close" @click="closeDialog()" />
-                </v-toolbar>
-
-                <div id="reader" class="d-flex justify-center align-center w-100 h-100"
-                    style="height: calc(100vh - 64px)">
-                    <!-- The QR code scanner box -->
-                    <!-- This is where the QR code scanner will be displayed -->
+            <v-card class="screen-modal qr-scanner">
+                <div class="qr-scanner__head">
+                    <v-card-title>Scan QR Code</v-card-title>
+                    <AppButton variant="icon" icon="mdi-close" @click="closeDialog()" />
                 </div>
-                <!-- Show Error Messages -->
-                <div v-if="showNotFoundMessage" class="text-error mt-8">
-                    <p>{{ errorMessage }}</p>
+
+                <div class="screen-modal__body qr-scanner__body">
+                    <div id="reader" class="qr-scanner__reader">
+                        <!-- The QR code scanner box -->
+                        <!-- This is where the QR code scanner will be displayed -->
+                    </div>
+                    <!-- Show Error Messages -->
+                    <p v-if="showNotFoundMessage" class="qr-scanner__error">{{ errorMessage }}</p>
+                    <!-- Switch camera button inside the reader box -->
+                    <AppButton
+                        icon="mdi-camera-switch"
+                        class="qr-scanner__switch"
+                        aria-label="Switch camera"
+                        @click="switchCamera()"
+                    />
                 </div>
-                <!-- Switch camera button inside the reader box -->
-                <v-btn color="primary" icon class="mt-4" @click="switchCamera()">
-                    <v-icon icon="mdi-camera-switch" large />
-                </v-btn>
             </v-card>
         </v-container>
     </v-dialog>
@@ -136,3 +137,49 @@ const stopScanner = () => {
     });
 };
 </script>
+
+<style scoped>
+/* The card used to be `w-100` inside the centring container; keep that width
+   or the dialog collapses to the width of the reader box. */
+.qr-scanner {
+    width: 100%;
+}
+
+.qr-scanner__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 12px;
+}
+
+.qr-scanner__body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    padding: 4px 20px 20px;
+}
+
+/* The scanner paints its own video into this box; only the frame is ours. */
+.qr-scanner__reader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 320px;
+    border: 1px solid var(--border);
+    border-radius: var(--r-inner);
+    background: var(--thead);
+}
+
+.qr-scanner__error {
+    margin: 0;
+    font-size: var(--fs-cell);
+    color: var(--err);
+}
+
+.qr-scanner__switch {
+    width: var(--btn-h);
+    padding: 0;
+}
+</style>