@layerfi/components 0.1.56 → 0.1.57

package/dist/esm/index.js

@@ -11585,7 +11585,9 @@ var TableCell = ({
   isCurrency,
   primary,
   withExpandIcon = false,
-  fullWidth
+  fullWidth,
+  colSpan = 1,
+  onClick
 }) => {
   const amount = typeof children === "number" ? children : 0;
   const isPositive = amount >= 0;
@@ -11598,13 +11600,15 @@ var TableCell = ({
     isCurrency && !isPositive && "Layer__table-cell-amount--negative"
   );
   if (isHeaderCell) {
-    return /* @__PURE__ */ React133.createElement("th", { className: cellClassNames }, /* @__PURE__ */ React133.createElement("span", { className: "Layer__table-cell-content" }, children));
+    return /* @__PURE__ */ React133.createElement("th", { className: cellClassNames, colSpan }, /* @__PURE__ */ React133.createElement("span", { className: "Layer__table-cell-content" }, children));
   }
   return /* @__PURE__ */ React133.createElement(
     "td",
     {
       className: cellClassNames,
-      style: fullWidth ? { width: "100%" } : void 0
+      style: fullWidth ? { width: "100%" } : void 0,
+      colSpan,
+      onClick: (e) => onClick && onClick(e)
     },
     /* @__PURE__ */ React133.createElement("span", { className: "Layer__table-cell-content" }, withExpandIcon && /* @__PURE__ */ React133.createElement(
       ChevronDownFill_default,
@@ -11635,20 +11639,35 @@ var TableRow = ({
   variant = expandable ? "expandable" : "default",
   withDivider,
   withDividerPosition = "top",
-  isHeadRow = false
+  isHeadRow = false,
+  selected,
+  onClick
 }) => {
-  const toggleExpanded = () => {
-    if (variant === "summation" || !expandable)
-      return;
-    handleExpand && handleExpand();
+  const toggleExpanded = (e) => {
+    if (onClick) {
+      onClick(e);
+    } else {
+      if (variant === "summation" || !expandable)
+        return;
+      handleExpand && handleExpand();
+    }
   };
   const rowClassNames = classNames48([
     "Layer__table-row",
     !isHeadRow && `Layer__table-row--depth-${depth}`,
     !isHeadRow && `Layer__table-row--variant-${variant}`,
+    selected && "Layer__table-row--selected",
     !isHeadRow && expandable && (isExpanded ? "Layer__table-row--expanded" : "Layer__table-row--collapsed")
   ]);
-  return /* @__PURE__ */ React135.createElement(React135.Fragment, null, withDivider && withDividerPosition === "top" && /* @__PURE__ */ React135.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React135.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })), /* @__PURE__ */ React135.createElement("tr", { "data-key": rowKey, className: rowClassNames, onClick: toggleExpanded }, children), withDivider && withDividerPosition === "bottom" && /* @__PURE__ */ React135.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React135.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })));
+  return /* @__PURE__ */ React135.createElement(React135.Fragment, null, withDivider && withDividerPosition === "top" && /* @__PURE__ */ React135.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React135.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })), /* @__PURE__ */ React135.createElement(
+    "tr",
+    {
+      "data-key": rowKey,
+      className: rowClassNames,
+      onClick: (e) => toggleExpanded(e)
+    },
+    children
+  ), withDivider && withDividerPosition === "bottom" && /* @__PURE__ */ React135.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React135.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })));
 };
 
 // src/components/Table/Table.tsx
@@ -12078,7 +12097,7 @@ ProfitAndLoss.DetailedCharts = ProfitAndLossDetailedCharts;
 ProfitAndLoss.Header = ProfitAndLossHeader;
 
 // src/components/BalanceSheet/BalanceSheet.tsx
-import React148, { useEffect as useEffect35, useState as useState37 } from "react";
+import React148, { useEffect as useEffect35, useState as useState38 } from "react";
 
 // src/contexts/BalanceSheetContext/BalanceSheetContext.tsx
 import { createContext as createContext9 } from "react";
@@ -12225,7 +12244,7 @@ var ViewHeader = ({ title, controls }) => {
 };
 
 // src/components/Panel/Panel.tsx
-import React146, { useEffect as useEffect34, useState as useState36 } from "react";
+import React146, { useEffect as useEffect34, useState as useState37 } from "react";
 import classNames52 from "classnames";
 var Panel = ({
   children,
@@ -12236,7 +12255,7 @@ var Panel = ({
   parentRef,
   defaultSidebarHeight = false
 }) => {
-  const [sidebarHeight, setSidebarHeight] = useState36(0);
+  const [sidebarHeight, setSidebarHeight] = useState37(0);
   useEffect34(() => {
     if (parentRef?.current?.offsetHeight) {
       setSidebarHeight(parentRef?.current?.offsetHeight - 1);
@@ -12323,7 +12342,7 @@ var BalanceSheetView = ({
   asWidget = false,
   stringOverrides
 }) => {
-  const [effectiveDate, setEffectiveDate] = useState37(startOfDay2(/* @__PURE__ */ new Date()));
+  const [effectiveDate, setEffectiveDate] = useState38(startOfDay2(/* @__PURE__ */ new Date()));
   const { data, isLoading, refetch } = useBalanceSheet(effectiveDate);
   useEffect35(() => {
     const d1 = effectiveDate && format5(startOfDay2(effectiveDate), "yyyy-MM-dd'T'HH:mm:ssXXX");
@@ -12384,7 +12403,7 @@ var BalanceSheetView = ({
 };
 
 // src/components/StatementOfCashFlow/StatementOfCashFlow.tsx
-import React150, { useState as useState38 } from "react";
+import React150, { useState as useState39 } from "react";
 
 // src/contexts/StatementOfCashContext/StatementOfCashFlowContext.tsx
 import { createContext as createContext10 } from "react";
@@ -12542,10 +12561,10 @@ var StatementOfCashFlow = ({ stringOverrides }) => {
   return /* @__PURE__ */ React150.createElement(StatementOfCashFlowContext.Provider, { value: cashContextData }, /* @__PURE__ */ React150.createElement(StatementOfCashFlowView, { stringOverrides }));
 };
 var StatementOfCashFlowView = ({ stringOverrides }) => {
-  const [startDate, setStartDate] = useState38(
+  const [startDate, setStartDate] = useState39(
     startOfDay4(subWeeks(/* @__PURE__ */ new Date(), 4))
   );
-  const [endDate, setEndDate] = useState38(startOfDay4(/* @__PURE__ */ new Date()));
+  const [endDate, setEndDate] = useState39(startOfDay4(/* @__PURE__ */ new Date()));
   const { data, isLoading, refetch } = useStatementOfCashFlow(
     startDate,
     endDate
@@ -12587,7 +12606,7 @@ var StatementOfCashFlowView = ({ stringOverrides }) => {
 };
 
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
-import React165, { useContext as useContext28, useState as useState45 } from "react";
+import React165, { useContext as useContext28, useState as useState46 } from "react";
 
 // src/contexts/ChartOfAccountsContext/ChartOfAccountsContext.tsx
 import { createContext as createContext11 } from "react";
@@ -12646,7 +12665,7 @@ var LedgerAccountsContext = createContext12({
 });
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
-import { useEffect as useEffect37, useState as useState39 } from "react";
+import { useEffect as useEffect37, useState as useState40 } from "react";
 
 // src/components/ChartOfAccountsForm/constants.ts
 var LEDGER_ACCOUNT_TYPES = [
@@ -12943,13 +12962,13 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
     syncTimestamps,
     hasBeenTouched
   } = useLayerContext();
-  const [form, setForm] = useState39();
-  const [sendingForm, setSendingForm] = useState39(false);
-  const [apiError, setApiError] = useState39(void 0);
-  const [startDate, setStartDate] = useState39(
+  const [form, setForm] = useState40();
+  const [sendingForm, setSendingForm] = useState40(false);
+  const [apiError, setApiError] = useState40(void 0);
+  const [startDate, setStartDate] = useState40(
     initialStartDate ?? startOfMonth13(Date.now())
   );
-  const [endDate, setEndDate] = useState39(
+  const [endDate, setEndDate] = useState40(
     initialEndDate ?? endOfMonth10(Date.now())
   );
   const queryKey = businessId && auth?.access_token && `chart-of-accounts-${businessId}-${startDate?.valueOf()}-${endDate?.valueOf()}`;
@@ -13164,12 +13183,12 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
 };
 
 // src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
-import { useEffect as useEffect38, useState as useState40 } from "react";
+import { useEffect as useEffect38, useState as useState41 } from "react";
 import useSWR8 from "swr";
 var useLedgerAccounts = () => {
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
-  const [accountId, setAccountId] = useState40();
-  const [selectedEntryId, setSelectedEntryId] = useState40();
+  const [accountId, setAccountId] = useState41();
+  const [selectedEntryId, setSelectedEntryId] = useState41();
   const queryKey = businessId && accountId && auth?.access_token && `ledger-accounts-lines-${businessId}-${accountId}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR8(
     queryKey,
@@ -13222,8 +13241,8 @@ var useLedgerAccounts = () => {
   };
 };
 
-// src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
-import React157, { useContext as useContext24, useState as useState42 } from "react";
+// src/components/ChartOfAccountsTable/ChartOfAccountsTableWithPanel.tsx
+import React157, { useContext as useContext24, useState as useState43 } from "react";
 
 // src/components/ChartOfAccountsDatePicker/ChartOfAccountsDatePicker.tsx
 import React151, { useContext as useContext21 } from "react";
@@ -13247,261 +13266,11 @@ var ChartOfAccountsDatePicker = () => {
   );
 };
 
-// src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-import React153, { useContext as useContext22, useEffect as useEffect39, useState as useState41 } from "react";
-
-// src/icons/Edit2.tsx
-import * as React152 from "react";
-var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React152.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 18 18",
-    fill: "none",
-    ...props,
-    width: size,
-    height: size
-  },
-  /* @__PURE__ */ React152.createElement(
-    "path",
-    {
-      d: "M12.75 2.25C12.947 2.05301 13.1808 1.89676 13.4382 1.79015C13.6956 1.68355 13.9714 1.62868 14.25 1.62868C14.5286 1.62868 14.8044 1.68355 15.0618 1.79015C15.3192 1.89676 15.553 2.05301 15.75 2.25C15.947 2.44698 16.1032 2.68083 16.2098 2.9382C16.3165 3.19557 16.3713 3.47142 16.3713 3.75C16.3713 4.02857 16.3165 4.30442 16.2098 4.56179C16.1032 4.81916 15.947 5.05302 15.75 5.25L5.625 15.375L1.5 16.5L2.625 12.375L12.75 2.25Z",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )
-);
-var Edit2_default = Edit2;
-
-// src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-import classNames54 from "classnames";
-var INDENTATION = 24;
-var EXPANDED_STYLE2 = {
-  height: 52,
-  paddingTop: 12,
-  paddingBottom: 12,
-  opacity: 1
-};
-var EXPANDED_MOBILE_STYLE = {
-  height: 76,
-  paddingTop: 12,
-  paddingBottom: 12,
-  opacity: 1
-};
-var COLLAPSED_STYLE2 = {
-  height: 0,
-  paddingTop: 0,
-  paddingBottom: 0,
-  opacity: 0.5
-};
-var ChartOfAccountsRow = ({
-  account,
-  depth = 0,
-  index,
-  cumulativeIndex = 0,
-  expanded = false,
-  defaultOpen = false,
-  acountsLength,
-  view,
-  expandAll
-}) => {
-  const { form, editAccount } = useContext22(ChartOfAccountsContext);
-  const { setAccountId } = useContext22(LedgerAccountsContext);
-  const baseStyle = view === "desktop" ? EXPANDED_STYLE2 : EXPANDED_MOBILE_STYLE;
-  const [isOpen, setIsOpen] = useState41(defaultOpen);
-  const style = expanded ? {
-    ...baseStyle,
-    transitionDelay: `${15 * index}ms`
-  } : {
-    ...COLLAPSED_STYLE2,
-    transitionDelay: `${acountsLength - 15 * index}ms`
-  };
-  const [showComponent, setShowComponent] = useState41(false);
-  const [prevExpandedAll, setPrevExpandedAll] = useState41(expandAll);
-  useEffect39(() => {
-    const timeoutId = setTimeout(() => {
-      setShowComponent(true);
-    }, cumulativeIndex * 50);
-    return () => clearTimeout(timeoutId);
-  }, []);
-  useEffect39(() => {
-    if (prevExpandedAll !== expandAll && expandAll) {
-      setIsOpen(expandAll === "collapsed" ? false : true);
-    }
-  }, [expandAll]);
-  const baseClass = classNames54(
-    "Layer__table-row",
-    isOpen ? "Layer__table-row--expanded" : "Layer__table-row--collapsed",
-    !expanded && "Layer__table-row--hidden",
-    `Layer__table-row--depth-${depth}`,
-    form?.accountId === account.id && "Layer__table-row--active",
-    !showComponent && "Layer__table-row--anim-starting-state"
-  );
-  const desktopRowClass = classNames54(
-    baseClass,
-    "Layer__chart-of-accounts__row---desktop"
-  );
-  const mobileRowClass = classNames54(
-    baseClass,
-    "Layer__chart-of-accounts__row---mobile"
-  );
-  return /* @__PURE__ */ React153.createElement(React153.Fragment, null, view === "desktop" && /* @__PURE__ */ React153.createElement(
-    "tr",
-    {
-      className: desktopRowClass,
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setAccountId(account.id);
-      }
-    },
-    /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell Layer__coa__name" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React153.createElement(
-      "span",
-      {
-        className: "Layer__table-cell-content-indentation",
-        style: {
-          paddingLeft: INDENTATION * depth + 16
-        }
-      },
-      account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ React153.createElement(
-        ChevronDownFill_default,
-        {
-          size: 16,
-          className: "Layer__table__expand-icon",
-          onClick: (e) => {
-            e.stopPropagation();
-            setIsOpen(!isOpen);
-          }
-        }
-      ),
-      /* @__PURE__ */ React153.createElement("span", { className: "Layer__coa__name__text" }, account.name)
-    ))),
-    /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell Layer__coa__type" }, /* @__PURE__ */ React153.createElement(
-      "span",
-      {
-        className: "Layer__table-cell-content Layer__mobile--hidden",
-        style
-      },
-      account.account_type?.display_name
-    ), /* @__PURE__ */ React153.createElement(
-      "span",
-      {
-        className: "Layer__table-cell-content Layer__desktop--hidden",
-        style
-      },
-      /* @__PURE__ */ React153.createElement(
-        Text,
-        {
-          weight: "bold" /* bold */,
-          className: "Layer__coa__type--mobile"
-        },
-        account.normality
-      ),
-      /* @__PURE__ */ React153.createElement(Text, { className: "Layer__coa__subtype--mobile" }, account.account_subtype?.display_name)
-    )),
-    /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell Layer__coa__subtype Layer__mobile--hidden" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content", style }, account.account_subtype?.display_name)),
-    /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell Layer__coa__balance" }, /* @__PURE__ */ React153.createElement(
-      "span",
-      {
-        className: "Layer__table-cell-content Layer__table-cell--amount",
-        style
-      },
-      "$",
-      centsToDollars(Math.abs(account.balance || 0))
-    )),
-    /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell Layer__coa__actions" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React153.createElement(
-      Button,
-      {
-        variant: "secondary" /* secondary */,
-        rightIcon: /* @__PURE__ */ React153.createElement(Edit2_default, { size: 12 }),
-        iconOnly: true,
-        onClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          editAccount(account.id);
-        }
-      },
-      "Edit"
-    )))
-  ), view === "mobile" || view === "tablet" ? /* @__PURE__ */ React153.createElement(
-    "tr",
-    {
-      className: mobileRowClass,
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setAccountId(account.id);
-      }
-    },
-    /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell", colSpan: 5 }, /* @__PURE__ */ React153.createElement(
-      "span",
-      {
-        className: "Layer__table-cell-content Layer__table-cell-content-indentation",
-        style: {
-          paddingLeft: INDENTATION * depth + 16,
-          ...style
-        }
-      },
-      account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ React153.createElement(
-        ChevronDownFill_default,
-        {
-          size: 16,
-          className: "Layer__table__expand-icon",
-          onClick: (e) => {
-            e.stopPropagation();
-            setIsOpen(!isOpen);
-          }
-        }
-      ),
-      /* @__PURE__ */ React153.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content" }, /* @__PURE__ */ React153.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__top-row" }, /* @__PURE__ */ React153.createElement(
-        Text,
-        {
-          as: "span",
-          className: "Layer__chart-of-accounts__mobile-row-content__name"
-        },
-        account.name
-      ), /* @__PURE__ */ React153.createElement(
-        TextButton,
-        {
-          onClick: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            editAccount(account.id);
-          }
-        },
-        "Edit"
-      )), /* @__PURE__ */ React153.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__bottom-row" }, /* @__PURE__ */ React153.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__types" }, /* @__PURE__ */ React153.createElement(Text, { as: "span" }, account.normality), /* @__PURE__ */ React153.createElement("span", { className: "Layer__chart-of-accounts__mobile-row-content__separator" }), /* @__PURE__ */ React153.createElement(Text, { as: "span" }, "Sub-Type")), /* @__PURE__ */ React153.createElement(
-        Text,
-        {
-          as: "span",
-          className: "Layer__chart-of-accounts__mobile-row-content__balance"
-        },
-        "$",
-        centsToDollars(Math.abs(account.balance || 0))
-      )))
-    ))
-  ) : null, (account.sub_accounts || []).map((subAccount, idx) => /* @__PURE__ */ React153.createElement(
-    ChartOfAccountsRow,
-    {
-      key: subAccount.id,
-      account: subAccount,
-      depth: depth + 1,
-      index: idx,
-      expanded: isOpen && expanded,
-      cumulativeIndex: cumulativeIndex + idx + 1,
-      acountsLength: (account.sub_accounts ?? []).length,
-      view,
-      expandAll
-    }
-  )));
-};
-
 // src/components/ChartOfAccountsSidebar/ChartOfAccountsSidebar.tsx
-import React156 from "react";
+import React154 from "react";
 
 // src/components/ChartOfAccountsForm/ChartOfAccountsForm.tsx
-import React155, { useContext as useContext23, useMemo as useMemo14 } from "react";
+import React153, { useContext as useContext22, useMemo as useMemo14 } from "react";
 
 // src/components/ChartOfAccountsForm/useParentOptions.ts
 import { useMemo as useMemo13 } from "react";
@@ -13525,7 +13294,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
     submitForm,
     sendingForm,
     apiError
-  } = useContext23(ChartOfAccountsContext);
+  } = useContext22(ChartOfAccountsContext);
   const parentOptions = useParentOptions(data);
   const entry = useMemo14(() => {
     if (form?.action === "edit" && form.accountId) {
@@ -13538,7 +13307,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
   if (!form) {
     return;
   }
-  return /* @__PURE__ */ React155.createElement(
+  return /* @__PURE__ */ React153.createElement(
     "form",
     {
       className: "Layer__form",
@@ -13547,7 +13316,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         submitForm();
       }
     },
-    /* @__PURE__ */ React155.createElement("div", { className: "Layer__chart-of-accounts__sidebar__header" }, /* @__PURE__ */ React155.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? stringOverrides?.editModeHeader || "Edit Account" : stringOverrides?.createModeHeader || "Add New Account"), /* @__PURE__ */ React155.createElement("div", { className: "actions" }, /* @__PURE__ */ React155.createElement(
+    /* @__PURE__ */ React153.createElement("div", { className: "Layer__chart-of-accounts__sidebar__header" }, /* @__PURE__ */ React153.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? stringOverrides?.editModeHeader || "Edit Account" : stringOverrides?.createModeHeader || "Add New Account"), /* @__PURE__ */ React153.createElement("div", { className: "actions" }, /* @__PURE__ */ React153.createElement(
       Button,
       {
         type: "button",
@@ -13556,7 +13325,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.cancelButton || "Cancel"
-    ), apiError && /* @__PURE__ */ React155.createElement(
+    ), apiError && /* @__PURE__ */ React153.createElement(
       RetryButton,
       {
         type: "submit",
@@ -13565,7 +13334,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.retryButton || "Retry"
-    ), !apiError && /* @__PURE__ */ React155.createElement(
+    ), !apiError && /* @__PURE__ */ React153.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -13575,7 +13344,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
       },
       stringOverrides?.saveButton || "Save"
     ))),
-    apiError && /* @__PURE__ */ React155.createElement(
+    apiError && /* @__PURE__ */ React153.createElement(
       Text,
       {
         size: "sm" /* sm */,
@@ -13583,8 +13352,8 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
       },
       apiError
     ),
-    entry && /* @__PURE__ */ React155.createElement("div", { className: "Layer__chart-of-accounts__form-edit-entry" }, /* @__PURE__ */ React155.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ React155.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
-    /* @__PURE__ */ React155.createElement("div", { className: "Layer__chart-of-accounts__form" }, /* @__PURE__ */ React155.createElement(InputGroup, { name: "parent", label: stringOverrides?.parentLabel || "Parent", inline: true }, /* @__PURE__ */ React155.createElement(
+    entry && /* @__PURE__ */ React153.createElement("div", { className: "Layer__chart-of-accounts__form-edit-entry" }, /* @__PURE__ */ React153.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ React153.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
+    /* @__PURE__ */ React153.createElement("div", { className: "Layer__chart-of-accounts__form" }, /* @__PURE__ */ React153.createElement(InputGroup, { name: "parent", label: stringOverrides?.parentLabel || "Parent", inline: true }, /* @__PURE__ */ React153.createElement(
       Select2,
       {
         options: parentOptions,
@@ -13592,7 +13361,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         onChange: (sel) => changeFormData("parent", sel),
         disabled: sendingForm
       }
-    )), /* @__PURE__ */ React155.createElement(InputGroup, { name: "name", label: stringOverrides?.nameLabel || "Name", inline: true }, /* @__PURE__ */ React155.createElement(
+    )), /* @__PURE__ */ React153.createElement(InputGroup, { name: "name", label: stringOverrides?.nameLabel || "Name", inline: true }, /* @__PURE__ */ React153.createElement(
       Input,
       {
         name: "name",
@@ -13603,7 +13372,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm,
         onChange: (e) => changeFormData("name", e.target.value)
       }
-    )), /* @__PURE__ */ React155.createElement(InputGroup, { name: "type", label: stringOverrides?.typeLabel || "Type", inline: true }, /* @__PURE__ */ React155.createElement(
+    )), /* @__PURE__ */ React153.createElement(InputGroup, { name: "type", label: stringOverrides?.typeLabel || "Type", inline: true }, /* @__PURE__ */ React153.createElement(
       Select2,
       {
         options: LEDGER_ACCOUNT_TYPES,
@@ -13613,7 +13382,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         errorMessage: form?.errors?.find((x) => x.field === "type")?.message,
         disabled: sendingForm || form.action === "edit" || form.data.parent !== void 0
       }
-    )), /* @__PURE__ */ React155.createElement(InputGroup, { name: "subType", label: stringOverrides?.subTypeLabel || "Sub-Type", inline: true }, /* @__PURE__ */ React155.createElement(
+    )), /* @__PURE__ */ React153.createElement(InputGroup, { name: "subType", label: stringOverrides?.subTypeLabel || "Sub-Type", inline: true }, /* @__PURE__ */ React153.createElement(
       Select2,
       {
         options: form?.data.type?.value !== void 0 ? LEDGER_ACCOUNT_SUBTYPES_FOR_TYPE[form?.data.type?.value] : LEDGER_ACCOUNT_SUBTYPES,
@@ -13621,7 +13390,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         onChange: (sel) => changeFormData("subType", sel),
         disabled: sendingForm
       }
-    )), /* @__PURE__ */ React155.createElement(InputGroup, { name: "normality", label: stringOverrides?.normalityLabel || "Normality", inline: true }, /* @__PURE__ */ React155.createElement(
+    )), /* @__PURE__ */ React153.createElement(InputGroup, { name: "normality", label: stringOverrides?.normalityLabel || "Normality", inline: true }, /* @__PURE__ */ React153.createElement(
       Select2,
       {
         options: NORMALITY_OPTIONS,
@@ -13633,7 +13402,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         onChange: (sel) => changeFormData("normality", sel),
         disabled: sendingForm
       }
-    )), /* @__PURE__ */ React155.createElement("div", { className: "actions" }, /* @__PURE__ */ React155.createElement(
+    )), /* @__PURE__ */ React153.createElement("div", { className: "actions" }, /* @__PURE__ */ React153.createElement(
       Button,
       {
         type: "button",
@@ -13642,7 +13411,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.cancelButton || "Cancel"
-    ), apiError && /* @__PURE__ */ React155.createElement(
+    ), apiError && /* @__PURE__ */ React153.createElement(
       RetryButton,
       {
         type: "submit",
@@ -13651,7 +13420,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.retryButton || "Retry"
-    ), !apiError && /* @__PURE__ */ React155.createElement(
+    ), !apiError && /* @__PURE__ */ React153.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -13669,12 +13438,158 @@ var ChartOfAccountsSidebar = ({
   parentRef: _parentRef,
   stringOverrides
 }) => {
-  return /* @__PURE__ */ React156.createElement(ChartOfAccountsForm, { stringOverrides });
+  return /* @__PURE__ */ React154.createElement(ChartOfAccountsForm, { stringOverrides });
 };
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
-var COMPONENT_NAME5 = "chart-of-accounts";
+import React156, { useContext as useContext23, useEffect as useEffect39, useState as useState42 } from "react";
+
+// src/icons/Edit2.tsx
+import * as React155 from "react";
+var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React155.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React155.createElement(
+    "path",
+    {
+      d: "M12.75 2.25C12.947 2.05301 13.1808 1.89676 13.4382 1.79015C13.6956 1.68355 13.9714 1.62868 14.25 1.62868C14.5286 1.62868 14.8044 1.68355 15.0618 1.79015C15.3192 1.89676 15.553 2.05301 15.75 2.25C15.947 2.44698 16.1032 2.68083 16.2098 2.9382C16.3165 3.19557 16.3713 3.47142 16.3713 3.75C16.3713 4.02857 16.3165 4.30442 16.2098 4.56179C16.1032 4.81916 15.947 5.05302 15.75 5.25L5.625 15.375L1.5 16.5L2.625 12.375L12.75 2.25Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var Edit2_default = Edit2;
+
+// src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
 var ChartOfAccountsTable = ({
+  view,
+  stringOverrides,
+  data,
+  error,
+  expandAll,
+  cumulativeIndex,
+  accountsLength
+}) => /* @__PURE__ */ React156.createElement(TableProvider, null, /* @__PURE__ */ React156.createElement(
+  ChartOfAccountsTableContent,
+  {
+    view,
+    data,
+    stringOverrides,
+    error,
+    expandAll,
+    cumulativeIndex,
+    accountsLength
+  }
+));
+var ChartOfAccountsTableContent = ({
+  view,
+  stringOverrides,
+  data,
+  error,
+  expandAll,
+  cumulativeIndex,
+  accountsLength
+}) => {
+  const { setAccountId } = useContext23(LedgerAccountsContext);
+  const { editAccount } = useContext23(ChartOfAccountsContext);
+  const { isOpen, setIsOpen } = useTableExpandRow();
+  const [accountsRowKeys, setAccountsRowKeys] = useState42([]);
+  useEffect39(() => {
+    if (expandAll === "expanded") {
+      setIsOpen(accountsRowKeys);
+    } else if (expandAll === "collapsed") {
+      setIsOpen([]);
+    }
+  }, [expandAll]);
+  useEffect39(() => {
+    const defaultExpanded = data.accounts.map(
+      (account) => "coa-row-" + account.id
+    );
+    setIsOpen(defaultExpanded);
+    const searchRowsToExpand = (accounts, rowKey) => {
+      accounts.map((account) => {
+        if (account.sub_accounts.length > 0) {
+          setAccountsRowKeys((prev) => [...prev, `${rowKey}-${account.id}`]);
+          searchRowsToExpand(account.sub_accounts, `${rowKey}-${account.id}`);
+        }
+      });
+    };
+    searchRowsToExpand(data.accounts, "coa-row");
+  }, []);
+  const renderChartOfAccountsDesktopRow = (account, index, rowKey, depth) => {
+    const expandable = !!account.sub_accounts && account.sub_accounts.length > 0;
+    const expanded = expandable ? isOpen(rowKey) : true;
+    return /* @__PURE__ */ React156.createElement(React156.Fragment, { key: rowKey + "-" + index }, /* @__PURE__ */ React156.createElement(
+      TableRow,
+      {
+        rowKey: rowKey + "-" + index,
+        expandable,
+        isExpanded: expanded,
+        onClick: (e) => {
+          e.stopPropagation();
+          setAccountId(account.id);
+        },
+        depth
+      },
+      /* @__PURE__ */ React156.createElement(
+        TableCell,
+        {
+          withExpandIcon: expandable,
+          onClick: (e) => {
+            e.stopPropagation();
+            expandable && setIsOpen(rowKey);
+          }
+        },
+        account.name
+      ),
+      /* @__PURE__ */ React156.createElement(TableCell, null, account.account_type?.display_name),
+      /* @__PURE__ */ React156.createElement(TableCell, null, account.account_subtype?.display_name),
+      /* @__PURE__ */ React156.createElement(TableCell, { isCurrency: true }, account.balance),
+      /* @__PURE__ */ React156.createElement(TableCell, null, /* @__PURE__ */ React156.createElement("span", { className: "Layer__coa__actions" }, /* @__PURE__ */ React156.createElement(
+        Button,
+        {
+          variant: "secondary" /* secondary */,
+          rightIcon: /* @__PURE__ */ React156.createElement(Edit2_default, { size: 12 }),
+          iconOnly: true,
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            editAccount(account.id);
+          }
+        },
+        "Edit"
+      )))
+    ), expandable && expanded && account.sub_accounts.map((subItem, subIdx) => {
+      const subRowKey = `${rowKey}-${subItem.id}`;
+      return renderChartOfAccountsDesktopRow(
+        subItem,
+        subIdx,
+        subRowKey,
+        depth + 1
+      );
+    }));
+  };
+  return /* @__PURE__ */ React156.createElement(Table, null, /* @__PURE__ */ React156.createElement(TableHead, null, /* @__PURE__ */ React156.createElement(TableRow, { isHeadRow: true, rowKey: "charts-of-accounts-head-row" }, /* @__PURE__ */ React156.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.nameColumnHeader || "Name"), /* @__PURE__ */ React156.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.typeColumnHeader || "Type"), /* @__PURE__ */ React156.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.subtypeColumnHeader || "Sub-Type"), /* @__PURE__ */ React156.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.balanceColumnHeader || "Balance"), /* @__PURE__ */ React156.createElement(TableCell, { isHeaderCell: true }))), /* @__PURE__ */ React156.createElement(TableBody, null, !error && data.accounts.map(
+    (account, idx) => renderChartOfAccountsDesktopRow(
+      account,
+      idx,
+      `coa-row-${account.id}`,
+      0
+    )
+  )));
+};
+
+// src/components/ChartOfAccountsTable/ChartOfAccountsTableWithPanel.tsx
+var COMPONENT_NAME5 = "chart-of-accounts";
+var ChartOfAccountsTableWithPanel = ({
   view,
   containerRef,
   asWidget = false,
@@ -13683,7 +13598,7 @@ var ChartOfAccountsTable = ({
   stringOverrides
 }) => {
   const { data, isLoading, addAccount, error, isValidating, refetch, form } = useContext24(ChartOfAccountsContext);
-  const [expandAll, setExpandAll] = useState42();
+  const [expandAll, setExpandAll] = useState43();
   let cumulativeIndex = 0;
   const accountsLength = data?.accounts.length ?? 0;
   return /* @__PURE__ */ React157.createElement(
@@ -13731,25 +13646,18 @@ var ChartOfAccountsTable = ({
         /* @__PURE__ */ React157.createElement("div", { className: "Layer__header__actions-col" }, /* @__PURE__ */ React157.createElement(Button, { onClick: () => addAccount(), disabled: isLoading }, stringOverrides?.addAccountButtonText || "Add Account"))
       )
     ),
-    /* @__PURE__ */ React157.createElement("table", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ React157.createElement("thead", null, /* @__PURE__ */ React157.createElement("tr", { className: "Layer__table-row--header" }, /* @__PURE__ */ React157.createElement("th", { className: "Layer__table-header Layer__coa__name" }, stringOverrides?.nameColumnHeader || "Name"), /* @__PURE__ */ React157.createElement("th", { className: "Layer__table-header Layer__coa__type" }, stringOverrides?.typeColumnHeader || "Type"), /* @__PURE__ */ React157.createElement("th", { className: "Layer__table-header Layer__coa__subtype Layer__mobile--hidden" }, stringOverrides?.subtypeColumnHeader || "Sub-Type"), /* @__PURE__ */ React157.createElement("th", { className: "Layer__table-header Layer__coa__balance" }, stringOverrides?.balanceColumnHeader || "Balance"), /* @__PURE__ */ React157.createElement("th", { className: "Layer__table-header Layer__coa__actions" }))), /* @__PURE__ */ React157.createElement("tbody", null, !error && data?.accounts.map((account, idx) => {
-      const currentCumulativeIndex = cumulativeIndex;
-      cumulativeIndex = (account.sub_accounts?.length || 0) + cumulativeIndex + 1;
-      return /* @__PURE__ */ React157.createElement(
-        ChartOfAccountsRow,
-        {
-          key: account.id,
-          account,
-          depth: 0,
-          index: idx,
-          cumulativeIndex: currentCumulativeIndex,
-          expanded: true,
-          defaultOpen: true,
-          acountsLength: accountsLength,
-          view,
-          expandAll
-        }
-      );
-    }))),
+    data && /* @__PURE__ */ React157.createElement(
+      ChartOfAccountsTable,
+      {
+        view,
+        data,
+        error,
+        stringOverrides,
+        expandAll,
+        accountsLength,
+        cumulativeIndex
+      }
+    ),
     error ? /* @__PURE__ */ React157.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React157.createElement(
       DataState,
       {
@@ -13779,7 +13687,7 @@ import React164, {
   useContext as useContext27,
   useEffect as useEffect41,
   useMemo as useMemo16,
-  useState as useState44
+  useState as useState45
 } from "react";
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
@@ -13787,9 +13695,9 @@ import React162, { useContext as useContext25, useMemo as useMemo15 } from "reac
 
 // src/components/Card/Card.tsx
 import React158 from "react";
-import classNames55 from "classnames";
+import classNames54 from "classnames";
 var Card = ({ children, className }) => {
-  return /* @__PURE__ */ React158.createElement("div", { className: classNames55("Layer__card", className) }, children);
+  return /* @__PURE__ */ React158.createElement("div", { className: classNames54("Layer__card", className) }, children);
 };
 
 // src/components/DateTime/DateTime.tsx
@@ -13831,14 +13739,14 @@ var DateTime = ({
 
 // src/components/DetailsList/DetailsList.tsx
 import React160 from "react";
-import classNames56 from "classnames";
+import classNames55 from "classnames";
 var DetailsList = ({
   title,
   children,
   className,
   actions
 }) => {
-  return /* @__PURE__ */ React160.createElement("div", { className: classNames56("Layer__details-list", className) }, title && /* @__PURE__ */ React160.createElement(Header, null, /* @__PURE__ */ React160.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ React160.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ React160.createElement("ul", { className: "Layer__details-list__list" }, children));
+  return /* @__PURE__ */ React160.createElement("div", { className: classNames55("Layer__details-list", className) }, title && /* @__PURE__ */ React160.createElement(Header, null, /* @__PURE__ */ React160.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ React160.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ React160.createElement("ul", { className: "Layer__details-list__list" }, children));
 };
 
 // src/components/DetailsList/DetailsListItem.tsx
@@ -14065,8 +13973,8 @@ var LedgerAccountEntryDetails = ({
 };
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
-import React163, { useContext as useContext26, useEffect as useEffect40, useState as useState43 } from "react";
-import classNames57 from "classnames";
+import React163, { useContext as useContext26, useEffect as useEffect40, useState as useState44 } from "react";
+import classNames56 from "classnames";
 import { parseISO as parseISO13, format as formatTime10 } from "date-fns";
 var LedgerAccountRow = ({
   row,
@@ -14075,7 +13983,7 @@ var LedgerAccountRow = ({
   view
 }) => {
   const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext26(LedgerAccountsContext);
-  const [showComponent, setShowComponent] = useState43(false);
+  const [showComponent, setShowComponent] = useState44(false);
   useEffect40(() => {
     if (initialLoad) {
       const timeoutId = setTimeout(() => {
@@ -14090,7 +13998,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ React163.createElement(
       "tr",
       {
-        className: classNames57(
+        className: classNames56(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -14123,7 +14031,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ React163.createElement(
       "tr",
       {
-        className: classNames57(
+        className: classNames56(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -14152,7 +14060,7 @@ var LedgerAccountRow = ({
   return /* @__PURE__ */ React163.createElement(
     "tr",
     {
-      className: classNames57(
+      className: classNames56(
         "Layer__table-row",
         row.entry_id === selectedEntryId && "Layer__table-row--active",
         initialLoad && "initial-load",
@@ -14178,15 +14086,15 @@ var LedgerAccountRow = ({
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-import classNames58 from "classnames";
+import classNames57 from "classnames";
 var LedgerAccount = ({
   containerRef,
   pageSize = 15,
   view,
   stringOverrides
 }) => {
-  const [currentPage, setCurrentPage] = useState44(1);
-  const [initialLoad, setInitialLoad] = useState44(true);
+  const [currentPage, setCurrentPage] = useState45(1);
+  const [initialLoad, setInitialLoad] = useState45(true);
   const { data: accountData } = useContext27(ChartOfAccountsContext);
   const {
     data: rawData,
@@ -14207,7 +14115,7 @@ var LedgerAccount = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [isLoading]);
-  const baseClassName = classNames58(
+  const baseClassName = classNames57(
     "Layer__ledger-account__index",
     accountId && "open"
   );
@@ -14313,7 +14221,7 @@ var ChartOfAccountsContent = ({
   stringOverrides
 }) => {
   const { accountId } = useContext28(LedgerAccountsContext);
-  const [view, setView] = useState45("desktop");
+  const [view, setView] = useState46("desktop");
   const containerRef = useElementSize((_a, _b, { width }) => {
     if (width) {
       if (width >= BREAKPOINTS.TABLET && view !== "desktop") {
@@ -14325,8 +14233,15 @@ var ChartOfAccountsContent = ({
       }
     }
   });
-  return /* @__PURE__ */ React165.createElement(Container, { name: "chart-of-accounts", ref: containerRef, asWidget }, accountId ? /* @__PURE__ */ React165.createElement(LedgerAccount, { view, containerRef, stringOverrides: stringOverrides?.ledgerAccount }) : /* @__PURE__ */ React165.createElement(
-    ChartOfAccountsTable,
+  return /* @__PURE__ */ React165.createElement(Container, { name: "chart-of-accounts", ref: containerRef, asWidget }, accountId ? /* @__PURE__ */ React165.createElement(
+    LedgerAccount,
+    {
+      view,
+      containerRef,
+      stringOverrides: stringOverrides?.ledgerAccount
+    }
+  ) : /* @__PURE__ */ React165.createElement(
+    ChartOfAccountsTableWithPanel,
     {
       asWidget,
       withDateControl,
@@ -14339,7 +14254,7 @@ var ChartOfAccountsContent = ({
 };
 
 // src/components/Journal/Journal.tsx
-import React172, { useState as useState49 } from "react";
+import React172, { useState as useState50 } from "react";
 
 // src/contexts/JournalContext/JournalContext.tsx
 import { createContext as createContext13 } from "react";
@@ -14376,7 +14291,7 @@ var JournalContext = createContext13({
 });
 
 // src/hooks/useJournal/useJournal.tsx
-import { useEffect as useEffect42, useState as useState46 } from "react";
+import { useEffect as useEffect42, useState as useState47 } from "react";
 
 // src/utils/journal.ts
 var getAccountIdentifierPayload = (journalLineItem) => {
@@ -14407,11 +14322,11 @@ var useJournal = () => {
     syncTimestamps,
     hasBeenTouched
   } = useLayerContext();
-  const [selectedEntryId, setSelectedEntryId] = useState46();
-  const [form, setForm] = useState46();
-  const [addingEntry, setAddingEntry] = useState46(false);
-  const [sendingForm, setSendingForm] = useState46(false);
-  const [apiError, setApiError] = useState46(void 0);
+  const [selectedEntryId, setSelectedEntryId] = useState47();
+  const [form, setForm] = useState47();
+  const [addingEntry, setAddingEntry] = useState47(false);
+  const [sendingForm, setSendingForm] = useState47(false);
+  const [apiError, setApiError] = useState47(void 0);
   const queryKey = businessId && auth?.access_token && `journal-lines-${businessId}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR9(
     queryKey,
@@ -14672,190 +14587,14 @@ var useJournal = () => {
   };
 };
 
-// src/components/JournalTable/JournalTable.tsx
-import React171, { useContext as useContext34, useMemo as useMemo18, useState as useState48 } from "react";
-
-// src/components/JournalRow/JournalRow.tsx
-import React166, { useContext as useContext29, useEffect as useEffect43, useState as useState47 } from "react";
-import classNames59 from "classnames";
-import { parseISO as parseISO14, format as formatTime11 } from "date-fns";
-var INDENTATION2 = 24;
-var EXPANDED_STYLE3 = {
-  height: "100%",
-  opacity: 1
-};
-var COLLAPSED_STYLE3 = {
-  height: 0,
-  opacity: 0.5,
-  paddingTop: 0,
-  paddingBottom: 0
-};
-var rowId = (row) => {
-  if ("id" in row) {
-    return row.id;
-  }
-  return `${row.account_identifier.id}-${Math.random()}`;
-};
-var accountName = (row) => {
-  if ("account" in row) {
-    return row.account.name;
-  }
-  return row.account_identifier.name;
-};
-var JournalRow = ({
-  row,
-  index,
-  initialLoad,
-  view,
-  lineItemsLength = 8,
-  defaultOpen = false,
-  expanded = false,
-  depth = 0,
-  cumulativeIndex = 0,
-  selectedEntries = false
-}) => {
-  const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext29(JournalContext);
-  const [isOpen, setIsOpen] = useState47(index === 0 ? true : defaultOpen);
-  const style = expanded ? {
-    ...EXPANDED_STYLE3,
-    transitionDelay: `${15 * index}ms`
-  } : {
-    ...COLLAPSED_STYLE3,
-    transitionDelay: `${lineItemsLength - 15 * index}ms`
-  };
-  const [showComponent, setShowComponent] = useState47(false);
-  const baseClass = classNames59(
-    "Layer__journal-table-row",
-    rowId(row) === selectedEntryId && "Layer__table-row--active",
-    initialLoad && "initial-load",
-    "Layer__table-row--with-show",
-    showComponent ? "show" : "Layer__table-row--anim-starting-state",
-    isOpen && "Layer__journal__table-row--expanded"
-  );
-  const journalEntryLineClass = classNames59(
-    "Layer__journal-entry-table-row",
-    selectedEntries && "Layer__table-row--active",
-    initialLoad && "initial-load",
-    "Layer__table-row--with-show",
-    showComponent ? "show" : "Layer__table-row--anim-starting-state",
-    "Layer__journal-line__table-row",
-    !expanded && "Layer__table-row--hidden"
-  );
-  useEffect43(() => {
-    if (initialLoad) {
-      const timeoutId = setTimeout(() => {
-        setShowComponent(true);
-      }, index * 10);
-      return () => clearTimeout(timeoutId);
-    } else {
-      setShowComponent(true);
-    }
-  }, []);
-  if ("line_items" in row) {
-    return /* @__PURE__ */ React166.createElement(React166.Fragment, null, /* @__PURE__ */ React166.createElement(
-      "tr",
-      {
-        className: baseClass,
-        style: { transitionDelay: `${15 * index}ms` },
-        onClick: (e) => {
-          e.stopPropagation();
-          if (selectedEntryId === row.id) {
-            closeSelectedEntry();
-          } else {
-            setSelectedEntryId(row.id);
-          }
-        }
-      },
-      /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell Layer__journal__arrow" }, /* @__PURE__ */ React166.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React166.createElement(
-        "span",
-        {
-          className: "Layer__table-cell-content-indentation",
-          style: {
-            paddingLeft: INDENTATION2 * depth + 16
-          },
-          onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            setIsOpen(!isOpen);
-          }
-        },
-        row.line_items && row.line_items.length > 0 && /* @__PURE__ */ React166.createElement(
-          ChevronDownFill_default,
-          {
-            size: 16,
-            className: "Layer__table__expand-icon",
-            style: {
-              transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)"
-            }
-          }
-        )
-      ))),
-      /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React166.createElement("span", { className: "Layer__table-cell-content" }, row.id.substring(0, 5))),
-      /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React166.createElement("span", { className: "Layer__table-cell-content" }, row.date && formatTime11(parseISO14(row.date), DATE_FORMAT))),
-      /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React166.createElement("span", { className: "Layer__table-cell-content" }, humanizeEnum(row.entry_type))),
-      /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React166.createElement("span", { className: "Layer__table-cell-content" }, `(${row.line_items.length})`)),
-      /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React166.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, "$", centsToDollars(
-        Math.abs(
-          row.line_items.filter((item) => item.direction === "DEBIT").map((item) => item.amount).reduce((a, b) => a + b, 0)
-        )
-      ))),
-      /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React166.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, "$", centsToDollars(
-        Math.abs(
-          row.line_items.filter((item) => item.direction === "CREDIT").map((item) => item.amount).reduce((a, b) => a + b, 0)
-        )
-      )))
-    ), (row.line_items || []).map((lineItem, idx) => /* @__PURE__ */ React166.createElement(
-      JournalRow,
-      {
-        key: `${row.id}-${idx}`,
-        row: lineItem,
-        depth: depth + 1,
-        index: idx,
-        expanded: isOpen,
-        cumulativeIndex: cumulativeIndex + idx + 1,
-        lineItemsLength: (row.line_items ?? []).length,
-        view,
-        selectedEntries: row.id === selectedEntryId
-      }
-    )));
-  }
-  return /* @__PURE__ */ React166.createElement(
-    "tr",
-    {
-      className: journalEntryLineClass,
-      style: { transitionDelay: `${15 * index}ms` }
-    },
-    /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React166.createElement("span", { className: "Layer__table-cell-content", style })),
-    /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React166.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React166.createElement("span", { className: "Layer__table-cell-hidden" }, rowId(row).substring(0, 5)))),
-    /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell" }),
-    /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell" }),
-    /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React166.createElement("span", { className: "Layer__table-cell-content", style }, accountName(row))),
-    /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, row.direction === "DEBIT" && /* @__PURE__ */ React166.createElement(
-      "span",
-      {
-        className: "Layer__table-cell-content Layer__table-cell--amount",
-        style
-      },
-      "$",
-      centsToDollars(Math.abs(row.amount))
-    )),
-    /* @__PURE__ */ React166.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, row.direction === "CREDIT" && /* @__PURE__ */ React166.createElement(
-      "span",
-      {
-        className: "Layer__table-cell-content Layer__table-cell--amount",
-        style
-      },
-      "$",
-      centsToDollars(Math.abs(row.amount))
-    ))
-  );
-};
+// src/components/JournalTable/JournalTableWithPanel.tsx
+import React171, { useContext as useContext34, useMemo as useMemo18, useState as useState49 } from "react";
 
 // src/components/JournalSidebar/JournalSidebar.tsx
-import React170, { useContext as useContext33 } from "react";
+import React169, { useContext as useContext32 } from "react";
 
 // src/components/JournalEntryDetails/JournalEntryDetails.tsx
-import React167, { useContext as useContext30, useMemo as useMemo17 } from "react";
+import React166, { useContext as useContext29, useMemo as useMemo17 } from "react";
 var JournalEntryDetails = () => {
   const {
     data,
@@ -14863,21 +14602,21 @@ var JournalEntryDetails = () => {
     errorEntry,
     closeSelectedEntry,
     selectedEntryId
-  } = useContext30(JournalContext);
+  } = useContext29(JournalContext);
   const entry = useMemo17(() => {
     if (selectedEntryId && data) {
       return data.find((x) => x.id === selectedEntryId);
     }
     return;
   }, [data, selectedEntryId]);
-  return /* @__PURE__ */ React167.createElement("div", { className: "Layer__journal__entry-details" }, /* @__PURE__ */ React167.createElement(
+  return /* @__PURE__ */ React166.createElement("div", { className: "Layer__journal__entry-details" }, /* @__PURE__ */ React166.createElement(
     DetailsList,
     {
       title: "Transaction source",
-      actions: /* @__PURE__ */ React167.createElement(
+      actions: /* @__PURE__ */ React166.createElement(
         Button,
         {
-          rightIcon: /* @__PURE__ */ React167.createElement(X_default, null),
+          rightIcon: /* @__PURE__ */ React166.createElement(X_default, null),
           iconOnly: true,
           onClick: closeSelectedEntry,
           className: "Layer__details-list__close-btn",
@@ -14885,54 +14624,54 @@ var JournalEntryDetails = () => {
         }
       )
     },
-    /* @__PURE__ */ React167.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ React167.createElement(Badge, null, entry?.source?.entity_name)),
-    entry?.source?.display_description && /* @__PURE__ */ React167.createElement(SourceDetailView, { source: entry?.source })
-  ), /* @__PURE__ */ React167.createElement(
+    /* @__PURE__ */ React166.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ React166.createElement(Badge, null, entry?.source?.entity_name)),
+    entry?.source?.display_description && /* @__PURE__ */ React166.createElement(SourceDetailView, { source: entry?.source })
+  ), /* @__PURE__ */ React166.createElement(
     DetailsList,
     {
       title: `Journal Entry ${entry?.id.substring(0, 5)}`,
       className: "Layer__border-top"
     },
-    /* @__PURE__ */ React167.createElement(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry }, humanizeEnum(entry?.entry_type ?? "")),
-    /* @__PURE__ */ React167.createElement(DetailsListItem, { label: "Date", isLoading: isLoadingEntry }, entry?.entry_at && /* @__PURE__ */ React167.createElement(DateTime, { value: entry?.entry_at })),
-    /* @__PURE__ */ React167.createElement(DetailsListItem, { label: "Creation date", isLoading: isLoadingEntry }, entry?.date && /* @__PURE__ */ React167.createElement(DateTime, { value: entry?.date })),
-    entry?.reversal_id && /* @__PURE__ */ React167.createElement(DetailsListItem, { label: "Reversal", isLoading: isLoadingEntry }, "Journal Entry #", entry?.reversal_id)
-  ), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ React167.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ React167.createElement(Card, null, /* @__PURE__ */ React167.createElement(
+    /* @__PURE__ */ React166.createElement(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry }, humanizeEnum(entry?.entry_type ?? "")),
+    /* @__PURE__ */ React166.createElement(DetailsListItem, { label: "Date", isLoading: isLoadingEntry }, entry?.entry_at && /* @__PURE__ */ React166.createElement(DateTime, { value: entry?.entry_at })),
+    /* @__PURE__ */ React166.createElement(DetailsListItem, { label: "Creation date", isLoading: isLoadingEntry }, entry?.date && /* @__PURE__ */ React166.createElement(DateTime, { value: entry?.date })),
+    entry?.reversal_id && /* @__PURE__ */ React166.createElement(DetailsListItem, { label: "Reversal", isLoading: isLoadingEntry }, "Journal Entry #", entry?.reversal_id)
+  ), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ React166.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ React166.createElement(Card, null, /* @__PURE__ */ React166.createElement(
     Table,
     {
       componentName: "ledger-account__entry-details",
       borderCollapse: "collapse"
     },
-    /* @__PURE__ */ React167.createElement(TableHead, null, /* @__PURE__ */ React167.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React167.createElement(TableCell, null, "Line items"), [...Array(3)].map((_, index) => /* @__PURE__ */ React167.createElement(TableCell, { key: `ledger-empty-cell-${index}` })), /* @__PURE__ */ React167.createElement(TableCell, null, "Debit"), /* @__PURE__ */ React167.createElement(TableCell, null, "Credit"))),
-    /* @__PURE__ */ React167.createElement(TableBody, null, entry?.line_items?.map((item, index) => /* @__PURE__ */ React167.createElement(
+    /* @__PURE__ */ React166.createElement(TableHead, null, /* @__PURE__ */ React166.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React166.createElement(TableCell, null, "Line items"), [...Array(3)].map((_, index) => /* @__PURE__ */ React166.createElement(TableCell, { key: `ledger-empty-cell-${index}` })), /* @__PURE__ */ React166.createElement(TableCell, null, "Debit"), /* @__PURE__ */ React166.createElement(TableCell, null, "Credit"))),
+    /* @__PURE__ */ React166.createElement(TableBody, null, entry?.line_items?.map((item, index) => /* @__PURE__ */ React166.createElement(
       TableRow,
       {
         key: `ledger-line-item-${index}`,
         rowKey: `ledger-line-item-${index}`
       },
-      /* @__PURE__ */ React167.createElement(TableCell, null, item.account_identifier?.name || ""),
-      [...Array(3)].map((_, index2) => /* @__PURE__ */ React167.createElement(TableCell, { key: `ledger-empty-cell-${index2}` })),
-      /* @__PURE__ */ React167.createElement(TableCell, null, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ React167.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))),
-      /* @__PURE__ */ React167.createElement(TableCell, null, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ React167.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0)))
-    )), /* @__PURE__ */ React167.createElement(
+      /* @__PURE__ */ React166.createElement(TableCell, null, item.account_identifier?.name || ""),
+      [...Array(3)].map((_, index2) => /* @__PURE__ */ React166.createElement(TableCell, { key: `ledger-empty-cell-${index2}` })),
+      /* @__PURE__ */ React166.createElement(TableCell, null, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ React166.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))),
+      /* @__PURE__ */ React166.createElement(TableCell, null, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ React166.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0)))
+    )), /* @__PURE__ */ React166.createElement(
       TableRow,
       {
         rowKey: "ledger-line-item-summation",
         variant: "summation"
       },
-      /* @__PURE__ */ React167.createElement(TableCell, { primary: true }, "Total"),
-      [...Array(3)].map((_, index) => /* @__PURE__ */ React167.createElement(TableCell, { key: `ledger-empty-cell-${index}` })),
-      /* @__PURE__ */ React167.createElement(TableCell, { isCurrency: true, primary: true }, entry?.line_items.filter((item) => item.direction === "DEBIT").map((item) => item.amount).reduce((a, b) => a + b, 0) || 0),
-      /* @__PURE__ */ React167.createElement(TableCell, { isCurrency: true, primary: true }, entry?.line_items.filter((item) => item.direction === "CREDIT").map((item) => item.amount).reduce((a, b) => a + b, 0) || 0)
+      /* @__PURE__ */ React166.createElement(TableCell, { primary: true }, "Total"),
+      [...Array(3)].map((_, index) => /* @__PURE__ */ React166.createElement(TableCell, { key: `ledger-empty-cell-${index}` })),
+      /* @__PURE__ */ React166.createElement(TableCell, { isCurrency: true, primary: true }, entry?.line_items.filter((item) => item.direction === "DEBIT").map((item) => item.amount).reduce((a, b) => a + b, 0) || 0),
+      /* @__PURE__ */ React166.createElement(TableCell, { isCurrency: true, primary: true }, entry?.line_items.filter((item) => item.direction === "CREDIT").map((item) => item.amount).reduce((a, b) => a + b, 0) || 0)
     ))
   ))) : null);
 };
 
 // src/components/JournalForm/JournalForm.tsx
-import React169, { useContext as useContext32 } from "react";
+import React168, { useContext as useContext31 } from "react";
 
 // src/components/JournalForm/JournalFormEntryLines.tsx
-import React168, { useContext as useContext31 } from "react";
+import React167, { useContext as useContext30 } from "react";
 var JournalFormEntryLines = ({
   entrylineItems,
   addEntryLine,
@@ -14941,17 +14680,17 @@ var JournalFormEntryLines = ({
   sendingForm,
   config
 }) => {
-  const { data: accountsData } = useContext31(ChartOfAccountsContext);
-  const { form } = useContext31(JournalContext);
+  const { data: accountsData } = useContext30(ChartOfAccountsContext);
+  const { form } = useContext30(JournalContext);
   const parentOptions = useParentOptions(accountsData);
-  return /* @__PURE__ */ React168.createElement(React168.Fragment, null, Object.keys(Direction).map((direction, idx) => {
-    return /* @__PURE__ */ React168.createElement(
+  return /* @__PURE__ */ React167.createElement(React167.Fragment, null, Object.keys(Direction).map((direction, idx) => {
+    return /* @__PURE__ */ React167.createElement(
       "div",
       {
         key: "Layer__journal__form__input-group-" + idx,
         className: "Layer__journal__form__input-group Layer__journal__form__input-group__border"
       },
-      /* @__PURE__ */ React168.createElement(
+      /* @__PURE__ */ React167.createElement(
         Text,
         {
           className: "Layer__journal__form__input-group__title",
@@ -14965,13 +14704,13 @@ var JournalFormEntryLines = ({
         if (item.direction !== direction) {
           return null;
         }
-        return /* @__PURE__ */ React168.createElement(
+        return /* @__PURE__ */ React167.createElement(
           "div",
           {
             className: "Layer__journal__form__input-group__line-item",
             key: direction + "-" + idx2
           },
-          /* @__PURE__ */ React168.createElement(InputGroup, { name: direction, label: "Amount", inline: true }, /* @__PURE__ */ React168.createElement(
+          /* @__PURE__ */ React167.createElement(InputGroup, { name: direction, label: "Amount", inline: true }, /* @__PURE__ */ React167.createElement(
             InputWithBadge,
             {
               name: direction,
@@ -14997,14 +14736,14 @@ var JournalFormEntryLines = ({
               )?.message
             }
           )),
-          /* @__PURE__ */ React168.createElement(
+          /* @__PURE__ */ React167.createElement(
             InputGroup,
             {
               name: "account-name",
               label: "Account name",
               inline: true
             },
-            /* @__PURE__ */ React168.createElement(
+            /* @__PURE__ */ React167.createElement(
               Select2,
               {
                 options: parentOptions,
@@ -15028,18 +14767,18 @@ var JournalFormEntryLines = ({
                 )?.message
               }
             ),
-            idx2 >= 2 && /* @__PURE__ */ React168.createElement(
+            idx2 >= 2 && /* @__PURE__ */ React167.createElement(
               IconButton,
               {
                 className: "Layer__remove__button",
                 onClick: () => removeEntryLine(idx2),
-                icon: /* @__PURE__ */ React168.createElement(Trash_default, null)
+                icon: /* @__PURE__ */ React167.createElement(Trash_default, null)
               }
             )
           )
         );
       }),
-      (config.form.addEntryLinesLimit === void 0 || config.form.addEntryLinesLimit > entrylineItems?.length) && /* @__PURE__ */ React168.createElement(
+      (config.form.addEntryLinesLimit === void 0 || config.form.addEntryLinesLimit > entrylineItems?.length) && /* @__PURE__ */ React167.createElement(
         TextButton,
         {
           className: "Layer__journal__add-entry-line",
@@ -15062,8 +14801,8 @@ var JournalForm = ({ config, stringOverrides }) => {
     changeFormData,
     addEntryLine,
     removeEntryLine
-  } = useContext32(JournalContext);
-  return /* @__PURE__ */ React169.createElement(
+  } = useContext31(JournalContext);
+  return /* @__PURE__ */ React168.createElement(
     "form",
     {
       className: "Layer__form",
@@ -15072,7 +14811,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         submitForm();
       }
     },
-    /* @__PURE__ */ React169.createElement("div", { className: "Layer__journal__sidebar__header" }, /* @__PURE__ */ React169.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, stringOverrides?.header && "Add New Entry"), /* @__PURE__ */ React169.createElement("div", { className: "actions" }, /* @__PURE__ */ React169.createElement(
+    /* @__PURE__ */ React168.createElement("div", { className: "Layer__journal__sidebar__header" }, /* @__PURE__ */ React168.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, stringOverrides?.header && "Add New Entry"), /* @__PURE__ */ React168.createElement("div", { className: "actions" }, /* @__PURE__ */ React168.createElement(
       Button,
       {
         type: "button",
@@ -15081,7 +14820,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.cancelButton || "Cancel"
-    ), apiError && /* @__PURE__ */ React169.createElement(
+    ), apiError && /* @__PURE__ */ React168.createElement(
       RetryButton,
       {
         type: "submit",
@@ -15090,7 +14829,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.retryButton || "Retry"
-    ), !apiError && /* @__PURE__ */ React169.createElement(
+    ), !apiError && /* @__PURE__ */ React168.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -15100,7 +14839,7 @@ var JournalForm = ({ config, stringOverrides }) => {
       },
       stringOverrides?.saveButton || "Save"
     ))),
-    apiError && /* @__PURE__ */ React169.createElement(
+    apiError && /* @__PURE__ */ React168.createElement(
       Text,
       {
         size: "sm" /* sm */,
@@ -15108,7 +14847,7 @@ var JournalForm = ({ config, stringOverrides }) => {
       },
       apiError
     ),
-    /* @__PURE__ */ React169.createElement("div", { className: "Layer__journal__form__input-group" }, /* @__PURE__ */ React169.createElement(InputGroup, { name: "date", label: "Date", inline: true }, /* @__PURE__ */ React169.createElement("div", { className: "Layer__journal__datepicker__wrapper" }, /* @__PURE__ */ React169.createElement(
+    /* @__PURE__ */ React168.createElement("div", { className: "Layer__journal__form__input-group" }, /* @__PURE__ */ React168.createElement(InputGroup, { name: "date", label: "Date", inline: true }, /* @__PURE__ */ React168.createElement("div", { className: "Layer__journal__datepicker__wrapper" }, /* @__PURE__ */ React168.createElement(
       DatePicker,
       {
         selected: form?.data.entry_at ? new Date(form?.data.entry_at) : /* @__PURE__ */ new Date(),
@@ -15121,7 +14860,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         placeholderText: "Select date",
         currentDateOption: false
       }
-    ), /* @__PURE__ */ React169.createElement(
+    ), /* @__PURE__ */ React168.createElement(
       DatePicker,
       {
         selected: form?.data.entry_at ? new Date(form?.data.entry_at) : /* @__PURE__ */ new Date(),
@@ -15135,7 +14874,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         currentDateOption: false
       }
     )))),
-    /* @__PURE__ */ React169.createElement(
+    /* @__PURE__ */ React168.createElement(
       JournalFormEntryLines,
       {
         entrylineItems: form?.data.line_items || [],
@@ -15146,7 +14885,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         config
       }
     ),
-    /* @__PURE__ */ React169.createElement("div", { className: "Layer__journal__form__input-group Layer__journal__form__input-group__textarea" }, /* @__PURE__ */ React169.createElement(InputGroup, { name: "memo", label: "Notes" }, /* @__PURE__ */ React169.createElement(
+    /* @__PURE__ */ React168.createElement("div", { className: "Layer__journal__form__input-group Layer__journal__form__input-group__textarea" }, /* @__PURE__ */ React168.createElement(InputGroup, { name: "memo", label: "Notes" }, /* @__PURE__ */ React168.createElement(
       Textarea,
       {
         name: "memo",
@@ -15156,7 +14895,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       }
     ))),
-    /* @__PURE__ */ React169.createElement("div", { className: "Layer__journal__bottom-actions" }, /* @__PURE__ */ React169.createElement(
+    /* @__PURE__ */ React168.createElement("div", { className: "Layer__journal__bottom-actions" }, /* @__PURE__ */ React168.createElement(
       Button,
       {
         type: "button",
@@ -15165,7 +14904,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.cancelButton || "Cancel"
-    ), apiError && /* @__PURE__ */ React169.createElement(
+    ), apiError && /* @__PURE__ */ React168.createElement(
       RetryButton,
       {
         type: "submit",
@@ -15174,7 +14913,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.retryButton || "Retry"
-    ), !apiError && /* @__PURE__ */ React169.createElement(
+    ), !apiError && /* @__PURE__ */ React168.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -15193,23 +14932,127 @@ var JournalSidebar = ({
   config,
   stringOverrides
 }) => {
-  const { selectedEntryId } = useContext33(JournalContext);
+  const { selectedEntryId } = useContext32(JournalContext);
   if (selectedEntryId !== "new") {
-    return /* @__PURE__ */ React170.createElement(JournalEntryDetails, null);
+    return /* @__PURE__ */ React169.createElement(JournalEntryDetails, null);
   }
-  return /* @__PURE__ */ React170.createElement(JournalForm, { config, stringOverrides });
+  return /* @__PURE__ */ React169.createElement(JournalForm, { config, stringOverrides });
 };
 
 // src/components/JournalTable/JournalTable.tsx
-var COMPONENT_NAME6 = "journal";
+import React170, { useContext as useContext33, useEffect as useEffect43 } from "react";
+import { parseISO as parseISO14, format as formatTime11 } from "date-fns";
+var rowId = (row) => {
+  if ("id" in row) {
+    return row.id;
+  }
+  if ("account_identifier" in row) {
+    return `${row.account_identifier.id}-${Math.random()}`;
+  }
+  return `${Math.random()}`;
+};
+var accountName = (row) => {
+  if ("account" in row) {
+    return row.account.name;
+  }
+  if ("account_identifier" in row) {
+    return row.account_identifier.name;
+  }
+  return "";
+};
 var JournalTable = ({
   view,
+  data,
+  stringOverrides
+}) => /* @__PURE__ */ React170.createElement(TableProvider, null, /* @__PURE__ */ React170.createElement(
+  JournalTableContent,
+  {
+    view,
+    data,
+    stringOverrides
+  }
+));
+var JournalTableContent = ({
+  view,
+  data,
+  stringOverrides
+}) => {
+  const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext33(JournalContext);
+  const { isOpen, setIsOpen } = useTableExpandRow();
+  useEffect43(() => {
+    setIsOpen([`journal-row- + ${data[0].id}`]);
+  }, []);
+  const renderJournalRow = (row, index, rowKey, depth) => {
+    const expandable = !!row.line_items && row.line_items.length > 0;
+    const expanded = expandable ? isOpen(rowKey) : true;
+    return /* @__PURE__ */ React170.createElement(React170.Fragment, { key: rowKey + "-" + index }, /* @__PURE__ */ React170.createElement(
+      TableRow,
+      {
+        rowKey: rowKey + "-" + index,
+        expandable,
+        isExpanded: expanded,
+        handleExpand: () => setIsOpen(rowKey),
+        selected: selectedEntryId === row.id,
+        onClick: (e) => {
+          e.stopPropagation();
+          if (selectedEntryId === row.id) {
+            closeSelectedEntry();
+          } else {
+            setSelectedEntryId(row.id);
+          }
+        },
+        depth
+      },
+      /* @__PURE__ */ React170.createElement(
+        TableCell,
+        {
+          withExpandIcon: expandable,
+          onClick: (e) => {
+            e.stopPropagation();
+            expandable && setIsOpen(rowKey);
+          }
+        },
+        rowId(row).substring(0, 5)
+      ),
+      /* @__PURE__ */ React170.createElement(TableCell, null, row.date && formatTime11(parseISO14(row.date), DATE_FORMAT)),
+      /* @__PURE__ */ React170.createElement(TableCell, null, humanizeEnum(row.entry_type)),
+      /* @__PURE__ */ React170.createElement(TableCell, null, "(", row.line_items.length, ")"),
+      /* @__PURE__ */ React170.createElement(TableCell, { isCurrency: true, primary: true }, "line_items" in row && Math.abs(
+        row.line_items.filter((item) => item.direction === "DEBIT").map((item) => item.amount).reduce((a, b) => a + b, 0)
+      )),
+      /* @__PURE__ */ React170.createElement(TableCell, { isCurrency: true, primary: true }, "line_items" in row && Math.abs(
+        row.line_items.filter((item) => item.direction === "CREDIT").map((item) => item.amount).reduce((a, b) => a + b, 0)
+      ))
+    ), expandable && expanded && row.line_items.map((subItem, subIdx) => /* @__PURE__ */ React170.createElement(
+      TableRow,
+      {
+        key: rowKey + "-" + index + "-" + subIdx,
+        rowKey: rowKey + "-" + index + "-" + subIdx,
+        depth: depth + 1,
+        selected: selectedEntryId === row.id
+      },
+      /* @__PURE__ */ React170.createElement(TableCell, null),
+      /* @__PURE__ */ React170.createElement(TableCell, null),
+      /* @__PURE__ */ React170.createElement(TableCell, null),
+      /* @__PURE__ */ React170.createElement(TableCell, null, accountName(subItem)),
+      subItem.direction === "DEBIT" && subItem.amount > 0 ? /* @__PURE__ */ React170.createElement(TableCell, { isCurrency: true, primary: true }, subItem.amount) : /* @__PURE__ */ React170.createElement(TableCell, null),
+      subItem.direction === "CREDIT" && subItem.amount > 0 ? /* @__PURE__ */ React170.createElement(TableCell, { isCurrency: true, primary: true }, subItem.amount) : /* @__PURE__ */ React170.createElement(TableCell, null)
+    )));
+  };
+  return /* @__PURE__ */ React170.createElement(Table, { borderCollapse: "collapse" }, /* @__PURE__ */ React170.createElement(TableHead, null, /* @__PURE__ */ React170.createElement(TableRow, { isHeadRow: true, rowKey: "journal-head-row" }, /* @__PURE__ */ React170.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.idColumnHeader || "Id"), /* @__PURE__ */ React170.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.dateColumnHeader || "Date"), /* @__PURE__ */ React170.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.transactionColumnHeader || "Transaction"), /* @__PURE__ */ React170.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.accountColumnHeader || "Account"), /* @__PURE__ */ React170.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.debitColumnHeader || "Debit"), /* @__PURE__ */ React170.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.creditColumnHeader || "Credit"))), /* @__PURE__ */ React170.createElement(TableBody, null, data.map(
+    (entry, idx) => renderJournalRow(entry, idx, `journal-row-${entry.id}`, 0)
+  )));
+};
+
+// src/components/JournalTable/JournalTableWithPanel.tsx
+var COMPONENT_NAME6 = "journal";
+var JournalTableWithPanel = ({
   containerRef,
   pageSize = 15,
   config,
   stringOverrides
 }) => {
-  const [currentPage, setCurrentPage] = useState48(1);
+  const [currentPage, setCurrentPage] = useState49(1);
   const {
     data: rawData,
     isLoading,
@@ -15227,22 +15070,19 @@ var JournalTable = ({
   return /* @__PURE__ */ React171.createElement(
     Panel,
     {
-      sidebar: /* @__PURE__ */ React171.createElement(JournalSidebar, { parentRef: containerRef, config, stringOverrides: stringOverrides?.journalForm }),
+      sidebar: /* @__PURE__ */ React171.createElement(
+        JournalSidebar,
+        {
+          parentRef: containerRef,
+          config,
+          stringOverrides: stringOverrides?.journalForm
+        }
+      ),
       sidebarIsOpen: Boolean(selectedEntryId),
       parentRef: containerRef
     },
     /* @__PURE__ */ React171.createElement(Header, { className: `Layer__${COMPONENT_NAME6}__header` }, /* @__PURE__ */ React171.createElement(Heading, { className: `Layer__${COMPONENT_NAME6}__title` }, stringOverrides?.componentTitle || "Journal"), /* @__PURE__ */ React171.createElement("div", { className: `Layer__${COMPONENT_NAME6}__actions` }, /* @__PURE__ */ React171.createElement(Button, { onClick: () => addEntry(), disabled: isLoading }, stringOverrides?.addEntryButton || "Add Entry"))),
-    /* @__PURE__ */ React171.createElement("table", { className: "Layer__table Layer__table--hover-effect Layer__journal__table" }, /* @__PURE__ */ React171.createElement("thead", null, /* @__PURE__ */ React171.createElement("tr", null, /* @__PURE__ */ React171.createElement("th", { className: "Layer__table-header" }), /* @__PURE__ */ React171.createElement("th", { className: "Layer__table-header" }, stringOverrides?.idColumnHeader || "Id"), /* @__PURE__ */ React171.createElement("th", { className: "Layer__table-header" }, stringOverrides?.dateColumnHeader || "Date"), /* @__PURE__ */ React171.createElement("th", { className: "Layer__table-header" }, stringOverrides?.transactionColumnHeader || "Transaction"), /* @__PURE__ */ React171.createElement("th", { className: "Layer__table-header" }, stringOverrides?.accountColumnHeader || "Account"), /* @__PURE__ */ React171.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.debitColumnHeader || "Debit"), /* @__PURE__ */ React171.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.creditColumnHeader || "Credit"))), /* @__PURE__ */ React171.createElement("tbody", null, !error && data?.map((entry, idx) => {
-      return /* @__PURE__ */ React171.createElement(
-        JournalRow,
-        {
-          key: "journal-row-" + idx + entry.id,
-          index: idx,
-          view,
-          row: entry
-        }
-      );
-    }))),
+    data && /* @__PURE__ */ React171.createElement(JournalTable, { view: "desktop", data }),
     data && /* @__PURE__ */ React171.createElement("div", { className: "Layer__journal__pagination" }, /* @__PURE__ */ React171.createElement(
       Pagination,
       {
@@ -15275,14 +15115,14 @@ var JOURNAL_CONFIG = {
 var Journal = (props) => {
   const JournalContextData = useJournal();
   const AccountsContextData = useChartOfAccounts();
-  return /* @__PURE__ */ React172.createElement(ChartOfAccountsContext.Provider, { value: AccountsContextData }, /* @__PURE__ */ React172.createElement(JournalContext.Provider, { value: JournalContextData }, /* @__PURE__ */ React172.createElement(TableProvider, null, /* @__PURE__ */ React172.createElement(JournalContent, { ...props }))));
+  return /* @__PURE__ */ React172.createElement(ChartOfAccountsContext.Provider, { value: AccountsContextData }, /* @__PURE__ */ React172.createElement(JournalContext.Provider, { value: JournalContextData }, /* @__PURE__ */ React172.createElement(JournalContent, { ...props })));
 };
 var JournalContent = ({
   asWidget,
   config = JOURNAL_CONFIG,
   stringOverrides
 }) => {
-  const [view, setView] = useState49("desktop");
+  const [view, setView] = useState50("desktop");
   const containerRef = useElementSize((_a, _b, { width }) => {
     if (width) {
       if (width >= BREAKPOINTS.TABLET && view !== "desktop") {
@@ -15295,7 +15135,7 @@ var JournalContent = ({
     }
   });
   return /* @__PURE__ */ React172.createElement(Container, { name: "journal", ref: containerRef, asWidget }, /* @__PURE__ */ React172.createElement(
-    JournalTable,
+    JournalTableWithPanel,
     {
       view,
       containerRef,
@@ -15311,7 +15151,7 @@ import React179, {
   useContext as useContext39,
   useEffect as useEffect47,
   useMemo as useMemo20,
-  useState as useState53
+  useState as useState54
 } from "react";
 
 // src/contexts/TasksContext/TasksContext.tsx
@@ -15328,10 +15168,10 @@ var TasksContext = createContext14({
 });
 
 // src/hooks/useTasks/useTasks.tsx
-import { useEffect as useEffect44, useState as useState50 } from "react";
+import { useEffect as useEffect44, useState as useState51 } from "react";
 import useSWR10 from "swr";
 var useTasks = () => {
-  const [loadedStatus, setLoadedStatus] = useState50("initial");
+  const [loadedStatus, setLoadedStatus] = useState51("initial");
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
   const queryKey = businessId && auth?.access_token && `tasks-${businessId}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR10(
@@ -15521,7 +15361,7 @@ var TasksHeader = ({
 };
 
 // src/components/TasksList/TasksList.tsx
-import React177, { useContext as useContext37, useMemo as useMemo19, useState as useState52 } from "react";
+import React177, { useContext as useContext37, useMemo as useMemo19, useState as useState53 } from "react";
 
 // src/icons/SmileIcon.tsx
 import * as React175 from "react";
@@ -15575,26 +15415,26 @@ var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React175.createElem
 var SmileIcon_default = SmileIcon;
 
 // src/components/TasksListItem/TasksListItem.tsx
-import React176, { useContext as useContext36, useEffect as useEffect45, useState as useState51 } from "react";
-import classNames60 from "classnames";
+import React176, { useContext as useContext36, useEffect as useEffect45, useState as useState52 } from "react";
+import classNames58 from "classnames";
 var TasksListItem = ({
   task,
   goToNextPageIfAllComplete,
   defaultOpen
 }) => {
-  const [isOpen, setIsOpen] = useState51(defaultOpen);
-  const [userResponse, setUserResponse] = useState51(task.user_response || "");
+  const [isOpen, setIsOpen] = useState52(defaultOpen);
+  const [userResponse, setUserResponse] = useState52(task.user_response || "");
   const { submitResponseToTask: submitResponseToTask2 } = useContext36(TasksContext);
-  const taskBodyClassName = classNames60(
+  const taskBodyClassName = classNames58(
     "Layer__tasks-list-item__body",
     isOpen && "Layer__tasks-list-item__body--expanded",
     isComplete(task.status) && "Layer__tasks-list-item--completed"
   );
-  const taskHeadClassName = classNames60(
+  const taskHeadClassName = classNames58(
     "Layer__tasks-list-item__head-info",
     isComplete(task.status) ? "Layer__tasks-list-item--completed" : "Layer__tasks-list-item--pending"
   );
-  const taskItemClassName = classNames60(
+  const taskItemClassName = classNames58(
     "Layer__tasks-list-item",
     isOpen && "Layer__tasks-list-item__expanded"
   );
@@ -15655,7 +15495,7 @@ var TasksList = ({ pageSize = 10 }) => {
     tasks || [],
     pageSize
   ).findIndex((page) => page.some((task) => !isComplete(task.status)));
-  const [currentPage, setCurrentPage] = useState52(
+  const [currentPage, setCurrentPage] = useState53(
     firstPageWithIincompleteTasks === -1 ? 1 : firstPageWithIincompleteTasks + 1
   );
   const sortedTasks = useMemo19(() => {
@@ -15693,7 +15533,7 @@ var TasksList = ({ pageSize = 10 }) => {
 
 // src/components/TasksPending/TasksPending.tsx
 import React178, { useContext as useContext38 } from "react";
-import classNames61 from "classnames";
+import classNames59 from "classnames";
 import { format as format7 } from "date-fns";
 import { Cell as Cell4, Pie as Pie3, PieChart as PieChart4 } from "recharts";
 var TasksPending = () => {
@@ -15709,7 +15549,7 @@ var TasksPending = () => {
       value: data?.filter((task) => !isComplete(task.status)).length
     }
   ];
-  const taskStatusClassName = classNames61(
+  const taskStatusClassName = classNames59(
     completedTasks && completedTasks > 0 ? "Layer__tasks-pending-bar__status--done" : "Layer__tasks-pending-bar__status--pending"
   );
   return /* @__PURE__ */ React178.createElement("div", { className: "Layer__tasks-pending" }, /* @__PURE__ */ React178.createElement(Text, { size: "lg" /* lg */ }, format7(Date.now(), "MMMM")), /* @__PURE__ */ React178.createElement("div", { className: "Layer__tasks-pending-bar" }, /* @__PURE__ */ React178.createElement(Text, { size: "sm" /* sm */ }, /* @__PURE__ */ React178.createElement("span", { className: taskStatusClassName }, completedTasks), "/", data?.length, " done"), /* @__PURE__ */ React178.createElement(PieChart4, { width: 24, height: 24, className: "mini-chart" }, /* @__PURE__ */ React178.createElement(
@@ -15743,7 +15583,7 @@ var TasksPending = () => {
 };
 
 // src/components/Tasks/Tasks.tsx
-import classNames62 from "classnames";
+import classNames60 from "classnames";
 var UseTasksContext = createContext15({
   data: void 0,
   isLoading: void 0,
@@ -15796,7 +15636,7 @@ var TasksComponent = ({
     }
     return false;
   }, [data, isLoading]);
-  const [open, setOpen] = useState53(
+  const [open, setOpen] = useState54(
     defaultCollapsed || collapsedWhenComplete ? false : true
   );
   useEffect47(() => {
@@ -15815,7 +15655,7 @@ var TasksComponent = ({
   ), /* @__PURE__ */ React179.createElement(
     "div",
     {
-      className: classNames62(
+      className: classNames60(
         "Layer__tasks__content",
         !open && "Layer__tasks__content--collapsed"
       )
@@ -15908,14 +15748,14 @@ var BookkeepingUpsellBar = ({
 };
 
 // src/views/BookkeepingOverview/BookkeepingOverview.tsx
-import React182, { useState as useState54 } from "react";
-import classNames63 from "classnames";
+import React182, { useState as useState55 } from "react";
+import classNames61 from "classnames";
 var BookkeepingOverview = ({
   title,
   // deprecated
   stringOverrides
 }) => {
-  const [pnlToggle, setPnlToggle] = useState54("expenses");
+  const [pnlToggle, setPnlToggle] = useState55("expenses");
   const [width] = useWindowSize();
   return /* @__PURE__ */ React182.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React182.createElement(TasksProvider, null, /* @__PURE__ */ React182.createElement(
     View,
@@ -15975,7 +15815,7 @@ var BookkeepingOverview = ({
     ), /* @__PURE__ */ React182.createElement(
       Container,
       {
-        name: classNames63(
+        name: classNames61(
           "bookkeeping-overview-profit-and-loss-chart",
           pnlToggle !== "revenue" && "bookkeeping-overview-profit-and-loss-chart--hidden"
         )
@@ -15991,7 +15831,7 @@ var BookkeepingOverview = ({
     ), /* @__PURE__ */ React182.createElement(
       Container,
       {
-        name: classNames63(
+        name: classNames61(
           "bookkeeping-overview-profit-and-loss-chart",
           pnlToggle !== "expenses" && "bookkeeping-overview-profit-and-loss-chart--hidden"
         )
@@ -16009,10 +15849,10 @@ var BookkeepingOverview = ({
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
-import React186, { useState as useState56 } from "react";
+import React186, { useState as useState57 } from "react";
 
 // src/components/TransactionToReviewCard/TransactionToReviewCard.tsx
-import React185, { useContext as useContext40, useEffect as useEffect48, useState as useState55 } from "react";
+import React185, { useContext as useContext40, useEffect as useEffect48, useState as useState56 } from "react";
 
 // src/components/BadgeLoader/BadgeLoader.tsx
 import React183 from "react";
@@ -16022,13 +15862,13 @@ var BadgeLoader = ({ children }) => {
 
 // src/components/NotificationCard/NotificationCard.tsx
 import React184 from "react";
-import classNames64 from "classnames";
+import classNames62 from "classnames";
 var NotificationCard = ({
   onClick,
   children,
   className
 }) => {
-  return /* @__PURE__ */ React184.createElement("div", { className: classNames64("Layer__notification-card", className) }, /* @__PURE__ */ React184.createElement("div", { className: "Layer__notification-card__main" }, children), /* @__PURE__ */ React184.createElement(
+  return /* @__PURE__ */ React184.createElement("div", { className: classNames62("Layer__notification-card", className) }, /* @__PURE__ */ React184.createElement("div", { className: "Layer__notification-card__main" }, children), /* @__PURE__ */ React184.createElement(
     IconButton,
     {
       icon: /* @__PURE__ */ React184.createElement(ChevronRight_default, null),
@@ -16046,7 +15886,7 @@ var TransactionToReviewCard = ({
 }) => {
   const { dateRange: contextDateRange } = useContext40(ProfitAndLoss.Context);
   const dateRange = usePnlDateRange ? contextDateRange : void 0;
-  const [toReview, setToReview] = useState55(0);
+  const [toReview, setToReview] = useState56(0);
   const { data, loaded, error, refetch } = useProfitAndLossLTM({
     currentDate: dateRange ? dateRange.startDate : startOfMonth15(/* @__PURE__ */ new Date())
   });
@@ -16107,7 +15947,7 @@ var TransactionToReviewCard = ({
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
-import classNames65 from "classnames";
+import classNames63 from "classnames";
 var AccountingOverview = ({
   title = "Accounting overview",
   enableOnboarding = false,
@@ -16116,7 +15956,7 @@ var AccountingOverview = ({
   chartColorsList,
   stringOverrides
 }) => {
-  const [pnlToggle, setPnlToggle] = useState56("expenses");
+  const [pnlToggle, setPnlToggle] = useState57("expenses");
   return /* @__PURE__ */ React186.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React186.createElement(View, { title, headerControls: /* @__PURE__ */ React186.createElement(ProfitAndLoss.DatePicker, null) }, enableOnboarding && /* @__PURE__ */ React186.createElement(
     Onboarding,
     {
@@ -16167,7 +16007,7 @@ var AccountingOverview = ({
   ), /* @__PURE__ */ React186.createElement(
     Container,
     {
-      name: classNames65(
+      name: classNames63(
         "accounting-overview-profit-and-loss-chart",
         pnlToggle !== "revenue" && "accounting-overview-profit-and-loss-chart--hidden"
       )
@@ -16184,7 +16024,7 @@ var AccountingOverview = ({
   ), /* @__PURE__ */ React186.createElement(
     Container,
     {
-      name: classNames65(
+      name: classNames63(
         "accounting-overview-profit-and-loss-chart",
         pnlToggle !== "expenses" && "accounting-overview-profit-and-loss-chart--hidden"
       )
@@ -16239,13 +16079,13 @@ var BankTransactionsWithLinkedAccounts = ({
 };
 
 // src/views/GeneralLedger/GeneralLedger.tsx
-import React188, { useState as useState57 } from "react";
+import React188, { useState as useState58 } from "react";
 var GeneralLedgerView = ({
   title,
   // deprecated
   stringOverrides
 }) => {
-  const [activeTab, setActiveTab] = useState57("chartOfAccounts");
+  const [activeTab, setActiveTab] = useState58("chartOfAccounts");
   return /* @__PURE__ */ React188.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React188.createElement(View, { title: stringOverrides?.title || title || "General Ledger" }, /* @__PURE__ */ React188.createElement(
     Toggle,
     {
@@ -16274,13 +16114,13 @@ var GeneralLedgerView = ({
 };
 
 // src/views/Reports/Reports.tsx
-import React189, { useContext as useContext41, useRef as useRef19, useState as useState58 } from "react";
+import React189, { useContext as useContext41, useRef as useRef19, useState as useState59 } from "react";
 var DownloadButton2 = ({
   stringOverrides
 }) => {
   const { dateRange } = useContext41(ProfitAndLoss.Context);
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [requestFailed, setRequestFailed] = useState58(false);
+  const [requestFailed, setRequestFailed] = useState59(false);
   const handleClick = async () => {
     const month = (dateRange.startDate.getMonth() + 1).toString();
     const year = dateRange.startDate.getFullYear().toString();
@@ -16348,7 +16188,7 @@ var Reports = ({
   comparisonConfig
 }) => {
   const containerRef = useRef19(null);
-  const [activeTab, setActiveTab] = useState58(enabledReports[0]);
+  const [activeTab, setActiveTab] = useState59(enabledReports[0]);
   const options = getOptions(enabledReports);
   const defaultTitle = enabledReports.length > 1 ? "Reports" : options.find((option) => option.value = enabledReports[0])?.label;
   return /* @__PURE__ */ React189.createElement(View, { title: stringOverrides?.title || title || defaultTitle }, enabledReports.length > 1 && /* @__PURE__ */ React189.createElement("div", { className: "Layer__component Layer__header__actions" }, /* @__PURE__ */ React189.createElement(