@tesouro/embedded-components-react 0.9.40 → 0.9.43

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/useApprovalRequestsFilters.js

@@ -0,0 +1,149 @@
+"use client";
+"use client";
+"use client";
+"use client";
+import { useFilterPanel as e } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { useEmbedApi as t } from "../../../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import "../../../../../shared/data-access/dist/index.js";
+import { useWidgetConfig as n } from "../../../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
+import "../../../../../shared/feature/dist/index.js";
+import { useEntityUsersSearchQuery as r } from "../../../../data-access/dist/index6.js";
+import "../../../../data-access/dist/index.js";
+import { APPROVAL_REQUEST_STATUSES as i } from "./constants.js";
+import { ApprovalRequestsFilterField as a } from "../../../../ui/dist/index3.js";
+import "../../../../ui/dist/index.js";
+import { useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
+import { addDays as u, format as d, formatISO as f, startOfDay as p } from "date-fns";
+//#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/useApprovalRequestsFilters.js
+var m = {
+	Status: "status",
+	AddedBy: "addedBy",
+	RequestedOn: "requestedOn"
+}, h = 300, g = "MMM d, yyyy", _ = {
+	statuses: [],
+	isOnlyMine: !1
+};
+function v(e) {
+	return `${e.first_name ?? ""} ${e.last_name ?? ""}`.trim() || e.login;
+}
+function y({ labels: y, onFiltersChange: b }) {
+	let [x, S] = l(_), [C, w] = l(""), [T, E] = l(""), D = e();
+	s(() => {
+		let e = setTimeout(() => E(C.trim()), h);
+		return () => clearTimeout(e);
+	}, [C]);
+	let O = n().initResponse?.userId ?? void 0, [k, A] = l(O);
+	O && O !== k && A(O);
+	let { organizationId: j } = t(), [M, N] = l(j);
+	j && j !== M && (N(j), M && S((e) => ({
+		...e,
+		addedBy: void 0
+	})));
+	let P = r({
+		search: T,
+		enabled: D.activePanelId === a.AddedBy
+	}), F = o((e) => {
+		S((t) => ({
+			...t,
+			...e
+		})), b();
+	}, [b]), I = c(() => (P.data?.data ?? []).map((e) => ({
+		value: e.id,
+		label: v(e)
+	})), [P.data?.data]), L = c(() => i.map((e) => ({
+		value: e,
+		label: y.status[e]
+	})), [y.status]), R = c(() => {
+		let e = {};
+		x.statuses.length > 0 && (e.status__in = [...x.statuses]);
+		let t = x.isOnlyMine ? k : x.addedBy?.value;
+		if (t && (e.created_by = t), x.requestedFrom) {
+			let t = p(x.requestedFrom), n = p(x.requestedTo ?? x.requestedFrom);
+			e.created_at__gte = f(t), e.created_at__lt = f(u(n, 1));
+		}
+		return e;
+	}, [x, k]), z = c(() => {
+		let e = [], { filters: t } = y;
+		if (x.statuses.length > 0) {
+			let [n, ...r] = x.statuses.map((e) => y.status[e]);
+			e.push({
+				key: m.Status,
+				label: t.statusChip(r.length === 0 ? n : t.moreSelected(n, r.length))
+			});
+		}
+		if (x.addedBy && e.push({
+			key: m.AddedBy,
+			label: t.addedByChip(x.addedBy.label)
+		}), x.requestedFrom) {
+			let n = d(x.requestedFrom, g), r = x.requestedTo ? d(x.requestedTo, g) : n;
+			e.push({
+				key: m.RequestedOn,
+				label: t.requestedOnChip(n === r ? n : t.dateRange(n, r))
+			});
+		}
+		return e;
+	}, [y, x]), B = o((e) => {
+		switch (e) {
+			case m.Status:
+				F({ statuses: [] });
+				break;
+			case m.AddedBy:
+				F({ addedBy: void 0 });
+				break;
+			case m.RequestedOn: F({
+				requestedFrom: void 0,
+				requestedTo: void 0
+			});
+		}
+	}, [F]), V = o(() => {
+		S(_), b();
+	}, [b]), H = o((e) => {
+		let t = I.find((t) => t.value === e);
+		t && F({
+			addedBy: t,
+			isOnlyMine: !1
+		});
+	}, [F, I]), U = o((e) => F(e ? {
+		isOnlyMine: !0,
+		addedBy: void 0
+	} : { isOnlyMine: !1 }), [F]), W = o(() => {
+		D.closeMenu(), D.closePanel();
+	}, [D]);
+	return {
+		filters: {
+			isPopoverOpen: D.isMenuOpen || !!D.activePanelId,
+			isMenuOpen: D.isMenuOpen,
+			activePanel: D.activePanelId,
+			onMenuToggle: D.toggleMenu,
+			onPopoverClose: W,
+			onFieldSelect: D.openPanel,
+			activeFilterCount: z.length,
+			chips: z,
+			onRemoveChip: B,
+			onClearAll: V,
+			statusOptions: L,
+			selectedStatuses: x.statuses,
+			onStatusChange: (e) => F({ statuses: e }),
+			userOptions: I,
+			selectedUser: x.addedBy?.value ?? "",
+			onUserChange: H,
+			userSearchValue: C,
+			onUserSearchChange: w,
+			isUserLoading: P.isLoading,
+			isUserError: P.isError,
+			requestedFrom: x.requestedFrom,
+			requestedTo: x.requestedTo,
+			onRequestedRangeChange: ({ from: e, to: t }) => F({
+				requestedFrom: e,
+				requestedTo: t
+			}),
+			isOnlyMine: x.isOnlyMine,
+			onOnlyMineChange: U,
+			isOnlyMineDisabled: !k
+		},
+		query: R,
+		isFiltering: z.length > 0 || x.isOnlyMine
+	};
+}
+//#endregion
+export { m as ApprovalRequestsFilterChipKey, y as useApprovalRequestsFilters };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/useApprovalRequestsTable.js

@@ -4,14 +4,17 @@
 "use client";
 import { useEmbedApi as e } from "../../../../../shared/data-access/dist/lib/EmbedApiContext.js";
 import "../../../../../shared/data-access/dist/index.js";
-import { PAGE_SIZE_OPTIONS as t } from "./constants.js";
+import { useWidgetConfig as t } from "../../../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
+import "../../../../../shared/feature/dist/index.js";
 import { useApprovalRequestsQuery as n } from "../../../../data-access/dist/index3.js";
 import "../../../../data-access/dist/index.js";
-import { useApprovalRequestNames as r } from "./useApprovalRequestNames.js";
-import { buildApprovalRequestRows as i } from "./buildApprovalRequestRows.js";
-import { useCallback as a, useMemo as o, useState as s } from "react";
+import { PAGE_SIZE_OPTIONS as r } from "./constants.js";
+import { useApprovalRequestNames as i } from "./useApprovalRequestNames.js";
+import { buildApprovalRequestRows as a } from "./buildApprovalRequestRows.js";
+import { useApprovalRequestsFilters as o } from "./useApprovalRequestsFilters.js";
+import { useCallback as s, useMemo as c, useState as l } from "react";
 //#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/feature/dist/lib/ApprovalRequestsWidget/useApprovalRequestsTable.js
-function c(e, t) {
+function u(e, t) {
 	return e ? {
 		title: t.filterEmptyTitle,
 		description: t.filterEmptyDescription
@@ -20,40 +23,52 @@ function c(e, t) {
 		description: t.emptyDescription
 	};
 }
-function l({ labels: l, enabled: u = !0 }) {
-	let [d, f] = s(t[0]), [p, m] = s(), { organizationId: h } = e(), [g, _] = s(h);
-	h && h !== g && (_(h), m(void 0));
-	let v = n({
-		limit: d,
-		pagination_token: p,
-		enabled: u
-	}), y = o(() => v.data?.data ?? [], [v.data]), b = r({ items: y }), x = o(() => i(y, b, l), [
-		y,
-		b,
-		l
-	]), S = v.isPlaceholderData ? void 0 : v.data, C = S?.next_pagination_token ?? void 0, w = S?.prev_pagination_token ?? void 0, T = a((e) => {
-		f(e), m(void 0);
-	}, []), E = a(() => {
-		C && m(C);
-	}, [C]), D = a(() => {
-		w && m(w);
-	}, [w]), { refetch: O } = v, k = a(() => {
-		O();
-	}, [O]);
+function d({ labels: d, enabled: f = !0, pendingRequestIds: p, areDecisionsPaused: m = !1 }) {
+	let [h, g] = l(r[0]), [_, v] = l(), { organizationId: y } = e(), [b, x] = l(y);
+	y && y !== b && (x(y), v(void 0));
+	let S = s(() => v(void 0), []), { filters: C, query: w, isFiltering: T } = o({
+		labels: d,
+		onFiltersChange: S
+	}), E = n({
+		...w,
+		limit: h,
+		pagination_token: _,
+		enabled: f
+	}), D = c(() => E.data?.data ?? [], [E.data]), O = i({ items: D }), k = t().initResponse?.userId ?? void 0, A = m || E.isPlaceholderData, j = c(() => a(D, O, d, {
+		currentUserId: k,
+		pendingRequestIds: p,
+		areDecisionsPaused: A
+	}), [
+		D,
+		O,
+		d,
+		k,
+		p,
+		A
+	]), M = E.isPlaceholderData ? void 0 : E.data, N = M?.next_pagination_token ?? void 0, P = M?.prev_pagination_token ?? void 0, F = s((e) => {
+		g(e), v(void 0);
+	}, []), I = s(() => {
+		N && v(N);
+	}, [N]), L = s(() => {
+		P && v(P);
+	}, [P]), { refetch: R } = E, z = s(() => {
+		R();
+	}, [R]);
 	return {
-		rows: x,
-		isLoading: v.isLoading,
-		isError: v.isError,
-		pageSize: d,
-		pageSizeOptions: t,
-		onPageSizeChange: T,
-		hasNextPage: !!C,
-		hasPrevPage: !!w,
-		onNextPage: E,
-		onPrevPage: D,
-		emptyState: c(!1, l),
-		onRetry: k
+		rows: j,
+		isLoading: E.isLoading,
+		isError: E.isError,
+		pageSize: h,
+		pageSizeOptions: r,
+		onPageSizeChange: F,
+		hasNextPage: !!N,
+		hasPrevPage: !!P,
+		onNextPage: I,
+		onPrevPage: L,
+		filters: C,
+		emptyState: u(T, d),
+		onRetry: z
 	};
 }
 //#endregion
-export { c as selectEmptyState, l as useApprovalRequestsTable };
+export { u as selectEmptyState, d as useApprovalRequestsTable };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index.js

@@ -1,3 +1,5 @@
 import "./index2.js";
-import { ApprovalRequestsScreen as e } from "./index3.js";
-export { e as ApprovalRequestsScreen };
+import { ApprovalRequestsFilterField as e } from "./index3.js";
+import { ApprovalRequestsScreen as t } from "./index4.js";
+import { RejectApprovalRequestDialog as n } from "./index5.js";
+export { e as ApprovalRequestsFilterField, t as ApprovalRequestsScreen, n as RejectApprovalRequestDialog };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index2.js

@@ -1,5 +1,22 @@
+import { FILTER_MENU_BUTTON_LABELS_EN as e, FILTER_TAG_LABELS_EN as t } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
 //#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index2.js
-var e = {
+var n = {
+	fields: {
+		status: "Status",
+		addedBy: "Added by",
+		requestedOn: "Requested on"
+	},
+	fieldMenuLabel: "Filter approval requests by",
+	onlyMine: "Only my approvals",
+	userSearchLabel: "Search users",
+	userSearchPlaceholder: "Search users",
+	userEmpty: "No users found",
+	userLoading: "Loading users",
+	userError: "Couldn't load users",
+	clearAll: "Clear all",
+	filterMenuButton: e,
+	filterTag: t
+}, r = {
 	columnInvoiceNumber: "Invoice #",
 	columnVendor: "Vendor",
 	columnIssueDate: "Issue date",
@@ -7,12 +24,25 @@ var e = {
 	columnStatus: "Status",
 	columnAmount: "Amount",
 	columnAddedBy: "Added by",
+	columnActions: "Actions",
+	rowActions: "Request actions",
+	approve: "Approve request",
+	reject: "Reject request",
 	loadingValue: "Loading",
 	errorTitle: "Couldn't load approval requests",
 	errorDescription: "Try again.",
 	errorRetry: "Try again",
+	filterBar: n,
 	accessRestrictedTitle: "Access restricted",
 	accessRestrictedDescription: "You don't have permission to view approval requests."
+}, i = {
+	title: "Reject this request?",
+	description: "The bill is rejected and nobody else is asked to approve it.",
+	reason: "Reason",
+	optionalNote: "(optional)",
+	confirm: "Reject request",
+	cancel: "Cancel",
+	close: "Close"
 };
 //#endregion
-export { e as APPROVAL_REQUESTS_SCREEN_LABELS_EN };
+export { n as APPROVAL_REQUESTS_FILTER_BAR_LABELS_EN, r as APPROVAL_REQUESTS_SCREEN_LABELS_EN, i as REJECT_APPROVAL_REQUEST_DIALOG_LABELS_EN };

package/dist/libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index3.js

@@ -1,99 +1,143 @@
-import { Badge as e, DataTable as t, Skeleton as n } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { EmptyState as r } from "../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
-import { ErrorState as i } from "../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
-import "../../../shared/ui/dist/index.js";
-import { APPROVAL_REQUESTS_SCREEN_LABELS_EN as a } from "./index2.js";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { DateRangePicker as e, FilterMenuButton as t, FilterTag as n, Input as r, Label as i, MultiSelectFilter as a, Popover as o, PopoverContent as s, PopoverTrigger as c, RadioGroup as l, RadioGroupItem as u, Switch as d, TableToolbar as f, cn as p } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { APPROVAL_REQUESTS_FILTER_BAR_LABELS_EN as m } from "./index2.js";
+import { useId as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { ListFilter as y } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/approval-requests-widget/ui/dist/index3.js
-var l = [], u = () => void 0;
-function d({ name: e, loadingLabel: t }) {
-	return e === void 0 ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(n, {
-		className: "ttw:h-4 ttw:w-32",
-		"aria-hidden": !0
-	}), /* @__PURE__ */ s("span", {
-		className: "ttw:sr-only",
-		children: t
-	})] }) : /* @__PURE__ */ s(o, { children: e });
-}
-function f({ rows: n, isLoading: o, isError: c, isAccessRestricted: f, pageSize: p, onPageSizeChange: m, pageSizeOptions: h, hasNextPage: g, hasPrevPage: _, onNextPage: v, onPrevPage: y, emptyState: b, onRetry: x, labels: S }) {
-	let C = {
-		...a,
-		...S
-	}, w = [
-		{
-			accessorKey: "invoiceNumber",
-			header: C.columnInvoiceNumber
-		},
-		{
-			accessorKey: "vendor",
-			header: C.columnVendor,
-			cell: ({ row: e }) => /* @__PURE__ */ s(d, {
-				name: e.original.vendor,
-				loadingLabel: C.loadingValue
-			})
-		},
-		{
-			accessorKey: "issueDate",
-			header: C.columnIssueDate
-		},
-		{
-			accessorKey: "dueDate",
-			header: C.columnDueDate
-		},
-		{
-			accessorKey: "statusLabel",
-			header: C.columnStatus,
-			cell: ({ row: t }) => /* @__PURE__ */ s(e, {
-				tone: t.original.statusTone,
-				children: t.original.statusLabel
-			})
+var b = {
+	Status: "status",
+	AddedBy: "addedBy",
+	RequestedOn: "requestedOn"
+}, x = [
+	b.Status,
+	b.AddedBy,
+	b.RequestedOn
+], S = {
+	status: "ttw:w-56",
+	addedBy: "ttw:w-64",
+	requestedOn: "ttw:w-auto"
+}, C = "ttw:flex ttw:w-full ttw:cursor-pointer ttw:items-center ttw:gap-2 ttw:rounded-md ttw:px-2 ttw:py-1.5 ttw:text-xs ttw:font-medium ttw:transition-colors ttw:hover:bg-accent";
+function w({ filters: w, labels: T }) {
+	let E = m, D = {
+		...E,
+		...T,
+		fields: {
+			...E.fields,
+			...T?.fields
 		},
-		{
-			accessorKey: "amount",
-			header: () => /* @__PURE__ */ s("div", {
-				className: "ttw:text-right",
-				children: C.columnAmount
-			}),
-			cell: ({ row: e }) => /* @__PURE__ */ s("div", {
-				className: "ttw:text-right ttw:tabular-nums",
-				children: e.original.amount
-			})
+		filterMenuButton: {
+			...E.filterMenuButton,
+			...T?.filterMenuButton
 		},
-		{
-			accessorKey: "addedBy",
-			header: C.columnAddedBy,
-			cell: ({ row: e }) => /* @__PURE__ */ s(d, {
-				name: e.original.addedBy,
-				loadingLabel: C.loadingValue
-			})
+		filterTag: {
+			...E.filterTag,
+			...T?.filterTag
 		}
-	];
-	return f ? /* @__PURE__ */ s(i, {
-		title: C.accessRestrictedTitle,
-		description: C.accessRestrictedDescription
-	}) : c ? /* @__PURE__ */ s(i, {
-		title: C.errorTitle,
-		description: C.errorDescription,
-		retryLabel: x ? C.errorRetry : void 0,
-		onRetry: x
-	}) : /* @__PURE__ */ s(t, {
-		columns: w,
-		data: n,
-		isLoading: o,
-		sorting: l,
-		onSortingChange: u,
-		pageSize: p,
-		onPageSizeChange: m,
-		pageSizeOptions: h,
-		hasNextPage: g,
-		hasPrevPage: _,
-		onNextPage: v,
-		onPrevPage: y,
-		children: /* @__PURE__ */ s(r, {
-			title: b.title,
-			description: b.description
-		})
+	}, O = h(), { activePanel: k } = w, A = k && S[k] || "ttw:w-52";
+	return /* @__PURE__ */ _(f, {
+		className: "ttw:px-4",
+		filters: /* @__PURE__ */ v("div", {
+			className: "ttw:flex ttw:h-8 ttw:items-center ttw:gap-2",
+			children: [/* @__PURE__ */ _(d, {
+				id: O,
+				checked: w.isOnlyMine,
+				onCheckedChange: w.onOnlyMineChange,
+				disabled: w.isOnlyMineDisabled
+			}), /* @__PURE__ */ _(i, {
+				htmlFor: O,
+				className: "ttw:text-sm",
+				children: D.onlyMine
+			})]
+		}),
+		filterButton: /* @__PURE__ */ v(o, {
+			open: w.isPopoverOpen,
+			onOpenChange: (e) => {
+				e || w.onPopoverClose();
+			},
+			children: [/* @__PURE__ */ _(c, {
+				asChild: !0,
+				children: /* @__PURE__ */ _(t, {
+					activeCount: w.activeFilterCount,
+					onClick: (e) => {
+						k && e.preventDefault(), w.onMenuToggle();
+					},
+					labels: D.filterMenuButton
+				})
+			}), /* @__PURE__ */ v(s, {
+				align: "start",
+				className: p("ttw:p-0", A),
+				children: [
+					w.isMenuOpen && /* @__PURE__ */ _("div", {
+						className: "ttw:p-1",
+						role: "menu",
+						"aria-label": D.fieldMenuLabel,
+						children: x.map((e) => /* @__PURE__ */ v("button", {
+							type: "button",
+							role: "menuitem",
+							className: C,
+							onClick: () => w.onFieldSelect(e),
+							children: [/* @__PURE__ */ _(y, {
+								className: "ttw:size-4 ttw:shrink-0 ttw:text-muted-foreground",
+								"aria-hidden": !0
+							}), D.fields[e]]
+						}, e))
+					}),
+					k === b.Status && /* @__PURE__ */ _(a, {
+						options: [...w.statusOptions],
+						selectedValues: [...w.selectedStatuses],
+						onSelectionChange: w.onStatusChange
+					}),
+					k === b.AddedBy && /* @__PURE__ */ v("div", {
+						className: "ttw:flex ttw:flex-col ttw:gap-2 ttw:p-3",
+						children: [/* @__PURE__ */ _(r, {
+							type: "search",
+							className: "ttw:h-8 ttw:text-xs",
+							"aria-label": D.userSearchLabel,
+							placeholder: D.userSearchPlaceholder,
+							value: w.userSearchValue,
+							onChange: (e) => w.onUserSearchChange(e.target.value)
+						}), w.isUserLoading ? /* @__PURE__ */ _("p", {
+							className: "ttw:px-1 ttw:text-xs ttw:text-muted-foreground",
+							children: D.userLoading
+						}) : w.isUserError ? /* @__PURE__ */ _("p", {
+							className: "ttw:px-1 ttw:text-xs ttw:text-destructive",
+							children: D.userError
+						}) : w.userOptions.length === 0 ? /* @__PURE__ */ _("p", {
+							className: "ttw:px-1 ttw:text-xs ttw:text-muted-foreground",
+							children: D.userEmpty
+						}) : /* @__PURE__ */ _(l, {
+							value: w.selectedUser,
+							onValueChange: w.onUserChange,
+							"aria-label": D.fields.addedBy,
+							className: "ttw:flex ttw:max-h-64 ttw:flex-col ttw:gap-1 ttw:overflow-y-auto",
+							children: w.userOptions.map((e) => /* @__PURE__ */ v("label", {
+								className: "ttw:flex ttw:cursor-pointer ttw:items-center ttw:gap-2 ttw:rounded-md ttw:px-2 ttw:py-1.5 ttw:hover:bg-accent",
+								children: [/* @__PURE__ */ _(u, { value: e.value }), /* @__PURE__ */ _("span", {
+									className: "ttw:text-xs ttw:font-medium",
+									children: e.label
+								})]
+							}, e.value))
+						})]
+					}),
+					k === b.RequestedOn && /* @__PURE__ */ _(e, {
+						from: w.requestedFrom,
+						to: w.requestedTo,
+						onRangeChange: w.onRequestedRangeChange
+					})
+				]
+			})]
+		}),
+		tags: /* @__PURE__ */ v(g, { children: [w.chips.map((e) => /* @__PURE__ */ _(n, {
+			label: e.label,
+			labels: D.filterTag,
+			onDismiss: () => w.onRemoveChip(e.key)
+		}, e.key)), w.chips.length > 0 && /* @__PURE__ */ _("button", {
+			type: "button",
+			className: "ttw:cursor-pointer ttw:whitespace-nowrap ttw:text-xs ttw:text-muted-foreground ttw:transition-colors ttw:hover:text-foreground",
+			onClick: w.onClearAll,
+			children: D.clearAll
+		})] })
 	});
 }
 //#endregion
-export { f as ApprovalRequestsScreen, f as default };
+export { w as ApprovalRequestsFilterBar, w as default, b as ApprovalRequestsFilterField };