領収証対応

src/api/index.ts

@@ -38,6 +38,9 @@ export const ApiId = {
   SEASON_TICKET_CONTRACT_SELECTION_INFO: id++,
   SEASON_TICKET_CONTRACT_SELECTION_ENTRY: id++,
 
+  // 領収証関連---------------------------------
+  RECEIPTS: id++,
+
   // 問い合わせ関連-------------------------------
   FAQ: id++,
   FAQ_GENRES: id++,

src/api/receipt.ts

@@ -0,0 +1,22 @@
+import { APICommonResponse, ApiId, HttpMethod, request } from "api";
+import { getUrl } from "./url";
+
+export type Receipt = {
+  receipt_date: string;
+  receipt_name: string;
+  total_amount: number;
+  pdf_url: string;
+};
+
+// -------領収証一覧取得---------------
+type ReceiptsRequest = {};
+type ReceiptsResponse = {
+  data: Receipt[];
+} & APICommonResponse;
+export const getReceipts = async (data: ReceiptsRequest) => {
+  const res = await request<ReceiptsResponse>({
+    url: getUrl(ApiId.RECEIPTS),
+    method: HttpMethod.GET,
+  });
+  return res;
+};

src/api/url.ts

@@ -42,6 +42,8 @@ const urls = {
   [A.SEASON_TICKET_CONTRACT_SELECTION_ENTRY]:
     "season-ticket-contract/selection/entry",
 
+  [A.RECEIPTS]: "receipts",
+
   [A.START_CHANGE_EMAIL]: "email/change/start",
   [A.VERIFY_CHANGE_EMAIL]: "email/change/verify",
   [A.CUSTOMER_UPDATE_INFO_ORDER]: "customer/update-info-order",

src/pages/dashboard/receipt/download.tsx

@@ -1,14 +1,34 @@
-import { Button, Card, Stack } from "@mui/material";
+import {
+  Box,
+  Button,
+  Card,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TablePagination,
+  TableRow,
+} from "@mui/material";
+import { Receipt, getReceipts } from "api/receipt";
 import { FormProvider } from "components/hook-form";
 import RHFSelect, { SelectOptionProps } from "components/hook-form/RHFSelect";
+import { TableHeadCustom } from "components/table";
+import { HeadLabelProps } from "components/table/TableHeadCustom";
+import useAPICall from "hooks/useAPICall";
 import useDashboard from "hooks/useDashBoard";
+import useTable from "hooks/useTable";
 import { PageID, TabID } from "pages";
 import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
+import { numberFormat } from "utils/string";
 
-type FormProps = {
-  term: string;
-};
+const TABLE_HEAD: HeadLabelProps[] = [
+  { id: "date", label: "発行日", align: "left", needSort: false },
+  { id: "name", label: "名称", align: "left", needSort: false },
+  { id: "amount", label: "金額", align: "left", needSort: false },
+  { id: "actions", label: " ", align: "left", needSort: false },
+];
 
 export default function ReceiptDownload() {
   const { setHeaderTitle, setTabs } = useDashboard(
@@ -16,26 +36,36 @@ export default function ReceiptDownload() {
     TabID.NONE
   );
 
-  const options: SelectOptionProps[] = useMemo(() => {
-    return [
-      { value: "2023/08 駐車場利用" },
-      { value: "2023/07 駐車場利用" },
-      { value: "2023/06 駐車場利用" },
-      { value: "車庫証明発行" },
-    ];
-  }, []);
+  const {
+    order,
+    page,
+    sort,
+    rowsPerPage,
+    fetched,
+    fillteredRow,
+    isNotFound,
+    dataLength,
+    //
+    onSort,
+    onChangePage,
+    onChangeRowsPerPage,
+    //
+    setRowData,
+    //
+    ROWS_PER_PAGES,
+  } = useTable<Receipt>();
 
-  const form = useForm<FormProps>({
-    defaultValues: {
-      term: "",
+  const { callAPI: callGetReceipts } = useAPICall({
+    apiMethod: getReceipts,
+    backDrop: true,
+    onSuccess: ({ data }) => {
+      setRowData(data);
     },
   });
 
-  const term = form.watch("term");
-
-  const canDownload = useMemo(() => {
-    return term !== "";
-  }, [term]);
+  useEffect(() => {
+    callGetReceipts({});
+  }, []);
 
   useEffect(() => {
     setHeaderTitle("領収証ダウンロード");
@@ -43,13 +73,57 @@ export default function ReceiptDownload() {
   }, [setHeaderTitle, setTabs]);
 
   return (
-    <FormProvider methods={form}>
-      <Card sx={{ maxWidth: 500, m: 1, p: 1 }}>
-        <Stack>
-          <RHFSelect name="term" options={options} size="small" />
-          <Button disabled={!canDownload}>ダウンロード</Button>
-        </Stack>
-      </Card>
-    </FormProvider>
+    <Box>
+      <TableContainer
+        sx={{
+          //  minWidth: 800,
+          position: "relative",
+        }}
+      >
+        <Table 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>
+    </Box>
   );
 }
+
+const Row = ({ data }: { data: Receipt }) => {
+  return (
+    <TableRow>
+      <TableCell>{data.receipt_date}</TableCell>
+      <TableCell>{data.receipt_name}</TableCell>
+      <TableCell>¥{numberFormat(data.total_amount)}</TableCell>
+      <TableCell>
+        <Button variant="contained" target="_blank" href={data.pdf_url}>
+          PDF
+        </Button>
+      </TableCell>
+    </TableRow>
+  );
+};