feat: add refferal feature
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import Link from 'next/link';
|
||||
import { UsersIcon, CubeIcon, TagIcon , BellIcon } from '@heroicons/react/24/outline';
|
||||
import { UsersIcon, CubeIcon, TagIcon , BellIcon, GiftIcon } from '@heroicons/react/24/outline';
|
||||
import { MegaphoneIcon } from 'lucide-react';
|
||||
// import { BellIcon } from 'lucide-react';
|
||||
|
||||
@@ -77,6 +77,15 @@ export default function Dashboard() {
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/admin/referral-rewards" className="block">
|
||||
<div className="bg-emerald-50 hover:bg-emerald-100 rounded-lg p-6 transition-colors">
|
||||
<GiftIcon className="h-8 w-8 text-emerald-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>
|
||||
|
||||
@@ -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">
|
||||
پاداشهای معرفی
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
کاربرانی که به حد نصاب دعوت موفق رسیدهاند و هنوز اشتراک رایگان دریافت نکردهاند.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={loadRewards}
|
||||
disabled={isLoading}
|
||||
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
|
||||
>
|
||||
<ArrowPathIcon className={`h-5 w-5 ml-2 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
بروزرسانی
|
||||
</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>
|
||||
)}
|
||||
|
||||
{isLoading && users.length === 0 ? (
|
||||
<div className="text-center py-12 bg-white rounded-lg shadow">
|
||||
<p className="text-gray-500">در حال بارگذاری...</p>
|
||||
</div>
|
||||
) : (
|
||||
<ReferralList
|
||||
users={users}
|
||||
subscriptionTarget={subscriptionTarget}
|
||||
onFulfill={handleFulfill}
|
||||
isLoading={isLoading}
|
||||
fulfillingId={fulfillingId}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -7,10 +7,12 @@ 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 } from '@/types/user';
|
||||
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();
|
||||
@@ -21,6 +23,7 @@ export default function UsersPage() {
|
||||
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(() => {
|
||||
@@ -145,6 +148,66 @@ export default function UsersPage() {
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
@@ -261,7 +324,29 @@ export default function UsersPage() {
|
||||
)}
|
||||
|
||||
{/* User Info */}
|
||||
{user && <UserInfo user={user} />}
|
||||
{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 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
|
||||
>
|
||||
<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 disabled:opacity-50"
|
||||
>
|
||||
<TrashIcon className="h-5 w-5 ml-2" />
|
||||
حذف کاربر
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* User Products */}
|
||||
{user && selectedPackage && (
|
||||
@@ -274,6 +359,16 @@ export default function UsersPage() {
|
||||
selectedPackage={selectedPackage}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Edit User Modal */}
|
||||
{user && isEditing && (
|
||||
<UserEditForm
|
||||
user={user}
|
||||
onSubmit={handleEditSubmit}
|
||||
onCancel={() => setIsEditing(false)}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user