@deenruv/admin-dashboard 1.0.0

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

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslation, useOrder, cn, Button, DialogFooter, Input } from '@deenruv/react-ui-devkit';
+import { useMemo, useState } from 'react';
+import { ArrowDown, ArrowUp, Package, MinusCircle, PlusCircle } from 'lucide-react';
+export const ActionQuantityPrice = ({ line, onOpenChange, onPriceQuantityChangeApprove, }) => {
+    const { t } = useTranslation('orders');
+    const [quantityChange, setQuantityChange] = useState(line?.quantity);
+    const [isLoading, setIsLoading] = useState(false);
+    const { order } = useOrder();
+    const baseOrderLine = useMemo(() => order?.lines.find((l) => l.id === line?.id), [line, order?.lines]);
+    const handleQuantityChange = (e) => {
+        if (!e.currentTarget.value)
+            setQuantityChange(0);
+        const value = Number.parseInt(e.currentTarget.value, 10);
+        setQuantityChange(value);
+    };
+    const incrementQuantity = () => {
+        setQuantityChange((prev) => (prev !== undefined ? prev + 1 : 1));
+    };
+    const decrementQuantity = () => {
+        setQuantityChange((prev) => (prev ? prev - 1 : 0));
+    };
+    const quantityDelta = useMemo(() => (quantityChange ? quantityChange - (baseOrderLine?.quantity ?? 0) : 0), [quantityChange, baseOrderLine?.quantity]);
+    const handleApprove = async () => {
+        if (!line?.id)
+            return;
+        setIsLoading(true);
+        try {
+            await onPriceQuantityChangeApprove({
+                lineID: line.id,
+                quantityChange: quantityChange,
+            });
+            onOpenChange(false);
+        }
+        catch (error) {
+            console.error('Error updating quantity:', error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const productImage = line?.productVariant?.featuredAsset?.preview || line?.productVariant?.product?.featuredAsset?.preview;
+    const formatPrice = (amount) => {
+        if (amount === undefined)
+            return '—';
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: line?.productVariant?.currencyCode || 'USD',
+            minimumFractionDigits: 2,
+            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', {
+                                                            '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')) })] })] }));
+};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, Dialog, DialogContent, DialogHeader, DialogTitle } from '@deenruv/react-ui-devkit';
+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 })] }) }));
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogTitle, ScrollArea, useOrder, useServer, EntityCustomFields, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useState } from 'react';
+export const OrderLineCustomFields = ({ line, order, mode }) => {
+    const { setModifiedOrder } = useOrder(({ setModifiedOrder }) => ({ setModifiedOrder }));
+    const orderLineCustomFields = useServer((p) => p.serverConfig?.entityCustomFields?.find((el) => el.entityName === 'OrderLine')?.customFields || []);
+    const { t } = useTranslation('common');
+    const [open, setOpen] = useState(false);
+    if (!order)
+        return null;
+    return (_jsxs(_Fragment, { children: [!!orderLineCustomFields?.length && (_jsx(Button, { variant: "outline", className: "h-8 self-end p-0 px-4", onClick: () => setOpen(true), children: t('show') })), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "min-w-[60vw]", children: [_jsx(DialogTitle, { children: line.productVariant.name }), _jsx(ScrollArea, { className: "max-h-[90vh]", children: _jsx(EntityCustomFields, { additionalData: { product: line.productVariant.product, variant: line.productVariant }, entityName: "orderLine", id: line.id, hideButton: mode === 'create' || mode === 'view', disabled: mode === 'view', fetch: async (runtimeSelector) => {
+                                    const orderLine = order.lines.find((l) => l.id === line.id);
+                                    return orderLine && 'customFields' in orderLine
+                                        ? { customFields: orderLine.customFields }
+                                        : { customFields: {} };
+                                }, mutation: async (customFields) => {
+                                    console.log(mode, customFields);
+                                    if (mode === 'update') {
+                                        setModifiedOrder({
+                                            ...order,
+                                            lines: order.lines.map((l) => (l.id === line.id ? { ...l, customFields } : l)),
+                                        });
+                                        setOpen(false);
+                                    }
+                                } }) })] }) })] }));
+};

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, useOrder, Label, Renderer } from '@deenruv/react-ui-devkit';
+import { format } from 'date-fns';
+export const OrderSummary = () => {
+    const { order } = useOrder();
+    const { t } = useTranslation('orders');
+    if (!order)
+        return null;
+    return (_jsxs("div", { className: "flex flex-row flex-wrap gap-x-4 gap-y-2", children: [_jsx(Label, { className: "text-muted-foreground", children: t('create.baseInfoCode', { value: order.code }) }), _jsx(Label, { className: "text-muted-foreground", children: "|" }), _jsx(Label, { className: "text-muted-foreground", children: t('create.baseInfoCreated', { value: format(new Date(order.createdAt), 'dd.MM.yyyy hh:mm') }) }), _jsx(Label, { className: "text-muted-foreground", children: "|" }), _jsx(Label, { className: "text-muted-foreground", children: t('create.baseInfoUpdated', { value: format(new Date(order.updatedAt), 'dd.MM.yyyy hh:mm') }) }), _jsx(Renderer, { position: "orders-summary" })] }));
+};

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

@@ -0,0 +1,6 @@
+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;
+};

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

@@ -0,0 +1,113 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useOrder, Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, ScrollArea, Badge, DropdownMenuItem, ContextMenu, ConfirmationDialog, CustomCard, EmptyState, useTranslation, apiClient, DialogTrigger, Input, priceFormatter, } from '@deenruv/react-ui-devkit';
+import { format } from 'date-fns';
+import { CreditCard, Calendar, CheckCircle2, XCircle, Clock, AlertCircle, Wallet, Receipt, CheckCircle, Ban, ArrowDownCircle, ArrowUpCircle, RefreshCcw, } from 'lucide-react';
+import { useState } from 'react';
+import { AddPaymentDialog } from './index.js';
+import { PAYMENT_STATE } from "../../../graphql/base";
+import { MetadataDisplay } from './PaymentMetadata.js';
+export const Payments = () => {
+    const { order, addPaymentToOrder, settlePayment, cancelPayment } = useOrder();
+    const { t } = useTranslation('orders');
+    const [paymentToBeSettled, setPaymentToBeSettled] = useState('');
+    const [expandedRefunds, setExpandedRefunds] = useState([]);
+    if (!order)
+        return null;
+    const { payments } = order;
+    // Helper function to get status badge styling
+    const getStatusBadge = (state) => {
+        switch (state) {
+            case PAYMENT_STATE.SETTLED:
+                return {
+                    variant: 'success',
+                    icon: _jsx(CheckCircle, { className: "mr-1 size-3.5" }),
+                    label: t('payments.status.settled', 'Settled'),
+                };
+            case PAYMENT_STATE.CANCELLED:
+                return {
+                    variant: 'destructive',
+                    icon: _jsx(Ban, { className: "mr-1 size-3.5" }),
+                    label: t('payments.status.cancelled', 'Cancelled'),
+                };
+            case PAYMENT_STATE.AUTHORIZED:
+                return {
+                    variant: 'outline',
+                    icon: _jsx(Clock, { className: "mr-1 size-3.5" }),
+                    label: t('payments.status.authorized', 'Authorized'),
+                };
+            default:
+                return {
+                    variant: 'secondary',
+                    icon: _jsx(AlertCircle, { className: "mr-1 size-3.5" }),
+                    label: state,
+                };
+        }
+    };
+    // Helper function to get refund status badge styling
+    const getRefundStatusBadge = (state) => {
+        switch (state.toLowerCase()) {
+            case 'settled':
+                return {
+                    variant: 'success',
+                    icon: _jsx(CheckCircle, { className: "mr-1 size-3.5" }),
+                    label: t('refunds.status.settled', 'Settled'),
+                };
+            case 'pending':
+                return {
+                    variant: 'outline',
+                    icon: _jsx(Clock, { className: "mr-1 size-3.5" }),
+                    label: t('refunds.status.pending', 'Pending'),
+                };
+            case 'failed':
+                return {
+                    variant: 'destructive',
+                    icon: _jsx(XCircle, { className: "mr-1 size-3.5" }),
+                    label: t('refunds.status.failed', 'Failed'),
+                };
+            default:
+                return {
+                    variant: 'secondary',
+                    icon: _jsx(AlertCircle, { className: "mr-1 size-3.5" }),
+                    label: state,
+                };
+        }
+    };
+    const toggleRefundExpand = (id) => {
+        setExpandedRefunds((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]));
+    };
+    const [settleRefundTransactionId, setSettleRefundTransactionId] = useState(null);
+    const settleRefund = async (id) => {
+        if (!settleRefundTransactionId) {
+            return;
+        }
+        const { settleRefund } = await apiClient('mutation')({
+            settleRefund: [
+                { input: { id, transactionId: settleRefundTransactionId } },
+                {
+                    __typename: true,
+                    '...on Refund': { id: true },
+                    '...on RefundStateTransitionError': { errorCode: true, fromState: true, message: true },
+                },
+            ],
+        });
+        if (settleRefund.__typename === 'Refund') {
+            setSettleRefundTransactionId(null);
+        }
+        else {
+            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 }) => {
+                                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) => {
+                                                                        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}`));
+                                                                    }) })] })] }) }) }))] }, 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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ScrollArea, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, Timeline, TimelineItem, TimelineLine, TimelineDot, TimelineContent, TimelineHeading, useServer, Button, Badge, useTranslation, } from '@deenruv/react-ui-devkit';
+import { ArrowRight, Check, CircleDot } from 'lucide-react';
+export const PossibleOrderStates = ({ orderState }) => {
+    const { t } = useTranslation('orders');
+    const { t: tCommon } = useTranslation('common');
+    const orderProcess = useServer((p) => p.serverConfig?.orderProcess || []);
+    const statesAfterCancelled = useMemo(() => {
+        const cancelledIndex = orderProcess.findIndex((s) => s.name === 'Cancelled');
+        if (cancelledIndex === -1)
+            return null;
+        return orderProcess.slice(cancelledIndex + 1);
+    }, [orderProcess]);
+    const sortedOrderProcess = useMemo(() => {
+        if (!statesAfterCancelled)
+            return orderProcess;
+        const sorted = [];
+        let i = 0;
+        while (i < orderProcess.length) {
+            const state = orderProcess[i];
+            const firstPossibleNextState = state.to.length > 0 ? state.to[0] : null;
+            if (firstPossibleNextState) {
+                const stateAfterCancelled = statesAfterCancelled.find((s) => s.name === firstPossibleNextState);
+                if (stateAfterCancelled) {
+                    sorted.push(state);
+                    sorted.push(stateAfterCancelled);
+                    i++;
+                }
+                else {
+                    sorted.push(state);
+                }
+            }
+            else {
+                sorted.push(state);
+            }
+            i++;
+        }
+        const cancelledIndex = sorted.findIndex((s) => s.name === 'Cancelled');
+        if (cancelledIndex !== -1) {
+            return sorted.slice(0, cancelledIndex + 1);
+        }
+        return sorted;
+    }, [orderProcess, statesAfterCancelled]);
+    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) => {
+                                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));
+                            }) }) })] })] }));
+};

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, useOrder, priceFormatter, CardFooter } from '@deenruv/react-ui-devkit';
+import { ShieldCheck } from 'lucide-react';
+import { useMemo } from 'react';
+export const PriceChangedInfo = ({ changes }) => {
+    const { order } = useOrder();
+    const { t } = useTranslation('orders');
+    const priceDifference = useMemo(() => {
+        const totalWithTaxChange = changes?.rest.find((ch) => ch.path === 'totalWithTax');
+        console.log('TOTAL', totalWithTaxChange);
+        if (!totalWithTaxChange)
+            return 0;
+        return +totalWithTaxChange.added - +totalWithTaxChange.removed;
+    }, [changes]);
+    return priceDifference ? (_jsx(CardFooter, { className: "flex flex-col border-t pt-4", children: _jsx("div", { className: "w-full rounded-md border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(ShieldCheck, { className: "mt-0.5 size-5 text-amber-500" }), _jsxs("div", { children: [t('modify.priceDifference'), " ", priceDifference > 0 && '+', priceFormatter(priceDifference, order?.currencyCode)] })] }) }) })) : null;
+};