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

src/components/pages/report/finance/skeleton/CustomerSupplierSkeleton.tsx

@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { CustomerPaymentRow } from '@/types/api/report/customer-payment';
+import { ColumnDef } from '@tanstack/react-table';
+
+const CustomerSupplierSkeleton = ({
+  columns,
+  icon,
+  title,
+  subtitle,
+}: {
+  columns: ColumnDef<CustomerPaymentRow>[];
+  icon: React.ReactNode;
+  title: string;
+  subtitle: string;
+}) => {
+  return (
+    <div className='relative size-full'>
+      <Table
+        data={[]}
+        columns={columns}
+        isLoading={true}
+        className={{
+          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
+          headerColumnClassName: 'whitespace-nowrap',
+          containerClassName: 'mb-0 overflow-hidden',
+          tableWrapperClassName: 'overflow-hidden',
+        }}
+      />
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
+      </div>
+    </div>
+  );
+};
+
+export default CustomerSupplierSkeleton;

src/components/pages/report/finance/skeleton/DebtSupplierSkeleton.tsx

@@ -0,0 +1,38 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { DebtRow } from '@/types/api/report/debt-supplier';
+import { Icon } from '@iconify/react';
+import { ColumnDef } from '@tanstack/react-table';
+
+const DebtSupplierSkeleton = ({
+  columns,
+  icon,
+  title,
+  subtitle,
+}: {
+  columns: ColumnDef<DebtRow>[];
+  icon: React.ReactNode;
+  title: string;
+  subtitle: string;
+}) => {
+  return (
+    <div className='relative size-full'>
+      <Table
+        data={[]}
+        columns={columns}
+        isLoading={true}
+        className={{
+          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
+          headerColumnClassName: 'whitespace-nowrap',
+          containerClassName: 'mb-0 overflow-hidden',
+          tableWrapperClassName: 'overflow-hidden',
+        }}
+      />
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
+      </div>
+    </div>
+  );
+};
+
+export default DebtSupplierSkeleton;

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 || {

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

@@ -35,6 +35,8 @@ import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
 import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
 import StatusBadge from '@/components/helper/StatusBadge';
+import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
 
 const dueStatus: Record<string, Color> = {
   'Sudah Jatuh Tempo': 'error',
@@ -332,7 +334,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     };
   }, [tabId, clearTabActions]);
 
-  const getTableColumns = (supplier: DebtSupplier): ColumnDef<DebtRow>[] => [
+  const getTableColumns = (supplier?: DebtSupplier): ColumnDef<DebtRow>[] => [
     {
       id: 'no',
       header: 'No',
@@ -398,8 +400,10 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         return <div className='text-center'>{formatNumber(value)} Hari</div>;
       },
       footer: () => {
-        const value = supplier.total.aging;
-        return <div className='text-center'>{formatNumber(value)} Hari</div>;
+        const value = supplier?.total.aging;
+        return (
+          <div className='text-center'>{formatNumber(value || 0)} Hari</div>
+        );
       },
     },
     {
@@ -460,10 +464,10 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         );
       },
       footer: () => {
-        const value = supplier.total.total_price;
+        const value = supplier?.total.total_price;
         return (
-          <div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
-            {formatCurrency(value)}
+          <div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
+            {formatCurrency(value || 0)}
           </div>
         );
       },
@@ -482,10 +486,10 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         );
       },
       footer: () => {
-        const value = supplier.total.payment_price;
+        const value = supplier?.total.payment_price;
         return (
-          <div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
-            {formatCurrency(value)}
+          <div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
+            {formatCurrency(value || 0)}
           </div>
         );
       },
@@ -504,10 +508,10 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         );
       },
       footer: () => {
-        const value = supplier.total.debt_price;
+        const value = supplier?.total.debt_price;
         return (
-          <div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
-            {formatCurrency(value)}
+          <div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
+            {formatCurrency(value || 0)}
           </div>
         );
       },
@@ -541,18 +545,37 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     <>
       <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>
+          <DebtSupplierSkeleton
+            columns={getTableColumns()}
+            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>
+          <DebtSupplierSkeleton
+            columns={getTableColumns()}
+            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((supplierReport) => {
             return (