@@ -25,10 +25,10 @@ const MyOrderPage = () =>{
-
+
+
+ )
+}
+
+export default OngoingPage;
\ No newline at end of file
diff --git a/src/app/order/order-detail/layout.tsx b/src/app/order/order-detail/layout.tsx
new file mode 100644
index 0000000..76a8fda
--- /dev/null
+++ b/src/app/order/order-detail/layout.tsx
@@ -0,0 +1,9 @@
+import Header from '../../ui/header';
+
+export default function Layout({children,}: {children: React.ReactNode;}) {
+ return (
+
+
+ )
+}
+
+export default OrderDetailPage;
\ No newline at end of file
diff --git a/src/app/order/review-rating-advance/page.tsx b/src/app/order/review-rating-advance/page.tsx
new file mode 100644
index 0000000..5c9595c
--- /dev/null
+++ b/src/app/order/review-rating-advance/page.tsx
@@ -0,0 +1,126 @@
+
+const ReviewAdvencePage = () =>{
+ return (
+
+
+ )
+}
+
+export default ReviewAdvencePage;
diff --git a/src/styles/order.css b/src/styles/order.css
index e81322d..d7e0dc2 100644
--- a/src/styles/order.css
+++ b/src/styles/order.css
@@ -325,8 +325,53 @@
background: #00473C;
color: #E6FF55;
}
+.review-rating-wrapper {
+ gap: 10px;
+}
+.rating-text {
+ color: #000;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px;
+}
+.review-rating-wrapper .small-rating-stars img {
+ width: 24px;
+ height: 24px;
+}
+.upload-image-wrapper {
+ display: flex;
+ width: 48px;
+ height: 48px;
+ padding: 12px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 8px;
+ border: 1.5px dashed #D0D5DD;
+}
+.upload-image-wrapper.uploaded {
+ flex-direction: column;
+ gap: 1px;
+ color: #D0D5DD;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 18px;
+}
+.upload-image-wrapper img {
+ width: 24px;
+ height: 24px;
+}
+.review-rating-row .review-comment {
+ max-width: 700px;
+}
-
+.review-comment {
+ border-radius: 8px;
+ border: 1px solid #D0D5DD;
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+ padding: 12px 14px;
+}
/* my order */
.my-order-wrapper {
max-width: 954px;
@@ -584,4 +629,169 @@
}
.delivery-status-text.cancel {
color: #F04438;
+}
+
+/* order detail */
+.order-steps {
+ background: #fff;
+ margin: 10px 0;
+ max-width: 1280px;
+ width: 100%;
+}
+.order-detail-title {
+ gap: 10px;
+}
+.order-detail-title .title {
+ color: #000;
+ text-align: center;
+ font-size: 30px;
+ font-weight: 700;
+ line-height: 38px;
+}
+.step-base {
+ width: 240px;
+ height: 76px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ color: #344054;
+ text-align: center;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 20px;
+}
+.step-base-icon {
+ width: 24px;
+ height: 24px;
+}
+
+
+.progress-line.active {
+ background: #079455;
+}
+.progress-line {
+ width: 232px;
+ height: 2px;
+ flex-shrink: 0;
+ background: #EAECF0;
+}
+.progress-line:nth-of-type(1) {
+ top: 35px;
+ left: 268px;
+ z-index: 1;
+}
+.progress-line:nth-of-type(2) {
+ top: 35px;
+ left: 524px;
+ z-index: 1;
+}
+.progress-line:nth-of-type(3) {
+ top: 35px;
+ left: 780px;
+ z-index: 1;
+}
+.order-details-wrapper .order-details {
+ min-width: 568px;
+ max-width: 568px;
+}
+
+.order-details {
+ gap: 10px;
+ color: #000;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 24px;
+ min-width: 477px;
+ max-width: 477px;
+}
+.order-details .order, .order-details .shipper, .order-details .destination, .order-details .packing, .order-details .payment-method {
+ background: #fff;
+ padding: 0 16px 16px 16px;
+}
+.order-details .label {
+ border-bottom: 1px solid #D0D5DD;
+ padding: 8px 0px;
+ color: #000;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 30px;
+}
+.shipper-avatar {
+ min-width: 64px;
+ min-height: 64px;
+ max-width: 64px;
+ max-height: 64px;
+}
+.shipper-name {
+ color: #101828;
+ font-size: 16px;
+ font-weight: 600;
+}
+.cart-info {
+ padding: 8px;
+ background: #fff;
+}
+.label-section {
+ padding: 8px;
+ background: #F2F4F7;
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ color: #0A58FF;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 24px;
+}
+.label-section img {
+ width: 40px;
+ height: 40px;
+}
+.cart-item img {
+ border-radius: 8px;
+ width: 56px;
+ height: 56px;
+}
+.cart-item-name {
+ color: #101828;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 20px;
+}
+.cart-item-description {
+ color: #475467;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 18px;
+}
+.cart-item .price {
+ min-width: 70px;
+}
+.cart-item .price .price-after {
+ color: #101828;
+ font-size: 18px;
+ font-weight: 600;
+ line-height: 28px;
+}
+.price-before {
+ color: #101828;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px;
+ text-decoration-line: line-through;
+}
+.cart-item .quantity {
+ color: #475467;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 24px;
+ padding: 0 8px;
+ min-width: 60px;
}
\ No newline at end of file
Món ăn
-
+
@@ -220,4 +220,4 @@ const MyOrderPage = () =>{
)
}
-export default MyOrderPage;
\ No newline at end of file
+export default MyOrderFoodPage;
\ No newline at end of file
diff --git a/src/app/order/ongoing/layout.tsx b/src/app/order/ongoing/layout.tsx
new file mode 100644
index 0000000..76a8fda
--- /dev/null
+++ b/src/app/order/ongoing/layout.tsx
@@ -0,0 +1,9 @@
+import Header from '../../ui/header';
+
+export default function Layout({children,}: {children: React.ReactNode;}) {
+ return (
+
Nhà hàng
+ {children}
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/order/ongoing/page.tsx b/src/app/order/ongoing/page.tsx
new file mode 100644
index 0000000..f3a3d73
--- /dev/null
+++ b/src/app/order/ongoing/page.tsx
@@ -0,0 +1,225 @@
+
+const OngoingPage = () =>{
+ return (
+
+
+
+
+
+
+
+ 
+
+
+
+
+ Xác Nhận Đơn Hàng
+ 11:05 AM
+
+
+
+
+ 
+
+
+
+
+ Tài Xế Đã Tới Nhà Hàng
+ 11:15 AM
+
+
+
+
+ 
+
+
+
+
+ Tài Xế Đã Rời Nhà Hàng
+ 11:25 AM
+
+
+
+
+
+
+
+
+
+
+
+
+ Tài Xế Đã Đến Nơi
+ 11:40 AM
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Đơn hàng
+
+
+ ID: #1234567
+
+
+ Ngày: 26/07/2023
+
+
+
+
+
+ Tài xế
+
+
+ 
+
+
+
+
+
+ Nguyễn Văn A
+
+
+ +84 909 123 123
+
+
+ Honda Wave | 54-XI 125.55
+
+
+
+
+ Ghi chú dành cho tài xế:
+
+
+ Gặp tại sảnh A toà nhà
+
+
+
+
+
+ Giao đến
+
+
+ 
+
+
+
+ 24 Nguyễn Đình Thi, P. Phước Long B, Tp. Thủ Đức, Tp. Hồ Chí Minh
+
+
+
+
+
+ 
+
+
+
+ The Chef Town
+
+ 
+
+
+
+
+
+ Mỳ Cá Cờ Sốt Yakitori
+
+
+ Ghi chú 1 - Lorem ipsum dolor sit amet Ghi chú 1 - Lorem ipsum dolor sit amet Lorem ipsum
+ dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit
+ ametLorem ipsum dolor sit amet
+
+ 1
+
+ 80,000
+ 95.000
+
+
+
+
+
+
+
+
+
+ Mỳ Cá Cờ Sốt Yakitori
+
+
+ Ghi chú 1 - Lorem ipsum dolor sit amet Ghi chú 1 - Lorem ipsum dolor sit amet
+
+ 1
+
+ 50,000
+ 90.000
+
+
+
+
+ Thông tin thanh toán
+
+
+
+
+
+
+ Tổng món ăn
+ 130,000 đ
+
+
+ Phí đóng gói
+ 6,000 đ
+
+
+ Dụng cụ ăn
+ 0 đ
+
+
+
+
+
+ Phí giao hàng | 0.8 km
+ 10,000 đ
+
+
+ Phí nền tảng
+ 2,000 đ
+
+
+
+
+
+ Khuyến mãi
+ -1,000 đ
+
+
+
+
+ Tổng thanh toán
+ 147,000 đ
+
+
+
+
+
+ Đóng gói
+
+
+ Đóng gói bằng hộp bã mía
+
+
+ Không lấy dụng cụ ăn uống
+
+
+
+
+ Phương thức thanh toán
+
+
+ Đã thanh toán bằng Momo
+
+
+ {children}
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/order/order-detail/page.tsx b/src/app/order/order-detail/page.tsx
new file mode 100644
index 0000000..fcc88dc
--- /dev/null
+++ b/src/app/order/order-detail/page.tsx
@@ -0,0 +1,220 @@
+
+const OrderDetailPage = () =>{
+ return (
+
+
+
+
+
+
+ Chi tiết đơn hàng
+
+ ID: #1234567
+ -
+ Ngày: 26/07/2023
+
+
+
+
+
+
+
+
+
+
+
+
+ Xác Nhận Đơn Hàng
+ 11:05 AM
+
+
+
+
+
+
+
+
+
+ Tài Xế Đã Tới Nhà Hàng
+ 11:15 AM
+
+
+
+
+
+
+
+
+
+ Tài Xế Đã Rời Nhà Hàng
+ 11:25 AM
+
+
+
+
+
+
+
+
+
+
+
+
+ Tài Xế Đã Đến Nơi
+ 11:40 AM
+
+
+
+
+
+
+
+
+ Tài xế
+
+
+
+
+
+
+
+
+ Nguyễn Văn A
+
+
+ +84 909 123 123
+
+
+ Honda Wave | 54-XI 125.55
+
+
+
+
+ Ghi chú dành cho tài xế:
+
+
+ Gặp tại sảnh A toà nhà
+
+
+
+
+
+ Giao đến
+
+
+
+
+
+
+ 24 Nguyễn Đình Thi, P. Phước Long B, Tp. Thủ Đức, Tp. Hồ Chí Minh
+
+
+
+
+
+
+
+
+
+ The Chef Town
+
+
+
+
+
+
+
+ Mỳ Cá Cờ Sốt Yakitori
+
+
+ Ghi chú 1 - Lorem ipsum dolor sit amet Ghi chú 1 - Lorem ipsum dolor sit amet Lorem ipsum
+ dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit
+ ametLorem ipsum dolor sit amet
+
+ 1
+
+ 80,000
+ 95.000
+
+
+
+
+
+
+
+
+
+ Mỳ Cá Cờ Sốt Yakitori
+
+
+ Ghi chú 1 - Lorem ipsum dolor sit amet Ghi chú 1 - Lorem ipsum dolor sit amet
+
+ 1
+
+ 50,000
+ 90.000
+
+
+
+
+ Thông tin thanh toán
+
+
+
+
+
+
+ Tổng món ăn
+ 130,000 đ
+
+
+ Phí đóng gói
+ 6,000 đ
+
+
+ Dụng cụ ăn
+ 0 đ
+
+
+
+
+
+ Phí giao hàng | 0.8 km
+ 10,000 đ
+
+
+ Phí nền tảng
+ 2,000 đ
+
+
+
+
+
+ Khuyến mãi
+ -1,000 đ
+
+
+
+
+ Tổng thanh toán
+ 147,000 đ
+
+
+
+
+
+ Đóng gói
+
+
+ Đóng gói bằng hộp bã mía
+
+
+ Không lấy dụng cụ ăn uống
+
+
+
+
+ Phương thức thanh toán
+
+
+ Đã thanh toán bằng Momo
+
+
+ 
+
+
+
+ Quay lại trang trước
+
+
+
+ Đánh giá dịch vụ
+
+
+
+
+
+ Đơn hàng: #1234567
+ -
+ Ngày: 26/07/2023
+
+
+
+
+ Đánh giá nhanh
+
+
+ Đánh giá chi tiết
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ Đánh giá tài xế
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ Rất hài lòng
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ Đánh giá Mỳ Cá Cờ Sốt Yakitori
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Rất hài lòng
+
+ 
+
+
+
+
+
+
+ 1/3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Đánh giá Summer Avocado Salad
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Rất hài lòng
+
+
+
+
+
+
+
+
+ 1/3
+