hosseintaromi
/
admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(orders): add OrderPaymentRecord interface and enhance OrderDetailPage with payment details

This commit is contained in:
hosseintaromi 2025-09-27 00:54:31 +03:30
parent 5cda2bd5d2
commit 0db60dad2d
2 changed files with 110 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/orders/core/_models.ts
View File

@ -65,6 +65,20 @@ export interface OrderPayment {
paid_at?: string;
}
export interface OrderPaymentRecord {
id: number;
invoice_id: number;
user_id: number;
created_at: string;
updated_at: string;
payment_type: string;
status: string;
step?: string;
amount: number;
transaction_id?: string;
image_urls?: string[];
}
export interface OrderCustomer {
id: number;
first_name: string;
@ -97,10 +111,12 @@ export interface Order {
avatar?: string;
};
payment_status?: PaymentStatus;
payments?: OrderPaymentRecord[];
net_total?: number;
vat_total?: number;
shipping_total?: number;
discount_total?: number;
base_gold_price?: number;
// legacy totals kept for compatibility
subtotal?: number;
tax_amount?: number;

122
src/pages/orders/order-detail/OrderDetailPage.tsx
View File

@ -59,6 +59,20 @@ const formatDate = (dateString: string) => {
});
};
const formatPaymentType = (type?: string) => {
if (!type) return '';
const key = type.toLowerCase().replace(/\s+/g, '-').replace(/_/g, '-');
const mapping: Record<string, string> = {
'card-to-card': 'کارت به کارت',
'credit-card': 'پرداخت بانکی',
'debit-card': 'کارت بانکی',
'bank-transfer': 'حواله بانکی',
'cash-on-delivery': 'پرداخت در محل',
'wallet': 'کیف پول',
};
return mapping[key] || type;
};
const OrderDetailPage = () => {
const navigate = useNavigate();
const { id } = useParams();
@ -206,8 +220,8 @@ const OrderDetailPage = () => {
</div>
<div className="p-0">
{order?.items && order.items.length > 0 ? (
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="grid grid-cols-12 px-6 py-3 text-xs text-gray-500 dark:text-gray-400">
<div className="md:divide-y divide-gray-200 dark:divide-gray-700 space-y-4 md:space-y-0">
<div className="hidden md:grid grid-cols-12 px-6 py-3 text-xs text-gray-500 dark:text-gray-400">
<div className="col-span-5">محصول</div>
<div className="col-span-2 text-center">تعداد</div>
<div className="col-span-2 text-center">وزن (گرم)</div>
@ -215,23 +229,49 @@ const OrderDetailPage = () => {
<div className="col-span-2 text-left">جمع</div>
</div>
{order.items.map((item) => {
const baseWeight = (item.final_weight ?? item.weight ?? 0) as number;
const baseWeight = (item.weight ?? 0) as number;
const weightGr = Math.round(baseWeight * 1000);
const formatFa = (n: number) => new Intl.NumberFormat('fa-IR').format(n);
return (
<div key={item.id} className="grid grid-cols-12 px-6 py-4 items-center">
<div className="col-span-5">
<div className="font-medium text-gray-900 dark:text-gray-100">
<div key={item.id} className="px-4 md:px-6 py-0 md:py-4">
<div className="grid grid-cols-12 items-center hidden md:grid">
<div className="col-span-5">
<div className="font-medium text-gray-900 dark:text-gray-100">
{item.product_name || `محصول شناسه: ${item.product_id}`}
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
{item.product_variant_name || `واریانت شناسه: ${item.product_variant_id}`}
</div>
</div>
<div className="col-span-2 text-center text-sm text-gray-700 dark:text-gray-300">{formatFa(item.quantity || 0)}</div>
<div className="col-span-2 text-center text-sm text-gray-700 dark:text-gray-300">{formatFa(weightGr)}</div>
<div className="col-span-1 text-center text-sm text-gray-700 dark:text-gray-300">{formatCurrency(item.unit_price || 0)}</div>
<div className="col-span-2 text-left font-semibold text-gray-900 dark:text-gray-100">{formatCurrency(item.total_price || 0)}</div>
</div>
<div className="md:hidden space-y-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
<div className="font-medium text-gray-900 dark:text-gray-100 leading-relaxed">
{item.product_name || `محصول شناسه: ${item.product_id}`}
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
{item.product_variant_name || `واریانت شناسه: ${item.product_variant_id}`}
</div>
<div className="flex justify-between text-sm text-gray-700 dark:text-gray-300">
<span>تعداد</span>
<span>{formatFa(item.quantity || 0)}</span>
</div>
<div className="flex justify-between text-sm text-gray-700 dark:text-gray-300">
<span>وزن (گرم)</span>
<span>{formatFa(weightGr)}</span>
</div>
<div className="flex justify-between text-sm text-gray-700 dark:text-gray-300">
<span>قیمت واحد</span>
<span>{formatCurrency(item.unit_price || 0)}</span>
</div>
<div className="flex justify-between text-sm font-semibold text-gray-900 dark:text-gray-100">
<span>جمع</span>
<span>{formatCurrency(item.total_price || 0)}</span>
</div>
</div>
<div className="col-span-2 text-center text-sm text-gray-700 dark:text-gray-300">{formatFa(item.quantity || 0)}</div>
<div className="col-span-2 text-center text-sm text-gray-700 dark:text-gray-300">{formatFa(weightGr)}</div>
<div className="col-span-1 text-center text-sm text-gray-700 dark:text-gray-300">{formatCurrency(item.unit_price || 0)}</div>
<div className="col-span-2 text-left font-semibold text-gray-900 dark:text-gray-100">{formatCurrency(item.total_price || 0)}</div>
</div>
);
})}
@ -337,34 +377,40 @@ const OrderDetailPage = () => {
</div>
</div>
<div className="p-6 space-y-4">
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">جمع فرعی</span>
<span className="font-medium">{formatCurrency(order?.net_total || 0)}</span>
<div className="flex items-center justify-between text-base">
<span className="text-gray-800 dark:text-gray-200">جمع اقلام</span>
<span className="font-medium text-gray-900 dark:text-gray-100">{formatCurrency(order?.net_total || 0)}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">مالیات</span>
<span className="font-medium">{formatCurrency(order?.vat_total || 0)}</span>
<div className="flex items-center justify-between text-base">
<span className="text-gray-800 dark:text-gray-200">مالیات</span>
<span className="font-medium text-gray-900 dark:text-gray-100">{formatCurrency(order?.vat_total || 0)}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">هزینه ارسال</span>
<span className="font-medium">{formatCurrency(order?.shipping_total || 0)}</span>
{order?.base_gold_price !== undefined && (
<div className="flex items-center justify-between text-base">
<span className="text-gray-800 dark:text-gray-200">قیمت پایه طلا</span>
<span className="font-medium text-gray-900 dark:text-gray-100">{formatCurrency(order.base_gold_price)}</span>
</div>
)}
<div className="flex items-center justify-between text-base">
<span className="text-gray-800 dark:text-gray-200">هزینه ارسال</span>
<span className="font-medium text-gray-900 dark:text-gray-100">{formatCurrency(order?.shipping_total || 0)}</span>
</div>
{(order?.discount_total || 0) > 0 && (
<div className="flex justify-between text-green-600 dark:text-green-400">
<span>تخفیف</span>
<span>تخفیف کل</span>
<span className="font-medium">-{formatCurrency(order?.discount_total || 0)}</span>
</div>
)}
<hr className="border-gray-200 dark:border-gray-700" />
<div className="flex justify-between text-lg font-bold">
<span>مجموع نهایی</span>
<span>{formatCurrency(order?.final_total || 0)}</span>
<div className="flex items-center justify-between text-lg font-bold">
<span className="text-gray-900 dark:text-gray-100">مجموع نهایی</span>
<span className="text-gray-900 dark:text-gray-100">{formatCurrency(order?.final_total || 0)}</span>
</div>
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-sm text-gray-600 dark:text-gray-400">وضعیت پرداخت</span>
<div className="flex items-center justify-between text-base">
<span className="text-gray-700 dark:text-gray-200">وضعیت پرداخت</span>
<span className={`text-sm font-medium px-2 py-1 rounded-full ${order?.payment_status === 'paid'
? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
@ -372,10 +418,30 @@ const OrderDetailPage = () => {
{order?.payment_status === 'paid' ? 'پرداخت شده' : 'در انتظار پرداخت'}
</span>
</div>
{Array.isArray((data as any)?.payments) && (data as any)?.payments.length > 0 && (
<div className="flex items-center justify-between text-base">
<span className="text-gray-700 dark:text-gray-200">روش پرداخت</span>
<span className="text-gray-900 dark:text-gray-100">{formatPaymentType((data as any).payments[0].payment_type)}</span>
</div>
)}
{order?.invoice_id && (
<div className="flex justify-between">
<span className="text-sm text-gray-600 dark:text-gray-400">شماره فاکتور</span>
<span className="text-sm font-mono text-gray-900 dark:text-gray-100">{order.invoice_id}</span>
<div className="flex items-center justify-between text-base">
<span className="text-gray-700 dark:text-gray-200">شماره فاکتور</span>
<span className="font-mono text-gray-900 dark:text-gray-100">{order.invoice_id}</span>
</div>
)}
{Array.isArray((data as any)?.payments) && (data as any)?.payments[0]?.transaction_id && (
<div className="flex items-center justify-between text-base">
<span className="text-gray-700 dark:text-gray-200">شناسه تراکنش</span>
<span className="font-mono text-gray-900 dark:text-gray-100">{(data as any).payments[0].transaction_id}</span>
</div>
)}
{Array.isArray((data as any)?.payments) && (data as any)?.payments[0]?.image_urls?.length > 0 && (
<div className="flex items-center justify-between text-base">
<span className="text-gray-700 dark:text-gray-200">رسید پرداخت</span>
<a href={(data as any).payments[0].image_urls[0]} target="_blank" rel="noreferrer" className="shrink-0">
<img src={(data as any).payments[0].image_urls[0]} alt="رسید پرداخت" className="h-14 w-14 rounded-md object-cover border border-gray-200 dark:border-gray-600" />
</a>
</div>
)}
</div>