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

<template>
  <div>
    <CatalogPage
      :items="mapPoints"
      :loading="isLoading"
      :use-server-clustering="false"
      map-id="orders-map"
      point-color="#6366f1"
      :hovered-id="hoveredOrderId"
      :show-panel="false"
      :hide-view-toggle="true"
      @select="onMapSelect"
      @update:hovered-id="hoveredOrderId = $event"
    />

    <!-- Bottom Sheet -->
    <div class="fixed inset-x-0 bottom-0 z-50 flex flex-col" style="height: 70vh">
      <!-- Glass sheet -->
      <div class="relative flex-1 bg-black/40 backdrop-blur-xl rounded-t-2xl border-t border-white/20 shadow-2xl overflow-hidden">
        <!-- Drag handle -->
        <div class="flex justify-center py-2">
          <div class="w-12 h-1.5 bg-white/30 rounded-full" />
        </div>

        <!-- Header -->
        <div class="px-6 pb-4 border-b border-white/10">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-xl bg-indigo-500/20 flex items-center justify-center">
                <Icon name="lucide:package" size="20" class="text-indigo-400" />
              </div>
              <div>
                <div class="font-bold text-white">{{ t('cabinetNav.orders') }}</div>
                <div class="text-xs text-white/50">{{ filteredItems.length }} {{ t('orders.total', 'total') }}</div>
              </div>
            </div>
          </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>

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

        <!-- Scrollable content -->
        <div class="overflow-y-auto h-[calc(70vh-180px)] px-6 py-4">
          <template v-if="displayItems.length > 0">
            <div class="space-y-2">
              <div
                v-for="item in displayItems"
                :key="item.uuid"
                class="bg-white/5 rounded-xl p-4 border border-white/10 hover:bg-white/10 transition-colors cursor-pointer"
                @mouseenter="hoveredOrderId = item.uuid"
                @mouseleave="hoveredOrderId = undefined"
                @click="onSelectOrder(item)"
              >
                <div class="flex items-center justify-between mb-2">
                  <span class="font-semibold text-white">#{{ item.name }}</span>
                  <span class="badge badge-sm" :class="getStatusBadgeClass(item.status)">
                    {{ getStatusText(item.status) }}
                  </span>
                </div>
                <div class="text-sm text-white/70 mb-1">
                  <div class="flex items-center gap-2">
                    <Icon name="lucide:map-pin" size="14" class="text-white/40" />
                    {{ item.sourceLocationName }}
                  </div>
                  <div class="flex items-center gap-2 mt-1">
                    <Icon name="lucide:navigation" size="14" class="text-white/40" />
                    {{ item.destinationLocationName }}
                  </div>
                </div>
                <div class="text-xs text-white/50 mt-2">
                  {{ getOrderDate(item) }}
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="text-center py-12">
              <div class="text-4xl mb-3">📦</div>
              <div class="font-semibold text-white mb-1">{{ t('orders.no_orders') }}</div>
              <div class="text-sm text-white/60">{{ t('orders.no_orders_desc') }}</div>
            </div>
          </template>
        </div>

        <!-- Footer -->
        <div class="px-6 py-3 border-t border-white/10">
          <span class="text-xs text-white/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ filteredItems.length }}</span>
        </div>
      </div>
    </div>
  </div>
</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')
})

// Map points - source locations
const mapPoints = computed(() => {
  return filteredItems.value
    .filter(order => order.uuid && order.sourceLatitude && order.sourceLongitude)
    .map(order => ({
      uuid: order.uuid!,
      name: order.name || `#${order.uuid!.slice(0, 8)}`,
      latitude: order.sourceLatitude!,
      longitude: order.sourceLongitude!
    }))
})

// Display items with search filter
const displayItems = computed(() => {
  let items = filteredItems.value.filter(order => order.uuid)

  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 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}`))
  }
}

await init()

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) => {
  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'
  }
}
</script>