Redesign client cabinet UI with capsule nav and card layouts

app/pages/orders.vue

@@ -1,46 +1,126 @@
 <script setup lang="ts">
-import { useQuery } from '@vue/apollo-composable';
+import { useMutation, useQuery } from '@vue/apollo-composable';
 import OrderStatusBadge from '~/components/orders/OrderStatusBadge.vue';
-import { MyCurrentOrdersDocument, MyOrdersDocument } from '~/composables/graphql/generated';
+import {
+  ClientReviewOrderDocument,
+  MyCurrentOrdersDocument,
+  MyOrdersDocument,
+} from '~/composables/graphql/generated';
 
 const currentOrders = useQuery(MyCurrentOrdersDocument);
 const allOrders = useQuery(MyOrdersDocument);
+const reviewOrder = useMutation(ClientReviewOrderDocument);
+const actionError = ref('');
+
+reviewOrder.onError((error) => {
+  actionError.value = error.message;
+});
+
+async function approve(orderId: string) {
+  actionError.value = '';
+  await reviewOrder.mutate({ orderId, decision: 'APPROVE' });
+  await Promise.all([currentOrders.refetch(), allOrders.refetch()]);
+}
+
+async function reject(orderId: string) {
+  actionError.value = '';
+  await reviewOrder.mutate({ orderId, decision: 'REJECT' });
+  await Promise.all([currentOrders.refetch(), allOrders.refetch()]);
+}
 </script>
 
 <template>
-  <section class="space-y-8">
-    <h1 class="text-2xl font-bold">Мои заказы</h1>
+  <section class="space-y-6">
+    <div>
+      <h1 class="text-3xl font-extrabold text-[#0f2f20]">Мои заказы</h1>
+      <p class="mt-1 text-sm text-[#28543f]/80">Все заявки в широком карточном формате.</p>
+    </div>
 
-    <div class="space-y-3">
-      <h2 class="text-xl font-semibold">Текущие</h2>
-      <div v-if="currentOrders.loading.value" class="alert">Загрузка...</div>
+    <div v-if="actionError" class="alert alert-error">{{ actionError }}</div>
+
+    <div class="space-y-4">
+      <h2 class="text-lg font-bold text-[#123824]">Текущие</h2>
+      <div v-if="currentOrders.loading.value" class="alert surface-card border-0">Загрузка...</div>
+      <div v-else-if="(currentOrders.result.value?.myCurrentOrders?.length ?? 0) === 0" class="alert surface-card border-0">
+        Активных заказов пока нет.
+      </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>
+        <article
+          v-for="order in currentOrders.result.value?.myCurrentOrders ?? []"
+          :key="order.id"
+          class="surface-card rounded-3xl p-4 md:p-5"
+        >
+          <div class="flex flex-wrap items-start justify-between gap-3">
+            <div>
+              <h3 class="text-lg font-bold text-[#123824]">{{ order.code }}</h3>
+              <p class="text-xs text-[#355947]">{{ new Date(order.createdAt).toLocaleString() }}</p>
+            </div>
+            <div class="flex items-center gap-2">
               <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>
+
+          <ul class="mt-4 grid gap-2 text-sm text-[#214735]">
+            <li
+              v-for="item in order.items"
+              :key="item.id"
+              class="rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-2"
+            >
+              {{ item.productName }} × {{ item.quantity }}
+            </li>
+          </ul>
+
+          <div v-if="order.status === 'WAITING_DOUBLE_CONFIRM'" class="mt-4 flex flex-wrap gap-2">
+            <button class="btn btn-sm border-0 bg-[#139957] text-white hover:bg-[#0d854a]" @click="approve(order.id)">
+              Подтвердить
+            </button>
+            <button class="btn btn-sm border-0 bg-[#d32422] text-white hover:bg-[#b31f1d]" @click="reject(order.id)">
+              Отклонить
+            </button>
           </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>
+    <div class="space-y-4">
+      <h2 class="text-lg font-bold text-[#123824]">История заказов</h2>
+      <div v-if="allOrders.loading.value" class="alert surface-card border-0">Загрузка истории...</div>
+      <div v-else-if="(allOrders.result.value?.myOrders?.length ?? 0) === 0" class="alert surface-card border-0">
+        История заказов пока пустая.
+      </div>
+      <div v-else class="space-y-3">
+        <article
+          v-for="order in allOrders.result.value?.myOrders ?? []"
+          :key="order.id"
+          class="surface-card rounded-3xl p-4 md:p-5"
+        >
+          <div class="flex flex-wrap items-start justify-between gap-3">
+            <div>
+              <h3 class="text-lg font-bold text-[#123824]">{{ order.code }}</h3>
+              <p class="text-xs text-[#355947]">{{ new Date(order.updatedAt).toLocaleString() }}</p>
+            </div>
             <OrderStatusBadge :status="order.status" />
           </div>
-          <p class="text-sm">Условия доставки: {{ order.deliveryTerms || 'ожидает обработки менеджером' }}</p>
-          <p class="text-sm">Итого: {{ order.totalPrice ?? 'после обработки менеджером' }}</p>
-        </div>
-      </article>
+
+          <div class="mt-4 grid gap-3 text-sm text-[#214735] md:grid-cols-2">
+            <div class="rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-2">
+              Условия доставки: {{ order.deliveryTerms || 'ожидает обработки менеджером' }}
+            </div>
+            <div class="rounded-xl border border-[#d6ebde] bg-white/75 px-3 py-2">
+              Итого: {{ order.totalPrice ?? 'после обработки менеджером' }}
+            </div>
+          </div>
+
+          <div v-if="order.status === 'WAITING_DOUBLE_CONFIRM'" class="mt-4 flex flex-wrap gap-2">
+            <button class="btn btn-sm border-0 bg-[#139957] text-white hover:bg-[#0d854a]" @click="approve(order.id)">
+              Подтвердить
+            </button>
+            <button class="btn btn-sm border-0 bg-[#d32422] text-white hover:bg-[#b31f1d]" @click="reject(order.id)">
+              Отклонить
+            </button>
+          </div>
+        </article>
+      </div>
     </div>
   </section>
 </template>