import React, { Fragment, useMemo, useRef, useState } from 'react'; import { TableStyle, FormWrapper, TableWrapper, CircularProgressWrapper, TotalRow, } from '../../styles/Components'; import { useCurrencyIndexSearch } from '../searchBar'; import { Button, TopButton, ViewTableInfo } from '../common'; import { TableSkeleton } from '../Skeleton/TableSkeleton'; import { numberFormatter } from '../../utils'; import {STORAGE_GAME_LOG_CURRENCY_SEARCH, } from '../../assets/data/adminConstants'; import ExcelExportButton from '../common/button/ExcelExportButton'; import CircularProgress from '../common/CircularProgress'; import { useTranslation } from 'react-i18next'; import CurrencyIndexSearchBar from '../searchBar/CurrencyIndexSearchBar'; import { useNavigate } from 'react-router-dom'; const CreditContent = () => { const { t } = useTranslation(); const token = sessionStorage.getItem('token'); const navigate = useNavigate(); const tableRef = useRef(null); const [downloadState, setDownloadState] = useState({ loading: false, progress: 0 }); const { searchParams, loading: dataLoading, data: dataList, handleSearch, handleReset, updateSearchParams } = useCurrencyIndexSearch(token); const tableHeaders = useMemo(() => { return [ { id: 'logDay', label: '일자', width: '100px' }, { id: 'accountId', label: 'account ID', width: '80px' }, { id: 'userGuid', label: 'GUID', width: '200px' }, { id: 'userNickname', label: '아바타명', width: '150px' }, { id: 'sapphireAcquired', label: '사파이어 획득량', width: '80px' }, { id: 'sapphireConsumed', label: '사파이어 소모량', width: '80px' }, { id: 'goldAcquired', label: '골드 획득량', width: '80px' }, { id: 'goldConsumed', label: '골드 소모량', width: '80px' }, { id: 'caliumAcquired', label: '칼리움 획득량', width: '80px' }, { id: 'caliumConsumed', label: '칼리움 소모량', width: '80px' }, { id: 'beamAcquired', label: 'BEAM 획득량', width: '80px' }, { id: 'beamConsumed', label: 'BEAM 소모량', width: '80px' }, { id: 'rubyAcquired', label: '루비 획득량', width: '80px' }, { id: 'rubyConsumed', label: '루비 소모량', width: '80px' }, { id: 'sapphireNet', label: '사파이어 계', width: '80px' }, { id: 'goldNet', label: '골드 계', width: '80px' }, { id: 'caliumNet', label: '칼리움 계', width: '80px' }, { id: 'beamNet', label: 'BEAM 계', width: '80px' }, { id: 'rubyNet', label: '루비 계', width: '80px' }, { id: 'totalCurrencies', label: '활동 수', width: '80px' }, { id: 'detail', label: '상세', width: '100px' }, ]; }, []); const totals = useMemo(() => { if (!dataList?.currency_list?.length) return null; return dataList.currency_list.reduce((acc, item) => { return { sapphireAcquired: (acc.sapphireAcquired || 0) + (item.sapphireAcquired || 0), sapphireConsumed: (acc.sapphireConsumed || 0) + (item.sapphireConsumed || 0), goldAcquired: (acc.goldAcquired || 0) + (item.goldAcquired || 0), goldConsumed: (acc.goldConsumed || 0) + (item.goldConsumed || 0), caliumAcquired: (acc.caliumAcquired || 0) + (item.caliumAcquired || 0), caliumConsumed: (acc.caliumConsumed || 0) + (item.caliumConsumed || 0), beamAcquired: (acc.beamAcquired || 0) + (item.beamAcquired || 0), beamConsumed: (acc.beamConsumed || 0) + (item.beamConsumed || 0), rubyAcquired: (acc.rubyAcquired || 0) + (item.rubyAcquired || 0), rubyConsumed: (acc.rubyConsumed || 0) + (item.rubyConsumed || 0), sapphireNet: (acc.sapphireNet || 0) + (item.sapphireNet || 0), goldNet: (acc.goldNet || 0) + (item.goldNet || 0), caliumNet: (acc.caliumNet || 0) + (item.caliumNet || 0), beamNet: (acc.beamNet || 0) + (item.beamNet || 0), rubyNet: (acc.rubyNet || 0) + (item.rubyNet || 0), totalCurrencies: (acc.totalCurrencies || 0) + (item.totalCurrencies || 0), }; }, {}); }, [dataList?.currency_list]); const handleModalSubmit = async (type, param = null) => { switch (type) { case "detail": const params = { tab: "CURRENCY", start_dt: (() => { const date = new Date(param.logDay); return date; })(), end_dt: (() => { const date = new Date(param.logDay); date.setDate(date.getDate() + 1); return date; })(), guid: param.userGuid }; // 복사한 데이터를 세션 스토리지에 저장 sessionStorage.setItem(STORAGE_GAME_LOG_CURRENCY_SEARCH, JSON.stringify(params)); navigate('/datamanage/gamelogview'); break; } } return ( <> { if (executeSearch) { handleSearch(newParams); } else { updateSearchParams(newParams); } }} onReset={handleReset} /> {downloadState.loading && ( )} {dataLoading ? : <> {tableHeaders.map(header => ( {header.label} ))} {totals && ( 합계 {numberFormatter.formatCurrency(totals.sapphireAcquired)} {numberFormatter.formatCurrency(totals.sapphireConsumed)} {numberFormatter.formatCurrency(totals.goldAcquired)} {numberFormatter.formatCurrency(totals.goldConsumed)} {numberFormatter.formatCurrency(totals.caliumAcquired)} {numberFormatter.formatCurrency(totals.caliumConsumed)} {numberFormatter.formatCurrency(totals.beamAcquired)} {numberFormatter.formatCurrency(totals.beamConsumed)} {numberFormatter.formatCurrency(totals.rubyAcquired)} {numberFormatter.formatCurrency(totals.rubyConsumed)} {numberFormatter.formatCurrency(totals.sapphireNet)} {numberFormatter.formatCurrency(totals.goldNet)} {numberFormatter.formatCurrency(totals.caliumNet)} {numberFormatter.formatCurrency(totals.beamNet)} {numberFormatter.formatCurrency(totals.rubyNet)} {totals.totalCurrencies} - )} {dataList?.currency_list?.map((item, index) => ( {item.logDay} {item.accountId} {item.userGuid} {item.userNickname} {numberFormatter.formatCurrency(item.sapphireAcquired)} {numberFormatter.formatCurrency(item.sapphireConsumed)} {numberFormatter.formatCurrency(item.goldAcquired)} {numberFormatter.formatCurrency(item.goldConsumed)} {numberFormatter.formatCurrency(item.caliumAcquired)} {numberFormatter.formatCurrency(item.caliumConsumed)} {numberFormatter.formatCurrency(item.beamAcquired)} {numberFormatter.formatCurrency(item.beamConsumed)} {numberFormatter.formatCurrency(item.rubyAcquired)} {numberFormatter.formatCurrency(item.rubyConsumed)} {numberFormatter.formatCurrency(item.sapphireNet)} {numberFormatter.formatCurrency(item.goldNet)} {numberFormatter.formatCurrency(item.caliumNet)} {numberFormatter.formatCurrency(item.beamNet)} {numberFormatter.formatCurrency(item.rubyNet)} {item.totalCurrencies}