fix: redesign
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
import { PackageName } from '@/types/package';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { packagesApi } from '@/lib/api/packages';
|
||||
import { CubeIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface PackageSelectorProps {
|
||||
token: string;
|
||||
@@ -25,7 +26,6 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
|
||||
const data = await packagesApi.getAllPackages(token);
|
||||
setPackages(data);
|
||||
|
||||
// Select first package if none selected
|
||||
if (data.length > 0 && !selectedPackage) {
|
||||
onPackageChange(data[0].name!);
|
||||
}
|
||||
@@ -36,32 +36,73 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
onPackageChange(e.target.value);
|
||||
};
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900 p-4 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm mb-6">
|
||||
<div className="animate-pulse flex items-center gap-3">
|
||||
<div className="h-10 w-10 bg-gray-200 dark:bg-gray-800 rounded-xl" />
|
||||
<div className="flex-1">
|
||||
<div className="h-3 w-24 bg-gray-200 dark:bg-gray-800 rounded mb-2" />
|
||||
<div className="h-4 w-48 bg-gray-200 dark:bg-gray-800 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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">
|
||||
انتخاب پکیج
|
||||
<div className="mb-6">
|
||||
<label 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 className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{packages.map((pkg) => {
|
||||
const isSelected = selectedPackage === pkg.name;
|
||||
return (
|
||||
<button
|
||||
key={pkg.id}
|
||||
onClick={() => onPackageChange(pkg.name!)}
|
||||
disabled={isLoading}
|
||||
className={`flex items-center gap-3 p-4 rounded-2xl text-right transition-all duration-150 ${
|
||||
isSelected
|
||||
? 'bg-indigo-50 dark:bg-indigo-500/10 ring-2 ring-indigo-600 dark:ring-indigo-400 shadow-sm'
|
||||
: 'bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 hover:ring-gray-300 dark:hover:ring-gray-700 hover:shadow-sm'
|
||||
} disabled:opacity-50`}
|
||||
>
|
||||
{pkg.image && typeof pkg.image === 'string' ? (
|
||||
<img src={pkg.image} alt={pkg.title || ''} className="h-10 w-10 rounded-xl object-cover flex-shrink-0" />
|
||||
) : (
|
||||
<div className={`h-10 w-10 rounded-xl flex items-center justify-center flex-shrink-0 ${
|
||||
isSelected
|
||||
? 'bg-indigo-100 dark:bg-indigo-500/15'
|
||||
: 'bg-gray-100 dark:bg-gray-800'
|
||||
}`}>
|
||||
<CubeIcon className={`h-5 w-5 ${isSelected ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-400 dark:text-gray-500'}`} />
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<p className={`text-sm font-semibold truncate ${
|
||||
isSelected ? 'text-indigo-700 dark:text-indigo-400' : 'text-gray-900 dark:text-gray-100'
|
||||
}`}>
|
||||
{pkg.title || 'بدون عنوان'}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 truncate" dir="ltr">
|
||||
{pkg.name}
|
||||
</p>
|
||||
</div>
|
||||
{isSelected && (
|
||||
<div className="mr-auto flex-shrink-0">
|
||||
<div className="h-5 w-5 rounded-full bg-indigo-600 dark:bg-indigo-400 flex items-center justify-center">
|
||||
<svg className="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,106 +22,65 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
|
||||
|
||||
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';
|
||||
const inputClass = 'block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/60 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 dark:focus:border-indigo-400 transition-colors';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';
|
||||
|
||||
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="bg-white dark:bg-gray-900 rounded-2xl 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"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">ویرایش اطلاعات کاربر</h3>
|
||||
<button onClick={onCancel} className="p-2 rounded-lg text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" type="button">
|
||||
<XMarkIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="px-6 py-4 space-y-4">
|
||||
<form onSubmit={handleSubmit} className="px-6 py-5 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 })}
|
||||
/>
|
||||
<label className={labelClass}>نام</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 })}
|
||||
/>
|
||||
<label className={labelClass}>نام خانوادگی</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 })}
|
||||
/>
|
||||
<label className={labelClass}>ایمیل</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 })}
|
||||
/>
|
||||
<label className={labelClass}>شماره موبایل</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>
|
||||
<label className={labelClass}>آواتار</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 })
|
||||
}
|
||||
className="block w-full text-sm text-gray-600 dark:text-gray-400 file:ml-0 file:py-2 file:px-4 file:rounded-xl 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-500/10 dark:file:text-indigo-400 dark:hover:file:bg-indigo-500/15 transition-colors"
|
||||
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"
|
||||
>
|
||||
<div className="flex justify-end gap-3 pt-3 border-t border-gray-100 dark:border-gray-800">
|
||||
<button type="button" onClick={onCancel} disabled={isLoading} className="px-5 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 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"
|
||||
>
|
||||
<button type="submit" disabled={isLoading} className="px-5 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/30 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20">
|
||||
{isLoading ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -9,68 +9,105 @@ interface UserInfoProps {
|
||||
}
|
||||
|
||||
export default function UserInfo({ user }: UserInfoProps) {
|
||||
const fullName = getFullName(user);
|
||||
const initials = fullName
|
||||
.split(' ')
|
||||
.map((w) => w[0])
|
||||
.slice(0, 2)
|
||||
.join('')
|
||||
.toUpperCase();
|
||||
|
||||
const stats = [
|
||||
{
|
||||
label: 'کیف پول',
|
||||
value: `${formatPrice(user.wallet)} تومان`,
|
||||
icon: WalletIcon,
|
||||
color: 'bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
|
||||
},
|
||||
{
|
||||
label: 'عضویت',
|
||||
value: formatDate(user.created_at),
|
||||
icon: CalendarIcon,
|
||||
color: 'bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400',
|
||||
},
|
||||
];
|
||||
|
||||
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 className="bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm overflow-hidden mb-6">
|
||||
{/* Profile Header */}
|
||||
<div className="bg-gradient-to-l from-indigo-600 to-indigo-700 px-6 py-5">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-14 w-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center text-white font-bold text-lg flex-shrink-0">
|
||||
{initials || <UserIcon className="h-6 w-6" />}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-lg font-bold text-white truncate">
|
||||
{fullName || 'کاربر بدون نام'}
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
{user.email && (
|
||||
<span className="text-sm text-indigo-100 flex items-center gap-1" dir="ltr">
|
||||
<EnvelopeIcon className="h-3.5 w-3.5" />
|
||||
{user.email}
|
||||
</span>
|
||||
)}
|
||||
{user.mobile && (
|
||||
<span className="text-sm text-indigo-100 flex items-center gap-1" dir="ltr">
|
||||
<PhoneIcon className="h-3.5 w-3.5" />
|
||||
{user.mobile}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{/* Stats Row */}
|
||||
<div className="grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-800 border-b border-gray-200 dark:border-gray-800">
|
||||
{stats.map((stat) => (
|
||||
<div key={stat.label} className="px-5 py-4">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className={`h-7 w-7 rounded-lg flex items-center justify-center ${stat.color}`}>
|
||||
<stat.icon className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">{stat.label}</span>
|
||||
</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>
|
||||
<p className="text-sm font-semibold text-gray-900 dark:text-gray-100" dir="ltr">{stat.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Details Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-px bg-gray-200 dark:bg-gray-800">
|
||||
<InfoRow icon={UserIcon} label="نام کامل" value={getFullName(user)} />
|
||||
<InfoRow icon={EnvelopeIcon} label="ایمیل" value={getEmail(user.email)} dir="ltr" />
|
||||
<InfoRow icon={PhoneIcon} label="شماره موبایل" value={getMobile(user.mobile)} dir="ltr" />
|
||||
<InfoRow icon={WalletIcon} label="موجودی کیف پول" value={`${formatPrice(user.wallet)} تومان`} />
|
||||
{user.birthday && (
|
||||
<InfoRow icon={CalendarIcon} label="تاریخ تولد" value={formatDate(user.birthday)} />
|
||||
)}
|
||||
{user.gender && (
|
||||
<InfoRow
|
||||
icon={UserIcon}
|
||||
label="جنسیت"
|
||||
value={user.gender === 'male' ? 'مرد' : user.gender === 'female' ? 'زن' : user.gender}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function InfoRow({ icon: Icon, label, value, dir }: { icon: React.ElementType; label: string; value: string; dir?: string }) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900 px-5 py-3.5 flex items-center gap-3">
|
||||
<div className="h-7 w-7 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center flex-shrink-0">
|
||||
<Icon className="h-3.5 w-3.5 text-gray-400 dark:text-gray-500" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">{label}</p>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" dir={dir}>{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -29,8 +29,8 @@ export default function UserProducts({
|
||||
return {
|
||||
isActive: false,
|
||||
text: 'نامشخص',
|
||||
color: 'text-gray-600',
|
||||
icon: XCircleIcon
|
||||
color: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400',
|
||||
dotColor: 'bg-gray-400',
|
||||
};
|
||||
}
|
||||
|
||||
@@ -41,17 +41,17 @@ export default function UserProducts({
|
||||
return {
|
||||
isActive,
|
||||
text: isActive ? 'فعال' : 'منقضی شده',
|
||||
color: isActive ? 'text-green-600' : 'text-red-600',
|
||||
icon: isActive ? CheckCircleIcon : XCircleIcon
|
||||
color: isActive
|
||||
? 'bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400'
|
||||
: 'bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400',
|
||||
dotColor: isActive ? 'bg-green-500' : 'bg-red-500',
|
||||
};
|
||||
};
|
||||
|
||||
// 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]) {
|
||||
@@ -67,76 +67,61 @@ export default function UserProducts({
|
||||
};
|
||||
|
||||
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">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm 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">
|
||||
اشتراکهای کاربر
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Current Subscriptions grouped by package */}
|
||||
<div className="border-t border-gray-200 dark:border-gray-800">
|
||||
{/* Current Subscriptions */}
|
||||
<div className="divide-y divide-gray-200 dark:divide-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">
|
||||
<div key={packageName}>
|
||||
<div className="px-5 py-2.5 bg-gray-50 dark:bg-gray-800/60">
|
||||
<span className="text-xs font-medium text-gray-500 dark:text-gray-400">
|
||||
پکیج: {packageName}
|
||||
</h4>
|
||||
</span>
|
||||
</div>
|
||||
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
|
||||
<ul className="divide-y divide-gray-100 dark:divide-gray-800/60">
|
||||
{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>
|
||||
<li key={`${product.id}-${product.pivot?.purchase_token || Math.random()}`} className="px-5 py-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="text-sm font-semibold text-indigo-600 dark:text-indigo-400">
|
||||
{product.title || 'محصول'}
|
||||
</p>
|
||||
{subscriptionCount > 1 && (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-lg">
|
||||
×{subscriptionCount}
|
||||
</span>
|
||||
)}
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 text-xs font-medium rounded-lg ${status.color}`}>
|
||||
<span className={`h-1.5 w-1.5 rounded-full ${status.dotColor}`} />
|
||||
{status.text}
|
||||
</span>
|
||||
</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 className="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>قیمت: {formatPrice(product.price)} تومان</span>
|
||||
<span>نوع: {getProductTypeLabel(product.type)}</span>
|
||||
{product.pivot?.expire_at && (
|
||||
<span>انقضا: {formatDate(product.pivot.expire_at)}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onUnsubscribe(product.id)}
|
||||
disabled={isLoading}
|
||||
className="flex-shrink-0 px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 hover:bg-red-100 dark:hover:bg-red-500/20 rounded-lg disabled:opacity-50 transition-colors"
|
||||
>
|
||||
لغو اشتراک
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
@@ -145,19 +130,22 @@ export default function UserProducts({
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="px-4 py-5 sm:px-6 text-center text-gray-500 dark:text-gray-400">
|
||||
کاربر هیچ اشتراکی ندارد
|
||||
<div className="px-5 py-10 text-center">
|
||||
<div className="mx-auto h-10 w-10 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-2">
|
||||
<XCircleIcon className="h-5 w-5 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">کاربر هیچ اشتراکی ندارد</p>
|
||||
</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}
|
||||
<div className="border-t border-gray-200 dark:border-gray-800 px-5 py-5">
|
||||
<h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
افزودن اشتراک جدید
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{availableProducts.map((product) => {
|
||||
const subscriptionCount = getSubscriptionCount(product.id);
|
||||
|
||||
@@ -166,24 +154,21 @@ export default function UserProducts({
|
||||
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"
|
||||
className="flex items-center gap-3 p-3.5 border border-dashed border-indigo-200 dark:border-indigo-800/60 rounded-xl text-right hover:border-indigo-400 hover:bg-indigo-50 dark:hover:border-indigo-600 dark:hover:bg-indigo-500/5 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-150 group"
|
||||
>
|
||||
<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 className="h-8 w-8 rounded-lg bg-indigo-100 dark:bg-indigo-500/15 flex items-center justify-center flex-shrink-0 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-500/25 transition-colors">
|
||||
<PlusCircleIcon className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
|
||||
{product.title || 'محصول'}
|
||||
</p>
|
||||
{subscriptionCount > 0 && (
|
||||
<p className="text-xs text-amber-600 dark:text-amber-400">
|
||||
{subscriptionCount} اشتراک فعال
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
برای افزودن اشتراک جدید کلیک کنید
|
||||
</p>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@@ -192,4 +177,4 @@ export default function UserProducts({
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,35 +19,45 @@ export default function UserSearch({ onSearch, isLoading }: UserSearchProps) {
|
||||
};
|
||||
|
||||
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">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm p-4 mb-6">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label htmlFor="user-search" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
جستجوی کاربر
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1 relative">
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-4 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="جستجو با ایمیل یا شماره موبایل..."
|
||||
id="user-search"
|
||||
className="block w-full pr-11 pl-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/60 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent focus:bg-white dark:focus:bg-gray-800 sm:text-sm transition-all duration-150"
|
||||
placeholder="ایمیل یا شماره موبایل کاربر را وارد کنید..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
dir="rtl"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || !searchTerm.trim()}
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-xl text-sm font-medium 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-all duration-150 shadow-sm shadow-indigo-500/20 whitespace-nowrap"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<div className="h-4 w-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
در حال جستجو
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MagnifyingGlassIcon className="h-4 w-4" />
|
||||
جستجو
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</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>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user