Add manager order kanban view

app/pages/client-orders/index.vue

@@ -14,22 +14,24 @@ definePageMeta({
 });
 
 type ManagerOrderItem = ManagerOrdersQuery['managerOrders'][number];
+type StatusFilter = 'ALL' | 'NEW' | 'PRICED' | 'IN_PROGRESS' | 'CLOSED';
 
 const route = useRoute();
 const router = useRouter();
 
-const ACTIVE_STATUSES = new Set(['NEW', 'MANAGER_PROCESSING', 'WAITING_DOUBLE_CONFIRM', 'CONFIRMED', 'IN_PROGRESS']);
-const CLOSED_STATUSES = new Set(['COMPLETED', 'CLIENT_REJECTED', 'MANAGER_REJECTED', 'MANAGER_BLOCKED']);
-
 const ordersQuery = useQuery(ManagerOrdersDocument, { status: null });
 const search = ref('');
-const statusFilter = ref<'ALL' | 'WAITING' | 'ACTIVE' | 'CLOSED'>('ALL');
+const statusFilter = ref<StatusFilter>('ALL');
 
-const viewMode = computed<'cards' | 'calendar'>(() => (
-  route.query.view === 'calendar' ? 'calendar' : 'cards'
+const viewMode = computed<'cards' | 'calendar' | 'kanban'>(() => (
+  route.query.view === 'calendar'
+    ? 'calendar'
+    : route.query.view === 'kanban'
+      ? 'kanban'
+      : 'cards'
 ));
 
-function setViewMode(view: 'cards' | 'calendar') {
+function setViewMode(view: 'cards' | 'calendar' | 'kanban') {
   void router.replace({
     query: {
       ...route.query,
@@ -38,20 +40,27 @@ function setViewMode(view: 'cards' | 'calendar') {
   });
 }
 
+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;
   }
-  if (statusFilter.value === 'WAITING') {
-    return order.status === 'WAITING_DOUBLE_CONFIRM';
-  }
-  if (statusFilter.value === 'ACTIVE') {
-    return ACTIVE_STATUSES.has(order.status);
-  }
-  return CLOSED_STATUSES.has(order.status);
+  return getOrderGroup(order) === statusFilter.value;
 }
 
-const filteredOrders = computed(() => {
+const searchedOrders = computed<ManagerOrderItem[]>(() => {
   const orders = ordersQuery.result.value?.managerOrders ?? [];
   const query = search.value.trim().toLowerCase();
 
@@ -65,11 +74,72 @@ const filteredOrders = computed(() => {
       .join(' ')
       .toLowerCase();
 
-    const matchesSearch = !query || text.includes(query);
-    return matchesSearch && matchesFilter(order);
+    return !query || text.includes(query);
   });
 });
 
+const filteredOrders = computed<ManagerOrderItem[]>(() => searchedOrders.value.filter((order) => matchesFilter(order)));
+
+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 kanbanColumns = computed(() => {
+  const columns = [
+    {
+      id: 'NEW' as const,
+      title: 'Новые',
+      tone: 'from-[#f5fff8] to-[#eefaf2]',
+    },
+    {
+      id: 'PRICED' as const,
+      title: 'Оценены',
+      tone: 'from-[#fff9ef] to-[#fff1d9]',
+    },
+    {
+      id: 'IN_PROGRESS' as const,
+      title: 'В работе',
+      tone: 'from-[#eef7ff] to-[#e2f0ff]',
+    },
+    {
+      id: 'CLOSED' as const,
+      title: 'Закрытые',
+      tone: 'from-[#f6f7f8] to-[#eceff2]',
+    },
+  ];
+
+  return columns
+    .filter((column) => statusFilter.value === 'ALL' || statusFilter.value === column.id)
+    .map((column) => ({
+      ...column,
+      orders: searchedOrders.value.filter((order) => getOrderGroup(order) === column.id),
+    }));
+});
+
 const calendarOptions = computed(() => ({
   plugins: [dayGridPlugin],
   locale: ruLocale,
@@ -85,7 +155,7 @@ const calendarOptions = computed(() => ({
   buttonText: {
     today: 'Сегодня',
   },
-  events: filteredOrders.value.map((order) => ({
+  events: filteredOrders.value.map((order: ManagerOrderItem) => ({
     id: order.id,
     title: `${order.code} • ${order.customerId}`,
     start: new Date(order.createdAt).toISOString(),
@@ -106,13 +176,6 @@ const calendarOptions = computed(() => ({
     >
       <template #controls>
         <div class="flex w-full flex-col gap-3 md:w-auto md:flex-row">
-          <select v-model="statusFilter" class="select select-bordered w-full rounded-full bg-white md:w-64">
-            <option value="ALL">Все заказы</option>
-            <option value="WAITING">Ожидают подтверждения</option>
-            <option value="ACTIVE">Активные</option>
-            <option value="CLOSED">Закрытые</option>
-          </select>
-
           <div class="tabs tabs-boxed w-fit bg-white">
             <button class="tab" :class="{ 'tab-active': viewMode === 'cards' }" @click="setViewMode('cards')">
               Карточки
@@ -120,9 +183,32 @@ const calendarOptions = computed(() => ({
             <button class="tab" :class="{ 'tab-active': viewMode === 'calendar' }" @click="setViewMode('calendar')">
               Календарь
             </button>
+            <button class="tab" :class="{ 'tab-active': viewMode === 'kanban' }" @click="setViewMode('kanban')">
+              Kanban
+            </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">
@@ -136,6 +222,67 @@ const calendarOptions = computed(() => ({
       <FullCalendar :options="calendarOptions" />
     </div>
 
+    <div v-else-if="viewMode === 'kanban'" class="grid gap-4 xl:grid-cols-4">
+      <div
+        v-for="column in kanbanColumns"
+        :key="column.id"
+        class="surface-card rounded-[32px] p-4"
+      >
+        <div
+          class="rounded-[24px] border border-white/60 bg-gradient-to-br p-4"
+          :class="column.tone"
+        >
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <h2 class="text-lg font-bold text-[#123824]">{{ column.title }}</h2>
+              <p class="text-sm text-[#5c7b69]">Заказов: {{ column.orders.length }}</p>
+            </div>
+            <span class="rounded-full bg-white px-3 py-1 text-sm font-semibold text-[#123824]">
+              {{ column.orders.length }}
+            </span>
+          </div>
+        </div>
+
+        <div v-if="column.orders.length === 0" class="manager-empty-state mt-4 min-h-[180px]">
+          В этой колонке пока пусто.
+        </div>
+
+        <div v-else class="mt-4 space-y-3">
+          <NuxtLink
+            v-for="order in column.orders"
+            :key="order.id"
+            :to="`/client-orders/${order.id}`"
+            class="block rounded-[28px] border border-[#dbece2] bg-white p-4 shadow-[0_18px_40px_rgba(18,56,36,0.08)] transition hover:-translate-y-0.5"
+          >
+            <div class="flex items-start justify-between gap-3">
+              <div class="space-y-1">
+                <h3 class="text-base font-bold text-[#123824]">{{ order.code }}</h3>
+                <p class="text-sm text-[#5c7b69]">Клиент: {{ order.customerId }}</p>
+              </div>
+              <OrderStatusBadge :status="order.status" />
+            </div>
+
+            <p class="mt-3 text-sm text-[#5c7b69]">Создан: {{ new Date(order.createdAt).toLocaleString() }}</p>
+            <p v-if="order.deliveryAddress" class="mt-1 text-sm text-[#5c7b69]">{{ order.deliveryAddress }}</p>
+
+            <ul class="mt-3 space-y-2 text-sm text-[#214735]">
+              <li
+                v-for="item in order.items.slice(0, 3)"
+                :key="item.id"
+                class="rounded-2xl border border-[#e2efe7] bg-[#f8fcf9] px-3 py-2"
+              >
+                {{ item.productName }} × {{ item.quantity }}
+              </li>
+            </ul>
+
+            <p v-if="order.items.length > 3" class="mt-2 text-xs font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">
+              ещё {{ order.items.length - 3 }} поз.
+            </p>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
     <div v-else class="space-y-4">
       <NuxtLink
         v-for="order in filteredOrders"