92 lines
2.2 KiB
Vue
92 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>
|