오늘매출 오늘정산

src/entities/home/model/types.ts

@@ -17,8 +17,8 @@ export interface AuthRegisterProps {
 };
 
 export interface HomeCommonParams {
-	mid: string;
+	mid?: string;
-	searchDate: string;
+	searchDate?: string;
 };
 export interface HomeTodayParams extends HomeCommonParams {};
 export interface HomeTodayResponse {

src/entities/home/ui/day-status-box-container1.tsx

@@ -1,42 +1,180 @@
+import moment from 'moment';
+import { NumericFormat } from 'react-number-format';
+import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { useHomeOverviewMutation } from '../api/use-home-overview-mutation';
+import { useHomeTodayMutation } from '../api/use-home-today-mutation';
+import { HomeOverviewParams, HomeOverviewResponse, HomeTodayParams, HomeTodayResponse, Sales, Settlement, TopPaymentMethodInfo, TopSalesDayInfo, TopSalesTimeInfo } from '../model/types';
 
 export const BoxContainer1 = () => {
+
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [searchDate, setSearchDate] = useState<string>(moment().format('YYYY-MM-DD'));
+
+  const [sales, setSales] = useState<Sales>();
+  const [settlement, setSettlement] = useState<Settlement>();
+  const [increaseRate, setIncreaseRate] = useState<number>();
+  const [availableLimit, setAvailableLimit] = useState<number>();
+
+  const [averageTransactionAmount, setAverageTransactionAmount] = useState<number>();
+  const [dailyAverageSales, setDailyAverageSales] = useState<number>();
+  const [dailyAverageCount, setDailyAverageCount] = useState<number>();
+  const [topSalesDayInfo, setTopSalesDayInfo] = useState<TopSalesDayInfo>();
+  const [topSalesTimeInfo, setTopSalesTimeInfo] = useState<TopSalesTimeInfo>();
+  const [topPaymentMethodInfo, setTopPaymentMethodInfo] = useState<TopPaymentMethodInfo>();
+
+
+  const { mutateAsync: homeToday } = useHomeTodayMutation();
+  const { mutateAsync: homeOverview } = useHomeOverviewMutation();
+
+  const callToday = () => {
+    let params: HomeTodayParams = {
+      searchDate: searchDate,
+      mid: mid,
+    };
+    homeToday(params).then((rs: HomeTodayResponse) => {
+      setSales(rs.sales);
+
+      let yesterdayTotalAmount = rs.sales.yesterdayTotalAmount;
+      let todayTotalAmount = rs.sales.todayTotalAmount;
+      if(todayTotalAmount && yesterdayTotalAmount){
+        let rate = ((todayTotalAmount / yesterdayTotalAmount) - 1) * 100;
+        let roundRate = Math.round(rate * 10) / 10;
+        setIncreaseRate(roundRate);
+      }
+
+      let totalCreditLimit = rs.settlement.totalCreditLimit;
+      let availableCredit = rs.settlement.availableCredit;
+      if(totalCreditLimit && availableCredit){
+        let rate = (availableCredit / totalCreditLimit) * 100;
+        let roundRate = Math.round(rate * 10) / 10;
+        setAvailableLimit(roundRate);
+      }      
+      
+      setSettlement(rs.settlement);
+    });
+  };
+  const callOverview = () => {
+    let params: HomeOverviewParams = {
+      searchDate: searchDate,
+      mid: mid,
+    };
+    homeOverview(params).then((rs: HomeOverviewResponse) => {
+      setAverageTransactionAmount(rs.averageTransactionAmount);
+      setDailyAverageSales(rs.dailyAverageSales);
+      setDailyAverageCount(rs.dailyAverageCount);
+      setTopSalesDayInfo(rs.topSalesDayInfo);
+      setTopSalesTimeInfo(rs.topSalesTimeInfo);
+      setTopPaymentMethodInfo(rs.topPaymentMethodInfo);
+    });
+  };
+  
+  useEffect(() => {
+    callToday();
+    callOverview();
+  }, []);
+  
   return (
     <>
       <div className="box-wrap">
         <h3>오늘 매출</h3>
         <div className="today-sales">
-          <span className="won01">937,284,000원</span>
+          <span className="won01">
-          <span className="per">↑ 43.6%</span>
+            <NumericFormat
-          <a href="#" className="arrow">
+              value={ sales?.todayTotalAmount }
-            <img src={ IMAGE_ROOT + '/ico_arrow.svg' } alt="오늘 매출 바로가기" />
+              thousandSeparator
+              displayType="text"
+              suffix='원'
+            ></NumericFormat>
+          </span>
+          <span className={ `per ${(increaseRate && increaseRate >= 0)? 'plus': 'minus'}` }>
+            <NumericFormat
+              value={ increaseRate }
+              thousandSeparator
+              displayType="text"
+              prefix={ `${(increaseRate && increaseRate >= 0)? '↑ ': '↓ '}` }
+              suffix='%'
+            ></NumericFormat>
+          </span>
+          <a className="arrow">
+            <img 
+              src={ IMAGE_ROOT + '/ico_arrow.svg' } 
+              alt="오늘 매출 바로가기" 
+            />
           </a>
         </div>
         <ul className="dales-detail">
-          <li className="approve">승인 건수 <strong>8,277건</strong></li>
+          <li className="approve">
-          <li className="cancel">취소 건수 <strong>320건</strong></li>
+            승인 건수 
+            <strong style={{marginLeft: '4px'}}>
+              <NumericFormat
+                value={ sales?.totalCount }
+                thousandSeparator
+                displayType="text"
+                suffix='건'
+              ></NumericFormat>
+            </strong>
+          </li>
+          <li className="cancel">
+            취소 건수 
+            <strong style={{marginLeft: '4px'}}>
+              <NumericFormat
+                value={ sales?.cancelCount }
+                thousandSeparator
+                displayType="text"
+                suffix='건'
+              ></NumericFormat>
+            </strong>
+          </li>
         </ul>
       </div>
       <div className="box-wrap">
         <h3>오늘 정산</h3>
         <div className="today-sales">
-          <span className="won02">24,734,000원</span>
+          <span className="won02">
+            <NumericFormat
+              value={ settlement?.todaySettlementAmount }
+              thousandSeparator
+              displayType="text"
+              suffix='원'
+            ></NumericFormat>
+          </span>
           <span className="per">입금완료</span>
-          <a href="#" className="arrow">
+          <a className="arrow">
-            <img src={ IMAGE_ROOT + '/ico_arrow.svg' } alt="오늘 매출 바로가기" />
+            <img 
+              src={ IMAGE_ROOT + '/ico_arrow.svg' } 
+              alt="오늘 매출 바로가기" 
+            />
           </a>
         </div>
         <div className="progressbar">
           <div className="progress-header">
             <span className="progress-title">정산한도</span>
-            <span className="progress-remaining">23% 남음</span>
+            <span className="progress-remaining">
+              <NumericFormat
+                value={ availableLimit }
+                thousandSeparator
+                displayType="text"
+                suffix='% 남음'
+              ></NumericFormat>
+            </span>
           </div>
           <div className="progress-container">
             <div className="progress-bar">
-              <div className="progress-fill" style={{width: '77%'}}></div>
+              <div className="progress-fill" style={{width: (100 - (availableLimit || 0)) +'px' }}></div>
             </div>
           </div>
-          <div className="remain-limit">잔여정산한도  <strong>7,833,000원</strong></div>
+          <div className="remain-limit">
+            <span>잔여정산한도</span>
+            <strong style={{marginLeft: '4px'}}>
+              <NumericFormat
+                value={ settlement?.availableCredit }
+                thousandSeparator
+                displayType="text"
+                suffix='원'
+              ></NumericFormat>
+            </strong>
+          </div>
         </div>
       </div>
     </>

src/shared/ui/assets/css/style.css

@@ -576,9 +576,15 @@ main.pb-0 .tab-pane {
 .per {
     font-size: var(--fs-15);
     font-weight: var(--fw-400);
-    color: #3E6AFC;
     margin-left: 5px;
 }
+.per.minus {
+    color: #3E6AFC;
+}
+
+.per.plus {
+    color: #EB5757;
+}
 
 .arrow {
     position: absolute;