Refactor code structure for improved readability and maintainability

2026-06-10 15:31:58 +03:30
parent 30cf2e7a8c
commit 8ed3d41d27
5 changed files with 5332 additions and 141 deletions
@@ -1,21 +1,21 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { Link } from 'react-router-dom';
 import {
-  UserGroupIcon,
-  HeartIcon,
-  BuildingOffice2Icon,
-  CalendarDaysIcon,
-  CreditCardIcon,
+  AreaChart, Area, BarChart, Bar, PieChart, Pie, Cell,
+  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
+} from 'recharts';
+import {
+  UserGroupIcon, HeartIcon, BuildingOffice2Icon, CalendarDaysIcon,
+  CreditCardIcon, ArrowPathIcon, BellAlertIcon, UserPlusIcon,
  ChatBubbleLeftEllipsisIcon,
-  BanknotesIcon,
-  ArrowPathIcon,
-  UserPlusIcon,
 } from '@heroicons/react/24/outline';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
 import { formatNumber, formatRial, formatDateTime } from '../lib/utils';

+// ── Types ─────────────────────────────────────────────────────────────────
+
 interface DashboardStats {
  total_users: number;
  active_doctors: number;
@@ -28,80 +28,60 @@ interface DashboardStats {
  total_payments_amount: number;
  pending_comments: number;
  pending_settlements: number;
+  this_month_revenue: number;
+  this_month_appointments: number;
+}
+
+interface ChartData {
+  appointments_30d: { date: string; count: number }[];
+  revenue_30d:      { date: string; amount: number }[];
+  appointment_status: { status: string; count: number }[];
+  top_specialties:   { name: string; count: number }[];
 }

 interface RecentAppointment {
-  uuid: string;
-  slot_start: string;
-  status: string;
-  doctor_name: string;
-  user_mobile: string;
-  user_name: string | null;
-  created_at: string;
+  uuid: string; slot_start: string; status: string;
+  doctor_name: string; user_mobile: string; user_name: string | null; created_at: string;
 }
-
 interface RecentPayment {
-  uuid: string;
-  amount: number;
-  status: string;
-  gateway: string;
-  user_mobile: string;
-  user_name: string | null;
-  created_at: string;
+  uuid: string; amount: number; status: string; gateway: string;
+  user_mobile: string; user_name: string | null; created_at: string;
 }
-
 interface RecentUser {
-  uuid: string;
-  mobile: string;
-  name: string | null;
-  email: string | null;
-  created_at: string;
+  uuid: string; mobile: string; name: string | null; email: string | null; created_at: string;
 }
-
 interface RecentData {
  appointments: RecentAppointment[];
-  payments: RecentPayment[];
-  users: RecentUser[];
+  payments:     RecentPayment[];
+  users:        RecentUser[];
 }

-const APPT_STATUS: Record<string, { label: string; cls: string }> = {
-  waiting_for_payment: { label: 'انتظار پرداخت', cls: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-700 dark:text-yellow-300' },
-  reserved:            { label: 'رزرو شده',      cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300' },
-  checked_in:          { label: 'ورود به مطب',   cls: 'bg-indigo-100 dark:bg-indigo-400/10 text-indigo-700 dark:text-indigo-300' },
-  waiting:             { label: 'صف انتظار',     cls: 'bg-orange-100 dark:bg-orange-400/10 text-orange-700 dark:text-orange-300' },
-  in_progress:         { label: 'در حال ویزیت',  cls: 'bg-purple-100 dark:bg-purple-400/10 text-purple-700 dark:text-purple-300' },
-  visited:             { label: 'ویزیت شده',     cls: 'bg-emerald-100 dark:bg-emerald-400/10 text-emerald-700 dark:text-emerald-300' },
-  completed:           { label: 'تکمیل شده',     cls: 'bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300' },
-  cancelled_by_doctor: { label: 'لغو پزشک',      cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300' },
-  cancelled_by_user:   { label: 'لغو بیمار',     cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300' },
-  auto_cancel_unpaid:  { label: 'لغو خودکار',    cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400' },
-  no_show:             { label: 'غیبت',           cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400' },
+// ── Status maps ───────────────────────────────────────────────────────────
+
+const APPT: Record<string, { label: string; cls: string; color: string }> = {
+  waiting_for_payment: { label: 'انتظار پرداخت', cls: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-700 dark:text-yellow-300',     color: '#f59e0b' },
+  reserved:            { label: 'رزرو شده',      cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300',             color: '#3b82f6' },
+  checked_in:          { label: 'ورود به مطب',   cls: 'bg-indigo-100 dark:bg-indigo-400/10 text-indigo-700 dark:text-indigo-300',     color: '#6366f1' },
+  waiting:             { label: 'صف انتظار',     cls: 'bg-orange-100 dark:bg-orange-400/10 text-orange-700 dark:text-orange-300',     color: '#f97316' },
+  in_progress:         { label: 'در حال ویزیت',  cls: 'bg-purple-100 dark:bg-purple-400/10 text-purple-700 dark:text-purple-300',     color: '#8b5cf6' },
+  visited:             { label: 'ویزیت شده',     cls: 'bg-emerald-100 dark:bg-emerald-400/10 text-emerald-700 dark:text-emerald-300', color: '#10b981' },
+  completed:           { label: 'تکمیل شده',     cls: 'bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300',         color: '#22c55e' },
+  cancelled_by_doctor: { label: 'لغو پزشک',      cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300',                color: '#ef4444' },
+  cancelled_by_user:   { label: 'لغو بیمار',     cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300',                color: '#f43f5e' },
+  auto_cancel_unpaid:  { label: 'لغو خودکار',    cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400',        color: '#94a3b8' },
+  no_show:             { label: 'غیبت',           cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400',        color: '#64748b' },
 };

-const PAY_STATUS: Record<string, { label: string; cls: string }> = {
-  pending:  { label: 'در انتظار', cls: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-700 dark:text-yellow-300' },
-  received: { label: 'موفق',      cls: 'bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300' },
-  canceled: { label: 'لغو شده',   cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300' },
-  refund:   { label: 'استرداد',   cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300' },
+const PAY: Record<string, { label: string; cls: string; color: string }> = {
+  pending:  { label: 'در انتظار', cls: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-700 dark:text-yellow-300', color: '#f59e0b' },
+  received: { label: 'موفق',      cls: 'bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300',     color: '#22c55e' },
+  canceled: { label: 'لغو شده',   cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300',            color: '#ef4444' },
+  refund:   { label: 'استرداد',   cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300',        color: '#3b82f6' },
 };

-function MicroBadge({ status, map }: { status: string; map: Record<string, { label: string; cls: string }> }) {
-  const s = map[status] ?? { label: status, cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400' };
-  return (
-    <span className={`shrink-0 text-[10px] font-medium px-2 py-0.5 rounded-full ${s.cls}`}>{s.label}</span>
-  );
-}
+// ── Skeletons ─────────────────────────────────────────────────────────────

-interface StatCard {
-  label: string;
-  value: string;
-  sub?: string;
-  icon: React.ElementType;
-  iconBg: string;
-  iconColor: string;
-}
-
-function StatCardSkeleton() {
+function KpiSkeleton() {
  return (
    <div className="cp-card p-5 flex items-start gap-4">
      <div className="w-11 h-11 rounded-xl skeleton shrink-0" />
@@ -114,10 +94,14 @@ function StatCardSkeleton() {
  );
 }

-function RecentSkeleton() {
+function ChartSkeleton({ h = 'h-56' }: { h?: string }) {
+  return <div className={`${h} rounded-xl skeleton w-full`} />;
+}
+
+function ListSkeleton() {
  return (
-    <div className="space-y-3 mt-1">
-      {[...Array(4)].map((_, i) => (
+    <div className="space-y-3">
+      {Array.from({ length: 4 }).map((_, i) => (
        <div key={i} className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-full skeleton shrink-0" />
          <div className="flex-1 space-y-1.5">
@@ -130,87 +114,393 @@ function RecentSkeleton() {
  );
 }

+// ── Badge ─────────────────────────────────────────────────────────────────
+
+function Badge({ status, map }: { status: string; map: Record<string, { label: string; cls: string }> }) {
+  const s = map[status] ?? { label: status, cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600' };
+  return (
+    <span className={`shrink-0 text-[10px] font-medium px-2 py-0.5 rounded-full ${s.cls}`}>{s.label}</span>
+  );
+}
+
+// ── Chart helpers ─────────────────────────────────────────────────────────
+
+const RADIAN = Math.PI / 180;
+
+function PieLabelInside({ cx, cy, midAngle, innerRadius, outerRadius, percent }: {
+  cx: number; cy: number; midAngle: number; innerRadius: number; outerRadius: number; percent: number;
+}) {
+  if (percent < 0.06) return null;
+  const r = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const x = cx + r * Math.cos(-midAngle * RADIAN);
+  const y = cy + r * Math.sin(-midAngle * RADIAN);
+  return (
+    <text x={x} y={y} fill="white" textAnchor="middle" dominantBaseline="central" fontSize={10} fontWeight="600">
+      {`${(percent * 100).toFixed(0)}٪`}
+    </text>
+  );
+}
+
+function TipBox({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className="bg-white dark:bg-gray-800 rounded-xl border border-slate-200 dark:border-gray-700 shadow-lg px-3 py-2 text-sm"
+      dir="rtl"
+    >
+      {children}
+    </div>
+  );
+}
+
+function ApptTooltip({ active, payload, label }: { active?: boolean; payload?: { value: number }[]; label?: string }) {
+  if (!active || !payload?.length) return null;
+  return (
+    <TipBox>
+      <p className="text-xs text-slate-500 dark:text-slate-400 mb-0.5">{label}</p>
+      <p className="font-bold text-violet-600 dark:text-violet-400">{formatNumber(payload[0]?.value ?? 0)} نوبت</p>
+    </TipBox>
+  );
+}
+
+function RevTooltip({ active, payload, label }: { active?: boolean; payload?: { value: number }[]; label?: string }) {
+  if (!active || !payload?.length) return null;
+  return (
+    <TipBox>
+      <p className="text-xs text-slate-500 dark:text-slate-400 mb-0.5">{label}</p>
+      <p className="font-bold text-pink-600 dark:text-pink-400">{formatRial(payload[0]?.value ?? 0)}</p>
+    </TipBox>
+  );
+}
+
+function BarTip({ active, payload, label }: { active?: boolean; payload?: { value: number }[]; label?: string }) {
+  if (!active || !payload?.length) return null;
+  return (
+    <TipBox>
+      <p className="font-medium text-slate-700 dark:text-slate-200 mb-0.5">{label}</p>
+      <p className="font-bold text-violet-600 dark:text-violet-400">{formatNumber(payload[0]?.value ?? 0)} نوبت</p>
+    </TipBox>
+  );
+}
+
+const revAxisFmt = (v: number) =>
+  v >= 1_000_000_000 ? `${(v / 1_000_000_000).toFixed(1)}B`
+  : v >= 1_000_000  ? `${(v / 1_000_000).toFixed(0)}M`
+  : v >= 1_000      ? `${Math.round(v / 1_000)}K`
+  : String(v);
+
+// ── Main Component ────────────────────────────────────────────────────────
+
 export default function DashboardPage() {
+  const [chartTab, setChartTab] = useState<'appointments' | 'revenue'>('appointments');
+
  const statsQ = useQuery({
    queryKey: ['dashboard-stats'],
    queryFn: () => api.get<ApiResponse<DashboardStats>>('/api/v1/admin/dashboard/stats'),
    staleTime: 60_000,
  });
-
+  const chartsQ = useQuery({
+    queryKey: ['dashboard-charts'],
+    queryFn: () => api.get<ApiResponse<ChartData>>('/api/v1/admin/dashboard/charts'),
+    staleTime: 120_000,
+  });
  const recentQ = useQuery({
    queryKey: ['dashboard-recent'],
    queryFn: () => api.get<ApiResponse<RecentData>>('/api/v1/admin/dashboard/recent'),
    staleTime: 30_000,
  });

-  const stats: DashboardStats | undefined = (statsQ.data?.data as any)?.data ?? statsQ.data?.data;
-  const recent: RecentData | undefined   = (recentQ.data?.data as any)?.data ?? recentQ.data?.data;
-  const fn = (n?: number) => (n !== undefined ? formatNumber(n) : '—');
+  const stats  = useMemo<DashboardStats | undefined>(() => (statsQ.data?.data  as any)?.data ?? statsQ.data?.data,  [statsQ.data]);
+  const charts = useMemo<ChartData | undefined>(     () => (chartsQ.data?.data as any)?.data ?? chartsQ.data?.data, [chartsQ.data]);
+  const recent = useMemo<RecentData | undefined>(    () => (recentQ.data?.data as any)?.data ?? recentQ.data?.data, [recentQ.data]);

-  const cards: StatCard[] = [
-    { label: 'کل کاربران',       value: fn(stats?.total_users),          icon: UserGroupIcon,             iconBg: 'bg-violet-100 dark:bg-violet-400/10', iconColor: 'text-violet-600 dark:text-violet-400' },
-    { label: 'پزشکان فعال',      value: fn(stats?.active_doctors),       sub: stats ? `از ${fn(stats.total_doctors)} پزشک` : undefined, icon: HeartIcon, iconBg: 'bg-emerald-100 dark:bg-emerald-400/10', iconColor: 'text-emerald-600 dark:text-emerald-400' },
-    { label: 'کلینیک‌ها',        value: fn(stats?.total_clinics),        icon: BuildingOffice2Icon,       iconBg: 'bg-blue-100 dark:bg-blue-400/10',    iconColor: 'text-blue-600 dark:text-blue-400' },
-    { label: 'نوبت‌های امروز',   value: fn(stats?.today_appointments),   sub: stats ? `مجموع: ${fn(stats.total_appointments)}` : undefined, icon: CalendarDaysIcon, iconBg: 'bg-orange-100 dark:bg-orange-400/10', iconColor: 'text-orange-600 dark:text-orange-400' },
-    { label: 'درآمد امروز',      value: stats?.today_payments_amount !== undefined ? formatRial(stats.today_payments_amount) : '—', sub: stats ? `${fn(stats.today_payments_count)} تراکنش` : undefined, icon: CreditCardIcon, iconBg: 'bg-pink-100 dark:bg-pink-400/10', iconColor: 'text-pink-600 dark:text-pink-400' },
-    { label: 'کل درآمد',         value: stats?.total_payments_amount !== undefined ? formatRial(stats.total_payments_amount) : '—', icon: CreditCardIcon, iconBg: 'bg-indigo-100 dark:bg-indigo-400/10', iconColor: 'text-indigo-600 dark:text-indigo-400' },
-    { label: 'نظرات در انتظار',  value: fn(stats?.pending_comments),     icon: ChatBubbleLeftEllipsisIcon, iconBg: 'bg-yellow-100 dark:bg-yellow-400/10', iconColor: 'text-yellow-600 dark:text-yellow-400' },
-    { label: 'درخواست تسویه',    value: fn(stats?.pending_settlements),  icon: BanknotesIcon,             iconBg: 'bg-teal-100 dark:bg-teal-400/10',    iconColor: 'text-teal-600 dark:text-teal-400' },
+  const fn = (n?: number) => n !== undefined ? formatNumber(n) : '—';
+  const fr = (n?: number) => n !== undefined ? formatRial(n) : '—';
+  const today = new Date().toLocaleDateString('fa-IR', { year: 'numeric', month: 'long', day: 'numeric' });
+
+  // KPI cards
+  const kpiCards = [
+    { label: 'کل کاربران',      value: fn(stats?.total_users),          sub: undefined,                                                              icon: UserGroupIcon,            iconBg: 'bg-violet-100 dark:bg-violet-400/10', iconColor: 'text-violet-600 dark:text-violet-400' },
+    { label: 'پزشکان فعال',     value: fn(stats?.active_doctors),       sub: stats ? `از ${fn(stats.total_doctors)} پزشک` : undefined,              icon: HeartIcon,                iconBg: 'bg-emerald-100 dark:bg-emerald-400/10', iconColor: 'text-emerald-600 dark:text-emerald-400' },
+    { label: 'کلینیک‌ها',       value: fn(stats?.total_clinics),        sub: undefined,                                                              icon: BuildingOffice2Icon,      iconBg: 'bg-blue-100 dark:bg-blue-400/10', iconColor: 'text-blue-600 dark:text-blue-400' },
+    { label: 'نوبت‌های امروز',  value: fn(stats?.today_appointments),   sub: stats ? `ماه جاری: ${fn(stats.this_month_appointments)}` : undefined,  icon: CalendarDaysIcon,         iconBg: 'bg-orange-100 dark:bg-orange-400/10', iconColor: 'text-orange-600 dark:text-orange-400' },
+    { label: 'درآمد این ماه',   value: fr(stats?.this_month_revenue),   sub: stats ? `کل: ${fr(stats.total_payments_amount)}` : undefined,          icon: CreditCardIcon,           iconBg: 'bg-pink-100 dark:bg-pink-400/10', iconColor: 'text-pink-600 dark:text-pink-400' },
+    { label: 'در انتظار بررسی', value: fn(stats ? stats.pending_comments + stats.pending_settlements : undefined), sub: stats ? `${fn(stats.pending_comments)} نظر · ${fn(stats.pending_settlements)} تسویه` : undefined, icon: BellAlertIcon, iconBg: 'bg-amber-100 dark:bg-amber-400/10', iconColor: 'text-amber-600 dark:text-amber-400' },
  ];

+  // Activity timeline
+  const timelineEvents = useMemo(() => {
+    if (!recent) return [];
+    const evs: { title: string; sub?: string; time: string; color: string }[] = [];
+    (recent.appointments ?? []).slice(0, 4).forEach((a) => {
+      evs.push({ title: `نوبت ${APPT[a.status]?.label ?? a.status}`, sub: `${a.user_name || a.user_mobile} · دکتر ${a.doctor_name}`, time: a.created_at, color: APPT[a.status]?.color ?? '#94a3b8' });
+    });
+    (recent.payments ?? []).slice(0, 3).forEach((p) => {
+      evs.push({ title: `پرداخت ${PAY[p.status]?.label ?? p.status}`, sub: `${p.user_name || p.user_mobile} · ${formatRial(p.amount)}`, time: p.created_at, color: PAY[p.status]?.color ?? '#94a3b8' });
+    });
+    (recent.users ?? []).slice(0, 3).forEach((u) => {
+      evs.push({ title: 'ثبت‌نام کاربر جدید', sub: u.name || u.mobile, time: u.created_at, color: '#8b5cf6' });
+    });
+    return evs.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()).slice(0, 10);
+  }, [recent]);
+
+  // Quick actions
+  const quickActions = [
+    { label: 'پزشکان',    to: '/admin/doctors',      icon: HeartIcon,                 iconBg: 'bg-emerald-100 dark:bg-emerald-400/10', iconColor: 'text-emerald-600 dark:text-emerald-400' },
+    { label: 'کلینیک‌ها', to: '/admin/clinics',      icon: BuildingOffice2Icon,       iconBg: 'bg-blue-100 dark:bg-blue-400/10',       iconColor: 'text-blue-600 dark:text-blue-400' },
+    { label: 'نوبت‌ها',   to: '/admin/appointments', icon: CalendarDaysIcon,          iconBg: 'bg-orange-100 dark:bg-orange-400/10',   iconColor: 'text-orange-600 dark:text-orange-400' },
+    { label: 'پرداخت‌ها', to: '/admin/payments',     icon: CreditCardIcon,            iconBg: 'bg-pink-100 dark:bg-pink-400/10',       iconColor: 'text-pink-600 dark:text-pink-400' },
+    { label: 'کاربران',   to: '/admin/users',        icon: UserGroupIcon,             iconBg: 'bg-violet-100 dark:bg-violet-400/10',   iconColor: 'text-violet-600 dark:text-violet-400' },
+    { label: 'نظرات',     to: '/admin/comments',     icon: ChatBubbleLeftEllipsisIcon, iconBg: 'bg-amber-100 dark:bg-amber-400/10',    iconColor: 'text-amber-600 dark:text-amber-400' },
+  ];
+
+  const isFetching = statsQ.isFetching || chartsQ.isFetching || recentQ.isFetching;
+
  return (
-    <div className="animate-slide-up">
+    <div className="animate-slide-up space-y-5">
+
      {/* Header */}
-      <div className="flex items-center justify-between mb-6">
+      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-bold text-slate-900 dark:text-slate-50">داشبورد</h1>
-          <p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">خلاصه وضعیت سیستم</p>
+          <p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">{today}</p>
        </div>
-        {statsQ.isError && (
-          <button onClick={() => statsQ.refetch()} className="flex items-center gap-1.5 text-sm text-slate-500 dark:text-slate-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
-            <ArrowPathIcon className="w-4 h-4" />
-            تلاش مجدد
-          </button>
-        )}
+        <button
+          onClick={() => { statsQ.refetch(); chartsQ.refetch(); recentQ.refetch(); }}
+          disabled={isFetching}
+          className="flex items-center gap-1.5 text-sm text-slate-500 dark:text-slate-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors disabled:opacity-50"
+        >
+          <ArrowPathIcon className={`w-4 h-4 ${isFetching ? 'animate-spin' : ''}`} />
+          به‌روزرسانی
+        </button>
      </div>

-      {statsQ.isError && (
-        <div className="mb-5 cp-card border-red-200 dark:border-red-500/20 bg-red-50 dark:bg-red-500/5 px-4 py-3 text-sm text-red-600 dark:text-red-400">
-          خطا در دریافت آمار — اطلاعات ممکن است به‌روز نباشند.
-        </div>
-      )}
-
-      {/* Stats grid */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      {/* ── Section 1: KPI Cards ─────────────────────────────────── */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-6 gap-3">
        {statsQ.isLoading
-          ? Array.from({ length: 8 }).map((_, i) => <StatCardSkeleton key={i} />)
-          : cards.map((c) => (
-            <div key={c.label} className="cp-card p-5 flex items-start gap-4">
-              <div className={`cp-stat-icon ${c.iconBg}`}>
+          ? Array.from({ length: 6 }).map((_, i) => <KpiSkeleton key={i} />)
+          : kpiCards.map((c) => (
+            <div key={c.label} className="cp-card p-4 flex items-start gap-3">
+              <div className={`cp-stat-icon ${c.iconBg} shrink-0`}>
                <c.icon className={`w-5 h-5 ${c.iconColor}`} />
              </div>
              <div className="min-w-0 flex-1">
-                <p className="text-xs text-slate-500 dark:text-slate-400 mb-1">{c.label}</p>
-                <p className="text-xl font-bold text-slate-900 dark:text-slate-50 leading-none">{c.value}</p>
-                {c.sub && <p className="text-xs text-slate-400 dark:text-slate-500 mt-1.5">{c.sub}</p>}
+                <p className="text-xs text-slate-500 dark:text-slate-400 mb-1 truncate">{c.label}</p>
+                <p className="text-lg font-bold text-slate-900 dark:text-slate-50 leading-none">{c.value}</p>
+                {c.sub && <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-1.5 leading-tight">{c.sub}</p>}
              </div>
            </div>
          ))
        }
      </div>

-      {/* Recent activities */}
-      <div className="mt-5 grid grid-cols-1 lg:grid-cols-3 gap-4">
+      {/* ── Section 2: Charts ───────────────────────────────────── */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">

-        {/* Recent Appointments */}
+        {/* Trend chart with tab toggle */}
+        <div className="cp-card p-5 lg:col-span-2">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">
+              {chartTab === 'appointments' ? 'نوبت‌ها — ۳۰ روز اخیر' : 'درآمد — ۳۰ روز اخیر'}
+            </h3>
+            <div className="flex gap-0.5 bg-slate-100 dark:bg-gray-800 rounded-lg p-0.5">
+              {(['appointments', 'revenue'] as const).map((tab) => (
+                <button
+                  key={tab}
+                  onClick={() => setChartTab(tab)}
+                  className={`text-xs px-3 py-1 rounded-md transition-all ${
+                    chartTab === tab
+                      ? 'bg-white dark:bg-gray-700 text-slate-800 dark:text-slate-200 shadow-sm font-medium'
+                      : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'
+                  }`}
+                >
+                  {tab === 'appointments' ? 'نوبت‌ها' : 'درآمد'}
+                </button>
+              ))}
+            </div>
+          </div>
+          {chartsQ.isLoading ? <ChartSkeleton h="h-52" /> : (
+            <div dir="ltr" className="w-full h-52">
+              <ResponsiveContainer width="100%" height="100%">
+                {chartTab === 'appointments' ? (
+                  <AreaChart data={charts?.appointments_30d ?? []} margin={{ top: 4, right: 4, left: -16, bottom: 0 }}>
+                    <defs>
+                      <linearGradient id="apptGrad" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="5%"  stopColor="#8b5cf6" stopOpacity={0.25} />
+                        <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0} />
+                      </linearGradient>
+                    </defs>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" strokeOpacity={0.6} />
+                    <XAxis dataKey="date" tick={{ fontSize: 10, fill: '#94a3b8' }} interval={4} tickLine={false} axisLine={false} />
+                    <YAxis tick={{ fontSize: 10, fill: '#94a3b8' }} tickLine={false} axisLine={false} />
+                    <Tooltip content={<ApptTooltip />} cursor={{ stroke: '#8b5cf6', strokeWidth: 1, strokeDasharray: '4 4' }} />
+                    <Area type="monotone" dataKey="count" stroke="#8b5cf6" strokeWidth={2.5} fill="url(#apptGrad)" dot={false} activeDot={{ r: 4, fill: '#8b5cf6', strokeWidth: 0 }} />
+                  </AreaChart>
+                ) : (
+                  <AreaChart data={charts?.revenue_30d ?? []} margin={{ top: 4, right: 4, left: -4, bottom: 0 }}>
+                    <defs>
+                      <linearGradient id="revGrad" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="5%"  stopColor="#ec4899" stopOpacity={0.25} />
+                        <stop offset="95%" stopColor="#ec4899" stopOpacity={0} />
+                      </linearGradient>
+                    </defs>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" strokeOpacity={0.6} />
+                    <XAxis dataKey="date" tick={{ fontSize: 10, fill: '#94a3b8' }} interval={4} tickLine={false} axisLine={false} />
+                    <YAxis tick={{ fontSize: 10, fill: '#94a3b8' }} tickLine={false} axisLine={false} tickFormatter={revAxisFmt} />
+                    <Tooltip content={<RevTooltip />} cursor={{ stroke: '#ec4899', strokeWidth: 1, strokeDasharray: '4 4' }} />
+                    <Area type="monotone" dataKey="amount" stroke="#ec4899" strokeWidth={2.5} fill="url(#revGrad)" dot={false} activeDot={{ r: 4, fill: '#ec4899', strokeWidth: 0 }} />
+                  </AreaChart>
+                )}
+              </ResponsiveContainer>
+            </div>
+          )}
+        </div>
+
+        {/* Donut chart — appointment status */}
+        <div className="cp-card p-5">
+          <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-4">وضعیت نوبت‌ها</h3>
+          {chartsQ.isLoading ? <ChartSkeleton h="h-40" /> : (
+            <div dir="ltr" className="w-full h-40">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={charts?.appointment_status?.slice(0, 7) ?? []}
+                    dataKey="count"
+                    nameKey="status"
+                    cx="50%" cy="50%"
+                    innerRadius={42} outerRadius={68}
+                    labelLine={false}
+                    label={PieLabelInside as any}
+                  >
+                    {(charts?.appointment_status?.slice(0, 7) ?? []).map((entry: { status: string }) => (
+                      <Cell key={entry.status} fill={APPT[entry.status]?.color ?? '#94a3b8'} />
+                    ))}
+                  </Pie>
+                  <Tooltip
+                    formatter={(value, name) => [formatNumber(Number(value)), APPT[String(name)]?.label ?? String(name)]}
+                  />
+                </PieChart>
+              </ResponsiveContainer>
+            </div>
+          )}
+          {!chartsQ.isLoading && (
+            <ul className="mt-3 space-y-1.5">
+              {(charts?.appointment_status ?? []).slice(0, 5).map((s: { status: string; count: number }) => (
+                <li key={s.status} className="flex items-center justify-between">
+                  <div className="flex items-center gap-1.5">
+                    <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: APPT[s.status]?.color ?? '#94a3b8' }} />
+                    <span className="text-xs text-slate-600 dark:text-slate-400">{APPT[s.status]?.label ?? s.status}</span>
+                  </div>
+                  <span className="text-xs font-semibold text-slate-800 dark:text-slate-200">{formatNumber(s.count)}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+
+      {/* ── Section 3: Top Specialties Bar Chart ─────────────────── */}
+      <div className="cp-card p-5">
+        <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-4">پرتکرارترین تخصص‌ها</h3>
+        {chartsQ.isLoading ? <ChartSkeleton h="h-64" /> : !charts?.top_specialties?.length ? (
+          <p className="text-center py-10 text-sm text-slate-400 dark:text-slate-500">داده‌ای موجود نیست</p>
+        ) : (
+          <div dir="ltr" className="w-full h-64">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart
+                data={charts.top_specialties}
+                layout="vertical"
+                margin={{ top: 0, right: 16, left: 0, bottom: 0 }}
+              >
+                <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" strokeOpacity={0.6} horizontal={false} />
+                <XAxis type="number" tick={{ fontSize: 10, fill: '#94a3b8' }} tickLine={false} axisLine={false} />
+                <YAxis type="category" dataKey="name" width={140} tick={{ fontSize: 11, fill: '#64748b' }} tickLine={false} axisLine={false} />
+                <Tooltip content={<BarTip />} cursor={{ fill: 'rgba(139,92,246,0.08)' }} />
+                <Bar dataKey="count" fill="#8b5cf6" radius={[0, 5, 5, 0]} maxBarSize={22} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+      </div>
+
+      {/* ── Sections 4 & 5: Quick Actions + Activity Timeline ─────── */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+
+        {/* Quick actions */}
+        <div className="cp-card p-5">
+          <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-4">دسترسی سریع</h3>
+          <div className="grid grid-cols-2 gap-2">
+            {quickActions.map((a) => (
+              <Link
+                key={a.to}
+                to={a.to}
+                className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-slate-50 dark:hover:bg-gray-800 border border-transparent hover:border-slate-200 dark:hover:border-gray-700 transition-all group"
+              >
+                <div className={`w-10 h-10 rounded-xl ${a.iconBg} flex items-center justify-center`}>
+                  <a.icon className={`w-5 h-5 ${a.iconColor}`} />
+                </div>
+                <span className="text-xs font-medium text-slate-700 dark:text-slate-300 text-center group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+                  {a.label}
+                </span>
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        {/* Activity timeline */}
+        <div className="cp-card p-5 lg:col-span-2">
+          <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-4">آخرین رویدادها</h3>
+          {recentQ.isLoading ? (
+            <div className="space-y-4">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <div key={i} className="flex gap-3">
+                  <div className="flex flex-col items-center">
+                    <div className="w-2.5 h-2.5 rounded-full skeleton mt-1 shrink-0" />
+                    {i < 5 && <div className="w-px h-8 skeleton mt-1.5" />}
+                  </div>
+                  <div className="flex-1 pb-4 space-y-1.5">
+                    <div className="h-3 rounded skeleton w-3/4" />
+                    <div className="h-3 rounded skeleton w-1/2" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : !timelineEvents.length ? (
+            <p className="text-center py-8 text-sm text-slate-400 dark:text-slate-500">رویدادی ثبت نشده</p>
+          ) : (
+            <div>
+              {timelineEvents.map((ev, i) => (
+                <div key={i} className="flex gap-3">
+                  <div className="flex flex-col items-center">
+                    <div
+                      className="w-2.5 h-2.5 rounded-full shrink-0 mt-1.5 ring-2 ring-white dark:ring-gray-900"
+                      style={{ backgroundColor: ev.color }}
+                    />
+                    {i < timelineEvents.length - 1 && (
+                      <div className="w-px flex-1 bg-slate-200 dark:bg-gray-700 mt-1 mb-1" />
+                    )}
+                  </div>
+                  <div className={`flex-1 min-w-0 ${i < timelineEvents.length - 1 ? 'pb-3.5' : ''}`}>
+                    <p className="text-sm font-medium text-slate-800 dark:text-slate-200">{ev.title}</p>
+                    {ev.sub && <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 truncate">{ev.sub}</p>}
+                    <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">{formatDateTime(ev.time)}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* ── Section 6: Recent Data ───────────────────────────────── */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+
+        {/* Recent appointments */}
        <div className="cp-card p-5">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">آخرین نوبت‌ها</h3>
-            <Link to="/admin/appointments" className="text-xs text-primary-600 dark:text-primary-400 hover:underline">مشاهده همه</Link>
+            <Link to="/admin/appointments" className="text-xs text-primary-600 dark:text-primary-400 hover:underline">همه</Link>
          </div>
-          {recentQ.isLoading ? <RecentSkeleton /> : recentQ.isError ? (
-            <p className="text-center py-6 text-sm text-slate-400">خطا در دریافت اطلاعات</p>
-          ) : !recent?.appointments?.length ? (
+          {recentQ.isLoading ? <ListSkeleton /> : !recent?.appointments?.length ? (
            <p className="text-center py-6 text-sm text-slate-400 dark:text-slate-500">نوبتی ثبت نشده</p>
          ) : (
            <ul className="space-y-3">
@@ -224,7 +514,7 @@ export default function DashboardPage() {
                      <p className="text-xs text-slate-500 dark:text-slate-400 truncate">دکتر {a.doctor_name}</p>
                      <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">{formatDateTime(a.slot_start)}</p>
                    </div>
-                    <MicroBadge status={a.status} map={APPT_STATUS} />
+                    <Badge status={a.status} map={APPT} />
                  </Link>
                </li>
              ))}
@@ -232,15 +522,13 @@ export default function DashboardPage() {
          )}
        </div>

-        {/* Recent Payments */}
+        {/* Recent payments */}
        <div className="cp-card p-5">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">آخرین پرداخت‌ها</h3>
-            <Link to="/admin/payments" className="text-xs text-primary-600 dark:text-primary-400 hover:underline">مشاهده همه</Link>
+            <Link to="/admin/payments" className="text-xs text-primary-600 dark:text-primary-400 hover:underline">همه</Link>
          </div>
-          {recentQ.isLoading ? <RecentSkeleton /> : recentQ.isError ? (
-            <p className="text-center py-6 text-sm text-slate-400">خطا در دریافت اطلاعات</p>
-          ) : !recent?.payments?.length ? (
+          {recentQ.isLoading ? <ListSkeleton /> : !recent?.payments?.length ? (
            <p className="text-center py-6 text-sm text-slate-400 dark:text-slate-500">پرداختی ثبت نشده</p>
          ) : (
            <ul className="space-y-3">
@@ -254,7 +542,7 @@ export default function DashboardPage() {
                      <p className="text-xs text-slate-500 dark:text-slate-400">{formatRial(p.amount)}</p>
                      <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">{formatDateTime(p.created_at)}</p>
                    </div>
-                    <MicroBadge status={p.status} map={PAY_STATUS} />
+                    <Badge status={p.status} map={PAY} />
                  </Link>
                </li>
              ))}
@@ -262,15 +550,13 @@ export default function DashboardPage() {
          )}
        </div>

-        {/* Recent Users */}
+        {/* Recent users */}
        <div className="cp-card p-5">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">کاربران جدید</h3>
-            <Link to="/admin/users" className="text-xs text-primary-600 dark:text-primary-400 hover:underline">مشاهده همه</Link>
+            <Link to="/admin/users" className="text-xs text-primary-600 dark:text-primary-400 hover:underline">همه</Link>
          </div>
-          {recentQ.isLoading ? <RecentSkeleton /> : recentQ.isError ? (
-            <p className="text-center py-6 text-sm text-slate-400">خطا در دریافت اطلاعات</p>
-          ) : !recent?.users?.length ? (
+          {recentQ.isLoading ? <ListSkeleton /> : !recent?.users?.length ? (
            <p className="text-center py-6 text-sm text-slate-400 dark:text-slate-500">کاربری ثبت نشده</p>
          ) : (
            <ul className="space-y-3">
@@ -293,8 +579,8 @@ export default function DashboardPage() {
            </ul>
          )}
        </div>
-
      </div>
+
    </div>
  );
 }
@@ -16,6 +16,7 @@
                "react-hot-toast": "^2.0.0",
                "react-router-dom": "^7.0.0",
                "react-select": "^5.0.0",
+                "recharts": "^3.8.1",
                "sonner": "^1.0.0",
                "zod": "^3.0.0",
                "zustand": "^5.0.0"
@@ -2315,6 +2316,42 @@
                "url": "https://github.com/sponsors/Boshen"
            }
        },
+        "node_modules/@reduxjs/toolkit": {
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+            "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+            "license": "MIT",
+            "dependencies": {
+                "@standard-schema/spec": "^1.0.0",
+                "@standard-schema/utils": "^0.3.0",
+                "immer": "^11.0.0",
+                "redux": "^5.0.1",
+                "redux-thunk": "^3.1.0",
+                "reselect": "^5.1.0"
+            },
+            "peerDependencies": {
+                "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+                "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "react": {
+                    "optional": true
+                },
+                "react-redux": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@reduxjs/toolkit/node_modules/immer": {
+            "version": "11.1.8",
+            "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.8.tgz",
+            "integrity": "sha512-/tbkHMW7y10Lx6i1crLjD4/OhNkRG+Fo7byZHtah0547nIeXYcpIXaUh0IAQY6gO5459qpGGYapcEOHtFXkIuA==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/immer"
+            }
+        },
        "node_modules/@rolldown/binding-android-arm64": {
            "version": "1.0.3",
            "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.3.tgz",
@@ -2590,7 +2627,6 @@
            "version": "1.1.0",
            "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
            "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
-            "dev": true,
            "license": "MIT"
        },
        "node_modules/@standard-schema/utils": {
@@ -3244,6 +3280,69 @@
                "assertion-error": "^2.0.1"
            }
        },
+        "node_modules/@types/d3-array": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+            "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-color": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+            "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-ease": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+            "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-interpolate": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+            "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-color": "*"
+            }
+        },
+        "node_modules/@types/d3-path": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+            "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-scale": {
+            "version": "4.0.9",
+            "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+            "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-time": "*"
+            }
+        },
+        "node_modules/@types/d3-shape": {
+            "version": "3.1.8",
+            "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+            "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/d3-path": "*"
+            }
+        },
+        "node_modules/@types/d3-time": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+            "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+            "license": "MIT"
+        },
+        "node_modules/@types/d3-timer": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+            "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+            "license": "MIT"
+        },
        "node_modules/@types/deep-eql": {
            "version": "4.0.2",
            "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
@@ -3336,6 +3435,12 @@
                "@types/react": "*"
            }
        },
+        "node_modules/@types/use-sync-external-store": {
+            "version": "0.0.6",
+            "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+            "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+            "license": "MIT"
+        },
        "node_modules/@types/webpack-env": {
            "version": "1.18.8",
            "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.8.tgz",
@@ -4196,6 +4301,15 @@
                "node": ">=6"
            }
        },
+        "node_modules/clsx": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+            "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
        "node_modules/color-convert": {
            "version": "2.0.1",
            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4637,6 +4751,127 @@
            "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
            "license": "MIT"
        },
+        "node_modules/d3-array": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+            "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+            "license": "ISC",
+            "dependencies": {
+                "internmap": "1 - 2"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-color": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+            "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-ease": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+            "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-format": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+            "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-interpolate": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+            "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-color": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-path": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+            "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-scale": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+            "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-array": "2.10.0 - 3",
+                "d3-format": "1 - 3",
+                "d3-interpolate": "1.2.0 - 3",
+                "d3-time": "2.1.1 - 3",
+                "d3-time-format": "2 - 4"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-shape": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+            "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-path": "^3.1.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-time": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+            "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-array": "2 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-time-format": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+            "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+            "license": "ISC",
+            "dependencies": {
+                "d3-time": "1 - 3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/d3-timer": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+            "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
        "node_modules/data-urls": {
            "version": "5.0.0",
            "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
@@ -4675,6 +4910,12 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/decimal.js-light": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+            "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+            "license": "MIT"
+        },
        "node_modules/dequal": {
            "version": "2.0.3",
            "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -4887,6 +5128,16 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/es-toolkit": {
+            "version": "1.47.0",
+            "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.47.0.tgz",
+            "integrity": "sha512-n1GuoD0WEQZMBk5tttoZSqwgyLx01oqa5XsBmCHwPyNe1S9jPBEmtR2pSgp2kJuWE3ciFZ6yRHmY4pM4C3OOkw==",
+            "license": "MIT",
+            "workspaces": [
+                "docs",
+                "benchmarks"
+            ]
+        },
        "node_modules/escalade": {
            "version": "3.2.0",
            "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -4976,6 +5227,12 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/eventemitter3": {
+            "version": "5.0.4",
+            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+            "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+            "license": "MIT"
+        },
        "node_modules/events": {
            "version": "3.3.0",
            "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -5269,6 +5526,16 @@
                "postcss": "^8.1.0"
            }
        },
+        "node_modules/immer": {
+            "version": "10.2.0",
+            "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+            "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/immer"
+            }
+        },
        "node_modules/import-fresh": {
            "version": "3.3.1",
            "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -5315,6 +5582,15 @@
                "node": ">=8"
            }
        },
+        "node_modules/internmap": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+            "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
        "node_modules/interpret": {
            "version": "3.1.1",
            "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
@@ -7089,6 +7365,29 @@
            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
            "license": "MIT"
        },
+        "node_modules/react-redux": {
+            "version": "9.3.0",
+            "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+            "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/use-sync-external-store": "^0.0.6",
+                "use-sync-external-store": "^1.4.0"
+            },
+            "peerDependencies": {
+                "@types/react": "^18.2.25 || ^19",
+                "react": "^18.0 || ^19",
+                "redux": "^5.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "redux": {
+                    "optional": true
+                }
+            }
+        },
        "node_modules/react-refresh": {
            "version": "0.17.0",
            "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -7174,6 +7473,36 @@
                "react-dom": ">=16.6.0"
            }
        },
+        "node_modules/recharts": {
+            "version": "3.8.1",
+            "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.8.1.tgz",
+            "integrity": "sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg==",
+            "license": "MIT",
+            "workspaces": [
+                "www"
+            ],
+            "dependencies": {
+                "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+                "clsx": "^2.1.1",
+                "decimal.js-light": "^2.5.1",
+                "es-toolkit": "^1.39.3",
+                "eventemitter3": "^5.0.1",
+                "immer": "^10.1.1",
+                "react-redux": "8.x.x || 9.x.x",
+                "reselect": "5.1.1",
+                "tiny-invariant": "^1.3.3",
+                "use-sync-external-store": "^1.2.2",
+                "victory-vendor": "^37.0.2"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+                "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
        "node_modules/rechoir": {
            "version": "0.8.0",
            "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
@@ -7201,6 +7530,21 @@
                "node": ">=8"
            }
        },
+        "node_modules/redux": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+            "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+            "license": "MIT"
+        },
+        "node_modules/redux-thunk": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+            "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "redux": "^5.0.0"
+            }
+        },
        "node_modules/regenerate": {
            "version": "1.4.2",
            "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -7297,6 +7641,12 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/reselect": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+            "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+            "license": "MIT"
+        },
        "node_modules/resolve": {
            "version": "1.22.12",
            "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
@@ -7991,6 +8341,12 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/tiny-invariant": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+            "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+            "license": "MIT"
+        },
        "node_modules/tinybench": {
            "version": "2.9.0",
            "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -8271,6 +8627,15 @@
                }
            }
        },
+        "node_modules/use-sync-external-store": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+            "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
        "node_modules/util-deprecate": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -8285,6 +8650,28 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/victory-vendor": {
+            "version": "37.3.6",
+            "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+            "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+            "license": "MIT AND ISC",
+            "dependencies": {
+                "@types/d3-array": "^3.0.3",
+                "@types/d3-ease": "^3.0.0",
+                "@types/d3-interpolate": "^3.0.1",
+                "@types/d3-scale": "^4.0.2",
+                "@types/d3-shape": "^3.1.0",
+                "@types/d3-time": "^3.0.0",
+                "@types/d3-timer": "^3.0.0",
+                "d3-array": "^3.1.6",
+                "d3-ease": "^3.0.1",
+                "d3-interpolate": "^3.0.1",
+                "d3-scale": "^4.0.2",
+                "d3-shape": "^3.1.0",
+                "d3-time": "^3.0.0",
+                "d3-timer": "^3.0.1"
+            }
+        },
        "node_modules/vite": {
            "version": "8.0.16",
            "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.16.tgz",
@@ -32,15 +32,16 @@
        "react-hot-toast": "^2.0.0",
        "react-router-dom": "^7.0.0",
        "react-select": "^5.0.0",
+        "recharts": "^3.8.1",
        "sonner": "^1.0.0",
        "zod": "^3.0.0",
        "zustand": "^5.0.0"
    },
    "optionalDependencies": {
-        "lightningcss-darwin-arm64": "^1.32.0",
-        "lightningcss-linux-arm64-gnu": "^1.32.0",
        "@tailwindcss/oxide-darwin-arm64": "^4.3.0",
-        "@tailwindcss/oxide-linux-arm64-gnu": "^4.3.0"
+        "@tailwindcss/oxide-linux-arm64-gnu": "^4.3.0",
+        "lightningcss-darwin-arm64": "^1.32.0",
+        "lightningcss-linux-arm64-gnu": "^1.32.0"
    },
    "license": "UNLICENSED",
    "private": true,
@@ -1068,18 +1068,91 @@ class AdminApiController extends BaseController
            ->where('s.status = :s')->setParameter('s', Settlement::STATUS_PENDING)
            ->getQuery()->getSingleScalarResult();

+        $monthStart = mktime(0, 0, 0, (int) date('n'), 1);
+        $monthEnd   = time();
+
+        $thisMonthRevenue = (int) $em->createQueryBuilder()
+            ->select('COALESCE(SUM(p.amountRials), 0)')
+            ->from(Payment::class, 'p')
+            ->where('p.status = :s AND p.createdAt BETWEEN :ts AND :te')
+            ->setParameter('s', Payment::STATUS_SUCCESS)
+            ->setParameter('ts', $monthStart)->setParameter('te', $monthEnd)
+            ->getQuery()->getSingleScalarResult();
+
+        $thisMonthAppointments = (int) $em->createQueryBuilder()
+            ->select('COUNT(a.id)')
+            ->from(Appointment::class, 'a')
+            ->where('a.createdAt BETWEEN :s AND :e')
+            ->setParameter('s', $monthStart)->setParameter('e', $monthEnd)
+            ->getQuery()->getSingleScalarResult();
+
        return $this->success([
-            'total_users'           => $totalUsers,
-            'active_doctors'        => $activeDoctors,
-            'total_doctors'         => $totalDoctors,
-            'total_clinics'         => $totalClinics,
-            'today_appointments'    => $todayAppointments,
-            'total_appointments'    => $totalAppointments,
-            'today_payments_count'  => (int) $todayPaymentsResult['cnt'],
-            'today_payments_amount' => (int) $todayPaymentsResult['total'],
-            'total_payments_amount' => (int) $totalPaymentsResult['total'],
-            'pending_comments'      => $pendingComments,
-            'pending_settlements'   => $pendingSettlements,
+            'total_users'              => $totalUsers,
+            'active_doctors'           => $activeDoctors,
+            'total_doctors'            => $totalDoctors,
+            'total_clinics'            => $totalClinics,
+            'today_appointments'       => $todayAppointments,
+            'total_appointments'       => $totalAppointments,
+            'today_payments_count'     => (int) $todayPaymentsResult['cnt'],
+            'today_payments_amount'    => (int) $todayPaymentsResult['total'],
+            'total_payments_amount'    => (int) $totalPaymentsResult['total'],
+            'pending_comments'         => $pendingComments,
+            'pending_settlements'      => $pendingSettlements,
+            'this_month_revenue'       => $thisMonthRevenue,
+            'this_month_appointments'  => $thisMonthAppointments,
+        ]);
+    }
+
+    // ── Dashboard Charts ──────────────────────────────────────────────────────
+
+    #[Route('/api/v1/admin/dashboard/charts', methods: ['GET'])]
+    public function dashboardCharts(): JsonResponse
+    {
+        $conn  = $this->em->getConnection();
+        $days  = 30;
+        $now   = time();
+        $start = $now - ($days * 86400);
+
+        $apptRows = $conn->fetchAllAssociative(
+            'SELECT DATE(FROM_UNIXTIME(slot_start)) AS d, COUNT(*) AS cnt
+             FROM appointments WHERE slot_start >= :s GROUP BY d ORDER BY d',
+            ['s' => $start]
+        );
+        $apptMap = array_column($apptRows, 'cnt', 'd');
+
+        $revRows = $conn->fetchAllAssociative(
+            'SELECT DATE(FROM_UNIXTIME(created_at)) AS d, COALESCE(SUM(amount_rials), 0) AS total
+             FROM payments WHERE status = :st AND created_at >= :s GROUP BY d ORDER BY d',
+            ['st' => 'received', 's' => $start]
+        );
+        $revMap = array_column($revRows, 'total', 'd');
+
+        $appt30d = [];
+        $rev30d  = [];
+        for ($i = $days - 1; $i >= 0; $i--) {
+            $date      = date('Y-m-d', $now - $i * 86400);
+            $shortDate = date('m/d',   $now - $i * 86400);
+            $appt30d[] = ['date' => $shortDate, 'count'  => (int)($apptMap[$date] ?? 0)];
+            $rev30d[]  = ['date' => $shortDate, 'amount' => (int)($revMap[$date]  ?? 0)];
+        }
+
+        $statusRows = $conn->fetchAllAssociative(
+            'SELECT status, COUNT(*) AS cnt FROM appointments GROUP BY status ORDER BY cnt DESC'
+        );
+
+        $specRows = $conn->fetchAllAssociative(
+            'SELECT s.name, COUNT(a.id) AS cnt
+             FROM appointments a
+             JOIN doctor_specialties ds ON ds.doctor_id = a.doctor_id
+             JOIN specialties s ON s.id = ds.specialty_id
+             GROUP BY s.id, s.name ORDER BY cnt DESC LIMIT 8'
+        );
+
+        return $this->success([
+            'appointments_30d'   => $appt30d,
+            'revenue_30d'        => $rev30d,
+            'appointment_status' => array_map(fn($r) => ['status' => $r['status'], 'count' => (int) $r['cnt']], $statusRows),
+            'top_specialties'    => array_map(fn($r) => ['name'   => $r['name'],   'count' => (int) $r['cnt']], $specRows),
        ]);
    }
 }