feat: initial admin panel
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
'use client';
|
||||
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import Link from 'next/link';
|
||||
import { UsersIcon, CubeIcon, TagIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function Dashboard() {
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
داشبورد
|
||||
</h1>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
|
||||
>
|
||||
خروج
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-6">
|
||||
<h2 className="text-lg font-semibold mb-4">خوش آمدید، {user?.email}</h2>
|
||||
|
||||
{/* Dashboard Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
|
||||
<Link href="/admin/users" className="block">
|
||||
<div className="bg-indigo-50 hover:bg-indigo-100 rounded-lg p-6 transition-colors">
|
||||
<UsersIcon className="h-8 w-8 text-indigo-600 mb-3" />
|
||||
<h3 className="text-lg font-medium text-gray-900">مدیریت کاربران</h3>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
مشاهده و مدیریت کاربران، اشتراکها و تراکنشها
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/admin/packages" className="block">
|
||||
<div className="bg-green-50 hover:bg-green-100 rounded-lg p-6 transition-colors">
|
||||
<CubeIcon className="h-8 w-8 text-green-600 mb-3" />
|
||||
<h3 className="text-lg font-medium text-gray-900">مدیریت پکیجها</h3>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
ایجاد و مدیریت پکیجهای نرمافزار
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/admin/products" className="block">
|
||||
<div className="bg-purple-50 hover:bg-purple-100 rounded-lg p-6 transition-colors">
|
||||
<TagIcon className="h-8 w-8 text-purple-600 mb-3" />
|
||||
<h3 className="text-lg font-medium text-gray-900">مدیریت محصولات</h3>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
ایجاد و مدیریت محصولات و اشتراکها
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import { AuthProvider } from '@/contexts/AuthContext';
|
||||
|
||||
export default function AdminLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<AuthProvider>
|
||||
<div className="min-h-screen bg-gray-100">
|
||||
{children}
|
||||
</div>
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
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-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-md w-full space-y-8">
|
||||
<div>
|
||||
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
||||
Admin Login
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-sm text-gray-600">
|
||||
Meditation App Admin Panel
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="rounded-md shadow-sm -space-y-px">
|
||||
<div>
|
||||
<label htmlFor="auth" className="sr-only">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="auth"
|
||||
name="auth"
|
||||
type="text"
|
||||
required
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
|
||||
placeholder="Email"
|
||||
value={auth}
|
||||
onChange={(e) => setAuth(e.target.value)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password" className="sr-only">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(error || localError) && (
|
||||
<div className="rounded-md bg-red-50 p-4">
|
||||
<div className="flex">
|
||||
<div className="ml-3">
|
||||
<h3 className="text-sm font-medium text-red-800">
|
||||
{localError || error}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isLoading ? 'Logging in...' : 'Sign in'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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">
|
||||
مدیریت پکیجها
|
||||
</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"
|
||||
>
|
||||
<PlusIcon className="h-5 w-5 ml-2" />
|
||||
پکیج جدید
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
{error && (
|
||||
<div className="mb-4 rounded-md bg-red-50 p-4">
|
||||
<p className="text-sm text-red-800">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="mb-4 rounded-md bg-green-50 p-4">
|
||||
<p className="text-sm text-green-800">{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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } 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 [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]);
|
||||
|
||||
// Load products when package is selected
|
||||
useEffect(() => {
|
||||
if (selectedPackage && token) {
|
||||
loadProducts(selectedPackage.name!);
|
||||
} else {
|
||||
setProducts([]);
|
||||
}
|
||||
}, [selectedPackage, token]);
|
||||
|
||||
const loadPackages = async () => {
|
||||
try {
|
||||
const data = await packagesApi.getAllPackages(token!);
|
||||
setPackages(data);
|
||||
if (data.length > 0 && !selectedPackage) {
|
||||
setSelectedPackage(data[0]);
|
||||
}
|
||||
} catch (err) {
|
||||
setError('خطا در دریافت لیست پکیجها');
|
||||
}
|
||||
};
|
||||
|
||||
const loadProducts = async (packageName: string) => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await productsApi.getProducts(packageName, token!);
|
||||
setProducts(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'خطا در دریافت محصولات');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePackageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const pkg = packages.find(p => p.name === e.target.value);
|
||||
setSelectedPackage(pkg || null);
|
||||
setIsFormVisible(false);
|
||||
setSelectedProduct(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('محصول با موفقیت حذف شد');
|
||||
await loadProducts(selectedPackage.name!);
|
||||
} 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('محصول با موفقیت ایجاد شد');
|
||||
}
|
||||
|
||||
await loadProducts(selectedPackage.name!);
|
||||
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">
|
||||
مدیریت محصولات
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Package Selector */}
|
||||
<div className="bg-white p-4 rounded-lg shadow mb-6">
|
||||
<label htmlFor="package" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
انتخاب پکیج
|
||||
</label>
|
||||
<select
|
||||
id="package"
|
||||
value={selectedPackage?.name || ''}
|
||||
onChange={handlePackageChange}
|
||||
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
>
|
||||
{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 p-4">
|
||||
<p className="text-sm text-red-800">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="mb-4 rounded-md bg-green-50 p-4">
|
||||
<p className="text-sm text-green-800">{success}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form or List */}
|
||||
{selectedPackage && (
|
||||
<>
|
||||
{!isFormVisible && (
|
||||
<div className="mb-4 flex justify-end">
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,280 @@
|
||||
'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 PackageSelector from '@/components/admin/users/PackageSelector';
|
||||
import { User, Product } from '@/types/user';
|
||||
import { PackageName } from '@/types/package';
|
||||
import { formatPrice, getProductTypeLabel } from '@/lib/utils';
|
||||
|
||||
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);
|
||||
|
||||
// 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 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 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 p-4">
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">
|
||||
<svg className="h-5 w-5 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">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="mb-4 rounded-md bg-green-50 p-4">
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">
|
||||
<svg className="h-5 w-5 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">{success}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No Package Selected Message */}
|
||||
{!selectedPackage && packages.length === 0 && (
|
||||
<div className="text-center py-12 bg-white rounded-lg shadow">
|
||||
<p className="text-gray-500">هیچ پکیجی یافت نشد. ابتدا یک پکیج ایجاد کنید.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show products list even without user */}
|
||||
{selectedPackage && products.length > 0 && !user && (
|
||||
<div className="mb-6">
|
||||
<div className="bg-white 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">
|
||||
محصولات موجود در پکیج {selectedPackage}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="border-t border-gray-200 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 rounded-lg p-4 text-right bg-gray-50"
|
||||
>
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
{product.title || 'محصول'}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
قیمت: {formatPrice(product.price)} تومان
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
نوع: {getProductTypeLabel(product.type)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-4 text-sm text-gray-500 text-center">
|
||||
برای افزودن اشتراک به کاربر، ابتدا یک کاربر جستجو کنید
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* User Info */}
|
||||
{user && <UserInfo user={user} />}
|
||||
|
||||
{/* User Products */}
|
||||
{user && selectedPackage && (
|
||||
<UserProducts
|
||||
products={user.products || []}
|
||||
availableProducts={availableProducts}
|
||||
onSubscribe={handleSubscribe}
|
||||
onUnsubscribe={handleUnsubscribe}
|
||||
isLoading={isLoading}
|
||||
selectedPackage={selectedPackage}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user