利用履歴一覧を対応

src/api/index.ts

@@ -35,6 +35,7 @@ export const ApiId = {
   店舗一覧取得: id++,
   店舗新規登録: id++,
   デポジット情報取得: id++,
+  デポジット異動履歴一覧取得: id++,
   デポジットチャージ: id++,
   店舗設定: id++,
   店舗QR設定取得: id++,

src/api/shop.ts

@@ -25,6 +25,13 @@ export type QRサービス券取得設定 = {
   shop_no: number;
   discount_ticket_code: number;
 };
+export type デポジット異動履歴 = {
+  transfer_datetime: Date;
+  transfer_reason: string | null;
+  transfer_amount: number;
+  before_amount: number;
+  after_amount: number;
+};
 
 // -------店舗一覧取得---------------
 export type 店舗一覧取得Request = {
@@ -78,6 +85,23 @@ export const デポジット情報取得 = async (param: デポジット情報
   });
   return res;
 };
+// -------デポジット異動履歴一覧取得---------------
+export type デポジット異動履歴一覧取得Request = {};
+export type デポジット異動履歴一覧取得Response = {
+  data: {
+    list: デポジット異動履歴[];
+  };
+} & APICommonResponse;
+export const デポジット異動履歴一覧取得 = async (
+  param: デポジット異動履歴一覧取得Request
+) => {
+  const res = await request<デポジット異動履歴一覧取得Response>({
+    url: getUrl(ApiId.デポジット異動履歴一覧取得),
+    method: HttpMethod.GET,
+    data: new URLSearchParams(param),
+  });
+  return res;
+};
 
 // -------デポジットチャージ---------------
 export type デポジットチャージRequest = {

src/api/url.ts

@@ -30,6 +30,7 @@ const urls = {
   [A.店舗一覧取得]: "shop/list",
   [A.店舗新規登録]: "shop/register",
   [A.デポジット情報取得]: "shop/deposit",
+  [A.デポジット異動履歴一覧取得]: "shop/deposit/transfer/list",
   [A.デポジットチャージ]: "shop/deposit/charge",
   [A.店舗設定]: "shop/config",
   [A.店舗設定]: "shop/config",

src/auth/route.ts

@@ -33,7 +33,7 @@ const 認可別許可ルート: {
     ...共通ルート,
     ...認証後共通ルート,
     P.サービス券発行用QRコード,
-    P.サービス券利用履歴,
+    P.利用履歴,
     P.QRサービス券承認,
   ],
 };

src/layouts/dashbord/navigator.tsx

@@ -147,7 +147,7 @@ export default function Navigator(props: DrawerProps) {
         {
           label: "利用履歴",
           icon: <ArticleIcon />,
-          id: PageID.サービス券利用履歴,
+          id: PageID.利用履歴,
         },
       ],
     },

src/pages/dashboard/qr-service/サービス券利用履歴.tsx

@@ -1,3 +0,0 @@
-export default function サービス券利用履歴() {
-  return null;
-}

src/pages/dashboard/qr-service/利用履歴一覧/SearchBox.tsx

@@ -0,0 +1,60 @@
+import { Dictionary } from "@types";
+import { デポジット異動履歴, デポジット異動履歴一覧取得 } from "api/shop";
+import { FormProvider } from "components/hook-form";
+import useAPICall from "hooks/useAPICall";
+import useSearchConditionContext from "hooks/useSearchConditionContext";
+import { UseTableReturn } from "hooks/useTable";
+import { isEqual } from "lodash";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+
+type FormProps = {};
+
+type CommonProps = {
+  table: UseTableReturn<デポジット異動履歴>;
+};
+export default function SearchBox({ table }: CommonProps) {
+  const [lastSendSearchCondition, setLastSendSearchCondition] =
+    useState<object>({ default: false });
+  const { condition, initialized, get, addCondition } =
+    useSearchConditionContext();
+  const form = useForm<FormProps>({
+    defaultValues: {},
+  });
+
+  const { callAPI: call顧客一覧取得, makeSendData } = useAPICall({
+    apiMethod: デポジット異動履歴一覧取得,
+    form,
+    backDrop: true,
+    onSuccess: ({ data }) => {
+      table.setRowData(data.list);
+    },
+  });
+
+  const handleBlur = () => {
+    addCondition(form.getValues());
+  };
+  const handleSubmit = async (data: FormProps) => {
+    addCondition(data);
+  };
+
+  const fetch = async (data: Dictionary) => {
+    const sendData = makeSendData(data);
+    if (!isEqual(sendData, lastSendSearchCondition)) {
+      setLastSendSearchCondition(sendData);
+      call顧客一覧取得(sendData);
+    }
+  };
+
+  useEffect(() => {
+    if (initialized) {
+      fetch(condition);
+    }
+  }, [condition, initialized]);
+
+  return (
+    <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
+      <></>
+    </FormProvider>
+  );
+}

src/pages/dashboard/qr-service/利用履歴一覧/TableBox.tsx

@@ -0,0 +1,98 @@
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TablePagination,
+  TableRow,
+} from "@mui/material";
+import { 顧客ログインユーザ } from "api/login-user";
+import { デポジット異動履歴 } from "api/shop";
+import TableHeadCustom, {
+  HeadLabelProps,
+} from "components/table/TableHeadCustom";
+import useAuth from "hooks/useAuth";
+import useSnackbarCustom from "hooks/useSnackbarCustom";
+import { UseTableReturn } from "hooks/useTable";
+import { formatDateTimeStr } from "utils/datetime";
+import { numberFormat } from "utils/string";
+
+type CommonProps = {
+  table: UseTableReturn<デポジット異動履歴>;
+};
+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: "deposit", label: "残高", align: "left", needSort: false },
+  ];
+  const {
+    order,
+    page,
+    sort,
+    rowsPerPage,
+    fetched,
+    fillteredRow,
+    isNotFound,
+    dataLength,
+    //
+    onSort,
+    onChangePage,
+    onChangeRowsPerPage,
+    //
+    setRowData,
+    //
+    ROWS_PER_PAGES,
+  } = table;
+
+  return (
+    <>
+      <TableContainer>
+        <Table sx={{ minWidth: 800 }} size="small">
+          <TableHeadCustom
+            order={order}
+            orderBy={sort}
+            headLabel={TABLE_HEAD}
+            rowCount={1}
+            numSelected={0}
+            onSort={onSort}
+          />
+
+          <TableBody>
+            {fillteredRow.map((row, index) => (
+              <Row data={row} key={index} />
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      <Box sx={{ position: "relative" }}>
+        <TablePagination
+          rowsPerPageOptions={ROWS_PER_PAGES}
+          component="div"
+          count={dataLength}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={onChangePage}
+          onRowsPerPageChange={onChangeRowsPerPage}
+        />
+      </Box>
+    </>
+  );
+}
+
+type RowProps = {
+  data: デポジット異動履歴;
+};
+function Row({ data }: RowProps) {
+  return (
+    <TableRow>
+      <TableCell>{formatDateTimeStr(data.transfer_datetime)}</TableCell>
+      <TableCell>{data.transfer_reason ?? "-"}</TableCell>
+      <TableCell>{numberFormat(data.transfer_amount)}円</TableCell>
+      <TableCell>{numberFormat(data.after_amount)}円</TableCell>
+    </TableRow>
+  );
+}

src/pages/dashboard/qr-service/利用履歴一覧/index.tsx

@@ -0,0 +1,34 @@
+import { デポジット異動履歴 } from "api/shop";
+import { SearchConditionContextProvider } from "contexts/SearchConditionContext";
+import useDashboard from "hooks/useDashBoard";
+import useTable from "hooks/useTable";
+import { useEffect } from "react";
+import { Box } from "@mui/material";
+import TableBox from "./TableBox";
+import { PageID, TabID } from "pages";
+import SearchBox from "./SearchBox";
+
+export default function Main() {
+  const { setHeaderTitle, setTabs } = useDashboard(PageID.利用履歴, TabID.NONE);
+
+  useEffect(() => {
+    setHeaderTitle("利用履歴");
+    setTabs(null);
+  }, []);
+
+  return (
+    <SearchConditionContextProvider>
+      <Page />
+    </SearchConditionContextProvider>
+  );
+}
+function Page() {
+  const table = useTable<デポジット異動履歴>();
+
+  return (
+    <Box>
+      <SearchBox table={table} />
+      <TableBox table={table} />
+    </Box>
+  );
+}

src/pages/index.ts

@@ -29,7 +29,7 @@ export const PageID = {
   店舗詳細: id++,
 
   サービス券発行用QRコード: id++,
-  サービス券利用履歴: id++,
+  利用履歴: id++,
 
   QRサービス券発行申請: id++,
   QRサービス券承認: id++,

src/routes/path.ts

@@ -66,7 +66,7 @@ const PATHS_DASHBOARD = {
 
   [makePathKey(PageID.サービス券発行用QRコード)]:
     "/dashboard/qr-service/acquisition/generate",
-  [makePathKey(PageID.サービス券利用履歴)]: "/dashboard/qrcode/history",
+  [makePathKey(PageID.利用履歴)]: "/dashboard/qr-service/history",
 };
 
 const PATHS = {

src/routes/sub/dashboard.tsx

@@ -24,7 +24,7 @@ export default function DashboardRoutes(): RouteObject[] {
       lazy(() => import("pages/dashboard/qr-service/サービス券発行用QRコード"))
     );
     const サービス券利用履歴 = Loadable(
-      lazy(() => import("pages/dashboard/qr-service/サービス券利用履歴"))
+      lazy(() => import("pages/dashboard/qr-service/利用履歴一覧"))
     );
     const QRサービス券駐車場管理一覧 = Loadable(
       lazy(
@@ -210,6 +210,13 @@ export default function DashboardRoutes(): RouteObject[] {
           path: getPath(PageID.サービス券発行用QRコード),
         },
       },
+      {
+        pageId: PageID.利用履歴,
+        ele: {
+          element: <サービス券利用履歴 />,
+          path: getPath(PageID.利用履歴),
+        },
+      },
     ];
 
     return allChildren