From 7c566aeafc0da58506df76c691819deccf976742 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 24 Jan 2026 11:13:22 +0700
Subject: [PATCH] Fix SelectionPanel styling + add product filtering by
 supplier/hub

- SelectionPanel header: dark glass style instead of white
- useCatalogProducts: filter by supplierId or hubId using dedicated queries
- catalog/index: connect filters from query params to composable
---
 app/components/catalog/SelectionPanel.vue | 14 ++--
 app/composables/useCatalogProducts.ts     | 81 ++++++++++++++++++++---
 app/pages/catalog/index.vue               | 23 ++++++-
 3 files changed, 101 insertions(+), 17 deletions(-)

diff --git a/app/components/catalog/SelectionPanel.vue b/app/components/catalog/SelectionPanel.vue
index 756683f..b3b64d2 100644
--- a/app/components/catalog/SelectionPanel.vue
+++ b/app/components/catalog/SelectionPanel.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col h-full -m-4">
-    <!-- Header + Search (white glass, sticky) -->
-    <div class="sticky top-0 z-10 p-4 rounded-t-xl bg-white/90 backdrop-blur-md border-b border-white/20">
+    <!-- Header + Search (dark glass, sticky) -->
+    <div class="sticky top-0 z-10 p-4 rounded-t-xl bg-black/50 backdrop-blur-md border-b border-white/10">
       <div class="flex items-center justify-between mb-2">
-        <h3 class="font-semibold text-base text-base-content">{{ title }}</h3>
-        <button class="btn btn-ghost btn-xs btn-circle text-base-content/60 hover:text-base-content" @click="emit('close')">
+        <h3 class="font-semibold text-base text-white">{{ title }}</h3>
+        <button class="btn btn-ghost btn-xs btn-circle text-white/60 hover:text-white" @click="emit('close')">
           <Icon name="lucide:x" size="16" />
         </button>
       </div>
@@ -12,7 +12,7 @@
         v-model="searchQuery"
         type="text"
         :placeholder="searchPlaceholder"
-        class="input input-sm w-full bg-white/50 border-base-300/50 text-base-content placeholder:text-base-content/50"
+        class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
       />
     </div>
 
@@ -22,7 +22,7 @@
         <span class="loading loading-spinner loading-md" />
       </div>
 
-      <div v-else-if="filteredItems.length === 0" class="text-center py-8 text-base-content/60">
+      <div v-else-if="filteredItems.length === 0" class="text-center py-8 text-white/60">
         <Icon name="lucide:search-x" size="32" class="mb-2" />
         <p>{{ $t('catalog.empty.noResults') }}</p>
       </div>
@@ -86,7 +86,7 @@
           ref="loadMoreSentinel"
           class="flex items-center justify-center py-4"
         >
-          <span v-if="loadingMore" class="loading loading-spinner loading-sm text-base-content/60" />
+          <span v-if="loadingMore" class="loading loading-spinner loading-sm text-white/60" />
         </div>
       </div>
     </div>
diff --git a/app/composables/useCatalogProducts.ts b/app/composables/useCatalogProducts.ts
index 1832025..c8c8ed5 100644
--- a/app/composables/useCatalogProducts.ts
+++ b/app/composables/useCatalogProducts.ts
@@ -1,4 +1,8 @@
-import { GetProductsDocument } from '~/composables/graphql/public/geo-generated'
+import {
+  GetProductsDocument,
+  GetProductsBySupplierDocument,
+  GetProductsNearHubDocument
+} from '~/composables/graphql/public/geo-generated'
 
 // Shared state
 const items = ref<any[]>([])
@@ -6,6 +10,10 @@ const isLoading = ref(false)
 const isLoadingMore = ref(false)
 const isInitialized = ref(false)
 
+// Filter state
+const filterSupplierUuid = ref<string | null>(null)
+const filterHubUuid = ref<string | null>(null)
+
 export function useCatalogProducts() {
   const { execute } = useGraphQL()
 
@@ -16,13 +24,37 @@ export function useCatalogProducts() {
     if (isLoading.value) return
     isLoading.value = true
     try {
-      const data = await execute(
-        GetProductsDocument,
-        {},
-        'public',
-        'geo'
-      )
-      items.value = data?.products || []
+      let data
+
+      if (filterSupplierUuid.value) {
+        // Products from specific supplier
+        data = await execute(
+          GetProductsBySupplierDocument,
+          { supplierUuid: filterSupplierUuid.value },
+          'public',
+          'geo'
+        )
+        items.value = data?.productsBySupplier || []
+      } else if (filterHubUuid.value) {
+        // Products near hub
+        data = await execute(
+          GetProductsNearHubDocument,
+          { hubUuid: filterHubUuid.value },
+          'public',
+          'geo'
+        )
+        items.value = data?.productsNearHub || []
+      } else {
+        // All products
+        data = await execute(
+          GetProductsDocument,
+          {},
+          'public',
+          'geo'
+        )
+        items.value = data?.products || []
+      }
+
       isInitialized.value = true
     } finally {
       isLoading.value = false
@@ -39,6 +71,34 @@ export function useCatalogProducts() {
     }
   }
 
+  // Filter setters
+  const setSupplierFilter = (uuid: string | null) => {
+    if (filterSupplierUuid.value !== uuid) {
+      filterSupplierUuid.value = uuid
+      filterHubUuid.value = null // clear other filter
+      isInitialized.value = false
+      fetchProducts()
+    }
+  }
+
+  const setHubFilter = (uuid: string | null) => {
+    if (filterHubUuid.value !== uuid) {
+      filterHubUuid.value = uuid
+      filterSupplierUuid.value = null // clear other filter
+      isInitialized.value = false
+      fetchProducts()
+    }
+  }
+
+  const clearFilters = () => {
+    if (filterSupplierUuid.value || filterHubUuid.value) {
+      filterSupplierUuid.value = null
+      filterHubUuid.value = null
+      isInitialized.value = false
+      fetchProducts()
+    }
+  }
+
   return {
     items,
     isLoading,
@@ -47,6 +107,9 @@ export function useCatalogProducts() {
     canLoadMore,
     fetchProducts,
     loadMore,
-    init
+    init,
+    setSupplierFilter,
+    setHubFilter,
+    clearFilters
   }
 }
diff --git a/app/pages/catalog/index.vue b/app/pages/catalog/index.vue
index e087d08..fbb778a 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -108,7 +108,17 @@ const {
 } = useCatalogSearch()
 
 // Composables for data (initialize immediately when selectMode changes)
-const { items: products, isLoading: productsLoading, isLoadingMore: productsLoadingMore, canLoadMore: productsCanLoadMore, loadMore: loadMoreProducts, init: initProducts } = useCatalogProducts()
+const {
+  items: products,
+  isLoading: productsLoading,
+  isLoadingMore: productsLoadingMore,
+  canLoadMore: productsCanLoadMore,
+  loadMore: loadMoreProducts,
+  init: initProducts,
+  setSupplierFilter,
+  setHubFilter,
+  clearFilters: clearProductFilters
+} = useCatalogProducts()
 const { items: hubs, isLoading: hubsLoading, isLoadingMore: hubsLoadingMore, canLoadMore: hubsCanLoadMore, loadMore: loadMoreHubs, init: initHubs } = useCatalogHubs()
 const { items: suppliers, isLoading: suppliersLoading, isLoadingMore: suppliersLoadingMore, canLoadMore: suppliersCanLoadMore, loadMore: loadMoreSuppliers, init: initSuppliers } = useCatalogSuppliers()
 
@@ -175,6 +185,17 @@ watch(selectMode, async (mode) => {
   }
 }, { immediate: true })
 
+// Apply filters to products based on selected supplier/hub
+watch([supplierId, hubId], ([newSupplierId, newHubId]) => {
+  if (newSupplierId) {
+    setSupplierFilter(newSupplierId)
+  } else if (newHubId) {
+    setHubFilter(newHubId)
+  } else {
+    clearProductFilters()
+  }
+}, { immediate: true })
+
 // Offers data for quote results
 const offers = ref<any[]>([])
 const offersLoading = ref(false)