From 41e86d30b3af11d7bf6948665594ad48b6c25db6 Mon Sep 17 00:00:00 2001 From: Mohammadali Date: Sat, 29 Aug 2026 11:48:30 +0330 Subject: [PATCH] add empty order component & server error component & orders skeleton & order item --- src/app/(customer)/(shop)/orders/page.tsx | 89 ++++++++++++++-------- src/components/orders/OrderEmpty.tsx | 19 +++++ src/components/orders/OrderItem.tsx | 74 ++++++++++++++++++ src/components/orders/OrderServerError.tsx | 19 +++++ src/components/orders/OrdersSkeleton.tsx | 47 ++++++++++++ src/proxy.ts | 2 +- 6 files changed, 216 insertions(+), 34 deletions(-) create mode 100644 src/components/orders/OrderEmpty.tsx create mode 100644 src/components/orders/OrderItem.tsx create mode 100644 src/components/orders/OrderServerError.tsx create mode 100644 src/components/orders/OrdersSkeleton.tsx diff --git a/src/app/(customer)/(shop)/orders/page.tsx b/src/app/(customer)/(shop)/orders/page.tsx index ecdd790..42f4ee1 100644 --- a/src/app/(customer)/(shop)/orders/page.tsx +++ b/src/app/(customer)/(shop)/orders/page.tsx @@ -2,42 +2,65 @@ 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"; export default async function OrdersPage() { - await requireSession("/orders"); - const orderGroups = await getOrderGroups(); + return
+ + {/* */} + {/* */} +{/* */} + + {/* + + + + + + + + + + + */} +
+ // await requireSession("/orders"); + // const orderGroups = await getOrderGroups(); - return ( -
-

سفارش‌های من

+ // return ( + //
+ //

سفارش‌های من

- {orderGroups.length === 0 &&

هنوز سفارشی ثبت نکرده‌اید.

} + // {orderGroups.length === 0 &&

هنوز سفارشی ثبت نکرده‌اید.

} -
- {orderGroups.map((group) => ( - -
- {new Date(group.created_at).toLocaleDateString("fa-IR")} - {PAYMENT_STATUS_LABELS_FA[group.payment_status]} -
-
- {group.orders.map((order) => ( - - {order.store.name} - - ))} -
-
- مجموع - {group.total_amount.toLocaleString("fa-IR")} تومان -
- - ))} -
-
- ); + //
+ // {orderGroups.map((group) => ( + // + //
+ // {new Date(group.created_at).toLocaleDateString("fa-IR")} + // {PAYMENT_STATUS_LABELS_FA[group.payment_status]} + //
+ //
+ // {group.orders.map((order) => ( + // + // {order.store.name} + // + // ))} + //
+ //
+ // مجموع + // {group.total_amount.toLocaleString("fa-IR")} تومان + //
+ // + // ))} + //
+ //
+ // ); } diff --git a/src/components/orders/OrderEmpty.tsx b/src/components/orders/OrderEmpty.tsx new file mode 100644 index 0000000..e7c9452 --- /dev/null +++ b/src/components/orders/OrderEmpty.tsx @@ -0,0 +1,19 @@ +import { ShoppingBagIcon } from 'lucide-react' +import React from 'react' + +const OrderEmpty = () => { + return ( +
+
+
+ +
+

هنوز سفارشی ثبت نکرده‌اید

+

لیست سفارش‌های شما در حال حاضر خالی است. برای خرید از فروشگاه‌های اطراف روی دکمه زیر کلیک کنید.

+ +
+
+ ) +} + +export default OrderEmpty \ No newline at end of file diff --git a/src/components/orders/OrderItem.tsx b/src/components/orders/OrderItem.tsx new file mode 100644 index 0000000..e721e62 --- /dev/null +++ b/src/components/orders/OrderItem.tsx @@ -0,0 +1,74 @@ +import React from 'react'; + +const OrderItem = () => { + const order = { + id: 1, + restaurant: 'فست‌فود برگر', + description: 'ساندویچ + نوشیدنی', + status: 'در حال آماده‌سازی', + statusColor: 'bg-orange-100 text-orange-700', + time: 'امروز، 11:30', + itemsCount: 3, + totalPrice: 45000, + images: Array.from({ length: 25 }, (_, i) => ({ + id: i, + src: `https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqIof_DOo6I5-oOLJ1V9_HPfSudXfhewy_5C5Ry7YOO-UXSZ1jvK7-0hw&s=10`, // عکس رندوم + alt: `product-${i}`, + })), + }; + + return ( +
+
+
+
+ {order.restaurant.charAt(0)} +
+
+

{order.restaurant}

+

{order.description}

+
+
+ + {order.status} + +
+ +
+ +
+
+ {order.images.map((img) => ( +
+ {img.alt} +
+ ))} +
+ +
+
+ {order.time} +
+
+ {order.itemsCount} کالا • {order.totalPrice.toLocaleString('fa-IR')} تومان +
+
+
+ + +
+ ); +}; + +export default OrderItem; \ No newline at end of file diff --git a/src/components/orders/OrderServerError.tsx b/src/components/orders/OrderServerError.tsx new file mode 100644 index 0000000..afde5c6 --- /dev/null +++ b/src/components/orders/OrderServerError.tsx @@ -0,0 +1,19 @@ +import { ServerCrashIcon } from 'lucide-react' +import React from 'react' + +const OrderServerError = () => { + return ( +
+
+
+ +
+

خطا در برقراری ارتباط

+

متأسفانه در دریافت اطلاعات سفارش‌ها مشکلی پیش آمده است. لطفاً اتصال اینترنت خود را بررسی کرده و مجدداً تلاش کنید.

+ +
+
+ ) +} + +export default OrderServerError \ No newline at end of file diff --git a/src/components/orders/OrdersSkeleton.tsx b/src/components/orders/OrdersSkeleton.tsx new file mode 100644 index 0000000..ebf3b7f --- /dev/null +++ b/src/components/orders/OrdersSkeleton.tsx @@ -0,0 +1,47 @@ +import React from 'react'; + +const OrdersSkeleton = () => { + return ( +
+ {Array.from({ length: 10 }).map((_, index) => ( +
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+ {Array.from({ length: 3 }).map((_, imgIndex) => ( +
+ ))} +
+ +
+
+
+
+
+ +
+
+ ))} +
+ ); +}; + +export default OrdersSkeleton; \ No newline at end of file diff --git a/src/proxy.ts b/src/proxy.ts index c834035..25033f6 100644 --- a/src/proxy.ts +++ b/src/proxy.ts @@ -8,7 +8,7 @@ const AUTH_REQUIRED_PREFIXES = [ "/seller", "/cart", "/checkout", - "/orders", + // "/orders", "/order-groups", "/addresses", "/account",