@7365admin1/layer-common 1.10.5 → 1.10.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.10.7
+
+### Patch Changes
+
+- a17cf02: Update Changes for march 11, 2026
+
+## 1.10.6
+
+### Patch Changes
+
+- 49fefa8: Update layer-common package for March 9,2026
+
 ## 1.10.5
 
 ### Patch Changes

package/components/AccessCardDetailsDialog.vue

@@ -0,0 +1,144 @@
+<template>
+  <v-dialog :model-value="modelValue" width="480" persistent>
+    <v-card width="100%">
+      <v-toolbar density="compact" color="black">
+        <v-toolbar-title class="text-subtitle-1 font-weight-medium">
+          Card Details — {{ card?.cardNo ?? "N/A" }}
+        </v-toolbar-title>
+        <v-btn icon @click="emit('update:modelValue', false)">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-toolbar>
+
+      <v-card-text style="max-height: 70vh; overflow-y: auto" class="pa-4">
+        <div v-if="pending" class="d-flex justify-center align-center py-8">
+          <v-progress-circular indeterminate color="black" />
+        </div>
+
+        <div v-else-if="!details" class="text-center text-grey py-8">
+          No details available.
+        </div>
+
+        <div v-else class="d-flex flex-column ga-3">
+          <div>
+            <div class="text-caption text-grey">Card No</div>
+            <div class="text-body-2 font-weight-medium">{{ details.cardNo ?? "N/A" }}</div>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">Type</div>
+            <div class="text-body-2 font-weight-medium">{{ details.type ?? "N/A" }}</div>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">Status</div>
+            <v-chip
+              :color="statusColor(details.status)"
+              variant="flat"
+              size="x-small"
+              class="text-capitalize font-weight-medium mt-1"
+            >
+              {{ details.status ?? "N/A" }}
+            </v-chip>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">Activated</div>
+            <div class="text-body-2 font-weight-medium">{{ details.isActivated ? "Yes" : "No" }}</div>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">Site</div>
+            <div class="text-body-2 font-weight-medium">{{ details.site?.name ?? "N/A" }}</div>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">User</div>
+            <div class="text-body-2 font-weight-medium">{{ details.user?.name ?? "N/A" }} ({{ details.user?.email ?? "N/A" }})</div>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">Created At</div>
+            <div class="text-body-2 font-weight-medium">{{ formatDate(details.createdAt) }}</div>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">Updated At</div>
+            <div class="text-body-2 font-weight-medium">{{ formatDate(details.updatedAt) }}</div>
+          </div>
+
+          <div v-if="details.remarks">
+            <div class="text-caption text-grey">Remarks</div>
+            <div class="text-body-2 font-weight-medium">{{ details.remarks }}</div>
+          </div>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  card: {
+    type: Object as PropType<Record<string, any> | null>,
+    default: null,
+  },
+  siteId: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+const { getCardDetails } = useAccessManagement();
+
+const details = ref<Record<string, any> | null>(null);
+const pending = ref(false);
+
+watch(
+  () => props.modelValue,
+  async (val) => {
+    if (val && props.card?._id && props.siteId) {
+      pending.value = true;
+      try {
+        const res = await getCardDetails({ siteId: props.siteId, cardId: props.card._id });
+        details.value = res?.data ?? null;
+      } finally {
+        pending.value = false;
+      }
+    } else {
+      details.value = null;
+    }
+  }
+);
+
+function statusColor(status: string) {
+  const map: Record<string, string> = {
+    active: "success",
+    assigned: "primary",
+    replaced: "orange",
+    deleted: "error",
+    available: "grey",
+  };
+  return map[status] ?? "grey";
+}
+
+function formatDate(date: string) {
+  if (!date) return "N/A";
+  return new Intl.DateTimeFormat("en-GB", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  }).format(new Date(date));
+}
+</script>

package/components/AccessCardPreviewDialog.vue

@@ -1,7 +1,8 @@
 <template>
-  <AccessCardHistoryDialog
+  <AccessCardDetailsDialog
     v-model="historyDialog"
     :card="selectedCardInUnit"
+    :site-id="siteId"
   />
 
   <v-dialog :model-value="modelValue" width="450" persistent>
@@ -221,7 +222,7 @@
                 </v-list-item>
                 <v-list-item :disabled="!isSelectedCardPhysical" @click="historyDialog = true">
                   <v-list-item-title class="text-subtitle-2 cursor-pointer">
-                    Card History
+                    Card Details
                   </v-list-item-title>
                 </v-list-item>
                 <v-list-item
@@ -277,6 +278,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  siteId: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits<{

package/components/AccessCardQrTagging.vue

@@ -9,6 +9,7 @@
             variant="tonal"
             size="large"
             :disabled="!items.length"
+            @click="handlePrintAll"
           >
             Print All
           </v-btn>
@@ -17,7 +18,8 @@
             rounded="pill"
             variant="tonal"
             size="large"
-            :disabled="!selected.length"
+            :disabled="!qrCodeAccessCards.length"
+            @click="generateQrCodes"
           >
             Generate QR Code
           </v-btn>
@@ -26,23 +28,14 @@
             rounded="pill"
             variant="tonal"
             size="large"
-            :disabled="!selected.length"
+            :disabled="!qrCodeAccessCardsToPrint.length"
+            @click="handlePrintQrCode"
           >
             Print QR Code
           </v-btn>
         </v-row>
 
         <v-row no-gutters class="ga-2" justify="end" style="max-width: 420px">
-          <v-select
-            v-model="typeFilter"
-            :items="typeOptions"
-            placeholder="Type"
-            variant="outlined"
-            density="comfortable"
-            hide-details
-            clearable
-            style="max-width: 160px"
-          />
           <v-text-field
             v-model="searchText"
             placeholder="Search Card..."
@@ -86,55 +79,133 @@
         </v-toolbar>
 
         <v-data-table
-          v-model="selected"
           :headers="tableHeaders"
           :items="items"
           item-value="_id"
           items-per-page="10"
           fixed-header
           hide-default-footer
-          show-select
           style="max-height: calc(100vh - 200px)"
         >
-          <template #item.card="{ item }">
+          <template #header.selectGenerate>
+            <v-checkbox
+              :model-value="isAllGenerateSelected"
+              @update:model-value="toggleSelectAllGenerate"
+              hide-details
+              density="compact"
+              :disabled="!hasGeneratableItems"
+            />
+          </template>
+
+          <template #header.selectPrint>
+            <v-checkbox
+              :model-value="isAllPrintSelected"
+              @update:model-value="toggleSelectAllPrint"
+              hide-details
+              density="compact"
+              :disabled="!hasPrintableItems"
+              style="margin-left: -12px"
+            />
+          </template>
+
+          <template #item.selectGenerate="{ item }">
+            <v-checkbox
+              v-if="!item.qrTag"
+              :model-value="qrCodeAccessCards.includes(item._id)"
+              @update:model-value="toggleGenerateSelection(item._id)"
+              hide-details
+              density="compact"
+            />
+          </template>
+
+          <template #item.cardNo="{ item }">
             <v-row no-gutters align="center" class="ga-2">
               <v-icon size="18" color="grey-darken-1">mdi-card-account-details</v-icon>
-              <span>{{ item.hid ?? "N/A" }}</span>
+              <span>{{ item.cardNo ?? "N/A" }}</span>
             </v-row>
           </template>
 
-          <template #item.qrCode="{ item }">
+          <template #item.qrTagCardNo="{ item }">
+            <span>{{ item.qrTagCardNo != null ? `C${item.qrTagCardNo}` : "N/A" }}</span>
+          </template>
+
+          <template #item.qrTag="{ item }">
             <v-icon
-              :color="item.qrCode ? 'success' : 'grey-lighten-1'"
+              :color="item.qrTag ? 'success' : 'grey-lighten-1'"
               size="22"
             >
-              {{ item.qrCode ? "mdi-check-circle" : "mdi-circle-outline" }}
+              {{ item.qrTag ? "mdi-check-circle" : "mdi-circle-outline" }}
             </v-icon>
           </template>
+
+          <template #item.selectPrint="{ item }">
+            <v-checkbox
+              v-if="item.qrTag"
+              :model-value="qrCodeAccessCardsToPrint.includes(item._id)"
+              @update:model-value="togglePrintSelection(item._id)"
+              hide-details
+              density="compact"
+              style="margin-left: -12px"
+            />
+          </template>
         </v-data-table>
       </v-card>
     </v-col>
 
+    <!-- Hidden QR canvases for generation -->
+    <ClientOnly>
+      <div style="display: none">
+        <qrcode-vue
+          v-for="qrCode in qrCodesToGenerate"
+          :key="qrCode._id"
+          :value="qrCode.qrData"
+          :size="150"
+          :data-card-id="qrCode._id"
+        />
+      </div>
+    </ClientOnly>
+
+    <!-- Print dialog -->
+    <v-dialog v-model="showPrintDialog" max-width="fit-content">
+      <AccessCardQrTaggingPrintQr
+        ref="printQrRef"
+        :access-cards="printPayload"
+        @close="showPrintDialog = false"
+      />
+    </v-dialog>
+
+    <!-- Processing loader -->
+    <v-dialog v-model="isGenerating" persistent width="300">
+      <v-card>
+        <v-card-text class="text-center">
+          <v-progress-circular indeterminate color="deep-purple" size="50" />
+          <div class="mt-3">Processing QR Codes...</div>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
 
 <script setup lang="ts">
+import QrcodeVue from "qrcode.vue";
+
 definePageMeta({
   middleware: ["01-auth", "02-org"],
   memberOnly: true,
 });
 
 const tableHeaders = [
-  { title: "Card", key: "card", sortable: false },
-  { title: "Location", key: "location", sortable: false },
-  { title: "Card No.", key: "cardNo", sortable: false },
-  { title: "HID", key: "hid", sortable: false },
-  { title: "QR Code", key: "qrCode", sortable: false },
+  { title: "", key: "selectGenerate", sortable: false, width: "50px" },
+  { title: "Card", key: "cardNo", sortable: false },
+  { title: "Location", key: "accessLevel", sortable: false },
+  { title: "Card No.", key: "qrTagCardNo", sortable: false },
+  { title: "HID", key: "extractedCardNo", sortable: false },
+  { title: "QR Code", key: "qrTag", sortable: false },
+  { title: "", key: "selectPrint", sortable: false, width: "50px" },
 ];
 
-const typeOptions = ["Physical", "Non-Physical"];
-
 const route = useRoute();
 const siteId = computed(() => route.params.site as string);
 const orgId = computed(() => route.params.org as string);
@@ -148,9 +219,24 @@ const messageSnackbar = ref(false);
 const messageColor = ref("");
 
 const items = ref<Record<string, any>[]>([]);
-const selected = ref<string[]>([]);
 const searchText = ref("");
-const typeFilter = ref<string | null>(null);
+
+const qrCodeAccessCards = ref<string[]>([]);
+const qrCodeAccessCardsToPrint = ref<string[]>([]);
+const qrCodesToGenerate = ref<{ _id: string; cardNo: string; qrData: string; qrTagCardNo: string }[]>([]);
+
+const isGenerating = ref(false);
+const showPrintDialog = ref(false);
+const printPayload = ref<any[]>([]);
+const printQrRef = ref();
+
+const {
+  getVisitorAccessCards,
+  saveVisitorAccessCardQrTag,
+  getAllVisitorAccessCardsQrTags,
+} = useAccessManagement();
+
+const { addFile, getFileUrl } = useFile();
 
 const {
   data: qrTaggingReq,
@@ -158,23 +244,217 @@ const {
   status: fetchStatus,
 } = useLazyAsyncData(
   "get-qr-tagging",
-  () => {
-    // TODO: wire up QR tagging API
-    return Promise.resolve({ data: { items: [], pages: 0, pageRange: "0 - 0 of 0" } });
-  },
-  { watch: [page, searchText, typeFilter] }
+  () =>
+    getVisitorAccessCards({
+      page: page.value,
+      limit: 10,
+      site: siteId.value,
+      search: searchText.value || undefined,
+    }),
+  { watch: [page, searchText] }
 );
 
 const loading = computed(() => fetchStatus.value === "pending");
 
 watchEffect(() => {
   if (qrTaggingReq.value?.data) {
-    items.value = qrTaggingReq.value.data.items;
+    items.value = qrTaggingReq.value.data.items.map((item: any) => ({
+      ...item,
+      qrTagCardNo: item.qrTagCardNo ?? item.extractedCardNo,
+    }));
     pages.value = qrTaggingReq.value.data.pages;
     pageRange.value = qrTaggingReq.value.data.pageRange;
   }
 });
 
+const hasGeneratableItems = computed(() =>
+  items.value.some((item) => !item.qrTag)
+);
+const hasPrintableItems = computed(() =>
+  items.value.some((item) => !!item.qrTag)
+);
+
+const isAllGenerateSelected = computed(() => {
+  const generatable = items.value.filter((item) => !item.qrTag);
+  return (
+    generatable.length > 0 &&
+    generatable.every((item) => qrCodeAccessCards.value.includes(item._id))
+  );
+});
+
+const isAllPrintSelected = computed(() => {
+  const printable = items.value.filter((item) => !!item.qrTag);
+  return (
+    printable.length > 0 &&
+    printable.every((item) =>
+      qrCodeAccessCardsToPrint.value.includes(item._id)
+    )
+  );
+});
+
+function toggleSelectAllGenerate(value: boolean | null) {
+  if (value) {
+    qrCodeAccessCards.value = items.value
+      .filter((item) => !item.qrTag)
+      .map((item) => item._id);
+  } else {
+    qrCodeAccessCards.value = [];
+  }
+}
+
+function toggleSelectAllPrint(value: boolean | null) {
+  if (value) {
+    qrCodeAccessCardsToPrint.value = items.value
+      .filter((item) => !!item.qrTag)
+      .map((item) => item._id);
+  } else {
+    qrCodeAccessCardsToPrint.value = [];
+  }
+}
+
+function toggleGenerateSelection(id: string) {
+  if (qrCodeAccessCards.value.includes(id)) {
+    qrCodeAccessCards.value = qrCodeAccessCards.value.filter((i) => i !== id);
+  } else {
+    qrCodeAccessCards.value.push(id);
+  }
+}
+
+function togglePrintSelection(id: string) {
+  if (qrCodeAccessCardsToPrint.value.includes(id)) {
+    qrCodeAccessCardsToPrint.value = qrCodeAccessCardsToPrint.value.filter(
+      (i) => i !== id
+    );
+  } else {
+    qrCodeAccessCardsToPrint.value.push(id);
+  }
+}
+
+async function generateQrCodes() {
+  isGenerating.value = true;
+
+  const filteredCards = items.value.filter((card) =>
+    qrCodeAccessCards.value.includes(card._id)
+  );
+
+  qrCodesToGenerate.value = filteredCards.map((card) => ({
+    _id: card._id,
+    cardNo: card.cardNo,
+    qrData: card.qrData,
+    qrTagCardNo: card.qrTagCardNo ?? "",
+  }));
+
+  await nextTick();
+  await nextTick();
+
+  const payloads: Array<{ _id: string; cardNo: string; qrTag: string; qrTagCardNo: string }> = [];
+
+  await Promise.all(
+    qrCodesToGenerate.value.map(async (qrCode) => {
+      const fileUrl = await saveQrCodeToStorage(qrCode._id);
+      if (fileUrl) {
+        payloads.push({
+          _id: qrCode._id,
+          cardNo: qrCode.cardNo,
+          qrTag: fileUrl,
+          qrTagCardNo: qrCode.qrTagCardNo,
+        });
+      }
+    })
+  );
+
+  try {
+    if (payloads.length > 0) {
+      await saveVisitorAccessCardQrTag(siteId.value, payloads);
+      showMessage(`${payloads.length} QR code(s) generated successfully`, "success");
+    } else {
+      showMessage("No QR codes could be generated", "warning");
+    }
+  } catch {
+    showMessage("Failed to save QR codes", "error");
+  }
+
+  await fetchItems();
+
+  qrCodesToGenerate.value = [];
+  qrCodeAccessCards.value = [];
+  isGenerating.value = false;
+}
+
+async function saveQrCodeToStorage(_id: string): Promise<string | null> {
+  const canvas = document.querySelector<HTMLCanvasElement>(
+    `canvas[data-card-id="${_id}"]`
+  );
+  if (!canvas) return null;
+
+  return new Promise((resolve) => {
+    canvas.toBlob(async (blob) => {
+      if (!blob) return resolve(null);
+      const file = new File([blob], `${_id}.png`, { type: "image/png" });
+      try {
+        const res = await addFile(file);
+        resolve(res?.id ? getFileUrl(res.id) : null);
+      } catch {
+        resolve(null);
+      }
+    }, "image/png");
+  });
+}
+
+async function handlePrintQrCode() {
+  const payload = items.value
+    .filter((card) => qrCodeAccessCardsToPrint.value.includes(card._id))
+    .map((card) => ({
+      accessLevel: card.accessLevel,
+      cardNumber: card.extractedCardNo,
+      qrDataImage: card.qrTag,
+      qrTagCardNo: card.qrTagCardNo,
+    }));
+
+  if (!payload.length) return;
+
+  printPayload.value = payload;
+  showPrintDialog.value = true;
+
+  await nextTick();
+  await nextTick();
+
+  printQrRef.value?.downloadPDF();
+  qrCodeAccessCardsToPrint.value = [];
+  showMessage("Printing QR codes...", "success");
+}
+
+async function handlePrintAll() {
+  isGenerating.value = true;
+  try {
+    const response: any = await getAllVisitorAccessCardsQrTags(siteId.value);
+
+    if (!response?.data?.items?.length) {
+      showMessage("No QR codes found to print", "warning");
+      return;
+    }
+
+    printPayload.value = response.data.items.map((card: any) => ({
+      accessLevel: card.accessLevel,
+      cardNumber: card.extractedCardNo,
+      qrDataImage: card.qrTag,
+      qrTagCardNo: card.qrTagCardNo,
+    }));
+
+    showPrintDialog.value = true;
+
+    await nextTick();
+    await nextTick();
+
+    printQrRef.value?.downloadPDF();
+    showMessage("Printing all QR codes...", "success");
+  } catch (error: any) {
+    showMessage(error || "Failed to fetch QR codes", "error");
+  } finally {
+    isGenerating.value = false;
+  }
+}
+
 function showMessage(msg: string, color: string) {
   message.value = msg;
   messageColor.value = color;