47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<script setup>
|
|
import InventoryHighlightCard from '@/components/inventory/InventoryHighlightCard.vue';
|
|
import InventoryTable from '@/components/inventory/InventoryTable.vue';
|
|
|
|
const inventoryHighlights = [
|
|
{
|
|
name: 'Tổng số SKU',
|
|
value: 12,
|
|
icon: 'material-symbols:deployed-code-outline',
|
|
color: 'blue',
|
|
},
|
|
{
|
|
name: 'Tổng tồn kho',
|
|
value: '1,120',
|
|
icon: 'material-symbols:box-outline-rounded',
|
|
color: 'green',
|
|
unit: 'đơn vị'
|
|
},
|
|
{
|
|
name: 'Giá trị tồn kho',
|
|
value: '294.5M',
|
|
icon: 'material-symbols:attach-money-rounded',
|
|
color: 'purple',
|
|
},
|
|
{
|
|
name: 'Sắp hết hàng',
|
|
value: 3,
|
|
icon: 'material-symbols:warning-outline-rounded',
|
|
color: 'red',
|
|
unit: 'sản phẩm'
|
|
},
|
|
];
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div class="fixed-grid has-2-cols-mobile has-4-cols">
|
|
<div class="grid">
|
|
<InventoryHighlightCard
|
|
v-for="highlight in inventoryHighlights"
|
|
:key="highlight.name"
|
|
v-bind="highlight"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<InventoryTable />
|
|
</div>
|
|
</template> |