56 lines
2.1 KiB
Vue
56 lines
2.1 KiB
Vue
<template>
|
||
<div>
|
||
<h1 class="mb-6 text-2xl font-bold text-gray-900">Дашборд</h1>
|
||
|
||
<div v-if="loading" class="text-gray-500">Загрузка...</div>
|
||
|
||
<div v-else class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
||
<p class="text-sm text-gray-500">Заказов сегодня</p>
|
||
<p class="mt-1 text-3xl font-bold text-gray-900">{{ stats.orders_today }}</p>
|
||
</div>
|
||
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
||
<p class="text-sm text-gray-500">Ожидают обработки</p>
|
||
<p class="mt-1 text-3xl font-bold text-amber-600">{{ stats.pending_orders }}</p>
|
||
</div>
|
||
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
||
<p class="text-sm text-gray-500">Всего заказов</p>
|
||
<p class="mt-1 text-3xl font-bold text-gray-900">{{ stats.total_orders }}</p>
|
||
</div>
|
||
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
||
<p class="text-sm text-gray-500">Выручка</p>
|
||
<p class="mt-1 text-3xl font-bold text-green-600">{{ fmt(stats.total_revenue) }} ₽</p>
|
||
</div>
|
||
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
||
<p class="text-sm text-gray-500">Расчётов</p>
|
||
<p class="mt-1 text-3xl font-bold text-gray-900">{{ stats.total_calculations }}</p>
|
||
</div>
|
||
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
||
<p class="text-sm text-gray-500">Материалов</p>
|
||
<p class="mt-1 text-3xl font-bold text-gray-900">{{ stats.materials_count }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import api from '../../api/client'
|
||
|
||
const loading = ref(true)
|
||
const stats = ref({})
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
const { data } = await api.get('/admin/dashboard')
|
||
stats.value = data
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
})
|
||
|
||
function fmt(n) {
|
||
return new Intl.NumberFormat('ru-RU', { maximumFractionDigits: 0 }).format(n || 0)
|
||
}
|
||
</script>
|