+
{visibleCharts.length > 0 ? (
{t('home.welcome', { name: firstName })}
{t('home.subtitle')}
@@ -185,25 +199,39 @@ export function HomePage() {
- {visibleSections.map((section) => (
- (
+
+ className={[
+ styles.revealItem,
+ styles.revealItemFill,
+ section.wide ? styles.span4 : undefined,
+ ]
+ .filter(Boolean)
+ .join(' ')}
+ style={revealStyle(REVEAL_TILE_BASE_MS + index * REVEAL_STEP_MS)}
+ >
+
))}
{visibleCharts.map((chartId, index) => (
-
+
{group.methodLabel}
) : null}
- {group.itemNames.length > 0 ? (
+ {shippingInfo.groups.length > 1 && group.itemNames.length > 0 ? (
-
{group.itemNames.map((name) => (
- {name} @@ -207,7 +208,11 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps) {t('orderItems.lineTotal')}
-
- {order.items.map((item) => (
+ {order.items.map((item) => {
+ const displayTitle =
+ item.productNameFa?.trim() || item.productTitle
+ const productHref = buildProductDetailsUrl(item)
+ return (
-
{item.productImage ? ( @@ -217,7 +222,18 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps) )}-{item.productTitle}+ {productHref ? ( + + {displayTitle} + + ) : ( +{displayTitle}+ )}{formatVariantLabel(item.selections)}{item.variantSku && (@@ -229,7 +245,8 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps))} diff --git a/apps/customer/src/components/OrderRow.module.css b/apps/customer/src/components/OrderRow.module.css index f054a1f..8bbef22 100644 --- a/apps/customer/src/components/OrderRow.module.css +++ b/apps/customer/src/components/OrderRow.module.css @@ -61,6 +61,32 @@ background: rgba(139, 92, 246, 0.12); } +.paymentBadge { + display: inline-flex; + align-items: center; + max-width: 100%; + padding: 4px 10px; + border-radius: 999px; + font-size: 11px; + font-weight: 700; + white-space: nowrap; +} + +.paymentPaid { + color: #047857; + background: rgba(16, 185, 129, 0.12); +} + +.paymentUnpaid { + color: #64748b; + background: rgba(100, 116, 139, 0.14); +} + +.paymentFailed { + color: #b91c1c; + background: rgba(239, 68, 68, 0.12); +} + .stepBadge { display: inline-flex; align-items: center; diff --git a/apps/customer/src/components/OrderRow.tsx b/apps/customer/src/components/OrderRow.tsx index 5b0eaa9..145cbf5 100644 --- a/apps/customer/src/components/OrderRow.tsx +++ b/apps/customer/src/components/OrderRow.tsx @@ -1,7 +1,7 @@ -import { Eye } from 'lucide-react' +import { CreditCard, Eye } from 'lucide-react' import { useLocale } from '@meshkee/dashboard-ui' import { useT } from '../i18n/useT' -import type { Order, OrderSource } from '../services/orderService' +import type { Order, OrderPaymentStatus, OrderSource } from '../services/orderService' import type { OrderProcessStep } from '../utils/orderSteps' import { stepLabel, stepColor } from '../utils/orderSteps' import { formatIrtPrice } from '../utils/irtPrice' @@ -12,6 +12,7 @@ interface OrderRowProps { order: Order processSteps: OrderProcessStep[] onViewItems: (order: Order) => void + onViewTransactions?: (order: Order) => void } function formatDateTime(value: string, locale: 'en' | 'fa') { @@ -28,12 +29,29 @@ function totalItemQuantity(order: Order) { return order.items.reduce((sum, item) => sum + item.quantity, 0) } -export function OrderRow({ order, processSteps, onViewItems }: OrderRowProps) { +function derivePaymentStatus(order: Order): OrderPaymentStatus { + if (order.paymentStatus) return order.paymentStatus + const txs = order.transactions ?? [] + if (txs.some((tx) => tx.status === 'completed')) return 'paid' + if (txs.length > 0 && txs.every((tx) => tx.status === 'failed')) return 'failed' + return 'unpaid' +} + +export function OrderRow({ + order, + processSteps, + onViewItems, + onViewTransactions, +}: OrderRowProps) { const { locale } = useLocale() const t = useT() const { date, time } = formatDateTime(order.createdAt, locale) const itemQty = totalItemQuantity(order) const processStepId = order.processStepId ?? processSteps[0]?.id ?? 'processing' + const paymentStatus = derivePaymentStatus(order) + const showTransactions = + (paymentStatus === 'paid' || paymentStatus === 'failed') && + Boolean(onViewTransactions) function sourceLabel(source: OrderSource) { switch (source) { @@ -59,6 +77,30 @@ export function OrderRow({ order, processSteps, onViewItems }: OrderRowProps) { } } + function paymentStatusLabel(status: OrderPaymentStatus) { + switch (status) { + case 'paid': + return t('orders.payment.paid') + case 'failed': + return t('orders.payment.failed') + case 'unpaid': + default: + return t('orders.payment.unpaid') + } + } + + function paymentStatusClass(status: OrderPaymentStatus) { + switch (status) { + case 'paid': + return styles.paymentPaid + case 'failed': + return styles.paymentFailed + case 'unpaid': + default: + return styles.paymentUnpaid + } + } + return ({formatIrtPrice(item.unitPrice)}{formatIrtPrice(item.lineTotal)}- ))} + ) + })}
@@ -72,6 +114,11 @@ export function OrderRow({ order, processSteps, onViewItems }: OrderRowProps) { +{date}{time &&{time}}+ + {paymentStatusLabel(paymentStatus)} + + + {showTransactions ? ( + + ) : null} +, + document.body, + ) +} diff --git a/apps/customer/src/components/PageContent.module.css b/apps/customer/src/components/PageContent.module.css index b4bf9e5..221fad7 100644 --- a/apps/customer/src/components/PageContent.module.css +++ b/apps/customer/src/components/PageContent.module.css @@ -4,6 +4,31 @@ padding: 32px; } +@keyframes homeReveal { + from { + opacity: 0; + transform: translateY(18px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.revealItem { + opacity: 0; + animation: homeReveal 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards; + animation-delay: var(--reveal-delay, 0ms); +} + +@media (prefers-reduced-motion: reduce) { + .revealItem { + opacity: 1; + animation: none; + transform: none; + } +} + .pageHeader { display: flex; align-items: flex-start; diff --git a/apps/customer/src/components/checkout/CheckoutLayout.module.css b/apps/customer/src/components/checkout/CheckoutLayout.module.css index 00e56ca..3aae06c 100644 --- a/apps/customer/src/components/checkout/CheckoutLayout.module.css +++ b/apps/customer/src/components/checkout/CheckoutLayout.module.css @@ -5,13 +5,20 @@ position: relative; direction: rtl; font-family: var(--font-ui); - background-color: var(--bg-gradient-mid); - background-image: linear-gradient( - 135deg, - var(--bg-gradient-start) 0%, - var(--bg-gradient-mid) 50%, - var(--bg-gradient-end) 100% - ); + /* Match customer dashboard body background (index.css) */ + background: + radial-gradient(ellipse 80% 60% at 10% 0%, rgba(var(--primary-rgb) / 0.07) 0%, transparent 55%), + radial-gradient( + ellipse 70% 50% at 90% 100%, + rgba(var(--page-accent-rgb, var(--primary-rgb)) / 0.06) 0%, + transparent 50% + ), + linear-gradient( + 135deg, + var(--bg-gradient-start) 0%, + var(--bg-gradient-mid) 45%, + var(--bg-gradient-end) 100% + ); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; diff --git a/apps/customer/src/i18n/messages.ts b/apps/customer/src/i18n/messages.ts index 7a07ffa..5488b09 100644 --- a/apps/customer/src/i18n/messages.ts +++ b/apps/customer/src/i18n/messages.ts @@ -125,9 +125,40 @@ const en = { 'orders.col.items': 'Items', 'orders.col.total': 'Total cost', 'orders.col.date': 'Date & time', - 'orders.col.step': 'Step', + 'orders.col.payment': 'Payment', + 'orders.col.step': 'Order status', 'orders.col.source': 'Registered by', 'orders.col.actions': 'Actions', + 'orders.payment.paid': 'Paid', + 'orders.payment.unpaid': 'Unpaid', + 'orders.payment.failed': 'Failed', + 'orders.transactions': 'Transaction details', + 'orderTransactions.title': 'Transaction details', + 'orderTransactions.empty': 'No payment transactions recorded for this order.', + 'orderTransactions.transactionId': 'Transaction ID', + 'orderTransactions.status': 'Status', + 'orderTransactions.date': 'Created', + 'orderTransactions.paidAt': 'Paid at', + 'orderTransactions.posType': 'POS type', + 'orderTransactions.account': 'Account number', + 'orderTransactions.refCode': 'Ref code', + 'orderTransactions.gateway': 'Gateway', + 'orderTransactions.gatewayTrackId': 'Gateway tracking ID', + 'orderTransactions.gatewayRef': 'Gateway authority / ref', + 'orderTransactions.cardPan': 'Card number', + 'orderTransactions.notes': 'Notes', + 'orderTransactions.summary': '{count} {txLabel}', + 'orderTransactions.one': 'transaction', + 'orderTransactions.many': 'transactions', + 'orderTransactions.close': 'Close', + 'orderTransactions.type.pos': 'POS', + 'orderTransactions.type.cash': 'Cash', + 'orderTransactions.type.transfer': 'Transfer', + 'orderTransactions.type.e_payment_gate': 'E-payment gateway', + 'orderTransactions.status.pending': 'Pending', + 'orderTransactions.status.completed': 'Completed', + 'orderTransactions.status.failed': 'Failed', + 'orderTransactions.status.refunded': 'Refunded', 'orders.pageMeta': 'Page {page} / {totalPages} · {pageSize} per page · {total} total', 'orders.viewItems': 'View items', 'orders.source.operator': 'Operator', @@ -307,7 +338,7 @@ const en = { 'title.signIn': 'Sign in', 'title.checkout': 'Checkout', - 'title.cart': 'Shopping Cart', + 'title.cart': 'Complete order', 'title.delivery': 'Delivery', 'title.payment': 'Payment', 'title.success': 'Success', @@ -554,9 +585,40 @@ const fa: Recorde.stopPropagation()} + role="dialog" + aria-modal="true" + aria-labelledby="order-transactions-title" + > ++++ +++ ++ {t('orderTransactions.title')} +
+{order.orderNumber}
++ {transactions.length === 0 ? ( ++{t('orderTransactions.empty')}
+ ) : ( +-
+ {transactions.map((transaction) => {
+ const { type, status, rows } = transactionDetails(transaction)
+ return (
+
-
+ ++{t(TYPE_KEYS[type])}+{formatIrtPrice(transaction.amount)}++ {rows.map((detail) => ( +++ {detail.label} + {detail.isStatus ? ( + + {detail.value} + + ) : ( + + {detail.value} + + )} ++ ))} +
+ )
+ })}
+
+ + {t('orderTransactions.summary', { + count: transactions.length, + txLabel: + transactions.length === 1 + ? t('orderTransactions.one') + : t('orderTransactions.many'), + })} + + {formatIrtPrice(totalPaid)} ++ ++ ++{ return counts } +const REVEAL_STEP_MS = 75 +const REVEAL_HEADER_MS = 40 +const REVEAL_TILE_BASE_MS = 120 + +function revealStyle(delayMs: number): CSSProperties { + return { ['--reveal-delay' as string]: `${delayMs}ms` } +} + export function HomePage() { const { user } = useAuth() const { locale } = useLocale() @@ -134,7 +142,10 @@ export function HomePage() { return ( - +{t('home.welcome', { name: firstName })} @@ -149,8 +160,12 @@ export function HomePage() {
- {sections.map((section) => ( -+ {sections.map((section, index) => ( +(null) + const [transactionsOrder, setTransactionsOrder] = useState (null) const processSteps = DEFAULT_ORDER_PROCESS_STEPS @@ -107,6 +109,7 @@ export function OrdersPage() { + @@ -117,6 +120,7 @@ export function OrdersPage() { {t('orders.col.items')} {t('orders.col.total')} {t('orders.col.date')} +{t('orders.col.payment')} {t('orders.col.step')} {t('orders.col.source')} {t('orders.col.actions')} @@ -142,6 +146,7 @@ export function OrdersPage() { order={order} processSteps={processSteps} onViewItems={setViewOrder} + onViewTransactions={setTransactionsOrder} /> ))} @@ -174,6 +179,12 @@ export function OrdersPage() { order={viewOrder} onClose={() => setViewOrder(null)} /> + +setTransactionsOrder(null)} + /> ) } diff --git a/apps/customer/src/services/orderService.ts b/apps/customer/src/services/orderService.ts index b0f8fff..1679d7c 100644 --- a/apps/customer/src/services/orderService.ts +++ b/apps/customer/src/services/orderService.ts @@ -16,6 +16,8 @@ export interface OrderItem { storeItemVariantId: string | null productId: string productTitle: string + productNameFa?: string | null + productSlug?: string | null productImage: string | null variantSku: string | null unitPrice: number @@ -38,15 +40,20 @@ export interface OrderCustomer { email: string | null } +export type TransactionType = 'pos' | 'cash' | 'transfer' | 'e_payment_gate' +export type TransactionStatus = 'pending' | 'completed' | 'failed' | 'refunded' + export interface OrderTransaction { id: string - type: string - status: string + type: TransactionType | string + status: TransactionStatus | string amount: number posType: string | null gatewayType: string | null gatewayRef: string | null gatewayTrackId: string | null + cardPan?: string | null + paidAt?: string | null transferAccount: string | null transferRefNumber: string | null notes: string | null @@ -54,6 +61,8 @@ export interface OrderTransaction { updatedAt: string } +export type OrderPaymentStatus = 'paid' | 'unpaid' | 'failed' + export interface Order { id: string businessId: string @@ -63,6 +72,7 @@ export interface Order { processStepLabel?: string | null processStepLabelFa?: string | null processStepColor?: string | null + paymentStatus?: OrderPaymentStatus source: OrderSource subtotal: number shippingTotal: number @@ -112,6 +122,8 @@ export async function listOrders(params: ListOrdersParams = {}, signal?: AbortSi if (params.orderNumber) q.set('orderNumber', params.orderNumber) if (params.dateFrom) q.set('dateFrom', params.dateFrom) if (params.dateTo) q.set('dateTo', params.dateTo) + // Customer portal: never list other shoppers' orders (even for staff accounts). + q.set('selfOnly', 'true') const query = q.toString() const path = `${businessPath()}${query ? `?${query}` : ''}` diff --git a/apps/customer/src/utils/productWebsiteUrl.ts b/apps/customer/src/utils/productWebsiteUrl.ts new file mode 100644 index 0000000..6e9f6a9 --- /dev/null +++ b/apps/customer/src/utils/productWebsiteUrl.ts @@ -0,0 +1,33 @@ +import { getWebsiteUrl } from './websiteService' + +/** Matches business/storefront slugify used for product detail paths. */ +function slugifyForWebsitePath(value: string, fallback = 'product') { + const slug = value + .trim() + .normalize('NFC') + .replace(/\s+/g, '-') + .replace( + /[^\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFFa-zA-Z0-9-]+/g, + '', + ) + .replace(/-+/g, '-') + .replace(/^-|-$/g, '') + + return slug || fallback +} + +/** Public storefront product detail URL. */ +export function buildProductDetailsUrl(item: { + productId: string + productNameFa?: string | null + productTitle?: string | null + productSlug?: string | null +}) { + const id = item.productId?.trim() + if (!id) return '' + const pathSlug = slugifyForWebsitePath( + item.productNameFa?.trim() || item.productTitle?.trim() || item.productSlug?.trim() || '', + 'product', + ) + return `${getWebsiteUrl()}/products/${encodeURIComponent(id)}/${encodeURIComponent(pathSlug)}` +} diff --git a/packages/dashboard-ui/src/hooks/useDashboardDocumentTitle.ts b/packages/dashboard-ui/src/hooks/useDashboardDocumentTitle.ts index d9a3c81..1ef9fcd 100644 --- a/packages/dashboard-ui/src/hooks/useDashboardDocumentTitle.ts +++ b/packages/dashboard-ui/src/hooks/useDashboardDocumentTitle.ts @@ -11,6 +11,8 @@ interface UseDashboardDocumentTitleOptions { pathname: string routeRules: RouteTitleRule[] pageLabels?: string[] + /** When set, used as `document.title` instead of the default dashboard pattern. */ + overrideTitle?: string } export function useDashboardDocumentTitle({ @@ -19,13 +21,18 @@ export function useDashboardDocumentTitle({ pathname, routeRules, pageLabels, + overrideTitle, }: UseDashboardDocumentTitleOptions) { useEffect(() => { + if (overrideTitle?.trim()) { + document.title = overrideTitle.trim() + return + } const resolvedLabels = pageLabels ?? resolveRoutePageLabels(pathname, routeRules) document.title = formatDashboardDocumentTitle({ businessName, dashboardName, pageLabels: resolvedLabels, }) - }, [businessName, dashboardName, pathname, routeRules, pageLabels]) + }, [businessName, dashboardName, pathname, routeRules, pageLabels, overrideTitle]) } -
+