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/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>