@7365admin1/layer-common 3.0.26 → 3.0.27

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @iservice365/layer-common
 
+## 3.0.27
+
+### Patch Changes
+
+- c76ac10: Update Package Version
+- 3d5034d: Update Version Package
+
 ## 3.0.26
 
 ### Patch Changes

package/components/AccessCardDetailsDialog.vue

@@ -30,7 +30,7 @@
             <div class="text-body-2 font-weight-medium">{{ details.type ?? "N/A" }}</div>
           </div>
 
-          <div>
+          <div v-if="details.status">
             <div class="text-caption text-grey">Status</div>
             <v-chip
               :color="statusColor(details.status)"
@@ -47,7 +47,7 @@
             <div class="text-body-2 font-weight-medium">{{ details.isActivated ? "Yes" : "No" }}</div>
           </div>
 
-          <div>
+          <div v-if="details.site?.name">
             <div class="text-caption text-grey">Site</div>
             <div class="text-body-2 font-weight-medium">{{ details.site?.name ?? "N/A" }}</div>
           </div>
@@ -101,6 +101,81 @@
             <div class="text-caption text-grey">Remarks</div>
             <div class="text-body-2 font-weight-medium">{{ details.remarks }}</div>
           </div>
+
+          <!-- History -->
+          <template v-if="details.history?.length > 0">
+            <v-divider />
+            <div
+              class="d-flex align-center justify-space-between cursor-pointer"
+              @click="historyOpen = !historyOpen"
+            >
+              <div class="text-caption font-weight-bold text-grey-darken-2 text-uppercase">
+                History ({{ details.history.length }})
+              </div>
+              <v-icon size="16" :icon="historyOpen ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
+            </div>
+
+            <template v-if="historyOpen">
+              <div
+                v-for="(entry, idx) in sortedHistory"
+                :key="entry._id ?? idx"
+                class="d-flex ga-2"
+              >
+                <!-- Timeline spine -->
+                <div class="d-flex flex-column align-center" style="width: 20px; flex-shrink: 0;">
+                  <div
+                    class="timeline-dot rounded-circle mt-1"
+                    :class="entry.visitorId ? 'bg-blue' : 'bg-orange'"
+                  />
+                  <div
+                    v-if="idx < sortedHistory.length - 1"
+                    class="timeline-line bg-grey-lighten-2 mt-1"
+                  />
+                </div>
+
+                <!-- Entry content -->
+                <div class="d-flex flex-column ga-1 pb-4 flex-grow-1">
+                  <div class="d-flex align-center justify-space-between">
+                    <v-chip
+                      size="x-small"
+                      variant="tonal"
+                      :color="entry.visitorId ? 'blue' : 'orange'"
+                      :prepend-icon="entry.visitorId ? 'mdi-account-arrow-right' : 'mdi-arrow-u-left-top'"
+                    >
+                      {{ entry.visitorId ? "Assigned" : "Returned" }}
+                    </v-chip>
+                    <span class="text-caption text-grey">{{ formatDate(entry.createdAt) }}</span>
+                  </div>
+
+                  <!-- Assignment entry -->
+                  <template v-if="entry.visitorId">
+                    <div class="text-body-2 font-weight-medium">{{ entry.name ?? "N/A" }}</div>
+                    <div class="text-caption text-grey-darken-1">
+                      <span v-if="entry.nric">NRIC: {{ entry.nric }}</span>
+                      <span v-if="entry.contact" class="ml-2">· {{ entry.contact }}</span>
+                    </div>
+                    <div class="text-caption text-grey-darken-1">
+                      <span v-if="entry.company">{{ entry.company }}</span>
+                      <span v-if="entry.plateNumber" class="ml-2">· {{ entry.plateNumber }}</span>
+                    </div>
+                  </template>
+
+                  <!-- Return/checkout entry -->
+                  <template v-else>
+                    <div class="d-flex align-center ga-2">
+                      <v-chip size="x-small" variant="flat" :color="statusColor(entry.status?.toLowerCase())">
+                        {{ entry.status ?? "N/A" }}
+                      </v-chip>
+                      <span v-if="entry.damage" class="text-caption text-error">Damaged</span>
+                    </div>
+                    <div v-if="entry.remarks" class="text-caption text-grey-darken-1">
+                      Remarks: {{ entry.remarks }}
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </template>
+          </template>
         </div>
       </v-card-text>
     </v-card>
@@ -131,6 +206,13 @@ const { getCardDetails } = useAccessManagement();
 
 const details = ref<Record<string, any> | null>(null);
 const pending = ref(false);
+const historyOpen = ref(false);
+
+const sortedHistory = computed(() =>
+  [...(details.value?.history ?? [])].sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+  )
+);
 
 watch(
   () => props.modelValue,
@@ -145,6 +227,7 @@ watch(
       }
     } else {
       details.value = null;
+      historyOpen.value = false;
     }
   }
 );
@@ -172,3 +255,16 @@ function formatDate(date: string) {
   }).format(new Date(date));
 }
 </script>
+
+<style scoped>
+.timeline-dot {
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
+}
+.timeline-line {
+  width: 2px;
+  flex-grow: 1;
+  min-height: 16px;
+}
+</style>

package/components/AccessCardPreviewDialog.vue

@@ -116,9 +116,9 @@
           <!-- Available Physical -->
           <v-col cols="12" class="mt-3">
             <strong>Available Physical</strong>
-            <div v-if="unit?.available?.physical?.length" class="mt-1">
+            <div v-if="availablePhysical.length" class="mt-1">
               <v-chip
-                v-for="card in unit.available.physical"
+                v-for="card in availablePhysical"
                 :key="card._id"
                 size="small"
                 class="mr-1 mb-1"
@@ -133,6 +133,26 @@
             <span v-else class="text-caption text-grey ml-1">None</span>
           </v-col>
 
+          <!-- Damage Physical -->
+          <v-col cols="12" class="mt-2">
+            <strong>Damage</strong>
+            <div v-if="damagedPhysical.length" class="mt-1">
+              <v-chip
+                v-for="card in damagedPhysical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                color="deep-orange"
+                :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
+                style="cursor: pointer"
+                @click="toggleCard(card)"
+              >
+                {{ card.cardNo }}
+              </v-chip>
+            </div>
+            <span v-else class="text-caption text-grey ml-1">None</span>
+          </v-col>
+
           <!-- Available Non-Physical -->
           <v-col cols="12" class="mt-2">
             <strong>Available Non-Physical</strong>
@@ -424,11 +444,19 @@ function showToast(message: string, color: "success" | "error") {
   snackbar.value = true;
 }
 
+const availablePhysical = computed(() =>
+  (props.unit?.available?.physical ?? []).filter((c: any) => !c.damage)
+);
+
+const damagedPhysical = computed(() =>
+  (props.unit?.available?.physical ?? []).filter((c: any) => c.damage === true)
+);
+
 const isSelectedCardAvailable = computed(() => {
   if (!props.selectedCardInUnit?._id) return false;
   const id = props.selectedCardInUnit._id;
   return [
-    ...(props.unit?.available?.physical ?? []),
+    ...availablePhysical.value,
     ...(props.unit?.available?.non_physical ?? []),
   ].some((c) => c._id === id);
 });

package/components/AccessManagement.vue

@@ -301,7 +301,16 @@ const loading = computed(() => getAllReqStatus.value === "pending");
 
 watchEffect(() => {
   if (getCardReq.value?.data) {
-    items.value = getCardReq.value.data.items;
+    items.value = getCardReq.value.data.items.map((item: any) => ({
+      ...item,
+      cardCounts: {
+        ...item.cardCounts,
+        available: {
+          ...item.cardCounts?.available,
+          physical: (item.available?.physical ?? []).filter((c: any) => !c.damage).length,
+        },
+      },
+    }));
     pages.value = getCardReq.value.data.pages;
     pageRange.value = getCardReq.value.data.pageRange;
   }

package/components/EntryPassInformation.vue

@@ -59,21 +59,39 @@
           No printer is configured in the settings. QR Pass may not print.
         </v-alert>
         <template v-else>
-          <div class="d-flex align-center justify-space-between mt-3">
-            <InputLabel title="Quantity" />
-            <span v-if="availableCount !== null" class="text-caption text-grey">
-              {{ availableCount }} available
-            </span>
-            <v-progress-circular v-else-if="cardsLoading" size="14" width="2" indeterminate color="grey" />
+          <!-- Generating / loading state -->
+          <div v-if="generating || cardsLoading" class="d-flex align-center ga-2 mt-3 text-caption text-grey-darken-1">
+            <v-progress-circular size="14" width="2" indeterminate color="grey" />
+            <span>{{ generating ? 'Generating QR passes...' : 'Checking availability...' }}</span>
           </div>
-          <v-text-field
-            v-model.number="quantity"
-            type="number"
-            density="comfortable"
-            :min="1"
-            :max="availableCount ?? undefined"
-            hide-details
-          />
+          <!-- 0 available after all loading -->
+          <v-alert
+            v-else-if="availableCount === 0"
+            type="warning"
+            variant="tonal"
+            density="compact"
+            class="mt-3"
+            icon="mdi-information-outline"
+          >
+            No QR passes available. Add at least 1 non-physical card to this unit in Access Management to enable auto-generation.
+          </v-alert>
+          <!-- Normal: quantity input -->
+          <template v-else>
+            <div class="d-flex align-center justify-space-between mt-3">
+              <InputLabel title="Quantity" />
+              <span v-if="availableCount !== null" class="text-caption text-grey">
+                {{ availableCount }} available
+              </span>
+            </div>
+            <v-text-field
+              v-model.number="quantity"
+              type="number"
+              density="comfortable"
+              :min="1"
+              :max="availableCount ?? undefined"
+              hide-details
+            />
+          </template>
         </template>
       </template>
 
@@ -83,7 +101,7 @@
           <InputLabel title="Select Cards" />
           <v-select
             v-model="selectedCards"
-            :items="cardItems"
+            :items="filteredCardItems"
             :loading="cardsLoading"
             item-title="cardNo"
             item-value="_id"
@@ -265,9 +283,13 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  excludedCardIds: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
 });
 
-const emit = defineEmits(["update:modelValue", "update:quantity", "update:cards"]);
+const emit = defineEmits(["update:modelValue", "update:quantity", "update:cards", "update:availableQrCount"]);
 
 const { getAvailableContractorCards, generateQrVms } = useAccessManagement();
 
@@ -309,12 +331,19 @@ function showSnackbar(text: string, color = "error") {
 
 // ─── Card fetching ────────────────────────────────────────────────
 const cardItems = ref<any[]>([]);
+const filteredCardItems = computed(() =>
+  props.excludedCardIds.length
+    ? cardItems.value.filter((c) => !props.excludedCardIds.includes(c._id))
+    : cardItems.value
+);
 const cardsLoading = ref(false);
+const generating = ref(false);
 const availableCount = ref<number | null>(null);
 
 async function fetchCards(type: "NFC" | "QRCODE" = "NFC") {
   if (!props.siteId || !props.unitId) return;
   cardsLoading.value = true;
+  if (type === "QRCODE") emit("update:availableQrCount", null);
   try {
     const res = await getAvailableContractorCards({
       type,
@@ -324,7 +353,9 @@ async function fetchCards(type: "NFC" | "QRCODE" = "NFC") {
     cardItems.value = res?.data?.[0]?.items ?? [];
     availableCount.value = (res?.data?.[2] as any)?.count ?? cardItems.value.length;
 
-    if (type === "QRCODE" && props.settings?.data?._id && availableCount.value !== null && availableCount.value < 50) {
+    if (type === "QRCODE" && props.settings?.data?._id && availableCount.value !== null && availableCount.value > 0 && availableCount.value < 50) {
+      cardsLoading.value = false;
+      generating.value = true;
       await generateQrVms({
         site: props.settings.data.site,
         unitId: props.unitId,
@@ -338,14 +369,20 @@ async function fetchCards(type: "NFC" | "QRCODE" = "NFC") {
       });
       cardItems.value = refreshed?.data?.[0]?.items ?? [];
       availableCount.value = (refreshed?.data?.[2] as any)?.count ?? cardItems.value.length;
+      generating.value = false;
     }
+
+    if (type === "QRCODE") emit("update:availableQrCount", availableCount.value);
   } catch (err: any) {
     const msg = err?.data?.message ?? err?.message ?? String(err);
     showSnackbar(`Entry pass service error: ${msg}`);
     availableCount.value = null;
     cardItems.value = [];
+    generating.value = false;
+    if (type === "QRCODE") emit("update:availableQrCount", null);
   } finally {
     cardsLoading.value = false;
+    generating.value = false;
   }
 }
 
@@ -500,6 +537,7 @@ watch(
       fetchCards("QRCODE");
     } else {
       availableCount.value = null;
+      emit("update:availableQrCount", null);
       isBarcodeScanningActive.value = false;
       barcodeBuffer.value = "";
       if (barcodeTimeout.value) clearTimeout(barcodeTimeout.value);

package/components/HidReaderForm.vue

@@ -17,18 +17,16 @@
           class="mb-3"
         />
 
-        <template v-if="mode === 'add'">
-          <div class="field-label">Base URL / IP address <span>*</span></div>
-          <v-text-field
-            v-model="draft.baseUrl"
-            aria-label="Base URL / IP address"
-            placeholder="http://192.168.x.x."
-            variant="outlined"
-            density="compact"
-            hide-details="auto"
-            class="mb-3"
-          />
-        </template>
+        <div class="field-label">Base URL / IP address <span>*</span></div>
+        <v-text-field
+          v-model="draft.baseUrl"
+          aria-label="Base URL / IP address"
+          placeholder="https://your domain URL"
+          variant="outlined"
+          density="compact"
+          hide-details="auto"
+          class="mb-3"
+        />
 
         <div class="field-label">Device ID <span>*</span></div>
         <v-text-field
@@ -175,10 +173,6 @@ function submit() {
     status: monitorEnabled.value ? "active" : "inactive",
   };
 
-  if (props.mode === "edit") {
-    delete payload.baseUrl;
-  }
-
   emit("submit", payload);
 }
 </script>

package/components/MemberInformation.vue

@@ -77,6 +77,22 @@
               </v-autocomplete>
             </v-col>
 
+            <v-col v-if="props.unitId" cols="12">
+              <EntryPassInformation
+                v-model="memberPassType"
+                v-model:quantity="memberPassQuantity"
+                v-model:cards="memberPassCards"
+                :settings="props.settings"
+                :loading="props.settingsLoading"
+                :site-id="props.site"
+                :unit-id="props.unitId"
+                :visitor-type="props.type"
+                :hid-qr-code-enabled="props.hidQrCodeEnabled"
+                :hid-qr-printer-configured="props.hidQrPrinterConfigured"
+                :excluded-card-ids="props.selectedNfcCards.map((c) => c._id)"
+              />
+            </v-col>
+
             <v-col cols="12">
               <InputLabel
                 class="text-capitalize"
@@ -164,6 +180,30 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  settings: {
+    type: Object as PropType<Record<string, any> | null>,
+    default: null,
+  },
+  settingsLoading: {
+    type: Boolean,
+    default: false,
+  },
+  unitId: {
+    type: String as PropType<string | null>,
+    default: null,
+  },
+  hidQrCodeEnabled: {
+    type: Boolean,
+    default: false,
+  },
+  hidQrPrinterConfigured: {
+    type: Boolean,
+    default: false,
+  },
+  selectedNfcCards: {
+    type: Array as PropType<{ _id: string; cardNo: string }[]>,
+    default: () => [],
+  },
 });
 
 const { requiredRule } = useUtils();
@@ -201,6 +241,9 @@ const dialog = reactive({
 });
 
 const selectedPass = ref<string>("");
+const memberPassType = ref<string | null>(null);
+const memberPassQuantity = ref<number | null>(1);
+const memberPassCards = ref<{ _id: string; cardNo: string }[]>([]);
 
 const members = defineModel<TMemberInfo[]>({ required: true, default: [] });
 const committedMembers = ref<TMemberInfo[]>([]);
@@ -303,12 +346,27 @@ watch(scannedPassValue, (newVal) => {
   showMessage("Scanned pass not available", "error");
 });
 
+function resetAccessCard() {
+  memberPassType.value = null;
+  memberPassQuantity.value = 1;
+  memberPassCards.value = [];
+}
+
 function handleClearForm() {
   formRef.value?.reset();
+  resetAccessCard();
 }
 
 async function handleAddMember() {
-  committedMembers.value.push({ ...memberForm });
+  committedMembers.value.push({
+    ...memberForm,
+    ...(memberPassType.value ? {
+      passType: memberPassType.value,
+      passQuantity: memberPassQuantity.value,
+      passCards: memberPassCards.value,
+    } : {}),
+  } as any);
+  resetAccessCard();
   handleClearForm();
 }
 

package/components/VisitorForm.vue

@@ -204,12 +204,17 @@
               v-model:cards="passCards" :settings="entryPassSettings"
               :loading="entryPassSettingsPending || siteDataPending" :site-id="prop.site"
               :unit-id="visitor.unit || null" :visitor-type="prop.type" :hid-qr-code-enabled="hidQrCodePassAllowed"
-              :hid-qr-printer-configured="hasHidQrPrinterConfig" />
+              :hid-qr-printer-configured="hasHidQrPrinterConfig"
+              @update:available-qr-count="(val) => availableQrCount = val" />
           </v-col>
 
           <v-col v-show="withStep3 && contractorStep === 3" cols="12">
             <MemberInformation v-model="visitor.members" :type="prop.type" :contractor-type="visitor.contractorType"
-              :site="prop.site" :selected-visitor-pass="visitor.visitorPass" :clearable="true" />
+              :site="prop.site" :selected-visitor-pass="visitor.visitorPass" :clearable="true"
+              :settings="entryPassSettings" :settings-loading="entryPassSettingsPending || siteDataPending"
+              :unit-id="visitor.unit || null"
+              :hid-qr-code-enabled="hidQrCodePassAllowed" :hid-qr-printer-configured="hasHidQrPrinterConfig"
+              :selected-nfc-cards="passType === 'NFC' ? passCards : []" />
           </v-col>
 
           <v-col v-if="prop.mode === 'add'" cols="12" class="mt-2">
@@ -394,6 +399,7 @@ const visitor = reactive<Partial<TVisitorPayload>>({
 const passType = ref<string | null>(null);
 const passQuantity = ref<number | null>(1);
 const passCards = ref<{ _id: string; cardNo: string }[]>([]);
+const availableQrCount = ref<number | null>(null);
 const hidQrPrintPayload = ref<string | null>(null);
 const hidQrPrinted = ref(false);
 
@@ -628,10 +634,10 @@ function selectNricSearchResult(item: Partial<TPeople>) {
   if (!visitor.company) {
     visitor.company = companyNames.value?.[0] || visitor.company;
   }
-  visitor.block = (item.block as any) ?? (visitor.block as any) ?? "";
-  visitor.level = (item.level as any) ?? (visitor.level as any) ?? "";
-  visitor.unit = item.unit ?? visitor.unit ?? "";
-  visitor.unitName = item.unitName ?? visitor.unitName;
+  // visitor.block = (item.block as any) ?? (visitor.block as any) ?? "";
+  // visitor.level = (item.level as any) ?? (visitor.level as any) ?? "";
+  // visitor.unit = item.unit ?? visitor.unit ?? "";
+  // visitor.unitName = item.unitName ?? visitor.unitName;
 
   setTimeout(() => {
     currentAutofillSource.value = null;
@@ -990,6 +996,16 @@ async function handleNextPage() {
     return;
   }
   const step = contractorStep.value;
+  if (step === 2 && passType.value === "QR") {
+    if (availableQrCount.value === null) {
+      errorMessage.value = "Please wait while QR passes are being generated...";
+      return;
+    }
+    if (availableQrCount.value === 0) {
+      errorMessage.value = "No QR passes available. Add a non-physical card to this unit in Access Management first.";
+      return;
+    }
+  }
   if (step === 2 && passType.value === "NFC" && passCards.value.length === 0) {
     errorMessage.value = "Please select at least one NFC card before proceeding.";
     return;