Add payment terms functionality to economic module

Introduced logic to fetch and display payment terms using SweetAlert2. Added a new API integration for payment terms and updated the UI with a button to show the terms in a modal. Enhanced module organization by including PaymentTerms logic in the economic module.

src/components/session/token/superUser/modules/Economic/Economic.vue

@@ -2,6 +2,7 @@
 import {authenticatedRequest} from "@/components/session/authenticatedRequest.vue";
 import {handleEconomicError} from "@/components/request/HandleEconomicError.vue";
 import { Layouts } from "@/components/session/token/superUser/modules/Economic/Layouts.vue";
+import { PaymentTerms } from "@/components/session/token/superUser/modules/Economic/PaymentTerms.vue";
 import { Config } from "@/components/session/token/superUser/modules/Economic/Config.vue";
 
 /**
@@ -20,6 +21,7 @@ export const Economic = {
     }
   },
   layouts: Layouts,
+  paymentTerms: PaymentTerms,
   config: Config,
   functions: {
     customers: {

src/components/session/token/superUser/modules/Economic/PaymentTerms.vue

@@ -0,0 +1,17 @@
+<script>
+import {authenticatedRequest} from "@/components/session/authenticatedRequest.vue";
+import {handleEconomicError} from "@/components/request/HandleEconomicError.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+
+/**
+ * The Economic -> PaymentTerms object
+ */
+export const PaymentTerms = {
+    get: async () => {
+      return authenticatedRequest(
+          "/economic/payment-terms",
+          "GET")
+    }
+};
+
+</script>

src/views/dashboards/superUserDashboard/configuration/ConfigurationEconomic.vue

@@ -10,11 +10,13 @@ import ConfigurationSubPageWrapper
 import ConfigurationCategory from "@/components/displays/superuser/configuration/ConfigurationCategory.vue";
 import ConfigurationSwitch from "@/components/displays/superuser/configuration/ConfigurationSwitch.vue";
 import ConfigurationSelect from "@/components/displays/superuser/configuration/ConfigurationSelect.vue";
+import Swal from "sweetalert2";
 
 // Get the department from the route
 const router = useRouter()
 
 const layouts = ref([]);
+const payment_terms = ref([]);
 const module_config = ref([]);
 
 const getLayouts = async () => {
@@ -32,6 +34,22 @@ const getLayouts = async () => {
   });
 };
 
+const getPaymentTerms = async () => {
+  await SessionUser.superUser.modules.economic.paymentTerms.get().then((response) => {
+    const tmp_payment_terms = response.data.data;
+    for (let i = 0; i < tmp_payment_terms.length; i++) {
+      payment_terms.value.push(
+        ConfigurationSelectOption(
+          tmp_payment_terms[i].name, tmp_payment_terms[i].paymentTermsNumber,
+        )
+      );
+    }
+    console.log(payment_terms.value);
+  }).catch((error) => {
+    console.log(error);
+  });
+};
+
 const getModuleConfig = async () => {
   await SessionUser.superUser.modules.economic.config.get_all().then((response) => {
     let tmp_module_config = response.data.data;
@@ -66,6 +84,43 @@ const load = async () => {
   await getModuleConfig();
 };
 
+const showPaymentTerms = async () => {
+  await getPaymentTerms().then((result) => {
+    Swal.fire({
+      title: 'Payment terms',
+      html: '<div id="payment-terms-list"></div>',
+      showCloseButton: true,
+      showCancelButton: false,
+      showConfirmButton: false,
+    });
+    const paymentTermsList = document.getElementById('payment-terms-list');
+    const paymentTermElement = document.createElement('table');
+    paymentTermElement.classList.add('table', 'is-striped', 'is-hoverable', 'is-fullwidth');
+    paymentTermElement.innerHTML = `
+      <thead>
+        <tr>
+          <th>Label</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    `;
+    paymentTermElement.querySelector('tbody').innerHTML = '';
+    payment_terms.value.forEach((paymentTerm) => {
+      const paymentTermRow = document.createElement('tr');
+      paymentTermRow.innerHTML = `
+        <td>${paymentTerm.label}</td>
+        <td>${paymentTerm.value}</td>
+      `;
+      paymentTermElement.querySelector('tbody').appendChild(paymentTermRow);
+    });
+    paymentTermsList.appendChild(paymentTermElement);
+    Swal.getHtmlContainer().appendChild(paymentTermsList);
+  }).catch((error) => {
+    console.log(error);
+  });
+};
+
 load();
 </script>
 
@@ -90,6 +145,16 @@ load();
             :value="getModuleConfigValue('invoiceLayoutNumber')"
             :on-select="SessionUser.superUser.modules.economic.config.layouts.invoiceLayoutNumber.set"
           />
+          <!-- Buttons -->
+          <button
+            class="button is-link is-small mt-2"
+            @click="showPaymentTerms"
+          >
+            <span class="icon">
+              <i class="fas fa-list"></i>
+            </span>
+            <span>Show payment terms</span>
+          </button>
         </ConfigurationCategory>
       </template>
     </ConfigurationSubPageWrapper>