feat: initial admin panel
This commit is contained in:
@@ -0,0 +1,290 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { PackageName, CreatePackageData, UpdatePackageData } from '@/types/package';
|
||||
import { XMarkIcon, PhotoIcon, DocumentTextIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface PackageFormProps {
|
||||
package?: PackageName | null;
|
||||
onSubmit: (data: CreatePackageData | UpdatePackageData) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoading }: PackageFormProps) {
|
||||
const [formData, setFormData] = useState<CreatePackageData | UpdatePackageData>({
|
||||
name: '',
|
||||
title: '',
|
||||
v1_identifier: '',
|
||||
myket_access_token: '',
|
||||
cafe_config_id: null,
|
||||
web_app_url: '',
|
||||
tries: 0,
|
||||
});
|
||||
|
||||
const [avatarFile, setAvatarFile] = useState<File | null>(null);
|
||||
const [firebaseFile, setFirebaseFile] = useState<File | null>(null);
|
||||
const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (pkg) {
|
||||
setFormData({
|
||||
name: pkg.name || '',
|
||||
title: pkg.title || '',
|
||||
v1_identifier: pkg.v1_identifier || '',
|
||||
myket_access_token: pkg.myket_access_token || '',
|
||||
cafe_config_id: pkg.cafe_config_id,
|
||||
web_app_url: pkg.web_app_url || '',
|
||||
tries: pkg.tries || 0,
|
||||
});
|
||||
|
||||
if (pkg.image && typeof pkg.image === 'string') {
|
||||
setAvatarPreview(pkg.image);
|
||||
}
|
||||
}
|
||||
}, [pkg]);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value === '' ? null : value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value === '' ? null : parseInt(value, 10),
|
||||
}));
|
||||
};
|
||||
|
||||
const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
setAvatarFile(file);
|
||||
setFormData(prev => ({ ...prev, avatar: file }));
|
||||
|
||||
// Create preview
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setAvatarPreview(reader.result as string);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFirebaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
setFirebaseFile(file);
|
||||
setFormData(prev => ({ ...prev, firebase_json: file }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
await onSubmit(formData);
|
||||
};
|
||||
|
||||
const removeAvatar = () => {
|
||||
setAvatarFile(null);
|
||||
setAvatarPreview(null);
|
||||
setFormData(prev => ({ ...prev, avatar: null }));
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
نام پکیج <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
value={formData.name || ''}
|
||||
onChange={handleInputChange}
|
||||
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"
|
||||
placeholder="مثال: com.approagency.meditation"
|
||||
dir="ltr"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
عنوان <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
required
|
||||
value={formData.title || ''}
|
||||
onChange={handleInputChange}
|
||||
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"
|
||||
placeholder="مثال: آرام لند"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Avatar */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
تصویر
|
||||
</label>
|
||||
<div className="flex items-center space-x-3 space-x-reverse">
|
||||
<label className="cursor-pointer 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">
|
||||
<PhotoIcon className="h-5 w-5 ml-2 text-gray-400" />
|
||||
انتخاب تصویر
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleAvatarChange}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
{avatarPreview && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={removeAvatar}
|
||||
className="text-red-600 hover:text-red-900"
|
||||
>
|
||||
<XMarkIcon className="h-5 w-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{avatarPreview && (
|
||||
<div className="mt-2">
|
||||
<img
|
||||
src={avatarPreview}
|
||||
alt="Preview"
|
||||
className="h-20 w-20 object-cover rounded-lg border border-gray-200"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* V1 Identifier */}
|
||||
<div>
|
||||
<label htmlFor="v1_identifier" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
شناسه V1
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="v1_identifier"
|
||||
name="v1_identifier"
|
||||
value={formData.v1_identifier || ''}
|
||||
onChange={handleInputChange}
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Myket Access Token */}
|
||||
<div>
|
||||
<label htmlFor="myket_access_token" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
توکن دسترسی Myket
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="myket_access_token"
|
||||
name="myket_access_token"
|
||||
value={formData.myket_access_token || ''}
|
||||
onChange={handleInputChange}
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Cafe Config ID */}
|
||||
<div>
|
||||
<label htmlFor="cafe_config_id" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
شناسه کافه بازار
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="cafe_config_id"
|
||||
name="cafe_config_id"
|
||||
value={formData.cafe_config_id || ''}
|
||||
onChange={handleNumberChange}
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Web App URL */}
|
||||
<div>
|
||||
<label htmlFor="web_app_url" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
آدرس وب اپلیکیشن
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
id="web_app_url"
|
||||
name="web_app_url"
|
||||
value={formData.web_app_url || ''}
|
||||
onChange={handleInputChange}
|
||||
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"
|
||||
placeholder="https://example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tries */}
|
||||
<div>
|
||||
<label htmlFor="tries" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
تعداد تلاشها
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="tries"
|
||||
name="tries"
|
||||
value={formData.tries || 0}
|
||||
onChange={handleNumberChange}
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Firebase JSON */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
فایل Firebase JSON
|
||||
</label>
|
||||
<label className="cursor-pointer 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">
|
||||
<DocumentTextIcon className="h-5 w-5 ml-2 text-gray-400" />
|
||||
انتخاب فایل
|
||||
<input
|
||||
type="file"
|
||||
accept=".json,application/json"
|
||||
onChange={handleFirebaseChange}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
{firebaseFile && (
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
فایل انتخاب شده: {firebaseFile.name}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Actions */}
|
||||
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="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"
|
||||
>
|
||||
انصراف
|
||||
</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 disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? 'در حال ذخیره...' : pkg ? 'بهروزرسانی' : 'ایجاد'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
'use client';
|
||||
|
||||
import { PackageName } from '@/types/package';
|
||||
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
|
||||
import { formatDate } from '@/lib/utils';
|
||||
|
||||
interface PackageListProps {
|
||||
packages: PackageName[];
|
||||
onEdit: (pkg: PackageName) => void;
|
||||
onDelete: (pkg: PackageName) => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export default function PackageList({ packages, onEdit, onDelete, isLoading }: PackageListProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center py-12">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!packages || packages.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12 bg-white rounded-lg shadow">
|
||||
<p className="text-gray-500">هیچ پکیجی یافت نشد</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<ul className="divide-y divide-gray-200">
|
||||
{packages.map((pkg) => (
|
||||
<li key={pkg.id} className="px-6 py-4 hover:bg-gray-50">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center space-x-3 space-x-reverse">
|
||||
{pkg.image && typeof pkg.image === 'string' && (
|
||||
<img
|
||||
src={pkg.image}
|
||||
alt={pkg.title || ''}
|
||||
className="h-10 w-10 rounded-full object-cover"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-indigo-600 truncate">
|
||||
{pkg.title || 'بدون عنوان'}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
{pkg.name || 'بدون نام'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 sm:flex sm:justify-between">
|
||||
<div className="sm:flex sm:space-x-4 sm:space-x-reverse">
|
||||
<p className="text-xs text-gray-500">
|
||||
شناسه: {pkg.uuid?.substring(0, 8)}...
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1 sm:mt-0">
|
||||
تلاشها: {pkg.tries || 0}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1 sm:mt-0">
|
||||
آخرین بهروزرسانی: {formatDate(pkg.updated_at)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
|
||||
<button
|
||||
onClick={() => onEdit(pkg)}
|
||||
className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
|
||||
>
|
||||
<PencilIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete(pkg)}
|
||||
className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
|
||||
>
|
||||
<TrashIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Product, CreateProductData, UpdateProductData, PRODUCT_TYPES } from '@/types/product';
|
||||
import { PlusIcon, XMarkIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface ProductFormProps {
|
||||
product?: Product | null;
|
||||
packageName: string;
|
||||
onSubmit: (data: CreateProductData | UpdateProductData) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export default function ProductForm({ product, packageName, onSubmit, onCancel, isLoading }: ProductFormProps) {
|
||||
const [formData, setFormData] = useState<CreateProductData | UpdateProductData>({
|
||||
title: '',
|
||||
price: 0,
|
||||
type: 4, // Default to monthly
|
||||
});
|
||||
|
||||
const [descriptions, setDescriptions] = useState<string[]>([]);
|
||||
const [newDescription, setNewDescription] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (product) {
|
||||
setFormData({
|
||||
title: product.title || '',
|
||||
price: product.price || 0,
|
||||
type: product.type || 4,
|
||||
});
|
||||
setDescriptions(product.descriptions || []);
|
||||
}
|
||||
}, [product]);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: name === 'price' ? parseInt(value) || 0 : value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleAddDescription = () => {
|
||||
if (newDescription.trim()) {
|
||||
setDescriptions([...descriptions, newDescription.trim()]);
|
||||
setNewDescription('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveDescription = (index: number) => {
|
||||
setDescriptions(descriptions.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const submitData = {
|
||||
...formData,
|
||||
...(descriptions.length > 0 && { descriptions }),
|
||||
};
|
||||
|
||||
await onSubmit(submitData);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
||||
{product ? 'ویرایش محصول' : 'ایجاد محصول جدید'} برای پکیج {packageName}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
عنوان <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
required
|
||||
value={formData.title || ''}
|
||||
onChange={handleInputChange}
|
||||
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"
|
||||
placeholder="مثال: اشتراک ماهانه"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div>
|
||||
<label htmlFor="price" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
قیمت (تومان) <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="price"
|
||||
name="price"
|
||||
required
|
||||
min="0"
|
||||
value={formData.price || ''}
|
||||
onChange={handleInputChange}
|
||||
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"
|
||||
placeholder="مثال: 60000"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Type */}
|
||||
<div>
|
||||
<label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
نوع اشتراک <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
id="type"
|
||||
name="type"
|
||||
required
|
||||
value={formData.type || 4}
|
||||
onChange={handleInputChange}
|
||||
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"
|
||||
>
|
||||
{Object.entries(PRODUCT_TYPES).map(([value, label]) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Descriptions */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
ویژگیها
|
||||
</label>
|
||||
<div className="flex space-x-2 space-x-reverse">
|
||||
<input
|
||||
type="text"
|
||||
value={newDescription}
|
||||
onChange={(e) => setNewDescription(e.target.value)}
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
placeholder="ویژگی جدید را وارد کنید"
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleAddDescription();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAddDescription}
|
||||
className="inline-flex items-center px-3 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" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Descriptions List */}
|
||||
{descriptions.length > 0 && (
|
||||
<ul className="mt-3 space-y-2">
|
||||
{descriptions.map((desc, index) => (
|
||||
<li key={index} className="flex items-center justify-between bg-gray-50 px-3 py-2 rounded-md">
|
||||
<span className="text-sm text-gray-700">{desc}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveDescription(index)}
|
||||
className="text-red-600 hover:text-red-900"
|
||||
>
|
||||
<XMarkIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Form Actions */}
|
||||
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="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"
|
||||
>
|
||||
انصراف
|
||||
</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 disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? 'در حال ذخیره...' : product ? 'بهروزرسانی' : 'ایجاد'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
'use client';
|
||||
|
||||
import { Product } from '@/types/product';
|
||||
import { getProductTypeLabel, PRODUCT_TYPES } from '@/types/product';
|
||||
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
|
||||
import { formatDate, formatPrice } from '@/lib/utils';
|
||||
|
||||
interface ProductListProps {
|
||||
products: Product[];
|
||||
packageName: string;
|
||||
onEdit: (product: Product) => void;
|
||||
onDelete: (product: Product) => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export default function ProductList({ products, packageName, onEdit, onDelete, isLoading }: ProductListProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center py-12">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!products || products.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12 bg-white rounded-lg shadow">
|
||||
<p className="text-gray-500">هیچ محصولی برای این پکیج یافت نشد</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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">
|
||||
محصولات پکیج {packageName}
|
||||
</h3>
|
||||
</div>
|
||||
<ul className="divide-y divide-gray-200">
|
||||
{products.map((product) => (
|
||||
<li key={product.id} className="px-6 py-4 hover:bg-gray-50">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm font-medium text-indigo-600 truncate">
|
||||
{product.title || 'بدون عنوان'}
|
||||
</p>
|
||||
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
|
||||
{getProductTypeLabel(product.type)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-gray-900">
|
||||
قیمت: {formatPrice(product.price)} تومان
|
||||
</p>
|
||||
{product.descriptions && product.descriptions.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<p className="text-xs text-gray-500 mb-1">ویژگیها:</p>
|
||||
<ul className="list-disc list-inside text-xs text-gray-600 pr-4">
|
||||
{product.descriptions.map((desc, index) => (
|
||||
<li key={index}>{desc}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-gray-500">
|
||||
آخرین بهروزرسانی: {formatDate(product.updated_at)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
|
||||
<button
|
||||
onClick={() => onEdit(product)}
|
||||
className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
|
||||
>
|
||||
<PencilIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete(product)}
|
||||
className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
|
||||
>
|
||||
<TrashIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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