@layerfi/components 0.1.11 → 0.1.13

package/dist/index.js

@@ -313,6 +313,9 @@ var getCategories = get(({ businessId }) => `/v1/businesses/${businessId}/catego
 var getChartOfAccounts = get(
   ({ businessId }) => `/v1/businesses/${businessId}/ledger/accounts`
 );
+var getLedgerAccountBalances = get(
+  ({ businessId }) => `/v1/businesses/${businessId}/ledger/balances`
+);
 var createAccount = post(
   ({ businessId }) => `/v1/businesses/${businessId}/ledger/accounts`
 );
@@ -355,6 +358,7 @@ var Layer = {
   getBankTransactions,
   getCategories,
   getChartOfAccounts,
+  getLedgerAccountBalances,
   getLedgerAccountsLines,
   getLedgerAccountsEntry,
   getProfitAndLoss,
@@ -823,7 +827,6 @@ var debounce = (fnc, timeout = 300) => {
     }, timeout);
   };
 };
-var convertToStableName = (name) => name.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, "").replace(/\W+/g, " ").split(/ |\B(?=[A-Z])/).map((word) => word.toLowerCase()).join("_");
 
 // src/components/BankTransactionListItem/BankTransactionListItem.tsx
 var import_react36 = __toESM(require("react"));
@@ -2226,6 +2229,7 @@ var FileInput = ({ text = "Upload", onUpload }) => {
 // src/components/Input/Select.tsx
 var import_react26 = __toESM(require("react"));
 var import_react_select2 = __toESM(require("react-select"));
+var import_classnames14 = __toESM(require("classnames"));
 var DropdownIndicator2 = (props) => {
   return /* @__PURE__ */ import_react26.default.createElement(import_react_select2.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react26.default.createElement(ChevronDownFill_default, null));
 };
@@ -2237,13 +2241,20 @@ var Select2 = ({
   value,
   onChange,
   disabled,
-  placeholder
+  placeholder,
+  isInvalid,
+  errorMessage
 }) => {
-  return /* @__PURE__ */ import_react26.default.createElement(
+  const baseClassName = (0, import_classnames14.default)(
+    "Layer__select",
+    isInvalid ? "Layer__select--error" : "",
+    className
+  );
+  return /* @__PURE__ */ import_react26.default.createElement(Tooltip, { disabled: !isInvalid || !errorMessage }, /* @__PURE__ */ import_react26.default.createElement(TooltipTrigger, { className: "Layer__input-tooltip" }, /* @__PURE__ */ import_react26.default.createElement(
     import_react_select2.default,
     {
       name,
-      className: `Layer__select ${className ?? ""}`,
+      className: baseClassName,
       classNamePrefix,
       placeholder: placeholder ?? "Select...",
       options,
@@ -2254,7 +2265,7 @@ var Select2 = ({
       components: { DropdownIndicator: DropdownIndicator2 },
       isDisabled: disabled
     }
-  );
+  )), /* @__PURE__ */ import_react26.default.createElement(TooltipContent, { className: "Layer__tooltip" }, errorMessage));
 };
 
 // src/components/MatchForm/MatchForm.tsx
@@ -2284,7 +2295,7 @@ var MatchBadge = ({
 };
 
 // src/components/MatchForm/MatchForm.tsx
-var import_classnames14 = __toESM(require("classnames"));
+var import_classnames15 = __toESM(require("classnames"));
 var import_date_fns6 = require("date-fns");
 var MatchForm = ({
   classNamePrefix,
@@ -2303,7 +2314,7 @@ var MatchForm = ({
       "div",
       {
         key: idx,
-        className: (0, import_classnames14.default)(
+        className: (0, import_classnames15.default)(
           `${classNamePrefix}__match-row`,
           match.id === selectedMatchId ? `${classNamePrefix}__match-row--selected` : ""
         ),
@@ -2362,18 +2373,18 @@ var MatchForm = ({
 
 // src/components/Textarea/Textarea.tsx
 var import_react29 = __toESM(require("react"));
-var import_classnames15 = __toESM(require("classnames"));
+var import_classnames16 = __toESM(require("classnames"));
 var Textarea = ({
   className,
   ...props
 }) => {
-  const baseClassName = (0, import_classnames15.default)("Layer__textarea", className);
+  const baseClassName = (0, import_classnames16.default)("Layer__textarea", className);
   return /* @__PURE__ */ import_react29.default.createElement("textarea", { ...props, className: baseClassName });
 };
 
 // src/components/Toggle/Toggle.tsx
 var import_react30 = __toESM(require("react"));
-var import_classnames16 = __toESM(require("classnames"));
+var import_classnames17 = __toESM(require("classnames"));
 var Toggle = ({
   name,
   options,
@@ -2390,7 +2401,7 @@ var Toggle = ({
     }
   });
   const selectedValue = selected || options[0].value;
-  const baseClassName = (0, import_classnames16.default)(
+  const baseClassName = (0, import_classnames17.default)(
     "Layer__toggle",
     `Layer__toggle--${size}`,
     initialized ? "Layer__toggle--initialized" : ""
@@ -2641,7 +2652,7 @@ var Notification = ({
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-var import_classnames17 = __toESM(require("classnames"));
+var import_classnames18 = __toESM(require("classnames"));
 var hasMatch = (bankTransaction) => {
   return Boolean(
     bankTransaction?.suggested_matches && bankTransaction?.suggested_matches?.length > 0 || bankTransaction?.match
@@ -2894,7 +2905,7 @@ var ExpandedBankTransactionRow = (0, import_react32.forwardRef)(
         /* @__PURE__ */ import_react32.default.createElement("div", { className: `${className}__content-panels` }, /* @__PURE__ */ import_react32.default.createElement(
           "div",
           {
-            className: (0, import_classnames17.default)(
+            className: (0, import_classnames18.default)(
               `${className}__match`,
               `${className}__content-panel`,
               purpose === "match" /* match */ ? `${className}__content-panel--active` : ""
@@ -2916,7 +2927,7 @@ var ExpandedBankTransactionRow = (0, import_react32.forwardRef)(
         ), /* @__PURE__ */ import_react32.default.createElement(
           "div",
           {
-            className: (0, import_classnames17.default)(
+            className: (0, import_classnames18.default)(
               `${className}__splits`,
               `${className}__content-panel`,
               purpose === "categorize" /* categorize */ ? `${className}__content-panel--active` : ""
@@ -3055,7 +3066,7 @@ var SplitTooltipDetails = ({
 };
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-var import_classnames18 = __toESM(require("classnames"));
+var import_classnames19 = __toESM(require("classnames"));
 var import_date_fns7 = require("date-fns");
 var isCredit = ({ direction }) => direction === "CREDIT" /* CREDIT */;
 var extractDescriptionForSplit = (category) => {
@@ -3065,7 +3076,15 @@ var extractDescriptionForSplit = (category) => {
   return category.entries.map((c) => c.category.display_name).join(", ");
 };
 var getDefaultSelectedCategory = (bankTransaction) => {
-  return hasSuggestions(bankTransaction.categorization_flow) ? mapCategoryToOption(bankTransaction.categorization_flow.suggestions[0]) : bankTransaction.suggested_matches?.length === 1 ? mapSuggestedMatchToOption(bankTransaction.suggested_matches[0]) : void 0;
+  if (bankTransaction.suggested_matches?.[0]) {
+    return mapSuggestedMatchToOption(bankTransaction.suggested_matches?.[0]);
+  }
+  if (hasSuggestions(bankTransaction.categorization_flow)) {
+    return mapCategoryToOption(
+      bankTransaction.categorization_flow.suggestions[0]
+    );
+  }
+  return void 0;
 };
 var clickTimer = Date.now();
 var BankTransactionRow = ({
@@ -3146,7 +3165,7 @@ var BankTransactionRow = ({
   }
   const className = "Layer__bank-transaction-row";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = (0, import_classnames18.default)(
+  const rowClassName = (0, import_classnames19.default)(
     className,
     bankTransaction.recently_categorized && editable ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
@@ -3220,7 +3239,7 @@ var BankTransactionRow = ({
     /* @__PURE__ */ import_react34.default.createElement(
       "td",
       {
-        className: (0, import_classnames18.default)(
+        className: (0, import_classnames19.default)(
           "Layer__table-cell",
           "Layer__table-cell__category-col",
           `${className}__actions-cell`,
@@ -3375,7 +3394,7 @@ var Assignment = ({ bankTransaction }) => {
 };
 
 // src/components/BankTransactionListItem/BankTransactionListItem.tsx
-var import_classnames19 = __toESM(require("classnames"));
+var import_classnames20 = __toESM(require("classnames"));
 var import_date_fns9 = require("date-fns");
 var isCredit2 = ({ direction }) => direction === "CREDIT" /* CREDIT */;
 var BankTransactionListItem = ({
@@ -3434,7 +3453,7 @@ var BankTransactionListItem = ({
   }
   const className = "Layer__bank-transaction-list-item";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = (0, import_classnames19.default)(
+  const rowClassName = (0, import_classnames20.default)(
     className,
     bankTransaction.recently_categorized ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
@@ -3741,10 +3760,10 @@ var hslToHex = (hsl) => {
 };
 
 // src/components/Container/Container.tsx
-var import_classnames20 = __toESM(require("classnames"));
+var import_classnames21 = __toESM(require("classnames"));
 var Container = (0, import_react37.forwardRef)(
   ({ name, className, children, asWidget, elevated = false }, ref) => {
-    const baseClassName = (0, import_classnames20.default)(
+    const baseClassName = (0, import_classnames21.default)(
       "Layer__component Layer__component-container",
       `Layer__${name}`,
       elevated && "Layer__component--elevated",
@@ -3759,10 +3778,10 @@ var Container = (0, import_react37.forwardRef)(
 
 // src/components/Container/Header.tsx
 var import_react38 = __toESM(require("react"));
-var import_classnames21 = __toESM(require("classnames"));
+var import_classnames22 = __toESM(require("classnames"));
 var Header = (0, import_react38.forwardRef)(
   ({ className, children, style }, ref) => {
-    const baseClassName = (0, import_classnames21.default)("Layer__component-header", className);
+    const baseClassName = (0, import_classnames22.default)("Layer__component-header", className);
     return /* @__PURE__ */ import_react38.default.createElement("header", { ref, className: baseClassName, style }, children);
   }
 );
@@ -3910,7 +3929,7 @@ var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React54.createEl
 var ChevronRight_default = ChavronRight;
 
 // src/components/Pagination/Pagination.tsx
-var import_classnames22 = __toESM(require("classnames"));
+var import_classnames23 = __toESM(require("classnames"));
 var Pagination = ({
   onPageChange,
   totalCount,
@@ -3935,7 +3954,7 @@ var Pagination = ({
     "li",
     {
       key: `page-prev`,
-      className: (0, import_classnames22.default)(
+      className: (0, import_classnames23.default)(
         "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--previous",
         {
           disabled: currentPage === 1
@@ -3959,7 +3978,7 @@ var Pagination = ({
       "li",
       {
         key: `page-${pageNumber}`,
-        className: (0, import_classnames22.default)("Layer__pagination-item", {
+        className: (0, import_classnames23.default)("Layer__pagination-item", {
           selected: pageNumber === currentPage
         }),
         onClick: () => {
@@ -3974,7 +3993,7 @@ var Pagination = ({
     "li",
     {
       key: `page-last`,
-      className: (0, import_classnames22.default)(
+      className: (0, import_classnames23.default)(
         "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--next",
         {
           disabled: currentPage === lastPage
@@ -4472,7 +4491,7 @@ var MoreVertical_default = MoreVertical;
 
 // src/components/HoverMenu/HoverMenu.tsx
 var import_react47 = __toESM(require("react"));
-var import_classnames23 = __toESM(require("classnames"));
+var import_classnames24 = __toESM(require("classnames"));
 var HoverMenu = ({
   children,
   config,
@@ -4481,7 +4500,7 @@ var HoverMenu = ({
 }) => {
   const [openMenu, setOpenMenu] = (0, import_react47.useState)(false);
   const hoverMenuRef = (0, import_react47.useRef)(null);
-  const hoverMenuClassName = (0, import_classnames23.default)(
+  const hoverMenuClassName = (0, import_classnames24.default)(
     "Layer__hover-menu",
     openMenu && "Layer__hover-menu--open"
   );
@@ -4844,22 +4863,17 @@ var InstitutionIcon = ({ size = 18, ...props }) => /* @__PURE__ */ React62.creat
 var InstitutionIcon_default = InstitutionIcon;
 
 // src/components/LinkedAccountThumb/LinkedAccountThumb.tsx
-var import_classnames24 = __toESM(require("classnames"));
-var AccountNumber = ({ accountNumber }) => /* @__PURE__ */ import_react49.default.createElement("div", { className: "account-number" }, /* @__PURE__ */ import_react49.default.createElement(Text, { size: "sm" }, "\u2022\u2022\u2022", accountNumber));
+var import_classnames25 = __toESM(require("classnames"));
+var AccountNumber = ({ accountNumber }) => /* @__PURE__ */ import_react49.default.createElement("div", { className: "account-number" }, /* @__PURE__ */ import_react49.default.createElement(Text, { size: "sm" }, "\u2022\u2022\u2022 ", accountNumber));
 var LinkedAccountThumb = ({
   account,
   asWidget
 }) => {
-  const linkedAccountThumbClassName = (0, import_classnames24.default)(
+  const linkedAccountThumbClassName = (0, import_classnames25.default)(
     "Layer__linked-account-thumb",
     asWidget && "--as-widget"
   );
-  return /* @__PURE__ */ import_react49.default.createElement("div", { className: linkedAccountThumbClassName }, /* @__PURE__ */ import_react49.default.createElement("div", { className: "topbar" }, /* @__PURE__ */ import_react49.default.createElement("div", { className: "topbar-details" }, /* @__PURE__ */ import_react49.default.createElement(Text, { as: "span", className: "account-name" }, account.external_account_name), !asWidget && /* @__PURE__ */ import_react49.default.createElement(
-    AccountNumber,
-    {
-      accountNumber: "TODO"
-    }
-  ), /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement("div", { className: linkedAccountThumbClassName }, /* @__PURE__ */ import_react49.default.createElement("div", { className: "topbar" }, /* @__PURE__ */ import_react49.default.createElement("div", { className: "topbar-details" }, /* @__PURE__ */ import_react49.default.createElement(Text, { as: "span", className: "account-name" }, account.external_account_name), !asWidget && account.mask && /* @__PURE__ */ import_react49.default.createElement(AccountNumber, { accountNumber: account.mask }), /* @__PURE__ */ import_react49.default.createElement(
     Text,
     {
       as: "span",
@@ -4867,7 +4881,15 @@ var LinkedAccountThumb = ({
       size: "sm"
     },
     account.institution?.name
-  )), /* @__PURE__ */ import_react49.default.createElement("div", { className: "topbar-logo" }, !account.institution?.logo && /* @__PURE__ */ import_react49.default.createElement(InstitutionIcon_default, null))), !asWidget && /* @__PURE__ */ import_react49.default.createElement("div", { className: "middlebar" }, /* @__PURE__ */ import_react49.default.createElement(
+  )), /* @__PURE__ */ import_react49.default.createElement("div", { className: "topbar-logo" }, account.logo_base64 != void 0 ? /* @__PURE__ */ import_react49.default.createElement(
+    "img",
+    {
+      width: 28,
+      height: 28,
+      src: `data:image/png;base64,${account.logo_base64}`,
+      alt: account.institution?.name
+    }
+  ) : /* @__PURE__ */ import_react49.default.createElement(InstitutionIcon_default, null))), !asWidget && /* @__PURE__ */ import_react49.default.createElement("div", { className: "middlebar" }, /* @__PURE__ */ import_react49.default.createElement(
     Text,
     {
       as: "span",
@@ -4887,12 +4909,12 @@ var LinkedAccountThumb = ({
       className: "account-balance-text",
       size: "sm"
     },
-    "General ledger balance"
+    "Ledger balance"
   ), /* @__PURE__ */ import_react49.default.createElement(Text, { as: "span", className: "account-balance" }, "$", centsToDollars(account.current_ledger_balance))));
 };
 
 // src/components/LinkedAccounts/LinkedAccounts.tsx
-var import_classnames25 = __toESM(require("classnames"));
+var import_classnames26 = __toESM(require("classnames"));
 var COMPONENT_NAME2 = "linked-accounts";
 var LinkedAccounts = ({ asWidget, elevated }) => {
   const {
@@ -4909,7 +4931,7 @@ var LinkedAccounts = ({ asWidget, elevated }) => {
     { name: "Renew link", action: renewLinkAccount },
     { name: "Unlink", action: unlinkAccount }
   ];
-  const linkedAccountsNewAccountClassName = (0, import_classnames25.default)(
+  const linkedAccountsNewAccountClassName = (0, import_classnames26.default)(
     "Layer__linked-accounts__new-account",
     asWidget && "--as-widget"
   );
@@ -6068,7 +6090,7 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React70.createElem
 var SortArrows_default = SortArrows;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
-var import_classnames26 = __toESM(require("classnames"));
+var import_classnames27 = __toESM(require("classnames"));
 var DetailedTable = ({
   filteredData,
   sidebarScope,
@@ -6078,7 +6100,7 @@ var DetailedTable = ({
   setHoveredItem
 }) => {
   const buildColClass = (column) => {
-    return (0, import_classnames26.default)(
+    return (0, import_classnames27.default)(
       "Layer__sortable-col",
       sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
     );
@@ -6113,7 +6135,7 @@ var DetailedTable = ({
       "tr",
       {
         key: `pl-side-table-item-${idx}`,
-        className: (0, import_classnames26.default)(
+        className: (0, import_classnames27.default)(
           "Layer__profit-and-loss-detailed-table__row",
           hoveredItem && hoveredItem === item.display_name ? "active" : ""
         ),
@@ -6244,13 +6266,13 @@ var import_react61 = __toESM(require("react"));
 
 // src/components/SkeletonLoader/SkeletonLoader.tsx
 var import_react59 = __toESM(require("react"));
-var import_classnames27 = __toESM(require("classnames"));
+var import_classnames28 = __toESM(require("classnames"));
 var SkeletonLoader = ({
   height,
   width,
   className
 }) => {
-  const baseClassName = (0, import_classnames27.default)(
+  const baseClassName = (0, import_classnames28.default)(
     "Layer__skeleton-loader Layer__anim--skeleton-loading",
     className
   );
@@ -6294,7 +6316,7 @@ var MiniChart = ({ data }) => {
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-var import_classnames28 = __toESM(require("classnames"));
+var import_classnames29 = __toESM(require("classnames"));
 var CHART_PLACEHOLDER = [
   {
     name: "placeholder",
@@ -6350,7 +6372,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ import_react61.default.createElement(
       "div",
       {
-        className: (0, import_classnames28.default)(
+        className: (0, import_classnames29.default)(
           "Layer__profit-and-loss-summaries__summary",
           actionable && "Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--income",
@@ -6372,7 +6394,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ import_react61.default.createElement(
       "div",
       {
-        className: (0, import_classnames28.default)(
+        className: (0, import_classnames29.default)(
           "Layer__profit-and-loss-summaries__summary",
           actionable && "Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--expenses",
@@ -6396,7 +6418,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ import_react61.default.createElement(
       "div",
       {
-        className: (0, import_classnames28.default)(
+        className: (0, import_classnames29.default)(
           "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit",
           actionable && "Layer__actionable"
         )
@@ -6587,7 +6609,7 @@ var empty_profit_and_loss_report_default = {
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-var import_classnames29 = __toESM(require("classnames"));
+var import_classnames30 = __toESM(require("classnames"));
 var ProfitAndLossTable = ({ lockExpanded, asContainer }) => {
   const {
     data: actualData,
@@ -6599,7 +6621,7 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer }) => {
     return /* @__PURE__ */ import_react63.default.createElement(
       "div",
       {
-        className: (0, import_classnames29.default)(
+        className: (0, import_classnames30.default)(
           "Layer__profit-and-loss-table__loader-container",
           asContainer && "Layer__component-container"
         )
@@ -6610,7 +6632,7 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer }) => {
   return /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, /* @__PURE__ */ import_react63.default.createElement(
     "div",
     {
-      className: (0, import_classnames29.default)(
+      className: (0, import_classnames30.default)(
         "Layer__profit-and-loss-table Layer__profit-and-loss-table--main",
         asContainer && "Layer__component-container"
       )
@@ -6764,7 +6786,7 @@ var import_react66 = __toESM(require("react"));
 
 // src/components/Panel/Panel.tsx
 var import_react65 = __toESM(require("react"));
-var import_classnames30 = __toESM(require("classnames"));
+var import_classnames31 = __toESM(require("classnames"));
 var Panel = ({
   children,
   className,
@@ -6782,7 +6804,7 @@ var Panel = ({
   return /* @__PURE__ */ import_react65.default.createElement(
     "div",
     {
-      className: (0, import_classnames30.default)(
+      className: (0, import_classnames31.default)(
         "Layer__panel",
         className,
         sidebarIsOpen && "Layer__panel--open"
@@ -6864,6 +6886,209 @@ var import_react81 = __toESM(require("react"));
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
 var import_react67 = require("react");
+
+// src/components/ChartOfAccountsForm/constants.ts
+var LEDGER_ACCOUNT_TYPES = [
+  {
+    value: "ASSET",
+    label: "Assets"
+  },
+  {
+    value: "LIABILITY",
+    label: "Liabilities"
+  },
+  {
+    value: "EQUITY",
+    label: "Equities"
+  },
+  {
+    value: "REVENUE",
+    label: "Revenue"
+  },
+  {
+    value: "EXPENSE",
+    label: "Expenses"
+  }
+];
+var DEFAULT_ACCOUNT_TYPE_DIRECTION = {
+  ASSET: "DEBIT" /* DEBIT */,
+  LIABILITY: "CREDIT" /* CREDIT */,
+  EQUITY: "CREDIT" /* CREDIT */,
+  REVENUE: "CREDIT" /* CREDIT */,
+  EXPENSE: "DEBIT" /* DEBIT */
+};
+var NORMALITY_OPTIONS = [
+  {
+    value: "DEBIT" /* DEBIT */,
+    label: "Debit"
+  },
+  {
+    value: "CREDIT" /* CREDIT */,
+    label: "Credit"
+  }
+];
+var ASSET_LEDGER_ACCOUNT_SUBTYPES = [
+  {
+    value: "BANK_ACCOUNTS",
+    label: "Bank Accounts"
+  },
+  {
+    value: "ACCOUNTS_RECEIVABLE",
+    label: "Accounts Receivable"
+  },
+  {
+    value: "INVENTORY",
+    label: "Inventory"
+  },
+  {
+    value: "PAYMENT_PROCESSOR_CLEARING_ACCOUNT",
+    label: "Payment Processor Clearing Accounts"
+  },
+  {
+    value: "FIXED_ASSET",
+    label: "Fixed Assets"
+  },
+  {
+    value: "CASH",
+    label: "Cash"
+  },
+  {
+    value: "UNDEPOSITED_FUNDS",
+    label: "Undeposited Funds"
+  }
+];
+var LIABILITY_LEDGER_ACCOUNT_SUBTYPES = [
+  {
+    value: "LIABILITY",
+    label: "Liabilities"
+  },
+  {
+    value: "ACCOUNTS_PAYABLE",
+    label: "Accounts Payable"
+  },
+  {
+    value: "CREDIT_CARD",
+    label: "Credit Cards"
+  },
+  {
+    value: "SHAREHOLDER_LOAN",
+    label: "Shareholder Loans"
+  },
+  {
+    value: "PAYROLL_LIABILITY",
+    label: "Payroll Liabilities"
+  },
+  {
+    value: "SALES_TAXES_PAYABLE",
+    label: "Sales Taxes Payable"
+  },
+  {
+    value: "LINE_OF_CREDIT",
+    label: "Lines of Credit"
+  },
+  {
+    value: "NOTES_PAYABLE",
+    label: "Notes Payable"
+  },
+  {
+    value: "TIPS",
+    label: "Tips"
+  },
+  {
+    value: "UNEARNED_REVENUE",
+    label: "Unearned Revenue"
+  },
+  {
+    value: "UNDEPOSITED_OUTFLOWS",
+    label: "Undeposited Outflows"
+  }
+];
+var EQUITY_LEDGER_ACCOUNT_SUBTYPES = [
+  {
+    value: "CONTRIBUTIONS",
+    label: "Contributions"
+  },
+  {
+    value: "DISTRIBUTIONS",
+    label: "Distributions"
+  },
+  {
+    value: "COMMON_STOCK",
+    label: "Common Stock"
+  },
+  {
+    value: "ADDITIONAL_PAID_IN_CAPITAL",
+    label: "Additional Paid In Capital"
+  },
+  {
+    value: "RETAINED_EARNINGS",
+    label: "Retained Earnings"
+  },
+  {
+    value: "ACCUMULATED_ADJUSTMENTS",
+    label: "Accumulated Adjustments"
+  },
+  {
+    value: "OPENING_BALANCE_EQUITY",
+    label: "Opening Balance Equity"
+  }
+];
+var REVENUE_LEDGER_ACCOUNT_SUBTYPES = [
+  {
+    value: "SALES",
+    label: "Sales"
+  },
+  {
+    value: "UNCATEGORIZED_REVENUE",
+    label: "Uncategorized Revenue"
+  },
+  {
+    value: "RETURNS_ALLOWANCES",
+    label: "Returns & Allowances"
+  }
+];
+var EXPENSE_LEDGER_ACCOUNT_SUBTYPES = [
+  {
+    value: "COGS",
+    label: "COGS"
+  },
+  {
+    value: "OPERATING_EXPENSES",
+    label: "Operating Expenses"
+  },
+  {
+    value: "PAYROLL",
+    label: "Payroll"
+  },
+  {
+    value: "TAXES_LICENSES",
+    label: "Taxes & Licenses"
+  },
+  {
+    value: "BAD_DEBT",
+    label: "Bad Debt"
+  },
+  {
+    value: "CHARITABLE_CONTRIBUTIONS",
+    label: "Charitable Contributions"
+  }
+];
+var LEDGER_ACCOUNT_SUBTYPES = [
+  ...ASSET_LEDGER_ACCOUNT_SUBTYPES,
+  ...LIABILITY_LEDGER_ACCOUNT_SUBTYPES,
+  ...EQUITY_LEDGER_ACCOUNT_SUBTYPES,
+  ...REVENUE_LEDGER_ACCOUNT_SUBTYPES,
+  ...EXPENSE_LEDGER_ACCOUNT_SUBTYPES
+];
+var LEDGER_ACCOUNT_SUBTYPES_FOR_TYPE = {
+  ASSET: ASSET_LEDGER_ACCOUNT_SUBTYPES,
+  LIABILITY: LIABILITY_LEDGER_ACCOUNT_SUBTYPES,
+  EQUITY: EQUITY_LEDGER_ACCOUNT_SUBTYPES,
+  REVENUE: REVENUE_LEDGER_ACCOUNT_SUBTYPES,
+  EXPENSE: EXPENSE_LEDGER_ACCOUNT_SUBTYPES
+};
+
+// src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
 var import_swr6 = __toESM(require("swr"));
 var validate = (formData) => {
   const errors = [];
@@ -6871,20 +7096,67 @@ var validate = (formData) => {
   if (nameError) {
     errors.push(nameError);
   }
+  const normalityError = validateNormality(formData);
+  if (normalityError) {
+    errors.push(normalityError);
+  }
+  const typeError = validateType(formData);
+  if (typeError) {
+    errors.push(typeError);
+  }
   return errors;
 };
 var revalidateField = (fieldName, formData) => {
   switch (fieldName) {
-    case "name":
+    case "name": {
       const nameError = validateName(formData);
       if (nameError) {
         return (formData?.errors || []).filter((x) => x.field !== fieldName).concat([nameError]);
       }
       return (formData?.errors || []).filter((x) => x.field !== fieldName);
+    }
+    case "normality": {
+      const normalityError = validateNormality(formData);
+      if (normalityError) {
+        return (formData?.errors || []).filter((x) => x.field !== fieldName).concat([normalityError]);
+      }
+      return (formData?.errors || []).filter((x) => x.field !== fieldName);
+    }
+    case "type": {
+      const typeError = validateType(formData);
+      if (typeError) {
+        return (formData?.errors || []).filter((x) => x.field !== fieldName).concat([typeError]);
+      }
+      return (formData?.errors || []).filter((x) => x.field !== fieldName);
+    }
     default:
       return formData?.errors;
   }
 };
+var validateType = (formData) => {
+  if (!formData?.data.type?.value) {
+    return {
+      field: "type",
+      message: "Must be selected"
+    };
+  }
+  return;
+};
+var validateNormality = (formData) => {
+  const stringValueNormality = formData?.data.normality?.value?.toString();
+  if (stringValueNormality === void 0) {
+    return {
+      field: "normality",
+      message: "Must be selected"
+    };
+  } else if (!["DEBIT", "CREDIT"].includes(stringValueNormality)) {
+    return {
+      field: "normality",
+      message: "Must be selected"
+    };
+  }
+  return;
+};
 var validateName = (formData) => {
   if (!formData?.data.name?.trim()) {
     return {
@@ -6902,7 +7174,7 @@ var useChartOfAccounts = () => {
   const [apiError, setApiError] = (0, import_react67.useState)(void 0);
   const { data, isLoading, isValidating, error, mutate } = (0, import_swr6.default)(
     businessId && auth?.access_token && `chart-of-accounts-${businessId}`,
-    Layer.getChartOfAccounts(apiUrl, auth?.access_token, {
+    Layer.getLedgerAccountBalances(apiUrl, auth?.access_token, {
       params: { businessId }
     })
   );
@@ -6925,14 +7197,8 @@ var useChartOfAccounts = () => {
   const update = async (accountData, accountId) => {
     setSendingForm(true);
     setApiError(void 0);
-    const stable_name = convertToStableName(accountData.name);
     const newAccountData = {
-      ...accountData,
-      stable_name,
-      pnl_category: "INCOME",
-      //this field will be deprecated soon, but is still required
-      always_show_in_pnl: false
-      //this field will be deprecated soon, but is still required
+      ...accountData
     };
     try {
       await Layer.updateAccount(apiUrl, auth?.access_token, {
@@ -6961,12 +7227,14 @@ var useChartOfAccounts = () => {
     }
     const data2 = {
       name: form.data.name ?? "",
-      normality: form.data.subType?.value,
+      stable_name: form.data.stable_name,
       parent_id: form.data.parent ? {
         type: "AccountId",
         id: form.data.parent.value
       } : void 0,
-      description: form.data.type?.value.toString() ?? ""
+      account_type: form.data.type.value.toString(),
+      account_subtype: form.data.subType?.value.toString(),
+      normality: form.data.normality?.value
     };
     if (form.action === "new") {
       create(data2);
@@ -6983,12 +7251,9 @@ var useChartOfAccounts = () => {
     data: {
       parent: void 0,
       name: void 0,
-      type: {
-        value: "assets",
-        label: "Assets"
-      },
-      subType: void 0,
-      category: void 0
+      type: void 0,
+      normality: void 0,
+      subType: void 0
     }
   });
   const editAccount = (id) => {
@@ -7008,13 +7273,19 @@ var useChartOfAccounts = () => {
           value: parent.id,
           label: parent.name
         } : void 0,
+        stable_name: found.stable_name,
         name: found.name,
         type: {
-          value: "assets",
-          label: "Assets"
+          value: found.account_type.value,
+          label: found.account_type.display_name
         },
-        subType: void 0,
-        category: void 0
+        subType: found.account_subtype ? {
+          value: found.account_subtype?.value,
+          label: found.account_subtype?.display_name
+        } : void 0,
+        normality: NORMALITY_OPTIONS.find(
+          (normalityOption) => normalityOption.value == found.normality
+        )
       }
     });
   };
@@ -7023,13 +7294,41 @@ var useChartOfAccounts = () => {
     if (!form) {
       return;
     }
-    const newFormData = {
+    let newFormData = {
       ...form,
       data: {
         ...form.data,
         [fieldName]: value
       }
     };
+    if (fieldName === "parent") {
+      const allAccounts = flattenAccounts(data?.data?.accounts || []);
+      const foundParent = allAccounts?.find(
+        (x) => x.id === value.value
+      );
+      if (foundParent) {
+        newFormData = {
+          ...newFormData,
+          data: {
+            ...newFormData.data,
+            /* Inherit the parent's type */
+            type: {
+              value: foundParent.account_type.value,
+              label: foundParent.account_type.display_name
+            },
+            /* If the parent has a subtype, inherit it */
+            subType: foundParent.account_subtype ? {
+              value: foundParent.account_subtype?.value,
+              label: foundParent.account_subtype?.display_name
+            } : void 0,
+            /* Inherit the parent's normality */
+            normality: NORMALITY_OPTIONS.find(
+              (normalityOption) => normalityOption.value == foundParent.normality
+            )
+          }
+        };
+      }
+    }
     const errors = revalidateField(fieldName, newFormData);
     setForm({
       ...newFormData,
@@ -7134,7 +7433,7 @@ var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React83.createElement(
 var Edit2_default = Edit2;
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-var import_classnames31 = __toESM(require("classnames"));
+var import_classnames32 = __toESM(require("classnames"));
 var INDENTATION = 24;
 var MOBILE_INDENTATION = 12;
 var EXPANDED_STYLE = {
@@ -7183,7 +7482,7 @@ var ChartOfAccountsRow = ({
     }, cumulativeIndex * 50);
     return () => clearTimeout(timeoutId);
   }, []);
-  const baseClass = (0, import_classnames31.default)(
+  const baseClass = (0, import_classnames32.default)(
     "Layer__table-row",
     isOpen ? "Layer__table-row--expanded" : "Layer__table-row--collapsed",
     !expanded && "Layer__table-row--hidden",
@@ -7191,11 +7490,11 @@ var ChartOfAccountsRow = ({
     form?.accountId === account.id && "Layer__table-row--active",
     !showComponent && "Layer__table-row--anim-starting-state"
   );
-  const desktopRowClass = (0, import_classnames31.default)(
+  const desktopRowClass = (0, import_classnames32.default)(
     baseClass,
     "Layer__chart-of-accounts__row---desktop"
   );
-  const mobileRowClass = (0, import_classnames31.default)(
+  const mobileRowClass = (0, import_classnames32.default)(
     baseClass,
     "Layer__chart-of-accounts__row---mobile"
   );
@@ -7236,7 +7535,7 @@ var ChartOfAccountsRow = ({
         className: "Layer__table-cell-content Layer__mobile--hidden",
         style
       },
-      account.normality
+      account.account_type?.display_name
     ), /* @__PURE__ */ import_react69.default.createElement(
       "span",
       {
@@ -7251,9 +7550,9 @@ var ChartOfAccountsRow = ({
         },
         account.normality
       ),
-      /* @__PURE__ */ import_react69.default.createElement(Text, { className: "Layer__coa__subtype--mobile" }, "Sub-Type")
+      /* @__PURE__ */ import_react69.default.createElement(Text, { className: "Layer__coa__subtype--mobile" }, account.account_subtype?.display_name)
     )),
-    /* @__PURE__ */ import_react69.default.createElement("td", { className: "Layer__table-cell Layer__coa__subtype Layer__mobile--hidden" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "Layer__table-cell-content", style }, "Sub-Type")),
+    /* @__PURE__ */ import_react69.default.createElement("td", { className: "Layer__table-cell Layer__coa__subtype Layer__mobile--hidden" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "Layer__table-cell-content", style }, account.account_subtype?.display_name)),
     /* @__PURE__ */ import_react69.default.createElement("td", { className: "Layer__table-cell Layer__coa__balance" }, /* @__PURE__ */ import_react69.default.createElement(
       "span",
       {
@@ -7355,18 +7654,6 @@ var import_react72 = __toESM(require("react"));
 // src/components/ChartOfAccountsForm/ChartOfAccountsForm.tsx
 var import_react71 = __toESM(require("react"));
 
-// src/components/ChartOfAccountsForm/constants.ts
-var SUB_TYPE_OPTIONS = [
-  {
-    value: "DEBIT" /* DEBIT */,
-    label: "Debit"
-  },
-  {
-    value: "CREDIT" /* CREDIT */,
-    label: "Credit"
-  }
-];
-
 // src/components/ChartOfAccountsForm/useParentOptions.ts
 var import_react70 = require("react");
 var useParentOptions = (data) => (0, import_react70.useMemo)(
@@ -7470,25 +7757,31 @@ var ChartOfAccountsForm = () => {
     )), /* @__PURE__ */ import_react71.default.createElement(InputGroup, { name: "type", label: "Type", inline: true }, /* @__PURE__ */ import_react71.default.createElement(
       Select2,
       {
-        options: [],
-        disabled: true,
+        options: LEDGER_ACCOUNT_TYPES,
         value: form?.data.type,
-        onChange: (sel) => changeFormData("type", sel)
+        onChange: (sel) => changeFormData("type", sel),
+        isInvalid: Boolean(form?.errors?.find((x) => x.field === "type")),
+        errorMessage: form?.errors?.find((x) => x.field === "type")?.message,
+        disabled: sendingForm || form.action === "edit" || form.data.parent !== void 0
       }
     )), /* @__PURE__ */ import_react71.default.createElement(InputGroup, { name: "subType", label: "Sub-Type", inline: true }, /* @__PURE__ */ import_react71.default.createElement(
       Select2,
       {
-        options: SUB_TYPE_OPTIONS,
+        options: form?.data.type?.value !== void 0 ? LEDGER_ACCOUNT_SUBTYPES_FOR_TYPE[form?.data.type?.value] : LEDGER_ACCOUNT_SUBTYPES,
         value: form?.data.subType,
         onChange: (sel) => changeFormData("subType", sel),
         disabled: sendingForm
       }
-    )), /* @__PURE__ */ import_react71.default.createElement(InputGroup, { name: "category", label: "Category", inline: true }, /* @__PURE__ */ import_react71.default.createElement(
+    )), /* @__PURE__ */ import_react71.default.createElement(InputGroup, { name: "normality", label: "Normality", inline: true }, /* @__PURE__ */ import_react71.default.createElement(
       Select2,
       {
-        options: [],
-        value: form?.data.category,
-        onChange: (sel) => changeFormData("category", sel),
+        options: NORMALITY_OPTIONS,
+        value: form?.data.normality,
+        isInvalid: Boolean(
+          form?.errors?.find((x) => x.field === "normality")
+        ),
+        errorMessage: form?.errors?.find((x) => x.field === "normality")?.message,
+        onChange: (sel) => changeFormData("normality", sel),
         disabled: sendingForm
       }
     )))
@@ -7577,9 +7870,9 @@ var import_react78 = __toESM(require("react"));
 
 // src/components/Card/Card.tsx
 var import_react74 = __toESM(require("react"));
-var import_classnames32 = __toESM(require("classnames"));
+var import_classnames33 = __toESM(require("classnames"));
 var Card = ({ children, className }) => {
-  return /* @__PURE__ */ import_react74.default.createElement("div", { className: (0, import_classnames32.default)("Layer__card", className) }, children);
+  return /* @__PURE__ */ import_react74.default.createElement("div", { className: (0, import_classnames33.default)("Layer__card", className) }, children);
 };
 
 // src/components/DateTime/DateTime.tsx
@@ -7621,14 +7914,14 @@ var DateTime = ({
 
 // src/components/DetailsList/DetailsList.tsx
 var import_react76 = __toESM(require("react"));
-var import_classnames33 = __toESM(require("classnames"));
+var import_classnames34 = __toESM(require("classnames"));
 var DetailsList = ({
   title,
   children,
   className,
   actions
 }) => {
-  return /* @__PURE__ */ import_react76.default.createElement("div", { className: (0, import_classnames33.default)("Layer__details-list", className) }, title && /* @__PURE__ */ import_react76.default.createElement(Header, null, /* @__PURE__ */ import_react76.default.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ import_react76.default.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ import_react76.default.createElement("ul", { className: "Layer__details-list__list" }, children));
+  return /* @__PURE__ */ import_react76.default.createElement("div", { className: (0, import_classnames34.default)("Layer__details-list", className) }, title && /* @__PURE__ */ import_react76.default.createElement(Header, null, /* @__PURE__ */ import_react76.default.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ import_react76.default.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ import_react76.default.createElement("ul", { className: "Layer__details-list__list" }, children));
 };
 
 // src/components/DetailsList/DetailsListItem.tsx
@@ -7648,6 +7941,40 @@ var DetailsListItem = ({
 };
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
+var SourceDetailView = ({ source }) => {
+  switch (source.type) {
+    case "Transaction_Ledger_Entry_Source": {
+      const transactionSource = source;
+      return /* @__PURE__ */ import_react78.default.createElement(import_react78.default.Fragment, null, /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Account name" }, transactionSource.account_name), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Date" }, /* @__PURE__ */ import_react78.default.createElement(DateTime, { value: transactionSource.date })), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Amount" }, `$${centsToDollars(transactionSource.amount)}`), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Direction" }, transactionSource.direction), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Counterparty" }, transactionSource.counterparty));
+    }
+    case "Invoice_Ledger_Entry_Source": {
+      const invoiceSource = source;
+      return /* @__PURE__ */ import_react78.default.createElement(import_react78.default.Fragment, null, /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Invoice number" }, invoiceSource.invoice_number), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Recipient name" }, invoiceSource.recipient_name), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Date" }, /* @__PURE__ */ import_react78.default.createElement(DateTime, { value: invoiceSource.date })), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Amount" }, `$${centsToDollars(invoiceSource.amount)}`));
+    }
+    case "Manual_Ledger_Entry_Source": {
+      const manualSource = source;
+      return /* @__PURE__ */ import_react78.default.createElement(import_react78.default.Fragment, null, /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Memo" }, manualSource.memo), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Created by" }, manualSource.created_by));
+    }
+    case "Invoice_Payment_Ledger_Entry_Source": {
+      const invoicePaymentSource = source;
+      return /* @__PURE__ */ import_react78.default.createElement(import_react78.default.Fragment, null, /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Invoice number" }, invoicePaymentSource.invoice_number), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Amount" }, `$${centsToDollars(invoicePaymentSource.amount)}`));
+    }
+    case "Refund_Ledger_Entry_Source": {
+      const refundSource = source;
+      return /* @__PURE__ */ import_react78.default.createElement(import_react78.default.Fragment, null, /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Amount" }, `$${centsToDollars(refundSource.refunded_to_customer_amount)}`), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Recipient name" }, refundSource.recipient_name));
+    }
+    case "Opening_Balance_Ledger_Entry_Source": {
+      const openingBalanceSource = source;
+      return /* @__PURE__ */ import_react78.default.createElement(import_react78.default.Fragment, null, /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Account name" }, openingBalanceSource.account_name));
+    }
+    case "Payout_Ledger_Entry_Source": {
+      const payoutSource = source;
+      return /* @__PURE__ */ import_react78.default.createElement(import_react78.default.Fragment, null, /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Amount" }, `$${centsToDollars(payoutSource.paid_out_amount)}`), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Processor" }, payoutSource.processor));
+    }
+    default:
+      return null;
+  }
+};
 var LedgerAccountEntryDetails = () => {
   const { entryData, isLoadingEntry, closeSelectedEntry, errorEntry } = (0, import_react78.useContext)(LedgerAccountsContext);
   const { totalDebit, totalCredit } = (0, import_react78.useMemo)(() => {
@@ -7675,16 +8002,24 @@ var LedgerAccountEntryDetails = () => {
         }
       )
     },
-    /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ import_react78.default.createElement(Badge, null, "Invoice")),
-    /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Number", isLoading: isLoadingEntry }, "1234"),
-    /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Date", isLoading: isLoadingEntry }, "May 5, 2023"),
-    /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Account", isLoading: isLoadingEntry }, "89 8888 7656 6666 0000 6765")
-  ), /* @__PURE__ */ import_react78.default.createElement(DetailsList, { title: "Journal Entry #123", className: "Layer__border-top" }, /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry }, humanizeEnum(entryData?.entry_type ?? "")), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Date", isLoading: isLoadingEntry }, entryData?.entry_at && /* @__PURE__ */ import_react78.default.createElement(DateTime, { value: entryData?.entry_at })), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Creation date", isLoading: isLoadingEntry }, entryData?.date && /* @__PURE__ */ import_react78.default.createElement(DateTime, { value: entryData?.date })), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Reversal", isLoading: isLoadingEntry }, "Journal Entry #79 TBD")), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ import_react78.default.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ import_react78.default.createElement(Card, null, /* @__PURE__ */ import_react78.default.createElement("table", { className: "Layer__table Layer__ledger-account__entry-details__table" }, /* @__PURE__ */ import_react78.default.createElement("thead", null, /* @__PURE__ */ import_react78.default.createElement("tr", null, /* @__PURE__ */ import_react78.default.createElement("th", { className: "Layer__table-header" }, "Line items"), /* @__PURE__ */ import_react78.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Debit"), /* @__PURE__ */ import_react78.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Credit"))), /* @__PURE__ */ import_react78.default.createElement("tbody", null, entryData?.line_items?.map((item) => /* @__PURE__ */ import_react78.default.createElement("tr", { key: `ledger-line-item-${item.id}` }, /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell" }, item.account?.name || ""), /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ import_react78.default.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))), /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ import_react78.default.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0))))), /* @__PURE__ */ import_react78.default.createElement("tr", { className: "Layer__table Layer__ledger-account__entry-details__table__total-row" }, /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell" }, "Total"), /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, "$", centsToDollars(totalDebit || 0)), /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, "$", centsToDollars(totalCredit || 0))))))) : null);
+    /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ import_react78.default.createElement(Badge, null, entryData?.source?.entity_name)),
+    entryData?.source?.display_description && /* @__PURE__ */ import_react78.default.createElement(SourceDetailView, { source: entryData?.source })
+  ), /* @__PURE__ */ import_react78.default.createElement(
+    DetailsList,
+    {
+      title: `Journal Entry ${entryData?.id.substring(0, 5)}`,
+      className: "Layer__border-top"
+    },
+    /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry }, humanizeEnum(entryData?.entry_type ?? "")),
+    /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Date", isLoading: isLoadingEntry }, entryData?.entry_at && /* @__PURE__ */ import_react78.default.createElement(DateTime, { value: entryData?.entry_at })),
+    /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Creation date", isLoading: isLoadingEntry }, entryData?.date && /* @__PURE__ */ import_react78.default.createElement(DateTime, { value: entryData?.date })),
+    entryData?.reversal_id && /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Reversal", isLoading: isLoadingEntry }, entryData?.reversal_id.substring(0, 5))
+  ), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ import_react78.default.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ import_react78.default.createElement(Card, null, /* @__PURE__ */ import_react78.default.createElement("table", { className: "Layer__table Layer__ledger-account__entry-details__table" }, /* @__PURE__ */ import_react78.default.createElement("thead", null, /* @__PURE__ */ import_react78.default.createElement("tr", null, /* @__PURE__ */ import_react78.default.createElement("th", { className: "Layer__table-header" }, "Line items"), /* @__PURE__ */ import_react78.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Debit"), /* @__PURE__ */ import_react78.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Credit"))), /* @__PURE__ */ import_react78.default.createElement("tbody", null, entryData?.line_items?.map((item) => /* @__PURE__ */ import_react78.default.createElement("tr", { key: `ledger-line-item-${item.id}` }, /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell" }, item.account?.name || ""), /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ import_react78.default.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))), /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ import_react78.default.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0))))), /* @__PURE__ */ import_react78.default.createElement("tr", { className: "Layer__table Layer__ledger-account__entry-details__table__total-row" }, /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell" }, "Total"), /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, "$", centsToDollars(totalDebit || 0)), /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, "$", centsToDollars(totalCredit || 0))))))) : null);
 };
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
 var import_react79 = __toESM(require("react"));
-var import_classnames34 = __toESM(require("classnames"));
+var import_classnames35 = __toESM(require("classnames"));
 var import_date_fns16 = require("date-fns");
 var LedgerAccountRow = ({
   row,
@@ -7708,7 +8043,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ import_react79.default.createElement(
       "tr",
       {
-        className: (0, import_classnames34.default)(
+        className: (0, import_classnames35.default)(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -7727,21 +8062,21 @@ var LedgerAccountRow = ({
       /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ import_react79.default.createElement(Text, null, row.date && (0, import_date_fns16.format)((0, import_date_fns16.parseISO)(row.date), DATE_FORMAT)), /* @__PURE__ */ import_react79.default.createElement(
         Text,
         {
-          weight: "bold" /* bold */,
+          weight: "normal" /* normal */,
           className: "Layer__ledger_account-table__journal-id"
         },
-        "#123"
-      )), /* @__PURE__ */ import_react79.default.createElement(Text, null, "Invoice (TBD null)"))),
+        row.entry_id.substring(0, 5)
+      )), /* @__PURE__ */ import_react79.default.createElement(Text, null, row.source?.display_description ?? ""))),
       /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)),
       /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)),
-      /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, "$X,XXX.XX"))
+      /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, `$${centsToDollars(row.running_balance)}`))
     );
   }
   if (view === "mobile") {
     return /* @__PURE__ */ import_react79.default.createElement(
       "tr",
       {
-        className: (0, import_classnames34.default)(
+        className: (0, import_classnames35.default)(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -7760,17 +8095,17 @@ var LedgerAccountRow = ({
       /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ import_react79.default.createElement(Text, null, row.date && (0, import_date_fns16.format)((0, import_date_fns16.parseISO)(row.date), DATE_FORMAT)), /* @__PURE__ */ import_react79.default.createElement(
         Text,
         {
-          weight: "bold" /* bold */,
+          weight: "normal" /* normal */,
           className: "Layer__ledger_account-table__journal-id"
         },
-        "#123"
-      )), /* @__PURE__ */ import_react79.default.createElement(Text, null, "Invoice (TBD null)"), /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger_account-table__balances-mobile" }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Debit"), /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, " ", row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)), /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Credit"), /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)), /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Running balance"), /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, "$X,XXX.XX")))))
+        row.entry_id.substring(0, 5)
+      )), /* @__PURE__ */ import_react79.default.createElement(Text, null, row.source?.display_description ?? ""), /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger_account-table__balances-mobile" }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Debit"), /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, " ", row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)), /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Credit"), /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)), /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Running balance"), /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, `$${centsToDollars(row.running_balance)}`)))))
     );
   }
   return /* @__PURE__ */ import_react79.default.createElement(
     "tr",
     {
-      className: (0, import_classnames34.default)(
+      className: (0, import_classnames35.default)(
         "Layer__table-row",
         row.entry_id === selectedEntryId && "Layer__table-row--active",
         initialLoad && "initial-load",
@@ -7787,16 +8122,16 @@ var LedgerAccountRow = ({
       }
     },
     /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content" }, row.date && (0, import_date_fns16.format)((0, import_date_fns16.parseISO)(row.date), DATE_FORMAT))),
-    /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content" }, "#123")),
-    /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content" }, "Invoice (TBD null)")),
+    /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content" }, row.entry_id.substring(0, 5))),
+    /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content" }, row.source?.display_description ?? "")),
     /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)),
     /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)),
-    /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, "$X,XXX.XX"))
+    /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, `$${centsToDollars(row.running_balance)}`))
   );
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-var import_classnames35 = __toESM(require("classnames"));
+var import_classnames36 = __toESM(require("classnames"));
 var LedgerAccount = ({
   containerRef,
   pageSize = 15,
@@ -7824,7 +8159,7 @@ var LedgerAccount = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [isLoading]);
-  const baseClassName = (0, import_classnames35.default)(
+  const baseClassName = (0, import_classnames36.default)(
     "Layer__ledger-account__index",
     accountId && "open"
   );