@layerfi/components 0.1.132-alpha.3 → 0.1.132-alpha.5

package/dist/cjs/index.cjs

@@ -278,7 +278,7 @@ var getIntlLocale = (locale) => {
 };
 var package_default = {
 	name: "@layerfi/components",
-	version: "0.1.132-alpha.3",
+	version: "0.1.132-alpha.5",
 	description: "Layer React Components",
 	main: "dist/cjs/index.cjs",
 	module: "dist/esm/index.mjs",
@@ -8030,6 +8030,9 @@ var getLeafCategories$1 = (categories) => {
 		return getLeafCategories$1(category.subCategories);
 	});
 };
+var flattenCategories$2 = (categories) => {
+	return categories.flatMap((category) => [category, ...category.subCategories ? flattenCategories$2(category.subCategories) : []]);
+};
 //#endregion
 //#region src/schemas/customer.ts
 var CustomerStatusSchema = effect.Schema.Literal("ACTIVE", "ARCHIVED");
@@ -8742,6 +8745,7 @@ var CategorizationRuleSchema = effect_index.Schema.Struct({
 	suggestion2: (0, effect_index.pipe)(effect_index.Schema.propertySignature(effect_index.Schema.NullishOr(AccountIdentifierSchema)), effect_index.Schema.fromKey("suggestion_2")),
 	suggestion3: (0, effect_index.pipe)(effect_index.Schema.propertySignature(effect_index.Schema.NullishOr(AccountIdentifierSchema)), effect_index.Schema.fromKey("suggestion_3")),
 	counterpartyFilter: (0, effect_index.pipe)(effect_index.Schema.propertySignature(effect_index.Schema.NullishOr(BankTransactionCounterpartySchema)), effect_index.Schema.fromKey("counterparty_filter")),
+	readableTransactionDescriptionFilter: (0, effect_index.pipe)(effect_index.Schema.propertySignature(effect_index.Schema.NullishOr(effect_index.Schema.String)), effect_index.Schema.fromKey("readable_transaction_description_filter")),
 	bankDirectionFilter: (0, effect_index.pipe)(effect_index.Schema.propertySignature(effect_index.Schema.NullishOr(BankDirectionFilterSchema)), effect_index.Schema.fromKey("bank_direction_filter")),
 	createdAt: (0, effect_index.pipe)(effect_index.Schema.propertySignature(effect_index.Schema.Date), effect_index.Schema.fromKey("created_at")),
 	updatedAt: (0, effect_index.pipe)(effect_index.Schema.propertySignature(effect_index.Schema.Date), effect_index.Schema.fromKey("updated_at")),
@@ -23608,10 +23612,13 @@ var getCategorizationRuleDirectionLabel = (bankDirectionFilter, t) => {
 	const entry = DIRECTION_CONFIG.find((c) => c.value === bankDirectionFilter);
 	return entry ? t(entry.i18nKey, entry.defaultValue) : t("categorizationRules:label.any_direction", "Any direction");
 };
+var getCategorizationRuleCounterpartyLabel = (rule) => {
+	var _ref, _rule$counterpartyFil, _rule$counterpartyFil2;
+	return (_ref = (_rule$counterpartyFil = (_rule$counterpartyFil2 = rule.counterpartyFilter) === null || _rule$counterpartyFil2 === void 0 ? void 0 : _rule$counterpartyFil2.name) !== null && _rule$counterpartyFil !== void 0 ? _rule$counterpartyFil : rule.readableTransactionDescriptionFilter) !== null && _ref !== void 0 ? _ref : void 0;
+};
 //#endregion
 //#region src/components/CategorizationRules/CategorizationRulesMobileList/CategorizationRulesMobileList.tsx
 var CategorizationRuleMobileListItem = ({ rule, options, onDeletePress }) => {
-	var _rule$counterpartyFil;
 	const { t } = (0, react_i18next.useTranslation)();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
 		justify: "space-between",
@@ -23625,7 +23632,7 @@ var CategorizationRuleMobileListItem = ({ rule, options, onDeletePress }) => {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Span, {
 					weight: "bold",
 					ellipsis: true,
-					children: (_rule$counterpartyFil = rule.counterpartyFilter) === null || _rule$counterpartyFil === void 0 ? void 0 : _rule$counterpartyFil.name
+					children: getCategorizationRuleCounterpartyLabel(rule)
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
 					gap: "3xs",
@@ -23970,13 +23977,10 @@ var CategorizationRulesTable = ({ data, isLoading, isError, paginationProps, opt
 		{
 			id: CategorizationRuleColumns.Counterparty,
 			header: t("common:label.counterparty", "Counterparty"),
-			cell: (row) => {
-				var _row$original$counter;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Span, {
-					ellipsis: true,
-					children: (_row$original$counter = row.original.counterpartyFilter) === null || _row$original$counter === void 0 ? void 0 : _row$original$counter.name
-				});
-			}
+			cell: (row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Span, {
+				ellipsis: true,
+				children: getCategorizationRuleCounterpartyLabel(row.original)
+			})
 		},
 		{
 			id: CategorizationRuleColumns.Direction,
@@ -24067,7 +24071,7 @@ var CategorizationRulesHeader = ({ onGoBack }) => {
 };
 var resolveVariant$1 = ({ width }) => width < BREAKPOINTS.TABLET ? "Mobile" : "Desktop";
 var ResponsiveCategorizationRulesView = () => {
-	var _selectedRule$counter, _selectedRule$counter2;
+	var _ref;
 	const { t } = (0, react_i18next.useTranslation)();
 	const [selectedRule, setSelectedRule] = (0, react.useState)(null);
 	const [showDeletionConfirmationModal, setShowDeletionConfirmationModal] = (0, react.useState)(false);
@@ -24077,7 +24081,7 @@ var ResponsiveCategorizationRulesView = () => {
 	const { data: categories, isLoading: categoriesAreLoading } = useCategories({ mode: CategoriesListMode.All });
 	const options = (0, react.useMemo)(() => {
 		if (!categories) return [];
-		return getLeafCategories$1(categories);
+		return flattenCategories$2(categories);
 	}, [categories]);
 	const { data, hasMore, isLoading: rulesAreLoading, isError, size, setSize } = useListCategorizationRules({});
 	const categorizationRules = (0, react.useMemo)(() => data === null || data === void 0 ? void 0 : data.flatMap(({ data }) => data), [data]);
@@ -24123,66 +24127,69 @@ var ResponsiveCategorizationRulesView = () => {
 	]);
 	const isLoading = data === void 0 || rulesAreLoading || categoriesAreLoading;
 	const { toBankTransactionsTable } = useBankTransactionsNavigation();
+	const DesktopView = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseDetailView, {
+		slots: {
+			Header: CategorizationRulesHeader,
+			BackIcon: BackArrow
+		},
+		name: "CategorizationRulesDrawer",
+		onGoBack: toBankTransactionsTable,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CategorizationRulesTable, {
+			data: categorizationRules,
+			isLoading,
+			isError,
+			paginationProps,
+			options,
+			onDeleteRule,
+			slots: {
+				EmptyState: CategorizationRulesEmptyState,
+				ErrorState: CategorizationRulesErrorState
+			}
+		})
+	}), [
+		toBankTransactionsTable,
+		categorizationRules,
+		isLoading,
+		isError,
+		paginationProps,
+		options,
+		onDeleteRule
+	]);
+	const MobileView = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(VStack, {
+		gap: "md",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CategorizationRulesHeader, { onGoBack: toBankTransactionsTable }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CategorizationRulesMobileList, {
+			data: categorizationRules,
+			isLoading,
+			isError,
+			paginationProps,
+			options,
+			onDeleteRule,
+			slots: {
+				EmptyState: CategorizationRulesEmptyState,
+				ErrorState: CategorizationRulesErrorState
+			}
+		})]
+	}), [
+		toBankTransactionsTable,
+		categorizationRules,
+		isLoading,
+		isError,
+		paginationProps,
+		options,
+		onDeleteRule
+	]);
+	const selectedRuleCounterpartyLabel = (_ref = selectedRule && getCategorizationRuleCounterpartyLabel(selectedRule)) !== null && _ref !== void 0 ? _ref : t("bankTransactions:label.selected_counterparty", "this counterparty");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsiveComponent, {
 		resolveVariant: resolveVariant$1,
 		slots: {
-			Desktop: (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseDetailView, {
-				slots: {
-					Header: CategorizationRulesHeader,
-					BackIcon: BackArrow
-				},
-				name: "CategorizationRulesDrawer",
-				onGoBack: toBankTransactionsTable,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CategorizationRulesTable, {
-					data: categorizationRules,
-					isLoading,
-					isError,
-					paginationProps,
-					options,
-					onDeleteRule,
-					slots: {
-						EmptyState: CategorizationRulesEmptyState,
-						ErrorState: CategorizationRulesErrorState
-					}
-				})
-			}), [
-				toBankTransactionsTable,
-				categorizationRules,
-				isLoading,
-				isError,
-				paginationProps,
-				options,
-				onDeleteRule
-			]),
-			Mobile: (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(VStack, {
-				gap: "md",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CategorizationRulesHeader, { onGoBack: toBankTransactionsTable }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CategorizationRulesMobileList, {
-					data: categorizationRules,
-					isLoading,
-					isError,
-					paginationProps,
-					options,
-					onDeleteRule,
-					slots: {
-						EmptyState: CategorizationRulesEmptyState,
-						ErrorState: CategorizationRulesErrorState
-					}
-				})]
-			}), [
-				toBankTransactionsTable,
-				categorizationRules,
-				isLoading,
-				isError,
-				paginationProps,
-				options,
-				onDeleteRule
-			])
+			Desktop: DesktopView,
+			Mobile: MobileView
 		}
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseConfirmationModal, {
 		isOpen: showDeletionConfirmationModal,
 		onOpenChange: setShowDeletionConfirmationModal,
 		title: t("categorizationRules:prompt.delete_categorization_rule", "Delete categorization rule?"),
-		description: t("categorizationRules:label.transaction_no_longer_automatically_categorized", "Transactions will no longer automatically be categorized by this rule. Any transactions previously categorized to {{counterparty}} will not be affected.", { counterparty: (_selectedRule$counter = selectedRule === null || selectedRule === void 0 || (_selectedRule$counter2 = selectedRule.counterpartyFilter) === null || _selectedRule$counter2 === void 0 ? void 0 : _selectedRule$counter2.name) !== null && _selectedRule$counter !== void 0 ? _selectedRule$counter : t("bankTransactions:label.selected_counterparty", "this counterparty") }),
+		description: t("categorizationRules:label.transaction_no_longer_automatically_categorized", "Transactions will no longer automatically be categorized by this rule. Any transactions previously categorized to {{counterparty}} will not be affected.", { counterparty: selectedRuleCounterpartyLabel }),
 		onConfirm: archiveCategorizationRule,
 		confirmLabel: t("common:action.delete_label", "Delete"),
 		cancelLabel: t("common:action.cancel_label", "Cancel"),
@@ -27413,13 +27420,13 @@ var ProfitAndLossChartSelectionIndicator = ({ viewBox, selected }) => {
 	const boxWidth = width + 2 * margin;
 	const borderRadius = 6;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-		className: "Layer__profit-and-loss-chart__selection-indicator",
+		className: "Layer__ProfitAndLossChart__SelectionIndicator",
 		rx: borderRadius,
 		ry: borderRadius,
 		x: x - margin,
-		y: 16,
+		y: 24,
 		width: boxWidth,
-		height: "calc(100% - 30px)"
+		height: "calc(100% - 38px)"
 	});
 };
 //#endregion
@@ -27729,7 +27736,8 @@ var transformPnLData = ({ data, compactView, formatMonthName }) => {
 var CHART_MARGINS = {
 	left: 12,
 	right: 12,
-	bottom: 12
+	bottom: 12,
+	top: 24
 };
 var ProfitAndLossChart = ({ tagFilter, hideLegend = false }) => {
 	var _getColor$hex, _getColor, _getColor$hex2, _getColor2, _getColor$hex3, _getColor3;
@@ -27803,9 +27811,9 @@ var ProfitAndLossChart = ({ tagFilter, hideLegend = false }) => {
 		activationDate
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "Layer__chart-wrapper",
+		className: "Layer__ProfitAndLossChart",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ResponsiveContainer, {
-			className: "Layer__chart-container",
+			className: "Layer__ProfitAndLossChart__Container",
 			width: "100%",
 			height: "100%",
 			onResize: (0, react.useCallback)((width) => {
@@ -27817,7 +27825,7 @@ var ProfitAndLossChart = ({ tagFilter, hideLegend = false }) => {
 				margin: CHART_MARGINS,
 				data: dataOrPlaceholderData,
 				onClick,
-				className: "Layer__profit-and-loss-chart",
+				className: "Layer__profit-and-loss-chart Layer__ProfitAndLossChart__Chart",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfitAndLossChartPatternDefs, {}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.ReferenceLine, {
@@ -27908,7 +27916,6 @@ var DetailedChart = ({ data, isLoading, interactionProps, stylingProps, slots })
 				x: x + width / 2,
 				textAnchor: "middle",
 				verticalAnchor: "middle",
-				breakAll: true,
 				maxLines: 2,
 				width: Math.max(width - 40, 0),
 				className: "Layer__DetailedChart__centerLabelTitle",
@@ -29965,7 +29972,7 @@ var SyncingBadge = () => {
 };
 //#endregion
 //#region src/components/ProfitAndLossHeader/ProfitAndLossHeader.tsx
-var ProfitAndLossHeader = ({ text, className, headingClassName, withDatePicker, withDownloadButton, withStatus = true, stringOverrides, dateSelectionMode = "full" }) => {
+var ProfitAndLossHeader = ({ text, className, headingClassName, withDatePicker, withDownloadButton, withStatus = true, stringOverrides, dateSelectionMode = "full", trailingContent }) => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const { data: linkedAccounts } = useLinkedAccounts();
 	const { activePeriod } = useActiveBookkeepingPeriod();
@@ -29993,10 +30000,15 @@ var ProfitAndLossHeader = ({ text, className, headingClassName, withDatePicker,
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
 			gap: "xs",
-			children: [withDatePicker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CombinedDateRangeSelection, {
-				mode: dateSelectionMode,
-				showLabels: false
-			}), withDownloadButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfitAndLossDownloadButton, { stringOverrides: stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.downloadButton })]
+			align: "center",
+			children: [
+				trailingContent,
+				withDatePicker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CombinedDateRangeSelection, {
+					mode: dateSelectionMode,
+					showLabels: false
+				}),
+				withDownloadButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfitAndLossDownloadButton, { stringOverrides: stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.downloadButton })
+			]
 		})]
 	});
 };
@@ -44106,8 +44118,8 @@ var ProfitAndLossOverviewDetailedCharts = ({ variant, detailedChartsStringOverri
 			label: (detailedChartsStringOverrides === null || detailedChartsStringOverrides === void 0 || (_detailedChartsString2 = detailedChartsStringOverrides.detailedChartStringOverrides) === null || _detailedChartsString2 === void 0 ? void 0 : _detailedChartsString2.expenseToggleLabel) || t("common:label.expenses", "Expenses")
 		}];
 	}, [detailedChartsStringOverrides, t]);
-	const chartsWrapperClassName = variant === "accounting" ? "Layer__accounting-overview-profit-and-loss-charts" : "Layer__bookkeeping-overview-profit-and-loss-charts";
-	const chartContainerName = variant === "accounting" ? "accounting-overview-profit-and-loss-chart" : "bookkeeping-overview-profit-and-loss-chart";
+	const chartsWrapperClassName = variant === "accounting" ? "Layer__AccountingOverview__ProfitAndLossCharts" : "Layer__BookkeepingOverview__ProfitAndLossCharts";
+	const chartContainerName = variant === "accounting" ? "AccountingOverview__ProfitAndLossChart" : "BookkeepingOverview__ProfitAndLossChart";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(VStack, {
 		className: chartsWrapperClassName,
 		gap: "md",
@@ -44148,6 +44160,49 @@ var ProfitAndLossOverviewDetailedCharts = ({ variant, detailedChartsStringOverri
 	});
 };
 //#endregion
+//#region src/components/ProfitAndLossSummaryCard/PnlLegend.tsx
+var Swatch$1 = ({ className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	className: `Layer__PnlLegend__Swatch ${className}`,
+	"aria-hidden": true
+});
+var PnlLegend = ({ direction = "row" }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Stack, {
+		className: "Layer__PnlLegend",
+		direction,
+		align: "start",
+		gap: direction === "row" ? "md" : "2xs",
+		pis: direction === "column" ? "md" : void 0,
+		pbe: direction === "column" ? "md" : void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
+				gap: "2xs",
+				align: "center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch$1, { className: "Layer__PnlLegend__Swatch--income" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Span, {
+					size: "sm",
+					children: t("common:label.revenue", "Revenue")
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
+				gap: "2xs",
+				align: "center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch$1, { className: "Layer__PnlLegend__Swatch--expenses" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Span, {
+					size: "sm",
+					children: t("common:label.expenses", "Expenses")
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
+				gap: "2xs",
+				align: "center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch$1, { className: "Layer__PnlLegend__Swatch--uncategorized" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Span, {
+					size: "sm",
+					children: t("common:label.uncategorized", "Uncategorized")
+				})]
+			})
+		]
+	});
+};
+//#endregion
 //#region src/views/AccountingOverview/AccountingOverview.tsx
 var AccountingOverview = ({ title, showTitle = true, enableOnboarding = false, onboardingStepOverride = void 0, onTransactionsToReviewClick, middleBanner, chartColorsList, stringOverrides, tagFilter = void 0, slotProps }) => {
 	var _slotProps$profitAndL, _stringOverrides$prof, _stringOverrides$prof2;
@@ -44162,6 +44217,7 @@ var AccountingOverview = ({ title, showTitle = true, enableOnboarding = false, o
 		} : void 0,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(View, {
 			title: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.title) || title || t("overview:label.accounting_overview", "Accounting overview"),
+			viewClassName: "Layer__AccountingOverview",
 			showHeader: showTitle,
 			header: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header$1, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderCol, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalMonthPicker, { truncateMonth: sizeClass === "mobile" }) }) }) }),
 			children: [
@@ -44177,11 +44233,19 @@ var AccountingOverview = ({ title, showTitle = true, enableOnboarding = false, o
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
 					name: "accounting-overview-profit-and-loss",
+					className: "Layer__AccountingOverview__ProfitAndLossContainer",
 					asWidget: true,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfitAndLoss.Header, { text: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.header) || t("common:label.profit_loss", "Profit & Loss") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfitAndLoss.Chart, { tagFilter: tagFilter ? {
-						key: tagFilter.tagKey,
-						values: tagFilter.tagValues
-					} : void 0 })]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfitAndLoss.Header, {
+						text: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.header) || t("common:label.profit_loss", "Profit & Loss"),
+						className: "Layer__AccountingOverview__ProfitAndLossHeader",
+						trailingContent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PnlLegend, { direction: "row" })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfitAndLoss.Chart, {
+						tagFilter: tagFilter ? {
+							key: tagFilter.tagKey,
+							values: tagFilter.tagValues
+						} : void 0,
+						hideLegend: true
+					})]
 				}),
 				middleBanner && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container, {
 					name: "accounting-overview-middle-banner",
@@ -44684,7 +44748,7 @@ var BookkeepingOverview = ({ title, showTitle = true, onClickReconnectAccounts,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ProfitAndLoss, {
 		asContainer: false,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(View, {
-			viewClassName: "Layer__bookkeeping-overview--view",
+			viewClassName: "Layer__bookkeeping-overview--view Layer__BookkeepingOverview",
 			title: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.title) || title || t("overview:label.bookkeeping_overview", "Bookkeeping overview"),
 			header: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header$1, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderCol, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalMonthPicker, { truncateMonth: sizeClass === "mobile" }) }) }) }),
 			withSidebar: width > 1100,
@@ -44721,6 +44785,7 @@ var BookkeepingOverview = ({ title, showTitle = true, onClickReconnectAccounts,
 					onClick: () => upperElementInFocus.current = false,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
 						name: "bookkeeping-overview-profit-and-loss",
+						className: "Layer__BookkeepingOverview__ProfitAndLossContainer",
 						asWidget: true,
 						style: {
 							position: "relative",
@@ -44729,7 +44794,8 @@ var BookkeepingOverview = ({ title, showTitle = true, onClickReconnectAccounts,
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfitAndLoss.Header, {
 								text: (stringOverrides === null || stringOverrides === void 0 || (_stringOverrides$prof = stringOverrides.profitAndLoss) === null || _stringOverrides$prof === void 0 ? void 0 : _stringOverrides$prof.header) || t("common:label.profit_loss", "Profit & Loss"),
-								withStatus: true
+								withStatus: true,
+								trailingContent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PnlLegend, { direction: "row" })
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VStack, {
 								pb: "md",
@@ -44740,7 +44806,7 @@ var BookkeepingOverview = ({ title, showTitle = true, onClickReconnectAccounts,
 									variants: profitAndLossSummariesVariants
 								})
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfitAndLoss.Chart, {})
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfitAndLoss.Chart, { hideLegend: true })
 						]
 					})
 				}),
@@ -46852,11 +46918,13 @@ var SummaryCard = ({ slots, children, className }) => {
 	});
 };
 //#endregion
-//#region src/hooks/utils/i18n/useGlobalMonthSubtitle.ts
-var useGlobalMonthSubtitle = () => {
+//#region src/hooks/utils/i18n/useGlobalDateFormatter.ts
+var useGlobalDateFormatter = () => {
 	const { formatDate } = useIntlFormatter();
-	const { date } = useGlobalDate({ dateSelectionMode: "month" });
-	return formatDate(date, MonthYearPattern.MonthYear);
+	const { date } = useGlobalDate();
+	return (0, react.useCallback)((format) => {
+		return formatDate(date, format);
+	}, [date, formatDate]);
 };
 //#endregion
 //#region src/components/ui/SummaryCard/ExpandSummaryCardButton.tsx
@@ -46871,9 +46939,9 @@ function ExpandSummaryCardButton({ callback, ariaLabel }) {
 }
 //#endregion
 //#region src/components/ui/SummaryCard/useSummaryCardSlots.tsx
-var useSummaryCardSlots = ({ defaultTitle, legend, interactionProps, stringOverrides }) => {
+var useSummaryCardSlots = ({ defaultTitle, legend, interactionProps, subtitleDateFormat = DateFormat.MonthYear, stringOverrides }) => {
 	const { t } = (0, react_i18next.useTranslation)();
-	const subtitle = useGlobalMonthSubtitle();
+	const formatGlobalDate = useGlobalDateFormatter();
 	const { onClickExpand } = interactionProps !== null && interactionProps !== void 0 ? interactionProps : {};
 	return (0, react.useMemo)(() => {
 		var _stringOverrides$titl;
@@ -46883,14 +46951,15 @@ var useSummaryCardSlots = ({ defaultTitle, legend, interactionProps, stringOverr
 		}) : void 0;
 		return {
 			title: (_stringOverrides$titl = stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.title) !== null && _stringOverrides$titl !== void 0 ? _stringOverrides$titl : defaultTitle,
-			subtitle,
+			subtitle: formatGlobalDate(subtitleDateFormat),
 			legend,
 			primaryAction
 		};
 	}, [
 		stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.title,
 		defaultTitle,
-		subtitle,
+		subtitleDateFormat,
+		formatGlobalDate,
 		legend,
 		onClickExpand,
 		t
@@ -47005,55 +47074,13 @@ var MileageTrackingSummary = ({ stringOverrides, interactionProps } = {}) => {
 		slots: useSummaryCardSlots({
 			defaultTitle: t("mileageTracking:label.mileage_tracking", "Mileage Tracking"),
 			interactionProps,
-			stringOverrides
+			stringOverrides,
+			subtitleDateFormat: DateFormat.Year
 		}),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Content$1, {})
 	});
 };
 //#endregion
-//#region src/components/ProfitAndLossSummaryCard/PnlLegend.tsx
-var Swatch$1 = ({ className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-	className: `Layer__PnlLegend__Swatch ${className}`,
-	"aria-hidden": true
-});
-var PnlLegend = ({ direction = "row" }) => {
-	const { t } = (0, react_i18next.useTranslation)();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Stack, {
-		className: "Layer__PnlLegend",
-		direction,
-		align: "start",
-		gap: direction === "row" ? "md" : "2xs",
-		pis: direction === "column" ? "md" : void 0,
-		pbe: direction === "column" ? "md" : void 0,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
-				gap: "2xs",
-				align: "center",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch$1, { className: "Layer__PnlLegend__Swatch--income" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Span, {
-					size: "sm",
-					children: t("common:label.revenue", "Revenue")
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
-				gap: "2xs",
-				align: "center",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch$1, { className: "Layer__PnlLegend__Swatch--expenses" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Span, {
-					size: "sm",
-					children: t("common:label.expenses", "Expenses")
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
-				gap: "2xs",
-				align: "center",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Swatch$1, { className: "Layer__PnlLegend__Swatch--uncategorized" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Span, {
-					size: "sm",
-					children: t("common:label.uncategorized", "Uncategorized")
-				})]
-			})
-		]
-	});
-};
-//#endregion
 //#region src/components/ProfitAndLossSummaryCard/ProfitAndLossSummaryCard.tsx
 var ProfitAndLossSummaryCard = ({ interactionProps, stringOverrides, className }) => {
 	const { t } = (0, react_i18next.useTranslation)();
@@ -47235,33 +47262,39 @@ var getOnboardingBannerState = ({ isLoading, hasLinkedAccounts, hasSavedTaxProfi
 var NoBankAccountsLinkedBanner = () => {
 	const { addConnection } = (0, react.useContext)(LinkedAccountsContext);
 	const { isMobile } = useSizeClass();
+	const { t } = (0, react_i18next.useTranslation)();
 	const handleLinkBankAccounts = (0, react.useCallback)(() => {
 		addConnection("PLAID");
 	}, [addConnection]);
+	const Icon = isMobile ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { size: 16 });
+	const title = t("linkedAccounts:label.link_your_bank_accounts", "Link your bank accounts");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Banner, {
-		title: "Link your bank accounts",
-		description: "Linking your bank accounts allows us to load your bank transactions and automatically categorize them.",
+		title,
+		description: t("linkedAccounts:label.link_your_bank_accounts_description", "Linking your bank accounts allows us to load your bank transactions and automatically categorize them."),
 		slots: {
-			Icon: isMobile ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { size: 16 }),
+			Icon,
 			Button: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button$1, {
 				onPress: handleLinkBankAccounts,
 				variant: "outlined-light",
-				children: "Link your bank accounts"
+				children: title
 			})
 		}
 	});
 };
 var NoTaxProfileBanner = ({ onSetupTaxProfile }) => {
 	const { isMobile } = useSizeClass();
+	const { t } = (0, react_i18next.useTranslation)();
+	const Icon = isMobile ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { size: 16 });
+	const title = t("linkedAccounts:label.setup_your_tax_profile", "Set up your tax profile");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Banner, {
-		title: "Set up your tax profile",
-		description: "Configuring your tax profile allows us to provide you with tax estimates and avoid any surprises come tax time.",
+		title,
+		description: t("linkedAccounts:label.setup_your_tax_profile_description", "Configuring your tax profile allows us to provide you with tax estimates and avoid any surprises come tax time."),
 		slots: {
-			Icon: isMobile ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, { size: 16 }),
+			Icon,
 			Button: onSetupTaxProfile ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button$1, {
 				onPress: onSetupTaxProfile,
 				variant: "outlined-light",
-				children: "Setup your tax profile"
+				children: title
 			}) : null
 		}
 	});
@@ -47879,7 +47912,8 @@ var TaxEstimatesSummaryCard = ({ mode = TaxEstimatesSummaryCardMode.PieChart, in
 	const slots = useSummaryCardSlots({
 		defaultTitle,
 		interactionProps,
-		stringOverrides
+		stringOverrides,
+		subtitleDateFormat: DateFormat.Year
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SummaryCard, {
 		className: (0, classnames.default)("Layer__TaxEstimatesSummaryCard", isSummaryCardLayout && "Layer__TaxEstimatesSummaryCard--summaryCard"),
@@ -48351,11 +48385,11 @@ var taxDetailsRowFields = {
 var TaxDetailsRowSchema = effect.Schema.Struct(_objectSpread2(_objectSpread2({}, taxDetailsRowFields), {}, { breakdown: effect.Schema.optional(effect.Schema.Array(effect.Schema.suspend(() => TaxDetailsRowSchema))) }));
 var TaxDetailsMetaSchema = effect.Schema.Struct({
 	year: effect.Schema.Number,
+	state: TransformedTaxSummaryStateSchema,
 	filingStatus: (0, effect.pipe)(effect.Schema.propertySignature(effect.Schema.String), effect.Schema.fromKey("filing_status"))
 });
 var TaxDetailsSchema = effect.Schema.Struct({
 	type: effect.Schema.String,
-	state: TransformedTaxSummaryStateSchema,
 	meta: TaxDetailsMetaSchema,
 	rows: effect.Schema.Array(TaxDetailsRowSchema)
 });