From 984daa7a84d1d558aa60b71bf95a914fc41f0444 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Wed, 28 Jan 2026 09:19:01 +0700
Subject: [PATCH] refactor(clientarea): use CatalogPage with #panel slot for
 orders/addresses

- Add panelWidth and hideViewToggle props to CatalogPage
- Update orders page to use CatalogPage with narrow panel (w-50)
- Update addresses page to use CatalogPage with narrow panel (w-50)
- Remove unused ClientAreaMapPage component
---
 app/components/page/CatalogPage.vue       |  15 +-
 app/components/page/ClientAreaMapPage.vue | 294 ----------------------
 app/pages/clientarea/addresses/index.vue  | 132 +++++++---
 app/pages/clientarea/orders/index.vue     | 189 +++++++-------
 4 files changed, 205 insertions(+), 425 deletions(-)
 delete mode 100644 app/components/page/ClientAreaMapPage.vue

diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 595cf6d..74e46f8 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -65,8 +65,8 @@
     </label>
 
 
-    <!-- View toggle (top RIGHT overlay, below header) - hide in info mode -->
-    <div v-if="!isInfoMode" class="absolute top-[116px] right-4 z-20 hidden lg:flex items-center gap-2">
+    <!-- View toggle (top RIGHT overlay, below header) - hide in info mode or when hideViewToggle -->
+    <div v-if="!isInfoMode && !hideViewToggle" class="absolute top-[116px] right-4 z-20 hidden lg:flex items-center gap-2">
       <!-- View mode toggle -->
       <div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
         <button
@@ -106,7 +106,8 @@
     <Transition name="slide-left">
       <div
         v-if="isPanelOpen"
-        class="absolute top-[116px] left-4 bottom-4 z-30 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
+        class="absolute top-[116px] left-4 bottom-4 z-30 max-w-[calc(100vw-2rem)] hidden lg:block"
+        :class="panelWidth"
       >
         <div class="bg-black/50 backdrop-blur-md rounded-xl shadow-lg border border-white/10 h-full flex flex-col text-white">
           <slot name="panel" />
@@ -127,8 +128,8 @@
           <span>{{ $t('catalog.list') }}</span>
         </button>
 
-        <!-- Mobile view toggle - hide in info mode -->
-        <div v-if="!isInfoMode" class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
+        <!-- Mobile view toggle - hide in info mode or when hideViewToggle -->
+        <div v-if="!isInfoMode && !hideViewToggle" class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
           <button
             class="flex items-center justify-center w-8 h-8 rounded-md transition-colors"
             :class="mapViewMode === 'offers' ? 'bg-white/20' : 'hover:bg-white/10'"
@@ -252,6 +253,8 @@ const props = withDefaults(defineProps<{
   showPanel?: boolean
   filterByBounds?: boolean
   infoLoading?: boolean
+  panelWidth?: string
+  hideViewToggle?: boolean
   relatedPoints?: Array<{
     uuid: string
     name: string
@@ -269,6 +272,8 @@ const props = withDefaults(defineProps<{
   showPanel: false,
   filterByBounds: false,
   infoLoading: false,
+  panelWidth: 'w-96',
+  hideViewToggle: false,
   relatedPoints: () => []
 })
 
diff --git a/app/components/page/ClientAreaMapPage.vue b/app/components/page/ClientAreaMapPage.vue
deleted file mode 100644
index 21ee03a..0000000
--- a/app/components/page/ClientAreaMapPage.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-<template>
-  <div class="fixed inset-0 flex flex-col">
-    <!-- Loading state -->
-    <div v-if="loading" class="absolute inset-0 z-50 flex items-center justify-center bg-base-100/80">
-      <Card padding="lg">
-        <Stack align="center" justify="center" gap="3">
-          <Spinner />
-          <Text tone="muted">{{ $t('catalogLanding.states.loading') }}</Text>
-        </Stack>
-      </Card>
-    </div>
-
-    <!-- Fullscreen Map -->
-    <div class="absolute inset-0">
-      <ClientOnly>
-        <CatalogMap
-          ref="mapRef"
-          :map-id="mapId"
-          :items="itemsWithCoords"
-          :use-server-clustering="false"
-          :point-color="pointColor"
-          :hovered-item-id="hoveredId"
-          :hovered-item="hoveredItem"
-          @select-item="onMapSelect"
-          @bounds-change="onBoundsChange"
-        />
-      </ClientOnly>
-    </div>
-
-    <!-- List button (LEFT, opens panel) - hide when panel is open -->
-    <button
-      v-if="!isPanelOpen"
-      class="absolute top-[116px] left-4 z-20 hidden lg:flex items-center gap-2 bg-black/30 backdrop-blur-md rounded-lg px-3 py-1.5 border border-white/10 text-white text-sm hover:bg-black/40 transition-colors"
-      @click="isPanelOpen = true"
-    >
-      <Icon name="lucide:menu" size="16" />
-      <span>{{ $t('catalog.list') }}</span>
-    </button>
-
-    <!-- Left panel (slides from left when isPanelOpen is true) -->
-    <Transition name="slide-left">
-      <div
-        v-if="isPanelOpen"
-        class="absolute top-[116px] left-4 bottom-4 z-30 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
-      >
-        <div class="bg-black/50 backdrop-blur-md rounded-xl shadow-lg border border-white/10 h-full flex flex-col text-white overflow-hidden">
-          <!-- Panel header -->
-          <div class="p-4 border-b border-white/10 flex-shrink-0">
-            <div class="flex items-center justify-between mb-3">
-              <Text weight="semibold">{{ title }}</Text>
-              <button
-                class="btn btn-ghost btn-xs btn-circle text-white/70 hover:text-white"
-                @click="isPanelOpen = false"
-              >
-                <Icon name="lucide:x" size="16" />
-              </button>
-            </div>
-
-            <!-- Search bar -->
-            <div v-if="showSearch" class="relative">
-              <input
-                :value="searchQuery"
-                type="text"
-                :placeholder="$t('common.search')"
-                class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
-                @input="$emit('update:search-query', ($event.target as HTMLInputElement).value)"
-              />
-              <Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-white/50" />
-            </div>
-
-            <!-- Header slot for extra actions -->
-            <div v-if="$slots.header" class="mt-3">
-              <slot name="header" />
-            </div>
-          </div>
-
-          <!-- Items list -->
-          <div class="flex-1 overflow-y-auto p-4 space-y-3">
-            <template v-if="displayItems.length > 0">
-              <div
-                v-for="item in displayItems"
-                :key="item.uuid"
-                class="cursor-pointer"
-                @mouseenter="$emit('update:hovered-id', item.uuid)"
-                @mouseleave="$emit('update:hovered-id', undefined)"
-                @click="$emit('select', item)"
-              >
-                <slot name="card" :item="item" />
-              </div>
-            </template>
-            <template v-else>
-              <slot name="empty" />
-            </template>
-          </div>
-
-          <!-- Panel footer with count -->
-          <div class="p-3 border-t border-white/10 flex-shrink-0">
-            <Text size="sm" tone="muted">
-              {{ $t('catalog.showing') }} {{ displayItems.length }} {{ $t('catalog.of') }} {{ totalCount }}
-            </Text>
-          </div>
-        </div>
-      </div>
-    </Transition>
-
-    <!-- Mobile bottom sheet -->
-    <div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
-      <!-- Mobile controls: List button -->
-      <div class="flex justify-start px-4 mb-2">
-        <button
-          class="flex items-center gap-2 bg-black/30 backdrop-blur-md rounded-lg px-3 py-2 border border-white/10 text-white text-sm"
-          @click="isPanelOpen = true"
-        >
-          <Icon name="lucide:menu" size="16" />
-          <span>{{ $t('catalog.list') }}</span>
-        </button>
-      </div>
-
-      <!-- Mobile panel (collapsible) -->
-      <Transition name="slide-up">
-        <div
-          v-if="isPanelOpen"
-          class="bg-black/50 backdrop-blur-md rounded-t-xl shadow-lg border border-white/10 transition-all duration-300 text-white h-[60vh]"
-        >
-          <!-- Drag handle / close -->
-          <div
-            class="flex justify-center py-2 cursor-pointer"
-            @click="isPanelOpen = false"
-          >
-            <div class="w-10 h-1 bg-white/30 rounded-full" />
-          </div>
-
-          <div class="px-4 pb-4 overflow-y-auto h-[calc(60vh-2rem)]">
-            <!-- Search bar -->
-            <div v-if="showSearch" class="relative mb-3">
-              <input
-                :value="searchQuery"
-                type="text"
-                :placeholder="$t('common.search')"
-                class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
-                @input="$emit('update:search-query', ($event.target as HTMLInputElement).value)"
-              />
-              <Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-white/50" />
-            </div>
-
-            <!-- Header slot -->
-            <div v-if="$slots.header" class="mb-3">
-              <slot name="header" />
-            </div>
-
-            <!-- Items list -->
-            <div class="space-y-3">
-              <template v-if="displayItems.length > 0">
-                <div
-                  v-for="item in displayItems"
-                  :key="item.uuid"
-                  @click="$emit('select', item)"
-                >
-                  <slot name="card" :item="item" />
-                </div>
-              </template>
-              <template v-else>
-                <slot name="empty" />
-              </template>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
-
-interface MapItem {
-  uuid?: string | null
-  latitude?: number | null
-  longitude?: number | null
-  name?: string | null
-  [key: string]: unknown
-}
-
-const props = withDefaults(defineProps<{
-  items: MapItem[]
-  loading?: boolean
-  mapId?: string
-  pointColor?: string
-  hoveredId?: string
-  selectedId?: string
-  totalCount?: number
-  title?: string
-  showSearch?: boolean
-  searchQuery?: string
-}>(), {
-  loading: false,
-  mapId: 'client-area-map',
-  pointColor: '#6366f1',
-  totalCount: 0,
-  title: '',
-  showSearch: true,
-  searchQuery: ''
-})
-
-const emit = defineEmits<{
-  'select': [item: MapItem]
-  'bounds-change': [bounds: MapBounds]
-  'update:hovered-id': [uuid: string | undefined]
-  'update:search-query': [value: string]
-}>()
-
-// Panel state
-const isPanelOpen = ref(true)
-
-// Map ref
-const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
-
-// Filter items with search query
-const displayItems = computed(() => {
-  if (!props.searchQuery) return props.items
-  const query = props.searchQuery.toLowerCase()
-  return props.items.filter(item => {
-    const name = (item.name as string || '').toLowerCase()
-    return name.includes(query)
-  })
-})
-
-// 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)
-  }))
-)
-
-// Hovered item with coordinates for map highlight
-const hoveredItem = computed(() => {
-  if (!props.hoveredId) return null
-  const item = props.items.find(i => i.uuid === props.hoveredId)
-  if (!item?.latitude || !item?.longitude) return null
-  return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
-})
-
-const onBoundsChange = (bounds: MapBounds) => {
-  emit('bounds-change', bounds)
-}
-
-const onMapSelect = (uuid: string) => {
-  const item = props.items.find(i => i.uuid === uuid)
-  if (item) {
-    emit('select', item)
-  }
-}
-
-// Expose flyTo for external use
-const flyTo = (lat: number, lng: number, zoom = 8) => {
-  mapRef.value?.flyTo(lat, lng, zoom)
-}
-
-defineExpose({ flyTo })
-</script>
-
-<style scoped>
-/* Drawer slide animation (desktop - left) */
-.slide-left-enter-active,
-.slide-left-leave-active {
-  transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.slide-left-enter-from,
-.slide-left-leave-to {
-  transform: translateX(-100%);
-  opacity: 0;
-}
-
-/* Drawer slide animation (mobile - up) */
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.slide-up-enter-from,
-.slide-up-leave-to {
-  transform: translateY(100%);
-  opacity: 0;
-}
-</style>
diff --git a/app/pages/clientarea/addresses/index.vue b/app/pages/clientarea/addresses/index.vue
index f698c18..7affd45 100644
--- a/app/pages/clientarea/addresses/index.vue
+++ b/app/pages/clientarea/addresses/index.vue
@@ -1,54 +1,89 @@
 <template>
-  <ClientAreaMapPage
-    :items="items"
+  <CatalogPage
+    :items="mapPoints"
     :loading="isLoading"
+    :use-server-clustering="false"
     map-id="addresses-map"
     point-color="#10b981"
     :hovered-id="hoveredAddressId"
-    :total-count="items.length"
-    :title="t('cabinetNav.addresses')"
-    :search-query="searchQuery"
-    @select="onSelectAddress"
+    :show-panel="true"
+    panel-width="w-50"
+    :hide-view-toggle="true"
+    @select="onMapSelect"
     @update:hovered-id="hoveredAddressId = $event"
-    @update:search-query="searchQuery = $event"
   >
-    <template #header>
-      <NuxtLink :to="localePath('/clientarea/addresses/new')">
-        <button class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20">
-          <Icon name="lucide:plus" size="14" class="mr-1" />
-          {{ t('profileAddresses.actions.add') }}
-        </button>
-      </NuxtLink>
-    </template>
-
-    <template #card="{ item }">
-      <NuxtLink :to="localePath(`/clientarea/addresses/${item.uuid}`)" class="block">
-        <div class="bg-white/10 rounded-lg p-4 hover:bg-white/20 transition-colors">
-          <div class="flex items-start gap-3">
-            <span class="text-2xl">{{ isoToEmoji(item.countryCode) }}</span>
-            <div class="flex-1 min-w-0">
-              <div class="font-semibold truncate">{{ item.name }}</div>
-              <div class="text-sm text-white/60 line-clamp-2">{{ item.address }}</div>
-            </div>
-          </div>
+    <template #panel>
+      <!-- Panel header -->
+      <div class="p-4 border-b border-white/10 flex-shrink-0">
+        <div class="flex items-center justify-between mb-3">
+          <span class="font-semibold">{{ t('cabinetNav.addresses') }}</span>
         </div>
-      </NuxtLink>
-    </template>
 
-    <template #empty>
-      <div class="text-center py-8">
-        <div class="text-4xl mb-2">📍</div>
-        <div class="font-semibold mb-1">{{ t('profileAddresses.empty.title') }}</div>
-        <div class="text-sm text-white/60 mb-4">{{ t('profileAddresses.empty.description') }}</div>
+        <!-- Search -->
+        <div class="relative mb-3">
+          <input
+            v-model="searchQuery"
+            type="text"
+            :placeholder="t('common.search')"
+            class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
+          />
+          <Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-white/50" />
+        </div>
+
+        <!-- Add button -->
         <NuxtLink :to="localePath('/clientarea/addresses/new')">
-          <button class="btn btn-sm bg-white/10 border-white/20 text-white hover:bg-white/20">
+          <button class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20">
             <Icon name="lucide:plus" size="14" class="mr-1" />
-            {{ t('profileAddresses.empty.cta') }}
+            {{ t('profileAddresses.actions.add') }}
           </button>
         </NuxtLink>
       </div>
+
+      <!-- Addresses list -->
+      <div class="flex-1 overflow-y-auto p-3 space-y-2">
+        <template v-if="displayItems.length > 0">
+          <NuxtLink
+            v-for="item in displayItems"
+            :key="item.uuid"
+            :to="localePath(`/clientarea/addresses/${item.uuid}`)"
+            class="block"
+          >
+            <div
+              class="bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-colors cursor-pointer"
+              @mouseenter="hoveredAddressId = item.uuid"
+              @mouseleave="hoveredAddressId = undefined"
+            >
+              <div class="flex items-start gap-2">
+                <span class="text-xl">{{ isoToEmoji(item.countryCode) }}</span>
+                <div class="flex-1 min-w-0">
+                  <div class="font-semibold text-sm truncate">{{ item.name }}</div>
+                  <div class="text-xs text-white/60 line-clamp-2">{{ item.address }}</div>
+                </div>
+              </div>
+            </div>
+          </NuxtLink>
+        </template>
+        <template v-else>
+          <div class="text-center py-8">
+            <div class="text-3xl mb-2">📍</div>
+            <div class="font-semibold text-sm mb-1">{{ t('profileAddresses.empty.title') }}</div>
+            <div class="text-xs text-white/60 mb-3">{{ t('profileAddresses.empty.description') }}</div>
+            <NuxtLink :to="localePath('/clientarea/addresses/new')">
+              <button class="btn btn-sm bg-white/10 border-white/20 text-white hover:bg-white/20">
+                <Icon name="lucide:plus" size="14" class="mr-1" />
+                {{ t('profileAddresses.empty.cta') }}
+              </button>
+            </NuxtLink>
+          </div>
+        </template>
+      </div>
+
+      <!-- Footer -->
+      <div class="p-3 border-t border-white/10 flex-shrink-0">
+        <span class="text-xs text-white/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ items.length }}</span>
+      </div>
     </template>
-  </ClientAreaMapPage>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -70,7 +105,30 @@ const {
 const hoveredAddressId = ref<string>()
 const searchQuery = ref('')
 
-const onSelectAddress = (item: { uuid?: string | null }) => {
+// Map points
+const mapPoints = computed(() => {
+  return items.value
+    .filter(addr => addr.uuid && addr.latitude && addr.longitude)
+    .map(addr => ({
+      uuid: addr.uuid!,
+      name: addr.name || '',
+      latitude: Number(addr.latitude),
+      longitude: Number(addr.longitude)
+    }))
+})
+
+// Display items with search filter
+const displayItems = computed(() => {
+  if (!searchQuery.value) return items.value
+
+  const query = searchQuery.value.toLowerCase()
+  return items.value.filter(item =>
+    item.name?.toLowerCase().includes(query) ||
+    item.address?.toLowerCase().includes(query)
+  )
+})
+
+const onMapSelect = (item: { uuid?: string | null }) => {
   if (item.uuid) {
     navigateTo(localePath(`/clientarea/addresses/${item.uuid}`))
   }
diff --git a/app/pages/clientarea/orders/index.vue b/app/pages/clientarea/orders/index.vue
index 3be5d73..9dcda51 100644
--- a/app/pages/clientarea/orders/index.vue
+++ b/app/pages/clientarea/orders/index.vue
@@ -1,82 +1,92 @@
 <template>
-  <ClientAreaMapPage
-    :items="listItems"
+  <CatalogPage
+    :items="mapPoints"
     :loading="isLoading"
+    :use-server-clustering="false"
     map-id="orders-map"
     point-color="#6366f1"
     :hovered-id="hoveredOrderId"
-    :total-count="filteredItems.length"
-    :title="t('cabinetNav.orders')"
-    :search-query="searchQuery"
-    @select="onSelectOrder"
+    :show-panel="true"
+    panel-width="w-50"
+    :hide-view-toggle="true"
+    @select="onMapSelect"
     @update:hovered-id="hoveredOrderId = $event"
-    @update:search-query="searchQuery = $event"
   >
-    <template #header>
-      <!-- Filter dropdown -->
-      <div class="dropdown dropdown-end">
-        <label tabindex="0" class="btn btn-sm bg-white/10 border-white/20 text-white hover:bg-white/20">
-          <Icon name="lucide:filter" size="14" />
-          {{ selectedFilterLabel }}
-        </label>
-        <ul tabindex="0" class="dropdown-content menu menu-sm z-50 p-2 shadow bg-base-200 rounded-box w-52 mt-2">
-          <li v-for="filter in filters" :key="filter.id">
-            <a
-              :class="{ 'active': selectedFilter === filter.id }"
-              @click="selectedFilter = filter.id"
-            >{{ filter.label }}</a>
-          </li>
-        </ul>
-      </div>
-    </template>
-
-    <template #card="{ item }">
-      <div class="bg-white/10 rounded-lg p-4 hover:bg-white/20 transition-colors">
-        <div class="flex items-center justify-between mb-2">
-          <div>
-            <div class="text-xs text-white/60">{{ t('ordersList.card.order_label') }}</div>
-            <div class="font-semibold">#{{ item.name }}</div>
-          </div>
-          <div class="badge badge-outline text-xs text-white/80 border-white/30">
-            {{ getOrderStartDate(item) }}
-          </div>
+    <template #panel>
+      <!-- Panel header -->
+      <div class="p-4 border-b border-white/10 flex-shrink-0">
+        <div class="flex items-center justify-between mb-3">
+          <span class="font-semibold">{{ t('cabinetNav.orders') }}</span>
         </div>
 
-        <div class="border-t border-white/10 my-2" />
+        <!-- Search -->
+        <div class="relative mb-3">
+          <input
+            v-model="searchQuery"
+            type="text"
+            :placeholder="t('common.search')"
+            class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
+          />
+          <Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-white/50" />
+        </div>
 
-        <div class="grid grid-cols-2 gap-2 text-sm">
-          <div>
-            <div class="text-xs text-white/60">{{ t('ordersList.card.route') }}</div>
-            <div class="truncate">{{ item.sourceLocationName }} → {{ item.destinationLocationName }}</div>
-          </div>
-          <div>
-            <div class="text-xs text-white/60">{{ t('ordersList.card.status') }}</div>
-            <div class="badge badge-sm" :class="getStatusBadgeClass(item.status)">
-              {{ getStatusText(item.status) }}
+        <!-- Filter dropdown -->
+        <div class="dropdown dropdown-end w-full">
+          <label tabindex="0" class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20 justify-between">
+            <span>{{ selectedFilterLabel }}</span>
+            <Icon name="lucide:chevron-down" size="14" />
+          </label>
+          <ul tabindex="0" class="dropdown-content menu menu-sm z-50 p-2 shadow bg-base-200 rounded-box w-full mt-2">
+            <li v-for="filter in filters" :key="filter.id">
+              <a
+                :class="{ 'active': selectedFilter === filter.id }"
+                @click="selectedFilter = filter.id"
+              >{{ filter.label }}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- Orders list -->
+      <div class="flex-1 overflow-y-auto p-3 space-y-2">
+        <template v-if="displayItems.length > 0">
+          <div
+            v-for="item in displayItems"
+            :key="item.uuid"
+            class="bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-colors cursor-pointer"
+            @mouseenter="hoveredOrderId = item.uuid"
+            @mouseleave="hoveredOrderId = undefined"
+            @click="onSelectOrder(item)"
+          >
+            <div class="flex items-center justify-between mb-1">
+              <span class="font-semibold text-sm">#{{ item.name }}</span>
+              <span class="badge badge-sm" :class="getStatusBadgeClass(item.status)">
+                {{ getStatusText(item.status) }}
+              </span>
+            </div>
+            <div class="text-xs text-white/60 truncate">
+              {{ item.sourceLocationName }} → {{ item.destinationLocationName }}
+            </div>
+            <div class="text-xs text-white/50 mt-1">
+              {{ getOrderDate(item) }}
             </div>
           </div>
-        </div>
-
-        <div v-if="item.orderLines?.[0]" class="mt-2 text-sm">
-          <div class="text-xs text-white/60">{{ t('ordersList.card.product') }}</div>
-          <div>
-            {{ item.orderLines[0].productName }}
-            <span v-if="item.orderLines.length > 1" class="badge badge-ghost badge-xs ml-1">
-              +{{ item.orderLines.length - 1 }}
-            </span>
+        </template>
+        <template v-else>
+          <div class="text-center py-8">
+            <div class="text-3xl mb-2">📦</div>
+            <div class="font-semibold text-sm mb-1">{{ t('orders.no_orders') }}</div>
+            <div class="text-xs text-white/60">{{ t('orders.no_orders_desc') }}</div>
           </div>
-        </div>
+        </template>
       </div>
-    </template>
 
-    <template #empty>
-      <div class="text-center py-8">
-        <div class="text-4xl mb-2">📦</div>
-        <div class="font-semibold mb-1">{{ t('orders.no_orders') }}</div>
-        <div class="text-sm text-white/60">{{ t('orders.no_orders_desc') }}</div>
+      <!-- Footer -->
+      <div class="p-3 border-t border-white/10 flex-shrink-0">
+        <span class="text-xs text-white/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ filteredItems.length }}</span>
       </div>
     </template>
-  </ClientAreaMapPage>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -111,20 +121,22 @@ const selectedFilterLabel = computed(() => {
   return filter?.label || t('ordersList.filters.status')
 })
 
-// List items - one per order
-const listItems = computed(() => {
-  let items = filteredItems.value
-    .filter(order => order.uuid)
+// Map points - source locations
+const mapPoints = computed(() => {
+  return filteredItems.value
+    .filter(order => order.uuid && order.sourceLatitude && order.sourceLongitude)
     .map(order => ({
-      ...order,
-      uuid: order.uuid,
+      uuid: order.uuid!,
       name: order.name || `#${order.uuid!.slice(0, 8)}`,
-      latitude: order.sourceLatitude,
-      longitude: order.sourceLongitude,
-      country: order.sourceLocationName
+      latitude: order.sourceLatitude!,
+      longitude: order.sourceLongitude!
     }))
+})
+
+// Display items with search filter
+const displayItems = computed(() => {
+  let items = filteredItems.value.filter(order => order.uuid)
 
-  // Apply search filter
   if (searchQuery.value) {
     const query = searchQuery.value.toLowerCase()
     items = items.filter(item =>
@@ -137,6 +149,12 @@ const listItems = computed(() => {
   return items
 })
 
+const onMapSelect = (item: { uuid?: string | null }) => {
+  if (item.uuid) {
+    navigateTo(localePath(`/clientarea/orders/${item.uuid}`))
+  }
+}
+
 const onSelectOrder = (item: { uuid?: string | null }) => {
   if (item.uuid) {
     navigateTo(localePath(`/clientarea/orders/${item.uuid}`))
@@ -145,9 +163,16 @@ const onSelectOrder = (item: { uuid?: string | null }) => {
 
 await init()
 
-const getOrderStartDate = (order: TeamOrder) => {
-  if (!order.createdAt) return t('ordersDetail.labels.dates_undefined')
-  return formatDate(order.createdAt)
+const getOrderDate = (order: TeamOrder) => {
+  if (!order.createdAt) return ''
+  try {
+    return new Intl.DateTimeFormat('ru-RU', {
+      day: 'numeric',
+      month: 'short'
+    }).format(new Date(order.createdAt))
+  } catch {
+    return ''
+  }
 }
 
 const getStatusBadgeClass = (status?: string) => {
@@ -159,18 +184,4 @@ const getStatusBadgeClass = (status?: string) => {
     default: return 'badge-ghost'
   }
 }
-
-const formatDate = (date: string) => {
-  if (!date) return t('ordersDetail.labels.dates_undefined')
-  try {
-    const dateObj = typeof date === 'string' ? new Date(date) : date
-    if (isNaN(dateObj.getTime())) return t('ordersDetail.labels.dates_undefined')
-    return new Intl.DateTimeFormat('ru-RU', {
-      day: 'numeric',
-      month: 'short'
-    }).format(dateObj)
-  } catch {
-    return t('ordersDetail.labels.dates_undefined')
-  }
-}
 </script>