@layerfi/components 0.1.56 → 0.1.57

package/dist/index.js

@@ -11572,7 +11572,9 @@ var TableCell = ({
   isCurrency,
   primary,
   withExpandIcon = false,
-  fullWidth
+  fullWidth,
+  colSpan = 1,
+  onClick
 }) => {
   const amount = typeof children === "number" ? children : 0;
   const isPositive = amount >= 0;
@@ -11585,13 +11587,15 @@ var TableCell = ({
     isCurrency && !isPositive && "Layer__table-cell-amount--negative"
   );
   if (isHeaderCell) {
-    return /* @__PURE__ */ import_react122.default.createElement("th", { className: cellClassNames }, /* @__PURE__ */ import_react122.default.createElement("span", { className: "Layer__table-cell-content" }, children));
+    return /* @__PURE__ */ import_react122.default.createElement("th", { className: cellClassNames, colSpan }, /* @__PURE__ */ import_react122.default.createElement("span", { className: "Layer__table-cell-content" }, children));
   }
   return /* @__PURE__ */ import_react122.default.createElement(
     "td",
     {
       className: cellClassNames,
-      style: fullWidth ? { width: "100%" } : void 0
+      style: fullWidth ? { width: "100%" } : void 0,
+      colSpan,
+      onClick: (e) => onClick && onClick(e)
     },
     /* @__PURE__ */ import_react122.default.createElement("span", { className: "Layer__table-cell-content" }, withExpandIcon && /* @__PURE__ */ import_react122.default.createElement(
       ChevronDownFill_default,
@@ -11622,20 +11626,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 = (0, import_classnames49.default)([
     "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__ */ import_react124.default.createElement(import_react124.default.Fragment, null, withDivider && withDividerPosition === "top" && /* @__PURE__ */ import_react124.default.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ import_react124.default.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })), /* @__PURE__ */ import_react124.default.createElement("tr", { "data-key": rowKey, className: rowClassNames, onClick: toggleExpanded }, children), withDivider && withDividerPosition === "bottom" && /* @__PURE__ */ import_react124.default.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ import_react124.default.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })));
+  return /* @__PURE__ */ import_react124.default.createElement(import_react124.default.Fragment, null, withDivider && withDividerPosition === "top" && /* @__PURE__ */ import_react124.default.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ import_react124.default.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })), /* @__PURE__ */ import_react124.default.createElement(
+    "tr",
+    {
+      "data-key": rowKey,
+      className: rowClassNames,
+      onClick: (e) => toggleExpanded(e)
+    },
+    children
+  ), withDivider && withDividerPosition === "bottom" && /* @__PURE__ */ import_react124.default.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ import_react124.default.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })));
 };
 
 // src/components/Table/Table.tsx
@@ -13209,7 +13228,7 @@ var useLedgerAccounts = () => {
   };
 };
 
-// src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
+// src/components/ChartOfAccountsTable/ChartOfAccountsTableWithPanel.tsx
 var import_react152 = __toESM(require("react"));
 
 // src/components/ChartOfAccountsDatePicker/ChartOfAccountsDatePicker.tsx
@@ -13234,265 +13253,15 @@ var ChartOfAccountsDatePicker = () => {
   );
 };
 
-// src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-var import_react148 = __toESM(require("react"));
-
-// src/icons/Edit2.tsx
-var React152 = __toESM(require("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
-var import_classnames55 = __toESM(require("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 } = (0, import_react148.useContext)(ChartOfAccountsContext);
-  const { setAccountId } = (0, import_react148.useContext)(LedgerAccountsContext);
-  const baseStyle = view === "desktop" ? EXPANDED_STYLE2 : EXPANDED_MOBILE_STYLE;
-  const [isOpen, setIsOpen] = (0, import_react148.useState)(defaultOpen);
-  const style = expanded ? {
-    ...baseStyle,
-    transitionDelay: `${15 * index}ms`
-  } : {
-    ...COLLAPSED_STYLE2,
-    transitionDelay: `${acountsLength - 15 * index}ms`
-  };
-  const [showComponent, setShowComponent] = (0, import_react148.useState)(false);
-  const [prevExpandedAll, setPrevExpandedAll] = (0, import_react148.useState)(expandAll);
-  (0, import_react148.useEffect)(() => {
-    const timeoutId = setTimeout(() => {
-      setShowComponent(true);
-    }, cumulativeIndex * 50);
-    return () => clearTimeout(timeoutId);
-  }, []);
-  (0, import_react148.useEffect)(() => {
-    if (prevExpandedAll !== expandAll && expandAll) {
-      setIsOpen(expandAll === "collapsed" ? false : true);
-    }
-  }, [expandAll]);
-  const baseClass = (0, import_classnames55.default)(
-    "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 = (0, import_classnames55.default)(
-    baseClass,
-    "Layer__chart-of-accounts__row---desktop"
-  );
-  const mobileRowClass = (0, import_classnames55.default)(
-    baseClass,
-    "Layer__chart-of-accounts__row---mobile"
-  );
-  return /* @__PURE__ */ import_react148.default.createElement(import_react148.default.Fragment, null, view === "desktop" && /* @__PURE__ */ import_react148.default.createElement(
-    "tr",
-    {
-      className: desktopRowClass,
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setAccountId(account.id);
-      }
-    },
-    /* @__PURE__ */ import_react148.default.createElement("td", { className: "Layer__table-cell Layer__coa__name" }, /* @__PURE__ */ import_react148.default.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ import_react148.default.createElement(
-      "span",
-      {
-        className: "Layer__table-cell-content-indentation",
-        style: {
-          paddingLeft: INDENTATION * depth + 16
-        }
-      },
-      account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ import_react148.default.createElement(
-        ChevronDownFill_default,
-        {
-          size: 16,
-          className: "Layer__table__expand-icon",
-          onClick: (e) => {
-            e.stopPropagation();
-            setIsOpen(!isOpen);
-          }
-        }
-      ),
-      /* @__PURE__ */ import_react148.default.createElement("span", { className: "Layer__coa__name__text" }, account.name)
-    ))),
-    /* @__PURE__ */ import_react148.default.createElement("td", { className: "Layer__table-cell Layer__coa__type" }, /* @__PURE__ */ import_react148.default.createElement(
-      "span",
-      {
-        className: "Layer__table-cell-content Layer__mobile--hidden",
-        style
-      },
-      account.account_type?.display_name
-    ), /* @__PURE__ */ import_react148.default.createElement(
-      "span",
-      {
-        className: "Layer__table-cell-content Layer__desktop--hidden",
-        style
-      },
-      /* @__PURE__ */ import_react148.default.createElement(
-        Text,
-        {
-          weight: "bold" /* bold */,
-          className: "Layer__coa__type--mobile"
-        },
-        account.normality
-      ),
-      /* @__PURE__ */ import_react148.default.createElement(Text, { className: "Layer__coa__subtype--mobile" }, account.account_subtype?.display_name)
-    )),
-    /* @__PURE__ */ import_react148.default.createElement("td", { className: "Layer__table-cell Layer__coa__subtype Layer__mobile--hidden" }, /* @__PURE__ */ import_react148.default.createElement("span", { className: "Layer__table-cell-content", style }, account.account_subtype?.display_name)),
-    /* @__PURE__ */ import_react148.default.createElement("td", { className: "Layer__table-cell Layer__coa__balance" }, /* @__PURE__ */ import_react148.default.createElement(
-      "span",
-      {
-        className: "Layer__table-cell-content Layer__table-cell--amount",
-        style
-      },
-      "$",
-      centsToDollars(Math.abs(account.balance || 0))
-    )),
-    /* @__PURE__ */ import_react148.default.createElement("td", { className: "Layer__table-cell Layer__coa__actions" }, /* @__PURE__ */ import_react148.default.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ import_react148.default.createElement(
-      Button,
-      {
-        variant: "secondary" /* secondary */,
-        rightIcon: /* @__PURE__ */ import_react148.default.createElement(Edit2_default, { size: 12 }),
-        iconOnly: true,
-        onClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          editAccount(account.id);
-        }
-      },
-      "Edit"
-    )))
-  ), view === "mobile" || view === "tablet" ? /* @__PURE__ */ import_react148.default.createElement(
-    "tr",
-    {
-      className: mobileRowClass,
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setAccountId(account.id);
-      }
-    },
-    /* @__PURE__ */ import_react148.default.createElement("td", { className: "Layer__table-cell", colSpan: 5 }, /* @__PURE__ */ import_react148.default.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__ */ import_react148.default.createElement(
-        ChevronDownFill_default,
-        {
-          size: 16,
-          className: "Layer__table__expand-icon",
-          onClick: (e) => {
-            e.stopPropagation();
-            setIsOpen(!isOpen);
-          }
-        }
-      ),
-      /* @__PURE__ */ import_react148.default.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content" }, /* @__PURE__ */ import_react148.default.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__top-row" }, /* @__PURE__ */ import_react148.default.createElement(
-        Text,
-        {
-          as: "span",
-          className: "Layer__chart-of-accounts__mobile-row-content__name"
-        },
-        account.name
-      ), /* @__PURE__ */ import_react148.default.createElement(
-        TextButton,
-        {
-          onClick: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            editAccount(account.id);
-          }
-        },
-        "Edit"
-      )), /* @__PURE__ */ import_react148.default.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__bottom-row" }, /* @__PURE__ */ import_react148.default.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__types" }, /* @__PURE__ */ import_react148.default.createElement(Text, { as: "span" }, account.normality), /* @__PURE__ */ import_react148.default.createElement("span", { className: "Layer__chart-of-accounts__mobile-row-content__separator" }), /* @__PURE__ */ import_react148.default.createElement(Text, { as: "span" }, "Sub-Type")), /* @__PURE__ */ import_react148.default.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__ */ import_react148.default.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
-var import_react151 = __toESM(require("react"));
+var import_react150 = __toESM(require("react"));
 
 // src/components/ChartOfAccountsForm/ChartOfAccountsForm.tsx
-var import_react150 = __toESM(require("react"));
+var import_react149 = __toESM(require("react"));
 
 // src/components/ChartOfAccountsForm/useParentOptions.ts
-var import_react149 = require("react");
-var useParentOptions = (data) => (0, import_react149.useMemo)(
+var import_react148 = require("react");
+var useParentOptions = (data) => (0, import_react148.useMemo)(
   () => flattenAccounts(data?.accounts || []).sort((a, b) => a?.name && b?.name ? a.name.localeCompare(b.name) : 0).map((x) => {
     return {
       label: x.name,
@@ -13512,9 +13281,9 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
     submitForm,
     sendingForm,
     apiError
-  } = (0, import_react150.useContext)(ChartOfAccountsContext);
+  } = (0, import_react149.useContext)(ChartOfAccountsContext);
   const parentOptions = useParentOptions(data);
-  const entry = (0, import_react150.useMemo)(() => {
+  const entry = (0, import_react149.useMemo)(() => {
     if (form?.action === "edit" && form.accountId) {
       return flattenAccounts(data?.accounts || []).find(
         (x) => x.id === form.accountId
@@ -13525,7 +13294,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
   if (!form) {
     return;
   }
-  return /* @__PURE__ */ import_react150.default.createElement(
+  return /* @__PURE__ */ import_react149.default.createElement(
     "form",
     {
       className: "Layer__form",
@@ -13534,7 +13303,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         submitForm();
       }
     },
-    /* @__PURE__ */ import_react150.default.createElement("div", { className: "Layer__chart-of-accounts__sidebar__header" }, /* @__PURE__ */ import_react150.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? stringOverrides?.editModeHeader || "Edit Account" : stringOverrides?.createModeHeader || "Add New Account"), /* @__PURE__ */ import_react150.default.createElement("div", { className: "actions" }, /* @__PURE__ */ import_react150.default.createElement(
+    /* @__PURE__ */ import_react149.default.createElement("div", { className: "Layer__chart-of-accounts__sidebar__header" }, /* @__PURE__ */ import_react149.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? stringOverrides?.editModeHeader || "Edit Account" : stringOverrides?.createModeHeader || "Add New Account"), /* @__PURE__ */ import_react149.default.createElement("div", { className: "actions" }, /* @__PURE__ */ import_react149.default.createElement(
       Button,
       {
         type: "button",
@@ -13543,7 +13312,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.cancelButton || "Cancel"
-    ), apiError && /* @__PURE__ */ import_react150.default.createElement(
+    ), apiError && /* @__PURE__ */ import_react149.default.createElement(
       RetryButton,
       {
         type: "submit",
@@ -13552,7 +13321,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.retryButton || "Retry"
-    ), !apiError && /* @__PURE__ */ import_react150.default.createElement(
+    ), !apiError && /* @__PURE__ */ import_react149.default.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -13562,7 +13331,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
       },
       stringOverrides?.saveButton || "Save"
     ))),
-    apiError && /* @__PURE__ */ import_react150.default.createElement(
+    apiError && /* @__PURE__ */ import_react149.default.createElement(
       Text,
       {
         size: "sm" /* sm */,
@@ -13570,8 +13339,8 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
       },
       apiError
     ),
-    entry && /* @__PURE__ */ import_react150.default.createElement("div", { className: "Layer__chart-of-accounts__form-edit-entry" }, /* @__PURE__ */ import_react150.default.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ import_react150.default.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
-    /* @__PURE__ */ import_react150.default.createElement("div", { className: "Layer__chart-of-accounts__form" }, /* @__PURE__ */ import_react150.default.createElement(InputGroup, { name: "parent", label: stringOverrides?.parentLabel || "Parent", inline: true }, /* @__PURE__ */ import_react150.default.createElement(
+    entry && /* @__PURE__ */ import_react149.default.createElement("div", { className: "Layer__chart-of-accounts__form-edit-entry" }, /* @__PURE__ */ import_react149.default.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ import_react149.default.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
+    /* @__PURE__ */ import_react149.default.createElement("div", { className: "Layer__chart-of-accounts__form" }, /* @__PURE__ */ import_react149.default.createElement(InputGroup, { name: "parent", label: stringOverrides?.parentLabel || "Parent", inline: true }, /* @__PURE__ */ import_react149.default.createElement(
       Select2,
       {
         options: parentOptions,
@@ -13579,7 +13348,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         onChange: (sel) => changeFormData("parent", sel),
         disabled: sendingForm
       }
-    )), /* @__PURE__ */ import_react150.default.createElement(InputGroup, { name: "name", label: stringOverrides?.nameLabel || "Name", inline: true }, /* @__PURE__ */ import_react150.default.createElement(
+    )), /* @__PURE__ */ import_react149.default.createElement(InputGroup, { name: "name", label: stringOverrides?.nameLabel || "Name", inline: true }, /* @__PURE__ */ import_react149.default.createElement(
       Input,
       {
         name: "name",
@@ -13590,7 +13359,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm,
         onChange: (e) => changeFormData("name", e.target.value)
       }
-    )), /* @__PURE__ */ import_react150.default.createElement(InputGroup, { name: "type", label: stringOverrides?.typeLabel || "Type", inline: true }, /* @__PURE__ */ import_react150.default.createElement(
+    )), /* @__PURE__ */ import_react149.default.createElement(InputGroup, { name: "type", label: stringOverrides?.typeLabel || "Type", inline: true }, /* @__PURE__ */ import_react149.default.createElement(
       Select2,
       {
         options: LEDGER_ACCOUNT_TYPES,
@@ -13600,7 +13369,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         errorMessage: form?.errors?.find((x) => x.field === "type")?.message,
         disabled: sendingForm || form.action === "edit" || form.data.parent !== void 0
       }
-    )), /* @__PURE__ */ import_react150.default.createElement(InputGroup, { name: "subType", label: stringOverrides?.subTypeLabel || "Sub-Type", inline: true }, /* @__PURE__ */ import_react150.default.createElement(
+    )), /* @__PURE__ */ import_react149.default.createElement(InputGroup, { name: "subType", label: stringOverrides?.subTypeLabel || "Sub-Type", inline: true }, /* @__PURE__ */ import_react149.default.createElement(
       Select2,
       {
         options: form?.data.type?.value !== void 0 ? LEDGER_ACCOUNT_SUBTYPES_FOR_TYPE[form?.data.type?.value] : LEDGER_ACCOUNT_SUBTYPES,
@@ -13608,7 +13377,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         onChange: (sel) => changeFormData("subType", sel),
         disabled: sendingForm
       }
-    )), /* @__PURE__ */ import_react150.default.createElement(InputGroup, { name: "normality", label: stringOverrides?.normalityLabel || "Normality", inline: true }, /* @__PURE__ */ import_react150.default.createElement(
+    )), /* @__PURE__ */ import_react149.default.createElement(InputGroup, { name: "normality", label: stringOverrides?.normalityLabel || "Normality", inline: true }, /* @__PURE__ */ import_react149.default.createElement(
       Select2,
       {
         options: NORMALITY_OPTIONS,
@@ -13620,7 +13389,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         onChange: (sel) => changeFormData("normality", sel),
         disabled: sendingForm
       }
-    )), /* @__PURE__ */ import_react150.default.createElement("div", { className: "actions" }, /* @__PURE__ */ import_react150.default.createElement(
+    )), /* @__PURE__ */ import_react149.default.createElement("div", { className: "actions" }, /* @__PURE__ */ import_react149.default.createElement(
       Button,
       {
         type: "button",
@@ -13629,7 +13398,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.cancelButton || "Cancel"
-    ), apiError && /* @__PURE__ */ import_react150.default.createElement(
+    ), apiError && /* @__PURE__ */ import_react149.default.createElement(
       RetryButton,
       {
         type: "submit",
@@ -13638,7 +13407,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.retryButton || "Retry"
-    ), !apiError && /* @__PURE__ */ import_react150.default.createElement(
+    ), !apiError && /* @__PURE__ */ import_react149.default.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -13656,12 +13425,158 @@ var ChartOfAccountsSidebar = ({
   parentRef: _parentRef,
   stringOverrides
 }) => {
-  return /* @__PURE__ */ import_react151.default.createElement(ChartOfAccountsForm, { stringOverrides });
+  return /* @__PURE__ */ import_react150.default.createElement(ChartOfAccountsForm, { stringOverrides });
 };
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
-var COMPONENT_NAME5 = "chart-of-accounts";
+var import_react151 = __toESM(require("react"));
+
+// src/icons/Edit2.tsx
+var React155 = __toESM(require("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__ */ import_react151.default.createElement(TableProvider, null, /* @__PURE__ */ import_react151.default.createElement(
+  ChartOfAccountsTableContent,
+  {
+    view,
+    data,
+    stringOverrides,
+    error,
+    expandAll,
+    cumulativeIndex,
+    accountsLength
+  }
+));
+var ChartOfAccountsTableContent = ({
+  view,
+  stringOverrides,
+  data,
+  error,
+  expandAll,
+  cumulativeIndex,
+  accountsLength
+}) => {
+  const { setAccountId } = (0, import_react151.useContext)(LedgerAccountsContext);
+  const { editAccount } = (0, import_react151.useContext)(ChartOfAccountsContext);
+  const { isOpen, setIsOpen } = useTableExpandRow();
+  const [accountsRowKeys, setAccountsRowKeys] = (0, import_react151.useState)([]);
+  (0, import_react151.useEffect)(() => {
+    if (expandAll === "expanded") {
+      setIsOpen(accountsRowKeys);
+    } else if (expandAll === "collapsed") {
+      setIsOpen([]);
+    }
+  }, [expandAll]);
+  (0, import_react151.useEffect)(() => {
+    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__ */ import_react151.default.createElement(import_react151.default.Fragment, { key: rowKey + "-" + index }, /* @__PURE__ */ import_react151.default.createElement(
+      TableRow,
+      {
+        rowKey: rowKey + "-" + index,
+        expandable,
+        isExpanded: expanded,
+        onClick: (e) => {
+          e.stopPropagation();
+          setAccountId(account.id);
+        },
+        depth
+      },
+      /* @__PURE__ */ import_react151.default.createElement(
+        TableCell,
+        {
+          withExpandIcon: expandable,
+          onClick: (e) => {
+            e.stopPropagation();
+            expandable && setIsOpen(rowKey);
+          }
+        },
+        account.name
+      ),
+      /* @__PURE__ */ import_react151.default.createElement(TableCell, null, account.account_type?.display_name),
+      /* @__PURE__ */ import_react151.default.createElement(TableCell, null, account.account_subtype?.display_name),
+      /* @__PURE__ */ import_react151.default.createElement(TableCell, { isCurrency: true }, account.balance),
+      /* @__PURE__ */ import_react151.default.createElement(TableCell, null, /* @__PURE__ */ import_react151.default.createElement("span", { className: "Layer__coa__actions" }, /* @__PURE__ */ import_react151.default.createElement(
+        Button,
+        {
+          variant: "secondary" /* secondary */,
+          rightIcon: /* @__PURE__ */ import_react151.default.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__ */ import_react151.default.createElement(Table, null, /* @__PURE__ */ import_react151.default.createElement(TableHead, null, /* @__PURE__ */ import_react151.default.createElement(TableRow, { isHeadRow: true, rowKey: "charts-of-accounts-head-row" }, /* @__PURE__ */ import_react151.default.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.nameColumnHeader || "Name"), /* @__PURE__ */ import_react151.default.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.typeColumnHeader || "Type"), /* @__PURE__ */ import_react151.default.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.subtypeColumnHeader || "Sub-Type"), /* @__PURE__ */ import_react151.default.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.balanceColumnHeader || "Balance"), /* @__PURE__ */ import_react151.default.createElement(TableCell, { isHeaderCell: true }))), /* @__PURE__ */ import_react151.default.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,
@@ -13718,25 +13633,18 @@ var ChartOfAccountsTable = ({
         /* @__PURE__ */ import_react152.default.createElement("div", { className: "Layer__header__actions-col" }, /* @__PURE__ */ import_react152.default.createElement(Button, { onClick: () => addAccount(), disabled: isLoading }, stringOverrides?.addAccountButtonText || "Add Account"))
       )
     ),
-    /* @__PURE__ */ import_react152.default.createElement("table", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ import_react152.default.createElement("thead", null, /* @__PURE__ */ import_react152.default.createElement("tr", { className: "Layer__table-row--header" }, /* @__PURE__ */ import_react152.default.createElement("th", { className: "Layer__table-header Layer__coa__name" }, stringOverrides?.nameColumnHeader || "Name"), /* @__PURE__ */ import_react152.default.createElement("th", { className: "Layer__table-header Layer__coa__type" }, stringOverrides?.typeColumnHeader || "Type"), /* @__PURE__ */ import_react152.default.createElement("th", { className: "Layer__table-header Layer__coa__subtype Layer__mobile--hidden" }, stringOverrides?.subtypeColumnHeader || "Sub-Type"), /* @__PURE__ */ import_react152.default.createElement("th", { className: "Layer__table-header Layer__coa__balance" }, stringOverrides?.balanceColumnHeader || "Balance"), /* @__PURE__ */ import_react152.default.createElement("th", { className: "Layer__table-header Layer__coa__actions" }))), /* @__PURE__ */ import_react152.default.createElement("tbody", null, !error && data?.accounts.map((account, idx) => {
-      const currentCumulativeIndex = cumulativeIndex;
-      cumulativeIndex = (account.sub_accounts?.length || 0) + cumulativeIndex + 1;
-      return /* @__PURE__ */ import_react152.default.createElement(
-        ChartOfAccountsRow,
-        {
-          key: account.id,
-          account,
-          depth: 0,
-          index: idx,
-          cumulativeIndex: currentCumulativeIndex,
-          expanded: true,
-          defaultOpen: true,
-          acountsLength: accountsLength,
-          view,
-          expandAll
-        }
-      );
-    }))),
+    data && /* @__PURE__ */ import_react152.default.createElement(
+      ChartOfAccountsTable,
+      {
+        view,
+        data,
+        error,
+        stringOverrides,
+        expandAll,
+        accountsLength,
+        cumulativeIndex
+      }
+    ),
     error ? /* @__PURE__ */ import_react152.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react152.default.createElement(
       DataState,
       {
@@ -13769,9 +13677,9 @@ var import_react157 = __toESM(require("react"));
 
 // src/components/Card/Card.tsx
 var import_react153 = __toESM(require("react"));
-var import_classnames56 = __toESM(require("classnames"));
+var import_classnames55 = __toESM(require("classnames"));
 var Card = ({ children, className }) => {
-  return /* @__PURE__ */ import_react153.default.createElement("div", { className: (0, import_classnames56.default)("Layer__card", className) }, children);
+  return /* @__PURE__ */ import_react153.default.createElement("div", { className: (0, import_classnames55.default)("Layer__card", className) }, children);
 };
 
 // src/components/DateTime/DateTime.tsx
@@ -13813,14 +13721,14 @@ var DateTime = ({
 
 // src/components/DetailsList/DetailsList.tsx
 var import_react155 = __toESM(require("react"));
-var import_classnames57 = __toESM(require("classnames"));
+var import_classnames56 = __toESM(require("classnames"));
 var DetailsList = ({
   title,
   children,
   className,
   actions
 }) => {
-  return /* @__PURE__ */ import_react155.default.createElement("div", { className: (0, import_classnames57.default)("Layer__details-list", className) }, title && /* @__PURE__ */ import_react155.default.createElement(Header, null, /* @__PURE__ */ import_react155.default.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ import_react155.default.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ import_react155.default.createElement("ul", { className: "Layer__details-list__list" }, children));
+  return /* @__PURE__ */ import_react155.default.createElement("div", { className: (0, import_classnames56.default)("Layer__details-list", className) }, title && /* @__PURE__ */ import_react155.default.createElement(Header, null, /* @__PURE__ */ import_react155.default.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ import_react155.default.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ import_react155.default.createElement("ul", { className: "Layer__details-list__list" }, children));
 };
 
 // src/components/DetailsList/DetailsListItem.tsx
@@ -14048,7 +13956,7 @@ var LedgerAccountEntryDetails = ({
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
 var import_react158 = __toESM(require("react"));
-var import_classnames58 = __toESM(require("classnames"));
+var import_classnames57 = __toESM(require("classnames"));
 var import_date_fns32 = require("date-fns");
 var LedgerAccountRow = ({
   row,
@@ -14072,7 +13980,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ import_react158.default.createElement(
       "tr",
       {
-        className: (0, import_classnames58.default)(
+        className: (0, import_classnames57.default)(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -14105,7 +14013,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ import_react158.default.createElement(
       "tr",
       {
-        className: (0, import_classnames58.default)(
+        className: (0, import_classnames57.default)(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -14134,7 +14042,7 @@ var LedgerAccountRow = ({
   return /* @__PURE__ */ import_react158.default.createElement(
     "tr",
     {
-      className: (0, import_classnames58.default)(
+      className: (0, import_classnames57.default)(
         "Layer__table-row",
         row.entry_id === selectedEntryId && "Layer__table-row--active",
         initialLoad && "initial-load",
@@ -14160,7 +14068,7 @@ var LedgerAccountRow = ({
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-var import_classnames59 = __toESM(require("classnames"));
+var import_classnames58 = __toESM(require("classnames"));
 var LedgerAccount = ({
   containerRef,
   pageSize = 15,
@@ -14189,7 +14097,7 @@ var LedgerAccount = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [isLoading]);
-  const baseClassName = (0, import_classnames59.default)(
+  const baseClassName = (0, import_classnames58.default)(
     "Layer__ledger-account__index",
     accountId && "open"
   );
@@ -14307,8 +14215,15 @@ var ChartOfAccountsContent = ({
       }
     }
   });
-  return /* @__PURE__ */ import_react160.default.createElement(Container, { name: "chart-of-accounts", ref: containerRef, asWidget }, accountId ? /* @__PURE__ */ import_react160.default.createElement(LedgerAccount, { view, containerRef, stringOverrides: stringOverrides?.ledgerAccount }) : /* @__PURE__ */ import_react160.default.createElement(
-    ChartOfAccountsTable,
+  return /* @__PURE__ */ import_react160.default.createElement(Container, { name: "chart-of-accounts", ref: containerRef, asWidget }, accountId ? /* @__PURE__ */ import_react160.default.createElement(
+    LedgerAccount,
+    {
+      view,
+      containerRef,
+      stringOverrides: stringOverrides?.ledgerAccount
+    }
+  ) : /* @__PURE__ */ import_react160.default.createElement(
+    ChartOfAccountsTableWithPanel,
     {
       asWidget,
       withDateControl,
@@ -14654,190 +14569,14 @@ var useJournal = () => {
   };
 };
 
-// src/components/JournalTable/JournalTable.tsx
+// src/components/JournalTable/JournalTableWithPanel.tsx
 var import_react168 = __toESM(require("react"));
 
-// src/components/JournalRow/JournalRow.tsx
-var import_react163 = __toESM(require("react"));
-var import_classnames60 = __toESM(require("classnames"));
-var import_date_fns33 = require("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 } = (0, import_react163.useContext)(JournalContext);
-  const [isOpen, setIsOpen] = (0, import_react163.useState)(index === 0 ? true : defaultOpen);
-  const style = expanded ? {
-    ...EXPANDED_STYLE3,
-    transitionDelay: `${15 * index}ms`
-  } : {
-    ...COLLAPSED_STYLE3,
-    transitionDelay: `${lineItemsLength - 15 * index}ms`
-  };
-  const [showComponent, setShowComponent] = (0, import_react163.useState)(false);
-  const baseClass = (0, import_classnames60.default)(
-    "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 = (0, import_classnames60.default)(
-    "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"
-  );
-  (0, import_react163.useEffect)(() => {
-    if (initialLoad) {
-      const timeoutId = setTimeout(() => {
-        setShowComponent(true);
-      }, index * 10);
-      return () => clearTimeout(timeoutId);
-    } else {
-      setShowComponent(true);
-    }
-  }, []);
-  if ("line_items" in row) {
-    return /* @__PURE__ */ import_react163.default.createElement(import_react163.default.Fragment, null, /* @__PURE__ */ import_react163.default.createElement(
-      "tr",
-      {
-        className: baseClass,
-        style: { transitionDelay: `${15 * index}ms` },
-        onClick: (e) => {
-          e.stopPropagation();
-          if (selectedEntryId === row.id) {
-            closeSelectedEntry();
-          } else {
-            setSelectedEntryId(row.id);
-          }
-        }
-      },
-      /* @__PURE__ */ import_react163.default.createElement("td", { className: "Layer__table-cell Layer__journal__arrow" }, /* @__PURE__ */ import_react163.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react163.default.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__ */ import_react163.default.createElement(
-          ChevronDownFill_default,
-          {
-            size: 16,
-            className: "Layer__table__expand-icon",
-            style: {
-              transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)"
-            }
-          }
-        )
-      ))),
-      /* @__PURE__ */ import_react163.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react163.default.createElement("span", { className: "Layer__table-cell-content" }, row.id.substring(0, 5))),
-      /* @__PURE__ */ import_react163.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react163.default.createElement("span", { className: "Layer__table-cell-content" }, row.date && (0, import_date_fns33.format)((0, import_date_fns33.parseISO)(row.date), DATE_FORMAT))),
-      /* @__PURE__ */ import_react163.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react163.default.createElement("span", { className: "Layer__table-cell-content" }, humanizeEnum(row.entry_type))),
-      /* @__PURE__ */ import_react163.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react163.default.createElement("span", { className: "Layer__table-cell-content" }, `(${row.line_items.length})`)),
-      /* @__PURE__ */ import_react163.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react163.default.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__ */ import_react163.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react163.default.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__ */ import_react163.default.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__ */ import_react163.default.createElement(
-    "tr",
-    {
-      className: journalEntryLineClass,
-      style: { transitionDelay: `${15 * index}ms` }
-    },
-    /* @__PURE__ */ import_react163.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react163.default.createElement("span", { className: "Layer__table-cell-content", style })),
-    /* @__PURE__ */ import_react163.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react163.default.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ import_react163.default.createElement("span", { className: "Layer__table-cell-hidden" }, rowId(row).substring(0, 5)))),
-    /* @__PURE__ */ import_react163.default.createElement("td", { className: "Layer__table-cell" }),
-    /* @__PURE__ */ import_react163.default.createElement("td", { className: "Layer__table-cell" }),
-    /* @__PURE__ */ import_react163.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react163.default.createElement("span", { className: "Layer__table-cell-content", style }, accountName(row))),
-    /* @__PURE__ */ import_react163.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, row.direction === "DEBIT" && /* @__PURE__ */ import_react163.default.createElement(
-      "span",
-      {
-        className: "Layer__table-cell-content Layer__table-cell--amount",
-        style
-      },
-      "$",
-      centsToDollars(Math.abs(row.amount))
-    )),
-    /* @__PURE__ */ import_react163.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, row.direction === "CREDIT" && /* @__PURE__ */ import_react163.default.createElement(
-      "span",
-      {
-        className: "Layer__table-cell-content Layer__table-cell--amount",
-        style
-      },
-      "$",
-      centsToDollars(Math.abs(row.amount))
-    ))
-  );
-};
-
 // src/components/JournalSidebar/JournalSidebar.tsx
-var import_react167 = __toESM(require("react"));
+var import_react166 = __toESM(require("react"));
 
 // src/components/JournalEntryDetails/JournalEntryDetails.tsx
-var import_react164 = __toESM(require("react"));
+var import_react163 = __toESM(require("react"));
 var JournalEntryDetails = () => {
   const {
     data,
@@ -14845,21 +14584,21 @@ var JournalEntryDetails = () => {
     errorEntry,
     closeSelectedEntry,
     selectedEntryId
-  } = (0, import_react164.useContext)(JournalContext);
-  const entry = (0, import_react164.useMemo)(() => {
+  } = (0, import_react163.useContext)(JournalContext);
+  const entry = (0, import_react163.useMemo)(() => {
     if (selectedEntryId && data) {
       return data.find((x) => x.id === selectedEntryId);
     }
     return;
   }, [data, selectedEntryId]);
-  return /* @__PURE__ */ import_react164.default.createElement("div", { className: "Layer__journal__entry-details" }, /* @__PURE__ */ import_react164.default.createElement(
+  return /* @__PURE__ */ import_react163.default.createElement("div", { className: "Layer__journal__entry-details" }, /* @__PURE__ */ import_react163.default.createElement(
     DetailsList,
     {
       title: "Transaction source",
-      actions: /* @__PURE__ */ import_react164.default.createElement(
+      actions: /* @__PURE__ */ import_react163.default.createElement(
         Button,
         {
-          rightIcon: /* @__PURE__ */ import_react164.default.createElement(X_default, null),
+          rightIcon: /* @__PURE__ */ import_react163.default.createElement(X_default, null),
           iconOnly: true,
           onClick: closeSelectedEntry,
           className: "Layer__details-list__close-btn",
@@ -14867,54 +14606,54 @@ var JournalEntryDetails = () => {
         }
       )
     },
-    /* @__PURE__ */ import_react164.default.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ import_react164.default.createElement(Badge, null, entry?.source?.entity_name)),
-    entry?.source?.display_description && /* @__PURE__ */ import_react164.default.createElement(SourceDetailView, { source: entry?.source })
-  ), /* @__PURE__ */ import_react164.default.createElement(
+    /* @__PURE__ */ import_react163.default.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ import_react163.default.createElement(Badge, null, entry?.source?.entity_name)),
+    entry?.source?.display_description && /* @__PURE__ */ import_react163.default.createElement(SourceDetailView, { source: entry?.source })
+  ), /* @__PURE__ */ import_react163.default.createElement(
     DetailsList,
     {
       title: `Journal Entry ${entry?.id.substring(0, 5)}`,
       className: "Layer__border-top"
     },
-    /* @__PURE__ */ import_react164.default.createElement(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry }, humanizeEnum(entry?.entry_type ?? "")),
-    /* @__PURE__ */ import_react164.default.createElement(DetailsListItem, { label: "Date", isLoading: isLoadingEntry }, entry?.entry_at && /* @__PURE__ */ import_react164.default.createElement(DateTime, { value: entry?.entry_at })),
-    /* @__PURE__ */ import_react164.default.createElement(DetailsListItem, { label: "Creation date", isLoading: isLoadingEntry }, entry?.date && /* @__PURE__ */ import_react164.default.createElement(DateTime, { value: entry?.date })),
-    entry?.reversal_id && /* @__PURE__ */ import_react164.default.createElement(DetailsListItem, { label: "Reversal", isLoading: isLoadingEntry }, "Journal Entry #", entry?.reversal_id)
-  ), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ import_react164.default.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ import_react164.default.createElement(Card, null, /* @__PURE__ */ import_react164.default.createElement(
+    /* @__PURE__ */ import_react163.default.createElement(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry }, humanizeEnum(entry?.entry_type ?? "")),
+    /* @__PURE__ */ import_react163.default.createElement(DetailsListItem, { label: "Date", isLoading: isLoadingEntry }, entry?.entry_at && /* @__PURE__ */ import_react163.default.createElement(DateTime, { value: entry?.entry_at })),
+    /* @__PURE__ */ import_react163.default.createElement(DetailsListItem, { label: "Creation date", isLoading: isLoadingEntry }, entry?.date && /* @__PURE__ */ import_react163.default.createElement(DateTime, { value: entry?.date })),
+    entry?.reversal_id && /* @__PURE__ */ import_react163.default.createElement(DetailsListItem, { label: "Reversal", isLoading: isLoadingEntry }, "Journal Entry #", entry?.reversal_id)
+  ), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ import_react163.default.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ import_react163.default.createElement(Card, null, /* @__PURE__ */ import_react163.default.createElement(
     Table,
     {
       componentName: "ledger-account__entry-details",
       borderCollapse: "collapse"
     },
-    /* @__PURE__ */ import_react164.default.createElement(TableHead, null, /* @__PURE__ */ import_react164.default.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ import_react164.default.createElement(TableCell, null, "Line items"), [...Array(3)].map((_, index) => /* @__PURE__ */ import_react164.default.createElement(TableCell, { key: `ledger-empty-cell-${index}` })), /* @__PURE__ */ import_react164.default.createElement(TableCell, null, "Debit"), /* @__PURE__ */ import_react164.default.createElement(TableCell, null, "Credit"))),
-    /* @__PURE__ */ import_react164.default.createElement(TableBody, null, entry?.line_items?.map((item, index) => /* @__PURE__ */ import_react164.default.createElement(
+    /* @__PURE__ */ import_react163.default.createElement(TableHead, null, /* @__PURE__ */ import_react163.default.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ import_react163.default.createElement(TableCell, null, "Line items"), [...Array(3)].map((_, index) => /* @__PURE__ */ import_react163.default.createElement(TableCell, { key: `ledger-empty-cell-${index}` })), /* @__PURE__ */ import_react163.default.createElement(TableCell, null, "Debit"), /* @__PURE__ */ import_react163.default.createElement(TableCell, null, "Credit"))),
+    /* @__PURE__ */ import_react163.default.createElement(TableBody, null, entry?.line_items?.map((item, index) => /* @__PURE__ */ import_react163.default.createElement(
       TableRow,
       {
         key: `ledger-line-item-${index}`,
         rowKey: `ledger-line-item-${index}`
       },
-      /* @__PURE__ */ import_react164.default.createElement(TableCell, null, item.account_identifier?.name || ""),
-      [...Array(3)].map((_, index2) => /* @__PURE__ */ import_react164.default.createElement(TableCell, { key: `ledger-empty-cell-${index2}` })),
-      /* @__PURE__ */ import_react164.default.createElement(TableCell, null, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ import_react164.default.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))),
-      /* @__PURE__ */ import_react164.default.createElement(TableCell, null, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ import_react164.default.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0)))
-    )), /* @__PURE__ */ import_react164.default.createElement(
+      /* @__PURE__ */ import_react163.default.createElement(TableCell, null, item.account_identifier?.name || ""),
+      [...Array(3)].map((_, index2) => /* @__PURE__ */ import_react163.default.createElement(TableCell, { key: `ledger-empty-cell-${index2}` })),
+      /* @__PURE__ */ import_react163.default.createElement(TableCell, null, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ import_react163.default.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))),
+      /* @__PURE__ */ import_react163.default.createElement(TableCell, null, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ import_react163.default.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0)))
+    )), /* @__PURE__ */ import_react163.default.createElement(
       TableRow,
       {
         rowKey: "ledger-line-item-summation",
         variant: "summation"
       },
-      /* @__PURE__ */ import_react164.default.createElement(TableCell, { primary: true }, "Total"),
-      [...Array(3)].map((_, index) => /* @__PURE__ */ import_react164.default.createElement(TableCell, { key: `ledger-empty-cell-${index}` })),
-      /* @__PURE__ */ import_react164.default.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__ */ import_react164.default.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__ */ import_react163.default.createElement(TableCell, { primary: true }, "Total"),
+      [...Array(3)].map((_, index) => /* @__PURE__ */ import_react163.default.createElement(TableCell, { key: `ledger-empty-cell-${index}` })),
+      /* @__PURE__ */ import_react163.default.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__ */ import_react163.default.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
-var import_react166 = __toESM(require("react"));
+var import_react165 = __toESM(require("react"));
 
 // src/components/JournalForm/JournalFormEntryLines.tsx
-var import_react165 = __toESM(require("react"));
+var import_react164 = __toESM(require("react"));
 var JournalFormEntryLines = ({
   entrylineItems,
   addEntryLine,
@@ -14923,17 +14662,17 @@ var JournalFormEntryLines = ({
   sendingForm,
   config
 }) => {
-  const { data: accountsData } = (0, import_react165.useContext)(ChartOfAccountsContext);
-  const { form } = (0, import_react165.useContext)(JournalContext);
+  const { data: accountsData } = (0, import_react164.useContext)(ChartOfAccountsContext);
+  const { form } = (0, import_react164.useContext)(JournalContext);
   const parentOptions = useParentOptions(accountsData);
-  return /* @__PURE__ */ import_react165.default.createElement(import_react165.default.Fragment, null, Object.keys(Direction).map((direction, idx) => {
-    return /* @__PURE__ */ import_react165.default.createElement(
+  return /* @__PURE__ */ import_react164.default.createElement(import_react164.default.Fragment, null, Object.keys(Direction).map((direction, idx) => {
+    return /* @__PURE__ */ import_react164.default.createElement(
       "div",
       {
         key: "Layer__journal__form__input-group-" + idx,
         className: "Layer__journal__form__input-group Layer__journal__form__input-group__border"
       },
-      /* @__PURE__ */ import_react165.default.createElement(
+      /* @__PURE__ */ import_react164.default.createElement(
         Text,
         {
           className: "Layer__journal__form__input-group__title",
@@ -14947,13 +14686,13 @@ var JournalFormEntryLines = ({
         if (item.direction !== direction) {
           return null;
         }
-        return /* @__PURE__ */ import_react165.default.createElement(
+        return /* @__PURE__ */ import_react164.default.createElement(
           "div",
           {
             className: "Layer__journal__form__input-group__line-item",
             key: direction + "-" + idx2
           },
-          /* @__PURE__ */ import_react165.default.createElement(InputGroup, { name: direction, label: "Amount", inline: true }, /* @__PURE__ */ import_react165.default.createElement(
+          /* @__PURE__ */ import_react164.default.createElement(InputGroup, { name: direction, label: "Amount", inline: true }, /* @__PURE__ */ import_react164.default.createElement(
             InputWithBadge,
             {
               name: direction,
@@ -14979,14 +14718,14 @@ var JournalFormEntryLines = ({
               )?.message
             }
           )),
-          /* @__PURE__ */ import_react165.default.createElement(
+          /* @__PURE__ */ import_react164.default.createElement(
             InputGroup,
             {
               name: "account-name",
               label: "Account name",
               inline: true
             },
-            /* @__PURE__ */ import_react165.default.createElement(
+            /* @__PURE__ */ import_react164.default.createElement(
               Select2,
               {
                 options: parentOptions,
@@ -15010,18 +14749,18 @@ var JournalFormEntryLines = ({
                 )?.message
               }
             ),
-            idx2 >= 2 && /* @__PURE__ */ import_react165.default.createElement(
+            idx2 >= 2 && /* @__PURE__ */ import_react164.default.createElement(
               IconButton,
               {
                 className: "Layer__remove__button",
                 onClick: () => removeEntryLine(idx2),
-                icon: /* @__PURE__ */ import_react165.default.createElement(Trash_default, null)
+                icon: /* @__PURE__ */ import_react164.default.createElement(Trash_default, null)
               }
             )
           )
         );
       }),
-      (config.form.addEntryLinesLimit === void 0 || config.form.addEntryLinesLimit > entrylineItems?.length) && /* @__PURE__ */ import_react165.default.createElement(
+      (config.form.addEntryLinesLimit === void 0 || config.form.addEntryLinesLimit > entrylineItems?.length) && /* @__PURE__ */ import_react164.default.createElement(
         TextButton,
         {
           className: "Layer__journal__add-entry-line",
@@ -15044,8 +14783,8 @@ var JournalForm = ({ config, stringOverrides }) => {
     changeFormData,
     addEntryLine,
     removeEntryLine
-  } = (0, import_react166.useContext)(JournalContext);
-  return /* @__PURE__ */ import_react166.default.createElement(
+  } = (0, import_react165.useContext)(JournalContext);
+  return /* @__PURE__ */ import_react165.default.createElement(
     "form",
     {
       className: "Layer__form",
@@ -15054,7 +14793,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         submitForm();
       }
     },
-    /* @__PURE__ */ import_react166.default.createElement("div", { className: "Layer__journal__sidebar__header" }, /* @__PURE__ */ import_react166.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, stringOverrides?.header && "Add New Entry"), /* @__PURE__ */ import_react166.default.createElement("div", { className: "actions" }, /* @__PURE__ */ import_react166.default.createElement(
+    /* @__PURE__ */ import_react165.default.createElement("div", { className: "Layer__journal__sidebar__header" }, /* @__PURE__ */ import_react165.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, stringOverrides?.header && "Add New Entry"), /* @__PURE__ */ import_react165.default.createElement("div", { className: "actions" }, /* @__PURE__ */ import_react165.default.createElement(
       Button,
       {
         type: "button",
@@ -15063,7 +14802,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.cancelButton || "Cancel"
-    ), apiError && /* @__PURE__ */ import_react166.default.createElement(
+    ), apiError && /* @__PURE__ */ import_react165.default.createElement(
       RetryButton,
       {
         type: "submit",
@@ -15072,7 +14811,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.retryButton || "Retry"
-    ), !apiError && /* @__PURE__ */ import_react166.default.createElement(
+    ), !apiError && /* @__PURE__ */ import_react165.default.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -15082,7 +14821,7 @@ var JournalForm = ({ config, stringOverrides }) => {
       },
       stringOverrides?.saveButton || "Save"
     ))),
-    apiError && /* @__PURE__ */ import_react166.default.createElement(
+    apiError && /* @__PURE__ */ import_react165.default.createElement(
       Text,
       {
         size: "sm" /* sm */,
@@ -15090,7 +14829,7 @@ var JournalForm = ({ config, stringOverrides }) => {
       },
       apiError
     ),
-    /* @__PURE__ */ import_react166.default.createElement("div", { className: "Layer__journal__form__input-group" }, /* @__PURE__ */ import_react166.default.createElement(InputGroup, { name: "date", label: "Date", inline: true }, /* @__PURE__ */ import_react166.default.createElement("div", { className: "Layer__journal__datepicker__wrapper" }, /* @__PURE__ */ import_react166.default.createElement(
+    /* @__PURE__ */ import_react165.default.createElement("div", { className: "Layer__journal__form__input-group" }, /* @__PURE__ */ import_react165.default.createElement(InputGroup, { name: "date", label: "Date", inline: true }, /* @__PURE__ */ import_react165.default.createElement("div", { className: "Layer__journal__datepicker__wrapper" }, /* @__PURE__ */ import_react165.default.createElement(
       DatePicker,
       {
         selected: form?.data.entry_at ? new Date(form?.data.entry_at) : /* @__PURE__ */ new Date(),
@@ -15103,7 +14842,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         placeholderText: "Select date",
         currentDateOption: false
       }
-    ), /* @__PURE__ */ import_react166.default.createElement(
+    ), /* @__PURE__ */ import_react165.default.createElement(
       DatePicker,
       {
         selected: form?.data.entry_at ? new Date(form?.data.entry_at) : /* @__PURE__ */ new Date(),
@@ -15117,7 +14856,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         currentDateOption: false
       }
     )))),
-    /* @__PURE__ */ import_react166.default.createElement(
+    /* @__PURE__ */ import_react165.default.createElement(
       JournalFormEntryLines,
       {
         entrylineItems: form?.data.line_items || [],
@@ -15128,7 +14867,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         config
       }
     ),
-    /* @__PURE__ */ import_react166.default.createElement("div", { className: "Layer__journal__form__input-group Layer__journal__form__input-group__textarea" }, /* @__PURE__ */ import_react166.default.createElement(InputGroup, { name: "memo", label: "Notes" }, /* @__PURE__ */ import_react166.default.createElement(
+    /* @__PURE__ */ import_react165.default.createElement("div", { className: "Layer__journal__form__input-group Layer__journal__form__input-group__textarea" }, /* @__PURE__ */ import_react165.default.createElement(InputGroup, { name: "memo", label: "Notes" }, /* @__PURE__ */ import_react165.default.createElement(
       Textarea,
       {
         name: "memo",
@@ -15138,7 +14877,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       }
     ))),
-    /* @__PURE__ */ import_react166.default.createElement("div", { className: "Layer__journal__bottom-actions" }, /* @__PURE__ */ import_react166.default.createElement(
+    /* @__PURE__ */ import_react165.default.createElement("div", { className: "Layer__journal__bottom-actions" }, /* @__PURE__ */ import_react165.default.createElement(
       Button,
       {
         type: "button",
@@ -15147,7 +14886,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.cancelButton || "Cancel"
-    ), apiError && /* @__PURE__ */ import_react166.default.createElement(
+    ), apiError && /* @__PURE__ */ import_react165.default.createElement(
       RetryButton,
       {
         type: "submit",
@@ -15156,7 +14895,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.retryButton || "Retry"
-    ), !apiError && /* @__PURE__ */ import_react166.default.createElement(
+    ), !apiError && /* @__PURE__ */ import_react165.default.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -15175,17 +14914,121 @@ var JournalSidebar = ({
   config,
   stringOverrides
 }) => {
-  const { selectedEntryId } = (0, import_react167.useContext)(JournalContext);
+  const { selectedEntryId } = (0, import_react166.useContext)(JournalContext);
   if (selectedEntryId !== "new") {
-    return /* @__PURE__ */ import_react167.default.createElement(JournalEntryDetails, null);
+    return /* @__PURE__ */ import_react166.default.createElement(JournalEntryDetails, null);
   }
-  return /* @__PURE__ */ import_react167.default.createElement(JournalForm, { config, stringOverrides });
+  return /* @__PURE__ */ import_react166.default.createElement(JournalForm, { config, stringOverrides });
 };
 
 // src/components/JournalTable/JournalTable.tsx
-var COMPONENT_NAME6 = "journal";
+var import_react167 = __toESM(require("react"));
+var import_date_fns33 = require("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__ */ import_react167.default.createElement(TableProvider, null, /* @__PURE__ */ import_react167.default.createElement(
+  JournalTableContent,
+  {
+    view,
+    data,
+    stringOverrides
+  }
+));
+var JournalTableContent = ({
+  view,
+  data,
+  stringOverrides
+}) => {
+  const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = (0, import_react167.useContext)(JournalContext);
+  const { isOpen, setIsOpen } = useTableExpandRow();
+  (0, import_react167.useEffect)(() => {
+    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__ */ import_react167.default.createElement(import_react167.default.Fragment, { key: rowKey + "-" + index }, /* @__PURE__ */ import_react167.default.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__ */ import_react167.default.createElement(
+        TableCell,
+        {
+          withExpandIcon: expandable,
+          onClick: (e) => {
+            e.stopPropagation();
+            expandable && setIsOpen(rowKey);
+          }
+        },
+        rowId(row).substring(0, 5)
+      ),
+      /* @__PURE__ */ import_react167.default.createElement(TableCell, null, row.date && (0, import_date_fns33.format)((0, import_date_fns33.parseISO)(row.date), DATE_FORMAT)),
+      /* @__PURE__ */ import_react167.default.createElement(TableCell, null, humanizeEnum(row.entry_type)),
+      /* @__PURE__ */ import_react167.default.createElement(TableCell, null, "(", row.line_items.length, ")"),
+      /* @__PURE__ */ import_react167.default.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__ */ import_react167.default.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__ */ import_react167.default.createElement(
+      TableRow,
+      {
+        key: rowKey + "-" + index + "-" + subIdx,
+        rowKey: rowKey + "-" + index + "-" + subIdx,
+        depth: depth + 1,
+        selected: selectedEntryId === row.id
+      },
+      /* @__PURE__ */ import_react167.default.createElement(TableCell, null),
+      /* @__PURE__ */ import_react167.default.createElement(TableCell, null),
+      /* @__PURE__ */ import_react167.default.createElement(TableCell, null),
+      /* @__PURE__ */ import_react167.default.createElement(TableCell, null, accountName(subItem)),
+      subItem.direction === "DEBIT" && subItem.amount > 0 ? /* @__PURE__ */ import_react167.default.createElement(TableCell, { isCurrency: true, primary: true }, subItem.amount) : /* @__PURE__ */ import_react167.default.createElement(TableCell, null),
+      subItem.direction === "CREDIT" && subItem.amount > 0 ? /* @__PURE__ */ import_react167.default.createElement(TableCell, { isCurrency: true, primary: true }, subItem.amount) : /* @__PURE__ */ import_react167.default.createElement(TableCell, null)
+    )));
+  };
+  return /* @__PURE__ */ import_react167.default.createElement(Table, { borderCollapse: "collapse" }, /* @__PURE__ */ import_react167.default.createElement(TableHead, null, /* @__PURE__ */ import_react167.default.createElement(TableRow, { isHeadRow: true, rowKey: "journal-head-row" }, /* @__PURE__ */ import_react167.default.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.idColumnHeader || "Id"), /* @__PURE__ */ import_react167.default.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.dateColumnHeader || "Date"), /* @__PURE__ */ import_react167.default.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.transactionColumnHeader || "Transaction"), /* @__PURE__ */ import_react167.default.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.accountColumnHeader || "Account"), /* @__PURE__ */ import_react167.default.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.debitColumnHeader || "Debit"), /* @__PURE__ */ import_react167.default.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.creditColumnHeader || "Credit"))), /* @__PURE__ */ import_react167.default.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,
@@ -15209,22 +15052,19 @@ var JournalTable = ({
   return /* @__PURE__ */ import_react168.default.createElement(
     Panel,
     {
-      sidebar: /* @__PURE__ */ import_react168.default.createElement(JournalSidebar, { parentRef: containerRef, config, stringOverrides: stringOverrides?.journalForm }),
+      sidebar: /* @__PURE__ */ import_react168.default.createElement(
+        JournalSidebar,
+        {
+          parentRef: containerRef,
+          config,
+          stringOverrides: stringOverrides?.journalForm
+        }
+      ),
       sidebarIsOpen: Boolean(selectedEntryId),
       parentRef: containerRef
     },
     /* @__PURE__ */ import_react168.default.createElement(Header, { className: `Layer__${COMPONENT_NAME6}__header` }, /* @__PURE__ */ import_react168.default.createElement(Heading, { className: `Layer__${COMPONENT_NAME6}__title` }, stringOverrides?.componentTitle || "Journal"), /* @__PURE__ */ import_react168.default.createElement("div", { className: `Layer__${COMPONENT_NAME6}__actions` }, /* @__PURE__ */ import_react168.default.createElement(Button, { onClick: () => addEntry(), disabled: isLoading }, stringOverrides?.addEntryButton || "Add Entry"))),
-    /* @__PURE__ */ import_react168.default.createElement("table", { className: "Layer__table Layer__table--hover-effect Layer__journal__table" }, /* @__PURE__ */ import_react168.default.createElement("thead", null, /* @__PURE__ */ import_react168.default.createElement("tr", null, /* @__PURE__ */ import_react168.default.createElement("th", { className: "Layer__table-header" }), /* @__PURE__ */ import_react168.default.createElement("th", { className: "Layer__table-header" }, stringOverrides?.idColumnHeader || "Id"), /* @__PURE__ */ import_react168.default.createElement("th", { className: "Layer__table-header" }, stringOverrides?.dateColumnHeader || "Date"), /* @__PURE__ */ import_react168.default.createElement("th", { className: "Layer__table-header" }, stringOverrides?.transactionColumnHeader || "Transaction"), /* @__PURE__ */ import_react168.default.createElement("th", { className: "Layer__table-header" }, stringOverrides?.accountColumnHeader || "Account"), /* @__PURE__ */ import_react168.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.debitColumnHeader || "Debit"), /* @__PURE__ */ import_react168.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.creditColumnHeader || "Credit"))), /* @__PURE__ */ import_react168.default.createElement("tbody", null, !error && data?.map((entry, idx) => {
-      return /* @__PURE__ */ import_react168.default.createElement(
-        JournalRow,
-        {
-          key: "journal-row-" + idx + entry.id,
-          index: idx,
-          view,
-          row: entry
-        }
-      );
-    }))),
+    data && /* @__PURE__ */ import_react168.default.createElement(JournalTable, { view: "desktop", data }),
     data && /* @__PURE__ */ import_react168.default.createElement("div", { className: "Layer__journal__pagination" }, /* @__PURE__ */ import_react168.default.createElement(
       Pagination,
       {
@@ -15257,7 +15097,7 @@ var JOURNAL_CONFIG = {
 var Journal = (props) => {
   const JournalContextData = useJournal();
   const AccountsContextData = useChartOfAccounts();
-  return /* @__PURE__ */ import_react169.default.createElement(ChartOfAccountsContext.Provider, { value: AccountsContextData }, /* @__PURE__ */ import_react169.default.createElement(JournalContext.Provider, { value: JournalContextData }, /* @__PURE__ */ import_react169.default.createElement(TableProvider, null, /* @__PURE__ */ import_react169.default.createElement(JournalContent, { ...props }))));
+  return /* @__PURE__ */ import_react169.default.createElement(ChartOfAccountsContext.Provider, { value: AccountsContextData }, /* @__PURE__ */ import_react169.default.createElement(JournalContext.Provider, { value: JournalContextData }, /* @__PURE__ */ import_react169.default.createElement(JournalContent, { ...props })));
 };
 var JournalContent = ({
   asWidget,
@@ -15277,7 +15117,7 @@ var JournalContent = ({
     }
   });
   return /* @__PURE__ */ import_react169.default.createElement(Container, { name: "journal", ref: containerRef, asWidget }, /* @__PURE__ */ import_react169.default.createElement(
-    JournalTable,
+    JournalTableWithPanel,
     {
       view,
       containerRef,
@@ -15552,7 +15392,7 @@ var SmileIcon_default = SmileIcon;
 
 // src/components/TasksListItem/TasksListItem.tsx
 var import_react173 = __toESM(require("react"));
-var import_classnames61 = __toESM(require("classnames"));
+var import_classnames59 = __toESM(require("classnames"));
 var TasksListItem = ({
   task,
   goToNextPageIfAllComplete,
@@ -15561,16 +15401,16 @@ var TasksListItem = ({
   const [isOpen, setIsOpen] = (0, import_react173.useState)(defaultOpen);
   const [userResponse, setUserResponse] = (0, import_react173.useState)(task.user_response || "");
   const { submitResponseToTask: submitResponseToTask2 } = (0, import_react173.useContext)(TasksContext);
-  const taskBodyClassName = (0, import_classnames61.default)(
+  const taskBodyClassName = (0, import_classnames59.default)(
     "Layer__tasks-list-item__body",
     isOpen && "Layer__tasks-list-item__body--expanded",
     isComplete(task.status) && "Layer__tasks-list-item--completed"
   );
-  const taskHeadClassName = (0, import_classnames61.default)(
+  const taskHeadClassName = (0, import_classnames59.default)(
     "Layer__tasks-list-item__head-info",
     isComplete(task.status) ? "Layer__tasks-list-item--completed" : "Layer__tasks-list-item--pending"
   );
-  const taskItemClassName = (0, import_classnames61.default)(
+  const taskItemClassName = (0, import_classnames59.default)(
     "Layer__tasks-list-item",
     isOpen && "Layer__tasks-list-item__expanded"
   );
@@ -15669,7 +15509,7 @@ var TasksList = ({ pageSize = 10 }) => {
 
 // src/components/TasksPending/TasksPending.tsx
 var import_react175 = __toESM(require("react"));
-var import_classnames62 = __toESM(require("classnames"));
+var import_classnames60 = __toESM(require("classnames"));
 var import_date_fns34 = require("date-fns");
 var import_recharts4 = require("recharts");
 var TasksPending = () => {
@@ -15685,7 +15525,7 @@ var TasksPending = () => {
       value: data?.filter((task) => !isComplete(task.status)).length
     }
   ];
-  const taskStatusClassName = (0, import_classnames62.default)(
+  const taskStatusClassName = (0, import_classnames60.default)(
     completedTasks && completedTasks > 0 ? "Layer__tasks-pending-bar__status--done" : "Layer__tasks-pending-bar__status--pending"
   );
   return /* @__PURE__ */ import_react175.default.createElement("div", { className: "Layer__tasks-pending" }, /* @__PURE__ */ import_react175.default.createElement(Text, { size: "lg" /* lg */ }, (0, import_date_fns34.format)(Date.now(), "MMMM")), /* @__PURE__ */ import_react175.default.createElement("div", { className: "Layer__tasks-pending-bar" }, /* @__PURE__ */ import_react175.default.createElement(Text, { size: "sm" /* sm */ }, /* @__PURE__ */ import_react175.default.createElement("span", { className: taskStatusClassName }, completedTasks), "/", data?.length, " done"), /* @__PURE__ */ import_react175.default.createElement(import_recharts4.PieChart, { width: 24, height: 24, className: "mini-chart" }, /* @__PURE__ */ import_react175.default.createElement(
@@ -15719,7 +15559,7 @@ var TasksPending = () => {
 };
 
 // src/components/Tasks/Tasks.tsx
-var import_classnames63 = __toESM(require("classnames"));
+var import_classnames61 = __toESM(require("classnames"));
 var UseTasksContext = (0, import_react176.createContext)({
   data: void 0,
   isLoading: void 0,
@@ -15791,7 +15631,7 @@ var TasksComponent = ({
   ), /* @__PURE__ */ import_react176.default.createElement(
     "div",
     {
-      className: (0, import_classnames63.default)(
+      className: (0, import_classnames61.default)(
         "Layer__tasks__content",
         !open && "Layer__tasks__content--collapsed"
       )
@@ -15885,7 +15725,7 @@ var BookkeepingUpsellBar = ({
 
 // src/views/BookkeepingOverview/BookkeepingOverview.tsx
 var import_react178 = __toESM(require("react"));
-var import_classnames64 = __toESM(require("classnames"));
+var import_classnames62 = __toESM(require("classnames"));
 var BookkeepingOverview = ({
   title,
   // deprecated
@@ -15951,7 +15791,7 @@ var BookkeepingOverview = ({
     ), /* @__PURE__ */ import_react178.default.createElement(
       Container,
       {
-        name: (0, import_classnames64.default)(
+        name: (0, import_classnames62.default)(
           "bookkeeping-overview-profit-and-loss-chart",
           pnlToggle !== "revenue" && "bookkeeping-overview-profit-and-loss-chart--hidden"
         )
@@ -15967,7 +15807,7 @@ var BookkeepingOverview = ({
     ), /* @__PURE__ */ import_react178.default.createElement(
       Container,
       {
-        name: (0, import_classnames64.default)(
+        name: (0, import_classnames62.default)(
           "bookkeeping-overview-profit-and-loss-chart",
           pnlToggle !== "expenses" && "bookkeeping-overview-profit-and-loss-chart--hidden"
         )
@@ -15998,13 +15838,13 @@ var BadgeLoader = ({ children }) => {
 
 // src/components/NotificationCard/NotificationCard.tsx
 var import_react180 = __toESM(require("react"));
-var import_classnames65 = __toESM(require("classnames"));
+var import_classnames63 = __toESM(require("classnames"));
 var NotificationCard = ({
   onClick,
   children,
   className
 }) => {
-  return /* @__PURE__ */ import_react180.default.createElement("div", { className: (0, import_classnames65.default)("Layer__notification-card", className) }, /* @__PURE__ */ import_react180.default.createElement("div", { className: "Layer__notification-card__main" }, children), /* @__PURE__ */ import_react180.default.createElement(
+  return /* @__PURE__ */ import_react180.default.createElement("div", { className: (0, import_classnames63.default)("Layer__notification-card", className) }, /* @__PURE__ */ import_react180.default.createElement("div", { className: "Layer__notification-card__main" }, children), /* @__PURE__ */ import_react180.default.createElement(
     IconButton,
     {
       icon: /* @__PURE__ */ import_react180.default.createElement(ChevronRight_default, null),
@@ -16083,7 +15923,7 @@ var TransactionToReviewCard = ({
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
-var import_classnames66 = __toESM(require("classnames"));
+var import_classnames64 = __toESM(require("classnames"));
 var AccountingOverview = ({
   title = "Accounting overview",
   enableOnboarding = false,
@@ -16143,7 +15983,7 @@ var AccountingOverview = ({
   ), /* @__PURE__ */ import_react182.default.createElement(
     Container,
     {
-      name: (0, import_classnames66.default)(
+      name: (0, import_classnames64.default)(
         "accounting-overview-profit-and-loss-chart",
         pnlToggle !== "revenue" && "accounting-overview-profit-and-loss-chart--hidden"
       )
@@ -16160,7 +16000,7 @@ var AccountingOverview = ({
   ), /* @__PURE__ */ import_react182.default.createElement(
     Container,
     {
-      name: (0, import_classnames66.default)(
+      name: (0, import_classnames64.default)(
         "accounting-overview-profit-and-loss-chart",
         pnlToggle !== "expenses" && "accounting-overview-profit-and-loss-chart--hidden"
       )