fix

The .gitignore previously contained the literal echo command instead of its
output, so appro-admin.zip slipped past it. Rewrite it properly and untrack
the build zip and tsconfig.tsbuildinfo (kept on disk, ignored going forward).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.githooks/pre-push

@@ -0,0 +1,22 @@
+#!/usr/bin/env bash
+# Runs on `git push`. If a tag ref is among what's being pushed, build locally
+# and deploy to the server. Normal branch pushes are untouched.
+set -euo pipefail
+
+deploy=0
+tag=""
+while read -r local_ref _local_sha _remote_ref _remote_sha; do
+  case "$local_ref" in
+    refs/tags/*)
+      deploy=1
+      tag="${local_ref#refs/tags/}"
+      ;;
+  esac
+done
+
+if [ "$deploy" = "1" ]; then
+  echo "→ Tag '$tag' is being pushed — building locally and deploying to the server…"
+  exec "$(git rev-parse --show-toplevel)/scripts/deploy.sh"
+fi
+
+exit 0

.gitignore

@@ -1 +1,35 @@
+# Next.js build output
+.next/
+.next/**
+.next/dev/lock
+out
+appro-admin
+appro-admin.zip
+*.zip
+
+# Dependencies
 node_modules/
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Debug logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.vscode/
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# TypeScript
+tsconfig.tsbuildinfo

app/admin/dashboard/page.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useAuth } from '@/contexts/AuthContext';
+import Link from 'next/link';
+import { UsersIcon, CubeIcon, TagIcon , BellIcon, GiftIcon, PowerIcon } 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 cards = [
+        {
+            href: '/admin/users',
+            title: 'مدیریت کاربران',
+            desc: 'مشاهده و مدیریت کاربران، اشتراک‌ها و تراکنش‌ها',
+            Icon: UsersIcon,
+            iconWrap: 'bg-indigo-100 text-indigo-600 dark:bg-indigo-500/15 dark:text-indigo-400',
+        },
+        {
+            href: '/admin/packages',
+            title: 'مدیریت پکیج‌ها',
+            desc: 'ایجاد و مدیریت پکیج‌های نرم‌افزار',
+            Icon: CubeIcon,
+            iconWrap: 'bg-green-100 text-green-600 dark:bg-green-500/15 dark:text-green-400',
+        },
+        {
+            href: '/admin/products',
+            title: 'مدیریت محصولات',
+            desc: 'ایجاد و مدیریت محصولات و اشتراک‌ها',
+            Icon: TagIcon,
+            iconWrap: 'bg-purple-100 text-purple-600 dark:bg-purple-500/15 dark:text-purple-400',
+        },
+        {
+            href: '/admin/reminders',
+            title: 'مدیریت یادآوری‌ها',
+            desc: 'ایجاد و مدیریت یادآوری‌ها و پیام‌های انگیزشی',
+            Icon: BellIcon,
+            iconWrap: 'bg-yellow-100 text-yellow-600 dark:bg-yellow-500/15 dark:text-yellow-400',
+        },
+        {
+            href: '/admin/promotions',
+            title: 'مدیریت تبلیغات',
+            desc: 'ایجاد و مدیریت تبلیغات، بنرها و اسلایدرها',
+            Icon: MegaphoneIcon,
+            iconWrap: 'bg-pink-100 text-pink-600 dark:bg-pink-500/15 dark:text-pink-400',
+        },
+        {
+            href: '/admin/referral-rewards',
+            title: 'پاداش‌های معرفی',
+            desc: 'اعطای اشتراک رایگان به کاربران واجد شرایط دعوت',
+            Icon: GiftIcon,
+            iconWrap: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400',
+        },
+    ];
+
+    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">
+                            داشبورد
+                        </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>
+                        </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 }) => (
+                                <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>
+                                        <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">
+                                            {desc}
+                                        </p>
+                                    </div>
+                                </Link>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

app/admin/layout.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { AuthProvider } from '@/contexts/AuthContext';
+import ThemeToggle from '@/components/ThemeToggle';
+
+export default function AdminLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <AuthProvider>
+            <div className="min-h-screen bg-gray-100 dark:bg-gray-950">
+                {children}
+                <ThemeToggle floating />
+            </div>
+        </AuthProvider>
+    );
+}

app/admin/login/page.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { useState } 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() {
+    const [auth, setAuth] = useState('');
+    const [password, setPassword] = useState('');
+    const [localError, setLocalError] = useState('');
+
+    const { login, isLoading, error, token } = useAuth();
+    const router = useRouter();
+
+    useEffect(() => {
+        if (token) {
+            router.push('/admin/dashboard');
+        }
+    }, [token, router]);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setLocalError('');
+
+        if (!auth || !password) {
+            setLocalError('Please fill in all fields');
+            return;
+        }
+
+        try {
+            await login({ auth, password });
+        } catch (err) {
+            // Error is handled by context
+        }
+    };
+
+    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>
+                        <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>
+                        <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>
+                                <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"
+                                    placeholder="example@email.com"
+                                    value={auth}
+                                    onChange={(e) => setAuth(e.target.value)}
+                                    disabled={isLoading}
+                                    dir="ltr"
+                                />
+                            </div>
+                            <div>
+                                <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                                    رمز عبور
+                                </label>
+                                <input
+                                    id="password"
+                                    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"
+                                    placeholder="••••••••"
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    disabled={isLoading}
+                                    dir="ltr"
+                                />
+                            </div>
+                        </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">
+                                    {localError || error}
+                                </h3>
+                            </div>
+                        )}
+
+                        <div>
+                            <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"
+                            >
+                                {isLoading ? 'کمی صبر کنید...' : 'ورود'}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+}

app/admin/packages/page.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+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 { PackageName, CreatePackageData, UpdatePackageData } from '@/types/package';
+import { PlusIcon } from '@heroicons/react/24/outline';
+
+export default function PackagesPage() {
+    const { token } = useAuth();
+    const [packages, setPackages] = useState<PackageName[]>([]);
+    const [selectedPackage, setSelectedPackage] = useState<PackageName | null>(null);
+    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();
+        }
+    }, [token]);
+
+    const loadPackages = async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const data = await packagesApi.getAllPackages(token!);
+            setPackages(data);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در دریافت لیست پکیج‌ها');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleCreate = () => {
+        setSelectedPackage(null);
+        setIsFormVisible(true);
+    };
+
+    const handleEdit = (pkg: PackageName) => {
+        setSelectedPackage(pkg);
+        setIsFormVisible(true);
+    };
+
+    const handleDelete = async (pkg: PackageName) => {
+        if (!confirm(`آیا از حذف پکیج "${pkg.title}" اطمینان دارید؟`)) {
+            return;
+        }
+
+        setIsLoading(true);
+        setError(null);
+        setSuccess(null);
+
+        try {
+            await packagesApi.deletePackage(pkg.name!, token!);
+            setSuccess('پکیج با موفقیت حذف شد');
+            await loadPackages();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در حذف پکیج');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    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('پکیج با موفقیت به‌روزرسانی شد');
+            } else {
+                // Create new package
+                await packagesApi.createPackage(data as CreatePackageData, token!);
+                setSuccess('پکیج با موفقیت ایجاد شد');
+            }
+
+            await loadPackages();
+            setIsFormVisible(false);
+            setSelectedPackage(null);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در ذخیره پکیج');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleCancel = () => {
+        setIsFormVisible(false);
+        setSelectedPackage(null);
+        setError(null);
+        setSuccess(null);
+    };
+
+    return (
+        <div className="p-6">
+            <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 && (
+                        <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"
+                        >
+                            <PlusIcon className="h-5 w-5 ml-2" />
+                            پکیج جدید
+                        </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>
+                )}
+
+                {/* Form or List */}
+                {isFormVisible ? (
+                    <PackageForm
+                        package={selectedPackage}
+                        onSubmit={handleSubmit}
+                        onCancel={handleCancel}
+                        isLoading={isLoading}
+                    />
+                ) : (
+                    <PackageList
+                        packages={packages}
+                        onEdit={handleEdit}
+                        onDelete={handleDelete}
+                        isLoading={isLoading}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}

app/admin/products/page.tsx

@@ -0,0 +1,253 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+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 { PackageName } from '@/types/package';
+import { Product, CreateProductData, UpdateProductData } from '@/types/product';
+import { PlusIcon } from '@heroicons/react/24/outline';
+
+export default function ProductsPage() {
+    const { token } = useAuth();
+    const [packages, setPackages] = useState<PackageName[]>([]);
+    const [selectedPackage, setSelectedPackage] = useState<PackageName | null>(null);
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    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;
+            loadPackages();
+        }
+    }, [token]);
+
+    const loadPackages = async () => {
+        setIsLoadingPackages(true);
+        setError(null);
+        try {
+            const data = await packagesApi.getAllPackages(token!);
+            setPackages(data);
+            if (data.length > 0 && !selectedPackage) {
+                setSelectedPackage(data[0]);
+            }
+        } catch (err) {
+            setError('خطا در دریافت لیست پکیج‌ها');
+        } finally {
+            setIsLoadingPackages(false);
+        }
+    };
+
+    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;
+        }
+
+        setIsLoading(true);
+        setError(null);
+        prevPackageRef.current = packageName;
+
+        try {
+            console.log('Loading products for package:', packageName);
+            const data = await productsApi.getProducts(packageName, token!);
+            setProducts(data);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در دریافت محصولات');
+        } finally {
+            setIsLoading(false);
+        }
+    }, [token]);
+
+    // Load products when package changes - with proper dependency
+    useEffect(() => {
+        if (selectedPackage?.name && token) {
+            loadProducts(selectedPackage.name);
+        } else {
+            setProducts([]);
+        }
+    }, [selectedPackage?.name, token, loadProducts]);
+
+    const handlePackageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const pkg = packages.find(p => p.name === e.target.value);
+        setSelectedPackage(pkg || null);
+        setIsFormVisible(false);
+        setSelectedProduct(null);
+        setError(null);
+        setSuccess(null);
+    };
+
+    const handleCreate = () => {
+        setSelectedProduct(null);
+        setIsFormVisible(true);
+    };
+
+    const handleEdit = (product: Product) => {
+        setSelectedProduct(product);
+        setIsFormVisible(true);
+    };
+
+    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
+            if (selectedPackage.name) {
+                prevPackageRef.current = null; // Reset ref to force load
+                await loadProducts(selectedPackage.name, true);
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در حذف محصول');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleSubmit = async (data: CreateProductData | UpdateProductData) => {
+        if (!selectedPackage) return;
+
+        setIsLoading(true);
+        setError(null);
+        setSuccess(null);
+
+        try {
+            if (selectedProduct) {
+                // Update existing product
+                await productsApi.updateProduct(selectedPackage.name!, selectedProduct.id, data, token!);
+                setSuccess('محصول با موفقیت به‌روزرسانی شد');
+            } else {
+                // Create new product
+                await productsApi.createProduct(selectedPackage.name!, data as CreateProductData, token!);
+                setSuccess('محصول با موفقیت ایجاد شد');
+            }
+
+            // Force reload products after create/update
+            if (selectedPackage.name) {
+                prevPackageRef.current = null; // Reset ref to force load
+                await loadProducts(selectedPackage.name, true);
+            }
+
+            setIsFormVisible(false);
+            setSelectedProduct(null);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در ذخیره محصول');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleCancel = () => {
+        setIsFormVisible(false);
+        setSelectedProduct(null);
+        setError(null);
+        setSuccess(null);
+    };
+
+    return (
+        <div className="p-6">
+            <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>
+
+                {/* Package Selector */}
+                <div className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow mb-6">
+                    <label htmlFor="package" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        انتخاب پکیج
+                    </label>
+                    <select
+                        id="package"
+                        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"
+                    >
+                        {isLoadingPackages ? (
+                            <option>در حال بارگذاری پکیج‌ها...</option>
+                        ) : (
+                            packages.map((pkg) => (
+                                <option key={pkg.id} value={pkg.name || ''}>
+                                    {pkg.title} ({pkg.name})
+                                </option>
+                            ))
+                        )}
+                    </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>
+                )}
+
+                {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 && (
+                            <div className="mb-4 flex justify-end">
+                                <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"
+                                >
+                                    <PlusIcon className="h-5 w-5 ml-2" />
+                                    محصول جدید
+                                </button>
+                            </div>
+                        )}
+
+                        {isFormVisible ? (
+                            <ProductForm
+                                product={selectedProduct}
+                                packageName={selectedPackage.name!}
+                                onSubmit={handleSubmit}
+                                onCancel={handleCancel}
+                                isLoading={isLoading}
+                            />
+                        ) : (
+                            <ProductList
+                                products={products}
+                                packageName={selectedPackage.name!}
+                                onEdit={handleEdit}
+                                onDelete={handleDelete}
+                                isLoading={isLoading}
+                            />
+                        )}
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}

app/admin/promotions/page.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+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 { Promotion, CreatePromotionData, UpdatePromotionData } from '@/types/promotion';
+import { PlusIcon } from '@heroicons/react/24/outline';
+
+export default function PromotionsPage() {
+    const { token } = useAuth();
+    const [promotions, setPromotions] = useState<Promotion[]>([]);
+    const [selectedPromotion, setSelectedPromotion] = useState<Promotion | null>(null);
+    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;
+            loadPromotions();
+        }
+    }, [token]);
+
+    const loadPromotions = async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const data = await promotionsApi.getPromotions(token!);
+            setPromotions(data);
+        } catch (err) {
+            setError('خطا در دریافت لیست تبلیغات');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleCreate = () => {
+        setSelectedPromotion(null);
+        setIsFormVisible(true);
+    };
+
+    const handleEdit = (promotion: Promotion) => {
+        setSelectedPromotion(promotion);
+        setIsFormVisible(true);
+    };
+
+    const handleDelete = async (promotion: Promotion) => {
+        if (!confirm(`آیا از حذف تبلیغ "${promotion.title || 'بدون عنوان'}" اطمینان دارید؟`)) {
+            return;
+        }
+
+        setIsLoading(true);
+        setError(null);
+        setSuccess(null);
+
+        try {
+            await promotionsApi.deletePromotion(promotion.id, token!);
+            setSuccess('تبلیغ با موفقیت حذف شد');
+            await loadPromotions();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در حذف تبلیغ');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    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 ? 'فعال' : 'غیرفعال'} شد`);
+            await loadPromotions();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در تغییر وضعیت تبلیغ');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    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('تبلیغ با موفقیت به‌روزرسانی شد');
+            } else {
+                // Create new promotion
+                await promotionsApi.createPromotion(data as CreatePromotionData, token!);
+                setSuccess('تبلیغ با موفقیت ایجاد شد');
+            }
+
+            await loadPromotions();
+            setIsFormVisible(false);
+            setSelectedPromotion(null);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در ذخیره تبلیغ');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleCancel = () => {
+        setIsFormVisible(false);
+        setSelectedPromotion(null);
+        setError(null);
+        setSuccess(null);
+    };
+
+    return (
+        <div className="p-6">
+            <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 && (
+                        <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"
+                        >
+                            <PlusIcon className="h-5 w-5 ml-2" />
+                            تبلیغ جدید
+                        </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>
+                )}
+
+                {/* Form or List */}
+                {isFormVisible ? (
+                    <PromotionForm
+                        promotion={selectedPromotion}
+                        onSubmit={handleSubmit}
+                        onCancel={handleCancel}
+                        isLoading={isLoading}
+                    />
+                ) : (
+                    <PromotionList
+                        promotions={promotions}
+                        onEdit={handleEdit}
+                        onDelete={handleDelete}
+                        onToggleActive={handleToggleActive}
+                        isLoading={isLoading}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}

app/admin/referral-rewards/page.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+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 { ReferralRewardUser } from '@/types/referral';
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
+
+export default function ReferralRewardsPage() {
+    const { token } = useAuth();
+    const [users, setUsers] = useState<ReferralRewardUser[]>([]);
+    const [subscriptionTarget, setSubscriptionTarget] = useState(0);
+    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);
+
+    useEffect(() => {
+        if (token && !initialLoadRef.current) {
+            initialLoadRef.current = true;
+            loadRewards();
+        }
+    }, [token]);
+
+    const loadRewards = async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const data = await referralApi.getPendingRewards(token!);
+            setUsers(data.data || []);
+            setSubscriptionTarget(data.subscription_target || 0);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در دریافت لیست پاداش‌های معرفی');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleFulfill = async (user: ReferralRewardUser) => {
+        if (!confirm(`آیا از اعطای یک ماه اشتراک رایگان به «${user.name || user.mobile || user.email}» اطمینان دارید؟`)) {
+            return;
+        }
+
+        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
+            setUsers((prev) => prev.filter((u) => u.id !== user.id));
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در اعطای اشتراک رایگان');
+        } finally {
+            setFulfillingId(null);
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="p-6">
+            <div className="max-w-7xl mx-auto">
+                <div className="flex justify-between items-center mb-6">
+                    <div>
+                        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+                            پاداش‌های معرفی
+                        </h1>
+                        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                            کاربرانی که به حد نصاب دعوت موفق رسیده‌اند و هنوز اشتراک رایگان دریافت نکرده‌اند.
+                        </p>
+                    </div>
+                    <button
+                        onClick={loadRewards}
+                        disabled={isLoading}
+                        className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
+                    >
+                        <ArrowPathIcon className={`h-5 w-5 ml-2 ${isLoading ? 'animate-spin' : ''}`} />
+                        بروزرسانی
+                    </button>
+                </div>
+
+                {/* 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>
+                )}
+
+                {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>
+                ) : (
+                    <ReferralList
+                        users={users}
+                        subscriptionTarget={subscriptionTarget}
+                        onFulfill={handleFulfill}
+                        isLoading={isLoading}
+                        fulfillingId={fulfillingId}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}

app/admin/reminders/page.tsx

@@ -0,0 +1,247 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+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 { PackageName } from '@/types/package';
+import { Reminder, CreateReminderData, UpdateReminderData } from '@/types/reminder';
+import { PlusIcon } from '@heroicons/react/24/outline';
+
+export default function RemindersPage() {
+    const { token } = useAuth();
+    const [packages, setPackages] = useState<PackageName[]>([]);
+    const [selectedPackage, setSelectedPackage] = useState<PackageName | null>(null);
+    const [reminders, setReminders] = useState<Reminder[]>([]);
+    const [selectedReminder, setSelectedReminder] = useState<Reminder | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    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;
+            loadPackages();
+        }
+    }, [token]);
+
+    const loadPackages = async () => {
+        setIsLoadingPackages(true);
+        setError(null);
+        try {
+            const data = await packagesApi.getAllPackages(token!);
+            setPackages(data);
+            if (data.length > 0 && !selectedPackage) {
+                setSelectedPackage(data[0]);
+            }
+        } catch (err) {
+            setError('خطا در دریافت لیست پکیج‌ها');
+        } finally {
+            setIsLoadingPackages(false);
+        }
+    };
+
+    const loadReminders = useCallback(async (packageName: string, force = false) => {
+        if (!force && prevPackageRef.current === packageName) {
+            return;
+        }
+        
+        setIsLoading(true);
+        setError(null);
+        prevPackageRef.current = packageName;
+        
+        try {
+            const data = await remindersApi.getReminders(packageName, token!);
+            setReminders(data);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در دریافت یادآوری‌ها');
+        } finally {
+            setIsLoading(false);
+        }
+    }, [token]);
+
+    // Load reminders when package changes
+    useEffect(() => {
+        if (selectedPackage?.name && token) {
+            loadReminders(selectedPackage.name);
+        } else {
+            setReminders([]);
+        }
+    }, [selectedPackage?.name, token, loadReminders]);
+
+    const handlePackageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const pkg = packages.find(p => p.name === e.target.value);
+        setSelectedPackage(pkg || null);
+        setIsFormVisible(false);
+        setSelectedReminder(null);
+        setError(null);
+        setSuccess(null);
+    };
+
+    const handleCreate = () => {
+        setSelectedReminder(null);
+        setIsFormVisible(true);
+    };
+
+    const handleEdit = (reminder: Reminder) => {
+        setSelectedReminder(reminder);
+        setIsFormVisible(true);
+    };
+
+    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('یادآوری با موفقیت حذف شد');
+            if (selectedPackage.name) {
+                prevPackageRef.current = null;
+                await loadReminders(selectedPackage.name, true);
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در حذف یادآوری');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleSubmit = async (data: CreateReminderData | UpdateReminderData) => {
+        if (!selectedPackage) return;
+
+        setIsLoading(true);
+        setError(null);
+        setSuccess(null);
+
+        try {
+            if (selectedReminder) {
+                // Update existing reminder
+                await remindersApi.updateReminder(selectedPackage.name!, selectedReminder.id, data, token!);
+                setSuccess('یادآوری با موفقیت به‌روزرسانی شد');
+            } else {
+                // Create new reminder
+                await remindersApi.createReminder(selectedPackage.name!, data as CreateReminderData, token!);
+                setSuccess('یادآوری با موفقیت ایجاد شد');
+            }
+
+            if (selectedPackage.name) {
+                prevPackageRef.current = null;
+                await loadReminders(selectedPackage.name, true);
+            }
+            
+            setIsFormVisible(false);
+            setSelectedReminder(null);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در ذخیره یادآوری');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleCancel = () => {
+        setIsFormVisible(false);
+        setSelectedReminder(null);
+        setError(null);
+        setSuccess(null);
+    };
+
+    return (
+        <div className="p-6">
+            <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>
+
+                {/* Package Selector */}
+                <div className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow mb-6 transition-colors">
+                    <label htmlFor="package" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        انتخاب پکیج
+                    </label>
+                    <select
+                        id="package"
+                        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"
+                    >
+                        {isLoadingPackages ? (
+                            <option>در حال بارگذاری پکیج‌ها...</option>
+                        ) : (
+                            packages.map((pkg) => (
+                                <option key={pkg.id} value={pkg.name || ''}>
+                                    {pkg.title} ({pkg.name})
+                                </option>
+                            ))
+                        )}
+                    </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>
+                )}
+
+                {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 && (
+                            <div className="mb-4 flex justify-end">
+                                <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"
+                                >
+                                    <PlusIcon className="h-5 w-5 ml-2" />
+                                    یادآوری جدید
+                                </button>
+                            </div>
+                        )}
+
+                        {isFormVisible ? (
+                            <ReminderForm
+                                reminder={selectedReminder}
+                                packageName={selectedPackage.name!}
+                                onSubmit={handleSubmit}
+                                onCancel={handleCancel}
+                                isLoading={isLoading}
+                            />
+                        ) : (
+                            <ReminderList
+                                reminders={reminders}
+                                packageName={selectedPackage.name!}
+                                onEdit={handleEdit}
+                                onDelete={handleDelete}
+                                isLoading={isLoading}
+                            />
+                        )}
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}

app/admin/users/page.tsx

@@ -0,0 +1,375 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { usersApi } from '@/lib/api/users';
+import { packagesApi } from '@/lib/api/packages';
+import UserSearch from '@/components/admin/users/UserSearch';
+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 { User, Product, UpdateUserProfileData } from '@/types/user';
+import { PackageName } from '@/types/package';
+import { formatPrice, getProductTypeLabel } from '@/lib/utils';
+import { PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline';
+
+export default function UsersPage() {
+    const { token } = useAuth();
+    const [user, setUser] = useState<User | null>(null);
+    const [products, setProducts] = useState<Product[]>([]);
+    const [packages, setPackages] = useState<PackageName[]>([]);
+    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);
+        }
+    }, [selectedPackage, token]);
+
+    const loadPackages = async () => {
+        try {
+            const data = await packagesApi.getAllPackages(token!);
+            setPackages(data);
+            if (data.length > 0 && !selectedPackage) {
+                setSelectedPackage(data[0].name!);
+            }
+        } catch (err) {
+            console.error('Failed to load packages:', err);
+            setError('خطا در دریافت لیست پکیج‌ها');
+        }
+    };
+
+    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);
+            setError('خطا در دریافت محصولات');
+        }
+    };
+
+    const handleSearch = async (searchTerm: string) => {
+        if (!selectedPackage) {
+            setError('لطفا ابتدا یک پکیج انتخاب کنید');
+            return;
+        }
+
+        setIsLoading(true);
+        setError(null);
+        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 : 'خطا در دریافت اطلاعات کاربر');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    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;
+        }
+
+        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
+            if (selectedPackage) {
+                const userData = await usersApi.getUserStatus(identifier, selectedPackage, token!);
+                setUser(userData);
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در افزودن اشتراک');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    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;
+        }
+
+        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
+            if (selectedPackage) {
+                const userData = await usersApi.getUserStatus(identifier, selectedPackage, token!);
+                setUser(userData);
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در لغو اشتراک');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleEditSubmit = async (data: UpdateUserProfileData) => {
+        if (!user) return;
+
+        const identifier = user.email || user.mobile;
+
+        if (!identifier) {
+            setError('کاربر فاقد ایمیل یا شماره موبایل است');
+            return;
+        }
+
+        setIsLoading(true);
+        setError(null);
+        setSuccess(null);
+
+        try {
+            await usersApi.updateUserProfile(identifier, data, token!);
+            setSuccess('اطلاعات کاربر با موفقیت به‌روزرسانی شد');
+            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!);
+                setUser(userData);
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در به‌روزرسانی اطلاعات کاربر');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleDeleteUser = async () => {
+        if (!user) return;
+
+        const identifier = user.email || user.mobile;
+
+        if (!identifier) {
+            setError('کاربر فاقد ایمیل یا شماره موبایل است');
+            return;
+        }
+
+        if (!confirm('آیا از حذف این کاربر اطمینان دارید؟ این عملیات قابل بازگشت نیست.')) {
+            return;
+        }
+
+        setIsLoading(true);
+        setError(null);
+        setSuccess(null);
+
+        try {
+            await usersApi.deleteUser(identifier, token!);
+            setSuccess('کاربر با موفقیت حذف شد');
+            setUser(null);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'خطا در حذف کاربر');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    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
+    // });
+
+    return (
+        <div className="p-6">
+            <div className="max-w-7xl mx-auto">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">
+                    مدیریت کاربران
+                </h1>
+
+                {/* Package Selector */}
+                {token && (
+                    <PackageSelector
+                        token={token}
+                        selectedPackage={selectedPackage}
+                        onPackageChange={handlePackageChange}
+                        isLoading={isLoading}
+                    />
+                )}
+
+                {/* 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">
+                                    <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>
+                    </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" />
+                                </svg>
+                            </div>
+                            <div className="mr-3">
+                                <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
+                            </div>
+                        </div>
+                    </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">
+                                    محصولات موجود در پکیج {selectedPackage}
+                                </h3>
+                            </div>
+                            <div className="border-t border-gray-200 dark:border-gray-800 px-4 py-5 sm:px-6">
+                                <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"
+                                        >
+                                            <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                                {product.title || 'محصول'}
+                                            </p>
+                                            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                                                قیمت: {formatPrice(product.price)} تومان
+                                            </p>
+                                            <p className="text-xs text-gray-500 dark:text-gray-400">
+                                                نوع: {getProductTypeLabel(product.type)}
+                                            </p>
+                                        </div>
+                                    ))}
+                                </div>
+                                <p className="mt-4 text-sm text-gray-500 dark:text-gray-400 text-center">
+                                    برای افزودن اشتراک به کاربر، ابتدا یک کاربر جستجو کنید
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* User Info */}
+                {user && (
+                    <>
+                        <UserInfo user={user} />
+                        <div className="flex justify-end gap-2 mb-6 -mt-2">
+                            <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"
+                            >
+                                <PencilSquareIcon className="h-5 w-5 ml-2" />
+                                ویرایش اطلاعات
+                            </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"
+                            >
+                                <TrashIcon className="h-5 w-5 ml-2" />
+                                حذف کاربر
+                            </button>
+                        </div>
+                    </>
+                )}
+
+                {/* User Products */}
+                {user && selectedPackage && (
+                    <UserProducts
+                        products={user.products || []}
+                        availableProducts={availableProducts}
+                        onSubscribe={handleSubscribe}
+                        onUnsubscribe={handleUnsubscribe}
+                        isLoading={isLoading}
+                        selectedPackage={selectedPackage}
+                    />
+                )}
+
+                {/* Edit User Modal */}
+                {user && isEditing && (
+                    <UserEditForm
+                        user={user}
+                        onSubmit={handleEditSubmit}
+                        onCancel={() => setIsEditing(false)}
+                        isLoading={isLoading}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}

app/globals.css

@@ -0,0 +1,107 @@
+@import "tailwindcss";
+
+/* Class-based dark mode (Tailwind v4): toggled by a `.dark` class on <html> */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-primary-50: #f0f1ff;
+  --color-primary-100: #e4e6ff;
+  --color-primary-200: #c3c7ff;
+  --color-primary-300: #a8b1ff;
+  --color-primary-400: #8d9aff;
+  --color-primary-500: #727dfd;
+  --color-primary-600: #5d68e0;
+  --color-primary-700: #4853c4;
+  --color-primary-800: #343ea8;
+  --color-primary-900: #2a318c;
+}
+
+/* Dana Font Faces */
+@font-face {
+  font-family: 'Dana';
+  src: url('/fonts/dana_regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Dana';
+  src: url('/fonts/dana_medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Dana';
+  src: url('/fonts/dana_bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --background: #f3f4f6;
+  --foreground: #171717;
+}
+
+/* Dark palette is driven by the `.dark` class so the toggle controls it */
+.dark {
+  --background: #030712;
+  --foreground: #ededed;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: 'Dana', 'Inter', var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: 'Dana', 'Inter', Arial, Helvetica, sans-serif;
+  font-weight: 400;
+}
+
+/* Smooth theme transition for surfaces, borders and text */
+*,
+*::before,
+*::after {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-duration: 200ms;
+  transition-timing-function: ease;
+}
+
+/* Custom scrollbar that adapts to the theme */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+}
+.dark * {
+  scrollbar-color: #374151 transparent;
+}
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: #cbd5e1;
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+.dark *::-webkit-scrollbar-thumb {
+  background-color: #374151;
+}
+
+::selection {
+  background-color: #c3c7ff;
+  color: #1f2937;
+}
+.dark ::selection {
+  background-color: #4853c4;
+  color: #f9fafb;
+}

app/layout.tsx

@@ -0,0 +1,53 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+    title: 'پنل ادمین',
+
+    alternates: {
+        canonical: '/',
+        languages: {
+            'fa-IR': '/',
+        },
+    },
+
+
+
+};
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="fa" dir="rtl" suppressHydrationWarning>
+            <head>
+                {/* Apply the saved/system theme before paint to avoid a flash of the wrong theme */}
+                <script
+                    dangerouslySetInnerHTML={{
+                        __html: `(function(){try{var t=localStorage.getItem('theme');var d=t?t==='dark':window.matchMedia('(prefers-color-scheme: dark)').matches;if(d)document.documentElement.classList.add('dark');}catch(e){}})();`,
+                    }}
+                />
+                <meta
+                    name="google-site-verification"
+                    content="HIKgdf_siYdPxbJ2P1792opMprpxci_QjE-quk9kyi8"
+                />
+                {/* Favicon */}
+                <link rel="icon" href="/favicon.ico" sizes="any" />
+                <link rel="icon" href="/icon?<generated>" type="image/<generated>" sizes="<generated>" />
+                <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+
+                {/* Preload critical resources */}
+                <link rel="preconnect" href="https://fonts.googleapis.com" />
+                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+
+                {/* Structured Data for SEO */}
+
+            </head>
+            <body className="antialiased">
+                {children}
+            </body>
+        </html>
+    );
+}

app/page.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function Home() {
+    const router = useRouter();
+
+    useEffect(() => {
+        router.push('/admin/login');
+    }, [router]);
+
+
+}

components/ThemeToggle.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeToggleProps {
+    /** When true, renders as a fixed floating pill (used on the app shell). */
+    floating?: boolean;
+    /** When true, shows a Persian text label next to the icon. */
+    withLabel?: boolean;
+    className?: string;
+}
+
+export default function ThemeToggle({ floating = false, withLabel, className = '' }: ThemeToggleProps) {
+    const [theme, setTheme] = useState<Theme>('light');
+    const [mounted, setMounted] = useState(false);
+
+    // Floating variant shows a label by default; inline variant is icon-only unless asked.
+    const showLabel = withLabel ?? floating;
+
+    useEffect(() => {
+        setMounted(true);
+        setTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+    }, []);
+
+    const toggle = () => {
+        const next: Theme = theme === 'dark' ? 'light' : 'dark';
+        const root = document.documentElement;
+        if (next === 'dark') {
+            root.classList.add('dark');
+        } else {
+            root.classList.remove('dark');
+        }
+        try {
+            localStorage.setItem('theme', next);
+        } catch {
+            // ignore storage errors
+        }
+        setTheme(next);
+    };
+
+    const base =
+        'inline-flex items-center gap-2 border border-gray-200 bg-white text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-offset-gray-900 transition-colors';
+
+    const shape = showLabel
+        ? 'rounded-full px-4 py-2 text-sm font-medium'
+        : 'rounded-full justify-center h-10 w-10';
+
+    const floatingCls = floating ? 'fixed bottom-5 left-5 z-50' : '';
+
+    const isDark = theme === 'dark';
+    const label = isDark ? 'حالت روشن' : 'حالت تیره';
+
+    // Avoid hydration mismatch: render a neutral placeholder until mounted
+    if (!mounted) {
+        return (
+            <button
+                type="button"
+                aria-label="تغییر تم"
+                className={`${base} ${shape} ${floatingCls} ${className}`}
+            >
+                <SunIcon className="h-5 w-5" />
+                {showLabel && <span>تم</span>}
+            </button>
+        );
+    }
+
+    return (
+        <button
+            type="button"
+            onClick={toggle}
+            aria-label={label}
+            title={label}
+            className={`${base} ${shape} ${floatingCls} ${className}`}
+        >
+            {isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
+            {showLabel && <span>{label}</span>}
+        </button>
+    );
+}

components/admin/packages/PackageForm.tsx

@@ -0,0 +1,290 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { PackageName, CreatePackageData, UpdatePackageData } from '@/types/package';
+import { XMarkIcon, PhotoIcon, DocumentTextIcon } from '@heroicons/react/24/outline';
+
+interface PackageFormProps {
+    package?: PackageName | null;
+    onSubmit: (data: CreatePackageData | UpdatePackageData) => Promise<void>;
+    onCancel: () => void;
+    isLoading: boolean;
+}
+
+export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoading }: PackageFormProps) {
+    const [formData, setFormData] = useState<CreatePackageData | UpdatePackageData>({
+        name: '',
+        title: '',
+        v1_identifier: '',
+        myket_access_token: '',
+        cafe_config_id: null,
+        web_app_url: '',
+        tries: 0,
+    });
+
+    const [avatarFile, setAvatarFile] = useState<File | null>(null);
+    const [firebaseFile, setFirebaseFile] = useState<File | null>(null);
+    const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (pkg) {
+            setFormData({
+                name: pkg.name || '',
+                title: pkg.title || '',
+                v1_identifier: pkg.v1_identifier || '',
+                myket_access_token: pkg.myket_access_token || '',
+                cafe_config_id: pkg.cafe_config_id,
+                web_app_url: pkg.web_app_url || '',
+                tries: pkg.tries || 0,
+            });
+
+            if (pkg.image && typeof pkg.image === 'string') {
+                setAvatarPreview(pkg.image);
+            }
+        }
+    }, [pkg]);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        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),
+        }));
+    };
+
+    const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (file) {
+            setAvatarFile(file);
+            setFormData(prev => ({ ...prev, avatar: file }));
+
+            // Create preview
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                setAvatarPreview(reader.result as string);
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+
+    const handleFirebaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (file) {
+            setFirebaseFile(file);
+            setFormData(prev => ({ ...prev, firebase_json: file }));
+        }
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        await onSubmit(formData);
+    };
+
+    const removeAvatar = () => {
+        setAvatarFile(null);
+        setAvatarPreview(null);
+        setFormData(prev => ({ ...prev, avatar: null }));
+    };
+
+    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"
+                    />
+                </div>
+
+                {/* Title */}
+                <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="مثال: آرام لند"
+                    />
+                </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" />
+                            انتخاب تصویر
+                            <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"
+                            >
+                                <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>
+                    )}
+                </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"
+                    />
+                </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"
+                    />
+                </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"
+                    />
+                </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"
+                    />
+                </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"
+                    />
+                </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" />
+                        انتخاب فایل
+                        <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>
+                    )}
+                </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"
+                >
+                    انصراف
+                </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"
+                >
+                    {isLoading ? 'در حال ذخیره...' : pkg ? 'به‌روزرسانی' : 'ایجاد'}
+                </button>
+            </div>
+        </form>
+    );
+}

components/admin/packages/PackageList.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { PackageName } from '@/types/package';
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { formatDate } from '@/lib/utils';
+
+interface PackageListProps {
+    packages: PackageName[];
+    onEdit: (pkg: PackageName) => void;
+    onDelete: (pkg: PackageName) => void;
+    isLoading: boolean;
+}
+
+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>
+        );
+    }
+
+    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>
+        );
+    }
+
+    return (
+        <div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
+            <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"
+                                        />
+                                    )}
+                                    <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>
+                                </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">
+                                <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"
+                                >
+                                    <PencilIcon className="h-5 w-5" />
+                                </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"
+                                >
+                                    <TrashIcon className="h-5 w-5" />
+                                </button>
+                            </div>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

components/admin/products/ProductForm.tsx

@@ -0,0 +1,298 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Product, CreateProductData, UpdateProductData, PRODUCT_TYPES } from '@/types/product';
+import { PlusIcon, XMarkIcon } from '@heroicons/react/24/outline';
+
+interface ProductFormProps {
+    product?: Product | null;
+    packageName: string;
+    onSubmit: (data: CreateProductData | UpdateProductData) => Promise<void>;
+    onCancel: () => void;
+    isLoading: boolean;
+}
+
+export default function ProductForm({ product, packageName, onSubmit, onCancel, isLoading }: ProductFormProps) {
+    const [formData, setFormData] = useState<CreateProductData | UpdateProductData>({
+        title: '',
+        price: 0,
+        type: 4, // Default to monthly
+        discounted_price: '',
+        daily_price: '',
+        discount: '',
+        is_best_seller: false,
+        sort_order: 0,
+    });
+
+    const [descriptions, setDescriptions] = useState<string[]>([]);
+    const [newDescription, setNewDescription] = useState('');
+
+    useEffect(() => {
+        if (product) {
+            setFormData({
+                title: product.title || '',
+                price: product.price || 0,
+                type: product.type || 4,
+                discounted_price: product.discounted_price || '',
+                daily_price: product.daily_price || '',
+                discount: product.discount || '',
+                is_best_seller: product.is_best_seller || false,
+                sort_order: product.sort_order || 0,
+            });
+            setDescriptions(product.descriptions || []);
+        }
+    }, [product]);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+        const { name, value, type } = e.target;
+        if (type === 'checkbox') {
+            const { checked } = e.target as HTMLInputElement;
+            setFormData(prev => ({ ...prev, [name]: checked }));
+            return;
+        }
+        setFormData(prev => ({
+            ...prev,
+            [name]: name === 'price' || name === 'sort_order' ? parseInt(value) || 0 : value,
+        }));
+    };
+
+    const handleAddDescription = () => {
+        if (newDescription.trim()) {
+            setDescriptions([...descriptions, newDescription.trim()]);
+            setNewDescription('');
+        }
+    };
+
+    const handleRemoveDescription = (index: number) => {
+        setDescriptions(descriptions.filter((_, i) => i !== index));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        const submitData = {
+            ...formData,
+            ...(descriptions.length > 0 && { descriptions }),
+        };
+
+        await onSubmit(submitData);
+    };
+
+    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">
+                    {product ? 'ویرایش محصول' : 'ایجاد محصول جدید'} برای پکیج {packageName}
+                </h3>
+            </div>
+
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+                {/* Title */}
+                <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="مثال: اشتراک ماهانه"
+                    />
+                </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"
+                    />
+                </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"
+                    >
+                        {Object.entries(PRODUCT_TYPES).map(([value, label]) => (
+                            <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="مثال: ۱٬۴۶۰٬۰۰۰"
+                    />
+                </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="مثال: معادل روزانه ۴٬۰۰۰ تومان"
+                    />
+                </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="مثال: ۵۵٪ تخفیف"
+                    />
+                </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"
+                    />
+                </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>
+                </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">
+                    <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"
+                        placeholder="ویژگی جدید را وارد کنید"
+                        onKeyPress={(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"
+                    >
+                        <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">
+                                <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>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </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"
+                >
+                    انصراف
+                </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"
+                >
+                    {isLoading ? 'در حال ذخیره...' : product ? 'به‌روزرسانی' : 'ایجاد'}
+                </button>
+            </div>
+        </form>
+    );
+}

components/admin/products/ProductList.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { Product } from '@/types/product';
+import { getProductTypeLabel, PRODUCT_TYPES } from '@/types/product';
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { formatDate, formatPrice } from '@/lib/utils';
+
+interface ProductListProps {
+    products: Product[];
+    packageName: string;
+    onEdit: (product: Product) => void;
+    onDelete: (product: Product) => void;
+    isLoading: boolean;
+}
+
+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>
+        );
+    }
+
+    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>
+        );
+    }
+
+    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">
+                    محصولات پکیج {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">
+                            <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">
+                                            {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>
+                                        )}
+                                    </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">
+                                            {getProductTypeLabel(product.type)}
+                                        </span>
+                                    </div>
+                                </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">
+                                                {product.descriptions.map((desc, index) => (
+                                                    <li key={index}>{desc}</li>
+                                                ))}
+                                            </ul>
+                                        </div>
+                                    )}
+                                </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">
+                                <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"
+                                >
+                                    <PencilIcon className="h-5 w-5" />
+                                </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"
+                                >
+                                    <TrashIcon className="h-5 w-5" />
+                                </button>
+                            </div>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

components/admin/promotions/PromotionForm.tsx

@@ -0,0 +1,395 @@
+'use client';
+
+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;
+    onSubmit: (data: CreatePromotionData | UpdatePromotionData) => Promise<void>;
+    onCancel: () => void;
+    isLoading: boolean;
+}
+
+export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading }: PromotionFormProps) {
+    const [formData, setFormData] = useState<CreatePromotionData | UpdatePromotionData>({
+        type: 'slider',
+        title: '',
+        subtitle: '',
+        action_text: '',
+        url_myket: '',
+        url_bazzar: '',
+        url_google_play: '',
+        url_site: '',
+        priority: 0,
+        start_at: '',
+        end_at: '',
+    });
+
+    const [imageFile, setImageFile] = useState<File | null>(null);
+    const [imagePreview, setImagePreview] = useState<string | null>(null);
+    const [isActive, setIsActive] = useState(true);
+
+    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 || '',
+                subtitle: promotion.subtitle || '',
+                action_text: promotion.action_text || '',
+                url_myket: promotion.url_myket || '',
+                url_bazzar: promotion.url_bazzar || '',
+                url_google_play: promotion.url_google_play || '',
+                url_site: promotion.url_site || '',
+                priority: promotion.priority || 0,
+                start_at: startAt,
+                end_at: endAt,
+            });
+
+            setIsActive(promotion.is_active);
+
+            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,
+        }));
+    };
+
+    const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: value === '' ? null : parseInt(value, 10),
+        }));
+    };
+
+    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (file) {
+            setImageFile(file);
+            setFormData(prev => ({ ...prev, image: file }));
+            
+            // Create preview
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                setImagePreview(reader.result as string);
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+
+    const removeImage = () => {
+        setImageFile(null);
+        setImagePreview(null);
+        setFormData(prev => ({ ...prev, image: null }));
+    };
+
+    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;
+        }
+        
+        await onSubmit(submitData);
+    };
+
+    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">
+                    {promotion ? 'ویرایش تبلیغ' : 'ایجاد تبلیغ جدید'}
+                </h3>
+            </div>
+
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+                {/* 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 || '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"
+                    >
+                        {Object.entries(PROMOTION_TYPES).map(([value, label]) => (
+                            <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="عنوان تبلیغ"
+                    />
+                </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="زیرعنوان تبلیغ"
+                    />
+                </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="مثال: همین حالا نصب کن"
+                    />
+                </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="عدد بالاتر = اولویت بیشتر"
+                    />
+                </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"
+                    />
+                </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"
+                    />
+                </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="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/..."
+                        />
+                    </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/..."
+                        />
+                    </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/..."
+                        />
+                    </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"
+                        />
+                    </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" />
+                        انتخاب تصویر
+                        <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"
+                        >
+                            <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>
+                )}
+                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    حداکثر حجم: ۲ مگابایت
+                </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">
+                        فعال
+                    </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"
+                >
+                    انصراف
+                </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"
+                >
+                    {isLoading ? 'در حال ذخیره...' : promotion ? 'به‌روزرسانی' : 'ایجاد'}
+                </button>
+            </div>
+        </form>
+    );
+}

components/admin/promotions/PromotionList.tsx

@@ -0,0 +1,199 @@
+'use client';
+
+import { Promotion } from '@/types/promotion';
+import { getPromotionTypeLabel } from '@/types/promotion';
+import { PencilIcon, TrashIcon, EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
+import { formatDate } from '@/lib/utils';
+import Image from 'next/image';
+import { useState } from 'react';
+
+interface PromotionListProps {
+    promotions: Promotion[];
+    onEdit: (promotion: Promotion) => void;
+    onDelete: (promotion: Promotion) => void;
+    onToggleActive: (promotion: Promotion) => void;
+    isLoading: boolean;
+}
+
+export default function PromotionList({ promotions, onEdit, onDelete, onToggleActive, isLoading }: PromotionListProps) {
+    const [imageErrors, setImageErrors] = useState<Record<number, boolean>>({});
+
+    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>
+        );
+    }
+
+    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>
+        );
+    }
+
+    // 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) return -1;
+        if (b.priority) return 1;
+        return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+    });
+
+    const handleImageError = (id: number) => {
+        setImageErrors(prev => ({ ...prev, [id]: true }));
+    };
+
+    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">
+                    لیست تبلیغات
+                </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 */}
+                                    {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">
+                                                <Image
+                                                    src={promotion.image_url}
+                                                    alt={promotion.title || 'Promotion'}
+                                                    fill
+                                                    className="object-cover"
+                                                    onError={() => handleImageError(promotion.id)}
+                                                    unoptimized={true} // This disables image optimization
+                                                />
+                                            </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">
+                                                    {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">
+                                                    {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>
+                                                ) : (
+                                                    <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>
+                                                )}
+                                            </div>
+                                        </div>
+
+                                        {promotion.subtitle && (
+                                            <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>
+
+                                        {/* URLs */}
+                                        <div className="mt-2 space-y-1">
+                                            {promotion.url_site && (
+                                                <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                                                    <span className="font-medium">وبسایت:</span> {promotion.url_site}
+                                                </div>
+                                            )}
+                                            {promotion.url_myket && (
+                                                <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                                                    <span className="font-medium">مایکت:</span> {promotion.url_myket}
+                                                </div>
+                                            )}
+                                            {promotion.url_bazzar && (
+                                                <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                                                    <span className="font-medium">بازار:</span> {promotion.url_bazzar}
+                                                </div>
+                                            )}
+                                            {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>
+                                            )}
+                                        </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">
+                                <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'
+                                    }`}
+                                    title={promotion.is_active ? 'غیرفعال کردن' : 'فعال کردن'}
+                                >
+                                    {promotion.is_active ? (
+                                        <EyeIcon className="h-5 w-5" />
+                                    ) : (
+                                        <EyeSlashIcon className="h-5 w-5" />
+                                    )}
+                                </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"
+                                >
+                                    <PencilIcon className="h-5 w-5" />
+                                </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"
+                                >
+                                    <TrashIcon className="h-5 w-5" />
+                                </button>
+                            </div>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

components/admin/referral/ReferralList.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { ReferralRewardUser } from '@/types/referral';
+import { GiftIcon, EnvelopeIcon, PhoneIcon, TicketIcon, UserIcon } from '@heroicons/react/24/outline';
+
+interface ReferralListProps {
+    users: ReferralRewardUser[];
+    subscriptionTarget: number;
+    onFulfill: (user: ReferralRewardUser) => void;
+    isLoading: boolean;
+    fulfillingId: number | null;
+}
+
+export default function ReferralList({
+    users,
+    subscriptionTarget,
+    onFulfill,
+    isLoading,
+    fulfillingId
+}: 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">
+                    در حال حاضر هیچ کاربری واجد شرایط دریافت پاداش معرفی نیست.
+                </p>
+                <p className="text-sm 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">
+                    کاربران واجد شرایط پاداش
+                </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>
+            </div>
+            <ul className="divide-y divide-gray-200 dark:divide-gray-800 border-t border-gray-200 dark:border-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">
+                            <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">
+                                        {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">
+                                        {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 || 'ایمیل ثبت نشده'}
+                                    </span>
+                                    <span className="flex items-center">
+                                        <PhoneIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
+                                        {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>
+                                    )}
+                                </div>
+                            </div>
+                            <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"
+                            >
+                                <GiftIcon className="h-5 w-5 ml-2" />
+                                {fulfillingId === user.id ? 'در حال اعطا...' : 'اعطای اشتراک رایگان'}
+                            </button>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

components/admin/reminders/ReminderForm.tsx

@@ -0,0 +1,243 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Reminder, CreateReminderData, UpdateReminderData, REMINDER_TYPES } from '@/types/reminder';
+
+interface ReminderFormProps {
+    reminder?: Reminder | null;
+    packageName: string;
+    onSubmit: (data: CreateReminderData | UpdateReminderData) => Promise<void>;
+    onCancel: () => void;
+    isLoading: boolean;
+}
+
+export default function ReminderForm({ reminder, packageName, onSubmit, onCancel, isLoading }: ReminderFormProps) {
+    const [formData, setFormData] = useState<CreateReminderData | UpdateReminderData>({
+        title: '',
+        description: '',
+        time: '',
+        repeatable: false,
+        repeat_days: null,
+        type: 'reminder',
+    });
+
+    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 || '',
+                time: formattedTime,
+                repeatable: reminder.repeatable || false,
+                repeat_days: reminder.repeat_days,
+                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,
+                repeatable: false,
+                repeat_days: null,
+                type: 'reminder',
+            });
+        }
+    }, [reminder]);
+
+    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,
+            }));
+        } else {
+            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,
+        }));
+    };
+
+    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(submitData);
+    };
+
+    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">
+                    {reminder ? 'ویرایش یادآوری' : 'ایجاد یادآوری جدید'} برای پکیج {packageName}
+                </h3>
+            </div>
+
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+                {/* Title */}
+                <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="مثال: یادآوری روزانه"
+                    />
+                </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"
+                    >
+                        {Object.entries(REMINDER_TYPES).map(([value, label]) => (
+                            <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"
+                    />
+                </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>
+                    </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"
+                        />
+                    </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>
+
+            {/* 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"
+                >
+                    انصراف
+                </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"
+                >
+                    {isLoading ? 'در حال ذخیره...' : reminder ? 'به‌روزرسانی' : 'ایجاد'}
+                </button>
+            </div>
+        </form>
+    );
+}

components/admin/reminders/ReminderList.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { Reminder } from '@/types/reminder';
+import { getReminderTypeLabel } from '@/types/reminder';
+import { PencilIcon, TrashIcon, BellIcon, SparklesIcon } from '@heroicons/react/24/outline';
+import { formatDate, formatTime } from '@/lib/utils';
+
+interface ReminderListProps {
+    reminders: Reminder[];
+    packageName: string;
+    onEdit: (reminder: Reminder) => void;
+    onDelete: (reminder: Reminder) => void;
+    isLoading: boolean;
+}
+
+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>
+        );
+    }
+
+    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>
+        );
+    }
+
+    // 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">
+                    یادآوری‌های پکیج {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">
+                            <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">
+                                        {reminder.type === 'motivate' ? (
+                                            <SparklesIcon className="h-5 w-5 text-yellow-500" />
+                                        ) : (
+                                            <BellIcon className="h-5 w-5 text-indigo-500" />
+                                        )}
+                                        <p className="text-sm font-medium 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">
+                                        {getReminderTypeLabel(reminder.type)}
+                                    </span>
+                                </div>
+                                
+                                {reminder.description && (
+                                    <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                                        {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>
+                                    
+                                    {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>
+                                    )}
+                                </div>
+                                
+                                <div className="mt-2 text-xs text-gray-400 dark:text-gray-500">
+                                    آخرین به‌روزرسانی: {formatDate(reminder.updated_at)}
+                                </div>
+                            </div>
+                            
+                            <div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
+                                <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"
+                                >
+                                    <PencilIcon className="h-5 w-5" />
+                                </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"
+                                >
+                                    <TrashIcon className="h-5 w-5" />
+                                </button>
+                            </div>
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

components/admin/users/PackageSelector.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { PackageName } from '@/types/package';
+import { useState, useEffect } from 'react';
+import { packagesApi } from '@/lib/api/packages';
+
+interface PackageSelectorProps {
+    token: string;
+    selectedPackage: string | null;
+    onPackageChange: (packageName: string) => void;
+    isLoading?: boolean;
+}
+
+export default function PackageSelector({ token, selectedPackage, onPackageChange, isLoading }: PackageSelectorProps) {
+    const [packages, setPackages] = useState<PackageName[]>([]);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        loadPackages();
+    }, [token]);
+
+    const loadPackages = async () => {
+        setLoading(true);
+        try {
+            const data = await packagesApi.getAllPackages(token);
+            setPackages(data);
+
+            // Select first package if none selected
+            if (data.length > 0 && !selectedPackage) {
+                onPackageChange(data[0].name!);
+            }
+        } catch (error) {
+            console.error('Failed to load packages:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        onPackageChange(e.target.value);
+    };
+
+    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">
+                انتخاب پکیج
+            </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"
+            >
+                {loading ? (
+                    <option>در حال بارگذاری...</option>
+                ) : (
+                    packages.map((pkg) => (
+                        <option key={pkg.id} value={pkg.name || ''}>
+                            {pkg.title} ({pkg.name})
+                        </option>
+                    ))
+                )}
+            </select>
+        </div>
+    );
+}

components/admin/users/UserEditForm.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useState } from 'react';
+import { User, UpdateUserProfileData } from '@/types/user';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+
+interface UserEditFormProps {
+    user: User;
+    onSubmit: (data: UpdateUserProfileData) => void;
+    onCancel: () => void;
+    isLoading: boolean;
+}
+
+export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: UserEditFormProps) {
+    const [formData, setFormData] = useState<UpdateUserProfileData>({
+        first_name: user.first_name || '',
+        last_name: user.last_name || '',
+        email: user.email || '',
+        mobile: user.mobile || '',
+        avatar: null,
+    });
+
+    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';
+
+    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="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"
+                    >
+                        <XMarkIcon className="h-5 w-5" />
+                    </button>
+                </div>
+
+                <form onSubmit={handleSubmit} className="px-6 py-4 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 })}
+                            />
+                        </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 })}
+                            />
+                        </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 })}
+                        />
+                    </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 })}
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">آواتار</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 })
+                            }
+                        />
+                    </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"
+                        >
+                            انصراف
+                        </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"
+                        >
+                            {isLoading ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}

components/admin/users/UserInfo.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { User } from '@/types/user';
+import { formatDate, formatPrice, getFullName, getEmail, getMobile } from '@/lib/utils';
+import { CalendarIcon, EnvelopeIcon, PhoneIcon, WalletIcon, UserIcon } from '@heroicons/react/24/outline';
+
+interface UserInfoProps {
+    user: User;
+}
+
+export default function UserInfo({ user }: UserInfoProps) {
+    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">
+                    اطلاعات کاربر
+                </h3>
+            </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>
+                    </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>
+                    </div>
+                    {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>
+                    )}
+                    {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>
+                    )}
+                </dl>
+            </div>
+        </div>
+    );
+}

components/admin/users/UserProducts.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import { UserProduct } from '@/types/user';
+import { formatDate, formatPrice, getProductTypeLabel } from '@/lib/utils';
+import { CheckCircleIcon, XCircleIcon, PlusCircleIcon } from '@heroicons/react/24/outline';
+import { useState } from 'react';
+
+interface UserProductsProps {
+    products: UserProduct[];
+    onSubscribe: (productId: number) => void;
+    onUnsubscribe: (productId: number) => void;
+    isLoading: boolean;
+    availableProducts: { id: number; title: string | null; packageName?: string }[];
+    selectedPackage?: string | null;
+}
+
+export default function UserProducts({
+    products,
+    onSubscribe,
+    onUnsubscribe,
+    isLoading,
+    availableProducts,
+    selectedPackage
+}: UserProductsProps) {
+    const [selectedProductId, setSelectedProductId] = useState<number | null>(null);
+
+    const getSubscriptionStatus = (product: UserProduct) => {
+        if (!product.pivot?.expire_at) {
+            return {
+                isActive: false,
+                text: 'نامشخص',
+                color: 'text-gray-600',
+                icon: XCircleIcon
+            };
+        }
+
+        const expireDate = new Date(product.pivot.expire_at);
+        const now = new Date();
+        const isActive = expireDate > now;
+
+        return {
+            isActive,
+            text: isActive ? 'فعال' : 'منقضی شده',
+            color: isActive ? 'text-green-600' : 'text-red-600',
+            icon: isActive ? CheckCircleIcon : XCircleIcon
+        };
+    };
+
+    // 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]) {
+            acc[packageName] = [];
+        }
+        acc[packageName].push(product);
+        return acc;
+    }, {} as Record<string, UserProduct[]>);
+
+    const handleSubscribeClick = (productId: number) => {
+        setSelectedProductId(productId);
+        onSubscribe(productId);
+    };
+
+    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">
+                    اشتراک‌های کاربر
+                </h3>
+            </div>
+
+            {/* Current Subscriptions grouped by package */}
+            <div className="border-t border-gray-200 dark:border-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">
+                                    پکیج: {packageName}
+                                </h4>
+                            </div>
+                            <ul className="divide-y divide-gray-200 dark:divide-gray-800">
+                                {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">
+                                                                {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>
+                                                            )}
+                                                        </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}`} />
+                                                                {status.text}
+                                                            </p>
+                                                        </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>
+                                                            {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>
+                                                            )}
+                                                        </div>
+                                                        <div className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
+                                                            <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"
+                                                            >
+                                                                لغو اشتراک
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </li>
+                                    );
+                                })}
+                            </ul>
+                        </div>
+                    ))
+                ) : (
+                    <div className="px-4 py-5 sm:px-6 text-center text-gray-500 dark:text-gray-400">
+                        کاربر هیچ اشتراکی ندارد
+                    </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}
+                    </h4>
+                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                        {availableProducts.map((product) => {
+                            const subscriptionCount = getSubscriptionCount(product.id);
+
+                            return (
+                                <button
+                                    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"
+                                >
+                                    <div className="flex items-start justify-between">
+                                        <div>
+                                            <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                                {product.title || 'محصول'}
+                                            </p>
+                                            {subscriptionCount > 0 && (
+                                                <p className="mt-1 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>
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

components/admin/users/UserSearch.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useState } from 'react';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+
+interface UserSearchProps {
+    onSearch: (searchTerm: string) => void;
+    isLoading: boolean;
+}
+
+export default function UserSearch({ onSearch, isLoading }: UserSearchProps) {
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (searchTerm.trim()) {
+            onSearch(searchTerm.trim());
+        }
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="mb-6">
+            <div className="flex gap-2">
+                <div className="flex-1">
+                    <label htmlFor="search" className="sr-only">
+                        جستجو با ایمیل یا شماره موبایل
+                    </label>
+                    <div className="relative">
+                        <div className="absolute inset-y-0 right-0 flex items-center pr-3 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="جستجو با ایمیل یا شماره موبایل..."
+                            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"
+                >
+                    {isLoading ? 'در حال جستجو...' : 'جستجو'}
+                </button>
+            </div>
+        </form>
+    );
+}

contexts/AuthContext.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { AuthState, LoginCredentials, User } from '@/types/auth';
+import { authApi } from '@/lib/api/auth';
+import { useRouter } from 'next/navigation';
+
+interface AuthContextType extends AuthState {
+    login: (credentials: { auth: string; password: string }) => Promise<void>;
+    logout: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+const PACKAGE_NAME = 'com.approagency.meditation';
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+    const [state, setState] = useState<AuthState>({
+        user: null,
+        token: null,
+        isLoading: true,
+        error: null,
+    });
+
+    const router = useRouter();
+
+    useEffect(() => {
+        // Check for stored token on mount
+        const storedToken = localStorage.getItem('auth_token');
+        const storedUser = localStorage.getItem('auth_user');
+
+        if (storedToken && storedUser) {
+            setState({
+                user: JSON.parse(storedUser),
+                token: storedToken,
+                isLoading: false,
+                error: null,
+            });
+        } else {
+            setState(prev => ({ ...prev, isLoading: false }));
+        }
+    }, []);
+
+    // contexts/AuthContext.tsx - Update the login function
+    const login = async (credentials: { auth: string; password: string }) => {
+        setState(prev => ({ ...prev, isLoading: true, error: null }));
+
+        try {
+            const fullCredentials: LoginCredentials = {
+                auth: credentials.auth,
+                password: credentials.password,
+                package_name: PACKAGE_NAME,
+            };
+
+            const response = await authApi.login(fullCredentials);
+
+            // Extract user data from response
+            const user: User = {
+                id: response.user?.id || '1',
+                email: credentials.auth,
+                name: response.user?.name,
+            };
+
+            // Store in localStorage
+            localStorage.setItem('auth_token', response.token);
+            localStorage.setItem('auth_user', JSON.stringify(user));
+
+            // Set cookie for middleware
+            document.cookie = `auth_token=${response.token}; path=/; max-age=86400; SameSite=Strict`;
+
+            setState({
+                user,
+                token: response.token,
+                isLoading: false,
+                error: null,
+            });
+
+            router.push('/admin/dashboard');
+        } catch (error) {
+            setState({
+                user: null,
+                token: null,
+                isLoading: false,
+                error: error instanceof Error ? error.message : 'Login failed',
+            });
+        }
+    };
+
+    // Update logout function
+
+
+    const logout = async () => {
+        if (state.token) {
+            try {
+                await authApi.logout(state.token);
+            } catch (error) {
+                console.error('Logout error:', error);
+            }
+        }
+
+        // Clear localStorage
+        localStorage.removeItem('auth_token');
+        localStorage.removeItem('auth_user');
+
+        // Clear cookie - multiple methods to ensure it's removed
+        document.cookie = 'auth_token=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT; SameSite=Strict';
+        document.cookie = 'auth_token=; path=/admin; expires=Thu, 01 Jan 1970 00:00:01 GMT; SameSite=Strict';
+
+        // Alternative: Clear all cookies
+        document.cookie.split(";").forEach(function (c) {
+            document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=; path=/; expires=" + new Date().toUTCString() + ";");
+        });
+
+        setState({
+            user: null,
+            token: null,
+            isLoading: false,
+            error: null,
+        });
+
+        // Force hard navigation instead of router.push
+        window.location.href = '/admin/login';
+        // router.push('/admin/login');
+    };
+
+    return (
+        <AuthContext.Provider value={{ ...state, login, logout }}>
+            {children}
+        </AuthContext.Provider>
+    );
+}
+
+export function useAuth() {
+    const context = useContext(AuthContext);
+    if (context === undefined) {
+        throw new Error('useAuth must be used within an AuthProvider');
+    }
+    return context;
+}

lib/api/auth.ts

@@ -0,0 +1,21 @@
+import { apiClient } from './client';
+import { LoginCredentials, LoginResponse } from '@/types/auth';
+
+export const authApi = {
+    login: async (credentials: LoginCredentials): Promise<LoginResponse> => {
+        const formData = new FormData();
+        formData.append('auth', credentials.auth);
+        formData.append('password', credentials.password);
+        formData.append('package_name', credentials.package_name);
+
+        return apiClient.post<LoginResponse>('/auth/login', formData);
+    },
+
+    logout: async (token: string): Promise<void> => {
+        return apiClient.put('/auth/logout', {}, token);
+    },
+
+    getProfile: async (token: string): Promise<any> => {
+        return apiClient.get('/auth/profile', token);
+    },
+};

lib/api/client.ts

@@ -0,0 +1,124 @@
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'https://api.approagency.ir/api';
+
+interface ApiOptions extends RequestInit {
+    token?: string;
+}
+
+// Simple in-memory cache for ongoing requests
+const pendingRequests = new Map();
+
+class ApiClient {
+    private async request<T>(
+        endpoint: string,
+        options: ApiOptions = {}
+    ): Promise<T> {
+        const { token, ...fetchOptions } = options;
+
+        const headers: Record<string, string> = {
+            // Always ask for JSON so Laravel returns 401 JSON on auth failure
+            // instead of a 302 redirect to the login page.
+            Accept: 'application/json',
+            ...(options.headers as Record<string, string> || {}),
+        };
+
+        // Don't set Content-Type for FormData (browser will set it automatically with boundary)
+        if (!(options.body instanceof FormData)) {
+            headers['Content-Type'] = 'application/json';
+        }
+
+        if (token) {
+            headers['Authorization'] = `Bearer ${token}`;
+        }
+
+        // Create a unique key for this request
+        const requestKey = `${fetchOptions.method || 'GET'}-${endpoint}-${JSON.stringify(options.body)}`;
+
+        // Check if there's already a pending request with the same key
+        if (pendingRequests.has(requestKey)) {
+            console.log('Deduplicating request:', endpoint);
+            return pendingRequests.get(requestKey);
+        }
+
+        // Make the request
+        const promise = fetch(`${API_BASE_URL}${endpoint}`, {
+            ...fetchOptions,
+            headers,
+        }).then(async (response) => {
+            if (!response.ok) {
+                const error = await response.json().catch(() => ({}));
+                throw new Error(error.message || 'API request failed');
+            }
+            return response.json();
+        }).finally(() => {
+            // Clean up after request completes
+            pendingRequests.delete(requestKey);
+        });
+
+        // Store the promise
+        pendingRequests.set(requestKey, promise);
+
+        return promise;
+    }
+
+    async post<T>(endpoint: string, data: any, token?: string): Promise<T> {
+        const body = data instanceof FormData ? data : JSON.stringify(data);
+
+        return this.request<T>(endpoint, {
+            method: 'POST',
+            body,
+            token,
+        });
+    }
+
+    async get<T>(endpoint: string, token?: string): Promise<T> {
+        return this.request<T>(endpoint, {
+            method: 'GET',
+            token,
+        });
+    }
+
+    async put<T>(endpoint: string, data: any, token?: string): Promise<T> {
+        const body = data instanceof FormData ? data : JSON.stringify(data);
+
+        return this.request<T>(endpoint, {
+            method: 'PUT',
+            body,
+            token,
+        });
+    }
+
+    async patch<T>(endpoint: string, data: any, token?: string): Promise<T> {
+        const body = data instanceof FormData ? data : JSON.stringify(data);
+
+        return this.request<T>(endpoint, {
+            method: 'PATCH',
+            body,
+            token,
+        });
+    }
+
+    async delete<T>(endpoint: string, data?: any, token?: string): Promise<T> {
+        const options: ApiOptions = {
+            method: 'DELETE',
+            token,
+        };
+
+        if (data) {
+            options.body = data instanceof FormData ? data : JSON.stringify(data);
+
+            if (!(data instanceof FormData)) {
+                options.headers = {
+                    'Content-Type': 'application/json',
+                };
+            }
+        }
+
+        return this.request<T>(endpoint, options);
+    }
+
+    async deleteWithBody<T>(endpoint: string, data: any, token?: string): Promise<T> {
+        return this.delete<T>(endpoint, data, token);
+    }
+}
+
+export const apiClient = new ApiClient();

lib/api/packages.ts

@@ -0,0 +1,77 @@
+import { apiClient } from './client';
+import { PackageName, CreatePackageData, UpdatePackageData, ApiResponse } from '@/types/package';
+
+export const packagesApi = {
+    // Get all package names
+    getAllPackages: async (token: string): Promise<PackageName[]> => {
+        return apiClient.get<PackageName[]>('/package-names', token);
+    },
+
+    // Get single package by name
+    getPackageByName: async (name: string, token: string): Promise<PackageName> => {
+        return apiClient.get<PackageName>(`/package-names/${name}`, token);
+    },
+
+    // Create new package
+    createPackage: async (data: CreatePackageData, token: string): Promise<ApiResponse<PackageName>> => {
+        const formData = new FormData();
+
+        // Append all fields to FormData
+        Object.entries(data).forEach(([key, value]) => {
+            if (value !== null && value !== undefined) {
+                if (key === 'avatar' && value instanceof File) {
+                    formData.append('avatar', value);
+                } else if (key === 'firebase_json' && value instanceof File) {
+                    formData.append('firebase_json', value);
+                } else {
+                    formData.append(key, String(value));
+                }
+            }
+        });
+
+        return apiClient.post<ApiResponse<PackageName>>('/package-names', formData, token);
+    },
+
+    // Update package
+    updatePackage: async (name: string, data: UpdatePackageData, token: string): Promise<ApiResponse<PackageName>> => {
+        const formData = new FormData();
+
+        // Add method spoofing for Laravel
+
+        // Append all fields to FormData
+        Object.entries(data).forEach(([key, value]) => {
+            if (value !== null && value !== undefined) {
+                if (key === 'avatar' && value instanceof File) {
+                    formData.append('avatar', value);
+                } else if (key === 'firebase_json' && value instanceof File) {
+                    formData.append('firebase_json', value);
+                } else {
+                    formData.append(key, String(value));
+                }
+            }
+        });
+
+        return apiClient.post<ApiResponse<PackageName>>(`/package-names/${name}`, formData, token);
+    },
+
+    // Delete package
+    deletePackage: async (name: string, token: string): Promise<ApiResponse<any>> => {
+        return apiClient.delete<ApiResponse<any>>(`/package-names/${name}`, undefined, token);
+    },
+
+    // Upload avatar separately if needed
+    uploadAvatar: async (name: string, avatarFile: File, token: string): Promise<ApiResponse<any>> => {
+        const formData = new FormData();
+        formData.append('avatar', avatarFile);
+
+        return apiClient.post<ApiResponse<any>>(`/package-names/${name}/avatar`, formData, token);
+    },
+
+    // Upload firebase config separately if needed
+    uploadFirebaseConfig: async (name: string, firebaseFile: File, token: string): Promise<ApiResponse<any>> => {
+        const formData = new FormData();
+        formData.append('firebase_json', firebaseFile);
+
+        return apiClient.post<ApiResponse<any>>(`/package-names/${name}/firebase`, formData, token);
+    }
+};

lib/api/products.ts

@@ -0,0 +1,75 @@
+import { apiClient } from './client';
+import { Product, CreateProductData, UpdateProductData, ApiResponse } from '@/types/product';
+
+export const productsApi = {
+    // Get all products for a package
+    getProducts: async (packageName: string, token: string): Promise<Product[]> => {
+        return apiClient.get<Product[]>(`/package-names/${packageName}/products`, token);
+    },
+
+    // Get single product
+    getProduct: async (packageName: string, productId: number, token: string): Promise<Product> => {
+        return apiClient.get<Product>(`/package-names/${packageName}/products/${productId}`, token);
+    },
+
+    // Create new product
+    createProduct: async (packageName: string, data: CreateProductData, token: string): Promise<ApiResponse<Product>> => {
+        const formData = new FormData();
+
+        // Append all fields to FormData
+        Object.entries(data).forEach(([key, value]) => {
+            if (value !== null && value !== undefined) {
+                if (key === 'descriptions' && Array.isArray(value)) {
+                    // Handle descriptions array
+                    value.forEach((desc, index) => {
+                        formData.append(`descriptions[${index}]`, desc);
+                    });
+                } else if (typeof value === 'boolean') {
+                    // Laravel's boolean rule accepts "1"/"0", not "true"/"false"
+                    formData.append(key, value ? '1' : '0');
+                } else {
+                    formData.append(key, String(value));
+                }
+            }
+        });
+
+        return apiClient.post<ApiResponse<Product>>(`/package-names/${packageName}/products`, formData, token);
+    },
+
+    // Update product (using PATCH)
+    updateProduct: async (packageName: string, productId: number, data: UpdateProductData, token: string): Promise<ApiResponse<Product>> => {
+        return apiClient.patch<ApiResponse<Product>>(
+            `/package-names/${packageName}/products/${productId}`,
+            data,
+            token
+        );
+    },
+
+    // Delete product
+    deleteProduct: async (packageName: string, productId: number, token: string): Promise<ApiResponse<any>> => {
+        return apiClient.delete<ApiResponse<any>>(`/package-names/${packageName}/products/${productId}`, undefined, token);
+    },
+
+    // Alternative update method using POST with _method spoofing (if PATCH is not supported)
+    updateProductWithSpoof: async (packageName: string, productId: number, data: UpdateProductData, token: string): Promise<ApiResponse<Product>> => {
+        const formData = new FormData();
+        formData.append('_method', 'PATCH');
+
+        Object.entries(data).forEach(([key, value]) => {
+            if (value !== null && value !== undefined) {
+                if (key === 'descriptions' && Array.isArray(value)) {
+                    value.forEach((desc, index) => {
+                        formData.append(`descriptions[${index}]`, desc);
+                    });
+                } else if (typeof value === 'boolean') {
+                    // Laravel's boolean rule accepts "1"/"0", not "true"/"false"
+                    formData.append(key, value ? '1' : '0');
+                } else {
+                    formData.append(key, String(value));
+                }
+            }
+        });
+
+        return apiClient.post<ApiResponse<Product>>(`/package-names/${packageName}/products/${productId}`, formData, token);
+    }
+};

lib/api/promotions.ts

@@ -0,0 +1,65 @@
+import { apiClient } from './client';
+import { Promotion, CreatePromotionData, UpdatePromotionData, ApiResponse } from '@/types/promotion';
+
+export const promotionsApi = {
+    // Get all promotions
+    getPromotions: async (token: string): Promise<Promotion[]> => {
+        return apiClient.get<Promotion[]>('/promotions', token);
+    },
+
+    // Get single promotion
+    getPromotion: async (id: number, token: string): Promise<Promotion> => {
+        return apiClient.get<Promotion>(`/promotions/${id}`, token);
+    },
+
+    // Create new promotion
+    createPromotion: async (data: CreatePromotionData, token: string): Promise<ApiResponse<Promotion>> => {
+        const formData = new FormData();
+        
+        // Append all fields to FormData
+        Object.entries(data).forEach(([key, value]) => {
+            if (value !== null && value !== undefined) {
+                if (key === 'image' && value instanceof File) {
+                    formData.append('image', value);
+                } else {
+                    formData.append(key, String(value));
+                }
+            }
+        });
+
+        return apiClient.post<ApiResponse<Promotion>>('/promotions', formData, token);
+    },
+
+    // Update promotion
+    updatePromotion: async (id: number, data: UpdatePromotionData, token: string): Promise<ApiResponse<Promotion>> => {
+        const formData = new FormData();
+        
+        // Add method spoofing for Laravel
+        // formData.append('_method', 'PUT');
+        
+        // Append all fields to FormData
+        Object.entries(data).forEach(([key, value]) => {
+            if (value !== null && value !== undefined) {
+                if (key === 'image' && value instanceof File) {
+                    formData.append('image', value);
+                } else if (key === 'is_active') {
+                    formData.append(key, value ? '1' : '0');
+                } else {
+                    formData.append(key, String(value));
+                }
+            }
+        });
+
+        return apiClient.post<ApiResponse<Promotion>>(`/promotions/${id}`, formData, token);
+    },
+
+    // Delete promotion
+    deletePromotion: async (id: number, token: string): Promise<ApiResponse<any>> => {
+        return apiClient.delete<ApiResponse<any>>(`/promotions/${id}`, undefined, token);
+    },
+
+    // Toggle promotion active status
+    toggleActive: async (id: number, isActive: boolean, token: string): Promise<ApiResponse<Promotion>> => {
+        return apiClient.put<ApiResponse<Promotion>>(`/promotions/${id}`, { is_active: isActive }, token);
+    }
+};

lib/api/referral.ts

@@ -0,0 +1,26 @@
+import { apiClient } from './client';
+import { PendingReferralRewardsResponse, FulfillReferralRewardResponse } from '@/types/referral';
+
+export const referralApi = {
+    // List users who reached the invite target and have not been granted the free month yet
+    getPendingRewards: async (token: string): Promise<PendingReferralRewardsResponse> => {
+        return apiClient.get<PendingReferralRewardsResponse>('/admin/referral-rewards', token);
+    },
+
+    // Grant the free month to a user. product_id is optional: omit it to
+    // auto-grant the meditation package's monthly product.
+    fulfillReward: async (
+        userId: number,
+        token: string,
+        productId?: number
+    ): Promise<FulfillReferralRewardResponse> => {
+        const data = productId ? { product_id: productId } : {};
+
+        return apiClient.post<FulfillReferralRewardResponse>(
+            `/admin/referral-rewards/${userId}/fulfill`,
+            data,
+            token
+        );
+    }
+};
+

lib/api/reminders.ts

@@ -0,0 +1,64 @@
+import { apiClient } from './client';
+import { Reminder, CreateReminderData, UpdateReminderData, ApiResponse } from '@/types/reminder';
+
+export const remindersApi = {
+    // Get all reminders for a package
+    getReminders: async (packageName: string, token: string): Promise<Reminder[]> => {
+        return apiClient.get<Reminder[]>(`/package-names/${packageName}/reminders`, token);
+    },
+
+    // Get single reminder
+    getReminder: async (packageName: string, reminderId: number, token: string): Promise<Reminder> => {
+        return apiClient.get<Reminder>(`/package-names/${packageName}/reminders/${reminderId}`, token);
+    },
+
+    // Create new reminder
+    createReminder: async (packageName: string, data: CreateReminderData, token: string): Promise<ApiResponse<Reminder>> => {
+        const formData = new FormData();
+        
+        // Append all fields to FormData
+        Object.entries(data).forEach(([key, value]) => {
+            if (value !== null && value !== undefined) {
+                if (key === 'data' && typeof value === 'object') {
+                    formData.append(key, JSON.stringify(value));
+                } else {
+                    formData.append(key, String(value));
+                }
+            }
+        });
+
+        return apiClient.post<ApiResponse<Reminder>>(`/package-names/${packageName}/reminders`, formData, token);
+    },
+
+    // Update reminder (using PUT)
+    updateReminder: async (packageName: string, reminderId: number, data: UpdateReminderData, token: string): Promise<ApiResponse<Reminder>> => {
+        return apiClient.put<ApiResponse<Reminder>>(
+            `/package-names/${packageName}/reminders/${reminderId}`,
+            data,
+            token
+        );
+    },
+
+    // Delete reminder
+    deleteReminder: async (packageName: string, reminderId: number, token: string): Promise<ApiResponse<any>> => {
+        return apiClient.delete<ApiResponse<any>>(`/package-names/${packageName}/reminders/${reminderId}`, undefined, token);
+    },
+
+    // Alternative update method using POST with _method spoofing (if PUT is not supported)
+    updateReminderWithSpoof: async (packageName: string, reminderId: number, data: UpdateReminderData, token: string): Promise<ApiResponse<Reminder>> => {
+        const formData = new FormData();
+        formData.append('_method', 'PUT');
+        
+        Object.entries(data).forEach(([key, value]) => {
+            if (value !== null && value !== undefined) {
+                if (key === 'data' && typeof value === 'object') {
+                    formData.append(key, JSON.stringify(value));
+                } else {
+                    formData.append(key, String(value));
+                }
+            }
+        });
+
+        return apiClient.post<ApiResponse<Reminder>>(`/package-names/${packageName}/reminders/${reminderId}`, formData, token);
+    }
+};

lib/api/users.ts

@@ -0,0 +1,77 @@
+import { apiClient } from './client';
+import { User, Product, ApiResponse, UpdateUserProfileData } from '@/types/user';
+
+export const usersApi = {
+    // Get user status by email or mobile - package name is now a parameter
+    getUserStatus: async (identifier: string, packageName: string, token: string): Promise<User> => {
+        // Check if identifier is email or mobile
+        const isEmail = identifier.includes('@');
+        const endpoint = isEmail
+            ? `/admin/users/${identifier}/status?package_name=${packageName}`
+            : `/admin/users/${identifier}/status?package_name=${packageName}`;
+
+        return apiClient.get<User>(endpoint, token);
+    },
+
+    // Subscribe user to a product
+    subscribeUser: async (identifier: string, productId: number, token: string): Promise<ApiResponse<any>> => {
+        const data = {
+            product_id: productId
+        };
+
+        return apiClient.put<ApiResponse<any>>(
+            `/admin/users/${identifier}/status`,
+            data,
+            token
+        );
+    },
+
+    // Unsubscribe user from a product
+    unsubscribeUser: async (identifier: string, productId: number, token: string): Promise<ApiResponse<any>> => {
+        const data = {
+            product_id: productId
+        };
+
+        return apiClient.delete<ApiResponse<any>>(
+            `/admin/users/${identifier}/status`,
+            data,
+            token
+        );
+    },
+
+    // Get user transactions
+    getUserTransactions: async (userId: number, packageName: string, token: string): Promise<any> => {
+        return apiClient.get(`/admin/users/${userId}/transactions?package_name=${packageName}`, token);
+    },
+
+    // Get products for a specific package
+    getProductsByPackage: async (packageName: string, token: string): Promise<Product[]> => {
+        return apiClient.get<Product[]>(`/package-names/${packageName}/products`, token);
+    },
+
+    // Update a user's profile (admin). Uses FormData because avatar may be an image file.
+    updateUserProfile: async (
+        identifier: string,
+        data: UpdateUserProfileData,
+        token: string
+    ): Promise<ApiResponse<any>> => {
+        const formData = new FormData();
+
+        Object.entries(data).forEach(([key, value]) => {
+            if (value !== null && value !== undefined && value !== '') {
+                if (key === 'avatar' && value instanceof File) {
+                    formData.append('avatar', value);
+                } else if (key !== 'avatar') {
+                    formData.append(key, String(value));
+                }
+            }
+        });
+
+        return apiClient.post<ApiResponse<any>>(`/admin/users/${identifier}/profile`, formData, token);
+    },
+
+    // Delete a user (admin)
+    deleteUser: async (identifier: string, token: string): Promise<ApiResponse<any>> => {
+        return apiClient.delete<ApiResponse<any>>(`/admin/users/${identifier}`, undefined, token);
+    }
+};

lib/utils.ts

@@ -0,0 +1,61 @@
+import { User } from "@/types/user";
+
+// 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";
+
+export const formatDate = (dateString: string | null): string => {
+    if (!dateString) return 'نامشخص';
+
+    try {
+        const date = new Date(dateString);
+        return new Intl.DateTimeFormat('fa-IR', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        }).format(date);
+    } catch {
+        return 'نامشخص';
+    }
+};
+
+export const formatPrice = (price: number | null): string => {
+    if (price === null || price === undefined) return '0';
+    return new Intl.NumberFormat('fa-IR').format(price);
+};
+
+export const getFullName = (user: User): string => {
+    if (user.full_name) return user.full_name;
+
+    const firstName = user.first_name || '';
+    const lastName = user.last_name || '';
+
+    if (firstName || lastName) {
+        return `${firstName} ${lastName}`.trim();
+    }
+
+    return 'نامشخص';
+};
+
+export const getEmail = (email: string | null): string => {
+    return email || 'ایمیل ثبت نشده';
+};
+
+export const getMobile = (mobile: string | null): string => {
+    return mobile || 'شماره موبایل ثبت نشده';
+};
+
+export const formatTime = (dateString: string | null): string => {
+    if (!dateString) return '';
+    
+    try {
+        const date = new Date(dateString);
+        return new Intl.DateTimeFormat('fa-IR', {
+            hour: '2-digit',
+            minute: '2-digit',
+        }).format(date);
+    } catch {
+        return '';
+    }
+};

middleware.ts

@@ -0,0 +1,30 @@
+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*',
+};

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,6 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+   output: 'export', 
+};
+export default nextConfig;

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "approagency admin pannel",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "prepare": "git config core.hooksPath .githooks || true"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "framer-motion": "^12.23.24",
+    "lucide-react": "^0.552.0",
+    "next": "16.0.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.24",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.1",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.2.0",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,9 @@
+// postcss.config.mjs
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {}, // ✅ correct for Tailwind 4
+    autoprefixer: {},
+  },
+};
+
+export default config;

public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

scripts/deploy.sh

@@ -0,0 +1,46 @@
+#!/usr/bin/env bash
+# Build the static site locally, then replace the server directory with it.
+#
+#   - Builds on THIS machine (npm run build -> ./out).
+#   - Streams out/ over a single SSH connection (tar pipe) and swaps the
+#     contents of the target dir on the server. No rsync/sshpass required.
+#
+# Password handling:
+#   - If `sshpass` is installed AND DEPLOY_PASSWORD is set (env or .env.deploy),
+#     the deploy is fully unattended.
+#   - Otherwise SSH prompts for the password once (interactive).
+#
+# Config (override via env or .env.deploy):
+set -euo pipefail
+cd "$(git rev-parse --show-toplevel 2>/dev/null || dirname "$(dirname "$0")")"
+
+# Optional local secrets file (gitignored).
+[ -f .env.deploy ] && . ./.env.deploy
+
+DEPLOY_HOST="${DEPLOY_HOST:-185.226.116.88}"
+DEPLOY_USER="${DEPLOY_USER:-ubuntu}"
+DEPLOY_PATH="${DEPLOY_PATH:-/var/www/appro-admin}"
+DEPLOY_PASSWORD="${DEPLOY_PASSWORD:-}"
+
+echo "▸ Building locally…"
+npm run build
+
+if [ ! -d out ]; then
+  echo "✗ Build did not produce ./out" >&2
+  exit 1
+fi
+
+# Pick the SSH command: unattended with sshpass, else interactive prompt.
+ssh_cmd=(ssh -o StrictHostKeyChecking=no "$DEPLOY_USER@$DEPLOY_HOST")
+if command -v sshpass >/dev/null 2>&1 && [ -n "$DEPLOY_PASSWORD" ]; then
+  ssh_cmd=(sshpass -p "$DEPLOY_PASSWORD" "${ssh_cmd[@]}")
+else
+  echo "ℹ sshpass/password not available — SSH will prompt for the password."
+fi
+
+echo "▸ Uploading to $DEPLOY_USER@$DEPLOY_HOST:$DEPLOY_PATH …"
+# Replace the directory contents (incl. dotfiles) then extract the new build.
+tar -C out -czf - . | "${ssh_cmd[@]}" \
+  "set -e; mkdir -p '$DEPLOY_PATH'; find '$DEPLOY_PATH' -mindepth 1 -delete; tar -C '$DEPLOY_PATH' -xzf -"
+
+echo "✓ Deployed to $DEPLOY_HOST:$DEPLOY_PATH"

tailwind.config.ts

@@ -0,0 +1,35 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      // fontFamily: {
+      //   sans: [
+      //     "Dana",
+      //     "Inter",
+      //     "var(--font-geist-sans)",
+      //     "system-ui",
+      //     "sans-serif",
+      //   ],
+      // },
+
+      // animation: {
+      //   fadeInUp: "fadeInUp 0.6s ease-out",
+      // },
+      // keyframes: {
+      //   fadeInUp: {
+      //     "0%": { opacity: "0", transform: "translateY(30px)" },
+      //     "100%": { opacity: "1", transform: "translateY(0)" },
+      //   },
+      // },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

types/auth.ts

@@ -0,0 +1,26 @@
+export interface LoginCredentials {
+    auth: string;
+    password: string;
+    package_name: string;
+}
+
+export interface LoginResponse {
+    token: string;
+    user?: User;
+    message?: string;
+}
+
+export interface User {
+    id: string;
+    email: string;
+    name?: string;
+    role?: string;
+    is_admin?: String;
+}
+
+export interface AuthState {
+    user: User | null;
+    token: string | null;
+    isLoading: boolean;
+    error: string | null;
+}

types/package.ts

@@ -0,0 +1,45 @@
+export interface PackageName {
+    id: number;
+    name: string | null;
+    title: string | null;
+    image: string | null | File | any;
+    v1_identifier: string | null;
+    uuid: string;
+    created_at: string;
+    updated_at: string;
+    cafe_config_id: number | null;
+    myket_access_token: string | null;
+    web_app_url: string | null;
+    tries: number | null;
+}
+
+export interface CreatePackageData {
+    name: string;
+    title: string;
+    avatar?: File | null;
+    v1_identifier?: string | null;
+    myket_access_token?: string | null;
+    cafe_config_id?: number | null;
+    web_app_url?: string | null;
+    tries?: number;
+    firebase_json?: File | null;
+}
+
+export interface UpdatePackageData {
+    name?: string;
+    title?: string;
+    avatar?: File | null;
+    v1_identifier?: string | null;
+    myket_access_token?: string | null;
+    cafe_config_id?: number | null;
+    web_app_url?: string | null;
+    tries?: number;
+    firebase_json?: File | null;
+    _method?: string; // For Laravel method spoofing
+}
+
+export interface ApiResponse<T> {
+    data: T;
+    message?: string;
+    status?: number;
+}

types/product.ts

@@ -0,0 +1,63 @@
+export interface Product {
+    id: number;
+    package_name_id: number;
+    title: string | null;
+    price: number | null;
+    type: number | null;
+    uuid: string;
+    created_at: string;
+    updated_at: string;
+    descriptions: string[] | null;
+    // Display-only text fields (no calculation)
+    discounted_price: string | null; // قیمت کلی تخفیف خورده
+    daily_price: string | null;      // قیمت روزانه
+    discount: string | null;         // تخفیف
+    is_best_seller: boolean;         // پرفروش‌ترین
+    sort_order: number;              // ترتیب (۰ بالاترین)
+}
+
+export interface CreateProductData {
+    title: string;
+    price: number;
+    type: number;
+    descriptions?: string[];
+    discounted_price?: string;
+    daily_price?: string;
+    discount?: string;
+    is_best_seller?: boolean;
+    sort_order?: number;
+}
+
+export interface UpdateProductData {
+    title?: string;
+    price?: number;
+    type?: number;
+    descriptions?: string[];
+    discounted_price?: string;
+    daily_price?: string;
+    discount?: string;
+    is_best_seller?: boolean;
+    sort_order?: number;
+}
+
+export interface ApiResponse<T> {
+    data: T;
+    message?: string;
+    status?: number;
+}
+
+// Product types mapping
+export const PRODUCT_TYPES = {
+    1: 'دائمی',
+    2: 'سالیانه',
+    3: '۶ ماهه',
+    4: 'ماهیانه',
+    5: 'سه ماهه'
+} as const;
+
+export type ProductType = keyof typeof PRODUCT_TYPES;
+
+export const getProductTypeLabel = (type: number | null): string => {
+    if (!type) return 'نامشخص';
+    return PRODUCT_TYPES[type as ProductType] || 'نامشخص';
+};

types/promotion.ts

@@ -0,0 +1,69 @@
+export type PromotionType = 'slider' | 'action' | 'paid_app' | 'banner';
+
+export const PROMOTION_TYPES = {
+    slider: 'اسلایدر',
+    action: 'اکشن',
+    paid_app: 'اپلیکیشن پولی',
+    banner: 'بنر'
+} as const;
+
+export interface Promotion {
+    id: number;
+    type: PromotionType;
+    title: string | null;
+    image_url:string | null;
+    subtitle: string | null;
+    image: string | null;
+    action_text: string | null;
+    url_myket: string | null;
+    url_bazzar: string | null;
+    url_google_play: string | null;
+    url_site: string | null;
+    is_active: boolean;
+    priority: number | null;
+    start_at: string | null;
+    end_at: string | null;
+    created_at: string;
+    updated_at: string;
+}
+
+export interface CreatePromotionData {
+    type: PromotionType;
+    title?: string | null;
+    subtitle?: string | null;
+    image?: File | null;
+    action_text?: string | null;
+    url_myket?: string | null;
+    url_bazzar?: string | null;
+    url_google_play?: string | null;
+    url_site?: string | null;
+    priority?: number | null;
+    start_at?: string | null;
+    end_at?: string | null;
+}
+
+export interface UpdatePromotionData {
+    type?: PromotionType;
+    title?: string | null;
+    subtitle?: string | null;
+    image?: File | null;
+    action_text?: string | null;
+    url_myket?: string | null;
+    url_bazzar?: string | null;
+    url_google_play?: string | null;
+    url_site?: string | null;
+    is_active?: boolean;
+    priority?: number | null;
+    start_at?: string | null;
+    end_at?: string | null;
+}
+
+export interface ApiResponse<T> {
+    data: T;
+    message?: string;
+    status?: number;
+}
+
+export const getPromotionTypeLabel = (type: PromotionType): string => {
+    return PROMOTION_TYPES[type] || type;
+};

types/referral.ts

@@ -0,0 +1,20 @@
+export interface ReferralRewardUser {
+    id: number;
+    uuid: string;
+    name: string;
+    email: string | null;
+    mobile: string | null;
+    referral_code: string | null;
+    successful_invites: number;
+}
+
+export interface PendingReferralRewardsResponse {
+    subscription_target: number;
+    data: ReferralRewardUser[];
+}
+
+export interface FulfillReferralRewardResponse {
+    message: string;
+    user_id?: number;
+    product_id?: number;
+}

types/reminder.ts

@@ -0,0 +1,50 @@
+export type ReminderType = 'reminder' | 'motivate';
+
+export const REMINDER_TYPES = {
+    reminder: 'یادآوری',
+    motivate: 'انگیزشی'
+} as const;
+
+export interface Reminder {
+    id: number;
+    title: string;
+    description: string | null;
+    time: string;
+    repeatable: boolean;
+    repeat_days: number | null;
+    data: any | null;
+    type: ReminderType;
+    package_name?: string;
+    created_at: string;
+    updated_at: string;
+}
+
+export interface CreateReminderData {
+    title: string;
+    description?: string | null;
+    time: string;
+    repeatable?: boolean;
+    repeat_days?: number | null;
+    data?: any | null;
+    type: ReminderType;
+}
+
+export interface UpdateReminderData {
+    title?: string;
+    description?: string | null;
+    time?: string;
+    repeatable?: boolean;
+    repeat_days?: number | null;
+    data?: any | null;
+    type?: ReminderType;
+}
+
+export interface ApiResponse<T> {
+    data: T;
+    message?: string;
+    status?: number;
+}
+
+export const getReminderTypeLabel = (type: ReminderType): string => {
+    return REMINDER_TYPES[type] || type;
+};

types/user.ts

@@ -0,0 +1,85 @@
+export interface User {
+    id: number;
+    first_name: string | null;
+    last_name: string | null;
+    email: string | null;
+    mobile: string | null;
+    avatar: string | null;
+    uuid: string;
+    is_admin: boolean;
+    wallet: number;
+    created_at: string;
+    updated_at: string;
+    birthday: string | null;
+    gender: string | null;
+    email_verified_at: string | null;
+    remember_token: string | null;
+    full_name: string | null;
+    products: UserProduct[];
+}
+
+export interface UserProduct {
+    id: number;
+    package_name_id: number;
+    title: string | null;
+    price: number | null;
+    type: number | null;
+    uuid: string;
+    created_at: string;
+    updated_at: string;
+    descriptions: string[] | null;
+    pivot: ProductPivot;
+    package_name: PackageName | null;
+}
+
+export interface ProductPivot {
+    user_id: number;
+    product_id: number;
+    expire_at: string | null;
+    purchase_token: string | null;
+    gateway: string | null;
+    created_at: string;
+    updated_at: string;
+}
+
+export interface PackageName {
+    id: number;
+    name: string | null;
+    title: string | null;
+    image: string | null;
+    v1_identifier: string | null;
+    uuid: string;
+    created_at: string;
+    updated_at: string;
+    cafe_config_id: string | null;
+    myket_access_token: string | null;
+    web_app_url: string | null;
+    tries: number | null;
+}
+
+export interface Product {
+    id: number;
+    title: string | null;
+    price: number | null;
+    type: number | null;
+    descriptions: string[] | null;
+}
+
+export interface UserSearchParams {
+    searchTerm: string;
+    package_name: string;
+}
+
+export interface UpdateUserProfileData {
+    first_name?: string | null;
+    last_name?: string | null;
+    email?: string | null;
+    mobile?: string | null;
+    avatar?: File | null;
+}
+
+export interface ApiResponse<T> {
+    data: T;
+    message?: string | null;
+    status?: number | null;
+}