fixed some bugs

added store to navbar
added channels products
2026-05-02 14:28:50 +05:00 · 2026-04-30 23:17:44 +05:00 · 2026-04-30 16:15:29 +05:00 · 2026-04-30 10:44:08 +05:00 · 2026-04-26 22:07:09 +05:00
37 changed files with 2486 additions and 1366 deletions
--- a/src/app/api/brandsApi.js
+++ b/src/app/api/brandsApi.js
@@ -5,16 +5,9 @@ export const brandsApi = baseApi.injectEndpoints({
    getBrands: builder.query({
      query: (params = {}) => {
        const queryParams = new URLSearchParams();
-        if (params.type) {
-          queryParams.append("type", params.type);
-        }
-        if (params.page) {
-          queryParams.append("page", params.page);
-        }
-        if (params.limit) {
-          queryParams.append("limit", params.limit);
-        }
-
+        if (params.type) queryParams.append("type", params.type);
+        if (params.page) queryParams.append("page", params.page);
+        if (params.perPage) queryParams.append("perPage", params.perPage);
        const queryString = queryParams.toString();
        return `/brands${queryString ? `?${queryString}` : ""}`;
      },
@@ -28,30 +21,19 @@ export const brandsApi = baseApi.injectEndpoints({

    getBrandProducts: builder.query({
      query: (params) => {
-        if (typeof params === 'string' || typeof params === 'number') {
+        if (typeof params === "string" || typeof params === "number") {
          return `/brands/${params}/products`;
        }

-        const { id, page = 1, limit, sorting, min_price, max_price, brands } = params;
-        let url = `/brands/${id}/products?page=${page}`;
+        const { id, page = 1, perPage = 12, sorting, min_price, max_price } = params;
+        const urlParams = new URLSearchParams();
+        urlParams.append("page", page);
+        urlParams.append("perPage", perPage);
+        if (sorting) urlParams.append("sorting", sorting);
+        if (min_price) urlParams.append("min_price", min_price);
+        if (max_price) urlParams.append("max_price", max_price);

-        if (limit) {
-          url += `&limit=${limit}`;
-        }
-        if (sorting) {
-          url += `&sorting=${encodeURIComponent(sorting)}`;
-        }
-        if (min_price) {
-          url += `&min_price=${encodeURIComponent(min_price)}`;
-        }
-        if (max_price) {
-          url += `&max_price=${encodeURIComponent(max_price)}`;
-        }
-        if (brands) {
-          url += `&brands=${encodeURIComponent(brands)}`;
-        }
-
-        return url;
+        return `/brands/${id}/products?${urlParams.toString()}`;
      },
      transformResponse: (response) => ({
        data: response.data || response,
--- a/src/app/api/categories.js
+++ b/src/app/api/categories.js
@@ -5,17 +5,16 @@ export const categoriesApi = baseApi.injectEndpoints({
    getCategories: builder.query({
      query: (type = "tree") => `/categories?type=${type}`,
    }),
-    
+
    getCategoryProducts: builder.query({
-      query: ({ categoryId, page = 1, limit, brands, min_price, max_price, sorting }) => {
+      query: ({ categoryId, page = 1, perPage = 12, brands, min_price, max_price, sorting }) => {
        const params = new URLSearchParams();
-        params.append('page', page);
-        if (limit) params.append('limit', limit);
-        if (brands) params.append('brands', brands);
-        if (min_price) params.append('min_price', min_price);
-        if (max_price) params.append('max_price', max_price);
-        if (sorting) params.append('sorting', sorting);
-        
+        params.append("page", page);
+        params.append("perPage", perPage);
+        if (brands) params.append("brands", brands);
+        if (min_price) params.append("min_price", min_price);
+        if (max_price) params.append("max_price", max_price);
+        if (sorting) params.append("sorting", sorting);
        return `categories/${categoryId}/products?${params.toString()}`;
      },
      transformResponse: (response) => ({
@@ -23,80 +22,105 @@ export const categoriesApi = baseApi.injectEndpoints({
        pagination: response.pagination || {},
      }),
    }),
-    
+
    getAllCategoryProducts: builder.query({
-      async queryFn(category, queryApi, extraOptions, baseQuery) {
+      async queryFn(category, _queryApi, _extraOptions, baseQuery) {
        const fetchProducts = async (categoryId) => {
          const result = await baseQuery(`categories/${categoryId}/products`);
          return result.data ? result.data.data : [];
        };

        let allProducts = await fetchProducts(category.id);
-
        for (const child of category.children) {
          const childProducts = await fetchProducts(child.id);
          allProducts = [...allProducts, ...childProducts];
        }
-
        return { data: allProducts };
      },
    }),

    getAllCategoryProductsPaginated: builder.query({
      async queryFn(
-        { category, page = 1, limit = 6, brands, min_price, max_price, sorting },
-        queryApi,
-        extraOptions,
+        { category, page = 1, perPage = 12, brands, min_price, max_price, sorting },
+        _queryApi,
+        _extraOptions,
        baseQuery
      ) {
-        if (!category) return { data: [] };
+        if (!category) return { data: { data: [], pagination: { currentPage: 1, hasMorePages: false } } };

        try {
-          const hasMoreByCategory = {};
-
-          const fetchProductsForPage = async (categoryIds, currentPage) => {
-            let allPageProducts = [];
-            const perCategoryLimit = Math.ceil(limit / categoryIds.length);
-
-            for (const categoryId of categoryIds) {
-              const params = new URLSearchParams();
-              params.append('page', currentPage);
-              params.append('limit', perCategoryLimit);
-              if (brands) params.append('brands', brands);
-              if (min_price) params.append('min_price', min_price);
-              if (max_price) params.append('max_price', max_price);
-              if (sorting) params.append('sorting', sorting);
-
-              const result = await baseQuery(
-                `categories/${categoryId}/products?${params.toString()}`
-              );
-
-              if (result.data && result.data.data) {
-                allPageProducts = [...allPageProducts, ...result.data.data];
-                hasMoreByCategory[categoryId] = !!result.data.pagination.next_page_url;
-              }
-            }
-
-            return allPageProducts;
-          };
-
          const categoryIds = [category.id];
-          if (category.children && category.children.length > 0) {
+          if (category.children?.length > 0) {
            category.children.forEach((child) => categoryIds.push(child.id));
          }

-          const productsForPage = await fetchProductsForPage(categoryIds, page);
+          // Tek category — direkt fetch, limit tam uygulanır
+          if (categoryIds.length === 1) {
+            const params = new URLSearchParams();
+            params.append("page", page);
+            params.append("perPage", perPage);
+            if (brands) params.append("brands", brands);
+            if (min_price) params.append("min_price", min_price);
+            if (max_price) params.append("max_price", max_price);
+            if (sorting) params.append("sorting", sorting);

-          const hasMorePages = Object.values(hasMoreByCategory).some(
-            (hasMore) => hasMore
-          );
+            const result = await baseQuery(
+              `categories/${categoryIds[0]}/products?${params.toString()}`
+            );
+
+            if (result.error) return { error: result.error };
+
+            return {
+              data: {
+                data: result.data?.data || [],
+                pagination: {
+                  currentPage: page,
+                  hasMorePages: !!result.data?.pagination?.next_page_url,
+                },
+              },
+            };
+          }
+
+          // Birden fazla category — paralel fetch, her biri tam limit ile
+          // Sonra client-side deduplicate + slice
+          const requests = categoryIds.map((categoryId) => {
+            const params = new URLSearchParams();
+            params.append("page", page);
+            params.append("perPage", perPage);
+            if (brands) params.append("brands", brands);
+            if (min_price) params.append("min_price", min_price);
+            if (max_price) params.append("max_price", max_price);
+            if (sorting) params.append("sorting", sorting);
+
+            return baseQuery(`categories/${categoryId}/products?${params.toString()}`);
+          });
+
+          const results = await Promise.all(requests);
+
+          let allProducts = [];
+          let hasMorePages = false;
+          const seenIds = new Set();
+
+          for (const result of results) {
+            if (result.error) continue;
+            const items = result.data?.data || [];
+            for (const item of items) {
+              if (!seenIds.has(item.id)) {
+                seenIds.add(item.id);
+                allProducts.push(item);
+              }
+            }
+            if (result.data?.pagination?.next_page_url) {
+              hasMorePages = true;
+            }
+          }

          return {
            data: {
-              data: productsForPage,
+              data: allProducts,
              pagination: {
                currentPage: page,
-                hasMorePages: hasMorePages,
+                hasMorePages,
              },
            },
          };
@@ -105,11 +129,11 @@ export const categoriesApi = baseApi.injectEndpoints({
        }
      },
    }),
-    
+
    getProductById: builder.query({
      query: (productId) => `/products/${productId}`,
    }),
-    
+
    getRelatedProducts: builder.query({
      query: (productId) => `/products/${productId}/related`,
    }),
--- a/src/app/api/channelsApi.js
+++ b/src/app/api/channelsApi.js
@@ -0,0 +1,53 @@
+import { baseApi } from "./baseApi";
+
+export const channelsApi = baseApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getChannelProducts: builder.query({
+      query: (params) => {
+        // params: { channelId, page, limit, min_price, max_price, sorting }
+        const {
+          channelId,
+          page = 1,
+          perPage = 24,
+          min_price,
+          max_price,
+          sorting,
+        } = params;
+        const urlParams = new URLSearchParams();
+        urlParams.append("page", page);
+        urlParams.append("perPage", perPage);
+        if (min_price) urlParams.append("min_price", min_price);
+        if (max_price) urlParams.append("max_price", max_price);
+        if (sorting) urlParams.append("sorting", sorting);
+        return `/channels/${channelId}/products?${urlParams.toString()}`;
+      },
+      transformResponse: (response) => ({
+        data: response.data || response,
+        pagination: response.pagination || {},
+      }),
+    }),
+
+    getChannels: builder.query({
+      query: (params = {}) => {
+        const queryParams = new URLSearchParams();
+        if (params.page) queryParams.append("page", params.page);
+        if (params.perPage) queryParams.append("perPage", params.perPage);
+        if (params.search) queryParams.append("search", params.search);
+        const queryString = queryParams.toString();
+        return `/channels${queryString ? `?${queryString}` : ""}`;
+      },
+      transformResponse: (response) => ({
+        data: response.data || response,
+        pagination: response.pagination || {},
+      }),
+    }),
+  }),
+  overrideExisting: true,
+});
+
+export const {
+  useGetChannelProductsQuery,
+  useLazyGetChannelProductsQuery,
+  useGetChannelsQuery,
+  useLazyGetChannelsQuery,
+} = channelsApi;
--- a/src/app/api/collectionsApi.js
+++ b/src/app/api/collectionsApi.js
@@ -5,40 +5,35 @@ export const collectionsApi = baseApi.injectEndpoints({
    getCollections: builder.query({
      query: () => `/collections`,
    }),
-    
+
    getCollectionById: builder.query({
      query: (collectionId) => `/collections/${collectionId}`,
    }),
-    
+
    getCollectionProducts: builder.query({
      query: (collectionId) => `/collections/${collectionId}/products`,
-      transformResponse: (response) => {
-        return {
-          data: response.data || [],
-          isEmpty: !response.data || response.data.length === 0,
-        };
-      },
+      transformResponse: (response) => ({
+        data: response.data || [],
+        isEmpty: !response.data || response.data.length === 0,
+      }),
    }),
-    
+
    checkCollectionHasProducts: builder.query({
-      query: (collectionId) => `/collections/${collectionId}/products?limit=1`,
-      transformResponse: (response) => {
-        return {
-          hasProducts: response.data && response.data.length > 0,
-        };
-      },
+      query: (collectionId) => `/collections/${collectionId}/products`,
+      transformResponse: (response) => ({
+        hasProducts: response.data && response.data.length > 0,
+      }),
    }),
-    
+
    getCollectionProductsPaginated: builder.query({
-      query: ({ collectionId, page = 1, limit = 6, brands, min_price, max_price, sorting = "price_amount-ascending" }) => {
+      query: ({ collectionId, page = 1, perPage = 24, brands, min_price, max_price, sorting }) => {
        const params = new URLSearchParams();
-        params.append('page', page);
-        if (limit) params.append('limit', limit);
-        if (brands) params.append('brands', brands);
-        if (min_price) params.append('min_price', min_price);
-        if (max_price) params.append('max_price', max_price);
-        params.append('sorting', sorting);
-        
+        params.append("page", page);
+        params.append("perPage", perPage);
+        if (brands) params.append("brands", brands);
+        if (min_price) params.append("min_price", min_price);
+        if (max_price) params.append("max_price", max_price);
+        if (sorting) params.append("sorting", sorting); // undefined gelirse gönderme
        return `/collections/${collectionId}/products?${params.toString()}`;
      },
      transformResponse: (response) => ({
--- a/src/app/api/filtersApi.js
+++ b/src/app/api/filtersApi.js
@@ -15,6 +15,9 @@ export const filtersApi = baseApi.injectEndpoints({
        if (params?.brand_id) {
          queryParams.append("brand_id", String(params.brand_id))
        }
+        if (params?.channel_id) {
+          queryParams.append("channel_id", String(params.channel_id))
+        }

        return `/filters?${queryParams.toString()}`
      },
@@ -22,6 +25,7 @@ export const filtersApi = baseApi.injectEndpoints({
        return {
          categories: response.data?.categories || [],
          brands: response.data?.brands || [],
+          channels: response.data?.channels || [],
        }
      },
      keepUnusedDataFor: 300,
@@ -40,7 +44,9 @@ export const filtersApi = baseApi.injectEndpoints({
        if (queryArgs.brand_id) {
          parts.push(`brd:${queryArgs.brand_id}`);
        }
-        
+        if (queryArgs.channel_id) {
+          parts.push(`chn:${queryArgs.channel_id}`);
+        }
        return parts.length > 0 ? parts.join('|') : 'no-params';
      },
      
@@ -66,7 +72,9 @@ export const filtersApi = baseApi.injectEndpoints({
        if (arg.brand_id) {
          tags.push({ type: "Filters", id: `brd-${arg.brand_id}` });
        }
-        
+        if (arg.channel_id) {
+          tags.push({ type: "Filters", id: `chn-${arg.channel_id}` });
+        }
        return tags;
      },
    }),
--- a/src/components/CategoryDropdown/DropdownMenu.module.scss
+++ b/src/components/CategoryDropdown/DropdownMenu.module.scss
@@ -1,78 +1,116 @@
+// DropdownMenu.module.scss
+
 .dropdownContainer {
+  position: relative;
+
  @media screen and (max-width: 1023px) {
    display: none;
  }
 }

+// ---- TRIGGER BUTTON ----
 .navButton {
  display: flex;
-  gap: 5px;
-  border: none;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  padding-left: 0.875rem;
-  padding-right: 0.875rem;
-  justify-content: center;
  align-items: center;
+  gap: 6px;
+  border: none;
+  padding: 0.25rem 0.875rem;
  border-radius: 0.5rem;
  height: 2.5rem;
-  font-size: 0.875rem;
+  font-size: 16px;
+  font-weight: 600;
  color: #4b5563;
  background-color: transparent;
-  font-weight: 600;
-  font-size: 16px;
  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+  position: relative;
+  z-index: 999;
  &:hover {
    background-color: #f3f4f6;
  }
-}

-.dropdownWrapper {
-  position: relative;
-}
+  &.navButtonActive {
+    background-color: #e63946;
+    color: #ffffff;

-.dropdownPanel {
-  position: absolute;
-  top: 100%;
-  margin-top: 8px;
-  z-index: 50;
-  display: flex;
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  box-sizing: border-box;
-  width: 1366px;
-  padding: 0 1.375rem;
-}
-
-.categoriesList {
-  flex: 1;
-  max-height: 500px;
-  overflow-y: auto;
-  border-right: 1px solid #ebe7eb;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-
-  // &::-webkit-scrollbar {
-  //   width: 6px;
-  // }
-
-  &::-webkit-scrollbar-track {
-    background: #e5e7eb;
+    svg {
+      color: #ffffff;
+    }
  }
+}

+// ---- OVERLAY ----
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.45);
+  z-index: 998;
+  animation: fadeIn 0.15s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// ---- WRAPPER + ANIMATION ----
+.dropdownWrapper {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 999;
+  animation: slideDown 0.18s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// ---- PANEL SHELL ----
+.dropdownPanel {
+  display: flex;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  width: 1336px;
+  max-height: 520px;
+  max-width: calc(100vw - 32px);
+}
+
+// ---- LEFT LIST ----
+.categoriesList {
+  width: 270px;
+  flex-shrink: 0;
+  border-right: 1px solid #e5e7eb;
+  padding: 10px 0;
+  max-height: 520px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #f9fafb;
+  }
  &::-webkit-scrollbar-thumb {
    background: #d1d5db;
-  }
-  .title {
+    border-radius: 10px;
+
    &:hover {
-      color: #888888;
-    }
-    &:active {
-      color: #888888;
+      background: #9ca3af;
    }
  }
 }
@@ -80,156 +118,169 @@
 .categoryItem {
  display: flex;
  align-items: center;
-  gap: 8px;
-  padding: 6px;
+  justify-content: space-between;
+  padding: 9px 16px;
+  font-size: 16px;
  cursor: pointer;
-  transition: background-color 0.2s;
-  border: 1px solid #3615371a;
-  border-radius: 6px;
+  color: #000;
+  transition: background-color 0.12s, color 0.12s;

  &:hover {
-    background-color: #f9fafb;
+    background-color: #f3f4f6;
+    color: #e63946;
  }

  &.active {
    background-color: #f3f4f6;
-  }
+    color: #e63946;

-  .icon {
-    font-size: 14px;
-  }
-
-  .title {
-    font-size: 14px;
-    &:hover {
-      color: #888888;
+    .title {
+      font-weight: 600;
    }
  }
 }

+.title {
+  font-size: 14px;
+}
+
+.chevron {
+  color: #9ca3af;
+  flex-shrink: 0;
+}
+
+// ---- RIGHT CONTENT PANEL ----
 .contentPanel {
-  flex: 3;
-  padding: 16px;
-  max-height: 400px;
-  overflow-y: hidden;
+  flex: 1;
+  padding: 20px 24px;
+  max-height: 520px;
+  overflow-y: auto;
+  background: #ffffff;

-  // &::-webkit-scrollbar {
-  //   width: 6px;
-  // }
-
-  &::-webkit-scrollbar-track {
-    background: #e5e7eb;
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #f9fafb;
  }
-
  &::-webkit-scrollbar-thumb {
    background: #d1d5db;
-    // border-radius: 3px;
-  }
-  .title {
-    cursor: pointer;
-    color: #361517;
-    font-size: 24px;
-    font-weight: 600;
+    border-radius: 10px;
+
    &:hover {
-      color: #888888;
+      background: #9ca3af;
    }
  }
 }
-.column {
-  display: flex;
-  flex-direction: column;
-  flex: 2;
-  text-align: left;
+
+.panelTitle {
+  font-size: 20px;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 16px;
+  cursor: pointer;
+  display: inline-block;
+
+  &:hover {
+    color: #e63946;
+  }
+}
+
+// COLUMN GRID MODE
+// SONRA — column layout (iyi, masonry gibi akar)
+.columnsGrid {
+  columns: 250px auto;
+  column-gap: 24px;
+}
+
+.columnSection {
+  break-inside: avoid;
+  margin-bottom: 20px;
+  display: inline-block; // break-inside'ın çalışması için zorunlu
+  width: 100%;
 }

 .sectionTitle {
-  font-size: 16px;
-  font-weight: 500;
-  margin-bottom: 12px;
-  color: #361517;
-  cursor: pointer;
-  &:hover {
-    color: #888888;
-  }
-}
-
-.subcategoryList {
-  margin-bottom: 24px;
-  display: flex;
-}
-
-.subcategoryItem {
  font-size: 14px;
-  color: #361517;
-  padding: 4px 0;
+  font-weight: 800;
+  color: #111827;
+  margin-bottom: 6px;
  cursor: pointer;
-  transition: color 0.2s;

  &:hover {
-    color: #888888;
+    color: #e63946;
  }
 }

-.subCategoriesContainer {
-  display: flex;
-  flex-direction: column;
-  max-height: 360px;
-  overflow-y: auto;
-}
-
-.nestedCategoryContainer:last-child {
-  margin-bottom: 16px;
-}
-
-.nestedCategoryContainer {
-  margin-bottom: 4px;
-}
-
-.nestedCategoryItem {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  border-radius: 4px;
+.leafItem {
+  display: block;
+  font-size: 14px;
+  color: #4b5563;
+  padding: 3px 0;
  cursor: pointer;
-  transition: all 0.2s ease;
+  transition: color 0.12s;
+
+  &:hover {
+    color: #e63946;
+  }
+}
+
+// FLAT LIST MODE
+.flatList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-content: flex-start;
+}
+
+.flatListBordered {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.flatItem {
+  font-size: 14px;
+  color: #4b5563;
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+  transition: background-color 0.12s, color 0.12s;

  &:hover {
    background-color: #f3f4f6;
-  }
-
-  .categoryLabel {
-    flex: 1;
-    display: flex;
-    align-items: center;
-  }
-
-  .title {
-    font-size: 14px;
+    color: #111827;
  }
 }

-.expandButton,
-.navigateButton {
+.navButtonLoading {
+  opacity: 0.7;
+  cursor: wait;
+
+  .categoryIcon {
+    opacity: 0.4;
+  }
+}
+
+.loadingDots {
  display: flex;
+  gap: 3px;
  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;

-  &:hover {
-    background-color: #e5e7eb;
+  span {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: currentColor;
+    animation: dotPulse 1.2s infinite ease-in-out;
+
+    &:nth-child(2) { animation-delay: 0.2s; }
+    &:nth-child(3) { animation-delay: 0.4s; }
  }
 }

-.nestedChildren {
-  margin-top: 4px;
-}
-
-.noSubcategories {
-  color: #6b7280;
-  font-style: italic;
-}
+@keyframes dotPulse {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+  40%            { transform: scale(1);   opacity: 1;   }
+}
--- a/src/components/CategoryDropdown/index.jsx
+++ b/src/components/CategoryDropdown/index.jsx
@@ -1,83 +1,62 @@
+// DropdownMenu.jsx
 import React, { useState, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
 import styles from "./DropdownMenu.module.scss";
 import { useGetCategoriesQuery } from "../../app/api/categories";
 import { CategoryIcon } from "../Icons";
-import { ChevronRight, ChevronDown } from "lucide-react"; // Assuming you have access to lucide-react or similar

-const NestedCategory = ({
-  category,
-  level = 0,
-  handleCategorySelect,
-  closeDropdown,
-}) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const hasChildren = category.children && category.children.length > 0;
+const ContentPanel = ({ category, onSelect, onClose }) => {
+  if (!category) return null;

-  const handleClick = (e) => {
-    e.stopPropagation();
-    if (hasChildren) {
-      setIsExpanded(!isExpanded);
-    } else {
-      handleCategorySelect(category);
-      closeDropdown();
-    }
-  };
+  const children = category.children || [];
+  const withChildren = children.filter((c) => c.children?.length > 0);
+  const withoutChildren = children.filter((c) => !c.children?.length);

-  const handleDirectNavigation = (e) => {
-    e.stopPropagation();
-    handleCategorySelect(category);
-    closeDropdown();
-  };
+  const allColumns = [
+    ...withChildren,
+    ...withoutChildren.map((c) => ({ ...c, children: [] })),
+  ];

  return (
-    <div
-      className={styles.nestedCategoryContainer}
-      style={{ paddingLeft: `${level * 16}px` }}
-    >
-      <div className={styles.nestedCategoryItem} onClick={handleClick}>
-        <div className={styles.categoryLabel}>
-          <span className={styles.title}>{category.name}</span>
-        </div>
+    <div className={styles.contentPanel}>
+      <h2
+        className={styles.panelTitle}
+        onClick={() => {
+          onSelect(category);
+          onClose();
+        }}
+      >
+        {category.name}
+      </h2>

-        {hasChildren && (
-          <button
-            className={styles.expandButton}
-            onClick={(e) => {
-              e.stopPropagation();
-              setIsExpanded(!isExpanded);
-            }}
-          >
-            {isExpanded ? (
-              <ChevronDown size={16} />
-            ) : (
-              <ChevronRight size={16} />
-            )}
-          </button>
-        )}
-
-        {hasChildren && (
-          <button
-            className={styles.navigateButton}
-            onClick={handleDirectNavigation}
-            title="Go to category"
-          >
-            →
-          </button>
-        )}
-      </div>
-
-      {hasChildren && isExpanded && (
-        <div className={styles.nestedChildren}>
-          {category.children.map((child) => (
-            <NestedCategory
-              key={child.id}
-              category={child}
-              level={level + 1}
-              handleCategorySelect={handleCategorySelect}
-              closeDropdown={closeDropdown}
-            />
+      {allColumns.length > 0 && (
+        <div className={styles.columnsGrid}>
+          {allColumns.map((sub) => (
+            <div key={sub.id} className={styles.columnSection}>
+              <div
+                className={styles.sectionTitle}
+                onClick={() => {
+                  onSelect(sub);
+                  onClose();
+                }}
+              >
+                {sub.name}
+              </div>
+              {sub.children?.map((leaf) => (
+                <span
+                  key={leaf.id}
+                  className={styles.leafItem}
+                  onClick={() => {
+                    onSelect(leaf);
+                    onClose();
+                  }}
+                >
+                  {leaf.name}
+                </span>
+              ))}
+            </div>
          ))}
        </div>
      )}
@@ -89,113 +68,85 @@ const DropdownMenu = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const dropdownRef = useRef(null);
+
  const {
    data: categoriesData,
    isLoading,
    error,
  } = useGetCategoriesQuery("tree");
-
  const categories = categoriesData?.data || [];
+
  const [isOpen, setIsOpen] = useState(false);
-  const [activeMainCategory, setActiveMainCategory] = useState(null);
+  const [activeCategory, setActiveCategory] = useState(null);

  useEffect(() => {
-    if (categories.length > 0) {
-      const defaultCategory =
-        categories.find((cat) => cat.name === "Aýallar üçin") || categories[0];
-      setActiveMainCategory(defaultCategory);
+    if (categories.length > 0 && !activeCategory) {
+      setActiveCategory(categories[0]);
    }
  }, [categories]);

-  const handleToggle = () => {
-    setIsOpen(!isOpen);
-  };
+  useEffect(() => {
+    const handler = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);

-  const handleMouseLeave = () => {
-    if (categories.length > 0) {
-      const defaultCategory =
-        categories.find((cat) => cat.name === "Aýallar üçin") || categories[0];
-      setActiveMainCategory(defaultCategory);
-    }
-  };
-
-  const handleCategorySelect = (category) => {
+  const handleSelect = (category) => {
    navigate(`/category/${category.id}`, { state: { category } });
    setIsOpen(false);
  };

-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>Error loading categories</div>;

  return (
    <div className={styles.dropdownContainer} ref={dropdownRef}>
-      <button onClick={handleToggle} className={styles.navButton}>
+      <button
+        onClick={() => setIsOpen((p) => !p)}
+        className={`${styles.navButton} ${isOpen ? styles.navButtonActive : ""}`}
+        aria-expanded={isOpen}
+      >
        <CategoryIcon />
-        {t("navbar.category")}
+         {isLoading
+    ? <div className={styles.loadingDots}><span/><span/><span/></div>
+    : t("navbar.category")
+  }
      </button>

      {isOpen && (
-        <div className={styles.dropdownWrapper}>
-          <div className={styles.dropdownPanel} onMouseLeave={handleMouseLeave}>
-            <div className={styles.categoriesList}>
-              {categories.map((category) => (
-                <div
-                  key={category.id}
-                  className={`${styles.categoryItem} ${
-                    activeMainCategory?.id === category.id ? styles.active : ""
-                  }`}
-                  onMouseEnter={() => setActiveMainCategory(category)}
-                  onClick={() => handleCategorySelect(category)}
-                >
-                  <span className={styles.title}>{category.name}</span>
-                </div>
-              ))}
-            </div>
+        <>
+          <div className={styles.overlay} onClick={() => setIsOpen(false)} />

-            {activeMainCategory && (
-              <div className={styles.contentPanel}>
-                <h2
-                  onClick={() => handleCategorySelect(activeMainCategory)}
-                  className={styles.title}
-                >
-                  {activeMainCategory.name}
-                </h2>
-
-                <div className={styles.subCategoriesContainer}>
-                  {activeMainCategory.children &&
-                  activeMainCategory.children.length > 0 ? (
-                    activeMainCategory.children.map((subcategory) => (
-                      <NestedCategory
-                        key={subcategory.id}
-                        category={subcategory}
-                        handleCategorySelect={handleCategorySelect}
-                        closeDropdown={() => setIsOpen(false)}
-                      />
-                    ))
-                  ) : (
-                    <div className={styles.noSubcategories}>
-                      {/* No subcategories available */}
-                    </div>
-                  )}
-                </div>
+          <div className={styles.dropdownWrapper}>
+            <div className={styles.dropdownPanel}>
+              <div className={styles.categoriesList}>
+                {categories.map((cat) => (
+                  <div
+                    key={cat.id}
+                    className={`${styles.categoryItem} ${
+                      activeCategory?.id === cat.id ? styles.active : ""
+                    }`}
+                    onMouseEnter={() => setActiveCategory(cat)}
+                    onClick={() => handleSelect(cat)}
+                  >
+                    <span className={styles.title}>{cat.name}</span>
+                    {cat.children?.length > 0 && (
+                      <ChevronRight size={14} className={styles.chevron} />
+                    )}
+                  </div>
+                ))}
              </div>
-            )}
+
+              <ContentPanel
+                category={activeCategory}
+                onSelect={handleSelect}
+                onClose={() => setIsOpen(false)}
+              />
+            </div>
          </div>
-        </div>
+        </>
      )}
    </div>
  );
--- a/src/components/Checkout/index.jsx
+++ b/src/components/Checkout/index.jsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import styles from "./Checkout.module.scss";
-import { X } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import {
  usePlaceOrderMutation,
@@ -9,202 +8,145 @@ import {
 } from "../../app/api/orderApi";
 import { useGetLocationsQuery } from "../../app/api/locationApi";

+const isPriceZero = (price) => !price || parseFloat(price) === 0;
+
 const useDeviceType = () => {
  const [deviceType, setDeviceType] = useState("desktop");
-
  useEffect(() => {
-    const userAgent = navigator.userAgent;
-    if (/Mobi|Android/i.test(userAgent)) {
-      setDeviceType("mobile");
-    } else {
-      setDeviceType("desktop");
-    }
+    setDeviceType(
+      /Mobi|Android/i.test(navigator.userAgent) ? "mobile" : "desktop",
+    );
  }, []);
-
  return deviceType;
 };

-const Checkout = ({ cartItems, shippingPrice, productIds, onBackToCart, onPlaceOrder }) => {
+const Checkout = ({
+  cartItems,
+  shippingPrice,
+  productIds,
+  onBackToCart,
+  onPlaceOrder,
+}) => {
  const { t } = useTranslation();
  const [formData, setFormData] = useState({
    customer_name: "",
-    customer_phone: "",
+    customer_phone: "+993 ",
    customer_address: "",
-    deliveryAddress: "null",
    payment_type_id: "",
    notes: "",
    region: "",
  });

  const [selectedAddress, setSelectedAddress] = useState(null);
-  const [placeOrder, { isLoading: isPlacingOrder }] = usePlaceOrderMutation();
-  const { data: orderTimes = {} } = useGetOrderTimesQuery();
+  const [placeOrder] = usePlaceOrderMutation();
  const { data: orderPayments = [] } = useGetOrderPaymentsQuery();
  const { data: locationsData } = useGetLocationsQuery();
  const deviceType = useDeviceType();

+  // Sepetteki tüm ürünlerin fiyatı 0 mı?
+  const allItemsZeroPrice = cartItems?.every((item) =>
+    isPriceZero(item.product?.price_amount),
+  );
+
  const handleInputChange = (e) => {
    const { name, value } = e.target;
-    
+
    if (name === "customer_phone") {
-      // Always keep the +993 prefix
      const prefix = "+993 ";
-      
-      // If user is trying to delete the prefix, prevent it
-      if (value.length < prefix.length) {
-        return; // Don't update state, keep the current value
-      }
-      
-      // Extract only the digits after the prefix
-      const inputWithoutPrefix = value.substring(prefix.length).replace(/\D/g, "");
-      
-      // Limit to 8 digits max (Turkmenistan mobile number format)
-      const limitedDigits = inputWithoutPrefix.substring(0, 8);
-      
-      // Format with space after first 2 digits
-      let formattedPhone = prefix;
-      if (limitedDigits.length > 0) {
-        formattedPhone += limitedDigits.substring(0, 2);
-        
-        if (limitedDigits.length > 2) {
-          formattedPhone += " " + limitedDigits.substring(2);
-        }
-      }
-      
-      setFormData((prev) => ({
-        ...prev,
-        [name]: formattedPhone,
-      }));
+      if (value.length < prefix.length) return;
+
+      const digits = value
+        .substring(prefix.length)
+        .replace(/\D/g, "")
+        .substring(0, 8);
+      let formatted = prefix + digits.substring(0, 2);
+      if (digits.length > 2) formatted += " " + digits.substring(2);
+
+      setFormData((prev) => ({ ...prev, [name]: formatted }));
    } else {
-      setFormData((prev) => ({
-        ...prev,
-        [name]: value,
-      }));
+      setFormData((prev) => ({ ...prev, [name]: value }));
    }
  };

  const handleAddressSelect = (value) => {
    setSelectedAddress(value);
-    const selectedLocation = locationsData?.data?.find(
-      (location) => location.name === value
-    );
-
+    const selectedLocation = locationsData?.data?.find((l) => l.name === value);
    setFormData((prev) => ({
      ...prev,
      address: value,
-      region: selectedLocation ? selectedLocation.region : "",
+      region: selectedLocation?.region || "",
    }));
  };

-  // Initialize phone with prefix
-  useEffect(() => {
-    setFormData(prev => ({
-      ...prev,
-      customer_phone: "+993 "
-    }));
-  }, []);
-
-  const formatPhoneNumber = (phoneNumber) => {
-    // Remove the +993 prefix and any spaces
-    return phoneNumber.replace(/^\+993\s*/, "").replace(/\s+/g, "");
-  };
-
  const handleClearAddress = () => {
    setSelectedAddress(null);
-    setFormData((prev) => ({
-      ...prev,
-      address: "",
-    }));
+    setFormData((prev) => ({ ...prev, address: "" }));
  };

-  const handleFocus = (event) => {
-    event.target.scrollIntoView({
-      behavior: "smooth",
-      block: "center",
-    });
-  };
+  const handleFocus = (e) =>
+    e.target.scrollIntoView({ behavior: "smooth", block: "center" });
+
+  const formatPhoneNumber = (phone) =>
+    phone.replace(/^\+993\s*/, "").replace(/\s+/g, "");

  const getOrderData = () => {
-    // Validation checks
    if (
      !formData.customer_name ||
      !formData.customer_phone ||
      !formData.customer_address ||
      !formData.payment_type_id
    ) {
-      console.error("Missing required fields");
      alert("Please fill in all required fields");
      return null;
    }

-    // Set default values for delivery
-    const currentDate = new Date().toISOString().split('T')[0];
-    const defaultTimeSlot = {
-      date: currentDate,
-      hour: "12:00-14:00" // Default time slot
-    };
+    const currentDate = new Date().toISOString().split("T")[0];

-    // Prepare data in the format expected by the API
    return {
      customer_name: formData.customer_name,
      customer_phone: formatPhoneNumber(formData.customer_phone),
      customer_address: formData.customer_address,
-      shipping_method: "standard", // Default to standard shipping
+      shipping_method: "standard",
      payment_type_id: formData.payment_type_id,
-      delivery_time: defaultTimeSlot.hour,
-      delivery_at: defaultTimeSlot.date,
+      delivery_time: "12:00-14:00",
+      delivery_at: currentDate,
      region: formData.region || "",
      notes: formData.notes || "",
-      // Add shipping price and product IDs
      shipping_price: shippingPrice,
-      product_ids: productIds // Array of product IDs [1, 3, 4, etc.]
+      product_ids: productIds,
    };
  };

-  // Create the place order function
  const handlePlaceOrder = async () => {
    const orderDetails = getOrderData();
    if (!orderDetails) return false;

    try {
-      const response = await placeOrder(orderDetails).unwrap();
-
-      console.log("Order placed successfully:", response);
+      await placeOrder(orderDetails).unwrap();
      window.location.href = "/orders";
      return true;
    } catch (error) {
-      console.error("Failed to place order:", error);
-
-      if (
+      const isHtmlResponse =
        error.data &&
        typeof error.data === "string" &&
-        error.data.includes("<!doctype html>")
-      ) {
-        console.error(
-          "Server returned HTML instead of a proper API response"
-        );
-        alert(
-          "There was a problem with the server. Please try again later or contact support."
-        );
-      } else {
-        alert(
-          "Failed to place order. Please check your information and try again."
-        );
-      }
+        error.data.includes("<!doctype html>");
+
+      alert(
+        isHtmlResponse
+          ? "There was a problem with the server. Please try again later."
+          : "Failed to place order. Please check your information and try again.",
+      );
      return false;
    }
  };

-  // Expose the function to parent component via callback
  useEffect(() => {
-    if (onPlaceOrder) {
-      onPlaceOrder(handlePlaceOrder);
-    }
+    if (onPlaceOrder) onPlaceOrder(handlePlaceOrder);
  }, [formData, shippingPrice, productIds]);

  return (
    <div className={styles.checkoutContainer}>
-      <h2>{t("cart.basket")} ({cartItems?.length || 0})</h2>
+      {/* <h2>{t("cart.basket")} ({cartItems?.length || 0})</h2> */}
      <div className={styles.formSection}>
        <div className={styles.paymentOptions}>
          <h3>{t("checkout.paymentMethod")}:</h3>
@@ -221,22 +163,22 @@ const Checkout = ({ cartItems, shippingPrice, productIds, onBackToCart, onPlaceO
              <label
                htmlFor={`payment${payment.id}`}
                className={styles.customRadio}
-              ></label>
+              />
              <div
                className={styles.text}
-                onClick={() => {
+                onClick={() =>
                  setFormData((prev) => ({
                    ...prev,
                    payment_type_id: String(payment.id),
-                  }));
-                }}
+                  }))
+                }
              >
                <span className={styles.optionTitle}>{payment.name}</span>
-                <span className={styles.optionDesc}>
+                {/* <span className={styles.optionDesc}>
                  {payment.name === "Nagt"
                    ? t("checkout.payment_in_cash_upon_delivery_of_the_order")
                    : t("checkout.payment_by_card")}
-                </span>
+                </span> */}
              </div>
            </div>
          ))}
@@ -256,7 +198,6 @@ const Checkout = ({ cartItems, shippingPrice, productIds, onBackToCart, onPlaceO
                onFocus={handleFocus}
              />
            </div>
-
            <div className={styles.formGroup}>
              <label>{t("checkout.telephone")}*</label>
              <input
@@ -270,7 +211,6 @@ const Checkout = ({ cartItems, shippingPrice, productIds, onBackToCart, onPlaceO
              />
            </div>
          </div>
-
          <div className={styles.formRow}>
            <div className={styles.formGroup}>
              <label>{t("checkout.moreAboutYourAddress")}*</label>
@@ -283,7 +223,6 @@ const Checkout = ({ cartItems, shippingPrice, productIds, onBackToCart, onPlaceO
                onFocus={handleFocus}
              />
            </div>
-
            <div className={styles.formGroup}>
              <label>{t("checkout.note")}</label>
              <input
@@ -301,22 +240,17 @@ const Checkout = ({ cartItems, shippingPrice, productIds, onBackToCart, onPlaceO
          <ul>
            <li>
              {t(
-                "checkout.Delivery_is_carried_out_in_the_cities_of_Ashgabat_Buzmein_and_Anau"
-              )}
-            </li>
-            {/* <li>
-              {t(
-                "checkout.The_minimum_order_amount_must_be_at_least_50_manat_for_orders_over_150_manat_delivery_is_free"
-              )}
-            </li> */}
-            <li>
-              {t(
-                "checkout.After_you_place_an_order_on_the_website_the_operator_will_call_you_to_confirm_the_order_for_regular_customers_confirmation_is_carried_out_automatically_at_their_request"
+                "checkout.Delivery_is_carried_out_in_the_cities_of_Ashgabat_Buzmein_and_Anau",
              )}
            </li>
            <li>
              {t(
-                "checkout.Payment_is_made_after_you_check_and_accept_the_order_The_amount_of_your_payment_is_indicated_on_the_delivery_persons_payment_document_Payment_is_made_in_cash_and_by_card_in_national_currency_Accepted_and_paid_goods_are_not_subject_to_return"
+                "checkout.After_you_place_an_order_on_the_website_the_operator_will_call_you_to_confirm_the_order_for_regular_customers_confirmation_is_carried_out_automatically_at_their_request",
+              )}
+            </li>
+            <li>
+              {t(
+                "checkout.Payment_is_made_after_you_check_and_accept_the_order_The_amount_of_your_payment_is_indicated_on_the_delivery_persons_payment_document_Payment_is_made_in_cash_and_by_card_in_national_currency_Accepted_and_paid_goods_are_not_subject_to_return",
              )}
            </li>
          </ul>
@@ -326,4 +260,4 @@ const Checkout = ({ cartItems, shippingPrice, productIds, onBackToCart, onPlaceO
  );
 };

-export default Checkout;
+export default Checkout;
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -94,7 +94,6 @@ const Footer = () => {
                    />
                  </a>
                </div>
-                <img src={apk} alt="Download APK" className={styles.appLogo} />
              </div>
            </div>
          </div>
--- a/src/components/HomeBrands/HomeBrands.module.scss
+++ b/src/components/HomeBrands/HomeBrands.module.scss
@@ -0,0 +1,55 @@
+.container {
+  max-width: 1336px;
+  margin: 20px auto;
+  width: 100%;
+  @media screen and (max-width: 1023px) {
+    margin: 10px auto;
+  }
+}
+
+.brandsSwiper {
+  padding-bottom: 8px;
+}
+
+.brandSlide {
+  width: auto;
+}
+
+.brandCard {
+  width: 122px;
+  height: 50px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 8px;
+
+  &:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+}
+
+.logoFallback {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+@media screen and (max-width: 768px) {
+  .brandCard {
+    width: 100px;
+  }
+}
--- a/src/components/HomeBrands/index.jsx
+++ b/src/components/HomeBrands/index.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useGetBrandsQuery } from '../../app/api/brandsApi';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay } from 'swiper/modules';
+import 'swiper/css';
+import styles from './HomeBrands.module.scss';
+import { Logo } from '../Icons';
+
+const HomeBrands = () => {
+  const navigate = useNavigate();
+  // Fetch brands.
+  const { data: brandsData, isLoading } = useGetBrandsQuery({ limit: 100 });
+
+  if (isLoading || !brandsData || brandsData.length === 0) return null;
+
+  return (
+    <div className={styles.container}>
+      <Swiper
+        modules={[Autoplay]}
+        spaceBetween={12}
+        slidesPerView={'auto'}
+        slidesPerGroup={2}
+        loop={true}
+        autoplay={{
+          delay: 3000,
+          disableOnInteraction: false,
+        }}
+        className={styles.brandsSwiper}
+      >
+        {brandsData.map((brand) => (
+          <SwiperSlide key={brand.id} className={styles.brandSlide}>
+            <div 
+              className={styles.brandCard}
+              onClick={() => navigate(`/brands/${brand.id}`)}
+            >
+              {brand.media?.[0]?.thumbnail || brand.media?.[0]?.images_800x800 || brand.logo ? (
+                <img
+                  src={
+                    brand.media?.[0]?.thumbnail ||
+                    brand.media?.[0]?.images_800x800 ||
+                    brand.logo
+                  }
+                  alt={brand.name}
+                  onError={(e) => {
+                    e.target.style.display = "none";
+                    e.target.nextSibling.style.display = "flex";
+                  }}
+                />
+              ) : (
+                <div className={styles.logoFallback}>
+                  <Logo width={40} height={40} />
+                </div>
+              )}
+              <div className={styles.logoFallback} style={{ display: "none" }}>
+                <Logo width={40} height={40} />
+              </div>
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+};
+
+export default HomeBrands;
+
--- a/src/components/Icons/index.jsx
+++ b/src/components/Icons/index.jsx
@@ -207,7 +207,22 @@ export const OrderIcon = () => (
    ></path>
  </svg>
 );
-
+export const StoreIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#4b5563"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    width={16}
+    height={16}
+  >
+    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+    <polyline points="9 22 9 12 15 12 15 22"></polyline>
+  </svg>
+);
 export const CategoryIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
@@ -221,7 +236,7 @@ export const CategoryIcon = () => (
    height={20}
  >
    <path
-      fill="#4b5563"
+      fill="currentColor"
      d="M30 20c0-.796-.316-1.559-.879-2.121A2.996 2.996 0 0 0 27 17h-7c-.796 0-1.559.316-2.121.879A2.996 2.996 0 0 0 17 20v7c0 .796.316 1.559.879 2.121A2.996 2.996 0 0 0 20 30h7c.796 0 1.559-.316 2.121-.879A2.996 2.996 0 0 0 30 27v-7Zm-15 0c0-.796-.316-1.559-.879-2.121A2.996 2.996 0 0 0 12 17H5c-.796 0-1.559.316-2.121.879A2.996 2.996 0 0 0 2 20v7c0 .796.316 1.559.879 2.121A2.996 2.996 0 0 0 5 30h7c.796 0 1.559-.316 2.121-.879A2.996 2.996 0 0 0 15 27v-7Zm13 0v7a.997.997 0 0 1-1 1h-7a.997.997 0 0 1-1-1v-7a.997.997 0 0 1 1-1h7a.997.997 0 0 1 1 1Zm-15 0v7a.997.997 0 0 1-1 1H5a.997.997 0 0 1-1-1v-7a.997.997 0 0 1 1-1h7a.997.997 0 0 1 1 1Zm2-15c0-.796-.316-1.559-.879-2.121A2.996 2.996 0 0 0 12 2H5c-.796 0-1.559.316-2.121.879A2.996 2.996 0 0 0 2 5v7c0 .796.316 1.559.879 2.121A2.996 2.996 0 0 0 5 15h7c.796 0 1.559-.316 2.121-.879A2.996 2.996 0 0 0 15 12V5Zm15 0c0-.796-.316-1.559-.879-2.121A2.996 2.996 0 0 0 27 2h-7c-.796 0-1.559.316-2.121.879A2.996 2.996 0 0 0 17 5v7c0 .796.316 1.559.879 2.121A2.996 2.996 0 0 0 20 15h7c.796 0 1.559-.316 2.121-.879A2.996 2.996 0 0 0 30 12V5ZM13 5v7a.997.997 0 0 1-1 1H5a.997.997 0 0 1-1-1V5a.997.997 0 0 1 1-1h7a.997.997 0 0 1 1 1Zm15 0v7a.997.997 0 0 1-1 1h-7a.997.997 0 0 1-1-1V5a.997.997 0 0 1 1-1h7a.997.997 0 0 1 1 1Z"
    ></path>
  </svg>
--- a/src/components/Navbar/Navbar.module.scss
+++ b/src/components/Navbar/Navbar.module.scss
@@ -39,7 +39,7 @@
    }

    &__satyjy {
-      @media screen and (max-width: 500px) {
+      @media screen and (max-width: 785px) {
        display: none;
      }
    }
@@ -288,7 +288,7 @@
  align-items: center;
  gap: 8px;
  margin-left: auto;
-  @media screen and (max-width: 500px) {
+  @media screen and (max-width: 708px) {
    display: none;
  }
 }
--- a/src/components/Navbar/NavbarDown.jsx
+++ b/src/components/Navbar/NavbarDown.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
-import { CartIcon, WishlistIcon, BrandIcon, OrderIcon } from "../Icons";
+import { CartIcon, WishlistIcon, BrandIcon, OrderIcon, StoreIcon } from "../Icons";
 import styles from "./Navbar.module.scss";
-import { UserOutlined, LogoutOutlined, HomeOutlined } from "@ant-design/icons";
+import { UserOutlined, LogoutOutlined, HomeOutlined, ShopOutlined } from "@ant-design/icons";
 import { FaGlobe } from "react-icons/fa6";
 import { Input, Badge, Menu, Dropdown } from "antd";
 const { Search } = Input;
@@ -151,6 +151,15 @@ const NavbarDown = () => {
                </button>
              </Link>
            </li>
+            <div className={styles.stick}></div>
+            <li>
+              <Link to={"/stores"}>
+                <button className={styles.navButton}>
+                  <ShopOutlined />
+                  {t("navbar.stores")}
+                </button>
+              </Link>
+            </li>
            <li className={styles.searchWrapper}>
              <CiSearch />
              <input
@@ -255,7 +264,10 @@ const NavbarDown = () => {
          </div>
          <div className={styles.stick}></div>
          <div className={styles.location}>
-            <CiLocationOn /> Aşgabat
+            <Link to={'/stores'} style={{textDecoration: 'none'}}><button className={styles.navButton}>
+              <ShopOutlined />
+              {t("navbar.stores")}
+            </button></Link>
          </div>
          <div className={styles.stick}></div>
          <div className={styles.searchIcon} onClick={toggleSearch}>
--- a/src/components/PendingPriceBadge/PendingPriceBadge.module.scss
+++ b/src/components/PendingPriceBadge/PendingPriceBadge.module.scss
@@ -0,0 +1,102 @@
+.pendingPriceBadgeWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.pendingPriceBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #faeeda;
+  border: 0.5px solid #ef9f27;
+  color: #854f0b;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+}
+
+.pendingPriceTooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-background-primary, #ffffff);
+  border: 0.5px solid var(--color-border-secondary, #e2e2e2);
+  border-radius: var(--border-radius-md, 6px);
+  padding: 8px 12px;
+  width: 220px;
+  font-size: 13px;
+  color: var(--color-text-primary, #333333);
+  line-height: 1.5;
+  z-index: 100;
+  white-space: normal;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  @media (max-width: 767px) {
+    display: none;
+  }
+
+  strong {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--color-text-primary, #000000);
+  }
+}
+
+:global {
+  .pending-price-modal {
+    .ant-modal-content {
+      border-radius: 12px;
+      padding: 24px;
+      @media (max-width: 767px) {
+        padding: 20px;
+      }
+    }
+
+    .ant-modal-header {
+      margin-bottom: 12px;
+      .ant-modal-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        @media (max-width: 767px) {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .ant-modal-body {
+      p {
+        font-size: 14px;
+        line-height: 1.6;
+        color: #555;
+        margin: 0;
+        @media (max-width: 767px) {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .ant-modal-footer {
+      margin-top: 20px;
+      .ant-btn-primary {
+        background-color: #888888;
+        border-color: #888888;
+        border-radius: 6px;
+        height: 36px;
+        padding: 0 20px;
+        font-weight: 500;
+        &:hover {
+          background-color: #666666;
+          border-color: #666666;
+        }
+      }
+    }
+  }
+}
--- a/src/components/PendingPriceBadge/index.jsx
+++ b/src/components/PendingPriceBadge/index.jsx
@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { Modal } from "antd";
+import { useTranslation } from "react-i18next";
+import styles from "./PendingPriceBadge.module.scss";
+
+const PendingPriceModal = ({ open, onClose, t }) => (
+  <Modal
+    open={open}
+    onOk={onClose}
+    onCancel={onClose}
+    okText={t("common.ok") || "Ok"}
+    cancelButtonProps={{ style: { display: "none" } }}
+    centered
+    title={t("cart.pendingPriceTitle") || "Bahasy anyklamaly"}
+    className="pending-price-modal"
+    width={400}
+  >
+    <p>
+      {t("cart.pendingPriceDesc") ||
+        "Bu sargytdaky bir ýa-da birnäçe harydyň bahasy entek kesgitlenmedik. Operatorymyz siziň bilen habarlaşyp, goşmaça maglumat berer."}
+    </p>
+  </Modal>
+);
+
+const PendingPriceBadge = () => {
+  const { t } = useTranslation();
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setModalVisible(true);
+  };
+
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <span onClick={stopPropagation}>
+      <span
+        className={styles.pendingPriceBadgeWrapper}
+        onMouseEnter={() => setTooltipVisible(true)}
+        onMouseLeave={() => setTooltipVisible(false)}
+        onClick={handleClick}
+        onTouchEnd={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <span className={styles.pendingPriceBadge}>!</span>
+
+        {tooltipVisible && (
+          <span className={styles.pendingPriceTooltip}>
+            <strong>{t("cart.pendingPriceTitle") || "Bahasyny anyklamaly"}</strong>
+            {t("cart.pendingPriceTooltipDesc") ||
+              "Bu sargytdaky harydyň bahasy kesgitlenmedik. Operator size jaň edip goşmaça maglumat berer."}
+          </span>
+        )}
+      </span>
+
+      <PendingPriceModal
+        open={modalVisible}
+        onClose={() => setModalVisible(false)}
+        t={t}
+      />
+    </span>
+  );
+};
+
+export default PendingPriceBadge;
--- a/src/components/ProductCard/ProductCard.module.scss
+++ b/src/components/ProductCard/ProductCard.module.scss
@@ -72,8 +72,16 @@
  font-weight: 600;
  color: #333;
  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  height: 2.4em;
+  line-height: 1.2;
+
  @media screen and (max-width: 426px) {
    font-size: 14px;
+    height: 2.8em;
  }
 }

@@ -82,9 +90,15 @@
  color: #666;
  line-height: 1.4;
  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  height: 2.8em;

  @media screen and (max-width: 1023px) {
    font-size: 12px;
+    height: 2.8em;
  }
 }

@@ -92,8 +106,8 @@
  display: flex;
  align-items: center;
  gap: 0.5rem;
-  margin-top: 0.5rem;
-  margin: 0;
+  margin-top: auto;
+  margin-bottom: 0;
  justify-content: space-between;
 }

--- a/src/components/ProductCard/index.jsx
+++ b/src/components/ProductCard/index.jsx
@@ -3,36 +3,32 @@ import styles from "./ProductCard.module.scss";
 import { IoMdHeartEmpty, IoMdHeart } from "react-icons/io";
 import { FaShoppingCart } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
-import { debounce } from "lodash";
 import {
  useAddFavoriteMutation,
  useRemoveFavoriteMutation,
+  useGetFavoritesQuery,
 } from "../../app/api/favoritesApi";
-import { useGetFavoritesQuery } from "../../app/api/favoritesApi";
 import {
  useAddToCartMutation,
  useUpdateCartItemMutation,
  useRemoveFromCartMutation,
-  useGetCartQuery,
 } from "../../app/api/cartApi";
 import { Modal } from "antd";
 import { useTranslation } from "react-i18next";
 import { DecreaseIcon, IncreaseIcon } from "../Icons";
 import ImageCarousel from "./imageCarousel/index";
+import { useCart } from "../../app/api/useCart";

-// Helper function to strip HTML tags and truncate text
 const truncateDescription = (htmlString, maxLength = 80) => {
  const tempDiv = document.createElement("div");
  tempDiv.innerHTML = htmlString;
  const textContent = tempDiv.textContent || tempDiv.innerText || "";
-  const truncatedText =
-    textContent.length > maxLength
-      ? textContent.substring(0, maxLength).trim() + "..."
-      : textContent;
-  return truncatedText;
+  return textContent.length > maxLength
+    ? textContent.substring(0, maxLength).trim() + "..."
+    : textContent;
 };

-import { useCart } from "../../app/api/useCart";
+const isPriceZero = (price) => !price || parseFloat(price) === 0;

 const ProductCard = ({
  product,
@@ -41,26 +37,24 @@ const ProductCard = ({
  onAddToCart,
  onToggleFavorite,
  isFavorite = false,
-  descriptionMaxLength = 85,
+  descriptionMaxLength = 120,
 }) => {
  const { t } = useTranslation();
  const navigate = useNavigate();
+
  const [stockErrorModalVisible, setStockErrorModalVisible] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
  const [addFavorite] = useAddFavoriteMutation();
  const [removeFavorite] = useRemoveFavoriteMutation();
  const { data: favoriteProducts = [] } = useGetFavoritesQuery();
-  const [isLoading, setIsLoading] = useState(false);
+
  const [localIsFavorite, setLocalIsFavorite] = useState(
-    favoriteProducts.some((fav) => fav.product?.id === product.id),
-  );
-  // const [isHovered, setIsHovered] = useState(false);
-  const truncatedDesc = truncateDescription(
-    product.description,
-    descriptionMaxLength,
+    favoriteProducts.some((fav) => fav.product?.id === product.id)
  );

  const { getCartItem } = useCart();
-
  const [addToCart] = useAddToCartMutation();
  const [updateCartItem] = useUpdateCartItemMutation();
  const [removeFromCart] = useRemoveFromCartMutation();
@@ -69,26 +63,54 @@ const ProductCard = ({
  const [localQuantity, setLocalQuantity] = useState(0);
  const [pendingQuantity, setPendingQuantity] = useState(0);

-  // ✅ Cart item değiştiğinde local state'i güncelle
+  const { name, price_amount, old_price_amount, media = [], reviews } = product;
+
+  const truncatedDesc = truncateDescription(product.description, descriptionMaxLength);
+
+  const calculatedDiscount =
+    !product.discount &&
+    old_price_amount &&
+    price_amount &&
+    old_price_amount > price_amount
+      ? Math.round(((old_price_amount - price_amount) / old_price_amount) * 100)
+      : null;
+
  useEffect(() => {
-    const qty = parseInt(
-      cartItem?.quantity || cartItem?.product_quantity || 0,
-      10,
-    );
+    const qty = parseInt(cartItem?.quantity || cartItem?.product_quantity || 0, 10);
    setLocalQuantity(qty);
    setPendingQuantity(qty);
  }, [cartItem]);

-  // ✅ Favorite state'i güncelle
  useEffect(() => {
    if (Array.isArray(favoriteProducts)) {
-      const isFav = favoriteProducts.some(
-        (fav) => fav.product?.id === product.id,
+      setLocalIsFavorite(
+        favoriteProducts.some((fav) => fav.product?.id === product.id)
      );
-      setLocalIsFavorite(isFav);
    }
  }, [favoriteProducts, product.id]);

+  useEffect(() => {
+    const serverQty = parseInt(cartItem?.quantity || cartItem?.product_quantity || 0, 10);
+
+    if (pendingQuantity === serverQty || pendingQuantity <= 0) return;
+
+    const handler = setTimeout(async () => {
+      try {
+        setIsLoading(true);
+        await updateCartItem({ productId: product.id, quantity: pendingQuantity }).unwrap();
+      } catch {
+        setLocalQuantity(serverQty);
+        setPendingQuantity(serverQty);
+      } finally {
+        setIsLoading(false);
+      }
+    }, 500);
+
+    return () => clearTimeout(handler);
+  }, [pendingQuantity, cartItem, product.id, updateCartItem]);
+
+  const handleCardClick = () => navigate(`/product/${product.id}`);
+
  const handleAddToCart = async (event) => {
    event.preventDefault();
    event.stopPropagation();
@@ -98,51 +120,17 @@ const ProductCard = ({
      return;
    }

-    // ✅ Optimistic update
    setLocalQuantity((prev) => prev + 1);
    setPendingQuantity((prev) => prev + 1);

    try {
      await addToCart({ productId: product.id, quantity: 1 }).unwrap();
-      // ✅ Başarılı - RTK Query otomatik cache'i güncelleyecek
-    } catch (error) {
-      console.error("Failed to add to cart:", error);
-      // ✅ Hata varsa geri al
+    } catch {
      setLocalQuantity((prev) => prev - 1);
      setPendingQuantity((prev) => prev - 1);
    }
  };

-  // ✅ Debounced update - sadece mutation, refetch yok
-  useEffect(() => {
-    const serverQty = parseInt(
-      cartItem?.quantity || cartItem?.product_quantity || 0,
-      10,
-    );
-
-    if (pendingQuantity === serverQty || pendingQuantity <= 0) {
-      return;
-    }
-
-    const handler = setTimeout(async () => {
-      try {
-        setIsLoading(true);
-        await updateCartItem({
-          productId: product.id,
-          quantity: pendingQuantity,
-        }).unwrap();
-      } catch (error) {
-        console.error("Failed to update cart item:", error);
-        setLocalQuantity(serverQty);
-        setPendingQuantity(serverQty);
-      } finally {
-        setIsLoading(false);
-      }
-    }, 500);
-
-    return () => clearTimeout(handler);
-  }, [pendingQuantity, cartItem, product.id, updateCartItem]);
-
  const handleQuantityIncrease = (event) => {
    event.preventDefault();
    event.stopPropagation();
@@ -165,24 +153,17 @@ const ProductCard = ({
    if (isLoading) return;

    if (pendingQuantity <= 1) {
-      // ✅ Sıfıra düşünce direkt sil
      setPendingQuantity(0);
      setLocalQuantity(0);
      setIsLoading(true);

      removeFromCart({ productId: product.id })
        .unwrap()
-        .then(() => {
-          // ✅ Başarılı - RTK Query cache'i güncelleyecek
-        })
        .catch(() => {
-          // ✅ Hata varsa geri al
          setLocalQuantity(1);
          setPendingQuantity(1);
        })
-        .finally(() => {
-          setIsLoading(false);
-        });
+        .finally(() => setIsLoading(false));
    } else {
      setLocalQuantity((prev) => prev - 1);
      setPendingQuantity((prev) => prev - 1);
@@ -196,53 +177,33 @@ const ProductCard = ({
    if (isLoading) return;

    setIsLoading(true);
-
-    // ✅ Optimistic update
-    setLocalIsFavorite(!localIsFavorite);
+    setLocalIsFavorite((prev) => !prev);

    try {
      if (localIsFavorite) {
-        const result = await removeFavorite(product.id).unwrap();
-        // ✅ Başarılı - RTK Query otomatik güncelleyecek
+        await removeFavorite(product.id).unwrap();
      } else {
-        const result = await addFavorite(product.id).unwrap();
-        // ✅ Başarılı - RTK Query otomatik güncelleyecek
+        await addFavorite(product.id).unwrap();
      }
-    } catch (error) {
-      console.error("Failed to toggle favorite:", error);
-      // ✅ Hata varsa geri al
-      setLocalIsFavorite(localIsFavorite);
+    } catch {
+      setLocalIsFavorite((prev) => !prev); // revert
    } finally {
      setIsLoading(false);
    }
  };

-  const handleCardClick = () => {
-    navigate(`/product/${product.id}`);
-  };
-
-  const [isHovered, setIsHovered] = useState(false);
-
-  const { name, price_amount, old_price_amount, media = [], reviews } = product;
-
-  // Hesaplanmış indirim oranı
-  let calculatedDiscount = null;
-  if (!product.discount && old_price_amount && price_amount && old_price_amount > price_amount) {
-    calculatedDiscount = Math.round(((old_price_amount - price_amount) / old_price_amount) * 100);
-  }
-
  return (
    <>
-      <div 
-        className={styles.productCard} 
+      <div
+        className={styles.productCard}
        onClick={handleCardClick}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <div className={styles.imageContainer}>
-          {(product.discount || calculatedDiscount) && (
+          {(product.discount > 0 || calculatedDiscount > 0) && (
            <span className={styles.discountBadge}>
-              -{product.discount ? product.discount : calculatedDiscount}%
+              -{product.discount || calculatedDiscount}%
            </span>
          )}
          {product.stock === 0 && (
@@ -250,22 +211,29 @@ const ProductCard = ({
              {t("common.out_of_stock")}
            </span>
          )}
-
-          <ImageCarousel images={media} altText={name} isHovered={isHovered}/>
+          <ImageCarousel images={media} altText={name} isHovered={isHovered} />
        </div>
+
        <div className={styles.productInfo}>
          <h3 className={styles.productName}>{name}</h3>
          <p className={styles.productDescription}>{truncatedDesc}</p>

          <div className={styles.priceContainer}>
            <div>
-              <span className={styles.currentPrice}>{price_amount} m.</span>
-              {old_price_amount && (
-                <span className={styles.oldPrice}>{old_price_amount} m.</span>
+              {isPriceZero(price_amount) ? (
+                <span className={styles.currentPrice}> {t("cart.pendingPriceTitle")}</span>
+              ) : (
+                <>
+                  <span className={styles.currentPrice}>{price_amount} m.</span>
+                  {old_price_amount && (
+                    <span className={styles.oldPrice}>{old_price_amount} m.</span>
+                  )}
+                </>
              )}
            </div>
          </div>
        </div>
+
        <div className={styles.actions}>
          {showFavoriteButton && (
            <button
@@ -276,6 +244,7 @@ const ProductCard = ({
              {localIsFavorite ? <IoMdHeart /> : <IoMdHeartEmpty />}
            </button>
          )}
+
          {showAddToCart && (
            <>
              {localQuantity > 0 ? (
@@ -337,4 +306,4 @@ const ProductCard = ({
  );
 };

-export default ProductCard;
+export default ProductCard;
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -5,6 +5,7 @@ export default {
    login: "Login",
    signUp: "Sign Up",
    brands: "Brands",
+    stores: "Stores",
    search: "Search by product name...",
    cart: "Cart",
    home: "Home",
@@ -38,6 +39,9 @@ export default {
    emptyCartTitle: "Your cart is empty",
    emptyCartMessage: "Looks like you haven't added any items to your cart yet",
    continueShopping: "Continue Shopping",
+    pendingPriceTitle: "Price pending",
+    pendingPriceDesc: "The price of one or more items in this order has not yet been determined. Our operator will contact you to provide additional information.",
+    pendingPriceTooltipDesc: "The price of this item in the order has not been determined. The operator will call you and provide additional information."
  },
  checkout: {
    paymentMethod: "Payment Method",
--- a/src/i18n/locales/ru.js
+++ b/src/i18n/locales/ru.js
@@ -5,6 +5,7 @@ export default {
    login: "Войти",
    signUp: "Регистрация",
    brands: "Бренды",
+    stores: "Магазины",
    search: "Поиск по названию товара...",
    cart: "Корзина",
    home: "Главная",
@@ -38,6 +39,9 @@ export default {
    emptyCartTitle: "Ваша корзина пуста",
    emptyCartMessage: "Похоже, вы еще не добавили ни одного товара в корзину",
    continueShopping: "Продолжить покупки",
+    pendingPriceTitle: "Цена уточняется",
+    pendingPriceDesc: "Цена на один или несколько товаров в этом заказе еще не определена. Наш оператор свяжется с вами для предоставления дополнительной информации.",
+    pendingPriceTooltipDesc: "Цена на этот товар в заказе не определена. Оператор позвонит вам и предоставит дополнительную информацию."
  },
  checkout: {
    paymentMethod: "Способ оплаты",
--- a/src/i18n/locales/tm.js
+++ b/src/i18n/locales/tm.js
@@ -5,6 +5,7 @@ export default {
    login: "Giriş",
    signUp: "Agza bolmak",
    brands: "Brendler",
+    stores: "Dükanlar",
    search: "Haryt ady boýunça gözleg...",
    cart: "Sebet",
    home: "Baş sahypa",
@@ -38,6 +39,9 @@ export default {
    emptyCartTitle: "Sebediňiz boş",
    emptyCartMessage: "Sebediňize entek hiç zat goşmadyňyz.",
    continueShopping: "Söwda etmegi dowam etdiriň",
+    pendingPriceTitle: "Bahasyny anyklamaly",
+    pendingPriceDesc: "Bu sargytdaky bir ýa-da birnäçe harydyň bahasy entek kesgitlenmedik. Operatorymyz siziň bilen habarlaşyp, goşmaça maglumat berer.",
+    pendingPriceTooltipDesc: "Bu sargytdaky harydyň bahasy kesgitlenmedik. Operator size jaň edip goşmaça maglumat berer."
  },
  checkout: {
    paymentMethod: "Töleg görnüşi",
--- a/src/pages/Cart/CartPage.module.scss
+++ b/src/pages/Cart/CartPage.module.scss
@@ -16,10 +16,9 @@
  .cartHeader {
    display: flex;
    align-items: center;
-    margin-bottom: 12px;
    justify-content: space-between;
    background-color: #f3f4f6;
-    padding-bottom: 15px;
+    padding-top: 10px;
    h2 {
      font-size: 24px;
      font-weight: 700;
@@ -27,11 +26,11 @@
      @media screen and (max-width: 768px) {
        font-size: 16px;
        font-weight: 500;
+        
      }
    }
  }
 }
-
 .cartProducts {
  display: flex;
  justify-content: space-between;
@@ -152,6 +151,7 @@
  @media screen and (max-width: 720px) {
    flex-direction: row-reverse;
    justify-content: space-between;
+    gap:10px;
  }

  .price {
@@ -226,7 +226,7 @@
  @media screen and (max-width: 1023px) {
    width: 100%;
    position: static;
-    margin-top: 16px;
+    margin-bottom: 16px;
  }

  h3 {
@@ -524,3 +524,106 @@
    }
  }
 }
+
+.pendingPriceBadgeWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.pendingPriceBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #faeeda;
+  border: 0.5px solid #ef9f27;
+  color: #854f0b;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+}
+
+.pendingPriceTooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-background-primary, #ffffff);
+  border: 0.5px solid var(--color-border-secondary, #e2e2e2);
+  border-radius: var(--border-radius-md, 6px);
+  padding: 8px 12px;
+  width: 220px;
+  font-size: 13px;
+  color: var(--color-text-primary, #333333);
+  line-height: 1.5;
+  z-index: 100;
+  white-space: normal;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  @media (max-width: 767px) {
+    display: none;
+  }
+
+  strong {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--color-text-primary, #000000);
+  }
+}
+
+:global {
+  .pending-price-modal {
+    .ant-modal-content {
+      border-radius: 12px;
+      padding: 24px;
+      @media (max-width: 767px) {
+        padding: 20px;
+      }
+    }
+
+    .ant-modal-header {
+      margin-bottom: 12px;
+      .ant-modal-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        @media (max-width: 767px) {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .ant-modal-body {
+      p {
+        font-size: 14px;
+        line-height: 1.6;
+        color: #555;
+        margin: 0;
+        @media (max-width: 767px) {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .ant-modal-footer {
+      margin-top: 20px;
+      .ant-btn-primary {
+        background-color: #888888;
+        border-color: #888888;
+        border-radius: 6px;
+        height: 36px;
+        padding: 0 20px;
+        font-weight: 500;
+        &:hover {
+          background-color: #666666;
+          border-color: #666666;
+        }
+      }
+    }
+  }
+}
--- a/src/pages/Cart/index.jsx
+++ b/src/pages/Cart/index.jsx
@@ -2,13 +2,10 @@ import React, { useState, useRef, useEffect, useMemo } from "react";
 import styles from "./CartPage.module.scss";
 import { FaTrashAlt } from "react-icons/fa";
 import Checkout from "../../components/Checkout";
-import { ChevronDown, ChevronUp } from "lucide-react";
 import { Modal } from "antd";
 import { useTranslation } from "react-i18next";
 import EmptyCartState from "./emptyCart";
 import {
-  useGetCartQuery,
-  useAddToCartMutation,
  useRemoveFromCartMutation,
  useUpdateCartItemMutation,
  useCleanCartMutation,
@@ -16,10 +13,11 @@ import {
 import { useCart } from "../../app/api/useCart";
 import { DecreaseIcon, IncreaseIcon } from "../../components/Icons";
 import Loader from "../../components/Loader/index";
+import PendingPriceBadge from "../../components/PendingPriceBadge";
+
+const isPriceZero = (price) => !price || parseFloat(price) === 0;

 const TruncatedDescription = ({ description, maxLength = 100 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-
  const stripHtml = (html) => {
    const doc = new DOMParser().parseFromString(html, "text/html");
    return doc.body.textContent || "";
@@ -32,11 +30,9 @@ const TruncatedDescription = ({ description, maxLength = 100 }) => {
    <div className={styles.truncatedDescription}>
      <div
        dangerouslySetInnerHTML={{
-          __html: isExpanded
-            ? description
-            : shouldTruncate
-              ? description.substring(0, maxLength) + "..."
-              : description,
+          __html: shouldTruncate
+            ? description.substring(0, maxLength) + "..."
+            : description,
        }}
      />
    </div>
@@ -44,20 +40,16 @@ const TruncatedDescription = ({ description, maxLength = 100 }) => {
 };

 const CartPage = () => {
-  const { cartData, cartItems, isLoading, isError, error } = useCart();
+  const { cartData, cartItems, isLoading } = useCart();
+  const { t } = useTranslation();

-  const { t, i18n } = useTranslation();
  const [checkoutStores, setCheckoutStores] = useState({});
-  const [addToCart] = useAddToCartMutation();
  const [removeFromCart] = useRemoveFromCartMutation();
  const [updateCartItem] = useUpdateCartItemMutation();
  const [cleanCart] = useCleanCartMutation();
-  const [isExpanded, setIsExpanded] = useState(false);
-  const expandedRef = useRef(null);
  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
  const [emptyCartModalVisible, setEmptyCartModalVisible] = useState(false);
  const [itemToDelete, setItemToDelete] = useState(null);
-
  const [localQuantities, setLocalQuantities] = useState({});
  const [pendingQuantities, setPendingQuantities] = useState({});
  const [loadingItems, setLoadingItems] = useState({});
@@ -70,43 +62,35 @@ const CartPage = () => {
    width: 400,
  };

-  // Convert grouped data to stores array
  const stores = useMemo(() => {
    return Object.entries(cartData)
      .map(([storeSlug, items]) => {
-        if (!items || !items.length) return null;
-
-        // Get store info from first item
+        if (!items?.length) return null;
        const storeInfo = items[0]?.product?.channel?.[0];
-
        return {
          id: storeInfo?.id || storeSlug,
          name: storeInfo?.name || storeSlug,
          slug: storeSlug,
          shipping_price: storeInfo?.shipping_price,
-          items: items,
+          items,
        };
      })
      .filter(Boolean);
  }, [cartData]);

-  // ✅ Initialize local quantities from cart items
  useEffect(() => {
-    const newLocalQuantities = {};
-    const newPendingQuantities = {};
-
+    const newLocal = {};
+    const newPending = {};
    cartItems.forEach((item) => {
-      const productId = item.product.id;
-      const quantity = parseInt(item.product_quantity, 10) || 0;
-      newLocalQuantities[productId] = quantity;
-      newPendingQuantities[productId] = quantity;
+      const id = item.product.id;
+      const qty = parseInt(item.product_quantity, 10) || 0;
+      newLocal[id] = qty;
+      newPending[id] = qty;
    });
-
-    setLocalQuantities(newLocalQuantities);
-    setPendingQuantities(newPendingQuantities);
+    setLocalQuantities(newLocal);
+    setPendingQuantities(newPending);
  }, [cartItems]);

-  // ✅ Debounced Cart Update - Her ürün için ayrı debounce
  useEffect(() => {
    const timers = {};

@@ -114,141 +98,94 @@ const CartPage = () => {
      const serverItem = cartItems.find(
        (item) => String(item.product.id) === String(productId),
      );
-      const serverQuantity = serverItem
+      const serverQty = serverItem
        ? parseInt(serverItem.product_quantity, 10)
        : 0;
-      const pendingQuantity = pendingQuantities[productId];
+      const pendingQty = pendingQuantities[productId];

-      // Değişiklik yoksa veya 0 ise (Delete modalı tetikler) bir şey yapma
      if (
-        pendingQuantity === undefined ||
-        pendingQuantity === serverQuantity ||
-        pendingQuantity <= 0
-      ) {
+        pendingQty === undefined ||
+        pendingQty === serverQty ||
+        pendingQty <= 0
+      )
        return;
-      }

      timers[productId] = setTimeout(async () => {
        try {
          setLoadingItems((prev) => ({ ...prev, [productId]: true }));
-          await updateCartItem({
-            productId,
-            quantity: pendingQuantity,
-          }).unwrap();
-        } catch (error) {
-          console.error("Failed to update cart:", error);
-          // Hata durumunda rollback
-          setLocalQuantities((prev) => ({
-            ...prev,
-            [productId]: serverQuantity,
-          }));
-          setPendingQuantities((prev) => ({
-            ...prev,
-            [productId]: serverQuantity,
-          }));
+          await updateCartItem({ productId, quantity: pendingQty }).unwrap();
+        } catch {
+          setLocalQuantities((prev) => ({ ...prev, [productId]: serverQty }));
+          setPendingQuantities((prev) => ({ ...prev, [productId]: serverQty }));
        } finally {
          setLoadingItems((prev) => ({ ...prev, [productId]: false }));
        }
      }, 500);
    });

-    return () => {
-      Object.values(timers).forEach((timer) => clearTimeout(timer));
-    };
+    return () => Object.values(timers).forEach(clearTimeout);
  }, [pendingQuantities, cartItems, updateCartItem]);

  const handleQuantityIncrease = (productId) => (event) => {
    event.preventDefault();
    event.stopPropagation();
-
    if (loadingItems[productId]) return;

-    const item = cartItems.find((item) => item.product.id === productId);
-    if (!item) return;
+    const item = cartItems.find((i) => i.product.id === productId);
+    if (!item || localQuantities[productId] >= item.product.stock) return;

-    if (localQuantities[productId] >= item.product.stock) {
-      return;
-    }
-
-    const newQuantity = (localQuantities[productId] || 0) + 1;
-    setLocalQuantities((prev) => ({
-      ...prev,
-      [productId]: newQuantity,
-    }));
-    setPendingQuantities((prev) => ({
-      ...prev,
-      [productId]: newQuantity,
-    }));
+    const newQty = (localQuantities[productId] || 0) + 1;
+    setLocalQuantities((prev) => ({ ...prev, [productId]: newQty }));
+    setPendingQuantities((prev) => ({ ...prev, [productId]: newQty }));
  };

  const handleQuantityDecrease = (productId) => (event) => {
    event.preventDefault();
    event.stopPropagation();
-
    if (loadingItems[productId]) return;

-    const currentQuantity = localQuantities[productId] || 0;
-
-    if (currentQuantity <= 1) {
+    const currentQty = localQuantities[productId] || 0;
+    if (currentQty <= 1) {
      showDeleteConfirm(productId);
      return;
    }

-    const newQuantity = currentQuantity - 1;
-    setLocalQuantities((prev) => ({
-      ...prev,
-      [productId]: newQuantity,
-    }));
-    setPendingQuantities((prev) => ({
-      ...prev,
-      [productId]: newQuantity,
-    }));
+    const newQty = currentQty - 1;
+    setLocalQuantities((prev) => ({ ...prev, [productId]: newQty }));
+    setPendingQuantities((prev) => ({ ...prev, [productId]: newQty }));
  };

-  const calculateStoreTotal = (storeItems) => {
-    return storeItems.reduce((sum, item) => {
-      const itemPrice = parseFloat(item.product.price_amount) || 0;
-      const itemQuantity = parseInt(item.product_quantity, 10) || 0;
-      return sum + itemPrice * itemQuantity;
+  const getStoreShippingPrice = (store) =>
+    store.shipping_price != null ? parseFloat(store.shipping_price) : 20;
+
+  // Store içinde fiyatsız ürün var mı?
+  const storeHasZeroPriceItem = (storeItems) =>
+    storeItems.some((item) => isPriceZero(item.product.price_amount));
+
+  const calculateStoreTotal = (storeItems) =>
+    storeItems.reduce((sum, item) => {
+      return (
+        sum +
+        (parseFloat(item.product.price_amount) || 0) *
+          (parseInt(item.product_quantity, 10) || 0)
+      );
    }, 0);
-  };

-  const getStoreShippingPrice = (store) => {
-    return store.shipping_price !== null && store.shipping_price !== undefined
-      ? parseFloat(store.shipping_price)
-      : 20;
-  };
-
-  const handleCheckout = (storeId) => {
+  const handleCheckout = (storeId) =>
    setCheckoutStores((prev) => ({ ...prev, [storeId]: true }));
-  };

-  const handleBackToCart = (storeId) => {
+  const handleBackToCart = (storeId) =>
    setCheckoutStores((prev) => ({ ...prev, [storeId]: false }));
-  };

-  const handleOrderSubmit = async (storeId, storeItems) => {
+  const handleOrderSubmit = async (storeId) => {
    if (checkoutStores[storeId] && checkoutRefs.current[storeId]) {
      const success = await checkoutRefs.current[storeId]();
-      if (success) {
-        setCheckoutStores((prev) => ({ ...prev, [storeId]: false }));
-      }
+      if (success) setCheckoutStores((prev) => ({ ...prev, [storeId]: false }));
    } else {
      handleCheckout(storeId);
    }
  };

-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (expandedRef.current && !expandedRef.current.contains(event.target)) {
-        setIsExpanded(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
  const showDeleteConfirm = (productId) => {
    setItemToDelete(productId);
    setDeleteModalVisible(true);
@@ -258,48 +195,41 @@ const CartPage = () => {
    if (itemToDelete) {
      try {
        await removeFromCart({ productId: itemToDelete }).unwrap();
-
        setLocalQuantities((prev) => {
-          const newState = { ...prev };
-          delete newState[itemToDelete];
-          return newState;
+          const s = { ...prev };
+          delete s[itemToDelete];
+          return s;
        });
        setPendingQuantities((prev) => {
-          const newState = { ...prev };
-          delete newState[itemToDelete];
-          return newState;
+          const s = { ...prev };
+          delete s[itemToDelete];
+          return s;
        });
-      } catch (error) {
-        console.error("Failed to remove item:", error);
+      } catch (e) {
+        console.error("Failed to remove item:", e);
      }
    }
    setDeleteModalVisible(false);
    setItemToDelete(null);
  };

-  const showEmptyCartConfirm = () => {
-    setEmptyCartModalVisible(true);
-  };
-
  const handleEmptyCartConfirm = async () => {
    try {
      await cleanCart().unwrap();
-
      setLocalQuantities({});
      setPendingQuantities({});
      setCheckoutStores({});
-    } catch (error) {
-      console.error("Failed to clean cart:", error);
+    } catch (e) {
+      console.error("Failed to clean cart:", e);
    }
    setEmptyCartModalVisible(false);
  };

-  const getTotalItemCount = () => {
-    return cartItems.reduce(
+  const getTotalItemCount = () =>
+    cartItems.reduce(
      (sum, item) => sum + parseInt(item.product_quantity, 10),
      0,
    );
-  };

  return (
    <div className={styles.cartContainer}>
@@ -339,21 +269,20 @@ const CartPage = () => {
                <h2>
                  {t("cart.basket")} ({getTotalItemCount()})
                </h2>
-                <div>
-                  <button
-                    className={styles.deleteBtn}
-                    style={{ padding: "4px 12px" }}
-                    onClick={showEmptyCartConfirm}
-                  >
-                    <FaTrashAlt /> {t("cart.clearCart")}
-                  </button>
-                </div>
+                <button
+                  className={styles.deleteBtn}
+                  style={{ padding: "4px 12px" }}
+                  onClick={() => setEmptyCartModalVisible(true)}
+                >
+                  <FaTrashAlt /> {t("cart.clearCart")}
+                </button>
              </div>

              {stores.map((store) => {
                const shippingPrice = getStoreShippingPrice(store);
                const storeTotal = calculateStoreTotal(store.items);
                const totalWithShipping = storeTotal + shippingPrice;
+                const hasZeroPrice = storeHasZeroPriceItem(store.items);

                return (
                  <div key={store.id} className={styles.storeSection}>
@@ -363,8 +292,8 @@ const CartPage = () => {
                        shippingPrice={shippingPrice}
                        productIds={store.items.map((item) => item.product.id)}
                        onBackToCart={() => handleBackToCart(store.id)}
-                        onPlaceOrder={(placeOrderFn) => {
-                          checkoutRefs.current[store.id] = placeOrderFn;
+                        onPlaceOrder={(fn) => {
+                          checkoutRefs.current[store.id] = fn;
                        }}
                      />
                    ) : (
@@ -391,10 +320,9 @@ const CartPage = () => {
                                </div>
                                <div className={styles.priceQuantity}>
                                  <span className={styles.price}>
-                                    {(
-                                      parseFloat(item.product.price_amount) || 0
-                                    ).toFixed(2)}{" "}
-                                    m.
+                                    {isPriceZero(item.product.price_amount)
+                                      ? t("cart.pendingPriceTitle")
+                                      : `${parseFloat(item.product.price_amount).toFixed(2)} m.`}
                                  </span>
                                  <div className={styles.quantityControls}>
                                    <button
@@ -441,26 +369,38 @@ const CartPage = () => {
                      </div>
                    )}

+                    {/* ✅ Store Summary - fiyatsız ürün varsa "Baha anyklamak" */}
                    <div className={styles.storeSummary}>
                      <div className={styles.cartContent}>
                        <h3>
                          {store.name} - {t("cart.basket")}:
                        </h3>
-                        <div className={styles.summaryRow}>
-                          <span>{t("cart.price")}:</span>
-                          <span>{storeTotal.toFixed(2)} m.</span>
-                        </div>
-                        <div className={styles.summaryRow}>
-                          <span>{t("cart.delivery")}:</span>
-                          <span>{shippingPrice.toFixed(2)} m.</span>
-                        </div>
-                        <div className={styles.summaryRow}>
-                          <span>{t("cart.total")}:</span>
-                          <span>{totalWithShipping.toFixed(2)} m.</span>
-                        </div>
+                        {hasZeroPrice ? (
+                          <div className={styles.summaryRow}>
+                            <span>{t("cart.total")}:</span>
+                            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+                               {t("cart.pendingPriceTitle")} <PendingPriceBadge />
+                            </span>
+                          </div>
+                        ) : (
+                          <>
+                            <div className={styles.summaryRow}>
+                              <span>{t("cart.price")}:</span>
+                              <span>{storeTotal.toFixed(2)} m.</span>
+                            </div>
+                            <div className={styles.summaryRow}>
+                              <span>{t("cart.delivery")}:</span>
+                              <span>{shippingPrice.toFixed(2)} m.</span>
+                            </div>
+                            <div className={styles.summaryRow}>
+                              <span>{t("cart.total")}:</span>
+                              <span>{totalWithShipping.toFixed(2)} m.</span>
+                            </div>
+                          </>
+                        )}
                      </div>
                      <button
-                        onClick={() => handleOrderSubmit(store.id, store.items)}
+                        onClick={() => handleOrderSubmit(store.id)}
                        className={styles.checkoutBtn}
                      >
                        {checkoutStores[store.id]
@@ -472,7 +412,6 @@ const CartPage = () => {
                );
              })}
            </div>
-
            {/* Mobile sticky summary */}
            {/* <div className={styles.container}>
              <div className={styles.summaryCard} ref={expandedRef}>
--- a/src/pages/Category/CategoryPage.module.scss
+++ b/src/pages/Category/CategoryPage.module.scss
@@ -128,6 +128,7 @@
  gap: 6px;
  flex: 1;
  min-width: 0;
+  
 }

 .priceLabel {
@@ -144,7 +145,7 @@
  font-size: 14px;
  background: #fff;
  transition: all 0.2s ease;
-
+width: 85%;
  &::placeholder {
    color: #bbb;
  }
@@ -498,3 +499,45 @@
    }
  }
 }
+
+.channelHeader {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  background: #fff;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  margin-bottom: 20px;
+
+  .channelLogo {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 1px solid #eee;
+  }
+
+  .channelInfo {
+    h1 {
+      margin: 0;
+      font-size: 24px;
+      font-weight: 700;
+      color: #333;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    padding: 15px;
+    gap: 15px;
+    
+    .channelLogo {
+      width: 60px;
+      height: 60px;
+    }
+    
+    .channelInfo h1 {
+      font-size: 20px;
+    }
+  }
+}
--- a/src/pages/Category/hooks/useCategoryData.js
+++ b/src/pages/Category/hooks/useCategoryData.js
@@ -5,11 +5,13 @@ import {
  useGetFiltersQuery,
  useLazyGetFiltersQuery,
 } from "../../../app/api/filtersApi";
+import { useGetChannelsQuery } from "../../../app/api/channelsApi";

 const useCategoryData = ({
  categoryId,
  collectionId,
  brandId,
+  channelId,
  selectedFilterCategory,
  searchQuery,
 }) => {
@@ -23,8 +25,9 @@ const useCategoryData = ({
    if (categoryId) return { category_id: categoryId };
    if (collectionId) return { collection_id: collectionId };
    if (brandId) return { brand_id: brandId };
+    if (channelId) return { channel_id: channelId };
    return null;
-  }, [categoryId, collectionId, brandId, selectedFilterCategory, searchQuery]);
+  }, [categoryId, collectionId, brandId, channelId, selectedFilterCategory, searchQuery]);

  const {
    data: filtersData,
@@ -44,6 +47,19 @@ const useCategoryData = ({
    skip: !collectionId,
  });

+  const {
+    data: channelsListData,
+    isLoading: channelsLoading,
+    error: channelsError,
+  } = useGetChannelsQuery({ perPage: 100 }, {
+    skip: !channelId,
+  });
+
+  const channelData = useMemo(() => {
+    if (!channelId || !channelsListData?.data) return null;
+    return channelsListData.data.find(c => String(c.id) === String(channelId));
+  }, [channelId, channelsListData]);
+
  const isSubCategory = useMemo(() => {
    if (!categoriesData?.data || !categoryId) return false;

@@ -92,8 +108,8 @@ const useCategoryData = ({
    setSelectedCategory(category);
  }, [categoryId, categoriesData]);

-  const isLoading = filtersLoading || collectionLoading;
-  const hasError = filtersError || collectionError;
+  const isLoading = filtersLoading || collectionLoading || channelsLoading;
+  const hasError = filtersError || collectionError || channelsError;

  return {
    categoriesData,
@@ -101,6 +117,7 @@ const useCategoryData = ({
    isSubCategory,
    filtersData: activeFilters,
    collectionData,
+    channelData,
    isLoading,
    hasError,
    fetchFilters,
--- a/src/pages/Category/hooks/useCategoryProducts.js
+++ b/src/pages/Category/hooks/useCategoryProducts.js
@@ -1,15 +1,17 @@
-import { useState, useEffect, useMemo, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import {
-  useGetCategoryProductsQuery,
  useLazyGetAllCategoryProductsPaginatedQuery,
+  useGetCategoryProductsQuery,
 } from "../../../app/api/categories";
 import { useLazyGetBrandProductsQuery } from "../../../app/api/brandsApi";
 import { useLazyGetCollectionProductsPaginatedQuery } from "../../../app/api/collectionsApi";
+import { useLazyGetChannelProductsQuery } from "../../../app/api/channelsApi"; // EKLE

 const useCategoryProducts = ({
  categoryId,
  collectionId,
  brandId,
+  channelId,
  selectedCategory,
  isSubCategory,
  currentPage,
@@ -19,50 +21,14 @@ const useCategoryProducts = ({
  maxPrice,
  sorting,
  searchQuery,
+  initialProducts = [],
+  initialHasMore = true,
 }) => {
-  const [products, setProducts] = useState([]);
-  const [hasMore, setHasMore] = useState(true);
+  const [products, setProducts] = useState(initialProducts);
+  const [hasMore, setHasMore] = useState(initialHasMore);
+  const [isFetching, setIsFetching] = useState(false);

-  const isFetchingRef = useRef(false);
-  const lastFetchKeyRef = useRef(null);
-  const abortControllerRef = useRef(null);
-
-  const contextId = useMemo(() => {
-    const parts = [
-      selectedFilterCategory && `fcat-${selectedFilterCategory}`,
-      categoryId && `cat-${categoryId}`,
-      brandId && `brand-${brandId}`,
-      collectionId && `col-${collectionId}`,
-      selectedFilterBrand && `fbrand-${selectedFilterBrand}`,
-      minPrice && `min-${minPrice}`,
-      maxPrice && `max-${maxPrice}`,
-      sorting && `sort-${sorting}`,
-    ].filter(Boolean);
-    return parts.join("|") || "none";
-  }, [
-    selectedFilterCategory,
-    categoryId,
-    brandId,
-    collectionId,
-    selectedFilterBrand,
-    minPrice,
-    maxPrice,
-    sorting,
-  ]);
-
-  const fetchParams = useMemo(
-    () => ({
-      page: currentPage,
-      limit: 24,
-      brands: selectedFilterBrand || undefined,
-      min_price: minPrice || undefined,
-      max_price: maxPrice || undefined,
-      sorting: sorting || undefined,
-    }),
-    [currentPage, selectedFilterBrand, minPrice, maxPrice, sorting],
-  );
-
-  const fetchKey = `${contextId}-p${currentPage}`;
+  const activeRequestId = useRef(0);

  const shouldUseBaseQuery =
    categoryId &&
@@ -70,240 +36,181 @@ const useCategoryProducts = ({
    !searchQuery &&
    !selectedFilterCategory &&
    !brandId &&
-    !collectionId;
+    !collectionId &&
+    !channelId;

-  const {
-    data: paginatedCategoryProducts,
-    isLoading: categoryLoading,
-    isFetching: categoryFetching,
-  } = useGetCategoryProductsQuery(
-    {
-      categoryId: categoryId,
-      page: currentPage,
-      min_price: minPrice || undefined,
-      max_price: maxPrice || undefined,
-      brands: selectedFilterBrand || undefined,
-      sorting: sorting || undefined,
-    },
-    {
-      skip: !shouldUseBaseQuery,
-    },
-  );
+  const { data: baseQueryData, isFetching: baseQueryFetching } =
+    useGetCategoryProductsQuery(
+      {
+        categoryId,
+        page: currentPage,
+        min_price: minPrice || undefined,
+        max_price: maxPrice || undefined,
+        brands: selectedFilterBrand || undefined,
+        sorting: sorting || undefined,
+      },
+      { skip: !shouldUseBaseQuery }
+    );

-  const [
+  const [fetchCategoryPaginated] = useLazyGetAllCategoryProductsPaginatedQuery();
+  const [fetchBrandPaginated] = useLazyGetBrandProductsQuery();
+  const [fetchCollectionPaginated] = useLazyGetCollectionProductsPaginatedQuery();
+  const [fetchChannelPaginated] = useLazyGetChannelProductsQuery();
+
+  // ✅ Ref'e al — dependency array'den çıkar, stale closure yok
+  const fetchersRef = useRef({});
+  fetchersRef.current = {
    fetchCategoryPaginated,
-    {
-      data: lazyCategoryProducts,
-      isLoading: lazyCategoryLoading,
-      isFetching: lazyCategoryFetching,
-      reset: resetCategoryPaginated,
-    },
-  ] = useLazyGetAllCategoryProductsPaginatedQuery();
-
-  const [
    fetchBrandPaginated,
-    {
-      data: paginatedBrandProducts,
-      isLoading: brandPaginatedLoading,
-      isFetching: brandFetching,
-      reset: resetBrandPaginated,
-    },
-  ] = useLazyGetBrandProductsQuery();
-
-  const [
    fetchCollectionPaginated,
-    {
-      data: paginatedCollectionProducts,
-      isLoading: collectionPaginatedLoading,
-      isFetching: collectionFetching,
-      reset: resetCollectionPaginated,
-    },
-  ] = useLazyGetCollectionProductsPaginatedQuery();
+    fetchChannelPaginated,
+  };

  useEffect(() => {
-    setProducts([]);
-    setHasMore(true);
+    if (!shouldUseBaseQuery || !baseQueryData) return;
+    const data = baseQueryData.data || [];
+    const hasNextPage = !!baseQueryData.pagination?.next_page_url;
+    setProducts((prev) => {
+      if (currentPage === 1) return data;
+      const existingIds = new Set(prev.map((p) => p.id));
+      const newItems = data.filter((p) => !existingIds.has(p.id));
+      return newItems.length > 0 ? [...prev, ...newItems] : prev;
+    });
+    setHasMore(hasNextPage);
+  }, [baseQueryData, currentPage, shouldUseBaseQuery]);

-    resetCategoryPaginated?.();
-    resetBrandPaginated?.();
-    resetCollectionPaginated?.();
-
-    lastFetchKeyRef.current = null;
-    isFetchingRef.current = false;
-
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-      abortControllerRef.current = null;
-    }
-  }, [
-    contextId,
-    resetCategoryPaginated,
-    resetBrandPaginated,
-    resetCollectionPaginated,
-  ]);
+  

  useEffect(() => {
-    if (searchQuery) return;
+    if (shouldUseBaseQuery || searchQuery) return;

-    if (lastFetchKeyRef.current === fetchKey) {
-      return;
-    }

-    if (isFetchingRef.current) {
-      return;
-    }
+      console.log("🔥 LAZY EFFECT TRIGGERED", {
+    shouldUseBaseQuery,
+    categoryId,
+    collectionId,
+    brandId,
+    channelId,
+    isSubCategory,
+    selectedFilterCategory,
+    selectedCategory,
+  });

-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
+    const snapshot = {
+      currentPage,
+      selectedFilterCategory,
+      categoryId,
+      isSubCategory,
+      brandId,
+      collectionId,
+      channelId,
+      selectedFilterBrand,
+      minPrice,
+      maxPrice,
+      sorting,
+    };

-    abortControllerRef.current = new AbortController();
-    isFetchingRef.current = true;
-    lastFetchKeyRef.current = fetchKey;
+    const requestId = ++activeRequestId.current;
+    setIsFetching(true);

-    const executeFetch = async () => {
+    const run = async () => {
      try {
-        if (selectedFilterCategory) {
-          await fetchCategoryPaginated({
-            category: {
-              id: selectedFilterCategory,
-              children: [],
-            },
-            ...fetchParams,
-          });
+        const {
+          fetchCategoryPaginated,
+          fetchBrandPaginated,
+          fetchCollectionPaginated,
+          fetchChannelPaginated,
+        } = fetchersRef.current; // ✅ ref'ten oku
+
+        const params = {
+          page: snapshot.currentPage,
+          perPage: 12,
+          brands: snapshot.selectedFilterBrand || undefined,
+          min_price: snapshot.minPrice || undefined,
+          max_price: snapshot.maxPrice || undefined,
+          sorting: snapshot.sorting || undefined,
+        };
+
+        let result = null;
+
+        if (snapshot.selectedFilterCategory) {
+          result = await fetchCategoryPaginated({
+            category: { id: snapshot.selectedFilterCategory, children: [] },
+            ...params,
+          }).unwrap();
+        } else if (snapshot.categoryId && snapshot.isSubCategory) {
+          result = await fetchCategoryPaginated({
+            category: { id: parseInt(snapshot.categoryId), children: [] },
+            ...params,
+          }).unwrap();
+        } else if (snapshot.brandId) {
+          result = await fetchBrandPaginated({
+            id: snapshot.brandId,
+            ...params,
+          }).unwrap();
+        } else if (snapshot.collectionId) {
+          result = await fetchCollectionPaginated({
+            collectionId: snapshot.collectionId,
+            ...params,
+          }).unwrap();
+        } else if (snapshot.channelId) {
+          result = await fetchChannelPaginated({
+            channelId: snapshot.channelId,
+            ...params,
+          }).unwrap();
+        }
+
+        if (requestId !== activeRequestId.current) return;
+
+        if (!result) {
+          setHasMore(false);
          return;
        }

-        if (categoryId && isSubCategory) {
-          await fetchCategoryPaginated({
-            category: {
-              id: parseInt(categoryId),
-              children: [],
-            },
-            ...fetchParams,
-          });
-          return;
-        }
+        const data = result.data || [];
+        const hasNextPage =
+          result.pagination?.hasMorePages ||
+          !!result.pagination?.next_page_url ||
+          false;

-        if (brandId) {
-          await fetchBrandPaginated({
-            id: brandId,
-            ...fetchParams,
-          });
-          return;
-        }
+        setProducts((prev) => {
+          if (snapshot.currentPage === 1) return data;
+          const existingIds = new Set(prev.map((p) => p.id));
+          const newItems = data.filter((p) => !existingIds.has(p.id));
+          return newItems.length > 0 ? [...prev, ...newItems] : prev;
+        });

-        if (collectionId) {
-          await fetchCollectionPaginated({
-            collectionId,
-            ...fetchParams,
-          });
-          return;
-        }
-      } catch (error) {
-        if (error.name !== "AbortError") {
-          console.error("Fetch error:", error);
-        }
+        setHasMore(data.length > 0 ? hasNextPage : false);
+      } catch (err) {
+        if (requestId !== activeRequestId.current) return;
+        console.error("Fetch error:", err);
+        setHasMore(false);
      } finally {
-        isFetchingRef.current = false;
+        if (requestId === activeRequestId.current) {
+          setIsFetching(false);
+        }
      }
    };

-    executeFetch();
-
-    return () => {
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
-    };
+    run();
  }, [
-    fetchKey,
+    shouldUseBaseQuery,
    searchQuery,
-    selectedFilterBrand,
+    currentPage,
    selectedFilterCategory,
    categoryId,
    isSubCategory,
    brandId,
    collectionId,
-    fetchParams,
-    fetchCategoryPaginated,
-    fetchBrandPaginated,
-    fetchCollectionPaginated,
+    channelId,
+    selectedFilterBrand,
+    minPrice,
+    maxPrice,
+    sorting,
+    // ✅ fetcher fonksiyonlar dependency'den tamamen çıktı
  ]);

-  useEffect(() => {
-    const updateProducts = (newData, hasNextPage) => {
-      if (!newData || newData.length === 0) {
-        if (currentPage === 1) {
-          setProducts([]);
-          setHasMore(false);
-        }
-        return;
-      }
-
-      setProducts((prev) => {
-        if (currentPage === 1) {
-          return newData;
-        }
-
-        const existingIds = new Set(prev.map((p) => p.id));
-        const newProducts = newData.filter((p) => !existingIds.has(p.id));
-
-        return newProducts.length > 0 ? [...prev, ...newProducts] : prev;
-      });
-
-      setHasMore(hasNextPage);
-    };
-
-    if (paginatedCategoryProducts && shouldUseBaseQuery) {
-      updateProducts(
-        paginatedCategoryProducts.data || [],
-        !!paginatedCategoryProducts.pagination?.next_page_url,
-      );
-      return;
-    }
-
-    if (lazyCategoryProducts) {
-      updateProducts(
-        lazyCategoryProducts.data || [],
-        lazyCategoryProducts.pagination?.hasMorePages || false,
-      );
-      return;
-    }
-
-    // Brand products
-    if (paginatedBrandProducts) {
-      updateProducts(
-        paginatedBrandProducts.data || [],
-        !!paginatedBrandProducts.pagination?.next_page_url,
-      );
-      return;
-    }
-
-    if (paginatedCollectionProducts) {
-      updateProducts(
-        paginatedCollectionProducts.data || [],
-        !!paginatedCollectionProducts.pagination?.next_page_url,
-      );
-    }
-  }, [
-    paginatedCategoryProducts,
-    lazyCategoryProducts,
-    paginatedBrandProducts,
-    paginatedCollectionProducts,
-    currentPage,
-    shouldUseBaseQuery,
-  ]);
-
-  const isLoading =
-    categoryLoading ||
-    lazyCategoryLoading ||
-    brandPaginatedLoading ||
-    collectionPaginatedLoading ||
-    categoryFetching ||
-    lazyCategoryFetching ||
-    brandFetching ||
-    collectionFetching;
+  const isLoading = shouldUseBaseQuery ? baseQueryFetching : isFetching;

  return {
    products,
@@ -315,3 +222,4 @@ const useCategoryProducts = ({
 };

 export default useCategoryProducts;
+
--- a/src/pages/Category/index.jsx
+++ b/src/pages/Category/index.jsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useState, useMemo, useRef } from "react";
 import { useParams, useLocation, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
@@ -21,22 +19,50 @@ import MobilePhoneCard from "./components/Mobilephonecard";

 const CategoryPage = () => {
  const { t } = useTranslation();
-  const { categoryId, collectionId, brandId } = useParams();
+  const { categoryId, collectionId, brandId, channelId } = useParams();
  const location = useLocation();
  const navigate = useNavigate();

-  const [pageState, setPageState] = useState({
+  const routeKey = useMemo(
+    () => `${categoryId || "x"}-${collectionId || "x"}-${brandId || "x"}-${channelId || "x"}`,
+    [categoryId, collectionId, brandId, channelId],
+  );
+
+  const getSavedState = (key, defaultVal) => {
+    if (location.state?.clearFilters) {
+      return defaultVal;
+    }
+    try {
+      const saved = sessionStorage.getItem(`category_${key}_${routeKey}`);
+      if (saved) return JSON.parse(saved);
+    } catch (e) {
+      console.error(e);
+    }
+    return defaultVal;
+  };
+
+  const getSavedStateByKey = (route, key) => {
+    try {
+      const saved = sessionStorage.getItem(`category_${key}_${route}`);
+      if (saved) return JSON.parse(saved);
+    } catch (e) {
+      console.error(e);
+    }
+    return null;
+  };
+
+  const [pageState, setPageState] = useState(() => getSavedState("pageState", {
    currentPage: 1,
    minPrice: "",
    maxPrice: "",
    sorting: "",
-  });
+  }));

-  const [filterState, setFilterState] = useState({
+  const [filterState, setFilterState] = useState(() => getSavedState("filterState", {
    selectedFilterCategory: null,
    selectedFilterBrand: null,
    brandSearchQuery: "",
-  });
+  }));

  const [isFilterDrawerOpen, setIsFilterDrawerOpen] = useState(false);
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@@ -47,11 +73,6 @@ const CategoryPage = () => {
    return () => window.removeEventListener("resize", handleResize);
  }, []);

-  const routeKey = useMemo(
-    () => `${categoryId || "x"}-${collectionId || "x"}-${brandId || "x"}`,
-    [categoryId, collectionId, brandId],
-  );
-
  const prevRouteRef = useRef(routeKey);
  const isInitialMount = useRef(true);

@@ -67,6 +88,7 @@ const CategoryPage = () => {
    isSubCategory,
    filtersData,
    collectionData,
+    channelData,
    isLoading: dataLoading,
    hasError: dataError,
    fetchFilters,
@@ -74,6 +96,7 @@ const CategoryPage = () => {
    categoryId,
    collectionId,
    brandId,
+    channelId,
    selectedFilterCategory: filterState.selectedFilterCategory,
    searchQuery,
  });
@@ -87,6 +110,7 @@ const CategoryPage = () => {
  } = useCategoryProducts({
    categoryId,
    collectionId,
+    channelId,
    brandId,
    selectedCategory,
    isSubCategory,
@@ -97,6 +121,8 @@ const CategoryPage = () => {
    maxPrice: pageState.maxPrice,
    sorting: pageState.sorting,
    searchQuery,
+    initialProducts: getSavedState("products", []),
+    initialHasMore: getSavedState("hasMore", true),
  });
  const isMobilePhoneView =
    (Number(categoryId) === 531 ||
@@ -106,21 +132,51 @@ const CategoryPage = () => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
      prevRouteRef.current = routeKey;
+      const savedScroll = getSavedState("scroll", 0);
+      if (savedScroll > 0) {
+        setTimeout(() => window.scrollTo(0, savedScroll), 100);
+      }
      return;
    }

-    if (prevRouteRef.current === routeKey) return;
+    if (prevRouteRef.current === routeKey && !location.state?.clearFilters) return;

    prevRouteRef.current = routeKey;

-    setAllProducts([]);
-    setHasMore(true);
-    setPageState({ currentPage: 1, minPrice: "", maxPrice: "" });
-    setFilterState({
-      selectedFilterCategory: null,
-      selectedFilterBrand: null,
-      brandSearchQuery: "",
-    });
+    const shouldClear = location.state?.clearFilters;
+
+    const savedPageState = shouldClear ? null : getSavedStateByKey(routeKey, "pageState");
+    const savedFilterState = shouldClear ? null : getSavedStateByKey(routeKey, "filterState");
+    const savedProducts = shouldClear ? null : getSavedStateByKey(routeKey, "products");
+    const savedHasMore = shouldClear ? null : getSavedStateByKey(routeKey, "hasMore");
+
+    if (savedPageState && savedFilterState && savedProducts) {
+      setPageState(savedPageState);
+      setFilterState(savedFilterState);
+      setAllProducts(savedProducts);
+      setHasMore(savedHasMore ?? true);
+      const savedScroll = getSavedStateByKey(routeKey, "scroll");
+      if (savedScroll !== null) {
+        setTimeout(() => window.scrollTo(0, savedScroll), 100);
+      }
+    } else {
+      if (prevRouteRef.current !== routeKey) {
+        setAllProducts([]);
+        setHasMore(true);
+      }
+      setPageState({
+        currentPage: 1,
+        minPrice: "",
+        maxPrice: "",
+        sorting: "",
+      });
+      setFilterState({
+        selectedFilterCategory: null,
+        selectedFilterBrand: null,
+        brandSearchQuery: "",
+      });
+      window.scrollTo(0, 0);
+    }

    if (location.state?.clearFilters) {
      navigate(location.pathname, { replace: true, state: {} });
@@ -134,6 +190,46 @@ const CategoryPage = () => {
    setHasMore,
  ]);

+  const stateRef = useRef();
+  useEffect(() => {
+    stateRef.current = { routeKey, pageState, filterState, allProducts, hasMore };
+  }, [routeKey, pageState, filterState, allProducts, hasMore]);
+
+  useEffect(() => {
+    if (stateRef.current) {
+      try {
+        const { routeKey: key, pageState: ps, filterState: fs, allProducts: ap, hasMore: hm } = stateRef.current;
+        sessionStorage.setItem(`category_pageState_${key}`, JSON.stringify(ps));
+        sessionStorage.setItem(`category_filterState_${key}`, JSON.stringify(fs));
+        sessionStorage.setItem(`category_products_${key}`, JSON.stringify(ap));
+        sessionStorage.setItem(`category_hasMore_${key}`, JSON.stringify(hm));
+      } catch (error) {
+        console.warn("Could not save category state to sessionStorage", error);
+      }
+    }
+  }, [pageState, filterState, allProducts, hasMore, routeKey]);
+
+  useEffect(() => {
+    let scrollTimeout;
+    const handleScroll = () => {
+      if (scrollTimeout) clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        if (stateRef.current) {
+          try {
+            sessionStorage.setItem(`category_scroll_${stateRef.current.routeKey}`, JSON.stringify(window.scrollY));
+          } catch (e) {
+            // ignore
+          }
+        }
+      }, 100);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      if (scrollTimeout) clearTimeout(scrollTimeout);
+    };
+  }, []);
+
  const filteredProducts = useMemo(() => {
    let list = searchQuery ? searchResults : allProducts;

@@ -189,7 +285,12 @@ const CategoryPage = () => {
      selectedFilterBrand: null,
    }));

-    setPageState((prev) => ({ currentPage: 1, minPrice: "", maxPrice: "", sorting: prev.sorting }));
+    setPageState((prev) => ({
+      currentPage: 1,
+      minPrice: "",
+      maxPrice: "",
+      sorting: prev.sorting,
+    }));
    setAllProducts([]);
    setHasMore(true);

@@ -197,15 +298,15 @@ const CategoryPage = () => {
  };

  const handleFilterCategoryDeselect = () => {
-    setFilterState((prev) => ({
+    setFilterState((prev) => ({ ...prev, selectedFilterCategory: null }));
+    setPageState((prev) => ({
      ...prev,
-      selectedFilterCategory: null,
+      currentPage: 1,
+      minPrice: "",
+      maxPrice: "",
    }));
-
-    setPageState({ currentPage: 1, minPrice: "", maxPrice: "" });
    setAllProducts([]);
    setHasMore(true);
-
    if (categoryId) fetchFilters({ category_id: categoryId });
  };

@@ -215,32 +316,29 @@ const CategoryPage = () => {
      selectedFilterBrand: brandId,
    }));

-    setPageState((prev) => ({ currentPage: 1, minPrice: "", maxPrice: "", sorting: prev.sorting }));
+    setPageState((prev) => ({
+      currentPage: 1,
+      minPrice: "",
+      maxPrice: "",
+      sorting: prev.sorting,
+    }));
    setAllProducts([]);
    setHasMore(true);
  };

  const handleFilterBrandDeselect = () => {
-    setFilterState((prev) => ({
+    setFilterState((prev) => ({ ...prev, selectedFilterBrand: null }));
+    setPageState((prev) => ({
      ...prev,
-      selectedFilterBrand: null,
+      currentPage: 1,
+      minPrice: "",
+      maxPrice: "",
    }));
-
-    setPageState({ currentPage: 1, minPrice: "", maxPrice: "" });
    setAllProducts([]);
    setHasMore(true);
  };

  const handleCategoryClick = (targetId) => {
-    setFilterState({
-      selectedFilterCategory: null,
-      selectedFilterBrand: null,
-      brandSearchQuery: "",
-    });
-    setPageState({ currentPage: 1, minPrice: "", maxPrice: "" });
-    setAllProducts([]);
-    setHasMore(true);
-
    navigate(`/category/${targetId}`, {
      replace: false,
      state: { clearFilters: true, timestamp: Date.now() },
@@ -276,18 +374,35 @@ const CategoryPage = () => {

  return (
    <div className={styles.categoryPage}>
-      {(categoryId || filterState.selectedFilterCategory) && (
-        <CategoryBreadcrumbs
-          categoriesData={categoriesData}
-          categoryId={filterState.selectedFilterCategory || categoryId}
-          onCategoryClick={handleCategoryClick}
-        />
-      )}
+      {channelId && channelData ? (
+        <div className={styles.channelHeader}>
+          {channelData.media?.[0]?.thumbnail && (
+            <img
+              src={channelData.media[0].thumbnail}
+              alt={channelData.name}
+              className={styles.channelLogo}
+            />
+          )}
+          <div className={styles.channelInfo}>
+            <h1>{channelData.name}</h1>
+          </div>
+        </div>
+      ) : (
+        <>
+          {(categoryId || filterState.selectedFilterCategory) && (
+            <CategoryBreadcrumbs
+              categoriesData={categoriesData}
+              categoryId={filterState.selectedFilterCategory || categoryId}
+              onCategoryClick={handleCategoryClick}
+            />
+          )}

-      <h2>{pageTitle}</h2>
-      <p className={styles.sum}>
-        {t("category.total")}: {totalItems} {t("category.items")}
-      </p>
+          <h2>{pageTitle}</h2>
+          <p className={styles.sum}>
+            {t("category.total")}: {totalItems} {t("category.items")}
+          </p>
+        </>
+      )}

      <div className={styles.bars}>
        <button
@@ -314,31 +429,22 @@ const CategoryPage = () => {
          minPrice={pageState.minPrice}
          maxPrice={pageState.maxPrice}
          onMinPriceChange={(value) => {
-            setPageState((prev) => {
-              // Sadece aktif bir değer girilirse ürünleri sıfırla
-              if (value !== "") {
-                setAllProducts([]);
-                setHasMore(true);
-              }
-              return {
-                ...prev,
-                minPrice: value,
-                currentPage: 1,
-              };
-            });
+            setAllProducts([]);
+            setHasMore(true);
+            setPageState((prev) => ({
+              ...prev,
+              minPrice: value,
+              currentPage: 1,
+            }));
          }}
          onMaxPriceChange={(value) => {
-            setPageState((prev) => {
-              if (value !== "") {
-                setAllProducts([]);
-                setHasMore(true);
-              }
-              return {
-                ...prev,
-                maxPrice: value,
-                currentPage: 1,
-              };
-            });
+            setAllProducts([]);
+            setHasMore(true);
+            setPageState((prev) => ({
+              ...prev,
+              maxPrice: value,
+              currentPage: 1,
+            }));
          }}
          onCategorySelect={handleFilterCategorySelect}
          onCategoryDeselect={handleFilterCategoryDeselect}
@@ -351,16 +457,9 @@ const CategoryPage = () => {
          onSortingChange={(value) => {
            setPageState((prev) => {
              const newSorting = prev.sorting === value ? "" : value;
-              // Sadece aktif bir sort seçilirse ürünleri sıfırla
-              if (newSorting !== "") {
-                setAllProducts([]);
-                setHasMore(true);
-              }
-              return {
-                ...prev,
-                sorting: newSorting,
-                currentPage: 1,
-              };
+              setAllProducts([]); // her zaman sıfırla
+              setHasMore(true);
+              return { ...prev, sorting: newSorting, currentPage: 1 };
            });
          }}
        />
@@ -377,30 +476,22 @@ const CategoryPage = () => {
          minPrice={pageState.minPrice}
          maxPrice={pageState.maxPrice}
          onMinPriceChange={(value) => {
-            setPageState((prev) => {
-              if (value !== "") {
-                setAllProducts([]);
-                setHasMore(true);
-              }
-              return {
-                ...prev,
-                minPrice: value,
-                currentPage: 1,
-              };
-            });
+            setAllProducts([]);
+            setHasMore(true);
+            setPageState((prev) => ({
+              ...prev,
+              minPrice: value,
+              currentPage: 1,
+            }));
          }}
          onMaxPriceChange={(value) => {
-            setPageState((prev) => {
-              if (value !== "") {
-                setAllProducts([]);
-                setHasMore(true);
-              }
-              return {
-                ...prev,
-                maxPrice: value,
-                currentPage: 1,
-              };
-            });
+            setAllProducts([]);
+            setHasMore(true);
+            setPageState((prev) => ({
+              ...prev,
+              maxPrice: value,
+              currentPage: 1,
+            }));
          }}
          onCategorySelect={handleFilterCategorySelect}
          onCategoryDeselect={handleFilterCategoryDeselect}
@@ -413,15 +504,9 @@ const CategoryPage = () => {
          onSortingChange={(value) => {
            setPageState((prev) => {
              const newSorting = prev.sorting === value ? "" : value;
-              if (newSorting) {
-                setAllProducts([]);
-                setHasMore(true);
-              }
-              return {
-                ...prev,
-                sorting: newSorting,
-                currentPage: 1,
-              };
+              setAllProducts([]); // her zaman sıfırla
+              setHasMore(true);
+              return { ...prev, sorting: newSorting, currentPage: 1 };
            });
          }}
        />
@@ -441,12 +526,10 @@ const CategoryPage = () => {
              next={loadMoreData}
              hasMore={hasMore}
              scrollThreshold={0.8}
-              scrollableTarget={null} 
-              style={{ overflow: "hidden" }} 
+              scrollableTarget={null}
+              style={{ overflow: "hidden" }}
              loader={
-                <div
-                  className={`${styles.loaderContainer} `}
-                >
+                <div className={`${styles.loaderContainer} `}>
                  <Loader />
                </div>
              }
--- a/src/pages/OrderDetail/OrderDetail.module.scss
+++ b/src/pages/OrderDetail/OrderDetail.module.scss
@@ -127,6 +127,7 @@
  border-radius: 4px;
  margin-bottom: 20px;
  display: flex;
+
  @media screen and (max-width: 640px) {
    flex-direction: column;
  }
@@ -140,6 +141,7 @@
  .row {
    display: flex;
    margin-bottom: 10px;
+    gap: 12px;
    @media screen and (max-width: 640px) {
      justify-content: space-between;
    }
@@ -157,10 +159,10 @@
      &:first-child {
        font-weight: 600;
        color: #000;
-        width: 25%;
-        @media screen and (max-width: 640px) {
-          width: 50%;
-        }
+        // width: 25%;
+        // @media screen and (max-width: 640px) {
+        //   width: 50%;
+        // }
      }

      &:last-child {
@@ -295,3 +297,106 @@
    }
  }
 }
+
+.pendingPriceBadgeWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.pendingPriceBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #faeeda;
+  border: 0.5px solid #ef9f27;
+  color: #854f0b;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+}
+
+.pendingPriceTooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-background-primary, #ffffff);
+  border: 0.5px solid var(--color-border-secondary, #e2e2e2);
+  border-radius: var(--border-radius-md, 6px);
+  padding: 8px 12px;
+  width: 220px;
+  font-size: 13px;
+  color: var(--color-text-primary, #333333);
+  line-height: 1.5;
+  z-index: 100;
+  white-space: normal;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  @media (max-width: 767px) {
+    display: none;
+  }
+
+  strong {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--color-text-primary, #000000);
+  }
+}
+
+:global {
+  .pending-price-modal {
+    .ant-modal-content {
+      border-radius: 12px;
+      padding: 24px;
+      @media (max-width: 767px) {
+        padding: 20px;
+      }
+    }
+
+    .ant-modal-header {
+      margin-bottom: 12px;
+      .ant-modal-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        @media (max-width: 767px) {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .ant-modal-body {
+      p {
+        font-size: 14px;
+        line-height: 1.6;
+        color: #555;
+        margin: 0;
+        @media (max-width: 767px) {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .ant-modal-footer {
+      margin-top: 20px;
+      .ant-btn-primary {
+        background-color: #888888;
+        border-color: #888888;
+        border-radius: 6px;
+        height: 36px;
+        padding: 0 20px;
+        font-weight: 500;
+        &:hover {
+          background-color: #666666;
+          border-color: #666666;
+        }
+      }
+    }
+  }
+}
--- a/src/pages/OrderDetail/index.jsx
+++ b/src/pages/OrderDetail/index.jsx
@@ -1,63 +1,63 @@
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import styles from "./OrderDetail.module.scss";
-import { Ban, CircleCheck, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { useGetOrderByIdQuery } from "../../app/api/orderApi"; // Update with your correct path
-import track from "../../assets/track.jpg"; // Keep for delivery service icon
+import { useGetOrderByIdQuery } from "../../app/api/orderApi";
+import track from "../../assets/track.jpg";
 import Loader from "../../components/Loader/index";
 import { Result, Button } from "antd";
-import { useNavigate } from "react-router-dom";
+import PendingPriceBadge from "../../components/PendingPriceBadge";
+
+const isPriceZero = (price) => !price || parseFloat(price) === 0;
+
 const OrderDetail = () => {
  const { t } = useTranslation();
-  const { id } = useParams(); // Get the order ID from URL params
-  const { data: orderData, isLoading, error } = useGetOrderByIdQuery(id);
+  const { id } = useParams();
  const navigate = useNavigate();
-  // Format date function
+  const { data: orderData, isLoading, error } = useGetOrderByIdQuery(id);
+
  const formatDate = (dateString) => {
    try {
-      const date = new Date(dateString);
-      return date.toLocaleString("tk-TM", {
+      return new Date(dateString).toLocaleString("tk-TM", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric",
        hour: "2-digit",
        minute: "2-digit",
      });
-    } catch (e) {
+    } catch {
      return dateString;
    }
  };

-  // Format delivery time for display
  const formatDeliveryTime = (time, date) => {
    try {
-      const deliveryDate = new Date(date);
-      const formattedDate = deliveryDate.toLocaleDateString("tk-TM", {
+      const formatted = new Date(date).toLocaleDateString("tk-TM", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric",
      });
-      return `${time} (${formattedDate})`;
-    } catch (e) {
-      return `${time}`;
+      return `${time} (${formatted})`;
+    } catch {
+      return time;
    }
  };

-  // Calculate total order amount
  const calculateTotal = (orderItems) => {
-    if (!orderItems || !orderItems.length) return 0;
+    if (!orderItems?.length) return null;
+    const hasZero = orderItems.some((item) =>
+      isPriceZero(item.unit_price_amount),
+    );
+    if (hasZero) return null;
    return orderItems
      .reduce(
        (sum, item) => sum + parseFloat(item.unit_price_amount) * item.quantity,
-        0
+        0,
      )
      .toFixed(2);
  };

-  // Handle loading state
  if (isLoading) return <Loader />;

-  // Handle error state
  if (error)
    return (
      <Result
@@ -72,10 +72,8 @@ const OrderDetail = () => {
      />
    );

-  // Handle case where order data is not available
  if (!orderData) return <div className={styles.notFound}>Order not found</div>;

-  // Calculate total
  const totalAmount = calculateTotal(orderData.orderItems);

  return (
@@ -84,39 +82,10 @@ const OrderDetail = () => {
        <h1>
          {t("order.orderNumber")}: {orderData.id}
        </h1>
-        <div className={styles.Buttons}>
-          {/* <button className={styles.repeatButton}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 512 512"
-              fill="currentColor"
-            >
-              <path d="M480 256c-17.67 0-32 14.31-32 32c0 52.94-43.06 96-96 96H192L192 344c0-9.469-5.578-18.06-14.23-21.94C169.1 318.3 159 319.8 151.9 326.2l-80 72C66.89 402.7 64 409.2 64 416s2.891 13.28 7.938 17.84l80 72C156.4 509.9 162.2 512 168 512c3.312 0 6.615-.6875 9.756-2.062C186.4 506.1 192 497.5 192 488L192 448h160c88.22 0 160-71.78 160-160C512 270.3 497.7 256 480 256zM160 128h159.1L320 168c0 9.469 5.578 18.06 14.23 21.94C337.4 191.3 340.7 192 343.1 192c5.812 0 11.57-2.125 16.07-6.156l80-72C445.1 109.3 448 102.8 448 95.1s-2.891-13.28-7.938-17.84l-80-72c-7.047-6.312-17.19-7.875-25.83-4.094C325.6 5.938 319.1 14.53 319.1 24L320 64H160C71.78 64 0 135.8 0 224c0 17.69 14.33 32 32 32s32-14.31 32-32C64 171.1 107.1 128 160 128z"></path>
-            </svg>{" "}
-            {t("order.repeatOrder")}
-          </button> */}
-          {/* <button className={styles.cancelButton}>
-            {" "}
-            <Ban />
-            {t("order.dropOrder")}
-          </button> */}
-        </div>
+        <div className={styles.Buttons} />
      </div>
-      <div className={styles.content}>
-        {/* Order Status */}
-        {/* <div className={styles.status}>
-          <p className={styles.statusText}>
-            <span className={styles.statusIcon}>
-              <CircleCheck />
-            </span>{" "}
-            {t("order.Your_order_has_been_accepted")}
-          </p>
-          <span className={styles.close}>
-            <X />
-          </span>
-        </div> */}

-        {/* Order Details */}
+      <div className={styles.content}>
        <div className={styles.details}>
          <div className={styles.rowContainer}>
            <div className={styles.row}>
@@ -132,7 +101,7 @@ const OrderDetail = () => {
              <span>
                {formatDeliveryTime(
                  orderData.delivery_time,
-                  orderData.delivery_at
+                  orderData.delivery_at,
                )}
              </span>
            </div>
@@ -144,11 +113,26 @@ const OrderDetail = () => {
            </div>
            <div className={styles.row}>
              <span>{t("order.sum")}:</span>
-              <span className={styles.total}>{totalAmount} m.</span>
+              <span className={styles.total}>
+                {totalAmount === null ? (
+                  <span
+                    style={{
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 6,
+                    }}
+                  >
+                    <PendingPriceBadge t={t} />
+                  </span>
+                ) : (
+                  `${totalAmount} m.`
+                )}
+              </span>
            </div>
          </div>
        </div>

+        {/* Desktop table */}
        <div className={styles.tableContainer}>
          <table className={styles.table}>
            <thead>
@@ -165,9 +149,12 @@ const OrderDetail = () => {
            <tbody>
              {orderData.orderItems.map((item, index) => {
                const product = item.product;
-                const itemTotal = (
-                  parseFloat(item.unit_price_amount) * item.quantity
-                ).toFixed(2);
+                const zeroPriceItem = isPriceZero(item.unit_price_amount);
+                const itemTotal = zeroPriceItem
+                  ? null
+                  : (
+                      parseFloat(item.unit_price_amount) * item.quantity
+                    ).toFixed(2);

                return (
                  <tr key={index}>
@@ -181,27 +168,50 @@ const OrderDetail = () => {
                    <td>{product.name}</td>
                    <td>{product.brand || "-"}</td>
                    <td>{product.id || "-"}</td>
-                    <td>{item.unit_price_amount} m.</td>
+                    <td>
+                      {zeroPriceItem ? (
+                        <span
+                          style={{
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: 6,
+                          }}
+                        >
+                          <PendingPriceBadge />
+                        </span>
+                      ) : (
+                        `${item.unit_price_amount} m.`
+                      )}
+                    </td>
                    <td>{item.quantity}</td>
-                    <td>{itemTotal} m.</td>
+                    <td>
+                      {itemTotal === null ? (
+                        <span
+                          style={{
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: 6,
+                          }}
+                        >
+                          <PendingPriceBadge />
+                        </span>
+                      ) : (
+                        `${itemTotal} m.`
+                      )}
+                    </td>
                  </tr>
                );
              })}
-              {/* Add delivery service row if shipping method exists */}
+
              {orderData.shipping_method && (
                <tr>
                  <td>
-                    <img
-                      src={track}
-                      alt="Delivery Service"
-                      className={styles.image}
-                    />
+                    <img src={track} alt="Delivery" className={styles.image} />
                  </td>
                  <td>Eltip bermek hyzmaty</td>
                  <td>Beýleki</td>
                  <td>DELIVERY</td>
-                  <td>10.00 m.</td>{" "}
-                  {/* You may need to get actual delivery cost from API */}
+                  <td>10.00 m.</td>
                  <td>1</td>
                  <td>10.00 m.</td>
                </tr>
@@ -210,13 +220,15 @@ const OrderDetail = () => {
          </table>
        </div>
      </div>
-      {/* Mobile View */}
+
+      {/* Mobile cards */}
      <div className={styles.productList}>
        {orderData.orderItems.map((item, index) => {
          const product = item.product;
-          const itemTotal = (
-            parseFloat(item.unit_price_amount) * item.quantity
-          ).toFixed(2);
+          const zeroPriceItem = isPriceZero(item.unit_price_amount);
+          const itemTotal = zeroPriceItem
+            ? null
+            : (parseFloat(item.unit_price_amount) * item.quantity).toFixed(2);

          return (
            <div className={styles.card} key={index}>
@@ -233,18 +245,30 @@ const OrderDetail = () => {
                    {t("order.quantity")}: {item.quantity}
                  </span>
                  <span className={styles.price}>
-                    {item.unit_price_amount} m.
+                    {zeroPriceItem ? (
+                      <span
+                        style={{
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 6,
+                        }}
+                      >
+                        <PendingPriceBadge />
+                      </span>
+                    ) : (
+                      `${item.unit_price_amount} m.`
+                    )}
                  </span>
                </div>
              </div>
            </div>
          );
        })}
-        {/* Add delivery service card if shipping method exists */}
-        {orderData.shipping_method && (
+
+        {/* {orderData.shipping_method && (
          <div className={styles.card}>
            <div className={styles.imageContainer}>
-              <img src={track} alt="Delivery Service" />
+              <img src={track} alt="Delivery" />
            </div>
            <div className={styles.detailsMobile}>
              <h3 className={styles.title}>Beýleki</h3>
@@ -257,7 +281,7 @@ const OrderDetail = () => {
              </div>
            </div>
          </div>
-        )}
+        )} */}
      </div>
    </div>
  );
--- a/src/pages/Orders/Orders.module.scss
+++ b/src/pages/Orders/Orders.module.scss
@@ -1,10 +1,10 @@
 // SargytlarymComponent.module.scss
 .container {
-  padding: 15px 24px 0 24px;
+  padding: 15px 24px 24px 24px;
  max-width: 1366px;
  margin: 0 auto;
  box-sizing: border-box;
-  a{
+  a {
    text-decoration: none;
  }
  @media (max-width: 767px) {
@@ -121,3 +121,106 @@
  font-weight: 700;
  color: #888888;
 }
+
+.pendingPriceBadgeWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.pendingPriceBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #faeeda;
+  border: 0.5px solid #ef9f27;
+  color: #854f0b;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+}
+
+.pendingPriceTooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-background-primary, #ffffff);
+  border: 0.5px solid var(--color-border-secondary, #e2e2e2);
+  border-radius: var(--border-radius-md, 6px);
+  padding: 8px 12px;
+  width: 220px;
+  font-size: 13px;
+  color: var(--color-text-primary, #333333);
+  line-height: 1.5;
+  z-index: 100;
+  white-space: normal;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  @media (max-width: 767px) {
+    display: none;
+  }
+
+  strong {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--color-text-primary, #000000);
+  }
+}
+
+:global {
+  .pending-price-modal {
+    .ant-modal-content {
+      border-radius: 12px;
+      padding: 24px;
+      @media (max-width: 767px) {
+        padding: 20px;
+      }
+    }
+
+    .ant-modal-header {
+      margin-bottom: 12px;
+      .ant-modal-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        @media (max-width: 767px) {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .ant-modal-body {
+      p {
+        font-size: 14px;
+        line-height: 1.6;
+        color: #555;
+        margin: 0;
+        @media (max-width: 767px) {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .ant-modal-footer {
+      margin-top: 20px;
+      .ant-btn-primary {
+        background-color: #888888;
+        border-color: #888888;
+        border-radius: 6px;
+        height: 36px;
+        padding: 0 20px;
+        font-weight: 500;
+        &:hover {
+          background-color: #666666;
+          border-color: #666666;
+        }
+      }
+    }
+  }
+}
--- a/src/pages/Orders/index.jsx
+++ b/src/pages/Orders/index.jsx
@@ -1,36 +1,40 @@
-// Orders.jsx
-import React from "react";
+import React, { useState } from "react";
 import styles from "./Orders.module.scss";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useGetOrdersQuery } from "../../app/api/orderApi"; // Update with your correct path
-import EmptyOrderState from "./emptyOrder"; // Import the EmptyOrderState component
+import { useGetOrdersQuery } from "../../app/api/orderApi";
+import EmptyOrderState from "./emptyOrder";
 import Loader from "../../components/Loader/index";
 import { Result, Button } from "antd";
 import { useNavigate } from "react-router-dom";
+import PendingPriceBadge from "../../components/PendingPriceBadge";
+
+const isPriceZero = (price) => !price || parseFloat(price) === 0;
+
+const orderHasZeroPrice = (orderItems) =>
+  orderItems?.some((item) => isPriceZero(item.unit_price_amount));
+
 const Orders = () => {
  const { t } = useTranslation();
  const { data: orders, isLoading, error } = useGetOrdersQuery();
  const navigate = useNavigate();
-  // Function to format date - implement this or use a library like date-fns
+
  const formatOrderDate = (dateString) => {
    try {
-      const date = new Date(dateString);
-      return date.toLocaleString("tk-TM", {
+      return new Date(dateString).toLocaleString("tk-TM", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric",
        hour: "2-digit",
        minute: "2-digit",
      });
-    } catch (e) {
+    } catch {
      return dateString;
    }
  };

  if (isLoading) return <Loader />;

-  // Handle error state
  if (error)
    return (
      <Result
@@ -45,16 +49,13 @@ const Orders = () => {
      />
    );

-  // Handle empty orders - render EmptyOrderState component
-  if (!orders || orders.length === 0) {
-    return <EmptyOrderState />;
-  }
+  if (!orders || orders.length === 0) return <EmptyOrderState />;

  return (
    <div className={styles.container}>
      <h2 className={styles.title}>Sargytlarym</h2>

-      {/* Desktop table view */}
+      {/* Desktop table */}
      <div className={styles.tableContainer}>
        <table className={styles.table}>
          <thead>
@@ -69,11 +70,11 @@ const Orders = () => {
          </thead>
          <tbody>
            {orders.map((order) => {
-              // Calculate total order amount
+              const hasZeroPrice = orderHasZeroPrice(order.orderItems);
              const totalAmount = order.orderItems.reduce(
                (sum, item) =>
                  sum + parseFloat(item.unit_price_amount) * item.quantity,
-                0
+                0,
              );

              return (
@@ -81,7 +82,19 @@ const Orders = () => {
                  <td>{order.id}</td>
                  <td>{formatOrderDate(order.delivery_at)}</td>
                  <td style={{ color: "#888888", fontWeight: "700" }}>
-                    {totalAmount.toFixed(2)} m.
+                    {hasZeroPrice ? (
+                      <span
+                        style={{
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 6,
+                        }}
+                      >
+                         {t("cart.pendingPriceTitle")} <PendingPriceBadge />
+                      </span>
+                    ) : (
+                      `${totalAmount.toFixed(2)} m.`
+                    )}
                  </td>
                  <td>{order.payment_type}</td>
                  <td>{order.status}</td>
@@ -99,50 +112,72 @@ const Orders = () => {
        </table>
      </div>

-      {/* Mobile card view */}
+      {/* Mobile cards */}
      <div className={styles.Mobilecontainer}>
        {orders.map((order) => {
+          const hasZeroPrice = orderHasZeroPrice(order.orderItems);
          const totalAmount = order.orderItems.reduce(
            (sum, item) =>
              sum + parseFloat(item.unit_price_amount) * item.quantity,
-            0
+            0,
          );

          return (
-            <Link to={`/orderdetail/${order.id}`} key={order.id}>
-              <div className={styles.orderCard}>
-                <div className={styles.orderRow}>
-                  <span className={styles.label}>
-                    {t("order.orderNumber")}:
-                  </span>
-                  <span className={styles.value}>{order.id}</span>
-                </div>
-                <div className={styles.orderRow}>
-                  <span className={styles.label}>{t("order.orderDate")}:</span>
-                  <span className={styles.value}>
-                    {formatOrderDate(order.delivery_at)}
-                  </span>
-                </div>
-                <div className={styles.orderRow}>
-                  <span className={styles.label}>{t("order.sum")}:</span>
-                  <span className={styles.total}>
-                    {totalAmount.toFixed(2)} m.
-                  </span>
-                </div>
-                <div className={styles.orderRow}>
-                  <span className={styles.label}>
-                    {t("checkout.paymentMethod")}:
-                  </span>
-                  <span className={styles.value}>{order.payment_type}</span>
-                </div>
-                <div className={styles.orderRow}>
-                  <span className={styles.label}>
-                    {t("order.orderStatus")}:
-                  </span>
-                  <span className={styles.value}>{order.status}</span>
-                </div>
+            <div
+              key={order.id}
+              className={styles.orderCard}
+              onClick={(e) => {
+                // Modal veya badge içerisine tıklandığında yönlendirmeyi engelle
+                if (
+                  e.target.closest(`.${styles.pendingPriceBadgeWrapper}`) ||
+                  e.target.closest(".ant-modal-root") ||
+                  e.target.closest(".ant-modal-wrap")
+                ) {
+                  return;
+                }
+                navigate(`/orderdetail/${order.id}`);
+              }}
+              style={{ cursor: "pointer" }}
+            >
+              <div className={styles.orderRow}>
+                <span className={styles.label}>{t("order.orderNumber")}:</span>
+                <span className={styles.value}>{order.id}</span>
              </div>
-            </Link>
+              <div className={styles.orderRow}>
+                <span className={styles.label}>{t("order.orderDate")}:</span>
+                <span className={styles.value}>
+                  {formatOrderDate(order.delivery_at)}
+                </span>
+              </div>
+              <div className={styles.orderRow}>
+                <span className={styles.label}>{t("order.sum")}:</span>
+                <span className={styles.total}>
+                  {hasZeroPrice ? (
+                    <span
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 6,
+                      }}
+                    >
+                       {t("cart.pendingPriceTitle")} <PendingPriceBadge />
+                    </span>
+                  ) : (
+                    `${totalAmount.toFixed(2)} m.`
+                  )}
+                </span>
+              </div>
+              <div className={styles.orderRow}>
+                <span className={styles.label}>
+                  {t("checkout.paymentMethod")}:
+                </span>
+                <span className={styles.value}>{order.payment_type}</span>
+              </div>
+              <div className={styles.orderRow}>
+                <span className={styles.label}>{t("order.orderStatus")}:</span>
+                <span className={styles.value}>{order.status}</span>
+              </div>
+            </div>
          );
        })}
      </div>
--- a/src/pages/ProductDetail/ProductPage.module.scss
+++ b/src/pages/ProductDetail/ProductPage.module.scss
@@ -329,8 +329,8 @@
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.7) 0%,
-    rgba(0, 0, 0, 0.3) 70%,
-    rgba(255, 255, 255, 0) 100%
+    rgba(0, 0, 0, 0.3) 35%,
+    rgba(255, 255, 255, 0) 35%
  );
  z-index: 2;
  opacity: 0;
@@ -386,9 +386,6 @@
 }

 .productDescriptionCollapsed {
-  display: -webkit-box;
-  -webkit-line-clamp: 10;
-  -webkit-box-orient: vertical;
  overflow: hidden;
 }

--- a/src/pages/ProductDetail/index.jsx
+++ b/src/pages/ProductDetail/index.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams, useNavigate, Link } from "react-router-dom";
 import styles from "./ProductPage.module.scss";
 import { IoMdHeartEmpty, IoMdHeart } from "react-icons/io";
 import { FaShoppingCart } from "react-icons/fa";
@@ -27,6 +27,9 @@ import ImageCarousel from "../../components/ProductCard/imageCarousel/index";
 import Loader from "../../components/Loader/index";
 import { Result, Button } from "antd";
 import { div } from "framer-motion/client";
+import PendingPriceBadge from "../../components/PendingPriceBadge";
+
+const isPriceZero = (price) => !price || parseFloat(price) === 0;

 const ProductPage = ({
  productProp,
@@ -66,14 +69,78 @@ const ProductPage = ({

  const [isDescExpanded, setIsDescExpanded] = useState(false);
  const [showReadMore, setShowReadMore] = useState(false);
+  const [collapsedMaxHeight, setCollapsedMaxHeight] = useState(null);
  const descRef = React.useRef(null);
  const productInfoRef = React.useRef(null);
+  const imageColRef = React.useRef(null);

+  // Ürün değişince desc'i kapat
+  useEffect(() => {
+    setIsDescExpanded(false);
+  }, [productId]);
+
+  // Resim kolonu yüksekliği ile desc kolonu yüksekliğini karşılaştır
  useEffect(() => {
    if (!product?.description) return;

-    const plainText = product.description.replace(/<[^>]*>/g, "").trim();
-    setShowReadMore(plainText.length > 300);
+    const imageEl = imageColRef.current;
+    const infoEl = productInfoRef.current;
+    if (!imageEl || !infoEl) return;
+
+    const checkHeights = () => {
+      const descEl = descRef.current;
+      if (!descEl) return;
+
+      const descTrueH = descEl.scrollHeight;
+      const descVisibleH = descEl.getBoundingClientRect().height;
+
+      // ── Mobil: tek kolon layout, sabit eşik kullan ──────────────────
+      if (window.innerWidth <= 639) {
+        const MOBILE_THRESHOLD = 220;
+        if (descTrueH > MOBILE_THRESHOLD) {
+          setShowReadMore(true);
+          setCollapsedMaxHeight(MOBILE_THRESHOLD);
+        } else {
+          setShowReadMore(false);
+          setCollapsedMaxHeight(null);
+        }
+        return;
+      }
+
+      // ── Desktop/tablet: resim kolonu yüksekliğiyle karşılaştır ──────
+      const imageH = imageEl.getBoundingClientRect().height;
+      if (imageH === 0) return;
+
+      const infoCurrentH = infoEl.getBoundingClientRect().height;
+      // Info kolonunun gerçek (kısıtsız) yüksekliği:
+      const infoTrueH = infoCurrentH + (descTrueH - descVisibleH);
+
+      if (infoTrueH > imageH) {
+        const overflow = infoTrueH - imageH;
+        const newDescMaxH = Math.max(descTrueH - overflow, 60);
+        setShowReadMore(true);
+        setCollapsedMaxHeight(newDescMaxH);
+      } else {
+        setShowReadMore(false);
+        setCollapsedMaxHeight(null);
+      }
+    };
+
+    // İlk kontrol (DOM yerleştikten sonra)
+    const raf = requestAnimationFrame(checkHeights);
+
+    const ro = new ResizeObserver(checkHeights);
+    ro.observe(imageEl);
+    ro.observe(infoEl);
+
+    // Mobil↔desktop geçişi için window resize de dinlenir
+    window.addEventListener("resize", checkHeights);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+      window.removeEventListener("resize", checkHeights);
+    };
  }, [product?.description]);

  const { getCartItem } = useCart();
@@ -322,7 +389,7 @@ const ProductPage = ({
      {/* ── 3 kolon ana section ── */}
      <div className={styles.productSection}>
        {/* KOLON 1: Resim */}
-        <div className={styles.productImage}>
+        <div className={styles.productImage} ref={imageColRef}>
          <ImageCarousel
            images={product.media}
            altText={product.name}
@@ -363,12 +430,23 @@ const ProductPage = ({
            )}

            {product.channel?.[0]?.name && (
-              <div className={styles.metaItem}>
+              
+                <Link to={`/channel/${product.channel[0].id}`} target="_blank" state={{ clearFilters: true }} className={styles.metaItem}>
                <span className={styles.metaLabel}>{t("order.channel")}</span>
                <span className={styles.metaValue}>
                  {product.channel[0].name}
                </span>
-              </div>
+                </Link>
+              
+            )}
+
+            {product.properties?.length > 0 && (
+              product.properties.map((prop, index) => (
+                <div key={`${prop.attribute_id}-${index}`} className={styles.metaItem}>
+                  <span className={styles.metaLabel}>{prop.name}</span>
+                  <span className={styles.metaValue}>{prop.value}</span>
+                </div>
+              ))
            )}
          </div>

@@ -396,6 +474,11 @@ const ProductPage = ({
                  className={`${styles.productDescription} ${
                    !isDescExpanded && showReadMore ? styles.productDescriptionCollapsed : ""
                  }`}
+                  style={
+                    !isDescExpanded && showReadMore && collapsedMaxHeight
+                      ? { maxHeight: `${collapsedMaxHeight}px` }
+                      : undefined
+                  }
                  dangerouslySetInnerHTML={{ __html: product.description }}
                />
                {showReadMore && !isDescExpanded && (
@@ -426,11 +509,19 @@ const ProductPage = ({
            <div className={styles.priceRow}>
              <span className={styles.priceLabel}>{t("product.price")}:</span>
              <div className={styles.priceRight}>
-                <span className={styles.price}>{product.price_amount} m.</span>
-                {product.old_price_amount && (
-                  <span className={styles.oldPrice}>
-                    {product.old_price_amount} m.
+                {isPriceZero(product.price_amount) ? (
+                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 600 }}>
+                     <PendingPriceBadge />
                  </span>
+                ) : (
+                  <>
+                    <span className={styles.price}>{product.price_amount} m.</span>
+                    {product.old_price_amount && (
+                      <span className={styles.oldPrice}>
+                        {product.old_price_amount} m.
+                      </span>
+                    )}
+                  </>
                )}
              </div>
            </div>
@@ -444,11 +535,19 @@ const ProductPage = ({
      {/* ── Mobile sticky bar ── */}
      <div className={styles.productActionsMobile}>
        <div className={styles.mobilePriceContainer}>
-          <span className={styles.price}>{product.price_amount} m.</span>
-          {product.old_price_amount && (
-            <span className={styles.oldPrice}>
-              {product.old_price_amount} m.
+          {isPriceZero(product.price_amount) ? (
+            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 600 }}>
+              {t("cart.pendingPriceTitle")} <PendingPriceBadge />
            </span>
+          ) : (
+            <>
+              <span className={styles.price}>{product.price_amount} m.</span>
+              {product.old_price_amount && (
+                <span className={styles.oldPrice}>
+                  {product.old_price_amount} m.
+                </span>
+              )}
+            </>
          )}
        </div>
        <div className={styles.mobileBtnContainer}>
--- a/src/pages/Stores/Stores.module.scss
+++ b/src/pages/Stores/Stores.module.scss
@@ -0,0 +1,143 @@
+.storesContainer {
+  padding: 1rem 4.4rem;
+  max-width: 1336px;
+  margin: 0 auto;
+  @media screen and (max-width: 1023px) {
+    padding: 1rem 1.25rem;
+  }
+}
+
+.searchWrapper {
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  svg {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    transform: translateX(35%);
+    color: #9ca3af;
+  }
+
+  input {
+    width: 46%;
+    height: 38px;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    font-size: 14px;
+    padding-left: 40px;
+    outline: none;
+    @media screen and (max-width: 1023px) {
+      width: 100%;
+    }
+
+    &::placeholder {
+      color: #9ca3af;
+    }
+  }
+}
+
+.categorySection {
+  margin-bottom: 40px;
+
+  h2 {
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #111827;
+    cursor: pointer;
+    &:hover {
+      color: #aaaaaa;
+    }
+  }
+}
+
+.storesGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 180px));
+  gap: 16px;
+  @media screen and (max-width: 1023px) {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 10px;
+  }
+  @media screen and (max-width: 900px) {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 5px;
+  }
+  @media screen and (max-width: 798px) {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 5px;
+  }
+}
+
+.storeCard {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+  transition: all 0.2s ease;
+  border: 1px solid #e5e7eb;
+  cursor: pointer;
+  @media screen and (max-width: 900px) {
+    padding: 5px;
+  }
+
+  &:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+  }
+
+  .imageWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 12px;
+    position: relative;
+    aspect-ratio: 4/3;
+
+    img {
+       height: 100%;
+      object-fit:contain;
+    }
+  }
+
+  .placeholder {
+    width: 80px;
+    height: 80px;
+    background: #f3f4f6;
+    border-radius: 8px;
+  }
+
+  .storeName {
+    font-size: 16px;
+    color: #374151;
+    margin: 0;
+  }
+}
+
+.skeleton {
+  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+
+.logoFallback {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 120px;
+  height: 100%;
+  border-radius: 4px;
+  object-fit: contain;
+}
--- a/src/pages/Stores/index.jsx
+++ b/src/pages/Stores/index.jsx
@@ -0,0 +1,202 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useLazyGetChannelsQuery } from "../../app/api/channelsApi";
+import styles from "./Stores.module.scss";
+import { CiSearch } from "react-icons/ci";
+import { useNavigate } from "react-router-dom";
+import { Logo } from "../../components/Icons";
+import Loader from "../../components/Loader/index";
+import { Result, Button } from "antd";
+
+const StoresPage = () => {
+  const { t } = useTranslation();
+  const [searchTerm, setSearchTerm] = useState("");
+  const navigate = useNavigate();
+  
+  // Stores data state
+  const [allStores, setAllStores] = useState([]);
+  const [visibleStores, setVisibleStores] = useState([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const itemsPerPage = 24;
+
+  // Use lazy query to have more control over when to fetch
+  const [getChannels, { data: channelsData, isLoading, isFetching, error }] =
+    useLazyGetChannelsQuery();
+
+  // Initial fetch on component mount
+  useEffect(() => {
+    getChannels({ page: 1, perPage: itemsPerPage });
+  }, [getChannels]);
+
+  // Process stores data when it arrives
+  useEffect(() => {
+    if (channelsData) {
+      const stores = channelsData.data || [];
+      const pagination = channelsData.pagination || {};
+      
+      console.log("Stores Data Received:", { 
+        count: stores.length, 
+        page, 
+        pagination 
+      });
+
+      setAllStores((prev) => {
+        const existingIds = new Set(prev.map((store) => store.id));
+        const newStores = stores.filter(
+          (store) => !existingIds.has(store.id)
+        );
+        return [...prev, ...newStores];
+      });
+
+      // More robust hasMore logic
+      const hasNext = pagination.next_page_url || 
+                      (pagination.current_page && pagination.last_page && pagination.current_page < pagination.last_page) ||
+                      (stores.length === itemsPerPage);
+      
+      setHasMore(!!hasNext);
+    }
+  }, [channelsData, page, itemsPerPage]);
+
+  // Process stores for display whenever all stores or search term changes
+  useEffect(() => {
+    if (allStores.length > 0) {
+      const filteredStores = searchTerm
+        ? allStores.filter((store) =>
+            store.name.toLowerCase().includes(searchTerm.toLowerCase())
+          )
+        : allStores;
+
+      // Grouping logic (similar to Brands, but defaults to "Stores")
+      const groupedStores = filteredStores.reduce((acc, store) => {
+        const type = store.type || "Stores";
+        if (!acc[type]) {
+          acc[type] = [];
+        }
+        acc[type].push(store);
+        return acc;
+      }, {});
+
+      const displayGroups = Object.entries(groupedStores)
+        .map(([type, stores]) => ({
+          title: type === "Stores" ? t("navbar.stores") : type.charAt(0).toUpperCase() + type.slice(1),
+          stores,
+        }))
+        .filter((group) => group.stores.length > 0);
+        
+      setVisibleStores(displayGroups);
+      if (searchTerm) {
+        setHasMore(false);
+      }
+    }
+  }, [allStores, searchTerm, t]);
+
+  const loadMoreStores = () => {
+    if (!searchTerm && !isFetching && hasMore && allStores.length > 0) {
+      const nextPage = page + 1;
+      getChannels({ page: nextPage, perPage: itemsPerPage });
+      setPage(nextPage);
+    }
+  };
+
+  const handleSearch = (e) => {
+    const value = e.target.value;
+    setSearchTerm(value);
+    setPage(1);
+    setAllStores([]);
+    setHasMore(true);
+    getChannels({ page: 1, perPage: itemsPerPage, search: value });
+  };
+
+  const handleStoreClick = (storeId) => {
+    navigate(`/channel/${storeId}`);
+  };
+
+  if (isLoading && page === 1) return <Loader />;
+  if (error)
+    return (
+      <Result
+        status="500"
+        title="500"
+        subTitle={t("common.error_occurred") || "Näbelli ýalňyşlyk ýüze çykdy."}
+        extra={
+          <Button type="primary" onClick={() => navigate("/")}>
+            {t("common.back_to_home") || "Baş sahypa gidiň"}
+          </Button>
+        }
+      />
+    );
+
+  return (
+    <div className={styles.storesContainer}>
+      <div className={styles.searchWrapper}>
+        <CiSearch />
+        <input
+          type="text"
+          placeholder={t("common.search")}
+          value={searchTerm}
+          onChange={handleSearch}
+        />
+      </div>
+
+      <InfiniteScroll
+        dataLength={allStores.length}
+        next={loadMoreStores}
+        hasMore={hasMore && !searchTerm}
+        loader={<div style={{ textAlign: 'center', padding: '20px' }}><Loader /></div>}
+      >
+        {visibleStores.map((group, index) => (
+          <section key={index} className={styles.categorySection}>
+            <h2>{group.title}</h2>
+
+            <div className={styles.storesGrid}>
+              {group.stores.map((store) => (
+                <div
+                  key={store.id}
+                  className={styles.storeCard}
+                  onClick={() => handleStoreClick(store.id)}
+                >
+                  <div className={styles.imageWrapper}>
+                    {store.media?.[0]?.thumbnail ||
+                    store.media?.[0]?.images_800x800 ||
+                    store.logo ? (
+                      <img
+                        src={
+                          store.media?.[0]?.thumbnail ||
+                          store.media?.[0]?.images_800x800 ||
+                          store.logo
+                        }
+                        alt={store.name}
+                        width={120}
+                        height={120}
+                        onError={(e) => {
+                          e.target.style.display = "none";
+                          e.target.nextSibling.style.display = "flex";
+                        }}
+                      />
+                    ) : (
+                      <div className={styles.logoFallback}>
+                        <Logo width={60} height={60} />
+                      </div>
+                    )}
+                    <div
+                      className={styles.logoFallback}
+                      style={{ display: "none" }}
+                    >
+                      <Logo width={60} height={60} />
+                    </div>
+                  </div>
+                  <div className={styles.divider}></div>
+                  <h3 className={styles.storeName}>{store.name}</h3>
+                </div>
+              ))}
+            </div>
+          </section>
+        ))}
+      </InfiniteScroll>
+    </div>
+  );
+};
+
+export default StoresPage;
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -3,6 +3,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
 import CategorySection from "../../components/CategorySection/index";
 import Carousel from "../../components/Banner/index";
 import CategoryCarousel from "../../components/CategoryCarousel/CategoryCarousel";
+import HomeBrands from "../../components/HomeBrands/index";
 import FlashSales from "../../components/FlashSales";
 import styles from "./Home.module.scss";
 import { useGetCollectionsQuery } from "../../app/api/collectionsApi";
@@ -98,6 +99,7 @@ const Home = () => {
    <div className={styles.home}>
      <Carousel />
      <CategoryCarousel />
+      <HomeBrands />
      <FlashSales />
      <div className={styles.sections}>
        <InfiniteScroll
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -21,6 +21,7 @@ const DeliveryTerms = lazy(() => import("./pages/DeliveryTerms/index.jsx"));
 const AboutUs = lazy(() => import("./pages/AboutUs/index.jsx"));
 const PrivacyPolicy = lazy(() => import("./pages/PrivacyPolicy/index.jsx"));
 const AdminPage = lazy(() => import("./pages/CarconfiguratorAdmin/index.jsx"));
+const StoresPage = lazy(() => import("./pages/Stores/index.jsx"));

 export default function Router() {
  const routes = useRoutes([
@@ -34,12 +35,14 @@ export default function Router() {
      children: [
        { path: "/", element: <Home /> },
        { path: "/brands", element: <BrandsPage /> },
+        { path: "/stores", element: <StoresPage /> },
        { path: "/brands/:brandId", element: <Category /> },
        { path: "/cart", element: <CartPage /> },
        { path: "/wishlist", element: <WishList /> },
        { path: "/category/:categoryId", element: <Category /> },
        { path: "/search", element: <Category /> },
        { path: "/collections/:collectionId", element: <Category /> },
+        { path: "/channel/:channelId", element: <Category /> },
        { path: "/product/:productId", element: <ProductDetail /> },
        { path: "/profile", element: <ProfileMenu /> },
        { path: "/orders", element: <Orders /> },
Author	SHA1	Message	Date
@jcarymuhammedow	8f3079801b	fixed some bugs	2026-05-02 14:28:50 +05:00
Jelaletdin12	684ab6917d	added store to navbar	2026-04-30 23:17:44 +05:00
@jcarymuhammedow	6cdde96c61	added channels products	2026-04-30 16:15:29 +05:00
Jelaletdin12	9419ec0af0	added baha anyklmak, attributes	2026-04-30 10:44:08 +05:00
Jelaletdin12	cc89455967	added baha tassyklamak	2026-04-26 22:07:09 +05:00