From 63e8d47b79eb6ebb15ca48331c325fc041d41024 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Wed, 28 Jan 2026 09:11:18 +0700
Subject: [PATCH] feat(clientarea): modernize orders and addresses pages with
 new map layout

- Create ClientAreaMapPage component for client area pages with glass effect
- Update orders page to use new ClientAreaMapPage with filter dropdown
- Update addresses page to use new ClientAreaMapPage with add button
- Remove Profile and Team tabs from MainNavigation (already in user menu)
---
 app/components/navigation/MainNavigation.vue |  14 -
 app/components/page/ClientAreaMapPage.vue    | 294 +++++++++++++++++++
 app/pages/clientarea/addresses/index.vue     | 104 ++-----
 app/pages/clientarea/orders/index.vue        | 270 ++++++-----------
 4 files changed, 407 insertions(+), 275 deletions(-)
 create mode 100644 app/components/page/ClientAreaMapPage.vue

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 9c831c9..0b25d1a 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -75,20 +75,6 @@
             >
               {{ $t('cabinetNav.addresses') }}
             </NuxtLink>
-            <NuxtLink
-              :to="localePath('/clientarea/profile')"
-              class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap"
-              :class="isClientAreaTabActive('/clientarea/profile') ? 'bg-primary text-primary-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'"
-            >
-              {{ $t('cabinetNav.profile') }}
-            </NuxtLink>
-            <NuxtLink
-              :to="localePath('/clientarea/team')"
-              class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap"
-              :class="isClientAreaTabActive('/clientarea/team') ? 'bg-primary text-primary-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'"
-            >
-              {{ $t('cabinetNav.team') }}
-            </NuxtLink>
           </div>
         </template>
 
diff --git a/app/components/page/ClientAreaMapPage.vue b/app/components/page/ClientAreaMapPage.vue
new file mode 100644
index 0000000..21ee03a
--- /dev/null
+++ b/app/components/page/ClientAreaMapPage.vue
@@ -0,0 +1,294 @@
+<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 a5bf0cb..f698c18 100644
--- a/app/pages/clientarea/addresses/index.vue
+++ b/app/pages/clientarea/addresses/index.vue
@@ -1,66 +1,57 @@
 <template>
-  <CatalogPage
-    :items="displayItems"
-    :map-items="itemsWithCoords"
+  <ClientAreaMapPage
+    :items="items"
     :loading="isLoading"
-    with-map
     map-id="addresses-map"
     point-color="#10b981"
-    :selected-id="selectedAddressId"
     :hovered-id="hoveredAddressId"
     :total-count="items.length"
+    :title="t('cabinetNav.addresses')"
+    :search-query="searchQuery"
     @select="onSelectAddress"
     @update:hovered-id="hoveredAddressId = $event"
+    @update:search-query="searchQuery = $event"
   >
-    <template #searchBar="{ displayedCount, totalCount }">
-      <CatalogSearchBar
-        v-model:search-query="searchQuery"
-        :active-filters="[]"
-        :displayed-count="displayedCount"
-        :total-count="totalCount"
-        @search="onSearch"
-      />
-    </template>
-
     <template #header>
       <NuxtLink :to="localePath('/clientarea/addresses/new')">
-        <Button variant="outline" class="w-full">
-          <Icon name="lucide:plus" size="16" class="mr-2" />
+        <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>
+        </button>
       </NuxtLink>
     </template>
 
     <template #card="{ item }">
       <NuxtLink :to="localePath(`/clientarea/addresses/${item.uuid}`)" class="block">
-        <Card padding="sm" interactive>
-          <div class="flex flex-col gap-1">
-            <Text size="base" weight="semibold" class="truncate">{{ item.name }}</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(item.countryCode) }}</span>
+        <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>
-        </Card>
+        </div>
       </NuxtLink>
     </template>
 
     <template #empty>
-      <EmptyState
-        icon="📍"
-        :title="t('profileAddresses.empty.title')"
-        :description="t('profileAddresses.empty.description')"
-        :action-label="t('profileAddresses.empty.cta')"
-        :action-to="localePath('/clientarea/addresses/new')"
-        action-icon="lucide:plus"
-      />
+      <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>
+        <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>
-  </CatalogPage>
+  </ClientAreaMapPage>
 </template>
 
 <script setup lang="ts">
-import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
-
 definePageMeta({
   layout: 'topnav',
   middleware: ['auth-oidc']
@@ -76,51 +67,12 @@ const {
   init
 } = useTeamAddresses()
 
-const selectedAddressId = ref<string>()
 const hoveredAddressId = ref<string>()
-
-// Search bar
 const searchQuery = ref('')
 
-// Search with map checkbox
-const searchWithMap = ref(false)
-const currentBounds = ref<MapBounds | null>(null)
-
-// Map items
-const itemsWithCoords = computed(() => {
-  return items.value.filter(addr =>
-    addr.latitude != null &&
-    addr.longitude != null &&
-    !isNaN(Number(addr.latitude)) &&
-    !isNaN(Number(addr.longitude))
-  ).map(addr => ({
-    uuid: addr.uuid,
-    name: addr.name,
-    latitude: Number(addr.latitude),
-    longitude: Number(addr.longitude)
-  }))
-})
-
-// Filtered items when searchWithMap is enabled
-const displayItems = computed(() => {
-  if (!searchWithMap.value || !currentBounds.value) return items.value
-  return items.value.filter(item => {
-    if (item.latitude == null || item.longitude == null) return false
-    const { west, east, north, south } = currentBounds.value!
-    const lng = Number(item.longitude)
-    const lat = Number(item.latitude)
-    return lng >= west && lng <= east && lat >= south && lat <= north
-  })
-})
-
-// Search handler
-const onSearch = () => {
-  // TODO: Implement search
-}
-
 const onSelectAddress = (item: { uuid?: string | null }) => {
   if (item.uuid) {
-    selectedAddressId.value = 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 7291170..3be5d73 100644
--- a/app/pages/clientarea/orders/index.vue
+++ b/app/pages/clientarea/orders/index.vue
@@ -1,109 +1,88 @@
 <template>
-  <CatalogPage
-    :items="displayItems"
-    :map-items="mapPoints"
+  <ClientAreaMapPage
+    :items="listItems"
     :loading="isLoading"
-    with-map
     map-id="orders-map"
     point-color="#6366f1"
-    :selected-id="selectedOrderId"
     :hovered-id="hoveredOrderId"
     :total-count="filteredItems.length"
+    :title="t('cabinetNav.orders')"
+    :search-query="searchQuery"
     @select="onSelectOrder"
     @update:hovered-id="hoveredOrderId = $event"
+    @update:search-query="searchQuery = $event"
   >
-    <template #searchBar="{ displayedCount, totalCount }">
-      <CatalogSearchBar
-        v-model:search-query="searchQuery"
-        :active-filters="activeFilterBadges"
-        :displayed-count="displayedCount"
-        :total-count="totalCount"
-        @remove-filter="onRemoveFilter"
-        @search="onSearch"
-      >
-        <template #filters>
-          <div class="p-2 space-y-3">
-            <div>
-              <div class="text-xs font-semibold mb-1 text-base-content/70">{{ t('ordersList.filters.status') }}</div>
-              <ul class="menu menu-compact">
-                <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>
-        </template>
-      </CatalogSearchBar>
+    <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 }">
-      <Card padding="lg" class="cursor-pointer">
-        <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">#{{ item.name }}</Heading>
-            </Stack>
-            <div class="badge badge-outline">
-              {{ getOrderStartDate(item) }} → {{ getOrderEndDate(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>
+        </div>
+
+        <div class="border-t border-white/10 my-2" />
+
+        <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) }}
             </div>
-          </Stack>
+          </div>
+        </div>
 
-          <div class="divider my-0"></div>
-
-          <Grid :cols="1" :md="3" :gap="3">
-            <Stack gap="1">
-              <Text size="sm" tone="muted">{{ t('ordersList.card.route') }}</Text>
-              <Text weight="semibold">{{ item.sourceLocationName }} → {{ item.destinationLocationName }}</Text>
-            </Stack>
-
-            <Stack gap="1">
-              <Text size="sm" tone="muted">{{ t('ordersList.card.product') }}</Text>
-              <Text>
-                {{ item.orderLines?.[0]?.productName || t('ordersList.card.product_loading') }}
-                <template v-if="item.orderLines?.length > 1">
-                  <span class="badge badge-ghost ml-2">+{{ item.orderLines.length - 1 }}</span>
-                </template>
-              </Text>
-              <Text tone="muted" size="sm">
-                {{ 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(item.status)">
-                {{ getStatusText(item.status) }}
-              </Badge>
-              <Text tone="muted" size="sm">{{ t('ordersList.card.stages_completed', { done: getCompletedStages(item), total: item.stages?.length || 0 }) }}</Text>
-            </Stack>
-          </Grid>
-        </Stack>
-      </Card>
+        <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>
+          </div>
+        </div>
+      </div>
     </template>
 
     <template #empty>
-      <EmptyState
-        icon="📦"
-        :title="t('orders.no_orders')"
-        :description="t('orders.no_orders_desc')"
-        :action-label="t('orders.create_new')"
-        :action-to="localePath('/clientarea')"
-        action-icon="lucide:plus"
-      />
+      <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>
+      </div>
     </template>
-  </CatalogPage>
+  </ClientAreaMapPage>
 </template>
 
 <script setup lang="ts">
-import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
 import type { GetTeamOrdersQueryResult } from '~/composables/graphql/team/orders-generated'
 
 type TeamOrder = NonNullable<NonNullable<GetTeamOrdersQueryResult['getTeamOrders']>[number]>
-type TeamOrderStage = NonNullable<NonNullable<TeamOrder['stages']>[number]>
 
 definePageMeta({
   layout: 'topnav',
@@ -123,19 +102,18 @@ const {
   getStatusText
 } = useTeamOrders()
 
-const selectedOrderId = ref<string>()
 const hoveredOrderId = ref<string>()
-
-// Search bar
 const searchQuery = ref('')
 
-// Search with map checkbox
-const searchWithMap = ref(false)
-const currentBounds = ref<MapBounds | null>(null)
+// Selected filter label
+const selectedFilterLabel = computed(() => {
+  const filter = filters.value.find(f => f.id === selectedFilter.value)
+  return filter?.label || t('ordersList.filters.status')
+})
 
 // List items - one per order
 const listItems = computed(() => {
-  return filteredItems.value
+  let items = filteredItems.value
     .filter(order => order.uuid)
     .map(order => ({
       ...order,
@@ -145,79 +123,22 @@ const listItems = computed(() => {
       longitude: order.sourceLongitude,
       country: order.sourceLocationName
     }))
-})
 
-// Map points - two per order (source + destination)
-interface MapPoint {
-  uuid: string
-  name: string
-  latitude: number
-  longitude: number
-}
-
-const mapPoints = computed(() => {
-  const result: MapPoint[] = []
-  filteredItems.value.forEach(order => {
-    // Source point
-    if (order.sourceLatitude && order.sourceLongitude) {
-      result.push({
-        uuid: `${order.uuid}-source`,
-        name: `📦 ${order.sourceLocationName}`,
-        latitude: order.sourceLatitude,
-        longitude: order.sourceLongitude
-      })
-    }
-    // Destination point - get from last stage
-    const lastStage = order.stages?.[order.stages.length - 1]
-    if (lastStage?.destinationLatitude && lastStage?.destinationLongitude) {
-      result.push({
-        uuid: `${order.uuid}-dest`,
-        name: `🏁 ${order.destinationLocationName}`,
-        latitude: lastStage.destinationLatitude,
-        longitude: lastStage.destinationLongitude
-      })
-    }
-  })
-  return result
-})
-
-// Filtered items when searchWithMap is enabled
-const displayItems = computed(() => {
-  if (!searchWithMap.value || !currentBounds.value) return listItems.value
-  return listItems.value.filter(item => {
-    if (item.latitude == null || item.longitude == null) return false
-    const { west, east, north, south } = currentBounds.value!
-    const lng = Number(item.longitude)
-    const lat = Number(item.latitude)
-    return lng >= west && lng <= east && lat >= south && lat <= north
-  })
-})
-
-// Active filter badges
-const activeFilterBadges = computed(() => {
-  const badges: { id: string; label: string }[] = []
-  if (selectedFilter.value && selectedFilter.value !== 'all') {
-    const filter = filters.value.find(f => f.id === selectedFilter.value)
-    if (filter) badges.push({ id: `status:${filter.id}`, label: filter.label })
+  // Apply search filter
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    items = items.filter(item =>
+      item.name?.toLowerCase().includes(query) ||
+      item.sourceLocationName?.toLowerCase().includes(query) ||
+      item.destinationLocationName?.toLowerCase().includes(query)
+    )
   }
-  return badges
+
+  return items
 })
 
-// Remove filter badge
-const onRemoveFilter = (id: string) => {
-  if (id.startsWith('status:')) {
-    selectedFilter.value = 'all'
-  }
-}
-
-// Search handler
-const onSearch = () => {
-  // TODO: Implement search
-}
-
 const onSelectOrder = (item: { uuid?: string | null }) => {
   if (item.uuid) {
-    selectedOrderId.value = item.uuid
     navigateTo(localePath(`/clientarea/orders/${item.uuid}`))
   }
 }
@@ -229,34 +150,14 @@ const getOrderStartDate = (order: TeamOrder) => {
   return formatDate(order.createdAt)
 }
 
-const getOrderEndDate = (order: TeamOrder) => {
-  let latestDate: Date | null = null
-  order.stages?.forEach((stage) => {
-    if (!stage) return
-    stage.trips?.forEach((trip) => {
-      if (!trip) return
-      const endDate = trip.actualUnloadingDate || trip.plannedUnloadingDate
-      if (endDate) {
-        const date = new Date(endDate)
-        if (!latestDate || date > latestDate) {
-          latestDate = date
-        }
-      }
-    })
-  })
-  if (latestDate) return formatDate((latestDate as Date).toISOString())
-  if (order.createdAt) {
-    const fallbackDate = new Date(order.createdAt)
-    fallbackDate.setMonth(fallbackDate.getMonth() + 1)
-    return formatDate(fallbackDate.toISOString())
+const getStatusBadgeClass = (status?: string) => {
+  const variant = getStatusVariant(status)
+  switch (variant) {
+    case 'success': return 'badge-success'
+    case 'warning': return 'badge-warning'
+    case 'error': return 'badge-error'
+    default: return 'badge-ghost'
   }
-  return t('ordersDetail.labels.dates_undefined')
-}
-
-const getCompletedStages = (order: TeamOrder) => {
-  if (!order.stages?.length) return 0
-  // Note: StageType doesn't have a status field, count all stages for now
-  return order.stages.filter((stage): stage is TeamOrderStage => stage !== null).length
 }
 
 const formatDate = (date: string) => {
@@ -266,8 +167,7 @@ const formatDate = (date: string) => {
     if (isNaN(dateObj.getTime())) return t('ordersDetail.labels.dates_undefined')
     return new Intl.DateTimeFormat('ru-RU', {
       day: 'numeric',
-      month: 'long',
-      year: 'numeric'
+      month: 'short'
     }).format(dateObj)
   } catch {
     return t('ordersDetail.labels.dates_undefined')