refactor: update UI components for consistency and dark mode support

- 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.

assets/admin/pages/DashboardPage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useQuery } from '@tanstack/react-query';
+import { Link } from 'react-router-dom';
 import {
   UserGroupIcon,
   HeartIcon,
@@ -9,10 +10,11 @@ import {
   ChatBubbleLeftEllipsisIcon,
   BanknotesIcon,
   ArrowPathIcon,
+  UserPlusIcon,
 } from '@heroicons/react/24/outline';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
-import { formatNumber, formatRial } from '../lib/utils';
+import { formatNumber, formatRial, formatDateTime } from '../lib/utils';
 
 interface DashboardStats {
   total_users: number;
@@ -28,150 +30,270 @@ interface DashboardStats {
   pending_settlements: number;
 }
 
-interface StatCardProps {
+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 | number;
+  value: string;
   sub?: string;
   icon: React.ElementType;
   iconBg: string;
   iconColor: string;
-  loading?: boolean;
 }
 
-function StatCard({ label, value, sub, icon: Icon, iconBg, iconColor, loading }: StatCardProps) {
+function StatCardSkeleton() {
   return (
-    <div className="bg-white rounded-2xl shadow-[0_1px_3px_rgba(0,0,0,.08)] p-6">
-      <div className="flex items-start justify-between">
-        <div className="min-w-0 flex-1">
-          <p className="text-sm text-gray-500 mb-1">{label}</p>
-          {loading ? (
-            <div className="h-8 w-24 bg-gray-100 rounded animate-pulse mt-1" />
-          ) : (
-            <p className="text-2xl font-bold text-gray-900 truncate">{value}</p>
-          )}
-          {sub && !loading && (
-            <p className="text-xs text-gray-400 mt-1.5">{sub}</p>
-          )}
-          {sub && loading && (
-            <div className="h-3 w-32 bg-gray-100 rounded animate-pulse mt-2" />
-          )}
-        </div>
-        <div className={`w-12 h-12 rounded-xl flex items-center justify-center shrink-0 mr-3 ${iconBg}`}>
-          <Icon className={`w-6 h-6 ${iconColor}`} />
-        </div>
+    <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 { data, isLoading, isError, refetch } = useQuery({
+  const statsQ = useQuery({
     queryKey: ['dashboard-stats'],
     queryFn: () => api.get<ApiResponse<DashboardStats>>('/api/v1/admin/dashboard/stats'),
     staleTime: 60_000,
   });
 
-  const stats: DashboardStats | undefined = (data?.data as any)?.data ?? data?.data;
+  const recentQ = useQuery({
+    queryKey: ['dashboard-recent'],
+    queryFn: () => api.get<ApiResponse<RecentData>>('/api/v1/admin/dashboard/recent'),
+    staleTime: 30_000,
+  });
 
-  const fn = (n: number | undefined) => (n !== undefined ? formatNumber(n) : '—');
+  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: StatCardProps[] = [
-    {
-      label: 'کل کاربران',
-      value: fn(stats?.total_users),
-      icon: UserGroupIcon,
-      iconBg: 'bg-violet-100',
-      iconColor: 'text-violet-600',
-    },
-    {
-      label: 'پزشکان فعال',
-      value: fn(stats?.active_doctors),
-      sub: stats ? `از ${formatNumber(stats.total_doctors)} پزشک` : undefined,
-      icon: HeartIcon,
-      iconBg: 'bg-emerald-100',
-      iconColor: 'text-emerald-600',
-    },
-    {
-      label: 'کلینیک‌ها',
-      value: fn(stats?.total_clinics),
-      icon: BuildingOffice2Icon,
-      iconBg: 'bg-blue-100',
-      iconColor: 'text-blue-600',
-    },
-    {
-      label: 'نوبت‌های امروز',
-      value: fn(stats?.today_appointments),
-      sub: stats ? `مجموع: ${formatNumber(stats.total_appointments)} نوبت` : undefined,
-      icon: CalendarDaysIcon,
-      iconBg: 'bg-orange-100',
-      iconColor: 'text-orange-600',
-    },
-    {
-      label: 'درآمد امروز',
-      value: stats?.today_payments_amount !== undefined ? formatRial(stats.today_payments_amount) : '—',
-      sub: stats ? `${formatNumber(stats.today_payments_count)} تراکنش` : undefined,
-      icon: CreditCardIcon,
-      iconBg: 'bg-pink-100',
-      iconColor: 'text-pink-600',
-    },
-    {
-      label: 'کل درآمد',
-      value: stats?.total_payments_amount !== undefined ? formatRial(stats.total_payments_amount) : '—',
-      icon: CreditCardIcon,
-      iconBg: 'bg-indigo-100',
-      iconColor: 'text-indigo-600',
-    },
-    {
-      label: 'نظرات در انتظار',
-      value: fn(stats?.pending_comments),
-      icon: ChatBubbleLeftEllipsisIcon,
-      iconBg: 'bg-yellow-100',
-      iconColor: 'text-yellow-600',
-    },
-    {
-      label: 'درخواست‌های تسویه',
-      value: fn(stats?.pending_settlements),
-      icon: BanknotesIcon,
-      iconBg: 'bg-teal-100',
-      iconColor: 'text-teal-600',
-    },
+  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>
-      <div className="mb-6 flex items-center justify-between">
+    <div className="animate-slide-up">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900">داشبورد</h1>
-          <p className="text-sm text-gray-500 mt-1">خلاصه وضعیت سیستم</p>
+          <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>
-        {isError && (
-          <button
-            onClick={() => refetch()}
-            className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-primary-600 transition-colors"
-          >
+        {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>
 
-      {isError && (
-        <div className="mb-4 bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-sm text-red-600">
-          خطا در دریافت اطلاعات — اطلاعات نمایش داده شده ممکن است به‌روز نباشند.
+      {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>
       )}
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
-        {cards.map((card) => (
-          <StatCard key={card.label} {...card} loading={isLoading} />
-        ))}
+      {/* 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>
 
-      <div className="mt-6 bg-white rounded-2xl shadow-[0_1px_3px_rgba(0,0,0,.08)] p-6">
-        <h3 className="text-base font-semibold text-gray-800 mb-4">فعالیت‌های اخیر</h3>
-        <div className="text-center py-10 text-gray-400 text-sm">
-          در حال توسعه...
+      {/* 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>
   );