123 lines
4.2 KiB
Vue
123 lines
4.2 KiB
Vue
<template>
|
||
<AdminLayout>
|
||
<section
|
||
class="relative overflow-hidden rounded-2xl border border-brand-500/25 bg-gradient-to-br from-brand-500/15 via-surface-2 to-surface-2 p-5"
|
||
>
|
||
<div class="relative">
|
||
<p class="text-sm text-muted">خوش آمدید</p>
|
||
<h1 class="mt-1 text-xl font-bold text-text">
|
||
{{ auth.user?.fullName ?? 'سوپر ادمین' }}
|
||
</h1>
|
||
<p class="mt-1 text-sm text-muted" dir="ltr">{{ auth.user?.mobile }}</p>
|
||
</div>
|
||
</section>
|
||
|
||
<p v-if="error" class="mt-4 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600">
|
||
{{ error }}
|
||
</p>
|
||
|
||
<div v-if="loading" class="mt-6 text-sm text-muted">در حال بارگذاری…</div>
|
||
|
||
<template v-else>
|
||
<div class="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-3">
|
||
<StatCard
|
||
v-for="card in statCards"
|
||
:key="card.label"
|
||
:label="card.label"
|
||
:value="card.value"
|
||
:icon="card.icon"
|
||
:to="card.to"
|
||
:tone="card.tone"
|
||
/>
|
||
</div>
|
||
|
||
<section class="mt-8">
|
||
<div class="mb-3 flex items-center justify-between">
|
||
<h2 class="text-base font-bold text-text">آخرین کسبوکارها</h2>
|
||
<RouterLink to="/businesses" class="text-sm text-brand-700 dark:text-brand-500">
|
||
همه
|
||
</RouterLink>
|
||
</div>
|
||
|
||
<EmptyState v-if="recentBusinesses.length === 0">
|
||
هنوز کسبوکاری ثبت نشده.
|
||
<RouterLink to="/businesses" class="mt-2 inline-block text-brand-700">
|
||
افزودن کسبوکار
|
||
</RouterLink>
|
||
</EmptyState>
|
||
|
||
<div v-else class="space-y-2">
|
||
<RouterLink
|
||
v-for="biz in recentBusinesses"
|
||
:key="biz.id"
|
||
to="/businesses"
|
||
class="block"
|
||
>
|
||
<BusinessListCard :business="biz" />
|
||
</RouterLink>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
</AdminLayout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, onMounted, ref } from 'vue';
|
||
import { fetchBookings } from '@/api/bookings';
|
||
import { fetchCategories } from '@/api/business-categories';
|
||
import { fetchBusinesses } from '@/api/businesses';
|
||
import { fetchUsers } from '@/api/users';
|
||
import type { Business } from '@/api/types';
|
||
import { ApiError } from '@/api/client';
|
||
import BusinessListCard from '@/components/admin/BusinessListCard.vue';
|
||
import StatCard from '@/components/admin/StatCard.vue';
|
||
import EmptyState from '@/components/ui/EmptyState.vue';
|
||
import AdminLayout from '@/layouts/AdminLayout.vue';
|
||
import { useAuthStore } from '@/stores/auth';
|
||
|
||
const auth = useAuthStore();
|
||
const loading = ref(true);
|
||
const error = ref('');
|
||
const businesses = ref<Business[]>([]);
|
||
const counts = ref({
|
||
businesses: 0,
|
||
activeBusinesses: 0,
|
||
bookings: 0,
|
||
users: 0,
|
||
categories: 0,
|
||
});
|
||
|
||
const statCards = computed(() => [
|
||
{ label: 'کسبوکار', value: counts.value.businesses, icon: '🏪', to: '/businesses', tone: 'amber' as const },
|
||
{ label: 'فعال', value: counts.value.activeBusinesses, icon: '✓', to: '/businesses', tone: 'emerald' as const },
|
||
{ label: 'رزرو', value: counts.value.bookings, icon: '📅', to: '/bookings', tone: 'sky' as const },
|
||
{ label: 'کاربر', value: counts.value.users, icon: '👥', to: '/users', tone: 'violet' as const },
|
||
{ label: 'دسته', value: counts.value.categories, icon: '📁', to: '/categories', tone: 'rose' as const },
|
||
]);
|
||
|
||
const recentBusinesses = computed(() => businesses.value.slice(0, 6));
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
const [bizList, users, categories, bookingList] = await Promise.all([
|
||
fetchBusinesses(),
|
||
fetchUsers(),
|
||
fetchCategories(),
|
||
fetchBookings().catch(() => []),
|
||
]);
|
||
businesses.value = bizList;
|
||
counts.value = {
|
||
businesses: bizList.length,
|
||
activeBusinesses: bizList.filter((b) => b.isActive).length,
|
||
bookings: bookingList.length,
|
||
users: users.length,
|
||
categories: categories.length,
|
||
};
|
||
} catch (e) {
|
||
error.value = e instanceof ApiError ? e.message : 'خطا در بارگذاری';
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
});
|
||
</script>
|