added debounce to - + buttons

2025-11-16 23:37:21 +05:00
parent f867896817
commit 4fe0fb3d4e
52 changed files with 2548 additions and 2253 deletions
--- a/features/cart/components/CartItemCard.tsx
+++ b/features/cart/components/CartItemCard.tsx
@@ -1,176 +1,413 @@
 "use client"
-import { useState, useEffect, useRef } from "react"
+import { useState, useEffect, useRef, useCallback } from "react"
 import Image from "next/image"
-import { Minus, Plus, Trash2 } from "lucide-react"
+import { Minus, Plus, Trash2, Loader2, 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 type { CartItem, CartTranslations } from "./types"
+import { useTranslations } from "next-intl"
+import type { CartItem } from "@/lib/types/api"

 interface CartItemCardProps {
  item: CartItem
-  translations: CartTranslations
  onUpdate?: () => void
 }

-export default function CartItemCard({ item, translations: t, onUpdate }: CartItemCardProps) {
+// 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)
-  const [pendingQuantity, setPendingQuantity] = useState(item.quantity)
-  const [isLoading, setIsLoading] = useState(false)
-  const updateTimeoutRef = useRef<NodeJS.Timeout>()
+  
+  // 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)
-    setPendingQuantity(item.quantity)
  }, [item.quantity])

-  useEffect(() => {
-    if (pendingQuantity === item.quantity) return
+  // 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])

-    if (updateTimeoutRef.current) {
-      clearTimeout(updateTimeoutRef.current)
+  // 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
    }

-    updateTimeoutRef.current = setTimeout(() => {
-      setIsLoading(true)
+    const delay = Math.min(1000 * Math.pow(2, retryCount), 16000) // Max 16s
+    retryCountRef.current++
+    
+    retryTimerRef.current = setTimeout(() => {
+      syncToServerRef.current?.(quantity)
+    }, delay)
+  }, [])

-      if (pendingQuantity <= 0) {
-        removeItem(item.product_id, {
-          onSuccess: () => onUpdate?.(),
-          onError: () => {
-            setLocalQuantity(item.quantity)
-            setPendingQuantity(item.quantity)
-          },
-          onSettled: () => setIsLoading(false),
-        })
-      } else {
-        updateQuantity(
-          { productId: item.product_id, quantity: pendingQuantity },
-          {
-            onSuccess: () => onUpdate?.(),
-            onError: () => {
-              setLocalQuantity(item.quantity)
-              setPendingQuantity(item.quantity)
-            },
-            onSettled: () => setIsLoading(false),
+  // 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)
      }
-    }, 300)
+    }
+
+    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 (updateTimeoutRef.current) {
-        clearTimeout(updateTimeoutRef.current)
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current)
      }
    }
-  }, [pendingQuantity, item.quantity, item.product_id, updateQuantity, removeItem, onUpdate])
+  }, [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()
-    if (isLoading) return
-
-    const newQuantity = localQuantity + 1
-    setLocalQuantity(newQuantity)
-    setPendingQuantity(newQuantity)
+    
+    // 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 (isLoading) return
-
-    const newQuantity = localQuantity - 1
-    if (newQuantity < 1) {
+    
+    if (localQuantity <= 1) {
      handleDelete()
      return
    }
-
-    setLocalQuantity(newQuantity)
-    setPendingQuantity(newQuantity)
+    
+    // Optimistic update (instant UI feedback)
+    setLocalQuantity(prev => prev - 1)
  }

  const handleDelete = () => {
-    setIsLoading(true)
-    removeItem(item.product_id, {
-      onSuccess: () => onUpdate?.(),
-      onSettled: () => setIsLoading(false),
-    })
+    setLocalQuantity(0)
+    clearPendingUpdate()
  }

  const getImageSrc = () => {
    if (item.product.image) return item.product.image
-    if (item.product.images?.length > 0) return item.product.images[0]
+    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 flex-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>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleDelete}
-              disabled={isRemoving || isLoading}
-              className="w-fit 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.pricePerUnit} <span className="text-primary">{item.price_formatted}</span>
-            </p>
-            <p className="text-sm font-semibold">
-              {t.additionalPrice} {item.sub_total_formatted}
-            </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.totalPrice}</span>
-              <span className="bg-green-500 text-white px-3 py-1 rounded-xl font-semibold text-base">
-                {item.total_formatted}
-              </span>
+    <>
+      <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 flex-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 p-0 h-auto hover:bg-transparent hover:text-red-500"
+              >
+                <Trash2 className="h-5 w-5" />
+              </Button>
            </div>
          </div>

-          <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={handleQuantityDecrease}
-              disabled={isLoading || isRemoving}
-              className="rounded-xl bg-blue-50"
-            >
-              <Minus className="h-4 w-4" />
-            </Button>
-            <div className="w-12 text-center font-semibold">{localQuantity}</div>
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={handleQuantityIncrease}
-              disabled={isLoading || isRemoving}
-              className="rounded-xl bg-blue-50"
-            >
-              <Plus className="h-4 w-4" />
-            </Button>
+          <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>
+              <p className="text-sm font-semibold">
+                {t("extra_price")} {item.sub_total_formatted}
+              </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-xl 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={`rounded-xl bg-blue-50 ${isSyncing ? 'opacity-70' : ''}`}
+              >
+                <Minus className="h-4 w-4" />
+              </Button>
+              
+              <div className="w-12 text-center font-semibold relative">
+                {localQuantity}
+                {isSyncing && (
+                  <Loader2 className="h-3 w-3 animate-spin absolute -top-1 -right-3 text-blue-500" />
+                )}
+                {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-xl bg-blue-50 ${isSyncing ? 'opacity-70' : ''} ${
+                  localQuantity >= availableStock ? 'opacity-50 cursor-not-allowed' : ''
+                }`}
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
          </div>
        </div>
-      </div>
-    </Card>
+      </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-xl"
+            >
+              {t("understood")}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
  )
 }
--- a/features/cart/components/CartItemSkeleton.tsx
+++ b/features/cart/components/CartItemSkeleton.tsx
@@ -0,0 +1,27 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card } from "@/components/ui/card"
+
+export default function CartItemSkeleton() {
+  return (
+    <Card className="p-4 rounded-xl">
+      <div className="flex gap-4">
+        {/* Product Image */}
+        <Skeleton className="w-24 h-24 rounded-lg flex-shrink-0 bg-gray-200" />
+
+        {/* Product Info */}
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-3/4 bg-gray-200" />
+          <Skeleton className="h-4 w-1/2 bg-gray-200" />
+          <Skeleton className="h-6 w-20 bg-gray-200 mt-2" />
+        </div>
+
+        {/* Quantity Controls */}
+        <div className="flex items-center gap-2">
+          <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
+          <Skeleton className="w-8 h-8 bg-gray-200" />
+          <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
+        </div>
+      </div>
+    </Card>
+  )
+}
--- a/features/cart/components/DeliveryTypeSelector.tsx
+++ b/features/cart/components/DeliveryTypeSelector.tsx
@@ -1,31 +1,32 @@
 "use client"
 import { Truck, Warehouse } from "lucide-react"
 import { Card } from "@/components/ui/card"
-import { DeliveryType, CartTranslations } from "../types"
+import { useTranslations } from "next-intl"
+import type { DeliveryType } from "@/lib/types/api"

 interface DeliveryTypeSelectorProps {
  selectedType: DeliveryType
  onSelect: (type: DeliveryType) => void
-  translations: CartTranslations
 }

 export default function DeliveryTypeSelector({
  selectedType,
  onSelect,
-  translations: t,
 }: 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 },
+    { 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.deliveryType}</h3>
+      <h3 className="text-lg font-semibold mb-3">{t("delivery_type")}</h3>
      <div className="flex gap-2">
        {deliveryOptions.map(({ type, label, icon: Icon }) => (
          <Card
--- a/features/cart/components/EmptyCart.tsx
+++ b/features/cart/components/EmptyCart.tsx
@@ -0,0 +1,32 @@
+import { ShoppingCart } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+
+interface EmptyCartProps {
+  locale?: string
+  message?: string
+  actionText?: string
+  actionHref?: string
+}
+
+export default function EmptyCart({
+  locale = "ru",
+  message = "Your cart is empty",
+  actionText = "Start Shopping",
+  actionHref = "/",
+}: EmptyCartProps) {
+  return (
+    <div className="min-h-[400px] flex flex-col items-center justify-center p-4">
+      <ShoppingCart className="h-16 w-16 text-gray-300 mb-4" />
+      <h2 className="text-2xl font-semibold text-gray-600 mb-2">{message}</h2>
+      <p className="text-gray-500 mb-6 text-center max-w-sm">
+        {locale === "ru"
+          ? "Добавьте товары в корзину, чтобы начать покупки"
+          : "Add items to your cart to start shopping"}
+      </p>
+      <Link href={actionHref}>
+        <Button className="rounded-xl">{actionText}</Button>
+      </Link>
+    </div>
+  )
+}
--- a/features/cart/components/OrderSummary.tsx
+++ b/features/cart/components/OrderSummary.tsx
@@ -1,37 +1,58 @@
-"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 DeliveryTypeSelector from "./DeliveryTypeSelector"
-import type { Order, Province, DeliveryType, CartTranslations, PaymentType } from "../types"
+"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 DeliveryTypeSelector from "./DeliveryTypeSelector";
+import { useTranslations } from "next-intl";
+import type { DeliveryType, PaymentType, Province } from "@/lib/types/api";
+
+interface OrderBillingItem {
+  title: string;
+  value: string;
+}
+
+interface OrderBilling {
+  body: OrderBillingItem[];
+  footer: {
+    title: string;
+    value: string;
+  };
+}

 interface OrderSummaryProps {
-  order: Order
-  translations: CartTranslations
-  paymentType: PaymentType | null
-  deliveryType: DeliveryType
-  selectedRegion: string
-  selectedProvince: number | null
-  note: string
-  regionGroups: Record<string, Province[]>
-  availableRegions: string[]
-  paymentTypes: PaymentType[]
-  onPaymentTypeChange: (type: PaymentType) => void
-  onDeliveryTypeChange: (type: DeliveryType) => void
-  onRegionChange: (regionCode: string) => void
-  onProvinceChange: (provinceId: number) => void
-  onNoteChange: (note: string) => void
-  onCompleteOrder: () => void
-  isLoading: boolean
+  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[];
+  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,
-  translations: t,
  paymentType,
  deliveryType,
  selectedRegion,
@@ -48,29 +69,35 @@ export default function OrderSummary({
  onCompleteOrder,
  isLoading,
 }: OrderSummaryProps) {
-  const provincesForSelectedRegion = selectedRegion ? regionGroups[selectedRegion] || [] : []
-  const isFormValid = selectedRegion && selectedProvince && paymentType
+  const t = useTranslations();
+
+  const provincesForSelectedRegion = selectedRegion
+    ? regionGroups[selectedRegion] || []
+    : [];
+  const isFormValid = selectedRegion && selectedProvince && paymentType;

  return (
    <Card className="w-full md:w-[380px] p-6 rounded-xl h-fit sticky top-20">
      {/* Payment Type */}
      <div className="mb-6">
-        <h3 className="text-lg font-semibold mb-3">{t.paymentType}</h3>
+        <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" 
+                paymentType?.id === type.id
+                  ? "border-2 border-[#005bff] bg-blue-50"
                  : "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]" : ""
-                }`}>
+                <span
+                  className={`text-xs font-medium ${
+                    paymentType?.id === type.id ? "text-[#005bff]" : ""
+                  }`}
+                >
                  {type.name}
                </span>
              </div>
@@ -80,21 +107,22 @@ export default function OrderSummary({
      </div>

      {/* Delivery Type */}
-      <DeliveryTypeSelector 
-        selectedType={deliveryType} 
-        onSelect={onDeliveryTypeChange} 
-        translations={t} 
+      <DeliveryTypeSelector
+        selectedType={deliveryType}
+        onSelect={onDeliveryTypeChange}
      />

      {/* Region Selection */}
      <div className="mb-6">
-        <Label className="text-lg font-semibold mb-3 block">{t.selectRegion}</Label>
-        <RadioGroup 
-          value={selectedRegion} 
+        <Label className="text-lg font-semibold mb-3 block">
+          {t("choose_region")}
+        </Label>
+        <RadioGroup
+          value={selectedRegion}
          onValueChange={(value) => {
-            onRegionChange(value)
-            onProvinceChange(null as any)
-          }} 
+            onRegionChange(value);
+            onProvinceChange(null as any);
+          }}
          className="flex flex-wrap gap-4"
        >
          {availableRegions.map((regionCode) => (
@@ -104,7 +132,10 @@ export default function OrderSummary({
                id={`region-${regionCode}`}
                className="border-2 border-gray-400 data-[state=checked]:border-[#005bff] data-[state=checked]:bg-white"
              />
-              <Label htmlFor={`region-${regionCode}`} className="cursor-pointer uppercase">
+              <Label
+                htmlFor={`region-${regionCode}`}
+                className="cursor-pointer uppercase"
+              >
                {regionCode}
              </Label>
            </div>
@@ -115,13 +146,15 @@ export default function OrderSummary({
      {/* Province Selection */}
      {selectedRegion && provincesForSelectedRegion.length > 0 && (
        <div className="mb-6">
-          <Label className="text-lg font-semibold mb-3 block">{t.selectAddress}</Label>
-          <Select 
-            value={selectedProvince?.toString() || ""} 
+          <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-xl">
-              <SelectValue placeholder={t.selectAddress} />
+              <SelectValue placeholder={t("choose_address")} />
            </SelectTrigger>
            <SelectContent>
              {provincesForSelectedRegion.map((province) => (
@@ -136,20 +169,23 @@ export default function OrderSummary({

      {/* Note */}
      <div className="mb-6">
-        <Label className="text-lg font-semibold mb-3 block">{t.note}</Label>
+        <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}
+          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">
+          <div
+            key={index}
+            className="flex justify-between text-base font-medium"
+          >
            <span>{item.title}:</span>
            <span>{item.value}</span>
          </div>
@@ -159,8 +195,12 @@ export default function OrderSummary({
      <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>
+        <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
@@ -169,8 +209,8 @@ export default function OrderSummary({
        className="w-full rounded-xl bg-[#005bff] hover:bg-[#004dcc] h-12 text-lg font-bold disabled:opacity-50"
        size="lg"
      >
-        {isLoading ? `${t.placeOrder}...` : t.placeOrder}
+        {isLoading ? `${t("order")}...` : t("order")}
      </Button>
    </Card>
-  )
-}
+  );
+}
--- a/features/cart/components/PaymentTypeSelector.tsx
+++ b/features/cart/components/PaymentTypeSelector.tsx
@@ -1,49 +0,0 @@
-import React from "react";
-import { CreditCard } from "lucide-react";
-import { Card } from "@/components/ui/card";
-import { PaymentType, CartTranslations } from "./types";
-
-interface PaymentTypeSelectorProps {
-  selectedType: PaymentType;
-  onSelect: (type: PaymentType) => void;
-  translations: CartTranslations;
-}
-
-export default function PaymentTypeSelector({
-  selectedType,
-  onSelect,
-  translations: t,
-}: PaymentTypeSelectorProps) {
-  const paymentOptions: { type: PaymentType; label: string }[] = [
-    { type: "CASH", label: t.cash },
-    { type: "CARD", label: t.card },
-  ];
-
-  return (
-    <div className="mb-6">
-      <h3 className="text-lg font-semibold mb-3">{t.paymentType}</h3>
-      <div className="flex gap-2">
-        {paymentOptions.map(({ type, label }) => (
-          <Card
-            key={type}
-            className={`flex-1 cursor-pointer transition-all ${
-              selectedType === type
-                ? "border-2 border-[#005bff]"
-                : "border-2 border-gray-200"
-            }`}
-            onClick={() => onSelect(type)}
-          >
-            <div className="flex flex-col items-center justify-center p-4 gap-2">
-              <CreditCard
-                className={`h-8 w-8 ${
-                  selectedType === type ? "text-[#005bff]" : ""
-                }`}
-              />
-              <span className="text-xs">{label}</span>
-            </div>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}
--- a/features/cart/hooks/useCart.ts
+++ b/features/cart/hooks/useCart.ts
@@ -1,6 +1,6 @@
 import { useQuery, useMutation, useQueryClient, UseQueryOptions } from "@tanstack/react-query"
 import { apiClient } from "@/lib/api"
-import type {  CartItem } from "@/lib/types/api"
+import type { CartItem } from "@/lib/types/api"

 interface CartResponse {
  message: string
@@ -49,12 +49,13 @@ export function useCart(options?: Partial<UseQueryOptions<CartResponse>>) {
      const response = await apiClient.get("/carts")
      return transformCartResponse(response.data)
    },
-    refetchInterval: 5000, // Poll every 5 seconds like RTK
+    refetchInterval: 10000, // Increased to 10 seconds (less aggressive)
    refetchOnMount: true,
-    refetchOnWindowFocus: false,
+    refetchOnWindowFocus: true, // Enable to catch updates on tab focus
    refetchOnReconnect: true,
-    staleTime: 0,
-    retry: 1,
+    staleTime: 5000, // Data considered fresh for 5 seconds
+    retry: 2,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
    ...options,
  })
 }
@@ -92,7 +93,8 @@ export function useAddToCart() {
      return { message: "success", data: "Added to cart" }
    },
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["cart"] })
+      // Invalidate but don't refetch immediately (let polling handle it)
+      queryClient.invalidateQueries({ queryKey: ["cart"], refetchType: 'none' })
    },
    onError: (error: any) => {
      console.error("Add to cart error:", error.response?.data?.message || error.message)
@@ -130,6 +132,7 @@ export function useRemoveFromCart() {
      return []
    },
    onSuccess: () => {
+      // Immediate refetch after removal
      queryClient.invalidateQueries({ queryKey: ["cart"] })
    },
    onError: (error: any) => {
@@ -185,6 +188,7 @@ export function useUpdateCartItemQuantity() {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
+        timeout: 15000, // 15 second timeout
      })

      if (typeof response.data === "object" && response.data.data) {
@@ -204,10 +208,12 @@ export function useUpdateCartItemQuantity() {
      return { message: "success", data: "Updated cart" }
    },
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["cart"] })
+      // Invalidate but don't refetch immediately (let optimistic update handle it)
+      queryClient.invalidateQueries({ queryKey: ["cart"], refetchType: 'none' })
    },
    onError: (error: any) => {
      console.error("API update failed:", error.response?.data?.message || error.message)
+      throw error // Re-throw to trigger retry mechanism
    },
  })
 }
@@ -238,11 +244,4 @@ export function useCreateOrder() {
      console.error("Create order error:", error.response?.data?.message || error.message)
    },
  })
-}
-
-
-
-
-
-
-
+}
--- a/features/cart/types.ts
+++ b/features/cart/types.ts
@@ -1,171 +0,0 @@
-import type { StaticImageData } from "next/image";
-
-export interface Cart {
-  message: string;
-  data: CartItem[];
-  errorDetails?: string;
-  total?: number;
-  total_formatted?: string;
-  items?: CartItem[]; // Alternative structure
-}
-
-export interface Order {
-  id: number;
-  seller: {
-    id: number;
-    name: string;
-  };
-  items: CartItem[];
-  billing: {
-    body: Array<{ title: string; value: string }>;
-    footer: { title: string; value: string };
-  };
-}
-
-export interface Region {
-  id: number;
-  code: string;
-  name: string;
-}
-
-export interface Address {
-  id: number;
-  title: string;
-  region_id: number;
-  address: string;
-  phone?: string;
-  is_default?: boolean;
-}
-
-export interface PickUpPoint {
-  id: number;
-  name: string;
-  address: string;
-}
-
-export interface PaymentTypeOption {
-  id: number;
-  name: string;
-  code: string;
-}
-
-export interface CartTranslations {
-  cart: string;
-  ordersIn: string;
-  pricePerUnit: string;
-  additionalPrice: string;
-  discount: string;
-  totalPrice: string;
-  paymentType: string;
-  cash: string;
-  card: string;
-  deliveryType: string;
-  delivery: string;
-  pickup: string;
-  selectRegion: string;
-  selectAddress: string;
-  note: string;
-  placeOrder: string;
-  emptyCart: string;
-  map: string;
-}
-
-// API Response types
-export interface ApiResponse<T> {
-  message: string;
-  data: T;
-  errorDetails?: string;
-}
-
-export interface CreateOrderPayload {
-  customer_name?: string;
-  customer_phone?: string;
-  customer_address: string;
-  shipping_method: string;
-  payment_type_id: number;
-  delivery_time?: string;
-  delivery_at?: string;
-  region: string;
-  note?: string;
-}
-
-export interface CartItem {
-  id: number;
-  product_id: number;
-  product: {
-    id: number;
-    name: string;
-    description?: string;
-    media?: Array<{ images_800x800?: string; thumbnail?: string }>;
-    channel?: Array<{ id: number; name: string }>;
-    price_amount?: string;
-    stock?: number;
-  };
-  product_quantity: number;
-  quantity?: number; // For compatibility
-  seller?: {
-    id: number;
-    name: string;
-  };
-  price?: number;
-  total?: number;
-  price_formatted?: string;
-  sub_total_formatted?: string;
-  discount_formatted?: string;
-  total_formatted?: string;
-}
-
-export interface Province {
-  id: number;
-  region: string;
-  name: string;
-}
-
-export interface PaymentType {
-  id: number;
-  name: string;
-}
-
-export interface Order {
-  id: number;
-  seller: {
-    id: number;
-    name: string;
-  };
-  items: CartItem[];
-  billing: {
-    body: Array<{ title: string; value: string }>;
-    footer: { title: string; value: string };
-  };
-}
-
-export interface CartTranslations {
-  cart: string;
-  ordersIn: string;
-  pricePerUnit: string;
-  additionalPrice: string;
-  discount: string;
-  totalPrice: string;
-  paymentType: string;
-  cash: string;
-  card: string;
-  deliveryType: string;
-  delivery: string;
-  pickup: string;
-  selectRegion: string;
-  selectAddress: string;
-  note: string;
-  placeOrder: string;
-  emptyCart: string;
-  map: string;
-}
-
-export type DeliveryType = "SELECTED_DELIVERY" | "PICK_UP";
-
-export interface CreateOrderPayload {
-  customer_address: string;
-  shipping_method: string;
-  payment_type_id: number;
-  region: string;
-  note?: string;
-}
--- a/features/category/components/CategoryClient.tsx
+++ b/features/category/components/CategoryClient.tsx
@@ -2,9 +2,8 @@

 import { useEffect, useState, useMemo, useCallback } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { ChevronLeft, SlidersHorizontal, X } from "lucide-react";
+import { SlidersHorizontal, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Slider } from "@/components/ui/slider";
@@ -18,7 +17,6 @@ import {
 import { ScrollArea } from "@/components/ui/scroll-area";
 import InfiniteScroll from "react-infinite-scroll-component";
 import ProductCard from "@/components/ProductCard";
-import Loader from "@/components/Loader";
 import {
  useCategories,
  useAllCategoryProducts,
@@ -43,7 +41,8 @@ export default function CategoryPageClient({
  const t = useTranslations();

  // Fetch all categories first
-  const { data: categoriesData, isLoading: categoriesLoading } = useCategories();
+  const { data: categoriesData, isLoading: categoriesLoading } =
+    useCategories();

  // Find category from slug
  const selectedCategory = useMemo(() => {
@@ -65,7 +64,9 @@ export default function CategoryPageClient({

  // Track subcategories
  const [hasSubcategories, setHasSubcategories] = useState(false);
-  const [subcategoriesToShow, setSubcategoriesToShow] = useState<Category[]>([]);
+  const [subcategoriesToShow, setSubcategoriesToShow] = useState<Category[]>(
+    []
+  );

  // Pagination state
  const [currentPage, setCurrentPage] = useState(1);
@@ -73,13 +74,17 @@ export default function CategoryPageClient({
  const [allProducts, setAllProducts] = useState<Product[]>([]);

  // Price sorting state
-  const [priceSort, setPriceSort] = useState<"none" | "lowToHigh" | "highToLow">("none");
+  const [priceSort, setPriceSort] = useState<
+    "none" | "lowToHigh" | "highToLow"
+  >("none");

  // Price filter state
  const [priceRange, setPriceRange] = useState<[number, number]>([0, 10000]);

  // Selected filters state
-  const [selectedFilters, setSelectedFilters] = useState<Record<string, Set<number>>>({
+  const [selectedFilters, setSelectedFilters] = useState<
+    Record<string, Set<number>>
+  >({
    brand: new Set(),
    color: new Set(),
    tag: new Set(),
@@ -89,7 +94,10 @@ export default function CategoryPageClient({
  const isSubCategory = useMemo(() => {
    if (!categoriesData || !selectedCategory) return false;

-    const checkIsSubCategory = (categories: Category[], targetId: number): boolean => {
+    const checkIsSubCategory = (
+      categories: Category[],
+      targetId: number
+    ): boolean => {
      for (const category of categories) {
        if (category.children) {
          for (const subCategory of category.children) {
@@ -134,43 +142,42 @@ export default function CategoryPageClient({
    limit: 6,
  });

- 
-
  if (!slug) {
    notFound();
  }

  // Helper function to find category by ID
-  const findCategoryById = (
-    categories: Category[] | undefined,
-    id: number
-  ): Category | null => {
-    if (!categories) return null;
+  const findCategoryById = useCallback(
+    (categories: Category[] | undefined, id: number): Category | null => {
+      if (!categories) return null;

-    for (const category of categories) {
-      if (category.id === id) return category;
-      if (category.children) {
-        const found = findCategoryById(category.children, id);
-        if (found) return found;
+      for (const category of categories) {
+        if (category.id === id) return category;
+        if (category.children) {
+          const found = findCategoryById(category.children, id);
+          if (found) return found;
+        }
      }
-    }
-    return null;
-  };
+      return null;
+    },
+    []
+  );

  // Helper to check if product already exists in list
-  const isProductInList = (list: Product[], newProduct: Product) => {
-    return list.some((product) => product.id === newProduct.id);
-  };
+  const isProductInList = useCallback(
+    (list: Product[], newProduct: Product) => {
+      return list.some((product) => product.id === newProduct.id);
+    },
+    []
+  );

  // Setup subcategories when category changes
  useEffect(() => {
    if (selectedCategory) {
-      // Reset states
      setAllProducts([]);
      setHasMore(true);
      setCurrentPage(1);

-      // Set subcategories
      if (selectedCategory.children && selectedCategory.children.length > 0) {
        setHasSubcategories(true);
        setSubcategoriesToShow(selectedCategory.children);
@@ -189,17 +196,14 @@ export default function CategoryPageClient({
      subcategoryProducts.length > 0 &&
      currentPage === 1
    ) {
-      console.log("Setting subcategory products:", subcategoryProducts.length);
      setAllProducts(subcategoryProducts);
      setHasMore(true);
    }
  }, [selectedCategory, subcategoryProducts, currentPage, isSubCategory]);

-  // Handle paginated category products (non-subcategories) - FIXED
+  // Handle paginated category products (non-subcategories)
  useEffect(() => {
    if (paginatedCategoryData && selectedCategory && !isSubCategory) {
-      console.log("Paginated category data:", paginatedCategoryData);
-
      if (paginatedCategoryData.data && paginatedCategoryData.data.length > 0) {
        setAllProducts((prevProducts) => {
          if (currentPage === 1) {
@@ -213,14 +217,19 @@ export default function CategoryPageClient({
          return [...prevProducts, ...newProducts];
        });

-        // FIXED: Check next_page_url instead of pagination object existence
        setHasMore(!!paginatedCategoryData.pagination?.next_page_url);
      } else if (currentPage === 1) {
        setAllProducts([]);
        setHasMore(false);
      }
    }
-  }, [paginatedCategoryData, currentPage, selectedCategory, isSubCategory]);
+  }, [
+    paginatedCategoryData,
+    currentPage,
+    selectedCategory,
+    isSubCategory,
+    isProductInList,
+  ]);

  // Handle paginated subcategory products
  useEffect(() => {
@@ -230,8 +239,6 @@ export default function CategoryPageClient({
      isSubCategory &&
      currentPage > 1
    ) {
-      console.log("Paginated subcategory data:", paginatedSubcategoryData);
-
      if (
        paginatedSubcategoryData.data &&
        paginatedSubcategoryData.data.length > 0
@@ -249,16 +256,20 @@ export default function CategoryPageClient({
        setHasMore(false);
      }
    }
-  }, [paginatedSubcategoryData, currentPage, selectedCategory, isSubCategory]);
+  }, [
+    paginatedSubcategoryData,
+    currentPage,
+    selectedCategory,
+    isSubCategory,
+    isProductInList,
+  ]);

  const loadMoreData = useCallback(() => {
    if (!hasMore || categoryPaginatedFetching || subcategoryPaginatedLoading) {
-      console.log("Cannot load more:", { hasMore, categoryPaginatedFetching, subcategoryPaginatedLoading });
      return;
    }
-    console.log("Loading more, current page:", currentPage, "next page:", currentPage + 1);
    setCurrentPage((prevPage) => prevPage + 1);
-  }, [hasMore, categoryPaginatedFetching, subcategoryPaginatedLoading, currentPage]);
+  }, [hasMore, categoryPaginatedFetching, subcategoryPaginatedLoading]);

  const isLoading =
    categoriesLoading ||
@@ -294,27 +305,36 @@ export default function CategoryPageClient({
    return products.length || 0;
  }, [paginatedCategoryData, products, isSubCategory, selectedCategory]);

-  const handlePriceSortChange = (sortType: "none" | "lowToHigh" | "highToLow") => {
-    setPriceSort(sortType);
-  };
+  const handlePriceSortChange = useCallback(
+    (sortType: "none" | "lowToHigh" | "highToLow") => {
+      setPriceSort(sortType);
+    },
+    []
+  );

-  const handleSubCategorySelect = (subCategory: Category) => {
-    setAllProducts([]);
-    setCurrentPage(1);
-    setHasMore(true);
-    setPriceSort("none");
+  const handleSubCategorySelect = useCallback(
+    (subCategory: Category) => {
+      setAllProducts([]);
+      setCurrentPage(1);
+      setHasMore(true);
+      setPriceSort("none");

-    router.push(`/${locale}/category/${subCategory.slug}`, { scroll: false });
-  };
+      router.push(`/${locale}/category/${subCategory.slug}`, { scroll: false });
+    },
+    [locale, router]
+  );

-  const handleCategoryClick = (category: Category) => {
-    setAllProducts([]);
-    setCurrentPage(1);
-    setHasMore(true);
-    router.push(`/${locale}/category/${category.slug}`);
-  };
+  const handleCategoryClick = useCallback(
+    (category: Category) => {
+      setAllProducts([]);
+      setCurrentPage(1);
+      setHasMore(true);
+      router.push(`/${locale}/category/${category.slug}`);
+    },
+    [locale, router]
+  );

-  const renderBreadcrumbs = () => {
+  const renderBreadcrumbs = useCallback(() => {
    if (!categoriesData || !selectedCategory) return null;

    const breadcrumbs: Category[] = [];
@@ -348,11 +368,11 @@ export default function CategoryPageClient({
        ))}
      </div>
    );
-  };
+  }, [categoriesData, selectedCategory, findCategoryById, handleCategoryClick]);

  const pageTitle = selectedCategory?.name || t("category");

-  const handleFilterChange = (key: string, value: number) => {
+  const handleFilterChange = useCallback((key: string, value: number) => {
    setSelectedFilters((prev) => {
      const newFilters = { ...prev };
      if (!newFilters[key]) {
@@ -367,22 +387,25 @@ export default function CategoryPageClient({

      return newFilters;
    });
-  };
+  }, []);

-  const handlePriceChange = (values: number[]) => {
+  const handlePriceChange = useCallback((values: number[]) => {
    setPriceRange([values[0], values[1]]);
-  };
+  }, []);

-  const handlePriceInputChange = (type: "from" | "to", value: string) => {
-    const numValue = parseInt(value) || 0;
-    if (type === "from") {
-      setPriceRange([numValue, priceRange[1]]);
-    } else {
-      setPriceRange([priceRange[0], numValue]);
-    }
-  };
+  const handlePriceInputChange = useCallback(
+    (type: "from" | "to", value: string) => {
+      const numValue = parseInt(value) || 0;
+      if (type === "from") {
+        setPriceRange((prev) => [numValue, prev[1]]);
+      } else {
+        setPriceRange((prev) => [prev[0], numValue]);
+      }
+    },
+    []
+  );

-  const resetFilters = () => {
+  const resetFilters = useCallback(() => {
    setSelectedFilters({
      brand: new Set(),
      color: new Set(),
@@ -390,108 +413,112 @@ export default function CategoryPageClient({
    });
    setPriceRange([0, 10000]);
    setPriceSort("none");
-  };
+  }, []);
+
+  const FiltersContent = useCallback(
+    () => (
+      <div className="space-y-6">
+        {hasSubcategories && subcategoriesToShow.length > 0 && (
+          <div>
+            <h3 className="text-lg font-semibold mb-3">{t("subcategories")}</h3>
+            <div className="space-y-1">
+              {subcategoriesToShow.map((subCategory) => (
+                <button
+                  key={subCategory.id}
+                  onClick={() => handleSubCategorySelect(subCategory)}
+                  className={`w-full text-left py-2 px-2 rounded-lg hover:bg-gray-100 transition-colors ${
+                    slug === subCategory.slug
+                      ? "text-primary font-medium bg-gray-50"
+                      : ""
+                  }`}
+                >
+                  {subCategory.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}

-  const FiltersContent = () => (
-    <div className="space-y-6">
-      {hasSubcategories && subcategoriesToShow.length > 0 && (
        <div>
-          <h3 className="text-lg font-semibold mb-3">{t("subcategories")}</h3>
-          <div className="space-y-1">
-            {subcategoriesToShow.map((subCategory) => (
-              <button
-                key={subCategory.id}
-                onClick={() => handleSubCategorySelect(subCategory)}
-                className={`w-full text-left py-2 px-2 rounded-lg hover:bg-gray-100 transition-colors ${
-                  slug === subCategory.slug
-                    ? "text-primary font-medium bg-gray-50"
-                    : ""
-                }`}
-              >
-                {subCategory.name}
-              </button>
-            ))}
+          <h3 className="text-lg font-semibold mb-3">{t("sort")}</h3>
+          <div className="space-y-2">
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="sort"
+                checked={priceSort === "none"}
+                onChange={() => handlePriceSortChange("none")}
+                className="w-4 h-4"
+              />
+              <span>{t("default")}</span>
+            </label>
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="sort"
+                checked={priceSort === "lowToHigh"}
+                onChange={() => handlePriceSortChange("lowToHigh")}
+                className="w-4 h-4"
+              />
+              <span>{t("price_low_to_high")}</span>
+            </label>
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="sort"
+                checked={priceSort === "highToLow"}
+                onChange={() => handlePriceSortChange("highToLow")}
+                className="w-4 h-4"
+              />
+              <span>{t("price_high_to_low")}</span>
+            </label>
          </div>
        </div>
-      )}

-      <div>
-        <h3 className="text-lg font-semibold mb-3">{t("composition")}</h3>
-        <div className="space-y-2">
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="radio"
-              name="sort"
-              checked={priceSort === "none"}
-              onChange={() => handlePriceSortChange("none")}
-              className="w-4 h-4"
-            />
-            <span>{t("neverMind")}</span>
-          </label>
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="radio"
-              name="sort"
-              checked={priceSort === "lowToHigh"}
-              onChange={() => handlePriceSortChange("lowToHigh")}
-              className="w-4 h-4"
-            />
-            <span>{t("fromCheapToExpensive")}</span>
-          </label>
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="radio"
-              name="sort"
-              checked={priceSort === "highToLow"}
-              onChange={() => handlePriceSortChange("highToLow")}
-              className="w-4 h-4"
-            />
-            <span>{t("fromExpensiveToHigh")}</span>
-          </label>
-        </div>
+        <PriceFilter
+          title={t("price")}
+          priceRange={priceRange}
+          onPriceChange={handlePriceChange}
+          onInputChange={handlePriceInputChange}
+          translations={{ from: t("price_from"), to: t("price_to") }}
+        />
+
+        <Button
+          variant="outline"
+          className="w-full rounded-xl bg-transparent"
+          onClick={resetFilters}
+        >
+          {t("reset")}
+        </Button>
      </div>
-
-      <PriceFilter
-        title={t("price")}
-        priceRange={priceRange}
-        onPriceChange={handlePriceChange}
-        onInputChange={handlePriceInputChange}
-        translations={{ from: t("from"), to: t("to") }}
-      />
-
-      <Button
-        variant="outline"
-        className="w-full rounded-xl bg-transparent"
-        onClick={resetFilters}
-      >
-      {t("reset")}
-      </Button>
-    </div>
+    ),
+    [
+      hasSubcategories,
+      subcategoriesToShow,
+      slug,
+      priceSort,
+      priceRange,
+      t,
+      handleSubCategorySelect,
+      handlePriceSortChange,
+      handlePriceChange,
+      handlePriceInputChange,
+      resetFilters,
+    ]
  );

-  if (isLoading) return <div>{t("loading") || "Ýüklenýär..."}</div>;
+  if (isLoading) return <div>{t("common.loading")}</div>;

  if (!selectedCategory && !categoriesLoading) {
-    return <div className="text-center py-8">Bölüm tapylmady</div>;
+    return <div className="text-center py-8">{t("category_not_found")}</div>;
  }

-  console.log(
-    "Current state - products:",
-    products.length,
-    "hasMore:",
-    hasMore,
-    "page:",
-    currentPage,
-    "isFetching:",
-    categoryPaginatedFetching
-  );
-
  return (
    <div className="flex flex-col gap-4">
      {selectedCategory && renderBreadcrumbs()}
      <h2 className="text-3xl font-bold">{pageTitle}</h2>
      <p className="text-gray-600">
-        {t("total")}: {totalItems} {t("items")}
+        {t("total")}: {totalItems} {t("products")}
      </p>

      <div className="flex gap-4">
@@ -513,7 +540,7 @@ export default function CategoryPageClient({
              style={{ overflow: "visible" }}
              loader={
                <div className="flex justify-center py-4">
-                  <div>Ýüklenýär...</div>
+                  <div>{t("common.loading")}</div>
                </div>
              }
            >
@@ -536,7 +563,9 @@ export default function CategoryPageClient({
              </div>
            </InfiniteScroll>
          ) : (
-            <div className="text-center py-8 text-gray-500">{t("nResults")}</div>
+            <div className="text-center py-8 text-gray-500">
+              {t("no_results")}
+            </div>
          )}
        </div>
      </div>
@@ -560,7 +589,7 @@ export default function CategoryPageClient({
              className="absolute top-4 right-4 rounded-md ring-offset-background transition-opacity hover:opacity-100"
            >
              <X className="h-4 w-4" />
-              <span className="sr-only">Ýap</span>
+              <span className="sr-only">{t("close")}</span>
            </button>
          </SheetHeader>
          <ScrollArea className="h-[calc(100vh-80px)] p-4">
@@ -626,4 +655,4 @@ function PriceFilter({
      </div>
    </div>
  );
-}
+}
--- a/features/category/components/CategoryContent.tsx
+++ b/features/category/components/CategoryContent.tsx
@@ -1,9 +0,0 @@
-"use client"
-export default function CategoryPageContent({ slug }: { slug: string }) {
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-6">Category: {slug}</h1>
-      {/* Category content will go here */}
-    </div>
-  )
-}
--- a/features/category/components/CategorySkeleton.tsx
+++ b/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>
+  )
+}
--- a/features/category/types.ts
+++ b/features/category/types.ts
--- a/features/favorites/components/EmptyFavorites.tsx
+++ b/features/favorites/components/EmptyFavorites.tsx
@@ -0,0 +1,32 @@
+import { Heart } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+
+interface EmptyFavoritesProps {
+  locale?: string
+  message?: string
+  actionText?: string
+  actionHref?: string
+}
+
+export default function EmptyFavorites({
+  locale = "ru",
+  message = "No favorite items yet",
+  actionText = "Browse Products",
+  actionHref = "/",
+}: EmptyFavoritesProps) {
+  return (
+    <div className="min-h-[400px] flex flex-col items-center justify-center p-4">
+      <Heart className="h-16 w-16 text-gray-300 mb-4" />
+      <h2 className="text-2xl font-semibold text-gray-600 mb-2">{message}</h2>
+      <p className="text-gray-500 mb-6 text-center max-w-sm">
+        {locale === "ru"
+          ? "Сохраняйте понравившиеся товары, чтобы найти их позже"
+          : "Save items you love to find them later"}
+      </p>
+      <Link href={actionHref}>
+        <Button className="rounded-xl">{actionText}</Button>
+      </Link>
+    </div>
+  )
+}
--- a/features/favorites/types.ts
+++ b/features/favorites/types.ts
--- a/features/home/components/CategoryGrid.tsx
+++ b/features/home/components/CategoryGrid.tsx
@@ -50,7 +50,7 @@ export default function CategoryGrid({
  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-6 gap-4">
+      <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}
--- a/features/home/components/HomeSkeleton.tsx
+++ b/features/home/components/HomeSkeleton.tsx
@@ -0,0 +1,30 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import ProductGridSkeleton from "./ProductGridSkeleton"
+import CategorySkeleton from "../../category/components/CategorySkeleton"
+
+export default function HomeSkeleton() {
+  return (
+    <div className="px-4 md:px-8 lg:px-12 pt-8 pb-12 space-y-8">
+      {/* Hero Carousel Skeleton */}
+      <section className="rounded-2xl overflow-hidden">
+        <Skeleton className="w-full h-[200px] sm:h-[300px] md:h-[420px] bg-gray-200" />
+      </section>
+
+      {/* Categories Section Skeleton */}
+      <section className="bg-white rounded-2xl shadow-sm p-6">
+        <Skeleton className="h-6 w-32 mb-4 bg-gray-200" />
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <CategorySkeleton key={i} />
+          ))}
+        </div>
+      </section>
+
+      {/* Products Section Skeleton */}
+      <section className="bg-white rounded-2xl shadow-sm p-6">
+        <Skeleton className="h-6 w-32 mb-4 bg-gray-200" />
+        <ProductGridSkeleton count={10} columns="5" />
+      </section>
+    </div>
+  )
+}
--- a/features/home/components/ProductCardSkeleton.tsx
+++ b/features/home/components/ProductCardSkeleton.tsx
@@ -0,0 +1,23 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card } from "@/components/ui/card"
+
+export default function ProductCardSkeleton() {
+  return (
+    <Card className="overflow-hidden rounded-xl">
+      {/* Image Skeleton */}
+      <Skeleton className="aspect-square w-full bg-gray-200" />
+
+      {/* Content Skeleton */}
+      <div className="p-3 space-y-3">
+        {/* Title skeleton - 2 lines */}
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-full bg-gray-200" />
+          <Skeleton className="h-4 w-3/4 bg-gray-200" />
+        </div>
+
+        {/* Price skeleton */}
+        <Skeleton className="h-6 w-1/2 bg-gray-200" />
+      </div>
+    </Card>
+  )
+}
--- a/features/home/components/ProductGrid.tsx
+++ b/features/home/components/ProductGrid.tsx
@@ -76,7 +76,7 @@ export default function CollectionSection({ collection, locale }: Props) {
        <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-4 gap-4">
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
        {displayProducts.map((product) => {
          // Extract first media image or use placeholder
          const firstImage =
--- a/features/home/components/ProductGridSkeleton.tsx
+++ b/features/home/components/ProductGridSkeleton.tsx
@@ -0,0 +1,24 @@
+import ProductCardSkeleton from "./ProductCardSkeleton"
+
+interface ProductGridSkeletonProps {
+  count?: number
+  columns?: "2" | "3" | "4" | "5"
+}
+
+export default function ProductGridSkeleton({ count = 8, columns = "4" }: ProductGridSkeletonProps) {
+  const gridClass =
+    {
+      "2": "grid-cols-2",
+      "3": "md:grid-cols-3",
+      "4": "md:grid-cols-4 lg:grid-cols-4",
+      "5": "md:grid-cols-4 xl:grid-cols-5",
+    }[columns] || "md:grid-cols-4"
+
+  return (
+    <div className={`grid grid-cols-2 sm:grid-cols-3 ${gridClass} gap-4`}>
+      {Array.from({ length: count }).map((_, i) => (
+        <ProductCardSkeleton key={i} />
+      ))}
+    </div>
+  )
+}
--- a/features/home/hooks/useCollections.ts
+++ b/features/home/hooks/useCollections.ts
@@ -101,7 +101,7 @@ export function useCollectionHasProducts(
    queryFn: async () => {
      const response = await apiClient.get<PaginatedResponse<Product>>(
        `/collections/${collectionId}/products`,
-        { params: { perPage: 1 } }
+        { params: { perPage: 20 } }
      );
      return {
        hasProducts: response.data.data && response.data.data.length > 0,
--- a/features/home/types.ts
+++ b/features/home/types.ts
--- a/features/orders/components/EmptyOrders.tsx
+++ b/features/orders/components/EmptyOrders.tsx
@@ -0,0 +1,32 @@
+import { Package } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+
+interface EmptyOrdersProps {
+  locale?: string
+  message?: string
+  actionText?: string
+  actionHref?: string
+}
+
+export default function EmptyOrders({
+  locale = "ru",
+  message = "No orders yet",
+  actionText = "Start Shopping",
+  actionHref = "/",
+}: EmptyOrdersProps) {
+  return (
+    <div className="min-h-[400px] flex flex-col items-center justify-center p-4">
+      <Package className="h-16 w-16 text-gray-300 mb-4" />
+      <h2 className="text-2xl font-semibold text-gray-600 mb-2">{message}</h2>
+      <p className="text-gray-500 mb-6 text-center max-w-sm">
+        {locale === "ru"
+          ? "У вас еще нет заказов. Начните покупки прямо сейчас!"
+          : "You haven't placed any orders yet. Start shopping now!"}
+      </p>
+      <Link href={actionHref}>
+        <Button className="rounded-xl">{actionText}</Button>
+      </Link>
+    </div>
+  )
+}
--- a/features/orders/components/orders-content.tsx
+++ b/features/orders/components/orders-content.tsx
@@ -1,46 +0,0 @@
-"use client"
-
-import { useState } from "react"
-
-// ... existing types and code ...
-
-interface OrdersContentProps {
-  locale: string
-}
-
-export default function OrdersPageContent({ locale }: OrdersContentProps) {
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
-  const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null)
-  const [activeTab, setActiveTab] = useState<"active" | "completed">("active")
-
-  const t = {
-    orders: "Заказы",
-    active: "Активные",
-    completed: "Завершенные",
-    cancelOrder: "Отменить заказ",
-    areYouSure: "Вы уверены?",
-    yes: "Да",
-    no: "Нет",
-    orderNumber: "№",
-  }
-
-  const handleCancelOrder = (orderId: number) => {
-    setSelectedOrderId(orderId)
-    setIsDeleteModalOpen(true)
-  }
-
-  const confirmCancelOrder = async () => {
-    if (selectedOrderId) {
-      console.log("Canceling order:", selectedOrderId)
-      setIsDeleteModalOpen(false)
-      setSelectedOrderId(null)
-    }
-  }
-
-  return (
-    <div className="container mx-auto px-4 py-8 min-h-screen">
-      <h1 className="text-3xl font-bold mb-6">{t.orders}</h1>
-      {/* Orders content */}
-    </div>
-  )
-}
--- a/features/orders/components/orders-page-client.tsx
+++ b/features/orders/components/orders-page-client.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState } from "react";
+import { useState, useCallback, useMemo } from "react";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -17,130 +17,111 @@ import {
 } from "@/components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
 import { useOrders, useCancelOrder } from "@/lib/hooks";
-import type { Order } from "../types";
+import { useTranslations } from "next-intl";
+import type { Order } from "@/lib/types/api";

-export default function OrdersPageClient() {
+interface OrdersPageClientProps {
+  locale: string;
+}
+
+export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
  const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false);
  const [orderToCancel, setOrderToCancel] = useState<Order | null>(null);
  const { toast } = useToast();
+  const t = useTranslations();

  const { data: orders, isLoading, isError, error } = useOrders();
  const { mutate: cancelOrder, isPending: isCancellingOrder } = useCancelOrder();

-  const t = {
-    myOrders: "Мои заказы",
-    activeOrders: "Активные заказы",
-    completedOrders: "Завершенные заказы",
-    cancelOrder: "Отменить заказ",
-    keepOrder: "Оставить заказ",
-    cancelConfirmation: "Вы уверены, что хотите отменить этот заказ?",
-    cancelling: "Отмена...",
-    orderNumber: "Заказ №",
-    ordered: "Заказано",
-    completed: "Завершено",
-    estimatedDelivery: "Ожид. доставка",
-    quantity: "Кол-во",
-    total: "Итого",
-    noOrders: "У вас пока нет заказов",
-    noActiveOrders: "У вас нет активных заказов",
-    noCompletedOrders: "У вас нет завершенных заказов",
-    loadError: "Не удалось загрузить заказы",
-    orderCancelled: "Заказ отменен",
-    orderCancelledDescription: "Ваш заказ был успешно отменен",
-    error: "Ошибка",
-    status: "Статус",
-    deliveryTime: "Время доставки",
-    deliveryDate: "Дата доставки",
-    address: "Адрес",
-    paymentMethod: "Способ оплаты",
-  };
-
-  const handleCancelOrder = (order: Order) => {
+  const handleCancelOrder = useCallback((order: Order) => {
    setOrderToCancel(order);
    setIsCancelDialogOpen(true);
-  };
+  }, []);

-  const confirmCancelOrder = () => {
+  const confirmCancelOrder = useCallback(() => {
    if (!orderToCancel) return;

    cancelOrder(orderToCancel.id, {
      onSuccess: () => {
        toast({
-          title: t.orderCancelled,
-          description: t.orderCancelledDescription,
+          title: t("order_cancelled"),
+          description: t("order_cancelled_description"),
        });
        setIsCancelDialogOpen(false);
        setOrderToCancel(null);
      },
      onError: (error: any) => {
        toast({
-          title: t.error,
-          description: error.message || "Не удалось отменить заказ",
+          title: t("error"),
+          description: error.message || t("cancel_order_failed"),
          variant: "destructive",
        });
      },
    });
-  };
+  }, [orderToCancel, cancelOrder, toast, t]);

-  const getStatusBadge = (status: string) => {
+  const getStatusBadge = useCallback((status: string) => {
    const lowerStatus = status.toLowerCase();
    
-    if (lowerStatus.includes("ожидается") || lowerStatus.includes("pending")) {
+    if (lowerStatus.includes("ожидается") || lowerStatus.includes("pending") || lowerStatus.includes("garaşlama")) {
      return <Badge variant="outline">{status}</Badge>;
    }
-    if (lowerStatus.includes("обработка") || lowerStatus.includes("processing")) {
+    if (lowerStatus.includes("обработка") || lowerStatus.includes("processing") || lowerStatus.includes("işlenýär")) {
      return <Badge variant="secondary">{status}</Badge>;
    }
-    if (lowerStatus.includes("отправлен") || lowerStatus.includes("shipped")) {
+    if (lowerStatus.includes("отправлен") || lowerStatus.includes("shipped") || lowerStatus.includes("iberildi")) {
      return <Badge>{status}</Badge>;
    }
-    if (lowerStatus.includes("доставлен") || lowerStatus.includes("delivered")) {
+    if (lowerStatus.includes("доставлен") || lowerStatus.includes("delivered") || lowerStatus.includes("eltildi")) {
      return <Badge className="bg-green-600">{status}</Badge>;
    }
-    if (lowerStatus.includes("отменен") || lowerStatus.includes("cancelled")) {
+    if (lowerStatus.includes("отменен") || lowerStatus.includes("cancelled") || lowerStatus.includes("ýatyryldy")) {
      return <Badge variant="destructive">{status}</Badge>;
    }
    
    return <Badge>{status}</Badge>;
-  };
+  }, []);

-  const isActiveOrder = (status: string) => {
+  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("pending") || lower.includes("processing") || lower.includes("shipped") ||
+           lower.includes("garaşlama") || lower.includes("işlenýär") || lower.includes("iberildi");
+  }, []);

-  const activeOrders = orders?.filter((o) => isActiveOrder(o.status)) || [];
-  const completedOrders = orders?.filter((o) => !isActiveOrder(o.status)) || [];
+  const activeOrders = useMemo(() => orders?.filter((o) => isActiveOrder(o.status)) || [], [orders, isActiveOrder]);
+  const completedOrders = useMemo(() => orders?.filter((o) => !isActiveOrder(o.status)) || [], [orders, isActiveOrder]);

-  const calculateTotal = (order: Order) => {
+  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="container mx-auto p-4 min-h-screen">
-        <h1 className="text-3xl font-bold mb-6">{t.myOrders}</h1>
-        <div className="space-y-4">
-          <Skeleton className="h-10 w-40" />
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {Array.from({ length: 6 }).map((_, i) => (
-              <Skeleton key={i} className="h-64 rounded-lg" />
-            ))}
-          </div>
+  const loadingSkeleton = useMemo(() => (
+    <div className="container mx-auto p-4 min-h-screen">
+      <h1 className="text-3xl font-bold mb-6">{t("my_orders")}</h1>
+      <div className="space-y-4">
+        <Skeleton className="h-10 w-40" />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-64 rounded-lg" />
+          ))}
        </div>
      </div>
-    );
+    </div>
+  ), [t]);
+
+  if (isLoading) {
+    return loadingSkeleton;
  }

  if (isError) {
    return (
      <div className="container mx-auto p-4 min-h-screen">
-        <h1 className="text-3xl font-bold mb-6">{t.myOrders}</h1>
+        <h1 className="text-3xl font-bold mb-6">{t("my_orders")}</h1>
        <div className="bg-red-50 p-4 rounded-lg border border-red-200">
-          <p className="text-red-600">{t.loadError}</p>
+          <p className="text-red-600">{t("load_orders_error")}</p>
        </div>
      </div>
    );
@@ -149,9 +130,9 @@ export default function OrdersPageClient() {
  if (!orders || orders.length === 0) {
    return (
      <div className="container mx-auto p-4 min-h-screen">
-        <h1 className="text-3xl font-bold mb-6">{t.myOrders}</h1>
+        <h1 className="text-3xl font-bold mb-6">{t("my_orders")}</h1>
        <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-2xl text-gray-400">{t.noOrders}</p>
+          <p className="text-2xl text-gray-400">{t("no_orders")}</p>
        </div>
      </div>
    );
@@ -159,22 +140,22 @@ export default function OrdersPageClient() {

  return (
    <div className="container mx-auto p-4 min-h-screen">
-      <h1 className="text-3xl font-bold mb-6">{t.myOrders}</h1>
+      <h1 className="text-3xl font-bold mb-6">{t("my_orders")}</h1>

      <Tabs defaultValue="active" className="w-full">
        <TabsList className="mb-6">
          <TabsTrigger value="active">
-            {t.activeOrders} ({activeOrders.length})
+            {t("active_orders")} ({activeOrders.length})
          </TabsTrigger>
          <TabsTrigger value="completed">
-            {t.completedOrders} ({completedOrders.length})
+            {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.noActiveOrders}</p>
+              <p className="text-xl text-gray-400">{t("no_active_orders")}</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -186,7 +167,6 @@ export default function OrdersPageClient() {
                  isCancelling={isCancellingOrder}
                  getStatusBadge={getStatusBadge}
                  calculateTotal={calculateTotal}
-                  translations={t}
                  showCancelButton
                />
              ))}
@@ -197,7 +177,7 @@ export default function OrdersPageClient() {
        <TabsContent value="completed">
          {completedOrders.length === 0 ? (
            <div className="flex items-center justify-center min-h-[40vh]">
-              <p className="text-xl text-gray-400">{t.noCompletedOrders}</p>
+              <p className="text-xl text-gray-400">{t("no_completed_orders")}</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -209,7 +189,6 @@ export default function OrdersPageClient() {
                  isCancelling={isCancellingOrder}
                  getStatusBadge={getStatusBadge}
                  calculateTotal={calculateTotal}
-                  translations={t}
                  showCancelButton={false}
                />
              ))}
@@ -222,9 +201,9 @@ export default function OrdersPageClient() {
        <DialogContent>
          <DialogHeader>
            <DialogTitle>
-              {t.cancelOrder} #{orderToCancel?.id}
+              {t("cancel_order")} #{orderToCancel?.id}
            </DialogTitle>
-            <DialogDescription>{t.cancelConfirmation}</DialogDescription>
+            <DialogDescription>{t("cancel_confirmation")}</DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button
@@ -232,10 +211,10 @@ export default function OrdersPageClient() {
              onClick={() => setIsCancelDialogOpen(false)}
              disabled={isCancellingOrder}
            >
-              {t.keepOrder}
+              {t("keep_order")}
            </Button>
            <Button variant="destructive" onClick={confirmCancelOrder} disabled={isCancellingOrder}>
-              {isCancellingOrder ? t.cancelling : t.cancelOrder}
+              {isCancellingOrder ? t("cancelling") : t("cancel_order")}
            </Button>
          </DialogFooter>
        </DialogContent>
@@ -250,7 +229,6 @@ interface OrderCardProps {
  isCancelling: boolean;
  getStatusBadge: (status: string) => React.ReactNode;
  calculateTotal: (order: Order) => number;
-  translations: any;
  showCancelButton: boolean;
 }

@@ -260,34 +238,34 @@ function OrderCard({
  isCancelling,
  getStatusBadge,
  calculateTotal,
-  translations: t,
  showCancelButton,
 }: OrderCardProps) {
-  const total = calculateTotal(order);
+  const t = useTranslations();
+  const total = useMemo(() => calculateTotal(order), [calculateTotal, order]);

  return (
    <Card className="p-4 flex flex-col justify-between">
      <div>
        <div className="flex justify-between items-center mb-3">
          <h3 className="text-lg font-semibold">
-            {t.orderNumber}{order.id}
+            {t("order_number")}{order.id}
          </h3>
          {getStatusBadge(order.status)}
        </div>

        <div className="mb-3 space-y-1 text-sm">
          <p className="text-gray-600">
-            <span className="font-medium">{t.deliveryTime}:</span> {order.delivery_time}
+            <span className="font-medium">{t("delivery_time")}:</span> {order.delivery_time}
          </p>
          <p className="text-gray-600">
-            <span className="font-medium">{t.deliveryDate}:</span>{" "}
+            <span className="font-medium">{t("delivery_date")}:</span>{" "}
            {new Date(order.delivery_at).toLocaleDateString()}
          </p>
          <p className="text-gray-600">
-            <span className="font-medium">{t.address}:</span> {order.customer_address}
+            <span className="font-medium">{t("address")}:</span> {order.customer_address}
          </p>
          <p className="text-gray-600">
-            <span className="font-medium">{t.paymentMethod}:</span> {order.payment_type}
+            <span className="font-medium">{t("payment_method")}:</span> {order.payment_type}
          </p>
        </div>

@@ -304,7 +282,7 @@ function OrderCard({
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium line-clamp-2">{item.product.name}</p>
                <p className="text-xs text-gray-500">
-                  {t.quantity}: {item.quantity} × {item.unit_price_amount} TMT
+                  {t("product_quantity")}: {item.quantity} × {item.unit_price_amount} TMT
                </p>
              </div>
            </div>
@@ -313,7 +291,7 @@ function OrderCard({

        <div className="border-t pt-3">
          <div className="flex justify-between font-semibold">
-            <span>{t.total}</span>
+            <span>{t("total_price")}</span>
            <span>{total.toFixed(2)} TMT</span>
          </div>
        </div>
@@ -327,7 +305,7 @@ function OrderCard({
            disabled={isCancelling}
            className="w-full"
          >
-            {t.cancelOrder}
+            {t("cancel_order")}
          </Button>
        </div>
      )}
--- a/features/orders/hooks/useOrders.ts
+++ b/features/orders/hooks/useOrders.ts
@@ -1,6 +1,6 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { apiClient } from "@/lib/api";
-import type { Order, OrdersResponse, CreateOrderRequest } from "../types";
+import type { Order, OrdersResponse, CreateOrderRequest } from "@/lib/types/api";

 export function useOrders(options?: { page?: number; perPage?: number }) {
  return useQuery<Order[]>({
--- a/features/orders/types.ts
+++ b/features/orders/types.ts
@@ -1,59 +0,0 @@
-export interface OrderProduct {
-  id: number;
-  name: string;
-  thumbnail: string;
-  images_400x400: string;
-  images_800x800: string;
-  images_1200x1200: string;
-}
-
-export interface OrderItem {
-  product: OrderProduct;
-  order: {
-    id: number;
-  };
-  quantity: number;
-  unit_price_amount: string;
-}
-
-export interface Order {
-  id: number;
-  status: string;
-  shipping_method: string;
-  notes: string | null;
-  customer_name: string;
-  customer_phone: string;
-  customer_address: string;
-  delivery_time: string;
-  delivery_at: string;
-  region: string;
-  user_id: number;
-  province_id: number | null;
-  payment_type: string;
-  orderItems: OrderItem[];
-}
-
-export interface OrdersResponse {
-  message: string;
-  data: Order[];
-  pagination: {
-    page: number;
-    perPage: number;
-    count: number;
-    first_page_url: string;
-    next_page_url: string | null;
-    prev_page_url: string | null;
-  };
-}
-
-export interface CreateOrderRequest {
-  customer_name: string;
-  customer_phone: string;
-  customer_address: string;
-  shipping_method: string;
-  payment_type_id: number;
-  delivery_time?: string;
-  delivery_at?: string;
-  region: string;
-  note?: string;
-}
--- a/features/products/components/ProductPageContent.tsx
+++ b/features/products/components/ProductPageContent.tsx
@@ -1,401 +1,625 @@
-"use client"
+"use client";

-import { useState } from "react"
-import Image from "next/image"
-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 { Separator } from "@/components/ui/separator"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
-import { Skeleton } from "@/components/ui/skeleton"
-import { useProductsBySlug } from "@/features/products/hooks/useProducts"
-import { useAddToCart, useUpdateCartItemQuantity, useCart } from "@/features/cart/hooks/useCart"
-import { toast } from "sonner"
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Minus, Plus, Heart, ShoppingCart, Store, Loader2, AlertTriangle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useProductsBySlug } from "@/features/products/hooks/useProducts";
+import { useAddToCart, useUpdateCartItemQuantity, useCart } from "@/features/cart/hooks/useCart";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";

 interface ProductDetailProps {
-  slug: string
+  slug: string;
 }

-const ProductPageContent = ({ slug }: ProductDetailProps) => {
-  const [selectedImage, setSelectedImage] = useState(0)
-  const [quantity, setQuantity] = useState(1)
-  const [isFavorite, setIsFavorite] = useState(false)
+const PENDING_PRODUCT_UPDATES_KEY = 'pendingProductUpdates';

-  // Get product data
-  const { data: product, isLoading: productLoading, error } = useProductsBySlug(slug)
+interface PendingUpdate {
+  quantity: number;
+  timestamp: number;
+  retryCount: number;
+}
+
+export default function ProductPageContent({ slug }: ProductDetailProps) {
+  const [selectedImage, setSelectedImage] = useState(0);
+  const [localQuantity, setLocalQuantity] = useState(1);
+  const [isFavorite, setIsFavorite] = useState(false);
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [syncError, setSyncError] = useState(false);
+  const [showStockModal, setShowStockModal] = useState(false);
  
-  // Get cart data to check if product is already in cart
-  const { data: cartData } = useCart()
-  
-  // Cart mutations
-  const addToCartMutation = useAddToCart()
-  const updateCartMutation = useUpdateCartItemQuantity()
+  const t = useTranslations();

-  const t = {
-    addToCart: "Sebede goş",
-    goToCart: "Sebede git",
-    price: "Bahasy:",
-    aboutProduct: "Haryt barada",
-    brand: "Marka",
-    stock: "Mukdary",
-    description: "Düşündiriş",
-    store: "Dükan",
-    writeToStore: "Dükana ýaz",
-    color: "Reňk:",
-    category: "Kategoriýa:",
-    barcode: "Barkod:",
-    addedToCart: "Sebede goşuldy",
-    updatedCart: "Sebe täzelendi",
-    error: "Ýalňyşlyk ýüze çykdy",
-  }
+  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);

-  // Check if product is in cart
-  const cartItem = cartData?.data?.find((item: any) => item.product?.id === product?.id)
-  const isInCart = !!cartItem
+  const { data: product, isLoading: productLoading, error } = useProductsBySlug(slug);
+  const { data: cartData, refetch: refetchCart } = useCart();
+  const addToCartMutation = useAddToCart();
+  const updateCartMutation = useUpdateCartItemQuantity();

-  const handleAddToCart = async () => {
-    if (!product?.id) return
+  const cartItem = useMemo(() => 
+    cartData?.data?.find((item: any) => item.product?.id === product?.id),
+    [cartData, product]
+  );
+  const isInCart = !!cartItem;
+
+  const availableStock = product?.stock || 0;
+
+  useEffect(() => {
+    if (cartItem?.product_quantity) {
+      setLocalQuantity(cartItem.product_quantity);
+    }
+  }, [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);
+      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 (isInCart) {
+        await updateCartMutation.mutateAsync({
+          productId: product.id,
+          quantity: quantity,
+        });
+      } else {
+        await addToCartMutation.mutateAsync({
+          productId: product.id,
+          quantity: quantity,
+        });
+      }
+
+      isRequestInFlightRef.current = false;
+      setIsSyncing(false);
+      retryCountRef.current = 0;
+      clearPendingUpdate();
+
+      // Refetch cart to update UI state immediately
+      await refetchCart();
+
+      if (pendingQuantityRef.current !== null) {
+        const nextQuantity = pendingQuantityRef.current;
+        pendingQuantityRef.current = null;
+        setTimeout(() => syncToServerRef.current?.(nextQuantity), 100);
+      }
+    } catch (error) {
+      console.error('Sync failed:', error);
+      isRequestInFlightRef.current = false;
+      
+      if (retryCountRef.current >= 3) {
+        setLocalQuantity(cartItem?.product_quantity || 1);
+        clearPendingUpdate();
+      }
+      
+      retrySyncRef.current?.(quantity);
+    }
+  }, [product?.id, isInCart, updateCartMutation, addToCartMutation, cartItem, clearPendingUpdate, refetchCart]);
+
+  syncToServerRef.current = syncToServer;
+
+  useEffect(() => {
+    if (!product?.id) return;
+
+    const loadPendingUpdates = () => {
+      try {
+        const stored = sessionStorage.getItem(PENDING_PRODUCT_UPDATES_KEY);
+        if (stored) {
+          const pending: Record<number, PendingUpdate> = JSON.parse(stored);
+          const productPending = pending[product.id];
+          
+          if (productPending && productPending.quantity !== (cartItem?.product_quantity || 1)) {
+            setLocalQuantity(productPending.quantity);
+            pendingQuantityRef.current = productPending.quantity;
+            retryCountRef.current = productPending.retryCount;
+            
+            setTimeout(() => syncToServerRef.current?.(productPending.quantity), 500);
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load pending updates:', error);
+      }
+    };
+
+    loadPendingUpdates();
+  }, [product?.id, cartItem]);
+
+  useEffect(() => {
+    if (!isInCart || !product?.id) return;
+
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    if (localQuantity === (cartItem?.product_quantity || 1)) {
+      return;
+    }
+
+    savePendingUpdate(localQuantity);
+
+    debounceTimerRef.current = setTimeout(() => {
+      syncToServerRef.current?.(localQuantity);
+    }, 800);
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [localQuantity, isInCart, product?.id, cartItem, savePendingUpdate]);
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+    };
+  }, []);
+
+  const handleAddToCart = useCallback(async () => {
+    if (!product?.id) return;
+
+    // Set syncing state immediately for UI feedback
+    setIsSyncing(true);

    try {
      await addToCartMutation.mutateAsync({
        productId: product.id,
-        quantity: quantity,
-      })
+        quantity: localQuantity,
+      });
      
-      toast.success(t.addedToCart, {
-        description: `${product.name} sebede goşuldy`,
-      })
+      // Refetch cart immediately to update isInCart state
+      await refetchCart();
+      
+      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)
-      toast.error(t.error, {
-        description: "Haryt sebede goşup bolmady",
-      })
+      console.error("Add to cart error:", error);
+      setIsSyncing(false);
+      toast.error(t("error"), {
+        description: t("add_to_cart_failed"),
+      });
    }
-  }
+  }, [product, localQuantity, addToCartMutation, refetchCart, t]);

-  const handleQuantityChange = async (newQuantity: number) => {
-    if (newQuantity < 1 || !product?.id) return
-    if (newQuantity > product.stock) return
-
-    setQuantity(newQuantity)
-
-    // If product is already in cart, update it
-    if (isInCart) {
-      try {
-        await updateCartMutation.mutateAsync({
-          productId: product.id,
-          quantity: newQuantity,
-        })
-        
-        toast.success(t.updatedCart, {
-          description: `Mukdar: ${newQuantity}`,
-        })
-      } catch (error) {
-        console.error("Update cart error:", error)
-        toast.error(t.error, {
-          description: "Mukdar täzelenip bolmady",
-        })
-      }
+  const handleQuantityIncrease = useCallback(() => {
+    if (localQuantity >= availableStock) {
+      setShowStockModal(true);
+      return;
    }
-  }
+    
+    setLocalQuantity(prev => prev + 1);
+  }, [localQuantity, availableStock]);

-  const handleToggleFavorite = () => {
-    setIsFavorite(!isFavorite)
-    // TODO: Implement favorites API
-  }
+  const handleQuantityDecrease = useCallback(() => {
+    if (localQuantity <= 1) return;
+    
+    setLocalQuantity(prev => prev - 1);
+  }, [localQuantity]);

-  // Loading state
-  if (productLoading) {
-    return (
-      <div className="container 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>
-    )
-  }
+  const handleToggleFavorite = useCallback(() => {
+    setIsFavorite(!isFavorite);
+  }, [isFavorite]);

-  // Error state
-  if (error || !product) {
-    return (
-      <div className="container mx-auto px-4 py-8 text-center">
-        <h2 className="text-2xl font-bold text-red-600">Haryt tapylmady</h2>
-        <p className="text-gray-500 mt-2">Bu haryt ýok ýa-da aýryldy</p>
-      </div>
-    )
-  }
+  const imageUrls = useMemo(() => 
+    product?.media?.map(m => m.images_800x800 || m.images_720x720 || m.thumbnail) || [],
+    [product]
+  );

-  // Extract image URLs from media array
-  const imageUrls = product.media?.map(m => m.images_800x800 || m.images_720x720 || m.thumbnail) || []
-
-  const isLoading = addToCartMutation.isPending || updateCartMutation.isPending
-
-  return (
+  const loadingSkeleton = useMemo(() => (
    <div className="container mx-auto px-4 py-8">
      <div className="flex flex-col lg:flex-row gap-8">
-        {/* Product Images */}
        <div className="flex-1 max-w-2xl">
-          <div className="relative">
-            <div className="relative aspect-square w-full rounded-2xl overflow-hidden bg-gray-50">
-              {imageUrls.length > 0 ? (
-                <Image
-                  src={imageUrls[selectedImage]}
-                  alt={product.name}
-                  fill
-                  className="object-contain"
-                  priority
-                />
-              ) : (
-                <div className="flex items-center justify-center h-full text-gray-400">
-                  Surat ýok
-                </div>
-              )}
-            </div>
-
-            {/* Thumbnail Images */}
-            {imageUrls.length > 1 && (
-              <div className="mt-4 flex gap-2 overflow-x-auto pb-2">
-                {imageUrls.map((image, index) => (
-                  <button
-                    key={index}
-                    onClick={() => setSelectedImage(index)}
-                    className={`relative w-16 h-16 flex-shrink-0 rounded 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={`${product.name} ${index + 1}`}
-                      fill
-                      className="object-cover"
-                    />
-                  </button>
-                ))}
-              </div>
-            )}
+          <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>
-
-        {/* Product Info */}
        <div className="flex-1 space-y-6">
-          <div>
-            <h1 className="text-3xl font-bold mb-2">{product.name}</h1>
-            {product.categories && product.categories.length > 0 && (
-              <div className="flex gap-2 flex-wrap mt-2">
-                {product.categories.map((cat, idx) => (
-                  <span 
-                    key={idx}
-                    className="text-sm px-3 py-1 bg-gray-100 rounded-full text-gray-600"
-                  >
-                    {cat.name}
-                  </span>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Product Info Table */}
-          <Card className="p-4 rounded-xl border-gray-200">
-            <h3 className="text-xl font-semibold mb-4">{t.aboutProduct}</h3>
-            <div className="space-y-3">
-              {product.brand?.name && (
-                <>
-                  <div className="flex justify-between items-center py-2">
-                    <span className="text-gray-500">{t.brand}</span>
-                    <span className="font-medium">{product.brand.name}</span>
-                  </div>
-                  <Separator />
-                </>
-              )}
-              
-              {product.stock !== undefined && (
-                <>
-                  <div className="flex justify-between items-center py-2">
-                    <span className="text-gray-500">{t.stock}</span>
-                    <span className={`font-medium ${product.stock === 0 ? 'text-red-500' : 'text-green-600'}`}>
-                      {product.stock === 0 ? 'Ýok' : product.stock}
-                    </span>
-                  </div>
-                  <Separator />
-                </>
-              )}
-              
-              {product.barcode && (
-                <>
-                  <div className="flex justify-between items-center py-2">
-                    <span className="text-gray-500">{t.barcode}</span>
-                    <span className="font-mono text-sm">{product.barcode}</span>
-                  </div>
-                  <Separator />
-                </>
-              )}
-              
-              {product.colour && (
-                <>
-                  <div className="flex justify-between items-center py-2">
-                    <span className="text-gray-500">{t.color}</span>
-                    <span className="font-medium">{product.colour}</span>
-                  </div>
-                  <Separator />
-                </>
-              )}
-              
-              {product.properties && product.properties.length > 0 && (
-                <>
-                  {product.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 < product.properties.length - 1 && <Separator />}
-                      </div>
-                    )
-                  ))}
-                </>
-              )}
-            </div>
-          </Card>
-
-          {/* Description */}
-          {product.description && (
-            <Card className="p-4 rounded-xl border-gray-200">
-              <h3 className="text-xl font-semibold mb-3">{t.description}</h3>
-              <div 
-                className="text-gray-700 leading-relaxed prose prose-sm max-w-none"
-                dangerouslySetInnerHTML={{ __html: product.description }}
-              />
-            </Card>
-          )}
-        </div>
-
-        {/* Price & Actions Sidebar */}
-        <div className="lg:w-[380px] space-y-4">
-          <Card className="p-6 rounded-xl shadow-lg sticky top-4">
-            <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">
-                  {product.price_amount} TMT
-                </span>
-                {product.old_price_amount && parseFloat(product.old_price_amount) > 0 && (
-                  <span className="text-lg text-gray-400 line-through">
-                    {product.old_price_amount} TMT
-                  </span>
-                )}
-              </div>
-            </div>
-
-            <div className="space-y-3">
-              {isInCart ? (
-                <>
-                  <Link href="/cart">
-                    <Button 
-                      size="lg" 
-                      className="w-full rounded-xl text-lg font-bold bg-green-600 hover:bg-green-700"
-                    >
-                      <ShoppingCart className="mr-2 h-5 w-5" />
-                      {t.goToCart}
-                    </Button>
-                  </Link>
-
-                  <div className="flex items-center gap-2">
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={() => handleQuantityChange(quantity - 1)}
-                      disabled={quantity === 1 || isLoading}
-                      className="rounded-xl h-12 w-12"
-                    >
-                      <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">
-                      {quantity}
-                    </div>
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={() => handleQuantityChange(quantity + 1)}
-                      disabled={isLoading || quantity >= product.stock}
-                      className="rounded-xl h-12 w-12"
-                    >
-                      <Plus className="h-5 w-5" />
-                    </Button>
-                  </div>
-                </>
-              ) : (
-                <Button
-                  size="lg"
-                  onClick={handleAddToCart}
-                  disabled={isLoading || product.stock === 0}
-                  className="w-full rounded-xl text-lg font-bold"
-                >
-                  <ShoppingCart className="mr-2 h-5 w-5" />
-                  {isLoading ? "Goşulýar..." : product.stock === 0 ? "Haryt ýok" : t.addToCart}
-                </Button>
-              )}
-
-              <Button
-                variant="outline"
-                size="lg"
-                onClick={handleToggleFavorite}
-                className={`w-full rounded-xl transition-all ${
-                  isFavorite 
-                    ? "bg-red-50 border-red-300 hover:bg-red-100" 
-                    : "hover:bg-gray-50"
-                }`}
-              >
-                <Heart 
-                  className={`h-6 w-6 transition-all ${
-                    isFavorite ? "fill-red-500 text-red-500" : "text-gray-600"
-                  }`} 
-                />
-              </Button>
-            </div>
-          </Card>
-
-          {/* Store/Channel Card */}
-          {product.channel && product.channel.length > 0 && (
-            <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">{product.channel[0].name}</h4>
-                </div>
-              </div>
-              <Button 
-                variant="outline" 
-                size="lg" 
-                className="w-full rounded-xl"
-              >
-                {t.writeToStore}
-              </Button>
-            </Card>
-          )}
+          <Skeleton className="h-10 w-64" />
+          <Skeleton className="h-20 w-full" />
        </div>
      </div>
    </div>
-  )
-}
+  ), []);

-export default ProductPageContent
+  if (productLoading) {
+    return loadingSkeleton;
+  }
+
+  if (error || !product) {
+    return (
+      <div className="container 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="container mx-auto px-4 py-8">
+        <div className="flex flex-col lg:flex-row gap-8">
+          <div className="flex-1 max-w-2xl">
+            <div className="relative">
+              <div className="relative aspect-square w-full rounded-2xl overflow-hidden bg-gray-50">
+                {imageUrls.length > 0 ? (
+                  <Image
+                    src={imageUrls[selectedImage]}
+                    alt={product.name}
+                    fill
+                    className="object-contain"
+                    priority
+                  />
+                ) : (
+                  <div className="flex items-center justify-center h-full text-gray-400">
+                    {t("no_image")}
+                  </div>
+                )}
+              </div>
+
+              {imageUrls.length > 1 && (
+                <div className="mt-4 flex gap-2 overflow-x-auto pb-2">
+                  {imageUrls.map((image, index) => (
+                    <button
+                      key={index}
+                      onClick={() => setSelectedImage(index)}
+                      className={`relative w-16 h-16 flex-shrink-0 rounded 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={`${product.name} ${index + 1}`}
+                        fill
+                        className="object-cover"
+                      />
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="flex-1 space-y-6">
+            <div>
+              <h1 className="text-3xl font-bold mb-2">{product.name}</h1>
+              {product.categories && product.categories.length > 0 && (
+                <div className="flex gap-2 flex-wrap mt-2">
+                  {product.categories.map((cat, idx) => (
+                    <span 
+                      key={idx}
+                      className="text-sm px-3 py-1 bg-gray-100 rounded-full text-gray-600"
+                    >
+                      {cat.name}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <Card className="p-4 rounded-xl border-gray-200">
+              <h3 className="text-xl font-semibold mb-4">{t("about_product")}</h3>
+              <div className="space-y-3">
+                {product.brand?.name && (
+                  <>
+                    <div className="flex justify-between items-center py-2">
+                      <span className="text-gray-500">{t("brand")}</span>
+                      <span className="font-medium">{product.brand.name}</span>
+                    </div>
+                    <Separator />
+                  </>
+                )}
+                
+                {product.stock !== undefined && (
+                  <>
+                    <div className="flex justify-between items-center py-2">
+                      <span className="text-gray-500">{t("stock")}</span>
+                      <span className={`font-medium ${product.stock === 0 ? 'text-red-500' : product.stock <= 5 ? 'text-orange-600' : 'text-green-600'}`}>
+                        {product.stock === 0 ? t("out_of_stock") : product.stock <= 5 ? `${t("only_left", { count: product.stock })}` : product.stock}
+                      </span>
+                    </div>
+                    <Separator />
+                  </>
+                )}
+                
+                {product.barcode && (
+                  <>
+                    <div className="flex justify-between items-center py-2">
+                      <span className="text-gray-500">{t("barcode")}</span>
+                      <span className="font-mono text-sm">{product.barcode}</span>
+                    </div>
+                    <Separator />
+                  </>
+                )}
+                
+                {product.colour && (
+                  <>
+                    <div className="flex justify-between items-center py-2">
+                      <span className="text-gray-500">{t("color")}</span>
+                      <span className="font-medium">{product.colour}</span>
+                    </div>
+                    <Separator />
+                  </>
+                )}
+                
+                {product.properties && product.properties.length > 0 && (
+                  <>
+                    {product.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 < product.properties.length - 1 && <Separator />}
+                        </div>
+                      )
+                    ))}
+                  </>
+                )}
+              </div>
+            </Card>
+
+            {product.description && (
+              <Card className="p-4 rounded-xl border-gray-200">
+                <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: product.description }}
+                />
+              </Card>
+            )}
+          </div>
+
+          <div className="lg:w-[380px] space-y-4">
+            <Card className="p-6 rounded-xl shadow-lg sticky top-4">
+              <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">
+                    {product.price_amount} TMT
+                  </span>
+                  {product.old_price_amount && parseFloat(product.old_price_amount) > 0 && (
+                    <span className="text-lg text-gray-400 line-through">
+                      {product.old_price_amount} TMT
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                {isInCart ? (
+                  <>
+                    <Link href="/cart">
+                      <Button 
+                        size="lg" 
+                        className="w-full rounded-xl text-lg font-bold bg-green-600 hover:bg-green-700"
+                      >
+                        <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={handleQuantityDecrease}
+                        disabled={localQuantity === 1 || isSyncing}
+                        className={`rounded-xl 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}
+                        {isSyncing && (
+                          <Loader2 className="h-4 w-4 animate-spin absolute -top-1 -right-1 text-blue-500" />
+                        )}
+                        {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={handleQuantityIncrease}
+                        disabled={localQuantity >= availableStock || isSyncing}
+                        className={`rounded-xl h-12 w-12 ${isSyncing ? 'opacity-70' : ''} ${
+                          localQuantity >= availableStock ? 'opacity-50 cursor-not-allowed' : ''
+                        }`}
+                      >
+                        <Plus className="h-5 w-5" />
+                      </Button>
+                    </div>
+                  </>
+                ) : (
+                  <Button
+                    size="lg"
+                    onClick={handleAddToCart}
+                    disabled={isSyncing || product.stock === 0}
+                    className="w-full rounded-xl text-lg font-bold"
+                  >
+                    {isSyncing ? (
+                      <>
+                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                        {t("adding")}
+                      </>
+                    ) : (
+                      <>
+                        <ShoppingCart className="mr-2 h-5 w-5" />
+                        {product.stock === 0 ? t("out_of_stock") : t("add_to_cart")}
+                      </>
+                    )}
+                  </Button>
+                )}
+
+                <Button
+                  variant="outline"
+                  size="lg"
+                  onClick={handleToggleFavorite}
+                  className={`w-full rounded-xl transition-all ${
+                    isFavorite 
+                      ? "bg-red-50 border-red-300 hover:bg-red-100" 
+                      : "hover:bg-gray-50"
+                  }`}
+                >
+                  <Heart 
+                    className={`h-6 w-6 transition-all ${
+                      isFavorite ? "fill-red-500 text-red-500" : "text-gray-600"
+                    }`} 
+                  />
+                </Button>
+              </div>
+            </Card>
+
+            {product.channel && product.channel.length > 0 && (
+              <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">{product.channel[0].name}</h4>
+                  </div>
+                </div>
+                <Button 
+                  variant="outline" 
+                  size="lg" 
+                  className="w-full rounded-xl"
+                >
+                  {t("write_to_store")}
+                </Button>
+              </Card>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <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: product.name,
+                stock: availableStock 
+              })}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-center mt-4">
+            <Button
+              onClick={() => setShowStockModal(false)}
+              className="w-full rounded-xl"
+            >
+              {t("understood")}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
--- a/features/products/components/product-content.tsx
+++ b/features/products/components/product-content.tsx
@@ -1,9 +0,0 @@
-"use client"
-export default function ProductPageContent({ slug }: { slug: string }) {
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold">Product: {slug}</h1>
-      {/* Product content will go here */}
-    </div>
-  )
-}
--- a/features/products/types.ts
+++ b/features/products/types.ts
--- a/features/profile/components/client-page.tsx
+++ b/features/profile/components/client-page.tsx
@@ -1,5 +1,6 @@
 "use client";

+import { useCallback, useMemo } from "react";
 import { LogOut } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -8,6 +9,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Skeleton } from "@/components/ui/skeleton";
 import { useUserProfile } from "@/lib/hooks";
 import { clearAuthToken } from "@/lib/api";
+import { useTranslations } from "next-intl";

 interface ProfilePageProps {
  params: Promise<{ locale: string }>;
@@ -15,48 +17,37 @@ interface ProfilePageProps {

 export default function ClientProfilePage(props: ProfilePageProps) {
  const { data: user, isLoading, error } = useUserProfile();
+  const t = useTranslations();

-  const translations = {
-    profile: "Профиль",
-    personalInfo: "Личная информация",
-    profileDescription: "Ваши данные профиля",
-    firstName: "Имя",
-    lastName: "Фамилия",
-    phone: "Номер телефона",
-    address: "Адрес",
-    logout: "Выйти",
-    loading: "Загрузка...",
-    errorLoading: "Не удалось загрузить профиль",
-    tryAgain: "Попробовать снова",
-  };
-
-  const handleLogout = () => {
+  const handleLogout = useCallback(() => {
    clearAuthToken();
    window.location.href = "/";
-  };
+  }, []);
+
+  const loadingSkeleton = useMemo(() => (
+    <div className="min-h-screen bg-gray-50 p-4 pt-20">
+      <div className="container mx-auto max-w-2xl">
+        <Skeleton className="h-10 w-48 mb-6" />
+        <Card className="shadow-lg mb-4">
+          <CardHeader>
+            <Skeleton className="h-6 w-32 mb-2" />
+            <Skeleton className="h-4 w-48" />
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {[1, 2, 3, 4].map((i) => (
+              <div key={i} className="space-y-2">
+                <Skeleton className="h-4 w-24" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  ), []);

  if (isLoading) {
-    return (
-      <div className="min-h-screen bg-gray-50 p-4 pt-20">
-        <div className="container mx-auto max-w-2xl">
-          <Skeleton className="h-10 w-48 mb-6" />
-          <Card className="shadow-lg mb-4">
-            <CardHeader>
-              <Skeleton className="h-6 w-32 mb-2" />
-              <Skeleton className="h-4 w-48" />
-            </CardHeader>
-            <CardContent className="space-y-4">
-              {[1, 2, 3, 4].map((i) => (
-                <div key={i} className="space-y-2">
-                  <Skeleton className="h-4 w-24" />
-                  <Skeleton className="h-10 w-full" />
-                </div>
-              ))}
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    );
+    return loadingSkeleton;
  }

  if (error) {
@@ -64,8 +55,8 @@ export default function ClientProfilePage(props: ProfilePageProps) {
      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
        <Card className="w-full max-w-md">
          <CardContent className="pt-6 text-center">
-            <p className="text-red-600 mb-4">{translations.errorLoading}</p>
-            <Button onClick={() => window.location.reload()}>{translations.tryAgain}</Button>
+            <p className="text-red-600 mb-4">{t("error_loading_profile")}</p>
+            <Button onClick={() => window.location.reload()}>{t("try_again")}</Button>
          </CardContent>
        </Card>
      </div>
@@ -75,33 +66,33 @@ export default function ClientProfilePage(props: ProfilePageProps) {
  return (
    <div className="min-h-screen bg-gray-50 p-4 pt-20">
      <div className="container mx-auto max-w-2xl">
-        <h1 className="text-3xl font-bold mb-6">{translations.profile}</h1>
+        <h1 className="text-3xl font-bold mb-6">{t("profile")}</h1>

        <Card className="shadow-lg mb-4">
          <CardHeader>
-            <CardTitle>{translations.personalInfo}</CardTitle>
-            <CardDescription>{translations.profileDescription}</CardDescription>
+            <CardTitle>{t("personal_info")}</CardTitle>
+            <CardDescription>{t("profile_description")}</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {user && (
              <>
                <div className="space-y-2">
-                  <Label htmlFor="firstName">{translations.firstName}</Label>
+                  <Label htmlFor="firstName">{t("first_name")}</Label>
                  <Input id="firstName" value={user.first_name || ""} disabled className="bg-gray-50" />
                </div>

                <div className="space-y-2">
-                  <Label htmlFor="lastName">{translations.lastName}</Label>
+                  <Label htmlFor="lastName">{t("last_name")}</Label>
                  <Input id="lastName" value={user.last_name || ""} disabled className="bg-gray-50" />
                </div>

                <div className="space-y-2">
-                  <Label htmlFor="phone">{translations.phone}</Label>
+                  <Label htmlFor="phone">{t("phone_number")}</Label>
                  <Input id="phone" value={user.phone_number || ""} disabled className="bg-gray-50" />
                </div>

                <div className="space-y-2">
-                  <Label htmlFor="address">{translations.address}</Label>
+                  <Label htmlFor="address">{t("address")}</Label>
                  <Input id="address" value={user.address || ""} disabled className="bg-gray-50" />
                </div>
              </>
@@ -116,7 +107,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
          className="w-full max-w-md flex items-center justify-center gap-2"
        >
          <LogOut className="h-5 w-5" />
-          {translations.logout}
+          {t("common.logout")}
        </Button>
      </div>
    </div>
--- a/features/profile/components/profile-content.tsx
+++ b/features/profile/components/profile-content.tsx
@@ -1,66 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-
-interface User {
-  first_name: string
-  last_name: string
-  phone: string
-  email?: string
-}
-
-interface ProfileContentProps {
-  locale: string
-}
-
-export default function ProfilePageContent({ locale }: ProfileContentProps) {
-  const [user, setUser] = useState<User | null>(null)
-  const [loading, setLoading] = useState(true)
-
-  const t = {
-    profile: "Профиль",
-    firstName: "Имя",
-    lastName: "Фамилия",
-    phone: "Номер телефона",
-    email: "Email",
-    logout: "Выйти",
-    loading: "Загрузка...",
-  }
-
-  useEffect(() => {
-    const fetchUserData = () => {
-      setTimeout(() => {
-        setUser({
-          first_name: "Иван",
-          last_name: "Иванов",
-          phone: "+99361234567",
-          email: "ivan@example.com",
-        })
-        setLoading(false)
-      }, 500)
-    }
-
-    fetchUserData()
-  }, [])
-
-  const handleLogout = () => {
-    window.location.href = "/"
-  }
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
-        <p className="text-lg text-gray-600">{t.loading}</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50 p-4 pt-20">
-      <div className="container mx-auto max-w-2xl">
-        <h1 className="text-3xl font-bold mb-6">{t.profile}</h1>
-        {/* Profile content */}
-      </div>
-    </div>
-  )
-}
--- a/features/profile/hooks/useUserProfile.ts
+++ b/features/profile/hooks/useUserProfile.ts
@@ -1,7 +1,7 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { apiClient } from "@/lib/api";
 import { userStore } from "../userStore";
-import type { ProfileResponse, UpdateProfileRequest, UpdateProfileResponse } from "../types";
+import type { ProfileResponse, UpdateProfileRequest, UpdateProfileResponse } from "@/lib/types/api";

 export const useUserProfile = () => {
  return useQuery<ProfileResponse["data"]>({
--- a/features/profile/types.ts
+++ b/features/profile/types.ts
@@ -1,23 +0,0 @@
-export interface UserProfile {
-  first_name: string;
-  last_name: string;
-  phone_number: string;
-  address: string;
-}
-
-export interface ProfileResponse {
-  message: string;
-  data: UserProfile;
-}
-
-export interface UpdateProfileRequest {
-  first_name?: string;
-  last_name?: string;
-  phone_number?: string;
-  address?: string;
-}
-
-export interface UpdateProfileResponse {
-  message: string;
-  data: UserProfile;
-}
--- a/features/search/hooks/useSearch.ts
+++ b/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,
+  });
+}
--- a/features/search/types.ts
+++ b/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;
+}