@7365admin1/layer-common 1.10.6 → 1.10.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.10.7
+
+### Patch Changes
+
+- a17cf02: Update Changes for march 11, 2026
+
 ## 1.10.6
 
 ### Patch Changes

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;

package/components/AccessCardQrTaggingPrintQr.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-container ref="printContent" fluid style="overflow-y: auto">
+    <v-row no-gutters class="main-container">
+      <v-col v-for="(card, idx) in accessCards" :key="idx" cols="auto">
+        <div class="qr-box">
+          <p><strong>Access Level:</strong> {{ card.accessLevel }}</p>
+          <p><strong>HID NO:</strong> {{ card.cardNumber }}</p>
+          <img :src="card.qrDataImage" alt="QR Code" />
+          <p><strong>Card No.:</strong> C{{ card.qrTagCardNo }}</p>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import type { ComponentPublicInstance } from "vue";
+
+defineProps<{ accessCards?: any[] }>();
+defineEmits(["close"]);
+
+const printContent = ref<HTMLElement | null>(null);
+
+async function downloadPDF() {
+  const html2pdf = (await import("html2pdf.js")).default;
+  const component = printContent.value as unknown as ComponentPublicInstance;
+  const el = component.$el ?? printContent.value;
+
+  if (!el || !(el instanceof HTMLElement)) return;
+
+  const opt = {
+    margin: 0.1,
+    filename: `Access-cards-qr.pdf`,
+    image: { type: "jpeg", quality: 0.98 },
+    html2canvas: { scale: 2, useCORS: true },
+    jsPDF: { unit: "in", format: "a4", orientation: "portrait" },
+  };
+
+  await html2pdf().set(opt).from(el).save();
+}
+
+defineExpose({ downloadPDF });
+</script>
+
+<style scoped>
+.main-container {
+  background-color: #fff;
+  padding: 8px;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 4px;
+  width: 100%;
+}
+.qr-box {
+  height: 3cm;
+  width: 2.7cm;
+  border: 1px solid #ccc;
+  padding: 8px;
+  text-align: center;
+  page-break-inside: avoid;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+.qr-box p {
+  font-size: 8px;
+  line-height: 1.2;
+}
+img {
+  width: 1cm;
+  height: 1cm;
+}
+</style>

package/components/AreaChecklistHistoryLogs.vue

@@ -119,6 +119,15 @@
                         class="text-subtitle-2 font-weight-bold px-0"
                       >
                         Set {{ checklistSet.set }}
+                        <v-chip
+                          v-if="checklistSet.isScheduleTask"
+                          size="x-small"
+                          color="info"
+                          variant="tonal"
+                          class="text-none ml-2"
+                        >
+                          Schedule Task
+                        </v-chip>
                       </v-list-subheader>
 
                       <v-list-item

package/components/BuildingForm.vue

@@ -3,7 +3,7 @@
     <v-toolbar>
       <v-row no-gutters class="fill-height px-6" align="center">
         <span class="font-weight-bold text-h5 text-capitalize">
-          {{ prop.mode }} Building
+          {{ prop.mode }} Block
         </span>
       </v-row>
     </v-toolbar>
@@ -40,7 +40,10 @@
                     <v-select
                       v-model.number="building.block"
                       :items="blocks"
+                      item-title="label"
+                      item-value="value"
                       density="comfortable"
+                      :disabled="prop.mode === 'edit'"
                       :rules="[
                         requiredRule,
                         () =>
@@ -48,7 +51,12 @@
                           'Block is required',
                       ]"
                       type="number"
-                    ></v-select>
+                    >
+                  <template v-slot:item="{ props: itemProps, item}">
+                    <v-list-item v-bind="itemProps" :disabled="item?.raw?.disabled" ></v-list-item>
+                  </template>
+                  
+                  </v-select>
                   </v-col>
                 </v-row>
               </v-col>
@@ -114,10 +122,10 @@
           </v-row>
         </v-expand-transition>
 
-         <v-col cols="12" class="px-6">
+         <!-- <v-col cols="12" class="px-6">
             <InputLabel class="text-capitalize" title="Building Floor plan" />
             <InputFileV2 v-model="building.buildingFloorPlan" :multiple="true" :max-length="10" title="Upload Images" />
-          </v-col>
+          </v-col> -->
 
         <v-col cols="12" class="mt-2">
           <v-checkbox v-model="createMore" density="comfortable" hide-details>
@@ -199,6 +207,10 @@ const prop = defineProps({
       buildingFloorPlan: []
     }),
   },
+  blocks: {
+    type: Array as PropType<TBuilding[]>,
+    default: () => [],
+  },
 });
 
 const { getSiteById } = useSite();
@@ -218,7 +230,20 @@ watchEffect(() => {
 
 const blocks = computed(() => {
   if (!site.value) return [];
-  return Array.from({ length: site.value?.metadata?.block || 0 }, (_, i) => i + 1);
+  // return 
+  // return [ { label: "1", value: 1, disabled: true }, { label: "2", value: 2 }, { label: "3", value: 3 } ];
+  const array = Array.from({ length: site.value?.metadata?.block || 0 }, (_, i) => i + 1);
+
+  const formattedArray = array.map((num) => {
+    const isDisabled = prop.blocks.some((block) => block.block === num) 
+    return {
+      label: num.toString(),
+      value: num,
+      disabled: isDisabled
+    };
+  });
+
+  return formattedArray;
 });
 
 const emit = defineEmits(["cancel", "success", "success:create-more"]);
@@ -295,6 +320,12 @@ async function submit() {
   }
 }
 
+watch(buildingLevels, (newVal) => {
+  setTimeout(() => {
+    show.value = newVal > 0 && !!newVal;
+  }, 500);
+});
+
 function cancel() {
   createMore.value = false;
   message.value = "";