@layerfi/components 0.1.35 → 0.1.37

package/dist/esm/index.js

@@ -146,9 +146,11 @@ var getBalanceSheet = get(
 var getBankTransactions = get(
   ({
     businessId,
+    cursor,
+    categorized,
     sortBy = "date",
     sortOrder = "DESC"
-  }) => `/v1/businesses/${businessId}/bank-transactions?sort_by=${sortBy}&sort_order=${sortOrder}&limit=200`
+  }) => `/v1/businesses/${businessId}/bank-transactions?${cursor ? `cursor=${cursor}&` : ""}${categorized !== void 0 && categorized !== "" ? `categorized=${categorized}&` : ""}sort_by=${sortBy}&sort_order=${sortOrder}&limit=200`
 );
 var categorizeBankTransaction = put(
   ({ businessId, bankTransactionId }) => `/v1/businesses/${businessId}/bank-transactions/${bankTransactionId}/categorize`
@@ -612,6 +614,25 @@ import React6 from "react";
 
 // src/contexts/BankTransactionsContext/BankTransactionsContext.tsx
 import { createContext as createContext3, useContext as useContext4 } from "react";
+
+// src/types/bank_transactions.ts
+var Direction = /* @__PURE__ */ ((Direction3) => {
+  Direction3["CREDIT"] = "CREDIT";
+  Direction3["DEBIT"] = "DEBIT";
+  return Direction3;
+})(Direction || {});
+var DisplayState = /* @__PURE__ */ ((DisplayState2) => {
+  DisplayState2["review"] = "review";
+  DisplayState2["categorized"] = "categorized";
+  return DisplayState2;
+})(DisplayState || {});
+
+// src/types/categories.ts
+function hasSuggestions(categorization) {
+  return categorization.suggestions !== void 0 && categorization.suggestions.length > 0;
+}
+
+// src/contexts/BankTransactionsContext/BankTransactionsContext.tsx
 var BankTransactionsContext = createContext3({
   data: void 0,
   isLoading: false,
@@ -629,26 +650,18 @@ var BankTransactionsContext = createContext3({
     pagination: void 0
   },
   updateOneLocal: () => void 0,
+  removeAfterCategorize: () => void 0,
   activate: () => void 0,
-  display: "review" /* review */
+  display: "review" /* review */,
+  fetchMore: () => {
+  },
+  hasMore: false
 });
 var useBankTransactionsContext = () => useContext4(BankTransactionsContext);
 
 // src/hooks/useBankTransactions/useBankTransactions.tsx
 import { useEffect as useEffect2, useMemo as useMemo2, useState as useState4 } from "react";
 
-// src/types/bank_transactions.ts
-var Direction = /* @__PURE__ */ ((Direction3) => {
-  Direction3["CREDIT"] = "CREDIT";
-  Direction3["DEBIT"] = "DEBIT";
-  return Direction3;
-})(Direction || {});
-
-// src/types/categories.ts
-function hasSuggestions(categorization) {
-  return categorization.suggestions !== void 0 && categorization.suggestions.length > 0;
-}
-
 // src/components/BankTransactions/constants.ts
 var CategorizedCategories = [
   "CATEGORIZED" /* CATEGORIZED */,
@@ -669,7 +682,7 @@ var filterVisibility = (scope, bankTransaction) => {
   const inReview = ReviewCategories.includes(
     bankTransaction.categorization_status
   );
-  return scope === "TO_REVIEW" /* TO_REVIEW */ && inReview || scope === "CATEGORIZED" /* CATEGORIZED */ && categorized;
+  return scope === "review" /* review */ && inReview || scope === "categorized" /* categorized */ && categorized;
 };
 var isCategorized = (bankTransaction) => CategorizedCategories.includes(bankTransaction.categorization_status);
 
@@ -718,7 +731,7 @@ var applyCategorizationStatusFilter = (data, filter) => {
     return data;
   }
   return data?.filter(
-    (tx) => filterVisibility(filter, tx) || filter === "TO_REVIEW" /* TO_REVIEW */ && tx.recently_categorized || filter === "CATEGORIZED" /* CATEGORIZED */ && tx.recently_categorized
+    (tx) => filterVisibility(filter, tx) || filter === "review" /* review */ && tx.recently_categorized || filter === "categorized" /* categorized */ && tx.recently_categorized
   );
 };
 var appplyDateRangeFilter = (data, filter) => {
@@ -737,8 +750,8 @@ var appplyDateRangeFilter = (data, filter) => {
 };
 
 // src/hooks/useBankTransactions/useBankTransactions.tsx
-import useSWR from "swr";
-var useBankTransactions = () => {
+import useSWRInfinite from "swr/infinite";
+var useBankTransactions = (params) => {
   const {
     auth,
     businessId,
@@ -749,36 +762,82 @@ var useBankTransactions = () => {
     syncTimestamps,
     hasBeenTouched
   } = useLayerContext();
-  const [loadingStatus, setLoadingStatus] = useState4("initial");
-  const [filters, setTheFilters] = useState4();
-  const [active, setActive] = useState4(false);
+  const { scope = void 0 } = params ?? {};
+  const [filters, setTheFilters] = useState4(
+    scope ? { categorizationStatus: scope } : void 0
+  );
   const display = useMemo2(() => {
-    if (filters?.categorizationStatus === "TO_REVIEW" /* TO_REVIEW */) {
+    if (filters?.categorizationStatus === "review" /* review */) {
       return "review" /* review */;
     }
     return "categorized" /* categorized */;
   }, [filters?.categorizationStatus]);
-  const queryKey = useMemo2(() => {
-    if (!active) {
-      return false;
-    }
-    return businessId && auth?.access_token && `bank-transactions-${businessId}`;
-  }, [businessId, auth?.access_token, active]);
+  const [active, setActive] = useState4(false);
+  const [loadingStatus, setLoadingStatus] = useState4("initial");
+  const getKey = (_index, prevData) => {
+    if (!auth?.access_token || !active) {
+      return [false, void 0];
+    }
+    if (!prevData?.meta?.pagination?.cursor) {
+      return [
+        businessId && auth?.access_token && `bank-transactions${filters?.categorizationStatus ? `-scope-${filters?.categorizationStatus}` : ""}-${businessId}`,
+        void 0
+      ];
+    }
+    return [
+      businessId && auth?.access_token && `bank-transactions${filters?.categorizationStatus ? `-scope-${filters?.categorizationStatus}` : ""}-${businessId}-${prevData.meta.pagination.cursor}`,
+      prevData.meta.pagination.cursor
+    ];
+  };
   const {
-    data: responseData,
+    data: rawResponseData,
     isLoading,
     isValidating,
     error: responseError,
-    mutate
-  } = useSWR(
-    queryKey,
-    Layer.getBankTransactions(apiUrl, auth?.access_token, {
-      params: { businessId }
-    })
+    mutate,
+    size,
+    setSize
+  } = useSWRInfinite(
+    getKey,
+    async ([query, nextCursor]) => {
+      if (auth?.access_token) {
+        return Layer.getBankTransactions(apiUrl, auth?.access_token, {
+          params: {
+            businessId,
+            cursor: nextCursor,
+            categorized: filters?.categorizationStatus ? filters?.categorizationStatus === "categorized" /* categorized */ ? "true" : "false" : ""
+          }
+        }).call(false);
+      }
+      return {};
+    },
+    {
+      initialSize: 1,
+      revalidateFirstPage: false
+    }
   );
+  const data = useMemo2(() => {
+    if (rawResponseData && rawResponseData.length > 0) {
+      return rawResponseData?.map((x) => x?.data).flat().filter((x) => !!x);
+    }
+    return void 0;
+  }, [rawResponseData]);
+  const lastMetadata = useMemo2(() => {
+    if (rawResponseData && rawResponseData.length > 0) {
+      return rawResponseData[rawResponseData.length - 1].meta;
+    }
+    return void 0;
+  }, [rawResponseData]);
+  const hasMore = useMemo2(() => {
+    if (rawResponseData && rawResponseData.length > 0) {
+      const lastElement = rawResponseData[rawResponseData.length - 1];
+      return Boolean(lastElement.meta?.pagination?.cursor && lastElement.meta?.pagination?.has_more);
+    }
+    return false;
+  }, [rawResponseData]);
   const accountsList = useMemo2(
-    () => collectAccounts(responseData?.data),
-    [responseData]
+    () => data ? collectAccounts(data) : [],
+    [data]
   );
   useEffect2(() => {
     if (isLoading && loadingStatus === "initial") {
@@ -799,13 +858,11 @@ var useBankTransactions = () => {
       ...value ?? {}
     });
   };
-  const {
-    data = void 0,
-    meta: metadata = {},
-    error = void 0
-  } = responseData || {};
   const filteredData = useMemo2(() => {
     let filtered = data;
+    if (!filtered) {
+      return;
+    }
     if (filters?.amount?.min || filters?.amount?.max) {
       filtered = applyAmountFilter(filtered, filters.amount);
     }
@@ -825,7 +882,7 @@ var useBankTransactions = () => {
       filtered = appplyDateRangeFilter(filtered, filters?.dateRange);
     }
     return filtered;
-  }, [filters, responseData]);
+  }, [filters, data]);
   const categorize = (id, newCategory, notify) => {
     const foundBT = data?.find((x) => x.business_id === businessId && x.id === id);
     if (foundBT) {
@@ -898,14 +955,31 @@ var useBankTransactions = () => {
     }).finally(() => touch("BANK_TRANSACTIONS" /* BANK_TRANSACTIONS */));
   };
   const updateOneLocal = (newBankTransaction) => {
-    const updatedData = data?.map(
-      (bt) => bt.id === newBankTransaction.id ? newBankTransaction : bt
-    );
-    mutate({ data: updatedData }, { revalidate: false });
+    const updatedData = rawResponseData?.map((page) => {
+      return {
+        ...page,
+        data: page.data?.map((bt) => bt.id === newBankTransaction.id ? newBankTransaction : bt)
+      };
+    });
+    mutate(updatedData, { revalidate: false });
+  };
+  const removeAfterCategorize = (bankTransaction) => {
+    const updatedData = rawResponseData?.map((page) => {
+      return {
+        ...page,
+        data: page.data?.filter((bt) => bt.id !== bankTransaction.id)
+      };
+    });
+    mutate(updatedData, { revalidate: false });
   };
   const refetch = () => {
     mutate();
   };
+  const fetchMore = () => {
+    if (hasMore) {
+      setSize(size + 1);
+    }
+  };
   useEffect2(() => {
     if (isLoading || isValidating) {
       read("BANK_TRANSACTIONS" /* BANK_TRANSACTIONS */);
@@ -918,20 +992,23 @@ var useBankTransactions = () => {
   }, [syncTimestamps]);
   return {
     data: filteredData,
-    metadata,
+    metadata: lastMetadata,
     loadingStatus,
     isLoading,
     isValidating,
     refetch,
-    error: responseError || error,
+    error: responseError,
     categorize,
     match,
     updateOneLocal,
+    removeAfterCategorize,
     filters,
     setFilters,
     accountsList,
     activate,
-    display
+    display,
+    fetchMore,
+    hasMore
   };
 };
 
@@ -1184,7 +1261,7 @@ var hslToHex = (hsl) => {
 
 // src/providers/LayerProvider/LayerProvider.tsx
 import { add, isBefore } from "date-fns";
-import useSWR2, { SWRConfig } from "swr";
+import useSWR, { SWRConfig } from "swr";
 var reducer = (state, action) => {
   switch (action.type) {
     case "LayerContext.setAuth" /* setAuth */:
@@ -1224,10 +1301,20 @@ var LayerEnvironment = {
     scope: "https://api.layerfi.com/production",
     apiUrl: "https://api.layerfi.com"
   },
+  sandbox: {
+    url: "https://auth.layerfi.com/oauth2/token",
+    scope: "https://sandbox.layerfi.com/sandbox",
+    apiUrl: "https://sandbox.layerfi.com"
+  },
   staging: {
     url: "https://auth.layerfi.com/oauth2/token",
     scope: "https://sandbox.layerfi.com/sandbox",
     apiUrl: "https://sandbox.layerfi.com"
+  },
+  internalStaging: {
+    url: "https://auth.layerfi.com/oauth2/token",
+    scope: "https://sandbox.layerfi.com/sandbox",
+    apiUrl: "https://staging.layerfi.com"
   }
 };
 var LayerProvider = ({
@@ -1269,7 +1356,7 @@ var LayerProvider = ({
     toasts: []
   });
   const { touch, syncTimestamps, read, readTimestamps, hasBeenTouched } = useDataSync();
-  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? useSWR2(
+  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? useSWR(
     businessAccessToken === void 0 && appId !== void 0 && appSecret !== void 0 && isBefore(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
     Layer.authenticate({
       appId,
@@ -1304,7 +1391,7 @@ var LayerProvider = ({
       });
     }
   }, [businessAccessToken, auth?.access_token]);
-  useSWR2(
+  useSWR(
     businessId && state.auth?.access_token && `categories-${businessId}`,
     Layer.getCategories(apiUrl, state.auth?.access_token, {
       params: { businessId }
@@ -1321,7 +1408,7 @@ var LayerProvider = ({
       }
     }
   );
-  useSWR2(
+  useSWR(
     businessId && state?.auth?.access_token && `business-${businessId}`,
     Layer.getBusiness(apiUrl, state?.auth?.access_token, {
       params: { businessId }
@@ -1489,7 +1576,7 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
       external_account_source: "PLAID",
       balance: 435121,
       at: "2024-04-03T13:00:00Z",
-      created_at: "2024-04-06T16:44:35.715458Z"
+      created_at: "2024-04-06T22:47:59.715458Z"
     },
     current_ledger_balance: 373717,
     institution: {
@@ -1499,7 +1586,8 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
     connection_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
     connection_external_id: "11111",
     connection_needs_repair_as_of: null,
-    requires_user_confirmation_as_of: null
+    requires_user_confirmation_as_of: null,
+    is_syncing: true
   },
   {
     id: "f98ec50a-c370-484d-a35b-d00207436075",
@@ -1522,7 +1610,8 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
     connection_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
     connection_external_id: "11111",
     connection_needs_repair_as_of: null,
-    requires_user_confirmation_as_of: null
+    requires_user_confirmation_as_of: null,
+    is_syncing: false
   },
   {
     id: "843f1748-fdaa-422d-a73d-2489a40c8dc7",
@@ -1545,7 +1634,8 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
     connection_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
     connection_external_id: "11111",
     connection_needs_repair_as_of: "2024-03-06T16:44:35.715458Z",
-    requires_user_confirmation_as_of: null
+    requires_user_confirmation_as_of: null,
+    is_syncing: false
   },
   {
     id: "8f430e29-e339-4d71-a08a-fce469c7a7c1",
@@ -1568,12 +1658,13 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
     connection_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
     connection_external_id: "11111",
     connection_needs_repair_as_of: null,
-    requires_user_confirmation_as_of: "2024-03-06T16:44:35.715458Z"
+    requires_user_confirmation_as_of: "2024-03-06T16:44:35.715458Z",
+    is_syncing: false
   }
 ];
 
 // src/hooks/useLinkedAccounts/useLinkedAccounts.ts
-import useSWR3 from "swr";
+import useSWR2 from "swr";
 var DEBUG = true;
 var USE_MOCK_RESPONSE_DATA = false;
 var useLinkedAccounts = () => {
@@ -1597,7 +1688,7 @@ var useLinkedAccounts = () => {
     isValidating,
     error: responseError,
     mutate
-  } = useSWR3(
+  } = useSWR2(
     businessId && auth?.access_token && `linked-accounts-${businessId}`,
     Layer.getLinkedAccounts(apiUrl, auth?.access_token, {
       params: { businessId }
@@ -2118,15 +2209,13 @@ var countTransactionsToReview = ({
       };
       return transactions.filter((tx) => {
         try {
-          return filterVisibility("TO_REVIEW" /* TO_REVIEW */, tx) && isWithinInterval(parseISO2(tx.date), dateRangeInterval);
+          return filterVisibility("review" /* review */, tx) && isWithinInterval(parseISO2(tx.date), dateRangeInterval);
         } catch (_err) {
           return false;
         }
       }).length;
     }
-    return transactions.filter(
-      (tx) => filterVisibility("TO_REVIEW" /* TO_REVIEW */, tx)
-    ).length;
+    return transactions.filter((tx) => filterVisibility("review" /* review */, tx)).length;
   }
   return 0;
 };
@@ -3204,7 +3293,9 @@ var ConnectAccount = ({
   onTransactionsToReviewClick
 }) => {
   const { addConnection } = useContext5(LinkedAccountsContext);
-  const { data, isLoading } = useBankTransactions();
+  const { data, isLoading } = useBankTransactions({
+    scope: "review" /* review */
+  });
   const transactionsToReview = useMemo3(
     () => countTransactionsToReview({ transactions: data }),
     [data, isLoading]
@@ -3820,15 +3911,21 @@ var LinkedAccountThumb = ({
 }) => {
   const linkedAccountThumbClassName = classNames19(
     "Layer__linked-account-thumb",
-    asWidget && "--as-widget"
+    asWidget && "--as-widget",
+    account.is_syncing && "--is-syncing",
+    account.is_syncing && "skeleton-loader"
+  );
+  const linkedAccountInfoClassName = classNames19(
+    "topbar",
+    account.is_syncing && "--is-syncing"
   );
-  let balance;
+  let bankBalance;
   if (pillConfig) {
-    balance = /* @__PURE__ */ React53.createElement(LinkedAccountPill, { text: pillConfig.text, config: pillConfig.config });
+    bankBalance = /* @__PURE__ */ React53.createElement(LinkedAccountPill, { text: pillConfig.text, config: pillConfig.config });
   } else {
-    balance = /* @__PURE__ */ React53.createElement(Text, { as: "span", className: "account-balance" }, "$", centsToDollars(account.latest_balance_timestamp?.balance));
+    bankBalance = /* @__PURE__ */ React53.createElement(Text, { as: "span", className: "account-balance" }, `${centsToDollars(account.latest_balance_timestamp?.balance)}`);
   }
-  return /* @__PURE__ */ React53.createElement("div", { className: linkedAccountThumbClassName }, /* @__PURE__ */ React53.createElement("div", { className: "topbar" }, /* @__PURE__ */ React53.createElement("div", { className: "topbar-details" }, /* @__PURE__ */ React53.createElement(Text, { as: "span", className: "account-name" }, account.external_account_name), !asWidget && account.mask && /* @__PURE__ */ React53.createElement(AccountNumber, { accountNumber: account.mask }), /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React53.createElement("div", { className: linkedAccountThumbClassName }, /* @__PURE__ */ React53.createElement("div", { className: linkedAccountInfoClassName }, /* @__PURE__ */ React53.createElement("div", { className: "topbar-details" }, /* @__PURE__ */ React53.createElement(Text, { as: "div", className: "account-name" }, account.external_account_name), !asWidget && account.mask && /* @__PURE__ */ React53.createElement(AccountNumber, { accountNumber: account.mask }), /* @__PURE__ */ React53.createElement(
     Text,
     {
       as: "span",
@@ -3844,7 +3941,7 @@ var LinkedAccountThumb = ({
       src: `data:image/png;base64,${account.institution.logo}`,
       alt: account.institution?.name
     }
-  ) : /* @__PURE__ */ React53.createElement(InstitutionIcon_default, null))), !asWidget && /* @__PURE__ */ React53.createElement("div", { className: "middlebar" }, /* @__PURE__ */ React53.createElement(
+  ) : /* @__PURE__ */ React53.createElement(InstitutionIcon_default, null))), account.is_syncing ? /* @__PURE__ */ React53.createElement("div", { className: "loadingbar" }, /* @__PURE__ */ React53.createElement("div", { className: "loading-text Layer__text--sm" }, /* @__PURE__ */ React53.createElement("div", null, "Syncing account data"), /* @__PURE__ */ React53.createElement("div", { className: "syncing-data-description" }, "This may take up to 5 minutes")), /* @__PURE__ */ React53.createElement("div", { className: "loading-wrapper" }, /* @__PURE__ */ React53.createElement(Loader_default, { size: 11, className: "Layer__anim--rotating" }))) : /* @__PURE__ */ React53.createElement(React53.Fragment, null, !asWidget && /* @__PURE__ */ React53.createElement("div", { className: "middlebar" }, /* @__PURE__ */ React53.createElement(
     Text,
     {
       as: "span",
@@ -3852,7 +3949,7 @@ var LinkedAccountThumb = ({
       size: "sm"
     },
     "Bank balance"
-  ), balance), showLedgerBalance && /* @__PURE__ */ React53.createElement("div", { className: "bottombar" }, asWidget && account.mask ? /* @__PURE__ */ React53.createElement(AccountNumber, { accountNumber: account.mask }) : /* @__PURE__ */ React53.createElement(
+  ), bankBalance), showLedgerBalance && /* @__PURE__ */ React53.createElement("div", { className: "bottombar" }, asWidget && account.mask ? /* @__PURE__ */ React53.createElement(AccountNumber, { accountNumber: account.mask }) : /* @__PURE__ */ React53.createElement(
     Text,
     {
       as: "span",
@@ -3860,7 +3957,7 @@ var LinkedAccountThumb = ({
       size: "sm"
     },
     "Ledger balance"
-  ), /* @__PURE__ */ React53.createElement(Text, { as: "span", className: "account-balance" }, "$", centsToDollars(account.current_ledger_balance))));
+  ), /* @__PURE__ */ React53.createElement(Text, { as: "span", className: "account-balance" }, `${centsToDollars(account.current_ledger_balance)}`))));
 };
 
 // src/components/LinkedAccounts/LinkedAccountsContent.tsx
@@ -5568,9 +5665,20 @@ var ExpandedBankTransactionRow = forwardRef5(
       });
       setSplitFormError(void 0);
     };
+    const sanitizeNumberInput = (input) => {
+      let sanitized = input.replace(/[^0-9.]/g, "");
+      let parts = sanitized.split(".");
+      if (parts.length > 2) {
+        sanitized = parts[0] + "." + parts.slice(1).join("");
+      }
+      if (parts.length === 2) {
+        sanitized = parts[0] + "." + parts[1].slice(0, 2);
+      }
+      return sanitized;
+    };
     const updateAmounts = (rowNumber) => (event) => {
-      const newAmount = dollarsToCents(event.target.value) || 0;
-      const newDisplaying = event.target.value;
+      const newDisplaying = sanitizeNumberInput(event.target.value);
+      const newAmount = Number(newDisplaying);
       const splitTotal = rowState.splits.reduce((sum, split, index) => {
         const amount = index === 0 ? 0 : index === rowNumber ? newAmount : split.amount;
         return sum + amount;
@@ -6007,7 +6115,6 @@ var BankTransactionRow = ({
 }) => {
   const expandedRowRef = useRef10(null);
   const [showRetry, setShowRetry] = useState14(false);
-  const [removed, setRemoved] = useState14(false);
   const {
     filters,
     categorize: categorizeBankTransaction2,
@@ -6048,6 +6155,13 @@ var BankTransactionRow = ({
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
+  useEffect11(() => {
+    if (editable && bankTransaction.recently_categorized) {
+      setTimeout(() => {
+        removeTransaction(bankTransaction);
+      }, 300);
+    }
+  }, [bankTransaction.recently_categorized]);
   const save = async () => {
     if (open && expandedRowRef?.current) {
       expandedRowRef?.current?.save();
@@ -6070,9 +6184,6 @@ var BankTransactionRow = ({
     });
     setOpen(false);
   };
-  if (removed) {
-    return null;
-  }
   const categorized = isCategorized(bankTransaction);
   const className = "Layer__bank-transaction-row";
   const openClassName = open ? `${className}--expanded` : "";
@@ -6083,178 +6194,160 @@ var BankTransactionRow = ({
     initialLoad ? "initial-load" : "",
     showComponent ? "show" : ""
   );
-  return /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(
-    "tr",
+  return /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement("tr", { className: rowClassName }, /* @__PURE__ */ React81.createElement(
+    "td",
     {
-      className: rowClassName,
-      onTransitionEnd: ({ propertyName }) => {
-        if (propertyName === "top") {
-          if (editable) {
-            setRemoved(true);
-            removeTransaction(bankTransaction.id);
-          }
+      className: "Layer__table-cell  Layer__bank-transaction-table__date-col",
+      ...openRow
+    },
+    /* @__PURE__ */ React81.createElement("span", { className: "Layer__table-cell-content" }, formatTime5(parseISO7(bankTransaction.date), dateFormat))
+  ), /* @__PURE__ */ React81.createElement(
+    "td",
+    {
+      className: "Layer__table-cell Layer__bank-transactions__tx-col",
+      ...openRow
+    },
+    /* @__PURE__ */ React81.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React81.createElement(
+      Text,
+      {
+        as: "span",
+        className: "Layer__bank-transactions__tx-text",
+        withTooltip: "whenTruncated" /* whenTruncated */,
+        tooltipOptions: {
+          contentClassName: "Layer__bank-transactions__tx-tooltip"
         }
-      }
+      },
+      bankTransaction.counterparty_name ?? bankTransaction.description
+    ))
+  ), /* @__PURE__ */ React81.createElement(
+    "td",
+    {
+      className: "Layer__table-cell Layer__bank-transactions__account-col",
+      ...openRow
     },
-    /* @__PURE__ */ React81.createElement(
-      "td",
+    /* @__PURE__ */ React81.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React81.createElement(
+      Text,
       {
-        className: "Layer__table-cell  Layer__bank-transaction-table__date-col",
-        ...openRow
+        as: "span",
+        className: "Layer__bank-transactions__account-text",
+        withTooltip: "whenTruncated" /* whenTruncated */
       },
-      /* @__PURE__ */ React81.createElement("span", { className: "Layer__table-cell-content" }, formatTime5(parseISO7(bankTransaction.date), dateFormat))
-    ),
+      bankTransaction.account_name ?? ""
+    ))
+  ), /* @__PURE__ */ React81.createElement(
+    "td",
+    {
+      className: `Layer__table-cell Layer__table-cell__amount-col Layer__bank-transactions__amount-col Layer__table-cell--amount ${className}__table-cell--amount-${isCredit(bankTransaction) ? "credit" : "debit"}`,
+      ...openRow
+    },
+    /* @__PURE__ */ React81.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
+  ), /* @__PURE__ */ React81.createElement(
+    "td",
+    {
+      className: classNames33(
+        "Layer__table-cell",
+        "Layer__table-cell__category-col",
+        `${className}__actions-cell`,
+        `${className}__actions-cell--${open ? "open" : "close"}`
+      )
+    },
     /* @__PURE__ */ React81.createElement(
-      "td",
+      "span",
       {
-        className: "Layer__table-cell Layer__bank-transactions__tx-col",
-        ...openRow
+        className: `${className}__actions-container Layer__table-cell-content`
       },
-      /* @__PURE__ */ React81.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React81.createElement(
-        Text,
+      !categorized && !open ? /* @__PURE__ */ React81.createElement(
+        CategorySelect,
         {
-          as: "span",
-          className: "Layer__bank-transactions__tx-text",
-          withTooltip: "whenTruncated" /* whenTruncated */,
-          tooltipOptions: {
-            contentClassName: "Layer__bank-transactions__tx-tooltip"
-          }
+          bankTransaction,
+          name: `category-${bankTransaction.id}`,
+          value: selectedCategory,
+          onChange: (category) => {
+            setSelectedCategory(category);
+            setShowRetry(false);
+          },
+          disabled: bankTransaction.processing
+        }
+      ) : null,
+      categorized && !open ? /* @__PURE__ */ React81.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(
+        Badge,
+        {
+          icon: /* @__PURE__ */ React81.createElement(Scissors_default, { size: 11 }),
+          tooltip: /* @__PURE__ */ React81.createElement(
+            SplitTooltipDetails,
+            {
+              classNamePrefix: className,
+              category: bankTransaction.category
+            }
+          )
         },
-        bankTransaction.counterparty_name ?? bankTransaction.description
-      ))
-    ),
-    /* @__PURE__ */ React81.createElement(
-      "td",
-      {
-        className: "Layer__table-cell Layer__bank-transactions__account-col",
-        ...openRow
-      },
-      /* @__PURE__ */ React81.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React81.createElement(
+        "Split"
+      ), /* @__PURE__ */ React81.createElement("span", { className: `${className}__category-text__text` }, extractDescriptionForSplit(bankTransaction.category))), bankTransaction?.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction?.match && /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(
+        MatchBadge,
+        {
+          classNamePrefix: className,
+          bankTransaction,
+          dateFormat
+        }
+      ), /* @__PURE__ */ React81.createElement("span", { className: `${className}__category-text__text` }, `${formatTime5(
+        parseISO7(bankTransaction.match.bank_transaction.date),
+        dateFormat
+      )}, ${bankTransaction.match?.details?.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ React81.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
+      !categorized && !open && showRetry ? /* @__PURE__ */ React81.createElement(
+        RetryButton,
+        {
+          onClick: () => {
+            if (!bankTransaction.processing) {
+              save();
+            }
+          },
+          className: "Layer__bank-transaction__retry-btn",
+          processing: bankTransaction.processing,
+          error: "Approval failed. Check connection and retry in few seconds."
+        },
+        "Retry"
+      ) : null,
+      open && bankTransaction.error ? /* @__PURE__ */ React81.createElement(
         Text,
         {
           as: "span",
-          className: "Layer__bank-transactions__account-text",
-          withTooltip: "whenTruncated" /* whenTruncated */
+          size: "md" /* md */,
+          className: "Layer__unsaved-info"
         },
-        bankTransaction.account_name ?? ""
-      ))
-    ),
-    /* @__PURE__ */ React81.createElement(
-      "td",
-      {
-        className: `Layer__table-cell Layer__table-cell__amount-col Layer__bank-transactions__amount-col Layer__table-cell--amount ${className}__table-cell--amount-${isCredit(bankTransaction) ? "credit" : "debit"}`,
-        ...openRow
-      },
-      /* @__PURE__ */ React81.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
-    ),
-    /* @__PURE__ */ React81.createElement(
-      "td",
-      {
-        className: classNames33(
-          "Layer__table-cell",
-          "Layer__table-cell__category-col",
-          `${className}__actions-cell`,
-          `${className}__actions-cell--${open ? "open" : "close"}`
-        )
-      },
-      /* @__PURE__ */ React81.createElement(
-        "span",
+        /* @__PURE__ */ React81.createElement("span", null, "Unsaved"),
+        /* @__PURE__ */ React81.createElement(AlertCircle_default, { size: 12 })
+      ) : null,
+      !categorized && (open || !open && !showRetry) || categorized && open ? /* @__PURE__ */ React81.createElement(
+        SubmitButton,
         {
-          className: `${className}__actions-container Layer__table-cell-content`
-        },
-        !categorized && !open ? /* @__PURE__ */ React81.createElement(
-          CategorySelect,
-          {
-            bankTransaction,
-            name: `category-${bankTransaction.id}`,
-            value: selectedCategory,
-            onChange: (category) => {
-              setSelectedCategory(category);
-              setShowRetry(false);
-            },
-            disabled: bankTransaction.processing
-          }
-        ) : null,
-        categorized && !open ? /* @__PURE__ */ React81.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(
-          Badge,
-          {
-            icon: /* @__PURE__ */ React81.createElement(Scissors_default, { size: 11 }),
-            tooltip: /* @__PURE__ */ React81.createElement(
-              SplitTooltipDetails,
-              {
-                classNamePrefix: className,
-                category: bankTransaction.category
-              }
-            )
-          },
-          "Split"
-        ), /* @__PURE__ */ React81.createElement("span", { className: `${className}__category-text__text` }, extractDescriptionForSplit(bankTransaction.category))), bankTransaction?.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction?.match && /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(
-          MatchBadge,
-          {
-            classNamePrefix: className,
-            bankTransaction,
-            dateFormat
-          }
-        ), /* @__PURE__ */ React81.createElement("span", { className: `${className}__category-text__text` }, `${formatTime5(
-          parseISO7(bankTransaction.match.bank_transaction.date),
-          dateFormat
-        )}, ${bankTransaction.match?.details?.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ React81.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
-        !categorized && !open && showRetry ? /* @__PURE__ */ React81.createElement(
-          RetryButton,
-          {
-            onClick: () => {
-              if (!bankTransaction.processing) {
-                save();
-              }
-            },
-            className: "Layer__bank-transaction__retry-btn",
-            processing: bankTransaction.processing,
-            error: "Approval failed. Check connection and retry in few seconds."
-          },
-          "Retry"
-        ) : null,
-        open && bankTransaction.error ? /* @__PURE__ */ React81.createElement(
-          Text,
-          {
-            as: "span",
-            size: "md" /* md */,
-            className: "Layer__unsaved-info"
-          },
-          /* @__PURE__ */ React81.createElement("span", null, "Unsaved"),
-          /* @__PURE__ */ React81.createElement(AlertCircle_default, { size: 12 })
-        ) : null,
-        !categorized && (open || !open && !showRetry) || categorized && open ? /* @__PURE__ */ React81.createElement(
-          SubmitButton,
-          {
-            onClick: () => {
-              if (!bankTransaction.processing) {
-                save();
-              }
-            },
-            className: "Layer__bank-transaction__submit-btn",
-            processing: bankTransaction.processing,
-            active: open,
-            action: categorized ? "save" /* SAVE */ : "update" /* UPDATE */
+          onClick: () => {
+            if (!bankTransaction.processing) {
+              save();
+            }
           },
-          categorized ? "Update" : "Approve"
-        ) : null,
-        /* @__PURE__ */ React81.createElement(
-          IconButton,
-          {
-            onClick: toggleOpen,
-            className: "Layer__bank-transaction-row__expand-button",
-            active: open,
-            icon: /* @__PURE__ */ React81.createElement(
-              ChevronDownFill_default,
-              {
-                className: `Layer__chevron ${open ? "Layer__chevron__up" : "Layer__chevron__down"}`
-              }
-            )
-          }
-        )
+          className: "Layer__bank-transaction__submit-btn",
+          processing: bankTransaction.processing,
+          active: open,
+          action: categorized ? "save" /* SAVE */ : "update" /* UPDATE */
+        },
+        categorized ? "Update" : "Approve"
+      ) : null,
+      /* @__PURE__ */ React81.createElement(
+        IconButton,
+        {
+          onClick: toggleOpen,
+          className: "Layer__bank-transaction-row__expand-button",
+          active: open,
+          icon: /* @__PURE__ */ React81.createElement(
+            ChevronDownFill_default,
+            {
+              className: `Layer__chevron ${open ? "Layer__chevron__up" : "Layer__chevron__down"}`
+            }
+          )
+        }
       )
     )
-  ), /* @__PURE__ */ React81.createElement("tr", null, /* @__PURE__ */ React81.createElement("td", { colSpan: 5, className: "Layer__bank-transaction-row__expanded-td" }, /* @__PURE__ */ React81.createElement(
+  )), /* @__PURE__ */ React81.createElement("tr", null, /* @__PURE__ */ React81.createElement("td", { colSpan: 5, className: "Layer__bank-transaction-row__expanded-td" }, /* @__PURE__ */ React81.createElement(
     ExpandedBankTransactionRow,
     {
       ref: expandedRowRef,
@@ -6316,11 +6409,11 @@ var BankTransactionListItem = ({
   editable,
   showDescriptions,
   showReceiptUploads,
-  containerWidth
+  containerWidth,
+  removeTransaction
 }) => {
   const expandedRowRef = useRef11(null);
   const [showRetry, setShowRetry] = useState15(false);
-  const [removed, setRemoved] = useState15(false);
   const { categorize: categorizeBankTransaction2, match: matchBankTransaction2 } = useBankTransactionsContext();
   const [selectedCategory, setSelectedCategory] = useState15(
     getDefaultSelectedCategory(bankTransaction)
@@ -6342,6 +6435,13 @@ var BankTransactionListItem = ({
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
+  useEffect12(() => {
+    if (editable && bankTransaction.recently_categorized) {
+      setTimeout(() => {
+        removeTransaction(bankTransaction);
+      }, 300);
+    }
+  }, [bankTransaction.recently_categorized]);
   const save = () => {
     if (open && expandedRowRef?.current) {
       expandedRowRef?.current?.save();
@@ -6359,9 +6459,6 @@ var BankTransactionListItem = ({
       category: getCategorizePayload(selectedCategory)
     });
   };
-  if (removed) {
-    return null;
-  }
   const categorized = isCategorized(bankTransaction);
   const className = "Layer__bank-transaction-list-item";
   const openClassName = open ? `${className}--expanded` : "";
@@ -6560,7 +6657,15 @@ var BusinessForm = ({ bankTransaction }) => {
       onClick: onCategorySelect,
       selected: selectedCategory
     }
-  ), options.length === 0 ? /* @__PURE__ */ React85.createElement(Button, { onClick: openDrawer, fullWidth: true }, "Select category") : null, options.length > 0 ? /* @__PURE__ */ React85.createElement(
+  ), options.length === 0 ? /* @__PURE__ */ React85.createElement(
+    Button,
+    {
+      onClick: openDrawer,
+      fullWidth: true,
+      variant: "secondary" /* secondary */
+    },
+    "Select category"
+  ) : null, options.length > 0 ? /* @__PURE__ */ React85.createElement(
     Button,
     {
       onClick: save,
@@ -6981,8 +7086,12 @@ var BankTransactionMobileListItem = ({
   }, [transactionIdToOpen]);
   useEffect17(() => {
     if (!removeAnim && bankTransaction.recently_categorized) {
-      setRemoveAnim(true);
-      openNext();
+      if (editable) {
+        setRemoveAnim(true);
+        openNext();
+      } else {
+        close();
+      }
     }
   }, [
     bankTransaction.recently_categorized,
@@ -7009,6 +7118,13 @@ var BankTransactionMobileListItem = ({
       setShowComponent(true);
     }
   }, []);
+  useEffect17(() => {
+    if (editable && bankTransaction.recently_categorized) {
+      setTimeout(() => {
+        removeTransaction(bankTransaction);
+      }, 300);
+    }
+  }, [bankTransaction.recently_categorized]);
   const onChangePurpose = (event) => setPurpose(event.target.value);
   const categorized = isCategorized(bankTransaction);
   const className = "Layer__bank-transaction-mobile-list-item";
@@ -7024,18 +7140,7 @@ var BankTransactionMobileListItem = ({
     {
       ref: itemRef,
       className: rowClassName,
-      "data-item": bankTransaction.id,
-      onTransitionEnd: ({ propertyName }) => {
-        if (propertyName === "opacity") {
-          close();
-          if (editable) {
-            setRemoveAnim(false);
-            setTimeout(() => {
-              removeTransaction(bankTransaction.id);
-            }, 500);
-          }
-        }
-      }
+      "data-item": bankTransaction.id
     },
     /* @__PURE__ */ React91.createElement(
       "span",
@@ -7054,7 +7159,7 @@ var BankTransactionMobileListItem = ({
         centsToDollars(bankTransaction.amount)
       ), /* @__PURE__ */ React91.createElement("span", { className: `${className}__heading__date` }, formatTime8(parseISO10(bankTransaction.date), DATE_FORMAT2))))
     ),
-    /* @__PURE__ */ React91.createElement("div", { className: `${className}__expanded-row`, style: { height } }, open && /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React91.createElement("div", { className: `${className}__expanded-row`, style: { height: !open || removeAnim ? 0 : height } }, open && /* @__PURE__ */ React91.createElement(
       "div",
       {
         className: `${className}__expanded-row__content`,
@@ -7280,7 +7385,9 @@ var Pagination = ({
   totalCount,
   siblingCount = 1,
   currentPage,
-  pageSize
+  pageSize,
+  hasMore,
+  fetchMore
 }) => {
   const paginationRange = usePagination({
     currentPage,
@@ -7329,12 +7436,23 @@ var Pagination = ({
         onClick: () => {
           if (typeof pageNumber === "number") {
             onPageChange(pageNumber);
+            if (pageNumber === lastPage && hasMore && fetchMore) {
+              fetchMore();
+            }
           }
         }
       },
       pageNumber
     );
-  }), /* @__PURE__ */ React97.createElement(
+  }), hasMore && fetchMore ? /* @__PURE__ */ React97.createElement(
+    "li",
+    {
+      key: `page-has-more`,
+      className: "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--next",
+      onClick: fetchMore
+    },
+    "..."
+  ) : null, /* @__PURE__ */ React97.createElement(
     "li",
     {
       key: `page-last`,
@@ -7396,7 +7514,7 @@ var DownloadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React98.createE
 var DownloadCloud_default = DownloadCloud;
 
 // src/utils/business.ts
-import { differenceInCalendarMonths, parseISO as parseISO11, startOfMonth as startOfMonth2 } from "date-fns";
+import { differenceInCalendarMonths, parseISO as parseISO11, startOfMonth } from "date-fns";
 var getActivationDate = (business) => {
   try {
     if (business && business.activation_at) {
@@ -7410,7 +7528,7 @@ var getActivationDate = (business) => {
 var getEarliestDateToBrowse = (business) => {
   const activationDate = getActivationDate(business);
   if (activationDate) {
-    return startOfMonth2(activationDate);
+    return startOfMonth(activationDate);
   }
   return;
 };
@@ -7422,7 +7540,7 @@ var isDateAllowedToBrowse = (date, business) => {
   if (!activationDate) {
     return true;
   }
-  return differenceInCalendarMonths(startOfMonth2(date), activationDate) >= 0;
+  return differenceInCalendarMonths(startOfMonth(date), activationDate) >= 0;
 };
 
 // src/components/DatePicker/DatePicker.tsx
@@ -7433,13 +7551,15 @@ import "react-datepicker/dist/react-datepicker.css";
 // src/components/DatePicker/DatePickerOptions.tsx
 import React99 from "react";
 import {
-  endOfMonth as endOfMonth2,
+  endOfMonth,
   endOfQuarter,
   endOfYear,
-  startOfMonth as startOfMonth3,
+  startOfMonth as startOfMonth2,
   startOfQuarter,
   startOfYear,
-  subMonths
+  subMonths,
+  subQuarters,
+  subYears
 } from "date-fns";
 var DatePickerOptions = ({
   options,
@@ -7455,8 +7575,8 @@ var DatePickerOptions = ({
             key: option,
             onClick: () => {
               setSelectedDate([
-                startOfMonth3(/* @__PURE__ */ new Date()),
-                endOfMonth2(/* @__PURE__ */ new Date())
+                startOfMonth2(/* @__PURE__ */ new Date()),
+                endOfMonth(/* @__PURE__ */ new Date())
               ]);
             }
           },
@@ -7469,8 +7589,8 @@ var DatePickerOptions = ({
             key: option,
             onClick: () => {
               setSelectedDate([
-                startOfMonth3(subMonths(/* @__PURE__ */ new Date(), 1)),
-                endOfMonth2(subMonths(/* @__PURE__ */ new Date(), 1))
+                startOfMonth2(subMonths(/* @__PURE__ */ new Date(), 1)),
+                endOfMonth(subMonths(/* @__PURE__ */ new Date(), 1))
               ]);
             }
           },
@@ -7490,6 +7610,21 @@ var DatePickerOptions = ({
           },
           "This quarter"
         );
+      case "last-quarter":
+        return /* @__PURE__ */ React99.createElement(
+          TextButton,
+          {
+            key: option,
+            onClick: () => {
+              const lastQuarter = subQuarters(/* @__PURE__ */ new Date(), 1);
+              setSelectedDate([
+                startOfQuarter(lastQuarter),
+                endOfQuarter(lastQuarter)
+              ]);
+            }
+          },
+          "Last quarter"
+        );
       case "this-year":
         return /* @__PURE__ */ React99.createElement(
           TextButton,
@@ -7501,11 +7636,30 @@ var DatePickerOptions = ({
           },
           "This year"
         );
+      case "last-year":
+        return /* @__PURE__ */ React99.createElement(
+          TextButton,
+          {
+            key: option,
+            onClick: () => {
+              const lastYear = subYears(/* @__PURE__ */ new Date(), 1);
+              setSelectedDate([startOfYear(lastYear), endOfYear(lastYear)]);
+            }
+          },
+          "Last year"
+        );
     }
     return /* @__PURE__ */ React99.createElement(React99.Fragment, null);
   };
   if (options.length === 0) {
-    const allOptions = ["this-month", "last-month", "this-quarter", "this-year"];
+    const allOptions = [
+      "this-month",
+      "last-month",
+      "this-quarter",
+      "last-quarter",
+      "this-year",
+      "last-year"
+    ];
     allOptions.forEach((option) => {
       optionsComponents.push(getOptionComponent(option));
     });
@@ -7522,6 +7676,20 @@ var DatePickerOptions = ({
 
 // src/components/DatePicker/DatePicker.tsx
 import classNames37 from "classnames";
+var getDefaultRangeDate = (date, mode, selected) => {
+  try {
+    if (isRangeMode(mode) && selected) {
+      if (date === "end") {
+        return selected[1];
+      }
+      return selected[0];
+    }
+    return null;
+  } catch (_err) {
+    return null;
+  }
+};
+var isRangeMode = (mode) => mode === "dayRangePicker" || mode === "monthRangePicker";
 var DatePicker = ({
   selected,
   onChange,
@@ -7540,10 +7708,29 @@ var DatePicker = ({
 }) => {
   const [updatePickerDate, setPickerDate] = useState23(false);
   const [selectedDates, setSelectedDates] = useState23(selected);
+  const [startDate, setStartDate] = useState23(
+    getDefaultRangeDate("start", mode, selected) ?? /* @__PURE__ */ new Date()
+  );
+  const [endDate, setEndDate] = useState23(
+    getDefaultRangeDate("end", mode, selected)
+  );
   useEffect18(() => {
-    setPickerDate(true);
-    if (selected !== selectedDates) {
-      setSelectedDates(selected);
+    try {
+      setPickerDate(true);
+      if (!isRangeMode(mode) && selected !== selectedDates) {
+        setSelectedDates(selected);
+        return;
+      }
+      if (isRangeMode(mode) && Array.isArray(selected)) {
+        if (startDate !== selected[0]) {
+          setStartDate(selected[0]);
+        }
+        if (endDate !== selected[1]) {
+          setEndDate(selected[1]);
+        }
+      }
+    } catch (_err) {
+      return;
     }
   }, [selected]);
   useEffect18(() => {
@@ -7553,6 +7740,11 @@ var DatePicker = ({
       setPickerDate(false);
     }
   }, [selectedDates]);
+  useEffect18(() => {
+    if (isRangeMode(mode)) {
+      setSelectedDates([startDate, endDate]);
+    }
+  }, [startDate, endDate]);
   const wrapperClassNames = classNames37(
     "Layer__datepicker__wrapper",
     mode === "timePicker" && "Layer__datepicker__time__wrapper"
@@ -7571,6 +7763,12 @@ var DatePicker = ({
     popperClassName
   );
   const handleDateChange = (date) => {
+    if (isRangeMode(mode)) {
+      const [start, end] = date;
+      setStartDate(start);
+      setEndDate(end);
+      return;
+    }
     setSelectedDates(date);
   };
   const isCurrentDate = () => {
@@ -7596,15 +7794,15 @@ var DatePicker = ({
     ReactDatePicker,
     {
       wrapperClassName: datePickerWrapperClassNames,
-      startDate: mode === "dayRangePicker" || mode === "monthRangePicker" ? selectedDates[0] : void 0,
-      endDate: mode === "dayRangePicker" || mode === "monthRangePicker" ? selectedDates[1] : void 0,
+      startDate: isRangeMode(mode) ? startDate : void 0,
+      endDate: isRangeMode(mode) ? endDate : void 0,
       selected: mode !== "dayRangePicker" && mode !== "monthRangePicker" ? selectedDates : void 0,
       onChange: handleDateChange,
       calendarClassName: calendarClassNames,
       popperClassName: popperClassNames,
       enableTabLoop: false,
       popperPlacement: "bottom-start",
-      selectsRange: mode === "dayRangePicker" || mode === "monthRangePicker",
+      selectsRange: isRangeMode(mode),
       showMonthYearPicker: mode === "monthPicker" || mode === "monthRangePicker",
       dateFormat,
       renderDayContents: (day) => /* @__PURE__ */ React100.createElement("span", { className: "Layer__datepicker__day-contents" }, day),
@@ -7613,6 +7811,7 @@ var DatePicker = ({
       showTimeSelect: mode === "timePicker",
       showTimeSelectOnly: mode === "timePicker",
       minDate,
+      maxDate: /* @__PURE__ */ new Date(),
       ...props
     },
     mode === "dayRangePicker" && /* @__PURE__ */ React100.createElement(
@@ -7750,7 +7949,7 @@ var Tabs = ({ name, options, selected, onChange }) => {
 
 // src/components/BankTransactions/BankTransactionsHeader.tsx
 import classNames39 from "classnames";
-import { endOfMonth as endOfMonth3, startOfMonth as startOfMonth4 } from "date-fns";
+import { endOfMonth as endOfMonth2, startOfMonth as startOfMonth3 } from "date-fns";
 var DownloadButton = () => {
   const { auth, businessId, apiUrl } = useLayerContext();
   const [requestFailed, setRequestFailed] = useState25(false);
@@ -7835,8 +8034,8 @@ var BankTransactionsHeader = ({
         onChange: (date) => {
           if (!Array.isArray(date)) {
             setDateRange({
-              startDate: startOfMonth4(date),
-              endDate: endOfMonth3(date)
+              startDate: startOfMonth3(date),
+              endDate: endOfMonth2(date)
             });
           }
         },
@@ -7909,19 +8108,30 @@ var Inbox_default = Inbox;
 // src/components/BankTransactions/DataStates.tsx
 var DataStates = ({
   bankTransactions,
+  transactionsLoading,
   isLoading,
   isValidating,
   error,
   refetch,
   editable
 }) => {
+  let title;
+  let description;
+  if (transactionsLoading) {
+    title = "Data sync in progress";
+    description = "Check back later to review your transactions";
+  } else {
+    title = editable ? "You are up to date with transactions!" : "You have no categorized transactions";
+    description = editable ? "All uncategorized transaction will be displayed here" : "All transaction will be displayed here once reviewed";
+  }
+  const showRefreshButton = transactionsLoading || bankTransactions?.length;
   return /* @__PURE__ */ React105.createElement(React105.Fragment, null, !isLoading && !error && (bankTransactions === void 0 || bankTransactions !== void 0 && bankTransactions.length === 0) ? /* @__PURE__ */ React105.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React105.createElement(
     DataState,
     {
-      status: "allDone" /* allDone */,
-      title: editable ? "You are up to date with transactions!" : "You have no categorized transactions",
-      description: editable ? "All uncategorized transaction will be displayed here" : "All transaction will be displayed here once reviewed",
-      onRefresh: () => refetch(),
+      status: transactionsLoading ? "info" /* info */ : "allDone" /* allDone */,
+      title,
+      description,
+      onRefresh: showRefreshButton ? refetch : void 0,
       isLoading: isValidating,
       icon: !editable ? /* @__PURE__ */ React105.createElement(Inbox_default, null) : void 0
     }
@@ -7931,15 +8141,16 @@ var DataStates = ({
       status: "failed" /* failed */,
       title: "Something went wrong",
       description: "We couldn\u2019t load your data.",
-      onRefresh: () => refetch(),
+      onRefresh: refetch,
       isLoading: isValidating
     }
   )) : null);
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
-import { endOfMonth as endOfMonth4, parseISO as parseISO12, startOfMonth as startOfMonth5 } from "date-fns";
+import { endOfMonth as endOfMonth3, parseISO as parseISO12, startOfMonth as startOfMonth4 } from "date-fns";
 var COMPONENT_NAME2 = "bank-transactions";
+var TEST_EMPTY_STATE = false;
 var BankTransactions = ({
   onError,
   ...props
@@ -7948,7 +8159,7 @@ var BankTransactions = ({
 };
 var BankTransactionsContent = ({
   asWidget = false,
-  pageSize = 15,
+  pageSize = 20,
   categorizedOnly = false,
   categorizeView = true,
   showDescriptions = false,
@@ -7959,11 +8170,10 @@ var BankTransactionsContent = ({
   hideHeader = false
 }) => {
   const [currentPage, setCurrentPage] = useState26(1);
-  const [removedTxs, setRemovedTxs] = useState26([]);
   const [initialLoad, setInitialLoad] = useState26(true);
   const [dateRange, setDateRange] = useState26({
-    startDate: startOfMonth5(/* @__PURE__ */ new Date()),
-    endDate: endOfMonth4(/* @__PURE__ */ new Date())
+    startDate: startOfMonth4(/* @__PURE__ */ new Date()),
+    endDate: endOfMonth3(/* @__PURE__ */ new Date())
   });
   const {
     activate,
@@ -7975,9 +8185,12 @@ var BankTransactionsContent = ({
     refetch,
     setFilters,
     filters,
-    accountsList,
-    display
+    display,
+    hasMore,
+    fetchMore,
+    removeAfterCategorize
   } = useBankTransactionsContext();
+  const { data: linkedAccounts } = useLinkedAccounts();
   useEffect20(() => {
     activate();
   }, []);
@@ -7987,24 +8200,24 @@ var BankTransactionsContent = ({
         setFilters({
           ...filters,
           ...inputFilters,
-          categorizationStatus: "TO_REVIEW" /* TO_REVIEW */
+          categorizationStatus: "review" /* review */
         });
       } else if (!filters?.categorizationStatus && categorizedOnly) {
         setFilters({
           ...filters,
           ...inputFilters,
-          categorizationStatus: "CATEGORIZED" /* CATEGORIZED */
+          categorizationStatus: "categorized" /* categorized */
         });
       } else {
         setFilters({ ...filters, ...inputFilters });
       }
     } else if (!filters?.categorizationStatus && categorizeView) {
       setFilters({
-        categorizationStatus: "TO_REVIEW" /* TO_REVIEW */
+        categorizationStatus: "review" /* review */
       });
     } else if (!filters?.categorizationStatus && categorizedOnly) {
       setFilters({
-        categorizationStatus: "CATEGORIZED" /* CATEGORIZED */
+        categorizationStatus: "categorized" /* categorized */
       });
     }
   }, [inputFilters, categorizeView, categorizedOnly]);
@@ -8016,7 +8229,7 @@ var BankTransactionsContent = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [loadingStatus]);
-  const bankTransactions = useMemo6(() => {
+  const bankTransactions = TEST_EMPTY_STATE ? [] : useMemo6(() => {
     if (monthlyView) {
       return data?.filter(
         (x) => parseISO12(x.date) >= dateRange.startDate && parseISO12(x.date) <= dateRange.endDate
@@ -8025,10 +8238,10 @@ var BankTransactionsContent = ({
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
     return data?.slice(firstPageIndex, lastPageIndex);
-  }, [currentPage, data, removedTxs, dateRange]);
+  }, [currentPage, data, dateRange]);
   const onCategorizationDisplayChange = (event) => {
     setFilters({
-      categorizationStatus: event.target.value === "categorized" /* categorized */ ? "CATEGORIZED" /* CATEGORIZED */ : "TO_REVIEW" /* TO_REVIEW */
+      categorizationStatus: event.target.value === "categorized" /* categorized */ ? "categorized" /* categorized */ : "review" /* review */
     });
     setCurrentPage(1);
   };
@@ -8037,11 +8250,7 @@ var BankTransactionsContent = ({
   const [listView, setListView] = useState26(false);
   const [containerWidth, setContainerWidth] = useState26(0);
   const debounceContainerWidth = debounce(setContainerWidth, 500);
-  const removeTransaction = (id) => {
-    const newTxs = removedTxs.slice();
-    newTxs.push(id);
-    setRemovedTxs(newTxs);
-  };
+  const removeTransaction = (bankTransaction) => removeAfterCategorize(bankTransaction);
   const containerRef = useElementSize((_el, _en, size) => {
     if (size?.height && size?.height >= 90) {
       const newShift = -Math.floor(size.height / 2) + 6;
@@ -8122,6 +8331,9 @@ var BankTransactionsContent = ({
       {
         bankTransactions,
         isLoading,
+        transactionsLoading: Boolean(
+          linkedAccounts?.some((item) => item.is_syncing)
+        ),
         isValidating,
         error,
         refetch,
@@ -8134,7 +8346,9 @@ var BankTransactionsContent = ({
         currentPage,
         totalCount: data?.length || 0,
         pageSize,
-        onPageChange: (page) => setCurrentPage(page)
+        onPageChange: (page) => setCurrentPage(page),
+        fetchMore,
+        hasMore
       }
     ))
   );
@@ -8293,16 +8507,16 @@ var applyShare = (items, total) => {
 
 // src/hooks/useProfitAndLoss/useProfitAndLossQuery.tsx
 import { useEffect as useEffect22 } from "react";
-import { startOfMonth as startOfMonth6, endOfMonth as endOfMonth5, formatISO } from "date-fns";
-import useSWR4 from "swr";
+import { startOfMonth as startOfMonth5, endOfMonth as endOfMonth4, formatISO } from "date-fns";
+import useSWR3 from "swr";
 var useProfitAndLossQuery = ({
   startDate,
   endDate,
   tagFilter,
   reportingBasis
 } = {
-  startDate: startOfMonth6(/* @__PURE__ */ new Date()),
-  endDate: endOfMonth5(/* @__PURE__ */ new Date())
+  startDate: startOfMonth5(/* @__PURE__ */ new Date()),
+  endDate: endOfMonth4(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl, syncTimestamps, read, hasBeenTouched } = useLayerContext();
   const {
@@ -8311,7 +8525,7 @@ var useProfitAndLossQuery = ({
     isValidating,
     error: rawError,
     mutate
-  } = useSWR4(
+  } = useSWR3(
     businessId && startDate && endDate && auth?.access_token && `profit-and-loss-${businessId}-${startDate.valueOf()}-${endDate.valueOf()}-${tagFilter?.key}-${tagFilter?.values?.join(
       ","
     )}-${reportingBasis}`,
@@ -8351,21 +8565,21 @@ var useProfitAndLossQuery = ({
 };
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { startOfMonth as startOfMonth7, endOfMonth as endOfMonth6 } from "date-fns";
+import { startOfMonth as startOfMonth6, endOfMonth as endOfMonth5 } from "date-fns";
 var useProfitAndLoss = ({
   startDate: initialStartDate,
   endDate: initialEndDate,
   tagFilter,
   reportingBasis
 } = {
-  startDate: startOfMonth7(/* @__PURE__ */ new Date()),
-  endDate: endOfMonth6(/* @__PURE__ */ new Date())
+  startDate: startOfMonth6(/* @__PURE__ */ new Date()),
+  endDate: endOfMonth5(/* @__PURE__ */ new Date())
 }) => {
   const [startDate, setStartDate] = useState28(
-    initialStartDate || startOfMonth7(Date.now())
+    initialStartDate || startOfMonth6(Date.now())
   );
   const [endDate, setEndDate] = useState28(
-    initialEndDate || endOfMonth6(Date.now())
+    initialEndDate || endOfMonth5(Date.now())
   );
   const [filters, setFilters] = useState28({
     expenses: void 0,
@@ -8503,14 +8717,14 @@ import React109, { useContext as useContext12, useEffect as useEffect25, useMemo
 
 // src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
 import { useEffect as useEffect23, useMemo as useMemo8, useState as useState29 } from "react";
-import { startOfMonth as startOfMonth8, sub } from "date-fns";
-import useSWR5 from "swr";
+import { startOfMonth as startOfMonth7, sub } from "date-fns";
+import useSWR4 from "swr";
 var buildDates = ({ currentDate }) => {
   return {
-    startYear: startOfMonth8(currentDate).getFullYear() - 1,
-    startMonth: startOfMonth8(currentDate).getMonth() + 1,
-    endYear: startOfMonth8(currentDate).getFullYear(),
-    endMonth: startOfMonth8(currentDate).getMonth() + 1
+    startYear: startOfMonth7(currentDate).getFullYear() - 1,
+    startMonth: startOfMonth7(currentDate).getMonth() + 1,
+    endYear: startOfMonth7(currentDate).getFullYear(),
+    endMonth: startOfMonth7(currentDate).getMonth() + 1
   };
 };
 var buildMonthsArray = (startDate, endDate) => {
@@ -8539,7 +8753,7 @@ var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
     isValidating,
     error,
     mutate
-  } = useSWR5(
+  } = useSWR4(
     businessId && Boolean(startYear) && Boolean(startMonth) && Boolean(endYear) && Boolean(endMonth) && auth?.access_token && `profit-and-loss-summaries-${businessId}-${startYear.toString()}-${startMonth.toString()}-${tagFilter?.key}-${tagFilter?.values?.join(
       ","
     )}-${reportingBasis}`,
@@ -8702,9 +8916,9 @@ import classNames40 from "classnames";
 import {
   add as add2,
   differenceInMonths,
-  endOfMonth as endOfMonth7,
+  endOfMonth as endOfMonth6,
   format,
-  startOfMonth as startOfMonth9,
+  startOfMonth as startOfMonth8,
   sub as sub2
 } from "date-fns";
 import {
@@ -8727,46 +8941,46 @@ var getChartWindow = ({
   currentYear,
   currentMonth
 }) => {
-  const today = startOfMonth9(Date.now());
+  const today = startOfMonth8(Date.now());
   const yearAgo = sub2(today, { months: 11 });
-  const current = startOfMonth9(new Date(currentYear, currentMonth - 1, 1));
-  if (differenceInMonths(startOfMonth9(chartWindow.start), current) < 0 && differenceInMonths(startOfMonth9(chartWindow.end), current) > 1) {
+  const current = startOfMonth8(new Date(currentYear, currentMonth - 1, 1));
+  if (differenceInMonths(startOfMonth8(chartWindow.start), current) < 0 && differenceInMonths(startOfMonth8(chartWindow.end), current) > 1) {
     return chartWindow;
   }
-  if (differenceInMonths(startOfMonth9(chartWindow.start), current) === 0) {
+  if (differenceInMonths(startOfMonth8(chartWindow.start), current) === 0) {
     return {
-      start: startOfMonth9(sub2(current, { months: 1 })),
-      end: endOfMonth7(add2(current, { months: 11 }))
+      start: startOfMonth8(sub2(current, { months: 1 })),
+      end: endOfMonth6(add2(current, { months: 11 }))
     };
   }
-  if (differenceInMonths(endOfMonth7(chartWindow.end), endOfMonth7(current)) === 1 && differenceInMonths(today, current) >= 1) {
+  if (differenceInMonths(endOfMonth6(chartWindow.end), endOfMonth6(current)) === 1 && differenceInMonths(today, current) >= 1) {
     return {
-      start: startOfMonth9(sub2(current, { months: 10 })),
-      end: endOfMonth7(add2(current, { months: 2 }))
+      start: startOfMonth8(sub2(current, { months: 10 })),
+      end: endOfMonth6(add2(current, { months: 2 }))
     };
   }
-  if (differenceInMonths(current, startOfMonth9(chartWindow.end)) === 0 && differenceInMonths(current, startOfMonth9(today)) > 0) {
+  if (differenceInMonths(current, startOfMonth8(chartWindow.end)) === 0 && differenceInMonths(current, startOfMonth8(today)) > 0) {
     return {
-      start: startOfMonth9(sub2(current, { months: 11 })),
-      end: endOfMonth7(add2(current, { months: 1 }))
+      start: startOfMonth8(sub2(current, { months: 11 })),
+      end: endOfMonth6(add2(current, { months: 1 }))
     };
   }
   if (current >= yearAgo) {
     return {
-      start: startOfMonth9(yearAgo),
-      end: endOfMonth7(today)
+      start: startOfMonth8(yearAgo),
+      end: endOfMonth6(today)
     };
   }
   if (Number(current) > Number(chartWindow.end)) {
     return {
-      start: startOfMonth9(sub2(current, { months: 12 })),
-      end: endOfMonth7(current)
+      start: startOfMonth8(sub2(current, { months: 12 })),
+      end: endOfMonth6(current)
     };
   }
-  if (differenceInMonths(current, startOfMonth9(chartWindow.start)) < 0) {
+  if (differenceInMonths(current, startOfMonth8(chartWindow.start)) < 0) {
     return {
-      start: startOfMonth9(current),
-      end: endOfMonth7(add2(current, { months: 11 }))
+      start: startOfMonth8(current),
+      end: endOfMonth6(add2(current, { months: 11 }))
     };
   }
   return chartWindow;
@@ -8800,8 +9014,8 @@ var ProfitAndLossChart = () => {
   });
   const [barAnimActive, setBarAnimActive] = useState31(true);
   const [chartWindow, setChartWindow] = useState31({
-    start: startOfMonth9(sub2(Date.now(), { months: 11 })),
-    end: endOfMonth7(Date.now())
+    start: startOfMonth8(sub2(Date.now(), { months: 11 })),
+    end: endOfMonth6(Date.now())
   });
   const selectionMonth = useMemo9(
     () => ({
@@ -8816,24 +9030,24 @@ var ProfitAndLossChart = () => {
     }
   }, [dateRange]);
   const { data, loaded, pullData } = useProfitAndLossLTM({
-    currentDate: startOfMonth9(Date.now())
+    currentDate: startOfMonth8(Date.now())
   });
   const loadingValue = useMemo9(() => getLoadingValue(data), [data]);
   useEffect25(() => {
     if (loaded === "complete" && data) {
       const foundCurrent = data.find(
-        (x) => Number(startOfMonth9(new Date(x.year, x.month - 1, 1))) >= Number(localDateRange.startDate) && Number(startOfMonth9(new Date(x.year, x.month - 1, 1))) < Number(localDateRange.endDate)
+        (x) => Number(startOfMonth8(new Date(x.year, x.month - 1, 1))) >= Number(localDateRange.startDate) && Number(startOfMonth8(new Date(x.year, x.month - 1, 1))) < Number(localDateRange.endDate)
       );
       if (!foundCurrent) {
-        const newDate = startOfMonth9(localDateRange.startDate);
+        const newDate = startOfMonth8(localDateRange.startDate);
         pullData(newDate);
         return;
       }
       const foundBefore = data.find(
-        (x) => Number(startOfMonth9(new Date(x.year, x.month - 1, 1))) >= Number(sub2(localDateRange.startDate, { months: 1 })) && Number(startOfMonth9(new Date(x.year, x.month - 1, 1))) < Number(sub2(localDateRange.endDate, { months: 1 }))
+        (x) => Number(startOfMonth8(new Date(x.year, x.month - 1, 1))) >= Number(sub2(localDateRange.startDate, { months: 1 })) && Number(startOfMonth8(new Date(x.year, x.month - 1, 1))) < Number(sub2(localDateRange.endDate, { months: 1 }))
       );
       if (!foundBefore) {
-        const newDate = startOfMonth9(
+        const newDate = startOfMonth8(
           sub2(localDateRange.startDate, { months: 1 })
         );
         pullData(newDate);
@@ -8865,8 +9079,10 @@ var ProfitAndLossChart = () => {
     name: getMonthName(pnl),
     revenue: pnl?.income || 0,
     revenueUncategorized: pnl?.uncategorizedInflows || 0,
-    expenses: -Math.abs((pnl?.income || 0) - (pnl?.netProfit || 0)),
-    expensesUncategorized: -Math.abs(pnl?.uncategorizedOutflows || 0),
+    expenses: -(pnl?.operatingExpenses || 0),
+    expensesUncategorized: -(pnl?.uncategorizedOutflows || 0),
+    operatingExpensesInverse: pnl?.operatingExpensesInverse || 0,
+    uncategorizedOutflowsInverse: pnl?.uncategorizedOutflowsInverse || 0,
     netProfit: pnl?.netProfit || 0,
     selected: !!pnl && pnl.month === selectionMonth.month + 1 && pnl.year === selectionMonth.year,
     year: pnl?.year,
@@ -8885,6 +9101,8 @@ var ProfitAndLossChart = () => {
           name: format(currentDate, compactView ? "LLLLL" : "LLL"),
           revenue: 0,
           revenueUncategorized: 0,
+          operatingExpensesInverse: 0,
+          uncategorizedOutflowsInverse: 0,
           expenses: 0,
           expensesUncategorized: 0,
           netProfit: 0,
@@ -8898,19 +9116,30 @@ var ProfitAndLossChart = () => {
       }
       return loadingData;
     }
-    return data?.filter(
+    return data?.map((x) => {
+      if (x.operatingExpenses < 0 || x.uncategorizedOutflows < 0) {
+        return {
+          ...x,
+          operatingExpenses: x.operatingExpenses < 0 ? 0 : x.operatingExpenses,
+          uncategorizedOutflows: x.uncategorizedOutflows < 0 ? 0 : x.uncategorizedOutflows,
+          operatingExpensesInverse: x.operatingExpenses < 0 ? -x.operatingExpenses : 0,
+          uncategorizedOutflowsInverse: x.uncategorizedOutflows < 0 ? -x.uncategorizedOutflows : 0
+        };
+      }
+      return x;
+    })?.filter(
       (x) => differenceInMonths(
-        startOfMonth9(new Date(x.year, x.month - 1, 1)),
+        startOfMonth8(new Date(x.year, x.month - 1, 1)),
         chartWindow.start
       ) >= 0 && differenceInMonths(
-        startOfMonth9(new Date(x.year, x.month - 1, 1)),
+        startOfMonth8(new Date(x.year, x.month - 1, 1)),
         chartWindow.start
       ) < 12 && differenceInMonths(
         chartWindow.end,
-        startOfMonth9(new Date(x.year, x.month - 1, 1))
+        startOfMonth8(new Date(x.year, x.month - 1, 1))
       ) >= 0 && differenceInMonths(
         chartWindow.end,
-        startOfMonth9(new Date(x.year, x.month - 1, 1))
+        startOfMonth8(new Date(x.year, x.month - 1, 1))
       ) <= 12
     ).map((x) => summarizePnL(x));
   }, [selectionMonth, chartWindow, data, loaded, compactView]);
@@ -8924,7 +9153,7 @@ var ProfitAndLossChart = () => {
       if (isMonthAllowed) {
         changeDateRange({
           startDate: new Date(year, month - 1, 1),
-          endDate: endOfMonth7(new Date(year, month - 1, 1))
+          endDate: endOfMonth6(new Date(year, month - 1, 1))
         });
       }
     }
@@ -9185,6 +9414,22 @@ var ProfitAndLossChart = () => {
           stackId: "expenses"
         }
       ),
+      /* @__PURE__ */ React109.createElement(
+        Bar,
+        {
+          dataKey: "operatingExpensesInverse",
+          barSize,
+          isAnimationActive: barAnimActive,
+          animationDuration: 100,
+          radius: [2, 2, 0, 0],
+          className: "Layer__profit-and-loss-chart__bar--expenses",
+          xAxisId: "revenue",
+          stackId: "revenue"
+        },
+        theData?.map((entry) => {
+          return /* @__PURE__ */ React109.createElement(Cell, { key: entry.name, fill: "url(#layer-bar-stripe-pattern-dark)" });
+        })
+      ),
       /* @__PURE__ */ React109.createElement(
         Bar,
         {
@@ -9220,6 +9465,22 @@ var ProfitAndLossChart = () => {
           );
         })
       ),
+      /* @__PURE__ */ React109.createElement(
+        Bar,
+        {
+          dataKey: "uncategorizedOutflowsInverse",
+          barSize,
+          isAnimationActive: barAnimActive,
+          animationDuration: 100,
+          radius: [2, 2, 0, 0],
+          className: "Layer__profit-and-loss-chart__bar--expenses-uncategorized",
+          xAxisId: "revenue",
+          stackId: "revenue"
+        },
+        theData?.map((entry) => {
+          return /* @__PURE__ */ React109.createElement(Cell, { key: entry.name, fill: "url(#layer-bar-stripe-pattern-dark)" });
+        })
+      ),
       /* @__PURE__ */ React109.createElement(
         Bar,
         {
@@ -9296,7 +9557,7 @@ var ProfitAndLossChart = () => {
 
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
 import React110, { useContext as useContext13 } from "react";
-import { endOfMonth as endOfMonth8, startOfMonth as startOfMonth10 } from "date-fns";
+import { endOfMonth as endOfMonth7, startOfMonth as startOfMonth9 } from "date-fns";
 var ProfitAndLossDatePicker = () => {
   const { business } = useLayerContext();
   const { changeDateRange, dateRange } = useContext13(ProfitAndLoss.Context);
@@ -9309,8 +9570,8 @@ var ProfitAndLossDatePicker = () => {
       onChange: (date) => {
         if (!Array.isArray(date)) {
           changeDateRange({
-            startDate: startOfMonth10(date),
-            endDate: endOfMonth8(date)
+            startDate: startOfMonth9(date),
+            endDate: endOfMonth7(date)
           });
         }
       },
@@ -10511,7 +10772,7 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer }) => {
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-import { endOfMonth as endOfMonth9, startOfMonth as startOfMonth11 } from "date-fns";
+import { endOfMonth as endOfMonth8, startOfMonth as startOfMonth10 } from "date-fns";
 var PNLContext = createContext6({
   data: void 0,
   filteredDataRevenue: [],
@@ -10522,8 +10783,8 @@ var PNLContext = createContext6({
   isValidating: false,
   error: void 0,
   dateRange: {
-    startDate: startOfMonth11(/* @__PURE__ */ new Date()),
-    endDate: endOfMonth9(/* @__PURE__ */ new Date())
+    startDate: startOfMonth10(/* @__PURE__ */ new Date()),
+    endDate: endOfMonth8(/* @__PURE__ */ new Date())
   },
   changeDateRange: () => {
   },
@@ -10613,11 +10874,11 @@ var TableProvider = ({ children }) => {
 // src/hooks/useBalanceSheet/useBalanceSheet.tsx
 import { useEffect as useEffect27 } from "react";
 import { format as format3, startOfDay } from "date-fns";
-import useSWR6 from "swr";
+import useSWR5 from "swr";
 var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
   const dateString = format3(startOfDay(date), "yyyy-MM-dd'T'HH:mm:ssXXX");
-  const { data, isLoading, isValidating, error, mutate } = useSWR6(
+  const { data, isLoading, isValidating, error, mutate } = useSWR5(
     businessId && dateString && auth?.access_token && `balance-sheet-${businessId}-${dateString}`,
     Layer.getBalanceSheet(apiUrl, auth?.access_token, {
       params: {
@@ -11062,7 +11323,7 @@ var StatementOfCashFlowContext = createContext9({
 // src/hooks/useStatementOfCashFlow/useStatementOfCashFlow.tsx
 import { useEffect as useEffect32 } from "react";
 import { format as format5, startOfDay as startOfDay3 } from "date-fns";
-import useSWR7 from "swr";
+import useSWR6 from "swr";
 var useStatementOfCashFlow = (startDate = /* @__PURE__ */ new Date(), endDate = /* @__PURE__ */ new Date()) => {
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
   const startDateString = format5(
@@ -11070,7 +11331,7 @@ var useStatementOfCashFlow = (startDate = /* @__PURE__ */ new Date(), endDate =
     "yyyy-MM-dd'T'HH:mm:ssXXX"
   );
   const endDateString = format5(startOfDay3(endDate), "yyyy-MM-dd'T'HH:mm:ssXXX");
-  const { data, isLoading, isValidating, error, mutate } = useSWR7(
+  const { data, isLoading, isValidating, error, mutate } = useSWR6(
     businessId && startDateString && endDateString && auth?.access_token && `statement-of-cash-${businessId}-${startDateString}-${endDateString}`,
     Layer.getStatementOfCashFlow(apiUrl, auth?.access_token, {
       params: {
@@ -11251,7 +11512,7 @@ import React153, { useContext as useContext25, useState as useState44 } from "re
 
 // src/contexts/ChartOfAccountsContext/ChartOfAccountsContext.tsx
 import { createContext as createContext10 } from "react";
-import { endOfMonth as endOfMonth10, startOfMonth as startOfMonth12 } from "date-fns";
+import { endOfMonth as endOfMonth9, startOfMonth as startOfMonth11 } from "date-fns";
 var ChartOfAccountsContext = createContext10(
   {
     data: void 0,
@@ -11274,8 +11535,8 @@ var ChartOfAccountsContext = createContext10(
     submitForm: () => {
     },
     dateRange: {
-      startDate: startOfMonth12(/* @__PURE__ */ new Date()),
-      endDate: endOfMonth10(/* @__PURE__ */ new Date())
+      startDate: startOfMonth11(/* @__PURE__ */ new Date()),
+      endDate: endOfMonth9(/* @__PURE__ */ new Date())
     },
     changeDateRange: () => {
     }
@@ -11510,8 +11771,8 @@ var LEDGER_ACCOUNT_SUBTYPES_FOR_TYPE = {
 };
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
-import { endOfMonth as endOfMonth11, formatISO as formatISO2, startOfMonth as startOfMonth13 } from "date-fns";
-import useSWR8 from "swr";
+import { endOfMonth as endOfMonth10, formatISO as formatISO2, startOfMonth as startOfMonth12 } from "date-fns";
+import useSWR7 from "swr";
 var validate = (formData) => {
   const errors = [];
   const nameError = validateName(formData);
@@ -11591,8 +11852,8 @@ var validateName = (formData) => {
 var flattenAccounts = (accounts) => accounts.flatMap((a) => [a, flattenAccounts(a.sub_accounts || [])]).flat().filter((id) => id);
 var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: initialEndDate } = {
   withDates: false,
-  startDate: startOfMonth13(/* @__PURE__ */ new Date()),
-  endDate: endOfMonth11(/* @__PURE__ */ new Date())
+  startDate: startOfMonth12(/* @__PURE__ */ new Date()),
+  endDate: endOfMonth10(/* @__PURE__ */ new Date())
 }) => {
   const {
     auth,
@@ -11607,12 +11868,12 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
   const [sendingForm, setSendingForm] = useState38(false);
   const [apiError, setApiError] = useState38(void 0);
   const [startDate, setStartDate] = useState38(
-    initialStartDate ?? startOfMonth13(Date.now())
+    initialStartDate ?? startOfMonth12(Date.now())
   );
   const [endDate, setEndDate] = useState38(
-    initialEndDate ?? endOfMonth11(Date.now())
+    initialEndDate ?? endOfMonth10(Date.now())
   );
-  const { data, isLoading, isValidating, error, mutate } = useSWR8(
+  const { data, isLoading, isValidating, error, mutate } = useSWR7(
     businessId && auth?.access_token && `chart-of-accounts-${businessId}-${startDate?.valueOf()}-${endDate?.valueOf()}`,
     Layer.getLedgerAccountBalances(apiUrl, auth?.access_token, {
       params: {
@@ -11821,12 +12082,12 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
 
 // src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
 import { useEffect as useEffect34, useState as useState39 } from "react";
-import useSWR9 from "swr";
+import useSWR8 from "swr";
 var useLedgerAccounts = () => {
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
   const [accountId, setAccountId] = useState39();
   const [selectedEntryId, setSelectedEntryId] = useState39();
-  const { data, isLoading, isValidating, error, mutate } = useSWR9(
+  const { data, isLoading, isValidating, error, mutate } = useSWR8(
     businessId && accountId && auth?.access_token && `ledger-accounts-lines-${businessId}-${accountId}`,
     Layer.getLedgerAccountsLines(apiUrl, auth?.access_token, {
       params: { businessId, accountId }
@@ -11838,7 +12099,7 @@ var useLedgerAccounts = () => {
     isLoading: isLoadingEntry,
     isValidating: isValdiatingEntry,
     error: errorEntry
-  } = useSWR9(
+  } = useSWR8(
     businessId && selectedEntryId && auth?.access_token && `ledger-accounts-entry-${businessId}-${selectedEntryId}}`,
     Layer.getLedgerAccountsEntry(apiUrl, auth?.access_token, {
       params: { businessId, entryId: selectedEntryId }
@@ -11882,7 +12143,7 @@ import React145, { useContext as useContext21, useState as useState41 } from "re
 
 // src/components/ChartOfAccountsDatePicker/ChartOfAccountsDatePicker.tsx
 import React139, { useContext as useContext18 } from "react";
-import { endOfMonth as endOfMonth12, startOfMonth as startOfMonth14 } from "date-fns";
+import { endOfMonth as endOfMonth11, startOfMonth as startOfMonth13 } from "date-fns";
 var ChartOfAccountsDatePicker = () => {
   const { changeDateRange, dateRange } = useContext18(ChartOfAccountsContext);
   return /* @__PURE__ */ React139.createElement(
@@ -11893,8 +12154,8 @@ var ChartOfAccountsDatePicker = () => {
       onChange: (date) => {
         if (!Array.isArray(date)) {
           changeDateRange({
-            startDate: startOfMonth14(date),
-            endDate: endOfMonth12(date)
+            startDate: startOfMonth13(date),
+            endDate: endOfMonth11(date)
           });
         }
       }
@@ -12933,7 +13194,7 @@ var getAccountIdentifierPayload = (journalLineItem) => {
 };
 
 // src/hooks/useJournal/useJournal.tsx
-import useSWR10 from "swr";
+import useSWR9 from "swr";
 var useJournal = () => {
   const {
     auth,
@@ -12949,7 +13210,7 @@ var useJournal = () => {
   const [addingEntry, setAddingEntry] = useState45(false);
   const [sendingForm, setSendingForm] = useState45(false);
   const [apiError, setApiError] = useState45(void 0);
-  const { data, isLoading, isValidating, error, mutate } = useSWR10(
+  const { data, isLoading, isValidating, error, mutate } = useSWR9(
     businessId && auth?.access_token && `journal-lines-${businessId}`,
     Layer.getJournal(apiUrl, auth?.access_token, {
       params: { businessId }
@@ -13854,11 +14115,11 @@ var TasksContext = createContext14({
 
 // src/hooks/useTasks/useTasks.tsx
 import { useEffect as useEffect40, useState as useState49 } from "react";
-import useSWR11 from "swr";
+import useSWR10 from "swr";
 var useTasks = () => {
   const [loadedStatus, setLoadedStatus] = useState49("initial");
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
-  const { data, isLoading, isValidating, error, mutate } = useSWR11(
+  const { data, isLoading, isValidating, error, mutate } = useSWR10(
     businessId && auth?.access_token && `tasks-${businessId}`,
     Layer.getTasks(apiUrl, auth?.access_token, {
       params: { businessId }
@@ -14839,10 +15100,12 @@ export {
   AccountingOverview,
   BalanceSheet,
   BankTransactions,
+  BankTransactionsProvider,
   BankTransactionsWithLinkedAccounts,
   BookkeepingOverview,
   BookkeepingUpsellBar,
   ChartOfAccounts,
+  DisplayState,
   GeneralLedgerView,
   Journal,
   LayerProvider,