@deenruv/admin-dashboard 1.0.0 → 1.0.4

package/dist/pages/orders/_components/OrderHistory.js

@@ -55,5 +55,5 @@ export const OrderHistory = () => {
             toast.error(t('history.editError'), { position: 'top-center' });
         }
     };
-    return (_jsxs(CustomCard, { color: "amber", description: t('history.description', 'Timeline of order events and notes'), title: t('history.title', 'Order History'), icon: _jsx(ClipboardList, {}), collapsed: true, children: [loading && (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [_jsx("div", { className: "size-8 animate-spin rounded-full border-4 border-amber-200 border-t-amber-500" }), _jsx("p", { className: "text-muted-foreground mt-4 text-sm", children: t('history.loading', 'Loading order history...') })] })), error && (_jsxs("div", { className: "flex flex-col items-center justify-center gap-3 py-16 text-center", children: [_jsx("div", { className: "rounded-full bg-red-100 p-3 dark:bg-red-900/30", children: _jsx(AlertCircle, { className: "size-6 text-red-500 dark:text-red-400" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-red-600", children: t('toasts.orderHistoryLoadingError', { value: order?.id }) }), _jsx("p", { className: "text-muted-foreground mt-2 text-sm", children: t('history.tryAgain', 'Please try refreshing the page') })] })] })), !loading && !error && (_jsx(History, { data: data, onNoteAdd: addMessageToOrder, onNoteDelete: deleteMessageFromOrder, onNoteEdit: editMessageInOrder }))] }));
+    return (_jsxs(CustomCard, { color: "amber", description: t('history.description', 'Timeline of order events and notes'), title: t('history.title', 'Order History'), icon: _jsx(ClipboardList, {}), collapsed: true, children: [loading && (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [_jsx("div", { className: "size-8 animate-spin rounded-full border-4 border-amber-200 border-t-amber-500" }), _jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: t('history.loading', 'Loading order history...') })] })), error && (_jsxs("div", { className: "flex flex-col items-center justify-center gap-3 py-16 text-center", children: [_jsx("div", { className: "rounded-full bg-red-100 p-3 dark:bg-red-900/30", children: _jsx(AlertCircle, { className: "size-6 text-red-500 dark:text-red-400" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-red-600", children: t('toasts.orderHistoryLoadingError', { value: order?.id }) }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: t('history.tryAgain', 'Please try refreshing the page') })] })] })), !loading && !error && (_jsx(History, { data: data, onNoteAdd: addMessageToOrder, onNoteDelete: deleteMessageFromOrder, onNoteEdit: editMessageInOrder }))] }));
 };

package/dist/pages/orders/_components/OrderLineActionModal/ActionQuantityPrice.js

@@ -51,8 +51,8 @@ export const ActionQuantityPrice = ({ line, onOpenChange, onPriceQuantityChangeA
             maximumFractionDigits: 2,
         }).format(amount / 100);
     };
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "space-y-6 p-2", children: [_jsxs("div", { className: "bg-card flex items-center gap-4 rounded-lg border p-5 shadow-sm transition-all hover:shadow-md", children: [productImage ? (_jsx("div", { className: "bg-background relative overflow-hidden rounded-md border", children: _jsx("img", { alt: line?.productVariant.name || 'Product image', className: "aspect-square size-24 object-cover transition-transform hover:scale-105", src: productImage || '/placeholder.svg' }) })) : (_jsx("div", { className: "bg-muted/50 flex size-24 items-center justify-center rounded-md border", children: _jsx(Package, { className: "text-muted-foreground size-10" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-lg font-medium", children: line?.productVariant.name }), _jsx("span", { className: "text-muted-foreground text-sm", children: line?.productVariant.sku || 'No SKU available' }), _jsxs("div", { className: "bg-primary/10 text-primary mt-2 inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", children: [formatPrice(baseOrderLine?.unitPriceWithTax), " / unit"] })] })] }), _jsxs("div", { className: "bg-card rounded-lg border p-4 shadow-sm", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("label", { className: "text-sm font-medium", htmlFor: "quantity-input", children: t('orderLineActionModal.quantityChange') }), _jsxs("div", { className: "flex items-center", children: [_jsx("button", { type: "button", onClick: decrementQuantity, className: "bg-muted/50 text-muted-foreground hover:bg-muted flex size-10 items-center justify-center rounded-l-md border border-r-0 transition-colors", "aria-label": "Decrease quantity", children: _jsx(MinusCircle, { className: "size-4" }) }), _jsx(Input, { id: "quantity-input", min: 1, value: quantityChange, onChange: handleQuantityChange, className: "rounded-none border-x-0 text-center transition-all focus-visible:ring-2", type: "number", placeholder: t('orderLineActionModal.changeQuantity') }), _jsx("button", { type: "button", onClick: incrementQuantity, className: "bg-muted/50 text-muted-foreground hover:bg-muted flex size-10 items-center justify-center rounded-r-md border border-l-0 transition-colors", "aria-label": "Increase quantity", children: _jsx(PlusCircle, { className: "size-4" }) })] })] }), _jsxs("div", { className: "bg-muted/40 mt-4 space-y-3 rounded-md p-5", children: [_jsxs("div", { className: "border-border/50 grid grid-cols-3 gap-2 border-b pb-2", children: [_jsx("span", { className: "text-sm font-medium", children: t('orderLineActionModal.item') }), _jsx("span", { className: "text-center text-sm font-medium", children: t('orderLineActionModal.quantity') }), _jsx("span", { className: "text-right text-sm font-medium", children: t('orderLineActionModal.price') })] }), _jsxs("div", { className: "grid grid-cols-3 gap-2 py-2", children: [_jsx("span", { className: "text-muted-foreground text-sm", children: t('orderLineActionModal.current') }), _jsx("span", { className: "text-center text-sm", children: baseOrderLine?.quantity }), _jsx("span", { className: "text-right text-sm", children: formatPrice(baseOrderLine?.unitPriceWithTax) })] }), _jsxs("div", { className: "bg-muted/60 grid grid-cols-3 gap-2 rounded-md py-2", children: [_jsx("span", { className: "text-muted-foreground pl-2 text-sm", children: t('orderLineActionModal.change') }), _jsxs("div", { className: "flex items-center justify-center", children: [quantityDelta !== 0 && (_jsx(_Fragment, { children: quantityDelta > 0 ? (_jsx(ArrowUp, { className: "mr-1 size-3 text-green-500" })) : (_jsx(ArrowDown, { className: "text-destructive mr-1 size-3" })) })), _jsx("span", { className: cn('text-sm', {
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "space-y-6 p-2", children: [_jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-card p-5 shadow-sm transition-all hover:shadow-md", children: [productImage ? (_jsx("div", { className: "relative overflow-hidden rounded-md border bg-background", children: _jsx("img", { alt: line?.productVariant.name || 'Product image', className: "aspect-square size-24 object-cover transition-transform hover:scale-105", src: productImage || '/placeholder.svg' }) })) : (_jsx("div", { className: "flex size-24 items-center justify-center rounded-md border bg-muted/50", children: _jsx(Package, { className: "size-10 text-muted-foreground" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-lg font-medium", children: line?.productVariant.name }), _jsx("span", { className: "text-sm text-muted-foreground", children: line?.productVariant.sku || 'No SKU available' }), _jsxs("div", { className: "mt-2 inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary", children: [formatPrice(baseOrderLine?.unitPriceWithTax), " / unit"] })] })] }), _jsxs("div", { className: "rounded-lg border bg-card p-4 shadow-sm", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("label", { className: "text-sm font-medium", htmlFor: "quantity-input", children: t('orderLineActionModal.quantityChange') }), _jsxs("div", { className: "flex items-center", children: [_jsx("button", { type: "button", onClick: decrementQuantity, className: "flex size-10 items-center justify-center rounded-l-md border border-r-0 bg-muted/50 text-muted-foreground transition-colors hover:bg-muted", "aria-label": "Decrease quantity", children: _jsx(MinusCircle, { className: "size-4" }) }), _jsx(Input, { id: "quantity-input", min: 1, value: quantityChange, onChange: handleQuantityChange, className: "rounded-none border-x-0 text-center transition-all focus-visible:ring-2", type: "number", placeholder: t('orderLineActionModal.changeQuantity') }), _jsx("button", { type: "button", onClick: incrementQuantity, className: "flex size-10 items-center justify-center rounded-r-md border border-l-0 bg-muted/50 text-muted-foreground transition-colors hover:bg-muted", "aria-label": "Increase quantity", children: _jsx(PlusCircle, { className: "size-4" }) })] })] }), _jsxs("div", { className: "mt-4 space-y-3 rounded-md bg-muted/40 p-5", children: [_jsxs("div", { className: "grid grid-cols-3 gap-2 border-b border-border/50 pb-2", children: [_jsx("span", { className: "text-sm font-medium", children: t('orderLineActionModal.item') }), _jsx("span", { className: "text-center text-sm font-medium", children: t('orderLineActionModal.quantity') }), _jsx("span", { className: "text-right text-sm font-medium", children: t('orderLineActionModal.price') })] }), _jsxs("div", { className: "grid grid-cols-3 gap-2 py-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: t('orderLineActionModal.current') }), _jsx("span", { className: "text-center text-sm", children: baseOrderLine?.quantity }), _jsx("span", { className: "text-right text-sm", children: formatPrice(baseOrderLine?.unitPriceWithTax) })] }), _jsxs("div", { className: "grid grid-cols-3 gap-2 rounded-md bg-muted/60 py-2", children: [_jsx("span", { className: "pl-2 text-sm text-muted-foreground", children: t('orderLineActionModal.change') }), _jsxs("div", { className: "flex items-center justify-center", children: [quantityDelta !== 0 && (_jsx(_Fragment, { children: quantityDelta > 0 ? (_jsx(ArrowUp, { className: "mr-1 size-3 text-green-500" })) : (_jsx(ArrowDown, { className: "mr-1 size-3 text-destructive" })) })), _jsx("span", { className: cn('text-sm', {
                                                             'text-destructive': quantityDelta < 0,
                                                             'text-green-500': quantityDelta > 0,
-                                                        }), children: quantityDelta > 0 ? `+${quantityDelta}` : quantityDelta })] }), _jsx("span", { className: "pr-2 text-right text-sm", children: "-" })] }), _jsx("div", { className: "bg-border my-3 h-px w-full" }), _jsxs("div", { className: "grid grid-cols-3 gap-2 py-2", children: [_jsx("span", { className: "text-sm font-medium", children: t('orderLineActionModal.after') }), _jsx("span", { className: "text-center text-sm font-semibold", children: quantityChange !== undefined && quantityChange > 0 ? quantityChange : line?.quantity }), _jsx("span", { className: "text-right text-sm font-semibold", children: formatPrice(baseOrderLine?.unitPriceWithTax) })] }), _jsxs("div", { className: "border-border bg-primary/5 mt-3 grid grid-cols-3 gap-2 rounded-md border-t p-2", children: [_jsx("span", { className: "text-sm font-medium", children: t('orderLineActionModal.total') }), _jsx("span", { className: "text-center" }), _jsx("span", { className: "text-primary text-right text-sm font-semibold", children: formatPrice((quantityChange || 0) * (baseOrderLine?.unitPriceWithTax || 0)) })] })] })] })] }), _jsxs(DialogFooter, { className: "bg-muted/30 gap-2 border-t p-4", children: [_jsx(Button, { onClick: () => onOpenChange(false), variant: "outline", className: "flex-1 sm:flex-none", disabled: isLoading, children: t('orderLineActionModal.cancel') }), _jsx(Button, { onClick: handleApprove, disabled: isLoading || quantityChange === undefined || quantityChange < 0, className: "bg-primary hover:bg-primary/90 min-w-[100px] flex-1 sm:flex-none", children: isLoading ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }), t('orderLineActionModal.saving')] })) : (t('orderLineActionModal.save')) })] })] }));
+                                                        }), children: quantityDelta > 0 ? `+${quantityDelta}` : quantityDelta })] }), _jsx("span", { className: "pr-2 text-right text-sm", children: "-" })] }), _jsx("div", { className: "my-3 h-px w-full bg-border" }), _jsxs("div", { className: "grid grid-cols-3 gap-2 py-2", children: [_jsx("span", { className: "text-sm font-medium", children: t('orderLineActionModal.after') }), _jsx("span", { className: "text-center text-sm font-semibold", children: quantityChange !== undefined && quantityChange > 0 ? quantityChange : line?.quantity }), _jsx("span", { className: "text-right text-sm font-semibold", children: formatPrice(baseOrderLine?.unitPriceWithTax) })] }), _jsxs("div", { className: "mt-3 grid grid-cols-3 gap-2 rounded-md border-t border-border bg-primary/5 p-2", children: [_jsx("span", { className: "text-sm font-medium", children: t('orderLineActionModal.total') }), _jsx("span", { className: "text-center" }), _jsx("span", { className: "text-right text-sm font-semibold text-primary", children: formatPrice((quantityChange || 0) * (baseOrderLine?.unitPriceWithTax || 0)) })] })] })] })] }), _jsxs(DialogFooter, { className: "gap-2 border-t bg-muted/30 p-4", children: [_jsx(Button, { onClick: () => onOpenChange(false), variant: "outline", className: "flex-1 sm:flex-none", disabled: isLoading, children: t('orderLineActionModal.cancel') }), _jsx(Button, { onClick: handleApprove, disabled: isLoading || quantityChange === undefined || quantityChange < 0, className: "min-w-[100px] flex-1 bg-primary hover:bg-primary/90 sm:flex-none", children: isLoading ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }), t('orderLineActionModal.saving')] })) : (t('orderLineActionModal.save')) })] })] }));
 };

package/dist/pages/orders/_components/OrderLineActionModal/index.js

@@ -3,5 +3,5 @@ import { useTranslation, Dialog, DialogContent, DialogHeader, DialogTitle } from
 import { ActionQuantityPrice } from './ActionQuantityPrice.js';
 export const OrderLineActionModal = ({ onOpenChange, onPriceQuantityChangeApprove, line, }) => {
     const { t } = useTranslation('orders');
-    return (_jsx(Dialog, { open: !!line, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "flex max-w-[90dvw] flex-col rounded-lg border-0 p-0 shadow-lg sm:max-w-[550px] lg:max-w-[650px]", children: [_jsxs(DialogHeader, { className: "bg-muted/30 border-b p-6", children: [_jsx(DialogTitle, { className: "text-xl font-semibold", children: t(`orderLineActionModal.title.!TODO`) }), _jsx("p", { className: "text-muted-foreground text-sm", children: t(`orderLineActionModal.subTitle.!TODO`) })] }), _jsx(ActionQuantityPrice, { onPriceQuantityChangeApprove: onPriceQuantityChangeApprove, onOpenChange: onOpenChange, line: line })] }) }));
+    return (_jsx(Dialog, { open: !!line, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "flex max-w-[90dvw] flex-col rounded-lg border-0 p-0 shadow-lg sm:max-w-[550px] lg:max-w-[650px]", children: [_jsxs(DialogHeader, { className: "border-b bg-muted/30 p-6", children: [_jsx(DialogTitle, { className: "text-xl font-semibold", children: t(`orderLineActionModal.title.!TODO`) }), _jsx("p", { className: "text-sm text-muted-foreground", children: t(`orderLineActionModal.subTitle.!TODO`) })] }), _jsx(ActionQuantityPrice, { onPriceQuantityChangeApprove: onPriceQuantityChangeApprove, onOpenChange: onOpenChange, line: line })] }) }));
 };

package/dist/pages/orders/_components/PaymentMetadata.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, DialogHeader, Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger, } from '@deenruv/react-ui-devkit';
 import { FileText } from 'lucide-react';
 export const MetadataDisplay = ({ metadata }) => {
-    return metadata && Object.keys(metadata).length > 0 ? (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1", children: [_jsx(FileText, { className: "size-4" }), _jsx("span", { children: "View" })] }) }), _jsxs(DialogContent, { className: "max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(FileText, { className: "size-5 text-teal-500" }), "Payment Metadata"] }), _jsx(DialogDescription, { children: "Additional information associated with this payment" })] }), _jsx("div", { className: "bg-muted/50 mt-4 rounded-md border p-4", children: _jsx("div", { className: "max-h-[300px] overflow-auto", children: Object.entries(metadata).map(([key, value]) => (_jsxs("div", { className: "border-border mb-3 border-b pb-2 last:border-0", children: [_jsx("div", { className: "text-muted-foreground mb-1 text-xs font-medium uppercase tracking-wide", children: key }), _jsx("div", { className: "break-all font-mono text-sm", children: typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value) })] }, key))) }) })] })] })) : null;
+    return metadata && Object.keys(metadata).length > 0 ? (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1", children: [_jsx(FileText, { className: "size-4" }), _jsx("span", { children: "View" })] }) }), _jsxs(DialogContent, { className: "max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(FileText, { className: "size-5 text-teal-500" }), "Payment Metadata"] }), _jsx(DialogDescription, { children: "Additional information associated with this payment" })] }), _jsx("div", { className: "mt-4 rounded-md border bg-muted/50 p-4", children: _jsx("div", { className: "max-h-[300px] overflow-auto", children: Object.entries(metadata).map(([key, value]) => (_jsxs("div", { className: "mb-3 border-b border-border pb-2 last:border-0", children: [_jsx("div", { className: "mb-1 text-xs font-medium tracking-wide text-muted-foreground uppercase", children: key }), _jsx("div", { className: "font-mono text-sm break-all", children: typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value) })] }, key))) }) })] })] })) : null;
 };

package/dist/pages/orders/_components/Payments.js

@@ -99,15 +99,15 @@ export const Payments = () => {
             console.error(settleRefund);
         }
     };
-    return (_jsxs(CustomCard, { color: "teal", description: t('payments.subTitle'), title: t('payments.title'), icon: _jsx(Wallet, { className: "size-5 text-teal-500 dark:text-teal-400" }), upperRight: _jsx(AddPaymentDialog, { order: order, onSubmit: (v) => addPaymentToOrder(v) }), children: [_jsx(Dialog, { open: !!paymentToBeSettled, onOpenChange: () => setPaymentToBeSettled(''), children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "size-5 text-teal-500" }), _jsx(DialogTitle, { children: t('payments.settle.title', 'Settle Payment') })] }), _jsx(DialogDescription, { children: t('payments.settle.description', 'Are you sure you want to settle this payment? This action cannot be undone.') })] }), _jsxs(DialogFooter, { className: "mt-4 gap-2", children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: t('payments.settle.cancel', 'Cancel') }) }), _jsxs(Button, { variant: "default", onClick: () => settlePayment({ id: paymentToBeSettled }), className: "gap-2", children: [_jsx(CheckCircle2, { className: "size-4" }), t('payments.settle.confirm', 'Confirm Settlement')] })] })] }) }), _jsx(ScrollArea, { className: "max-h-[400px] px-6", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-border border-b", children: [_jsx(TableHead, { className: "w-[80px] py-3", children: t('payments.id') }), _jsx(TableHead, { className: "py-3", children: t('payments.created') }), _jsx(TableHead, { className: "py-3", children: t('payments.method') }), _jsx(TableHead, { className: "py-3", children: t('payments.status') }), _jsx(TableHead, { className: "py-3", children: t('payments.amount') }), _jsx(TableHead, { className: "py-3", children: t('payments.refunds', 'Refunds') }), _jsx(TableHead, { className: "py-3 text-center", children: t('payments.extra') }), _jsx(TableHead, { className: "ml-auto py-3" })] }) }), _jsx(TableBody, { children: payments?.length ? (payments.map(({ amount, id, method, state, createdAt, metadata, refunds, transactionId }) => {
+    return (_jsxs(CustomCard, { color: "teal", description: t('payments.subTitle'), title: t('payments.title'), icon: _jsx(Wallet, { className: "size-5 text-teal-500 dark:text-teal-400" }), upperRight: _jsx(AddPaymentDialog, { order: order, onSubmit: (v) => addPaymentToOrder(v) }), children: [_jsx(Dialog, { open: !!paymentToBeSettled, onOpenChange: () => setPaymentToBeSettled(''), children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "size-5 text-teal-500" }), _jsx(DialogTitle, { children: t('payments.settle.title', 'Settle Payment') })] }), _jsx(DialogDescription, { children: t('payments.settle.description', 'Are you sure you want to settle this payment? This action cannot be undone.') })] }), _jsxs(DialogFooter, { className: "mt-4 gap-2", children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: t('payments.settle.cancel', 'Cancel') }) }), _jsxs(Button, { variant: "default", onClick: () => settlePayment({ id: paymentToBeSettled }), className: "gap-2", children: [_jsx(CheckCircle2, { className: "size-4" }), t('payments.settle.confirm', 'Confirm Settlement')] })] })] }) }), _jsx(ScrollArea, { className: "max-h-[400px] px-6", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-b border-border", children: [_jsx(TableHead, { className: "w-[80px] py-3", children: t('payments.id') }), _jsx(TableHead, { className: "py-3", children: t('payments.created') }), _jsx(TableHead, { className: "py-3", children: t('payments.method') }), _jsx(TableHead, { className: "py-3", children: t('payments.status') }), _jsx(TableHead, { className: "py-3", children: t('payments.amount') }), _jsx(TableHead, { className: "py-3", children: t('payments.refunds', 'Refunds') }), _jsx(TableHead, { className: "py-3 text-center", children: t('payments.extra') }), _jsx(TableHead, { className: "ml-auto py-3" })] }) }), _jsx(TableBody, { children: payments?.length ? (payments.map(({ amount, id, method, state, createdAt, metadata, refunds, transactionId }) => {
                                 const statusBadge = getStatusBadge(state);
                                 const hasRefunds = refunds && refunds.length > 0;
                                 const isRefundExpanded = expandedRefunds.includes(id);
                                 const totalRefunded = hasRefunds ? refunds.reduce((sum, refund) => sum + refund.total, 0) : 0;
-                                return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { noHover: true, className: "group", children: [_jsx(TableCell, { className: "text-muted-foreground py-3 font-mono text-xs", children: id }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { className: "size-4 text-teal-500 dark:text-teal-400" }), _jsx("span", { children: format(new Date(createdAt), 'dd/LL/Y, kk:mm') })] }) }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CreditCard, { className: "size-4 text-teal-500 dark:text-teal-400" }), _jsx("span", { className: "font-medium", children: method })] }) }), _jsx(TableCell, { className: "py-3", children: _jsxs(Badge, { variant: statusBadge.variant, className: "flex w-fit items-center gap-1", children: [statusBadge.icon, statusBadge.label] }) }), _jsx(TableCell, { className: "py-3 font-mono text-sm font-medium", children: priceFormatter(amount, order.currencyCode) }), _jsx(TableCell, { className: "py-3", children: hasRefunds ? (_jsx("div", { className: "flex flex-col gap-1", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RefreshCcw, { className: "size-4 text-orange-500 dark:text-orange-400" }), _jsx("span", { className: "font-mono text-sm font-medium text-orange-600 dark:text-orange-400", children: priceFormatter(totalRefunded, order.currencyCode) }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-6 p-0", onClick: () => toggleRefundExpand(id), children: isRefundExpanded ? (_jsx(ArrowUpCircle, { className: "text-muted-foreground size-4" })) : (_jsx(ArrowDownCircle, { className: "text-muted-foreground size-4" })) })] }) })) : (_jsx("span", { className: "text-muted-foreground text-sm", children: "-" })) }), _jsx(TableCell, { className: "flex items-center justify-center", children: _jsx(MetadataDisplay, { metadata: metadata }) }), _jsx(TableCell, { className: "py-3 text-end", children: _jsxs(ContextMenu, { children: [state !== PAYMENT_STATE.SETTLED && state !== PAYMENT_STATE.CANCELLED && (_jsxs(DropdownMenuItem, { onClick: () => setPaymentToBeSettled(id), className: "flex cursor-pointer items-center gap-2", children: [_jsx(CheckCircle2, { size: 16 }), t('payments.settle.settle', 'Settle')] }, 'set')), !hasRefunds && state !== PAYMENT_STATE.CANCELLED && (_jsx(ConfirmationDialog, { onConfirm: () => cancelPayment(id), children: _jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-red-500", onSelect: (e) => e.preventDefault(), children: [_jsx(XCircle, { size: 16 }), t('payments.cancel', 'Cancel')] }, 'cancel') }))] }) })] }), hasRefunds && isRefundExpanded && (_jsx(TableRow, { noHover: true, className: "bg-muted/30", children: _jsx(TableCell, { colSpan: 8, className: "p-0", children: _jsxs("div", { className: "px-8 py-3", children: [_jsx("div", { className: "mb-2 text-sm font-medium", children: t('refunds.details', 'Refund Details') }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-border border-b", children: [_jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.state', 'Status') }), _jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.amount', 'Amount') }), _jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.items', 'Items') }), refunds.some((refund) => refund.state.toLowerCase() === 'pending') && (_jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.actions', 'Actions') }))] }) }), _jsx(TableBody, { children: refunds.map((refund, index) => {
+                                return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { noHover: true, className: "group", children: [_jsx(TableCell, { className: "py-3 font-mono text-xs text-muted-foreground", children: id }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { className: "size-4 text-teal-500 dark:text-teal-400" }), _jsx("span", { children: format(new Date(createdAt), 'dd/LL/Y, kk:mm') })] }) }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CreditCard, { className: "size-4 text-teal-500 dark:text-teal-400" }), _jsx("span", { className: "font-medium", children: method })] }) }), _jsx(TableCell, { className: "py-3", children: _jsxs(Badge, { variant: statusBadge.variant, className: "flex w-fit items-center gap-1", children: [statusBadge.icon, statusBadge.label] }) }), _jsx(TableCell, { className: "py-3 font-mono text-sm font-medium", children: priceFormatter(amount, order.currencyCode) }), _jsx(TableCell, { className: "py-3", children: hasRefunds ? (_jsx("div", { className: "flex flex-col gap-1", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RefreshCcw, { className: "size-4 text-orange-500 dark:text-orange-400" }), _jsx("span", { className: "font-mono text-sm font-medium text-orange-600 dark:text-orange-400", children: priceFormatter(totalRefunded, order.currencyCode) }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-6 p-0", onClick: () => toggleRefundExpand(id), children: isRefundExpanded ? (_jsx(ArrowUpCircle, { className: "size-4 text-muted-foreground" })) : (_jsx(ArrowDownCircle, { className: "size-4 text-muted-foreground" })) })] }) })) : (_jsx("span", { className: "text-sm text-muted-foreground", children: "-" })) }), _jsx(TableCell, { className: "flex items-center justify-center", children: _jsx(MetadataDisplay, { metadata: metadata }) }), _jsx(TableCell, { className: "py-3 text-end", children: _jsxs(ContextMenu, { children: [state !== PAYMENT_STATE.SETTLED && state !== PAYMENT_STATE.CANCELLED && (_jsxs(DropdownMenuItem, { onClick: () => setPaymentToBeSettled(id), className: "flex cursor-pointer items-center gap-2", children: [_jsx(CheckCircle2, { size: 16 }), t('payments.settle.settle', 'Settle')] }, 'set')), !hasRefunds && state !== PAYMENT_STATE.CANCELLED && (_jsx(ConfirmationDialog, { onConfirm: () => cancelPayment(id), children: _jsxs(DropdownMenuItem, { className: "flex cursor-pointer items-center gap-2 text-red-500", onSelect: (e) => e.preventDefault(), children: [_jsx(XCircle, { size: 16 }), t('payments.cancel', 'Cancel')] }, 'cancel') }))] }) })] }), hasRefunds && isRefundExpanded && (_jsx(TableRow, { noHover: true, className: "bg-muted/30", children: _jsx(TableCell, { colSpan: 8, className: "p-0", children: _jsxs("div", { className: "px-8 py-3", children: [_jsx("div", { className: "mb-2 text-sm font-medium", children: t('refunds.details', 'Refund Details') }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-b border-border", children: [_jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.state', 'Status') }), _jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.amount', 'Amount') }), _jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.items', 'Items') }), refunds.some((refund) => refund.state.toLowerCase() === 'pending') && (_jsx(TableHead, { className: "py-2 text-xs", children: t('refunds.actions', 'Actions') }))] }) }), _jsx(TableBody, { children: refunds.map((refund, index) => {
                                                                         const refundStatusBadge = getRefundStatusBadge(refund.state);
                                                                         const state = refund.state.toLowerCase();
-                                                                        return (_jsxs(TableRow, { noHover: true, className: "border-border/50 border-b", children: [_jsx(TableCell, { className: "py-2", children: _jsxs(Badge, { variant: refundStatusBadge.variant, className: "flex w-fit items-center gap-1", children: [refundStatusBadge.icon, refundStatusBadge.label] }) }), _jsx(TableCell, { className: "py-2 font-mono text-sm", children: priceFormatter(refund.total, order.currencyCode) }), _jsx(TableCell, { className: "py-2", children: _jsx("div", { className: "text-sm", children: refund.lines.map((line, lineIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-muted-foreground font-mono text-xs", children: [line.orderLineId, " |"] }), _jsxs("span", { className: "text-xs", children: ["\u00D7", line.quantity] })] }, `${id}-refund-${index}-line-${lineIndex}`))) }) }), state === 'pending' && (_jsx(TableCell, { className: "py-2", children: _jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Settle refund" }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Settle refund" }), _jsx(DialogDescription, { children: "After manually refunding via your payment provider (standard-payment), enter the transaction ID here." })] }), _jsx("div", { children: _jsx(Input, { placeholder: "Transaction ID", value: settleRefundTransactionId || '', onChange: (e) => setSettleRefundTransactionId(e.target.value) }) }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: t('payments.settle.cancel', 'Cancel') }) }), _jsxs(Button, { variant: "default", onClick: () => settleRefund(refund.id), className: "gap-2", children: [_jsx(CheckCircle2, { className: "size-4" }), t('payments.settle.confirm', 'Confirm Settlement')] })] })] })] }) }))] }, `${id}-refund-${index}`));
+                                                                        return (_jsxs(TableRow, { noHover: true, className: "border-b border-border/50", children: [_jsx(TableCell, { className: "py-2", children: _jsxs(Badge, { variant: refundStatusBadge.variant, className: "flex w-fit items-center gap-1", children: [refundStatusBadge.icon, refundStatusBadge.label] }) }), _jsx(TableCell, { className: "py-2 font-mono text-sm", children: priceFormatter(refund.total, order.currencyCode) }), _jsx(TableCell, { className: "py-2", children: _jsx("div", { className: "text-sm", children: refund.lines.map((line, lineIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "font-mono text-xs text-muted-foreground", children: [line.orderLineId, " |"] }), _jsxs("span", { className: "text-xs", children: ["\u00D7", line.quantity] })] }, `${id}-refund-${index}-line-${lineIndex}`))) }) }), state === 'pending' && (_jsx(TableCell, { className: "py-2", children: _jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Settle refund" }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Settle refund" }), _jsx(DialogDescription, { children: "After manually refunding via your payment provider (standard-payment), enter the transaction ID here." })] }), _jsx("div", { children: _jsx(Input, { placeholder: "Transaction ID", value: settleRefundTransactionId || '', onChange: (e) => setSettleRefundTransactionId(e.target.value) }) }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: t('payments.settle.cancel', 'Cancel') }) }), _jsxs(Button, { variant: "default", onClick: () => settleRefund(refund.id), className: "gap-2", children: [_jsx(CheckCircle2, { className: "size-4" }), t('payments.settle.confirm', 'Confirm Settlement')] })] })] })] }) }))] }, `${id}-refund-${index}`));
                                                                     }) })] })] }) }) }))] }, id));
                             })) : (_jsx(EmptyState, { columnsLength: 8, title: t('payments.notFound', 'No payments found'), color: "teal", description: t('payments.addPaymentHint'), small: true, icon: _jsx(Receipt, {}) })) })] }) })] }));
 };

package/dist/pages/orders/_components/PossibleOrderStates.js

@@ -45,10 +45,10 @@ export const PossibleOrderStates = ({ orderState }) => {
     const currentStateIndex = useMemo(() => sortedOrderProcess.findIndex((s) => s.name === orderState), [sortedOrderProcess, orderState]);
     const currentStateObj = useMemo(() => sortedOrderProcess.find((s) => s.name === orderState), [sortedOrderProcess, orderState]);
     const possibleNextStates = useMemo(() => currentStateObj?.to || [], [currentStateObj]);
-    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", className: "w-full cursor-pointer justify-start px-4 py-2 focus-visible:ring-transparent dark:focus-visible:ring-transparent", children: t('orderStates.button') }) }), _jsxs(DialogContent, { className: "max-w-[40vw]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('orderStates.title') }), _jsx(DialogDescription, { children: t('orderStates.description') })] }), _jsxs("div", { className: "bg-muted/50 mb-4 rounded-md border p-4", children: [_jsx("h3", { className: "mb-2 text-sm font-medium", children: t('orderStates.currentState') }), _jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsx(CircleDot, { className: "text-primary size-5" }), _jsx("span", { className: "font-semibold", children: orderState })] }), possibleNextStates.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("h4", { className: "mb-2 text-sm font-medium", children: t('orderStates.possibleNextStates') }), _jsx("div", { className: "flex flex-wrap gap-2", children: possibleNextStates.map((nextState) => (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1", children: [tCommon('search.inOperator.' + nextState), _jsx(ArrowRight, { className: "ml-1 size-3" })] }, nextState))) })] })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: t('orderStates.finalState') }))] }), _jsx(ScrollArea, { className: "h-[60vh]", children: _jsx(Timeline, { children: sortedOrderProcess.map((state, index) => {
+    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", className: "w-full cursor-pointer justify-start px-4 py-2 focus-visible:ring-transparent dark:focus-visible:ring-transparent", children: t('orderStates.button') }) }), _jsxs(DialogContent, { className: "max-w-[40vw]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('orderStates.title') }), _jsx(DialogDescription, { children: t('orderStates.description') })] }), _jsxs("div", { className: "mb-4 rounded-md border bg-muted/50 p-4", children: [_jsx("h3", { className: "mb-2 text-sm font-medium", children: t('orderStates.currentState') }), _jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsx(CircleDot, { className: "size-5 text-primary" }), _jsx("span", { className: "font-semibold", children: orderState })] }), possibleNextStates.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("h4", { className: "mb-2 text-sm font-medium", children: t('orderStates.possibleNextStates') }), _jsx("div", { className: "flex flex-wrap gap-2", children: possibleNextStates.map((nextState) => (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1", children: [tCommon('search.inOperator.' + nextState), _jsx(ArrowRight, { className: "ml-1 size-3" })] }, nextState))) })] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: t('orderStates.finalState') }))] }), _jsx(ScrollArea, { className: "h-[60vh]", children: _jsx(Timeline, { children: sortedOrderProcess.map((state, index) => {
                                 const isPast = index < currentStateIndex;
                                 const isCurrent = index === currentStateIndex;
                                 const isPossibleNext = possibleNextStates.includes(state.name);
-                                return (_jsxs(TimelineItem, { status: isPast ? 'done' : isCurrent ? null : 'default', children: [_jsx(TimelineLine, { done: isPast }), _jsx(TimelineDot, { status: isPast ? 'done' : isCurrent ? 'current' : 'default', className: isPossibleNext ? 'ring-primary ring-1 ring-offset-1' : '', children: isPast && _jsx(Check, { className: "size-4" }) }), _jsxs(TimelineContent, { children: [_jsxs(TimelineHeading, { className: isCurrent ? 'text-primary font-bold' : '', children: [tCommon('search.inOperator.' + state.name), isCurrent && (_jsx(Badge, { className: "ml-2", variant: "default", children: t('orderStates.current') })), isPossibleNext && (_jsx(Badge, { className: "ml-2", variant: "outline", children: t('orderStates.possible') }))] }), state.to.length > 0 && (_jsxs("div", { className: "mt-1", children: [_jsxs("p", { className: "text-muted-foreground mb-1 text-sm", children: [t('orderStates.canTransitionTo'), ":"] }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1", children: state.to.map((nextState) => (_jsx(Badge, { variant: "outline", className: `text-xs ${orderState === nextState ? 'bg-primary/10 border-primary' : ''}`, children: tCommon('search.inOperator.' + nextState) }, nextState))) })] })), state.to.length === 0 && (_jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: t('orderStates.finalState') }))] })] }, state.name));
+                                return (_jsxs(TimelineItem, { status: isPast ? 'done' : isCurrent ? null : 'default', children: [_jsx(TimelineLine, { done: isPast }), _jsx(TimelineDot, { status: isPast ? 'done' : isCurrent ? 'current' : 'default', className: isPossibleNext ? 'ring-1 ring-primary ring-offset-1' : '', children: isPast && _jsx(Check, { className: "size-4" }) }), _jsxs(TimelineContent, { children: [_jsxs(TimelineHeading, { className: isCurrent ? 'font-bold text-primary' : '', children: [tCommon('search.inOperator.' + state.name), isCurrent && (_jsx(Badge, { className: "ml-2", variant: "default", children: t('orderStates.current') })), isPossibleNext && (_jsx(Badge, { className: "ml-2", variant: "outline", children: t('orderStates.possible') }))] }), state.to.length > 0 && (_jsxs("div", { className: "mt-1", children: [_jsxs("p", { className: "mb-1 text-sm text-muted-foreground", children: [t('orderStates.canTransitionTo'), ":"] }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1", children: state.to.map((nextState) => (_jsx(Badge, { variant: "outline", className: `text-xs ${orderState === nextState ? 'border-primary bg-primary/10' : ''}`, children: tCommon('search.inOperator.' + nextState) }, nextState))) })] })), state.to.length === 0 && (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: t('orderStates.finalState') }))] })] }, state.name));
                             }) }) })] })] }));
 };

package/dist/pages/orders/_components/ProductsCard.js

@@ -253,7 +253,7 @@ export const ProductsCard = () => {
     }, [order?.lines, order?.payments]);
     if (!order)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Dialog, { open: open, onOpenChange: (e) => (!e ? closeAddVariantDialog() : setOpen(true)), children: _jsx(DialogContent, { className: "bg-background max-h-[90vh] min-h-[60vh] max-w-[65vw] overflow-auto", children: selectedVariant ? (_jsxs("div", { className: "flex size-full flex-col justify-between", children: [_jsx("h3", { className: "text-primary pb-4 text-xl font-semibold", children: t('create.addVariant') }), _jsx("div", { className: "flex h-full flex-col gap-8", children: _jsx("div", { className: "flex size-full flex-col items-center gap-2", children: _jsxs("div", { className: "flex size-full justify-between gap-4", children: [_jsx(SpecialLineItem, { variant: { ...selectedVariant, quantity: 1 } }), _jsx(CustomComponent, { onVariantAdd: handleNewVariantAdd, orderLine: selectedVariant })] }) }) })] })) : (_jsx("div", { className: "text-muted-foreground flex items-center justify-center p-8", children: t('create.somethingWrong') })) }) }), _jsx(CustomCard, { color: "blue", description: t(mode === 'view' ? 'create.viewHeader' : mode === 'update' ? 'create.editHeader' : 'create.addHeader'), title: t(mode === 'view' ? 'create.viewTitle' : mode === 'update' ? 'create.editTitle' : 'create.addTitle'), icon: _jsx(ShoppingCart, {}), children: _jsxs("div", { className: "grid gap-6", children: [mode !== 'view' && (_jsx(DialogProductPicker, { initialValue: '', mode: "variant", onSubmit: async (selectedProduct) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Dialog, { open: open, onOpenChange: (e) => (!e ? closeAddVariantDialog() : setOpen(true)), children: _jsx(DialogContent, { className: "max-h-[90vh] min-h-[60vh] max-w-[65vw] overflow-auto bg-background", children: selectedVariant ? (_jsxs("div", { className: "flex size-full flex-col justify-between", children: [_jsx("h3", { className: "pb-4 text-xl font-semibold text-primary", children: t('create.addVariant') }), _jsx("div", { className: "flex h-full flex-col gap-8", children: _jsx("div", { className: "flex size-full flex-col items-center gap-2", children: _jsxs("div", { className: "flex size-full justify-between gap-4", children: [_jsx(SpecialLineItem, { variant: { ...selectedVariant, quantity: 1 } }), _jsx(CustomComponent, { onVariantAdd: handleNewVariantAdd, orderLine: selectedVariant })] }) }) })] })) : (_jsx("div", { className: "flex items-center justify-center p-8 text-muted-foreground", children: t('create.somethingWrong') })) }) }), _jsx(CustomCard, { color: "blue", description: t(mode === 'view' ? 'create.viewHeader' : mode === 'update' ? 'create.editHeader' : 'create.addHeader'), title: t(mode === 'view' ? 'create.viewTitle' : mode === 'update' ? 'create.editTitle' : 'create.addTitle'), icon: _jsx(ShoppingCart, {}), children: _jsxs("div", { className: "grid gap-6", children: [mode !== 'view' && (_jsx(DialogProductPicker, { initialValue: '', mode: "variant", onSubmit: async (selectedProduct) => {
                                 const payload = {
                                     variant: {
                                         id: selectedProduct.productVariantId,
@@ -298,11 +298,11 @@ export const ProductsCard = () => {
                                 else {
                                     addToOrder(payload.variant, payload.quantity, payload.customFields);
                                 }
-                            } })), _jsx("div", { className: "border-border rounded-lg border-0 shadow-sm", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "py-3 font-semibold", children: t('create.product', 'Product') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.sku', 'SKU') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.customFields', 'Custom Fields') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.price', 'Price') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.priceWithTax', 'Price with Tax') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.quantity', 'Quantity') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.perUnit', 'Per Unit') }), (mode === 'create' || mode === 'update') && (_jsx(TableHead, { className: "py-3 text-right font-semibold", children: t('create.actions', 'Actions') }))] }) }), _jsx(TableBody, { children: currentOrder.lines.length ? (_jsxs(_Fragment, { children: [currentOrder.lines.map((line) => (_jsxs(TableRow, { className: "hover:bg-muted/20", children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex w-max items-center gap-3", children: [_jsx(ImageWithPreview, { imageClassName: "aspect-square w-12 h-12 rounded-md object-cover border border-border", src: line.productVariant.featuredAsset?.preview ||
+                            } })), _jsx("div", { className: "rounded-lg border-0 border-border shadow-sm", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "py-3 font-semibold", children: t('create.product', 'Product') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.sku', 'SKU') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.customFields', 'Custom Fields') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.price', 'Price') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.priceWithTax', 'Price with Tax') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.quantity', 'Quantity') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.perUnit', 'Per Unit') }), (mode === 'create' || mode === 'update') && (_jsx(TableHead, { className: "py-3 text-right font-semibold", children: t('create.actions', 'Actions') }))] }) }), _jsx(TableBody, { children: currentOrder.lines.length ? (_jsxs(_Fragment, { children: [currentOrder.lines.map((line) => (_jsxs(TableRow, { className: "hover:bg-muted/20", children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex w-max items-center gap-3", children: [_jsx(ImageWithPreview, { imageClassName: "aspect-square w-12 h-12 rounded-md object-cover border border-border", src: line.productVariant.featuredAsset?.preview ||
                                                                             line.productVariant.product?.featuredAsset?.preview ||
-                                                                            '/placeholder.svg' }), _jsx("div", { className: "text-primary font-medium", children: line.productVariant.product.name })] }) }), _jsx(TableCell, { className: "text-muted-foreground min-w-[200px] py-3 font-mono text-sm", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "size-4 text-blue-500 dark:text-blue-400" }), line.productVariant.sku] }) }), _jsx(TableCell, { className: "py-3", children: _jsx(OrderLineCustomFields, { line: line, order: currentOrder, mode: mode }) }), _jsx(TableCell, { className: "py-3 font-medium", children: priceFormatter(line.linePrice, line.productVariant.currencyCode) }), _jsx(TableCell, { className: "py-3 font-medium", children: priceFormatter(line.linePriceWithTax, line.productVariant.currencyCode) }), _jsx(TableCell, { className: "py-3 text-center font-semibold", children: renderLineQuantity(line.id, line.quantity) }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: priceFormatter(line.unitPrice, line.productVariant.currencyCode) }), _jsxs("span", { className: "text-muted-foreground text-sm", children: ["(", priceFormatter(line.unitPriceWithTax, line.productVariant.currencyCode), ")"] })] }) }), (mode === 'create' || mode === 'update') && (_jsx(TableCell, { className: "py-3 text-right", children: _jsxs("div", { className: "flex items-center justify-end gap-3", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "hover:bg-muted flex size-8 items-center justify-center rounded-md", children: _jsx(EllipsisVertical, { className: "size-5" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Edit, { className: "size-4 text-blue-500" }), t('editOptions', 'Edit Options')] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: isLineAddedInModify(line.id), onClick: () => !isLineAddedInModify(line.id) && setOrderLineAction({ line }), className: cn('flex cursor-pointer justify-between', {
+                                                                            '/placeholder.svg' }), _jsx("div", { className: "font-medium text-primary", children: line.productVariant.product.name })] }) }), _jsx(TableCell, { className: "min-w-[200px] py-3 font-mono text-sm text-muted-foreground", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "size-4 text-blue-500 dark:text-blue-400" }), line.productVariant.sku] }) }), _jsx(TableCell, { className: "py-3", children: _jsx(OrderLineCustomFields, { line: line, order: currentOrder, mode: mode }) }), _jsx(TableCell, { className: "py-3 font-medium", children: priceFormatter(line.linePrice, line.productVariant.currencyCode) }), _jsx(TableCell, { className: "py-3 font-medium", children: priceFormatter(line.linePriceWithTax, line.productVariant.currencyCode) }), _jsx(TableCell, { className: "py-3 text-center font-semibold", children: renderLineQuantity(line.id, line.quantity) }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: priceFormatter(line.unitPrice, line.productVariant.currencyCode) }), _jsxs("span", { className: "text-sm text-muted-foreground", children: ["(", priceFormatter(line.unitPriceWithTax, line.productVariant.currencyCode), ")"] })] }) }), (mode === 'create' || mode === 'update') && (_jsx(TableCell, { className: "py-3 text-right", children: _jsxs("div", { className: "flex items-center justify-end gap-3", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "flex size-8 items-center justify-center rounded-md hover:bg-muted", children: _jsx(EllipsisVertical, { className: "size-5" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Edit, { className: "size-4 text-blue-500" }), t('editOptions', 'Edit Options')] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: isLineAddedInModify(line.id), onClick: () => !isLineAddedInModify(line.id) && setOrderLineAction({ line }), className: cn('flex cursor-pointer justify-between', {
                                                                                             'text-muted-foreground': isLineAddedInModify(line.id),
-                                                                                        }), children: [_jsx("span", { children: t('orderLineActionModal.actionType.quantity-price', 'Adjust Quantity & Price') }), isLineAddedInModify(line.id) && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(InfoIcon, { className: "text-muted-foreground size-4" }) }), _jsx(TooltipContent, { children: _jsx("p", { children: t('modify.disclaimer', 'Cannot modify items added in previous sessions') }) })] }) }))] })] })] }), (mode === 'create' || isLineAddedInModify(line.id)) && (_jsx("button", { className: "flex size-8 items-center justify-center rounded-md text-red-500 hover:bg-red-50 hover:text-red-600", onClick: () => removeLineItem(line.id), children: _jsx(Trash2, { className: "size-4" }) }))] }) }))] }, line.id))), currentOrder?.surcharges.map((surcharge) => (_jsxs(TableRow, { className: "bg-muted/10 hover:bg-muted/20", children: [_jsx(TableCell, { className: "text-primary py-3 font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "size-4 text-blue-500 dark:text-blue-400" }), surcharge.description] }) }), _jsx(TableCell, { className: "text-muted-foreground min-w-[200px] py-3 font-mono text-sm", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "size-4 text-blue-500 dark:text-blue-400" }), surcharge.sku] }) }), _jsx(TableCell, { className: "py-3" }), _jsx(TableCell, { className: "text-nowrap py-3 font-medium", children: priceFormatter(surcharge.price, order.currencyCode) }), _jsx(TableCell, { className: "text-nowrap py-3 font-medium", children: priceFormatter(surcharge.priceWithTax, order.currencyCode) }), _jsx(TableCell, { className: "py-3" }), _jsx(TableCell, { className: "py-3 font-medium", children: priceFormatter(surcharge.priceWithTax, order.currencyCode) }), (mode === 'create' || mode === 'update') && _jsx(TableCell, { className: "py-3" })] }, surcharge.sku)))] })) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, children: _jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx("div", { className: "mb-4 rounded-full bg-blue-100 p-3 dark:bg-blue-900/30", children: _jsx(ShoppingCart, { className: "size-6 text-blue-500 dark:text-blue-400" }) }), _jsx("span", { className: "text-muted-foreground text-lg font-medium", children: t('create.noItems', 'No products in this order') }), mode !== 'view' && (_jsx("span", { className: "text-muted-foreground mt-2 text-sm", children: t('create.searchPlaceholder', 'Use the search above to add products') }))] }) }) })) })] }) }), _jsx("div", { className: "mt-6 border-t pt-4", children: _jsx("div", { className: "bg-card rounded-lg border p-4 shadow-sm", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-base font-semibold", children: t('total') }), _jsx("span", { className: "text-primary text-base font-bold", children: priceFormatter(currentOrder?.totalWithTax || 0, currentOrder?.currencyCode) })] }), _jsx("div", { className: "text-muted-foreground mt-2 text-xs", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(InfoIcon, { className: "size-3" }), _jsx("span", { children: t('totalItems', {
+                                                                                        }), children: [_jsx("span", { children: t('orderLineActionModal.actionType.quantity-price', 'Adjust Quantity & Price') }), isLineAddedInModify(line.id) && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(InfoIcon, { className: "size-4 text-muted-foreground" }) }), _jsx(TooltipContent, { children: _jsx("p", { children: t('modify.disclaimer', 'Cannot modify items added in previous sessions') }) })] }) }))] })] })] }), (mode === 'create' || isLineAddedInModify(line.id)) && (_jsx("button", { className: "flex size-8 items-center justify-center rounded-md text-red-500 hover:bg-red-50 hover:text-red-600", onClick: () => removeLineItem(line.id), children: _jsx(Trash2, { className: "size-4" }) }))] }) }))] }, line.id))), currentOrder?.surcharges.map((surcharge) => (_jsxs(TableRow, { className: "bg-muted/10 hover:bg-muted/20", children: [_jsx(TableCell, { className: "py-3 font-medium text-primary", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Package, { className: "size-4 text-blue-500 dark:text-blue-400" }), surcharge.description] }) }), _jsx(TableCell, { className: "min-w-[200px] py-3 font-mono text-sm text-muted-foreground", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "size-4 text-blue-500 dark:text-blue-400" }), surcharge.sku] }) }), _jsx(TableCell, { className: "py-3" }), _jsx(TableCell, { className: "py-3 font-medium text-nowrap", children: priceFormatter(surcharge.price, order.currencyCode) }), _jsx(TableCell, { className: "py-3 font-medium text-nowrap", children: priceFormatter(surcharge.priceWithTax, order.currencyCode) }), _jsx(TableCell, { className: "py-3" }), _jsx(TableCell, { className: "py-3 font-medium", children: priceFormatter(surcharge.priceWithTax, order.currencyCode) }), (mode === 'create' || mode === 'update') && _jsx(TableCell, { className: "py-3" })] }, surcharge.sku)))] })) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 8, children: _jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx("div", { className: "mb-4 rounded-full bg-blue-100 p-3 dark:bg-blue-900/30", children: _jsx(ShoppingCart, { className: "size-6 text-blue-500 dark:text-blue-400" }) }), _jsx("span", { className: "text-lg font-medium text-muted-foreground", children: t('create.noItems', 'No products in this order') }), mode !== 'view' && (_jsx("span", { className: "mt-2 text-sm text-muted-foreground", children: t('create.searchPlaceholder', 'Use the search above to add products') }))] }) }) })) })] }) }), _jsx("div", { className: "mt-6 border-t pt-4", children: _jsx("div", { className: "rounded-lg border bg-card p-4 shadow-sm", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-base font-semibold", children: t('total') }), _jsx("span", { className: "text-base font-bold text-primary", children: priceFormatter(currentOrder?.totalWithTax || 0, currentOrder?.currencyCode) })] }), _jsx("div", { className: "mt-2 text-xs text-muted-foreground", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(InfoIcon, { className: "size-3" }), _jsx("span", { children: t('totalItems', {
                                                             value: currentOrder?.lines.reduce((acc, line) => acc + line.quantity, 0) || 0,
                                                         }) })] }) })] }) }) }), _jsx(OrderLineActionModal, { onPriceQuantityChangeApprove: onPriceQuantityChangeApprove, onOpenChange: onOrderLineActionModalOpenChange, ...orderLineAction })] }) })] }));
 };

package/dist/pages/orders/_components/ProductsTable.js

@@ -21,9 +21,9 @@ export const ProductsTable = ({ setRefundLines, refundLines }) => {
             return newState;
         });
     }, [refundLines]);
-    return (_jsx("div", { className: "border-border rounded-lg border-0 shadow-sm", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "py-3 font-semibold", children: t('create.product', 'Product') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.sku', 'SKU') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.customFields', 'Custom Fields') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.price', 'Price') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.priceWithTax', 'Price with Tax') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('cancelAndRefund.refund') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('cancelAndRefund.returnToStock') })] }) }), _jsx(TableBody, { children: currentOrder.lines.map((line) => (_jsxs(TableRow, { className: "hover:bg-muted/20", children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex w-max items-center gap-3", children: [_jsx(ImageWithPreview, { imageClassName: "aspect-square w-12 h-12 rounded-md object-cover border border-border", src: line.productVariant.featuredAsset?.preview ||
+    return (_jsx("div", { className: "rounded-lg border-0 border-border shadow-sm", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "hover:bg-transparent", children: [_jsx(TableHead, { className: "py-3 font-semibold", children: t('create.product', 'Product') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.sku', 'SKU') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.customFields', 'Custom Fields') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.price', 'Price') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('create.priceWithTax', 'Price with Tax') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('cancelAndRefund.refund') }), _jsx(TableHead, { className: "py-3 font-semibold", children: t('cancelAndRefund.returnToStock') })] }) }), _jsx(TableBody, { children: currentOrder.lines.map((line) => (_jsxs(TableRow, { className: "hover:bg-muted/20", children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex w-max items-center gap-3", children: [_jsx(ImageWithPreview, { imageClassName: "aspect-square w-12 h-12 rounded-md object-cover border border-border", src: line.productVariant.featuredAsset?.preview ||
                                                 line.productVariant.product?.featuredAsset?.preview ||
-                                                '/placeholder.svg' }), _jsx("div", { className: "text-primary font-medium", children: line.productVariant.product.name })] }) }), _jsx(TableCell, { className: "text-muted-foreground min-w-[200px] py-3 font-mono text-sm", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "h-4 w-4 text-blue-500 dark:text-blue-400" }), line.productVariant.sku] }) }), _jsx(TableCell, { className: "py-3", children: _jsx(OrderLineCustomFields, { line: line, order: currentOrder, mode: mode }) }), _jsx(TableCell, { className: "py-3 font-medium", children: priceFormatter(line.linePrice, line.productVariant.currencyCode) }), _jsx(TableCell, { className: "py-3 font-medium", children: priceFormatter(line.linePriceWithTax, line.productVariant.currencyCode) }), _jsx(TableCell, { className: "py-3", children: _jsx(Input, { type: "number", wrapperClassName: "w-24", endAdornment: '/' + line.quantity, defaultValue: 0, max: line.quantity, onChange: (e) => {
+                                                '/placeholder.svg' }), _jsx("div", { className: "font-medium text-primary", children: line.productVariant.product.name })] }) }), _jsx(TableCell, { className: "min-w-[200px] py-3 font-mono text-sm text-muted-foreground", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "h-4 w-4 text-blue-500 dark:text-blue-400" }), line.productVariant.sku] }) }), _jsx(TableCell, { className: "py-3", children: _jsx(OrderLineCustomFields, { line: line, order: currentOrder, mode: mode }) }), _jsx(TableCell, { className: "py-3 font-medium", children: priceFormatter(line.linePrice, line.productVariant.currencyCode) }), _jsx(TableCell, { className: "py-3 font-medium", children: priceFormatter(line.linePriceWithTax, line.productVariant.currencyCode) }), _jsx(TableCell, { className: "py-3", children: _jsx(Input, { type: "number", wrapperClassName: "w-24", endAdornment: '/' + line.quantity, defaultValue: 0, max: line.quantity, onChange: (e) => {
                                         handleLineChange(line.id, +e.target.value);
                                     } }) }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Checkbox, {}), _jsx(Label, { children: t('cancelAndRefund.returnToStock') })] }) })] }, line.id))) })] }) }));
 };

package/dist/pages/orders/_components/PromotionsList.js

@@ -69,5 +69,5 @@ export const PromotionsList = () => {
             toast.error('could not add coupon code');
         }
     };
-    return (_jsxs("div", { className: "grid w-full grid-cols-1 gap-4 md:grid-cols-6 lg:grid-cols-12", children: [_jsx(CustomCard, { notCollapsible: true, color: "blue", description: t('promotions.description', 'Active order promotions'), title: t('promotions.title', 'Promotions'), wrapperClassName: "col-span-1 h-full md:col-span-2 lg:col-span-6", icon: _jsx(Gift, {}), upperRight: _jsxs("div", { className: "flex gap-2 py-2", children: [_jsx(Input, { placeholder: t('couponCodes.placeholder'), value: couponCode, onChange: (e) => setCouponCode(e.target.value) }), _jsx(Button, { size: 'icon', className: "w-14", onClick: addCouponHandler, children: _jsx(Plus, {}) })] }), children: _jsxs(ScrollArea, { className: "h-[280px]", children: [_jsxs(Table, { className: "h-full", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-border border-b", children: [_jsx(TableHead, { className: "py-3", children: t('taxSummary.description') }), _jsx(TableHead, { className: "py-3", children: t('couponCodes.title') }), _jsx(TableHead, { align: "right", style: { textAlign: 'right' }, children: t('table.actions') })] }) }), _jsx(TableBody, { className: "h-[232px]", children: order.promotions.length ? (order.promotions.map(({ name, couponCode, id }) => (_jsxs(TableRow, { noHover: true, className: "group", children: [_jsx(TableCell, { className: "py-3 font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "size-4 text-blue-500 dark:text-blue-400" }), _jsx("span", { className: "capitalize", children: name })] }) }), _jsx(TableCell, { className: "py-3", children: couponCode ? (_jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: couponCode })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) }), _jsx(TableCell, { align: "right", children: _jsx(Button, { size: "icon", variant: "destructive", disabled: loading, onClick: () => removeExcludePromotionHandler({ couponCode, id }), children: _jsx(Trash, { size: 16 }) }) })] }, name)))) : (_jsx(EmptyState, { columnsLength: 3, title: t('promotions.noPromotions', 'No promotions applied'), color: "blue", icon: _jsx(Gift, {}), small: true })) })] }), !!excluded.length && (_jsxs(_Fragment, { children: [_jsx("hr", { className: "!my-4 border-t-[3px]" }), _jsx(CardDescription, { children: t('promotion.excludedPromotions') }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, children: [_jsx(TableHead, { children: t('promotion.name') }), _jsx(TableHead, { align: "right", style: { textAlign: 'right' }, children: t('table.actions') })] }) }), _jsx(TableBody, { children: excluded.map(({ name, id }) => (_jsxs(TableRow, { noHover: true, children: [_jsx(TableCell, { className: "capitalize", children: name }), _jsx(TableCell, { align: "right", children: _jsx(Button, { size: "icon", variant: "destructive", onClick: () => removeExcludePromotionHandler({ id }), children: _jsx(Trash, { size: 16 }) }) })] }, name))) })] })] }))] }) }), _jsx(CustomCard, { notCollapsible: true, description: t('discounts.description', 'Applied order discounts'), title: t('discounts.title', 'Discounts'), icon: _jsx(BadgePercent, { className: "size-5 text-green-500 dark:text-green-400" }), wrapperClassName: "col-span-1 h-full md:col-span-2 lg:col-span-6", color: "green", children: _jsx(ScrollArea, { className: "h-[280px]", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-border border-b", children: [_jsx(TableHead, { className: "py-3", children: t('taxSummary.description') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxRate', 'Type') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxBase', 'Amount') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxTotal', 'With Tax') }), _jsx(TableHead, { className: "py-3", children: t('discounts.source', 'Source') })] }) }), _jsx(TableBody, { className: "h-[232px]", children: order.discounts.length ? (order.discounts.map(({ adjustmentSource, amount, amountWithTax, description, type }, index) => (_jsxs(TableRow, { noHover: true, className: "group", children: [_jsx(TableCell, { className: "py-3 font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CreditCard, { className: "size-4 text-green-500 dark:text-green-400" }), _jsx("span", { className: "capitalize", children: description })] }) }), _jsx(TableCell, { className: "py-3", children: _jsx(Badge, { variant: "secondary", className: "font-medium", children: type }) }), _jsx(TableCell, { className: "py-3 font-mono text-sm", children: priceFormatter(amount, order.currencyCode) }), _jsx(TableCell, { className: "py-3 font-mono text-sm", children: priceFormatter(amountWithTax, order.currencyCode) }), _jsx(TableCell, { className: "py-3", children: _jsx(Badge, { variant: "outline", className: "capitalize", children: adjustmentSource }) })] }, index)))) : (_jsx(EmptyState, { columnsLength: 5, title: t('discounts.emptyState'), color: "green", icon: _jsx(BadgePercent, {}), small: true })) })] }) }) })] }));
+    return (_jsxs("div", { className: "grid w-full grid-cols-1 gap-4 md:grid-cols-6 lg:grid-cols-12", children: [_jsx(CustomCard, { notCollapsible: true, color: "blue", description: t('promotions.description', 'Active order promotions'), title: t('promotions.title', 'Promotions'), wrapperClassName: "col-span-1 h-full md:col-span-2 lg:col-span-6", icon: _jsx(Gift, {}), upperRight: _jsxs("div", { className: "flex gap-2 py-2", children: [_jsx(Input, { placeholder: t('couponCodes.placeholder'), value: couponCode, onChange: (e) => setCouponCode(e.target.value) }), _jsx(Button, { size: 'icon', className: "w-14", onClick: addCouponHandler, children: _jsx(Plus, {}) })] }), children: _jsxs(ScrollArea, { className: "h-[280px]", children: [_jsxs(Table, { className: "h-full", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-b border-border", children: [_jsx(TableHead, { className: "py-3", children: t('taxSummary.description') }), _jsx(TableHead, { className: "py-3", children: t('couponCodes.title') }), _jsx(TableHead, { align: "right", style: { textAlign: 'right' }, children: t('table.actions') })] }) }), _jsx(TableBody, { className: "h-[232px]", children: order.promotions.length ? (order.promotions.map(({ name, couponCode, id }) => (_jsxs(TableRow, { noHover: true, className: "group", children: [_jsx(TableCell, { className: "py-3 font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Tag, { className: "size-4 text-blue-500 dark:text-blue-400" }), _jsx("span", { className: "capitalize", children: name })] }) }), _jsx(TableCell, { className: "py-3", children: couponCode ? (_jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: couponCode })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) }), _jsx(TableCell, { align: "right", children: _jsx(Button, { size: "icon", variant: "destructive", disabled: loading, onClick: () => removeExcludePromotionHandler({ couponCode, id }), children: _jsx(Trash, { size: 16 }) }) })] }, name)))) : (_jsx(EmptyState, { columnsLength: 3, title: t('promotions.noPromotions', 'No promotions applied'), color: "blue", icon: _jsx(Gift, {}), small: true })) })] }), !!excluded.length && (_jsxs(_Fragment, { children: [_jsx("hr", { className: "!my-4 border-t-[3px]" }), _jsx(CardDescription, { children: t('promotion.excludedPromotions') }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, children: [_jsx(TableHead, { children: t('promotion.name') }), _jsx(TableHead, { align: "right", style: { textAlign: 'right' }, children: t('table.actions') })] }) }), _jsx(TableBody, { children: excluded.map(({ name, id }) => (_jsxs(TableRow, { noHover: true, children: [_jsx(TableCell, { className: "capitalize", children: name }), _jsx(TableCell, { align: "right", children: _jsx(Button, { size: "icon", variant: "destructive", onClick: () => removeExcludePromotionHandler({ id }), children: _jsx(Trash, { size: 16 }) }) })] }, name))) })] })] }))] }) }), _jsx(CustomCard, { notCollapsible: true, description: t('discounts.description', 'Applied order discounts'), title: t('discounts.title', 'Discounts'), icon: _jsx(BadgePercent, { className: "size-5 text-green-500 dark:text-green-400" }), wrapperClassName: "col-span-1 h-full md:col-span-2 lg:col-span-6", color: "green", children: _jsx(ScrollArea, { className: "h-[280px]", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-b border-border", children: [_jsx(TableHead, { className: "py-3", children: t('taxSummary.description') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxRate', 'Type') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxBase', 'Amount') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxTotal', 'With Tax') }), _jsx(TableHead, { className: "py-3", children: t('discounts.source', 'Source') })] }) }), _jsx(TableBody, { className: "h-[232px]", children: order.discounts.length ? (order.discounts.map(({ adjustmentSource, amount, amountWithTax, description, type }, index) => (_jsxs(TableRow, { noHover: true, className: "group", children: [_jsx(TableCell, { className: "py-3 font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CreditCard, { className: "size-4 text-green-500 dark:text-green-400" }), _jsx("span", { className: "capitalize", children: description })] }) }), _jsx(TableCell, { className: "py-3", children: _jsx(Badge, { variant: "secondary", className: "font-medium", children: type }) }), _jsx(TableCell, { className: "py-3 font-mono text-sm", children: priceFormatter(amount, order.currencyCode) }), _jsx(TableCell, { className: "py-3 font-mono text-sm", children: priceFormatter(amountWithTax, order.currencyCode) }), _jsx(TableCell, { className: "py-3", children: _jsx(Badge, { variant: "outline", className: "capitalize", children: adjustmentSource }) })] }, index)))) : (_jsx(EmptyState, { columnsLength: 5, title: t('discounts.emptyState'), color: "green", icon: _jsx(BadgePercent, {}), small: true })) })] }) }) })] }));
 };

package/dist/pages/orders/_components/RealizationCard.js

@@ -92,7 +92,7 @@ export const RealizationCard = () => {
                                     const stateBadge = getFulfillmentStateBadge(fulfillment.state);
                                     const isProcessing = processingFulfillments[fulfillment.id];
                                     console.log('FLF', fulfillment);
-                                    return (_jsxs(TableRow, { className: "hover:bg-muted/20", children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Truck, { className: "size-4 text-green-500 dark:text-green-400" }), _jsx("span", { className: "font-medium", children: fulfillment.method })] }) }), _jsx(TableCell, { className: "py-3", children: _jsxs(Badge, { variant: stateBadge.variant, className: "flex w-fit items-center gap-1", children: [stateBadge.icon, t('fulfillments.states.' + fulfillment.state.toLowerCase())] }) }), _jsx(TableCell, { className: "py-3", children: fulfillment.trackingCode ? (_jsx("div", { className: "flex items-center gap-2", children: _jsx("code", { className: "bg-muted rounded px-2 py-1 font-mono text-xs", children: fulfillment.trackingCode }) })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) }), _jsx(TableCell, { className: "py-3 text-right", children: _jsxs(ContextMenu, { disabled: fulfillment.state === ORDER_STATE.CANCELLED, children: [fulfillment.state === ORDER_STATE.SHIPPED && (_jsxs(DropdownMenuItem, { onClick: () => markAsDelivered(fulfillment.id), disabled: isProcessing, className: "flex cursor-pointer items-center gap-2", children: [_jsx(CheckCircle, { className: "size-3.5 text-green-500" }), t('fulfillments.markAsDelivered', 'Mark as Delivered')] }, 'set')), (fulfillment.state === ORDER_STATE.DELIVERED ||
+                                    return (_jsxs(TableRow, { className: "hover:bg-muted/20", children: [_jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Truck, { className: "size-4 text-green-500 dark:text-green-400" }), _jsx("span", { className: "font-medium", children: fulfillment.method })] }) }), _jsx(TableCell, { className: "py-3", children: _jsxs(Badge, { variant: stateBadge.variant, className: "flex w-fit items-center gap-1", children: [stateBadge.icon, t('fulfillments.states.' + fulfillment.state.toLowerCase())] }) }), _jsx(TableCell, { className: "py-3", children: fulfillment.trackingCode ? (_jsx("div", { className: "flex items-center gap-2", children: _jsx("code", { className: "rounded bg-muted px-2 py-1 font-mono text-xs", children: fulfillment.trackingCode }) })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) }), _jsx(TableCell, { className: "py-3 text-right", children: _jsxs(ContextMenu, { disabled: fulfillment.state === ORDER_STATE.CANCELLED, children: [fulfillment.state === ORDER_STATE.SHIPPED && (_jsxs(DropdownMenuItem, { onClick: () => markAsDelivered(fulfillment.id), disabled: isProcessing, className: "flex cursor-pointer items-center gap-2", children: [_jsx(CheckCircle, { className: "size-3.5 text-green-500" }), t('fulfillments.markAsDelivered', 'Mark as Delivered')] }, 'set')), (fulfillment.state === ORDER_STATE.DELIVERED ||
                                                             fulfillment.state === ORDER_STATE.SHIPPED) && (_jsx(ConfirmationDialog, { onConfirm: () => handleCancelFulfillment(fulfillment.id), children: _jsxs(DropdownMenuItem, { disabled: isProcessing, className: "flex cursor-pointer items-center gap-2 text-red-500", onSelect: (e) => e.preventDefault(), children: [_jsx(XCircle, { size: 16 }), t('fulfillments.cancel', 'Cancel')] }, 'cancel') }))] }) })] }, fulfillment.id));
                                 }) })] }) }) }) }) }));
 };

package/dist/pages/orders/_components/RefundCard.js

@@ -7,5 +7,5 @@ export const RefundCard = ({ priceDifference, refundReason, setRefundReason }) =
     const { modifiedOrder } = useOrder();
     const currentPayment = modifiedOrder?.payments?.[0];
     const [activeTab, setActiveTab] = useState('details');
-    return (_jsxs("div", { className: "border-border bg-muted/20 space-y-4 rounded-md border p-4", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsxs("div", { className: cn('flex cursor-pointer items-center gap-2', activeTab === 'details' ? 'opacity-100' : 'opacity-60 hover:opacity-80'), onClick: () => setActiveTab('details'), children: [_jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30", children: _jsx(CreditCard, { className: "size-4 text-blue-500 dark:text-blue-400" }) }), _jsx("h4", { className: "font-medium", children: t('refund.details', 'Refund Details') })] }), _jsxs("div", { className: cn('flex cursor-pointer items-center gap-2', activeTab === 'note' ? 'opacity-100' : 'opacity-60 hover:opacity-80'), onClick: () => setActiveTab('note'), children: [_jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30", children: _jsx(FileText, { className: "size-4 text-blue-500 dark:text-blue-400" }) }), _jsx("h4", { className: "font-medium", children: t('refund.note', 'Refund Note') })] })] }), activeTab === 'details' && (_jsxs("div", { className: "grid gap-6", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.method') }), _jsx("p", { className: "font-medium", children: currentPayment?.method })] }), _jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.id') }), _jsx("p", { className: "font-medium", children: currentPayment?.transactionId })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.amount') }), _jsx("p", { className: "font-medium", children: priceFormatter(currentPayment?.amount ?? 0, modifiedOrder?.currencyCode) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.refund') }), _jsx("p", { className: "font-medium", children: priceFormatter(priceDifference * -1, modifiedOrder?.currencyCode) })] })] })] })), activeTab === 'note' && (_jsx("div", { className: "space-y-2", children: _jsx(Textarea, { id: "note", placeholder: t('notePlaceholder', 'Enter optional info of the reason'), value: refundReason, onChange: (e) => setRefundReason(e.target.value), className: "min-h-[60px] resize-y" }) }))] }));
+    return (_jsxs("div", { className: "space-y-4 rounded-md border border-border bg-muted/20 p-4", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsxs("div", { className: cn('flex cursor-pointer items-center gap-2', activeTab === 'details' ? 'opacity-100' : 'opacity-60 hover:opacity-80'), onClick: () => setActiveTab('details'), children: [_jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30", children: _jsx(CreditCard, { className: "size-4 text-blue-500 dark:text-blue-400" }) }), _jsx("h4", { className: "font-medium", children: t('refund.details', 'Refund Details') })] }), _jsxs("div", { className: cn('flex cursor-pointer items-center gap-2', activeTab === 'note' ? 'opacity-100' : 'opacity-60 hover:opacity-80'), onClick: () => setActiveTab('note'), children: [_jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30", children: _jsx(FileText, { className: "size-4 text-blue-500 dark:text-blue-400" }) }), _jsx("h4", { className: "font-medium", children: t('refund.note', 'Refund Note') })] })] }), activeTab === 'details' && (_jsxs("div", { className: "grid gap-6", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t('refund.method') }), _jsx("p", { className: "font-medium", children: currentPayment?.method })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t('refund.id') }), _jsx("p", { className: "font-medium", children: currentPayment?.transactionId })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t('refund.amount') }), _jsx("p", { className: "font-medium", children: priceFormatter(currentPayment?.amount ?? 0, modifiedOrder?.currencyCode) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t('refund.refund') }), _jsx("p", { className: "font-medium", children: priceFormatter(priceDifference * -1, modifiedOrder?.currencyCode) })] })] })] })), activeTab === 'note' && (_jsx("div", { className: "space-y-2", children: _jsx(Textarea, { id: "note", placeholder: t('notePlaceholder', 'Enter optional info of the reason'), value: refundReason, onChange: (e) => setRefundReason(e.target.value), className: "min-h-[60px] resize-y" }) }))] }));
 };

package/dist/pages/orders/_components/RefundPaymentCard.js

@@ -5,7 +5,7 @@ export const RefundPaymentCard = ({ refundReason, setRefundReason, cancelShippin
     const { t } = useTranslation('orders');
     const { modifiedOrder } = useOrder();
     const currentPayment = modifiedOrder?.payments?.[0];
-    return (_jsxs("div", { className: "mt-8 grid grid-cols-2 gap-4", children: [_jsx(CustomCard, { title: t('refund.details', 'Refund Details'), notCollapsible: true, children: _jsxs("div", { className: "grid gap-6", children: [_jsx("div", { className: "grid grid-cols-2 gap-4", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Checkbox, { checked: cancelShipping, onCheckedChange: (e) => setCancelShipping(!!e) }), _jsx(Label, { children: t('cancelAndRefund.refundShipping') })] }) }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.method') }), _jsx("p", { className: "font-medium", children: currentPayment?.method })] }), _jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.id') }), _jsx("p", { className: "font-medium", children: currentPayment?.transactionId })] })] }), _jsx("div", { className: "grid grid-cols-2 gap-4", children: _jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.amount') }), _jsx("p", { className: "font-medium", children: priceFormatter(currentPayment?.amount ?? 0, modifiedOrder?.currencyCode) })] }) }), _jsx("div", { className: "grid grid-cols-2 gap-4", children: _jsxs("div", { children: [_jsx("p", { className: "text-muted-foreground text-sm", children: t('refund.refund') }), _jsx(Input
+    return (_jsxs("div", { className: "mt-8 grid grid-cols-2 gap-4", children: [_jsx(CustomCard, { title: t('refund.details', 'Refund Details'), notCollapsible: true, children: _jsxs("div", { className: "grid gap-6", children: [_jsx("div", { className: "grid grid-cols-2 gap-4", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Checkbox, { checked: cancelShipping, onCheckedChange: (e) => setCancelShipping(!!e) }), _jsx(Label, { children: t('cancelAndRefund.refundShipping') })] }) }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t('refund.method') }), _jsx("p", { className: "font-medium", children: currentPayment?.method })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t('refund.id') }), _jsx("p", { className: "font-medium", children: currentPayment?.transactionId })] })] }), _jsx("div", { className: "grid grid-cols-2 gap-4", children: _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t('refund.amount') }), _jsx("p", { className: "font-medium", children: priceFormatter(currentPayment?.amount ?? 0, modifiedOrder?.currencyCode) })] }) }), _jsx("div", { className: "grid grid-cols-2 gap-4", children: _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t('refund.refund') }), _jsx(Input
                                     // type="currency"
                                     , { 
                                         // type="currency"

package/dist/pages/orders/_components/ShippingMethod.js

@@ -99,14 +99,14 @@ export const ShippingMethod = () => {
             setIsSubmitting(false);
         }
     };
-    return (_jsx(CustomCard, { notCollapsible: true, color: "orange", description: t('selectShipmentMethod.cardDescription', 'Choose how this order will be delivered to the customer'), title: t('selectShipmentMethod.cardTitle', 'Shipping Method'), icon: _jsx(Truck, {}), upperRight: mode !== 'view' && (_jsxs(Dialog, { open: open, onOpenChange: setOpen, defaultOpen: false, children: [!order?.lines.length ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8 cursor-not-allowed opacity-50", children: _jsx(Edit, { size: 16, className: "text-muted-foreground" }) }) }), _jsx(TooltipContent, { align: "end", className: "border border-red-200 bg-red-50", children: _jsx("p", { className: "text-xs text-red-500", children: t('selectShipmentMethod.noSelectedTip', 'Add products to the order first') }) })] }) })) : (_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8", children: _jsx(Edit, { size: 16, className: "text-orange-500 dark:text-orange-400" }) }) })), _jsxs(DialogContent, { className: "max-w-[70vw] p-6", children: [_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2 text-xl", children: [_jsx(Truck, { className: "size-5 text-orange-500 dark:text-orange-400" }), t('selectShipmentMethod.setMethodTitle', 'Select Shipping Method')] }), _jsx(DialogDescription, { className: "text-muted-foreground mt-2", children: t('selectShipmentMethod.setMethodDescription', 'Choose how this order will be delivered') })] }), isLoading ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-12", children: [_jsx("div", { className: "size-10 animate-spin rounded-full border-4 border-orange-200 border-t-orange-500" }), _jsx("p", { className: "text-muted-foreground mt-4 text-sm", children: t('selectShipmentMethod.loading', 'Loading shipping methods...') })] })) : (_jsx(_Fragment, { children: shippingMethods.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center gap-3 py-12 text-center", children: [_jsx("div", { className: "rounded-full bg-orange-100 p-3 dark:bg-orange-900/30", children: _jsx(AlertCircle, { className: "size-6 text-orange-500 dark:text-orange-400" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: t('selectShipmentMethod.noMethods', 'No shipping methods available') }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: t('selectShipmentMethod.noMethodsHint', 'Make sure the order has products and a shipping address') })] })] })) : (_jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4", children: shippingMethods.map((shippingMethod) => (_jsx("div", { className: "w-full", children: _jsxs("button", { onClick: () => setLocalSelectedShippingMethod(shippingMethod.id), className: cn('relative flex w-full flex-col gap-2 rounded-lg border p-4 transition-all', 'hover:border-orange-500/70 hover:shadow-sm', localSelectedShippingMethod === shippingMethod.id
+    return (_jsx(CustomCard, { notCollapsible: true, color: "orange", description: t('selectShipmentMethod.cardDescription', 'Choose how this order will be delivered to the customer'), title: t('selectShipmentMethod.cardTitle', 'Shipping Method'), icon: _jsx(Truck, {}), upperRight: mode !== 'view' && (_jsxs(Dialog, { open: open, onOpenChange: setOpen, defaultOpen: false, children: [!order?.lines.length ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8 cursor-not-allowed opacity-50", children: _jsx(Edit, { size: 16, className: "text-muted-foreground" }) }) }), _jsx(TooltipContent, { align: "end", className: "border border-red-200 bg-red-50", children: _jsx("p", { className: "text-xs text-red-500", children: t('selectShipmentMethod.noSelectedTip', 'Add products to the order first') }) })] }) })) : (_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8", children: _jsx(Edit, { size: 16, className: "text-orange-500 dark:text-orange-400" }) }) })), _jsxs(DialogContent, { className: "max-w-[70vw] p-6", children: [_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2 text-xl", children: [_jsx(Truck, { className: "size-5 text-orange-500 dark:text-orange-400" }), t('selectShipmentMethod.setMethodTitle', 'Select Shipping Method')] }), _jsx(DialogDescription, { className: "mt-2 text-muted-foreground", children: t('selectShipmentMethod.setMethodDescription', 'Choose how this order will be delivered') })] }), isLoading ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-12", children: [_jsx("div", { className: "size-10 animate-spin rounded-full border-4 border-orange-200 border-t-orange-500" }), _jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: t('selectShipmentMethod.loading', 'Loading shipping methods...') })] })) : (_jsx(_Fragment, { children: shippingMethods.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center gap-3 py-12 text-center", children: [_jsx("div", { className: "rounded-full bg-orange-100 p-3 dark:bg-orange-900/30", children: _jsx(AlertCircle, { className: "size-6 text-orange-500 dark:text-orange-400" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: t('selectShipmentMethod.noMethods', 'No shipping methods available') }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: t('selectShipmentMethod.noMethodsHint', 'Make sure the order has products and a shipping address') })] })] })) : (_jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4", children: shippingMethods.map((shippingMethod) => (_jsx("div", { className: "w-full", children: _jsxs("button", { onClick: () => setLocalSelectedShippingMethod(shippingMethod.id), className: cn('relative flex w-full flex-col gap-2 rounded-lg border p-4 transition-all', 'hover:border-orange-500/70 hover:shadow-sm', localSelectedShippingMethod === shippingMethod.id
                                                     ? 'border-orange-500 bg-orange-50 shadow-sm dark:border-orange-400 dark:bg-orange-900/10'
-                                                    : 'border-border'), children: [localSelectedShippingMethod === shippingMethod.id && (_jsx("div", { className: "absolute right-2 top-2", children: _jsx(Check, { className: "size-4 text-green-500" }) })), _jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx(Package, { className: "size-4 text-orange-500 dark:text-orange-400" }), _jsx("h3", { className: "text-base font-medium", children: shippingMethod.name })] }), _jsx(Badge, { variant: "outline", className: "w-fit text-xs", children: shippingMethod.code }), _jsxs("div", { className: "border-border mt-2 w-full border-t pt-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: "Base price: " }), _jsx("span", { className: "text-sm font-medium", children: priceFormatter(shippingMethod.price, order?.currencyCode) })] }), _jsxs("div", { className: "mt-1 flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: "With tax: " }), _jsx("span", { className: "text-sm font-medium text-orange-600 dark:text-orange-400", children: priceFormatter(shippingMethod.priceWithTax, order?.currencyCode) })] })] })] }) }, shippingMethod.id))) })) }))] }), _jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), disabled: isSubmitting, children: t('common.cancel', 'Cancel') }), _jsx(Button, { disabled: !localSelectedShippingMethod || !order?.id || isSubmitting || isLoading, className: "gap-2", onClick: async () => {
+                                                    : 'border-border'), children: [localSelectedShippingMethod === shippingMethod.id && (_jsx("div", { className: "absolute top-2 right-2", children: _jsx(Check, { className: "size-4 text-green-500" }) })), _jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx(Package, { className: "size-4 text-orange-500 dark:text-orange-400" }), _jsx("h3", { className: "text-base font-medium", children: shippingMethod.name })] }), _jsx(Badge, { variant: "outline", className: "w-fit text-xs", children: shippingMethod.code }), _jsxs("div", { className: "mt-2 w-full border-t border-border pt-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Base price: " }), _jsx("span", { className: "text-sm font-medium", children: priceFormatter(shippingMethod.price, order?.currencyCode) })] }), _jsxs("div", { className: "mt-1 flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "With tax: " }), _jsx("span", { className: "text-sm font-medium text-orange-600 dark:text-orange-400", children: priceFormatter(shippingMethod.priceWithTax, order?.currencyCode) })] })] })] }) }, shippingMethod.id))) })) }))] }), _jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), disabled: isSubmitting, children: t('common.cancel', 'Cancel') }), _jsx(Button, { disabled: !localSelectedShippingMethod || !order?.id || isSubmitting || isLoading, className: "gap-2", onClick: async () => {
                                         const method = shippingMethods.find((method) => method.id === localSelectedShippingMethod);
                                         if (method && order?.id)
                                             await selectShippingMethod(order.id, method.id);
-                                    }, children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('common.processing', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-4" }), t('selectShipmentMethod.save', 'Save Shipping Method')] })) })] })] })] })), children: _jsx("div", { className: "border-border bg-muted/50 rounded-lg border p-3", children: _jsx("div", { className: "flex items-start gap-3", children: !order?.lines.length ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-0.5 flex size-8 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/30", children: _jsx(AlertCircle, { className: "size-4 text-amber-500" }) }), _jsx("div", { className: "flex-1", children: _jsx("p", { className: "text-muted-foreground text-sm italic", children: t('selectShipmentMethod.noSelectedTip', 'Add products to the order first') }) })] })) : !selectedShipping ? (_jsx(_Fragment, { children: _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-muted-foreground text-sm italic", children: t('selectShipmentMethod.noSelected', 'No shipping method selected') }), mode !== 'view' && (_jsxs(Button, { variant: "outline", size: "sm", className: "mt-2 gap-2", onClick: () => {
+                                    }, children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('common.processing', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-4" }), t('selectShipmentMethod.save', 'Save Shipping Method')] })) })] })] })] })), children: _jsx("div", { className: "rounded-lg border border-border bg-muted/50 p-3", children: _jsx("div", { className: "flex items-start gap-3", children: !order?.lines.length ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-0.5 flex size-8 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/30", children: _jsx(AlertCircle, { className: "size-4 text-amber-500" }) }), _jsx("div", { className: "flex-1", children: _jsx("p", { className: "text-sm text-muted-foreground italic", children: t('selectShipmentMethod.noSelectedTip', 'Add products to the order first') }) })] })) : !selectedShipping ? (_jsx(_Fragment, { children: _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm text-muted-foreground italic", children: t('selectShipmentMethod.noSelected', 'No shipping method selected') }), mode !== 'view' && (_jsxs(Button, { variant: "outline", size: "sm", className: "mt-2 gap-2", onClick: () => {
                                     if (order?.lines.length)
                                         setOpen(true);
-                                }, disabled: !order?.lines.length, children: [_jsx(Truck, { className: "size-3.5" }), t('selectShipmentMethod.addMethod', 'Add Shipping Method')] }))] }) })) : (_jsxs("div", { className: "relative flex w-full flex-col gap-2", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx(Package, { className: "size-4 text-orange-500 dark:text-orange-400" }), _jsx(Label, { className: "text-sm font-medium", children: selectedShipping.name })] }), _jsx(Badge, { variant: "outline", className: "w-fit text-xs", children: selectedShipping.code }), _jsxs("div", { className: "border-border mt-2 w-full border-t pt-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: "Base price: " }), _jsx("span", { className: "text-sm font-medium", children: priceFormatter(selectedShipping.price, order?.currencyCode) })] }), _jsxs("div", { className: "mt-1 flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: "With tax: " }), _jsx("span", { className: "text-sm font-medium text-orange-600 dark:text-orange-400", children: priceFormatter(selectedShipping.priceWithTax, order?.currencyCode) })] })] })] }, selectedShipping.id)) }) }) }));
+                                }, disabled: !order?.lines.length, children: [_jsx(Truck, { className: "size-3.5" }), t('selectShipmentMethod.addMethod', 'Add Shipping Method')] }))] }) })) : (_jsxs("div", { className: "relative flex w-full flex-col gap-2", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx(Package, { className: "size-4 text-orange-500 dark:text-orange-400" }), _jsx(Label, { className: "text-sm font-medium", children: selectedShipping.name })] }), _jsx(Badge, { variant: "outline", className: "w-fit text-xs", children: selectedShipping.code }), _jsxs("div", { className: "mt-2 w-full border-t border-border pt-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Base price: " }), _jsx("span", { className: "text-sm font-medium", children: priceFormatter(selectedShipping.price, order?.currencyCode) })] }), _jsxs("div", { className: "mt-1 flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "With tax: " }), _jsx("span", { className: "text-sm font-medium text-orange-600 dark:text-orange-400", children: priceFormatter(selectedShipping.priceWithTax, order?.currencyCode) })] })] })] }, selectedShipping.id)) }) }) }));
 };

package/dist/pages/orders/_components/SpecialLineItem.js

@@ -3,5 +3,5 @@ import { Button, priceFormatter } from '@deenruv/react-ui-devkit';
 import { Minus, Package, Plus } from 'lucide-react';
 export const SpecialLineItem = ({ variant, adjustLineItem }) => {
     const imageUrl = variant?.featuredAsset?.preview || variant?.product?.featuredAsset?.preview;
-    return (_jsx("div", { className: "flex h-full w-2/5 flex-col gap-4", children: _jsxs("div", { className: "bg-card text-card-foreground flex size-full flex-col space-y-3 rounded-lg border p-3 shadow-sm", children: [imageUrl ? (_jsx("img", { alt: `${variant?.product.name} image`, className: "aspect-square h-64 w-full rounded-md border bg-white object-cover shadow-sm", height: "56", width: "56", src: imageUrl || '/placeholder.svg' })) : (_jsx("div", { className: "bg-muted/30 flex size-14 items-center justify-center rounded-md border", children: _jsx(Package, { className: "text-muted-foreground size-6" }) })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "line-clamp-1 text-sm font-medium md:text-base", children: variant?.product.name }), variant?.name && variant.name !== variant?.product.name && (_jsx("span", { className: "text-muted-foreground line-clamp-1 text-xs", children: variant.name }))] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "line-clamp-1 select-none text-sm font-medium md:text-base", children: "Price (TAX)" }), _jsxs("span", { className: "text-muted-foreground line-clamp-1 text-xs", children: [priceFormatter(variant.price), " (", priceFormatter(variant.priceWithTax), ")"] })] }), variant.sku ? (_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "line-clamp-1 select-none text-sm font-medium md:text-base", children: "SKU" }), variant.sku && _jsx("span", { className: "text-muted-foreground line-clamp-1 text-xs", children: variant.sku })] })) : null] }), variant?.quantity ? (_jsx("div", { className: "ml-auto", children: adjustLineItem ? (_jsx("div", { className: "flex items-center", children: _jsxs("div", { className: "bg-background inline-flex items-center rounded-md border shadow-sm", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustLineItem(Math.max(1, (variant.quantity || 1) - 1)), className: "hover:bg-muted h-8 rounded-r-none border-r px-2", "aria-label": "Decrease quantity", children: _jsx(Minus, { className: "size-3.5" }) }), _jsx("span", { className: "px-3 py-1 text-sm font-medium tabular-nums", children: variant?.quantity }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustLineItem((variant.quantity || 0) + 1), className: "hover:bg-muted h-8 rounded-l-none border-l px-2", "aria-label": "Increase quantity", children: _jsx(Plus, { className: "size-3.5" }) })] }) })) : null })) : null] }) }));
+    return (_jsx("div", { className: "flex h-full w-2/5 flex-col gap-4", children: _jsxs("div", { className: "flex size-full flex-col space-y-3 rounded-lg border bg-card p-3 text-card-foreground shadow-sm", children: [imageUrl ? (_jsx("img", { alt: `${variant?.product.name} image`, className: "aspect-square h-64 w-full rounded-md border bg-white object-cover shadow-sm", height: "56", width: "56", src: imageUrl || '/placeholder.svg' })) : (_jsx("div", { className: "flex size-14 items-center justify-center rounded-md border bg-muted/30", children: _jsx(Package, { className: "size-6 text-muted-foreground" }) })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "line-clamp-1 text-sm font-medium md:text-base", children: variant?.product.name }), variant?.name && variant.name !== variant?.product.name && (_jsx("span", { className: "line-clamp-1 text-xs text-muted-foreground", children: variant.name }))] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "line-clamp-1 text-sm font-medium select-none md:text-base", children: "Price (TAX)" }), _jsxs("span", { className: "line-clamp-1 text-xs text-muted-foreground", children: [priceFormatter(variant.price), " (", priceFormatter(variant.priceWithTax), ")"] })] }), variant.sku ? (_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "line-clamp-1 text-sm font-medium select-none md:text-base", children: "SKU" }), variant.sku && _jsx("span", { className: "line-clamp-1 text-xs text-muted-foreground", children: variant.sku })] })) : null] }), variant?.quantity ? (_jsx("div", { className: "ml-auto", children: adjustLineItem ? (_jsx("div", { className: "flex items-center", children: _jsxs("div", { className: "inline-flex items-center rounded-md border bg-background shadow-sm", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustLineItem(Math.max(1, (variant.quantity || 1) - 1)), className: "h-8 rounded-r-none border-r px-2 hover:bg-muted", "aria-label": "Decrease quantity", children: _jsx(Minus, { className: "size-3.5" }) }), _jsx("span", { className: "px-3 py-1 text-sm font-medium tabular-nums", children: variant?.quantity }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustLineItem((variant.quantity || 0) + 1), className: "h-8 rounded-l-none border-l px-2 hover:bg-muted", "aria-label": "Increase quantity", children: _jsx(Plus, { className: "size-3.5" }) })] }) })) : null })) : null] }) }));
 };

package/dist/pages/orders/_components/SurchargeCard.js

@@ -95,5 +95,5 @@ export const SurchargeCard = () => {
                 !state.description?.value ||
                 !state.sku?.value ||
                 !state.price?.value ||
-                state.price?.value <= 0, className: "ml-auto gap-2", children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('surcharge.processing', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(PlusCircle, { className: "size-4" }), t('surcharge.addButton', 'Add Surcharge')] })) }), children: _jsxs("div", { className: "space-y-6", children: [_jsx(SurchargeTable, {}), _jsx("div", { children: _jsxs("div", { className: "mb-4 grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "surcharge-description", className: "text-sm font-medium", children: [t('surcharge.labels.description', 'Description'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-description", placeholder: t('surcharge.placeholders.description', 'Enter surcharge description'), value: state.description?.value || '', onChange: (e) => setField('description', e.target.value), className: "pl-9", errors: state.description?.errors }), _jsx("div", { className: "text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2", children: _jsx(FileText, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "surcharge-sku", className: "text-sm font-medium", children: [t('surcharge.labels.sku', 'SKU'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-sku", placeholder: t('surcharge.placeholders.sku', 'Enter SKU code'), value: state.sku?.value || '', onChange: (e) => setField('sku', e.target.value), className: "pl-9", errors: state.sku?.errors }), _jsx("div", { className: "text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2", children: _jsx(Tag, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "surcharge-price", className: "text-sm font-medium", children: [t('surcharge.labels.price', 'Price'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-price", type: "currency", endAdornment: modifiedOrder?.currencyCode, step: "0.01", min: "0", placeholder: t('surcharge.placeholders.price', 'Enter price'), value: state.price?.value || '', onChange: (e) => setField('price', +e.target.value), className: "pl-9", errors: state.price?.errors }), _jsx("div", { className: "text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2", children: _jsx(DollarSign, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "surcharge-tax-rate", className: "text-sm font-medium", children: t('surcharge.labels.taxRate', 'Tax Rate (%)') }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-tax-rate", type: "number", step: "0.01", min: "0", placeholder: t('surcharge.placeholders.taxRate', 'Enter tax rate'), value: state.taxRate?.value || 0, onChange: (e) => setField('taxRate', +e.target.value), className: "pl-9" }), _jsx("div", { className: "text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2", children: _jsx(Percent, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "surcharge-tax-description", className: "text-sm font-medium", children: t('surcharge.labels.taxDescription', 'Tax Description') }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-tax-description", placeholder: t('surcharge.placeholders.taxDescription', 'Enter tax description'), value: state.taxDescription?.value || '', onChange: (e) => setField('taxDescription', e.target.value), className: "pl-9" }), _jsx("div", { className: "text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2", children: _jsx(FileText, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "surcharge-tax-included", className: "text-sm font-medium", children: t('surcharge.labels.includesTax', { value: state.taxRate?.value }) }), _jsxs("div", { className: "flex items-center gap-2 pt-2", children: [_jsx(Checkbox, { id: "surcharge-tax-included", checked: state.priceIncludesTax?.value || false, onCheckedChange: (e) => setField('priceIncludesTax', Boolean(e)) }), _jsx(Label, { htmlFor: "surcharge-tax-included", className: "cursor-pointer text-sm", children: t('surcharge.placeholders.taxIncluded', 'Tax is included in the price') })] })] })] }) })] }) }));
+                state.price?.value <= 0, className: "ml-auto gap-2", children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('surcharge.processing', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(PlusCircle, { className: "size-4" }), t('surcharge.addButton', 'Add Surcharge')] })) }), children: _jsxs("div", { className: "space-y-6", children: [_jsx(SurchargeTable, {}), _jsx("div", { children: _jsxs("div", { className: "mb-4 grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "surcharge-description", className: "text-sm font-medium", children: [t('surcharge.labels.description', 'Description'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-description", placeholder: t('surcharge.placeholders.description', 'Enter surcharge description'), value: state.description?.value || '', onChange: (e) => setField('description', e.target.value), className: "pl-9", errors: state.description?.errors }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(FileText, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "surcharge-sku", className: "text-sm font-medium", children: [t('surcharge.labels.sku', 'SKU'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-sku", placeholder: t('surcharge.placeholders.sku', 'Enter SKU code'), value: state.sku?.value || '', onChange: (e) => setField('sku', e.target.value), className: "pl-9", errors: state.sku?.errors }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(Tag, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "surcharge-price", className: "text-sm font-medium", children: [t('surcharge.labels.price', 'Price'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-price", type: "currency", endAdornment: modifiedOrder?.currencyCode, step: "0.01", min: "0", placeholder: t('surcharge.placeholders.price', 'Enter price'), value: state.price?.value || '', onChange: (e) => setField('price', +e.target.value), className: "pl-9", errors: state.price?.errors }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(DollarSign, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "surcharge-tax-rate", className: "text-sm font-medium", children: t('surcharge.labels.taxRate', 'Tax Rate (%)') }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-tax-rate", type: "number", step: "0.01", min: "0", placeholder: t('surcharge.placeholders.taxRate', 'Enter tax rate'), value: state.taxRate?.value || 0, onChange: (e) => setField('taxRate', +e.target.value), className: "pl-9" }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(Percent, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "surcharge-tax-description", className: "text-sm font-medium", children: t('surcharge.labels.taxDescription', 'Tax Description') }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-tax-description", placeholder: t('surcharge.placeholders.taxDescription', 'Enter tax description'), value: state.taxDescription?.value || '', onChange: (e) => setField('taxDescription', e.target.value), className: "pl-9" }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(FileText, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "surcharge-tax-included", className: "text-sm font-medium", children: t('surcharge.labels.includesTax', { value: state.taxRate?.value }) }), _jsxs("div", { className: "flex items-center gap-2 pt-2", children: [_jsx(Checkbox, { id: "surcharge-tax-included", checked: state.priceIncludesTax?.value || false, onCheckedChange: (e) => setField('priceIncludesTax', Boolean(e)) }), _jsx(Label, { htmlFor: "surcharge-tax-included", className: "cursor-pointer text-sm", children: t('surcharge.placeholders.taxIncluded', 'Tax is included in the price') })] })] })] }) })] }) }));
 };

package/dist/pages/orders/_components/TaxSummary.js

@@ -7,5 +7,5 @@ export const TaxSummary = () => {
     if (!order)
         return null;
     const totalTax = order.taxSummary.reduce((sum, { taxTotal }) => sum + taxTotal, 0);
-    return (_jsx(CustomCard, { color: "indigo", description: t('taxSummary.subTitle', 'Breakdown of taxes applied to this order'), title: t('taxSummary.title'), icon: _jsx(ReceiptText, {}), collapsed: true, children: _jsx(ScrollArea, { className: "max-h-[350px] px-6 pb-6", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-border border-b", children: [_jsx(TableHead, { className: "py-3", children: t('taxSummary.description') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxRate') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxBase') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxTotal') })] }) }), _jsx(TableBody, { children: order.taxSummary.length ? (_jsxs(_Fragment, { children: [order.taxSummary.map(({ description, taxRate, taxBase, taxTotal }) => (_jsxs(TableRow, { noHover: true, className: "group", children: [_jsx(TableCell, { className: "py-3 font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calculator, { className: "size-4 text-indigo-500 dark:text-indigo-400" }), _jsx("span", { className: "capitalize", children: description })] }) }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Percent, { className: "text-muted-foreground size-3.5" }), _jsxs("span", { className: "font-medium", children: [taxRate, "%"] })] }) }), _jsx(TableCell, { className: "py-3 font-mono text-sm", children: priceFormatter(taxBase, order.currencyCode) }), _jsx(TableCell, { className: "py-3 font-mono text-sm font-medium", children: priceFormatter(taxTotal, order.currencyCode) })] }, description))), _jsxs(TableRow, { noHover: true, className: "border-border bg-muted/30 border-t", children: [_jsx(TableCell, { colSpan: 3, className: "py-3 text-right font-medium", children: t('taxSummary.taxTotal', 'Total Tax') }), _jsx(TableCell, { className: "py-3 font-mono text-sm font-bold", children: priceFormatter(totalTax, order.currencyCode) })] })] })) : (_jsx(TableRow, { noHover: true, children: _jsx(TableCell, { colSpan: 4, className: "text-muted-foreground py-6 text-center", children: _jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [_jsx("div", { className: "rounded-full bg-indigo-100 p-3 dark:bg-indigo-900/30", children: _jsx(AlertCircle, { className: "size-6 text-indigo-500 dark:text-indigo-400" }) }), _jsx("p", { children: t('taxSummary.noTaxSummary', 'No tax information available') }), _jsx("p", { className: "text-muted-foreground text-xs", children: t('taxSummary.noTaxSummaryHint', 'Tax information will appear here when taxes are applied to the order') })] }) }) })) })] }) }) }));
+    return (_jsx(CustomCard, { color: "indigo", description: t('taxSummary.subTitle', 'Breakdown of taxes applied to this order'), title: t('taxSummary.title'), icon: _jsx(ReceiptText, {}), collapsed: true, children: _jsx(ScrollArea, { className: "max-h-[350px] px-6 pb-6", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "border-b border-border", children: [_jsx(TableHead, { className: "py-3", children: t('taxSummary.description') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxRate') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxBase') }), _jsx(TableHead, { className: "py-3", children: t('taxSummary.taxTotal') })] }) }), _jsx(TableBody, { children: order.taxSummary.length ? (_jsxs(_Fragment, { children: [order.taxSummary.map(({ description, taxRate, taxBase, taxTotal }) => (_jsxs(TableRow, { noHover: true, className: "group", children: [_jsx(TableCell, { className: "py-3 font-medium", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calculator, { className: "size-4 text-indigo-500 dark:text-indigo-400" }), _jsx("span", { className: "capitalize", children: description })] }) }), _jsx(TableCell, { className: "py-3", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Percent, { className: "size-3.5 text-muted-foreground" }), _jsxs("span", { className: "font-medium", children: [taxRate, "%"] })] }) }), _jsx(TableCell, { className: "py-3 font-mono text-sm", children: priceFormatter(taxBase, order.currencyCode) }), _jsx(TableCell, { className: "py-3 font-mono text-sm font-medium", children: priceFormatter(taxTotal, order.currencyCode) })] }, description))), _jsxs(TableRow, { noHover: true, className: "border-t border-border bg-muted/30", children: [_jsx(TableCell, { colSpan: 3, className: "py-3 text-right font-medium", children: t('taxSummary.taxTotal', 'Total Tax') }), _jsx(TableCell, { className: "py-3 font-mono text-sm font-bold", children: priceFormatter(totalTax, order.currencyCode) })] })] })) : (_jsx(TableRow, { noHover: true, children: _jsx(TableCell, { colSpan: 4, className: "py-6 text-center text-muted-foreground", children: _jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [_jsx("div", { className: "rounded-full bg-indigo-100 p-3 dark:bg-indigo-900/30", children: _jsx(AlertCircle, { className: "size-6 text-indigo-500 dark:text-indigo-400" }) }), _jsx("p", { children: t('taxSummary.noTaxSummary', 'No tax information available') }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('taxSummary.noTaxSummaryHint', 'Tax information will appear here when taxes are applied to the order') })] }) }) })) })] }) }) }));
 };

package/dist/pages/orders/_components/ToRealizationForm.js

@@ -40,7 +40,7 @@ export const ToRealizationForm = ({ onRealizationFinished }) => {
         //   onRealizationFinished();
         // }
     };
-    return (_jsxs("div", { className: "flex max-h-[60vh] w-auto  min-w-[60vw] max-w-[95vw] flex-col gap-2 overflow-y-auto pr-1", children: [_jsxs("div", { className: "flex gap-4", children: [_jsxs("div", { className: "flex w-[280px] flex-col gap-4", children: [_jsxs("div", { children: [_jsx(Label, { children: t('changeStatus.planned') }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: 'outline', className: cn('w-[280px] justify-start text-left font-normal', !plannedDate && 'text-muted-foreground'), children: [_jsx(CalendarIcon, { className: "mr-2 size-4" }), plannedDate ? format(plannedDate, 'PPP') : _jsx("span", { children: t('changeStatus.datePlaceholder') })] }) }), _jsx(PopoverContent, { className: "w-auto p-0", children: _jsx(Calendar, { mode: "single", selected: plannedDate, onSelect: setPlannedDate }) })] })] }), _jsxs("div", { children: [_jsx(Label, { children: t('changeStatus.deadline') }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: 'outline', className: cn('w-[280px] justify-start text-left font-normal', !plannedDate && 'text-muted-foreground'), children: [_jsx(CalendarIcon, { className: "mr-2 size-4" }), deadlineDate ? format(deadlineDate, 'PPP') : _jsx("span", { children: t('changeStatus.datePlaceholder') })] }) }), _jsx(PopoverContent, { className: "w-auto p-0", children: _jsx(Calendar, { mode: "single", selected: deadlineDate, onSelect: setDeadlineDate }) })] })] }), _jsxs("div", { children: [_jsx(Label, { children: t('changeStatus.color') }), _jsxs(Select, { name: "color", value: color, onValueChange: (e) => setColor(e), children: [_jsx(SelectTrigger, { className: " w-[280px] ", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: colors.map((c) => (_jsx(SelectItem, { value: c, children: c }, c))) }) })] })] }), _jsxs("div", { children: [_jsx(Label, { children: t('changeStatus.info') }), _jsx(Textarea, { className: "h-[60px] w-[280px]  resize-none", maxLength: 64, value: note, onChange: (e) => setNote(e.currentTarget.value) }), _jsx(Label, { className: "text-muted-foreground text-xs", children: t('changeStatus.charLeft', { value: 64 - note.length }) })] })] }), _jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [_jsx(Label, { children: t('changeStatus.selectImages') }), _jsx("div", { className: "flex max-h-[calc(60vh-70px)] flex-1 flex-col gap-2 overflow-y-auto pr-2", children: order?.lines.map((line) => (_jsx(Line, { line: line, asset: selectedAsset.find((a) => a.orderLineID === line.id), onAssetChange: (image) => setSelectedAsset((prev) => prev.map((p) => p.orderLineID === line.id
+    return (_jsxs("div", { className: "flex max-h-[60vh] w-auto max-w-[95vw] min-w-[60vw] flex-col gap-2 overflow-y-auto pr-1", children: [_jsxs("div", { className: "flex gap-4", children: [_jsxs("div", { className: "flex w-[280px] flex-col gap-4", children: [_jsxs("div", { children: [_jsx(Label, { children: t('changeStatus.planned') }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: 'outline', className: cn('w-[280px] justify-start text-left font-normal', !plannedDate && 'text-muted-foreground'), children: [_jsx(CalendarIcon, { className: "mr-2 size-4" }), plannedDate ? format(plannedDate, 'PPP') : _jsx("span", { children: t('changeStatus.datePlaceholder') })] }) }), _jsx(PopoverContent, { className: "w-auto p-0", children: _jsx(Calendar, { mode: "single", selected: plannedDate, onSelect: setPlannedDate }) })] })] }), _jsxs("div", { children: [_jsx(Label, { children: t('changeStatus.deadline') }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: 'outline', className: cn('w-[280px] justify-start text-left font-normal', !plannedDate && 'text-muted-foreground'), children: [_jsx(CalendarIcon, { className: "mr-2 size-4" }), deadlineDate ? format(deadlineDate, 'PPP') : _jsx("span", { children: t('changeStatus.datePlaceholder') })] }) }), _jsx(PopoverContent, { className: "w-auto p-0", children: _jsx(Calendar, { mode: "single", selected: deadlineDate, onSelect: setDeadlineDate }) })] })] }), _jsxs("div", { children: [_jsx(Label, { children: t('changeStatus.color') }), _jsxs(Select, { name: "color", value: color, onValueChange: (e) => setColor(e), children: [_jsx(SelectTrigger, { className: "w-[280px]", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: colors.map((c) => (_jsx(SelectItem, { value: c, children: c }, c))) }) })] })] }), _jsxs("div", { children: [_jsx(Label, { children: t('changeStatus.info') }), _jsx(Textarea, { className: "h-[60px] w-[280px] resize-none", maxLength: 64, value: note, onChange: (e) => setNote(e.currentTarget.value) }), _jsx(Label, { className: "text-xs text-muted-foreground", children: t('changeStatus.charLeft', { value: 64 - note.length }) })] })] }), _jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [_jsx(Label, { children: t('changeStatus.selectImages') }), _jsx("div", { className: "flex max-h-[calc(60vh-70px)] flex-1 flex-col gap-2 overflow-y-auto pr-2", children: order?.lines.map((line) => (_jsx(Line, { line: line, asset: selectedAsset.find((a) => a.orderLineID === line.id), onAssetChange: (image) => setSelectedAsset((prev) => prev.map((p) => p.orderLineID === line.id
                                         ? { orderLineID: p.orderLineID, id: image?.id || '', preview: image?.preview || '' }
                                         : p)) }, line.id))) })] })] }), _jsx(Button, { className: "ml-auto w-min", onClick: async () => {
                     if (!plannedDate) {

package/dist/pages/orders/_components/TopActions.js

@@ -6,7 +6,7 @@ import { PossibleOrderStates } from "./PossibleOrderStates";
 import { DeletionResult, HistoryEntryType } from '@deenruv/admin-types';
 import { ChevronLeft, EllipsisVerticalIcon, Info } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { toast } from 'sonner';
 import { ORDER_STATE } from "../../../graphql/base";
 import { addFulfillmentToOrderResultSelector } from "../../../graphql/draft_order";
@@ -193,7 +193,7 @@ export const TopActions = () => {
     const exitingModifyStates = useMemo(() => [ORDER_STATE.DRAFT, ORDER_STATE.ARRANGING_ADDITIONAL_PAYMENT].includes(order?.state), [order]);
     if (!order)
         return null;
-    return (_jsxs("div", { className: "flex items-center gap-4 ", children: [currentPossibilities && (_jsx(ManualOrderChangeModal, { open: manualChange.state, setOpen: setManualChange, wantedState: manualChange.toAction, order: order, currentPossibilities: currentPossibilities, onConfirm: (e) => changeOrderStatus(e) })), _jsxs(Button, { variant: "outline", size: "icon", className: "size-7", onClick: () => {
+    return (_jsxs("div", { className: "flex items-center gap-4", children: [currentPossibilities && (_jsx(ManualOrderChangeModal, { open: manualChange.state, setOpen: setManualChange, wantedState: manualChange.toAction, order: order, currentPossibilities: currentPossibilities, onConfirm: (e) => changeOrderStatus(e) })), _jsxs(Button, { variant: "outline", size: "icon", className: "size-7", onClick: () => {
                     if (order?.state === ORDER_STATE.DRAFT) {
                         toast.error(t('create.leaveToastMessage'), {
                             position: 'top-center',
@@ -205,7 +205,7 @@ export const TopActions = () => {
                     }
                     else
                         navigate(Routes.orders.list, { viewTransition: true });
-                }, children: [_jsx(ChevronLeft, { className: "size-4" }), _jsx("span", { className: "sr-only", children: t('create.back') })] }), _jsx("h1", { className: "flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0", children: t('create.orderId', { value: order?.id }) }), _jsx(OrderStateBadge, { state: order?.state }), _jsxs("div", { className: "hidden items-center gap-2 md:ml-auto md:flex", children: [actions?.inline?.map(({ component }) => React.createElement(component)) || null, exitingModifyStates ? (_jsx(Button, { size: "sm", onClick: onSubmit, disabled: !isOrderValid, children: order.state === ORDER_STATE.ARRANGING_ADDITIONAL_PAYMENT
+                }, children: [_jsx(ChevronLeft, { className: "size-4" }), _jsx("span", { className: "sr-only", children: t('create.back') })] }), _jsx("h1", { className: "flex-1 shrink-0 text-xl font-semibold tracking-tight whitespace-nowrap sm:grow-0", children: t('create.orderId', { value: order?.id }) }), _jsx(OrderStateBadge, { state: order?.state }), _jsxs("div", { className: "hidden items-center gap-2 md:ml-auto md:flex", children: [actions?.inline?.map(({ component }) => React.createElement(component)) || null, exitingModifyStates ? (_jsx(Button, { size: "sm", onClick: onSubmit, disabled: !isOrderValid, children: order.state === ORDER_STATE.ARRANGING_ADDITIONAL_PAYMENT
                             ? t('create.addPaymentButton')
                             : t('create.completeOrderButton') })) : needFulfillment ? (_jsx(FulfillmentModal, { order: order, onSubmitted: fulfillOrder, disabled: !canAddFulfillment })) : inModifyState ? (_jsx(ModifyAcceptModal, {})) : null, (order.state === ORDER_STATE.ARRANGING_PAYMENT ||
                         order.state === ORDER_STATE.ARRANGING_ADDITIONAL_PAYMENT) && (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Info, { size: 20, className: "text-blue-500" }), _jsx("p", { children: t('addPaymentInfo') })] })), order.state === ORDER_STATE.SHIPPED && (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Info, { size: 20, className: "text-blue-500" }), _jsx("p", { children: t('markFulfillmentInfo') })] }))] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", children: _jsx(EllipsisVerticalIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { asChild: true, children: _jsx(PossibleOrderStates, { orderState: order.state }) }), order.state !== ORDER_STATE.CANCELLED &&
@@ -215,5 +215,5 @@ export const TopActions = () => {
                                 order.state === ORDER_STATE.PAYMENT_SETTLED ||
                                 order.state === ORDER_STATE.PAYMENT_AUTHORIZED ||
                                 order.state === ORDER_STATE.PARTIALLY_SHIPPED ? (_jsx(DropdownMenuItem, { asChild: true, children: _jsx(Button, { variant: "ghost", className: "w-full cursor-pointer justify-start px-4 py-2 text-blue-400 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-400", onClick: changeOrderStatus.bind(null, ORDER_STATE.MODIFYING), children: t('create.modifyOrder') }) })) : null, order.state === ORDER_STATE.ARRANGING_PAYMENT && (_jsx(DropdownMenuItem, { asChild: true, children: _jsx(ConfirmationDialog, { onConfirm: () => cancelOrder(), title: t('create.areYouSure'), description: t('create.cancelOrderMessage'), additionalElement: _jsx(SimpleSelect, { label: t('cancellationLabel'), value: cancellationReason, onValueChange: setCancellationReason, options: reasonOptions }), children: _jsx(Button, { variant: "ghost", className: "w-full justify-start px-4 py-2 text-red-400 hover:text-red-400 dark:text-red-400 dark:hover:text-red-400", children: t('create.cancelOrder') }) }) })), (order.state === ORDER_STATE.PAYMENT_SETTLED ||
-                                order.state === ORDER_STATE.ARRANGING_ADDITIONAL_PAYMENT) && (_jsx(CancelAndRefundDialog, { refundReason: cancellationReason, setRefundReason: setCancellationReason, onConfirm: cancelAndRefund })), order.state === ORDER_STATE.DRAFT && (_jsx(DropdownMenuItem, { asChild: true, children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", className: "w-full justify-start px-4 py-2  text-red-400 hover:text-red-400 dark:hover:text-red-400", children: t('deleteDraft.button') }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t('deleteDraft.title') }), _jsx(AlertDialogDescription, { children: t('deleteDraft.descriptionDraft') })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t('deleteDraft.cancel') }), _jsx(AlertDialogAction, { onClick: () => deleteDraftOrder(), children: t('deleteDraft.confirm') })] })] })] }) }))] })] })] }));
+                                order.state === ORDER_STATE.ARRANGING_ADDITIONAL_PAYMENT) && (_jsx(CancelAndRefundDialog, { refundReason: cancellationReason, setRefundReason: setCancellationReason, onConfirm: cancelAndRefund })), order.state === ORDER_STATE.DRAFT && (_jsx(DropdownMenuItem, { asChild: true, children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", className: "w-full justify-start px-4 py-2 text-red-400 hover:text-red-400 dark:hover:text-red-400", children: t('deleteDraft.button') }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t('deleteDraft.title') }), _jsx(AlertDialogDescription, { children: t('deleteDraft.descriptionDraft') })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t('deleteDraft.cancel') }), _jsx(AlertDialogAction, { onClick: () => deleteDraftOrder(), children: t('deleteDraft.confirm') })] })] })] }) }))] })] })] }));
 };

package/dist/pages/payment-methods/Detail.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { useValidators, DetailView, createDeenruvForm, useMutation, getMutation, useTranslation, } from '@deenruv/react-ui-devkit';
 import { PaymentMethodDetailView } from "./_components/PaymentMethodDetailView.js";
 const CreatePaymentMethodMutation = getMutation('createPaymentMethod');