@7365admin1/layer-common 3.0.26 → 3.0.28

package/components/VisitorForm.vue

@@ -3,7 +3,7 @@
     <v-toolbar>
       <v-row no-gutters class="fill-height px-6 d-flex justify-space-between align-center" align="center">
         <span class="font-weight-bold text-h5 text-capitalize">
-          {{ prop.mode }} {{ formatVisitorType(type) }}
+          {{ formMode }} {{ formatVisitorType(type) }}
         </span>
         <ButtonClose @click="emit('close:all')" />
       </v-row>
@@ -204,15 +204,20 @@
               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">
+          <v-col v-if="formMode === 'add'" cols="12" class="mt-2">
             <v-checkbox v-model="createMore" density="comfortable" hide-details>
               <template #label>
                 <span class="text-subtitle-2 font-weight-bold">
@@ -234,11 +239,11 @@
       <v-row no-gutters>
         <v-col cols="6">
           <v-btn v-if="
-            prop.mode === 'add' &&
+            formMode === 'add' &&
             (withStep2 || withStep3) &&
             contractorStep > 1
           " tile block variant="text" class="text-none" size="48" @click="handleGoToPreviousPage" text="Back" />
-          <v-btn v-else-if="prop.mode === 'add' || prop.mode === 'register'" tile block variant="text" class="text-none"
+          <v-btn v-else-if="formMode === 'add' || formMode === 'register'" tile block variant="text" class="text-none"
             size="48" @click="backToSelection" text="Back to Selection" />
           <v-btn v-else tile block variant="text" class="text-none" size="48" @click="emit('close:all')" text="Close" />
         </v-col>
@@ -247,7 +252,7 @@
             :disabled="processing" @click="handleNextPage" :text="'Next'" />
           <v-btn v-else tile block variant="flat" color="black" class="text-none" size="48"
             :disabled="!validForm || processing || membersFieldIncomplete" @click="submit"
-            :text="prop.mode == 'add' ? 'Submit' : 'Update'" />
+            :text="formMode == 'add' ? 'Submit' : 'Update'" />
         </v-col>
       </v-row>
     </v-toolbar>
@@ -292,6 +297,82 @@
         </v-card-text>
       </v-card>
     </v-dialog>
+
+    <v-dialog
+      v-if="enableUnregistered"
+      v-model="dialog.showUnregisteredPlateDialog"
+      max-width="900"
+      persistent
+    >
+      <v-card color="background" class="pa-4">
+        <v-card-actions class="justify-end pa-0">
+          <v-btn
+            icon="mdi-close"
+            variant="text"
+            size="large"
+            @click="closeUnregisteredPlateDialog"
+          />
+        </v-card-actions>
+
+        <v-card-text class="text-center pt-2">
+          <v-icon color="orange" size="96">mdi-alert-circle-outline</v-icon>
+
+          <div :class="`text-body-${$vuetify.display.xs ? 'mobile' : 'tablet'} mt-8`">
+            Vehicle Number {{ unregisteredPlateSearchText }} is similar to below
+            <br />
+            Unregistered visitors last 24 hours. Please select to
+            <br />
+            Update
+          </div>
+
+          <v-table class="mt-8 border rounded">
+            <thead>
+              <tr>
+                <th class="text-left">Plate Number</th>
+                <th class="text-left">Check In</th>
+                <th class="text-center">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="match in unregisteredPlateMatches"
+                :key="match._id || match.plateNumber"
+              >
+                <td class="text-left font-weight-bold text-uppercase">
+                  {{ match.plateNumber || "N/A" }}
+                </td>
+                <td class="text-left">
+                  {{ formatUnregisteredCheckIn(match.checkIn) }}
+                </td>
+                <td class="text-center">
+                  <v-btn
+                    color="red"
+                    class="text-capitalize"
+                    density="compact"
+                    size="large"
+                    @click="selectUnregisteredPlateMatch(match)"
+                  >
+                    Update
+                  </v-btn>
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-btn
+            block
+            color="red"
+            variant="flat"
+            size="x-large"
+            @click="closeUnregisteredPlateDialog"
+          >
+            Cancel & Add New
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-card>
 </template>
 
@@ -348,6 +429,7 @@ const {
   typeFieldMap,
   contractorTypes,
   getVisitors,
+  checkSearchUncheckedOutUnregisteredVisitor,
   updateVisitor,
 } = useVisitor();
 const { getBySiteId: getEntryPassSettingsBySiteId } =
@@ -394,6 +476,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);
 
@@ -402,10 +485,12 @@ const registeredUnitCompanyName = ref("N/A");
 const dialog = reactive({
   vehicleNumberUsersList: false,
   showNonCheckedOutDialog: false,
+  showUnregisteredPlateDialog: false,
 });
 
 const loading = reactive({
   checkingOut: false,
+  checkingUnregisteredPlate: false,
 });
 
 const validForm = ref(false);
@@ -431,9 +516,18 @@ const deliveryCompanyInput = ref("");
 const deliveryCompanyList = ref<string[]>([]);
 
 const matchingPlateNumberNonCheckedOutArr = ref<TVisitor[]>([]);
+const unregisteredPlateMatches = ref<TVisitor[]>([]);
+const unregisteredPlateSearchText = ref("");
+const selectedUnregisteredVisitor = ref<TVisitor | null>(null);
+const skipUnregisteredPlateCheck = ref(false);
+const pendingUnregisteredAction = ref<"next" | "submit" | null>(null);
 
 const vehicleNumberUserItems = ref<TPeople[]>([]);
 
+const formMode = computed<"add" | "edit" | "register">(() => {
+  return selectedUnregisteredVisitor.value ? "register" : prop.mode;
+});
+
 const shouldShowField = (
   fieldKey: keyof TVisitorPayload | "delivery-company"
 ) => {
@@ -461,6 +555,10 @@ const showNextButton = computed(() => {
   } else return false;
 });
 
+const enableUnregistered = computed(() => {
+  return prop.mode === "add" && shouldShowField("plateNumber");
+});
+
 const showShowKeysField = computed(() => {
   return ["guest", "contractor", "walk-in"].includes(prop.type);
 });
@@ -628,10 +726,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;
@@ -690,12 +788,16 @@ const debounceSearchVisitorsByPlateNumbers = debounce(() => {
   fetchVisitorListByVehicleNumberRefresh();
 }, 300);
 
-watch(
-  () => visitor.plateNumber,
-  (newVal) => {
-    debounceSearchVisitorsByPlateNumbers();
-  }
-);
+// watch(
+//   () => visitor.plateNumber,
+//   (newVal) => {
+//     skipUnregisteredPlateCheck.value = false;
+//     selectedUnregisteredVisitor.value = null;
+//     unregisteredPlateMatches.value = [];
+//     dialog.showUnregisteredPlateDialog = false;
+//     debounceSearchVisitorsByPlateNumbers();
+//   }
+// );
 
 async function handleCheckout(visitorId: string) {
   if (!visitorId) {
@@ -982,6 +1084,95 @@ function formatVisitorType(type: TVisitorType): string {
   }
 }
 
+async function checkUnregisteredPlateBeforeContinue(action: "next" | "submit") {
+  if (
+    !enableUnregistered.value ||
+    skipUnregisteredPlateCheck.value ||
+    selectedUnregisteredVisitor.value ||
+    !visitor.plateNumber
+  ) {
+    return true;
+  }
+
+  try {
+    loading.checkingUnregisteredPlate = true;
+    unregisteredPlateSearchText.value = visitor.plateNumber;
+    const res = await checkSearchUncheckedOutUnregisteredVisitor({
+      site: prop.site,
+      plateNumber: visitor.plateNumber,
+      hourAgo: 24,
+      page: 1,
+      limit: 100,
+    });
+    const items = Array.isArray(res?.items)
+      ? res.items
+      : Array.isArray(res?.data?.items)
+        ? res.data.items
+        : Array.isArray(res?.data)
+          ? res.data
+          : Array.isArray(res)
+            ? res
+            : [];
+
+    unregisteredPlateMatches.value = items;
+    if (items.length === 0) return true;
+
+    pendingUnregisteredAction.value = action;
+    dialog.showUnregisteredPlateDialog = true;
+    return false;
+  } catch (error: any) {
+    errorMessage.value =
+      error?.data?.message ||
+      error?.response?._data?.message ||
+      "Unable to check unregistered visitors. Please try again.";
+    return false;
+  } finally {
+    loading.checkingUnregisteredPlate = false;
+  }
+}
+
+function formatUnregisteredCheckIn(checkIn?: string) {
+  return checkIn ? UTCToLocalTIme(checkIn) : "N/A";
+}
+
+async function continuePendingUnregisteredAction() {
+  const action = pendingUnregisteredAction.value;
+  pendingUnregisteredAction.value = null;
+  if (action === "next") {
+    await handleNextPage();
+  } else if (action === "submit") {
+    await submit();
+  }
+}
+
+async function closeUnregisteredPlateDialog() {
+  dialog.showUnregisteredPlateDialog = false;
+  unregisteredPlateMatches.value = [];
+  skipUnregisteredPlateCheck.value = true;
+}
+
+async function selectUnregisteredPlateMatch(match: TVisitor) {
+  selectedUnregisteredVisitor.value = match;
+  skipUnregisteredPlateCheck.value = true;
+  dialog.showUnregisteredPlateDialog = false;
+  unregisteredPlateMatches.value = [];
+
+  visitor.plateNumber = match.plateNumber;
+  visitor.attachments = match.attachments || visitor.attachments;
+  visitor.block = match.block || visitor.block;
+  visitor.level = match.level || visitor.level;
+  visitor.unit = match.unit || visitor.unit;
+  visitor.company = match.company || visitor.company;
+  visitor.contractorType = match.contractorType || visitor.contractorType;
+  visitor.name = match.name || visitor.name;
+  visitor.contact = match.contact || visitor.contact;
+  visitor.nric = match.nric || visitor.nric;
+  visitor.company = match.company || visitor.company;
+  visitor.remarks = match.remarks || visitor.remarks;
+
+  pendingUnregisteredAction.value = null;
+}
+
 async function handleNextPage() {
   errorMessage.value = "";
   formRef.value!.validate();
@@ -990,10 +1181,21 @@ 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;
   }
+  if (!(await checkUnregisteredPlateBeforeContinue("next"))) return;
   if (step < 3) contractorStep.value++;
   else await submit();
 }
@@ -1007,6 +1209,7 @@ async function submit() {
   }
 
   if (passType.value === "HID_QR" && !validateHidQrPrinterConfig()) return;
+  if (!(await checkUnregisteredPlateBeforeContinue("submit"))) return;
 
   processing.value = true;
 
@@ -1017,7 +1220,7 @@ async function submit() {
     createdBy: prop.currentUser,
   };
 
-  if (prop.mode === "add" || prop.mode === "register") {
+  if (formMode.value === "add" || formMode.value === "register") {
     const allowedFields = typeFieldMap[prop.type];
     for (const key of allowedFields as (keyof TVisitorPayload)[]) {
       if (visitor[key] !== undefined) {
@@ -1055,7 +1258,7 @@ async function submit() {
   }
 
   // add register status when registering unregistered visitor
-  if (prop.mode === "register") {
+  if (formMode.value === "register") {
     payload.status = "registered";
     const currentUserId = currentUser.value?._id;
     if(currentUserId) {
@@ -1065,7 +1268,18 @@ async function submit() {
 
   try {
     let res;
-    if (prop.mode === "add") {
+    if (prop.mode === "add" && selectedUnregisteredVisitor.value?._id) {
+      payload.status = "registered";
+      const currentUserId = currentUser.value?._id;
+      if (currentUserId) {
+        payload.updatedBy = currentUserId;
+      }
+      const { unitName, ...rest } = payload;
+      res = await updateVisitor(
+        selectedUnregisteredVisitor.value._id,
+        rest as TVisitorPayload
+      );
+    } else if (formMode.value === "add") {
       res = await createVisitor(payload as TVisitorPayload);
     } else if (
       (prop.mode === "edit" || prop.mode === "register") &&
@@ -1208,7 +1422,7 @@ async function submit() {
     const err = error?.data?.message;
     errorMessage.value =
       err ||
-      `Failed to ${prop.mode === "add" ? "add" : "update"
+      `Failed to ${formMode.value === "add" ? "add" : "update"
       } visitor. Please try again.`;
   } finally {
     processing.value = false;
@@ -1352,7 +1566,22 @@ async function printHidQrCodePass(visitorId = "", manageProcessing = true) {
 watch(
   () => visitor.plateNumber,
   (newVal) => {
-    visitor.plateNumber = newVal?.toUpperCase();
+    const normalizedPlateNumber = newVal?.toUpperCase();
+    if (newVal !== normalizedPlateNumber) {
+      visitor.plateNumber = normalizedPlateNumber;
+      return;
+    }
+
+    if (
+      selectedUnregisteredVisitor.value &&
+      normalizedPlateNumber !== selectedUnregisteredVisitor.value.plateNumber?.toUpperCase()
+    ) {
+      selectedUnregisteredVisitor.value = null;
+    }
+
+    skipUnregisteredPlateCheck.value = false;
+    unregisteredPlateMatches.value = [];
+    dialog.showUnregisteredPlateDialog = false;
   }
 );