@layerfi/components 0.1.11 → 0.1.12

package/dist/index.d.ts

@@ -92,12 +92,19 @@ declare module '@layerfi/components/api/layer/categories' {
 
 }
 declare module '@layerfi/components/api/layer/chart_of_accounts' {
-  import { Account, ChartOfAccounts, NewAccount, EditAccount, LedgerAccounts, LedgerAccountsEntry } from '@layerfi/components/types';
+  import { Account, ChartOfAccounts, NewAccount, EditAccount, LedgerAccountsEntry } from '@layerfi/components/types';
+  import { ChartWithBalances } from '@layerfi/components/types/chart_of_accounts';
+  import { LedgerAccountLineItems } from '@layerfi/components/types/ledger_accounts';
   export const getChartOfAccounts: (baseUrl: string, accessToken: string | undefined, options?: {
       params?: Record<string, string | undefined> | undefined;
   } | undefined) => () => Promise<{
       data: ChartOfAccounts;
   }>;
+  export const getLedgerAccountBalances: (baseUrl: string, accessToken: string | undefined, options?: {
+      params?: Record<string, string | undefined> | undefined;
+  } | undefined) => () => Promise<{
+      data: ChartWithBalances;
+  }>;
   export const createAccount: (baseUrl: string, accessToken: string | undefined, options?: {
       params?: Record<string, string | undefined> | undefined;
       body?: NewAccount | undefined;
@@ -113,7 +120,7 @@ declare module '@layerfi/components/api/layer/chart_of_accounts' {
   export const getLedgerAccountsLines: (baseUrl: string, accessToken: string | undefined, options?: {
       params?: Record<string, string | undefined> | undefined;
   } | undefined) => () => Promise<{
-      data: LedgerAccounts;
+      data: LedgerAccountLineItems;
   }>;
   export const getLedgerAccountsEntry: (baseUrl: string, accessToken: string | undefined, options?: {
       params?: Record<string, string | undefined> | undefined;
@@ -227,6 +234,11 @@ declare module '@layerfi/components/api/layer' {
       } | undefined) => () => Promise<{
           data: import("@layerfi/components/types").ChartOfAccounts;
       }>;
+      getLedgerAccountBalances: (baseUrl: string, accessToken: string | undefined, options?: {
+          params?: Record<string, string | undefined> | undefined;
+      } | undefined) => () => Promise<{
+          data: import("@layerfi/components/types/chart_of_accounts").ChartWithBalances;
+      }>;
       getLedgerAccountsLines: (baseUrl: string, accessToken: string | undefined, options?: {
           params?: Record<string, string | undefined> | undefined;
       } | undefined) => () => Promise<{
@@ -584,7 +596,7 @@ declare module '@layerfi/components/components/ChartOfAccounts/ChartOfAccounts'
   }
   export type ChartOfAccountsContextType = ReturnType<typeof useChartOfAccounts>;
   export const ChartOfAccountsContext: React.Context<{
-      data: import("@layerfi/components/types").ChartOfAccounts | undefined;
+      data: import("@layerfi/components/types/chart_of_accounts").ChartWithBalances | undefined;
       isLoading?: boolean | undefined;
       isValidating?: boolean | undefined;
       error?: unknown;
@@ -638,17 +650,17 @@ declare module '@layerfi/components/components/ChartOfAccountsForm/index' {
 
 }
 declare module '@layerfi/components/components/ChartOfAccountsForm/useParentOptions' {
-  import { ChartOfAccounts } from '@layerfi/components/types';
+  import { ChartWithBalances } from '@layerfi/components/types/chart_of_accounts';
   import { BaseSelectOption } from '@layerfi/components/types/general';
-  export const useParentOptions: (data?: ChartOfAccounts) => BaseSelectOption[];
+  export const useParentOptions: (data?: ChartWithBalances) => BaseSelectOption[];
 
 }
 declare module '@layerfi/components/components/ChartOfAccountsRow/ChartOfAccountsRow' {
   import React from 'react';
-  import { Account } from '@layerfi/components/types';
+  import { LedgerAccountBalance } from '@layerfi/components/types/chart_of_accounts';
   import { View } from '@layerfi/components/components/ChartOfAccounts/ChartOfAccounts';
   type ChartOfAccountsRowProps = {
-      account: Account;
+      account: LedgerAccountBalance;
       depth?: number;
       index: number;
       cumulativeIndex?: number;
@@ -913,10 +925,10 @@ declare module '@layerfi/components/components/LedgerAccount/LedgerAccountIndex'
 }
 declare module '@layerfi/components/components/LedgerAccount/LedgerAccountRow' {
   import React from 'react';
-  import { LedgerAccountsLine } from '@layerfi/components/types';
+  import { LedgerAccountLineItem } from '@layerfi/components/types';
   import { View } from '@layerfi/components/components/ChartOfAccounts/ChartOfAccounts';
   export interface LedgerAccountRowProps {
-      row: LedgerAccountsLine;
+      row: LedgerAccountLineItem;
       index: number;
       initialLoad?: boolean;
       view: View;
@@ -1675,7 +1687,8 @@ declare module '@layerfi/components/hooks/useChartOfAccounts/index' {
 
 }
 declare module '@layerfi/components/hooks/useChartOfAccounts/useChartOfAccounts' {
-  import { Account, ChartOfAccounts, NewAccount } from '@layerfi/components/types';
+  import { NewAccount } from '@layerfi/components/types';
+  import { ChartWithBalances, LedgerAccountBalance } from '@layerfi/components/types/chart_of_accounts';
   import { BaseSelectOption } from '@layerfi/components/types/general';
   interface FormError {
       field: string;
@@ -1687,14 +1700,13 @@ declare module '@layerfi/components/hooks/useChartOfAccounts/useChartOfAccounts'
       data: {
           parent?: BaseSelectOption;
           name?: string;
-          type?: BaseSelectOption;
+          type: BaseSelectOption;
           subType?: BaseSelectOption;
-          category?: BaseSelectOption;
       };
       errors?: FormError[];
   }
   type UseChartOfAccounts = () => {
-      data: ChartOfAccounts | undefined;
+      data: ChartWithBalances | undefined;
       isLoading?: boolean;
       isValidating?: boolean;
       error?: unknown;
@@ -1709,7 +1721,7 @@ declare module '@layerfi/components/hooks/useChartOfAccounts/useChartOfAccounts'
       changeFormData: (name: string, value: string | BaseSelectOption | undefined) => void;
       submitForm: () => void;
   };
-  export const flattenAccounts: (accounts: Account[]) => Account[];
+  export const flattenAccounts: (accounts: LedgerAccountBalance[]) => LedgerAccountBalance[];
   export const useChartOfAccounts: UseChartOfAccounts;
   export {};
 
@@ -2292,6 +2304,23 @@ declare module '@layerfi/components/types/chart_of_accounts' {
       selfOnlyBalance: number;
       entries?: AccountEntry[];
   }
+  export type ChartWithBalances = {
+      accounts: LedgerAccountBalance[];
+  };
+  export type ApiAccountType = {
+      value: string;
+      display_name: string;
+  };
+  export type LedgerAccountBalance = {
+      id: string;
+      name: string;
+      stable_name: string;
+      account_type: ApiAccountType;
+      account_subtype?: ApiAccountType;
+      normality: Direction;
+      balance: number;
+      sub_accounts: LedgerAccountBalance[];
+  };
   export type NewAccount = {
       name: string;
       normality: Direction;
@@ -2299,17 +2328,20 @@ declare module '@layerfi/components/types/chart_of_accounts' {
           type: 'AccountId';
           id: string;
       };
-      description: string;
+      account_type: string;
+      account_subtype?: string;
   };
   export type EditAccount = {
-      name: string;
       stable_name: string;
+      name: string;
       normality: Direction;
       parent_id?: {
           type: 'AccountId';
           id: string;
       };
-      description: string;
+      account_type: string;
+      account_subtype?: string;
+      always_show_in_pnl: boolean;
   };
 
 }
@@ -2400,7 +2432,7 @@ declare module '@layerfi/components/types/layer_context' {
 }
 declare module '@layerfi/components/types/ledger_accounts' {
   import { BankTransaction, Direction } from '@layerfi/components/types/bank_transactions';
-  export type LedgerAccounts = LedgerAccountsLine[];
+  export type LedgerAccountLineItems = LedgerAccountLineItem[];
   export interface LedgerAccountsEntry {
       agent?: string;
       business_id: string;
@@ -2416,17 +2448,7 @@ declare module '@layerfi/components/types/ledger_accounts' {
       reversal_of_id?: string;
       type: string;
       transaction?: BankTransaction;
-  }
-  export interface LedgerAccountsLine {
-      type: string;
-      id: string;
-      entry_id: string;
-      account: LedgerAccountsAccount;
-      amount: number;
-      direction: Direction;
-      date: string;
-      transaction?: BankTransaction;
-      invoice: string | null;
+      source?: LedgerEntrySource;
   }
   export interface LedgerAccountsAccount {
       always_show_in_pnl?: boolean;
@@ -2437,13 +2459,62 @@ declare module '@layerfi/components/types/ledger_accounts' {
       stable_name: string;
   }
   export interface LedgerAccountLineItem {
-      account?: LedgerAccountsAccount;
+      id: string;
+      entry_id: string;
+      account: LedgerAccountsAccount;
       amount: number;
-      createdAt: string;
       direction: Direction;
-      entry_at: string;
-      entry_id: string;
-      id: string;
+      date: string;
+      source?: LedgerEntrySource;
+      running_balance: number;
+  }
+  export interface LedgerEntrySource {
+      display_description: string;
+      type: string;
+  }
+  export interface TransactionLedgerEntrySource extends LedgerEntrySource {
+      transaction_id: string;
+      external_id: string;
+      account_name: string;
+      date: string;
+      amount: number;
+      direction: Direction;
+      counterparty?: string;
+  }
+  export interface InvoiceLedgerEntrySource extends LedgerEntrySource {
+      invoice_id: string;
+      external_id: string;
+      invoice_number: string;
+      recipient_name: string;
+      date: string;
+      amount: number;
+  }
+  export interface ManualLedgerEntrySource extends LedgerEntrySource {
+      manual_entry_id: string;
+      memo: string;
+      created_by: string;
+  }
+  export interface InvoicePaymentLedgerEntrySource extends LedgerEntrySource {
+      external_id: string;
+      invoice_id: string;
+      invoice_number: string;
+      amount: number;
+  }
+  export interface RefundPaymentLedgerEntrySource extends LedgerEntrySource {
+      external_id: string;
+      refund_id: string;
+      refunded_to_customer_amount: number;
+      recipient_name: string;
+  }
+  export interface OpeningBalanceLedgerEntrySource extends LedgerEntrySource {
+      account_name: string;
+  }
+  export interface PayoutLedgerEntrySource extends LedgerEntrySource {
+      payout_id: string;
+      external_id: string;
+      paid_out_amount: number;
+      processor: string;
+      completed_at: string;
   }
 
 }
@@ -2488,6 +2559,8 @@ declare module '@layerfi/components/types/linked_accounts' {
           name: string;
           logo: string;
       };
+      mask?: string;
+      logo_base64?: string;
   }
   export type PublicToken = {
       public_token: string;
@@ -2525,7 +2598,7 @@ declare module '@layerfi/components/types' {
   export { Direction, BankTransaction } from '@layerfi/components/types/bank_transactions';
   export { CategorizationStatus, Category, CategorizationType, AutoCategorization, SuggestedCategorization, SingleCategoryUpdate, SplitCategoryUpdate, CategoryUpdate, } from '@layerfi/components/types/categories';
   export { ChartOfAccounts, Account, NewAccount, EditAccount, } from '@layerfi/components/types/chart_of_accounts';
-  export { LedgerAccounts, LedgerAccountsLine, LedgerAccountsAccount, LedgerAccountsEntry, } from '@layerfi/components/types/ledger_accounts';
+  export { LedgerAccountLineItems as LedgerAccounts, LedgerAccountLineItem, LedgerAccountsAccount, LedgerAccountsEntry, } from '@layerfi/components/types/ledger_accounts';
   export { SortDirection } from '@layerfi/components/types/general';
   export type DateRange<T = Date> = {
       startDate: T;

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,
@@ -3065,7 +3069,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 = ({
@@ -4845,7 +4857,7 @@ 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 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
@@ -4854,12 +4866,7 @@ var LinkedAccountThumb = ({
     "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 +4874,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,7 +4902,7 @@ 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))));
 };
 
@@ -6875,12 +6890,13 @@ var validate = (formData) => {
 };
 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);
+    }
     default:
       return formData?.errors;
   }
@@ -6902,7 +6918,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 }
     })
   );
@@ -6966,7 +6982,8 @@ var useChartOfAccounts = () => {
         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()
     };
     if (form.action === "new") {
       create(data2);
@@ -6984,11 +7001,10 @@ var useChartOfAccounts = () => {
       parent: void 0,
       name: void 0,
       type: {
-        value: "assets",
+        value: "ASSETS",
         label: "Assets"
       },
-      subType: void 0,
-      category: void 0
+      subType: void 0
     }
   });
   const editAccount = (id) => {
@@ -7010,11 +7026,10 @@ var useChartOfAccounts = () => {
         } : void 0,
         name: found.name,
         type: {
-          value: "assets",
+          value: "ASSETS",
           label: "Assets"
         },
-        subType: void 0,
-        category: void 0
+        subType: void 0
       }
     });
   };
@@ -7236,7 +7251,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 +7266,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",
       {
@@ -7483,14 +7498,6 @@ var ChartOfAccountsForm = () => {
         onChange: (sel) => changeFormData("subType", sel),
         disabled: sendingForm
       }
-    )), /* @__PURE__ */ import_react71.default.createElement(InputGroup, { name: "category", label: "Category", inline: true }, /* @__PURE__ */ import_react71.default.createElement(
-      Select2,
-      {
-        options: [],
-        value: form?.data.category,
-        onChange: (sel) => changeFormData("category", sel),
-        disabled: sendingForm
-      }
     )))
   );
 };
@@ -7648,6 +7655,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,11 +7716,19 @@ 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?.type)),
+    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
@@ -7727,14 +7776,14 @@ 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") {
@@ -7760,11 +7809,11 @@ 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(
@@ -7787,11 +7836,11 @@ 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)}`))
   );
 };