add cart API's (add , delete , get)

components/productcard.tsx

@@ -5,13 +5,12 @@ import Image from "next/image";
 import Link from 'next/link';
 import { useCart } from "./context/cartcontext";
 import { Product } from "@/public/src/types/product";
-
+import { addToCartApi } from "@/public/src/services/cart/api";
 
 interface ProductCardProps {
     product: Product;
 }
 
-
 export default function ProductCard({ product }: ProductCardProps) {
     const { addToCart, decreaseQuantity, cart } = useCart();
 
@@ -19,17 +18,45 @@ export default function ProductCard({ product }: ProductCardProps) {
     const quantity = cartItem ? cartItem.quantity : 0;
     const slug = product.slug;
 
-
-    const handleIncrease = (e: React.MouseEvent) => {
+    const handleIncrease = async (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
+
+        // ۱. آپدیت آنی سبد خرید محلی (این کار باعث آپدیت درجا در UI می‌شود)
         addToCart(product);
+
+        // ۲. ارسال درخواست به سرور در پس‌زمینه
+        const token = localStorage.getItem('accessToken');
+        if (token) {
+            try {
+                await addToCartApi(product.id, 1);
+                // ارسال سیگنال به هدر (منو) برای دریافت اطلاعات جدید سرور بدون رفرش
+                window.dispatchEvent(new Event('cartUpdated'));
+            } catch (error) {
+                console.error("خطا در افزودن محصول به سبد خرید سرور:", error);
+            }
+        }
     };
 
-    const handleDecrease = (e: React.MouseEvent) => {
+    // --- هندلر کاهش / حذف از سبد خرید ---
+    const handleDecrease = async (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
+
         decreaseQuantity(product.id);
+
+        const token = localStorage.getItem('accessToken');
+        if (token) {
+            try {
+                // فرض بر این است که API مربوط به کاهش را در اینجا فراخوانی می‌کنید
+                // await decreaseFromCartApi(product.id);
+                
+                // پس از موفقیت‌آمیز بودن حذف/کاهش از سرور، دوباره سیگنال می‌دهیم
+                window.dispatchEvent(new Event('cartUpdated'));
+            } catch (error) {
+                console.error("خطا در کاهش محصول از سبد خرید سرور:", error);
+            }
+        }
     };
 
     const formattedPrice = product.price
@@ -37,7 +64,6 @@ export default function ProductCard({ product }: ProductCardProps) {
         : null;
 
 
-
     return (
         <Link href={`/product/${slug}`} scroll={true} className="bg-white gap-1 flex flex-col justify-between border border-gray-200 rounded-xl shadow-sm p-4 transition-all hover:shadow-md">
 
@@ -59,30 +85,21 @@ export default function ProductCard({ product }: ProductCardProps) {
             <p className="text-[#808080] text-sm">{product.brand}</p>
             <h3 className="text-sm font-semibold">{product.title}</h3>
             <div className="text-xs text-gray-500 mt-2">
-                {/* 
-                  ✅ این بخش را تغییر می‌دهیم تا نام attribute ها را بگیریم
-                  اگر attribute اول وجود داشت، نامش را بگیر و نمایش بده
-                  اگر attribute اول نبود، نمایش نده
-                */}
                 {product.attributes?.[0] && (
                     <div className="flex border-b border-[#dfdfdf] mb-2 pb-2 justify-between">
-                        <p className="text-[0.9em]">{product.attributes[0].name}:</p> {/* 👈 نام attribute اول */}
-                        <p dir="rtl" className="font-semibold text-left text-[0.8em] text-black">{product.attributes[0].valueText || "-"}</p> {/* 👈 مقدار attribute اول */}
+                        <p className="text-[0.9em]">{product.attributes[0].name}:</p>
+                        <p dir="rtl" className="font-semibold text-left text-[0.8em] text-black">{product.attributes[0].valueText || "-"}</p>
                     </div>
                 )}
 
-                {/* 
-                  ✅ مشابه بالا برای attribute دوم
-                */}
                 {product.attributes?.[1] && (
                     <div className="flex justify-between">
-                        <p className="text-[0.9em]">{product.attributes[1].name}:</p> {/* 👈 نام attribute دوم */}
-                        <p dir="rtl" className="font-semibold text-left text-[0.8em] text-black">{product.attributes[1].valueText || "-"}</p> {/* 👈 مقدار attribute دوم */}
+                        <p className="text-[0.9em]">{product.attributes[1].name}:</p>
+                        <p dir="rtl" className="font-semibold text-left text-[0.8em] text-black">{product.attributes[1].valueText || "-"}</p>
                     </div>
                 )}
             </div>
 
-
             {product.price ? (
                 <div className="flex justify-between mt-3 items-center min-h-[32px]">
                     <span className="text-[0.85em] font-bold text-gray-800">