feat: add time

app/admin/accounting/page.tsx

@@ -0,0 +1,685 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { purchasesApi } from '@/lib/api/purchases';
+import { packagesApi } from '@/lib/api/packages';
+import { productsApi } from '@/lib/api/products';
+import PageHeader from '@/components/admin/PageHeader';
+import PersianDatePicker from '@/components/admin/PersianDatePicker';
+import { Purchase, PAYMENT_GATEWAYS } from '@/types/purchase';
+import { PackageName } from '@/types/package';
+import { Product } from '@/types/product';
+import { formatPrice, getPurchaseFinalPrice, parseStoreRate, parseFee } from '@/lib/utils';
+import {
+    MagnifyingGlassIcon,
+    ArrowPathIcon,
+    CalculatorIcon,
+    BanknotesIcon,
+    WalletIcon,
+    ChartPieIcon,
+} from '@heroicons/react/24/outline';
+
+// A single paid sale = success (موفق) or consumed (مصرف‌شده).
+// مایکت/کافه‌بازار تراکنش را مستقیماً با وضعیت «مصرف‌شده» ثبت می‌کنند (نه «موفق»)،
+// بنابراین هر دو وضعیت باید به‌عنوان فروش محسوب شوند.
+const PAID_STATUSES = [2, 3];
+
+interface StoreSummary {
+    count: number;
+    gross: number;
+    rate: number;
+    fee: number;
+    net: number;
+}
+
+interface ProductRow {
+    productId: number | null;
+    title: string;
+    packageName: string;
+    count: number;
+    gross: number;
+    commission: number;
+    net: number;
+}
+
+interface AccountingResult {
+    rows: ProductRow[];
+    totals: { count: number; gross: number; commission: number; net: number };
+    myket: StoreSummary;
+    cafe: StoreSummary;
+    other: StoreSummary;
+}
+
+// خلاصه فروش هر محصول و هر فروشگاه با احتساب کارمزد
+const computeAccounting = (
+    purchases: Purchase[],
+    myketRate: number,
+    cafeRate: number,
+    transactionFee: number,
+): AccountingResult => {
+    const rows = new Map<number, ProductRow>();
+    let totalCount = 0;
+    let totalGross = 0;
+    let totalCommission = 0;
+
+    // درصد سهم توسعه‌دهنده به‌صورت کسر (0.85) و کارمزد تراکنش به ریال
+    const makeStore = (rate: number): StoreSummary => ({ count: 0, gross: 0, rate, fee: 0, net: 0 });
+    const myket: StoreSummary = makeStore(myketRate);
+    const cafe: StoreSummary = makeStore(cafeRate);
+    const other: StoreSummary = makeStore(0);
+
+    // سهم توسعه‌دهنده برای مایکت/کافه‌بازار:
+    //   (P / 1.1 - T) × R
+    // P = قیمت فروش (با احتساب ۱۰٪ مالیات بر ارزش افزوده)
+    // /1.1 = حذف ارزش افزوده، T = کارمزد تراکنش به ریال، R = درصد سهم
+    const developerShare = (price: number, rate: number, feePerTransaction: number) => {
+        const beforeVat = price / 1.1;
+        const afterVatAndFee = beforeVat - feePerTransaction;
+        if (afterVatAndFee <= 0) return 0;
+        return afterVatAndFee * (rate / 100);
+    };
+
+    const collect = (store: StoreSummary, price: number, rate: number, feePerTransaction: number) => {
+        let net: number;
+        if (rate > 0) {
+            net = developerShare(price, rate, feePerTransaction);
+        } else {
+            net = price; // سایر درگاه‌ها: بدون کارمزد فروشگاه
+        }
+        store.count += 1;
+        store.gross += price;
+        store.fee += price - net;
+        store.net += net;
+    };
+
+    for (const purchase of purchases) {
+        const price = getPurchaseFinalPrice(purchase);
+        const gateway = purchase.gateway;
+
+        let store: StoreSummary;
+        let rate: number;
+        let feePerTransaction: number;
+        if (gateway === PAYMENT_GATEWAYS.cafe.code) {
+            store = cafe;
+            rate = cafeRate;
+            feePerTransaction = transactionFee;
+        } else if (gateway === PAYMENT_GATEWAYS.myket.code) {
+            store = myket;
+            rate = myketRate;
+            feePerTransaction = transactionFee;
+        } else {
+            store = other;
+            rate = 0;
+            feePerTransaction = 0;
+        }
+
+        collect(store, price, rate, feePerTransaction);
+
+        totalCount += 1;
+        totalGross += price;
+        totalCommission += price - developerShare(price, rate, feePerTransaction);
+
+        const productId = purchase.product_id ?? purchase.product?.id ?? -1;
+        let row = rows.get(productId);
+        if (!row) {
+            row = {
+                productId,
+                title: purchase.product?.title || 'نامشخص',
+                packageName:
+                    purchase.product?.package_name?.title ||
+                    purchase.product?.package_name?.name ||
+                    '—',
+                count: 0,
+                gross: 0,
+                commission: 0,
+                net: 0,
+            };
+            rows.set(productId, row);
+        }
+        row.count += 1;
+        row.gross += price;
+        row.commission += price - developerShare(price, rate, feePerTransaction);
+        row.net += developerShare(price, rate, feePerTransaction);
+    }
+
+    return {
+        rows: Array.from(rows.values()),
+        totals: {
+            count: totalCount,
+            gross: totalGross,
+            commission: totalCommission,
+            net: totalGross - totalCommission,
+        },
+        myket,
+        cafe,
+        other,
+    };
+};
+
+export default function AccountingPage() {
+    const { token } = useAuth();
+
+    // Package / product filters
+    const [packages, setPackages] = useState<PackageName[]>([]);
+    const [selectedPackageName, setSelectedPackageName] = useState<string>('');
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedProductId, setSelectedProductId] = useState<string>('');
+
+    // Date range
+    const [dateFrom, setDateFrom] = useState<string>('');
+    const [dateTo, setDateTo] = useState<string>('');
+
+    // Time range
+    const [timeFrom, setTimeFrom] = useState<string>('');
+    const [timeTo, setTimeTo] = useState<string>('');
+
+    // Status filter — both paid statuses selected by default
+    const [statuses, setStatuses] = useState<number[]>([...PAID_STATUSES]);
+
+    // درصد سهم توسعه‌دهنده (R در فرمول) — مایکت و کافه‌بازار به‌طور پیش‌فرض ۸۵٪
+    const [myketRate, setMyketRate] = useState<string>('85');
+    const [cafeRate, setCafeRate] = useState<string>('85');
+    // کارمزد تراکنش به ریال (T در فرمول سهم توسعه‌دهنده)
+    const [transactionFee, setTransactionFee] = useState<string>('1200');
+
+    const [allPurchases, setAllPurchases] = useState<Purchase[] | null>(null);
+    const [result, setResult] = useState<AccountingResult | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const inputClass =
+        'block w-full px-3 py-2.5 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm dark:bg-gray-800/80 transition-colors';
+    const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';
+
+    // Load packages once on mount
+    useEffect(() => {
+        if (!token) return;
+        packagesApi
+            .getAllPackages(token)
+            .then((data) => {
+                setPackages(data);
+                if (data.length > 0) setSelectedPackageName(data[0].name || '');
+            })
+            .catch(() => setError('خطا در دریافت لیست پکیج‌ها'));
+    }, [token]);
+
+    // Load products when a package is selected
+    useEffect(() => {
+        if (!token || !selectedPackageName) {
+            setProducts([]);
+            setSelectedProductId('');
+            return;
+        }
+        setSelectedProductId('');
+        productsApi
+            .getProducts(selectedPackageName, token)
+            .then(setProducts)
+            .catch(() => setProducts([]));
+    }, [selectedPackageName, token]);
+
+    const handleAnalyze = useCallback(async () => {
+        if (!token) return;
+        setIsLoading(true);
+        setError(null);
+        try {
+            // Fetch all purchases once, then filter/aggregate in-memory.
+            const purchases = await purchasesApi.getAllPurchases({ per_page: 500 }, token);
+            setAllPurchases(purchases);
+            setResult(
+                computeAccounting(
+                    purchases,
+                    parseStoreRate(myketRate),
+                    parseStoreRate(cafeRate),
+                    parseFee(transactionFee)
+                )
+            );
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در دریافت داده‌ها');
+        } finally {
+            setIsLoading(false);
+        }
+    }, [token, myketRate, cafeRate, transactionFee]);
+
+    // Recompute whenever filters or commission rates change (uses cached data)
+    const runAnalysis = useCallback(() => {
+        if (!allPurchases) return;
+        const myket = parseStoreRate(myketRate);
+        const cafe = parseStoreRate(cafeRate);
+        const fee = parseFee(transactionFee);
+
+        const filtered = allPurchases.filter((p) => {
+            // Status
+            if (statuses.length > 0 && !statuses.includes(p.status)) return false;
+
+            // Product
+            if (selectedProductId !== '' && String(p.product_id) !== selectedProductId) return false;
+
+            // Package (via nested product)
+            if (selectedPackageName) {
+                const pkgName =
+                    p.product?.package_name?.name || p.product?.package_name?.title || '';
+                if (pkgName && pkgName !== selectedPackageName) return false;
+            }
+
+            // Date range (created_at is "Y-m-d H:i:s")
+            // When time is also selected, compare full datetime strings;
+            // otherwise compare only the date portion (YYYY-MM-DD).
+            const created = p.created_at ?? '';
+            if (dateFrom) {
+                const datePart = created.slice(0, 10);
+                if (timeFrom) {
+                    // Full datetime comparison: "YYYY-MM-DD HH:mm:ss"
+                    if (created < `${dateFrom} ${timeFrom}`) return false;
+                } else if (datePart < dateFrom) return false;
+            }
+            if (dateTo) {
+                const datePart = created.slice(0, 10);
+                if (timeTo) {
+                    if (created > `${dateTo} ${timeTo}`) return false;
+                } else if (datePart > dateTo) return false;
+            }
+
+            return true;
+        });
+
+        setResult(computeAccounting(filtered, myket, cafe, fee));
+    }, [allPurchases, statuses, selectedProductId, selectedPackageName, dateFrom, dateTo, timeFrom, timeTo, myketRate, cafeRate, transactionFee]);
+
+    // Recompute on filter/rate changes (no refetch needed once data is cached)
+    useEffect(() => {
+        if (allPurchases) runAnalysis();
+    }, [runAnalysis, allPurchases]);
+
+    const handleReset = () => {
+        setSelectedPackageName(packages[0]?.name || '');
+        setSelectedProductId('');
+        setDateFrom('');
+        setDateTo('');
+        setTimeFrom('');
+        setTimeTo('');
+        setStatuses([...PAID_STATUSES]);
+        setMyketRate('85');
+        setCafeRate('85');
+        setTransactionFee('1200');
+    };
+
+    const toggleStatus = (code: number) => {
+        setStatuses((prev) =>
+            prev.includes(code) ? prev.filter((c) => c !== code) : [...prev, code]
+        );
+    };
+
+    const statCardClass =
+        'rounded-2xl bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 p-5 shadow-sm';
+    const statIconClass = 'h-5 w-5';
+    const statValueClass = 'text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1.5';
+
+    return (
+        <div className="p-4 sm:p-8">
+            <div className="max-w-7xl mx-auto">
+                <PageHeader
+                    title="حسابداری"
+                    subtitle="تحلیل فروش محصولات و محاسبه کارمزد فروشگاه‌ها"
+                    action={
+                        allPurchases ? (
+                            <button
+                                onClick={handleAnalyze}
+                                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 disabled:opacity-50 transition-colors shadow-sm"
+                            >
+                                <ArrowPathIcon className="h-4 w-4" />
+                                بارگذاری مجدد
+                            </button>
+                        ) : null
+                    }
+                />
+
+                {/* Filters */}
+                <form
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        handleAnalyze();
+                    }}
+                    className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl p-5 sm:p-6 mb-6 shadow-sm"
+                >
+                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-6">
+                        <div>
+                            <label htmlFor="package_name" className={labelClass}>پکیج</label>
+                            <select
+                                id="package_name"
+                                value={selectedPackageName}
+                                onChange={(e) => setSelectedPackageName(e.target.value)}
+                                className={inputClass}
+                            >
+                                <option value="">همه پکیج‌ها</option>
+                                {packages.map((pkg) => (
+                                    <option key={pkg.id} value={pkg.name || ''}>
+                                        {pkg.title || pkg.name}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+
+                        <div>
+                            <label htmlFor="product" className={labelClass}>محصول</label>
+                            <select
+                                id="product"
+                                value={selectedProductId}
+                                onChange={(e) => setSelectedProductId(e.target.value)}
+                                className={inputClass}
+                            >
+                                <option value="">همه محصولات</option>
+                                {products.map((prod) => (
+                                    <option key={prod.id} value={String(prod.id)}>
+                                        {prod.title || `#${prod.id}`}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+
+                        <div>
+                            <PersianDatePicker
+                                id="date_from"
+                                label="از تاریخ"
+                                placeholder="انتخاب تاریخ شروع"
+                                value={dateFrom}
+                                onChange={setDateFrom}
+                            />
+                        </div>
+
+                        <div>
+                            <label htmlFor="time_from" className={labelClass}>از ساعت</label>
+                            <input
+                                type="time"
+                                id="time_from"
+                                value={timeFrom}
+                                onChange={(e) => setTimeFrom(e.target.value)}
+                                className={inputClass}
+                                placeholder="۰۰:۰۰"
+                            />
+                        </div>
+
+                        <div>
+                            <PersianDatePicker
+                                id="date_to"
+                                label="تا تاریخ"
+                                placeholder="انتخاب تاریخ پایان"
+                                value={dateTo}
+                                onChange={setDateTo}
+                            />
+                        </div>
+
+                        <div>
+                            <label htmlFor="time_to" className={labelClass}>تا ساعت</label>
+                            <input
+                                type="time"
+                                id="time_to"
+                                value={timeTo}
+                                onChange={(e) => setTimeTo(e.target.value)}
+                                className={inputClass}
+                                placeholder="۲۳:۵۹"
+                            />
+                        </div>
+                    </div>
+
+                    {/* Status checkboxes */}
+                    <div className="mt-4">
+                        <label className={labelClass}>وضعیت</label>
+                        <div className="flex flex-wrap gap-3">
+                            {[
+                                { code: 2, label: 'موفق' },
+                                { code: 3, label: 'مصرف‌شده' },
+                                { code: 1, label: 'در انتظار پرداخت' },
+                            ].map(({ code, label }) => (
+                                <label key={code} className="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
+                                    <input
+                                        type="checkbox"
+                                        checked={statuses.includes(code)}
+                                        onChange={() => toggleStatus(code)}
+                                        className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                                    />
+                                    {label}
+                                </label>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Commission settings */}
+                    <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                        <div>
+                            <label htmlFor="myket_rate" className={labelClass}>
+                                سهم توسعه‌دهنده مایکت (٪)
+                            </label>
+                            <input
+                                type="text"
+                                id="myket_rate"
+                                inputMode="numeric"
+                                value={myketRate}
+                                onChange={(e) => setMyketRate(e.target.value)}
+                                className={inputClass}
+                                placeholder="۸۵"
+                            />
+                        </div>
+                        <div>
+                            <label htmlFor="cafe_rate" className={labelClass}>
+                                سهم توسعه‌دهنده کافه بازار (٪)
+                            </label>
+                            <input
+                                type="text"
+                                id="cafe_rate"
+                                inputMode="numeric"
+                                value={cafeRate}
+                                onChange={(e) => setCafeRate(e.target.value)}
+                                className={inputClass}
+                                placeholder="۸۵"
+                            />
+                        </div>
+                        <div>
+                            <label htmlFor="transaction_fee" className={labelClass}>
+                                کارمزد تراکنش (ریال)
+                            </label>
+                            <input
+                                type="text"
+                                id="transaction_fee"
+                                inputMode="numeric"
+                                value={transactionFee}
+                                onChange={(e) => setTransactionFee(e.target.value)}
+                                className={inputClass}
+                                placeholder="۱۲۰۰"
+                            />
+                        </div>
+                    </div>
+                    <p className="mt-2 text-xs text-gray-400 dark:text-gray-500">
+                        سهم توسعه‌دهنده = (قیمت ÷ ۱٫۱ − کارمزد تراکنش) × درصد سهم. پیش‌فرض مایکت و
+                        کافه‌بازار ۸۵٪ (فروش زیر ۱۰ میلیارد ریال) و ۷۰٪ (بالای آن) است.
+                    </p>
+
+                    <div className="flex items-center gap-3 mt-5">
+                        <button
+                            type="submit"
+                            disabled={isLoading}
+                            className="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20"
+                        >
+                            <MagnifyingGlassIcon className="h-4 w-4" />
+                            تحلیل
+                        </button>
+                        <button
+                            type="button"
+                            onClick={handleReset}
+                            disabled={isLoading}
+                            className="inline-flex items-center gap-2 px-5 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 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm"
+                        >
+                            <ArrowPathIcon className="h-4 w-4" />
+                            پاک کردن فیلترها
+                        </button>
+                    </div>
+                </form>
+
+                {error && (
+                    <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 && (
+                    <div className="flex justify-center items-center py-16">
+                        <div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
+                    </div>
+                )}
+
+                {!isLoading && allPurchases && result && (
+                    <>
+                        {/* Summary stat cards */}
+                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+                            <div className={statCardClass}>
+                                <div className="flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+                                    <WalletIcon className={statIconClass} />
+                                    تعداد فروش
+                                </div>
+                                <div className={statValueClass}>{formatPrice(result.totals.count)}</div>
+                            </div>
+                            <div className={statCardClass}>
+                                <div className="flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+                                    <BanknotesIcon className={statIconClass} />
+                                    فروش ناخالص
+                                </div>
+                                <div className={statValueClass}>{formatPrice(result.totals.gross)} <span className="text-sm font-normal text-gray-400">تومان</span></div>
+                            </div>
+                            <div className={statCardClass}>
+                                <div className="flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+                                    <ChartPieIcon className={statIconClass} />
+                                    کارمزد فروشگاه‌ها
+                                </div>
+                                <div className={`${statValueClass} text-amber-600 dark:text-amber-400`}>
+                                    {formatPrice(result.totals.commission)} <span className="text-sm font-normal text-gray-400">تومان</span>
+                                </div>
+                            </div>
+                            <div className={statCardClass}>
+                                <div className="flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+                                    <CalculatorIcon className={statIconClass} />
+                                    سود خالص
+                                </div>
+                                <div className={`${statValueClass} text-emerald-600 dark:text-emerald-400`}>
+                                    {formatPrice(result.totals.net)} <span className="text-sm font-normal text-gray-400">تومان</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Per-store breakdown */}
+                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
+                            <StoreCard title="مایکت" summary={result.myket} />
+                            <StoreCard title="کافه بازار" summary={result.cafe} />
+                            <StoreCard title="سایر درگاه‌ها" summary={result.other} />
+                        </div>
+
+                        {/* Per-product table */}
+                        <div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
+                            <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
+                                <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                    تحلیل به تفکیک محصول
+                                </h3>
+                            </div>
+
+                            {result.rows.length === 0 ? (
+                                <div className="text-center py-16">
+                                    <p className="text-gray-500 dark:text-gray-400 text-sm">
+                                        هیچ فروشی با این فیلترها یافت نشد
+                                    </p>
+                                </div>
+                            ) : (
+                                <div className="overflow-x-auto">
+                                    <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
+                                        <thead className="bg-gray-50 dark:bg-gray-800/60">
+                                            <tr className="text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                                <th className="px-4 py-3">محصول</th>
+                                                <th className="px-4 py-3">پکیج</th>
+                                                <th className="px-4 py-3">تعداد فروش</th>
+                                                <th className="px-4 py-3">فروش ناخالص</th>
+                                                <th className="px-4 py-3">کارمزد فروشگاه</th>
+                                                <th className="px-4 py-3">سود خالص</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
+                                            {result.rows.map((row) => (
+                                                <tr key={row.productId} className="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
+                                                    <td className="px-4 py-3.5 text-sm font-medium text-gray-900 dark:text-gray-100 whitespace-nowrap">
+                                                        {row.title}
+                                                    </td>
+                                                    <td className="px-4 py-3.5 text-sm text-gray-700 dark:text-gray-300 whitespace-nowrap">
+                                                        {row.packageName}
+                                                    </td>
+                                                    <td className="px-4 py-3.5 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap">
+                                                        {formatPrice(row.count)}
+                                                    </td>
+                                                    <td className="px-4 py-3.5 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap font-medium">
+                                                        {formatPrice(row.gross)} <span className="text-xs text-gray-400">تومان</span>
+                                                    </td>
+                                                    <td className="px-4 py-3.5 text-sm text-amber-600 dark:text-amber-400 whitespace-nowrap">
+                                                        {formatPrice(row.commission)} <span className="text-xs text-gray-400">تومان</span>
+                                                    </td>
+                                                    <td className="px-4 py-3.5 text-sm text-emerald-600 dark:text-emerald-400 whitespace-nowrap font-medium">
+                                                        {formatPrice(row.net)} <span className="text-xs text-gray-400">تومان</span>
+                                                    </td>
+                                                </tr>
+                                            ))}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            )}
+                        </div>
+                    </>
+                )}
+
+                {!isLoading && !allPurchases && (
+                    <div className="text-center py-16 bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl shadow-sm">
+                        <div className="mx-auto h-12 w-12 rounded-xl bg-indigo-50 dark:bg-indigo-500/15 flex items-center justify-center mb-3">
+                            <CalculatorIcon className="h-6 w-6 text-indigo-600 dark:text-indigo-400" />
+                        </div>
+                        <p className="text-gray-500 dark:text-gray-400 text-sm">
+                            برای تحلیل فروش، فیلترها را تنظیم و روی «تحلیل» کلیک کنید
+                        </p>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+function StoreCard({ title, summary }: { title: string; summary: StoreSummary }) {
+    return (
+        <div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl p-5 shadow-sm">
+            <div className="flex items-center justify-between">
+                <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100">{title}</h4>
+                {summary.rate > 0 && (
+                    <span className="px-2 py-0.5 text-xs font-medium rounded-lg bg-indigo-50 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-400">
+                        سهم توسعه‌دهنده {summary.rate}٪
+                    </span>
+                )}
+            </div>
+            <div className="mt-3 space-y-1.5 text-sm">
+                <div className="flex justify-between text-gray-500 dark:text-gray-400">
+                    <span>تعداد فروش</span>
+                    <span className="text-gray-900 dark:text-gray-100 font-medium">{formatPrice(summary.count)}</span>
+                </div>
+                <div className="flex justify-between text-gray-500 dark:text-gray-400">
+                    <span>فروش ناخالص</span>
+                    <span className="text-gray-900 dark:text-gray-100 font-medium">{formatPrice(summary.gross)} تومان</span>
+                </div>
+                <div className="flex justify-between text-gray-500 dark:text-gray-400">
+                    <span>سهم فروشگاه‌ها</span>
+                    <span className="text-amber-600 dark:text-amber-400 font-medium">{formatPrice(summary.fee)} تومان</span>
+                </div>
+                <div className="flex justify-between pt-1.5 border-t border-gray-100 dark:border-gray-800 text-gray-500 dark:text-gray-400">
+                    <span>سود خالص</span>
+                    <span className="text-emerald-600 dark:text-emerald-400 font-bold">{formatPrice(summary.net)} تومان</span>
+                </div>
+            </div>
+        </div>
+    );
+}

app/admin/dashboard/page.tsx

@@ -2,13 +2,11 @@
 
 import { useAuth } from '@/contexts/AuthContext';
 import Link from 'next/link';
-import { UsersIcon, CubeIcon, TagIcon , BellIcon, GiftIcon, PowerIcon } from '@heroicons/react/24/outline';
+import { UsersIcon, CubeIcon, TagIcon, BellIcon, GiftIcon, ShoppingBagIcon, CalculatorIcon } from '@heroicons/react/24/outline';
 import { MegaphoneIcon } from 'lucide-react';
-import ThemeToggle from '@/components/ThemeToggle';
-// import { BellIcon } from 'lucide-react';
 
 export default function Dashboard() {
-    const { user, logout } = useAuth();
+    const { user } = useAuth();
 
     const cards = [
         {
@@ -16,88 +14,116 @@ export default function Dashboard() {
             title: 'مدیریت کاربران',
             desc: 'مشاهده و مدیریت کاربران، اشتراک‌ها و تراکنش‌ها',
             Icon: UsersIcon,
-            iconWrap: 'bg-indigo-100 text-indigo-600 dark:bg-indigo-500/15 dark:text-indigo-400',
+            iconBg: 'bg-indigo-100 dark:bg-indigo-500/15',
+            iconColor: 'text-indigo-600 dark:text-indigo-400',
+            hoverBorder: 'hover:border-indigo-300 dark:hover:border-indigo-700',
+        },
+        {
+            href: '/admin/purchases',
+            title: 'خریدهای اشتراک',
+            desc: 'مشاهده و فیلتر خریدها بر اساس ایمیل، موبایل، پکیج و منبع پرداخت',
+            Icon: ShoppingBagIcon,
+            iconBg: 'bg-orange-100 dark:bg-orange-500/15',
+            iconColor: 'text-orange-600 dark:text-orange-400',
+            hoverBorder: 'hover:border-orange-300 dark:hover:border-orange-700',
+        },
+        {
+            href: '/admin/accounting',
+            title: 'حسابداری',
+            desc: 'تحلیل فروش محصولات و محاسبه کارمزد مایکت و کافه بازار',
+            Icon: CalculatorIcon,
+            iconBg: 'bg-cyan-100 dark:bg-cyan-500/15',
+            iconColor: 'text-cyan-600 dark:text-cyan-400',
+            hoverBorder: 'hover:border-cyan-300 dark:hover:border-cyan-700',
         },
         {
             href: '/admin/packages',
             title: 'مدیریت پکیج‌ها',
             desc: 'ایجاد و مدیریت پکیج‌های نرم‌افزار',
             Icon: CubeIcon,
-            iconWrap: 'bg-green-100 text-green-600 dark:bg-green-500/15 dark:text-green-400',
+            iconBg: 'bg-green-100 dark:bg-green-500/15',
+            iconColor: 'text-green-600 dark:text-green-400',
+            hoverBorder: 'hover:border-green-300 dark:hover:border-green-700',
         },
         {
             href: '/admin/products',
             title: 'مدیریت محصولات',
             desc: 'ایجاد و مدیریت محصولات و اشتراک‌ها',
             Icon: TagIcon,
-            iconWrap: 'bg-purple-100 text-purple-600 dark:bg-purple-500/15 dark:text-purple-400',
+            iconBg: 'bg-purple-100 dark:bg-purple-500/15',
+            iconColor: 'text-purple-600 dark:text-purple-400',
+            hoverBorder: 'hover:border-purple-300 dark:hover:border-purple-700',
         },
         {
             href: '/admin/reminders',
             title: 'مدیریت یادآوری‌ها',
             desc: 'ایجاد و مدیریت یادآوری‌ها و پیام‌های انگیزشی',
             Icon: BellIcon,
-            iconWrap: 'bg-yellow-100 text-yellow-600 dark:bg-yellow-500/15 dark:text-yellow-400',
+            iconBg: 'bg-yellow-100 dark:bg-yellow-500/15',
+            iconColor: 'text-yellow-600 dark:text-yellow-400',
+            hoverBorder: 'hover:border-yellow-300 dark:hover:border-yellow-700',
         },
         {
             href: '/admin/promotions',
             title: 'مدیریت تبلیغات',
             desc: 'ایجاد و مدیریت تبلیغات، بنرها و اسلایدرها',
             Icon: MegaphoneIcon,
-            iconWrap: 'bg-pink-100 text-pink-600 dark:bg-pink-500/15 dark:text-pink-400',
+            iconBg: 'bg-pink-100 dark:bg-pink-500/15',
+            iconColor: 'text-pink-600 dark:text-pink-400',
+            hoverBorder: 'hover:border-pink-300 dark:hover:border-pink-700',
         },
         {
             href: '/admin/referral-rewards',
             title: 'پاداش‌های معرفی',
             desc: 'اعطای اشتراک رایگان به کاربران واجد شرایط دعوت',
             Icon: GiftIcon,
-            iconWrap: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400',
+            iconBg: 'bg-emerald-100 dark:bg-emerald-500/15',
+            iconColor: 'text-emerald-600 dark:text-emerald-400',
+            hoverBorder: 'hover:border-emerald-300 dark:hover:border-emerald-700',
         },
     ];
 
     return (
         <div className="p-4 sm:p-8">
             <div className="max-w-7xl mx-auto">
-                <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 p-6">
-                    <div className="flex justify-between items-center mb-6">
-                        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
-                            داشبورد
+                {/* Welcome Section */}
+                <div className="mb-8">
+                    <div className="bg-gradient-to-l from-indigo-600 to-indigo-700 rounded-2xl p-6 sm:p-8 text-white shadow-lg shadow-indigo-500/20">
+                        <h1 className="text-2xl sm:text-3xl font-bold">
+                            خوش آمدید
                         </h1>
-                        <div className="flex items-center gap-2">
-                            <ThemeToggle withLabel />
-                            <button
-                                onClick={logout}
-                                className="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 transition-colors"
-                            >
-                                <PowerIcon className="h-5 w-5" />
-                                خروج
-                            </button>
+                        <p className="mt-1 text-indigo-100 text-sm sm:text-base">
+                            {user?.email}
+                        </p>
+                        <p className="mt-3 text-indigo-200 text-sm">
+                            یکی از بخش‌های زیر را برای مدیریت انتخاب کنید
+                        </p>
                     </div>
                 </div>
 
-                    <div className="border-t border-gray-200 dark:border-gray-800 pt-6">
-                        <h2 className="text-lg font-semibold mb-1 text-gray-900 dark:text-gray-100">خوش آمدید، {user?.email}</h2>
-                        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">یکی از بخش‌های زیر را برای مدیریت انتخاب کنید.</p>
-
                 {/* Dashboard Cards */}
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-                            {cards.map(({ href, title, desc, Icon, iconWrap }) => (
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {cards.map(({ href, title, desc, Icon, iconBg, iconColor, hoverBorder }) => (
                         <Link key={href} href={href} className="block group">
-                                    <div className="h-full bg-white dark:bg-gray-900 rounded-xl p-6 ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm hover:shadow-md hover:ring-indigo-300 dark:hover:ring-indigo-700 hover:-translate-y-0.5 transition-all duration-200">
-                                        <div className={`inline-flex h-12 w-12 items-center justify-center rounded-xl mb-4 ${iconWrap}`}>
-                                            <Icon className="h-6 w-6" />
+                            <div className={`h-full bg-white dark:bg-gray-900 rounded-2xl p-5 ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm hover:shadow-md ${hoverBorder} hover:-translate-y-0.5 transition-all duration-200`}>
+                                <div className={`inline-flex h-11 w-11 items-center justify-center rounded-xl mb-3 ${iconBg}`}>
+                                    <Icon className={`h-5.5 w-5.5 ${iconColor}`} />
                                 </div>
-                                        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">{title}</h3>
-                                        <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                                <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">{title}</h3>
+                                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1.5 leading-relaxed">
                                     {desc}
                                 </p>
+                                <div className="mt-4 flex items-center text-xs font-medium text-indigo-600 dark:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity">
+                                    ورود به بخش
+                                    <svg className="h-4 w-4 mr-1 rotate-180" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+                                    </svg>
+                                </div>
                             </div>
                         </Link>
                     ))}
                 </div>
             </div>
         </div>
-            </div>
-        </div>
     );
 }

app/admin/layout.tsx

@@ -1,18 +1,33 @@
 'use client';
 
 import { AuthProvider } from '@/contexts/AuthContext';
-import ThemeToggle from '@/components/ThemeToggle';
+import AuthGuard from '@/components/AuthGuard';
+import Sidebar from '@/components/admin/Sidebar';
+import ToastContainer from '@/components/Toast';
+import { usePathname } from 'next/navigation';
 
 export default function AdminLayout({
     children,
 }: {
     children: React.ReactNode;
 }) {
+    const pathname = usePathname();
+    const isLogin = pathname === '/admin/login' || pathname === '/admin/login/';
+
     return (
         <AuthProvider>
-            <div className="min-h-screen bg-gray-100 dark:bg-gray-950">
+            <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+                <ToastContainer />
+                {isLogin ? (
+                    children
+                ) : (
+                    <AuthGuard>
+                        <Sidebar />
+                        <main className="lg:pr-64 min-h-screen">
                             {children}
-                <ThemeToggle floating />
+                        </main>
+                    </AuthGuard>
+                )}
             </div>
         </AuthProvider>
     );

app/admin/login/page.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useAuth } from '@/contexts/AuthContext';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
 import { LockClosedIcon } from '@heroicons/react/24/outline';
 
 export default function LoginPage() {
@@ -25,7 +24,7 @@ export default function LoginPage() {
         setLocalError('');
 
         if (!auth || !password) {
-            setLocalError('Please fill in all fields');
+            setLocalError('لطفاً همه فیلدها را پر کنید');
             return;
         }
 
@@ -37,33 +36,39 @@ export default function LoginPage() {
     };
 
     return (
-        <div className="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-950 py-12 px-4 sm:px-6 lg:px-8">
-            <div className="max-w-md w-full">
-                <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-xl ring-1 ring-gray-200 dark:ring-gray-800 p-8 space-y-8">
+        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 via-indigo-50/30 to-gray-100 dark:from-gray-950 dark:via-indigo-950/20 dark:to-gray-950 py-12 px-4 sm:px-6 lg:px-8">
+            {/* Decorative background */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+                <div className="absolute -top-40 -right-40 w-80 h-80 bg-indigo-100 dark:bg-indigo-500/10 rounded-full blur-3xl opacity-60" />
+                <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-indigo-100 dark:bg-indigo-500/10 rounded-full blur-3xl opacity-40" />
+            </div>
+
+            <div className="relative max-w-md w-full">
+                <div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl rounded-3xl shadow-xl shadow-gray-200/50 dark:shadow-black/30 ring-1 ring-gray-200/60 dark:ring-gray-800/60 p-8 space-y-8">
                     <div>
-                        <div className="mx-auto h-14 w-14 rounded-2xl bg-indigo-600 flex items-center justify-center mb-4">
-                            <LockClosedIcon className="h-7 w-7 text-white" />
+                        <div className="mx-auto h-16 w-16 rounded-2xl bg-gradient-to-br from-indigo-500 to-indigo-700 flex items-center justify-center mb-5 shadow-lg shadow-indigo-500/30">
+                            <LockClosedIcon className="h-8 w-8 text-white" />
                         </div>
                         <h2 className="text-center text-2xl font-bold text-gray-900 dark:text-gray-100">
-                            پنل ادمین اپروایجنسی
+                            پنل ادمین
                         </h2>
                         <p className="mt-2 text-center text-sm text-gray-500 dark:text-gray-400">
-                            برای ادامه وارد حساب کاربری خود شوید
+                            اپروایجنسی
                         </p>
                     </div>
 
                     <form className="space-y-5" onSubmit={handleSubmit}>
                         <div className="space-y-4">
                             <div>
-                                <label htmlFor="auth" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                    ایمیل
+                                <label htmlFor="auth" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+                                    ایمیل یا نام کاربری
                                 </label>
                                 <input
                                     id="auth"
                                     name="auth"
                                     type="text"
                                     required
-                                    className="appearance-none relative block w-full px-3 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
+                                    className="block w-full px-4 py-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/80 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm transition-all duration-150 shadow-sm"
                                     placeholder="example@email.com"
                                     value={auth}
                                     onChange={(e) => setAuth(e.target.value)}
@@ -72,7 +77,7 @@ export default function LoginPage() {
                                 />
                             </div>
                             <div>
-                                <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                                <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
                                     رمز عبور
                                 </label>
                                 <input
@@ -80,7 +85,7 @@ export default function LoginPage() {
                                     name="password"
                                     type="password"
                                     required
-                                    className="appearance-none relative block w-full px-3 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
+                                    className="block w-full px-4 py-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/80 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm transition-all duration-150 shadow-sm"
                                     placeholder="••••••••"
                                     value={password}
                                     onChange={(e) => setPassword(e.target.value)}
@@ -91,10 +96,10 @@ export default function LoginPage() {
                         </div>
 
                         {(error || localError) && (
-                            <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4">
-                                <h3 className="text-sm font-medium text-red-800 dark:text-red-300 text-center">
+                            <div className="rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4">
+                                <p className="text-sm font-medium text-red-700 dark:text-red-300 text-center">
                                     {localError || error}
-                                </h3>
+                                </p>
                             </div>
                         )}
 
@@ -102,9 +107,16 @@ export default function LoginPage() {
                             <button
                                 type="submit"
                                 disabled={isLoading}
-                                className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                                className="relative w-full flex justify-center items-center py-3 px-4 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-l from-indigo-600 to-indigo-700 hover:from-indigo-700 hover:to-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-indigo-500/25 hover:shadow-xl hover:shadow-indigo-500/30 transition-all duration-150"
                             >
-                                {isLoading ? 'کمی صبر کنید...' : 'ورود'}
+                                {isLoading ? (
+                                    <div className="flex items-center gap-2">
+                                        <div className="h-4 w-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                        کمی صبر کنید...
+                                    </div>
+                                ) : (
+                                    'ورود'
+                                )}
                             </button>
                         </div>
                     </form>

app/admin/packages/page.tsx

@@ -5,6 +5,8 @@ import { useAuth } from '@/contexts/AuthContext';
 import { packagesApi } from '@/lib/api/packages';
 import PackageList from '@/components/admin/packages/PackageList';
 import PackageForm from '@/components/admin/packages/PackageForm';
+import PageHeader from '@/components/admin/PageHeader';
+import { showToast } from '@/components/Toast';
 import { PackageName, CreatePackageData, UpdatePackageData } from '@/types/package';
 import { PlusIcon } from '@heroicons/react/24/outline';
 
@@ -15,9 +17,7 @@ export default function PackagesPage() {
     const [isLoading, setIsLoading] = useState(false);
     const [isFormVisible, setIsFormVisible] = useState(false);
     const [error, setError] = useState<string | null>(null);
-    const [success, setSuccess] = useState<string | null>(null);
 
-    // Load packages on mount
     useEffect(() => {
         if (token) {
             loadPackages();
@@ -54,11 +54,10 @@ export default function PackagesPage() {
 
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             await packagesApi.deletePackage(pkg.name!, token!);
-            setSuccess('پکیج با موفقیت حذف شد');
+            showToast('success', 'پکیج با موفقیت حذف شد');
             await loadPackages();
         } catch (err) {
             setError(err instanceof Error ? err.message : 'خطا در حذف پکیج');
@@ -70,17 +69,14 @@ export default function PackagesPage() {
     const handleSubmit = async (data: CreatePackageData | UpdatePackageData) => {
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             if (selectedPackage) {
-                // Update existing package
                 await packagesApi.updatePackage(selectedPackage.name!, data, token!);
-                setSuccess('پکیج با موفقیت به‌روزرسانی شد');
+                showToast('success', 'پکیج با موفقیت به‌روزرسانی شد');
             } else {
-                // Create new package
                 await packagesApi.createPackage(data as CreatePackageData, token!);
-                setSuccess('پکیج با موفقیت ایجاد شد');
+                showToast('success', 'پکیج با موفقیت ایجاد شد');
             }
 
             await loadPackages();
@@ -97,41 +93,37 @@ export default function PackagesPage() {
         setIsFormVisible(false);
         setSelectedPackage(null);
         setError(null);
-        setSuccess(null);
     };
 
     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">
-                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
-                        مدیریت پکیج‌ها
-                    </h1>
-                    {!isFormVisible && (
+                <PageHeader
+                    title="مدیریت پکیج‌ها"
+                    action={
+                        !isFormVisible ? (
                             <button
                                 onClick={handleCreate}
-                            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors"
+                                className="inline-flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors shadow-sm shadow-indigo-500/20"
                             >
-                            <PlusIcon className="h-5 w-5 ml-2" />
+                                <PlusIcon className="h-4 w-4" />
                                 پکیج جدید
                             </button>
-                    )}
-                </div>
+                        ) : undefined
+                    }
+                />
 
-                {/* 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 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>
                 )}
 
-                {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>
-                )}
-
-                {/* Form or List */}
                 {isFormVisible ? (
                     <PackageForm
                         package={selectedPackage}

app/admin/products/page.tsx

@@ -6,6 +6,8 @@ import { packagesApi } from '@/lib/api/packages';
 import { productsApi } from '@/lib/api/products';
 import ProductList from '@/components/admin/products/ProductList';
 import ProductForm from '@/components/admin/products/ProductForm';
+import PageHeader from '@/components/admin/PageHeader';
+import { showToast } from '@/components/Toast';
 import { PackageName } from '@/types/package';
 import { Product, CreateProductData, UpdateProductData } from '@/types/product';
 import { PlusIcon } from '@heroicons/react/24/outline';
@@ -20,13 +22,10 @@ export default function ProductsPage() {
     const [isLoadingPackages, setIsLoadingPackages] = useState(false);
     const [isFormVisible, setIsFormVisible] = useState(false);
     const [error, setError] = useState<string | null>(null);
-    const [success, setSuccess] = useState<string | null>(null);
 
-    // Use refs to track initial loads and prevent duplicate calls
     const initialLoadRef = useRef(false);
     const prevPackageRef = useRef<string | null>(null);
 
-    // Load packages on mount - only once
     useEffect(() => {
         if (token && !initialLoadRef.current) {
             initialLoadRef.current = true;
@@ -51,9 +50,7 @@ export default function ProductsPage() {
     };
 
     const loadProducts = useCallback(async (packageName: string, force = false) => {
-        // Prevent duplicate loads of the same package
         if (!force && prevPackageRef.current === packageName) {
-            console.log('Skipping duplicate load for package:', packageName);
             return;
         }
 
@@ -62,7 +59,6 @@ export default function ProductsPage() {
         prevPackageRef.current = packageName;
 
         try {
-            console.log('Loading products for package:', packageName);
             const data = await productsApi.getProducts(packageName, token!);
             setProducts(data);
         } catch (err) {
@@ -72,7 +68,6 @@ export default function ProductsPage() {
         }
     }, [token]);
 
-    // Load products when package changes - with proper dependency
     useEffect(() => {
         if (selectedPackage?.name && token) {
             loadProducts(selectedPackage.name);
@@ -87,7 +82,6 @@ export default function ProductsPage() {
         setIsFormVisible(false);
         setSelectedProduct(null);
         setError(null);
-        setSuccess(null);
     };
 
     const handleCreate = () => {
@@ -102,21 +96,18 @@ export default function ProductsPage() {
 
     const handleDelete = async (product: Product) => {
         if (!selectedPackage) return;
-
         if (!confirm(`آیا از حذف محصول "${product.title}" اطمینان دارید؟`)) {
             return;
         }
 
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             await productsApi.deleteProduct(selectedPackage.name!, product.id, token!);
-            setSuccess('محصول با موفقیت حذف شد');
-            // Force reload products after delete
+            showToast('success', 'محصول با موفقیت حذف شد');
             if (selectedPackage.name) {
-                prevPackageRef.current = null; // Reset ref to force load
+                prevPackageRef.current = null;
                 await loadProducts(selectedPackage.name, true);
             }
         } catch (err) {
@@ -131,22 +122,18 @@ export default function ProductsPage() {
 
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             if (selectedProduct) {
-                // Update existing product
                 await productsApi.updateProduct(selectedPackage.name!, selectedProduct.id, data, token!);
-                setSuccess('محصول با موفقیت به‌روزرسانی شد');
+                showToast('success', 'محصول با موفقیت به‌روزرسانی شد');
             } else {
-                // Create new product
                 await productsApi.createProduct(selectedPackage.name!, data as CreateProductData, token!);
-                setSuccess('محصول با موفقیت ایجاد شد');
+                showToast('success', 'محصول با موفقیت ایجاد شد');
             }
 
-            // Force reload products after create/update
             if (selectedPackage.name) {
-                prevPackageRef.current = null; // Reset ref to force load
+                prevPackageRef.current = null;
                 await loadProducts(selectedPackage.name, true);
             }
 
@@ -163,20 +150,15 @@ export default function ProductsPage() {
         setIsFormVisible(false);
         setSelectedProduct(null);
         setError(null);
-        setSuccess(null);
     };
 
     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">
-                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
-                        مدیریت محصولات
-                    </h1>
-                </div>
+                <PageHeader title="مدیریت محصولات" />
 
                 {/* Package Selector */}
-                <div className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow mb-6">
+                <div className="bg-white dark:bg-gray-900 p-4 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm mb-6">
                     <label htmlFor="package" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                         انتخاب پکیج
                     </label>
@@ -185,7 +167,7 @@ export default function ProductsPage() {
                         value={selectedPackage?.name || ''}
                         onChange={handlePackageChange}
                         disabled={isLoadingPackages}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50 dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
+                        className="block w-full px-3 py-2.5 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm disabled:opacity-50 dark:bg-gray-800/80 transition-colors"
                     >
                         {isLoadingPackages ? (
                             <option>در حال بارگذاری پکیج‌ها...</option>
@@ -199,20 +181,17 @@ export default function ProductsPage() {
                     </select>
                 </div>
 
-                {/* 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 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>
                 )}
 
-                {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>
-                )}
-
-                {/* Form or List */}
                 {selectedPackage && (
                     <>
                         {!isFormVisible && (
@@ -220,9 +199,9 @@ export default function ProductsPage() {
                                 <button
                                     onClick={handleCreate}
                                     disabled={isLoading}
-                                    className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
+                                    className="inline-flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20"
                                 >
-                                    <PlusIcon className="h-5 w-5 ml-2" />
+                                    <PlusIcon className="h-4 w-4" />
                                     محصول جدید
                                 </button>
                             </div>

app/admin/promotions/page.tsx

@@ -5,6 +5,8 @@ import { useAuth } from '@/contexts/AuthContext';
 import { promotionsApi } from '@/lib/api/promotions';
 import PromotionList from '@/components/admin/promotions/PromotionList';
 import PromotionForm from '@/components/admin/promotions/PromotionForm';
+import PageHeader from '@/components/admin/PageHeader';
+import { showToast } from '@/components/Toast';
 import { Promotion, CreatePromotionData, UpdatePromotionData } from '@/types/promotion';
 import { PlusIcon } from '@heroicons/react/24/outline';
 
@@ -15,11 +17,9 @@ export default function PromotionsPage() {
     const [isLoading, setIsLoading] = useState(false);
     const [isFormVisible, setIsFormVisible] = useState(false);
     const [error, setError] = useState<string | null>(null);
-    const [success, setSuccess] = useState<string | null>(null);
 
     const initialLoadRef = useRef(false);
 
-    // Load promotions on mount
     useEffect(() => {
         if (token && !initialLoadRef.current) {
             initialLoadRef.current = true;
@@ -57,11 +57,10 @@ export default function PromotionsPage() {
 
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             await promotionsApi.deletePromotion(promotion.id, token!);
-            setSuccess('تبلیغ با موفقیت حذف شد');
+            showToast('success', 'تبلیغ با موفقیت حذف شد');
             await loadPromotions();
         } catch (err) {
             setError(err instanceof Error ? err.message : 'خطا در حذف تبلیغ');
@@ -73,11 +72,10 @@ export default function PromotionsPage() {
     const handleToggleActive = async (promotion: Promotion) => {
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             await promotionsApi.toggleActive(promotion.id, !promotion.is_active, token!);
-            setSuccess(`تبلیغ با موفقیت ${!promotion.is_active ? 'فعال' : 'غیرفعال'} شد`);
+            showToast('success', `تبلیغ با موفقیت ${!promotion.is_active ? 'فعال' : 'غیرفعال'} شد`);
             await loadPromotions();
         } catch (err) {
             setError(err instanceof Error ? err.message : 'خطا در تغییر وضعیت تبلیغ');
@@ -89,17 +87,14 @@ export default function PromotionsPage() {
     const handleSubmit = async (data: CreatePromotionData | UpdatePromotionData) => {
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             if (selectedPromotion) {
-                // Update existing promotion
                 await promotionsApi.updatePromotion(selectedPromotion.id, data, token!);
-                setSuccess('تبلیغ با موفقیت به‌روزرسانی شد');
+                showToast('success', 'تبلیغ با موفقیت به‌روزرسانی شد');
             } else {
-                // Create new promotion
                 await promotionsApi.createPromotion(data as CreatePromotionData, token!);
-                setSuccess('تبلیغ با موفقیت ایجاد شد');
+                showToast('success', 'تبلیغ با موفقیت ایجاد شد');
             }
 
             await loadPromotions();
@@ -116,42 +111,38 @@ export default function PromotionsPage() {
         setIsFormVisible(false);
         setSelectedPromotion(null);
         setError(null);
-        setSuccess(null);
     };
 
     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">
-                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
-                        مدیریت تبلیغات
-                    </h1>
-                    {!isFormVisible && (
+                <PageHeader
+                    title="مدیریت تبلیغات"
+                    action={
+                        !isFormVisible ? (
                             <button
                                 onClick={handleCreate}
                                 disabled={isLoading}
-                            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
+                                className="inline-flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20"
                             >
-                            <PlusIcon className="h-5 w-5 ml-2" />
+                                <PlusIcon className="h-4 w-4" />
                                 تبلیغ جدید
                             </button>
-                    )}
-                </div>
+                        ) : undefined
+                    }
+                />
 
-                {/* 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 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>
                 )}
 
-                {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>
-                )}
-
-                {/* Form or List */}
                 {isFormVisible ? (
                     <PromotionForm
                         promotion={selectedPromotion}

app/admin/purchases/page.tsx

@@ -0,0 +1,292 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { purchasesApi } from '@/lib/api/purchases';
+import { packagesApi } from '@/lib/api/packages';
+import PageHeader from '@/components/admin/PageHeader';
+import {
+    Purchase,
+    Paginated,
+    PurchaseFilters,
+    PAYMENT_GATEWAYS,
+    PURCHASE_STATUSES,
+    getGatewayLabel,
+    getPurchaseStatusLabel,
+} from '@/types/purchase';
+import { PackageName } from '@/types/package';
+import { formatPrice, formatDate, formatTime, getProductTypeLabel, getPurchaseFinalPrice } from '@/lib/utils';
+import { MagnifyingGlassIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+
+const statusBadgeClass = (status: number): string => {
+    switch (status) {
+        case 2:
+            return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
+        case 3:
+            return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
+        default:
+            return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300';
+    }
+};
+
+const emptyFilters: PurchaseFilters = {
+    email: '',
+    mobile: '',
+    package_name: '',
+    gateway: '',
+    status: undefined,
+};
+
+export default function PurchasesPage() {
+    const { token } = useAuth();
+    const [packages, setPackages] = useState<PackageName[]>([]);
+    const [filters, setFilters] = useState<PurchaseFilters>(emptyFilters);
+    const [result, setResult] = useState<Paginated<Purchase> | null>(null);
+    const [page, setPage] = useState(1);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const loadPurchases = useCallback(async (targetPage: number, activeFilters: PurchaseFilters) => {
+        if (!token) return;
+        setIsLoading(true);
+        setError(null);
+        try {
+            const data = await purchasesApi.getPurchases(
+                { ...activeFilters, page: targetPage, per_page: 30 },
+                token
+            );
+            setResult(data);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در دریافت لیست خریدها');
+        } finally {
+            setIsLoading(false);
+        }
+    }, [token]);
+
+    useEffect(() => {
+        if (!token) return;
+        packagesApi.getAllPackages(token).then(setPackages).catch(() => setPackages([]));
+        loadPurchases(1, emptyFilters);
+    }, [token, loadPurchases]);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setFilters((prev) => ({
+            ...prev,
+            [name]: name === 'status' ? (value === '' ? undefined : parseInt(value)) : value,
+        }));
+    };
+
+    const handleSearch = (e: React.FormEvent) => {
+        e.preventDefault();
+        setPage(1);
+        loadPurchases(1, filters);
+    };
+
+    const handleReset = () => {
+        setFilters(emptyFilters);
+        setPage(1);
+        loadPurchases(1, emptyFilters);
+    };
+
+    const goToPage = (targetPage: number) => {
+        setPage(targetPage);
+        loadPurchases(targetPage, filters);
+    };
+
+    const inputClass =
+        'block w-full px-3 py-2.5 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm dark:bg-gray-800/80 transition-colors';
+    const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';
+
+    return (
+        <div className="p-4 sm:p-8">
+            <div className="max-w-7xl mx-auto">
+                <PageHeader title="خریدهای اشتراک" />
+
+                {/* Filters */}
+                <form
+                    onSubmit={handleSearch}
+                    className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl p-5 sm:p-6 mb-6 shadow-sm"
+                >
+                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
+                        <div>
+                            <label htmlFor="email" className={labelClass}>ایمیل</label>
+                            <input type="text" id="email" name="email" value={filters.email || ''} onChange={handleInputChange} className={inputClass} placeholder="example@mail.com" dir="ltr" />
+                        </div>
+                        <div>
+                            <label htmlFor="mobile" className={labelClass}>شماره موبایل</label>
+                            <input type="text" id="mobile" name="mobile" value={filters.mobile || ''} onChange={handleInputChange} className={inputClass} placeholder="0912xxxxxxx" dir="ltr" />
+                        </div>
+                        <div>
+                            <label htmlFor="package_name" className={labelClass}>پکیج</label>
+                            <select id="package_name" name="package_name" value={filters.package_name || ''} onChange={handleInputChange} className={inputClass}>
+                                <option value="">همه پکیج‌ها</option>
+                                {packages.map((pkg) => (
+                                    <option key={pkg.id} value={pkg.name || ''}>
+                                        {pkg.title || pkg.name}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                        <div>
+                            <label htmlFor="gateway" className={labelClass}>منبع پرداخت</label>
+                            <select id="gateway" name="gateway" value={filters.gateway || ''} onChange={handleInputChange} className={inputClass}>
+                                <option value="">همه درگاه‌ها</option>
+                                {Object.entries(PAYMENT_GATEWAYS).map(([key, g]) => (
+                                    <option key={key} value={key}>{g.label}</option>
+                                ))}
+                            </select>
+                        </div>
+                        <div>
+                            <label htmlFor="status" className={labelClass}>وضعیت</label>
+                            <select id="status" name="status" value={filters.status ?? ''} onChange={handleInputChange} className={inputClass}>
+                                <option value="">همه وضعیت‌ها</option>
+                                {Object.entries(PURCHASE_STATUSES).map(([code, label]) => (
+                                    <option key={code} value={code}>{label}</option>
+                                ))}
+                            </select>
+                        </div>
+                    </div>
+
+                    <div className="flex items-center gap-3 mt-5">
+                        <button
+                            type="submit"
+                            disabled={isLoading}
+                            className="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20"
+                        >
+                            <MagnifyingGlassIcon className="h-4 w-4" />
+                            جستجو
+                        </button>
+                        <button
+                            type="button"
+                            onClick={handleReset}
+                            disabled={isLoading}
+                            className="inline-flex items-center gap-2 px-5 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 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm"
+                        >
+                            <ArrowPathIcon className="h-4 w-4" />
+                            پاک کردن فیلترها
+                        </button>
+                    </div>
+                </form>
+
+                {error && (
+                    <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>
+                )}
+
+                {/* Results */}
+                <div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
+                    <div className="px-5 py-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-800">
+                        <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                            {result ? `${formatPrice(result.total)} خرید یافت شد` : 'در حال بارگذاری...'}
+                        </h3>
+                    </div>
+
+                    {isLoading ? (
+                        <div className="flex justify-center items-center py-16">
+                            <div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
+                        </div>
+                    ) : !result || result.data.length === 0 ? (
+                        <div className="text-center py-16">
+                            <div className="mx-auto h-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
+                                <svg className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121 0 2.09-.773 2.34-1.872l1.836-8.046A1.125 1.125 0 0 0 18.054 3H5.106m2.394 11.25-1.5-6h13.5" />
+                                </svg>
+                            </div>
+                            <p className="text-gray-500 dark:text-gray-400 text-sm">هیچ خریدی با این فیلترها یافت نشد</p>
+                        </div>
+                    ) : (
+                        <div className="overflow-x-auto">
+                            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
+                                <thead className="bg-gray-50 dark:bg-gray-800/60">
+                                    <tr className="text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                        <th className="px-4 py-3">کاربر</th>
+                                        <th className="px-4 py-3">پکیج</th>
+                                        <th className="px-4 py-3">محصول</th>
+                                        <th className="px-4 py-3">قیمت نهایی</th>
+                                        <th className="px-4 py-3">منبع پرداخت</th>
+                                        <th className="px-4 py-3">وضعیت</th>
+                                        <th className="px-4 py-3">تاریخ و ساعت</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
+                                    {result.data.map((purchase) => (
+                                        <tr key={purchase.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
+                                            <td className="px-4 py-3.5">
+                                                <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                                    {purchase.user?.full_name?.trim() || 'بدون نام'}
+                                                </div>
+                                                <div className="text-xs text-gray-500 dark:text-gray-400" dir="ltr">
+                                                    {purchase.user?.email || '—'}
+                                                </div>
+                                                <div className="text-xs text-gray-500 dark:text-gray-400" dir="ltr">
+                                                    {purchase.user?.mobile || '—'}
+                                                </div>
+                                            </td>
+                                            <td className="px-4 py-3.5 text-sm text-gray-700 dark:text-gray-300 whitespace-nowrap">
+                                                {purchase.product?.package_name?.title || purchase.product?.package_name?.name || '—'}
+                                            </td>
+                                            <td className="px-4 py-3.5 whitespace-nowrap">
+                                                <div className="text-sm text-gray-900 dark:text-gray-100">
+                                                    {purchase.product?.title || '—'}
+                                                </div>
+                                                <div className="text-xs text-gray-500 dark:text-gray-400">
+                                                    {purchase.product ? getProductTypeLabel(purchase.product.type) : ''}
+                                                </div>
+                                            </td>
+                                            <td className="px-4 py-3.5 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap font-medium">
+                                                {formatPrice(getPurchaseFinalPrice(purchase))} تومان
+                                            </td>
+                                            <td className="px-4 py-3.5 whitespace-nowrap">
+                                                <span className="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-lg bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300">
+                                                    {getGatewayLabel(purchase.gateway)}
+                                                </span>
+                                            </td>
+                                            <td className="px-4 py-3.5 whitespace-nowrap">
+                                                <span className={`px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-lg ${statusBadgeClass(purchase.status)}`}>
+                                                    {getPurchaseStatusLabel(purchase.status)}
+                                                </span>
+                                            </td>
+                                            <td className="px-4 py-3.5 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                                                {formatDate(purchase.created_at)} {formatTime(purchase.created_at)}
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    )}
+
+                    {/* Pagination */}
+                    {result && result.last_page > 1 && (
+                        <div className="flex items-center justify-between px-5 py-3.5 border-t border-gray-200 dark:border-gray-800">
+                            <button
+                                onClick={() => goToPage(page - 1)}
+                                disabled={page <= 1 || isLoading}
+                                className="px-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                            >
+                                قبلی
+                            </button>
+                            <span className="text-sm text-gray-600 dark:text-gray-400">
+                                صفحه {result.current_page} از {result.last_page}
+                            </span>
+                            <button
+                                onClick={() => goToPage(page + 1)}
+                                disabled={page >= result.last_page || isLoading}
+                                className="px-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                            >
+                                بعدی
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

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>
+                <PageHeader
+                    title="پاداش‌های معرفی"
+                    subtitle="کاربرانی که به حد نصاب دعوت موفق رسیده‌اند و هنوز اشتراک رایگان دریافت نکرده‌اند."
+                    action={
                         <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"
+                            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-5 w-5 ml-2 ${isLoading ? 'animate-spin' : ''}`} />
+                            <ArrowPathIcon className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
                             بروزرسانی
                         </button>
-                </div>
+                    }
+                />
 
-                {/* 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

app/admin/reminders/page.tsx

@@ -6,6 +6,8 @@ import { packagesApi } from '@/lib/api/packages';
 import { remindersApi } from '@/lib/api/reminders';
 import ReminderList from '@/components/admin/reminders/ReminderList';
 import ReminderForm from '@/components/admin/reminders/ReminderForm';
+import PageHeader from '@/components/admin/PageHeader';
+import { showToast } from '@/components/Toast';
 import { PackageName } from '@/types/package';
 import { Reminder, CreateReminderData, UpdateReminderData } from '@/types/reminder';
 import { PlusIcon } from '@heroicons/react/24/outline';
@@ -20,12 +22,10 @@ export default function RemindersPage() {
     const [isLoadingPackages, setIsLoadingPackages] = useState(false);
     const [isFormVisible, setIsFormVisible] = useState(false);
     const [error, setError] = useState<string | null>(null);
-    const [success, setSuccess] = useState<string | null>(null);
 
     const initialLoadRef = useRef(false);
     const prevPackageRef = useRef<string | null>(null);
 
-    // Load packages on mount
     useEffect(() => {
         if (token && !initialLoadRef.current) {
             initialLoadRef.current = true;
@@ -68,7 +68,6 @@ export default function RemindersPage() {
         }
     }, [token]);
 
-    // Load reminders when package changes
     useEffect(() => {
         if (selectedPackage?.name && token) {
             loadReminders(selectedPackage.name);
@@ -83,7 +82,6 @@ export default function RemindersPage() {
         setIsFormVisible(false);
         setSelectedReminder(null);
         setError(null);
-        setSuccess(null);
     };
 
     const handleCreate = () => {
@@ -98,18 +96,16 @@ export default function RemindersPage() {
 
     const handleDelete = async (reminder: Reminder) => {
         if (!selectedPackage) return;
-
         if (!confirm(`آیا از حذف یادآوری "${reminder.title}" اطمینان دارید؟`)) {
             return;
         }
 
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             await remindersApi.deleteReminder(selectedPackage.name!, reminder.id, token!);
-            setSuccess('یادآوری با موفقیت حذف شد');
+            showToast('success', 'یادآوری با موفقیت حذف شد');
             if (selectedPackage.name) {
                 prevPackageRef.current = null;
                 await loadReminders(selectedPackage.name, true);
@@ -126,17 +122,14 @@ export default function RemindersPage() {
 
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             if (selectedReminder) {
-                // Update existing reminder
                 await remindersApi.updateReminder(selectedPackage.name!, selectedReminder.id, data, token!);
-                setSuccess('یادآوری با موفقیت به‌روزرسانی شد');
+                showToast('success', 'یادآوری با موفقیت به‌روزرسانی شد');
             } else {
-                // Create new reminder
                 await remindersApi.createReminder(selectedPackage.name!, data as CreateReminderData, token!);
-                setSuccess('یادآوری با موفقیت ایجاد شد');
+                showToast('success', 'یادآوری با موفقیت ایجاد شد');
             }
 
             if (selectedPackage.name) {
@@ -157,20 +150,15 @@ export default function RemindersPage() {
         setIsFormVisible(false);
         setSelectedReminder(null);
         setError(null);
-        setSuccess(null);
     };
 
     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">
-                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
-                        مدیریت یادآوری‌ها
-                    </h1>
-                </div>
+                <PageHeader title="مدیریت یادآوری‌ها" />
 
                 {/* Package Selector */}
-                <div className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow mb-6 transition-colors">
+                <div className="bg-white dark:bg-gray-900 p-4 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm mb-6">
                     <label htmlFor="package" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                         انتخاب پکیج
                     </label>
@@ -179,7 +167,7 @@ export default function RemindersPage() {
                         value={selectedPackage?.name || ''}
                         onChange={handlePackageChange}
                         disabled={isLoadingPackages}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50 transition-colors"
+                        className="block w-full px-3 py-2.5 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm disabled:opacity-50 dark:bg-gray-800/80 transition-colors"
                     >
                         {isLoadingPackages ? (
                             <option>در حال بارگذاری پکیج‌ها...</option>
@@ -193,20 +181,17 @@ export default function RemindersPage() {
                     </select>
                 </div>
 
-                {/* 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 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>
                 )}
 
-                {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>
-                )}
-
-                {/* Form or List */}
                 {selectedPackage && (
                     <>
                         {!isFormVisible && (
@@ -214,9 +199,9 @@ export default function RemindersPage() {
                                 <button
                                     onClick={handleCreate}
                                     disabled={isLoading}
-                                    className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
+                                    className="inline-flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20"
                                 >
-                                    <PlusIcon className="h-5 w-5 ml-2" />
+                                    <PlusIcon className="h-4 w-4" />
                                     یادآوری جدید
                                 </button>
                             </div>

app/admin/users/page.tsx

@@ -9,6 +9,9 @@ import UserInfo from '@/components/admin/users/UserInfo';
 import UserProducts from '@/components/admin/users/UserProducts';
 import UserEditForm from '@/components/admin/users/UserEditForm';
 import PackageSelector from '@/components/admin/users/PackageSelector';
+import PageHeader from '@/components/admin/PageHeader';
+import StepIndicator from '@/components/admin/StepIndicator';
+import { showToast } from '@/components/Toast';
 import { User, Product, UpdateUserProfileData } from '@/types/user';
 import { PackageName } from '@/types/package';
 import { formatPrice, getProductTypeLabel } from '@/lib/utils';
@@ -22,17 +25,14 @@ export default function UsersPage() {
     const [selectedPackage, setSelectedPackage] = useState<string | null>(null);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
-    const [success, setSuccess] = useState<string | null>(null);
     const [isEditing, setIsEditing] = useState(false);
 
-    // Load packages on mount
     useEffect(() => {
         if (token) {
             loadPackages();
         }
     }, [token]);
 
-    // Load products when package changes
     useEffect(() => {
         if (token && selectedPackage) {
             loadProducts(selectedPackage);
@@ -54,9 +54,7 @@ export default function UsersPage() {
 
     const loadProducts = async (packageName: string) => {
         try {
-            console.log('Loading products for package:', packageName);
             const data = await usersApi.getProductsByPackage(packageName, token!);
-            console.log('Products loaded:', data);
             setProducts(data);
         } catch (err) {
             console.error('Failed to load products:', err);
@@ -75,9 +73,7 @@ export default function UsersPage() {
         setUser(null);
 
         try {
-            console.log('Searching for user:', searchTerm, 'in package:', selectedPackage);
             const userData = await usersApi.getUserStatus(searchTerm, selectedPackage, token!);
-            console.log('User data:', userData);
             setUser(userData);
         } catch (err) {
             setError(err instanceof Error ? err.message : 'خطا در دریافت اطلاعات کاربر');
@@ -88,10 +84,7 @@ export default function UsersPage() {
 
     const handleSubscribe = async (productId: number) => {
         if (!user) return;
-
-        // Get identifier (email or mobile) with null check
         const identifier = user.email || user.mobile;
-
         if (!identifier) {
             setError('کاربر فاقد ایمیل یا شماره موبایل است');
             return;
@@ -99,13 +92,10 @@ export default function UsersPage() {
 
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
-            console.log('Subscribing user:', identifier, 'to product:', productId);
             await usersApi.subscribeUser(identifier, productId, token!);
-            setSuccess('اشتراک با موفقیت اضافه شد');
-            // Refresh user data with current selected package
+            showToast('success', 'اشتراک با موفقیت اضافه شد');
             if (selectedPackage) {
                 const userData = await usersApi.getUserStatus(identifier, selectedPackage, token!);
                 setUser(userData);
@@ -119,10 +109,7 @@ export default function UsersPage() {
 
     const handleUnsubscribe = async (productId: number) => {
         if (!user) return;
-
-        // Get identifier (email or mobile) with null check
         const identifier = user.email || user.mobile;
-
         if (!identifier) {
             setError('کاربر فاقد ایمیل یا شماره موبایل است');
             return;
@@ -130,13 +117,10 @@ export default function UsersPage() {
 
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
-            console.log('Unsubscribing user:', identifier, 'from product:', productId);
             await usersApi.unsubscribeUser(identifier, productId, token!);
-            setSuccess('اشتراک با موفقیت لغو شد');
-            // Refresh user data with current selected package
+            showToast('success', 'اشتراک با موفقیت لغو شد');
             if (selectedPackage) {
                 const userData = await usersApi.getUserStatus(identifier, selectedPackage, token!);
                 setUser(userData);
@@ -150,9 +134,7 @@ export default function UsersPage() {
 
     const handleEditSubmit = async (data: UpdateUserProfileData) => {
         if (!user) return;
-
         const identifier = user.email || user.mobile;
-
         if (!identifier) {
             setError('کاربر فاقد ایمیل یا شماره موبایل است');
             return;
@@ -160,13 +142,11 @@ export default function UsersPage() {
 
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             await usersApi.updateUserProfile(identifier, data, token!);
-            setSuccess('اطلاعات کاربر با موفقیت به‌روزرسانی شد');
+            showToast('success', 'اطلاعات کاربر با موفقیت به‌روزرسانی شد');
             setIsEditing(false);
-            // Refresh user data using the (possibly) new identifier
             const newIdentifier = data.email || data.mobile || identifier;
             if (selectedPackage) {
                 const userData = await usersApi.getUserStatus(newIdentifier, selectedPackage, token!);
@@ -181,9 +161,7 @@ export default function UsersPage() {
 
     const handleDeleteUser = async () => {
         if (!user) return;
-
         const identifier = user.email || user.mobile;
-
         if (!identifier) {
             setError('کاربر فاقد ایمیل یا شماره موبایل است');
             return;
@@ -195,11 +173,10 @@ export default function UsersPage() {
 
         setIsLoading(true);
         setError(null);
-        setSuccess(null);
 
         try {
             await usersApi.deleteUser(identifier, token!);
-            setSuccess('کاربر با موفقیت حذف شد');
+            showToast('success', 'کاربر با موفقیت حذف شد');
             setUser(null);
         } catch (err) {
             setError(err instanceof Error ? err.message : 'خطا در حذف کاربر');
@@ -209,32 +186,30 @@ export default function UsersPage() {
     };
 
     const handlePackageChange = (packageName: string) => {
-        console.log('Package changed to:', packageName);
         setSelectedPackage(packageName);
-        // Clear user when package changes to avoid showing wrong data
         setUser(null);
         setError(null);
-        setSuccess(null);
     };
 
-    // Filter available products (show ALL products, don't filter out ones user already has)
     const availableProducts = products;
 
-    // console.log('Current state:', {
-    //     selectedPackage,
-    //     productsCount: products.length,
-    //     userProductsCount: user?.products?.length,
-    //     availableProductsCount: availableProducts.length
-    // });
+    // Compute step indicator state
+    const steps = [
+        { label: 'انتخاب پکیج', isCompleted: !!selectedPackage, isCurrent: !selectedPackage },
+        { label: 'جستجوی کاربر', isCompleted: !!user, isCurrent: !!selectedPackage && !user },
+        { label: 'پروفایل کاربر', isCompleted: false, isCurrent: !!user },
+    ];
 
     return (
-        <div className="p-6">
+        <div className="p-4 sm:p-8">
             <div className="max-w-7xl mx-auto">
-                <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">
-                    مدیریت کاربران
-                </h1>
+                <PageHeader title="مدیریت کاربران" subtitle="پکیج را انتخاب کنید، کاربر را جستجو کنید و مدیریت کنید" />
+
+                {/* Step Indicator */}
+                <div className="mb-6 bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm p-5">
+                    <StepIndicator steps={steps} />
+                </div>
 
-                {/* Package Selector */}
                 {token && (
                     <PackageSelector
                         token={token}
@@ -244,64 +219,48 @@ export default function UsersPage() {
                     />
                 )}
 
-                {/* Search Section - Only show if package is selected */}
                 {selectedPackage && (
                     <UserSearch onSearch={handleSearch} isLoading={isLoading} />
                 )}
 
-                {/* Messages */}
                 {error && (
-                    <div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
-                        <div className="flex">
-                            <div className="flex-shrink-0">
-                                <svg className="h-5 w-5 text-red-400 dark:text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                    <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">
+                        <svg className="h-5 w-5 text-red-500 dark:text-red-400 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
                             <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                         </svg>
-                            </div>
-                            <div className="mr-3">
-                                <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
-                            </div>
-                        </div>
+                        <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 dark:hover:text-red-300">
+                            <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>
                 )}
 
-                {success && (
-                    <div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
-                        <div className="flex">
-                            <div className="flex-shrink-0">
-                                <svg className="h-5 w-5 text-green-400 dark:text-green-400" viewBox="0 0 20 20" fill="currentColor">
-                                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                {!selectedPackage && packages.length === 0 && (
+                    <div className="text-center py-16 bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800">
+                        <div className="mx-auto h-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
+                            <svg className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
                             </svg>
                         </div>
-                            <div className="mr-3">
-                                <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
-                            </div>
-                        </div>
+                        <p className="text-gray-500 dark:text-gray-400 text-sm">هیچ پکیجی یافت نشد. ابتدا یک پکیج ایجاد کنید.</p>
                     </div>
                 )}
 
-                {/* No Package Selected Message */}
-                {!selectedPackage && packages.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>
-                )}
-
-                {/* Show products list even without user */}
                 {selectedPackage && products.length > 0 && !user && (
-                    <div className="mb-6">
-                        <div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl">
-                            <div className="px-4 py-5 sm:px-6">
-                                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
+                    <div className="bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden">
+                        <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
+                            <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
                                 محصولات موجود در پکیج {selectedPackage}
                             </h3>
                         </div>
-                            <div className="border-t border-gray-200 dark:border-gray-800 px-4 py-5 sm:px-6">
+                        <div className="p-5">
                             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
                                 {products.map((product) => (
                                     <div
                                         key={product.id}
-                                            className="relative block w-full border border-gray-200 dark:border-gray-800 rounded-lg p-4 text-right bg-gray-50 dark:bg-gray-800/60"
+                                        className="border border-gray-200 dark:border-gray-800 rounded-xl p-4 bg-gray-50 dark:bg-gray-800/60 hover:bg-white dark:hover:bg-gray-800 transition-colors"
                                     >
                                         <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
                                             {product.title || 'محصول'}
@@ -315,15 +274,13 @@ export default function UsersPage() {
                                     </div>
                                 ))}
                             </div>
-                                <p className="mt-4 text-sm text-gray-500 dark:text-gray-400 text-center">
+                            <p className="mt-4 text-sm text-gray-400 dark:text-gray-500 text-center">
                                 برای افزودن اشتراک به کاربر، ابتدا یک کاربر جستجو کنید
                             </p>
                         </div>
                     </div>
-                    </div>
                 )}
 
-                {/* User Info */}
                 {user && (
                     <>
                         <UserInfo user={user} />
@@ -331,24 +288,23 @@ export default function UsersPage() {
                             <button
                                 onClick={() => setIsEditing(true)}
                                 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"
+                                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"
                             >
-                                <PencilSquareIcon className="h-5 w-5 ml-2" />
+                                <PencilSquareIcon className="h-4 w-4" />
                                 ویرایش اطلاعات
                             </button>
                             <button
                                 onClick={handleDeleteUser}
                                 disabled={isLoading}
-                                className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
+                                className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors shadow-sm"
                             >
-                                <TrashIcon className="h-5 w-5 ml-2" />
+                                <TrashIcon className="h-4 w-4" />
                                 حذف کاربر
                             </button>
                         </div>
                     </>
                 )}
 
-                {/* User Products */}
                 {user && selectedPackage && (
                     <UserProducts
                         products={user.products || []}
@@ -360,7 +316,6 @@ export default function UsersPage() {
                     />
                 )}
 
-                {/* Edit User Modal */}
                 {user && isEditing && (
                     <UserEditForm
                         user={user}

app/globals.css

@@ -42,14 +42,13 @@
 }
 
 :root {
-  --background: #f3f4f6;
-  --foreground: #171717;
+  --background: #f9fafb;
+  --foreground: #111827;
 }
 
-/* Dark palette is driven by the `.dark` class so the toggle controls it */
 .dark {
   --background: #030712;
-  --foreground: #ededed;
+  --foreground: #f9fafb;
 }
 
 @theme inline {
@@ -64,6 +63,8 @@ body {
   color: var(--foreground);
   font-family: 'Dana', 'Inter', Arial, Helvetica, sans-serif;
   font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* Smooth theme transition for surfaces, borders and text */
@@ -71,7 +72,7 @@ body {
 *::before,
 *::after {
   transition-property: background-color, border-color, color, fill, stroke;
-  transition-duration: 200ms;
+  transition-duration: 150ms;
   transition-timing-function: ease;
 }
 
@@ -84,8 +85,11 @@ body {
   scrollbar-color: #374151 transparent;
 }
 *::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
 }
 *::-webkit-scrollbar-thumb {
   background-color: #cbd5e1;
@@ -105,3 +109,24 @@ body {
   background-color: #4853c4;
   color: #f9fafb;
 }
+
+/* Toast animations */
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slide-in-from-top-4 {
+  from { transform: translateY(-1rem); }
+  to { transform: translateY(0); }
+}
+.animate-in {
+  animation-duration: 300ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+.fade-in {
+  animation-name: fade-in;
+}
+.slide-in-from-top-4 {
+  animation-name: slide-in-from-top-4;
+}

components/AuthGuard.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/contexts/AuthContext';
+
+export default function AuthGuard({ children }: { children: React.ReactNode }) {
+    const { token, isLoading } = useAuth();
+    const router = useRouter();
+
+    useEffect(() => {
+        if (!isLoading && !token) {
+            router.replace('/admin/login');
+        }
+    }, [token, isLoading, router]);
+
+    if (isLoading) {
+        return (
+            <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
+                <div className="flex flex-col items-center gap-3">
+                    <div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
+                    <p className="text-sm text-gray-500 dark:text-gray-400">در حال بررسی دسترسی...</p>
+                </div>
+            </div>
+        );
+    }
+
+    if (!token) {
+        return null;
+    }
+
+    return <>{children}</>;
+}

components/Toast.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { CheckCircleIcon, ExclamationCircleIcon, XMarkIcon } from '@heroicons/react/24/outline';
+
+export interface Toast {
+    id: string;
+    type: 'success' | 'error';
+    message: string;
+}
+
+let toastListeners: ((toast: Toast) => void)[] = [];
+
+export function showToast(type: 'success' | 'error', message: string) {
+    const toast: Toast = {
+        id: Math.random().toString(36).slice(2),
+        type,
+        message,
+    };
+    toastListeners.forEach((fn) => fn(toast));
+}
+
+export default function ToastContainer() {
+    const [toasts, setToasts] = useState<Toast[]>([]);
+
+    const addToast = useCallback((toast: Toast) => {
+        setToasts((prev) => [...prev, toast]);
+        setTimeout(() => {
+            setToasts((prev) => prev.filter((t) => t.id !== toast.id));
+        }, 4000);
+    }, []);
+
+    useEffect(() => {
+        toastListeners.push(addToast);
+        return () => {
+            toastListeners = toastListeners.filter((fn) => fn !== addToast);
+        };
+    }, [addToast]);
+
+    if (toasts.length === 0) return null;
+
+    return (
+        <div className="fixed top-4 left-1/2 -translate-x-1/2 z-[100] flex flex-col gap-2 w-full max-w-md pointer-events-none">
+            {toasts.map((toast) => (
+                <div
+                    key={toast.id}
+                    className={`pointer-events-auto flex items-center gap-3 px-4 py-3 rounded-xl shadow-xl ring-1 animate-in fade-in slide-in-from-top-4 duration-300 ${
+                        toast.type === 'success'
+                            ? 'bg-green-50 dark:bg-green-950/80 ring-green-200 dark:ring-green-800 text-green-800 dark:text-green-200'
+                            : 'bg-red-50 dark:bg-red-950/80 ring-red-200 dark:ring-red-800 text-red-800 dark:text-red-200'
+                    }`}
+                >
+                    {toast.type === 'success' ? (
+                        <CheckCircleIcon className="h-5 w-5 text-green-500 dark:text-green-400 flex-shrink-0" />
+                    ) : (
+                        <ExclamationCircleIcon className="h-5 w-5 text-red-500 dark:text-red-400 flex-shrink-0" />
+                    )}
+                    <p className="flex-1 text-sm font-medium">{toast.message}</p>
+                    <button
+                        onClick={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
+                        className="flex-shrink-0 p-0.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+                    >
+                        <XMarkIcon className="h-4 w-4" />
+                    </button>
+                </div>
+            ))}
+        </div>
+    );
+}

components/admin/PageHeader.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+interface PageHeaderProps {
+    title: string;
+    subtitle?: string;
+    action?: React.ReactNode;
+}
+
+export default function PageHeader({ title, subtitle, action }: PageHeaderProps) {
+    return (
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+            <div>
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+                    {title}
+                </h1>
+                {subtitle && (
+                    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                        {subtitle}
+                    </p>
+                )}
+            </div>
+            {action && <div>{action}</div>}
+        </div>
+    );
+}

components/admin/PersianDatePicker.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { DayPicker } from '@daypicker/persian';
+import '@daypicker/react/style.css';
+import { CalendarDaysIcon, XMarkIcon } from '@heroicons/react/24/outline';
+
+interface PersianDatePickerProps {
+    /** Gregorian YYYY-MM-DD, or '' when empty. */
+    value: string;
+    /** Called with the selected Gregorian YYYY-MM-DD, or '' when cleared. */
+    onChange: (value: string) => void;
+    label?: string;
+    placeholder?: string;
+    id?: string;
+}
+
+// Parses a Gregorian "YYYY-MM-DD" into a local Date (pinned at noon to avoid
+// any date shift from timezone offsets).
+const parseGregorian = (value: string): Date | null => {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+    if (!match) return null;
+    const date = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]), 12, 0, 0);
+    return Number.isNaN(date.getTime()) ? null : date;
+};
+
+const toGregorianValue = (date: Date): string => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+};
+
+// Renders the given Gregorian date as a Persian (Jalali) string with Persian
+// digits, e.g. "۱۴۰۴/۰۵/۱۱".
+const jalaliFormat = new Intl.DateTimeFormat('fa-IR-u-ca-persian', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+});
+
+const formatJalali = (date: Date): string => jalaliFormat.format(date);
+
+/**
+ * A Persian (Jalali) date input built on @daypicker/persian.
+ *
+ * The calendar operates in the Jalali calendar, but the public value is a
+ * Gregorian "YYYY-MM-DD" string — the same format the native <input
+ * type="date"> produced — so the accounting filters keep working unchanged.
+ *
+ * Note: with the default dateLib (no `timeZone` prop), @daypicker/persian
+ * works with plain JS `Date` objects whose native getters already return the
+ * Gregorian date; the Jalali conversion happens inside the calendar library.
+ * That's why we can read `getFullYear()/getMonth()/getDate()` straight off the
+ * picked date.
+ */
+export default function PersianDatePicker({
+    value,
+    onChange,
+    label,
+    placeholder,
+    id,
+}: PersianDatePickerProps) {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef<HTMLDivElement>(null);
+
+    const selectedDate = value ? parseGregorian(value) : null;
+
+    // Controlled month so the popover opens on the selected month (or now).
+    const [viewMonth, setViewMonth] = useState<Date>(() => selectedDate ?? new Date());
+
+    // Close on outside click or Escape.
+    useEffect(() => {
+        if (!open) return;
+        const handlePointerDown = (event: MouseEvent) => {
+            if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
+                setOpen(false);
+            }
+        };
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') setOpen(false);
+        };
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [open]);
+
+    const handleSelect = (date: Date | undefined) => {
+        if (date) onChange(toGregorianValue(date));
+        setOpen(false);
+    };
+
+    const handleClear = () => {
+        onChange('');
+        setOpen(false);
+    };
+
+    const toggle = () => {
+        setViewMonth(selectedDate ?? new Date());
+        setOpen((prev) => !prev);
+    };
+
+    return (
+        <div ref={rootRef} className="relative">
+            {label && (
+                <label htmlFor={id} className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+                    {label}
+                </label>
+            )}
+
+            <button
+                type="button"
+                id={id}
+                onClick={toggle}
+                aria-haspopup="dialog"
+                aria-expanded={open}
+                className={`flex w-full items-center justify-between gap-2 px-3 py-2.5 text-right text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm dark:bg-gray-800/80 transition-colors ${
+                    selectedDate
+                        ? 'text-gray-900 dark:text-gray-100'
+                        : 'text-gray-400 dark:text-gray-500'
+                }`}
+            >
+                <span className="truncate">{selectedDate ? formatJalali(selectedDate) : placeholder || 'انتخاب تاریخ'}</span>
+                {selectedDate ? (
+                    <XMarkIcon
+                        className="h-4 w-4 shrink-0 text-gray-400 hover:text-red-500 transition-colors"
+                        onClick={(event) => {
+                            event.stopPropagation();
+                            handleClear();
+                        }}
+                        aria-label="پاک کردن تاریخ"
+                    />
+                ) : (
+                    <CalendarDaysIcon className="h-4 w-4 shrink-0 text-gray-400" />
+                )}
+            </button>
+
+            {open && (
+                <div className="absolute right-0 z-50 mt-2 bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl shadow-xl p-2">
+                    <DayPicker
+                        mode="single"
+                        selected={selectedDate ?? undefined}
+                        onSelect={handleSelect}
+                        month={viewMonth}
+                        onMonthChange={setViewMonth}
+                    />
+                </div>
+            )}
+        </div>
+    );
+}

components/admin/Sidebar.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useAuth } from '@/contexts/AuthContext';
+import { useState } from 'react';
+import {
+    UsersIcon,
+    CubeIcon,
+    TagIcon,
+    BellIcon,
+    GiftIcon,
+    PowerIcon,
+    ShoppingBagIcon,
+    HomeIcon,
+    CalculatorIcon,
+    Bars3Icon,
+    XMarkIcon,
+} from '@heroicons/react/24/outline';
+import { MegaphoneIcon } from 'lucide-react';
+import ThemeToggle from '@/components/ThemeToggle';
+
+const navItems = [
+    { href: '/admin/dashboard', label: 'داشبورد', Icon: HomeIcon },
+    { href: '/admin/users', label: 'کاربران', Icon: UsersIcon },
+    { href: '/admin/purchases', label: 'خریدها', Icon: ShoppingBagIcon },
+    { href: '/admin/accounting', label: 'حسابداری', Icon: CalculatorIcon },
+    { href: '/admin/packages', label: 'پکیج‌ها', Icon: CubeIcon },
+    { href: '/admin/products', label: 'محصولات', Icon: TagIcon },
+    { href: '/admin/reminders', label: 'یادآوری‌ها', Icon: BellIcon },
+    { href: '/admin/promotions', label: 'تبلیغات', Icon: MegaphoneIcon },
+    { href: '/admin/referral-rewards', label: 'پاداش معرفی', Icon: GiftIcon },
+];
+
+export default function Sidebar() {
+    const pathname = usePathname();
+    const { logout, user } = useAuth();
+    const [mobileOpen, setMobileOpen] = useState(false);
+
+    const isActive = (href: string) => {
+        if (href === '/admin/dashboard') return pathname === href;
+        return pathname.startsWith(href);
+    };
+
+    const navContent = (
+        <div className="flex flex-col h-full">
+            {/* Logo / Brand */}
+            <div className="flex items-center gap-3 px-5 py-5 border-b border-gray-200 dark:border-gray-800">
+                <div className="flex-shrink-0 h-9 w-9 rounded-xl bg-indigo-600 flex items-center justify-center shadow-sm shadow-indigo-500/20">
+                    <span className="text-white font-bold text-sm">A</span>
+                </div>
+                <div className="min-w-0">
+                    <p className="text-sm font-bold text-gray-900 dark:text-gray-100 truncate">اپروایجنسی</p>
+                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate">پنل مدیریت</p>
+                </div>
+            </div>
+
+            {/* Navigation */}
+            <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
+                {navItems.map(({ href, label, Icon }) => {
+                    const active = isActive(href);
+                    return (
+                        <Link
+                            key={href}
+                            href={href}
+                            onClick={() => setMobileOpen(false)}
+                            className={`flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-150 ${
+                                active
+                                    ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400 shadow-sm'
+                                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200'
+                            }`}
+                        >
+                            <Icon className={`h-5 w-5 flex-shrink-0 ${active ? 'text-indigo-600 dark:text-indigo-400' : ''}`} />
+                            {label}
+                        </Link>
+                    );
+                })}
+            </nav>
+
+            {/* User, Theme & Logout */}
+            <div className="border-t border-gray-200 dark:border-gray-800 px-3 py-4 space-y-1">
+                <ThemeToggle withLabel className="w-full justify-start px-3 py-2.5 rounded-xl text-sm font-medium" />
+                {user && (
+                    <div className="px-3 py-2">
+                        <p className="text-xs text-gray-500 dark:text-gray-400 truncate" dir="ltr">{user.email}</p>
+                    </div>
+                )}
+                <button
+                    onClick={logout}
+                    className="flex items-center gap-3 w-full px-3 py-2.5 rounded-xl text-sm font-medium text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-500/10 transition-colors"
+                >
+                    <PowerIcon className="h-5 w-5" />
+                    خروج
+                </button>
+            </div>
+        </div>
+    );
+
+    return (
+        <>
+            {/* Mobile hamburger */}
+            <button
+                onClick={() => setMobileOpen(true)}
+                className="lg:hidden fixed top-4 right-4 z-50 p-2 rounded-xl bg-white dark:bg-gray-900 shadow-lg ring-1 ring-gray-200 dark:ring-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+            >
+                <Bars3Icon className="h-6 w-6" />
+            </button>
+
+            {/* Mobile overlay */}
+            {mobileOpen && (
+                <div className="lg:hidden fixed inset-0 z-40">
+                    <div
+                        className="absolute inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-sm"
+                        onClick={() => setMobileOpen(false)}
+                    />
+                    <div className="absolute inset-y-0 right-0 w-72 bg-white dark:bg-gray-950 shadow-2xl">
+                        <button
+                            onClick={() => setMobileOpen(false)}
+                            className="absolute top-4 left-4 p-1 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+                        >
+                            <XMarkIcon className="h-5 w-5" />
+                        </button>
+                        {navContent}
+                    </div>
+                </div>
+            )}
+
+            {/* Desktop sidebar */}
+            <aside className="hidden lg:flex lg:fixed lg:inset-y-0 lg:right-0 lg:z-30 lg:w-64 lg:flex-col bg-white dark:bg-gray-950 border-l border-gray-200 dark:border-gray-800">
+                {navContent}
+            </aside>
+        </>
+    );
+}

components/admin/StepIndicator.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+interface Step {
+    label: string;
+    isCompleted: boolean;
+    isCurrent: boolean;
+}
+
+interface StepIndicatorProps {
+    steps: Step[];
+}
+
+export default function StepIndicator({ steps }: StepIndicatorProps) {
+    return (
+        <div className="flex items-center gap-0 w-full max-w-2xl">
+            {steps.map((step, index) => (
+                <div key={index} className="flex items-center flex-1 last:flex-none">
+                    <div className="flex flex-col items-center">
+                        <div
+                            className={`flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-all duration-200 ${
+                                step.isCompleted
+                                    ? 'bg-indigo-600 text-white shadow-sm shadow-indigo-500/30'
+                                    : step.isCurrent
+                                    ? 'bg-indigo-100 dark:bg-indigo-500/15 text-indigo-700 dark:text-indigo-400 ring-2 ring-indigo-600 dark:ring-indigo-400'
+                                    : 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500'
+                            }`}
+                        >
+                            {step.isCompleted ? (
+                                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                </svg>
+                            ) : (
+                                index + 1
+                            )}
+                        </div>
+                        <span
+                            className={`mt-1.5 text-xs font-medium whitespace-nowrap ${
+                                step.isCurrent
+                                    ? 'text-indigo-700 dark:text-indigo-400'
+                                    : step.isCompleted
+                                    ? 'text-gray-600 dark:text-gray-300'
+                                    : 'text-gray-400 dark:text-gray-500'
+                            }`}
+                        >
+                            {step.label}
+                        </span>
+                    </div>
+                    {index < steps.length - 1 && (
+                        <div
+                            className={`flex-1 h-0.5 mx-2 mb-5 rounded-full transition-colors ${
+                                step.isCompleted
+                                    ? 'bg-indigo-600'
+                                    : 'bg-gray-200 dark:bg-gray-800'
+                            }`}
+                        />
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+}

components/admin/packages/PackageForm.tsx

@@ -37,7 +37,6 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
                 web_app_url: pkg.web_app_url || '',
                 tries: pkg.tries || 0,
             });
-
             if (pkg.image && typeof pkg.image === 'string') {
                 setAvatarPreview(pkg.image);
             }
@@ -46,18 +45,12 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         const { name, value } = e.target;
-        setFormData(prev => ({
-            ...prev,
-            [name]: value === '' ? null : value,
-        }));
+        setFormData(prev => ({ ...prev, [name]: value === '' ? null : value }));
     };
 
     const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
-        setFormData(prev => ({
-            ...prev,
-            [name]: value === '' ? null : parseInt(value, 10),
-        }));
+        setFormData(prev => ({ ...prev, [name]: value === '' ? null : parseInt(value, 10) }));
     };
 
     const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -65,12 +58,8 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
         if (file) {
             setAvatarFile(file);
             setFormData(prev => ({ ...prev, avatar: file }));
-
-            // Create preview
             const reader = new FileReader();
-            reader.onloadend = () => {
-                setAvatarPreview(reader.result as string);
-            };
+            reader.onloadend = () => setAvatarPreview(reader.result as string);
             reader.readAsDataURL(file);
         }
     };
@@ -94,194 +83,86 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
         setFormData(prev => ({ ...prev, avatar: null }));
     };
 
+    const inputClass = 'block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/60 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 dark:focus:border-indigo-400 transition-colors';
+    const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';
+
     return (
-        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow">
-            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-                {/* Name */}
-                <div>
-                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        نام پکیج <span className="text-red-500">*</span>
-                    </label>
-                    <input
-                        type="text"
-                        id="name"
-                        name="name"
-                        required
-                        value={formData.name || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
-                        placeholder="مثال: com.approagency.meditation"
-                        dir="ltr"
-                    />
+        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm">
+            <div className="pb-4 border-b border-gray-100 dark:border-gray-800">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                    {pkg ? 'ویرایش پکیج' : 'ایجاد پکیج جدید'}
+                </h3>
             </div>
 
-                {/* Title */}
+            <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
                 <div>
-                    <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        عنوان <span className="text-red-500">*</span>
-                    </label>
-                    <input
-                        type="text"
-                        id="title"
-                        name="title"
-                        required
-                        value={formData.title || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
-                        placeholder="مثال: آرام لند"
-                    />
+                    <label htmlFor="name" className={labelClass}>نام پکیج <span className="text-red-500">*</span></label>
+                    <input type="text" id="name" name="name" required value={formData.name || ''} onChange={handleInputChange} className={inputClass} placeholder="مثال: com.approagency.meditation" dir="ltr" />
+                </div>
+                <div>
+                    <label htmlFor="title" className={labelClass}>عنوان <span className="text-red-500">*</span></label>
+                    <input type="text" id="title" name="title" required value={formData.title || ''} onChange={handleInputChange} className={inputClass} placeholder="مثال: آرام لند" />
                 </div>
 
-                {/* Avatar */}
                 <div>
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        تصویر
-                    </label>
-                    <div className="flex items-center space-x-3 space-x-reverse">
-                        <label className="cursor-pointer 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 transition-colors">
-                            <PhotoIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
+                    <label className={labelClass}>تصویر</label>
+                    <div className="flex items-center gap-3">
+                        <label className="cursor-pointer inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+                            <PhotoIcon className="h-4 w-4 text-gray-400" />
                             انتخاب تصویر
-                            <input
-                                type="file"
-                                accept="image/*"
-                                onChange={handleAvatarChange}
-                                className="hidden"
-                            />
+                            <input type="file" accept="image/*" onChange={handleAvatarChange} className="hidden" />
                         </label>
                         {avatarPreview && (
-                            <button
-                                type="button"
-                                onClick={removeAvatar}
-                                className="text-red-600 dark:text-red-400 hover:text-red-900 transition-colors"
-                            >
+                            <button type="button" onClick={removeAvatar} className="text-red-500 hover:text-red-700 transition-colors">
                                 <XMarkIcon className="h-5 w-5" />
                             </button>
                         )}
                     </div>
                     {avatarPreview && (
-                        <div className="mt-2">
-                            <img
-                                src={avatarPreview}
-                                alt="Preview"
-                                className="h-20 w-20 object-cover rounded-lg border border-gray-200 dark:border-gray-800"
-                            />
+                        <div className="mt-3">
+                            <img src={avatarPreview} alt="Preview" className="h-20 w-20 object-cover rounded-xl ring-1 ring-gray-200 dark:ring-gray-800" />
                         </div>
                     )}
                 </div>
 
-                {/* V1 Identifier */}
                 <div>
-                    <label htmlFor="v1_identifier" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        شناسه V1
-                    </label>
-                    <input
-                        type="text"
-                        id="v1_identifier"
-                        name="v1_identifier"
-                        value={formData.v1_identifier || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
-                    />
+                    <label htmlFor="v1_identifier" className={labelClass}>شناسه V1</label>
+                    <input type="text" id="v1_identifier" name="v1_identifier" value={formData.v1_identifier || ''} onChange={handleInputChange} className={inputClass} />
                 </div>
-
-                {/* Myket Access Token */}
                 <div>
-                    <label htmlFor="myket_access_token" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        توکن دسترسی Myket
-                    </label>
-                    <input
-                        type="text"
-                        id="myket_access_token"
-                        name="myket_access_token"
-                        value={formData.myket_access_token || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
-                    />
+                    <label htmlFor="myket_access_token" className={labelClass}>توکن دسترسی Myket</label>
+                    <input type="text" id="myket_access_token" name="myket_access_token" value={formData.myket_access_token || ''} onChange={handleInputChange} className={inputClass} />
                 </div>
-
-                {/* Cafe Config ID */}
                 <div>
-                    <label htmlFor="cafe_config_id" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        شناسه کافه بازار
-                    </label>
-                    <input
-                        type="number"
-                        id="cafe_config_id"
-                        name="cafe_config_id"
-                        value={formData.cafe_config_id || ''}
-                        onChange={handleNumberChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
-                    />
+                    <label htmlFor="cafe_config_id" className={labelClass}>شناسه کافه بازار</label>
+                    <input type="number" id="cafe_config_id" name="cafe_config_id" value={formData.cafe_config_id || ''} onChange={handleNumberChange} className={inputClass} />
                 </div>
-
-                {/* Web App URL */}
                 <div>
-                    <label htmlFor="web_app_url" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        آدرس وب اپلیکیشن
-                    </label>
-                    <input
-                        type="url"
-                        id="web_app_url"
-                        name="web_app_url"
-                        value={formData.web_app_url || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
-                        placeholder="https://example.com"
-                    />
+                    <label htmlFor="web_app_url" className={labelClass}>آدرس وب اپلیکیشن</label>
+                    <input type="url" id="web_app_url" name="web_app_url" value={formData.web_app_url || ''} onChange={handleInputChange} className={inputClass} placeholder="https://example.com" dir="ltr" />
                 </div>
-
-                {/* Tries */}
                 <div>
-                    <label htmlFor="tries" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        تعداد تلاش‌ها
-                    </label>
-                    <input
-                        type="number"
-                        id="tries"
-                        name="tries"
-                        value={formData.tries || 0}
-                        onChange={handleNumberChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
-                    />
+                    <label htmlFor="tries" className={labelClass}>تعداد تلاش‌ها</label>
+                    <input type="number" id="tries" name="tries" value={formData.tries || 0} onChange={handleNumberChange} className={inputClass} />
                 </div>
-
-                {/* Firebase JSON */}
-                <div className="md:col-span-2">
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        فایل Firebase JSON
-                    </label>
-                    <label className="cursor-pointer 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 transition-colors">
-                        <DocumentTextIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
+                <div className="md:col-span-2 pt-2 border-t border-gray-100 dark:border-gray-800">
+                    <label className={labelClass}>فایل Firebase JSON</label>
+                    <label className="cursor-pointer inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+                        <DocumentTextIcon className="h-4 w-4 text-gray-400" />
                         انتخاب فایل
-                        <input
-                            type="file"
-                            accept=".json,application/json"
-                            onChange={handleFirebaseChange}
-                            className="hidden"
-                        />
+                        <input type="file" accept=".json,application/json" onChange={handleFirebaseChange} className="hidden" />
                     </label>
                     {firebaseFile && (
-                        <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-                            فایل انتخاب شده: {firebaseFile.name}
-                        </p>
+                        <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">{firebaseFile.name}</p>
                     )}
                 </div>
             </div>
 
-            {/* Form Actions */}
-            <div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
-                <button
-                    type="button"
-                    onClick={onCancel}
-                    className="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 transition-colors"
-                >
+            <div className="flex justify-end gap-3 pt-4 border-t border-gray-100 dark:border-gray-800">
+                <button type="button" onClick={onCancel} className="px-5 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 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 transition-colors">
                     انصراف
                 </button>
-                <button
-                    type="submit"
-                    disabled={isLoading}
-                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-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"
-                >
+                <button type="submit" disabled={isLoading} className="px-5 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/30 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20">
                     {isLoading ? 'در حال ذخیره...' : pkg ? 'به‌روزرسانی' : 'ایجاد'}
                 </button>
             </div>

components/admin/packages/PackageList.tsx

@@ -3,6 +3,7 @@
 import { PackageName } from '@/types/package';
 import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { formatDate } from '@/lib/utils';
+import Image from 'next/image';
 
 interface PackageListProps {
     packages: PackageName[];
@@ -14,66 +15,62 @@ interface PackageListProps {
 export default function PackageList({ packages, onEdit, onDelete, isLoading }: PackageListProps) {
     if (isLoading) {
         return (
-            <div className="flex justify-center items-center py-12">
-                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
+            <div className="flex justify-center items-center py-16">
+                <div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
             </div>
         );
     }
 
     if (!packages || packages.length === 0) {
         return (
-            <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
-                <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-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
+                    <svg className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
+                    </svg>
+                </div>
+                <p className="text-gray-500 dark:text-gray-400 text-sm">هیچ پکیجی یافت نشد</p>
             </div>
         );
     }
 
     return (
-        <div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
+        <div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
+            <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
+                <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">لیست پکیج‌ها</h3>
+            </div>
             <ul className="divide-y divide-gray-200 dark:divide-gray-800">
                 {packages.map((pkg) => (
-                    <li key={pkg.id} className="px-2 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
-                        <div className="flex items-center justify-between">
-                            <div className="flex-1 min-w-0">
-                                <div className="flex items-center space-x-3 space-x-reverse">
-                                    {pkg.image && typeof pkg.image === 'string' && (
-                                        <img
-                                            src={pkg.image}
-                                            alt={pkg.title || ''}
-                                            className="h-10 w-10 rounded-full object-cover"
-                                        />
+                    <li key={pkg.id} className="px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
+                        <div className="flex items-center justify-between gap-4">
+                            <div className="flex items-center gap-4 flex-1 min-w-0">
+                                {pkg.image && typeof pkg.image === 'string' ? (
+                                    <div className="relative h-12 w-12 rounded-xl overflow-hidden ring-1 ring-gray-200 dark:ring-gray-800 flex-shrink-0">
+                                        <Image src={pkg.image} alt={pkg.title || ''} fill className="object-cover" unoptimized />
+                                    </div>
+                                ) : (
+                                    <div className="h-12 w-12 rounded-xl bg-indigo-100 dark:bg-indigo-500/10 flex items-center justify-center flex-shrink-0">
+                                        <span className="text-lg font-bold text-indigo-600 dark:text-indigo-400">{(pkg.title || pkg.name || '?')[0]}</span>
+                                    </div>
                                 )}
-                                    <div>
-                                        <p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate px-2">
-                                            {pkg.title || 'بدون عنوان'}
-                                        </p>
-                                        <p className="text-sm text-gray-500 dark:text-gray-400 px-2">
-                                            {pkg.name || 'بدون نام'}
-                                        </p>
+                                <div className="min-w-0">
+                                    <p className="text-sm font-semibold text-indigo-600 dark:text-indigo-400 truncate">{pkg.title || 'بدون عنوان'}</p>
+                                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate" dir="ltr">{pkg.name || 'بدون نام'}</p>
+                                    <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">{formatDate(pkg.updated_at)}</p>
                                 </div>
                             </div>
-                                <div className="mt-2 sm:flex sm:justify-between">
-                                    <div className="sm:flex sm:space-x-4 sm:space-x-reverse">
-
-
-                                    </div>
-                                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 sm:mt-0">
-                                        آخرین به‌روزرسانی: {formatDate(pkg.updated_at)}
-                                    </p>
-                                </div>
-                            </div>
-                            <div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
+                            <div className="flex items-center gap-1 flex-shrink-0">
                                 <button
                                     onClick={() => onEdit(pkg)}
-                                    className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
+                                    className="p-2 rounded-lg text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-colors"
                                 >
-                                    <PencilIcon className="h-5 w-5" />
+                                    <PencilIcon className="h-4 w-4" />
                                 </button>
                                 <button
                                     onClick={() => onDelete(pkg)}
-                                    className="text-red-600 dark:text-red-400 hover:text-red-900 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                                    className="p-2 rounded-lg text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
                                 >
-                                    <TrashIcon className="h-5 w-5" />
+                                    <TrashIcon className="h-4 w-4" />
                                 </button>
                             </div>
                         </div>

components/admin/products/ProductForm.tsx

@@ -16,7 +16,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
     const [formData, setFormData] = useState<CreateProductData | UpdateProductData>({
         title: '',
         price: 0,
-        type: 4, // Default to monthly
+        type: 4,
         discounted_price: '',
         daily_price: '',
         discount: '',
@@ -69,206 +69,90 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
-
         const submitData = {
             ...formData,
             ...(descriptions.length > 0 && { descriptions }),
         };
-
         await onSubmit(submitData);
     };
 
+    const inputClass = 'block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/60 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 dark:focus:border-indigo-400 transition-colors';
+    const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';
+
     return (
-        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow">
-            <div>
-                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
+        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm">
+            <div className="pb-4 border-b border-gray-100 dark:border-gray-800">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                     {product ? 'ویرایش محصول' : 'ایجاد محصول جدید'} برای پکیج {packageName}
                 </h3>
             </div>
 
-            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-                {/* Title */}
+            <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
                 <div>
-                    <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        عنوان <span className="text-red-500">*</span>
-                    </label>
-                    <input
-                        type="text"
-                        id="title"
-                        name="title"
-                        required
-                        value={formData.title || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
-                        placeholder="مثال: اشتراک ماهانه"
-                    />
+                    <label htmlFor="title" className={labelClass}>عنوان <span className="text-red-500">*</span></label>
+                    <input type="text" id="title" name="title" required value={formData.title || ''} onChange={handleInputChange} className={inputClass} placeholder="مثال: اشتراک ماهانه" />
                 </div>
-
-                {/* Price */}
                 <div>
-                    <label htmlFor="price" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        قیمت (تومان) <span className="text-red-500">*</span>
-                    </label>
-                    <input
-                        type="number"
-                        id="price"
-                        name="price"
-                        required
-                        min="0"
-                        value={formData.price || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
-                        placeholder="مثال: 60000"
-                    />
+                    <label htmlFor="price" className={labelClass}>قیمت (تومان) <span className="text-red-500">*</span></label>
+                    <input type="number" id="price" name="price" required min="0" value={formData.price || ''} onChange={handleInputChange} className={inputClass} placeholder="مثال: 60000" />
                 </div>
-
-                {/* Type */}
                 <div>
-                    <label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        نوع اشتراک <span className="text-red-500">*</span>
-                    </label>
-                    <select
-                        id="type"
-                        name="type"
-                        required
-                        value={formData.type || 4}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
-                    >
+                    <label htmlFor="type" className={labelClass}>نوع اشتراک <span className="text-red-500">*</span></label>
+                    <select id="type" name="type" required value={formData.type || 4} onChange={handleInputChange} className={inputClass}>
                         {Object.entries(PRODUCT_TYPES).map(([value, label]) => (
-                            <option key={value} value={value}>
-                                {label}
-                            </option>
+                            <option key={value} value={value}>{label}</option>
                         ))}
                     </select>
                 </div>
-
-                {/* Discounted price (display only) */}
                 <div>
-                    <label htmlFor="discounted_price" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        قیمت کلی تخفیف خورده <span className="text-xs text-gray-400">(فقط نمایشی)</span>
-                    </label>
-                    <input
-                        type="text"
-                        id="discounted_price"
-                        name="discounted_price"
-                        value={formData.discounted_price || ''}
-                        onChange={handleInputChange}
-                        dir="rtl"
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
-                        placeholder="مثال: ۱٬۴۶۰٬۰۰۰"
-                    />
+                    <label htmlFor="discounted_price" className={labelClass}>قیمت کلی تخفیف خورده <span className="text-xs text-gray-400">(فقط نمایشی)</span></label>
+                    <input type="text" id="discounted_price" name="discounted_price" value={formData.discounted_price || ''} onChange={handleInputChange} dir="rtl" className={inputClass} placeholder="مثال: ۱٬۴۶۰٬۰۰۰" />
                 </div>
-
-                {/* Daily price (display only) */}
                 <div>
-                    <label htmlFor="daily_price" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        قیمت روزانه <span className="text-xs text-gray-400">(فقط نمایشی)</span>
-                    </label>
-                    <input
-                        type="text"
-                        id="daily_price"
-                        name="daily_price"
-                        value={formData.daily_price || ''}
-                        onChange={handleInputChange}
-                        dir="rtl"
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
-                        placeholder="مثال: معادل روزانه ۴٬۰۰۰ تومان"
-                    />
+                    <label htmlFor="daily_price" className={labelClass}>قیمت روزانه <span className="text-xs text-gray-400">(فقط نمایشی)</span></label>
+                    <input type="text" id="daily_price" name="daily_price" value={formData.daily_price || ''} onChange={handleInputChange} dir="rtl" className={inputClass} placeholder="مثال: معادل روزانه ۴٬۰۰۰ تومان" />
                 </div>
-
-                {/* Discount (display only) */}
                 <div>
-                    <label htmlFor="discount" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        تخفیف <span className="text-xs text-gray-400">(فقط نمایشی)</span>
-                    </label>
-                    <input
-                        type="text"
-                        id="discount"
-                        name="discount"
-                        value={formData.discount || ''}
-                        onChange={handleInputChange}
-                        dir="rtl"
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
-                        placeholder="مثال: ۵۵٪ تخفیف"
-                    />
+                    <label htmlFor="discount" className={labelClass}>تخفیف <span className="text-xs text-gray-400">(فقط نمایشی)</span></label>
+                    <input type="text" id="discount" name="discount" value={formData.discount || ''} onChange={handleInputChange} dir="rtl" className={inputClass} placeholder="مثال: ۵۵٪ تخفیف" />
                 </div>
-
-                {/* Sort order */}
                 <div>
-                    <label htmlFor="sort_order" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        ترتیب نمایش <span className="text-xs text-gray-400">(۰ بالاترین)</span>
-                    </label>
-                    <input
-                        type="number"
-                        id="sort_order"
-                        name="sort_order"
-                        min="0"
-                        value={formData.sort_order ?? 0}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
-                        placeholder="0"
-                    />
+                    <label htmlFor="sort_order" className={labelClass}>ترتیب نمایش <span className="text-xs text-gray-400">(۰ بالاترین)</span></label>
+                    <input type="number" id="sort_order" name="sort_order" min="0" value={formData.sort_order ?? 0} onChange={handleInputChange} className={inputClass} placeholder="0" />
                 </div>
-
-                {/* Best seller */}
                 <div className="md:col-span-2">
-                    <label className="flex items-center gap-2 cursor-pointer">
-                        <input
-                            type="checkbox"
-                            name="is_best_seller"
-                            checked={!!formData.is_best_seller}
-                            onChange={handleInputChange}
-                            className="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 dark:bg-gray-800"
-                        />
-                        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                            پرفروش‌ترین اشتراک
-                        </span>
-                        <span className="text-xs text-gray-400">(فقط برای یک محصول فعال می‌شود)</span>
+                    <label className="flex items-center gap-3 cursor-pointer p-3 rounded-xl bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+                        <input type="checkbox" name="is_best_seller" checked={!!formData.is_best_seller} onChange={handleInputChange} className="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-600 rounded-lg focus:ring-indigo-500 dark:bg-gray-800" />
+                        <div>
+                            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">پرفروش‌ترین اشتراک</span>
+                            <span className="text-xs text-gray-400 mr-2">(فقط برای یک محصول فعال می‌شود)</span>
+                        </div>
                     </label>
                 </div>
             </div>
 
-            {/* Descriptions */}
-            <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                    ویژگی‌ها
-                </label>
-                <div className="flex space-x-2 space-x-reverse">
+            <div className="pt-4 border-t border-gray-100 dark:border-gray-800">
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">ویژگی‌ها</label>
+                <div className="flex gap-2">
                     <input
                         type="text"
                         value={newDescription}
                         onChange={(e) => setNewDescription(e.target.value)}
-                        className="flex-1 px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
+                        className={`flex-1 ${inputClass}`}
                         placeholder="ویژگی جدید را وارد کنید"
-                        onKeyPress={(e) => {
-                            if (e.key === 'Enter') {
-                                e.preventDefault();
-                                handleAddDescription();
-                            }
-                        }}
+                        onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleAddDescription(); } }}
                     />
-                    <button
-                        type="button"
-                        onClick={handleAddDescription}
-                        className="inline-flex items-center px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
-                    >
+                    <button type="button" onClick={handleAddDescription} className="inline-flex items-center px-4 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/30 transition-colors shadow-sm shadow-indigo-500/20">
                         <PlusIcon className="h-5 w-5" />
                     </button>
                 </div>
-
-                {/* Descriptions List */}
                 {descriptions.length > 0 && (
                     <ul className="mt-3 space-y-2">
                         {descriptions.map((desc, index) => (
-                            <li key={index} className="flex items-center justify-between bg-gray-50 dark:bg-gray-800/60 px-3 py-2 rounded-md">
+                            <li key={index} className="flex items-center justify-between px-4 py-2.5 rounded-xl bg-gray-50 dark:bg-gray-800/60 ring-1 ring-gray-100 dark:ring-gray-800">
                                 <span className="text-sm text-gray-700 dark:text-gray-300">{desc}</span>
-                                <button
-                                    type="button"
-                                    onClick={() => handleRemoveDescription(index)}
-                                    className="text-red-600 dark:text-red-400 hover:text-red-900 transition-colors"
-                                >
-                                    <XMarkIcon className="h-5 w-5" />
+                                <button type="button" onClick={() => handleRemoveDescription(index)} className="text-red-500 hover:text-red-700 dark:text-red-400 transition-colors">
+                                    <XMarkIcon className="h-4 w-4" />
                                 </button>
                             </li>
                         ))}
@@ -276,20 +160,11 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
                 )}
             </div>
 
-            {/* Form Actions */}
-            <div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
-                <button
-                    type="button"
-                    onClick={onCancel}
-                    className="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 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
-                >
+            <div className="flex justify-end gap-3 pt-4 border-t border-gray-100 dark:border-gray-800">
+                <button type="button" onClick={onCancel} className="px-5 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 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 transition-colors">
                     انصراف
                 </button>
-                <button
-                    type="submit"
-                    disabled={isLoading}
-                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
-                >
+                <button type="submit" disabled={isLoading} className="px-5 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/30 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20">
                     {isLoading ? 'در حال ذخیره...' : product ? 'به‌روزرسانی' : 'ایجاد'}
                 </button>
             </div>

components/admin/products/ProductList.tsx

@@ -16,96 +16,84 @@ interface ProductListProps {
 export default function ProductList({ products, packageName, onEdit, onDelete, isLoading }: ProductListProps) {
     if (isLoading) {
         return (
-            <div className="flex justify-center items-center py-12">
-                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
+            <div className="flex justify-center items-center py-16">
+                <div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
             </div>
         );
     }
 
     if (!products || products.length === 0) {
         return (
-            <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
-                <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-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
+                    <svg className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+                    </svg>
+                </div>
+                <p className="text-gray-500 dark:text-gray-400 text-sm">هیچ محصولی برای پکیج {packageName} یافت نشد</p>
             </div>
         );
     }
 
     return (
-        <div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
-            <div className="px-4 py-5 sm:px-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
+        <div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
+            <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
+                <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
                     محصولات پکیج {packageName}
                 </h3>
             </div>
             <ul className="divide-y divide-gray-200 dark:divide-gray-800">
                 {products.map((product) => (
-                    <li key={product.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
-                        <div className="flex items-center justify-between">
+                    <li key={product.id} className="px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
+                        <div className="flex items-start justify-between gap-4">
                             <div className="flex-1 min-w-0">
-                                <div className="flex items-center justify-between">
-                                    <div className="flex items-center gap-2 min-w-0">
-                                        <p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate">
+                                <div className="flex items-center gap-2 flex-wrap">
+                                    <p className="text-sm font-semibold text-indigo-600 dark:text-indigo-400">
                                         {product.title || 'بدون عنوان'}
                                     </p>
                                     {product.is_best_seller && (
-                                            <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 whitespace-nowrap">
-                                                پرفروش‌ترین
+                                        <span className="px-2 py-0.5 text-xs font-semibold rounded-lg bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">
+                                            پرفروش
                                         </span>
                                     )}
-                                    </div>
-                                    <div className="flex items-center gap-2 flex-shrink-0">
-                                        <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300">
-                                            ترتیب: {product.sort_order ?? 0}
-                                        </span>
-                                        <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
+                                    <span className="px-2 py-0.5 text-xs font-semibold rounded-lg bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                         {getProductTypeLabel(product.type)}
                                     </span>
+                                    <span className="px-2 py-0.5 text-xs font-medium rounded-lg bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+                                        #{product.sort_order ?? 0}
+                                    </span>
                                 </div>
+                                <div className="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
+                                    <span className="font-medium text-gray-900 dark:text-gray-100">{formatPrice(product.price)} تومان</span>
+                                    {product.discounted_price && <span>تخفیف: {product.discounted_price}</span>}
+                                    {product.daily_price && <span>روزانه: {product.daily_price}</span>}
+                                    {product.discount && <span>{product.discount}</span>}
                                 </div>
-                                <div className="mt-2">
-                                    <p className="text-sm text-gray-900 dark:text-gray-100">
-                                        قیمت: {formatPrice(product.price)} تومان
-                                    </p>
-                                    {(product.discounted_price || product.daily_price || product.discount) && (
-                                        <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-600 dark:text-gray-400">
-                                            {product.discounted_price && (
-                                                <span>قیمت تخفیف‌خورده: {product.discounted_price}</span>
-                                            )}
-                                            {product.daily_price && (
-                                                <span>قیمت روزانه: {product.daily_price}</span>
-                                            )}
-                                            {product.discount && (
-                                                <span>تخفیف: {product.discount}</span>
-                                            )}
-                                        </div>
-                                    )}
                                 {product.descriptions && product.descriptions.length > 0 && (
-                                        <div className="mt-2">
-                                            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">ویژگی‌ها:</p>
-                                            <ul className="list-disc list-inside text-xs text-gray-600 dark:text-gray-400 pr-4">
+                                    <div className="mt-2 flex flex-wrap gap-1.5">
                                         {product.descriptions.map((desc, index) => (
-                                                    <li key={index}>{desc}</li>
+                                            <span key={index} className="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-md">
+                                                {desc}
+                                            </span>
                                         ))}
-                                            </ul>
                                     </div>
                                 )}
+                                <p className="mt-2 text-xs text-gray-400 dark:text-gray-500">
+                                    {formatDate(product.updated_at)}
+                                </p>
                             </div>
-                                <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
-                                    آخرین به‌روزرسانی: {formatDate(product.updated_at)}
-                                </div>
-                            </div>
-                            <div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
+                            <div className="flex items-center gap-1 flex-shrink-0">
                                 <button
                                     onClick={() => onEdit(product)}
-                                    className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
+                                    className="p-2 rounded-lg text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-colors"
                                 >
-                                    <PencilIcon className="h-5 w-5" />
+                                    <PencilIcon className="h-4 w-4" />
                                 </button>
                                 <button
                                     onClick={() => onDelete(product)}
-                                    className="text-red-600 dark:text-red-400 hover:text-red-900 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/40 transition-colors"
+                                    className="p-2 rounded-lg text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
                                 >
-                                    <TrashIcon className="h-5 w-5" />
+                                    <TrashIcon className="h-4 w-4" />
                                 </button>
                             </div>
                         </div>

components/admin/promotions/PromotionForm.tsx

@@ -3,7 +3,6 @@
 import { useState, useEffect } from 'react';
 import { Promotion, CreatePromotionData, UpdatePromotionData, PROMOTION_TYPES } from '@/types/promotion';
 import { PhotoIcon, XMarkIcon } from '@heroicons/react/24/outline';
-import Image from 'next/image';
 
 interface PromotionFormProps {
     promotion?: Promotion | null;
@@ -33,10 +32,8 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
 
     useEffect(() => {
         if (promotion) {
-            // Format dates for input fields
             const startAt = promotion.start_at ? promotion.start_at.slice(0, 16) : '';
             const endAt = promotion.end_at ? promotion.end_at.slice(0, 16) : '';
-            
             setFormData({
                 type: promotion.type || 'slider',
                 title: promotion.title || '',
@@ -50,32 +47,21 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
                 start_at: startAt,
                 end_at: endAt,
             });
-
             setIsActive(promotion.is_active);
-
-            if (promotion.image_url) {
-                setImagePreview(promotion.image_url);
-            }
+            if (promotion.image_url) setImagePreview(promotion.image_url);
         } else {
-            // Set default priority
             setFormData(prev => ({ ...prev, priority: 0 }));
         }
     }, [promotion]);
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
         const { name, value } = e.target;
-        setFormData(prev => ({
-            ...prev,
-            [name]: value === '' ? null : value,
-        }));
+        setFormData(prev => ({ ...prev, [name]: value === '' ? null : value }));
     };
 
     const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
-        setFormData(prev => ({
-            ...prev,
-            [name]: value === '' ? null : parseInt(value, 10),
-        }));
+        setFormData(prev => ({ ...prev, [name]: value === '' ? null : parseInt(value, 10) }));
     };
 
     const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -83,12 +69,8 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
         if (file) {
             setImageFile(file);
             setFormData(prev => ({ ...prev, image: file }));
-            
-            // Create preview
             const reader = new FileReader();
-            reader.onloadend = () => {
-                setImagePreview(reader.result as string);
-            };
+            reader.onloadend = () => setImagePreview(reader.result as string);
             reader.readAsDataURL(file);
         }
     };
@@ -101,292 +83,117 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
-        
-        // Format dates properly
         let submitData: any = { ...formData };
-        
-        if (submitData.start_at) {
-            submitData.start_at = submitData.start_at.replace('T', ' ') + ':00';
-        }
-        
-        if (submitData.end_at) {
-            submitData.end_at = submitData.end_at.replace('T', ' ') + ':00';
-        }
-        
-        // Add is_active for updates
-        if (promotion) {
-            submitData.is_active = isActive;
-        }
-        
+        if (submitData.start_at) submitData.start_at = submitData.start_at.replace('T', ' ') + ':00';
+        if (submitData.end_at) submitData.end_at = submitData.end_at.replace('T', ' ') + ':00';
+        if (promotion) submitData.is_active = isActive;
         await onSubmit(submitData);
     };
 
+    const inputClass = 'block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/60 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 dark:focus:border-indigo-400 transition-colors';
+    const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';
+
     return (
-        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow">
-            <div>
-                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
+        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm">
+            <div className="pb-4 border-b border-gray-100 dark:border-gray-800">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                     {promotion ? 'ویرایش تبلیغ' : 'ایجاد تبلیغ جدید'}
                 </h3>
             </div>
 
-            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-                {/* Type */}
+            <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
                 <div>
-                    <label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        نوع <span className="text-red-500">*</span>
-                    </label>
-                    <select
-                        id="type"
-                        name="type"
-                        required
-                        value={formData.type || 'slider'}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                    >
+                    <label htmlFor="type" className={labelClass}>نوع <span className="text-red-500">*</span></label>
+                    <select id="type" name="type" required value={formData.type || 'slider'} onChange={handleInputChange} className={inputClass}>
                         {Object.entries(PROMOTION_TYPES).map(([value, label]) => (
-                            <option key={value} value={value}>
-                                {label}
-                            </option>
+                            <option key={value} value={value}>{label}</option>
                         ))}
                     </select>
                 </div>
-
-                {/* Title */}
                 <div>
-                    <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        عنوان
-                    </label>
-                    <input
-                        type="text"
-                        id="title"
-                        name="title"
-                        value={formData.title || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                        placeholder="عنوان تبلیغ"
-                    />
+                    <label htmlFor="title" className={labelClass}>عنوان</label>
+                    <input type="text" id="title" name="title" value={formData.title || ''} onChange={handleInputChange} className={inputClass} placeholder="عنوان تبلیغ" />
                 </div>
-
-                {/* Subtitle */}
                 <div className="md:col-span-2">
-                    <label htmlFor="subtitle" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        زیرعنوان
-                    </label>
-                    <input
-                        type="text"
-                        id="subtitle"
-                        name="subtitle"
-                        value={formData.subtitle || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                        placeholder="زیرعنوان تبلیغ"
-                    />
+                    <label htmlFor="subtitle" className={labelClass}>زیرعنوان</label>
+                    <input type="text" id="subtitle" name="subtitle" value={formData.subtitle || ''} onChange={handleInputChange} className={inputClass} placeholder="زیرعنوان تبلیغ" />
                 </div>
-
-                {/* Action Text */}
                 <div>
-                    <label htmlFor="action_text" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        متن دکمه
-                    </label>
-                    <input
-                        type="text"
-                        id="action_text"
-                        name="action_text"
-                        value={formData.action_text || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                        placeholder="مثال: همین حالا نصب کن"
-                    />
+                    <label htmlFor="action_text" className={labelClass}>متن دکمه</label>
+                    <input type="text" id="action_text" name="action_text" value={formData.action_text || ''} onChange={handleInputChange} className={inputClass} placeholder="مثال: همین حالا نصب کن" />
                 </div>
-
-                {/* Priority */}
                 <div>
-                    <label htmlFor="priority" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        اولویت
-                    </label>
-                    <input
-                        type="number"
-                        id="priority"
-                        name="priority"
-                        min="0"
-                        value={formData.priority || 0}
-                        onChange={handleNumberChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                        placeholder="عدد بالاتر = اولویت بیشتر"
-                    />
+                    <label htmlFor="priority" className={labelClass}>اولویت</label>
+                    <input type="number" id="priority" name="priority" min="0" value={formData.priority || 0} onChange={handleNumberChange} className={inputClass} placeholder="عدد بالاتر = اولویت بیشتر" />
                 </div>
-
-                {/* Start Date */}
                 <div>
-                    <label htmlFor="start_at" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        تاریخ شروع
-                    </label>
-                    <input
-                        type="datetime-local"
-                        id="start_at"
-                        name="start_at"
-                        value={formData.start_at || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                    />
+                    <label htmlFor="start_at" className={labelClass}>تاریخ شروع</label>
+                    <input type="datetime-local" id="start_at" name="start_at" value={formData.start_at || ''} onChange={handleInputChange} className={inputClass} />
                 </div>
-
-                {/* End Date */}
                 <div>
-                    <label htmlFor="end_at" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        تاریخ پایان
-                    </label>
-                    <input
-                        type="datetime-local"
-                        id="end_at"
-                        name="end_at"
-                        value={formData.end_at || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                    />
+                    <label htmlFor="end_at" className={labelClass}>تاریخ پایان</label>
+                    <input type="datetime-local" id="end_at" name="end_at" value={formData.end_at || ''} onChange={handleInputChange} className={inputClass} />
                 </div>
             </div>
 
-            {/* URLs Section */}
-            <div className="border-t border-gray-200 dark:border-gray-800 pt-4">
-                <h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-3">لینک‌ها</h4>
+            <div className="pt-4 border-t border-gray-100 dark:border-gray-800">
+                <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">لینک‌ها</h4>
                 <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                    {/* Myket URL */}
                     <div>
-                        <label htmlFor="url_myket" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                            لینک مایکت
-                        </label>
-                        <input
-                            type="url"
-                            id="url_myket"
-                            name="url_myket"
-                            value={formData.url_myket || ''}
-                            onChange={handleInputChange}
-                            className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                            placeholder="https://myket.ir/app/..."
-                        />
+                        <label htmlFor="url_myket" className={labelClass}>لینک مایکت</label>
+                        <input type="url" id="url_myket" name="url_myket" value={formData.url_myket || ''} onChange={handleInputChange} className={inputClass} placeholder="https://myket.ir/app/..." dir="ltr" />
                     </div>
-
-                    {/* Bazaar URL */}
                     <div>
-                        <label htmlFor="url_bazzar" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                            لینک بازار
-                        </label>
-                        <input
-                            type="url"
-                            id="url_bazzar"
-                            name="url_bazzar"
-                            value={formData.url_bazzar || ''}
-                            onChange={handleInputChange}
-                            className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                            placeholder="https://cafebazaar.ir/app/..."
-                        />
+                        <label htmlFor="url_bazzar" className={labelClass}>لینک بازار</label>
+                        <input type="url" id="url_bazzar" name="url_bazzar" value={formData.url_bazzar || ''} onChange={handleInputChange} className={inputClass} placeholder="https://cafebazaar.ir/app/..." dir="ltr" />
                     </div>
-
-                    {/* Google Play URL */}
                     <div>
-                        <label htmlFor="url_google_play" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                            لینک گوگل‌پلی
-                        </label>
-                        <input
-                            type="url"
-                            id="url_google_play"
-                            name="url_google_play"
-                            value={formData.url_google_play || ''}
-                            onChange={handleInputChange}
-                            className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                            placeholder="https://play.google.com/store/apps/..."
-                        />
+                        <label htmlFor="url_google_play" className={labelClass}>لینک گوگل‌پلی</label>
+                        <input type="url" id="url_google_play" name="url_google_play" value={formData.url_google_play || ''} onChange={handleInputChange} className={inputClass} placeholder="https://play.google.com/store/apps/..." dir="ltr" />
                     </div>
-
-                    {/* Site URL */}
                     <div>
-                        <label htmlFor="url_site" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                            لینک وبسایت
-                        </label>
-                        <input
-                            type="url"
-                            id="url_site"
-                            name="url_site"
-                            value={formData.url_site || ''}
-                            onChange={handleInputChange}
-                            className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                            placeholder="https://example.com"
-                        />
+                        <label htmlFor="url_site" className={labelClass}>لینک وبسایت</label>
+                        <input type="url" id="url_site" name="url_site" value={formData.url_site || ''} onChange={handleInputChange} className={inputClass} placeholder="https://example.com" dir="ltr" />
                     </div>
                 </div>
             </div>
 
-            {/* Image Upload */}
-            <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                    تصویر
-                </label>
-                <div className="flex items-center space-x-3 space-x-reverse">
-                    <label className="cursor-pointer 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 transition-colors">
-                        <PhotoIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
+            <div className="pt-2 border-t border-gray-100 dark:border-gray-800">
+                <label className={labelClass}>تصویر</label>
+                <div className="flex items-center gap-3">
+                    <label className="cursor-pointer inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+                        <PhotoIcon className="h-4 w-4 text-gray-400" />
                         انتخاب تصویر
-                        <input
-                            type="file"
-                            accept="image/*"
-                            onChange={handleImageChange}
-                            className="hidden"
-                        />
+                        <input type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
                     </label>
                     {imagePreview && (
-                        <button
-                            type="button"
-                            onClick={removeImage}
-                            className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 transition-colors"
-                        >
+                        <button type="button" onClick={removeImage} className="text-red-500 hover:text-red-700 transition-colors">
                             <XMarkIcon className="h-5 w-5" />
                         </button>
                     )}
                 </div>
                 {imagePreview && (
-                    <div className="mt-2 relative h-32 w-32 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
-                        <img
-                            src={imagePreview}
-                            alt="Preview"
-                            className="w-full h-full object-cover"
-                        />
+                    <div className="mt-3 relative h-32 w-32 rounded-xl overflow-hidden ring-1 ring-gray-200 dark:ring-gray-800">
+                        <img src={imagePreview} alt="Preview" className="w-full h-full object-cover" />
                     </div>
                 )}
-                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                    حداکثر حجم: ۲ مگابایت
-                </p>
+                <p className="mt-1.5 text-xs text-gray-400 dark:text-gray-500">حداکثر حجم: ۲ مگابایت</p>
             </div>
 
-            {/* Active Status (only for edit) */}
             {promotion && (
-                <div className="flex items-center">
-                    <input
-                        type="checkbox"
-                        id="is_active"
-                        checked={isActive}
-                        onChange={(e) => setIsActive(e.target.checked)}
-                        className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded"
-                    />
-                    <label htmlFor="is_active" className="mr-2 block text-sm text-gray-900 dark:text-gray-100">
-                        فعال
+                <div className="pt-2 border-t border-gray-100 dark:border-gray-800">
+                    <label className="flex items-center gap-3 p-3 rounded-xl bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
+                        <input type="checkbox" id="is_active" checked={isActive} onChange={(e) => setIsActive(e.target.checked)} className="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded-lg focus:ring-indigo-500" />
+                        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">فعال</span>
                     </label>
                 </div>
             )}
 
-            {/* Form Actions */}
-            <div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
-                <button
-                    type="button"
-                    onClick={onCancel}
-                    className="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 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
-                >
+            <div className="flex justify-end gap-3 pt-4 border-t border-gray-100 dark:border-gray-800">
+                <button type="button" onClick={onCancel} className="px-5 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 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 transition-colors">
                     انصراف
                 </button>
-                <button
-                    type="submit"
-                    disabled={isLoading}
-                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
-                >
+                <button type="submit" disabled={isLoading} className="px-5 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/30 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20">
                     {isLoading ? 'در حال ذخیره...' : promotion ? 'به‌روزرسانی' : 'ایجاد'}
                 </button>
             </div>

components/admin/promotions/PromotionList.tsx

@@ -20,25 +20,27 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
 
     if (isLoading) {
         return (
-            <div className="flex justify-center items-center py-12">
-                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
+            <div className="flex justify-center items-center py-16">
+                <div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
             </div>
         );
     }
 
     if (!promotions || promotions.length === 0) {
         return (
-            <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
-                <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-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
+                    <svg className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1-8.635 2.517m0 0a23.848 23.848 0 0 1-8.635-2.517m8.635 2.517a23.848 23.848 0 0 0 8.635 2.517m0 0a23.848 23.848 0 0 0 8.635-2.517M12 13.5a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
+                    </svg>
+                </div>
+                <p className="text-gray-500 dark:text-gray-400 text-sm">هیچ تبلیغاتی یافت نشد</p>
             </div>
         );
     }
 
-    // Sort promotions by priority (higher priority first) and then by creation date
     const sortedPromotions = [...promotions].sort((a, b) => {
-        if (a.priority && b.priority) {
-            return b.priority - a.priority;
-        }
+        if (a.priority && b.priority) return b.priority - a.priority;
         if (a.priority) return -1;
         if (b.priority) return 1;
         return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
@@ -49,145 +51,106 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
     };
 
     return (
-        <div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
-            <div className="px-4 py-5 sm:px-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
+        <div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
+            <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
+                <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
                     لیست تبلیغات
                 </h3>
             </div>
             <ul className="divide-y divide-gray-200 dark:divide-gray-800">
                 {sortedPromotions.map((promotion) => (
-                    <li key={promotion.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
-                        <div className="flex items-start justify-between">
-                            <div className="flex-1 min-w-0">
-                                <div className="flex items-start space-x-4 space-x-reverse">
-                                    {/* Promotion Image - Using unoptimized Image component */}
+                    <li key={promotion.id} className="px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
+                        <div className="flex items-start gap-4">
                             {promotion.image_url && !imageErrors[promotion.id] && (
                                 <div className="flex-shrink-0">
-                                            <div className="relative h-20 w-20 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
+                                    <div className="relative h-16 w-16 rounded-xl overflow-hidden ring-1 ring-gray-200 dark:ring-gray-800">
                                         <Image
                                             src={promotion.image_url}
                                             alt={promotion.title || 'Promotion'}
                                             fill
                                             className="object-cover"
                                             onError={() => handleImageError(promotion.id)}
-                                                    unoptimized={true} // This disables image optimization
+                                            unoptimized
                                         />
                                     </div>
                                 </div>
                             )}
 
-                                    {/* Promotion Details */}
-                                    <div className="flex-1">
-                                        <div className="flex items-center justify-between">
-                                            <div className="flex items-center space-x-2 space-x-reverse">
-                                                <p className="text-sm font-medium text-indigo-600 dark:text-indigo-400">
+                            <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2 flex-wrap">
+                                    <p className="text-sm font-semibold text-indigo-600 dark:text-indigo-400">
                                         {promotion.title || 'بدون عنوان'}
                                     </p>
-                                                <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
+                                    <span className="px-2 py-0.5 text-xs font-semibold rounded-lg bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                         {getPromotionTypeLabel(promotion.type)}
                                     </span>
                                     {promotion.is_active ? (
-                                                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
+                                        <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-lg bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400">
+                                            <span className="h-1.5 w-1.5 rounded-full bg-green-500" />
                                             فعال
                                         </span>
                                     ) : (
-                                                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+                                        <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-lg bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+                                            <span className="h-1.5 w-1.5 rounded-full bg-gray-400" />
                                             غیرفعال
                                         </span>
                                     )}
-                                            </div>
+                                    {promotion.priority && (
+                                        <span className="px-2 py-0.5 text-xs font-medium rounded-lg bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300">
+                                            اولویت: {promotion.priority}
+                                        </span>
+                                    )}
                                 </div>
 
                                 {promotion.subtitle && (
-                                            <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
-                                                {promotion.subtitle}
-                                            </p>
+                                    <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">{promotion.subtitle}</p>
                                 )}
 
-                                        {promotion.action_text && (
-                                            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                                                متن دکمه: {promotion.action_text}
-                                            </p>
-                                        )}
-
-                                        <div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
-                                            {promotion.priority && (
-                                                <div className="text-xs text-gray-500 dark:text-gray-400">
-                                                    <span className="font-medium">اولویت:</span> {promotion.priority}
-                                                </div>
-                                            )}
-                                            
-                                            {promotion.start_at && (
-                                                <div className="text-xs text-gray-500 dark:text-gray-400">
-                                                    <span className="font-medium">شروع:</span> {formatDate(promotion.start_at)}
-                                                </div>
-                                            )}
-                                            
-                                            {promotion.end_at && (
-                                                <div className="text-xs text-gray-500 dark:text-gray-400">
-                                                    <span className="font-medium">پایان:</span> {formatDate(promotion.end_at)}
-                                                </div>
-                                            )}
+                                <div className="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
+                                    {promotion.action_text && <span>دکمه: {promotion.action_text}</span>}
+                                    {promotion.start_at && <span>شروع: {formatDate(promotion.start_at)}</span>}
+                                    {promotion.end_at && <span>پایان: {formatDate(promotion.end_at)}</span>}
                                 </div>
 
-                                        {/* URLs */}
-                                        <div className="mt-2 space-y-1">
+                                <div className="mt-1.5 flex flex-wrap gap-1.5">
                                     {promotion.url_site && (
-                                                <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
-                                                    <span className="font-medium">وبسایت:</span> {promotion.url_site}
-                                                </div>
+                                        <span className="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-md">وبسایت</span>
                                     )}
                                     {promotion.url_myket && (
-                                                <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
-                                                    <span className="font-medium">مایکت:</span> {promotion.url_myket}
-                                                </div>
+                                        <span className="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-md">مایکت</span>
                                     )}
                                     {promotion.url_bazzar && (
-                                                <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
-                                                    <span className="font-medium">بازار:</span> {promotion.url_bazzar}
-                                                </div>
+                                        <span className="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-md">بازار</span>
                                     )}
                                     {promotion.url_google_play && (
-                                                <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
-                                                    <span className="font-medium">گوگل‌پلی:</span> {promotion.url_google_play}
-                                                </div>
+                                        <span className="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-md">گوگل‌پلی</span>
                                     )}
                                 </div>
-
-                                        <div className="mt-2 text-xs text-gray-400 dark:text-gray-500">
-                                            آخرین به‌روزرسانی: {formatDate(promotion.updated_at)}
-                                        </div>
-                                    </div>
-                                </div>
                             </div>
 
-                            {/* Action Buttons */}
-                            <div className="mr-4 flex-shrink-0 flex flex-col space-y-2">
+                            <div className="flex items-center gap-1 flex-shrink-0">
                                 <button
                                     onClick={() => onToggleActive(promotion)}
-                                    className={`p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors ${
-                                        promotion.is_active ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'
+                                    className={`p-2 rounded-lg transition-colors ${
+                                        promotion.is_active
+                                            ? 'text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-500/10'
+                                            : 'text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800'
                                     }`}
                                     title={promotion.is_active ? 'غیرفعال کردن' : 'فعال کردن'}
                                 >
-                                    {promotion.is_active ? (
-                                        <EyeIcon className="h-5 w-5" />
-                                    ) : (
-                                        <EyeSlashIcon className="h-5 w-5" />
-                                    )}
+                                    {promotion.is_active ? <EyeIcon className="h-4 w-4" /> : <EyeSlashIcon className="h-4 w-4" />}
                                 </button>
                                 <button
                                     onClick={() => onEdit(promotion)}
-                                    className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
+                                    className="p-2 rounded-lg text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-colors"
                                 >
-                                    <PencilIcon className="h-5 w-5" />
+                                    <PencilIcon className="h-4 w-4" />
                                 </button>
                                 <button
                                     onClick={() => onDelete(promotion)}
-                                    className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/40 transition-colors"
+                                    className="p-2 rounded-lg text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
                                 >
-                                    <TrashIcon className="h-5 w-5" />
+                                    <TrashIcon className="h-4 w-4" />
                                 </button>
                             </div>
                         </div>

components/admin/referral/ReferralList.tsx

@@ -20,55 +20,64 @@ export default function ReferralList({
 }: ReferralListProps) {
     if (users.length === 0) {
         return (
-            <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">
-                <GiftIcon className="h-10 w-10 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
-                <p className="text-gray-500 dark:text-gray-400">
-                    در حال حاضر هیچ کاربری واجد شرایط دریافت پاداش معرفی نیست.
+            <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-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
+                    <GiftIcon className="h-6 w-6 text-gray-400" />
+                </div>
+                <p className="text-gray-500 dark:text-gray-400 text-sm">
+                    در حال حاضر هیچ کاربری واجد شرایط نیست
                 </p>
-                <p className="text-sm text-gray-400 dark:text-gray-500 mt-1">
-                    کاربران پس از {subscriptionTarget} دعوت موفق در این لیست نمایش داده می‌شوند.
+                <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                    کاربران پس از {subscriptionTarget} دعوت موفق در این لیست نمایش داده می‌شوند
                 </p>
             </div>
         );
     }
 
     return (
-        <div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl">
-            <div className="px-4 py-5 sm:px-6 flex items-center justify-between">
-                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
-                    کاربران واجد شرایط پاداش
+        <div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
+            <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
+                <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+                    کاربران واجد شرایط
                 </h3>
-                <span className="px-3 py-1 text-xs font-medium rounded-full bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300">
-                    هدف: {subscriptionTarget} دعوت موفق
+                <span className="px-3 py-1 text-xs font-semibold rounded-lg bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-400">
+                    هدف: {subscriptionTarget} دعوت
                 </span>
             </div>
-            <ul className="divide-y divide-gray-200 dark:divide-gray-800 border-t border-gray-200 dark:border-gray-800">
+            <ul className="divide-y divide-gray-200 dark:divide-gray-800">
                 {users.map((user) => (
-                    <li key={user.id} className="px-4 py-4 sm:px-6 hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors">
-                        <div className="flex items-center justify-between flex-wrap gap-3">
+                    <li key={user.id} className="px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
+                        <div className="flex items-start justify-between gap-4 flex-wrap">
                             <div className="flex-1 min-w-0">
-                                <div className="flex items-center gap-2">
-                                    <UserIcon className="h-4 w-4 text-gray-400 dark:text-gray-500" />
-                                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                                <div className="flex items-center gap-2 flex-wrap">
+                                    <div className="h-8 w-8 rounded-lg bg-indigo-100 dark:bg-indigo-500/10 flex items-center justify-center flex-shrink-0">
+                                        <UserIcon className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
+                                    </div>
+                                    <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">
                                         {user.name || 'بدون نام'}
                                     </p>
-                                    <span className="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
+                                    <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-lg bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400">
+                                        <span className="h-1.5 w-1.5 rounded-full bg-green-500" />
                                         {user.successful_invites} دعوت موفق
                                     </span>
                                 </div>
-                                <div className="mt-2 flex flex-wrap gap-x-6 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
-                                    <span className="flex items-center">
-                                        <EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
-                                        {user.email || 'ایمیل ثبت نشده'}
+                                <div className="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
+                                    {user.email && (
+                                        <span className="flex items-center gap-1" dir="ltr">
+                                            <EnvelopeIcon className="h-3.5 w-3.5" />
+                                            {user.email}
                                         </span>
-                                    <span className="flex items-center">
-                                        <PhoneIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
-                                        {user.mobile || 'شماره ثبت نشده'}
+                                    )}
+                                    {user.mobile && (
+                                        <span className="flex items-center gap-1" dir="ltr">
+                                            <PhoneIcon className="h-3.5 w-3.5" />
+                                            {user.mobile}
                                         </span>
+                                    )}
                                     {user.referral_code && (
-                                        <span className="flex items-center">
-                                            <TicketIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
-                                            کد معرف: {user.referral_code}
+                                        <span className="flex items-center gap-1">
+                                            <TicketIcon className="h-3.5 w-3.5" />
+                                            {user.referral_code}
                                         </span>
                                     )}
                                 </div>
@@ -76,10 +85,10 @@ export default function ReferralList({
                             <button
                                 onClick={() => onFulfill(user)}
                                 disabled={isLoading}
-                                className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                                className="flex-shrink-0 inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-xl text-sm font-medium hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-sm shadow-green-500/20"
                             >
-                                <GiftIcon className="h-5 w-5 ml-2" />
-                                {fulfillingId === user.id ? 'در حال اعطا...' : 'اعطای اشتراک رایگان'}
+                                <GiftIcon className="h-4 w-4" />
+                                {fulfillingId === user.id ? 'در حال اعطا...' : 'اعطای اشتراک'}
                             </button>
                         </div>
                     </li>

components/admin/reminders/ReminderForm.tsx

@@ -23,10 +23,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
 
     useEffect(() => {
         if (reminder) {
-            // Format datetime for input field (remove milliseconds and timezone)
-            // Convert from "2025-12-13T15:30:00.000" to "2025-12-13T15:30" for input
             const formattedTime = reminder.time ? reminder.time.replace(/\.\d+/, '').slice(0, 16) : '';
-            
             setFormData({
                 title: reminder.title || '',
                 description: reminder.description || '',
@@ -36,23 +33,17 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
                 type: reminder.type || 'reminder',
             });
         } else {
-            // Set default time to current date + 1 hour
             const defaultTime = new Date();
             defaultTime.setHours(defaultTime.getHours() + 1);
-            
-            // Format as YYYY-MM-DDTHH:MM for datetime-local input
             const year = defaultTime.getFullYear();
             const month = String(defaultTime.getMonth() + 1).padStart(2, '0');
             const day = String(defaultTime.getDate()).padStart(2, '0');
             const hours = String(defaultTime.getHours()).padStart(2, '0');
             const minutes = String(defaultTime.getMinutes()).padStart(2, '0');
-            
-            const formattedDefaultTime = `${year}-${month}-${day}T${hours}:${minutes}`;
-            
             setFormData({
                 title: '',
                 description: '',
-                time: formattedDefaultTime,
+                time: `${year}-${month}-${day}T${hours}:${minutes}`,
                 repeatable: false,
                 repeat_days: null,
                 type: 'reminder',
@@ -62,179 +53,81 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
         const { name, value, type } = e.target;
-        
         if (type === 'checkbox') {
             const checked = (e.target as HTMLInputElement).checked;
-            setFormData(prev => ({
-                ...prev,
-                [name]: checked,
-            }));
+            setFormData(prev => ({ ...prev, [name]: checked }));
         } else {
-            setFormData(prev => ({
-                ...prev,
-                [name]: value,
-            }));
+            setFormData(prev => ({ ...prev, [name]: value }));
         }
     };
 
     const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
-        setFormData(prev => ({
-            ...prev,
-            [name]: value ? parseInt(value, 10) : null,
-        }));
+        setFormData(prev => ({ ...prev, [name]: value ? parseInt(value, 10) : null }));
     };
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
-        
-        // Format the time properly for API: "2025-12-13 20:00:00.000"
         let formattedTime = '';
-        
         if (formData.time) {
-            // Input comes as "2025-12-13T20:00" from datetime-local
-            // Replace 'T' with space and add milliseconds
             formattedTime = formData.time.replace('T', ' ') + ':00.000';
         }
-        
-        const submitData = {
-            ...formData,
-            time: formattedTime,
+        await onSubmit({ ...formData, time: formattedTime });
     };
 
-        await onSubmit(submitData);
-    };
+    const inputClass = 'block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/60 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 dark:focus:border-indigo-400 transition-colors';
+    const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';
 
     return (
-        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow transition-colors">
-            <div>
-                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
+        <form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm">
+            <div className="pb-4 border-b border-gray-100 dark:border-gray-800">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                     {reminder ? 'ویرایش یادآوری' : 'ایجاد یادآوری جدید'} برای پکیج {packageName}
                 </h3>
             </div>
 
-            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-                {/* Title */}
+            <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
                 <div className="md:col-span-2">
-                    <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        عنوان <span className="text-red-500">*</span>
-                    </label>
-                    <input
-                        type="text"
-                        id="title"
-                        name="title"
-                        required
-                        value={formData.title || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                        placeholder="مثال: یادآوری روزانه"
-                    />
+                    <label htmlFor="title" className={labelClass}>عنوان <span className="text-red-500">*</span></label>
+                    <input type="text" id="title" name="title" required value={formData.title || ''} onChange={handleInputChange} className={inputClass} placeholder="مثال: یادآوری روزانه" />
                 </div>
-
-                {/* Type */}
                 <div>
-                    <label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        نوع <span className="text-red-500">*</span>
-                    </label>
-                    <select
-                        id="type"
-                        name="type"
-                        required
-                        value={formData.type || 'reminder'}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                    >
+                    <label htmlFor="type" className={labelClass}>نوع <span className="text-red-500">*</span></label>
+                    <select id="type" name="type" required value={formData.type || 'reminder'} onChange={handleInputChange} className={inputClass}>
                         {Object.entries(REMINDER_TYPES).map(([value, label]) => (
-                            <option key={value} value={value}>
-                                {label}
-                            </option>
+                            <option key={value} value={value}>{label}</option>
                         ))}
                     </select>
                 </div>
-
-                {/* Time */}
                 <div>
-                    <label htmlFor="time" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                        زمان <span className="text-red-500">*</span>
-                    </label>
-                    <input
-                        type="datetime-local"
-                        id="time"
-                        name="time"
-                        required
-                        value={formData.time || ''}
-                        onChange={handleInputChange}
-                        className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                    />
+                    <label htmlFor="time" className={labelClass}>زمان <span className="text-red-500">*</span></label>
+                    <input type="datetime-local" id="time" name="time" required value={formData.time || ''} onChange={handleInputChange} className={inputClass} />
                 </div>
-
-                {/* Repeatable */}
                 <div>
-                    <div className="flex items-center h-full pt-6">
-                        <input
-                            type="checkbox"
-                            id="repeatable"
-                            name="repeatable"
-                            checked={formData.repeatable || false}
-                            onChange={handleInputChange}
-                            className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded"
-                        />
-                        <label htmlFor="repeatable" className="mr-2 block text-sm text-gray-900 dark:text-gray-100">
-                            قابل تکرار
+                    <label className={`${labelClass} invisible`}>تکرار</label>
+                    <label className="flex items-center gap-3 p-3 rounded-xl bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
+                        <input type="checkbox" id="repeatable" name="repeatable" checked={formData.repeatable || false} onChange={handleInputChange} className="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded-lg focus:ring-indigo-500" />
+                        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">قابل تکرار</span>
                     </label>
                 </div>
-                </div>
-
-                {/* Repeat Days */}
                 {formData.repeatable && (
                     <div>
-                        <label htmlFor="repeat_days" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                            فاصله تکرار (روز)
-                        </label>
-                        <input
-                            type="number"
-                            id="repeat_days"
-                            name="repeat_days"
-                            min="1"
-                            value={formData.repeat_days || ''}
-                            onChange={handleNumberChange}
-                            className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                            placeholder="مثال: 7"
-                        />
+                        <label htmlFor="repeat_days" className={labelClass}>فاصله تکرار (روز)</label>
+                        <input type="number" id="repeat_days" name="repeat_days" min="1" value={formData.repeat_days || ''} onChange={handleNumberChange} className={inputClass} placeholder="مثال: 7" />
                     </div>
                 )}
             </div>
 
-            {/* Description */}
-            <div>
-                <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                    توضیحات
-                </label>
-                <textarea
-                    id="description"
-                    name="description"
-                    rows={3}
-                    value={formData.description || ''}
-                    onChange={handleInputChange}
-                    className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                    placeholder="توضیحات یادآوری را وارد کنید..."
-                />
+            <div className="pt-2 border-t border-gray-100 dark:border-gray-800">
+                <label htmlFor="description" className={labelClass}>توضیحات</label>
+                <textarea id="description" name="description" rows={3} value={formData.description || ''} onChange={handleInputChange} className={inputClass} placeholder="توضیحات یادآوری را وارد کنید..." />
             </div>
 
-            {/* Form Actions */}
-            <div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
-                <button
-                    type="button"
-                    onClick={onCancel}
-                    className="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 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
-                >
+            <div className="flex justify-end gap-3 pt-4 border-t border-gray-100 dark:border-gray-800">
+                <button type="button" onClick={onCancel} className="px-5 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 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 transition-colors">
                     انصراف
                 </button>
-                <button
-                    type="submit"
-                    disabled={isLoading}
-                    className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
-                >
+                <button type="submit" disabled={isLoading} className="px-5 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/30 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20">
                     {isLoading ? 'در حال ذخیره...' : reminder ? 'به‌روزرسانی' : 'ایجاد'}
                 </button>
             </div>

components/admin/reminders/ReminderList.tsx

@@ -16,92 +16,89 @@ interface ReminderListProps {
 export default function ReminderList({ reminders, packageName, onEdit, onDelete, isLoading }: ReminderListProps) {
     if (isLoading) {
         return (
-            <div className="flex justify-center items-center py-12">
-                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
+            <div className="flex justify-center items-center py-16">
+                <div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
             </div>
         );
     }
 
     if (!reminders || reminders.length === 0) {
         return (
-            <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow transition-colors">
-                <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-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
+                    <BellIcon className="h-6 w-6 text-gray-400" />
+                </div>
+                <p className="text-gray-500 dark:text-gray-400 text-sm">هیچ یادآوری برای پکیج {packageName} یافت نشد</p>
             </div>
         );
     }
 
-    // Sort reminders by time (most recent first)
     const sortedReminders = [...reminders].sort((a, b) =>
         new Date(a.time).getTime() - new Date(b.time).getTime()
     );
 
     return (
-        <div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg transition-colors">
-            <div className="px-4 py-5 sm:px-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
+        <div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
+            <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
+                <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
                     یادآوری‌های پکیج {packageName}
                 </h3>
             </div>
             <ul className="divide-y divide-gray-200 dark:divide-gray-800">
                 {sortedReminders.map((reminder) => (
-                    <li key={reminder.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
-                        <div className="flex items-center justify-between">
+                    <li key={reminder.id} className="px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
+                        <div className="flex items-start justify-between gap-4">
                             <div className="flex-1 min-w-0">
-                                <div className="flex items-center justify-between">
-                                    <div className="flex items-center space-x-2 space-x-reverse">
+                                <div className="flex items-center gap-2">
+                                    <div className={`h-8 w-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                                        reminder.type === 'motivate'
+                                            ? 'bg-yellow-100 dark:bg-yellow-500/10'
+                                            : 'bg-indigo-100 dark:bg-indigo-500/10'
+                                    }`}>
                                         {reminder.type === 'motivate' ? (
-                                            <SparklesIcon className="h-5 w-5 text-yellow-500" />
+                                            <SparklesIcon className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
                                         ) : (
-                                            <BellIcon className="h-5 w-5 text-indigo-500" />
+                                            <BellIcon className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
                                         )}
-                                        <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                    </div>
+                                    <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">
                                         {reminder.title}
                                     </p>
-                                    </div>
-                                    <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
+                                    <span className="px-2 py-0.5 text-xs font-semibold rounded-lg bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                         {getReminderTypeLabel(reminder.type)}
                                     </span>
                                 </div>
 
                                 {reminder.description && (
-                                    <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                                    <p className="mt-2 text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                                         {reminder.description}
                                     </p>
                                 )}
 
-                                <div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-3">
-                                    <div className="text-xs text-gray-500 dark:text-gray-400">
-                                        <span className="font-medium">زمان:</span> {formatDate(reminder.time)} {formatTime(reminder.time)}
-                                    </div>
-                                    
-                                    <div className="text-xs text-gray-500 dark:text-gray-400">
-                                        <span className="font-medium">تکرار:</span> {reminder.repeatable ? 'فعال' : 'غیرفعال'}
-                                    </div>
-                                    
+                                <div className="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
+                                    <span>زمان: {formatDate(reminder.time)} {formatTime(reminder.time)}</span>
+                                    <span>تکرار: {reminder.repeatable ? 'فعال' : 'غیرفعال'}</span>
                                     {reminder.repeatable && reminder.repeat_days && (
-                                        <div className="text-xs text-gray-500 dark:text-gray-400">
-                                            <span className="font-medium">فاصله تکرار:</span> هر {reminder.repeat_days} روز
-                                        </div>
+                                        <span>هر {reminder.repeat_days} روز</span>
                                     )}
                                 </div>
-                                
-                                <div className="mt-2 text-xs text-gray-400 dark:text-gray-500">
-                                    آخرین به‌روزرسانی: {formatDate(reminder.updated_at)}
-                                </div>
+                                <p className="mt-2 text-xs text-gray-400 dark:text-gray-500">
+                                    {formatDate(reminder.updated_at)}
+                                </p>
                             </div>
 
-                            <div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
+                            <div className="flex items-center gap-1 flex-shrink-0">
                                 <button
                                     onClick={() => onEdit(reminder)}
-                                    className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-950/40 transition-colors"
+                                    className="p-2 rounded-lg text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-colors"
                                 >
-                                    <PencilIcon className="h-5 w-5" />
+                                    <PencilIcon className="h-4 w-4" />
                                 </button>
                                 <button
                                     onClick={() => onDelete(reminder)}
-                                    className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                                    className="p-2 rounded-lg text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
                                 >
-                                    <TrashIcon className="h-5 w-5" />
+                                    <TrashIcon className="h-4 w-4" />
                                 </button>
                             </div>
                         </div>

components/admin/users/PackageSelector.tsx

@@ -3,6 +3,7 @@
 import { PackageName } from '@/types/package';
 import { useState, useEffect } from 'react';
 import { packagesApi } from '@/lib/api/packages';
+import { CubeIcon } from '@heroicons/react/24/outline';
 
 interface PackageSelectorProps {
     token: string;
@@ -25,7 +26,6 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
             const data = await packagesApi.getAllPackages(token);
             setPackages(data);
 
-            // Select first package if none selected
             if (data.length > 0 && !selectedPackage) {
                 onPackageChange(data[0].name!);
             }
@@ -36,32 +36,73 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
         }
     };
 
-    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        onPackageChange(e.target.value);
-    };
+    if (loading) {
+        return (
+            <div className="bg-white dark:bg-gray-900 p-4 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm mb-6">
+                <div className="animate-pulse flex items-center gap-3">
+                    <div className="h-10 w-10 bg-gray-200 dark:bg-gray-800 rounded-xl" />
+                    <div className="flex-1">
+                        <div className="h-3 w-24 bg-gray-200 dark:bg-gray-800 rounded mb-2" />
+                        <div className="h-4 w-48 bg-gray-200 dark:bg-gray-800 rounded" />
+                    </div>
+                </div>
+            </div>
+        );
+    }
 
     return (
-        <div className="bg-white dark:bg-gray-900 p-4 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 mb-6">
-            <label htmlFor="package-select" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                انتخاب پکیج
+        <div className="mb-6">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                پکیج را انتخاب کنید
             </label>
-            <select
-                id="package-select"
-                value={selectedPackage || ''}
-                onChange={handleChange}
-                disabled={loading || isLoading}
-                className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50 transition-colors"
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                {packages.map((pkg) => {
+                    const isSelected = selectedPackage === pkg.name;
+                    return (
+                        <button
+                            key={pkg.id}
+                            onClick={() => onPackageChange(pkg.name!)}
+                            disabled={isLoading}
+                            className={`flex items-center gap-3 p-4 rounded-2xl text-right transition-all duration-150 ${
+                                isSelected
+                                    ? 'bg-indigo-50 dark:bg-indigo-500/10 ring-2 ring-indigo-600 dark:ring-indigo-400 shadow-sm'
+                                    : 'bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 hover:ring-gray-300 dark:hover:ring-gray-700 hover:shadow-sm'
+                            } disabled:opacity-50`}
                         >
-                {loading ? (
-                    <option>در حال بارگذاری...</option>
+                            {pkg.image && typeof pkg.image === 'string' ? (
+                                <img src={pkg.image} alt={pkg.title || ''} className="h-10 w-10 rounded-xl object-cover flex-shrink-0" />
                             ) : (
-                    packages.map((pkg) => (
-                        <option key={pkg.id} value={pkg.name || ''}>
-                            {pkg.title} ({pkg.name})
-                        </option>
-                    ))
+                                <div className={`h-10 w-10 rounded-xl flex items-center justify-center flex-shrink-0 ${
+                                    isSelected
+                                        ? 'bg-indigo-100 dark:bg-indigo-500/15'
+                                        : 'bg-gray-100 dark:bg-gray-800'
+                                }`}>
+                                    <CubeIcon className={`h-5 w-5 ${isSelected ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-400 dark:text-gray-500'}`} />
+                                </div>
                             )}
-            </select>
+                            <div className="min-w-0">
+                                <p className={`text-sm font-semibold truncate ${
+                                    isSelected ? 'text-indigo-700 dark:text-indigo-400' : 'text-gray-900 dark:text-gray-100'
+                                }`}>
+                                    {pkg.title || 'بدون عنوان'}
+                                </p>
+                                <p className="text-xs text-gray-500 dark:text-gray-400 truncate" dir="ltr">
+                                    {pkg.name}
+                                </p>
+                            </div>
+                            {isSelected && (
+                                <div className="mr-auto flex-shrink-0">
+                                    <div className="h-5 w-5 rounded-full bg-indigo-600 dark:bg-indigo-400 flex items-center justify-center">
+                                        <svg className="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor">
+                                            <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                                        </svg>
+                                    </div>
+                                </div>
+                            )}
+                        </button>
+                    );
+                })}
+            </div>
         </div>
     );
 }

components/admin/users/UserEditForm.tsx

@@ -22,106 +22,65 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
-
-        // Only send changed fields so we never overwrite values with empty ones
         const payload: UpdateUserProfileData = {};
         if (formData.first_name !== (user.first_name || '')) payload.first_name = formData.first_name;
         if (formData.last_name !== (user.last_name || '')) payload.last_name = formData.last_name;
         if (formData.email !== (user.email || '')) payload.email = formData.email;
         if (formData.mobile !== (user.mobile || '')) payload.mobile = formData.mobile;
         if (formData.avatar) payload.avatar = formData.avatar;
-
         onSubmit(payload);
     };
 
-    const inputClass =
-        'block w-full px-3 py-2 border text-slate-900 dark:text-gray-100 border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-800 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors';
+    const inputClass = 'block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/60 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 dark:focus:border-indigo-400 transition-colors';
+    const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';
 
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 dark:bg-black/60 p-4">
-            <div className="bg-white dark:bg-gray-900 rounded-xl shadow-xl ring-1 ring-gray-200 dark:ring-gray-800 w-full max-w-lg" dir="rtl">
+            <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-xl ring-1 ring-gray-200 dark:ring-gray-800 w-full max-w-lg" dir="rtl">
                 <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800">
-                    <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">ویرایش اطلاعات کاربر</h3>
-                    <button
-                        onClick={onCancel}
-                        className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors"
-                        type="button"
-                    >
+                    <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">ویرایش اطلاعات کاربر</h3>
+                    <button onClick={onCancel} className="p-2 rounded-lg text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" type="button">
                         <XMarkIcon className="h-5 w-5" />
                     </button>
                 </div>
 
-                <form onSubmit={handleSubmit} className="px-6 py-4 space-y-4">
+                <form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                         <div>
-                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">نام</label>
-                            <input
-                                type="text"
-                                className={inputClass}
-                                value={formData.first_name || ''}
-                                onChange={(e) => setFormData({ ...formData, first_name: e.target.value })}
-                            />
+                            <label className={labelClass}>نام</label>
+                            <input type="text" className={inputClass} value={formData.first_name || ''} onChange={(e) => setFormData({ ...formData, first_name: e.target.value })} />
                         </div>
                         <div>
-                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">نام خانوادگی</label>
-                            <input
-                                type="text"
-                                className={inputClass}
-                                value={formData.last_name || ''}
-                                onChange={(e) => setFormData({ ...formData, last_name: e.target.value })}
-                            />
+                            <label className={labelClass}>نام خانوادگی</label>
+                            <input type="text" className={inputClass} value={formData.last_name || ''} onChange={(e) => setFormData({ ...formData, last_name: e.target.value })} />
                         </div>
                     </div>
 
                     <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">ایمیل</label>
-                        <input
-                            type="email"
-                            dir="ltr"
-                            className={inputClass}
-                            value={formData.email || ''}
-                            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-                        />
+                        <label className={labelClass}>ایمیل</label>
+                        <input type="email" dir="ltr" className={inputClass} value={formData.email || ''} onChange={(e) => setFormData({ ...formData, email: e.target.value })} />
                     </div>
 
                     <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">شماره موبایل</label>
-                        <input
-                            type="text"
-                            dir="ltr"
-                            placeholder="09xxxxxxxxx"
-                            className={inputClass}
-                            value={formData.mobile || ''}
-                            onChange={(e) => setFormData({ ...formData, mobile: e.target.value })}
-                        />
+                        <label className={labelClass}>شماره موبایل</label>
+                        <input type="text" dir="ltr" placeholder="09xxxxxxxxx" className={inputClass} value={formData.mobile || ''} onChange={(e) => setFormData({ ...formData, mobile: e.target.value })} />
                     </div>
 
                     <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">آواتار</label>
+                        <label className={labelClass}>آواتار</label>
                         <input
                             type="file"
                             accept="image/*"
-                            className="block w-full text-sm text-gray-700 dark:text-gray-300 file:ml-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 dark:file:bg-indigo-950/40 dark:file:text-indigo-300 dark:hover:file:bg-indigo-900/40"
-                            onChange={(e) =>
-                                setFormData({ ...formData, avatar: e.target.files?.[0] || null })
-                            }
+                            className="block w-full text-sm text-gray-600 dark:text-gray-400 file:ml-0 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 dark:file:bg-indigo-500/10 dark:file:text-indigo-400 dark:hover:file:bg-indigo-500/15 transition-colors"
+                            onChange={(e) => setFormData({ ...formData, avatar: e.target.files?.[0] || null })}
                         />
                     </div>
 
-                    <div className="flex justify-end gap-2 pt-2">
-                        <button
-                            type="button"
-                            onClick={onCancel}
-                            disabled={isLoading}
-                            className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md 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 disabled:opacity-50 transition-colors"
-                        >
+                    <div className="flex justify-end gap-3 pt-3 border-t border-gray-100 dark:border-gray-800">
+                        <button type="button" onClick={onCancel} disabled={isLoading} className="px-5 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 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 disabled:opacity-50 transition-colors">
                             انصراف
                         </button>
-                        <button
-                            type="submit"
-                            disabled={isLoading}
-                            className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-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"
-                        >
+                        <button type="submit" disabled={isLoading} className="px-5 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/30 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20">
                             {isLoading ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
                         </button>
                     </div>

components/admin/users/UserInfo.tsx

@@ -9,67 +9,104 @@ interface UserInfoProps {
 }
 
 export default function UserInfo({ user }: UserInfoProps) {
+    const fullName = getFullName(user);
+    const initials = fullName
+        .split(' ')
+        .map((w) => w[0])
+        .slice(0, 2)
+        .join('')
+        .toUpperCase();
+
+    const stats = [
+        {
+            label: 'کیف پول',
+            value: `${formatPrice(user.wallet)} تومان`,
+            icon: WalletIcon,
+            color: 'bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+        },
+        {
+            label: 'عضویت',
+            value: formatDate(user.created_at),
+            icon: CalendarIcon,
+            color: 'bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400',
+        },
+    ];
+
     return (
-        <div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl mb-6">
-            <div className="px-4 py-5 sm:px-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
-                    اطلاعات کاربر
+        <div className="bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm overflow-hidden mb-6">
+            {/* Profile Header */}
+            <div className="bg-gradient-to-l from-indigo-600 to-indigo-700 px-6 py-5">
+                <div className="flex items-center gap-4">
+                    <div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center text-white font-bold text-lg flex-shrink-0">
+                        {initials || <UserIcon className="h-6 w-6" />}
+                    </div>
+                    <div className="min-w-0">
+                        <h3 className="text-lg font-bold text-white truncate">
+                            {fullName || 'کاربر بدون نام'}
                         </h3>
+                        <div className="flex items-center gap-3 mt-1">
+                            {user.email && (
+                                <span className="text-sm text-indigo-100 flex items-center gap-1" dir="ltr">
+                                    <EnvelopeIcon className="h-3.5 w-3.5" />
+                                    {user.email}
+                                </span>
+                            )}
+                            {user.mobile && (
+                                <span className="text-sm text-indigo-100 flex items-center gap-1" dir="ltr">
+                                    <PhoneIcon className="h-3.5 w-3.5" />
+                                    {user.mobile}
+                                </span>
+                            )}
                         </div>
-            <div className="border-t border-gray-200 dark:border-gray-800">
-                <dl>
-                    <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">نام کامل</dt>
-                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
-                            <UserIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
-                            {getFullName(user)}
-                        </dd>
                     </div>
-                    <div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">ایمیل</dt>
-                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
-                            <EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
-                            {getEmail(user.email)}
-                        </dd>
                 </div>
-                    <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">شماره موبایل</dt>
-                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
-                            <PhoneIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
-                            {getMobile(user.mobile)}
-                        </dd>
             </div>
-                    <div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">کیف پول</dt>
-                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
-                            <WalletIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
-                            {formatPrice(user.wallet)} تومان
-                        </dd>
+
+            {/* Stats Row */}
+            <div className="grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-800 border-b border-gray-200 dark:border-gray-800">
+                {stats.map((stat) => (
+                    <div key={stat.label} className="px-5 py-4">
+                        <div className="flex items-center gap-2 mb-1">
+                            <div className={`h-7 w-7 rounded-lg flex items-center justify-center ${stat.color}`}>
+                                <stat.icon className="h-3.5 w-3.5" />
                             </div>
-                    <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                        <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">تاریخ عضویت</dt>
-                        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
-                            <CalendarIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
-                            {formatDate(user.created_at)}
-                        </dd>
+                            <span className="text-xs text-gray-500 dark:text-gray-400">{stat.label}</span>
                         </div>
+                        <p className="text-sm font-semibold text-gray-900 dark:text-gray-100" dir="ltr">{stat.value}</p>
+                    </div>
+                ))}
+            </div>
+
+            {/* Details Grid */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-px bg-gray-200 dark:bg-gray-800">
+                <InfoRow icon={UserIcon} label="نام کامل" value={getFullName(user)} />
+                <InfoRow icon={EnvelopeIcon} label="ایمیل" value={getEmail(user.email)} dir="ltr" />
+                <InfoRow icon={PhoneIcon} label="شماره موبایل" value={getMobile(user.mobile)} dir="ltr" />
+                <InfoRow icon={WalletIcon} label="موجودی کیف پول" value={`${formatPrice(user.wallet)} تومان`} />
                 {user.birthday && (
-                        <div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                            <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">تاریخ تولد</dt>
-                            <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
-                                {formatDate(user.birthday)}
-                            </dd>
-                        </div>
+                    <InfoRow icon={CalendarIcon} label="تاریخ تولد" value={formatDate(user.birthday)} />
                 )}
                 {user.gender && (
-                        <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                            <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">جنسیت</dt>
-                            <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
-                                {user.gender === 'male' ? 'مرد' : user.gender === 'female' ? 'زن' : user.gender}
-                            </dd>
-                        </div>
+                    <InfoRow
+                        icon={UserIcon}
+                        label="جنسیت"
+                        value={user.gender === 'male' ? 'مرد' : user.gender === 'female' ? 'زن' : user.gender}
+                    />
                 )}
-                </dl>
+            </div>
+        </div>
+    );
+}
+
+function InfoRow({ icon: Icon, label, value, dir }: { icon: React.ElementType; label: string; value: string; dir?: string }) {
+    return (
+        <div className="bg-white dark:bg-gray-900 px-5 py-3.5 flex items-center gap-3">
+            <div className="h-7 w-7 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center flex-shrink-0">
+                <Icon className="h-3.5 w-3.5 text-gray-400 dark:text-gray-500" />
+            </div>
+            <div className="min-w-0">
+                <p className="text-xs text-gray-500 dark:text-gray-400">{label}</p>
+                <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" dir={dir}>{value}</p>
             </div>
         </div>
     );

components/admin/users/UserProducts.tsx

@@ -29,8 +29,8 @@ export default function UserProducts({
             return {
                 isActive: false,
                 text: 'نامشخص',
-                color: 'text-gray-600',
-                icon: XCircleIcon
+                color: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400',
+                dotColor: 'bg-gray-400',
             };
         }
 
@@ -41,17 +41,17 @@ export default function UserProducts({
         return {
             isActive,
             text: isActive ? 'فعال' : 'منقضی شده',
-            color: isActive ? 'text-green-600' : 'text-red-600',
-            icon: isActive ? CheckCircleIcon : XCircleIcon
+            color: isActive
+                ? 'bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400'
+                : 'bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400',
+            dotColor: isActive ? 'bg-green-500' : 'bg-red-500',
         };
     };
 
-    // Get count of subscriptions for a specific product
     const getSubscriptionCount = (productId: number): number => {
         return products.filter(p => p.id === productId).length;
     };
 
-    // Group products by package
     const productsByPackage = products.reduce((acc, product) => {
         const packageName = product.package_name?.name || 'نامشخص';
         if (!acc[packageName]) {
@@ -67,77 +67,62 @@ export default function UserProducts({
     };
 
     return (
-        <div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl">
-            <div className="px-4 py-5 sm:px-6">
-                <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
+        <div className="bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm overflow-hidden">
+            <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
+                <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
                     اشتراک‌های کاربر
                 </h3>
             </div>
 
-            {/* Current Subscriptions grouped by package */}
-            <div className="border-t border-gray-200 dark:border-gray-800">
+            {/* Current Subscriptions */}
+            <div className="divide-y divide-gray-200 dark:divide-gray-800">
                 {Object.keys(productsByPackage).length > 0 ? (
                     Object.entries(productsByPackage).map(([packageName, packageProducts]) => (
-                        <div key={packageName} className="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
-                            <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-2">
-                                <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                        <div key={packageName}>
+                            <div className="px-5 py-2.5 bg-gray-50 dark:bg-gray-800/60">
+                                <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
                                     پکیج: {packageName}
-                                </h4>
+                                </span>
                             </div>
-                            <ul className="divide-y divide-gray-200 dark:divide-gray-800">
+                            <ul className="divide-y divide-gray-100 dark:divide-gray-800/60">
                                 {packageProducts.map((product) => {
                                     const status = getSubscriptionStatus(product);
-                                    const StatusIcon = status.icon;
                                     const subscriptionCount = getSubscriptionCount(product.id);
 
                                     return (
-                                        <li key={`${product.id}-${product.pivot?.purchase_token || Math.random()}`} className="px-4 py-4 sm:px-6">
-                                            <div className="flex items-center justify-between">
-                                                <div className="flex-1">
-                                                    <div className="flex items-center justify-between">
-                                                        <div className="flex items-center space-x-2 space-x-reverse">
-                                                            <p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate">
+                                        <li key={`${product.id}-${product.pivot?.purchase_token || Math.random()}`} className="px-5 py-4">
+                                            <div className="flex items-start justify-between gap-4">
+                                                <div className="flex-1 min-w-0">
+                                                    <div className="flex items-center gap-2 flex-wrap">
+                                                        <p className="text-sm font-semibold text-indigo-600 dark:text-indigo-400">
                                                             {product.title || 'محصول'}
                                                         </p>
                                                         {subscriptionCount > 1 && (
-                                                                <span className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full">
-                                                                    {subscriptionCount} اشتراک
+                                                            <span className="px-2 py-0.5 text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-lg">
+                                                                ×{subscriptionCount}
                                                             </span>
                                                         )}
-                                                        </div>
-                                                        <div className="mr-2 flex-shrink-0 flex">
-                                                            <p className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${status.isActive ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'}`}>
-                                                                <StatusIcon className={`h-4 w-4 ml-1 ${status.color}`} />
+                                                        <span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 text-xs font-medium rounded-lg ${status.color}`}>
+                                                            <span className={`h-1.5 w-1.5 rounded-full ${status.dotColor}`} />
                                                             {status.text}
-                                                            </p>
+                                                        </span>
                                                     </div>
-                                                    </div>
-                                                    <div className="mt-2 sm:flex sm:justify-between">
-                                                        <div className="sm:flex">
-                                                            <p className="flex items-center text-sm text-gray-500 dark:text-gray-400">
-                                                                قیمت: {formatPrice(product.price)} تومان
-                                                            </p>
-                                                            <p className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0 sm:mr-6">
-                                                                نوع: {getProductTypeLabel(product.type)}
-                                                            </p>
+                                                    <div className="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
+                                                        <span>قیمت: {formatPrice(product.price)} تومان</span>
+                                                        <span>نوع: {getProductTypeLabel(product.type)}</span>
                                                         {product.pivot?.expire_at && (
-                                                                <p className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0 sm:mr-6">
-                                                                    تاریخ انقضا: {formatDate(product.pivot.expire_at)}
-                                                                </p>
+                                                            <span>انقضا: {formatDate(product.pivot.expire_at)}</span>
                                                         )}
                                                     </div>
-                                                        <div className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
+                                                </div>
                                                 <button
                                                     onClick={() => onUnsubscribe(product.id)}
                                                     disabled={isLoading}
-                                                                className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 disabled:opacity-50 transition-colors"
+                                                    className="flex-shrink-0 px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 hover:bg-red-100 dark:hover:bg-red-500/20 rounded-lg disabled:opacity-50 transition-colors"
                                                 >
                                                     لغو اشتراک
                                                 </button>
                                             </div>
-                                                    </div>
-                                                </div>
-                                            </div>
                                         </li>
                                     );
                                 })}
@@ -145,19 +130,22 @@ export default function UserProducts({
                         </div>
                     ))
                 ) : (
-                    <div className="px-4 py-5 sm:px-6 text-center text-gray-500 dark:text-gray-400">
-                        کاربر هیچ اشتراکی ندارد
+                    <div className="px-5 py-10 text-center">
+                        <div className="mx-auto h-10 w-10 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-2">
+                            <XCircleIcon className="h-5 w-5 text-gray-400" />
+                        </div>
+                        <p className="text-sm text-gray-500 dark:text-gray-400">کاربر هیچ اشتراکی ندارد</p>
                     </div>
                 )}
             </div>
 
             {/* Available Products for Subscription */}
             {availableProducts && availableProducts.length > 0 && selectedPackage && (
-                <div className="border-t border-gray-200 dark:border-gray-800 px-4 py-5 sm:px-6">
-                    <h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-3">
-                        افزودن اشتراک جدید برای پکیج {selectedPackage}
+                <div className="border-t border-gray-200 dark:border-gray-800 px-5 py-5">
+                    <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">
+                        افزودن اشتراک جدید
                     </h4>
-                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
                         {availableProducts.map((product) => {
                             const subscriptionCount = getSubscriptionCount(product.id);
 
@@ -166,24 +154,21 @@ export default function UserProducts({
                                     key={product.id}
                                     onClick={() => handleSubscribeClick(product.id)}
                                     disabled={isLoading}
-                                    className="relative block w-full border-2 border-indigo-200 dark:border-indigo-900/60 rounded-lg p-4 text-right hover:border-indigo-500 hover:bg-indigo-50 dark:hover:border-indigo-500 dark:hover:bg-indigo-950/40 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                                    className="flex items-center gap-3 p-3.5 border border-dashed border-indigo-200 dark:border-indigo-800/60 rounded-xl text-right hover:border-indigo-400 hover:bg-indigo-50 dark:hover:border-indigo-600 dark:hover:bg-indigo-500/5 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-150 group"
                                 >
-                                    <div className="flex items-start justify-between">
-                                        <div>
-                                            <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                    <div className="h-8 w-8 rounded-lg bg-indigo-100 dark:bg-indigo-500/15 flex items-center justify-center flex-shrink-0 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-500/25 transition-colors">
+                                        <PlusCircleIcon className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
+                                    </div>
+                                    <div className="min-w-0">
+                                        <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
                                             {product.title || 'محصول'}
                                         </p>
                                         {subscriptionCount > 0 && (
-                                                <p className="mt-1 text-xs text-amber-600 dark:text-amber-400">
-                                                    {subscriptionCount} اشتراک فعال دارد
+                                            <p className="text-xs text-amber-600 dark:text-amber-400">
+                                                {subscriptionCount} اشتراک فعال
                                             </p>
                                         )}
                                     </div>
-                                        <PlusCircleIcon className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
-                                    </div>
-                                    <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
-                                        برای افزودن اشتراک جدید کلیک کنید
-                                    </p>
                                 </button>
                             );
                         })}

components/admin/users/UserSearch.tsx

@@ -19,35 +19,45 @@ export default function UserSearch({ onSearch, isLoading }: UserSearchProps) {
     };
 
     return (
-        <form onSubmit={handleSubmit} className="mb-6">
-            <div className="flex gap-2">
-                <div className="flex-1">
-                    <label htmlFor="search" className="sr-only">
-                        جستجو با ایمیل یا شماره موبایل
+        <div className="bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm p-4 mb-6">
+            <form onSubmit={handleSubmit}>
+                <label htmlFor="user-search" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    جستجوی کاربر
                 </label>
-                    <div className="relative">
-                        <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                <div className="flex gap-2">
+                    <div className="flex-1 relative">
+                        <div className="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
                             <MagnifyingGlassIcon className="h-5 w-5 text-gray-400 dark:text-gray-500" />
                         </div>
                         <input
                             type="text"
-                            id="search"
-                            className="block w-full pr-10 pl-3 py-2 border text-slate-900 dark:text-gray-100 border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
-                            placeholder="جستجو با ایمیل یا شماره موبایل..."
+                            id="user-search"
+                            className="block w-full pr-11 pl-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/60 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:bg-white dark:focus:bg-gray-800 sm:text-sm transition-all duration-150"
+                            placeholder="ایمیل یا شماره موبایل کاربر را وارد کنید..."
                             value={searchTerm}
                             onChange={(e) => setSearchTerm(e.target.value)}
                             dir="rtl"
                         />
                     </div>
-                </div>
                     <button
                         type="submit"
                         disabled={isLoading || !searchTerm.trim()}
-                    className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                        className="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-150 shadow-sm shadow-indigo-500/20 whitespace-nowrap"
                     >
-                    {isLoading ? 'در حال جستجو...' : 'جستجو'}
+                        {isLoading ? (
+                            <>
+                                <div className="h-4 w-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                در حال جستجو
+                            </>
+                        ) : (
+                            <>
+                                <MagnifyingGlassIcon className="h-4 w-4" />
+                                جستجو
+                            </>
+                        )}
                     </button>
                 </div>
             </form>
+        </div>
     );
 }

lib/api/promotions.ts

@@ -2,9 +2,9 @@ import { apiClient } from './client';
 import { Promotion, CreatePromotionData, UpdatePromotionData, ApiResponse } from '@/types/promotion';
 
 export const promotionsApi = {
-    // Get all promotions
+    // Get all promotions for admin (includes inactive/expired ones)
     getPromotions: async (token: string): Promise<Promotion[]> => {
-        return apiClient.get<Promotion[]>('/promotions', token);
+        return apiClient.get<Promotion[]>('/admin/promotions', token);
     },
 
     // Get single promotion

lib/api/purchases.ts

@@ -0,0 +1,57 @@
+import { apiClient } from './client';
+import { Purchase, Paginated, PurchaseFilters } from '@/types/purchase';
+
+const buildPurchaseQuery = (filters: PurchaseFilters): string => {
+    const params = new URLSearchParams();
+
+    if (filters.email) params.append('email', filters.email);
+    if (filters.mobile) params.append('mobile', filters.mobile);
+    if (filters.package_name) params.append('package_name', filters.package_name);
+    if (filters.gateway) params.append('gateway', filters.gateway);
+    if (filters.status !== undefined && filters.status !== null) {
+        params.append('status', String(filters.status));
+    }
+    if (filters.product_id !== undefined && filters.product_id !== null) {
+        params.append('product_id', String(filters.product_id));
+    }
+    if (filters.per_page) params.append('per_page', String(filters.per_page));
+    if (filters.page) params.append('page', String(filters.page));
+
+    return params.toString();
+};
+
+export const purchasesApi = {
+    // List all subscription purchases with optional filters
+    getPurchases: async (filters: PurchaseFilters, token: string): Promise<Paginated<Purchase>> => {
+        const qs = buildPurchaseQuery(filters);
+        return apiClient.get<Paginated<Purchase>>(`/admin/purchases${qs ? `?${qs}` : ''}`, token);
+    },
+
+    // Fetch ALL purchases matching the filters (used by the accounting section).
+    // Learns the total from page 1, then fetches the remaining pages concurrently.
+    getAllPurchases: async (filters: PurchaseFilters, token: string): Promise<Purchase[]> => {
+        const perPage = filters.per_page || 500;
+        const first = await purchasesApi.getPurchases({ ...filters, per_page: perPage, page: 1 }, token);
+
+        const all = new Map<number, Purchase>();
+        first.data.forEach((p) => all.set(p.id, p));
+
+        const lastPage = first.last_page ?? 1;
+        if (lastPage > 1) {
+            const pages: number[] = [];
+            for (let page = 2; page <= lastPage; page++) pages.push(page);
+
+            // Fetch in small concurrent batches to avoid hammering the API
+            const batchSize = 4;
+            for (let i = 0; i < pages.length; i += batchSize) {
+                const batch = pages.slice(i, i + batchSize);
+                const results = await Promise.all(
+                    batch.map((page) => purchasesApi.getPurchases({ ...filters, per_page: perPage, page }, token))
+                );
+                results.forEach((res) => res.data.forEach((p) => all.set(p.id, p)));
+            }
+        }
+
+        return Array.from(all.values());
+    },
+};

lib/api/reminders.ts

@@ -21,6 +21,9 @@ export const remindersApi = {
             if (value !== null && value !== undefined) {
                 if (key === 'data' && typeof value === 'object') {
                     formData.append(key, JSON.stringify(value));
+                } else if (typeof value === 'boolean') {
+                    // Laravel's `boolean` rule rejects the strings "true"/"false"; send 1/0
+                    formData.append(key, value ? '1' : '0');
                 } else {
                     formData.append(key, String(value));
                 }
@@ -53,6 +56,9 @@ export const remindersApi = {
             if (value !== null && value !== undefined) {
                 if (key === 'data' && typeof value === 'object') {
                     formData.append(key, JSON.stringify(value));
+                } else if (typeof value === 'boolean') {
+                    // Laravel's `boolean` rule rejects the strings "true"/"false"; send 1/0
+                    formData.append(key, value ? '1' : '0');
                 } else {
                     formData.append(key, String(value));
                 }

lib/utils.ts

@@ -1,10 +1,50 @@
 import { User } from "@/types/user";
+import { Purchase } from "@/types/purchase";
 
 // Single source of truth for product type labels lives in types/product.ts
 // (kept in sync with the backend Product::TYPES). Re-exported here so existing
 // `@/lib/utils` imports keep working without a divergent (previously wrong) map.
 export { getProductTypeLabel } from "@/types/product";
 
+// قیمت نهایی خرید — shared between purchases table and accounting page.
+// اگر محصول تخفیف داشته باشد قیمت تخفیف‌خورده، در غیر این صورت قیمت اصلی، و در نهایت مبلغ تراکنش.
+export const getPurchaseFinalPrice = (purchase: Purchase): number => {
+    const product = purchase.product;
+
+    // اگر محصول تخفیف دارد، قیمت نهایی همان قیمت تخفیف‌خورده است
+    const discountedPrice = product?.discounted_price;
+    if (discountedPrice) {
+        const parsed = parseInt(discountedPrice.replace(/[^\d]/g, ''), 10);
+        if (!Number.isNaN(parsed) && parsed > 0) return parsed;
+    }
+
+    // بدون تخفیف → قیمت اصلی محصول
+    if (product?.price) return product.price;
+
+    // برگشت به مبلغ ثبت‌شدهٔ تراکنش وقتی محصول در دسترس نیست
+    return purchase.amount || 0;
+};
+
+// Parse a percentage input (e.g. "۱۵%" / "15") and clamp to 0–100.
+export const parseStoreRate = (value: string | number): number => {
+    if (value === null || value === undefined || value === '') return 0;
+    const str = String(value).replace(/[^\d]/g, '');
+    if (!str) return 0;
+    const n = parseInt(str, 10);
+    if (Number.isNaN(n)) return 0;
+    return Math.min(100, Math.max(0, n));
+};
+
+// Parse a non-negative integer input (e.g. transaction fee in Rial).
+export const parseFee = (value: string | number): number => {
+    if (value === null || value === undefined || value === '') return 0;
+    const str = String(value).replace(/[^\d]/g, '');
+    if (!str) return 0;
+    const n = parseInt(str, 10);
+    if (Number.isNaN(n)) return 0;
+    return Math.max(0, n);
+};
+
 export const formatDate = (dateString: string | null): string => {
     if (!dateString) return 'نامشخص';
 

middleware.ts

@@ -1,30 +0,0 @@
-import { NextResponse } from 'next/server';
-import type { NextRequest } from 'next/server';
-
-export function middleware(request: NextRequest) {
-    const token = request.cookies.get('auth_token')?.value ||
-        request.headers.get('authorization')?.replace('Bearer ', '');
-
-    const isAdminRoute = request.nextUrl.pathname.startsWith('/admin');
-    const isLoginRoute = request.nextUrl.pathname === '/admin/login';
-
-    // Allow access to login page without token
-    if (isLoginRoute) {
-        // If already logged in, redirect to dashboard
-        if (token) {
-            return NextResponse.redirect(new URL('/admin/dashboard', request.url));
-        }
-        return NextResponse.next();
-    }
-
-    // Protect admin routes
-    if (isAdminRoute && !token) {
-        return NextResponse.redirect(new URL('/admin/login', request.url));
-    }
-
-    return NextResponse.next();
-}
-
-export const config = {
-    matcher: '/admin/:path*',
-};

package-lock.json

@@ -8,7 +8,9 @@
       "name": "approagency admin pannel",
       "version": "0.1.0",
       "dependencies": {
+        "@daypicker/persian": "^10.0.1",
         "@heroicons/react": "^2.2.0",
+        "date-fns-jalali": "^4.4.0-0",
         "framer-motion": "^12.23.24",
         "lucide-react": "^0.552.0",
         "next": "16.0.1",
@@ -72,7 +74,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -282,6 +283,63 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.5.0.tgz",
+      "integrity": "sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==",
+      "license": "MIT"
+    },
+    "node_modules/@daypicker/persian": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@daypicker/persian/-/persian-10.0.1.tgz",
+      "integrity": "sha512-dRgANykUb+QOMaHNlYx1Vz9G4HXT2RC2SLQ6RBdIkGYImBHteFJ72zvISSEQ7EepcYpS4CGXL2D+P9f5ddbAZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "@daypicker/react": "10.0.1",
+        "date-fns-jalali": "4.1.0-0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@daypicker/persian/node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+      "license": "MIT"
+    },
+    "node_modules/@daypicker/react": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@daypicker/react/-/react-10.0.1.tgz",
+      "integrity": "sha512-lH4YQz4iMBWP8hsI1bD9Eg0T7t503IkSUR/WDGGkV5mKZvwVv+ukCkJz7yN+uVFBv7vHTK+ww7a5EvlkeFwPYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-day-picker": "10.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.7.0.tgz",
@@ -1550,9 +1608,8 @@
       "version": "19.2.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1613,7 +1670,6 @@
       "integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.3",
         "@typescript-eslint/types": "8.46.3",
@@ -2144,7 +2200,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2523,7 +2578,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2694,7 +2748,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -2758,6 +2812,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.4.0.tgz",
+      "integrity": "sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/date-fns-jalali": {
+      "version": "4.4.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.4.0-0.tgz",
+      "integrity": "sha512-4kei2k9Hr/fFvxNL7C6k+WeEYVehe5jO8zDcpREDDZ4ILa9af8tNmqNUJKAGJyPqKAHsdMmwY0jX5gTCiRWw4A==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -3091,7 +3161,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3277,7 +3346,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5454,7 +5522,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -5529,17 +5596,41 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-day-picker": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-10.0.1.tgz",
+      "integrity": "sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "date-fns": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -6226,7 +6317,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6389,7 +6479,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6665,7 +6754,6 @@
       "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

package.json

@@ -10,7 +10,9 @@
     "prepare": "git config core.hooksPath .githooks || true"
   },
   "dependencies": {
+    "@daypicker/persian": "^10.0.1",
     "@heroicons/react": "^2.2.0",
+    "date-fns-jalali": "^4.4.0-0",
     "framer-motion": "^12.23.24",
     "lucide-react": "^0.552.0",
     "next": "16.0.1",

types/purchase.ts

@@ -0,0 +1,95 @@
+import { PackageName } from './user';
+
+// Nested user on a purchase (subset of the full User model)
+export interface PurchaseUser {
+    id: number;
+    uuid: string;
+    first_name: string | null;
+    last_name: string | null;
+    full_name: string | null;
+    email: string | null;
+    mobile: string | null;
+}
+
+// Nested product on a purchase, with its package
+export interface PurchaseProduct {
+    id: number;
+    title: string | null;
+    price: number | null;
+    type: number | null;
+    package_name_id: number;
+    package_name: PackageName | null;
+    // Display-only pricing (متن نمایشی — بدون محاسبه)
+    discounted_price: string | null; // قیمت کلی تخفیف‌خورده
+    discount: string | null;         // تخفیف
+}
+
+// A purchase = a subscription transaction
+export interface Purchase {
+    id: number;
+    user_id: number;
+    product_id: number | null;
+    amount: number;
+    uuid: string;
+    status: number;
+    authority: string | null;
+    ref_id: string | null;
+    gateway: number;
+    created_at: string;
+    updated_at: string;
+    user: PurchaseUser | null;
+    product: PurchaseProduct | null;
+}
+
+// Laravel length-aware paginator envelope
+export interface Paginated<T> {
+    current_page: number;
+    data: T[];
+    last_page: number;
+    per_page: number;
+    total: number;
+    from: number | null;
+    to: number | null;
+    next_page_url: string | null;
+    prev_page_url: string | null;
+}
+
+// Payment source (gateway) — matches backend Transaction::GATEWAYS
+export const PAYMENT_GATEWAYS = {
+    asanpardakht: { code: 1, label: 'آسان‌پرداخت' },
+    zarinpal: { code: 2, label: 'زرین‌پال' },
+    digipay: { code: 3, label: 'دیجی‌پی' },
+    cafe: { code: 4, label: 'کافه بازار' },
+    myket: { code: 5, label: 'مایکت' },
+} as const;
+
+export type PaymentGatewayKey = keyof typeof PAYMENT_GATEWAYS;
+
+export const getGatewayLabel = (gateway: number | null): string => {
+    const found = Object.values(PAYMENT_GATEWAYS).find((g) => g.code === gateway);
+    return found ? found.label : 'نامشخص';
+};
+
+// Purchase status — matches backend Transaction::STATUSES
+export const PURCHASE_STATUSES: Record<number, string> = {
+    1: 'در انتظار پرداخت',
+    2: 'موفق',
+    3: 'مصرف‌شده',
+};
+
+export const getPurchaseStatusLabel = (status: number | null): string => {
+    if (status === null || status === undefined) return 'نامشخص';
+    return PURCHASE_STATUSES[status] || 'نامشخص';
+};
+
+// Filters sent to the purchases endpoint
+export interface PurchaseFilters {
+    email?: string;
+    mobile?: string;
+    package_name?: string;
+    gateway?: string; // gateway name key (e.g. "zarinpal")
+    status?: number;
+    product_id?: number; // filter by a specific product
+    per_page?: number;
+    page?: number;
+}