get product request fixed from catalog_selection bug

app/[locale]/about/baza/page.tsx

@@ -1,5 +1,5 @@
-import NormativBazaPage from "@/components/pages/about/aboutDetail/baza";
-import { Statistics } from "@/components/pages/home";
+import NormativBazaPage from "@/pages/about/aboutDetail/baza";
+import { Statistics } from "@/pages/home";
 
 export default function Baza() {
   return (

app/[locale]/about/layout.tsx

@@ -1,4 +1,4 @@
-import { AboutBanner } from "@/components/pages/about";
+import { AboutBanner } from "@/pages/about";
 import React from "react";
 
 export default function AboutLayout({

app/[locale]/about/notePP/page.tsx

@@ -1,5 +1,5 @@
 import { useTranslations } from "next-intl";
-import { Guides } from "@/components/pages/about/aboutDetail/guides";
+import { Guides } from "@/pages/about/aboutDetail/guides";
 
 export default function NotePPPage() {
   const t = useTranslations();

app/[locale]/about/page.tsx

@@ -1,5 +1,5 @@
-import { Story, WhyChooseUs } from "@/components/pages/about";
-import { Statistics } from "@/components/pages/home";
+import { Story, WhyChooseUs } from "@/pages/about";
+import { Statistics } from "@/pages/home";
 
 export default function Page() {
   return (

app/[locale]/about/sertificate/page.tsx

@@ -1,6 +1,6 @@
 "use client";
-import { CertCardSkeleton } from "@/components/pages/about/aboutDetail/loading/loading";
-import { CertCard } from "@/components/pages/about/aboutDetail/sertificateCard";
+import { CertCardSkeleton } from "@/pages/about/aboutDetail/loading/loading";
+import { CertCard } from "@/pages/about/aboutDetail/sertificateCard";
 import PaginationLite from "@/components/paginationUI";
 import { certs } from "@/lib/demoData";
 import httpClient from "@/request/api";

app/[locale]/catalog_page/page.tsx

@@ -1,7 +1,7 @@
 import { Breadcrumb } from "@/components/breadCrumb";
-import Catalog from "@/components/pages/home/blog/catalog";
-import { ProductBanner } from "@/components/pages/products";
-import { MainSubCategory } from "@/components/pages/subCategory";
+import Catalog from "@/pages/home/blog/catalog";
+import { ProductBanner } from "@/pages/products";
+import { MainSubCategory } from "@/pages/subCategory";
 
 export default function Page() {
   return (

app/[locale]/catalog_page/products/[slug]/page.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { Features, RightSide, SliderComp } from "@/components/pages/products";
-import { useProductPageInfo } from "@/store/useProduct";
+import { Features, RightSide, SliderComp } from "@/pages/products";
+import { useProductPageInfo } from "@/zustand/useProduct";
 import { useQuery } from "@tanstack/react-query";
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
-import { LoadingSkeleton } from "@/components/pages/products/slug/loading";
-import { EmptyState } from "@/components/pages/products/slug/empty";
+import { LoadingSkeleton } from "@/pages/products/slug/loading";
+import { EmptyState } from "@/pages/products/slug/empty";
 import { useEffect } from "react";
 import { Breadcrumb } from "@/components/breadCrumb";
 import { useSearchParams } from "next/navigation";

app/[locale]/catalog_page/products/page.tsx

@@ -1,17 +1,15 @@
 "use client";
 import { Breadcrumb } from "@/components/breadCrumb";
-import { ProductBanner, Products } from "@/components/pages/products";
-import FilterCatalog from "@/components/pages/products/filter/catalog/filterCatalog";
-import { useSubCategory } from "@/store/useSubCategory";
+import { ProductBanner, Products } from "@/pages/products";
+import { useSubCategory } from "@/zustand/useSubCategory";
 
 export default function Page() {
   const subCategory = useSubCategory((state) => state.subCategory);
   return (
     <div className="bg-[#1e1d1c] pb-30">
       <ProductBanner />
-      {/* <FilterCatalog /> */}
-      <div className="max-w-300 w-full mx-auto pt-8">
-        <Breadcrumb customLabels={{ subCategory: subCategory.name}} />
+      <div className="max-w-300 w-full mx-auto pt-4">
+        <Breadcrumb customLabels={{ subCategory: subCategory.name }} />
       </div>
       <Products />
     </div>

app/[locale]/catalog_page/subCategory/page.tsx

@@ -1,6 +1,6 @@
 import { Breadcrumb } from "@/components/breadCrumb";
-import { ProductBanner } from "@/components/pages/products";
-import { MainSubCategory } from "@/components/pages/subCategory";
+import { ProductBanner } from "@/pages/products";
+import { MainSubCategory } from "@/pages/subCategory";
 
 export default function Page() {
   return (

app/[locale]/contact/page.tsx

@@ -1,4 +1,4 @@
-import { Contact } from "@/components/pages/contact";
+import { Contact } from "@/pages/contact";
 
 export default function Page() {
   return <Contact />;

app/[locale]/faq/page.tsx

@@ -1,4 +1,4 @@
-import { FaqBanner, Togle } from "@/components/pages/faq";
+import { FaqBanner, Togle } from "@/pages/faq";
 
 export default function Page() {
   return (

app/[locale]/home/page.tsx

@@ -8,7 +8,7 @@ import {
   Statistics,
   Testimonial,
   Video,
-} from "@/components/pages/home";
+} from "@/pages/home";
 
 export default function Home() {
   return (

app/[locale]/services/detail/page.tsx

@@ -7,7 +7,7 @@ import {
   SystemFeature,
 } from "@/lib/api/demoapi/operationalSystems";
 import { Breadcrumb } from "@/components/breadCrumb";
-import { useServiceDetail } from "@/store/useService";
+import { useServiceDetail } from "@/zustand/useService";
 import { useQuery } from "@tanstack/react-query";
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";

app/[locale]/services/page.tsx

@@ -1,9 +1,9 @@
-import { Video } from "@/components/pages/home";
+import { Video } from "@/pages/home";
 import {
   ServiceBanner,
   ServiceFaq,
   ServicePageServices,
-} from "@/components/pages/services";
+} from "@/pages/services";
 
 export default function Page() {
   return (

components/breadCrumb.tsx

@@ -3,9 +3,9 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ChevronRight, Home } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useCategory } from "@/store/useCategory";
-import { useSubCategory } from "@/store/useSubCategory";
-import { useProductPageInfo } from "@/store/useProduct";
+import { useCategory } from "@/zustand/useCategory";
+import { useSubCategory } from "@/zustand/useSubCategory";
+import { useProductPageInfo } from "@/zustand/useProduct";
 
 interface BreadcrumbProps {
   customLabels?: Record<string, string>;

components/pages/products/filter/catalog/filterCatalog.tsx

@@ -1,92 +0,0 @@
-"use client";
-import EmptyData from "@/components/EmptyData";
-import { CategoryType } from "@/lib/types";
-import httpClient from "@/request/api";
-import { getRouteLang } from "@/request/getLang";
-import { endPoints } from "@/request/links";
-import { useCategory } from "@/store/useCategory";
-import { useQuery } from "@tanstack/react-query";
-import CatalogCardSkeletonSmall from "./loading";
-import Image from "next/image";
-import { ArrowUpRight } from "lucide-react";
-
-export default function FilterCatalog() {
-  const language = getRouteLang();
-  const setCategory = useCategory((state) => state.setCategory);
-  const { data, isLoading } = useQuery({
-    queryKey: ["category", language],
-    queryFn: () => httpClient(endPoints.category.all),
-    select: (data): CategoryType[] => data?.data?.results,
-  });
-
-  if (isLoading) {
-    return (
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {[...Array(3)].map((_, index) => (
-          <CatalogCardSkeletonSmall key={index} />
-        ))}
-      </div>
-    );
-  }
-
-  // Ma'lumot yo'q holati
-  if (!data || data.length === 0) {
-    return (
-      <EmptyData
-        title="Katalog topilmadi"
-        description="Hozircha kategoriyalar mavjud emas. Keyinroq qaytib keling."
-        icon="shopping"
-      />
-    );
-  }
-
-  return (
-    <div className="max-w-200 w-full mx-auto space-x-5 px-5 flex items-center justify-around my-10 -mt-30 pb-5 relative z-20 sm:overflow-x-hidden overflow-x-scroll">
-      {data?.map((item) => (
-        <div
-          onClick={() => setCategory(item)}
-          className="shrink-0 group relative w-55 h-60 overflow-hidden rounded-2xl bg-[#17161679] border border-white/10 transition-all duration-500 hover:-translate-y-1 hover:border-red-700 cursor-pointer"
-        >
-          {/* Background glow effect */}
-          <div className="absolute inset-0 bg-linear-to-t from-red-600/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-
-          {/* Decorative corner accent */}
-          <div className="absolute top-0 right-0 w-16 h-16 bg-linear-to-br from-red-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-
-          {/* Content container */}
-          <div className="relative h-full flex flex-col p-4">
-            {/* Title section */}
-            <div className="mb-3">
-              <div className="flex items-start justify-between gap-2">
-                <h3 className="text-lg font-unbounded font-bold text-white leading-tight transition-colors duration-300">
-                  {item.name}
-                </h3>
-
-                <div className="shrink-0 w-6 h-6 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-red-500 transition-all duration-300 group-hover:scale-110">
-                  <ArrowUpRight
-                    className="w-3.5 h-3.5 text-white"
-                    strokeWidth={2.5}
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* Image container */}
-            <div className="relative flex-1 rounded-xl overflow-hidden bg-linear-to-br from-[#444242] to-gray-900/50 border border-white/5 group-hover:border-white/20 transition-all duration-500">
-              <div className="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent z-10" />
-
-              <div className="relative w-full h-full">
-                <Image
-                  src={item.image}
-                  alt={item.name}
-                  fill
-                  className="object-contain p-3 transition-transform duration-700 group-hover:scale-105"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

components/pages/products/filter/catalog/loading.tsx

@@ -1,23 +0,0 @@
-// components/CatalogCardSkeletonSmall.tsx
-export default function CatalogCardSkeletonSmall() {
-  return (
-    <div className="relative w-50 h-87.5 overflow-hidden rounded-2xl bg-[#17161679] border border-white/10 animate-pulse">
-      <div className="flex flex-col h-full p-4 gap-3">
-        
-        {/* Title skeleton */}
-        <div className="space-y-2">
-          <div className="h-5 bg-white/10 rounded-md w-3/4" />
-          <div className="h-5 bg-white/10 rounded-md w-1/2" />
-        </div>
-
-        {/* Image skeleton */}
-        <div className="flex-1 rounded-xl bg-linear-to-br from-[#444242] to-gray-900/50 border border-white/5 flex items-center justify-center">
-          <div className="w-20 h-20 bg-white/5 rounded-lg" />
-        </div>
-      </div>
-
-      {/* Shimmer */}
-      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-linear-to-r from-transparent via-white/5 to-transparent" />
-    </div>
-  );
-}

components/pages/products/filter/filter.tsx

@@ -1,265 +0,0 @@
-"use client";
-import { result } from "@/lib/demoData";
-import { useFilter } from "@/lib/filter-zustand";
-import httpClient from "@/request/api";
-import { endPoints } from "@/request/links";
-import { useCategory } from "@/store/useCategory";
-import { useSubCategory } from "@/store/useSubCategory";
-import { useQuery } from "@tanstack/react-query";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import { useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
-
-export default function Filter() {
-  const filter = useFilter((state) => state.filter);
-  const toggleFilter = useFilter((state) => state.toggleFilter);
-  const hasData = useFilter((state) => state.hasFilter);
-  const category = useCategory((state) => state.category);
-  const setCategory = useCategory((state) => state.setCategory);
-  const subCategory = useSubCategory((state) => state.subCategory);
-  const setSubCategory = useSubCategory((state) => state.setSubCategory);
-  const clearSubCategory = useSubCategory((state) => state.clearSubCategory);
-  const t = useTranslations();
-
-  const [dataExpanded, setDataExpanded] = useState<boolean>(false);
-  const [numberExpanded, setNumberExpanded] = useState<boolean>(false);
-
-  // ⭐ YANGI: Dropdown state'lar - har bir kategoriya uchun
-  const [openDropdowns, setOpenDropdowns] = useState<Record<number, boolean>>(
-    {},
-  );
-
-  const [catalogData, setCatalogData] = useState<
-    { id: number; name: string; type: string }[]
-  >(result[0].items);
-  const [sizeData, setSizeData] = useState<
-    { id: number; name: string; type: string }[]
-  >(result[1].items);
-
-  // Category data
-  const { data: categoryBack } = useQuery({
-    queryKey: ["category"],
-    queryFn: () => httpClient(endPoints.category.all),
-    select: (data) => data?.data?.results,
-  });
-
-  // ⭐ O'ZGARTIRILDI: subCategory so'rovi faqat dropdown ochilganda va have_sub_category true bo'lganda
-  const { data: subCategoryBack, isLoading: subCategoryLoading } = useQuery({
-    queryKey: ["subCategory", category.id],
-    queryFn: () => httpClient(endPoints.subCategory.byId(category.id)),
-    // ⭐ YANGI: Faqat category tanlangan va have_sub_category true bo'lsa ishlaydi
-    enabled:
-      !!category.id &&
-      category.have_sub_category === true &&
-      openDropdowns[category.id] === true,
-    select: (data) => data?.data?.results,
-  });
-
-  // ⭐ O'ZGARTIRILDI: Catalog va Size query'lari category yoki subCategory ID'ga qarab ishlaydi
-  const activeId = subCategory.id || category.id;
-
-  const { data: catalog } = useQuery({
-    queryKey: ["catalog", activeId],
-    queryFn: () => httpClient(endPoints.filter.catalogCategoryId(activeId)),
-    enabled: !!activeId,
-    select: (data) => {
-      const catalogData = data?.data?.results || [];
-      return catalogData.map((item: any) => ({
-        id: item.id,
-        name: item.name,
-        type: "catalog",
-      }));
-    },
-  });
-
-  const { data: size } = useQuery({
-    queryKey: ["size", activeId],
-    queryFn: () => httpClient(endPoints.filter.sizeCategoryId(activeId)),
-    enabled: !!activeId,
-    select: (data) => {
-      const sizedata = data?.data?.results || [];
-      return sizedata.map((item: any) => ({
-        id: item.id,
-        name: item.name,
-        type: "size",
-      }));
-    },
-  });
-
-  useEffect(() => {
-    catalog && setCatalogData(catalog);
-    size && setSizeData(size);
-  }, [size, catalog]);
-
-  // Bo'lim uchun ko'rsatiladigan itemlar
-  const visibleSectionData = dataExpanded
-    ? catalogData
-    : catalogData.slice(0, 5);
-
-  // O'lcham uchun ko'rsatiladigan itemlar
-  const visibleSectionNumber = numberExpanded
-    ? sizeData
-    : sizeData.slice(0, 10);
-
-  // ⭐ O'ZGARTIRILDI: Category bosilganda dropdown toggle qilish
-  const handleCategoryClick = (item: any) => {
-    if (item.have_sub_category) {
-      // Agar subCategory bo'lsa, dropdown ochish/yopish
-      setOpenDropdowns((prev) => ({
-        ...prev,
-        [item.id]: !prev[item.id],
-      }));
-
-      // Category'ni set qilish (filterlar yangilanishi uchun)
-      setCategory(item);
-
-      // SubCategory'ni tozalash (yangisini tanlash uchun)
-      if (!openDropdowns[item.id]) {
-        clearSubCategory();
-      }
-    } else {
-      // Agar subCategory bo'lmasa, to'g'ridan-to'g'ri category ni set qilish
-      setCategory(item);
-      clearSubCategory();
-
-      // Barcha dropdown'larni yopish
-      setOpenDropdowns({});
-    }
-  };
-
-  // ⭐ YANGI: SubCategory bosilganda
-  const handleSubCategoryClick = (item: any) => {
-    setSubCategory(item);
-  };
-
-  return (
-    <div className="space-y-3 lg:max-w-70 lg:px-0 px-3 w-full text-white ">
-      {/* ⭐ O'ZGARTIRILDI: Category filter with dropdown */}
-      <div className="bg-gray-500 rounded-lg w-full">
-        <p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
-          {t("category")}
-        </p>
-        <div className="lg:space-y-2 space-x-6 lg:p-2 p-5 flex lg:flex-col overflow-x-auto lg:overflow-x-hidden items-start justify-start w-full">
-          {categoryBack?.map((item: any) => (
-            <div key={item.id} className="w-full">
-              {/* Main Category */}
-              <div
-                onClick={() => handleCategoryClick(item)}
-                className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0 hover:bg-gray-600 lg:p-2 rounded transition-colors"
-              >
-                {/* Checkbox yoki Dropdown icon */}
-                {!item.have_sub_category ? (
-                  <span
-                    className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
-                      category.id === item.id
-                        ? "border-red-600 bg-red-600"
-                        : "border-gray-400 bg-transparent"
-                    }`}
-                    aria-label="Filter checkbox"
-                  >
-                    {category.id === item.id && (
-                      <Check className="h-3 w-3 text-white" strokeWidth={3} />
-                    )}
-                  </span>
-                ) : (
-                  <span
-                    className={`flex h-5 w-5 items-center justify-center rounded transition ${
-                      openDropdowns[item.id] ? "text-red-500" : "text-gray-400"
-                    }`}
-                    aria-label="Dropdown icon"
-                  >
-                    {openDropdowns[item.id] ? (
-                      <ChevronUp className="h-4 w-4" strokeWidth={2.5} />
-                    ) : (
-                      <ChevronDown className="h-4 w-4" strokeWidth={2.5} />
-                    )}
-                  </span>
-                )}
-
-                <p className="whitespace-nowrap font-medium">{item.name}</p>
-              </div>
-
-              {/* ⭐ YANGI: SubCategory Dropdown */}
-              {item.have_sub_category && openDropdowns[item.id] && (
-                <div className="ml-7 mt-2 space-y-2 border-l-2 border-gray-400 pl-3">
-                  {subCategoryLoading ? (
-                    <p className="text-sm text-gray-300">Yuklanmoqda...</p>
-                  ) : subCategoryBack && subCategoryBack.length > 0 ? (
-                    subCategoryBack.map((subItem: any) => (
-                      <div
-                        key={subItem.id}
-                        onClick={() => handleSubCategoryClick(subItem)}
-                        className="hover:cursor-pointer flex items-center gap-2 hover:bg-gray-600 p-1.5 rounded transition-colors"
-                      >
-                        <span
-                          className={`flex h-4 w-4 items-center justify-center rounded border-2 transition ${
-                            subCategory.id === subItem.id
-                              ? "border-red-600 bg-red-600"
-                              : "border-gray-400 bg-transparent"
-                          }`}
-                          aria-label="SubCategory checkbox"
-                        >
-                          {subCategory.id === subItem.id && (
-                            <Check
-                              className="h-2.5 w-2.5 text-white"
-                              strokeWidth={3}
-                            />
-                          )}
-                        </span>
-                        <p className="text-sm whitespace-nowrap">
-                          {subItem.name}
-                        </p>
-                      </div>
-                    ))
-                  ) : (
-                    <p className="text-sm text-gray-300">
-                      {t("subcategory_not_found")}
-                    </p>
-                  )}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Bo'lim filtri check */}
-      {/*{visibleSectionData && visibleSectionData.length > 0 && (
-        <div className="bg-gray-500 rounded-lg w-full">
-          <p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
-            {t("section")}
-          </p>
-          <div className="lg:space-y-3 space-x-6 lg:p-2 p-5 flex lg:flex-col overflow-x-auto lg:overflow-x-hidden items-start justify-start w-full">
-            {visibleSectionData.map((item: any) => (
-              <div
-                key={item.id}
-                onClick={() => toggleFilter(item)}
-                className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0 hover:bg-gray-600 lg:p-2 rounded transition-colors"
-              >
-                <span
-                  className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
-                    hasData(item.name)
-                      ? "border-red-600 bg-red-600"
-                      : "border-gray-400 bg-transparent"
-                  }`}
-                  aria-label="Filter checkbox"
-                >
-                  {hasData(item.name) && (
-                    <Check className="h-3 w-3 text-white" strokeWidth={3} />
-                  )}
-                </span>
-                <p className="whitespace-nowrap">{item.name}</p>
-              </div>
-            ))}
-          </div>
-          <button
-            className="lg:flex hidden p-2 text-lg underline hover:text-red-300 transition"
-            onClick={() => setDataExpanded(!dataExpanded)}
-          >
-            {dataExpanded ? t("hide") : t("show_more")}
-          </button>
-        </div>
-      )}*/}
-    </div>
-  );
-}

components/pages/products/filter/filterInfo.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { useFilter } from "@/lib/filter-zustand";
-import { X } from "lucide-react";
-import { useTranslations } from "next-intl";
-
-export default function FilterInfo() {
-  const filtered = useFilter((state) => state.filter);
-  const resetFilter = useFilter((state) => state.resetFilter);
-  const togleFilter = useFilter((state) => state.toggleFilter);
-  const t = useTranslations();
-  if (filtered.length === 0) {
-    return null;
-  }
-  return (
-    <div className="fixed bottom-13 left-5 z-10 bg-gray-500 p-3 rounded-lg space-y-3 max-w-70 w-full">
-      <div className="flex gap-1 flex-wrap">
-        {filtered &&
-          filtered.map((item) => (
-            <div
-              key={item.id}
-              className="flex items-center gap-1 p-1 rounded-lg bg-gray-700 text-white text-sm "
-            >
-              <button onClick={() => togleFilter(item)}>
-                <X size={16} />
-              </button>
-              {item.name}
-            </div>
-          ))}
-      </div>
-      <button onClick={resetFilter} className="text-white underline ">
-        {t("clear_all")}
-      </button>
-    </div>
-  );
-}

components/priceContact.tsx

@@ -3,7 +3,7 @@ import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { useState, useEffect } from "react";
 import { X } from "lucide-react";
-import { usePriceModalStore } from "@/store/useProceModalStore";
+import { usePriceModalStore } from "@/zustand/useProceModalStore";
 import { useMutation } from "@tanstack/react-query";
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";

lib/types.ts

@@ -54,3 +54,10 @@ export interface BannerType {
   title: string;
   description: string;
 }
+
+export interface CatalogItem {
+  id: number;
+  name: string;
+  parent: number | null;
+  children: CatalogItem[];
+}

pages/home/ourService.tsx

@@ -10,7 +10,7 @@ import Link from "next/link";
 import { motion } from "framer-motion";
 import { ServicesLoading } from "../services/loading";
 import { EmptyServices } from "../services/empty";
-import { useServiceDetail } from "@/store/useService";
+import { useServiceDetail } from "@/zustand/useService";
 import { cardVariants, containerVariants } from "@/lib/animations";
 
 export function OurService() {

pages/products/catalog.tsx

@@ -48,8 +48,8 @@ import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
-import { useCategory } from "@/store/useCategory";
-import { useSubCategory } from "@/store/useSubCategory";
+import { useCategory } from "@/zustand/useCategory";
+import { useSubCategory } from "@/zustand/useSubCategory";
 
 interface CatalogProps {
   id: number;

pages/products/filter/catalog.tsx

@@ -0,0 +1,150 @@
+"use client";
+import { useTranslations } from "next-intl";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useCatalogHook } from "./useCataloghook";
+import { useCatalog } from "@/zustand/useCatalog";
+import { AnimatePresence, motion } from "framer-motion";
+
+export function CatalogSection() {
+  const t = useTranslations();
+  const setParentID = useCatalog((state) => state.setParentID);
+  const parentID = useCatalog((state) => state.parentID);
+  const {
+    catalogSection,
+    catalogsectionChild,
+    setParent,
+    childLoading,
+    openDropdowns,
+    setOpenDropdowns,
+  } = useCatalogHook();
+
+  return (
+    <div className="p-2 border-y flex flex-col overflow-x-auto gap-2 lg:overflow-x-hidden items-start justify-start">
+      {/* ── Top-level categories ─────────────────────────────────────── */}
+      <div className="flex gap-4 items-center">
+        {catalogSection?.map((item: any) => (
+          <div key={item.id} className="flex gap-2">
+            <div
+              onClick={() => {
+                setParent(item.id);
+                setOpenDropdowns((prev) => (prev === item.id ? null : item.id));
+              }}
+              className="flex items-center gap-2"
+            >
+              <p
+                className={`whitespace-nowrap font-medium hover:cursor-pointer hover:text-red-500 transition-colors duration-150 ${
+                  openDropdowns === item.id ? "text-red-500" : ""
+                }`}
+              >
+                {item.name}
+              </p>
+
+              {item.children.length > 0 && (
+                <motion.span
+                  // Chevron rotates smoothly instead of swapping icons
+                  animate={{ rotate: openDropdowns === item.id ? 180 : 0 }}
+                  transition={{ duration: 0.25, ease: "easeInOut" }}
+                  className={`flex h-5 w-5 items-center justify-center rounded ${
+                    openDropdowns === item.id ? "text-red-500" : "text-gray-400"
+                  }`}
+                  aria-label="Dropdown icon"
+                >
+                  {/*
+                   * Single icon that rotates — replaces the ChevronUp/Down swap.
+                   * Logic unchanged: openDropdowns === item.id still drives it.
+                   */}
+                  <ChevronDown className="h-4 w-4" strokeWidth={2.5} />
+                </motion.span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* ── Sub-category dropdown — animated open/close ───────────────── */}
+      {/*
+       * AnimatePresence watches its children mount/unmount.
+       * The `key` on the motion.div is the open dropdown's id so that
+       * when you switch categories, the old panel exits and new one enters.
+       * All original conditional logic (catalogsectionChild, childLoading,
+       * .length > 0, t("subcategory_not_found")) is untouched.
+       */}
+      <AnimatePresence mode="wait">
+        {catalogsectionChild && openDropdowns !== null && (
+          <motion.div
+            key={openDropdowns} // re-mounts animation when category changes
+            initial={{ opacity: 0, height: 0, y: -6 }}
+            animate={{ opacity: 1, height: "auto", y: 0 }}
+            exit={{ opacity: 0, height: 0, y: -6 }}
+            transition={{
+              duration: 0.28,
+              ease: [0.25, 0.46, 0.45, 0.94], // smooth ease-out cubic
+            }}
+            style={{ overflow: "hidden" }} // required for height: 0 → auto
+            className="flex items-center gap-2 border-gray-400"
+          >
+            {childLoading ? (
+              // Loading skeleton — staggered pulse instead of plain text
+              <div className="flex gap-2 py-2">
+                {[1, 2, 3, 4].map((i) => (
+                  <motion.div
+                    key={i}
+                    className="h-5 rounded bg-gray-700"
+                    style={{ width: 72 + i * 12 }}
+                    animate={{ opacity: [0.4, 0.8, 0.4] }}
+                    transition={{
+                      duration: 1.2,
+                      repeat: Infinity,
+                      delay: i * 0.1,
+                      ease: "easeInOut",
+                    }}
+                  />
+                ))}
+              </div>
+            ) : catalogsectionChild.length > 0 ? (
+              <motion.div
+                className="flex items-center gap-0"
+                // Stagger each child item so they fan in one by one
+                variants={{
+                  show: { transition: { staggerChildren: 0.04 } },
+                  hidden: {},
+                }}
+                initial="hidden"
+                animate="show"
+              >
+                {catalogsectionChild.map((subItem: any) => (
+                  <motion.div
+                    key={subItem.id}
+                    variants={{
+                      hidden: { opacity: 0, x: -8 },
+                      show: { opacity: 1, x: 0 },
+                    }}
+                    transition={{ duration: 0.2, ease: "easeOut" }}
+                    onClick={() => setParentID(subItem.id)}
+                    className="border-l px-3 my-2 hover:cursor-pointer hover:text-red-500 text-white flex items-center justify-center"
+                  >
+                    <p
+                      className={`text-sm whitespace-nowrap transition-colors duration-150 ${
+                        parentID === subItem.id ? "text-red-500" : ""
+                      }`}
+                    >
+                      {subItem.name}
+                    </p>
+                  </motion.div>
+                ))}
+              </motion.div>
+            ) : (
+              <motion.p
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                className="text-sm text-gray-300 py-2"
+              >
+                {t("subcategory_not_found")}
+              </motion.p>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

pages/products/filter/category.tsx

@@ -0,0 +1,87 @@
+"use client";
+import { useTranslations } from "next-intl";
+import { useCategoryHook } from "./useCategory";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+export function Category() {
+  const t = useTranslations();
+  const {
+    categoryBack,
+    handleCategoryClick,
+    openDropdowns,
+    category,
+    subCategory,
+    handleSubCategoryClick,
+    subCategoryBack,
+    subCategoryLoading,
+  } = useCategoryHook();
+
+  return (
+    <div className="lg:space-y-2 space-x-6 lg:p-2 flex lg:flex-col overflow-x-auto lg:overflow-x-hidden items-start justify-start w-full">
+      {categoryBack?.map((item: any) => (
+        <div key={item.id} className="w-full">
+          {/* Main Category */}
+          <div onClick={() => handleCategoryClick(item)} className="">
+            <p
+              className={`whitespace-nowrap font-medium hover:cursor-pointer hover:text-red-500 ${category.id === item.id ? "text-red-500" : ""}`}
+            >
+              {item.name}
+            </p>
+            {item.have_sub_category && (
+              <span
+                className={`flex h-5 w-5 items-center justify-center rounded transition ${
+                  openDropdowns[item.id] ? "text-red-500" : "text-gray-400"
+                }`}
+                aria-label="Dropdown icon"
+              >
+                {openDropdowns[item.id] ? (
+                  <ChevronUp className="h-4 w-4" strokeWidth={2.5} />
+                ) : (
+                  <ChevronDown className="h-4 w-4" strokeWidth={2.5} />
+                )}
+              </span>
+            )}
+          </div>
+
+          {/* ⭐ YANGI: SubCategory Dropdown */}
+          {item.have_sub_category && openDropdowns[item.id] && (
+            <div className="space-y-2 border-l-2 border-gray-400 pl-3">
+              {subCategoryLoading ? (
+                <p className="text-sm text-gray-300">Yuklanmoqda...</p>
+              ) : subCategoryBack && subCategoryBack.length > 0 ? (
+                subCategoryBack.map((subItem: any) => (
+                  <div
+                    key={subItem.id}
+                    onClick={() => handleSubCategoryClick(subItem)}
+                    className="hover:cursor-pointer flex items-center gap-2 hover:bg-gray-600 p-1.5 rounded transition-colors"
+                  >
+                    <span
+                      className={`flex h-4 w-4 items-center justify-center rounded border-2 transition ${
+                        subCategory.id === subItem.id
+                          ? "border-red-600 bg-red-600"
+                          : "border-gray-400 bg-transparent"
+                      }`}
+                      aria-label="SubCategory checkbox"
+                    >
+                      {subCategory.id === subItem.id && (
+                        <Check
+                          className="h-2.5 w-2.5 text-white"
+                          strokeWidth={3}
+                        />
+                      )}
+                    </span>
+                    <p className="text-sm whitespace-nowrap">{subItem.name}</p>
+                  </div>
+                ))
+              ) : (
+                <p className="text-sm text-gray-300">
+                  {t("subcategory_not_found")}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

pages/products/filter/filter.tsx

@@ -0,0 +1,11 @@
+import { Category } from "./category";
+import { CatalogSection } from "./catalog";
+
+export default function Filter() {
+  return (
+    <div className="space-y-1 lg:px-0 mb-2 px-3 w-full text-white ">
+      <Category />
+      <CatalogSection />
+    </div>
+  );
+}

pages/products/filter/useCataloghook.ts

@@ -0,0 +1,34 @@
+"use client";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+export const useCatalogHook = () => {
+  const [openDropdowns, setOpenDropdowns] = useState<number | undefined>(0);
+  const [parent, setParent] = useState(0);
+  const { data: catalogsectionChild, isLoading: childLoading } = useQuery({
+    queryKey: ["catalogsection/", parent],
+    queryFn: () => httpClient(endPoints.filter.child({ id: parent || 0 })),
+    select: (data) => data?.data?.data?.results,
+    enabled: !!openDropdowns,
+  });
+
+  const { data: catalogSection } = useQuery({
+    queryKey: ["catalogsection"],
+    queryFn: () => httpClient(endPoints.filter.catalogSection),
+    select: (data) => data?.data?.data?.results,
+  });
+
+  console.log({ catalogSection });
+  console.log({ catalogsectionChild });
+
+  return {
+    catalogSection,
+    catalogsectionChild,
+    setParent,
+    openDropdowns,
+    setOpenDropdowns,
+    childLoading,
+  };
+};

pages/products/filter/useCategory.ts

@@ -0,0 +1,78 @@
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useCategory } from "@/zustand/useCategory";
+import { useSubCategory } from "@/zustand/useSubCategory";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+export const useCategoryHook = () => {
+  const [openDropdowns, setOpenDropdowns] = useState<Record<number, boolean>>(
+    {},
+  );
+
+  const category = useCategory((state) => state.category);
+  const setCategory = useCategory((state) => state.setCategory);
+  const subCategory = useSubCategory((state) => state.subCategory);
+  const setSubCategory = useSubCategory((state) => state.setSubCategory);
+  const clearSubCategory = useSubCategory((state) => state.clearSubCategory);
+
+  // Category data
+  const { data: categoryBack } = useQuery({
+    queryKey: ["category"],
+    queryFn: () => httpClient(endPoints.category.all),
+    select: (data) => data?.data?.results,
+  });
+
+  const { data: subCategoryBack, isLoading: subCategoryLoading } = useQuery({
+    queryKey: ["subCategory", category.id],
+    queryFn: () => httpClient(endPoints.subCategory.byId(category.id)),
+    enabled:
+      !!category.id &&
+      category.have_sub_category === true &&
+      openDropdowns[category.id] === true,
+    select: (data) => data?.data?.results,
+  });
+
+  const handleCategoryClick = (item: any) => {
+    if (item.have_sub_category) {
+      // Agar subCategory bo'lsa, dropdown ochish/yopish
+      setOpenDropdowns((prev) => ({
+        ...prev,
+        [item.id]: !prev[item.id],
+      }));
+
+      // Category'ni set qilish (filterlar yangilanishi uchun)
+      setCategory(item);
+
+      // SubCategory'ni tozalash (yangisini tanlash uchun)
+      if (!openDropdowns[item.id]) {
+        clearSubCategory();
+      }
+    } else {
+      // Agar subCategory bo'lmasa, to'g'ridan-to'g'ri category ni set qilish
+      setCategory(item);
+      clearSubCategory();
+
+      // Barcha dropdown'larni yopish
+      setOpenDropdowns({});
+    }
+  };
+
+  const handleSubCategoryClick = (item: any) => {
+    setSubCategory(item);
+  };
+
+  return {
+    category,
+    setCategory,
+    subCategory,
+    setSubCategory,
+    clearSubCategory,
+    categoryBack,
+    subCategoryBack,
+    subCategoryLoading,
+    handleCategoryClick,
+    handleSubCategoryClick,
+    openDropdowns,
+  };
+};

pages/products/product/mianProduct.tsx

@@ -1,15 +1,17 @@
 "use client";
+
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
 import { useQuery } from "@tanstack/react-query";
 import ProductCard from "./productCard";
-import { useCategory } from "@/store/useCategory";
+import { useCategory } from "@/zustand/useCategory";
 import { useFilter } from "@/lib/filter-zustand";
-import { useMemo, useState } from "react";
-import { useProductPageInfo } from "@/store/useProduct";
-import { useSubCategory } from "@/store/useSubCategory";
+import { useMemo, useState, useEffect } from "react";
+import { useProductPageInfo } from "@/zustand/useProduct";
+import { useSubCategory } from "@/zustand/useSubCategory";
 import { useTranslations } from "next-intl";
 import PaginationLite from "@/components/paginationUI";
+import { useCatalog } from "@/zustand/useCatalog";
 
 export default function MainProduct() {
   const t = useTranslations();
@@ -19,8 +21,15 @@ export default function MainProduct() {
   const getFiltersByType = useFilter((s) => s.getFiltersByType);
   const setProduct = useProductPageInfo((s) => s.setProducts);
 
+  const parentID = useCatalog((state) => state.parentID);
+
   const [currentPage, setCurrentPage] = useState(1);
 
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [parentID]);
+
+  // ── Filter params ────────────────────────────────────────────────────────
   const queryParams = useMemo(() => {
     const catalog = getFiltersByType("catalog");
     const size = getFiltersByType("size");
@@ -31,45 +40,48 @@ export default function MainProduct() {
     return allParams ? `&${allParams}` : "";
   }, [filter]);
 
+  // ── Request URL ──────────────────────────────────────────────────────────
   const requestLink = useMemo(() => {
     const baseLink = category.have_sub_category
       ? endPoints.product.bySubCategory({ id: subCategory.id, currentPage })
-      : endPoints.product.byCategory({ id: category.id, currentPage });
+      : parentID
+        ? endPoints.product.byCatalogSection({ id: parentID, currentPage })
+        : endPoints.product.byCategory({ id: category.id, currentPage });
+
     return `${baseLink}${queryParams}`;
   }, [
     category.id,
     category.have_sub_category,
-    queryParams,
     subCategory.id,
     currentPage,
+    parentID,
+    queryParams,
   ]);
 
+  // ── Query ────────────────────────────────────────────────────────────────
   const { data, isLoading, error } = useQuery({
     queryKey: [
       "products",
-      subCategory.id,
       category.id,
+      category.have_sub_category,
+      subCategory.id,
+      parentID,
       queryParams,
       currentPage,
     ],
     queryFn: () => httpClient(requestLink),
-    placeholderData: (prev) => prev, // ✅ pagination da flicker yo'q
+    placeholderData: (prev) => prev, // no flicker on pagination
     select: (res) => ({
       results: res?.data?.data?.results ?? [],
       totalPages: res?.data?.data?.total_pages ?? 1,
     }),
   });
 
-  // ✅ To'g'ridan select dan olamiz — useEffect + let emas
-  const results = useMemo(() => {
-    return data?.results ?? [];
-  }, [data]);
-  const totalPages = useMemo(() => {
-    return data?.totalPages ?? 1;
-  }, [data]);
+  const results = data?.results ?? [];
+  const totalPages = data?.totalPages ?? 1;
 
+  // ── Render states ────────────────────────────────────────────────────────
   if (isLoading && !data) {
-    // ✅ placeholderData bor — faqat birinchi yuklanishda
     return (
       <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
         {[1, 2, 3].map((i) => (
@@ -95,9 +107,10 @@ export default function MainProduct() {
 
   return (
     <div className="space-y-4">
-      {/* ✅ isLoading da overlay — list o'rnini saqlab, ustidan opacity */}
       <div
-        className={`grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-5 transition-opacity ${isLoading ? "opacity-50 pointer-events-none" : "opacity-100"}`}
+        className={`grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-5 transition-opacity ${
+          isLoading ? "opacity-50 pointer-events-none" : "opacity-100"
+        }`}
       >
         {results.map((item: any) => (
           <ProductCard

pages/products/product/products.tsx

@@ -1,19 +1,16 @@
 import Filter from "../filter/filter";
-import FilterInfo from "../filter/filterInfo";
 import MainProduct from "./mianProduct";
 
 export function Products() {
   return (
     <div className="bg-[#1e1d1c] pb-10 pt-5 px-2">
       <div className="max-w-300 mx-auto w-full z-20 relative">
-        <div className="flex lg:flex-row flex-col lg:items-start items-center gap-5">
+        <div className="flex flex-col items-start gap-2">
           {/* filter part */}
-          {/*<Filter />*/}
+          <Filter />
 
           {/* main products */}
           <MainProduct />
-
-          <FilterInfo />
         </div>
       </div>
     </div>

pages/products/slug/rightSide.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { usePriceModalStore } from "@/store/useProceModalStore";
+import { usePriceModalStore } from "@/zustand/useProceModalStore";
 import { Check, Instagram, Send, Share2 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useParams } from "next/navigation";

pages/services/servicePageServices.tsx

@@ -10,7 +10,7 @@ import Link from "next/link";
 import { motion } from "framer-motion";
 import { ServicesLoading } from "./loading";
 import { EmptyServices } from "./empty";
-import { useServiceDetail } from "@/store/useService";
+import { useServiceDetail } from "@/zustand/useService";
 import { cardVariants, containerVariants } from "@/lib/animations";
 
 export function ServicePageServices() {

pages/subCategory/body.tsx

@@ -3,7 +3,7 @@
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
 import { useQuery } from "@tanstack/react-query";
-import { useCategory } from "@/store/useCategory";
+import { useCategory } from "@/zustand/useCategory";
 import Card from "./card";
 import { useTranslations } from "next-intl";
 

pages/subCategory/card.tsx

@@ -1,4 +1,4 @@
-import { useSubCategory } from "@/store/useSubCategory";
+import { useSubCategory } from "@/zustand/useSubCategory";
 import { useLocale } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";

request/links.ts

@@ -29,6 +29,13 @@ export const endPoints = {
 
       return link;
     },
+    byCatalogSection: ({ id, currentPage }: ProductTypes) => {
+      let link = "product";
+      if (id) link += `?catalog_section=${id}`;
+      if (currentPage) link += `&page=${currentPage}`;
+
+      return link;
+    },
     detail: (id: number) => `product/${id}/`,
   },
   faq: "faq/",
@@ -39,7 +46,7 @@ export const endPoints = {
   navbar: "navigationitem/?page_size=500",
   sertificate: "document/?type=certificate",
   normative: "document/?type=normative",
-  guides:"guide/",
+  guides: "guide/",
   filter: {
     size: "size/",
     sizePageItems: "size/?page_size=500",
@@ -47,6 +54,12 @@ export const endPoints = {
     catalog: "catalog/",
     catalogPageItems: "catalog/?page_size=500",
     catalogCategoryId: (id: number) => `catalog/?category=${id}&page_size=500`,
+    child: ({ id }: { id?: number }) => {
+      const link = "catalogsection/?page_size=500";
+      if (id) return `${link}&parent=${id}`;
+      return link;
+    },
+    catalogSection: "catalogsection/?page_size=500",
   },
   post: {
     sendNumber: "callBack/",

zustand/useCatalog.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+type CatalogType = {
+  parentID: number;
+  setParentID: (id: number) => void;
+};
+
+export const useCatalog = create<CatalogType>((set) => {
+  return {
+    parentID: 0,
+    setParentID: (id: number) => set({ parentID: id }),
+  };
+});