From d020f49286cddcec255f6c5e0e1a025b2a512984 Mon Sep 17 00:00:00 2001
From: hahuynhvan <hahuynhhuy159@gmail.com>
Date: Wed, 2 Oct 2024 20:28:36 +0700
Subject: [PATCH 1/2] review

---
 client/package.json                         |   2 +
 client/src/components/CommentSection.jsx    | 260 ++++++++++++++++++++
 client/src/components/Home/FeaturedBook.jsx |   2 +-
 client/src/components/MyNavbar.jsx          |   4 +-
 client/src/components/index.js              |   2 +
 client/src/pages/main/SingleBook.jsx        |  46 +++-
 client/src/pages/main/UserInfo.jsx          |  74 ++++--
 client/src/utils/index.js                   |  41 +++
 controllers/book.controller.js              |  11 +-
 controllers/order_item.controller.js        |  42 ++++
 controllers/review.controller.js            |  52 +++-
 controllers/user.controller.js              |  13 +-
 middleware/authentication.js                |   6 +-
 models/index.js                             |   7 +
 models/oder_item.model.js                   |  32 +++
 models/order.model.js                       |  25 +-
 models/review.model.js                      |  15 +-
 routes/oder_item.router.js                  |  26 ++
 routes/review.router.js                     |   7 +
 server.js                                   |   3 +
 utils/createTokenUser.js                    |   6 -
 utils/jwt.js                                |   2 +-
 22 files changed, 606 insertions(+), 72 deletions(-)
 create mode 100644 client/src/components/CommentSection.jsx
 create mode 100644 controllers/order_item.controller.js
 create mode 100644 models/oder_item.model.js
 create mode 100644 routes/oder_item.router.js

diff --git a/client/package.json b/client/package.json
index 200943e..c88426b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -23,6 +23,7 @@
     "bootstrap-icons": "^1.11.3",
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",
+    "mdb-react-ui-kit": "^9.0.0",
     "polished": "^4.3.1",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
@@ -30,6 +31,7 @@
     "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.24.0",
+    "react-star-ratings": "^2.3.0",
     "react-toastify": "^10.0.5",
     "styled-components": "^6.1.12"
   },
diff --git a/client/src/components/CommentSection.jsx b/client/src/components/CommentSection.jsx
new file mode 100644
index 0000000..2d234d7
--- /dev/null
+++ b/client/src/components/CommentSection.jsx
@@ -0,0 +1,260 @@
+import React, { useEffect, useState } from 'react'
+import {
+  MDBCard,
+  MDBCardBody,
+  MDBCardImage,
+  MDBCol,
+  MDBContainer,
+  MDBRow,
+  MDBTypography,
+} from 'mdb-react-ui-kit'
+import {
+  quaternaryBgColor,
+  quaternaryBgColorLight,
+} from '../assets/js/variables'
+import styled from 'styled-components'
+import { defaultAvatar } from '../assets/images'
+import { formatVNTimeZoneDate, ratingTitle } from '../utils'
+import { FaStar } from 'react-icons/fa'
+import { useSelector } from 'react-redux'
+import { customFetch } from '../utils/axios'
+import StarRatings from 'react-star-ratings'
+import { toast } from 'react-toastify'
+import Loading from './Loading'
+
+export default function CommentSection({ book_id, reviews }) {
+  const [loading, setLoading] = useState(false)
+  const [values, setValues] = useState({
+    rating: 5,
+    comment: '',
+  })
+  const [title, setTitle] = useState(ratingTitle(values.rating))
+  const { user, isLoading } = useSelector((store) => store.user)
+  const [userReview, setUserReview] = useState(null)
+
+  const handleRatingChange = (e) => {
+    setValues({ ...values, rating: e })
+  }
+  const handleChange = (e) => {
+    const name = e.target.name
+    const value = e.target.value
+    setValues({ ...values, [name]: value })
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    try {
+      setLoading(true)
+      const review = {
+        rating: values.rating,
+        comment: values.comment,
+        book_id,
+      }
+
+      await customFetch.post('/reviews', review)
+      setValues({
+        rating: 5,
+        comment: '',
+      })
+      toast.success('Đánh giá đã được gửi')
+    } catch (error) {
+      console.log(error)
+      toast.warn(error?.response?.data?.msg)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    const fetchUserReview = async () => {
+      if (user) {
+        try {
+          const response = await customFetch(
+            `/reviews/getCurrentUserReviewSingleBook/${book_id}`
+          )
+          setUserReview(response.data.review)
+        } catch (error) {
+          console.error('Error fetching user review:', error)
+        }
+      }
+    }
+
+    fetchUserReview()
+  }, [book_id, loading, user])
+
+  useEffect(() => {
+    setTitle(ratingTitle(values.rating))
+  }, [values.rating])
+
+  if(loading)
+    return <Loading/>
+  return (
+    <Wrapper style={{ backgroundColor: `${quaternaryBgColor}` }}>
+      <MDBContainer className="mt-2 " style={{ maxWidth: '100vw' }}>
+        <MDBRow className="justify-content-center">
+          <MDBCol md="12" lg="10">
+            <MDBCard className="text-dark comment-container">
+              <MDBCardBody className="p-4">
+                {userReview && user ? (
+                  <div>
+                    <MDBTypography tag="h4" className="mb-4">
+                      Đánh giá của bạn
+                    </MDBTypography>
+                    <div className="d-flex flex-start">
+                      <div
+                        style={{ width: '12rem' }}
+                        className="d-flex flex-column align-items-center"
+                      >
+                        <MDBCardImage
+                          className="rounded-circle shadow-1-strong me-3"
+                          src={userReview?.user?.user_img || defaultAvatar}
+                          alt="avatar"
+                          width="60"
+                          height="60"
+                        />
+                        <MDBTypography tag="h6" className="fw-bold mb-1">
+                          {userReview?.user?.name}
+                        </MDBTypography>
+                        <p className="mb-0">
+                          {formatVNTimeZoneDate(userReview?.created_at)}
+                        </p>
+                      </div>
+                      <div style={{ width: '70vw', marginLeft: '1rem' }}>
+                        <div className="d-flex align-items-center justify-content-start mb-3">
+                          <span
+                            className="badge bg-success"
+                            style={{ fontSize: '1rem', color: '#FFBF00' }}
+                          >
+                            {userReview?.rating}
+                            <FaStar className="pb-1 ms-1" />
+                          </span>
+                          <h5 className="mb-0 ms-2">
+                            {ratingTitle(userReview?.rating)}
+                          </h5>
+                        </div>
+                        <div className="mb-0">{userReview?.comment}</div>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="d-flex flex-column">
+                    <label htmlFor="description">
+                      <h5 className="mb-0">Viết đánh giá của bạn</h5>
+                    </label>
+                    <div className="d-flex">
+                      <StarRatings
+                        changeRating={handleRatingChange}
+                        rating={values.rating}
+                        starRatedColor="rgb(230, 67, 47)"
+                        numberOfStars={5}
+                        name="rating"
+                        starDimension="22px"
+                      />
+                      <h5 className="mb-0 mt-2 ms-3">{title}</h5>
+                    </div>
+                    <textarea
+                      id="description"
+                      name="comment"
+                      rows="5"
+                      cols="115"
+                      className="description-area mt-2"
+                      value={values.comment}
+                      onChange={handleChange}
+                    />
+                    <div className="btn-container">
+                      <button
+                        disabled={!user}
+                        type="button"
+                        onClick={handleSubmit}
+                        className="btn"
+                      >
+                        Gửi đánh giá
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </MDBCardBody>
+
+              <hr className="my-0" />
+              <div className="ms-4 mt-4">
+                <MDBTypography tag="h4" className="mb-0">
+                  Những đánh giá gần đây
+                </MDBTypography>
+                <p className="fw-light pb-2">
+                  Đánh giá mới nhất bởi người dùng
+                </p>
+              </div>
+              {reviews?.length === 0 && (
+                <h5 className="ms-4">Chưa có đánh giá nào...</h5>
+              )}
+              {reviews?.map((review) => {
+                return (
+                  user?.userId !== review?.user_id && (
+                    <MDBCardBody className="p-4" key={review?.id}>
+                      <div className="d-flex flex-start">
+                        <div
+                          style={{ width: '12rem' }}
+                          className="d-flex flex-column align-items-center"
+                        >
+                          <MDBCardImage
+                            className="rounded-circle shadow-1-strong me-3"
+                            src={review?.user?.user_img || defaultAvatar}
+                            alt="avatar"
+                            width="60"
+                            height="60"
+                          />
+                          <div>
+                            <MDBTypography tag="h6" className="fw-bold mb-1">
+                              {review?.user?.name}
+                            </MDBTypography>
+                          </div>
+                          <p className="mb-0">
+                            {formatVNTimeZoneDate(review?.created_at)}
+                          </p>
+                        </div>
+                        <div style={{ width: '70vw', marginLeft: '3rem' }}>
+                          <div className="d-flex align-items-center justify-content-start mb-3">
+                            <span
+                              className="badge bg-success"
+                              style={{ fontSize: '1rem', color: '#FFBF00' }}
+                            >
+                              {review?.rating}
+                              <FaStar className="pb-1 ms-1" />
+                            </span>
+                            <h5 className="mb-0 ms-2">
+                              {ratingTitle(review?.rating)}
+                            </h5>
+                          </div>
+                          <div className="mb-0">{review?.comment}</div>
+                        </div>
+                      </div>
+                    </MDBCardBody>
+                  )
+                )
+              })}
+            </MDBCard>
+          </MDBCol>
+        </MDBRow>
+      </MDBContainer>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.section`
+  .comment-container {
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    background-color: ${quaternaryBgColorLight};
+  }
+  .description-area {
+    background-color: ${quaternaryBgColorLight};
+    border-radius: 1rem;
+  }
+  .btn-container {
+    margin-top: 1rem;
+  }
+  .btn {
+    background-color: ${quaternaryBgColor};
+    float: right;
+  }
+`
diff --git a/client/src/components/Home/FeaturedBook.jsx b/client/src/components/Home/FeaturedBook.jsx
index 89b38a8..178ed4d 100644
--- a/client/src/components/Home/FeaturedBook.jsx
+++ b/client/src/components/Home/FeaturedBook.jsx
@@ -13,7 +13,7 @@ const FeaturedBook = ({ newBooks, title, maxWidthItems, gap }) => {
         lg={maxWidthItems}
         className={`${gap} g-5 justify-content-start`}
       >
-        {newBooks.map((book) => {
+        {newBooks?.map((book) => {
           return <BookItem book={book} key={book.id} />
         })}
       </Row>
diff --git a/client/src/components/MyNavbar.jsx b/client/src/components/MyNavbar.jsx
index 4cd8ce4..fdab71e 100644
--- a/client/src/components/MyNavbar.jsx
+++ b/client/src/components/MyNavbar.jsx
@@ -58,11 +58,11 @@ const MyNavbar = () => {
               {(user === null || user?.role === 'user') && (
                 <Nav.Link href="/cart">Giỏ hàng</Nav.Link>
               )}
-              {user && user.role === 'user' && (
+              {user && user?.role === 'user' && (
                 <Nav.Link href="/checkout">Thanh toán</Nav.Link>
               )}
               {user && <Nav.Link href="/order">Đơn hàng</Nav.Link>}
-              {user && user.role === 'admin' && (
+              {user && user?.role === 'admin' && (
                 <Nav.Link href="/manager">Quản lý</Nav.Link>
               )}
             </Nav>
diff --git a/client/src/components/index.js b/client/src/components/index.js
index 92088f7..39af73c 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -30,6 +30,7 @@ import DateInput from './DateInput'
 import AddBook from './Manager/AddBook'
 import AddAttribute from './Manager/AddAttribute'
 import Loading from './Loading'
+import CommentSection from './CommentSection'
 
 export {
   MyNavbar,
@@ -64,4 +65,5 @@ export {
   AddBook,
   AddAttribute,
   Loading,
+  CommentSection,
 }
diff --git a/client/src/pages/main/SingleBook.jsx b/client/src/pages/main/SingleBook.jsx
index 1029d8c..40fbb9a 100644
--- a/client/src/pages/main/SingleBook.jsx
+++ b/client/src/pages/main/SingleBook.jsx
@@ -4,13 +4,14 @@ import { addItem } from '../../features/cart/cartSlice'
 import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
 import { customFetch } from '../../utils/axios'
-import { MyBreadCrumb, SelectInput } from '../../components'
+import { CommentSection, MyBreadCrumb, SelectInput } from '../../components'
 import {
   quaternaryBgColorLight,
   shadow1,
   textColor,
 } from '../../assets/js/variables'
 import { formatPrice } from '../../utils'
+import StarRatings from 'react-star-ratings'
 
 // Query function
 const singleBookQuery = (id) => {
@@ -21,22 +22,35 @@ const singleBookQuery = (id) => {
   }
 }
 
+const singleBookReviewQuery = (id) => {
+  // trả về query object
+  return {
+    queryKey: ['singleBookReviewQuery', id || ''],
+    queryFn: () => customFetch(`/reviews/books/${id}`),
+  }
+}
+
 //loader
 export const loader =
   (queryClient) =>
   async ({ params }) => {
     const { id } = params
-    const response = await queryClient.ensureQueryData(singleBookQuery(id))
-    const book = response.data.book
-    return { book }
+    const [responseBook, responseReviews] = await Promise.all([
+      queryClient.ensureQueryData(singleBookQuery(id)),
+      queryClient.ensureQueryData(singleBookReviewQuery(id)),
+    ])
+    const book = responseBook.data.book
+    const reviews = responseReviews.data.reviews
+    return { book, reviews }
   }
 
 const SingleBook = () => {
   const defaultImg = 'https://via.placeholder.com/150'
   // data
   const { user } = useSelector((store) => store.user)
-  const { book } = useLoaderData()
+  const { book, reviews } = useLoaderData()
   const {
+    id: book_id,
     book_img,
     title,
     price,
@@ -47,6 +61,7 @@ const SingleBook = () => {
     category,
     author_id,
     page_number,
+    average_rating,
   } = book
   //  generate option
   const list = Array.from({ length: available_copies }, (_, i) => ({
@@ -75,7 +90,7 @@ const SingleBook = () => {
     category,
     publisher,
     available_copies,
-    page_number
+    page_number,
   }
   // Add to cart function
   const addToCart = () => {
@@ -113,6 +128,17 @@ const SingleBook = () => {
             >
               <p className="author-name">{author.name}</p>
             </Link>
+            <div className="d-flex align-items-center gap-3">
+              <StarRatings
+                rating={Number(average_rating) || 0}
+                starRatedColor="green"
+                numberOfStars={5}
+                name="rating"
+                starDimension="22px"
+              />
+              <p style={{ paddingTop: '6px' }}>{Number(average_rating) || 0}</p>
+            </div>
+            {/* basic info */}
             <div className="basic-info">
               <p className="publisher-name">{`Nhà xuất bản: ${publisher.name}`}</p>
               <p className="category">{`Thể loại: ${category.name}`}</p>
@@ -120,7 +146,7 @@ const SingleBook = () => {
               <p className="price">
                 Giá bán: <span className="fw-bold">{formatPrice(price)}</span>
               </p>
-              {user.role === 'admin' && (
+              {user?.role === 'admin' && (
                 <p className="book-amount ">
                   Số lượng hiện có:{' '}
                   <span className="fw-bold">{available_copies} quyển</span>
@@ -128,7 +154,7 @@ const SingleBook = () => {
               )}
             </div>
             {/* AMOUNT */}
-            {user.role !== 'admin' && (
+            {user?.role !== 'admin' && (
               <div className="">
                 <SelectInput
                   list={list}
@@ -139,7 +165,7 @@ const SingleBook = () => {
               </div>
             )}
             {/* SUBMIT BTN */}
-            {user.role !== 'admin' && (
+            {user?.role !== 'admin' && (
               <button className="btn" onClick={addToCart}>
                 Thêm vào giỏ hàng
               </button>
@@ -150,6 +176,7 @@ const SingleBook = () => {
           <p className="description">{description}</p>
         </div>
       </div>
+      <CommentSection book_id={book_id} reviews={reviews} />
     </Wrapper>
   )
 }
@@ -161,6 +188,7 @@ const Wrapper = styled.section`
     margin-top: 5rem;
     max-width: 100vw;
     padding: 3rem;
+    padding-bottom: 0;
   }
   .row {
     gap: 4rem;
diff --git a/client/src/pages/main/UserInfo.jsx b/client/src/pages/main/UserInfo.jsx
index 27e6e71..80fcb6e 100644
--- a/client/src/pages/main/UserInfo.jsx
+++ b/client/src/pages/main/UserInfo.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { useEffect, useState } from 'react'
 import { FormInput, RadiosInput, FileInput, Loading } from '../../components'
-import { useSelector, useDispatch } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { updateUser } from '../../features/users/userSlice'
 import { defaultAvatar } from '../../assets/images'
 import Form from 'react-bootstrap/Form'
@@ -20,8 +20,29 @@ import {
   primaryBgColorHover,
   quaternaryBgColor,
 } from '../../assets/js/variables'
+import { useQuery } from '@tanstack/react-query'
+
+const showCurrentUser = () => {
+  const {
+    isLoading,
+    data: userData,
+    error,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ['showMe'],
+    queryFn: async () => {
+      const response = await customFetch(`/users/showMe`) // đảm bảo sử dụng await đúng cách
+      return response.data // trả về dữ liệu cần thiết
+    },
+  })
+
+  return { isLoading, userData, error, isError, refetch }
+}
 
 const UserInfo = () => {
+  const { isLoading, userData, error, isError, refetch } = showCurrentUser()
+
   const dispatch = useDispatch()
   const [loading, setLoading] = useState(false)
   const [showVerifyId, setShowVerifyId] = useState(false)
@@ -29,18 +50,31 @@ const UserInfo = () => {
   const handleCloseModal = () => setShowVerifyId(false)
 
   const [preview, setPreview] = useState(null)
-  const { user, isLoading } = useSelector((store) => store.user)
 
   const [values, setValues] = useState({
-    name: user?.name,
-    phone_number: user?.phoneNumber || '',
-    gender: user?.gender,
-    address: user?.address || '',
+    name: userData?.name,
+    phone_number: userData?.phoneNumber || '',
+    gender: userData?.gender,
+    address: userData?.address || '',
     user_img: null,
     cccd: '',
     cccd_img: null,
   })
 
+  useEffect(() => {
+    if (userData) {
+      setValues({
+        name: userData.name,
+        phone_number: userData.phone_number || '',
+        gender: userData.gender,
+        address: userData.address || '',
+        user_img: userData?.user_img,
+        cccd: '',
+        cccd_img: null,
+      })
+    }
+  }, [userData])
+
   const handleSubmitCCCD = async (e) => {
     e.preventDefault()
     try {
@@ -84,23 +118,31 @@ const UserInfo = () => {
       reader.readAsDataURL(file)
     }
   }
-
   useEffect(() => {
-    const radios = document.getElementsByName('gender')
-    radios.forEach((radio) => {
-      if (radio.value === user.gender) {
-        radio.checked = true
-      }
-    })
-  }, [isLoading])
+    refetch()
+  }, [loading, refetch])
+  useEffect(() => {
+    if (userData) {
+      const radios = document.getElementsByName('gender')
+      radios.forEach((radio) => {
+        if (radio.value === userData.gender) {
+          radio.checked = true
+        }
+      })
+    }
+  }, [userData])
   const handleSubmit = (e) => {
     e.preventDefault()
     console.log(values)
-    dispatch(updateUser({ ...values, id: user.id }))
+    dispatch(updateUser({ ...values, id: userData.id }))
+  }
+  if (loading) {
+    return <Loading />
   }
   if (isLoading) {
     return <Loading />
   }
+  if (isError) return <p style={{ marginTop: '1rem' }}>{error.message}</p>
 
   return (
     <Wrapper>
@@ -159,7 +201,7 @@ const UserInfo = () => {
         <section className="row">
           <div className="col img-container mb-5 d-flex flex-column">
             <img
-              src={preview || user.user_img || defaultAvatar}
+              src={preview || userData?.user_img || defaultAvatar}
               alt="user image"
               className="user-img"
             />
diff --git a/client/src/utils/index.js b/client/src/utils/index.js
index a96482b..bc9f9a2 100644
--- a/client/src/utils/index.js
+++ b/client/src/utils/index.js
@@ -6,6 +6,47 @@ export const formatPrice = (price) => {
   return VND
 }
 
+export const formatVNTimeZoneDate = (datetime) => {
+  const dateUTC = datetime
+
+  // Chuyển đổi chuỗi thời gian thành đối tượng Date
+  const date = new Date(dateUTC)
+
+  // Định dạng lại thời gian theo múi giờ Việt Nam (GMT+7)
+  const options = {
+    timeZone: 'Asia/Ho_Chi_Minh', // Múi giờ Việt Nam
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }
+
+
+  const formatter = new Intl.DateTimeFormat('vi-VN', options)
+  const dateInVietnamTime = formatter.format(date)
+
+  return dateInVietnamTime
+}
+
+export const ratingTitle = (rating) => {
+  switch(rating) {
+    case 1:
+      return 'Rất không hài lòng'
+    case 2:
+      return 'Không hài lòng'
+    case 3:
+      return 'Bình thường'
+    case 4:
+      return 'Hài lòng'
+    case 5:
+      return 'Cực kì hài lòng'
+    default:
+      return 'Chưa đánh giá'
+  }
+}
+
 export const getCurrentDateTime = () => {
   const now = new Date()
 
diff --git a/controllers/book.controller.js b/controllers/book.controller.js
index 5d1d4ee..3e6b39a 100644
--- a/controllers/book.controller.js
+++ b/controllers/book.controller.js
@@ -1,13 +1,10 @@
 const { StatusCodes } = require('http-status-codes')
 const { Op } = require('sequelize')
-const { Book, Category } = require('../models')
+const { Book, Category, Author, Publisher } = require('../models')
 const Book_Info = require('../models/book_info.model')
-const Author = require('../models/author.model')
-const Publisher = require('../models/publisher.model')
 const CustomAPIError = require('../errors/')
 const asyncWrapper = require('../middleware/async')
 const path = require('path')
-const crypto = require('crypto')
 const cloudinary = require('cloudinary').v2
 const fs = require('fs')
 
@@ -126,18 +123,18 @@ const deleteBook = asyncWrapper(async (req, res) => {
 
 const uploadImage = async (req, res) => {
   if (!req.files) {
-    throw new CustomError.BadRequestError('No File Uploaded')
+    throw new CustomAPIError.BadRequestError('No File Uploaded')
   }
   const productImage = req.files.image
 
   if (!productImage.mimetype.startsWith('image')) {
-    throw new CustomError.BadRequestError('Please Upload Image')
+    throw new CustomAPIError.BadRequestError('Please Upload Image')
   }
 
   const maxSize = 1024 * 1024
 
   if (productImage.size > maxSize) {
-    throw new CustomError.BadRequestError(
+    throw new CustomAPIError.BadRequestError(
       'Please upload image smaller than 1MB'
     )
   }
diff --git a/controllers/order_item.controller.js b/controllers/order_item.controller.js
new file mode 100644
index 0000000..a09c0a0
--- /dev/null
+++ b/controllers/order_item.controller.js
@@ -0,0 +1,42 @@
+const { OrderItem } = require('../models')
+const CustomAPIError = require('../errors/')
+const asyncWrapper = require('../middleware/async')
+
+const findAllOrderItems = asyncWrapper(async (req, res) => {
+  const orderItems = await OrderItem.findAll()
+  res.status(200).json({ orderItems })
+})
+
+const findSingleOrderItem = asyncWrapper(async (req, res) => {
+  const { id } = req.params
+  const orderItem = await OrderItem.findByPk(id)
+  if (!orderItem)
+    throw new CustomAPIError.NotFoundError(`OrderItem ${id} not found`)
+  res.status(200).json({ orderItem })
+})
+
+const createOrderItem = asyncWrapper(async (req, res) => {
+  const { book_id, user_id } = req.body
+  const existingOrderItem = await OrderItem.findOne({
+    where: { book_id, user_id },
+  })
+  if(!existingOrderItem) {
+      const orderItem = await OrderItem.create({ ...req.body })
+      return res.status(201).json({ orderItem })
+  }
+  return
+})
+
+const deleteOrderItem = asyncWrapper(async (req, res) => {
+  const { id } = req.params
+  const orderItem = await OrderItem.findByPk(id)
+  await orderItem.destroy()
+  res.status(200).json({ msg: 'delete orderItem successfully' })
+})
+
+module.exports = {
+  findAllOrderItems,
+  findSingleOrderItem,
+  createOrderItem,
+  deleteOrderItem,
+}
diff --git a/controllers/review.controller.js b/controllers/review.controller.js
index efac306..9948e55 100644
--- a/controllers/review.controller.js
+++ b/controllers/review.controller.js
@@ -1,7 +1,8 @@
-const { Review, Book } = require('../models')
+const { Review, Book, OrderItem, User } = require('../models')
 const CustomAPIError = require('../errors/')
 const checkPermissions = require('../utils/checkPermissions')
 const { StatusCodes } = require('http-status-codes')
+const sequelize = require('../dbconfig')
 
 const createReview = async (req, res) => {
   const { book_id } = req.body
@@ -25,9 +26,20 @@ const createReview = async (req, res) => {
     throw new CustomAPIError.BadRequestError('Bạn đã đánh giá sách này rồi!')
   }
 
+  const alreadyOrderedByUser = await OrderItem.findOne({
+    where: {
+      book_id,
+      user_id: req.user.userId,
+    },
+  })
+
+  if (!alreadyOrderedByUser) {
+    throw new CustomAPIError.BadRequestError('Bạn cần mua sản phẩm để đánh giá!')
+  }
+
   req.body.user_id = req.user.userId
-  
-  const review = await Review.create({...req.body})
+
+  const review = await Review.create({ ...req.body })
   res.status(StatusCodes.CREATED).json({ review })
 }
 
@@ -94,9 +106,40 @@ const deleteReview = async (req, res) => {
   res.status(StatusCodes.OK).json({ msg: 'Xóa đánh giá thành công' })
 }
 
+const getCurrentUserReviewSingleBook = async (req, res) => {
+  const { id } = req.params
+  const key = process.env.ENCRYPTED_KEY
+  const review = await Review.findOne({
+    where: { book_id: id, user_id: req.user.userId },
+    include: {
+      model: User,
+      attributes: [
+        [sequelize.literal(`pgp_sym_decrypt("name", '${key}')`), 'name'],
+        'user_img',
+      ],
+    },
+  })
+
+  if (review) {
+    return res.status(StatusCodes.OK).json({ review }) // trường hợp người dùng đã đánh giá
+  }
+  return res.status(StatusCodes.OK).json({ review: false }) // trường hợp người dùng chưa đánh giá
+}
+
 const getSingleBookReviews = async (req, res) => {
   const { id } = req.params
-  const reviews = await Review.findOne({ book_id: id })
+  const key = process.env.ENCRYPTED_KEY
+  const reviews = await Review.findAll({
+    where: { book_id: id },
+    order: [['created_at', 'DESC']],
+    include: {
+      model: User,
+      attributes: [
+        [sequelize.literal(`pgp_sym_decrypt("name", '${key}')`), 'name'],
+        'user_img',
+      ],
+    },
+  })
   res.status(StatusCodes.OK).json({ reviews, count: reviews.length })
 }
 
@@ -107,4 +150,5 @@ module.exports = {
   updateReview,
   deleteReview,
   getSingleBookReviews,
+  getCurrentUserReviewSingleBook,
 }
diff --git a/controllers/user.controller.js b/controllers/user.controller.js
index 29d9d21..4bafa04 100644
--- a/controllers/user.controller.js
+++ b/controllers/user.controller.js
@@ -29,7 +29,18 @@ const getSingleUser = async (req, res) => {
 }
 
 const showCurrentUser = async (req, res) => {
-  res.status(StatusCodes.OK).json({ user: req.user })
+  const user = await User.findByPk(req.user.userId)
+  res
+    .status(StatusCodes.OK)
+    .json({
+      name: user.name,
+      phone_number: user.phone_number || "",
+      gender: user?.gender,
+      address: user?.address || "",
+      user_img: user?.user_img,
+      cccd: user?.cccd || "",
+
+    })
 }
 // update user with user.save()
 const updateUser = asyncWrapper(async (req, res) => {
diff --git a/middleware/authentication.js b/middleware/authentication.js
index d43443a..630f677 100644
--- a/middleware/authentication.js
+++ b/middleware/authentication.js
@@ -7,8 +7,8 @@ const authenticateUser = async (req, res, next) => {
   try {
     // Kiểm tra access token có valid ko
     if (accessToken) {
-      payload = isTokenValid(accessToken)
-      req.user = payload.user
+      const payload = isTokenValid(accessToken)
+      req.user = payload
       return next()
     }
     // Kiểm tra refresh token có valid ko
@@ -31,7 +31,7 @@ const authenticateUser = async (req, res, next) => {
     req.user = payload.user
     next()
   } catch (error) {
-    throw new CustomError.UnauthenticatedError('Authentication Invalid')
+    throw new CustomError.UnauthenticatedError(error)
   }
 }
 
diff --git a/models/index.js b/models/index.js
index 6c7e3c0..a0b91f1 100644
--- a/models/index.js
+++ b/models/index.js
@@ -6,6 +6,7 @@ const User = require('./user.model')
 const Publisher = require('./publisher.model')
 const Token = require('./token.model')
 const Review = require('./review.model')
+const OrderItem = require('./oder_item.model')
 
 Author.hasMany(Book, { foreignKey: 'author_id' })
 Book.belongsTo(Author, { foreignKey: 'author_id' })
@@ -25,6 +26,11 @@ Review.belongsTo(User, { foreignKey: 'user_id'})
 Book.hasMany(Review, { foreignKey: 'book_id' })
 Review.belongsTo(Book, { foreignKey: 'book_id' })
 
+User.hasMany(OrderItem, { foreignKey: 'user_id' })
+OrderItem.belongsTo(User, { foreignKey: 'user_id' })
+
+Book.hasMany(OrderItem, { foreignKey: 'book_id' })
+OrderItem.belongsTo(Book, { foreignKey: 'book_id' })
 
 module.exports = {
   Author,
@@ -35,4 +41,5 @@ module.exports = {
   Publisher,
   Token,
   Review,
+  OrderItem,
 }
diff --git a/models/oder_item.model.js b/models/oder_item.model.js
new file mode 100644
index 0000000..2c586ec
--- /dev/null
+++ b/models/oder_item.model.js
@@ -0,0 +1,32 @@
+const { Sequelize, DataTypes, Model } = require('sequelize')
+const sequelize = require('../dbconfig')
+
+class OderItem extends Model {}
+
+OderItem.init(
+  {
+    book_id: {
+        type: DataTypes.UUID,
+        references: {
+            model: 'book',
+            key: 'id',
+        }
+    },
+    user_id: {
+      type: DataTypes.UUID,
+      references: {
+        model: 'user',
+        key: 'id',
+      },
+    },
+  },
+  {
+    // Other model options go here
+    sequelize, // We need to pass the connection instance
+    modelName: 'order_item', // We need to choose the model name
+    tableName: 'order_items', // We need to choose the table name
+    timestamps: false,
+  }
+)
+
+module.exports = OderItem
diff --git a/models/order.model.js b/models/order.model.js
index de80959..209f47b 100644
--- a/models/order.model.js
+++ b/models/order.model.js
@@ -1,6 +1,7 @@
 const { Sequelize, DataTypes, Model } = require('sequelize')
 const sequelize = require('../dbconfig')
 const Book = require('./book.model')
+const OrderItem = require('./oder_item.model')
 
 class Order extends Model {}
 
@@ -21,12 +22,7 @@ Order.init(
       type: DataTypes.STRING(15),
     },
     payment_method: {
-      type: DataTypes.ENUM(
-        'COD',
-        'Card',
-        'E-Wallet',
-        'Bank Transfer'
-      ),
+      type: DataTypes.ENUM('COD', 'Card', 'E-Wallet', 'Bank Transfer'),
       allowNull: false,
       defaultValue: 'COD',
     },
@@ -127,8 +123,21 @@ Order.afterUpdate(async (order, options) => {
     for (const item of bookList) {
       const book = await Book.findByPk(item.bookID)
       if (book) {
-        book.available_copies -= parseInt(item.amount)
-        await book.save()
+        try {
+          book.available_copies -= parseInt(item.amount)
+          await book.save()
+          const orderItem = await OrderItem.findOne({
+            where: { user_id: order.user_id, book_id: book.id },
+          })
+          if (!orderItem) {
+            await OrderItem.create({
+              user_id: order.user_id,
+              book_id: book.id,
+            })
+          }
+        } catch (error) {
+          console.error(error)
+        }
       }
     }
   }
diff --git a/models/review.model.js b/models/review.model.js
index 618e359..14c2262 100644
--- a/models/review.model.js
+++ b/models/review.model.js
@@ -15,17 +15,6 @@ Review.init(
         notNull: { msg: 'Please provide rating' },
       },
     },
-    title: {
-      type: DataTypes.STRING,
-      allowNull: false,
-      validate: {
-        notNull: { msg: 'Please provide review title' },
-        len: {
-          args: [0, 100],
-          msg: 'Title must be less than or equal to 100 characters',
-        },
-      },
-    },
     comment: {
       type: DataTypes.TEXT,
       allowNull: false,
@@ -80,9 +69,7 @@ Review.calculateAverageRating = async function (book_id) {
     raw: true,
   })
 
-  const averageRating = result[0].averageRating
-    ? Math.ceil(result[0].averageRating)
-    : 0
+  const averageRating = result[0].averageRating ? result[0].averageRating : 0
   const numOfReviews = result[0].numOfReviews || 0
 
   try {
diff --git a/routes/oder_item.router.js b/routes/oder_item.router.js
new file mode 100644
index 0000000..a300bda
--- /dev/null
+++ b/routes/oder_item.router.js
@@ -0,0 +1,26 @@
+const express = require('express')
+const router = express.Router()
+
+const {
+  authenticateUser,
+  authorizePermissions,
+} = require('../middleware/authentication')
+
+const {
+  findAllOrderItems,
+  findSingleOrderItem,
+  createOrderItem,
+  deleteOrderItem,
+} = require('../controllers/order_item.controller')
+
+router
+  .route('/')
+  .post(authenticateUser, createOrderItem)
+  .get(authenticateUser, authorizePermissions('admin'), findAllOrderItems)
+
+router
+  .route('/:id')
+  .get(findSingleOrderItem)
+  .delete(authenticateUser, authorizePermissions('admin'), deleteOrderItem)
+
+module.exports = router
diff --git a/routes/review.router.js b/routes/review.router.js
index 7c0a923..2c67ebe 100644
--- a/routes/review.router.js
+++ b/routes/review.router.js
@@ -11,6 +11,8 @@ const {
   getSingleReview,
   updateReview,
   deleteReview,
+  getSingleBookReviews,
+  getCurrentUserReviewSingleBook,
 } = require('../controllers/review.controller')
 
 router
@@ -18,6 +20,11 @@ router
   .post(authenticateUser, authorizePermissions('user'), createReview)
   .get(getAllReviews)
 
+router.route('/books/:id').get(getSingleBookReviews)
+router
+  .route('/getCurrentUserReviewSingleBook/:id')
+  .get(authenticateUser, getCurrentUserReviewSingleBook)
+
 router
   .route('/:id')
   .get(getSingleReview)
diff --git a/server.js b/server.js
index a552027..e3bfd51 100644
--- a/server.js
+++ b/server.js
@@ -26,6 +26,8 @@ const authRouter = require('./routes/auth.router')
 const publisherRouter = require('./routes/publisher.router')
 const orderRouter = require('./routes/order.router')
 const reviewRouter = require('./routes/review.router')
+const orderItemRouter = require('./routes/oder_item.router')
+
 
 // middleware
 const notFoundMiddleware = require('./middleware/not-found')
@@ -72,6 +74,7 @@ app.use('/api/v1/auth', authRouter)
 app.use('/api/v1/publishers', publisherRouter)
 app.use('/api/v1/orders', orderRouter)
 app.use('/api/v1/reviews', reviewRouter)
+app.use('/api/v1/orderItems', orderItemRouter)
 
 app.get('*', (req, res) => {
   res.sendFile(path.resolve(__dirname, './client/dist', 'index.html'))
diff --git a/utils/createTokenUser.js b/utils/createTokenUser.js
index 12c2c7b..db622e2 100644
--- a/utils/createTokenUser.js
+++ b/utils/createTokenUser.js
@@ -1,14 +1,8 @@
 const createTokenUser = (user) => {
   return {
     name: user.name,
-    email: user.email,
     userId: user.id,
     role: user.role,
-    address: user.address,
-    phoneNumber: user.phone_number,
-    user_img: user.user_img,
-    gender: user.gender,
-    cccd: user.cccd
   }
 }
 
diff --git a/utils/jwt.js b/utils/jwt.js
index c01cfa2..2996861 100644
--- a/utils/jwt.js
+++ b/utils/jwt.js
@@ -11,7 +11,7 @@ const isTokenValid = (token) => jwt.verify(token, process.env.JWT_SECRET)
 
 const attachCookiesToResponse = ({ res, user, refreshToken }) => {
   //Tạo 2 token
-  const accessTokenJWT = createJWT({ payload: user }) // dùng để truy cập vào secured resources
+  const accessTokenJWT = createJWT({ payload: { user } }) // dùng để truy cập vào secured resources
   const refreshTokenJWT = createJWT({ payload: { user, refreshToken } }) //dùng để refresh access token
 
   const oneDay = 1000 * 60 * 60 * 24

From 9083d74cb633d280c41dc86af0bdde05b01d8c82 Mon Sep 17 00:00:00 2001
From: hahuynhvan <hahuynhhuy159@gmail.com>
Date: Sat, 5 Oct 2024 08:33:43 +0700
Subject: [PATCH 2/2] 123

---
 client/src/App.jsx                            |  19 ++-
 .../Cart/{CartTotals.jsx => OrderSummary.jsx} |   4 +-
 .../components/Order/CustomerContactInfo.jsx  |   6 +
 .../src/components/Order/OrderItemsList.jsx   |  44 ++++++
 client/src/components/Order/OrderList.jsx     |  38 +++--
 .../src/components/Order/ShippingAddress.jsx  |   6 +
 client/src/components/index.js                |  10 +-
 client/src/pages/main/Cart.jsx                |   4 +-
 client/src/pages/main/Checkout.jsx            | 144 +++++++++++------
 client/src/pages/main/SingleOrder.jsx         |  64 ++++++++
 client/src/pages/main/index.js                |   2 +
 controllers/order.controller.js               | 148 +++---------------
 controllers/user.controller.js                |   2 +
 middleware/authentication.js                  |   2 +-
 models/order.model.js                         |  25 ++-
 routes/order.router.js                        |   2 +
 utils/index.js                                |  10 ++
 17 files changed, 324 insertions(+), 206 deletions(-)
 rename client/src/components/Cart/{CartTotals.jsx => OrderSummary.jsx} (96%)
 create mode 100644 client/src/components/Order/CustomerContactInfo.jsx
 create mode 100644 client/src/components/Order/OrderItemsList.jsx
 create mode 100644 client/src/components/Order/ShippingAddress.jsx
 create mode 100644 client/src/pages/main/SingleOrder.jsx

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 939618a..2dee735 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -11,7 +11,8 @@ import {
   Cart,
   Order,
   UserInfo,
-  Manager
+  Manager,
+  SingleOrder
 } from './pages/main'
 import VerifyEmail from './pages/VerifyEmail'
 import { ProtectedRoute, Error } from './pages'
@@ -24,6 +25,7 @@ import { loader as verifyEmailLoader } from './pages/VerifyEmail'
 import { loader as singleBookLoader } from './pages/main/SingleBook'
 import { loader as singleAuthorLoader } from './pages/main/SingleAuthor'
 import { loader as newBookLoader} from './pages/main/Home'
+import { loader as singleUserOrder } from './pages/main/SingleOrder'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -50,6 +52,11 @@ const router = createBrowserRouter([
         element: <Library />,
         loader: libraryLoader(queryClient),
       },
+      {
+        path: 'library/:id',
+        element: <SingleBook />,
+        loader: singleBookLoader(queryClient),
+      },
       {
         path: 'cart',
         element: <Cart />,
@@ -71,9 +78,13 @@ const router = createBrowserRouter([
         ),
       },
       {
-        path: 'library/:id',
-        element: <SingleBook />,
-        loader: singleBookLoader(queryClient),
+        path: 'order/:id',
+        element: (
+          <ProtectedRoute>
+            <SingleOrder />
+          </ProtectedRoute>
+        ),
+        loader: singleUserOrder(queryClient),
       },
       {
         path: 'author/:id',
diff --git a/client/src/components/Cart/CartTotals.jsx b/client/src/components/Cart/OrderSummary.jsx
similarity index 96%
rename from client/src/components/Cart/CartTotals.jsx
rename to client/src/components/Cart/OrderSummary.jsx
index e93a8bf..69a1a6f 100644
--- a/client/src/components/Cart/CartTotals.jsx
+++ b/client/src/components/Cart/OrderSummary.jsx
@@ -10,7 +10,7 @@ import {
   boldTextColor,
 } from '../../assets/js/variables'
 
-const CartTotals = () => {
+const OrderSummary = () => {
   const { cartTotal, shipping, tax, orderTotal } = useSelector(
     (store) => store.cart
   )
@@ -41,7 +41,7 @@ const CartTotals = () => {
     </Wrapper>
   )
 }
-export default CartTotals
+export default OrderSummary
 
 const Wrapper = styled.section`
 margin-bottom: 1rem;
diff --git a/client/src/components/Order/CustomerContactInfo.jsx b/client/src/components/Order/CustomerContactInfo.jsx
new file mode 100644
index 0000000..91c5b3c
--- /dev/null
+++ b/client/src/components/Order/CustomerContactInfo.jsx
@@ -0,0 +1,6 @@
+const CustomerContactInfo = () => {
+  return (
+    <div>CustomerContactInfo</div>
+  )
+}
+export default CustomerContactInfo
\ No newline at end of file
diff --git a/client/src/components/Order/OrderItemsList.jsx b/client/src/components/Order/OrderItemsList.jsx
new file mode 100644
index 0000000..facb856
--- /dev/null
+++ b/client/src/components/Order/OrderItemsList.jsx
@@ -0,0 +1,44 @@
+import styled from "styled-components"
+
+const OrderItemsList = ({ itemList }) => {
+  return (
+  <Wrapper>
+    <div className="container">
+   {itemList.map(item => {
+    return (
+      <div className="row">
+        <div className="col">
+          <img src={''} alt={123} className="" />
+        </div>
+        <div className="col">
+          <h3>title</h3>
+          <h4>author name</h4>
+        </div>
+        <div className="col">
+          Select input
+          {/* <SelectInput
+            name={'Amount'}
+            defaultValue={amount}
+            list={list}
+            handleChoose={handleAmount}
+          />
+          <a className="remove-btn" onClick={removeItemFromTheCart}>
+            Xóa
+          </a> */}
+        </div>
+        <div className="col">
+
+        </div>
+      </div>
+    )
+  })}
+  </div>
+
+  </Wrapper>
+  )
+}
+export default OrderItemsList
+
+const Wrapper = styled.section`
+  
+`
\ No newline at end of file
diff --git a/client/src/components/Order/OrderList.jsx b/client/src/components/Order/OrderList.jsx
index 5f9fad3..a55d6ab 100644
--- a/client/src/components/Order/OrderList.jsx
+++ b/client/src/components/Order/OrderList.jsx
@@ -5,11 +5,17 @@ import { quaternaryBgColor } from '../../assets/js/variables'
 import { useEffect } from 'react'
 import { formatPrice } from '../../utils'
 import Badge from 'react-bootstrap/Badge'
+import { useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
 day.extend(advancedFormat)
 
 const OrdersList = ({ orders, meta }) => {
-  const tr = document.getElementsByTagName('tr')
+  const navigate = useNavigate()
+  const handleNavigate = (id) => {
+    navigate(`/order/${id}`)
+  }
 
+  const tr = document.getElementsByTagName('tr')
   useEffect(() => {
     Array.from(tr).forEach((row) => {
       if (Number(row.id) % 2 === 0) {
@@ -21,7 +27,7 @@ const OrdersList = ({ orders, meta }) => {
   }, [orders])
 
   return (
-    <div className="table-container">
+    <Wrapper className="table-container">
       <h4 className="total-item">Đã đặt hàng : {meta.totalOrders}</h4>
       {/* Table */}
       <div>
@@ -35,6 +41,7 @@ const OrdersList = ({ orders, meta }) => {
               <th className="text-center">Tổng tiền</th>
               <th className="text-center">Ngày đặt</th>
               <th className="text-center">Tình trạng</th>
+              <th className="text-center">Thanh toán</th>
             </tr>
           </thead>
           <tbody>
@@ -48,12 +55,17 @@ const OrdersList = ({ orders, meta }) => {
                 total: cost,
                 created_at,
                 status,
+                is_paid,
               } = order
 
               const date = day(created_at).format('hh:mm a - MMM Do, YYYY ')
 
               return (
-                <tr key={order.id} id={index}>
+                <tr
+                  key={order.id}
+                  id={index}
+                  onClick={() => handleNavigate(order.id)}
+                >
                   <td className="text-center">
                     {recipient_name || customer_name}
                   </td>
@@ -67,24 +79,30 @@ const OrdersList = ({ orders, meta }) => {
                     <Badge
                       pill
                       bg={
-                        (status === 'pending' && 'warning') ||
-                        (status === 'paid' && 'success') ||
-                        (status === 'canceled' && 'danger')
+                        (status !== 'đã hủy' && 'success') ||
+                        (status === 'đã hủy' && 'danger')
                       }
                       text="dark"
                     >
-                      {(status === 'pending' && 'Đang xử lý') ||
-                        (status === 'paid' && 'Đã thanh toán') ||
-                        (status === 'canceled' && 'Đã bị hủy')}
+                      {status}
                     </Badge>
                   </td>
+                  <td className="text-center" style={{color:`${is_paid ? 'green' :'red'}`, fontWeight: 'bold'}}>
+                    {is_paid ? 'Đã thanh toán' : 'Chưa thanh toán'}
+                  </td>
                 </tr>
               )
             })}
           </tbody>
         </Table>
       </div>
-    </div>
+    </Wrapper>
   )
 }
 export default OrdersList
+
+const Wrapper = styled.section`
+  tr:hover {
+    cursor: pointer;
+  }
+`
diff --git a/client/src/components/Order/ShippingAddress.jsx b/client/src/components/Order/ShippingAddress.jsx
new file mode 100644
index 0000000..b7b98d5
--- /dev/null
+++ b/client/src/components/Order/ShippingAddress.jsx
@@ -0,0 +1,6 @@
+const ShippingAddress = () => {
+  return (
+    <div>ShippingAddress</div>
+  )
+}
+export default ShippingAddress
\ No newline at end of file
diff --git a/client/src/components/index.js b/client/src/components/index.js
index 39af73c..cbeb2c4 100644
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -19,7 +19,7 @@ import SelectInput from './SelectInput'
 import BookList from './Library/BookList'
 import CartItem from './Cart/CartItem'
 import CartItemsList from './Cart/CartItemsList'
-import CartTotals from './Cart/CartTotals'
+import OrderSummary from './Cart/OrderSummary'
 import SectionTitle from './SectionTitle'
 import RadiosInput from './RadiosInput'
 import CheckboxInput from './CheckboxInput'
@@ -31,6 +31,9 @@ import AddBook from './Manager/AddBook'
 import AddAttribute from './Manager/AddAttribute'
 import Loading from './Loading'
 import CommentSection from './CommentSection'
+import OrderItemsList from './Order/OrderItemsList'
+import CustomerContactInfo from './Order/CustomerContactInfo'
+import ShippingAddress from './Order/ShippingAddress'
 
 export {
   MyNavbar,
@@ -54,7 +57,7 @@ export {
   BookList,
   CartItem,
   CartItemsList,
-  CartTotals,
+  OrderSummary,
   SectionTitle,
   RadiosInput,
   CheckboxInput,
@@ -66,4 +69,7 @@ export {
   AddAttribute,
   Loading,
   CommentSection,
+  OrderItemsList,
+  CustomerContactInfo,
+  ShippingAddress,
 }
diff --git a/client/src/pages/main/Cart.jsx b/client/src/pages/main/Cart.jsx
index 940c300..0f58ae5 100644
--- a/client/src/pages/main/Cart.jsx
+++ b/client/src/pages/main/Cart.jsx
@@ -1,6 +1,6 @@
 import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
-import { SectionTitle, CartTotals, CartItemsList } from '../../components'
+import { SectionTitle, OrderSummary, CartItemsList } from '../../components'
 import styled from 'styled-components'
 import {
   quaternaryBgColorLight,
@@ -35,7 +35,7 @@ const Cart = () => {
         {/* cart total chiếm 4 cột */}
         <div className="col-4 checkout-column">
           <div className="checkout-container">
-            <CartTotals />
+            <OrderSummary />
             {user ? (
               <Link to="/checkout" className="btn">
                 Đặt hàng
diff --git a/client/src/pages/main/Checkout.jsx b/client/src/pages/main/Checkout.jsx
index ba73bf2..bcc3e10 100644
--- a/client/src/pages/main/Checkout.jsx
+++ b/client/src/pages/main/Checkout.jsx
@@ -1,8 +1,9 @@
 import {
   SectionTitle,
-  CartTotals,
+  OrderSummary,
   FormInput,
   RadiosInput,
+  Loading,
 } from '../../components'
 import {
   quaternaryBgColorLight,
@@ -20,6 +21,7 @@ import { clearCart } from '../../features/cart/cartSlice'
 import { PayPalScriptProvider, PayPalButtons } from '@paypal/react-paypal-js'
 import { customFetch } from '../../utils/axios'
 import { toast } from 'react-toastify'
+import { useQuery } from '@tanstack/react-query'
 
 const client_id = import.meta.env.VITE_PAYPAL_CLIENT_ID
 const client_secret = import.meta.env.VITE_PAYPAL_CLIENT_SECRET
@@ -35,27 +37,52 @@ const initialOptions = {
   'data-sdk-integration-source': 'developer-studio',
 }
 
-const paymentMethods = [
-  'COD',
-  'Card',
-  'E-Wallet',
-  'Bank Transfer',
-]
+const paymentMethods = ['COD', 'Card', 'E-Wallet', 'Bank Transfer']
+
+const showCurrentUser = () => {
+  const {
+    isLoading,
+    data: userData,
+    error,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ['showMe'],
+    queryFn: async () => {
+      const response = await customFetch(`/users/showMe`) // đảm bảo sử dụng await đúng cách
+      return response.data // trả về dữ liệu cần thiết
+    },
+  })
+
+  return { isLoading, userData, error, isError, refetch }
+}
 
 const Checkout = () => {
+  const dispatch = useDispatch()
   const [message, setMessage] = useState('')
-  const { user } = useSelector((store) => store.user)
+  const [loading, setLoading] = useState(false)
+  const { isLoading, userData, error, isError, refetch } = showCurrentUser()
+
   const [values, setValues] = useState({
-    recipientName: user.name,
-    recipientAddress: user.address,
-    recipientPhoneNumber: user.phoneNumber,
+    recipientName: userData?.name || '',
+    recipientAddress: userData?.address || '',
+    recipientPhoneNumber: userData?.phone_number || '',
     paymentMethods: 'COD',
   })
 
-  const { cartItems, cartTotal, shipping, tax, orderTotal } = useSelector(
-    (store) => store.cart
-  )
-  const dispatch = useDispatch()
+  useEffect(() => {
+    if (userData) {
+      setValues({
+        recipientName: userData?.name || '',
+        recipientAddress: userData?.address || '',
+        recipientPhoneNumber: userData?.phone_number || '',
+        paymentMethods: 'COD',
+      })
+    }
+  }, [userData])
+
+  const { cartItems, cartTotal, shipping, tax, orderTotal, numItemsInCart } =
+    useSelector((store) => store.cart)
 
   useEffect(() => {
     const radios = document.getElementsByName('paymentMethods')
@@ -64,7 +91,7 @@ const Checkout = () => {
         radio.checked = true
       }
     })
-  }, [])
+  }, [loading, isLoading])
 
   const handleChange = (e) => {
     const name = e.target.name
@@ -86,19 +113,20 @@ const Checkout = () => {
   const createPaypalOrder = async () => {
     try {
       const order = {
-        customer_email: user.email,
-        shipping_address: values.recipientAddress || user.address,
+        customer_email: userData?.email,
+        shipping_address: values.recipientAddress || userData?.address,
         payment_method: values.paymentMethods,
         book_list: cartItems,
         subtotal: cartTotal,
         shipping_fee: shipping,
         tax,
         cart_total: orderTotal,
-        user_id: user.userId,
-        recipient_name: values.recipientName || user.name,
-        recipient_phone: values.recipientPhoneNumber || user.phoneNumber,
+        user_id: userData?.id,
+        recipient_name: values.recipientName || userData?.name,
+        recipient_phone: values.recipientPhoneNumber || userData?.phone_number,
       }
-
+      console.log(order);
+      
       if (
         !order.shipping_address ||
         !order.recipient_name ||
@@ -186,40 +214,52 @@ const Checkout = () => {
 
   const handleSubmit = (e) => {
     e.preventDefault()
+    try {
+      setLoading(true)
+      const order = {
+        customer_email: userData.email,
+        shipping_address: values.recipientAddress || userData.address,
+        payment_method: values.paymentMethods,
+        book_list: cartItems,
+        subtotal: cartTotal,
+        shipping_fee: shipping,
+        tax,
+        cart_total: orderTotal,
+        user_id: userData?.id,
+        recipient_name: values.recipientName || userData.name,
+        recipient_phone: values.recipientPhoneNumber || userData.phone_number,
+      }
 
-    // Lưu giá trị và đưa đến trang thanh toán
-    const order = {
-      customer_email: user.email,
-      shipping_address: values.recipientAddress || user.address,
-      payment_method: values.paymentMethods,
-      book_list: cartItems,
-      subtotal: cartTotal,
-      shipping_fee: shipping,
-      tax,
-      cart_total: orderTotal,
-      user_id: user.userId,
-      recipient_name: values.recipientName || user.name,
-      recipient_phone: values.recipientPhoneNumber || user.phoneNumber,
-    }
+      if (
+        !order.shipping_address ||
+        !order.recipient_name ||
+        !order.recipient_phone
+      ) {
+        toast.warning('Xin hãy điền đầy đủ thông tin thanh toán!')
+        return
+      }
 
-    if (
-      !order.shipping_address ||
-      !order.recipient_name ||
-      !order.recipient_phone
-    ) {
-      toast.warning('Xin hãy điền đầy đủ thông tin thanh toán!')
-      return
+      if (order.payment_method === 'COD') {
+        dispatch(createOrder(order))
+        dispatch(clearCart())
+      } else {
+        console.log('Loading...')
+      }
+    } catch (error) {
+      console.log(error)
+    } finally {
+      setLoading(false)
     }
+  }
 
-    if (order.payment_method === 'COD') {
-      dispatch(createOrder(order))
-      dispatch(clearCart())
-    } else {
-      console.log('Loading...')
-    }
+  if (loading) {
+    return <Loading />
+  }
+  if (isLoading) {
+    return <Loading />
   }
+  if (isError) return <p style={{ marginTop: '1rem' }}>{error.message}</p>
 
-  const { numItemsInCart } = useSelector((store) => store.cart)
   if (numItemsInCart === 0)
     return (
       <Wrapper>
@@ -285,7 +325,7 @@ const Checkout = () => {
             <div
               className="btn-container"
               style={{
-                width: values.paymentMethods !== ('COD') ? '100%' : '0rem',
+                width: values.paymentMethods !== 'COD' ? '100%' : '0rem',
               }}
             >
               <PayPalScriptProvider
@@ -304,7 +344,7 @@ const Checkout = () => {
         {/* cart total chiếm 4 cột */}
         <div className="col-5 checkout-column">
           <div className="total-container">
-            <CartTotals />
+            <OrderSummary />
           </div>
         </div>
       </div>
diff --git a/client/src/pages/main/SingleOrder.jsx b/client/src/pages/main/SingleOrder.jsx
new file mode 100644
index 0000000..987c7b9
--- /dev/null
+++ b/client/src/pages/main/SingleOrder.jsx
@@ -0,0 +1,64 @@
+import { useQuery } from '@tanstack/react-query'
+import { customFetch } from '../../utils/axios'
+import { useLoaderData } from 'react-router-dom'
+import styled from 'styled-components'
+import {
+  CustomerContactInfo,
+  OrderSummary,
+  SectionTitle,
+  ShippingAddress,
+  OrderItemsList,
+} from '../../components'
+
+const getUserSingleOrder = (id) => {
+  return {
+    queryKey: ['userOrder', id || ''],
+    queryFn: () => customFetch(`/orders/${id}`),
+  }
+}
+
+export const loader =
+  (queryClient) =>
+  async ({ params }) => {
+    const { id } = params
+    const response = await queryClient.ensureQueryData(getUserSingleOrder(id))
+    console.log(response)
+
+    const order = response.data.order
+    return { order }
+  }
+
+const SingleOrder = () => {
+  const { order } = useLoaderData()
+
+  return (
+    <Wrapper>
+      <SectionTitle text="Chi tiết đơn hàng" />
+      <div className="container">
+        {/* chia thành 12 cột */}
+        <div className="row">
+          {/* Item chiếm 8 cột */}
+          <div className="col-8">
+            <OrderItemsList itemList={order.book_list} />
+          </div>
+          {/* cart total chiếm 4 cột */}
+          <div className="col-4">
+            <div className="d-flex flex-column">
+              {/* CustomerContactInfo */}
+              <CustomerContactInfo />
+              {/* ShippingAddress */}
+              <ShippingAddress />
+              {/* OrderSummary */}
+              <OrderSummary />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Wrapper>
+  )
+}
+export default SingleOrder
+
+const Wrapper = styled.section`
+
+`
diff --git a/client/src/pages/main/index.js b/client/src/pages/main/index.js
index ef8fcd8..2084e21 100644
--- a/client/src/pages/main/index.js
+++ b/client/src/pages/main/index.js
@@ -10,6 +10,7 @@ import Order from "./Order";
 import UserInfo from "./UserInfo";
 import Manager from "./Manager";
 import SingleAuthor from "./SingleAuthor";
+import SingleOrder from "./SingleOrder";
 
 export {
   SharedLayout,
@@ -24,4 +25,5 @@ export {
   Order,
   UserInfo,
   Manager,
+  SingleOrder,
 }
\ No newline at end of file
diff --git a/controllers/order.controller.js b/controllers/order.controller.js
index e37dbbc..0b58178 100644
--- a/controllers/order.controller.js
+++ b/controllers/order.controller.js
@@ -1,6 +1,5 @@
 const Order = require('../models/order.model')
 const Book = require('../models/book.model')
-const crypto = require('crypto')
 const { v4: uuidv4 } = require('uuid')
 const fetch = require('node-fetch')
 
@@ -79,8 +78,9 @@ const createPaypalOrder = async (cart) => {
     subtotal += book.amount * price
   }
   // calculate total
-  const total = tax + shipping_fee + subtotal
-  if (total !== cart_total)
+  const total =  tax + shipping_fee + subtotal
+
+  if (Math.ceil(total) !== Math.ceil(cart_total))
     throw new CustomAPIError.BadRequestError(
       'Have different in total price between client and server!'
     )
@@ -107,7 +107,7 @@ const createPaypalOrder = async (cart) => {
         reference_id: orderId,
         amount: {
           currency_code: 'USD',
-          value: subtotal,
+          value: total,
         },
       },
     ],
@@ -159,7 +159,7 @@ const capturePaypalOrder = async (orderID, userId) => {
       `No order with id : ${invoice?.purchase_units[0]?.reference_id}`
     )
   }
-  order.status = 'paid'
+  order.is_paid = true
   order.payment_intent_id = invoice?.purchase_units[0]?.payments?.captures?.id
   await order.save()
   return {
@@ -272,127 +272,6 @@ const createOrder = async (req, res) => {
     .json({ order, clientSecret: order.clientSecret })
 }
 
-// const createPaypalOrder = async (req, res) => {
-//   const orderId = uuidv4()
-//   const paypalRequestId = uuidv4()
-
-//   const {
-//     book_list,
-//     tax,
-//     shipping_fee,
-//     cart_total,
-//     customer_email,
-//     shipping_address,
-//     recipient_name,
-//     recipient_phone,
-//     payment_method,
-//     client_id,
-//   } = req.body
-
-//   if (
-//     !recipient_name ||
-//     !customer_email ||
-//     !recipient_phone ||
-//     !shipping_address ||
-//     !payment_method
-//   ) {
-//     throw new CustomAPIError.BadRequestError('Please provide customer details')
-//   }
-
-//   if (!book_list || book_list.length < 1) {
-//     throw new CustomAPIError.BadRequestError('No cart items provided')
-//   }
-
-//   if (!tax || !shipping_fee || !cart_total) {
-//     throw new CustomAPIError.BadRequestError(
-//       'Please provide tax and shipping fee and cart total'
-//     )
-//   }
-
-//   let orderItems = []
-//   let subtotal = 0
-//   for (const book of book_list) {
-//     const dbBook = await Book.findByPk(book.bookId)
-//     if (!dbBook) {
-//       throw new CustomAPIError.NotFoundError(`No book with id : ${book.bookId}`)
-//     }
-//     const { title, price, book_img, id } = dbBook
-//     const singleOrderItem = {
-//       amount: book.amount,
-//       title,
-//       price,
-//       book_img,
-//       bookID: id,
-//     }
-//     // add item to order
-//     orderItems = [...orderItems, singleOrderItem]
-//     // calculate subtotal
-//     subtotal += book.amount * price
-//   }
-//   // calculate total
-//   const total = tax + shipping_fee + subtotal
-//   if (total !== cart_total)
-//     throw new CustomAPIError.BadRequestError(
-//       'Have different in total price between client and server!'
-//     )
-//   // get client secret
-
-//   const order = await Order.create({
-//     id: orderId,
-//     customer_email,
-//     shipping_address,
-//     recipient_name,
-//     recipient_phone,
-//     payment_method,
-//     book_list: orderItems,
-//     subtotal, // trị giá đơn hàng có tính phí ship và thuế
-//     shipping_fee,
-//     tax,
-//     total,
-//     user_id: req.user.userId,
-//   })
-
-//   const { id: paypalOrderId } = await fetch(
-//     'https://api-m.sandbox.paypal.com/v2/checkout/orders',
-//     {
-//       method: 'POST',
-//       headers: {
-//         'Content-Type': 'application/json',
-//         'PayPal-Request-Id': paypalRequestId,
-//         Authorization: `Basic ${client_id}`,
-//       },
-//       body: JSON.stringify({
-//         intent: 'CAPTURE',
-//         purchase_units: [
-//           {
-//             reference_id: orderId,
-//             amount: { currency_code: 'USD', value: total },
-//             item: orderItems,
-//           },
-//         ],
-//       }),
-//     }
-//   )
-
-//   return res.status(StatusCodes.CREATED).json({ order, paypalOrderId })
-
-//   // const order = await Order.create({
-//   //   customer_name,
-//   //   customer_email,
-//   //   customer_phone,
-//   //   shipping_address,
-//   //   recipient_name,
-//   //   recipient_phone,
-//   //   payment_method,
-//   //   book_list: JSON.stringify(orderItems),
-//   //   subtotal, // trị giá đơn hàng có tính phí ship và thuế
-//   //   shipping_fee,
-//   //   tax,
-//   //   total,
-//   //   user_id: req.user.userId,
-//   //   client_secret: paymentIntent.client_secret,
-//   // })
-// }
 
 const getAllOrders = async (req, res) => {
   const order = [['created_at', 'DESC']]
@@ -470,6 +349,22 @@ const updateOrder = async (req, res) => {
   res.status(StatusCodes.OK).json({ order })
 }
 
+const requestCancelOrder = async (req, res) => {
+  const { id: orderId } = req.params
+  checkPermissions(req.user, order.user_id)
+  const order = await Order.findByPk(orderId)
+  if (!order) {
+    throw new CustomAPIError.NotFoundError(`Không thể tìm được đơn hàng ${orderId}`)
+  }
+  if(order.status !== 'chờ xác nhận')
+    throw new CustomAPIError.BadRequestError(
+      `Đơn hàng đã được xác nhận. Vui lòng liên hệ nhân viên để xử lý!`
+    )
+  order.request_cancel = true
+  order.save()
+  res.status(StatusCodes.OK).json({ msg: 'Yêu cầu hủy đơn hàng đã được gửi!' })
+}
+
 module.exports = {
   getAllOrders,
   getSingleOrder,
@@ -478,4 +373,5 @@ module.exports = {
   createPaypalOrder,
   updateOrder,
   capturePaypalOrder,
+  requestCancelOrder,
 }
diff --git a/controllers/user.controller.js b/controllers/user.controller.js
index 4bafa04..194780b 100644
--- a/controllers/user.controller.js
+++ b/controllers/user.controller.js
@@ -33,7 +33,9 @@ const showCurrentUser = async (req, res) => {
   res
     .status(StatusCodes.OK)
     .json({
+      id: user.id,
       name: user.name,
+      email: user.email,
       phone_number: user.phone_number || "",
       gender: user?.gender,
       address: user?.address || "",
diff --git a/middleware/authentication.js b/middleware/authentication.js
index 630f677..7a1c7a4 100644
--- a/middleware/authentication.js
+++ b/middleware/authentication.js
@@ -8,7 +8,7 @@ const authenticateUser = async (req, res, next) => {
     // Kiểm tra access token có valid ko
     if (accessToken) {
       const payload = isTokenValid(accessToken)
-      req.user = payload
+      req.user = payload.user      
       return next()
     }
     // Kiểm tra refresh token có valid ko
diff --git a/models/order.model.js b/models/order.model.js
index 209f47b..773c362 100644
--- a/models/order.model.js
+++ b/models/order.model.js
@@ -63,14 +63,15 @@ Order.init(
     },
     status: {
       type: DataTypes.ENUM(
-        'pending',
-        'paid',
-        'failed',
-        'delivered',
-        'cancelled'
+        'chờ xác nhận',
+        'chờ lấy hàng',
+        'đang vận chuyển',
+        'đã giao',
+        'đã hủy',
+        'trả hàng'
       ),
       allowNull: false,
-      defaultValue: 'pending',
+      defaultValue: 'chờ xác nhận',
     },
     terms_accepted: {
       type: DataTypes.BOOLEAN,
@@ -96,6 +97,16 @@ Order.init(
         key: 'id',
       },
     },
+    is_paid: {
+      type: DataTypes.BOOLEAN,
+      allowNull: false,
+      defaultValue: false,
+    },
+    request_cancel: {
+      type: DataTypes.BOOLEAN,
+      allowNull: false,
+      defaultValue: false,
+    }
   },
   {
     defaultScope: {
@@ -118,7 +129,7 @@ Order.init(
 )
 
 Order.afterUpdate(async (order, options) => {
-  if (order.status === 'paid') {
+  if (order.status === 'đã giao') {
     const bookList = order.book_list
     for (const item of bookList) {
       const book = await Book.findByPk(item.bookID)
diff --git a/routes/order.router.js b/routes/order.router.js
index b35ada6..e3d2413 100644
--- a/routes/order.router.js
+++ b/routes/order.router.js
@@ -13,6 +13,7 @@ const {
   updateOrder,
   createPaypalOrder,
   capturePaypalOrder,
+  requestCancelOrder,
 } = require('../controllers/order.controller')
 
 router
@@ -20,6 +21,7 @@ router
   .post(authenticateUser, createOrder)
   .get(authenticateUser, authorizePermissions('admin'), getAllOrders)
 
+router.route('/requestCancelOrder').get(authenticateUser, requestCancelOrder)
 router.route('/showAllMyOrders').get(authenticateUser, getCurrentUserOrders)
 
 router.route('/paypal/createOrder').post(authenticateUser, async (req, res) => {
diff --git a/utils/index.js b/utils/index.js
index 25a11c4..f4330df 100644
--- a/utils/index.js
+++ b/utils/index.js
@@ -7,6 +7,15 @@ const hashString = require('./createHash')
 const handleResponse = require('./handleResponse')
 const generateAccessTokenPaypal = require('./generateAccessTokenPaypal')
 const isValidCCCD = require('./checkIdCard')
+
+const formatPrice = (price) => {
+  const VND = new Intl.NumberFormat('vi-VN', {
+    style: 'currency',
+    currency: 'VND',
+  }).format((price * 1000).toFixed(2))
+  return VND
+}
+
 module.exports = {
   createJWT,
   isTokenValid,
@@ -19,4 +28,5 @@ module.exports = {
   handleResponse,
   generateAccessTokenPaypal,
   isValidCCCD,
+  formatPrice,
 }