feat: build UI

app/components/orders/Orders.vue

@@ -1,5 +1,54 @@
 <script setup>
+import OrderHighlightCard from '@/components/orders/OrderHighlightCard.vue';
+import OrderPipeline from '@/components/orders/OrderPipeline.vue';
+import OrdersTable from '@/components/orders/OrdersTable.vue';
+
+const highlights = [
+  {
+    name: 'Nháp',
+    value: 2,
+    icon: 'material-symbols:assignment-outline-rounded',
+    color: 'yellow',
+  },
+  {
+    name: 'Đã xác nhận',
+    value: 3,
+    icon: 'material-symbols:check-circle-outline-rounded',
+    color: 'blue',
+  },
+  {
+    name: 'Đang giao',
+    value: 2,
+    icon: 'material-symbols:delivery-truck-speed-outline-rounded',
+    color: 'orange',
+  },
+  {
+    name: 'Hoàn thành',
+    value: 1,
+    icon: 'material-symbols:box-outline-rounded',
+    color: 'green',
+  },
+  {
+    name: 'Doanh thu',
+    value: '6.8M',
+    icon: 'material-symbols:attach-money-rounded',
+    color: 'purple',
+    unit: 'VNĐ'
+  },
+]
 </script>
 <template>
-  Orders
-</template>
+  <div>
+    <div class="fixed-grid has-2-cols-mobile has-5-cols">
+      <div class="grid">
+        <OrderHighlightCard
+          v-for="highlight in highlights"
+          :key="highlight.name"
+          v-bind="highlight"
+        />
+      </div>
+      <OrderPipeline />
+      <OrdersTable />
+    </div>
+  </div>
+</template>