refactor(FE): Refactor table skeleton components for consistency

src/components/pages/closing/ClosingsTable.tsx

@@ -351,19 +351,19 @@ const ClosingsTable = () => {
               <span className='loading loading-spinner loading-xl' />
             </div>
           ) : data.length === 0 ? (
-            <ClosingTableSkeleton
-              columns={closingsColumns}
-              icon={
-                <Icon
-                  icon='heroicons:chart-bar'
-                  className='text-white'
-                  width={20}
-                  height={20}
-                />
-              }
-              title='Data Closing Belum Tersedia'
-              subtitle='Tidak ada data closing untuk saat ini.'
-            />
+            <div className='mt-3'>
+              <ClosingTableSkeleton
+                columns={closingsColumns}
+                icon={
+                  <Icon
+                    icon='heroicons:document-text'
+                    className='text-white'
+                    width={20}
+                    height={20}
+                  />
+                }
+              />
+            </div>
           ) : (
             <Table<Closing>
               data={isResponseSuccess(closings) ? closings?.data : []}
@@ -382,10 +382,7 @@ const ClosingsTable = () => {
               rowSelection={rowSelection}
               setRowSelection={setRowSelection}
               className={{
-                containerClassName: cn('mt-3', {
-                  'w-full mb-0':
-                    isResponseSuccess(closings) && closings?.data?.length === 0,
-                }),
+                containerClassName: cn('mt-3 mb-0'),
                 headerColumnClassName: 'text-nowrap',
               }}
             />

src/components/pages/closing/skeleton/ClosingTableSkeleton.tsx

@@ -6,13 +6,13 @@ import { ColumnDef } from '@tanstack/react-table';
 const ClosingTableSkeleton = ({
   columns,
   icon,
-  title,
-  subtitle,
+  title = 'No Data Available',
+  subtitle = 'There is no closing data displayed. Enter closing data to get started.',
 }: {
   columns: ColumnDef<Closing>[];
   icon: React.ReactNode;
-  title: string;
-  subtitle: string;
+  title?: string;
+  subtitle?: string;
 }) => {
   return (
     <div className='relative size-full'>