@7365admin1/layer-common 3.0.25 → 3.0.26

package/components/VisitorManagement.vue

@@ -1,137 +1,51 @@
 <template>
   <v-row no-gutters>
-    <TableMain
-      :headers="headers"
-      :items="items"
-      :loading="getVisitorPending"
-      :page="page"
-      :pages="pages"
-      :extension-height="110"
-      :offset="300"
-      :pageRange="pageRange"
-      @refresh="getVisitorRefresh"
-      @update:page="handleUpdatePage"
-      show-header
-      @row-click="handleRowClick"
-    >
+    <TableMain :headers="headers" :items="items" :loading="getVisitorPending" :page="page" :pages="pages"
+      :extension-height="110" :offset="300" :pageRange="pageRange" @refresh="getVisitorRefresh"
+      @update:page="handleUpdatePage" show-header @row-click="handleRowClick">
       <template #actions>
         <v-row no-gutters>
-          <v-btn
-            v-if="canAddVisitor"
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="handleAddNew"
-            text="Add Visitor"
-          />
-          <v-btn
-            v-if="canScanVisitorQRCode"
-            text="Scan QR Code"
-            class="text-none ml-2"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="dialog.scanVisitorQRCode = true"
-          />
+          <v-btn v-if="canAddVisitor" class="text-none" rounded="pill" variant="tonal" size="large"
+            @click="handleAddNew" text="Add Visitor" />
+          <v-btn v-if="canScanVisitorQRCode" text="Scan QR Code" class="text-none ml-2" rounded="pill" variant="tonal"
+            size="large" @click="dialog.scanVisitorQRCode = true" />
           <v-menu>
             <template #activator="{ props }">
-              <v-btn
-                v-bind="props"
-                text="Download Report"
-                class="text-none ml-2"
-                prepend-icon="mdi-download"
-                rounded="pill"
-                variant="tonal"
-                size="large"
-              />
+              <v-btn v-bind="props" text="Download Report" class="text-none ml-2" prepend-icon="mdi-download"
+                rounded="pill" variant="tonal" size="large" />
             </template>
             <v-list>
-              <v-list-item
-                prepend-icon="mdi-file-pdf"
-                title="Download PDF Report"
-                @click="handleDownloadPDFReport"
-              />
-              <v-list-item
-                prepend-icon="mdi-file-csv"
-                title="Download CSV Report"
-                @click="handleDownloadCSVReport"
-              />
+              <v-list-item prepend-icon="mdi-file-pdf" title="Download PDF Report" @click="handleDownloadPDFReport" />
+              <v-list-item prepend-icon="mdi-file-csv" title="Download CSV Report" @click="handleDownloadCSVReport" />
             </v-list>
           </v-menu>
         </v-row>
       </template>
       <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.value"
-              :key="tab.value"
-              class="text-capitalize"
-            >
+          <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.value" :key="tab.value" class="text-capitalize">
               {{ tab.name }}
             </v-tab>
           </v-tabs>
 
-          <v-card
-            class="w-100 px-3 d-flex align-center ga-5 py-2"
-            flat
-            :height="60"
-          >
-            <v-text-field
-              v-model="searchInput"
-              density="compact"
-              placeholder="Search"
-              clearable
-              max-width="300"
-              append-inner-icon="mdi-magnify"
-              hide-details
-            />
-            <v-checkbox
-              v-model="displayNotCheckedOut"
-              class="text-subtitle-2"
-              hide-details
-            >
+          <v-card class="w-100 px-3 d-flex align-center ga-5 py-2" flat :height="60">
+            <v-text-field v-model="searchInput" density="compact" placeholder="Search" clearable max-width="300"
+              append-inner-icon="mdi-magnify" hide-details />
+            <v-checkbox v-model="displayNotCheckedOut" class="text-subtitle-2" hide-details>
               <template #label>
                 <span class="text-caption">Not Checked Out</span>
               </template>
             </v-checkbox>
-            <InputDatePicker
-              v-model="dateFrom"
-              density="compact"
-              hide-details
-            />
+            <InputDatePicker v-model="dateFrom" density="compact" hide-details />
             <InputDatePicker v-model="dateTo" density="compact" hide-details />
-            <v-select
-              v-if="activeTab == 'registered'"
-              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 == 'registered'" 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"
-                    variant="tonal"
-                    class="ml-2"
-                  />
+                  <v-chip v-if="index === 0" color="error" :text="filterTypeSelectionLabel()" size="x-small"
+                    variant="tonal" class="ml-2" />
                 </div>
               </template>
             </v-select>
@@ -146,9 +60,8 @@
           </span>
           <span class="text-capitalize">{{ item?.name }}</span>
         </span>
-        <span class="text-grey text-caption" v-if="item?.members?.length > 0"
-          >( +{{ item?.members?.length }} members)</span
-        >
+        <span class="text-grey text-caption" v-if="item?.members?.length > 0">( +{{ item?.members?.length }}
+          members)</span>
       </template>
 
       <template v-slot:item.email="{ value }">
@@ -157,12 +70,7 @@
 
       <template v-slot:item.invited-by="{ item }">
         <span class="d-flex align-center ga-2">
-          <AvatarMain
-            v-if="item?.inviterName"
-            :name="item?.inviterName"
-            :size="20"
-            :id="item?._id"
-          />
+          <AvatarMain v-if="item?.inviterName" :name="item?.inviterName" :size="20" :id="item?._id" />
           <span class="text-capitalize">{{ item?.inviterName ?? "N/A" }}</span>
         </span>
       </template>
@@ -172,7 +80,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">
@@ -208,52 +116,26 @@
       <template v-slot:item.checkin-out="{ item }">
         <v-row no-gutters class="d-flex flex-column py-2">
           <span class="d-flex align-center ga-2">
-            <v-icon
-              icon="mdi-clock-time-four-outline"
-              color="green"
-              size="20"
-            />
+            <v-icon icon="mdi-clock-time-four-outline" color="green" size="20" />
             <span class="text-capitalize">{{
               UTCToLocalTIme(item.checkIn) || "-"
-            }}</span>
+              }}</span>
             <span>
-              <v-icon
-                v-if="item?.snapshotEntryImage"
-                size="17"
-                icon="mdi-image"
-                @click.stop="handleViewImage(item.snapshotEntryImage)"
-              />
+              <v-icon v-if="item?.snapshotEntryImage" size="17" icon="mdi-image"
+                @click.stop="handleViewImage(item.snapshotEntryImage)" />
             </span>
           </span>
 
-          <span
-            v-if="
-              !item.checkOut &&
-              (item?.status === 'registered' ||
-                item?.status === 'unregistered') &&
-              canCheckoutVisitor
-            "
-          >
-            <span
-              class="d-flex align-center ga-2"
-              v-bind="menuProps"
-              style="cursor: pointer"
-            >
-              <v-icon
-                icon="mdi-clock-time-eight-outline"
-                color="red"
-                size="20"
-              />
-              <v-btn
-                size="x-small"
-                class="text-capitalize"
-                color="red"
-                text="Checkout"
-                :loading="
-                  loading.checkingOut && item?._id === selectedVisitorId
-                "
-                @click.stop="handleCheckout(item._id)"
-              />
+          <span v-if="
+            !item.checkOut &&
+            (item?.status === 'registered' ||
+              item?.status === 'unregistered') &&
+            canCheckoutVisitor
+          ">
+            <span class="d-flex align-center ga-2" v-bind="menuProps" style="cursor: pointer">
+              <v-icon icon="mdi-clock-time-eight-outline" color="red" size="20" />
+              <v-btn size="x-small" class="text-capitalize" color="red" text="Checkout" :loading="loading.checkingOut && item?._id === selectedVisitorId
+                " @click.stop="handleCheckout(item._id)" />
             </span>
           </span>
           <span v-else class="d-flex align-center ga-2">
@@ -261,96 +143,88 @@
             <template v-if="item.checkOut">
               <span class="text-capitalize">{{
                 UTCToLocalTIme(item.checkOut)
-              }}</span>
+                }}</span>
               <span>
-                <v-icon
-                  v-if="item?.snapshotExitImage"
-                  size="17"
-                  icon="mdi-image"
-                  @click.stop="handleViewImage(item.snapshotExitImage)"
-                />
+                <v-icon v-if="item?.snapshotExitImage" size="17" icon="mdi-image"
+                  @click.stop="handleViewImage(item.snapshotExitImage)" />
               </span>
               <span v-if="item?.manualCheckout">
-                <TooltipInfo
-                  text="Manual Checkout"
-                  density="compact"
-                  size="x-small"
-                />
+                <TooltipInfo text="Manual Checkout" density="compact" size="x-small" />
               </span>
             </template>
             <template v-else> <span class="mt-1"> N/A </span> </template>
           </span>
 
-          <div
-            v-if="showAddPassKeyButton(item)"
-            class="d-flex flex-wrap ga-1 mt-1"
-            v-bind="menuProps"
-            style="cursor: pointer"
-          >
-            <v-chip
-              size="x-small"
-              variant="tonal"
-              prepend-icon="mdi-key"
-              @click.stop="handleOpenAddPassKey(item)"
-              >Add Pass/Key</v-chip
-            >
+          <div v-if="showAddPassKeyButton(item)" class="d-flex flex-wrap ga-1 mt-1" v-bind="menuProps"
+            style="cursor: pointer">
+            <v-chip size="x-small" variant="tonal" prepend-icon="mdi-key" @click.stop="handleOpenAddPassKey(item)">Add
+              Pass/Key</v-chip>
           </div>
 
           <v-menu :close-on-content-click="true">
             <template v-slot:activator="{ props: menuProps }">
-              <div
-                v-if="
-                  (item.visitorPass?.length ?? 0) > 0 ||
-                  (item.passKeys?.length ?? 0) > 0
-                "
-                class="d-flex flex-wrap ga-1 mt-1"
-                v-bind="menuProps"
-                style="cursor: pointer"
-              >
-                <v-chip
-                  v-for="pass in item.visitorPass"
-                  :key="(pass as any)._id ?? (pass as any).keyId"
-                  prepend-icon="mdi-card-bulleted-outline"
-                  size="x-small"
-                  variant="tonal"
-                  color="blue"
-                >
+              <div v-if="
+                (item.visitorPass?.length ?? 0) > 0 ||
+                (item.passKeys?.length ?? 0) > 0
+              " class="d-flex flex-wrap ga-1 mt-1" v-bind="menuProps" style="cursor: pointer">
+                <v-chip v-for="pass in item.visitorPass" :key="(pass as any)._id ?? (pass as any).keyId"
+                  prepend-icon="mdi-card-bulleted-outline" size="x-small" variant="tonal" color="blue">
                   {{ (pass as any)?.prefixAndName }}
                 </v-chip>
-                <v-chip
-                  v-for="key in item.passKeys"
-                  :key="(key as any)._id ?? (key as any).keyId"
-                  prepend-icon="mdi-key"
-                  size="x-small"
-                  variant="tonal"
-                  color="orange"
-                >
+                <v-chip v-for="key in item.passKeys" :key="(key as any)._id ?? (key as any).keyId"
+                  prepend-icon="mdi-key" size="x-small" variant="tonal" color="orange">
                   {{ (key as any)?.prefixAndName }}
                 </v-chip>
               </div>
             </template>
             <v-list density="compact">
+              <v-list-item v-if="!item?.checkOut" prepend-icon="mdi-logout" title="Checkout"
+                @click.stop="handleCheckout(item._id)" />
+              <v-list-item v-if="
+                (item.visitorPass?.length ?? 0) > 0 ||
+                (item.passKeys?.length ?? 0) > 0
+              " prepend-icon="mdi-card-bulleted-outline" :title="item.checkOut ? 'View Pass/Key' : 'Edit Pass/Key'"
+                @click.stop="handleOpenEditPassKey(item)" />
+              <v-list-item v-if="showAddPassKeyButton(item)" prepend-icon="mdi-plus" title="Add Pass/Key"
+                @click.stop="handleOpenAddPassKey(item)" />
+            </v-list>
+          </v-menu>
+
+          <!-- NFC Access Cards -->
+          <v-menu
+            v-if="item.accessCards?.type === 'NFC' && item.accessCards?.cardNo"
+            :close-on-content-click="false"
+          >
+            <template #activator="{ props: nfcMenuProps }">
+              <div
+                class="d-flex align-center ga-1 mt-1"
+                style="cursor: pointer"
+                v-bind="nfcMenuProps"
+                @click.stop
+              >
+                <v-icon size="15" icon="mdi-credit-card-outline" color="purple" />
+                <v-chip size="x-small" variant="tonal" color="purple">
+                  {{ item.accessCards.cardNo }}
+                  <template v-if="(item.cards?.flat().length ?? 0) > 1">
+                    (+{{ item.cards.flat().length - 1 }})
+                  </template>
+                </v-chip>
+              </div>
+            </template>
+            <v-list density="compact" min-width="200">
+              <v-list-subheader>NFC Cards</v-list-subheader>
               <v-list-item
-                v-if="!item?.checkOut"
-                prepend-icon="mdi-logout"
-                title="Checkout"
-                @click.stop="handleCheckout(item._id)"
-              />
-              <v-list-item
-                v-if="
-                  (item.visitorPass?.length ?? 0) > 0 ||
-                  (item.passKeys?.length ?? 0) > 0
-                "
-                prepend-icon="mdi-card-bulleted-outline"
-                :title="item.checkOut ? 'View Pass/Key' : 'Edit Pass/Key'"
-                @click.stop="handleOpenEditPassKey(item)"
-              />
-              <v-list-item
-                v-if="showAddPassKeyButton(item)"
-                prepend-icon="mdi-plus"
-                title="Add Pass/Key"
-                @click.stop="handleOpenAddPassKey(item)"
+                prepend-icon="mdi-credit-card-outline"
+                :title="item.accessCards.cardNo"
               />
+              <template v-for="(cardGroup, gi) in item.cards" :key="gi">
+                <v-list-item
+                  v-for="card in cardGroup.filter((c: any) => c._id !== item.accessCards._id)"
+                  :key="card._id"
+                  prepend-icon="mdi-credit-card-outline"
+                  :title="card._id"
+                />
+              </template>
             </v-list>
           </v-menu>
         </v-row>
@@ -369,44 +243,27 @@
 
           <span v-if="!item.checkIn && canUpdateVisitor">
             <span class="d-flex align-center ga-2 cursor-pointer">
-              <v-icon
-                icon="mdi-clock-time-eight-outline"
-                color="success"
-                size="20"
-              />
-              <v-btn
-                size="x-small"
-                class="text-capitalize"
-                color="success"
-                text="Checkin"
-                @click.stop="handleCheckin(item)"
-              />
+              <v-icon icon="mdi-clock-time-eight-outline" color="success" size="20" />
+              <v-btn size="x-small" class="text-capitalize" color="success" text="Checkin"
+                @click.stop="handleCheckin(item)" />
             </span>
           </span>
         </v-row>
       </template>
 
       <template v-slot:item.status="{ item }">
-        <v-card
-          v-if="item?.overnightParking?.status"
-          size="small"
+        <v-card v-if="item?.overnightParking?.status" size="small"
           class="rounded-xl text-capitalize text-center elevation-0 py-1 px-2"
           :color="getOvernightParkingRequestStatusColor(item?.overnightParking?.status as string)"
-          style="max-width: 150px; margin: auto"
-        >
+          style="max-width: 150px; margin: auto">
           {{ item?.overnightParking?.status }}
         </v-card>
         <span v-else> N/A </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)"
-        />
+        <v-btn v-if="activeTab === 'unregistered' && canAddVisitor" size="small" color="primary" text="Register"
+          @click.stop="handleRegistrationUnregisteredVisitor(item)" />
         <v-menu v-else-if="activeTab === 'overnight-parking'">
           <template #activator="{ props }">
             <v-avatar v-bind="props" class="rounded-xl border-md">
@@ -415,20 +272,17 @@
           </template>
 
           <v-card>
-            <v-list-item
-              v-if="
-                !overNightParkingListActions[0].disabled ||
-                !['approved', 'rejected'].includes(
-                  item?.overnightParking?.status
-                )
-              "
-              @click.stop="
+            <v-list-item v-if="
+              !overNightParkingListActions[0].disabled ||
+              !['approved', 'rejected'].includes(
+                item?.overnightParking?.status
+              )
+            " @click.stop="
                 openApproveRejectOverNightParkingRequestDialog(
                   item,
                   overNightParkingListActions[0].status
                 )
-              "
-            >
+                ">
               <template #title>
                 <span class="text-caption">
                   {{ overNightParkingListActions[0].text }}
@@ -436,36 +290,30 @@
               </template>
             </v-list-item>
             <v-divider />
-            <v-list-item
-              v-if="
-                !overNightParkingListActions[1].disabled ||
-                !['approved', 'rejected'].includes(
-                  item?.overnightParking?.status
-                )
-              "
-              @click="
+            <v-list-item v-if="
+              !overNightParkingListActions[1].disabled ||
+              !['approved', 'rejected'].includes(
+                item?.overnightParking?.status
+              )
+            " @click="
                 openApproveRejectOverNightParkingRequestDialog(
                   item,
                   overNightParkingListActions[1].status
                 )
-              "
-            >
+                ">
               <template #title>
                 <span class="text-caption">
                   {{ overNightParkingListActions[1].text }}
                 </span>
               </template>
             </v-list-item>
-            <v-list-item
-              v-if="item?.overnightParking?.remarks"
-              @click="
-                openApproveRejectOverNightParkingRequestDialog(
-                  item,
-                  overNightParkingListActions[2].status,
-                  item?.overnightParking?.remarks
-                )
-              "
-            >
+            <v-list-item v-if="item?.overnightParking?.remarks" @click="
+              openApproveRejectOverNightParkingRequestDialog(
+                item,
+                overNightParkingListActions[2].status,
+                item?.overnightParking?.remarks
+              )
+              ">
               <template #title>
                 <span class="text-caption">
                   {{ overNightParkingListActions[2].text }}
@@ -479,147 +327,78 @@
 
       <template v-slot:item.checkInRemarks="{ item }">
         <span>
-          <v-btn
-            variant="text"
-            color="blue-darken-2"
-            density="compact"
-            size="small"
-            @click.stop="handleOpenRemarks(item, 'checkIn')"
-            >{{ item.checkInRemarks ? "View Remarks" : "Add Remarks" }}</v-btn
-          >
+          <v-btn variant="text" color="blue-darken-2" density="compact" size="small"
+            @click.stop="handleOpenRemarks(item, 'checkIn')">{{ item.checkInRemarks ? "View Remarks" : "Add Remarks"
+            }}</v-btn>
         </span>
       </template>
       <template v-slot:item.checkOutRemarks="{ item }">
         <span>
-          <v-btn
-            variant="text"
-            color="blue-darken-2"
-            density="compact"
-            size="small"
-            @click.stop="handleOpenRemarks(item, 'checkOut')"
-            >{{ item.checkOutRemarks ? "View Remarks" : "Add Remarks" }}</v-btn
-          >
+          <v-btn variant="text" color="blue-darken-2" density="compact" size="small"
+            @click.stop="handleOpenRemarks(item, 'checkOut')">{{ item.checkOutRemarks ? "View Remarks" : "Add Remarks"
+            }}</v-btn>
         </span>
       </template>
     </TableMain>
 
     <v-dialog v-model="dialog.showSelection" width="450" persistent>
-      <VisitorFormSelection
-        :mode="mode"
-        @cancel="dialog.showSelection = false"
-        @select="handleSelectVisitorType"
-      />
+      <VisitorFormSelection :mode="mode" @cancel="dialog.showSelection = false" @select="handleSelectVisitorType" />
     </v-dialog>
 
-    <v-dialog
-      v-model="dialog.showForm"
-      v-if="activeVisitorFormType"
-      width="450"
-      persistent
-    >
-      <VisitorForm
-        :mode="mode"
-        :org="orgId"
-        :site="siteId"
-        :visitor-data="selectedVisitorDataObject"
-        :current-user="currentUser._id"
-        :type="activeVisitorFormType"
-        @back="handleClickBack"
-        @done="handleVisitorFormDone"
-        @done:more="handleVisitorFormCreateMore"
-        @close:all="handleCloseAll"
-      />
+    <v-dialog v-model="dialog.showForm" v-if="activeVisitorFormType" width="450" persistent>
+      <VisitorForm :mode="mode" :org="orgId" :site="siteId" :visitor-data="selectedVisitorDataObject"
+        :current-user="currentUser._id" :type="activeVisitorFormType" @back="handleClickBack"
+        @done="handleVisitorFormDone" @done:more="handleVisitorFormCreateMore" @close:all="handleCloseAll" />
     </v-dialog>
 
     <v-dialog v-model="dialog.viewVisitor" width="450" persistent>
-      <VehicleUpdateMoreAction
-        title="Preview"
-        :can-update="false"
-        :can-delete="false"
-        @close="dialog.viewVisitor = false"
-        edit-button-label="Edit Visitor"
-      >
+      <VehicleUpdateMoreAction title="Preview" :can-update="false" :can-delete="false"
+        @close="dialog.viewVisitor = false" edit-button-label="Edit Visitor">
         <template v-slot:content>
           <v-row no-gutters class="mb-4">
             <v-col v-for="(label, key) in formattedFields" :key="key" cols="12">
-              <span
-                v-if="
-                  key === 'checkIn' &&
-                  !selectedVisitorObject[key] &&
-                  canUpdateVisitor
-                "
-                class="d-flex align-center"
-              >
+              <span v-if="
+                key === 'checkIn' &&
+                !selectedVisitorObject[key] &&
+                canUpdateVisitor
+              " class="d-flex align-center">
                 <strong>{{ label }}:</strong>
-                <v-btn
-                  size="x-small"
-                  class="ml-3 text-capitalize"
-                  color="success"
-                  text="Checkin"
+                <v-btn size="x-small" class="ml-3 text-capitalize" color="success" text="Checkin"
                   :disabled="isVisitorDataFromScannedQRCodeCheckingInOut"
                   @click="handleCheckin(selectedVisitorDataObject)"
-                  :loading="isVisitorDataFromScannedQRCodeCheckingInOut"
-                />
+                  :loading="isVisitorDataFromScannedQRCodeCheckingInOut" />
               </span>
-              <span
-                v-if="
-                  key === 'checkOut' &&
-                  selectedVisitorObject['checkIn'] &&
-                  !selectedVisitorObject[key] &&
-                  canCheckoutVisitor
-                "
-                class="d-flex align-center"
-              >
+              <span v-if="
+                key === 'checkOut' &&
+                selectedVisitorObject['checkIn'] &&
+                !selectedVisitorObject[key] &&
+                canCheckoutVisitor
+              " class="d-flex align-center">
                 <strong>{{ label }}:</strong>
-                <v-btn
-                  size="x-small"
-                  class="ml-3 text-capitalize"
-                  color="red"
-                  text="Checkout"
-                  :disabled="loading.checkingOut"
-                  @click="handleCheckout(selectedVisitorId as string)"
-                />
+                <v-btn size="x-small" class="ml-3 text-capitalize" color="red" text="Checkout"
+                  :disabled="loading.checkingOut" @click="handleCheckout(selectedVisitorId as string)" />
               </span>
 
-              <span
-                v-else-if="key === 'nric' && selectedVisitorObject['nric']"
-                class="d-flex align-center"
-              >
+              <span v-else-if="key === 'nric' && selectedVisitorObject['nric']" class="d-flex align-center">
                 <strong>{{ label }}:</strong>
                 <span v-tooltip:top="selectedVisitorObject[key]" class="ml-2">{{
                   maskNRIC(selectedVisitorObject[key])
-                }}</span>
+                  }}</span>
               </span>
-              <span
-                v-else-if="
-                  key === 'attachments' &&
-                  selectedVisitorObject?.[key]?.length > 0
-                "
-                class="d-flex flex-column"
-              >
+              <span v-else-if="
+                key === 'attachments' &&
+                selectedVisitorObject?.[key]?.length > 0
+              " class="d-flex flex-column">
                 <strong class="w-full">{{ label }}:</strong>
                 <div class="d-flex flex-wrap ga-2">
-                  <AttachmentsViewer
-                    :files="
-                      mappedAttachments(selectedVisitorObject.attachments)
-                    "
-                    title=""
-                    show-file-type-title
-                  />
+                  <AttachmentsViewer :files="mappedAttachments(selectedVisitorObject.attachments)
+                    " title="" show-file-type-title />
                 </div>
               </span>
 
-              <span
-                v-else-if="selectedVisitorObject[key]"
-                class="d-flex ga-3 align-start"
-                ><strong>{{ label }}:</strong>
+              <span v-else-if="selectedVisitorObject[key]" class="d-flex ga-3 align-start"><strong>{{ label }}:</strong>
                 {{ formatValues(key, selectedVisitorObject[key]) }}
-                <TooltipInfo
-                  v-if="key === 'checkOut'"
-                  text="Manual Checkout"
-                  density="compact"
-                  size="x-small"
-                />
+                <TooltipInfo v-if="key === 'checkOut'" text="Manual Checkout" density="compact" size="x-small" />
               </span>
             </v-col>
           </v-row>
@@ -631,11 +410,7 @@
       <v-card>
         <v-card-title class="d-flex justify-space-between align-center">
           <span>Snapshot</span>
-          <v-btn
-            icon="mdi-close"
-            variant="text"
-            @click="dialog.snapshotImage = false"
-          />
+          <v-btn icon="mdi-close" variant="text" @click="dialog.snapshotImage = false" />
         </v-card-title>
         <v-card-text class="pa-2 d-flex justify-center">
           <v-img :src="snapshotImageUrl" max-height="600" contain />
@@ -645,51 +420,25 @@
 
     <v-dialog v-model="dialog.remarks" max-width="450" persistent>
       <v-card>
-        <v-card-title
-          class="d-flex justify-space-between align-center pt-4 px-4"
-        >
+        <v-card-title class="d-flex justify-space-between align-center pt-4 px-4">
           <span>{{
             remarksType === "checkIn" ? "Check-In Remarks" : "Check-Out Remarks"
-          }}</span>
-          <v-btn
-            icon="mdi-close"
-            variant="text"
-            @click="dialog.remarks = false"
-          />
+            }}</span>
+          <v-btn icon="mdi-close" variant="text" @click="dialog.remarks = false" />
         </v-card-title>
         <v-card-text class="px-4 pb-2">
-          <v-textarea
-            v-model="remarksInput"
-            label="Remarks"
-            rows="4"
-            auto-grow
-            variant="outlined"
-            :readonly="remarksViewOnly"
-          />
+          <v-textarea v-model="remarksInput" label="Remarks" rows="4" auto-grow variant="outlined"
+            :readonly="remarksViewOnly" />
         </v-card-text>
         <v-toolbar class="pa-0" density="compact">
           <v-row no-gutters>
             <v-col cols="6">
-              <v-btn
-                variant="text"
-                block
-                :disabled="loading.savingRemarks"
-                @click="dialog.remarks = false"
-                >Cancel</v-btn
-              >
+              <v-btn variant="text" block :disabled="loading.savingRemarks"
+                @click="dialog.remarks = false">Cancel</v-btn>
             </v-col>
             <v-col cols="6">
-              <v-btn
-                color="primary"
-                variant="flat"
-                height="48"
-                rounded="0"
-                block
-                :loading="loading.savingRemarks"
-                :disabled="!remarksInput.trim()"
-                @click="handleSaveRemarks"
-                >Save</v-btn
-              >
+              <v-btn color="primary" variant="flat" height="48" rounded="0" block :loading="loading.savingRemarks"
+                :disabled="!remarksInput.trim()" @click="handleSaveRemarks">Save</v-btn>
             </v-col>
           </v-row>
         </v-toolbar>
@@ -699,16 +448,9 @@
     <v-dialog v-model="dialog.returnPassesKeys" max-width="450" persistent>
       <v-card>
         <v-toolbar density="compact" color="">
-          <v-row
-            no-gutters
-            class="d-flex fill-height justify-space-between align-center px-4"
-          >
+          <v-row no-gutters class="d-flex fill-height justify-space-between align-center px-4">
             <span class="font-weight-bold">Return Passes &amp; Keys</span>
-            <v-btn
-              icon="mdi-close"
-              variant="text"
-              @click="dialog.returnPassesKeys = false"
-            />
+            <v-btn icon="mdi-close" variant="text" @click="dialog.returnPassesKeys = false" />
           </v-row>
         </v-toolbar>
         <v-card-text class="px-4 pb-2">
@@ -718,134 +460,55 @@
 
           <div>
             <InputLabel class="text-capitalize" title="Full Name" />
-            <v-text-field
-              v-model="selectedVisitorObject.name"
-              density="comfortable"
-              readonly
-            />
+            <v-text-field v-model="selectedVisitorObject.name" density="comfortable" readonly />
           </div>
 
           <div>
             <InputLabel class="text-capitalize" title="Location" />
-            <v-text-field
-              v-model="selectedVisitorObject.location"
-              density="comfortable"
-              readonly
-            />
+            <v-text-field v-model="selectedVisitorObject.location" density="comfortable" readonly />
           </div>
 
           <div v-if="passReturnStatuses.length > 0" class="mb-2">
             <p class="text-caption text-medium-emphasis mb-1">Passes</p>
-            <v-row
-              no-gutters
-              v-for="pass in passReturnStatuses"
-              :key="(pass as any)._id ?? (pass as any).keyId"
-              class="d-flex flex-wrap justify-space-between align-center ga-5 mb-2"
-            >
-              <v-chip
-                prepend-icon="mdi-card-bulleted-outline"
-                size="small"
-                variant="tonal"
-                color="blue"
-              >
+            <v-row no-gutters v-for="pass in passReturnStatuses" :key="(pass as any)._id ?? (pass as any).keyId"
+              class="d-flex flex-wrap justify-space-between align-center ga-5 mb-2">
+              <v-chip prepend-icon="mdi-card-bulleted-outline" size="small" variant="tonal" color="blue">
                 {{ (pass as any)?.prefixAndName }}
               </v-chip>
-              <v-select
-                hide-details
-                max-width="200px"
-                density="compact"
-                :items="passStatusOptions"
-                item-title="label"
-                item-value="value"
-                v-model="pass.status"
-                :disabled="selectedVisitorObject.checkOut"
-              ></v-select>
-              <v-textarea
-                v-if="pass.status === 'Lost' || pass.status === 'Damaged'"
-                no-resize
-                rows="3"
-                class="w-100"
-                density="compact"
-                v-model="pass.remarks"
-                :disabled="selectedVisitorObject.checkOut"
-              ></v-textarea>
+              <v-select hide-details max-width="200px" density="compact" :items="passStatusOptions" item-title="label"
+                item-value="value" v-model="pass.status" :disabled="selectedVisitorObject.checkOut"></v-select>
+              <v-textarea v-if="pass.status === 'Lost' || pass.status === 'Damaged'" no-resize rows="3" class="w-100"
+                density="compact" v-model="pass.remarks" :disabled="selectedVisitorObject.checkOut"></v-textarea>
             </v-row>
           </div>
           <div v-if="keyReturnStatuses.length > 0" class="mb-2">
             <p class="text-caption text-medium-emphasis mb-1">Keys</p>
-            <v-row
-              no-gutters
-              v-for="key in keyReturnStatuses"
-              :key="(key as any)._id ?? (key as any).keyId"
-              class="d-flex flex-wrap justify-space-between align-center ga-5 mb-2"
-            >
-              <v-chip
-                prepend-icon="mdi-key"
-                size="small"
-                variant="tonal"
-                color="orange"
-              >
+            <v-row no-gutters v-for="key in keyReturnStatuses" :key="(key as any)._id ?? (key as any).keyId"
+              class="d-flex flex-wrap justify-space-between align-center ga-5 mb-2">
+              <v-chip prepend-icon="mdi-key" size="small" variant="tonal" color="orange">
                 {{ (key as any)?.prefixAndName }}
               </v-chip>
-              <v-select
-                hide-details
-                max-width="200px"
-                density="compact"
-                :items="passStatusOptions"
-                item-title="label"
-                item-value="value"
-                v-model="key.status"
-                :disabled="selectedVisitorObject.checkOut"
-              ></v-select>
-              <v-textarea
-                v-if="key.status === 'Lost' || key.status === 'Damaged'"
-                no-resize
-                rows="3"
-                class="w-100"
-                density="compact"
-                v-model="key.remarks"
-                :disabled="selectedVisitorObject.checkOut"
-              ></v-textarea>
+              <v-select hide-details max-width="200px" density="compact" :items="passStatusOptions" item-title="label"
+                item-value="value" v-model="key.status" :disabled="selectedVisitorObject.checkOut"></v-select>
+              <v-textarea v-if="key.status === 'Lost' || key.status === 'Damaged'" no-resize rows="3" class="w-100"
+                density="compact" v-model="key.remarks" :disabled="selectedVisitorObject.checkOut"></v-textarea>
             </v-row>
           </div>
 
           <v-row no-gutters class="my-5">
-            <v-btn
-              variant="flat"
-              color="blue"
-              density="comfortable"
-              class="text-capitalize"
-              :disabled="selectedVisitorObject.checkOut"
-              :loading="loading.updatingPassKeys"
-              @click.stop="handleUpdatePassKeys"
-              >Update Pass/Keys</v-btn
-            >
+            <v-btn variant="flat" color="blue" density="comfortable" class="text-capitalize"
+              :disabled="selectedVisitorObject.checkOut" :loading="loading.updatingPassKeys"
+              @click.stop="handleUpdatePassKeys">Update Pass/Keys</v-btn>
           </v-row>
         </v-card-text>
         <v-toolbar class="pa-0" density="compact">
           <v-row no-gutters>
             <v-col cols="6">
-              <v-btn
-                variant="text"
-                block
-                @click="dialog.returnPassesKeys = false"
-                >Close</v-btn
-              >
+              <v-btn variant="text" block @click="dialog.returnPassesKeys = false">Close</v-btn>
             </v-col>
             <v-col cols="6">
-              <v-btn
-                color="red"
-                variant="flat"
-                height="48"
-                rounded="0"
-                block
-                :loading="loading.checkingOut"
-                :disabled="
-                  !canConfirmCheckout || selectedVisitorObject.checkOut
-                "
-                @click="proceedCheckout"
-                >Confirm Checkout</v-btn
-              >
+              <v-btn color="red" variant="flat" height="48" rounded="0" block :loading="loading.checkingOut" :disabled="!canConfirmCheckout || selectedVisitorObject.checkOut
+                " @click="proceedCheckout">Confirm Checkout</v-btn>
             </v-col>
           </v-row>
         </v-toolbar>
@@ -853,87 +516,50 @@
     </v-dialog>
 
     <v-dialog v-model="dialog.addPassKey" width="450" persistent>
-      <AddPassKeyToVisitor
-        mode="add"
-        :visitor="selectedVisitorDataObject"
-        :site="siteId"
-        @close="dialog.addPassKey = false"
-        @done="
+      <AddPassKeyToVisitor mode="add" :visitor="selectedVisitorDataObject" :site="siteId"
+        @close="dialog.addPassKey = false" @done="
           () => {
             dialog.addPassKey = false;
             getVisitorRefresh();
           }
-        "
-      />
+        " />
     </v-dialog>
 
     <v-dialog v-model="dialog.editPassKey" width="450" persistent>
-      <AddPassKeyToVisitor
-        mode="edit"
-        :visitor="selectedVisitorDataObject"
-        :site="siteId"
-        @close="dialog.editPassKey = false"
-        @done="
+      <AddPassKeyToVisitor mode="edit" :visitor="selectedVisitorDataObject" :site="siteId"
+        @close="dialog.editPassKey = false" @done="
           () => {
             dialog.editPassKey = false;
             getVisitorRefresh();
           }
-        "
-      />
+        " />
     </v-dialog>
 
-    <ScanVisitorQRCode
-      :dialog="dialog.scanVisitorQRCode"
-      :site="siteId"
-      @open-visitor-data-from-scanned-qr-code-dialog="
-        handleShowVisitorDataFromScannedQRCodeDialog
-      "
-      @close-dialog="dialog.scanVisitorQRCode = false"
-    />
-
-    <v-dialog
-      v-model="dialog.showVisitorDataFromScannedQRCode"
-      width="450"
-      persistent
-    >
-      <VisitorDataFromScannedQRCodeForm
-        :site="siteId"
-        :visitor-data="visitorDataFromScannedQRCode"
+    <ScanVisitorQRCode :dialog="dialog.scanVisitorQRCode" :site="siteId" @open-visitor-data-from-scanned-qr-code-dialog="
+      handleShowVisitorDataFromScannedQRCodeDialog
+    " @close-dialog="dialog.scanVisitorQRCode = false" />
+
+    <v-dialog v-model="dialog.showVisitorDataFromScannedQRCode" width="450" persistent>
+      <VisitorDataFromScannedQRCodeForm :site="siteId" :visitor-data="visitorDataFromScannedQRCode"
         @check-in-out="handleVisitorDataFromScannedQRCodeCheckInOut"
         :processing="isVisitorDataFromScannedQRCodeCheckingInOut"
-        @close="handleCloseVisitorDataFromScannedQRCodeDialog"
-      />
+        @close="handleCloseVisitorDataFromScannedQRCodeDialog" />
     </v-dialog>
 
-    <v-dialog
-      v-model="dialog.approveRejectOvernightParkingRequestDialog"
-      transition="dialog-bottom-transition"
-      persistent
-      width="60vh"
-    >
+    <v-dialog v-model="dialog.approveRejectOvernightParkingRequestDialog" transition="dialog-bottom-transition"
+      persistent width="60vh">
       <v-card>
         <v-toolbar density="compact">
-          <v-row
-            no-gutters
-            class="d-flex fill-height justify-space-between align-center px-4"
-          >
+          <v-row no-gutters class="d-flex fill-height justify-space-between align-center px-4">
             <span class="font-weight-bold"> Overnight Parking Request </span>
-            <v-btn
-              icon="mdi-close"
-              variant="text"
-              @click="dialog.approveRejectOvernightParkingRequestDialog = false"
-            />
+            <v-btn icon="mdi-close" variant="text" @click="dialog.approveRejectOvernightParkingRequestDialog = false" />
           </v-row>
         </v-toolbar>
         <v-card-text class="px-4 pb-6">
           <v-row no-gutters justify="center" align-content="center">
-            <v-col
-              v-if="
-                approveRejectOvernightParkingRequestDialog.status !== 'remarks'
-              "
-              cols="12"
-              class="text-h6 text-center"
-            >
+            <v-col v-if="
+              approveRejectOvernightParkingRequestDialog.status !== 'remarks'
+            " cols="12" class="text-h6 text-center">
               {{
                 `Are you sure you want to ${approveRejectOvernightParkingRequestDialog.text} the visitor's overnight
               parking
@@ -942,58 +568,28 @@
             </v-col>
 
             <v-col cols="12" md="8" class="mt-4">
-              <v-textarea
-                v-model="overNightParkingRequestApproveRejectRemarks"
-                label="Remarks"
-                placeholder="Enter remarks"
-                outlined
-                rows="3"
-                clearable
-                :hide-details="
-                  approveRejectOvernightParkingRequestDialog.status ===
+              <v-textarea v-model="overNightParkingRequestApproveRejectRemarks" label="Remarks"
+                placeholder="Enter remarks" outlined rows="3" clearable :hide-details="approveRejectOvernightParkingRequestDialog.status ===
                   'remarks'
-                "
-                :readonly="
-                  approveRejectOvernightParkingRequestDialog.status ===
+                  " :readonly="approveRejectOvernightParkingRequestDialog.status ===
                   'remarks'
-                "
-              />
+                  " />
             </v-col>
           </v-row>
         </v-card-text>
-        <v-toolbar
-          v-if="approveRejectOvernightParkingRequestDialog.status !== 'remarks'"
-          class="pa-0"
-          density="compact"
-        >
+        <v-toolbar v-if="approveRejectOvernightParkingRequestDialog.status !== 'remarks'" class="pa-0"
+          density="compact">
           <v-row no-gutters>
             <v-col cols="6">
-              <v-btn
-                text="No"
-                color="grey-lighten-3"
-                variant="flat"
-                height="48"
-                tile
-                block
+              <v-btn text="No" color="grey-lighten-3" variant="flat" height="48" tile block
                 :disabled="isApprovingRejectingOvernightParkingRequest"
-                @click="closeApproveRejectOvernightParkingDialog"
-              />
+                @click="closeApproveRejectOvernightParkingDialog" />
             </v-col>
             <v-col cols="6">
-              <v-btn
-                text="Yes"
-                color="success"
-                variant="flat"
-                height="48"
-                tile
-                block
-                :disabled="
-                  !overNightParkingRequestApproveRejectRemarks ||
-                  isApprovingRejectingOvernightParkingRequest
-                "
-                @click="updateOvernightParkingRequestStatus"
-                :loading="isApprovingRejectingOvernightParkingRequest"
-              />
+              <v-btn text="Yes" color="success" variant="flat" height="48" tile block :disabled="!overNightParkingRequestApproveRejectRemarks ||
+                isApprovingRejectingOvernightParkingRequest
+                " @click="updateOvernightParkingRequestStatus"
+                :loading="isApprovingRejectingOvernightParkingRequest" />
             </v-col>
           </v-row>
         </v-toolbar>
@@ -1039,6 +635,18 @@ const props = defineProps({
 const { authenticate, currentUser } = useLocalAuth();
 authenticate();
 
+const route = useRoute();
+const router = useRouter();
+const { org: orgId, site: siteId } = route.params as {
+  org: string;
+  site: string;
+};
+
+const { enableUnregistered } = useANPRSettings(siteId);
+const enableUnregisteredTab = computed(() => enableUnregistered.value);
+
+
+
 const {
   getVisitors,
   visitorSelection,
@@ -1058,12 +666,6 @@ const { formatLocation } = useSecurityUtils();
 const { getFileUrlAnpr } = useFile();
 // const { status: visitorStatus, search } = useRoute().query as { status: string, search: string};
 
-const route = useRoute();
-const router = useRouter();
-const { org: orgId, site: siteId } = route.params as {
-  org: string;
-  site: string;
-};
 const routeName = route.name;
 
 const items = ref<Array<Record<string, any>>>([]);
@@ -1167,13 +769,21 @@ const headers = computed(() => {
   return list;
 });
 
-const tabOptions = [
-  { name: "Registered", value: "registered" },
-  { name: "Unregistered", value: "unregistered" },
-  { name: "Guests", value: "guests" },
-  { name: "Resident Transactions", value: "resident-transactions" },
-  { name: "Overnight Parking", value: "overnight-parking" },
-];
+const tabOptions = computed(() => {
+  const baseTabs = [
+    { name: "Registered", value: "registered" },
+    ...(enableUnregisteredTab.value
+      ? [{ name: "Unregistered", value: "unregistered" }]
+      : []
+    ),
+    { name: "Guests", value: "guests" },
+    { name: "Resident Transactions", value: "resident-transactions" },
+    { name: "Overnight Parking", value: "overnight-parking" },
+  ];
+
+
+  return baseTabs;
+});
 
 function getOvernightParkingRequestStatusColor(status: string) {
   switch (status) {
@@ -1322,7 +932,7 @@ const passStatusOptions = [
 function toRoute(tab: any) {
   items.value = [];
 
-  const obj = tabOptions.find((x) => x.value === tab);
+  const obj = tabOptions.value.find((x) => x.value === tab);
   if (!obj) return;
   page.value = 1;
   getVisitorRefresh();
@@ -1605,7 +1215,7 @@ function handleRegistrationUnregisteredVisitor(item: Partial<TVisitor>) {
   dialog.showSelection = true;
   mode.value = "register";
 
-  if(!selectedVisitorDataObject.value){
+  if (!selectedVisitorDataObject.value) {
     getVisitorRefresh();
   }
 }
@@ -1856,12 +1466,10 @@ async function handleDownloadPDFReport() {
     if (displayNotCheckedOut.value) queryParams.append("checkedOut", "true");
 
     const queryString = queryParams.toString();
-    const url = `/${route.params.org}/${siteId}/visitor-management/preview${
-      queryString ? "?" + queryString : ""
-    }`;
-    const title = `Visitor-Report-${siteId}-${
-      new Date().toISOString().split("T")[0]
-    }`;
+    const url = `/${route.params.org}/${siteId}/visitor-management/preview${queryString ? "?" + queryString : ""
+      }`;
+    const title = `Visitor-Report-${siteId}-${new Date().toISOString().split("T")[0]
+      }`;
 
     await downloadPDF({ url, title, orientation: "P", appKey: "SECURITY" });
     showMessage("PDF report downloaded successfully!", "success");
@@ -2021,7 +1629,12 @@ watch([searchInput, dateFrom, dateTo, filterTypes, activeTab], () => {
 });
 
 onMounted(() => {
-  activeTab.value = (route.query.tab as string) || "unregistered";
+  const requestedTab = (route.query.tab as string) || "registered";
+  activeTab.value = enableUnregisteredTab.value
+    ? requestedTab
+    : requestedTab === "unregistered"
+      ? "registered"
+      : requestedTab;
   searchInput.value = (route.query.search as string) || "";
   if (route.query.dateFrom) {
     dateFrom.value = normalizeDateOnly(route.query.dateFrom as string);
@@ -2042,28 +1655,38 @@ onMounted(() => {
 const { socketUnregisteredVisitorTrigger, visitorSocketData } =
   useVisitorSocket();
 
-  watchEffect(async () => {
-    if (visitorSocketData.value && visitorSocketData.value.reload && activeTab.value === "unregistered") {
-      await getVisitorRefresh();
-      visitorSocketData.value = null;
-      socketUnregisteredVisitorTrigger.value = false;
+watch(
+  enableUnregisteredTab,
+  (enabled) => {
+    if (!enabled && activeTab.value === "unregistered") {
+      activeTab.value = "registered";
     }
+  },
+  { immediate: true }
+);
 
-    if(visitorSocketData.value && visitorSocketData.value.plateNumber && socketUnregisteredVisitorTrigger.value && activeTab.value === "unregistered" && dialog.showSelection === false) {
-      // await getVisitorRefresh();
-      // visitorSocketData.value = null;
-      // socketUnregisteredVisitorTrigger.value = false;
-      setTimeout(async() => {
-        const { _id } = visitorSocketData.value;
-        await handleRegistrationUnregisteredVisitor({ _id });
-        socketUnregisteredVisitorTrigger.value = false;
-
-        setTimeout(() => {
-          visitorSocketData.value = null;
-        }, 1000)
+watchEffect(async () => {
+  if (visitorSocketData.value && visitorSocketData.value.reload && activeTab.value === "unregistered") {
+    await getVisitorRefresh();
+    visitorSocketData.value = null;
+    socketUnregisteredVisitorTrigger.value = false;
+  }
+
+  if (visitorSocketData.value && visitorSocketData.value.plateNumber && socketUnregisteredVisitorTrigger.value && activeTab.value === "unregistered" && dialog.showSelection === false) {
+    // await getVisitorRefresh();
+    // visitorSocketData.value = null;
+    // socketUnregisteredVisitorTrigger.value = false;
+    setTimeout(async () => {
+      const { _id } = visitorSocketData.value;
+      await handleRegistrationUnregisteredVisitor({ _id });
+      socketUnregisteredVisitorTrigger.value = false;
+
+      setTimeout(() => {
+        visitorSocketData.value = null;
       }, 1000)
-    }
-  })
+    }, 1000)
+  }
+})
 
 </script>