zhejiushizhuce 2 éve
szülő
commit
9a9bd8c290

+ 3 - 1
src/api/config.js

@@ -81,4 +81,6 @@ export const APP_REDPACK_CHECK=BASE_PREFIX+"redpack/check";
 export const APP_REDPACK_RECEIVE=BASE_PREFIX+"redpack/receive";
 export const APP_REDPACK_CONFIG=BASE_PREFIX+"redpack/config";
 //agent
-export const APP_AGENT_CHECK=BASE_PREFIX+"agent/check";
+export const APP_AGENT_CHECK=BASE_PREFIX+"agent/check";
+export const APP_AGENT_GET=BASE_PREFIX+"agent/get";
+export const APP_AGENT_HISTORY=BASE_PREFIX+"agent/history";

+ 1 - 0
src/constants/routes.js

@@ -33,6 +33,7 @@ const ROUTE_PATH={
     SECURITY:"#/security",
     MONEY_RAIN:"#/moneyrain",
     AGENT_POLICY:"#/agentPolicy",
+    AGENT_HISTORY:"#/agentHistory",
 }
 
 export {

+ 13 - 0
src/db/routes.js

@@ -373,4 +373,17 @@ export const routes=[
         lpath:"#/signin",//登录path
         subs:[]
     },
+    {
+        path: "#/agentHistory",
+        type: 1,
+        side: 0,
+        block:1,//块排序
+        title: "History",
+        icon:"",
+        fill:";;",//icon 颜色 默认 选中 本身颜色
+        component:"agentHistory",
+        login:0,//0,1 检不检查登录
+        lpath:"#/signin",//登录path
+        subs:[]
+    },
 ]

+ 59 - 1
src/features/agentSlice.js

@@ -1,6 +1,9 @@
 import {createSlice} from "@reduxjs/toolkit";
 import {REQ_STATUS} from "@api/config";
-import {buildReqReducer, reqAgentCheck} from "@features/api";
+import {buildReqReducer, reqAgentCheck, reqAgentGet, reqAgentHistory} from "@features/api";
+import {getHttpMsg} from "@utils/helpers";
+import {toast} from "react-toastify";
+const i18n=global.i18n;
 const reducerAgentCheck=(state,action,arg)=>{
     let payload=action.payload;
     if (payload&&payload.code===200){
@@ -33,11 +36,55 @@ const reducerAgentCheck=(state,action,arg)=>{
 const agentCheckStatus=(state,status,arg)=>{
     state.status.AgentCheck=status;
 }
+const reducerAgentGet=(state,action,arg)=>{
+    let payload=action.payload;
+    let msg=getHttpMsg(payload);
+    if (payload&&payload.code===200){
+        let bonusList=state.bonusList;
+        if (bonusList){
+            for (let i = 0; i < bonusList.length; i++) {
+                let item=bonusList[i];
+                if (item.ID===arg){
+                    bonusList.splice(i,1);
+                    break;
+                }
+            }
+        }
+        state.bonusList=bonusList;
+        // if(msg!=="")toast.success(msg);
+        // else toast.success(i18n.t("agent.get_success"));
+        toast.success(i18n.t("agent.get_success"));
+    }
+    else
+    {
+        if(msg!=="")toast.error(msg);
+        else toast.error(i18n.t("agent.get_error"))
+    }
+}
+const agentGetStatus=(state,status,arg)=>{
+    state.status.AgentGet[arg]=status;
+}
+const reducerAgentHistory=(state,action,arg)=>{
+    let payload=action.payload;
+    if (payload&&payload.code===200){
+        let data=payload.data;
+        if (data&&data.history){
+            state.history=data.history;
+        }
+    }
+}
+const agentHistoryStatus=(state,status,arg)=>{
+    state.status.AgentHistory=status;
+}
 export const AgentSlice = createSlice({
     name: "agent",
     initialState: {
         status:{
             AgentCheck:REQ_STATUS.NONE,
+            AgentGet:{
+
+            },
+            AgentHistory:REQ_STATUS.NONE
         },
         info:{},
         subs:[],
@@ -50,6 +97,8 @@ export const AgentSlice = createSlice({
     },
     extraReducers: (builder) => {
         buildReqReducer(builder,reqAgentCheck,reducerAgentCheck,agentCheckStatus);
+        buildReqReducer(builder,reqAgentGet,reducerAgentGet,agentGetStatus);
+        buildReqReducer(builder,reqAgentHistory,reducerAgentHistory,agentHistoryStatus);
     }
 })
 export const {}=AgentSlice.actions;
@@ -65,4 +114,13 @@ export const getAgentLevels=(state)=>{
 export const getBonusList=(state)=>{
     return state.agent.bonusList;
 }
+export const getAgentGetStatus=(state)=>{
+    return state.agent.status.AgentGet;
+}
+export const getAgentHistoryStatus=(state)=>{
+    return state.agent.status.AgentHistory;
+}
+export const getAgentHistory=(state)=>{
+    return state.agent.history;
+}
 export default AgentSlice.reducer;

+ 34 - 1
src/features/api.js

@@ -1,6 +1,6 @@
 import {createAsyncThunk} from "@reduxjs/toolkit";
 import {
-    APP_ACCOUNTS_PAY_INFO, APP_AGENT_CHECK,
+    APP_ACCOUNTS_PAY_INFO, APP_AGENT_CHECK, APP_AGENT_GET, APP_AGENT_HISTORY,
     APP_CHANGE_EMAIL,
     APP_CHANGE_INFO,
     APP_CHANGE_PASS,
@@ -617,4 +617,37 @@ export const reqAgentCheck=createAsyncThunk(
         return response;
     }
 )
+export const reqAgentGet=createAsyncThunk(
+    APP_AGENT_GET,
+    async (arg,thunkAPI)=>{
+        let params={
+            url:APP_AGENT_GET,
+            params:{
+                ID:arg
+            }
+        }
+        const response=await Http.get(params);
+        if (response&&response.code===200){
+            let data=response.data;
+            if (data){
+                let bonus=data.bonus;
+                if (bonus!=null){
+                    let score=bonus/global.CASH_BASE;
+                    thunkAPI.dispatch(updateAddScore(score));
+                }
+            }
+        }
+        return response;
+    }
+)
+export const reqAgentHistory=createAsyncThunk(
+    APP_AGENT_HISTORY,
+    async (arg,thunkAPI)=>{
+        let params={
+            url:APP_AGENT_HISTORY
+        }
+        const response=await Http.get(params);
+        return response;
+    }
+)
 //api

+ 1 - 0
src/layout/BottomNav/styles.module.scss

@@ -50,6 +50,7 @@
     }
     & .yellow_txt{
         color: #d5c0a4;
+        line-height: 2rem;
     }
 }
 

+ 7 - 0
src/locales/languages/en_US.json

@@ -475,6 +475,8 @@
   },
   "agent": {
     "no_data": "No records yet",
+    "get_success": "Successfully received",
+    "get_error": "Failed to collect",
     "base": {
       "title_link": "Reference Link",
       "btn_copy": "Copy",
@@ -502,6 +504,11 @@
       "label_date": "Date",
       "label_commision": "Commission",
       "label_claim": "Claim"
+    },
+    "history": {
+      "label_status": "Status",
+      "status_0": "",
+      "status_1": "Received"
     }
   }
 }

+ 38 - 0
src/locales/languages/es_MX.json

@@ -464,5 +464,43 @@
       "des_3": "La actuación de hoy de C.\n20.000                   Nivel 9",
       "title_1": "Ganancias de hoy de A = 10.700"
     }
+  },
+  "agent": {
+    "no_data": "No records yet",
+    "get_success": "Successfully received",
+    "get_error": "Failed to collect",
+    "base": {
+      "title_link": "Reference Link",
+      "btn_copy": "Copy",
+      "value": "Value",
+      "title_policy": "Agent Policy",
+      "details": "See details"
+    },
+    "today": {
+      "label_level": "Level",
+      "label_team_size": "Team Size",
+      "label_direct_agent": "Direct Agent",
+      "label_revenue": "Today's Revenue",
+      "label_commission": "Today's Commission"
+    },
+    "subs": {
+      "title": "Today's Direct Agent Performance",
+      "label_name": "Agent Name",
+      "label_revenue": "Revenue",
+      "label_commision": "Commission"
+    },
+    "bonus": {
+      "title_bonus": "Commission available",
+      "btn_claim": "Claim",
+      "history": "History",
+      "label_date": "Date",
+      "label_commision": "Commission",
+      "label_claim": "Claim"
+    },
+    "history": {
+      "label_status": "Status",
+      "status_0": "",
+      "status_1": "Received"
+    }
   }
 }

+ 38 - 0
src/locales/languages/pt_BR.json

@@ -464,5 +464,43 @@
       "des_3": "Performance de hoje de C \n20,000\t                 Nivel 9",
       "title_1": "Ganhos de hoje de A = 10.700"
     }
+  },
+  "agent": {
+    "no_data": "No records yet",
+    "get_success": "Successfully received",
+    "get_error": "Failed to collect",
+    "base": {
+      "title_link": "Reference Link",
+      "btn_copy": "Copy",
+      "value": "Value",
+      "title_policy": "Agent Policy",
+      "details": "See details"
+    },
+    "today": {
+      "label_level": "Level",
+      "label_team_size": "Team Size",
+      "label_direct_agent": "Direct Agent",
+      "label_revenue": "Today's Revenue",
+      "label_commission": "Today's Commission"
+    },
+    "subs": {
+      "title": "Today's Direct Agent Performance",
+      "label_name": "Agent Name",
+      "label_revenue": "Revenue",
+      "label_commision": "Commission"
+    },
+    "bonus": {
+      "title_bonus": "Commission available",
+      "btn_claim": "Claim",
+      "history": "History",
+      "label_date": "Date",
+      "label_commision": "Commission",
+      "label_claim": "Claim"
+    },
+    "history": {
+      "label_status": "Status",
+      "status_0": "",
+      "status_1": "Received"
+    }
   }
 }

+ 38 - 0
src/locales/languages/ru_RU.json

@@ -464,5 +464,43 @@
       "des_3": "Сегодняшняя производительность от C\n20,000 Уровень 9",
       "title_1": "Сегодняшний доход от A = 10,700"
     }
+  },
+  "agent": {
+    "no_data": "No records yet",
+    "get_success": "Successfully received",
+    "get_error": "Failed to collect",
+    "base": {
+      "title_link": "Reference Link",
+      "btn_copy": "Copy",
+      "value": "Value",
+      "title_policy": "Agent Policy",
+      "details": "See details"
+    },
+    "today": {
+      "label_level": "Level",
+      "label_team_size": "Team Size",
+      "label_direct_agent": "Direct Agent",
+      "label_revenue": "Today's Revenue",
+      "label_commission": "Today's Commission"
+    },
+    "subs": {
+      "title": "Today's Direct Agent Performance",
+      "label_name": "Agent Name",
+      "label_revenue": "Revenue",
+      "label_commision": "Commission"
+    },
+    "bonus": {
+      "title_bonus": "Commission available",
+      "btn_claim": "Claim",
+      "history": "History",
+      "label_date": "Date",
+      "label_commision": "Commission",
+      "label_claim": "Claim"
+    },
+    "history": {
+      "label_status": "Status",
+      "status_0": "",
+      "status_1": "Received"
+    }
   }
 }

+ 38 - 0
src/locales/languages/zh_TW.json

@@ -464,5 +464,43 @@
       "des_3": "C的今日績效\n20,000級別9",
       "title_1": "A的今日收益 = 10,700"
     }
+  },
+  "agent": {
+    "no_data": "No records yet",
+    "get_success": "Successfully received",
+    "get_error": "Failed to collect",
+    "base": {
+      "title_link": "Reference Link",
+      "btn_copy": "Copy",
+      "value": "Value",
+      "title_policy": "Agent Policy",
+      "details": "See details"
+    },
+    "today": {
+      "label_level": "Level",
+      "label_team_size": "Team Size",
+      "label_direct_agent": "Direct Agent",
+      "label_revenue": "Today's Revenue",
+      "label_commission": "Today's Commission"
+    },
+    "subs": {
+      "title": "Today's Direct Agent Performance",
+      "label_name": "Agent Name",
+      "label_revenue": "Revenue",
+      "label_commision": "Commission"
+    },
+    "bonus": {
+      "title_bonus": "Commission available",
+      "btn_claim": "Claim",
+      "history": "History",
+      "label_date": "Date",
+      "label_commision": "Commission",
+      "label_claim": "Claim"
+    },
+    "history": {
+      "label_status": "Status",
+      "status_0": "",
+      "status_1": "Received"
+    }
   }
 }

+ 10 - 0
src/pages/AgentHistory.jsx

@@ -0,0 +1,10 @@
+import WAgentHistory from "@widgets/WAgent/WAgentHistory";
+
+const AgentHistory = ({...props}) => {
+    return (
+        <>
+            <WAgentHistory {...props}/>
+        </>
+    )
+}
+export default AgentHistory;

+ 2 - 0
src/pages/index.jsx

@@ -25,6 +25,7 @@ const Security=lazy(()=>import("@pages/Security"));
 const MoneyRain=lazy(()=>import("@pages/MoneyRain"));
 const AgentPolicy=lazy(()=>import("@pages/AgentPolicy"));
 const Agent=lazy(()=>import("@pages/Agent"));
+const AgentHistory=lazy(()=>import("@pages/AgentHistory"));
 export default {
     ModulePage:ModulePage,
     Home:Home,
@@ -49,6 +50,7 @@ export default {
     moneyrain:MoneyRain,
     agentPolicy:AgentPolicy,
     agent:Agent,
+    agentHistory:AgentHistory,
 }
 export const Header={
     deposit: DepositHeader,

+ 68 - 0
src/widgets/WAgent/WAgentHistory.jsx

@@ -0,0 +1,68 @@
+import styles from './styles.module.scss';
+import React, {useEffect} from "react";
+import {useDispatch, useSelector} from "react-redux";
+import {reqAgentHistory} from "@features/api";
+import {getAgentHistory, getAgentHistoryStatus} from "@features/agentSlice";
+import {REQ_STATUS} from "@api/config";
+import SmallLoading from "@components/SmallLoading";
+import Spring from "@components/Spring";
+import {formatCash} from "@utils/helpers";
+const i18n=global.i18n;
+const WAgentHistory  = ({close}) => {
+    const dispatch = useDispatch();
+    const status=useSelector(getAgentHistoryStatus);
+    const history=useSelector(getAgentHistory);
+    useEffect(() => {
+        dispatch(reqAgentHistory());
+    }, []);
+    const renderList=()=>{
+        if (status===REQ_STATUS.LOADING){
+            return (
+                <div className={"w-100 h-100vh"}>
+                    <SmallLoading/>
+                </div>
+            )
+        }
+        let len=history.length;
+        return (
+            <Spring type={"slideUp"} className={"d-flex flex-column g-1"}>
+                {
+                    history.map((item,index)=>{
+                        let Date=item.Date+"";
+                        let DateStr=Date.substring(0,4)+"-"+Date.substring(4,6)+"-"+Date.substring(6,8);
+                        let bonus=item.bonus;
+                        let bonusStr=global.DOLLAR+formatCash(bonus,2,true);
+                        let bg_style=index===len-1?styles.info_item_bottom:styles.info_item_middle;
+                        return (
+                            <div key={index} className={`${styles.info_item_title} ${bg_style}`}>
+                                <span className={styles.sub_data_item}>{DateStr}</span>
+                                <span className={styles.sub_data_item}>{bonusStr}</span>
+                                <span className={`${styles.sub_data_item} ${styles.text_green}`}>{i18n.t("agent.history.status_1")}</span>
+                            </div>
+                        )
+                    })
+                }
+            </Spring>
+        )
+    }
+    const renderContent=()=>{
+        return (
+            <div className={"d-flex flex-column g-1"}>
+                <div className={`${styles.info_item_title} ${styles.info_item_title_middle} ${styles.text_white}`}>
+                    <span className={styles.sub_data_item}>{i18n.t("agent.bonus.label_date")}</span>
+                    <div className={styles.text_line}></div>
+                    <span className={styles.sub_data_item}>{i18n.t("agent.bonus.label_commision")}</span>
+                    <div className={styles.text_line}></div>
+                    <span className={styles.sub_data_item}>{i18n.t("agent.history.label_status")}</span>
+                </div>
+                {renderList()}
+            </div>
+        )
+    }
+    return (
+        <div className={styles.container}>
+            {renderContent()}
+        </div>
+    )
+}
+export default WAgentHistory;

+ 63 - 14
src/widgets/WAgent/index.jsx

@@ -1,7 +1,7 @@
 import styles from './styles.module.scss';
 import Spring from "@components/Spring";
-import {useSelector} from "react-redux";
-import {getAgentInfo, getAgentSubs} from "@features/agentSlice";
+import {useDispatch, useSelector} from "react-redux";
+import {getAgentGetStatus, getAgentInfo, getAgentSubs, getBonusList} from "@features/agentSlice";
 import link_icon from "@assets/agent/link.png";
 import doller_icon from "@assets/agent/doller_icon.png";
 import policy_icon from "@assets/agent/policy.png";
@@ -17,20 +17,36 @@ import {toast} from "react-toastify";
 import {formatCash, formatDate} from "@utils/helpers";
 import {useNavigate} from "react-router-dom";
 import {ROUTE_PATH} from "@constants/routes";
+import {REQ_STATUS} from "@api/config";
+import SmallLoading from "@components/SmallLoading";
+import {reqAgentGet} from "@features/api";
 const i18n=global.i18n;
 const WAgent=({close})=>{
     const navigate = useNavigate();
     const agentInfo=useSelector(getAgentInfo);
     const agentSubs=useSelector(getAgentSubs);
+    const bonusList=useSelector(getBonusList);
+    const agentGetStatus=useSelector(getAgentGetStatus);
+    const dispatch=useDispatch();
     const lvnum=4;
     const getTeamUser=()=>{
         let teamNum=0;
-        for (let i = 0; i < lvnum; i++) {
-            let num=agentInfo["downCount"+(i+1)];
-            if (num!=null)teamNum+=num;
+        // for (let i = 0; i < lvnum; i++) {
+        //     let num=agentInfo["downCount"+(i+1)];
+        //     if (num!=null)teamNum+=num;
+        // }
+        for (const key in agentInfo) {
+            if (key.startsWith("downCount")){
+                let num=agentInfo[key];
+                if (num!=null)teamNum+=Number(num);
+            }
         }
         return teamNum;
     }
+    const onGetBonus=(ID)=>{
+        if (agentGetStatus[ID]===REQ_STATUS.LOADING)return;
+        dispatch(reqAgentGet(ID));
+    }
     const renderBase=()=>{
         let agentUrl="";
         let bonus=agentInfo.bonus?agentInfo.bonus:0;
@@ -195,8 +211,9 @@ const WAgent=({close})=>{
                         let name=item.NickName;
                         let SubTotal=item.SubTotal;
                         let bonus=item.bonus;
+                        let bg_style=index===len-1?styles.info_item_bottom:styles.info_item_middle;
                         return (
-                            <div key={index} className={`${styles.info_item_title} ${styles.info_item_middle}`}>
+                            <div key={index} className={`${styles.info_item_title} ${bg_style}`}>
                                 <span className={styles.sub_data_item}>{name}</span>
                                 <span className={styles.sub_data_item}>{global.DOLLAR+formatCash(SubTotal, 2, true)}</span>
                                 <span className={styles.sub_data_item}>{global.DOLLAR+formatCash(bonus, 2, true)}</span>
@@ -221,18 +238,48 @@ const WAgent=({close})=>{
                     </div>
                 </div>
                 <div className={`${styles.info_item_title} ${styles.info_item_title_middle} ${styles.text_white}`}>
-                    <span>{i18n.t("agent.subs.label_name")}</span>
+                    <span className={styles.sub_data_item}>{i18n.t("agent.subs.label_name")}</span>
                     <div className={styles.text_line}></div>
-                    <span>{i18n.t("agent.subs.label_revenue")}</span>
+                    <span className={styles.sub_data_item}>{i18n.t("agent.subs.label_revenue")}</span>
                     <div className={styles.text_line}></div>
-                    <span>{i18n.t("agent.subs.label_commision")}</span>
+                    <span className={styles.sub_data_item}>{i18n.t("agent.subs.label_commision")}</span>
                 </div>
                 {renderSubsList()}
             </div>
         )
     }
     const renderAvailabelList=()=>{
-        return renderEmpty(false)
+        if (bonusList==null||bonusList.length===0)return renderEmpty(false);
+        let len=bonusList.length;
+        return (
+            <>
+                {
+                    bonusList.map((item,index)=>{
+                        let Date=item.Date+"";
+                        let DateStr=Date.substring(0,4)+"-"+Date.substring(4,6)+"-"+Date.substring(6,8);
+                        let bonus=item.bonus;
+                        let bonusStr=global.DOLLAR+formatCash(bonus,2,true);
+                        let bg_style=index===len-1?styles.info_item_bottom:styles.info_item_middle;
+                        return (
+                            <div key={index} className={`${styles.info_item_title} ${bg_style}`}>
+                                <span className={styles.sub_data_item}>{DateStr}</span>
+                                <span className={styles.sub_data_item}>{bonusStr}</span>
+                                <div className={`${styles.sub_data_item} d-flex align-items-center justify-content-center`}>
+                                    <button className={`${styles.button_claim}`} onClick={()=>{
+                                        onGetBonus(item.ID);
+                                    }}>
+                                        {
+                                            agentGetStatus[item.ID]===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}></SmallLoading>):(i18n.t("agent.bonus.btn_claim"))
+                                        }
+                                        {/*{i18n.t("agent.bonus.btn_claim")}*/}
+                                    </button>
+                                </div>
+                            </div>
+                        )
+                    })
+                }
+            </>
+        )
     }
     const renderAvailable = () => {
         return (
@@ -245,7 +292,9 @@ const WAgent=({close})=>{
                             </div>
                             {i18n.t("agent.bonus.title_bonus")}
                         </div>
-                        <button className={`${styles.title} ${styles.text_white}`}>
+                        <button className={`${styles.title} ${styles.text_white}`} onClick={()=>{
+                            navigate(ROUTE_PATH.AGENT_HISTORY);
+                        }}>
                             <div className={styles.text_line}></div>
                             <span>{i18n.t("agent.bonus.history")}</span>
                             <SvgIcon className={styles.arrow} herf={"icon_Arrow"}></SvgIcon>
@@ -253,11 +302,11 @@ const WAgent=({close})=>{
                     </div>
                 </div>
                 <div className={`${styles.info_item_title} ${styles.info_item_title_middle} ${styles.text_white}`}>
-                    <span>{i18n.t("agent.bonus.label_date")}</span>
+                    <span className={styles.sub_data_item}>{i18n.t("agent.bonus.label_date")}</span>
                     <div className={styles.text_line}></div>
-                    <span>{i18n.t("agent.bonus.label_commision")}</span>
+                    <span className={styles.sub_data_item}>{i18n.t("agent.bonus.label_commision")}</span>
                     <div className={styles.text_line}></div>
-                    <span>{i18n.t("agent.bonus.label_claim")}</span>
+                    <span className={styles.sub_data_item}>{i18n.t("agent.bonus.label_claim")}</span>
                 </div>
                 {renderAvailabelList()}
             </div>

+ 16 - 2
src/widgets/WAgent/styles.module.scss

@@ -37,6 +37,9 @@
   font-weight: 500;
   color: var(--header);
 }
+.text_green{
+  color: var(--primary-color) !important;
+}
 .icon{
   width: 1.4rem;
   height: 1.4rem;
@@ -121,7 +124,7 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 0.5rem 1rem;
+  padding: 0rem 1rem;
   height: 3rem;
 }
 .info_item_top{
@@ -140,7 +143,7 @@
   align-items: center;
   width: 100%;
   justify-content: space-around;
-  padding:0.5rem;
+  padding:0rem 0.5rem;
   height: 3rem;
 }
 .info_item_title_middle{
@@ -169,4 +172,15 @@
   &_text{
     margin-top: 1rem;
   }
+}
+.button_claim{
+  width: 80%;
+  height: 2.2rem;
+  color: #fff;
+  background-color: #1d803ab3;
+  background-image: conic-gradient(from 1turn, rgba(88, 175, 16, 1), rgba(29, 128, 58, 1));
+  user-select: none;
+  border-radius: var(--border-radius);
+  font-weight: 700;
+  cursor: pointer;
 }

+ 3 - 3
src/widgets/WAgentPolicy/index.jsx

@@ -47,11 +47,11 @@ const WAgentPolicy=({close})=>{
                         {i18n.t("agentPolicy.team_info.title_1")}
                     </span>
                     <div className={styles.info_num}>
-                        <span>{"200,000 X 4%"}</span>
+                        <span>{"200000 X 7%"}</span>
                         <span className={styles.color_5}>{"-"}</span>
-                        <span className={styles.color_2}>{"50,000 X 2%"}</span>
+                        <span className={styles.color_2}>{"50000 X 5%"}</span>
                         <span className={styles.color_5}>{"-"}</span>
-                        <span className={styles.color_3}>{"20,000 X 3%"}</span>
+                        <span className={styles.color_3}>{"20000 X 4%"}</span>
                     </div>
                 </div>
             </div>