diff --git a/admin-spa/src/routes/Orders/Edit.tsx b/admin-spa/src/routes/Orders/Edit.tsx index 6c1fa1b..9cc4a37 100644 --- a/admin-spa/src/routes/Orders/Edit.tsx +++ b/admin-spa/src/routes/Orders/Edit.tsx @@ -45,22 +45,6 @@ export default function OrdersEdit() { return list.map((c: any) => ({ code: String(c.code), name: String(c.name) })); }, [countriesQ.data]); - if (!Number.isFinite(orderId)) { - return
{__('Invalid order id.')}
; - } - - if (orderQ.isLoading || countriesQ.isLoading) { - return ; - } - - if (orderQ.isError) { - return orderQ.refetch()} - />; - } - const order = orderQ.data || {}; // Set page header with back button and save button @@ -86,6 +70,22 @@ export default function OrdersEdit() { return () => clearPageHeader(); }, [order.number, orderId, upd.isPending, setPageHeader, clearPageHeader, nav]); + if (!Number.isFinite(orderId)) { + return
{__('Invalid order id.')}
; + } + + if (orderQ.isLoading || countriesQ.isLoading) { + return ; + } + + if (orderQ.isError) { + return orderQ.refetch()} + />; + } + return (
diff --git a/admin-spa/src/routes/Orders/components/OrderCard.tsx b/admin-spa/src/routes/Orders/components/OrderCard.tsx index fae8f6e..2baa89d 100644 --- a/admin-spa/src/routes/Orders/components/OrderCard.tsx +++ b/admin-spa/src/routes/Orders/components/OrderCard.tsx @@ -1,19 +1,19 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { ChevronRight, Package } from 'lucide-react'; +import { ChevronRight } from 'lucide-react'; import { __ } from '@/lib/i18n'; import { formatMoney } from '@/lib/currency'; import { formatRelativeOrDate } from '@/lib/dates'; import { Checkbox } from '@/components/ui/checkbox'; -const statusStyle: Record = { - pending: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300', - processing: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300', - completed: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300', - 'on-hold': 'bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-300', - cancelled: 'bg-zinc-200 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-300', - refunded: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300', - failed: 'bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300', +const statusStyle: Record = { + pending: { bg: 'bg-amber-100 dark:bg-amber-900/30', text: 'text-amber-800 dark:text-amber-300' }, + processing: { bg: 'bg-blue-100 dark:bg-blue-900/30', text: 'text-blue-800 dark:text-blue-300' }, + completed: { bg: 'bg-emerald-100 dark:bg-emerald-900/30', text: 'text-emerald-800 dark:text-emerald-300' }, + 'on-hold': { bg: 'bg-slate-200 dark:bg-slate-800', text: 'text-slate-800 dark:text-slate-300' }, + cancelled: { bg: 'bg-zinc-200 dark:bg-zinc-800', text: 'text-zinc-800 dark:text-zinc-300' }, + refunded: { bg: 'bg-purple-100 dark:bg-purple-900/30', text: 'text-purple-800 dark:text-purple-300' }, + failed: { bg: 'bg-rose-100 dark:bg-rose-900/30', text: 'text-rose-800 dark:text-rose-300' }, }; interface OrderCardProps { @@ -24,7 +24,8 @@ interface OrderCardProps { } export function OrderCard({ order, selected, onSelect, currencyConfig }: OrderCardProps) { - const statusClass = statusStyle[order.status?.toLowerCase()] || 'bg-slate-100 text-slate-800'; + const status = order.status?.toLowerCase() || 'pending'; + const statusColors = statusStyle[status] || statusStyle.pending; return ( )} -
- {/* Icon - inline with first 2 lines */} -
-
- {/* Line 2: Order Number (big) */} - #{order.number} -
- -
- {/* Line 1: Date (small) */} -
- {formatRelativeOrDate(order.date_ts)} -
-
-
- - {/* Content - 2 lines inline with icon */} -
- {/* Line 3: Customer */} -
- {order.customer || __('Guest')} -
- - {/* Line 4: Items */} - {order.items_brief && ( -
- {order.items_count} {order.items_count === 1 ? __('item') : __('items')} · {order.items_brief} -
- )} - - {/* Line 5: Total & Status */} -
- - {formatMoney(order.total, { - currency: order.currency || currencyConfig.currency, - symbol: order.currency_symbol || currencyConfig.symbol, - thousandSep: currencyConfig.thousand_sep, - decimalSep: currencyConfig.decimal_sep, - position: currencyConfig.position, - decimals: currencyConfig.decimals, - })} - -
-
+ {/* Order ID Badge with Status Color */} +
+ #{order.number}
+ {/* Content */} +
+ {/* Line 1: Date (small) */} +
+ {formatRelativeOrDate(order.date_ts)} +
+ + {/* Line 2: Customer */} +

+ {order.customer || __('Guest')} +

+ + {/* Line 3: Items */} + {order.items_brief && ( +
+ {order.items_count} {order.items_count === 1 ? __('item') : __('items')} · {order.items_brief} +
+ )} + + {/* Line 4: Total */} +
+ {formatMoney(order.total, { + currency: order.currency || currencyConfig.currency, + symbol: order.currency_symbol || currencyConfig.symbol, + thousandSep: currencyConfig.thousand_sep, + decimalSep: currencyConfig.decimal_sep, + position: currencyConfig.position, + decimals: currencyConfig.decimals, + })} +
+
{/* Chevron */} diff --git a/admin-spa/src/routes/Orders/index.tsx b/admin-spa/src/routes/Orders/index.tsx index e845217..fd84e59 100644 --- a/admin-spa/src/routes/Orders/index.tsx +++ b/admin-spa/src/routes/Orders/index.tsx @@ -133,16 +133,17 @@ export default function Orders() { // Filter orders by search query const filteredOrders = React.useMemo(() => { - if (!data?.rows) return []; - if (!searchQuery.trim()) return data.rows; - + const rows = data?.rows; + if (!rows) return []; + if (!searchQuery.trim()) return rows; + const query = searchQuery.toLowerCase(); - return data.rows.filter(order => + return rows.filter((order: any) => order.number?.toString().includes(query) || order.customer?.toLowerCase().includes(query) || order.status?.toLowerCase().includes(query) ); - }, [data?.rows, searchQuery]); + }, [data, searchQuery]); // Count active filters const activeFiltersCount = React.useMemo(() => {