payble fix with discount

src/components/listview/MenuItem.tsx

@@ -64,11 +64,30 @@ const MenuItem = ({ food }: MenuItemProps) => {
     return desc.replace(/,/g, '،');
   }, [food.description, food.desc]);
 
+  const finalPrice = useMemo(() => {
+    const basePrice = food.price || 0;
+    const discount = food.discount || 0;
+    if (discount > 0) {
+      return Math.max(0, basePrice - discount);
+    }
+    return basePrice;
+  }, [food.price, food.discount]);
+
   const formattedPrice = useMemo(
+    () => (finalPrice ? finalPrice.toLocaleString('fa-IR') : '0'),
+    [finalPrice]
+  );
+
+  const formattedOriginalPrice = useMemo(
     () => (food.price ? food.price.toLocaleString('fa-IR') : '0'),
     [food.price]
   );
 
+  const hasDiscount = useMemo(
+    () => (food.discount || 0) > 0,
+    [food.discount]
+  );
+
   const handleAddToCart = () => {
     addToCart(food.id);
   };
@@ -104,9 +123,22 @@ const MenuItem = ({ food }: MenuItemProps) => {
           </div>
         </Link>
         <div className="inline-flex mt-2 gap-2 justify-between w-full items-center">
-          <span className="w-full text-sm mt-1" dir="ltr">
-            {formattedPrice} T
-          </span>
+          <div className="w-full flex flex-col gap-1" dir="ltr">
+            {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 mt-1">
+                {formattedPrice} T
+              </span>
+            )}
+          </div>
           <motion.div
             whileTap={{ scale: 1.05 }}
             className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2 relative overflow-hidden"