admin/src/views/DashboardView.vue

<template>
  <div>
    <p class="mb-6 text-slate-600">به پنل مدیریت استودیو نورو خوش آمدید.</p>

    <div v-if="loading" class="text-slate-500">در حال بارگذاری...</div>

    <div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
      <div v-for="stat in stats" :key="stat.label" class="card">
        <p class="text-3xl font-bold text-brand">{{ stat.value }}</p>
        <p class="mt-1 text-sm text-slate-600">{{ stat.label }}</p>
      </div>
    </div>

    <div class="mt-8 grid gap-4 lg:grid-cols-2">
      <div class="card">
        <h2 class="mb-4 font-semibold text-slate-800">دسترسی سریع</h2>
        <div class="flex flex-wrap gap-2">
          <RouterLink :to="{ name: 'site' }" class="btn-secondary">تنظیمات سایت</RouterLink>
          <RouterLink :to="{ name: 'portfolio-edit' }" class="btn-secondary">نمونه‌کار جدید</RouterLink>
          <RouterLink :to="{ name: 'blog-edit' }" class="btn-secondary">مطلب جدید</RouterLink>
          <RouterLink :to="{ name: 'contact-requests' }" class="btn-secondary">درخواست‌های تماس</RouterLink>
          <RouterLink :to="{ name: 'media' }" class="btn-secondary">آپلود رسانه</RouterLink>
        </div>
      </div>

      <div class="card">
        <h2 class="mb-2 font-semibold text-slate-800">اطلاعات سایت</h2>
        <p class="text-sm text-slate-600">{{ siteName }}</p>
        <p class="mt-1 text-sm text-slate-500">{{ siteTagline }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { api } from '@/api/client'

const loading = ref(true)
const siteName = ref('')
const siteTagline = ref('')
const stats = ref([
  { value: '—', label: 'نمونه‌کار' },
  { value: '—', label: 'خدمات' },
  { value: '—', label: 'مشتری' },
  { value: '—', label: 'مطلب وبلاگ' },
  { value: '—', label: 'درخواست جدید' },
])

onMounted(async () => {
  try {
    const [site, projects, services, clients, posts, contactRequests] = await Promise.all([
      api.getSite(),
      api.getProjects(),
      api.getServices(),
      api.getClients(),
      api.getBlogPosts(),
      api.getContactRequests(),
    ])
    siteName.value = site.name || 'استودیو نورو'
    siteTagline.value = site.tagline || ''
    const newRequests = contactRequests.filter((r) => r.status === 'new').length
    stats.value = [
      { value: String(projects.length), label: 'نمونه‌کار' },
      { value: String(services.length), label: 'خدمات' },
      { value: String(clients.length), label: 'مشتری' },
      { value: String(posts.length), label: 'مطلب وبلاگ' },
      { value: String(newRequests), label: 'درخواست جدید' },
    ]
  } catch {
    // stats stay as dashes
  } finally {
    loading.value = false
  }
})
</script>