Skip to content

F
final-exam
Commit b65e1604 authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon
Browse files
Options

update order display; 

show recent order in report
parent 756c7ccd
Hide whitespace changes
Inline Side-by-side
Showing with 119 additions and 229 deletions
src/components/dashboard/Chart.js
View file @ b65e1604
...@@ -60,7 +60,9 @@ export default function Chart() { ...@@ -60,7 +60,9 @@ export default function Chart() {
return ( return (
<React.Fragment> <React.Fragment>
<Title>Today</Title> <Title>
on {month}, {year}
</Title>
<ResponsiveContainer> <ResponsiveContainer>
<LineChart <LineChart
data={data} data={data}
......
src/components/dashboard/Dashboard.js deleted 100644 → 0
View file @ 756c7ccd
import * as React from "react";
import { styled, createTheme, ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import MuiDrawer from "@mui/material/Drawer";
import Box from "@mui/material/Box";
import MuiAppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import List from "@mui/material/List";
import Divider from "@mui/material/Divider";
import IconButton from "@mui/material/IconButton";
import Container from "@mui/material/Container";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import { mainListItems, secondaryListItems } from "./listItems";
const drawerWidth = 240;
const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}));
const Drawer = styled(MuiDrawer, {
shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({
"& .MuiDrawer-paper": {
position: "relative",
whiteSpace: "nowrap",
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
boxSizing: "border-box",
...(!open && {
overflowX: "hidden",
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing(7),
[theme.breakpoints.up("sm")]: {
width: theme.spacing(9),
},
}),
},
}));
// TODO remove, this demo shouldn't need to reset the theme.
const defaultTheme = createTheme();
export default function DashboardLayout(props) {
const [open, setOpen] = React.useState(true);
const toggleDrawer = () => {
setOpen(!open);
};
return (
<ThemeProvider theme={defaultTheme}>
<Box sx={{ display: "flex" }}>
<CssBaseline />
<Drawer className="z-0" variant="permanent" open={open}>
<Toolbar
sx={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
px: [1],
}}
>
<IconButton onClick={toggleDrawer}>
<ChevronLeftIcon />
</IconButton>
</Toolbar>
<Divider />
<List component="nav">
{mainListItems}
<Divider sx={{ my: 1 }} />
{secondaryListItems}
</List>
</Drawer>
<Box
component="main"
sx={{
backgroundColor: (theme) =>
theme.palette.mode === "light"
? theme.palette.grey[100]
: theme.palette.grey[900],
flexGrow: 1,
height: "100vh",
maxWidth: "100vw",
overflow: "auto",
}}
>
<Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>{props.children}</Container>
</Box>
</Box>
</ThemeProvider>
);
}
src/components/dashboard/Orders.js
View file @ b65e1604
import * as React from "react"; import * as React from "react";
import Link from "@mui/material/Link"; import Link from "next/link";
import { Box, Button, FormControl, Select, MenuItem } from "@mui/material";
import Table from "@mui/material/Table"; import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody"; import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell"; import TableCell from "@mui/material/TableCell";
import TableHead from "@mui/material/TableHead"; import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow"; import TableRow from "@mui/material/TableRow";
import Title from "./Title"; import Title from "./Title";
import { Box } from "@mui/material"; import { UserContext } from "@/pages/_app";
import { AdminOrderContext } from "../layout/AdminLayout";
// Generate Order Data
function createData(id, date, name, shipTo, paymentMethod, amount) {
return { id, date, name, shipTo, paymentMethod, amount };
}
const rows = [
createData(
0,
"16 Mar, 2019",
"Elvis Presley",
"Tupelo, MS",
"VISA ⠀•••• 3719",
312.44
),
createData(
1,
"16 Mar, 2019",
"Paul McCartney",
"London, UK",
"VISA ⠀•••• 2574",
866.99
),
createData(
2,
"16 Mar, 2019",
"Tom Scholz",
"Boston, MA",
"MC ⠀•••• 1253",
100.81
),
createData(
3,
"16 Mar, 2019",
"Michael Jackson",
"Gary, IN",
"AMEX ⠀•••• 2000",
654.39
),
createData(
4,
"15 Mar, 2019",
"Bruce Springsteen",
"Long Branch, NJ",
"VISA ⠀•••• 5919",
212.79
),
];
function preventDefault(event) { function preventDefault(event) {
event.preventDefault(); event.preventDefault();
} }
export default function Orders() { export default function Orders() {
const user = React.useContext(UserContext);
const adminOrder = React.useContext(AdminOrderContext);
const [orderRecent, setOrderRecent] = React.useState([]);
React.useEffect(() => {
let order_r = [];
for (let i = 0; i < adminOrder.value.length && order_r.length < 5; i++) {
order_r.push(adminOrder.value[i]);
}
setOrderRecent(order_r);
}, [adminOrder]);
return ( return (
<React.Fragment> <React.Fragment>
<Title>Recent Orders</Title> <Title>ออเดอร์ล่าสุด</Title>
<div className="overflow-x-scroll" > <div className="overflow-x-scroll">
<Table size="small"> <Table size="small">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell>Date</TableCell> {[
<TableCell>Name</TableCell> "id",
<TableCell>Ship To</TableCell> "ราคาทั้งหมด",
<TableCell>Payment Method</TableCell> "วันที่",
<TableCell align="right">Sale Amount</TableCell> "จำนวนสินค้า",
"ค่าส่ง",
"ชำระเงิน",
].map((label, idx) => (
<TableCell key={idx}>{label}</TableCell>
))}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{rows.map((row) => ( {orderRecent.map(
<TableRow key={row.id}> (order, idx) =>
<TableCell>{row.date}</TableCell> order && (
<TableCell>{row.name}</TableCell> <TableRow key={idx}>
<TableCell>{row.shipTo}</TableCell> <TableCell>{order.id}</TableCell>
<TableCell>{row.paymentMethod}</TableCell> <TableCell>
<TableCell align="right">{`$${row.amount}`}</TableCell> <Box color="orangered">
</TableRow> ${Number(order.total_price).toLocaleString()}
))} </Box>
</TableCell>
<TableCell>
<Link href={"/admin/order/" + order.id}>
{new Date(order.date).toLocaleString()}
</Link>
</TableCell>
<TableCell>{order.product_count}</TableCell>
<TableCell>{order.shipping_price}</TableCell>
<TableCell>
<Box color={order.pay_status ? "green" : "red"}>
{order.pay_status ? "ชำระเงินแล้ว" : "ยังไม่ชำระเงิน"}
</Box>
</TableCell>
</TableRow>
)
)}
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
<Link color="primary" href="#" onClick={preventDefault} sx={{ mt: 3 }}> <Box sx={{ pt: 2 }}>
See more orders <Link className="text-blue-600" href="/admin/order">ดูออเดอร์ทั้งหมด</Link>
</Link> </Box>
</React.Fragment> </React.Fragment>
); );
} }
src/pages/admin/order.js
View file @ b65e1604
...@@ -7,7 +7,6 @@ import { UserContext } from "../_app"; ...@@ -7,7 +7,6 @@ import { UserContext } from "../_app";
import { AdminOrderContext } from "@/components/layout/AdminLayout"; import { AdminOrderContext } from "@/components/layout/AdminLayout";
import { import {
Paper, Paper,
Button,
Box, Box,
Table, Table,
TableHead, TableHead,
...@@ -23,6 +22,16 @@ export default function Order() { ...@@ -23,6 +22,16 @@ export default function Order() {
const user = useContext(UserContext); const user = useContext(UserContext);
const adminOrder = useContext(AdminOrderContext); const adminOrder = useContext(AdminOrderContext);
const [message, setMessage] = useState({ message: "", error: false }); const [message, setMessage] = useState({ message: "", error: false });
const [userAll, setUserAll] = useState([]);
useEffect(() => {
axios
.get("/api/user")
.then((res) => {
setUserAll(res.data);
})
.catch((err) => console.log(err));
}, []);
const onSendingChange = async (id, sending) => { const onSendingChange = async (id, sending) => {
try { try {
...@@ -70,10 +79,11 @@ export default function Order() { ...@@ -70,10 +79,11 @@ export default function Order() {
{[ {[
"id", "id",
"ราคาทั้งหมด", "ราคาทั้งหมด",
"รายละเอียด", "วันที่",
"จำนวนสินค้า", "ผู้ซื้อ",
"ค่าส่ง", "ค่าส่ง",
"ชำระเงิน", "ชำระเงิน",
"ที่อยู่",
"การจัดส่ง", "การจัดส่ง",
].map((label, idx) => ( ].map((label, idx) => (
<TableCell key={idx}>{label}</TableCell> <TableCell key={idx}>{label}</TableCell>
...@@ -92,12 +102,19 @@ export default function Order() { ...@@ -92,12 +102,19 @@ export default function Order() {
</Box> </Box>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Link href={"/admin/order/" + order.id}> <Link
<Button>รายละเอียด</Button> title="คลิกเพื่อดูรายละเอียด"
href={"/admin/order/" + order.id}
>
{new Date(order.date).toLocaleString()}
</Link> </Link>
</TableCell> </TableCell>
<TableCell>{order.product_count}</TableCell> <TableCell>
<TableCell>{order.shipping_price}</TableCell> {userAll.filter((usr) => usr.id === order.user_id)[0].name}
</TableCell>
<TableCell>
<Box color="black">${order.shipping_price}</Box>
</TableCell>
<TableCell> <TableCell>
<Box color={order.pay_status ? "green" : "red"}> <Box color={order.pay_status ? "green" : "red"}>
{order.pay_status {order.pay_status
...@@ -105,6 +122,7 @@ export default function Order() { ...@@ -105,6 +122,7 @@ export default function Order() {
: "ยังไม่ชำระเงิน"} : "ยังไม่ชำระเงิน"}
</Box> </Box>
</TableCell> </TableCell>
<TableCell>{order.address}</TableCell>
<TableCell> <TableCell>
<FormControl variant="standard"> <FormControl variant="standard">
<Select <Select
......
src/pages/admin/report.js
View file @ b65e1604
import DashboardLayout from "@/components/dashboard/Dashboard";
import React from "react"; import React from "react";
import { Grid, Paper } from "@mui/material"; import { Grid, Paper } from "@mui/material";
import Chart from "@/components/dashboard/Chart"; import Chart from "@/components/dashboard/Chart";
...@@ -9,45 +8,42 @@ import Head from "next/head"; ...@@ -9,45 +8,42 @@ import Head from "next/head";
export default function Report() { export default function Report() {
return ( return (
<> <>
<Head> <Head>
<title>รายงาน | admin</title> <title>รายงาน | admin</title>
</Head> </Head>
<DashboardLayout> <Grid sx={{maxWidth: 1080, mx: "auto"}} container spacing={3}>
<Grid container spacing={3}> <Grid item xs={12} md={8} lg={9}>
{/* Chart */} <Paper
<Grid item xs={12} md={8} lg={9}> sx={{
<Paper p: 2,
sx={{ display: "flex",
p: 2, flexDirection: "column",
display: "flex", height: 240,
flexDirection: "column", }}
height: 240, >
}} <Chart />
> </Paper>
<Chart />
</Paper>
</Grid>
{/* Recent Deposits */}
<Grid item xs={12} md={4} lg={3}>
<Paper
sx={{
p: 2,
display: "flex",
flexDirection: "column",
height: 240,
}}
>
<Deposits />
</Paper>
</Grid>
{/* Recent Orders */}
<Grid item xs={12}>
<Paper sx={{ p: 2, display: "flex", flexDirection: "column" }}>
<Orders />
</Paper>
</Grid>
</Grid> </Grid>
</DashboardLayout> {/* Recent Deposits */}
<Grid item xs={12} md={4} lg={3}>
<Paper
sx={{
p: 2,
display: "flex",
flexDirection: "column",
height: 240,
}}
>
<Deposits />
</Paper>
</Grid>
{/* Recent Orders */}
<Grid item xs={12}>
<Paper sx={{ p: 2, display: "flex", flexDirection: "column" }}>
<Orders />
</Paper>
</Grid>
</Grid>
</> </>
); );
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment