Refactor code structure for improved readability and maintainability
This commit is contained in:
hamed
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user