@7365admin1/layer-common 1.11.17 → 1.11.19

package/components/VisitorManagement.vue

@@ -43,6 +43,8 @@
           </span>
           <span class="text-capitalize">{{ item?.name }}</span>
         </span>
+        <span class="text-grey text-caption" v-if="item?.members?.length > 0">( +{{ item?.members?.length }}
+          members)</span>
       </template>
 
       <template v-slot:item.type-company="{ item }">
@@ -84,36 +86,56 @@
       </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) || "-"
-              }}</span>
+              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>
+          <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-row>
       </template>
 
       <template v-slot:item.action="{ item }">
@@ -121,6 +143,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>
@@ -179,6 +216,93 @@
       </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" :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">
+                {{ (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-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-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-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-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="dialog.addPassKey" width="450" persistent>
+      <AddPassKeyToVisitor :visitor="selectedVisitorDataObject" :site="siteId" @close="dialog.addPassKey = false" 
+        @update="getVisitorRefresh" />
+    </v-dialog>
+
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
@@ -256,6 +380,8 @@ const loading = reactive({
   deletingVisitor: false,
   fetchingVisitors: false,
   checkingOut: false,
+  savingRemarks: false,
+  updatingPassKeys: false,
 });
 
 const dialog = reactive({
@@ -264,9 +390,15 @@ const dialog = reactive({
   viewVisitor: false,
   deleteConfirmation: false,
   snapshotImage: false,
+  remarks: false,
+  returnPassesKeys: false,
+  addPassKey: 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 +406,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 +447,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 +499,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") {
@@ -381,6 +522,7 @@ const {
 watch(getVisitorReq, (newData: any) => {
   if (newData) {
     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 --";
   }
@@ -412,6 +554,8 @@ function formatValues(key: string, value: any) {
   return value;
 }
 
+
+
 function handleAddNew() {
   dialog.showSelection = true;
   activeVisitorFormType.value = null;
@@ -427,6 +571,15 @@ function handleUpdatePage(newPageNum: number) {
   page.value = newPageNum;
 }
 
+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);
+
+  return !hasPasses && !hasKeys && isTypeWithPassKey && item?.status === "registered" && !item?.checkOut;
+}
+
 function handleSelectVisitorType(type: TVisitorType) {
   dialog.showSelection = false;
   dialog.showForm = true;
@@ -479,6 +632,63 @@ function handleViewImage(imageId: string) {
   dialog.snapshotImage = true;
 }
 
+function handleOpenAddPassKey(item: any) {
+  selectedVisitorId.value = item?._id;
+  dialog.addPassKey = 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) {
+      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 }));
+      payload.passKeys = keyReturnStatusesPayload;
+    }
+    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 +712,63 @@ 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 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 } : {}),
     });
     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(() => {

package/composables/useSiteSettings.ts

@@ -98,6 +98,19 @@ export default function () {
     });
   }
 
+  async function updateSiteInformation(
+    siteId: string,
+    payload: { bgImage: string; description: string; docs: { id: string; name: string }[] }
+  ) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/sites/information/id/${siteId}`,
+      {
+        method: "PATCH",
+        body: payload,
+      }
+    );
+  }
+
   async function setSiteGuardPosts(siteId: string, value: number) {
     return await useNuxtApp().$api<Record<string, any>>(
       `/api/sites/guard-post/id/${siteId}`,
@@ -138,6 +151,7 @@ export default function () {
     updateSiteCamera,
     deleteSiteCameraById,
     updateSitebyId,
+    updateSiteInformation,
     getOvernightParkingAvailability,
     updateOvernightParkingAvailability
   };

package/composables/useTemplateReusable.ts

@@ -269,14 +269,18 @@ export default function useTemplateReusable() {
     _id,
     site,
     status,
+    userType,
+    updatedBy,
   }: {
     _id?: string;
     site?: string;
     status?: string;
+    userType?: string;
+    updatedBy?: string;
   }) {
     return useNuxtApp().$api("/api/qr-code-templates/v1", {
       method: "PUT",
-      body: { _id, site, status },
+      body: { _id, site, status, userType, updatedBy },
     });
   }
 

package/composables/useVehicle.ts

@@ -27,7 +27,7 @@ export default function useVehicle() {
   }
 
   async function updateVehicle(id: string, payload: Partial<TVehiclePayload>) {
-    return await useNuxtApp().$api<Record<string, any>>(`/api/vehicles/${id}`, {
+    return await useNuxtApp().$api<Record<string, any>>(`/api/vehicles/id/${id}`, {
       method: "PUT",
       body: payload,
     });
@@ -51,11 +51,11 @@ export default function useVehicle() {
       }
     );
   }
-
+  
   interface IDeleteVehicleParams {
     site: string;
     id: string;
-    recno: string;
+    recno?: string;
     type: "whitelist" | "blocklist";
   }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.11.17",
+  "version": "1.11.19",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/types/vehicle.d.ts

@@ -9,6 +9,7 @@ declare type TVehicle = {
   block: number | "";
   level: string;
   unit: string;
+  uniName?: string; // For display purposes, the API will return the unit name if available
   nric?: string | null;
   remarks?: string;
   seasonPassType?: string;
@@ -43,4 +44,4 @@ declare type TVehiclePayload = Pick<
   | "site"
   | "org"
   | "peopleId"
-> & { plateNumber: string[] };
+> & { plateNumber?: string | string[] };

package/types/visitor.d.ts

@@ -20,11 +20,15 @@ declare type TVisitor = {
   org: string;
   site: string,
   manualCheckout?: boolean;
+  visitorPass?: TPassKeyPayload[];
+  passKeys?: TPassKeyPayload[]
+  checkInRemarks?: string;
+  checkOutRemarks?: string;
 };
 
 declare type TVisitorType = "contractor" | "delivery" | "walk-in" | "pick-up" | "drop-off" | "guest";
 
-declare type TVisitorPayload = Pick<TVisitor, "name" | "type" | "company" | "block" | "level" | "unit" | "unitName" | "contact" | "plateNumber" | "checkOut" | "contractorType" | "deliveryType" | "nric" | "contact" | "remarks" | "attachments" | "org" | "site" | "status"> & {
+declare type TVisitorPayload = Pick<TVisitor, "name" | "type" | "company" | "block" | "level" | "unit" | "unitName" | "contact" | "plateNumber" | "checkOut" | "contractorType" | "deliveryType" | "nric" | "contact" | "remarks" | "attachments" | "org" | "site" | "status" | "visitorPass" | "passKeys" | "checkInRemarks" | "checkOutRemarks"> & {
   members?: TMemberInfo[]
 }
 
@@ -38,6 +42,13 @@ declare type TDefaultOptionObj = {
 declare type TMemberInfo = {
     name: string;
     nric: string;
-    visitorPass: string;
+    visitorPass?: string;
+    passKeys?: TPassKeyPayload[];
     contact: string
 }
+
+declare type TPassKeyPayload = {
+  keyId: string;
+  status?: string;
+  remarks?: string;
+}