@layerfi/components 0.1.129-alpha.1 → 0.1.129

package/dist/cjs/index.cjs

@@ -222,7 +222,7 @@ const getIntlLocale = (locale) => {
 	return isSupportedLocale(locale) ? locale : DEFAULT_LOCALE;
 };
 const name = "@layerfi/components";
-const version$1 = "0.1.129-alpha.1";
+const version$1 = "0.1.129";
 const description = "Layer React Components";
 const main = "dist/cjs/index.cjs";
 const module$1 = "dist/esm/index.mjs";
@@ -393,15 +393,13 @@ var getCustomHeaders = () => ({
 	"Layer-Locale": _locale,
 	"Layer-React-Version": package_default.version
 });
-const get = (url) => (baseUrl, accessToken, options) => () => {
-	return fetch(`${baseUrl}${url((options === null || options === void 0 ? void 0 : options.params) || {})}`, {
-		headers: _objectSpread2({
-			"Authorization": "Bearer " + (accessToken || ""),
-			"Content-Type": "application/json"
-		}, getCustomHeaders()),
-		method: "GET"
-	}).then((res) => handleResponse(res)).catch((error$38) => handleException(error$38));
-};
+const get = (url) => (baseUrl, accessToken, options) => () => fetch(`${baseUrl}${url((options === null || options === void 0 ? void 0 : options.params) || {})}`, {
+	headers: _objectSpread2({
+		"Authorization": "Bearer " + (accessToken || ""),
+		"Content-Type": "application/json"
+	}, getCustomHeaders()),
+	method: "GET"
+}).then((res) => handleResponse(res)).catch((error$38) => handleException(error$38));
 const getText = (url) => (baseUrl, accessToken, options) => () => fetch(`${baseUrl}${url((options === null || options === void 0 ? void 0 : options.params) || {})}`, {
 	headers: _objectSpread2({ Authorization: "Bearer " + (accessToken || "") }, getCustomHeaders()),
 	method: "GET"
@@ -1759,11 +1757,7 @@ var overview_default$1 = {
 	chart_type: chart_type$1,
 	label: label$35
 };
-const action$30 = {
-	"collapse_rows": "Collapse all rows",
-	"expand_rows": "Expand all rows",
-	"search_reports": "Search reports"
-};
+const action$30 = { "search_reports": "Search reports" };
 const empty$22 = {
 	"no_detail_lines_found": "No detail lines found",
 	"no_detail_lines_pnl_item": "There are no detail lines for this profit and loss item",
@@ -1888,20 +1882,12 @@ const error$24 = {
 };
 const label$31 = {
 	"additional_actions": "Additional actions",
-	"additional_state_taxes_estimate_owed": "Additional State Taxes Estimate (Owed)",
-	"adjusted_gross_income": "Adjusted Gross Income",
-	"amount_applied_federal_w2": "Amount Applied from Federal W-2 Withholding",
-	"amount_applied_state_withholding": "Amount Applied from State Withholding",
 	"annual_taxes": "Annual taxes",
 	"annual_w2_income": "Annual W-2 income",
-	"business_income": "Business Income",
-	"business_income_deduction_rate": "Business Income Deduction ({{rate}})",
 	"business_income_taxes": "Business Income Taxes",
 	"business_income_taxes_projected": "Projected Business Income Taxes",
 	"calculated_from_categorized_transactions": "Calculated based on your categorized transactions and tracked mileage",
 	"categorization_incomplete": "Categorization incomplete",
-	"deductible_expenses": "Deductible Expenses",
-	"deductible_mileage_expenses": "Deductible Mileage Expenses",
 	"deductions": "Deductions",
 	"due": "Due",
 	"due_with_date": "Due: {{date}}",
@@ -1910,26 +1896,15 @@ const label$31 = {
 	"estimated_taxes": "Estimated taxes",
 	"estimates": "Estimates",
 	"federal": "Federal",
-	"federal_deductions": "Federal Deductions",
 	"federal_state_tax_payments": "Federal and state tax payments for the selected tax year",
 	"federal_state_tax_payments_projected": "Projected federal and state tax payments for the selected tax year",
-	"federal_tax": "Federal Tax",
-	"federal_tax_estimate_owed": "Federal Tax Estimate (Owed)",
 	"federal_tax_information": "Federal Tax Information",
-	"federal_tax_rate": "Federal Tax Rate",
-	"federal_taxes": "Federal Taxes",
-	"federal_taxes_projected": "Projected Federal Taxes",
 	"filing_status": "Filing status",
 	"full_year_projection": "Full year projection",
 	"head_household": "Head of household",
 	"home_office_area_sq": "Home office area (sq ft)",
-	"home_office_deduction": "Home Office Deduction",
 	"married_filing_jointly": "Married filing jointly",
 	"married_filing_separately": "Married filing separately",
-	"medicare_surtax_estimate_owed": "Medicare Surtax Estimate (Owed)",
-	"medicare_surtax_rate": "Medicare Surtax Rate",
-	"medicare_tax_estimate_owed": "Medicare Tax Estimate (Owed)",
-	"medicare_tax_rate": "Medicare Tax Rate",
 	"overtime_income": "Overtime income",
 	"owed_quarter": "Owed This Quarter",
 	"paid": "Paid",
@@ -1939,59 +1914,33 @@ const label$31 = {
 	"q2": "Q2",
 	"q3": "Q3",
 	"q4": "Q4",
-	"qualified_overtime_deduction": "Qualified Overtime Deduction",
-	"qualified_tip_deduction": "Qualified Tip Deduction",
 	"qualifying_widow_er": "Qualifying widow(er)",
 	"quarter": "Quarter",
 	"quarter_taxes": "{{quarterLabel}} taxes",
 	"remaining_balance": "Remaining Balance",
 	"rolled_over_from_previous_quarter": "Rolled Over From Previous Quarter",
-	"self_employment_deduction": "Self-Employment Deduction",
 	"single": "Single",
-	"social_security_tax_estimate_owed": "Social Security Tax Estimate (Owed)",
-	"social_security_tax_rate": "Social Security Tax Rate",
 	"state": "State",
-	"state_adjusted_gross_income": "State Adjusted Gross Income",
-	"state_deductions": "State Deductions",
-	"state_income_tax_estimate_owed": "State Income Tax Estimate (Owed)",
-	"state_tax": "State Tax",
-	"state_tax_rate": "State Tax Rate",
-	"state_taxable_income": "State Taxable Income",
-	"tax_estimate_view": "Tax estimate view",
-	"tax_information": "State Tax Information",
-	"tax_name_estimate_owed": "{{taxName}} Estimate (Owed)",
-	"tax_name_rate": "{{taxName}} Rate",
 	"tax_details": "Tax Details",
 	"tax_details_amount": "Amount",
 	"tax_details_label": "Label",
+	"tax_estimate_view": "Tax estimate view",
+	"tax_information": "State Tax Information",
 	"tax_payments": "Tax Payments",
 	"tax_payments_projected": "Projected Tax Payments",
 	"tax_profile": "Tax Profile",
 	"tax_profile_saved": "Tax profile saved",
 	"tax_summary": "Tax Summary",
-	"taxable_amount_tax_name": "Taxable Amount for {{taxName}}",
-	"taxable_business_income": "Taxable Business Income",
-	"taxable_business_income_projected": "Projected Taxable Business Income",
-	"taxable_income": "Taxable Income",
 	"taxable_income_estimate_to_date_for_year": "Taxable income estimate to date for year {{year}}",
 	"taxable_income_estimate_to_date_for_year_projected": "Taxable income projection for year {{year}}",
 	"taxable_income_for_year": "Taxable income for {{year}}",
 	"taxable_income_for_year_projected": "Projected taxable income for {{year}}",
-	"taxable_medicare_income": "Taxable Medicare Income",
-	"taxable_medicare_surtax_income": "Taxable Medicare Surtax Income",
-	"taxable_social_security_income": "Taxable Social Security Income",
-	"taxes_by_state_name": "State Taxes ({{stateName}})",
-	"taxes_by_state_name_projected": "Projected State Taxes ({{stateName}})",
-	"taxes_due": "Taxes Due",
 	"taxes_due_at": "Taxes due on {{date}}",
 	"taxes_owed": "Taxes Owed",
 	"taxes_owed_projected": "Projected Taxes Owed",
 	"taxes_paid": "Taxes Paid",
 	"tip_income": "Tip income",
-	"total_deductions": "Total Deductions",
-	"total_federal_tax_estimate": "Total Federal Tax Estimate",
 	"total_paid": "Total Paid",
-	"total_state_tax_estimate": "Total State Tax Estimate",
 	"uncategorized_transactions_one": "{{count}} uncategorized transaction",
 	"uncategorized_transactions_other": "{{count}} uncategorized transactions",
 	"uncategorized_transactions_with_year_one": "{{count}} uncategorized transaction ({{year}})",
@@ -1999,7 +1948,6 @@ const label$31 = {
 	"use_custom_withholding": "Use custom withholding?",
 	"use_simplified_home_office": "Use simplified home office deduction?",
 	"use_standard_mileage_deduction": "Use standard mileage deduction?",
-	"w2_income": "W-2 Income",
 	"withholding_amount": "Withholding amount",
 	"year_to_date": "Year to date",
 	"your_tax_deadlines": "Your tax deadlines"
@@ -2798,7 +2746,7 @@ const label$19 = {
 	"equities": "Capitaux propres",
 	"expenses": "Dépenses",
 	"gross_profit": "Bénéfice brut",
-	"hide_details": "",
+	"hide_details": "Masquer les détails",
 	"id": "ID",
 	"keep_editing": "Continuer à modifier",
 	"liabilities": "Passifs",
@@ -2825,7 +2773,7 @@ const label$19 = {
 	"row": "Ligne",
 	"savings": "Compte d’épargne",
 	"select_all": "Tout sélectionner",
-	"show_details": "",
+	"show_details": "Afficher les détails",
 	"source": "Source",
 	"status": "Statut",
 	"tax_estimates": "Estimations fiscales",
@@ -3363,11 +3311,7 @@ var overview_default = {
 	chart_type,
 	label: label$10
 };
-const action$8 = {
-	"collapse_rows": "Réduire toutes les lignes",
-	"expand_rows": "Afficher toutes les lignes",
-	"search_reports": "Rechercher des rapports"
-};
+const action$8 = { "search_reports": "Rechercher des rapports" };
 const empty$6 = {
 	"no_detail_lines_found": "Aucune ligne de détail trouvée",
 	"no_detail_lines_pnl_item": "Il n’y a aucune ligne de détail pour cet élément de l’état des résultats",
@@ -3470,8 +3414,8 @@ const disclaimer = {
 	"content": "L’outil d’estimation des impôts et le contenu connexe sont fournis à titre informatif seulement et ne constituent pas des conseils juridiques, comptables ou fiscaux, ni un substitut à l’avis d’un professionnel. Nous ne sommes pas un planificateur financier ni un conseiller fiscal, et les utilisateurs assument l’entière responsabilité de leurs obligations fiscales, de l’exactitude des données et du respect des lois. Tous les calculs sont des estimations et peuvent contenir des erreurs. Ils reposent uniquement sur les renseignements que vous nous fournissez."
 };
 const empty$4 = {
-	"no_tax_details": "",
-	"no_tax_details_description": "",
+	"no_tax_details": "Aucun détail fiscal",
+	"no_tax_details_description": "Aucun détail fiscal trouvé",
 	"no_tax_payments_to_display": "Il n’y a aucun paiement d’impôt à afficher.",
 	"tax_payments": "Aucun paiement d’impôt trouvé"
 };
@@ -3479,33 +3423,25 @@ const error$5 = {
 	"disclaimer_required": "Vous devez reconnaître l’avis de non-responsabilité pour continuer.",
 	"feature_not_enabled": "Les estimations d'impôt ne sont pas activées.",
 	"load_tax_deadlines": "Impossible de charger vos échéances fiscales",
-	"load_tax_details": "",
+	"load_tax_details": "Impossible de charger vos détails fiscaux",
 	"load_tax_estimates": "Nous n’avons pas pu charger vos estimations fiscales",
 	"load_tax_estimates_summary": "Nous n’avons pas pu charger votre sommaire fiscal",
 	"load_tax_information": "Impossible de charger les renseignements fiscaux",
 	"load_tax_payments": "Nous n’avons pas pu charger vos paiements d’impôt",
 	"retrieve_tax_profile": "Nous n’avons pas pu récupérer votre profil fiscal. Veuillez vérifier votre connexion et réessayer.",
-	"while_loading_tax_details": "",
+	"while_loading_tax_details": "Une erreur s’est produite lors du chargement de vos détails fiscaux. Veuillez vérifier votre connexion et réessayer.",
 	"while_loading_tax_estimates": "Une erreur s’est produite lors du chargement de vos estimations d’impôt. Veuillez vérifier votre connexion et réessayer.",
 	"while_loading_tax_payments": "Une erreur s’est produite lors du chargement de vos paiements d’impôt. Veuillez vérifier votre connexion et réessayer.",
 	"while_loading_tax_summary": "Une erreur s’est produite lors du chargement de votre sommaire fiscal. Veuillez vérifier votre connexion et réessayer."
 };
 const label$6 = {
 	"additional_actions": "Actions supplémentaires",
-	"additional_state_taxes_estimate_owed": "Estimation des impôts d’État supplémentaires (à payer)",
-	"adjusted_gross_income": "Revenu brut ajusté",
-	"amount_applied_federal_w2": "Montant appliqué de la retenue fédérale du formulaire W-2",
-	"amount_applied_state_withholding": "Montant appliqué de la retenue d'impôt de l'État",
 	"annual_taxes": "Impôts annuels",
 	"annual_w2_income": "Revenu annuel indiqué sur le formulaire W-2",
-	"business_income": "Revenu d’entreprise",
-	"business_income_deduction_rate": "Déduction pour revenu d’entreprise ({{rate}})",
 	"business_income_taxes": "Impôts sur le revenu d’entreprise",
 	"business_income_taxes_projected": "Impôts projetés sur le revenu d’entreprise",
 	"calculated_from_categorized_transactions": "Calculé en fonction de vos opérations catégorisées et de votre kilométrage suivi",
 	"categorization_incomplete": "Catégorisation incomplète",
-	"deductible_expenses": "Dépenses déductibles",
-	"deductible_mileage_expenses": "Frais de kilométrage déductibles",
 	"deductions": "Déductions",
 	"due": "Échéance",
 	"due_with_date": "Échéance : {{date}}",
@@ -3514,26 +3450,15 @@ const label$6 = {
 	"estimated_taxes": "Impôts estimés",
 	"estimates": "Estimations",
 	"federal": "Fédéral",
-	"federal_deductions": "Déductions fédérales",
 	"federal_state_tax_payments": "Paiements d’impôt fédéral et d’État pour l’année d’imposition sélectionnée",
 	"federal_state_tax_payments_projected": "Paiements d’impôt fédéral et d’État projetés pour l’année d’imposition sélectionnée",
-	"federal_tax": "Impôt fédéral",
-	"federal_tax_estimate_owed": "Estimation de l’impôt fédéral (à payer)",
 	"federal_tax_information": "Renseignements sur l’impôt fédéral",
-	"federal_tax_rate": "Taux d’imposition fédéral",
-	"federal_taxes": "Impôts fédéraux",
-	"federal_taxes_projected": "Impôts fédéraux projetés",
 	"filing_status": "Statut de déclaration",
 	"full_year_projection": "Projection annuelle",
 	"head_household": "Chef de famille",
 	"home_office_area_sq": "Superficie du bureau à domicile (pi²)",
-	"home_office_deduction": "Déduction pour bureau à domicile",
 	"married_filing_jointly": "Marié(e), déclaration conjointe",
 	"married_filing_separately": "Marié(e), déclaration séparée",
-	"medicare_surtax_estimate_owed": "Estimation de la surtaxe Medicare (à payer)",
-	"medicare_surtax_rate": "Taux de la surtaxe Medicare",
-	"medicare_tax_estimate_owed": "Estimation de la taxe Medicare (à payer)",
-	"medicare_tax_rate": "Taux de la taxe Medicare",
 	"overtime_income": "Revenu d’heures supplémentaires",
 	"owed_quarter": "À payer ce trimestre",
 	"paid": "Payé",
@@ -3543,59 +3468,33 @@ const label$6 = {
 	"q2": "T2",
 	"q3": "T3",
 	"q4": "T4",
-	"qualified_overtime_deduction": "Déduction admissible pour heures supplémentaires",
-	"qualified_tip_deduction": "Déduction admissible pour pourboires",
 	"qualifying_widow_er": "Veuf(ve) admissible",
 	"quarter": "Trimestre",
 	"quarter_taxes": "Impôts du {{quarterLabel}}",
 	"remaining_balance": "Solde restant",
 	"rolled_over_from_previous_quarter": "Reporté du trimestre précédent",
-	"self_employment_deduction": "Déduction pour travail autonome",
 	"single": "Célibataire",
-	"social_security_tax_estimate_owed": "Estimation de la taxe de sécurité sociale (à payer)",
-	"social_security_tax_rate": "Taux de la taxe de sécurité sociale",
 	"state": "État",
-	"state_adjusted_gross_income": "Revenu brut ajusté de l’État",
-	"state_deductions": "Déductions d’État",
-	"state_income_tax_estimate_owed": "Estimation de l’impôt sur le revenu de l’État (à payer)",
-	"state_tax": "Impôt d’État",
-	"state_tax_rate": "Taux d’imposition de l’État",
-	"state_taxable_income": "Revenu imposable de l’État",
+	"tax_details": "Détails fiscaux",
+	"tax_details_amount": "Montant",
+	"tax_details_label": "Libellé",
 	"tax_estimate_view": "Vue des estimations fiscales",
 	"tax_information": "Renseignements sur l'impôt d'État",
-	"tax_name_estimate_owed": "Estimation de {{taxName}} (à payer)",
-	"tax_name_rate": "Taux de {{taxName}}",
-	"tax_details": "",
-	"tax_details_amount": "",
-	"tax_details_label": "",
 	"tax_payments": "Paiements d’impôt",
 	"tax_payments_projected": "Paiements d’impôt projetés",
 	"tax_profile": "Profil fiscal",
 	"tax_profile_saved": "Profil fiscal enregistré",
 	"tax_summary": "Sommaire fiscal",
-	"taxable_amount_tax_name": "Montant imposable pour {{taxName}}",
-	"taxable_business_income": "Revenu d’entreprise imposable",
-	"taxable_business_income_projected": "Revenu d’entreprise imposable projeté",
-	"taxable_income": "Revenu imposable",
 	"taxable_income_estimate_to_date_for_year": "Estimation du revenu imposable à ce jour pour l’année {{year}}",
 	"taxable_income_estimate_to_date_for_year_projected": "Projection du revenu imposable pour l’année {{year}}",
 	"taxable_income_for_year": "Revenu imposable pour {{year}}",
 	"taxable_income_for_year_projected": "Revenu imposable projeté pour {{year}}",
-	"taxable_medicare_income": "Revenu Medicare imposable",
-	"taxable_medicare_surtax_income": "Revenu imposable pour la surtaxe Medicare",
-	"taxable_social_security_income": "Revenu imposable de la Sécurité Sociale",
-	"taxes_by_state_name": "Impôts d’État ({{stateName}})",
-	"taxes_by_state_name_projected": "Impôts d’État projetés ({{stateName}})",
-	"taxes_due": "Impôts à payer",
-	"taxes_due_at": "",
+	"taxes_due_at": "Taxes à payer le {{date}}",
 	"taxes_owed": "Impôts dus",
 	"taxes_owed_projected": "Impôts dus projetés",
 	"taxes_paid": "Impôts payés",
 	"tip_income": "Revenu de pourboires",
-	"total_deductions": "",
-	"total_federal_tax_estimate": "Estimation totale de l’impôt fédéral",
 	"total_paid": "Total payé",
-	"total_state_tax_estimate": "Estimation totale de l’impôt d’État",
 	"uncategorized_transactions_one": "{{count}} transaction non catégorisée",
 	"uncategorized_transactions_other": "{{count}} transactions non catégorisées",
 	"uncategorized_transactions_with_year_one": "{{count}} transaction non catégorisée ({{year}})",
@@ -3603,7 +3502,6 @@ const label$6 = {
 	"use_custom_withholding": "Utiliser une retenue personnalisée?",
 	"use_simplified_home_office": "Utiliser la déduction simplifiée pour bureau à domicile?",
 	"use_standard_mileage_deduction": "Utiliser la déduction forfaitaire kilométrique?",
-	"w2_income": "Revenu W-2",
 	"withholding_amount": "Montant de la retenue",
 	"year_to_date": "Cumul annuel",
 	"your_tax_deadlines": "Vos échéances fiscales"
@@ -14809,6 +14707,7 @@ let ReportControl = /* @__PURE__ */ function(ReportControl$1) {
 	ReportControl$1["Date"] = "date";
 	ReportControl$1["DateRange"] = "date_range";
 	ReportControl$1["GroupBy"] = "group_by";
+	ReportControl$1["Year"] = "year";
 	ReportControl$1["Unknown"] = "unknown";
 	return ReportControl$1;
 }({});
@@ -20612,6 +20511,29 @@ const CategorizationRulesMobileList = ({ data, isLoading, isError, paginationPro
 		})
 	});
 };
+function useHorizontalOverflow(elementRef, options = { dependencies: [] }) {
+	const { dependencies: dependencies$1 = [] } = options;
+	const [hasHorizontalOverflow, setHasHorizontalOverflow] = (0, react.useState)(false);
+	const updateHorizontalOverflow = (0, react.useCallback)(() => {
+		const element = elementRef.current;
+		if (!element) return;
+		setHasHorizontalOverflow(Math.ceil(element.scrollWidth) > Math.ceil(element.clientWidth));
+	}, [elementRef, ...dependencies$1]);
+	(0, __react_hook_resize_observer.default)(elementRef, updateHorizontalOverflow);
+	(0, react.useEffect)(() => {
+		var _elementRef$current;
+		const element = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.firstElementChild;
+		if (!element) return;
+		const observer = new ResizeObserver(() => updateHorizontalOverflow());
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [elementRef, updateHorizontalOverflow]);
+	(0, react.useEffect)(() => {
+		const id = requestAnimationFrame(() => updateHorizontalOverflow());
+		return () => cancelAnimationFrame(id);
+	}, [updateHorizontalOverflow]);
+	return hasHorizontalOverflow;
+}
 var WIDTH_CHANGE_THRESHOLD_PX = .5;
 var getLeafHeaderCells = (header) => {
 	const leafRow = header === null || header === void 0 ? void 0 : header.lastElementChild;
@@ -20657,9 +20579,43 @@ const useColumnPinningStyles = (headerGroups) => {
 		pinningStyles: (0, react.useMemo)(() => computePinningStyles(headerGroups, headerWidths), [headerGroups, headerWidths])
 	};
 };
+const DEFAULT_SKELETON_COLUMNS = 3;
+const DataTableHeaderSkeleton = ({ nonAria, numColumns = 3 }) => {
+	const resolvedNumColumns = numColumns > 0 ? numColumns : 3;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+		nonAria,
+		children: Array.from({ length: resolvedNumColumns }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Column, {
+			nonAria,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonLoader, {
+				width: index === 0 ? "60%" : "40%",
+				height: "12px"
+			})
+		}, `loading-header-${index}`))
+	});
+};
+const DataTableSkeleton = ({ numColumns, nonAria }) => {
+	const resolvedNumColumns = numColumns > 0 ? numColumns : 3;
+	const loadingColumns = (0, react.useMemo)(() => Array.from({ length: resolvedNumColumns }, (_, index) => ({ index })), [resolvedNumColumns]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: Array.from({ length: 6 }).map((_, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+		nonAria,
+		children: loadingColumns.map((column) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Cell$3, {
+				className: "Layer__skeleton-loader__row",
+				nonAria,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonLoader, {
+					width: `${100 - (column.index === 0 && rowIndex >= 3 ? (rowIndex - 2) * 10 : 0)}%`,
+					height: "20px"
+				})
+			}, `loading-${rowIndex}-${column.index}`);
+		})
+	}, `loading-${rowIndex}`)) });
+};
 const DataTable = ({ isLoading, isError, componentName, ariaLabel, slots, dependencies: dependencies$1, data, headerGroups, numColumns, withClickableRow }) => {
-	const nonAria = headerGroups.length > 1;
+	const scrollContainerRef = (0, react.useRef)(null);
+	const nonAria = headerGroups.length > 1 || numColumns === 0;
 	const { EmptyState: EmptyState$8, ErrorState: ErrorState$9 } = slots;
+	const hasHorizontalOverflow = useHorizontalOverflow(scrollContainerRef, { dependencies: [data, numColumns] });
+	const showLoadingFallbackHeaders = isLoading && numColumns === 0;
 	const { headerRef, pinningStyles } = useColumnPinningStyles(headerGroups);
 	const isEmptyTable = (data === null || data === void 0 ? void 0 : data.length) === 0;
 	const renderTableBody = (0, react.useMemo)(() => {
@@ -20673,15 +20629,9 @@ const DataTable = ({ isLoading, isError, componentName, ariaLabel, slots, depend
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorState$9, {})
 			})
 		});
-		if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
-			className: "Layer__DataTable__EmptyState__Row",
-			nonAria,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Cell$3, {
-				className: "Layer__DataTable__EmptyState__Cell",
-				colSpan: numColumns,
-				nonAria,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Loader, {})
-			})
+		if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableSkeleton, {
+			numColumns,
+			nonAria
 		});
 		if (isEmptyTable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 			className: "Layer__DataTable__EmptyState__Row",
@@ -20728,7 +20678,8 @@ const DataTable = ({ isLoading, isError, componentName, ariaLabel, slots, depend
 		pinningStyles
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "Layer__UI__Table-ScrollContainer",
+		ref: scrollContainerRef,
+		className: (0, classnames.default)("Layer__UI__Table-ScrollContainer", hasHorizontalOverflow && "Layer__UI__Table-ScrollContainer--has-horizontal-overflow"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table$1, {
 			"aria-label": ariaLabel,
 			className: `Layer__UI__Table__${componentName}`,
@@ -20736,7 +20687,10 @@ const DataTable = ({ isLoading, isError, componentName, ariaLabel, slots, depend
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHeader, {
 				ref: headerRef,
 				nonAria,
-				children: headerGroups.map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
+				children: showLoadingFallbackHeaders ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableHeaderSkeleton, {
+					nonAria,
+					numColumns: 3
+				}) : headerGroups.map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Row, {
 					nonAria,
 					children: headerGroup.headers.map((header) => {
 						var _header$column$column, _header$column$column2;
@@ -20757,7 +20711,7 @@ const DataTable = ({ isLoading, isError, componentName, ariaLabel, slots, depend
 				nonAria,
 				children: renderTableBody
 			})]
-		})
+		}, `${componentName}-cols-${numColumns}`)
 	});
 };
 function PaginatedTable({ data, isLoading, isError, columnConfig, componentName, ariaLabel, paginationProps, slots }) {
@@ -28650,13 +28604,6 @@ const LEDGER_ACCOUNT_TYPES_CONFIG = [
 	_objectSpread2({ value: "REVENUE" }, translationKey("common:label.revenue", "Revenue")),
 	_objectSpread2({ value: "EXPENSE" }, translationKey("common:label.expenses", "Expenses"))
 ];
-const DEFAULT_ACCOUNT_TYPE_DIRECTION = {
-	ASSET: Direction.DEBIT,
-	LIABILITY: Direction.CREDIT,
-	EQUITY: Direction.CREDIT,
-	REVENUE: Direction.CREDIT,
-	EXPENSE: Direction.DEBIT
-};
 const NORMALITY_CONFIG = [_objectSpread2({ value: Direction.DEBIT }, translationKey("common:label.debit", "Debit")), _objectSpread2({ value: Direction.CREDIT }, translationKey("common:label.credit", "Credit"))];
 const ASSET_LEDGER_ACCOUNT_SUBTYPES_CONFIG = [
 	_objectSpread2({ value: "BANK_ACCOUNTS" }, translationKey("chartOfAccounts:label.bank_accounts", "Bank Accounts")),
@@ -29216,134 +29163,6 @@ const ChartOfAccountsContext = (0, react.createContext)({
 	changeFormData: () => {},
 	submitForm: () => {}
 });
-var _excluded$22 = ["size"];
-var Plus$8 = (_ref) => {
-	let { size = 14 } = _ref;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", _objectSpread2(_objectSpread2({
-		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 14 14",
-		fill: "none"
-	}, _objectWithoutProperties(_ref, _excluded$22)), {}, {
-		width: size,
-		height: size,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			d: "M7 2.91602V11.0827",
-			stroke: "currentColor",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			d: "M2.91669 7H11.0834",
-			stroke: "currentColor",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		})]
-	}));
-};
-var Plus_default = Plus$8;
-var Collapse = (_ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", _objectSpread2(_objectSpread2({
-		xmlns: "http://www.w3.org/2000/svg",
-		width: "14",
-		height: "22",
-		viewBox: "0 0 14 22",
-		fill: "none"
-	}, _extends({}, (_objectDestructuringEmpty(_ref), _ref))), {}, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-		d: "M3.5 5.25L7 8.75L10.5 5.25",
-		stroke: "currentColor",
-		strokeLinecap: "round",
-		strokeLinejoin: "round"
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-		d: "M3.5 16.75L7 13.25L10.5 16.75",
-		stroke: "currentColor",
-		strokeLinecap: "round",
-		strokeLinejoin: "round"
-	})] }));
-};
-var Collapse_default = Collapse;
-var Expand = (_ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", _objectSpread2(_objectSpread2({
-		xmlns: "http://www.w3.org/2000/svg",
-		width: "14",
-		height: "22",
-		viewBox: "0 0 14 22",
-		fill: "none"
-	}, _extends({}, (_objectDestructuringEmpty(_ref), _ref))), {}, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-		d: "M10.5 8.75L7 5.25L3.5 8.75",
-		stroke: "currentColor",
-		strokeLinecap: "round",
-		strokeLinejoin: "round"
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-		d: "M3.5 13.25L7 16.75L10.5 13.25",
-		stroke: "currentColor",
-		strokeLinecap: "round",
-		strokeLinejoin: "round"
-	})] }));
-};
-var Expand_default = Expand;
-const ExpandCollapseButton = ({ onClick, expanded, className, iconOnly, variant }) => {
-	const { t } = (0, react_i18next.useTranslation)();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button$1, {
-		onClick: () => onClick(!expanded),
-		variant: variant ? variant : ButtonVariant.secondary,
-		className: (0, classnames.default)(iconOnly ? "Layer__expand-collapse-all-rows-btn--sm" : "Layer__expand-collapse-all-rows-btn", className),
-		rightIcon: !iconOnly ? null : expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapse_default, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Expand_default, {}),
-		iconAsPrimary: iconOnly,
-		iconOnly,
-		children: iconOnly ? null : !expanded ? t("reports:action.expand_rows", "Expand all rows") : t("reports:action.collapse_rows", "Collapse all rows")
-	}) });
-};
-var getLedgerAccountBalancesCSV = get(({ businessId }) => `/v1/businesses/${businessId}/ledger/balances/exports/csv`);
-function buildKey$51({ access_token: accessToken, apiUrl, businessId, startCutoff, endCutoff }) {
-	if (accessToken && apiUrl) return {
-		accessToken,
-		apiUrl,
-		businessId,
-		startCutoff,
-		endCutoff,
-		tags: [
-			"#account-balances",
-			"#exports",
-			"#csv"
-		]
-	};
-}
-function useAccountBalancesDownload({ startCutoff, endCutoff, onSuccess }) {
-	const withLocale = useLocalizedKey();
-	const { data: auth } = useAuth();
-	const { businessId } = useLayerContext();
-	return (0, swr_mutation.default)(() => withLocale(buildKey$51(_objectSpread2(_objectSpread2({}, auth), {}, {
-		businessId,
-		startCutoff,
-		endCutoff
-	}))), ({ accessToken, apiUrl, businessId: businessId$1, startCutoff: startCutoff$1, endCutoff: endCutoff$1 }) => getLedgerAccountBalancesCSV(apiUrl, accessToken, { params: {
-		businessId: businessId$1,
-		startCutoff: startCutoff$1 === null || startCutoff$1 === void 0 ? void 0 : startCutoff$1.toISOString(),
-		endCutoff: endCutoff$1 === null || endCutoff$1 === void 0 ? void 0 : endCutoff$1.toISOString()
-	} })().then(({ data }) => {
-		if (onSuccess) return onSuccess(data);
-	}), {
-		revalidate: false,
-		throwOnError: false
-	});
-}
-function AccountBalancesDownloadButton({ startCutoff, endCutoff, iconOnly }) {
-	const { t } = (0, react_i18next.useTranslation)();
-	const { invisibleDownloadRef, triggerInvisibleDownload } = useInvisibleDownload();
-	const { trigger, isMutating, error: error$38 } = useAccountBalancesDownload({
-		startCutoff,
-		endCutoff,
-		onSuccess: ({ presignedUrl }) => triggerInvisibleDownload({ url: presignedUrl })
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DownloadButton, {
-		iconOnly,
-		onClick: () => {
-			trigger();
-		},
-		isDownloading: isMutating,
-		requestFailed: Boolean(error$38),
-		text: t("common:action.download_csv", "Download CSV")
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InvisibleDownload_default, { ref: invisibleDownloadRef })] });
-}
 const useParentOptions = (data) => (0, react.useMemo)(() => flattenAccounts$1((data === null || data === void 0 ? void 0 : data.accounts) || []).sort((a, b) => (a === null || a === void 0 ? void 0 : a.name) && (b === null || b === void 0 ? void 0 : b.name) ? a.name.localeCompare(b.name) : 0).map((x) => {
 	return {
 		label: x.name,
@@ -29534,23 +29353,20 @@ const ChartOfAccountsForm = ({ stringOverrides }) => {
 		]
 	});
 };
-const ChartOfAccountsSidebar = ({ parentRef: _parentRef, stringOverrides }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartOfAccountsForm, { stringOverrides });
-};
 let LedgerAccountNodeType = /* @__PURE__ */ function(LedgerAccountNodeType$1) {
 	LedgerAccountNodeType$1["Leaf"] = "Leaf";
 	LedgerAccountNodeType$1["Root"] = "Root";
 	LedgerAccountNodeType$1["Parent"] = "Parent";
 	return LedgerAccountNodeType$1;
 }({});
-var _excluded$21 = ["size"];
+var _excluded$22 = ["size"];
 var Edit2 = (_ref) => {
 	let { size = 18 } = _ref;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", _objectSpread2(_objectSpread2({
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 18 18",
 		fill: "none"
-	}, _objectWithoutProperties(_ref, _excluded$21)), {}, {
+	}, _objectWithoutProperties(_ref, _excluded$22)), {}, {
 		width: size,
 		height: size,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
@@ -29585,6 +29401,20 @@ const filterAccounts = (accounts, query, formatCurrencyFromCents$1) => {
 		return [];
 	});
 };
+const getRowId$2 = (row) => row.accountId;
+const getInitialExpandedState = (accounts) => {
+	const expandedState = {};
+	if (!accounts) return expandedState;
+	const collectExpanded = (nestedAccounts, depth) => {
+		for (const account of nestedAccounts) {
+			if (!(account.subAccounts.length > 0)) continue;
+			if (depth === 0 || account.isMatching) expandedState[getRowId$2(account)] = true;
+			collectExpanded(account.subAccounts, depth + 1);
+		}
+	};
+	collectExpanded(accounts, 0);
+	return expandedState;
+};
 var skippedChars = ["$", ","];
 const getMatchedTextIndices = ({ text, query, isMatching }) => {
 	if (!query || !isMatching) return null;
@@ -29610,6 +29440,122 @@ const getMatchedTextIndices = ({ text, query, isMatching }) => {
 		endIdx: matchEndIdx
 	};
 };
+var defaultContextValue = {
+	expanded: {},
+	setExpanded: () => {}
+};
+const ExpandableDataTableContext = (0, react.createContext)(defaultContextValue);
+function ExpandableDataTableProvider({ children }) {
+	const [expanded, setExpanded] = (0, react.useState)({});
+	const value = (0, react.useMemo)(() => ({
+		expanded,
+		setExpanded
+	}), [expanded]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandableDataTableContext.Provider, {
+		value,
+		children
+	});
+}
+var baseClassName = "Layer__ExpandButton";
+const ExpandButton = ({ isExpanded }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownFill_default, {
+		className: (0, classnames.default)(baseClassName, `${baseClassName}--${isExpanded ? "expanded" : "collapsed"}`),
+		size: 16,
+		"aria-label": isExpanded ? "Collapse row" : "Expand row"
+	});
+};
+var INDENT_SIZE_XS = 10;
+var INDENT_SIZE_SM = 20;
+var INDENT_SIZE_MD = 40;
+var CHEVRON_OFFSET_PX = 4;
+var getRowIndentStyle = ({ depth, canExpand, indentSizePx }) => ({
+	paddingInlineStart: depth * indentSizePx + (canExpand ? 0 : CHEVRON_OFFSET_PX),
+	overflow: "hidden"
+});
+var EMPTY_ARRAY$2 = [];
+function ExpandableDataTable({ data, isLoading, isError, columnConfig, componentName, ariaLabel, slots, getSubRows: getSubRows$4, getRowId: getRowId$3, indentSize = "sm" }) {
+	const { expanded, setExpanded } = (0, react.useContext)(ExpandableDataTableContext);
+	const wrappedColumnConfig = (0, react.useMemo)(() => {
+		const indentSizePx = indentSize === "xs" ? INDENT_SIZE_XS : indentSize === "md" ? INDENT_SIZE_MD : INDENT_SIZE_SM;
+		const [first, ...rest] = columnConfig;
+		if (!first || !isLeafColumn(first)) return columnConfig;
+		const cellRenderer = first.cell;
+		return [_objectSpread2(_objectSpread2({}, first), {}, { cell: (row) => {
+			const canExpand = row.getCanExpand();
+			const rowIndentStyle = getRowIndentStyle({
+				canExpand,
+				depth: row.depth,
+				indentSizePx
+			});
+			if (!canExpand) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: rowIndentStyle,
+				children: cellRenderer(row)
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: rowIndentStyle,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
+					align: "center",
+					gap: "xs",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandButton, { isExpanded: row.getIsExpanded() }), cellRenderer(row)]
+				})
+			});
+		} }), ...rest];
+	}, [columnConfig, indentSize]);
+	const columnDefs = getColumnDefs(wrappedColumnConfig);
+	const columnPinning = (0, react.useMemo)(() => getColumnPinning(wrappedColumnConfig), [wrappedColumnConfig]);
+	const table$1 = (0, __tanstack_react_table.useReactTable)({
+		data: data !== null && data !== void 0 ? data : EMPTY_ARRAY$2,
+		columns: columnDefs,
+		getSubRows: getSubRows$4,
+		getCoreRowModel: (0, __tanstack_react_table.getCoreRowModel)(),
+		getExpandedRowModel: (0, __tanstack_react_table.getExpandedRowModel)(),
+		state: {
+			expanded,
+			columnPinning
+		},
+		onExpandedChange: setExpanded,
+		autoResetPageIndex: false,
+		getRowId: getRowId$3
+	});
+	const { rows } = table$1.getExpandedRowModel();
+	const dependencies$1 = (0, react.useMemo)(() => [expanded], [expanded]);
+	const headerGroups = table$1.getHeaderGroups();
+	const numColumns = table$1.getVisibleLeafColumns().length;
+	const isRowClickable = (0, react.useCallback)((row) => {
+		return row.getCanExpand();
+	}, []);
+	const onRowClick = (0, react.useCallback)((row) => {
+		row.toggleExpanded();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTable, {
+		ariaLabel,
+		numColumns,
+		data: rows,
+		isLoading,
+		isError,
+		componentName,
+		slots,
+		dependencies: dependencies$1,
+		headerGroups,
+		withClickableRow: (0, react.useMemo)(() => ({
+			onRowClick,
+			isRowClickable
+		}), [onRowClick, isRowClickable])
+	});
+}
+var ChartOfAccountsColumn = /* @__PURE__ */ function(ChartOfAccountsColumn$1) {
+	ChartOfAccountsColumn$1["AccountNumber"] = "AccountNumber";
+	ChartOfAccountsColumn$1["Name"] = "Name";
+	ChartOfAccountsColumn$1["Type"] = "Type";
+	ChartOfAccountsColumn$1["Subtype"] = "Subtype";
+	ChartOfAccountsColumn$1["Balance"] = "Balance";
+	ChartOfAccountsColumn$1["Actions"] = "Actions";
+	return ChartOfAccountsColumn$1;
+}(ChartOfAccountsColumn || {});
+var COMPONENT_NAME$8 = "chart-of-accounts";
+var getSubRows$3 = (row) => {
+	return row.subAccounts.length > 0 ? asMutable(row.subAccounts) : void 0;
+};
 var highlightMatch = ({ text, query, isMatching }) => {
 	const matchedTextIndices = getMatchedTextIndices({
 		text,
@@ -29633,41 +29579,36 @@ var highlightMatch = ({ text, query, isMatching }) => {
 		]
 	});
 };
-const ChartOfAccountsTable = ({ view, stringOverrides, data, searchQuery, expandAll, templateAccountsEditable = true }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartOfAccountsTableContent, {
-	view,
-	data,
-	searchQuery,
-	stringOverrides,
-	expandAll,
-	templateAccountsEditable
-}) });
-const ChartOfAccountsTableContent = ({ stringOverrides, data, searchQuery, expandAll, templateAccountsEditable }) => {
+var ChartOfAccountsEmptyState = () => {
+	const { t } = (0, react_i18next.useTranslation)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataState, {
+		status: DataStateStatus.info,
+		title: t("chartOfAccounts:empty.accounts", "No accounts found"),
+		description: t("chartOfAccounts:empty.accounts_match_filters", "No accounts match the current filters. Click \"Add Account\" to create a new one."),
+		spacing: true
+	});
+};
+var ChartOfAccountsErrorState = () => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const { refetch, isValidating, isLoading } = (0, react.useContext)(ChartOfAccountsContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataState, {
+		status: DataStateStatus.failed,
+		title: t("common:error.something_went_wrong", "Something went wrong"),
+		description: t("common:error.couldnt_load_data", "We couldn’t load your data."),
+		onRefresh: () => void refetch(),
+		isLoading: isValidating || isLoading,
+		spacing: true
+	});
+};
+const ChartOfAccountsTable = ({ stringOverrides, searchQuery, templateAccountsEditable = true }) => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const { formatCurrencyFromCents: formatCurrencyFromCents$1 } = useIntlFormatter();
 	const { setSelectedAccount } = (0, react.useContext)(LedgerAccountsContext);
-	const { editAccount, deleteAccount, isError } = (0, react.useContext)(ChartOfAccountsContext);
-	const [toggledKeys, setToggledKeys] = (0, react.useState)({});
+	const { setExpanded } = (0, react.useContext)(ExpandableDataTableContext);
+	const { data, isLoading, isError, editAccount, deleteAccount } = (0, react.useContext)(ChartOfAccountsContext);
 	const [accountToDelete, setAccountToDelete] = (0, react.useState)(null);
 	const { accountingConfiguration } = useLayerContext();
 	const enableAccountNumbers = !!(accountingConfiguration === null || accountingConfiguration === void 0 ? void 0 : accountingConfiguration.enableAccountNumbers);
-	const allRowKeys = (0, react.useMemo)(() => {
-		const keys$1 = [];
-		const collect = (accounts) => {
-			for (const account of accounts) {
-				const key = `coa-row-${account.accountId}`;
-				if (account.subAccounts.length > 0) {
-					keys$1.push(key);
-					collect(account.subAccounts);
-				}
-			}
-		};
-		collect(data.accounts);
-		return keys$1;
-	}, [data.accounts]);
-	(0, react.useEffect)(() => {
-		if (expandAll === void 0) return;
-		setToggledKeys(Object.fromEntries(allRowKeys.map((key) => [key, expandAll === "expanded"])));
-	}, [allRowKeys, expandAll]);
 	const onConfirmDelete = function() {
 		var _ref = _asyncToGenerator(function* () {
 			if (!accountToDelete) return;
@@ -29677,109 +29618,106 @@ const ChartOfAccountsTableContent = ({ stringOverrides, data, searchQuery, expan
 			return _ref.apply(this, arguments);
 		};
 	}();
-	const getDeleteButtonTooltip = (account) => {
+	const getDeleteButtonTooltip = (0, react.useCallback)((account) => {
 		if (account.isDeletable) return;
 		if (account.subAccounts.length > 0) return t("chartOfAccounts:validation.delete_account_has_children", "This account cannot be deleted because it has child accounts");
 		if (account.balance !== 0) return t("chartOfAccounts:validation.delete_account_has_ledger_entries", "This account cannot be deleted because it has ledger entries");
 		return t("chartOfAccounts:validation.delete_account_is_required", "This account cannot be deleted because it is a required account");
-	};
-	(0, react.useEffect)(() => {
-		setToggledKeys({});
-	}, [searchQuery]);
+	}, [t]);
 	const filteredAccounts = (0, react.useMemo)(() => {
+		if (!data) return void 0;
 		if (!searchQuery) return data.accounts;
 		return filterAccounts(asMutable(data.accounts), searchQuery.toLowerCase(), formatCurrencyFromCents$1);
 	}, [
-		data.accounts,
+		data,
 		formatCurrencyFromCents$1,
 		searchQuery
 	]);
-	const renderChartOfAccountsDesktopRow = ({ account, index, depth, searchQuery: searchQuery$1 }) => {
-		var _account$accountType, _account$accountSubty;
-		const rowKey = `coa-row-${account.accountId}`;
-		const hasSubAccounts = !!account.subAccounts && account.subAccounts.length > 0;
-		const nodeType = depth === 0 ? LedgerAccountNodeType.Root : hasSubAccounts ? LedgerAccountNodeType.Parent : LedgerAccountNodeType.Leaf;
-		const manuallyToggled = toggledKeys[rowKey];
-		const isExpanded = !hasSubAccounts || manuallyToggled === true || manuallyToggled !== false && (account.isMatching || depth === 0);
-		const isNonEditable = !templateAccountsEditable && !!account.stableName;
-		const isDeleteDisabled = !account.isDeletable;
-		const onClickRow = (e) => {
-			e.stopPropagation();
-			if (!hasSubAccounts) return;
-			setToggledKeys((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [rowKey]: !isExpanded }));
-		};
-		const onClickAccountName = (e) => {
-			e.stopPropagation();
-			setSelectedAccount(_objectSpread2(_objectSpread2({}, account), {}, { nodeType }));
-		};
-		const onClickEdit = (e) => {
-			e.preventDefault();
-			e.stopPropagation();
-			editAccount(account.accountId);
-		};
-		const onClickView = (e) => {
-			e.preventDefault();
-			e.stopPropagation();
-			setSelectedAccount(_objectSpread2(_objectSpread2({}, account), {}, { nodeType }));
-		};
-		const onClickDelete = (e) => {
-			e.preventDefault();
-			e.stopPropagation();
-			setAccountToDelete(account);
+	(0, react.useLayoutEffect)(() => {
+		setExpanded(getInitialExpandedState(filteredAccounts));
+	}, [filteredAccounts, setExpanded]);
+	const getNodeType = (row) => {
+		if (row.depth === 0) return LedgerAccountNodeType.Root;
+		return row.getCanExpand() ? LedgerAccountNodeType.Parent : LedgerAccountNodeType.Leaf;
+	};
+	const onClickView = (0, react.useCallback)((row, e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setSelectedAccount(_objectSpread2(_objectSpread2({}, row.original), {}, { nodeType: getNodeType(row) }));
+	}, [setSelectedAccount]);
+	const onClickEdit = (0, react.useCallback)((account, e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		editAccount(account.accountId);
+	}, [editAccount]);
+	const onClickDelete = (account, e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setAccountToDelete(account);
+	};
+	const renderHighlightedValue = (0, react.useCallback)((row, text) => {
+		return highlightMatch({
+			text,
+			query: searchQuery,
+			isMatching: row.original.isMatching
+		});
+	}, [searchQuery]);
+	const renderHighlightedNonRootValue = (0, react.useCallback)((row, text) => {
+		if (row.depth === 0) return null;
+		return renderHighlightedValue(row, text);
+	}, [renderHighlightedValue]);
+	const slots = (0, react.useMemo)(() => ({
+		EmptyState: ChartOfAccountsEmptyState,
+		ErrorState: ChartOfAccountsErrorState
+	}), []);
+	const columnConfig = (0, react.useMemo)(() => {
+		const accountNumberColumn = {
+			id: ChartOfAccountsColumn.AccountNumber,
+			header: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.numberColumnHeader) || t("generalLedger:label.account_number", "Account Number"),
+			cell: (row) => renderHighlightedValue(row, row.original.accountNumber || "")
 		};
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableRow, {
-			rowKey: rowKey + "-" + index,
-			expandable: hasSubAccounts,
-			isExpanded,
-			onClick: onClickRow,
-			depth,
-			variant: depth === 0 ? "expandable" : "default",
-			children: [
-				enableAccountNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-					withExpandIcon: hasSubAccounts,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HStack, _objectSpread2(_objectSpread2({}, !hasSubAccounts && { pis: "lg" }), {}, {
-						overflow: "hidden",
-						children: enableAccountNumbers && highlightMatch({
-							text: account.accountNumber || "",
-							query: searchQuery$1,
-							isMatching: account.isMatching
-						})
-					}))
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-					withExpandIcon: hasSubAccounts && !enableAccountNumbers,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HStack, _objectSpread2(_objectSpread2({}, !hasSubAccounts && !enableAccountNumbers ? { pis: "lg" } : {}), {}, {
-						overflow: "hidden",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-							variant: "text",
-							ellipsis: true,
-							onClick: onClickAccountName,
-							children: highlightMatch({
-								text: account.name,
-								query: searchQuery$1,
-								isMatching: account.isMatching
-							})
-						})
-					}))
+		const columns = [
+			{
+				id: ChartOfAccountsColumn.Name,
+				header: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.nameColumnHeader) || t("generalLedger:label.account_name_title_case", "Account Name"),
+				cell: (row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					variant: "text",
+					ellipsis: true,
+					onClick: (e) => onClickView(row, e),
+					children: renderHighlightedValue(row, row.original.name)
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, { children: depth != 0 && highlightMatch({
-					text: ((_account$accountType = account.accountType) === null || _account$accountType === void 0 ? void 0 : _account$accountType.displayName) || "",
-					query: searchQuery$1,
-					isMatching: account.isMatching
-				}) }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, { children: depth != 0 && highlightMatch({
-					text: ((_account$accountSubty = account.accountSubtype) === null || _account$accountSubty === void 0 ? void 0 : _account$accountSubty.displayName) || "",
-					query: searchQuery$1,
-					isMatching: account.isMatching
-				}) }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, { children: highlightMatch({
-					text: formatCurrencyFromCents$1(account.balance),
-					query: searchQuery$1,
-					isMatching: account.isMatching
-				}) }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-					align: TableCellAlign.RIGHT,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
+				isRowHeader: true
+			},
+			{
+				id: ChartOfAccountsColumn.Type,
+				header: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.typeColumnHeader) || t("common:label.type", "Type"),
+				cell: (row) => {
+					var _row$original$account;
+					return renderHighlightedNonRootValue(row, ((_row$original$account = row.original.accountType) === null || _row$original$account === void 0 ? void 0 : _row$original$account.displayName) || "");
+				}
+			},
+			{
+				id: ChartOfAccountsColumn.Subtype,
+				header: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.subtypeColumnHeader) || t("chartOfAccounts:label.sub_type", "Sub-Type"),
+				cell: (row) => {
+					var _row$original$account2;
+					return renderHighlightedNonRootValue(row, ((_row$original$account2 = row.original.accountSubtype) === null || _row$original$account2 === void 0 ? void 0 : _row$original$account2.displayName) || "");
+				}
+			},
+			{
+				id: ChartOfAccountsColumn.Balance,
+				header: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.balanceColumnHeader) || t("common:label.balance", "Balance"),
+				cell: (row) => renderHighlightedValue(row, formatCurrencyFromCents$1(row.original.balance))
+			},
+			{
+				id: ChartOfAccountsColumn.Actions,
+				header: null,
+				alignment: Alignment.Right,
+				cell: (row) => {
+					const account = row.original;
+					const isNonEditable = !templateAccountsEditable && !!account.stableName;
+					const isDeleteDisabled = !account.isDeletable;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
 						className: "Layer__coa__actions",
 						gap: "xs",
 						children: [
@@ -29787,7 +29725,7 @@ const ChartOfAccountsTableContent = ({ stringOverrides, data, searchQuery, expan
 								variant: ButtonVariant.secondary,
 								rightIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.List, { size: 14 }),
 								iconOnly: true,
-								onClick: onClickView,
+								onClick: (e) => onClickView(row, e),
 								children: t("common:action.view_label", "View")
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button$1, {
@@ -29795,7 +29733,7 @@ const ChartOfAccountsTableContent = ({ stringOverrides, data, searchQuery, expan
 								rightIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Edit2_default, { size: 14 }),
 								iconOnly: true,
 								disabled: isNonEditable,
-								onClick: onClickEdit,
+								onClick: (e) => onClickEdit(account, e),
 								tooltip: isNonEditable ? t("chartOfAccounts:validation.account_not_modifiable", "This account cannot be modified") : void 0,
 								children: t("common:action.edit_label", "Edit")
 							}),
@@ -29803,77 +29741,40 @@ const ChartOfAccountsTableContent = ({ stringOverrides, data, searchQuery, expan
 								variant: ButtonVariant.secondary,
 								rightIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Trash2, { size: 14 }),
 								iconOnly: true,
-								onClick: onClickDelete,
+								onClick: (e) => onClickDelete(account, e),
 								disabled: isDeleteDisabled,
 								tooltip: getDeleteButtonTooltip(account),
 								children: t("common:action.delete_label", "Delete")
 							})
 						]
-					})
-				})
-			]
-		}), hasSubAccounts && isExpanded && account.subAccounts.map((subItem, subIdx) => {
-			return renderChartOfAccountsDesktopRow({
-				account: subItem,
-				index: subIdx,
-				depth: depth + 1,
-				searchQuery: searchQuery$1
-			});
-		})] }, rowKey + "-" + index);
-	};
-	if (filteredAccounts.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "Layer__table-state-container",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataState, {
-			status: DataStateStatus.info,
-			title: t("chartOfAccounts:empty.accounts", "No accounts found"),
-			description: t("chartOfAccounts:empty.accounts_match_filters", "No accounts match the current filters. Click \"Add Account\" to create a new one.")
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Table, {
-		componentName: "chart-of-accounts",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("colgroup", { children: [
-				enableAccountNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "Layer__chart-of-accounts--accountnumber" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "Layer__chart-of-accounts--name" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "Layer__chart-of-accounts--type" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "Layer__chart-of-accounts--subtype" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "Layer__chart-of-accounts--balance" }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "Layer__chart-of-accounts--actions" })
-			] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableHead, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TableRow, {
-				isHeadRow: true,
-				rowKey: "charts-of-accounts-head-row",
-				children: [
-					enableAccountNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-						isHeaderCell: true,
-						children: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.numberColumnHeader) || t("generalLedger:label.account_number", "Account Number")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-						isHeaderCell: true,
-						children: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.nameColumnHeader) || t("generalLedger:label.account_name_title_case", "Account Name")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-						isHeaderCell: true,
-						children: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.typeColumnHeader) || t("common:label.type", "Type")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-						isHeaderCell: true,
-						children: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.subtypeColumnHeader) || t("chartOfAccounts:label.sub_type", "Sub-Type")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, {
-						isHeaderCell: true,
-						children: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.balanceColumnHeader) || t("common:label.balance", "Balance")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCell, { isHeaderCell: true })
-				]
-			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBody, { children: !isError && filteredAccounts.map((account, index) => renderChartOfAccountsDesktopRow({
-				account,
-				index,
-				depth: 0,
-				searchQuery
-			})) })
-		]
+					});
+				}
+			}
+		];
+		if (enableAccountNumbers) columns.unshift(accountNumberColumn);
+		return columns;
+	}, [
+		enableAccountNumbers,
+		formatCurrencyFromCents$1,
+		getDeleteButtonTooltip,
+		onClickEdit,
+		onClickView,
+		renderHighlightedNonRootValue,
+		renderHighlightedValue,
+		stringOverrides,
+		t,
+		templateAccountsEditable
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandableDataTable, {
+		componentName: COMPONENT_NAME$8,
+		ariaLabel: t("chartOfAccounts:label.chart_of_accounts", "Chart of Accounts"),
+		columnConfig,
+		data: filteredAccounts ? asMutable(filteredAccounts) : void 0,
+		isLoading,
+		isError,
+		slots,
+		getSubRows: getSubRows$3,
+		getRowId: getRowId$2
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseConfirmationModal, {
 		isOpen: accountToDelete !== null,
 		onOpenChange: (isOpen) => {
@@ -29886,88 +29787,201 @@ const ChartOfAccountsTableContent = ({ stringOverrides, data, searchQuery, expan
 		cancelLabel: t("common:action.cancel_label", "Cancel")
 	})] });
 };
-var COMPONENT_NAME$8 = "chart-of-accounts";
-const ChartOfAccountsTableWithPanel = ({ view, containerRef, asWidget = false, withDateControl = false, withExpandAllButton = false, showAddAccountButton = true, stringOverrides, templateAccountsEditable }) => {
+var _excluded$21 = ["size"];
+var Plus$8 = (_ref) => {
+	let { size = 14 } = _ref;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", _objectSpread2(_objectSpread2({
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 14 14",
+		fill: "none"
+	}, _objectWithoutProperties(_ref, _excluded$21)), {}, {
+		width: size,
+		height: size,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M7 2.91602V11.0827",
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M2.91669 7H11.0834",
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	}));
+};
+var Plus_default = Plus$8;
+var getLedgerAccountBalancesCSV = get(({ businessId }) => `/v1/businesses/${businessId}/ledger/balances/exports/csv`);
+function buildKey$51({ access_token: accessToken, apiUrl, businessId, startCutoff, endCutoff }) {
+	if (accessToken && apiUrl) return {
+		accessToken,
+		apiUrl,
+		businessId,
+		startCutoff,
+		endCutoff,
+		tags: [
+			"#account-balances",
+			"#exports",
+			"#csv"
+		]
+	};
+}
+function useAccountBalancesDownload({ startCutoff, endCutoff, onSuccess }) {
+	const withLocale = useLocalizedKey();
+	const { data: auth } = useAuth();
+	const { businessId } = useLayerContext();
+	return (0, swr_mutation.default)(() => withLocale(buildKey$51(_objectSpread2(_objectSpread2({}, auth), {}, {
+		businessId,
+		startCutoff,
+		endCutoff
+	}))), ({ accessToken, apiUrl, businessId: businessId$1, startCutoff: startCutoff$1, endCutoff: endCutoff$1 }) => getLedgerAccountBalancesCSV(apiUrl, accessToken, { params: {
+		businessId: businessId$1,
+		startCutoff: startCutoff$1 === null || startCutoff$1 === void 0 ? void 0 : startCutoff$1.toISOString(),
+		endCutoff: endCutoff$1 === null || endCutoff$1 === void 0 ? void 0 : endCutoff$1.toISOString()
+	} })().then(({ data }) => {
+		if (onSuccess) return onSuccess(data);
+	}), {
+		revalidate: false,
+		throwOnError: false
+	});
+}
+function AccountBalancesDownloadButton({ startCutoff, endCutoff, iconOnly }) {
+	const { t } = (0, react_i18next.useTranslation)();
+	const { invisibleDownloadRef, triggerInvisibleDownload } = useInvisibleDownload();
+	const { trigger, isMutating, error: error$38 } = useAccountBalancesDownload({
+		startCutoff,
+		endCutoff,
+		onSuccess: ({ presignedUrl }) => triggerInvisibleDownload({ url: presignedUrl })
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DownloadButton, {
+		iconOnly,
+		onClick: () => {
+			trigger();
+		},
+		isDownloading: isMutating,
+		requestFailed: Boolean(error$38),
+		text: t("common:action.download_csv", "Download CSV")
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InvisibleDownload_default, { ref: invisibleDownloadRef })] });
+}
+var Collapse = (_ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", _objectSpread2(_objectSpread2({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "14",
+		height: "22",
+		viewBox: "0 0 14 22",
+		fill: "none"
+	}, _extends({}, (_objectDestructuringEmpty(_ref), _ref))), {}, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M3.5 5.25L7 8.75L10.5 5.25",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M3.5 16.75L7 13.25L10.5 16.75",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})] }));
+};
+var Collapse_default = Collapse;
+var Expand = (_ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", _objectSpread2(_objectSpread2({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "14",
+		height: "22",
+		viewBox: "0 0 14 22",
+		fill: "none"
+	}, _extends({}, (_objectDestructuringEmpty(_ref), _ref))), {}, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M10.5 8.75L7 5.25L3.5 8.75",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M3.5 13.25L7 16.75L10.5 13.25",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})] }));
+};
+var Expand_default = Expand;
+const ExpandableDataTableToggleButton = () => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const { expanded, setExpanded } = (0, react.useContext)(ExpandableDataTableContext);
+	const { isDesktop } = useSizeClass();
+	const shouldCollapse = expanded === true;
+	const onClickExpandOrCollapse = (0, react.useCallback)(() => {
+		if (shouldCollapse) setExpanded({});
+		else setExpanded(true);
+	}, [setExpanded, shouldCollapse]);
+	const buttonText = shouldCollapse ? t("common:action.collapse_all", "Collapse All") : t("common:action.expand_all", "Expand All");
+	const Icon = shouldCollapse ? Collapse_default : Expand_default;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+		icon: !isDesktop,
+		variant: "outlined",
+		onClick: onClickExpandOrCollapse,
+		"aria-label": !isDesktop ? buttonText : void 0,
+		children: !isDesktop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {}) : buttonText
+	});
+};
+const ChartOfAccountsTableHeader = ({ asWidget, withDateControl, withExpandAllButton, showAddAccountButton, inputValue, onSearchChange, stringOverrides }) => {
 	const { t } = (0, react_i18next.useTranslation)();
-	const { data, isLoading, addAccount, isError, isValidating, refetch, form } = (0, react.useContext)(ChartOfAccountsContext);
-	const [expandAll, setExpandAll] = (0, react.useState)();
+	const { addAccount } = (0, react.useContext)(ChartOfAccountsContext);
+	const { isDesktop } = useSizeClass();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header$1, {
+		asHeader: true,
+		rounded: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderCol, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading$1, {
+			size: asWidget ? HeadingSize.view : HeadingSize.primary,
+			children: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.headerText) || t("chartOfAccounts:label.chart_of_accounts", "Chart of Accounts")
+		}) }) })
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header$1, {
+		sticky: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeaderRow, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderCol, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading$1, {
+			size: HeadingSize.secondary,
+			children: withDateControl || withExpandAllButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
+				align: "center",
+				gap: "xs",
+				children: [withDateControl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalMonthPicker, {}), withExpandAllButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandableDataTableToggleButton, {})]
+			}) : null
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeaderCol, {
+			className: "Layer__chart-of-accounts__actions",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchField, {
+					label: t("chartOfAccounts:label.search_accounts", "Search accounts"),
+					value: inputValue,
+					onChange: onSearchChange
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountBalancesDownloadButton, { iconOnly: !isDesktop }),
+				showAddAccountButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button$1, {
+					onClick: () => addAccount(),
+					iconOnly: !isDesktop,
+					leftIcon: !isDesktop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus_default, { size: 14 }),
+					children: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.addAccountButtonText) || t("chartOfAccounts:action.add_account", "Add Account")
+				})
+			]
+		})] })
+	})] });
+};
+const ChartOfAccountsTableWithPanel = ({ containerRef, asWidget = false, withDateControl = false, withExpandAllButton = false, showAddAccountButton = true, stringOverrides, templateAccountsEditable }) => {
+	const { form } = (0, react.useContext)(ChartOfAccountsContext);
 	const { inputValue, searchQuery, handleInputChange } = useDebouncedSearchInput({ initialInputState: "" });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Panel, {
-		sidebar: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartOfAccountsSidebar, {
-			parentRef: containerRef,
-			stringOverrides: stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.chartOfAccountsForm
-		}),
-		sidebarIsOpen: Boolean(form),
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandableDataTableProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Panel, {
+		sidebar: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartOfAccountsForm, { stringOverrides: stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.chartOfAccountsForm }),
+		sidebarIsOpen: !!form,
 		parentRef: containerRef,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header$1, {
-				className: `Layer__${COMPONENT_NAME$8}__header`,
-				asHeader: true,
-				rounded: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderCol, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading$1, {
-					className: `Layer__${COMPONENT_NAME$8}__title`,
-					size: asWidget ? HeadingSize.view : HeadingSize.primary,
-					children: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.headerText) || t("chartOfAccounts:label.chart_of_accounts", "Chart of Accounts")
-				}) }) })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Header$1, {
-				className: `Layer__${COMPONENT_NAME$8}__header`,
-				sticky: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeaderRow, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderCol, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading$1, {
-					size: HeadingSize.secondary,
-					className: `Layer__${COMPONENT_NAME$8}__subtitle`,
-					children: withDateControl || withExpandAllButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
-						align: "center",
-						gap: "xs",
-						children: [withDateControl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalMonthPicker, {}), withExpandAllButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandCollapseButton, {
-							iconOnly: view === "mobile",
-							onClick: () => setExpandAll(!expandAll || expandAll === "collapsed" ? "expanded" : "collapsed"),
-							expanded: !(!expandAll || expandAll === "collapsed"),
-							variant: ButtonVariant.secondary
-						})]
-					}) : null
-				}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeaderCol, {
-					className: "Layer__chart-of-accounts__actions",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchField, {
-							label: t("chartOfAccounts:label.search_accounts", "Search accounts"),
-							value: inputValue,
-							onChange: handleInputChange
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountBalancesDownloadButton, { iconOnly: ["mobile", "tablet"].includes(view) }),
-						showAddAccountButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button$1, {
-							onClick: () => addAccount(),
-							iconOnly: ["mobile", "tablet"].includes(view),
-							leftIcon: ["mobile", "tablet"].includes(view) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus_default, { size: 14 }),
-							children: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.addAccountButtonText) || t("chartOfAccounts:action.add_account", "Add Account")
-						})
-					]
-				})] })
-			}),
-			data && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartOfAccountsTable, {
-				view,
-				data,
-				searchQuery,
-				stringOverrides,
-				expandAll,
-				templateAccountsEditable
-			}),
-			isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "Layer__table-state-container",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataState, {
-					status: DataStateStatus.failed,
-					title: t("common:error.something_went_wrong", "Something went wrong"),
-					description: t("common:error.couldnt_load_data", "We couldn’t load your data."),
-					onRefresh: () => void refetch(),
-					isLoading: isValidating || isLoading
-				})
-			}) : null,
-			(!data || isLoading) && !isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: `Layer__${COMPONENT_NAME$8}__loader-container`,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Loader, {})
-			}) : null
-		]
-	});
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartOfAccountsTableHeader, {
+			asWidget,
+			withDateControl,
+			withExpandAllButton,
+			showAddAccountButton,
+			inputValue,
+			onSearchChange: handleInputChange,
+			stringOverrides
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartOfAccountsTable, {
+			searchQuery,
+			stringOverrides,
+			templateAccountsEditable
+		})]
+	}) });
 };
 const LedgerAccountRow = ({ row, index, view, nodeType }) => {
 	var _ledgerEntrySource$di3, _row$account$name3, _row$account3;
@@ -30326,7 +30340,6 @@ var ChartOfAccountsContent = ({ asWidget, withDateControl, withExpandAllButton,
 			asWidget,
 			withDateControl,
 			withExpandAllButton,
-			view,
 			containerRef,
 			showAddAccountButton,
 			stringOverrides: stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.chartOfAccountsTable,
@@ -31055,10 +31068,10 @@ const JournalEntryLineItem = ({ form, index, displayIndex, isReadOnly, onDeleteL
 		})
 	});
 };
-var EMPTY_ARRAY$2 = [];
+var EMPTY_ARRAY$1 = [];
 const JournalEntryLineItemsTable = ({ form, isReadOnly, title, direction, showTags = false }) => {
 	const { t } = (0, react_i18next.useTranslation)();
-	const lineItems = (0, __tanstack_react_form.useStore)(form.store, (state$16) => state$16.values.lineItems || EMPTY_ARRAY$2);
+	const lineItems = (0, __tanstack_react_form.useStore)(form.store, (state$16) => state$16.values.lineItems || EMPTY_ARRAY$1);
 	const filteredIndices = (0, react.useMemo)(() => {
 		const indices = [];
 		lineItems.forEach((item, index) => {
@@ -39439,18 +39452,20 @@ function useUnifiedReportParams() {
 	const dateSelectionMode = useUnifiedReportDateSelectionMode();
 	const { date: effectiveDate } = useGlobalDate({ dateSelectionMode });
 	const { startDate, endDate } = useGlobalDateRange({ dateSelectionMode });
+	const { startDate: yearStartDate } = useGlobalDateRange({ dateSelectionMode: "year" });
 	return (0, react.useMemo)(() => {
 		if (!report) return null;
-		return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({ route: report.reportRoute }, report.baseQueryParameters), hasControl(report, ReportControl.Date) && { effectiveDate }), hasControl(report, ReportControl.DateRange) && {
+		return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({ route: report.reportRoute }, report.baseQueryParameters), hasControl(report, ReportControl.Date) && { effectiveDate }), hasControl(report, ReportControl.DateRange) && {
 			startDate,
 			endDate
-		}), hasControl(report, ReportControl.GroupBy) && groupBy != null && { groupBy });
+		}), hasControl(report, ReportControl.GroupBy) && groupBy != null && { groupBy }), hasControl(report, ReportControl.Year) && { year: (0, date_fns.getYear)(yearStartDate) });
 	}, [
 		effectiveDate,
 		endDate,
 		groupBy,
 		report,
-		startDate
+		startDate,
+		yearStartDate
 	]);
 }
 var findDefaultReport = (groups) => {
@@ -39506,22 +39521,6 @@ function UnifiedReportStoreProvider({ children, dateSelectionMode = "full" }) {
 		children
 	});
 }
-var defaultContextValue = {
-	expanded: {},
-	setExpanded: () => {}
-};
-const ExpandableDataTableContext = (0, react.createContext)(defaultContextValue);
-function ExpandableDataTableProvider({ children }) {
-	const [expanded, setExpanded] = (0, react.useState)({});
-	const value = (0, react.useMemo)(() => ({
-		expanded,
-		setExpanded
-	}), [expanded]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandableDataTableContext.Provider, {
-		value,
-		children
-	});
-}
 var _excluded$8 = ["children", "className"], _excluded2$3 = ["children"], _excluded3 = ["children"];
 var TREE_CLASS_NAME = "Layer__UI__Tree";
 var TREE_ITEM_CLASS_NAME = "Layer__UI__TreeItem";
@@ -39594,11 +39593,7 @@ var renderTreeGroup = ({ group, groupConfig: groupConfig$1, onToggle, renderItem
 var renderTreeLeaf = ({ leaf, leafConfig }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeItem, {
 	id: leafConfig.getId(leaf),
 	textValue: leafConfig.getTextValue(leaf),
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeItemContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
-		align: "center",
-		justify: "space-between",
-		children: [leafConfig.renderLabel(leaf), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check_default, { className: "Layer__TreeNavigation__Check" })]
-	}) })
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeItemContent, { children: leafConfig.renderLabel(leaf) })
 });
 function TreeNavigation({ items, selectedItem, isGroup: isGroup$1, groupConfig: groupConfig$1, leafConfig, ariaLabel }) {
 	const { t } = (0, react_i18next.useTranslation)();
@@ -39733,25 +39728,6 @@ function ReportsNavigation() {
 		}
 	});
 }
-const ExpandableDataTableToggleButton = () => {
-	const { t } = (0, react_i18next.useTranslation)();
-	const { expanded, setExpanded } = (0, react.useContext)(ExpandableDataTableContext);
-	const { isDesktop } = useSizeClass();
-	const shouldCollapse = expanded === true;
-	const onClickExpandOrCollapse = (0, react.useCallback)(() => {
-		if (shouldCollapse) setExpanded({});
-		else setExpanded(true);
-	}, [setExpanded, shouldCollapse]);
-	const buttonText = shouldCollapse ? t("common:action.collapse_all", "Collapse All") : t("common:action.expand_all", "Expand All");
-	const Icon = shouldCollapse ? Collapse_default : Expand_default;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-		icon: !isDesktop,
-		variant: "outlined",
-		onClick: onClickExpandOrCollapse,
-		"aria-label": !isDesktop ? buttonText : void 0,
-		children: !isDesktop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {}) : buttonText
-	});
-};
 var ReportComboBoxOption = class extends BaseComboBoxOption {
 	constructor(report) {
 		super(report);
@@ -39917,90 +39893,6 @@ function useUnifiedReport() {
 		return getUnifiedReport(apiUrl$1, accessToken, { params: _objectSpread2({ businessId: businessId$1 }, restParams) })().then(({ data }) => effect.Schema.decodeUnknownPromise(UnifiedReportSchema)(data));
 	}));
 }
-var baseClassName = "Layer__ExpandButton";
-const ExpandButton = ({ isExpanded }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownFill_default, {
-		className: (0, classnames.default)(baseClassName, `${baseClassName}--${isExpanded ? "expanded" : "collapsed"}`),
-		size: 16,
-		"aria-label": isExpanded ? "Collapse row" : "Expand row"
-	});
-};
-var INDENT_SIZE_XS = 10;
-var INDENT_SIZE_SM = 20;
-var INDENT_SIZE_MD = 40;
-var CHEVRON_OFFSET_PX = 4;
-var getRowIndentStyle = ({ depth, canExpand, indentSizePx }) => ({ paddingInlineStart: depth * indentSizePx + (canExpand ? 0 : CHEVRON_OFFSET_PX) });
-var EMPTY_ARRAY$1 = [];
-function ExpandableDataTable({ data, isLoading, isError, columnConfig, componentName, ariaLabel, slots, getSubRows: getSubRows$3, getRowId: getRowId$2, indentSize = "sm" }) {
-	const { expanded, setExpanded } = (0, react.useContext)(ExpandableDataTableContext);
-	const wrappedColumnConfig = (0, react.useMemo)(() => {
-		const indentSizePx = indentSize === "xs" ? INDENT_SIZE_XS : indentSize === "md" ? INDENT_SIZE_MD : INDENT_SIZE_SM;
-		const [first, ...rest] = columnConfig;
-		if (!first || !isLeafColumn(first)) return columnConfig;
-		const cellRenderer = first.cell;
-		return [_objectSpread2(_objectSpread2({}, first), {}, { cell: (row) => {
-			const canExpand = row.getCanExpand();
-			const rowIndentStyle = getRowIndentStyle({
-				canExpand,
-				depth: row.depth,
-				indentSizePx
-			});
-			if (!canExpand) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style: rowIndentStyle,
-				children: cellRenderer(row)
-			});
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style: rowIndentStyle,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
-					align: "center",
-					gap: "xs",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandButton, { isExpanded: row.getIsExpanded() }), cellRenderer(row)]
-				})
-			});
-		} }), ...rest];
-	}, [columnConfig, indentSize]);
-	const columnDefs = getColumnDefs(wrappedColumnConfig);
-	const columnPinning = (0, react.useMemo)(() => getColumnPinning(wrappedColumnConfig), [wrappedColumnConfig]);
-	const table$1 = (0, __tanstack_react_table.useReactTable)({
-		data: data !== null && data !== void 0 ? data : EMPTY_ARRAY$1,
-		columns: columnDefs,
-		getSubRows: getSubRows$3,
-		getCoreRowModel: (0, __tanstack_react_table.getCoreRowModel)(),
-		getExpandedRowModel: (0, __tanstack_react_table.getExpandedRowModel)(),
-		state: {
-			expanded,
-			columnPinning
-		},
-		onExpandedChange: setExpanded,
-		autoResetPageIndex: false,
-		getRowId: getRowId$2
-	});
-	const { rows } = table$1.getExpandedRowModel();
-	const dependencies$1 = (0, react.useMemo)(() => [expanded], [expanded]);
-	const headerGroups = table$1.getHeaderGroups();
-	const numColumns = table$1.getVisibleLeafColumns().length;
-	const isRowClickable = (0, react.useCallback)((row) => {
-		return row.getCanExpand();
-	}, []);
-	const onRowClick = (0, react.useCallback)((row) => {
-		row.toggleExpanded();
-	}, []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTable, {
-		ariaLabel,
-		numColumns,
-		data: rows,
-		isLoading,
-		isError,
-		componentName,
-		slots,
-		dependencies: dependencies$1,
-		headerGroups,
-		withClickableRow: (0, react.useMemo)(() => ({
-			onRowClick,
-			isRowClickable
-		}), [onRowClick, isRowClickable])
-	});
-}
 var _excluded$5 = [
 	"durationMinutes",
 	"className",
@@ -40134,8 +40026,8 @@ const UnifiedReportTable = () => {
 	const UnifiedReportEmptyState = (0, react.useCallback)(() => {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataState, {
 			status: DataStateStatus.allDone,
-			title: t("reports:empty.no_rows_found", "No rows found"),
-			description: t("reports:empty.report_has_no_rows", "This report has no rows."),
+			title: t("reports:empty.no_rows_found", "No line items found"),
+			description: t("reports:empty.report_has_no_rows", "This report has no line items."),
 			spacing: true
 		});
 	}, [t]);
@@ -40163,6 +40055,63 @@ const UnifiedReportTable = () => {
 		getRowId: (row) => row.rowKey
 	});
 };
+const YearPicker = ({ label: label$50, year, onChange, minDate = null, maxDate = null, isDisabled = false }) => {
+	var _minDate$year, _maxDate$year;
+	const { t } = (0, react_i18next.useTranslation)();
+	const { formatDate: formatDate$1 } = useIntlFormatter();
+	const coercedLabel = label$50 !== null && label$50 !== void 0 ? label$50 : t("date:label.year", "Year");
+	const minYear = (_minDate$year = minDate === null || minDate === void 0 ? void 0 : minDate.year) !== null && _minDate$year !== void 0 ? _minDate$year : null;
+	const maxYear = (_maxDate$year = maxDate === null || maxDate === void 0 ? void 0 : maxDate.year) !== null && _maxDate$year !== void 0 ? _maxDate$year : null;
+	const yearOptions = (0, react.useMemo)(() => {
+		const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+		const effectiveMinYear = minYear !== null && minYear !== void 0 ? minYear : currentYear - 10;
+		const effectiveMaxYear = maxYear !== null && maxYear !== void 0 ? maxYear : currentYear;
+		const count = effectiveMaxYear - effectiveMinYear + 1;
+		if (count <= 0) return [];
+		return Array.from({ length: count }, (_, i) => {
+			const optionYear = effectiveMaxYear - i;
+			return {
+				label: formatDate$1(new Date(optionYear, 0, 1), DateFormat.Year),
+				value: String(optionYear)
+			};
+		});
+	}, [
+		formatDate$1,
+		minYear,
+		maxYear
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComboBox, {
+		selectedValue: (0, react.useMemo)(() => {
+			var _yearOptions$find;
+			return (_yearOptions$find = yearOptions.find((opt) => opt.value === String(year))) !== null && _yearOptions$find !== void 0 ? _yearOptions$find : yearOptions[0];
+		}, [yearOptions, year]),
+		onSelectedValueChange: (0, react.useCallback)((option) => {
+			if (option) onChange(Number(option.value));
+		}, [onChange]),
+		options: yearOptions,
+		isSearchable: false,
+		isClearable: false,
+		isDisabled,
+		"aria-label": coercedLabel,
+		className: "Layer__YearPicker"
+	});
+};
+const GlobalYearPicker = () => {
+	const { minDate, maxDate } = useGlobalDatePickerBounds();
+	const { setYear } = useGlobalDateRangeActions();
+	const { startDate } = useGlobalDateRange({ dateSelectionMode: "year" });
+	const selectedYear = (0, date_fns.getYear)(startDate);
+	const minDateZdt = (0, react.useMemo)(() => minDate ? convertDateToZonedDateTime(minDate) : null, [minDate]);
+	const maxDateZdt = (0, react.useMemo)(() => convertDateToZonedDateTime(maxDate), [maxDate]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(YearPicker, {
+		year: selectedYear,
+		onChange: (0, react.useCallback)((year) => {
+			setYear({ startDate: new Date(year, 0, 1) });
+		}, [setYear]),
+		minDate: minDateZdt,
+		maxDate: maxDateZdt
+	});
+};
 var SMALL_BREAKPOINT$1 = 560;
 var MEDIUM_BREAKPOINT$1 = 760;
 var getVariantForWidth = (width) => {
@@ -40194,39 +40143,43 @@ const UnifiedReportControls = () => {
 	});
 	const variant = getVariantForWidth(size);
 	const hasGroupBy = dateSelectionMode === "full" && hasControl(baseReport, ReportControl.GroupBy);
+	const hasYear = hasControl(baseReport, ReportControl.Year);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Stack, {
 		ref: containerRef,
 		direction: variant === "large" ? "row" : "column",
 		pb: "md",
 		pi: "lg",
 		gap: "xs",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportDateSelection, { isCompact: variant === "small" }), hasGroupBy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportDateSelection, { isCompact: variant === "small" }), (hasYear || hasGroupBy) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "Layer__UnifiedReport__AdditionalControls",
 			"data-variant": variant,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateGroupByComboBox, {
+			children: [hasYear && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalYearPicker, {}), hasGroupBy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateGroupByComboBox, {
 				value: groupBy,
 				onValueChange: setGroupBy
-			})
+			})]
 		})]
 	});
 };
 const UnifiedReportBaseHeader = () => {
 	const { baseReport } = useBaseUnifiedReport();
 	const { isDesktop } = useSizeClass();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(VStack, { children: [isDesktop && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
-		pi: "lg",
-		pbs: "lg",
-		align: "center",
-		justify: "space-between",
-		children: [baseReport ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Span, {
-			size: "lg",
-			weight: "bold",
-			children: baseReport.displayName
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonLoader, {
-			width: "192px",
-			height: "24px"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportHeaderButtons, {})]
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportControls, {})] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(VStack, {
+		className: "Layer__UnifiedReport__BaseHeader",
+		children: [isDesktop && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
+			pi: "lg",
+			pbs: "lg",
+			align: "center",
+			justify: "space-between",
+			children: [baseReport ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Span, {
+				size: "lg",
+				weight: "bold",
+				children: baseReport.displayName
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonLoader, {
+				width: "192px",
+				height: "24px"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportHeaderButtons, {})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportControls, {})]
+	});
 };
 var _excluded$4 = [
 	"children",
@@ -40347,14 +40300,17 @@ var UnifiedReportContent = () => {
 		title: t("reports:label.reports", "Reports"),
 		viewClassName: "Layer__UnifiedReport",
 		header,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, { children: [isDesktop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VStack, {
-			className: "Layer__UnifiedReport__Sidebar",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReportsNavigation, {})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(VStack, {
-			fluid: true,
-			className: "Layer__UnifiedReport__Content",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportTableHeader, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportTable, {})]
-		})] })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
+			className: "Layer__UnifiedReport__Body",
+			children: [isDesktop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VStack, {
+				className: "Layer__UnifiedReport__Sidebar",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReportsNavigation, {})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(VStack, {
+				fluid: true,
+				className: "Layer__UnifiedReport__Content",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportTableHeader, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnifiedReportTable, {})]
+			})]
+		})
 	});
 };
 const UnifiedReport = ({ dateSelectionMode }) => {
@@ -41055,63 +41011,6 @@ const GeneralLedgerView = ({ title, showTitle = true, showTags = true, showCusto
 		})
 	});
 };
-const YearPicker = ({ label: label$50, year, onChange, minDate = null, maxDate = null, isDisabled = false }) => {
-	var _minDate$year, _maxDate$year;
-	const { t } = (0, react_i18next.useTranslation)();
-	const { formatDate: formatDate$1 } = useIntlFormatter();
-	const coercedLabel = label$50 !== null && label$50 !== void 0 ? label$50 : t("date:label.year", "Year");
-	const minYear = (_minDate$year = minDate === null || minDate === void 0 ? void 0 : minDate.year) !== null && _minDate$year !== void 0 ? _minDate$year : null;
-	const maxYear = (_maxDate$year = maxDate === null || maxDate === void 0 ? void 0 : maxDate.year) !== null && _maxDate$year !== void 0 ? _maxDate$year : null;
-	const yearOptions = (0, react.useMemo)(() => {
-		const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-		const effectiveMinYear = minYear !== null && minYear !== void 0 ? minYear : currentYear - 10;
-		const effectiveMaxYear = maxYear !== null && maxYear !== void 0 ? maxYear : currentYear;
-		const count = effectiveMaxYear - effectiveMinYear + 1;
-		if (count <= 0) return [];
-		return Array.from({ length: count }, (_, i) => {
-			const optionYear = effectiveMaxYear - i;
-			return {
-				label: formatDate$1(new Date(optionYear, 0, 1), DateFormat.Year),
-				value: String(optionYear)
-			};
-		});
-	}, [
-		formatDate$1,
-		minYear,
-		maxYear
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComboBox, {
-		selectedValue: (0, react.useMemo)(() => {
-			var _yearOptions$find;
-			return (_yearOptions$find = yearOptions.find((opt) => opt.value === String(year))) !== null && _yearOptions$find !== void 0 ? _yearOptions$find : yearOptions[0];
-		}, [yearOptions, year]),
-		onSelectedValueChange: (0, react.useCallback)((option) => {
-			if (option) onChange(Number(option.value));
-		}, [onChange]),
-		options: yearOptions,
-		isSearchable: false,
-		isClearable: false,
-		isDisabled,
-		"aria-label": coercedLabel,
-		className: "Layer__YearPicker"
-	});
-};
-const GlobalYearPicker = () => {
-	const { minDate, maxDate } = useGlobalDatePickerBounds();
-	const { setYear } = useGlobalDateRangeActions();
-	const { startDate } = useGlobalDateRange({ dateSelectionMode: "year" });
-	const selectedYear = (0, date_fns.getYear)(startDate);
-	const minDateZdt = (0, react.useMemo)(() => minDate ? convertDateToZonedDateTime(minDate) : null, [minDate]);
-	const maxDateZdt = (0, react.useMemo)(() => convertDateToZonedDateTime(maxDate), [maxDate]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(YearPicker, {
-		year: selectedYear,
-		onChange: (0, react.useCallback)((year) => {
-			setYear({ startDate: new Date(year, 0, 1) });
-		}, [setYear]),
-		minDate: minDateZdt,
-		maxDate: maxDateZdt
-	});
-};
 var MileageDeductionChartTooltipContent = ({ active, payload }) => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const { formatNumber: formatNumber$1 } = useIntlFormatter();