@7365admin1/layer-common 3.0.7 → 3.0.8

package/components/VisitorManagement.vue

@@ -1,51 +1,137 @@
 <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>
@@ -60,8 +146,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.email="{ value }">
@@ -70,7 +157,12 @@
 
       <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>
@@ -80,7 +172,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">
@@ -116,26 +208,52 @@
       <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">
@@ -143,50 +261,96 @@
             <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-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>
         </v-row>
@@ -205,27 +369,44 @@
 
           <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">
@@ -234,17 +415,20 @@
           </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 }}
@@ -252,30 +436,36 @@
               </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 }}
@@ -289,75 +479,147 @@
 
       <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"
+        :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"
-                  :disabled="isVisitorDataFromScannedQRCodeCheckingInOut" @click="handleCheckin(selectedVisitorObject)"
-                  :loading="isVisitorDataFromScannedQRCodeCheckingInOut" />
+                <v-btn
+                  size="x-small"
+                  class="ml-3 text-capitalize"
+                  color="success"
+                  text="Checkin"
+                  :disabled="isVisitorDataFromScannedQRCodeCheckingInOut"
+                  @click="handleCheckin(selectedVisitorObject)"
+                  :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 v-tooltip:top="selectedVisitorObject[key]" class="ml-2">{{
+                  maskNRIC(selectedVisitorObject[key])
+                }}</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>
@@ -369,7 +631,11 @@
       <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 />
@@ -379,25 +645,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">
+        <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>
@@ -407,9 +699,16 @@
     <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">
@@ -419,55 +718,134 @@
 
           <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>
@@ -475,50 +853,87 @@
     </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
@@ -527,28 +942,58 @@
             </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>
@@ -819,8 +1264,8 @@ function mappedAttachments(attachments: string[]) {
   return attachments.map((x, index) => {
     return {
       id: x,
-      name: `Attachment ${index + 1}`
-    }
+      name: `Attachment ${index + 1}`,
+    };
   });
 }
 
@@ -1392,10 +1837,12 @@ 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");