@7365admin1/layer-common 1.11.54 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @iservice365/layer-common
 
+## 3.0.0
+
+### Major Changes
+
+- f4ee57d: Refactor Building Management Module
+
+### Patch Changes
+
+- 34bd7cf: Update on Building Unit Page
+
+## 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,12 +103,12 @@ const props = defineProps({
       },
        {
         title: "Level",
-        value: "level",
-      },
-      {
-        title: "Block",
-        value: "block",
+        value: "level.name",
       },
+      // {
+      //   title: "Block",
+      //   value: "block",
+      // },
       {
         title: "Block Name",
         value: "buildingName",

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/DocumentManagement.vue

@@ -276,13 +276,16 @@
                 <v-col cols="6" class="text-body-1">Document</v-col>
                 <v-col cols="6" class="text-right text-body-1">
                   <NuxtLink
-                    v-if="selectedDocument?.attachment"
+                    v-if="selectedDocument?.attachment && isViewable"
                     :to="getFileUrl(selectedDocument.attachment)"
                     external
                     target="_blank"
                   >
                     View Document
                   </NuxtLink>
+                  <span v-else-if="selectedDocument?.attachment" class="text-grey" style="opacity: 0.6; cursor: not-allowed;">
+                    View Document
+                  </span>
                   <span v-else>N/A</span>
                 </v-col>
               </v-row>
@@ -660,6 +663,11 @@ const selectedDocument = ref<TDocument>({
   type: "",
 });
 
+const isViewable = computed(() => {
+  const lowerType = String(selectedDocument.value?.type || "").trim().toLowerCase();
+  return ["pdf", "doc", "csv"].includes(lowerType);
+});
+
 const previewDetails = computed(() => {
   const document = selectedDocument.value as Record<string, any>;
   const fileType =

package/components/Facility/BookingSetup.vue

@@ -548,7 +548,7 @@
           </v-col>
           <v-col cols="12" class="mt-4">
             <v-number-input
-              v-model="facility.maxNumberGuest"
+              v-model="facility.maxNumberGuestLimit"
               :reverse="false"
               controlVariant="default"
               label="Maximum no. of guests"
@@ -1015,30 +1015,30 @@ const handlePolicy = (newContent: string) => {
 
 function onToggleBookingUnitLimit(val: any) {
   if (val) {
-    isBookingUnitLimitEnabled.value = true;
+    facility.value.isBookingUnitLimitEnabled = true;
     facility.value.bookingUnitLimit = 1;
   } else {
-    isBookingUnitLimitEnabled.value = false;
+    facility.value.isBookingUnitLimitEnabled = false;
     facility.value.bookingUnitLimit = null;
   }
 }
 
 function onToggleMaxNumberGuestLimit(val: any) {
   if (val) {
-    isMaxNumberGuestLimitEnabled.value = true;
-    facility.value.maxNumberGuest = 1;
+    facility.value.isMaxNumberGuestLimitEnabled = true;
+    facility.value.maxNumberGuestLimit = 1;
   } else {
-    isMaxNumberGuestLimitEnabled.value = false;
-    facility.value.maxNumberGuest = null;
+    facility.value.isMaxNumberGuestLimitEnabled = false;
+    facility.value.maxNumberGuestLimit = null;
   }
 }
 
 function onToggleCancelAllowedLimit(val: any) {
   if (val) {
-    isCancelAllowedLimitEnabled.value = true;
+    facility.value.isCancelAllowedLimitEnabled = true;
     facility.value.daysAllowedCancel = 1;
   } else {
-    isCancelAllowedLimitEnabled.value = false;
+    facility.value.isCancelAllowedLimitEnabled = false;
     facility.value.daysAllowedCancel = null;
   }
 }

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;