Refactor code structure for improved readability and maintainability
This commit is contained in:
hamed
@@ -1,14 +1,9 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
AreaChart, Area, BarChart, Bar, PieChart, Pie, Cell,
|
||||
XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
|
||||
} from 'recharts';
|
||||
import {
|
||||
UserGroupIcon, HeartIcon, BuildingOffice2Icon, CalendarDaysIcon,
|
||||
CreditCardIcon, ArrowPathIcon, BellAlertIcon, UserPlusIcon,
|
||||
ChatBubbleLeftEllipsisIcon,
|
||||
CreditCardIcon, ArrowPathIcon, BellAlertIcon, ChatBubbleLeftEllipsisIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { api } from '../lib/api';
|
||||
import type { ApiResponse } from '../lib/api';
|
||||
@@ -58,140 +53,200 @@ interface RecentData {
|
||||
|
||||
// ── 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 APPT_LABEL: Record<string, string> = {
|
||||
waiting_for_payment: 'انتظار پرداخت', reserved: 'رزرو شده', checked_in: 'ورود به مطب',
|
||||
waiting: 'صف انتظار', in_progress: 'در حال ویزیت', visited: 'ویزیت شده',
|
||||
completed: 'تکمیل شده', cancelled_by_doctor: 'لغو پزشک', cancelled_by_user: 'لغو بیمار',
|
||||
auto_cancel_unpaid: 'لغو خودکار', no_show: 'غیبت',
|
||||
};
|
||||
const APPT_COLOR: Record<string, string> = {
|
||||
waiting_for_payment: '#f59e0b', reserved: '#3b82f6', checked_in: '#6366f1',
|
||||
waiting: '#f97316', in_progress: '#8b5cf6', visited: '#10b981',
|
||||
completed: '#22c55e', cancelled_by_doctor: '#ef4444', cancelled_by_user: '#f43f5e',
|
||||
auto_cancel_unpaid: '#94a3b8', no_show: '#64748b',
|
||||
};
|
||||
const APPT_CLS: Record<string, string> = {
|
||||
waiting_for_payment: 'amber', reserved: 'blue', checked_in: 'violet',
|
||||
waiting: 'amber', in_progress: 'violet', visited: 'green', completed: 'green',
|
||||
cancelled_by_doctor: 'red', cancelled_by_user: 'red', auto_cancel_unpaid: 'gray', no_show: 'gray',
|
||||
};
|
||||
const PAY_LABEL: Record<string, string> = {
|
||||
pending: 'در انتظار', received: 'موفق', canceled: 'لغو شده', refund: 'استرداد',
|
||||
};
|
||||
const PAY_COLOR: Record<string, string> = {
|
||||
pending: '#f59e0b', received: '#22c55e', canceled: '#ef4444', refund: '#3b82f6',
|
||||
};
|
||||
const PAY_CLS: Record<string, string> = {
|
||||
pending: 'amber', received: 'green', canceled: 'red', refund: 'blue',
|
||||
};
|
||||
|
||||
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' },
|
||||
};
|
||||
// ── SVG Chart Components ──────────────────────────────────────────────────
|
||||
|
||||
// ── Skeletons ─────────────────────────────────────────────────────────────
|
||||
|
||||
function KpiSkeleton() {
|
||||
function SvgLineChart({ data, color, h = 220 }: { data: number[]; color: string; h?: number }) {
|
||||
if (data.length < 2) return null;
|
||||
const w = 760, pad = 8;
|
||||
const max = Math.max(...data) * 1.15 || 1;
|
||||
const stepX = (w - pad * 2) / (data.length - 1);
|
||||
const pts: [number, number][] = data.map((v, i) => [
|
||||
pad + i * stepX,
|
||||
h - pad - (v / max) * (h - pad * 2 - 18),
|
||||
]);
|
||||
const d = pts.map((p, i) => {
|
||||
if (i === 0) return `M${p[0]},${p[1]}`;
|
||||
const prev = pts[i - 1];
|
||||
const cx = (prev[0] + p[0]) / 2;
|
||||
return `C${cx},${prev[1]} ${cx},${p[1]} ${p[0]},${p[1]}`;
|
||||
}).join(' ');
|
||||
const area = `${d} L${pts[pts.length - 1][0]},${h - pad} L${pts[0][0]},${h - pad} Z`;
|
||||
const gid = 'lg' + color.replace(/[^a-z0-9]/gi, '');
|
||||
return (
|
||||
<div className="cp-card p-5 flex items-start gap-4">
|
||||
<div className="w-11 h-11 rounded-xl skeleton shrink-0" />
|
||||
<div className="flex-1 space-y-2 pt-0.5">
|
||||
<div className="h-3 rounded skeleton w-2/3" />
|
||||
<div className="h-6 rounded skeleton w-1/2" />
|
||||
<div className="h-3 rounded skeleton w-3/4" />
|
||||
</div>
|
||||
</div>
|
||||
<svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} preserveAspectRatio="none" style={{ overflow: 'visible' }}>
|
||||
<defs>
|
||||
<linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor={color} stopOpacity={0.22} />
|
||||
<stop offset="100%" stopColor={color} stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{[0.25, 0.5, 0.75, 1].map((g, i) => (
|
||||
<line key={i} x1={pad} x2={w - pad} y1={(h - pad * 2) * g} y2={(h - pad * 2) * g}
|
||||
stroke="var(--border)" strokeDasharray="4 6" strokeWidth={1} />
|
||||
))}
|
||||
<path d={area} fill={`url(#${gid})`} className="ln-area" />
|
||||
<path d={d} fill="none" stroke={color} strokeWidth={2.6} strokeLinecap="round" className="ln-path" />
|
||||
{pts.map((p, i) => i % 4 === 0 && (
|
||||
<circle key={i} cx={p[0]} cy={p[1]} r={3.2} fill="var(--surface)" stroke={color} strokeWidth={2.2} />
|
||||
))}
|
||||
<style>{`.ln-path{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 1.4s cubic-bezier(.22,.61,.36,1) forwards}.ln-area{opacity:0;animation:fadein .9s .5s forwards}@keyframes draw{to{stroke-dashoffset:0}}`}</style>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ChartSkeleton({ h = 'h-56' }: { h?: string }) {
|
||||
return <div className={`${h} rounded-xl skeleton w-full`} />;
|
||||
function SvgDonut({ data, size = 190 }: { data: { value: number; color: string; label: string }[]; size?: number }) {
|
||||
const total = data.reduce((s, d) => s + d.value, 0);
|
||||
if (!total) return null;
|
||||
const r = size / 2 - 16;
|
||||
const c = 2 * Math.PI * r;
|
||||
let off = 0;
|
||||
return (
|
||||
<svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
|
||||
<g transform={`rotate(-90 ${size / 2} ${size / 2})`}>
|
||||
{data.map((d, i) => {
|
||||
const frac = d.value / total;
|
||||
const seg = (
|
||||
<circle key={i} cx={size / 2} cy={size / 2} r={r} fill="none"
|
||||
stroke={d.color} strokeWidth={20} strokeLinecap="round"
|
||||
strokeDasharray={`${Math.max(frac * c - 4, 0)} ${c}`}
|
||||
strokeDashoffset={-off * c} />
|
||||
);
|
||||
off += frac;
|
||||
return seg;
|
||||
})}
|
||||
</g>
|
||||
<text x="50%" y="46%" textAnchor="middle" fontSize="13" fill="var(--text-3)" fontFamily="Vazirmatn">مجموع</text>
|
||||
<text x="50%" y="60%" textAnchor="middle" fontSize="22" fontWeight="800" fill="var(--text)" fontFamily="Vazirmatn">{formatNumber(total)}</text>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ListSkeleton() {
|
||||
function SvgHBars({ data }: { data: { label: string; value: number }[] }) {
|
||||
const max = Math.max(...data.map(d => d.value)) || 1;
|
||||
return (
|
||||
<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">
|
||||
<div className="h-3 rounded skeleton w-3/4" />
|
||||
<div className="h-3 rounded skeleton w-1/2" />
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
{data.map((d, i) => (
|
||||
<div key={i} style={{ display: 'grid', gridTemplateColumns: '160px 1fr 52px', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ fontSize: 12.5, color: 'var(--text-2)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.label}</div>
|
||||
<div className="bar" style={{ height: 12 }}>
|
||||
<i style={{ width: `${(d.value / max) * 100}%`, animation: `growbar 1s ${i * 0.07}s cubic-bezier(.22,.61,.36,1) both` }} />
|
||||
</div>
|
||||
<div style={{ fontSize: 12.5, fontWeight: 700 }}>{formatNumber(d.value)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Badge ─────────────────────────────────────────────────────────────────
|
||||
// ── Colored Avatar ────────────────────────────────────────────────────────
|
||||
|
||||
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' };
|
||||
function AvatarEl({ initials, hue = 222, size }: { initials: string; hue?: number; size?: 'sm' | 'lg' }) {
|
||||
const cls = 'avatar' + (size === 'sm' ? ' sm' : size === 'lg' ? ' lg' : '');
|
||||
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 className={cls} style={{ background: `linear-gradient(145deg, oklch(0.62 0.15 ${hue}), oklch(0.48 0.16 ${hue}))` }}>
|
||||
{initials}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ApptTooltip({ active, payload, label }: { active?: boolean; payload?: { value: number }[]; label?: string }) {
|
||||
if (!active || !payload?.length) return null;
|
||||
// ── MiniList ──────────────────────────────────────────────────────────────
|
||||
|
||||
interface MiniRow {
|
||||
title: string;
|
||||
sub: string;
|
||||
meta: string;
|
||||
badgeLabel: string;
|
||||
badgeCls: string;
|
||||
initials: string;
|
||||
hue: number;
|
||||
}
|
||||
|
||||
function MiniList({ title, to, rows, loading }: { title: string; to: string; rows: MiniRow[]; loading?: boolean }) {
|
||||
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>
|
||||
<div className="card card-pad">
|
||||
<div className="card-title-row">
|
||||
<h3 style={{ fontSize: 16 }}>{title}</h3>
|
||||
<Link to={to} className="link">همه</Link>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} style={{ display: 'flex', gap: 11, alignItems: 'center' }}>
|
||||
<div className="skeleton" style={{ width: 32, height: 32, borderRadius: '50%', flexShrink: 0 }} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="skeleton" style={{ height: 13, borderRadius: 5, width: '70%', marginBottom: 5 }} />
|
||||
<div className="skeleton" style={{ height: 11, borderRadius: 5, width: '50%' }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : !rows.length ? (
|
||||
<p className="muted" style={{ textAlign: 'center', padding: '32px 0', fontSize: 13.5 }}>موردی ثبت نشده</p>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{rows.map((r, i) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 0', borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none' }}>
|
||||
<AvatarEl initials={r.initials} hue={r.hue} size="sm" />
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<b style={{ fontSize: 13.5, display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.title}</b>
|
||||
<span className="muted" style={{ fontSize: 11.5 }}>{r.sub}</span>
|
||||
</div>
|
||||
<div style={{ textAlign: 'start', flexShrink: 0 }}>
|
||||
<span className={`badge ${r.badgeCls}`}><span className="bdot" />{r.badgeLabel}</span>
|
||||
<div className="muted" style={{ fontSize: 10.5, marginTop: 3 }}>{r.meta}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RevTooltip({ active, payload, label }: { active?: boolean; payload?: { value: number }[]; label?: string }) {
|
||||
if (!active || !payload?.length) return null;
|
||||
// ── Skeleton ──────────────────────────────────────────────────────────────
|
||||
|
||||
function KpiSkeleton() {
|
||||
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>
|
||||
<div className="stat">
|
||||
<div className="skeleton" style={{ width: 40, height: 40, borderRadius: 12, marginBottom: 14 }} />
|
||||
<div className="skeleton" style={{ height: 13, borderRadius: 6, width: '60%', marginBottom: 6 }} />
|
||||
<div className="skeleton" style={{ height: 26, borderRadius: 6, width: '45%', marginBottom: 4 }} />
|
||||
<div className="skeleton" style={{ height: 12, borderRadius: 6, width: '75%' }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 [chartMode, setChartMode] = useState<'appts' | 'rev'>('appts');
|
||||
|
||||
const statsQ = useQuery({
|
||||
queryKey: ['dashboard-stats'],
|
||||
@@ -209,280 +264,248 @@ export default function DashboardPage() {
|
||||
staleTime: 30_000,
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const stats = useMemo<DashboardStats | undefined>(() => (statsQ.data?.data as any)?.data ?? statsQ.data?.data, [statsQ.data]);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const charts = useMemo<ChartData | undefined>( () => (chartsQ.data?.data as any)?.data ?? chartsQ.data?.data, [chartsQ.data]);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const recent = useMemo<RecentData | undefined>( () => (recentQ.data?.data as any)?.data ?? recentQ.data?.data, [recentQ.data]);
|
||||
|
||||
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' });
|
||||
const isFetching = statsQ.isFetching || chartsQ.isFetching || recentQ.isFetching;
|
||||
|
||||
// Chart data transformations
|
||||
const apptSeries = useMemo(() => charts?.appointments_30d?.map(d => d.count) ?? [], [charts]);
|
||||
const revSeries = useMemo(() => charts?.revenue_30d?.map(d => d.amount) ?? [], [charts]);
|
||||
const donutData = useMemo(() =>
|
||||
(charts?.appointment_status ?? []).slice(0, 7).map(s => ({
|
||||
label: APPT_LABEL[s.status] ?? s.status,
|
||||
value: s.count,
|
||||
color: APPT_COLOR[s.status] ?? '#94a3b8',
|
||||
})), [charts]);
|
||||
const hbarsData = useMemo(() =>
|
||||
(charts?.top_specialties ?? []).map(s => ({ label: s.name, value: s.count })), [charts]);
|
||||
|
||||
// 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' },
|
||||
{ label: 'کل کاربران', value: fn(stats?.total_users), hint: 'رشد نسبت به ماه قبل', icon: UserGroupIcon, color: 'var(--violet)', bg: 'var(--violet-bg)' },
|
||||
{ label: 'پزشکان فعال', value: fn(stats?.active_doctors), hint: stats ? `از ${fn(stats.total_doctors)} پزشک` : '', icon: HeartIcon, color: 'var(--success)', bg: 'var(--success-bg)' },
|
||||
{ label: 'کلینیکها', value: fn(stats?.total_clinics), hint: '', icon: BuildingOffice2Icon, color: 'var(--info)', bg: 'var(--info-bg)' },
|
||||
{ label: 'نوبتهای امروز', value: fn(stats?.today_appointments), hint: stats ? `ماه جاری: ${fn(stats.this_month_appointments)}` : '', icon: CalendarDaysIcon, color: 'var(--warning)', bg: 'var(--warning-bg)' },
|
||||
{ label: 'درآمد این ماه', value: fr(stats?.this_month_revenue), hint: 'تومان', icon: CreditCardIcon, color: 'var(--primary)', bg: 'var(--primary-soft)' },
|
||||
{ label: 'در انتظار بررسی', value: fn(stats ? stats.pending_comments + stats.pending_settlements : undefined), hint: stats ? `${fn(stats.pending_comments)} نظر · ${fn(stats.pending_settlements)} تسویه` : '', icon: BellAlertIcon, color: 'var(--danger)', bg: 'var(--danger-bg)' },
|
||||
];
|
||||
|
||||
// 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' },
|
||||
{ label: 'پزشکان', to: '/admin/doctors', icon: HeartIcon, color: 'var(--success)', bg: 'var(--success-bg)' },
|
||||
{ label: 'کلینیکها', to: '/admin/clinics', icon: BuildingOffice2Icon, color: 'var(--info)', bg: 'var(--info-bg)' },
|
||||
{ label: 'نوبتها', to: '/admin/appointments', icon: CalendarDaysIcon, color: 'var(--warning)', bg: 'var(--warning-bg)' },
|
||||
{ label: 'پرداختها', to: '/admin/payments', icon: CreditCardIcon, color: 'var(--danger)', bg: 'var(--danger-bg)' },
|
||||
{ label: 'نظرات', to: '/admin/comments', icon: ChatBubbleLeftEllipsisIcon, color: 'var(--violet)', bg: 'var(--violet-bg)' },
|
||||
{ label: 'کاربران', to: '/admin/users', icon: UserGroupIcon, color: 'var(--primary)', bg: 'var(--primary-soft)' },
|
||||
];
|
||||
|
||||
const isFetching = statsQ.isFetching || chartsQ.isFetching || recentQ.isFetching;
|
||||
// Timeline events
|
||||
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_LABEL[a.status] ?? a.status}`, sub: `${a.user_name || a.user_mobile} · دکتر ${a.doctor_name}`, time: a.created_at, color: APPT_COLOR[a.status] ?? '#94a3b8' });
|
||||
});
|
||||
(recent.payments ?? []).slice(0, 3).forEach(p => {
|
||||
evs.push({ title: `پرداخت ${PAY_LABEL[p.status] ?? p.status}`, sub: `${p.user_name || p.user_mobile} · ${formatRial(p.amount)}`, time: p.created_at, color: PAY_COLOR[p.status] ?? '#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, 8);
|
||||
}, [recent]);
|
||||
|
||||
// MiniList rows
|
||||
const apptRows = useMemo<MiniRow[]>(() =>
|
||||
(recent?.appointments ?? []).slice(0, 5).map(a => ({
|
||||
title: a.user_name || a.user_mobile,
|
||||
sub: `دکتر ${a.doctor_name}`,
|
||||
meta: formatDateTime(a.slot_start),
|
||||
badgeLabel: APPT_LABEL[a.status] ?? a.status,
|
||||
badgeCls: APPT_CLS[a.status] ?? 'gray',
|
||||
initials: (a.user_name || a.user_mobile).slice(0, 2),
|
||||
hue: 222,
|
||||
})), [recent]);
|
||||
|
||||
const payRows = useMemo<MiniRow[]>(() =>
|
||||
(recent?.payments ?? []).slice(0, 5).map(p => ({
|
||||
title: p.user_name || p.user_mobile,
|
||||
sub: formatRial(p.amount),
|
||||
meta: formatDateTime(p.created_at),
|
||||
badgeLabel: PAY_LABEL[p.status] ?? p.status,
|
||||
badgeCls: PAY_CLS[p.status] ?? 'gray',
|
||||
initials: (p.user_name || p.user_mobile).slice(0, 2),
|
||||
hue: 162,
|
||||
})), [recent]);
|
||||
|
||||
const userRows = useMemo<MiniRow[]>(() =>
|
||||
(recent?.users ?? []).slice(0, 5).map(u => ({
|
||||
title: u.name || u.mobile,
|
||||
sub: u.name ? u.mobile : '',
|
||||
meta: formatDateTime(u.created_at),
|
||||
badgeLabel: 'فعال',
|
||||
badgeCls: 'green',
|
||||
initials: (u.name || u.mobile).slice(0, 2),
|
||||
hue: 256,
|
||||
})), [recent]);
|
||||
|
||||
return (
|
||||
<div className="animate-slide-up space-y-5">
|
||||
<div className="fade-in">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Page header */}
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<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">{today}</p>
|
||||
<h1 className="section-title">داشبورد</h1>
|
||||
<div className="muted" style={{ fontSize: 13, marginTop: 2 }}>{today} · نمای کلی عملکرد مجموعه</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 10 }}>
|
||||
<button className="btn ghost sm">گزارش</button>
|
||||
<button className="btn primary sm" disabled={isFetching}
|
||||
onClick={() => { statsQ.refetch(); chartsQ.refetch(); recentQ.refetch(); }}>
|
||||
<ArrowPathIcon style={{ width: 14, height: 14 }} />
|
||||
بهروزرسانی
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
{/* ── Section 1: KPI Cards ─────────────────────────────────── */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-6 gap-3">
|
||||
{/* Stat cards (6-col grid) */}
|
||||
<div className="stat-grid">
|
||||
{statsQ.isLoading
|
||||
? 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}`} />
|
||||
: kpiCards.map(c => (
|
||||
<div key={c.label} className="stat">
|
||||
<div className="ico" style={{ background: c.bg, color: c.color }}>
|
||||
<c.icon style={{ width: 21, height: 21 }} />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<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 className="lbl">{c.label}</div>
|
||||
<div className="val">{c.value}</div>
|
||||
<div style={{ display: 'flex', gap: 8, justifyContent: 'space-between' }}>
|
||||
<span className="hint">{c.hint}</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* ── Section 2: Charts ───────────────────────────────────── */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
|
||||
{/* 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>
|
||||
{/* dash-main: Donut (360px) + LineChart (1fr) */}
|
||||
<div className="dash-main">
|
||||
<div className="card card-pad">
|
||||
<div className="card-title-row"><h3 style={{ fontSize: 16 }}>وضعیت نوبتها</h3></div>
|
||||
{chartsQ.isLoading ? (
|
||||
<>
|
||||
<div className="skeleton" style={{ width: 190, height: 190, borderRadius: '50%', margin: '6px auto 18px' }} />
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="skeleton" style={{ height: 14, borderRadius: 5 }} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', margin: '6px 0 18px' }}>
|
||||
<SvgDonut data={donutData} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
|
||||
{donutData.map((d, i) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 13 }}>
|
||||
<span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ width: 9, height: 9, borderRadius: 3, background: d.color, flexShrink: 0, display: 'inline-block' }} />
|
||||
<span style={{ color: 'var(--text-2)' }}>{d.label}</span>
|
||||
</span>
|
||||
<b>{formatNumber(d.value)}</b>
|
||||
</div>
|
||||
))}
|
||||
</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 className="card card-pad">
|
||||
<div className="card-title-row">
|
||||
<h3 style={{ fontSize: 16 }}>{chartMode === 'appts' ? 'نوبتها' : 'درآمد'} — ۳۰ روز اخیر</h3>
|
||||
<div className="seg">
|
||||
<button className={chartMode === 'appts' ? 'on' : ''} onClick={() => setChartMode('appts')}>نوبتها</button>
|
||||
<button className={chartMode === 'rev' ? 'on' : ''} onClick={() => setChartMode('rev')}>درآمد</button>
|
||||
</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>
|
||||
{chartsQ.isLoading ? (
|
||||
<div className="skeleton" style={{ height: 236, borderRadius: 'var(--r)' }} />
|
||||
) : (
|
||||
<SvgLineChart key={chartMode}
|
||||
data={chartMode === 'appts' ? apptSeries : revSeries}
|
||||
color={chartMode === 'appts' ? 'var(--primary)' : 'var(--success)'}
|
||||
h={236} />
|
||||
)}
|
||||
</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>
|
||||
{/* Top specialties (HBars) */}
|
||||
<div className="card card-pad" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div className="card-title-row">
|
||||
<h3 style={{ fontSize: 16 }}>پرتکرارترین تخصصها</h3>
|
||||
<span className="muted" style={{ fontSize: 12 }}>بر اساس تعداد نوبت</span>
|
||||
</div>
|
||||
{chartsQ.isLoading ? (
|
||||
<div className="skeleton" style={{ height: 200, borderRadius: 'var(--r)' }} />
|
||||
) : !hbarsData.length ? (
|
||||
<p className="muted" style={{ textAlign: 'center', padding: '40px 0', fontSize: 13.5 }}>دادهای موجود نیست</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>
|
||||
<SvgHBars data={hbarsData} />
|
||||
)}
|
||||
</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}
|
||||
{/* grid-2: Quick access + Timeline */}
|
||||
<div className="grid-2" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div className="card card-pad">
|
||||
<div className="card-title-row"><h3 style={{ fontSize: 16 }}>دسترسی سریع</h3></div>
|
||||
<div className="quick-grid" style={{ gridTemplateColumns: 'repeat(3,1fr)' }}>
|
||||
{quickActions.map(a => (
|
||||
<Link key={a.to} to={a.to} className="quick">
|
||||
<span className="qi" style={{ background: a.bg, color: a.color }}>
|
||||
<a.icon style={{ width: 22, height: 22 }} />
|
||||
</span>
|
||||
<b>{a.label}</b>
|
||||
</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>
|
||||
<div className="card card-pad">
|
||||
<div className="card-title-row">
|
||||
<h3 style={{ fontSize: 16 }}>آخرین رویدادها</h3>
|
||||
</div>
|
||||
{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 style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} style={{ display: 'flex', gap: 13, alignItems: 'flex-start' }}>
|
||||
<div className="skeleton" style={{ width: 9, height: 9, borderRadius: '50%', marginTop: 7, flexShrink: 0 }} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="skeleton" style={{ height: 13, borderRadius: 5, width: '70%', marginBottom: 5 }} />
|
||||
<div className="skeleton" style={{ height: 11, borderRadius: 5, width: '50%' }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : !timelineEvents.length ? (
|
||||
<p className="text-center py-8 text-sm text-slate-400 dark:text-slate-500">رویدادی ثبت نشده</p>
|
||||
<p className="muted" style={{ textAlign: 'center', padding: '32px 0', fontSize: 13.5 }}>رویدادی ثبت نشده</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>
|
||||
{timelineEvents.map((e, i) => (
|
||||
<div className="timeline-item" key={i}>
|
||||
<span className="tl-dot" style={{ background: e.color }}></span>
|
||||
<div className="tl-body">
|
||||
<b>{e.title}</b>
|
||||
{e.sub && <p>{e.sub}</p>}
|
||||
<time>{formatDateTime(e.time)}</time>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -491,94 +514,11 @@ export default function DashboardPage() {
|
||||
</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>
|
||||
</div>
|
||||
{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">
|
||||
{recent.appointments.map((a) => (
|
||||
<li key={a.uuid}>
|
||||
<Link to={`/admin/appointments/${a.uuid}`} className="flex items-start justify-between gap-2 group">
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
|
||||
{a.user_name || a.user_mobile}
|
||||
</p>
|
||||
<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>
|
||||
<Badge status={a.status} map={APPT} />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
{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">
|
||||
{recent.payments.map((p) => (
|
||||
<li key={p.uuid}>
|
||||
<Link to={`/admin/payments/${p.uuid}`} className="flex items-start justify-between gap-2 group">
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
|
||||
{p.user_name || p.user_mobile}
|
||||
</p>
|
||||
<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>
|
||||
<Badge status={p.status} map={PAY} />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
{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">
|
||||
{recent.users.map((u) => (
|
||||
<li key={u.uuid}>
|
||||
<Link to={`/admin/users/${u.uuid}`} className="flex items-center gap-3 group">
|
||||
<div className="w-8 h-8 rounded-full bg-violet-100 dark:bg-violet-400/10 flex items-center justify-center shrink-0">
|
||||
<UserPlusIcon className="w-4 h-4 text-violet-600 dark:text-violet-400" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
|
||||
{u.name || u.mobile}
|
||||
</p>
|
||||
{u.name && <p className="text-xs text-slate-500 dark:text-slate-400 truncate" dir="ltr">{u.mobile}</p>}
|
||||
<p className="text-[11px] text-slate-400 dark:text-slate-500">{formatDateTime(u.created_at)}</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
{/* dash-3: Three MiniLists */}
|
||||
<div className="dash-3">
|
||||
<MiniList title="آخرین نوبتها" to="/admin/appointments" rows={apptRows} loading={recentQ.isLoading} />
|
||||
<MiniList title="آخرین پرداختها" to="/admin/payments" rows={payRows} loading={recentQ.isLoading} />
|
||||
<MiniList title="کاربران جدید" to="/admin/users" rows={userRows} loading={recentQ.isLoading} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user