82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
import { type InvoiceSummary } from "../../api/client";
|
|
import {
|
|
Paper,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TablePagination,
|
|
TableRow,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import { useState } from "react";
|
|
import { FormattedDate } from "react-intl";
|
|
|
|
export const SessionSummaryTable = (props: {
|
|
invoiceSummary: InvoiceSummary;
|
|
}) => {
|
|
const { invoiceSummary } = props;
|
|
const [page, setPage] = useState(0);
|
|
const rowsPerPage = 5;
|
|
|
|
return (
|
|
<Paper
|
|
variant="outlined"
|
|
sx={{
|
|
p: 3,
|
|
bgcolor: "aliceblue",
|
|
borderRadius: 4,
|
|
}}
|
|
>
|
|
<Typography
|
|
sx={{
|
|
paddingBottom: "10px",
|
|
}}
|
|
variant="h6"
|
|
>
|
|
Sessions summary
|
|
</Typography>
|
|
<TableContainer component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell align="center" sx={{ fontWeight: "bold" }}>
|
|
Session date
|
|
</TableCell>
|
|
<TableCell align="center" sx={{ fontWeight: "bold" }}>
|
|
Session status
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{invoiceSummary.sessionsData
|
|
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
|
.map(({ date, status }) => (
|
|
<TableRow>
|
|
<TableCell align="center">
|
|
<FormattedDate
|
|
value={new Date(date)}
|
|
day="numeric"
|
|
month="short"
|
|
year="numeric"
|
|
/>
|
|
</TableCell>
|
|
<TableCell align="center">{status}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
<TablePagination
|
|
component="div"
|
|
count={invoiceSummary.purchaseData.length}
|
|
rowsPerPage={rowsPerPage}
|
|
page={page}
|
|
onPageChange={(_, newPage) => setPage(newPage)}
|
|
rowsPerPageOptions={[]}
|
|
/>
|
|
</Paper>
|
|
);
|
|
};
|