Add business.

src/views/DashboardView.vue

@@ -1,6 +1,16 @@
 <template>
   <AdminLayout>
-    <PageHeader title="داشبورد" subtitle="خلاصه وضعیت سیستم" />
+    <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 }}
@@ -8,23 +18,46 @@
 
     <div v-if="loading" class="mt-6 text-sm text-muted">در حال بارگذاری…</div>
 
-    <div v-else class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-      <RouterLink
-        v-for="card in cards"
-        :key="card.label"
-        :to="card.to"
-        class="rounded-2xl border border-border bg-surface-2 p-4 transition hover:border-brand-500/50"
-      >
-        <p class="text-xs text-muted">{{ card.label }}</p>
-        <p class="mt-1 text-2xl font-bold text-text">{{ card.value }}</p>
-      </RouterLink>
-    </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>
 
-    <div v-if="auth.user" class="mt-6 rounded-2xl border border-border bg-surface-2 p-4 text-sm">
-      <p class="text-xs text-muted">ورود شما</p>
-      <p class="mt-1 font-medium" dir="ltr">{{ auth.user.mobile }}</p>
-      <p class="mt-1 text-muted">{{ auth.user.fullName ?? 'بدون نام' }}</p>
-    </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="grid grid-cols-2 gap-3">
+          <RouterLink
+            v-for="biz in recentBusinesses"
+            :key="biz.id"
+            to="/businesses"
+            class="block"
+          >
+            <BusinessListCard :business="biz" />
+          </RouterLink>
+        </div>
+      </section>
+    </template>
   </AdminLayout>
 </template>
 
@@ -34,14 +67,18 @@ 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 PageHeader from '@/components/ui/PageHeader.vue';
+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,
@@ -50,31 +87,34 @@ const counts = ref({
   categories: 0,
 });
 
-const cards = computed(() => [
-  { label: 'کسب‌وکارها', value: counts.value.businesses, to: '/businesses' },
-  { label: 'کسب‌وکار فعال', value: counts.value.activeBusinesses, to: '/businesses' },
-  { label: 'رزروها', value: counts.value.bookings, to: '/bookings' },
-  { label: 'کاربران', value: counts.value.users, to: '/users' },
-  { label: 'دسته‌ها', value: counts.value.categories, to: '/categories' },
+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 [businesses, users, categories, bookingList] = await Promise.all([
+    const [bizList, users, categories, bookingList] = await Promise.all([
       fetchBusinesses(),
       fetchUsers(),
       fetchCategories(),
       fetchBookings().catch(() => []),
     ]);
+    businesses.value = bizList;
     counts.value = {
-      businesses: businesses.length,
-      activeBusinesses: businesses.filter((b) => b.isActive).length,
+      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 : 'خطا در بارگذاری آمار';
+    error.value = e instanceof ApiError ? e.message : 'خطا در بارگذاری';
   } finally {
     loading.value = false;
   }