UI_Detail_product_Order_list_Order_detail_view

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);

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>

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>

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>

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> 

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>