added collection page

2025-12-15 14:33:34 +05:00
parent 633a3c9d47
commit e886359c5c
31 changed files with 2118 additions and 716 deletions
--- a/features/cart/components/OrderSummary.tsx
+++ b/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")}
--- a/features/category/components/CategoryPageClient.tsx
+++ b/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>
  );
-}
+}
--- a/features/category/components/CategoryProductsGrid.tsx
+++ b/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>
  );
 }
--- a/features/collections/components/CollectionFilters.tsx
+++ b/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>
+  );
+}
--- a/features/collections/components/CollectionFiltersSheet.tsx
+++ b/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>
+  );
+}
--- a/features/collections/components/CollectionPageClient.tsx
+++ b/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>
+  );
+}
--- a/features/collections/components/CollectionProductsGrid.tsx
+++ b/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>
+  );
+}
--- a/features/collections/hooks/useCollections.ts
+++ b/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,
+  });
+}
--- a/features/home/components/ProductGrid.tsx
+++ b/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
--- a/features/orders/components/OrderPage.tsx
+++ b/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">
--- a/features/products/components/ProductImageGallery.tsx
+++ b/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>
+  );
+}
--- a/features/products/components/ProductInfoCard.tsx
+++ b/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>
+  );
+}
--- a/features/products/components/ProductPageContent.tsx
+++ b/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}
+      />
    </>
  );
-}
+}
--- a/features/products/components/ProductPurchaseCard.tsx
+++ b/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>
+  );
+}
--- a/features/products/components/ProductReviewsSection.tsx
+++ b/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>
+  );
+}
--- a/features/products/components/RelatedProductsSection.tsx
+++ b/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>
+  );
+}
--- a/features/products/components/ReviewModal.tsx
+++ b/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>
+  );
+}
--- a/features/products/components/StockLimitModal.tsx
+++ b/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>
+  );
+}
--- a/features/products/hooks/useProducts.ts
+++ b/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]
+  );
 }
--- a/features/profile/components/ProfilePageContent.tsx
+++ b/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>
  );
-}
+}
--- a/features/profile/userStore.ts
+++ b/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,
    };
  }