@tesouro/embedded-components-react 0.2.324 → 0.2.326

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index441.js

@@ -1,217 +1,40 @@
-import { useMoniteContext as e } from "./index47.js";
-import { useCurrencies as t } from "./index63.js";
-import { MoniteScopedProviders as n } from "./index209.js";
-import { Skeleton as r } from "./index54.js";
-import { useInvoicesFilter as i } from "./index140.js";
-import { useGetReceivables as a } from "./index156.js";
-import { isSortableColumn as o } from "./index227.js";
-import "./index228.js";
-import { InvoiceStatusChip as s } from "./index229.js";
-import { GetNoRowsOverlay as c } from "./index237.js";
-import { DataTable as l, SortableHeader as u } from "./index242.js";
-import { DueDateCell as d } from "./index427.js";
-import "./index428.js";
-import { InvoicesCounterpartCell as f } from "./index436.js";
-import { InvoiceRecurrenceStatusChip as p } from "./index438.js";
-import { InvoicesFilterBar as m } from "./index439.js";
-import { InvoiceStatusCardsFilter as h } from "./index440.js";
-import { useEffect as g, useState as _ } from "react";
-import { Fragment as v, jsx as y, jsxs as b } from "@emotion/react/jsx-runtime";
-import { useLingui as x } from "@lingui/react";
-import S from "@mui/icons-material/Sync";
+import { cn as e } from "./index49.js";
+import { Badge as t } from "./index195.js";
+import { getCommonRecurrenceStatusLabel as n } from "./index210.js";
+import { RECURRENCE_STATUS_ICON as r } from "./index217.js";
+import "./index232.js";
+import { jsx as i, jsxs as a } from "@emotion/react/jsx-runtime";
+import { useLingui as o } from "@lingui/react";
+import { cva as s } from "class-variance-authority";
 //#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index441.js
-var C = (e) => /* @__PURE__ */ y(n, { children: /* @__PURE__ */ y(w, { ...e }) }), w = ({ initialCounterpartId: n, onRowClick: r, setIsCreateInvoiceDialogOpen: p, query: C }) => {
-	let { locale: w, componentSettings: E } = e(), { i18n: D } = x(), [O, k] = _(void 0), [A, j] = _(E.receivables.pageSizeOptions?.[0] ?? 10), [M, N] = _({
-		field: C?.sort ?? "due_date",
-		sort: C?.order ?? "desc"
-	}), { formatCurrencyToDisplay: P } = t(), F = i({ initialCounterpartId: n }), [I, L] = _("");
-	g(() => {
-		let e = setTimeout(() => L(F.state.search), 300);
-		return () => clearTimeout(e);
-	}, [F.state.search]), g(() => {
-		k(void 0);
-	}, [F.queryParams]);
-	let { data: R, isLoading: z, isError: B, refetch: V } = a({
-		sort: M?.field,
-		order: M?.sort,
-		limit: A,
-		pagination_token: O,
-		type: "invoice",
-		...F.queryParams,
-		search_text: I || F.queryParams.search_text || void 0
-	}), H = M ? [{
-		id: M.field,
-		desc: M.sort === "desc"
-	}] : [], U = (e) => {
-		let t = typeof e == "function" ? e(H) : e;
-		t.length > 0 && o(t[0].id) ? N({
-			field: t[0].id,
-			sort: t[0].desc ? "desc" : "asc"
-		}) : N({
-			field: C?.sort ?? "due_date",
-			sort: C?.order ?? "desc"
-		}), k(void 0);
-	}, W = [
-		{
-			accessorKey: "due_date",
-			header: ({ column: e }) => /* @__PURE__ */ y(u, {
-				column: e,
-				title: D._("Due date"),
-				ariaLabel: D._("Sort by due date")
-			}),
-			cell: ({ row: e }) => /* @__PURE__ */ y(d, { data: e.original })
-		},
-		{
-			accessorKey: "status",
-			header: ({ column: e }) => /* @__PURE__ */ y(u, {
-				column: e,
-				title: D._("Status"),
-				ariaLabel: D._("Sort by status")
-			}),
-			cell: ({ row: e }) => {
-				if (e.original.type === "invoice" && e.original.status !== "recurring") return /* @__PURE__ */ y(s, {
-					status: e.original.status,
-					dotSize: "small"
-				});
-				if (e.original.type === "invoice" && e.original.status === "recurring") return /* @__PURE__ */ y(T, { recurrenceId: e.original.recurrence_id ?? "" });
-			}
-		},
-		{
-			accessorKey: "document_id",
-			header: ({ column: e }) => /* @__PURE__ */ y(u, {
-				column: e,
-				title: D._("Number"),
-				ariaLabel: D._("Sort by number")
-			}),
-			cell: ({ row: e }) => {
-				let t = e.original.document_id;
-				return e.original.status === "recurring" ? /* @__PURE__ */ b("div", {
-					className: "ttw:flex ttw:items-center ttw:gap-1 ttw:text-inherit",
-					children: [/* @__PURE__ */ y(S, {
-						sx: { fontSize: "inherit" },
-						color: "inherit"
-					}), t || D._("Recurring")]
-				}) : t || D._("INV-auto");
-			}
-		},
-		{
-			accessorKey: "counterpart_name",
-			header: D._("Customer"),
-			cell: ({ row: e }) => /* @__PURE__ */ y(f, {
-				counterpartName: e.original.counterpart_name,
-				counterpartId: e.original.counterpart_id
-			})
-		},
-		{
-			accessorKey: "issue_date",
-			header: ({ column: e }) => /* @__PURE__ */ y(u, {
-				column: e,
-				title: D._("Issue date"),
-				ariaLabel: D._("Sort by issue date")
-			}),
-			cell: ({ row: e }) => {
-				let t = e.original.issue_date;
-				return t ? D.date(t, w.dateFormat) : "—";
-			}
-		},
-		{
-			accessorKey: "total_amount",
-			header: ({ column: e }) => /* @__PURE__ */ y("div", {
-				className: "ttw:flex ttw:justify-end",
-				children: /* @__PURE__ */ y(u, {
-					column: e,
-					title: D._("Amount"),
-					ariaLabel: D._("Sort by amount")
-				})
-			}),
-			cell: ({ row: e }) => {
-				let t = e.original.total_amount;
-				return /* @__PURE__ */ y("div", {
-					className: "ttw:text-right",
-					children: t ? P(t, e.original.currency) : ""
-				});
-			}
-		}
-	], G = F.activeFilterCount > 0, K = !!I;
-	return /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(h, {
-		selectedStatus: F.state.status.length === 0 ? null : F.state.status[0],
-		onChangeFilter: (e) => F.setState((t) => ({
-			...t,
-			status: e ? [e] : []
-		}))
-	}), /* @__PURE__ */ y(l, {
-		columns: W,
-		data: R?.data ?? [],
-		sorting: H,
-		onSortingChange: U,
-		pageSize: A,
-		onPageSizeChange: j,
-		nextPaginationToken: R?.next_pagination_token ?? void 0,
-		prevPaginationToken: R?.prev_pagination_token ?? void 0,
-		onPaginationTokenChange: k,
-		onRowClick: (e) => r?.(e.id),
-		rowLabel: D._("invoices"),
-		filterComponent: /* @__PURE__ */ y(m, {
-			searchValue: F.state.search,
-			onSearchChange: (e) => F.setState((t) => ({
-				...t,
-				search: e
-			})),
-			activeFilterCount: F.activeFilterCount,
-			activeChips: F.activeChips,
-			onDismissChip: F.clearFilter,
-			onClearAll: F.clearAll,
-			activeDateFields: F.state.activeDateFields,
-			onDateFieldRangeChange: (e, { from: t, to: n }) => F.setDateFieldRange(e, t, n),
-			onDateFieldPresetChange: F.setDateFieldPreset,
-			allPresets: F.datePresets,
-			statusOptions: F.statusOptions,
-			selectedStatus: F.state.status,
-			onStatusChange: (e) => F.setState((t) => ({
-				...t,
-				status: e
-			})),
-			amountMode: F.state.amountMode,
-			onAmountModeChange: (e) => F.setState((t) => ({
-				...t,
-				amountMode: e
-			})),
-			amountMin: F.state.amountMin,
-			amountMax: F.state.amountMax,
-			onAmountMinChange: (e) => F.setState((t) => ({
-				...t,
-				amountMin: e
-			})),
-			onAmountMaxChange: (e) => F.setState((t) => ({
-				...t,
-				amountMax: e
-			})),
-			customerName: F.state.customerName,
-			onCustomerNameChange: (e) => F.setState((t) => ({
-				...t,
-				customerName: e
-			}))
-		}),
-		children: /* @__PURE__ */ y(c, {
-			isLoading: z,
-			dataLength: R?.data.length || 0,
-			isFiltering: G,
-			isSearching: K,
-			isError: B,
-			onCreate: () => p?.(!0),
-			refetch: V,
-			entityName: D._("Invoices"),
-			actionButtonLabel: D._("Create Invoice"),
-			actionOptions: [D._("Invoice")],
-			type: "no-data"
-		})
-	})] });
-}, T = ({ recurrenceId: t }) => {
-	let { api: n } = e(), { data: i, isLoading: a } = n.finops.getRecurrencesId.useQuery({ path: { recurrence_id: t } });
-	return a ? /* @__PURE__ */ y(r, { className: "ttw:w-full ttw:inline-block" }) : i?.status ? /* @__PURE__ */ y(p, {
-		status: i.status,
-		dotSize: "small"
-	}) : null;
+var c = s("", { variants: {
+	variant: {
+		active: "ttw:bg-indigo-100 ttw:text-indigo-700",
+		paused: "ttw:bg-yellow-100 ttw:text-yellow-700",
+		canceled: "ttw:bg-red-100 ttw:text-red-700",
+		completed: "ttw:bg-green-100 ttw:text-green-700"
+	},
+	dotVariant: {
+		active: "ttw:border-indigo-100 ttw:bg-indigo-700",
+		paused: "ttw:border-yellow-100 ttw:bg-yellow-700",
+		canceled: "ttw:border-red-100 ttw:bg-red-700",
+		completed: "ttw:border-green-100 ttw:bg-green-700"
+	}
+} }), l = ({ status: s, className: l, showBadgeBackground: u = !0, showIcon: d = !1, dotSize: f, ref: p }) => {
+	let { i18n: m } = o(), h = r[s];
+	return /* @__PURE__ */ a(t, {
+		ref: p,
+		className: e("ttw:inline-flex ttw:items-center ttw:gap-1", c({ variant: s }), l),
+		dotClassName: c({ dotVariant: s }),
+		showBadgeBackground: u,
+		showDotBorder: !u,
+		dotSize: f,
+		showDot: !1,
+		children: [d && /* @__PURE__ */ i(h, {
+			className: "ttw:size-3",
+			"aria-hidden": !0
+		}), n(m, s)]
+	});
 };
 //#endregion
-export { C as InvoicesTable };
+export { l as InvoiceRecurrenceStatusChip };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index442.js

@@ -1,42 +1,156 @@
-import { useDebounceCallback as e } from "./index185.js";
-import { jsx as t, jsxs as n } from "@emotion/react/jsx-runtime";
-import { FormControl as r, Input as i, InputAdornment as a, InputLabel as o } from "@mui/material";
-import s from "@mui/icons-material/Search";
+import { AmountFilter as e, DateRangePicker as t, FilterBar as n, FilterMenuButton as r, FilterTag as i, Input as a, MultiSelectFilter as o, Popover as s, PopoverContent as c, PopoverTrigger as l, SearchInput as u, useFilterPanel as d } from "../../../../packages/shared-ui-shadcn/dist/index.js";
+import { ListFilter as f } from "lucide-react";
+import { Fragment as p, jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
+import { useLingui as g } from "@lingui/react";
 //#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index442.js
-var c = ({ label: c, value: l, placeholder: u, onChange: d }) => {
-	let f = e((e) => d(e), 500);
-	return /* @__PURE__ */ n(r, {
-		"aria-label": "search-by-name",
-		className: "Monite-SearchField Monite-FilterControl",
-		children: [c && /* @__PURE__ */ t(o, {
-			htmlFor: "search-by-name",
-			shrink: !0,
-			children: c
-		}), /* @__PURE__ */ t(i, {
-			id: "search-by-name",
-			name: "search-by-name",
-			"aria-label": "search-by-name",
-			placeholder: u,
-			value: l,
-			onChange: (e) => {
-				f(e.target.value || null);
-			},
-			startAdornment: /* @__PURE__ */ t(a, {
-				position: "end",
-				children: /* @__PURE__ */ t(s, { fontSize: "medium" })
-			}),
-			sx: {
-				"&::placeholder": {
-					opacity: 1,
-					color: "text.primary"
-				},
-				"& input::placeholder": {
-					opacity: 1,
-					color: "text.primary"
-				}
-			}
-		})]
-	});
+var _ = {
+	due_date: "Due date",
+	created_at: "Created on",
+	issue_date: "Issue date"
+}, v = [
+	{
+		id: "date_due_date",
+		label: "Due date",
+		field: "due_date"
+	},
+	{
+		id: "date_created_at",
+		label: "Created on",
+		field: "created_at"
+	},
+	{
+		id: "date_issue_date",
+		label: "Issue date",
+		field: "issue_date"
+	},
+	{
+		id: "status",
+		label: "Status",
+		field: void 0
+	},
+	{
+		id: "amount",
+		label: "Amount",
+		field: void 0
+	},
+	{
+		id: "customer",
+		label: "Customer",
+		field: void 0
+	}
+], y = {
+	date_due_date: "ttw:w-auto",
+	date_created_at: "ttw:w-auto",
+	date_issue_date: "ttw:w-auto",
+	status: "ttw:w-56",
+	amount: "ttw:w-64",
+	customer: "ttw:w-64"
 };
+function b(b) {
+	let { i18n: x } = g(), S = d(), C = S.isMenuOpen || !!S.activePanelId, w = S.activePanelId && y[S.activePanelId] || "ttw:w-52", T = b.allPresets.map((e) => ({
+		value: e.value,
+		label: e.label,
+		group: e.group
+	})), E = (e) => {
+		e || (S.closeMenu(), S.closePanel());
+	}, D = (e) => {
+		S.openPanel(e);
+	};
+	return /* @__PURE__ */ m(n, {
+		className: "ttw:pl-4",
+		searchSlot: /* @__PURE__ */ m(u, {
+			value: b.searchValue,
+			onChange: (e) => b.onSearchChange(e.target.value),
+			placeholder: "Search by number or customer...",
+			className: "ttw:min-w-64"
+		}),
+		menuSlot: /* @__PURE__ */ h(s, {
+			open: C,
+			onOpenChange: E,
+			children: [/* @__PURE__ */ m(l, {
+				asChild: !0,
+				children: /* @__PURE__ */ m(r, {
+					activeCount: b.activeFilterCount,
+					onClick: S.toggleMenu
+				})
+			}), /* @__PURE__ */ h(c, {
+				align: "start",
+				className: `ttw:p-0 ${w}`,
+				children: [
+					S.isMenuOpen && /* @__PURE__ */ m("div", {
+						className: "ttw:p-1",
+						children: v.map((e) => /* @__PURE__ */ h("button", {
+							type: "button",
+							className: "ttw:flex ttw:items-center ttw:gap-2 ttw:w-full ttw:px-2 ttw:py-1.5 ttw:rounded-md ttw:text-xs ttw:font-medium ttw:hover:bg-accent ttw:transition-colors ttw:cursor-pointer",
+							onClick: () => D(e.id),
+							children: [/* @__PURE__ */ m(f, { className: "ttw:size-4 ttw:text-muted-foreground ttw:shrink-0" }), e.label]
+						}, e.id))
+					}),
+					v.filter((e) => e.field !== void 0).map((e) => S.activePanelId === e.id && e.field && /* @__PURE__ */ m(t, {
+						from: b.activeDateFields[e.field]?.from,
+						to: b.activeDateFields[e.field]?.to,
+						onRangeChange: (t) => b.onDateFieldRangeChange(e.field, t),
+						selectedPreset: b.activeDateFields[e.field]?.preset,
+						onPresetChange: (t) => b.onDateFieldPresetChange(e.field, t),
+						presets: T,
+						labels: { fieldLabel: _[e.field] }
+					}, e.id)),
+					S.activePanelId === "status" && /* @__PURE__ */ m(o, {
+						options: b.statusOptions,
+						selectedValues: b.selectedStatus,
+						onSelectionChange: b.onStatusChange
+					}),
+					S.activePanelId === "amount" && /* @__PURE__ */ m(e, {
+						mode: b.amountMode,
+						onModeChange: b.onAmountModeChange,
+						min: b.amountMin,
+						max: b.amountMax,
+						onMinChange: b.onAmountMinChange,
+						onMaxChange: b.onAmountMaxChange,
+						showFlowDirection: !1,
+						labels: {
+							min: "No less than",
+							max: "No more than"
+						}
+					}),
+					S.activePanelId === "customer" && /* @__PURE__ */ h("div", {
+						className: "ttw:p-3 ttw:flex ttw:flex-col ttw:gap-2",
+						children: [
+							/* @__PURE__ */ m("p", {
+								className: "ttw:text-xs ttw:font-medium ttw:text-muted-foreground",
+								children: "Customer name"
+							}),
+							/* @__PURE__ */ m(a, {
+								type: "text",
+								value: b.customerName,
+								onChange: (e) => b.onCustomerNameChange(e.target.value),
+								placeholder: "Search customers...",
+								className: "ttw:h-8 ttw:text-xs"
+							}),
+							/* @__PURE__ */ m("p", {
+								className: "ttw:text-xs ttw:text-muted-foreground",
+								children: x._("Matches names containing your search")
+							})
+						]
+					})
+				]
+			})]
+		}),
+		activeChipsSlot: /* @__PURE__ */ h(p, { children: [b.activeChips.map((e) => /* @__PURE__ */ m(i, {
+			label: e.label,
+			count: e.count,
+			variant: "default",
+			onLabelClick: e.key === "date" ? () => {
+				S.openPanel("date");
+			} : void 0,
+			onDismiss: () => b.onDismissChip(e.key)
+		}, e.key)), b.activeFilterCount > 0 && /* @__PURE__ */ m("button", {
+			type: "button",
+			className: "ttw:text-xs ttw:text-muted-foreground ttw:hover:text-foreground ttw:transition-colors ttw:cursor-pointer ttw:whitespace-nowrap",
+			onClick: b.onClearAll,
+			children: "Clear all"
+		})] })
+	});
+}
 //#endregion
-export { c as SearchField };
+export { b as InvoicesFilterBar };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index443.js

@@ -1 +1,71 @@
-import "./index442.js";
+import { useCurrencies as e } from "./index63.js";
+import { Skeleton as t } from "./index54.js";
+import { useGetReceivablesAnalytics as n } from "./index170.js";
+import { InvoiceStatusChip as r } from "./index233.js";
+import { StatusCard as i } from "./index423.js";
+import { useMemo as a } from "react";
+import { jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
+import { useLingui as c } from "@lingui/react";
+//#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index443.js
+var l = [
+	"draft",
+	"issued",
+	"overdue",
+	"partially_paid",
+	"paid",
+	"recurring",
+	"canceled",
+	"uncollectible"
+], u = ({ selectedStatus: u, onChangeFilter: d }) => {
+	let { i18n: f } = c(), { formatCurrencyToDisplay: p } = e(), { data: m, isLoading: h } = n({
+		dimension: "status",
+		metric: "id",
+		aggregation_function: "count",
+		type: "invoice"
+	}), { data: g, isLoading: _ } = n({
+		dimension: "status",
+		metric: "total_amount",
+		aggregation_function: "summary",
+		type: "invoice"
+	}), v = a(() => m?.data?.reduce((e, t) => {
+		let n = t.dimension_value, r = t.metric_value;
+		return n && (e.statuses.push({
+			status: n,
+			count: r
+		}), n !== "recurring" && (e.totalCount += r)), e;
+	}, {
+		statuses: [],
+		totalCount: 0
+	}), [m]) ?? {
+		statuses: [],
+		totalCount: 0
+	}, y = a(() => new Map(g?.data?.map((e) => [e.dimension_value, e.metric_value]) ?? []), [g]);
+	if (h || _) return /* @__PURE__ */ o("div", {
+		className: "ttw:flex ttw:gap-2",
+		children: Array.from({ length: 6 }).map((e, n) => /* @__PURE__ */ o(t, { className: "ttw:h-16.5 ttw:w-42 ttw:rounded-xl ttw:animate-pulse" }, n))
+	});
+	let b = (e) => {
+		d(e === "all" ? void 0 : e);
+	}, x = (e) => p(e, "USD") ?? "—";
+	return /* @__PURE__ */ s("div", {
+		className: "ttw:flex ttw:gap-2 ttw:mb-6 ttw:overflow-x-auto ttw:[scrollbar-width:none] ttw:[&::-webkit-scrollbar]:hidden",
+		children: [/* @__PURE__ */ o(i, {
+			isAllStatus: !0,
+			data: v.totalCount,
+			selected: u === null,
+			onClick: () => b("all"),
+			formatAmount: x,
+			allItemsText: f._("All invoices")
+		}), [...v.statuses].sort((e, t) => (l.indexOf(e.status) + 1 || Infinity) - (l.indexOf(t.status) + 1 || Infinity)).map((e) => /* @__PURE__ */ o(i, {
+			isAllStatus: !1,
+			data: y.get(e.status) ?? 0,
+			amountOfItems: e.count,
+			selected: u === e.status,
+			onClick: () => b(e.status),
+			formatAmount: x,
+			statusChip: /* @__PURE__ */ o(r, { status: e.status })
+		}, e.status))]
+	});
+};
+//#endregion
+export { u as InvoiceStatusCardsFilter };