web-frontend/app/pages/client-orders/index.vue

<script setup lang="ts">
import { useQuery } from '@vue/apollo-composable';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import ruLocale from '@fullcalendar/core/locales/ru';
import {
  ManagerOrdersDocument,
  ManagerUsersDocument,
  type ManagerOrdersQuery,
  type ManagerUsersQuery,
} from '~/composables/graphql/generated';
import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';
import { formatOrderCode } from '~/composables/useOrderCodePresentation';
import { formatPrice } from '~/composables/useOrderDetailPresentation';

definePageMeta({
  middleware: ['manager-only'],
});

type ManagerOrderItem = ManagerOrdersQuery['managerOrders'][number];
type ManagerUserItem = ManagerUsersQuery['managerUsers'][number];
type StatusFilter = 'ALL' | 'NEW' | 'PRICED' | 'IN_PROGRESS' | 'CLOSED';

const route = useRoute();
const router = useRouter();

const ordersQuery = useQuery(ManagerOrdersDocument, { status: null });
const usersQuery = useQuery(ManagerUsersDocument);
const search = ref('');
const statusFilter = ref<StatusFilter>('ALL');

const viewMode = computed<'list' | 'calendar'>(() => (
  route.query.view === 'calendar'
    ? 'calendar'
    : 'list'
));

function setViewMode(view: 'list' | 'calendar') {
  void router.replace({
    query: {
      ...route.query,
      view,
    },
  });
}

const usersById = computed<Record<string, ManagerUserItem>>(() => Object.fromEntries(
  (usersQuery.result.value?.managerUsers ?? []).map((user) => [user.id, user]),
));

function customerCardMeta(customerId: string) {
  const customer = usersById.value[customerId];
  if (!customer) {
    return {
      name: customerId,
      avatarSrc: '',
      fallbackAvatarSrc: '/favicon.ico',
      initials: customerId.slice(0, 2).toUpperCase(),
    };
  }

  return {
    name: customer.fullName,
    avatarSrc: messengerConnectionAvatarSrc(customer.telegramConnection),
    fallbackAvatarSrc: '/favicon.ico',
    initials: customer.fullName
      .split(/\s+/)
      .filter(Boolean)
      .slice(0, 2)
      .map((part) => part.charAt(0).toUpperCase())
      .join(''),
  };
}

function getOrderGroup(order: ManagerOrderItem) {
  if (order.status === 'NEW' || order.status === 'MANAGER_PROCESSING') {
    return 'NEW';
  }
  if (order.status === 'WAITING_DOUBLE_CONFIRM' || order.status === 'CONFIRMED') {
    return 'PRICED';
  }
  if (order.status === 'IN_PROGRESS') {
    return 'IN_PROGRESS';
  }
  return 'CLOSED';
}

function matchesFilter(order: ManagerOrderItem) {
  if (statusFilter.value === 'ALL') {
    return true;
  }
  return getOrderGroup(order) === statusFilter.value;
}

const searchedOrders = computed<ManagerOrderItem[]>(() => {
  const orders = ordersQuery.result.value?.managerOrders ?? [];
  const query = search.value.trim().toLowerCase();

  return orders.filter((order) => {
    const text = [
      order.code,
      formatOrderCode(order.code),
      order.customerId,
      customerCardMeta(order.customerId).name,
      order.deliveryAddress || '',
      ...order.items.map((item) => item.productName),
    ]
      .join(' ')
      .toLowerCase();

    return !query || text.includes(query);
  });
});

const filteredOrders = computed<ManagerOrderItem[]>(() => searchedOrders.value.filter((order) => matchesFilter(order)));

function escapeHtml(value: string) {
  return String(value)
    .replaceAll('&', '&amp;')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#39;');
}

const statusTabs = computed<Array<{ id: StatusFilter; label: string; count: number }>>(() => [
  {
    id: 'ALL',
    label: 'Все',
    count: searchedOrders.value.length,
  },
  {
    id: 'NEW',
    label: 'Заявки',
    count: searchedOrders.value.filter((order) => getOrderGroup(order) === 'NEW').length,
  },
  {
    id: 'PRICED',
    label: 'Предложения',
    count: searchedOrders.value.filter((order) => getOrderGroup(order) === 'PRICED').length,
  },
  {
    id: 'IN_PROGRESS',
    label: 'В работе',
    count: searchedOrders.value.filter((order) => getOrderGroup(order) === 'IN_PROGRESS').length,
  },
  {
    id: 'CLOSED',
    label: 'Закрытые',
    count: searchedOrders.value.filter((order) => getOrderGroup(order) === 'CLOSED').length,
  },
]);

const calendarOptions = computed(() => ({
  plugins: [dayGridPlugin],
  locale: ruLocale,
  initialView: 'dayGridMonth',
  height: 'auto',
  fixedWeekCount: false,
  firstDay: 1,
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: '',
  },
  buttonText: {
    today: 'Сегодня',
  },
  events: filteredOrders.value.map((order: ManagerOrderItem) => {
    const customer = customerCardMeta(order.customerId);

    return {
      id: order.id,
      title: formatOrderCode(order.code),
      start: new Date(order.createdAt).toISOString(),
      allDay: true,
      extendedProps: {
        customerName: customer.name,
        avatarSrc: customer.avatarSrc,
        fallbackAvatarSrc: customer.fallbackAvatarSrc,
        initials: customer.initials,
        orderCode: formatOrderCode(order.code),
        totalPriceLabel: formatPrice(order.totalPrice) ?? 'Цена уточняется',
      },
    };
  }),
  eventContent: ({ event }: { event: { extendedProps: Record<string, string> } }) => {
    const customerName = escapeHtml(event.extendedProps.customerName || '');
    const avatarSrc = event.extendedProps.avatarSrc || event.extendedProps.fallbackAvatarSrc;
    const orderCode = escapeHtml(event.extendedProps.orderCode || '');
    const totalPriceLabel = escapeHtml(event.extendedProps.totalPriceLabel || '');
    const initials = escapeHtml(event.extendedProps.initials || '');

    return {
      html: `
        <div class="manager-calendar-order-card">
          <div class="manager-calendar-order-card__header">
            <div class="manager-calendar-order-card__avatar-shell">
              ${avatarSrc
                ? `<img src="${escapeHtml(avatarSrc)}" alt="${customerName}" class="manager-calendar-order-card__avatar">`
                : `<span class="manager-calendar-order-card__initials">${initials}</span>`}
            </div>
            <div class="manager-calendar-order-card__text">
              <div class="manager-calendar-order-card__code">${orderCode}</div>
              <div class="manager-calendar-order-card__name">${customerName}</div>
            </div>
          </div>
          <div class="manager-calendar-order-card__price">${totalPriceLabel}</div>
        </div>
      `,
    };
  },
  eventClick: ({ event }: { event: { id: string } }) => {
    void router.push(`/client-orders/${event.id}`);
  },
}));
</script>

<template>
  <section class="space-y-6">
    <UiSectionSearchHero
      v-model="search"
      title="Заказы"
      search-placeholder="Номер заказа, клиент, адрес или товар"
    >
      <template #controls>
        <div class="flex w-full flex-col gap-3 md:w-auto md:flex-row">
          <div class="inline-flex w-fit rounded-full border border-[#d7e9de] bg-white p-1">
            <button
              class="rounded-full px-4 py-2 text-sm font-semibold text-[#355947] transition"
              :class="viewMode === 'list' ? 'bg-[#123824] text-white' : 'hover:bg-[#f4faf6]'"
              @click="setViewMode('list')"
            >
              Список
            </button>
            <button
              class="rounded-full px-4 py-2 text-sm font-semibold text-[#355947] transition"
              :class="viewMode === 'calendar' ? 'bg-[#123824] text-white' : 'hover:bg-[#f4faf6]'"
              @click="setViewMode('calendar')"
            >
              Календарь
            </button>
          </div>
        </div>
      </template>

      <div class="flex flex-wrap gap-2">
        <button
          v-for="tab in statusTabs"
          :key="tab.id"
          class="inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-semibold transition"
          :class="statusFilter === tab.id
            ? 'border-[#0d854a] bg-[#0d854a] text-white shadow-[0_18px_38px_rgba(13,133,74,0.18)]'
            : 'border-[#d4e8da] bg-white text-[#355947] hover:border-[#b6d7c1]'"
          @click="statusFilter = tab.id"
        >
          <span>{{ tab.label }}</span>
          <span
            class="rounded-full px-2 py-0.5 text-xs"
            :class="statusFilter === tab.id ? 'bg-white/20 text-white' : 'bg-[#eef7f1] text-[#0d854a]'"
          >
            {{ tab.count }}
          </span>
        </button>
      </div>
    </UiSectionSearchHero>

    <div v-if="ordersQuery.loading.value" class="manager-empty-state">
      Загружаем заказы...
    </div>
    <div v-else-if="filteredOrders.length === 0" class="manager-empty-state">
      Заказы по текущим условиям не найдены.
    </div>

    <div v-else-if="viewMode === 'calendar'" class="surface-card rounded-3xl p-4 md:p-5">
      <FullCalendar :options="calendarOptions" />
    </div>

    <div v-else class="space-y-4">
      <OrdersOrderSummaryCard
        v-for="order in filteredOrders"
        :key="order.id"
        :to="`/client-orders/${order.id}`"
        :code="order.code"
        :status="order.status"
        :created-at="order.createdAt"
        :total-price="order.totalPrice"
        :items="order.items"
      />
    </div>
  </section>
</template>

<style>
.manager-calendar-order-card {
  display: grid;
  gap: 0.45rem;
  min-height: 74px;
  border-radius: 18px;
  background: #ffffff;
  padding: 0.62rem 0.72rem;
}

.manager-calendar-order-card__header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.manager-calendar-order-card__avatar-shell {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf3ef;
}

.manager-calendar-order-card__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manager-calendar-order-card__initials {
  font-size: 0.78rem;
  font-weight: 800;
  color: #123824;
}

.manager-calendar-order-card__text {
  min-width: 0;
}

.manager-calendar-order-card__code {
  font-size: 0.88rem;
  line-height: 1.1;
  font-weight: 800;
  color: #123824;
}

.manager-calendar-order-card__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  color: #5a7968;
}

.manager-calendar-order-card__price {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0d854a;
}

.fc .fc-daygrid-event {
  border: 0;
  background: transparent;
}

.fc .fc-daygrid-dot-event:hover,
.fc .fc-daygrid-event:hover {
  background: transparent;
}
</style>