@7365admin1/layer-common 1.11.17 → 1.11.18

package/components/VisitorForm.vue

@@ -12,9 +12,9 @@
       <div class="w-100 d-flex justify-space-between ga-2">
         <span class="text-subtitle-1 w-100 font-weight-bold mb-3">{{
           formTitle
-        }}</span>
-        <span v-if="prop.type === 'contractor'" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
-          <span class="text-primary-button">{{ contractorStep }}</span>/3</span>
+          }}</span>
+        <span v-if="withStep2 || withStep3" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
+          <span class="text-primary-button">{{ contractorStep }}</span>/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span>
       </div>
       <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
         <v-row no-gutters class="pt-4">
@@ -30,7 +30,7 @@
                   <v-list-item-title @click.stop="handleAddNewContractorType" class="d-flex align-center ga-1">
                     <span><v-icon icon="mdi-plus" /></span> Add "<strong>{{
                       contractorTypeInput
-                    }}</strong>" as custom contractor type.
+                      }}</strong>" as custom contractor type.
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -115,8 +115,7 @@
               <InputLabel class="text-capitalize" title="Delivery Company" />
               <v-combobox v-model="deliveryCompany" v-model:search="deliveryCompanyInput" ref="companyCombo"
                 autocomplete="off" :hide-no-data="false" :items="deliveryCompanyList" item-value="value"
-                :loading="siteDataPending" variant="outlined"
-                density="comfortable" persistent-hint small-chips>
+                :loading="siteDataPending" variant="outlined" density="comfortable" persistent-hint small-chips>
                 <template v-slot:no-data>
                   <v-list-item>
                     <v-list-item-title v-if="fetchCompanyListPending">
@@ -183,22 +182,17 @@
             <v-textarea v-model="visitor.remarks" density="comfortable" :rows="3" no-resize />
           </v-col>
 
-          <v-col v-if="prop.type === 'contractor' && contractorStep === 2" cols="12">
-            <PassInformation :site="prop.site" :type="prop.type" :contractor-type="visitor.contractorType" />
-            <EntryPassInformation
-              v-if="entryPassSettings?.data?.settings?.nfcPass"
-              v-model="passType"
-              v-model:quantity="passQuantity"
-              v-model:cards="passCards"
-              :settings="entryPassSettings"
-              :loading="entryPassSettingsPending"
-              :site-id="prop.site"
-              :unit-id="visitor.unit || null"
-            />
+          <v-col v-if="(withStep2 || withStep3) && contractorStep === 2" cols="12">
+            <PassInformation v-model:pass="visitor.visitorPass" v-model:keys="visitor.passKeys" :site="prop.site"
+              :type="prop.type" :contractor-type="visitor.contractorType" :hide-keys="!showShowKeysField" />
+            <EntryPassInformation v-if="entryPassSettings?.data?.settings?.nfcPass" v-model="passType"
+              v-model:quantity="passQuantity" v-model:cards="passCards" :settings="entryPassSettings"
+              :loading="entryPassSettingsPending" :site-id="prop.site" :unit-id="visitor.unit || null" />
           </v-col>
 
-          <v-col v-if="prop.type === 'contractor' && contractorStep === 3" cols="12">
-            <MemberInformation v-model="visitor.members" />
+          <v-col v-if="withStep3 && contractorStep === 3" cols="12">
+            <MemberInformation v-model="visitor.members" :type="prop.type" :contractor-type="visitor.contractorType"
+              :site="prop.site" :selected-visitor-pass="visitor.visitorPass" />
           </v-col>
 
           <v-col v-if="prop.mode === 'add'" cols="12" class="mt-2">
@@ -224,7 +218,7 @@
         <v-col cols="6">
           <v-btn v-if="
             prop.mode === 'add' &&
-            prop.type === 'contractor' &&
+            (withStep2 || withStep3) &&
             contractorStep > 1
           " tile block variant="text" class="text-none" size="48" @click="handleGoToPreviousPage" text="Back" />
           <v-btn v-else-if="prop.mode === 'add' || prop.mode === 'register'" tile block variant="text" class="text-none"
@@ -232,10 +226,11 @@
           <v-btn v-else tile block variant="text" class="text-none" size="48" @click="emit('close:all')" text="Close" />
         </v-col>
         <v-col cols="6">
-          <v-btn v-if="prop.type === 'contractor'" tile block variant="flat" color="primary-button" class="text-none"
-            size="48" :disabled="processing" @click="handleNextPage" :text="contractorStep === 3 ? 'Submit' : 'Next'" />
+          <v-btn v-if="showNextButton" tile block variant="flat" color="primary-button" class="text-none" size="48"
+            :disabled="processing" @click="handleNextPage" :text="'Next'" />
           <v-btn v-else tile block variant="flat" color="black" class="text-none" size="48"
-            :disabled="!validForm || processing" @click="submit" :text="prop.mode == 'add' ? 'Submit' : 'Update'" />
+            :disabled="!validForm || processing || membersFieldIncomplete" @click="submit"
+            :text="prop.mode == 'add' ? 'Submit' : 'Update'" />
         </v-col>
       </v-row>
     </v-toolbar>
@@ -353,6 +348,8 @@ const visitor = reactive<Partial<TVisitorPayload>>({
   remarks: "",
   attachments: [],
   members: [],
+  visitorPass: [],
+  passKeys: []
 });
 
 const passType = ref<string | null>(null);
@@ -400,12 +397,34 @@ const vehicleNumberUserItems = ref<TPeople[]>([])
 
 
 const shouldShowField = (fieldKey: keyof TVisitorPayload | 'delivery-company') => {
-  if (prop.type !== "contractor" || contractorStep.value === 1) {
+  if ((!withStep2.value && !withStep3.value) || contractorStep.value === 1) {
     const visibleFields = typeFieldMap[prop.type];
     return visibleFields?.includes(fieldKey);
   }
 };
 
+const withStep2 = computed(() => {
+  const step2Types = ["guest", "walk-in"];
+  return step2Types.includes(prop.type);
+})
+
+const withStep3 = computed(() => {
+  const step3Types = ["contractor"];
+  return step3Types.includes(prop.type);
+})
+
+const showNextButton = computed(() => {
+  if (withStep3.value) {
+    return contractorStep.value === 1 || contractorStep.value === 2
+  } else if (withStep2.value) {
+    return contractorStep.value === 1
+  } else return false
+})
+
+const showShowKeysField = computed(() => {
+  return prop.type === "contractor"
+})
+
 const requireNRIC = computed(() => {
   return prop.type !== 'walk-in' && prop.type !== 'guest';
 })
@@ -415,8 +434,10 @@ const companyAutofillDataArray = ref<{ companyName: string[], unit: string, bloc
 
 const formTitle = computed(() => {
   const isContractorForm = prop.type === "contractor";
+  const isDriveInForm = prop.type === "guest";
+  const isWalkInForm = prop.type === "walk-in";
   const step = contractorStep.value;
-  if (isContractorForm && step === 2) {
+  if ((isContractorForm || isDriveInForm || isWalkInForm) && step === 2) {
     return "Pass & Keys Information";
   } else if (isContractorForm && step === 3) {
     return "Members Information";
@@ -519,7 +540,7 @@ const {
 }
 );
 
-watch(fetchPersonByContactReq, (obj) => {
+watch(fetchPersonByContactReq, (obj: Partial<TPerson>) => {
   if (obj) {
     currentAutofillSource.value = "contact";
     companyNames.value = obj.companyName ?? []
@@ -568,7 +589,7 @@ watch(fetchVisitorListByVehicleNumberReq, (arr: any) => {
   const itemsArray = arr?.items || []
   const isValidArray = Array.isArray(itemsArray)
   matchingPlateNumberNonCheckedOutArr.value = isValidArray ? itemsArray : []
-  if(matchingPlateNumberNonCheckedOutArr.value.length > 0) {
+  if (matchingPlateNumberNonCheckedOutArr.value.length > 0) {
     dialog.showNonCheckedOutDialog = true;
   } else {
     dialog.showNonCheckedOutDialog = false;
@@ -603,7 +624,7 @@ async function handleCheckout(visitorId: string) {
       checkOut: new Date().toISOString(),
     });
     if (res) {
-      await fetchVisitorListByVehicleNumberRefresh(); 
+      await fetchVisitorListByVehicleNumberRefresh();
 
     }
   } catch (error: any) {
@@ -876,6 +897,15 @@ async function submit() {
         };
       }
     }
+
+    const isGuest = prop.type === "guest";
+    const isWalkIn = prop.type === "walk-in";
+    const isContractor = prop.type === "contractor";
+    if (isGuest || isWalkIn || isContractor) {
+      payload.visitorPass = visitor.visitorPass;
+      payload.passKeys = visitor.passKeys;
+    }
+
   }
 
 
@@ -888,7 +918,7 @@ async function submit() {
     };
   }
 
-  if(prop.type === "delivery"){
+  if (prop.type === "delivery") {
     payload = {
       ...payload,
       company: deliveryCompany.value
@@ -969,6 +999,18 @@ watch(
   }
 );
 
+const membersFieldIncomplete = computed(() => {
+  if (!visitor.members || visitor.members.length === 0) return false;
+
+  return visitor.members.some((member) => {
+    const hasName = !!member.name;
+    const hasNric = !!member.nric;
+    const hasContact = !!member.contact;
+
+    return !hasName || !hasNric || !hasContact;
+  });
+});
+
 onMounted(() => {
   contractorStep.value = 2;
   currentAutofillSource.value = null;

package/components/VisitorManagement.vue

@@ -43,6 +43,7 @@
           </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>
       </template>
 
       <template v-slot:item.type-company="{ item }">
@@ -50,7 +51,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">
@@ -84,36 +85,49 @@
       </template>
 
       <template v-slot:item.checkin-out="{ item }">
-        <span class="d-flex align-center ga-2">
-          <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)" />
-          </span>
-        </span>
-        <span class="d-flex align-center ga-2">
-          <v-icon icon="mdi-clock-time-eight-outline" color="red" size="20" />
-          <template v-if="item.checkOut">
+        <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" />
             <span class="text-capitalize">{{
-              UTCToLocalTIme(item.checkOut) || "-"
+              UTCToLocalTIme(item.checkIn) || "-"
               }}</span>
             <span>
-              <v-icon v-if="item?.snapshotExitImage" size="17" icon="mdi-image"
-                @click.stop="handleViewImage(item.snapshotExitImage)" />
+              <v-icon v-if="item?.snapshotEntryImage" size="17" icon="mdi-image"
+                @click.stop="handleViewImage(item.snapshotEntryImage)" />
             </span>
-            <span v-if="item?.manualCheckout">
-              <TooltipInfo text="Manual Checkout" density="compact" size="x-small" />
+          </span>
+          <span 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)" />
+              </span>
+              <span v-if="item?.manualCheckout">
+                <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>
-          </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>
+        </v-row>
       </template>
 
       <template v-slot:item.action="{ item }">
@@ -121,6 +135,21 @@
           @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>
+        </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>
+        </span>
+      </template>
+
     </TableMain>
 
     <v-dialog v-model="dialog.showSelection" width="450" persistent>
@@ -151,7 +180,7 @@
               </span>
 
               <span v-else-if="selectedVisitorObject[key]" class="d-flex ga-3 align-center"><strong>{{ label
-                  }}:</strong>
+              }}:</strong>
                 {{ formatValues(key, selectedVisitorObject[key]) }}
                 <TooltipInfo v-if="key === 'checkOut'" text="Manual Checkout" density="compact" size="x-small" />
               </span>
@@ -179,6 +208,88 @@
       </v-card>
     </v-dialog>
 
+    <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>
+        <v-card-text class="px-4 pb-2">
+          <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-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-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
+    <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">
+            <span class="font-weight-bold">Return Passes &amp; Keys</span>
+            <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>
+          <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">
+                {{ (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"></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"></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">
+                {{ (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">
+              </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"></v-textarea>
+            </v-row>
+          </div>
+
+          <v-row no-gutters class="my-5">
+            <v-btn variant="flat" color="blue" density="comfortable" class="text-capitalize" :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 :disabled="loading.checkingOut"
+                @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" @click="proceedCheckout">Confirm Checkout</v-btn>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
@@ -256,6 +367,8 @@ const loading = reactive({
   deletingVisitor: false,
   fetchingVisitors: false,
   checkingOut: false,
+  savingRemarks: false,
+  updatingPassKeys: false,
 });
 
 const dialog = reactive({
@@ -264,9 +377,14 @@ const dialog = reactive({
   viewVisitor: false,
   deleteConfirmation: false,
   snapshotImage: false,
+  remarks: false,
+  returnPassesKeys: false,
 });
 
 const snapshotImageUrl = ref("");
+const remarksType = ref<'checkIn' | 'checkOut'>('checkIn');
+const remarksInput = ref("");
+const remarksViewOnly = ref(false);
 
 const headers = computed(() => [
   { title: "Name", value: "name" },
@@ -274,6 +392,7 @@ 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" }] : [])
 ])
 
@@ -314,7 +433,15 @@ function filterTypeSelectionLabel() {
   return `${length} selected ${length === 1 ? "type" : "types"}` as string;
 }
 
+const passStatusOptions = [
+  { label: "Returned", value: "Returned" },
+  { label: "Not Returned", value: "In Use" },
+  { label: "Damaged", value: "Damaged" },
+  { label: "Lost", value: "Lost" },
+]
+
 function toRoute(tab: any) {
+  items.value = []
 
   const obj = tabOptions.find((x) => x.value === tab);
   if (!obj) return;
@@ -358,7 +485,7 @@ const {
     //   params.status = "pending"
     // }
 
-    if(activeTab.value === "guests"){
+    if (activeTab.value === "guests") {
       params.type = "guest"
       params.status = "pending"
     } else if (activeTab.value === "resident-transactions") {
@@ -380,7 +507,8 @@ const {
 
 watch(getVisitorReq, (newData: any) => {
   if (newData) {
-    items.value = newData.items ?? [];
+    // items.value = newData.items ?? [];
+    items.value = [{ _id: "testid", name: "John Doe", type: "Contractor", company: "ABC Corp", location: "Block A, Level 1, Unit 101", contact: "12345678", plateNumber: "SGX1234A", checkIn: new Date().toISOString(), checkOut: null, status: "registered", visitorPass: [{ _id: "1", keyId: "pass1", prefixAndName: "VIP Pass" }, { _id: "2", keyId: "pass2", prefixAndName: "VIP Pass 2" }], passKeys: [{ _id: "1", keyId: "key2", prefixAndName: "Master Key" }] }];
     pages.value = newData.pages ?? 0;
     pageRange.value = newData?.pageRange ?? "-- - -- of --";
   }
@@ -479,6 +607,56 @@ function handleViewImage(imageId: string) {
   dialog.snapshotImage = true;
 }
 
+function handleOpenRemarks(item: any, type: 'checkIn' | 'checkOut') {
+  selectedVisitorId.value = item?._id;
+  remarksType.value = type;
+  const existingRemarks = type === 'checkIn' ? item?.checkInRemarks : item?.checkOutRemarks;
+  remarksInput.value = existingRemarks || "";
+  remarksViewOnly.value = !!existingRemarks;
+  dialog.remarks = true;
+}
+
+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() };
+    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");
+  } finally {
+    loading.savingRemarks = false;
+  }
+}
+
+async function handleUpdatePassKeys(){
+  if (!selectedVisitorId.value) return;
+  try {
+    loading.updatingPassKeys = true;
+    const payload: any = {};
+    if (passReturnStatuses.value.length > 0) {
+      payload.visitorPass = passReturnStatuses.value;
+    }
+    if (keyReturnStatuses.value.length > 0) {
+      payload.passKeys = keyReturnStatuses.value;
+    }
+    await updateVisitor(selectedVisitorId.value, payload);
+    showMessage("Pass/Key statuses updated successfully!", "info");
+    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 {
@@ -502,22 +680,59 @@ async function handleProceedDeleteVisitor() {
   }
 }
 
-async function handleCheckout(userId: 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;
+    return true;
+  });
+});
+
+
+
+function handleCheckout(userId: string) {
   if (!userId) {
     showMessage("Invalid userId", "error");
     return;
   }
   selectedVisitorId.value = userId;
 
+  const visitor = items.value.find((x: any) => x?._id === userId);
+  const hasPasses = (visitor?.visitorPass?.length ?? 0) > 0;
+  const hasKeys = (visitor?.passKeys?.length ?? 0) > 0;
+
+  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 }));
+    dialog.returnPassesKeys = true;
+    return;
+  }
+
+  proceedCheckout();
+}
+
+async function proceedCheckout() {
+  const userId = selectedVisitorId.value;
+  if (!userId) return;
+
   try {
     loading.checkingOut = true;
     const res = await updateVisitor(userId as string, {
       checkOut: new Date().toISOString(),
+      ...(passReturnStatuses.value.length > 0 ? { visitorPass: passReturnStatuses.value } : {}),
+      ...(keyReturnStatuses.value.length > 0 ? { passKeys: keyReturnStatuses.value } : {}),
     });
     if (res) {
       showMessage("Visitor successfully checked-out!", "info");
       await getVisitorRefresh();
       dialog.viewVisitor = false;
+      dialog.returnPassesKeys = false;
     }
   } catch (error: any) {
     const errorMessage = error?.response?._data?.message;

package/composables/useKey.ts

@@ -195,6 +195,7 @@ export default function useKey() {
     organization,
     startDateTime,
     endDateTime,
+    statuses
   }: {
     page?: number;
     search?: string | ISearch;
@@ -204,6 +205,7 @@ export default function useKey() {
     organization?: string;
     startDateTime?: string;
     endDateTime?: string;
+    statuses?: string[];
   } = {}) {
     /*
       search here should accept
@@ -220,6 +222,7 @@ export default function useKey() {
         organization,
         startDateTime,
         endDateTime,
+        statuses
       },
     });
   }
@@ -381,5 +384,6 @@ export default function useKey() {
     passTypesStatus,
     getCountTotalKeys,
     getKeyWithSequence,
+    getKeysByKeyPageSearch
   };
 }

package/composables/useLocalAuth.ts

@@ -29,7 +29,7 @@ export default function useLocalAuth() {
 
   const currentUser = useState(
     "currentUser",
-    (): TUser => JSON.parse(JSON.stringify(user))
+    (): TUser | null => JSON.parse(JSON.stringify(user))
   );
 
   async function authenticate() {
@@ -41,9 +41,7 @@ export default function useLocalAuth() {
       );
 
     watchEffect(() => {
-      if (getCurrentUserReq.value) {
-        currentUser.value = getCurrentUserReq.value;
-      }
+      currentUser.value = getCurrentUserReq.value as TUser | null;
     });
 
     watchEffect(() => {