refactor(FE): Add Icon component and update table styles

src/components/pages/closing/table/FinanceClosingTable.tsx

@@ -151,7 +151,7 @@ const FinanceClosingTable = ({
                         .filter((row) => row.code !== 'custom_row').length;
                       return dataRowsBefore + 1;
                     },
-                    footer: (props) => {
+                    footer: () => {
                       return 'HPP';
                     },
                   },
@@ -286,6 +286,7 @@ const FinanceClosingTable = ({
                   footerRowClassName: 'border-t-2 border-gray-300',
                   footerColumnClassName:
                     'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                  paginationClassName: 'hidden',
                 }}
                 renderCustomRow={(row) => {
                   const rowData = row.original;

src/components/pages/closing/table/sapronak/IncomingSapronaksSummaryTable.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
+import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import Card from '@/components/Card';
 

src/components/pages/closing/table/sapronak/IncomingSapronaksTable.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
+import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Card from '@/components/Card';
@@ -135,7 +136,19 @@ const ClosingIncomingSapronaksTable = ({
               placeholder='Cari Sapronak Masuk'
               value={tableFilterState.search}
               onChange={searchChangeHandler}
-              className={{ wrapper: 'sm:max-w-3xs' }}
+              startAdornment={
+                <Icon
+                  icon='heroicons:magnifying-glass'
+                  width={20}
+                  height={20}
+                />
+              }
+              className={{
+                wrapper: 'w-full min-w-24 max-w-3xs',
+                inputWrapper: 'rounded-xl! shadow-button-soft',
+                input:
+                  'placeholder:font-semibold placeholder:text-base-content/50',
+              }}
             />
           </div>
         </div>

src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
+import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import Card from '@/components/Card';
 

src/components/pages/closing/table/sapronak/OutgoingSapronaksTable.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
+import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Card from '@/components/Card';
@@ -135,7 +136,19 @@ const ClosingOutgoingSapronaksTable = ({
               placeholder='Cari Sapronak Keluar'
               value={tableFilterState.search}
               onChange={searchChangeHandler}
-              className={{ wrapper: 'sm:max-w-3xs' }}
+              startAdornment={
+                <Icon
+                  icon='heroicons:magnifying-glass'
+                  width={20}
+                  height={20}
+                />
+              }
+              className={{
+                wrapper: 'w-full min-w-24 max-w-3xs',
+                inputWrapper: 'rounded-xl! shadow-button-soft',
+                input:
+                  'placeholder:font-semibold placeholder:text-base-content/50',
+              }}
             />
           </div>
         </div>