Add mock order status timeline

app/pages/client-orders/[id].vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useMutation, useQuery } from '@vue/apollo-composable';
-import OrderStatusBadge from '~/components/orders/OrderStatusBadge.vue';
 import {
   BlockOrderDocument,
   CompleteOrderDocument,
@@ -137,16 +136,10 @@ async function completeOrder() {
 
       <div class="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
         <div class="space-y-4">
-          <div class="surface-card rounded-3xl p-5">
-            <h2 class="text-xl font-bold text-[#123824]">Статус заказа</h2>
-            <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
-              <div class="space-y-1 text-sm text-[#355947]">
-                <p>Создан: {{ new Date(currentOrder.createdAt).toLocaleString() }}</p>
-                <p>Клиент: {{ currentOrder.customerId }}</p>
-              </div>
-              <OrderStatusBadge :status="currentOrder.status" />
-            </div>
-          </div>
+          <OrdersOrderStatusTimelineCard
+            :status="currentOrder.status"
+            :created-at="currentOrder.createdAt"
+          />
 
           <div class="surface-card rounded-3xl p-5">
             <h2 class="text-xl font-bold text-[#123824]">Состав заказа</h2>