Build Nuxt 4 client cabinet with Apollo and GraphQL flows

app/pages/orders.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useQuery } from '@vue/apollo-composable';
+import OrderStatusBadge from '~/components/orders/OrderStatusBadge.vue';
+import { MyCurrentOrdersDocument, MyOrdersDocument } from '~/composables/graphql/generated';
+
+const currentOrders = useQuery(MyCurrentOrdersDocument);
+const allOrders = useQuery(MyOrdersDocument);
+</script>
+
+<template>
+  <section class="space-y-8">
+    <h1 class="text-2xl font-bold">Мои заказы</h1>
+
+    <div class="space-y-3">
+      <h2 class="text-xl font-semibold">Текущие</h2>
+      <div v-if="currentOrders.loading.value" class="alert">Загрузка...</div>
+      <div v-else class="space-y-3">
+        <article v-for="order in currentOrders.result.value?.myCurrentOrders ?? []" :key="order.id" class="card bg-base-100 border border-base-300">
+          <div class="card-body gap-2">
+            <div class="flex items-center justify-between">
+              <h3 class="font-semibold">{{ order.code }}</h3>
+              <OrderStatusBadge :status="order.status" />
+            </div>
+            <ul class="text-sm">
+              <li v-for="item in order.items" :key="item.id">{{ item.productName }} × {{ item.quantity }}</li>
+            </ul>
+          </div>
+        </article>
+      </div>
+    </div>
+
+    <div class="space-y-3">
+      <h2 class="text-xl font-semibold">Все</h2>
+      <article v-for="order in allOrders.result.value?.myOrders ?? []" :key="order.id" class="card bg-base-100 border border-base-300">
+        <div class="card-body gap-2">
+          <div class="flex items-center justify-between">
+            <h3 class="font-semibold">{{ order.code }}</h3>
+            <OrderStatusBadge :status="order.status" />
+          </div>
+          <p class="text-sm">Условия доставки: {{ order.deliveryTerms || 'ожидает обработки менеджером' }}</p>
+          <p class="text-sm">Итого: {{ order.totalPrice ?? 'после обработки менеджером' }}</p>
+        </div>
+      </article>
+    </div>
+  </section>
+</template>