feat: initial admin panel
This commit is contained in:
@@ -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 p-4 rounded-lg shadow mb-6">
|
||||
<label htmlFor="package-select" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
انتخاب پکیج
|
||||
</label>
|
||||
<select
|
||||
id="package-select"
|
||||
value={selectedPackage || ''}
|
||||
onChange={handleChange}
|
||||
disabled={loading || isLoading}
|
||||
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 disabled:opacity-50"
|
||||
>
|
||||
{loading ? (
|
||||
<option>در حال بارگذاری...</option>
|
||||
) : (
|
||||
packages.map((pkg) => (
|
||||
<option key={pkg.id} value={pkg.name || ''}>
|
||||
{pkg.title} ({pkg.name})
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 shadow overflow-hidden sm:rounded-lg mb-6">
|
||||
<div className="px-4 py-5 sm:px-6">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900">
|
||||
اطلاعات کاربر
|
||||
</h3>
|
||||
</div>
|
||||
<div className="border-t border-gray-200">
|
||||
<dl>
|
||||
<div className="bg-gray-50 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">نام کامل</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
|
||||
<UserIcon className="h-4 w-4 ml-1 text-gray-400" />
|
||||
{getFullName(user)}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="bg-white 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">ایمیل</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
|
||||
<EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400" />
|
||||
{getEmail(user.email)}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="bg-gray-50 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">شماره موبایل</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
|
||||
<PhoneIcon className="h-4 w-4 ml-1 text-gray-400" />
|
||||
{getMobile(user.mobile)}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="bg-white 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">کیف پول</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
|
||||
<WalletIcon className="h-4 w-4 ml-1 text-gray-400" />
|
||||
{formatPrice(user.wallet)} تومان
|
||||
</dd>
|
||||
</div>
|
||||
<div className="bg-gray-50 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">تاریخ عضویت</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
|
||||
<CalendarIcon className="h-4 w-4 ml-1 text-gray-400" />
|
||||
{formatDate(user.created_at)}
|
||||
</dd>
|
||||
</div>
|
||||
{user.birthday && (
|
||||
<div className="bg-white 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">تاریخ تولد</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
{formatDate(user.birthday)}
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
{user.gender && (
|
||||
<div className="bg-gray-50 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">جنسیت</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
|
||||
{user.gender === 'male' ? 'مرد' : user.gender === 'female' ? 'زن' : user.gender}
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 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">
|
||||
اشتراکهای کاربر
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Current Subscriptions grouped by package */}
|
||||
<div className="border-t border-gray-200">
|
||||
{Object.keys(productsByPackage).length > 0 ? (
|
||||
Object.entries(productsByPackage).map(([packageName, packageProducts]) => (
|
||||
<div key={packageName} className="border-b border-gray-200 last:border-b-0">
|
||||
<div className="bg-gray-50 px-4 py-2">
|
||||
<h4 className="text-sm font-medium text-gray-700">
|
||||
پکیج: {packageName}
|
||||
</h4>
|
||||
</div>
|
||||
<ul className="divide-y divide-gray-200">
|
||||
{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 truncate">
|
||||
{product.title || 'محصول'}
|
||||
</p>
|
||||
{subscriptionCount > 1 && (
|
||||
<span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 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' : 'bg-red-100 text-red-800'}`}>
|
||||
<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">
|
||||
قیمت: {formatPrice(product.price)} تومان
|
||||
</p>
|
||||
<p className="mt-2 flex items-center text-sm text-gray-500 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 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 sm:mt-0">
|
||||
<button
|
||||
onClick={() => onUnsubscribe(product.id)}
|
||||
disabled={isLoading}
|
||||
className="text-red-600 hover:text-red-900 disabled:opacity-50"
|
||||
>
|
||||
لغو اشتراک
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="px-4 py-5 sm:px-6 text-center text-gray-500">
|
||||
کاربر هیچ اشتراکی ندارد
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Available Products for Subscription */}
|
||||
{availableProducts && availableProducts.length > 0 && selectedPackage && (
|
||||
<div className="border-t border-gray-200 px-4 py-5 sm:px-6">
|
||||
<h4 className="text-md font-medium text-gray-900 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 rounded-lg p-4 text-right hover:border-indigo-500 hover:bg-indigo-50 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">
|
||||
{product.title || 'محصول'}
|
||||
</p>
|
||||
{subscriptionCount > 0 && (
|
||||
<p className="mt-1 text-xs text-amber-600">
|
||||
{subscriptionCount} اشتراک فعال دارد
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<PlusCircleIcon className="h-5 w-5 text-indigo-600" />
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-gray-500">
|
||||
برای افزودن اشتراک جدید کلیک کنید
|
||||
</p>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="search"
|
||||
className="block w-full pr-10 pl-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
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 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isLoading ? 'در حال جستجو...' : 'جستجو'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user