refactor(FE): Refactor FinanceTable and simplify Finance page structure

src/app/finance/page.tsx

@@ -3,12 +3,7 @@
 import FinanceTable from '@/components/pages/finance/FinanceTable';
 
 const Finance = () => {
-  return (
-    <section className='size-full p-6'>
-      <div className='flex flex-row gap-4'></div>
-      <FinanceTable />
-    </section>
-  );
+  return <FinanceTable />;
 };
 
 export default Finance;

src/components/pages/finance/FinanceTable.tsx

@@ -1,10 +1,19 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { CellContext } from '@tanstack/react-table';
+'use client';
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { CellContext, ColumnDef } from '@tanstack/react-table';
 import useSWR from 'swr';
+import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
+import { cn, formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
 
 import Button from '@/components/Button';
-import Card from '@/components/Card';
 import DateInput from '@/components/input/DateInput';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, {
@@ -12,7 +21,6 @@ import SelectInput, {
   useSelect,
 } from '@/components/input/SelectInput';
 import Table from '@/components/Table';
-import { formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Finance } from '@/types/api/finance/finance';
 import {
@@ -25,115 +33,149 @@ import { FinanceApi } from '@/services/api/finance';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { BankApi, CustomerApi, SupplierApi } from '@/services/api/master-data';
 import { Bank } from '@/types/api/master-data/bank';
-import { useModal } from '@/components/Modal';
+import Modal, { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
-import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
-import { Icon } from '@iconify/react';
-import RowDropdownOptions from '@/components/table/RowDropdownOptions';
-import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import { useUiStore } from '@/stores/ui/ui.store';
 import {
   FinanceTableFilterSchema,
   FinanceTableFilterValues,
 } from './FinanceTableFilter.schema';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
 
 const RowOptionsMenu = ({
-  type = 'dropdown',
+  popoverPosition = 'bottom',
   props,
   deleteClickHandler,
 }: {
-  type: 'dropdown' | 'collapse';
+  popoverPosition: 'bottom' | 'top';
   props: CellContext<Finance, unknown>;
   deleteClickHandler: () => void;
 }) => {
+  const popoverId = `finance#${props.row.original.id}`;
+  const popoverAnchorName = `--anchor-finance#${props.row.original.id}`;
+
+  const closePopover = () => {
+    const popover = document.getElementById(popoverId) as
+      | HTMLDivElement
+      | undefined;
+    popover?.hidePopover?.();
+  };
+
   return (
-    <RowOptionsMenuWrapper type={type}>
-      <RequirePermission
-        permissions={[
-          'lti.finance.transactions.detail',
-          'lti.finance.initial_balances.detail',
-          'lti.finance.injections.detail',
-          'lti.finance.payments.detail',
-        ]}
+    <div className='relative'>
+      <Button
+        tabIndex={0}
+        variant='ghost'
+        color='none'
+        className='p-2'
+        popoverTarget={popoverId}
+        style={{ anchorName: popoverAnchorName } as React.CSSProperties}
       >
-        <Button
-          href={`/finance/detail?financeId=${props.row.original.id}`}
-          variant='ghost'
-          color='primary'
-          className='justify-start text-sm'
-        >
-          <Icon icon='mdi:eye-outline' width={16} height={16} />
-          Detail
-        </Button>
-      </RequirePermission>
+        <Icon icon='material-symbols:more-vert' width={20} height={20} />
+      </Button>
 
-      {FINANCE_TRANSACTION_STATUS.includes(
-        props.row.original.transaction_type
-      ) && (
-        <RequirePermission permissions='lti.finance.payments.update'>
-          <Button
-            href={`/finance/detail/edit?financeId=${props.row.original.id}`}
-            variant='ghost'
-            color='warning'
-            className='justify-start text-sm'
+      <div
+        id={popoverId}
+        popover='auto'
+        style={{ positionAnchor: popoverAnchorName } as React.CSSProperties}
+        className={cn(
+          'fixed inset-auto bg-base-100 rounded-xl border border-base-content/5 shadow-sm w-full max-w-40 z-[100]',
+          popoverPosition === 'bottom'
+            ? 'top-[anchor(bottom)] left-[anchor(left)] mt-1'
+            : 'bottom-[anchor(top)] left-[anchor(left)] mb-1'
+        )}
+      >
+        <div className='flex flex-col bg-base-100 rounded-xl'>
+          <RequirePermission
+            permissions={[
+              'lti.finance.transactions.detail',
+              'lti.finance.initial_balances.detail',
+              'lti.finance.injections.detail',
+              'lti.finance.payments.detail',
+            ]}
           >
-            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-            Edit
-          </Button>
-        </RequirePermission>
-      )}
+            <Button
+              href={`/finance/detail?financeId=${props.row.original.id}`}
+              variant='ghost'
+              color='none'
+              className='p-3 justify-start text-sm font-semibold w-full'
+              onClick={closePopover}
+            >
+              <Icon icon='heroicons:eye' width={20} height={20} />
+              Detail
+            </Button>
+          </RequirePermission>
 
-      {FINANCE_INITIAL_BALANCE_STATUS.includes(
-        props.row.original.transaction_type
-      ) && (
-        <RequirePermission permissions='lti.finance.initial_balances.update'>
-          <Button
-            href={`/finance/detail/edit/initial-balance?financeId=${props.row.original.id}`}
-            variant='ghost'
-            color='warning'
-            className='justify-start text-sm'
-          >
-            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-            Edit
-          </Button>
-        </RequirePermission>
-      )}
+          {FINANCE_TRANSACTION_STATUS.includes(
+            props.row.original.transaction_type
+          ) && (
+            <RequirePermission permissions='lti.finance.payments.update'>
+              <Button
+                href={`/finance/detail/edit?financeId=${props.row.original.id}`}
+                variant='ghost'
+                color='none'
+                className='p-3 justify-start text-sm font-semibold w-full'
+                onClick={closePopover}
+              >
+                <Icon icon='mdi:pencil-outline' width={20} height={20} />
+                Edit
+              </Button>
+            </RequirePermission>
+          )}
 
-      {FINANCE_INJECTION_STATUS.includes(
-        props.row.original.transaction_type
-      ) && (
-        <RequirePermission permissions='lti.finance.injections.update'>
-          <Button
-            href={`/finance/detail/edit/injection?financeId=${props.row.original.id}`}
-            variant='ghost'
-            color='warning'
-            className='justify-start text-sm'
-          >
-            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-            Edit
-          </Button>
-        </RequirePermission>
-      )}
+          {FINANCE_INITIAL_BALANCE_STATUS.includes(
+            props.row.original.transaction_type
+          ) && (
+            <RequirePermission permissions='lti.finance.initial_balances.update'>
+              <Button
+                href={`/finance/detail/edit/initial-balance?financeId=${props.row.original.id}`}
+                variant='ghost'
+                color='none'
+                className='p-3 justify-start text-sm font-semibold w-full'
+                onClick={closePopover}
+              >
+                <Icon icon='mdi:pencil-outline' width={20} height={20} />
+                Edit
+              </Button>
+            </RequirePermission>
+          )}
 
-      <RequirePermission permissions='lti.finance.transactions.delete'>
-        <Button
-          onClick={deleteClickHandler}
-          variant='ghost'
-          color='error'
-          className='text-error hover:text-inherit'
-        >
-          <Icon
-            icon='material-symbols:delete-outline-rounded'
-            width={16}
-            height={16}
-            className='justify-start text-sm'
-          />
-          Delete
-        </Button>
-      </RequirePermission>
-    </RowOptionsMenuWrapper>
+          {FINANCE_INJECTION_STATUS.includes(
+            props.row.original.transaction_type
+          ) && (
+            <RequirePermission permissions='lti.finance.injections.update'>
+              <Button
+                href={`/finance/detail/edit/injection?financeId=${props.row.original.id}`}
+                variant='ghost'
+                color='none'
+                className='p-3 justify-start text-sm font-semibold w-full'
+                onClick={closePopover}
+              >
+                <Icon icon='mdi:pencil-outline' width={20} height={20} />
+                Edit
+              </Button>
+            </RequirePermission>
+          )}
+
+          <RequirePermission permissions='lti.finance.transactions.delete'>
+            <Button
+              onClick={() => {
+                deleteClickHandler();
+                closePopover();
+              }}
+              variant='ghost'
+              color='error'
+              className='p-3 justify-start text-sm font-semibold w-full focus-visible:text-error-content hover:text-error-content'
+            >
+              <Icon icon='mdi:delete-outline' width={20} height={20} />
+              Delete
+            </Button>
+          </RequirePermission>
+        </div>
+      </div>
+    </div>
   );
 };
 
@@ -171,6 +213,9 @@ const FinanceTable = () => {
     },
   });
 
+  // ===== FILTER MODAL STATE =====
+  const filterModal = useModal();
+
   // ===== State =====
   const deleteModal = useModal();
   const [selectedTransactionType, setSelectedTransactionType] = useState<
@@ -214,6 +259,18 @@ const FinanceTable = () => {
       updateFilter('sortBy', values.sort_by);
       updateFilter('startDate', values.start_date);
       updateFilter('endDate', values.end_date);
+      filterModal.closeModal();
+    },
+    onReset: () => {
+      updateFilter('search', '');
+      resetSearchValue();
+      updateFilter('transactionTypes', '');
+      updateFilter('bankIds', '');
+      updateFilter('customerIds', '');
+      updateFilter('supplierIds', '');
+      updateFilter('sortBy', '');
+      updateFilter('startDate', '');
+      updateFilter('endDate', '');
     },
   });
 
@@ -266,10 +323,41 @@ const FinanceTable = () => {
     });
   }, [bankOptions, bankRawData]);
 
+  // ===== ACTIVE FILTERS COUNT =====
+  const activeFiltersCount = useMemo(() => {
+    let count = 0;
+
+    if (tableFilterState.transactionTypes) count += 1;
+    if (tableFilterState.bankIds) count += 1;
+    if (tableFilterState.customerIds) count += 1;
+    if (tableFilterState.supplierIds) count += 1;
+    if (tableFilterState.sortBy) count += 1;
+    if (tableFilterState.startDate) count += 1;
+    if (tableFilterState.endDate) count += 1;
+
+    return count;
+  }, [
+    tableFilterState.transactionTypes,
+    tableFilterState.bankIds,
+    tableFilterState.customerIds,
+    tableFilterState.supplierIds,
+    tableFilterState.sortBy,
+    tableFilterState.startDate,
+    tableFilterState.endDate,
+  ]);
+
+  const hasFilters = activeFiltersCount > 0;
+
   // ===== Handler =====
-  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    filterFormik.setFieldValue('search', e.target.value);
-  };
+  const searchChangeHandler = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      updateFilter('search', e.target.value);
+      setSearchValue(e.target.value);
+      setPage(1);
+    },
+    [updateFilter, setSearchValue, setPage]
+  );
+
   const transactionTypeChangeHandler = (
     val: OptionType | OptionType[] | null
   ) => {
@@ -387,6 +475,11 @@ const FinanceTable = () => {
     }
   };
 
+  const handleFilterModalOpen = () => {
+    filterModal.openModal();
+    filterFormik.validateForm();
+  };
+
   const resetFilterHandler = () => {
     setSelectedTransactionType(null);
     setSelectedBank(null);
@@ -406,6 +499,7 @@ const FinanceTable = () => {
     updateFilter('startDate', '');
     updateFilter('endDate', '');
   };
+
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
@@ -417,8 +511,8 @@ const FinanceTable = () => {
     setIsDeleteLoading(false);
   };
 
-  const columns = useMemo(() => {
-    return [
+  const columns: ColumnDef<Finance>[] = useMemo(
+    () => [
       {
         header: 'ID',
         accessorKey: 'payment_code',
@@ -498,32 +592,17 @@ const FinanceTable = () => {
           };
 
           return (
-            <>
-              {currentPageSize > 2 && (
-                <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                  <RowOptionsMenu
-                    type='dropdown'
-                    props={props}
-                    deleteClickHandler={deleteClickHandler}
-                  />
-                </RowDropdownOptions>
-              )}
-
-              {currentPageSize <= 2 && (
-                <RowCollapseOptions>
-                  <RowOptionsMenu
-                    type='collapse'
-                    props={props}
-                    deleteClickHandler={deleteClickHandler}
-                  />
-                </RowCollapseOptions>
-              )}
-            </>
+            <RowOptionsMenu
+              props={props}
+              deleteClickHandler={deleteClickHandler}
+              popoverPosition={isLast2Rows ? 'top' : 'bottom'}
+            />
           );
         },
       },
-    ];
-  }, []);
+    ],
+    []
+  );
 
   useEffect(() => {
     return () => {
@@ -555,151 +634,258 @@ const FinanceTable = () => {
   }, [resetSearchValue, dateErrorShown]);
 
   return (
-    <section className='size-full flex flex-col gap-6'>
-      <div className='flex justify-end gap-2'>
-        <RequirePermission permissions='lti.finance.injections.create'>
-          <Button
-            color='warning'
-            className='min-w-24'
-            href='/finance/add/injection'
-          >
-            Injection Saldo Bank
-          </Button>
-        </RequirePermission>
-        <RequirePermission permissions='lti.finance.initial_balances.create'>
-          <Button
-            color='info'
-            className='text-white min-w-24'
-            href='/finance/add/initial-balance'
-          >
-            Saldo Awal
-          </Button>
-        </RequirePermission>
-        <RequirePermission permissions='lti.finance.payments.create'>
-          <Button color='primary' className='min-w-24' href='/finance/add'>
-            Tambah
-          </Button>
-        </RequirePermission>
-      </div>
-      <Card
-        variant='bordered'
-        className={{
-          wrapper: 'w-full',
-        }}
-        footer={
-          <div className='flex justify-end gap-2'>
+    <>
+      <div className='w-full'>
+        {/* Header Section */}
+        <div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
+          {/* Action Buttons */}
+          <div className='w-fit flex flex-row gap-3 flex-wrap'>
+            <RequirePermission permissions='lti.finance.injections.create'>
+              <Button
+                href='/finance/add/injection'
+                color='warning'
+                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
+              >
+                <Icon icon='mdi:bank-transfer-in' width={20} height={20} />
+                Add Injection (Saldo Bank)
+              </Button>
+            </RequirePermission>
+            <RequirePermission permissions='lti.finance.initial_balances.create'>
+              <Button
+                href='/finance/add/initial-balance'
+                color='info'
+                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
+              >
+                <Icon icon='mdi:cash-register' width={20} height={20} />
+                Add Initial Balance
+              </Button>
+            </RequirePermission>
+            <RequirePermission permissions='lti.finance.payments.create'>
+              <Button
+                href='/finance/add'
+                color='primary'
+                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
+              >
+                <Icon icon='heroicons:plus' width={20} height={20} />
+                Add Finance
+              </Button>
+            </RequirePermission>
+          </div>
+
+          {/* Search and Filter */}
+          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
+            <DebouncedTextInput
+              name='search'
+              placeholder='Search'
+              value={tableFilterState.search ?? ''}
+              onChange={searchChangeHandler}
+              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',
+              }}
+            />
+
             <Button
-              color='warning'
-              className='min-w-24'
-              onClick={resetFilterHandler}
+              variant='outline'
+              color='none'
+              onClick={handleFilterModalOpen}
+              className={cn(
+                'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
+                {
+                  'border-primary-gradient text-primary': hasFilters,
+                }
+              )}
             >
-              Reset
-            </Button>
-            <Button
-              color='primary'
-              className='min-w-24'
-              onClick={() => filterFormik.handleSubmit()}
-            >
-              Cari
+              <Icon icon='heroicons:funnel' width={20} height={20} />
+              Filter
+              {hasFilters && (
+                <span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
+                  {activeFiltersCount}
+                </span>
+              )}
             </Button>
           </div>
-        }
-      >
-        <div className='grid grid-cols-4 gap-6'>
-          <SelectInput
-            options={FINANCE_TRANSACTION_TYPE_OPTIONS}
-            label='Jenis Transaksi'
-            value={selectedTransactionType}
-            onChange={transactionTypeChangeHandler}
-            closeMenuOnSelect={false}
-            isClearable
-            isMulti
-          />
-          <SelectInput
-            options={customerOptions}
-            label={'Customer'}
-            value={selectedCustomerId}
-            onChange={customerIdChangeHandler}
-            onInputChange={customerInputValue}
-            onMenuScrollToBottom={customerLoadMore}
-            isLoading={customerIsLoadingOptions}
-            closeMenuOnSelect={false}
-            isClearable
-            isMulti
-          />
-          <SelectInput
-            options={supplierOptions}
-            label={'Supplier'}
-            value={selectedSupplierId}
-            onChange={supplierIdChangeHandler}
-            onInputChange={supplierInputValue}
-            onMenuScrollToBottom={supplierLoadMore}
-            isLoading={supplierIsLoadingOptions}
-            closeMenuOnSelect={false}
-            isClearable
-            isMulti
-          />
-          <SelectInput
-            options={bankSelectOptions}
-            label='Bank'
-            value={selectedBank}
-            onChange={bankChangeHandler}
-            onInputChange={bankInputValue}
-            onMenuScrollToBottom={bankLoadMore}
-            closeMenuOnSelect={false}
-            isClearable
-            isMulti
-          />
-          <SelectInput
-            options={sortByOptions}
-            label='Urutkan Berdasarkan'
-            value={selectedSortBy}
-            onChange={sortByChangeHandler}
-            isClearable
-          />
-          <DateInput
-            name='start_date'
-            label='Periode Tanggal (Mulai)'
-            value={filterFormik.values.start_date}
-            onChange={startDateChangeHandler}
-            errorMessage={
-              filterFormik.errors.end_date
-                ? filterFormik.errors.end_date
-                : undefined
-            }
-          />
-          <DateInput
-            name='end_date'
-            label='Periode Tanggal (Akhir)'
-            value={filterFormik.values.end_date}
-            onChange={endDateChangeHandler}
-            errorMessage={
-              filterFormik.errors.end_date
-                ? filterFormik.errors.end_date
-                : undefined
-            }
-          />
-          <DebouncedTextInput
-            name='search'
-            label='Cari'
-            placeholder='Cari'
-            value={filterFormik.values.search}
-            onChange={searchChangeHandler}
-          />
         </div>
-      </Card>
-      <Table<Finance>
-        data={isResponseSuccess(finances) ? finances.data : []}
-        columns={columns}
-        pageSize={tableFilterState.pageSize}
-        page={tableFilterState.page}
-        onPageChange={setPage}
-        onPageSizeChange={setPageSize}
-        totalItems={
-          isResponseSuccess(finances) ? finances.meta?.total_results : 0
-        }
-        isLoading={isLoading}
-      />
+
+        {/* Table Section */}
+        <div className='flex flex-col mb-4 -mx-4 px-4'>
+          {isLoading ? (
+            <div className='w-full flex flex-row justify-center items-center p-4'>
+              <span className='loading loading-spinner loading-xl' />
+            </div>
+          ) : (
+            <Table<Finance>
+              data={isResponseSuccess(finances) ? finances.data : []}
+              columns={columns}
+              pageSize={tableFilterState.pageSize}
+              page={tableFilterState.page}
+              totalItems={
+                isResponseSuccess(finances) ? finances.meta?.total_results : 0
+              }
+              onPageChange={setPage}
+              onPageSizeChange={setPageSize}
+              isLoading={isLoading}
+              className={{
+                containerClassName: 'p-3 mb-0',
+                headerColumnClassName: 'text-nowrap',
+              }}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Filter Modal */}
+      <Modal
+        ref={filterModal.ref}
+        className={{
+          modal: 'p-0',
+          modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
+        }}
+      >
+        {/* Modal Header */}
+        <div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
+          <div className='flex items-center gap-2 text-primary'>
+            <Icon icon='heroicons:funnel' width={20} height={20} />
+            <h3 className='font-medium text-sm'>Filter Data</h3>
+          </div>
+          <Button
+            variant='link'
+            onClick={filterModal.closeModal}
+            className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
+          >
+            <Icon icon='heroicons:x-mark' width={20} height={20} />
+          </Button>
+        </div>
+        <form
+          onSubmit={filterFormik.handleSubmit}
+          onReset={filterFormik.handleReset}
+        >
+          <div className='p-4 flex flex-col gap-1.5'>
+            <SelectInput
+              options={FINANCE_TRANSACTION_TYPE_OPTIONS}
+              label='Jenis Transaksi'
+              placeholder='Pilih Jenis Transaksi'
+              value={selectedTransactionType}
+              onChange={transactionTypeChangeHandler}
+              onInputChange={() => {}}
+              closeMenuOnSelect={false}
+              isClearable
+              isMulti
+              className={{ wrapper: 'w-full' }}
+            />
+            <SelectInput
+              options={customerOptions}
+              label='Customer'
+              placeholder='Pilih Customer'
+              value={selectedCustomerId}
+              onChange={customerIdChangeHandler}
+              onInputChange={customerInputValue}
+              onMenuScrollToBottom={customerLoadMore}
+              isLoading={customerIsLoadingOptions}
+              closeMenuOnSelect={false}
+              isClearable
+              isMulti
+              className={{ wrapper: 'w-full' }}
+            />
+            <SelectInput
+              options={supplierOptions}
+              label='Supplier'
+              placeholder='Pilih Supplier'
+              value={selectedSupplierId}
+              onChange={supplierIdChangeHandler}
+              onInputChange={supplierInputValue}
+              onMenuScrollToBottom={supplierLoadMore}
+              isLoading={supplierIsLoadingOptions}
+              closeMenuOnSelect={false}
+              isClearable
+              isMulti
+              className={{ wrapper: 'w-full' }}
+            />
+            <SelectInput
+              options={bankSelectOptions}
+              label='Bank'
+              placeholder='Pilih Bank'
+              value={selectedBank}
+              onChange={bankChangeHandler}
+              onInputChange={bankInputValue}
+              onMenuScrollToBottom={bankLoadMore}
+              closeMenuOnSelect={false}
+              isClearable
+              isMulti
+              className={{ wrapper: 'w-full' }}
+            />
+            <SelectInputRadio
+              options={sortByOptions}
+              label='Urutkan Berdasarkan'
+              placeholder='Pilih Urutan'
+              value={selectedSortBy}
+              onChange={sortByChangeHandler}
+              isClearable
+              className={{ wrapper: 'w-full' }}
+            />
+            <DateInput
+              name='start_date'
+              label='Periode Tanggal (Mulai)'
+              value={filterFormik.values.start_date}
+              onChange={startDateChangeHandler}
+              errorMessage={
+                filterFormik.errors.end_date
+                  ? filterFormik.errors.end_date
+                  : undefined
+              }
+            />
+            <DateInput
+              name='end_date'
+              label='Periode Tanggal (Akhir)'
+              value={filterFormik.values.end_date}
+              onChange={endDateChangeHandler}
+              errorMessage={
+                filterFormik.errors.end_date
+                  ? filterFormik.errors.end_date
+                  : undefined
+              }
+            />
+          </div>
+
+          {/* Modal Footer */}
+          <div className='flex justify-between items-center gap-4 p-4 border-t border-base-content/10 bg-gray-50'>
+            <Button
+              type='button'
+              variant='soft'
+              className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
+              onClick={() => {
+                filterFormik.resetForm();
+                setSelectedTransactionType(null);
+                setSelectedBank(null);
+                setSelectedCustomerId(null);
+                setSelectedSupplierId(null);
+                setSelectedSortBy(null);
+                resetFilterHandler();
+                filterModal.closeModal();
+              }}
+            >
+              Reset Filter
+            </Button>
+            <Button
+              type='submit'
+              className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
+              disabled={!filterFormik.isValid || filterFormik.isSubmitting}
+            >
+              Apply Filter
+            </Button>
+          </div>
+        </form>
+      </Modal>
+
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'
@@ -714,7 +900,7 @@ const FinanceTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
-    </section>
+    </>
   );
 };