feat: build UI

app/components/dashboard/OrderStatus.vue

@@ -0,0 +1,54 @@
+<script setup>
+import OrderStatusCard from '@/components/dashboard/OrderStatusCard.vue';
+
+const statuses = [
+  {
+    id: 1,
+    code: 'pending',
+    name: 'Chờ xử lý',
+    value: 12,
+    color: 'orange',
+    icon: 'material-symbols:clock-loader-40'
+  },
+  {
+    id: 2,
+    code: 'delivering',
+    name: 'Đang giao',
+    value: 8,
+    color: 'blue',
+    icon: 'material-symbols:delivery-truck-speed-outline-rounded'
+  },
+  {
+    id: 3,
+    code: 'delivered',
+    name: 'Đã giao',
+    value: 15,
+    color: 'purple',
+    icon: 'material-symbols:bucket-check-outline-rounded'
+  },
+  {
+    id: 4,
+    code: 'completed',
+    name: 'Hoàn thành',
+    value: 38,
+    color: 'green',
+    icon: 'material-symbols:check-circle-outline-rounded'
+  },
+]
+</script>
+<template>
+  <div class="card h-full">
+    <div class="card-content">
+      <p class="fs-17 font-semibold mb-4">Trạng thái đơn hàng</p>
+      <div class="fixed-grid has-2-cols-mobile has-4-cols">
+        <div class="grid">
+          <OrderStatusCard
+            v-for="status in statuses"
+            :key="status.name"
+            v-bind="status"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>