@7365admin1/layer-common 1.10.7 → 1.10.9

package/components/UnitPersonCard.vue

@@ -3,22 +3,26 @@
     <v-row>
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Name" />
-        <v-text-field :model-value="person.name" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+        <v-text-field :model-value="person.name" density="compact" :readonly="readOnly"
+          :class="{ 'no-pointer': readOnly }" />
       </v-col>
 
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Email Address" />
-        <v-text-field :model-value="person.email" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+        <v-text-field :model-value="person.email" density="compact" :readonly="readOnly"
+          :class="{ 'no-pointer': readOnly }" />
       </v-col>
 
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="NRIC" />
-        <v-text-field :model-value="person.nric" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+        <v-text-field :model-value="person.nric" density="compact" :readonly="readOnly"
+          :class="{ 'no-pointer': readOnly }" />
       </v-col>
 
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Mobile Number" />
-        <v-text-field :model-value="person.contact" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+        <v-text-field :model-value="person.contact" density="compact" :readonly="readOnly"
+          :class="{ 'no-pointer': readOnly }" />
       </v-col>
     </v-row>
 
@@ -26,25 +30,50 @@
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Other Documents and Files" :viewMode="readOnly" />
 
-        <p
-          v-if="!person.files?.length"
-          class="text-blue-darken-2 font-weight-thin text-caption ml-2 mt-5"
-        >
+        <p v-if="!person.files?.length" class="text-blue-darken-2 font-weight-thin text-caption ml-2 mt-5">
           **No documents to display**
         </p>
+        <v-list v-else dense nav class="mt-2">
+          <v-list-item v-for="file in person.files" :key="file.id" class="text-blue-darken-2"
+            :href="getFileUrl(file.id)" target="_blank">
+            <v-list-item-content>
+              <v-list-item-title class="d-flex align-center">
+                <span>
+                  <v-icon size="18" class="mr-1">mdi-file-document-outline</v-icon>
+                </span>
+                <span> {{ file.name }}</span>
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
 
-        <InputFileV2
-          v-if="person.files?.length"
-          :files="person.files"
-          :viewMode="true"
-        />
+      </v-col>
+
+      <v-col cols="0" md="4"></v-col>
+      <v-col v-if="prop.showOwnerOption" cols="12" md="4">
+        <v-checkbox :model-value="person.isOwner" readonly hide-details density="compact" @click="handleClick">
+          <template #label>
+            <span class="font-weight-bold text-subtitle-2 ml-2">Is Owner?</span>
+          </template>
+        </v-checkbox>
+
+        <span class="d-flex text-caption text-gray-5 ml-7">As owner, you will be receiving emails and updates
+                related to this unit.</span>
       </v-col>
     </v-row>
+
+    <v-dialog v-model="dialog.showPrompt" persistent width="540">
+      <DialogReusablePrompt :loading="loadingOwnerProcessing"
+        :prompt-title="`Are you sure want to ${person.isOwner ? 'remove' : 'add'} (${person.name}) as owner ?`"
+        @proceed="handleApprove(person)" @close="dialog.showPrompt = false" />
+    </v-dialog>
   </v-card-text>
 </template>
 
 <script setup lang="ts">
-defineProps({
+import useFile from '../composables/useFile';
+
+const prop = defineProps({
   person: {
     type: Object as PropType<TPeople>,
     required: true,
@@ -53,7 +82,38 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  showOwnerOption: {
+    type: Boolean,
+    default: false,
+  },
+  loadingOwnerProcessing: {
+    type: Boolean,
+    default: false,
+  }
+})
+
+const { getFileUrl } = useFile()
+
+const emit = defineEmits(['update:owner'])
+
+
+const dialog = reactive({
+  showPrompt: false,
 })
+
+
+
+
+
+const handleApprove = (person: TPeople) => {
+  dialog.showPrompt = false;
+  emit('update:owner', { person, isOwner: !person.isOwner })
+}
+
+const handleClick = () => {
+  dialog.showPrompt = true;
+}
+
 </script>
 
 <style lang="scss" scoped>

package/components/VisitorForm.vue

@@ -12,7 +12,7 @@
       <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>
         <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>
       </div>
@@ -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>
@@ -54,8 +54,9 @@
           <v-col v-if="shouldShowField('nric')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="NRIC" required />
-                <InputNRICNumber v-model="visitor.nric" density="comfortable" :rules="[requiredRule]"
+                <InputLabel class="text-capitalize" title="NRIC" :required="requireNRIC" />
+                <InputNRICNumber v-model="visitor.nric" density="comfortable"
+                  :rules="[requireNRIC ? requiredRule : () => true]" :key="currentAutofillSource + 'nric-key'"
                   @update:model-value="handleUpdateNRIC" :loading="fetchPersonByNRICPending" />
               </v-col>
             </v-row>
@@ -63,8 +64,9 @@
 
           <v-col v-if="shouldShowField('contact')" cols="12">
             <InputLabel class="text-capitalize" title="Phone Number" required />
-            <InputPhoneNumberV2 v-model="visitor.contact" :rules="[requiredRule]" density="comfortable" :key="currentAutofillSource + 'phone-key'"
-              :loading="fetchPersonByContactPending" @update:model-value="handleUpdateContact" />
+            <InputPhoneNumberV2 v-model="visitor.contact" :rules="[requiredRule]" density="comfortable"
+              :key="currentAutofillSource + 'phone-key'" :loading="fetchPersonByContactPending"
+              @update:model-value="handleUpdateContact" />
           </v-col>
 
           <v-col v-if="shouldShowField('deliveryType')" cols="12">
@@ -132,6 +134,7 @@
               :loading="levelsStatus === 'pending'" @update:model-value="handleChangeLevel" :rules="[requiredRule]" />
           </v-col>
 
+
           <v-col v-if="shouldShowField('unit')" cols="12">
             <InputLabel class="text-capitalize" title="Unit" required />
             <v-select v-model="visitor.unit" :items="unitsArray" density="comfortable" item-title="title"
@@ -139,6 +142,12 @@
               @update:model-value="handleUpdateUnit" />
           </v-col>
 
+          <v-col v-if="shouldShowField('unit')" cols="12">
+            <InputLabel class="text-capitalize" title="Registered Unit Company Name" required />
+            <v-text-field v-model.trim="registeredUnitCompanyName" density="comfortable"
+              :loading="buildingUnitDataPending" readonly class="no-pointer" />
+          </v-col>
+
           <v-col v-if="shouldShowField('remarks')" cols="12">
             <InputLabel class="text-capitalize" title="Remarks" />
             <v-textarea v-model="visitor.remarks" density="comfortable" :rows="3" no-resize />
@@ -146,7 +155,16 @@
 
           <v-col v-if="prop.type === 'contractor' && contractorStep === 2" cols="12">
             <PassInformation />
-            <EntryPassInformation v-if="entryPassSettings?.data?.settings?.nfcPass" v-model="passType" v-model:quantity="passQuantity" v-model:cards="passCards" :settings="entryPassSettings" :loading="entryPassSettingsPending" @scan:barcode="$emit('scan:barcode')" @scan:camera="$emit('scan:camera')" />
+            <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">
@@ -179,9 +197,9 @@
             prop.type === 'contractor' &&
             contractorStep > 1
           " tile block variant="text" class="text-none" size="48" @click="handleGoToPreviousPage" text="Back" />
-          <v-btn v-else-if="prop.mode === 'add'" tile block variant="text" class="text-none" size="48"
-            @click="backToSelection" text="Back to Selection" />
-          <v-btn v-else tile block variant="text" class="text-none" size="48" @click="close" text="Close" />
+          <v-btn v-else-if="prop.mode === 'add' || prop.mode === 'register'" tile block variant="text" class="text-none"
+            size="48" @click="backToSelection" text="Back to Selection" />
+          <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"
@@ -192,14 +210,56 @@
       </v-row>
     </v-toolbar>
 
-    <v-dialog v-model="dialog.vehicleNumberUsersList" v-if="vehicleNumberUserItems.length > 0" persistent max-width="600">
-      <SearchVehicleNumberUser :vehicle-number="visitor.plateNumber ?? ''" :vehicle-number-users-list="vehicleNumberUserItems"
-        @close="dialog.vehicleNumberUsersList = false" @update:people="handleAutofillDataViaVehicleNumber" />
+    <v-dialog v-model="dialog.vehicleNumberUsersList" v-if="vehicleNumberUserItems.length > 0" persistent
+      max-width="600">
+      <SearchVehicleNumberUser :vehicle-number="visitor.plateNumber ?? ''"
+        :vehicle-number-users-list="vehicleNumberUserItems" @close="dialog.vehicleNumberUsersList = false"
+        @update:people="handleAutofillDataViaVehicleNumber" />
+    </v-dialog>
+
+    <v-dialog v-model="dialog.showNonCheckedOutDialog" max-width="700" persistent>
+      <v-card :loading="loading.checkingOut">
+        <v-toolbar>
+          <v-toolbar-title>
+            <v-row no-gutters class="d-flex align-center justify-space-between">
+              <span class="font-weight-bold">
+                You have an unchecked-out vehicle for: {{ visitor.plateNumber }}
+              </span>
+            </v-row>
+          </v-toolbar-title>
+        </v-toolbar>
+
+        <v-card-text>
+
+          <v-list lines="three">
+            <v-list-item v-if="matchingPlateNumberNonCheckedOutArr.length > 0"
+              v-for="v in matchingPlateNumberNonCheckedOutArr" :key="v._id" class="cursor-pointer">
+              <v-list-item-title>
+                {{ v.plateNumber }} - {{ v.name }}
+              </v-list-item-title>
+
+              <v-list-item-subtitle>
+                Checked In at : {{ UTCToLocalTIme(v.checkIn) }}
+              </v-list-item-subtitle>
+
+              <template #append>
+                <v-btn size="x-small" class="text-capitalize" color="red" text="Checkout"
+                  :loading="loading.checkingOut && v?._id === prop.visitorData?._id"
+                  @click.stop="handleCheckout(v._id)" />
+              </template>
+
+            </v-list-item>
+          </v-list>
+
+        </v-card-text>
+      </v-card>
     </v-dialog>
   </v-card>
 </template>
 
 <script setup lang="ts">
+import useBuildingUnit from '../composables/useBuildingUnit';
+
 
 const prop = defineProps({
   type: {
@@ -215,7 +275,7 @@ const prop = defineProps({
     required: true,
   },
   mode: {
-    type: String as PropType<"add" | "edit">,
+    type: String as PropType<"add" | "edit" | "register">,
     default: "add",
   },
   visitorData: {
@@ -228,11 +288,12 @@ type AutofillSource = "nric" | "contact" | "vehicleNumber" | null;
 const currentAutofillSource = ref<AutofillSource>(null);
 
 
-const { requiredRule, debounce } = useUtils();
+const { requiredRule, debounce, UTCToLocalTIme } = useUtils();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
-const { createVisitor, typeFieldMap, contractorTypes } = useVisitor();
+const { createVisitor, typeFieldMap, contractorTypes, getVisitors, updateVisitor } = useVisitor();
 const { getBySiteId: getEntryPassSettingsBySiteId } = useSiteEntryPassSettings();
 const { findPersonByNRIC, findPersonByContact, searchCompanyList, findUsersByPlateNumber } = usePeople()
+const { getById: getUnitDataById } = useBuildingUnit()
 
 const emit = defineEmits([
   "back",
@@ -262,13 +323,20 @@ const visitor = reactive<Partial<TVisitorPayload>>({
 });
 
 const passType = ref("");
-const passQuantity = ref<number | null>(null);
+const passQuantity = ref<number | null>(1);
 const passCards = ref<string[]>([]);
 
+const registeredUnitCompanyName = ref('N/A')
+
 const dialog = reactive({
   vehicleNumberUsersList: false,
+  showNonCheckedOutDialog: false,
 });
 
+const loading = reactive({
+  checkingOut: false,
+})
+
 const validForm = ref(false);
 const formRef = ref<HTMLFormElement | null>(null);
 const processing = ref(false);
@@ -288,6 +356,8 @@ const blocksArray = ref<TDefaultOptionObj[]>([]);
 const levelsArray = ref<TDefaultOptionObj[]>([]);
 const unitsArray = ref<TDefaultOptionObj[]>([]);
 
+const matchingPlateNumberNonCheckedOutArr = ref<TVisitor[]>([])
+
 
 const vehicleNumberUserItems = ref<TPeople[]>([])
 
@@ -299,6 +369,10 @@ const shouldShowField = (fieldKey: keyof TVisitorPayload) => {
   }
 };
 
+const requireNRIC = computed(() => {
+  return prop.type !== 'walk-in' && prop.type !== 'guest';
+})
+
 const companyNames = ref<string[]>([])
 const companyAutofillDataArray = ref<{ companyName: string[], unit: string, block: number, level: string, unitName: string }[]>([])
 
@@ -417,7 +491,7 @@ watch(fetchPersonByContactReq, (obj) => {
       visitor.company = companyNames.value?.[0]
     }
     visitor.block = visitor.block ?? obj.block ?? ""
-    visitor.level = visitor.level ??  obj.level ?? ""
+    visitor.level = visitor.level ?? obj.level ?? ""
     visitor.unit = visitor.unit ?? obj.unit ?? ""
     visitor.nric = visitor.nric ?? obj.nric ?? ""
 
@@ -444,25 +518,70 @@ watch(fetchCompanyListReq, (arr) => {
   }
 })
 const {
-  data: fetchVehicleNumberUserReq,
-  refresh: fetchVehicleNumberUserRefresh,
-  pending: fetchVehicleNumberUserPending,
+  data: fetchVisitorListByVehicleNumberReq,
+  refresh: fetchVisitorListByVehicleNumberRefresh,
+  pending: fetchVisitorListByVehicleNumberPending,
 
-} = useLazyAsyncData(`fetch-vehicle-number-user-list`, () => {
+} = useLazyAsyncData(`fetch-visitor-list-by-vehicle-number`, () => {
   if (!visitor.plateNumber) return Promise.resolve(null)
-  return findUsersByPlateNumber(visitor.plateNumber)
+  return getVisitors({ page: 1, limit: 20, site: prop.site, plateNumber: visitor.plateNumber, checkedOut: false, status: "registered" })
 })
 
-watch(fetchVehicleNumberUserReq, (arr) => {
-  const arrayData = arr?.data
-  if (Array.isArray(arrayData)) {
-    vehicleNumberUserItems.value = arrayData;
-    if (arrayData.length > 0) {
-      dialog.vehicleNumberUsersList = true
-    }
+watch(fetchVisitorListByVehicleNumberReq, (arr: any) => {
+  const itemsArray = arr?.items || []
+  const isValidArray = Array.isArray(itemsArray)
+  matchingPlateNumberNonCheckedOutArr.value = isValidArray ? itemsArray : []
+  if(matchingPlateNumberNonCheckedOutArr.value.length > 0) {
+    dialog.showNonCheckedOutDialog = true;
+  } else {
+    dialog.showNonCheckedOutDialog = false;
   }
 })
 
+
+const debounceSearchVisitorsByPlateNumbers = debounce(() => {
+  if (!visitor.plateNumber) {
+    matchingPlateNumberNonCheckedOutArr.value = []
+    dialog.showNonCheckedOutDialog = false;
+    return;
+  }
+  fetchVisitorListByVehicleNumberRefresh();
+}, 300);
+
+watch(() => visitor.plateNumber, (newVal) => {
+  debounceSearchVisitorsByPlateNumbers();
+});
+
+
+
+async function handleCheckout(visitorId: string) {
+  if (!visitorId) {
+    errorMessage.value = "Invalid visitor ID. Cannot proceed with checkout.";
+    return;
+  }
+
+  try {
+    loading.checkingOut = true;
+    const res = await updateVisitor(visitorId as string, {
+      checkOut: new Date().toISOString(),
+    });
+    if (res) {
+      await fetchVisitorListByVehicleNumberRefresh(); 
+
+    }
+  } catch (error: any) {
+    const errorMessage = error?.response?._data?.message;
+    console.log("[ERROR]", error);
+    errorMessage.value =
+      errorMessage || "An error occurred while checking out the vehicle.";
+  } finally {
+    loading.checkingOut = false;
+  }
+}
+
+
+
+
 const debounceFetchCompany = debounce(async () => fetchCompanyListRefresh(), 200)
 
 watch(companyNameInput, async (val) => {
@@ -474,22 +593,10 @@ watch(companyNameInput, async (val) => {
 })
 
 
-const debounceSearchVehicleUsers = debounce(() => {
-  if (!visitor.plateNumber) {
-    vehicleNumberUserItems.value = [];
-    dialog.vehicleNumberUsersList = false;
-    return;
-  }
-  fetchVehicleNumberUserRefresh();
-}, 300); 
 
-watch(() => visitor.plateNumber, (newVal) => {
-  if(currentAutofillSource.value && currentAutofillSource.value !== "vehicleNumber") return;
-  debounceSearchVehicleUsers();
-});
 
 
-function handleAutofillDataViaVehicleNumber(item: TPeople){
+function handleAutofillDataViaVehicleNumber(item: TPeople) {
 
   currentAutofillSource.value = "vehicleNumber";
 
@@ -620,6 +727,25 @@ watch(
 )
 
 
+const { data: buildingUnitData, refresh: refreshBuildingUnitData, pending: buildingUnitDataPending } = useLazyAsyncData(`building-unit-data-${visitor.unit}`, () => {
+  if (!visitor.unit) return Promise.resolve(null);
+  return getUnitDataById(visitor.unit);
+})
+
+// trigger refresh of building unit data when unit changes, to get the latest unit name in case there are changes in the backend
+watch(() => visitor.unit, () => {
+  if (visitor.unit) {
+    refreshBuildingUnitData();
+  } else {
+    registeredUnitCompanyName.value = 'N/A';
+  }
+})
+
+watch(buildingUnitData, (newVal: any) => {
+  registeredUnitCompanyName.value = newVal?.data?.buildingUnit?.companyName || 'N/A';
+})
+
+
 function handleChangeBlock(value: any) {
   visitor.level = "";
   visitor.unit = "";
@@ -666,7 +792,7 @@ function close() {
 function formatVisitorType(type: TVisitorType): string {
   switch (type) {
     case "guest":
-      return "Guest";
+      return "Drive-In";
     case "contractor":
       return "Contractor";
     case "delivery":
@@ -715,15 +841,21 @@ async function submit() {
         };
       }
     }
-
-    if (prop.type === "contractor") {
-      // contractor type logic payload
-      payload = {
-        ...payload,
-        members: visitor.members,
-      };
+  } else if (prop.mode === 'register') {
+    payload = {
+      ...payload,
+      status: "registered",
     }
-  } else if (prop.mode === "edit") {
+  }
+
+
+
+  if (prop.type === "contractor") {
+    // contractor type logic payload
+    payload = {
+      ...payload,
+      members: visitor.members,
+    };
   }
   try {
     const res = await createVisitor(payload);
@@ -753,10 +885,19 @@ watch(
 onMounted(() => {
   contractorStep.value = 1;
   currentAutofillSource.value = null;
+
+  if (prop.mode === 'register' && prop.visitorData) {
+    console.log('Register mode, prefill visitor data', prop.visitorData?.plateNumber)
+    visitor.plateNumber = prop.visitorData?.plateNumber || ""
+  }
 });
 </script>
 <style scoped>
 .button-outline-class {
   border: 1px solid rgba(var(--v-theme-primary));
 }
+
+.no-pointer {
+  pointer-events: none;
+}
 </style>

package/components/VisitorFormSelection.vue

@@ -3,7 +3,7 @@
     <v-toolbar>
       <v-row no-gutters class="fill-height px-6" align="center">
         <span class="font-weight-bold text-h5 text-capitalize">
-          Add Visitor
+          {{ mode }} Visitor
         </span>
       </v-row>
     </v-toolbar>
@@ -11,7 +11,7 @@
     <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
       <span class="text-subtitle-2 w-100 font-weight-medium d-flex justify-center mb-3">Please Select Visitor Type</span>
       <template v-for="item in selection" :key="item.value">
-        <v-btn color="primary-button" block variant="flat" rounded="md" size="48" :text="item.label" @click="select(item.value)" class="my-2 text-capitalize text-subtitle-2" />
+        <v-btn v-if="showSelection(item)" color="primary-button" block variant="flat" rounded="md" size="48" :text="item.label" @click="select(item.value)" class="my-2 text-capitalize text-subtitle-2" />
       </template>
     </v-card-text>
 
@@ -36,6 +36,10 @@
 
 <script setup lang="ts">
 const prop = defineProps({
+  mode: {
+    type: String as PropType<"add" | "edit" | "register">,
+    default: "add",
+  }
 });
 
 const emit = defineEmits(['cancel', 'select']);
@@ -50,4 +54,11 @@ function cancel() {
 function select(value: string) {
   emit("select", value);
 }
+
+function showSelection(item: any) {
+  if(item.value === 'walk-in' && prop.mode === 'register') {
+    return false ;
+  } return true;
+  
+}
 </script>