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:
Jay Sheen
2025-11-04 17:07:22 +09:00
parent dbce0c6603
commit 4fd3acfaa1
3 changed files with 13 additions and 50 deletions

View File

@@ -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>

View File

@@ -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">

View File

@@ -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>