@layerfi/components 0.1.10 → 0.1.11

package/dist/index.js

@@ -30,14 +30,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
+  AccountingOverview: () => AccountingOverview,
   BalanceSheet: () => BalanceSheet,
   BankTransactions: () => BankTransactions,
+  BankTransactionsWithLinkedAccounts: () => BankTransactionsWithLinkedAccounts,
+  ChartOfAccounts: () => ChartOfAccounts,
   Hello: () => Hello,
   LayerProvider: () => LayerProvider,
-  LedgerAccounts: () => LedgerAccounts,
   LinkedAccounts: () => LinkedAccounts,
   ProfitAndLoss: () => ProfitAndLoss,
-  ProfitAndLossView: () => ProfitAndLossView
+  ProfitAndLossView: () => ProfitAndLossView,
+  Reports: () => Reports,
+  useLayerContext: () => useLayerContext
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -245,6 +249,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);
@@ -304,13 +309,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(
@@ -319,6 +319,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(
@@ -335,9 +354,15 @@ var Layer = {
   getBalanceSheet,
   getBankTransactions,
   getCategories,
-  getLedgerAccounts,
+  getChartOfAccounts,
+  getLedgerAccountsLines,
+  getLedgerAccountsEntry,
   getProfitAndLoss,
-  getLinkedAccounts
+  getLinkedAccounts,
+  getPlaidLinkToken,
+  exchangePlaidPublicToken,
+  unlinkPlaidAccount,
+  unlinkPlaidItem
 };
 
 // src/hooks/useLayerContext/useLayerContext.tsx
@@ -358,7 +383,10 @@ var LayerContext = (0, import_react.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
@@ -638,6 +666,11 @@ var import_react43 = __toESM(require("react"));
 
 // 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
 var import_swr2 = __toESM(require("swr"));
@@ -758,7 +791,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);
@@ -1559,13 +1594,17 @@ var Badge = ({
   onClick,
   children,
   tooltip,
-  size = "medium" /* MEDIUM */
+  size = "medium" /* MEDIUM */,
+  variant = "default" /* DEFAULT */,
+  hoverable = false
 }) => {
   const baseProps = {
     className: (0, import_classnames7.default)(
       "Layer__badge",
+      hoverable && !tooltip ? "Layer__badge--with-hover" : "",
       onClick || tooltip ? "Layer__badge--clickable" : "",
-      `Layer__badge--${size}`
+      `Layer__badge--${size}`,
+      `Layer__badge--${variant}`
     ),
     onClick,
     children
@@ -2197,7 +2236,8 @@ var Select2 = ({
   classNamePrefix = "Layer__select",
   value,
   onChange,
-  disabled
+  disabled,
+  placeholder
 }) => {
   return /* @__PURE__ */ import_react26.default.createElement(
     import_react_select2.default,
@@ -2205,6 +2245,7 @@ var Select2 = ({
       name,
       className: `Layer__select ${className ?? ""}`,
       classNamePrefix,
+      placeholder: placeholder ?? "Select...",
       options,
       value,
       onChange: (newValue) => newValue && onChange(newValue),
@@ -2407,6 +2448,7 @@ var Toggle = ({
       checked: selectedValue === option.value,
       onChange: handleChange,
       disabled: option.disabled ?? false,
+      disabledMessage: option.disabledMessage,
       index
     }
   )), /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__toggle__thumb", style: { ...thumbPos } }));
@@ -2420,6 +2462,7 @@ var ToggleOption = ({
   size,
   leftIcon,
   disabled,
+  disabledMessage = "Disabled",
   index
 }) => {
   if (disabled) {
@@ -2434,7 +2477,7 @@ var ToggleOption = ({
         disabled: disabled ?? false,
         "data-idx": index
       }
-    ), /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ import_react30.default.createElement("span", null, label)))), /* @__PURE__ */ import_react30.default.createElement(TooltipContent, { className: "Layer__tooltip" }, "We could not find matching transactions"));
+    ), /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ import_react30.default.createElement("span", null, label)))), /* @__PURE__ */ import_react30.default.createElement(TooltipContent, { className: "Layer__tooltip" }, disabledMessage));
   }
   return /* @__PURE__ */ import_react30.default.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ import_react30.default.createElement(
     "input",
@@ -2835,7 +2878,8 @@ var ExpandedBankTransactionRow = (0, import_react32.forwardRef)(
             {
               value: "match",
               label: "Match",
-              disabled: !hasMatch(bankTransaction)
+              disabled: !hasMatch(bankTransaction),
+              disabledMessage: "We could not find matching transactions"
             }
           ],
           selected: purpose,
@@ -3699,11 +3743,12 @@ var hslToHex = (hsl) => {
 // src/components/Container/Container.tsx
 var import_classnames20 = __toESM(require("classnames"));
 var Container = (0, import_react37.forwardRef)(
-  ({ name, className, children, asWidget }, ref) => {
+  ({ name, className, children, asWidget, elevated = false }, ref) => {
     const baseClassName = (0, import_classnames20.default)(
       "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();
@@ -4035,7 +4080,14 @@ var BankTransactions = ({
         className: "Layer__bank-transactions__header",
         style: { top: shiftStickyHeader }
       },
-      /* @__PURE__ */ import_react43.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
+      /* @__PURE__ */ import_react43.default.createElement(
+        Heading,
+        {
+          className: "Layer__bank-transactions__title",
+          size: asWidget ? "secondary" /* secondary */ : "secondary" /* secondary */
+        },
+        "Transactions"
+      ),
       !categorizedOnly && /* @__PURE__ */ import_react43.default.createElement(
         Toggle,
         {
@@ -4133,15 +4185,20 @@ var Hello = ({ user }) => {
 };
 
 // src/components/LinkedAccounts/LinkedAccounts.tsx
-var import_react49 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 
 // src/hooks/useLinkedAccounts/useLinkedAccounts.ts
-var import_swr4 = __toESM(require("swr"));
-var MOCK_DATA = [
+var import_react45 = require("react");
+var import_react_plaid_link = require("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",
@@ -4150,13 +4207,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",
@@ -4165,13 +4228,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",
@@ -4180,13 +4249,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",
@@ -4195,14 +4270,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
+var import_swr4 = __toESM(require("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] = (0, import_react45.useState)(null);
   const {
-    // data: responseData,
+    data: responseData,
     isLoading,
     isValidating,
     error: responseError,
@@ -4213,27 +4299,80 @@ var useLinkedAccounts = () => {
       params: { businessId }
     })
   );
-  const responseData = { data: MOCK_DATA, meta: {}, error: void 0 };
-  const addAccount = () => {
-    console.log("add account...");
+  (0, import_react45.useEffect)(() => {
+    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 } = (0, import_react_plaid_link.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
   };
@@ -4282,12 +4421,12 @@ var PlusIcon = ({ size = 14, ...props }) => /* @__PURE__ */ React58.createElemen
 var PlusIcon_default = PlusIcon;
 
 // src/components/LinkedAccountOptions/LinkedAccountOptions.tsx
-var import_react47 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 
 // src/icons/MoreVertical.tsx
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var MoreVertical = ({ size = 18, ...props }) => {
-  return /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     "svg",
     {
       viewBox: "0 0 16 14",
@@ -4297,7 +4436,7 @@ var MoreVertical = ({ size = 18, ...props }) => {
       width: size,
       height: size
     },
-    /* @__PURE__ */ import_react45.default.createElement(
+    /* @__PURE__ */ import_react46.default.createElement(
       "path",
       {
         d: "M8.66659 8C8.66659 7.63181 8.36811 7.33333 7.99992 7.33333C7.63173 7.33333 7.33325 7.63181 7.33325 8C7.33325 8.36819 7.63173 8.66667 7.99992 8.66667C8.36811 8.66667 8.66659 8.36819 8.66659 8Z",
@@ -4307,7 +4446,7 @@ var MoreVertical = ({ size = 18, ...props }) => {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ import_react45.default.createElement(
+    /* @__PURE__ */ import_react46.default.createElement(
       "path",
       {
         d: "M8.66659 3.33333C8.66659 2.96514 8.36811 2.66667 7.99992 2.66667C7.63173 2.66667 7.33325 2.96514 7.33325 3.33333C7.33325 3.70152 7.63173 4 7.99992 4C8.36811 4 8.66659 3.70152 8.66659 3.33333Z",
@@ -4317,7 +4456,7 @@ var MoreVertical = ({ size = 18, ...props }) => {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ import_react45.default.createElement(
+    /* @__PURE__ */ import_react46.default.createElement(
       "path",
       {
         d: "M8.66659 12.6667C8.66659 12.2985 8.36811 12 7.99992 12C7.63173 12 7.33325 12.2985 7.33325 12.6667C7.33325 13.0349 7.63173 13.3333 7.99992 13.3333C8.36811 13.3333 8.66659 13.0349 8.66659 12.6667Z",
@@ -4332,16 +4471,21 @@ var MoreVertical = ({ size = 18, ...props }) => {
 var MoreVertical_default = MoreVertical;
 
 // src/components/HoverMenu/HoverMenu.tsx
-var import_react46 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var import_classnames23 = __toESM(require("classnames"));
-var HoverMenu = ({ children, config }) => {
-  const [openMenu, setOpenMenu] = (0, import_react46.useState)(false);
-  const hoverMenuRef = (0, import_react46.useRef)(null);
+var HoverMenu = ({
+  children,
+  config,
+  plaidItemId,
+  accountId
+}) => {
+  const [openMenu, setOpenMenu] = (0, import_react47.useState)(false);
+  const hoverMenuRef = (0, import_react47.useRef)(null);
   const hoverMenuClassName = (0, import_classnames23.default)(
     "Layer__hover-menu",
-    openMenu && "--open"
+    openMenu && "Layer__hover-menu--open"
   );
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     function handleClickOutside(event) {
       if (hoverMenuRef.current && !hoverMenuRef.current.contains(event.target)) {
         setOpenMenu(false);
@@ -4352,14 +4496,14 @@ var HoverMenu = ({ children, config }) => {
       document.removeEventListener("click", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(
     "div",
     {
       className: hoverMenuClassName,
       ref: hoverMenuRef,
       onMouseLeave: () => setOpenMenu(false)
     },
-    /* @__PURE__ */ import_react46.default.createElement(
+    /* @__PURE__ */ import_react47.default.createElement(
       "div",
       {
         className: "Layer__hover-menu__children",
@@ -4369,17 +4513,17 @@ var HoverMenu = ({ children, config }) => {
       },
       children
     ),
-    /* @__PURE__ */ import_react46.default.createElement("div", { className: "Layer__hover-menu__list-wrapper" }, /* @__PURE__ */ import_react46.default.createElement("ul", { className: "Layer__hover-menu__list" }, config && config.length > 0 && config.map((item) => /* @__PURE__ */ import_react46.default.createElement(
+    /* @__PURE__ */ import_react47.default.createElement("div", { className: "Layer__hover-menu__list-wrapper" }, /* @__PURE__ */ import_react47.default.createElement("ul", { className: "Layer__hover-menu__list" }, config && config.length > 0 && config.map((item) => /* @__PURE__ */ import_react47.default.createElement(
       "li",
       {
         key: `hover-menu-${item.name}`,
         className: "Layer__hover-menu__list-item"
       },
-      /* @__PURE__ */ import_react46.default.createElement(
+      /* @__PURE__ */ import_react47.default.createElement(
         "button",
         {
           className: "Layer__hover-menu__list-item-button",
-          onClick: () => item.action()
+          onClick: () => item.action(plaidItemId, accountId)
         },
         item.name
       )
@@ -4390,13 +4534,23 @@ var HoverMenu = ({ children, config }) => {
 // src/components/LinkedAccountOptions/LinkedAccountOptions.tsx
 var LinkedAccountOptions = ({
   children,
-  config
+  config,
+  accountId,
+  plaidItemId
 }) => {
-  return /* @__PURE__ */ import_react47.default.createElement("div", { className: "Layer__linked-accounts__options" }, /* @__PURE__ */ import_react47.default.createElement("div", { className: "Layer__linked-accounts__options-overlay" }, /* @__PURE__ */ import_react47.default.createElement("div", { className: "Layer__linked-accounts__options-overlay-button" }, /* @__PURE__ */ import_react47.default.createElement(HoverMenu, { config }, /* @__PURE__ */ import_react47.default.createElement(MoreVertical_default, { size: 16 })))), children);
+  return /* @__PURE__ */ import_react48.default.createElement("div", { className: "Layer__linked-accounts__options" }, /* @__PURE__ */ import_react48.default.createElement("div", { className: "Layer__linked-accounts__options-overlay" }, /* @__PURE__ */ import_react48.default.createElement("div", { className: "Layer__linked-accounts__options-overlay-button" }, /* @__PURE__ */ import_react48.default.createElement(
+    HoverMenu,
+    {
+      config,
+      accountId,
+      plaidItemId
+    },
+    /* @__PURE__ */ import_react48.default.createElement(MoreVertical_default, { size: 16 })
+  ))), children);
 };
 
 // src/components/LinkedAccountThumb/LinkedAccountThumb.tsx
-var import_react48 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 
 // src/icons/InstitutionIcon.tsx
 var React62 = __toESM(require("react"));
@@ -4691,7 +4845,7 @@ var InstitutionIcon_default = InstitutionIcon;
 
 // src/components/LinkedAccountThumb/LinkedAccountThumb.tsx
 var import_classnames24 = __toESM(require("classnames"));
-var AccountNumber = ({ accountNumber }) => /* @__PURE__ */ import_react48.default.createElement("div", { className: "account-number" }, /* @__PURE__ */ import_react48.default.createElement(Text, { size: "sm" }, "\u2022\u2022\u2022", accountNumber));
+var AccountNumber = ({ accountNumber }) => /* @__PURE__ */ import_react49.default.createElement("div", { className: "account-number" }, /* @__PURE__ */ import_react49.default.createElement(Text, { size: "sm" }, "\u2022\u2022\u2022", accountNumber));
 var LinkedAccountThumb = ({
   account,
   asWidget
@@ -4700,15 +4854,20 @@ var LinkedAccountThumb = ({
     "Layer__linked-account-thumb",
     asWidget && "--as-widget"
   );
-  return /* @__PURE__ */ import_react48.default.createElement("div", { className: linkedAccountThumbClassName }, /* @__PURE__ */ import_react48.default.createElement("div", { className: "topbar" }, /* @__PURE__ */ import_react48.default.createElement("div", { className: "topbar-details" }, /* @__PURE__ */ import_react48.default.createElement(Text, { as: "span", className: "account-name" }, account.external_account_name), !asWidget && /* @__PURE__ */ import_react48.default.createElement(AccountNumber, { accountNumber: account.external_account_number }), /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement("div", { className: linkedAccountThumbClassName }, /* @__PURE__ */ import_react49.default.createElement("div", { className: "topbar" }, /* @__PURE__ */ import_react49.default.createElement("div", { className: "topbar-details" }, /* @__PURE__ */ import_react49.default.createElement(Text, { as: "span", className: "account-name" }, account.external_account_name), !asWidget && /* @__PURE__ */ import_react49.default.createElement(
+    AccountNumber,
+    {
+      accountNumber: "TODO"
+    }
+  ), /* @__PURE__ */ import_react49.default.createElement(
     Text,
     {
       as: "span",
       className: "account-institution",
       size: "sm"
     },
-    account.institution
-  )), /* @__PURE__ */ import_react48.default.createElement("div", { className: "topbar-logo" }, !account.institutionLogo && /* @__PURE__ */ import_react48.default.createElement(InstitutionIcon_default, null))), !asWidget && /* @__PURE__ */ import_react48.default.createElement("div", { className: "middlebar" }, /* @__PURE__ */ import_react48.default.createElement(
+    account.institution?.name
+  )), /* @__PURE__ */ import_react49.default.createElement("div", { className: "topbar-logo" }, !account.institution?.logo && /* @__PURE__ */ import_react49.default.createElement(InstitutionIcon_default, null))), !asWidget && /* @__PURE__ */ import_react49.default.createElement("div", { className: "middlebar" }, /* @__PURE__ */ import_react49.default.createElement(
     Text,
     {
       as: "span",
@@ -4716,7 +4875,12 @@ var LinkedAccountThumb = ({
       size: "sm"
     },
     "Bank balance"
-  ), /* @__PURE__ */ import_react48.default.createElement(Text, { as: "span", className: "account-balance" }, "$", centsToDollars(account.latest_balance_timestamp.balance))), /* @__PURE__ */ import_react48.default.createElement("div", { className: "bottombar" }, asWidget ? /* @__PURE__ */ import_react48.default.createElement(AccountNumber, { accountNumber: account.external_account_number }) : /* @__PURE__ */ import_react48.default.createElement(
+  ), /* @__PURE__ */ import_react49.default.createElement(Text, { as: "span", className: "account-balance" }, "$", centsToDollars(account.latest_balance_timestamp.balance))), /* @__PURE__ */ import_react49.default.createElement("div", { className: "bottombar" }, asWidget ? /* @__PURE__ */ import_react49.default.createElement(
+    AccountNumber,
+    {
+      accountNumber: "TODO"
+    }
+  ) : /* @__PURE__ */ import_react49.default.createElement(
     Text,
     {
       as: "span",
@@ -4724,20 +4888,20 @@ var LinkedAccountThumb = ({
       size: "sm"
     },
     "General ledger balance"
-  ), /* @__PURE__ */ import_react48.default.createElement(Text, { as: "span", className: "account-balance" }, "$", centsToDollars(account.current_ledger_balance))));
+  ), /* @__PURE__ */ import_react49.default.createElement(Text, { as: "span", className: "account-balance" }, "$", centsToDollars(account.current_ledger_balance))));
 };
 
 // src/components/LinkedAccounts/LinkedAccounts.tsx
 var import_classnames25 = __toESM(require("classnames"));
 var COMPONENT_NAME2 = "linked-accounts";
-var LinkedAccounts = ({ asWidget }) => {
+var LinkedAccounts = ({ asWidget, elevated }) => {
   const {
     data,
     isLoading,
     error,
     isValidating,
-    refetch,
-    addAccount,
+    refetchAccounts,
+    addConnection,
     unlinkAccount,
     renewLinkAccount
   } = useLinkedAccounts();
@@ -4749,47 +4913,49 @@ var LinkedAccounts = ({ asWidget }) => {
     "Layer__linked-accounts__new-account",
     asWidget && "--as-widget"
   );
-  return /* @__PURE__ */ import_react49.default.createElement(Container, { name: COMPONENT_NAME2 }, /* @__PURE__ */ import_react49.default.createElement(Header, { className: "Layer__linked-accounts__header" }, /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(Container, { name: COMPONENT_NAME2, elevated }, /* @__PURE__ */ import_react50.default.createElement(Header, { className: "Layer__linked-accounts__header" }, /* @__PURE__ */ import_react50.default.createElement(
     Heading,
     {
       className: "Layer__linked-accounts__title",
       size: "secondary" /* secondary */
     },
     "Linked Accounts"
-  )), isLoading && /* @__PURE__ */ import_react49.default.createElement("div", { className: "Layer__linked-accounts__loader-container" }, /* @__PURE__ */ import_react49.default.createElement(Loader2, null)), error && !isLoading ? /* @__PURE__ */ import_react49.default.createElement(
+  )), isLoading && /* @__PURE__ */ import_react50.default.createElement("div", { className: "Layer__linked-accounts__loader-container" }, /* @__PURE__ */ import_react50.default.createElement(Loader2, null)), error && !isLoading ? /* @__PURE__ */ import_react50.default.createElement(
     DataState,
     {
       status: "failed" /* failed */,
       title: "Something went wrong",
       description: "We couldn\u2019t load your data.",
-      onRefresh: () => refetch(),
+      onRefresh: () => refetchAccounts(),
       isLoading: isValidating
     }
-  ) : null, !error && !isLoading ? /* @__PURE__ */ import_react49.default.createElement("div", { className: "Layer__linked-accounts__list" }, data?.map((account, index) => /* @__PURE__ */ import_react49.default.createElement(
+  ) : null, !error && !isLoading ? /* @__PURE__ */ import_react50.default.createElement("div", { className: "Layer__linked-accounts__list" }, data?.map((account, index) => /* @__PURE__ */ import_react50.default.createElement(
     LinkedAccountOptions,
     {
       key: `linked-acc-${index}`,
-      config: linkedAccountOptionsConfig
+      config: linkedAccountOptionsConfig,
+      accountId: account.external_account_external_id,
+      plaidItemId: "TODO"
     },
-    /* @__PURE__ */ import_react49.default.createElement(LinkedAccountThumb, { account, asWidget })
-  )), /* @__PURE__ */ import_react49.default.createElement(
+    /* @__PURE__ */ import_react50.default.createElement(LinkedAccountThumb, { account, asWidget })
+  )), /* @__PURE__ */ import_react50.default.createElement(
     "div",
     {
       role: "button",
       tabIndex: 0,
       "aria-label": "new-account",
-      onClick: () => addAccount(),
+      onClick: () => addConnection("PLAID"),
       className: linkedAccountsNewAccountClassName
     },
-    /* @__PURE__ */ import_react49.default.createElement("div", { className: "Layer__linked-accounts__new-account-label" }, /* @__PURE__ */ import_react49.default.createElement(PlusIcon_default, { size: 15 }), /* @__PURE__ */ import_react49.default.createElement(Text, { as: "span", size: "sm" }, "New account"))
+    /* @__PURE__ */ import_react50.default.createElement("div", { className: "Layer__linked-accounts__new-account-label" }, /* @__PURE__ */ import_react50.default.createElement(PlusIcon_default, { size: 15 }), /* @__PURE__ */ import_react50.default.createElement(Text, { as: "span", size: "sm" }, "Add Account"))
   )) : null);
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-var import_react59 = __toESM(require("react"));
+var import_react64 = __toESM(require("react"));
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 
 // src/utils/profitAndLossUtils.ts
 var doesLineItemQualifies = (item) => {
@@ -4857,17 +5023,17 @@ var useProfitAndLoss = ({
   endDate: (0, import_date_fns10.endOfMonth)(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [startDate, setStartDate] = (0, import_react50.useState)(
+  const [startDate, setStartDate] = (0, import_react51.useState)(
     initialStartDate || (0, import_date_fns10.startOfMonth)(Date.now())
   );
-  const [endDate, setEndDate] = (0, import_react50.useState)(
+  const [endDate, setEndDate] = (0, import_react51.useState)(
     initialEndDate || (0, import_date_fns10.endOfMonth)(Date.now())
   );
-  const [filters, setFilters] = (0, import_react50.useState)({
+  const [filters, setFilters] = (0, import_react51.useState)({
     expenses: void 0,
     revenue: void 0
   });
-  const [sidebarScope, setSidebarScope] = (0, import_react50.useState)(void 0);
+  const [sidebarScope, setSidebarScope] = (0, import_react51.useState)(void 0);
   const {
     data: rawData,
     isLoading,
@@ -4890,13 +5056,50 @@ var useProfitAndLoss = ({
     })
   );
   const { data, error } = rawData || {};
-  const { filteredData, filteredTotal } = (0, import_react50.useMemo)(() => {
+  const { filteredDataRevenue, filteredTotalRevenue } = (0, import_react51.useMemo)(() => {
+    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 } = (0, import_react51.useMemo)(() => {
     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
@@ -4905,19 +5108,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;
@@ -4925,7 +5128,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,
@@ -4958,8 +5161,10 @@ var useProfitAndLoss = ({
   };
   return {
     data,
-    filteredData,
-    filteredTotal,
+    filteredDataRevenue,
+    filteredTotalRevenue,
+    filteredDataExpenses,
+    filteredTotalExpenses,
     isLoading,
     isValidating,
     error: error || rawError,
@@ -4975,7 +5180,7 @@ var useProfitAndLoss = ({
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 
 // src/utils/format.ts
 var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
@@ -5011,9 +5216,12 @@ var formatPercent = (value, options) => {
     ...options
   });
 };
+var humanizeEnum = (text) => {
+  return capitalizeFirstLetter(text.replace(/_/gi, " ").toLowerCase());
+};
 
 // src/components/ProfitAndLossChart/Indicator.tsx
-var import_react51 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
 var Indicator = ({
   viewBox = {},
@@ -5030,11 +5238,11 @@ var Indicator = ({
   const multiplier = width > 12 ? 1.2 : 1;
   const xOffset = (boxWidth * multiplier - boxWidth) / 2;
   const borderRadius = width > 16 ? 8 : width / 2;
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     setAnimateFrom(animateTo);
   }, [animateTo]);
   const actualX = animateFrom === -1 ? animateTo : animateFrom;
-  return /* @__PURE__ */ import_react51.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(
     "rect",
     {
       className: "Layer__profit-and-loss-chart__selection-indicator",
@@ -5058,7 +5266,7 @@ var barGap = 4;
 var barSize = 20;
 var ProfitAndLossChart = () => {
   const { getColor } = useLayerContext();
-  const { changeDateRange, dateRange } = (0, import_react52.useContext)(ProfitAndLoss.Context);
+  const { changeDateRange, dateRange } = (0, import_react53.useContext)(ProfitAndLoss.Context);
   const thisMonth = (0, import_date_fns11.startOfMonth)(Date.now());
   const startSelectionMonth = dateRange.startDate.getMonth();
   const endSelectionMonth = dateRange.endDate.getMonth();
@@ -5161,13 +5369,13 @@ var ProfitAndLossChart = () => {
     if (active && payload && payload.length) {
       const netProfit = payload[0].payload.netProfit ?? 0;
       const netProfitClass = netProfit > 0 ? "positive" : netProfit < 0 ? "negative" : "";
-      return /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ import_react52.default.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ import_react52.default.createElement("li", null, /* @__PURE__ */ import_react52.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ import_react52.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ import_react52.default.createElement("li", null, /* @__PURE__ */ import_react52.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ import_react52.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0)))), /* @__PURE__ */ import_react52.default.createElement("li", null, /* @__PURE__ */ import_react52.default.createElement("label", { className: "Layer__chart__tooltip-label" }, "Net Profit"), /* @__PURE__ */ import_react52.default.createElement("span", { className: `Layer__chart__tooltip-value ${netProfitClass}` }, "$", centsToDollars(netProfit)))));
+      return /* @__PURE__ */ import_react53.default.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ import_react53.default.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ import_react53.default.createElement("li", null, /* @__PURE__ */ import_react53.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ import_react53.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ import_react53.default.createElement("li", null, /* @__PURE__ */ import_react53.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ import_react53.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0)))), /* @__PURE__ */ import_react53.default.createElement("li", null, /* @__PURE__ */ import_react53.default.createElement("label", { className: "Layer__chart__tooltip-label" }, "Net Profit"), /* @__PURE__ */ import_react53.default.createElement("span", { className: `Layer__chart__tooltip-value ${netProfitClass}` }, "$", centsToDollars(netProfit)))));
     }
     return null;
   };
   const CustomizedCursor = (props) => {
     const { x, width, height } = props;
-    return /* @__PURE__ */ import_react52.default.createElement(
+    return /* @__PURE__ */ import_react53.default.createElement(
       import_recharts.Rectangle,
       {
         fill: getColor(900)?.hex ?? "#333",
@@ -5181,7 +5389,7 @@ var ProfitAndLossChart = () => {
       }
     );
   };
-  const data = (0, import_react52.useMemo)(
+  const data = (0, import_react53.useMemo)(
     () => monthData.map(summarizePnL),
     [
       startSelectionMonth,
@@ -5189,8 +5397,8 @@ var ProfitAndLossChart = () => {
       ...monthData.map((m) => m?.net_profit)
     ]
   );
-  const [animateFrom, setAnimateFrom] = (0, import_react52.useState)(-1);
-  return /* @__PURE__ */ import_react52.default.createElement(
+  const [animateFrom, setAnimateFrom] = (0, import_react53.useState)(-1);
+  return /* @__PURE__ */ import_react53.default.createElement(
     import_recharts.ResponsiveContainer,
     {
       className: "Layer__chart-container",
@@ -5198,7 +5406,7 @@ var ProfitAndLossChart = () => {
       height: "100%",
       minHeight: 200
     },
-    /* @__PURE__ */ import_react52.default.createElement(
+    /* @__PURE__ */ import_react53.default.createElement(
       import_recharts.BarChart,
       {
         margin: { left: 12, right: 12, bottom: 12 },
@@ -5207,17 +5415,17 @@ var ProfitAndLossChart = () => {
         barGap,
         className: "Layer__profit-and-loss-chart"
       },
-      /* @__PURE__ */ import_react52.default.createElement(
+      /* @__PURE__ */ import_react53.default.createElement(
         import_recharts.Tooltip,
         {
           wrapperClassName: "Layer__chart__tooltip-wrapper",
-          content: /* @__PURE__ */ import_react52.default.createElement(CustomTooltip, null),
-          cursor: /* @__PURE__ */ import_react52.default.createElement(CustomizedCursor, null),
+          content: /* @__PURE__ */ import_react53.default.createElement(CustomTooltip, null),
+          cursor: /* @__PURE__ */ import_react53.default.createElement(CustomizedCursor, null),
           animationDuration: 100,
           animationEasing: "ease-out"
         }
       ),
-      /* @__PURE__ */ import_react52.default.createElement(
+      /* @__PURE__ */ import_react53.default.createElement(
         import_recharts.CartesianGrid,
         {
           vertical: false,
@@ -5225,7 +5433,7 @@ var ProfitAndLossChart = () => {
           strokeDasharray: "5 5"
         }
       ),
-      /* @__PURE__ */ import_react52.default.createElement(
+      /* @__PURE__ */ import_react53.default.createElement(
         import_recharts.Legend,
         {
           verticalAlign: "top",
@@ -5245,8 +5453,8 @@ var ProfitAndLossChart = () => {
           ]
         }
       ),
-      /* @__PURE__ */ import_react52.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
-      /* @__PURE__ */ import_react52.default.createElement(
+      /* @__PURE__ */ import_react53.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
+      /* @__PURE__ */ import_react53.default.createElement(
         import_recharts.Bar,
         {
           dataKey: "revenue",
@@ -5255,10 +5463,10 @@ var ProfitAndLossChart = () => {
           radius: [2, 2, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--income"
         },
-        /* @__PURE__ */ import_react52.default.createElement(
+        /* @__PURE__ */ import_react53.default.createElement(
           import_recharts.LabelList,
           {
-            content: /* @__PURE__ */ import_react52.default.createElement(
+            content: /* @__PURE__ */ import_react53.default.createElement(
               Indicator,
               {
                 animateFrom,
@@ -5267,7 +5475,7 @@ var ProfitAndLossChart = () => {
             )
           }
         ),
-        data.map((entry) => /* @__PURE__ */ import_react52.default.createElement(
+        data.map((entry) => /* @__PURE__ */ import_react53.default.createElement(
           import_recharts.Cell,
           {
             key: entry.name,
@@ -5275,7 +5483,7 @@ var ProfitAndLossChart = () => {
           }
         ))
       ),
-      /* @__PURE__ */ import_react52.default.createElement(
+      /* @__PURE__ */ import_react53.default.createElement(
         import_recharts.Bar,
         {
           dataKey: "expenses",
@@ -5284,7 +5492,7 @@ var ProfitAndLossChart = () => {
           radius: [2, 2, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--expenses"
         },
-        data.map((entry) => /* @__PURE__ */ import_react52.default.createElement(
+        data.map((entry) => /* @__PURE__ */ import_react53.default.createElement(
           import_recharts.Cell,
           {
             key: entry.name,
@@ -5297,19 +5505,19 @@ var ProfitAndLossChart = () => {
 };
 
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
-var import_react53 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 var import_date_fns12 = require("date-fns");
 var ProfitAndLossDatePicker = () => {
-  const { changeDateRange, dateRange } = (0, import_react53.useContext)(ProfitAndLoss.Context);
-  const [isAnimating, setIsAnimating] = (0, import_react53.useState)(false);
-  const [localDate, setLocalDate] = (0, import_react53.useState)(dateRange.startDate);
-  const [nextOpacity, setNextOpacity] = (0, import_react53.useState)(0);
-  const [currentOpacity, setCurrentOpacity] = (0, import_react53.useState)(1);
-  const [transformStyle, setTransformStyle] = (0, import_react53.useState)({
+  const { changeDateRange, dateRange } = (0, import_react54.useContext)(ProfitAndLoss.Context);
+  const [isAnimating, setIsAnimating] = (0, import_react54.useState)(false);
+  const [localDate, setLocalDate] = (0, import_react54.useState)(dateRange.startDate);
+  const [nextOpacity, setNextOpacity] = (0, import_react54.useState)(0);
+  const [currentOpacity, setCurrentOpacity] = (0, import_react54.useState)(1);
+  const [transformStyle, setTransformStyle] = (0, import_react54.useState)({
     transform: "translateX(33%)",
     transition: "ease"
   });
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (dateRange.startDate !== localDate && !isAnimating) {
       setLocalDate(dateRange.startDate);
       setTransformStyle({ transform: "translateX(33%)", transition: "none" });
@@ -5347,19 +5555,19 @@ var ProfitAndLossDatePicker = () => {
   const currentLabel = (0, import_date_fns12.format)(localDate, "LLLL, y");
   const prevLabel = (0, import_date_fns12.format)((0, import_date_fns12.add)(localDate, { months: -1 }), "LLLL, y");
   const nextLabel = (0, import_date_fns12.format)((0, import_date_fns12.add)(localDate, { months: 1 }), "LLLL, y");
-  return /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement(
     "div",
     {
       className: "Layer__profit-and-loss-date-picker"
     },
-    /* @__PURE__ */ import_react53.default.createElement("div", { className: "Layer__profit-and-loss-date-picker__labels-container", style: transformStyle }, /* @__PURE__ */ import_react53.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, prevLabel), /* @__PURE__ */ import_react53.default.createElement(
+    /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-date-picker__labels-container", style: transformStyle }, /* @__PURE__ */ import_react54.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, prevLabel), /* @__PURE__ */ import_react54.default.createElement(
       "span",
       {
         className: "Layer__profit-and-loss-date-picker__label",
         style: { opacity: currentOpacity }
       },
       currentLabel
-    ), /* @__PURE__ */ import_react53.default.createElement(
+    ), /* @__PURE__ */ import_react54.default.createElement(
       "span",
       {
         className: "Layer__profit-and-loss-date-picker__label",
@@ -5367,7 +5575,7 @@ var ProfitAndLossDatePicker = () => {
       },
       nextLabel
     )),
-    /* @__PURE__ */ import_react53.default.createElement(
+    /* @__PURE__ */ import_react54.default.createElement(
       "button",
       {
         "aria-label": "View Previous Month",
@@ -5375,7 +5583,7 @@ var ProfitAndLossDatePicker = () => {
         onClick: () => change(-1),
         disabled: isAnimating
       },
-      /* @__PURE__ */ import_react53.default.createElement(
+      /* @__PURE__ */ import_react54.default.createElement(
         ChevronLeft_default,
         {
           className: "Layer__profit-and-loss-date-picker__button-icon",
@@ -5383,7 +5591,7 @@ var ProfitAndLossDatePicker = () => {
         }
       )
     ),
-    /* @__PURE__ */ import_react53.default.createElement(
+    /* @__PURE__ */ import_react54.default.createElement(
       "button",
       {
         "aria-label": "View Next Month",
@@ -5391,7 +5599,7 @@ var ProfitAndLossDatePicker = () => {
         onClick: () => change(1),
         disabled: isAnimating
       },
-      /* @__PURE__ */ import_react53.default.createElement(
+      /* @__PURE__ */ import_react54.default.createElement(
         ChevronRight_default,
         {
           className: "Layer__profit-and-loss-date-picker__button-icon",
@@ -5399,29 +5607,47 @@ var ProfitAndLossDatePicker = () => {
         }
       )
     ),
-    /* @__PURE__ */ import_react53.default.createElement("div", { className: "Layer__profit-and-loss-date-picker__effect-blur" })
+    /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-date-picker__effect-blur" })
   );
 };
 
-// src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-var import_react56 = __toESM(require("react"));
+// src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
+var import_react58 = __toESM(require("react"));
 
-// src/components/SkeletonLoader/SkeletonLoader.tsx
-var import_react54 = __toESM(require("react"));
-var import_classnames26 = __toESM(require("classnames"));
-var SkeletonLoader = ({
-  height,
-  width,
-  className
-}) => {
-  const baseClassName = (0, import_classnames26.default)(
-    "Layer__skeleton-loader Layer__anim--skeleton-loading",
-    className
-  );
-  return /* @__PURE__ */ import_react54.default.createElement("div", { className: baseClassName, style: { width, height } });
-};
+// src/icons/X.tsx
+var React68 = __toESM(require("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
+// src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
 var import_react55 = __toESM(require("react"));
 
 // src/config/charts.ts
@@ -5510,915 +5736,1103 @@ var DEFAULT_CHART_COLORS = [
   }
 ];
 
-// src/components/ProfitAndLossSummaries/MiniChart.tsx
+// src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
 var import_recharts2 = require("recharts");
-var MiniChart = ({ data }) => {
-  return /* @__PURE__ */ import_react55.default.createElement(import_recharts2.PieChart, { width: 48, height: 48, className: "mini-chart" }, /* @__PURE__ */ import_react55.default.createElement(
+var DetailedChart = ({
+  filteredData,
+  filteredTotal,
+  hoveredItem,
+  setHoveredItem,
+  sidebarScope,
+  date,
+  isLoading
+}) => {
+  const chartData = (0, import_react55.useMemo)(() => {
+    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__ */ import_react55.default.createElement("div", { className: "chart-field" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "header--tablet" }, /* @__PURE__ */ import_react55.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ import_react55.default.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ import_react55.default.createElement("div", { className: "chart-container" }, /* @__PURE__ */ import_react55.default.createElement(import_recharts2.ResponsiveContainer, null, /* @__PURE__ */ import_react55.default.createElement(import_recharts2.PieChart, null, !isLoading && !noValue ? /* @__PURE__ */ import_react55.default.createElement(
     import_recharts2.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__ */ import_react55.default.createElement(
         import_recharts2.Cell,
         {
           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
-var import_classnames27 = __toESM(require("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
-  } = (0, import_react56.useContext)(ProfitAndLoss.Context);
-  const expensesChartData = (0, import_react56.useMemo)(() => {
-    return buildMiniChartData("expenses", storedData);
-  }, [storedData]);
-  const revenueChartData = (0, import_react56.useMemo)(() => {
-    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__ */ import_react56.default.createElement(
-    "div",
-    {
-      className: `Layer__profit-and-loss-summaries ${vertical ? "flex-col" : ""}`
-    },
-    /* @__PURE__ */ import_react56.default.createElement(
-      "div",
+    }),
+    /* @__PURE__ */ import_react55.default.createElement(
+      import_recharts2.Label,
       {
-        className: (0, import_classnames27.default)(
-          "Layer__profit-and-loss-summaries__summary Layer__actionable",
-          "Layer__profit-and-loss-summaries__summary--income",
-          sidebarScope === "revenue" ? "active" : ""
-        ),
-        onClick: () => setSidebarScope("revenue")
-      },
-      /* @__PURE__ */ import_react56.default.createElement(MiniChart, { data: revenueChartData }),
-      /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react56.default.createElement(SkeletonLoader, null)) : /* @__PURE__ */ import_react56.default.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__ */ import_react55.default.createElement(
+            import_recharts2.Text,
+            {
+              ...positioningProps,
+              className: "pie-center-label__title"
+            },
+            text
+          );
+        }
+      }
     ),
-    /* @__PURE__ */ import_react56.default.createElement(
-      "div",
+    /* @__PURE__ */ import_react55.default.createElement(
+      import_recharts2.Label,
       {
-        className: (0, import_classnames27.default)(
-          "Layer__profit-and-loss-summaries__summary Layer__actionable",
-          "Layer__profit-and-loss-summaries__summary--expenses",
-          sidebarScope === "expenses" ? "active" : ""
-        ),
-        onClick: () => setSidebarScope("expenses")
-      },
-      /* @__PURE__ */ import_react56.default.createElement(MiniChart, { data: expensesChartData }),
-      /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react56.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react56.default.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__ */ import_react55.default.createElement(
+            import_recharts2.Text,
+            {
+              ...positioningProps,
+              className: "pie-center-label__value"
+            },
+            `$${centsToDollars(value)}`
+          );
+        }
+      }
     ),
-    /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react56.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react56.default.createElement(
-      "span",
+    /* @__PURE__ */ import_react55.default.createElement(
+      import_recharts2.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__ */ import_react55.default.createElement(
+              import_recharts2.Text,
+              {
+                ...positioningProps,
+                className: "pie-center-label__share"
+              },
+              `${formatPercent(
+                filteredData.find(
+                  (x) => x.display_name === hoveredItem
+                )?.share
+              )}%`
+            );
+          }
+          return;
+        }
+      }
+    )
+  ) : null, !isLoading && noValue ? /* @__PURE__ */ import_react55.default.createElement(
+    import_recharts2.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__ */ import_react55.default.createElement(
+      import_recharts2.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__ */ import_react55.default.createElement(
+            import_recharts2.Text,
+            {
+              ...positioningProps,
+              className: "pie-center-label__title"
+            },
+            text
+          );
+        }
+      }
+    ),
+    /* @__PURE__ */ import_react55.default.createElement(
+      import_recharts2.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__ */ import_react55.default.createElement(
+            import_recharts2.Text,
+            {
+              ...positioningProps,
+              className: "pie-center-label__value"
+            },
+            `$${centsToDollars(value)}`
+          );
+        }
+      }
+    )
+  ) : null, isLoading ? /* @__PURE__ */ import_react55.default.createElement(
+    import_recharts2.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
-var import_react58 = __toESM(require("react"));
-
-// src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-var import_react57 = __toESM(require("react"));
+// src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
+var import_react56 = __toESM(require("react"));
 
-// src/icons/PieChart.tsx
-var React71 = __toESM(require("react"));
-var PieChart2 = ({ size = 12, ...props }) => /* @__PURE__ */ React71.createElement(
+// src/icons/SortArrows.tsx
+var React70 = __toESM(require("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"
     }
-  ))
-);
-var PieChart_default = PieChart2;
-
-// 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] = (0, import_react57.useState)(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__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(
-    "div",
+  ), /* @__PURE__ */ React70.createElement(
+    "path",
     {
-      className: labelClasses.join(" "),
-      onClick: () => !lockExpanded && toggleExpanded()
+      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 SortArrows_default = SortArrows;
+
+// src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
+var import_classnames26 = __toESM(require("classnames"));
+var DetailedTable = ({
+  filteredData,
+  sidebarScope,
+  filters,
+  sortBy,
+  hoveredItem,
+  setHoveredItem
+}) => {
+  const buildColClass = (column) => {
+    return (0, import_classnames26.default)(
+      "Layer__sortable-col",
+      sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
+    );
+  };
+  return /* @__PURE__ */ import_react56.default.createElement("div", { className: "details-container" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "table" }, /* @__PURE__ */ import_react56.default.createElement("table", null, /* @__PURE__ */ import_react56.default.createElement("thead", null, /* @__PURE__ */ import_react56.default.createElement("tr", null, /* @__PURE__ */ import_react56.default.createElement(
+    "th",
+    {
+      className: buildColClass("category"),
+      onClick: () => sortBy(sidebarScope ?? "expenses", "category")
     },
-    /* @__PURE__ */ import_react57.default.createElement("span", { className: "Layer__profit-and-loss-row__label__title" }, !lockExpanded && variant !== "summation" ? /* @__PURE__ */ import_react57.default.createElement(
-      ChevronDownFill_default,
-      {
-        size: 16,
-        className: "Layer__profit-and-loss-row__label__chevron"
-      }
-    ) : null, /* @__PURE__ */ import_react57.default.createElement(Text, null, display_name)),
-    setSidebarScope && /* @__PURE__ */ import_react57.default.createElement(
-      "span",
-      {
-        className: "Layer__profit-and-loss-row__detailed-chart-btn",
-        onClick: (e) => {
-          e.stopPropagation();
-          setSidebarScope && setSidebarScope(scope ?? "expenses");
-        }
-      },
-      /* @__PURE__ */ import_react57.default.createElement(PieChart_default, null)
-    )
-  ), /* @__PURE__ */ import_react57.default.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ import_react57.default.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ import_react57.default.createElement(
-    "div",
+    "Expense/Sale ",
+    /* @__PURE__ */ import_react56.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ), /* @__PURE__ */ import_react56.default.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__ */ import_react57.default.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react57.default.createElement(
-      ProfitAndLossRow,
+    "Type ",
+    /* @__PURE__ */ import_react56.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ), /* @__PURE__ */ import_react56.default.createElement("th", null), /* @__PURE__ */ import_react56.default.createElement(
+    "th",
+    {
+      className: buildColClass("value"),
+      onClick: () => sortBy(sidebarScope ?? "expenses", "value")
+    },
+    "Value ",
+    /* @__PURE__ */ import_react56.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ))), /* @__PURE__ */ import_react56.default.createElement("tbody", null, filteredData.filter((x) => !x.hidden).map((item, idx) => {
+    const colorConfig = DEFAULT_CHART_COLORS[idx % DEFAULT_CHART_COLORS.length];
+    return /* @__PURE__ */ import_react56.default.createElement(
+      "tr",
       {
-        key: line_item.display_name,
-        lineItem: line_item,
-        depth: depth + 1,
-        maxDepth,
-        direction
-      }
-    )))
-  ));
+        key: `pl-side-table-item-${idx}`,
+        className: (0, import_classnames26.default)(
+          "Layer__profit-and-loss-detailed-table__row",
+          hoveredItem && hoveredItem === item.display_name ? "active" : ""
+        ),
+        onMouseEnter: () => setHoveredItem(item.display_name),
+        onMouseLeave: () => setHoveredItem(void 0)
+      },
+      /* @__PURE__ */ import_react56.default.createElement("td", { className: "category-col" }, item.display_name),
+      /* @__PURE__ */ import_react56.default.createElement("td", { className: "type-col" }, item.type),
+      /* @__PURE__ */ import_react56.default.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
+      /* @__PURE__ */ import_react56.default.createElement("td", { className: "share-col" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ import_react56.default.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
+var import_react57 = __toESM(require("react"));
+var import_react_select3 = __toESM(require("react-select"));
+var Filters = ({
+  filteredData,
+  sidebarScope,
+  filters,
+  setFilterTypes
+}) => {
+  return /* @__PURE__ */ import_react57.default.createElement("div", { className: "filters" }, /* @__PURE__ */ import_react57.default.createElement(Text, { size: "sm" /* sm */, className: "Layer__label" }, "Filters"), /* @__PURE__ */ import_react57.default.createElement(
+    import_react_select3.default,
+    {
+      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__ */ import_react57.default.createElement(import_react_select3.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react57.default.createElement(ChevronDown_default, null)),
+        Placeholder: (props) => /* @__PURE__ */ import_react57.default.createElement(import_react_select3.components.Placeholder, { ...props }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "Layer__select__multi-all-placeholder-badge" }, "All"))
+      }
+    }
+  ));
 };
 
-// src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-var ProfitAndLossTable = ({ lockExpanded }) => {
+// src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
+var import_date_fns13 = require("date-fns");
+var ProfitAndLossDetailedCharts = ({
+  scope,
+  hideClose = false,
+  showDatePicker = false
+}) => {
   const {
-    data: actualData,
+    filteredDataRevenue,
+    filteredTotalRevenue,
+    filteredDataExpenses,
+    filteredTotalExpenses,
+    sortBy,
     isLoading,
-    setSidebarScope
+    filters,
+    dateRange,
+    sidebarScope,
+    setSidebarScope,
+    setFilterTypes
   } = (0, import_react58.useContext)(ProfitAndLoss.Context);
-  const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
-  if (isLoading || actualData === void 0) {
-    return /* @__PURE__ */ import_react58.default.createElement("div", { className: "Layer__profit-and-loss-table__loader-container" }, /* @__PURE__ */ import_react58.default.createElement(Loader2, null));
-  }
-  return /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table--main" }, /* @__PURE__ */ import_react58.default.createElement(
-    ProfitAndLossRow,
-    {
-      lineItem: data.income,
-      direction: "CREDIT" /* CREDIT */,
-      lockExpanded,
-      scope: "revenue",
-      setSidebarScope
-    }
-  ), /* @__PURE__ */ import_react58.default.createElement(
-    ProfitAndLossRow,
-    {
-      lineItem: data.cost_of_goods_sold,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded,
-      scope: "expenses",
-      setSidebarScope
-    }
-  ), /* @__PURE__ */ import_react58.default.createElement(
-    ProfitAndLossRow,
-    {
-      lineItem: {
-        value: data.gross_profit,
-        display_name: "Gross Profit"
-      },
-      variant: "summation",
-      direction: "CREDIT" /* CREDIT */,
-      lockExpanded,
-      scope: "revenue",
-      setSidebarScope
-    }
-  ), /* @__PURE__ */ import_react58.default.createElement(
-    ProfitAndLossRow,
+  const theScope = scope ? scope : sidebarScope;
+  const data = theScope === "revenue" ? filteredDataRevenue : filteredDataExpenses;
+  const total = theScope === "revenue" ? filteredTotalRevenue : filteredTotalExpenses;
+  const [hoveredItem, setHoveredItem] = (0, import_react58.useState)();
+  return /* @__PURE__ */ import_react58.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ import_react58.default.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ import_react58.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(theScope)), /* @__PURE__ */ import_react58.default.createElement(Text, { size: "sm" /* sm */, className: "date" }, (0, import_date_fns13.format)(dateRange.startDate, "LLLL, y")), showDatePicker && /* @__PURE__ */ import_react58.default.createElement(ProfitAndLossDatePicker, null)), !hideClose && /* @__PURE__ */ import_react58.default.createElement(
+    Button,
     {
-      lineItem: data.expenses,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded,
-      scope: "expenses",
-      setSidebarScope
+      rightIcon: /* @__PURE__ */ import_react58.default.createElement(X_default, null),
+      iconOnly: true,
+      onClick: () => setSidebarScope(void 0),
+      variant: "secondary" /* secondary */
     }
-  ), /* @__PURE__ */ import_react58.default.createElement(
-    ProfitAndLossRow,
+  )), /* @__PURE__ */ import_react58.default.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header--tablet" }, /* @__PURE__ */ import_react58.default.createElement(BackButton, { onClick: () => setSidebarScope(void 0) })), /* @__PURE__ */ import_react58.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__content" }, /* @__PURE__ */ import_react58.default.createElement(
+    DetailedChart,
     {
-      lineItem: {
-        value: data.profit_before_taxes,
-        display_name: "Profit Before Taxes"
-      },
-      variant: "summation",
-      direction: "CREDIT" /* CREDIT */,
-      lockExpanded,
-      scope: "revenue",
-      setSidebarScope
+      filteredData: data,
+      filteredTotal: total,
+      hoveredItem,
+      setHoveredItem,
+      sidebarScope: theScope,
+      date: dateRange.startDate,
+      isLoading
     }
-  ), /* @__PURE__ */ import_react58.default.createElement(
-    ProfitAndLossRow,
+  ), /* @__PURE__ */ import_react58.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__table-wrapper" }, /* @__PURE__ */ import_react58.default.createElement(
+    Filters,
     {
-      lineItem: data.taxes,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded,
-      scope: "expenses",
-      setSidebarScope
+      filteredData: data,
+      sidebarScope: theScope,
+      filters,
+      setFilterTypes
     }
   ), /* @__PURE__ */ import_react58.default.createElement(
-    ProfitAndLossRow,
+    DetailedTable,
     {
-      lineItem: {
-        value: data.net_profit,
-        display_name: "Net Profit"
-      },
-      variant: "summation",
-      direction: "CREDIT" /* CREDIT */,
-      lockExpanded
+      filteredData: data,
+      sidebarScope: theScope,
+      filters,
+      sortBy,
+      hoveredItem,
+      setHoveredItem
     }
-  )), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ import_react58.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react58.default.createElement(
-    ProfitAndLossRow,
-    {
-      lineItem: data.other_outflows,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded
-    }
-  ), /* @__PURE__ */ import_react58.default.createElement(
-    ProfitAndLossRow,
+  ))));
+};
+
+// src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
+var import_react61 = __toESM(require("react"));
+
+// src/components/SkeletonLoader/SkeletonLoader.tsx
+var import_react59 = __toESM(require("react"));
+var import_classnames27 = __toESM(require("classnames"));
+var SkeletonLoader = ({
+  height,
+  width,
+  className
+}) => {
+  const baseClassName = (0, import_classnames27.default)(
+    "Layer__skeleton-loader Layer__anim--skeleton-loading",
+    className
+  );
+  return /* @__PURE__ */ import_react59.default.createElement("div", { className: baseClassName, style: { width, height } });
+};
+
+// src/components/ProfitAndLossSummaries/MiniChart.tsx
+var import_react60 = __toESM(require("react"));
+var import_recharts3 = require("recharts");
+var MiniChart = ({ data }) => {
+  return /* @__PURE__ */ import_react60.default.createElement(import_recharts3.PieChart, { width: 48, height: 48, className: "mini-chart" }, /* @__PURE__ */ import_react60.default.createElement(
+    import_recharts3.Pie,
     {
-      lineItem: data.personal_expenses,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded
-    }
-  )) : null);
+      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__ */ import_react60.default.createElement(
+        import_recharts3.Cell,
+        {
+          key: `cell-${index}`,
+          className: `Layer__profit-and-loss-detailed-charts__pie`,
+          fill: entry.name === "placeholder" ? "#e6e6e6" : colorConfig.color,
+          opacity: colorConfig.opacity
+        }
+      );
+    })
+  ));
 };
 
-// src/components/ProfitAndLoss/ProfitAndLoss.tsx
-var import_date_fns13 = require("date-fns");
-var PNLContext = (0, import_react59.createContext)({
-  data: void 0,
-  filteredData: [],
-  filteredTotal: void 0,
-  isLoading: true,
-  isValidating: false,
-  error: void 0,
-  dateRange: {
-    startDate: (0, import_date_fns13.startOfMonth)(/* @__PURE__ */ new Date()),
-    endDate: (0, import_date_fns13.endOfMonth)(/* @__PURE__ */ new Date())
-  },
-  changeDateRange: () => {
-  },
-  refetch: () => {
-  },
-  sidebarScope: void 0,
-  setSidebarScope: () => {
-  },
-  sortBy: () => {
-  },
-  setFilterTypes: () => {
-  },
-  filters: {
-    expenses: void 0,
-    revenue: void 0
+// src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
+var import_classnames28 = __toESM(require("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__ */ import_react59.default.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ import_react59.default.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
+  } = (0, import_react61.useContext)(ProfitAndLoss.Context);
+  const expensesChartData = (0, import_react61.useMemo)(() => {
+    return buildMiniChartData("expenses", storedData);
+  }, [storedData]);
+  const revenueChartData = (0, import_react61.useMemo)(() => {
+    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__ */ import_react61.default.createElement(
+    "div",
+    {
+      className: `Layer__profit-and-loss-summaries ${vertical ? "flex-col" : ""}`
+    },
+    /* @__PURE__ */ import_react61.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames28.default)(
+          "Layer__profit-and-loss-summaries__summary",
+          actionable && "Layer__actionable",
+          "Layer__profit-and-loss-summaries__summary--income",
+          sidebarScope === "revenue" ? "active" : ""
+        ),
+        onClick: () => {
+          actionable && setSidebarScope("revenue");
+        }
+      },
+      /* @__PURE__ */ import_react61.default.createElement(MiniChart, { data: revenueChartData }),
+      /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react61.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react61.default.createElement(SkeletonLoader, null)) : /* @__PURE__ */ import_react61.default.createElement(
+        "span",
+        {
+          className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
+        },
+        centsToDollars(Math.abs(data?.income?.value ?? NaN))
+      ))
+    ),
+    /* @__PURE__ */ import_react61.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames28.default)(
+          "Layer__profit-and-loss-summaries__summary",
+          actionable && "Layer__actionable",
+          "Layer__profit-and-loss-summaries__summary--expenses",
+          sidebarScope === "expenses" ? "active" : ""
+        ),
+        onClick: () => {
+          actionable && setSidebarScope("expenses");
+        }
+      },
+      /* @__PURE__ */ import_react61.default.createElement(MiniChart, { data: expensesChartData }),
+      /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react61.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react61.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react61.default.createElement(
+        "span",
+        {
+          className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
+        },
+        centsToDollars(
+          Math.abs((data.income.value ?? 0) - data.net_profit)
+        )
+      ))
+    ),
+    /* @__PURE__ */ import_react61.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames28.default)(
+          "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit",
+          actionable && "Layer__actionable"
+        )
+      },
+      /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react61.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react61.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react61.default.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
-var import_react64 = __toESM(require("react"));
 
-// src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
+// src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
 var import_react63 = __toESM(require("react"));
 
-// src/icons/X.tsx
-var React75 = __toESM(require("react"));
-var X = ({ size = 18, ...props }) => /* @__PURE__ */ React75.createElement(
+// src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
+var import_react62 = __toESM(require("react"));
+
+// src/icons/PieChart.tsx
+var React77 = __toESM(require("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
-var import_react60 = __toESM(require("react"));
-var import_recharts3 = require("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 = (0, import_react60.useMemo)(() => {
-    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__ */ import_react60.default.createElement("div", { className: "chart-field" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "header--tablet" }, /* @__PURE__ */ import_react60.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ import_react60.default.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ import_react60.default.createElement("div", { className: "chart-container" }, /* @__PURE__ */ import_react60.default.createElement(import_recharts3.ResponsiveContainer, null, /* @__PURE__ */ import_react60.default.createElement(import_recharts3.PieChart, null, /* @__PURE__ */ import_react60.default.createElement(
-    import_recharts3.Pie,
-    {
-      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"
-    },
-    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__ */ import_react60.default.createElement(
-        import_recharts3.Cell,
-        {
-          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__ */ import_react60.default.createElement(
-      import_recharts3.Label,
+  if (!lineItem) {
+    return null;
+  }
+  const { value, display_name, line_items } = lineItem;
+  const [expanded, setExpanded] = (0, import_react62.useState)(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__ */ import_react62.default.createElement(import_react62.default.Fragment, null, /* @__PURE__ */ import_react62.default.createElement(
+    "div",
+    {
+      className: labelClasses.join(" "),
+      onClick: () => !lockExpanded && toggleExpanded()
+    },
+    /* @__PURE__ */ import_react62.default.createElement("span", { className: "Layer__profit-and-loss-row__label__title" }, !lockExpanded && variant !== "summation" ? /* @__PURE__ */ import_react62.default.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__ */ import_react60.default.createElement(
-            import_recharts3.Text,
-            {
-              ...positioningProps,
-              className: "pie-center-label__title"
-            },
-            text
-          );
-        }
+        size: 16,
+        className: "Layer__profit-and-loss-row__label__chevron"
       }
-    ),
-    /* @__PURE__ */ import_react60.default.createElement(
-      import_recharts3.Label,
+    ) : null, /* @__PURE__ */ import_react62.default.createElement(Text, null, display_name)),
+    setSidebarScope && /* @__PURE__ */ import_react62.default.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__ */ import_react60.default.createElement(
-            import_recharts3.Text,
-            {
-              ...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__ */ import_react60.default.createElement(
-      import_recharts3.Label,
+      },
+      /* @__PURE__ */ import_react62.default.createElement(PieChart_default, null)
+    )
+  ), /* @__PURE__ */ import_react62.default.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ import_react62.default.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ import_react62.default.createElement(
+    "div",
+    {
+      className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
+    },
+    /* @__PURE__ */ import_react62.default.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react62.default.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__ */ import_react60.default.createElement(
-              import_recharts3.Text,
-              {
-                ...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
-var import_react61 = __toESM(require("react"));
-
-// src/icons/SortArrows.tsx
-var React77 = __toESM(require("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
-var import_classnames28 = __toESM(require("classnames"));
-var DetailedTable = ({
-  filteredData,
-  sidebarScope,
-  filters,
-  sortBy,
-  hoveredItem,
-  setHoveredItem
-}) => {
-  const buildColClass = (column) => {
-    return (0, import_classnames28.default)(
-      "Layer__sortable-col",
-      sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
-    );
-  };
-  return /* @__PURE__ */ import_react61.default.createElement("div", { className: "details-container" }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "table" }, /* @__PURE__ */ import_react61.default.createElement("table", null, /* @__PURE__ */ import_react61.default.createElement("thead", null, /* @__PURE__ */ import_react61.default.createElement("tr", null, /* @__PURE__ */ import_react61.default.createElement(
-    "th",
-    {
-      className: buildColClass("category"),
-      onClick: () => sortBy(sidebarScope ?? "expenses", "category")
-    },
-    "Expense/Sale ",
-    /* @__PURE__ */ import_react61.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-  ), /* @__PURE__ */ import_react61.default.createElement(
-    "th",
-    {
-      className: buildColClass("type"),
-      onClick: () => sortBy(sidebarScope ?? "expenses", "type")
-    },
-    "Type ",
-    /* @__PURE__ */ import_react61.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-  ), /* @__PURE__ */ import_react61.default.createElement("th", null), /* @__PURE__ */ import_react61.default.createElement(
-    "th",
-    {
-      className: buildColClass("value"),
-      onClick: () => sortBy(sidebarScope ?? "expenses", "value")
-    },
-    "Value ",
-    /* @__PURE__ */ import_react61.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-  ))), /* @__PURE__ */ import_react61.default.createElement("tbody", null, filteredData.filter((x) => !x.hidden).map((item, idx) => {
-    const colorConfig = DEFAULT_CHART_COLORS[idx % DEFAULT_CHART_COLORS.length];
-    return /* @__PURE__ */ import_react61.default.createElement(
-      "tr",
+// src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
+var import_classnames29 = __toESM(require("classnames"));
+var ProfitAndLossTable = ({ lockExpanded, asContainer }) => {
+  const {
+    data: actualData,
+    isLoading,
+    setSidebarScope
+  } = (0, import_react63.useContext)(ProfitAndLoss.Context);
+  const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
+  if (isLoading || actualData === void 0) {
+    return /* @__PURE__ */ import_react63.default.createElement(
+      "div",
       {
-        key: `pl-side-table-item-${idx}`,
-        className: (0, import_classnames28.default)(
-          "Layer__profit-and-loss-detailed-table__row",
-          hoveredItem && hoveredItem === item.display_name ? "active" : ""
-        ),
-        onMouseEnter: () => setHoveredItem(item.display_name),
-        onMouseLeave: () => setHoveredItem(void 0)
+        className: (0, import_classnames29.default)(
+          "Layer__profit-and-loss-table__loader-container",
+          asContainer && "Layer__component-container"
+        )
       },
-      /* @__PURE__ */ import_react61.default.createElement("td", { className: "category-col" }, item.display_name),
-      /* @__PURE__ */ import_react61.default.createElement("td", { className: "type-col" }, item.type),
-      /* @__PURE__ */ import_react61.default.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
-      /* @__PURE__ */ import_react61.default.createElement("td", { className: "share-col" }, /* @__PURE__ */ import_react61.default.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ import_react61.default.createElement(
-        "div",
-        {
-          className: "share-icon",
-          style: {
-            background: colorConfig.color,
-            opacity: colorConfig.opacity
-          }
-        }
-      )))
+      /* @__PURE__ */ import_react63.default.createElement(Loader2, null)
     );
-  })))));
-};
-
-// src/components/ProfitAndLossDetailedCharts/Filters.tsx
-var import_react62 = __toESM(require("react"));
-var import_react_select3 = __toESM(require("react-select"));
-var Filters = ({
-  filteredData,
-  sidebarScope,
-  filters,
-  setFilterTypes
-}) => {
-  return /* @__PURE__ */ import_react62.default.createElement("div", { className: "filters" }, /* @__PURE__ */ import_react62.default.createElement(Text, { size: "sm" /* sm */, className: "Layer__label" }, "Filters"), /* @__PURE__ */ import_react62.default.createElement(
-    import_react_select3.default,
+  }
+  return /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, /* @__PURE__ */ import_react63.default.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__ */ import_react62.default.createElement(import_react_select3.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react62.default.createElement(ChevronDown_default, null)),
-        Placeholder: (props) => /* @__PURE__ */ import_react62.default.createElement(import_react_select3.components.Placeholder, { ...props }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "Layer__select__multi-all-placeholder-badge" }, "All"))
+      className: (0, import_classnames29.default)(
+        "Layer__profit-and-loss-table Layer__profit-and-loss-table--main",
+        asContainer && "Layer__component-container"
+      )
+    },
+    /* @__PURE__ */ import_react63.default.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: data.income,
+        direction: "CREDIT" /* CREDIT */,
+        lockExpanded,
+        scope: "revenue",
+        setSidebarScope
+      }
+    ),
+    /* @__PURE__ */ import_react63.default.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: data.cost_of_goods_sold,
+        direction: "DEBIT" /* DEBIT */,
+        lockExpanded,
+        scope: "expenses",
+        setSidebarScope
+      }
+    ),
+    /* @__PURE__ */ import_react63.default.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: {
+          value: data.gross_profit,
+          display_name: "Gross Profit"
+        },
+        variant: "summation",
+        direction: "CREDIT" /* CREDIT */,
+        lockExpanded,
+        scope: "revenue",
+        setSidebarScope
+      }
+    ),
+    /* @__PURE__ */ import_react63.default.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: data.expenses,
+        direction: "DEBIT" /* DEBIT */,
+        lockExpanded,
+        scope: "expenses",
+        setSidebarScope
+      }
+    ),
+    /* @__PURE__ */ import_react63.default.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: {
+          value: data.profit_before_taxes,
+          display_name: "Profit Before Taxes"
+        },
+        variant: "summation",
+        direction: "CREDIT" /* CREDIT */,
+        lockExpanded,
+        scope: "revenue",
+        setSidebarScope
+      }
+    ),
+    /* @__PURE__ */ import_react63.default.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: data.taxes,
+        direction: "DEBIT" /* DEBIT */,
+        lockExpanded,
+        scope: "expenses",
+        setSidebarScope
+      }
+    ),
+    /* @__PURE__ */ import_react63.default.createElement(
+      ProfitAndLossRow,
+      {
+        lineItem: {
+          value: data.net_profit,
+          display_name: "Net Profit"
+        },
+        variant: "summation",
+        direction: "CREDIT" /* CREDIT */,
+        lockExpanded
       }
+    )
+  ), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ import_react63.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react63.default.createElement(
+    ProfitAndLossRow,
+    {
+      lineItem: data.other_outflows,
+      direction: "DEBIT" /* DEBIT */,
+      lockExpanded
     }
-  ));
+  ), /* @__PURE__ */ import_react63.default.createElement(
+    ProfitAndLossRow,
+    {
+      lineItem: data.personal_expenses,
+      direction: "DEBIT" /* DEBIT */,
+      lockExpanded
+    }
+  )) : null);
 };
 
-// src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
-var import_classnames29 = __toESM(require("classnames"));
+// src/components/ProfitAndLoss/ProfitAndLoss.tsx
 var import_date_fns14 = require("date-fns");
-var ProfitAndLossDetailedCharts = () => {
-  const {
-    filteredData,
-    filteredTotal,
-    sortBy,
-    filters,
-    isLoading,
-    dateRange,
-    sidebarScope,
-    setSidebarScope,
-    setFilterTypes
-  } = (0, import_react63.useContext)(ProfitAndLoss.Context);
-  const [hoveredItem, setHoveredItem] = (0, import_react63.useState)();
-  return /* @__PURE__ */ import_react63.default.createElement(
+var PNLContext = (0, import_react64.createContext)({
+  data: void 0,
+  filteredDataRevenue: [],
+  filteredTotalRevenue: void 0,
+  filteredDataExpenses: [],
+  filteredTotalExpenses: void 0,
+  isLoading: true,
+  isValidating: false,
+  error: void 0,
+  dateRange: {
+    startDate: (0, import_date_fns14.startOfMonth)(/* @__PURE__ */ new Date()),
+    endDate: (0, import_date_fns14.endOfMonth)(/* @__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__ */ import_react64.default.createElement(PNLContext.Provider, { value: contextData }, asContainer ? /* @__PURE__ */ import_react64.default.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
+var import_react66 = __toESM(require("react"));
+
+// src/components/Panel/Panel.tsx
+var import_react65 = __toESM(require("react"));
+var import_classnames30 = __toESM(require("classnames"));
+var Panel = ({
+  children,
+  className,
+  sidebar,
+  header,
+  sidebarIsOpen,
+  parentRef
+}) => {
+  const [sidebarHeight, setSidebarHeight] = (0, import_react65.useState)(0);
+  (0, import_react65.useEffect)(() => {
+    if (parentRef?.current?.offsetHeight) {
+      setSidebarHeight(parentRef?.current?.offsetHeight - 1);
+    }
+  }, [parentRef?.current?.offsetHeight, sidebarIsOpen]);
+  return /* @__PURE__ */ import_react65.default.createElement(
     "div",
     {
-      className: (0, import_classnames29.default)(
-        "Layer__profit-and-loss__side-panel",
-        sidebarScope && "open"
+      className: (0, import_classnames30.default)(
+        "Layer__panel",
+        className,
+        sidebarIsOpen && "Layer__panel--open"
       )
     },
-    /* @__PURE__ */ import_react63.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ import_react63.default.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header" }, /* @__PURE__ */ import_react63.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ import_react63.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ import_react63.default.createElement(Text, { size: "sm" /* sm */, className: "date" }, (0, import_date_fns14.format)(dateRange.startDate, "LLLL, y")), /* @__PURE__ */ import_react63.default.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ import_react63.default.createElement(
-      Button,
-      {
-        rightIcon: /* @__PURE__ */ import_react63.default.createElement(X_default, null),
-        iconOnly: true,
-        onClick: () => setSidebarScope(void 0),
-        variant: "secondary" /* secondary */
-      }
-    )), /* @__PURE__ */ import_react63.default.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header--tablet" }, /* @__PURE__ */ import_react63.default.createElement(BackButton, { onClick: () => setSidebarScope(void 0) })), /* @__PURE__ */ import_react63.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__content" }, /* @__PURE__ */ import_react63.default.createElement(
-      DetailedChart,
-      {
-        filteredData,
-        filteredTotal,
-        hoveredItem,
-        setHoveredItem,
-        sidebarScope,
-        date: dateRange.startDate
-      }
-    ), /* @__PURE__ */ import_react63.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__table-wrapper" }, /* @__PURE__ */ import_react63.default.createElement(
-      Filters,
-      {
-        filteredData,
-        sidebarScope,
-        filters,
-        setFilterTypes
-      }
-    ), /* @__PURE__ */ import_react63.default.createElement(
-      DetailedTable,
+    /* @__PURE__ */ import_react65.default.createElement("div", { className: "Layer__panel__content" }, header, children),
+    sidebar && /* @__PURE__ */ import_react65.default.createElement(
+      "div",
       {
-        filteredData,
-        sidebarScope,
-        filters,
-        sortBy,
-        hoveredItem,
-        setHoveredItem
-      }
-    ))))
+        className: "Layer__panel__sidebar",
+        style: {
+          maxHeight: sidebarHeight > 0 && sidebarIsOpen ? sidebarHeight : 0
+        }
+      },
+      /* @__PURE__ */ import_react65.default.createElement("div", { className: "Layer__panel__sidebar-content" }, sidebar)
+    )
   );
 };
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
 var COMPONENT_NAME3 = "profit-and-loss";
 var ProfitAndLossView = (props) => {
-  return /* @__PURE__ */ import_react64.default.createElement(Container, { name: COMPONENT_NAME3 }, /* @__PURE__ */ import_react64.default.createElement(ProfitAndLoss, null, /* @__PURE__ */ import_react64.default.createElement("div", { className: `Layer__${COMPONENT_NAME3}__main-panel` }, /* @__PURE__ */ import_react64.default.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ import_react64.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit & Loss")), /* @__PURE__ */ import_react64.default.createElement(Components, { ...props })), props.showDetailedCharts !== false && /* @__PURE__ */ import_react64.default.createElement(ProfitAndLossDetailedCharts, null)));
+  const containerRef = (0, import_react66.useRef)(null);
+  return /* @__PURE__ */ import_react66.default.createElement(Container, { name: COMPONENT_NAME3, ref: containerRef }, /* @__PURE__ */ import_react66.default.createElement(ProfitAndLoss, null, /* @__PURE__ */ import_react66.default.createElement(ProfitAndLossPanel, { containerRef, ...props })));
+};
+var ProfitAndLossPanel = ({
+  containerRef,
+  ...props
+}) => {
+  const { sidebarScope } = (0, import_react66.useContext)(ProfitAndLoss.Context);
+  return /* @__PURE__ */ import_react66.default.createElement(
+    Panel,
+    {
+      sidebar: /* @__PURE__ */ import_react66.default.createElement(ProfitAndLossDetailedCharts, null),
+      sidebarIsOpen: Boolean(sidebarScope),
+      parentRef: containerRef
+    },
+    /* @__PURE__ */ import_react66.default.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ import_react66.default.createElement(Heading, { className: "Layer__profit-and-loss__title" }, "Profit & Loss")),
+    /* @__PURE__ */ import_react66.default.createElement(Components, { ...props })
+  );
 };
 var Components = ({
   hideChart = false,
   hideTable = false
 }) => {
-  const { error, isLoading, isValidating, refetch } = (0, import_react64.useContext)(
+  const { error, isLoading, isValidating, refetch } = (0, import_react66.useContext)(
     ProfitAndLoss.Context
   );
   if (!isLoading && error) {
-    return /* @__PURE__ */ import_react64.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react64.default.createElement(
+    return /* @__PURE__ */ import_react66.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react66.default.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -6429,27 +6843,27 @@ var Components = ({
       }
     ));
   }
-  return /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, !hideChart && /* @__PURE__ */ import_react64.default.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ import_react64.default.createElement(
+  return /* @__PURE__ */ import_react66.default.createElement(import_react66.default.Fragment, null, !hideChart && /* @__PURE__ */ import_react66.default.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ import_react66.default.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__summary-col`
     },
-    /* @__PURE__ */ import_react64.default.createElement(ProfitAndLoss.DatePicker, null),
-    /* @__PURE__ */ import_react64.default.createElement(ProfitAndLoss.Summaries, { vertical: true })
-  ), /* @__PURE__ */ import_react64.default.createElement(
+    /* @__PURE__ */ import_react66.default.createElement(ProfitAndLoss.DatePicker, null),
+    /* @__PURE__ */ import_react66.default.createElement(ProfitAndLoss.Summaries, { vertical: true })
+  ), /* @__PURE__ */ import_react66.default.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__chart-col`
     },
-    /* @__PURE__ */ import_react64.default.createElement(ProfitAndLoss.Chart, null)
-  )), !hideTable && /* @__PURE__ */ import_react64.default.createElement(ProfitAndLoss.Table, null));
+    /* @__PURE__ */ import_react66.default.createElement(ProfitAndLoss.Chart, null)
+  )), !hideTable && /* @__PURE__ */ import_react66.default.createElement(ProfitAndLoss.Table, null));
 };
 
-// src/components/LedgerAccounts/LedgerAccounts.tsx
-var import_react70 = __toESM(require("react"));
+// src/components/ChartOfAccounts/ChartOfAccounts.tsx
+var import_react81 = __toESM(require("react"));
 
-// src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
-var import_react65 = require("react");
+// src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
+var import_react67 = require("react");
 var import_swr6 = __toESM(require("swr"));
 var validate = (formData) => {
   const errors = [];
@@ -6481,15 +6895,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] = (0, import_react65.useState)();
-  const [sendingForm, setSendingForm] = (0, import_react65.useState)(false);
-  const [apiError, setApiError] = (0, import_react65.useState)(void 0);
-  const [showARForAccountId, setShowARForAccountId] = (0, import_react65.useState)();
+  const [form, setForm] = (0, import_react67.useState)();
+  const [sendingForm, setSendingForm] = (0, import_react67.useState)(false);
+  const [apiError, setApiError] = (0, import_react67.useState)(void 0);
   const { data, isLoading, isValidating, error, mutate } = (0, import_swr6.default)(
-    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 }
     })
   );
@@ -6547,13 +6960,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);
@@ -6638,112 +7051,67 @@ var useLedgerAccounts = () => {
     editAccount,
     cancelForm,
     changeFormData,
-    submitForm,
-    showARForAccountId,
-    setShowARForAccountId
+    submitForm
   };
 };
 
-// src/components/AccountsReceivable/AccountsReceivableIndex.tsx
-var import_react66 = __toESM(require("react"));
-var import_classnames30 = __toESM(require("classnames"));
-var import_date_fns15 = require("date-fns");
-var AccountsReceivable = () => {
-  const { data, showARForAccountId, setShowARForAccountId } = (0, import_react66.useContext)(
-    LedgerAccountsContext
+// src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
+var import_react68 = require("react");
+var import_swr7 = __toESM(require("swr"));
+var useLedgerAccounts = () => {
+  const { auth, businessId, apiUrl } = useLayerContext();
+  const [accountId, setAccountId] = (0, import_react68.useState)();
+  const [selectedEntryId, setSelectedEntryId] = (0, import_react68.useState)();
+  const { data, isLoading, isValidating, error, mutate } = (0, import_swr7.default)(
+    businessId && accountId && auth?.access_token && `ledger-accounts-lines-${businessId}-${accountId}`,
+    Layer.getLedgerAccountsLines(apiUrl, auth?.access_token, {
+      params: { businessId, accountId }
+    })
   );
-  const entry = (0, import_react66.useMemo)(() => {
-    return flattenAccounts(data?.accounts || []).find(
-      (x) => x.id === showARForAccountId
-    );
-  }, [showARForAccountId]);
-  const baseClassName = (0, import_classnames30.default)(
-    "Layer__accounts-receivable__index",
-    showARForAccountId && "open"
+  const {
+    data: entryData,
+    mutate: mutateEntryData,
+    isLoading: isLoadingEntry,
+    isValidating: isValdiatingEntry,
+    error: errorEntry
+  } = (0, import_swr7.default)(
+    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__ */ import_react66.default.createElement("div", { className: baseClassName }, /* @__PURE__ */ import_react66.default.createElement("div", { className: "Layer__accounts-receivable__header" }, /* @__PURE__ */ import_react66.default.createElement(BackButton, { onClick: close }), /* @__PURE__ */ import_react66.default.createElement("div", { className: "Layer__accounts-receivable__title-container" }, /* @__PURE__ */ import_react66.default.createElement(
-    Text,
-    {
-      weight: "bold" /* bold */,
-      className: "Layer__accounts-receivable__title"
-    },
-    entry?.name || ""
-  ), /* @__PURE__ */ import_react66.default.createElement(
-    Button,
-    {
-      variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ import_react66.default.createElement(DownloadCloud_default, { size: 12 })
-    },
-    "Download"
-  )), /* @__PURE__ */ import_react66.default.createElement("div", { className: "Layer__accounts-receivable__balance-container" }, /* @__PURE__ */ import_react66.default.createElement(
-    Text,
-    {
-      weight: "bold" /* bold */,
-      className: "Layer__accounts-receivable__balance-label"
-    },
-    "Current balance"
-  ), /* @__PURE__ */ import_react66.default.createElement(
-    Text,
-    {
-      weight: "bold" /* bold */,
-      className: "Layer__accounts-receivable__balance-value"
-    },
-    "$",
-    centsToDollars(entry?.balance || 0)
-  ))), /* @__PURE__ */ import_react66.default.createElement("table", { className: "Layer__table Layer__accounts-receivable-table" }, /* @__PURE__ */ import_react66.default.createElement("thead", null, /* @__PURE__ */ import_react66.default.createElement("tr", null, /* @__PURE__ */ import_react66.default.createElement("th", { className: "Layer__table-header" }, "Date"), /* @__PURE__ */ import_react66.default.createElement("th", { className: "Layer__table-header" }, "Journal id #"), /* @__PURE__ */ import_react66.default.createElement("th", { className: "Layer__table-header" }, "Source"), /* @__PURE__ */ import_react66.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Debit"), /* @__PURE__ */ import_react66.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Credit"), /* @__PURE__ */ import_react66.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Running balance"))), /* @__PURE__ */ import_react66.default.createElement("tbody", null, entry?.entries?.map((x) => {
-    return /* @__PURE__ */ import_react66.default.createElement("tr", { key: x.id }, /* @__PURE__ */ import_react66.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react66.default.createElement("span", { className: "Layer__table-cell-content" }, x.createdAt && (0, import_date_fns15.format)((0, import_date_fns15.parseISO)(x.createdAt), DATE_FORMAT))), /* @__PURE__ */ import_react66.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react66.default.createElement("span", { className: "Layer__table-cell-content" }, "#123")), /* @__PURE__ */ import_react66.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react66.default.createElement("span", { className: "Layer__table-cell-content" }, "Invoice")), /* @__PURE__ */ import_react66.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ import_react66.default.createElement("span", { className: "Layer__table-cell-content" }, x.direction, " $X,XXX.XX")), /* @__PURE__ */ import_react66.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ import_react66.default.createElement("span", { className: "Layer__table-cell-content" }, "$X,XXX.XX")), /* @__PURE__ */ import_react66.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ import_react66.default.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
-var import_react67 = __toESM(require("react"));
+// src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
+var import_react73 = __toESM(require("react"));
 
-// src/icons/ArrowRightCircle.tsx
-var React83 = __toESM(require("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
+var import_react69 = __toESM(require("react"));
 
 // src/icons/Edit2.tsx
-var React84 = __toESM(require("react"));
-var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React84.createElement(
+var React83 = __toESM(require("react"));
+var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React83.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6753,7 +7121,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",
@@ -6765,43 +7133,51 @@ var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React84.createElement(
 );
 var Edit2_default = Edit2;
 
-// src/components/LedgerAccountsRow/LedgerAccountsRow.tsx
+// src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
 var import_classnames31 = __toESM(require("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 } = (0, import_react67.useContext)(
-    LedgerAccountsContext
-  );
-  const [isOpen, setIsOpen] = (0, import_react67.useState)(defaultOpen);
+  const { form, editAccount } = (0, import_react69.useContext)(ChartOfAccountsContext);
+  const { setAccountId } = (0, import_react69.useContext)(LedgerAccountsContext);
+  const baseStyle = view === "desktop" ? EXPANDED_STYLE : EXPANDED_MOBILE_STYLE;
+  const [isOpen, setIsOpen] = (0, import_react69.useState)(defaultOpen);
   const style = expanded ? {
-    ...EXPANDED_STYLE,
+    ...baseStyle,
     transitionDelay: `${15 * index}ms`
   } : {
     ...COLLAPSED_STYLE,
     transitionDelay: `${acountsLength - 15 * index}ms`
   };
-  const [showComponent, setShowComponent] = (0, import_react67.useState)(false);
-  (0, import_react67.useEffect)(() => {
+  const [showComponent, setShowComponent] = (0, import_react69.useState)(false);
+  (0, import_react69.useEffect)(() => {
     const timeoutId = setTimeout(() => {
       setShowComponent(true);
     }, cumulativeIndex * 50);
@@ -6815,56 +7191,151 @@ var LedgerAccountsRow = ({
     form?.accountId === account.id && "Layer__table-row--active",
     !showComponent && "Layer__table-row--anim-starting-state"
   );
-  return /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, /* @__PURE__ */ import_react67.default.createElement("tr", { className: baseClass, onClick: () => setIsOpen(!isOpen) }, /* @__PURE__ */ import_react67.default.createElement("td", { className: "Layer__table-cell Layer__coa__name" }, /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ import_react67.default.createElement(
-    "span",
-    {
-      className: "Layer__table-cell-content-indentation",
-      style: {
-        paddingLeft: INDENTATION * depth + 16
-      }
-    },
-    account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ import_react67.default.createElement(
-      ChevronDownFill_default,
-      {
-        size: 16,
-        className: "Layer__table__expand-icon"
-      }
-    ),
-    /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__coa__name__text" }, account.name)
-  ))), /* @__PURE__ */ import_react67.default.createElement("td", { className: "Layer__table-cell Layer__coa__type" }, /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content", style }, account.normality)), /* @__PURE__ */ import_react67.default.createElement("td", { className: "Layer__table-cell Layer__coa__subtype" }, /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content", style }, "Sub-Type")), /* @__PURE__ */ import_react67.default.createElement("td", { className: "Layer__table-cell Layer__coa__balance" }, /* @__PURE__ */ import_react67.default.createElement(
-    "span",
-    {
-      className: "Layer__table-cell-content Layer__table-cell--amount",
-      style
-    },
-    "$",
-    centsToDollars(Math.abs(account.balance || 0))
-  )), /* @__PURE__ */ import_react67.default.createElement("td", { className: "Layer__table-cell Layer__coa__actions" }, /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ import_react67.default.createElement(
-    Button,
+  const desktopRowClass = (0, import_classnames31.default)(
+    baseClass,
+    "Layer__chart-of-accounts__row---desktop"
+  );
+  const mobileRowClass = (0, import_classnames31.default)(
+    baseClass,
+    "Layer__chart-of-accounts__row---mobile"
+  );
+  return /* @__PURE__ */ import_react69.default.createElement(import_react69.default.Fragment, null, view === "desktop" && /* @__PURE__ */ import_react69.default.createElement(
+    "tr",
     {
-      variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ import_react67.default.createElement(Edit2_default, { size: 12 }),
+      className: desktopRowClass,
       onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
-        editAccount(account.id);
+        setAccountId(account.id);
       }
     },
-    "Edit"
-  ), /* @__PURE__ */ import_react67.default.createElement(
-    Button,
+    /* @__PURE__ */ import_react69.default.createElement("td", { className: "Layer__table-cell Layer__coa__name" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ import_react69.default.createElement(
+      "span",
+      {
+        className: "Layer__table-cell-content-indentation",
+        style: {
+          paddingLeft: INDENTATION * depth + 16
+        }
+      },
+      account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ import_react69.default.createElement(
+        ChevronDownFill_default,
+        {
+          size: 16,
+          className: "Layer__table__expand-icon",
+          onClick: (e) => {
+            e.stopPropagation();
+            setIsOpen(!isOpen);
+          }
+        }
+      ),
+      /* @__PURE__ */ import_react69.default.createElement("span", { className: "Layer__coa__name__text" }, account.name)
+    ))),
+    /* @__PURE__ */ import_react69.default.createElement("td", { className: "Layer__table-cell Layer__coa__type" }, /* @__PURE__ */ import_react69.default.createElement(
+      "span",
+      {
+        className: "Layer__table-cell-content Layer__mobile--hidden",
+        style
+      },
+      account.normality
+    ), /* @__PURE__ */ import_react69.default.createElement(
+      "span",
+      {
+        className: "Layer__table-cell-content Layer__desktop--hidden",
+        style
+      },
+      /* @__PURE__ */ import_react69.default.createElement(
+        Text,
+        {
+          weight: "bold" /* bold */,
+          className: "Layer__coa__type--mobile"
+        },
+        account.normality
+      ),
+      /* @__PURE__ */ import_react69.default.createElement(Text, { className: "Layer__coa__subtype--mobile" }, "Sub-Type")
+    )),
+    /* @__PURE__ */ import_react69.default.createElement("td", { className: "Layer__table-cell Layer__coa__subtype Layer__mobile--hidden" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "Layer__table-cell-content", style }, "Sub-Type")),
+    /* @__PURE__ */ import_react69.default.createElement("td", { className: "Layer__table-cell Layer__coa__balance" }, /* @__PURE__ */ import_react69.default.createElement(
+      "span",
+      {
+        className: "Layer__table-cell-content Layer__table-cell--amount",
+        style
+      },
+      "$",
+      centsToDollars(Math.abs(account.balance || 0))
+    )),
+    /* @__PURE__ */ import_react69.default.createElement("td", { className: "Layer__table-cell Layer__coa__actions" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ import_react69.default.createElement(
+      Button,
+      {
+        variant: "secondary" /* secondary */,
+        rightIcon: /* @__PURE__ */ import_react69.default.createElement(Edit2_default, { size: 12 }),
+        iconOnly: true,
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          editAccount(account.id);
+        }
+      },
+      "Edit"
+    )))
+  ), view === "mobile" || view === "tablet" ? /* @__PURE__ */ import_react69.default.createElement(
+    "tr",
     {
-      variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ import_react67.default.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__ */ import_react67.default.createElement(
-    LedgerAccountsRow,
+    /* @__PURE__ */ import_react69.default.createElement("td", { className: "Layer__table-cell", colSpan: 5 }, /* @__PURE__ */ import_react69.default.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__ */ import_react69.default.createElement(
+        ChevronDownFill_default,
+        {
+          size: 16,
+          className: "Layer__table__expand-icon",
+          onClick: (e) => {
+            e.stopPropagation();
+            setIsOpen(!isOpen);
+          }
+        }
+      ),
+      /* @__PURE__ */ import_react69.default.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__top-row" }, /* @__PURE__ */ import_react69.default.createElement(
+        Text,
+        {
+          as: "span",
+          className: "Layer__chart-of-accounts__mobile-row-content__name"
+        },
+        account.name
+      ), /* @__PURE__ */ import_react69.default.createElement(
+        TextButton,
+        {
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            editAccount(account.id);
+          }
+        },
+        "Edit"
+      )), /* @__PURE__ */ import_react69.default.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__bottom-row" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__types" }, /* @__PURE__ */ import_react69.default.createElement(Text, { as: "span" }, account.normality), /* @__PURE__ */ import_react69.default.createElement("span", { className: "Layer__chart-of-accounts__mobile-row-content__separator" }), /* @__PURE__ */ import_react69.default.createElement(Text, { as: "span" }, "Sub-Type")), /* @__PURE__ */ import_react69.default.createElement(
+        Text,
+        {
+          as: "span",
+          className: "Layer__chart-of-accounts__mobile-row-content__balance"
+        },
+        "$",
+        centsToDollars(Math.abs(account.balance || 0))
+      )))
+    ))
+  ) : null, (account.sub_accounts || []).map((subAccount, idx) => /* @__PURE__ */ import_react69.default.createElement(
+    ChartOfAccountsRow,
     {
       key: subAccount.id,
       account: subAccount,
@@ -6872,16 +7343,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
-var import_react69 = __toESM(require("react"));
+// src/components/ChartOfAccountsSidebar/ChartOfAccountsSidebar.tsx
+var import_react72 = __toESM(require("react"));
+
+// src/components/ChartOfAccountsForm/ChartOfAccountsForm.tsx
+var import_react71 = __toESM(require("react"));
 
-// src/components/LedgerAccountsForm/LedgerAccountsForm.tsx
-var import_react68 = __toESM(require("react"));
+// src/components/ChartOfAccountsForm/constants.ts
 var SUB_TYPE_OPTIONS = [
   {
     value: "DEBIT" /* DEBIT */,
@@ -6892,7 +7366,21 @@ var SUB_TYPE_OPTIONS = [
     label: "Credit"
   }
 ];
-var LedgerAccountsForm = () => {
+
+// src/components/ChartOfAccountsForm/useParentOptions.ts
+var import_react70 = require("react");
+var useParentOptions = (data) => (0, import_react70.useMemo)(
+  () => 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,
@@ -6901,17 +7389,9 @@ var LedgerAccountsForm = () => {
     submitForm,
     sendingForm,
     apiError
-  } = (0, import_react68.useContext)(LedgerAccountsContext);
-  const parentOptions = (0, import_react68.useMemo)(
-    () => 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]
-  );
-  const entry = (0, import_react68.useMemo)(() => {
+  } = (0, import_react71.useContext)(ChartOfAccountsContext);
+  const parentOptions = useParentOptions(data);
+  const entry = (0, import_react71.useMemo)(() => {
     if (form?.action === "edit" && form.accountId) {
       return flattenAccounts(data?.accounts || []).find(
         (x) => x.id === form.accountId
@@ -6922,7 +7402,7 @@ var LedgerAccountsForm = () => {
   if (!form) {
     return;
   }
-  return /* @__PURE__ */ import_react68.default.createElement(
+  return /* @__PURE__ */ import_react71.default.createElement(
     "form",
     {
       className: "Layer__form",
@@ -6931,7 +7411,7 @@ var LedgerAccountsForm = () => {
         submitForm();
       }
     },
-    /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__ledger-accounts__sidebar__header" }, /* @__PURE__ */ import_react68.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? "Edit" : "Add New", " Account"), /* @__PURE__ */ import_react68.default.createElement("div", { className: "actions" }, /* @__PURE__ */ import_react68.default.createElement(
+    /* @__PURE__ */ import_react71.default.createElement("div", { className: "Layer__chart-of-accounts__sidebar__header" }, /* @__PURE__ */ import_react71.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? "Edit" : "Add New", " Account"), /* @__PURE__ */ import_react71.default.createElement("div", { className: "actions" }, /* @__PURE__ */ import_react71.default.createElement(
       Button,
       {
         type: "button",
@@ -6940,7 +7420,7 @@ var LedgerAccountsForm = () => {
         disabled: sendingForm
       },
       "Cancel"
-    ), apiError && /* @__PURE__ */ import_react68.default.createElement(
+    ), apiError && /* @__PURE__ */ import_react71.default.createElement(
       RetryButton,
       {
         type: "submit",
@@ -6949,7 +7429,7 @@ var LedgerAccountsForm = () => {
         disabled: sendingForm
       },
       "Retry"
-    ), !apiError && /* @__PURE__ */ import_react68.default.createElement(
+    ), !apiError && /* @__PURE__ */ import_react71.default.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -6959,16 +7439,16 @@ var LedgerAccountsForm = () => {
       },
       "Save"
     ))),
-    apiError && /* @__PURE__ */ import_react68.default.createElement(
+    apiError && /* @__PURE__ */ import_react71.default.createElement(
       Text,
       {
         size: "sm" /* sm */,
-        className: "Layer__ledger-accounts__form__error-message"
+        className: "Layer__chart-of-accounts__form__error-message"
       },
       apiError
     ),
-    entry && /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__ledger-accounts__form-edit-entry" }, /* @__PURE__ */ import_react68.default.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ import_react68.default.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
-    /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__ledger-accounts__form" }, /* @__PURE__ */ import_react68.default.createElement(InputGroup, { name: "parent", label: "Parent", inline: true }, /* @__PURE__ */ import_react68.default.createElement(
+    entry && /* @__PURE__ */ import_react71.default.createElement("div", { className: "Layer__chart-of-accounts__form-edit-entry" }, /* @__PURE__ */ import_react71.default.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ import_react71.default.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
+    /* @__PURE__ */ import_react71.default.createElement("div", { className: "Layer__chart-of-accounts__form" }, /* @__PURE__ */ import_react71.default.createElement(InputGroup, { name: "parent", label: "Parent", inline: true }, /* @__PURE__ */ import_react71.default.createElement(
       Select2,
       {
         options: parentOptions,
@@ -6976,7 +7456,7 @@ var LedgerAccountsForm = () => {
         onChange: (sel) => changeFormData("parent", sel),
         disabled: sendingForm
       }
-    )), /* @__PURE__ */ import_react68.default.createElement(InputGroup, { name: "name", label: "Name", inline: true }, /* @__PURE__ */ import_react68.default.createElement(
+    )), /* @__PURE__ */ import_react71.default.createElement(InputGroup, { name: "name", label: "Name", inline: true }, /* @__PURE__ */ import_react71.default.createElement(
       Input,
       {
         name: "name",
@@ -6987,7 +7467,7 @@ var LedgerAccountsForm = () => {
         disabled: sendingForm,
         onChange: (e) => changeFormData("name", e.target.value)
       }
-    )), /* @__PURE__ */ import_react68.default.createElement(InputGroup, { name: "type", label: "Type", inline: true }, /* @__PURE__ */ import_react68.default.createElement(
+    )), /* @__PURE__ */ import_react71.default.createElement(InputGroup, { name: "type", label: "Type", inline: true }, /* @__PURE__ */ import_react71.default.createElement(
       Select2,
       {
         options: [],
@@ -6995,7 +7475,7 @@ var LedgerAccountsForm = () => {
         value: form?.data.type,
         onChange: (sel) => changeFormData("type", sel)
       }
-    )), /* @__PURE__ */ import_react68.default.createElement(InputGroup, { name: "subType", label: "Sub-Type", inline: true }, /* @__PURE__ */ import_react68.default.createElement(
+    )), /* @__PURE__ */ import_react71.default.createElement(InputGroup, { name: "subType", label: "Sub-Type", inline: true }, /* @__PURE__ */ import_react71.default.createElement(
       Select2,
       {
         options: SUB_TYPE_OPTIONS,
@@ -7003,7 +7483,7 @@ var LedgerAccountsForm = () => {
         onChange: (sel) => changeFormData("subType", sel),
         disabled: sendingForm
       }
-    )), /* @__PURE__ */ import_react68.default.createElement(InputGroup, { name: "category", label: "Category", inline: true }, /* @__PURE__ */ import_react68.default.createElement(
+    )), /* @__PURE__ */ import_react71.default.createElement(InputGroup, { name: "category", label: "Category", inline: true }, /* @__PURE__ */ import_react71.default.createElement(
       Select2,
       {
         options: [],
@@ -7015,107 +7495,500 @@ var LedgerAccountsForm = () => {
   );
 };
 
-// src/components/LedgerAccountsSidebar/LedgerAccountsSidebar.tsx
+// src/components/ChartOfAccountsSidebar/ChartOfAccountsSidebar.tsx
+var ChartOfAccountsSidebar = ({
+  parentRef: _parentRef
+}) => {
+  return /* @__PURE__ */ import_react72.default.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 } = (0, import_react73.useContext)(ChartOfAccountsContext);
+  let cumulativeIndex = 0;
+  const accountsLength = data?.accounts.length ?? 0;
+  return /* @__PURE__ */ import_react73.default.createElement(
+    Panel,
+    {
+      sidebar: /* @__PURE__ */ import_react73.default.createElement(ChartOfAccountsSidebar, { parentRef: containerRef }),
+      sidebarIsOpen: Boolean(form),
+      parentRef: containerRef
+    },
+    /* @__PURE__ */ import_react73.default.createElement(Header, { className: `Layer__${COMPONENT_NAME4}__header` }, /* @__PURE__ */ import_react73.default.createElement(Heading, { className: `Layer__${COMPONENT_NAME4}__title` }, "Chart of Accounts"), /* @__PURE__ */ import_react73.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__actions` }, /* @__PURE__ */ import_react73.default.createElement(
+      Button,
+      {
+        variant: "secondary" /* secondary */,
+        disabled: isLoading,
+        rightIcon: /* @__PURE__ */ import_react73.default.createElement(DownloadCloud_default, { size: 12 })
+      },
+      "Download"
+    ), /* @__PURE__ */ import_react73.default.createElement(Button, { onClick: () => addAccount(), disabled: isLoading }, "Add Account"))),
+    /* @__PURE__ */ import_react73.default.createElement("table", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ import_react73.default.createElement("thead", null, /* @__PURE__ */ import_react73.default.createElement("tr", { className: "Layer__table-row--header" }, /* @__PURE__ */ import_react73.default.createElement("th", { className: "Layer__table-header Layer__coa__name" }, "Name"), /* @__PURE__ */ import_react73.default.createElement("th", { className: "Layer__table-header Layer__coa__type" }, "Type"), /* @__PURE__ */ import_react73.default.createElement("th", { className: "Layer__table-header Layer__coa__subtype Layer__mobile--hidden" }, "Sub-Type"), /* @__PURE__ */ import_react73.default.createElement("th", { className: "Layer__table-header Layer__coa__balance" }, "Balance"), /* @__PURE__ */ import_react73.default.createElement("th", { className: "Layer__table-header Layer__coa__actions" }))), /* @__PURE__ */ import_react73.default.createElement("tbody", null, !error && data?.accounts.map((account, idx) => {
+      const currentCumulativeIndex = cumulativeIndex;
+      cumulativeIndex = (account.sub_accounts?.length || 0) + cumulativeIndex + 1;
+      return /* @__PURE__ */ import_react73.default.createElement(
+        ChartOfAccountsRow,
+        {
+          key: account.id,
+          account,
+          depth: 0,
+          index: idx,
+          cumulativeIndex: currentCumulativeIndex,
+          expanded: true,
+          defaultOpen: true,
+          acountsLength: accountsLength,
+          view
+        }
+      );
+    }))),
+    error ? /* @__PURE__ */ import_react73.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react73.default.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__ */ import_react73.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__loader-container` }, /* @__PURE__ */ import_react73.default.createElement(Loader2, null)) : null,
+    !isLoading && !error && data?.accounts.length === 0 ? /* @__PURE__ */ import_react73.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react73.default.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
+var import_react80 = __toESM(require("react"));
+
+// src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
+var import_react78 = __toESM(require("react"));
+
+// src/components/Card/Card.tsx
+var import_react74 = __toESM(require("react"));
 var import_classnames32 = __toESM(require("classnames"));
-var LedgerAccountsSidebar = () => {
-  const { form } = (0, import_react69.useContext)(LedgerAccountsContext);
-  return /* @__PURE__ */ import_react69.default.createElement(
-    "div",
+var Card = ({ children, className }) => {
+  return /* @__PURE__ */ import_react74.default.createElement("div", { className: (0, import_classnames32.default)("Layer__card", className) }, children);
+};
+
+// src/components/DateTime/DateTime.tsx
+var import_react75 = __toESM(require("react"));
+var import_date_fns15 = require("date-fns");
+var DateTime = ({
+  value,
+  format: format7,
+  dateFormat,
+  timeFormat,
+  onlyDate,
+  onlyTime
+}) => {
+  if (format7) {
+    return /* @__PURE__ */ import_react75.default.createElement(Text, { className: "Layer__datetime" }, (0, import_date_fns15.format)((0, import_date_fns15.parseISO)(value), format7));
+  }
+  const date = (0, import_date_fns15.format)((0, import_date_fns15.parseISO)(value), dateFormat ?? DATE_FORMAT);
+  const time = (0, import_date_fns15.format)((0, import_date_fns15.parseISO)(value), timeFormat ?? TIME_FORMAT);
+  return /* @__PURE__ */ import_react75.default.createElement(Text, { className: "Layer__datetime" }, !onlyTime && /* @__PURE__ */ import_react75.default.createElement(
+    Text,
     {
-      className: (0, import_classnames32.default)(
-        "Layer__ledger-accounts__sidebar",
-        form ? "open" : ""
+      as: "span",
+      weight: "bold" /* bold */,
+      size: "sm" /* sm */,
+      className: "Layer__datetime__date"
+    },
+    date
+  ), !onlyDate && /* @__PURE__ */ import_react75.default.createElement(
+    Text,
+    {
+      as: "span",
+      weight: "bold" /* bold */,
+      size: "sm" /* sm */,
+      className: "Layer__datetime__time"
+    },
+    time
+  ));
+};
+
+// src/components/DetailsList/DetailsList.tsx
+var import_react76 = __toESM(require("react"));
+var import_classnames33 = __toESM(require("classnames"));
+var DetailsList = ({
+  title,
+  children,
+  className,
+  actions
+}) => {
+  return /* @__PURE__ */ import_react76.default.createElement("div", { className: (0, import_classnames33.default)("Layer__details-list", className) }, title && /* @__PURE__ */ import_react76.default.createElement(Header, null, /* @__PURE__ */ import_react76.default.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ import_react76.default.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ import_react76.default.createElement("ul", { className: "Layer__details-list__list" }, children));
+};
+
+// src/components/DetailsList/DetailsListItem.tsx
+var import_react77 = __toESM(require("react"));
+var renderValue = (value) => {
+  if (typeof value === "string") {
+    return /* @__PURE__ */ import_react77.default.createElement(Text, { weight: "bold" /* bold */, size: "sm" /* sm */ }, value);
+  }
+  return value;
+};
+var DetailsListItem = ({
+  label,
+  children,
+  isLoading
+}) => {
+  return /* @__PURE__ */ import_react77.default.createElement("li", { className: "Layer__details-list-item" }, /* @__PURE__ */ import_react77.default.createElement("label", { className: "Layer__details-list-item__label" }, label), /* @__PURE__ */ import_react77.default.createElement("span", { className: "Layer__details-list-item__value" }, isLoading ? /* @__PURE__ */ import_react77.default.createElement(SkeletonLoader, null) : renderValue(children)));
+};
+
+// src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
+var LedgerAccountEntryDetails = () => {
+  const { entryData, isLoadingEntry, closeSelectedEntry, errorEntry } = (0, import_react78.useContext)(LedgerAccountsContext);
+  const { totalDebit, totalCredit } = (0, import_react78.useMemo)(() => {
+    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__ */ import_react78.default.createElement("div", { className: "Layer__ledger-account__entry-details" }, /* @__PURE__ */ import_react78.default.createElement("div", { className: "Layer__ledger-account__entry-details__back-btn" }, /* @__PURE__ */ import_react78.default.createElement(BackButton, { onClick: () => closeSelectedEntry() })), /* @__PURE__ */ import_react78.default.createElement(
+    DetailsList,
+    {
+      title: "Transaction source",
+      actions: /* @__PURE__ */ import_react78.default.createElement(
+        IconButton,
+        {
+          icon: /* @__PURE__ */ import_react78.default.createElement(X_default, null),
+          onClick: () => closeSelectedEntry(),
+          className: "Layer__hidden-sm Layer__hidden-xs"
+        }
       )
     },
-    /* @__PURE__ */ import_react69.default.createElement("div", { className: "Layer__ledger-accounts__sidebar-content" }, /* @__PURE__ */ import_react69.default.createElement(LedgerAccountsForm, null))
+    /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ import_react78.default.createElement(Badge, null, "Invoice")),
+    /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Number", isLoading: isLoadingEntry }, "1234"),
+    /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Date", isLoading: isLoadingEntry }, "May 5, 2023"),
+    /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Account", isLoading: isLoadingEntry }, "89 8888 7656 6666 0000 6765")
+  ), /* @__PURE__ */ import_react78.default.createElement(DetailsList, { title: "Journal Entry #123", className: "Layer__border-top" }, /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry }, humanizeEnum(entryData?.entry_type ?? "")), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Date", isLoading: isLoadingEntry }, entryData?.entry_at && /* @__PURE__ */ import_react78.default.createElement(DateTime, { value: entryData?.entry_at })), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Creation date", isLoading: isLoadingEntry }, entryData?.date && /* @__PURE__ */ import_react78.default.createElement(DateTime, { value: entryData?.date })), /* @__PURE__ */ import_react78.default.createElement(DetailsListItem, { label: "Reversal", isLoading: isLoadingEntry }, "Journal Entry #79 TBD")), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ import_react78.default.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ import_react78.default.createElement(Card, null, /* @__PURE__ */ import_react78.default.createElement("table", { className: "Layer__table Layer__ledger-account__entry-details__table" }, /* @__PURE__ */ import_react78.default.createElement("thead", null, /* @__PURE__ */ import_react78.default.createElement("tr", null, /* @__PURE__ */ import_react78.default.createElement("th", { className: "Layer__table-header" }, "Line items"), /* @__PURE__ */ import_react78.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Debit"), /* @__PURE__ */ import_react78.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Credit"))), /* @__PURE__ */ import_react78.default.createElement("tbody", null, entryData?.line_items?.map((item) => /* @__PURE__ */ import_react78.default.createElement("tr", { key: `ledger-line-item-${item.id}` }, /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell" }, item.account?.name || ""), /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ import_react78.default.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))), /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ import_react78.default.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0))))), /* @__PURE__ */ import_react78.default.createElement("tr", { className: "Layer__table Layer__ledger-account__entry-details__table__total-row" }, /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell" }, "Total"), /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, "$", centsToDollars(totalDebit || 0)), /* @__PURE__ */ import_react78.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, "$", centsToDollars(totalCredit || 0))))))) : null);
+};
+
+// src/components/LedgerAccount/LedgerAccountRow.tsx
+var import_react79 = __toESM(require("react"));
+var import_classnames34 = __toESM(require("classnames"));
+var import_date_fns16 = require("date-fns");
+var LedgerAccountRow = ({
+  row,
+  index,
+  initialLoad,
+  view
+}) => {
+  const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = (0, import_react79.useContext)(LedgerAccountsContext);
+  const [showComponent, setShowComponent] = (0, import_react79.useState)(false);
+  (0, import_react79.useEffect)(() => {
+    if (initialLoad) {
+      const timeoutId = setTimeout(() => {
+        setShowComponent(true);
+      }, index * 10);
+      return () => clearTimeout(timeoutId);
+    } else {
+      setShowComponent(true);
+    }
+  }, []);
+  if (view === "tablet") {
+    return /* @__PURE__ */ import_react79.default.createElement(
+      "tr",
+      {
+        className: (0, import_classnames34.default)(
+          "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__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ import_react79.default.createElement(Text, null, row.date && (0, import_date_fns16.format)((0, import_date_fns16.parseISO)(row.date), DATE_FORMAT)), /* @__PURE__ */ import_react79.default.createElement(
+        Text,
+        {
+          weight: "bold" /* bold */,
+          className: "Layer__ledger_account-table__journal-id"
+        },
+        "#123"
+      )), /* @__PURE__ */ import_react79.default.createElement(Text, null, "Invoice (TBD null)"))),
+      /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)),
+      /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)),
+      /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, "$X,XXX.XX"))
+    );
+  }
+  if (view === "mobile") {
+    return /* @__PURE__ */ import_react79.default.createElement(
+      "tr",
+      {
+        className: (0, import_classnames34.default)(
+          "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__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ import_react79.default.createElement(Text, null, row.date && (0, import_date_fns16.format)((0, import_date_fns16.parseISO)(row.date), DATE_FORMAT)), /* @__PURE__ */ import_react79.default.createElement(
+        Text,
+        {
+          weight: "bold" /* bold */,
+          className: "Layer__ledger_account-table__journal-id"
+        },
+        "#123"
+      )), /* @__PURE__ */ import_react79.default.createElement(Text, null, "Invoice (TBD null)"), /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger_account-table__balances-mobile" }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Debit"), /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, " ", row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)), /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Credit"), /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)), /* @__PURE__ */ import_react79.default.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Running balance"), /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, "$X,XXX.XX")))))
+    );
+  }
+  return /* @__PURE__ */ import_react79.default.createElement(
+    "tr",
+    {
+      className: (0, import_classnames34.default)(
+        "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__ */ import_react79.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content" }, row.date && (0, import_date_fns16.format)((0, import_date_fns16.parseISO)(row.date), DATE_FORMAT))),
+    /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content" }, "#123")),
+    /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content" }, "Invoice (TBD null)")),
+    /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)),
+    /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)),
+    /* @__PURE__ */ import_react79.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, "$X,XXX.XX"))
+  );
+};
+
+// src/components/LedgerAccount/LedgerAccountIndex.tsx
+var import_classnames35 = __toESM(require("classnames"));
+var LedgerAccount = ({
+  containerRef,
+  pageSize = 15,
+  view
+}) => {
+  const [currentPage, setCurrentPage] = (0, import_react80.useState)(1);
+  const [initialLoad, setInitialLoad] = (0, import_react80.useState)(true);
+  const { data: accountData } = (0, import_react80.useContext)(ChartOfAccountsContext);
+  const {
+    data: rawData,
+    error,
+    isLoading,
+    isValidating,
+    accountId,
+    setAccountId,
+    selectedEntryId,
+    closeSelectedEntry,
+    refetch
+  } = (0, import_react80.useContext)(LedgerAccountsContext);
+  (0, import_react80.useEffect)(() => {
+    if (!isLoading) {
+      const timeoutLoad = setTimeout(() => {
+        setInitialLoad(false);
+      }, 1e3);
+      return () => clearTimeout(timeoutLoad);
+    }
+  }, [isLoading]);
+  const baseClassName = (0, import_classnames35.default)(
+    "Layer__ledger-account__index",
+    accountId && "open"
+  );
+  const entry = (0, import_react80.useMemo)(() => {
+    return flattenAccounts(accountData?.accounts || []).find(
+      (x) => x.id === accountId
+    );
+  }, [accountId]);
+  const data = (0, import_react80.useMemo)(() => {
+    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__ */ import_react80.default.createElement(
+    Panel,
+    {
+      sidebar: /* @__PURE__ */ import_react80.default.createElement(LedgerAccountEntryDetails, null),
+      sidebarIsOpen: Boolean(selectedEntryId),
+      parentRef: containerRef,
+      className: "Layer__ledger-account__panel"
+    },
+    /* @__PURE__ */ import_react80.default.createElement("div", { className: baseClassName }, /* @__PURE__ */ import_react80.default.createElement("div", { className: "Layer__ledger-account__header" }, /* @__PURE__ */ import_react80.default.createElement(BackButton, { onClick: close }), /* @__PURE__ */ import_react80.default.createElement("div", { className: "Layer__ledger-account__title-container" }, /* @__PURE__ */ import_react80.default.createElement(
+      Text,
+      {
+        weight: "bold" /* bold */,
+        className: "Layer__ledger-account__title"
+      },
+      entry?.name ?? ""
+    ), /* @__PURE__ */ import_react80.default.createElement(
+      Button,
+      {
+        variant: "secondary" /* secondary */,
+        rightIcon: /* @__PURE__ */ import_react80.default.createElement(DownloadCloud_default, { size: 12 })
+      },
+      "Download"
+    )), /* @__PURE__ */ import_react80.default.createElement("div", { className: "Layer__ledger-account__balance-container" }, /* @__PURE__ */ import_react80.default.createElement(
+      Text,
+      {
+        weight: "bold" /* bold */,
+        className: "Layer__ledger-account__balance-label"
+      },
+      "Current balance"
+    ), /* @__PURE__ */ import_react80.default.createElement(
+      Text,
+      {
+        weight: "bold" /* bold */,
+        className: "Layer__ledger-account__balance-value"
+      },
+      "$",
+      centsToDollars(entry?.balance || 0)
+    ))), /* @__PURE__ */ import_react80.default.createElement("table", { className: "Layer__table Layer__table--hover-effect Layer__ledger-account-table" }, /* @__PURE__ */ import_react80.default.createElement("thead", null, /* @__PURE__ */ import_react80.default.createElement("tr", null, view !== "desktop" && /* @__PURE__ */ import_react80.default.createElement("th", null), view === "desktop" && /* @__PURE__ */ import_react80.default.createElement(import_react80.default.Fragment, null, /* @__PURE__ */ import_react80.default.createElement("th", { className: "Layer__table-header" }, "Date"), /* @__PURE__ */ import_react80.default.createElement("th", { className: "Layer__table-header" }, "Journal id #"), /* @__PURE__ */ import_react80.default.createElement("th", { className: "Layer__table-header" }, "Source")), view !== "mobile" && /* @__PURE__ */ import_react80.default.createElement(import_react80.default.Fragment, null, /* @__PURE__ */ import_react80.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Debit"), /* @__PURE__ */ import_react80.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Credit"), /* @__PURE__ */ import_react80.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Running balance")))), /* @__PURE__ */ import_react80.default.createElement("tbody", null, data?.map((x, index) => /* @__PURE__ */ import_react80.default.createElement(
+      LedgerAccountRow,
+      {
+        key: x.id,
+        row: x,
+        index,
+        initialLoad,
+        view
+      }
+    )))), data && /* @__PURE__ */ import_react80.default.createElement("div", { className: "Layer__ledger-account__pagination" }, /* @__PURE__ */ import_react80.default.createElement(
+      Pagination,
+      {
+        currentPage,
+        totalCount: rawData?.length || 0,
+        pageSize,
+        onPageChange: (page) => setCurrentPage(page)
+      }
+    )), error ? /* @__PURE__ */ import_react80.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react80.default.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__ */ import_react80.default.createElement("div", { className: `Layer__ledger-account__loader-container` }, /* @__PURE__ */ import_react80.default.createElement(Loader2, null)) : null, !isLoading && !error && data?.length === 0 ? /* @__PURE__ */ import_react80.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react80.default.createElement(
+      DataState,
+      {
+        status: "info" /* info */,
+        title: "No records found",
+        onRefresh: () => refetch(),
+        isLoading: isValidating
+      }
+    )) : null)
   );
 };
 
-// src/components/LedgerAccounts/LedgerAccounts.tsx
-var COMPONENT_NAME4 = "ledger-accounts";
-var LedgerAccountsContext = (0, import_react70.createContext)({
+// src/components/ChartOfAccounts/ChartOfAccounts.tsx
+var ChartOfAccountsContext = (0, import_react81.createContext)(
+  {
+    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 = (0, import_react81.createContext)({
   data: void 0,
+  entryData: void 0,
   isLoading: false,
+  isLoadingEntry: false,
   isValidating: false,
+  isValidatingEntry: false,
   error: void 0,
+  errorEntry: void 0,
   refetch: () => {
   },
-  create: () => {
+  accountId: void 0,
+  setAccountId: () => {
   },
-  form: void 0,
-  sendingForm: false,
-  apiError: void 0,
-  addAccount: () => {
+  selectedEntryId: void 0,
+  setSelectedEntryId: () => {
   },
-  editAccount: () => {
-  },
-  cancelForm: () => {
-  },
-  changeFormData: () => {
-  },
-  submitForm: () => {
-  },
-  showARForAccountId: void 0,
-  setShowARForAccountId: () => {
+  closeSelectedEntry: () => {
   }
 });
-var LedgerAccounts = () => {
-  const contextData = useLedgerAccounts();
-  return /* @__PURE__ */ import_react70.default.createElement(LedgerAccountsContext.Provider, { value: contextData }, /* @__PURE__ */ import_react70.default.createElement(LedgerAccountsContent, null));
+var ChartOfAccounts = (props) => {
+  const chartOfAccountsContextData = useChartOfAccounts();
+  const ledgerAccountsContextData = useLedgerAccounts();
+  return /* @__PURE__ */ import_react81.default.createElement(ChartOfAccountsContext.Provider, { value: chartOfAccountsContextData }, /* @__PURE__ */ import_react81.default.createElement(LedgerAccountsContext.Provider, { value: ledgerAccountsContextData }, /* @__PURE__ */ import_react81.default.createElement(ChartOfAccountsContent, null)));
 };
-var LedgerAccountsContent = () => {
-  const { data, isLoading, addAccount, error, isValidating, refetch } = (0, import_react70.useContext)(LedgerAccountsContext);
-  let cumulativeIndex = 0;
-  const accountsLength = data?.accounts.length ?? 0;
-  return /* @__PURE__ */ import_react70.default.createElement(Container, { name: COMPONENT_NAME4 }, /* @__PURE__ */ import_react70.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__main-panel` }, /* @__PURE__ */ import_react70.default.createElement(Header, { className: `Layer__${COMPONENT_NAME4}__header` }, /* @__PURE__ */ import_react70.default.createElement(Heading, { className: `Layer__${COMPONENT_NAME4}__title` }, "Chart of Accounts"), /* @__PURE__ */ import_react70.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__actions` }, /* @__PURE__ */ import_react70.default.createElement(
-    Button,
-    {
-      variant: "secondary" /* secondary */,
-      disabled: isLoading,
-      rightIcon: /* @__PURE__ */ import_react70.default.createElement(DownloadCloud_default, { size: 12 })
-    },
-    "Download"
-  ), /* @__PURE__ */ import_react70.default.createElement(Button, { onClick: () => addAccount(), disabled: isLoading }, "Add Account"))), /* @__PURE__ */ import_react70.default.createElement("table", { className: `Layer__${COMPONENT_NAME4}__table` }, /* @__PURE__ */ import_react70.default.createElement("thead", null, /* @__PURE__ */ import_react70.default.createElement("tr", { className: "Layer__table-row--header" }, /* @__PURE__ */ import_react70.default.createElement("th", { className: "Layer__table-header Layer__coa__name" }, "Name"), /* @__PURE__ */ import_react70.default.createElement("th", { className: "Layer__table-header Layer__coa__type" }, "Type"), /* @__PURE__ */ import_react70.default.createElement("th", { className: "Layer__table-header Layer__coa__subtype" }, "Sub-Type"), /* @__PURE__ */ import_react70.default.createElement("th", { className: "Layer__table-header Layer__coa__balance" }, "Balance"), /* @__PURE__ */ import_react70.default.createElement("th", { className: "Layer__table-header Layer__coa__actions" }))), /* @__PURE__ */ import_react70.default.createElement("tbody", null, !error && data?.accounts.map((account, idx) => {
-    const currentCumulativeIndex = cumulativeIndex;
-    cumulativeIndex = (account.sub_accounts?.length || 0) + cumulativeIndex + 1;
-    return /* @__PURE__ */ import_react70.default.createElement(
-      LedgerAccountsRow,
-      {
-        key: account.id,
-        account,
-        depth: 0,
-        index: idx,
-        cumulativeIndex: currentCumulativeIndex,
-        expanded: true,
-        defaultOpen: true,
-        acountsLength: accountsLength
+var ChartOfAccountsContent = ({ asWidget }) => {
+  const { accountId } = (0, import_react81.useContext)(LedgerAccountsContext);
+  const [view, setView] = (0, import_react81.useState)("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__ */ import_react70.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react70.default.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__ */ import_react70.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__loader-container` }, /* @__PURE__ */ import_react70.default.createElement(Loader2, null)) : null, !isLoading && !error && data?.accounts.length === 0 ? /* @__PURE__ */ import_react70.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react70.default.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__ */ import_react70.default.createElement(LedgerAccountsSidebar, null), /* @__PURE__ */ import_react70.default.createElement(AccountsReceivable, null));
+  });
+  return /* @__PURE__ */ import_react81.default.createElement(Container, { name: "chart-of-accounts", ref: containerRef, asWidget }, accountId ? /* @__PURE__ */ import_react81.default.createElement(LedgerAccount, { view, containerRef }) : /* @__PURE__ */ import_react81.default.createElement(ChartOfAccountsTable, { view, containerRef }));
 };
 
 // src/providers/LayerProvider/LayerProvider.tsx
-var import_react71 = __toESM(require("react"));
-var import_date_fns16 = require("date-fns");
-var import_swr7 = __toESM(require("swr"));
+var import_react82 = __toESM(require("react"));
+var import_date_fns17 = require("date-fns");
+var import_swr8 = __toESM(require("swr"));
 var reducer = (state, action) => {
   switch (action.type) {
     case "LayerContext.setAuth" /* setAuth */:
@@ -7155,7 +8028,7 @@ var LayerProvider = ({
   };
   const colors = buildColorsPalette(theme);
   const { url, scope, apiUrl } = LayerEnvironment[environment];
-  const [state, dispatch] = (0, import_react71.useReducer)(reducer, {
+  const [state, dispatch] = (0, import_react82.useReducer)(reducer, {
     auth: {
       access_token: "",
       token_type: "",
@@ -7168,8 +8041,8 @@ var LayerProvider = ({
     theme,
     colors
   });
-  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? (0, import_swr7.default)(
-    businessAccessToken === void 0 && appId !== void 0 && appSecret !== void 0 && (0, import_date_fns16.isBefore)(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
+  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? (0, import_swr8.default)(
+    businessAccessToken === void 0 && appId !== void 0 && appSecret !== void 0 && (0, import_date_fns17.isBefore)(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
     Layer.authenticate({
       appId,
       appSecret,
@@ -7178,7 +8051,7 @@ var LayerProvider = ({
     }),
     defaultSWRConfig
   ) : { data: void 0 };
-  (0, import_react71.useEffect)(() => {
+  (0, import_react82.useEffect)(() => {
     if (businessAccessToken) {
       dispatch({
         type: "LayerContext.setAuth" /* setAuth */,
@@ -7187,7 +8060,7 @@ var LayerProvider = ({
             access_token: businessAccessToken,
             token_type: "Bearer",
             expires_in: 3600,
-            expires_at: (0, import_date_fns16.add)(/* @__PURE__ */ new Date(), { seconds: 3600 })
+            expires_at: (0, import_date_fns17.add)(/* @__PURE__ */ new Date(), { seconds: 3600 })
           }
         }
       });
@@ -7197,13 +8070,13 @@ var LayerProvider = ({
         payload: {
           auth: {
             ...auth,
-            expires_at: (0, import_date_fns16.add)(/* @__PURE__ */ new Date(), { seconds: auth.expires_in })
+            expires_at: (0, import_date_fns17.add)(/* @__PURE__ */ new Date(), { seconds: auth.expires_in })
           }
         }
       });
     }
   }, [businessAccessToken, auth?.access_token]);
-  (0, import_swr7.default)(
+  (0, import_swr8.default)(
     businessId && auth?.access_token && `categories-${businessId}`,
     Layer.getCategories(apiUrl, auth?.access_token, { params: { businessId } }),
     {
@@ -7222,23 +8095,137 @@ 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__ */ import_react71.default.createElement(import_swr7.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react71.default.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
+  return /* @__PURE__ */ import_react82.default.createElement(import_swr8.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react82.default.createElement(
+    LayerContext.Provider,
+    {
+      value: { ...state, setTheme, getColor, setLightColor, setDarkColor, setColors }
+    },
+    children
+  ));
+};
+
+// src/views/AccountingOverview/AccountingOverview.tsx
+var import_react85 = __toESM(require("react"));
+
+// src/components/View/View.tsx
+var import_react84 = __toESM(require("react"));
+
+// src/components/ViewHeader/ViewHeader.tsx
+var import_react83 = __toESM(require("react"));
+var ViewHeader = ({ title, controls }) => {
+  return /* @__PURE__ */ import_react83.default.createElement("div", { className: "Layer__view-header" }, /* @__PURE__ */ import_react83.default.createElement("div", { className: "Layer__view-header__content" }, /* @__PURE__ */ import_react83.default.createElement(Heading, null, title), controls && /* @__PURE__ */ import_react83.default.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__ */ import_react84.default.createElement("div", { className: "Layer__view", style: { ...styles } }, /* @__PURE__ */ import_react84.default.createElement(ViewHeader, { title, controls: headerControls }), /* @__PURE__ */ import_react84.default.createElement("div", { className: "Layer__view-main" }, children));
+};
+
+// src/views/AccountingOverview/AccountingOverview.tsx
+var AccountingOverview = ({
+  title = "Accounting overview"
+}) => {
+  return /* @__PURE__ */ import_react85.default.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ import_react85.default.createElement(View6, { title, headerControls: /* @__PURE__ */ import_react85.default.createElement(ProfitAndLoss.DatePicker, null) }, /* @__PURE__ */ import_react85.default.createElement(ProfitAndLoss.Summaries, { actionable: false }), /* @__PURE__ */ import_react85.default.createElement(
+    Container,
+    {
+      name: "accounting-overview-profit-and-loss",
+      asWidget: true,
+      elevated: true
+    },
+    /* @__PURE__ */ import_react85.default.createElement(Header, null, /* @__PURE__ */ import_react85.default.createElement(Heading, { size: "secondary" /* secondary */ }, "Profit & Loss")),
+    /* @__PURE__ */ import_react85.default.createElement(ProfitAndLoss.Chart, null)
+  ), /* @__PURE__ */ import_react85.default.createElement("div", { className: "accounting-overview-profit-and-loss-charts" }, /* @__PURE__ */ import_react85.default.createElement(Container, { name: "accounting-overview-profit-and-loss-chart" }, /* @__PURE__ */ import_react85.default.createElement(ProfitAndLoss.DetailedCharts, { scope: "revenue", hideClose: true })), /* @__PURE__ */ import_react85.default.createElement(Container, { name: "accounting-overview-profit-and-loss-chart" }, /* @__PURE__ */ import_react85.default.createElement(ProfitAndLoss.DetailedCharts, { scope: "expenses", hideClose: true })))));
+};
+
+// src/views/BankTransactionsWithLinkedAccounts/BankTransactionsWithLinkedAccounts.tsx
+var import_react86 = __toESM(require("react"));
+var BankTransactionsWithLinkedAccounts = ({
+  title = "Bank transactions"
+}) => {
+  return /* @__PURE__ */ import_react86.default.createElement(View6, { title }, /* @__PURE__ */ import_react86.default.createElement(LinkedAccounts, { elevated: true }), /* @__PURE__ */ import_react86.default.createElement(BankTransactions, { asWidget: true }));
+};
+
+// src/views/Reports/Reports.tsx
+var import_react87 = __toESM(require("react"));
+var Reports = ({ title = "Reports" }) => {
+  const containerRef = (0, import_react87.useRef)(null);
+  return /* @__PURE__ */ import_react87.default.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ import_react87.default.createElement(View6, { title, headerControls: /* @__PURE__ */ import_react87.default.createElement(ProfitAndLoss.DatePicker, null) }, /* @__PURE__ */ import_react87.default.createElement(
+    Toggle,
+    {
+      name: "reports-tabs",
+      options: [
+        {
+          value: "profitAndLoss",
+          label: "Profit & loss"
+        },
+        {
+          value: "balanceSheet",
+          label: "Balance sheet",
+          disabled: true
+        }
+      ],
+      selected: "profitAndLoss",
+      onChange: () => null
+    }
+  ), /* @__PURE__ */ import_react87.default.createElement(Container, { name: "reports", ref: containerRef }, /* @__PURE__ */ import_react87.default.createElement(ReportsPanel, { containerRef }))));
+};
+var ReportsPanel = ({ containerRef }) => {
+  const { sidebarScope } = (0, import_react87.useContext)(ProfitAndLoss.Context);
+  return /* @__PURE__ */ import_react87.default.createElement(
+    Panel,
+    {
+      sidebar: /* @__PURE__ */ import_react87.default.createElement(ProfitAndLoss.DetailedCharts, null),
+      sidebarIsOpen: Boolean(sidebarScope),
+      parentRef: containerRef
+    },
+    /* @__PURE__ */ import_react87.default.createElement(ProfitAndLoss.Table, { asContainer: false })
+  );
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AccountingOverview,
   BalanceSheet,
   BankTransactions,
+  BankTransactionsWithLinkedAccounts,
+  ChartOfAccounts,
   Hello,
   LayerProvider,
-  LedgerAccounts,
   LinkedAccounts,
   ProfitAndLoss,
-  ProfitAndLossView
+  ProfitAndLossView,
+  Reports,
+  useLayerContext
 });
 //# sourceMappingURL=index.js.map