ТЗ → Декомпозиция → Backend Flow → Frontend Flow → Интеграция
         ↓              ↓               ↓
    Tech Lead      Sub-agents       Sub-agents

## Задача: Список заказов

### User Story
Как менеджер, я хочу видеть список заказов с фильтрацией,
чтобы быстро находить нужные заказы.

### Acceptance Criteria
- [ ] Таблица с колонками: номер, дата, статус, сумма, клиент
- [ ] Фильтр по статусу
- [ ] Фильтр по дате (от-до)
- [ ] Пагинация по 20 записей
- [ ] Сортировка по дате (desc по умолчанию)

### Сущности
- Order: id, number, status, total, createdAt
- User (клиент): id, name, email

## Backend (нужен)
- API: GET /api/orders с фильтрами и пагинацией
- Модель Order уже есть в Prisma

## Frontend (нужен)
- Страница: /orders
- Composable: useOrders()
- Компоненты: OrderFilters, OrderTable

## Порядок
Backend → Frontend (frontend использует API)

backend-analyst → [backend-integrator?] → backend-developer ─┬─► backend-reviewer
                                          backend-testing ───┘

1. oro-playbook → standard-backend-api (паттерны REST)
2. oro-playbook → standard-prisma (schema conventions)
3. Проверить существующие API — можно ли расширить?
4. Составить спеку для developer

## GET /api/orders

Query params:
- status?: string (фильтр по статусу)
- page?: number (default: 1)
- limit?: number (default: 20)

Response:
- data: Order[]
- meta: { page, limit, total, totalPages }

1. WebSearch → актуальная документация инструмента
2. Проверить примеры в других модулях проекта
3. Установить и базово настроить

// server/api/orders/index.get.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const page = Number(query.page) || 1
  const limit = Number(query.limit) || 20
  const status = query.status as string | undefined

  const where = { ...(status && { status }) }

  const [orders, total] = await Promise.all([
    prisma.order.findMany({
      where,
      skip: (page - 1) * limit,
      take: limit,
      orderBy: { createdAt: 'desc' },
      include: { user: { select: { id: true, name: true } } },
    }),
    prisma.order.count({ where }),
  ])

  return {
    data: orders,
    meta: { page, limit, total, totalPages: Math.ceil(total / limit) },
  }
})

// tests/api/orders.test.ts
describe('GET /api/orders', () => {
  it('returns paginated orders', async () => {
    const response = await $fetch('/api/orders?page=1&limit=10')
    expect(response.data).toHaveLength(10)
    expect(response.meta.page).toBe(1)
  })

  it('filters by status', async () => {
    const response = await $fetch('/api/orders?status=pending')
    expect(response.data.every(o => o.status === 'pending')).toBe(true)
  })
})

1. Code review по стандартам
2. Запуск тестов
3. Проверка типизации

frontend-analyst → [frontend-integrator?] → frontend-developer ─┬─► frontend-reviewer → frontend-qa
                                            frontend-testing ───┘

1. oro-playbook → standard-component-decomposition
2. oro-playbook → standard-component-naming
3. nuxt-ui-remote → list_components (какие компоненты использовать)
4. Составить спеку для developer

## Страница /orders

Компоненты:
- OrderFilters (USelect для статуса)
- Используем UTable для списка
- UPagination для пагинации

Composable:
- useOrders() — fetch, filters, pagination

<!-- app/pages/orders/index.vue -->
<script setup lang="ts">
definePageMeta({ middleware: 'auth' })

const { orders, meta, loading, fetchOrders } = useOrders()

const filters = reactive({
  status: undefined as string | undefined,
  page: 1,
})

const statusOptions = [
  { label: 'Все', value: undefined },
  { label: 'Новый', value: 'pending' },
  { label: 'В работе', value: 'processing' },
  { label: 'Завершён', value: 'completed' },
]

const columns = [
  { key: 'number', label: 'Номер' },
  { key: 'createdAt', label: 'Дата' },
  { key: 'status', label: 'Статус' },
  { key: 'total', label: 'Сумма' },
  { key: 'user.name', label: 'Клиент' },
]

watch(filters, () => fetchOrders(filters), { immediate: true })
</script>

<template>
  <div class="space-y-4">
    <div class="flex gap-4">
      <USelect
        v-model="filters.status"
        :options="statusOptions"
        placeholder="Статус"
        class="w-48"
      />
    </div>

    <UTable
      :rows="orders"
      :columns="columns"
      :loading="loading"
    />

    <UPagination
      v-if="meta"
      v-model="filters.page"
      :total="meta.total"
      :page-count="meta.limit"
    />
  </div>
</template>

1. Code review по стандартам
2. Запуск тестов
3. Проверка декомпозиции компонентов

1. chrome-devtools → take_snapshot (проверка UI)
2. chrome-devtools → list_console_messages (ошибки в консоли)
3. chrome-devtools → list_network_requests (failed requests)
4. Проверка в светлой/тёмной теме
5. Проверка на мобильных

1. oro-playbook   → standard-project-structure
2. nuxt-remote    → definePageMeta, useRoute
3. nuxt-ui-remote → компоненты для UI

1. oro-playbook   → standard-forms-validation
2. nuxt-ui-remote → UForm, UFormField, inputs
3. nuxt-remote    → если нужен submit на API

1. oro-playbook   → standard-backend-api
2. nuxt-remote    → defineEventHandler, getQuery, readBody
3. prisma         → запросы к БД

1. oro-playbook   → standard-socket-io, ADR-013
2. WebSearch      → актуальная документация socket.io

1. oro-playbook   → standard-prisma
2. prisma         → schema syntax, relations
3. bash           → npx prisma migrate dev