diff --git a/src/entities/additional-service/model/fund-account/constant.ts b/src/entities/additional-service/model/fund-account/constant.ts index 539410c..f48370b 100644 --- a/src/entities/additional-service/model/fund-account/constant.ts +++ b/src/entities/additional-service/model/fund-account/constant.ts @@ -1,4 +1,8 @@ -import { FundAccountReceiveAccountNameNo, FundAccountStatus } from './types'; +import { + FundAccountReceiveAccountNameNo, + FundAccountResultType, + FundAccountStatus +} from './types'; export const FundAccountStatusBtnGroup = [ {name: '전체', value: FundAccountStatus.ALL}, @@ -7,6 +11,11 @@ export const FundAccountStatusBtnGroup = [ {name: '중지', value: FundAccountStatus.PENDING}, ]; +export const FundAccountResultTypeBtnGroup = [ + {name: '요청일자', value: FundAccountResultType.RequestDate}, + {name: '이체일자', value: FundAccountResultType.ProcessDate} +]; + export const FundAccountReceiveAccountNameNoOptionsGroup = [ {name: '수취인', value: FundAccountReceiveAccountNameNo.ReceiveAccountName }, {name: '계좌번호', value: FundAccountReceiveAccountNameNo.ReceiveAccountNo }, @@ -14,4 +23,4 @@ export const FundAccountReceiveAccountNameNoOptionsGroup = [ export const FundAccountReceiveBankCodeOptionsGroup = [ {name: 'KB', value: 'KB'} -] \ No newline at end of file +]; \ 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 5bb4c34..20e7c49 100644 --- a/src/entities/additional-service/model/fund-account/types.ts +++ b/src/entities/additional-service/model/fund-account/types.ts @@ -3,11 +3,14 @@ import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/c export enum FundAccountTabKeys { TransferList = 'TransferList', ResultList = 'ResultList' -} - +}; +export enum FundAccountResultType { + RequestDate = 'RequestDate', + ProcessDate = 'ProcessDate', +}; export interface FundAccountTabProps { activeTab: FundAccountTabKeys; -} +}; export enum FundAccountReceiveAccountNameNo { ReceiveAccountNo = 'ReceiveAccountNo', @@ -98,11 +101,11 @@ export interface ExtensionFundAccountResultSummaryResponse { pendingAmount: number; }; export interface ExtensionFundAccountResultListParams { - mid: string; - fromDate: string; - toDate: string; - status: FundAccountStatus; - pagination: FundAccountStatus; + mid?: string; + fromDate?: string; + toDate?: string; + status?: FundAccountStatus; + pagination?: DefaultRequestPagination; }; export interface ExtensionFundAccountResultListResponse extends DefaulResponsePagination { content: Array; diff --git a/src/entities/additional-service/ui/filter/fund-account-result-filter.tsx b/src/entities/additional-service/ui/filter/fund-account-result-filter.tsx new file mode 100644 index 0000000..da46664 --- /dev/null +++ b/src/entities/additional-service/ui/filter/fund-account-result-filter.tsx @@ -0,0 +1,179 @@ +import { useEffect, useState } from 'react'; +import { FundAccountReceiveAccountNameNo, FundAccountResultType, 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, FundAccountResultTypeBtnGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant'; +import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; +import { FilterSelectInput } from '@/shared/ui/filter/select-input'; + +export interface FundAccountResultFilterProps { + filterOn: boolean; + setFilterOn: (filterOn: boolean) => void; + mid: string; + receiveAccountName: string; + receiveAccountNo: string; + resultType: FundAccountResultType; + fromDate: string; + toDate: string; + receiveBankCode: string; + status: FundAccountStatus; + setMid: (mid: string) => void; + setReceiveAccountName: (receiveAccountName: string) => void; + setReceiveAccountNo: (receiveAccountNo: string) => void; + setResultType: (resultType: FundAccountResultType) => void; + setFromDate: (fromDate: string) => void; + setToDate: (toDate: string) => void; + setReceiveBankCode: (receiveBankCode: string) => void; + setStatus: (status: FundAccountStatus) => void; +}; +export const FundAccountResultFilter = ({ + filterOn, + setFilterOn, + mid, + receiveAccountName, + receiveAccountNo, + resultType, + fromDate, + toDate, + receiveBankCode, + status, + setMid, + setReceiveAccountName, + setReceiveAccountNo, + setResultType, + setFromDate, + setToDate, + setReceiveBankCode, + setStatus +}: FundAccountResultFilterProps) => { + + 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 [filterResultType, setFilterResultType] = useState(resultType); + 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); + } + setResultType(filterResultType); + 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/fund-account/result-list-wrap.tsx b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx index ebbfd2a..af4be2f 100644 --- a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx +++ b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx @@ -1,6 +1,163 @@ -import { IMAGE_ROOT } from "@/shared/constants/common"; +import moment from 'moment'; +import { SortByKeys } from '@/entities/common/model/types'; +import { IMAGE_ROOT } from '@/shared/constants/common'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { useEffect, useState } from 'react'; +import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; +import { ListDateGroup } from '../list-date-group'; +import { AdditionalServiceCategory } from '../../model/types'; +import { ExtensionFundAccountResultExcelParams, ExtensionFundAccountResultExcelResponse, ExtensionFundAccountResultListParams, ExtensionFundAccountResultListResponse, ExtensionFundAccountResultSummaryParams, ExtensionFundAccountResultSummaryResponse, FundAccountResultContent, FundAccountResultContentItem, FundAccountResultType, FundAccountStatus } from '../../model/fund-account/types'; +import { useExtensionFundAccountResultSummaryMutation } from '../../api/fund-account/use-extension-fund-account-result-summary-mutation'; +import { useExtensionFundAccountResultExcelMutation } from '../../api/fund-account/use-extension-fund-account-result-excel-mutation'; +import { useExtensionFundAccountResultListMutation } from '../../api/fund-account/use-extension-fund-account-result-list-mutation'; +import { PATHS } from '@/shared/constants/paths'; +import { NumericFormat } from 'react-number-format'; +import { SortOptionsBox } from '@/entities/common/ui/sort-options-box'; +import { FundAccountStatusBtnGroup } from '../../model/fund-account/constant'; +import { FundAccountResultFilter } from '../filter/fund-account-result-filter'; export const FundAccountResultListWrap = () => { + const { navigate } = useNavigate(); + + const [sortBy, setSortBy] = useState(SortByKeys.New); + const [listItems, setListItems] = useState>>({}); + 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 [resultType, setResultType] = useState(FundAccountResultType.RequestDate); + 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 [totalCount, setTotalCount] = useState(0); + const [totalAmount, setTotalAmount] = useState(0); + const [successCount, setSuccessCount] = useState(0); + const [successAmount, setSuccessAmount] = useState(0); + const [failCount, setFailCount] = useState(0); + const [failAmount, setFailAmount] = useState(0); + const [pendingCount, setPendingCount] = useState(0); + const [pendingAmount, setPendingAmount] = useState(0); + + const { mutateAsync: extensionFundAccountResultList } = useExtensionFundAccountResultListMutation(); + const { mutateAsync: extensionFundAccountResultExcel } = useExtensionFundAccountResultExcelMutation(); + const { mutateAsync: extensionFundAccountResultSummary } = useExtensionFundAccountResultSummaryMutation(); + + const callList = (option?: { + sortBy?: string, + val?: string + }) => { + + pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy; + setPageParam(pageParam); + + let params: ExtensionFundAccountResultListParams = { + mid: mid, + fromDate: fromDate, + toDate: toDate, + status: status, + pagination: pageParam + }; + + extensionFundAccountResultList(params).then((rs: ExtensionFundAccountResultListResponse) => { + console.log(rs); + setListItems(assembleData(rs.content)); + }); + + }; + const callDownloadExcel = () => { + let params: ExtensionFundAccountResultExcelParams = { + mid: mid, + fromDate: fromDate, + toDate: toDate, + status: status, + }; + extensionFundAccountResultExcel(params).then((rs: ExtensionFundAccountResultExcelResponse) => { + + }); + }; + const callSummary = () => { + let params: ExtensionFundAccountResultSummaryParams = { + mid: mid, + fromDate: fromDate, + toDate: toDate + }; + extensionFundAccountResultSummary(params).then((rs: ExtensionFundAccountResultSummaryResponse) => { + console.log(rs); + setTotalCount(rs.totalCount); + setTotalAmount(rs.totalAmount); + setSuccessCount(rs.successCount); + setSuccessAmount(rs.successAmount); + setFailCount(rs.failCount); + setFailAmount(rs.failAmount); + setPendingCount(rs.pendingCount); + setPendingAmount(rs.pendingAmount); + }); + }; + + const assembleData = (content: Array) => { + let data: any = {}; + if(content && !!content[0] && content.length > 0){ + let items: Array = content[0].items; + for(let i=0;i { + callDownloadExcel(); + }; + + const onClickToOpenFilter = () => { + setFilterOn(!filterOn); + }; + + const onClickToSort = (sort: SortByKeys) => { + setSortBy(sort); + callList({sortBy: sort}); + }; + const onClickToStatus = (val: FundAccountStatus) => { + setStatus(val); + callList({val: val}); + }; + + const getListDateGroup = () => { + let rs = []; + if(Object.keys(listItems).length > 0){ + for (const [key, value] of Object.entries(listItems)) { + rs.push( + + ); + } + } + return rs; + }; + + useEffect(() => { + callList(); + callSummary(); + }, []); + + const onClickToNavigate = () => { + navigate(PATHS.additionalService.fundAccount.transferRequest); + }; + return ( <> @@ -8,14 +165,15 @@ export const FundAccountResultListWrap = () => {
-
-
-
- 잔액 - 2,000,000,000원 -
-
-
  • - · 요청 - 0 원 (0건) + 요청 + + + + + 원 ( + + + + 건) +
  • - · 성공 - 50,000,000 원 (2,587건) + 성공 + + + + + 원 ( + + + + 건) +
  • - · 실패 - 534,407 원 (21건) + 실패 + + + + + 원 ( + + + + 건) +
- + -
-
- - | - -
-
-
- 전체 - 성공 - 실패 +
+ +
+
+ { + FundAccountStatusBtnGroup.map((value, index) => ( + onClickToStatus(value.value) } + >{ value.name } + )) + } +
-
-
- -
- -
25.06.08(일)
-
-
-
-
-
-
김*환(7000)
-
- 20:00 - ㅣ - 등록완료 -
-
-
5,254,000원
-
-
-
-
-
-
-
김*환(7000)
-
- 20:00 - ㅣ - 등록완료 -
-
-
5,254,000원
-
+
-
25.06.08(일)
-
-
-
-
-
-
김*환(7000)
-
- 20:00 - ㅣ - 등록완료 -
-
-
5,254,000원
+
+ { getListDateGroup() } +
+
+
-
-
-
-
-
-
김*환(7000)
-
- 20:00 - ㅣ - 등록완료 -
-
-
5,254,000원
-
- -
- -
+ ); }; \ No newline at end of file diff --git a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx index 565fe3e..3ebd9e3 100644 --- a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx +++ b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx @@ -1,6 +1,6 @@ import { SortByKeys } from '@/entities/common/model/types'; import { IMAGE_ROOT } from '@/shared/constants/common'; -import { useNavigate } from '@/shared/lib/hooks'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useEffect, useState } from 'react'; import { ExtensionFundAccountBalanceParams, @@ -210,7 +210,7 @@ export const FundAccountTransferListWrap = () => { sortBy={ sortBy } onClickToSort={ onClickToSort } > -
+
{ FundAccountStatusBtnGroup.map((value, index) => ( diff --git a/src/pages/additional-service/additional-service-pages.tsx b/src/pages/additional-service/additional-service-pages.tsx index bbad1bf..f1f0be9 100644 --- a/src/pages/additional-service/additional-service-pages.tsx +++ b/src/pages/additional-service/additional-service-pages.tsx @@ -17,6 +17,7 @@ import { FundAccountTransferListPage } from './fund-account/transfer-list-page'; import { FundAccountTransferDetailPage } from './fund-account/transfer-detail-page'; import { FundAccountTransferRequestPage } from './fund-account/transfer-request-page'; import { FundAccountResultListPage } from './fund-account/result-list-page'; +import { FundAccountResultDetailPage } from './fund-account/result-detail-page'; import { SettlementAgencyManagePage } from './settlement-agency/manage-page'; import { SettlementAgencyDepositPage } from './settlement-agency/deposit-page'; import { SettlementAgencyMemberPage } from './settlement-agency/member-page'; @@ -80,6 +81,7 @@ export const AdditionalServicePages = () => { } /> } /> } /> + } /> } /> diff --git a/src/pages/additional-service/fund-account/result-detail-page.tsx b/src/pages/additional-service/fund-account/result-detail-page.tsx index e69de29..de98034 100644 --- a/src/pages/additional-service/fund-account/result-detail-page.tsx +++ b/src/pages/additional-service/fund-account/result-detail-page.tsx @@ -0,0 +1,137 @@ +import { PATHS } from '@/shared/constants/paths'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { HeaderType } from '@/entities/common/model/types'; +import { + useSetHeaderTitle, + useSetHeaderType, + useSetFooterMode, + useSetOnBack +} from '@/widgets/sub-layout/use-sub-layout'; +import { useLocation } from 'react-router'; +import { useEffect, useState } from 'react'; +import { NumericFormat } from 'react-number-format'; +import { useExtensionFundAccountTransferDetailMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-detail-mutation'; +import { ExtensionFundAccountTransferDetailParams, ExtensionFundAccountTransferDetailResponse, ExtensionFundAccountTransferRequestParams, ExtensionFundAccountTransferRequestResponse } from '@/entities/additional-service/model/fund-account/types'; +import moment from 'moment'; +import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation'; + +export const FundAccountResultDetailPage = () => { + const { navigate } = useNavigate(); + const location = useLocation(); + + const tid = location.state.tid; + const mid = location.state.mid; + + const [detail, setDetail] = useState(); + + const { mutateAsync: extensionFundAccountTransferDetail } = useExtensionFundAccountTransferDetailMutation(); + const { mutateAsync: extensionFundAccountTransferRequest } = useExtensionFundAccountTransferRequestMutation(); + + const callDetail = () => { + let params: ExtensionFundAccountTransferDetailParams = { + tid: tid, + mid: mid, + }; + + extensionFundAccountTransferDetail(params).then((rs: ExtensionFundAccountTransferDetailResponse) => { + setDetail(rs); + }); + }; + + useSetHeaderTitle('자금이체 상세'); + useSetHeaderType(HeaderType.LeftArrow); + useSetFooterMode(false); + useSetOnBack(() => { + navigate(PATHS.additionalService.fundAccount.transferList); + }); + + useEffect(() => { + callDetail(); + }, []); + + const onClickToRequest = () =>{ + let params: ExtensionFundAccountTransferRequestParams = { + mid: mid, + transferAmount: detail?.transferAmount, + receiveBankCode: detail?.receiveBankName, + receiveAccountNo: detail?.receiveAccountNo, + receiveAccountName: detail?.receiveAccountName, + transferMemo: '' + }; + extensionFundAccountTransferRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => { + console.log(rs) + alert(rs.message); + navigate(PATHS.additionalService.fundAccount.transferList); + }); + }; + + return ( + <> +
+
+
+
+
+ + + +
+
나이스테스트가맹점
+
2025.08.19
+
+
+
+
상세 정보
+
    +
  • + 등록일시 + { moment(detail?.processDate).format('YYYY.MM.DD') } +
    • +
  • + 처리결과 + { detail?.status } +
    • +
  • + 요청일자 + { moment(detail?.requestDate).format('YYYY.MM.DD') } +
    • +
  • + 이체결과 + { detail?.status } +
    • +
  • + 수취인명 + { detail?.receiveAccountName } +
    • +
  • + 은행 + { detail?.receiveBankName } +
    • +
  • + 계좌번호 + { detail?.receiveAccountNo } +
    • +
  • + MID + { mid } +
    • + +
+
+
+ +
+
+
+
+ + ); +}; \ No newline at end of file