Unify layouts and create CatalogPage component

- MainNavigation: center tabs on page (absolute positioning) - SubNavigation: align left instead of center - Create CatalogPage universal component for list+map pages - Migrate catalog pages (offers, suppliers, hubs) to CatalogPage - Remove PageHeader from clientarea pages (redundant with navigation) - Add topnav layout to supplier detail page 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-08 09:38:53 +07:00
parent f34c484561
commit b8de322dd2
9 changed files with 355 additions and 172 deletions
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -1,6 +1,6 @@
 <template>
  <header class="sticky top-0 z-40 bg-base-100 border-b border-base-300">
-    <div class="flex items-center justify-between h-16 px-4 lg:px-6">
+    <div class="relative flex items-center h-16 px-4 lg:px-6">
      <!-- Left: Logo -->
      <div class="flex items-center">
        <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
@@ -8,8 +8,8 @@
        </NuxtLink>
      </div>

-      <!-- Center: Main tabs -->
-      <nav class="hidden md:flex items-center gap-1">
+      <!-- Center: Main tabs (absolutely centered on page) -->
+      <nav class="hidden md:flex items-center gap-1 absolute left-1/2 -translate-x-1/2">
        <NuxtLink
          v-for="tab in visibleTabs"
          :key="tab.key"
@@ -22,7 +22,7 @@
      </nav>

      <!-- Right: Globe + Team + User -->
-      <div class="flex items-center gap-2">
+      <div class="flex items-center gap-2 ml-auto">
        <!-- Globe (language/currency) dropdown -->
        <div class="dropdown dropdown-end">
          <button tabindex="0" class="btn btn-ghost btn-circle">
--- a/app/components/navigation/SubNavigation.vue
+++ b/app/components/navigation/SubNavigation.vue
@@ -1,6 +1,6 @@
 <template>
  <nav v-if="items.length > 0" class="bg-base-100 border-b border-base-300">
-    <div class="flex items-center justify-center gap-1 py-2 px-4 overflow-x-auto">
+    <div class="flex items-center gap-1 py-2 px-4 lg:px-6 overflow-x-auto">
      <NuxtLink
        v-for="item in items"
        :key="item.path"
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -0,0 +1,239 @@
+<template>
+  <div class="flex flex-col flex-1 min-h-0">
+    <!-- Loading state -->
+    <div v-if="loading" class="flex-1 flex items-center justify-center">
+      <Card padding="lg">
+        <Stack align="center" justify="center" gap="3">
+          <Spinner />
+          <Text tone="muted">{{ $t('catalogLanding.states.loading') }}</Text>
+        </Stack>
+      </Card>
+    </div>
+
+    <!-- Content -->
+    <template v-else>
+      <!-- With Map: Split Layout -->
+      <template v-if="withMap">
+        <!-- Desktop: side-by-side -->
+        <div class="hidden lg:flex flex-1 gap-4 min-h-0 py-4">
+          <!-- Left: List (scrollable) -->
+          <div class="w-2/5 overflow-y-auto pr-2">
+            <Stack gap="4">
+              <slot name="filters" />
+
+              <Stack gap="3">
+                <div
+                  v-for="item in items"
+                  :key="item.uuid"
+                  :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedId }"
+                  @click="onItemClick(item)"
+                >
+                  <slot name="card" :item="item" />
+                </div>
+              </Stack>
+
+              <slot name="pagination" />
+
+              <Stack v-if="items.length === 0" align="center" gap="2">
+                <slot name="empty">
+                  <Text tone="muted">{{ $t('common.values.not_available') }}</Text>
+                </slot>
+              </Stack>
+            </Stack>
+          </div>
+
+          <!-- Right: Map -->
+          <div class="w-3/5 rounded-lg overflow-hidden">
+            <ClientOnly>
+              <CatalogMap
+                ref="mapRef"
+                :map-id="mapId"
+                :items="itemsWithCoords"
+                :point-color="pointColor"
+                @select-item="onMapSelect"
+              />
+            </ClientOnly>
+          </div>
+        </div>
+
+        <!-- Mobile: toggle between list and map -->
+        <div class="lg:hidden flex-1 flex flex-col min-h-0">
+          <div class="flex-1 overflow-y-auto py-4" v-show="mobileView === 'list'">
+            <Stack gap="4">
+              <slot name="filters" />
+
+              <Stack gap="3">
+                <div
+                  v-for="item in items"
+                  :key="item.uuid"
+                  :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedId }"
+                  @click="onItemClick(item)"
+                >
+                  <slot name="card" :item="item" />
+                </div>
+              </Stack>
+
+              <slot name="pagination" />
+
+              <Stack v-if="items.length === 0" align="center" gap="2">
+                <slot name="empty">
+                  <Text tone="muted">{{ $t('common.values.not_available') }}</Text>
+                </slot>
+              </Stack>
+            </Stack>
+          </div>
+
+          <div class="flex-1" v-show="mobileView === 'map'">
+            <ClientOnly>
+              <CatalogMap
+                ref="mobileMapRef"
+                :map-id="`${mapId}-mobile`"
+                :items="itemsWithCoords"
+                :point-color="pointColor"
+                @select-item="onMapSelect"
+              />
+            </ClientOnly>
+          </div>
+
+          <!-- Mobile toggle -->
+          <div class="fixed bottom-4 left-1/2 -translate-x-1/2 z-30">
+            <div class="btn-group shadow-lg">
+              <button
+                class="btn btn-sm"
+                :class="{ 'btn-active': mobileView === 'list' }"
+                @click="mobileView = 'list'"
+              >
+                {{ $t('common.list') }}
+              </button>
+              <button
+                class="btn btn-sm"
+                :class="{ 'btn-active': mobileView === 'map' }"
+                @click="mobileView = 'map'"
+              >
+                {{ $t('common.map') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Without Map: Simple List -->
+      <div v-else class="flex-1 overflow-y-auto py-4">
+        <Stack gap="4">
+          <slot name="filters" />
+
+          <Stack gap="3">
+            <div
+              v-for="item in items"
+              :key="item.uuid"
+              @click="onItemClick(item)"
+            >
+              <slot name="card" :item="item" />
+            </div>
+          </Stack>
+
+          <slot name="pagination" />
+
+          <Stack v-if="items.length === 0" align="center" gap="2">
+            <slot name="empty">
+              <Text tone="muted">{{ $t('common.values.not_available') }}</Text>
+            </slot>
+          </Stack>
+        </Stack>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface MapItem {
+  uuid: string
+  latitude?: number | null
+  longitude?: number | null
+  name?: string
+  country?: string
+  [key: string]: any
+}
+
+const props = withDefaults(defineProps<{
+  items: MapItem[]
+  loading?: boolean
+  withMap?: boolean
+  mapId?: string
+  pointColor?: string
+  selectedId?: string
+}>(), {
+  loading: false,
+  withMap: true,
+  mapId: 'catalog-map',
+  pointColor: '#3b82f6'
+})
+
+const emit = defineEmits<{
+  'select': [item: MapItem]
+  'update:selectedId': [uuid: string]
+}>()
+
+// Filter items with valid coordinates for map
+const itemsWithCoords = computed(() =>
+  props.items.filter(item =>
+    item.latitude != null &&
+    item.longitude != null &&
+    !isNaN(Number(item.latitude)) &&
+    !isNaN(Number(item.longitude))
+  ).map(item => ({
+    uuid: item.uuid,
+    name: item.name || '',
+    latitude: Number(item.latitude),
+    longitude: Number(item.longitude),
+    country: item.country
+  }))
+)
+
+// Mobile view toggle
+const mobileView = ref<'list' | 'map'>('list')
+
+// Map refs
+const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
+const mobileMapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
+
+// Handle item click from list
+const onItemClick = (item: MapItem) => {
+  emit('select', item)
+  emit('update:selectedId', item.uuid)
+
+  // Fly to item on map
+  if (props.withMap && item.latitude && item.longitude) {
+    mapRef.value?.flyTo(Number(item.latitude), Number(item.longitude), 8)
+    mobileMapRef.value?.flyTo(Number(item.latitude), Number(item.longitude), 8)
+  }
+}
+
+// Handle selection from map
+const onMapSelect = (uuid: string) => {
+  const item = props.items.find(i => i.uuid === uuid)
+  if (item) {
+    emit('select', item)
+    emit('update:selectedId', uuid)
+  }
+}
+
+// Watch selectedId and fly to it
+watch(() => props.selectedId, (uuid) => {
+  if (uuid && props.withMap) {
+    const item = itemsWithCoords.value.find(i => i.uuid === uuid)
+    if (item) {
+      mapRef.value?.flyTo(item.latitude, item.longitude, 8)
+      mobileMapRef.value?.flyTo(item.latitude, item.longitude, 8)
+    }
+  }
+})
+
+// Expose flyTo for external use
+const flyTo = (lat: number, lng: number, zoom = 8) => {
+  mapRef.value?.flyTo(lat, lng, zoom)
+  mobileMapRef.value?.flyTo(lat, lng, zoom)
+}
+
+defineExpose({ flyTo })
+</script>
--- a/app/pages/catalog/hubs/index.vue
+++ b/app/pages/catalog/hubs/index.vue
@@ -1,62 +1,37 @@
 <template>
-  <div class="flex flex-col flex-1 min-h-0">
-    <!-- Header -->
-    <div class="py-4">
-      <PageHeader :title="t('catalogHubsSection.header.title')" />
-    </div>
+  <CatalogPage
+    :items="items"
+    :loading="isLoading"
+    map-id="hubs-map"
+    point-color="#10b981"
+    :selected-id="selectedHubId"
+    @select="onSelectHub"
+  >
+    <template #filters>
+      <CatalogFilters :filters="filters" v-model="selectedFilter" />
+    </template>

-    <!-- Loading state -->
-    <div v-if="isLoading" class="flex-1 flex items-center justify-center">
-      <Card padding="lg">
-        <Stack align="center" justify="center" gap="3">
-          <Spinner />
-          <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
-        </Stack>
-      </Card>
-    </div>
-
-    <!-- ListMapLayout -->
-    <ListMapLayout
-      v-else
-      ref="listMapRef"
-      :items="items"
-      :selected-item-id="selectedHubId"
-      map-id="hubs-map"
-      point-color="#10b981"
-      @select-item="onSelectHub"
-    >
-      <template #list>
-        <Stack gap="4">
-          <CatalogFilters :filters="filters" v-model="selectedFilter" />
-
-          <div v-for="country in itemsByCountry" :key="country.name" class="space-y-3">
-            <Text weight="semibold">{{ country.name }}</Text>
-            <Stack gap="3">
-              <HubCard
-                v-for="hub in country.hubs"
-                :key="hub.uuid"
-                :hub="hub"
-                :class="{ 'ring-2 ring-primary': hub.uuid === selectedHubId }"
-                @click="onSelectHub(hub.uuid)"
-              />
-            </Stack>
-          </div>
-
-          <PaginationLoadMore
-            :shown="items.length"
-            :total="total"
-            :can-load-more="canLoadMore"
-            :loading="isLoadingMore"
-            @load-more="loadMore"
-          />
-
-          <Stack v-if="items.length === 0" align="center" gap="2">
-            <Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
-          </Stack>
-        </Stack>
+    <template #card="{ item }">
+      <template v-for="country in getCountryForHub(item)" :key="country.name">
+        <Text v-if="isFirstInCountry(item)" weight="semibold" class="mb-2">{{ country.name }}</Text>
      </template>
-    </ListMapLayout>
-  </div>
+      <HubCard :hub="item" />
+    </template>
+
+    <template #pagination>
+      <PaginationLoadMore
+        :shown="items.length"
+        :total="total"
+        :can-load-more="canLoadMore"
+        :loading="isLoadingMore"
+        @load-more="loadMore"
+      />
+    </template>
+
+    <template #empty>
+      <Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
+    </template>
+  </CatalogPage>
 </template>

 <script setup lang="ts">
@@ -81,10 +56,22 @@ const {

 // Selected hub for map highlighting
 const selectedHubId = ref<string>()
-const listMapRef = ref<{ flyToItem: (uuid: string) => void } | null>(null)

-const onSelectHub = (uuid: string) => {
-  selectedHubId.value = uuid
+const onSelectHub = (hub: any) => {
+  selectedHubId.value = hub.uuid
+}
+
+// Helper to get country for hub
+const getCountryForHub = (hub: any) => {
+  return itemsByCountry.value.filter(c => c.hubs.some(h => h.uuid === hub.uuid))
+}
+
+// Check if this hub is first in its country group
+const isFirstInCountry = (hub: any) => {
+  for (const country of itemsByCountry.value) {
+    if (country.hubs[0]?.uuid === hub.uuid) return true
+  }
+  return false
 }

 await init()
--- a/app/pages/catalog/offers/index.vue
+++ b/app/pages/catalog/offers/index.vue
@@ -1,17 +1,5 @@
 <template>
  <div class="flex flex-col flex-1 min-h-0">
-    <!-- Header -->
-    <div class="py-4">
-      <PageHeader :title="pageTitle">
-        <template v-if="selectedProduct" #actions>
-          <NuxtLink :to="localePath('/catalog/offers')" class="btn btn-ghost btn-sm">
-            <Icon name="lucide:arrow-left" size="16" />
-            {{ t('common.back') }}
-          </NuxtLink>
-        </template>
-      </PageHeader>
-    </div>
-
    <!-- Loading state -->
    <div v-if="isLoading || productsLoading" class="flex-1 flex items-center justify-center">
      <Card padding="lg">
@@ -46,30 +34,33 @@
      </Stack>
    </div>

-    <!-- Offers for selected product - ListMapLayout -->
-    <ListMapLayout
-      v-else
-      ref="listMapRef"
-      :items="items"
-      :selected-item-id="selectedOfferId"
-      map-id="offers-map"
-      point-color="#f59e0b"
-      @select-item="onSelectOffer"
-    >
-      <template #list>
-        <Stack gap="4">
+    <!-- Offers for selected product -->
+    <template v-else>
+      <!-- Back button -->
+      <div class="py-2 px-4 lg:px-0">
+        <NuxtLink :to="localePath('/catalog/offers')" class="btn btn-ghost btn-sm gap-2">
+          <Icon name="lucide:arrow-left" size="16" />
+          {{ t('common.back') }}
+        </NuxtLink>
+      </div>
+
+      <CatalogPage
+        :items="items"
+        :loading="isLoading"
+        map-id="offers-map"
+        point-color="#f59e0b"
+        :selected-id="selectedOfferId"
+        @select="onSelectOffer"
+      >
+        <template #filters>
          <CatalogFilters :filters="filters" v-model="selectedFilter" />
+        </template>

-          <Stack gap="3">
-            <OfferCard
-              v-for="offer in items"
-              :key="offer.uuid"
-              :offer="offer"
-              :class="{ 'ring-2 ring-primary': offer.uuid === selectedOfferId }"
-              @click="onSelectOffer(offer.uuid)"
-            />
-          </Stack>
+        <template #card="{ item }">
+          <OfferCard :offer="item" />
+        </template>

+        <template #pagination>
          <PaginationLoadMore
            :shown="items.length"
            :total="total"
@@ -77,13 +68,13 @@
            :loading="isLoadingMore"
            @load-more="loadMore"
          />
+        </template>

-          <Stack v-if="total === 0" align="center" gap="2">
-            <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
-          </Stack>
-        </Stack>
-      </template>
-    </ListMapLayout>
+        <template #empty>
+          <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
+        </template>
+      </CatalogPage>
+    </template>
  </div>
 </template>

@@ -143,11 +134,9 @@ const selectProduct = (product: any) => {

 // Selected offer for map highlighting
 const selectedOfferId = ref<string>()
-const listMapRef = ref<{ flyToItem: (uuid: string) => void } | null>(null)

-const onSelectOffer = (uuid: string) => {
-  selectedOfferId.value = uuid
-  // flyToItem will be triggered by ListMapLayout watch
+const onSelectOffer = (offer: any) => {
+  selectedOfferId.value = offer.uuid
 }

 // Initialize
--- a/app/pages/catalog/suppliers/[id].vue
+++ b/app/pages/catalog/suppliers/[id].vue
@@ -107,6 +107,10 @@ import {
  GetOffersDocument,
 } from '~/composables/graphql/public/exchange-generated'

+definePageMeta({
+  layout: 'topnav'
+})
+
 const route = useRoute()
 const localePath = useLocalePath()
 const { t } = useI18n()
--- a/app/pages/catalog/suppliers/index.vue
+++ b/app/pages/catalog/suppliers/index.vue
@@ -1,59 +1,34 @@
 <template>
-  <div class="flex flex-col flex-1 min-h-0">
-    <!-- Header -->
-    <div class="py-4">
-      <PageHeader :title="t('catalogSuppliersSection.header.title')" />
-    </div>
+  <CatalogPage
+    :items="items"
+    :loading="isLoading"
+    map-id="suppliers-map"
+    point-color="#3b82f6"
+    :selected-id="selectedSupplierId"
+    @select="onSelectSupplier"
+  >
+    <template #filters>
+      <CatalogFilters :filters="filters" v-model="selectedFilter" />
+    </template>

-    <!-- Loading state -->
-    <div v-if="isLoading" class="flex-1 flex items-center justify-center">
-      <Card padding="lg">
-        <Stack align="center" justify="center" gap="3">
-          <Spinner />
-          <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
-        </Stack>
-      </Card>
-    </div>
+    <template #card="{ item }">
+      <SupplierCard :supplier="item" />
+    </template>

-    <!-- ListMapLayout -->
-    <ListMapLayout
-      v-else
-      ref="listMapRef"
-      :items="items"
-      :selected-item-id="selectedSupplierId"
-      map-id="suppliers-map"
-      point-color="#3b82f6"
-      @select-item="onSelectSupplier"
-    >
-      <template #list>
-        <Stack gap="4">
-          <CatalogFilters :filters="filters" v-model="selectedFilter" />
+    <template #pagination>
+      <PaginationLoadMore
+        :shown="items.length"
+        :total="total"
+        :can-load-more="canLoadMore"
+        :loading="isLoadingMore"
+        @load-more="loadMore"
+      />
+    </template>

-          <Stack gap="3">
-            <SupplierCard
-              v-for="supplier in items"
-              :key="supplier.uuid || supplier.teamUuid"
-              :supplier="supplier"
-              :class="{ 'ring-2 ring-primary': (supplier.uuid || supplier.teamUuid) === selectedSupplierId }"
-              @click="onSelectSupplier(supplier.uuid || supplier.teamUuid)"
-            />
-          </Stack>
-
-          <PaginationLoadMore
-            :shown="items.length"
-            :total="total"
-            :can-load-more="canLoadMore"
-            :loading="isLoadingMore"
-            @load-more="loadMore"
-          />
-
-          <Stack v-if="total === 0" align="center" gap="2">
-            <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
-          </Stack>
-        </Stack>
-      </template>
-    </ListMapLayout>
-  </div>
+    <template #empty>
+      <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
+    </template>
+  </CatalogPage>
 </template>

 <script setup lang="ts">
@@ -77,10 +52,9 @@ const {

 // Selected supplier for map highlighting
 const selectedSupplierId = ref<string>()
-const listMapRef = ref<{ flyToItem: (uuid: string) => void } | null>(null)

-const onSelectSupplier = (uuid: string) => {
-  selectedSupplierId.value = uuid
+const onSelectSupplier = (supplier: any) => {
+  selectedSupplierId.value = supplier.uuid || supplier.teamUuid
 }

 await init()
--- a/app/pages/clientarea/addresses/index.vue
+++ b/app/pages/clientarea/addresses/index.vue
@@ -1,11 +1,6 @@
 <template>
  <Section variant="plain" paddingY="md">
    <Stack gap="6">
-      <PageHeader
-        :title="t('profileAddresses.header.title')"
-        :actions="[{ label: t('profileAddresses.actions.add'), icon: 'lucide:plus', to: localePath('/clientarea/addresses/new') }]"
-      />
-
      <Card v-if="isLoading" padding="lg">
        <Stack align="center" gap="3">
          <Spinner />
--- a/app/pages/clientarea/orders/index.vue
+++ b/app/pages/clientarea/orders/index.vue
@@ -1,11 +1,6 @@
 <template>
  <Section variant="plain" paddingY="md">
    <Stack gap="6">
-      <PageHeader
-        :title="$t('dashboard.orders')"
-        :actions="[{ label: t('ordersList.actions.new_calc'), icon: 'lucide:plus', to: localePath('/clientarea') }]"
-      />
-
      <Alert v-if="hasError" variant="error">
        <Stack gap="2">
          <Heading :level="4" weight="semibold">{{ $t('common.error') }}</Heading>