hamed
942634c98e
- Refactored PaymentsPage, RatingsPage, RepresentationDetailPage, RepresentationsPage, SecretariesPage, SettlementsPage, SmsPage, UserDetailPage, and UsersPage to use consistent class names for styling. - Updated button styles to use new utility classes for primary, secondary, and danger buttons. - Enhanced dark mode support across various components by adjusting text and background colors. - Introduced new utility classes for form inputs, labels, and info rows to standardize styling. - Implemented Zustand for persistent UI state management, including dark mode toggle functionality. - Updated CSS to include new styles for skeleton loading and animations. - Added optional dependencies for improved compatibility with different platforms.
301 lines
15 KiB
TypeScript
301 lines
15 KiB
TypeScript
import React from 'react';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Link } from 'react-router-dom';
|
|
import {
|
|
UserGroupIcon,
|
|
HeartIcon,
|
|
BuildingOffice2Icon,
|
|
CalendarDaysIcon,
|
|
CreditCardIcon,
|
|
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';
|
|
|
|
interface DashboardStats {
|
|
total_users: number;
|
|
active_doctors: number;
|
|
total_doctors: number;
|
|
total_clinics: number;
|
|
today_appointments: number;
|
|
total_appointments: number;
|
|
today_payments_count: number;
|
|
today_payments_amount: number;
|
|
total_payments_amount: number;
|
|
pending_comments: number;
|
|
pending_settlements: number;
|
|
}
|
|
|
|
interface RecentAppointment {
|
|
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;
|
|
}
|
|
|
|
interface RecentUser {
|
|
uuid: string;
|
|
mobile: string;
|
|
name: string | null;
|
|
email: string | null;
|
|
created_at: string;
|
|
}
|
|
|
|
interface RecentData {
|
|
appointments: RecentAppointment[];
|
|
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' },
|
|
};
|
|
|
|
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' },
|
|
};
|
|
|
|
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>
|
|
);
|
|
}
|
|
|
|
interface StatCard {
|
|
label: string;
|
|
value: string;
|
|
sub?: string;
|
|
icon: React.ElementType;
|
|
iconBg: string;
|
|
iconColor: string;
|
|
}
|
|
|
|
function StatCardSkeleton() {
|
|
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>
|
|
);
|
|
}
|
|
|
|
function RecentSkeleton() {
|
|
return (
|
|
<div className="space-y-3 mt-1">
|
|
{[...Array(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>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function DashboardPage() {
|
|
const statsQ = useQuery({
|
|
queryKey: ['dashboard-stats'],
|
|
queryFn: () => api.get<ApiResponse<DashboardStats>>('/api/v1/admin/dashboard/stats'),
|
|
staleTime: 60_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 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' },
|
|
];
|
|
|
|
return (
|
|
<div className="animate-slide-up">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<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>
|
|
</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>
|
|
)}
|
|
</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">
|
|
{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}`}>
|
|
<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>}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
{/* Recent activities */}
|
|
<div className="mt-5 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 ? <RecentSkeleton /> : recentQ.isError ? (
|
|
<p className="text-center py-6 text-sm text-slate-400">خطا در دریافت اطلاعات</p>
|
|
) : !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>
|
|
<MicroBadge status={a.status} map={APPT_STATUS} />
|
|
</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 ? <RecentSkeleton /> : recentQ.isError ? (
|
|
<p className="text-center py-6 text-sm text-slate-400">خطا در دریافت اطلاعات</p>
|
|
) : !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>
|
|
<MicroBadge status={p.status} map={PAY_STATUS} />
|
|
</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 ? <RecentSkeleton /> : recentQ.isError ? (
|
|
<p className="text-center py-6 text-sm text-slate-400">خطا در دریافت اطلاعات</p>
|
|
) : !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>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|