Compare commits

..
3 Commits
Author SHA1 Message Date
Amirmahdi 3c0098ceab feat:add purchesa 2026-07-03 17:22:57 +03:30
Amirmahdi 62398fbf3d fix: reminder 2026-06-30 16:15:04 +03:30
Amirmahdi 6c005783e0 fix 2026-06-30 14:42:19 +03:30
6 changed files with 425 additions and 2 deletions
+8 -1
View File
@@ -2,7 +2,7 @@
import { useAuth } from '@/contexts/AuthContext';
import Link from 'next/link';
import { UsersIcon, CubeIcon, TagIcon , BellIcon, GiftIcon, PowerIcon } from '@heroicons/react/24/outline';
import { UsersIcon, CubeIcon, TagIcon , BellIcon, GiftIcon, PowerIcon, ShoppingBagIcon } from '@heroicons/react/24/outline';
import { MegaphoneIcon } from 'lucide-react';
import ThemeToggle from '@/components/ThemeToggle';
// import { BellIcon } from 'lucide-react';
@@ -18,6 +18,13 @@ export default function Dashboard() {
Icon: UsersIcon,
iconWrap: 'bg-indigo-100 text-indigo-600 dark:bg-indigo-500/15 dark:text-indigo-400',
},
{
href: '/admin/purchases',
title: 'خریدهای اشتراک',
desc: 'مشاهده و فیلتر خریدها بر اساس ایمیل، موبایل، پکیج و منبع پرداخت',
Icon: ShoppingBagIcon,
iconWrap: 'bg-orange-100 text-orange-600 dark:bg-orange-500/15 dark:text-orange-400',
},
{
href: '/admin/packages',
title: 'مدیریت پکیج‌ها',
+294
View File
@@ -0,0 +1,294 @@
'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>
);
}
+22
View File
@@ -0,0 +1,22 @@
import { apiClient } from './client';
import { Purchase, Paginated, PurchaseFilters } from '@/types/purchase';
export const purchasesApi = {
// List all subscription purchases with optional filters
getPurchases: async (filters: PurchaseFilters, token: string): Promise<Paginated<Purchase>> => {
const params = new URLSearchParams();
if (filters.email) params.append('email', filters.email);
if (filters.mobile) params.append('mobile', filters.mobile);
if (filters.package_name) params.append('package_name', filters.package_name);
if (filters.gateway) params.append('gateway', filters.gateway);
if (filters.status !== undefined && filters.status !== null) {
params.append('status', String(filters.status));
}
if (filters.per_page) params.append('per_page', String(filters.per_page));
if (filters.page) params.append('page', String(filters.page));
const qs = params.toString();
return apiClient.get<Paginated<Purchase>>(`/admin/purchases${qs ? `?${qs}` : ''}`, token);
},
};
+6
View File
@@ -21,6 +21,9 @@ export const remindersApi = {
if (value !== null && value !== undefined) {
if (key === 'data' && typeof value === 'object') {
formData.append(key, JSON.stringify(value));
} else if (typeof value === 'boolean') {
// Laravel's `boolean` rule rejects the strings "true"/"false"; send 1/0
formData.append(key, value ? '1' : '0');
} else {
formData.append(key, String(value));
}
@@ -53,6 +56,9 @@ export const remindersApi = {
if (value !== null && value !== undefined) {
if (key === 'data' && typeof value === 'object') {
formData.append(key, JSON.stringify(value));
} else if (typeof value === 'boolean') {
// Laravel's `boolean` rule rejects the strings "true"/"false"; send 1/0
formData.append(key, value ? '1' : '0');
} else {
formData.append(key, String(value));
}
+3
View File
@@ -2,5 +2,8 @@ import type { NextConfig } from "next";
const nextConfig: NextConfig = {
output: 'export',
// Emit each route as a folder with index.html (e.g. admin/login/index.html)
// so static hosts (nginx) can serve clean URLs without custom rewrite rules.
trailingSlash: true,
};
export default nextConfig;
+91
View File
@@ -0,0 +1,91 @@
import { PackageName } from './user';
// Nested user on a purchase (subset of the full User model)
export interface PurchaseUser {
id: number;
uuid: string;
first_name: string | null;
last_name: string | null;
full_name: string | null;
email: string | null;
mobile: string | null;
}
// Nested product on a purchase, with its package
export interface PurchaseProduct {
id: number;
title: string | null;
price: number | null;
type: number | null;
package_name_id: number;
package_name: PackageName | null;
}
// A purchase = a subscription transaction
export interface Purchase {
id: number;
user_id: number;
product_id: number | null;
amount: number;
uuid: string;
status: number;
authority: string | null;
ref_id: string | null;
gateway: number;
created_at: string;
updated_at: string;
user: PurchaseUser | null;
product: PurchaseProduct | null;
}
// Laravel length-aware paginator envelope
export interface Paginated<T> {
current_page: number;
data: T[];
last_page: number;
per_page: number;
total: number;
from: number | null;
to: number | null;
next_page_url: string | null;
prev_page_url: string | null;
}
// Payment source (gateway) — matches backend Transaction::GATEWAYS
export const PAYMENT_GATEWAYS = {
asanpardakht: { code: 1, label: 'آسان‌پرداخت' },
zarinpal: { code: 2, label: 'زرین‌پال' },
digipay: { code: 3, label: 'دیجی‌پی' },
cafe: { code: 4, label: 'کافه بازار' },
myket: { code: 5, label: 'مایکت' },
} as const;
export type PaymentGatewayKey = keyof typeof PAYMENT_GATEWAYS;
export const getGatewayLabel = (gateway: number | null): string => {
const found = Object.values(PAYMENT_GATEWAYS).find((g) => g.code === gateway);
return found ? found.label : 'نامشخص';
};
// Purchase status — matches backend Transaction::STATUSES
export const PURCHASE_STATUSES: Record<number, string> = {
1: 'در انتظار پرداخت',
2: 'موفق',
3: 'مصرف‌شده',
};
export const getPurchaseStatusLabel = (status: number | null): string => {
if (status === null || status === undefined) return 'نامشخص';
return PURCHASE_STATUSES[status] || 'نامشخص';
};
// Filters sent to the purchases endpoint
export interface PurchaseFilters {
email?: string;
mobile?: string;
package_name?: string;
gateway?: string; // gateway name key (e.g. "zarinpal")
status?: number;
per_page?: number;
page?: number;
}