@layerfi/components 0.1.103 → 0.1.104-alpha

package/dist/cjs/index.cjs

@@ -5602,7 +5602,7 @@ var import_react12 = require("react");
 var import_react10 = require("react");
 
 // package.json
-var version = "0.1.103";
+var version = "0.1.104-alpha";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -5787,9 +5787,9 @@ var getBankTransactions = get(
     businessId,
     cursor,
     categorized,
-    descriptionFilter,
     direction,
     limit,
+    query,
     startDate,
     endDate,
     sortBy = "date",
@@ -5799,8 +5799,8 @@ var getBankTransactions = get(
     const parameters = toDefinedSearchParameters({
       cursor,
       categorized,
-      descriptionFilter,
       direction,
+      q: query,
       startDate,
       endDate,
       sortBy,
@@ -5819,8 +5819,8 @@ var matchBankTransaction = put(
 var getBankTransactionsExcel = get(({
   businessId,
   categorized,
-  descriptionFilter,
   direction,
+  query,
   startDate,
   endDate,
   sortBy = "date",
@@ -5828,8 +5828,8 @@ var getBankTransactionsExcel = get(({
 }) => {
   const parameters = toDefinedSearchParameters({
     categorized,
-    descriptionFilter,
     direction,
+    q: query,
     startDate,
     endDate,
     sortBy,
@@ -8047,8 +8047,8 @@ function keyLoader(previousPageData, {
   apiUrl,
   businessId,
   categorized,
-  descriptionFilter,
   direction,
+  query,
   startDate,
   endDate,
   tagFilterQueryString
@@ -8060,8 +8060,8 @@ function keyLoader(previousPageData, {
       businessId,
       categorized,
       cursor: previousPageData ? previousPageData.meta.pagination.cursor : void 0,
-      descriptionFilter,
       direction,
+      query,
       startDate,
       endDate,
       tagFilterQueryString,
@@ -8071,8 +8071,8 @@ function keyLoader(previousPageData, {
 }
 function useBankTransactions({
   categorized,
-  descriptionFilter,
   direction,
+  query,
   startDate,
   endDate,
   tagFilterQueryString
@@ -8085,8 +8085,8 @@ function useBankTransactions({
       __spreadProps(__spreadValues({}, data), {
         businessId,
         categorized,
-        descriptionFilter,
         direction,
+        query,
         startDate,
         endDate,
         tagFilterQueryString
@@ -8099,7 +8099,7 @@ function useBankTransactions({
       categorized: categorized2,
       cursor,
       direction: direction2,
-      descriptionFilter: descriptionFilter2,
+      query: query2,
       startDate: startDate2,
       endDate: endDate2,
       tagFilterQueryString: tagFilterQueryString2
@@ -8112,9 +8112,9 @@ function useBankTransactions({
             businessId: businessId2,
             categorized: categorized2,
             cursor,
-            limit: 200,
-            descriptionFilter: descriptionFilter2,
             direction: direction2,
+            limit: 200,
+            query: query2,
             startDate: startDate2,
             endDate: endDate2,
             tagFilterQueryString: tagFilterQueryString2
@@ -8423,8 +8423,8 @@ function bankTransactionFiltersToHookOptions(filters) {
   var _a, _b, _c;
   return {
     categorized: (filters == null ? void 0 : filters.categorizationStatus) ? filters.categorizationStatus !== "all" /* all */ ? filters.categorizationStatus === "categorized" /* categorized */ : void 0 : void 0,
-    descriptionFilter: filters == null ? void 0 : filters.descriptionFilter,
     direction: ((_a = filters == null ? void 0 : filters.direction) == null ? void 0 : _a.length) === 1 ? filters.direction[0] === "CREDIT" /* CREDIT */ ? "INFLOW" : "OUTFLOW" : void 0,
+    query: filters == null ? void 0 : filters.query,
     startDate: (_b = filters == null ? void 0 : filters.dateRange) == null ? void 0 : _b.startDate,
     endDate: (_c = filters == null ? void 0 : filters.dateRange) == null ? void 0 : _c.endDate,
     tagFilterQueryString: (filters == null ? void 0 : filters.tagFilter) ? tagFilterToQueryString(filters.tagFilter) : void 0
@@ -11110,6 +11110,9 @@ var formatter = new Intl.NumberFormat("en-US", {
   maximumFractionDigits: 2
 });
 var centsToDollars = (cents = NaN) => isNaN(cents) ? "-.--" : formatter.format(cents / 100);
+function centsToDollarsWithoutCommas(cents = 0) {
+  return centsToDollars(cents).replaceAll(",", "");
+}
 var dollarsToCents = (dollars = "") => Math.round(parseFloat(dollars) * 100);
 
 // src/components/LinkedAccountThumb/LinkedAccountThumb.tsx
@@ -20377,7 +20380,7 @@ var import_react115 = require("react");
 var import_classnames57 = __toESM(require("classnames"));
 var import_date_fns21 = require("date-fns");
 
-// src/components/domain/transactions/searchField/TransactionsSearchField.tsx
+// src/components/SearchField/SearchField.tsx
 var import_react_aria_components17 = require("react-aria-components");
 var import_lucide_react8 = require("lucide-react");
 
@@ -20397,19 +20400,18 @@ function MinimalSearchField(_a) {
   ] }));
 }
 
-// src/components/domain/transactions/searchField/TransactionsSearchField.tsx
+// src/components/SearchField/SearchField.tsx
 var import_jsx_runtime160 = require("react/jsx-runtime");
-var CLASS_NAME9 = "Layer__TransactionsSearchField";
-function TransactionsSearchField(_a) {
-  var _b = _a, { slot } = _b, restProps = __objRest(_b, ["slot"]);
+var CLASS_NAME9 = "Layer__SearchField Layer__InputGroup";
+function SearchField(_a) {
+  var _b = _a, { slot = "search", label } = _b, restProps = __objRest(_b, ["slot", "label"]);
   return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(import_react_aria_components17.Group, { slot, className: CLASS_NAME9, children: [
     /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(VStack, { slot: "icon", align: "center", justify: "center", children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(import_lucide_react8.Search, { size: 14 }) }),
     /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
       MinimalSearchField,
       __spreadProps(__spreadValues({}, restProps), {
-        slot: "search",
-        placeholder: "Search transactions",
-        "aria-label": "Search transactions"
+        placeholder: label,
+        "aria-label": label
       })
     )
   ] });
@@ -20453,7 +20455,7 @@ function useBankTransactionsDownload() {
       arg: {
         categorized,
         direction,
-        descriptionFilter,
+        query,
         startDate,
         endDate,
         tagFilterQueryString
@@ -20466,7 +20468,7 @@ function useBankTransactionsDownload() {
           params: {
             businessId: businessId2,
             categorized,
-            descriptionFilter,
+            query,
             direction,
             startDate,
             endDate,
@@ -21852,19 +21854,20 @@ function TransactionsSearch({ slot }) {
   const { filters, setFilters } = useBankTransactionsContext();
   const [localSearch, setLocalSearch] = (0, import_react115.useState)(() => {
     var _a;
-    return (_a = filters == null ? void 0 : filters.descriptionFilter) != null ? _a : "";
+    return (_a = filters == null ? void 0 : filters.query) != null ? _a : "";
   });
   const debouncedSetDescription = useDebounce((value) => {
-    setFilters({ descriptionFilter: value });
+    setFilters({ query: value });
   });
   const handleSearch = (0, import_react115.useCallback)((value) => {
     setLocalSearch(value);
     void debouncedSetDescription(value);
   }, [debouncedSetDescription]);
   return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
-    TransactionsSearchField,
+    SearchField,
     {
       slot,
+      label: "Search transactions",
       value: localSearch,
       onChange: handleSearch
     }
@@ -22316,7 +22319,7 @@ var BankTransactionsContent = ({
             hasVisibleTransactions: ((_a = bankTransactions == null ? void 0 : bankTransactions.length) != null ? _a : 0) > 0,
             isCategorizationMode: editable,
             isError: Boolean(error),
-            isFiltered: Boolean(filters == null ? void 0 : filters.descriptionFilter),
+            isFiltered: Boolean(filters == null ? void 0 : filters.query),
             isLoadingWithoutData
           }
         ) : null,
@@ -28421,12 +28424,172 @@ var Edit2_default = Edit2;
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
 var import_lucide_react16 = require("lucide-react");
+
+// src/components/ChartOfAccountsTable/utils/types.ts
+var LedgerAccountTypeOrderEnum = /* @__PURE__ */ ((LedgerAccountTypeOrderEnum2) => {
+  LedgerAccountTypeOrderEnum2[LedgerAccountTypeOrderEnum2["ASSET"] = 0] = "ASSET";
+  LedgerAccountTypeOrderEnum2[LedgerAccountTypeOrderEnum2["LIABILITY"] = 1] = "LIABILITY";
+  LedgerAccountTypeOrderEnum2[LedgerAccountTypeOrderEnum2["EQUITY"] = 2] = "EQUITY";
+  LedgerAccountTypeOrderEnum2[LedgerAccountTypeOrderEnum2["REVENUE"] = 3] = "REVENUE";
+  LedgerAccountTypeOrderEnum2[LedgerAccountTypeOrderEnum2["EXPENSES"] = 4] = "EXPENSES";
+  return LedgerAccountTypeOrderEnum2;
+})(LedgerAccountTypeOrderEnum || {});
+var LedgerAccountSubtypeOrderEnum = /* @__PURE__ */ ((LedgerAccountSubtypeOrderEnum2) => {
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["BANK_ACCOUNTS"] = 0] = "BANK_ACCOUNTS";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["CASH"] = 1] = "CASH";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["UNDEPOSITED_FUNDS"] = 2] = "UNDEPOSITED_FUNDS";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["PAYMENT_PROCESSOR_CLEARING_ACCOUNT"] = 3] = "PAYMENT_PROCESSOR_CLEARING_ACCOUNT";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["INBOUND_PAYMENT_METHOD_CLEARING"] = 4] = "INBOUND_PAYMENT_METHOD_CLEARING";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["ACCOUNTS_RECEIVABLE"] = 5] = "ACCOUNTS_RECEIVABLE";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["INVENTORY"] = 6] = "INVENTORY";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["CURRENT_ASSET"] = 7] = "CURRENT_ASSET";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["FIXED_ASSET"] = 8] = "FIXED_ASSET";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["INTANGIBLE_ASSET"] = 9] = "INTANGIBLE_ASSET";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["PREPAID_EXPENSES"] = 10] = "PREPAID_EXPENSES";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["DEVELOPMENT_COSTS"] = 11] = "DEVELOPMENT_COSTS";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["CREDIT_CARD"] = 12] = "CREDIT_CARD";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["ACCOUNTS_PAYABLE"] = 13] = "ACCOUNTS_PAYABLE";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["LINE_OF_CREDIT"] = 14] = "LINE_OF_CREDIT";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["REFUND_LIABILITIES"] = 15] = "REFUND_LIABILITIES";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["PAYROLL_LIABILITY"] = 16] = "PAYROLL_LIABILITY";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["SALES_TAXES_PAYABLE"] = 17] = "SALES_TAXES_PAYABLE";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["OTHER_TAXES_PAYABLE"] = 18] = "OTHER_TAXES_PAYABLE";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["TIPS"] = 19] = "TIPS";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["UNEARNED_REVENUE"] = 20] = "UNEARNED_REVENUE";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["UNDEPOSITED_OUTFLOWS"] = 21] = "UNDEPOSITED_OUTFLOWS";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["OUTGOING_PAYMENT_CLEARING_ACCOUNT"] = 22] = "OUTGOING_PAYMENT_CLEARING_ACCOUNT";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["OTHER_CURRENT_LIABILITY"] = 23] = "OTHER_CURRENT_LIABILITY";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["SHAREHOLDER_LOAN"] = 24] = "SHAREHOLDER_LOAN";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["NOTES_PAYABLE"] = 25] = "NOTES_PAYABLE";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["OTHER_LONG_TERM_LIABILITIES"] = 26] = "OTHER_LONG_TERM_LIABILITIES";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["CONTRIBUTIONS"] = 27] = "CONTRIBUTIONS";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["DISTRIBUTIONS"] = 28] = "DISTRIBUTIONS";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["COMMON_STOCK"] = 29] = "COMMON_STOCK";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["ADDITIONAL_PAID_IN_CAPITAL"] = 30] = "ADDITIONAL_PAID_IN_CAPITAL";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["RETAINED_EARNINGS"] = 31] = "RETAINED_EARNINGS";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["ACCUMULATED_ADJUSTMENTS"] = 32] = "ACCUMULATED_ADJUSTMENTS";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["OPENING_BALANCE_EQUITY"] = 33] = "OPENING_BALANCE_EQUITY";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["OTHER_EQUITY"] = 34] = "OTHER_EQUITY";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["SALES"] = 35] = "SALES";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["REVENUE"] = 36] = "REVENUE";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["UNCATEGORIZED_REVENUE"] = 37] = "UNCATEGORIZED_REVENUE";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["RETURNS_ALLOWANCES"] = 38] = "RETURNS_ALLOWANCES";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["OTHER_INCOME"] = 39] = "OTHER_INCOME";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["COGS"] = 40] = "COGS";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["OPERATING_EXPENSES"] = 41] = "OPERATING_EXPENSES";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["PAYROLL"] = 42] = "PAYROLL";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["INTEREST_EXPENSES"] = 43] = "INTEREST_EXPENSES";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["TAXES_LICENSES"] = 44] = "TAXES_LICENSES";
+  LedgerAccountSubtypeOrderEnum2[LedgerAccountSubtypeOrderEnum2["UNCATEGORIZED_EXPENSE"] = 45] = "UNCATEGORIZED_EXPENSE";
+  return LedgerAccountSubtypeOrderEnum2;
+})(LedgerAccountSubtypeOrderEnum || {});
+
+// src/components/ChartOfAccountsTable/utils/utils.ts
+var compareByEnum = (a, b, enumMap) => {
+  const aVal = a !== void 0 ? enumMap[a] : void 0;
+  const bVal = b !== void 0 ? enumMap[b] : void 0;
+  if (aVal !== void 0 && bVal !== void 0) return aVal - bVal;
+  if (aVal === void 0 && bVal !== void 0) return 1;
+  if (aVal !== void 0 && bVal === void 0) return -1;
+  return 0;
+};
+var compareAccounts = (a, b) => {
+  var _a, _b, _c, _d, _e, _f;
+  const typeComparison = compareByEnum(
+    a.account_type.value,
+    b.account_type.value,
+    LedgerAccountTypeOrderEnum
+  );
+  if (typeComparison !== 0) return typeComparison;
+  const subtypeComparison = compareByEnum(
+    (_a = a.account_subtype) == null ? void 0 : _a.value,
+    (_b = b.account_subtype) == null ? void 0 : _b.value,
+    LedgerAccountSubtypeOrderEnum
+  );
+  if (subtypeComparison !== 0) return subtypeComparison;
+  const subtypeNameCompare = ((_d = (_c = a.account_subtype) == null ? void 0 : _c.display_name) != null ? _d : "").localeCompare((_f = (_e = b.account_subtype) == null ? void 0 : _e.display_name) != null ? _f : "");
+  if (subtypeNameCompare !== 0) return subtypeNameCompare;
+  return a.name.localeCompare(b.name);
+};
+var sortAccountsRecursive = (accounts) => {
+  return accounts.map((account) => __spreadProps(__spreadValues({}, account), {
+    sub_accounts: account.sub_accounts ? sortAccountsRecursive(account.sub_accounts) : []
+  })).sort(compareAccounts);
+};
+var accountMatchesQuery = (account, query) => {
+  var _a;
+  return [
+    account.name,
+    account.account_type.display_name,
+    ((_a = account.account_subtype) == null ? void 0 : _a.display_name) || "",
+    centsToDollars(account.balance),
+    centsToDollarsWithoutCommas(account.balance),
+    convertCentsToCurrency(account.balance) || ""
+  ].some((field) => field.toLowerCase().includes(query));
+};
+var filterAccounts = (accounts, query) => {
+  return accounts.flatMap((account) => {
+    const isMatching = accountMatchesQuery(account, query);
+    const matchingChildren = filterAccounts(account.sub_accounts, query);
+    if (matchingChildren.length > 0) {
+      return [__spreadProps(__spreadValues({}, account), { sub_accounts: matchingChildren, isMatching: true })];
+    }
+    if (isMatching) {
+      return [__spreadProps(__spreadValues({}, account), { isMatching: true })];
+    }
+    return [];
+  });
+};
+var skippedChars = ["$", ","];
+var getMatchedTextIndices = ({
+  text,
+  query,
+  isMatching
+}) => {
+  if (!query || !isMatching) return null;
+  const normalize = (s) => s.replace(/[$,]/g, "").toLowerCase();
+  const normalizedText = normalize(text);
+  const normalizedQuery = normalize(query);
+  const normalizedMatchStartIdx = normalizedText.indexOf(normalizedQuery);
+  if (normalizedMatchStartIdx === -1) return null;
+  let positionInNormalizedText = 0, matchStartIdx = 0;
+  while (positionInNormalizedText < normalizedMatchStartIdx && matchStartIdx < text.length) {
+    if (!skippedChars.includes(text[matchStartIdx])) positionInNormalizedText++;
+    matchStartIdx++;
+  }
+  if (skippedChars.includes(text[matchStartIdx]) && query[0] !== text[matchStartIdx]) {
+    matchStartIdx++;
+  }
+  let charsMatched = 0, matchEndIdx = matchStartIdx;
+  while (charsMatched < normalizedQuery.length && matchEndIdx < text.length) {
+    if (!skippedChars.includes(text[matchEndIdx])) charsMatched++;
+    matchEndIdx++;
+  }
+  if (skippedChars.includes(text[matchEndIdx]) && query[query.length - 1] === text[matchEndIdx]) {
+    matchEndIdx++;
+  }
+  return { startIdx: matchStartIdx, endIdx: matchEndIdx };
+};
+
+// src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
 var import_jsx_runtime247 = require("react/jsx-runtime");
-var SORTED_STABLE_NAMES = ["ASSETS", "LIABILITIES", "EQUITY", "REVENUE", "EXPENSES"];
+var highlightMatch = ({ text, query, isMatching }) => {
+  const matchedTextIndices = getMatchedTextIndices({ text, query, isMatching });
+  if (matchedTextIndices === null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Span, { ellipsis: true, children: text });
+  }
+  const { startIdx, endIdx } = matchedTextIndices;
+  return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(Span, { ellipsis: true, children: [
+    text.slice(0, startIdx),
+    /* @__PURE__ */ (0, import_jsx_runtime247.jsx)("mark", { className: "Layer__mark", children: text.slice(startIdx, endIdx) }),
+    text.slice(endIdx)
+  ] });
+};
 var ChartOfAccountsTable = ({
   view,
   stringOverrides,
   data,
+  searchQuery,
   error,
   expandAll,
   templateAccountsEditable = true
@@ -28435,6 +28598,7 @@ var ChartOfAccountsTable = ({
   {
     view,
     data,
+    searchQuery,
     stringOverrides,
     error,
     expandAll,
@@ -28444,61 +28608,57 @@ var ChartOfAccountsTable = ({
 var ChartOfAccountsTableContent = ({
   stringOverrides,
   data,
+  searchQuery,
   error,
   expandAll,
   templateAccountsEditable
 }) => {
-  const hasMountedRef = (0, import_react165.useRef)(false);
   const { setAccountId } = (0, import_react165.useContext)(LedgerAccountsContext);
   const { editAccount } = (0, import_react165.useContext)(ChartOfAccountsContext);
-  const { isOpen, setIsOpen } = useTableExpandRow();
-  const sortedAccounts = (0, import_react165.useMemo)(() => {
-    return data.accounts.sort((a, b) => {
-      const indexA = SORTED_STABLE_NAMES.indexOf(a.stable_name);
-      const indexB = SORTED_STABLE_NAMES.indexOf(b.stable_name);
-      if (indexA === -1 && indexB === -1) return 0;
-      if (indexA === -1) return 1;
-      if (indexB === -1) return -1;
-      return indexA - indexB;
-    });
-  }, [data.accounts]);
-  const expandableRowKeys = (0, import_react165.useMemo)(() => {
+  const [toggledKeys, setToggledKeys] = (0, import_react165.useState)({});
+  const sortedAccounts = (0, import_react165.useMemo)(() => sortAccountsRecursive(data.accounts), [data.accounts]);
+  const allRowKeys = (0, import_react165.useMemo)(() => {
     const keys = [];
-    const collect = (accounts, parentKey) => {
+    const collect = (accounts) => {
       for (const account of accounts) {
-        const key = `${parentKey}-${account.id}`;
+        const key = `coa-row-${account.id}`;
         if (account.sub_accounts.length > 0) {
           keys.push(key);
-          collect(account.sub_accounts, key);
+          collect(account.sub_accounts);
         }
       }
     };
-    collect(data.accounts, "coa-row");
+    collect(data.accounts);
     return keys;
   }, [data.accounts]);
-  (0, import_react165.useLayoutEffect)(() => {
-    if (hasMountedRef.current) return;
-    const defaultExpanded = data.accounts.map(
-      (account) => "coa-row-" + account.id
-    );
-    setIsOpen(defaultExpanded);
-    hasMountedRef.current = true;
-  }, []);
   (0, import_react165.useEffect)(() => {
-    if (expandAll === "expanded") {
-      setIsOpen(expandableRowKeys);
-    } else if (expandAll === "collapsed") {
-      setIsOpen([]);
-    }
+    if (expandAll === void 0) return;
+    setToggledKeys(
+      Object.fromEntries(
+        allRowKeys.map((key) => [key, expandAll === "expanded"])
+      )
+    );
   }, [expandAll]);
-  const renderChartOfAccountsDesktopRow = (account, index, rowKey, depth) => {
+  (0, import_react165.useEffect)(() => {
+    setToggledKeys({});
+  }, [searchQuery]);
+  const filteredAccounts = (0, import_react165.useMemo)(() => {
+    if (!searchQuery) return sortedAccounts;
+    return filterAccounts(sortedAccounts, searchQuery.toLowerCase());
+  }, [searchQuery, sortedAccounts]);
+  const renderChartOfAccountsDesktopRow = ({ account, index, depth, searchQuery: searchQuery2 }) => {
     var _a, _b;
+    const rowKey = `coa-row-${account.id}`;
     const hasSubAccounts = !!account.sub_accounts && account.sub_accounts.length > 0;
-    const isExpanded = !hasSubAccounts || isOpen(rowKey);
+    const manuallyToggled = toggledKeys[rowKey];
+    const isExpanded = !hasSubAccounts || manuallyToggled === true || manuallyToggled !== false && (account.isMatching || depth === 0);
     const isNonEditable = !templateAccountsEditable && !!account.stable_name;
     const onClickRow = (e) => {
       e.stopPropagation();
-      if (hasSubAccounts) setIsOpen(rowKey);
+      if (!hasSubAccounts) return;
+      setToggledKeys((prev) => __spreadProps(__spreadValues({}, prev), {
+        [rowKey]: !isExpanded
+      }));
     };
     const onClickAccountName = (e) => {
       e.stopPropagation();
@@ -28529,12 +28689,28 @@ var ChartOfAccountsTableContent = ({
               TableCell,
               {
                 withExpandIcon: hasSubAccounts,
-                children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(HStack, __spreadProps(__spreadValues({}, !hasSubAccounts && { pis: "lg" }), { overflow: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Button2, { variant: "text", ellipsis: true, onClick: onClickAccountName, children: account.name }) }))
+                children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(HStack, __spreadProps(__spreadValues({}, !hasSubAccounts && { pis: "lg" }), { overflow: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Button2, { variant: "text", ellipsis: true, onClick: onClickAccountName, children: highlightMatch({
+                  text: account.name,
+                  query: searchQuery2,
+                  isMatching: account.isMatching
+                }) }) }))
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TableCell, { children: depth != 0 && ((_a = account.account_type) == null ? void 0 : _a.display_name) }),
-            /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TableCell, { children: depth != 0 && ((_b = account.account_subtype) == null ? void 0 : _b.display_name) }),
-            /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TableCell, { isCurrency: true, children: account.balance }),
+            /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TableCell, { children: depth != 0 && highlightMatch({
+              text: ((_a = account.account_type) == null ? void 0 : _a.display_name) || "",
+              query: searchQuery2,
+              isMatching: account.isMatching
+            }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TableCell, { children: depth != 0 && highlightMatch({
+              text: ((_b = account.account_subtype) == null ? void 0 : _b.display_name) || "",
+              query: searchQuery2,
+              isMatching: account.isMatching
+            }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TableCell, { children: highlightMatch({
+              text: convertCentsToCurrency(account.balance) || "",
+              query: searchQuery2,
+              isMatching: account.isMatching
+            }) }),
             /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TableCell, { align: "right" /* RIGHT */, children: /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(HStack, { className: "Layer__coa__actions", gap: "xs", children: [
               /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
                 Button,
@@ -28563,16 +28739,25 @@ var ChartOfAccountsTableContent = ({
         }
       ),
       hasSubAccounts && isExpanded && account.sub_accounts.map((subItem, subIdx) => {
-        const subRowKey = `${rowKey}-${subItem.id}`;
-        return renderChartOfAccountsDesktopRow(
-          subItem,
-          subIdx,
-          subRowKey,
-          depth + 1
-        );
+        return renderChartOfAccountsDesktopRow({
+          account: subItem,
+          index: subIdx,
+          depth: depth + 1,
+          searchQuery: searchQuery2
+        });
       })
     ] }, rowKey + "-" + index);
   };
+  if (filteredAccounts.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)("div", { className: "Layer__table-state-container", children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
+      DataState,
+      {
+        status: "info" /* info */,
+        title: "No accounts found",
+        description: 'No accounts match the current filters. Click "Add Account" to create a new one.'
+      }
+    ) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(Table, { componentName: "chart-of-accounts", children: [
     /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)("colgroup", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime247.jsx)("col", { className: "Layer__chart-of-accounts--name" }),
@@ -28588,13 +28773,13 @@ var ChartOfAccountsTableContent = ({
       /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TableCell, { isHeaderCell: true, children: (stringOverrides == null ? void 0 : stringOverrides.balanceColumnHeader) || "Balance" }),
       /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TableCell, { isHeaderCell: true })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TableBody, { children: !error && sortedAccounts.map(
-      (account, idx) => renderChartOfAccountsDesktopRow(
+    /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TableBody, { children: !error && filteredAccounts.map(
+      (account, index) => renderChartOfAccountsDesktopRow({
         account,
-        idx,
-        `coa-row-${account.id}`,
-        0
-      )
+        index,
+        depth: 0,
+        searchQuery
+      })
     ) })
   ] });
 };
@@ -28700,6 +28885,7 @@ var ChartOfAccountsTableWithPanel = ({
 }) => {
   const { data, isLoading, addAccount, error, isValidating, refetch, form } = (0, import_react166.useContext)(ChartOfAccountsContext);
   const [expandAll, setExpandAll] = (0, import_react166.useState)();
+  const { inputValue, searchQuery, handleInputChange } = useDebouncedSearchInput({ initialInputState: "" });
   return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
     Panel,
     {
@@ -28727,7 +28913,7 @@ var ChartOfAccountsTableWithPanel = ({
             {
               size: "secondary" /* secondary */,
               className: `Layer__${COMPONENT_NAME6}__subtitle`,
-              children: withDateControl || withExpandAllButton ? /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)("div", { className: "Layer__header__actions-col", children: [
+              children: withDateControl || withExpandAllButton ? /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(HStack, { align: "center", gap: "xs", children: [
                 withDateControl && /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(ChartOfAccountsDatePicker, {}),
                 withExpandAllButton && /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
                   ExpandCollapseButton,
@@ -28743,7 +28929,8 @@ var ChartOfAccountsTableWithPanel = ({
               ] }) : null
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(HeaderCol, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(HeaderCol, { className: "Layer__chart-of-accounts__actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(SearchField, { label: "Search accounts", value: inputValue, onChange: handleInputChange }),
             /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
               AccountBalancesDownloadButton,
               {
@@ -28766,6 +28953,7 @@ var ChartOfAccountsTableWithPanel = ({
           {
             view,
             data,
+            searchQuery,
             error,
             stringOverrides,
             expandAll,
@@ -28782,17 +28970,7 @@ var ChartOfAccountsTableWithPanel = ({
             isLoading: isValidating || isLoading
           }
         ) }) : null,
-        (!data || isLoading) && !error ? /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("div", { className: `Layer__${COMPONENT_NAME6}__loader-container`, children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Loader2, {}) }) : null,
-        !isLoading && !error && (data == null ? void 0 : data.accounts.length) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("div", { className: "Layer__table-state-container", children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
-          DataState,
-          {
-            status: "info" /* info */,
-            title: "Accounts were not found",
-            description: 'New account can be created with "Add Account".',
-            onRefresh: () => refetch(),
-            isLoading: isValidating
-          }
-        ) }) : null
+        (!data || isLoading) && !error ? /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("div", { className: `Layer__${COMPONENT_NAME6}__loader-container`, children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Loader2, {}) }) : null
       ]
     }
   );