From e980320d002c8a1220201f90f8edb33ce6c4cdf7 Mon Sep 17 00:00:00 2001 From: randy-ar Date: Thu, 29 Jan 2026 20:59:16 +0700 Subject: [PATCH] fix(FE): fixing report finance filter ui --- src/components/input/DateInput.tsx | 27 +- .../pages/dashboard/DashboardProduction.tsx | 1 + .../pages/report/finance/FinanceTabs.tsx | 2 +- .../report/finance/tab/CustomerPaymentTab.tsx | 412 ++++++++++-------- .../report/finance/tab/DebtSupplierTab.tsx | 6 +- 5 files changed, 253 insertions(+), 195 deletions(-) diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx index da1a4d81..7c0863c5 100644 --- a/src/components/input/DateInput.tsx +++ b/src/components/input/DateInput.tsx @@ -280,7 +280,7 @@ const DateInput = ({ ref={calendarModal.ref} className={{ modal: 'rounded', - modalBox: `!max-w-max min-h-${isRange ? '124' : '110'} flex flex-col`, + modalBox: `max-w-max flex flex-col`, }} closeOnBackdrop > @@ -296,7 +296,11 @@ const DateInput = ({ endMonth={maxDate ?? new Date(new Date().getFullYear() + 5, 11)} selected={selectedRange as DateRange} onSelect={handleSelectRange} - footer={
{displayValue}
} + footer={ +
+ {displayValue} +
+ } disabled={ [ minDate ? { before: minDate } : undefined, @@ -326,17 +330,26 @@ const DateInput = ({ )}
{isRange && ( - - Tekan dua kali untuk memilih tanggal awal + + Tekan dua kali untuk reset tanggal awal )} -
- {isRange && ( - )} diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx index 674f3719..27cc208b 100644 --- a/src/components/pages/dashboard/DashboardProduction.tsx +++ b/src/components/pages/dashboard/DashboardProduction.tsx @@ -463,6 +463,7 @@ const DashboardProduction = () => { Boolean(formik.errors.endDate) && Boolean(formik.touched.endDate) } + isRange />
diff --git a/src/components/pages/report/finance/FinanceTabs.tsx b/src/components/pages/report/finance/FinanceTabs.tsx index e7800f96..ffb0d3f1 100644 --- a/src/components/pages/report/finance/FinanceTabs.tsx +++ b/src/components/pages/report/finance/FinanceTabs.tsx @@ -19,7 +19,7 @@ const FinanceTabs = () => { { id: '2', label: 'Kontrol Pembayaran Customer', - content: , + content: , }, ]; diff --git a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx index dc1705ed..0ce0b904 100644 --- a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx +++ b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx @@ -1,4 +1,4 @@ -import { useState, useMemo, useCallback } from 'react'; +import { useState, useMemo, useCallback, useEffect } from 'react'; import useSWR from 'swr'; import { Icon } from '@iconify/react'; import Card from '@/components/Card'; @@ -11,7 +11,7 @@ import { FinanceApi } from '@/services/api/report/finance-report'; import { UserApi } from '@/services/api/user'; import Table from '@/components/Table'; import { ColumnDef } from '@tanstack/react-table'; -import { formatCurrency, formatDate, formatNumber } from '@/lib/helper'; +import { formatCurrency, formatDate, formatNumber, cn } from '@/lib/helper'; import { CustomerPaymentReport, CustomerPaymentSummary, @@ -26,8 +26,13 @@ import { useModal } from '@/components/Modal'; 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'; -const CustomerPaymentTab = () => { +interface CustomerPaymentTabProps { + tabId: string; +} + +const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => { // ===== STATE MANAGEMENT ===== const [isPdfExportLoading, setIsPdfExportLoading] = useState(false); const [isExcelExportLoading, setIsExcelExportLoading] = useState(false); @@ -111,6 +116,10 @@ const CustomerPaymentTab = () => { }; // ===== FILTER HANDLERS ===== + const handleFilterModalOpen = useCallback(() => { + filterModal.openModal(); + }, [filterModal]); + const handleResetFilters = useCallback(() => { setIsSubmitted(false); setFilterCustomer([]); @@ -298,6 +307,92 @@ const CustomerPaymentTab = () => { } }, [customerPaymentExport]); + // ===== REGISTER TAB ACTIONS TO STORE ===== + const setTabActions = useFinanceTabStore((state) => state.setTabActions); + const clearTabActions = useFinanceTabStore((state) => state.clearTabActions); + + useEffect(() => { + setTabActions( + tabId, +
+ + + + + Export +
+ +
+ + } + align='end' + className={{ + content: + 'mt-1 p-0 w-full shadow-button-soft border border-base-content/10 rounded-lg', + }} + > + + + + + +
+ ); + }, [ + tabId, + hasFilters, + activeFiltersCount, + isAnyExportLoading, + handleExportExcel, + handleExportPdf, + filterModal.open, + setTabActions, + ]); + + // Cleanup on unmount + useEffect(() => { + return () => { + clearTabActions(tabId); + }; + }, [tabId, clearTabActions]); + const getTableColumns = ( summary: CustomerPaymentSummary ): ColumnDef[] => { @@ -552,181 +647,10 @@ const CustomerPaymentTab = () => { }; return ( -
- -
- - - - - Export - - } - align='end' - > - - - - - -
- - {/* Filter Modal */} - -
- {/* Modal Header */} -
-
- -

Filter Data

-
- -
-
-
-
- { - setFilterStartDate(e.target.value); - }} - className={{ wrapper: 'w-full' }} - /> -
- -
- { - setFilterEndDate(e.target.value); - }} - className={{ wrapper: 'w-full' }} - /> -
-
- -
- { - setFilterCustomer( - Array.isArray(val) ? val : val ? [val] : [] - ); - }} - onInputChange={setCustomerInputValue} - isLoading={isLoadingCustomers} - isClearable - onMenuScrollToBottom={loadMoreCustomers} - className={{ wrapper: 'w-full' }} - /> -
- - {/* TODO: Uncomment when BE is ready */} - {/*
- { - setFilterSales(Array.isArray(val) ? val : val ? [val] : []); - }} - onInputChange={setSalesInputValue} - isLoading={isLoadingSales} - isClearable - onMenuScrollToBottom={loadMoreSales} - className={{ wrapper: 'w-full' }} - /> -
*/} - - {/* TODO: Uncomment when BE is ready */} - {/*
- -
*/} -
- - {/* Action Buttons */} -
- - -
-
- - + <> +
{!isSubmitted ? ( -
+
Silakan klik tombol Filter untuk mengatur filter dan menampilkan data.
@@ -735,7 +659,7 @@ const CustomerPaymentTab = () => {
) : data.length === 0 ? ( -
+
Tidak ada data yang dapat ditampilkan...
) : ( @@ -757,15 +681,17 @@ const CustomerPaymentTab = () => { title={customerReport.customer.name} subtitle={`(${customerReport.customer.address})`} className={{ - wrapper: 'w-full rounded-2xl', + wrapper: 'w-full rounded-lg border-none', body: 'p-0', title: - 'py-1.5 px-3 bg-primary text-white text-lg font-normal', + 'px-2 py-1.5 font-normal text-sm bg-primary text-white', subtitle: - 'px-3 pb-1 bg-primary text-white text-sm font-normal', + 'px-2 pb-1.5 bg-primary text-white text-xs font-normal', + collapsible: 'rounded-lg', }} variant='bordered' collapsible={true} + defaultCollapsed={true} > { renderFooter={customerReport.rows.length > 0} className={{ containerClassName: 'w-full mb-0!', - tableWrapperClassName: 'overflow-x-auto', + tableWrapperClassName: + 'overflow-x-auto rounded-tr-none rounded-tl-none', tableClassName: 'w-full table-auto text-sm', headerRowClassName: 'border-b border-b-gray-200 bg-gray-50', headerColumnClassName: @@ -799,8 +726,8 @@ const CustomerPaymentTab = () => { if (row.index === 0) { return (
{ ); }) )} - - + + + {/* Filter Modal */} + + {/* Modal Header */} +
+
+ +

Filter Data

+
+ +
+
+
+ +
+ { + setFilterStartDate(e.target.value); + }} + className={{ wrapper: 'w-full' }} + isNestedModal + /> +
+ + { + setFilterEndDate(e.target.value); + }} + className={{ wrapper: 'w-full' }} + isNestedModal + /> +
+
+ + { + setFilterCustomer(Array.isArray(val) ? val : val ? [val] : []); + }} + onInputChange={setCustomerInputValue} + isLoading={isLoadingCustomers} + isClearable + onMenuScrollToBottom={loadMoreCustomers} + className={{ wrapper: 'w-full' }} + /> + + {/* TODO: Uncomment when BE is ready */} + {/*
+ { + setFilterSales(Array.isArray(val) ? val : val ? [val] : []); + }} + onInputChange={setSalesInputValue} + isLoading={isLoadingSales} + isClearable + onMenuScrollToBottom={loadMoreSales} + className={{ wrapper: 'w-full' }} + /> +
*/} + + {/* TODO: Uncomment when BE is ready */} + {/*
+ +
*/} + + {/* Action Buttons */} +
+
+ + +
+ + ); }; diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx index 811c739b..ac53a7a3 100644 --- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx +++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx @@ -686,6 +686,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => { formik.touched.startDate && !!formik.errors.startDate } errorMessage={formik.errors.startDate} + isNestedModal />
{ className={{ wrapper: 'w-full' }} isError={formik.touched.endDate && !!formik.errors.endDate} errorMessage={formik.errors.endDate} + isNestedModal /> @@ -759,7 +761,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => { {/* Action Buttons */} -
+