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

<template>
  <div class="fixed inset-0">
    <ClientOnly>
      <CatalogMap
        map-id="orders-map"
        :items="mapPoints"
        :use-server-clustering="false"
        point-color="#6366f1"
        entity-type="offer"
        :hovered-item-id="hoveredOrderId"
        :fit-padding-left="460"
        @select-item="onMapSelect"
      />
    </ClientOnly>

    <MapSidePanel
      :title="t('cabinetNav.orders')"
      :initial-collapsed="false"
      width-class="w-[min(calc(100vw-1rem),440px)] md:w-[420px] xl:w-[460px]"
    >
      <div class="space-y-3">
        <div class="relative">
          <input
            v-model="searchQuery"
            type="text"
            :placeholder="t('common.search')"
            class="input input-sm w-full bg-white border-[#dccfbf] text-[#2f2418] placeholder:text-[#8a7761]"
          >
          <Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-[#8a7761]" />
        </div>

        <div class="dropdown dropdown-end w-full">
          <label tabindex="0" class="btn btn-sm w-full bg-white border-[#dccfbf] text-[#2f2418] hover:bg-[#f9f4ed] 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-white 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>

      <div class="mt-4 flex flex-col gap-2">
        <template v-if="displayItems.length > 0">
          <button
            v-for="item in displayItems"
            :key="item.uuid"
            class="rounded-2xl border border-[#e4d9ca] bg-white p-3 text-left transition-colors hover:bg-[#f8f3ec]"
            :class="selectedOrderId === item.uuid ? 'ring-2 ring-[#2f2416]' : ''"
            @click="selectedOrderId = item.uuid"
            @mouseenter="hoveredOrderId = item.uuid"
            @mouseleave="hoveredOrderId = undefined"
          >
            <div class="mb-2 flex items-center justify-between gap-2">
              <span class="truncate font-semibold text-sm text-[#2f2418]">#{{ item.name }}</span>
              <span class="badge badge-sm" :class="getStatusBadgeClass(item.status)">
                {{ getStatusText(item.status) }}
              </span>
            </div>

            <div class="space-y-1 text-xs text-[#6f6353]">
              <div class="flex items-center gap-2">
                <Icon name="lucide:map-pin" size="12" />
                <span class="truncate">{{ item.sourceLocationName }}</span>
              </div>
              <div class="flex items-center gap-2">
                <Icon name="lucide:navigation" size="12" />
                <span class="truncate">{{ item.destinationLocationName }}</span>
              </div>
            </div>

            <div class="mt-2 text-xs text-[#95836d]">{{ getOrderDate(item) }}</div>
          </button>
        </template>

        <div v-else class="rounded-2xl border border-[#e4d9ca] bg-white px-4 py-8 text-center text-[#7c6d5a]">
          <div class="text-2xl">📦</div>
          <div class="mt-2 text-sm font-semibold">{{ t('orders.no_orders') }}</div>
          <div class="mt-1 text-xs">{{ t('orders.no_orders_desc') }}</div>
        </div>
      </div>

      <template #footer>
        <span class="text-xs text-[#7c6d5a]">{{ displayItems.length }} {{ t('catalog.of') }} {{ filteredItems.length }}</span>
      </template>
    </MapSidePanel>

    <OrderDetailBottomSheet
      :is-open="!!selectedOrderId"
      :order-uuid="selectedOrderId"
      @close="selectedOrderId = null"
    />
  </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 { t } = useI18n()

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

const hoveredOrderId = ref<string>()
const searchQuery = ref('')
const selectedOrderId = ref<string | null>(null)

const selectedFilterLabel = computed(() => {
  const filter = filters.value.find(f => f.id === selectedFilter.value)
  return filter?.label || t('ordersList.filters.status')
})

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

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 = (uuid: string) => {
  if (uuid) {
    selectedOrderId.value = 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>