Apply t('home.count') to home dashboard and fund-account components
- Remove NumericFormat dependency from home UI components
- Replace NumericFormat with t('home.count') for transaction counts
- day-status-box-container1.tsx: approvalCount, cancelCount
- day-status-box-container2.tsx: dailyAverageCount
- fund-account/result-list-wrap.tsx: request/success/fail counts
- Replace NumericFormat with direct formatting for percentages
- Increase/decrease rates in both container components
- Settlement limit percentage display
- Ensure consistent localization pattern across all count displays
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -294,21 +294,21 @@ export const FundAccountResultListWrap = () => {
|
||||
<span className="label">{t('additionalService.common.request')}</span>
|
||||
<span className="value">
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(totalRequestAmount) })}
|
||||
<span className="unit"> ({new Intl.NumberFormat('en-US').format(totalRequestCount)}{t('home.count')})</span>
|
||||
<span className="unit"> ({t('home.count', { value: new Intl.NumberFormat('en-US').format(totalRequestCount) })})</span>
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">{t('additionalService.common.success')}</span>
|
||||
<span className="value">
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(totalSuccessAmount) })}
|
||||
<span className="unit"> ({new Intl.NumberFormat('en-US').format(totalSuccessCount)}{t('home.count')})</span>
|
||||
<span className="unit"> ({t('home.count', { value: new Intl.NumberFormat('en-US').format(totalSuccessCount) })})</span>
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">{t('additionalService.common.fail')}</span>
|
||||
<span className="value">
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(totalFailAmount) })}
|
||||
<span className="unit"> ({new Intl.NumberFormat('en-US').format(totalFailCount)}{t('home.count')})</span>
|
||||
<span className="unit"> ({t('home.count', { value: new Intl.NumberFormat('en-US').format(totalFailCount) })})</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import moment from 'moment';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { useHomeTodayMutation } from '../api/use-home-today-mutation';
|
||||
@@ -74,13 +73,8 @@ export const BoxContainer1 = () => {
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(sales?.todayTotalAmount || 0) })}
|
||||
</span>
|
||||
<span className={ `per ${(increaseRate && increaseRate >= 0)? 'plus': 'minus'}` }>
|
||||
<NumericFormat
|
||||
value={ increaseRate }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
prefix={ `${(increaseRate && increaseRate >= 0)? '↑ ': '↓ '}` }
|
||||
suffix='%'
|
||||
></NumericFormat>
|
||||
{(increaseRate && increaseRate >= 0) ? '↑ ' : '↓ '}
|
||||
{new Intl.NumberFormat('en-US').format(Math.abs(increaseRate || 0))}%
|
||||
</span>
|
||||
<a className="arrow">
|
||||
<img
|
||||
@@ -94,23 +88,13 @@ export const BoxContainer1 = () => {
|
||||
<li className="approve">
|
||||
{t('home.approvalCount')}
|
||||
<strong style={{marginLeft: '4px'}}>
|
||||
<NumericFormat
|
||||
value={ sales?.totalCount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={t('home.count')}
|
||||
></NumericFormat>
|
||||
{t('home.count', { value: new Intl.NumberFormat('en-US').format(sales?.totalCount || 0) })}
|
||||
</strong>
|
||||
</li>
|
||||
<li className="cancel">
|
||||
{t('home.cancelCount')}
|
||||
<strong style={{marginLeft: '4px'}}>
|
||||
<NumericFormat
|
||||
value={ sales?.cancelCount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={t('home.count')}
|
||||
></NumericFormat>
|
||||
{t('home.count', { value: new Intl.NumberFormat('en-US').format(sales?.cancelCount || 0) })}
|
||||
</strong>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -134,12 +118,7 @@ export const BoxContainer1 = () => {
|
||||
<div className="progress-header">
|
||||
<span className="progress-title">{t('home.settlementLimit')}</span>
|
||||
<span className="progress-remaining">
|
||||
<NumericFormat
|
||||
value={ availableLimit }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={t('home.percentRemaining')}
|
||||
></NumericFormat>
|
||||
{new Intl.NumberFormat('en-US').format(availableLimit || 0)}{t('home.percentRemaining')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-container">
|
||||
|
||||
@@ -4,7 +4,6 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { HomeMonthParams, HomeMonthResponse, HomeOverviewParams, HomeOverviewResponse, Sales, Settlement, TopPaymentMethodInfo, TopSalesDayInfo, TopSalesTimeInfo } from '../model/types';
|
||||
import { useHomeOverviewMutation } from '../api/use-home-overview-mutation';
|
||||
import { useHomeMonthwMutation } from '../api/use-home-month-mutation';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { useNavigate } from '@/shared/lib/hooks';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useStore } from '@/shared/model/store';
|
||||
@@ -115,13 +114,8 @@ export const BoxContainer2 = () => {
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(sales?.currentMonthAmount || 0) })}
|
||||
</span>
|
||||
<span className={ `per ${(salesIncrease && salesIncrease >= 0)? 'plus': 'minus'}` }>
|
||||
<NumericFormat
|
||||
value={ salesIncrease }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
prefix={ `${(salesIncrease && salesIncrease >= 0)? '↑ ': '↓ '}` }
|
||||
suffix='%'
|
||||
></NumericFormat>
|
||||
{(salesIncrease && salesIncrease >= 0) ? '↑ ' : '↓ '}
|
||||
{new Intl.NumberFormat('en-US').format(Math.abs(salesIncrease || 0))}%
|
||||
</span>
|
||||
<a className="arrow">
|
||||
<img
|
||||
@@ -139,13 +133,8 @@ export const BoxContainer2 = () => {
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(settlement?.currentMonthSettlementAmount || 0) })}
|
||||
</span>
|
||||
<span className={ `per ${(settlementIncrease && settlementIncrease >= 0)? 'plus': 'minus'}` }>
|
||||
<NumericFormat
|
||||
value={ settlementIncrease }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
prefix={ `${(settlementIncrease && settlementIncrease >= 0)? '↑ ': '↓ '}` }
|
||||
suffix='%'
|
||||
></NumericFormat>
|
||||
{(settlementIncrease && settlementIncrease >= 0) ? '↑ ' : '↓ '}
|
||||
{new Intl.NumberFormat('en-US').format(Math.abs(settlementIncrease || 0))}%
|
||||
</span>
|
||||
<a className="arrow">
|
||||
<img
|
||||
@@ -175,12 +164,7 @@ export const BoxContainer2 = () => {
|
||||
<div className="two-account">
|
||||
<span>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(dailyAverageSales || 0) })}
|
||||
(<NumericFormat
|
||||
value={ dailyAverageCount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={t('home.count')}
|
||||
></NumericFormat>)
|
||||
({t('home.count', { value: new Intl.NumberFormat('en-US').format(dailyAverageCount || 0) })})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user