From a7b665b50c728025d7a79c4db9adeff2a222eb86 Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Tue, 10 Feb 2026 20:55:27 +0500
Subject: [PATCH] filter added

---
 app/[locale]/catalog_page/page.tsx            |   6 +-
 app/[locale]/catalog_page/products/page.tsx   |   2 +-
 components/breadCrumb.tsx                     |   4 +-
 components/pages/products/filter/filter.tsx   | 188 ++++++++++++++++--
 .../pages/products/product/mianProduct.tsx    |   7 +-
 .../pages/products/product/products.tsx       |   2 +-
 messages/en.json                              |   5 +
 messages/ru.json                              |   5 +
 messages/uz.json                              |   5 +
 9 files changed, 200 insertions(+), 24 deletions(-)

diff --git a/app/[locale]/catalog_page/page.tsx b/app/[locale]/catalog_page/page.tsx
index bcb1ae6..bf053ce 100644
--- a/app/[locale]/catalog_page/page.tsx
+++ b/app/[locale]/catalog_page/page.tsx
@@ -7,8 +7,10 @@ export default function Page() {
   return (
     <div className="bg-[#1e1d1c] pb-30">
       <ProductBanner />
-      <div className="max-w-300 mx-auto w-full pt-20">
-        <Breadcrumb />
+      <div className="max-w-300 mx-auto w-full pt-5">
+        <div className="pb-8">
+          <Breadcrumb />
+        </div>
         <Catalog />
       </div>
     </div>
diff --git a/app/[locale]/catalog_page/products/page.tsx b/app/[locale]/catalog_page/products/page.tsx
index d8e41a1..31f8b03 100644
--- a/app/[locale]/catalog_page/products/page.tsx
+++ b/app/[locale]/catalog_page/products/page.tsx
@@ -10,7 +10,7 @@ export default function Page() {
     <div className="bg-[#1e1d1c] pb-30">
       <ProductBanner />
       {/* <FilterCatalog /> */}
-      <div className="max-w-300 w-full mx-auto pt-15">
+      <div className="max-w-300 w-full mx-auto pt-8">
         <Breadcrumb customLabels={{ subCategory: subCategory.name}} />
       </div>
       <Products />
diff --git a/components/breadCrumb.tsx b/components/breadCrumb.tsx
index d486092..eaab489 100644
--- a/components/breadCrumb.tsx
+++ b/components/breadCrumb.tsx
@@ -153,8 +153,8 @@ export function Breadcrumb({
   }
 
   return (
-    <nav aria-label="Breadcrumb" className={`py-4 ${className}`}>
-      <ol className="flex items-center flex-wrap gap-2 text-sm">
+    <nav aria-label="Breadcrumb" className={`py-4 ${className} sm:px-5 px-2`}>
+      <ol className="flex items-center flex-wrap gap-2 sm:text-xl text-lg">
         {breadcrumbItems.map((item, index) => (
           <li
             key={`${item.label}-${index}`}
diff --git a/components/pages/products/filter/filter.tsx b/components/pages/products/filter/filter.tsx
index 0cae6ce..9523aa5 100644
--- a/components/pages/products/filter/filter.tsx
+++ b/components/pages/products/filter/filter.tsx
@@ -6,7 +6,7 @@ import { endPoints } from "@/request/links";
 import { useCategory } from "@/store/useCategory";
 import { useSubCategory } from "@/store/useSubCategory";
 import { useQuery } from "@tanstack/react-query";
-import { Check } from "lucide-react";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { useEffect, useState } from "react";
 
 export default function Filter() {
@@ -14,11 +14,19 @@ export default function 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 [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);
@@ -26,11 +34,40 @@ export default function Filter() {
     { id: number; name: string; type: string }[]
   >(result[1].items);
 
-  const { data: catalog } = useQuery({
-    queryKey: ["catalog"],
-    queryFn: () => httpClient(endPoints.filter.catalogCategoryId(category.id)),
+  // Category data
+  const { data: categoryBack } = useQuery({
+    queryKey: ["category"],
+    queryFn: () => httpClient(endPoints.category.all),
     select: (data) => {
-      const catalogData = data?.data?.results;
+      console.log("category data on filter: ", data?.data?.results);
+      return 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) => {
+      console.log("subCategory filter data: ", data?.data?.results);
+      return 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,
@@ -40,10 +77,11 @@ export default function Filter() {
   });
 
   const { data: size } = useQuery({
-    queryKey: ["size"],
-    queryFn: () => httpClient(endPoints.filter.sizeCategoryId(category.id)),
+    queryKey: ["size", activeId],
+    queryFn: () => httpClient(endPoints.filter.sizeCategoryId(activeId)),
+    enabled: !!activeId,
     select: (data) => {
-      const sizedata = data?.data?.results;
+      const sizedata = data?.data?.results || [];
       return sizedata.map((item: any) => ({
         id: item.id,
         name: item.name,
@@ -67,20 +105,140 @@ export default function Filter() {
     ? 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">
+    <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">
+          Kategoriyalar
+        </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">
+                      SubCategory topilmadi
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
       {/* Bo'lim filtri */}
-      {visibleSectionData && (
+      {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">
             Bo'lim
           </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) => (
+            {visibleSectionData.map((item: any) => (
               <div
                 key={item.id}
                 onClick={() => toggleFilter(item)}
-                className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0"
+                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 ${
@@ -108,17 +266,17 @@ export default function Filter() {
       )}
 
       {/* O'lcham filtri */}
-      {visibleSectionNumber && (
+      {visibleSectionNumber && visibleSectionNumber.length > 0 && (
         <div className="bg-gray-500 rounded-lg">
           <p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
             O'lcham
           </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">
-            {visibleSectionNumber.map((item) => (
+            {visibleSectionNumber.map((item: any) => (
               <div
                 key={item.id}
                 onClick={() => toggleFilter(item)}
-                className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0"
+                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 ${
diff --git a/components/pages/products/product/mianProduct.tsx b/components/pages/products/product/mianProduct.tsx
index 8ce273a..b78a755 100644
--- a/components/pages/products/product/mianProduct.tsx
+++ b/components/pages/products/product/mianProduct.tsx
@@ -16,6 +16,7 @@ export default function MainProduct() {
   const getFiltersByType = useFilter((state) => state.getFiltersByType);
   const setProduct = useProductPageInfo((state) => state.setProducts);
 
+  console.log("subCategory data: ", subCategory);
   // Query params yaratish
   const queryParams = useMemo(() => {
     const catalog = getFiltersByType("catalog");
@@ -39,7 +40,7 @@ export default function MainProduct() {
 
     // Query params qo'shish
     return `${baseLink}${queryParams}`;
-  }, [category.id, category.have_sub_category, queryParams]);
+  }, [category.id, category.have_sub_category, queryParams , subCategory.id]);
 
   const { data, isLoading, error } = useQuery({
     queryKey: ["products", subCategory.id, queryParams],
@@ -83,8 +84,8 @@ export default function MainProduct() {
           key={item.id} // ✅ index o'rniga id ishlatish
           getProduct={() => setProduct(item)}
           title={item.name}
-          image={item?.images[0]?.image ||''}
-          slug='special_product'
+          image={item?.images[0]?.image || ""}
+          slug="special_product"
         />
       ))}
     </div>
diff --git a/components/pages/products/product/products.tsx b/components/pages/products/product/products.tsx
index 88d3c41..6e8dc29 100644
--- a/components/pages/products/product/products.tsx
+++ b/components/pages/products/product/products.tsx
@@ -4,7 +4,7 @@ import MainProduct from "./mianProduct";
 
 export function Products() {
   return (
-    <div className="bg-[#1e1d1c] py-10">
+    <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">
           {/* filter part */}
diff --git a/messages/en.json b/messages/en.json
index 2e144e3..d7f13ab 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -269,5 +269,10 @@
     "fire-suppression": "Fire Suppression",
     "installation": "Installation",
     "maintenance": "Maintenance"
+  },
+  "filter": {
+    "category": "Categories",
+    "catalog": "Section",
+    "size": "Sizes"
   }
 }
diff --git a/messages/ru.json b/messages/ru.json
index 1d98b25..a0132fe 100644
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -269,5 +269,10 @@
     "fire-suppression": "Пожаротушение",
     "installation": "Монтаж",
     "maintenance": "Техническое обслуживание"
+  },
+  "filter": {
+    "category": "Категории",
+    "catalog": "Раздел",
+    "size": "Размеры"
   }
 }
diff --git a/messages/uz.json b/messages/uz.json
index 1708c56..d343faf 100644
--- a/messages/uz.json
+++ b/messages/uz.json
@@ -270,5 +270,10 @@
     "fire-suppression": "Yong'in o'chirish",
     "installation": "O'rnatish",
     "maintenance": "Texnik xizmat"
+  },
+  "filter":{
+    "category":"Kategoriyalar",
+    "catalog":"Bo'lim",
+    "size":"O'lchamlar"
   }
 }