fix(FE): adding skeleton state data on null or unfiltered

src/components/pages/report/finance/tab/CustomerPaymentTab.tsx

@@ -14,6 +14,7 @@ import { ColumnDef } from '@tanstack/react-table';
 import { formatCurrency, formatDate, formatNumber, cn } from '@/lib/helper';
 import {
   CustomerPaymentReport,
+  CustomerPaymentRow,
   CustomerPaymentSummary,
 } from '@/types/api/report/customer-payment';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -27,6 +28,7 @@ import toast from 'react-hot-toast';
 import { generateCustomerPaymentExcel } from '@/components/pages/report/finance/export/CustomerPaymentExportXLSX';
 import { generateCustomerPaymentPDF } from '@/components/pages/report/finance/export/CustomerPaymentExportPDF';
 import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
+import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
 
 interface CustomerPaymentTabProps {
   tabId: string;
@@ -650,18 +652,37 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     <>
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
         {!isSubmitted ? (
-          <div className='mt-6 text-center text-base-content/50'>
-            Silakan klik tombol Filter untuk mengatur filter dan menampilkan
-            data.
-          </div>
+          <CustomerSupplierSkeleton
+            columns={getTableColumns({} as CustomerPaymentSummary)}
+            icon={
+              <Icon
+                icon='heroicons:funnel'
+                className='text-white'
+                width={20}
+                height={20}
+              />
+            }
+            title='No Filters Selected'
+            subtitle='Please choose filters to narrow down your results and make your search easier.'
+          />
         ) : isLoading ? (
           <div className='w-full flex flex-row justify-center items-center p-4'>
             <span className='loading loading-spinner loading-xl' />
           </div>
         ) : data.length === 0 ? (
-          <div className='mt-6 text-center text-base-content/50'>
-            Tidak ada data yang dapat ditampilkan...
-          </div>
+          <CustomerSupplierSkeleton
+            columns={getTableColumns({} as CustomerPaymentSummary)}
+            icon={
+              <Icon
+                icon='heroicons:chart-bar'
+                className='text-white'
+                width={20}
+                height={20}
+              />
+            }
+            title='Data Not Yet Available'
+            subtitle='Please change your filters to get the data.'
+          />
         ) : (
           data.map((customerReport) => {
             const summary = customerReport.summary || {