first commit

features/cart/components/CartItemCard.tsx

@@ -0,0 +1,458 @@
+"use client";
+import { useState, useEffect, useRef, useCallback } from "react";
+import Image from "next/image";
+import { Minus, Plus, Trash2, AlertTriangle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useUpdateCartItemQuantity, useRemoveFromCart } from "@/lib/hooks";
+import { useTranslations } from "next-intl";
+import type { CartItem } from "@/lib/types/api";
+
+interface CartItemCardProps {
+  item: CartItem;
+  onUpdate?: () => void;
+}
+
+// Session Storage Key
+const PENDING_CART_UPDATES_KEY = "pendingCartUpdates";
+
+interface PendingUpdate {
+  quantity: number;
+  timestamp: number;
+  retryCount: number;
+}
+
+export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
+  const t = useTranslations();
+
+  // Local UI State (Instant feedback)
+  const [localQuantity, setLocalQuantity] = useState(item.quantity);
+
+  // Sync State
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [syncError, setSyncError] = useState(false);
+
+  // Stock limit modal
+  const [showStockModal, setShowStockModal] = useState(false);
+
+  // Refs
+  const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const isRequestInFlightRef = useRef(false);
+  const pendingQuantityRef = useRef<number | null>(null);
+  const retryCountRef = useRef(0);
+  const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+  // Function refs to solve circular dependency
+  const syncToServerRef = useRef<((quantity: number) => void) | null>(null);
+  const retrySyncRef = useRef<((quantity: number) => void) | null>(null);
+
+  const { mutate: updateQuantity } = useUpdateCartItemQuantity();
+  const { mutate: removeItem, isPending: isRemoving } = useRemoveFromCart();
+
+  // Get available stock
+  const availableStock = item.product.stock || 0;
+
+  // Initialize from server state
+  useEffect(() => {
+    setLocalQuantity(item.quantity);
+  }, [item.quantity]);
+
+  // Save to sessionStorage
+  const savePendingUpdate = useCallback(
+    (quantity: number) => {
+      try {
+        const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY);
+        const pending: Record<number, PendingUpdate> = stored
+          ? JSON.parse(stored)
+          : {};
+
+        pending[item.product_id] = {
+          quantity,
+          timestamp: Date.now(),
+          retryCount: retryCountRef.current,
+        };
+
+        sessionStorage.setItem(
+          PENDING_CART_UPDATES_KEY,
+          JSON.stringify(pending)
+        );
+      } catch (error) {
+        console.error("Failed to save pending update:", error);
+      }
+    },
+    [item.product_id]
+  );
+
+  // Remove from sessionStorage
+  const clearPendingUpdate = useCallback(() => {
+    try {
+      const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY);
+      if (stored) {
+        const pending: Record<number, PendingUpdate> = JSON.parse(stored);
+        delete pending[item.product_id];
+
+        if (Object.keys(pending).length === 0) {
+          sessionStorage.removeItem(PENDING_CART_UPDATES_KEY);
+        } else {
+          sessionStorage.setItem(
+            PENDING_CART_UPDATES_KEY,
+            JSON.stringify(pending)
+          );
+        }
+      }
+    } catch (error) {
+      console.error("Failed to clear pending update:", error);
+    }
+  }, [item.product_id]);
+
+  // Exponential backoff retry
+  const retrySync = useCallback((quantity: number) => {
+    const maxRetries = 4;
+    const retryCount = retryCountRef.current;
+
+    if (retryCount >= maxRetries) {
+      setSyncError(true);
+      setIsSyncing(false);
+      return;
+    }
+
+    const delay = Math.min(1000 * Math.pow(2, retryCount), 16000); // Max 16s
+    retryCountRef.current++;
+
+    retryTimerRef.current = setTimeout(() => {
+      syncToServerRef.current?.(quantity);
+    }, delay);
+  }, []);
+
+  // Update ref
+  retrySyncRef.current = retrySync;
+
+  // Sync to server
+  const syncToServer = useCallback(
+    (quantity: number) => {
+      // If already syncing, queue this update
+      if (isRequestInFlightRef.current) {
+        pendingQuantityRef.current = quantity;
+        return;
+      }
+
+      // Mark as syncing
+      isRequestInFlightRef.current = true;
+      setIsSyncing(true);
+      setSyncError(false);
+
+      if (quantity <= 0) {
+        removeItem(item.product_id, {
+          onSuccess: () => {
+            isRequestInFlightRef.current = false;
+            setIsSyncing(false);
+            retryCountRef.current = 0;
+            clearPendingUpdate();
+            onUpdate?.();
+
+            // Process queued update if any
+            if (pendingQuantityRef.current !== null) {
+              const nextQuantity = pendingQuantityRef.current;
+              pendingQuantityRef.current = null;
+              setTimeout(() => syncToServerRef.current?.(nextQuantity), 100);
+            }
+          },
+          onError: (error) => {
+            console.error("Remove failed:", error);
+            isRequestInFlightRef.current = false;
+            retrySyncRef.current?.(quantity);
+          },
+        });
+      } else {
+        updateQuantity(
+          { productId: item.product_id, quantity },
+          {
+            onSuccess: () => {
+              isRequestInFlightRef.current = false;
+              setIsSyncing(false);
+              retryCountRef.current = 0;
+              clearPendingUpdate();
+              onUpdate?.();
+
+              // Process queued update if any
+              if (pendingQuantityRef.current !== null) {
+                const nextQuantity = pendingQuantityRef.current;
+                pendingQuantityRef.current = null;
+                setTimeout(() => syncToServerRef.current?.(nextQuantity), 100);
+              }
+            },
+            onError: (error) => {
+              console.error("Update failed:", error);
+              isRequestInFlightRef.current = false;
+
+              // Rollback on error after retries exhausted
+              if (retryCountRef.current >= 3) {
+                setLocalQuantity(item.quantity);
+                clearPendingUpdate();
+              }
+
+              retrySyncRef.current?.(quantity);
+            },
+          }
+        );
+      }
+    },
+    [
+      item.product_id,
+      item.quantity,
+      updateQuantity,
+      removeItem,
+      onUpdate,
+      clearPendingUpdate,
+    ]
+  );
+
+  // Update ref
+  syncToServerRef.current = syncToServer;
+
+  // Load pending updates from sessionStorage on mount
+  useEffect(() => {
+    const loadPendingUpdates = () => {
+      try {
+        const stored = sessionStorage.getItem(PENDING_CART_UPDATES_KEY);
+        if (stored) {
+          const pending: Record<number, PendingUpdate> = JSON.parse(stored);
+          const productPending = pending[item.product_id];
+
+          if (productPending && productPending.quantity !== item.quantity) {
+            // Apply pending update
+            setLocalQuantity(productPending.quantity);
+            pendingQuantityRef.current = productPending.quantity;
+            retryCountRef.current = productPending.retryCount;
+
+            // Trigger sync after a short delay
+            setTimeout(
+              () => syncToServerRef.current?.(productPending.quantity),
+              500
+            );
+          }
+        }
+      } catch (error) {
+        console.error("Failed to load pending updates:", error);
+      }
+    };
+
+    loadPendingUpdates();
+  }, [item.product_id, item.quantity]);
+
+  // Debounced sync
+  useEffect(() => {
+    // Clear existing timers
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    // If local quantity matches server, no sync needed
+    if (localQuantity === item.quantity) {
+      return;
+    }
+
+    // Save to sessionStorage immediately
+    savePendingUpdate(localQuantity);
+
+    // Debounce the API call
+    debounceTimerRef.current = setTimeout(() => {
+      syncToServerRef.current?.(localQuantity);
+    }, 800);
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [localQuantity, item.quantity, savePendingUpdate]);
+
+  // Cleanup
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+    };
+  }, []);
+
+  const handleQuantityIncrease = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Check stock limit
+    if (localQuantity >= availableStock) {
+      setShowStockModal(true);
+      return;
+    }
+
+    // Optimistic update (instant UI feedback)
+    setLocalQuantity((prev) => prev + 1);
+  };
+
+  const handleQuantityDecrease = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (localQuantity <= 1) {
+      handleDelete();
+      return;
+    }
+
+    // Optimistic update (instant UI feedback)
+    setLocalQuantity((prev) => prev - 1);
+  };
+
+  const handleDelete = () => {
+    setLocalQuantity(0);
+    clearPendingUpdate();
+  };
+
+  const getImageSrc = () => {
+    if (item.product.image) return item.product.image;
+    if (item.product.images && item.product.images.length > 0)
+      return item.product.images[0];
+    return "/placeholder.svg";
+  };
+
+  return (
+    <>
+      <Card className="p-4 shadow-none border">
+        <div className="flex flex-col sm:flex-row gap-4">
+          <div className="flex gap-4 flex-1">
+            <div className="relative w-[88px] h-[117px] rounded-xl border overflow-hidden shrink-0">
+              <Image
+                src={getImageSrc()}
+                alt={item.product.name}
+                fill
+                className="object-contain"
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <h3 className="font-semibold text-base">{item.product.name}</h3>
+              <p className="text-sm text-gray-600">
+                {item.seller?.name || "Store"}
+              </p>
+              {availableStock <= 5 && (
+                <p className="text-xs text-orange-600 font-medium">
+                  {t("only_left", { count: availableStock })}
+                </p>
+              )}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleDelete}
+                disabled={isRemoving}
+                className="w-fit cursor-pointer p-0 h-auto hover:bg-transparent hover:text-red-500"
+              >
+                <Trash2 className="h-5 w-5" />
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 justify-between">
+            <div className="space-y-1">
+              <p className="text-sm font-semibold">
+                {t("unit_price")}{" "}
+                <span className="text-primary">{item.price_formatted}</span>
+              </p>
+
+              {item.discount_formatted &&
+                item.discount_formatted !== "0 TMT" && (
+                  <p className="text-sm font-semibold">
+                    {t("discount")} {item.discount_formatted}
+                  </p>
+                )}
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-semibold">
+                  {t("total_price")}
+                </span>
+                <span className="bg-green-500 text-white px-3 py-1 rounded-lg font-semibold text-base">
+                  {(
+                    parseFloat(item.product.price_amount || "0") * localQuantity
+                  ).toFixed(2)}{" "}
+                  TMT
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={handleQuantityDecrease}
+                className={` cursor-pointer rounded-lg bg-blue-50 ${
+                  isSyncing ? "opacity-70" : ""
+                }`}
+              >
+                <Minus className="h-4 w-4" />
+              </Button>
+
+              <div className="w-12 text-center font-semibold relative">
+                {localQuantity}
+                {syncError && (
+                  <span
+                    className="absolute -top-1 -right-3 h-2 w-2 bg-red-500 rounded-full"
+                    title="Sync error"
+                  />
+                )}
+              </div>
+
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={handleQuantityIncrease}
+                // disabled={localQuantity >= availableStock}
+                className={`rounded-lg cursor-pointer bg-blue-50 ${
+                  isSyncing ? "opacity-70" : ""
+                } ${
+                  localQuantity >= availableStock
+                    ? "opacity-50 cursor-not-allowed"
+                    : ""
+                }`}
+              >
+                <Plus className="h-4 w-4 text-[#007AFF]" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      {/* Stock Limit Modal */}
+      <Dialog open={showStockModal} onOpenChange={setShowStockModal}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <div className="flex items-center justify-center mb-4">
+              <div className="rounded-full bg-orange-100 p-3">
+                <AlertTriangle className="h-6 w-6 text-orange-600" />
+              </div>
+            </div>
+            <DialogTitle className="text-center text-xl">
+              {t("stock_limit_title")}
+            </DialogTitle>
+            <DialogDescription className="text-center text-base pt-2">
+              {t("stock_limit_message", {
+                product: item.product.name,
+                stock: availableStock,
+              })}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-center mt-4">
+            <Button
+              onClick={() => setShowStockModal(false)}
+              className="w-full rounded-lg cursor-pointer"
+            >
+              {t("understood")}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

features/cart/components/CartItemSkeleton.tsx

@@ -0,0 +1,36 @@
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function CartItemSkeleton() {
+  return (
+    <Card className="p-4 shadow-none border">
+      <div className="flex flex-col sm:flex-row gap-4">
+        <div className="flex gap-4 flex-1">
+          <Skeleton className="w-[88px] h-[117px] rounded-xl" />
+          <div className="flex flex-col gap-2 flex-1">
+            <Skeleton className="h-5 w-3/4" />
+            <Skeleton className="h-4 w-1/2" />
+            <Skeleton className="h-4 w-1/3" />
+            <Skeleton className="h-5 w-5 rounded" />
+          </div>
+        </div>
+
+        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 justify-between">
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-8 w-40 rounded-lg" />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-10 w-10 rounded-xl" />
+            <Skeleton className="h-6 w-12" />
+            <Skeleton className="h-10 w-10 rounded-xl" />
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+

features/cart/components/DeliveryTypeSelector.tsx

@@ -0,0 +1,58 @@
+"use client"
+import { Truck, Warehouse } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { useTranslations } from "next-intl"
+import type { DeliveryType } from "@/lib/types/api"
+
+interface DeliveryTypeSelectorProps {
+  selectedType: DeliveryType
+  onSelect: (type: DeliveryType) => void
+}
+
+export default function DeliveryTypeSelector({
+  selectedType,
+  onSelect,
+}: DeliveryTypeSelectorProps) {
+  const t = useTranslations()
+  
+  const deliveryOptions: {
+    type: DeliveryType
+    label: string
+    icon: typeof Truck
+  }[] = [
+    { type: "SELECTED_DELIVERY", label: t("delivery"), icon: Truck },
+    { type: "PICK_UP", label: t("pickup"), icon: Warehouse },
+  ]
+
+  return (
+    <div className="mb-6">
+      <h3 className="text-lg font-semibold mb-3">{t("delivery_type")}</h3>
+      <div className="flex gap-2">
+        {deliveryOptions.map(({ type, label, icon: Icon }) => (
+          <Card
+            key={type}
+            className={`flex-1 cursor-pointer transition-all hover:shadow-md ${
+              selectedType === type
+                ? "border-2 border-[#005bff] bg-blue-50"
+                : "border-2 border-gray-200"
+            }`}
+            onClick={() => onSelect(type)}
+          >
+            <div className="flex flex-col items-center justify-center p-4 gap-2">
+              <Icon
+                className={`h-8 w-8 ${
+                  selectedType === type ? "text-[#005bff]" : "text-gray-600"
+                }`}
+              />
+              <span className={`text-xs font-medium ${
+                selectedType === type ? "text-[#005bff]" : "text-gray-700"
+              }`}>
+                {label}
+              </span>
+            </div>
+          </Card>
+        ))}
+      </div>
+    </div>
+  )
+}

features/cart/components/EmptyCart.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@/components/ui/button";
+import { ShoppingCart } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+
+export default function EmptyCart() {
+  const t=useTranslations();
+  const router=useRouter();
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4">
+      <div className="w-full max-w-md rounded-2xl bg-linear-to-br from-blue-50 to-white p-8 text-center shadow-lg">
+        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
+          <ShoppingCart className="h-10 w-10 text-blue-600" />
+        </div>
+
+        <h2 className="mb-2 text-2xl font-semibold text-gray-900">
+          {t("cart_empty")}
+        </h2>
+
+        <p className="mb-6 text-sm text-gray-500">
+          {t("cart_empty_message")}
+        </p>
+
+        <Button onClick={()=>router.push("/")} className="w-full cursor-pointer rounded-xl bg-blue-600 px-6 py-3 text-sm font-medium text-white transition hover:bg-blue-700 active:scale-95">
+          {t("start_shopping")}
+        </Button>
+      </div>
+    </div>
+  );
+}

features/cart/components/OrderSummary.tsx

@@ -0,0 +1,348 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Textarea } from "@/components/ui/textarea";
+import { Separator } from "@/components/ui/separator";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import DeliveryTypeSelector from "./DeliveryTypeSelector";
+import { useTranslations } from "next-intl";
+import type { DeliveryType, PaymentType, Province } from "@/lib/types/api";
+import { useState } from "react";
+
+interface OrderBillingItem {
+  title: string;
+  value: string;
+}
+
+interface OrderBilling {
+  body: OrderBillingItem[];
+  footer: {
+    title: string;
+    value: string;
+  };
+}
+
+interface OrderSummaryProps {
+  order: {
+    id: number;
+    billing: OrderBilling;
+  };
+  paymentType: PaymentType | null;
+  deliveryType: DeliveryType;
+  selectedRegion: string;
+  selectedProvince: number | null;
+  note: string;
+  regionGroups: Record<string, Province[]>;
+  availableRegions: string[];
+  paymentTypes: PaymentType[];
+  phone: string;
+  name: string;
+  lastName: string;
+  onPhoneChange: (phone: string) => void;
+  onNameChange: (name: string) => void;
+  onLastNameChange: (lastName: string) => void;
+  onPaymentTypeChange: (type: PaymentType) => void;
+  onDeliveryTypeChange: (type: DeliveryType) => void;
+  onRegionChange: (regionCode: string) => void;
+  onProvinceChange: (provinceId: number) => void;
+  onNoteChange: (note: string) => void;
+  onCompleteOrder: () => void;
+  isLoading: boolean;
+}
+
+export default function OrderSummary({
+  order,
+  paymentType,
+  deliveryType,
+  selectedRegion,
+  selectedProvince,
+  note,
+  regionGroups,
+  availableRegions,
+  paymentTypes,
+  phone,
+  name,
+  lastName,
+  onPhoneChange,
+  onNameChange,
+  onLastNameChange,
+  onPaymentTypeChange,
+  onDeliveryTypeChange,
+  onRegionChange,
+  onProvinceChange,
+  onNoteChange,
+  onCompleteOrder,
+  isLoading,
+}: OrderSummaryProps) {
+  const t = useTranslations();
+  const [showValidation, setShowValidation] = useState(false);
+
+  const provincesForSelectedRegion = selectedRegion
+    ? regionGroups[selectedRegion] || []
+    : [];
+
+  const phoneDigits = phone.replace(/\D/g, "");
+  const isPhoneValid = phoneDigits.length === 11;
+
+  const isFormValid =
+    selectedRegion &&
+    selectedProvince &&
+    paymentType &&
+    isPhoneValid &&
+    name.trim() !== "" &&
+    lastName.trim() !== "";
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const input = e.target.value;
+    const prefix = "+993 ";
+
+    if (input.length < prefix.length) {
+      onPhoneChange(prefix);
+      return;
+    }
+
+    const digitsOnly = input.substring(prefix.length).replace(/\D/g, "");
+
+    const limitedDigits = digitsOnly.substring(0, 8);
+
+    let formattedPhone = prefix;
+    if (limitedDigits.length > 0) {
+      formattedPhone += limitedDigits.substring(0, 2);
+
+      if (limitedDigits.length > 2) {
+        formattedPhone += " " + limitedDigits.substring(2);
+      }
+    }
+
+    onPhoneChange(formattedPhone);
+  };
+
+  const handleCompleteOrderClick = () => {
+    setShowValidation(true);
+    if (isFormValid) {
+      onCompleteOrder();
+    }
+  };
+
+  return (
+    <Card className="w-full md:w-[380px] p-4 md:p-6 rounded-xl h-fit sticky top-20">
+      {/* Customer Information */}
+      <div className="mb-6">
+        <h3 className="text-lg font-semibold mb-3">
+          {t("customer_information")}
+        </h3>
+        <div className="space-y-5">
+          <div>
+            <Label className="text-sm font-medium mb-2 block">
+              {t("name")}
+            </Label>
+            <Input
+              type="text"
+              value={name}
+              onChange={(e) => onNameChange(e.target.value)}
+              placeholder={t("name")}
+              className={`rounded-lg ${
+                showValidation && name.trim() === "" ? "border-red-500" : ""
+              }`}
+            />
+            {showValidation && name.trim() === "" && (
+              <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
+            )}
+          </div>
+          <div>
+            <Label className="text-sm font-medium mb-2 block">
+              {t("last_name")}
+            </Label>
+            <Input
+              type="text"
+              value={lastName}
+              onChange={(e) => onLastNameChange(e.target.value)}
+              placeholder={t("last_name")}
+              className={`rounded-lg ${
+                showValidation && lastName.trim() === "" ? "border-red-500" : ""
+              }`}
+            />
+            {showValidation && lastName.trim() === "" && (
+              <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
+            )}
+          </div>
+          <div>
+            <Label className="text-sm font-medium mb-2 block">
+              {t("phone")}
+            </Label>
+            <Input
+              type="tel"
+              value={phone}
+              onChange={handlePhoneChange}
+              placeholder="+993 61 097651"
+              className={`rounded-lg ${
+                showValidation && !isPhoneValid ? "border-red-500" : ""
+              }`}
+            />
+            {showValidation && !isPhoneValid && (
+              <p className="text-xs text-red-500 mt-1">
+                {t("requiredField")}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Payment Type */}
+      <div className="mb-6">
+        <h3 className="text-lg font-semibold mb-3">{t("payment_type")}</h3>
+        <div className="flex gap-2">
+          {paymentTypes.map((type) => (
+            <Card
+              key={type.id}
+              className={`flex-1 cursor-pointer transition-all ${
+                paymentType?.id === type.id
+                  ? "border-2 border-[#005bff] bg-blue-50"
+                  : showValidation && !paymentType
+                  ? "border-2 border-red-500"
+                  : "border-2 border-gray-200"
+              }`}
+              onClick={() => onPaymentTypeChange(type)}
+            >
+              <div className="flex flex-col items-center justify-center p-4 gap-2">
+                <span
+                  className={`text-xs font-medium ${
+                    paymentType?.id === type.id ? "text-[#005bff]" : ""
+                  }`}
+                >
+                  {type.name}
+                </span>
+              </div>
+            </Card>
+          ))}
+        </div>
+        {showValidation && !paymentType && (
+          <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
+        )}
+      </div>
+
+      {/* Region Selection */}
+      <div className="mb-6">
+        <Label className="text-lg font-semibold mb-3 block">
+          {t("choose_region")}
+        </Label>
+        <RadioGroup
+          value={selectedRegion}
+          onValueChange={(value) => {
+            onRegionChange(value);
+            onProvinceChange(null as any);
+          }}
+          className="flex flex-wrap gap-4"
+        >
+          {availableRegions.map((regionCode) => (
+            <div key={regionCode} className="flex items-center space-x-2">
+              <RadioGroupItem
+                value={regionCode}
+                id={`region-${regionCode}`}
+                className={`border-2 ${
+                  showValidation && !selectedRegion
+                    ? "border-red-500"
+                    : "border-gray-400"
+                } data-[state=checked]:border-[#005bff] data-[state=checked]:bg-white`}
+              />
+              <Label
+                htmlFor={`region-${regionCode}`}
+                className="cursor-pointer uppercase"
+              >
+                {regionCode}
+              </Label>
+            </div>
+          ))}
+        </RadioGroup>
+        {showValidation && !selectedRegion && (
+          <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
+        )}
+      </div>
+
+      {/* Province Selection */}
+      {selectedRegion && provincesForSelectedRegion.length > 0 && (
+        <div className="mb-6">
+          <Label className="text-lg font-semibold mb-3 block">
+            {t("choose_address")}
+          </Label>
+          <Select
+            value={selectedProvince?.toString() || ""}
+            onValueChange={(value) => onProvinceChange(parseInt(value))}
+          >
+            <SelectTrigger
+              className={`rounded-lg w-full ${
+                showValidation && !selectedProvince ? "border-red-500" : ""
+              }`}
+            >
+              <SelectValue placeholder={t("choose_address")} />
+            </SelectTrigger>
+            <SelectContent>
+              {provincesForSelectedRegion.map((province) => (
+                <SelectItem key={province.id} value={province.id.toString()}>
+                  {province.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {showValidation && !selectedProvince && (
+            <p className="text-xs text-red-500 mt-1">{t("requiredField")}</p>
+          )}
+        </div>
+      )}
+
+      {/* Note */}
+      <div className="mb-6">
+        <Label className="text-lg font-semibold mb-3 block">{t("note")}</Label>
+        <Textarea
+          value={note}
+          onChange={(e) => onNoteChange(e.target.value)}
+          className="rounded-xl resize-none"
+          rows={3}
+          placeholder={t("note")}
+        />
+      </div>
+
+      {/* Billing */}
+      <div className="space-y-2 mb-4">
+        {order.billing.body.map((item, index) => (
+          <div
+            key={index}
+            className="flex justify-between text-base font-medium"
+          >
+            <span>{item.title}:</span>
+            <span>{item.value}</span>
+          </div>
+        ))}
+      </div>
+
+      <Separator className="my-4" />
+
+      <div className="flex justify-between items-center mb-6">
+        <span className="text-lg font-semibold">
+          {order.billing.footer.title}:
+        </span>
+        <span className="text-lg font-bold text-green-600">
+          {order.billing.footer.value}
+        </span>
+      </div>
+
+      <Button
+        onClick={handleCompleteOrderClick}
+        disabled={isLoading}
+        className="w-full rounded-lg cursor-pointer bg-[#005bff] hover:bg-[#004dcc] h-12 text-lg font-bold disabled:opacity-50"
+        size="lg"
+      >
+        {isLoading ? `${t("order")}...` : t("order")}
+      </Button>
+    </Card>
+  );
+}

features/cart/components/OrderSummarySkeleton.tsx

@@ -0,0 +1,81 @@
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Separator } from "@/components/ui/separator";
+
+export default function OrderSummarySkeleton() {
+  return (
+    <Card className="w-full md:w-[380px] p-4 md:p-6 rounded-xl h-fit sticky top-20">
+      {/* Customer Information */}
+      <div className="mb-6">
+        <Skeleton className="h-6 w-48 mb-3" />
+        <div className="space-y-4">
+          <div>
+            <Skeleton className="h-4 w-20 mb-2" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+          <div>
+            <Skeleton className="h-4 w-24 mb-2" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+          <div>
+            <Skeleton className="h-4 w-16 mb-2" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+        </div>
+      </div>
+
+      {/* Payment Type */}
+      <div className="mb-6">
+        <Skeleton className="h-6 w-32 mb-3" />
+        <div className="flex gap-2">
+          <Skeleton className="flex-1 h-20 rounded-lg" />
+          <Skeleton className="flex-1 h-20 rounded-lg" />
+        </div>
+      </div>
+
+      {/* Region Selection */}
+      <div className="mb-6">
+        <Skeleton className="h-6 w-36 mb-3" />
+        <div className="flex flex-wrap gap-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-2">
+              <Skeleton className="h-4 w-4 rounded-full" />
+              <Skeleton className="h-4 w-16" />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Province Selection */}
+      <div className="mb-6">
+        <Skeleton className="h-6 w-40 mb-3" />
+        <Skeleton className="h-10 w-full rounded-lg" />
+      </div>
+
+      {/* Note */}
+      <div className="mb-6">
+        <Skeleton className="h-6 w-24 mb-3" />
+        <Skeleton className="h-24 w-full rounded-xl" />
+      </div>
+
+      {/* Billing */}
+      <div className="space-y-2 mb-4">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="flex justify-between">
+            <Skeleton className="h-5 w-24" />
+            <Skeleton className="h-5 w-20" />
+          </div>
+        ))}
+      </div>
+
+      <Separator className="my-4" />
+
+      <div className="flex justify-between items-center mb-6">
+        <Skeleton className="h-6 w-32" />
+        <Skeleton className="h-6 w-28" />
+      </div>
+
+      <Skeleton className="h-12 w-full rounded-lg" />
+    </Card>
+  );
+}

features/cart/hooks/useAddresses.ts

@@ -0,0 +1,25 @@
+import { useQuery } from "@tanstack/react-query"
+import { apiClient } from "@/lib/api"
+
+interface Province {
+  id: number
+  region: string
+  name: string
+}
+
+interface ProvincesResponse {
+  message: string
+  data: Province[]
+}
+
+export function useRegions() {
+  return useQuery({
+    queryKey: ["regions"],
+    queryFn: async () => {
+      const response = await apiClient.get<ProvincesResponse>("/provinces")
+      return response.data.data
+    },
+    staleTime: 1000 * 60 * 60, // 1 hour
+  })
+}
+

features/cart/hooks/useCart.ts

@@ -0,0 +1,508 @@
+import {
+  useQuery,
+  useMutation,
+  useQueryClient,
+  UseQueryOptions,
+} from "@tanstack/react-query";
+import { apiClient } from "@/lib/api";
+import type { CartItem } from "@/lib/types/api";
+import { useEffect } from "react";
+
+interface CartResponse {
+  message: string;
+  data: CartItem[];
+  errorDetails?: string;
+}
+
+const pendingUpdates = new Map<number, number>();
+let updateLock = false;
+
+class CartEventEmitter {
+  private listeners: Set<() => void> = new Set();
+
+  subscribe(callback: () => void) {
+    this.listeners.add(callback);
+    return () => {
+      this.listeners.delete(callback);
+    };
+  }
+
+  emit() {
+    this.listeners.forEach((cb) => cb());
+  }
+}
+
+export const cartEvents = new CartEventEmitter();
+
+function transformCartResponse(response: any): CartResponse {
+  if (
+    typeof response === "string" &&
+    (response.trim().startsWith("<!DOCTYPE") ||
+      response.trim().startsWith("<html"))
+  ) {
+    return {
+      message: "error",
+      data: [],
+      errorDetails: "Server returned HTML instead of JSON.",
+    };
+  }
+
+  if (typeof response === "object") {
+    if (response.data) return response;
+    return { message: "success", data: [] };
+  }
+
+  if (typeof response === "string") {
+    try {
+      return JSON.parse(response);
+    } catch {
+      return { message: "error", data: [] };
+    }
+  }
+
+  return { message: "unknown", data: [] };
+}
+
+export function useCart(options?: Partial<UseQueryOptions<CartResponse>>) {
+  const queryClient = useQueryClient();
+
+  const query = useQuery({
+    queryKey: ["cart"],
+    queryFn: async () => {
+      const response = await apiClient.get("/carts");
+      const transformed = transformCartResponse(response.data);
+      return transformed;
+    },
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: true,
+    staleTime: Infinity,
+    gcTime: 1000 * 60 * 5,
+    retry: 2,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+    ...options,
+  });
+
+  useEffect(() => {
+    const unsubscribe = cartEvents.subscribe(() => {
+      queryClient.invalidateQueries({
+        queryKey: ["cart"],
+        refetchType: "none",
+      });
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [queryClient]);
+
+  return query;
+}
+
+export function useAddToCart() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      productId,
+      quantity = 1,
+    }: {
+      productId: number;
+      quantity?: number;
+    }) => {
+      const params = new URLSearchParams({
+        product_id: String(productId),
+        product_quantity: String(quantity),
+      });
+
+      const response = await apiClient.post("/carts", params.toString(), {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+      });
+
+      if (typeof response.data === "object" && response.data.data) {
+        return response.data;
+      }
+
+      if (typeof response.data === "string") {
+        try {
+          return JSON.parse(response.data);
+        } catch {
+          return { message: "success", data: "Added to cart" };
+        }
+      }
+
+      return { message: "success", data: "Added to cart" };
+    },
+    onMutate: async ({ productId, quantity }) => {
+      while (updateLock) {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      }
+      updateLock = true;
+
+      await queryClient.cancelQueries({ queryKey: ["cart"] });
+
+      const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
+
+      queryClient.setQueryData<CartResponse>(["cart"], (old) => {
+        if (!old) return old;
+
+        let updated = { ...old, data: [...old.data] };
+
+        pendingUpdates.forEach((pendingQty, pendingId) => {
+          const idx = updated.data.findIndex(
+            (item: any) => item.product?.id === pendingId
+          );
+          if (idx !== -1) {
+            updated.data[idx] = {
+              ...updated.data[idx],
+              product_quantity: pendingQty,
+            };
+          }
+        });
+
+        const existingItem = updated.data.find(
+          (item: any) => item.product?.id === productId
+        );
+
+        if (existingItem) {
+          updated.data = updated.data.map((item: any) =>
+            item.product?.id === productId
+              ? {
+                  ...item,
+                  product_quantity: item.product_quantity + quantity,
+                }
+              : item
+          );
+        } else {
+          updated.data = [
+            ...updated.data,
+            {
+              product: { id: productId },
+              product_quantity: quantity,
+            } as any,
+          ];
+        }
+
+        const finalItem = updated.data.find(
+          (item: any) => item.product?.id === productId
+        );
+        if (finalItem) {
+          pendingUpdates.set(productId, finalItem.product_quantity);
+        }
+
+        return updated;
+      });
+
+      cartEvents.emit();
+      updateLock = false;
+
+      return { previousCart };
+    },
+    onError: (error, variables, context) => {
+      if (context?.previousCart) {
+        queryClient.setQueryData(["cart"], context.previousCart);
+        pendingUpdates.delete(variables.productId);
+        cartEvents.emit();
+      }
+    },
+    onSuccess: (data, variables) => {
+      pendingUpdates.delete(variables.productId);
+      queryClient.invalidateQueries({
+        queryKey: ["cart"],
+        refetchType: "active",
+      });
+    },
+  });
+}
+
+export function useRemoveFromCart() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (productId: number) => {
+      const params = new URLSearchParams({ product_id: String(productId) });
+
+      const response = await apiClient.patch("/carts", params.toString(), {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+      });
+
+      if (typeof response.data === "object" && response.data.data) {
+        return response.data.data;
+      }
+
+      if (typeof response.data === "string") {
+        try {
+          const parsed = JSON.parse(response.data);
+          return parsed.data || [];
+        } catch {
+          return [];
+        }
+      }
+
+      return [];
+    },
+    onMutate: async (productId) => {
+      while (updateLock) {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      }
+      updateLock = true;
+
+      await queryClient.cancelQueries({ queryKey: ["cart"] });
+
+      const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
+
+      queryClient.setQueryData<CartResponse>(["cart"], (old) => {
+        if (!old) return old;
+
+        let updated = { ...old, data: [...old.data] };
+        pendingUpdates.forEach((pendingQty, pendingId) => {
+          if (pendingId !== productId) {
+            const idx = updated.data.findIndex(
+              (item: any) => item.product?.id === pendingId
+            );
+            if (idx !== -1) {
+              updated.data[idx] = {
+                ...updated.data[idx],
+                product_quantity: pendingQty,
+              };
+            }
+          }
+        });
+
+        updated.data = updated.data.filter(
+          (item: any) => item.product?.id !== productId
+        );
+
+        pendingUpdates.delete(productId);
+        return updated;
+      });
+
+      cartEvents.emit();
+      updateLock = false;
+
+      return { previousCart };
+    },
+    onError: (error, variables, context) => {
+      if (context?.previousCart) {
+        queryClient.setQueryData(["cart"], context.previousCart);
+        cartEvents.emit();
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["cart"],
+        refetchType: "active",
+      });
+    },
+  });
+}
+
+export function useCleanCart() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      const response = await apiClient.delete("/carts", {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+      });
+
+      if (typeof response.data === "object" && response.data.data) {
+        return response.data.data;
+      }
+
+      if (typeof response.data === "string") {
+        try {
+          const parsed = JSON.parse(response.data);
+          return parsed.data || [];
+        } catch {
+          return [];
+        }
+      }
+
+      return [];
+    },
+    onMutate: async () => {
+      while (updateLock) {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      }
+      updateLock = true;
+
+      await queryClient.cancelQueries({ queryKey: ["cart"] });
+
+      const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
+
+      queryClient.setQueryData<CartResponse>(["cart"], (old) => {
+        if (!old) return old;
+        pendingUpdates.clear();
+        return { ...old, data: [] };
+      });
+
+      cartEvents.emit();
+      updateLock = false;
+
+      return { previousCart };
+    },
+    onError: (error, variables, context) => {
+      if (context?.previousCart) {
+        queryClient.setQueryData(["cart"], context.previousCart);
+        cartEvents.emit();
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["cart"] });
+    },
+  });
+}
+
+export function useUpdateCartItemQuantity() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      productId,
+      quantity,
+    }: {
+      productId: number;
+      quantity: number;
+    }) => {
+      const params = new URLSearchParams({
+        product_id: String(productId),
+        product_quantity: String(quantity),
+      });
+
+      const response = await apiClient.post("/carts", params.toString(), {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        timeout: 15000,
+      });
+
+      if (typeof response.data === "object" && response.data.data) {
+        return response.data;
+      }
+
+      if (typeof response.data === "string") {
+        try {
+          return JSON.parse(response.data);
+        } catch {
+          return { message: "success", data: "Updated cart" };
+        }
+      }
+
+      return { message: "success", data: "Updated cart" };
+    },
+    onMutate: async ({ productId, quantity }) => {
+      while (updateLock) {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      }
+      updateLock = true;
+
+      await queryClient.cancelQueries({ queryKey: ["cart"] });
+
+      const previousCart = queryClient.getQueryData<CartResponse>(["cart"]);
+
+      queryClient.setQueryData<CartResponse>(["cart"], (old) => {
+        if (!old) return old;
+
+        let updated = { ...old, data: [...old.data] };
+
+        pendingUpdates.forEach((pendingQty, pendingId) => {
+          const idx = updated.data.findIndex(
+            (item: any) => item.product?.id === pendingId
+          );
+          if (idx !== -1) {
+            updated.data[idx] = {
+              ...updated.data[idx],
+              product_quantity: pendingQty,
+            };
+          }
+        });
+
+        updated.data = updated.data.map((item: any) =>
+          item.product?.id === productId
+            ? { ...item, product_quantity: quantity }
+            : item
+        );
+
+        pendingUpdates.set(productId, quantity);
+
+        return updated;
+      });
+
+      cartEvents.emit();
+      updateLock = false;
+
+      return { previousCart };
+    },
+    onError: (error, variables, context) => {
+      if (context?.previousCart) {
+        queryClient.setQueryData(["cart"], context.previousCart);
+        pendingUpdates.delete(variables.productId);
+        cartEvents.emit();
+      }
+      throw error;
+    },
+    onSuccess: (data, variables) => {
+      pendingUpdates.delete(variables.productId);
+      queryClient.invalidateQueries({
+        queryKey: ["cart"],
+        refetchType: "none",
+      });
+    },
+  });
+}
+
+export function useCreateOrder() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (payload: {
+      customer_name?: string;
+      customer_phone: number;
+      customer_address: string;
+      shipping_method: string;
+      payment_type_id: number;
+      delivery_time?: string;
+      delivery_at?: string;
+      region: string;
+      note?: string;
+    }) => {
+      const response = await apiClient.post("/orders", payload);
+      return response.data;
+    },
+    onSuccess: (data) => {
+      if (data && data.payment_url) {
+        window.open(data.payment_url, '_blank')?.focus();
+      }
+
+      pendingUpdates.clear();
+      queryClient.setQueryData<CartResponse>(["cart"], (old) => {
+        if (!old) return old;
+        return { ...old, data: [] };
+      });
+      cartEvents.emit();
+      queryClient.invalidateQueries({ queryKey: ["orders"] });
+    },
+    onError: (error: any) => {
+      console.error(
+        "Create order error:",
+        error.response?.data?.message || error.message
+      );
+    },
+  });
+}
+
+export function useCartCount() {
+  const { data } = useCart();
+  return (
+    data?.data?.reduce(
+      (sum: number, item: any) => sum + (item.product_quantity || 0),
+      0
+    ) || 0
+  );
+}

features/cart/hooks/usePaymentTypes.ts

@@ -0,0 +1,23 @@
+import { useQuery } from "@tanstack/react-query"
+import { apiClient } from "@/lib/api"
+
+interface PaymentType {
+  id: number
+  name: string
+}
+
+interface PaymentTypesResponse {
+  message: string
+  data: PaymentType[]
+}
+
+export function usePaymentTypes() {
+  return useQuery({
+    queryKey: ["paymentTypes"],
+    queryFn: async () => {
+      const response = await apiClient.get<PaymentTypesResponse>("/order-payments")
+      return response.data.data
+    },
+    staleTime: 1000 * 60 * 60, // 1 hour
+  })
+}

features/category/components/CategoryFilters.tsx

@@ -0,0 +1,234 @@
+import { useCallback } from "react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+import type { FilterBrand, FilterCategory } from "@/lib/types/api";
+
+interface FiltersData {
+  categories: FilterCategory[];
+  brands: FilterBrand[];
+}
+
+interface CategoryFiltersProps {
+  filtersData: FiltersData | undefined;
+  selectedBrands: Set<number>;
+  selectedFilterCategories: Set<number>;
+  priceSort: "none" | "lowToHigh" | "highToLow";
+  priceRange: [number, number];
+  onBrandToggle: (brandId: number) => void;
+  onCategoryToggle: (categoryId: number) => void;
+  onPriceSortChange: (sortType: "none" | "lowToHigh" | "highToLow") => void;
+  onPriceChange: (values: number[]) => void;
+  onReset: () => void;
+  translations: {
+    category: string;
+    brands: string;
+    sort: string;
+    default: string;
+    price_low_to_high: string;
+    price_high_to_low: string;
+    price: string;
+    price_from: string;
+    price_to: string;
+    reset: string;
+  };
+}
+
+export default function CategoryFilters({
+  filtersData,
+  selectedBrands,
+  selectedFilterCategories,
+  priceSort,
+  priceRange,
+  onBrandToggle,
+  onCategoryToggle,
+  onPriceSortChange,
+  onPriceChange,
+  onReset,
+  translations,
+}: CategoryFiltersProps) {
+  return (
+    <div className="space-y-6 mb-6">
+      {filtersData?.categories && filtersData.categories.length > 0 && (
+        <FilterSection title={translations.category}>
+          {filtersData.categories.map((category) => (
+            <CheckboxItem
+              key={category.id}
+              checked={selectedFilterCategories.has(category.id)}
+              onCheckedChange={() => onCategoryToggle(category.id)}
+              label={category.name}
+            />
+          ))}
+        </FilterSection>
+      )}
+
+      {filtersData?.brands && filtersData.brands.length > 0 && (
+        <FilterSection title={translations.brands}>
+          {filtersData.brands.map((brand) => (
+            <CheckboxItem
+              key={brand.id}
+              checked={selectedBrands.has(brand.id)}
+              onCheckedChange={() => onBrandToggle(brand.id)}
+              label={brand.name}
+            />
+          ))}
+        </FilterSection>
+      )}
+
+      {/* <FilterSection title={translations.sort}>
+        <RadioItem
+          name="sort"
+          checked={priceSort === "none"}
+          onChange={() => onPriceSortChange("none")}
+          label={translations.default}
+        />
+        <RadioItem
+          name="sort"
+          checked={priceSort === "lowToHigh"}
+          onChange={() => onPriceSortChange("lowToHigh")}
+          label={translations.price_low_to_high}
+        />
+        <RadioItem
+          name="sort"
+          checked={priceSort === "highToLow"}
+          onChange={() => onPriceSortChange("highToLow")}
+          label={translations.price_high_to_low}
+        />
+      </FilterSection> */}
+
+      <PriceFilter
+        title={translations.price}
+        priceRange={priceRange}
+        onPriceChange={onPriceChange}
+        translations={{
+          from: translations.price_from,
+          to: translations.price_to,
+        }}
+      />
+
+      <Button variant="outline" className="w-full rounded-lg cursor-pointer mb-6" onClick={onReset}>
+        {translations.reset}
+      </Button>
+    </div>
+  );
+}
+
+function FilterSection({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <h3 className="text-lg font-semibold mb-3">{title}</h3>
+      <div className="space-y-2">{children}</div>
+    </div>
+  );
+}
+
+function CheckboxItem({
+  checked,
+  onCheckedChange,
+  label,
+}: {
+  checked: boolean;
+  onCheckedChange: () => void;
+  label: string;
+}) {
+  return (
+    <label className="flex items-center gap-2 cursor-pointer">
+      <Checkbox checked={checked} onCheckedChange={onCheckedChange} />
+      <span className="text-sm">{label}</span>
+    </label>
+  );
+}
+
+function RadioItem({
+  name,
+  checked,
+  onChange,
+  label,
+}: {
+  name: string;
+  checked: boolean;
+  onChange: () => void;
+  label: string;
+}) {
+  return (
+    <label className="flex items-center gap-2 cursor-pointer">
+      <input
+        type="radio"
+        name={name}
+        checked={checked}
+        onChange={onChange}
+        className="w-4 h-4"
+      />
+      <span>{label}</span>
+    </label>
+  );
+}
+
+function PriceFilter({
+  title,
+  priceRange,
+  onPriceChange,
+  translations,
+}: {
+  title: string;
+  priceRange: [number, number];
+  onPriceChange: (values: number[]) => void;
+  translations: { from: string; to: string };
+}) {
+  return (
+    <div>
+      <h3 className="text-lg font-semibold mb-3">{title}</h3>
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          <div className="flex-1">
+            <Label htmlFor="price-from" className="text-xs mb-1">
+              {translations.from}
+            </Label>
+            <Input
+              id="price-from"
+              type="number"
+              value={priceRange[0]}
+              onChange={(e) =>
+                onPriceChange([parseInt(e.target.value) || 0, priceRange[1]])
+              }
+              className="rounded-lg"
+            />
+          </div>
+          <div className="flex-1">
+            <Label htmlFor="price-to" className="text-xs mb-1">
+              {translations.to}
+            </Label>
+            <Input
+              id="price-to"
+              type="number"
+              value={priceRange[1]}
+              onChange={(e) =>
+                onPriceChange([
+                  priceRange[0],
+                  parseInt(e.target.value) || 10000,
+                ])
+              }
+              className="rounded-lg"
+            />
+          </div>
+        </div>
+        <Slider
+          min={0}
+          max={99999}
+          step={100}
+          value={priceRange}
+          onValueChange={onPriceChange}
+          className="mt-2"
+        />
+      </div>
+    </div>
+  );
+}

features/category/components/CategoryFiltersSheet.tsx

@@ -0,0 +1,55 @@
+import { SlidersHorizontal, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface CategoryFiltersSheetProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  filterLabel: string;
+  closeLabel: string;
+  children: React.ReactNode;
+}
+
+export default function CategoryFiltersSheet({
+  isOpen,
+  onOpenChange,
+  filterLabel,
+  closeLabel,
+  children,
+}: CategoryFiltersSheetProps) {
+  return (
+    <Sheet open={isOpen} onOpenChange={onOpenChange}>
+      <SheetTrigger asChild>
+        <Button
+          className="bg-[#005bff] hover:bg-[#0041c4] sm:hidden fixed bottom-20 right-4 rounded-lg cursor-pointer font-bold gap-2 z-10 shadow-lg"
+          size="lg"
+        >
+          {filterLabel}
+          <SlidersHorizontal className="h-5 w-5" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="w-[290px] p-0">
+        <SheetHeader className="p-4 border-b">
+          <SheetTitle>{filterLabel}</SheetTitle>
+          <button
+            onClick={() => onOpenChange(false)}
+            className="absolute top-4 right-4 rounded-md cursor-pointer ring-offset-background transition-opacity hover:opacity-100"
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">{closeLabel}</span>
+          </button>
+        </SheetHeader>
+        <ScrollArea className="h-[calc(100vh-80px)] p-4">
+          {children}
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}

features/category/components/CategoryPageClient.tsx

@@ -0,0 +1,395 @@
+"use client";
+
+import { useEffect, useState, useMemo, useCallback } from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  useCategories,
+  useCategoryFilters,
+  useFilteredCategoryProducts,
+} from "@/features/category/hooks/useCategories";
+import { useTranslations } from "next-intl";
+import type { Category, Product } from "@/lib/types/api";
+import CategoryFilters from "./CategoryFilters";
+import CategoryProductsGrid from "./CategoryProductsGrid";
+import CategoryFiltersSheet from "./CategoryFiltersSheet";
+import ErrorPage from "@/components/ErrorPage";
+
+interface CategoryPageClientProps {
+  params: { locale: string; slug: string };
+}
+
+export default function CategoryPageClient({
+  params,
+}: CategoryPageClientProps) {
+  const { slug } = params;
+  const t = useTranslations();
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+
+  const { 
+    data: categoriesData, 
+    isLoading: categoriesLoading,
+    isError: categoriesError 
+  } = useCategories();
+
+  const selectedCategory = useMemo(() => {
+    if (!categoriesData || !slug) return null;
+
+    const findBySlug = (categories: Category[]): Category | null => {
+      for (const category of categories) {
+        if (category.slug === slug) return category;
+        if (category.children) {
+          const found = findBySlug(category.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+
+    return findBySlug(categoriesData);
+  }, [categoriesData, slug]);
+
+  // State management
+  const [currentPage, setCurrentPage] = useState(1);
+  const [allProducts, setAllProducts] = useState<Product[]>([]);
+  const [priceSort, setPriceSort] = useState<
+    "none" | "lowToHigh" | "highToLow"
+  >("none");
+  const [priceRange, setPriceRange] = useState<[number, number]>([0, 10000]);
+  const [selectedBrands, setSelectedBrands] = useState<Set<number>>(new Set());
+  const [selectedFilterCategories, setSelectedFilterCategories] = useState<
+    Set<number>
+  >(new Set());
+
+  // Fetch filters
+  const { 
+    data: filtersData,
+    isLoading: filtersLoading,
+    isError: filtersError 
+  } = useCategoryFilters(selectedCategory?.id, {
+    enabled: !!selectedCategory,
+  });
+
+  // Build filter params
+  const filterParams = useMemo(() => {
+    const params: any = {
+      page: currentPage,
+      limit: 6,
+    };
+
+    if (selectedBrands.size > 0) {
+      params.brands = Array.from(selectedBrands);
+    }
+
+    if (selectedFilterCategories.size > 0) {
+      params.categories = Array.from(selectedFilterCategories);
+    }
+
+    params.min_price = priceRange[0];
+    params.max_price = priceRange[1];
+
+    return params;
+  }, [currentPage, selectedBrands, selectedFilterCategories, priceRange]);
+
+  // Fetch filtered products
+  const { 
+    data: productsData, 
+    isFetching,
+    isError: productsError 
+  } = useFilteredCategoryProducts(
+    selectedCategory?.id?.toString() || "",
+    filterParams,
+    { enabled: !!selectedCategory }
+  );
+
+  // Reset on category change
+  useEffect(() => {
+    if (selectedCategory) {
+      setAllProducts([]);
+      setCurrentPage(1);
+      setSelectedBrands(new Set());
+      setSelectedFilterCategories(new Set());
+      setPriceRange([0, 10000]);
+      setPriceSort("none");
+    }
+  }, [selectedCategory?.id]);
+
+  // Update products list
+  useEffect(() => {
+    if (productsData?.data) {
+      setAllProducts((prev) => {
+        if (currentPage === 1) {
+          return productsData.data;
+        }
+
+        const existingIds = new Set(prev.map((p) => p.id));
+        const newProducts = productsData.data.filter(
+          (p: Product) => !existingIds.has(p.id)
+        );
+
+        if (newProducts.length === 0) {
+          return prev;
+        }
+
+        return [...prev, ...newProducts];
+      });
+    }
+  }, [productsData?.data, currentPage]);
+
+  const hasMore = useMemo(() => {
+    if (!productsData?.pagination) return false;
+
+    if (productsData.pagination.next_page_url) return true;
+
+    if (
+      productsData.pagination.current_page &&
+      productsData.pagination.last_page
+    ) {
+      return (
+        productsData.pagination.current_page < productsData.pagination.last_page
+      );
+    }
+
+    if (productsData.pagination.hasMorePages !== undefined) {
+      return productsData.pagination.hasMorePages;
+    }
+
+    return false;
+  }, [productsData?.pagination]);
+
+  const loadMoreData = useCallback(() => {
+    if (!hasMore || isFetching) return;
+    setCurrentPage((prev) => prev + 1);
+  }, [hasMore, isFetching]);
+
+  const sortedProducts = useMemo(() => {
+    const products = [...allProducts];
+    if (priceSort === "lowToHigh") {
+      return products.sort(
+        (a, b) =>
+          parseFloat(a.price_amount || "0") - parseFloat(b.price_amount || "0")
+      );
+    }
+    if (priceSort === "highToLow") {
+      return products.sort(
+        (a, b) =>
+          parseFloat(b.price_amount || "0") - parseFloat(a.price_amount || "0")
+      );
+    }
+    return products;
+  }, [allProducts, priceSort]);
+
+  // Filter handlers
+  const handleBrandToggle = useCallback((brandId: number) => {
+    setSelectedBrands((prev) => {
+      const newSet = new Set(prev);
+      newSet.has(brandId) ? newSet.delete(brandId) : newSet.add(brandId);
+      return newSet;
+    });
+    setCurrentPage(1);
+    setAllProducts([]);
+  }, []);
+
+  const handleCategoryToggle = useCallback((categoryId: number) => {
+    setSelectedFilterCategories((prev) => {
+      const newSet = new Set(prev);
+      newSet.has(categoryId)
+        ? newSet.delete(categoryId)
+        : newSet.add(categoryId);
+      return newSet;
+    });
+    setCurrentPage(1);
+    setAllProducts([]);
+  }, []);
+
+  const handlePriceChange = useCallback((values: number[]) => {
+    setPriceRange([values[0], values[1]]);
+    setCurrentPage(1);
+    setAllProducts([]);
+  }, []);
+
+  const handlePriceSortChange = useCallback(
+    (sortType: "none" | "lowToHigh" | "highToLow") => {
+      setPriceSort(sortType);
+    },
+    []
+  );
+
+  const resetFilters = useCallback(() => {
+    setSelectedBrands(new Set());
+    setSelectedFilterCategories(new Set());
+    setPriceRange([0, 10000]);
+    setPriceSort("none");
+    setCurrentPage(1);
+    setAllProducts([]);
+  }, []);
+
+  const filterTranslations = useMemo(
+    () => ({
+      category: t("category"),
+      brands: t("brands"),
+      sort: t("sort"),
+      default: t("default"),
+      price_low_to_high: t("price_low_to_high"),
+      price_high_to_low: t("price_high_to_low"),
+      price: t("price"),
+      price_from: t("price_from"),
+      price_to: t("price_to"),
+      reset: t("reset"),
+    }),
+    [t]
+  );
+
+  // ERROR STATE
+  if (categoriesError || productsError || filtersError) {
+    return <ErrorPage />;
+  }
+
+  // LOADING STATE
+  if (categoriesLoading) {
+    return (
+      <div className="flex flex-col mx-auto max-w-[1504px] px-2 md:px-4 lg:px-6 pb-12">
+        {/* Title Skeleton */}
+        <Skeleton className="h-16 w-full rounded-t-lg mb-0 bg-white" />
+
+        <div className="flex p-2 md:p-4 gap-4 bg-white rounded-b-lg mt-0">
+          {/* Desktop Filters Skeleton */}
+          <div className="hidden sm:block w-[280px] shrink-0 border-r px-4 space-y-6">
+            <Skeleton className="h-8 w-32" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <Skeleton className="h-8 w-32" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <Skeleton className="h-32 w-full" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+
+          {/* Products Grid Skeleton */}
+          <div className="flex-1">
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <div key={i} className="space-y-2">
+                  <Skeleton className="w-full aspect-square rounded-lg" />
+                  <Skeleton className="h-4 w-3/4" />
+                  <Skeleton className="h-6 w-1/2" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // CATEGORY NOT FOUND
+  if (!selectedCategory) {
+    return <div className="text-center py-8">{t("category_not_found")}</div>;
+  }
+
+  return (
+    <div className="flex flex-col mx-auto max-w-[1504px] px-2 md:px-4 lg:px-6 pb-12">
+      <h2 className="p-4 text-3xl font-bold pb-6 rounded-t-lg mb-0 bg-white">
+        {selectedCategory.name}
+      </h2>
+
+      <div className="flex p-2 md:p-4 gap-4 bg-white rounded-b-lg">
+        {/* Desktop Filters Sidebar */}
+        <div className="hidden sm:block w-[280px] shrink-0 border-r px-4">
+          <ScrollArea className="h-auto">
+            {filtersLoading ? (
+              <div className="space-y-6">
+                <div className="space-y-2">
+                  <Skeleton className="h-6 w-24" />
+                  <Skeleton className="h-5 w-full" />
+                  <Skeleton className="h-5 w-full" />
+                  <Skeleton className="h-5 w-full" />
+                </div>
+                <div className="space-y-2">
+                  <Skeleton className="h-6 w-24" />
+                  <Skeleton className="h-5 w-full" />
+                  <Skeleton className="h-5 w-full" />
+                </div>
+                <Skeleton className="h-32 w-full" />
+                <Skeleton className="h-10 w-full rounded-lg" />
+              </div>
+            ) : (
+              <CategoryFilters
+                filtersData={filtersData}
+                selectedBrands={selectedBrands}
+                selectedFilterCategories={selectedFilterCategories}
+                priceSort={priceSort}
+                priceRange={priceRange}
+                onBrandToggle={handleBrandToggle}
+                onCategoryToggle={handleCategoryToggle}
+                onPriceSortChange={handlePriceSortChange}
+                onPriceChange={handlePriceChange}
+                onReset={resetFilters}
+                translations={filterTranslations}
+              />
+            )}
+          </ScrollArea>
+        </div>
+
+        {/* Products Grid */}
+        <div className="flex-1 bg-white rounded-lg mb-6">
+          <CategoryProductsGrid
+            products={sortedProducts}
+            hasMore={hasMore}
+            onLoadMore={loadMoreData}
+            isFetching={isFetching}
+            translations={{
+              loading: t("common.loading"),
+              no_results: t("no_results"),
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Mobile Filters Sheet */}
+      <CategoryFiltersSheet
+        isOpen={isSheetOpen}
+        onOpenChange={setIsSheetOpen}
+        filterLabel={t("filter")}
+        closeLabel={t("close")}
+      >
+        {filtersLoading ? (
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <Skeleton className="h-6 w-24" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <div className="space-y-2">
+              <Skeleton className="h-6 w-24" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <Skeleton className="h-32 w-full" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+        ) : (
+          <CategoryFilters
+            filtersData={filtersData}
+            selectedBrands={selectedBrands}
+            selectedFilterCategories={selectedFilterCategories}
+            priceSort={priceSort}
+            priceRange={priceRange}
+            onBrandToggle={handleBrandToggle}
+            onCategoryToggle={handleCategoryToggle}
+            onPriceSortChange={handlePriceSortChange}
+            onPriceChange={handlePriceChange}
+            onReset={resetFilters}
+            translations={filterTranslations}
+          />
+        )}
+      </CategoryFiltersSheet>
+    </div>
+  );
+}

features/category/components/CategoryProductsGrid.tsx

@@ -0,0 +1,83 @@
+import InfiniteScroll from "react-infinite-scroll-component";
+import ProductCard from "@/features/home/components/ProductCard";
+import type { Product } from "@/lib/types/api";
+
+interface CategoryProductsGridProps {
+  products: Product[];
+  hasMore: boolean;
+  onLoadMore: () => void;
+  isFetching?: boolean; 
+  translations: {
+    loading: string;
+    no_results: string;
+  };
+}
+
+export default function CategoryProductsGrid({
+  products,
+  hasMore,
+  onLoadMore,
+  isFetching = false,
+  translations,
+}: CategoryProductsGridProps) {
+  if (products.length === 0 && !isFetching) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        {translations.no_results}
+      </div>
+    );
+  }
+
+  return (
+    <InfiniteScroll
+      dataLength={products.length}
+      next={onLoadMore}
+      hasMore={hasMore}
+      scrollThreshold={0.8}
+      style={{ overflow: "visible" }}
+      loader={
+        <div className="flex justify-center py-4">
+          <div className="flex items-center gap-2">
+            <div className="w-5 h-5 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" />
+            <span>{translations.loading}</span>
+          </div>
+        </div>
+      }
+      endMessage={
+        products.length > 0 && !hasMore ? (
+          <div className="text-center py-4 text-gray-500 text-sm">
+          </div>
+        ) : null
+      }
+    >
+      <div className="bg-white rounded-lg grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+        {products.map((product) => (
+          <ProductCard
+            key={product.id}
+            id={product.id}
+            name={product.name}
+            price={
+              product.price_amount ? parseFloat(product.price_amount) : null
+            }
+            struct_price_text={`${product.price_amount} TMT`}
+            images={[product.media?.[0]?.images_400x400]}
+            stock={product.stock}
+            button={true}
+          />
+        ))}
+      </div>
+      
+      {isFetching && products.length === 0 && (
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 mt-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="animate-pulse">
+              <div className="bg-gray-200 h-48 rounded-lg mb-2" />
+              <div className="bg-gray-200 h-4 rounded w-3/4 mb-2" />
+              <div className="bg-gray-200 h-4 rounded w-1/2" />
+            </div>
+          ))}
+        </div>
+      )}
+    </InfiniteScroll>
+  );
+}

features/category/components/CategorySkeleton.tsx

@@ -0,0 +1,17 @@
+// import { Skeleton } from "@/components/ui/skeleton"
+// import { Card } from "@/components/ui/card"
+// import { CardContent } from "@/components/ui/card"
+
+// export default function CategorySkeleton() {
+//   return (
+//     <Card className="overflow-hidden rounded-xl">
+//       {/* Image */}
+//       <Skeleton className="w-full h-36 bg-gray-200" />
+
+//       {/* Name */}
+//       <CardContent className="py-2">
+//         <Skeleton className="h-4 w-3/4 bg-gray-200" />
+//       </CardContent>
+//     </Card>
+//   )
+// }

features/category/hooks/useCategories.ts

@@ -0,0 +1,222 @@
+import { useQuery } from "@tanstack/react-query"
+import { apiClient } from "@/lib/api"
+import type { Category, Product, PaginatedResponse,  FiltersResponse, ProductFilters } from "@/lib/types/api"
+
+// Get all categories as tree
+export function useCategories(options?: { enabled?: boolean }) {
+  return useQuery({
+    queryKey: ["categories"],
+    queryFn: async () => {
+      const response = await apiClient.get<PaginatedResponse<Category>>("/categories", {
+        params: { type: "tree" },
+      })
+      return response.data.data || response.data
+    },
+    enabled: options?.enabled !== false,
+    staleTime: 1000 * 60 * 30, // 30 minutes
+  })
+}
+
+// Get single category by ID
+export function useCategory(id: number | string, options?: { enabled?: boolean }) {
+  return useQuery({
+    queryKey: ["category", id],
+    queryFn: async () => {
+      const response = await apiClient.get<Category>(`/categories/${id}`)
+      return response.data
+    },
+    enabled: options?.enabled !== false && !!id,
+    staleTime: 1000 * 60 * 15,
+  })
+}
+
+// Get products for a single category with pagination
+export function useCategoryProducts(
+  categoryId: number | string, 
+  options?: { 
+    enabled?: boolean
+    page?: number
+    limit?: number
+  }
+) {
+  return useQuery({
+    queryKey: ["category", categoryId, "products", options?.page, options?.limit],
+    queryFn: async () => {
+      const response = await apiClient.get<PaginatedResponse<Product>>(
+        `/categories/${categoryId}/products`, 
+        {
+          params: { 
+            page: options?.page || 1,
+            per_page: options?.limit 
+          },
+        }
+      )
+      return {
+        data: response.data.data || [],
+        pagination: response.data.pagination || {}
+      }
+    },
+    enabled: options?.enabled !== false && !!categoryId,
+  })
+}
+
+// Get ALL products from category and its children - NO pagination (for initial load)
+export function useAllCategoryProducts(
+  category: Category | undefined,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: ["category", category?.id, "all-products"],
+    queryFn: async () => {
+      if (!category) return []
+
+      const fetchProducts = async (categoryId: number) => {
+        const response = await apiClient.get<PaginatedResponse<Product>>(
+          `/categories/${categoryId}/products`
+        )
+        return response.data.data || []
+      }
+
+      let allProducts = await fetchProducts(category.id)
+
+      if (category.children && category.children.length > 0) {
+        for (const child of category.children) {
+          const childProducts = await fetchProducts(child.id)
+          allProducts = [...allProducts, ...childProducts]
+        }
+      }
+
+      return allProducts
+    },
+    enabled: options?.enabled !== false && !!category,
+  })
+}
+
+export function useCategoryFilters(
+  categoryId: number | string | undefined,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: ["category-filters", categoryId],
+    queryFn: async () => {
+      const response = await apiClient.get<FiltersResponse>(
+        "/filters",
+        {
+          params: { category_id: categoryId },
+        }
+      )
+      return response.data.data
+    },
+    enabled: options?.enabled !== false && !!categoryId,
+    staleTime: 1000 * 60 * 15,
+  })
+}
+
+// Get filtered category products
+export function useFilteredCategoryProducts(
+  categoryId: number | string,
+  filters: ProductFilters,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: ["category", categoryId, "filtered-products", filters],
+    queryFn: async () => {
+      const params: Record<string, any> = {
+        page: filters.page || 1,
+        per_page: filters.limit || 6,
+      }
+
+      if (filters.brands && filters.brands.length > 0) {
+        params.brands = filters.brands.join(',')
+      }
+
+      if (filters.categories && filters.categories.length > 0) {
+        params.categories = filters.categories.join(',')
+      }
+
+      if (filters.min_price !== undefined) {
+        params.min_price = filters.min_price
+      }
+
+      if (filters.max_price !== undefined) {
+        params.max_price = filters.max_price
+      }
+
+      const response = await apiClient.get<PaginatedResponse<Product>>(
+        `/categories/${categoryId}/products`,
+        { params }
+      )
+
+      return {
+        data: response.data.data || [],
+        pagination: response.data.pagination || {}
+      }
+    },
+    enabled: options?.enabled !== false && !!categoryId,
+  })
+}
+
+// Get products from category and children WITH pagination (mimics RTK getAllCategoryProductsPaginated)
+export function useAllCategoryProductsPaginated(
+  category: Category | undefined,
+  options?: { 
+    enabled?: boolean
+    page?: number
+    limit?: number
+  }
+) {
+  const page = options?.page || 1
+  const per_page = options?.limit || 6
+
+  return useQuery({
+    queryKey: ["category", category?.id, "paginated-products", page, per_page],
+    queryFn: async () => {
+      if (!category) {
+        return {
+          data: [],
+          pagination: {
+            currentPage: page,
+            hasMorePages: false
+          }
+        }
+      }
+
+      const categoryIds = [category.id]
+      if (category.children && category.children.length > 0) {
+        category.children.forEach((child) => categoryIds.push(child.id))
+      }
+
+      const perCategoryLimit = Math.ceil(per_page / categoryIds.length)
+      const hasMoreByCategory: Record<number, boolean> = {}
+      let allPageProducts: Product[] = []
+
+      for (const categoryId of categoryIds) {
+        const response = await apiClient.get<PaginatedResponse<Product>>(
+          `/categories/${categoryId}/products`,
+          {
+            params: {
+              page,
+              per_page: perCategoryLimit
+            }
+          }
+        )
+
+        if (response.data.data) {
+          allPageProducts = [...allPageProducts, ...response.data.data]
+          hasMoreByCategory[categoryId] = !!response.data.pagination?.next_page_url
+        }
+      }
+
+      const hasMorePages = Object.values(hasMoreByCategory).some((hasMore) => hasMore)
+
+      return {
+        data: allPageProducts,
+        pagination: {
+          currentPage: page,
+          hasMorePages
+        }
+      }
+    },
+    enabled: options?.enabled !== false && !!category,
+  })
+}

features/collections/components/CollectionFilters.tsx

@@ -0,0 +1,233 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+import type { FilterBrand, FilterCategory } from "@/lib/types/api";
+
+interface FiltersData {
+  categories: FilterCategory[];
+  brands: FilterBrand[];
+}
+
+interface CollectionFiltersProps {
+  filtersData: FiltersData | undefined;
+  selectedBrands: Set<number>;
+  selectedCategories: Set<number>;
+  priceSort: "none" | "lowToHigh" | "highToLow";
+  priceRange: [number, number];
+  onBrandToggle: (brandId: number) => void;
+  onCategoryToggle: (categoryId: number) => void;
+  onPriceSortChange: (sortType: "none" | "lowToHigh" | "highToLow") => void;
+  onPriceChange: (values: number[]) => void;
+  onReset: () => void;
+  translations: {
+    category: string;
+    brands: string;
+    sort: string;
+    default: string;
+    price_low_to_high: string;
+    price_high_to_low: string;
+    price: string;
+    price_from: string;
+    price_to: string;
+    reset: string;
+  };
+}
+
+export default function CollectionFilters({
+  filtersData,
+  selectedBrands,
+  selectedCategories,
+  priceSort,
+  priceRange,
+  onBrandToggle,
+  onCategoryToggle,
+  onPriceSortChange,
+  onPriceChange,
+  onReset,
+  translations,
+}: CollectionFiltersProps) {
+  return (
+    <div className="space-y-6 mb-6">
+      {filtersData?.categories && filtersData.categories.length > 0 && (
+        <FilterSection title={translations.category}>
+          {filtersData.categories.map((category) => (
+            <CheckboxItem
+              key={category.id}
+              checked={selectedCategories.has(category.id)}
+              onCheckedChange={() => onCategoryToggle(category.id)}
+              label={category.name}
+            />
+          ))}
+        </FilterSection>
+      )}
+
+      {filtersData?.brands && filtersData.brands.length > 0 && (
+        <FilterSection title={translations.brands}>
+          {filtersData.brands.map((brand) => (
+            <CheckboxItem
+              key={brand.id}
+              checked={selectedBrands.has(brand.id)}
+              onCheckedChange={() => onBrandToggle(brand.id)}
+              label={brand.name}
+            />
+          ))}
+        </FilterSection>
+      )}
+
+      <FilterSection title={translations.sort}>
+        <RadioItem
+          name="sort"
+          checked={priceSort === "none"}
+          onChange={() => onPriceSortChange("none")}
+          label={translations.default}
+        />
+        <RadioItem
+          name="sort"
+          checked={priceSort === "lowToHigh"}
+          onChange={() => onPriceSortChange("lowToHigh")}
+          label={translations.price_low_to_high}
+        />
+        <RadioItem
+          name="sort"
+          checked={priceSort === "highToLow"}
+          onChange={() => onPriceSortChange("highToLow")}
+          label={translations.price_high_to_low}
+        />
+      </FilterSection>
+
+      <PriceFilter
+        title={translations.price}
+        priceRange={priceRange}
+        onPriceChange={onPriceChange}
+        translations={{
+          from: translations.price_from,
+          to: translations.price_to,
+        }}
+      />
+
+      <Button variant="outline" className="w-full rounded-lg cursor-pointer mb-6" onClick={onReset}>
+        {translations.reset}
+      </Button>
+    </div>
+  );
+}
+
+function FilterSection({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <h3 className="text-lg font-semibold mb-3">{title}</h3>
+      <div className="space-y-2">{children}</div>
+    </div>
+  );
+}
+
+function CheckboxItem({
+  checked,
+  onCheckedChange,
+  label,
+}: {
+  checked: boolean;
+  onCheckedChange: () => void;
+  label: string;
+}) {
+  return (
+    <label className="flex items-center gap-2 cursor-pointer">
+      <Checkbox checked={checked} onCheckedChange={onCheckedChange} />
+      <span className="text-sm">{label}</span>
+    </label>
+  );
+}
+
+function RadioItem({
+  name,
+  checked,
+  onChange,
+  label,
+}: {
+  name: string;
+  checked: boolean;
+  onChange: () => void;
+  label: string;
+}) {
+  return (
+    <label className="flex items-center gap-2 cursor-pointer">
+      <input
+        type="radio"
+        name={name}
+        checked={checked}
+        onChange={onChange}
+        className="w-4 h-4"
+      />
+      <span>{label}</span>
+    </label>
+  );
+}
+
+function PriceFilter({
+  title,
+  priceRange,
+  onPriceChange,
+  translations,
+}: {
+  title: string;
+  priceRange: [number, number];
+  onPriceChange: (values: number[]) => void;
+  translations: { from: string; to: string };
+}) {
+  return (
+    <div>
+      <h3 className="text-lg font-semibold mb-3">{title}</h3>
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          <div className="flex-1">
+            <Label htmlFor="price-from" className="text-xs mb-1">
+              {translations.from}
+            </Label>
+            <Input
+              id="price-from"
+              type="number"
+              value={priceRange[0]}
+              onChange={(e) =>
+                onPriceChange([parseInt(e.target.value) || 0, priceRange[1]])
+              }
+              className="rounded-lg"
+            />
+          </div>
+          <div className="flex-1">
+            <Label htmlFor="price-to" className="text-xs mb-1">
+              {translations.to}
+            </Label>
+            <Input
+              id="price-to"
+              type="number"
+              value={priceRange[1]}
+              onChange={(e) =>
+                onPriceChange([
+                  priceRange[0],
+                  parseInt(e.target.value) || 10000,
+                ])
+              }
+              className="rounded-lg"
+            />
+          </div>
+        </div>
+        <Slider
+          min={0}
+          max={99999}
+          step={100}
+          value={priceRange}
+          onValueChange={onPriceChange}
+          className="mt-2"
+        />
+      </div>
+    </div>
+  );
+}

features/collections/components/CollectionFiltersSheet.tsx

@@ -0,0 +1,55 @@
+import { SlidersHorizontal, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface CollectionFiltersSheetProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  filterLabel: string;
+  closeLabel: string;
+  children: React.ReactNode;
+}
+
+export default function CollectionFiltersSheet({
+  isOpen,
+  onOpenChange,
+  filterLabel,
+  closeLabel,
+  children,
+}: CollectionFiltersSheetProps) {
+  return (
+    <Sheet open={isOpen} onOpenChange={onOpenChange}>
+      <SheetTrigger asChild>
+        <Button
+          className="bg-[#005bff] hover:bg-[#0041c4] sm:hidden fixed bottom-20 right-4 rounded-lg cursor-pointer font-bold gap-2 z-10 shadow-lg"
+          size="lg"
+        >
+          {filterLabel}
+          <SlidersHorizontal className="h-5 w-5" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="w-[290px] p-0">
+        <SheetHeader className="p-4 border-b">
+          <SheetTitle>{filterLabel}</SheetTitle>
+          <button
+            onClick={() => onOpenChange(false)}
+            className="absolute top-4 right-4 rounded-md cursor-pointer ring-offset-background transition-opacity hover:opacity-100"
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">{closeLabel}</span>
+          </button>
+        </SheetHeader>
+        <ScrollArea className="h-[calc(100vh-80px)] p-4">
+          {children}
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}

features/collections/components/CollectionPageClient.tsx

@@ -0,0 +1,385 @@
+"use client";
+
+import { useEffect, useState, useMemo, useCallback } from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  useCollections,
+  useCollectionFilters,
+  useFilteredCollectionProducts,
+} from "@/features/collections/hooks/useCollections";
+import { useTranslations } from "next-intl";
+import type { Product } from "@/lib/types/api";
+import CollectionFilters from "./CollectionFilters";
+import CollectionProductsGrid from "./CollectionProductsGrid";
+import CollectionFiltersSheet from "./CollectionFiltersSheet";
+import ErrorPage from "@/components/ErrorPage";
+
+interface CollectionPageClientProps {
+  params: { locale: string; slug: string };
+}
+
+export default function CollectionPageClient({
+  params,
+}: CollectionPageClientProps) {
+  const { slug } = params;
+  const t = useTranslations();
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+
+  const {
+    data: collectionsData,
+    isLoading: collectionsLoading,
+    isError: collectionsError,
+  } = useCollections();
+
+  const selectedCollection = useMemo(() => {
+    if (!collectionsData || !slug) return null;
+    return collectionsData.find((col) => col.slug === slug);
+  }, [collectionsData, slug]);
+
+  // State management
+  const [currentPage, setCurrentPage] = useState(1);
+  const [allProducts, setAllProducts] = useState<Product[]>([]);
+  const [priceSort, setPriceSort] = useState<
+    "none" | "lowToHigh" | "highToLow"
+  >("none");
+  const [priceRange, setPriceRange] = useState<[number, number]>([0, 10000]);
+  const [selectedBrands, setSelectedBrands] = useState<Set<number>>(new Set());
+  const [selectedCategories, setSelectedCategories] = useState<Set<number>>(
+    new Set()
+  );
+
+  // Fetch filters
+  const {
+    data: filtersData,
+    isLoading: filtersLoading,
+    isError: filtersError,
+  } = useCollectionFilters(selectedCollection?.id, {
+    enabled: !!selectedCollection,
+  });
+
+  // Build filter params
+  const filterParams = useMemo(() => {
+    const params: any = {
+      page: currentPage,
+      limit: 6,
+    };
+
+    if (selectedBrands.size > 0) {
+      params.brands = Array.from(selectedBrands);
+    }
+
+    if (selectedCategories.size > 0) {
+      params.categories = Array.from(selectedCategories);
+    }
+
+    params.min_price = priceRange[0];
+    params.max_price = priceRange[1];
+
+    return params;
+  }, [currentPage, selectedBrands, selectedCategories, priceRange]);
+
+  // Fetch filtered products
+  const {
+    data: productsData,
+    isFetching,
+    isError: productsError,
+  } = useFilteredCollectionProducts(
+    selectedCollection?.id?.toString() || "",
+    filterParams,
+    { enabled: !!selectedCollection }
+  );
+
+  // Reset on collection change
+  useEffect(() => {
+    if (selectedCollection) {
+      setAllProducts([]);
+      setCurrentPage(1);
+      setSelectedBrands(new Set());
+      setSelectedCategories(new Set());
+      setPriceRange([0, 10000]);
+      setPriceSort("none");
+    }
+  }, [selectedCollection?.id]);
+
+  // Update products list
+  useEffect(() => {
+    if (productsData?.data) {
+      setAllProducts((prev) => {
+        if (currentPage === 1) {
+          return productsData.data;
+        }
+
+        const existingIds = new Set(prev.map((p) => p.id));
+        const newProducts = productsData.data.filter(
+          (p: Product) => !existingIds.has(p.id)
+        );
+
+        if (newProducts.length === 0) {
+          return prev;
+        }
+
+        return [...prev, ...newProducts];
+      });
+    }
+  }, [productsData?.data, currentPage]);
+
+  const hasMore = useMemo(() => {
+    return !!productsData?.pagination?.next_page_url;
+  }, [productsData]);
+
+  const loadMoreData = useCallback(() => {
+    if (!hasMore || isFetching) return;
+    setCurrentPage((prev) => prev + 1);
+  }, [hasMore, isFetching]);
+
+  // Client-side sorting
+  const sortedProducts = useMemo(() => {
+    const products = [...allProducts];
+    if (priceSort === "lowToHigh") {
+      return products.sort(
+        (a, b) =>
+          parseFloat(a.price_amount || "0") - parseFloat(b.price_amount || "0")
+      );
+    }
+    if (priceSort === "highToLow") {
+      return products.sort(
+        (a, b) =>
+          parseFloat(b.price_amount || "0") - parseFloat(a.price_amount || "0")
+      );
+    }
+    return products;
+  }, [allProducts, priceSort]);
+
+  // Filter handlers
+  const handleBrandToggle = useCallback((brandId: number) => {
+    setSelectedBrands((prev) => {
+      const newSet = new Set(prev);
+      newSet.has(brandId) ? newSet.delete(brandId) : newSet.add(brandId);
+      return newSet;
+    });
+    setCurrentPage(1);
+    setAllProducts([]);
+  }, []);
+
+  const handleCategoryToggle = useCallback((categoryId: number) => {
+    setSelectedCategories((prev) => {
+      const newSet = new Set(prev);
+      newSet.has(categoryId)
+        ? newSet.delete(categoryId)
+        : newSet.add(categoryId);
+      return newSet;
+    });
+    setCurrentPage(1);
+    setAllProducts([]);
+  }, []);
+
+  const handlePriceChange = useCallback((values: number[]) => {
+    setPriceRange([values[0], values[1]]);
+    setCurrentPage(1);
+    setAllProducts([]);
+  }, []);
+
+  const handlePriceSortChange = useCallback(
+    (sortType: "none" | "lowToHigh" | "highToLow") => {
+      setPriceSort(sortType);
+    },
+    []
+  );
+
+  const resetFilters = useCallback(() => {
+    setSelectedBrands(new Set());
+    setSelectedCategories(new Set());
+    setPriceRange([0, 10000]);
+    setPriceSort("none");
+    setCurrentPage(1);
+    setAllProducts([]);
+  }, []);
+
+  const filterTranslations = useMemo(
+    () => ({
+      category: t("category"),
+      brands: t("brands"),
+      sort: t("sort"),
+      default: t("default"),
+      price_low_to_high: t("price_low_to_high"),
+      price_high_to_low: t("price_high_to_low"),
+      price: t("price"),
+      price_from: t("price_from"),
+      price_to: t("price_to"),
+      reset: t("reset"),
+    }),
+    [t]
+  );
+
+  // ERROR STATE
+  if (collectionsError || productsError || filtersError) {
+    return <ErrorPage />;
+  }
+
+  // LOADING STATE
+  if (collectionsLoading) {
+    return (
+      <div className="flex flex-col mx-auto max-w-[1504px] px-2 md:px-4 lg:px-6 pb-12">
+        {/* Title Skeleton */}
+        <Skeleton className="h-16 w-full rounded-t-lg mb-0 bg-white" />
+
+        <div className="flex p-2 md:p-4 gap-4 bg-white rounded-b-lg mt-0">
+          {/* Desktop Filters Skeleton */}
+          <div className="hidden sm:block w-[280px] shrink-0 border-r px-4 space-y-6">
+            <Skeleton className="h-8 w-32" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <Skeleton className="h-8 w-32" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <Skeleton className="h-8 w-32" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <Skeleton className="h-32 w-full" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+
+          {/* Products Grid Skeleton */}
+          <div className="flex-1">
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <div key={i} className="space-y-2">
+                  <Skeleton className="w-full aspect-square rounded-lg" />
+                  <Skeleton className="h-4 w-3/4" />
+                  <Skeleton className="h-6 w-1/2" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // COLLECTION NOT FOUND
+  if (!selectedCollection) {
+    return <div className="text-center py-8">{t("collection_not_found")}</div>;
+  }
+
+  return (
+    <div className="flex flex-col mx-auto max-w-[1504px] px-2 md:px-4 lg:px-6 pb-12">
+      <h2 className="p-4 text-3xl font-bold pb-6 rounded-t-lg mb-0 bg-white">
+        {selectedCollection.name}
+      </h2>
+
+      <div className="flex p-2 md:p-4 gap-4 bg-white rounded-b-lg">
+        {/* Desktop Filters Sidebar */}
+        <div className="hidden sm:block w-[280px] shrink-0 border-r px-4">
+          <ScrollArea className="h-auto">
+            {filtersLoading ? (
+              <div className="space-y-6">
+                <div className="space-y-2">
+                  <Skeleton className="h-6 w-24" />
+                  <Skeleton className="h-5 w-full" />
+                  <Skeleton className="h-5 w-full" />
+                  <Skeleton className="h-5 w-full" />
+                </div>
+                <div className="space-y-2">
+                  <Skeleton className="h-6 w-24" />
+                  <Skeleton className="h-5 w-full" />
+                  <Skeleton className="h-5 w-full" />
+                </div>
+                <div className="space-y-2">
+                  <Skeleton className="h-6 w-24" />
+                  <Skeleton className="h-5 w-full" />
+                  <Skeleton className="h-5 w-full" />
+                  <Skeleton className="h-5 w-full" />
+                </div>
+                <Skeleton className="h-32 w-full" />
+                <Skeleton className="h-10 w-full rounded-lg" />
+              </div>
+            ) : (
+              <CollectionFilters
+                filtersData={filtersData}
+                selectedBrands={selectedBrands}
+                selectedCategories={selectedCategories}
+                priceSort={priceSort}
+                priceRange={priceRange}
+                onBrandToggle={handleBrandToggle}
+                onCategoryToggle={handleCategoryToggle}
+                onPriceSortChange={handlePriceSortChange}
+                onPriceChange={handlePriceChange}
+                onReset={resetFilters}
+                translations={filterTranslations}
+              />
+            )}
+          </ScrollArea>
+        </div>
+
+        {/* Products Grid */}
+        <div className="flex-1 bg-white rounded-lg mb-6">
+          <CollectionProductsGrid
+            products={sortedProducts}
+            hasMore={hasMore}
+            onLoadMore={loadMoreData}
+            isFetching={isFetching}
+            translations={{
+              loading: t("common.loading"),
+              no_results: t("no_results"),
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Mobile Filters Sheet */}
+      <CollectionFiltersSheet
+        isOpen={isSheetOpen}
+        onOpenChange={setIsSheetOpen}
+        filterLabel={t("filter")}
+        closeLabel={t("close")}
+      >
+        {filtersLoading ? (
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <Skeleton className="h-6 w-24" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <div className="space-y-2">
+              <Skeleton className="h-6 w-24" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <div className="space-y-2">
+              <Skeleton className="h-6 w-24" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <Skeleton className="h-32 w-full" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+        ) : (
+          <CollectionFilters
+            filtersData={filtersData}
+            selectedBrands={selectedBrands}
+            selectedCategories={selectedCategories}
+            priceSort={priceSort}
+            priceRange={priceRange}
+            onBrandToggle={handleBrandToggle}
+            onCategoryToggle={handleCategoryToggle}
+            onPriceSortChange={handlePriceSortChange}
+            onPriceChange={handlePriceChange}
+            onReset={resetFilters}
+            translations={filterTranslations}
+          />
+        )}
+      </CollectionFiltersSheet>
+    </div>
+  );
+}

features/collections/components/CollectionProductsGrid.tsx

@@ -0,0 +1,82 @@
+import InfiniteScroll from "react-infinite-scroll-component";
+import ProductCard from "@/features/home/components/ProductCard";
+import type { Product } from "@/lib/types/api";
+
+interface CollectionProductsGridProps {
+  products: Product[];
+  hasMore: boolean;
+  isFetching?: boolean;
+  onLoadMore: () => void;
+  translations: {
+    loading: string;
+    no_results: string;
+  };
+}
+
+export default function CollectionProductsGrid({
+  products,
+  hasMore,
+  onLoadMore,
+  isFetching = false,
+  translations,
+}: CollectionProductsGridProps) {
+  if (products.length === 0 && !isFetching) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        {translations.no_results}
+      </div>
+    );
+  }
+
+  return (
+    <InfiniteScroll
+      dataLength={products.length}
+      next={onLoadMore}
+      hasMore={hasMore}
+      scrollThreshold={0.8}
+      style={{ overflow: "visible" }}
+      loader={
+        <div className="flex justify-center py-4">
+          <div className="flex items-center gap-2">
+            <div className="w-5 h-5 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" />
+            <span>{translations.loading}</span>
+          </div>
+        </div>
+      }
+      endMessage={
+        products.length > 0 && !hasMore ? (
+          <div className="text-center py-4 text-gray-500 text-sm"></div>
+        ) : null
+      }
+    >
+      <div className="bg-white rounded-lg grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+        {products.map((product) => (
+          <ProductCard
+            key={product.id}
+            id={product.id}
+            name={product.name}
+            price={
+              product.price_amount ? parseFloat(product.price_amount) : null
+            }
+            struct_price_text={`${product.price_amount} TMT`}
+            images={[product.media?.[0]?.images_400x400]}
+            stock={product.stock}
+            button={true}
+          />
+        ))}
+      </div>
+
+      {isFetching && products.length === 0 && (
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 mt-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="animate-pulse">
+              <div className="bg-gray-200 h-48 rounded-lg mb-2" />
+              <div className="bg-gray-200 h-4 rounded w-3/4 mb-2" />
+              <div className="bg-gray-200 h-4 rounded w-1/2" />
+            </div>
+          ))}
+        </div>
+      )}
+    </InfiniteScroll>
+  );
+}

features/collections/hooks/useCollections.ts

@@ -0,0 +1,161 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "@/lib/api";
+import type {
+  Collection,
+  Product,
+  PaginatedResponse,
+  FiltersResponse,
+  ProductFilters,
+} from "@/lib/types/api";
+
+// Get all collections
+export function useCollections(options?: { enabled?: boolean }) {
+  return useQuery({
+    queryKey: ["collections"],
+    queryFn: async () => {
+      const response = await apiClient.get<PaginatedResponse<Collection>>(
+        "/collections"
+      );
+      return response.data.data || response.data;
+    },
+    enabled: options?.enabled !== false,
+    staleTime: 1000 * 60 * 30, // 30 minutes
+  });
+}
+
+// Get single collection by ID
+export function useCollection(
+  id: number | string,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: ["collection", id],
+    queryFn: async () => {
+      const response = await apiClient.get<Collection>(`/collections/${id}`);
+      return response.data;
+    },
+    enabled: options?.enabled !== false && !!id,
+    staleTime: 1000 * 60 * 15,
+  });
+}
+
+// Get products for a collection with pagination
+export function useCollectionProducts(
+  collectionId: number | string,
+  options?: {
+    enabled?: boolean;
+    page?: number;
+    limit?: number;
+  }
+) {
+  return useQuery({
+    queryKey: [
+      "collection",
+      collectionId,
+      "products",
+      options?.page,
+      options?.limit,
+    ],
+    queryFn: async () => {
+      const response = await apiClient.get<PaginatedResponse<Product>>(
+        `/collections/${collectionId}/products`,
+        {
+          params: {
+            page: options?.page || 1,
+            per_page: options?.limit,
+          },
+        }
+      );
+      return {
+        data: response.data.data || [],
+        pagination: response.data.pagination || {},
+      };
+    },
+    enabled: options?.enabled !== false && !!collectionId,
+  });
+}
+
+// Get filters for collection products
+export function useCollectionFilters(
+  collectionId: number | string | undefined,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: ["collection-filters", collectionId],
+    queryFn: async () => {
+      const response = await apiClient.get<FiltersResponse>("/filters", {
+        params: { collection_id: collectionId },
+      });
+      return response.data.data;
+    },
+    enabled: options?.enabled !== false && !!collectionId,
+    staleTime: 1000 * 60 * 15,
+  });
+}
+
+// Get filtered collection products
+export function useFilteredCollectionProducts(
+  collectionId: number | string,
+  filters: ProductFilters,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: ["collection", collectionId, "filtered-products", filters],
+    queryFn: async () => {
+      const params: Record<string, any> = {
+        page: filters.page || 1,
+        per_page: filters.limit || 6,
+      };
+
+      if (filters.brands && filters.brands.length > 0) {
+        params.brands = filters.brands.join(",");
+      }
+
+      if (filters.categories && filters.categories.length > 0) {
+        params.categories = filters.categories.join(",");
+      }
+
+      if (filters.min_price !== undefined) {
+        params.min_price = filters.min_price;
+      }
+
+      if (filters.max_price !== undefined) {
+        params.max_price = filters.max_price;
+      }
+
+      const response = await apiClient.get<PaginatedResponse<Product>>(
+        `/collections/${collectionId}/products`,
+        { params }
+      );
+
+      return {
+        data: response.data.data || [],
+        pagination: response.data.pagination || {},
+      };
+    },
+    enabled: options?.enabled !== false && !!collectionId,
+  });
+}
+
+// Check if collection has products
+export function useCheckCollectionHasProducts(
+  collectionId: number | string,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: ["collection", collectionId, "has-products"],
+    queryFn: async () => {
+      const response = await apiClient.get<PaginatedResponse<Product>>(
+        `/collections/${collectionId}/products`,
+        {
+          params: { limit: 1 },
+        }
+      );
+      return {
+        hasProducts: response.data.data && response.data.data.length > 0,
+      };
+    },
+    enabled: options?.enabled !== false && !!collectionId,
+    staleTime: 1000 * 60 * 5,
+  });
+}

features/favorites/components/EmptyFavorites.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@/components/ui/button";
+import { Heart } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+
+export default function EmptyFavorites() {
+  const t=useTranslations();
+  const router=useRouter();
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4">
+      <div className="w-full max-w-md rounded-2xl bg-linear-to-br from-blue-50 to-white p-8 text-center shadow-lg">
+        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
+          <Heart className="h-10 w-10 text-blue-600" />
+        </div>
+
+        <h2 className="mb-2 text-2xl font-semibold text-gray-900">
+          {t("favorites_empty")}
+        </h2>
+
+        <p className="mb-6 text-sm text-gray-500">
+          {t("favorites_empty_message")}
+        </p>
+
+        <Button onClick={()=>router.push("/")} className="w-full rounded-lg cursor-pointer bg-blue-600 px-6 py-3 text-sm font-medium text-white transition hover:bg-blue-700 active:scale-95">
+          {t("start_shopping")}
+        </Button>
+      </div>
+    </div>
+  );
+}

features/favorites/hooks/useFavorites.ts

@@ -0,0 +1,203 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { apiClient } from "@/lib/api";
+import type { Favorite } from "@/lib/types/api";
+
+interface FavoritesResponse {
+  data?: Favorite[];
+  [key: string]: any;
+}
+
+function transformFavoritesResponse(response: any): Favorite[] {
+  if (typeof response === "object" && response.data) {
+    return response.data;
+  }
+  if (typeof response === "string") {
+    try {
+      const parsed = JSON.parse(response);
+      return parsed.data || [];
+    } catch {
+      return [];
+    }
+  }
+  return [];
+}
+
+// Fetch ALL favorite products (handle pagination on backend)
+async function fetchAllFavorites(): Promise<Favorite[]> {
+  const allFavorites: Favorite[] = [];
+  let currentPage = 1;
+  let hasMorePages = true;
+  let lastError: Error | null = null;
+
+  while (hasMorePages) {
+    try {
+      const response = await apiClient.get("/favorites", {
+        params: { page: currentPage, perPage: 100 },
+      });
+
+      const favorites = transformFavoritesResponse(response.data);
+      allFavorites.push(...favorites);
+
+      const pagination = response.data?.pagination;
+      if (pagination?.next_page_url) {
+        currentPage++;
+      } else {
+        hasMorePages = false;
+      }
+    } catch (error) {
+    
+      if (currentPage === 1) {
+        throw error;
+      }
+      
+      
+      lastError = error as Error;
+      hasMorePages = false;
+    }
+  }
+
+  
+  if (allFavorites.length === 0 && lastError) {
+    throw lastError;
+  }
+
+  return allFavorites;
+}
+
+// Get all favorites with automatic pagination
+export function useFavorites() {
+  return useQuery({
+    queryKey: ["favorites"],
+    queryFn: fetchAllFavorites,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 10, // Keep in cache for 10 minutes
+    retry: 1,
+  });
+}
+
+// Get favorite product IDs as Set for O(1) lookup - ALWAYS loads favorites first
+export function useFavoriteIds() {
+  const { data: favorites, isLoading } = useFavorites();
+
+  // Return Set with IDs, empty Set while loading
+  return {
+    favoriteIds: new Set(favorites?.map((fav) => fav.product.id) || []),
+    isLoading,
+  };
+}
+
+// Check if product is favorited - with loading state
+export function useIsFavorite(productId: number) {
+  const { favoriteIds, isLoading } = useFavoriteIds();
+
+  return {
+    isFavorite: favoriteIds.has(productId),
+    isLoading,
+  };
+}
+
+// Toggle favorite (add/remove) with optimistic updates
+export function useToggleFavorite() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      productId,
+      isFavorite,
+    }: {
+      productId: number;
+      isFavorite: boolean;
+    }) => {
+      const formData = new URLSearchParams({
+        product_id: productId.toString(),
+      });
+
+      await apiClient.post("/favorites", formData, {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+      });
+
+      return { productId, wasAdded: !isFavorite };
+    },
+    onMutate: async ({ productId, isFavorite }) => {
+      // Cancel outgoing refetches
+      await queryClient.cancelQueries({ queryKey: ["favorites"] });
+
+      // Snapshot previous
+      const previousFavorites = queryClient.getQueryData<Favorite[]>([
+        "favorites",
+      ]);
+
+      // Optimistically update
+      queryClient.setQueryData<Favorite[]>(["favorites"], (old = []) => {
+        if (isFavorite) {
+          // Remove from favorites
+          return old.filter((fav) => fav.product.id !== productId);
+        }
+        // For add, we'll refetch to get full product data
+        return old;
+      });
+
+      return { previousFavorites };
+    },
+    onError: (err, variables, context) => {
+      // Rollback on error
+      if (context?.previousFavorites) {
+        queryClient.setQueryData(["favorites"], context.previousFavorites);
+      }
+    },
+    onSettled: () => {
+      // Refetch to ensure consistency
+      queryClient.invalidateQueries({ queryKey: ["favorites"] });
+    },
+  });
+}
+
+// Add to favorites
+export function useAddToFavorites() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (productId: number) => {
+      const formData = new URLSearchParams({
+        product_id: productId.toString(),
+      });
+
+      await apiClient.post("/favorites", formData, {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+      });
+
+      return productId;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["favorites"] });
+    },
+  });
+}
+
+// Remove from favorites
+export function useRemoveFromFavorites() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (productId: number) => {
+      const formData = new URLSearchParams({
+        product_id: productId.toString(),
+      });
+
+      await apiClient.post("/favorites", formData, {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+      });
+
+      return productId;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["favorites"] });
+    },
+  });
+}

features/home/components/Carousel.tsx

@@ -0,0 +1,54 @@
+"use client";
+import Image, { type StaticImageData } from "next/image";
+import Link from "next/link";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay } from "swiper/modules";
+import "swiper/css";
+
+type CarouselItem = {
+  title: string;
+  image: StaticImageData | string;
+  url?: string | null;
+};
+
+export default function HeroCarousel({ items }: { items: CarouselItem[] }) {
+  return (
+    <section className="rounded-2xl overflow-hidden">
+      <Swiper
+        modules={[Autoplay]}
+        slidesPerView={1}
+        loop
+        autoplay={{ delay: 3000, disableOnInteraction: false }}
+      >
+        {items.map((item, i) => (
+          <SwiperSlide key={i}>
+            {item.url ? (
+              <Link
+                href={item.url}
+                className="block relative w-full h-[200px] sm:h-[300px] md:h-[496px]"
+              >
+                <Image
+                  src={item.image}
+                  alt={item.title}
+                  fill
+                  className="object-cover"
+                  priority={i === 0}
+                />
+              </Link>
+            ) : (
+              <div className="relative w-full h-[200px] sm:h-[300px] md:h-[496px]">
+                <Image
+                  src={item.image}
+                  alt={item.title}
+                  fill
+                  className="object-cover"
+                  priority={i === 0}
+                />
+              </div>
+            )}
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </section>
+  );
+}

features/home/components/CategoryGrid.tsx

@@ -0,0 +1,81 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import { Card, CardContent } from "@/components/ui/card";
+import type { Category } from "@/lib/types/api";
+import { Skeleton } from "@/components/ui/skeleton";
+
+type Props = {
+  categories: Category[] | undefined;
+  isLoading: boolean;
+  isError: boolean;
+  locale: string;
+  title: string;
+};
+
+export default function CategoryGrid({
+  categories,
+  isLoading,
+  isError,
+  locale,
+  title,
+}: Props) {
+  if (isError) {
+    return (
+      <section className="bg-white rounded-2xl shadow-sm p-6">
+        <h2 className="text-xl font-semibold mb-4">{title}</h2>
+        <p className="text-red-600">
+          Failed to load categories. Please try again.
+        </p>
+      </section>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <section className="bg-white rounded-2xl shadow-sm p-6">
+        <h2 className="text-xl font-semibold mb-4">{title}</h2>
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+          {Array.from({ length: 10 }).map((_, i) => (
+            <div key={i} className="space-y-2">
+              <Skeleton className="w-full h-36 rounded-lg" />
+              <Skeleton className="h-4 w-full" />
+            </div>
+          ))}
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="bg-white rounded-2xl shadow-sm p-6">
+      <h2 className="text-xl font-semibold mb-4">{title}</h2>
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+        {categories?.map((cat) => (
+          <Link
+            key={cat.id}
+            href={`/${locale}/category/${cat.slug}?category_id=${cat.id}`}
+          >
+            <Card className="hover:shadow-md border-none shadow-none p-0 gap-2 transition-all cursor-pointer">
+              <div className="relative w-full h-36 overflow-hidden rounded-lg">
+                <Image
+                  src={
+                    cat.media[0]?.thumbnail || cat.media?.[0]?.images_400x400
+                  }
+                  alt={cat.name}
+                  fill
+                  className="object-contain"
+                />
+              </div>
+              <CardContent className="py-2">
+                <p className="text-sm font-medium text-gray-800 truncate text-center">
+                  {cat.name}
+                </p>
+              </CardContent>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}

features/home/components/HomePage.tsx

@@ -0,0 +1,126 @@
+"use client";
+import { useLocale, useTranslations } from "next-intl";
+import { useState } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import HeroCarousel from "./Carousel";
+import CategoryGrid from "./CategoryGrid";
+import CollectionSection from "./ProductGrid";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  useCategories,
+  useCarousels,
+  useCollections,
+  useFavorites,
+} from "@/lib/hooks";
+
+export default function HomePage() {
+  const locale = useLocale();
+  const t = useTranslations("common");
+  const [visibleCount, setVisibleCount] = useState(10);
+
+  const {
+    data: categories,
+    isLoading: categoriesLoading,
+    isError: categoriesError,
+  } = useCategories();
+  const { data: carousels, isLoading: carouselsLoading } = useCarousels();
+  const {
+    data: collections,
+    isLoading: collectionsLoading,
+    isError: collectionsError,
+  } = useCollections();
+
+  useFavorites();
+
+  const loadMore = () => {
+    if (collections && visibleCount < collections.length) {
+      setVisibleCount((prev) => Math.min(prev + 10, collections.length));
+    }
+  };
+
+  const carouselItems =
+    carousels?.map((c) => ({
+      title: c.title || "",
+      image: c.image || c.thumbnail,
+      url: c.link || null,
+    })) || [];
+
+  const visibleCollections = collections?.slice(0, visibleCount) || [];
+  const hasMore = collections ? visibleCount < collections.length : false;
+
+  return (
+    <div className="px-2 md:px-4 lg:px-6 pt-4 pb-12 space-y-8 max-w-[1504px] mx-auto">
+      {carouselsLoading ? (
+        <section className=" bg-white rounded-2xl overflow-hidden">
+          <Skeleton className="w-full h-[200px] sm:h-[300px] md:h-[496px]" />
+        </section>
+      ) : (
+        carouselItems.length > 0 && <HeroCarousel items={carouselItems} />
+      )}
+
+      <CategoryGrid
+        categories={categories}
+        isLoading={categoriesLoading}
+        isError={categoriesError}
+        locale={locale}
+        title={t("categories")}
+      />
+
+      {collectionsError ? (
+        <section className="bg-white rounded-2xl shadow-sm p-6">
+          <p className="text-red-600">
+            Failed to load collections. Please try again.
+          </p>
+        </section>
+      ) : collectionsLoading ? (
+        <div className="space-y-8">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <section key={i} className="bg-white rounded-2xl shadow-sm p-6">
+              <div className="flex items-center justify-between mb-4">
+                <Skeleton className="h-8 w-48" />
+                <Skeleton className="h-6 w-6 rounded-full" />
+              </div>
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
+                {Array.from({ length: 10 }).map((_, j) => (
+                  <div key={j} className="space-y-2">
+                    <Skeleton className="w-full h-[260px] rounded-xl" />
+                    <Skeleton className="h-4 w-3/4 mx-2" />
+                    <Skeleton className="h-6 w-1/2 mx-2" />
+                  </div>
+                ))}
+              </div>
+            </section>
+          ))}
+        </div>
+      ) : (
+        <InfiniteScroll
+          dataLength={visibleCollections.length}
+          next={loadMore}
+          hasMore={hasMore}
+          loader={
+            <div className="text-center py-8">
+              <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-600 border-r-transparent" />
+              <p className="text-gray-500 mt-2">{t("loading")}</p>
+            </div>
+          }
+          endMessage={
+            <div className="text-center py-8">
+              <p className="text-gray-600">✓ {t("all_collections_loaded")}</p>
+            </div>
+          }
+          scrollThreshold={0.8}
+        >
+          <div className="space-y-8">
+            {visibleCollections.map((collection) => (
+              <CollectionSection
+                key={collection.id}
+                collection={collection}
+                locale={locale}
+              />
+            ))}
+          </div>
+        </InfiniteScroll>
+      )}
+    </div>
+  );
+}

features/home/components/ProductCard.tsx

@@ -0,0 +1,452 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback, MouseEvent } from "react";
+import { useRouter } from "next/navigation";
+import { Heart, ShoppingCart, Plus, Minus, AlertTriangle } from "lucide-react";
+import { toast } from "sonner";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+} from "@/components/ui/carousel";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useToggleFavorite, useIsFavorite } from "@/lib/hooks";
+import {
+  useAddToCart,
+  useUpdateCartItemQuantity,
+  useCart,
+} from "@/features/cart/hooks/useCart";
+import { useTranslations } from "next-intl";
+
+type ProductCardProps = {
+  id: number;
+  name: string;
+  price: number | null;
+  struct_price_text: string;
+  discount?: number | null;
+  discount_text?: string | null;
+  images: string[];
+  labels?: { text: string; bg_color: string }[];
+  price_color?: string;
+  height?: number;
+  width?: number;
+  button?: boolean;
+  stock?: number;
+};
+
+export default function ProductCard({
+  id,
+  name,
+  price,
+  struct_price_text,
+  images,
+  labels = [],
+  price_color = "#005bff",
+  height = 360,
+  width = 280,
+  button = false,
+  stock,
+}: ProductCardProps) {
+  const router = useRouter();
+  const t = useTranslations();
+  const { isFavorite, isLoading: isFavoriteLoading } = useIsFavorite(id);
+  const { mutate: toggleFavorite, isPending: isFavoriteToggling } =
+    useToggleFavorite();
+  const addToCartMutation = useAddToCart();
+  const updateCartMutation = useUpdateCartItemQuantity();
+  const { data: cartData, refetch: refetchCart } = useCart();
+
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [localQuantity, setLocalQuantity] = useState(1);
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [showStockModal, setShowStockModal] = useState(false);
+
+  const autoplayRef = useRef<NodeJS.Timeout | null>(null);
+  const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const isRequestInFlightRef = useRef<boolean>(false);
+  const pendingQuantityRef = useRef<number | null>(null);
+
+  const hasMultipleImages = images.length > 1;
+  const cartItem = cartData?.data?.find((item: any) => item.product?.id === id);
+  const isInCart = !!cartItem;
+  const isOutOfStock = stock === 0;
+  const availableStock = stock || 999;
+
+  useEffect(() => {
+    if (!api) return;
+    setCurrent(api.selectedScrollSnap());
+    const onSelect = () => setCurrent(api.selectedScrollSnap());
+    api.on("select", onSelect);
+    return () => {
+      api.off("select", onSelect);
+    };
+  }, [api]);
+
+  useEffect(() => {
+    if (!api || !hasMultipleImages) return;
+
+    autoplayRef.current = setInterval(() => {
+      api.canScrollNext() ? api.scrollNext() : api.scrollTo(0);
+    }, 3000);
+
+    return () => {
+      if (autoplayRef.current) clearInterval(autoplayRef.current);
+    };
+  }, [api, hasMultipleImages]);
+
+  useEffect(() => {
+    setLocalQuantity(cartItem?.product_quantity || 1);
+  }, [cartItem]);
+
+  const syncToServer = useCallback(
+    async (quantity: number) => {
+      if (isRequestInFlightRef.current) {
+        pendingQuantityRef.current = quantity;
+        return;
+      }
+
+      isRequestInFlightRef.current = true;
+      setIsSyncing(true);
+
+      try {
+        await updateCartMutation.mutateAsync({ productId: id, quantity });
+        await refetchCart();
+
+        if (pendingQuantityRef.current !== null) {
+          const nextQuantity = pendingQuantityRef.current;
+          pendingQuantityRef.current = null;
+          setTimeout(() => syncToServer(nextQuantity), 100);
+        }
+      } catch (error) {
+        console.error("Sync failed:", error);
+        setLocalQuantity(cartItem?.product_quantity || 1);
+        toast.error("Failed to update quantity", {
+          description: "Please try again",
+        });
+      } finally {
+        isRequestInFlightRef.current = false;
+        setIsSyncing(false);
+      }
+    },
+    [id, updateCartMutation, cartItem, refetchCart]
+  );
+
+  useEffect(() => {
+    if (!isInCart || localQuantity === (cartItem?.product_quantity || 1))
+      return;
+
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+
+    debounceTimerRef.current = setTimeout(() => {
+      syncToServer(localQuantity);
+    }, 800);
+
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    };
+  }, [localQuantity, isInCart, cartItem, syncToServer]);
+
+  const handleFavorite = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      toggleFavorite(
+        { productId: id, isFavorite },
+        {
+          onSuccess: (data) =>
+            toast.success(
+              data.wasAdded ? t("added_to_favorites") : t("removed_from_favorites")
+            ),
+          onError: () => toast.error("Error. Try again"),
+        }
+      );
+    },
+    [id, isFavorite, toggleFavorite]
+  );
+
+  const handleAddToCart = useCallback(
+    async (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (localQuantity > availableStock) {
+        setShowStockModal(true);
+        return;
+      }
+
+      setIsSyncing(true);
+
+      try {
+        await addToCartMutation.mutateAsync({
+          productId: id,
+          quantity: localQuantity,
+        });
+        toast.success(t("added_to_cart"), {
+          description: `${name} ${t("added_to_cart_description")}`,
+        });
+      } catch (error) {
+        console.error("Add to cart error:", error);
+        toast.error(t("add_to_cart_failed"));
+      } finally {
+        setIsSyncing(false);
+      }
+    },
+    [id, name, localQuantity, availableStock, addToCartMutation]
+  );
+
+  const handleQuantityChange = useCallback(
+    (e: MouseEvent<HTMLButtonElement>, delta: number) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const newQuantity = localQuantity + delta;
+
+      if (newQuantity < 1) return;
+
+      if (newQuantity > availableStock) {
+        setShowStockModal(true);
+        return;
+      }
+
+      setLocalQuantity(newQuantity);
+    },
+    [localQuantity, availableStock]
+  );
+
+  const handleCardClick = useCallback((e: MouseEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLElement;
+    
+    // Prevent navigation if clicking on buttons or interactive elements
+    if (
+      target.closest("button") ||
+      target.closest('[data-carousel-control="true"]') ||
+      target.closest('[role="dialog"]')
+    ) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    
+    // Programmatic navigation
+    e.preventDefault();
+    router.push(`/product/${id}`);
+  }, [router, id]);
+
+  const handleNavClick = (e: MouseEvent, action: () => void) => {
+    e.preventDefault();
+    e.stopPropagation();
+    action();
+  };
+
+  return (
+    <>
+      <div
+        onClick={handleCardClick}
+        className="flex justify-center cursor-pointer"
+      >
+        <Card
+          className="relative gap-2 border-none shadow-none p-0 w-full overflow-hidden rounded-2xl"
+          style={{ height, maxWidth: width }}
+        >
+          <div className="relative w-full h-[260px] group">
+            <Carousel
+              opts={{ align: "start", loop: true, watchDrag: false }}
+              setApi={setApi}
+              className="w-full h-full"
+            >
+              <CarouselContent className="h-[260px] ml-0">
+                {images.map((image, idx) => (
+                  <CarouselItem key={idx} className="h-[260px] pl-0">
+                    <div className="h-full flex items-center justify-center">
+                      <img
+                        src={image}
+                        alt={`${name} - ${idx + 1}`}
+                        className="max-w-full max-h-full object-contain"
+                        draggable="false"
+                      />
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+
+              {hasMultipleImages && (
+                <>
+                  <CarouselPrevious
+                    data-carousel-control="true"
+                    className="absolute left-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
+                    onClick={(e) => handleNavClick(e, () => api?.scrollPrev())}
+                  />
+                  <CarouselNext
+                    data-carousel-control="true"
+                    className="absolute right-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
+                    onClick={(e) => handleNavClick(e, () => api?.scrollNext())}
+                  />
+                </>
+              )}
+            </Carousel>
+
+            <button
+              onClick={handleFavorite}
+              disabled={isFavoriteToggling || isFavoriteLoading}
+              className="absolute top-3 cursor-pointer right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all disabled:opacity-50"
+            >
+              {isFavoriteLoading ? (
+                <div className="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" />
+              ) : (
+                <Heart
+                  className={`w-5 h-5 ${
+                    isFavorite ? "text-[#005bff] fill-[#005bff]" : "text-gray-700"
+                  }`}
+                />
+              )}
+            </button>
+
+            {hasMultipleImages && (
+              <div className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
+                {images.map((_, idx) => (
+                  <button
+                    key={idx}
+                    data-carousel-control="true"
+                    onClick={(e) => handleNavClick(e, () => api?.scrollTo(idx))}
+                    className={`h-1.5 rounded-full cursor-pointer transition-all ${
+                      idx === current ? "w-6 bg-white" : "w-1.5 bg-white/60"
+                    }`}
+                  />
+                ))}
+              </div>
+            )}
+
+            {labels.length > 0 && (
+              <div className="absolute top-2 left-2 flex flex-col gap-1 z-10">
+                {labels.map((label, idx) => (
+                  <Badge
+                    key={idx}
+                    className="text-white text-[10px] font-bold uppercase rounded-r-md"
+                    style={{ backgroundColor: label.bg_color }}
+                  >
+                    {label.text}
+                  </Badge>
+                ))}
+              </div>
+            )}
+
+            {isOutOfStock && (
+              <div className="absolute inset-0 bg-black/50 flex items-center justify-center z-10">
+                <Badge variant="secondary" className="text-sm font-bold">
+                  {t("outOfStock")}
+                </Badge>
+              </div>
+            )}
+          </div>
+
+          <CardContent className="p-0 space-y-1">
+            <p
+              className="text-sm mx-2 font-medium"
+              style={{ color: price_color }}
+            >
+              {struct_price_text}
+            </p>
+            <p className="text-black text-sm font-semibold leading-normal truncate mx-2">
+              {name}
+            </p>
+          </CardContent>
+
+          {button && !isOutOfStock && (
+            <div className="px-1">
+              {!isInCart ? (
+                <Button
+                  onClick={handleAddToCart}
+                  disabled={isSyncing}
+                  className="w-full rounded-lg cursor-pointer gap-2 bg-[#005bff] hover:bg-[#0041c4]"
+                  size="sm"
+                >
+                  {isSyncing ? (
+                    <>
+                      
+                      {t("adding")}
+                    </>
+                  ) : (
+                    <>
+                      <ShoppingCart className="h-4 w-4" />
+                      {t("add_to_cart")}
+                    </>
+                  )}
+                </Button>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={(e) => handleQuantityChange(e, -1)}
+                    disabled={isSyncing || localQuantity <= 1}
+                    className="rounded-lg cursor-pointer h-9 w-9 shrink-0"
+                  >
+                    <Minus className="h-4 w-4" />
+                  </Button>
+                  <div className="flex-1 text-center font-semibold text-sm border rounded-lg h-9 flex items-center justify-center bg-white relative">
+                    {localQuantity}
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={(e) => handleQuantityChange(e, 1)}
+                    disabled={isSyncing}
+                    className="rounded-lg cursor-pointer h-9 w-9 shrink-0"
+                  >
+                    <Plus className="h-4 w-4 text-[#005bff]" />
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+        </Card>
+      </div>
+
+      <Dialog open={showStockModal} onOpenChange={setShowStockModal}>
+        <DialogContent className="sm:max-w-md" onClick={(e) => e.stopPropagation()}>
+          <DialogHeader>
+            <div className="flex items-center justify-center mb-4">
+              <div className="rounded-full bg-orange-100 p-3">
+                <AlertTriangle className="h-6 w-6 text-orange-600" />
+              </div>
+            </div>
+            <DialogTitle className="text-center text-xl">
+              {t("stock_limit_title")}
+            </DialogTitle>
+            <DialogDescription className="text-center text-base pt-2">
+              {t("stock_limit_message", {
+                product: name,
+                stock: availableStock,
+              })}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-center mt-4">
+            <Button
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowStockModal(false);
+              }}
+              className="w-full rounded-lg cursor-pointer"
+            >
+              {t("understood")}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

features/home/components/ProductGrid.tsx

@@ -0,0 +1,103 @@
+"use client";
+import { useRouter } from "next/navigation";
+import { ChevronRight } from "lucide-react";
+import ProductCard from "@/features/home/components/ProductCard";
+import { useCollectionProducts } from "@/features/collections/hooks/useCollections";
+import type { Collection } from "@/lib/types/api";
+import { Skeleton } from "@/components/ui/skeleton";
+
+type Props = {
+  collection: Collection;
+  locale: string;
+};
+
+export default function CollectionSection({ collection, locale }: Props) {
+  const router = useRouter();
+  const {
+    data: productsData,
+    isLoading,
+    isError,
+  } = useCollectionProducts(collection.id);
+
+  const handleTitleClick = () => {
+    router.push(`/collections/${collection.slug}`);
+  };
+
+  if (isLoading) {
+    return (
+      <section className="bg-white rounded-2xl shadow-sm p-6">
+        <div className="flex items-center justify-between mb-4">
+          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-6 w-6 rounded-full" />
+        </div>
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
+          {Array.from({ length: 10 }).map((_, i) => (
+            <div key={i} className="space-y-2">
+              <Skeleton className="w-full h-[260px] rounded-xl" />
+              <Skeleton className="h-4 w-3/4 mx-2" />
+              <Skeleton className="h-6 w-1/2 mx-2" />
+            </div>
+          ))}
+        </div>
+      </section>
+    );
+  }
+
+  if (isError) return null;
+
+  // Hide section if no products
+  if (!productsData?.data || productsData.data.length === 0) {
+    return null;
+  }
+
+  const displayProducts = productsData?.data.slice(0, 10) || [];
+
+  return (
+    <section className="bg-white rounded-2xl shadow-sm p-6">
+      <div
+        className="flex items-center justify-between mb-4 cursor-pointer group"
+        onClick={handleTitleClick}
+      >
+        <h2 className="text-xl font-semibold group-hover:text-blue-600 transition-colors">
+          {collection.name}
+        </h2>
+        <ChevronRight className="w-6 h-6 text-gray-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-all" />
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
+        {displayProducts.map((product) => {
+          const allImages = product.media
+            ?.map(
+              (m) =>
+                m.images_800x800 ||
+                m.images_720x720 ||
+                m.images_400x400 ||
+                m.thumbnail
+            )
+            .filter(Boolean) || ["/placeholder-product.jpg"];
+
+          const formattedPrice = product.price_amount
+            ? `${parseFloat(product.price_amount).toFixed(2)} TMT`
+            : "Price not available";
+
+          return (
+            <ProductCard
+              key={product.id}
+              id={product.id}
+              name={product.name}
+              price={
+                product.price_amount ? parseFloat(product.price_amount) : null
+              }
+              struct_price_text={formattedPrice}
+              images={allImages}
+              labels={[]}
+              price_color="#0059ff"
+              height={360}
+              width={250}
+            />
+          );
+        })}
+      </div>
+    </section>
+  );
+}

features/home/hooks/useCollections.ts

@@ -0,0 +1,150 @@
+import { useQuery, useInfiniteQuery } from "@tanstack/react-query";
+import { apiClient } from "@/lib/api";
+import type { Collection, Product, PaginatedResponse } from "@/lib/types/api";
+
+// Get ALL collections (fetch all pages)
+export function useCollections(options?: { enabled?: boolean }) {
+  return useQuery({
+    queryKey: ["collections"],
+    queryFn: async () => {
+      const allCollections: Collection[] = [];
+      let currentPage = 1;
+      let hasMorePages = true;
+
+      while (hasMorePages) {
+        const response = await apiClient.get<PaginatedResponse<Collection>>(
+          "/collections",
+          { params: { page: currentPage, perPage: 50 } }
+        );
+
+        const collections = response.data.data || [];
+        allCollections.push(...collections);
+
+        // Check if there are more pages
+        const pagination = response.data.pagination;
+        if (pagination && pagination.next_page_url) {
+          currentPage++;
+        } else {
+          hasMorePages = false;
+        }
+      }
+
+      return allCollections;
+    },
+    enabled: options?.enabled !== false,
+    staleTime: 1000 * 60 * 30, // 30 minutes
+  });
+}
+
+// Get single collection by ID
+export function useCollection(
+  id: number | string,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: ["collection", id],
+    queryFn: async () => {
+      const response = await apiClient.get<Collection>(`/collections/${id}`);
+      return response.data;
+    },
+    enabled: options?.enabled !== false && !!id,
+    staleTime: 1000 * 60 * 15,
+  });
+}
+
+// Get ALL products for a collection (fetch all pages)
+export function useCollectionProducts(
+  collectionId: number | string,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: ["collection", collectionId, "products"],
+    queryFn: async () => {
+      const allProducts: Product[] = [];
+      let currentPage = 1;
+      let hasMorePages = true;
+
+      while (hasMorePages) {
+        const response = await apiClient.get<PaginatedResponse<Product>>(
+          `/collections/${collectionId}/products`,
+          { params: { page: currentPage, perPage: 50 } }
+        );
+
+        const products = response.data.data || [];
+        allProducts.push(...products);
+
+        // Check if there are more pages
+        const pagination = response.data.pagination;
+        if (pagination && pagination.next_page_url) {
+          currentPage++;
+        } else {
+          hasMorePages = false;
+        }
+      }
+
+      return {
+        data: allProducts,
+        isEmpty: allProducts.length === 0,
+      };
+    },
+    enabled: options?.enabled !== false && !!collectionId,
+  });
+}
+
+// Check if collection has products (limit=1 for efficiency)
+export function useCollectionHasProducts(
+  collectionId: number | string,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: ["collection", collectionId, "has-products"],
+    queryFn: async () => {
+      const response = await apiClient.get<PaginatedResponse<Product>>(
+        `/collections/${collectionId}/products`,
+        { params: { perPage: 20 } }
+      );
+      return {
+        hasProducts: response.data.data && response.data.data.length > 0,
+      };
+    },
+    enabled: options?.enabled !== false && !!collectionId,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  });
+}
+
+// Get collection products with infinite scroll (recommended for UI)
+export function useCollectionProductsInfinite(
+  collectionId: number | string,
+  options?: { enabled?: boolean; perPage?: number }
+) {
+  const perPage = options?.perPage || 6;
+
+  return useInfiniteQuery({
+    queryKey: ["collection", collectionId, "products-infinite", perPage],
+    queryFn: async ({ pageParam = 1 }) => {
+      const response = await apiClient.get<PaginatedResponse<Product>>(
+        `/collections/${collectionId}/products`,
+        {
+          params: {
+            page: pageParam,
+            perPage,
+          },
+        }
+      );
+      return {
+        data: response.data.data || [],
+        pagination: response.data.pagination,
+        isEmpty: !response.data.data || response.data.data.length === 0,
+      };
+    },
+    getNextPageParam: (lastPage) => {
+      if (lastPage.pagination?.next_page_url) {
+        const currentPage = lastPage.pagination.page || 1;
+        return currentPage + 1;
+      }
+      return undefined;
+    },
+    enabled: options?.enabled !== false && !!collectionId,
+    initialPageParam: 1,
+  });
+}

features/home/hooks/useMedia.ts

@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query"
+import { apiClient } from "@/lib/api"
+import type { Carousel, Banner, PaginatedResponse } from "@/lib/types/api"
+
+// Get all carousels
+export function useCarousels(options?: { enabled?: boolean }) {
+  return useQuery({
+    queryKey: ["carousels"],
+    queryFn: async () => {
+      const response = await apiClient.get<PaginatedResponse<Carousel>>("/media/carousels")
+      return response.data.data || response.data
+    },
+    enabled: options?.enabled !== false,
+    staleTime: 1000 * 60 * 30, // 30 minutes
+  })
+}
+
+// Get all banners
+export function useBanners(options?: { enabled?: boolean }) {
+  return useQuery({
+    queryKey: ["banners"],
+    queryFn: async () => {
+      const response = await apiClient.get<PaginatedResponse<Banner>>("/media/banners")
+      return response.data.data || response.data
+    },
+    enabled: options?.enabled !== false,
+    staleTime: 1000 * 60 * 30, // 30 minutes
+  })
+}

features/openStore/hooks/useOpenStore.ts

@@ -0,0 +1,47 @@
+"use client"
+
+import { useMutation } from "@tanstack/react-query"
+import { apiClient } from "@/lib/api"
+
+interface OpenStoreData {
+  firstName: string
+  lastName: string
+  email: string
+  phone: string
+  patentFile: File
+}
+
+interface OpenStoreResponse {
+  success: boolean
+  message: string
+  data?: any
+}
+
+const API_ENDPOINTS = {
+  openStore: "forms/newsletter-subscription",
+}
+
+export function useOpenStore() {
+  return useMutation<OpenStoreResponse, Error, OpenStoreData>({
+    mutationFn: async (data: OpenStoreData) => {
+      const formData = new FormData()
+      formData.append("firstname", data.firstName)
+      formData.append("lastname", data.lastName)
+      formData.append("email", data.email)
+      formData.append("phone", data.phone)
+      formData.append("file", data.patentFile)
+
+      const response = await apiClient.post<OpenStoreResponse>(
+        API_ENDPOINTS.openStore,
+        formData,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        }
+      )
+      
+      return response.data
+    },
+  })
+}

features/orders/components/EmptyOrders.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@/components/ui/button";
+import { ShoppingCart } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+
+export default function EmptyOrders() {
+  const t=useTranslations();
+  const router=useRouter();
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4">
+      <div className="w-full max-w-md rounded-2xl bg-linear-to-br from-blue-50 to-white p-8 text-center shadow-lg">
+        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
+          <ShoppingCart className="h-10 w-10 text-blue-600" />
+        </div>
+
+        <h2 className="mb-2 text-2xl font-semibold text-gray-900">
+          {t("orders_empty")}
+        </h2>
+
+        <p className="mb-6 text-sm text-gray-500">
+          {t("orders_empty_message")}
+        </p>
+
+        <Button onClick={()=>router.push("/")} className="w-full rounded-lg cursor-pointer bg-blue-600 px-6 py-3 text-sm font-medium text-white transition hover:bg-blue-700 active:scale-95">
+          {t("start_shopping")}
+        </Button>
+      </div>
+    </div>
+  );
+}

features/orders/components/OrderPage.tsx

@@ -0,0 +1,506 @@
+"use client";
+
+import { useState, useCallback, useMemo } from "react";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  ChevronDown,
+  ChevronUp,
+  Package,
+  Calendar,
+  MapPin,
+  CreditCard,
+  ShoppingBag,
+} from "lucide-react";
+import { toast } from "sonner";
+import { useOrders, useCancelOrder } from "@/lib/hooks";
+import { useTranslations } from "next-intl";
+import type { Order } from "@/lib/types/api";
+import EmptyOrders from "./EmptyOrders";
+import ErrorPage from "@/components/ErrorPage";
+interface OrdersPageClientProps {
+  locale: string;
+}
+
+export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
+  const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false);
+  const [orderToCancel, setOrderToCancel] = useState<Order | null>(null);
+  const [expandedOrders, setExpandedOrders] = useState<Set<number>>(new Set());
+
+  const t = useTranslations();
+
+  const { data: orders, isLoading, isError } = useOrders();
+  const { mutate: cancelOrder, isPending: isCancellingOrder } =
+    useCancelOrder();
+
+  const toggleOrderExpand = useCallback((orderId: number) => {
+    setExpandedOrders((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(orderId)) {
+        newSet.delete(orderId);
+      } else {
+        newSet.add(orderId);
+      }
+      return newSet;
+    });
+  }, []);
+
+  const handleCancelOrder = useCallback((order: Order) => {
+    setOrderToCancel(order);
+    setIsCancelDialogOpen(true);
+  }, []);
+
+  const confirmCancelOrder = useCallback(() => {
+    if (!orderToCancel) return;
+
+    cancelOrder(orderToCancel.id, {
+      onSuccess: () => {
+        toast.success(t("order_cancelled"));
+        setIsCancelDialogOpen(false);
+        setOrderToCancel(null);
+      },
+      onError: (error: any) => {
+        toast.error(error.message || t("cancel_order_failed"));
+      },
+    });
+  }, [orderToCancel, cancelOrder, toast, t]);
+
+  const getStatusBadge = useCallback((status: string) => {
+    const lowerStatus = status.toLowerCase();
+
+    if (
+      lowerStatus.includes("ожидается") ||
+      lowerStatus.includes("pending") ||
+      lowerStatus.includes("garaşlama")
+    ) {
+      return (
+        <Badge
+          variant="outline"
+          className="bg-yellow-50 text-yellow-700 border-yellow-300"
+        >
+          {status}
+        </Badge>
+      );
+    }
+    if (
+      lowerStatus.includes("обработка") ||
+      lowerStatus.includes("processing") ||
+      lowerStatus.includes("işlenýär")
+    ) {
+      return (
+        <Badge variant="secondary" className="bg-blue-50 text-blue-700">
+          {status}
+        </Badge>
+      );
+    }
+    if (
+      lowerStatus.includes("отправлен") ||
+      lowerStatus.includes("shipped") ||
+      lowerStatus.includes("iberildi")
+    ) {
+      return <Badge className="bg-purple-500">{status}</Badge>;
+    }
+    if (
+      lowerStatus.includes("доставлен") ||
+      lowerStatus.includes("delivered") ||
+      lowerStatus.includes("eltildi")
+    ) {
+      return <Badge className="bg-green-600">{status}</Badge>;
+    }
+    if (
+      lowerStatus.includes("отменен") ||
+      lowerStatus.includes("cancelled") ||
+      lowerStatus.includes("ýatyryldy")
+    ) {
+      return <Badge variant="destructive">{status}</Badge>;
+    }
+
+    return <Badge>{status}</Badge>;
+  }, []);
+
+  const isActiveOrder = useCallback((status: string) => {
+    const lower = status.toLowerCase();
+    return (
+      lower.includes("ожидается") ||
+      lower.includes("обработка") ||
+      lower.includes("отправлен") ||
+      lower.includes("pending") ||
+      lower.includes("processing") ||
+      lower.includes("shipped") ||
+      lower.includes("garaşylýar") ||
+      lower.includes("işlenýär") ||
+      lower.includes("iberildi")
+    );
+  }, []);
+
+  const activeOrders = useMemo(
+    () => orders?.filter((o) => isActiveOrder(o.status)) || [],
+    [orders, isActiveOrder]
+  );
+  const completedOrders = useMemo(
+    () => orders?.filter((o) => !isActiveOrder(o.status)) || [],
+    [orders, isActiveOrder]
+  );
+
+  const calculateTotal = useCallback((order: Order) => {
+    return order.orderItems.reduce((sum, item) => {
+      return sum + parseFloat(item.unit_price_amount) * item.quantity;
+    }, 0);
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="mx-auto p-2 lg:p-6 md:p-4 mb-16 min-h-screen">
+        <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">
+          {t("my_orders")}
+        </h1>
+
+        {/* Tabs Skeleton */}
+        <div className="mb-4 md:mb-6">
+          <div className="flex gap-2 mb-4">
+            <Skeleton className="h-10 w-32 rounded-md" />
+            <Skeleton className="h-10 w-32 rounded-md" />
+          </div>
+        </div>
+
+        {/* Order Cards Skeleton */}
+        <div className="space-y-4">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Card key={i} className="overflow-hidden py-2 md:py-4 lg:py-6">
+              <div className="p-2 md:p-4 mx-2 md:mx-4 rounded-lg">
+                <div className="flex items-center justify-between">
+                  {/* Left side - Order info */}
+                  <div className="flex items-center gap-4 flex-1">
+                    <Skeleton className="h-5 w-5 rounded" />
+                    <div className="space-y-2">
+                      <Skeleton className="h-5 w-32" />
+                      <Skeleton className="h-4 w-24" />
+                    </div>
+                  </div>
+
+                  {/* Right side - Status and price */}
+                  <div className="flex items-center gap-4">
+                    <div className="flex flex-col md:flex-row gap-2 items-end">
+                      <Skeleton className="h-6 w-20 rounded-full" />
+                      <Skeleton className="h-6 w-24" />
+                    </div>
+                    <Skeleton className="h-5 w-5 rounded" />
+                  </div>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return <ErrorPage />;
+  }
+  if (isError || !orders || orders.length === 0) {
+    return <EmptyOrders />;
+  }
+
+  return (
+    <div className=" mx-auto p-2 lg:p-6 md:p-4 mb-16 min-h-screen">
+      <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">
+        {t("my_orders")}
+      </h1>
+
+      <Tabs defaultValue="active" className="w-full">
+        <TabsList className="mb-4 md:mb-6 w-full md:w-fit gap-2 p-0">
+          <TabsTrigger value="active">
+            {t("active_orders")} ({activeOrders.length})
+          </TabsTrigger>
+          <TabsTrigger value="completed">
+            {t("completed_orders")} ({completedOrders.length})
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="active">
+          {activeOrders.length === 0 ? (
+            <div className="flex items-center justify-center min-h-[40vh]">
+              <p className="text-xl text-gray-400">{t("no_active_orders")}</p>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {activeOrders.map((order) => (
+                <CompactOrderCard
+                  key={order.id}
+                  order={order}
+                  isExpanded={expandedOrders.has(order.id)}
+                  onToggle={() => toggleOrderExpand(order.id)}
+                  onCancel={handleCancelOrder}
+                  isCancelling={isCancellingOrder}
+                  getStatusBadge={getStatusBadge}
+                  calculateTotal={calculateTotal}
+                  showCancelButton
+                  t={t}
+                />
+              ))}
+            </div>
+          )}
+        </TabsContent>
+
+        <TabsContent value="completed">
+          {completedOrders.length === 0 ? (
+            <div className="flex items-center justify-center min-h-[40vh]">
+              <p className="text-xl text-gray-400">
+                {t("no_completed_orders")}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {completedOrders.map((order) => (
+                <CompactOrderCard
+                  key={order.id}
+                  order={order}
+                  isExpanded={expandedOrders.has(order.id)}
+                  onToggle={() => toggleOrderExpand(order.id)}
+                  onCancel={handleCancelOrder}
+                  isCancelling={isCancellingOrder}
+                  getStatusBadge={getStatusBadge}
+                  calculateTotal={calculateTotal}
+                  showCancelButton={false}
+                  t={t}
+                />
+              ))}
+            </div>
+          )}
+        </TabsContent>
+      </Tabs>
+
+      <Dialog open={isCancelDialogOpen} onOpenChange={setIsCancelDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {t("cancel_order")} #{orderToCancel?.id}
+            </DialogTitle>
+            <DialogDescription>{t("cancel_confirmation")}</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsCancelDialogOpen(false)}
+              disabled={isCancellingOrder}
+              className="cursor-pointer"
+            >
+              {t("keep_order")}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={confirmCancelOrder}
+              disabled={isCancellingOrder}
+              className="cursor-pointer"
+            >
+              {isCancellingOrder ? t("cancelling") : t("cancel_order")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+interface CompactOrderCardProps {
+  order: Order;
+  isExpanded: boolean;
+  onToggle: () => void;
+  onCancel: (order: Order) => void;
+  isCancelling: boolean;
+  getStatusBadge: (status: string) => React.ReactNode;
+  calculateTotal: (order: Order) => number;
+  showCancelButton: boolean;
+  t: any;
+}
+
+function CompactOrderCard({
+  order,
+  isExpanded,
+  onToggle,
+  onCancel,
+  isCancelling,
+  getStatusBadge,
+  calculateTotal,
+  showCancelButton,
+  t,
+}: CompactOrderCardProps) {
+  const total = useMemo(() => calculateTotal(order), [calculateTotal, order]);
+  const itemCount = order.orderItems.length;
+
+  return (
+    <Card className="overflow-hidden transition-all py-2 md:py-4 lg:py-6 hover:shadow-md">
+      {/* Compact Header - Always Visible */}
+      <div
+        className="p-2 md:p-4 mx-2 md:mx-4 rounded-lg cursor-pointer bg-linear-to-r from-white to-gray-50 hover:from-gray-50 hover:to-gray-100 transition-colors"
+        onClick={onToggle}
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4 flex-1">
+            <div className="flex items-center gap-2">
+              <Package className="h-5 w-5 text-gray-500" />
+              <div>
+                <h3 className="font-semibold text-base lg:text-lg">
+                  {t("order_number")} {order.id}
+                </h3>
+                <p className="text-sm text-gray-500">
+                  {itemCount} {itemCount === 1 ? t("product") : t("products")}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <div className="flex flex-col md:flex-row gap-2 items-end">
+              {getStatusBadge(order.status)}
+              <div className="text-right">
+                <p className="font-bold text-lg text-green-600">
+                  {total.toFixed(2)} TMT
+                </p>
+              </div>
+            </div>
+            {isExpanded ? (
+              <ChevronUp className="h-5 w-5 text-gray-400" />
+            ) : (
+              <ChevronDown className="h-5 w-5 text-gray-400" />
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Expandable Details */}
+      {isExpanded && (
+        <div className="border-t bg-white">
+          {/* Order Info Grid */}
+          <div className="p-4 grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50">
+            {/* <div className="flex items-start gap-3">
+              <Calendar className="h-5 w-5 text-blue-500 mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-gray-700">
+                  {t("delivery_date")}
+                </p>
+                <p className="text-sm text-gray-900">
+                  {new Date(order.delivery_at).toLocaleDateString()} •{" "}
+                  {order.delivery_time}
+                </p>
+              </div>
+            </div> */}
+
+            <div className="flex items-start gap-3">
+              <MapPin className="h-5 w-5 text-red-500 mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-gray-700">
+                  {t("address")}
+                </p>
+                <p className="text-sm text-gray-900">
+                  {order.customer_address}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-3">
+              <CreditCard className="h-5 w-5 text-green-500 mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-gray-700">
+                  {t("payment_method")}
+                </p>
+                <p className="text-sm text-gray-900">{order.payment_type}</p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-3">
+              <ShoppingBag className="h-5 w-5 text-purple-500 mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-gray-700">
+                  {t("shipping_method")}
+                </p>
+                <p className="text-sm text-gray-900">{order.shipping_method}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Products List */}
+          <div className="p-4">
+            <h4 className="font-semibold mb-3 text-gray-700">
+              {t("products")}:
+            </h4>
+            <div className="space-y-3 max-h-96 overflow-y-auto">
+              {order.orderItems.map((item, index) => (
+                <div
+                  key={index}
+                  className="flex items-center gap-4 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+                >
+                  <div className="relative w-16 h-16 shrink-0 rounded-md overflow-hidden bg-white border">
+                    <Image
+                      src={
+                        item.product.images_400x400 || item.product.thumbnail
+                      }
+                      alt={item.product.name}
+                      fill
+                      className="object-contain p-1"
+                    />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium text-sm line-clamp-2">
+                      {item.product.name}
+                    </p>
+                    <p className="text-xs text-gray-500 mt-1">
+                      {item.quantity} × {item.unit_price_amount} TMT
+                    </p>
+                  </div>
+                  <div className="text-right">
+                    <p className="font-semibold text-sm">
+                      {(
+                        parseFloat(item.unit_price_amount) * item.quantity
+                      ).toFixed(2)}{" "}
+                      TMT
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Footer with Total and Actions */}
+          <div className="border-t p-4 bg-gray-50">
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-base font-semibold text-gray-700">
+                {t("total_price")}:
+              </span>
+              <span className="text-xl font-bold text-green-600">
+                {total.toFixed(2)} TMT
+              </span>
+            </div>
+
+            {showCancelButton && (
+              <Button
+                variant="destructive"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCancel(order);
+                }}
+                disabled={isCancelling}
+                className="w-full cursor-pointer"
+              >
+                {t("cancel_order")}
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}

features/orders/hooks/useOrders.ts

@@ -0,0 +1,77 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { apiClient } from "@/lib/api";
+import type { Order, OrdersResponse } from "@/lib/types/api";
+
+export function useOrders(options?: { page?: number; perPage?: number }) {
+  return useQuery<Order[]>({
+    queryKey: ["orders", options?.page],
+    queryFn: async () => {
+      const response = await apiClient.get<OrdersResponse>("/orders", {
+        params: {
+          page: options?.page || 1,
+          per_page: options?.perPage || 20,
+        },
+      });
+      
+      return response.data.data;
+    },
+    staleTime: 1000 * 60 * 5,
+    retry: 1,
+  });
+}
+
+export function useOrder(id: number | string) {
+  return useQuery<Order | null>({
+    queryKey: ["order", id],
+    queryFn: async () => {
+      const response = await apiClient.get(`/orders/${id}`);
+      return response.data.data || null;
+    },
+    enabled: !!id,
+    staleTime: 1000 * 60 * 5,
+    retry: 1,
+  });
+}
+
+// export function useCreateOrder() {
+//   const queryClient = useQueryClient();
+
+//   return useMutation({
+//     mutationFn: async (orderData: CreateOrderRequest) => {
+//       const formData = new URLSearchParams();
+
+//       Object.entries(orderData).forEach(([key, value]) => {
+//         if (value !== null && value !== undefined) {
+//           formData.append(key, String(value));
+//         }
+//       });
+
+//       const response = await apiClient.post("/orders", formData, {
+//         headers: {
+//           "Content-Type": "application/x-www-form-urlencoded",
+//         },
+//       });
+
+//       return response.data;
+//     },
+//     onSuccess: () => {
+//       queryClient.invalidateQueries({ queryKey: ["orders"] });
+//       queryClient.invalidateQueries({ queryKey: ["cart"] });
+//     },
+//   });
+// }
+
+export function useCancelOrder() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (orderId: number) => {
+      const response = await apiClient.delete(`/orders/${orderId}`);
+      return response.data;
+    },
+    onSuccess: (_, orderId) => {
+      queryClient.invalidateQueries({ queryKey: ["orders"] });
+      queryClient.invalidateQueries({ queryKey: ["order", orderId] });
+    },
+  });
+}

features/products/components/ProductImageGallery.tsx

@@ -0,0 +1,90 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import Image from "next/image";
+
+interface ProductImageGalleryProps {
+  images: string[];
+  productName: string;
+  noImageText: string;
+}
+
+export function ProductImageGallery({
+  images,
+  productName,
+  noImageText,
+}: ProductImageGalleryProps) {
+  const [selectedImage, setSelectedImage] = useState(0);
+  const autoplayTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+  useEffect(() => {
+    if (images.length <= 1) return;
+
+    const startAutoplay = () => {
+      autoplayTimerRef.current = setInterval(() => {
+        setSelectedImage((prev) => (prev + 1) % images.length);
+      }, 3000);
+    };
+
+    startAutoplay();
+    return () => {
+      if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
+    };
+  }, [images.length]);
+
+  const handleImageSelect = useCallback(
+    (index: number) => {
+      setSelectedImage(index);
+      if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
+      if (images.length > 1) {
+        autoplayTimerRef.current = setInterval(() => {
+          setSelectedImage((prev) => (prev + 1) % images.length);
+        }, 3000);
+      }
+    },
+    [images.length]
+  );
+
+  return (
+    <div className="contents  max-w-2xl">
+      <div className="relative">
+        <div className="relative aspect-square w-full rounded-2xl overflow-hidden bg-white">
+          {images.length > 0 ? (
+            <Image
+              src={images[selectedImage]}
+              alt={productName}
+              fill
+              className="object-contain"
+              priority
+            />
+          ) : (
+            <div className="flex items-center justify-center h-full text-gray-400">
+              {noImageText}
+            </div>
+          )}
+        </div>
+
+        {images.length > 1 && (
+          <div className="mt-4 flex gap-2 overflow-x-auto pb-2">
+            {images.map((image, index) => (
+              <button
+                key={index}
+                onClick={() => handleImageSelect(index)}
+                className={`relative w-16 h-16 shrink-0 rounded cursor-pointer overflow-hidden border-2 transition-all ${
+                  selectedImage === index
+                    ? "border-primary ring-2 ring-primary/20"
+                    : "border-gray-200 hover:border-gray-300"
+                }`}
+              >
+                <Image
+                  src={image}
+                  alt={`${productName} ${index + 1}`}
+                  fill
+                  className="object-cover"
+                />
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

features/products/components/ProductInfoCard.tsx

@@ -0,0 +1,126 @@
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Star } from "lucide-react";
+
+interface ProductProperty {
+  name: string;
+  value: string;
+}
+
+interface ProductInfoCardProps {
+  name: string;
+  brandName?: string;
+  stock?: number;
+  barcode?: string;
+  colour?: string;
+  properties?: ProductProperty[];
+  description?: string;
+  averageRating: number;
+  reviewsCount: number;
+  t: (key: string, params?: any) => string;
+}
+
+export function ProductInfoCard({
+  name,
+  brandName,
+  stock,
+  barcode,
+  colour,
+  properties,
+  description,
+  averageRating,
+  reviewsCount,
+  t,
+}: ProductInfoCardProps) {
+  return (
+    <div className="flex-1 space-y-6 bg-white">
+      <Card className="p-4 rounded-xl border-gray-200">
+        <h3 className="text-xl font-semibold mb-4">{name}</h3>
+        <div className="space-y-3">
+          {brandName && (
+            <>
+              <div className="flex justify-between items-center py-2">
+                <span className="text-gray-500">{t("brands")}</span>
+                <span className="font-medium">{brandName}</span>
+              </div>
+              <Separator />
+            </>
+          )}
+
+          {stock !== undefined && (
+            <>
+              <div className="flex justify-between items-center py-2">
+                <span className="text-gray-500">{t("stock")}</span>
+                <span
+                  className={`font-medium ${
+                    stock === 0
+                      ? "text-red-500"
+                      : stock <= 5
+                      ? "text-orange-600"
+                      : "text-green-600"
+                  }`}
+                >
+                  {stock === 0
+                    ? t("out_of_stock")
+                    : stock <= 5
+                    ? `${t("only_left", { count: stock })}`
+                    : stock}
+                </span>
+              </div>
+              <Separator />
+            </>
+          )}
+
+          {barcode && (
+            <>
+              <div className="flex justify-between items-center py-2">
+                <span className="text-gray-500">{t("barcode")}</span>
+                <span className="font-mono text-sm">{barcode}</span>
+              </div>
+              <Separator />
+            </>
+          )}
+
+          {colour && (
+            <>
+              <div className="flex justify-between items-center py-2">
+                <span className="text-gray-500">{t("color")}</span>
+                <span className="font-medium">{colour}</span>
+              </div>
+              <Separator />
+            </>
+          )}
+
+          {properties && properties.length > 0 && (
+            <>
+              {properties.map(
+                (prop, idx) =>
+                  prop.value && (
+                    <div key={idx}>
+                      <div className="flex justify-between items-center py-2">
+                        <span className="text-gray-500">{prop.name}</span>
+                        <span className="font-medium">{prop.value}</span>
+                      </div>
+                      {idx < properties.length - 1 && <Separator />}
+                    </div>
+                  )
+              )}
+            </>
+          )}
+        </div>
+      </Card>
+
+      {description && (
+        <Card className="p-4 rounded-xl border-gray-200 gap-2">
+          <h3 className="text-xl font-semibold mb-3">
+            {t("product_description")}
+          </h3>
+          <div
+            className="text-gray-700 leading-relaxed prose prose-sm max-w-none"
+            dangerouslySetInnerHTML={{ __html: description }}
+          />
+        </Card>
+      )}
+    </div>
+  );
+}

features/products/components/ProductPageContent.tsx

@@ -0,0 +1,553 @@
+"use client";
+
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  useProductsBySlug,
+  useRelatedProducts,
+  useSubmitReview,
+} from "@/features/products/hooks/useProducts";
+import {
+  useAddToCart,
+  useUpdateCartItemQuantity,
+  useRemoveFromCart,
+  useCart,
+  cartEvents,
+} from "@/features/cart/hooks/useCart";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { ProductImageGallery } from "./ProductImageGallery";
+import { ProductInfoCard } from "./ProductInfoCard";
+import { ProductPurchaseCard } from "./ProductPurchaseCard";
+import { ProductReviewsSection } from "./ProductReviewsSection";
+import { RelatedProductsSection } from "./RelatedProductsSection";
+import { ReviewModal } from "./ReviewModal";
+import { StockLimitModal } from "./StockLimitModal";
+import {
+  useIsFavorite,
+  useToggleFavorite,
+} from "@/features/favorites/hooks/useFavorites";
+interface ProductDetailProps {
+  slug: string;
+}
+
+const PENDING_PRODUCT_UPDATES_KEY = "pendingProductUpdates";
+
+interface PendingUpdate {
+  quantity: number;
+  timestamp: number;
+  retryCount: number;
+}
+
+// const DEBUG = true
+// const log = (...args: any[]) => {
+//   if (DEBUG) console.log("[ProductPage]", ...args)
+// }
+
+export default function ProductPageContent({ slug }: ProductDetailProps) {
+  const [localQuantity, setLocalQuantity] = useState(1);
+
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [syncError, setSyncError] = useState(false);
+  const [showStockModal, setShowStockModal] = useState(false);
+  const [showReviewModal, setShowReviewModal] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  const t = useTranslations();
+
+  const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const isRequestInFlightRef = useRef(false);
+  const pendingQuantityRef = useRef<number | null>(null);
+  const retryCountRef = useRef(0);
+  const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const syncToServerRef = useRef<((quantity: number) => void) | null>(null);
+  const retrySyncRef = useRef<((quantity: number) => void) | null>(null);
+  const shouldSyncFromCartRef = useRef(true);
+  const lastSyncedQuantityRef = useRef<number | null>(null);
+
+  const {
+    data: product,
+    isLoading: productLoading,
+    error,
+    refetch: refetchProduct,
+  } = useProductsBySlug(slug);
+  const { isFavorite, isLoading: isFavLoading } = useIsFavorite(
+    product?.id || 0
+  );
+  const cartOptions = useMemo(
+    () => ({
+      refetchOnMount: true,
+      refetchOnWindowFocus: true,
+      staleTime: 0,
+    }),
+    []
+  );
+  const { mutate: toggleFavoriteMutation } = useToggleFavorite();
+  const {
+    data: cartData,
+    refetch: refetchCart,
+    isFetching: isCartFetching,
+  } = useCart(cartOptions);
+
+  const { data: relatedProducts } = useRelatedProducts(product?.id || 0, {
+    enabled: !!product?.id,
+  });
+
+  const addToCartMutation = useAddToCart();
+  const updateCartMutation = useUpdateCartItemQuantity();
+  const removeFromCartMutation = useRemoveFromCart();
+  const submitReviewMutation = useSubmitReview();
+
+  const cartItem = useMemo(() => {
+    const item = cartData?.data?.find(
+      (item: any) => item.product?.id === product?.id
+    );
+
+    return item;
+  }, [cartData, product, isInitialized]);
+
+  const isInCart = !!cartItem;
+  const availableStock = product?.stock || 0;
+
+  const imageUrls = useMemo(
+    () =>
+      product?.media?.map(
+        (m) => m.images_800x800 || m.images_720x720 || m.thumbnail
+      ) || [],
+    [product]
+  );
+
+  const reviews = useMemo(() => product?.reviews_resources || [], [product]);
+  const averageRating = useMemo(
+    () =>
+      product?.reviews?.rating ? Number.parseFloat(product.reviews.rating) : 0,
+    [product]
+  );
+
+  const transformedRelatedProducts = useMemo(() => {
+    if (!relatedProducts) return [];
+    return relatedProducts.map((p) => ({
+      id: p.id,
+      slug: p.slug,
+      name: p.name,
+      price_amount: p.price_amount,
+      old_price_amount: p.old_price_amount ?? undefined,
+      struct_price_text: `${p.price_amount} TMT`,
+      discount: null,
+      discount_text: null,
+      stock: p.stock,
+      media: p.media,
+      labels: [],
+      price_color: undefined,
+    }));
+  }, [relatedProducts]);
+
+  useEffect(() => {
+    if (!product?.id || isInitialized) return;
+
+    if (cartItem?.product_quantity) {
+      const serverQuantity = cartItem.product_quantity;
+      setLocalQuantity(serverQuantity);
+      lastSyncedQuantityRef.current = serverQuantity;
+    }
+
+    setIsInitialized(true);
+  }, [product?.id, cartItem, isInitialized]);
+
+  useEffect(() => {
+    setLocalQuantity(cartItem?.product_quantity || 1);
+  }, [cartItem]);
+
+  const savePendingUpdate = useCallback(
+    (quantity: number) => {
+      if (!product?.id) return;
+      try {
+        const stored = sessionStorage.getItem(PENDING_PRODUCT_UPDATES_KEY);
+        const pending: Record<number, PendingUpdate> = stored
+          ? JSON.parse(stored)
+          : {};
+        pending[product.id] = {
+          quantity,
+          timestamp: Date.now(),
+          retryCount: retryCountRef.current,
+        };
+        sessionStorage.setItem(
+          PENDING_PRODUCT_UPDATES_KEY,
+          JSON.stringify(pending)
+        );
+      } catch (error) {
+        console.error("Failed to save pending update:", error);
+      }
+    },
+    [product?.id]
+  );
+
+  const clearPendingUpdate = useCallback(() => {
+    if (!product?.id) return;
+    try {
+      const stored = sessionStorage.getItem(PENDING_PRODUCT_UPDATES_KEY);
+      if (stored) {
+        const pending: Record<number, PendingUpdate> = JSON.parse(stored);
+        delete pending[product.id];
+        if (Object.keys(pending).length === 0) {
+          sessionStorage.removeItem(PENDING_PRODUCT_UPDATES_KEY);
+        } else {
+          sessionStorage.setItem(
+            PENDING_PRODUCT_UPDATES_KEY,
+            JSON.stringify(pending)
+          );
+        }
+      }
+    } catch (error) {
+      console.error("Failed to clear pending update:", error);
+    }
+  }, [product?.id]);
+
+  const retrySync = useCallback(
+    (quantity: number) => {
+      const maxRetries = 4;
+      const retryCount = retryCountRef.current;
+
+      if (retryCount >= maxRetries) {
+        setSyncError(true);
+        setIsSyncing(false);
+        shouldSyncFromCartRef.current = true;
+        toast.error(t("error"), {
+          description: t("update_quantity_failed"),
+        });
+        return;
+      }
+
+      const delay = Math.min(1000 * Math.pow(2, retryCount), 16000);
+      retryCountRef.current++;
+
+      retryTimerRef.current = setTimeout(() => {
+        syncToServerRef.current?.(quantity);
+      }, delay);
+    },
+    [t]
+  );
+
+  retrySyncRef.current = retrySync;
+
+  const syncToServer = useCallback(
+    async (quantity: number) => {
+      if (!product?.id) return;
+
+      if (isRequestInFlightRef.current) {
+        pendingQuantityRef.current = quantity;
+        return;
+      }
+
+      isRequestInFlightRef.current = true;
+      setIsSyncing(true);
+      setSyncError(false);
+
+      try {
+        if (quantity === 0) {
+          await removeFromCartMutation.mutateAsync(product.id);
+          toast.success(t("removed_from_cart"));
+        } else if (isInCart) {
+          await updateCartMutation.mutateAsync({
+            productId: product.id,
+            quantity: quantity,
+          });
+        } else {
+          await addToCartMutation.mutateAsync({
+            productId: product.id,
+            quantity: quantity,
+          });
+        }
+
+        retryCountRef.current = 0;
+        clearPendingUpdate();
+
+        if (pendingQuantityRef.current !== null) {
+          const nextQuantity = pendingQuantityRef.current;
+          pendingQuantityRef.current = null;
+          setTimeout(() => syncToServerRef.current?.(nextQuantity), 100);
+        }
+      } catch (error) {
+        setLocalQuantity(cartItem?.product_quantity || 1);
+        toast.error(t("failed_to_update_quantity"), {
+          description: "Please try again",
+        });
+
+        retrySyncRef.current?.(quantity);
+      } finally {
+        isRequestInFlightRef.current = false;
+        setIsSyncing(false);
+      }
+    },
+    [
+      product?.id,
+      isInCart,
+      updateCartMutation,
+      addToCartMutation,
+      removeFromCartMutation,
+      cartItem,
+      clearPendingUpdate,
+      t,
+    ]
+  );
+
+  syncToServerRef.current = syncToServer;
+
+  useEffect(() => {
+    if (!isInCart || !product?.id) return;
+
+    if (localQuantity === (cartItem?.product_quantity || 1)) {
+      return;
+    }
+
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    debounceTimerRef.current = setTimeout(() => {
+      syncToServerRef.current?.(localQuantity);
+    }, 800);
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [localQuantity, isInCart, product?.id, cartItem?.product_quantity]);
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+    };
+  }, []);
+
+  const handleAddToCart = useCallback(async () => {
+    if (!product?.id) return;
+
+    if (localQuantity > availableStock) {
+      setShowStockModal(true);
+      return;
+    }
+
+    setIsSyncing(true);
+    shouldSyncFromCartRef.current = false;
+
+    try {
+      await addToCartMutation.mutateAsync({
+        productId: product.id,
+        quantity: localQuantity,
+      });
+
+      lastSyncedQuantityRef.current = localQuantity;
+
+      setTimeout(() => {
+        shouldSyncFromCartRef.current = true;
+      }, 150);
+
+      setIsSyncing(false);
+
+      toast.success(t("added_to_cart"), {
+        description: `${product.name} ${t("added_to_cart_description")}`,
+      });
+    } catch (error) {
+      console.error("Add to cart error:", error);
+      setIsSyncing(false);
+      shouldSyncFromCartRef.current = true;
+      toast.error(t("error"), {
+        description: t("add_to_cart_failed"),
+      });
+    }
+  }, [product, localQuantity, availableStock, addToCartMutation, t]);
+
+  const handleQuantityIncrease = useCallback(() => {
+    if (localQuantity >= availableStock) {
+      setShowStockModal(true);
+      return;
+    }
+    setLocalQuantity((prev) => {
+      const newVal = prev + 1;
+      return newVal;
+    });
+  }, [localQuantity, availableStock]);
+
+  const handleQuantityDecrease = useCallback(() => {
+    if (localQuantity <= 0) return;
+    setLocalQuantity((prev) => {
+      const newVal = prev - 1;
+      return newVal;
+    });
+  }, [localQuantity]);
+
+  const handleToggleFavorite = useCallback(
+    (e?: React.MouseEvent<HTMLButtonElement>) => {
+      e?.preventDefault();
+      e?.stopPropagation();
+
+      if (!product?.id) {
+        toast.error(t("error"), {
+          description: "Product ID not found",
+        });
+        return;
+      }
+
+      toggleFavoriteMutation(
+        {
+          productId: product.id,
+          isFavorite,
+        },
+        {
+          onSuccess: (data) => {
+            toast.success(
+              data?.wasAdded
+                ? t("added_to_favorites")
+                : t("removed_from_favorites")
+            );
+          },
+          onError: () => {
+            toast.error(t("error"), {
+              description: "Try again later",
+            });
+          },
+        }
+      );
+    },
+    [product?.id, isFavorite, toggleFavoriteMutation, t]
+  );
+
+  const handleSubmitReview = useCallback(
+    async (rating: number, text: string) => {
+      if (!product?.id || rating === 0 || !text.trim()) {
+        toast.error(t("error"), {
+          description: "Please provide rating and review text",
+        });
+        return;
+      }
+
+      try {
+        await submitReviewMutation.mutateAsync({
+          productId: product.id,
+          rating: rating,
+          title: text,
+          source: "site",
+        });
+
+        await refetchProduct();
+
+        toast.success("Review submitted successfully!");
+        setShowReviewModal(false);
+      } catch (error) {
+        toast.error(t("error"), {
+          description: "Failed to submit review",
+        });
+      }
+    },
+    [product?.id, submitReviewMutation, refetchProduct, t]
+  );
+
+  const loadingSkeleton = useMemo(
+    () => (
+      <div className=" mx-auto px-4 py-8">
+        <div className="flex flex-col lg:flex-row gap-8">
+          <div className="flex-1 max-w-2xl">
+            <Skeleton className="aspect-square w-full rounded-2xl" />
+            <div className="mt-4 flex gap-2">
+              {[1, 2, 3].map((i) => (
+                <Skeleton key={i} className="w-16 h-16 rounded" />
+              ))}
+            </div>
+          </div>
+          <div className="flex-1 space-y-6">
+            <Skeleton className="h-10 w-64" />
+            <Skeleton className="h-20 w-full" />
+          </div>
+        </div>
+      </div>
+    ),
+    []
+  );
+
+  if (productLoading) return loadingSkeleton;
+
+  if (error || !product) {
+    return (
+      <div className=" mx-auto px-4 py-8 text-center">
+        <h2 className="text-2xl font-bold text-red-600">
+          {t("product_not_found")}
+        </h2>
+        <p className="text-gray-500 mt-2">
+          {t("product_not_found_description")}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="px-2 md:px-4 lg:px-6 rounded-lg mb-18 space-y-8 max-w-[1504px] mx-auto">
+        <div className="flex flex-col lg:flex-row gap-8 rounded-b-lg bg-white p-4">
+          <ProductImageGallery
+            images={imageUrls}
+            productName={product.name}
+            noImageText={t("no_image")}
+          />
+
+          <ProductInfoCard
+            name={product.name}
+            brandName={product.brand?.name ?? undefined}
+            stock={product.stock}
+            barcode={product.barcode}
+            colour={product.colour ?? undefined}
+            properties={product.properties}
+            description={product.description}
+            averageRating={averageRating}
+            reviewsCount={product.reviews?.count || 0}
+            t={t}
+          />
+
+          <ProductPurchaseCard
+            price={product.price_amount}
+            oldPrice={product.old_price_amount ?? undefined}
+            isInCart={isInCart}
+            localQuantity={localQuantity}
+            availableStock={availableStock}
+            isSyncing={isSyncing}
+            syncError={syncError}
+            isFavorite={isFavorite}
+            productStock={product.stock}
+            channelName={product.channel?.[0]?.name}
+            onAddToCart={handleAddToCart}
+            onQuantityIncrease={handleQuantityIncrease}
+            onQuantityDecrease={handleQuantityDecrease}
+            onToggleFavorite={handleToggleFavorite}
+            t={t}
+          />
+        </div>
+
+        <ProductReviewsSection
+          reviews={reviews}
+          averageRating={averageRating}
+          isLoading={false}
+          onWriteReview={() => setShowReviewModal(true)}
+        />
+
+        <RelatedProductsSection products={transformedRelatedProducts} />
+      </div>
+
+      <StockLimitModal
+        open={showStockModal}
+        onOpenChange={setShowStockModal}
+        productName={product.name}
+        availableStock={availableStock}
+        t={t}
+      />
+
+      <ReviewModal
+        open={showReviewModal}
+        onOpenChange={setShowReviewModal}
+        onSubmit={handleSubmitReview}
+        isSubmitting={submitReviewMutation.isPending}
+      />
+    </>
+  );
+}

features/products/components/ProductPurchaseCard.tsx

@@ -0,0 +1,190 @@
+import Link from "next/link";
+import { Minus, Plus, Heart, ShoppingCart, Store } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+interface ProductPurchaseCardProps {
+  price: string;
+  oldPrice?: string;
+  isInCart: boolean;
+  localQuantity: number;
+  availableStock: number;
+  isSyncing: boolean;
+  syncError: boolean;
+  isFavorite: boolean;
+  productStock: number;
+  channelName?: string;
+  onAddToCart: () => void;
+  onQuantityIncrease: () => void;
+  onQuantityDecrease: () => void;
+  onToggleFavorite: () => void;
+  t: (key: string) => string;
+}
+
+export function ProductPurchaseCard({
+  price,
+  oldPrice,
+  isInCart,
+  localQuantity,
+  availableStock,
+  isSyncing,
+  syncError,
+  isFavorite,
+  productStock,
+  channelName,
+  onAddToCart,
+  onQuantityIncrease,
+  onQuantityDecrease,
+  onToggleFavorite,
+  t,
+}: ProductPurchaseCardProps) {
+  return (
+    <div className="lg:w-[380px] space-y-4">
+      <Card className="p-6 rounded-xl">
+        <div className="flex justify-between items-start mb-6">
+          <span className="text-lg text-gray-500">{t("price")}:</span>
+          <div className="flex flex-col items-end">
+            <span className="text-3xl font-bold text-primary">{price} TMT</span>
+            {oldPrice && parseFloat(oldPrice) > 0 && (
+              <span className="text-lg text-gray-400 line-through">
+                {oldPrice} TMT
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          {isInCart ? (
+            <>
+              <Link href="/cart">
+                <Button
+                  size="lg"
+                  className="w-full rounded-lg cursor-pointer text-lg font-bold bg-green-600 hover:bg-green-700 mb-4"
+                >
+                  <ShoppingCart className="mr-2 h-5 w-5" />
+                  {t("go_to_cart")}
+                </Button>
+              </Link>
+
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={onQuantityDecrease}
+                  disabled={isSyncing}
+                  className={`rounded-lg cursor-pointer h-12 w-12 ${
+                    isSyncing ? "opacity-70" : ""
+                  }`}
+                >
+                  <Minus className="h-5 w-5" />
+                </Button>
+                <div className="flex-1 text-center font-semibold text-xl border rounded-xl h-12 flex items-center justify-center relative">
+                  {localQuantity}
+                  {syncError && (
+                    <span
+                      className="absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full"
+                      title="Sync error"
+                    />
+                  )}
+                </div>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={onQuantityIncrease}
+                  disabled={isSyncing}
+                  className={`rounded-lg cursor-pointer h-12 w-12 ${
+                    isSyncing ? "opacity-70" : ""
+                  }`}
+                >
+                  <Plus className="h-5 w-5" />
+                </Button>
+
+                
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={onToggleFavorite}
+                  className={`rounded-lg h-12 w-12 transition-all border cursor-pointer ${
+                    isFavorite
+                      ? "bg-[#F0F8FF] border-blue-300 hover:bg-blue-100"
+                      : "hover:bg-gray-50"
+                  }`}
+                >
+                  <Heart
+                    className={`h-6! w-6! transition-all ${
+                      isFavorite
+                        ? "fill-[#005bff] text-[#005bff]"
+                        : "text-[#005bff]"
+                    }`}
+                  />
+                </Button>
+              </div>
+            </>
+          ) : (
+            <div className="flex items-center gap-2">
+              <Button
+                size="lg"
+                onClick={onAddToCart}
+                disabled={isSyncing || productStock === 0}
+                className="flex-1 rounded-lg text-lg font-bold bg-[#005bff] hover:bg-[#0041c4] cursor-pointer"
+              >
+                {isSyncing ? (
+                  <>{t("adding")}</>
+                ) : (
+                  <>
+                    <ShoppingCart className="mr-2 h-5 w-5" />
+                    {productStock === 0 ? t("out_of_stock") : t("add_to_cart")}
+                  </>
+                )}
+              </Button>
+
+           
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={onToggleFavorite}
+                className={`rounded-lg h-12 w-12 transition-all border cursor-pointer ${
+                  isFavorite
+                    ? "bg-[#F0F8FF] border-blue-300 hover:bg-blue-100"
+                    : "hover:bg-gray-50"
+                }`}
+              >
+                <Heart
+                  className={`h-6! w-6! transition-all ${
+                    isFavorite
+                      ? "fill-[#005bff] text-[#005bff]"
+                      : "text-[#005bff]"
+                  }`}
+                />
+              </Button>
+            </div>
+          )}
+        </div>
+      </Card>
+
+      {channelName && (
+        <Card className="p-6 rounded-xl">
+          <div className="flex items-center gap-4 mb-4">
+            <Avatar className="w-14 h-14 bg-primary/10">
+              <AvatarFallback className="bg-transparent">
+                <Store className="h-6 w-6 text-primary" />
+              </AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-sm text-gray-500">{t("store")}</p>
+              <h4 className="text-lg font-bold">{channelName}</h4>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="lg"
+            className="w-full cursor-pointer rounded-lg"
+          >
+            {t("write_to_store")}
+          </Button>
+        </Card>
+      )}
+    </div>
+  );
+}

features/products/components/ProductReviewsSection.tsx

@@ -0,0 +1,94 @@
+import { Star, Send } from "lucide-react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useTranslations } from "next-intl";
+
+interface Review {
+  id: number;
+  rating: number;
+  title: string;
+  created_at: string;
+}
+
+interface ProductReviewsSectionProps {
+  reviews: Review[];
+  averageRating: number;
+  isLoading: boolean;
+  onWriteReview: () => void;
+}
+
+export function ProductReviewsSection({
+  reviews,
+  averageRating,
+  isLoading,
+  onWriteReview,
+}: ProductReviewsSectionProps) {
+  const renderStars = (rating: number) => {
+    return (
+      <div className="flex gap-1">
+        {[1, 2, 3, 4, 5].map((star) => (
+          <Star
+            key={star}
+            className={`h-5 w-5 transition-all ${
+              star <= rating
+                ? "fill-yellow-400 text-yellow-400"
+                : "text-gray-300"
+            }`}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  const t= useTranslations();
+
+  return (
+    <Card className="p-6 rounded-xl">
+      <div className="flex justify-between items-center ">
+        <div>
+          <h3 className="text-2xl font-bold">{t("customer_reviews")}</h3>
+          <div className="flex items-center gap-2 mt-2">
+            {renderStars(Math.round(averageRating))}
+            {/* <span className="text-sm text-gray-600">
+              {averageRating.toFixed(1)} out of 5
+            </span> */}
+          </div>
+        </div>
+        <Button onClick={onWriteReview} className="rounded-lg cursor-pointer bg-[#005bff] hover:bg-[#0041c4]">
+          <Send className="mr-2 h-4 w-4" />
+          {t("write_review")}
+        </Button>
+      </div>
+
+      <Separator className="my-4" />
+
+      {isLoading ? (
+        <div className="space-y-4">
+          {[1, 2, 3].map((i) => (
+            <Skeleton key={i} className="h-24 w-full" />
+          ))}
+        </div>
+      ) : reviews.length > 0 ? (
+        <div className="space-y-4">
+          {reviews.map((review) => (
+            <div key={review.id} className="border-b pb-4 last:border-0">
+              <div className="flex items-start justify-between mb-2">
+                <div>
+                  {renderStars(review.rating)}
+                  
+                </div>
+              </div>
+              <p className="text-gray-700">{review.title}</p>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-8 text-gray-500">
+          {t("no_reviews")}
+        </div>
+      )}
+    </Card>
+  );
+}

features/products/components/RelatedProductsSection.tsx

@@ -0,0 +1,74 @@
+import ProductCard from "@/features/home/components/ProductCard";
+import {useTranslations} from "next-intl";
+interface RelatedProduct {
+  id: number;
+  slug: string;
+  name: string;
+  price_amount: string;
+  old_price_amount?: string;
+  struct_price_text: string;
+  discount?: number | null;
+  discount_text?: string | null;
+  stock?: number;
+  media: Array<{
+    images_800x800?: string;
+    images_720x720?: string;
+    images_400x400?: string;
+    thumbnail: string;
+  }>;
+  labels?: Array<{
+    text: string;
+    bg_color: string;
+  }>;
+  price_color?: string;
+}
+
+interface RelatedProductsSectionProps {
+  products: RelatedProduct[];
+}
+
+export function RelatedProductsSection({
+  products,
+}: RelatedProductsSectionProps) {
+  const t = useTranslations();
+  if (!products || products.length === 0) return null;
+
+  return (
+    <div className="bg-white rounded-lg p-6">
+      <h2 className="text-2xl font-bold mb-6">{t("related_products")}</h2>
+      <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {products.slice(0, 4).map((product) => {
+          const images =
+            product.media?.map(
+              (m) =>
+                m.images_800x800 ||
+                m.images_720x720 ||
+                m.images_400x400 ||
+                m.thumbnail
+            ) || [];
+
+          return (
+            <ProductCard
+              key={product.id}
+              id={product.id}
+              name={product.name}
+              price={parseFloat(product.price_amount) || null}
+              struct_price_text={
+                product.struct_price_text || `${product.price_amount} TMT`
+              }
+              discount={product.discount}
+              discount_text={product.discount_text}
+              images={images}
+              labels={product.labels || []}
+              price_color={product.price_color}
+              height={360}
+              width={280}
+              button={true}
+              stock={product.stock}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

features/products/components/ReviewModal.tsx

@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { Star, Send } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { useTranslations } from "next-intl";
+
+interface ReviewModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (rating: number, text: string) => Promise<void>;
+  isSubmitting: boolean;
+}
+
+export function ReviewModal({
+  open,
+  onOpenChange,
+  onSubmit,
+  isSubmitting,
+}: ReviewModalProps) {
+  const [rating, setRating] = useState(0);
+  const [text, setText] = useState("");
+  const [hoveredStar, setHoveredStar] = useState(0);
+
+  const t = useTranslations();
+
+  const handleClose = () => {
+    onOpenChange(false);
+    setRating(0);
+    setText("");
+    setHoveredStar(0);
+  };
+
+  const handleSubmit = async () => {
+    await onSubmit(rating, text);
+    handleClose();
+  };
+
+  const renderStars = () => {
+    return (
+      <div className="flex gap-2">
+        {[1, 2, 3, 4, 5].map((star) => (
+          <Star
+            key={star}
+            className={`h-5 w-5 cursor-pointer transition-all ${
+              star <= (hoveredStar || rating)
+                ? "fill-yellow-400 text-yellow-400"
+                : "text-gray-300"
+            }`}
+            onClick={() => setRating(star)}
+            onMouseEnter={() => setHoveredStar(star)}
+            onMouseLeave={() => setHoveredStar(0)}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="text-xl">{t("write_review")}</DialogTitle>
+          <DialogDescription>
+            {t("share_experience")}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 pt-4">
+          <div>
+            <label className="block text-sm font-medium mb-2">{t("rating")}</label>
+            {renderStars()}
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2">
+              {t("your_review")}
+            </label>
+            <Textarea
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              placeholder={t("write_review")}
+              className="min-h-[120px] resize-none"
+              maxLength={500}
+            />
+            <p className="text-xs text-gray-500 mt-1">
+              {text.length}/500 {t("characters")}
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-3 mt-6">
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            className="flex-1 rounded-lg cursor-pointer"
+          >
+            {t("cancel")}
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={rating === 0 || !text.trim() || isSubmitting}
+            className="flex-1 rounded-lg cursor-pointer bg-[#005bff] hover:bg-[#0041c4]"
+          >
+            {isSubmitting ? (
+              <>
+                
+                {t("submitting")}
+              </>
+            ) : (
+              <>
+                <Send className="mr-2 h-4 w-4" />
+                {t("submit_review")}
+              </>
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

features/products/components/StockLimitModal.tsx

@@ -0,0 +1,56 @@
+import { AlertTriangle } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+interface StockLimitModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  productName: string;
+  availableStock: number;
+  t: (key: string, params?: any) => string;
+}
+
+export function StockLimitModal({
+  open,
+  onOpenChange,
+  productName,
+  availableStock,
+  t,
+}: StockLimitModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <div className="flex items-center justify-center mb-4">
+            <div className="rounded-full bg-orange-100 p-3">
+              <AlertTriangle className="h-6 w-6 text-orange-600" />
+            </div>
+          </div>
+          <DialogTitle className="text-center text-xl">
+            {t("stock_limit_title")}
+          </DialogTitle>
+          <DialogDescription className="text-center text-base pt-2">
+            {t("stock_limit_message", {
+              product: productName,
+              stock: availableStock,
+            })}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex justify-center mt-4">
+          <Button
+            onClick={() => onOpenChange(false)}
+            className="w-full rounded-lg cursor-pointer"
+          >
+            {t("understood")}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

features/products/hooks/useProducts.ts

@@ -0,0 +1,236 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { apiClient } from "@/lib/api";
+import type { Review, Product, PaginatedResponse } from "@/lib/types/api";
+
+// Types
+interface PaginationOptions {
+  enabled?: boolean;
+  page?: number;
+  limit?: number;
+}
+
+interface ReviewSubmission {
+  productId: number | string;
+  rating: number;
+  title: string;
+  source?: string;
+}
+
+interface ReviewUpdate {
+  reviewId: number | string;
+  rating?: number;
+  title?: string;
+  source?: string;
+}
+
+// Constants
+const DEFAULT_STALE_TIME = 1000 * 60 * 5; // 5 minutes
+const EXTENDED_STALE_TIME = 1000 * 60 * 15; // 15 minutes
+
+// Query Keys Factory
+const reviewKeys = {
+  all: ["reviews"],
+  lists: () => [...reviewKeys.all, "list"],
+  list: (page?: number, limit?: number) => [...reviewKeys.lists(), page, limit],
+  details: () => [...reviewKeys.all, "detail"],
+  detail: (id: number | string) => [...reviewKeys.details(), id],
+  related: (id: number | string) => [...reviewKeys.detail(id), "related"],
+  byProduct: (productId: number | string, page?: number, limit?: number) => [
+    ...reviewKeys.all,
+    "product",
+    productId,
+    page,
+    limit,
+  ],
+};
+
+const productKeys = {
+  all: ["products"],
+  details: () => [...productKeys.all, "detail"],
+  detail: (id: number | string) => [...productKeys.details(), id],
+  bySlug: (slug: string) => [...productKeys.all, "slug", slug],
+  related: (id: number | string) => [...productKeys.detail(id), "related"],
+};
+
+// Generic fetch function
+async function fetchData<T>(
+  url: string,
+  params?: Record<string, any>
+): Promise<T> {
+  const response = await apiClient.get<T>(url, { params });
+  return response.data;
+}
+
+// Review Queries
+export function useReview(
+  reviewId: number | string,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: reviewKeys.detail(reviewId),
+    queryFn: () => fetchData<Review>(`/reviews/${reviewId}`),
+    enabled: options?.enabled !== false && !!reviewId,
+    staleTime: DEFAULT_STALE_TIME * 2,
+  });
+}
+
+export function useReviews(options?: PaginationOptions) {
+  return useQuery({
+    queryKey: reviewKeys.list(options?.page, options?.limit),
+    queryFn: async () => {
+      const response = await fetchData<PaginatedResponse<Review>>("/reviews", {
+        page: options?.page || 1,
+        limit: options?.limit,
+      });
+      return {
+        data: response.data || [],
+        pagination: response.pagination || {},
+      };
+    },
+    enabled: options?.enabled !== false,
+    staleTime: DEFAULT_STALE_TIME,
+  });
+}
+
+export function useRelatedReviews(
+  reviewId: number | string,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: reviewKeys.related(reviewId),
+    queryFn: async () => {
+      const response = await fetchData<PaginatedResponse<Review>>(
+        `/reviews/${reviewId}/related`
+      );
+      return response.data || response;
+    },
+    enabled: options?.enabled !== false && !!reviewId,
+    staleTime: EXTENDED_STALE_TIME,
+  });
+}
+
+export function useProductReviews(
+  productId: number | string,
+  options?: PaginationOptions
+) {
+  return useQuery({
+    queryKey: reviewKeys.byProduct(productId, options?.page, options?.limit),
+    queryFn: async () => {
+      const response = await fetchData<PaginatedResponse<Review>>(
+        `/products/${productId}/reviews`,
+        {
+          page: options?.page || 1,
+          limit: options?.limit || 10,
+        }
+      );
+      return {
+        data: response.data || [],
+        pagination: response.pagination || {},
+      };
+    },
+    enabled: options?.enabled !== false && !!productId,
+    staleTime: DEFAULT_STALE_TIME,
+  });
+}
+
+// Product Queries
+export function useProduct(
+  productId: number | string,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: productKeys.detail(productId),
+    queryFn: () => fetchData<Product>(`/products/${productId}`),
+    enabled: options?.enabled !== false && !!productId,
+    staleTime: DEFAULT_STALE_TIME * 2,
+  });
+}
+
+export function useProductsBySlug(
+  slug: string,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: productKeys.bySlug(slug),
+    queryFn: async () => {
+      const response = await fetchData<{ data: Product }>(`/products/${slug}`);
+      return response.data || response;
+    },
+    enabled: options?.enabled !== false && !!slug,
+    staleTime: DEFAULT_STALE_TIME * 2,
+  });
+}
+
+export function useRelatedProducts(
+  productId: number | string,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey: productKeys.related(productId),
+    queryFn: async () => {
+      const response = await fetchData<PaginatedResponse<Product>>(
+        `/products/${productId}/related`
+      );
+      return response.data || [];
+    },
+    enabled: options?.enabled !== false && !!productId,
+    staleTime: EXTENDED_STALE_TIME,
+  });
+}
+
+// Review Mutations
+function useReviewMutation<TVariables, TData = any>(
+  mutationFn: (variables: TVariables) => Promise<TData>,
+  invalidateKeys: (variables: TVariables, data?: TData) => any[]
+) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn,
+    onSuccess: (data, variables) => {
+      const keys = invalidateKeys(variables, data);
+      keys.forEach((key) => {
+        queryClient.invalidateQueries({ queryKey: key });
+      });
+    },
+  });
+}
+
+export function useSubmitReview() {
+  return useReviewMutation<ReviewSubmission>(
+    async ({ productId, rating, title, source = "site" }) => {
+      const response = await apiClient.post<{
+        message: string;
+        data: Review[];
+      }>(`/products/${productId}/reviews`, { rating, title, source });
+      return response.data;
+    },
+    (variables) => [
+      reviewKeys.byProduct(variables.productId),
+      productKeys.bySlug(""), 
+      reviewKeys.all,
+    ]
+  );
+}
+
+export function useUpdateReview() {
+  return useReviewMutation<ReviewUpdate>(
+    async ({ reviewId, rating, title, source }) => {
+      const response = await apiClient.put<Review>(
+        `/reviews/${reviewId}`,
+        { rating, title, source },
+        { headers: { "Content-Type": "application/json" } }
+      );
+      return response.data;
+    },
+    (variables) => [reviewKeys.detail(variables.reviewId), reviewKeys.all]
+  );
+}
+
+export function useDeleteReview() {
+  return useReviewMutation<number | string>(
+    (reviewId) =>
+      apiClient.delete(`/reviews/${reviewId}`).then((res) => res.data),
+    (reviewId) => [reviewKeys.detail(reviewId), reviewKeys.all]
+  );
+}

features/profile/components/ProfilePageContent.tsx

@@ -0,0 +1,368 @@
+"use client";
+
+import { useCallback, useMemo, useState, useEffect } from "react";
+import { LogOut, Edit2, Save, X, User, Phone, MapPin } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useUserProfile, useUpdateProfile } from "@/lib/hooks";
+
+import { useLogout } from "@/lib/hooks/useAuth";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+
+interface ProfilePageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default function ClientProfilePage(props: ProfilePageProps) {
+  const { data: user, isLoading, error } = useUserProfile();
+  const updateProfile = useUpdateProfile();
+  const t = useTranslations();
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "",
+    last_name: "",
+    phone_number: "",
+    address: "",
+  });
+
+  useEffect(() => {
+    if (user && !isEditing) {
+      setFormData({
+        name: user.first_name || "",
+        last_name: user.last_name || "",
+        phone_number: user.phone_number || "",
+        address: user.address || "",
+      });
+    }
+  }, [user, isEditing]);
+  const { mutate: logout, isPending: isLoggingOut } = useLogout();
+  const handleLogout = useCallback(() => {
+    logout();
+    window.location.href = "/";
+  }, []);
+
+  const handleEdit = useCallback(() => {
+    if (user) {
+      setFormData({
+        name: user.first_name || "",
+        last_name: user.last_name || "",
+        phone_number: user.phone_number || "",
+        address: user.address || "",
+      });
+      setIsEditing(true);
+    }
+  }, [user]);
+
+  const handleCancel = useCallback(() => {
+    setIsEditing(false);
+    if (user) {
+      setFormData({
+        name: user.first_name || "",
+        last_name: user.last_name || "",
+        phone_number: user.phone_number || "",
+        address: user.address || "",
+      });
+    }
+  }, [user]);
+
+  const handleSave = useCallback(async () => {
+    if (!formData.name.trim()) {
+      toast.error(t("requiredField") || "Name is required");
+      return;
+    }
+
+    const apiData = {
+      name: formData.name.trim(),
+      last_name: formData.last_name.trim(),
+      phone_number: formData.phone_number.trim(),
+      address: formData.address.trim(),
+    };
+
+
+    try {
+      await updateProfile.mutateAsync(apiData);
+      setIsEditing(false);
+      toast.success(
+        t("profile_updated_success") || "Profile updated successfully"
+      );
+    } catch (err: any) {
+      const errorMessage =
+        err?.response?.data?.message ||
+        t("profile_update_error") ||
+        "Failed to update profile";
+      toast.error(errorMessage);
+      console.error("[Profile] Update error:", err);
+    }
+  }, [formData, updateProfile, t]);
+
+  const handleInputChange = useCallback(
+    (field: keyof typeof formData, value: string) => {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+    },
+    []
+  );
+
+  const loadingSkeleton = useMemo(
+    () => (
+      <div className="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8 pt-20 sm:pt-24">
+        <div className=" mx-auto max-w-4xl">
+          <div className="mb-6 sm:mb-8">
+            <Skeleton className="h-8 sm:h-10 w-32 sm:w-40 mb-2" />
+            <Skeleton className="h-4 w-48 sm:w-64" />
+          </div>
+          <Card className="shadow-sm">
+            <CardHeader>
+              <Skeleton className="h-6 w-32 mb-2" />
+              <Skeleton className="h-4 w-48" />
+            </CardHeader>
+            <CardContent className="space-y-4 sm:space-y-6">
+              {[1, 2, 3, 4].map((i) => (
+                <div key={i} className="space-y-2">
+                  <Skeleton className="h-4 w-24" />
+                  <Skeleton className="h-10 sm:h-11 w-full" />
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    ),
+    []
+  );
+
+  if (isLoading) {
+    return loadingSkeleton;
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+        <Card className="w-full max-w-md shadow-sm">
+          <CardContent className="pt-6 text-center">
+            <div className="w-12 h-12 sm:w-14 sm:h-14 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-4">
+              <X className="h-6 w-6 sm:h-7 sm:w-7 text-red-600" />
+            </div>
+            <p className="text-red-600 mb-4 text-sm sm:text-base">
+              {t("error_loading_profile")}
+            </p>
+            <Button
+              onClick={() => window.location.reload()}
+              className="w-full sm:w-auto cursor-pointer"
+            >
+              {t("try_again")}
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8 pb-20 sm:pb-24">
+      <div className=" mx-auto max-w-4xl">
+        {/* Header Section */}
+        <div className="mb-6 sm:mb-8">
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1 min-w-0">
+              <h1 className="text-xl md:text-2xl lg:text-3xl font-bold text-gray-900 mb-1 sm:mb-2 truncate">
+                {t("profile")}
+              </h1>
+              <p className="text-sm sm:text-base text-gray-600">
+                {isEditing
+                  ? t("edit_your_information")
+                  : t("view_your_information")}
+              </p>
+            </div>
+            <div className="shrink-0 w-12 h-12 sm:w-14 sm:h-14 bg-blue-600 rounded-full flex items-center justify-center shadow-sm">
+              <User className="h-6 w-6 sm:h-7 sm:w-7 text-white" />
+            </div>
+          </div>
+        </div>
+
+        {/* Profile Card */}
+        <Card className="shadow-sm border border-gray-200 mb-4 sm:mb-6">
+          <CardHeader className="border-b border-gray-100 pb-4 sm:pb-5">
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+              <div>
+                <CardTitle className="text-lg sm:text-xl text-gray-900">
+                  {t("personal_info")}
+                </CardTitle>
+                <CardDescription className="text-xs sm:text-sm text-gray-600 mt-1">
+                  {t("profile_description")}
+                </CardDescription>
+              </div>
+              {!isEditing && (
+                <Button
+                  onClick={handleEdit}
+                  variant="outline"
+                  size="sm"
+                  className="self-start sm:self-center cursor-pointer border-gray-300 hover:bg-gray-50 text-gray-700 h-9"
+                >
+                  <Edit2 className="h-3.5 w-3.5 sm:h-4 sm:w-4 mr-1.5 sm:mr-2" />
+                  <span className="text-sm">{t("edit")}</span>
+                </Button>
+              )}
+            </div>
+          </CardHeader>
+
+          <CardContent className="pt-5 sm:pt-6 space-y-4 sm:space-y-5">
+            {user && (
+              <>
+                {/* Name Fields - Grid on larger screens */}
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="name"
+                      className="text-sm font-medium text-gray-700 flex items-center gap-1.5"
+                    >
+                      <User className="h-3.5 w-3.5 text-gray-400" />
+                      {t("first_name")}
+                    </Label>
+                    <Input
+                      id="name"
+                      value={formData.name}
+                      onChange={(e) =>
+                        handleInputChange("name", e.target.value)
+                      }
+                      disabled={!isEditing}
+                      className={`h-10 sm:h-11 text-sm sm:text-base ${
+                        isEditing
+                          ? "border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
+                          : "bg-gray-50 border-gray-200 text-gray-700"
+                      }`}
+                      placeholder={t("enter_first_name")}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="lastName"
+                      className="text-sm font-medium text-gray-700 flex items-center gap-1.5"
+                    >
+                      <User className="h-3.5 w-3.5 text-gray-400" />
+                      {t("last_name")}
+                    </Label>
+                    <Input
+                      id="lastName"
+                      value={formData.last_name}
+                      onChange={(e) =>
+                        handleInputChange("last_name", e.target.value)
+                      }
+                      disabled={!isEditing}
+                      className={`h-10 sm:h-11 text-sm sm:text-base ${
+                        isEditing
+                          ? "border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
+                          : "bg-gray-50 border-gray-200 text-gray-700"
+                      }`}
+                      placeholder={t("enter_last_name")}
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">
+                  {/* Phone Field */}
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="phone"
+                      className="text-sm font-medium text-gray-700 flex items-center gap-1.5"
+                    >
+                      <Phone className="h-3.5 w-3.5 text-gray-400" />
+                      {t("phone_number")}
+                    </Label>
+                    <Input
+                      id="phone"
+                      value={formData.phone_number}
+                      onChange={(e) =>
+                        handleInputChange("phone_number", e.target.value)
+                      }
+                      disabled={!isEditing}
+                      className={`h-10 sm:h-11 text-sm sm:text-base ${
+                        isEditing
+                          ? "border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
+                          : "bg-gray-50 border-gray-200 text-gray-700"
+                      }`}
+                      placeholder={t("enter_phone_number")}
+                    />
+                  </div>
+                  {/* Address Field */}
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="address"
+                      className="text-sm font-medium text-gray-700 flex items-center gap-1.5"
+                    >
+                      <MapPin className="h-3.5 w-3.5 text-gray-400" />
+                      {t("address")}
+                    </Label>
+                    <Input
+                      id="address"
+                      value={formData.address}
+                      onChange={(e) =>
+                        handleInputChange("address", e.target.value)
+                      }
+                      disabled={!isEditing}
+                      className={`h-10 sm:h-11 text-sm sm:text-base ${
+                        isEditing
+                          ? "border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-white"
+                          : "bg-gray-50 border-gray-200 text-gray-700"
+                      }`}
+                      placeholder={t("enter_address")}
+                    />
+                  </div>
+                </div>
+
+                {/* Action Buttons - Edit Mode */}
+                {isEditing && (
+                  <div className="flex flex-col sm:flex-row gap-3 pt-4 sm:pt-5 border-t border-gray-100">
+                    <Button
+                      onClick={handleSave}
+                      disabled={updateProfile.isPending}
+                      className="w-full sm:flex-1 cursor-pointer bg-blue-600 hover:bg-blue-700 h-10 sm:h-11 text-sm sm:text-base font-medium shadow-sm"
+                    >
+                      <Save className="h-4 w-4 mr-2" />
+                      {updateProfile.isPending
+                        ? t("saving")
+                        : t("save_changes")}
+                    </Button>
+                    <Button
+                      onClick={handleCancel}
+                      variant="outline"
+                      disabled={updateProfile.isPending}
+                      className="w-full sm:flex-1 cursor-pointer h-10 sm:h-11 text-sm sm:text-base font-medium border-gray-300 hover:bg-gray-50"
+                    >
+                      <X className="h-4 w-4 mr-2" />
+                      {t("cancel")}
+                    </Button>
+                  </div>
+                )}
+              </>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Logout Button */}
+        <div className="flex justify-center">
+          <Button
+            onClick={handleLogout}
+            variant="destructive"
+            size="lg"
+            className="w-full cursor-pointer sm:w-auto sm:min-w-[280px] flex items-center justify-center gap-2 h-11 text-sm sm:text-base font-medium shadow-sm"
+          >
+            <LogOut className="h-4 w-4 sm:h-5 sm:w-5" />
+            {t("common.logout")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

features/profile/hooks/useUserProfile.ts

@@ -0,0 +1,37 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { apiClient } from "@/lib/api";
+// import { userStore } from "../userStore";
+import type { ProfileResponse, UpdateProfileRequest, UpdateProfileResponse } from "@/lib/types/api";
+
+export const useUserProfile = () => {
+  return useQuery<ProfileResponse["data"]>({
+    queryKey: ["user-profile"],
+    queryFn: async () => {
+      const response = await apiClient.get<ProfileResponse>("/profile");
+      const userData = response.data.data;
+      
+      // Store'a kaydet
+      // userStore.setUser(userData);
+      
+      return userData;
+    },
+    staleTime: 5 * 60 * 1000,
+    retry: 1,
+  });
+};
+
+export const useUpdateProfile = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<UpdateProfileResponse["data"], Error, UpdateProfileRequest>({
+    mutationFn: async (profileData) => {
+      const response = await apiClient.post<UpdateProfileResponse>("/profile", profileData);
+      return response.data.data;
+    },
+    onSuccess: (data) => {
+      // userStore.setUser(data);
+      queryClient.setQueryData(["user-profile"], data);
+      queryClient.invalidateQueries({ queryKey: ["user-profile"] });
+    },
+  });
+};

features/search/hooks/useSearch.ts

@@ -0,0 +1,30 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "@/lib/api";
+import type { SearchResponse, SearchParams } from "../types";
+
+export function useSearchProducts(params: SearchParams) {
+  const { q, barcode } = params;
+
+  return useQuery({
+    queryKey: ["search", { q, barcode }],
+    queryFn: async () => {
+      if (barcode) {
+        const response = await apiClient.get<SearchResponse>(
+          `/search-product-barcode?barcode=${barcode}`
+        );
+        return response.data;
+      }
+
+      if (q) {
+        const response = await apiClient.get<SearchResponse>(
+          `/search-product?q=${encodeURIComponent(q)}`
+        );
+        return response.data;
+      }
+
+      return { message: "success", data: [] };
+    },
+    enabled: !!(q && q.length > 0) || !!barcode,
+    staleTime: 1000 * 60 * 5,
+  });
+}

features/search/types.ts

@@ -0,0 +1,30 @@
+// Search Types
+export interface SearchProduct {
+  id: number;
+  name: string;
+  stock: number;
+  cost_amount: string;
+  price_amount: string;
+  brand: {
+    id: number;
+    name: string;
+  };
+  thumbnail: string;
+  media: Array<{
+    thumbnail: string;
+    images_400x400: string;
+    images_720x720: string;
+    images_800x800: string;
+    images_1200x1200: string;
+  }>;
+}
+
+export interface SearchResponse {
+  message: string;
+  data: SearchProduct[];
+}
+
+export interface SearchParams {
+  q?: string;
+  barcode?: string;
+}