show items order

src/app/[name]/(Dialogs)/order/checkout/types/Types.ts

@@ -1,4 +1,4 @@
-import { BaseResponse } from "@/app/[name]/(Main)/types/Types";
+import { BaseResponse, Product } from "@/app/[name]/(Main)/types/Types";
 
 export interface ShipmentMethod {
   id: string;
@@ -361,28 +361,15 @@ export interface OrderDetailPaymentMethod {
   merchantId: string | null;
 }
 
-export interface OrderDetailFood {
+export interface OrderDetailVariant {
   id: string;
   createdAt: string;
   updatedAt: string;
   deletedAt: string | null;
-  restaurant: string;
-  category: string;
-  title: string;
-  desc: string;
-  content: string[];
+  value: string;
   price: number;
-  order: number | null;
-  prepareTime: number | null;
-  weekDays: number[];
-  mealTypes: string[];
-  isActive: boolean;
-  images: string[];
-  inPlaceServe: boolean;
-  pickupServe: boolean;
-  score: number;
-  discount: number;
-  isSpecialOffer: boolean;
+  stock: number | null;
+  product: Product;
 }
 
 export interface OrderDetailItem {
@@ -391,11 +378,12 @@ export interface OrderDetailItem {
   updatedAt: string;
   deletedAt: string | null;
   order: string;
-  food: OrderDetailFood;
+  variant: OrderDetailVariant;
   quantity: number;
   unitPrice: number;
   discount: number;
   totalPrice: number;
+  status?: string;
 }
 
 export interface OrderDetailHistory {

src/app/[name]/(Dialogs)/order/track/[id]/page.tsx

@@ -1,32 +1,58 @@
-'use client';
+"use client";
 
-import { useParams, useRouter } from 'next/navigation';
-import React from 'react';
-import Button from '@/components/button/PrimaryButton';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Clock } from 'iconsax-react';
-import clsx from 'clsx';
-import useToggle from '@/hooks/helpers/useToggle';
-import Prompt from '@/components/utils/Prompt';
-import { useCancelOrder, useGetOrderDetail } from '../../checkout/hooks/useOrderData';
-import ordersTranslations from '@/locales/fa/orders.json';
-import { toast } from '@/components/Toast';
-import { extractErrorMessage } from '@/lib/func';
-import { useQueryClient } from '@tanstack/react-query';
+import type { Product, ProductCategory } from "@/app/[name]/(Main)/types/Types";
+import { isVariablePricing } from "@/app/[name]/(Main)/types/Types";
+import Button from "@/components/button/PrimaryButton";
+import MenuItem from "@/components/listview/MenuItem";
+import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
+import { toast } from "@/components/Toast";
+import { Skeleton } from "@/components/ui/skeleton";
+import Prompt from "@/components/utils/Prompt";
+import useToggle from "@/hooks/helpers/useToggle";
+import { extractErrorMessage } from "@/lib/func";
+import ordersTranslations from "@/locales/fa/orders.json";
+import { useQueryClient } from "@tanstack/react-query";
+import clsx from "clsx";
+import { Clock } from "iconsax-react";
+import { useParams, useRouter } from "next/navigation";
+import React from "react";
+import { useCancelOrder, useGetOrderDetail } from "../../checkout/hooks/useOrderData";
+import type { OrderDetailItem } from "../../checkout/types/Types";
+
+const orderItemToProduct = (item: OrderDetailItem): Product => {
+  const { product, ...variant } = item.variant;
+  const categoryId = typeof product.category === "string" ? product.category : (product.category?.id ?? "");
+
+  return {
+    ...product,
+    category: (typeof product.category === "object" && product.category ? product.category : { id: categoryId }) as ProductCategory,
+    variants: [
+      {
+        id: variant.id,
+        createdAt: variant.createdAt,
+        updatedAt: variant.updatedAt,
+        deletedAt: variant.deletedAt,
+        product: product.id,
+        value: variant.value,
+        price: item.unitPrice,
+      },
+    ],
+  } as Product;
+};
 
 const getDeliveryMethodTitle = (method: string) => {
-    switch (method) {
-        case 'deliveryCourier':
-            return 'ارسال توسط پیک';
-        case 'deliveryCar':
-            return 'تحویل به خودرو';
-        case 'pickup':
-            return 'تحویل حضوری';
-        case 'dineIn':
-            return 'سرو در فروشگاه';
-        default:
-            return 'روش ارسال';
-    }
+  switch (method) {
+    case "deliveryCourier":
+      return "ارسال توسط پیک";
+    case "deliveryCar":
+      return "تحویل به خودرو";
+    case "pickup":
+      return "تحویل حضوری";
+    case "dineIn":
+      return "سرو در فروشگاه";
+    default:
+      return "روش ارسال";
+  }
 };
 
 // const getStatusPercentage = (status: string) => {
@@ -53,17 +79,17 @@ const getDeliveryMethodTitle = (method: string) => {
 // };
 
 const getStatusText = (status: string): string => {
-    const statusKey = status as keyof typeof ordersTranslations.status;
-    return ordersTranslations.status[statusKey] || 'نامشخص';
+  const statusKey = status as keyof typeof ordersTranslations.status;
+  return ordersTranslations.status[statusKey] || "نامشخص";
 };
 
 const formatDate = (dateString: string): string => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString('fa-IR', {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric'
-    });
+  const date = new Date(dateString);
+  return date.toLocaleDateString("fa-IR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
 };
 
 // const formatTime = (dateString: string): string => {
@@ -75,158 +101,170 @@ const formatDate = (dateString: string): string => {
 // };
 
 function OrderTrackingPage() {
-    const { id, name } = useParams();
-    const router = useRouter();
-    const queryClient = useQueryClient();
-    const { state: cancelModal, toggle: toggleCancelModal } = useToggle();
-    const { data: orderDetail, isLoading } = useGetOrderDetail(id as string);
-    const { mutate: cancelOrder } = useCancelOrder();
+  const { id, name } = useParams();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { state: cancelModal, toggle: toggleCancelModal } = useToggle();
+  const { data: orderDetail, isLoading } = useGetOrderDetail(id as string);
+  const { mutate: cancelOrder } = useCancelOrder();
 
-    const onCancelOrder = (e: React.MouseEvent | null) => {
-        if (!e || !id) return;
+  const onCancelOrder = (e: React.MouseEvent | null) => {
+    if (!e || !id) return;
 
-        cancelOrder(id as string, {
-            onSuccess: () => {
-                toggleCancelModal();
-                queryClient.invalidateQueries({ queryKey: ['order-detail', id] });
-                toast('سفارش با موفقیت لغو شد', 'success');
-            },
-            onError: (error) => {
-                toast(extractErrorMessage(error), 'error');
-            }
-        });
-    };
+    cancelOrder(id as string, {
+      onSuccess: () => {
+        toggleCancelModal();
+        queryClient.invalidateQueries({ queryKey: ["order-detail", id] });
+        toast("سفارش با موفقیت لغو شد", "success");
+      },
+      onError: (error) => {
+        toast(extractErrorMessage(error), "error");
+      },
+    });
+  };
 
-    return (
-        <div className="fixed inset-0 bg-container flex flex-col">
-            <div className='flex-1 overflow-y-auto px-4 py-6'>
-                <div className='max-w-2xl mx-auto flex flex-col gap-6'>
-                    {isLoading ? (
-                        <>
-                            <Skeleton className='h-6 w-48 mx-auto' />
-                            <div className='flex flex-col gap-4'>
-                                <Skeleton className='h-5 w-full' />
-                                <Skeleton className='h-5 w-full' />
-                                <Skeleton className='h-20 w-full' />
-                                <Skeleton className='h-5 w-full' />
-                            </div>
-                        </>
-                    ) : orderDetail?.data ? (
-                        <>
-                            {orderDetail.data.status === 'needConfirmation' && (
-                                <div className='rounded-2xl bg-red-50 px-4 py-3 text-center'>
-                                    <p className='text-sm text-red-800 leading-6'>
-                                        لطفاً پس از دریافت پیامک، حداکثر تا ۲ ساعت نسبت به پرداخت اقدام کنید؛ در غیر این صورت سفارش به‌صورت خودکار لغو خواهد شد.
-                                    </p>
-                                </div>
-                            )}
-
-                            <h1 className='text-lg font-semibold text-center'>
-                                {getDeliveryMethodTitle(orderDetail.data.deliveryMethod.method)}
-                            </h1>
-
-                            <div className='flex flex-col'>
-                                <div className='flex justify-between items-center h-16 border-b border-border'>
-                                    <span className='text-sm text-muted-foreground flex items-center gap-2'>
-                                        <Clock className='stroke-current' size={16} />
-                                        زمان سفارش
-                                    </span>
-                                    <div className='flex  items-end gap-0.5'>
-                                        <span className='text-sm font-semibold'>{formatDate(orderDetail.data.createdAt)}</span>
-                                        {/* <span className='text-xs text-muted-foreground'>{formatTime(orderDetail.data.createdAt)}</span> */}
-                                    </div>
-                                </div>
-                                <div className='flex justify-between items-center h-16 border-b border-border'>
-                                    <span className='text-sm text-muted-foreground'>نوع ارسال</span>
-                                    <span className='text-sm font-semibold'>{orderDetail.data?.deliveryMethod?.description}</span>
-                                </div>
-                                {orderDetail.data.carAddress && (
-                                    <div className='flex justify-between items-center h-16 border-b border-border'>
-                                        <div className='text-sm text-muted-foreground mb-1'>اطلاعات خودرو</div>
-                                        <div className='text-sm font-semibold'>
-                                            {orderDetail.data.carAddress.carModel} {orderDetail.data.carAddress.carColor} - پلاک: {orderDetail.data.carAddress.plateNumber}
-                                        </div>
-                                    </div>
-                                )}
-                                <div className='flex justify-between items-center h-16 border-b border-border'>
-                                    <span className='text-sm text-muted-foreground'>شماره سفارش</span>
-                                    <span className='text-sm font-semibold'>#{orderDetail.data.orderNumber}</span>
-                                </div>
-                                <div className='flex justify-between items-center h-16 border-b border-border'>
-                                    <span className='text-sm text-muted-foreground'>وضعیت سفارش</span>
-                                    <span className='text-sm font-semibold'>{getStatusText(orderDetail.data.status)}</span>
-                                </div>
-
-                                {orderDetail.data.tableNumber && (
-                                    <div className='flex justify-between items-center h-16 border-b border-border'>
-                                        <span className='text-sm text-muted-foreground'>شماره میز</span>
-                                        <span className='text-sm font-semibold'>#{orderDetail.data.tableNumber}</span>
-                                    </div>
-                                )}
-
-                                {orderDetail.data.userAddress && (
-                                    <div className='py-3 border-b border-border'>
-                                        <div className='text-sm text-muted-foreground mb-1'>آدرس تحویل</div>
-                                        <div className='text-sm'>{orderDetail.data.userAddress.address}</div>
-                                    </div>
-                                )}
-
-                                <div className='flex justify-between items-center py-4 border-t border-border'>
-                                    <span className='text-sm font-medium'>مجموع سفارش</span>
-                                    <span className='text-sm font-bold '>
-                                        {orderDetail.data.total.toLocaleString('fa-IR')} تومان
-                                    </span>
-                                </div>
-                            </div>
-                        </>
-                    ) : (
-                        <div className='text-center text-muted-foreground py-12'>
-                            اطلاعات سفارش یافت نشد
-                        </div>
-                    )}
+  return (
+    <div className="fixed inset-0 bg-container flex flex-col">
+      <div className="flex-1 overflow-y-auto px-4 py-6">
+        <div className="max-w-2xl mx-auto flex flex-col gap-6">
+          {isLoading ? (
+            <>
+              <Skeleton className="h-6 w-48 mx-auto" />
+              <div className="flex flex-col gap-4">
+                <Skeleton className="h-5 w-full" />
+                <Skeleton className="h-5 w-full" />
+                <Skeleton className="h-20 w-full" />
+                <Skeleton className="h-5 w-full" />
+              </div>
+            </>
+          ) : orderDetail?.data ? (
+            <>
+              {orderDetail.data.status === "needConfirmation" && (
+                <div className="rounded-2xl bg-red-50 px-4 py-3 text-center">
+                  <p className="text-sm text-red-800 leading-6">لطفاً پس از دریافت پیامک، حداکثر تا ۲ ساعت نسبت به پرداخت اقدام کنید؛ در غیر این صورت سفارش به‌صورت خودکار لغو خواهد شد.</p>
                 </div>
-            </div>
+              )}
 
-            <div className='p-4 border-t border-border bg-container'>
-                <div className='max-w-2xl mx-auto grid grid-cols-2 gap-4'>
-                    <Button
-                        className='dark:bg-white dark:text-black! dark:hover:bg-gray-100'
-                        onClick={() => router.push(`/${name}`)}
-                        type='button'>
-                        بازگشت به منو
-                    </Button>
-                    <Button
-                        type='submit'
-                        onClick={toggleCancelModal}
-                        className='bg-disabled! text-foreground!'
-                        disabled={
-                            orderDetail?.data?.status === 'cancelled' ||
-                            orderDetail?.data?.status === 'delivered' ||
-                            orderDetail?.data?.status === 'delivering'
-                        }
-                    >
-                        لغو سفارش
-                    </Button>
+              <h1 className="text-lg font-semibold text-center">{getDeliveryMethodTitle(orderDetail.data.deliveryMethod.method)}</h1>
+
+              <div className="flex flex-col">
+                <div className="flex justify-between items-center h-16 border-b border-border">
+                  <span className="text-sm text-muted-foreground flex items-center gap-2">
+                    <Clock className="stroke-current" size={16} />
+                    زمان سفارش
+                  </span>
+                  <div className="flex  items-end gap-0.5">
+                    <span className="text-sm font-semibold">{formatDate(orderDetail.data.createdAt)}</span>
+                    {/* <span className='text-xs text-muted-foreground'>{formatTime(orderDetail.data.createdAt)}</span> */}
+                  </div>
+                </div>
+                <div className="flex justify-between items-center h-16 border-b border-border">
+                  <span className="text-sm text-muted-foreground">نوع ارسال</span>
+                  <span className="text-sm font-semibold">{orderDetail.data?.deliveryMethod?.description}</span>
+                </div>
+                {orderDetail.data.carAddress && (
+                  <div className="flex justify-between items-center h-16 border-b border-border">
+                    <div className="text-sm text-muted-foreground mb-1">اطلاعات خودرو</div>
+                    <div className="text-sm font-semibold">
+                      {orderDetail.data.carAddress.carModel} {orderDetail.data.carAddress.carColor} - پلاک: {orderDetail.data.carAddress.plateNumber}
+                    </div>
+                  </div>
+                )}
+                <div className="flex justify-between items-center h-16 border-b border-border">
+                  <span className="text-sm text-muted-foreground">شماره سفارش</span>
+                  <span className="text-sm font-semibold">#{orderDetail.data.orderNumber}</span>
+                </div>
+                <div className="flex justify-between items-center h-16 border-b border-border">
+                  <span className="text-sm text-muted-foreground">وضعیت سفارش</span>
+                  <span className="text-sm font-semibold">{getStatusText(orderDetail.data.status)}</span>
                 </div>
-            </div>
 
-            <div className={clsx(
-                'fixed inset-0 z-1001',
-                !cancelModal && 'pointer-events-none'
-            )}>
-                <Prompt
-                    title={'لغو سفارش'}
-                    description={'آیا از درخواست خود اطمینان دارید؟'}
-                    textConfirm={'بله'}
-                    textCancel={'منصرف شدم'}
-                    onConfirm={onCancelOrder}
-                    visible={cancelModal}
-                    onClick={toggleCancelModal}
-                    onCancel={toggleCancelModal}
-                />
-            </div>
+                {orderDetail.data.tableNumber && (
+                  <div className="flex justify-between items-center h-16 border-b border-border">
+                    <span className="text-sm text-muted-foreground">شماره میز</span>
+                    <span className="text-sm font-semibold">#{orderDetail.data.tableNumber}</span>
+                  </div>
+                )}
+
+                {orderDetail.data.userAddress && (
+                  <div className="py-3 border-b border-border">
+                    <div className="text-sm text-muted-foreground mb-1">آدرس تحویل</div>
+                    <div className="text-sm">{orderDetail.data.userAddress.address}</div>
+                  </div>
+                )}
+
+                {orderDetail.data.items?.length > 0 && (
+                  <div className="py-4 mt-7 border-b border-border">
+                    <div className="text-sm font-medium mb-4">اقلام سفارش</div>
+                    <div className="flex flex-col gap-4">
+                      {orderDetail.data.items.map((item) => {
+                        const product = orderItemToProduct(item);
+                        const showPendingBadge = isVariablePricing(product);
+
+                        return (
+                          <MenuItemRenderer key={item.id}>
+                            <MenuItem
+                              product={product}
+                              variantId={item.variant.id}
+                              variantValue={item.variant.value}
+                              readOnly
+                              badge={
+                                showPendingBadge ? (
+                                  <span className="inline-block rounded-lg bg-orange-50 dark:bg-orange-950/40 px-3 py-1.5 text-xs text-orange-600 dark:text-orange-400">
+                                    {ordersTranslations.itemStatus.needConfirmation}
+                                  </span>
+                                ) : undefined
+                              }
+                            />
+                          </MenuItemRenderer>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                <div className="flex justify-between items-center py-4 border-t border-border">
+                  <span className="text-sm font-medium">مجموع سفارش</span>
+                  <span className="text-sm font-bold ">{orderDetail.data.total.toLocaleString("fa-IR")} تومان</span>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="text-center text-muted-foreground py-12">اطلاعات سفارش یافت نشد</div>
+          )}
         </div>
-    );
+      </div>
+
+      <div className="p-4 border-t border-border bg-container">
+        <div className="max-w-2xl mx-auto grid grid-cols-2 gap-4">
+          <Button className="dark:bg-white dark:text-black! dark:hover:bg-gray-100" onClick={() => router.push(`/${name}`)} type="button">
+            بازگشت به منو
+          </Button>
+          <Button
+            type="submit"
+            onClick={toggleCancelModal}
+            className="bg-disabled! text-foreground!"
+            disabled={orderDetail?.data?.status === "cancelled" || orderDetail?.data?.status === "delivered" || orderDetail?.data?.status === "delivering"}
+          >
+            لغو سفارش
+          </Button>
+        </div>
+      </div>
+
+      <div className={clsx("fixed inset-0 z-1001", !cancelModal && "pointer-events-none")}>
+        <Prompt
+          title={"لغو سفارش"}
+          description={"آیا از درخواست خود اطمینان دارید؟"}
+          textConfirm={"بله"}
+          textCancel={"منصرف شدم"}
+          onConfirm={onCancelOrder}
+          visible={cancelModal}
+          onClick={toggleCancelModal}
+          onCancel={toggleCancelModal}
+        />
+      </div>
+    </div>
+  );
 }
 
-export default OrderTrackingPage;
+export default OrderTrackingPage;

src/components/listview/MenuItem.tsx

@@ -8,7 +8,7 @@ import { CartQuantityControl } from "@/components/CartQuantityControl";
 import { ArrowLeft } from "iconsax-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { memo, useMemo } from "react";
+import { memo, useMemo, type ReactNode } from "react";
 
 export type MenuItemViewMode = "list" | "grid";
 
@@ -20,9 +20,13 @@ interface MenuItemProps {
   variantValue?: string | null;
   /** حالت نمایش: list = یک ستونه (پیش‌فرض)، grid = دو ستونه */
   viewMode?: MenuItemViewMode;
+  /** فقط نمایش اطلاعات بدون دکمه‌های افزودن/جزئیات */
+  readOnly?: boolean;
+  /** برچسب اختیاری بالای آیتم */
+  badge?: ReactNode;
 }
 
-const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValueProp, viewMode = "list" }: MenuItemProps) => {
+const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValueProp, viewMode = "list", readOnly = false, badge }: MenuItemProps) => {
   const { items, addToCart, removeFromCart, isCartMutating } = useCart();
   const params = useParams<{ name: string }>();
   const name = params?.name || "";
@@ -146,50 +150,59 @@ const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValu
   }
 
   return (
-    <div className="flex gap-4 w-full min-h-28 items-stretch">
-      <Link href={productDetailUrl} className="cursor-pointer shrink-0 self-center">
-        <img className="rounded-xl bg-[#F2F2F9] min-w-28 w-28 aspect-square object-cover" src={resolvedImage} height={112} width={112} alt={productName} />
-      </Link>
-      <div className="flex-1 flex flex-col justify-between min-w-0">
-        <Link href={productDetailUrl} className="cursor-pointer min-w-0">
-          <div className="min-w-0">
-            <div className="flex items-center justify-between gap-2 min-w-0">
-              <div className="text-sm2 font-bold text-black dark:text-white wrap-break-word min-w-0">{productName}</div>
-              {variantValueDisplay && <span className="bg-primary text-primary-foreground text-[10px] px-1 py-0.5 rounded-md shrink-0">{variantValueDisplay}</span>}
+    <>
+      {badge && (
+        <div className="absolute top-3 left-3 z-10">
+          {badge}
+        </div>
+      )}
+      <div className="flex gap-4 w-full min-h-28 items-stretch">
+        <Link href={productDetailUrl} className="cursor-pointer shrink-0 self-center">
+          <img className="rounded-xl bg-[#F2F2F9] min-w-28 w-28 aspect-square object-cover" src={resolvedImage} height={112} width={112} alt={productName} />
+        </Link>
+        <div className="flex-1 flex flex-col justify-between min-w-0">
+          <Link href={productDetailUrl} className="cursor-pointer min-w-0">
+            <div className="min-w-0">
+              <div className="flex items-center justify-between gap-2 min-w-0">
+                <div className="text-sm2 font-bold text-black dark:text-white wrap-break-word min-w-0">{productName}</div>
+                {variantValueDisplay && <span className="bg-primary text-primary-foreground text-[10px] px-1 py-0.5 rounded-md shrink-0">{variantValueDisplay}</span>}
+              </div>
+              {(productContent || productDescription) && (
+                <div className="text-[#7F7F7F] line-clamp-2 text-xs leading-5 font-normal mt-4 wrap-break-word overflow-hidden">{productContent || productDescription}</div>
+              )}
             </div>
-            {(productContent || productDescription) && (
-              <div className="text-[#7F7F7F] line-clamp-2 text-xs leading-5 font-normal mt-4 wrap-break-word overflow-hidden">{productContent || productDescription}</div>
+          </Link>
+          <div className="flex flex-col gap-1 mt-2" dir="ltr">
+            {variablePriceLabel ? (
+              <span className="text-sm text-right">{variablePriceLabel}</span>
+            ) : hasDiscount ? (
+              <>
+                <span className="text-xs text-disabled-text line-through">{formattedOriginalPrice} T</span>
+                <span className="text-sm font-medium text-primary dark:text-foreground">{formattedPrice} T</span>
+              </>
+            ) : (
+              <span className="text-sm text-right">{formattedPrice} T</span>
             )}
           </div>
-        </Link>
-        <div className="flex flex-col gap-1 mt-2" dir="ltr">
-          {variablePriceLabel ? (
-            <span className="text-sm text-right">{variablePriceLabel}</span>
-          ) : hasDiscount ? (
-            <>
-              <span className="text-xs text-disabled-text line-through">{formattedOriginalPrice} T</span>
-              <span className="text-sm font-medium text-primary dark:text-foreground">{formattedPrice} T</span>
-            </>
-          ) : (
-            <span className="text-sm text-right">{formattedPrice} T</span>
-          )}
         </div>
-      </div>
-      <div className="flex flex-col justify-end shrink-0">
-        {showDetailsInsteadOfAdd ? (
-          <div className="w-[115px]">
-            <Link href={productDetailUrl} className={`${actionButtonClass} w-full`}>
-              <span className={actionButtonLabelClass}>جزئیات</span>
-              <ArrowLeft size={16} className="stroke-foreground" />
-            </Link>
-          </div>
-        ) : (
-          <div className="w-[115px]">
-            <CartQuantityControl quantity={quantity} onAdd={handleAddToCart} onRemove={handleRemoveFromCart} isMutating={isCartMutating} />
+        {!readOnly && (
+          <div className="flex flex-col justify-end shrink-0">
+            {showDetailsInsteadOfAdd ? (
+              <div className="w-[115px]">
+                <Link href={productDetailUrl} className={`${actionButtonClass} w-full`}>
+                  <span className={actionButtonLabelClass}>جزئیات</span>
+                  <ArrowLeft size={16} className="stroke-foreground" />
+                </Link>
+              </div>
+            ) : (
+              <div className="w-[115px]">
+                <CartQuantityControl quantity={quantity} onAdd={handleAddToCart} onRemove={handleRemoveFromCart} isMutating={isCartMutating} />
+              </div>
+            )}
           </div>
         )}
       </div>
-    </div>
+    </>
   );
 };
 

src/components/listview/MenuItemRenderer.tsx

@@ -15,7 +15,7 @@ function MenuItemRendererComponent({ children, variant = 'list', ...rest }: Prop
       className={`${rest.className} box-shadow-normal transition-all duration-200 ease-out w-full bg-container rounded-3xl ${
         isGrid
           ? 'p-3 flex flex-col'
-          : 'py-4 pb-4! px-4 flex items-stretch'
+          : 'relative py-4 pb-4! px-4 flex items-stretch overflow-visible'
       }`}
     >
       {children}

src/locales/fa/orders.json

@@ -19,6 +19,9 @@
     "Online": "پرداخت آنلاین",
     "Wallet": "پرداخت با کیف پول"
   },
+  "itemStatus": {
+    "needConfirmation": "در انتظار تایید قیمت نهایی"
+  },
   "status": {
     "new": "سفارش جدید",
     "needConfirmation": "نیاز به تایید فروشگاه",