SadmMontime/src/views/DashboardView.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>