diff --git a/apps/business/src/components/OrderTransactionsModal.module.css b/apps/business/src/components/OrderTransactionsModal.module.css index 2d5c847..6161bde 100644 --- a/apps/business/src/components/OrderTransactionsModal.module.css +++ b/apps/business/src/components/OrderTransactionsModal.module.css @@ -49,14 +49,34 @@ .txMeta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 6px 16px; + gap: 8px 16px; font-size: 12px; color: var(--text-secondary); } +.txMetaItem { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 0; +} + +.txMetaLabel { + font-size: 11px; + font-weight: 600; + color: var(--text-muted); +} + .txMetaItem strong { color: var(--text-primary); font-weight: 600; + word-break: break-all; +} + +.txMono { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + font-size: 12px; + letter-spacing: 0.01em; } .statusBadge { diff --git a/apps/business/src/components/OrderTransactionsModal.tsx b/apps/business/src/components/OrderTransactionsModal.tsx index 71436c9..4f302c3 100644 --- a/apps/business/src/components/OrderTransactionsModal.tsx +++ b/apps/business/src/components/OrderTransactionsModal.tsx @@ -96,7 +96,12 @@ export function OrderTransactionsModal({ open, order, onClose }: OrderTransactio if (!mounted || !order) return null function transactionDetails(transaction: OrderTransaction) { - const rows: { label: string; value: string; isStatus?: boolean }[] = [ + const rows: { label: string; value: string; isStatus?: boolean; mono?: boolean }[] = [ + { + label: t('orderTransactions.transactionId'), + value: transaction.id, + mono: true, + }, { label: t('orderTransactions.status'), value: t(STATUS_KEYS[transaction.status] ?? 'orderTransactions.status.pending'), @@ -108,6 +113,13 @@ export function OrderTransactionsModal({ open, order, onClose }: OrderTransactio }, ] + if (transaction.paidAt) { + rows.push({ + label: t('orderTransactions.paidAt'), + value: formatDateTime(transaction.paidAt, dateLocale), + }) + } + if (transaction.type === 'pos' && transaction.posType) { rows.push({ label: t('orderTransactions.posType'), value: transaction.posType }) } @@ -116,11 +128,38 @@ export function OrderTransactionsModal({ open, order, onClose }: OrderTransactio rows.push({ label: t('orderTransactions.account'), value: transaction.transferAccount }) } if (transaction.transferRefNumber) { - rows.push({ label: t('orderTransactions.refCode'), value: transaction.transferRefNumber }) + rows.push({ + label: t('orderTransactions.refCode'), + value: transaction.transferRefNumber, + mono: true, + }) } } - if (transaction.type === 'e_payment_gate' && transaction.gatewayType) { - rows.push({ label: t('orderTransactions.gateway'), value: transaction.gatewayType }) + if (transaction.type === 'e_payment_gate') { + if (transaction.gatewayType) { + rows.push({ label: t('orderTransactions.gateway'), value: transaction.gatewayType }) + } + if (transaction.gatewayTrackId) { + rows.push({ + label: t('orderTransactions.gatewayTrackId'), + value: transaction.gatewayTrackId, + mono: true, + }) + } + if (transaction.gatewayRef) { + rows.push({ + label: t('orderTransactions.gatewayRef'), + value: transaction.gatewayRef, + mono: true, + }) + } + if (transaction.cardPan) { + rows.push({ + label: t('orderTransactions.cardPan'), + value: transaction.cardPan, + mono: true, + }) + } } if (transaction.notes) { rows.push({ label: t('orderTransactions.notes'), value: transaction.notes }) @@ -176,13 +215,15 @@ export function OrderTransactionsModal({ open, order, onClose }: OrderTransactio