feat: build UI

app/components/dashboard/RevenueChart.vue

@@ -0,0 +1,61 @@
+<script setup>
+const { $shortenCurrency } = useNuxtApp();
+const revenueChartOptions = {
+  chart: {
+    type: 'spline'
+  },
+  credits: {
+    enabled: false,
+  },
+  title: {
+    text: null,
+  },
+  xAxis: {
+    categories: [
+      '10/4', '11/4', '12/4', '13/4', '14/4', '15/4', '16/4', '17/4', '18/4'
+    ],
+    accessibility: {
+      description: 'Dates'
+    }
+  },
+  yAxis: {
+    title: {
+      text: 'Doanh thu'
+    },
+    labels: {
+      format: '{value}'
+    }
+  },
+  tooltip: {
+    crosshairs: true,
+    shared: true,
+    valueSuffix: ' VNĐ',
+  },
+  plotOptions: {
+    spline: {
+      marker: {
+        enabled: false
+      }
+    }
+  },
+  series: [{
+    name: 'Doanh thu',
+    data: [45000000, 52000000, 48000000, 51000000, 58000000, 61000000, 67500000, 72000000, 69000000],
+    showInLegend: false,
+  }]
+};
+</script>
+<template>
+  <div class="card">
+    <div class="card-content">
+      <div class="is-flex is-justify-content-space-between mb-2">
+        <p style="font-weight: 600; font-size: 18px">Doanh thu theo ngày</p>
+        <div class="buttons">
+          <button class="button is-primary fs-14">7 ngày</button>
+          <button class="button is-white fs-14">30 ngày</button>
+        </div>
+      </div>
+      <highcharts :options="revenueChartOptions" />
+    </div>
+  </div>
+</template>