@7365admin1/layer-common 1.10.6 → 1.10.8

package/components/VisitorForm.vue

@@ -12,7 +12,7 @@
       <div class="w-100 d-flex justify-space-between ga-2">
         <span class="text-subtitle-1 w-100 font-weight-bold mb-3">{{
           formTitle
-          }}</span>
+        }}</span>
         <span v-if="prop.type === 'contractor'" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
           <span class="text-primary-button">{{ contractorStep }}</span>/3</span>
       </div>
@@ -30,7 +30,7 @@
                   <v-list-item-title @click.stop="handleAddNewContractorType" class="d-flex align-center ga-1">
                     <span><v-icon icon="mdi-plus" /></span> Add "<strong>{{
                       contractorTypeInput
-                      }}</strong>" as custom contractor type.
+                    }}</strong>" as custom contractor type.
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -54,8 +54,9 @@
           <v-col v-if="shouldShowField('nric')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="NRIC" required />
-                <InputNRICNumber v-model="visitor.nric" density="comfortable" :rules="[requiredRule]"
+                <InputLabel class="text-capitalize" title="NRIC" :required="requireNRIC" />
+                <InputNRICNumber v-model="visitor.nric" density="comfortable"
+                  :rules="[requireNRIC ? requiredRule : () => true]" :key="currentAutofillSource + 'nric-key'"
                   @update:model-value="handleUpdateNRIC" :loading="fetchPersonByNRICPending" />
               </v-col>
             </v-row>
@@ -63,8 +64,9 @@
 
           <v-col v-if="shouldShowField('contact')" cols="12">
             <InputLabel class="text-capitalize" title="Phone Number" required />
-            <InputPhoneNumberV2 v-model="visitor.contact" :rules="[requiredRule]" density="comfortable" :key="currentAutofillSource + 'phone-key'"
-              :loading="fetchPersonByContactPending" @update:model-value="handleUpdateContact" />
+            <InputPhoneNumberV2 v-model="visitor.contact" :rules="[requiredRule]" density="comfortable"
+              :key="currentAutofillSource + 'phone-key'" :loading="fetchPersonByContactPending"
+              @update:model-value="handleUpdateContact" />
           </v-col>
 
           <v-col v-if="shouldShowField('deliveryType')" cols="12">
@@ -132,6 +134,7 @@
               :loading="levelsStatus === 'pending'" @update:model-value="handleChangeLevel" :rules="[requiredRule]" />
           </v-col>
 
+
           <v-col v-if="shouldShowField('unit')" cols="12">
             <InputLabel class="text-capitalize" title="Unit" required />
             <v-select v-model="visitor.unit" :items="unitsArray" density="comfortable" item-title="title"
@@ -139,6 +142,11 @@
               @update:model-value="handleUpdateUnit" />
           </v-col>
 
+          <v-col v-if="shouldShowField('unit')" cols="12">
+            <InputLabel class="text-capitalize" title="Registered Unit Company Name" required />
+            <v-text-field v-model.trim="registeredUnitCompanyName" density="comfortable" :loading="buildingUnitDataPending" readonly class="no-pointer" />
+          </v-col>
+
           <v-col v-if="shouldShowField('remarks')" cols="12">
             <InputLabel class="text-capitalize" title="Remarks" />
             <v-textarea v-model="visitor.remarks" density="comfortable" :rows="3" no-resize />
@@ -146,6 +154,10 @@
 
           <v-col v-if="prop.type === 'contractor' && contractorStep === 2" cols="12">
             <PassInformation />
+            <EntryPassInformation v-if="entryPassSettings?.data?.settings?.nfcPass" v-model="passType"
+              v-model:quantity="passQuantity" v-model:cards="passCards" :settings="entryPassSettings"
+              :loading="entryPassSettingsPending" @scan:barcode="$emit('scan:barcode')"
+              @scan:camera="$emit('scan:camera')" />
           </v-col>
 
           <v-col v-if="prop.type === 'contractor' && contractorStep === 3" cols="12">
@@ -178,9 +190,9 @@
             prop.type === 'contractor' &&
             contractorStep > 1
           " tile block variant="text" class="text-none" size="48" @click="handleGoToPreviousPage" text="Back" />
-          <v-btn v-else-if="prop.mode === 'add'" tile block variant="text" class="text-none" size="48"
+          <v-btn v-else-if="prop.mode === 'add' || prop.mode === '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="close" text="Close" />
+          <v-btn v-else tile block variant="text" class="text-none" size="48" @click="emit('close:all')" text="Close" />
         </v-col>
         <v-col cols="6">
           <v-btn v-if="prop.type === 'contractor'" tile block variant="flat" color="primary-button" class="text-none"
@@ -191,14 +203,18 @@
       </v-row>
     </v-toolbar>
 
-    <v-dialog v-model="dialog.vehicleNumberUsersList" v-if="vehicleNumberUserItems.length > 0" persistent max-width="600">
-      <SearchVehicleNumberUser :vehicle-number="visitor.plateNumber ?? ''" :vehicle-number-users-list="vehicleNumberUserItems"
-        @close="dialog.vehicleNumberUsersList = false" @update:people="handleAutofillDataViaVehicleNumber" />
+    <v-dialog v-model="dialog.vehicleNumberUsersList" v-if="vehicleNumberUserItems.length > 0" persistent
+      max-width="600">
+      <SearchVehicleNumberUser :vehicle-number="visitor.plateNumber ?? ''"
+        :vehicle-number-users-list="vehicleNumberUserItems" @close="dialog.vehicleNumberUsersList = false"
+        @update:people="handleAutofillDataViaVehicleNumber" />
     </v-dialog>
   </v-card>
 </template>
 
 <script setup lang="ts">
+import useBuildingUnit from '../composables/useBuildingUnit';
+
 
 const prop = defineProps({
   type: {
@@ -214,7 +230,7 @@ const prop = defineProps({
     required: true,
   },
   mode: {
-    type: String as PropType<"add" | "edit">,
+    type: String as PropType<"add" | "edit" | "register">,
     default: "add",
   },
   visitorData: {
@@ -230,7 +246,9 @@ const currentAutofillSource = ref<AutofillSource>(null);
 const { requiredRule, debounce } = useUtils();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
 const { createVisitor, typeFieldMap, contractorTypes } = useVisitor();
+const { getBySiteId: getEntryPassSettingsBySiteId } = useSiteEntryPassSettings();
 const { findPersonByNRIC, findPersonByContact, searchCompanyList, findUsersByPlateNumber } = usePeople()
+const { getById: getUnitDataById} = useBuildingUnit()
 
 const emit = defineEmits([
   "back",
@@ -259,6 +277,12 @@ const visitor = reactive<Partial<TVisitorPayload>>({
   members: [],
 });
 
+const passType = ref("");
+const passQuantity = ref<number | null>(null);
+const passCards = ref<string[]>([]);
+
+const registeredUnitCompanyName = ref('N/A')
+
 const dialog = reactive({
   vehicleNumberUsersList: false,
 });
@@ -293,6 +317,10 @@ const shouldShowField = (fieldKey: keyof TVisitorPayload) => {
   }
 };
 
+const requireNRIC = computed(() => {
+  return prop.type !== 'walk-in' && prop.type !== 'guest';
+})
+
 const companyNames = ref<string[]>([])
 const companyAutofillDataArray = ref<{ companyName: string[], unit: string, block: number, level: string, unitName: string }[]>([])
 
@@ -411,7 +439,7 @@ watch(fetchPersonByContactReq, (obj) => {
       visitor.company = companyNames.value?.[0]
     }
     visitor.block = visitor.block ?? obj.block ?? ""
-    visitor.level = visitor.level ??  obj.level ?? ""
+    visitor.level = visitor.level ?? obj.level ?? ""
     visitor.unit = visitor.unit ?? obj.unit ?? ""
     visitor.nric = visitor.nric ?? obj.nric ?? ""
 
@@ -475,15 +503,15 @@ const debounceSearchVehicleUsers = debounce(() => {
     return;
   }
   fetchVehicleNumberUserRefresh();
-}, 300); 
+}, 300);
 
 watch(() => visitor.plateNumber, (newVal) => {
-  if(currentAutofillSource.value && currentAutofillSource.value !== "vehicleNumber") return;
+  if (currentAutofillSource.value && currentAutofillSource.value !== "vehicleNumber") return;
   debounceSearchVehicleUsers();
 });
 
 
-function handleAutofillDataViaVehicleNumber(item: TPeople){
+function handleAutofillDataViaVehicleNumber(item: TPeople) {
 
   currentAutofillSource.value = "vehicleNumber";
 
@@ -504,6 +532,19 @@ function handleAutofillDataViaVehicleNumber(item: TPeople){
 }
 
 
+const {
+  data: entryPassSettings,
+  pending: entryPassSettingsPending,
+  refresh: refreshEntryPassSettings,
+} = useLazyAsyncData(`fetch-entrypass-settings-${prop.site}`, () => {
+  if (contractorStep.value !== 2) return Promise.resolve(null);
+  return getEntryPassSettingsBySiteId(prop.site);
+});
+
+watch(contractorStep, (step) => {
+  if (step === 2) refreshEntryPassSettings();
+});
+
 const {
   data: siteData,
   refresh: refreshSiteData,
@@ -601,6 +642,25 @@ watch(
 )
 
 
+const { data: buildingUnitData, refresh: refreshBuildingUnitData, pending: buildingUnitDataPending } = useLazyAsyncData(`building-unit-data-${visitor.unit}`, () => {
+  if (!visitor.unit) return Promise.resolve(null);
+  return getUnitDataById(visitor.unit);
+})
+
+// trigger refresh of building unit data when unit changes, to get the latest unit name in case there are changes in the backend
+watch(() => visitor.unit, () => {
+  if (visitor.unit) {
+    refreshBuildingUnitData();
+  } else {
+    registeredUnitCompanyName.value = 'N/A';
+  }
+})
+
+watch(buildingUnitData, (newVal: any) => {
+  registeredUnitCompanyName.value = newVal?.data?.buildingUnit?.companyName || 'N/A';
+})
+
+
 function handleChangeBlock(value: any) {
   visitor.level = "";
   visitor.unit = "";
@@ -647,7 +707,7 @@ function close() {
 function formatVisitorType(type: TVisitorType): string {
   switch (type) {
     case "guest":
-      return "Guest";
+      return "Drive-In";
     case "contractor":
       return "Contractor";
     case "delivery":
@@ -696,16 +756,22 @@ async function submit() {
         };
       }
     }
+  } else if (prop.mode === 'register') {
+    payload = {
+      ...payload,
+      status: "registered",
+    }
+  }
 
-    if (prop.type === "contractor") {
+
+
+  if (prop.type === "contractor") {
       // contractor type logic payload
       payload = {
         ...payload,
         members: visitor.members,
       };
     }
-  } else if (prop.mode === "edit") {
-  }
   try {
     const res = await createVisitor(payload);
     if (res) {
@@ -734,10 +800,19 @@ watch(
 onMounted(() => {
   contractorStep.value = 1;
   currentAutofillSource.value = null;
+
+  if(prop.mode === 'register' && prop.visitorData) {
+    console.log('Register mode, prefill visitor data', prop.visitorData?.plateNumber )
+   visitor.plateNumber = prop.visitorData?.plateNumber || ""
+  }
 });
 </script>
 <style scoped>
 .button-outline-class {
   border: 1px solid rgba(var(--v-theme-primary));
 }
+
+.no-pointer {
+  pointer-events: none;
+}
 </style>

package/components/VisitorFormSelection.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">
-          Add Visitor
+          {{ mode }} Visitor
         </span>
       </v-row>
     </v-toolbar>
@@ -11,7 +11,7 @@
     <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
       <span class="text-subtitle-2 w-100 font-weight-medium d-flex justify-center mb-3">Please Select Visitor Type</span>
       <template v-for="item in selection" :key="item.value">
-        <v-btn color="primary-button" block variant="flat" rounded="md" size="48" :text="item.label" @click="select(item.value)" class="my-2 text-capitalize text-subtitle-2" />
+        <v-btn v-if="showSelection(item)" color="primary-button" block variant="flat" rounded="md" size="48" :text="item.label" @click="select(item.value)" class="my-2 text-capitalize text-subtitle-2" />
       </template>
     </v-card-text>
 
@@ -36,6 +36,10 @@
 
 <script setup lang="ts">
 const prop = defineProps({
+  mode: {
+    type: String as PropType<"add" | "edit" | "register">,
+    default: "add",
+  }
 });
 
 const emit = defineEmits(['cancel', 'select']);
@@ -50,4 +54,11 @@ function cancel() {
 function select(value: string) {
   emit("select", value);
 }
+
+function showSelection(item: any) {
+  if(item.value === 'walk-in' && prop.mode === 'register') {
+    return false ;
+  } return true;
+  
+}
 </script>

package/components/VisitorManagement.vue

@@ -3,11 +3,11 @@
     <TableMain :headers="headers" :items="items" :loading="getVisitorPending" :page="page" :pages="pages"
       :extension-height="110" :offset="300" :pageRange="pageRange" :canCreate="canAddVisitor"
       @refresh="getVisitorRefresh" @update:page="handleUpdatePage" createLabel="Add Visitor" show-header
-      @row-click="handleRowClick" @create="dialog.showSelection = true">
+      @row-click="handleRowClick" @create="handleAddNew">
       <template #extension>
         <v-row no-gutters class="w-100 d-flex flex-column">
           <v-tabs v-model="activeTab" color="primary" :height="40" @update:model-value="toRoute" class="w-100">
-            <v-tab v-for="tab in tabOptions" :value="tab.status" :key="tab.status" class="text-capitalize">
+            <v-tab v-for="tab in tabOptions" :value="tab.value" :key="tab.value" class="text-capitalize">
               {{ tab.name }}
             </v-tab>
           </v-tabs>
@@ -22,8 +22,9 @@
             </v-checkbox>
             <InputDateTimePicker v-model:utc="dateFrom" density="compact" hide-details />
             <InputDateTimePicker v-model:utc="dateTo" density="compact" hide-details />
-            <v-select v-model="filterTypes" label="Filter by types" item-title="label" item-value="value"
-              :items="visitorSelection" density="compact" clearable multiple max-width="200" hide-details>
+            <v-select v-if="activeTab !== 'guests'" v-model="filterTypes" label="Filter by types" item-title="label"
+              item-value="value" :items="visitorSelection" density="compact" clearable multiple max-width="200"
+              hide-details>
               <template v-slot:selection="{ item, index }">
                 <div class="d-flex align-center text-caption text-nowrap">
                   <v-chip v-if="index === 0" color="error" :text="filterTypeSelectionLabel()" size="x-small"
@@ -49,7 +50,7 @@
           <v-icon icon="mdi-user" size="15" />
           <span v-if="item.type === 'contractor'" class="text-capitalize">{{
             formatCamelCaseToWords(item.contractorType)
-            }}</span>
+          }}</span>
           <span v-else class="text-capitalize">{{ formatType(item) }}</span>
         </span>
         <span class="d-flex align-center ga-2">
@@ -87,33 +88,39 @@
           <v-icon icon="mdi-clock-time-four-outline" color="green" size="20" />
           <span class="text-capitalize">{{
             UTCToLocalTIme(item.checkIn) || "-"
-            }}</span>
+          }}</span>
         </span>
         <span class="d-flex align-center ga-2">
-          <v-icon icon="mdi-clock-time-eight-outline" color="red" size="20" v-if="item.checkOut" />
+          <v-icon icon="mdi-clock-time-eight-outline" color="red" size="20" />
           <template v-if="item.checkOut">
             <span class="text-capitalize">{{
               UTCToLocalTIme(item.checkOut) || "_"
-              }}</span>
+            }}</span>
             <span v-if="item?.manualCheckout">
               <TooltipInfo text="Manual Checkout" density="compact" size="x-small" />
             </span>
           </template>
-          <span v-else>
+          <span v-else-if="!item?.checkOut && item?.status === 'registered'">
             <v-btn size="x-small" class="text-capitalize" color="red" text="Checkout"
               :loading="loading.checkingOut && item?._id === selectedVisitorId" @click.stop="handleCheckout(item._id)"
               v-if="canCheckoutVisitor" />
           </span>
         </span>
       </template>
+
+      <template v-slot:item.action="{ item }">
+        <v-btn v-if="activeTab === 'unregistered' && canAddVisitor" size="small" color="primary" text="Register"
+          @click.stop="handleRegistrationUnregisteredVisitor(item)" />
+      </template>
+
     </TableMain>
 
-  <v-dialog v-model="dialog.showSelection" width="450" persistent>
-      <VisitorFormSelection @cancel="dialog.showSelection = false" @select="handleSelectVisitorType" />
+    <v-dialog v-model="dialog.showSelection" width="450" persistent>
+      <VisitorFormSelection :mode="mode" @cancel="dialog.showSelection = false" @select="handleSelectVisitorType" />
     </v-dialog>
 
-    <v-dialog v-model="dialog.addVisitor" v-if="activeVisitorFormType" width="450" persistent>
-      <VisitorForm mode="add" :org="orgId" :site="siteId" :type="activeVisitorFormType" @back="handleClickBack"
+    <v-dialog v-model="dialog.showForm" v-if="activeVisitorFormType" width="450" persistent>
+      <VisitorForm :mode="mode" :org="orgId" :site="siteId" :visitor-data="selectedVisitorDataObject" :type="activeVisitorFormType" @back="handleClickBack"
         @done="handleVisitorFormDone" @done:more="handleVisitorFormCreateMore" @close:all="handleCloseAll" />
     </v-dialog>
 
@@ -135,7 +142,7 @@
               </span>
 
               <span v-else-if="selectedVisitorObject[key]" class="d-flex ga-3 align-center"><strong>{{ label
-                  }}:</strong>
+              }}:</strong>
                 {{ formatValues(key, selectedVisitorObject[key]) }}
                 <TooltipInfo v-if="key === 'checkOut'" text="Manual Checkout" density="compact" size="x-small" />
               </span>
@@ -183,14 +190,6 @@ const props = defineProps({
   },
 });
 
-const headers = [
-  { title: "Name", value: "name" },
-  { title: "Type/Company", value: "type-company" },
-  { title: "Location", value: "location" },
-  { title: "Contact/Vehicle No.", value: "contact-vehicleNumber" },
-  { title: "Check In/Out", value: "checkin-out" },
-];
-
 const {
   getVisitors,
   visitorSelection,
@@ -225,6 +224,7 @@ const dateFrom = ref("");
 const dateTo = ref("");
 const filterTypes = ref<TVisitorType[]>([]);
 const displayNotCheckedOut = ref<boolean>(false);
+const mode = ref<"add" | "edit" | "register">("add");
 
 const message = ref("");
 const messageColor = ref("");
@@ -238,16 +238,31 @@ const loading = reactive({
 
 const dialog = reactive({
   showSelection: false,
-  addVisitor: false,
+  showForm: false,
   viewVisitor: false,
   deleteConfirmation: false,
 });
 
+const headers = computed(() => [
+  { title: "Name", value: "name" },
+  { title: "Type/Company", value: "type-company" },
+  { title: "Location", value: "location" },
+  { title: "Contact/Vehicle No.", value: "contact-vehicleNumber" },
+  { title: "Check In/Out", value: "checkin-out" },
+  ...(activeTab.value === 'unregistered' ? [{ title: "Action", value: "action" }] : [])
+])
+
+
 const tabOptions = [
-  { name: "Registered", status: "registered" },
-  { name: "Unregistered", status: "unregistered" },
+  { name: "Registered", value: "registered" },
+  { name: "Unregistered", value: "unregistered" },
+  { name: "Guests", value: "guests" },
 ];
 
+const selectedVisitorDataObject = computed(() => {
+  return items.value.find((x: any) => x?._id === selectedVisitorId.value) || {};
+});
+
 const formatType = (item: any) =>
   (item.deliveryType ? item.deliveryType + "-" : "") + item.type;
 
@@ -270,8 +285,9 @@ function filterTypeSelectionLabel() {
   return `${length} selected ${length === 1 ? "type" : "types"}` as string;
 }
 
-function toRoute(status: any) {
-  const obj = tabOptions.find((x) => x.status === status);
+function toRoute(tab: any) {
+
+  const obj = tabOptions.find((x) => x.value === tab);
   if (!obj) return;
   page.value = 1
   navigateTo({
@@ -279,9 +295,9 @@ function toRoute(status: any) {
     params: {
       org: orgId,
     },
-    query: {
-      status: obj.status,
-    },
+    // query: {
+    //   tab
+    // },
   });
 }
 
@@ -296,28 +312,30 @@ const {
     // Optional delay (if needed)
     await new Promise(resolve => setTimeout(resolve, 100))
 
-    return await getVisitors({
+    const params: any = {
       page: page.value,
       site: siteId,
       search: searchInput.value,
       dateTo: dateTo.value,
       dateFrom: dateFrom.value,
       type: filterTypes.value.filter(Boolean).join(","),
-      status: activeTab.value as string,
       checkedOut: displayNotCheckedOut.value ? false : undefined
-    })
+    }
+
+    if (activeTab.value !== "guests") {
+      params.status = activeTab.value
+    } else if (activeTab.value === "guests") {
+      params.type = "guest"
+      params.status = undefined
+    }
+
+    return await getVisitors(params)
   },
   {
     watch: [
       page,
-      activeTab,
-      searchInput,
-      dateFrom,
-      dateTo,
-      filterTypes,
-      displayNotCheckedOut,
-      () => route.query
     ],
+    immediate: false
   }
 )
 
@@ -355,6 +373,12 @@ function formatValues(key: string, value: any) {
   return value;
 }
 
+function handleAddNew() {
+  dialog.showSelection = true;
+  activeVisitorFormType.value = null;
+  mode.value = "add";
+}
+
 function handleRowClick(data: any) {
   selectedVisitorId.value = data?.item?._id;
   dialog.viewVisitor = true;
@@ -366,25 +390,25 @@ function handleUpdatePage(newPageNum: number) {
 
 function handleSelectVisitorType(type: TVisitorType) {
   dialog.showSelection = false;
-  dialog.addVisitor = true;
+  dialog.showForm = true;
   activeVisitorFormType.value = type;
 }
 
 function handleClickBack() {
   dialog.showSelection = true;
-  dialog.addVisitor = false;
+  dialog.showForm = false;
 }
 
 function handleVisitorFormDone() {
   getVisitorRefresh();
   dialog.showSelection = false;
-  dialog.addVisitor = false;
+  dialog.showForm = false;
 }
 
 function handleVisitorFormCreateMore() {
   getVisitorRefresh();
   dialog.showSelection = true;
-  dialog.addVisitor = false;
+  dialog.showForm = false;
 }
 
 function handleDeleteVisitor() {
@@ -400,14 +424,17 @@ function showMessage(msg: string, color: string) {
 
 function handleCloseAll() {
   dialog.showSelection = false;
-  dialog.addVisitor = false;
+  dialog.showForm = false;
 }
 
-function handleUpdateAutofillDetails(people: TPeople) {
-  dialog.vehicleNumberUsersList = false
-  console.log('people', people)
+function handleRegistrationUnregisteredVisitor(item: Partial<TVisitor>) {
+  const id = item?._id || null;
+  selectedVisitorId.value = id;
+  dialog.showSelection = true;
+  mode.value = "register";
 }
 
+
 async function handleProceedDeleteVisitor() {
   try {
     loading.deletingVisitor = true;
@@ -462,7 +489,8 @@ async function handleCheckout(userId: string) {
 
 
 const updateRouteQuery = debounce(
-  (search: string, from: string, to: string, types: string[], status, checkedOut) => {
+  // (search: string, from: string, to: string, types: string[], status, checkedOut) => {
+  ({ search, from, to, types, tab, checkedOut }: { search: string, from: string, to: string, types: string[], tab: string, checkedOut: boolean }) => {
     router.replace({
       query: {
         ...route.query,
@@ -470,7 +498,7 @@ const updateRouteQuery = debounce(
         dateFrom: from || undefined,
         dateTo: to || undefined,
         type: types.filter(Boolean).join(",") || undefined,
-        status: status || undefined,
+        tab: tab || undefined,
         ...(checkedOut === true ? { checkedOut: "true" } : { checkedOut: undefined })
       },
     });
@@ -480,9 +508,10 @@ const updateRouteQuery = debounce(
 
 watch(
   [searchInput, dateFrom, dateTo, filterTypes, activeTab, displayNotCheckedOut],
-  ([search, from, to, types, status, checkedOut]) => {
-    updateRouteQuery(search, from, to, types, status, checkedOut)
-
+  ([search, from, to, types, tab, checkedOut]) => {
+    // updateRouteQuery(search, from, to, types, status, checkedOut)
+    updateRouteQuery({ search, from, to, types, tab, checkedOut })
+    getVisitorRefresh();
   },
   { deep: true }
 );
@@ -490,13 +519,12 @@ watch(
 
 
 onMounted(() => {
-  activeTab.value = (route.query.status as string) || "unregistered"
+  activeTab.value = (route.query.tab as string) || "unregistered"
   searchInput.value = (route.query.search as string) || "";
   dateFrom.value = (route.query.dateFrom as string) || "";
   dateTo.value = (route.query.dateTo as string) || "";
   filterTypes.value = ((route.query.type as string)?.split(",") || []).filter(Boolean) as TVisitorType[];
   displayNotCheckedOut.value = (route.query.checkedOut as string) == 'true' || false
-
 })
 </script>