@7365admin1/layer-common 3.0.28 → 3.0.29

package/components/VisitorForm.vue

@@ -264,36 +264,90 @@
         @update:people="handleAutofillDataViaVehicleNumber" />
     </v-dialog>
 
-    <v-dialog v-model="dialog.showNonCheckedOutDialog" max-width="700" persistent>
-      <v-card :loading="loading.checkingOut">
-        <v-toolbar>
-          <v-toolbar-title>
-            <v-row no-gutters class="d-flex align-center justify-space-between">
-              <span class="font-weight-bold">
-                You have an unchecked-out vehicle for: {{ visitor.plateNumber }}
-              </span>
-            </v-row>
-          </v-toolbar-title>
-        </v-toolbar>
-
-        <v-card-text>
-          <v-list lines="three">
-            <v-list-item v-if="matchingPlateNumberNonCheckedOutArr.length > 0"
-              v-for="v in matchingPlateNumberNonCheckedOutArr" :key="v._id" class="cursor-pointer">
-              <v-list-item-title>
-                {{ v.plateNumber }} - {{ v.name }}
-              </v-list-item-title>
-
-              <v-list-item-subtitle>
-                Checked In at : {{ UTCToLocalTIme(v.checkIn) }}
-              </v-list-item-subtitle>
-
-              <template #append>
-                <v-btn size="x-small" class="text-capitalize" color="red" text="Checkout" :loading="loading.checkingOut && v?._id === prop.visitorData?._id
-                  " @click.stop="handleCheckout(v._id)" />
-              </template>
-            </v-list-item>
-          </v-list>
+    <v-dialog v-model="dialog.showNonCheckedOutDialog" max-width="1200">
+      <v-card :loading="loading.checkingOut || loading.searchingNonCheckedOut">
+        <v-card-actions class="justify-end bg-grey-lighten-3 pa-4">
+          <v-btn icon="mdi-close" variant="text" size="large" @click="dialog.showNonCheckedOutDialog = false" />
+        </v-card-actions>
+
+        <v-card-text class="pa-6">
+          <p class="text-subtitle-1 font-weight-medium mb-8">
+            The following list needs to check-out before proceeding to add related to the NRIC/Phone Number below:
+          </p>
+
+          <div class="text-subtitle-1 mb-8">
+            <div>NRIC: {{ visitor.nric || "N/A" }}</div>
+            <div>Phone Number: {{ visitor.contact || "N/A" }}</div>
+          </div>
+
+          <v-data-table
+            class="border rounded"
+            :headers="nonCheckedOutVisitorHeaders"
+            :items="matchingNonCheckedOutVisitors"
+            item-value="_id"
+            :items-per-page="5"
+            hide-default-footer
+          >
+            <template #item.name="{ item }">
+              <div class="d-flex align-center ga-3">
+                <v-avatar color="red" size="32">
+                  <span class="text-white text-subtitle-2">{{ getVisitorInitial(item.name) }}</span>
+                </v-avatar>
+                <div>
+                  <div class="font-weight-medium">{{ item.name || "N/A" }}</div>
+                  <div class="text-caption">
+                    <v-icon icon="mdi-card-account-details-outline" size="16" class="mr-1" />
+                    {{ maskNRIC(item.nric) || "N/A" }}
+                  </div>
+                </div>
+              </div>
+            </template>
+
+            <template #item.typeCompany="{ item }">
+              <div>
+                <v-icon icon="mdi-account" size="18" class="mr-2" />
+                {{ formatVisitorType(item.type) }}
+              </div>
+              <div>
+                <v-icon icon="mdi-office-building" size="18" class="mr-2" />
+                {{ item.company || "N/A" }}
+              </div>
+            </template>
+
+            <template #item.location="{ item }">
+              <v-icon icon="mdi-calendar-range" size="18" class="mr-2" />
+              {{ formatVisitorLocation(item) }}
+            </template>
+
+            <template #item.contactVehicle="{ item }">
+              <div>
+                <v-icon icon="mdi-phone" size="18" class="mr-2" />
+                {{ item.contact || "N/A" }}
+              </div>
+              <div>
+                <v-icon icon="mdi-car" size="18" class="mr-2" />
+                {{ item.plateNumber || "N/A" }}
+              </div>
+            </template>
+
+            <template #item.checkInOut="{ item }">
+              <div class="py-2">
+                <div class="mb-2">
+                  <v-icon icon="mdi-clock-check-outline" color="green" size="20" class="mr-1" />
+                  {{ formatNonCheckedOutDate(item.checkIn) }}
+                </div>
+                <v-btn size="small" class="text-none" color="red" variant="flat" :loading="loading.checkingOut && selectedCheckoutVisitorId === item._id" :disabled="!item._id" @click.stop="item._id && handleCheckout(item._id)">
+                  Check Out
+                </v-btn>
+              </div>
+            </template>
+          </v-data-table>
+
+          <div class="d-flex justify-end mt-8">
+            <v-btn color="red" variant="flat" size="large" class="text-none px-10" :loading="loading.searchingNonCheckedOut" @click="handleSkipNricNonCheckedOut">
+              Skip NRIC: {{ visitor.nric || "N/A" }}
+            </v-btn>
+          </div>
         </v-card-text>
       </v-card>
     </v-dialog>
@@ -414,12 +468,16 @@ const prop = defineProps({
     type: String,
     default: "",
   },
+  enableUnregistered: {
+    type: Boolean,
+    default: false,
+  }
 });
 
 type AutofillSource = "nric" | "contact" | "vehicleNumber" | null;
 const currentAutofillSource = ref<AutofillSource>(null);
 
-const { requiredRule, debounce, UTCToLocalTIme } = useUtils();
+const { requiredRule, debounce, UTCToLocalTIme, maskNRIC } = useUtils();
 const { getSiteById } = useSiteSettings();
 const { currentUser } = useLocalAuth();
 const { getBlocksSelection, getLevelsSelection, getUnitSelection } =
@@ -428,8 +486,8 @@ const {
   createVisitor,
   typeFieldMap,
   contractorTypes,
-  getVisitors,
   checkSearchUncheckedOutUnregisteredVisitor,
+  searchVisitorObject,
   updateVisitor,
 } = useVisitor();
 const { getBySiteId: getEntryPassSettingsBySiteId } =
@@ -491,6 +549,7 @@ const dialog = reactive({
 const loading = reactive({
   checkingOut: false,
   checkingUnregisteredPlate: false,
+  searchingNonCheckedOut: false,
 });
 
 const validForm = ref(false);
@@ -515,7 +574,16 @@ const deliveryCompany = ref("");
 const deliveryCompanyInput = ref("");
 const deliveryCompanyList = ref<string[]>([]);
 
-const matchingPlateNumberNonCheckedOutArr = ref<TVisitor[]>([]);
+const matchingNonCheckedOutVisitors = ref<TVisitor[]>([]);
+const selectedCheckoutVisitorId = ref<string | null>(null);
+const skipNonCheckedOutNric = ref(false);
+const nonCheckedOutVisitorHeaders = [
+  { title: "Name/NRIC", key: "name", align: "start", sortable: false },
+  { title: "Type / Company", key: "typeCompany", align: "start", sortable: false },
+  { title: "Location", key: "location", align: "start", sortable: false },
+  { title: "Contact / Vehicle No.", key: "contactVehicle", align: "start", sortable: false },
+  { title: "Check In / Out", key: "checkInOut", align: "start", sortable: false, width: "200px" },
+] as const;
 const unregisteredPlateMatches = ref<TVisitor[]>([]);
 const unregisteredPlateSearchText = ref("");
 const selectedUnregisteredVisitor = ref<TVisitor | null>(null);
@@ -556,7 +624,7 @@ const showNextButton = computed(() => {
 });
 
 const enableUnregistered = computed(() => {
-  return prop.mode === "add" && shouldShowField("plateNumber");
+  return prop.mode === "add" && prop.enableUnregistered
 });
 
 const showShowKeysField = computed(() => {
@@ -705,6 +773,7 @@ watch(fetchPersonByNRICReq, (obj) => {
 watch(
   () => visitor.nric,
   (value) => {
+    skipNonCheckedOutNric.value = false;
     if (!value || value.length < 4) {
       nricSearchMenu.value = false;
       nricSearchResults.value = [];
@@ -712,6 +781,13 @@ watch(
   }
 );
 
+watch(
+  () => visitor.contact,
+  () => {
+    skipNonCheckedOutNric.value = false;
+  }
+);
+
 function selectNricSearchResult(item: Partial<TPeople>) {
   nricSearchMenu.value = false;
   nricSearchResults.value = [];
@@ -752,52 +828,89 @@ watch(fetchCompanyListReq, (arr) => {
     companyNames.value = arr?.flatMap((x) => x?.companyName);
   }
 });
-const {
-  data: fetchVisitorListByVehicleNumberReq,
-  refresh: fetchVisitorListByVehicleNumberRefresh,
-  pending: fetchVisitorListByVehicleNumberPending,
-} = useLazyAsyncData(`fetch-visitor-list-by-vehicle-number`, () => {
-  if (!visitor.plateNumber) return Promise.resolve(null);
-  return getVisitors({
-    page: 1,
-    limit: 20,
-    site: prop.site,
-    plateNumber: visitor.plateNumber,
-    checkedOut: false,
-    status: "registered",
-  });
-});
+function getVisitorSearchItems(res: any): TVisitor[] {
+  const items =
+    res?.items ||
+    res?.data?.items ||
+    res?.data?.result?.items ||
+    res?.result?.items ||
+    [];
+  return Array.isArray(items) ? items : [];
+}
 
-watch(fetchVisitorListByVehicleNumberReq, (arr: any) => {
-  const itemsArray = arr?.items || [];
-  const isValidArray = Array.isArray(itemsArray);
-  matchingPlateNumberNonCheckedOutArr.value = isValidArray ? itemsArray : [];
-  if (matchingPlateNumberNonCheckedOutArr.value.length > 0) {
-    dialog.showNonCheckedOutDialog = true;
-  } else {
-    dialog.showNonCheckedOutDialog = false;
+function getVisitorInitial(name?: string | null) {
+  return name?.trim()?.charAt(0)?.toUpperCase() || "?";
+}
+
+function formatLocationPart(value: unknown) {
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "object" && "name" in value) {
+    return String((value as { name?: string }).name || "");
   }
-});
+  return "";
+}
+
+function formatVisitorLocation(v: TVisitor) {
+  return [
+    formatLocationPart(v.block),
+    formatLocationPart(v.level),
+    v.unitName || formatLocationPart(v.unit),
+  ].filter(Boolean).join(" / ") || "N/A";
+}
+
+function formatNonCheckedOutDate(date?: string) {
+  return date ? UTCToLocalTIme(date) : "N/A";
+}
+
+async function checkNonCheckedOutVisitorsBeforeSubmit(
+  options: { skipNric?: boolean; showDialog?: boolean } = {}
+) {
+  const { skipNric = skipNonCheckedOutNric.value, showDialog = true } = options;
+  const nric = skipNric ? null : visitor.nric || null;
+  const contact = visitor.contact || null;
 
-const debounceSearchVisitorsByPlateNumbers = debounce(() => {
-  if (!visitor.plateNumber) {
-    matchingPlateNumberNonCheckedOutArr.value = [];
+  if (!nric && !contact) {
+    matchingNonCheckedOutVisitors.value = [];
     dialog.showNonCheckedOutDialog = false;
-    return;
+    return true;
+  }
+
+  try {
+    loading.searchingNonCheckedOut = true;
+    const res = await searchVisitorObject({
+      page: 1,
+      limit: 1000,
+      site: prop.site,
+      searchObject: {
+        nric,
+        contact,
+      },
+      notCheckedOut: true,
+    });
+    const items = getVisitorSearchItems(res);
+    matchingNonCheckedOutVisitors.value = items;
+    dialog.showNonCheckedOutDialog = showDialog && items.length > 0;
+    return items.length === 0;
+  } catch (error: any) {
+    errorMessage.value =
+      error?.data?.message ||
+      error?.response?._data?.message ||
+      "Unable to check unchecked-out visitors. Please try again.";
+    return false;
+  } finally {
+    loading.searchingNonCheckedOut = false;
   }
-  fetchVisitorListByVehicleNumberRefresh();
-}, 300);
-
-// watch(
-//   () => visitor.plateNumber,
-//   (newVal) => {
-//     skipUnregisteredPlateCheck.value = false;
-//     selectedUnregisteredVisitor.value = null;
-//     unregisteredPlateMatches.value = [];
-//     dialog.showUnregisteredPlateDialog = false;
-//     debounceSearchVisitorsByPlateNumbers();
-//   }
-// );
+}
+
+async function handleSkipNricNonCheckedOut() {
+  const canSubmit = await checkNonCheckedOutVisitorsBeforeSubmit({
+    skipNric: true,
+  });
+  if (!canSubmit) return;
+  skipNonCheckedOutNric.value = true;
+  dialog.showNonCheckedOutDialog = false;
+}
 
 async function handleCheckout(visitorId: string) {
   if (!visitorId) {
@@ -807,19 +920,21 @@ async function handleCheckout(visitorId: string) {
 
   try {
     loading.checkingOut = true;
+    selectedCheckoutVisitorId.value = visitorId;
     const res = await updateVisitor(visitorId as string, {
       checkOut: new Date().toISOString(),
     });
     if (res) {
-      await fetchVisitorListByVehicleNumberRefresh();
+      await checkNonCheckedOutVisitorsBeforeSubmit();
     }
   } catch (error: any) {
-    const errorMessage = error?.response?._data?.message;
+    const checkoutErrorMessage = error?.response?._data?.message;
     console.log("[ERROR]", error);
     errorMessage.value =
-      errorMessage || "An error occurred while checking out the vehicle.";
+      checkoutErrorMessage || "An error occurred while checking out the vehicle.";
   } finally {
     loading.checkingOut = false;
+    selectedCheckoutVisitorId.value = null;
   }
 }
 
@@ -1200,7 +1315,7 @@ async function handleNextPage() {
   else await submit();
 }
 
-async function submit() {
+async function submit(options: { skipNonCheckedOutCheck?: boolean } = {}) {
   formRef.value!.validate();
   errorMessage.value = "";
   if (!validForm.value) {
@@ -1209,6 +1324,13 @@ async function submit() {
   }
 
   if (passType.value === "HID_QR" && !validateHidQrPrinterConfig()) return;
+  if (
+    prop.mode === "add" &&
+    !options.skipNonCheckedOutCheck &&
+    !(await checkNonCheckedOutVisitorsBeforeSubmit())
+  ) {
+    return;
+  }
   if (!(await checkUnregisteredPlateBeforeContinue("submit"))) return;
 
   processing.value = true;

package/components/VisitorManagement.vue

@@ -579,6 +579,7 @@
         :visitor-data="selectedVisitorDataObject"
         :current-user="currentUser._id"
         :type="activeVisitorFormType"
+        :enable-unregistered="enableUnregistered"
         @back="handleClickBack"
         @done="handleVisitorFormDone"
         @done:more="handleVisitorFormCreateMore"
@@ -1824,7 +1825,7 @@ const nfcCardReturnStatuses = ref<
 const canConfirmCheckout = computed(() => {
   const allEntries = [...passReturnStatuses.value, ...keyReturnStatuses.value];
   return allEntries.every((entry) => {
-    if (!entry.status || entry.status === "In Use") return false;
+    if (!entry.status || ["In Use","Not Returned"].includes(entry.status)) return false;
     if (
       (entry.status === "Lost" || entry.status === "Damaged") &&
       !entry.remarks.trim()
@@ -2190,29 +2191,60 @@ watch([searchInput, dateFrom, dateTo, filterTypes, activeTab], () => {
   page.value = 1;
 });
 
-onMounted(() => {
+const syncVisitorFiltersFromRoute = () => {
   const requestedTab = (route.query.tab as string) || "registered";
-  activeTab.value = enableUnregisteredTab.value
+  const nextTab = enableUnregisteredTab.value
     ? requestedTab
     : requestedTab === "unregistered"
     ? "registered"
     : requestedTab;
-  searchInput.value = (route.query.search as string) || "";
+
+  if (activeTab.value !== nextTab) {
+    activeTab.value = nextTab;
+  }
+
+  const nextSearch = (route.query.search as string) || "";
+  if (searchInput.value !== nextSearch) {
+    searchInput.value = nextSearch;
+  }
+
   if (route.query.dateFrom) {
-    dateFrom.value = normalizeDateOnly(route.query.dateFrom as string);
+    const nextDateFrom = normalizeDateOnly(route.query.dateFrom as string);
+    if (dateFrom.value !== nextDateFrom) {
+      dateFrom.value = nextDateFrom;
+    }
   }
+
   if (route.query.dateTo) {
-    dateTo.value = normalizeDateOnly(route.query.dateTo as string);
+    const nextDateTo = normalizeDateOnly(route.query.dateTo as string);
+    if (dateTo.value !== nextDateTo) {
+      dateTo.value = nextDateTo;
+    }
   }
+
   if (activeTab.value === "registered") {
-    filterTypes.value = ((route.query.type as string)?.split(",") || []).filter(
-      Boolean
-    ) as TVisitorType[];
+    const nextFilterTypes = (
+      (route.query.type as string)?.split(",") || []
+    ).filter(Boolean) as TVisitorType[];
+    if (filterTypes.value.join(",") !== nextFilterTypes.join(",")) {
+      filterTypes.value = nextFilterTypes;
+    }
 
-    displayNotCheckedOut.value =
+    const nextDisplayNotCheckedOut =
       (route.query.checkedOut as string) == "true" || false;
+    if (displayNotCheckedOut.value !== nextDisplayNotCheckedOut) {
+      displayNotCheckedOut.value = nextDisplayNotCheckedOut;
+    }
   }
-});
+};
+
+onMounted(syncVisitorFiltersFromRoute);
+
+watch(
+  () => route.query,
+  syncVisitorFiltersFromRoute,
+  { deep: true }
+);
 
 const { socketUnregisteredVisitorTrigger, visitorSocketData } =
   useVisitorSocket();

package/composables/useAccessManagement.ts

@@ -314,7 +314,7 @@ export default function useAccessManagement() {
     );
   }
 
-  function assignUser(payload: { assignees: string[]; unit: string; type: string; acm_url: string }) {
+  function assignUser(payload: { assignees: string[]; unit: string; type: string; acm_url: string; id?: string }) {
     return useNuxtApp().$api<Record<string, any>>(
       `/api/access-management/assign-user`,
       { method: "POST", body: payload }

package/composables/useVisitor.ts

@@ -102,6 +102,17 @@ export default function () {
     limit?: number;
   };
 
+  type SearchVisitorObjectParams = {
+    page?: number;
+    limit?: number;
+    site: string;
+    searchObject: {
+      nric?: string | null;
+      contact?: string | null;
+    };
+    notCheckedOut?: boolean;
+  };
+
   const tab = useState("visitorsTab", () => "visitor");
 
   async function getVisitors({
@@ -187,6 +198,28 @@ export default function () {
     });
   }
 
+  async function searchVisitorObject({
+    page = 1,
+    limit = 1000,
+    site,
+    searchObject,
+    notCheckedOut = true,
+  }: SearchVisitorObjectParams) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      "/api/visitors/search-object",
+      {
+        method: "POST",
+        body: {
+          page,
+          limit,
+          site,
+          searchObject,
+          notCheckedOut,
+        },
+      }
+    );
+  }
+
   async function deleteVisitor(_id: string) {
     return await useNuxtApp().$api<Record<string, any>>(
       `/api/visitor-transactions/id/${_id}`,
@@ -227,6 +260,7 @@ export default function () {
     createVisitor,
     getVisitors,
     checkSearchUncheckedOutUnregisteredVisitor,
+    searchVisitorObject,
     updateVisitor,
     deleteVisitor,
     validateVisitorQrCode,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.0.28",
+  "version": "3.0.29",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {