55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<script setup>
|
|
import OrderHighlightCard from '@/components/orders/OrderHighlightCard.vue';
|
|
import OrderPipeline from '@/components/orders/OrderPipeline.vue';
|
|
import OrdersTable from '@/components/orders/OrdersTable.vue';
|
|
|
|
const highlights = [
|
|
{
|
|
name: 'Nháp',
|
|
value: 2,
|
|
icon: 'material-symbols:assignment-outline-rounded',
|
|
color: 'yellow',
|
|
},
|
|
{
|
|
name: 'Đã xác nhận',
|
|
value: 3,
|
|
icon: 'material-symbols:check-circle-outline-rounded',
|
|
color: 'blue',
|
|
},
|
|
{
|
|
name: 'Đang giao',
|
|
value: 2,
|
|
icon: 'material-symbols:delivery-truck-speed-outline-rounded',
|
|
color: 'orange',
|
|
},
|
|
{
|
|
name: 'Hoàn thành',
|
|
value: 1,
|
|
icon: 'material-symbols:box-outline-rounded',
|
|
color: 'green',
|
|
},
|
|
{
|
|
name: 'Doanh thu',
|
|
value: '6.8M',
|
|
icon: 'material-symbols:attach-money-rounded',
|
|
color: 'purple',
|
|
unit: 'VNĐ'
|
|
},
|
|
]
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div class="fixed-grid has-2-cols-mobile has-5-cols">
|
|
<div class="grid">
|
|
<OrderHighlightCard
|
|
v-for="highlight in highlights"
|
|
:key="highlight.name"
|
|
v-bind="highlight"
|
|
/>
|
|
</div>
|
|
<OrderPipeline />
|
|
<OrdersTable />
|
|
</div>
|
|
</div>
|
|
</template>
|