@layerfi/components 0.1.36 → 0.1.37

package/dist/index.js

@@ -33,10 +33,12 @@ __export(src_exports, {
   AccountingOverview: () => AccountingOverview,
   BalanceSheet: () => BalanceSheet,
   BankTransactions: () => BankTransactions,
+  BankTransactionsProvider: () => BankTransactionsProvider,
   BankTransactionsWithLinkedAccounts: () => BankTransactionsWithLinkedAccounts,
   BookkeepingOverview: () => BookkeepingOverview,
   BookkeepingUpsellBar: () => BookkeepingUpsellBar,
   ChartOfAccounts: () => ChartOfAccounts,
+  DisplayState: () => DisplayState,
   GeneralLedgerView: () => GeneralLedgerView,
   Journal: () => Journal,
   LayerProvider: () => LayerProvider,
@@ -201,9 +203,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`
@@ -667,6 +671,25 @@ var import_react11 = __toESM(require("react"));
 
 // src/contexts/BankTransactionsContext/BankTransactionsContext.tsx
 var import_react9 = require("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 = (0, import_react9.createContext)({
   data: void 0,
   isLoading: false,
@@ -684,26 +707,18 @@ var BankTransactionsContext = (0, import_react9.createContext)({
     pagination: void 0
   },
   updateOneLocal: () => void 0,
+  removeAfterCategorize: () => void 0,
   activate: () => void 0,
-  display: "review" /* review */
+  display: "review" /* review */,
+  fetchMore: () => {
+  },
+  hasMore: false
 });
 var useBankTransactionsContext = () => (0, import_react9.useContext)(BankTransactionsContext);
 
 // src/hooks/useBankTransactions/useBankTransactions.tsx
 var import_react10 = require("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 */,
@@ -724,7 +739,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);
 
@@ -773,7 +788,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) => {
@@ -792,8 +807,8 @@ var appplyDateRangeFilter = (data, filter) => {
 };
 
 // src/hooks/useBankTransactions/useBankTransactions.tsx
-var import_swr = __toESM(require("swr"));
-var useBankTransactions = () => {
+var import_infinite = __toESM(require("swr/infinite"));
+var useBankTransactions = (params) => {
   const {
     auth,
     businessId,
@@ -804,36 +819,82 @@ var useBankTransactions = () => {
     syncTimestamps,
     hasBeenTouched
   } = useLayerContext();
-  const [loadingStatus, setLoadingStatus] = (0, import_react10.useState)("initial");
-  const [filters, setTheFilters] = (0, import_react10.useState)();
-  const [active, setActive] = (0, import_react10.useState)(false);
+  const { scope = void 0 } = params ?? {};
+  const [filters, setTheFilters] = (0, import_react10.useState)(
+    scope ? { categorizationStatus: scope } : void 0
+  );
   const display = (0, import_react10.useMemo)(() => {
-    if (filters?.categorizationStatus === "TO_REVIEW" /* TO_REVIEW */) {
+    if (filters?.categorizationStatus === "review" /* review */) {
       return "review" /* review */;
     }
     return "categorized" /* categorized */;
   }, [filters?.categorizationStatus]);
-  const queryKey = (0, import_react10.useMemo)(() => {
-    if (!active) {
-      return false;
-    }
-    return businessId && auth?.access_token && `bank-transactions-${businessId}`;
-  }, [businessId, auth?.access_token, active]);
+  const [active, setActive] = (0, import_react10.useState)(false);
+  const [loadingStatus, setLoadingStatus] = (0, import_react10.useState)("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
-  } = (0, import_swr.default)(
-    queryKey,
-    Layer.getBankTransactions(apiUrl, auth?.access_token, {
-      params: { businessId }
-    })
+    mutate,
+    size,
+    setSize
+  } = (0, import_infinite.default)(
+    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 = (0, import_react10.useMemo)(() => {
+    if (rawResponseData && rawResponseData.length > 0) {
+      return rawResponseData?.map((x) => x?.data).flat().filter((x) => !!x);
+    }
+    return void 0;
+  }, [rawResponseData]);
+  const lastMetadata = (0, import_react10.useMemo)(() => {
+    if (rawResponseData && rawResponseData.length > 0) {
+      return rawResponseData[rawResponseData.length - 1].meta;
+    }
+    return void 0;
+  }, [rawResponseData]);
+  const hasMore = (0, import_react10.useMemo)(() => {
+    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 = (0, import_react10.useMemo)(
-    () => collectAccounts(responseData?.data),
-    [responseData]
+    () => data ? collectAccounts(data) : [],
+    [data]
   );
   (0, import_react10.useEffect)(() => {
     if (isLoading && loadingStatus === "initial") {
@@ -854,13 +915,11 @@ var useBankTransactions = () => {
       ...value ?? {}
     });
   };
-  const {
-    data = void 0,
-    meta: metadata = {},
-    error = void 0
-  } = responseData || {};
   const filteredData = (0, import_react10.useMemo)(() => {
     let filtered = data;
+    if (!filtered) {
+      return;
+    }
     if (filters?.amount?.min || filters?.amount?.max) {
       filtered = applyAmountFilter(filtered, filters.amount);
     }
@@ -880,7 +939,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) {
@@ -953,14 +1012,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);
+    }
+  };
   (0, import_react10.useEffect)(() => {
     if (isLoading || isValidating) {
       read("BANK_TRANSACTIONS" /* BANK_TRANSACTIONS */);
@@ -973,20 +1049,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
   };
 };
 
@@ -1239,7 +1318,7 @@ var hslToHex = (hsl) => {
 
 // src/providers/LayerProvider/LayerProvider.tsx
 var import_date_fns2 = require("date-fns");
-var import_swr2 = __toESM(require("swr"));
+var import_swr = __toESM(require("swr"));
 var reducer = (state, action) => {
   switch (action.type) {
     case "LayerContext.setAuth" /* setAuth */:
@@ -1279,10 +1358,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 = ({
@@ -1324,7 +1413,7 @@ var LayerProvider = ({
     toasts: []
   });
   const { touch, syncTimestamps, read, readTimestamps, hasBeenTouched } = useDataSync();
-  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? (0, import_swr2.default)(
+  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? (0, import_swr.default)(
     businessAccessToken === void 0 && appId !== void 0 && appSecret !== void 0 && (0, import_date_fns2.isBefore)(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
     Layer.authenticate({
       appId,
@@ -1359,7 +1448,7 @@ var LayerProvider = ({
       });
     }
   }, [businessAccessToken, auth?.access_token]);
-  (0, import_swr2.default)(
+  (0, import_swr.default)(
     businessId && state.auth?.access_token && `categories-${businessId}`,
     Layer.getCategories(apiUrl, state.auth?.access_token, {
       params: { businessId }
@@ -1376,7 +1465,7 @@ var LayerProvider = ({
       }
     }
   );
-  (0, import_swr2.default)(
+  (0, import_swr.default)(
     businessId && state?.auth?.access_token && `business-${businessId}`,
     Layer.getBusiness(apiUrl, state?.auth?.access_token, {
       params: { businessId }
@@ -1465,7 +1554,7 @@ var LayerProvider = ({
     payload: { onboardingStep: value }
   });
   const drawerContextData = useDrawer();
-  return /* @__PURE__ */ import_react12.default.createElement(import_swr2.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(import_swr.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react12.default.createElement(
     LayerContext.Provider,
     {
       value: {
@@ -1632,7 +1721,7 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
 ];
 
 // src/hooks/useLinkedAccounts/useLinkedAccounts.ts
-var import_swr3 = __toESM(require("swr"));
+var import_swr2 = __toESM(require("swr"));
 var DEBUG = true;
 var USE_MOCK_RESPONSE_DATA = false;
 var useLinkedAccounts = () => {
@@ -1656,7 +1745,7 @@ var useLinkedAccounts = () => {
     isValidating,
     error: responseError,
     mutate
-  } = (0, import_swr3.default)(
+  } = (0, import_swr2.default)(
     businessId && auth?.access_token && `linked-accounts-${businessId}`,
     Layer.getLinkedAccounts(apiUrl, auth?.access_token, {
       params: { businessId }
@@ -2177,15 +2266,13 @@ var countTransactionsToReview = ({
       };
       return transactions.filter((tx) => {
         try {
-          return filterVisibility("TO_REVIEW" /* TO_REVIEW */, tx) && (0, import_date_fns3.isWithinInterval)((0, import_date_fns3.parseISO)(tx.date), dateRangeInterval);
+          return filterVisibility("review" /* review */, tx) && (0, import_date_fns3.isWithinInterval)((0, import_date_fns3.parseISO)(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;
 };
@@ -3245,7 +3332,9 @@ var ConnectAccount = ({
   onTransactionsToReviewClick
 }) => {
   const { addConnection } = (0, import_react38.useContext)(LinkedAccountsContext);
-  const { data, isLoading } = useBankTransactions();
+  const { data, isLoading } = useBankTransactions({
+    scope: "review" /* review */
+  });
   const transactionsToReview = (0, import_react38.useMemo)(
     () => countTransactionsToReview({ transactions: data }),
     [data, isLoading]
@@ -3861,15 +3950,21 @@ var LinkedAccountThumb = ({
 }) => {
   const linkedAccountThumbClassName = (0, import_classnames19.default)(
     "Layer__linked-account-thumb",
-    asWidget && "--as-widget"
+    asWidget && "--as-widget",
+    account.is_syncing && "--is-syncing",
+    account.is_syncing && "skeleton-loader"
+  );
+  const linkedAccountInfoClassName = (0, import_classnames19.default)(
+    "topbar",
+    account.is_syncing && "--is-syncing"
   );
   let bankBalance;
   if (pillConfig) {
     bankBalance = /* @__PURE__ */ import_react46.default.createElement(LinkedAccountPill, { text: pillConfig.text, config: pillConfig.config });
   } else {
-    bankBalance = /* @__PURE__ */ import_react46.default.createElement(Text, { as: "span", className: "account-balance" }, account.is_syncing ? "Syncing..." : `${centsToDollars(account.latest_balance_timestamp?.balance)}`);
+    bankBalance = /* @__PURE__ */ import_react46.default.createElement(Text, { as: "span", className: "account-balance" }, `${centsToDollars(account.latest_balance_timestamp?.balance)}`);
   }
-  return /* @__PURE__ */ import_react46.default.createElement("div", { className: linkedAccountThumbClassName }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "topbar" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "topbar-details" }, /* @__PURE__ */ import_react46.default.createElement(Text, { as: "div", className: "account-name" }, account.external_account_name), !asWidget && account.mask && /* @__PURE__ */ import_react46.default.createElement(AccountNumber, { accountNumber: account.mask }), /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement("div", { className: linkedAccountThumbClassName }, /* @__PURE__ */ import_react46.default.createElement("div", { className: linkedAccountInfoClassName }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "topbar-details" }, /* @__PURE__ */ import_react46.default.createElement(Text, { as: "div", className: "account-name" }, account.external_account_name), !asWidget && account.mask && /* @__PURE__ */ import_react46.default.createElement(AccountNumber, { accountNumber: account.mask }), /* @__PURE__ */ import_react46.default.createElement(
     Text,
     {
       as: "span",
@@ -3885,7 +3980,7 @@ var LinkedAccountThumb = ({
       src: `data:image/png;base64,${account.institution.logo}`,
       alt: account.institution?.name
     }
-  ) : /* @__PURE__ */ import_react46.default.createElement(InstitutionIcon_default, null))), !asWidget && /* @__PURE__ */ import_react46.default.createElement("div", { className: "middlebar" }, /* @__PURE__ */ import_react46.default.createElement(
+  ) : /* @__PURE__ */ import_react46.default.createElement(InstitutionIcon_default, null))), account.is_syncing ? /* @__PURE__ */ import_react46.default.createElement("div", { className: "loadingbar" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "loading-text Layer__text--sm" }, /* @__PURE__ */ import_react46.default.createElement("div", null, "Syncing account data"), /* @__PURE__ */ import_react46.default.createElement("div", { className: "syncing-data-description" }, "This may take up to 5 minutes")), /* @__PURE__ */ import_react46.default.createElement("div", { className: "loading-wrapper" }, /* @__PURE__ */ import_react46.default.createElement(Loader_default, { size: 11, className: "Layer__anim--rotating" }))) : /* @__PURE__ */ import_react46.default.createElement(import_react46.default.Fragment, null, !asWidget && /* @__PURE__ */ import_react46.default.createElement("div", { className: "middlebar" }, /* @__PURE__ */ import_react46.default.createElement(
     Text,
     {
       as: "span",
@@ -3901,7 +3996,7 @@ var LinkedAccountThumb = ({
       size: "sm"
     },
     "Ledger balance"
-  ), /* @__PURE__ */ import_react46.default.createElement(Text, { as: "span", className: "account-balance" }, account.is_syncing ? "Syncing..." : `${centsToDollars(account.current_ledger_balance)}`)));
+  ), /* @__PURE__ */ import_react46.default.createElement(Text, { as: "span", className: "account-balance" }, `${centsToDollars(account.current_ledger_balance)}`))));
 };
 
 // src/components/LinkedAccounts/LinkedAccountsContent.tsx
@@ -5595,9 +5690,20 @@ var ExpandedBankTransactionRow = (0, import_react65.forwardRef)(
       });
       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;
@@ -6034,7 +6140,6 @@ var BankTransactionRow = ({
 }) => {
   const expandedRowRef = (0, import_react67.useRef)(null);
   const [showRetry, setShowRetry] = (0, import_react67.useState)(false);
-  const [removed, setRemoved] = (0, import_react67.useState)(false);
   const {
     filters,
     categorize: categorizeBankTransaction2,
@@ -6075,6 +6180,13 @@ var BankTransactionRow = ({
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
+  (0, import_react67.useEffect)(() => {
+    if (editable && bankTransaction.recently_categorized) {
+      setTimeout(() => {
+        removeTransaction(bankTransaction);
+      }, 300);
+    }
+  }, [bankTransaction.recently_categorized]);
   const save = async () => {
     if (open && expandedRowRef?.current) {
       expandedRowRef?.current?.save();
@@ -6097,9 +6209,6 @@ var BankTransactionRow = ({
     });
     setOpen(false);
   };
-  if (removed) {
-    return null;
-  }
   const categorized = isCategorized(bankTransaction);
   const className = "Layer__bank-transaction-row";
   const openClassName = open ? `${className}--expanded` : "";
@@ -6110,178 +6219,160 @@ var BankTransactionRow = ({
     initialLoad ? "initial-load" : "",
     showComponent ? "show" : ""
   );
-  return /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, /* @__PURE__ */ import_react67.default.createElement(
-    "tr",
+  return /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, /* @__PURE__ */ import_react67.default.createElement("tr", { className: rowClassName }, /* @__PURE__ */ import_react67.default.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__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content" }, (0, import_date_fns8.format)((0, import_date_fns8.parseISO)(bankTransaction.date), dateFormat))
+  ), /* @__PURE__ */ import_react67.default.createElement(
+    "td",
+    {
+      className: "Layer__table-cell Layer__bank-transactions__tx-col",
+      ...openRow
+    },
+    /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react67.default.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__ */ import_react67.default.createElement(
+    "td",
+    {
+      className: "Layer__table-cell Layer__bank-transactions__account-col",
+      ...openRow
     },
-    /* @__PURE__ */ import_react67.default.createElement(
-      "td",
+    /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react67.default.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__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content" }, (0, import_date_fns8.format)((0, import_date_fns8.parseISO)(bankTransaction.date), dateFormat))
-    ),
+      bankTransaction.account_name ?? ""
+    ))
+  ), /* @__PURE__ */ import_react67.default.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__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
+  ), /* @__PURE__ */ import_react67.default.createElement(
+    "td",
+    {
+      className: (0, import_classnames33.default)(
+        "Layer__table-cell",
+        "Layer__table-cell__category-col",
+        `${className}__actions-cell`,
+        `${className}__actions-cell--${open ? "open" : "close"}`
+      )
+    },
     /* @__PURE__ */ import_react67.default.createElement(
-      "td",
+      "span",
       {
-        className: "Layer__table-cell Layer__bank-transactions__tx-col",
-        ...openRow
+        className: `${className}__actions-container Layer__table-cell-content`
       },
-      /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react67.default.createElement(
-        Text,
+      !categorized && !open ? /* @__PURE__ */ import_react67.default.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__ */ import_react67.default.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, /* @__PURE__ */ import_react67.default.createElement(
+        Badge,
+        {
+          icon: /* @__PURE__ */ import_react67.default.createElement(Scissors_default, { size: 11 }),
+          tooltip: /* @__PURE__ */ import_react67.default.createElement(
+            SplitTooltipDetails,
+            {
+              classNamePrefix: className,
+              category: bankTransaction.category
+            }
+          )
         },
-        bankTransaction.counterparty_name ?? bankTransaction.description
-      ))
-    ),
-    /* @__PURE__ */ import_react67.default.createElement(
-      "td",
-      {
-        className: "Layer__table-cell Layer__bank-transactions__account-col",
-        ...openRow
-      },
-      /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react67.default.createElement(
+        "Split"
+      ), /* @__PURE__ */ import_react67.default.createElement("span", { className: `${className}__category-text__text` }, extractDescriptionForSplit(bankTransaction.category))), bankTransaction?.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction?.match && /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, /* @__PURE__ */ import_react67.default.createElement(
+        MatchBadge,
+        {
+          classNamePrefix: className,
+          bankTransaction,
+          dateFormat
+        }
+      ), /* @__PURE__ */ import_react67.default.createElement("span", { className: `${className}__category-text__text` }, `${(0, import_date_fns8.format)(
+        (0, import_date_fns8.parseISO)(bankTransaction.match.bank_transaction.date),
+        dateFormat
+      )}, ${bankTransaction.match?.details?.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react67.default.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
+      !categorized && !open && showRetry ? /* @__PURE__ */ import_react67.default.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__ */ import_react67.default.createElement(
         Text,
         {
           as: "span",
-          className: "Layer__bank-transactions__account-text",
-          withTooltip: "whenTruncated" /* whenTruncated */
+          size: "md" /* md */,
+          className: "Layer__unsaved-info"
         },
-        bankTransaction.account_name ?? ""
-      ))
-    ),
-    /* @__PURE__ */ import_react67.default.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__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
-    ),
-    /* @__PURE__ */ import_react67.default.createElement(
-      "td",
-      {
-        className: (0, import_classnames33.default)(
-          "Layer__table-cell",
-          "Layer__table-cell__category-col",
-          `${className}__actions-cell`,
-          `${className}__actions-cell--${open ? "open" : "close"}`
-        )
-      },
-      /* @__PURE__ */ import_react67.default.createElement(
-        "span",
+        /* @__PURE__ */ import_react67.default.createElement("span", null, "Unsaved"),
+        /* @__PURE__ */ import_react67.default.createElement(AlertCircle_default, { size: 12 })
+      ) : null,
+      !categorized && (open || !open && !showRetry) || categorized && open ? /* @__PURE__ */ import_react67.default.createElement(
+        SubmitButton,
         {
-          className: `${className}__actions-container Layer__table-cell-content`
-        },
-        !categorized && !open ? /* @__PURE__ */ import_react67.default.createElement(
-          CategorySelect,
-          {
-            bankTransaction,
-            name: `category-${bankTransaction.id}`,
-            value: selectedCategory,
-            onChange: (category) => {
-              setSelectedCategory(category);
-              setShowRetry(false);
-            },
-            disabled: bankTransaction.processing
-          }
-        ) : null,
-        categorized && !open ? /* @__PURE__ */ import_react67.default.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, /* @__PURE__ */ import_react67.default.createElement(
-          Badge,
-          {
-            icon: /* @__PURE__ */ import_react67.default.createElement(Scissors_default, { size: 11 }),
-            tooltip: /* @__PURE__ */ import_react67.default.createElement(
-              SplitTooltipDetails,
-              {
-                classNamePrefix: className,
-                category: bankTransaction.category
-              }
-            )
-          },
-          "Split"
-        ), /* @__PURE__ */ import_react67.default.createElement("span", { className: `${className}__category-text__text` }, extractDescriptionForSplit(bankTransaction.category))), bankTransaction?.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction?.match && /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, /* @__PURE__ */ import_react67.default.createElement(
-          MatchBadge,
-          {
-            classNamePrefix: className,
-            bankTransaction,
-            dateFormat
-          }
-        ), /* @__PURE__ */ import_react67.default.createElement("span", { className: `${className}__category-text__text` }, `${(0, import_date_fns8.format)(
-          (0, import_date_fns8.parseISO)(bankTransaction.match.bank_transaction.date),
-          dateFormat
-        )}, ${bankTransaction.match?.details?.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react67.default.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
-        !categorized && !open && showRetry ? /* @__PURE__ */ import_react67.default.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__ */ import_react67.default.createElement(
-          Text,
-          {
-            as: "span",
-            size: "md" /* md */,
-            className: "Layer__unsaved-info"
-          },
-          /* @__PURE__ */ import_react67.default.createElement("span", null, "Unsaved"),
-          /* @__PURE__ */ import_react67.default.createElement(AlertCircle_default, { size: 12 })
-        ) : null,
-        !categorized && (open || !open && !showRetry) || categorized && open ? /* @__PURE__ */ import_react67.default.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__ */ import_react67.default.createElement(
-          IconButton,
-          {
-            onClick: toggleOpen,
-            className: "Layer__bank-transaction-row__expand-button",
-            active: open,
-            icon: /* @__PURE__ */ import_react67.default.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__ */ import_react67.default.createElement(
+        IconButton,
+        {
+          onClick: toggleOpen,
+          className: "Layer__bank-transaction-row__expand-button",
+          active: open,
+          icon: /* @__PURE__ */ import_react67.default.createElement(
+            ChevronDownFill_default,
+            {
+              className: `Layer__chevron ${open ? "Layer__chevron__up" : "Layer__chevron__down"}`
+            }
+          )
+        }
       )
     )
-  ), /* @__PURE__ */ import_react67.default.createElement("tr", null, /* @__PURE__ */ import_react67.default.createElement("td", { colSpan: 5, className: "Layer__bank-transaction-row__expanded-td" }, /* @__PURE__ */ import_react67.default.createElement(
+  )), /* @__PURE__ */ import_react67.default.createElement("tr", null, /* @__PURE__ */ import_react67.default.createElement("td", { colSpan: 5, className: "Layer__bank-transaction-row__expanded-td" }, /* @__PURE__ */ import_react67.default.createElement(
     ExpandedBankTransactionRow,
     {
       ref: expandedRowRef,
@@ -6343,11 +6434,11 @@ var BankTransactionListItem = ({
   editable,
   showDescriptions,
   showReceiptUploads,
-  containerWidth
+  containerWidth,
+  removeTransaction
 }) => {
   const expandedRowRef = (0, import_react69.useRef)(null);
   const [showRetry, setShowRetry] = (0, import_react69.useState)(false);
-  const [removed, setRemoved] = (0, import_react69.useState)(false);
   const { categorize: categorizeBankTransaction2, match: matchBankTransaction2 } = useBankTransactionsContext();
   const [selectedCategory, setSelectedCategory] = (0, import_react69.useState)(
     getDefaultSelectedCategory(bankTransaction)
@@ -6369,6 +6460,13 @@ var BankTransactionListItem = ({
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
+  (0, import_react69.useEffect)(() => {
+    if (editable && bankTransaction.recently_categorized) {
+      setTimeout(() => {
+        removeTransaction(bankTransaction);
+      }, 300);
+    }
+  }, [bankTransaction.recently_categorized]);
   const save = () => {
     if (open && expandedRowRef?.current) {
       expandedRowRef?.current?.save();
@@ -6386,9 +6484,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` : "";
@@ -6587,7 +6682,15 @@ var BusinessForm = ({ bankTransaction }) => {
       onClick: onCategorySelect,
       selected: selectedCategory
     }
-  ), options.length === 0 ? /* @__PURE__ */ import_react71.default.createElement(Button, { onClick: openDrawer, fullWidth: true }, "Select category") : null, options.length > 0 ? /* @__PURE__ */ import_react71.default.createElement(
+  ), options.length === 0 ? /* @__PURE__ */ import_react71.default.createElement(
+    Button,
+    {
+      onClick: openDrawer,
+      fullWidth: true,
+      variant: "secondary" /* secondary */
+    },
+    "Select category"
+  ) : null, options.length > 0 ? /* @__PURE__ */ import_react71.default.createElement(
     Button,
     {
       onClick: save,
@@ -7008,8 +7111,12 @@ var BankTransactionMobileListItem = ({
   }, [transactionIdToOpen]);
   (0, import_react78.useEffect)(() => {
     if (!removeAnim && bankTransaction.recently_categorized) {
-      setRemoveAnim(true);
-      openNext();
+      if (editable) {
+        setRemoveAnim(true);
+        openNext();
+      } else {
+        close();
+      }
     }
   }, [
     bankTransaction.recently_categorized,
@@ -7036,6 +7143,13 @@ var BankTransactionMobileListItem = ({
       setShowComponent(true);
     }
   }, []);
+  (0, import_react78.useEffect)(() => {
+    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";
@@ -7051,18 +7165,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__ */ import_react78.default.createElement(
       "span",
@@ -7081,7 +7184,7 @@ var BankTransactionMobileListItem = ({
         centsToDollars(bankTransaction.amount)
       ), /* @__PURE__ */ import_react78.default.createElement("span", { className: `${className}__heading__date` }, (0, import_date_fns11.format)((0, import_date_fns11.parseISO)(bankTransaction.date), DATE_FORMAT2))))
     ),
-    /* @__PURE__ */ import_react78.default.createElement("div", { className: `${className}__expanded-row`, style: { height } }, open && /* @__PURE__ */ import_react78.default.createElement(
+    /* @__PURE__ */ import_react78.default.createElement("div", { className: `${className}__expanded-row`, style: { height: !open || removeAnim ? 0 : height } }, open && /* @__PURE__ */ import_react78.default.createElement(
       "div",
       {
         className: `${className}__expanded-row__content`,
@@ -7307,7 +7410,9 @@ var Pagination = ({
   totalCount,
   siblingCount = 1,
   currentPage,
-  pageSize
+  pageSize,
+  hasMore,
+  fetchMore
 }) => {
   const paginationRange = usePagination({
     currentPage,
@@ -7356,12 +7461,23 @@ var Pagination = ({
         onClick: () => {
           if (typeof pageNumber === "number") {
             onPageChange(pageNumber);
+            if (pageNumber === lastPage && hasMore && fetchMore) {
+              fetchMore();
+            }
           }
         }
       },
       pageNumber
     );
-  }), /* @__PURE__ */ import_react84.default.createElement(
+  }), hasMore && fetchMore ? /* @__PURE__ */ import_react84.default.createElement(
+    "li",
+    {
+      key: `page-has-more`,
+      className: "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--next",
+      onClick: fetchMore
+    },
+    "..."
+  ) : null, /* @__PURE__ */ import_react84.default.createElement(
     "li",
     {
       key: `page-last`,
@@ -7509,6 +7625,21 @@ var DatePickerOptions = ({
           },
           "This quarter"
         );
+      case "last-quarter":
+        return /* @__PURE__ */ import_react85.default.createElement(
+          TextButton,
+          {
+            key: option,
+            onClick: () => {
+              const lastQuarter = (0, import_date_fns13.subQuarters)(/* @__PURE__ */ new Date(), 1);
+              setSelectedDate([
+                (0, import_date_fns13.startOfQuarter)(lastQuarter),
+                (0, import_date_fns13.endOfQuarter)(lastQuarter)
+              ]);
+            }
+          },
+          "Last quarter"
+        );
       case "this-year":
         return /* @__PURE__ */ import_react85.default.createElement(
           TextButton,
@@ -7520,11 +7651,30 @@ var DatePickerOptions = ({
           },
           "This year"
         );
+      case "last-year":
+        return /* @__PURE__ */ import_react85.default.createElement(
+          TextButton,
+          {
+            key: option,
+            onClick: () => {
+              const lastYear = (0, import_date_fns13.subYears)(/* @__PURE__ */ new Date(), 1);
+              setSelectedDate([(0, import_date_fns13.startOfYear)(lastYear), (0, import_date_fns13.endOfYear)(lastYear)]);
+            }
+          },
+          "Last year"
+        );
     }
     return /* @__PURE__ */ import_react85.default.createElement(import_react85.default.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));
     });
@@ -7541,6 +7691,20 @@ var DatePickerOptions = ({
 
 // src/components/DatePicker/DatePicker.tsx
 var import_classnames38 = __toESM(require("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,
@@ -7559,10 +7723,29 @@ var DatePicker = ({
 }) => {
   const [updatePickerDate, setPickerDate] = (0, import_react86.useState)(false);
   const [selectedDates, setSelectedDates] = (0, import_react86.useState)(selected);
+  const [startDate, setStartDate] = (0, import_react86.useState)(
+    getDefaultRangeDate("start", mode, selected) ?? /* @__PURE__ */ new Date()
+  );
+  const [endDate, setEndDate] = (0, import_react86.useState)(
+    getDefaultRangeDate("end", mode, selected)
+  );
   (0, import_react86.useEffect)(() => {
-    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]);
   (0, import_react86.useEffect)(() => {
@@ -7572,6 +7755,11 @@ var DatePicker = ({
       setPickerDate(false);
     }
   }, [selectedDates]);
+  (0, import_react86.useEffect)(() => {
+    if (isRangeMode(mode)) {
+      setSelectedDates([startDate, endDate]);
+    }
+  }, [startDate, endDate]);
   const wrapperClassNames = (0, import_classnames38.default)(
     "Layer__datepicker__wrapper",
     mode === "timePicker" && "Layer__datepicker__time__wrapper"
@@ -7590,6 +7778,12 @@ var DatePicker = ({
     popperClassName
   );
   const handleDateChange = (date) => {
+    if (isRangeMode(mode)) {
+      const [start, end] = date;
+      setStartDate(start);
+      setEndDate(end);
+      return;
+    }
     setSelectedDates(date);
   };
   const isCurrentDate = () => {
@@ -7615,15 +7809,15 @@ var DatePicker = ({
     import_react_datepicker.default,
     {
       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__ */ import_react86.default.createElement("span", { className: "Layer__datepicker__day-contents" }, day),
@@ -7929,19 +8123,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__ */ import_react90.default.createElement(import_react90.default.Fragment, null, !isLoading && !error && (bankTransactions === void 0 || bankTransactions !== void 0 && bankTransactions.length === 0) ? /* @__PURE__ */ import_react90.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react90.default.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__ */ import_react90.default.createElement(Inbox_default, null) : void 0
     }
@@ -7951,7 +8156,7 @@ var DataStates = ({
       status: "failed" /* failed */,
       title: "Something went wrong",
       description: "We couldn\u2019t load your data.",
-      onRefresh: () => refetch(),
+      onRefresh: refetch,
       isLoading: isValidating
     }
   )) : null);
@@ -7960,6 +8165,7 @@ var DataStates = ({
 // src/components/BankTransactions/BankTransactions.tsx
 var import_date_fns15 = require("date-fns");
 var COMPONENT_NAME2 = "bank-transactions";
+var TEST_EMPTY_STATE = false;
 var BankTransactions = ({
   onError,
   ...props
@@ -7968,7 +8174,7 @@ var BankTransactions = ({
 };
 var BankTransactionsContent = ({
   asWidget = false,
-  pageSize = 15,
+  pageSize = 20,
   categorizedOnly = false,
   categorizeView = true,
   showDescriptions = false,
@@ -7979,7 +8185,6 @@ var BankTransactionsContent = ({
   hideHeader = false
 }) => {
   const [currentPage, setCurrentPage] = (0, import_react91.useState)(1);
-  const [removedTxs, setRemovedTxs] = (0, import_react91.useState)([]);
   const [initialLoad, setInitialLoad] = (0, import_react91.useState)(true);
   const [dateRange, setDateRange] = (0, import_react91.useState)({
     startDate: (0, import_date_fns15.startOfMonth)(/* @__PURE__ */ new Date()),
@@ -7995,9 +8200,12 @@ var BankTransactionsContent = ({
     refetch,
     setFilters,
     filters,
-    accountsList,
-    display
+    display,
+    hasMore,
+    fetchMore,
+    removeAfterCategorize
   } = useBankTransactionsContext();
+  const { data: linkedAccounts } = useLinkedAccounts();
   (0, import_react91.useEffect)(() => {
     activate();
   }, []);
@@ -8007,24 +8215,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]);
@@ -8036,7 +8244,7 @@ var BankTransactionsContent = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [loadingStatus]);
-  const bankTransactions = (0, import_react91.useMemo)(() => {
+  const bankTransactions = TEST_EMPTY_STATE ? [] : (0, import_react91.useMemo)(() => {
     if (monthlyView) {
       return data?.filter(
         (x) => (0, import_date_fns15.parseISO)(x.date) >= dateRange.startDate && (0, import_date_fns15.parseISO)(x.date) <= dateRange.endDate
@@ -8045,10 +8253,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);
   };
@@ -8057,11 +8265,7 @@ var BankTransactionsContent = ({
   const [listView, setListView] = (0, import_react91.useState)(false);
   const [containerWidth, setContainerWidth] = (0, import_react91.useState)(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;
@@ -8142,6 +8346,9 @@ var BankTransactionsContent = ({
       {
         bankTransactions,
         isLoading,
+        transactionsLoading: Boolean(
+          linkedAccounts?.some((item) => item.is_syncing)
+        ),
         isValidating,
         error,
         refetch,
@@ -8154,7 +8361,9 @@ var BankTransactionsContent = ({
         currentPage,
         totalCount: data?.length || 0,
         pageSize,
-        onPageChange: (page) => setCurrentPage(page)
+        onPageChange: (page) => setCurrentPage(page),
+        fetchMore,
+        hasMore
       }
     ))
   );
@@ -8314,7 +8523,7 @@ var applyShare = (items, total) => {
 // src/hooks/useProfitAndLoss/useProfitAndLossQuery.tsx
 var import_react94 = require("react");
 var import_date_fns16 = require("date-fns");
-var import_swr4 = __toESM(require("swr"));
+var import_swr3 = __toESM(require("swr"));
 var useProfitAndLossQuery = ({
   startDate,
   endDate,
@@ -8331,7 +8540,7 @@ var useProfitAndLossQuery = ({
     isValidating,
     error: rawError,
     mutate
-  } = (0, import_swr4.default)(
+  } = (0, import_swr3.default)(
     businessId && startDate && endDate && auth?.access_token && `profit-and-loss-${businessId}-${startDate.valueOf()}-${endDate.valueOf()}-${tagFilter?.key}-${tagFilter?.values?.join(
       ","
     )}-${reportingBasis}`,
@@ -8524,7 +8733,7 @@ var import_react98 = __toESM(require("react"));
 // src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
 var import_react96 = require("react");
 var import_date_fns18 = require("date-fns");
-var import_swr5 = __toESM(require("swr"));
+var import_swr4 = __toESM(require("swr"));
 var buildDates = ({ currentDate }) => {
   return {
     startYear: (0, import_date_fns18.startOfMonth)(currentDate).getFullYear() - 1,
@@ -8559,7 +8768,7 @@ var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
     isValidating,
     error,
     mutate
-  } = (0, import_swr5.default)(
+  } = (0, import_swr4.default)(
     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}`,
@@ -8864,8 +9073,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,
@@ -8884,6 +9095,8 @@ var ProfitAndLossChart = () => {
           name: (0, import_date_fns19.format)(currentDate, compactView ? "LLLLL" : "LLL"),
           revenue: 0,
           revenueUncategorized: 0,
+          operatingExpensesInverse: 0,
+          uncategorizedOutflowsInverse: 0,
           expenses: 0,
           expensesUncategorized: 0,
           netProfit: 0,
@@ -8897,7 +9110,18 @@ 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) => (0, import_date_fns19.differenceInMonths)(
         (0, import_date_fns19.startOfMonth)(new Date(x.year, x.month - 1, 1)),
         chartWindow.start
@@ -9184,6 +9408,22 @@ var ProfitAndLossChart = () => {
           stackId: "expenses"
         }
       ),
+      /* @__PURE__ */ import_react98.default.createElement(
+        import_recharts.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__ */ import_react98.default.createElement(import_recharts.Cell, { key: entry.name, fill: "url(#layer-bar-stripe-pattern-dark)" });
+        })
+      ),
       /* @__PURE__ */ import_react98.default.createElement(
         import_recharts.Bar,
         {
@@ -9219,6 +9459,22 @@ var ProfitAndLossChart = () => {
           );
         })
       ),
+      /* @__PURE__ */ import_react98.default.createElement(
+        import_recharts.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__ */ import_react98.default.createElement(import_recharts.Cell, { key: entry.name, fill: "url(#layer-bar-stripe-pattern-dark)" });
+        })
+      ),
       /* @__PURE__ */ import_react98.default.createElement(
         import_recharts.Bar,
         {
@@ -10605,11 +10861,11 @@ var TableProvider = ({ children }) => {
 // src/hooks/useBalanceSheet/useBalanceSheet.tsx
 var import_react112 = require("react");
 var import_date_fns23 = require("date-fns");
-var import_swr6 = __toESM(require("swr"));
+var import_swr5 = __toESM(require("swr"));
 var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
   const dateString = (0, import_date_fns23.format)((0, import_date_fns23.startOfDay)(date), "yyyy-MM-dd'T'HH:mm:ssXXX");
-  const { data, isLoading, isValidating, error, mutate } = (0, import_swr6.default)(
+  const { data, isLoading, isValidating, error, mutate } = (0, import_swr5.default)(
     businessId && dateString && auth?.access_token && `balance-sheet-${businessId}-${dateString}`,
     Layer.getBalanceSheet(apiUrl, auth?.access_token, {
       params: {
@@ -11054,7 +11310,7 @@ var StatementOfCashFlowContext = (0, import_react126.createContext)({
 // src/hooks/useStatementOfCashFlow/useStatementOfCashFlow.tsx
 var import_react127 = require("react");
 var import_date_fns25 = require("date-fns");
-var import_swr7 = __toESM(require("swr"));
+var import_swr6 = __toESM(require("swr"));
 var useStatementOfCashFlow = (startDate = /* @__PURE__ */ new Date(), endDate = /* @__PURE__ */ new Date()) => {
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
   const startDateString = (0, import_date_fns25.format)(
@@ -11062,7 +11318,7 @@ var useStatementOfCashFlow = (startDate = /* @__PURE__ */ new Date(), endDate =
     "yyyy-MM-dd'T'HH:mm:ssXXX"
   );
   const endDateString = (0, import_date_fns25.format)((0, import_date_fns25.startOfDay)(endDate), "yyyy-MM-dd'T'HH:mm:ssXXX");
-  const { data, isLoading, isValidating, error, mutate } = (0, import_swr7.default)(
+  const { data, isLoading, isValidating, error, mutate } = (0, import_swr6.default)(
     businessId && startDateString && endDateString && auth?.access_token && `statement-of-cash-${businessId}-${startDateString}-${endDateString}`,
     Layer.getStatementOfCashFlow(apiUrl, auth?.access_token, {
       params: {
@@ -11503,7 +11759,7 @@ var LEDGER_ACCOUNT_SUBTYPES_FOR_TYPE = {
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
 var import_date_fns28 = require("date-fns");
-var import_swr8 = __toESM(require("swr"));
+var import_swr7 = __toESM(require("swr"));
 var validate = (formData) => {
   const errors = [];
   const nameError = validateName(formData);
@@ -11604,7 +11860,7 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
   const [endDate, setEndDate] = (0, import_react132.useState)(
     initialEndDate ?? (0, import_date_fns28.endOfMonth)(Date.now())
   );
-  const { data, isLoading, isValidating, error, mutate } = (0, import_swr8.default)(
+  const { data, isLoading, isValidating, error, mutate } = (0, import_swr7.default)(
     businessId && auth?.access_token && `chart-of-accounts-${businessId}-${startDate?.valueOf()}-${endDate?.valueOf()}`,
     Layer.getLedgerAccountBalances(apiUrl, auth?.access_token, {
       params: {
@@ -11813,12 +12069,12 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
 
 // src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
 var import_react133 = require("react");
-var import_swr9 = __toESM(require("swr"));
+var import_swr8 = __toESM(require("swr"));
 var useLedgerAccounts = () => {
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
   const [accountId, setAccountId] = (0, import_react133.useState)();
   const [selectedEntryId, setSelectedEntryId] = (0, import_react133.useState)();
-  const { data, isLoading, isValidating, error, mutate } = (0, import_swr9.default)(
+  const { data, isLoading, isValidating, error, mutate } = (0, import_swr8.default)(
     businessId && accountId && auth?.access_token && `ledger-accounts-lines-${businessId}-${accountId}`,
     Layer.getLedgerAccountsLines(apiUrl, auth?.access_token, {
       params: { businessId, accountId }
@@ -11830,7 +12086,7 @@ var useLedgerAccounts = () => {
     isLoading: isLoadingEntry,
     isValidating: isValdiatingEntry,
     error: errorEntry
-  } = (0, import_swr9.default)(
+  } = (0, import_swr8.default)(
     businessId && selectedEntryId && auth?.access_token && `ledger-accounts-entry-${businessId}-${selectedEntryId}}`,
     Layer.getLedgerAccountsEntry(apiUrl, auth?.access_token, {
       params: { businessId, entryId: selectedEntryId }
@@ -12920,7 +13176,7 @@ var getAccountIdentifierPayload = (journalLineItem) => {
 };
 
 // src/hooks/useJournal/useJournal.tsx
-var import_swr10 = __toESM(require("swr"));
+var import_swr9 = __toESM(require("swr"));
 var useJournal = () => {
   const {
     auth,
@@ -12936,7 +13192,7 @@ var useJournal = () => {
   const [addingEntry, setAddingEntry] = (0, import_react149.useState)(false);
   const [sendingForm, setSendingForm] = (0, import_react149.useState)(false);
   const [apiError, setApiError] = (0, import_react149.useState)(void 0);
-  const { data, isLoading, isValidating, error, mutate } = (0, import_swr10.default)(
+  const { data, isLoading, isValidating, error, mutate } = (0, import_swr9.default)(
     businessId && auth?.access_token && `journal-lines-${businessId}`,
     Layer.getJournal(apiUrl, auth?.access_token, {
       params: { businessId }
@@ -13835,11 +14091,11 @@ var TasksContext = (0, import_react157.createContext)({
 
 // src/hooks/useTasks/useTasks.tsx
 var import_react158 = require("react");
-var import_swr11 = __toESM(require("swr"));
+var import_swr10 = __toESM(require("swr"));
 var useTasks = () => {
   const [loadedStatus, setLoadedStatus] = (0, import_react158.useState)("initial");
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
-  const { data, isLoading, isValidating, error, mutate } = (0, import_swr11.default)(
+  const { data, isLoading, isValidating, error, mutate } = (0, import_swr10.default)(
     businessId && auth?.access_token && `tasks-${businessId}`,
     Layer.getTasks(apiUrl, auth?.access_token, {
       params: { businessId }
@@ -14821,10 +15077,12 @@ var Components = ({
   AccountingOverview,
   BalanceSheet,
   BankTransactions,
+  BankTransactionsProvider,
   BankTransactionsWithLinkedAccounts,
   BookkeepingOverview,
   BookkeepingUpsellBar,
   ChartOfAccounts,
+  DisplayState,
   GeneralLedgerView,
   Journal,
   LayerProvider,