feat: build UI

app/components/orders/OrderPipeline.vue

@@ -0,0 +1,53 @@
+<script setup>
+import PipelinePhase from '@/components/orders/PipelinePhase.vue';
+
+const phases = [
+  {
+    name: 'Nháp',
+    value: 2,
+    icon: 'material-symbols:assignment-outline-rounded',
+    color: 'yellow',
+    index: 1,
+  },
+  {
+    name: 'Đã xác nhận',
+    value: 3,
+    icon: 'material-symbols:check-circle-outline-rounded',
+    color: 'blue',
+    index: 2,
+  },
+  {
+    name: 'Đang giao',
+    value: 2,
+    icon: 'material-symbols:delivery-truck-speed-outline-rounded',
+    color: 'orange',
+    index: 3,
+  },
+  {
+    name: 'Hoàn thành',
+    value: 1,
+    icon: 'material-symbols:box-outline-rounded',
+    color: 'green',
+    index: 4,
+  },
+]
+</script>
+<template>
+  <div class="card">
+    <div class="card-content">
+      <p class="fs-17 font-semibold mb-4">Pipeline đơn hàng</p>
+      <div class="is-flex is-justify-content-space-evenly">
+        <PipelinePhase
+          v-for="phase in phases"
+          :key="phases.name"
+          v-bind="phase"
+        />
+      </div>
+      <hr class="has-background-grey-lighter" />
+      <div class="is-flex is-justify-content-space-between">
+        <p>Tổng đơn hàng</p>
+        <p class="fs-18 font-semibold">{{ phases.reduce((prev, curr) => prev + curr.value, 0) }}</p>
+      </div>
+    </div>
+  </div>
+</template>