91 lines
2.2 KiB
Vue
91 lines
2.2 KiB
Vue
<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>
|
|
<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"
|
|
:key="highlight.name"
|
|
v-bind="highlight"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="fixed-grid has-1-cols-mobile 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> |