@layerfi/components 0.1.10 → 0.1.11

package/dist/esm/index.js

@@ -202,6 +202,7 @@ var request = (verb) => (url) => (baseUrl, accessToken, options) => fetch(`${bas
 }).then((res) => handleResponse(res)).catch((error) => handleException(error));
 var post = request("post");
 var put = request("put");
+var deleteRequest = request("delete");
 var handleResponse = async (res) => {
   if (!res.ok) {
     const errors = await tryToReadErrorsFromResponse(res);
@@ -261,13 +262,8 @@ var matchBankTransaction = put(
 // src/api/layer/categories.ts
 var getCategories = get(({ businessId }) => `/v1/businesses/${businessId}/categories`);
 
-// src/api/layer/linked_accounts.ts
-var getLinkedAccounts = get(
-  ({ businessId }) => `/v1/businesses/${businessId}/external-accounts`
-);
-
-// src/api/layer/ledger_accounts.ts
-var getLedgerAccounts = get(
+// src/api/layer/chart_of_accounts.ts
+var getChartOfAccounts = get(
   ({ businessId }) => `/v1/businesses/${businessId}/ledger/accounts`
 );
 var createAccount = post(
@@ -276,6 +272,25 @@ var createAccount = post(
 var updateAccount = put(
   ({ businessId, accountId }) => `/v1/businesses/${businessId}/ledger/accounts/${accountId}`
 );
+var getLedgerAccountsLines = get(
+  ({ businessId, accountId }) => `/v1/businesses/${businessId}/ledger/accounts/${accountId}/lines`
+);
+var getLedgerAccountsEntry = get(
+  ({ businessId, entryId }) => `/v1/businesses/${businessId}/ledger/entries/${entryId}`
+);
+
+// src/api/layer/linked_accounts.ts
+var getLinkedAccounts = get(
+  ({ businessId }) => `/v1/businesses/${businessId}/external-accounts`
+);
+var getPlaidLinkToken = post(({ businessId }) => `/v1/businesses/${businessId}/plaid/link`);
+var exchangePlaidPublicToken = post(({ businessId }) => `/v1/businesses/${businessId}/plaid/link/exchange`);
+var unlinkPlaidItem = deleteRequest(
+  ({ businessId, plaidItemId }) => `/v1/businesses/${businessId}/plaid/items/${plaidItemId}`
+);
+var unlinkPlaidAccount = post(
+  ({ businessId, accountId }) => `/v1/businesses/${businessId}/plaid/accounts/${accountId}/archive`
+);
 
 // src/api/layer/profit_and_loss.ts
 var getProfitAndLoss = get(
@@ -292,9 +307,15 @@ var Layer = {
   getBalanceSheet,
   getBankTransactions,
   getCategories,
-  getLedgerAccounts,
+  getChartOfAccounts,
+  getLedgerAccountsLines,
+  getLedgerAccountsEntry,
   getProfitAndLoss,
-  getLinkedAccounts
+  getLinkedAccounts,
+  getPlaidLinkToken,
+  exchangePlaidPublicToken,
+  unlinkPlaidAccount,
+  unlinkPlaidItem
 };
 
 // src/hooks/useLayerContext/useLayerContext.tsx
@@ -315,7 +336,10 @@ var LayerContext = createContext({
   theme: void 0,
   colors: {},
   setTheme: () => void 0,
-  getColor: (_shade) => void 0
+  getColor: (_shade) => void 0,
+  setLightColor: () => void 0,
+  setDarkColor: () => void 0,
+  setColors: () => void 0
 });
 
 // src/hooks/useLayerContext/useLayerContext.tsx
@@ -595,6 +619,11 @@ import React56, { useState as useState10, useMemo as useMemo2, useEffect as useE
 
 // src/config/general.ts
 var DATE_FORMAT = "LLL d, yyyy";
+var TIME_FORMAT = "p";
+var BREAKPOINTS = {
+  TABLET: 760,
+  MOBILE: 500
+};
 
 // src/hooks/useBankTransactions/useBankTransactions.tsx
 import useSWR2 from "swr";
@@ -715,7 +744,9 @@ var useElementSize = (callback) => {
     const observer = new ResizeObserver((entries) => {
       callback(element, entries[0], {
         width: element.offsetWidth,
-        height: element.offsetHeight
+        height: element.offsetHeight,
+        clientWidth: element.clientWidth,
+        clientHeight: element.clientHeight
       });
     });
     observer.observe(element);
@@ -1532,13 +1563,17 @@ var Badge = ({
   onClick,
   children,
   tooltip,
-  size = "medium" /* MEDIUM */
+  size = "medium" /* MEDIUM */,
+  variant = "default" /* DEFAULT */,
+  hoverable = false
 }) => {
   const baseProps = {
     className: classNames7(
       "Layer__badge",
+      hoverable && !tooltip ? "Layer__badge--with-hover" : "",
       onClick || tooltip ? "Layer__badge--clickable" : "",
-      `Layer__badge--${size}`
+      `Layer__badge--${size}`,
+      `Layer__badge--${variant}`
     ),
     onClick,
     children
@@ -2181,7 +2216,8 @@ var Select2 = ({
   classNamePrefix = "Layer__select",
   value,
   onChange,
-  disabled
+  disabled,
+  placeholder
 }) => {
   return /* @__PURE__ */ React37.createElement(
     ReactSelect,
@@ -2189,6 +2225,7 @@ var Select2 = ({
       name,
       className: `Layer__select ${className ?? ""}`,
       classNamePrefix,
+      placeholder: placeholder ?? "Select...",
       options,
       value,
       onChange: (newValue) => newValue && onChange(newValue),
@@ -2394,6 +2431,7 @@ var Toggle = ({
       checked: selectedValue === option.value,
       onChange: handleChange,
       disabled: option.disabled ?? false,
+      disabledMessage: option.disabledMessage,
       index
     }
   )), /* @__PURE__ */ React41.createElement("span", { className: "Layer__toggle__thumb", style: { ...thumbPos } }));
@@ -2407,6 +2445,7 @@ var ToggleOption = ({
   size,
   leftIcon,
   disabled,
+  disabledMessage = "Disabled",
   index
 }) => {
   if (disabled) {
@@ -2421,7 +2460,7 @@ var ToggleOption = ({
         disabled: disabled ?? false,
         "data-idx": index
       }
-    ), /* @__PURE__ */ React41.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ React41.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ React41.createElement("span", null, label)))), /* @__PURE__ */ React41.createElement(TooltipContent, { className: "Layer__tooltip" }, "We could not find matching transactions"));
+    ), /* @__PURE__ */ React41.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ React41.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ React41.createElement("span", null, label)))), /* @__PURE__ */ React41.createElement(TooltipContent, { className: "Layer__tooltip" }, disabledMessage));
   }
   return /* @__PURE__ */ React41.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ React41.createElement(
     "input",
@@ -2822,7 +2861,8 @@ var ExpandedBankTransactionRow = forwardRef2(
             {
               value: "match",
               label: "Match",
-              disabled: !hasMatch(bankTransaction)
+              disabled: !hasMatch(bankTransaction),
+              disabledMessage: "We could not find matching transactions"
             }
           ],
           selected: purpose,
@@ -3686,11 +3726,12 @@ var hslToHex = (hsl) => {
 // src/components/Container/Container.tsx
 import classNames20 from "classnames";
 var Container = forwardRef3(
-  ({ name, className, children, asWidget }, ref) => {
+  ({ name, className, children, asWidget, elevated = false }, ref) => {
     const baseClassName = classNames20(
       "Layer__component Layer__component-container",
       `Layer__${name}`,
-      asWidget ? "Layer__component--as-widget" : "",
+      elevated && "Layer__component--elevated",
+      asWidget && "Layer__component--as-widget",
       className
     );
     const { theme } = useLayerContext();
@@ -4022,7 +4063,14 @@ var BankTransactions = ({
         className: "Layer__bank-transactions__header",
         style: { top: shiftStickyHeader }
       },
-      /* @__PURE__ */ React56.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
+      /* @__PURE__ */ React56.createElement(
+        Heading,
+        {
+          className: "Layer__bank-transactions__title",
+          size: asWidget ? "secondary" /* secondary */ : "secondary" /* secondary */
+        },
+        "Transactions"
+      ),
       !categorizedOnly && /* @__PURE__ */ React56.createElement(
         Toggle,
         {
@@ -4123,12 +4171,17 @@ var Hello = ({ user }) => {
 import React64 from "react";
 
 // src/hooks/useLinkedAccounts/useLinkedAccounts.ts
-import useSWR4 from "swr";
-var MOCK_DATA = [
+import { useEffect as useEffect8, useState as useState11 } from "react";
+import { usePlaidLink } from "react-plaid-link";
+
+// src/hooks/useLinkedAccounts/mockData.ts
+var LINKED_ACCOUNTS_MOCK_DATA = [
   {
     id: "1",
+    external_account_external_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
+    external_account_source: "PLAID",
     external_account_name: "Citi Double Cash\xAE Card",
-    external_account_number: "1234",
+    //external_account_number: '1234',
     latest_balance_timestamp: {
       external_account_external_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
       external_account_source: "PLAID",
@@ -4137,13 +4190,19 @@ var MOCK_DATA = [
       created_at: "2024-04-06T16:44:35.715458Z"
     },
     current_ledger_balance: 373717,
-    institution: "Chase",
-    institutionLogo: ""
+    institution: {
+      name: "Chase",
+      logo: ""
+    }
+    //connection_id: '0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq',
+    //connection_status: 'OK',
   },
   {
     id: "2",
+    external_account_external_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
+    external_account_source: "PLAID",
     external_account_name: "Citi Double Cash\xAE Card",
-    external_account_number: "1234",
+    //external_account_number: '1234',
     latest_balance_timestamp: {
       external_account_external_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
       external_account_source: "PLAID",
@@ -4152,13 +4211,19 @@ var MOCK_DATA = [
       created_at: "2024-04-06T16:44:35.715458Z"
     },
     current_ledger_balance: 373717,
-    institution: "Chase",
-    institutionLogo: ""
+    institution: {
+      name: "Chase",
+      logo: ""
+    }
+    //connection_id: '0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq',
+    //connection_status: 'OK',
   },
   {
     id: "3",
+    external_account_external_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
+    external_account_source: "PLAID",
     external_account_name: "Citi Double Cash\xAE Card",
-    external_account_number: "1234",
+    //external_account_number: '1234',
     latest_balance_timestamp: {
       external_account_external_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
       external_account_source: "PLAID",
@@ -4167,13 +4232,19 @@ var MOCK_DATA = [
       created_at: "2024-04-06T16:44:35.715458Z"
     },
     current_ledger_balance: 373717,
-    institution: "Chase",
-    institutionLogo: ""
+    institution: {
+      name: "Chase",
+      logo: ""
+    }
+    //connection_id: '0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq',
+    //connection_status: 'OK',
   },
   {
     id: "4",
+    external_account_external_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
+    external_account_source: "PLAID",
     external_account_name: "Citi Double Cash\xAE Card",
-    external_account_number: "1234",
+    //external_account_number: '1234',
     latest_balance_timestamp: {
       external_account_external_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
       external_account_source: "PLAID",
@@ -4182,14 +4253,25 @@ var MOCK_DATA = [
       created_at: "2024-04-06T16:44:35.715458Z"
     },
     current_ledger_balance: 373717,
-    institution: "Chase",
-    institutionLogo: ""
+    institution: {
+      name: "Chase",
+      logo: ""
+    }
+    //connection_id: '0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq',
+    //connection_status: 'OK',
   }
 ];
+
+// src/hooks/useLinkedAccounts/useLinkedAccounts.ts
+import useSWR4 from "swr";
+var DEBUG = true;
+var USE_MOCK_RESPONSE_DATA = false;
+var USE_PLAID_SANDBOX = true;
 var useLinkedAccounts = () => {
   const { auth, businessId, apiUrl } = useLayerContext();
+  const [linkToken, setLinkToken] = useState11(null);
   const {
-    // data: responseData,
+    data: responseData,
     isLoading,
     isValidating,
     error: responseError,
@@ -4200,27 +4282,80 @@ var useLinkedAccounts = () => {
       params: { businessId }
     })
   );
-  const responseData = { data: MOCK_DATA, meta: {}, error: void 0 };
-  const addAccount = () => {
-    console.log("add account...");
+  useEffect8(() => {
+    const getLinkToken = async () => {
+      if (auth?.access_token) {
+        const linkToken2 = (await Layer.getPlaidLinkToken(apiUrl, auth.access_token, {
+          params: { businessId }
+        })).data.link_token;
+        setLinkToken(linkToken2);
+      }
+    };
+    getLinkToken();
+  }, [setLinkToken, auth?.access_token]);
+  const exchangePublicToken = async (publicToken, metadata) => {
+    await Layer.exchangePlaidPublicToken(apiUrl, auth?.access_token, {
+      params: { businessId },
+      body: { public_token: publicToken, institution_id: metadata.institution }
+    });
+    refetchAccounts();
+  };
+  const { open: plaidLinkStart, ready: plaidLinkReady } = usePlaidLink({
+    token: linkToken,
+    onSuccess: exchangePublicToken,
+    env: USE_PLAID_SANDBOX ? "sandbox" : void 0
+  });
+  const mockResponseData = {
+    data: LINKED_ACCOUNTS_MOCK_DATA,
+    meta: {},
+    error: void 0
+  };
+  const addConnection = (source) => {
+    if (source === "PLAID") {
+      linkPlaidItem();
+    } else {
+      console.error(`Connection with source ${source} not yet supported`);
+    }
+  };
+  const removeConnection = (source, connectionId) => {
+    if (source === "PLAID") {
+      unlinkPlaidItem2(connectionId);
+    } else {
+      console.error(`Connection with source ${source} not yet supported`);
+    }
+  };
+  const linkPlaidItem = async () => {
+    DEBUG && console.log("add account...");
+    console.log("plaidLinkReady", plaidLinkReady);
+    plaidLinkReady && plaidLinkStart();
+  };
+  const unlinkPlaidItem2 = (plaidItemId) => {
+    DEBUG && console.log("unlinking plaid item");
+    Layer.unlinkPlaidItem(apiUrl, auth?.access_token, {
+      params: { businessId, plaidItemId }
+    });
   };
-  const unlinkAccount = () => {
-    console.log("unlink account...");
+  const unlinkAccount = (plaidAccountId) => {
+    DEBUG && console.log("unlinking account");
+    Layer.unlinkPlaidAccount(apiUrl, auth?.access_token, {
+      params: { businessId, accountId: plaidAccountId }
+    });
   };
   const renewLinkAccount = () => {
-    console.log("relink account...");
+    DEBUG && console.log("relink account...");
   };
-  const refetch = () => {
-    console.log("refetch...");
+  const refetchAccounts = () => {
+    DEBUG && console.log("refetching plaid accounts...");
+    mutate();
   };
   return {
-    // data: responseData?.data.external_accounts,
-    data: responseData.data,
+    data: USE_MOCK_RESPONSE_DATA ? mockResponseData.data : responseData?.data.external_accounts,
     isLoading,
     isValidating,
     error: responseError,
-    refetch,
-    addAccount,
+    addConnection,
+    removeConnection,
+    refetchAccounts,
     unlinkAccount,
     renewLinkAccount
   };
@@ -4319,16 +4454,21 @@ var MoreVertical = ({ size = 18, ...props }) => {
 var MoreVertical_default = MoreVertical;
 
 // src/components/HoverMenu/HoverMenu.tsx
-import React60, { useEffect as useEffect8, useRef as useRef12, useState as useState11 } from "react";
+import React60, { useEffect as useEffect9, useRef as useRef12, useState as useState12 } from "react";
 import classNames22 from "classnames";
-var HoverMenu = ({ children, config }) => {
-  const [openMenu, setOpenMenu] = useState11(false);
+var HoverMenu = ({
+  children,
+  config,
+  plaidItemId,
+  accountId
+}) => {
+  const [openMenu, setOpenMenu] = useState12(false);
   const hoverMenuRef = useRef12(null);
   const hoverMenuClassName = classNames22(
     "Layer__hover-menu",
-    openMenu && "--open"
+    openMenu && "Layer__hover-menu--open"
   );
-  useEffect8(() => {
+  useEffect9(() => {
     function handleClickOutside(event) {
       if (hoverMenuRef.current && !hoverMenuRef.current.contains(event.target)) {
         setOpenMenu(false);
@@ -4366,7 +4506,7 @@ var HoverMenu = ({ children, config }) => {
         "button",
         {
           className: "Layer__hover-menu__list-item-button",
-          onClick: () => item.action()
+          onClick: () => item.action(plaidItemId, accountId)
         },
         item.name
       )
@@ -4377,9 +4517,19 @@ var HoverMenu = ({ children, config }) => {
 // src/components/LinkedAccountOptions/LinkedAccountOptions.tsx
 var LinkedAccountOptions = ({
   children,
-  config
+  config,
+  accountId,
+  plaidItemId
 }) => {
-  return /* @__PURE__ */ React61.createElement("div", { className: "Layer__linked-accounts__options" }, /* @__PURE__ */ React61.createElement("div", { className: "Layer__linked-accounts__options-overlay" }, /* @__PURE__ */ React61.createElement("div", { className: "Layer__linked-accounts__options-overlay-button" }, /* @__PURE__ */ React61.createElement(HoverMenu, { config }, /* @__PURE__ */ React61.createElement(MoreVertical_default, { size: 16 })))), children);
+  return /* @__PURE__ */ React61.createElement("div", { className: "Layer__linked-accounts__options" }, /* @__PURE__ */ React61.createElement("div", { className: "Layer__linked-accounts__options-overlay" }, /* @__PURE__ */ React61.createElement("div", { className: "Layer__linked-accounts__options-overlay-button" }, /* @__PURE__ */ React61.createElement(
+    HoverMenu,
+    {
+      config,
+      accountId,
+      plaidItemId
+    },
+    /* @__PURE__ */ React61.createElement(MoreVertical_default, { size: 16 })
+  ))), children);
 };
 
 // src/components/LinkedAccountThumb/LinkedAccountThumb.tsx
@@ -4687,15 +4837,20 @@ var LinkedAccountThumb = ({
     "Layer__linked-account-thumb",
     asWidget && "--as-widget"
   );
-  return /* @__PURE__ */ React63.createElement("div", { className: linkedAccountThumbClassName }, /* @__PURE__ */ React63.createElement("div", { className: "topbar" }, /* @__PURE__ */ React63.createElement("div", { className: "topbar-details" }, /* @__PURE__ */ React63.createElement(Text, { as: "span", className: "account-name" }, account.external_account_name), !asWidget && /* @__PURE__ */ React63.createElement(AccountNumber, { accountNumber: account.external_account_number }), /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React63.createElement("div", { className: linkedAccountThumbClassName }, /* @__PURE__ */ React63.createElement("div", { className: "topbar" }, /* @__PURE__ */ React63.createElement("div", { className: "topbar-details" }, /* @__PURE__ */ React63.createElement(Text, { as: "span", className: "account-name" }, account.external_account_name), !asWidget && /* @__PURE__ */ React63.createElement(
+    AccountNumber,
+    {
+      accountNumber: "TODO"
+    }
+  ), /* @__PURE__ */ React63.createElement(
     Text,
     {
       as: "span",
       className: "account-institution",
       size: "sm"
     },
-    account.institution
-  )), /* @__PURE__ */ React63.createElement("div", { className: "topbar-logo" }, !account.institutionLogo && /* @__PURE__ */ React63.createElement(InstitutionIcon_default, null))), !asWidget && /* @__PURE__ */ React63.createElement("div", { className: "middlebar" }, /* @__PURE__ */ React63.createElement(
+    account.institution?.name
+  )), /* @__PURE__ */ React63.createElement("div", { className: "topbar-logo" }, !account.institution?.logo && /* @__PURE__ */ React63.createElement(InstitutionIcon_default, null))), !asWidget && /* @__PURE__ */ React63.createElement("div", { className: "middlebar" }, /* @__PURE__ */ React63.createElement(
     Text,
     {
       as: "span",
@@ -4703,7 +4858,12 @@ var LinkedAccountThumb = ({
       size: "sm"
     },
     "Bank balance"
-  ), /* @__PURE__ */ React63.createElement(Text, { as: "span", className: "account-balance" }, "$", centsToDollars(account.latest_balance_timestamp.balance))), /* @__PURE__ */ React63.createElement("div", { className: "bottombar" }, asWidget ? /* @__PURE__ */ React63.createElement(AccountNumber, { accountNumber: account.external_account_number }) : /* @__PURE__ */ React63.createElement(
+  ), /* @__PURE__ */ React63.createElement(Text, { as: "span", className: "account-balance" }, "$", centsToDollars(account.latest_balance_timestamp.balance))), /* @__PURE__ */ React63.createElement("div", { className: "bottombar" }, asWidget ? /* @__PURE__ */ React63.createElement(
+    AccountNumber,
+    {
+      accountNumber: "TODO"
+    }
+  ) : /* @__PURE__ */ React63.createElement(
     Text,
     {
       as: "span",
@@ -4717,14 +4877,14 @@ var LinkedAccountThumb = ({
 // src/components/LinkedAccounts/LinkedAccounts.tsx
 import classNames24 from "classnames";
 var COMPONENT_NAME2 = "linked-accounts";
-var LinkedAccounts = ({ asWidget }) => {
+var LinkedAccounts = ({ asWidget, elevated }) => {
   const {
     data,
     isLoading,
     error,
     isValidating,
-    refetch,
-    addAccount,
+    refetchAccounts,
+    addConnection,
     unlinkAccount,
     renewLinkAccount
   } = useLinkedAccounts();
@@ -4736,7 +4896,7 @@ var LinkedAccounts = ({ asWidget }) => {
     "Layer__linked-accounts__new-account",
     asWidget && "--as-widget"
   );
-  return /* @__PURE__ */ React64.createElement(Container, { name: COMPONENT_NAME2 }, /* @__PURE__ */ React64.createElement(Header, { className: "Layer__linked-accounts__header" }, /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React64.createElement(Container, { name: COMPONENT_NAME2, elevated }, /* @__PURE__ */ React64.createElement(Header, { className: "Layer__linked-accounts__header" }, /* @__PURE__ */ React64.createElement(
     Heading,
     {
       className: "Layer__linked-accounts__title",
@@ -4749,14 +4909,16 @@ var LinkedAccounts = ({ asWidget }) => {
       status: "failed" /* failed */,
       title: "Something went wrong",
       description: "We couldn\u2019t load your data.",
-      onRefresh: () => refetch(),
+      onRefresh: () => refetchAccounts(),
       isLoading: isValidating
     }
   ) : null, !error && !isLoading ? /* @__PURE__ */ React64.createElement("div", { className: "Layer__linked-accounts__list" }, data?.map((account, index) => /* @__PURE__ */ React64.createElement(
     LinkedAccountOptions,
     {
       key: `linked-acc-${index}`,
-      config: linkedAccountOptionsConfig
+      config: linkedAccountOptionsConfig,
+      accountId: account.external_account_external_id,
+      plaidItemId: "TODO"
     },
     /* @__PURE__ */ React64.createElement(LinkedAccountThumb, { account, asWidget })
   )), /* @__PURE__ */ React64.createElement(
@@ -4765,18 +4927,18 @@ var LinkedAccounts = ({ asWidget }) => {
       role: "button",
       tabIndex: 0,
       "aria-label": "new-account",
-      onClick: () => addAccount(),
+      onClick: () => addConnection("PLAID"),
       className: linkedAccountsNewAccountClassName
     },
-    /* @__PURE__ */ React64.createElement("div", { className: "Layer__linked-accounts__new-account-label" }, /* @__PURE__ */ React64.createElement(PlusIcon_default, { size: 15 }), /* @__PURE__ */ React64.createElement(Text, { as: "span", size: "sm" }, "New account"))
+    /* @__PURE__ */ React64.createElement("div", { className: "Layer__linked-accounts__new-account-label" }, /* @__PURE__ */ React64.createElement(PlusIcon_default, { size: 15 }), /* @__PURE__ */ React64.createElement(Text, { as: "span", size: "sm" }, "Add Account"))
   )) : null);
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-import React74, { createContext as createContext2 } from "react";
+import React80, { createContext as createContext2 } from "react";
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { useMemo as useMemo3, useState as useState12 } from "react";
+import { useMemo as useMemo3, useState as useState13 } from "react";
 
 // src/utils/profitAndLossUtils.ts
 var doesLineItemQualifies = (item) => {
@@ -4844,17 +5006,17 @@ var useProfitAndLoss = ({
   endDate: endOfMonth(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [startDate, setStartDate] = useState12(
+  const [startDate, setStartDate] = useState13(
     initialStartDate || startOfMonth(Date.now())
   );
-  const [endDate, setEndDate] = useState12(
+  const [endDate, setEndDate] = useState13(
     initialEndDate || endOfMonth(Date.now())
   );
-  const [filters, setFilters] = useState12({
+  const [filters, setFilters] = useState13({
     expenses: void 0,
     revenue: void 0
   });
-  const [sidebarScope, setSidebarScope] = useState12(void 0);
+  const [sidebarScope, setSidebarScope] = useState13(void 0);
   const {
     data: rawData,
     isLoading,
@@ -4877,13 +5039,50 @@ var useProfitAndLoss = ({
     })
   );
   const { data, error } = rawData || {};
-  const { filteredData, filteredTotal } = useMemo3(() => {
+  const { filteredDataRevenue, filteredTotalRevenue } = useMemo3(() => {
+    if (!data) {
+      return { filteredDataRevenue: [], filteredTotalRevenue: void 0 };
+    }
+    const items = collectRevenueItems(data);
+    const filtered = items.map((x) => {
+      if (filters["revenue"]?.types && filters["revenue"].types.length > 0 && !filters["revenue"]?.types?.includes(x.type)) {
+        return {
+          ...x,
+          hidden: true
+        };
+      }
+      return x;
+    });
+    const sorted = filtered.sort((a, b) => {
+      switch (filters["revenue"]?.sortBy) {
+        case "category":
+          if (filters["revenue"]?.sortDirection === "asc") {
+            return a.display_name.localeCompare(b.display_name);
+          }
+          return b.display_name.localeCompare(a.display_name);
+        case "type":
+          if (filters["revenue"]?.sortDirection === "asc") {
+            return a.type.localeCompare(b.type);
+          }
+          return b.type.localeCompare(a.type);
+        default:
+          if (filters["revenue"]?.sortDirection === "asc") {
+            return a.value - b.value;
+          }
+          return b.value - a.value;
+      }
+    });
+    const total = sorted.filter((x) => !x.hidden).reduce((x, { value }) => x + value, 0);
+    const withShare = applyShare(sorted, total);
+    return { filteredDataRevenue: withShare, filteredTotalRevenue: total };
+  }, [data, startDate, filters, sidebarScope]);
+  const { filteredDataExpenses, filteredTotalExpenses } = useMemo3(() => {
     if (!data) {
-      return { filteredData: [], filteredTotal: void 0 };
+      return { filteredDataExpenses: [], filteredTotalExpenses: void 0 };
     }
-    const items = sidebarScope === "revenue" ? collectRevenueItems(data) : collectExpensesItems(data);
+    const items = collectExpensesItems(data);
     const filtered = items.map((x) => {
-      if (sidebarScope && filters[sidebarScope]?.types && filters[sidebarScope].types.length > 0 && !filters[sidebarScope]?.types?.includes(x.type)) {
+      if (filters["expenses"]?.types && filters["expenses"].types.length > 0 && !filters["expenses"]?.types?.includes(x.type)) {
         return {
           ...x,
           hidden: true
@@ -4892,19 +5091,19 @@ var useProfitAndLoss = ({
       return x;
     });
     const sorted = filtered.sort((a, b) => {
-      switch (filters[sidebarScope ?? "expenses"]?.sortBy) {
+      switch (filters["expenses"]?.sortBy) {
         case "category":
-          if (filters[sidebarScope ?? "expenses"]?.sortDirection === "asc") {
+          if (filters["expenses"]?.sortDirection === "asc") {
             return a.display_name.localeCompare(b.display_name);
           }
           return b.display_name.localeCompare(a.display_name);
         case "type":
-          if (filters[sidebarScope ?? "expenses"]?.sortDirection === "asc") {
+          if (filters["expenses"]?.sortDirection === "asc") {
             return a.type.localeCompare(b.type);
           }
           return b.type.localeCompare(a.type);
         default:
-          if (filters[sidebarScope ?? "expenses"]?.sortDirection === "asc") {
+          if (filters["expenses"]?.sortDirection === "asc") {
             return a.value - b.value;
           }
           return b.value - a.value;
@@ -4912,7 +5111,7 @@ var useProfitAndLoss = ({
     });
     const total = sorted.filter((x) => !x.hidden).reduce((x, { value }) => x + value, 0);
     const withShare = applyShare(sorted, total);
-    return { filteredData: withShare, filteredTotal: total };
+    return { filteredDataExpenses: withShare, filteredTotalExpenses: total };
   }, [data, startDate, filters, sidebarScope]);
   const changeDateRange = ({
     startDate: newStartDate,
@@ -4945,8 +5144,10 @@ var useProfitAndLoss = ({
   };
   return {
     data,
-    filteredData,
-    filteredTotal,
+    filteredDataRevenue,
+    filteredTotalRevenue,
+    filteredDataExpenses,
+    filteredTotalExpenses,
     isLoading,
     isValidating,
     error: error || rawError,
@@ -4962,7 +5163,7 @@ var useProfitAndLoss = ({
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-import React66, { useContext as useContext2, useMemo as useMemo4, useState as useState13 } from "react";
+import React66, { useContext as useContext2, useMemo as useMemo4, useState as useState14 } from "react";
 
 // src/utils/format.ts
 var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
@@ -4998,9 +5199,12 @@ var formatPercent = (value, options) => {
     ...options
   });
 };
+var humanizeEnum = (text) => {
+  return capitalizeFirstLetter(text.replace(/_/gi, " ").toLowerCase());
+};
 
 // src/components/ProfitAndLossChart/Indicator.tsx
-import React65, { useEffect as useEffect9 } from "react";
+import React65, { useEffect as useEffect10 } from "react";
 var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
 var Indicator = ({
   viewBox = {},
@@ -5017,7 +5221,7 @@ var Indicator = ({
   const multiplier = width > 12 ? 1.2 : 1;
   const xOffset = (boxWidth * multiplier - boxWidth) / 2;
   const borderRadius = width > 16 ? 8 : width / 2;
-  useEffect9(() => {
+  useEffect10(() => {
     setAnimateFrom(animateTo);
   }, [animateTo]);
   const actualX = animateFrom === -1 ? animateTo : animateFrom;
@@ -5187,7 +5391,7 @@ var ProfitAndLossChart = () => {
       ...monthData.map((m) => m?.net_profit)
     ]
   );
-  const [animateFrom, setAnimateFrom] = useState13(-1);
+  const [animateFrom, setAnimateFrom] = useState14(-1);
   return /* @__PURE__ */ React66.createElement(
     ResponsiveContainer,
     {
@@ -5295,19 +5499,19 @@ var ProfitAndLossChart = () => {
 };
 
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
-import React67, { useContext as useContext3, useState as useState14, useEffect as useEffect10 } from "react";
+import React67, { useContext as useContext3, useState as useState15, useEffect as useEffect11 } from "react";
 import { add, endOfMonth as endOfMonth3, format as format5, startOfMonth as startOfMonth3 } from "date-fns";
 var ProfitAndLossDatePicker = () => {
   const { changeDateRange, dateRange } = useContext3(ProfitAndLoss.Context);
-  const [isAnimating, setIsAnimating] = useState14(false);
-  const [localDate, setLocalDate] = useState14(dateRange.startDate);
-  const [nextOpacity, setNextOpacity] = useState14(0);
-  const [currentOpacity, setCurrentOpacity] = useState14(1);
-  const [transformStyle, setTransformStyle] = useState14({
+  const [isAnimating, setIsAnimating] = useState15(false);
+  const [localDate, setLocalDate] = useState15(dateRange.startDate);
+  const [nextOpacity, setNextOpacity] = useState15(0);
+  const [currentOpacity, setCurrentOpacity] = useState15(1);
+  const [transformStyle, setTransformStyle] = useState15({
     transform: "translateX(33%)",
     transition: "ease"
   });
-  useEffect10(() => {
+  useEffect11(() => {
     if (dateRange.startDate !== localDate && !isAnimating) {
       setLocalDate(dateRange.startDate);
       setTransformStyle({ transform: "translateX(33%)", transition: "none" });
@@ -5401,26 +5605,44 @@ var ProfitAndLossDatePicker = () => {
   );
 };
 
-// src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import React70, { useContext as useContext4, useMemo as useMemo5 } from "react";
+// src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
+import React73, { useContext as useContext4, useState as useState16 } from "react";
 
-// src/components/SkeletonLoader/SkeletonLoader.tsx
-import React68 from "react";
-import classNames25 from "classnames";
-var SkeletonLoader = ({
-  height,
-  width,
-  className
-}) => {
-  const baseClassName = classNames25(
-    "Layer__skeleton-loader Layer__anim--skeleton-loading",
-    className
-  );
-  return /* @__PURE__ */ React68.createElement("div", { className: baseClassName, style: { width, height } });
-};
+// src/icons/X.tsx
+import * as React68 from "react";
+var X = ({ size = 18, ...props }) => /* @__PURE__ */ React68.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React68.createElement(
+    "path",
+    {
+      d: "M13.5 4.5L4.5 13.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React68.createElement(
+    "path",
+    {
+      d: "M4.5 4.5L13.5 13.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var X_default = X;
 
-// src/components/ProfitAndLossSummaries/MiniChart.tsx
-import React69 from "react";
+// src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
+import React69, { useMemo as useMemo5 } from "react";
 
 // src/config/charts.ts
 var INACTIVE_OPACITY_LEVELS = [
@@ -5508,912 +5730,1100 @@ var DEFAULT_CHART_COLORS = [
   }
 ];
 
-// src/components/ProfitAndLossSummaries/MiniChart.tsx
-import { PieChart, Pie, Cell as Cell2 } from "recharts";
-var MiniChart = ({ data }) => {
-  return /* @__PURE__ */ React69.createElement(PieChart, { width: 48, height: 48, className: "mini-chart" }, /* @__PURE__ */ React69.createElement(
+// src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
+import {
+  PieChart,
+  Pie,
+  Cell as Cell2,
+  ResponsiveContainer as ResponsiveContainer2,
+  Label,
+  Text as ChartText
+} from "recharts";
+var DetailedChart = ({
+  filteredData,
+  filteredTotal,
+  hoveredItem,
+  setHoveredItem,
+  sidebarScope,
+  date,
+  isLoading
+}) => {
+  const chartData = useMemo5(() => {
+    if (!filteredData) {
+      return [];
+    }
+    return filteredData.map((x) => {
+      if (x.hidden) {
+        return {
+          name: x.display_name,
+          value: 0
+        };
+      }
+      return {
+        name: x.display_name,
+        value: x.value
+      };
+    });
+  }, [filteredData, isLoading]);
+  const noValue = chartData.length === 0 || !chartData.find((x) => x.value !== 0);
+  return /* @__PURE__ */ React69.createElement("div", { className: "chart-field" }, /* @__PURE__ */ React69.createElement("div", { className: "header--tablet" }, /* @__PURE__ */ React69.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ React69.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ React69.createElement("div", { className: "chart-container" }, /* @__PURE__ */ React69.createElement(ResponsiveContainer2, null, /* @__PURE__ */ React69.createElement(PieChart, null, !isLoading && !noValue ? /* @__PURE__ */ React69.createElement(
     Pie,
     {
-      data,
+      data: chartData,
       dataKey: "value",
       nameKey: "name",
       cx: "50%",
       cy: "50%",
-      innerRadius: 10,
-      outerRadius: 16,
-      paddingAngle: 0.2,
+      innerRadius: 105,
+      outerRadius: 120,
+      paddingAngle: 0.5,
       fill: "#8884d8",
-      width: 24,
-      height: 24,
-      animationDuration: 250,
+      animationDuration: 200,
       animationEasing: "ease-in-out"
     },
-    data.map((entry, index) => {
+    chartData.map((entry, index) => {
       const colorConfig = DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
+      let fill = colorConfig.color;
+      let opacity = colorConfig.opacity;
+      let active = true;
+      if (hoveredItem && entry.name !== hoveredItem) {
+        active = false;
+        fill = void 0;
+        opacity = INACTIVE_OPACITY_LEVELS[index % INACTIVE_OPACITY_LEVELS.length];
+      }
       return /* @__PURE__ */ React69.createElement(
         Cell2,
         {
           key: `cell-${index}`,
-          className: `Layer__profit-and-loss-detailed-charts__pie`,
-          fill: entry.name === "placeholder" ? "#e6e6e6" : colorConfig.color,
-          opacity: colorConfig.opacity
+          className: `Layer__profit-and-loss-detailed-charts__pie ${hoveredItem && active ? "active" : "inactive"}`,
+          style: { fill },
+          opacity,
+          onMouseEnter: () => setHoveredItem(entry.name),
+          onMouseLeave: () => setHoveredItem(void 0)
         }
       );
-    })
-  ));
-};
-
-// src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import classNames26 from "classnames";
-var CHART_PLACEHOLDER = [
-  {
-    name: "placeholder",
-    display_name: "placeholder",
-    value: 1,
-    type: "placeholder",
-    share: 1
-  }
-];
-var buildMiniChartData = (scope, data) => {
-  if (!data) {
-    return CHART_PLACEHOLDER;
-  }
-  let items = [];
-  switch (scope) {
-    case "revenue":
-      items = collectRevenueItems(data);
-      break;
-    default:
-      items = collectExpensesItems(data);
-  }
-  if (!items || items.length === 0 || !items.find((x) => Math.abs(x.value) !== 0)) {
-    return CHART_PLACEHOLDER;
-  }
-  return items.slice();
-};
-var ProfitAndLossSummaries = ({
-  vertical,
-  revenueLabel = "Revenue"
-}) => {
-  const {
-    data: storedData,
-    isLoading,
-    setSidebarScope,
-    sidebarScope
-  } = useContext4(ProfitAndLoss.Context);
-  const expensesChartData = useMemo5(() => {
-    return buildMiniChartData("expenses", storedData);
-  }, [storedData]);
-  const revenueChartData = useMemo5(() => {
-    return buildMiniChartData("revenue", storedData);
-  }, [storedData]);
-  const data = storedData ? storedData : { income: { value: NaN }, net_profit: NaN };
-  const incomeDirectionClass = (data.income.value ?? NaN) < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
-  const expensesDirectionClass = (data?.income?.value ?? NaN) - data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
-  const netProfitDirectionClass = data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
-  return /* @__PURE__ */ React70.createElement(
-    "div",
-    {
-      className: `Layer__profit-and-loss-summaries ${vertical ? "flex-col" : ""}`
-    },
-    /* @__PURE__ */ React70.createElement(
-      "div",
+    }),
+    /* @__PURE__ */ React69.createElement(
+      Label,
       {
-        className: classNames26(
-          "Layer__profit-and-loss-summaries__summary Layer__actionable",
-          "Layer__profit-and-loss-summaries__summary--income",
-          sidebarScope === "revenue" ? "active" : ""
-        ),
-        onClick: () => setSidebarScope("revenue")
-      },
-      /* @__PURE__ */ React70.createElement(MiniChart, { data: revenueChartData }),
-      /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React70.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel), isLoading || storedData === void 0 ? /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React70.createElement(SkeletonLoader, null)) : /* @__PURE__ */ React70.createElement(
-        "span",
-        {
-          className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
-        },
-        centsToDollars(Math.abs(data?.income?.value ?? NaN))
-      ))
+        position: "center",
+        value: "Total",
+        className: "pie-center-label-title",
+        content: (props) => {
+          const { cx, cy } = props.viewBox ?? {
+            cx: 0,
+            cy: 0
+          };
+          const positioningProps = {
+            x: cx,
+            y: (cy || 0) - 15,
+            textAnchor: "middle",
+            verticalAnchor: "middle"
+          };
+          let text = "Total";
+          if (hoveredItem) {
+            text = hoveredItem;
+          }
+          return /* @__PURE__ */ React69.createElement(
+            ChartText,
+            {
+              ...positioningProps,
+              className: "pie-center-label__title"
+            },
+            text
+          );
+        }
+      }
     ),
-    /* @__PURE__ */ React70.createElement(
-      "div",
+    /* @__PURE__ */ React69.createElement(
+      Label,
       {
-        className: classNames26(
-          "Layer__profit-and-loss-summaries__summary Layer__actionable",
-          "Layer__profit-and-loss-summaries__summary--expenses",
-          sidebarScope === "expenses" ? "active" : ""
-        ),
-        onClick: () => setSidebarScope("expenses")
-      },
-      /* @__PURE__ */ React70.createElement(MiniChart, { data: expensesChartData }),
-      /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React70.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), isLoading || storedData === void 0 ? /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React70.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React70.createElement(
-        "span",
-        {
-          className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
-        },
-        centsToDollars(
-          Math.abs((data.income.value ?? 0) - data.net_profit)
-        )
-      ))
+        position: "center",
+        value: "Total",
+        className: "pie-center-label-title",
+        content: (props) => {
+          const { cx, cy } = props.viewBox ?? {
+            cx: 0,
+            cy: 0
+          };
+          const positioningProps = {
+            x: cx,
+            y: (cy || 0) + 5,
+            textAnchor: "middle",
+            verticalAnchor: "middle"
+          };
+          let value = filteredTotal;
+          if (hoveredItem) {
+            value = filteredData.find(
+              (x) => x.display_name === hoveredItem
+            )?.value;
+          }
+          return /* @__PURE__ */ React69.createElement(
+            ChartText,
+            {
+              ...positioningProps,
+              className: "pie-center-label__value"
+            },
+            `$${centsToDollars(value)}`
+          );
+        }
+      }
     ),
-    /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React70.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React70.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React70.createElement(
-      "span",
+    /* @__PURE__ */ React69.createElement(
+      Label,
       {
-        className: `Layer__profit-and-loss-summaries__amount ${netProfitDirectionClass}`
-      },
-      centsToDollars(Math.abs(data.net_profit))
-    )))
-  );
+        position: "center",
+        value: "Total",
+        className: "pie-center-label-title",
+        content: (props) => {
+          const { cx, cy } = props.viewBox ?? {
+            cx: 0,
+            cy: 0
+          };
+          const positioningProps = {
+            x: cx,
+            y: (cy || 0) + 25,
+            height: 20,
+            textAnchor: "middle",
+            verticalAnchor: "middle"
+          };
+          if (hoveredItem) {
+            return /* @__PURE__ */ React69.createElement(
+              ChartText,
+              {
+                ...positioningProps,
+                className: "pie-center-label__share"
+              },
+              `${formatPercent(
+                filteredData.find(
+                  (x) => x.display_name === hoveredItem
+                )?.share
+              )}%`
+            );
+          }
+          return;
+        }
+      }
+    )
+  ) : null, !isLoading && noValue ? /* @__PURE__ */ React69.createElement(
+    Pie,
+    {
+      data: [{ name: "Total", value: 1 }],
+      dataKey: "value",
+      nameKey: "name",
+      cx: "50%",
+      cy: "50%",
+      innerRadius: 105,
+      outerRadius: 120,
+      paddingAngle: 0,
+      fill: "#F8F8FA",
+      animationDuration: 200,
+      animationEasing: "ease-in-out"
+    },
+    /* @__PURE__ */ React69.createElement(
+      Label,
+      {
+        position: "center",
+        value: "Total",
+        className: "pie-center-label-title",
+        content: (props) => {
+          const { cx, cy } = props.viewBox ?? {
+            cx: 0,
+            cy: 0
+          };
+          const positioningProps = {
+            x: cx,
+            y: (cy || 0) - 15,
+            textAnchor: "middle",
+            verticalAnchor: "middle"
+          };
+          let text = "Total";
+          if (hoveredItem) {
+            text = hoveredItem;
+          }
+          return /* @__PURE__ */ React69.createElement(
+            ChartText,
+            {
+              ...positioningProps,
+              className: "pie-center-label__title"
+            },
+            text
+          );
+        }
+      }
+    ),
+    /* @__PURE__ */ React69.createElement(
+      Label,
+      {
+        position: "center",
+        value: "Total",
+        className: "pie-center-label-title",
+        content: (props) => {
+          const { cx, cy } = props.viewBox ?? {
+            cx: 0,
+            cy: 0
+          };
+          const positioningProps = {
+            x: cx,
+            y: (cy || 0) + 5,
+            textAnchor: "middle",
+            verticalAnchor: "middle"
+          };
+          let value = filteredTotal;
+          if (hoveredItem) {
+            value = filteredData.find(
+              (x) => x.display_name === hoveredItem
+            )?.value;
+          }
+          return /* @__PURE__ */ React69.createElement(
+            ChartText,
+            {
+              ...positioningProps,
+              className: "pie-center-label__value"
+            },
+            `$${centsToDollars(value)}`
+          );
+        }
+      }
+    )
+  ) : null, isLoading ? /* @__PURE__ */ React69.createElement(
+    Pie,
+    {
+      data: [{ name: "loading...", value: 1 }],
+      dataKey: "value",
+      nameKey: "name",
+      cx: "50%",
+      cy: "50%",
+      innerRadius: 105,
+      outerRadius: 120,
+      paddingAngle: 0,
+      fill: "#F8F8FA",
+      animationDuration: 200,
+      animationEasing: "ease-in-out"
+    }
+  ) : null))));
 };
 
-// src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-import React73, { useContext as useContext5 } from "react";
-
-// src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-import React72, { useState as useState15 } from "react";
+// src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
+import React71 from "react";
 
-// src/icons/PieChart.tsx
-import * as React71 from "react";
-var PieChart2 = ({ size = 12, ...props }) => /* @__PURE__ */ React71.createElement(
+// src/icons/SortArrows.tsx
+import * as React70 from "react";
+var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React70.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 12 12",
+    viewBox: "0 0 12 13",
     fill: "none",
     ...props,
     width: size,
     height: size
   },
-  /* @__PURE__ */ React71.createElement("g", null, /* @__PURE__ */ React71.createElement(
+  /* @__PURE__ */ React70.createElement("g", { "clip-path": "url(#clip0_1758_75388)" }, /* @__PURE__ */ React70.createElement(
     "path",
     {
-      d: "M10.2213 7.78271C9.92969 8.47226 9.47363 9.07989 8.89297 9.55247C8.3123 10.0251 7.62471 10.3482 6.89031 10.4936C6.1559 10.6391 5.39705 10.6024 4.68009 10.3869C3.96313 10.1713 3.30989 9.78337 2.77749 9.25701C2.24509 8.73065 1.84973 8.08189 1.62598 7.36744C1.40223 6.65298 1.3569 5.8946 1.49396 5.15858C1.63102 4.42257 1.94629 3.73133 2.41221 3.14531C2.87813 2.55928 3.48051 2.09631 4.16669 1.79688",
+      d: "M1.33325 8.5L3.99992 11.1667L6.66659 8.5",
       stroke: "currentColor",
       strokeLinecap: "round",
-      strokeLinejoin: "round"
+      strokeLinejoin: "round",
+      className: "desc-arrow"
     }
-  ), /* @__PURE__ */ React71.createElement(
+  ), /* @__PURE__ */ React70.createElement(
     "path",
     {
-      d: "M10.5833 6.00033C10.5833 5.39843 10.4648 4.80244 10.2344 4.24636C10.0041 3.69028 9.66651 3.18502 9.24091 2.75942C8.8153 2.33382 8.31004 1.99621 7.75397 1.76588C7.19789 1.53554 6.60189 1.41699 6 1.41699V6.00033H10.5833Z",
+      d: "M4 2.5L4 11.1667",
       stroke: "currentColor",
       strokeLinecap: "round",
-      strokeLinejoin: "round"
+      strokeLinejoin: "round",
+      className: "desc-arrow"
     }
-  ))
+  ), /* @__PURE__ */ React70.createElement(
+    "path",
+    {
+      d: "M5.99988 5.16602L8.66654 2.49935L11.3332 5.16602",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "asc-arrow"
+    }
+  ), /* @__PURE__ */ React70.createElement(
+    "path",
+    {
+      d: "M8.66663 11.166L8.66663 2.49935",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "asc-arrow"
+    }
+  )),
+  /* @__PURE__ */ React70.createElement("defs", null, /* @__PURE__ */ React70.createElement("clipPath", { id: "clip0_1758_75388" }, /* @__PURE__ */ React70.createElement(
+    "rect",
+    {
+      width: "12",
+      height: "12",
+      fill: "white",
+      transform: "translate(0 0.5)"
+    }
+  )))
 );
-var PieChart_default = PieChart2;
+var SortArrows_default = SortArrows;
 
-// src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-var ProfitAndLossRow = ({
-  variant,
-  lineItem,
-  depth = 0,
-  maxDepth = 1,
-  direction = "DEBIT" /* DEBIT */,
-  lockExpanded = false,
-  scope,
-  setSidebarScope
-}) => {
-  if (!lineItem) {
-    return null;
-  }
-  const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = useState15(true);
-  const amount = value ?? 0;
-  const amountString = centsToDollars(Math.abs(amount));
-  const labelClasses = [
-    "Layer__profit-and-loss-row",
-    "Layer__profit-and-loss-row__label"
-  ];
-  const valueClasses = [
-    "Layer__profit-and-loss-row",
-    "Layer__profit-and-loss-row__value"
-  ];
-  const positive = amount === 0 || direction === "CREDIT" /* CREDIT */ && amount > 0 || direction === "DEBIT" /* DEBIT */ && amount < 0;
-  valueClasses.push(
-    positive ? "Layer__profit-and-loss-row__value--amount-positive" : "Layer__profit-and-loss-row__value--amount-negative"
-  );
-  labelClasses.push(`Layer__profit-and-loss-row__label--depth-${depth}`);
-  valueClasses.push(`Layer__profit-and-loss-row__value--depth-${depth}`);
-  variant && labelClasses.push(`Layer__profit-and-loss-row__label--variant-${variant}`);
-  variant && valueClasses.push(`Layer__profit-and-loss-row__value--variant-${variant}`);
-  const toggleExpanded = () => setExpanded(!expanded);
-  const canGoDeeper = depth < maxDepth;
-  const hasChildren = (line_items?.length ?? 0) > 0;
-  const displayChildren = hasChildren && canGoDeeper;
-  labelClasses.push(
-    `Layer__profit-and-loss-row__label--display-children-${displayChildren}`
-  );
-  valueClasses.push(
-    `Layer__profit-and-loss-row__value--display-children-${displayChildren}`
-  );
-  displayChildren && expanded && labelClasses.push("Layer__profit-and-loss-row__label--expanded");
-  displayChildren && expanded && valueClasses.push("Layer__profit-and-loss-row__value--expanded");
-  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
-    "div",
+// src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
+import classNames25 from "classnames";
+var DetailedTable = ({
+  filteredData,
+  sidebarScope,
+  filters,
+  sortBy,
+  hoveredItem,
+  setHoveredItem
+}) => {
+  const buildColClass = (column) => {
+    return classNames25(
+      "Layer__sortable-col",
+      sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
+    );
+  };
+  return /* @__PURE__ */ React71.createElement("div", { className: "details-container" }, /* @__PURE__ */ React71.createElement("div", { className: "table" }, /* @__PURE__ */ React71.createElement("table", null, /* @__PURE__ */ React71.createElement("thead", null, /* @__PURE__ */ React71.createElement("tr", null, /* @__PURE__ */ React71.createElement(
+    "th",
     {
-      className: labelClasses.join(" "),
-      onClick: () => !lockExpanded && toggleExpanded()
+      className: buildColClass("category"),
+      onClick: () => sortBy(sidebarScope ?? "expenses", "category")
     },
-    /* @__PURE__ */ React72.createElement("span", { className: "Layer__profit-and-loss-row__label__title" }, !lockExpanded && variant !== "summation" ? /* @__PURE__ */ React72.createElement(
-      ChevronDownFill_default,
-      {
-        size: 16,
-        className: "Layer__profit-and-loss-row__label__chevron"
-      }
-    ) : null, /* @__PURE__ */ React72.createElement(Text, null, display_name)),
-    setSidebarScope && /* @__PURE__ */ React72.createElement(
-      "span",
-      {
-        className: "Layer__profit-and-loss-row__detailed-chart-btn",
-        onClick: (e) => {
-          e.stopPropagation();
-          setSidebarScope && setSidebarScope(scope ?? "expenses");
-        }
-      },
-      /* @__PURE__ */ React72.createElement(PieChart_default, null)
-    )
-  ), /* @__PURE__ */ React72.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ React72.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ React72.createElement(
-    "div",
+    "Expense/Sale ",
+    /* @__PURE__ */ React71.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ), /* @__PURE__ */ React71.createElement(
+    "th",
     {
-      className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
+      className: buildColClass("type"),
+      onClick: () => sortBy(sidebarScope ?? "expenses", "type")
     },
-    /* @__PURE__ */ React72.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ React72.createElement(
-      ProfitAndLossRow,
+    "Type ",
+    /* @__PURE__ */ React71.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ), /* @__PURE__ */ React71.createElement("th", null), /* @__PURE__ */ React71.createElement(
+    "th",
+    {
+      className: buildColClass("value"),
+      onClick: () => sortBy(sidebarScope ?? "expenses", "value")
+    },
+    "Value ",
+    /* @__PURE__ */ React71.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ))), /* @__PURE__ */ React71.createElement("tbody", null, filteredData.filter((x) => !x.hidden).map((item, idx) => {
+    const colorConfig = DEFAULT_CHART_COLORS[idx % DEFAULT_CHART_COLORS.length];
+    return /* @__PURE__ */ React71.createElement(
+      "tr",
       {
-        key: line_item.display_name,
-        lineItem: line_item,
-        depth: depth + 1,
-        maxDepth,
-        direction
-      }
-    )))
-  ));
+        key: `pl-side-table-item-${idx}`,
+        className: classNames25(
+          "Layer__profit-and-loss-detailed-table__row",
+          hoveredItem && hoveredItem === item.display_name ? "active" : ""
+        ),
+        onMouseEnter: () => setHoveredItem(item.display_name),
+        onMouseLeave: () => setHoveredItem(void 0)
+      },
+      /* @__PURE__ */ React71.createElement("td", { className: "category-col" }, item.display_name),
+      /* @__PURE__ */ React71.createElement("td", { className: "type-col" }, item.type),
+      /* @__PURE__ */ React71.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
+      /* @__PURE__ */ React71.createElement("td", { className: "share-col" }, /* @__PURE__ */ React71.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ React71.createElement(
+        "div",
+        {
+          className: "share-icon",
+          style: {
+            background: colorConfig.color,
+            opacity: colorConfig.opacity
+          }
+        }
+      )))
+    );
+  })))));
 };
 
-// src/components/ProfitAndLossTable/empty_profit_and_loss_report.ts
-var empty_profit_and_loss_report_default = {
-  type: "Profit_And_Loss",
-  business_id: "",
-  start_date: "",
-  end_date: "",
-  income: {
-    name: "INCOME",
-    display_name: "Income",
-    value: NaN,
-    line_items: null
-  },
-  cost_of_goods_sold: {
-    display_name: "Cost of Goods Sold",
-    name: "COGS",
-    value: NaN,
-    line_items: null
-  },
-  gross_profit: NaN,
-  expenses: {
-    name: "EXPENSES",
-    display_name: "Expenses",
-    value: NaN,
-    line_items: null
-  },
-  profit_before_taxes: NaN,
-  taxes: {
-    name: "TAXES",
-    display_name: "Taxes",
-    value: NaN,
-    line_items: null
-  },
-  net_profit: NaN,
-  other_outflows: {
-    name: "OTHER_OUTFLOWS",
-    display_name: "Other outflows",
-    value: NaN,
-    line_items: null
-  },
-  personal_expenses: {
-    name: "PERSONAL",
-    display_name: "Personal expenses",
-    value: NaN,
-    line_items: null
-  },
-  fully_categorized: false
+// src/components/ProfitAndLossDetailedCharts/Filters.tsx
+import React72 from "react";
+import Select3, { components as components3 } from "react-select";
+var Filters = ({
+  filteredData,
+  sidebarScope,
+  filters,
+  setFilterTypes
+}) => {
+  return /* @__PURE__ */ React72.createElement("div", { className: "filters" }, /* @__PURE__ */ React72.createElement(Text, { size: "sm" /* sm */, className: "Layer__label" }, "Filters"), /* @__PURE__ */ React72.createElement(
+    Select3,
+    {
+      className: "Layer__select type-select",
+      classNamePrefix: "Layer__select",
+      value: sidebarScope && filters[sidebarScope]?.types ? sidebarScope && filters[sidebarScope]?.types?.map((x) => ({
+        value: x,
+        label: x
+      })) : [],
+      isMulti: true,
+      isClearable: false,
+      options: [...new Set(filteredData?.map((x) => x.type))].map((x) => ({
+        label: x,
+        value: x
+      })),
+      onChange: (selected) => {
+        setFilterTypes(
+          sidebarScope ?? "expenses",
+          selected.map((x) => x.value)
+        );
+      },
+      components: {
+        DropdownIndicator: (props) => /* @__PURE__ */ React72.createElement(components3.DropdownIndicator, { ...props }, /* @__PURE__ */ React72.createElement(ChevronDown_default, null)),
+        Placeholder: (props) => /* @__PURE__ */ React72.createElement(components3.Placeholder, { ...props }, /* @__PURE__ */ React72.createElement("div", { className: "Layer__select__multi-all-placeholder-badge" }, "All"))
+      }
+    }
+  ));
 };
 
-// src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-var ProfitAndLossTable = ({ lockExpanded }) => {
+// src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
+import { format as format6 } from "date-fns";
+var ProfitAndLossDetailedCharts = ({
+  scope,
+  hideClose = false,
+  showDatePicker = false
+}) => {
   const {
-    data: actualData,
+    filteredDataRevenue,
+    filteredTotalRevenue,
+    filteredDataExpenses,
+    filteredTotalExpenses,
+    sortBy,
     isLoading,
-    setSidebarScope
-  } = useContext5(ProfitAndLoss.Context);
-  const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
-  if (isLoading || actualData === void 0) {
-    return /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-table__loader-container" }, /* @__PURE__ */ React73.createElement(Loader2, null));
-  }
-  return /* @__PURE__ */ React73.createElement(React73.Fragment, null, /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table--main" }, /* @__PURE__ */ React73.createElement(
-    ProfitAndLossRow,
-    {
-      lineItem: data.income,
-      direction: "CREDIT" /* CREDIT */,
-      lockExpanded,
-      scope: "revenue",
-      setSidebarScope
-    }
-  ), /* @__PURE__ */ React73.createElement(
-    ProfitAndLossRow,
-    {
-      lineItem: data.cost_of_goods_sold,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded,
-      scope: "expenses",
-      setSidebarScope
-    }
-  ), /* @__PURE__ */ React73.createElement(
-    ProfitAndLossRow,
-    {
-      lineItem: {
-        value: data.gross_profit,
-        display_name: "Gross Profit"
-      },
-      variant: "summation",
-      direction: "CREDIT" /* CREDIT */,
-      lockExpanded,
-      scope: "revenue",
-      setSidebarScope
-    }
-  ), /* @__PURE__ */ React73.createElement(
-    ProfitAndLossRow,
-    {
-      lineItem: data.expenses,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded,
-      scope: "expenses",
-      setSidebarScope
-    }
-  ), /* @__PURE__ */ React73.createElement(
-    ProfitAndLossRow,
-    {
-      lineItem: {
-        value: data.profit_before_taxes,
-        display_name: "Profit Before Taxes"
-      },
-      variant: "summation",
-      direction: "CREDIT" /* CREDIT */,
-      lockExpanded,
-      scope: "revenue",
-      setSidebarScope
-    }
-  ), /* @__PURE__ */ React73.createElement(
-    ProfitAndLossRow,
+    filters,
+    dateRange,
+    sidebarScope,
+    setSidebarScope,
+    setFilterTypes
+  } = useContext4(ProfitAndLoss.Context);
+  const theScope = scope ? scope : sidebarScope;
+  const data = theScope === "revenue" ? filteredDataRevenue : filteredDataExpenses;
+  const total = theScope === "revenue" ? filteredTotalRevenue : filteredTotalExpenses;
+  const [hoveredItem, setHoveredItem] = useState16();
+  return /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ React73.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header" }, /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ React73.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(theScope)), /* @__PURE__ */ React73.createElement(Text, { size: "sm" /* sm */, className: "date" }, format6(dateRange.startDate, "LLLL, y")), showDatePicker && /* @__PURE__ */ React73.createElement(ProfitAndLossDatePicker, null)), !hideClose && /* @__PURE__ */ React73.createElement(
+    Button,
     {
-      lineItem: data.taxes,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded,
-      scope: "expenses",
-      setSidebarScope
+      rightIcon: /* @__PURE__ */ React73.createElement(X_default, null),
+      iconOnly: true,
+      onClick: () => setSidebarScope(void 0),
+      variant: "secondary" /* secondary */
     }
-  ), /* @__PURE__ */ React73.createElement(
-    ProfitAndLossRow,
+  )), /* @__PURE__ */ React73.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header--tablet" }, /* @__PURE__ */ React73.createElement(BackButton, { onClick: () => setSidebarScope(void 0) })), /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__content" }, /* @__PURE__ */ React73.createElement(
+    DetailedChart,
     {
-      lineItem: {
-        value: data.net_profit,
-        display_name: "Net Profit"
-      },
-      variant: "summation",
-      direction: "CREDIT" /* CREDIT */,
-      lockExpanded
+      filteredData: data,
+      filteredTotal: total,
+      hoveredItem,
+      setHoveredItem,
+      sidebarScope: theScope,
+      date: dateRange.startDate,
+      isLoading
     }
-  )), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ React73.createElement(
-    ProfitAndLossRow,
+  ), /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__table-wrapper" }, /* @__PURE__ */ React73.createElement(
+    Filters,
     {
-      lineItem: data.other_outflows,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded
+      filteredData: data,
+      sidebarScope: theScope,
+      filters,
+      setFilterTypes
     }
   ), /* @__PURE__ */ React73.createElement(
-    ProfitAndLossRow,
+    DetailedTable,
     {
-      lineItem: data.personal_expenses,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded
+      filteredData: data,
+      sidebarScope: theScope,
+      filters,
+      sortBy,
+      hoveredItem,
+      setHoveredItem
     }
-  )) : null);
+  ))));
 };
 
-// src/components/ProfitAndLoss/ProfitAndLoss.tsx
-import { endOfMonth as endOfMonth4, startOfMonth as startOfMonth4 } from "date-fns";
-var PNLContext = createContext2({
-  data: void 0,
-  filteredData: [],
-  filteredTotal: void 0,
-  isLoading: true,
-  isValidating: false,
-  error: void 0,
-  dateRange: {
-    startDate: startOfMonth4(/* @__PURE__ */ new Date()),
-    endDate: endOfMonth4(/* @__PURE__ */ new Date())
-  },
-  changeDateRange: () => {
-  },
-  refetch: () => {
-  },
-  sidebarScope: void 0,
-  setSidebarScope: () => {
-  },
-  sortBy: () => {
-  },
-  setFilterTypes: () => {
-  },
-  filters: {
-    expenses: void 0,
-    revenue: void 0
+// src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
+import React76, { useContext as useContext5, useMemo as useMemo6 } from "react";
+
+// src/components/SkeletonLoader/SkeletonLoader.tsx
+import React74 from "react";
+import classNames26 from "classnames";
+var SkeletonLoader = ({
+  height,
+  width,
+  className
+}) => {
+  const baseClassName = classNames26(
+    "Layer__skeleton-loader Layer__anim--skeleton-loading",
+    className
+  );
+  return /* @__PURE__ */ React74.createElement("div", { className: baseClassName, style: { width, height } });
+};
+
+// src/components/ProfitAndLossSummaries/MiniChart.tsx
+import React75 from "react";
+import { PieChart as PieChart2, Pie as Pie2, Cell as Cell3 } from "recharts";
+var MiniChart = ({ data }) => {
+  return /* @__PURE__ */ React75.createElement(PieChart2, { width: 48, height: 48, className: "mini-chart" }, /* @__PURE__ */ React75.createElement(
+    Pie2,
+    {
+      data,
+      dataKey: "value",
+      nameKey: "name",
+      cx: "50%",
+      cy: "50%",
+      innerRadius: 10,
+      outerRadius: 16,
+      paddingAngle: 0.2,
+      fill: "#8884d8",
+      width: 24,
+      height: 24,
+      animationDuration: 250,
+      animationEasing: "ease-in-out"
+    },
+    data.map((entry, index) => {
+      const colorConfig = DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
+      return /* @__PURE__ */ React75.createElement(
+        Cell3,
+        {
+          key: `cell-${index}`,
+          className: `Layer__profit-and-loss-detailed-charts__pie`,
+          fill: entry.name === "placeholder" ? "#e6e6e6" : colorConfig.color,
+          opacity: colorConfig.opacity
+        }
+      );
+    })
+  ));
+};
+
+// src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
+import classNames27 from "classnames";
+var CHART_PLACEHOLDER = [
+  {
+    name: "placeholder",
+    display_name: "placeholder",
+    value: 1,
+    type: "placeholder",
+    share: 1
   }
-});
-var ProfitAndLoss = ({ children, tagFilter, reportingBasis }) => {
-  const contextData = useProfitAndLoss({ tagFilter, reportingBasis });
-  return /* @__PURE__ */ React74.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ React74.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, children));
+];
+var buildMiniChartData = (scope, data) => {
+  if (!data) {
+    return CHART_PLACEHOLDER;
+  }
+  let items = [];
+  switch (scope) {
+    case "revenue":
+      items = collectRevenueItems(data);
+      break;
+    default:
+      items = collectExpensesItems(data);
+  }
+  if (!items || items.length === 0 || !items.find((x) => Math.abs(x.value) !== 0)) {
+    return CHART_PLACEHOLDER;
+  }
+  return items.slice();
+};
+var ProfitAndLossSummaries = ({
+  vertical,
+  revenueLabel = "Revenue",
+  actionable = true
+}) => {
+  const {
+    data: storedData,
+    isLoading,
+    setSidebarScope,
+    sidebarScope
+  } = useContext5(ProfitAndLoss.Context);
+  const expensesChartData = useMemo6(() => {
+    return buildMiniChartData("expenses", storedData);
+  }, [storedData]);
+  const revenueChartData = useMemo6(() => {
+    return buildMiniChartData("revenue", storedData);
+  }, [storedData]);
+  const data = storedData ? storedData : { income: { value: NaN }, net_profit: NaN };
+  const incomeDirectionClass = (data.income.value ?? NaN) < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
+  const expensesDirectionClass = (data?.income?.value ?? NaN) - data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
+  const netProfitDirectionClass = data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
+  return /* @__PURE__ */ React76.createElement(
+    "div",
+    {
+      className: `Layer__profit-and-loss-summaries ${vertical ? "flex-col" : ""}`
+    },
+    /* @__PURE__ */ React76.createElement(
+      "div",
+      {
+        className: classNames27(
+          "Layer__profit-and-loss-summaries__summary",
+          actionable && "Layer__actionable",
+          "Layer__profit-and-loss-summaries__summary--income",
+          sidebarScope === "revenue" ? "active" : ""
+        ),
+        onClick: () => {
+          actionable && setSidebarScope("revenue");
+        }
+      },
+      /* @__PURE__ */ React76.createElement(MiniChart, { data: revenueChartData }),
+      /* @__PURE__ */ React76.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React76.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel), isLoading || storedData === void 0 ? /* @__PURE__ */ React76.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React76.createElement(SkeletonLoader, null)) : /* @__PURE__ */ React76.createElement(
+        "span",
+        {
+          className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
+        },
+        centsToDollars(Math.abs(data?.income?.value ?? NaN))
+      ))
+    ),
+    /* @__PURE__ */ React76.createElement(
+      "div",
+      {
+        className: classNames27(
+          "Layer__profit-and-loss-summaries__summary",
+          actionable && "Layer__actionable",
+          "Layer__profit-and-loss-summaries__summary--expenses",
+          sidebarScope === "expenses" ? "active" : ""
+        ),
+        onClick: () => {
+          actionable && setSidebarScope("expenses");
+        }
+      },
+      /* @__PURE__ */ React76.createElement(MiniChart, { data: expensesChartData }),
+      /* @__PURE__ */ React76.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React76.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), isLoading || storedData === void 0 ? /* @__PURE__ */ React76.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React76.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React76.createElement(
+        "span",
+        {
+          className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
+        },
+        centsToDollars(
+          Math.abs((data.income.value ?? 0) - data.net_profit)
+        )
+      ))
+    ),
+    /* @__PURE__ */ React76.createElement(
+      "div",
+      {
+        className: classNames27(
+          "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit",
+          actionable && "Layer__actionable"
+        )
+      },
+      /* @__PURE__ */ React76.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React76.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ React76.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React76.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React76.createElement(
+        "span",
+        {
+          className: `Layer__profit-and-loss-summaries__amount ${netProfitDirectionClass}`
+        },
+        centsToDollars(Math.abs(data.net_profit))
+      ))
+    )
+  );
 };
-ProfitAndLoss.Chart = ProfitAndLossChart;
-ProfitAndLoss.Context = PNLContext;
-ProfitAndLoss.DatePicker = ProfitAndLossDatePicker;
-ProfitAndLoss.Summaries = ProfitAndLossSummaries;
-ProfitAndLoss.Table = ProfitAndLossTable;
 
-// src/components/ProfitAndLossView/ProfitAndLossView.tsx
-import React81, { useContext as useContext7 } from "react";
+// src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
+import React79, { useContext as useContext6 } from "react";
 
-// src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
-import React80, { useContext as useContext6, useState as useState16 } from "react";
+// src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
+import React78, { useState as useState17 } from "react";
 
-// src/icons/X.tsx
-import * as React75 from "react";
-var X = ({ size = 18, ...props }) => /* @__PURE__ */ React75.createElement(
+// src/icons/PieChart.tsx
+import * as React77 from "react";
+var PieChart3 = ({ size = 12, ...props }) => /* @__PURE__ */ React77.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 18 18",
+    viewBox: "0 0 12 12",
     fill: "none",
     ...props,
     width: size,
     height: size
   },
-  /* @__PURE__ */ React75.createElement(
+  /* @__PURE__ */ React77.createElement("g", null, /* @__PURE__ */ React77.createElement(
     "path",
     {
-      d: "M13.5 4.5L4.5 13.5",
+      d: "M10.2213 7.78271C9.92969 8.47226 9.47363 9.07989 8.89297 9.55247C8.3123 10.0251 7.62471 10.3482 6.89031 10.4936C6.1559 10.6391 5.39705 10.6024 4.68009 10.3869C3.96313 10.1713 3.30989 9.78337 2.77749 9.25701C2.24509 8.73065 1.84973 8.08189 1.62598 7.36744C1.40223 6.65298 1.3569 5.8946 1.49396 5.15858C1.63102 4.42257 1.94629 3.73133 2.41221 3.14531C2.87813 2.55928 3.48051 2.09631 4.16669 1.79688",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ),
-  /* @__PURE__ */ React75.createElement(
+  ), /* @__PURE__ */ React77.createElement(
     "path",
     {
-      d: "M4.5 4.5L13.5 13.5",
+      d: "M10.5833 6.00033C10.5833 5.39843 10.4648 4.80244 10.2344 4.24636C10.0041 3.69028 9.66651 3.18502 9.24091 2.75942C8.8153 2.33382 8.31004 1.99621 7.75397 1.76588C7.19789 1.53554 6.60189 1.41699 6 1.41699V6.00033H10.5833Z",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  )
+  ))
 );
-var X_default = X;
+var PieChart_default = PieChart3;
 
-// src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
-import React76, { useMemo as useMemo6 } from "react";
-import {
-  PieChart as PieChart3,
-  Pie as Pie2,
-  Cell as Cell3,
-  ResponsiveContainer as ResponsiveContainer2,
-  Label,
-  Text as ChartText
-} from "recharts";
-var DetailedChart = ({
-  filteredData,
-  filteredTotal,
-  hoveredItem,
-  setHoveredItem,
-  sidebarScope,
-  date
+// src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
+var ProfitAndLossRow = ({
+  variant,
+  lineItem,
+  depth = 0,
+  maxDepth = 1,
+  direction = "DEBIT" /* DEBIT */,
+  lockExpanded = false,
+  scope,
+  setSidebarScope
 }) => {
-  const chartData = useMemo6(() => {
-    if (!filteredData) {
-      return [];
-    }
-    return filteredData.map((x) => {
-      if (x.hidden) {
-        return {
-          name: x.display_name,
-          value: 0
-        };
-      }
-      return {
-        name: x.display_name,
-        value: x.value
-      };
-    });
-  }, [filteredData]);
-  return /* @__PURE__ */ React76.createElement("div", { className: "chart-field" }, /* @__PURE__ */ React76.createElement("div", { className: "header--tablet" }, /* @__PURE__ */ React76.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ React76.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ React76.createElement("div", { className: "chart-container" }, /* @__PURE__ */ React76.createElement(ResponsiveContainer2, null, /* @__PURE__ */ React76.createElement(PieChart3, null, /* @__PURE__ */ React76.createElement(
-    Pie2,
+  if (!lineItem) {
+    return null;
+  }
+  const { value, display_name, line_items } = lineItem;
+  const [expanded, setExpanded] = useState17(true);
+  const amount = value ?? 0;
+  const amountString = centsToDollars(Math.abs(amount));
+  const labelClasses = [
+    "Layer__profit-and-loss-row",
+    "Layer__profit-and-loss-row__label"
+  ];
+  const valueClasses = [
+    "Layer__profit-and-loss-row",
+    "Layer__profit-and-loss-row__value"
+  ];
+  const positive = amount === 0 || direction === "CREDIT" /* CREDIT */ && amount > 0 || direction === "DEBIT" /* DEBIT */ && amount < 0;
+  valueClasses.push(
+    positive ? "Layer__profit-and-loss-row__value--amount-positive" : "Layer__profit-and-loss-row__value--amount-negative"
+  );
+  labelClasses.push(`Layer__profit-and-loss-row__label--depth-${depth}`);
+  valueClasses.push(`Layer__profit-and-loss-row__value--depth-${depth}`);
+  variant && labelClasses.push(`Layer__profit-and-loss-row__label--variant-${variant}`);
+  variant && valueClasses.push(`Layer__profit-and-loss-row__value--variant-${variant}`);
+  const toggleExpanded = () => setExpanded(!expanded);
+  const canGoDeeper = depth < maxDepth;
+  const hasChildren = (line_items?.length ?? 0) > 0;
+  const displayChildren = hasChildren && canGoDeeper;
+  labelClasses.push(
+    `Layer__profit-and-loss-row__label--display-children-${displayChildren}`
+  );
+  valueClasses.push(
+    `Layer__profit-and-loss-row__value--display-children-${displayChildren}`
+  );
+  displayChildren && expanded && labelClasses.push("Layer__profit-and-loss-row__label--expanded");
+  displayChildren && expanded && valueClasses.push("Layer__profit-and-loss-row__value--expanded");
+  return /* @__PURE__ */ React78.createElement(React78.Fragment, null, /* @__PURE__ */ React78.createElement(
+    "div",
     {
-      data: chartData,
-      dataKey: "value",
-      nameKey: "name",
-      cx: "50%",
-      cy: "50%",
-      innerRadius: 105,
-      outerRadius: 120,
-      paddingAngle: 0.5,
-      fill: "#8884d8",
-      animationDuration: 200,
-      animationEasing: "ease-in-out"
+      className: labelClasses.join(" "),
+      onClick: () => !lockExpanded && toggleExpanded()
     },
-    chartData.map((entry, index) => {
-      const colorConfig = DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
-      let fill = colorConfig.color;
-      let opacity = colorConfig.opacity;
-      let active = true;
-      if (hoveredItem && entry.name !== hoveredItem) {
-        active = false;
-        fill = void 0;
-        opacity = INACTIVE_OPACITY_LEVELS[index % INACTIVE_OPACITY_LEVELS.length];
-      }
-      return /* @__PURE__ */ React76.createElement(
-        Cell3,
-        {
-          key: `cell-${index}`,
-          className: `Layer__profit-and-loss-detailed-charts__pie ${hoveredItem && active ? "active" : "inactive"}`,
-          style: { fill },
-          opacity,
-          onMouseEnter: () => setHoveredItem(entry.name),
-          onMouseLeave: () => setHoveredItem(void 0)
-        }
-      );
-    }),
-    /* @__PURE__ */ React76.createElement(
-      Label,
+    /* @__PURE__ */ React78.createElement("span", { className: "Layer__profit-and-loss-row__label__title" }, !lockExpanded && variant !== "summation" ? /* @__PURE__ */ React78.createElement(
+      ChevronDownFill_default,
       {
-        position: "center",
-        value: "Total",
-        className: "pie-center-label-title",
-        content: (props) => {
-          const { cx, cy } = props.viewBox ?? {
-            cx: 0,
-            cy: 0
-          };
-          const positioningProps = {
-            x: cx,
-            y: (cy || 0) - 15,
-            textAnchor: "middle",
-            verticalAnchor: "middle"
-          };
-          let text = "Total";
-          if (hoveredItem) {
-            text = hoveredItem;
-          }
-          return /* @__PURE__ */ React76.createElement(
-            ChartText,
-            {
-              ...positioningProps,
-              className: "pie-center-label__title"
-            },
-            text
-          );
-        }
+        size: 16,
+        className: "Layer__profit-and-loss-row__label__chevron"
       }
-    ),
-    /* @__PURE__ */ React76.createElement(
-      Label,
+    ) : null, /* @__PURE__ */ React78.createElement(Text, null, display_name)),
+    setSidebarScope && /* @__PURE__ */ React78.createElement(
+      "span",
       {
-        position: "center",
-        value: "Total",
-        className: "pie-center-label-title",
-        content: (props) => {
-          const { cx, cy } = props.viewBox ?? {
-            cx: 0,
-            cy: 0
-          };
-          const positioningProps = {
-            x: cx,
-            y: (cy || 0) + 5,
-            textAnchor: "middle",
-            verticalAnchor: "middle"
-          };
-          let value = filteredTotal;
-          if (hoveredItem) {
-            value = filteredData.find(
-              (x) => x.display_name === hoveredItem
-            )?.value;
-          }
-          return /* @__PURE__ */ React76.createElement(
-            ChartText,
-            {
-              ...positioningProps,
-              className: "pie-center-label__value"
-            },
-            `$${centsToDollars(value)}`
-          );
+        className: "Layer__profit-and-loss-row__detailed-chart-btn",
+        onClick: (e) => {
+          e.stopPropagation();
+          setSidebarScope && setSidebarScope(scope ?? "expenses");
         }
-      }
-    ),
-    /* @__PURE__ */ React76.createElement(
-      Label,
+      },
+      /* @__PURE__ */ React78.createElement(PieChart_default, null)
+    )
+  ), /* @__PURE__ */ React78.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ React78.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ React78.createElement(
+    "div",
+    {
+      className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
+    },
+    /* @__PURE__ */ React78.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ React78.createElement(
+      ProfitAndLossRow,
       {
-        position: "center",
-        value: "Total",
-        className: "pie-center-label-title",
-        content: (props) => {
-          const { cx, cy } = props.viewBox ?? {
-            cx: 0,
-            cy: 0
-          };
-          const positioningProps = {
-            x: cx,
-            y: (cy || 0) + 25,
-            height: 20,
-            textAnchor: "middle",
-            verticalAnchor: "middle"
-          };
-          if (hoveredItem) {
-            return /* @__PURE__ */ React76.createElement(
-              ChartText,
-              {
-                ...positioningProps,
-                className: "pie-center-label__share"
-              },
-              `${formatPercent(
-                filteredData.find((x) => x.display_name === hoveredItem)?.share
-              )}%`
-            );
-          }
-          return;
-        }
+        key: line_item.display_name,
+        lineItem: line_item,
+        depth: depth + 1,
+        maxDepth,
+        direction
       }
-    )
-  )))));
+    )))
+  ));
 };
 
-// src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
-import React78 from "react";
-
-// src/icons/SortArrows.tsx
-import * as React77 from "react";
-var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React77.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 12 13",
-    fill: "none",
-    ...props,
-    width: size,
-    height: size
+// src/components/ProfitAndLossTable/empty_profit_and_loss_report.ts
+var empty_profit_and_loss_report_default = {
+  type: "Profit_And_Loss",
+  business_id: "",
+  start_date: "",
+  end_date: "",
+  income: {
+    name: "INCOME",
+    display_name: "Income",
+    value: NaN,
+    line_items: null
   },
-  /* @__PURE__ */ React77.createElement("g", { "clip-path": "url(#clip0_1758_75388)" }, /* @__PURE__ */ React77.createElement(
-    "path",
-    {
-      d: "M1.33325 8.5L3.99992 11.1667L6.66659 8.5",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className: "desc-arrow"
-    }
-  ), /* @__PURE__ */ React77.createElement(
-    "path",
-    {
-      d: "M4 2.5L4 11.1667",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className: "desc-arrow"
-    }
-  ), /* @__PURE__ */ React77.createElement(
-    "path",
-    {
-      d: "M5.99988 5.16602L8.66654 2.49935L11.3332 5.16602",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className: "asc-arrow"
-    }
-  ), /* @__PURE__ */ React77.createElement(
-    "path",
-    {
-      d: "M8.66663 11.166L8.66663 2.49935",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className: "asc-arrow"
-    }
-  )),
-  /* @__PURE__ */ React77.createElement("defs", null, /* @__PURE__ */ React77.createElement("clipPath", { id: "clip0_1758_75388" }, /* @__PURE__ */ React77.createElement(
-    "rect",
-    {
-      width: "12",
-      height: "12",
-      fill: "white",
-      transform: "translate(0 0.5)"
-    }
-  )))
-);
-var SortArrows_default = SortArrows;
+  cost_of_goods_sold: {
+    display_name: "Cost of Goods Sold",
+    name: "COGS",
+    value: NaN,
+    line_items: null
+  },
+  gross_profit: NaN,
+  expenses: {
+    name: "EXPENSES",
+    display_name: "Expenses",
+    value: NaN,
+    line_items: null
+  },
+  profit_before_taxes: NaN,
+  taxes: {
+    name: "TAXES",
+    display_name: "Taxes",
+    value: NaN,
+    line_items: null
+  },
+  net_profit: NaN,
+  other_outflows: {
+    name: "OTHER_OUTFLOWS",
+    display_name: "Other outflows",
+    value: NaN,
+    line_items: null
+  },
+  personal_expenses: {
+    name: "PERSONAL",
+    display_name: "Personal expenses",
+    value: NaN,
+    line_items: null
+  },
+  fully_categorized: false
+};
 
-// src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
-import classNames27 from "classnames";
-var DetailedTable = ({
-  filteredData,
-  sidebarScope,
-  filters,
-  sortBy,
-  hoveredItem,
-  setHoveredItem
-}) => {
-  const buildColClass = (column) => {
-    return classNames27(
-      "Layer__sortable-col",
-      sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
-    );
-  };
-  return /* @__PURE__ */ React78.createElement("div", { className: "details-container" }, /* @__PURE__ */ React78.createElement("div", { className: "table" }, /* @__PURE__ */ React78.createElement("table", null, /* @__PURE__ */ React78.createElement("thead", null, /* @__PURE__ */ React78.createElement("tr", null, /* @__PURE__ */ React78.createElement(
-    "th",
-    {
-      className: buildColClass("category"),
-      onClick: () => sortBy(sidebarScope ?? "expenses", "category")
-    },
-    "Expense/Sale ",
-    /* @__PURE__ */ React78.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-  ), /* @__PURE__ */ React78.createElement(
-    "th",
-    {
-      className: buildColClass("type"),
-      onClick: () => sortBy(sidebarScope ?? "expenses", "type")
-    },
-    "Type ",
-    /* @__PURE__ */ React78.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-  ), /* @__PURE__ */ React78.createElement("th", null), /* @__PURE__ */ React78.createElement(
-    "th",
-    {
-      className: buildColClass("value"),
-      onClick: () => sortBy(sidebarScope ?? "expenses", "value")
-    },
-    "Value ",
-    /* @__PURE__ */ React78.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-  ))), /* @__PURE__ */ React78.createElement("tbody", null, filteredData.filter((x) => !x.hidden).map((item, idx) => {
-    const colorConfig = DEFAULT_CHART_COLORS[idx % DEFAULT_CHART_COLORS.length];
-    return /* @__PURE__ */ React78.createElement(
-      "tr",
+// src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
+import classNames28 from "classnames";
+var ProfitAndLossTable = ({ lockExpanded, asContainer }) => {
+  const {
+    data: actualData,
+    isLoading,
+    setSidebarScope
+  } = useContext6(ProfitAndLoss.Context);
+  const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
+  if (isLoading || actualData === void 0) {
+    return /* @__PURE__ */ React79.createElement(
+      "div",
       {
-        key: `pl-side-table-item-${idx}`,
-        className: classNames27(
-          "Layer__profit-and-loss-detailed-table__row",
-          hoveredItem && hoveredItem === item.display_name ? "active" : ""
-        ),
-        onMouseEnter: () => setHoveredItem(item.display_name),
-        onMouseLeave: () => setHoveredItem(void 0)
+        className: classNames28(
+          "Layer__profit-and-loss-table__loader-container",
+          asContainer && "Layer__component-container"
+        )
       },
-      /* @__PURE__ */ React78.createElement("td", { className: "category-col" }, item.display_name),
-      /* @__PURE__ */ React78.createElement("td", { className: "type-col" }, item.type),
-      /* @__PURE__ */ React78.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
-      /* @__PURE__ */ React78.createElement("td", { className: "share-col" }, /* @__PURE__ */ React78.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ React78.createElement(
-        "div",
-        {
-          className: "share-icon",
-          style: {
-            background: colorConfig.color,
-            opacity: colorConfig.opacity
-          }
-        }
-      )))
+      /* @__PURE__ */ React79.createElement(Loader2, null)
     );
-  })))));
-};
-
-// src/components/ProfitAndLossDetailedCharts/Filters.tsx
-import React79 from "react";
-import Select3, { components as components3 } from "react-select";
-var Filters = ({
-  filteredData,
-  sidebarScope,
-  filters,
-  setFilterTypes
-}) => {
-  return /* @__PURE__ */ React79.createElement("div", { className: "filters" }, /* @__PURE__ */ React79.createElement(Text, { size: "sm" /* sm */, className: "Layer__label" }, "Filters"), /* @__PURE__ */ React79.createElement(
-    Select3,
+  }
+  return /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement(
+    "div",
     {
-      className: "Layer__select type-select",
-      classNamePrefix: "Layer__select",
-      value: sidebarScope && filters[sidebarScope]?.types ? sidebarScope && filters[sidebarScope]?.types?.map((x) => ({
-        value: x,
-        label: x
-      })) : [],
-      isMulti: true,
-      isClearable: false,
-      options: [...new Set(filteredData?.map((x) => x.type))].map((x) => ({
-        label: x,
-        value: x
-      })),
-      onChange: (selected) => {
-        setFilterTypes(
-          sidebarScope ?? "expenses",
-          selected.map((x) => x.value)
-        );
-      },
-      components: {
-        DropdownIndicator: (props) => /* @__PURE__ */ React79.createElement(components3.DropdownIndicator, { ...props }, /* @__PURE__ */ React79.createElement(ChevronDown_default, null)),
-        Placeholder: (props) => /* @__PURE__ */ React79.createElement(components3.Placeholder, { ...props }, /* @__PURE__ */ React79.createElement("div", { className: "Layer__select__multi-all-placeholder-badge" }, "All"))
+      className: classNames28(
+        "Layer__profit-and-loss-table Layer__profit-and-loss-table--main",
+        asContainer && "Layer__component-container"
+      )
+    },
+    /* @__PURE__ */ React79.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: data.income,
+        direction: "CREDIT" /* CREDIT */,
+        lockExpanded,
+        scope: "revenue",
+        setSidebarScope
+      }
+    ),
+    /* @__PURE__ */ React79.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: data.cost_of_goods_sold,
+        direction: "DEBIT" /* DEBIT */,
+        lockExpanded,
+        scope: "expenses",
+        setSidebarScope
+      }
+    ),
+    /* @__PURE__ */ React79.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: {
+          value: data.gross_profit,
+          display_name: "Gross Profit"
+        },
+        variant: "summation",
+        direction: "CREDIT" /* CREDIT */,
+        lockExpanded,
+        scope: "revenue",
+        setSidebarScope
+      }
+    ),
+    /* @__PURE__ */ React79.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: data.expenses,
+        direction: "DEBIT" /* DEBIT */,
+        lockExpanded,
+        scope: "expenses",
+        setSidebarScope
+      }
+    ),
+    /* @__PURE__ */ React79.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: {
+          value: data.profit_before_taxes,
+          display_name: "Profit Before Taxes"
+        },
+        variant: "summation",
+        direction: "CREDIT" /* CREDIT */,
+        lockExpanded,
+        scope: "revenue",
+        setSidebarScope
+      }
+    ),
+    /* @__PURE__ */ React79.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: data.taxes,
+        direction: "DEBIT" /* DEBIT */,
+        lockExpanded,
+        scope: "expenses",
+        setSidebarScope
+      }
+    ),
+    /* @__PURE__ */ React79.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: {
+          value: data.net_profit,
+          display_name: "Net Profit"
+        },
+        variant: "summation",
+        direction: "CREDIT" /* CREDIT */,
+        lockExpanded
       }
+    )
+  ), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ React79.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ React79.createElement(
+    ProfitAndLossRow,
+    {
+      lineItem: data.other_outflows,
+      direction: "DEBIT" /* DEBIT */,
+      lockExpanded
     }
-  ));
+  ), /* @__PURE__ */ React79.createElement(
+    ProfitAndLossRow,
+    {
+      lineItem: data.personal_expenses,
+      direction: "DEBIT" /* DEBIT */,
+      lockExpanded
+    }
+  )) : null);
 };
 
-// src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
-import classNames28 from "classnames";
-import { format as format6 } from "date-fns";
-var ProfitAndLossDetailedCharts = () => {
-  const {
-    filteredData,
-    filteredTotal,
-    sortBy,
-    filters,
-    isLoading,
-    dateRange,
-    sidebarScope,
-    setSidebarScope,
-    setFilterTypes
-  } = useContext6(ProfitAndLoss.Context);
-  const [hoveredItem, setHoveredItem] = useState16();
-  return /* @__PURE__ */ React80.createElement(
+// src/components/ProfitAndLoss/ProfitAndLoss.tsx
+import { endOfMonth as endOfMonth4, startOfMonth as startOfMonth4 } from "date-fns";
+var PNLContext = createContext2({
+  data: void 0,
+  filteredDataRevenue: [],
+  filteredTotalRevenue: void 0,
+  filteredDataExpenses: [],
+  filteredTotalExpenses: void 0,
+  isLoading: true,
+  isValidating: false,
+  error: void 0,
+  dateRange: {
+    startDate: startOfMonth4(/* @__PURE__ */ new Date()),
+    endDate: endOfMonth4(/* @__PURE__ */ new Date())
+  },
+  changeDateRange: () => {
+  },
+  refetch: () => {
+  },
+  sidebarScope: void 0,
+  setSidebarScope: () => {
+  },
+  sortBy: () => {
+  },
+  setFilterTypes: () => {
+  },
+  filters: {
+    expenses: void 0,
+    revenue: void 0
+  }
+});
+var ProfitAndLoss = ({
+  children,
+  tagFilter,
+  reportingBasis,
+  asContainer = true
+}) => {
+  const contextData = useProfitAndLoss({ tagFilter, reportingBasis });
+  return /* @__PURE__ */ React80.createElement(PNLContext.Provider, { value: contextData }, asContainer ? /* @__PURE__ */ React80.createElement(Container, { name: "profit-and-loss" }, children) : children);
+};
+ProfitAndLoss.Chart = ProfitAndLossChart;
+ProfitAndLoss.Context = PNLContext;
+ProfitAndLoss.DatePicker = ProfitAndLossDatePicker;
+ProfitAndLoss.Summaries = ProfitAndLossSummaries;
+ProfitAndLoss.Table = ProfitAndLossTable;
+ProfitAndLoss.DetailedCharts = ProfitAndLossDetailedCharts;
+
+// src/components/ProfitAndLossView/ProfitAndLossView.tsx
+import React82, { useContext as useContext7, useRef as useRef14 } from "react";
+
+// src/components/Panel/Panel.tsx
+import React81, { useEffect as useEffect12, useState as useState18 } from "react";
+import classNames29 from "classnames";
+var Panel = ({
+  children,
+  className,
+  sidebar,
+  header,
+  sidebarIsOpen,
+  parentRef
+}) => {
+  const [sidebarHeight, setSidebarHeight] = useState18(0);
+  useEffect12(() => {
+    if (parentRef?.current?.offsetHeight) {
+      setSidebarHeight(parentRef?.current?.offsetHeight - 1);
+    }
+  }, [parentRef?.current?.offsetHeight, sidebarIsOpen]);
+  return /* @__PURE__ */ React81.createElement(
     "div",
     {
-      className: classNames28(
-        "Layer__profit-and-loss__side-panel",
-        sidebarScope && "open"
+      className: classNames29(
+        "Layer__panel",
+        className,
+        sidebarIsOpen && "Layer__panel--open"
       )
     },
-    /* @__PURE__ */ React80.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ React80.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header" }, /* @__PURE__ */ React80.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ React80.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ React80.createElement(Text, { size: "sm" /* sm */, className: "date" }, format6(dateRange.startDate, "LLLL, y")), /* @__PURE__ */ React80.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ React80.createElement(
-      Button,
-      {
-        rightIcon: /* @__PURE__ */ React80.createElement(X_default, null),
-        iconOnly: true,
-        onClick: () => setSidebarScope(void 0),
-        variant: "secondary" /* secondary */
-      }
-    )), /* @__PURE__ */ React80.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header--tablet" }, /* @__PURE__ */ React80.createElement(BackButton, { onClick: () => setSidebarScope(void 0) })), /* @__PURE__ */ React80.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__content" }, /* @__PURE__ */ React80.createElement(
-      DetailedChart,
-      {
-        filteredData,
-        filteredTotal,
-        hoveredItem,
-        setHoveredItem,
-        sidebarScope,
-        date: dateRange.startDate
-      }
-    ), /* @__PURE__ */ React80.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__table-wrapper" }, /* @__PURE__ */ React80.createElement(
-      Filters,
-      {
-        filteredData,
-        sidebarScope,
-        filters,
-        setFilterTypes
-      }
-    ), /* @__PURE__ */ React80.createElement(
-      DetailedTable,
+    /* @__PURE__ */ React81.createElement("div", { className: "Layer__panel__content" }, header, children),
+    sidebar && /* @__PURE__ */ React81.createElement(
+      "div",
       {
-        filteredData,
-        sidebarScope,
-        filters,
-        sortBy,
-        hoveredItem,
-        setHoveredItem
-      }
-    ))))
+        className: "Layer__panel__sidebar",
+        style: {
+          maxHeight: sidebarHeight > 0 && sidebarIsOpen ? sidebarHeight : 0
+        }
+      },
+      /* @__PURE__ */ React81.createElement("div", { className: "Layer__panel__sidebar-content" }, sidebar)
+    )
   );
 };
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
 var COMPONENT_NAME3 = "profit-and-loss";
 var ProfitAndLossView = (props) => {
-  return /* @__PURE__ */ React81.createElement(Container, { name: COMPONENT_NAME3 }, /* @__PURE__ */ React81.createElement(ProfitAndLoss, null, /* @__PURE__ */ React81.createElement("div", { className: `Layer__${COMPONENT_NAME3}__main-panel` }, /* @__PURE__ */ React81.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ React81.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit & Loss")), /* @__PURE__ */ React81.createElement(Components, { ...props })), props.showDetailedCharts !== false && /* @__PURE__ */ React81.createElement(ProfitAndLossDetailedCharts, null)));
+  const containerRef = useRef14(null);
+  return /* @__PURE__ */ React82.createElement(Container, { name: COMPONENT_NAME3, ref: containerRef }, /* @__PURE__ */ React82.createElement(ProfitAndLoss, null, /* @__PURE__ */ React82.createElement(ProfitAndLossPanel, { containerRef, ...props })));
+};
+var ProfitAndLossPanel = ({
+  containerRef,
+  ...props
+}) => {
+  const { sidebarScope } = useContext7(ProfitAndLoss.Context);
+  return /* @__PURE__ */ React82.createElement(
+    Panel,
+    {
+      sidebar: /* @__PURE__ */ React82.createElement(ProfitAndLossDetailedCharts, null),
+      sidebarIsOpen: Boolean(sidebarScope),
+      parentRef: containerRef
+    },
+    /* @__PURE__ */ React82.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ React82.createElement(Heading, { className: "Layer__profit-and-loss__title" }, "Profit & Loss")),
+    /* @__PURE__ */ React82.createElement(Components, { ...props })
+  );
 };
 var Components = ({
   hideChart = false,
@@ -6423,7 +6833,7 @@ var Components = ({
     ProfitAndLoss.Context
   );
   if (!isLoading && error) {
-    return /* @__PURE__ */ React81.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React81.createElement(
+    return /* @__PURE__ */ React82.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React82.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -6434,27 +6844,27 @@ var Components = ({
       }
     ));
   }
-  return /* @__PURE__ */ React81.createElement(React81.Fragment, null, !hideChart && /* @__PURE__ */ React81.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, !hideChart && /* @__PURE__ */ React82.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ React82.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__summary-col`
     },
-    /* @__PURE__ */ React81.createElement(ProfitAndLoss.DatePicker, null),
-    /* @__PURE__ */ React81.createElement(ProfitAndLoss.Summaries, { vertical: true })
-  ), /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(ProfitAndLoss.DatePicker, null),
+    /* @__PURE__ */ React82.createElement(ProfitAndLoss.Summaries, { vertical: true })
+  ), /* @__PURE__ */ React82.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__chart-col`
     },
-    /* @__PURE__ */ React81.createElement(ProfitAndLoss.Chart, null)
-  )), !hideTable && /* @__PURE__ */ React81.createElement(ProfitAndLoss.Table, null));
+    /* @__PURE__ */ React82.createElement(ProfitAndLoss.Chart, null)
+  )), !hideTable && /* @__PURE__ */ React82.createElement(ProfitAndLoss.Table, null));
 };
 
-// src/components/LedgerAccounts/LedgerAccounts.tsx
-import React88, { createContext as createContext3, useContext as useContext12 } from "react";
+// src/components/ChartOfAccounts/ChartOfAccounts.tsx
+import React96, { createContext as createContext3, useContext as useContext14, useState as useState24 } from "react";
 
-// src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
-import { useState as useState17 } from "react";
+// src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
+import { useState as useState19 } from "react";
 import useSWR6 from "swr";
 var validate = (formData) => {
   const errors = [];
@@ -6486,15 +6896,14 @@ var validateName = (formData) => {
   return;
 };
 var flattenAccounts = (accounts) => accounts.flatMap((a) => [a, flattenAccounts(a.sub_accounts || [])]).flat().filter((id) => id);
-var useLedgerAccounts = () => {
+var useChartOfAccounts = () => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [form, setForm] = useState17();
-  const [sendingForm, setSendingForm] = useState17(false);
-  const [apiError, setApiError] = useState17(void 0);
-  const [showARForAccountId, setShowARForAccountId] = useState17();
+  const [form, setForm] = useState19();
+  const [sendingForm, setSendingForm] = useState19(false);
+  const [apiError, setApiError] = useState19(void 0);
   const { data, isLoading, isValidating, error, mutate } = useSWR6(
-    businessId && auth?.access_token && `ledger-accounts-${businessId}`,
-    Layer.getLedgerAccounts(apiUrl, auth?.access_token, {
+    businessId && auth?.access_token && `chart-of-accounts-${businessId}`,
+    Layer.getChartOfAccounts(apiUrl, auth?.access_token, {
       params: { businessId }
     })
   );
@@ -6552,13 +6961,13 @@ var useLedgerAccounts = () => {
       return;
     }
     const data2 = {
-      name: form.data.name || "Test name",
+      name: form.data.name ?? "",
       normality: form.data.subType?.value,
       parent_id: form.data.parent ? {
         type: "AccountId",
         id: form.data.parent.value
       } : void 0,
-      description: form.data.type?.value.toString() || "Test description"
+      description: form.data.type?.value.toString() ?? ""
     };
     if (form.action === "new") {
       create(data2);
@@ -6643,112 +7052,67 @@ var useLedgerAccounts = () => {
     editAccount,
     cancelForm,
     changeFormData,
-    submitForm,
-    showARForAccountId,
-    setShowARForAccountId
+    submitForm
   };
 };
 
-// src/components/AccountsReceivable/AccountsReceivableIndex.tsx
-import React82, { useContext as useContext8, useMemo as useMemo7 } from "react";
-import classNames29 from "classnames";
-import { parseISO as parseISO9, format as formatTime7 } from "date-fns";
-var AccountsReceivable = () => {
-  const { data, showARForAccountId, setShowARForAccountId } = useContext8(
-    LedgerAccountsContext
+// src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
+import { useState as useState20 } from "react";
+import useSWR7 from "swr";
+var useLedgerAccounts = () => {
+  const { auth, businessId, apiUrl } = useLayerContext();
+  const [accountId, setAccountId] = useState20();
+  const [selectedEntryId, setSelectedEntryId] = useState20();
+  const { data, isLoading, isValidating, error, mutate } = useSWR7(
+    businessId && accountId && auth?.access_token && `ledger-accounts-lines-${businessId}-${accountId}`,
+    Layer.getLedgerAccountsLines(apiUrl, auth?.access_token, {
+      params: { businessId, accountId }
+    })
   );
-  const entry = useMemo7(() => {
-    return flattenAccounts(data?.accounts || []).find(
-      (x) => x.id === showARForAccountId
-    );
-  }, [showARForAccountId]);
-  const baseClassName = classNames29(
-    "Layer__accounts-receivable__index",
-    showARForAccountId && "open"
+  const {
+    data: entryData,
+    mutate: mutateEntryData,
+    isLoading: isLoadingEntry,
+    isValidating: isValdiatingEntry,
+    error: errorEntry
+  } = useSWR7(
+    businessId && selectedEntryId && auth?.access_token && `ledger-accounts-entry-${businessId}-${selectedEntryId}}`,
+    Layer.getLedgerAccountsEntry(apiUrl, auth?.access_token, {
+      params: { businessId, entryId: selectedEntryId }
+    })
   );
-  const close = () => setShowARForAccountId(void 0);
-  return /* @__PURE__ */ React82.createElement("div", { className: baseClassName }, /* @__PURE__ */ React82.createElement("div", { className: "Layer__accounts-receivable__header" }, /* @__PURE__ */ React82.createElement(BackButton, { onClick: close }), /* @__PURE__ */ React82.createElement("div", { className: "Layer__accounts-receivable__title-container" }, /* @__PURE__ */ React82.createElement(
-    Text,
-    {
-      weight: "bold" /* bold */,
-      className: "Layer__accounts-receivable__title"
-    },
-    entry?.name || ""
-  ), /* @__PURE__ */ React82.createElement(
-    Button,
-    {
-      variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ React82.createElement(DownloadCloud_default, { size: 12 })
-    },
-    "Download"
-  )), /* @__PURE__ */ React82.createElement("div", { className: "Layer__accounts-receivable__balance-container" }, /* @__PURE__ */ React82.createElement(
-    Text,
-    {
-      weight: "bold" /* bold */,
-      className: "Layer__accounts-receivable__balance-label"
-    },
-    "Current balance"
-  ), /* @__PURE__ */ React82.createElement(
-    Text,
-    {
-      weight: "bold" /* bold */,
-      className: "Layer__accounts-receivable__balance-value"
-    },
-    "$",
-    centsToDollars(entry?.balance || 0)
-  ))), /* @__PURE__ */ React82.createElement("table", { className: "Layer__table Layer__accounts-receivable-table" }, /* @__PURE__ */ React82.createElement("thead", null, /* @__PURE__ */ React82.createElement("tr", null, /* @__PURE__ */ React82.createElement("th", { className: "Layer__table-header" }, "Date"), /* @__PURE__ */ React82.createElement("th", { className: "Layer__table-header" }, "Journal id #"), /* @__PURE__ */ React82.createElement("th", { className: "Layer__table-header" }, "Source"), /* @__PURE__ */ React82.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Debit"), /* @__PURE__ */ React82.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Credit"), /* @__PURE__ */ React82.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Running balance"))), /* @__PURE__ */ React82.createElement("tbody", null, entry?.entries?.map((x) => {
-    return /* @__PURE__ */ React82.createElement("tr", { key: x.id }, /* @__PURE__ */ React82.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React82.createElement("span", { className: "Layer__table-cell-content" }, x.createdAt && formatTime7(parseISO9(x.createdAt), DATE_FORMAT))), /* @__PURE__ */ React82.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React82.createElement("span", { className: "Layer__table-cell-content" }, "#123")), /* @__PURE__ */ React82.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React82.createElement("span", { className: "Layer__table-cell-content" }, "Invoice")), /* @__PURE__ */ React82.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ React82.createElement("span", { className: "Layer__table-cell-content" }, x.direction, " $X,XXX.XX")), /* @__PURE__ */ React82.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ React82.createElement("span", { className: "Layer__table-cell-content" }, "$X,XXX.XX")), /* @__PURE__ */ React82.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ React82.createElement("span", { className: "Layer__table-cell-content" }, "$X,XXX.XX")));
-  }))));
+  const refetch = () => mutate();
+  const closeSelectedEntry = () => {
+    setSelectedEntryId(void 0);
+    mutateEntryData();
+  };
+  return {
+    data: data?.data,
+    entryData: entryData?.data,
+    isLoading,
+    isLoadingEntry,
+    isValidating,
+    isValdiatingEntry,
+    error,
+    errorEntry,
+    refetch,
+    accountId,
+    setAccountId,
+    selectedEntryId,
+    setSelectedEntryId,
+    closeSelectedEntry
+  };
 };
 
-// src/components/LedgerAccountsRow/LedgerAccountsRow.tsx
-import React85, { useContext as useContext9, useEffect as useEffect11, useState as useState18 } from "react";
+// src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
+import React88, { useContext as useContext10 } from "react";
 
-// src/icons/ArrowRightCircle.tsx
-import * as React83 from "react";
-var ArrowRightCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React83.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 18 18",
-    fill: "none",
-    ...props,
-    width: size,
-    height: size
-  },
-  /* @__PURE__ */ React83.createElement(
-    "path",
-    {
-      d: "M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ React83.createElement(
-    "path",
-    {
-      d: "M9 12L12 9L9 6",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ React83.createElement(
-    "path",
-    {
-      d: "M6 9H12",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )
-);
-var ArrowRightCircle_default = ArrowRightCircle;
+// src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
+import React84, { useContext as useContext8, useEffect as useEffect13, useState as useState21 } from "react";
 
 // src/icons/Edit2.tsx
-import * as React84 from "react";
-var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React84.createElement(
+import * as React83 from "react";
+var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React83.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6758,7 +7122,7 @@ var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React84.createElement(
     width: size,
     height: size
   },
-  /* @__PURE__ */ React84.createElement(
+  /* @__PURE__ */ React83.createElement(
     "path",
     {
       d: "M12.75 2.25C12.947 2.05301 13.1808 1.89676 13.4382 1.79015C13.6956 1.68355 13.9714 1.62868 14.25 1.62868C14.5286 1.62868 14.8044 1.68355 15.0618 1.79015C15.3192 1.89676 15.553 2.05301 15.75 2.25C15.947 2.44698 16.1032 2.68083 16.2098 2.9382C16.3165 3.19557 16.3713 3.47142 16.3713 3.75C16.3713 4.02857 16.3165 4.30442 16.2098 4.56179C16.1032 4.81916 15.947 5.05302 15.75 5.25L5.625 15.375L1.5 16.5L2.625 12.375L12.75 2.25Z",
@@ -6770,43 +7134,51 @@ var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React84.createElement(
 );
 var Edit2_default = Edit2;
 
-// src/components/LedgerAccountsRow/LedgerAccountsRow.tsx
+// src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
 import classNames30 from "classnames";
-var INDENTATION = 12;
+var INDENTATION = 24;
+var MOBILE_INDENTATION = 12;
 var EXPANDED_STYLE = {
   height: 52,
   paddingTop: 12,
   paddingBottom: 12,
   opacity: 1
 };
+var EXPANDED_MOBILE_STYLE = {
+  height: 76,
+  paddingTop: 12,
+  paddingBottom: 12,
+  opacity: 1
+};
 var COLLAPSED_STYLE = {
   height: 0,
   paddingTop: 0,
   paddingBottom: 0,
   opacity: 0.5
 };
-var LedgerAccountsRow = ({
+var ChartOfAccountsRow = ({
   account,
   depth = 0,
   index,
   cumulativeIndex = 0,
   expanded = false,
   defaultOpen = false,
-  acountsLength
+  acountsLength,
+  view
 }) => {
-  const { form, editAccount, setShowARForAccountId } = useContext9(
-    LedgerAccountsContext
-  );
-  const [isOpen, setIsOpen] = useState18(defaultOpen);
+  const { form, editAccount } = useContext8(ChartOfAccountsContext);
+  const { setAccountId } = useContext8(LedgerAccountsContext);
+  const baseStyle = view === "desktop" ? EXPANDED_STYLE : EXPANDED_MOBILE_STYLE;
+  const [isOpen, setIsOpen] = useState21(defaultOpen);
   const style = expanded ? {
-    ...EXPANDED_STYLE,
+    ...baseStyle,
     transitionDelay: `${15 * index}ms`
   } : {
     ...COLLAPSED_STYLE,
     transitionDelay: `${acountsLength - 15 * index}ms`
   };
-  const [showComponent, setShowComponent] = useState18(false);
-  useEffect11(() => {
+  const [showComponent, setShowComponent] = useState21(false);
+  useEffect13(() => {
     const timeoutId = setTimeout(() => {
       setShowComponent(true);
     }, cumulativeIndex * 50);
@@ -6820,56 +7192,151 @@ var LedgerAccountsRow = ({
     form?.accountId === account.id && "Layer__table-row--active",
     !showComponent && "Layer__table-row--anim-starting-state"
   );
-  return /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement("tr", { className: baseClass, onClick: () => setIsOpen(!isOpen) }, /* @__PURE__ */ React85.createElement("td", { className: "Layer__table-cell Layer__coa__name" }, /* @__PURE__ */ React85.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React85.createElement(
-    "span",
-    {
-      className: "Layer__table-cell-content-indentation",
-      style: {
-        paddingLeft: INDENTATION * depth + 16
-      }
-    },
-    account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ React85.createElement(
-      ChevronDownFill_default,
-      {
-        size: 16,
-        className: "Layer__table__expand-icon"
-      }
-    ),
-    /* @__PURE__ */ React85.createElement("span", { className: "Layer__coa__name__text" }, account.name)
-  ))), /* @__PURE__ */ React85.createElement("td", { className: "Layer__table-cell Layer__coa__type" }, /* @__PURE__ */ React85.createElement("span", { className: "Layer__table-cell-content", style }, account.normality)), /* @__PURE__ */ React85.createElement("td", { className: "Layer__table-cell Layer__coa__subtype" }, /* @__PURE__ */ React85.createElement("span", { className: "Layer__table-cell-content", style }, "Sub-Type")), /* @__PURE__ */ React85.createElement("td", { className: "Layer__table-cell Layer__coa__balance" }, /* @__PURE__ */ React85.createElement(
-    "span",
-    {
-      className: "Layer__table-cell-content Layer__table-cell--amount",
-      style
-    },
-    "$",
-    centsToDollars(Math.abs(account.balance || 0))
-  )), /* @__PURE__ */ React85.createElement("td", { className: "Layer__table-cell Layer__coa__actions" }, /* @__PURE__ */ React85.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React85.createElement(
-    Button,
+  const desktopRowClass = classNames30(
+    baseClass,
+    "Layer__chart-of-accounts__row---desktop"
+  );
+  const mobileRowClass = classNames30(
+    baseClass,
+    "Layer__chart-of-accounts__row---mobile"
+  );
+  return /* @__PURE__ */ React84.createElement(React84.Fragment, null, view === "desktop" && /* @__PURE__ */ React84.createElement(
+    "tr",
     {
-      variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ React85.createElement(Edit2_default, { size: 12 }),
+      className: desktopRowClass,
       onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
-        editAccount(account.id);
+        setAccountId(account.id);
       }
     },
-    "Edit"
-  ), /* @__PURE__ */ React85.createElement(
-    Button,
+    /* @__PURE__ */ React84.createElement("td", { className: "Layer__table-cell Layer__coa__name" }, /* @__PURE__ */ React84.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React84.createElement(
+      "span",
+      {
+        className: "Layer__table-cell-content-indentation",
+        style: {
+          paddingLeft: INDENTATION * depth + 16
+        }
+      },
+      account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ React84.createElement(
+        ChevronDownFill_default,
+        {
+          size: 16,
+          className: "Layer__table__expand-icon",
+          onClick: (e) => {
+            e.stopPropagation();
+            setIsOpen(!isOpen);
+          }
+        }
+      ),
+      /* @__PURE__ */ React84.createElement("span", { className: "Layer__coa__name__text" }, account.name)
+    ))),
+    /* @__PURE__ */ React84.createElement("td", { className: "Layer__table-cell Layer__coa__type" }, /* @__PURE__ */ React84.createElement(
+      "span",
+      {
+        className: "Layer__table-cell-content Layer__mobile--hidden",
+        style
+      },
+      account.normality
+    ), /* @__PURE__ */ React84.createElement(
+      "span",
+      {
+        className: "Layer__table-cell-content Layer__desktop--hidden",
+        style
+      },
+      /* @__PURE__ */ React84.createElement(
+        Text,
+        {
+          weight: "bold" /* bold */,
+          className: "Layer__coa__type--mobile"
+        },
+        account.normality
+      ),
+      /* @__PURE__ */ React84.createElement(Text, { className: "Layer__coa__subtype--mobile" }, "Sub-Type")
+    )),
+    /* @__PURE__ */ React84.createElement("td", { className: "Layer__table-cell Layer__coa__subtype Layer__mobile--hidden" }, /* @__PURE__ */ React84.createElement("span", { className: "Layer__table-cell-content", style }, "Sub-Type")),
+    /* @__PURE__ */ React84.createElement("td", { className: "Layer__table-cell Layer__coa__balance" }, /* @__PURE__ */ React84.createElement(
+      "span",
+      {
+        className: "Layer__table-cell-content Layer__table-cell--amount",
+        style
+      },
+      "$",
+      centsToDollars(Math.abs(account.balance || 0))
+    )),
+    /* @__PURE__ */ React84.createElement("td", { className: "Layer__table-cell Layer__coa__actions" }, /* @__PURE__ */ React84.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React84.createElement(
+      Button,
+      {
+        variant: "secondary" /* secondary */,
+        rightIcon: /* @__PURE__ */ React84.createElement(Edit2_default, { size: 12 }),
+        iconOnly: true,
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          editAccount(account.id);
+        }
+      },
+      "Edit"
+    )))
+  ), view === "mobile" || view === "tablet" ? /* @__PURE__ */ React84.createElement(
+    "tr",
     {
-      variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ React85.createElement(ArrowRightCircle_default, { size: 12 }),
+      className: mobileRowClass,
       onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
-        setShowARForAccountId(account.id);
+        setAccountId(account.id);
       }
     },
-    "Open"
-  )))), (account.sub_accounts || []).map((subAccount, idx) => /* @__PURE__ */ React85.createElement(
-    LedgerAccountsRow,
+    /* @__PURE__ */ React84.createElement("td", { className: "Layer__table-cell", colSpan: 5 }, /* @__PURE__ */ React84.createElement(
+      "span",
+      {
+        className: "Layer__table-cell-content Layer__table-cell-content-indentation",
+        style: {
+          paddingLeft: MOBILE_INDENTATION * depth + 16,
+          ...style
+        }
+      },
+      account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ React84.createElement(
+        ChevronDownFill_default,
+        {
+          size: 16,
+          className: "Layer__table__expand-icon",
+          onClick: (e) => {
+            e.stopPropagation();
+            setIsOpen(!isOpen);
+          }
+        }
+      ),
+      /* @__PURE__ */ React84.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content" }, /* @__PURE__ */ React84.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__top-row" }, /* @__PURE__ */ React84.createElement(
+        Text,
+        {
+          as: "span",
+          className: "Layer__chart-of-accounts__mobile-row-content__name"
+        },
+        account.name
+      ), /* @__PURE__ */ React84.createElement(
+        TextButton,
+        {
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            editAccount(account.id);
+          }
+        },
+        "Edit"
+      )), /* @__PURE__ */ React84.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__bottom-row" }, /* @__PURE__ */ React84.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__types" }, /* @__PURE__ */ React84.createElement(Text, { as: "span" }, account.normality), /* @__PURE__ */ React84.createElement("span", { className: "Layer__chart-of-accounts__mobile-row-content__separator" }), /* @__PURE__ */ React84.createElement(Text, { as: "span" }, "Sub-Type")), /* @__PURE__ */ React84.createElement(
+        Text,
+        {
+          as: "span",
+          className: "Layer__chart-of-accounts__mobile-row-content__balance"
+        },
+        "$",
+        centsToDollars(Math.abs(account.balance || 0))
+      )))
+    ))
+  ) : null, (account.sub_accounts || []).map((subAccount, idx) => /* @__PURE__ */ React84.createElement(
+    ChartOfAccountsRow,
     {
       key: subAccount.id,
       account: subAccount,
@@ -6877,16 +7344,19 @@ var LedgerAccountsRow = ({
       index: idx,
       expanded: isOpen && expanded,
       cumulativeIndex: cumulativeIndex + idx + 1,
-      acountsLength: (account.sub_accounts ?? []).length
+      acountsLength: (account.sub_accounts ?? []).length,
+      view
     }
   )));
 };
 
-// src/components/LedgerAccountsSidebar/LedgerAccountsSidebar.tsx
-import React87, { useContext as useContext11 } from "react";
+// src/components/ChartOfAccountsSidebar/ChartOfAccountsSidebar.tsx
+import React87 from "react";
 
-// src/components/LedgerAccountsForm/LedgerAccountsForm.tsx
-import React86, { useContext as useContext10, useMemo as useMemo8 } from "react";
+// src/components/ChartOfAccountsForm/ChartOfAccountsForm.tsx
+import React86, { useContext as useContext9, useMemo as useMemo8 } from "react";
+
+// src/components/ChartOfAccountsForm/constants.ts
 var SUB_TYPE_OPTIONS = [
   {
     value: "DEBIT" /* DEBIT */,
@@ -6897,7 +7367,21 @@ var SUB_TYPE_OPTIONS = [
     label: "Credit"
   }
 ];
-var LedgerAccountsForm = () => {
+
+// src/components/ChartOfAccountsForm/useParentOptions.ts
+import { useMemo as useMemo7 } from "react";
+var useParentOptions = (data) => useMemo7(
+  () => flattenAccounts(data?.accounts || []).sort((a, b) => a?.name && b?.name ? a.name.localeCompare(b.name) : 0).map((x) => {
+    return {
+      label: x.name,
+      value: x.id
+    };
+  }),
+  [data?.accounts?.length]
+);
+
+// src/components/ChartOfAccountsForm/ChartOfAccountsForm.tsx
+var ChartOfAccountsForm = () => {
   const {
     form,
     data,
@@ -6906,16 +7390,8 @@ var LedgerAccountsForm = () => {
     submitForm,
     sendingForm,
     apiError
-  } = useContext10(LedgerAccountsContext);
-  const parentOptions = useMemo8(
-    () => flattenAccounts(data?.accounts || []).sort((a, b) => a?.name && b?.name ? a.name.localeCompare(b.name) : 0).map((x) => {
-      return {
-        label: x.name,
-        value: x.id
-      };
-    }),
-    [data?.accounts?.length]
-  );
+  } = useContext9(ChartOfAccountsContext);
+  const parentOptions = useParentOptions(data);
   const entry = useMemo8(() => {
     if (form?.action === "edit" && form.accountId) {
       return flattenAccounts(data?.accounts || []).find(
@@ -6936,7 +7412,7 @@ var LedgerAccountsForm = () => {
         submitForm();
       }
     },
-    /* @__PURE__ */ React86.createElement("div", { className: "Layer__ledger-accounts__sidebar__header" }, /* @__PURE__ */ React86.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? "Edit" : "Add New", " Account"), /* @__PURE__ */ React86.createElement("div", { className: "actions" }, /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React86.createElement("div", { className: "Layer__chart-of-accounts__sidebar__header" }, /* @__PURE__ */ React86.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? "Edit" : "Add New", " Account"), /* @__PURE__ */ React86.createElement("div", { className: "actions" }, /* @__PURE__ */ React86.createElement(
       Button,
       {
         type: "button",
@@ -6968,12 +7444,12 @@ var LedgerAccountsForm = () => {
       Text,
       {
         size: "sm" /* sm */,
-        className: "Layer__ledger-accounts__form__error-message"
+        className: "Layer__chart-of-accounts__form__error-message"
       },
       apiError
     ),
-    entry && /* @__PURE__ */ React86.createElement("div", { className: "Layer__ledger-accounts__form-edit-entry" }, /* @__PURE__ */ React86.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ React86.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
-    /* @__PURE__ */ React86.createElement("div", { className: "Layer__ledger-accounts__form" }, /* @__PURE__ */ React86.createElement(InputGroup, { name: "parent", label: "Parent", inline: true }, /* @__PURE__ */ React86.createElement(
+    entry && /* @__PURE__ */ React86.createElement("div", { className: "Layer__chart-of-accounts__form-edit-entry" }, /* @__PURE__ */ React86.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ React86.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
+    /* @__PURE__ */ React86.createElement("div", { className: "Layer__chart-of-accounts__form" }, /* @__PURE__ */ React86.createElement(InputGroup, { name: "parent", label: "Parent", inline: true }, /* @__PURE__ */ React86.createElement(
       Select2,
       {
         options: parentOptions,
@@ -7020,107 +7496,505 @@ var LedgerAccountsForm = () => {
   );
 };
 
-// src/components/LedgerAccountsSidebar/LedgerAccountsSidebar.tsx
+// src/components/ChartOfAccountsSidebar/ChartOfAccountsSidebar.tsx
+var ChartOfAccountsSidebar = ({
+  parentRef: _parentRef
+}) => {
+  return /* @__PURE__ */ React87.createElement(ChartOfAccountsForm, null);
+};
+
+// src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
+var COMPONENT_NAME4 = "chart-of-accounts";
+var ChartOfAccountsTable = ({
+  view,
+  containerRef
+}) => {
+  const { data, isLoading, addAccount, error, isValidating, refetch, form } = useContext10(ChartOfAccountsContext);
+  let cumulativeIndex = 0;
+  const accountsLength = data?.accounts.length ?? 0;
+  return /* @__PURE__ */ React88.createElement(
+    Panel,
+    {
+      sidebar: /* @__PURE__ */ React88.createElement(ChartOfAccountsSidebar, { parentRef: containerRef }),
+      sidebarIsOpen: Boolean(form),
+      parentRef: containerRef
+    },
+    /* @__PURE__ */ React88.createElement(Header, { className: `Layer__${COMPONENT_NAME4}__header` }, /* @__PURE__ */ React88.createElement(Heading, { className: `Layer__${COMPONENT_NAME4}__title` }, "Chart of Accounts"), /* @__PURE__ */ React88.createElement("div", { className: `Layer__${COMPONENT_NAME4}__actions` }, /* @__PURE__ */ React88.createElement(
+      Button,
+      {
+        variant: "secondary" /* secondary */,
+        disabled: isLoading,
+        rightIcon: /* @__PURE__ */ React88.createElement(DownloadCloud_default, { size: 12 })
+      },
+      "Download"
+    ), /* @__PURE__ */ React88.createElement(Button, { onClick: () => addAccount(), disabled: isLoading }, "Add Account"))),
+    /* @__PURE__ */ React88.createElement("table", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ React88.createElement("thead", null, /* @__PURE__ */ React88.createElement("tr", { className: "Layer__table-row--header" }, /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__name" }, "Name"), /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__type" }, "Type"), /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__subtype Layer__mobile--hidden" }, "Sub-Type"), /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__balance" }, "Balance"), /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__actions" }))), /* @__PURE__ */ React88.createElement("tbody", null, !error && data?.accounts.map((account, idx) => {
+      const currentCumulativeIndex = cumulativeIndex;
+      cumulativeIndex = (account.sub_accounts?.length || 0) + cumulativeIndex + 1;
+      return /* @__PURE__ */ React88.createElement(
+        ChartOfAccountsRow,
+        {
+          key: account.id,
+          account,
+          depth: 0,
+          index: idx,
+          cumulativeIndex: currentCumulativeIndex,
+          expanded: true,
+          defaultOpen: true,
+          acountsLength: accountsLength,
+          view
+        }
+      );
+    }))),
+    error ? /* @__PURE__ */ React88.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React88.createElement(
+      DataState,
+      {
+        status: "failed" /* failed */,
+        title: "Something went wrong",
+        description: "We couldn\u2019t load your data.",
+        onRefresh: () => refetch(),
+        isLoading: isValidating || isLoading
+      }
+    )) : null,
+    (!data || isLoading) && !error ? /* @__PURE__ */ React88.createElement("div", { className: `Layer__${COMPONENT_NAME4}__loader-container` }, /* @__PURE__ */ React88.createElement(Loader2, null)) : null,
+    !isLoading && !error && data?.accounts.length === 0 ? /* @__PURE__ */ React88.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React88.createElement(
+      DataState,
+      {
+        status: "info" /* info */,
+        title: "Accounts were not found",
+        description: 'New account can be created with "Add Account".',
+        onRefresh: () => refetch(),
+        isLoading: isValidating
+      }
+    )) : null
+  );
+};
+
+// src/components/LedgerAccount/LedgerAccountIndex.tsx
+import React95, {
+  useContext as useContext13,
+  useEffect as useEffect15,
+  useMemo as useMemo10,
+  useState as useState23
+} from "react";
+
+// src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
+import React93, { useContext as useContext11, useMemo as useMemo9 } from "react";
+
+// src/components/Card/Card.tsx
+import React89 from "react";
 import classNames31 from "classnames";
-var LedgerAccountsSidebar = () => {
-  const { form } = useContext11(LedgerAccountsContext);
-  return /* @__PURE__ */ React87.createElement(
-    "div",
+var Card = ({ children, className }) => {
+  return /* @__PURE__ */ React89.createElement("div", { className: classNames31("Layer__card", className) }, children);
+};
+
+// src/components/DateTime/DateTime.tsx
+import React90 from "react";
+import { parseISO as parseISO9, format as formatTime7 } from "date-fns";
+var DateTime = ({
+  value,
+  format: format7,
+  dateFormat,
+  timeFormat,
+  onlyDate,
+  onlyTime
+}) => {
+  if (format7) {
+    return /* @__PURE__ */ React90.createElement(Text, { className: "Layer__datetime" }, formatTime7(parseISO9(value), format7));
+  }
+  const date = formatTime7(parseISO9(value), dateFormat ?? DATE_FORMAT);
+  const time = formatTime7(parseISO9(value), timeFormat ?? TIME_FORMAT);
+  return /* @__PURE__ */ React90.createElement(Text, { className: "Layer__datetime" }, !onlyTime && /* @__PURE__ */ React90.createElement(
+    Text,
+    {
+      as: "span",
+      weight: "bold" /* bold */,
+      size: "sm" /* sm */,
+      className: "Layer__datetime__date"
+    },
+    date
+  ), !onlyDate && /* @__PURE__ */ React90.createElement(
+    Text,
     {
-      className: classNames31(
-        "Layer__ledger-accounts__sidebar",
-        form ? "open" : ""
+      as: "span",
+      weight: "bold" /* bold */,
+      size: "sm" /* sm */,
+      className: "Layer__datetime__time"
+    },
+    time
+  ));
+};
+
+// src/components/DetailsList/DetailsList.tsx
+import React91 from "react";
+import classNames32 from "classnames";
+var DetailsList = ({
+  title,
+  children,
+  className,
+  actions
+}) => {
+  return /* @__PURE__ */ React91.createElement("div", { className: classNames32("Layer__details-list", className) }, title && /* @__PURE__ */ React91.createElement(Header, null, /* @__PURE__ */ React91.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ React91.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ React91.createElement("ul", { className: "Layer__details-list__list" }, children));
+};
+
+// src/components/DetailsList/DetailsListItem.tsx
+import React92 from "react";
+var renderValue = (value) => {
+  if (typeof value === "string") {
+    return /* @__PURE__ */ React92.createElement(Text, { weight: "bold" /* bold */, size: "sm" /* sm */ }, value);
+  }
+  return value;
+};
+var DetailsListItem = ({
+  label,
+  children,
+  isLoading
+}) => {
+  return /* @__PURE__ */ React92.createElement("li", { className: "Layer__details-list-item" }, /* @__PURE__ */ React92.createElement("label", { className: "Layer__details-list-item__label" }, label), /* @__PURE__ */ React92.createElement("span", { className: "Layer__details-list-item__value" }, isLoading ? /* @__PURE__ */ React92.createElement(SkeletonLoader, null) : renderValue(children)));
+};
+
+// src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
+var LedgerAccountEntryDetails = () => {
+  const { entryData, isLoadingEntry, closeSelectedEntry, errorEntry } = useContext11(LedgerAccountsContext);
+  const { totalDebit, totalCredit } = useMemo9(() => {
+    let totalDebit2 = 0;
+    let totalCredit2 = 0;
+    entryData?.line_items?.forEach((item) => {
+      if (item.direction === "CREDIT" /* CREDIT */) {
+        totalCredit2 += item.amount || 0;
+      } else if (item.direction === "DEBIT" /* DEBIT */) {
+        totalDebit2 += item.amount || 0;
+      }
+    });
+    return { totalDebit: totalDebit2, totalCredit: totalCredit2 };
+  }, [entryData]);
+  return /* @__PURE__ */ React93.createElement("div", { className: "Layer__ledger-account__entry-details" }, /* @__PURE__ */ React93.createElement("div", { className: "Layer__ledger-account__entry-details__back-btn" }, /* @__PURE__ */ React93.createElement(BackButton, { onClick: () => closeSelectedEntry() })), /* @__PURE__ */ React93.createElement(
+    DetailsList,
+    {
+      title: "Transaction source",
+      actions: /* @__PURE__ */ React93.createElement(
+        IconButton,
+        {
+          icon: /* @__PURE__ */ React93.createElement(X_default, null),
+          onClick: () => closeSelectedEntry(),
+          className: "Layer__hidden-sm Layer__hidden-xs"
+        }
       )
     },
-    /* @__PURE__ */ React87.createElement("div", { className: "Layer__ledger-accounts__sidebar-content" }, /* @__PURE__ */ React87.createElement(LedgerAccountsForm, null))
+    /* @__PURE__ */ React93.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ React93.createElement(Badge, null, "Invoice")),
+    /* @__PURE__ */ React93.createElement(DetailsListItem, { label: "Number", isLoading: isLoadingEntry }, "1234"),
+    /* @__PURE__ */ React93.createElement(DetailsListItem, { label: "Date", isLoading: isLoadingEntry }, "May 5, 2023"),
+    /* @__PURE__ */ React93.createElement(DetailsListItem, { label: "Account", isLoading: isLoadingEntry }, "89 8888 7656 6666 0000 6765")
+  ), /* @__PURE__ */ React93.createElement(DetailsList, { title: "Journal Entry #123", className: "Layer__border-top" }, /* @__PURE__ */ React93.createElement(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry }, humanizeEnum(entryData?.entry_type ?? "")), /* @__PURE__ */ React93.createElement(DetailsListItem, { label: "Date", isLoading: isLoadingEntry }, entryData?.entry_at && /* @__PURE__ */ React93.createElement(DateTime, { value: entryData?.entry_at })), /* @__PURE__ */ React93.createElement(DetailsListItem, { label: "Creation date", isLoading: isLoadingEntry }, entryData?.date && /* @__PURE__ */ React93.createElement(DateTime, { value: entryData?.date })), /* @__PURE__ */ React93.createElement(DetailsListItem, { label: "Reversal", isLoading: isLoadingEntry }, "Journal Entry #79 TBD")), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ React93.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ React93.createElement(Card, null, /* @__PURE__ */ React93.createElement("table", { className: "Layer__table Layer__ledger-account__entry-details__table" }, /* @__PURE__ */ React93.createElement("thead", null, /* @__PURE__ */ React93.createElement("tr", null, /* @__PURE__ */ React93.createElement("th", { className: "Layer__table-header" }, "Line items"), /* @__PURE__ */ React93.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Debit"), /* @__PURE__ */ React93.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Credit"))), /* @__PURE__ */ React93.createElement("tbody", null, entryData?.line_items?.map((item) => /* @__PURE__ */ React93.createElement("tr", { key: `ledger-line-item-${item.id}` }, /* @__PURE__ */ React93.createElement("td", { className: "Layer__table-cell" }, item.account?.name || ""), /* @__PURE__ */ React93.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ React93.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))), /* @__PURE__ */ React93.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ React93.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0))))), /* @__PURE__ */ React93.createElement("tr", { className: "Layer__table Layer__ledger-account__entry-details__table__total-row" }, /* @__PURE__ */ React93.createElement("td", { className: "Layer__table-cell" }, "Total"), /* @__PURE__ */ React93.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, "$", centsToDollars(totalDebit || 0)), /* @__PURE__ */ React93.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, "$", centsToDollars(totalCredit || 0))))))) : null);
+};
+
+// src/components/LedgerAccount/LedgerAccountRow.tsx
+import React94, { useContext as useContext12, useEffect as useEffect14, useState as useState22 } from "react";
+import classNames33 from "classnames";
+import { parseISO as parseISO10, format as formatTime8 } from "date-fns";
+var LedgerAccountRow = ({
+  row,
+  index,
+  initialLoad,
+  view
+}) => {
+  const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext12(LedgerAccountsContext);
+  const [showComponent, setShowComponent] = useState22(false);
+  useEffect14(() => {
+    if (initialLoad) {
+      const timeoutId = setTimeout(() => {
+        setShowComponent(true);
+      }, index * 10);
+      return () => clearTimeout(timeoutId);
+    } else {
+      setShowComponent(true);
+    }
+  }, []);
+  if (view === "tablet") {
+    return /* @__PURE__ */ React94.createElement(
+      "tr",
+      {
+        className: classNames33(
+          "Layer__table-row",
+          row.entry_id === selectedEntryId && "Layer__table-row--active",
+          initialLoad && "initial-load",
+          "Layer__table-row--with-show",
+          showComponent ? "show" : "Layer__table-row--anim-starting-state"
+        ),
+        style: { transitionDelay: `${15 * index}ms` },
+        onClick: () => {
+          if (selectedEntryId === row.entry_id) {
+            closeSelectedEntry();
+          } else {
+            setSelectedEntryId(row.entry_id);
+          }
+        }
+      },
+      /* @__PURE__ */ React94.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React94.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React94.createElement(Text, null, row.date && formatTime8(parseISO10(row.date), DATE_FORMAT)), /* @__PURE__ */ React94.createElement(
+        Text,
+        {
+          weight: "bold" /* bold */,
+          className: "Layer__ledger_account-table__journal-id"
+        },
+        "#123"
+      )), /* @__PURE__ */ React94.createElement(Text, null, "Invoice (TBD null)"))),
+      /* @__PURE__ */ React94.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)),
+      /* @__PURE__ */ React94.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)),
+      /* @__PURE__ */ React94.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, "$X,XXX.XX"))
+    );
+  }
+  if (view === "mobile") {
+    return /* @__PURE__ */ React94.createElement(
+      "tr",
+      {
+        className: classNames33(
+          "Layer__table-row",
+          row.entry_id === selectedEntryId && "Layer__table-row--active",
+          initialLoad && "initial-load",
+          "Layer__table-row--with-show",
+          showComponent ? "show" : "Layer__table-row--anim-starting-state"
+        ),
+        style: { transitionDelay: `${15 * index}ms` },
+        onClick: () => {
+          if (selectedEntryId === row.entry_id) {
+            closeSelectedEntry();
+          } else {
+            setSelectedEntryId(row.entry_id);
+          }
+        }
+      },
+      /* @__PURE__ */ React94.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React94.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React94.createElement(Text, null, row.date && formatTime8(parseISO10(row.date), DATE_FORMAT)), /* @__PURE__ */ React94.createElement(
+        Text,
+        {
+          weight: "bold" /* bold */,
+          className: "Layer__ledger_account-table__journal-id"
+        },
+        "#123"
+      )), /* @__PURE__ */ React94.createElement(Text, null, "Invoice (TBD null)"), /* @__PURE__ */ React94.createElement("div", { className: "Layer__ledger_account-table__balances-mobile" }, /* @__PURE__ */ React94.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Debit"), /* @__PURE__ */ React94.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, " ", row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)), /* @__PURE__ */ React94.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Credit"), /* @__PURE__ */ React94.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)), /* @__PURE__ */ React94.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Running balance"), /* @__PURE__ */ React94.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, "$X,XXX.XX")))))
+    );
+  }
+  return /* @__PURE__ */ React94.createElement(
+    "tr",
+    {
+      className: classNames33(
+        "Layer__table-row",
+        row.entry_id === selectedEntryId && "Layer__table-row--active",
+        initialLoad && "initial-load",
+        "Layer__table-row--with-show",
+        showComponent ? "show" : "Layer__table-row--anim-starting-state"
+      ),
+      style: { transitionDelay: `${15 * index}ms` },
+      onClick: () => {
+        if (selectedEntryId === row.entry_id) {
+          closeSelectedEntry();
+        } else {
+          setSelectedEntryId(row.entry_id);
+        }
+      }
+    },
+    /* @__PURE__ */ React94.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__table-cell-content" }, row.date && formatTime8(parseISO10(row.date), DATE_FORMAT))),
+    /* @__PURE__ */ React94.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__table-cell-content" }, "#123")),
+    /* @__PURE__ */ React94.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__table-cell-content" }, "Invoice (TBD null)")),
+    /* @__PURE__ */ React94.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)),
+    /* @__PURE__ */ React94.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)),
+    /* @__PURE__ */ React94.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React94.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, "$X,XXX.XX"))
+  );
+};
+
+// src/components/LedgerAccount/LedgerAccountIndex.tsx
+import classNames34 from "classnames";
+var LedgerAccount = ({
+  containerRef,
+  pageSize = 15,
+  view
+}) => {
+  const [currentPage, setCurrentPage] = useState23(1);
+  const [initialLoad, setInitialLoad] = useState23(true);
+  const { data: accountData } = useContext13(ChartOfAccountsContext);
+  const {
+    data: rawData,
+    error,
+    isLoading,
+    isValidating,
+    accountId,
+    setAccountId,
+    selectedEntryId,
+    closeSelectedEntry,
+    refetch
+  } = useContext13(LedgerAccountsContext);
+  useEffect15(() => {
+    if (!isLoading) {
+      const timeoutLoad = setTimeout(() => {
+        setInitialLoad(false);
+      }, 1e3);
+      return () => clearTimeout(timeoutLoad);
+    }
+  }, [isLoading]);
+  const baseClassName = classNames34(
+    "Layer__ledger-account__index",
+    accountId && "open"
+  );
+  const entry = useMemo10(() => {
+    return flattenAccounts(accountData?.accounts || []).find(
+      (x) => x.id === accountId
+    );
+  }, [accountId]);
+  const data = useMemo10(() => {
+    const firstPageIndex = (currentPage - 1) * pageSize;
+    const lastPageIndex = firstPageIndex + pageSize;
+    return rawData?.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))?.slice(firstPageIndex, lastPageIndex);
+  }, [rawData, currentPage]);
+  const close = () => {
+    setAccountId(void 0);
+    closeSelectedEntry();
+  };
+  return /* @__PURE__ */ React95.createElement(
+    Panel,
+    {
+      sidebar: /* @__PURE__ */ React95.createElement(LedgerAccountEntryDetails, null),
+      sidebarIsOpen: Boolean(selectedEntryId),
+      parentRef: containerRef,
+      className: "Layer__ledger-account__panel"
+    },
+    /* @__PURE__ */ React95.createElement("div", { className: baseClassName }, /* @__PURE__ */ React95.createElement("div", { className: "Layer__ledger-account__header" }, /* @__PURE__ */ React95.createElement(BackButton, { onClick: close }), /* @__PURE__ */ React95.createElement("div", { className: "Layer__ledger-account__title-container" }, /* @__PURE__ */ React95.createElement(
+      Text,
+      {
+        weight: "bold" /* bold */,
+        className: "Layer__ledger-account__title"
+      },
+      entry?.name ?? ""
+    ), /* @__PURE__ */ React95.createElement(
+      Button,
+      {
+        variant: "secondary" /* secondary */,
+        rightIcon: /* @__PURE__ */ React95.createElement(DownloadCloud_default, { size: 12 })
+      },
+      "Download"
+    )), /* @__PURE__ */ React95.createElement("div", { className: "Layer__ledger-account__balance-container" }, /* @__PURE__ */ React95.createElement(
+      Text,
+      {
+        weight: "bold" /* bold */,
+        className: "Layer__ledger-account__balance-label"
+      },
+      "Current balance"
+    ), /* @__PURE__ */ React95.createElement(
+      Text,
+      {
+        weight: "bold" /* bold */,
+        className: "Layer__ledger-account__balance-value"
+      },
+      "$",
+      centsToDollars(entry?.balance || 0)
+    ))), /* @__PURE__ */ React95.createElement("table", { className: "Layer__table Layer__table--hover-effect Layer__ledger-account-table" }, /* @__PURE__ */ React95.createElement("thead", null, /* @__PURE__ */ React95.createElement("tr", null, view !== "desktop" && /* @__PURE__ */ React95.createElement("th", null), view === "desktop" && /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement("th", { className: "Layer__table-header" }, "Date"), /* @__PURE__ */ React95.createElement("th", { className: "Layer__table-header" }, "Journal id #"), /* @__PURE__ */ React95.createElement("th", { className: "Layer__table-header" }, "Source")), view !== "mobile" && /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Debit"), /* @__PURE__ */ React95.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Credit"), /* @__PURE__ */ React95.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Running balance")))), /* @__PURE__ */ React95.createElement("tbody", null, data?.map((x, index) => /* @__PURE__ */ React95.createElement(
+      LedgerAccountRow,
+      {
+        key: x.id,
+        row: x,
+        index,
+        initialLoad,
+        view
+      }
+    )))), data && /* @__PURE__ */ React95.createElement("div", { className: "Layer__ledger-account__pagination" }, /* @__PURE__ */ React95.createElement(
+      Pagination,
+      {
+        currentPage,
+        totalCount: rawData?.length || 0,
+        pageSize,
+        onPageChange: (page) => setCurrentPage(page)
+      }
+    )), error ? /* @__PURE__ */ React95.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React95.createElement(
+      DataState,
+      {
+        status: "failed" /* failed */,
+        title: "Something went wrong",
+        description: "We couldn\u2019t load your data.",
+        onRefresh: () => refetch(),
+        isLoading: isValidating || isLoading
+      }
+    )) : null, (!data || isLoading) && !error ? /* @__PURE__ */ React95.createElement("div", { className: `Layer__ledger-account__loader-container` }, /* @__PURE__ */ React95.createElement(Loader2, null)) : null, !isLoading && !error && data?.length === 0 ? /* @__PURE__ */ React95.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React95.createElement(
+      DataState,
+      {
+        status: "info" /* info */,
+        title: "No records found",
+        onRefresh: () => refetch(),
+        isLoading: isValidating
+      }
+    )) : null)
   );
 };
 
-// src/components/LedgerAccounts/LedgerAccounts.tsx
-var COMPONENT_NAME4 = "ledger-accounts";
+// src/components/ChartOfAccounts/ChartOfAccounts.tsx
+var ChartOfAccountsContext = createContext3(
+  {
+    data: void 0,
+    isLoading: false,
+    isValidating: false,
+    error: void 0,
+    refetch: () => {
+    },
+    create: () => {
+    },
+    form: void 0,
+    sendingForm: false,
+    apiError: void 0,
+    addAccount: () => {
+    },
+    editAccount: () => {
+    },
+    cancelForm: () => {
+    },
+    changeFormData: () => {
+    },
+    submitForm: () => {
+    }
+  }
+);
 var LedgerAccountsContext = createContext3({
   data: void 0,
+  entryData: void 0,
   isLoading: false,
+  isLoadingEntry: false,
   isValidating: false,
+  isValidatingEntry: false,
   error: void 0,
+  errorEntry: void 0,
   refetch: () => {
   },
-  create: () => {
-  },
-  form: void 0,
-  sendingForm: false,
-  apiError: void 0,
-  addAccount: () => {
-  },
-  editAccount: () => {
+  accountId: void 0,
+  setAccountId: () => {
   },
-  cancelForm: () => {
+  selectedEntryId: void 0,
+  setSelectedEntryId: () => {
   },
-  changeFormData: () => {
-  },
-  submitForm: () => {
-  },
-  showARForAccountId: void 0,
-  setShowARForAccountId: () => {
+  closeSelectedEntry: () => {
   }
 });
-var LedgerAccounts = () => {
-  const contextData = useLedgerAccounts();
-  return /* @__PURE__ */ React88.createElement(LedgerAccountsContext.Provider, { value: contextData }, /* @__PURE__ */ React88.createElement(LedgerAccountsContent, null));
+var ChartOfAccounts = (props) => {
+  const chartOfAccountsContextData = useChartOfAccounts();
+  const ledgerAccountsContextData = useLedgerAccounts();
+  return /* @__PURE__ */ React96.createElement(ChartOfAccountsContext.Provider, { value: chartOfAccountsContextData }, /* @__PURE__ */ React96.createElement(LedgerAccountsContext.Provider, { value: ledgerAccountsContextData }, /* @__PURE__ */ React96.createElement(ChartOfAccountsContent, null)));
 };
-var LedgerAccountsContent = () => {
-  const { data, isLoading, addAccount, error, isValidating, refetch } = useContext12(LedgerAccountsContext);
-  let cumulativeIndex = 0;
-  const accountsLength = data?.accounts.length ?? 0;
-  return /* @__PURE__ */ React88.createElement(Container, { name: COMPONENT_NAME4 }, /* @__PURE__ */ React88.createElement("div", { className: `Layer__${COMPONENT_NAME4}__main-panel` }, /* @__PURE__ */ React88.createElement(Header, { className: `Layer__${COMPONENT_NAME4}__header` }, /* @__PURE__ */ React88.createElement(Heading, { className: `Layer__${COMPONENT_NAME4}__title` }, "Chart of Accounts"), /* @__PURE__ */ React88.createElement("div", { className: `Layer__${COMPONENT_NAME4}__actions` }, /* @__PURE__ */ React88.createElement(
-    Button,
-    {
-      variant: "secondary" /* secondary */,
-      disabled: isLoading,
-      rightIcon: /* @__PURE__ */ React88.createElement(DownloadCloud_default, { size: 12 })
-    },
-    "Download"
-  ), /* @__PURE__ */ React88.createElement(Button, { onClick: () => addAccount(), disabled: isLoading }, "Add Account"))), /* @__PURE__ */ React88.createElement("table", { className: `Layer__${COMPONENT_NAME4}__table` }, /* @__PURE__ */ React88.createElement("thead", null, /* @__PURE__ */ React88.createElement("tr", { className: "Layer__table-row--header" }, /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__name" }, "Name"), /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__type" }, "Type"), /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__subtype" }, "Sub-Type"), /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__balance" }, "Balance"), /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__actions" }))), /* @__PURE__ */ React88.createElement("tbody", null, !error && data?.accounts.map((account, idx) => {
-    const currentCumulativeIndex = cumulativeIndex;
-    cumulativeIndex = (account.sub_accounts?.length || 0) + cumulativeIndex + 1;
-    return /* @__PURE__ */ React88.createElement(
-      LedgerAccountsRow,
-      {
-        key: account.id,
-        account,
-        depth: 0,
-        index: idx,
-        cumulativeIndex: currentCumulativeIndex,
-        expanded: true,
-        defaultOpen: true,
-        acountsLength: accountsLength
+var ChartOfAccountsContent = ({ asWidget }) => {
+  const { accountId } = useContext14(LedgerAccountsContext);
+  const [view, setView] = useState24("desktop");
+  const containerRef = useElementSize((_a, _b, { width }) => {
+    if (width) {
+      if (width >= BREAKPOINTS.TABLET && view !== "desktop") {
+        setView("desktop");
+      } else if (width <= BREAKPOINTS.TABLET && width > BREAKPOINTS.MOBILE && view !== "tablet") {
+        setView("tablet");
+      } else if (width < BREAKPOINTS.MOBILE && view !== "mobile") {
+        setView("mobile");
       }
-    );
-  }))), error ? /* @__PURE__ */ React88.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React88.createElement(
-    DataState,
-    {
-      status: "failed" /* failed */,
-      title: "Something went wrong",
-      description: "We couldn\u2019t load your data.",
-      onRefresh: () => refetch(),
-      isLoading: isValidating || isLoading
-    }
-  )) : null, (!data || isLoading) && !error ? /* @__PURE__ */ React88.createElement("div", { className: `Layer__${COMPONENT_NAME4}__loader-container` }, /* @__PURE__ */ React88.createElement(Loader2, null)) : null, !isLoading && !error && data?.accounts.length === 0 ? /* @__PURE__ */ React88.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React88.createElement(
-    DataState,
-    {
-      status: "info" /* info */,
-      title: "Accounts were not found",
-      description: 'New account can be created with "Add Account".',
-      onRefresh: () => refetch(),
-      isLoading: isValidating
     }
-  )) : null), /* @__PURE__ */ React88.createElement(LedgerAccountsSidebar, null), /* @__PURE__ */ React88.createElement(AccountsReceivable, null));
+  });
+  return /* @__PURE__ */ React96.createElement(Container, { name: "chart-of-accounts", ref: containerRef, asWidget }, accountId ? /* @__PURE__ */ React96.createElement(LedgerAccount, { view, containerRef }) : /* @__PURE__ */ React96.createElement(ChartOfAccountsTable, { view, containerRef }));
 };
 
 // src/providers/LayerProvider/LayerProvider.tsx
-import React89, { useReducer, useEffect as useEffect12 } from "react";
+import React97, { useReducer, useEffect as useEffect16 } from "react";
 import { add as add2, isBefore } from "date-fns";
-import useSWR7, { SWRConfig } from "swr";
+import useSWR8, { SWRConfig } from "swr";
 var reducer = (state, action) => {
   switch (action.type) {
     case "LayerContext.setAuth" /* setAuth */:
@@ -7173,7 +8047,7 @@ var LayerProvider = ({
     theme,
     colors
   });
-  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? useSWR7(
+  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? useSWR8(
     businessAccessToken === void 0 && appId !== void 0 && appSecret !== void 0 && isBefore(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
     Layer.authenticate({
       appId,
@@ -7183,7 +8057,7 @@ var LayerProvider = ({
     }),
     defaultSWRConfig
   ) : { data: void 0 };
-  useEffect12(() => {
+  useEffect16(() => {
     if (businessAccessToken) {
       dispatch({
         type: "LayerContext.setAuth" /* setAuth */,
@@ -7208,7 +8082,7 @@ var LayerProvider = ({
       });
     }
   }, [businessAccessToken, auth?.access_token]);
-  useSWR7(
+  useSWR8(
     businessId && auth?.access_token && `categories-${businessId}`,
     Layer.getCategories(apiUrl, auth?.access_token, { params: { businessId } }),
     {
@@ -7227,22 +8101,136 @@ var LayerProvider = ({
     type: "LayerContext.setTheme" /* setTheme */,
     payload: { theme: theme2 }
   });
+  const setLightColor = (color) => {
+    setTheme({
+      ...state.theme ?? {},
+      colors: {
+        ...state.theme?.colors ?? {},
+        light: color
+      }
+    });
+  };
+  const setDarkColor = (color) => {
+    setTheme({
+      ...state.theme ?? {},
+      colors: {
+        ...state.theme?.colors ?? {},
+        dark: color
+      }
+    });
+  };
+  const setColors = (colors2) => {
+    setTheme({
+      ...state.theme ?? {},
+      colors: colors2
+    });
+  };
   const getColor = (shade) => {
     if (colors && shade in colors) {
       return colors[shade];
     }
     return;
   };
-  return /* @__PURE__ */ React89.createElement(SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ React89.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
+  return /* @__PURE__ */ React97.createElement(SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ React97.createElement(
+    LayerContext.Provider,
+    {
+      value: { ...state, setTheme, getColor, setLightColor, setDarkColor, setColors }
+    },
+    children
+  ));
+};
+
+// src/views/AccountingOverview/AccountingOverview.tsx
+import React100 from "react";
+
+// src/components/View/View.tsx
+import React99 from "react";
+
+// src/components/ViewHeader/ViewHeader.tsx
+import React98 from "react";
+var ViewHeader = ({ title, controls }) => {
+  return /* @__PURE__ */ React98.createElement("div", { className: "Layer__view-header" }, /* @__PURE__ */ React98.createElement("div", { className: "Layer__view-header__content" }, /* @__PURE__ */ React98.createElement(Heading, null, title), controls && /* @__PURE__ */ React98.createElement("div", { className: "Layer__view-header__controls" }, controls)));
+};
+
+// src/components/View/View.tsx
+var View6 = ({ title, children, headerControls }) => {
+  const { theme } = useLayerContext();
+  const styles = parseStylesFromThemeConfig(theme);
+  return /* @__PURE__ */ React99.createElement("div", { className: "Layer__view", style: { ...styles } }, /* @__PURE__ */ React99.createElement(ViewHeader, { title, controls: headerControls }), /* @__PURE__ */ React99.createElement("div", { className: "Layer__view-main" }, children));
+};
+
+// src/views/AccountingOverview/AccountingOverview.tsx
+var AccountingOverview = ({
+  title = "Accounting overview"
+}) => {
+  return /* @__PURE__ */ React100.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React100.createElement(View6, { title, headerControls: /* @__PURE__ */ React100.createElement(ProfitAndLoss.DatePicker, null) }, /* @__PURE__ */ React100.createElement(ProfitAndLoss.Summaries, { actionable: false }), /* @__PURE__ */ React100.createElement(
+    Container,
+    {
+      name: "accounting-overview-profit-and-loss",
+      asWidget: true,
+      elevated: true
+    },
+    /* @__PURE__ */ React100.createElement(Header, null, /* @__PURE__ */ React100.createElement(Heading, { size: "secondary" /* secondary */ }, "Profit & Loss")),
+    /* @__PURE__ */ React100.createElement(ProfitAndLoss.Chart, null)
+  ), /* @__PURE__ */ React100.createElement("div", { className: "accounting-overview-profit-and-loss-charts" }, /* @__PURE__ */ React100.createElement(Container, { name: "accounting-overview-profit-and-loss-chart" }, /* @__PURE__ */ React100.createElement(ProfitAndLoss.DetailedCharts, { scope: "revenue", hideClose: true })), /* @__PURE__ */ React100.createElement(Container, { name: "accounting-overview-profit-and-loss-chart" }, /* @__PURE__ */ React100.createElement(ProfitAndLoss.DetailedCharts, { scope: "expenses", hideClose: true })))));
+};
+
+// src/views/BankTransactionsWithLinkedAccounts/BankTransactionsWithLinkedAccounts.tsx
+import React101 from "react";
+var BankTransactionsWithLinkedAccounts = ({
+  title = "Bank transactions"
+}) => {
+  return /* @__PURE__ */ React101.createElement(View6, { title }, /* @__PURE__ */ React101.createElement(LinkedAccounts, { elevated: true }), /* @__PURE__ */ React101.createElement(BankTransactions, { asWidget: true }));
+};
+
+// src/views/Reports/Reports.tsx
+import React102, { useContext as useContext15, useRef as useRef15 } from "react";
+var Reports = ({ title = "Reports" }) => {
+  const containerRef = useRef15(null);
+  return /* @__PURE__ */ React102.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React102.createElement(View6, { title, headerControls: /* @__PURE__ */ React102.createElement(ProfitAndLoss.DatePicker, null) }, /* @__PURE__ */ React102.createElement(
+    Toggle,
+    {
+      name: "reports-tabs",
+      options: [
+        {
+          value: "profitAndLoss",
+          label: "Profit & loss"
+        },
+        {
+          value: "balanceSheet",
+          label: "Balance sheet",
+          disabled: true
+        }
+      ],
+      selected: "profitAndLoss",
+      onChange: () => null
+    }
+  ), /* @__PURE__ */ React102.createElement(Container, { name: "reports", ref: containerRef }, /* @__PURE__ */ React102.createElement(ReportsPanel, { containerRef }))));
+};
+var ReportsPanel = ({ containerRef }) => {
+  const { sidebarScope } = useContext15(ProfitAndLoss.Context);
+  return /* @__PURE__ */ React102.createElement(
+    Panel,
+    {
+      sidebar: /* @__PURE__ */ React102.createElement(ProfitAndLoss.DetailedCharts, null),
+      sidebarIsOpen: Boolean(sidebarScope),
+      parentRef: containerRef
+    },
+    /* @__PURE__ */ React102.createElement(ProfitAndLoss.Table, { asContainer: false })
+  );
 };
 export {
+  AccountingOverview,
   BalanceSheet,
   BankTransactions,
+  BankTransactionsWithLinkedAccounts,
+  ChartOfAccounts,
   Hello,
   LayerProvider,
-  LedgerAccounts,
   LinkedAccounts,
   ProfitAndLoss,
-  ProfitAndLossView
+  ProfitAndLossView,
+  Reports,
+  useLayerContext
 };
 //# sourceMappingURL=index.js.map