diff --git a/src/components/pages/finance/FinanceDetail.tsx b/src/components/pages/finance/FinanceDetail.tsx index 76d2d1a0..3ee9a7df 100644 --- a/src/components/pages/finance/FinanceDetail.tsx +++ b/src/components/pages/finance/FinanceDetail.tsx @@ -64,7 +64,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => { }, { label: 'Nominal', - value: formatCurrency(finance.nominal), + value: formatCurrency(Math.abs(finance.nominal)), }, ].filter((item) => { // Hide party account number row if transaction type is INJECTION diff --git a/src/components/pages/finance/FinanceTable.tsx b/src/components/pages/finance/FinanceTable.tsx index ff62b9db..505e411f 100644 --- a/src/components/pages/finance/FinanceTable.tsx +++ b/src/components/pages/finance/FinanceTable.tsx @@ -19,6 +19,7 @@ import { FINANCE_INITIAL_BALANCE_STATUS, FINANCE_INJECTION_STATUS, FINANCE_TRANSACTION_STATUS, + FINANCE_TRANSACTION_TYPE_OPTIONS, } from '@/config/constant'; import { FinanceApi } from '@/services/api/finance'; import { isResponseSuccess } from '@/lib/api-helper'; @@ -65,24 +66,19 @@ const RowOptionsMenu = ({ {FINANCE_TRANSACTION_STATUS.includes( props.row.original.transaction_type - ) && - props.row.original.party?.type !== 'SUPPLIER' && ( - - - - )} + ) && ( + + + + )} {FINANCE_INITIAL_BALANCE_STATUS.includes( props.row.original.transaction_type @@ -148,7 +144,8 @@ const FinanceTable = () => { search: '', transactionType: '', bankId: '', - partyType: '', + customerId: '', + supplierId: '', sortBy: '', startDate: '', endDate: '', @@ -158,7 +155,8 @@ const FinanceTable = () => { pageSize: 'limit', transactionType: 'transaction_type', bankId: 'bank_id', - partyType: 'party_type', + customerId: 'customer_id', + supplierId: 'supplier_id', sortBy: 'sort_date', startDate: 'start_date', endDate: 'end_date', @@ -172,17 +170,24 @@ const FinanceTable = () => { search: '', transactionType: '', bankId: '', - partyType: '', + customerId: '', + supplierId: '', sortBy: '', startDate: '', endDate: '', }); - const [selectedTransactionType, setSelectedTransactionType] = - useState(null); - const [selectedBank, setSelectedBank] = useState(null); - const [selectedPartyType, setSelectedPartyType] = useState( - null - ); + const [selectedTransactionType, setSelectedTransactionType] = useState< + OptionType | OptionType[] | null + >(null); + const [selectedBank, setSelectedBank] = useState< + OptionType | OptionType[] | null + >(null); + const [selectedCustomerId, setSelectedCustomerId] = useState< + OptionType | OptionType[] | null + >(null); + const [selectedSupplierId, setSelectedSupplierId] = useState< + OptionType | OptionType[] | null + >(null); const [selectedSortBy, setSelectedSortBy] = useState(null); const [selectedFinance, setSelectedFinance] = useState(null); const [isDeleteLoading, setIsDeleteLoading] = useState(false); @@ -197,27 +202,18 @@ const FinanceTable = () => { FinanceApi.getAllFetcher ); - // ===== Options ===== - const transactionTypeOptions = useMemo(() => { - return [ - { label: 'Customer', value: 'CUSTOMER' }, - { label: 'Supplier', value: 'SUPPLIER' }, - ]; - }, []); const { - options: partyTypeOptions, - isLoadingOptions: partyTypeIsLoadingOptions, - setInputValue: partyTypeInputValue, - loadMore: partyTypeLoadMore, - } = useSelect( - selectedTransactionType - ? selectedTransactionType.value === 'CUSTOMER' - ? CustomerApi.basePath - : SupplierApi.basePath - : '', - 'id', - 'name' - ); + options: customerOptions, + isLoadingOptions: customerIsLoadingOptions, + setInputValue: customerInputValue, + loadMore: customerLoadMore, + } = useSelect(CustomerApi.basePath, 'id', 'name'); + const { + options: supplierOptions, + isLoadingOptions: supplierIsLoadingOptions, + setInputValue: supplierInputValue, + loadMore: supplierLoadMore, + } = useSelect(SupplierApi.basePath, 'id', 'name'); const sortByOptions = useMemo(() => { return [ { label: 'Tanggal Pembayaran', value: 'payment_date' }, @@ -238,24 +234,47 @@ const FinanceTable = () => { const transactionTypeChangeHandler = ( val: OptionType | OptionType[] | null ) => { - setSelectedTransactionType(val as OptionType); + setSelectedTransactionType(val); setPendingFilters((prev) => ({ ...prev, - transactionType: val ? ((val as OptionType).value as string) : '', + transactionType: val + ? Array.isArray(val) + ? val.map((item) => item.value).join(',') + : (val.value as string) + : '', })); }; const bankChangeHandler = (val: OptionType | OptionType[] | null) => { - setSelectedBank(val as OptionType); + setSelectedBank(val); setPendingFilters((prev) => ({ ...prev, - bankId: val ? ((val as OptionType).value as string) : '', + bankId: val + ? Array.isArray(val) + ? val.map((item) => item.value).join(',') + : (val.value as string) + : '', })); }; - const partyTypeChangeHandler = (val: OptionType | OptionType[] | null) => { - setSelectedPartyType(val as OptionType); + const customerIdChangeHandler = (val: OptionType | OptionType[] | null) => { + setSelectedCustomerId(val); setPendingFilters((prev) => ({ ...prev, - partyType: val ? ((val as OptionType).value as string) : '', + customerId: val + ? Array.isArray(val) + ? val.map((item) => item.value).join(',') + : (val.value as string) + : '', + })); + }; + const supplierIdChangeHandler = (val: OptionType | OptionType[] | null) => { + setSelectedSupplierId(val); + setPendingFilters((prev) => ({ + ...prev, + supplierId: val + ? Array.isArray(val) + ? val.map((item) => item.value).join(',') + : (val.value as string) + : '', })); }; const sortByChangeHandler = (val: OptionType | OptionType[] | null) => { @@ -279,7 +298,8 @@ const FinanceTable = () => { updateFilter('search', pendingFilters.search); updateFilter('transactionType', pendingFilters.transactionType); updateFilter('bankId', pendingFilters.bankId); - updateFilter('partyType', pendingFilters.partyType); + updateFilter('customerId', pendingFilters.customerId); + updateFilter('supplierId', pendingFilters.supplierId); updateFilter('sortBy', pendingFilters.sortBy); updateFilter('startDate', pendingFilters.startDate); updateFilter('endDate', pendingFilters.endDate); @@ -287,14 +307,16 @@ const FinanceTable = () => { const resetFilterHandler = () => { setSelectedTransactionType(null); setSelectedBank(null); - setSelectedPartyType(null); + setSelectedCustomerId(null); + setSelectedSupplierId(null); setSelectedSortBy(null); const emptyFilters = { search: '', transactionType: '', bankId: '', - partyType: '', + customerId: '', + supplierId: '', sortBy: '', startDate: '', endDate: '', @@ -304,7 +326,8 @@ const FinanceTable = () => { updateFilter('search', ''); updateFilter('transactionType', ''); updateFilter('bankId', ''); - updateFilter('partyType', ''); + updateFilter('customerId', ''); + updateFilter('supplierId', ''); updateFilter('sortBy', ''); updateFilter('startDate', ''); updateFilter('endDate', ''); @@ -477,27 +500,34 @@ const FinanceTable = () => { >
+ { onInputChange={bankInputValue} onMenuScrollToBottom={bankLoadMore} isClearable - /> - { value={pendingFilters.endDate} onChange={endDateChangeHandler} /> +
diff --git a/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx b/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx index e1a31415..cb46c0e1 100644 --- a/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx +++ b/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx @@ -245,7 +245,11 @@ const FormFinanceAddInitialBalance = ({ } required isClearable - isDisabled={!formik.values.party_type_option?.value} + isDisabled={ + !formik.values.party_type_option?.value || + (type === 'edit' && + formik.values.party_type_option?.value == 'SUPPLIER') + } />