diff --git a/src/pages/dashboard/qr-service/利用履歴一覧/TableBox.tsx b/src/pages/dashboard/qr-service/利用履歴一覧/TableBox.tsx index 406df0f..521059e 100644 --- a/src/pages/dashboard/qr-service/利用履歴一覧/TableBox.tsx +++ b/src/pages/dashboard/qr-service/利用履歴一覧/TableBox.tsx @@ -15,6 +15,7 @@ import TableHeadCustom, { import useAuth from "hooks/useAuth"; import useSnackbarCustom from "hooks/useSnackbarCustom"; import { UseTableReturn } from "hooks/useTable"; +import { useMemo } from "react"; import { formatDateTimeStr } from "utils/datetime"; import { numberFormat } from "utils/string"; @@ -25,7 +26,8 @@ export default function TableBox({ table }: CommonProps) { const TABLE_HEAD: HeadLabelProps[] = [ { id: "datetime", label: "日時", align: "left", needSort: false }, { id: "name", label: "名称", align: "left", needSort: false }, - { id: "amount", label: "金額", align: "left", needSort: false }, + { id: "out_amount", label: "入金額", align: "left", needSort: false }, + { id: "in_amount", label: "出金額", align: "left", needSort: false }, { id: "deposit", label: "残高", align: "left", needSort: false }, ]; const { @@ -87,11 +89,23 @@ type RowProps = { data: デポジット異動履歴; }; function Row({ data }: RowProps) { + const inAmount = useMemo(() => { + return 0 < data.transfer_amount + ? numberFormat(data.transfer_amount) + "円" + : "-"; + }, [data]); + const outAmount = useMemo(() => { + return data.transfer_amount < 0 + ? numberFormat(-1 * data.transfer_amount) + "円" + : "-"; + }, [data]); + return ( {formatDateTimeStr(data.transfer_datetime)} {data.transfer_reason ?? "-"} - {numberFormat(data.transfer_amount)}円 + {inAmount} + {outAmount} {numberFormat(data.after_amount)}円 );