Add mock order status timeline

app/components/orders/OrderStatusTimelineCard.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import OrderStatusBadge from '~/components/orders/OrderStatusBadge.vue';
+import { getOrderStatusPresentation } from '~/composables/useOrderStatusPresentation';
+
+const props = defineProps<{
+  status: string;
+  createdAt: string | Date;
+}>();
+
+const isExpanded = ref(false);
+
+const presentation = computed(() => getOrderStatusPresentation(props.status, props.createdAt));
+
+function itemClass(state: 'done' | 'current' | 'upcoming') {
+  if (state === 'current') {
+    return 'border-[#139957] bg-[#eef9f2]';
+  }
+  if (state === 'done') {
+    return 'border-[#d8eadf] bg-white';
+  }
+  return 'border-[#e4ede8] bg-[#f7faf8]';
+}
+
+function markerClass(state: 'done' | 'current' | 'upcoming') {
+  if (state === 'current') {
+    return 'bg-[#139957] ring-4 ring-[#dff4e8]';
+  }
+  if (state === 'done') {
+    return 'bg-[#9dcfb0]';
+  }
+  return 'bg-[#d8e4dd]';
+}
+</script>
+
+<template>
+  <div class="surface-card rounded-3xl p-5">
+    <button
+      type="button"
+      class="flex w-full items-start justify-between gap-4 text-left"
+      @click="isExpanded = !isExpanded"
+    >
+      <div class="space-y-2">
+        <p class="text-xs font-semibold uppercase tracking-[0.16em] text-[#5c7b69]">Текущий статус</p>
+        <h2 class="text-2xl font-black leading-tight text-[#123824]">
+          {{ presentation.title }}
+        </h2>
+        <p class="max-w-2xl text-sm leading-6 text-[#355947]">
+          {{ presentation.summary }}
+        </p>
+      </div>
+
+      <div class="flex items-center gap-3 pt-1">
+        <OrderStatusBadge :status="status" />
+        <span
+          class="flex h-10 w-10 items-center justify-center rounded-full bg-[#eef5f0] text-[#123824] transition-transform"
+          :class="{ 'rotate-180': isExpanded }"
+        >
+          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="none">
+            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </span>
+      </div>
+    </button>
+
+    <div v-if="isExpanded" class="mt-5 space-y-3 border-t border-[#e1ebe5] pt-5">
+      <div
+        v-for="stage in presentation.stages"
+        :key="stage.code"
+        class="rounded-3xl border p-4"
+        :class="itemClass(stage.state)"
+      >
+        <div class="flex items-start gap-3">
+          <span class="mt-1 h-3 w-3 shrink-0 rounded-full" :class="markerClass(stage.state)" />
+          <div class="min-w-0 flex-1 space-y-1">
+            <div class="flex flex-wrap items-center justify-between gap-2">
+              <p class="text-sm font-semibold text-[#123824]">{{ stage.label }}</p>
+              <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#5c7b69]">{{ stage.dateLabel }}</p>
+            </div>
+            <p class="text-sm leading-6 text-[#355947]">{{ stage.note }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>