From dc6672a96df2d8e41c21cfa3f595ab68e384b954 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Mon, 27 May 2024 19:20:54 -0500
Subject: [PATCH] updated order page

---
 donutshop_ecommerce/src/app/orders/page.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/donutshop_ecommerce/src/app/orders/page.js b/donutshop_ecommerce/src/app/orders/page.js
index 6f61e7c..501705e 100644
--- a/donutshop_ecommerce/src/app/orders/page.js
+++ b/donutshop_ecommerce/src/app/orders/page.js
@@ -2,6 +2,8 @@
 import React, { useEffect, useState } from 'react'
 import UserTab from '../../components/layout/UserTab'
 import useProfile from '../../components/UseProfile'
+import Link from 'next/link'
+
 
 const OrderPage = () => {
     const {loading, data} = useProfile();
@@ -11,11 +13,12 @@ const OrderPage = () => {
     useEffect(() => {
         fetch('/api/orders').then(res => {
             res.json().then(orders => {
-                setOrders(orders);
+                setOrders(orders.reverse());
             })
         })
     }, [])
 
+
     //date&time for createdAt
     function dateTime(str){
         return str.replace('T', ' ').substring(0, 16)
@@ -33,14 +36,17 @@ const OrderPage = () => {
     <div className='px-5 mb-10'>
         <UserTab isAdmin={true}/>
         <div className='max-w-md mx-auto mt-10'>
-            {orders?.length > 0 && orders.map(order => (
+            {orders?.length > 0 && orders.map((order) => (
                 <div className='border p-2 my-2 w-full rounded-md outline-none border-[#DCA0AE] flex items-center justify-between'>
-                    <div className='flex flex-col'>
+                    <div className='flex flex-col gap-2'>
                         <div className='text-gray-700 font-semibold'>{order.userEmail}</div>
-                        <div className={order.paid? 'text-green-600 text-sm' : 'text-red-600 text-sm'}>{order.paid ? 'Paid' : 'Payment required'}</div>
+                        <div className='mb-2'>
+                            <Link href={'/orders/'+order._id} className='bg-gray-200 text-gray-700 p-2 text-xs font-semibold'>Order info</Link>
+                        </div>
+                        <div className='text-xs text-gray-500'>{dateTime(order.createdAt)}</div>
                     </div>
-                    <div>
-                        {dateTime(order.createdAt)}
+                    <div className='text-xs text-center text-white font-medium'>
+                        <div className={order.paid? 'bg-green-600 p-[5px] w-[50px] rounded-[4px]' : 'bg-red-600 p-[5px] w-[120px] rounded-[4px]'}>{order.paid ? 'Paid' : 'Payment required'}</div>
                     </div>
                 </div>
             ))}