connected api with profile, order

features/home/components/Carousel.tsx

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

features/home/components/CategoryGrid.tsx

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

features/home/components/HomePage.tsx

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

features/home/components/ProductGrid.tsx

@@ -0,0 +1,115 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { ChevronRight } from "lucide-react";
+import ProductCard from "@/components/ProductCard";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useCollectionProducts } from "@/lib/hooks";
+import type { Collection } from "@/lib/types/api";
+
+type Props = {
+  collection: Collection;
+  locale: string;
+};
+
+export default function CollectionSection({ collection, locale }: Props) {
+  const router = useRouter();
+  const [shouldRender, setShouldRender] = useState(true);
+
+  const {
+    data: productsData,
+    isLoading,
+    isError,
+  } = useCollectionProducts(collection.id, { enabled: shouldRender });
+
+  // Determine if section should render based on products
+  useEffect(() => {
+    if (!isLoading && productsData) {
+      const hasProducts = productsData.data && productsData.data.length > 0;
+      setShouldRender(hasProducts);
+    }
+  }, [isLoading, productsData]);
+
+  // Don't render if no products after loading
+  if (!isLoading && (!productsData?.data || productsData.data.length === 0)) {
+    return null;
+  }
+
+  const handleTitleClick = () => {
+    router.push(`/${locale}/collections/${collection.id}`);
+  };
+
+  // Show skeleton while loading
+  if (isLoading) {
+    return (
+      <section className="bg-white rounded-2xl shadow-sm p-6">
+        <div className="flex items-center justify-between mb-4">
+          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-6 w-6 rounded-full" />
+        </div>
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} className="w-full h-64 rounded-lg" />
+          ))}
+        </div>
+      </section>
+    );
+  }
+
+  // Show error state
+  if (isError) {
+    return null; // Silently skip errored collections
+  }
+
+  // Slice to show only first 4 products
+  const displayProducts = productsData?.data.slice(0, 4) || [];
+
+  return (
+    <section className="bg-white rounded-2xl shadow-sm p-6">
+      <div
+        className="flex items-center justify-between mb-4 cursor-pointer group"
+        onClick={handleTitleClick}
+      >
+        <h2 className="text-xl font-semibold group-hover:text-blue-600 transition-colors">
+          {collection.name}
+        </h2>
+        <ChevronRight className="w-6 h-6 text-gray-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-all" />
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+        {displayProducts.map((product) => {
+          // Extract first media image or use placeholder
+          const firstImage =
+            product.media?.[0]?.images_800x800 ||
+            product.media?.[0]?.images_720x720 ||
+            product.media?.[0]?.thumbnail ||
+            "/placeholder-product.jpg";
+
+          // Format price
+          const formattedPrice = product.price_amount
+            ? `${parseFloat(product.price_amount).toFixed(2)} TMT`
+            : "Price not available";
+
+          return (
+            <ProductCard
+              key={product.id}
+              id={product.id}
+              name={product.name}
+              price={
+                product.price_amount ? parseFloat(product.price_amount) : null
+              }
+              struct_price_text={formattedPrice}
+              images={[firstImage]}
+              is_favorite={false}
+              labels={[]}
+              price_color="#111"
+              height={360}
+              width={250}
+              button={false}
+            />
+          );
+        })}
+      </div>
+    </section>
+  );
+}

features/home/hooks/useCollections.ts

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

features/home/hooks/useMedia.ts

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