feat: response in mobile and accouting

This commit is contained in:
2026-08-17 07:44:00 +03:30
parent e3071b8692
commit 90a66031bd
20 changed files with 556 additions and 114 deletions
+52 -3
View File
@@ -148,7 +148,7 @@ export default function PurchasesPage() {
</div>
</div>
<div className="flex items-center gap-3 mt-5">
<div className="flex flex-wrap items-center gap-3 mt-5">
<button
type="submit"
disabled={isLoading}
@@ -202,7 +202,55 @@ export default function PurchasesPage() {
<p className="text-gray-500 dark:text-gray-400 text-sm">هیچ خریدی با این فیلترها یافت نشد</p>
</div>
) : (
<div className="overflow-x-auto">
<>
{/* Mobile: stacked cards */}
<ul className="divide-y divide-gray-200 dark:divide-gray-800 md:hidden">
{result.data.map((purchase) => (
<li key={purchase.id} className="px-5 py-4 space-y-2.5">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<p className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
{purchase.product?.title || '—'}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate">
{purchase.product?.package_name?.title || purchase.product?.package_name?.name || '—'}
{purchase.product ? `${getProductTypeLabel(purchase.product.type)}` : ''}
</p>
</div>
<span className={`flex-shrink-0 px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-lg ${statusBadgeClass(purchase.status)}`}>
{getPurchaseStatusLabel(purchase.status)}
</span>
</div>
<div className="text-xs text-gray-500 dark:text-gray-400 space-y-0.5">
<p className="font-medium text-gray-700 dark:text-gray-300">
{purchase.user?.full_name?.trim() || 'بدون نام'}
</p>
{purchase.user?.email && (
<p dir="ltr" className="text-right truncate">{purchase.user.email}</p>
)}
{purchase.user?.mobile && (
<p dir="ltr" className="text-right truncate">{purchase.user.mobile}</p>
)}
</div>
<div className="flex items-center justify-between gap-3 pt-2.5 border-t border-gray-100 dark:border-gray-800/60">
<span className="text-sm font-bold text-gray-900 dark:text-gray-100">
{formatPrice(getPurchaseFinalPrice(purchase))} تومان
</span>
<div className="flex flex-col items-end gap-1">
<span className="px-2 py-0.5 text-[11px] font-medium rounded-md bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300">
{getGatewayLabel(purchase.gateway)}
</span>
<span className="text-[11px] text-gray-400 dark:text-gray-500">
{formatDate(purchase.created_at)} {formatTime(purchase.created_at)}
</span>
</div>
</div>
</li>
))}
</ul>
{/* Desktop: table */}
<div className="hidden md:block 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">
@@ -260,7 +308,8 @@ export default function PurchasesPage() {
))}
</tbody>
</table>
</div>
</div>
</>
)}
{/* Pagination */}