file name and location updayed for better be

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}} />
+        <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/filter.tsx

@@ -0,0 +1,34 @@
+import { CatalogItem } from "@/lib/types";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronDown } from "lucide-react";
+
+export default function Filter() {
+  const { data } = useQuery({
+    queryKey: ["catalogsection"],
+    queryFn: () => httpClient(endPoints.filter.catalog),
+    select: (res) => res?.data?.data?.results,
+  });
+
+  console.log("filter catalog: ", data);
+  return (
+    <div className="px-5 w-full overflow-x-auto">
+      <div className="flex gap-5">
+        {data?.map((item: CatalogItem) => (
+          <div
+            key={item.id}
+            className="flex shrink-2 items-center text-white gap-2"
+          >
+            <div>{item.name}</div>
+            {item.children.length > 0 && (
+              <button>
+                <ChevronDown />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

pages/products/product/mianProduct.tsx

@@ -3,11 +3,11 @@ 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 { useProductPageInfo } from "@/zustand/useProduct";
+import { useSubCategory } from "@/zustand/useSubCategory";
 import { useTranslations } from "next-intl";
 import PaginationLite from "@/components/paginationUI";
 

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-5">
           {/* 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

@@ -39,14 +39,11 @@ 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",
-    sizeCategoryId: (id: number) => `size/?category=${id}&page_size=500`,
-    catalog: "catalog/",
-    catalogPageItems: "catalog/?page_size=500",
-    catalogCategoryId: (id: number) => `catalog/?category=${id}&page_size=500`,
+    catalog: "catalogsection/?page_size=500",
+    child: (parenId: number) =>
+      `catalogsection/?page_size=500&parent=${parenId}`,
   },
   post: {
     sendNumber: "callBack/",