webapp/app/pages/clientarea/orders/index.vue

<template>
  <ClientAreaMapPage
    :items="listItems"
    :loading="isLoading"
    map-id="orders-map"
    point-color="#6366f1"
    :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 #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>
        </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>
          </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>
          </div>
        </div>
      </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>
      </div>
    </template>
  </ClientAreaMapPage>
</template>

<script setup lang="ts">
import type { GetTeamOrdersQueryResult } from '~/composables/graphql/team/orders-generated'

type TeamOrder = NonNullable<NonNullable<GetTeamOrdersQueryResult['getTeamOrders']>[number]>

definePageMeta({
  layout: 'topnav',
  middleware: ['auth-oidc']
})

const localePath = useLocalePath()
const { t } = useI18n()

const {
  filteredItems,
  isLoading,
  filters,
  selectedFilter,
  init,
  getStatusVariant,
  getStatusText
} = useTeamOrders()

const hoveredOrderId = ref<string>()
const searchQuery = ref('')

// 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(() => {
  let items = filteredItems.value
    .filter(order => order.uuid)
    .map(order => ({
      ...order,
      uuid: order.uuid,
      name: order.name || `#${order.uuid!.slice(0, 8)}`,
      latitude: order.sourceLatitude,
      longitude: order.sourceLongitude,
      country: order.sourceLocationName
    }))

  // 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 items
})

const onSelectOrder = (item: { uuid?: string | null }) => {
  if (item.uuid) {
    navigateTo(localePath(`/clientarea/orders/${item.uuid}`))
  }
}

await init()

const getOrderStartDate = (order: TeamOrder) => {
  if (!order.createdAt) return t('ordersDetail.labels.dates_undefined')
  return formatDate(order.createdAt)
}

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'
  }
}

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>