@tesouro/embedded-components-react 0.5.235 → 0.5.243

package/dist/libs/tesouro-embedded-components-react/invoicing-widget/ui/dist/index34.js

@@ -1,496 +1,406 @@
-import { Alert as e, AlertDescription as t, Button as n, Checkbox as r, Field as i, FieldContent as a, FieldError as o, FieldLabel as s, Input as c, InputGroup as l, InputGroupAddon as u, InputGroupInput as d, Label as f, RadioGroup as p, RadioGroupItem as m, Select as h, SelectContent as g, SelectItem as _, SelectTrigger as v, SelectValue as y, Separator as b, Sheet as x, SheetContent as S, SheetDescription as C, SheetFooter as w, SheetHeader as T, SheetTitle as ee, Spinner as te, Typography as E, cn as D } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { RECEIVABLE_FORM_SHEET_LABELS_EN as ne } from "./index9.js";
-import { ReceivableFormTotals as re } from "./index32.js";
-import { ReceivableNotesSection as O } from "./index33.js";
-import { useId as ie } from "react";
-import { jsx as k, jsxs as A } from "react/jsx-runtime";
-import { MinusIcon as j, PlusIcon as M, Trash2Icon as N } from "lucide-react";
+import { Accordion as e, AccordionContent as t, AccordionItem as n, AccordionTrigger as r, Badge as i, Button as a, Sheet as o, SheetContent as ee, SheetDescription as s, SheetHeader as c, SheetTitle as l, Spinner as te, Tooltip as u, TooltipContent as d, TooltipProvider as f, TooltipTrigger as p, cn as m } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { ErrorState as h } from "../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import "../../../shared/ui/dist/index.js";
+import { RECEIVABLE_DETAILS_PANEL_LABELS_EN as g } from "./index13.js";
+import { ReceivableStatusBadge as _ } from "./index22.js";
+import { RECEIVABLE_DETAILS_SECTION as v } from "./index25.js";
+import { ACTION_ICON as y, ACTION_LABEL_KEY as b, STATUS_ICON as x, amountValueToneClass as S, headerIconButtonClass as C } from "./index23.js";
+import { AmountCell as w } from "./index24.js";
+import { AttachmentsItem as ne } from "./index26.js";
+import { AuditHistoryItem as re } from "./index27.js";
+import { CloseButton as T } from "./index28.js";
+import { InfoRow as E } from "./index29.js";
+import { OverflowMenu as ie } from "./index30.js";
+import { SeriesStatusChip as ae } from "./index32.js";
+import { ScheduledInvoicesTable as D } from "./index33.js";
+import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
+import { ChevronLeft as j, CircleAlert as M, EyeIcon as N, Repeat as P } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/invoicing-widget/ui/dist/index34.js
-var P = "__none__", F = "__manage__";
-function I({ message: e }) {
-	return e ? /* @__PURE__ */ k("p", {
-		className: "ttw:text-sm ttw:text-destructive",
-		children: e
-	}) : null;
-}
-function L({ formId: e, lineItem: t, errors: i, controls: a, focusOnMount: o, canRemove: s, unitOptions: c, currencySymbol: f, labels: p, renderProductSelector: m, onChange: b, onCommit: x, onQuantityStep: S, onManageUnits: C, onRemove: w }) {
-	let T = `${e}-line-${t.id}`;
-	return /* @__PURE__ */ A("li", {
-		className: "ttw:flex ttw:h-9 ttw:items-center ttw:gap-2.5",
-		children: [
-			/* @__PURE__ */ k("div", {
-				className: "ttw:min-w-30 ttw:flex-1",
-				children: m(t, {
-					inputId: `${T}-name`,
-					invalid: !!i?.name,
-					focusOnMount: o
-				})
-			}),
-			/* @__PURE__ */ A("div", {
-				className: D("ttw:flex ttw:h-9 ttw:w-26 ttw:min-w-26 ttw:items-center ttw:rounded-md ttw:border ttw:border-input ttw:shadow-xs", i?.quantity && "ttw:border-destructive"),
-				children: [
-					/* @__PURE__ */ k("button", {
-						type: "button",
-						"aria-label": p.decreaseQuantityButton,
-						disabled: a ? !a.canDecreaseQuantity : !1,
-						className: "ttw:flex ttw:size-6 ttw:shrink-0 ttw:items-center ttw:justify-center ttw:rounded-sm ttw:text-muted-foreground ttw:hover:bg-accent ttw:disabled:pointer-events-none ttw:disabled:opacity-50",
-						onClick: () => S(-1),
-						children: /* @__PURE__ */ k(j, { className: "ttw:size-3.5" })
-					}),
-					/* @__PURE__ */ k("input", {
-						id: `${T}-quantity`,
-						"aria-label": p.quantityLabel,
-						"aria-invalid": !!i?.quantity || void 0,
-						type: "text",
-						inputMode: "decimal",
-						className: "ttw:h-full ttw:w-full ttw:min-w-0 ttw:bg-transparent ttw:px-0 ttw:text-center ttw:text-sm ttw:outline-none",
-						value: t.quantity,
-						onChange: (e) => b({ quantity: e.target.value }),
-						onBlur: () => x("quantity")
-					}),
-					/* @__PURE__ */ k("button", {
-						type: "button",
-						"aria-label": p.increaseQuantityButton,
-						disabled: a ? !a.canIncreaseQuantity : !1,
-						className: "ttw:flex ttw:size-6 ttw:shrink-0 ttw:items-center ttw:justify-center ttw:rounded-sm ttw:text-muted-foreground ttw:hover:bg-accent ttw:disabled:pointer-events-none ttw:disabled:opacity-50",
-						onClick: () => S(1),
-						children: /* @__PURE__ */ k(M, { className: "ttw:size-3.5" })
-					})
-				]
-			}),
-			/* @__PURE__ */ A(h, {
-				value: t.unit || P,
-				onValueChange: (e) => {
-					if (e === F) {
-						C?.();
-						return;
-					}
-					b({ unit: e === P ? "" : e });
-				},
-				children: [/* @__PURE__ */ k(v, {
-					id: `${T}-unit`,
-					"aria-label": p.unitLabel,
-					"aria-invalid": !!i?.measureUnit || void 0,
-					className: "ttw:w-22",
-					children: /* @__PURE__ */ k(y, {
-						className: "ttw:truncate",
-						placeholder: p.unitPlaceholder
-					})
-				}), /* @__PURE__ */ A(g, { children: [
-					C && /* @__PURE__ */ A(_, {
-						value: F,
-						className: "ttw:font-semibold ttw:text-primary ttw:hover:text-primary ttw:focus:text-primary",
-						children: [/* @__PURE__ */ k(M, { className: "ttw:text-primary" }), p.manageUnitsOption]
-					}),
-					/* @__PURE__ */ k(_, {
-						value: P,
-						children: p.unitNone
-					}),
-					c.map((e) => /* @__PURE__ */ k(_, {
-						value: e.value,
-						children: e.label
-					}, e.value))
-				] })]
-			}),
-			/* @__PURE__ */ A(l, {
-				className: "ttw:w-full ttw:max-w-41 ttw:min-w-29",
-				children: [/* @__PURE__ */ k(u, {
-					align: "inline-start",
-					children: f
-				}), /* @__PURE__ */ k(d, {
-					id: `${T}-price`,
-					"aria-label": p.priceLabel,
-					"aria-invalid": !!i?.price || void 0,
-					"data-has-start-addon": !0,
-					type: "text",
-					inputMode: "decimal",
-					className: "ttw:text-right",
-					value: t.price,
-					onChange: (e) => b({ price: e.target.value }),
-					onBlur: () => x("price")
-				})]
-			}),
-			/* @__PURE__ */ k("div", {
-				className: "ttw:flex ttw:w-12 ttw:min-w-12 ttw:items-center ttw:justify-center",
-				children: /* @__PURE__ */ k(r, {
-					id: `${T}-taxable`,
-					"aria-label": p.taxableLabel,
-					checked: t.taxable,
-					onCheckedChange: (e) => b({ taxable: e === !0 })
-				})
-			}),
-			s && /* @__PURE__ */ k(n, {
-				type: "button",
-				variant: "ghost",
+function F({ open: F, onOpenChange: I, details: L, unsupported: R, isLoading: z, isError: B, onActionClick: V, onClose: H, openSections: U, onOpenSectionsChange: W, disabledActions: G, labels: K }) {
+	let q = {
+		...g,
+		...K
+	}, J = L?.panel, Y = B ? {
+		title: q.errorTitle,
+		description: q.errorDescription
+	} : R, oe = J?.amountTone === "danger", X = (e) => q[b[e]], Z = L ? x[L.status] : void 0, Q = J?.recurringSeries, $ = L && J && J.primaryActions.length > 0 ? /* @__PURE__ */ k("div", {
+		className: "ttw:flex ttw:items-center ttw:gap-2 ttw:border-t ttw:border-border ttw:pt-3",
+		children: J.primaryActions.map((e, t) => {
+			let n = y[e], r = t === J.primaryActions.length - 1;
+			return /* @__PURE__ */ A(a, {
 				size: "sm",
-				"aria-label": p.removeLineItemButton,
-				className: "ttw:w-10 ttw:rounded-none ttw:border-l ttw:border-border ttw:pl-4 ttw:text-muted-foreground ttw:hover:bg-transparent ttw:hover:text-destructive ttw:has-[>svg]:pr-0",
-				onClick: w,
-				children: /* @__PURE__ */ k(N, {})
-			})
-		]
-	});
-}
-function ae({ inputId: e, discountType: t, value: n, error: r, currencySymbol: c, disabled: f, labels: p, onChange: m, onTypeChange: h, onFocus: g, onBlur: _ }) {
-	let v = `${e}-error`, y = [{
-		type: "amount",
-		label: c,
-		ariaLabel: p.discountAmountOptionAriaLabel
-	}, {
-		type: "percentage",
-		label: p.discountPercentageOption,
-		ariaLabel: p.discountPercentageOptionAriaLabel
-	}];
-	return /* @__PURE__ */ A(i, {
-		className: "ttw:flex-col",
-		children: [/* @__PURE__ */ A(a, {
-			className: "ttw:flex-row ttw:items-center ttw:justify-end",
-			children: [/* @__PURE__ */ k(s, {
-				htmlFor: e,
-				className: D(r && "ttw:text-destructive"),
-				children: p.discountLabel
-			}), /* @__PURE__ */ A(l, {
-				className: "ttw:w-40 ttw:overflow-hidden",
-				children: [/* @__PURE__ */ k(u, {
-					align: "inline-start",
-					className: "ttw:gap-0 ttw:self-stretch ttw:p-0 ttw:has-[>button]:ml-0",
-					children: y.map((e) => /* @__PURE__ */ k("button", {
-						type: "button",
-						"aria-label": e.ariaLabel,
-						"aria-pressed": t === e.type,
-						disabled: f,
-						className: D("ttw:pointer-events-auto ttw:h-full ttw:w-9 ttw:cursor-pointer ttw:border-r ttw:border-input ttw:text-sm ttw:transition-colors ttw:disabled:pointer-events-none ttw:disabled:opacity-50", t === e.type ? "ttw:bg-primary ttw:text-primary-foreground" : "ttw:text-muted-foreground ttw:hover:bg-muted ttw:hover:text-foreground"),
-						onClick: () => h(e.type),
-						children: e.label
-					}, e.type))
-				}), /* @__PURE__ */ k(d, {
-					id: e,
-					type: "text",
-					inputMode: "decimal",
-					className: "ttw:text-right",
-					"aria-invalid": !!r || void 0,
-					"aria-describedby": r ? v : void 0,
-					disabled: f,
-					value: n,
-					onChange: (e) => m(e.target.value),
-					onFocus: g,
-					onBlur: _
+				variant: r ? "default" : "outline",
+				onClick: () => V(e, L),
+				children: [/* @__PURE__ */ k(n, { className: "ttw:size-4" }), X(e)]
+			}, e);
+		})
+	}) : null;
+	return /* @__PURE__ */ k(o, {
+		open: F,
+		onOpenChange: I,
+		children: /* @__PURE__ */ A(ee, {
+			showCloseButton: !1,
+			className: "ttw:w-180 ttw:overflow-y-auto ttw:p-0 ttw:sm:max-w-180",
+			children: [Y || z || !L ? /* @__PURE__ */ k(T, {
+				label: q.closeButton,
+				onClose: H,
+				className: m(C, "ttw:absolute ttw:right-4 ttw:top-4 ttw:z-10")
+			}) : null, Y ? /* @__PURE__ */ A("div", {
+				className: "ttw:p-6",
+				children: [/* @__PURE__ */ A(c, {
+					className: "ttw:sr-only",
+					children: [/* @__PURE__ */ k(l, { children: Y.title }), /* @__PURE__ */ k(s, { children: q.hiddenDescription })]
+				}), /* @__PURE__ */ k(h, {
+					title: Y.title,
+					description: Y.description
 				})]
-			})]
-		}), r && /* @__PURE__ */ k(o, {
-			id: v,
-			className: "ttw:text-right",
-			children: r
-		})]
-	});
-}
-function R({ open: r, onOpenChange: j, mode: N = "create", values: P, errors: F, currencyOptions: R, unitOptions: oe, currencySymbol: z, lineItemControls: B, autoFocusLineItemId: V, lineItemsLoading: H, inProgress: U, customerSelector: W, renderProductSelector: G, onChange: K, onLineItemChange: q, onLineItemCommit: se, onLineItemQuantityStep: ce, onTaxRateCommit: J, onDiscountFocus: le, onDiscountCommit: ue, totals: de, onManageUnits: fe, onAddLineItem: pe, onRemoveLineItem: me, showDueDateField: Y, billingSection: he, remindersSection: ge, bankAccountSection: _e, attachmentsSection: ve, cancelDisabled: ye, draftButtonLabel: X, draftDisabled: be, primaryButtonLabel: xe, primaryDisabled: Se, scrollContainerRef: Ce, onSubmit: we, onDraftClick: Te, onPrimaryClick: Ee, onCancel: De, labels: Oe }) {
-	let Z = {
-		...ne,
-		...Oe
-	}, Q = ie(), $ = N === "edit", ke = D("ttw:grid ttw:gap-4", $ && Y ? "ttw:grid-cols-3" : "ttw:grid-cols-2");
-	return /* @__PURE__ */ k(x, {
-		open: r,
-		onOpenChange: j,
-		children: /* @__PURE__ */ A(S, {
-			ref: Ce,
-			className: "ttw:w-180 ttw:overflow-y-auto ttw:sm:max-w-180",
-			children: [
-				/* @__PURE__ */ A(T, { children: [/* @__PURE__ */ k(ee, { children: N === "edit" ? Z.editTitle : Z.createTitle }), /* @__PURE__ */ k(C, {
+			}) : z || !L || !J ? /* @__PURE__ */ A(c, {
+				className: "ttw:p-6",
+				children: [/* @__PURE__ */ k(l, { children: q.loadingTitle }), /* @__PURE__ */ k(s, {
 					className: "ttw:sr-only",
-					children: Z.hiddenDescription
-				})] }),
-				/* @__PURE__ */ A("form", {
-					id: Q,
-					onSubmit: (e) => {
-						e.preventDefault(), e.stopPropagation(), we();
-					},
-					children: [/* @__PURE__ */ k("button", {
-						type: "submit",
-						className: "ttw:sr-only",
-						tabIndex: -1,
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ A("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-5 ttw:px-6 ttw:pb-6",
+					children: q.hiddenDescription
+				})]
+			}) : /* @__PURE__ */ A(O, { children: [
+				J.seriesLink ? /* @__PURE__ */ k("div", {
+					className: "ttw:border-b ttw:border-border ttw:px-6 ttw:py-3",
+					children: /* @__PURE__ */ A("button", {
+						type: "button",
+						onClick: J.seriesLink.onOpen,
+						className: "ttw:flex ttw:items-center ttw:gap-1 ttw:text-sm ttw:text-primary ttw:hover:underline",
+						children: [/* @__PURE__ */ k(j, {
+							className: "ttw:size-4",
+							"aria-hidden": "true"
+						}), J.seriesLink.backLabel]
+					})
+				}) : null,
+				/* @__PURE__ */ A(c, {
+					className: "ttw:flex ttw:flex-row ttw:items-start ttw:justify-between ttw:gap-2 ttw:space-y-0 ttw:px-6 ttw:py-4",
+					children: [/* @__PURE__ */ A("div", {
+						className: "ttw:flex ttw:flex-col ttw:gap-0.5",
 						children: [
-							/* @__PURE__ */ A("div", {
-								className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-								children: [
-									/* @__PURE__ */ k(f, { children: Z.documentTypeLabel }),
-									/* @__PURE__ */ A(p, {
-										className: "ttw:flex ttw:flex-row ttw:gap-6",
-										disabled: N === "edit",
-										value: P.type,
-										onValueChange: (e) => K({ type: e }),
-										children: [/* @__PURE__ */ A("div", {
-											className: "ttw:flex ttw:items-center ttw:gap-2",
-											children: [/* @__PURE__ */ k(m, {
-												value: "invoice",
-												id: `${Q}-invoice`
-											}), /* @__PURE__ */ k(f, {
-												htmlFor: `${Q}-invoice`,
-												children: Z.typeInvoice
-											})]
-										}), /* @__PURE__ */ A("div", {
-											className: "ttw:flex ttw:items-center ttw:gap-2",
-											children: [/* @__PURE__ */ k(m, {
-												value: "quote",
-												id: `${Q}-quote`
-											}), /* @__PURE__ */ k(f, {
-												htmlFor: `${Q}-quote`,
-												children: Z.typeQuote
-											})]
-										})]
-									}),
-									/* @__PURE__ */ k(I, { message: F?.type })
-								]
+							/* @__PURE__ */ k(l, {
+								className: "ttw:text-xl ttw:font-semibold ttw:text-foreground",
+								children: L.title
 							}),
-							/* @__PURE__ */ A("div", {
-								className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-								children: [
-									/* @__PURE__ */ k(f, { children: Z.customerLabel }),
-									W,
-									/* @__PURE__ */ k("p", {
+							J.subtitle ? /* @__PURE__ */ k("p", {
+								className: "ttw:text-sm ttw:text-muted-foreground",
+								children: J.subtitle
+							}) : null,
+							/* @__PURE__ */ k(s, {
+								className: "ttw:sr-only",
+								children: q.hiddenDescription
+							})
+						]
+					}), /* @__PURE__ */ k(f, {
+						delayDuration: 500,
+						children: /* @__PURE__ */ A("div", {
+							className: "ttw:flex ttw:items-center ttw:gap-1.5",
+							children: [
+								L.pdfUrl ? /* @__PURE__ */ A(u, { children: [/* @__PURE__ */ k(p, {
+									asChild: !0,
+									children: /* @__PURE__ */ k(a, {
+										asChild: !0,
+										variant: "ghost",
+										size: "icon",
+										className: C,
+										children: /* @__PURE__ */ k("a", {
+											href: L.pdfUrl,
+											target: "_blank",
+											rel: "noreferrer",
+											"aria-label": q.viewPdfButton,
+											children: /* @__PURE__ */ k(N, { className: "ttw:size-4" })
+										})
+									})
+								}), /* @__PURE__ */ k(d, { children: q.viewPdfButton })] }) : null,
+								J.overflowActions.length > 0 ? /* @__PURE__ */ k(ie, {
+									actions: J.overflowActions,
+									triggerLabel: q.moreActionsLabel,
+									getActionLabel: X,
+									onSelect: (e) => V(e, L),
+									disabledActions: G,
+									className: C
+								}) : null,
+								/* @__PURE__ */ A(u, { children: [/* @__PURE__ */ k(p, {
+									asChild: !0,
+									children: /* @__PURE__ */ k(T, {
+										label: q.closeButton,
+										onClose: H,
+										className: C
+									})
+								}), /* @__PURE__ */ k(d, { children: q.closeButton })] })
+							]
+						})
+					})]
+				}),
+				/* @__PURE__ */ A("div", {
+					className: "ttw:flex ttw:flex-col",
+					children: [/* @__PURE__ */ k("div", {
+						className: "ttw:px-6",
+						children: Q ? /* @__PURE__ */ A("div", {
+							className: "ttw:flex ttw:flex-col ttw:gap-3 ttw:rounded-lg ttw:bg-violet-50 ttw:p-4 ttw:dark:bg-violet-950",
+							children: [
+								/* @__PURE__ */ A("div", {
+									className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+									children: [/* @__PURE__ */ k("span", {
 										className: "ttw:text-xs ttw:text-muted-foreground",
-										children: Z.customerHint
-									}),
-									/* @__PURE__ */ k(I, { message: F?.customerId })
-								]
-							}),
-							/* @__PURE__ */ A("div", {
-								className: ke,
-								children: [
-									/* @__PURE__ */ A("div", {
-										className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-										children: [
-											/* @__PURE__ */ k(f, {
-												htmlFor: `${Q}-currency`,
-												children: Z.currencyLabel
-											}),
-											/* @__PURE__ */ A(h, {
-												value: P.currency,
-												onValueChange: (e) => K({ currency: e }),
-												children: [/* @__PURE__ */ k(v, {
-													id: `${Q}-currency`,
-													children: /* @__PURE__ */ k(y, {})
-												}), /* @__PURE__ */ k(g, { children: R.map((e) => /* @__PURE__ */ k(_, {
-													value: e.value,
-													children: e.label
-												}, e.value)) })]
-											}),
-											/* @__PURE__ */ k(I, { message: F?.currency })
-										]
-									}),
-									$ && /* @__PURE__ */ A("div", {
-										className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-										children: [
-											/* @__PURE__ */ k(f, {
-												htmlFor: `${Q}-issue-date`,
-												children: Z.issueDateLabel
-											}),
-											/* @__PURE__ */ k(c, {
-												id: `${Q}-issue-date`,
-												type: "date",
-												value: P.issueDate,
-												onChange: (e) => K({ issueDate: e.target.value })
-											}),
-											/* @__PURE__ */ k(I, { message: F?.issueDate })
-										]
-									}),
-									Y && /* @__PURE__ */ A("div", {
-										className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-										children: [
-											/* @__PURE__ */ k(f, {
-												htmlFor: `${Q}-due-date`,
-												children: Z.dueDateLabel
-											}),
-											/* @__PURE__ */ k(c, {
-												id: `${Q}-due-date`,
-												type: "date",
-												value: P.dueDate,
-												onChange: (e) => K({ dueDate: e.target.value })
-											}),
-											/* @__PURE__ */ k(I, { message: F?.dueDate })
-										]
+										children: q.recurringAmountCaption
+									}), /* @__PURE__ */ A("div", {
+										className: "ttw:flex ttw:items-baseline ttw:gap-1.5",
+										children: [/* @__PURE__ */ k("span", {
+											className: m("ttw:text-2xl ttw:font-semibold", S[J.amountTone]),
+											children: Q.amountLabel
+										}), /* @__PURE__ */ k("span", {
+											className: "ttw:text-sm ttw:text-muted-foreground",
+											children: Q.amountPeriodLabel
+										})]
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "ttw:flex ttw:items-center ttw:gap-2",
+									children: [/* @__PURE__ */ A(i, {
+										variant: "outline",
+										className: "ttw:gap-1 ttw:border-violet-200 ttw:bg-violet-50 ttw:text-violet-700",
+										children: [/* @__PURE__ */ k(P, { className: "ttw:size-3" }), q.recurringBadge]
+									}), /* @__PURE__ */ k(ae, {
+										label: Q.statusLabel,
+										tone: Q.statusTone,
+										icon: Q.statusIcon
+									})]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "ttw:flex ttw:gap-12 ttw:text-sm",
+									children: [/* @__PURE__ */ A("div", {
+										className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+										children: [/* @__PURE__ */ k("span", {
+											className: "ttw:text-xs ttw:text-muted-foreground",
+											children: q.startsOnCaption
+										}), /* @__PURE__ */ k("span", {
+											className: "ttw:text-foreground",
+											children: Q.startsOnLabel
+										})]
+									}), /* @__PURE__ */ A("div", {
+										className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+										children: [/* @__PURE__ */ k("span", {
+											className: "ttw:text-xs ttw:text-muted-foreground",
+											children: q.endsOnCaption
+										}), /* @__PURE__ */ k("span", {
+											className: "ttw:text-foreground",
+											children: Q.endsOnLabel
+										})]
+									})]
+								}),
+								$
+							]
+						}) : /* @__PURE__ */ A("div", {
+							className: m("ttw:flex ttw:flex-col ttw:gap-3 ttw:rounded-lg ttw:bg-muted ttw:p-4", oe && "ttw:border ttw:border-red-200"),
+							children: [
+								/* @__PURE__ */ k("div", {
+									className: "ttw:flex ttw:flex-row ttw:flex-wrap ttw:gap-x-12 ttw:gap-y-2",
+									children: J.amountRows.map((e) => /* @__PURE__ */ k(w, {
+										row: e,
+										defaultTone: J.amountTone
+									}, e.label))
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "ttw:flex ttw:items-center ttw:gap-2",
+									children: [J.overdueLabel ? /* @__PURE__ */ A("span", {
+										className: "ttw:inline-flex ttw:items-center ttw:gap-1 ttw:rounded-full ttw:bg-red-100 ttw:px-2.5 ttw:py-0.5 ttw:text-xs ttw:font-medium ttw:text-red-700",
+										children: [/* @__PURE__ */ k(M, { className: "ttw:size-3" }), J.overdueLabel]
+									}) : /* @__PURE__ */ k(_, {
+										label: J.statusLabel,
+										tone: L.statusTone,
+										icon: Z ? /* @__PURE__ */ k(Z, { className: "ttw:size-3" }) : void 0
+									}), J.recurring ? /* @__PURE__ */ A(i, {
+										variant: "outline",
+										className: "ttw:gap-1 ttw:border-violet-200 ttw:bg-violet-50 ttw:text-violet-700",
+										children: [/* @__PURE__ */ k(P, { className: "ttw:size-3" }), q.recurringBadge]
+									}) : null]
+								}),
+								/* @__PURE__ */ A("div", {
+									className: "ttw:flex ttw:gap-12 ttw:text-sm",
+									children: [/* @__PURE__ */ A("div", {
+										className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+										children: [/* @__PURE__ */ k("span", {
+											className: "ttw:text-xs ttw:text-muted-foreground",
+											children: q.invoiceDateCaption
+										}), /* @__PURE__ */ k("span", {
+											className: "ttw:text-foreground",
+											children: J.issueDateLabel
+										})]
+									}), /* @__PURE__ */ A("div", {
+										className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+										children: [/* @__PURE__ */ k("span", {
+											className: "ttw:text-xs ttw:text-muted-foreground",
+											children: J.dueDateCaption
+										}), /* @__PURE__ */ k("span", {
+											className: "ttw:text-foreground",
+											children: J.dueDateLabel
+										})]
+									})]
+								}),
+								$
+							]
+						})
+					}), /* @__PURE__ */ A("div", {
+						className: "ttw:px-6",
+						children: [
+							J.paymentHistory ? /* @__PURE__ */ A("section", {
+								"aria-label": q.paymentHistoryHeading,
+								className: "ttw:border-b ttw:py-4",
+								children: [/* @__PURE__ */ k("h3", {
+									className: "ttw:mb-3 ttw:text-sm ttw:font-medium",
+									children: q.paymentHistoryHeading
+								}), J.paymentHistory.isLoading ? /* @__PURE__ */ k("div", {
+									className: "ttw:flex ttw:py-2",
+									children: /* @__PURE__ */ k(te, {
+										className: "ttw:size-5",
+										"aria-label": q.paymentHistoryLoading
 									})
-								]
-							}),
-							he,
-							ge,
-							/* @__PURE__ */ A("div", {
-								className: "ttw:flex ttw:flex-col ttw:gap-2.5 ttw:rounded-xl ttw:border ttw:border-border ttw:p-6",
+								}) : J.paymentHistory.rows.length === 0 ? /* @__PURE__ */ k("p", {
+									className: m("ttw:text-sm", J.paymentHistory.emptyTone === "danger" ? "ttw:text-red-600" : "ttw:text-muted-foreground"),
+									children: q.paymentHistoryEmpty
+								}) : /* @__PURE__ */ A("div", {
+									className: "ttw:flex ttw:flex-col",
+									children: [J.paymentHistory.rows.map((e) => /* @__PURE__ */ A("div", {
+										className: "ttw:flex ttw:justify-between ttw:border-b ttw:border-border ttw:py-2 ttw:text-sm",
+										children: [/* @__PURE__ */ k("span", { children: e.dateLabel }), /* @__PURE__ */ k("span", { children: e.amountLabel })]
+									}, e.id)), /* @__PURE__ */ A("div", {
+										className: "ttw:flex ttw:justify-between ttw:py-2 ttw:text-sm ttw:font-medium",
+										children: [/* @__PURE__ */ k("span", { children: q.paymentHistoryTotalLabel }), /* @__PURE__ */ k("span", { children: J.paymentHistory.totalLabel })]
+									})]
+								})]
+							}) : null,
+							J.customerContact.length > 0 ? /* @__PURE__ */ A("section", {
+								"aria-label": q.customerDetailsHeading,
+								className: "ttw:border-b ttw:py-4",
+								children: [/* @__PURE__ */ k("h3", {
+									className: "ttw:mb-3 ttw:text-sm ttw:font-medium",
+									children: q.customerDetailsHeading
+								}), /* @__PURE__ */ k("div", {
+									className: "ttw:flex ttw:flex-col",
+									children: J.customerContact.map((e) => /* @__PURE__ */ k(E, { ...e }, e.label))
+								})]
+							}) : null,
+							/* @__PURE__ */ A(e, {
+								type: "multiple",
+								value: U,
+								onValueChange: W,
+								className: "ttw:w-full",
 								children: [
-									/* @__PURE__ */ A("div", {
-										className: "ttw:flex ttw:flex-col ttw:gap-2.5 ttw:pb-4",
-										children: [/* @__PURE__ */ k(E, {
-											variant: "h4",
-											children: Z.lineItemsHeading
-										}), /* @__PURE__ */ k(E, {
-											variant: "body2",
-											color: "muted",
-											className: "ttw:font-medium",
-											children: Z.lineItemsDescription
-										})]
-									}),
-									F?.lineItemsSummary?.length ? /* @__PURE__ */ k(e, {
-										variant: "destructive",
-										className: "ttw:mb-2",
-										children: /* @__PURE__ */ k(t, { children: /* @__PURE__ */ k("ul", { children: F.lineItemsSummary.map((e) => /* @__PURE__ */ k("li", { children: e }, e)) }) })
-									}) : null,
-									/* @__PURE__ */ A("ul", {
-										className: "ttw:flex ttw:flex-col ttw:gap-2.5",
-										children: [/* @__PURE__ */ A("li", {
-											"aria-hidden": !0,
-											className: "ttw:flex ttw:h-5 ttw:items-center ttw:gap-2.5 ttw:text-sm ttw:leading-5 ttw:font-medium",
-											children: [
-												/* @__PURE__ */ k("span", {
-													className: "ttw:inline-flex ttw:min-w-30 ttw:flex-1 ttw:whitespace-nowrap",
-													children: Z.productLabel
-												}),
-												/* @__PURE__ */ k("span", {
-													className: "ttw:w-24 ttw:min-w-24",
-													children: Z.quantityLabel
-												}),
-												/* @__PURE__ */ k("span", {
-													className: "ttw:w-20.5 ttw:min-w-20.5",
-													children: Z.unitLabel
-												}),
-												/* @__PURE__ */ k("span", {
-													className: "ttw:w-full ttw:max-w-41 ttw:min-w-29",
-													children: Z.priceLabel
-												}),
-												/* @__PURE__ */ k("span", {
-													className: "ttw:w-12 ttw:min-w-12",
-													children: Z.taxableLabel
-												}),
-												P.lineItems.length > 1 && /* @__PURE__ */ k("span", { className: "ttw:w-10 ttw:min-w-10" })
-											]
-										}), H ? /* @__PURE__ */ k("li", {
-											className: "ttw:flex ttw:h-9 ttw:items-center ttw:justify-center",
-											children: /* @__PURE__ */ k(te, { className: "ttw:size-5" })
-										}) : P.lineItems.map((e) => /* @__PURE__ */ k(L, {
-											formId: Q,
-											lineItem: e,
-											errors: F?.lineItems?.[e.id],
-											controls: B?.[e.id],
-											focusOnMount: e.id === V,
-											canRemove: P.lineItems.length > 1,
-											unitOptions: oe,
-											currencySymbol: z,
-											labels: Z,
-											renderProductSelector: G,
-											onChange: (t) => q(e.id, t),
-											onCommit: (t) => se(e.id, t),
-											onQuantityStep: (t) => ce(e.id, t),
-											onManageUnits: fe,
-											onRemove: () => me(e.id)
-										}, e.id))]
-									}),
 									/* @__PURE__ */ A(n, {
-										type: "button",
-										variant: "ghost",
-										className: "ttw:w-fit ttw:text-primary ttw:hover:text-primary",
-										onClick: pe,
-										children: [/* @__PURE__ */ k(M, { className: "ttw:size-5 ttw:text-primary" }), Z.addLineItemButton]
-									}),
-									/* @__PURE__ */ k(ae, {
-										inputId: `${Q}-discount`,
-										discountType: P.discountType,
-										value: P.discount,
-										error: F?.discount,
-										currencySymbol: z,
-										disabled: U,
-										labels: Z,
-										onChange: (e) => K({ discount: e }),
-										onTypeChange: (e) => K({ discountType: e }),
-										onFocus: le,
-										onBlur: ue
-									}),
-									/* @__PURE__ */ A(i, {
-										className: "ttw:flex-col",
-										children: [/* @__PURE__ */ A(a, {
-											className: "ttw:flex-row ttw:justify-end",
-											children: [/* @__PURE__ */ k(s, {
-												htmlFor: `${Q}-tax-rate`,
-												className: D(F?.taxRate && "ttw:text-destructive"),
-												children: Z.taxRateLabel
-											}), /* @__PURE__ */ A(l, {
-												className: "ttw:w-40 ttw:has-[>[data-align=inline-end]]:[&>input]:pr-0",
-												children: [/* @__PURE__ */ k(d, {
-													id: `${Q}-tax-rate`,
-													className: "ttw:text-right",
-													placeholder: Z.taxRatePlaceholder,
-													type: "text",
-													inputMode: "decimal",
-													"aria-invalid": !!F?.taxRate || void 0,
-													"aria-describedby": F?.taxRate ? `${Q}-tax-rate-error` : void 0,
-													value: P.taxRate,
-													onChange: (e) => K({ taxRate: e.target.value }),
-													onBlur: J
-												}), /* @__PURE__ */ k(u, {
-													align: "inline-end",
-													children: Z.taxRateSuffix
+										value: v.billing,
+										children: [/* @__PURE__ */ k(r, { children: q.billingHeading }), /* @__PURE__ */ k(t, { children: /* @__PURE__ */ A("div", {
+											className: "ttw:flex ttw:flex-col",
+											children: [J.billingItems.map((e) => /* @__PURE__ */ k(E, { ...e }, e.label)), J.seriesLink ? /* @__PURE__ */ A("div", {
+												className: "ttw:flex ttw:gap-4 ttw:border-b ttw:border-border ttw:py-3 ttw:text-sm ttw:last:border-b-0",
+												children: [/* @__PURE__ */ k("span", {
+													className: "ttw:w-40 ttw:shrink-0 ttw:text-muted-foreground",
+													children: q.recurringSeriesRowLabel
+												}), /* @__PURE__ */ k("button", {
+													type: "button",
+													onClick: J.seriesLink.onOpen,
+													className: "ttw:text-left ttw:text-primary ttw:hover:underline",
+													children: J.seriesLink.title
 												})]
+											}) : null]
+										}) })]
+									}),
+									J.lineItemsSection ? /* @__PURE__ */ A(n, {
+										value: v.lineItems,
+										children: [/* @__PURE__ */ k(r, { children: /* @__PURE__ */ A("span", {
+											className: "ttw:flex ttw:items-center ttw:gap-2",
+											children: [q.lineItemsHeading, /* @__PURE__ */ k(i, {
+												variant: "secondary",
+												className: "ttw:rounded-full",
+												children: J.lineItemsSection.countLabel
 											})]
-										}), F?.taxRate && /* @__PURE__ */ k(o, {
-											id: `${Q}-tax-rate-error`,
-											className: "ttw:text-right",
-											children: F.taxRate
-										})]
+										}) }), /* @__PURE__ */ k(t, { children: /* @__PURE__ */ A("div", {
+											className: "ttw:flex ttw:flex-col ttw:text-sm",
+											children: [L.lineItems.length === 0 ? /* @__PURE__ */ k("p", {
+												className: "ttw:py-3 ttw:text-muted-foreground",
+												children: q.noLineItems
+											}) : L.lineItems.map((e) => /* @__PURE__ */ A("div", {
+												className: "ttw:flex ttw:items-start ttw:justify-between ttw:border-b ttw:border-border ttw:py-3",
+												children: [/* @__PURE__ */ A("div", {
+													className: "ttw:flex ttw:flex-col",
+													children: [/* @__PURE__ */ k("span", {
+														className: "ttw:font-medium",
+														children: e.name
+													}), /* @__PURE__ */ A("span", {
+														className: "ttw:text-muted-foreground",
+														children: [
+															e.quantityLabel,
+															" ",
+															q.lineItemMultiplier,
+															" ",
+															e.unitPriceLabel,
+															" ",
+															q.lineItemEaLabel
+														]
+													})]
+												}), /* @__PURE__ */ k("span", { children: e.totalLabel })]
+											}, e.id)), J.lineItemsSection.totals.length > 0 ? /* @__PURE__ */ k("div", {
+												className: "ttw:flex ttw:flex-col ttw:gap-1 ttw:py-3",
+												children: J.lineItemsSection.totals.map((e) => /* @__PURE__ */ A("div", {
+													className: m("ttw:flex ttw:justify-between", e.emphasis && "ttw:font-medium"),
+													children: [/* @__PURE__ */ k("span", { children: e.label }), /* @__PURE__ */ k("span", { children: e.value })]
+												}, e.label))
+											}) : null]
+										}) })]
+									}) : null,
+									J.notes ? /* @__PURE__ */ A(n, {
+										value: v.notes,
+										children: [/* @__PURE__ */ k(r, { children: /* @__PURE__ */ A("span", {
+											className: "ttw:flex ttw:items-center ttw:gap-2",
+											children: [q.notesHeading, /* @__PURE__ */ k(i, {
+												variant: "secondary",
+												className: "ttw:rounded-full",
+												children: J.notes.countLabel
+											})]
+										}) }), /* @__PURE__ */ k(t, { children: /* @__PURE__ */ A("div", {
+											className: "ttw:flex ttw:flex-col ttw:gap-3 ttw:text-sm",
+											children: [J.notes.opening ? /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
+												className: "ttw:mb-1 ttw:font-medium",
+												children: q.notesOpeningLabel
+											}), /* @__PURE__ */ k("p", {
+												className: "ttw:text-muted-foreground",
+												children: J.notes.opening
+											})] }) : null, J.notes.closing ? /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
+												className: "ttw:mb-1 ttw:font-medium",
+												children: q.notesClosingLabel
+											}), /* @__PURE__ */ k("p", {
+												className: "ttw:text-muted-foreground",
+												children: J.notes.closing
+											})] }) : null]
+										}) })]
+									}) : null,
+									/* @__PURE__ */ k(ne, {
+										attachments: J.attachments,
+										labels: q
 									}),
-									/* @__PURE__ */ k(b, {}),
 									/* @__PURE__ */ k(re, {
-										totals: de,
-										labels: Z
+										auditHistory: J.auditHistory,
+										labels: q
 									})
 								]
 							}),
-							_e,
-							/* @__PURE__ */ k(O, {
-								idPrefix: Q,
-								openingNote: P.openingNote,
-								closingNote: P.closingNote,
-								openingNoteError: F?.openingNote,
-								closingNoteError: F?.closingNote,
-								disabled: U,
-								onOpeningNoteChange: (e) => K({ openingNote: e }),
-								onClosingNoteChange: (e) => K({ closingNote: e }),
-								labels: Z
-							}),
-							ve
+							Q ? /* @__PURE__ */ A("section", {
+								"aria-label": Q.scheduleTitle,
+								className: "ttw:border-t ttw:border-border ttw:py-4",
+								children: [/* @__PURE__ */ k("h3", {
+									className: "ttw:mb-3 ttw:text-sm ttw:font-medium",
+									children: Q.scheduleTitle
+								}), /* @__PURE__ */ k(D, {
+									rows: Q.schedule,
+									labels: q
+								})]
+							}) : null
 						]
 					})]
-				}),
-				/* @__PURE__ */ k(w, { children: /* @__PURE__ */ A("div", {
-					className: "ttw:flex ttw:justify-end ttw:gap-2",
-					children: [
-						/* @__PURE__ */ k(n, {
-							type: "button",
-							variant: "ghost",
-							disabled: ye,
-							onClick: De,
-							children: Z.cancelButton
-						}),
-						X && /* @__PURE__ */ k(n, {
-							type: "submit",
-							form: Q,
-							variant: "secondary",
-							disabled: be,
-							onClick: Te,
-							children: X
-						}),
-						/* @__PURE__ */ k(n, {
-							type: "submit",
-							form: Q,
-							disabled: Se,
-							onClick: Ee,
-							children: xe
-						})
-					]
-				}) })
-			]
+				})
+			] })]
 		})
 	});
 }
 //#endregion
-export { R as ReceivableFormSheet, R as default };
+export { F as ReceivableDetailsPanel, F as default };