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() {
return (
<React.Fragment>
<Title>Today</Title>
<Title>
on {month}, {year}
</Title>
<ResponsiveContainer>
<LineChart
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 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 TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Title from "./Title";
import { Box } from "@mui/material";
// 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
),
];
import { UserContext } from "@/pages/_app";
import { AdminOrderContext } from "../layout/AdminLayout";
function preventDefault(event) {
event.preventDefault();
}
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 (
<React.Fragment>
<Title>Recent Orders</Title>
<div className="overflow-x-scroll" >
<Title>ออเดอร์ล่าสุด</Title>
<div className="overflow-x-scroll">
<Table size="small">
<TableHead>
<TableRow>
<TableCell>Date</TableCell>
<TableCell>Name</TableCell>
<TableCell>Ship To</TableCell>
<TableCell>Payment Method</TableCell>
<TableCell align="right">Sale Amount</TableCell>
{[
"id",
"ราคาทั้งหมด",
"วันที่",
"จำนวนสินค้า",
"ค่าส่ง",
"ชำระเงิน",
].map((label, idx) => (
<TableCell key={idx}>{label}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.id}>
<TableCell>{row.date}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.shipTo}</TableCell>
<TableCell>{row.paymentMethod}</TableCell>
<TableCell align="right">{`$${row.amount}`}</TableCell>
</TableRow>
))}
{orderRecent.map(
(order, idx) =>
order && (
<TableRow key={idx}>
<TableCell>{order.id}</TableCell>
<TableCell>
<Box color="orangered">
${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>
</Table>
</div>
<Link color="primary" href="#" onClick={preventDefault} sx={{ mt: 3 }}>
See more orders
</Link>
<Box sx={{ pt: 2 }}>
<Link className="text-blue-600" href="/admin/order">ดูออเดอร์ทั้งหมด</Link>
</Box>
</React.Fragment>
);
}
src/pages/admin/order.js
View file @ b65e1604
......@@ -7,7 +7,6 @@ import { UserContext } from "../_app";
import { AdminOrderContext } from "@/components/layout/AdminLayout";
import {
Paper,
Button,
Box,
Table,
TableHead,
......@@ -23,6 +22,16 @@ export default function Order() {
const user = useContext(UserContext);
const adminOrder = useContext(AdminOrderContext);
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) => {
try {
......@@ -70,10 +79,11 @@ export default function Order() {
{[
"id",
"ราคาทั้งหมด",
"รายละเอียด",
"จำนวนสินค้า",
"วันที่",
"ผู้ซื้อ",
"ค่าส่ง",
"ชำระเงิน",
"ที่อยู่",
"การจัดส่ง",
].map((label, idx) => (
<TableCell key={idx}>{label}</TableCell>
......@@ -92,12 +102,19 @@ export default function Order() {
</Box>
</TableCell>
<TableCell>
<Link href={"/admin/order/" + order.id}>
<Button>รายละเอียด</Button>
<Link
title="คลิกเพื่อดูรายละเอียด"
href={"/admin/order/" + order.id}
>
{new Date(order.date).toLocaleString()}
</Link>
</TableCell>
<TableCell>{order.product_count}</TableCell>
<TableCell>{order.shipping_price}</TableCell>
<TableCell>
{userAll.filter((usr) => usr.id === order.user_id)[0].name}
</TableCell>
<TableCell>
<Box color="black">${order.shipping_price}</Box>
</TableCell>
<TableCell>
<Box color={order.pay_status ? "green" : "red"}>
{order.pay_status
......@@ -105,6 +122,7 @@ export default function Order() {
: "ยังไม่ชำระเงิน"}
</Box>
</TableCell>
<TableCell>{order.address}</TableCell>
<TableCell>
<FormControl variant="standard">
<Select
......
src/pages/admin/report.js
View file @ b65e1604
import DashboardLayout from "@/components/dashboard/Dashboard";
import React from "react";
import { Grid, Paper } from "@mui/material";
import Chart from "@/components/dashboard/Chart";
......@@ -9,45 +8,42 @@ import Head from "next/head";
export default function Report() {
return (
<>
<Head>
<title>รายงาน | admin</title>
</Head>
<DashboardLayout>
<Grid container spacing={3}>
{/* Chart */}
<Grid item xs={12} md={8} lg={9}>
<Paper
sx={{
p: 2,
display: "flex",
flexDirection: "column",
height: 240,
}}
>
<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>
<Head>
<title>รายงาน | admin</title>
</Head>
<Grid sx={{maxWidth: 1080, mx: "auto"}} container spacing={3}>
<Grid item xs={12} md={8} lg={9}>
<Paper
sx={{
p: 2,
display: "flex",
flexDirection: "column",
height: 240,
}}
>
<Chart />
</Paper>
</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