fix: redesign
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
'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 PageHeader from '@/components/admin/PageHeader';
|
||||
import {
|
||||
Purchase,
|
||||
Paginated,
|
||||
@@ -16,15 +16,15 @@ import {
|
||||
} from '@/types/purchase';
|
||||
import { PackageName } from '@/types/package';
|
||||
import { formatPrice, formatDate, getProductTypeLabel } from '@/lib/utils';
|
||||
import { ArrowRightIcon, MagnifyingGlassIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
|
||||
import { MagnifyingGlassIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
const statusBadgeClass = (status: number): string => {
|
||||
switch (status) {
|
||||
case 2: // موفق
|
||||
case 2:
|
||||
return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
|
||||
case 3: // مصرفشده
|
||||
case 3:
|
||||
return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
|
||||
default: // در انتظار
|
||||
default:
|
||||
return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300';
|
||||
}
|
||||
};
|
||||
@@ -63,7 +63,6 @@ export default function PurchasesPage() {
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
// Load package list (for the filter dropdown) and the first page
|
||||
useEffect(() => {
|
||||
if (!token) return;
|
||||
packagesApi.getAllPackages(token).then(setPackages).catch(() => setPackages([]));
|
||||
@@ -96,31 +95,20 @@ export default function PurchasesPage() {
|
||||
};
|
||||
|
||||
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';
|
||||
'block w-full px-3 py-2.5 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm dark:bg-gray-800/80 transition-colors';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="p-4 sm:p-8">
|
||||
<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>
|
||||
<PageHeader title="خریدهای اشتراک" />
|
||||
|
||||
{/* 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"
|
||||
className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl p-5 sm:p-6 mb-6 shadow-sm"
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
|
||||
<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" />
|
||||
@@ -160,36 +148,41 @@ export default function PurchasesPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 mt-4">
|
||||
<div className="flex items-center gap-3 mt-5">
|
||||
<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"
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 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 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20"
|
||||
>
|
||||
<MagnifyingGlassIcon className="h-5 w-5" />
|
||||
<MagnifyingGlassIcon className="h-4 w-4" />
|
||||
جستجو
|
||||
</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"
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 border border-gray-200 dark:border-gray-700 rounded-xl 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 shadow-sm"
|
||||
>
|
||||
<ArrowPathIcon className="h-5 w-5" />
|
||||
<ArrowPathIcon className="h-4 w-4" />
|
||||
پاک کردن فیلترها
|
||||
</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 className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
|
||||
<p className="text-sm text-red-700 dark:text-red-300">{error}</p>
|
||||
<button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600">
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</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">
|
||||
<div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
|
||||
<div className="px-5 py-4 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>
|
||||
@@ -197,11 +190,16 @@ export default function PurchasesPage() {
|
||||
|
||||
{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 className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
|
||||
</div>
|
||||
) : !result || result.data.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<p className="text-gray-500 dark:text-gray-400">هیچ خریدی با این فیلترها یافت نشد</p>
|
||||
<div className="mx-auto h-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
|
||||
<svg className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121 0 2.09-.773 2.34-1.872l1.836-8.046A1.125 1.125 0 0 0 18.054 3H5.106m2.394 11.25-1.5-6h13.5" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-500 dark:text-gray-400 text-sm">هیچ خریدی با این فیلترها یافت نشد</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
@@ -219,8 +217,8 @@ export default function PurchasesPage() {
|
||||
</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">
|
||||
<tr key={purchase.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
|
||||
<td className="px-4 py-3.5">
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{purchase.user?.full_name?.trim() || 'بدون نام'}
|
||||
</div>
|
||||
@@ -231,10 +229,10 @@ export default function PurchasesPage() {
|
||||
{purchase.user?.mobile || '—'}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300 whitespace-nowrap">
|
||||
<td className="px-4 py-3.5 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">
|
||||
<td className="px-4 py-3.5 whitespace-nowrap">
|
||||
<div className="text-sm text-gray-900 dark:text-gray-100">
|
||||
{purchase.product?.title || '—'}
|
||||
</div>
|
||||
@@ -242,20 +240,20 @@ export default function PurchasesPage() {
|
||||
{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">
|
||||
<td className="px-4 py-3.5 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap font-medium">
|
||||
{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">
|
||||
<td className="px-4 py-3.5 whitespace-nowrap">
|
||||
<span className="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-lg 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)}`}>
|
||||
<td className="px-4 py-3.5 whitespace-nowrap">
|
||||
<span className={`px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-lg ${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">
|
||||
<td className="px-4 py-3.5 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
|
||||
{formatDate(purchase.created_at)}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -267,11 +265,11 @@ export default function PurchasesPage() {
|
||||
|
||||
{/* 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">
|
||||
<div className="flex items-center justify-between px-5 py-3.5 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"
|
||||
className="px-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-xl 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>
|
||||
@@ -281,7 +279,7 @@ export default function PurchasesPage() {
|
||||
<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"
|
||||
className="px-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-xl 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>
|
||||
|
||||
Reference in New Issue
Block a user