자금이체 이체신청 필터 까지

src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx

@@ -3,6 +3,8 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks';
 import { useEffect, useState } from 'react';
 import { 
+  ExtensionFundAccountBalanceParams,
+  ExtensionFundAccountBalanceResponse,
   ExtensionFundAccountTransferExcelParams, 
   ExtensionFundAccountTransferExcelResponse, 
   ExtensionFundAccountTransferListParams, 
@@ -19,6 +21,9 @@ import { AdditionalServiceCategory } from '../../model/types';
 import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
 import { useExtensionFundAccountTransferExcelMutation } from '../../api/fund-account/use-extension-fund-account-transfer-excel-mutation';
 import { FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
+import { useExtensionFundAccountBalanceMutation } from '../../api/fund-account/use-extension-fund-account-balance-mutation';
+import { NumericFormat } from 'react-number-format';
+import { FundAccountTransactionFilter } from '../filter/fund-account-trnasaction-filter';
 
 export const FundAccountTransferListWrap = () => {
   const { navigate } = useNavigate();
@@ -28,12 +33,19 @@ export const FundAccountTransferListWrap = () => {
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>('nictest001m');
+  const [receiveAccountName, setReceiveAccountName] = useState<string>('');
+  const [receiveAccountNo, setReceiveAccountNo] = useState<string>('');
   const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
   const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
   const [status, setStatus] = useState<FundAccountStatus>(FundAccountStatus.ALL);
+  const [receiveBankCode, setReceiveBankCode] = useState<string>('');
+
+  const [balance, setBalance] = useState<number>(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<FundAccountTransferContent>) => {
     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 = () => {
           <div className="credit-summary">
             <div className="row">
               <span className="label">잔액</span>
-              <span className="amount22">2,000,000,000<span className="unit">원</span></span>
+              <span className="amount22">
+                <NumericFormat
+                  value={ balance }
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat><span className="unit">원</span>
+              </span>
             </div>
           </div>
         </div>
@@ -177,6 +206,7 @@ export const FundAccountTransferListWrap = () => {
           onClickToSort={ onClickToSort }
         ></SortOptionsBox>
         <div className="excrow">
+          <div className="full-menu-keywords no-padding">
           {
             FundAccountStatusBtnGroup.map((value, index) => (
               <span 
@@ -186,89 +216,34 @@ export const FundAccountTransferListWrap = () => {
               >{ value.name }</span>
             ))
           }
+          </div>
         </div>
       </section>
     
       <section className="transaction-list">
-        <div className="date-header">25.06.08(일)</div>
-        <div className="transaction-item approved">
-          <div className="transaction-status">
-            <div className="status-dot blue"></div>
-          </div>
-          <div className="transaction-content">
-            <div className="transaction-title">김*환(7000)</div>
-            <div className="transaction-details">
-              <span>20:00</span>
-              <span className="separator">ㅣ</span>
-              <span>미결제</span>
-              <span className="separator">ㅣ</span>
-              <span>결제대기</span>
-              <span className="separator">ㅣ</span>
-              <span>SMS</span>
-            </div>
-          </div>
-          <div className="transaction-amount">5,254,000원</div>
-        </div>
-        <div className="transaction-item approved">
-          <div className="transaction-status">
-            <div className="status-dot blue"></div>
-          </div>
-          <div className="transaction-content">
-            <div className="transaction-title">김*환(7000)</div>
-            <div className="transaction-details">
-              <span>20:00</span>
-              <span className="separator">ㅣ</span>
-              <span>미결제</span>
-              <span className="separator">ㅣ</span>
-              <span>결제대기</span>
-              <span className="separator">ㅣ</span>
-              <span>SMS</span>
-            </div>
-          </div>
-          <div className="transaction-amount">5,254,000원</div>
-        </div>
-      
-        <div className="date-header">25.06.08(일)</div>
-        <div className="transaction-item approved">
-          <div className="transaction-status">
-            <div className="status-dot blue"></div>
-          </div>
-          <div className="transaction-content">
-            <div className="transaction-title">김*환(7000)</div>
-            <div className="transaction-details">
-              <span>20:00</span>
-              <span className="separator">ㅣ</span>
-              <span>미결제</span>
-              <span className="separator">ㅣ</span>
-              <span>결제대기</span>
-              <span className="separator">ㅣ</span>
-              <span>SMS</span>
-            </div>
-          </div>
-          <div className="transaction-amount">5,254,000원</div>
-        </div>
-        <div className="transaction-item approved">
-          <div className="transaction-status">
-            <div className="status-dot blue"></div>
-          </div>
-          <div className="transaction-content">
-            <div className="transaction-title">김*환(7000)</div>
-            <div className="transaction-details">
-              <span>20:00</span>
-              <span className="separator">ㅣ</span>
-              <span>미결제</span>
-              <span className="separator">ㅣ</span>
-              <span>결제대기</span>
-              <span className="separator">ㅣ</span>
-              <span>SMS</span>
-            </div>
-          </div>
-          <div className="transaction-amount">5,254,000원</div>
-        </div>
+        { getListDateGroup() }
       </section>
       <div className="apply-row">
         <button className="btn-50 btn-blue flex-1">이체 등록</button>
       </div>
-    </>
+      <FundAccountTransactionFilter
+        filterOn={ filterOn }
+        setFilterOn={ setFilterOn }
+        mid={ mid }
+        receiveAccountName={ receiveAccountName }
+        receiveAccountNo={ receiveAccountNo }
+        fromDate={ fromDate }
+        toDate={ toDate }
+        receiveBankCode= { receiveBankCode }
+        status={ status }
+        setMid={ setMid }
+        setReceiveAccountName={ setReceiveAccountName }
+        setReceiveAccountNo={ setReceiveAccountNo }
+        setFromDate={ setFromDate }
+        setToDate={ setToDate }
+        setReceiveBankCode={ setReceiveBankCode }
+        setStatus={ setStatus }
+      ></FundAccountTransactionFilter>
+</>
   );
 };