fix: redesign

app/admin/referral-rewards/page.tsx

@@ -4,6 +4,8 @@ import { useState, useEffect, useRef } from 'react';
 import { useAuth } from '@/contexts/AuthContext';
 import { referralApi } from '@/lib/api/referral';
 import ReferralList from '@/components/admin/referral/ReferralList';
+import PageHeader from '@/components/admin/PageHeader';
+import { showToast } from '@/components/Toast';
 import { ReferralRewardUser } from '@/types/referral';
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
 
@@ -14,7 +16,6 @@ export default function ReferralRewardsPage() {
     const [isLoading, setIsLoading] = useState(false);
     const [fulfillingId, setFulfillingId] = useState<number | null>(null);
     const [error, setError] = useState<string | null>(null);
-    const [success, setSuccess] = useState<string | null>(null);
 
     const initialLoadRef = useRef(false);
 
@@ -47,12 +48,10 @@ export default function ReferralRewardsPage() {
         setFulfillingId(user.id);
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             await referralApi.fulfillReward(user.id, token!);
-            setSuccess(`اشتراک رایگان با موفقیت به «${user.name || user.mobile || user.email}» اعطا شد`);
-            // Remove the fulfilled user from the list and refresh
+            showToast('success', `اشتراک رایگان با موفقیت به «${user.name || user.mobile || user.email}» اعطا شد`);
             setUsers((prev) => prev.filter((u) => u.id !== user.id));
         } catch (err) {
             setError(err instanceof Error ? err.message : 'خطا در اعطای اشتراک رایگان');
@@ -63,43 +62,38 @@ export default function ReferralRewardsPage() {
     };
 
     return (
-        <div className="p-6">
+        <div className="p-4 sm:p-8">
             <div className="max-w-7xl mx-auto">
-                <div className="flex justify-between items-center mb-6">
-                    <div>
-                        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
-                            پاداش‌های معرفی
-                        </h1>
-                        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-                            کاربرانی که به حد نصاب دعوت موفق رسیده‌اند و هنوز اشتراک رایگان دریافت نکرده‌اند.
-                        </p>
-                    </div>
-                    <button
-                        onClick={loadRewards}
-                        disabled={isLoading}
-                        className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
-                    >
-                        <ArrowPathIcon className={`h-5 w-5 ml-2 ${isLoading ? 'animate-spin' : ''}`} />
-                        بروزرسانی
-                    </button>
-                </div>
+                <PageHeader
+                    title="پاداش‌های معرفی"
+                    subtitle="کاربرانی که به حد نصاب دعوت موفق رسیده‌اند و هنوز اشتراک رایگان دریافت نکرده‌اند."
+                    action={
+                        <button
+                            onClick={loadRewards}
+                            disabled={isLoading}
+                            className="inline-flex items-center gap-2 px-4 py-2.5 border border-gray-200 dark:border-gray-700 rounded-xl text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors shadow-sm"
+                        >
+                            <ArrowPathIcon className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+                            بروزرسانی
+                        </button>
+                    }
+                />
 
-                {/* Messages */}
                 {error && (
-                    <div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
-                        <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
-                    </div>
-                )}
-
-                {success && (
-                    <div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
-                        <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
+                    <div className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
+                        <p className="text-sm text-red-700 dark:text-red-300">{error}</p>
+                        <button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600">
+                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+                            </svg>
+                        </button>
                     </div>
                 )}
 
                 {isLoading && users.length === 0 ? (
-                    <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800">
-                        <p className="text-gray-500 dark:text-gray-400">در حال بارگذاری...</p>
+                    <div className="text-center py-16 bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm">
+                        <div className="mx-auto h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
+                        <p className="mt-3 text-gray-500 dark:text-gray-400 text-sm">در حال بارگذاری...</p>
                     </div>
                 ) : (
                     <ReferralList