Amirmahdi/approagency-admin-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: redesign

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