From 53904ead051165e12c65315ec511d9b411968fa5 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Thu, 8 Jan 2026 13:01:54 +0700
Subject: [PATCH] Fix: offers map coords, map position, orders filter,
 select-location layout

---
 app/components/page/CatalogPage.vue |   2 +-
 app/composables/useTeamOrders.ts    |  10 +-
 app/pages/catalog/offers/index.vue  |   9 +-
 app/pages/select-location/index.vue | 162 +++++++++++++---------------
 4 files changed, 88 insertions(+), 95 deletions(-)

diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 0e0e54e..6bdd001 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -47,7 +47,7 @@
 
           <!-- Right: Map (fixed position) -->
           <div class="w-3/5 relative">
-            <div class="fixed top-28 right-6 w-[calc(60%-3rem)] h-[calc(100vh-8rem)] rounded-lg overflow-hidden">
+            <div class="fixed top-32 right-6 w-[calc(60%-3rem)] h-[calc(100vh-9rem)] rounded-lg overflow-hidden">
               <ClientOnly>
                 <CatalogMap
                   ref="mapRef"
diff --git a/app/composables/useTeamOrders.ts b/app/composables/useTeamOrders.ts
index 20a9f7a..280af11 100644
--- a/app/composables/useTeamOrders.ts
+++ b/app/composables/useTeamOrders.ts
@@ -7,11 +7,11 @@ export function useTeamOrders() {
   const { execute } = useGraphQL()
 
   const filters = computed(() => [
-    { key: 'all', label: t('ordersList.filters.all') },
-    { key: 'pending', label: t('ordersList.filters.pending') },
-    { key: 'processing', label: t('ordersList.filters.processing') },
-    { key: 'in_transit', label: t('ordersList.filters.in_transit') },
-    { key: 'delivered', label: t('ordersList.filters.delivered') }
+    { id: 'all', label: t('ordersList.filters.all') },
+    { id: 'pending', label: t('ordersList.filters.pending') },
+    { id: 'processing', label: t('ordersList.filters.processing') },
+    { id: 'in_transit', label: t('ordersList.filters.in_transit') },
+    { id: 'delivered', label: t('ordersList.filters.delivered') }
   ])
 
   const selectedFilter = ref('all')
diff --git a/app/pages/catalog/offers/index.vue b/app/pages/catalog/offers/index.vue
index c3cd012..aaf8a3e 100644
--- a/app/pages/catalog/offers/index.vue
+++ b/app/pages/catalog/offers/index.vue
@@ -1,6 +1,6 @@
 <template>
   <CatalogPage
-    :items="items"
+    :items="itemsForMap"
     :loading="isLoading || productsLoading"
     map-id="offers-map"
     point-color="#f59e0b"
@@ -64,6 +64,13 @@ const {
   setProductUuid
 } = useCatalogOffers()
 
+// Map items with correct coordinate field names
+const itemsForMap = computed(() => items.value.map(offer => ({
+  ...offer,
+  latitude: offer.locationLatitude,
+  longitude: offer.locationLongitude
+})))
+
 // Product filter options
 const productFilters = computed(() => {
   const all = [{ id: 'all', label: t('catalogOffersSection.filters.all_products') }]
diff --git a/app/pages/select-location/index.vue b/app/pages/select-location/index.vue
index bf32c5d..8268caa 100644
--- a/app/pages/select-location/index.vue
+++ b/app/pages/select-location/index.vue
@@ -1,86 +1,78 @@
 <template>
-  <div class="container mx-auto px-4 py-8">
-    <PageHeader :title="t('common.selectLocation')">
-      <template #actions>
-        <button class="btn btn-ghost" @click="router.back()">
-          <Icon name="lucide:x" size="20" />
-        </button>
-      </template>
-    </PageHeader>
-
-    <Stack gap="8" class="mt-6">
-      <!-- My addresses -->
-      <Stack v-if="isAuthenticated && teamAddresses?.length" gap="4">
-        <Heading :level="3">{{ t('profileAddresses.header.title') }}</Heading>
-        <Grid :cols="1" :md="2" :gap="4">
-          <Card
-            v-for="addr in teamAddresses"
-            :key="addr.uuid"
-            padding="small"
-            interactive
-            :class="{ 'ring-2 ring-primary': isSelected('address', addr.uuid) }"
-            @click="selectAddress(addr)"
-          >
-            <Stack gap="2">
-              <Stack direction="row" align="center" gap="2">
-                <Icon name="lucide:map-pin" size="18" class="text-primary" />
-                <Text size="base" weight="semibold">{{ addr.name }}</Text>
-                <Pill v-if="addr.isDefault" variant="outline" size="sm">Default</Pill>
-              </Stack>
-              <Text tone="muted" size="sm">{{ addr.address }}</Text>
-            </Stack>
-          </Card>
-        </Grid>
-      </Stack>
-
-      <!-- Hubs -->
+  <CatalogPage
+    :items="itemsWithCoords"
+    :loading="isLoading"
+    map-id="select-location-map"
+    point-color="#10b981"
+    :selected-id="selectedHubId"
+    v-model:hovered-id="hoveredHubId"
+    @select="selectHub"
+  >
+    <template #header>
       <Stack gap="4">
-        <Heading :level="3">{{ t('catalogMap.hubsTab') }}</Heading>
-
-        <NuxtLink :to="localePath('/select-location/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
-          <ClientOnly>
-            <MapboxGlobe
-              map-id="select-location-map"
-              :locations="itemsWithCoords"
-              :height="192"
-            />
-          </ClientOnly>
-        </NuxtLink>
-
-        <CatalogFilters :filters="filters" v-model="selectedFilter" />
-
-        <div v-if="isLoading" class="flex items-center justify-center p-8">
-          <span class="loading loading-spinner loading-lg" />
+        <!-- Back button -->
+        <div class="flex justify-between items-center">
+          <Heading :level="2">{{ t('common.selectLocation') }}</Heading>
+          <button class="btn btn-ghost btn-sm" @click="router.back()">
+            <Icon name="lucide:x" size="20" />
+          </button>
         </div>
 
-        <EmptyState
-          v-else-if="!items?.length"
-          :title="t('catalogMap.noHubs')"
-        />
+        <!-- My addresses section -->
+        <Stack v-if="isAuthenticated && teamAddresses?.length" gap="3">
+          <Text weight="semibold">{{ t('profileAddresses.header.title') }}</Text>
+          <Stack gap="2">
+            <Card
+              v-for="addr in teamAddresses"
+              :key="addr.uuid"
+              padding="sm"
+              interactive
+              :class="{ 'ring-2 ring-primary': isSelected('address', addr.uuid) }"
+              @click="selectAddress(addr)"
+            >
+              <Stack gap="1">
+                <Stack direction="row" align="center" gap="2">
+                  <Icon name="lucide:map-pin" size="16" class="text-primary" />
+                  <Text size="sm" weight="semibold">{{ addr.name }}</Text>
+                  <Pill v-if="addr.isDefault" variant="outline" size="sm">Default</Pill>
+                </Stack>
+                <Text tone="muted" size="xs">{{ addr.address }}</Text>
+              </Stack>
+            </Card>
+          </Stack>
+        </Stack>
 
-        <template v-else>
-          <Grid :cols="1" :md="2" :gap="4">
-            <HubCard
-              v-for="hub in items"
-              :key="hub.uuid"
-              :hub="hub"
-              selectable
-              :is-selected="isSelected('hub', hub.uuid)"
-              @select="selectHub(hub)"
-            />
-          </Grid>
-
-          <PaginationLoadMore
-            :shown="items.length"
-            :total="total"
-            :can-load-more="canLoadMore"
-            :loading="isLoadingMore"
-            @load-more="loadMore"
-          />
-        </template>
+        <!-- Hubs section header -->
+        <Text weight="semibold">{{ t('catalogMap.hubsTab') }}</Text>
       </Stack>
-    </Stack>
-  </div>
+    </template>
+
+    <template #filters>
+      <CatalogFilterSelect :filters="filters" v-model="selectedFilter" />
+    </template>
+
+    <template #card="{ item }">
+      <HubCard
+        :hub="item"
+        selectable
+        :is-selected="isSelected('hub', item.uuid)"
+      />
+    </template>
+
+    <template #pagination>
+      <PaginationLoadMore
+        :shown="items.length"
+        :total="total"
+        :can-load-more="canLoadMore"
+        :loading="isLoadingMore"
+        @load-more="loadMore"
+      />
+    </template>
+
+    <template #empty>
+      <EmptyState :title="t('catalogMap.noHubs')" />
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -113,6 +105,10 @@ const {
   init
 } = useCatalogHubs()
 
+// Selected/hovered hub for map
+const selectedHubId = ref<string>()
+const hoveredHubId = ref<string>()
+
 await init()
 
 // Load team addresses
@@ -151,7 +147,7 @@ const goToRequestIfReady = () => {
 }
 
 const selectHub = async (hub: any) => {
-  console.log('[selectHub] called', { hub, isSearchMode: isSearchMode.value })
+  selectedHubId.value = hub.uuid
 
   if (isSearchMode.value) {
     searchStore.setLocation(hub.name)
@@ -162,13 +158,9 @@ const selectHub = async (hub: any) => {
   }
 
   try {
-    console.log('[selectHub] calling locationStore.select')
     const success = await locationStore.select('hub', hub.uuid, hub.name, hub.latitude, hub.longitude)
-    console.log('[selectHub] result:', success)
     if (success) {
       router.back()
-    } else {
-      console.error('[selectHub] Selection failed - success=false')
     }
   } catch (e) {
     console.error('[selectHub] Error:', e)
@@ -176,8 +168,6 @@ const selectHub = async (hub: any) => {
 }
 
 const selectAddress = async (addr: any) => {
-  console.log('[selectAddress] called', { addr, isSearchMode: isSearchMode.value })
-
   if (isSearchMode.value) {
     searchStore.setLocation(addr.address || addr.name)
     searchStore.setLocationUuid(addr.uuid)
@@ -187,13 +177,9 @@ const selectAddress = async (addr: any) => {
   }
 
   try {
-    console.log('[selectAddress] calling locationStore.select')
     const success = await locationStore.select('address', addr.uuid, addr.name, addr.latitude, addr.longitude)
-    console.log('[selectAddress] result:', success)
     if (success) {
       router.back()
-    } else {
-      console.error('[selectAddress] Selection failed - success=false')
     }
   } catch (e) {
     console.error('[selectAddress] Error:', e)