@7365admin1/layer-common 1.11.17 → 1.11.19

package/components/VehicleManagement.vue

@@ -9,8 +9,8 @@
         <v-row no-gutters class="px-5 py-1 d-flex align-center justify-end ga-3">
           <v-text-field v-model="searchInput" density="compact" placeholder="Search" clearable max-width="300"
             append-inner-icon="mdi-magnify" hide-details />
-          <v-select v-model="vehicleTypeFilter" density="compact" item-title="label" item-value="value"
-            placeholder="Filter by Type" clearable max-width="200" hide-details :items="typeOptions" />
+          <!-- <v-select v-model="vehicleTypeFilter" density="compact" item-title="label" item-value="value"
+            placeholder="Filter by Type" clearable max-width="200" hide-details :items="typeOptions" /> -->
         </v-row>
       </template>
 
@@ -37,8 +37,8 @@
     </v-dialog>
 
     <v-dialog v-model="dialog.createVehicle" v-if="vehicleType" width="450" persistent>
-      <VehicleForm :type="vehicleType" mode="add" :vehicle-data="selectedVehicleObject" @back="handleBackToSelection" @done="handleAddVehicleComplete"
-        :org="org" :site="props.site" @close:all="handleCloseAll" />
+      <VehicleForm :type="vehicleType" mode="add" :vehicle-data="selectedVehicleObject" @back="handleBackToSelection"
+        @done="handleAddVehicleComplete" :org="org" :site="props.site" @close:all="handleCloseAll" />
     </v-dialog>
 
     <!-- <v-dialog v-model="dialog.updateVehicle" v-if="vehicleType" width="450" persistent>
@@ -65,10 +65,23 @@
                           {{ formatVehicleStatus(value).label }}
                         </v-chip>
                       </template>
-                      <template #item.action="{ item }">
-                        <v-btn v-if="canDeleteVehicle && (item as TPlateNumber)?.status == 'active'" text="Delete" color="error" flat size="x-small" @click="handleDeleteVehicleAction(item as TPlateNumber)"/>
-                        <v-btn v-if="props.app === 'property_management_agency' && (item as TPlateNumber)?.status == 'pending'" text="Approve" color="success" flat size="x-small" @click="handleApproveVehicle(item as TPlateNumber)"/>
-                        <v-btn v-if=" (item as TPlateNumber)?.status == 'deleted'" text="Restore" color="orange" flat size="x-small" @click="handleRestoreVehicle(item as TPlateNumber)"/>
+                      <template #item.action="{ item: plateNumberItem, value }">
+                        <v-btn v-if="canDeleteVehicle && (plateNumberItem as TPlateNumber)?.status == 'active'"
+                          text="Delete" color="error" flat size="x-small"
+                          @click="handleDeleteVehicleAction(plateNumberItem as TPlateNumber)" />
+                        <v-btn
+                          v-if="props.app === 'property_management_agency' && (plateNumberItem as TPlateNumber)?.status == 'pending'"
+                          text="Approve" color="success" flat size="x-small"
+                          @click="handleApproveVehicle(plateNumberItem as TPlateNumber)" />
+                        <v-btn v-if="(plateNumberItem as TPlateNumber)?.status == 'deleted'" text="Restore"
+                          color="orange" flat size="x-small"
+                          @click="handleRestoreVehicle(plateNumberItem as TPlateNumber)" />
+                        <v-btn
+                          v-if="((plateNumberItem as TPlateNumber)?.type === 'whitelist' || (plateNumberItem as TPlateNumber)?.type === 'blocklist') && plateNumberItem?.status == 'active'"
+                          variant="outlined"
+                          :text="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'Whitelist' : 'Blocklist'"
+                          :color="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'primary' : 'red'" flat
+                          size="x-small" class="ml-1" @click="handleUpdateType(plateNumberItem as TPlateNumber)" />
                       </template>
                     </v-data-table>
                     <v-btn text="Add Vehicle Number" class="mt-6 text-capitalize" prepend-icon="mdi-plus"
@@ -81,7 +94,7 @@
               <v-col v-else-if="selectedVehicleObject[key]" cols="12">
                 <span class="d-flex ga-3 align-center"><strong>{{ label }}:</strong> {{ formatValues(key,
                   selectedVehicleObject[key])
-                }}</span>
+                  }}</span>
               </v-col>
             </template>
           </v-row>
@@ -89,16 +102,24 @@
       </DialogUpdateMoreAction>
     </v-dialog>
     <v-dialog v-model="dialog.deleteVehicle" persistent width="540">
-      <DialogDeleteConfirmation :loading="deletingVehicle"   :prompt-title="`Are you sure want to delete this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
+      <DialogDeleteConfirmation :loading="deletingVehicle"
+        :prompt-title="`Are you sure want to delete this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
         @delete="submitDelete" @close="closeDeleteDialog" />
     </v-dialog>
     <v-dialog v-model="dialog.approveVehicle" persistent width="540">
-      <DialogReusablePrompt :loading="approvingVehicle" :prompt-title="`Are you sure want to approve this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
-        @approve="submitApprove" @close="dialog.approveVehicle = false"  />
+      <DialogReusablePrompt :loading="approvingVehicle"
+        :prompt-title="`Are you sure want to approve this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
+        @proceed="submitApprove" @close="dialog.approveVehicle = false" />
     </v-dialog>
     <v-dialog v-model="dialog.restoreVehicle" persistent width="540">
-      <DialogReusablePrompt :loading="restoringVehicle" :prompt-title="`Are you sure want to restore this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
-        @proceed="submitRestore" @close="dialog.restoreVehicle = false"  />
+      <DialogReusablePrompt :loading="restoringVehicle"
+        :prompt-title="`Are you sure want to restore this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
+        @proceed="submitRestore" @close="dialog.restoreVehicle = false" />
+    </v-dialog>
+    <v-dialog v-model="dialog.updateVehicleType" persistent width="540">
+      <DialogReusablePrompt :loading="updatingType"
+        :prompt-title="`Are you sure want to update the type of this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
+        @proceed="submitUpdateType" @close="dialog.updateVehicleType = false" />
     </v-dialog>
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
@@ -147,7 +168,7 @@ const plateHeaders = [
 
 
 const { formatCamelCaseToWords, formatDate, debounce } = useUtils();
-const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle } = useVehicle();
+const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, updateVehicle } = useVehicle();
 
 const items = ref<Array<Record<string, any>>>([]);
 const page = ref(1);
@@ -160,6 +181,7 @@ const loading = ref(false);
 const deletingVehicle = ref(false);
 const approvingVehicle = ref(false);
 const restoringVehicle = ref(false);
+const updatingType = ref(false);
 
 const selectedVehicleId = ref<string | null>(null)
 const vehicleType = ref<TVehicleType | null>(null);
@@ -185,7 +207,8 @@ const dialog = reactive({
   deleteVehicle: false,
   showMoreActions: false,
   approveVehicle: false,
-  restoreVehicle: false
+  restoreVehicle: false,
+  updateVehicleType: false
 });
 
 
@@ -280,19 +303,24 @@ function handleEditVehicleAction() {
 }
 
 function handleDeleteVehicleAction(item: TPlateNumber) {
-  selectedPlateNumberObject.value = item || null;  
+  selectedPlateNumberObject.value = item || null;
   dialog.deleteVehicle = true;
 }
 
 function handleApproveVehicle(item: TPlateNumber) {
-  selectedPlateNumberObject.value = item || null;  
+  selectedPlateNumberObject.value = item || null;
   dialog.approveVehicle = true;
 }
 function handleRestoreVehicle(item: TPlateNumber) {
-  selectedPlateNumberObject.value = item || null;  
+  selectedPlateNumberObject.value = item || null;
   dialog.restoreVehicle = true;
 }
 
+function handleUpdateType(item: TPlateNumber) {
+  selectedPlateNumberObject.value = item || null;
+  dialog.updateVehicleType = true;
+}
+
 function handleSelectVehicleStatus(value: TVehicleType) {
   vehicleType.value = value;
   dialog.showSelection = false;
@@ -341,6 +369,7 @@ async function submitDelete() {
 
   const plateNumberId = selectedPlateNumberObject.value?._id;
   const type = selectedPlateNumberObject.value?.type as TVehicleType;
+  const recNo = selectedPlateNumberObject.value?.recNo;
   if (!plateNumberId) {
     showMessage("Invalid plate number selected for deletion.", "error");
     return;
@@ -348,12 +377,11 @@ async function submitDelete() {
 
   try {
     deletingVehicle.value = true;
-    const res = await deleteVehicle({ site: props.site, id: plateNumberId as string, recno: selectedVehicleObject.value.recno, type }
+    const res = await deleteVehicle({ site: props.site, recno: recNo, id: plateNumberId as string, type }
     );
     dialog.deleteVehicle = false;
-    selectedVehicleId.value = null
     showMessage(res.message, "success");
-    getVehiclesRefresh();
+    await getVehiclesRefresh();
   } catch (error: any) {
     console.error("Error deleting vehicle:", error);
     message.value = error.response._data.message;
@@ -366,24 +394,21 @@ async function submitDelete() {
 
 async function submitRestore() {
 
-  console.log("Submitting restore for plate number ID:", selectedPlateNumberObject.value);
-  const plateNumberId = selectedPlateNumberObject.value?._id;
-
+  const vehicleId = selectedPlateNumberObject.value?._id;
 
-  if (!plateNumberId) {
-    showMessage("Invalid plate number selected for restoration.", "error");
+  if (!vehicleId) {
+    showMessage("Invalid vehicle Id selected for restoration.", "error");
     return;
   }
 
   try {
-    restoringVehicle.value = true;  
+    restoringVehicle.value = true;
     // reactivate and restore will use the same endpoint, just with different payload
-    const res = await approveVehicle({ site: props.site, org: props.org, id: plateNumberId as string }
+    const res = await approveVehicle({ site: props.site, org: props.org, id: vehicleId as string }
     );
     dialog.restoreVehicle = false;
-    selectedVehicleId.value = null
     showMessage(res.message, "success");
-    getVehiclesRefresh();
+    await getVehiclesRefresh();
   } catch (error: any) {
     console.error("Error restoring vehicle:", error);
     const errMessage = error?.response?._data?.message || "Failed to restore vehicle";
@@ -395,6 +420,55 @@ async function submitRestore() {
 }
 
 
+async function submitUpdateType() {
+
+
+  const vehicleId = selectedPlateNumberObject.value?._id;
+  const type = selectedPlateNumberObject.value?.type as TVehicleType;
+  const recNo = selectedPlateNumberObject.value?.recNo;
+
+
+  if (!type) {
+    showMessage("Invalid vehicle type.", "error");
+    return;
+  }
+
+  // if(!recNo){
+  //   showMessage("Invalid vehicle record number.", "error");
+  //   return;
+  // }
+
+
+  const payload = {
+    site: props.site,
+    plateNumber: selectedPlateNumberObject.value?.plateNumber as string,
+    type: type === "whitelist" ? "blocklist" : "whitelist" as TVehicleType,
+    // recno: recNo
+  }
+
+
+  if (!vehicleId) {
+    showMessage("Invalid vehicle Id selected for updating type.", "error");
+    return;
+  }
+
+  try {
+    updatingType.value = true;
+    const res = await updateVehicle(vehicleId as string, payload);
+    dialog.updateVehicleType = false;
+    showMessage(res.message, "success");
+    await getVehiclesRefresh();
+  } catch (error: any) {
+    console.error("Error updating vehicle type:", error);
+    const errMessage = error?.response?._data?.message || "Failed to update vehicle type";
+    showMessage(errMessage, "error");
+    // message.value = error.response._data.message;
+  } finally {
+    updatingType.value = false;
+  }
+}
+
+
 async function submitApprove() {
 
   const plateNumberId = selectedPlateNumberObject.value?._id;
@@ -404,14 +478,13 @@ async function submitApprove() {
   }
 
   try {
-    approvingVehicle.value = true;  
+    approvingVehicle.value = true;
     const res = await approveVehicle({ site: props.site, org: props.org, id: plateNumberId as string }
 
     );
     dialog.approveVehicle = false;
-    selectedVehicleId.value = null
     showMessage(res.message, "success");
-    getVehiclesRefresh();
+    await getVehiclesRefresh();
   } catch (error: any) {
     console.error("Error approving vehicle:", error);
     const errMessage = error?.response?._data?.message || "Failed to approve vehicle";

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;