1.fix layout and add icon in Tiada Data diperolehi dalam carian 2.add account statements icon in rekod Tebus

2025-12-01 20:29:14 +08:00
parent 863388ac6a
commit b330abd0e2
3 changed files with 116 additions and 103 deletions
@@ -43,6 +43,9 @@
                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Tarikh Bayaran
                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Masa Bayaran
+                  </th>
                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Bayaran
                  </th>
@@ -54,14 +57,13 @@
              <tbody>
                  <tr v-if="objbayaran.length === 0">
                    <td colspan="9" class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        <div class="flex items-center">
-                          <div class="ml-3">
-                            <p class="text-gray-900 whitespace-no-wrap">
-                              Tiada Data Diperolehi
-                            </p>
-                          </div>
-                        </div>
-                      </td>
+                      <div class="flex flex-col items-center justify-center py-8">
+                        <svg class="w-16 h-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                        </svg>
+                        <p class="text-gray-700 font-semibold text-lg">Tiada Data Diperolehi</p>
+                      </div>
+                    </td>
                  </tr>
                  <tr v-for="(bayaran,i) in objbayaran" :key="i">
                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
@@ -75,7 +77,15 @@
                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                      <div class="flex items-center">
                        <div class="ml-3">
-                          <p class="text-gray-900 whitespace-no-wrap" v-text="bayaran.created_at">
+                          <p class="text-gray-900 whitespace-no-wrap" v-text="formatDate(bayaran.created_at,'date')">
+                          </p>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                      <div class="flex items-center">
+                        <div class="ml-3">
+                          <p class="text-gray-900 whitespace-no-wrap" v-text="formatDate(bayaran.created_at,'time')">
                          </p>
                        </div>
                      </div>
@@ -125,14 +135,13 @@
              <tbody>
                  <tr v-if="objupah.length === 0">
                    <td colspan="9" class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        <div class="flex items-center">
-                          <div class="ml-3">
-                            <p class="text-gray-900 whitespace-no-wrap">
-                              Tiada Data Diperolehi
-                            </p>
-                          </div>
-                        </div>
-                      </td>
+                      <div class="flex flex-col items-center justify-center py-8">
+                        <svg class="w-16 h-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                        </svg>
+                        <p class="text-gray-700 font-semibold text-lg">Tiada Data Diperolehi</p>
+                      </div>
+                    </td>
                  </tr>
                  <tr v-for="(upah,i) in objupah" :key="i">
                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
@@ -179,25 +188,25 @@
            <table class="min-w-full leading-normal">
              <thead class="text-center">
                <tr>
-                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th class="w-1/8 px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Bil
                  </th>
-                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th class="w-1/8 px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    No Rujukan
                  </th>
-                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                    Jenis Penyelesaian Pembiayaan
+                  <th class="w-1/8 px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Jenis
                  </th>
-                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th class="w-1/8 px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Pembiayaan Asal
                  </th>
-                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th class="w-1/8 px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Tempoh
                  </th>
-                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                    Tarikh Penyelesaian Pembiayaan
+                  <th class="w-1/8 px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    Tarikh
                  </th>
-                  <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  <th class="w-1/8 px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Action
                  </th>
                </tr>
@@ -205,14 +214,13 @@
               <tbody>
                  <tr v-if="objrekod.length === 0">
                    <td colspan="9" class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        <div class="flex items-center">
-                          <div class="ml-3">
-                            <p class="text-gray-900 whitespace-no-wrap">
-                              Tiada Data Diperolehi
-                            </p>
-                          </div>
-                        </div>
-                      </td>
+                      <div class="flex flex-col items-center justify-center py-8">
+                        <svg class="w-16 h-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                        </svg>
+                        <p class="text-gray-700 font-semibold text-lg">Tiada Data Diperolehi</p>
+                      </div>
+                    </td>
                  </tr>
                  <tr v-for="(rekod,i) in objrekod" :key="i">
                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
@@ -266,12 +274,15 @@
                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                      <div class="flex items-center">
                        <div class="ml-3">
-                          <button type="button" @click="rekodfunc(rekod.norujukan,rekod.jenistebus,rekod.hargajualan)" data-modal-toggle="popup-modal" class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300">
+                          <button type="button" @click="rekodfunc(rekod.norujukan,rekod.jenistebus,rekod.hargajualan)" data-modal-toggle="popup-modal" class="mt-2 border border-yellow-600 text-yellow-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                            </svg>
                          </button>
+                          <button v-if="rekod.ujrah > 0" type="button" @click="rekodSAGStatements(rekod.norujukan)" data-modal-toggle="popup-modal" class="border border-green-600 text-green-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-green-600 hover:text-white transition-all duration-300">
+                            <i class="fa-solid fa-box-archive"></i>
+                          </button>
                        </div>
                      </div>
                    </td>
@@ -390,6 +401,53 @@ export default {
        break;
      }
    },
+    rekodSAGStatements: function(norujukan){
+      let urlroute = window.route('accountstatement.rekod', norujukan)
+      window.open(urlroute, '_blank');
+    },
+    formatDate(datetime, type) {
+      if (!datetime) return '';
+      
+      const date = new Date(datetime);
+      
+      if (type === 'date') {
+        // Return date only in dd/mm/yyyy format
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+      }
+      
+      if (type === 'time') {
+        // Return time in 12-hour format with AM/PM
+        let hours = date.getHours();
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const seconds = String(date.getSeconds()).padStart(2, '0');
+        const ampm = hours >= 12 ? 'PM' : 'AM';
+        
+        hours = hours % 12;
+        hours = hours ? hours : 12; // the hour '0' should be '12'
+        hours = String(hours).padStart(2, '0');
+        
+        return `${hours}:${minutes}:${seconds} ${ampm}`;
+      }
+      
+      // Default: return both date and time
+      const day = String(date.getDate()).padStart(2, '0');
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const year = date.getFullYear();
+      
+      let hours = date.getHours();
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      const seconds = String(date.getSeconds()).padStart(2, '0');
+      const ampm = hours >= 12 ? 'PM' : 'AM';
+      
+      hours = hours % 12;
+      hours = hours ? hours : 12;
+      hours = String(hours).padStart(2, '0');
+      
+      return `${day}/${month}/${year} ${hours}:${minutes}:${seconds} ${ampm}`;
+    },
  }
 }
 </script>
@@ -2,7 +2,7 @@
 <div>
    <modal ref="modal" @clickEvent_="getDataSenaraiSAG"></modal>

-    <form :class="{ 'w-2/3' : this.showsag}" class="w-1/2 mt-10 p-6 bg-white rounded-xl shadow mx-auto">
+    <form :class="{ 'w-2/3' : this.showsag}" class="min-h-[50vh] w-1/2 mt-10 p-6 bg-white rounded-xl shadow mx-auto">

        <ul class="flex hidden rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 mb-4">
            <li class="w-full">
@@ -207,12 +207,13 @@
                    <tbody>
                        <tr v-if="objbelumtebus.from === null">
                            <td colspan="9" class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                                <div class="flex items-center">
-                                    <div class="ml-3">
-                                        <p class="text-gray-900 whitespace-no-wrap">
-                                            Tiada data yang diperolehi dalam carian
-                                        </p>
-                                    </div>
+                                <div class="flex flex-col items-center justify-center py-8">
+                                    <svg class="w-14 h-14 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                                    </svg>
+                                    <p class="text-gray-900 whitespace-no-wrap">
+                                    Tiada data yang diperolehi dalam carian
+                                    </p>
                                </div>
                            </td>
                        </tr>
@@ -334,12 +335,13 @@
                    <tbody>
                        <tr v-if="objsudahtebus.from === null">
                            <td colspan="9" class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                                <div class="flex items-center">
-                                    <div class="ml-3">
-                                        <p class="text-gray-900 whitespace-no-wrap">
-                                            Tiada data yang diperolehi dalam carian
-                                        </p>
-                                    </div>
+                                <div class="flex flex-col items-center justify-center py-8">
+                                    <svg class="w-14 h-14 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                                    </svg>
+                                    <p class="text-gray-900 whitespace-no-wrap">
+                                    Tiada data yang diperolehi dalam carian
+                                    </p>
                                </div>
                            </td>
                        </tr>
@@ -457,12 +459,13 @@
                    <tbody>
                        <tr v-if="objlelong.from === null">
                            <td colspan="9" class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                                <div class="flex items-center">
-                                    <div class="ml-3">
-                                        <p class="text-gray-900 whitespace-no-wrap">
-                                            Tiada data yang diperolehi dalam carian
-                                        </p>
-                                    </div>
+                                <div class="flex flex-col items-center justify-center py-8">
+                                    <svg class="w-14 h-14 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                                    </svg>
+                                    <p class="text-gray-900 whitespace-no-wrap">
+                                    Tiada data yang diperolehi dalam carian
+                                    </p>
                                </div>
                            </td>
                        </tr>