updated orders page

donutshop_ecommerce/src/app/orders/page.js

@@ -1,12 +1,25 @@
 "use client"
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import UserTab from '../../components/layout/UserTab'
 import useProfile from '../../components/UseProfile'
 
 const OrderPage = () => {
     const {loading, data} = useProfile();
+    const [orders, setOrders] = useState([]);
 
 
+    useEffect(() => {
+        fetch('/api/orders').then(res => {
+            res.json().then(orders => {
+                setOrders(orders);
+            })
+        })
+    }, [])
+
+    //date&time for createdAt
+    function dateTime(str){
+        return str.replace('T', ' ').substring(0, 16)
+    }
 
     if(loading){
         return <p className='flex justify-center items-center'>Loading...</p>
@@ -17,10 +30,20 @@ const OrderPage = () => {
 
 
   return (
-    <div className='mb-10'>
+    <div className='px-5 mb-10'>
         <UserTab isAdmin={true}/>
-        <div className='px-5 max-w-md mx-auto mt-10'>
-            <p>This order page for admin panel</p>
+        <div className='max-w-md mx-auto mt-10'>
+            {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='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>
+                    <div>
+                        {dateTime(order.createdAt)}
+                    </div>
+                </div>
+            ))}
         </div>
     </div>
   )

donutshop_ecommerce/src/components/layout/UserTab.js

@@ -15,9 +15,9 @@ const UserTab = ({isAdmin}) => {
             <Link href='/categories' className={path === '/categories' ? 'active' : ''}>Categories</Link>
             <Link href='/menu-items' className={path.includes('menu-items')  ? 'active' : ''}>Items</Link>
             <Link href='/users' className={path.includes('users') ? 'active' : ''}>Users</Link>
-            <Link href='/orders' className={path === '/orders' ? 'active' : ''}>Orders</Link>
           </>
         )}
+        <Link href='/orders' className={path === '/orders' ? 'active' : ''}>Orders</Link>
     </div>
   )
 }