Unify CatalogPage: fixed map, hover support, delete ListMapLayout

app/components/layout/ListMapLayout.vue

@@ -1,151 +0,0 @@
-<template>
-  <div class="flex flex-col flex-1 min-h-0">
-    <!-- Desktop: side-by-side layout -->
-    <div class="hidden lg:flex flex-1 gap-4 min-h-0">
-      <!-- Left side: List (scrollable) -->
-      <div class="w-2/5 overflow-y-auto pr-2">
-        <slot name="list" />
-      </div>
-
-      <!-- Right side: Map (fixed position, full height) -->
-      <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">
-          <ClientOnly>
-            <CatalogMap
-              ref="mapRef"
-              :map-id="mapId"
-              :items="itemsWithCoords"
-              :point-color="pointColor"
-              @select-item="onMapSelectItem"
-            />
-          </ClientOnly>
-        </div>
-      </div>
-    </div>
-
-    <!-- Mobile: toggle between list and map -->
-    <div class="lg:hidden flex-1 flex flex-col min-h-0">
-      <!-- Content area -->
-      <div class="flex-1 overflow-y-auto" v-show="mobileView === 'list'">
-        <slot name="list" />
-      </div>
-      <div class="flex-1" v-show="mobileView === 'map'">
-        <ClientOnly>
-          <CatalogMap
-            ref="mobileMapRef"
-            :map-id="`${mapId}-mobile`"
-            :items="itemsWithCoords"
-            :point-color="pointColor"
-            @select-item="onMapSelectItem"
-          />
-        </ClientOnly>
-      </div>
-
-      <!-- Mobile toggle buttons -->
-      <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>
-  </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[]
-  selectedItemId?: string
-  hoveredItemId?: string
-  mapId: string
-  pointColor?: string
-}>(), {
-  pointColor: '#3b82f6'
-})
-
-const emit = defineEmits<{
-  'select-item': [uuid: string]
-  'update:selectedItemId': [uuid: string]
-}>()
-
-// Filter items with valid coordinates
-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 map item selection
-const onMapSelectItem = (uuid: string) => {
-  emit('select-item', uuid)
-  emit('update:selectedItemId', uuid)
-}
-
-// Fly to a specific item
-const flyTo = (lat: number, lng: number, zoom = 8) => {
-  mapRef.value?.flyTo(lat, lng, zoom)
-  mobileMapRef.value?.flyTo(lat, lng, zoom)
-}
-
-// Fly to item by uuid
-const flyToItem = (uuid: string) => {
-  const item = itemsWithCoords.value.find(i => i.uuid === uuid)
-  if (item) {
-    flyTo(item.latitude, item.longitude, 8)
-  }
-}
-
-// Watch selectedItemId and fly to it
-watch(() => props.selectedItemId, (uuid) => {
-  if (uuid) {
-    flyToItem(uuid)
-  }
-})
-
-// Watch hoveredItemId and fly to it on hover
-watch(() => props.hoveredItemId, (uuid) => {
-  if (uuid) {
-    flyToItem(uuid)
-  }
-})
-
-// Expose methods for parent components
-defineExpose({ flyTo, flyToItem })
-</script>

app/components/page/CatalogPage.vue

@@ -19,6 +19,7 @@
           <!-- Left: List (scrollable) -->
           <div class="w-2/5 overflow-y-auto pr-2">
             <Stack gap="4">
+              <slot name="header" />
               <slot name="filters" />
 
               <Stack gap="3">
@@ -27,6 +28,8 @@
                   :key="item.uuid"
                   :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedId }"
                   @click="onItemClick(item)"
+                  @mouseenter="emit('update:hoveredId', item.uuid)"
+                  @mouseleave="emit('update:hoveredId', undefined)"
                 >
                   <slot name="card" :item="item" />
                 </div>
@@ -42,8 +45,9 @@
             </Stack>
           </div>
 
-          <!-- Right: Map -->
+          <!-- Right: Map (fixed position) -->
-          <div class="w-3/5 rounded-lg overflow-hidden">
+          <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">
               <ClientOnly>
                 <CatalogMap
                   ref="mapRef"
@@ -55,11 +59,13 @@
               </ClientOnly>
             </div>
           </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="header" />
               <slot name="filters" />
 
               <Stack gap="3">
@@ -68,6 +74,8 @@
                   :key="item.uuid"
                   :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedId }"
                   @click="onItemClick(item)"
+                  @mouseenter="emit('update:hoveredId', item.uuid)"
+                  @mouseleave="emit('update:hoveredId', undefined)"
                 >
                   <slot name="card" :item="item" />
                 </div>
@@ -120,6 +128,7 @@
       <!-- Without Map: Simple List -->
       <div v-else class="flex-1 overflow-y-auto py-4">
         <Stack gap="4">
+          <slot name="header" />
           <slot name="filters" />
 
           <Stack gap="3">
@@ -162,6 +171,7 @@ const props = withDefaults(defineProps<{
   mapId?: string
   pointColor?: string
   selectedId?: string
+  hoveredId?: string
 }>(), {
   loading: false,
   withMap: true,
@@ -172,6 +182,7 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
   'select': [item: MapItem]
   'update:selectedId': [uuid: string]
+  'update:hoveredId': [uuid: string | undefined]
 }>()
 
 // Filter items with valid coordinates for map
@@ -229,6 +240,17 @@ watch(() => props.selectedId, (uuid) => {
   }
 })
 
+// Watch hoveredId and fly to it
+watch(() => props.hoveredId, (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)

app/pages/catalog/hubs/index.vue

@@ -5,6 +5,7 @@
     map-id="hubs-map"
     point-color="#10b981"
     :selected-id="selectedHubId"
+    v-model:hovered-id="hoveredHubId"
     @select="onSelectHub"
   >
     <template #filters>
@@ -59,8 +60,9 @@ const {
   init
 } = useCatalogHubs()
 
-// Selected hub for map highlighting
+// Selected/hovered hub for map highlighting
 const selectedHubId = ref<string>()
+const hoveredHubId = ref<string>()
 
 const onSelectHub = (hub: any) => {
   selectedHubId.value = hub.uuid

app/pages/catalog/offers/index.vue

@@ -5,6 +5,7 @@
     map-id="offers-map"
     point-color="#f59e0b"
     :selected-id="selectedOfferId"
+    v-model:hovered-id="hoveredOfferId"
     @select="onSelectOffer"
   >
     <template #filters>
@@ -78,8 +79,9 @@ const onProductFilterChange = (value: string) => {
   setProductUuid(value === 'all' ? null : value)
 }
 
-// Selected offer for map highlighting
+// Selected/hovered offer for map highlighting
 const selectedOfferId = ref<string>()
+const hoveredOfferId = ref<string>()
 
 const onSelectOffer = (offer: any) => {
   selectedOfferId.value = offer.uuid

app/pages/catalog/suppliers/index.vue

@@ -5,6 +5,7 @@
     map-id="suppliers-map"
     point-color="#3b82f6"
     :selected-id="selectedSupplierId"
+    v-model:hovered-id="hoveredSupplierId"
     @select="onSelectSupplier"
   >
     <template #card="{ item }">
@@ -44,8 +45,9 @@ const {
   init
 } = useCatalogSuppliers()
 
-// Selected supplier for map highlighting
+// Selected/hovered supplier for map highlighting
 const selectedSupplierId = ref<string>()
+const hoveredSupplierId = ref<string>()
 
 const onSelectSupplier = (supplier: any) => {
   selectedSupplierId.value = supplier.uuid || supplier.teamUuid

app/pages/clientarea/addresses/index.vue

@@ -1,71 +1,40 @@
 <template>
-  <div class="flex flex-col flex-1 min-h-0">
+  <CatalogPage
-    <!-- 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('profileAddresses.states.loading') }}</Text>
-        </Stack>
-      </Card>
-    </div>
-
-    <!-- ListMapLayout -->
-    <ListMapLayout
-      v-else-if="items.length"
     :items="itemsForMap"
-      :selected-item-id="selectedAddressId"
+    :loading="isLoading"
-      :hovered-item-id="hoveredAddressId"
     map-id="addresses-map"
     point-color="#10b981"
-      @select-item="onSelectAddress"
+    :selected-id="selectedAddressId"
+    v-model:hovered-id="hoveredAddressId"
+    @select="onSelectAddress"
   >
-      <template #list>
+    <template #header>
-        <Stack gap="4">
-          <!-- Add new address button -->
       <NuxtLink :to="localePath('/clientarea/addresses/new')">
         <Button variant="outline" class="w-full">
           <Icon name="lucide:plus" size="16" class="mr-2" />
           {{ t('profileAddresses.actions.add') }}
         </Button>
       </NuxtLink>
+    </template>
 
-          <!-- Address cards -->
+    <template #card="{ item }">
-          <Stack gap="3">
       <NuxtLink
-              v-for="addr in items"
+        :to="localePath(`/clientarea/addresses/${item.uuid}`)"
-              :key="addr.uuid"
-              :to="localePath(`/clientarea/addresses/${addr.uuid}`)"
         class="block"
       >
-              <Card
+        <Card padding="sm" interactive>
-                padding="sm"
-                interactive
-                :class="{ 'ring-2 ring-primary': addr.uuid === selectedAddressId }"
-                @click.prevent="onSelectAddress(addr.uuid)"
-                @mouseenter="hoveredAddressId = addr.uuid"
-                @mouseleave="hoveredAddressId = undefined"
-              >
           <div class="flex flex-col gap-1">
-                  <Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
+            <Text size="base" weight="semibold" class="truncate">{{ item.name }}</Text>
-                  <Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
+            <Text tone="muted" size="sm" class="line-clamp-2">{{ item.address }}</Text>
             <div class="flex items-center mt-1">
-                    <span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
+              <span class="text-lg">{{ isoToEmoji(item.countryCode) }}</span>
             </div>
           </div>
         </Card>
       </NuxtLink>
-          </Stack>
-
-          <Stack v-if="items.length === 0" align="center" gap="2">
-            <Text tone="muted">{{ t('profileAddresses.empty.title') }}</Text>
-          </Stack>
-        </Stack>
     </template>
-    </ListMapLayout>
 
-    <!-- Empty state -->
+    <template #empty>
-    <div v-else class="flex-1 flex items-center justify-center">
       <EmptyState
         icon="📍"
         :title="t('profileAddresses.empty.title')"
@@ -74,8 +43,8 @@
         :action-to="localePath('/clientarea/addresses/new')"
         action-icon="lucide:plus"
       />
-    </div>
+    </template>
-  </div>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -97,19 +66,21 @@ const {
 const selectedAddressId = ref<string>()
 const hoveredAddressId = ref<string>()
 
-// Map items for ListMapLayout
+// Map items for CatalogPage
 const itemsForMap = computed(() => {
   return items.value.map(addr => ({
     uuid: addr.uuid,
     name: addr.name,
+    address: addr.address,
     latitude: addr.latitude,
     longitude: addr.longitude,
+    countryCode: addr.countryCode,
     country: addr.countryCode
   }))
 })
 
-const onSelectAddress = (uuid: string) => {
+const onSelectAddress = (item: any) => {
-  selectedAddressId.value = uuid
+  selectedAddressId.value = item.uuid
 }
 
 await init()

app/pages/clientarea/orders/index.vue

@@ -1,59 +1,27 @@
 <template>
-  <div class="flex flex-col flex-1 min-h-0">
+  <CatalogPage
-    <!-- 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('ordersList.states.loading') }}</Text>
-        </Stack>
-      </Card>
-    </div>
-
-    <!-- Error state -->
-    <div v-else-if="hasError" class="flex-1 flex items-center justify-center">
-      <Alert variant="error">
-        <Stack gap="2">
-          <Heading :level="4" weight="semibold">{{ $t('common.error') }}</Heading>
-          <Text tone="muted">{{ error }}</Text>
-          <Button @click="load">{{ t('ordersList.errors.retry') }}</Button>
-        </Stack>
-      </Alert>
-    </div>
-
-    <!-- ListMapLayout -->
-    <ListMapLayout
-      v-else-if="items.length"
     :items="itemsForMap"
-      :selected-item-id="selectedOrderId"
+    :loading="isLoading"
-      :hovered-item-id="hoveredOrderId"
     map-id="orders-map"
     point-color="#6366f1"
-      @select-item="onSelectOrder"
+    :selected-id="selectedOrderId"
+    v-model:hovered-id="hoveredOrderId"
+    @select="onSelectOrder"
   >
-      <template #list>
+    <template #filters>
-        <Stack gap="4">
+      <CatalogFilterSelect :filters="filters" v-model="selectedFilter" />
-          <CatalogFilters :filters="filters" v-model="selectedFilter" />
+    </template>
 
-          <Stack gap="4">
+    <template #card="{ item }">
-            <Card
+      <Card padding="lg" class="cursor-pointer">
-              v-for="order in filteredItems"
-              :key="order.uuid"
-              padding="lg"
-              class="cursor-pointer"
-              :class="{ 'ring-2 ring-primary': order.uuid === selectedOrderId }"
-              @click="onSelectOrder(order.uuid)"
-              @mouseenter="hoveredOrderId = order.uuid"
-              @mouseleave="hoveredOrderId = undefined"
-            >
         <Stack gap="4">
           <Stack direction="row" justify="between" align="center">
             <Stack gap="1">
               <Text size="sm" tone="muted">{{ t('ordersList.card.order_label') }}</Text>
-                    <Heading :level="3">#{{ order.name }}</Heading>
+              <Heading :level="3">#{{ item.name }}</Heading>
             </Stack>
             <div class="badge badge-outline">
-                    {{ getOrderStartDate(order) }} → {{ getOrderEndDate(order) }}
+              {{ getOrderStartDate(item) }} → {{ getOrderEndDate(item) }}
             </div>
           </Stack>
 
@@ -62,43 +30,35 @@
           <Grid :cols="1" :md="3" :gap="3">
             <Stack gap="1">
               <Text size="sm" tone="muted">{{ t('ordersList.card.route') }}</Text>
-                    <Text weight="semibold">{{ order.sourceLocationName }} → {{ order.destinationLocationName }}</Text>
+              <Text weight="semibold">{{ item.sourceLocationName }} → {{ item.destinationLocationName }}</Text>
             </Stack>
 
             <Stack gap="1">
               <Text size="sm" tone="muted">{{ t('ordersList.card.product') }}</Text>
               <Text>
-                      {{ order.orderLines?.[0]?.productName || t('ordersList.card.product_loading') }}
+                {{ item.orderLines?.[0]?.productName || t('ordersList.card.product_loading') }}
-                      <template v-if="order.orderLines?.length > 1">
+                <template v-if="item.orderLines?.length > 1">
-                        <span class="badge badge-ghost ml-2">+{{ order.orderLines.length - 1 }}</span>
+                  <span class="badge badge-ghost ml-2">+{{ item.orderLines.length - 1 }}</span>
                 </template>
               </Text>
               <Text tone="muted" size="sm">
-                      {{ order.orderLines?.[0]?.quantity || 0 }} {{ order.orderLines?.[0]?.unit || t('ordersList.card.unit_tons') }}
+                {{ item.orderLines?.[0]?.quantity || 0 }} {{ item.orderLines?.[0]?.unit || t('ordersList.card.unit_tons') }}
               </Text>
             </Stack>
 
             <Stack gap="1">
               <Text size="sm" tone="muted">{{ t('ordersList.card.status') }}</Text>
-                    <Badge :variant="getStatusVariant(order.status)">
+              <Badge :variant="getStatusVariant(item.status)">
-                      {{ getStatusText(order.status) }}
+                {{ getStatusText(item.status) }}
               </Badge>
-                    <Text tone="muted" size="sm">{{ t('ordersList.card.stages_completed', { done: getCompletedStages(order), total: order.stages?.length || 0 }) }}</Text>
+              <Text tone="muted" size="sm">{{ t('ordersList.card.stages_completed', { done: getCompletedStages(item), total: item.stages?.length || 0 }) }}</Text>
             </Stack>
           </Grid>
         </Stack>
       </Card>
-          </Stack>
-
-          <Stack v-if="filteredItems.length === 0" align="center" gap="2">
-            <Text tone="muted">{{ $t('orders.no_orders') }}</Text>
-          </Stack>
-        </Stack>
     </template>
-    </ListMapLayout>
 
-    <!-- Empty state -->
+    <template #empty>
-    <div v-else class="flex-1 flex items-center justify-center">
       <EmptyState
         icon="📦"
         :title="$t('orders.no_orders')"
@@ -107,8 +67,8 @@
         :action-to="localePath('/clientarea')"
         action-icon="lucide:plus"
       />
-    </div>
+    </template>
-  </div>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -121,25 +81,22 @@ const localePath = useLocalePath()
 const { t } = useI18n()
 
 const {
-  items,
   filteredItems,
   isLoading,
   filters,
   selectedFilter,
-  load,
   init,
   getStatusVariant,
   getStatusText
 } = useTeamOrders()
 
-const hasError = ref(false)
-const error = ref('')
 const selectedOrderId = ref<string>()
 const hoveredOrderId = ref<string>()
 
-// Map items for ListMapLayout (use source location coordinates)
+// Map items for CatalogPage (use source location coordinates)
 const itemsForMap = computed(() => {
-  return items.value.map(order => ({
+  return filteredItems.value.map(order => ({
+    ...order,
     uuid: order.uuid,
     name: order.name || `#${order.uuid.slice(0, 8)}`,
     latitude: order.sourceLatitude,
@@ -148,16 +105,11 @@ const itemsForMap = computed(() => {
   }))
 })
 
-const onSelectOrder = (uuid: string) => {
+const onSelectOrder = (item: any) => {
-  selectedOrderId.value = uuid
+  selectedOrderId.value = item.uuid
 }
 
-try {
+await init()
-  await init()
-} catch (err: any) {
-  hasError.value = true
-  error.value = err.message || t('ordersDetail.errors.load_failed')
-}
 
 const getOrderStartDate = (order: any) => {
   if (!order.createdAt) return t('ordersDetail.labels.dates_undefined')