@7365admin1/layer-common 1.11.50 → 1.11.52

package/components/OnlineFormsConfiguration.vue

@@ -59,6 +59,9 @@
         >
           <template v-slot:item.createdAt="{ item }">
             {{ formatDateDDMMYYYYLocal(item.createdAt) }}
+          </template>
+          <template v-slot:item.status="{ item }">
+            {{ item.status ? item.status.charAt(0).toUpperCase() + item.status.slice(1) : "N/A" }}
           </template></v-data-table
         >
       </v-card></v-col
@@ -91,10 +94,10 @@
             <v-col cols="12">
               <strong>Name:</strong> {{ selectedOnlineForm?.name ?? "N/A" }}
             </v-col>
-            <v-col cols="12">
+            <v-col v-if="selectedOnlineForm?.attachment" cols="12">
               <strong>Document: </strong>
               <NuxtLink
-                :to="getFileUrl(selectedOnlineForm?.attachment ?? '')"
+                :to="getFileUrl(selectedOnlineForm.attachment)"
                 external
                 target="_blank"
               >
@@ -102,7 +105,7 @@
               </NuxtLink>
             </v-col>
             <v-col cols="12">
-              <strong>Status:</strong> {{ selectedOnlineForm?.status ?? "N/A" }}
+              <strong>Status:</strong> {{ selectedOnlineForm?.status ? selectedOnlineForm.status.charAt(0).toUpperCase() + selectedOnlineForm.status.slice(1) : "N/A" }}
             </v-col>
             <v-col cols="12">
               <strong>Inputs:</strong>
@@ -158,12 +161,18 @@
                   </v-btn>
                 </template>
                 <v-list class="pa-0">
+                  <v-list-item @click="previewDialog = false; formRenderPreviewDialog = true">
+                    <v-list-item-title class="text-subtitle-2">
+                      Preview
+                    </v-list-item-title>
+                  </v-list-item>
+
                   <v-list-item
                     v-if="canUpdateOnlineFormConfiguration"
                     @click="openEditDialog()"
                   >
                     <v-list-item-title class="text-subtitle-2">
-                      Edit Online Form
+                      Edit
                     </v-list-item-title>
                   </v-list-item>
 
@@ -173,7 +182,7 @@
                     @click="openDeleteDialog()"
                   >
                     <v-list-item-title class="text-subtitle-2">
-                      Delete Online Form
+                      Delete
                     </v-list-item-title>
                   </v-list-item>
                 </v-list>
@@ -184,6 +193,12 @@
       </v-card>
     </v-dialog>
 
+    <!-- Form Render Preview Dialog -->
+    <OnlineFormRenderPreview
+      v-model="formRenderPreviewDialog"
+      :form="selectedOnlineForm"
+    />
+
     <!-- Delete Dialog -->
     <v-dialog
       v-model="confirmDialog"
@@ -247,6 +262,7 @@
 </template>
 <script setup lang="ts">
 import OnlineFormConfigurationForm from "./OnlineFormConfigurationForm.vue";
+import OnlineFormRenderPreview from "./OnlineFormRenderPreview.vue";
 
 definePageMeta({
   middleware: ["01-auth", "02-org"],
@@ -291,10 +307,7 @@ const props = defineProps({
 });
 
 const { headerSearch } = useLocal();
-const {
-  getAllBySiteId: _getOnlineFormConfigurationsBySiteId,
-  deleteOnlineFormById: _deleteById,
-} = useOnlineForm();
+const { getAll: _getAll, deleteById: _deleteById } = useOnlineFormConfiguration();
 const { getFileUrl } = useFile();
 
 const page = ref(1);
@@ -318,9 +331,11 @@ const {
   refresh: getOnlineFormConfigurations,
   status: getAllReqStatus,
 } = useLazyAsyncData("get-all-online-form-configuration", () =>
-  _getOnlineFormConfigurationsBySiteId(siteId, {
+  _getAll({
     page: page.value,
     search: headerSearch.value,
+    org: orgId,
+    site: siteId,
   })
 );
 
@@ -337,6 +352,7 @@ watchEffect(() => {
 const createDialog = ref(false);
 const editDialog = ref(false);
 const previewDialog = ref(false);
+const formRenderPreviewDialog = ref(false);
 const selectedOnlineForm = ref<TOnlineForm>({
   _id: "",
   name: "",
@@ -356,18 +372,6 @@ const deleteLoading = ref(false);
 const confirmDialog = ref(false);
 const selectedOnlineFormId = ref<string | null>(null);
 
-watchEffect(() => {
-  // initial data
-  items.value = [
-    {
-      _id: "1",
-      name: "Bicycle Application Form",
-      createdAt: "2025/12/30",
-      status: "active",
-    },
-  ];
-});
-
 function tableRowClickHandler(_: any, data: any) {
   selectedOnlineForm.value = data.item as TOnlineForm;
   previewDialog.value = true;

package/components/SiteSettings.vue

@@ -205,51 +205,6 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel v-if="showWorkOrderSettings" color="primary" class="">
-        <v-expansion-panel-title>
-          <v-icon class="mr-2">mdi-format-list-numbered</v-icon>
-          Work Order Settings
-        </v-expansion-panel-title>
-
-        <v-expansion-panel-text>
-          <v-autocomplete
-            v-if="!props.service"
-            v-model="selectedServiceProvider"
-            :items="serviceProviders"
-            :loading="isFetchingServiceProviders"
-            :disabled="!canManageSiteSettings"
-            label="Select Service Provider"
-            @click="fetchServiceProvidersBySiteService"
-            class="mt-4"
-          />
-
-          <v-text-field
-            v-model="prefix"
-            label="Prefix"
-            :disabled="isLoading || !canManageSiteSettings"
-            @input="handleInput"
-          />
-
-          <v-select
-            v-model="noOfDigits"
-            :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
-            label="No. of Digits"
-            :disabled="isLoading || !canManageSiteSettings"
-          />
-
-          <v-text-field v-model="orderNumberPreview" label="Preview" readonly />
-
-          <v-btn
-            v-if="canManageSiteSettings"
-            class="mt-2"
-            :loading="isLoading"
-            @click="save"
-          >
-            Save
-          </v-btn>
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-
       <v-expansion-panel v-if="showDeliveryCompanies" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-truck</v-icon>
@@ -291,7 +246,6 @@
 import useFile from "../composables/useFile";
 import useSiteSettings from "../composables/useSiteSettings";
 import useUtils from "../composables/useUtils";
-import useWorkOrder from "../composables/useWorkOrder";
 import useANPRSettings from "../composables/useANPRSettings";
 
 const props = defineProps({
@@ -300,10 +254,8 @@ const props = defineProps({
   canManageSiteSettings: { type: Boolean, default: false },
   showAnprCamera: { type: Boolean, default: false },
   showCctvCamera: { type: Boolean, default: false },
-  showWorkOrderSettings: { type: Boolean, default: false },
   showDeliveryCompanies: { type: Boolean, default: false },
   showResidentVisitors: { type: Boolean, default: false },
-  service: { type: String, default: false },
 });
 
 const openPanels = ref([]); // default open first
@@ -312,7 +264,6 @@ const { getSiteById, updateSitebyId, updateSiteInformation } =
   useSiteSettings();
 const { requiredRule } = useUtils();
 const { getFileUrl } = useFile();
-const { getWorkOrderSettings, createWorkOrderSettings } = useWorkOrder();
 
 const blocks = ref(0);
 const guardPosts = ref(0);
@@ -329,10 +280,6 @@ const deliveryCompanies = ref<string[]>([]);
 const siteLogo = ref<any[]>([]);
 const uploadedSiteLogo = ref("");
 
-const prefix = ref("");
-const noOfDigits = ref(1);
-const isLoading = ref(false);
-
 const coverPhoto = ref<string[]>([]);
 const description = ref<string>("");
 const siteDocuments = ref<string[]>([]);
@@ -450,88 +397,12 @@ const onUploadedLogoPreview = () => {
   return getFileUrl(uploadedSiteLogo.value);
 };
 
-const { data: workOrderSetting } = await useLazyAsyncData(
-  `work-${props.siteId}`,
-  () => getWorkOrderSettings({ site: props.siteId, service: "Security" })
-);
-
-watchEffect(() => {
-  if (workOrderSetting.value) {
-    selectedServiceProvider.value = workOrderSetting.value?.service;
-    prefix.value = workOrderSetting.value?.prefix;
-    noOfDigits.value = workOrderSetting.value?.noOfDigits;
-  }
-});
-
-function handleInput(e: any) {
-  prefix.value = e.target.value.replace(/[^A-Z]/g, "").toUpperCase();
-}
-
 function handleUpdateCompanies(value: string[]) {
   deliveryCompanies.value = value;
 }
 
-const orderNumberPreview = computed(() => {
-  return `${prefix.value}${"0".repeat(noOfDigits.value - 1)}1`;
-});
-
 const route = useRoute();
 
-const message = ref("");
-const messageColor = ref("");
-const messageSnackbar = ref(false);
-
-function showMessage(msg: string, color: string) {
-  message.value = msg;
-  messageColor.value = color;
-  messageSnackbar.value = true;
-}
-
-const { getAll: getAllServiceProvider } = useServiceProvider();
-
-const serviceProviders = ref<TServiceProvider[]>([]);
-const isFetchingServiceProviders = ref(false);
-let selectedServiceProvider = ref<string>("");
-let providersArray = ref<string[]>([]);
-
-async function fetchServiceProvidersBySiteService() {
-  isFetchingServiceProviders.value = true;
-
-  try {
-    const response = await getAllServiceProvider({
-      siteId: route.params.site as string,
-      limit: 1000,
-    });
-
-    providersArray.value = [];
-    serviceProviders.value = response.items.map((i: any) => {
-      providersArray.value.push(i);
-      return i.name;
-    });
-  } catch (error: any) {
-    return showMessage(errorConverter(error), "error");
-  } finally {
-    isFetchingServiceProviders.value = false;
-  }
-}
-
-async function save() {
-  try {
-    isLoading.value = true;
-    await createWorkOrderSettings({
-      site: props.siteId,
-      service: props.service || selectedServiceProvider.value,
-      prefix: prefix.value,
-      noOfDigits: noOfDigits.value,
-    });
-    show("Saved successfully", "success");
-  } catch {
-    show("Error saving", "error");
-  } finally {
-    isLoading.value = false;
-  }
-}
-
 function show(message: string, color: string) {
   toast.show = true;
   toast.message = message;

package/components/VehicleManagement.vue

@@ -296,6 +296,7 @@ const { data: getVehiclesReq, refresh: getVehiclesRefresh, pending: getVehiclesP
         page: page.value,
         search: searchInput.value,
         type: vehicleTypeFilter.value ?? "",
+        site: props.site,
       }),
     {
       watch: [page],

package/composables/useFacility.ts

@@ -13,6 +13,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     tuesday: {
       isEnabled: boolean;
@@ -20,6 +21,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     wednesday: {
       isEnabled: boolean;
@@ -27,6 +29,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     thursday: {
       isEnabled: boolean;
@@ -34,6 +37,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     friday: {
       isEnabled: boolean;
@@ -41,6 +45,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     saturday: {
       isEnabled: boolean;
@@ -48,6 +53,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     sunday: {
       isEnabled: boolean;
@@ -55,6 +61,7 @@ export default function usetFacility() {
       endTime: string;
       breakTimes: { startTime: string; endTime: string }[];
       peakTimes: { startTime: string; endTime: string }[];
+      timeSlotsManual: { startTime: string; endTime: string }[] | null;
     };
     description: string;
     about: string;
@@ -88,6 +95,12 @@ export default function usetFacility() {
       count: number;
       permanentRemarks: string;
     }[] = [];
+    isBookingUnitLimitEnabled: boolean;
+    bookingUnitLimit: number | null;
+    isMaxNumberGuestLimitEnabled: boolean;
+    maxNumberGuestLimit: number | null;
+    isCancelAllowedLimitEnabled: boolean;
+    daysAllowedCancel: number | null;
 
     constructor(
       {
@@ -102,6 +115,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         tuesday = {
           isEnabled: false,
@@ -109,6 +123,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         wednesday = {
           isEnabled: false,
@@ -116,6 +131,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         thursday = {
           isEnabled: false,
@@ -123,6 +139,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         friday = {
           isEnabled: false,
@@ -130,6 +147,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         saturday = {
           isEnabled: false,
@@ -137,6 +155,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         sunday = {
           isEnabled: false,
@@ -144,6 +163,7 @@ export default function usetFacility() {
           endTime: "",
           breakTimes: [],
           peakTimes: [],
+          timeSlotsManual: null,
         },
         description = "",
         about = "",
@@ -171,6 +191,12 @@ export default function usetFacility() {
         isBookingPolicyEnabled = false,
         bookingPolicy = "",
         securityCheckList = [],
+        isBookingUnitLimitEnabled = false,
+        bookingUnitLimit = null,
+        isMaxNumberGuestLimitEnabled = false,
+        maxNumberGuestLimit = null,
+        isCancelAllowedLimitEnabled = false,
+        daysAllowedCancel = null,
       } = {} as TFacility
     ) {
       this._id = _id;
@@ -181,24 +207,30 @@ export default function usetFacility() {
       this.monday = monday;
       this.monday.breakTimes = monday?.breakTimes ?? [];
       this.monday.peakTimes = monday?.peakTimes ?? [];
+      this.monday.timeSlotsManual = monday?.timeSlotsManual ?? [];
       this.tuesday = tuesday;
       this.tuesday.breakTimes = tuesday?.breakTimes ?? [];
       this.tuesday.peakTimes = tuesday?.peakTimes ?? [];
       this.wednesday = wednesday;
       this.wednesday.breakTimes = wednesday?.breakTimes ?? [];
       this.wednesday.peakTimes = wednesday?.peakTimes ?? [];
+      this.wednesday.timeSlotsManual = wednesday?.timeSlotsManual ?? null;
       this.thursday = thursday;
       this.thursday.breakTimes = thursday?.breakTimes ?? [];
       this.thursday.peakTimes = thursday?.peakTimes ?? [];
+      this.thursday.timeSlotsManual = thursday?.timeSlotsManual ?? null;
       this.friday = friday;
       this.friday.breakTimes = friday?.breakTimes ?? [];
       this.friday.peakTimes = friday?.peakTimes ?? [];
+      this.friday.timeSlotsManual = friday?.timeSlotsManual ?? null;
       this.saturday = saturday;
       this.saturday.breakTimes = saturday?.breakTimes ?? [];
       this.saturday.peakTimes = saturday?.peakTimes ?? [];
+      this.saturday.timeSlotsManual = saturday?.timeSlotsManual ?? null;
       this.sunday = sunday;
       this.sunday.breakTimes = sunday?.breakTimes ?? [];
       this.sunday.peakTimes = sunday?.peakTimes ?? [];
+      this.sunday.timeSlotsManual = sunday?.timeSlotsManual ?? null;
       this.description = description;
       this.about = about;
       this.maintenanceDatesWithTimes = maintenanceDatesWithTimes ?? [];
@@ -224,6 +256,12 @@ export default function usetFacility() {
       this.isCancellationAutoRefundEnabled = isCancellationAutoRefundEnabled;
       this.bookingPolicy = bookingPolicy;
       this.securityCheckList = securityCheckList ?? [];
+      this.isBookingUnitLimitEnabled = isBookingUnitLimitEnabled || false;
+      this.bookingUnitLimit = bookingUnitLimit ?? null;
+      this.isMaxNumberGuestLimitEnabled = isMaxNumberGuestLimitEnabled || false;
+      this.maxNumberGuestLimit = maxNumberGuestLimit ?? null;
+      this.isCancelAllowedLimitEnabled = isCancelAllowedLimitEnabled || false;
+      this.daysAllowedCancel = daysAllowedCancel ?? null;
       this.isBookingPolicyEnabled = isBookingPolicyEnabled || false;
     }
   }

package/composables/useOnlineFormConfiguration.ts

@@ -0,0 +1,36 @@
+export default function useOnlineFormConfiguration() {
+  function getAll({
+    page = 1,
+    search = "",
+    limit = 10,
+    status = "",
+    org = "",
+    site = "",
+  } = {}) {
+    return useNuxtApp().$api<Record<string, any>>("/api/online-form-configurations", {
+      method: "GET",
+      query: { page, search, limit, status, org, site },
+    });
+  }
+
+  function getById(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/online-form-configurations/id/${id}`, {
+      method: "GET",
+    });
+  }
+
+  function updateById(id: string, value: any) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/online-form-configurations/id/${id}`, {
+      method: "PUT",
+      body: value,
+    });
+  }
+
+  function deleteById(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/online-form-configurations/id/${id}`, {
+      method: "PATCH",
+    });
+  }
+
+  return { getAll, getById, updateById, deleteById };
+}

package/composables/useOnlineFormTemplates.ts

@@ -0,0 +1,145 @@
+export type OnlineFormTemplateInput = {
+  label: string;
+  dataType: string;
+  required: boolean;
+  multiple: boolean;
+  options?: string[];
+};
+
+const formTemplates: Record<string, OnlineFormTemplateInput[]> = {
+  "Application for Bicycle Parking": [
+    { label: "Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Unit No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "IC/Passport No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Bicycle Description", dataType: "Text Input", required: true, multiple: false },
+    { label: "Bicycle Serial No.", dataType: "Text Input", required: false, multiple: false },
+    { label: "Date", dataType: "Date Input", required: true, multiple: false },
+  ],
+  "Application for Booking of BBQ Pit": [
+    { label: "Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Unit No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Date of Booking", dataType: "Date Input", required: true, multiple: false },
+    { label: "Time From", dataType: "Text Input", required: true, multiple: false },
+    { label: "Time To", dataType: "Text Input", required: true, multiple: false },
+    { label: "No. of Pax", dataType: "Text Input", required: true, multiple: false },
+    { label: "Remarks", dataType: "Text Area", required: false, multiple: false },
+  ],
+  "Application for Booking of Rooftop Bar/Dining": [
+    { label: "Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Unit No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Date of Booking", dataType: "Date Input", required: true, multiple: false },
+    { label: "Time From", dataType: "Text Input", required: true, multiple: false },
+    { label: "Time To", dataType: "Text Input", required: true, multiple: false },
+    { label: "No. of Pax", dataType: "Text Input", required: true, multiple: false },
+    { label: "Remarks", dataType: "Text Area", required: false, multiple: false },
+  ],
+  "Application for Electronic Access Card": [
+    { label: "Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Unit No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "IC/Passport No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "No. of Cards Required", dataType: "Text Input", required: true, multiple: false },
+    { label: "Date", dataType: "Date Input", required: true, multiple: false },
+  ],
+  "Application for Main Entrance RFID Transponder": [
+    { label: "Owner Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Unit No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "IC/Passport No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Vehicle No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Vehicle Make/Model", dataType: "Text Input", required: true, multiple: false },
+    { label: "No. of Transponders", dataType: "Text Input", required: true, multiple: false },
+    { label: "Date", dataType: "Date Input", required: true, multiple: false },
+  ],
+  "Application for Moving In/Out & Delivery": [
+    { label: "Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Unit No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Type", dataType: "Select", required: true, multiple: false, options: ["Moving In", "Moving Out", "Delivery"] },
+    { label: "Date", dataType: "Date Input", required: true, multiple: false },
+    { label: "Time From", dataType: "Text Input", required: true, multiple: false },
+    { label: "Time To", dataType: "Text Input", required: true, multiple: false },
+    { label: "Moving Company", dataType: "Text Input", required: false, multiple: false },
+    { label: "Remarks", dataType: "Text Area", required: false, multiple: false },
+  ],
+  "Application for Renovation/Addition & Alteration Works": [
+    { label: "Owner/Tenant Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Unit No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Description of Works", dataType: "Text Area", required: true, multiple: false },
+    { label: "Contractor Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Contractor Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Commencement Date", dataType: "Date Input", required: true, multiple: false },
+    { label: "Completion Date", dataType: "Date Input", required: true, multiple: false },
+    { label: "Remarks", dataType: "Text Area", required: false, multiple: false },
+  ],
+  "Letter of Undertaking & Indemnity": [
+    { label: "Owner Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Unit No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "IC/Passport No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Purpose of Undertaking", dataType: "Text Area", required: true, multiple: false },
+    { label: "Date", dataType: "Date Input", required: true, multiple: false },
+  ],
+  "Letter of Undertaking by Marketing Agent": [
+    { label: "Marketing Agent Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Agency Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "CEA Registration No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Unit No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Owner Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Date", dataType: "Date Input", required: true, multiple: false },
+  ],
+  "Pet's Record Form": [
+    { label: "Owner Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Unit No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Pet Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Pet Type", dataType: "Select", required: true, multiple: false, options: ["Dog", "Cat", "Rabbit", "Bird", "Fish", "Others"] },
+    { label: "Breed", dataType: "Text Input", required: true, multiple: false },
+    { label: "Colour", dataType: "Text Input", required: true, multiple: false },
+    { label: "Age", dataType: "Text Input", required: true, multiple: false },
+    { label: "Sex", dataType: "Select", required: true, multiple: false, options: ["Male", "Female"] },
+    { label: "Microchip No.", dataType: "Text Input", required: false, multiple: false },
+    { label: "License No.", dataType: "Text Input", required: false, multiple: false },
+  ],
+  "Refund of Deposit": [
+    { label: "Owner/Tenant Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Unit No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Bank Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Account No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Account Holder Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Deposit Type", dataType: "Select", required: true, multiple: false, options: ["Renovation Deposit", "Access Card Deposit", "Moving Deposit", "Others"] },
+    { label: "Remarks", dataType: "Text Area", required: false, multiple: false },
+  ],
+  "Update of Mailing Address": [
+    { label: "Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "IC/Passport No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Unit No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "New Mailing Address", dataType: "Text Area", required: true, multiple: false },
+    { label: "Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Effective Date", dataType: "Date Input", required: true, multiple: false },
+  ],
+  "Vehicle Registration Form": [
+    { label: "Owner Name", dataType: "Text Input", required: true, multiple: false },
+    { label: "Unit No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "IC/Passport No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Contact No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Vehicle No.", dataType: "Text Input", required: true, multiple: false },
+    { label: "Vehicle Make", dataType: "Text Input", required: true, multiple: false },
+    { label: "Vehicle Model", dataType: "Text Input", required: true, multiple: false },
+    { label: "Vehicle Colour", dataType: "Text Input", required: true, multiple: false },
+    { label: "IU Number", dataType: "Text Input", required: false, multiple: false },
+    { label: "Remarks", dataType: "Text Area", required: false, multiple: false },
+  ],
+};
+
+const templateNames = Object.keys(formTemplates);
+
+export default function useOnlineFormTemplates() {
+  return { formTemplates, templateNames };
+}