295 lines
17 KiB
TypeScript
295 lines
17 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import Link from 'next/link';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { purchasesApi } from '@/lib/api/purchases';
|
|
import { packagesApi } from '@/lib/api/packages';
|
|
import {
|
|
Purchase,
|
|
Paginated,
|
|
PurchaseFilters,
|
|
PAYMENT_GATEWAYS,
|
|
PURCHASE_STATUSES,
|
|
getGatewayLabel,
|
|
getPurchaseStatusLabel,
|
|
} from '@/types/purchase';
|
|
import { PackageName } from '@/types/package';
|
|
import { formatPrice, formatDate, getProductTypeLabel } from '@/lib/utils';
|
|
import { ArrowRightIcon, MagnifyingGlassIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
|
|
|
|
const statusBadgeClass = (status: number): string => {
|
|
switch (status) {
|
|
case 2: // موفق
|
|
return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
|
|
case 3: // مصرفشده
|
|
return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
|
|
default: // در انتظار
|
|
return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300';
|
|
}
|
|
};
|
|
|
|
const emptyFilters: PurchaseFilters = {
|
|
email: '',
|
|
mobile: '',
|
|
package_name: '',
|
|
gateway: '',
|
|
status: undefined,
|
|
};
|
|
|
|
export default function PurchasesPage() {
|
|
const { token } = useAuth();
|
|
const [packages, setPackages] = useState<PackageName[]>([]);
|
|
const [filters, setFilters] = useState<PurchaseFilters>(emptyFilters);
|
|
const [result, setResult] = useState<Paginated<Purchase> | null>(null);
|
|
const [page, setPage] = useState(1);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const loadPurchases = useCallback(async (targetPage: number, activeFilters: PurchaseFilters) => {
|
|
if (!token) return;
|
|
setIsLoading(true);
|
|
setError(null);
|
|
try {
|
|
const data = await purchasesApi.getPurchases(
|
|
{ ...activeFilters, page: targetPage, per_page: 30 },
|
|
token
|
|
);
|
|
setResult(data);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'خطا در دریافت لیست خریدها');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [token]);
|
|
|
|
// Load package list (for the filter dropdown) and the first page
|
|
useEffect(() => {
|
|
if (!token) return;
|
|
packagesApi.getAllPackages(token).then(setPackages).catch(() => setPackages([]));
|
|
loadPurchases(1, emptyFilters);
|
|
}, [token, loadPurchases]);
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
const { name, value } = e.target;
|
|
setFilters((prev) => ({
|
|
...prev,
|
|
[name]: name === 'status' ? (value === '' ? undefined : parseInt(value)) : value,
|
|
}));
|
|
};
|
|
|
|
const handleSearch = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setPage(1);
|
|
loadPurchases(1, filters);
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setFilters(emptyFilters);
|
|
setPage(1);
|
|
loadPurchases(1, emptyFilters);
|
|
};
|
|
|
|
const goToPage = (targetPage: number) => {
|
|
setPage(targetPage);
|
|
loadPurchases(targetPage, filters);
|
|
};
|
|
|
|
const inputClass =
|
|
'block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors';
|
|
const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1';
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
|
خریدهای اشتراک
|
|
</h1>
|
|
<Link
|
|
href="/admin/dashboard"
|
|
className="inline-flex items-center gap-1 text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800"
|
|
>
|
|
<ArrowRightIcon className="h-4 w-4" />
|
|
بازگشت به داشبورد
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<form
|
|
onSubmit={handleSearch}
|
|
className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 rounded-xl p-4 sm:p-6 mb-6"
|
|
>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div>
|
|
<label htmlFor="email" className={labelClass}>ایمیل</label>
|
|
<input type="text" id="email" name="email" value={filters.email || ''} onChange={handleInputChange} className={inputClass} placeholder="example@mail.com" dir="ltr" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="mobile" className={labelClass}>شماره موبایل</label>
|
|
<input type="text" id="mobile" name="mobile" value={filters.mobile || ''} onChange={handleInputChange} className={inputClass} placeholder="0912xxxxxxx" dir="ltr" />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="package_name" className={labelClass}>پکیج</label>
|
|
<select id="package_name" name="package_name" value={filters.package_name || ''} onChange={handleInputChange} className={inputClass}>
|
|
<option value="">همه پکیجها</option>
|
|
{packages.map((pkg) => (
|
|
<option key={pkg.id} value={pkg.name || ''}>
|
|
{pkg.title || pkg.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="gateway" className={labelClass}>منبع پرداخت</label>
|
|
<select id="gateway" name="gateway" value={filters.gateway || ''} onChange={handleInputChange} className={inputClass}>
|
|
<option value="">همه درگاهها</option>
|
|
{Object.entries(PAYMENT_GATEWAYS).map(([key, g]) => (
|
|
<option key={key} value={key}>{g.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="status" className={labelClass}>وضعیت</label>
|
|
<select id="status" name="status" value={filters.status ?? ''} onChange={handleInputChange} className={inputClass}>
|
|
<option value="">همه وضعیتها</option>
|
|
{Object.entries(PURCHASE_STATUSES).map(([code, label]) => (
|
|
<option key={code} value={code}>{label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 mt-4">
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="inline-flex items-center gap-2 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 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
|
|
>
|
|
<MagnifyingGlassIcon className="h-5 w-5" />
|
|
جستجو
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleReset}
|
|
disabled={isLoading}
|
|
className="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
|
|
>
|
|
<ArrowPathIcon className="h-5 w-5" />
|
|
پاک کردن فیلترها
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{error && (
|
|
<div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
|
|
<p className="text-sm text-red-800 dark:text-red-300">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Results */}
|
|
<div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 rounded-xl overflow-hidden">
|
|
<div className="px-4 py-4 sm:px-6 flex items-center justify-between border-b border-gray-200 dark:border-gray-800">
|
|
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
{result ? `${formatPrice(result.total)} خرید یافت شد` : 'در حال بارگذاری...'}
|
|
</h3>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="flex justify-center items-center py-16">
|
|
<div className="animate-spin rounded-full h-10 w-10 border-b-2 border-indigo-600"></div>
|
|
</div>
|
|
) : !result || result.data.length === 0 ? (
|
|
<div className="text-center py-16">
|
|
<p className="text-gray-500 dark:text-gray-400">هیچ خریدی با این فیلترها یافت نشد</p>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
|
|
<thead className="bg-gray-50 dark:bg-gray-800/60">
|
|
<tr className="text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
|
<th className="px-4 py-3">کاربر</th>
|
|
<th className="px-4 py-3">پکیج</th>
|
|
<th className="px-4 py-3">محصول</th>
|
|
<th className="px-4 py-3">مبلغ</th>
|
|
<th className="px-4 py-3">منبع پرداخت</th>
|
|
<th className="px-4 py-3">وضعیت</th>
|
|
<th className="px-4 py-3">تاریخ</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200 dark:divide-gray-800">
|
|
{result.data.map((purchase) => (
|
|
<tr key={purchase.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors">
|
|
<td className="px-4 py-3">
|
|
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
{purchase.user?.full_name?.trim() || 'بدون نام'}
|
|
</div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400" dir="ltr">
|
|
{purchase.user?.email || '—'}
|
|
</div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400" dir="ltr">
|
|
{purchase.user?.mobile || '—'}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300 whitespace-nowrap">
|
|
{purchase.product?.package_name?.title || purchase.product?.package_name?.name || '—'}
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap">
|
|
<div className="text-sm text-gray-900 dark:text-gray-100">
|
|
{purchase.product?.title || '—'}
|
|
</div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400">
|
|
{purchase.product ? getProductTypeLabel(purchase.product.type) : ''}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap">
|
|
{formatPrice(purchase.amount)} تومان
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap">
|
|
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300">
|
|
{getGatewayLabel(purchase.gateway)}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 whitespace-nowrap">
|
|
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusBadgeClass(purchase.status)}`}>
|
|
{getPurchaseStatusLabel(purchase.status)}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
|
|
{formatDate(purchase.created_at)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{/* Pagination */}
|
|
{result && result.last_page > 1 && (
|
|
<div className="flex items-center justify-between px-4 py-3 border-t border-gray-200 dark:border-gray-800">
|
|
<button
|
|
onClick={() => goToPage(page - 1)}
|
|
disabled={page <= 1 || isLoading}
|
|
className="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
قبلی
|
|
</button>
|
|
<span className="text-sm text-gray-600 dark:text-gray-400">
|
|
صفحه {result.current_page} از {result.last_page}
|
|
</span>
|
|
<button
|
|
onClick={() => goToPage(page + 1)}
|
|
disabled={page >= result.last_page || isLoading}
|
|
className="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
بعدی
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|