Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
F
final-exam
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Packages
Packages
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Nawasan Wisitsingkhon
final-exam
Commits
b65e1604
Commit
b65e1604
authored
Oct 05, 2023
by
Nawasan Wisitsingkhon
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update order display;
show recent order in report
parent
756c7ccd
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
84 additions
and
194 deletions
+84
-194
Chart.js
src/components/dashboard/Chart.js
+3
-1
Dashboard.js
src/components/dashboard/Dashboard.js
+0
-113
Orders.js
src/components/dashboard/Orders.js
+55
-68
order.js
src/pages/admin/order.js
+25
-7
report.js
src/pages/admin/report.js
+1
-5
No files found.
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
>
{
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"
;
...
...
@@ -12,9 +11,7 @@ export default function Report() {
<
Head
>
<
title
>
รายงาน
|
admin
<
/title
>
<
/Head
>
<
DashboardLayout
>
<
Grid
container
spacing
=
{
3
}
>
{
/* Chart */
}
<
Grid
sx
=
{{
maxWidth
:
1080
,
mx
:
"auto"
}}
container
spacing
=
{
3
}
>
<
Grid
item
xs
=
{
12
}
md
=
{
8
}
lg
=
{
9
}
>
<
Paper
sx
=
{{
...
...
@@ -47,7 +44,6 @@ export default function Report() {
<
/Paper
>
<
/Grid
>
<
/Grid
>
<
/DashboardLayout
>
<
/
>
);
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment