diff --git a/src/entities/additional-service/model/fund-account/constant.ts b/src/entities/additional-service/model/fund-account/constant.ts index fc86209..539410c 100644 --- a/src/entities/additional-service/model/fund-account/constant.ts +++ b/src/entities/additional-service/model/fund-account/constant.ts @@ -1,8 +1,17 @@ -import { FundAccountStatus } from './types'; +import { FundAccountReceiveAccountNameNo, FundAccountStatus } from './types'; export const FundAccountStatusBtnGroup = [ {name: '전체', value: FundAccountStatus.ALL}, {name: '성공', value: FundAccountStatus.SUCCESS}, {name: '실패', value: FundAccountStatus.FAIL}, {name: '중지', value: FundAccountStatus.PENDING}, -]; \ No newline at end of file +]; + +export const FundAccountReceiveAccountNameNoOptionsGroup = [ + {name: '수취인', value: FundAccountReceiveAccountNameNo.ReceiveAccountName }, + {name: '계좌번호', value: FundAccountReceiveAccountNameNo.ReceiveAccountNo }, +]; + +export const FundAccountReceiveBankCodeOptionsGroup = [ + {name: 'KB', value: 'KB'} +] \ No newline at end of file diff --git a/src/entities/additional-service/model/fund-account/types.ts b/src/entities/additional-service/model/fund-account/types.ts index db1ed6e..22c35b0 100644 --- a/src/entities/additional-service/model/fund-account/types.ts +++ b/src/entities/additional-service/model/fund-account/types.ts @@ -9,6 +9,11 @@ export interface FundAccountTabProps { activeTab: FundAccountTabKeys; } +export enum FundAccountReceiveAccountNameNo { + ReceiveAccountNo = 'ReceiveAccountNo', + ReceiveAccountName = 'ReceiveAccountName' +}; + export interface ExtensionFundAccountTransferRequestParams { mid: string; @@ -147,5 +152,5 @@ export interface ExtensionFundAccountBalanceParams { mid: string; }; export interface ExtensionFundAccountBalanceResponse { - balalnce: number; + balance: number; }; \ No newline at end of file diff --git a/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx b/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx new file mode 100644 index 0000000..2805be1 --- /dev/null +++ b/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx @@ -0,0 +1,168 @@ +import { useEffect, useState } from 'react'; +import { FundAccountReceiveAccountNameNo, FundAccountStatus } from '../../model/fund-account/types'; +import moment from 'moment'; +import { motion } from 'framer-motion'; +import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant'; +import { IMAGE_ROOT } from '@/shared/constants/common'; +import { FilterSelect } from '@/shared/ui/filter/select'; +import { FilterCalendar } from '@/shared/ui/filter/calendar'; +import { FundAccountReceiveAccountNameNoOptionsGroup, FundAccountReceiveBankCodeOptionsGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant'; +import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; +import { FilterSelectInput } from '@/shared/ui/filter/select-input'; + +export interface FundAccountTransactionFilterProps { + filterOn: boolean; + setFilterOn: (filterOn: boolean) => void; + mid: string; + receiveAccountName: string; + receiveAccountNo: string; + fromDate: string; + toDate: string; + receiveBankCode: string; + status: FundAccountStatus; + setMid: (mid: string) => void; + setReceiveAccountName: (receiveAccountName: string) => void; + setReceiveAccountNo: (receiveAccountNo: string) => void; + setFromDate: (fromDate: string) => void; + setToDate: (toDate: string) => void; + setReceiveBankCode: (receiveBankCode: string) => void; + setStatus: (status: FundAccountStatus) => void; +}; +export const FundAccountTransactionFilter = ({ + filterOn, + setFilterOn, + mid, + receiveAccountName, + receiveAccountNo, + fromDate, + toDate, + receiveBankCode, + status, + setMid, + setReceiveAccountName, + setReceiveAccountNo, + setFromDate, + setToDate, + setReceiveBankCode, + setStatus +}: FundAccountTransactionFilterProps) => { + + const [filterMid, setFilterMid] = useState(mid); + const [filterReceiveAccountName, setFilterReceiveAccountName] = useState(receiveAccountName); + const [filterReceiveAccountNo, setFilterReceiveAccountNo] = useState(receiveAccountNo); + const [filterFromDate, setFilterFromDate] = useState(moment(fromDate).format('YYYY.MM.DD')); + const [filterToDate, setFilterToDate] = useState(moment(toDate).format('YYYY.MM.DD')); + const [filterReceiveBankCode, setFilterReceiveBankCode] = useState(receiveBankCode); + const [filterStatus, setFilterStatus] = useState(status); + const [ + filterReceiveAccountNameNoSelectValue, + setFilterReceiveAccountNameNoSelectValue + ] = useState(FundAccountReceiveAccountNameNo.ReceiveAccountName); + const [ + filterReceiveAccountNameNoInputValue, + setFilterReceiveAccountNameNoInputValue + ] = useState(''); + + const onClickToClose = () => { + setFilterOn(false); + }; + + const onClickToSetFilter = () => { + setMid(filterMid); + if(filterReceiveAccountNameNoSelectValue === FundAccountReceiveAccountNameNo.ReceiveAccountName){ + setReceiveAccountName(filterReceiveAccountNameNoInputValue); + setReceiveAccountNo(''); + } + else if(filterReceiveAccountNameNoSelectValue === FundAccountReceiveAccountNameNo.ReceiveAccountNo){ + setReceiveAccountName(''); + setReceiveAccountNo(filterReceiveAccountNameNoInputValue); + } + + setFromDate(filterFromDate); + setToDate(filterToDate); + setReceiveBankCode(filterReceiveBankCode); + setStatus(filterStatus); + onClickToClose(); + }; + + let MidOptions = [ + {name: 'nictest001m', value: 'nictest001m'} + ]; + + useEffect(() => { + setFilterStatus(status); + }, [status]); + + return ( + <> + +
+
+
필터
+
+ +
+
+
+ + + + + +
+
+ +
+
+ + + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/filter/payout-filter.tsx b/src/entities/additional-service/ui/filter/payout-filter.tsx index 671acf3..97d84d6 100644 --- a/src/entities/additional-service/ui/filter/payout-filter.tsx +++ b/src/entities/additional-service/ui/filter/payout-filter.tsx @@ -66,7 +66,6 @@ export const PayoutFilter = ({ const [filterMinAmount, setFilterMinAmount] = useState(minAmount || ''); const [filterMaxAmount, setFilterMaxAmount] = useState(maxAmount || ''); - const onClickToClose = () => { setFilterOn(false); }; @@ -141,7 +140,7 @@ export const PayoutFilter = ({ title='지급상태' activeValue={ filterDisbursementStatus } btnGroups={ PayoutDisbursementStatusBtnGroup } - setter={ setDisbursementStatus } + setter={ setFilterDisbursementStatus } > { const { navigate } = useNavigate(); @@ -28,12 +33,19 @@ export const FundAccountTransferListWrap = () => { const [filterOn, setFilterOn] = useState(false); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const [mid, setMid] = useState('nictest001m'); + const [receiveAccountName, setReceiveAccountName] = useState(''); + const [receiveAccountNo, setReceiveAccountNo] = useState(''); const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD')); const [toDate, setToDate] = useState(moment().format('YYYYMMDD')); const [status, setStatus] = useState(FundAccountStatus.ALL); + const [receiveBankCode, setReceiveBankCode] = useState(''); + + const [balance, setBalance] = useState(0); const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation(); const { mutateAsync: extensionFundAccountTransferExcel } = useExtensionFundAccountTransferExcelMutation(); + const { mutateAsync: extensionFundAccountBalance } = useExtensionFundAccountBalanceMutation(); + const callList = (option?: { sortBy?: string, val?: string @@ -69,6 +81,16 @@ export const FundAccountTransferListWrap = () => { }); }; + const callBalance = () => { + let params: ExtensionFundAccountBalanceParams = { + mid: mid + }; + extensionFundAccountBalance(params).then((rs: ExtensionFundAccountBalanceResponse) => { + console.log(rs); + setBalance(rs.balance); + }); + }; + const assembleData = (content: Array) => { let data: any = {}; if(content && !!content[0] && content.length > 0){ @@ -79,7 +101,7 @@ export const FundAccountTransferListWrap = () => { data[groupDate] = []; } if(!!groupDate && data.hasOwnProperty(groupDate)){ - data[groupDate].push(content[i]); + data[groupDate].push(items[i]); } } } @@ -123,6 +145,7 @@ export const FundAccountTransferListWrap = () => { useEffect(() => { callList(); + callBalance(); }, []); return ( @@ -162,7 +185,13 @@ export const FundAccountTransferListWrap = () => {
잔액 - 2,000,000,000원 + + 원 +
@@ -177,6 +206,7 @@ export const FundAccountTransferListWrap = () => { onClickToSort={ onClickToSort } >
+
{ FundAccountStatusBtnGroup.map((value, index) => ( { >{ value.name } )) } +
-
25.06.08(일)
-
-
-
-
-
-
김*환(7000)
-
- 20:00 - ㅣ - 미결제 - ㅣ - 결제대기 - ㅣ - SMS -
-
-
5,254,000원
-
-
-
-
-
-
-
김*환(7000)
-
- 20:00 - ㅣ - 미결제 - ㅣ - 결제대기 - ㅣ - SMS -
-
-
5,254,000원
-
- -
25.06.08(일)
-
-
-
-
-
-
김*환(7000)
-
- 20:00 - ㅣ - 미결제 - ㅣ - 결제대기 - ㅣ - SMS -
-
-
5,254,000원
-
-
-
-
-
-
-
김*환(7000)
-
- 20:00 - ㅣ - 미결제 - ㅣ - 결제대기 - ㅣ - SMS -
-
-
5,254,000원
-
+ { getListDateGroup() }
- + + ); }; \ No newline at end of file diff --git a/src/entities/additional-service/ui/list-date-group.tsx b/src/entities/additional-service/ui/list-date-group.tsx index c401527..48b4c09 100644 --- a/src/entities/additional-service/ui/list-date-group.tsx +++ b/src/entities/additional-service/ui/list-date-group.tsx @@ -47,6 +47,13 @@ export const ListDateGroup = ({ companyName={ items[i]?. companyName } disbursementStatus={ items[i]?.disbursementStatus } disbursementAmount={ items[i]?.disbursementAmount } + + transferAmount={ items[i]?.transferAmount } + receiveBankName={ items[i]?.receiveBankName } + receiveAccountNo={ items[i]?.receiveAccountNo } + receiveAccountName={ items[i]?.receiveAccountName } + status={ items[i]?.status } + processDate={items[i]?.processDate } > ) } diff --git a/src/entities/additional-service/ui/list-item.tsx b/src/entities/additional-service/ui/list-item.tsx index 17cb8fe..fcc2d24 100644 --- a/src/entities/additional-service/ui/list-item.tsx +++ b/src/entities/additional-service/ui/list-item.tsx @@ -16,7 +16,11 @@ export const ListItem = ({ accountName,transferStatus, submallId, settlementDate, companyName, - disbursementStatus, disbursementAmount + disbursementStatus, disbursementAmount, + + transferAmount, receiveBankName, + receiveAccountNo, receiveAccountName, + status, processDate }: ListItemProps) => { const { navigate } = useNavigate(); const getItemClass = () => { @@ -171,6 +175,9 @@ export const ListItem = ({ let time = requestDate?.substring(8, 14); timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6); } + else if (additionalServiceCategory === AdditionalServiceCategory.FundAccount) { + timeStr = moment(requestDate).format('mm:ss'); + } else { return } @@ -200,6 +207,9 @@ export const ListItem = ({ else if (additionalServiceCategory === AdditionalServiceCategory.Payout) { str = companyName; } + else if(additionalServiceCategory === AdditionalServiceCategory.FundAccount){ + str = `${receiveAccountName}(${receiveAccountNo})` + } return str; }; @@ -272,6 +282,15 @@ export const ListItem = ({ ); } + else if(additionalServiceCategory === AdditionalServiceCategory.FundAccount){ + rs.push( +
+ { getTime() } + | + { status } +
+ ); + } return rs; }; @@ -291,7 +310,7 @@ export const ListItem = ({ value={amount} thousandSeparator displayType="text" - suffix={'원'} + suffix='원' > ); @@ -312,10 +331,10 @@ export const ListItem = ({ value={amount} thousandSeparator displayType="text" - suffix={'원'} + suffix='원' > - ) + ); } else if (additionalServiceCategory === AdditionalServiceCategory.Payout) { rs.push( @@ -327,10 +346,25 @@ export const ListItem = ({ value={disbursementAmount} thousandSeparator displayType="text" - suffix={'원'} + suffix='원' > - ) + ); + } + else if (additionalServiceCategory === AdditionalServiceCategory.FundAccount) { + rs.push( +
+ +
+ ); } return rs; } @@ -345,10 +379,10 @@ export const ListItem = ({
-
{getTitle()}
- {getDetail()} +
{ getTitle() }
+ { getDetail() }
- {getAmount()} + { getAmount() } );