@7365admin1/layer-common 1.11.54 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 2.0.0
+
+### Major Changes
+
+- f4ee57d: Refactor Building Management Module
+
 ## 1.11.54
 
 ### Patch Changes

package/components/BuildingForm.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">
-          {{ prop.mode }} Block
+          {{ prop.mode }} Block {{ (prop.mode === "edit" && building.block) ? `- ${building.block}` : "" }}
         </span>
       </v-row>
     </v-toolbar>
@@ -12,21 +12,21 @@
         <v-row no-gutters class="px-6 pt-4">
           <v-col cols="12" class="mt-2">
             <v-row no-gutters>
-              <InputLabel class="text-capitalize font-weight-bold" title="Name" required />
+              <InputLabel class="text-capitalize font-weight-bold" title="Block Name" required />
               <v-col cols="12">
                 <v-text-field v-model="building.name" density="comfortable" :rules="[requiredRule]"></v-text-field>
               </v-col>
             </v-row>
           </v-col>
 
-          <v-col cols="12">
+          <v-col v-if="prop.mode === 'add'" cols="12">
             <v-row>
               <v-col cols="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel class="text-capitalize font-weight-bold" title="Block" required />
+                  <InputLabel class="text-capitalize font-weight-bold" title="Block No." required />
                   <v-col cols="12">
                     <v-select v-model.number="building.block" :items="blocks" item-title="label" item-value="value"
-                      density="comfortable" :disabled="prop.mode === 'edit'" :rules="[
+                      density="comfortable" :rules="[
                         requiredRule,
                         () =>
                           (building.block && building.block > 0) ||
@@ -43,7 +43,7 @@
 
               <v-col cols="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel class="text-capitalize font-weight-bold" title="Levels" required />
+                  <InputLabel class="text-capitalize font-weight-bold" title="No. of Levels" required />
                   <v-col cols="12">
                     <v-text-field v-model.number="buildingLevels" density="comfortable" :rules="[requiredRule]"
                       type="number" @update:model-value="setBuildingLevels()"></v-text-field>
@@ -53,24 +53,33 @@
             </v-row>
           </v-col>
 
-          <v-col v-if="buildingLevels" cols="12">
+          <!-- <v-col v-if="buildingLevels &&" cols="12">
             <v-row justify="center">
               <v-col cols="6">
                 <v-btn block color="primary" variant="text" class="text-none font-weight-bold" text="Set level labels"
                   @click="show = !show"></v-btn>
               </v-col>
             </v-row>
-          </v-col>
+          </v-col> -->
+        </v-row>
+
+        <v-row no-gutters v-if="building.levels.length > 0 || newLevelsArray.length > 0" class="mt-2">
+          <InputLabel class="text-capitalize font-weight-bold px-6 mb-2" title="Levels" />
         </v-row>
 
         <v-expand-transition>
-          <v-row v-show="show" no-gutters class="px-6">
+          <v-row v-if="prop.mode === 'edit'" no-gutters class="px-6">
             <template v-for="(level, levelIndex) in building.levels" :key="levelIndex">
               <v-col cols="12">
                 <v-row no-gutters>
-                  <InputLabel class="text-capitalize font-weight-bold" :title="`Level ${levelIndex + 1}`" />
-                  <v-col cols="12">
-                    <v-text-field v-model.trim="building.levels[levelIndex]" density="comfortable"></v-text-field>
+                  <v-col :cols="prop.mode === 'edit' ? 10 : 12">
+                    <v-text-field v-model.trim="building.levels[levelIndex].name" density="comfortable"></v-text-field>
+                  </v-col>
+                  <v-col v-if="prop.mode === 'edit'" cols="2" class="d-flex align-center pb-5 justify-end">
+                    <v-btn icon variant="text" color="error" :disabled="disable"
+                      @click="openDeleteLevelPrompt(levelIndex)">
+                      <v-icon icon="mdi-trash-can-outline"></v-icon>
+                    </v-btn>
                   </v-col>
                 </v-row>
               </v-col>
@@ -78,9 +87,43 @@
           </v-row>
         </v-expand-transition>
 
+
+
+        <v-row no-gutters class="px-6 w-100">
+          <v-row no-gutters v-for="(newLevelsItem, index) in newLevelsArray" :key="index" :cols="12" class="w-100">
+            <v-text-field v-model.trim="newLevelsArray[index]" density="comfortable"></v-text-field>
+            <v-col cols="2" class="d-flex align-center pb-5 justify-end">
+              <v-btn icon variant="text" color="error" @click="newLevelsArray.splice(index, 1)">
+                <v-icon icon="mdi-trash-can-outline"></v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-row>
+
+        <v-row v-if="prop.mode === 'edit'" no-gutters class="px-6 w-100">
+          <v-col cols="10">
+            <v-text-field v-model.trim="activeNewLevelInput" density="comfortable" class="w-100"
+              placeholder="Add new level" @click="addNewLevelErrorMessage = ''"></v-text-field>
+          </v-col>
+          <v-col cols="2" class="d-flex align-center pb-5 justify-end">
+            <v-btn icon variant="text" @click="addNewLevel()">
+              <v-icon icon="mdi-plus"></v-icon>
+            </v-btn>
+          </v-col>
+        </v-row>
+        <v-row v-if="prop.mode === 'edit'" no-gutters class="px-6 mb-2">
+          <span class="text-caption text-error">
+            {{ addNewLevelErrorMessage }}
+          </span>
+        </v-row>
+
+
+
+
         <v-col cols="12" class="px-6">
-          <InputLabel class="text-capitalize" title="Building Floor plan" />
-          <InputFileV2 v-model="building.buildingFiles" :multiple="true" accept="*"  :max-length="10" title="Upload Files" />
+          <InputLabel class="text-capitalize font-weight-bold" title="Building Floor plan" />
+          <InputFileV2 v-model="building.buildingFiles" :multiple="true" accept="*" :max-length="10"
+            title="Upload Files" />
         </v-col>
 
         <v-col cols="12" class="mt-2">
@@ -121,10 +164,40 @@
         </v-col>
       </v-row>
     </v-toolbar>
+
+    <ConfirmDialog v-model="confirmDeleteLevelDialog" :loading="loading.deletingLevel" width="450" persistent>
+      <template #title>
+        Delete Level
+      </template>
+
+      <template #description>
+        Are you sure you want to delete {{ levelPendingDeleteName || "this level" }}?
+      </template>
+
+      <template #footer>
+        <v-row no-gutters class="w-100">
+          <v-col cols="6">
+            <v-btn tile block size="48" variant="text" class="text-none" :disabled="loading.deletingLevel"
+              @click="closeDeleteLevelPrompt">
+              Cancel
+            </v-btn>
+          </v-col>
+
+          <v-col cols="6">
+            <v-btn tile block size="48" variant="flat" color="error" class="text-none" :loading="loading.deletingLevel"
+              :disabled="loading.deletingLevel" @click="confirmDeleteLevel">
+              Delete
+            </v-btn>
+          </v-col>
+        </v-row>
+      </template>
+    </ConfirmDialog>
   </v-card>
 </template>
 
 <script setup lang="ts">
+import InputLabel from './InputLabel.vue';
+
 const prop = defineProps({
   site: {
     type: String,
@@ -152,6 +225,7 @@ const prop = defineProps({
 
 const { getSiteById } = useSite();
 const { getFileById } = useFile();
+const { deleteById, batchUpdateLevels } = useBuildingLevel();
 
 const site = ref<TSite | null>(null);
 
@@ -184,21 +258,64 @@ const blocks = computed(() => {
   return formattedArray;
 });
 
-const emit = defineEmits(["cancel", "success", "success:create-more"]);
+const emit = defineEmits(["cancel", "success", "success:create-more", "refresh"]);
 
 const validForm = ref(false);
 
 const buildingLevels = ref(0);
+const newLevelsArray = ref<string[]>([])
+const activeNewLevelInput = ref<string>("")
+const addNewLevelErrorMessage = ref("");
+
+const loading = reactive({
+  deletingLevel: false,
+});
 
 const show = ref(false);
+const confirmDeleteLevelDialog = ref(false);
+const levelPendingDeleteIndex = ref<number | null>(null);
+const levelActionLoading = ref(false);
+
+const levelPendingDeleteName = computed(() => {
+  if (levelPendingDeleteIndex.value === null) return "";
+  return building.value.levels[levelPendingDeleteIndex.value]?.name ?? "";
+});
 
 function setBuildingLevels() {
-  building.value.levels.length = 0;
+  newLevelsArray.value = [];
   for (let index = 0; index < buildingLevels.value; index++) {
-    building.value.levels.push(`Lvl${index + 1}`);
+    newLevelsArray.value.push(`Lvl${index + 1}`);
   }
 }
 
+// function addNewLevels() {
+//   const levelsToAdd = newLevelsInput.value
+//     .split(/\r?\n|,/)
+//     .map((item) => item.trim())
+//     .filter(Boolean);
+
+//   if (!levelsToAdd.length) return;
+//   buildingLevels.value = building.value.levels.length;
+//   newLevelsInput.value = "";
+// }
+
+function openDeleteLevelPrompt(levelIndex: number) {
+  levelPendingDeleteIndex.value = levelIndex;
+  confirmDeleteLevelDialog.value = true;
+}
+
+function closeDeleteLevelPrompt() {
+  confirmDeleteLevelDialog.value = false;
+  levelPendingDeleteIndex.value = null;
+}
+
+async function deleteLevelPlaceholder(levelName: string, levelIndex: number) {
+  // Placeholder integration for future delete-level API call.
+  return { success: true, levelName, levelIndex };
+}
+
+
+
 const building = ref<TBuilding>({
   site: "",
   name: "",
@@ -207,13 +324,17 @@ const building = ref<TBuilding>({
   buildingFiles: []
 });
 
+const initialBuildingLevels = ref([])
+
 // Normalize buildingFiles: extract IDs for InputFileV2, keep names in a separate map
 const buildingFilesNames = ref<Record<string, string>>({});
 
 building.value.site = prop.site;
 if (prop.mode === "edit") {
   building.value = JSON.parse(JSON.stringify(prop.building));
+  building.value.levels = building.value.levels.map((level: any) => ({ _id: level._id, name: level.name }));  //temporary
   buildingLevels.value = building.value.levels.length;
+  initialBuildingLevels.value = JSON.parse(JSON.stringify(building.value.levels));
 
   const rawFiles = building.value.buildingFiles as any[];
   if (rawFiles?.length && typeof rawFiles[0] === 'object') {
@@ -256,16 +377,34 @@ async function submit() {
   try {
     if (prop.mode === "add") {
       const buildingPayload = { ...building.value };
-      buildingPayload.buildingFiles = (building.value.buildingFiles as string[] || []).map((id) => ({ id, name: buildingFilesNames.value[id] ?? "" }));
-      await createBuilding(buildingPayload);
+
+      let payload: TBuildingPayload = {
+        site: buildingPayload.site,
+        name: buildingPayload.name,
+        block: buildingPayload.block,
+        levels: [...newLevelsArray.value],
+        buildingFiles: (building.value.buildingFiles as string[] || []).map((id) => ({ id, name: buildingFilesNames.value[id] ?? "" }))
+      };
+
+      await createBuilding(payload);
     }
 
     if (prop.mode === "edit") {
+
+      console.log('Updating building with levels:', building.value.levels);
+
+      if(JSON.stringify(initialBuildingLevels.value) !== JSON.stringify(building.value.levels)) {
+          await batchUpdateLevels(building.value.levels as { _id: string; name: string }[]);
+      }
+
+      const newLevels = [...newLevelsArray.value, ...(activeNewLevelInput.value.trim() ? [activeNewLevelInput.value.trim()] : [])];
+      
       await updateById(building.value._id ?? "", {
         name: building.value.name,
         block: building.value.block,
-        levels: building.value.levels,
-        buildingFiles: (building.value.buildingFiles as string[] || []).map((id) => ({ id, name: buildingFilesNames.value[id] ?? "" }))
+        // levels: building.value.levels,
+        buildingFiles: (building.value.buildingFiles as string[] || []).map((id) => ({ id, name: buildingFilesNames.value[id] ?? "" })),
+        ...(newLevels.length > 0 ? { levels: newLevels } : {})
       });
     }
 
@@ -288,6 +427,49 @@ async function submit() {
   }
 }
 
+
+const addNewLevel = () => {
+  if (!activeNewLevelInput.value.trim()) {
+    addNewLevelErrorMessage.value = "Please fill in the current new level before adding another.";
+    return;
+  }
+  newLevelsArray.value.push(activeNewLevelInput.value);
+  activeNewLevelInput.value = "";
+}
+
+const confirmDeleteLevel = async () => {
+  const levelIndex = levelPendingDeleteIndex.value;
+  if (levelIndex === null) {
+    console.error("No level selected for deletion.");
+    return;
+  }
+  const levelId = building.value.levels[levelIndex]._id;
+  if (!levelId) {
+    console.error("Level ID is missing. Cannot delete level.");
+    return;
+  }
+
+  try {
+    loading.deletingLevel = true;
+    await deleteById(levelId);
+    const index = building.value.levels.findIndex(level => level._id === levelId);
+    closeDeleteLevelPrompt();
+    if (index !== -1) {
+      building.value.levels.splice(index, 1);
+      buildingLevels.value = building.value.levels.length;
+    }
+    emit('refresh')
+  } catch (error: any) {
+    console.error("Failed to delete level:", error);
+    const message = error.response?._data?.message || "Failed to delete level";
+    message.value = message;
+  } finally {
+    loading.deletingLevel = false;
+  }
+
+
+}
+
 watch(buildingLevels, (newVal) => {
   setTimeout(() => {
     show.value = newVal > 0 && !!newVal;

package/components/BuildingManagement/buildings.vue

@@ -43,12 +43,12 @@
     <v-dialog v-model="createDialog" width="450" persistent>
       <BuildingForm :site="site" :blocks="items" @cancel="createDialog = false" @success="successCreate()"
         @success:create-more="getBuildings()" />
-    </v-dialog>
+    </v-dialog> 
 
     <!-- Edit Dialog -->
     <v-dialog v-model="editDialog" width="450" persistent>
       <BuildingForm :site="site" :blocks="items" mode="edit" @cancel="editDialog = false" @success="successUpdate()"
-        :building="selectedBuilding" />
+        :building="selectedBuilding" @refresh="getBuildings()" />
     </v-dialog>
 
     <!-- Preview Dialog -->

package/components/BuildingManagement/units.vue

@@ -103,7 +103,7 @@ const props = defineProps({
       },
        {
         title: "Level",
-        value: "level",
+        value: "level.name",
       },
       {
         title: "Block",

package/components/BuildingUnitFormAdd.vue

@@ -31,12 +31,12 @@
                       item-value="_id" v-model:search="searchBuilding" :hide-no-data="false" density="comfortable"
                       :rules="[requiredRule]" variant="outlined">
                       <template v-slot:item="{ props: itemProps, item }">
-                        <v-list-item v-bind="itemProps" :title="`Block ${item?.raw?.block} (${item?.raw?.name})`">
+                        <v-list-item v-bind="itemProps" :title="item?.raw?.name">
 
                         </v-list-item>
                       </template>
                       <template v-slot:selection="{ item }">
-                        {{ buildingUnit.building && `Block ${item?.raw?.block} (${item?.raw?.name})`  }}
+                        {{ buildingUnit.building && `${item?.raw?.name}`  }}
                       </template>
                     </v-autocomplete>
                   </v-col>
@@ -47,7 +47,7 @@
                 <v-row no-gutters>
                   <InputLabel class="text-capitalize" title="Level" required />
                   <v-col cols="12">
-                    <v-select v-model="buildingUnit.level" :items="buildingLevels" density="comfortable"
+                    <v-select v-model="buildingUnit.level" :items="buildingLevels" item-title="name" item-value="_id" density="comfortable"
                       :rules="[requiredRule]"></v-select>
                   </v-col>
                 </v-row>
@@ -275,7 +275,7 @@ watchEffect(() => {
 
 const buildingUnitQty = ref(1);
 
-const buildingUnit = ref<TBuildingUnit>({
+const buildingUnit = ref<TBuildingUnitPayload>({
   site: "",
   name: "Unit",
   building: "",

package/components/BuildingUnitFormEdit.vue

@@ -29,10 +29,11 @@
 
             <v-col cols="12" md="6" lg="4" class="mt-2">
               <v-row no-gutters>
-                <InputLabel class="text-capitalize font-weight-bold" title="Level" required />
+                <InputLabel class="text-capitalize font-weight-bold" title="Level"/>
                 <v-col cols="12">
-                  <v-select v-model="buildingUnit.level" :items="buildingLevels" density="comfortable"
-                    :rules="[requiredRule]"></v-select>
+                  <!-- <v-select v-model="buildingUnit.level" :items="buildingLevels" readonly item-title="name" class="no-pointer" item-value="_id" density="comfortable"
+                    :rules="[requiredRule]"></v-select> -->
+                    <v-text-field :model-value="buildingUnit.level.name" density="comfortable" readonly class="no-pointer" />
                 </v-col>
               </v-row>
             </v-col>
@@ -43,7 +44,7 @@
                   <v-row no-gutters>
                     <InputLabel class="text-capitalize font-weight-bold" title="Block Name" />
                     <v-col cols="12">
-                      <v-text-field :model-value="`Block ${buildingUnit.block} (${buildingUnit.buildingName})`"
+                      <v-text-field :model-value="buildingUnit.buildingName"
                         density="comfortable" readonly class="no-pointer"></v-text-field>
                     </v-col>
                   </v-row>
@@ -328,7 +329,10 @@ const buildingUnit = ref({
   ownerName: "",
   building: "",
   buildingName: "",
-  level: 0,
+  level: {
+    _id: "",
+    name: "",
+  },
   // category: "",
   block: null,
   status: "active",
@@ -457,13 +461,13 @@ const selectedBuilding = computed(() => {
   return buildings.value.find((b) => b.value === buildingUnit.value.building);
 });
 
-const buildingLevels = computed(() => {
-  const levels = selectedBuilding.value?.levels ?? [];
-  return levels.map((level: string) => ({
-    title: level,
-    value: level,
-  }))
-});
+// const buildingLevels = computed(() => {
+//   const levels = selectedBuilding.value?.levels ?? [];
+//   return levels.map((level: { name: string; _id: string }) => ({
+//     name: level.name,
+//     value: level._id,
+//   }))
+// });
 
 const disable = ref(false);
 
@@ -500,7 +504,7 @@ async function submit() {
 
     await updateById(buildingUnit.value._id ?? "", {
       name: buildingUnit.value.name,
-      level: buildingUnit.value.level,
+      level: buildingUnit.value.level._id,
       // category: buildingUnit.value.category,
       buildingUnitFiles: (buildingUnit.value.buildingUnitFiles as string[] || []).map((id) => ({ id, name: buildingUnitFilesNames.value[id] ?? "" })),
       companyName: buildingUnit.value.companyName,

package/components/OnlineFormConfigurationForm.vue

@@ -267,7 +267,7 @@ const { create: _add, updateById: _update, getAll: _getAll } = useOnlineFormConf
 
 const { data: existingFormsData } = useLazyAsyncData(
   `online-form-configurations-filter-${siteId}-${Date.now()}`,
-  () => _getAll({ site: siteId, org: orgId, limit: 100 })
+  () => _getAll({ site: siteId, org: orgId, status: "active", limit: 100 })
 );
 
 const availableTemplateNames = computed(() => {

package/components/OnlineFormsConfiguration.vue

@@ -32,6 +32,16 @@
             >
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
+            <v-text-field
+              v-model="search"
+              density="compact"
+              variant="outlined"
+              placeholder="Search..."
+              prepend-inner-icon="mdi-magnify"
+              clearable
+              hide-details
+              style="width: 220px; margin-left: 12px;"
+            />
           </template>
 
           <template #append>
@@ -263,6 +273,8 @@
 <script setup lang="ts">
 import OnlineFormConfigurationForm from "./OnlineFormConfigurationForm.vue";
 import OnlineFormRenderPreview from "./OnlineFormRenderPreview.vue";
+import useFile from "../composables/useFile";
+import useOnlineFormConfiguration from "../composables/useOnlineFormConfiguration";
 
 definePageMeta({
   middleware: ["01-auth", "02-org"],
@@ -306,13 +318,13 @@ const props = defineProps({
   },
 });
 
-const { headerSearch } = useLocal();
 const { getAll: _getAll, deleteById: _deleteById } = useOnlineFormConfiguration();
 const { getFileUrl } = useFile();
 
 const page = ref(1);
 const pages = ref(0);
 const pageRange = ref("-- - -- of --");
+const search = ref("");
 
 const message = ref("");
 const messageSnackbar = ref(false);
@@ -333,7 +345,8 @@ const {
 } = useLazyAsyncData("get-all-online-form-configuration", () =>
   _getAll({
     page: page.value,
-    search: headerSearch.value,
+    search: search.value,
+    status: "active",
     org: orgId,
     site: siteId,
   })
@@ -341,6 +354,15 @@ const {
 
 const loading = computed(() => getAllReqStatus.value === "pending");
 
+let searchDebounce: ReturnType<typeof setTimeout> | null = null;
+watch(search, () => {
+  if (searchDebounce) clearTimeout(searchDebounce);
+  searchDebounce = setTimeout(() => {
+    page.value = 1;
+    getOnlineFormConfigurations();
+  }, 400);
+});
+
 watchEffect(() => {
   if (getOnlineFormConfigurationReq.value) {
     items.value = getOnlineFormConfigurationReq.value.items;

package/components/VehicleForm.vue

@@ -34,20 +34,25 @@
 
           <v-col v-if="shouldShowField('block')" cols="12">
             <InputLabel class="text-capitalize" title="Block" required />
-            <v-autocomplete v-model="vehicle.block" :items="blocksArray" item-value="value" item-title="title"
-              @update:model-value="handleChangeBlock" density="comfortable" :rules="[requiredRule]" />
+            <v-autocomplete v-model="vehicle.block" :items="blocksArray" autocomplete="off"
+              :key="blockListDataPending ? 'block-list-pending' : 'block-list-ready'" :loading="blockListDataPending"
+              item-value="value" item-title="title" @update:model-value="handleChangeBlock" density="comfortable"
+              :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('level')" cols="12">
             <InputLabel class="text-capitalize" title="Level" required />
-            <v-autocomplete v-model="vehicle.level" :items="levelsArray" density="comfortable" :disabled="!vehicle.block"
-              @update:model-value="handleChangeLevel" :rules="[requiredRule]" />
+            <v-autocomplete v-model="vehicle.level" :items="levelsArray" autocomplete="off"
+              :key="levelListDataPending ? 'level-list-pending' : 'level-list-ready'" :loading="levelListDataPending"
+              density="comfortable" :disabled="!vehicle.block" @update:model-value="handleChangeLevel"
+              :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('unit')" cols="12">
             <InputLabel class="text-capitalize" title="Unit" required />
-            <v-autocomplete v-model="vehicle.unit" :items="unitsArray" density="comfortable" :disabled="!vehicle.level"
-              :rules="[requiredRule]" />
+            <v-autocomplete v-model="vehicle.unit" :items="unitsArray" autocomplete="off"
+              :key="unitListDataPending ? 'unit-list-pending' : 'unit-list-ready'" :loading="unitListDataPending"
+              density="comfortable" :disabled="!vehicle.level" :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('nric')" cols="12">
@@ -278,6 +283,7 @@ const { requiredRule, formatDateISO8601, debounce } = useUtils();
 const { addVehicle, getCustomSeasonPassTypes, updateVehicle, formatVehicleStatus } = useVehicle();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
 const { findPersonByNRICMultipleResult, getPeopleByUnit } = usePeople();
+const { getBlocksSelection, getLevelsSelection, getUnitSelection } = useBuilding();
 
 const emit = defineEmits(['back', 'select', 'done', 'error', 'close', 'close:all']);
 
@@ -313,6 +319,7 @@ const seasonPassTypeArray = ref<{ title: string, value: string }[]>([]);
 
 const matchingPeople = ref<Partial<TPeople>[]>([]);
 const showMatchingPeopleDialog = ref(false);
+const prefillingRecords = ref(false);
 const checkingNRIC = ref(false);
 const checkingUnit = ref(false);
 
@@ -367,62 +374,80 @@ if (prop.vehicleData) {
 }
 
 
-const { data: siteData, refresh: refreshSiteData } = useLazyAsyncData(
-  `fetch-site-data-${prop.site}`,
-  async () => await getSiteById(prop.site));
 
-const { data: levelsData, refresh: refreshLevelsData } = useLazyAsyncData(
-  `fetch-levels-data-${prop.site}-${vehicle.block}`,
+const {
+  data: blocksListData,
+  refresh: refreshBlockListData,
+  status: blocksListStatus,
+  pending: blockListDataPending,
+} = useAsyncData(`vehicle-fetch-block-list-data-${prop.site}`, () =>
+  getBlocksSelection({ siteId: prop.site }), { watch: [() => prop.site], deep: true }
+);
+
+
+const {
+  data: levelsData,
+  refresh: refreshLevelsData,
+  status: levelsStatus,
+  pending: levelListDataPending,
+} = useAsyncData(
+  `vehicle-fetch-levels-data-${prop.site}-${vehicle.block}`,
   async () => {
-    if (!vehicle.block) return Promise.resolve(null);;
-    return await getSiteLevels(prop.site, { block: Number(vehicle.block) })
-  });
+    if (!vehicle.block) return Promise.resolve(null);
+    // return await getSiteWithLevels(prop.site, { block: Number(vehicle.block) });
+    return await getLevelsSelection({ siteId: prop.site, blockId: vehicle.block._id ? vehicle.block._id : vehicle.block });
+  }, { watch: [() => vehicle.block], deep: true }
+);
 
-const { data: unitsData, refresh: refreshUnitsData } = useLazyAsyncData(
-  `fetch-units-data-${prop.site}-${vehicle.level}`,
+const {
+  data: unitsData,
+  refresh: refreshUnitsData,
+  status: unitsStatus,
+  pending: unitListDataPending,
+} = useAsyncData(
+  `vehicle-fetch-units-data-${prop.site}-${vehicle.level}`,
   async () => {
-    if (!vehicle.level) return Promise.resolve(null);;
-    return await getSiteUnits(prop.site, Number(vehicle.block), vehicle.level)
-  });
+    if (!vehicle.level) return Promise.resolve(null);
+    return await getUnitSelection({ siteId: prop.site, block: vehicle.block._id ? vehicle.block._id : vehicle.block, level: vehicle.level._id ? vehicle.level._id : vehicle.level });
+  }, { watch: [() => vehicle.level], deep: true }
+);
 
 
 const { data: seasonPassTypeData, refresh: refreshSeasonPassTypeData } = useLazyAsyncData(
-  `fetch-season-pass-type-data-${prop.site}`,
+  `vehicle-fetch-season-pass-type-data-${prop.site}`,
   async () => await getCustomSeasonPassTypes(prop.site));
 
 
 watch(
-  siteData,
-  (newVal) => {
-    const siteDataValue = newVal as any;
-    if (siteDataValue) {
-      const numberOfBlocks = siteDataValue.metadata?.block || 0;
-      for (let i = 1; i <= numberOfBlocks; i++) {
-        blocksArray.value.push({
-          title: `Block ${i}`,
-          value: i
-        });
-      }
-
-    } else {
+  [blocksListData],
+  () => {
+    if (blocksListStatus.value === 'pending') {
       blocksArray.value = [];
+      return;
     }
-  }, { immediate: true });
 
+    const arr = Array.isArray(blocksListData.value?.data) ? blocksListData.value?.data : [];
+    blocksArray.value = arr.map((block: any) => ({
+      title: block.name,
+      value: block._id,
+    }));
+  },
+  { immediate: true, deep: true }
+)
 
-watch(
-  levelsData,
-  (newVal: any) => {
-    if (newVal) {
-      const arr = newVal.levels || [];
-      levelsArray.value = arr?.map((level: any) => ({
-        title: level,
-        value: level
-      }));
-    } else {
-      levelsArray.value = [];
-    }
-  }, { immediate: true });
+watch([levelsData], () => {
+  if (levelsStatus.value === 'pending') {
+    levelsArray.value = [];
+    return;
+  }
+
+  const arr = Array.isArray(levelsData.value?.data) ? levelsData.value?.data : [];
+  const mappedLevels = arr.map((level: any) => ({
+    title: level.name,
+    value: level._id,
+  }));
+  levelsArray.value = mappedLevels;
+}, { immediate: true, deep: true })
 
 watch(
   unitsData,
@@ -710,7 +735,7 @@ function selectPeopleRecord(record: TPeople) {
 
 
 async function checkPeopleById() {
-  if (!vehicle.unit || prop.mode === 'edit') return;
+  if (!vehicle.unit || prop.mode === 'edit' || prefillingRecords.value) return;
 
   checkingUnit.value = true;
   showMatchingPeopleDialog.value = true;
@@ -743,6 +768,8 @@ const debounceedCheckUnit = debounce(checkPeopleById, 500);
 watch(
   () => vehicle.unit,
   async (newUnit) => {
+    if (prefillingRecords.value) return;
+
     resetVehicleDetails();
     matchingPeople.value = [];
     if (!newUnit) return;
@@ -778,13 +805,25 @@ onMounted(() => {
       vehicle.start = prop.vehicleData.start || '';
       vehicle.plateNumber = prop.vehicleData.plateNumber
       vehicle.peopleId = prop.vehicleData.peopleId || '';
-      vehicle.block = prop.vehicleData.block === 0 ? null  : prop.vehicleData.block || null;
+      vehicle.block = prop.vehicleData.block || null;
 
-      if(prop.type === "seasonpass"){
+      if (prop.type === "seasonpass") {
         showSubscriptionDateOptions.value = true;
       }
     }
   }, 300);
+
+  if (prop.mode === 'add' && prop.type !== 'blocklist') {
+    // For add mode, we want to check for matching people records if the type is not blocklist, as blocklist records are typically not linked to people records.
+    prefillingRecords.value = true;
+    vehicle.block = prop.vehicleData?.block?._id ? prop.vehicleData?.block?._id : '';
+    vehicle.level = prop.vehicleData?.level?._id ? prop.vehicleData?.level?._id : '';
+    vehicle.unit = prop.vehicleData?.unit?._id ? prop.vehicleData?.unit?._id : '';
+  }
+
+  nextTick(() => {
+    prefillingRecords.value = false;
+  })
 })
 
 

package/components/VehicleManagement.vue

@@ -170,9 +170,9 @@ const headers = [
   { title: "Name", value: "name" },
   { title: "Vehicle Numbers", value: "plates" },
   { title: "NRIC", value: "nric" },
-  { title: "Block", value: "block" },
-  { title: "Floor", value: "level" },
-  { title: "Unit", value: "unitName" },
+  { title: "Block", value: "block.name" },
+  { title: "Floor", value: "level.name" },
+  { title: "Unit", value: "unit.name" },
   { title: "Category", value: "category" },
   // { title: "Type", value: "type" },
   // { title: "Status", value: "status" },
@@ -247,7 +247,7 @@ const formattedFields: Partial<Record<keyof TVehicle, string>> = {
   nric: "NRIC",
   block: "Block",
   level: "Level",
-  unitName: "Unit",
+  unit: "Unit",
   start: "Start",
   end: "End",
   category: "Category",
@@ -259,6 +259,12 @@ const formattedFields: Partial<Record<keyof TVehicle, string>> = {
 function formatValues(key: string, value: any) {
   if (!value) return ""
   switch (key) {
+    case "unit":
+      return value.name || "";
+    case "level":
+      return value.name || "";
+    case "block":
+      return value.name || "";
     case "start":
       return formatDate(value)
     case "end":

package/components/VisitorForm.vue

@@ -152,27 +152,27 @@
 
           <v-col v-if="shouldShowField('block')" cols="12">
             <InputLabel class="text-capitalize" title="Block" required />
-            <v-autocomplete v-model="visitor.block" :items="blocksArray" item-value="value" item-title="title"
-              :loading="blockStatus === 'pending'" @update:model-value="handleChangeBlock" density="comfortable"
+            <v-autocomplete v-model="visitor.block" :items="blocksArray" item-value="value" autocomplete="off" item-title="title" :key="blockListDataPending ? 'block-list-pending' : 'block-list-ready'"
+              :loading="blockListDataPending" @update:model-value="handleChangeBlock" density="comfortable"
               :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('level')" cols="12">
             <InputLabel class="text-capitalize" title="Level" required />
-            <v-autocomplete v-model="visitor.level" :items="levelsArray" density="comfortable" :disabled="!visitor.block"
-              :loading="levelsStatus === 'pending'" @update:model-value="handleChangeLevel" :rules="[requiredRule]" />
+            <v-autocomplete v-model="visitor.level" :items="levelsArray"  density="comfortable" autocomplete="off"
+              :disabled="!visitor.block" :key="levelListDataPending ? 'level-list-pending' : 'level-list-ready'"  :loading="levelsDataPending" @update:model-value="handleChangeLevel"
+              :rules="[requiredRule]" />
           </v-col>
-
-
           <v-col v-if="shouldShowField('unit')" cols="12">
             <InputLabel class="text-capitalize" title="Unit" required />
-            <v-autocomplete v-model="visitor.unit" :items="unitsArray" density="comfortable" item-title="title"
-              item-value="value" :disabled="!visitor.level" :loading="unitsStatus === 'pending'" :rules="[requiredRule]"
+            <v-autocomplete v-model="visitor.unit" :items="unitsArray" density="comfortable" autocomplete="off" item-title="title"
+              item-value="value" :disabled="!visitor.level" :key="unitListDataPending ? 'unit-list-pending' : 'unit-list-ready'" :loading="unitsDataPending" :rules="[requiredRule]"
               @update:model-value="handleUpdateUnit" />
           </v-col>
 
           <v-col v-if="shouldShowField('unit')" cols="12">
-            <InputLabel class="text-capitalize" title="Registered Unit Company Name" required :key="'unit-key' + visitor.level" />
+            <InputLabel class="text-capitalize" title="Registered Unit Company Name" required
+              :key="'unit-key' + visitor.level" />
             <v-text-field v-model.trim="registeredUnitCompanyName" density="comfortable"
               :loading="buildingUnitDataPending" readonly class="no-pointer" />
           </v-col>
@@ -315,7 +315,8 @@ const currentAutofillSource = ref<AutofillSource>(null);
 
 
 const { requiredRule, debounce, UTCToLocalTIme } = useUtils();
-const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
+const { getSiteById } = useSiteSettings();
+const { getBlocksSelection, getLevelsSelection, getUnitSelection } = useBuilding();
 const { createVisitor, typeFieldMap, contractorTypes, getVisitors, updateVisitor } = useVisitor();
 const { getBySiteId: getEntryPassSettingsBySiteId } = useSiteEntryPassSettings();
 const { createVisitorPass, signQr } = useAccessManagement();
@@ -683,78 +684,101 @@ const {
 const {
   data: siteData,
   refresh: refreshSiteData,
-  status: blockStatus,
+  status: siteStatus,
   pending: siteDataPending,
-} = useLazyAsyncData(`fetch-site-data-${prop.site}`, () =>
+} = useLazyAsyncData(`visitor-fetch-site-data-${prop.site}`, () =>
   getSiteById(prop.site)
 );
 
+
+const {
+  data: blocksListData,
+  refresh: refreshBlockListData,
+  status: blocksListStatus,
+  pending: blockListDataPending,
+} = useLazyAsyncData(`visitor-fetch-block-list-data-${prop.site}`, () =>
+  getBlocksSelection({ siteId: prop.site }), {watch: [() => prop.site], deep: true }
+);
+
+
+
 const {
   data: levelsData,
   refresh: refreshLevelsData,
   status: levelsStatus,
+  pending: levelsDataPending,
 } = useLazyAsyncData(
-  `fetch-levels-data-${prop.site}-${visitor.block}`,
+  `visitor-fetch-levels-data-${prop.site}-${visitor.block}`,
   async () => {
     if (!visitor.block) return Promise.resolve(null);
-    return await getSiteLevels(prop.site, { block: Number(visitor.block) });
-  }, { watch: [() => visitor.block] }
+    // return await getSiteWithLevels(prop.site, { block: Number(visitor.block) });
+    return await getLevelsSelection({ siteId: prop.site, blockId: visitor.block });
+  }, { watch: [() => visitor.block], deep: true }
 );
 
 const {
   data: unitsData,
   refresh: refreshUnitsData,
   status: unitsStatus,
+  pending: unitsDataPending,
 } = useLazyAsyncData(
-  `fetch-units-data-${prop.site}-${visitor.level}`,
+  `visitor-fetch-units-data-${prop.site}-${visitor.level}`,
   async () => {
     if (!visitor.level) return Promise.resolve(null);
-    return await getSiteUnits(prop.site, Number(visitor.block), visitor.level);
-  }, { watch: [() => visitor.level] }
+    return await getUnitSelection({ siteId: prop.site, block: visitor.block, level: visitor.level });
+  },{ watch: [() => visitor.level], deep: true }
 );
 
+
 watch(
   siteData,
   (newVal) => {
     const siteDataValue = newVal as TSite;
     if (siteDataValue) {
-      const numberOfBlocks = siteDataValue.metadata?.block || 0;
-      for (let i = 1; i <= numberOfBlocks; i++) {
-        blocksArray.value.push({
-          title: `Block ${i}`,
-          value: i,
-        });
-      }
 
       deliveryCompanyList.value = Array.isArray(siteDataValue?.deliveryCompanyList) ? siteDataValue.deliveryCompanyList : [];
 
-    } else {
-      blocksArray.value = [];
-    }
+    } 
   },
   { immediate: true }
 );
 
 watch(
-  levelsData,
-  (newVal: any) => {
-    if (newVal) {
-      const arr = newVal.levels || [];
-      levelsArray.value = arr?.map((level: any) => ({
-        title: level,
-        value: level,
-      }));
-    } else {
-      levelsArray.value = [];
+  [blocksListData],
+  () => {
+    if (blocksListStatus.value === 'pending') {
+      blocksArray.value = [];
+      return;
     }
+
+    const arr = Array.isArray(blocksListData.value?.data) ? blocksListData.value?.data : [];
+    blocksArray.value = arr.map((block: any) => ({
+      title: block.name,
+      value: block._id,
+    }));
   },
-  { immediate: true }
-);
+  { immediate: true, deep: true }
+)
+
+
+watch([levelsData], () => {
+  if (levelsStatus.value === 'pending') {
+    levelsArray.value = [];
+    return;
+  }
+
+  const arr = Array.isArray(levelsData.value?.data) ? levelsData.value?.data : [];
+  const mappedLevels = arr.map((level: any) => ({
+    title: level.name,
+    value: level._id,
+  }));
+  levelsArray.value = mappedLevels;
+}, { immediate: true,  deep: true})
 
 watch(
   unitsData,
   (newVal: any) => {
-    if (!newVal) {
+    if (!newVal || !Array.isArray(newVal)) {
       unitsArray.value = []
       return
     }
@@ -777,7 +801,7 @@ watch(
 
     unitsArray.value = mapped
   },
-  { immediate: true }
+  { immediate: true, deep: true }
 )
 
 
@@ -925,7 +949,7 @@ async function submit() {
   }
 
   // add register status when registering unregistered visitor
-  if (prop.mode === 'register'){
+  if (prop.mode === 'register') {
     payload.status = "registered"
   }
 

package/components/VisitorManagement.vue

@@ -96,7 +96,7 @@
             formatLocation({
               block: item.block,
               level: item.level,
-              unit: item.unitName,
+              unit: item.unit,
             })
           }}</span>
         </span>
@@ -852,7 +852,7 @@ const formattedFields = {
   company: "Company",
   block: "Block",
   level: "Level",
-  unitName: "Unit",
+  unit: "Unit",
   checkIn: "Check In",
   snapshotEntryImage: "Entry Image",
   checkOut: "Check Out",
@@ -973,10 +973,10 @@ const selectedVisitorObject = computed<Record<string, any>>(() => {
 
   let locationString = "N/A";
 
-  if (obj?.block || obj?.level || obj?.unitName) {
-    locationString = `${obj.block} / ${obj.level} / ${obj.unitName}`;
-  } else if (obj?.block) {
-    locationString = obj.block;
+  if (obj?.block?.name || obj?.level?.name || obj?.unitName) {
+    locationString = `${obj.block?.name} / ${obj.level?.name} / ${obj.unitName}`;
+  } else if (obj?.block?.name) {
+    locationString = obj.block?.name;
   } else {
     locationString = "N/A";
   }
@@ -994,6 +994,10 @@ function formatValues(key: string, value: any) {
   switch (key) {
     case "unit":
       return value?.name;
+    case "block":
+      return value?.name;
+    case "level":
+      return value?.name;
     case "checkIn":
       return formatDate(value);
     case "checkOut":

package/composables/useBuilding.ts

@@ -206,7 +206,7 @@ export default function useBuilding() {
     });
   }
 
-  function createBuilding(data: TBuilding) {
+  function createBuilding(data: TBuildingPayload) {
     return useNuxtApp().$api("/api/buildings", {
       method: "POST",
       body: data,
@@ -222,7 +222,7 @@ export default function useBuilding() {
 
   function updateById(
     id: string,
-    data: Pick<TBuilding, "name" | "block" | "levels" | "buildingFloorPlan">
+    data: TBuildingUpdatePayload
   ) {
     return useNuxtApp().$api(`/api/buildings/id/${id}`, {
       method: "PATCH",
@@ -236,6 +236,32 @@ export default function useBuilding() {
     });
   }
 
+
+  function getBlocksSelection({siteId} : { siteId: string; }) {
+    return useNuxtApp().$api(`/api/buildings/list/site/${siteId}`, {
+      method: "GET",
+    });
+  }
+
+  function getLevelsSelection({siteId, blockId} : { siteId: string; blockId: string }) {
+    return useNuxtApp().$api(`/api/building-levels/list/site/${siteId}`, {
+      method: "GET",
+      query: {
+        block: blockId
+      }
+    });
+  }
+
+  async function getUnitSelection({siteId, block, level} : { siteId: string; block: string; level: string }) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/building-units/site/${siteId}/block/${block}/level/${level}`,
+      {
+        method: "GET",
+      }
+    );
+  }
+
+
   return {
     categories,
     types,
@@ -246,5 +272,8 @@ export default function useBuilding() {
     updateBuildingField,
     deleteById,
     updateById,
-  };
+    getBlocksSelection,
+    getLevelsSelection,
+    getUnitSelection
+  }
 }

package/composables/useBuildingLevel.ts

@@ -0,0 +1,31 @@
+export default function useBuildingLevel() {
+
+
+  function batchUpdateLevels(levels: { _id: string; name: string }[]) {
+
+    const formattedPayloadLevels = levels.map(level => ({
+      _id: level._id,
+      value: {
+        name: level.name
+      }
+    }));
+
+    return useNuxtApp().$api(`/api/building-levels/batch`, {
+      method: "PATCH",
+      body: 
+        [...formattedPayloadLevels]
+    });
+  }
+
+  function deleteById(id: string) {
+    return useNuxtApp().$api(`/api/building-levels/${id}`, {
+      method: "PUT",
+    });
+  }
+
+
+  return {
+    deleteById,
+    batchUpdateLevels
+  };
+}

package/composables/useSecurityUtils.ts

@@ -3,9 +3,9 @@ export default function(){
     const formatLocation = ({block, level, unit}: {block: number, level: string, unit: string | TBuildingUnit}) => {
     const parts = [];
 
-    if (block) parts.push(`Block ${block}`);
-    if (level) parts.push(level);
-    if (unit) parts.push(unit);
+    if (block?.name) parts.push(`${block.name}`);
+    if (level?.name) parts.push(`${level.name}`);
+    if (unit?.name) parts.push(unit?.name);
 
     return parts.join(" / ");
     };

package/package.json

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

package/types/building.d.ts

@@ -3,7 +3,7 @@ declare type TBuilding = {
   site: string;
   name: string;
   block: number | null;
-  levels: string[];
+  levels: { _id: string; name: string }[];
   buildingFiles: { id: string, name: string }[] | string[];
 };
 
@@ -16,7 +16,7 @@ declare type TBuildingUnit = {
   building: string;
   buildingName?: string;
   block: number | null;
-  level: string | null;
+  level: { _id: string; name: string } | null;
   category: string;
   status: string;
   buildingUnitFiles: string[];
@@ -25,3 +25,15 @@ declare type TBuildingUnit = {
   leaseStart: string;
   leaseEnd: string;
 };
+
+
+declare type TBuildingPayload = Pick<TBuilding, "site" | "name" | "block" | "buildingFiles"> & {
+  levels: string[];
+};
+
+
+declare type TBuildingUpdatePayload = Pick<TBuilding, "name" | "buildingFiles"> & {
+  levels: string[];
+};
+
+declare type TBuildingUnitPayload = Pick<TBuildingUnit, "site" | "name" | "building" | "buildingName" | "block" | "category" | "status" | "buildingUnitFiles" | "companyName" | "companyRegistrationNumber" | "leaseStart" | "leaseEnd"> & { level?: string}

package/types/vehicle.d.ts

@@ -6,8 +6,14 @@ declare type TVehicle = {
   direction: "entry" | "exit" | "both" | "none";
   name: string;
   phoneNumber?: string;
-  block: number | "";
-  level: string;
+  block: { 
+    _id: string;
+    name: string;
+  }
+  level: {
+    _id: string;
+    name: string;
+  }
   unit: string;
   unitName?: string; // For display purposes, the API will return the unit name if available
   nric?: string | null;
@@ -33,8 +39,6 @@ declare type TVehiclePayload = Pick<
   | "direction"
   | "name"
   | "phoneNumber"
-  | "block"
-  | "level"
   | "unit"
   | "nric"
   | "remarks"
@@ -44,4 +48,4 @@ declare type TVehiclePayload = Pick<
   | "site"
   | "org"
   | "peopleId"
-> & { plateNumber?: string | string[] };
+> & { plateNumber?: string | string[], block?: string, level?: string };