changes

app/components/orders/OrderHistoryTab.vue

@@ -0,0 +1,83 @@
+<script setup>
+const props = defineProps({
+  order: Object
+});
+
+const { $dayjs } = useNuxtApp();
+
+const historyItems = [
+  {
+    id: 1,
+    name: 'Tạo đơn hàng',
+    details: 'Đơn hàng được tạo',
+    icon: 'material-symbols:info-outline-rounded',
+    color: 'blue',
+    time: '2026-02-11T08:51:04.587660+07:00'
+  },
+  {
+    id: 2,
+    name: 'Xác nhận',
+    details: 'Đơn hàng được xác nhận',
+    icon: 'material-symbols:check-circle-outline-rounded',
+    color: 'green',
+    time: '2026-02-11T10:30:04.587660+07:00'
+  },
+  {
+    id: 3,
+    name: 'Xuất kho',
+    details: 'Hàng đã xuất kho',
+    icon: 'material-symbols:check-circle-outline-rounded',
+    color: 'green',
+    time: '2026-02-11T11:02:04.587660+07:00'
+  },
+  {
+    id: 4,
+    name: 'Đang giao',
+    details: 'Tài xế đang giao hàng',
+    icon: 'material-symbols:info-outline-rounded',
+    color: 'blue',
+    time: '2026-02-11T14:20:04.587660+07:00'
+  },
+  {
+    id: 5,
+    name: 'Giao hàng',
+    details: 'Đã giao thành công',
+    icon: 'material-symbols:check-circle-outline-rounded',
+    color: 'green',
+    time: '2026-02-11T17:38:04.587660+07:00'
+  },
+]
+</script>
+
+<template>
+  <div>
+    <div class="is-flex is-flex-direction-column is-gap-2">
+      <div
+        v-for="item in historyItems" 
+        :key="item.id"
+        class="is-flex is-gap-2"
+      >
+        <div class="is-flex is-flex-direction-column is-align-items-center is-gap-0.5">
+          <Icon
+            :name="item.icon"
+            :size="22"
+            :class="`has-text-${item.color}-40`"
+          />
+          <div class="is-flex-grow-1 has-background-grey-lighter rounded-full"
+            style="width: 3px"
+          ></div>
+        </div>
+        <div class="is-flex-grow-1">
+          <div class="is-flex is-gap-1 is-justify-content-space-between">
+            <div>
+              <p class="fs-15">{{ item.name }}</p>
+              <p class="fs-13 has-text-grey">{{ item.details }}</p>
+            </div>
+            <p class="is-family-monospace fs-12 has-text-grey">{{ $dayjs(item.time).format('HH:mm') }}</p>
+          </div>
+          <hr class="mt-4 mb-0 has-background-grey-95" style="height: 2px" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>