feat: build UI

app/components/dashboard/Dashboard.vue

@@ -1,5 +1,90 @@
 <script setup>
+import DashboardHighlightCard from '@/components/dashboard/DashboardHighlightCard.vue';
+import Delivery from '@/components/dashboard/Delivery.vue';
+import OrderStatus from '@/components/dashboard/OrderStatus.vue';
+import RevenueChart from '@/components/dashboard/RevenueChart.vue';
+import TopCustomers from '@/components/dashboard/TopCustomers.vue';
+import TopProducts from '@/components/dashboard/TopProducts.vue';
+import Warnings from '@/components/dashboard/Warnings.vue';
+
+const highlights = [
+  {
+    name: 'Doanh thu hôm nay',
+    value: '72.5M',
+    color: 'blue',
+    icon: 'material-symbols:attach-money-rounded',
+    subheader: { 
+      value: '+12.5%',
+      fluctuation: 'up',
+    }
+  },
+  {
+    name: 'Số đơn hàng',
+    value: '73',
+    color: 'purple',
+    icon: 'material-symbols:shopping-cart-outline-rounded',
+    subheader: { 
+      value: '+8 đơn',
+      fluctuation: 'up',
+    }
+  },
+  {
+    name: 'Đơn đang giao',
+    value: '8',
+    color: 'orange',
+    icon: 'material-symbols:delivery-truck-speed-outline-rounded',
+  },
+  {
+    name: 'Đơn hoàn thành',
+    value: '38',
+    color: 'green',
+    icon: 'material-symbols:check-circle-outline-rounded', 
+  },
+  {
+    name: 'Công nợ phải thu',
+    value: '245M',
+    color: 'red',
+    icon: 'material-symbols:universal-currency-alt-outline-rounded',
+    subheader: { 
+      value: '+15M',
+      fluctuation: 'down',
+    }
+  },
+  {
+    name: 'Tồn kho',
+    value: '1,250',
+    color: 'cyan',
+    icon: 'material-symbols:box-outline-rounded',
+    subheader: { 
+      value: '-45 SP',
+      fluctuation: 'down',
+    }
+  },
+]
 </script>
 <template>
-  Dashboard
+  <div>
+    <div class="fixed-grid has-2-cols has-3-cols-tablet has-6-cols-desktop">
+      <div class="grid">
+        <DashboardHighlightCard 
+          v-for="highlight in highlights"
+          v-bind="highlight"
+        />
+      </div>
+    </div>
+    <div class="fixed-grid has-3-cols">
+      <div class="grid">
+        <div class="cell is-col-span-2">
+          <RevenueChart />
+        </div>
+        <div class="cell">
+          <TopCustomers />
+        </div>
+      </div>
+    </div>
+    <TopProducts />
+    <OrderStatus />
+    <Delivery />
+    <Warnings />
+  </div>
 </template>