change more files

src/app/(customer)/(shop)/orders/(routes)/(landing)/page.tsx

@@ -2,18 +2,27 @@ import Link from "next/link";
 import { requireSession } from "@/lib/auth/session";
 import { getOrderGroups } from "@/lib/api/orders";
 import { PAYMENT_STATUS_LABELS_FA } from "@/lib/order-status";
-import OrderItem from "@/components/orders/OrderItem";
-import OrderEmpty from "@/components/orders/OrderEmpty";
-import OrderServerError from "@/components/orders/OrderServerError";
-import OrdersSkeleton from "@/components/orders/OrdersSkeleton";
+import OrderItem from "@/components/orders/order-item";
+import OrderEmpty from "@/components/orders/order-empty";
+import OrderServerError from "@/components/orders/order-server-error";
+import OrdersSkeleton from "@/components/orders/orders-skeleton";
+import OrderHeader from "@/components/orders/order-header";
 
 export default async function OrdersPage() {
-  return <main className="max-w-5xl w-full mx-auto p-4">
-    <OrdersSkeleton />
+  return <section>
+
+    {
+      Array.from({ length: 20 }, (_, index) => <OrderItem />)
+    }
+    {/* <OrderEmpty />
+    <OrderServerError />
+    <OrdersSkeleton /> */}
+
+    {/* <OrdersSkeleton /> */}
     {/* <OrderServerError /> */}
     {/* <OrderEmpty /> */}
-{/*  */}
-    
+    {/*  */}
+
     {/* <OrderItem />
     <OrderItem />
     <OrderItem />
@@ -26,7 +35,7 @@ export default async function OrdersPage() {
     <OrderItem />
     <OrderItem />
     <OrderItem /> */}
-  </main>
+  </section>
   // await requireSession("/orders");
   // const orderGroups = await getOrderGroups();
 

src/app/(customer)/(shop)/orders/(routes)/[orderId]/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const OrderDetail = () => {
+    return (
+        <div>OrderDetail</div>
+    )
+}
+
+export default OrderDetail

src/app/(customer)/(shop)/orders/layout.tsx

@@ -0,0 +1,15 @@
+import OrderHeader from '@/components/orders/order-header';
+import React from 'react'
+
+interface OrderLayoutInterface {
+    children: React.ReactNode;
+}
+
+const OrderLayout = async ({ children }: OrderLayoutInterface) => {
+    return <main className='max-w-5xl w-full mx-auto p-4'>
+        <OrderHeader />
+        {children}
+    </main>
+}
+
+export default OrderLayout

src/components/orders/order-header.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { ArrowRight, ShoppingBagIcon } from 'lucide-react'
+import { usePathname, useRouter } from 'next/navigation';
+
+const OrderHeader = () => {
+
+    const router = useRouter();
+    const pathname = usePathname();
+    const isExactOrders = pathname === '/orders'
+
+    const onBackHandler = () => {
+        router.back();
+    }
+
+    const goToCartPage = () => {
+        router.push('/cart');
+    }
+
+    return <header className='flex items-center justify-between w-full mb-6'>
+        <div className="flex items-center gap-3">
+            <ArrowRight className='size-5 cursor-pointer' onClick={onBackHandler} />
+            <h2 className='text-lg font-bold'>سفارش‌ها</h2>
+        </div>
+        {isExactOrders &&
+            <div className="relative cursor-pointer inline-block" onClick={goToCartPage}>
+                <div className='size-10 rounded-full flex items-center justify-center'>
+                    <ShoppingBagIcon className='size-6' />
+                </div>
+
+                <span className="absolute -top-1 -right-1 flex items-center justify-center min-w-4 h-4 px-1 bg-[#223D5D] text-white text-[10px] font-bold rounded-full">
+                    90
+                </span>
+            </div>
+        }
+    </header>
+}
+
+export default OrderHeader

src/components/orders/order-item.tsx

@@ -1,6 +1,13 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
 import React from 'react';
 
 const OrderItem = () => {
+  const router = useRouter();
+
+  const goToOrderDetail = () => router.push(`/orders/uuid`)
+
   const order = {
     id: 1,
     restaurant: 'فست‌فود برگر',
@@ -64,7 +71,10 @@ const OrderItem = () => {
         </div>
       </div>
 
-      <button className="w-full mt-8 rounded-xl h-12 bg-[#223D5D] text-white cursor-pointer hover:bg-[#1a3d50] transition-colors font-medium">
+      <button
+        className="w-full mt-8 rounded-xl h-12 bg-[#223D5D] text-white cursor-pointer hover:bg-[#1a3d50] transition-colors font-medium"
+        onClick={goToOrderDetail}
+      >
         مشاهده وضعیت
       </button>
     </div>

src/proxy.ts

@@ -8,7 +8,7 @@ const AUTH_REQUIRED_PREFIXES = [
   "/seller",
   "/cart",
   "/checkout",
-  // "/orders",
+  "/orders",
   "/order-groups",
   "/addresses",
   "/account",