From aa5cf8d71cb0204773999e150e225ccdcdd23616 Mon Sep 17 00:00:00 2001
From: dungnh-3393 <nguyen.huu.dung-b@sun-asterisk.com>
Date: Wed, 2 Oct 2024 16:18:49 +0700
Subject: [PATCH] UI_Detail_product_Order_list_Order_detail_view

---
 front-end/src/assets/base.css                 |   5 +
 front-end/src/components/cart/CartItem.vue    |  15 +-
 .../src/components/layouts/MainLayout.vue     |   4 +-
 .../src/components/layouts/PaymentLayout.vue  |   4 +-
 front-end/src/components/order/OrderItem.vue  |  57 ++++
 .../src/components/product/ProductItem.vue    |   5 +-
 front-end/src/constants/products.ts           | 271 ++++++++++++++++++
 front-end/src/locales/en.json                 |  18 +-
 front-end/src/locales/vi.json                 |  18 +-
 front-end/src/router/index.ts                 |  24 +-
 front-end/src/views/CartView.vue              | 110 +++----
 front-end/src/views/OrderDetailView.vue       |  38 +++
 front-end/src/views/OrderHistoryView.vue      |  69 +++++
 front-end/src/views/ProductDetailView.vue     | 118 ++++++++
 front-end/src/views/ProductsView.vue          |  76 +----
 15 files changed, 695 insertions(+), 137 deletions(-)
 create mode 100644 front-end/src/components/order/OrderItem.vue
 create mode 100644 front-end/src/constants/products.ts
 create mode 100644 front-end/src/views/OrderDetailView.vue
 create mode 100644 front-end/src/views/OrderHistoryView.vue
 create mode 100644 front-end/src/views/ProductDetailView.vue

diff --git a/front-end/src/assets/base.css b/front-end/src/assets/base.css
index 05d5e0d..5bfb865 100644
--- a/front-end/src/assets/base.css
+++ b/front-end/src/assets/base.css
@@ -36,6 +36,11 @@
     --section-gap: 160px;
 }
 
+:root {
+    display: flex;
+    justify-content: center;
+}
+
 @media (prefers-color-scheme: dark) {
     :root {
         --color-background: var(--vt-c-black);
diff --git a/front-end/src/components/cart/CartItem.vue b/front-end/src/components/cart/CartItem.vue
index 73d05eb..f084021 100644
--- a/front-end/src/components/cart/CartItem.vue
+++ b/front-end/src/components/cart/CartItem.vue
@@ -12,19 +12,24 @@ export default defineComponent({
                 type: Number,
                 required: true,
             },
+            isOrderDetailView: {
+                type: Boolean,
+                default: false,
+            },
         },
     setup(props) {
         const { t } = useI18n()
 
-        const removeItem = () => {
+        const removeCartItem = () => {
             console.log(`remove ${props.item.id}`)
         }
         return {
             t,
-            removeItem
+            removeCartItem
         }
     }
 })
+
 </script>
 
 <template>
@@ -34,7 +39,7 @@ export default defineComponent({
     <td class="py-2 px-4">
         <h2 class="text-lg font-semibold">{{ item.name }}</h2>
     </td>
-    <td class="py-2 px-4 text-center">
+    <td class="py-2 px-4 flex justify-center items-center">
         <img :src="item.image" alt="Product Image" class="w-16 h-16 object-cover" />
     </td>
     <td class="py-2 px-4 text-center">
@@ -46,8 +51,8 @@ export default defineComponent({
     <td class="py-2 px-4 text-center">
         <span class="text-lg font-bold">{{ item.price }} Đ</span>
     </td>
-    <td class="py-2 px-4 text-center">
-        <button @click="removeItem" class="bg-red-400 hover:bg-red-500 text-white px-4 py-2 rounded">
+    <td v-if="!isOrderDetailView" class="py-2 px-4 text-center">
+        <button @click="removeCartItem" class="bg-red-400 hover:bg-red-500 text-white px-4 py-2 rounded">
             {{ t('cart.remove') }}
         </button>
     </td>
diff --git a/front-end/src/components/layouts/MainLayout.vue b/front-end/src/components/layouts/MainLayout.vue
index 9c5f172..7e61aa3 100644
--- a/front-end/src/components/layouts/MainLayout.vue
+++ b/front-end/src/components/layouts/MainLayout.vue
@@ -6,9 +6,9 @@
 </script>
 
 <template>
-    <div>
+    <div class="flex flex-col min-h-screen">
         <HeaderSection />
-        <div class="flex justify-center min-w-[1028px]">
+        <div class="flex flex-grow justify-center min-w-[1028px] min-h-screen">
             <div class="flex justify-center gap-10 mt-6 px-2 py-6 w-[80%]">
                 <Sidebar />
                 <main>
diff --git a/front-end/src/components/layouts/PaymentLayout.vue b/front-end/src/components/layouts/PaymentLayout.vue
index cd6de66..5f18ba2 100644
--- a/front-end/src/components/layouts/PaymentLayout.vue
+++ b/front-end/src/components/layouts/PaymentLayout.vue
@@ -5,9 +5,9 @@
 </script>
 
 <template>
-    <div>
+    <div class="flex flex-col min-h-screen">
         <HeaderSection />
-        <div class="flex justify-center">
+        <div class="flex flex-grow justify-center">
             <main>
                 <RouterView />
             </main>
diff --git a/front-end/src/components/order/OrderItem.vue b/front-end/src/components/order/OrderItem.vue
new file mode 100644
index 0000000..aba07eb
--- /dev/null
+++ b/front-end/src/components/order/OrderItem.vue
@@ -0,0 +1,57 @@
+<script>
+import { defineComponent } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+export default defineComponent({
+  name: 'OrderItem',
+  props: {
+    order: {
+        type: Object,
+        Required: true,
+    },
+    index: {
+        type: Number,
+        Required: true,
+    }
+  },
+  setup() {
+    const { t } = useI18n();
+    const router = useRouter();
+
+    const showDetailOrderItem = (order) => {
+        router.push({ name: 'OrderDetail', params: { orderId: order.id } });
+    };
+
+    return { 
+        t,
+        showDetailOrderItem,
+    };
+  }
+});
+</script>
+
+<template>
+    <td class="px-4 py-2">{{ index + 1 }}</td>
+    <td class="px-4 py-2">{{ order.order_code }}</td>
+    <td class="px-4 py-2">{{ order.date }}</td>
+    <td class="px-4 py-2">{{ order.customer }}</td>
+    <td class="px-4 py-2">{{ order.total_amount }}</td>
+    <td class="px-4 py-2 font-bold">
+        <span 
+            :class="order.status === 'done' ? 'text-[#8ca25a]' : 'text-[#f47171]'" 
+            class="font-bold"
+        >
+        {{ order.status === 'done' ? 
+            `${t('order_list.done')}` : `${t('order_list.in_progress')}` }}
+        </span>
+    </td>
+    <td class="px-4 py-2">
+        <button 
+            @click="showDetailOrderItem(order)" 
+            class="text-white px-4 py-2 rounded bg-[#778e40] hover:bg-[#4c5b29]"
+        >
+        {{ t('order_list.show_detail') }}
+        </button>
+    </td>
+</template> 
diff --git a/front-end/src/components/product/ProductItem.vue b/front-end/src/components/product/ProductItem.vue
index b8cda48..db697cf 100644
--- a/front-end/src/components/product/ProductItem.vue
+++ b/front-end/src/components/product/ProductItem.vue
@@ -18,12 +18,13 @@ export default defineComponent({
             <span class="imgPrd">
                 <img :src=product.image 
                     :alt=product.name
+                    class="max-w-[250px]"
                     style="background: 
                     url(&quot;https://cong-news.appwifi.com/wp-content/uploads/2023/02/cốt-dừa-đậu-xanh_1.jpg&quot;) 
                     center center / cover no-repeat;">
             </span>
-            <h2 class="itemTitle">{{ product.name }}</h2>
-            <span class="price">
+            <h2 class="itemTitle font-bold text-[#4c5b29]">{{ product.name }}</h2>
+            <span class="price font-medium text-[#4c5b29]">
                 {{product.price}} Đ
             </span>
         </a>
diff --git a/front-end/src/constants/products.ts b/front-end/src/constants/products.ts
new file mode 100644
index 0000000..5bc7255
--- /dev/null
+++ b/front-end/src/constants/products.ts
@@ -0,0 +1,271 @@
+export const productsMockup = [
+    {
+        id: 1,
+        image:"https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png",
+        name: 'Coconut Mung Bean',
+        description: 'Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
+        price: 65000,
+    },  
+    {
+        id: 2,
+        image:"https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png",
+        name: 'Egg Coffee 1',
+        description: 'Cafe trứng béo ngậy, ngọt ngào, hấp dẫn mọi thực khách. Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
+        price: 60000,
+    },
+    {
+        id: 3,
+        image:"https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png",
+        name: 'Egg Coffee 2',
+        description: 'Cafe trứng béo ngậy, ngọt ngào, hấp dẫn mọi thực khách. Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
+        price: 70000,
+    },
+    {
+        id: 4,
+        image:"https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png",
+        name: 'Fruit Smoothie',
+        description: 'Sinh tố trái cây tươi mát, bổ dưỡng cho sức khỏe. Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
+        price: 60000,
+    },
+    {
+        id: 5,
+        image:"https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png",
+        name: 'Matcha Latte',
+        description: 'Trà xanh matcha hòa quyện với sữa, tạo nên hương vị độc đáo. Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
+        price: 80000,
+    },
+    {
+        id: 6,
+        image:"https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png",
+        name: 'Honey Lemon Tea',
+        description: 'Trà chanh mật ong thơm ngon, giúp giải khát hiệu quả. Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
+        price: 45000,
+    },
+    {
+        id: 7,
+        image:"https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png",
+        name: 'Taro Milk Tea',
+        description: 'Trà sữa khoai môn béo ngậy, mang đến trải nghiệm mới lạ. Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
+        price: 75000,
+    },
+    {
+        id: 8,
+        image:"https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png",
+        name: 'Choco Mint Latte',
+        description: 'Cafe socola kết hợp với hương bạc hà, cho cảm giác sảng khoái. Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
+        price: 70000,
+    },
+    {
+        id: 9,
+        image:"https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png",
+        name: 'Caramel Macchiato',
+        description: 'Cafe với hương vị caramel ngọt ngào, thích hợp cho những ai yêu thích sự ngọt ngào. Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
+        price: 85000,
+    },
+    {
+        id: 10,
+        image:"https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png",
+        name: 'Peach Iced Tea',
+        description: 'Trà đào lạnh thơm mát, mang đến cảm giác dễ chịu trong những ngày hè. Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
+        price: 55000,
+    }
+]
+
+export const productsRelatedMockup = [
+    {
+        id: 1,
+        image:"https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png",
+        name: 'Coconut Mung Bean',
+        description: 'Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon. Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
+        price: 65000,
+    },  
+    {
+        id: 2,
+        image:"https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png",
+        name: 'Egg Coffee 1',
+        description: 'Cafe trứng béo ngậy, ngọt ngào, hấp dẫn mọi thực khách. Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
+        price: 60000,
+    },
+    {
+        id: 3,
+        image:"https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png",
+        name: 'Egg Coffee 2',
+        description: 'Cafe trứng béo ngậy, ngọt ngào, hấp dẫn mọi thực khách. Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
+        price: 70000,
+    }
+]
+
+export const cartListMockup = [
+    {
+        id: 1,
+        name: 'Coconut Mung Bean',
+        description: 'Delicious coconut mung bean dessert.',
+        price: 65000,
+        quantity:1,
+        topping:'',
+        image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+    },
+    {
+        id: 2,
+        name: 'Vietnamese Iced Coffee',
+        description: 'Traditional Vietnamese iced coffee.',
+        price: 50000,
+        quantity:2,
+        topping:'',
+        image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+    },
+    {
+        id: 3,
+        name: 'Banh Mi',
+        description: 'Delicious Vietnamese sandwich.',
+        price: 40000,
+        quantity:1,
+        topping:'',
+        image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+    },
+]
+
+export const orderListMockup = [
+    { id: '1', order_code: "DH_001", date: '01/10/2024', customer: 'Nguyen Van A', total_amount: 150000, status: 'in progress' },
+    { id: '2', order_code: "DH_002", date: '30/09/2024', customer: 'Tran Thi B', total_amount: 200000, status: 'done' },
+    { id: '3', order_code: "DH_003", date: '29/09/2024', customer: 'Le Van C', total_amount: 175000, status: 'in progress' },
+    { id: '4', order_code: "DH_004", date: '28/09/2024', customer: 'Pham Thi D', total_amount: 225000, status: 'done' },
+    { id: '5', order_code: "DH_005", date: '27/09/2024', customer: 'Hoang Van E', total_amount: 180000, status: 'in progress' }
+];
+
+
+export const ordersListDetailMockup = [
+    {
+        id: 1,
+        data: [
+            {
+                id: 1,
+                name: 'Coconut Mung Bean',
+                description: 'Delicious coconut mung bean dessert.',
+                price: 65000,
+                quantity: 1,
+                topping: '',
+                image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png', 
+            },
+            {
+                id: 2,
+                name: 'Vietnamese Iced Coffee',
+                description: 'Traditional Vietnamese iced coffee.',
+                price: 50000,
+                quantity: 2,
+                topping: '',
+                image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+            },
+            {
+                id: 3,
+                name: 'Banh Mi',
+                description: 'Delicious Vietnamese sandwich.',
+                price: 40000,
+                quantity: 1,
+                topping: '',
+                image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+            },
+        ]
+    },
+    {
+        id: 2,
+        data: [
+            {
+                id: 1,
+                name: 'Pho',
+                description: 'Traditional Vietnamese noodle soup.',
+                price: 75000,
+                quantity: 1,
+                topping: 'Extra beef',
+                image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+            },
+            {
+                id: 2,
+                name: 'Spring Rolls',
+                description: 'Crispy fried spring rolls with dipping sauce.',
+                price: 45000,
+                quantity: 2,
+                topping: '',
+                image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+            },
+        ]
+    },
+    {
+        id: 3,
+        data: [
+            {
+                id: 1,
+                name: 'Grilled Pork Banh Mi',
+                description: 'Vietnamese sandwich with grilled pork.',
+                price: 40000,
+                quantity: 2,
+                topping: '',
+                image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+            },
+            {
+                id: 2,
+                name: 'Iced Milk Coffee',
+                description: 'Vietnamese iced coffee with milk.',
+                price: 45000,
+                quantity: 1,
+                topping: '',
+                image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+            },
+            {
+                id: 3,
+                name: 'Fried Rice',
+                description: 'Vietnamese fried rice with vegetables and egg.',
+                price: 60000,
+                quantity: 1,
+                topping: 'Extra egg',
+                image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+            },
+            {
+                id: 4,
+                name: 'Lemongrass Chicken',
+                description: 'Grilled chicken with lemongrass flavor.',
+                price: 80000,
+                quantity: 1,
+                topping: '',
+                image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+            },
+            {
+                id: 5,
+                name: 'Mango Smoothie',
+                description: 'Refreshing mango smoothie.',
+                price: 50000,
+                quantity: 1,
+                topping: '',
+                image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+            },
+        ]
+    },
+    {
+        id: 4,
+        data: [
+            {
+                id: 1,
+                name: 'Chicken Pho',
+                description: 'Traditional chicken pho with fresh herbs.',
+                price: 80000,
+                quantity: 1,
+                topping: 'Extra herbs',
+                image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+            }
+        ]
+    },
+    {
+        id: 5,
+        data: [
+            {
+                id: 1,
+                name: 'Bun Thit Nuong',
+                description: 'Grilled pork with vermicelli noodles.',
+                price: 70000,
+                quantity: 1,
+                topping: 'Extra sauce',
+                image: 'https://cong-news.appwifi.com/wp-content/uploads/2023/02/co%CC%82%CC%81t-du%CC%9B%CC%80a-ca%CC%80-phe%CC%82_lo%CC%9B%CC%81n.png',
+            }
+        ]
+    }
+];
diff --git a/front-end/src/locales/en.json b/front-end/src/locales/en.json
index b5f80e5..29314c8 100644
--- a/front-end/src/locales/en.json
+++ b/front-end/src/locales/en.json
@@ -26,7 +26,7 @@
         "method_payment": "Method payment:",
         "choose_method": "Choose method",
         "cod": "COD",
-        "total": "Total",
+        "total": "Total:",
         "checkout": "Checkout",
         "remove": "Remove"
     },
@@ -42,5 +42,21 @@
         "address": "Address:",
         "phone_number": "Phone number:",
         "email": "Email:"
+    },
+    "product_detail": {
+        "add_cart": "Add to cart"
+    },
+    "order_list": {
+        "title": "Order list",
+        "order_code": "Order code",
+        "order_time": "Order time",
+        "customer": "Customer",
+        "total_amount": "Total amount",
+        "order_status": "Order status",
+        "action": "Action",
+        "show_detail": "Show detail",
+        "done": "Done",
+        "in_progress": "In progress",
+        "order_detail": "Order detail"
     }
 }
diff --git a/front-end/src/locales/vi.json b/front-end/src/locales/vi.json
index 3382c5d..718128a 100644
--- a/front-end/src/locales/vi.json
+++ b/front-end/src/locales/vi.json
@@ -26,7 +26,7 @@
         "method_payment": "Phương thức thanh toán:",
         "choose_method": "Chọn phương thức",
         "cod": "Thanh toán khi nhận hàng (COD)",
-        "total": "Tổng cộng",
+        "total": "Tổng cộng:",
         "checkout": "Thanh toán",
         "remove": "Xóa"
     },
@@ -42,5 +42,21 @@
         "address": "Địa chi:",
         "phone_number": "Số điện thoại:",
         "email": "Email:"
+    },
+    "product_detail": {
+        "add_cart": "Thêm vào giỏ hàng"
+    },
+    "order_list": {
+        "title": "Lịch sử đơn hàng",
+        "order_code": "Mã đơn hàng",
+        "order_time": "Thời gian đặt hàng",
+        "customer": "Khách hàng",
+        "total_amount": "Tổng tiền",
+        "order_status": "Trạng thái đơn hàng",
+        "action": "Hành động",
+        "show_detail": "Xem chi tiết",
+        "done": "Hoàn thành",
+        "in_progress": "Đang xử lý",
+        "order_detail": "Chi tiết đơn hàng"
     }
 }
diff --git a/front-end/src/router/index.ts b/front-end/src/router/index.ts
index 9abebe7..bfbe166 100644
--- a/front-end/src/router/index.ts
+++ b/front-end/src/router/index.ts
@@ -4,12 +4,15 @@ import ProductsView from '../views/ProductsView.vue'
 import MainLayout from '../components/layouts/MainLayout.vue'
 import PaymentLayout from '../components/layouts/PaymentLayout.vue'
 import CartView from '@/views/CartView.vue'
+import ProductDetailView from '@/views/ProductDetailView.vue'
+import OrderHistoryView from '@/views/OrderHistoryView.vue'
+import OrderDetailView from '@/views/OrderDetailView.vue'
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes: [
         {
-            path: '/',
+            path: '/shop',
             name: 'home',
             component: MainLayout,
             children: [
@@ -26,15 +29,30 @@ const router = createRouter({
             ]
         },
         {
-            path: '/payment/',
+            path: '/',
             name: 'payment',
             component: PaymentLayout,
             children: [
                 {
-                    path: 'cart',
+                    path: 'payment/cart',
                     name: 'CartView',
                     component: CartView
                 },
+                {
+                    path: 'products/:id',
+                    name: 'ProductDetailView',
+                    component: ProductDetailView
+                },
+                {
+                    path: 'orders',
+                    name: 'OrderHistory',
+                    component: OrderHistoryView
+                },
+                {
+                    path: '/orders/:orderId',
+                    name: 'OrderDetail',
+                    component: OrderDetailView,
+                },
             ]
         },
     ]
diff --git a/front-end/src/views/CartView.vue b/front-end/src/views/CartView.vue
index 3c4f601..1e7059a 100644
--- a/front-end/src/views/CartView.vue
+++ b/front-end/src/views/CartView.vue
@@ -2,54 +2,48 @@
 import { defineComponent, reactive } from 'vue';
 import CartItem from '../components/cart/CartItem.vue';
 import { useI18n } from 'vue-i18n';
+import { cartListMockup, ordersListDetailMockup } from '@/constants/products';
+import { useRoute } from 'vue-router';
 
 export default defineComponent({
     name:"TableCartSection",
     components:{
         CartItem
     },
+    props:{
+        isOrderDetailView: {
+            type: Boolean,
+            default: false,
+        },
+        titleOrderDetailView: {
+            type: String,
+            default:'',
+        }
+    },
     setup() {
-        const { t } = useI18n()
+        const { t } = useI18n();
+
+        const route = useRoute();
+        const orderDetailId = route.params.orderId;
+
+        console.log(orderDetailId,'orderDetailId')
 
-        const listCart = reactive([
-            {
-                id: 1,
-                name: 'Coconut Mung Bean',
-                description: 'Delicious coconut mung bean dessert.',
-                price: 65000,
-                quantity:1,
-                topping:'',
-                image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOoRcTP_2RnOlWOysKxCf6lk_HBlDxv9nHig&s', // Thay bằng URL hình ảnh thực tế
-            },
-            {
-                id: 2,
-                name: 'Vietnamese Iced Coffee',
-                description: 'Traditional Vietnamese iced coffee.',
-                price: 50000,
-                quantity:2,
-                topping:'',
-                image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOoRcTP_2RnOlWOysKxCf6lk_HBlDxv9nHig&s',
-            },
-            {
-                id: 3,
-                name: 'Banh Mi',
-                description: 'Delicious Vietnamese sandwich.',
-                price: 40000,
-                quantity:1,
-                topping:'',
-                image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOoRcTP_2RnOlWOysKxCf6lk_HBlDxv9nHig&s',
-            },
-        ]);
+        const listOrdersDetail = reactive(ordersListDetailMockup)
         
-        const totalPrice = listCart.reduce((total, item) => total + (item.price * item.quantity), 0)
+        const listItem = listOrdersDetail.find((order) => order.id == orderDetailId)?.data
+                        || reactive(cartListMockup) ;
         
+
+        const totalPrice = listItem.reduce((total, item) => total + (item.price * item.quantity), 0)
+        
+
         const methodsPayment = [
             'cod'
         ]
 
         return {
             t,
-            listCart,
+            listItem,
             totalPrice,
             methodsPayment
         }
@@ -59,35 +53,53 @@ export default defineComponent({
 </script>
 
 <template>
-    <div class="max-w-4xl mx-auto p-4">
+    <div class="p-4">
         <h1 class="text-2xl font-bold mb-4">
-            {{ t('cart.title') }}
+            {{ !isOrderDetailView ? t('cart.title') : t(titleOrderDetailView) }}
         </h1>
 
-        <table class="min-w-full border-collapse bg-white shadow-md rounded-lg overflow-hidden">
-            <thead class="bg-gray-200">
+        <table class="min-w-[1024px] border-collapse bg-white shadow-md rounded-lg overflow-hidden">
+            <thead class="bg-gray-200 text-lg">
                 <tr class="text-left">
-                    <th class="py-3 px-4 text-gray-600 font-semibold text-center">#</th>
-                    <th class="py-3 px-4 text-gray-600 font-semibold text-center">{{ t('cart.product') }}</th>
-                    <th class="py-3 px-4 text-gray-600 font-semibold text-center">{{ t('cart.image') }}</th>
-                    <th class="py-3 px-4 text-gray-600 font-semibold text-center">{{ t('cart.quantity') }}</th>
-                    <th class="py-3 px-4 text-gray-600 font-semibold text-center">{{ t('cart.topping') }}</th>
-                    <th class="py-3 px-4 text-gray-600 font-semibold text-center">{{ t('cart.price') }}</th>
-                    <th class="py-3 px-4 text-gray-600 font-semibold text-center">{{ t('cart.action') }}</th>
+                    <th class="py-3 px-4 text-gray-600 font-semibold text-center">
+                        #
+                    </th>
+                    <th class="py-3 px-4 text-gray-600 font-semibold text-center">
+                        {{ t('cart.product') }}
+                    </th>
+                    <th class="py-3 px-4 text-gray-600 font-semibold text-center">
+                        {{ t('cart.image') }}
+                    </th>
+                    <th class="py-3 px-4 text-gray-600 font-semibold text-center">
+                        {{ t('cart.quantity') }}
+                    </th>
+                    <th class="py-3 px-4 text-gray-600 font-semibold text-center">
+                        {{ t('cart.topping') }}
+                    </th>
+                    <th class="py-3 px-4 text-gray-600 font-semibold text-center">
+                        {{ t('cart.price') }}
+                    </th>
+                    <th v-if="!isOrderDetailView" class="py-3 px-4 text-gray-600 font-semibold text-center">
+                        {{ t('cart.action') }}
+                    </th>
                 </tr>
             </thead>
             <tbody>
                 <tr 
-                    v-for="(item, index) in listCart" 
+                    v-for="(item, index) in listItem" 
                     :key="item.id"
                     class="border-b hover:bg-gray-100"
                 >
-                    <CartItem :item="item" :index="index" />
+                    <CartItem 
+                        :item="item" 
+                        :index="index" 
+                        :isOrderDetailView="isOrderDetailView"
+                    />
                 </tr>
             </tbody>
         </table>
 
-        <div class="mt-6 flex justify-end items-center gap-4">
+        <div v-if="!isOrderDetailView" class="mt-6 flex justify-end items-center gap-4">
             <label 
                 for="payment-method" 
                 class=" text-gray-700 font-semibold"
@@ -110,10 +122,12 @@ export default defineComponent({
         </div>
 
         <div class="mt-4 flex justify-end">
-            <h2 class="text-lg font-semibold">{{ t('cart.total') }} {{ totalPrice }} Đ</h2>
+            <h2 class="text-2xl font-semibold text-green-600">
+                {{ t('cart.total') }} {{ totalPrice }} Đ
+            </h2>
         </div>
 
-        <div class="flex justify-end mt-4">
+        <div v-if="!isOrderDetailView" class="flex justify-end mt-4">
             <button 
                 class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-700"
             >
diff --git a/front-end/src/views/OrderDetailView.vue b/front-end/src/views/OrderDetailView.vue
new file mode 100644
index 0000000..2ebd26f
--- /dev/null
+++ b/front-end/src/views/OrderDetailView.vue
@@ -0,0 +1,38 @@
+<script>
+import { defineComponent, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { cartListMockup } from '@/constants/products';
+import CartView from './CartView.vue';
+
+export default defineComponent({
+    name: "OrderDetail",
+    components: {
+        CartView
+    },
+    setup() {
+        const { t } = useI18n()
+
+        const listCart = reactive(cartListMockup);
+        
+        const totalPrice = listCart.reduce((total, item) => total + (item.price * item.quantity), 0)
+        
+        const methodsPayment = [
+            'cod'
+        ]
+
+        return {
+            t,
+            listCart,
+            totalPrice,
+            methodsPayment
+        }
+    }
+})
+</script>
+
+<template>
+    <CartView 
+        :isOrderDetailView=true 
+        :titleOrderDetailView="'order_list.order_detail'"
+    />
+</template>
diff --git a/front-end/src/views/OrderHistoryView.vue b/front-end/src/views/OrderHistoryView.vue
new file mode 100644
index 0000000..6a3506f
--- /dev/null
+++ b/front-end/src/views/OrderHistoryView.vue
@@ -0,0 +1,69 @@
+<script>
+import OrderItem from '@/components/order/OrderItem.vue';
+import { orderListMockup } from '@/constants/products';
+import { defineComponent, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export default defineComponent({
+  name: 'OrderHistory',
+  components:{
+    OrderItem
+  },
+  setup() {
+    const { t } = useI18n();
+
+    const orders = reactive(orderListMockup);
+
+    return { 
+        t,
+        orders,
+    };
+  }
+});
+</script>
+
+<template>
+  <div class="p-6 mb-10 mt-2">
+    <h2 class="text-2xl font-bold mb-8">
+        {{ t('order_list.title') }}
+    </h2>
+    <div>
+      <table class="min-w-[1024px]">
+        <thead>
+          <tr class="bg-gray-100">
+            <th class="px-4 py-2 font-bold">
+                #
+            </th>
+            <th class="px-4 py-2 font-bold">
+                {{ t('order_list.order_code') }}
+            </th>
+            <th class="px-4 py-2 font-bold">
+                {{ t('order_list.order_time') }}
+            </th>
+            <th class="px-4 py-2 font-bold">
+                {{ t('order_list.customer') }}
+            </th>
+            <th class="px-4 py-2 font-bold">
+                {{ t('order_list.total_amount') }}
+            </th>
+            <th class="px-4 py-2 font-bold">
+                {{ t('order_list.order_status') }}
+            </th>
+            <th class="px-4 py-2 font-bold">
+                {{ t('order_list.action') }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr 
+            v-for="(order, index) in orders" 
+            :key="order.id" 
+            class="border-b text-center"
+          >
+            <OrderItem :order="order" :index="index" />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
diff --git a/front-end/src/views/ProductDetailView.vue b/front-end/src/views/ProductDetailView.vue
new file mode 100644
index 0000000..5c243c6
--- /dev/null
+++ b/front-end/src/views/ProductDetailView.vue
@@ -0,0 +1,118 @@
+<script>
+import { defineComponent, reactive } from 'vue';
+import ProductItem from '../components/product/ProductItem.vue'; 
+import { useRoute } from 'vue-router';
+import { productsMockup, productsRelatedMockup } from '@/constants/products';
+import { useI18n } from 'vue-i18n';
+
+export default defineComponent ({
+name: 'ProductList',
+components:{
+  ProductItem
+},
+setup() {
+const { t } = useI18n()
+
+  const productListRelated= reactive(productsRelatedMockup);
+  const route = useRoute();
+  const productId = route.params.id;
+
+  const currentProduct = productsMockup.find((product) => product.id == productId)
+
+  const selectedProduct = reactive({
+    quantity: 1
+  });
+
+  const increaseQuantity = () => {
+    selectedProduct.quantity++;
+  };
+
+  const decreaseQuantity = () => {
+    if (selectedProduct.quantity > 1) {
+      selectedProduct.quantity--;
+    }
+  };
+
+  const addToCart = () => {
+    console.log({productId: currentProduct.id, Quantity: selectedProduct.quantity});
+    // add cart
+  };
+
+  return {
+    t,
+    productListRelated,
+    productId,
+    currentProduct,
+    selectedProduct,
+    increaseQuantity,
+    decreaseQuantity,
+    addToCart
+  }
+}
+})
+</script>
+
+<template>
+<div class="mx-auto w-[880px] mt-10">
+    <div class="flex justify-center gap-16">
+        <div class="w-[50%]">
+            <img 
+                :src="currentProduct.image" 
+                :alt="currentProduct.name"
+                class="w-full object-cover"
+            >
+        </div>
+
+        <div class="w-[50%] flex flex-col justify-center space-y-6">
+            <h3 class="text-3xl text-[#4c5b29] font-semibold">
+                {{ currentProduct.name }}
+            </h3>
+            <span class="text-xl text-[#4c5b29] font-bold">
+                {{ currentProduct.price }} Đ
+            </span>
+            <p class="text-lg text-[#4c5b29] font-light">
+                {{ currentProduct.description }}
+            </p>
+
+            <div class="flex items-center space-x-4">
+                <button 
+                    @click="decreaseQuantity" 
+                    class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-md"
+                    :disabled="selectedProduct.quantity <= 1"
+                >
+                    -
+                </button>
+                <input 
+                    type="number" 
+                    v-model.number="selectedProduct.quantity" 
+                    min="1" 
+                    class="w-16 text-center border border-gray-300 rounded-md text-[#4c5b29]"
+                />
+                <button 
+                    @click="increaseQuantity" 
+                    class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-md"
+                >
+                    +
+                </button>
+            </div>
+
+            <button 
+                @click="addToCart" 
+                class="text-white text-lg py-3 px-6 rounded-lg bg-[#778e40] hover:bg-[#4c5b29]"
+            >
+                {{ t('product_detail.add_cart') }}
+            </button>
+        </div>
+    </div>
+
+    <div class="flex justify-between flex-wrap gap-8 my-10">
+        <div 
+            v-for="(product,index) in productListRelated" 
+            :key="index" 
+            class="col-6 col-sm-4"
+            >
+            <ProductItem :product="product" />
+        </div>
+    </div>
+</div>
+</template>
diff --git a/front-end/src/views/ProductsView.vue b/front-end/src/views/ProductsView.vue
index d33a1ce..21aa7f5 100644
--- a/front-end/src/views/ProductsView.vue
+++ b/front-end/src/views/ProductsView.vue
@@ -1,6 +1,7 @@
 <script>
 import { defineComponent, reactive } from 'vue';
 import ProductItem from '../components/product/ProductItem.vue'; 
+import { productsMockup } from '@/constants/products';
 
 export default defineComponent ({
 name: 'ProductList',
@@ -8,78 +9,7 @@ components:{
   ProductItem
 },
 setup() {
-  const productsList= reactive([
-      {
-          id: 1,
-          image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOoRcTP_2RnOlWOysKxCf6lk_HBlDxv9nHig&s",
-          name: 'Coconut Mung Bean',
-          description: 'Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon Cafe sieu ngon',
-          price: 65000,
-      },  
-      {
-          id: 2,
-          image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOoRcTP_2RnOlWOysKxCf6lk_HBlDxv9nHig&s",
-          name: 'Egg Coffee 1',
-          description: 'Cafe trứng béo ngậy, ngọt ngào, hấp dẫn mọi thực khách.',
-          price: 60000,
-      },
-      {
-          id: 3,
-          image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOoRcTP_2RnOlWOysKxCf6lk_HBlDxv9nHig&s",
-          name: 'Egg Coffee 2',
-          description: 'Cafe trứng béo ngậy, ngọt ngào, hấp dẫn mọi thực khách.',
-          price: 70000,
-      },
-      {
-          id: 4,
-          image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOoRcTP_2RnOlWOysKxCf6lk_HBlDxv9nHig&s",
-          name: 'Fruit Smoothie',
-          description: 'Sinh tố trái cây tươi mát, bổ dưỡng cho sức khỏe.',
-          price: 60000,
-      },
-      {
-          id: 5,
-          image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOoRcTP_2RnOlWOysKxCf6lk_HBlDxv9nHig&s",
-          name: 'Matcha Latte',
-          description: 'Trà xanh matcha hòa quyện với sữa, tạo nên hương vị độc đáo.',
-          price: 80000,
-      },
-      {
-          id: 6,
-          image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOoRcTP_2RnOlWOysKxCf6lk_HBlDxv9nHig&s",
-          name: 'Honey Lemon Tea',
-          description: 'Trà chanh mật ong thơm ngon, giúp giải khát hiệu quả.',
-          price: 45000,
-      },
-      {
-          id: 7,
-          image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOoRcTP_2RnOlWOysKxCf6lk_HBlDxv9nHig&s",
-          name: 'Taro Milk Tea',
-          description: 'Trà sữa khoai môn béo ngậy, mang đến trải nghiệm mới lạ.',
-          price: 75000,
-      },
-      {
-          id: 8,
-          image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOoRcTP_2RnOlWOysKxCf6lk_HBlDxv9nHig&s",
-          name: 'Choco Mint Latte',
-          description: 'Cafe socola kết hợp với hương bạc hà, cho cảm giác sảng khoái.',
-          price: 70000,
-      },
-      {
-          id: 9,
-          image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOoRcTP_2RnOlWOysKxCf6lk_HBlDxv9nHig&s",
-          name: 'Caramel Macchiato',
-          description: 'Cafe với hương vị caramel ngọt ngào, thích hợp cho những ai yêu thích sự ngọt ngào.',
-          price: 85000,
-      },
-      {
-          id: 10,
-          image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOoRcTP_2RnOlWOysKxCf6lk_HBlDxv9nHig&s",
-          name: 'Peach Iced Tea',
-          description: 'Trà đào lạnh thơm mát, mang đến cảm giác dễ chịu trong những ngày hè.',
-          price: 55000,
-      }
-  ]);
+  const productsList= reactive(productsMockup);
 
   return {
       productsList,
@@ -95,7 +25,7 @@ setup() {
       :key="index" 
       class="col-6 col-sm-4"
     >
-      <ProductItem  :product="product" />
+      <ProductItem :product="product" />
     </div>
   </div>
 </template>