@layerfi/components 0.1.45 → 0.1.46

package/dist/esm/index.js

@@ -551,6 +551,7 @@ var DEPENDENCIES = {
   ["PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */]: ALL_TOUCHABLE,
   ["STATEMENT_OF_CASH_FLOWS" /* STATEMENT_OF_CASH_FLOWS */]: ALL_TOUCHABLE
 };
+var readTimestampsG = {};
 var useDataSync = () => {
   const initialTimestamp = Date.now();
   const [syncTimestamps, setSyncTimestamps] = useState2({
@@ -562,38 +563,31 @@ var useDataSync = () => {
     ["PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */]: initialTimestamp,
     ["STATEMENT_OF_CASH_FLOWS" /* STATEMENT_OF_CASH_FLOWS */]: initialTimestamp
   });
-  const [readTimestamps, setReadTimestamps] = useState2({
-    ["BALANCE_SHEET" /* BALANCE_SHEET */]: initialTimestamp,
-    ["CHART_OF_ACCOUNTS" /* CHART_OF_ACCOUNTS */]: initialTimestamp,
-    ["JOURNAL" /* JOURNAL */]: initialTimestamp,
-    ["LEDGER_ACCOUNTS" /* LEDGER_ACCOUNTS */]: initialTimestamp,
-    ["LINKED_ACCOUNTS" /* LINKED_ACCOUNTS */]: initialTimestamp,
-    ["PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */]: initialTimestamp,
-    ["STATEMENT_OF_CASH_FLOWS" /* STATEMENT_OF_CASH_FLOWS */]: initialTimestamp
-  });
+  const [readTimestamps, setReadTimestamps] = useState2({});
   const touch = (model) => {
     setSyncTimestamps({
       ...syncTimestamps,
       [model]: Date.now()
     });
   };
-  const read = (model) => {
-    setReadTimestamps({
-      ...readTimestamps,
-      [model]: Date.now()
-    });
+  const read = (model, cacheKey) => {
+    readTimestampsG = {
+      ...readTimestampsG,
+      [cacheKey]: {
+        t: Date.now(),
+        m: model
+      }
+    };
+    setReadTimestamps({ ...readTimestampsG });
   };
-  const hasBeenTouched = (model) => {
-    if (!(model in DEPENDENCIES)) {
+  const hasBeenTouched = (cacheKey) => {
+    const lastRead = cacheKey in readTimestamps ? readTimestamps[cacheKey] : void 0;
+    if (!lastRead || !lastRead?.m || !lastRead?.t) {
       return false;
     }
-    const lastRead = model in readTimestamps ? readTimestamps[model] : void 0;
-    if (!lastRead) {
-      false;
-    }
     return Boolean(
-      DEPENDENCIES[model]?.find((dep) => {
-        return dep in syncTimestamps && Boolean(syncTimestamps[dep]) && syncTimestamps[dep] > lastRead;
+      DEPENDENCIES[lastRead.m]?.find((dep) => {
+        return dep in syncTimestamps && Boolean(syncTimestamps[dep]) && syncTimestamps[dep] > lastRead.t;
       })
     );
   };
@@ -1011,11 +1005,11 @@ var useBankTransactions = (params) => {
   };
   useEffect2(() => {
     if (isLoading || isValidating) {
-      read("BANK_TRANSACTIONS" /* BANK_TRANSACTIONS */);
+      read("BANK_TRANSACTIONS" /* BANK_TRANSACTIONS */, "bank-transactions");
     }
   }, [isLoading, isValidating]);
   useEffect2(() => {
-    if (hasBeenTouched("BANK_TRANSACTIONS" /* BANK_TRANSACTIONS */)) {
+    if (hasBeenTouched("bank-transactions")) {
       refetch();
     }
   }, [syncTimestamps]);
@@ -1422,7 +1416,7 @@ var LayerProvider = ({
       });
     }
   }, [businessAccessToken, auth?.access_token]);
-  useSWR(
+  const { data: categoriesData } = useSWR(
     businessId && state.auth?.access_token && `categories-${businessId}`,
     Layer.getCategories(apiUrl, state.auth?.access_token, {
       params: { businessId }
@@ -1439,7 +1433,15 @@ var LayerProvider = ({
       }
     }
   );
-  useSWR(
+  useEffect3(() => {
+    if (categoriesData?.data?.categories?.length) {
+      dispatch({
+        type: "LayerContext.setCategories" /* setCategories */,
+        payload: { categories: categoriesData.data.categories || [] }
+      });
+    }
+  }, [categoriesData]);
+  const { data: businessData } = useSWR(
     businessId && state?.auth?.access_token && `business-${businessId}`,
     Layer.getBusiness(apiUrl, state?.auth?.access_token, {
       params: { businessId }
@@ -1456,6 +1458,14 @@ var LayerProvider = ({
       }
     }
   );
+  useEffect3(() => {
+    if (businessData?.data) {
+      dispatch({
+        type: "LayerContext.setBusiness" /* setBusiness */,
+        payload: { business: businessData.data || [] }
+      });
+    }
+  }, [businessData]);
   const setTheme = (theme2) => {
     dispatch({
       type: "LayerContext.setTheme" /* setTheme */,
@@ -1714,6 +1724,7 @@ var useLinkedAccounts = () => {
   const [loadingStatus, setLoadingStatus] = useState5("initial");
   const USE_PLAID_SANDBOX = usePlaidSandbox ?? true;
   const [linkMode, setLinkMode] = useState5("add");
+  const queryKey = businessId && auth?.access_token && `linked-accounts-${businessId}`;
   const {
     data: responseData,
     isLoading,
@@ -1721,7 +1732,7 @@ var useLinkedAccounts = () => {
     error: responseError,
     mutate
   } = useSWR2(
-    businessId && auth?.access_token && `linked-accounts-${businessId}`,
+    queryKey,
     Layer.getLinkedAccounts(apiUrl, auth?.access_token, {
       params: { businessId }
     })
@@ -1910,12 +1921,12 @@ var useLinkedAccounts = () => {
     touch("LINKED_ACCOUNTS" /* LINKED_ACCOUNTS */);
   };
   useEffect4(() => {
-    if (isLoading || isValidating) {
-      read("LINKED_ACCOUNTS" /* LINKED_ACCOUNTS */);
+    if (queryKey && (isLoading || isValidating)) {
+      read("LINKED_ACCOUNTS" /* LINKED_ACCOUNTS */, queryKey);
     }
   }, [isLoading, isValidating]);
   useEffect4(() => {
-    if (hasBeenTouched("LINKED_ACCOUNTS" /* LINKED_ACCOUNTS */)) {
+    if (queryKey && hasBeenTouched(queryKey)) {
       refetchAccounts();
     }
   }, [syncTimestamps]);
@@ -4198,7 +4209,7 @@ var LinkedAccountsComponent = ({
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
-import React111, { useState as useState27, useMemo as useMemo7, useEffect as useEffect21 } from "react";
+import React111, { useState as useState26, useMemo as useMemo6, useEffect as useEffect20 } from "react";
 
 // src/hooks/useElementSize/useElementSize.ts
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef7 } from "react";
@@ -4244,148 +4255,7 @@ var debounce = (fnc, timeout = 300) => {
 import React85 from "react";
 
 // src/components/BankTransactionList/BankTransactionListItem.tsx
-import React84, { useEffect as useEffect13, useRef as useRef11, useState as useState16 } from "react";
-
-// src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
-import { useEffect as useEffect8, useMemo as useMemo4, useState as useState10 } from "react";
-import { startOfMonth, sub } from "date-fns";
-import useSWR3 from "swr";
-var buildDates = ({ currentDate }) => {
-  return {
-    startYear: startOfMonth(currentDate).getFullYear() - 1,
-    startMonth: startOfMonth(currentDate).getMonth() + 1,
-    endYear: startOfMonth(currentDate).getFullYear(),
-    endMonth: startOfMonth(currentDate).getMonth() + 1
-  };
-};
-var buildMonthsArray = (startDate, endDate) => {
-  if (startDate >= endDate) {
-    return [];
-  }
-  var dates = [];
-  for (var d = startDate; d <= endDate; d.setMonth(d.getMonth() + 1)) {
-    dates.push(new Date(d));
-  }
-  return dates;
-};
-var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
-  currentDate: /* @__PURE__ */ new Date()
-}) => {
-  const { businessId, auth, apiUrl, syncTimestamps, read, hasBeenTouched } = useLayerContext();
-  const [date, setDate] = useState10(currentDate);
-  const [loaded, setLoaded] = useState10("initial");
-  const [data, setData] = useState10([]);
-  const { startYear, startMonth, endYear, endMonth } = useMemo4(() => {
-    return buildDates({ currentDate: date });
-  }, [date, businessId, tagFilter, reportingBasis]);
-  const {
-    data: rawData,
-    isLoading,
-    isValidating,
-    error,
-    mutate
-  } = useSWR3(
-    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}`,
-    Layer.getProfitAndLossSummaries(apiUrl, auth?.access_token, {
-      params: {
-        businessId,
-        startYear: startYear.toString(),
-        startMonth: startMonth.toString(),
-        endYear: endYear.toString(),
-        endMonth: endMonth.toString(),
-        tagKey: tagFilter?.key,
-        tagValues: tagFilter?.values?.join(","),
-        reportingBasis
-      }
-    })
-  );
-  useEffect8(() => {
-    const newData = data.slice();
-    const newPeriod = buildMonthsArray(sub(date, { years: 1 }), date);
-    if (newData && newPeriod) {
-      newPeriod.forEach((x) => {
-        if (!newData?.find(
-          (n) => x.getMonth() + 1 === n.month && x.getFullYear() === n.year
-        )) {
-          newData.push({
-            year: x.getFullYear(),
-            month: x.getMonth() + 1,
-            income: 0,
-            costOfGoodsSold: 0,
-            grossProfit: 0,
-            operatingExpenses: 0,
-            profitBeforeTaxes: 0,
-            taxes: 0,
-            netProfit: 0,
-            fullyCategorized: false,
-            totalExpenses: 0,
-            uncategorizedInflows: 0,
-            uncategorizedOutflows: 0,
-            uncategorized_transactions: 0,
-            isLoading: true
-          });
-        }
-      });
-    }
-    if (newData) {
-      setData(
-        newData.sort(
-          (a, b) => Number(new Date(a.year, a.month, 1)) - Number(new Date(b.year, b.month, 1))
-        )
-      );
-    }
-  }, [startYear, startMonth]);
-  useEffect8(() => {
-    const newData = rawData?.data?.months?.slice();
-    if (data && newData) {
-      data.forEach((x) => {
-        if (!newData?.find((n) => x.month === n.month && x.year === n.year)) {
-          newData.push({ ...x });
-        }
-      });
-    }
-    if (newData) {
-      setData(
-        newData.sort(
-          (a, b) => Number(new Date(a.year, a.month, 1)) - Number(new Date(b.year, b.month, 1))
-        )
-      );
-    }
-  }, [rawData]);
-  useEffect8(() => {
-    if (isLoading && loaded === "initial") {
-      setLoaded("loading");
-      return;
-    }
-    if (!isLoading && rawData) {
-      setLoaded("complete");
-    }
-  }, [data, isLoading]);
-  const pullData = (date2) => setDate(date2);
-  useEffect8(() => {
-    if (isLoading || isValidating) {
-      read("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */);
-    }
-  }, [isLoading, isValidating]);
-  useEffect8(() => {
-    if (hasBeenTouched("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */)) {
-      mutate();
-    }
-  }, [syncTimestamps]);
-  const refetch = () => {
-    mutate();
-  };
-  return {
-    data,
-    isLoading,
-    loaded,
-    error,
-    pullData,
-    refetch
-  };
-};
+import React84, { useEffect as useEffect12, useRef as useRef11, useState as useState15 } from "react";
 
 // src/icons/ChevronDownFill.tsx
 import * as React57 from "react";
@@ -4413,7 +4283,7 @@ var ChevronDownFill = ({ size = 18, ...props }) => /* @__PURE__ */ React57.creat
 var ChevronDownFill_default = ChevronDownFill;
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-import React82, { useEffect as useEffect12, useRef as useRef10, useState as useState15 } from "react";
+import React82, { useEffect as useEffect11, useRef as useRef10, useState as useState14 } from "react";
 
 // src/icons/Scissors.tsx
 import * as React58 from "react";
@@ -4654,7 +4524,7 @@ var MinimizeTwo_default = MinimizeTwo;
 import React64, { useContext as useContext9 } from "react";
 
 // src/components/BankTransactionMobileList/BusinessCategories.tsx
-import React63, { useState as useState11 } from "react";
+import React63, { useState as useState10 } from "react";
 
 // src/components/ActionableList/ActionableList.tsx
 import React62 from "react";
@@ -4750,8 +4620,8 @@ var getAssignedValue = (bankTransaction) => {
 var BusinessCategories = ({ select }) => {
   const { categories } = useLayerContext();
   const categoryOptions = flattenCategories(categories);
-  const [optionsToShow, setOptionsToShow] = useState11(categoryOptions);
-  const [selectedGroup, setSelectedGroup] = useState11();
+  const [optionsToShow, setOptionsToShow] = useState10(categoryOptions);
+  const [selectedGroup, setSelectedGroup] = useState10();
   const onCategorySelect = (v) => {
     if (v.value.type === "GROUP" && v.value.items) {
       setOptionsToShow(v.value.items);
@@ -5011,9 +4881,9 @@ var CategorySelect = ({
 import React80, {
   forwardRef as forwardRef5,
   useImperativeHandle,
-  useState as useState14,
+  useState as useState13,
   useCallback,
-  useEffect as useEffect11,
+  useEffect as useEffect10,
   useRef as useRef9
 } from "react";
 
@@ -5516,8 +5386,8 @@ var Textarea = ({
 
 // src/components/Toggle/Toggle.tsx
 import React78, {
-  useEffect as useEffect9,
-  useState as useState12
+  useEffect as useEffect8,
+  useState as useState11
 } from "react";
 import classNames31 from "classnames";
 var Toggle = ({
@@ -5527,9 +5397,9 @@ var Toggle = ({
   onChange,
   size = "medium" /* medium */
 }) => {
-  const [currentWidth, setCurrentWidth] = useState12(0);
-  const [thumbPos, setThumbPos] = useState12({ left: 0, width: 0 });
-  const [initialized, setInitialized] = useState12(false);
+  const [currentWidth, setCurrentWidth] = useState11(0);
+  const [thumbPos, setThumbPos] = useState11({ left: 0, width: 0 });
+  const [initialized, setInitialized] = useState11(false);
   const toggleRef = useElementSize((a, b, c) => {
     if (c.width && c?.width !== currentWidth) {
       setCurrentWidth(c.width);
@@ -5549,9 +5419,12 @@ var Toggle = ({
     if (!toggleRef?.current) {
       return;
     }
-    const optionsNodes = [...toggleRef.current.children].filter(
-      (c) => c.className.includes("Layer__toggle-option")
-    );
+    const optionsNodes = [...toggleRef.current.children].map((x) => {
+      if (x.className.includes("Layer__tooltip-trigger") && x.children && x.children.length > 0) {
+        return x.children[0];
+      }
+      return x;
+    }).filter((c) => c.className.includes("Layer__toggle-option"));
     let shift2 = 0;
     let width = thumbPos.width;
     optionsNodes.forEach((c, i) => {
@@ -5564,14 +5437,14 @@ var Toggle = ({
     shift2 = shift2 + (size === "medium" /* medium */ ? 2 : 1.5);
     setThumbPos({ left: shift2, width });
   };
-  useEffect9(() => {
+  useEffect8(() => {
     const selectedIndex = getSelectedIndex();
     updateThumbPosition(selectedIndex);
     setTimeout(() => {
       setInitialized(true);
     }, 400);
   }, []);
-  useEffect9(() => {
+  useEffect8(() => {
     const selectedIndex = getSelectedIndex();
     updateThumbPosition(selectedIndex);
   }, [currentWidth]);
@@ -5659,7 +5532,7 @@ var ToggleOption = ({
 };
 
 // src/components/ExpandedBankTransactionRow/APIErrorNotifications.tsx
-import React79, { useEffect as useEffect10, useState as useState13 } from "react";
+import React79, { useEffect as useEffect9, useState as useState12 } from "react";
 var ERROR_TITLE = "Approval Failed";
 var ERROR_MESSAGE = "Something went wrong, try again later";
 var NOTIFICATION_TIME = 4e3;
@@ -5669,7 +5542,7 @@ var APIErrorNotifications = ({
   bankTransaction,
   containerWidth
 }) => {
-  const [notifications, setNotifications] = useState13([]);
+  const [notifications, setNotifications] = useState12([]);
   const pushNotification = (title, message) => {
     const timestamp = (/* @__PURE__ */ new Date()).valueOf();
     if (notificationsCache.find(
@@ -5698,7 +5571,7 @@ var APIErrorNotifications = ({
     );
     setNotifications(notificationsCache.concat());
   };
-  useEffect10(() => {
+  useEffect9(() => {
     if (bankTransaction.error) {
       pushNotification(ERROR_TITLE, ERROR_MESSAGE);
     }
@@ -5723,8 +5596,8 @@ var Notification = ({
   notification,
   deleteNotification
 }) => {
-  const [visible, setVisible] = useState13(false);
-  useEffect10(() => {
+  const [visible, setVisible] = useState12(false);
+  useEffect9(() => {
     setVisible(true);
     const timer = setTimeout(() => {
       hideNotification();
@@ -5794,31 +5667,29 @@ var ExpandedBankTransactionRow = forwardRef5(
     containerWidth,
     showDescriptions,
     mode,
-    showReceiptUploads,
-    hardRefreshPnlOnCategorize
+    showReceiptUploads
   }, ref) => {
     const {
       categorize: categorizeBankTransaction2,
       match: matchBankTransaction2
     } = useBankTransactionsContext();
-    const { refetch } = useProfitAndLossLTM();
-    const [purpose, setPurpose] = useState14(
+    const [purpose, setPurpose] = useState13(
       bankTransaction.category ? "categorize" /* categorize */ : hasMatch(bankTransaction) ? "match" /* match */ : "categorize" /* categorize */
     );
-    const [selectedMatchId, setSelectedMatchId] = useState14(
+    const [selectedMatchId, setSelectedMatchId] = useState13(
       isAlreadyMatched2(bankTransaction)
     );
-    const [matchFormError, setMatchFormError] = useState14();
-    const [splitFormError, setSplitFormError] = useState14();
-    const [height, setHeight] = useState14(0);
-    const [isOver, setOver] = useState14(false);
+    const [matchFormError, setMatchFormError] = useState13();
+    const [splitFormError, setSplitFormError] = useState13();
+    const [height, setHeight] = useState13(0);
+    const [isOver, setOver] = useState13(false);
     const bodyRef = useRef9(null);
-    const [memoText, setMemoText] = useState14();
-    const [receiptUrls, setReceiptUrls] = useState14([]);
-    const [isLoaded, setIsLoaded] = useState14(false);
+    const [memoText, setMemoText] = useState13();
+    const [receiptUrls, setReceiptUrls] = useState13([]);
+    const [isLoaded, setIsLoaded] = useState13(false);
     const { auth, businessId, apiUrl } = useLayerContext();
     const defaultCategory = bankTransaction.category || hasSuggestions(bankTransaction.categorization_flow) && bankTransaction.categorization_flow?.suggestions?.[0];
-    const [rowState, updateRowState] = useState14({
+    const [rowState, updateRowState] = useState13({
       splits: bankTransaction.category?.entries ? bankTransaction.category?.entries.map((c) => {
         return {
           amount: c.amount || 0,
@@ -5933,8 +5804,6 @@ var ExpandedBankTransactionRow = forwardRef5(
         } else if (selectedMatchId && selectedMatchId !== isAlreadyMatched2(bankTransaction)) {
           onMatchSubmit(selectedMatchId);
         }
-        if (hardRefreshPnlOnCategorize)
-          refetch();
         return;
       }
       if (!validateSplit(rowState)) {
@@ -5960,8 +5829,6 @@ var ExpandedBankTransactionRow = forwardRef5(
           }))
         }
       );
-      if (hardRefreshPnlOnCategorize)
-        refetch();
       close();
     };
     const fetchMetadata = async () => {
@@ -6024,7 +5891,7 @@ var ExpandedBankTransactionRow = forwardRef5(
       },
       [isOpen]
     );
-    useEffect11(() => {
+    useEffect10(() => {
       if (!isLoaded) {
         return;
       }
@@ -6036,7 +5903,7 @@ var ExpandedBankTransactionRow = forwardRef5(
         });
       }
     }, [getDivHeight, isOpen]);
-    useEffect11(() => {
+    useEffect10(() => {
       const loadDocumentsAndMetadata = async () => {
         if (showDescriptions)
           await fetchMetadata();
@@ -6238,7 +6105,7 @@ var ExpandedBankTransactionRow = forwardRef5(
           "Receipt ",
           index + 1
         )))),
-        asListItem ? /* @__PURE__ */ React80.createElement("div", { className: `${className}__submit-btn` }, bankTransaction.error ? /* @__PURE__ */ React80.createElement(
+        asListItem && categorizationEnabled(mode) ? /* @__PURE__ */ React80.createElement("div", { className: `${className}__submit-btn` }, bankTransaction.error ? /* @__PURE__ */ React80.createElement(
           Text,
           {
             as: "span",
@@ -6317,21 +6184,19 @@ var BankTransactionRow = ({
   initialLoad,
   showDescriptions,
   showReceiptUploads,
-  hardRefreshPnlOnCategorize,
   stringOverrides
 }) => {
   const expandedRowRef = useRef10(null);
-  const [showRetry, setShowRetry] = useState15(false);
+  const [showRetry, setShowRetry] = useState14(false);
   const {
     filters,
     categorize: categorizeBankTransaction2,
     match: matchBankTransaction2
   } = useBankTransactionsContext();
-  const { refetch } = useProfitAndLossLTM();
-  const [selectedCategory, setSelectedCategory] = useState15(
+  const [selectedCategory, setSelectedCategory] = useState14(
     getDefaultSelectedCategory(bankTransaction)
   );
-  const [open, setOpen] = useState15(false);
+  const [open, setOpen] = useState14(false);
   const toggleOpen = () => {
     setShowRetry(false);
     setOpen(!open);
@@ -6347,8 +6212,8 @@ var BankTransactionRow = ({
       }
     }
   };
-  const [showComponent, setShowComponent] = useState15(false);
-  useEffect12(() => {
+  const [showComponent, setShowComponent] = useState14(false);
+  useEffect11(() => {
     if (initialLoad) {
       const timeoutId = setTimeout(() => {
         setShowComponent(true);
@@ -6358,12 +6223,12 @@ var BankTransactionRow = ({
       setShowComponent(true);
     }
   }, []);
-  useEffect12(() => {
+  useEffect11(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
-  useEffect12(() => {
+  useEffect11(() => {
     if (editable && bankTransaction.recently_categorized) {
       setTimeout(() => {
         removeTransaction(bankTransaction);
@@ -6373,8 +6238,6 @@ var BankTransactionRow = ({
   const save = async () => {
     if (open && expandedRowRef?.current) {
       expandedRowRef?.current?.save();
-      if (hardRefreshPnlOnCategorize)
-        refetch();
       return;
     }
     if (!selectedCategory) {
@@ -6386,16 +6249,12 @@ var BankTransactionRow = ({
         selectedCategory.payload.id
       );
       setOpen(false);
-      if (hardRefreshPnlOnCategorize)
-        refetch();
       return;
     }
     await categorizeBankTransaction2(bankTransaction.id, {
       type: "Category",
       category: getCategorizePayload(selectedCategory)
     });
-    if (hardRefreshPnlOnCategorize)
-      refetch();
     setOpen(false);
   };
   const categorized = isCategorized(bankTransaction);
@@ -6572,8 +6431,7 @@ var BankTransactionRow = ({
       close: () => setOpen(false),
       containerWidth,
       showDescriptions,
-      showReceiptUploads,
-      hardRefreshPnlOnCategorize
+      showReceiptUploads
     }
   ))));
 };
@@ -6626,36 +6484,34 @@ var BankTransactionListItem = ({
   mode,
   showDescriptions,
   showReceiptUploads,
-  hardRefreshPnlOnCategorize,
   containerWidth,
   removeTransaction,
   stringOverrides
 }) => {
   const expandedRowRef = useRef11(null);
-  const [showRetry, setShowRetry] = useState16(false);
+  const [showRetry, setShowRetry] = useState15(false);
   const { categorize: categorizeBankTransaction2, match: matchBankTransaction2 } = useBankTransactionsContext();
-  const { refetch } = useProfitAndLossLTM();
-  const [selectedCategory, setSelectedCategory] = useState16(
+  const [selectedCategory, setSelectedCategory] = useState15(
     getDefaultSelectedCategory(bankTransaction)
   );
-  const [open, setOpen] = useState16(false);
+  const [open, setOpen] = useState15(false);
   const toggleOpen = () => {
     setShowRetry(false);
     setOpen(!open);
   };
-  const [showComponent, setShowComponent] = useState16(false);
-  useEffect13(() => {
+  const [showComponent, setShowComponent] = useState15(false);
+  useEffect12(() => {
     const timeoutId = setTimeout(() => {
       setShowComponent(true);
     }, index * 80);
     return () => clearTimeout(timeoutId);
   }, []);
-  useEffect13(() => {
+  useEffect12(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
-  useEffect13(() => {
+  useEffect12(() => {
     if (editable && bankTransaction.recently_categorized) {
       setTimeout(() => {
         removeTransaction(bankTransaction);
@@ -6665,8 +6521,6 @@ var BankTransactionListItem = ({
   const save = () => {
     if (open && expandedRowRef?.current) {
       expandedRowRef?.current?.save();
-      if (hardRefreshPnlOnCategorize)
-        refetch();
       return;
     }
     if (!selectedCategory) {
@@ -6674,16 +6528,12 @@ var BankTransactionListItem = ({
     }
     if (selectedCategory.type === "match") {
       matchBankTransaction2(bankTransaction.id, selectedCategory.payload.id);
-      if (hardRefreshPnlOnCategorize)
-        refetch();
       return;
     }
     categorizeBankTransaction2(bankTransaction.id, {
       type: "Category",
       category: getCategorizePayload(selectedCategory)
     });
-    if (hardRefreshPnlOnCategorize)
-      refetch();
   };
   const categorized = isCategorized(bankTransaction);
   const className = "Layer__bank-transaction-list-item";
@@ -6726,8 +6576,7 @@ var BankTransactionListItem = ({
       submitBtnText: categorized ? stringOverrides?.updateButtonText || "Update" : stringOverrides?.approveButtonText || "Approve",
       containerWidth,
       showDescriptions,
-      showReceiptUploads,
-      hardRefreshPnlOnCategorize
+      showReceiptUploads
     }
   )), /* @__PURE__ */ React84.createElement("span", { className: `${className}__base-row` }, !categorized ? /* @__PURE__ */ React84.createElement(
     CategorySelect,
@@ -6779,7 +6628,6 @@ var BankTransactionList = ({
   containerWidth,
   showDescriptions = false,
   showReceiptUploads = false,
-  hardRefreshPnlOnCategorize = false,
   stringOverrides
 }) => {
   return /* @__PURE__ */ React85.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions?.map(
@@ -6796,7 +6644,6 @@ var BankTransactionList = ({
         containerWidth,
         showDescriptions,
         showReceiptUploads,
-        hardRefreshPnlOnCategorize,
         stringOverrides
       }
     )
@@ -6807,30 +6654,26 @@ var BankTransactionList = ({
 import React93 from "react";
 
 // src/components/BankTransactionMobileList/BankTransactionMobileListItem.tsx
-import React92, { useContext as useContext11, useEffect as useEffect18, useRef as useRef12, useState as useState23 } from "react";
+import React92, { useContext as useContext11, useEffect as useEffect17, useRef as useRef12, useState as useState22 } from "react";
 
 // src/components/BankTransactionMobileList/BankTransactionMobileForms.tsx
 import React91 from "react";
 
 // src/components/BankTransactionMobileList/BusinessForm.tsx
-import React86, { useContext as useContext10, useEffect as useEffect14, useMemo as useMemo5, useState as useState17 } from "react";
-var BusinessForm = ({
-  bankTransaction,
-  hardRefreshPnlOnCategorize = false
-}) => {
+import React86, { useContext as useContext10, useEffect as useEffect13, useMemo as useMemo4, useState as useState16 } from "react";
+var BusinessForm = ({ bankTransaction }) => {
   const { setContent, close } = useContext10(DrawerContext);
   const { categorize: categorizeBankTransaction2, isLoading } = useBankTransactionsContext();
-  const { refetch } = useProfitAndLossLTM();
-  const [selectedCategory, setSelectedCategory] = useState17(
+  const [selectedCategory, setSelectedCategory] = useState16(
     getAssignedValue(bankTransaction)
   );
-  const [showRetry, setShowRetry] = useState17(false);
-  useEffect14(() => {
+  const [showRetry, setShowRetry] = useState16(false);
+  useEffect13(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
-  const options = useMemo5(() => {
+  const options = useMemo4(() => {
     const options2 = bankTransaction?.categorization_flow?.type === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? bankTransaction.categorization_flow.suggestions.map(
       (x) => mapCategoryToOption(x)
     ) : [];
@@ -6887,8 +6730,6 @@ var BusinessForm = ({
       },
       true
     );
-    if (hardRefreshPnlOnCategorize)
-      refetch();
   };
   return /* @__PURE__ */ React86.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__business-form" }, /* @__PURE__ */ React86.createElement(
     ActionableList,
@@ -6917,7 +6758,7 @@ var BusinessForm = ({
 };
 
 // src/components/BankTransactionMobileList/PersonalForm.tsx
-import React87, { useEffect as useEffect15, useState as useState18 } from "react";
+import React87, { useEffect as useEffect14, useState as useState17 } from "react";
 var isAlreadyAssigned = (bankTransaction) => {
   if (bankTransaction.categorization_status === "MATCHED" /* MATCHED */ || bankTransaction?.categorization_status === "SPLIT" /* SPLIT */) {
     return false;
@@ -6926,11 +6767,10 @@ var isAlreadyAssigned = (bankTransaction) => {
     bankTransaction.category && PersonalCategories.includes(bankTransaction.category.display_name)
   );
 };
-var PersonalForm = ({ bankTransaction, hardRefreshPnlOnCategorize }) => {
+var PersonalForm = ({ bankTransaction }) => {
   const { categorize: categorizeBankTransaction2, isLoading } = useBankTransactionsContext();
-  const { refetch } = useProfitAndLossLTM();
-  const [showRetry, setShowRetry] = useState18(false);
-  useEffect15(() => {
+  const [showRetry, setShowRetry] = useState17(false);
+  useEffect14(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
     }
@@ -6947,8 +6787,6 @@ var PersonalForm = ({ bankTransaction, hardRefreshPnlOnCategorize }) => {
       },
       true
     );
-    if (hardRefreshPnlOnCategorize)
-      refetch();
   };
   const alreadyAssigned = isAlreadyAssigned(bankTransaction);
   return /* @__PURE__ */ React87.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__personal-form" }, /* @__PURE__ */ React87.createElement(
@@ -6963,22 +6801,20 @@ var PersonalForm = ({ bankTransaction, hardRefreshPnlOnCategorize }) => {
 };
 
 // src/components/BankTransactionMobileList/SplitAndMatchForm.tsx
-import React90, { useState as useState21 } from "react";
+import React90, { useState as useState20 } from "react";
 
 // src/components/BankTransactionMobileList/MatchForm.tsx
-import React88, { useEffect as useEffect16, useState as useState19 } from "react";
+import React88, { useEffect as useEffect15, useState as useState18 } from "react";
 var MatchForm2 = ({
-  bankTransaction,
-  hardRefreshPnlOnCategorize
+  bankTransaction
 }) => {
   const { match: matchBankTransaction2, isLoading } = useBankTransactionsContext();
-  const { refetch } = useProfitAndLossLTM();
-  const [selectedMatchId, setSelectedMatchId] = useState19(
+  const [selectedMatchId, setSelectedMatchId] = useState18(
     isAlreadyMatched(bankTransaction)
   );
-  const [formError, setFormError] = useState19();
-  const [showRetry, setShowRetry] = useState19(false);
-  useEffect16(() => {
+  const [formError, setFormError] = useState18();
+  const [showRetry, setShowRetry] = useState18(false);
+  useEffect15(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
     } else if (showRetry) {
@@ -6999,8 +6835,6 @@ var MatchForm2 = ({
       setFormError("Select an option to match the transaction");
     } else if (selectedMatchId && selectedMatchId !== isAlreadyMatched(bankTransaction)) {
       onMatchSubmit(selectedMatchId);
-      if (hardRefreshPnlOnCategorize)
-        refetch();
     }
     return;
   };
@@ -7027,20 +6861,18 @@ var MatchForm2 = ({
 };
 
 // src/components/BankTransactionMobileList/SplitForm.tsx
-import React89, { useEffect as useEffect17, useState as useState20 } from "react";
+import React89, { useEffect as useEffect16, useState as useState19 } from "react";
 import classNames35 from "classnames";
 var SplitForm = ({
-  bankTransaction,
-  hardRefreshPnlOnCategorize
+  bankTransaction
 }) => {
   const {
     categorize: categorizeBankTransaction2,
     isLoading,
     error
   } = useBankTransactionsContext();
-  const { refetch } = useProfitAndLossLTM();
   const defaultCategory = bankTransaction.category || hasSuggestions(bankTransaction.categorization_flow) && bankTransaction.categorization_flow?.suggestions?.[0];
-  const [rowState, updateRowState] = useState20({
+  const [rowState, updateRowState] = useState19({
     splits: bankTransaction.category?.entries ? bankTransaction.category?.entries.map((c) => {
       return {
         amount: c.amount || 0,
@@ -7062,9 +6894,9 @@ var SplitForm = ({
     description: "",
     file: void 0
   });
-  const [formError, setFormError] = useState20();
-  const [showRetry, setShowRetry] = useState20(false);
-  useEffect17(() => {
+  const [formError, setFormError] = useState19();
+  const [showRetry, setShowRetry] = useState19(false);
+  useEffect16(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
     }
@@ -7162,8 +6994,6 @@ var SplitForm = ({
       },
       true
     );
-    if (hardRefreshPnlOnCategorize)
-      refetch();
   };
   return /* @__PURE__ */ React89.createElement("div", null, /* @__PURE__ */ React89.createElement(Text, { weight: "bold" /* bold */, size: "sm" /* sm */ }, "Split transaction"), /* @__PURE__ */ React89.createElement("div", { className: "Layer__bank-transactions__table-cell__header" }, /* @__PURE__ */ React89.createElement(Text, { size: "sm" /* sm */ }, "Category"), /* @__PURE__ */ React89.createElement(Text, { size: "sm" /* sm */ }, "Amount")), /* @__PURE__ */ React89.createElement("div", { className: "Layer__bank-transactions__splits-inputs" }, rowState.splits.map((split, index) => /* @__PURE__ */ React89.createElement(
     "div",
@@ -7233,30 +7063,28 @@ var SplitForm = ({
 
 // src/components/BankTransactionMobileList/SplitAndMatchForm.tsx
 var SplitAndMatchForm = ({
-  bankTransaction,
-  hardRefreshPnlOnCategorize
+  bankTransaction
 }) => {
   const anyMatch = hasMatch(bankTransaction);
-  const [formType, setFormType] = useState21(
+  const [formType, setFormType] = useState20(
     bankTransaction.category ? "categorize" /* categorize */ : anyMatch ? "match" /* match */ : "categorize" /* categorize */
   );
-  return /* @__PURE__ */ React90.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__split-and-match-form" }, formType === "categorize" /* categorize */ && /* @__PURE__ */ React90.createElement(SplitForm, { bankTransaction, hardRefreshPnlOnCategorize }), formType === "match" /* match */ && /* @__PURE__ */ React90.createElement(MatchForm2, { bankTransaction, hardRefreshPnlOnCategorize }), anyMatch && formType === "match" /* match */ ? /* @__PURE__ */ React90.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns" }, /* @__PURE__ */ React90.createElement(TextButton, { onClick: () => setFormType("categorize" /* categorize */) }, "or split transaction")) : null, anyMatch && formType === "categorize" /* categorize */ ? /* @__PURE__ */ React90.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns" }, /* @__PURE__ */ React90.createElement(TextButton, { onClick: () => setFormType("match" /* match */) }, "or find match")) : null);
+  return /* @__PURE__ */ React90.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__split-and-match-form" }, formType === "categorize" /* categorize */ && /* @__PURE__ */ React90.createElement(SplitForm, { bankTransaction }), formType === "match" /* match */ && /* @__PURE__ */ React90.createElement(MatchForm2, { bankTransaction }), anyMatch && formType === "match" /* match */ ? /* @__PURE__ */ React90.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns" }, /* @__PURE__ */ React90.createElement(TextButton, { onClick: () => setFormType("categorize" /* categorize */) }, "or split transaction")) : null, anyMatch && formType === "categorize" /* categorize */ ? /* @__PURE__ */ React90.createElement("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns" }, /* @__PURE__ */ React90.createElement(TextButton, { onClick: () => setFormType("match" /* match */) }, "or find match")) : null);
 };
 
 // src/components/BankTransactionMobileList/BankTransactionMobileForms.tsx
 var BankTransactionMobileForms = ({
   purpose,
-  bankTransaction,
-  hardRefreshPnlOnCategorize
+  bankTransaction
 }) => {
   const getContent = () => {
     switch (purpose) {
       case "business":
-        return /* @__PURE__ */ React91.createElement(BusinessForm, { bankTransaction, hardRefreshPnlOnCategorize });
+        return /* @__PURE__ */ React91.createElement(BusinessForm, { bankTransaction });
       case "personal":
-        return /* @__PURE__ */ React91.createElement(PersonalForm, { bankTransaction, hardRefreshPnlOnCategorize });
+        return /* @__PURE__ */ React91.createElement(PersonalForm, { bankTransaction });
       case "more":
-        return /* @__PURE__ */ React91.createElement(SplitAndMatchForm, { bankTransaction, hardRefreshPnlOnCategorize });
+        return /* @__PURE__ */ React91.createElement(SplitAndMatchForm, { bankTransaction });
       default:
         return null;
     }
@@ -7265,9 +7093,9 @@ var BankTransactionMobileForms = ({
 };
 
 // src/components/BankTransactionMobileList/TransactionToOpenContext.ts
-import { createContext as createContext5, useState as useState22 } from "react";
+import { createContext as createContext5, useState as useState21 } from "react";
 var useTransactionToOpen = () => {
-  const [transactionIdToOpen, setTransactionIdToOpen] = useState22(void 0);
+  const [transactionIdToOpen, setTransactionIdToOpen] = useState21(void 0);
   const clearTransactionIdToOpen = () => setTransactionIdToOpen(void 0);
   return {
     transactionIdToOpen,
@@ -7300,8 +7128,7 @@ var BankTransactionMobileListItem = ({
   removeTransaction,
   editable,
   mode,
-  initialLoad,
-  hardRefreshPnlOnCategorize = false
+  initialLoad
 }) => {
   const {
     transactionIdToOpen,
@@ -7315,14 +7142,14 @@ var BankTransactionMobileListItem = ({
     setHeadingHeight(height2);
   });
   const itemRef = useRef12(null);
-  const [removeAnim, setRemoveAnim] = useState23(false);
-  const [purpose, setPurpose] = useState23(
+  const [removeAnim, setRemoveAnim] = useState22(false);
+  const [purpose, setPurpose] = useState22(
     bankTransaction.category ? bankTransaction.categorization_status === "SPLIT" /* SPLIT */ ? "more" /* more */ : "business" /* business */ : hasMatch(bankTransaction) ? "more" /* more */ : "business" /* business */
   );
-  const [open, setOpen] = useState23(false);
-  const [showComponent, setShowComponent] = useState23(!initialLoad);
-  const [height, setHeight] = useState23(0);
-  const [headingHeight, setHeadingHeight] = useState23(63);
+  const [open, setOpen] = useState22(false);
+  const [showComponent, setShowComponent] = useState22(!initialLoad);
+  const [height, setHeight] = useState22(0);
+  const [headingHeight, setHeadingHeight] = useState22(63);
   const openNext = () => {
     if (editable && itemRef.current && itemRef.current.nextSibling) {
       const txId = itemRef.current.nextSibling.getAttribute(
@@ -7333,13 +7160,13 @@ var BankTransactionMobileListItem = ({
       }
     }
   };
-  useEffect18(() => {
+  useEffect17(() => {
     if (transactionIdToOpen && transactionIdToOpen === bankTransaction.id) {
       setOpen(true);
       clearTransactionIdToOpen();
     }
   }, [transactionIdToOpen]);
-  useEffect18(() => {
+  useEffect17(() => {
     if (!removeAnim && bankTransaction.recently_categorized) {
       if (editable) {
         setRemoveAnim(true);
@@ -7363,7 +7190,7 @@ var BankTransactionMobileListItem = ({
     setOpen(false);
     setHeight(0);
   };
-  useEffect18(() => {
+  useEffect17(() => {
     if (initialLoad) {
       const timeoutId = setTimeout(() => {
         setShowComponent(true);
@@ -7373,7 +7200,7 @@ var BankTransactionMobileListItem = ({
       setShowComponent(true);
     }
   }, []);
-  useEffect18(() => {
+  useEffect17(() => {
     if (editable && bankTransaction.recently_categorized) {
       setTimeout(() => {
         removeTransaction(bankTransaction);
@@ -7451,8 +7278,7 @@ var BankTransactionMobileListItem = ({
         BankTransactionMobileForms,
         {
           purpose,
-          bankTransaction,
-          hardRefreshPnlOnCategorize
+          bankTransaction
         }
       )
     )
@@ -7465,8 +7291,7 @@ var BankTransactionMobileList = ({
   removeTransaction,
   editable,
   initialLoad,
-  mode,
-  hardRefreshPnlOnCategorize
+  mode
 }) => {
   const transactionToOpenContextData = useTransactionToOpen();
   return /* @__PURE__ */ React93.createElement(TransactionToOpenContext.Provider, { value: transactionToOpenContextData }, /* @__PURE__ */ React93.createElement("ul", { className: "Layer__bank-transactions__mobile-list" }, bankTransactions?.map(
@@ -7479,8 +7304,7 @@ var BankTransactionMobileList = ({
         bankTransaction,
         editable,
         removeTransaction,
-        initialLoad,
-        hardRefreshPnlOnCategorize
+        initialLoad
       }
     )
   )));
@@ -7517,15 +7341,31 @@ var SkeletonTableLoader = ({
   height = 20,
   width = 100
 }) => {
-  return /* @__PURE__ */ React95.createElement("tbody", { className: "Layer__skeleton-table-body__loader" }, Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ React95.createElement("tr", { key: rowIndex }, cols.map((col, colIndex) => /* @__PURE__ */ React95.createElement(
-    "td",
-    {
-      key: colIndex,
-      colSpan: col.colSpan,
-      className: "Layer__skeleton-loader__row"
-    },
-    col.colComponent ? col.colComponent : /* @__PURE__ */ React95.createElement(SkeletonLoader, { width: `${width}%`, height: `${height}px` })
-  )))));
+  return /* @__PURE__ */ React95.createElement("tbody", { className: "Layer__skeleton-table-body__loader" }, Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ React95.createElement("tr", { key: rowIndex }, cols.map((col, colIndex) => {
+    const trim = col.trimLastXRows && rowIndex >= col.trimLastXRows - 1 ? (rowIndex - col.trimLastXRows + 1) * 10 : 0;
+    return /* @__PURE__ */ React95.createElement(
+      "td",
+      {
+        key: colIndex,
+        colSpan: col.colSpan,
+        className: "Layer__skeleton-loader__row"
+      },
+      col.colComponent ? col.colComponent : col.parts && col.parts > 1 ? /* @__PURE__ */ React95.createElement("span", { className: "Layer__skeleton-loader__row__group" }, [...Array(col.parts)].map((_part, partIndex) => /* @__PURE__ */ React95.createElement(
+        SkeletonLoader,
+        {
+          key: `part-${partIndex}`,
+          width: "100%",
+          height: `${height}px`
+        }
+      ))) : /* @__PURE__ */ React95.createElement(
+        SkeletonLoader,
+        {
+          width: `${width - trim}%`,
+          height: `${height}px`
+        }
+      )
+    );
+  }))));
 };
 
 // src/components/BankTransactionsLoader/BankTransactionsLoader.tsx
@@ -7565,8 +7405,11 @@ var BankTransactionsLoader = ({
   return /* @__PURE__ */ React96.createElement(
     SkeletonTableLoader,
     {
-      rows: 4,
-      cols: isLoading ? [{ colSpan: 4 }, { colSpan: 1 }] : [
+      rows: 6,
+      cols: isLoading ? [
+        { colSpan: 4, trimLastXRows: 3 },
+        { colSpan: 1, parts: 2 }
+      ] : [
         { colSpan: 4 },
         { colSpan: 1, colComponent: inactiveBankTransactionsActions }
       ],
@@ -7620,7 +7463,6 @@ var BankTransactionsTable = ({
   removeTransaction,
   showDescriptions = false,
   showReceiptUploads = false,
-  hardRefreshPnlOnCategorize = false,
   stringOverrides,
   isSyncing = false,
   page,
@@ -7635,7 +7477,6 @@ var BankTransactionsTable = ({
     },
     /* @__PURE__ */ React98.createElement("thead", null, /* @__PURE__ */ React98.createElement("tr", null, /* @__PURE__ */ React98.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, stringOverrides?.transactionsTable?.dateColumnHeaderText || "Date"), /* @__PURE__ */ React98.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, stringOverrides?.transactionsTable?.transactionColumnHeaderText || "Transaction"), /* @__PURE__ */ React98.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, stringOverrides?.transactionsTable?.accountColumnHeaderText || "Account"), /* @__PURE__ */ React98.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, stringOverrides?.transactionsTable?.amountColumnHeaderText || "Amount"), categorizeView && editable ? /* @__PURE__ */ React98.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, stringOverrides?.transactionsTable?.categorizeColumnHeaderText || "Categorize") : /* @__PURE__ */ React98.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, stringOverrides?.transactionsTable?.categoryColumnHeaderText || "Category"))),
     isLoading && page && page === 1 ? /* @__PURE__ */ React98.createElement(BankTransactionsLoader, { isLoading: true }) : null,
-    !isLoading && isSyncing && page && page === 1 ? /* @__PURE__ */ React98.createElement(BankTransactionsLoader, { isLoading: false }) : null,
     /* @__PURE__ */ React98.createElement("tbody", null, !isLoading && bankTransactions?.map(
       (bankTransaction, index) => /* @__PURE__ */ React98.createElement(
         BankTransactionRow,
@@ -7651,7 +7492,6 @@ var BankTransactionsTable = ({
           containerWidth,
           showDescriptions,
           showReceiptUploads,
-          hardRefreshPnlOnCategorize,
           stringOverrides: stringOverrides?.bankTransactionCTAs
         }
       )
@@ -7710,7 +7550,7 @@ var ErrorBoundary = class extends Component {
 import React102 from "react";
 
 // src/hooks/usePagination/usePagination.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo5 } from "react";
 var DOTS = "...";
 var usePagination = ({
   totalCount,
@@ -7718,7 +7558,7 @@ var usePagination = ({
   siblingCount = 1,
   currentPage
 }) => {
-  const paginationRange = useMemo6(() => {
+  const paginationRange = useMemo5(() => {
     const totalPageCount = Math.ceil(totalCount / pageSize);
     const totalPageNumbers = siblingCount + 5;
     if (totalPageNumbers >= totalPageCount) {
@@ -7869,7 +7709,7 @@ var Pagination = ({
 };
 
 // src/components/BankTransactions/BankTransactionsHeader.tsx
-import React108, { useState as useState26 } from "react";
+import React108, { useState as useState25 } from "react";
 
 // src/icons/DownloadCloud.tsx
 import * as React103 from "react";
@@ -7914,7 +7754,7 @@ var DownloadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React103.create
 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) {
@@ -7928,7 +7768,7 @@ var getActivationDate = (business) => {
 var getEarliestDateToBrowse = (business) => {
   const activationDate = getActivationDate(business);
   if (activationDate) {
-    return startOfMonth2(activationDate);
+    return startOfMonth(activationDate);
   }
   return;
 };
@@ -7940,11 +7780,11 @@ 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
-import React105, { useEffect as useEffect19, useRef as useRef13, useState as useState24 } from "react";
+import React105, { useEffect as useEffect18, useRef as useRef13, useState as useState23 } from "react";
 import ReactDatePicker from "react-datepicker";
 
 // src/components/DatePicker/DatePickerOptions.tsx
@@ -7953,7 +7793,7 @@ import {
   endOfMonth,
   endOfQuarter,
   endOfYear,
-  startOfMonth as startOfMonth3,
+  startOfMonth as startOfMonth2,
   startOfQuarter,
   startOfYear,
   subMonths,
@@ -7974,7 +7814,7 @@ var DatePickerOptions = ({
             key: option,
             onClick: () => {
               setSelectedDate([
-                startOfMonth3(/* @__PURE__ */ new Date()),
+                startOfMonth2(/* @__PURE__ */ new Date()),
                 endOfMonth(/* @__PURE__ */ new Date())
               ]);
             }
@@ -7988,7 +7828,7 @@ var DatePickerOptions = ({
             key: option,
             onClick: () => {
               setSelectedDate([
-                startOfMonth3(subMonths(/* @__PURE__ */ new Date(), 1)),
+                startOfMonth2(subMonths(/* @__PURE__ */ new Date(), 1)),
                 endOfMonth(subMonths(/* @__PURE__ */ new Date(), 1))
               ]);
             }
@@ -8108,27 +7948,27 @@ var DatePicker = ({
   ...props
 }) => {
   const pickerRef = useRef13(null);
-  const [updatePickerDate, setPickerDate] = useState24(false);
-  const [selectedDates, setSelectedDates] = useState24(selected);
+  const [updatePickerDate, setPickerDate] = useState23(false);
+  const [selectedDates, setSelectedDates] = useState23(selected);
   const { isDesktop } = useSizeClass();
-  const [startDate, setStartDate] = useState24(
+  const [startDate, setStartDate] = useState23(
     getDefaultRangeDate("start", mode, selected) ?? /* @__PURE__ */ new Date()
   );
-  const [endDate, setEndDate] = useState24(
+  const [endDate, setEndDate] = useState23(
     getDefaultRangeDate("end", mode, selected)
   );
-  useEffect19(() => {
+  useEffect18(() => {
     try {
       setPickerDate(true);
-      if (!isRangeMode(mode) && selected !== selectedDates) {
+      if (!isRangeMode(mode) && selected?.getTime() !== selectedDates?.getTime()) {
         setSelectedDates(selected);
         return;
       }
       if (isRangeMode(mode) && Array.isArray(selected)) {
-        if (startDate !== selected[0]) {
+        if (startDate?.getTime() !== selected[0]?.getTime()) {
           setStartDate(selected[0]);
         }
-        if (endDate !== selected[1]) {
+        if (endDate?.getTime() !== selected[1]?.getTime()) {
           setEndDate(selected[1]);
         }
       }
@@ -8136,14 +7976,14 @@ var DatePicker = ({
       return;
     }
   }, [selected]);
-  useEffect19(() => {
-    if (onChange && !updatePickerDate) {
+  useEffect18(() => {
+    if (onChange && (!isRangeMode(mode) || isRangeMode(mode) && !updatePickerDate)) {
       onChange(selectedDates);
     } else {
       setPickerDate(false);
     }
   }, [selectedDates]);
-  useEffect19(() => {
+  useEffect18(() => {
     if (isRangeMode(mode)) {
       setSelectedDates([startDate, endDate]);
     }
@@ -8320,7 +8160,7 @@ var DatePicker = ({
 };
 
 // src/components/Tabs/Tabs.tsx
-import React107, { useEffect as useEffect20, useState as useState25 } from "react";
+import React107, { useEffect as useEffect19, useState as useState24 } from "react";
 
 // src/components/Tabs/Tab.tsx
 import React106 from "react";
@@ -8366,9 +8206,9 @@ var Tab = ({
 // src/components/Tabs/Tabs.tsx
 import classNames40 from "classnames";
 var Tabs = ({ name, options, selected, onChange }) => {
-  const [initialized, setInitialized] = useState25(false);
-  const [thumbPos, setThumbPos] = useState25({ left: 0, width: 0 });
-  const [currentWidth, setCurrentWidth] = useState25(0);
+  const [initialized, setInitialized] = useState24(false);
+  const [thumbPos, setThumbPos] = useState24({ left: 0, width: 0 });
+  const [currentWidth, setCurrentWidth] = useState24(0);
   const selectedValue = selected || options[0].value;
   const baseClassName = classNames40(
     "Layer__tabs",
@@ -8402,7 +8242,7 @@ var Tabs = ({ name, options, selected, onChange }) => {
     shift2 = shift2 + 1.5;
     setThumbPos({ left: shift2, width });
   };
-  useEffect20(() => {
+  useEffect19(() => {
     const selectedIndex = getSelectedIndex();
     updateSelectPosition(selectedIndex);
     setTimeout(() => {
@@ -8435,12 +8275,12 @@ var Tabs = ({ name, options, selected, onChange }) => {
 
 // src/components/BankTransactions/BankTransactionsHeader.tsx
 import classNames41 from "classnames";
-import { endOfMonth as endOfMonth2, startOfMonth as startOfMonth4 } from "date-fns";
+import { endOfMonth as endOfMonth2, startOfMonth as startOfMonth3 } from "date-fns";
 var DownloadButton = ({
   downloadButtonTextOverride
 }) => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [requestFailed, setRequestFailed] = useState26(false);
+  const [requestFailed, setRequestFailed] = useState25(false);
   const handleClick = async () => {
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear().toString();
     const getBankTransactionsCsv2 = Layer.getBankTransactionsCsv(
@@ -8531,7 +8371,7 @@ var BankTransactionsHeader = ({
         onChange: (date) => {
           if (!Array.isArray(date)) {
             setDateRange({
-              startDate: startOfMonth4(date),
+              startDate: startOfMonth3(date),
               endDate: endOfMonth2(date)
             });
           }
@@ -8641,7 +8481,7 @@ var DataStates = ({
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
-import { endOfMonth as endOfMonth3, 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 POLL_INTERVAL = 1e4;
@@ -8663,17 +8503,16 @@ var BankTransactionsContent = ({
   mode = "self-serve",
   showDescriptions = false,
   showReceiptUploads = false,
-  hardRefreshPnlOnCategorize = false,
   monthlyView = false,
   mobileComponent,
   filters: inputFilters,
   hideHeader = false,
   stringOverrides
 }) => {
-  const [currentPage, setCurrentPage] = useState27(1);
-  const [initialLoad, setInitialLoad] = useState27(true);
-  const [dateRange, setDateRange] = useState27({
-    startDate: startOfMonth5(/* @__PURE__ */ new Date()),
+  const [currentPage, setCurrentPage] = useState26(1);
+  const [initialLoad, setInitialLoad] = useState26(true);
+  const [dateRange, setDateRange] = useState26({
+    startDate: startOfMonth4(/* @__PURE__ */ new Date()),
     endDate: endOfMonth3(/* @__PURE__ */ new Date())
   });
   const categorizeView = categorizationEnabled(mode);
@@ -8693,23 +8532,23 @@ var BankTransactionsContent = ({
     removeAfterCategorize
   } = useBankTransactionsContext();
   const { data: linkedAccounts, refetchAccounts } = useLinkedAccounts();
-  const isSyncing = useMemo7(
+  const isSyncing = useMemo6(
     () => Boolean(linkedAccounts?.some((item) => item.is_syncing)),
     [linkedAccounts]
   );
-  const transactionsNotSynced = useMemo7(
+  const transactionsNotSynced = useMemo6(
     () => loadingStatus === "complete" && isSyncing && (!data || data?.length === 0),
     [data, isSyncing, loadingStatus]
   );
   let intervalId = void 0;
-  const [refreshTrigger, setRefreshTrigger] = useState27(-1);
-  useEffect21(() => {
+  const [refreshTrigger, setRefreshTrigger] = useState26(-1);
+  useEffect20(() => {
     if (refreshTrigger !== -1) {
       refetch();
       refetchAccounts();
     }
   }, [refreshTrigger]);
-  useEffect21(() => {
+  useEffect20(() => {
     if (isSyncing) {
       intervalId = setInterval(() => {
         setRefreshTrigger(Math.random());
@@ -8725,10 +8564,10 @@ var BankTransactionsContent = ({
       }
     };
   }, [isSyncing, transactionsNotSynced]);
-  useEffect21(() => {
+  useEffect20(() => {
     activate();
   }, []);
-  useEffect21(() => {
+  useEffect20(() => {
     if (JSON.stringify(inputFilters) !== JSON.stringify(filters)) {
       if (!filters?.categorizationStatus && categorizeView) {
         setFilters({
@@ -8755,7 +8594,7 @@ var BankTransactionsContent = ({
       });
     }
   }, [inputFilters, categorizeView, mode]);
-  useEffect21(() => {
+  useEffect20(() => {
     if (loadingStatus === "complete") {
       const timeoutLoad = setTimeout(() => {
         setInitialLoad(false);
@@ -8763,7 +8602,7 @@ var BankTransactionsContent = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [loadingStatus]);
-  const bankTransactions = TEST_EMPTY_STATE ? [] : useMemo7(() => {
+  const bankTransactions = TEST_EMPTY_STATE ? [] : useMemo6(() => {
     if (monthlyView) {
       return data?.filter(
         (x) => parseISO12(x.date) >= dateRange.startDate && parseISO12(x.date) <= dateRange.endDate
@@ -8779,10 +8618,10 @@ var BankTransactionsContent = ({
     });
     setCurrentPage(1);
   };
-  const [shiftStickyHeader, setShiftStickyHeader] = useState27(0);
+  const [shiftStickyHeader, setShiftStickyHeader] = useState26(0);
   const debounceShiftStickyHeader = debounce(setShiftStickyHeader, 500);
-  const [listView, setListView] = useState27(false);
-  const [containerWidth, setContainerWidth] = useState27(0);
+  const [listView, setListView] = useState26(false);
+  const [containerWidth, setContainerWidth] = useState26(0);
   const debounceContainerWidth = debounce(setContainerWidth, 500);
   const removeTransaction = (bankTransaction) => removeAfterCategorize(bankTransaction);
   const containerRef = useElementSize((_el, _en, size) => {
@@ -8846,7 +8685,6 @@ var BankTransactionsContent = ({
         showDescriptions,
         showReceiptUploads,
         page: currentPage,
-        hardRefreshPnlOnCategorize,
         stringOverrides,
         lastPage: isLastPage,
         onRefresh: refetch
@@ -8860,7 +8698,6 @@ var BankTransactionsContent = ({
         editable,
         removeTransaction,
         containerWidth,
-        hardRefreshPnlOnCategorize,
         stringOverrides: stringOverrides?.bankTransactionCTAs
       }
     ) : null,
@@ -8871,8 +8708,7 @@ var BankTransactionsContent = ({
         editable,
         mode,
         removeTransaction,
-        initialLoad,
-        hardRefreshPnlOnCategorize
+        initialLoad
       }
     ) : null,
     listView && isLoading ? /* @__PURE__ */ React111.createElement("div", { className: "Layer__bank-transactions__list-loader" }, /* @__PURE__ */ React111.createElement(Loader2, null)) : null,
@@ -8905,16 +8741,16 @@ var BankTransactionsContent = ({
 import React112 from "react";
 
 // src/hooks/useQuickbooks/useQuickbooks.ts
-import { useEffect as useEffect22, useRef as useRef14, useState as useState28 } from "react";
+import { useEffect as useEffect21, useRef as useRef14, useState as useState27 } from "react";
 var DEBUG2 = true;
 var useQuickbooks = () => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [isSyncingFromQuickbooks, setIsSyncingFromQuickbooks] = useState28(false);
-  const [quickbooksIsLinked, setQuickbooksIsLinked] = useState28(
+  const [isSyncingFromQuickbooks, setIsSyncingFromQuickbooks] = useState27(false);
+  const [quickbooksIsLinked, setQuickbooksIsLinked] = useState27(
     null
   );
   const syncStatusIntervalRef = useRef14(null);
-  useEffect22(() => {
+  useEffect21(() => {
     if (isSyncingFromQuickbooks && syncStatusIntervalRef.current === null) {
       const interval = setInterval(() => fetchIsSyncingFromQuickbooks(), 2e3);
       syncStatusIntervalRef.current = interval;
@@ -8924,7 +8760,7 @@ var useQuickbooks = () => {
       syncStatusIntervalRef.current = null;
     }
   }, [isSyncingFromQuickbooks]);
-  useEffect22(() => {
+  useEffect21(() => {
     fetchQuickbooksConnectionStatus();
   }, []);
   const fetchQuickbooksConnectionStatus = async () => {
@@ -8997,7 +8833,7 @@ var Quickbooks = () => {
 import React127, { createContext as createContext6 } from "react";
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { useMemo as useMemo8, useState as useState29 } from "react";
+import { useMemo as useMemo7, useState as useState28 } from "react";
 
 // src/utils/profitAndLossUtils.ts
 var doesLineItemQualifies = (item) => {
@@ -9053,29 +8889,30 @@ var applyShare = (items, total) => {
 };
 
 // src/hooks/useProfitAndLoss/useProfitAndLossQuery.tsx
-import { useEffect as useEffect23 } from "react";
-import { startOfMonth as startOfMonth6, endOfMonth as endOfMonth4, formatISO } from "date-fns";
-import useSWR4 from "swr";
+import { useEffect as useEffect22 } from "react";
+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()),
+  startDate: startOfMonth5(/* @__PURE__ */ new Date()),
   endDate: endOfMonth4(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl, syncTimestamps, read, hasBeenTouched } = useLayerContext();
+  const queryKey = businessId && startDate && endDate && auth?.access_token && `profit-and-loss-${businessId}-${startDate.valueOf()}-${endDate.valueOf()}-${tagFilter?.key}-${tagFilter?.values?.join(
+    ","
+  )}-${reportingBasis}`;
   const {
     data: rawData,
     isLoading,
     isValidating,
     error: rawError,
     mutate
-  } = useSWR4(
-    businessId && startDate && endDate && auth?.access_token && `profit-and-loss-${businessId}-${startDate.valueOf()}-${endDate.valueOf()}-${tagFilter?.key}-${tagFilter?.values?.join(
-      ","
-    )}-${reportingBasis}`,
+  } = useSWR3(
+    queryKey,
     Layer.getProfitAndLoss(apiUrl, auth?.access_token, {
       params: {
         businessId,
@@ -9090,16 +8927,16 @@ var useProfitAndLossQuery = ({
   const refetch = () => {
     mutate();
   };
-  useEffect23(() => {
-    if (isLoading || isValidating) {
-      read("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */);
+  useEffect22(() => {
+    if (queryKey && (isLoading || isValidating)) {
+      read("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect23(() => {
-    if (hasBeenTouched("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */)) {
+  useEffect22(() => {
+    if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
-  }, [syncTimestamps]);
+  }, [syncTimestamps, startDate, endDate, tagFilter, reportingBasis]);
   return {
     startDate,
     endDate,
@@ -9112,27 +8949,27 @@ var useProfitAndLossQuery = ({
 };
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { startOfMonth as startOfMonth7, endOfMonth as endOfMonth5 } 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()),
+  startDate: startOfMonth6(/* @__PURE__ */ new Date()),
   endDate: endOfMonth5(/* @__PURE__ */ new Date())
 }) => {
-  const [startDate, setStartDate] = useState29(
-    initialStartDate || startOfMonth7(Date.now())
+  const [startDate, setStartDate] = useState28(
+    initialStartDate || startOfMonth6(Date.now())
   );
-  const [endDate, setEndDate] = useState29(
+  const [endDate, setEndDate] = useState28(
     initialEndDate || endOfMonth5(Date.now())
   );
-  const [filters, setFilters] = useState29({
+  const [filters, setFilters] = useState28({
     expenses: void 0,
     revenue: void 0
   });
-  const [sidebarScope, setSidebarScope] = useState29(void 0);
+  const [sidebarScope, setSidebarScope] = useState28(void 0);
   const { data, isLoading, isValidating, error, refetch } = useProfitAndLossQuery({
     startDate,
     endDate,
@@ -9165,7 +9002,7 @@ var useProfitAndLoss = ({
       }
     });
   };
-  const { filteredDataRevenue, filteredTotalRevenue } = useMemo8(() => {
+  const { filteredDataRevenue, filteredTotalRevenue } = useMemo7(() => {
     if (!data) {
       return { filteredDataRevenue: [], filteredTotalRevenue: void 0 };
     }
@@ -9202,7 +9039,7 @@ var useProfitAndLoss = ({
     const withShare = applyShare(sorted, total);
     return { filteredDataRevenue: withShare, filteredTotalRevenue: total };
   }, [data, startDate, filters, sidebarScope]);
-  const { filteredDataExpenses, filteredTotalExpenses } = useMemo8(() => {
+  const { filteredDataExpenses, filteredTotalExpenses } = useMemo7(() => {
     if (!data) {
       return { filteredDataExpenses: [], filteredTotalExpenses: void 0 };
     }
@@ -9262,6 +9099,164 @@ var useProfitAndLoss = ({
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
 import React114, { useContext as useContext12, useEffect as useEffect25, useMemo as useMemo9, useState as useState31 } from "react";
 
+// src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
+import { useEffect as useEffect23, useMemo as useMemo8, useState as useState29 } from "react";
+import { startOfMonth as startOfMonth7, sub } from "date-fns";
+import useSWR4 from "swr";
+var buildDates = ({ currentDate }) => {
+  return {
+    startYear: startOfMonth7(currentDate).getFullYear() - 1,
+    startMonth: startOfMonth7(currentDate).getMonth() + 1,
+    endYear: startOfMonth7(currentDate).getFullYear(),
+    endMonth: startOfMonth7(currentDate).getMonth() + 1
+  };
+};
+var buildMonthsArray = (startDate, endDate) => {
+  if (startDate >= endDate) {
+    return [];
+  }
+  var dates = [];
+  for (var d = startDate; d <= endDate; d.setMonth(d.getMonth() + 1)) {
+    dates.push(new Date(d));
+  }
+  return dates;
+};
+var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
+  currentDate: startOfMonth7(Date.now())
+}) => {
+  const {
+    businessId,
+    auth,
+    apiUrl,
+    syncTimestamps,
+    read,
+    readTimestamps,
+    hasBeenTouched
+  } = useLayerContext();
+  const [date, setDate] = useState29(currentDate);
+  const [loaded, setLoaded] = useState29("initial");
+  const [data, setData] = useState29([]);
+  const { startYear, startMonth, endYear, endMonth } = useMemo8(() => {
+    return buildDates({ currentDate: date });
+  }, [date, businessId, tagFilter, reportingBasis]);
+  const queryKey = 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}`;
+  const {
+    data: rawData,
+    isLoading,
+    isValidating,
+    error,
+    mutate
+  } = useSWR4(
+    queryKey,
+    Layer.getProfitAndLossSummaries(apiUrl, auth?.access_token, {
+      params: {
+        businessId,
+        startYear: startYear.toString(),
+        startMonth: startMonth.toString(),
+        endYear: endYear.toString(),
+        endMonth: endMonth.toString(),
+        tagKey: tagFilter?.key,
+        tagValues: tagFilter?.values?.join(","),
+        reportingBasis
+      }
+    })
+  );
+  useEffect23(() => {
+    const newData = data.slice();
+    const newPeriod = buildMonthsArray(sub(date, { years: 1 }), date);
+    if (newData && newPeriod) {
+      newPeriod.forEach((x) => {
+        if (!newData?.find(
+          (n) => x.getMonth() + 1 === n.month && x.getFullYear() === n.year
+        )) {
+          newData.push({
+            year: x.getFullYear(),
+            month: x.getMonth() + 1,
+            income: 0,
+            costOfGoodsSold: 0,
+            grossProfit: 0,
+            operatingExpenses: 0,
+            profitBeforeTaxes: 0,
+            taxes: 0,
+            netProfit: 0,
+            fullyCategorized: false,
+            totalExpenses: 0,
+            uncategorizedInflows: 0,
+            uncategorizedOutflows: 0,
+            uncategorized_transactions: 0,
+            isLoading: true
+          });
+        }
+      });
+    }
+    if (newData) {
+      setData(
+        newData.sort(
+          (a, b) => Number(new Date(a.year, a.month, 1)) - Number(new Date(b.year, b.month, 1))
+        )
+      );
+    }
+  }, [startYear, startMonth]);
+  useEffect23(() => {
+    const newData = rawData?.data?.months?.slice();
+    if (data && newData) {
+      data.forEach((x) => {
+        if (!newData?.find((n) => x.month === n.month && x.year === n.year)) {
+          newData.push({ ...x });
+        }
+      });
+    }
+    if (newData) {
+      setData(
+        newData.sort(
+          (a, b) => Number(new Date(a.year, a.month, 1)) - Number(new Date(b.year, b.month, 1))
+        )
+      );
+    }
+  }, [rawData]);
+  useEffect23(() => {
+    if (isLoading && loaded === "initial") {
+      setLoaded("loading");
+      return;
+    }
+    if (!isLoading && rawData) {
+      setLoaded("complete");
+    }
+  }, [data, isLoading]);
+  const pullData = (date2) => setDate(date2);
+  useEffect23(() => {
+    if (queryKey && (isLoading || isValidating)) {
+      read("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */, queryKey);
+    }
+  }, [isLoading, isValidating]);
+  useEffect23(() => {
+    if (queryKey && hasBeenTouched(queryKey)) {
+      mutate();
+    }
+  }, [
+    syncTimestamps,
+    startYear,
+    startMonth,
+    endYear,
+    endMonth,
+    tagFilter,
+    reportingBasis
+  ]);
+  const refetch = () => {
+    mutate();
+  };
+  return {
+    data,
+    isLoading,
+    loaded,
+    error,
+    pullData,
+    refetch
+  };
+};
+
 // src/components/ProfitAndLossChart/Indicator.tsx
 import React113, { useEffect as useEffect24, useState as useState30 } from "react";
 var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
@@ -10733,7 +10728,7 @@ var ProfitAndLossDetailedCharts = ({
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import React123, { useContext as useContext15, useEffect as useEffect27, useMemo as useMemo11, useState as useState33 } from "react";
+import React123, { useContext as useContext15, useMemo as useMemo11 } from "react";
 
 // src/components/ProfitAndLossSummaries/MiniChart.tsx
 import React122 from "react";
@@ -10810,17 +10805,8 @@ var ProfitAndLossSummaries = ({
     data: storedData,
     isLoading,
     setSidebarScope,
-    sidebarScope,
-    refetch,
-    dateRange
+    sidebarScope
   } = useContext15(ProfitAndLoss.Context);
-  const [trigger, setTrigger] = useState33(-1);
-  useEffect27(() => {
-    setTrigger(Math.random());
-  }, [dateRange?.startDate]);
-  useEffect27(() => {
-    refetch();
-  }, [trigger]);
   const dataItem = Array.isArray(storedData) ? storedData[storedData.length - 1] : storedData;
   const expensesChartData = useMemo11(() => {
     return buildMiniChartData("expenses", dataItem);
@@ -10906,7 +10892,7 @@ var ProfitAndLossSummaries = ({
 import React126, { useContext as useContext16 } from "react";
 
 // src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-import React125, { useState as useState34 } from "react";
+import React125, { useState as useState33 } from "react";
 
 // src/icons/PieChart.tsx
 import * as React124 from "react";
@@ -10956,7 +10942,7 @@ var ProfitAndLossRow = ({
     return null;
   }
   const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = useState34(lockExpanded || defaultExpanded);
+  const [expanded, setExpanded] = useState33(lockExpanded || defaultExpanded);
   const amount = value ?? 0;
   const amountString = centsToDollars(Math.abs(amount));
   const labelClasses = [
@@ -11265,7 +11251,7 @@ ProfitAndLoss.Table = ProfitAndLossTable;
 ProfitAndLoss.DetailedCharts = ProfitAndLossDetailedCharts;
 
 // src/components/BalanceSheet/BalanceSheet.tsx
-import React140, { useEffect as useEffect32, useState as useState37 } from "react";
+import React140, { useEffect as useEffect31, useState as useState36 } from "react";
 
 // src/contexts/BalanceSheetContext/BalanceSheetContext.tsx
 import { createContext as createContext7 } from "react";
@@ -11278,7 +11264,7 @@ var BalanceSheetContext = createContext7({
 });
 
 // src/contexts/TableContext/TableContext.tsx
-import React128, { createContext as createContext8, useState as useState35 } from "react";
+import React128, { createContext as createContext8, useState as useState34 } from "react";
 var defaultValue = {
   expandedRows: [],
   setExpandedRows: () => {
@@ -11291,8 +11277,8 @@ var defaultValue = {
 };
 var TableContext = createContext8(defaultValue);
 var TableProvider = ({ children }) => {
-  const [expandedRows, setExpandedRowsState] = useState35([]);
-  const [expandedAllRows, setExpandedAllRows] = useState35(false);
+  const [expandedRows, setExpandedRowsState] = useState34([]);
+  const [expandedAllRows, setExpandedAllRows] = useState34(false);
   const toggleRow = (rowKey) => {
     setExpandedRowsState((prevRows) => {
       const rows = [...prevRows];
@@ -11318,14 +11304,15 @@ var TableProvider = ({ children }) => {
 };
 
 // src/hooks/useBalanceSheet/useBalanceSheet.tsx
-import { useEffect as useEffect28 } from "react";
+import { useEffect as useEffect27 } from "react";
 import { format as format3, startOfDay } from "date-fns";
 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 queryKey = businessId && dateString && auth?.access_token && `balance-sheet-${businessId}-${dateString}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR5(
-    businessId && dateString && auth?.access_token && `balance-sheet-${businessId}-${dateString}`,
+    queryKey,
     Layer.getBalanceSheet(apiUrl, auth?.access_token, {
       params: {
         businessId,
@@ -11336,16 +11323,16 @@ var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
   const refetch = () => {
     mutate();
   };
-  useEffect28(() => {
-    if (isLoading || isValidating) {
-      read("BALANCE_SHEET" /* BALANCE_SHEET */);
+  useEffect27(() => {
+    if (queryKey && (isLoading || isValidating)) {
+      read("BALANCE_SHEET" /* BALANCE_SHEET */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect28(() => {
-    if (hasBeenTouched("BALANCE_SHEET" /* BALANCE_SHEET */)) {
+  useEffect27(() => {
+    if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
-  }, [syncTimestamps]);
+  }, [syncTimestamps, dateString]);
   return { data: data?.data, isLoading, error, refetch };
 };
 
@@ -11411,7 +11398,7 @@ var BalanceSheetExpandAllButton = () => {
 };
 
 // src/components/BalanceSheetTable/BalanceSheetTable.tsx
-import React136, { useEffect as useEffect30 } from "react";
+import React136, { useEffect as useEffect29 } from "react";
 
 // src/components/TableBody/TableBody.tsx
 import React131 from "react";
@@ -11487,7 +11474,7 @@ var TableRow = ({
 };
 
 // src/components/Table/Table.tsx
-import React135, { useEffect as useEffect29, useRef as useRef15 } from "react";
+import React135, { useEffect as useEffect28, useRef as useRef15 } from "react";
 import classNames48 from "classnames";
 var Table = ({
   componentName,
@@ -11497,7 +11484,7 @@ var Table = ({
 }) => {
   const tableRef = useRef15(null);
   const prevChildrenRef = useRef15([]);
-  useEffect29(() => {
+  useEffect28(() => {
     if (tableRef.current) {
       const tbody = tableRef.current.querySelector("tbody");
       const rows = tbody ? Array.from(tbody.querySelectorAll("tr")) : [];
@@ -11548,12 +11535,12 @@ var BalanceSheetTable = ({
 }) => {
   const { isOpen, setIsOpen, expandedAllRows } = useTableExpandRow();
   const allRowKeys = [];
-  useEffect30(() => {
+  useEffect29(() => {
     if (expandedAllRows) {
       setIsOpen(allRowKeys, true);
     }
   }, [expandedAllRows]);
-  useEffect30(() => {
+  useEffect29(() => {
     setIsOpen(["assets"]);
   }, []);
   const renderLineItem = (lineItem, depth = 0, rowKey, rowIndex) => {
@@ -11618,7 +11605,7 @@ var ViewHeader = ({ title, controls }) => {
 };
 
 // src/components/Panel/Panel.tsx
-import React138, { useEffect as useEffect31, useState as useState36 } from "react";
+import React138, { useEffect as useEffect30, useState as useState35 } from "react";
 import classNames49 from "classnames";
 var Panel = ({
   children,
@@ -11629,8 +11616,8 @@ var Panel = ({
   parentRef,
   defaultSidebarHeight = false
 }) => {
-  const [sidebarHeight, setSidebarHeight] = useState36(0);
-  useEffect31(() => {
+  const [sidebarHeight, setSidebarHeight] = useState35(0);
+  useEffect30(() => {
     if (parentRef?.current?.offsetHeight) {
       setSidebarHeight(parentRef?.current?.offsetHeight - 1);
     }
@@ -11702,16 +11689,23 @@ import { format as format4, parse, startOfDay as startOfDay2 } from "date-fns";
 var COMPONENT_NAME3 = "balance-sheet";
 var BalanceSheet = (props) => {
   const balanceSheetContextData = useBalanceSheet(props.effectiveDate);
-  return /* @__PURE__ */ React140.createElement(BalanceSheetContext.Provider, { value: balanceSheetContextData }, /* @__PURE__ */ React140.createElement(BalanceSheetView, { asWidget: props.asWidget, stringOverrides: props.stringOverrides, ...props }));
+  return /* @__PURE__ */ React140.createElement(BalanceSheetContext.Provider, { value: balanceSheetContextData }, /* @__PURE__ */ React140.createElement(
+    BalanceSheetView,
+    {
+      asWidget: props.asWidget,
+      stringOverrides: props.stringOverrides,
+      ...props
+    }
+  ));
 };
 var BalanceSheetView = ({
   withExpandAllButton = true,
   asWidget = false,
   stringOverrides
 }) => {
-  const [effectiveDate, setEffectiveDate] = useState37(startOfDay2(/* @__PURE__ */ new Date()));
+  const [effectiveDate, setEffectiveDate] = useState36(startOfDay2(/* @__PURE__ */ new Date()));
   const { data, isLoading, refetch } = useBalanceSheet(effectiveDate);
-  useEffect32(() => {
+  useEffect31(() => {
     const d1 = effectiveDate && format4(startOfDay2(effectiveDate), "yyyy-MM-dd'T'HH:mm:ssXXX");
     const d2 = data?.effective_date && format4(
       startOfDay2(
@@ -11736,7 +11730,14 @@ var BalanceSheetView = ({
           }
         ), withExpandAllButton && /* @__PURE__ */ React140.createElement(BalanceSheetExpandAllButton, null))
       },
-      !data || isLoading ? /* @__PURE__ */ React140.createElement("div", { className: `Layer__${COMPONENT_NAME3}__loader-container` }, /* @__PURE__ */ React140.createElement(Loader2, null)) : /* @__PURE__ */ React140.createElement(BalanceSheetTable, { data, config: BALANCE_SHEET_ROWS, stringOverrides: stringOverrides?.balanceSheetTable })
+      !data || isLoading ? /* @__PURE__ */ React140.createElement("div", { className: `Layer__${COMPONENT_NAME3}__loader-container` }, /* @__PURE__ */ React140.createElement(Loader2, null)) : /* @__PURE__ */ React140.createElement(
+        BalanceSheetTable,
+        {
+          data,
+          config: BALANCE_SHEET_ROWS,
+          stringOverrides: stringOverrides?.balanceSheetTable
+        }
+      )
     )));
   }
   return /* @__PURE__ */ React140.createElement(TableProvider, null, /* @__PURE__ */ React140.createElement(
@@ -11751,12 +11752,19 @@ var BalanceSheetView = ({
         }
       ), withExpandAllButton && /* @__PURE__ */ React140.createElement(BalanceSheetExpandAllButton, null))
     },
-    !data || isLoading ? /* @__PURE__ */ React140.createElement("div", { className: `Layer__${COMPONENT_NAME3}__loader-container` }, /* @__PURE__ */ React140.createElement(Loader2, null)) : /* @__PURE__ */ React140.createElement(BalanceSheetTable, { data, config: BALANCE_SHEET_ROWS, stringOverrides: stringOverrides?.balanceSheetTable })
+    !data || isLoading ? /* @__PURE__ */ React140.createElement("div", { className: `Layer__${COMPONENT_NAME3}__loader-container` }, /* @__PURE__ */ React140.createElement(Loader2, null)) : /* @__PURE__ */ React140.createElement(
+      BalanceSheetTable,
+      {
+        data,
+        config: BALANCE_SHEET_ROWS,
+        stringOverrides: stringOverrides?.balanceSheetTable
+      }
+    )
   ));
 };
 
 // src/components/StatementOfCashFlow/StatementOfCashFlow.tsx
-import React142, { useState as useState38 } from "react";
+import React142, { useState as useState37 } from "react";
 
 // src/contexts/StatementOfCashContext/StatementOfCashFlowContext.tsx
 import { createContext as createContext9 } from "react";
@@ -11769,7 +11777,7 @@ var StatementOfCashFlowContext = createContext9({
 });
 
 // src/hooks/useStatementOfCashFlow/useStatementOfCashFlow.tsx
-import { useEffect as useEffect33 } from "react";
+import { useEffect as useEffect32 } from "react";
 import { format as format5, startOfDay as startOfDay3 } from "date-fns";
 import useSWR6 from "swr";
 var useStatementOfCashFlow = (startDate = /* @__PURE__ */ new Date(), endDate = /* @__PURE__ */ new Date()) => {
@@ -11779,8 +11787,9 @@ 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 queryKey = businessId && startDateString && endDateString && auth?.access_token && `statement-of-cash-${businessId}-${startDateString}-${endDateString}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR6(
-    businessId && startDateString && endDateString && auth?.access_token && `statement-of-cash-${businessId}-${startDateString}-${endDateString}`,
+    queryKey,
     Layer.getStatementOfCashFlow(apiUrl, auth?.access_token, {
       params: {
         businessId,
@@ -11792,16 +11801,16 @@ var useStatementOfCashFlow = (startDate = /* @__PURE__ */ new Date(), endDate =
   const refetch = () => {
     mutate();
   };
-  useEffect33(() => {
-    if (isLoading || isValidating) {
-      read("STATEMENT_OF_CASH_FLOWS" /* STATEMENT_OF_CASH_FLOWS */);
+  useEffect32(() => {
+    if (queryKey && (isLoading || isValidating)) {
+      read("STATEMENT_OF_CASH_FLOWS" /* STATEMENT_OF_CASH_FLOWS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect33(() => {
-    if (hasBeenTouched("STATEMENT_OF_CASH_FLOWS" /* STATEMENT_OF_CASH_FLOWS */)) {
+  useEffect32(() => {
+    if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
-  }, [syncTimestamps]);
+  }, [syncTimestamps, startDateString, endDateString]);
   return { data: data?.data, isLoading, error, refetch };
 };
 
@@ -11913,10 +11922,10 @@ var StatementOfCashFlow = ({ stringOverrides }) => {
   return /* @__PURE__ */ React142.createElement(StatementOfCashFlowContext.Provider, { value: cashContextData }, /* @__PURE__ */ React142.createElement(StatementOfCashFlowView, { stringOverrides }));
 };
 var StatementOfCashFlowView = ({ stringOverrides }) => {
-  const [startDate, setStartDate] = useState38(
+  const [startDate, setStartDate] = useState37(
     startOfDay4(subWeeks(/* @__PURE__ */ new Date(), 4))
   );
-  const [endDate, setEndDate] = useState38(startOfDay4(/* @__PURE__ */ new Date()));
+  const [endDate, setEndDate] = useState37(startOfDay4(/* @__PURE__ */ new Date()));
   const { data, isLoading, refetch } = useStatementOfCashFlow(
     startDate,
     endDate
@@ -11958,7 +11967,7 @@ var StatementOfCashFlowView = ({ stringOverrides }) => {
 };
 
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
-import React157, { useContext as useContext25, useState as useState45 } from "react";
+import React157, { useContext as useContext25, useState as useState44 } from "react";
 
 // src/contexts/ChartOfAccountsContext/ChartOfAccountsContext.tsx
 import { createContext as createContext10 } from "react";
@@ -12017,7 +12026,7 @@ var LedgerAccountsContext = createContext11({
 });
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
-import { useEffect as useEffect34, useState as useState39 } from "react";
+import { useEffect as useEffect33, useState as useState38 } from "react";
 
 // src/components/ChartOfAccountsForm/constants.ts
 var LEDGER_ACCOUNT_TYPES = [
@@ -12314,17 +12323,18 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
     syncTimestamps,
     hasBeenTouched
   } = useLayerContext();
-  const [form, setForm] = useState39();
-  const [sendingForm, setSendingForm] = useState39(false);
-  const [apiError, setApiError] = useState39(void 0);
-  const [startDate, setStartDate] = useState39(
+  const [form, setForm] = useState38();
+  const [sendingForm, setSendingForm] = useState38(false);
+  const [apiError, setApiError] = useState38(void 0);
+  const [startDate, setStartDate] = useState38(
     initialStartDate ?? startOfMonth12(Date.now())
   );
-  const [endDate, setEndDate] = useState39(
+  const [endDate, setEndDate] = useState38(
     initialEndDate ?? endOfMonth10(Date.now())
   );
+  const queryKey = businessId && auth?.access_token && `chart-of-accounts-${businessId}-${startDate?.valueOf()}-${endDate?.valueOf()}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR7(
-    businessId && auth?.access_token && `chart-of-accounts-${businessId}-${startDate?.valueOf()}-${endDate?.valueOf()}`,
+    queryKey,
     Layer.getLedgerAccountBalances(apiUrl, auth?.access_token, {
       params: {
         businessId,
@@ -12500,16 +12510,16 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
     newEndDate && setEndDate(newEndDate);
   };
   const refetch = () => mutate();
-  useEffect34(() => {
-    if (isLoading || isValidating) {
-      read("CHART_OF_ACCOUNTS" /* CHART_OF_ACCOUNTS */);
+  useEffect33(() => {
+    if (queryKey && (isLoading || isValidating)) {
+      read("CHART_OF_ACCOUNTS" /* CHART_OF_ACCOUNTS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect34(() => {
-    if (hasBeenTouched("CHART_OF_ACCOUNTS" /* CHART_OF_ACCOUNTS */)) {
+  useEffect33(() => {
+    if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
-  }, [syncTimestamps]);
+  }, [syncTimestamps, startDate, endDate]);
   return {
     data: data?.data,
     isLoading,
@@ -12531,14 +12541,15 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
 };
 
 // src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
-import { useEffect as useEffect35, useState as useState40 } from "react";
+import { useEffect as useEffect34, useState as useState39 } from "react";
 import useSWR8 from "swr";
 var useLedgerAccounts = () => {
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
-  const [accountId, setAccountId] = useState40();
-  const [selectedEntryId, setSelectedEntryId] = useState40();
+  const [accountId, setAccountId] = useState39();
+  const [selectedEntryId, setSelectedEntryId] = useState39();
+  const queryKey = businessId && accountId && auth?.access_token && `ledger-accounts-lines-${businessId}-${accountId}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR8(
-    businessId && accountId && auth?.access_token && `ledger-accounts-lines-${businessId}-${accountId}`,
+    queryKey,
     Layer.getLedgerAccountsLines(apiUrl, auth?.access_token, {
       params: { businessId, accountId }
     })
@@ -12560,16 +12571,16 @@ var useLedgerAccounts = () => {
     setSelectedEntryId(void 0);
     mutateEntryData();
   };
-  useEffect35(() => {
-    if (isLoading || isValidating) {
-      read("LEDGER_ACCOUNTS" /* LEDGER_ACCOUNTS */);
+  useEffect34(() => {
+    if (queryKey && (isLoading || isValidating)) {
+      read("LEDGER_ACCOUNTS" /* LEDGER_ACCOUNTS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect35(() => {
-    if (hasBeenTouched("LEDGER_ACCOUNTS" /* LEDGER_ACCOUNTS */)) {
+  useEffect34(() => {
+    if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
-  }, [syncTimestamps]);
+  }, [syncTimestamps, accountId]);
   return {
     data: data?.data,
     entryData: entryData?.data,
@@ -12589,7 +12600,7 @@ var useLedgerAccounts = () => {
 };
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
-import React149, { useContext as useContext21, useState as useState42 } from "react";
+import React149, { useContext as useContext21, useState as useState41 } from "react";
 
 // src/components/ChartOfAccountsDatePicker/ChartOfAccountsDatePicker.tsx
 import React143, { useContext as useContext18 } from "react";
@@ -12614,7 +12625,7 @@ var ChartOfAccountsDatePicker = () => {
 };
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-import React145, { useContext as useContext19, useEffect as useEffect36, useState as useState41 } from "react";
+import React145, { useContext as useContext19, useEffect as useEffect35, useState as useState40 } from "react";
 
 // src/icons/Edit2.tsx
 import * as React144 from "react";
@@ -12675,7 +12686,7 @@ var ChartOfAccountsRow = ({
   const { form, editAccount } = useContext19(ChartOfAccountsContext);
   const { setAccountId } = useContext19(LedgerAccountsContext);
   const baseStyle = view === "desktop" ? EXPANDED_STYLE2 : EXPANDED_MOBILE_STYLE;
-  const [isOpen, setIsOpen] = useState41(defaultOpen);
+  const [isOpen, setIsOpen] = useState40(defaultOpen);
   const style = expanded ? {
     ...baseStyle,
     transitionDelay: `${15 * index}ms`
@@ -12683,15 +12694,15 @@ var ChartOfAccountsRow = ({
     ...COLLAPSED_STYLE2,
     transitionDelay: `${acountsLength - 15 * index}ms`
   };
-  const [showComponent, setShowComponent] = useState41(false);
-  const [prevExpandedAll, setPrevExpandedAll] = useState41(expandAll);
-  useEffect36(() => {
+  const [showComponent, setShowComponent] = useState40(false);
+  const [prevExpandedAll, setPrevExpandedAll] = useState40(expandAll);
+  useEffect35(() => {
     const timeoutId = setTimeout(() => {
       setShowComponent(true);
     }, cumulativeIndex * 50);
     return () => clearTimeout(timeoutId);
   }, []);
-  useEffect36(() => {
+  useEffect35(() => {
     if (prevExpandedAll !== expandAll && expandAll) {
       setIsOpen(expandAll === "collapsed" ? false : true);
     }
@@ -13049,7 +13060,7 @@ var ChartOfAccountsTable = ({
   stringOverrides
 }) => {
   const { data, isLoading, addAccount, error, isValidating, refetch, form } = useContext21(ChartOfAccountsContext);
-  const [expandAll, setExpandAll] = useState42();
+  const [expandAll, setExpandAll] = useState41();
   let cumulativeIndex = 0;
   const accountsLength = data?.accounts.length ?? 0;
   return /* @__PURE__ */ React149.createElement(
@@ -13143,9 +13154,9 @@ var ChartOfAccountsTable = ({
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
 import React156, {
   useContext as useContext24,
-  useEffect as useEffect38,
+  useEffect as useEffect37,
   useMemo as useMemo15,
-  useState as useState44
+  useState as useState43
 } from "react";
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
@@ -13336,7 +13347,7 @@ var LedgerAccountEntryDetails = ({ stringOverrides }) => {
 };
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
-import React155, { useContext as useContext23, useEffect as useEffect37, useState as useState43 } from "react";
+import React155, { useContext as useContext23, useEffect as useEffect36, useState as useState42 } from "react";
 import classNames54 from "classnames";
 import { parseISO as parseISO14, format as formatTime10 } from "date-fns";
 var LedgerAccountRow = ({
@@ -13346,8 +13357,8 @@ var LedgerAccountRow = ({
   view
 }) => {
   const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext23(LedgerAccountsContext);
-  const [showComponent, setShowComponent] = useState43(false);
-  useEffect37(() => {
+  const [showComponent, setShowComponent] = useState42(false);
+  useEffect36(() => {
     if (initialLoad) {
       const timeoutId = setTimeout(() => {
         setShowComponent(true);
@@ -13456,8 +13467,8 @@ var LedgerAccount = ({
   view,
   stringOverrides
 }) => {
-  const [currentPage, setCurrentPage] = useState44(1);
-  const [initialLoad, setInitialLoad] = useState44(true);
+  const [currentPage, setCurrentPage] = useState43(1);
+  const [initialLoad, setInitialLoad] = useState43(true);
   const { data: accountData } = useContext24(ChartOfAccountsContext);
   const {
     data: rawData,
@@ -13470,7 +13481,7 @@ var LedgerAccount = ({
     closeSelectedEntry,
     refetch
   } = useContext24(LedgerAccountsContext);
-  useEffect38(() => {
+  useEffect37(() => {
     if (!isLoading) {
       const timeoutLoad = setTimeout(() => {
         setInitialLoad(false);
@@ -13584,7 +13595,7 @@ var ChartOfAccountsContent = ({
   stringOverrides
 }) => {
   const { accountId } = useContext25(LedgerAccountsContext);
-  const [view, setView] = useState45("desktop");
+  const [view, setView] = useState44("desktop");
   const containerRef = useElementSize((_a, _b, { width }) => {
     if (width) {
       if (width >= BREAKPOINTS.TABLET && view !== "desktop") {
@@ -13610,7 +13621,7 @@ var ChartOfAccountsContent = ({
 };
 
 // src/components/Journal/Journal.tsx
-import React164, { useState as useState49 } from "react";
+import React164, { useState as useState48 } from "react";
 
 // src/contexts/JournalContext/JournalContext.tsx
 import { createContext as createContext12 } from "react";
@@ -13647,7 +13658,7 @@ var JournalContext = createContext12({
 });
 
 // src/hooks/useJournal/useJournal.tsx
-import { useEffect as useEffect39, useState as useState46 } from "react";
+import { useEffect as useEffect38, useState as useState45 } from "react";
 
 // src/utils/journal.ts
 var getAccountIdentifierPayload = (journalLineItem) => {
@@ -13678,13 +13689,14 @@ var useJournal = () => {
     syncTimestamps,
     hasBeenTouched
   } = useLayerContext();
-  const [selectedEntryId, setSelectedEntryId] = useState46();
-  const [form, setForm] = useState46();
-  const [addingEntry, setAddingEntry] = useState46(false);
-  const [sendingForm, setSendingForm] = useState46(false);
-  const [apiError, setApiError] = useState46(void 0);
+  const [selectedEntryId, setSelectedEntryId] = useState45();
+  const [form, setForm] = useState45();
+  const [addingEntry, setAddingEntry] = useState45(false);
+  const [sendingForm, setSendingForm] = useState45(false);
+  const [apiError, setApiError] = useState45(void 0);
+  const queryKey = businessId && auth?.access_token && `journal-lines-${businessId}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR9(
-    businessId && auth?.access_token && `journal-lines-${businessId}`,
+    queryKey,
     Layer.getJournal(apiUrl, auth?.access_token, {
       params: { businessId }
     })
@@ -13907,13 +13919,13 @@ var useJournal = () => {
       }
     });
   };
-  useEffect39(() => {
-    if (isLoading || isValidating) {
-      read("JOURNAL" /* JOURNAL */);
+  useEffect38(() => {
+    if (queryKey && (isLoading || isValidating)) {
+      read("JOURNAL" /* JOURNAL */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect39(() => {
-    if (hasBeenTouched("JOURNAL" /* JOURNAL */)) {
+  useEffect38(() => {
+    if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
   }, [syncTimestamps]);
@@ -13943,10 +13955,10 @@ var useJournal = () => {
 };
 
 // src/components/JournalTable/JournalTable.tsx
-import React163, { useContext as useContext31, useMemo as useMemo17, useState as useState48 } from "react";
+import React163, { useContext as useContext31, useMemo as useMemo17, useState as useState47 } from "react";
 
 // src/components/JournalRow/JournalRow.tsx
-import React158, { useContext as useContext26, useEffect as useEffect40, useState as useState47 } from "react";
+import React158, { useContext as useContext26, useEffect as useEffect39, useState as useState46 } from "react";
 import classNames56 from "classnames";
 import { parseISO as parseISO15, format as formatTime11 } from "date-fns";
 var INDENTATION2 = 24;
@@ -13985,7 +13997,7 @@ var JournalRow = ({
   selectedEntries = false
 }) => {
   const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext26(JournalContext);
-  const [isOpen, setIsOpen] = useState47(index === 0 ? true : defaultOpen);
+  const [isOpen, setIsOpen] = useState46(index === 0 ? true : defaultOpen);
   const style = expanded ? {
     ...EXPANDED_STYLE3,
     transitionDelay: `${15 * index}ms`
@@ -13993,7 +14005,7 @@ var JournalRow = ({
     ...COLLAPSED_STYLE3,
     transitionDelay: `${lineItemsLength - 15 * index}ms`
   };
-  const [showComponent, setShowComponent] = useState47(false);
+  const [showComponent, setShowComponent] = useState46(false);
   const baseClass = classNames56(
     "Layer__journal-table-row",
     rowId(row) === selectedEntryId && "Layer__table-row--active",
@@ -14011,7 +14023,7 @@ var JournalRow = ({
     "Layer__journal-line__table-row",
     !expanded && "Layer__table-row--hidden"
   );
-  useEffect40(() => {
+  useEffect39(() => {
     if (initialLoad) {
       const timeoutId = setTimeout(() => {
         setShowComponent(true);
@@ -14479,7 +14491,7 @@ var JournalTable = ({
   config,
   stringOverrides
 }) => {
-  const [currentPage, setCurrentPage] = useState48(1);
+  const [currentPage, setCurrentPage] = useState47(1);
   const {
     data: rawData,
     isLoading,
@@ -14552,7 +14564,7 @@ var JournalContent = ({
   config = JOURNAL_CONFIG,
   stringOverrides
 }) => {
-  const [view, setView] = useState49("desktop");
+  const [view, setView] = useState48("desktop");
   const containerRef = useElementSize((_a, _b, { width }) => {
     if (width) {
       if (width >= BREAKPOINTS.TABLET && view !== "desktop") {
@@ -14579,9 +14591,9 @@ var JournalContent = ({
 import React171, {
   createContext as createContext14,
   useContext as useContext36,
-  useEffect as useEffect44,
+  useEffect as useEffect43,
   useMemo as useMemo19,
-  useState as useState53
+  useState as useState52
 } from "react";
 
 // src/contexts/TasksContext/TasksContext.tsx
@@ -14598,18 +14610,19 @@ var TasksContext = createContext13({
 });
 
 // src/hooks/useTasks/useTasks.tsx
-import { useEffect as useEffect41, useState as useState50 } from "react";
+import { useEffect as useEffect40, useState as useState49 } from "react";
 import useSWR10 from "swr";
 var useTasks = () => {
-  const [loadedStatus, setLoadedStatus] = useState50("initial");
+  const [loadedStatus, setLoadedStatus] = useState49("initial");
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
+  const queryKey = businessId && auth?.access_token && `tasks-${businessId}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR10(
-    businessId && auth?.access_token && `tasks-${businessId}`,
+    queryKey,
     Layer.getTasks(apiUrl, auth?.access_token, {
       params: { businessId }
     })
   );
-  useEffect41(() => {
+  useEffect40(() => {
     if (isLoading && loadedStatus === "initial") {
       setLoadedStatus("loading");
     } else if (!isLoading && loadedStatus === "loading") {
@@ -14629,13 +14642,13 @@ var useTasks = () => {
       body: data2
     }).then(() => refetch());
   };
-  useEffect41(() => {
-    if (isLoading || isValidating) {
-      read("TASKS" /* TASKS */);
+  useEffect40(() => {
+    if (queryKey && (isLoading || isValidating)) {
+      read("TASKS" /* TASKS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect41(() => {
-    if (hasBeenTouched("TASKS" /* TASKS */)) {
+  useEffect40(() => {
+    if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
   }, [syncTimestamps]);
@@ -14790,7 +14803,7 @@ var TasksHeader = ({
 };
 
 // src/components/TasksList/TasksList.tsx
-import React169, { useContext as useContext34, useMemo as useMemo18, useState as useState52 } from "react";
+import React169, { useContext as useContext34, useMemo as useMemo18, useState as useState51 } from "react";
 
 // src/icons/SmileIcon.tsx
 import * as React167 from "react";
@@ -14844,15 +14857,15 @@ var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React167.createElem
 var SmileIcon_default = SmileIcon;
 
 // src/components/TasksListItem/TasksListItem.tsx
-import React168, { useContext as useContext33, useEffect as useEffect42, useState as useState51 } from "react";
+import React168, { useContext as useContext33, useEffect as useEffect41, useState as useState50 } from "react";
 import classNames57 from "classnames";
 var TasksListItem = ({
   task,
   goToNextPageIfAllComplete,
   defaultOpen
 }) => {
-  const [isOpen, setIsOpen] = useState51(defaultOpen);
-  const [userResponse, setUserResponse] = useState51(task.user_response || "");
+  const [isOpen, setIsOpen] = useState50(defaultOpen);
+  const [userResponse, setUserResponse] = useState50(task.user_response || "");
   const { submitResponseToTask: submitResponseToTask2 } = useContext33(TasksContext);
   const taskBodyClassName = classNames57(
     "Layer__tasks-list-item__body",
@@ -14867,7 +14880,7 @@ var TasksListItem = ({
     "Layer__tasks-list-item",
     isOpen && "Layer__tasks-list-item__expanded"
   );
-  useEffect42(() => {
+  useEffect41(() => {
     setIsOpen(defaultOpen);
   }, [defaultOpen]);
   return /* @__PURE__ */ React168.createElement("div", { className: "Layer__tasks-list-item-wrapper" }, /* @__PURE__ */ React168.createElement("div", { className: taskItemClassName }, /* @__PURE__ */ React168.createElement(
@@ -14924,7 +14937,7 @@ var TasksList = ({ pageSize = 10 }) => {
     tasks || [],
     pageSize
   ).findIndex((page) => page.some((task) => !isComplete(task.status)));
-  const [currentPage, setCurrentPage] = useState52(
+  const [currentPage, setCurrentPage] = useState51(
     firstPageWithIincompleteTasks === -1 ? 1 : firstPageWithIincompleteTasks + 1
   );
   const sortedTasks = useMemo18(() => {
@@ -14941,7 +14954,6 @@ var TasksList = ({ pageSize = 10 }) => {
       setCurrentPage(currentPage + 1);
     }
   };
-  console.log("TasksList", { tasks, sortedTasks, currentPage });
   return /* @__PURE__ */ React169.createElement("div", { className: "Layer__tasks-list" }, sortedTasks && sortedTasks.length > 0 ? /* @__PURE__ */ React169.createElement(React169.Fragment, null, sortedTasks.map((task, index) => /* @__PURE__ */ React169.createElement(
     TasksListItem,
     {
@@ -15066,10 +15078,10 @@ var TasksComponent = ({
     }
     return false;
   }, [data, isLoading]);
-  const [open, setOpen] = useState53(
+  const [open, setOpen] = useState52(
     defaultCollapsed || collapsedWhenComplete ? false : true
   );
-  useEffect44(() => {
+  useEffect43(() => {
     if (allComplete && open && collapsedWhenComplete && loadedStatus === "complete") {
       setOpen(false);
     }
@@ -15184,14 +15196,14 @@ var BookkeepingUpsellBar = ({
 };
 
 // src/views/BookkeepingOverview/BookkeepingOverview.tsx
-import React175, { useState as useState54 } from "react";
+import React175, { useState as useState53 } from "react";
 import classNames60 from "classnames";
 var BookkeepingOverview = ({
   title,
   // deprecated
   stringOverrides
 }) => {
-  const [pnlToggle, setPnlToggle] = useState54("revenue");
+  const [pnlToggle, setPnlToggle] = useState53("revenue");
   const [width] = useWindowSize();
   return /* @__PURE__ */ React175.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React175.createElement(TasksProvider, null, /* @__PURE__ */ React175.createElement(
     View,
@@ -15279,10 +15291,10 @@ var BookkeepingOverview = ({
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
-import React179, { useState as useState56 } from "react";
+import React179, { useState as useState55 } from "react";
 
 // src/components/TransactionToReviewCard/TransactionToReviewCard.tsx
-import React178, { useContext as useContext37, useEffect as useEffect45, useState as useState55 } from "react";
+import React178, { useContext as useContext37, useEffect as useEffect44, useState as useState54 } from "react";
 
 // src/components/BadgeLoader/BadgeLoader.tsx
 import React176 from "react";
@@ -15316,14 +15328,14 @@ var TransactionToReviewCard = ({
 }) => {
   const { dateRange: contextDateRange } = useContext37(ProfitAndLoss.Context);
   const dateRange = usePnlDateRange ? contextDateRange : void 0;
-  const [toReview, setToReview] = useState55(0);
+  const [toReview, setToReview] = useState54(0);
   const { data, loaded, error, refetch } = useProfitAndLossLTM({
     currentDate: dateRange ? dateRange.startDate : startOfMonth14(/* @__PURE__ */ new Date())
   });
-  useEffect45(() => {
+  useEffect44(() => {
     checkTransactionsToReview();
   }, []);
-  useEffect45(() => {
+  useEffect44(() => {
     checkTransactionsToReview();
   }, [dateRange, loaded]);
   const checkTransactionsToReview = () => {
@@ -15386,7 +15398,7 @@ var AccountingOverview = ({
   chartColorsList,
   stringOverrides
 }) => {
-  const [pnlToggle, setPnlToggle] = useState56("revenue");
+  const [pnlToggle, setPnlToggle] = useState55("revenue");
   return /* @__PURE__ */ React179.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React179.createElement(View, { title, headerControls: /* @__PURE__ */ React179.createElement(ProfitAndLoss.DatePicker, null) }, enableOnboarding && /* @__PURE__ */ React179.createElement(
     Onboarding,
     {
@@ -15476,7 +15488,6 @@ var BankTransactionsWithLinkedAccounts = ({
   showUnlinkItem = false,
   showBreakConnection = false,
   mode = "self-serve",
-  hardRefreshPnlOnCategorize = false,
   showDescriptions,
   showReceiptUploads,
   mobileComponent,
@@ -15499,20 +15510,19 @@ var BankTransactionsWithLinkedAccounts = ({
       showReceiptUploads,
       mobileComponent,
       mode,
-      hardRefreshPnlOnCategorize,
       stringOverrides: stringOverrides?.bankTransactions
     }
   ));
 };
 
 // src/views/GeneralLedger/GeneralLedger.tsx
-import React181, { useState as useState57 } from "react";
+import React181, { useState as useState56 } from "react";
 var GeneralLedgerView = ({
   title,
   // deprecated
   stringOverrides
 }) => {
-  const [activeTab, setActiveTab] = useState57("chartOfAccounts");
+  const [activeTab, setActiveTab] = useState56("chartOfAccounts");
   return /* @__PURE__ */ React181.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React181.createElement(View, { title: stringOverrides?.title || title || "General Ledger" }, /* @__PURE__ */ React181.createElement(
     Toggle,
     {
@@ -15541,13 +15551,13 @@ var GeneralLedgerView = ({
 };
 
 // src/views/Reports/Reports.tsx
-import React182, { useContext as useContext38, useRef as useRef16, useState as useState58 } from "react";
+import React182, { useContext as useContext38, useRef as useRef16, useState as useState57 } from "react";
 var DownloadButton2 = ({
   stringOverrides
 }) => {
   const { dateRange } = useContext38(ProfitAndLoss.Context);
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [requestFailed, setRequestFailed] = useState58(false);
+  const [requestFailed, setRequestFailed] = useState57(false);
   const handleClick = async () => {
     const month = (dateRange.startDate.getMonth() + 1).toString();
     const year = dateRange.startDate.getFullYear().toString();
@@ -15614,7 +15624,7 @@ var Reports = ({
   enabledReports = ["profitAndLoss", "balanceSheet", "statementOfCashFlow"]
 }) => {
   const containerRef = useRef16(null);
-  const [activeTab, setActiveTab] = useState58(enabledReports[0]);
+  const [activeTab, setActiveTab] = useState57(enabledReports[0]);
   const options = getOptions(enabledReports);
   const defaultTitle = enabledReports.length > 1 ? "Reports" : options.find((option) => option.value = enabledReports[0])?.label;
   return /* @__PURE__ */ React182.createElement(View, { title: stringOverrides?.title || title || defaultTitle }, enabledReports.length > 1 && /* @__PURE__ */ React182.createElement("div", { className: "Layer__component Layer__header__actions" }, /* @__PURE__ */ React182.createElement(