From e8b5031ddfbc7a9645602ef8252af1016f4f23dd Mon Sep 17 00:00:00 2001
From: "sosuke.iwabuchi" <sosuke.iwabuchi@satellite-tech.co.jp>
Date: Wed, 3 Apr 2024 10:07:40 +0900
Subject: [PATCH] =?UTF-8?q?=E5=88=A9=E7=94=A8=E5=B1=A5=E6=AD=B4=20?=
 =?UTF-8?q?=E5=85=A5=E9=87=91=E3=81=A8=E5=87=BA=E9=87=91=E3=81=AE=E5=88=97?=
 =?UTF-8?q?=E3=82=92=E5=88=86=E9=9B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../qr-service/利用履歴一覧/TableBox.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

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 (
     <TableRow>
       <TableCell>{formatDateTimeStr(data.transfer_datetime)}</TableCell>
       <TableCell>{data.transfer_reason ?? "-"}</TableCell>
-      <TableCell>{numberFormat(data.transfer_amount)}円</TableCell>
+      <TableCell>{inAmount}</TableCell>
+      <TableCell>{outAmount}</TableCell>
       <TableCell>{numberFormat(data.after_amount)}円</TableCell>
     </TableRow>
   );