利用履歴 入金と出金の列を分離

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>
   );