51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
|
import React from "react";
|
||
|
|
import {
|
||
|
|
Table,
|
||
|
|
TableBody,
|
||
|
|
TableCell,
|
||
|
|
TableHead,
|
||
|
|
TableRow,
|
||
|
|
Typography
|
||
|
|
} from "@material-ui/core";
|
||
|
|
import Box from "@material-ui/core/Box";
|
||
|
|
|
||
|
|
const MachineLog = () => {
|
||
|
|
const history = [
|
||
|
|
{ date: "2020-01-05", customerId: "11091700", amount: 3 },
|
||
|
|
{ date: "2020-01-02", customerId: "Anonymous", amount: 1 }
|
||
|
|
];
|
||
|
|
return (
|
||
|
|
<Box margin={1}>
|
||
|
|
<Typography variant="h6" gutterBottom component="div">
|
||
|
|
History
|
||
|
|
</Typography>
|
||
|
|
<Table size="small" aria-label="purchases">
|
||
|
|
<TableHead>
|
||
|
|
<TableRow>
|
||
|
|
<TableCell>Date</TableCell>
|
||
|
|
<TableCell>Customer</TableCell>
|
||
|
|
<TableCell align="right">Amount</TableCell>
|
||
|
|
<TableCell align="right">Total price ($)</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
</TableHead>
|
||
|
|
<TableBody>
|
||
|
|
{history.map(historyRow => (
|
||
|
|
<TableRow key={historyRow.date}>
|
||
|
|
<TableCell component="th" scope="row">
|
||
|
|
{historyRow.date}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>{historyRow.customerId}</TableCell>
|
||
|
|
<TableCell align="right">{historyRow.amount}</TableCell>
|
||
|
|
<TableCell align="right">
|
||
|
|
{Math.round(historyRow.amount * 5 * 100) / 100}
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default MachineLog;
|