SATE-EasyReceipt-front/src/pages/dashboard/use-summary/custom/hello-techno/detail.tsx

import {
  Box,
  Button,
  Grid,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography,
} from "@mui/material";
import { PageID, TabID } from "codes/page";
import { RHFTextField } from "components/hook-form";
import useDashboard from "hooks/useDashBoard";
import { useEffect } from "react";

export default function UseSummaryList() {
  const { setHeaderTitle, setTabs } = useDashboard(
    PageID.DASHBOARD_USE_SUMMARY_DETAIL_CUSTOM_HELLO_TECHNO,
    TabID.NONE
  );

  useEffect(() => {
    setHeaderTitle("利用実績詳細");
    setTabs(null);
  }, []);
  return (
    <>
      <Box sx={{ p: 1, m: 1 }}>
        <Grid container spacing={2}>
          <Grid item>
            <Typography>運営会社</Typography>
            <Typography>京都</Typography>
          </Grid>
          <Grid item>
            <Typography>対象月</Typography>
            <Typography>2023/05</Typography>
          </Grid>
          <Grid item xs />
          <Grid item>
            <Button variant="contained">CSVダウンロード</Button>
          </Grid>
        </Grid>
      </Box>
      <TableContainer
        sx={{
          //  minWidth: 800,
          position: "relative",
        }}
      >
        <Table size="small">
          <TableHead>
            <TableCell>駐車場名</TableCell>
            <TableCell>領収証発行件数</TableCell>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>A駐車場</TableCell>
              <TableCell>1件</TableCell>
            </TableRow>
            <TableRow>
              <TableCell>B駐車場</TableCell>
              <TableCell>3件</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
}