44 lines
1.3 KiB
Vue
44 lines
1.3 KiB
Vue
<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>
|