Skip to content

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

create: product page and add product ui;

parent bc387faf
Hide whitespace changes
Inline Side-by-side
Showing with 302 additions and 210 deletions
src/components/AddProduct.js 0 → 100644
View file @ d29e972b
import * as React from "react";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import {
FormControl,
InputLabel,
MenuItem,
Select,
} from "@mui/material";
export default function AddProduct({ open, handleClose }) {
const CategoryList = [
{
id: 0,
name: "computer",
},
{
id: 1,
name: "phone",
},
{
id: 2,
name: "tablet",
},
];
return (
<Dialog open={open} onClose={handleClose}>
<DialogTitle>เพิ่มสินค้า</DialogTitle>
<DialogContent className="text-center">
<TextField className="m-1" label="ชื่อสินค้า" variant="standard" />
<TextField
className="m-1"
label="ราคา"
variant="standard"
type="number"
/>
<div className="text-left">
<TextField
className="m-1"
label="รายละเอียด"
variant="standard"
multiline
rows={3}
/>
</div>
<div className="text-left">
<TextField
className="m-1"
label="ส่วนลด (%)"
variant="standard"
type="number"
/>
<TextField
className="m-1"
label="จำนวนสินค้า"
variant="standard"
type="number"
/>
</div>
<TextField
label="รูปภาพ"
variant="standard"
fullWidth
helperText="https://www.domain.com/image.png"
/>
<FormControl className="m-1" variant="standard" sx={{ minWidth: 100 }}>
<InputLabel>หมวดหมู่</InputLabel>
<Select>
{CategoryList.map((cat, idx) => (
<MenuItem value={cat.id}>{cat.name}</MenuItem>
))}
</Select>
</FormControl>
</DialogContent>
<DialogActions>
<Button color="error" onClick={handleClose}>ยกเลิก</Button>
<Button onClick={handleClose}>เพิ่ม</Button>
</DialogActions>
</Dialog>
);
}
src/components/AdminNavbar.js
View file @ d29e972b
...@@ -243,7 +243,7 @@ function AdminNavbar(props) { ...@@ -243,7 +243,7 @@ function AdminNavbar(props) {
<Box sx={{ flexGrow: 1 }} /> <Box sx={{ flexGrow: 1 }} />
<Box sx={{ display: { xs: "none", md: "flex" } }}> <Box sx={{ display: { xs: "none", md: "flex" } }}>
{MenuList.map((menu, idx) => ( {MenuList.map((menu, idx) => (
<Link className="text-white" key={idx} href={menu.link}> <Link title={menu.label} className="text-white" key={idx} href={menu.link}>
<span>{menu.element}</span> <span>{menu.element}</span>
</Link> </Link>
))} ))}
......
src/components/Navbar.js
View file @ d29e972b
...@@ -198,7 +198,7 @@ function Navbar(props) { ...@@ -198,7 +198,7 @@ function Navbar(props) {
if (user.value.rank) { if (user.value.rank) {
MenuList.unshift({ MenuList.unshift({
label: "admin", label: "admin",
link: "/admin/", link: "/admin/report",
element: ( element: (
<IconButton size="large" aria-label="show 4 new mails" color="inherit"> <IconButton size="large" aria-label="show 4 new mails" color="inherit">
<Badge color="error"> <Badge color="error">
......
src/components/dashboard/Dashboard.js
View file @ d29e972b
import * as React from 'react'; import * as React from "react";
import { styled, createTheme, ThemeProvider } from '@mui/material/styles'; import { styled, createTheme, ThemeProvider } from "@mui/material/styles";
import CssBaseline from '@mui/material/CssBaseline'; import CssBaseline from "@mui/material/CssBaseline";
import MuiDrawer from '@mui/material/Drawer'; import MuiDrawer from "@mui/material/Drawer";
import Box from '@mui/material/Box'; import Box from "@mui/material/Box";
import MuiAppBar from '@mui/material/AppBar'; import MuiAppBar from "@mui/material/AppBar";
import Toolbar from '@mui/material/Toolbar'; import Toolbar from "@mui/material/Toolbar";
import List from '@mui/material/List'; import List from "@mui/material/List";
import Typography from '@mui/material/Typography'; import Divider from "@mui/material/Divider";
import Divider from '@mui/material/Divider'; import IconButton from "@mui/material/IconButton";
import IconButton from '@mui/material/IconButton'; import Container from "@mui/material/Container";
import Badge from '@mui/material/Badge'; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import Container from '@mui/material/Container'; import { mainListItems, secondaryListItems } from "./listItems";
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
import Link from '@mui/material/Link';
import MenuIcon from '@mui/icons-material/Menu';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import NotificationsIcon from '@mui/icons-material/Notifications';
import { mainListItems, secondaryListItems } from './listItems';
import Chart from './Chart';
import Deposits from './Deposits';
import Orders from './Orders';
function Copyright(props) {
return (
<Typography variant="body2" color="text.secondary" align="center" {...props}>
{'Copyright © '}
<Link color="inherit" href="https://mui.com/">
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const drawerWidth = 240; const drawerWidth = 240;
const AppBar = styled(MuiAppBar, { const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== 'open', shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({ })(({ theme, open }) => ({
zIndex: theme.zIndex.drawer + 1, zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], { transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen, duration: theme.transitions.duration.leavingScreen,
}), }),
...(open && { ...(open && {
marginLeft: drawerWidth, marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`, width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], { transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.enteringScreen,
}), }),
}), }),
})); }));
const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })( const Drawer = styled(MuiDrawer, {
({ theme, open }) => ({ shouldForwardProp: (prop) => prop !== "open",
'& .MuiDrawer-paper': { })(({ theme, open }) => ({
position: 'relative', "& .MuiDrawer-paper": {
whiteSpace: 'nowrap', position: "relative",
width: drawerWidth, whiteSpace: "nowrap",
transition: theme.transitions.create('width', { 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, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.leavingScreen,
}),
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),
},
}), }),
}, width: theme.spacing(7),
}), [theme.breakpoints.up("sm")]: {
); width: theme.spacing(9),
},
}),
},
}));
// TODO remove, this demo shouldn't need to reset the theme. // TODO remove, this demo shouldn't need to reset the theme.
const defaultTheme = createTheme(); const defaultTheme = createTheme();
export default function Dashboard() { export default function DashboardLayout(props) {
const [open, setOpen] = React.useState(true); const [open, setOpen] = React.useState(true);
const toggleDrawer = () => { const toggleDrawer = () => {
setOpen(!open); setOpen(!open);
...@@ -92,48 +69,14 @@ export default function Dashboard() { ...@@ -92,48 +69,14 @@ export default function Dashboard() {
return ( return (
<ThemeProvider theme={defaultTheme}> <ThemeProvider theme={defaultTheme}>
<Box sx={{ display: 'flex' }}> <Box sx={{ display: "flex" }}>
<CssBaseline /> <CssBaseline />
<AppBar position="absolute" open={open}> <Drawer className="z-0" variant="permanent" open={open}>
<Toolbar
sx={{
pr: '24px', // keep right padding when drawer closed
}}
>
<IconButton
edge="start"
color="inherit"
aria-label="open drawer"
onClick={toggleDrawer}
sx={{
marginRight: '36px',
...(open && { display: 'none' }),
}}
>
<MenuIcon />
</IconButton>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
sx={{ flexGrow: 1 }}
>
Dashboard
</Typography>
<IconButton color="inherit">
<Badge badgeContent={4} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton>
</Toolbar>
</AppBar>
<Drawer variant="permanent" open={open}>
<Toolbar <Toolbar
sx={{ sx={{
display: 'flex', display: "flex",
alignItems: 'center', alignItems: "center",
justifyContent: 'flex-end', justifyContent: "flex-end",
px: [1], px: [1],
}} }}
> >
...@@ -148,58 +91,23 @@ export default function Dashboard() { ...@@ -148,58 +91,23 @@ export default function Dashboard() {
{secondaryListItems} {secondaryListItems}
</List> </List>
</Drawer> </Drawer>
<Box <Box
component="main" component="main"
sx={{ sx={{
backgroundColor: (theme) => backgroundColor: (theme) =>
theme.palette.mode === 'light' theme.palette.mode === "light"
? theme.palette.grey[100] ? theme.palette.grey[100]
: theme.palette.grey[900], : theme.palette.grey[900],
flexGrow: 1, flexGrow: 1,
height: '100vh', height: "100vh",
overflow: 'auto', maxWidth: "100vw",
overflow: "auto",
}} }}
> >
<Toolbar /> <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>{props.children}</Container>
<Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
<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>
</Grid>
<Copyright sx={{ pt: 4 }} />
</Container>
</Box> </Box>
</Box> </Box>
</ThemeProvider> </ThemeProvider>
); );
} }
\ No newline at end of file
src/components/dashboard/Orders.js
View file @ d29e972b
import * as React from 'react'; import * as React from "react";
import Link from '@mui/material/Link'; import Link from "@mui/material/Link";
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";
// Generate Order Data // Generate Order Data
function createData(id, date, name, shipTo, paymentMethod, amount) { function createData(id, date, name, shipTo, paymentMethod, amount) {
...@@ -15,36 +16,43 @@ function createData(id, date, name, shipTo, paymentMethod, amount) { ...@@ -15,36 +16,43 @@ function createData(id, date, name, shipTo, paymentMethod, amount) {
const rows = [ const rows = [
createData( createData(
0, 0,
'16 Mar, 2019', "16 Mar, 2019",
'Elvis Presley', "Elvis Presley",
'Tupelo, MS', "Tupelo, MS",
'VISA ⠀•••• 3719', "VISA ⠀•••• 3719",
312.44, 312.44
), ),
createData( createData(
1, 1,
'16 Mar, 2019', "16 Mar, 2019",
'Paul McCartney', "Paul McCartney",
'London, UK', "London, UK",
'VISA ⠀•••• 2574', "VISA ⠀•••• 2574",
866.99, 866.99
),
createData(
2,
"16 Mar, 2019",
"Tom Scholz",
"Boston, MA",
"MC ⠀•••• 1253",
100.81
), ),
createData(2, '16 Mar, 2019', 'Tom Scholz', 'Boston, MA', 'MC ⠀•••• 1253', 100.81),
createData( createData(
3, 3,
'16 Mar, 2019', "16 Mar, 2019",
'Michael Jackson', "Michael Jackson",
'Gary, IN', "Gary, IN",
'AMEX ⠀•••• 2000', "AMEX ⠀•••• 2000",
654.39, 654.39
), ),
createData( createData(
4, 4,
'15 Mar, 2019', "15 Mar, 2019",
'Bruce Springsteen', "Bruce Springsteen",
'Long Branch, NJ', "Long Branch, NJ",
'VISA ⠀•••• 5919', "VISA ⠀•••• 5919",
212.79, 212.79
), ),
]; ];
...@@ -56,31 +64,33 @@ export default function Orders() { ...@@ -56,31 +64,33 @@ export default function Orders() {
return ( return (
<React.Fragment> <React.Fragment>
<Title>Recent Orders</Title> <Title>Recent Orders</Title>
<Table size="small"> <div className="overflow-x-scroll" >
<TableHead> <Table size="small">
<TableRow> <TableHead>
<TableCell>Date</TableCell> <TableRow>
<TableCell>Name</TableCell> <TableCell>Date</TableCell>
<TableCell>Ship To</TableCell> <TableCell>Name</TableCell>
<TableCell>Payment Method</TableCell> <TableCell>Ship To</TableCell>
<TableCell align="right">Sale Amount</TableCell> <TableCell>Payment Method</TableCell>
</TableRow> <TableCell align="right">Sale Amount</TableCell>
</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> </TableRow>
))} </TableHead>
</TableBody> <TableBody>
</Table> {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>
))}
</TableBody>
</Table>
</div>
<Link color="primary" href="#" onClick={preventDefault} sx={{ mt: 3 }}> <Link color="primary" href="#" onClick={preventDefault} sx={{ mt: 3 }}>
See more orders See more orders
</Link> </Link>
</React.Fragment> </React.Fragment>
); );
} }
\ No newline at end of file
src/pages/admin/report.js 0 → 100644
View file @ d29e972b
import DashboardLayout from "@/components/dashboard/Dashboard";
import React from "react";
import { Grid, Paper } from "@mui/material";
import Chart from "@/components/dashboard/Chart";
import Deposits from "@/components/dashboard/Deposits";
import Orders from "@/components/dashboard/Orders";
export default function Report() {
return (
<main>
<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>
</Grid>
</DashboardLayout>
</main>
);
}
src/pages/admin/stock.js 0 → 100644
View file @ d29e972b
import { AddShoppingCart } from "@mui/icons-material";
import AddProduct from "@/components/AddProduct";
import {
Box,
Button,
Grid,
Paper,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@mui/material";
import {useState} from "react";
export default function Stock() {
const [modal, setModal] = useState(false)
return (
<Box>
<Box sx={{ mb: 2, textAlign: "right" }}>
<Button onClick={() => setModal(!modal)}>
<AddShoppingCart />
เพิ่มสินค้า
</Button>
</Box>
<Paper
sx={{
p: 2,
}}
>
<Table>
<TableHead>
<TableRow>
<TableCell>hello</TableCell>
<TableCell>hello</TableCell>
<TableCell>hello</TableCell>
<TableCell>hello</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>hello</TableCell>
<TableCell>hello</TableCell>
<TableCell>hello</TableCell>
<TableCell>hello</TableCell>
</TableRow>
</TableBody>
</Table>
</Paper>
<AddProduct open={modal} handleClose={() => setModal(false)} />
</Box>
);
}
src/pages/test.js deleted 100644 → 0
View file @ bc387faf
import Dashboard from "@/components/dashboard/Dashboard";
import React from 'react'
export default function Test() {
return (
<main>
<Dashboard />
</main>
)
}
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