@7365admin1/layer-common 1.11.19 → 1.11.21

package/components/VisitorManagement.vue

@@ -1,34 +1,95 @@
 <template>
   <v-row no-gutters>
-    <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="handleAddNew">
+    <TableMain
+      :headers="headers"
+      :items="items"
+      :loading="getVisitorPending"
+      :page="page"
+      :pages="pages"
+      :extension-height="110"
+      :offset="300"
+      :pageRange="pageRange"
+      :canCreate="canAddVisitor"
+      :canScanVisitorQRCode="canScanVisitorQRCode"
+      @refresh="getVisitorRefresh"
+      @update:page="handleUpdatePage"
+      createLabel="Add Visitor"
+      show-header
+      @row-click="handleRowClick"
+      @create="handleAddNew"
+      @scan="dialog.scanVisitorQRCode = true"
+    >
       <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>
-            <InputDateTimePicker v-model:utc="dateFrom" density="compact" hide-details />
-            <InputDateTimePicker v-model:utc="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>
+            <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
+            >
               <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>
@@ -43,8 +104,9 @@
           </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.type-company="{ item }">
@@ -52,7 +114,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">
@@ -88,109 +150,255 @@
       <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>
-              <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 class="d-flex align-center ga-2">
+
+          <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
+                "
+              />
+            </span>
+          </span>
+          <span v-else class="d-flex align-center ga-2">
             <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>
-                <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>
-            <span v-else-if="!item?.checkOut && (item?.status === 'registered' || item?.status === 'unregistered')">
-              <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>
-          <div v-if="(item.visitorPass?.length ?? 0) > 0 || (item.passKeys?.length ?? 0) > 0"
-            class="d-flex flex-wrap ga-1 mt-1" @click.stop="handleCheckout(item._id)">
-            <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">
-              {{ (key as any)?.prefixAndName }}
-            </v-chip>
-          </div>
-          <div v-if="showAddPassKeyButton(item)" class="d-flex flex-wrap ga-1 mt-1 mt-2"
-            @click.stop="handleCheckout(item._id)">
-            <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"
+                >
+                  {{ (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"
+                >
+                  {{ (key as any)?.prefixAndName }}
+                </v-chip>
+              </div>
+            </template>
+            <v-list density="compact">
+              <v-list-item
+                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>
         </v-row>
       </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)"
+        />
       </template>
 
       <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"
-        :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"
+        :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="canDeleteVisitor"
-        @close="dialog.viewVisitor = false" edit-button-label="Edit Visitor" delete-button-label="Delete Visitor"
-        @delete="handleDeleteVisitor">
+      <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 === 'checkOut' &&
-                !selectedVisitorObject[key] &&
-                canCheckoutVisitor
-              " class="d-flex align-center">
+              <span
+                v-if="
+                  key === 'checkOut' &&
+                  !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="selectedVisitorObject[key]" class="d-flex ga-3 align-center"><strong>{{ label
-                  }}:</strong>
+              <span
+                v-else-if="selectedVisitorObject[key]"
+                class="d-flex ga-3 align-center"
+                ><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>
@@ -198,17 +406,15 @@
       </VehicleUpdateMoreAction>
     </v-dialog>
 
-    <v-dialog v-model="dialog.deleteConfirmation" width="450" persistent>
-      <CardDeleteConfirmation prompt-title="Are you sure want to delete this visitor?"
-        :loading="loading.deletingVisitor" @close="dialog.deleteConfirmation = false"
-        @delete="handleProceedDeleteVisitor" />
-    </v-dialog>
-
     <v-dialog v-model="dialog.snapshotImage" max-width="700">
       <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 />
@@ -218,23 +424,51 @@
 
     <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">
-          <span>{{ remarksType === 'checkIn' ? 'Check-In Remarks' : 'Check-Out Remarks' }}</span>
-          <v-btn icon="mdi-close" variant="text" @click="dialog.remarks = false" />
+        <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"
+          />
         </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>
@@ -244,54 +478,134 @@
     <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">
-          <p class="text-body-2 mb-3">Please ensure all passes and keys are returned before checking out.</p>
+          <p class="text-body-2 mb-3">
+            Please ensure all passes and keys are returned before checking out.
+          </p>
           <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">
+          <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>
@@ -299,10 +613,40 @@
     </v-dialog>
 
     <v-dialog v-model="dialog.addPassKey" width="450" persistent>
-      <AddPassKeyToVisitor :visitor="selectedVisitorDataObject" :site="siteId" @close="dialog.addPassKey = false" 
-        @update="getVisitorRefresh" />
+      <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="
+          () => {
+            dialog.editPassKey = false;
+            getVisitorRefresh();
+          }
+        "
+      />
     </v-dialog>
 
+    <ScanVisitorQRCode
+      :dialog="dialog.scanVisitorQRCode"
+      @close-dialog="dialog.scanVisitorQRCode = false"
+    />
+
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
@@ -317,15 +661,15 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  canViewVisitor: {
+  canScanVisitorQRCode: {
     type: Boolean,
     default: true,
   },
-  canUpdateVisitor: {
+  canViewVisitor: {
     type: Boolean,
     default: true,
   },
-  canDeleteVisitor: {
+  canUpdateVisitor: {
     type: Boolean,
     default: true,
   },
@@ -335,21 +679,16 @@ const props = defineProps({
   },
 });
 
-const {
-  getVisitors,
-  visitorSelection,
-  typeFieldMap,
-  deleteVisitor,
-  updateVisitor,
-} = useVisitor();
+const { getVisitors, visitorSelection, typeFieldMap, updateVisitor } =
+  useVisitor();
 const { debounce, formatCamelCaseToWords, formatDate, UTCToLocalTIme } =
   useUtils();
 const { formatLocation } = useSecurityUtils();
 const { getFileUrlAnpr } = useFile();
 // const { status: visitorStatus, search } = useRoute().query as { status: string, search: string};
 
-const route = useRoute()
-const router = useRouter()
+const route = useRoute();
+const router = useRouter();
 const { org: orgId, site: siteId } = route.params as {
   org: string;
   site: string;
@@ -377,7 +716,6 @@ const messageColor = ref("");
 const messageSnackbar = ref(false);
 
 const loading = reactive({
-  deletingVisitor: false,
   fetchingVisitors: false,
   checkingOut: false,
   savingRemarks: false,
@@ -388,15 +726,16 @@ const dialog = reactive({
   showSelection: false,
   showForm: false,
   viewVisitor: false,
-  deleteConfirmation: false,
   snapshotImage: false,
   remarks: false,
   returnPassesKeys: false,
-  addPassKey: false
+  addPassKey: false,
+  editPassKey: false,
+  scanVisitorQRCode: false,
 });
 
 const snapshotImageUrl = ref("");
-const remarksType = ref<'checkIn' | 'checkOut'>('checkIn');
+const remarksType = ref<"checkIn" | "checkOut">("checkIn");
 const remarksInput = ref("");
 const remarksViewOnly = ref(false);
 
@@ -406,10 +745,16 @@ const headers = computed(() => [
   { title: "Location", value: "location" },
   { title: "Contact/Vehicle No.", value: "contact-vehicleNumber" },
   { title: "Check In/Out", value: "checkin-out" },
-  ...(activeTab.value === "resident-transactions" ? [{ title: "Check-in Remarks", value: "checkInRemarks" }, { title: "Check-out Remarks", value: "checkOutRemarks" }] : []),
-  ...(activeTab.value === 'unregistered' ? [{ title: "Action", value: "action" }] : [])
-])
-
+  ...(activeTab.value === "resident-transactions"
+    ? [
+        { title: "Check-in Remarks", value: "checkInRemarks" },
+        { title: "Check-out Remarks", value: "checkOutRemarks" },
+      ]
+    : []),
+  ...(activeTab.value === "unregistered"
+    ? [{ title: "Action", value: "action" }]
+    : []),
+]);
 
 const tabOptions = [
   { name: "Registered", value: "registered" },
@@ -418,6 +763,19 @@ const tabOptions = [
   { name: "Resident Transactions", value: "resident-transactions" },
 ];
 
+function normalizeDateOnly(value: string) {
+  if (!value) return "";
+  if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return value;
+
+  const parsedDate = new Date(value);
+  if (Number.isNaN(parsedDate.getTime())) return "";
+
+  const year = parsedDate.getFullYear();
+  const month = String(parsedDate.getMonth() + 1).padStart(2, "0");
+  const day = String(parsedDate.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
 const selectedVisitorDataObject = computed(() => {
   return items.value.find((x: any) => x?._id === selectedVisitorId.value) || {};
 });
@@ -439,7 +797,6 @@ const formattedFields = {
   checkOut: "Check Out",
   snapshotExitImage: "Exit Image",
   remarks: "Remarks",
-
 } as const;
 
 function filterTypeSelectionLabel() {
@@ -452,14 +809,14 @@ const passStatusOptions = [
   { label: "Not Returned", value: "In Use" },
   { label: "Damaged", value: "Damaged" },
   { label: "Lost", value: "Lost" },
-]
+];
 
 function toRoute(tab: any) {
-  items.value = []
+  items.value = [];
 
   const obj = tabOptions.find((x) => x.value === tab);
   if (!obj) return;
-  page.value = 1
+  page.value = 1;
   navigateTo({
     name: routeName,
     params: {
@@ -470,54 +827,51 @@ function toRoute(tab: any) {
     // },
   });
 }
-
 const {
   data: getVisitorReq,
   refresh: getVisitorRefresh,
   pending: getVisitorPending,
 } = await useLazyAsyncData(
-  `get-all-visitors-${activeTab.value}-${page.value}-${siteId}`,
+  "get-all-visitors",
   async () => {
-
-    // Optional delay (if needed)
-    await new Promise(resolve => setTimeout(resolve, 100))
-
     const params: any = {
       page: page.value,
       site: siteId,
       search: searchInput.value,
-      dateTo: dateTo.value,
-      dateFrom: dateFrom.value,
-      type: (filterTypes.value.length === 0 && activeTab.value === 'registered' ? "contractor,delivery,walk-in,pick-up,drop-off,guest" : filterTypes.value.filter(Boolean).join(",")),
-      checkedOut: displayNotCheckedOut.value ? false : undefined
-    }
-
-    // if (activeTab.value !== "guests") {
-    //   params.status = activeTab.value
-    // } else if (activeTab.value === "guests") {
-    //   params.type = "guest"
-    //   params.status = "pending"
-    // }
+      dateTo: normalizeDateOnly(dateTo.value),
+      dateFrom: normalizeDateOnly(dateFrom.value),
+      type:
+        filterTypes.value.length === 0 && activeTab.value === "registered"
+          ? "contractor,delivery,walk-in,pick-up,drop-off,guest"
+          : filterTypes.value.filter(Boolean).join(","),
+      checkedOut: displayNotCheckedOut.value ? false : undefined,
+    };
 
     if (activeTab.value === "guests") {
-      params.type = "guest"
-      params.status = "pending"
+      params.type = "guest";
+      params.status = "pending";
     } else if (activeTab.value === "resident-transactions") {
-      params.status = "registered"
-      params.type = "resident,tenant"
+      params.status = "registered";
+      params.type = "resident,tenant";
     } else {
-      params.status = activeTab.value
+      params.status = activeTab.value;
     }
 
-    return await getVisitors(params)
+    return await getVisitors(params);
   },
   {
     watch: [
       page,
+      searchInput,
+      dateFrom,
+      dateTo,
+      filterTypes,
+      activeTab,
+      displayNotCheckedOut,
     ],
-    immediate: false
+    immediate: true,
   }
-)
+);
 
 watch(getVisitorReq, (newData: any) => {
   if (newData) {
@@ -529,11 +883,16 @@ watch(getVisitorReq, (newData: any) => {
 });
 
 const selectedVisitorObject = computed(() => {
-
   const obj = items.value.find((x: any) => x?._id === selectedVisitorId.value);
   if (!obj) return {};
   const type = obj?.type as TVisitorType | undefined;
-  let includedKeys: string[] = ["checkIn", "checkOut", "plateNumber", "snapshotEntryImage", "snapshotExitImage"];
+  let includedKeys: string[] = [
+    "checkIn",
+    "checkOut",
+    "plateNumber",
+    "snapshotEntryImage",
+    "snapshotExitImage",
+  ];
   includedKeys.unshift(...(typeFieldMap[type] ?? []));
   return Object.fromEntries(
     Object.entries(obj).filter(([key]) => includedKeys.includes(key))
@@ -554,8 +913,6 @@ function formatValues(key: string, value: any) {
   return value;
 }
 
-
-
 function handleAddNew() {
   dialog.showSelection = true;
   activeVisitorFormType.value = null;
@@ -575,9 +932,17 @@ function showAddPassKeyButton(item: any) {
   const hasPasses = (item?.visitorPass?.length ?? 0) > 0;
   const hasKeys = (item?.passKeys?.length ?? 0) > 0;
 
-  const isTypeWithPassKey = ["contractor", "guest", "walk-in"].includes(item?.type);
+  const isTypeWithPassKey = ["contractor", "guest", "walk-in"].includes(
+    item?.type
+  );
 
-  return !hasPasses && !hasKeys && isTypeWithPassKey && item?.status === "registered" && !item?.checkOut;
+  return (
+    !hasPasses &&
+    !hasKeys &&
+    isTypeWithPassKey &&
+    item?.status === "registered" &&
+    !item?.checkOut
+  );
 }
 
 function handleSelectVisitorType(type: TVisitorType) {
@@ -603,11 +968,6 @@ function handleVisitorFormCreateMore() {
   dialog.showForm = false;
 }
 
-function handleDeleteVisitor() {
-  dialog.deleteConfirmation = true;
-  dialog.viewVisitor = false;
-}
-
 function showMessage(msg: string, color: string) {
   message.value = msg;
   messageColor.value = color;
@@ -637,10 +997,19 @@ function handleOpenAddPassKey(item: any) {
   dialog.addPassKey = true;
 }
 
-function handleOpenRemarks(item: any, type: 'checkIn' | 'checkOut') {
+function handleOpenEditPassKey(item: any) {
+  selectedVisitorId.value = item?._id;
+  if (selectedVisitorDataObject.value.checkOut) {
+    dialog.returnPassesKeys = true;
+    handleCheckout(selectedVisitorId.value as string);
+  } else dialog.editPassKey = true;
+}
+
+function handleOpenRemarks(item: any, type: "checkIn" | "checkOut") {
   selectedVisitorId.value = item?._id;
   remarksType.value = type;
-  const existingRemarks = type === 'checkIn' ? item?.checkInRemarks : item?.checkOutRemarks;
+  const existingRemarks =
+    type === "checkIn" ? item?.checkInRemarks : item?.checkOutRemarks;
   remarksInput.value = existingRemarks || "";
   remarksViewOnly.value = !!existingRemarks;
   dialog.remarks = true;
@@ -650,16 +1019,20 @@ async function handleSaveRemarks() {
   if (!remarksInput.value.trim() || !selectedVisitorId.value) return;
   try {
     loading.savingRemarks = true;
-    const payload = remarksType.value === 'checkIn'
-      ? { checkInRemarks: remarksInput.value.trim() }
-      : { checkOutRemarks: remarksInput.value.trim() };
+    const payload =
+      remarksType.value === "checkIn"
+        ? { checkInRemarks: remarksInput.value.trim() }
+        : { checkOutRemarks: remarksInput.value.trim() };
     await updateVisitor(selectedVisitorId.value, payload);
     showMessage("Remarks saved successfully!", "info");
     await getVisitorRefresh();
     dialog.remarks = false;
   } catch (error: any) {
     const errorMessage = error?.response?._data?.message;
-    showMessage(errorMessage || "Something went wrong. Please try again later.", "error");
+    showMessage(
+      errorMessage || "Something went wrong. Please try again later.",
+      "error"
+    );
   } finally {
     loading.savingRemarks = false;
   }
@@ -671,11 +1044,19 @@ async function handleUpdatePassKeys() {
     loading.updatingPassKeys = true;
     const payload: any = {};
     if (passReturnStatuses.value.length > 0) {
-      const passReturnStatusesPayload = passReturnStatuses.value.map(p => ({ keyId: p.keyId, status: p.status, remarks: p.remarks }));
+      const passReturnStatusesPayload = passReturnStatuses.value.map((p) => ({
+        keyId: p.keyId,
+        status: p.status,
+        remarks: p.remarks,
+      }));
       payload.visitorPass = passReturnStatusesPayload;
     }
     if (keyReturnStatuses.value.length > 0) {
-      const keyReturnStatusesPayload = keyReturnStatuses.value.map(k => ({ keyId: k.keyId, status: k.status, remarks: k.remarks }));
+      const keyReturnStatusesPayload = keyReturnStatuses.value.map((k) => ({
+        keyId: k.keyId,
+        status: k.status,
+        remarks: k.remarks,
+      }));
       payload.passKeys = keyReturnStatusesPayload;
     }
     await updateVisitor(selectedVisitorId.value, payload);
@@ -683,50 +1064,35 @@ async function handleUpdatePassKeys() {
     await getVisitorRefresh();
   } catch (error: any) {
     const errorMessage = error?.response?._data?.message;
-    showMessage(errorMessage || "Something went wrong. Please try again later.", "error");
-  } finally {
-    loading.updatingPassKeys = false;
-  }
-}
-
-
-async function handleProceedDeleteVisitor() {
-  try {
-    loading.deletingVisitor = true;
-    const userId = selectedVisitorId.value;
-    const res = await deleteVisitor(userId as string);
-    if (res) {
-      showMessage("Visitor successfully deleted!", "info");
-      await getVisitorRefresh();
-      dialog.deleteConfirmation = false;
-    }
-  } catch (error: any) {
-    const errorMessage = error?.response?._data?.message;
-    console.log("[ERROR]", error);
     showMessage(
       errorMessage || "Something went wrong. Please try again later.",
       "error"
     );
   } finally {
-    loading.deletingVisitor = false;
+    loading.updatingPassKeys = false;
   }
 }
 
-
-const passReturnStatuses = ref<{ keyId: string, status: string, prefixAndName: string, remarks: string }[]>([]);
-const keyReturnStatuses = ref<{ keyId: string, status: string, prefixAndName: string, remarks: string }[]>([]);
+const passReturnStatuses = ref<
+  { keyId: string; status: string; prefixAndName: string; remarks: string }[]
+>([]);
+const keyReturnStatuses = ref<
+  { keyId: string; status: string; prefixAndName: string; remarks: string }[]
+>([]);
 
 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 === 'Lost' || entry.status === 'Damaged') && !entry.remarks.trim()) return false;
+    if (!entry.status || entry.status === "In Use") return false;
+    if (
+      (entry.status === "Lost" || entry.status === "Damaged") &&
+      !entry.remarks.trim()
+    )
+      return false;
     return true;
   });
 });
 
-
-
 function handleCheckout(userId: string) {
   if (!userId) {
     showMessage("Invalid userId", "error");
@@ -740,8 +1106,22 @@ function handleCheckout(userId: string) {
 
   if (hasPasses || hasKeys) {
     const visitor = items.value.find((x: any) => x?._id === userId);
-    passReturnStatuses.value = ((visitor?.visitorPass as any[]) || []).map((p: any) => ({ keyId: p.keyId, status: p.status ?? "In Use", remarks: '', prefixAndName: p.prefixAndName }));
-    keyReturnStatuses.value = ((visitor?.passKeys as any[]) || []).map((k: any) => ({ keyId: k.keyId, status: k.status ?? "In Use", remarks: '', prefixAndName: k.prefixAndName }));
+    passReturnStatuses.value = ((visitor?.visitorPass as any[]) || []).map(
+      (p: any) => ({
+        keyId: p.keyId,
+        status: p.status ?? "In Use",
+        remarks: "",
+        prefixAndName: p.prefixAndName,
+      })
+    );
+    keyReturnStatuses.value = ((visitor?.passKeys as any[]) || []).map(
+      (k: any) => ({
+        keyId: k.keyId,
+        status: k.status ?? "In Use",
+        remarks: "",
+        prefixAndName: k.prefixAndName,
+      })
+    );
     dialog.returnPassesKeys = true;
     return;
   }
@@ -756,13 +1136,25 @@ async function proceedCheckout() {
   try {
     loading.checkingOut = true;
 
-    const passReturnStatusesPayload = passReturnStatuses.value.map(p => ({ keyId: p.keyId, status: p.status, remarks: p.remarks }));
-    const keyReturnStatusesPayload = keyReturnStatuses.value.map(k => ({ keyId: k.keyId, status: k.status, remarks: k.remarks }));
+    const passReturnStatusesPayload = passReturnStatuses.value.map((p) => ({
+      keyId: p.keyId,
+      status: p.status,
+      remarks: p.remarks,
+    }));
+    const keyReturnStatusesPayload = keyReturnStatuses.value.map((k) => ({
+      keyId: k.keyId,
+      status: k.status,
+      remarks: k.remarks,
+    }));
 
     const res = await updateVisitor(userId as string, {
       checkOut: new Date().toISOString(),
-      ...(passReturnStatuses.value.length > 0 ? { visitorPass: passReturnStatusesPayload } : {}),
-      ...(keyReturnStatuses.value.length > 0 ? { passKeys: keyReturnStatusesPayload } : {}),
+      ...(passReturnStatuses.value.length > 0
+        ? { visitorPass: passReturnStatusesPayload }
+        : {}),
+      ...(keyReturnStatuses.value.length > 0
+        ? { passKeys: keyReturnStatusesPayload }
+        : {}),
     });
     if (res) {
       showMessage("Visitor successfully checked-out!", "info");
@@ -782,11 +1174,23 @@ async function proceedCheckout() {
   }
 }
 
-
-
 const updateRouteQuery = debounce(
   // (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 }) => {
+  ({
+    search,
+    from,
+    to,
+    types,
+    tab,
+    checkedOut,
+  }: {
+    search: string;
+    from: string;
+    to: string;
+    types: string[];
+    tab: string;
+    checkedOut: boolean;
+  }) => {
     router.replace({
       query: {
         ...route.query,
@@ -795,7 +1199,9 @@ const updateRouteQuery = debounce(
         dateTo: to || undefined,
         type: types.filter(Boolean).join(",") || undefined,
         tab: tab || undefined,
-        ...(checkedOut === true ? { checkedOut: "true" } : { checkedOut: undefined })
+        ...(checkedOut === true
+          ? { checkedOut: "true" }
+          : { checkedOut: undefined }),
       },
     });
   },
@@ -805,23 +1211,39 @@ const updateRouteQuery = debounce(
 watch(
   [searchInput, dateFrom, dateTo, filterTypes, activeTab, displayNotCheckedOut],
   ([search, from, to, types, tab, checkedOut]) => {
+    const normalizedFrom = normalizeDateOnly(from);
+    const normalizedTo = normalizeDateOnly(to);
+    dateFrom.value = normalizedFrom;
+    dateTo.value = normalizedTo;
+
     // updateRouteQuery(search, from, to, types, status, checkedOut)
-    updateRouteQuery({ search, from, to, types, tab, checkedOut })
-    getVisitorRefresh();
+    updateRouteQuery({
+      search,
+      from: normalizedFrom,
+      to: normalizedTo,
+      types,
+      tab,
+      checkedOut,
+    });
+    // getVisitorRefresh();
   },
   { deep: true }
 );
-
-
+watch([searchInput, dateFrom, dateTo, filterTypes, activeTab], () => {
+  page.value = 1;
+});
 
 onMounted(() => {
-  activeTab.value = (route.query.tab 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
-})
+  dateFrom.value = normalizeDateOnly((route.query.dateFrom as string) || "");
+  dateTo.value = normalizeDateOnly((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>
 
 <style scoped></style>