feat: response in mobile and accouting
This commit is contained in:
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user