92 lines
2.4 KiB
Vue
92 lines
2.4 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Đ'
|
|
},
|
|
];
|
|
|
|
const viewModes = [
|
|
{ name: 'list', icon: 'material-symbols:format-list-bulleted-rounded' },
|
|
{ name: 'grid', icon: 'material-symbols:grid-view-outline-rounded' }
|
|
];
|
|
const viewMode = ref('list');
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div class="content is-flex is-gap-2 is-justify-content-flex-end is-align-items-center">
|
|
<div class="tabs is-toggle m-0">
|
|
<ul class="is-flex-grow-0 ml-auto">
|
|
<li
|
|
v-for="mode in viewModes"
|
|
:key="mode.name"
|
|
:class="[mode.name === viewMode && 'is-active']"
|
|
@click="viewMode = mode.name"
|
|
>
|
|
<a class="px-3 py-1">
|
|
<span class="icon m-0">
|
|
<Icon :name="mode.icon" :size="18" />
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button class="button fs-14 is-primary">
|
|
<span class="icon">
|
|
<Icon :size="18" name="material-symbols:add-2-rounded" />
|
|
</span>
|
|
<span>Tạo đơn hàng</span>
|
|
</button>
|
|
</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>
|
|
</div>
|
|
<OrderPipeline />
|
|
<OrdersTable :viewMode="viewMode" />
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.tabs {
|
|
--bulma-tabs-toggle-link-active-background-color: var(--bulma-link-90);
|
|
--bulma-tabs-toggle-link-active-border-color: var(--bulma-link-90);
|
|
--bulma-tabs-toggle-link-active-color: var(--bulma-link-40);
|
|
}
|
|
</style>
|