changes

app/components/orders/OrderHighlights.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { useInvoices } from "~/components/orders/composables/useInvoices";
+import OrderHighlightCard from "~/components/orders/OrderHighlightCard.vue";
+
+const store = useStore();
+const { invoices, invoicesByStatus } = useInvoices();
+
+const iconMap = {
+  DRAFT: "material-symbols:assignment-outline-rounded",
+  CONFIRMED: "material-symbols:check-circle-outline-rounded",
+  SHIPPING: "material-symbols:delivery-truck-speed-outline-rounded",
+  COMPLETED: "material-symbols:box-outline-rounded",
+};
+
+const revenue = computed(() => {
+  return invoices.value.reduce((prev, curr) => prev + curr.final_amount, 0);
+});
+</script>
+
+<template>
+  <div class="fixed-grid has-2-cols-mobile has-5-cols">
+    <div class="grid">
+      <OrderHighlightCard
+        v-for="invoiceStatus in store.Invoice_Status"
+        :key="invoiceStatus.id"
+        v-bind="{
+          ...invoiceStatus,
+          value: invoicesByStatus[invoiceStatus.code]?.length || 0,
+          icon: iconMap[invoiceStatus.code],
+        }"
+      />
+      <OrderHighlightCard
+        v-bind="{
+          name: 'Doanh thu',
+          value: $shortenCurrency(revenue),
+          icon: 'material-symbols:attach-money-rounded',
+          color: 'purple',
+          unit: 'VNĐ',
+        }"
+      />
+    </div>
+  </div>
+</template>