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

package/components/VisitorForm.vue

@@ -515,13 +515,49 @@
           </div>
 
           <div class="hid-qr-image-shell my-5">
-            <v-img :src="hidQrPreview.imageUrl" width="280" height="280" alt="Visitor access QR code" />
+            <v-img v-if="hidQrVisible" :src="hidQrPreview.imageUrl" width="280" height="280" alt="Visitor access QR code" />
+            <button v-else type="button" class="hid-qr-reveal" aria-label="Show QR code" @click="hidQrVisible = true">
+              <v-icon icon="mdi-eye-outline" size="42" />
+              <span>Click to show QR code</span>
+            </button>
           </div>
 
+          <v-btn
+            variant="text"
+            density="comfortable"
+            class="text-none"
+            :prepend-icon="hidQrVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+            @click="hidQrVisible = !hidQrVisible"
+          >
+            {{ hidQrVisible ? "Hide QR code" : "Show QR code" }}
+          </v-btn>
+
           <div class="text-h6 font-weight-bold">{{ visitor.name }}</div>
           <div v-if="hidQrPreview.expiresAt" class="text-caption text-medium-emphasis mt-1">
             Valid until {{ formatHidQrExpiry(hidQrPreview.expiresAt) }}
           </div>
+          <v-chip
+            v-if="hidQrPreview.expiresAt"
+            class="mt-2"
+            size="small"
+            :color="hidQrExpired ? 'error' : 'success'"
+            variant="tonal"
+          >
+            {{ hidQrExpired ? "Expired" : `Expires in ${formatHidQrCountdown(hidQrRemainingSeconds)}` }}
+          </v-chip>
+
+          <v-btn
+            v-if="hidQrExpired"
+            block
+            class="mt-4 text-none"
+            color="primary-button"
+            variant="flat"
+            prepend-icon="mdi-refresh"
+            :loading="hidQrRegenerating"
+            @click="regenerateHidQrCode"
+          >
+            Generate QR again
+          </v-btn>
 
           <v-alert v-if="hidQrPreviewError" type="error" variant="tonal" density="compact" class="mt-4 text-left">
             {{ hidQrPreviewError }}
@@ -684,6 +720,11 @@ const isNricFieldFocused = ref(false);
 const hidQrPrinting = ref(false);
 const hidQrPreviewDialog = ref(false);
 const hidQrPreviewError = ref("");
+const hidQrVisible = ref(false);
+const hidQrRegenerating = ref(false);
+const hidQrVisitorId = ref("");
+const hidQrNow = ref(Date.now());
+let hidQrTimer: ReturnType<typeof setInterval> | null = null;
 const hidQrPendingCompletion = ref<"done" | "done:more" | null>(null);
 const hidQrPreview = reactive({
   imageUrl: "",
@@ -691,6 +732,24 @@ const hidQrPreview = reactive({
   expiresAt: "",
 });
 
+const hidQrRemainingSeconds = computed(() => {
+  const expiry = new Date(hidQrPreview.expiresAt).getTime();
+  return Number.isFinite(expiry) ? Math.max(0, Math.ceil((expiry - hidQrNow.value) / 1000)) : 0;
+});
+const hidQrExpired = computed(() => Boolean(hidQrPreview.expiresAt) && hidQrRemainingSeconds.value === 0);
+
+watch(hidQrPreviewDialog, (open) => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+  hidQrTimer = null;
+  if (!open) return;
+  hidQrNow.value = Date.now();
+  hidQrTimer = setInterval(() => { hidQrNow.value = Date.now(); }, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+});
+
 const registeredUnitCompanyName = ref("N/A");
 
 const dialog = reactive({
@@ -818,10 +877,6 @@ const hidQrValidityMinutes = computed(() => {
 });
 
 const hidQrReaderId = computed(() => String(hidQrCodePassConfig.value?.readerId || ""));
-const hidQrFormat = computed<"0" | "1" | "2">(() => {
-  const value = String(hidQrCodePassConfig.value?.qrFormat || "0");
-  return value === "1" || value === "2" ? value : "0";
-});
 
 const hidQrCodePassAllowed = computed(() => {
   return (
@@ -2088,10 +2143,10 @@ async function prepareHidQrCodePreview(visitorId: string) {
   }
 
   try {
+    hidQrVisitorId.value = visitorId;
     const response = await issueVisitorQr(hidQrReaderId.value, {
       visitorId,
       validityMinutes: hidQrValidityMinutes.value,
-      qrFormat: hidQrFormat.value,
     });
     const credential = "data" in response ? response.data : response;
     hidQrPrintPayload.value = credential.qrValue;
@@ -2107,14 +2162,37 @@ async function prepareHidQrCodePreview(visitorId: string) {
     });
     hidQrPreview.issuedAt = credential.issuedAt || "";
     hidQrPreview.expiresAt = credential.expiresAt || "";
+    hidQrVisible.value = false;
+    hidQrNow.value = Date.now();
     hidQrPreviewDialog.value = true;
     return true;
   } catch (error: unknown) {
-    errorMessage.value = errorConverter(error) || "Unable to generate HID QR Code.";
+    const message = errorConverter(error) || "Unable to generate HID QR Code.";
+    if (hidQrPreviewDialog.value) hidQrPreviewError.value = message;
+    else errorMessage.value = message;
     return false;
   }
 }
 
+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(":");
+}
+
+async function regenerateHidQrCode() {
+  if (!hidQrVisitorId.value) return;
+  hidQrRegenerating.value = true;
+  hidQrPreviewError.value = "";
+  try {
+    await prepareHidQrCodePreview(hidQrVisitorId.value);
+  } finally {
+    hidQrRegenerating.value = false;
+  }
+}
+
 async function printHidQrCodePass() {
   if (hidQrPrinted.value) return true;
 
@@ -2335,4 +2413,19 @@ onMounted(() => {
   border: 1px solid #dce3e8;
   background: #ffffff;
 }
+
+.hid-qr-reveal {
+  display: flex;
+  width: 280px;
+  height: 280px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: #f5f7f9;
+  color: #344054;
+  cursor: pointer;
+  flex-direction: column;
+  gap: 10px;
+  font: inherit;
+}
 </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-eye-outline"
+            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
@@ -1177,12 +1172,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 +1279,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 +1292,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 +1642,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" },
@@ -2346,7 +2478,14 @@ const syncVisitorFiltersFromRoute = () => {
   }
 };
 
-onMounted(syncVisitorFiltersFromRoute);
+onMounted(() => {
+  syncVisitorFiltersFromRoute();
+  void loadHidQrConfig();
+});
+
+onBeforeUnmount(() => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+});
 
 watch(() => route.query, syncVisitorFiltersFromRoute, { deep: true });
 
@@ -2397,4 +2536,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/WorkOrder/Main.vue

@@ -1,58 +1,47 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters align="center" justify="space-between">
-        <v-btn
-          class="text-none text-capitalize"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="(showCreateDialog = true), (isEditMode = false)"
-          v-if="canCreateWorkOrder"
-        >
+  <div>
+    <!--
+      The design's page scaffold. The screen had no heading, its Create button
+      sat top-left and the search floated top-right outside the card, with
+      refresh and the pager stacked on their own bar above the table. Same
+      button, same dialog, same permission, same debounced search, same pager.
+    -->
+    <PageHeader title="Work Orders">
+      <template v-if="canCreateWorkOrder" #actions>
+        <AppButton @click="(showCreateDialog = true), (isEditMode = false)">
           Create Work Order
-        </v-btn>
-
-        <v-text-field
-          v-model="searchText"
-          placeholder="Search work order..."
-          variant="outlined"
-          density="comfortable"
-          clearable
-          hide-details
-          class="ml-2"
-          style="max-width: 250px"
-        />
-      </v-row>
-    </v-col>
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <v-row no-gutters>
     <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" @click="updatePage(1)">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #left>
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
+              @click="updatePage(1)"
+            />
           </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>
+            <AppField
+              v-model="searchText"
+              search
+              compact
+              placeholder="Search work order..."
+              klass="app-toolbar__search"
+            />
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="updatePage"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
 
         <v-data-table
           :headers="headers"
@@ -62,6 +51,7 @@
           fixed-header
           hide-default-footer
           :hide-default-header="false"
+          :loading="loading"
           @click:row="tableRowClickHandler"
           style="max-height: calc(100vh - (200px))"
         >
@@ -69,9 +59,10 @@
             {{ formatDateDDMMYYYYLocal(item.createdAt) }}
           </template>
         </v-data-table>
-      </v-card>
+      </AppCard>
     </v-col>
-  </v-row>
+    </v-row>
+  </div>
 
   <WorkOrderCreate
     v-model="showCreateDialog"