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

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
@@ -588,7 +583,7 @@
         :org="orgId"
         :site="siteId"
         :visitor-data="selectedVisitorDataObject"
-        :current-user="currentUser._id"
+        :current-user="currentUser?._id"
         :type="activeVisitorFormType"
         :enable-unregistered="enableUnregistered"
         @back="handleClickBack"
@@ -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" },
@@ -1601,7 +1733,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 --";
   }
@@ -1708,7 +1839,7 @@ async function handleVisitorDataFromScannedQRCodeCheckInOut(
           site: visitorData.site ?? siteId,
         },
         update: {
-          updatedBy: currentUser.value._id,
+          updatedBy: currentUser.value?._id,
           visitorPass: visitorPass.find(
             (i: Record<string, any>) => i.keyId === null
           )
@@ -2347,7 +2478,14 @@ const syncVisitorFiltersFromRoute = () => {
   }
 };
 
-onMounted(syncVisitorFiltersFromRoute);
+onMounted(() => {
+  syncVisitorFiltersFromRoute();
+  void loadHidQrConfig();
+});
+
+onBeforeUnmount(() => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+});
 
 watch(() => route.query, syncVisitorFiltersFromRoute, { deep: true });
 
@@ -2398,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/VisitorSocketPopUp.vue

@@ -66,6 +66,29 @@
       </template>
     </v-snackbar>
 
+    <!--
+      Camera health is its own alert, deliberately separate from the plate
+      snackbar above: it is not a visitor event, it must not be silenced by the
+      unregistered-visitor switch, and it must not be hidden on the unregistered
+      tab. Several failing cameras collapse into one line rather than one
+      snackbar each.
+    -->
+    <v-snackbar
+      v-if="canViewVisitor"
+      v-model="cameraAlert.modal"
+      :color="cameraFaults.size ? 'warning' : 'success'"
+      :timeout="10000"
+      location="top right"
+      class="rounded-xl"
+      multi-line
+      :z-index="100000000"
+    >
+      <span class="text-1-4rem">{{ cameraAlertText }}</span>
+      <template #actions>
+        <v-btn icon="mdi-close" variant="text" @click="cameraAlert.modal = false" />
+      </template>
+    </v-snackbar>
+
     <v-dialog v-model="permanentMessageDialog.modal" max-width="480" persistent>
       <v-card>
         <v-card-title class="text-h6">Notice</v-card-title>
@@ -132,6 +155,36 @@ const permanentMessageDialog = reactive({
   text: "",
 });
 
+// Outstanding camera faults for this site, keyed by camera id so a repeat for
+// the same camera replaces its line instead of adding another.
+const cameraFaults = reactive(new Map<string, string>());
+const cameraRecovery = ref("");
+const cameraAlert = reactive({ modal: false });
+
+const cameraAlertText = computed(
+  () => cameraAlertMessage([...cameraFaults.values()]) || cameraRecovery.value
+);
+
+const handleCameraHealth = (data: TVisitorSocketData) => {
+  // Older API-core builds send the fault text with no `event`, so a bare
+  // message is a fault.
+  if (data?.event === "camera-recovered") {
+    // Without a camera id there is no way to tell which fault cleared.
+    if (data?.camera) cameraFaults.delete(data.camera);
+    else cameraFaults.clear();
+    // Alerts are now infrequent, so the operator is told it came back —
+    // otherwise the only signal a camera recovered is silence.
+    cameraRecovery.value = cameraFaults.size ? "" : data?.message || "";
+    cameraAlert.modal = Boolean(cameraAlertText.value);
+    return;
+  }
+
+  if (!data?.message) return;
+  cameraRecovery.value = "";
+  cameraFaults.set(data?.camera || data.message, data.message);
+  cameraAlert.modal = true;
+};
+
 watch(
   () => props.siteId,
   async (siteId) => {
@@ -233,8 +286,9 @@ const connectSocket = () => {
     }
 
 
-    if (data?.message) {
-      showTransientMessage(data.message, "error");
+    // Camera health, not a visitor event: its own alert, its own gate.
+    if (data?.message || data?.event) {
+      handleCameraHealth(data);
     }
 
     if (data?.messagePermanent) {

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"

package/composables/useComment.ts

@@ -89,13 +89,13 @@ export default function useComment() {
 
       comments.value = _comments.items
         .map((comment: any) => {
-          if (comment.createdBy === currentUser.value._id) {
+          if (comment.createdBy === currentUser.value?._id) {
             comment.justify = "end";
           } else {
             comment.justify = "start";
             if (
               ((Array.isArray(comment.seenBy) &&
-                !comment.seenBy.includes(currentUser.value._id)) ||
+                !comment.seenBy.includes(currentUser.value?._id)) ||
                 !comment?.seenBy) &&
               comment?._id
             ) {
@@ -111,7 +111,7 @@ export default function useComment() {
         );
 
       if (Array.isArray(updateSeenIds) && updateSeenIds.length > 0) {
-        const seenBy = await updateSeenBy(updateSeenIds, currentUser.value._id);
+        const seenBy = await updateSeenBy(updateSeenIds, currentUser.value?._id);
       }
     } catch (error) {
       console.log("error :", error);