added collection page

app/[locale]/cart/page.tsx

@@ -25,6 +25,7 @@ export default function CartPage() {
   const [note, setNote] = useState<string>("");
   const [phone, setPhone] = useState<string>("");
   const [name, setName] = useState<string>("");
+  const [lastName, setLastName] = useState<string>("");
   const router = useRouter();
   const t = useTranslations();
 
@@ -42,6 +43,7 @@ export default function CartPage() {
     const orderData = userStore.getOrderData();
     if (orderData) {
       if (orderData.customer_name) setName(orderData.customer_name);
+      if (orderData.customer_last_name) setLastName(orderData.customer_last_name);
       if (orderData.customer_phone) setPhone(orderData.customer_phone);
     }
   }, []);
@@ -227,8 +229,10 @@ export default function CartPage() {
           paymentTypes={paymentTypes}
           phone={phone}
           name={name}
+          lastName={lastName}
           onPhoneChange={setPhone}
           onNameChange={setName}
+          onLastNameChange={setLastName}
           onPaymentTypeChange={setPaymentType}
           onDeliveryTypeChange={handleDeliveryTypeChange}
           onRegionChange={setSelectedRegion}

app/[locale]/collections/[slug]/page.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from "next"
+
+type Props = {
+  params: Promise<{ locale: string; slug: string }>
+}
+
+export const revalidate = 600 // ISR: Revalidate every 10 minutes
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale, slug } = await params
+
+  return {
+    title: `${slug.charAt(0).toUpperCase() + slug.slice(1)} | E-Commerce`,
+    description: `Browse ${slug} collection products in our store`,
+    openGraph: {
+      locale,
+      type: "website",
+      title: `${slug.charAt(0).toUpperCase() + slug.slice(1)} | E-Commerce`,
+      description: `Browse ${slug} collection products in our store`,
+    },
+  }
+}
+
+export async function generateStaticParams() {
+  // Generate static params for popular collections
+  const collections = ["new-arrivals", "best-sellers", "featured"]
+  return collections.map((slug) => ({ slug }))
+}
+
+export default async function CollectionPage(props: Props) {
+  const params = await props.params
+
+  const CollectionPageClient = (
+    await import("../../../../features/collections/components/CollectionPageClient")
+  ).default
+  
+  return <CollectionPageClient params={params} />
+}

app/[locale]/orders/page.tsx

@@ -13,23 +13,22 @@ const metadataContent = {
 } as const;
 
 interface PageProps {
-  params: {
+  params: Promise<{
     locale: string;
-  };
+  }>;
 }
 
 export async function generateMetadata(
   { params }: PageProps,
   parent: ResolvingMetadata
 ): Promise<Metadata> {
-  const locale = params.locale as keyof typeof metadataContent;
-
-  const content = metadataContent[locale] || metadataContent.ru;
+  const { locale } = await params;
+  const localeKey = locale as keyof typeof metadataContent;
+  const content = metadataContent[localeKey] || metadataContent.ru;
 
   return {
     title: content.title,
     description: content.description,
-
     robots: {
       index: false,
       follow: false,
@@ -39,5 +38,6 @@ export async function generateMetadata(
 }
 
 export default async function OrdersPage({ params }: PageProps) {
-  return <OrdersPageClient locale={params.locale} />;
-}
+  const { locale } = await params;
+  return <OrdersPageClient locale={locale} />;
+}

components/layout/Header.tsx

@@ -81,7 +81,7 @@ export default function Header({ locale = "ru" }: HeaderProps) {
 
             <Button
               onClick={toggleCategoryMenu}
-              className="hidden gap-2 rounded-xl font-bold sm:flex hover:bg-[#005bff] bg-[#005bff] text-white"
+              className="hidden gap-2 rounded-lg font-bold sm:flex hover:bg-[#005bff] bg-[#005bff] text-white"
               size="lg"
             >
               {isCategoryOpen ? <X className="h-5 w-5" /> : <CategoryIcon />}
@@ -131,19 +131,10 @@ export default function Header({ locale = "ru" }: HeaderProps) {
       <AuthDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
 
       <MobileBottomNav
-        locale={locale}
-        isAuthenticated={isAuthenticated}
-        translations={{
-          catalog: t("common.catalog"),
-          favorites: t("common.favorites"),
-          orders: t("common.orders"),
-          cart: t("common.cart"),
-          login: t("common.login"),
-          profile: t("profile"),
-        }}
-        onLoginClick={() => setIsLoginOpen(true)}
-        onProfileClick={handleProfileClick}
-      />
+  locale={locale}
+ 
+  onLoginClick={() => setIsLoginOpen(true)}
+/>
     </>
   );
 }

components/layout/MobileBar.tsx

@@ -14,9 +14,10 @@ import {
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useCategories, useCart, useFavorites, useOrders } from "@/lib/hooks";
 import { useRouter } from "next/navigation";
+import { useAuthStatus } from "@/lib/hooks/useAuth";
+import { useTranslations } from "next-intl";
 interface MobileBottomNavProps {
   locale?: string;
-  isAuthenticated?: boolean;
   translations?: {
     catalog: string;
     favorites: string;
@@ -26,48 +27,56 @@ interface MobileBottomNavProps {
     profile: string;
   };
   onLoginClick?: () => void;
-  onProfileClick?: () => void;
 }
 
 export default function MobileBottomNav({
   locale = "ru",
-  isAuthenticated = false,
   translations,
   onLoginClick,
-  onProfileClick, // EKLENEN
 }: MobileBottomNavProps) {
   const [isClient, setIsClient] = useState(false);
   const [isCategoryOpen, setIsCategoryOpen] = useState(false);
-
+ const t = useTranslations();
+  // AUTH STATE DIRECTLY FROM HOOK - NOT FROM PROPS
+  const { isAuthenticated, isLoading: authLoading } = useAuthStatus();
+  
   const { data: categories = [] } = useCategories();
   const { data: cartData } = useCart();
   const { data: favoritesData } = useFavorites();
   const { data: ordersData } = useOrders();
   const router = useRouter();
-  const t = translations || {
-    catalog: "Каталог",
-    favorites: "Избранное",
-    orders: "Заказы",
-    cart: "Корзина",
-    login: "Войти",
-    profile: "Профиль",
-  };
+
+  
 
   useEffect(() => {
     setIsClient(true);
   }, []);
 
-  const handleAuthClick = () => {
-    if (isAuthenticated) {
-      if (onProfileClick) {
-        onProfileClick();
-      } else {
-        router.push(`/${locale}/me`);
-        console.log("hello");
-      }
-    } else if (onLoginClick) {
-      onLoginClick();
+
+
+  const handleProfileClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    
+
+    if (authLoading) {
+      return;
     }
+
+    if (isAuthenticated) {
+      router.push(`/${locale}/me`);
+    } else {
+      if (onLoginClick) {
+        onLoginClick();
+      }
+    }
+  };
+
+  const handleNavigation = (path: string) => (e: React.MouseEvent) => {
+    e.preventDefault();
+    console.log("[MobileBottomNav] Navigating to:", path);
+    router.push(path);
   };
 
   if (!isClient) return null;
@@ -82,94 +91,85 @@ export default function MobileBottomNav({
             variant="ghost"
             size="sm"
             className="flex-col gap-0.5 h-auto px-2 py-2"
-            onClick={() => setIsCategoryOpen(true)}
+            onClick={() => {
+              console.log("[MobileBottomNav] Catalog clicked");
+              setIsCategoryOpen(true);
+            }}
           >
             <Menu className="h-5 w-5 text-gray-600" />
-            <span className="text-xs text-gray-700">{t.catalog}</span>
+            <span className="text-xs text-gray-700">{t("common.catalog")}</span>
           </Button>
 
           {/* Favorites Button */}
-          <Link href="/favorites">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="relative flex-col gap-0.5 h-auto px-2 py-2"
-            >
-              <div className="relative">
-                <Heart className="h-5 w-5 text-gray-600" />
-                <Badge
-                  variant="destructive"
-                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-                >
-                  {favoritesData?.length || 0}
-                </Badge>
-              </div>
-              <span className="text-xs text-gray-700">{t.favorites}</span>
-            </Button>
-          </Link>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            onClick={handleNavigation("/favorites")}
+          >
+            <div className="relative">
+              <Heart className="h-5 w-5 text-gray-600" />
+              <Badge
+                variant="destructive"
+                className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
+              >
+                {favoritesData?.length || 0}
+              </Badge>
+            </div>
+            <span className="text-xs text-gray-700">{t("common.favorites")}</span>
+          </Button>
 
           {/* Orders Button */}
-          <Link href="/orders">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="relative flex-col gap-0.5 h-auto px-2 py-2"
-            >
-              <div className="relative">
-                <Truck className="h-5 w-5 text-gray-600" />
-                <Badge
-                  variant="destructive"
-                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-                >
-                  {ordersData?.length || 0}
-                </Badge>
-              </div>
-              <span className="text-xs text-gray-700">{t.orders}</span>
-            </Button>
-          </Link>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            onClick={handleNavigation("/orders")}
+          >
+            <div className="relative">
+              <Truck className="h-5 w-5 text-gray-600" />
+              <Badge
+                variant="destructive"
+                className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
+              >
+                {ordersData?.length || 0}
+              </Badge>
+            </div>
+            <span className="text-xs text-gray-700">{t("common.orders")}</span>
+          </Button>
 
           {/* Cart Button */}
-          <Link href="/cart">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="relative flex-col gap-0.5 h-auto px-2 py-2"
-            >
-              <div className="relative">
-                <ShoppingCart className="h-5 w-5 text-gray-600" />
-                <Badge
-                  variant="destructive"
-                  className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
-                >
-                  {cartData?.data?.length || 0}
-                </Badge>
-              </div>
-              <span className="text-xs text-gray-700">{t.cart}</span>
-            </Button>
-          </Link>
-
-          {isAuthenticated ? (
-            <Link href={`/${locale}/me`}>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="flex-col gap-0.5 h-auto px-2 py-2"
+          <Button
+            variant="ghost"
+            size="sm"
+            className="relative flex-col gap-0.5 h-auto px-2 py-2"
+            onClick={handleNavigation("/cart")}
+          >
+            <div className="relative">
+              <ShoppingCart className="h-5 w-5 text-gray-600" />
+              <Badge
+                variant="destructive"
+                className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
               >
-                <User className="h-5 w-5 text-gray-600" />
-                <span className="text-xs text-gray-700">{t.profile}</span>
-              </Button>
-            </Link>
-          ) : (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="flex-col gap-0.5 h-auto px-2 py-2"
-              onClick={onLoginClick}
-            >
-              <User className="h-5 w-5 text-gray-600" />
-              <span className="text-xs text-gray-700">{t.login}</span>
-            </Button>
-          )}
+                {cartData?.data?.length || 0}
+              </Badge>
+            </div>
+            <span className="text-xs text-gray-700">{t("common.cart")}</span>
+          </Button>
+
+          {/* Profile/Login Button */}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex-col gap-0.5 h-auto px-2 py-2"
+            onClick={handleProfileClick}
+            disabled={authLoading}
+          >
+            <User className="h-5 w-5 text-gray-600" />
+            <span className="text-xs text-gray-700">
+              {authLoading ? "..." : (isAuthenticated ? t("profile") : t("login"))}
+            </span>
+          </Button>
         </div>
       </div>
 
@@ -177,7 +177,7 @@ export default function MobileBottomNav({
       <Sheet open={isCategoryOpen} onOpenChange={setIsCategoryOpen}>
         <SheetContent side="left" className="w-[300px] p-0">
           <SheetHeader className="p-4 border-b">
-            <SheetTitle>{t.catalog}</SheetTitle>
+            <SheetTitle>{t("common.catalog")}</SheetTitle>
           </SheetHeader>
           <ScrollArea className="h-[calc(100vh-80px)]">
             <div className="p-4">
@@ -214,4 +214,4 @@ export default function MobileBottomNav({
       </Sheet>
     </>
   );
-}
+}

components/layout/ui/LanguageSelector.tsx

@@ -43,7 +43,7 @@ export default function LanguageSelector() {
 
   return (
     <Select value={locale} onValueChange={handleLanguageChange}>
-      <SelectTrigger className="w-[70px] rounded-xl border-gray-300">
+      <SelectTrigger className="w-[70px] md:h-10! flex items-center justify-center rounded-lg border-gray-300">
         <SelectValue>
           <FlagIcon locale={locale} />
         </SelectValue>

components/ui/tabs.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Tabs({
   className,
@@ -15,7 +15,7 @@ function Tabs({
       className={cn("flex flex-col gap-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 function TabsList({
@@ -31,7 +31,7 @@ function TabsList({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsTrigger({
@@ -42,12 +42,12 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "cursor-pointer data-[state=active]:bg-white dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsContent({
@@ -60,7 +60,7 @@ function TabsContent({
       className={cn("flex-1 outline-none", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };

features/cart/components/OrderSummary.tsx

@@ -45,8 +45,10 @@ interface OrderSummaryProps {
   paymentTypes: PaymentType[];
   phone: string;
   name: string;
+  lastName: string;
   onPhoneChange: (phone: string) => void;
   onNameChange: (name: string) => void;
+  onLastNameChange: (lastName: string) => void;
   onPaymentTypeChange: (type: PaymentType) => void;
   onDeliveryTypeChange: (type: DeliveryType) => void;
   onRegionChange: (regionCode: string) => void;
@@ -68,8 +70,10 @@ export default function OrderSummary({
   paymentTypes,
   phone,
   name,
+  lastName,
   onPhoneChange,
   onNameChange,
+  onLastNameChange,
   onPaymentTypeChange,
   onDeliveryTypeChange,
   onRegionChange,
@@ -93,7 +97,7 @@ export default function OrderSummary({
         <h3 className="text-lg font-semibold mb-3">
           {t("customer_information")}
         </h3>
-        <div className="space-y-4">
+        <div className="space-y-5">
           <div>
             <Label className="text-sm font-medium mb-2 block">
               {t("name")}
@@ -106,6 +110,18 @@ export default function OrderSummary({
               className="rounded-xl"
             />
           </div>
+          <div>
+            <Label className="text-sm font-medium mb-2 block">
+              {t("last_name")}
+            </Label>
+            <Input
+              type="text"
+              value={lastName}
+              onChange={(e) => onLastNameChange(e.target.value)}
+              placeholder={t("last_name")}
+              className="rounded-xl"
+            />
+          </div>
           <div>
             <Label className="text-sm font-medium mb-2 block">
               {t("phone")}

features/category/components/CategoryPageClient.tsx

@@ -106,30 +106,61 @@ export default function CategoryPageClient({
     }
   }, [selectedCategory?.id]);
 
-  // Update products list
+  // Update products list - BU KISIM ÖNEMLİ!
   useEffect(() => {
     if (productsData?.data) {
       setAllProducts((prev) => {
+        // İlk sayfa ise direkt replace et
         if (currentPage === 1) {
           return productsData.data;
         }
+
+        // Sonraki sayfalar için deduplicate et
         const existingIds = new Set(prev.map((p) => p.id));
         const newProducts = productsData.data.filter(
           (p: Product) => !existingIds.has(p.id)
         );
+
+        // Eğer yeni ürün yoksa, return prev (gereksiz re-render önlenir)
+        if (newProducts.length === 0) {
+          return prev;
+        }
+
         return [...prev, ...newProducts];
       });
     }
-  }, [productsData, currentPage]);
+  }, [productsData?.data, currentPage]); // productsData yerine productsData.data
 
+  // hasMore hesaplama - BU KISIM DA ÖNEMLİ!
   const hasMore = useMemo(() => {
-    return !!productsData?.pagination?.next_page_url;
-  }, [productsData]);
+    if (!productsData?.pagination) return false;
+
+    // pagination.next_page_url varsa devam et
+    if (productsData.pagination.next_page_url) return true;
+
+    // Alternatif olarak: current_page < last_page kontrolü
+    if (
+      productsData.pagination.current_page &&
+      productsData.pagination.last_page
+    ) {
+      return (
+        productsData.pagination.current_page < productsData.pagination.last_page
+      );
+    }
+
+    // Alternatif 2: hasMorePages flag'i varsa
+    if (productsData.pagination.hasMorePages !== undefined) {
+      return productsData.pagination.hasMorePages;
+    }
+
+    return false;
+  }, [productsData?.pagination]);
 
   const loadMoreData = useCallback(() => {
     if (!hasMore || isFetching) return;
+    console.log("Loading page:", currentPage + 1); // Debug için
     setCurrentPage((prev) => prev + 1);
-  }, [hasMore, isFetching]);
+  }, [hasMore, isFetching, currentPage]);
 
   const sortedProducts = useMemo(() => {
     const products = [...allProducts];
@@ -245,6 +276,7 @@ export default function CategoryPageClient({
             products={sortedProducts}
             hasMore={hasMore}
             onLoadMore={loadMoreData}
+            isFetching={isFetching}
             translations={{
               loading: t("common.loading"),
               no_results: t("no_results"),
@@ -276,4 +308,4 @@ export default function CategoryPageClient({
       </CategoryFiltersSheet>
     </div>
   );
-}
+}

features/category/components/CategoryProductsGrid.tsx

@@ -6,6 +6,7 @@ interface CategoryProductsGridProps {
   products: Product[];
   hasMore: boolean;
   onLoadMore: () => void;
+  isFetching?: boolean; // Yeni prop - loading durumu için
   translations: {
     loading: string;
     no_results: string;
@@ -16,9 +17,10 @@ export default function CategoryProductsGrid({
   products,
   hasMore,
   onLoadMore,
+  isFetching = false,
   translations,
 }: CategoryProductsGridProps) {
-  if (products.length === 0) {
+  if (products.length === 0 && !isFetching) {
     return (
       <div className="text-center py-8 text-gray-500">
         {translations.no_results}
@@ -35,9 +37,19 @@ export default function CategoryProductsGrid({
       style={{ overflow: "visible" }}
       loader={
         <div className="flex justify-center py-4">
-          <div>{translations.loading}</div>
+          <div className="flex items-center gap-2">
+            <div className="w-5 h-5 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" />
+            <span>{translations.loading}</span>
+          </div>
         </div>
       }
+      endMessage={
+        products.length > 0 && !hasMore ? (
+          <div className="text-center py-4 text-gray-500 text-sm">
+            {/* Opsiyonel: "Tüm ürünler yüklendi" mesajı */}
+          </div>
+        ) : null
+      }
     >
       <div className="bg-white rounded-lg grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
         {products.map((product) => (
@@ -55,6 +67,19 @@ export default function CategoryProductsGrid({
           />
         ))}
       </div>
+      
+      {/* İlk yükleme için skeleton göster */}
+      {isFetching && products.length === 0 && (
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 mt-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="animate-pulse">
+              <div className="bg-gray-200 h-48 rounded-lg mb-2" />
+              <div className="bg-gray-200 h-4 rounded w-3/4 mb-2" />
+              <div className="bg-gray-200 h-4 rounded w-1/2" />
+            </div>
+          ))}
+        </div>
+      )}
     </InfiniteScroll>
   );
 }

features/collections/components/CollectionFilters.tsx

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

features/collections/components/CollectionFiltersSheet.tsx

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

features/collections/components/CollectionPageClient.tsx

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

features/collections/components/CollectionProductsGrid.tsx

@@ -0,0 +1,60 @@
+import InfiniteScroll from "react-infinite-scroll-component";
+import ProductCard from "@/features/home/components/ProductCard";
+import type { Product } from "@/lib/types/api";
+
+interface CollectionProductsGridProps {
+  products: Product[];
+  hasMore: boolean;
+  onLoadMore: () => void;
+  translations: {
+    loading: string;
+    no_results: string;
+  };
+}
+
+export default function CollectionProductsGrid({
+  products,
+  hasMore,
+  onLoadMore,
+  translations,
+}: CollectionProductsGridProps) {
+  if (products.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        {translations.no_results}
+      </div>
+    );
+  }
+
+  return (
+    <InfiniteScroll
+      dataLength={products.length}
+      next={onLoadMore}
+      hasMore={hasMore}
+      scrollThreshold={0.8}
+      style={{ overflow: "visible" }}
+      loader={
+        <div className="flex justify-center py-4">
+          <div>{translations.loading}</div>
+        </div>
+      }
+    >
+      <div className="bg-white rounded-lg grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+        {products.map((product) => (
+          <ProductCard
+            key={product.id}
+            id={product.id}
+            name={product.name}
+            price={
+              product.price_amount ? parseFloat(product.price_amount) : null
+            }
+            struct_price_text={`${product.price_amount} TMT`}
+            images={[product.media?.[0]?.images_400x400]}
+            stock={product.stock}
+            button={true}
+          />
+        ))}
+      </div>
+    </InfiniteScroll>
+  );
+}

features/collections/hooks/useCollections.ts

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

features/home/components/ProductGrid.tsx

@@ -19,7 +19,7 @@ export default function CollectionSection({ collection, locale }: Props) {
   } = useCollectionProducts(collection.id);
 
   const handleTitleClick = () => {
-    router.push(`/${locale}/collections/${collection.id}`);
+    router.push(`/collections/${collection.slug}`);
   };
 
   // Hide section if no products

features/orders/components/OrderPage.tsx

@@ -195,8 +195,8 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
       <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">{t("my_orders")}</h1>
 
       <Tabs defaultValue="active" className="w-full">
-        <TabsList className="mb-6">
-          <TabsTrigger value="active">
+        <TabsList className="mb-4 md:mb-6 w-full md:w-fit gap-2 p-0">
+          <TabsTrigger value="active" >
             {t("active_orders")} ({activeOrders.length})
           </TabsTrigger>
           <TabsTrigger value="completed">

features/products/components/ProductImageGallery.tsx

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

features/products/components/ProductInfoCard.tsx

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

features/products/components/ProductPageContent.tsx

@@ -1,30 +1,12 @@
 "use client";
 
 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";
+  useProductsBySlug,
+  useRelatedProducts,
+  useSubmitReview,
+} from "@/features/products/hooks/useProducts";
 import {
   useAddToCart,
   useUpdateCartItemQuantity,
@@ -33,6 +15,13 @@ import {
 } from "@/features/cart/hooks/useCart";
 import { useTranslations } from "next-intl";
 import { toast } from "sonner";
+import { ProductImageGallery } from "./ProductImageGallery";
+import { ProductInfoCard } from "./ProductInfoCard";
+import { ProductPurchaseCard } from "./ProductPurchaseCard";
+import { ProductReviewsSection } from "./ProductReviewsSection";
+import { RelatedProductsSection } from "./RelatedProductsSection";
+import { ReviewModal } from "./ReviewModal";
+import { StockLimitModal } from "./StockLimitModal";
 
 interface ProductDetailProps {
   slug: string;
@@ -47,12 +36,12 @@ interface PendingUpdate {
 }
 
 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);
+  const [showReviewModal, setShowReviewModal] = useState(false);
 
   const t = useTranslations();
 
@@ -63,24 +52,30 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
   const retryTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const syncToServerRef = useRef<((quantity: number) => void) | null>(null);
   const retrySyncRef = useRef<((quantity: number) => void) | null>(null);
-  const autoplayTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
   const {
     data: product,
     isLoading: productLoading,
     error,
+    refetch: refetchProduct,
   } = useProductsBySlug(slug);
+
   const { data: cartData, refetch: refetchCart } = useCart();
+  
+  const { data: relatedProducts } = useRelatedProducts(product?.id || 0, {
+    enabled: !!product?.id,
+  });
+
   const addToCartMutation = useAddToCart();
   const updateCartMutation = useUpdateCartItemQuantity();
   const removeFromCartMutation = useRemoveFromCart();
+  const submitReviewMutation = useSubmitReview();
 
   const cartItem = useMemo(
     () => cartData?.data?.find((item: any) => item.product?.id === product?.id),
     [cartData, product]
   );
   const isInCart = !!cartItem;
-
   const availableStock = product?.stock || 0;
 
   const imageUrls = useMemo(
@@ -91,42 +86,11 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
     [product]
   );
 
-  // Auto-play carousel every 3 seconds
-  useEffect(() => {
-    if (imageUrls.length <= 1) return;
-
-    const startAutoplay = () => {
-      autoplayTimerRef.current = setInterval(() => {
-        setSelectedImage((prev) => (prev + 1) % imageUrls.length);
-      }, 3000);
-    };
-
-    startAutoplay();
-
-    return () => {
-      if (autoplayTimerRef.current) {
-        clearInterval(autoplayTimerRef.current);
-      }
-    };
-  }, [imageUrls.length]);
-
-  // Reset autoplay timer when user manually selects image
-  const handleImageSelect = useCallback(
-    (index: number) => {
-      setSelectedImage(index);
-
-      // Reset autoplay timer
-      if (autoplayTimerRef.current) {
-        clearInterval(autoplayTimerRef.current);
-      }
-
-      if (imageUrls.length > 1) {
-        autoplayTimerRef.current = setInterval(() => {
-          setSelectedImage((prev) => (prev + 1) % imageUrls.length);
-        }, 3000);
-      }
-    },
-    [imageUrls.length]
+  // ✅ CORRECT - Use reviews from product data
+  const reviews = useMemo(() => product?.reviews_resources || [], [product]);
+  const averageRating = useMemo(
+    () => (product?.reviews?.rating ? parseFloat(product.reviews.rating) : 0),
+    [product]
   );
 
   useEffect(() => {
@@ -138,19 +102,16 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
   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)
@@ -164,13 +125,11 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
 
   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 {
@@ -225,7 +184,6 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
       setSyncError(false);
 
       try {
-        // If quantity is 0, remove from cart
         if (quantity === 0) {
           await removeFromCartMutation.mutateAsync(product.id);
           toast.success(t("removed_from_cart"));
@@ -245,7 +203,6 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
         setIsSyncing(false);
         retryCountRef.current = 0;
         clearPendingUpdate();
-
         await refetchCart();
 
         if (pendingQuantityRef.current !== null) {
@@ -340,7 +297,6 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
     return () => {
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
       if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
-      if (autoplayTimerRef.current) clearInterval(autoplayTimerRef.current);
     };
   }, []);
 
@@ -356,7 +312,6 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
       });
 
       await refetchCart();
-
       setIsSyncing(false);
 
       toast.success(t("added_to_cart"), {
@@ -376,14 +331,11 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
       setShowStockModal(true);
       return;
     }
-
     setLocalQuantity((prev) => prev + 1);
   }, [localQuantity, availableStock]);
 
   const handleQuantityDecrease = useCallback(() => {
-    // Allow decreasing to 0 to remove from cart
     if (localQuantity <= 0) return;
-
     setLocalQuantity((prev) => prev - 1);
   }, [localQuantity]);
 
@@ -391,6 +343,37 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
     setIsFavorite(!isFavorite);
   }, [isFavorite]);
 
+  const handleSubmitReview = useCallback(
+    async (rating: number, text: string) => {
+      if (!product?.id || rating === 0 || !text.trim()) {
+        toast.error(t("error"), {
+          description: "Please provide rating and review text",
+        });
+        return;
+      }
+
+      try {
+        await submitReviewMutation.mutateAsync({
+          productId: product.id,
+          rating: rating,
+          title: text,
+          source: "site",
+        });
+
+        // ✅ Refetch product to get updated reviews
+        await refetchProduct();
+        
+        toast.success("Review submitted successfully!");
+        setShowReviewModal(false);
+      } catch (error) {
+        toast.error(t("error"), {
+          description: "Failed to submit review",
+        });
+      }
+    },
+    [product?.id, submitReviewMutation, refetchProduct, t]
+  );
+
   const loadingSkeleton = useMemo(
     () => (
       <div className="container mx-auto px-4 py-8">
@@ -413,9 +396,7 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
     []
   );
 
-  if (productLoading) {
-    return loadingSkeleton;
-  }
+  if (productLoading) return loadingSkeleton;
 
   if (error || !product) {
     return (
@@ -434,318 +415,67 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
     <>
       <div className="px-2 md:px-4 lg:px-6 rounded-lg mb-18 space-y-8 max-w-[1504px] mx-auto">
         <div className="flex flex-col lg:flex-row gap-8 rounded-b-lg bg-white p-4">
-          <div className="flex-1 max-w-2xl">
-            <div className="relative">
-              <div className="relative aspect-square w-full rounded-2xl overflow-hidden bg-white">
-                {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>
+          <ProductImageGallery
+            images={imageUrls}
+            productName={product.name}
+            noImageText={t("no_image")}
+          />
 
-              {imageUrls.length > 1 && (
-                <div className="mt-4 flex gap-2 overflow-x-auto pb-2">
-                  {imageUrls.map((image, index) => (
-                    <button
-                      key={index}
-                      onClick={() => handleImageSelect(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>
+          <ProductInfoCard
+            brandName={product.brand?.name}
+            stock={product.stock}
+            barcode={product.barcode}
+            colour={product.colour}
+            properties={product.properties}
+            description={product.description}
+            averageRating={averageRating}
+            reviewsCount={product.reviews?.count || 0}
+            t={t}
+          />
 
-          <div className="flex-1 space-y-6 bg-white">
-            <div>
-              <h1 className="text-3xl font-bold mb-2">{product.name}</h1>
-            </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("brands")}</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 ">
-              <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-2">
-                {isInCart ? (
-                  <>
-                    <Link href="/cart">
-                      <Button
-                        size="lg"
-                        className="w-full rounded-lg text-lg font-bold bg-green-600 hover:bg-green-700 mb-4"
-                      >
-                        <ShoppingCart className="mr-2 h-5 w-5" />
-                        {t("go_to_cart")}
-                      </Button>
-                    </Link>
-
-                    <div className="flex items-center gap-2">
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        onClick={handleQuantityDecrease}
-                        disabled={isSyncing}
-                        className={`rounded-lg h-12 w-12 ${
-                          isSyncing ? "opacity-70" : ""
-                        }`}
-                      >
-                        <Minus className="h-5 w-5" />
-                      </Button>
-                      <div className="flex-1 text-center font-semibold text-xl border rounded-xl h-12 flex items-center justify-center relative">
-                        {localQuantity}
-
-                        {syncError && (
-                          <span
-                            className="absolute -top-1 -right-1 h-2 w-2 bg-red-500 rounded-full"
-                            title="Sync error"
-                          />
-                        )}
-                      </div>
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        onClick={handleQuantityIncrease}
-                        disabled={localQuantity >= availableStock || isSyncing}
-                        className={`rounded-lg h-12 w-12 ${
-                          isSyncing ? "opacity-70" : ""
-                        } ${
-                          localQuantity >= availableStock
-                            ? "opacity-50 cursor-not-allowed"
-                            : ""
-                        }`}
-                      >
-                        <Plus className="h-5 w-5" />
-                      </Button>
-
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        onClick={handleToggleFavorite}
-                        className={`rounded-lg h-12 w-12 transition-all border cursor-pointer ${
-                          isFavorite
-                            ? "bg-[#F0F8FF] border-blue-300 hover:bg-blue-100"
-                            : "hover:bg-gray-50"
-                        }`}
-                      >
-                        <Heart
-                          className={`h-6! w-6! transition-all ${
-                            isFavorite
-                              ? "fill-[#005bff] text-[#005bff]"
-                              : "text-[#005bff]"
-                          }`}
-                        />
-                      </Button>
-                    </div>
-                  </>
-                ) : (
-                  <Button
-                    size="lg"
-                    onClick={handleAddToCart}
-                    disabled={isSyncing || product.stock === 0}
-                    className="w-full rounded-lg text-lg font-bold bg-[#005bff] hover:bg-[#0041c4] cursor-pointer"
-                  >
-                    {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>
-                )}
-              </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-lg"
-                >
-                  {t("write_to_store")}
-                </Button>
-              </Card>
-            )}
-          </div>
+          <ProductPurchaseCard
+            price={product.price_amount}
+            oldPrice={product.old_price_amount}
+            isInCart={isInCart}
+            localQuantity={localQuantity}
+            availableStock={availableStock}
+            isSyncing={isSyncing}
+            syncError={syncError}
+            isFavorite={isFavorite}
+            productStock={product.stock}
+            channelName={product.channel?.[0]?.name}
+            onAddToCart={handleAddToCart}
+            onQuantityIncrease={handleQuantityIncrease}
+            onQuantityDecrease={handleQuantityDecrease}
+            onToggleFavorite={handleToggleFavorite}
+            t={t}
+          />
         </div>
+
+        <ProductReviewsSection
+          reviews={reviews}
+          averageRating={averageRating}
+          isLoading={false}
+          onWriteReview={() => setShowReviewModal(true)}
+        />
+
+        <RelatedProductsSection products={relatedProducts || []} />
       </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-lg"
-            >
-              {t("understood")}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
+      <StockLimitModal
+        open={showStockModal}
+        onOpenChange={setShowStockModal}
+        productName={product.name}
+        availableStock={availableStock}
+        t={t}
+      />
+
+      <ReviewModal
+        open={showReviewModal}
+        onOpenChange={setShowReviewModal}
+        onSubmit={handleSubmitReview}
+        isSubmitting={submitReviewMutation.isPending}
+      />
     </>
   );
-}
+}

features/products/components/ProductPurchaseCard.tsx

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

features/products/components/ProductReviewsSection.tsx

@@ -0,0 +1,91 @@
+import { Star, Send } from "lucide-react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface Review {
+  id: number;
+  rating: number;
+  title: string;
+  created_at: string;
+}
+
+interface ProductReviewsSectionProps {
+  reviews: Review[];
+  averageRating: number;
+  isLoading: boolean;
+  onWriteReview: () => void;
+}
+
+export function ProductReviewsSection({
+  reviews,
+  averageRating,
+  isLoading,
+  onWriteReview,
+}: ProductReviewsSectionProps) {
+  const renderStars = (rating: number) => {
+    return (
+      <div className="flex gap-1">
+        {[1, 2, 3, 4, 5].map((star) => (
+          <Star
+            key={star}
+            className={`h-5 w-5 transition-all ${
+              star <= rating
+                ? "fill-yellow-400 text-yellow-400"
+                : "text-gray-300"
+            }`}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <Card className="p-6 rounded-xl">
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <h3 className="text-2xl font-bold">Customer Reviews</h3>
+          <div className="flex items-center gap-2 mt-2">
+            {renderStars(Math.round(averageRating))}
+            <span className="text-sm text-gray-600">
+              {averageRating.toFixed(1)} out of 5
+            </span>
+          </div>
+        </div>
+        <Button onClick={onWriteReview} className="rounded-lg">
+          <Send className="mr-2 h-4 w-4" />
+          Write Review
+        </Button>
+      </div>
+
+      <Separator className="my-4" />
+
+      {isLoading ? (
+        <div className="space-y-4">
+          {[1, 2, 3].map((i) => (
+            <Skeleton key={i} className="h-24 w-full" />
+          ))}
+        </div>
+      ) : reviews.length > 0 ? (
+        <div className="space-y-4">
+          {reviews.map((review) => (
+            <div key={review.id} className="border-b pb-4 last:border-0">
+              <div className="flex items-start justify-between mb-2">
+                <div>
+                  {renderStars(review.rating)}
+                  
+                </div>
+              </div>
+              <p className="text-gray-700">{review.title}</p>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-8 text-gray-500">
+          No reviews yet. Be the first to review this product!
+        </div>
+      )}
+    </Card>
+  );
+}

features/products/components/RelatedProductsSection.tsx

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

features/products/components/ReviewModal.tsx

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { Star, Send, Loader2 } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+
+interface ReviewModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (rating: number, text: string) => Promise<void>;
+  isSubmitting: boolean;
+}
+
+export function ReviewModal({
+  open,
+  onOpenChange,
+  onSubmit,
+  isSubmitting,
+}: ReviewModalProps) {
+  const [rating, setRating] = useState(0);
+  const [text, setText] = useState("");
+  const [hoveredStar, setHoveredStar] = useState(0);
+
+  const handleClose = () => {
+    onOpenChange(false);
+    setRating(0);
+    setText("");
+    setHoveredStar(0);
+  };
+
+  const handleSubmit = async () => {
+    await onSubmit(rating, text);
+    handleClose();
+  };
+
+  const renderStars = () => {
+    return (
+      <div className="flex gap-2">
+        {[1, 2, 3, 4, 5].map((star) => (
+          <Star
+            key={star}
+            className={`h-5 w-5 cursor-pointer transition-all ${
+              star <= (hoveredStar || rating)
+                ? "fill-yellow-400 text-yellow-400"
+                : "text-gray-300"
+            }`}
+            onClick={() => setRating(star)}
+            onMouseEnter={() => setHoveredStar(star)}
+            onMouseLeave={() => setHoveredStar(0)}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="text-xl">Write a Review</DialogTitle>
+          <DialogDescription>
+            Share your experience with this product
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 pt-4">
+          <div>
+            <label className="block text-sm font-medium mb-2">Rating</label>
+            {renderStars()}
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2">
+              Your Review
+            </label>
+            <Textarea
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              placeholder="Write your review here..."
+              className="min-h-[120px] resize-none"
+              maxLength={500}
+            />
+            <p className="text-xs text-gray-500 mt-1">
+              {text.length}/500 characters
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-3 mt-6">
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            className="flex-1 rounded-lg"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={rating === 0 || !text.trim() || isSubmitting}
+            className="flex-1 rounded-lg"
+          >
+            {isSubmitting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Submitting...
+              </>
+            ) : (
+              <>
+                <Send className="mr-2 h-4 w-4" />
+                Submit Review
+              </>
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

features/products/components/StockLimitModal.tsx

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

features/products/hooks/useProducts.ts

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

features/profile/components/ProfilePageContent.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useMemo, useState, useEffect } from "react";
-import { LogOut, Edit2, Save, X, User, Phone, MapPin, Mail } from "lucide-react";
+import { LogOut, Edit2, Save, X, User, Phone, MapPin } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -29,7 +29,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
 
   const [isEditing, setIsEditing] = useState(false);
   const [formData, setFormData] = useState({
-    first_name: "",
+    name: "",
     last_name: "",
     phone_number: "",
     address: "",
@@ -37,8 +37,9 @@ export default function ClientProfilePage(props: ProfilePageProps) {
 
   useEffect(() => {
     if (user && !isEditing) {
+      console.log("[Profile] User data loaded:", user);
       setFormData({
-        first_name: user.first_name || "",
+        name: user.first_name || "",
         last_name: user.last_name || "",
         phone_number: user.phone_number || "",
         address: user.address || "",
@@ -46,14 +47,6 @@ export default function ClientProfilePage(props: ProfilePageProps) {
     }
   }, [user, isEditing]);
 
-  const prepareDataForAPI = useCallback(() => {
-    return {
-      name: `${formData.first_name} ${formData.last_name}`.trim(),
-      phone_number: formData.phone_number,
-      address: formData.address,
-    };
-  }, [formData]);
-
   const handleLogout = useCallback(() => {
     clearAuthToken();
     window.location.href = "/";
@@ -62,7 +55,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
   const handleEdit = useCallback(() => {
     if (user) {
       setFormData({
-        first_name: user.first_name || "",
+        name: user.first_name || "",
         last_name: user.last_name || "",
         phone_number: user.phone_number || "",
         address: user.address || "",
@@ -75,7 +68,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
     setIsEditing(false);
     if (user) {
       setFormData({
-        first_name: user.first_name || "",
+        name: user.first_name || "",
         last_name: user.last_name || "",
         phone_number: user.phone_number || "",
         address: user.address || "",
@@ -84,23 +77,35 @@ export default function ClientProfilePage(props: ProfilePageProps) {
   }, [user]);
 
   const handleSave = useCallback(async () => {
-    const apiData = prepareDataForAPI();
-    
-    if (!apiData.name) {
+    if (!formData.name.trim()) {
       toast.error(t("name_required") || "Name is required");
       return;
     }
 
+    const apiData = {
+      name: formData.name.trim(),
+      last_name: formData.last_name.trim(),
+      phone_number: formData.phone_number.trim(),
+      address: formData.address.trim(),
+    };
+
+    console.log("[Profile] Saving data:", apiData);
+
     try {
       await updateProfile.mutateAsync(apiData);
       setIsEditing(false);
-      toast.success(t("profile_updated_success") || "Profile updated successfully");
+      toast.success(
+        t("profile_updated_success") || "Profile updated successfully"
+      );
     } catch (err: any) {
-      const errorMessage = err?.response?.data?.message || t("profile_update_error") || "Failed to update profile";
+      const errorMessage =
+        err?.response?.data?.message ||
+        t("profile_update_error") ||
+        "Failed to update profile";
       toast.error(errorMessage);
-      console.error("Profile update error:", err);
+      console.error("[Profile] Update error:", err);
     }
-  }, [formData, updateProfile, t, prepareDataForAPI]);
+  }, [formData, updateProfile, t]);
 
   const handleInputChange = useCallback(
     (field: keyof typeof formData, value: string) => {
@@ -165,7 +170,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8 pt-20 sm:pt-24">
+    <div className="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8 pb-20 sm:pb-24">
       <div className="container mx-auto max-w-4xl">
         {/* Header Section */}
         <div className="mb-6 sm:mb-8">
@@ -175,7 +180,9 @@ export default function ClientProfilePage(props: ProfilePageProps) {
                 {t("profile")}
               </h1>
               <p className="text-sm sm:text-base text-gray-600">
-                {isEditing ? t("edit_your_information") : t("view_your_information")}
+                {isEditing
+                  ? t("edit_your_information")
+                  : t("view_your_information")}
               </p>
             </div>
             <div className="flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 bg-blue-600 rounded-full flex items-center justify-center shadow-sm">
@@ -209,7 +216,7 @@ export default function ClientProfilePage(props: ProfilePageProps) {
               )}
             </div>
           </CardHeader>
-          
+
           <CardContent className="pt-5 sm:pt-6 space-y-4 sm:space-y-5">
             {user && (
               <>
@@ -217,17 +224,17 @@ export default function ClientProfilePage(props: ProfilePageProps) {
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">
                   <div className="space-y-2">
                     <Label
-                      htmlFor="firstName"
+                      htmlFor="name"
                       className="text-sm font-medium text-gray-700 flex items-center gap-1.5"
                     >
                       <User className="h-3.5 w-3.5 text-gray-400" />
                       {t("first_name")}
                     </Label>
                     <Input
-                      id="firstName"
-                      value={formData.first_name}
+                      id="name"
+                      value={formData.name}
                       onChange={(e) =>
-                        handleInputChange("first_name", e.target.value)
+                        handleInputChange("name", e.target.value)
                       }
                       disabled={!isEditing}
                       className={`h-10 sm:h-11 text-sm sm:text-base ${
@@ -264,6 +271,8 @@ export default function ClientProfilePage(props: ProfilePageProps) {
                   </div>
                 </div>
 
+<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">
+
                 {/* Phone Field */}
                 <div className="space-y-2">
                   <Label
@@ -288,7 +297,6 @@ export default function ClientProfilePage(props: ProfilePageProps) {
                     placeholder={t("enter_phone_number")}
                   />
                 </div>
-
                 {/* Address Field */}
                 <div className="space-y-2">
                   <Label
@@ -313,6 +321,8 @@ export default function ClientProfilePage(props: ProfilePageProps) {
                     placeholder={t("enter_address")}
                   />
                 </div>
+</div>
+
 
                 {/* Action Buttons - Edit Mode */}
                 {isEditing && (
@@ -323,7 +333,9 @@ export default function ClientProfilePage(props: ProfilePageProps) {
                       className="w-full sm:flex-1 bg-blue-600 hover:bg-blue-700 h-10 sm:h-11 text-sm sm:text-base font-medium shadow-sm"
                     >
                       <Save className="h-4 w-4 mr-2" />
-                      {updateProfile.isPending ? t("saving") : t("save_changes")}
+                      {updateProfile.isPending
+                        ? t("saving")
+                        : t("save_changes")}
                     </Button>
                     <Button
                       onClick={handleCancel}
@@ -356,4 +368,4 @@ export default function ClientProfilePage(props: ProfilePageProps) {
       </div>
     </div>
   );
-}
+}

features/profile/userStore.ts

@@ -1,4 +1,4 @@
-import type { UserProfile } from "./types";
+import type { UserProfile } from "@/lib/types/api";
 
 // In-memory store (session-based, no persistence)
 class UserStore {
@@ -16,11 +16,12 @@ class UserStore {
     this.user = null;
   }
 
-  getOrderData(): { customer_name: string; customer_phone: string } | null {
+  getOrderData(): { customer_name: string; customer_phone: string, customer_last_name: string } | null {
     if (!this.user) return null;
     
     return {
-      customer_name: `${this.user.first_name} ${this.user.last_name}`.trim(),
+      customer_name: this.user.first_name,
+      customer_last_name: this.user.last_name,
       customer_phone: this.user.phone_number,
     };
   }

i18n/messages/ru.json

@@ -17,7 +17,7 @@
     "enterPhone": "Введите свой номер телефона",
     "weWillSendCode": "Мы вышлем вам код",
     "loading": "Загрузка...",
-     "all_collections_loaded": "Все коллекции загружены"
+    "all_collections_loaded": "Все коллекции загружены"
   },
   "category": "Категория",
   "checkout": "Оформить заказ",
@@ -27,7 +27,7 @@
   "total_price": "Общая цена:",
   "profile": "Профиль",
   "cart_orders": "Корзина заказов",
-   "shipping_method": "Способ доставки",
+  "shipping_method": "Способ доставки",
   "product_description_title": "Описание к товару",
   "recommended": "Рекомендуем также",
   "address_search": "Поиск адреса",
@@ -147,12 +147,21 @@
   "sending": "Отправка...",
   "verifying": "Проверка...",
   "verify": "Подтвердить",
-   "only_left": "Осталось {count} шт.",
+  "only_left": "Осталось {count} шт.",
   "stock_limit_title": "Недостаточно на складе",
   "stock_limit_message": "{product} закончился. Можно купить только {stock} шт.",
   "understood": "Понятно",
   "loading": "Загрузка...",
   "customer_information": "Информация о клиенте",
-  "name": "Имя"
- 
-}
+  "name": "Имя",
+  "edit_your_information": "Изменить информацию",
+  "view_your_information": "Просмотр информации",
+  "edit": "Изменить",
+  "enter_first_name": "Введите имя",
+  "enter_last_name": "Введите фамилию",
+  "enter_phone_number": "Введите номер телефона",
+  "enter_address": "Введите адрес",
+  "save_changes": "Сохранить изменения",
+  "saving": "Сохранение...",
+  "cancel": "Отменить"
+}

i18n/messages/tm.json

@@ -147,15 +147,22 @@
   "sending": "Iberilýär...",
   "verifying": "Barlanýar...",
   "verify": "Tassyklamak",
-   "only_left": "Diňe {count} sany galdy",
+  "only_left": "Diňe {count} sany galdy",
   "stock_limit_title": "Çäkli sanda",
   "stock_limit_message": "{product} harytdan diňe {stock} sany bar. Mundan köp sebediňize goşup bilmersiňiz.",
   "understood": "Düşündim",
-    "loading": "Ýüklenýär...",
-    "customer_information": "Müşteri maglumatlary",
-    "name": "Ady"
-    
+  "loading": "Ýüklenýär...",
+  "customer_information": "Müşteri maglumatlary",
+  "name": "Ady",
+  "edit_your_information": "Maglumatlaryňyzy üýtgediň",
+  "view_your_information": "Maglumatlaryňyzy görüň",
+  "edit": "Üýtgetmek",
+  "enter_first_name": "Adyňyzy ýazyň",
+  "enter_last_name": "Familiýaňyzy ýazyň",
+  "enter_phone_number": "Telefon belgisini giriziň",
+  "enter_address": "Adres giriziň",
+  "save_changes": "Ýatda sakla",
+  "saving": "Ýatda saklýar...",
+  "cancel": "Goýbolsun"
   
-
-  
-}
+}

lib/types/api.ts

@@ -97,10 +97,11 @@ export interface Category {
 export interface Collection {
   id: number;
   name: string;
-  slug?: string;
+  slug: string;
   description?: string;
   image?: string;
   created_at?: string;
+  media?: ProductMedia[];
 }
 
 // Cart Types
@@ -495,7 +496,7 @@ export interface FiltersResponse {
   };
 }
 
-// Existing types'a ekleme
+
 export interface ProductFilters {
   brands?: number[];
   categories?: number[];
@@ -503,4 +504,5 @@ export interface ProductFilters {
   max_price?: number;
   page?: number;
   limit?: number;
-}
+  collection_id?: number; 
+}