Add unified order summary card

app/pages/orders/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable';
-import OrderStatusBadge from '~/components/orders/OrderStatusBadge.vue';
 import {
   MyOrdersDocument,
   type MyOrdersQuery,
@@ -69,34 +68,16 @@ const filteredOrders = computed(() => {
     </div>
 
     <div v-else class="space-y-3">
-      <NuxtLink
+      <OrdersOrderSummaryCard
         v-for="order in filteredOrders"
         :key="order.id"
         :to="`/orders/${order.id}`"
-        class="surface-card block rounded-3xl p-4 md:p-5"
-      >
-        <div class="flex flex-wrap items-start justify-between gap-3">
-          <div class="space-y-1">
-            <h2 class="text-lg font-bold text-[#123824]">{{ order.code }}</h2>
-            <p class="text-sm text-[#355947]">Создан: {{ new Date(order.createdAt).toLocaleString() }}</p>
-            <p v-if="order.deliveryAddress" class="text-sm text-[#355947]">Адрес: {{ order.deliveryAddress }}</p>
-            <p v-if="order.deliveryTerms" class="text-sm text-[#355947]">Доставка: {{ order.deliveryTerms }}</p>
-          </div>
-          <div class="flex flex-col items-end gap-2">
-            <OrderStatusBadge :status="order.status" />
-          </div>
-        </div>
-
-        <ul class="mt-4 grid gap-2 text-sm text-[#214735]">
-          <li
-            v-for="item in order.items"
-            :key="item.id"
-            class="rounded-2xl border border-[#d6ebde] bg-white px-4 py-3"
-          >
-            {{ item.productName }} × {{ item.quantity }}
-          </li>
-        </ul>
-      </NuxtLink>
+        :code="order.code"
+        :status="order.status"
+        :created-at="order.createdAt"
+        :total-price="order.totalPrice"
+        :items="order.items"
+      />
     </div>
   </section>
 </template>