55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<script setup>
|
|
import OrderStatusCard from "@/components/dashboard/OrderStatusCard.vue";
|
|
|
|
const statuses = [
|
|
{
|
|
id: 1,
|
|
code: "pending",
|
|
name: "Chờ xử lý",
|
|
value: 12,
|
|
color: "orange",
|
|
icon: "material-symbols:clock-loader-40",
|
|
},
|
|
{
|
|
id: 2,
|
|
code: "delivering",
|
|
name: "Đang giao",
|
|
value: 8,
|
|
color: "blue",
|
|
icon: "material-symbols:delivery-truck-speed-outline-rounded",
|
|
},
|
|
{
|
|
id: 3,
|
|
code: "delivered",
|
|
name: "Đã giao",
|
|
value: 15,
|
|
color: "purple",
|
|
icon: "material-symbols:bucket-check-outline-rounded",
|
|
},
|
|
{
|
|
id: 4,
|
|
code: "completed",
|
|
name: "Hoàn thành",
|
|
value: 38,
|
|
color: "green",
|
|
icon: "material-symbols:check-circle-outline-rounded",
|
|
},
|
|
];
|
|
</script>
|
|
<template>
|
|
<div class="card h-full">
|
|
<div class="card-content">
|
|
<p class="fs-17 font-semibold mb-4">Trạng thái đơn hàng</p>
|
|
<div class="fixed-grid has-2-cols-mobile has-4-cols">
|
|
<div class="grid">
|
|
<OrderStatusCard
|
|
v-for="status in statuses"
|
|
:key="status.name"
|
|
v-bind="status"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|