@layerfi/components 0.1.13 → 0.1.14

package/dist/esm/index.js

@@ -4315,7 +4315,7 @@ var useLinkedAccounts = () => {
   const exchangePublicToken = async (publicToken, metadata) => {
     await Layer.exchangePlaidPublicToken(apiUrl, auth?.access_token, {
       params: { businessId },
-      body: { public_token: publicToken, institution_id: metadata.institution }
+      body: { public_token: publicToken, institution: metadata.institution }
     });
     refetchAccounts();
   };
@@ -5015,12 +5015,12 @@ var applyShare = (items, total) => {
   });
 };
 
-// src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
+// src/hooks/useProfitAndLoss/useProfitAndLossQuery.tsx
 import { startOfMonth, endOfMonth, formatISO } from "date-fns";
 import useSWR5 from "swr";
-var useProfitAndLoss = ({
-  startDate: initialStartDate,
-  endDate: initialEndDate,
+var useProfitAndLossQuery = ({
+  startDate,
+  endDate,
   tagFilter,
   reportingBasis
 } = {
@@ -5028,17 +5028,6 @@ var useProfitAndLoss = ({
   endDate: endOfMonth(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [startDate, setStartDate] = useState13(
-    initialStartDate || startOfMonth(Date.now())
-  );
-  const [endDate, setEndDate] = useState13(
-    initialEndDate || endOfMonth(Date.now())
-  );
-  const [filters, setFilters] = useState13({
-    expenses: void 0,
-    revenue: void 0
-  });
-  const [sidebarScope, setSidebarScope] = useState13(void 0);
   const {
     data: rawData,
     isLoading,
@@ -5052,15 +5041,83 @@ var useProfitAndLoss = ({
     Layer.getProfitAndLoss(apiUrl, auth?.access_token, {
       params: {
         businessId,
-        startDate: formatISO(startDate),
-        endDate: formatISO(endDate),
+        startDate: formatISO(startDate.valueOf()),
+        endDate: formatISO(endDate.valueOf()),
         tagKey: tagFilter?.key,
         tagValues: tagFilter?.values?.join(","),
         reportingBasis
       }
     })
   );
-  const { data, error } = rawData || {};
+  const refetch = () => {
+    mutate();
+  };
+  return {
+    startDate,
+    endDate,
+    data: rawData?.data,
+    isLoading,
+    isValidating,
+    error: rawError,
+    refetch
+  };
+};
+
+// src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
+import { startOfMonth as startOfMonth2, endOfMonth as endOfMonth2 } from "date-fns";
+var useProfitAndLoss = ({
+  startDate: initialStartDate,
+  endDate: initialEndDate,
+  tagFilter,
+  reportingBasis,
+  fetchMultipleMonths = false
+} = {
+  startDate: startOfMonth2(/* @__PURE__ */ new Date()),
+  endDate: endOfMonth2(/* @__PURE__ */ new Date())
+}) => {
+  const [startDate, setStartDate] = useState13(
+    initialStartDate || startOfMonth2(Date.now())
+  );
+  const [endDate, setEndDate] = useState13(
+    initialEndDate || endOfMonth2(Date.now())
+  );
+  const [filters, setFilters] = useState13({
+    expenses: void 0,
+    revenue: void 0
+  });
+  const [sidebarScope, setSidebarScope] = useState13(void 0);
+  const { data, isLoading, isValidating, error, refetch } = useProfitAndLossQuery({
+    startDate,
+    endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const changeDateRange = ({
+    startDate: newStartDate,
+    endDate: newEndDate
+  }) => {
+    newStartDate && setStartDate(newStartDate);
+    newEndDate && setEndDate(newEndDate);
+  };
+  const sortBy = (scope, field, direction) => {
+    setFilters({
+      ...filters,
+      [scope]: {
+        ...filters[scope],
+        sortBy: field,
+        sortDirection: direction ?? filters[scope]?.sortDirection === "desc" ? "asc" : "desc"
+      }
+    });
+  };
+  const setFilterTypes = (scope, types) => {
+    setFilters({
+      ...filters,
+      [scope]: {
+        ...filters[scope],
+        types
+      }
+    });
+  };
   const { filteredDataRevenue, filteredTotalRevenue } = useMemo3(() => {
     if (!data) {
       return { filteredDataRevenue: [], filteredTotalRevenue: void 0 };
@@ -5135,35 +5192,6 @@ var useProfitAndLoss = ({
     const withShare = applyShare(sorted, total);
     return { filteredDataExpenses: withShare, filteredTotalExpenses: total };
   }, [data, startDate, filters, sidebarScope]);
-  const changeDateRange = ({
-    startDate: newStartDate,
-    endDate: newEndDate
-  }) => {
-    newStartDate && setStartDate(newStartDate);
-    newEndDate && setEndDate(newEndDate);
-  };
-  const refetch = () => {
-    mutate();
-  };
-  const sortBy = (scope, field, direction) => {
-    setFilters({
-      ...filters,
-      [scope]: {
-        ...filters[scope],
-        sortBy: field,
-        sortDirection: direction ?? filters[scope]?.sortDirection === "desc" ? "asc" : "desc"
-      }
-    });
-  };
-  const setFilterTypes = (scope, types) => {
-    setFilters({
-      ...filters,
-      [scope]: {
-        ...filters[scope],
-        types
-      }
-    });
-  };
   return {
     data,
     filteredDataRevenue,
@@ -5172,7 +5200,7 @@ var useProfitAndLoss = ({
     filteredTotalExpenses,
     isLoading,
     isValidating,
-    error: error || rawError,
+    error,
     dateRange: { startDate, endDate },
     refetch,
     changeDateRange,
@@ -5185,7 +5213,350 @@ var useProfitAndLoss = ({
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-import React66, { useContext as useContext2, useMemo as useMemo4, useState as useState14 } from "react";
+import React66, { useContext as useContext2, useEffect as useEffect12, useMemo as useMemo5, useState as useState16 } from "react";
+
+// src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
+import { useEffect as useEffect10, useMemo as useMemo4, useState as useState14 } from "react";
+import { startOfMonth as startOfMonth3, endOfMonth as endOfMonth3, sub } from "date-fns";
+var buildDates = ({ currentDate }) => {
+  const list = [];
+  for (let i = 11; i > 0; i--) {
+    const startDateWithOffset = startOfMonth3(sub(currentDate, { months: i }));
+    const endDateWithOffset = endOfMonth3(sub(currentDate, { months: i }));
+    list.push({
+      startDate: startDateWithOffset,
+      endDate: endDateWithOffset
+    });
+  }
+  list.push({
+    startDate: startOfMonth3(currentDate),
+    endDate: endOfMonth3(currentDate)
+  });
+  return list;
+};
+var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
+  currentDate: /* @__PURE__ */ new Date()
+}) => {
+  const { businessId } = useLayerContext();
+  const [loaded, setLoaded] = useState14("initial");
+  const dates = useMemo4(() => {
+    return buildDates({ currentDate });
+  }, [currentDate, businessId, tagFilter, reportingBasis]);
+  const {
+    data: data0,
+    isLoading: isLoading0,
+    error: error0,
+    startDate: startDate0,
+    endDate: endDate0
+  } = useProfitAndLossQuery({
+    startDate: dates[0].startDate,
+    endDate: dates[0].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data1,
+    isLoading: isLoading1,
+    error: error1,
+    startDate: startDate1,
+    endDate: endDate1
+  } = useProfitAndLossQuery({
+    startDate: dates[1].startDate,
+    endDate: dates[1].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data2,
+    isLoading: isLoading2,
+    error: error2,
+    startDate: startDate2,
+    endDate: endDate2
+  } = useProfitAndLossQuery({
+    startDate: dates[2].startDate,
+    endDate: dates[2].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data3,
+    isLoading: isLoading3,
+    error: error3,
+    startDate: startDate3,
+    endDate: endDate3
+  } = useProfitAndLossQuery({
+    startDate: dates[3].startDate,
+    endDate: dates[3].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data4,
+    isLoading: isLoading4,
+    error: error4,
+    startDate: startDate4,
+    endDate: endDate4
+  } = useProfitAndLossQuery({
+    startDate: dates[4].startDate,
+    endDate: dates[4].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data5,
+    isLoading: isLoading5,
+    error: error5,
+    startDate: startDate5,
+    endDate: endDate5
+  } = useProfitAndLossQuery({
+    startDate: dates[5].startDate,
+    endDate: dates[5].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data6,
+    isLoading: isLoading6,
+    error: error6,
+    startDate: startDate6,
+    endDate: endDate6
+  } = useProfitAndLossQuery({
+    startDate: dates[6].startDate,
+    endDate: dates[6].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data7,
+    isLoading: isLoading7,
+    error: error7,
+    startDate: startDate7,
+    endDate: endDate7
+  } = useProfitAndLossQuery({
+    startDate: dates[7].startDate,
+    endDate: dates[7].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data8,
+    isLoading: isLoading8,
+    error: error8,
+    startDate: startDate8,
+    endDate: endDate8
+  } = useProfitAndLossQuery({
+    startDate: dates[8].startDate,
+    endDate: dates[8].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data9,
+    isLoading: isLoading9,
+    error: error9,
+    startDate: startDate9,
+    endDate: endDate9
+  } = useProfitAndLossQuery({
+    startDate: dates[9].startDate,
+    endDate: dates[9].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data10,
+    isLoading: isLoading10,
+    error: error10,
+    startDate: startDate10,
+    endDate: endDate10
+  } = useProfitAndLossQuery({
+    startDate: dates[10].startDate,
+    endDate: dates[10].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data11,
+    isLoading: isLoading11,
+    error: error11,
+    startDate: startDate11,
+    endDate: endDate11
+  } = useProfitAndLossQuery({
+    startDate: dates[11].startDate,
+    endDate: dates[11].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const { data, isLoading, error } = useMemo4(() => {
+    return {
+      data: [
+        {
+          data: data0,
+          isLoading: isLoading0,
+          error: error0,
+          startDate: startDate0,
+          endDate: endDate0
+        },
+        {
+          data: data1,
+          isLoading: isLoading1,
+          error: error1,
+          startDate: startDate1,
+          endDate: endDate1
+        },
+        {
+          data: data2,
+          isLoading: isLoading2,
+          error: error2,
+          startDate: startDate2,
+          endDate: endDate2
+        },
+        {
+          data: data3,
+          isLoading: isLoading3,
+          error: error3,
+          startDate: startDate3,
+          endDate: endDate3
+        },
+        {
+          data: data4,
+          isLoading: isLoading4,
+          error: error4,
+          startDate: startDate4,
+          endDate: endDate4
+        },
+        {
+          data: data5,
+          isLoading: isLoading5,
+          error: error5,
+          startDate: startDate5,
+          endDate: endDate5
+        },
+        {
+          data: data6,
+          isLoading: isLoading6,
+          error: error6,
+          startDate: startDate6,
+          endDate: endDate6
+        },
+        {
+          data: data7,
+          isLoading: isLoading7,
+          error: error7,
+          startDate: startDate7,
+          endDate: endDate7
+        },
+        {
+          data: data8,
+          isLoading: isLoading8,
+          error: error8,
+          startDate: startDate8,
+          endDate: endDate8
+        },
+        {
+          data: data9,
+          isLoading: isLoading9,
+          error: error9,
+          startDate: startDate9,
+          endDate: endDate9
+        },
+        {
+          data: data10,
+          isLoading: isLoading10,
+          error: error10,
+          startDate: startDate10,
+          endDate: endDate10
+        },
+        {
+          data: data11,
+          isLoading: isLoading11,
+          error: error11,
+          startDate: startDate11,
+          endDate: endDate11
+        }
+      ],
+      error: [
+        error0,
+        error1,
+        error2,
+        error3,
+        error4,
+        error5,
+        error6,
+        error7,
+        error8,
+        error9,
+        error10,
+        error11
+      ].find((x) => !!x),
+      isLoading: [
+        isLoading0,
+        isLoading1,
+        isLoading2,
+        isLoading3,
+        isLoading4,
+        isLoading5,
+        isLoading6,
+        isLoading7,
+        isLoading8,
+        isLoading9,
+        isLoading10,
+        isLoading11
+      ].find((x) => !!x)
+    };
+  }, [
+    data0,
+    data1,
+    data2,
+    data3,
+    data4,
+    data5,
+    data6,
+    data7,
+    data8,
+    data9,
+    data10,
+    data11,
+    isLoading0,
+    isLoading1,
+    isLoading2,
+    isLoading3,
+    isLoading4,
+    isLoading5,
+    isLoading6,
+    isLoading7,
+    isLoading8,
+    isLoading9,
+    isLoading10,
+    isLoading11,
+    error0,
+    error1,
+    error2,
+    error3,
+    error4,
+    error5,
+    error6,
+    error7,
+    error8,
+    error9,
+    error10,
+    error11
+  ]);
+  useEffect10(() => {
+    if (isLoading && loaded === "initial") {
+      setLoaded("loading");
+      return;
+    }
+    if (!isLoading && data && !data.find((x) => !x.data && !x.error)) {
+      setLoaded("complete");
+    }
+  }, [data, isLoading]);
+  return {
+    data,
+    isLoading,
+    loaded,
+    error
+  };
+};
 
 // src/utils/format.ts
 var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
@@ -5226,46 +5597,69 @@ var humanizeEnum = (text) => {
 };
 
 // src/components/ProfitAndLossChart/Indicator.tsx
-import React65, { useEffect as useEffect10 } from "react";
+import React65, { useEffect as useEffect11, useState as useState15 } from "react";
 var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
 var Indicator = ({
-  viewBox = {},
   className,
   animateFrom,
-  setAnimateFrom
+  setAnimateFrom,
+  customCursorSize,
+  setCustomCursorSize,
+  viewBox = {}
 }) => {
   if (!className?.match(/selected/)) {
     return null;
   }
+  const [opacityIndicator, setOpacityIndicator] = useState15(0);
   const { x: animateTo = 0, width = 0 } = "x" in viewBox ? viewBox : emptyViewBox;
   const margin = width > 12 ? 4 : 1;
   const boxWidth = width * 2 + margin;
   const multiplier = width > 12 ? 1.2 : 1;
   const xOffset = (boxWidth * multiplier - boxWidth) / 2;
-  const borderRadius = width > 16 ? 8 : width / 2;
-  useEffect10(() => {
+  const borderRadius = 6;
+  const rectWidth = `${boxWidth * multiplier}px`;
+  const rectHeight = "calc(100% - 38px)";
+  useEffect11(() => {
+    if (Math.abs(animateTo - animateFrom) < 30) {
+      setOpacityIndicator(0);
+    }
     setAnimateFrom(animateTo);
+    setTimeout(() => {
+      setOpacityIndicator(1);
+    }, 200);
   }, [animateTo]);
+  const rectRef = (ref) => {
+    if (ref) {
+      const refRectWidth = ref.getBoundingClientRect().width;
+      const refRectHeight = ref.getBoundingClientRect().height;
+      if (customCursorSize.width !== refRectWidth || customCursorSize.height !== refRectHeight) {
+        setCustomCursorSize(refRectWidth, refRectHeight, actualX - xOffset);
+      }
+    }
+  };
   const actualX = animateFrom === -1 ? animateTo : animateFrom;
   return /* @__PURE__ */ React65.createElement(
     "rect",
     {
+      ref: rectRef,
       className: "Layer__profit-and-loss-chart__selection-indicator",
       rx: borderRadius,
       ry: borderRadius,
       style: {
-        width: `${boxWidth * multiplier}px`,
+        width: rectWidth,
         // @ts-expect-error -- y is fine but x apparently isn't!
         x: actualX - xOffset,
-        y: 22,
-        height: "calc(100% - 38px)"
+        y: 1,
+        height: rectHeight,
+        opacity: opacityIndicator
       }
     }
   );
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-import { endOfMonth as endOfMonth2, format as format4, parseISO as parseISO8, startOfMonth as startOfMonth2, sub } from "date-fns";
+import classNames26 from "classnames";
+import { format as format4, parseISO as parseISO8, startOfMonth as startOfMonth4 } from "date-fns";
 import {
   BarChart,
   XAxis,
@@ -5283,82 +5677,24 @@ var barSize = 20;
 var ProfitAndLossChart = () => {
   const { getColor } = useLayerContext();
   const { changeDateRange, dateRange } = useContext2(ProfitAndLoss.Context);
-  const thisMonth = startOfMonth2(Date.now());
+  const [customCursorSize, setCustomCursorSize] = useState16({
+    width: 0,
+    height: 0,
+    x: 0
+  });
+  const [barAnimActive, setBarAnimActive] = useState16(true);
   const startSelectionMonth = dateRange.startDate.getMonth();
   const endSelectionMonth = dateRange.endDate.getMonth();
-  const monthData = [];
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 11 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 11 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 10 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 10 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 9 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 9 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 8 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 8 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 7 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 7 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 6 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 6 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 5 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 5 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 4 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 4 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 3 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 3 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 2 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 2 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 1 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 1 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: thisMonth,
-      endDate: endOfMonth2(thisMonth)
-    })?.data
-  );
+  const { data, loaded } = useProfitAndLossLTM({
+    currentDate: startOfMonth4(Date.now())
+  });
+  useEffect12(() => {
+    if (loaded === "complete") {
+      setTimeout(() => {
+        setBarAnimActive(false);
+      }, 1e3);
+    }
+  }, [loaded]);
   const getMonthName = (pnl) => pnl ? format4(parseISO8(pnl.start_date), "LLL") : "";
   const summarizePnL = (pnl) => ({
     name: getMonthName(pnl),
@@ -5368,56 +5704,68 @@ var ProfitAndLossChart = () => {
     selected: !!pnl && parseISO8(pnl.start_date).getMonth() >= startSelectionMonth && parseISO8(pnl.end_date).getMonth() <= endSelectionMonth
   });
   const onClick = ({ activeTooltipIndex }) => {
-    const selection = monthData[activeTooltipIndex || -1];
-    if (selection) {
-      const { start_date: startDate, end_date: endDate } = selection;
+    const selection = data[activeTooltipIndex || -1];
+    if (selection && selection.data) {
+      const { start_date, end_date } = selection.data;
       changeDateRange({
-        startDate: parseISO8(startDate),
-        endDate: parseISO8(endDate)
+        startDate: parseISO8(start_date),
+        endDate: parseISO8(end_date)
       });
     }
   };
-  const CustomTooltip = ({
-    active,
-    payload,
-    label
-  }) => {
+  const CustomTooltip = ({ active, payload }) => {
     if (active && payload && payload.length) {
       const netProfit = payload[0].payload.netProfit ?? 0;
       const netProfitClass = netProfit > 0 ? "positive" : netProfit < 0 ? "negative" : "";
-      return /* @__PURE__ */ React66.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ React66.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ React66.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ React66.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0)))), /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, "Net Profit"), /* @__PURE__ */ React66.createElement("span", { className: `Layer__chart__tooltip-value ${netProfitClass}` }, "$", centsToDollars(netProfit)))));
+      return /* @__PURE__ */ React66.createElement("div", { className: "Layer__chart__tooltip" }, loaded !== "complete" ? /* @__PURE__ */ React66.createElement(Text, null, "Loading...") : /* @__PURE__ */ React66.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ React66.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ React66.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0)))), /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, "Net Profit"), /* @__PURE__ */ React66.createElement(
+        "span",
+        {
+          className: `Layer__chart__tooltip-value ${netProfitClass}`
+        },
+        "$",
+        centsToDollars(netProfit)
+      ))));
     }
     return null;
   };
   const CustomizedCursor = (props) => {
-    const { x, width, height } = props;
+    const { x, y } = props;
+    const { width, height } = customCursorSize;
+    const offsetX = width * 0.1;
     return /* @__PURE__ */ React66.createElement(
       Rectangle,
       {
-        fill: getColor(900)?.hex ?? "#333",
+        fill: "#F7F8FA",
         stroke: "none",
-        x: x + width / 2 - 11,
-        y: height + 44,
-        radius: 2,
-        width: 22,
-        height: 2,
+        x: x + offsetX,
+        y,
+        width,
+        height,
+        radius: 6,
         className: "Layer__chart__tooltip-cursor"
       }
     );
   };
-  const data = useMemo4(
-    () => monthData.map(summarizePnL),
-    [
-      startSelectionMonth,
-      endSelectionMonth,
-      ...monthData.map((m) => m?.net_profit)
-    ]
-  );
-  const [animateFrom, setAnimateFrom] = useState14(-1);
+  const theData = useMemo5(() => {
+    if (loaded !== "complete") {
+      return data?.map((x) => ({
+        name: format4(x.startDate, "LLL"),
+        revenue: 1,
+        expenses: 1,
+        netProfit: 0,
+        selected: false
+      }));
+    }
+    return data?.map((x) => summarizePnL(x.data));
+  }, [startSelectionMonth, endSelectionMonth, loaded]);
+  const [animateFrom, setAnimateFrom] = useState16(-1);
   return /* @__PURE__ */ React66.createElement(
     ResponsiveContainer,
     {
-      className: "Layer__chart-container",
+      className: classNames26(
+        "Layer__chart-container",
+        loaded !== "complete" && "Layer__chart-container--loading"
+      ),
       width: "100%",
       height: "100%",
       minHeight: 200
@@ -5426,7 +5774,7 @@ var ProfitAndLossChart = () => {
       BarChart,
       {
         margin: { left: 12, right: 12, bottom: 12 },
-        data,
+        data: theData,
         onClick,
         barGap,
         className: "Layer__profit-and-loss-chart"
@@ -5452,9 +5800,9 @@ var ProfitAndLossChart = () => {
       /* @__PURE__ */ React66.createElement(
         Legend,
         {
-          verticalAlign: "top",
+          verticalAlign: "bottom",
           align: "left",
-          wrapperStyle: { top: -24 },
+          wrapperStyle: { bottom: 0 },
           payload: [
             {
               value: "Revenue",
@@ -5475,7 +5823,7 @@ var ProfitAndLossChart = () => {
         {
           dataKey: "revenue",
           barSize,
-          isAnimationActive: false,
+          isAnimationActive: barAnimActive,
           radius: [2, 2, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--income"
         },
@@ -5485,30 +5833,34 @@ var ProfitAndLossChart = () => {
             content: /* @__PURE__ */ React66.createElement(
               Indicator,
               {
+                setCustomCursorSize: (width, height, x) => setCustomCursorSize({ width, height, x }),
+                customCursorSize,
                 animateFrom,
                 setAnimateFrom
               }
             )
           }
         ),
-        data.map((entry) => /* @__PURE__ */ React66.createElement(
-          Cell,
-          {
-            key: entry.name,
-            className: entry.selected ? "Layer__profit-and-loss-chart__cell--selected" : ""
-          }
-        ))
+        theData?.map((entry) => {
+          return /* @__PURE__ */ React66.createElement(
+            Cell,
+            {
+              key: entry.name,
+              className: entry.selected ? "Layer__profit-and-loss-chart__cell--selected" : ""
+            }
+          );
+        })
       ),
       /* @__PURE__ */ React66.createElement(
         Bar,
         {
           dataKey: "expenses",
           barSize,
-          isAnimationActive: false,
+          isAnimationActive: barAnimActive,
           radius: [2, 2, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--expenses"
         },
-        data.map((entry) => /* @__PURE__ */ React66.createElement(
+        theData.map((entry) => /* @__PURE__ */ React66.createElement(
           Cell,
           {
             key: entry.name,
@@ -5521,19 +5873,19 @@ var ProfitAndLossChart = () => {
 };
 
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
-import React67, { useContext as useContext3, useState as useState15, useEffect as useEffect11 } from "react";
-import { add, endOfMonth as endOfMonth3, format as format5, startOfMonth as startOfMonth3 } from "date-fns";
+import React67, { useContext as useContext3, useState as useState17, useEffect as useEffect13 } from "react";
+import { add, endOfMonth as endOfMonth4, format as format5, startOfMonth as startOfMonth5 } from "date-fns";
 var ProfitAndLossDatePicker = () => {
   const { changeDateRange, dateRange } = useContext3(ProfitAndLoss.Context);
-  const [isAnimating, setIsAnimating] = useState15(false);
-  const [localDate, setLocalDate] = useState15(dateRange.startDate);
-  const [nextOpacity, setNextOpacity] = useState15(0);
-  const [currentOpacity, setCurrentOpacity] = useState15(1);
-  const [transformStyle, setTransformStyle] = useState15({
+  const [isAnimating, setIsAnimating] = useState17(false);
+  const [localDate, setLocalDate] = useState17(dateRange.startDate);
+  const [nextOpacity, setNextOpacity] = useState17(0);
+  const [currentOpacity, setCurrentOpacity] = useState17(1);
+  const [transformStyle, setTransformStyle] = useState17({
     transform: "translateX(33%)",
     transition: "ease"
   });
-  useEffect11(() => {
+  useEffect13(() => {
     if (dateRange.startDate !== localDate && !isAnimating) {
       setLocalDate(dateRange.startDate);
       setTransformStyle({ transform: "translateX(33%)", transition: "none" });
@@ -5549,8 +5901,8 @@ var ProfitAndLossDatePicker = () => {
       setCurrentOpacity(0);
     }
     changeDateRange({
-      startDate: startOfMonth3(newDate),
-      endDate: endOfMonth3(newDate)
+      startDate: startOfMonth5(newDate),
+      endDate: endOfMonth4(newDate)
     });
     const translateXValue = monthsToAdd > 0 ? "0%" : "66%";
     setTransformStyle({
@@ -5571,64 +5923,64 @@ var ProfitAndLossDatePicker = () => {
   const currentLabel = format5(localDate, "LLLL, y");
   const prevLabel = format5(add(localDate, { months: -1 }), "LLLL, y");
   const nextLabel = format5(add(localDate, { months: 1 }), "LLLL, y");
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React67.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ React67.createElement(
     "div",
     {
-      className: "Layer__profit-and-loss-date-picker"
+      className: "Layer__profit-and-loss-date-picker__labels-container",
+      style: transformStyle
     },
-    /* @__PURE__ */ React67.createElement("div", { className: "Layer__profit-and-loss-date-picker__labels-container", style: transformStyle }, /* @__PURE__ */ React67.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, prevLabel), /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React67.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, prevLabel),
+    /* @__PURE__ */ React67.createElement(
       "span",
       {
         className: "Layer__profit-and-loss-date-picker__label",
         style: { opacity: currentOpacity }
       },
       currentLabel
-    ), /* @__PURE__ */ React67.createElement(
+    ),
+    /* @__PURE__ */ React67.createElement(
       "span",
       {
         className: "Layer__profit-and-loss-date-picker__label",
         style: { opacity: nextOpacity }
       },
       nextLabel
-    )),
+    )
+  ), /* @__PURE__ */ React67.createElement(
+    "button",
+    {
+      "aria-label": "View Previous Month",
+      className: "Layer__profit-and-loss-date-picker__button",
+      onClick: () => change(-1),
+      disabled: isAnimating
+    },
     /* @__PURE__ */ React67.createElement(
-      "button",
+      ChevronLeft_default,
       {
-        "aria-label": "View Previous Month",
-        className: "Layer__profit-and-loss-date-picker__button",
-        onClick: () => change(-1),
-        disabled: isAnimating
-      },
-      /* @__PURE__ */ React67.createElement(
-        ChevronLeft_default,
-        {
-          className: "Layer__profit-and-loss-date-picker__button-icon",
-          size: 16
-        }
-      )
-    ),
+        className: "Layer__profit-and-loss-date-picker__button-icon",
+        size: 16
+      }
+    )
+  ), /* @__PURE__ */ React67.createElement(
+    "button",
+    {
+      "aria-label": "View Next Month",
+      className: "Layer__profit-and-loss-date-picker__button",
+      onClick: () => change(1),
+      disabled: isAnimating
+    },
     /* @__PURE__ */ React67.createElement(
-      "button",
+      ChevronRight_default,
       {
-        "aria-label": "View Next Month",
-        className: "Layer__profit-and-loss-date-picker__button",
-        onClick: () => change(1),
-        disabled: isAnimating
-      },
-      /* @__PURE__ */ React67.createElement(
-        ChevronRight_default,
-        {
-          className: "Layer__profit-and-loss-date-picker__button-icon",
-          size: 16
-        }
-      )
-    ),
-    /* @__PURE__ */ React67.createElement("div", { className: "Layer__profit-and-loss-date-picker__effect-blur" })
-  );
+        className: "Layer__profit-and-loss-date-picker__button-icon",
+        size: 16
+      }
+    )
+  ), /* @__PURE__ */ React67.createElement("div", { className: "Layer__profit-and-loss-date-picker__effect-blur" }));
 };
 
 // src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
-import React73, { useContext as useContext4, useState as useState16 } from "react";
+import React73, { useContext as useContext4, useState as useState18 } from "react";
 
 // src/icons/X.tsx
 import * as React68 from "react";
@@ -5664,7 +6016,7 @@ var X = ({ size = 18, ...props }) => /* @__PURE__ */ React68.createElement(
 var X_default = X;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
-import React69, { useMemo as useMemo5 } from "react";
+import React69, { useMemo as useMemo6 } from "react";
 
 // src/config/charts.ts
 var INACTIVE_OPACITY_LEVELS = [
@@ -5770,7 +6122,7 @@ var DetailedChart = ({
   date,
   isLoading
 }) => {
-  const chartData = useMemo5(() => {
+  const chartData = useMemo6(() => {
     if (!filteredData) {
       return [];
     }
@@ -6041,7 +6393,7 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React70.createElem
     width: size,
     height: size
   },
-  /* @__PURE__ */ React70.createElement("g", { "clip-path": "url(#clip0_1758_75388)" }, /* @__PURE__ */ React70.createElement(
+  /* @__PURE__ */ React70.createElement("g", { clipPath: "url(#clip0_1758_75388)" }, /* @__PURE__ */ React70.createElement(
     "path",
     {
       d: "M1.33325 8.5L3.99992 11.1667L6.66659 8.5",
@@ -6091,7 +6443,7 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React70.createElem
 var SortArrows_default = SortArrows;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
-import classNames26 from "classnames";
+import classNames27 from "classnames";
 var DetailedTable = ({
   filteredData,
   sidebarScope,
@@ -6101,7 +6453,7 @@ var DetailedTable = ({
   setHoveredItem
 }) => {
   const buildColClass = (column) => {
-    return classNames26(
+    return classNames27(
       "Layer__sortable-col",
       sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
     );
@@ -6136,7 +6488,7 @@ var DetailedTable = ({
       "tr",
       {
         key: `pl-side-table-item-${idx}`,
-        className: classNames26(
+        className: classNames27(
           "Layer__profit-and-loss-detailed-table__row",
           hoveredItem && hoveredItem === item.display_name ? "active" : ""
         ),
@@ -6221,7 +6573,7 @@ var ProfitAndLossDetailedCharts = ({
   const theScope = scope ? scope : sidebarScope;
   const data = theScope === "revenue" ? filteredDataRevenue : filteredDataExpenses;
   const total = theScope === "revenue" ? filteredTotalRevenue : filteredTotalExpenses;
-  const [hoveredItem, setHoveredItem] = useState16();
+  const [hoveredItem, setHoveredItem] = useState18();
   return /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ React73.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header" }, /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ React73.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(theScope)), /* @__PURE__ */ React73.createElement(Text, { size: "sm" /* sm */, className: "date" }, format6(dateRange.startDate, "LLLL, y")), showDatePicker && /* @__PURE__ */ React73.createElement(ProfitAndLossDatePicker, null)), !hideClose && /* @__PURE__ */ React73.createElement(
     Button,
     {
@@ -6263,17 +6615,17 @@ var ProfitAndLossDetailedCharts = ({
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import React76, { useContext as useContext5, useMemo as useMemo6 } from "react";
+import React76, { useContext as useContext5, useMemo as useMemo7 } from "react";
 
 // src/components/SkeletonLoader/SkeletonLoader.tsx
 import React74 from "react";
-import classNames27 from "classnames";
+import classNames28 from "classnames";
 var SkeletonLoader = ({
   height,
   width,
   className
 }) => {
-  const baseClassName = classNames27(
+  const baseClassName = classNames28(
     "Layer__skeleton-loader Layer__anim--skeleton-loading",
     className
   );
@@ -6317,7 +6669,7 @@ var MiniChart = ({ data }) => {
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import classNames28 from "classnames";
+import classNames29 from "classnames";
 var CHART_PLACEHOLDER = [
   {
     name: "placeholder",
@@ -6355,13 +6707,14 @@ var ProfitAndLossSummaries = ({
     setSidebarScope,
     sidebarScope
   } = useContext5(ProfitAndLoss.Context);
-  const expensesChartData = useMemo6(() => {
-    return buildMiniChartData("expenses", storedData);
+  const dataItem = Array.isArray(storedData) ? storedData[storedData.length - 1] : storedData;
+  const expensesChartData = useMemo7(() => {
+    return buildMiniChartData("expenses", dataItem);
   }, [storedData]);
-  const revenueChartData = useMemo6(() => {
-    return buildMiniChartData("revenue", storedData);
+  const revenueChartData = useMemo7(() => {
+    return buildMiniChartData("revenue", dataItem);
   }, [storedData]);
-  const data = storedData ? storedData : { income: { value: NaN }, net_profit: NaN };
+  const data = dataItem ? dataItem : { income: { value: NaN }, net_profit: NaN };
   const incomeDirectionClass = (data.income.value ?? NaN) < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
   const expensesDirectionClass = (data?.income?.value ?? NaN) - data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
   const netProfitDirectionClass = data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
@@ -6373,7 +6726,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ React76.createElement(
       "div",
       {
-        className: classNames28(
+        className: classNames29(
           "Layer__profit-and-loss-summaries__summary",
           actionable && "Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--income",
@@ -6395,7 +6748,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ React76.createElement(
       "div",
       {
-        className: classNames28(
+        className: classNames29(
           "Layer__profit-and-loss-summaries__summary",
           actionable && "Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--expenses",
@@ -6419,7 +6772,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ React76.createElement(
       "div",
       {
-        className: classNames28(
+        className: classNames29(
           "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit",
           actionable && "Layer__actionable"
         )
@@ -6439,7 +6792,7 @@ var ProfitAndLossSummaries = ({
 import React79, { useContext as useContext6 } from "react";
 
 // src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-import React78, { useState as useState17 } from "react";
+import React78, { useState as useState19 } from "react";
 
 // src/icons/PieChart.tsx
 import * as React77 from "react";
@@ -6488,7 +6841,7 @@ var ProfitAndLossRow = ({
     return null;
   }
   const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = useState17(true);
+  const [expanded, setExpanded] = useState19(true);
   const amount = value ?? 0;
   const amountString = centsToDollars(Math.abs(amount));
   const labelClasses = [
@@ -6610,19 +6963,20 @@ var empty_profit_and_loss_report_default = {
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-import classNames29 from "classnames";
+import classNames30 from "classnames";
 var ProfitAndLossTable = ({ lockExpanded, asContainer }) => {
   const {
     data: actualData,
     isLoading,
     setSidebarScope
   } = useContext6(ProfitAndLoss.Context);
-  const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
+  const currentData = Array.isArray(actualData) ? actualData[actualData.length - 1] : actualData;
+  const data = !currentData || isLoading ? empty_profit_and_loss_report_default : currentData;
   if (isLoading || actualData === void 0) {
     return /* @__PURE__ */ React79.createElement(
       "div",
       {
-        className: classNames29(
+        className: classNames30(
           "Layer__profit-and-loss-table__loader-container",
           asContainer && "Layer__component-container"
         )
@@ -6633,7 +6987,7 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer }) => {
   return /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement(
     "div",
     {
-      className: classNames29(
+      className: classNames30(
         "Layer__profit-and-loss-table Layer__profit-and-loss-table--main",
         asContainer && "Layer__component-container"
       )
@@ -6736,7 +7090,7 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer }) => {
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-import { endOfMonth as endOfMonth4, startOfMonth as startOfMonth4 } from "date-fns";
+import { endOfMonth as endOfMonth5, startOfMonth as startOfMonth6 } from "date-fns";
 var PNLContext = createContext2({
   data: void 0,
   filteredDataRevenue: [],
@@ -6747,8 +7101,8 @@ var PNLContext = createContext2({
   isValidating: false,
   error: void 0,
   dateRange: {
-    startDate: startOfMonth4(/* @__PURE__ */ new Date()),
-    endDate: endOfMonth4(/* @__PURE__ */ new Date())
+    startDate: startOfMonth6(/* @__PURE__ */ new Date()),
+    endDate: endOfMonth5(/* @__PURE__ */ new Date())
   },
   changeDateRange: () => {
   },
@@ -6786,8 +7140,8 @@ ProfitAndLoss.DetailedCharts = ProfitAndLossDetailedCharts;
 import React82, { useContext as useContext7, useRef as useRef14 } from "react";
 
 // src/components/Panel/Panel.tsx
-import React81, { useEffect as useEffect12, useState as useState18 } from "react";
-import classNames30 from "classnames";
+import React81, { useEffect as useEffect14, useState as useState20 } from "react";
+import classNames31 from "classnames";
 var Panel = ({
   children,
   className,
@@ -6796,8 +7150,8 @@ var Panel = ({
   sidebarIsOpen,
   parentRef
 }) => {
-  const [sidebarHeight, setSidebarHeight] = useState18(0);
-  useEffect12(() => {
+  const [sidebarHeight, setSidebarHeight] = useState20(0);
+  useEffect14(() => {
     if (parentRef?.current?.offsetHeight) {
       setSidebarHeight(parentRef?.current?.offsetHeight - 1);
     }
@@ -6805,7 +7159,7 @@ var Panel = ({
   return /* @__PURE__ */ React81.createElement(
     "div",
     {
-      className: classNames30(
+      className: classNames31(
         "Layer__panel",
         className,
         sidebarIsOpen && "Layer__panel--open"
@@ -6883,10 +7237,10 @@ var Components = ({
 };
 
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
-import React96, { createContext as createContext3, useContext as useContext14, useState as useState24 } from "react";
+import React96, { createContext as createContext3, useContext as useContext14, useState as useState26 } from "react";
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
-import { useState as useState19 } from "react";
+import { useState as useState21 } from "react";
 
 // src/components/ChartOfAccountsForm/constants.ts
 var LEDGER_ACCOUNT_TYPES = [
@@ -7170,9 +7524,9 @@ var validateName = (formData) => {
 var flattenAccounts = (accounts) => accounts.flatMap((a) => [a, flattenAccounts(a.sub_accounts || [])]).flat().filter((id) => id);
 var useChartOfAccounts = () => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [form, setForm] = useState19();
-  const [sendingForm, setSendingForm] = useState19(false);
-  const [apiError, setApiError] = useState19(void 0);
+  const [form, setForm] = useState21();
+  const [sendingForm, setSendingForm] = useState21(false);
+  const [apiError, setApiError] = useState21(void 0);
   const { data, isLoading, isValidating, error, mutate } = useSWR6(
     businessId && auth?.access_token && `chart-of-accounts-${businessId}`,
     Layer.getLedgerAccountBalances(apiUrl, auth?.access_token, {
@@ -7356,12 +7710,12 @@ var useChartOfAccounts = () => {
 };
 
 // src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
-import { useState as useState20 } from "react";
+import { useState as useState22 } from "react";
 import useSWR7 from "swr";
 var useLedgerAccounts = () => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [accountId, setAccountId] = useState20();
-  const [selectedEntryId, setSelectedEntryId] = useState20();
+  const [accountId, setAccountId] = useState22();
+  const [selectedEntryId, setSelectedEntryId] = useState22();
   const { data, isLoading, isValidating, error, mutate } = useSWR7(
     businessId && accountId && auth?.access_token && `ledger-accounts-lines-${businessId}-${accountId}`,
     Layer.getLedgerAccountsLines(apiUrl, auth?.access_token, {
@@ -7407,7 +7761,7 @@ var useLedgerAccounts = () => {
 import React88, { useContext as useContext10 } from "react";
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-import React84, { useContext as useContext8, useEffect as useEffect13, useState as useState21 } from "react";
+import React84, { useContext as useContext8, useEffect as useEffect15, useState as useState23 } from "react";
 
 // src/icons/Edit2.tsx
 import * as React83 from "react";
@@ -7434,7 +7788,7 @@ var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React83.createElement(
 var Edit2_default = Edit2;
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-import classNames31 from "classnames";
+import classNames32 from "classnames";
 var INDENTATION = 24;
 var MOBILE_INDENTATION = 12;
 var EXPANDED_STYLE = {
@@ -7468,7 +7822,7 @@ var ChartOfAccountsRow = ({
   const { form, editAccount } = useContext8(ChartOfAccountsContext);
   const { setAccountId } = useContext8(LedgerAccountsContext);
   const baseStyle = view === "desktop" ? EXPANDED_STYLE : EXPANDED_MOBILE_STYLE;
-  const [isOpen, setIsOpen] = useState21(defaultOpen);
+  const [isOpen, setIsOpen] = useState23(defaultOpen);
   const style = expanded ? {
     ...baseStyle,
     transitionDelay: `${15 * index}ms`
@@ -7476,14 +7830,14 @@ var ChartOfAccountsRow = ({
     ...COLLAPSED_STYLE,
     transitionDelay: `${acountsLength - 15 * index}ms`
   };
-  const [showComponent, setShowComponent] = useState21(false);
-  useEffect13(() => {
+  const [showComponent, setShowComponent] = useState23(false);
+  useEffect15(() => {
     const timeoutId = setTimeout(() => {
       setShowComponent(true);
     }, cumulativeIndex * 50);
     return () => clearTimeout(timeoutId);
   }, []);
-  const baseClass = classNames31(
+  const baseClass = classNames32(
     "Layer__table-row",
     isOpen ? "Layer__table-row--expanded" : "Layer__table-row--collapsed",
     !expanded && "Layer__table-row--hidden",
@@ -7491,11 +7845,11 @@ var ChartOfAccountsRow = ({
     form?.accountId === account.id && "Layer__table-row--active",
     !showComponent && "Layer__table-row--anim-starting-state"
   );
-  const desktopRowClass = classNames31(
+  const desktopRowClass = classNames32(
     baseClass,
     "Layer__chart-of-accounts__row---desktop"
   );
-  const mobileRowClass = classNames31(
+  const mobileRowClass = classNames32(
     baseClass,
     "Layer__chart-of-accounts__row---mobile"
   );
@@ -7653,11 +8007,11 @@ var ChartOfAccountsRow = ({
 import React87 from "react";
 
 // src/components/ChartOfAccountsForm/ChartOfAccountsForm.tsx
-import React86, { useContext as useContext9, useMemo as useMemo8 } from "react";
+import React86, { useContext as useContext9, useMemo as useMemo9 } from "react";
 
 // src/components/ChartOfAccountsForm/useParentOptions.ts
-import { useMemo as useMemo7 } from "react";
-var useParentOptions = (data) => useMemo7(
+import { useMemo as useMemo8 } from "react";
+var useParentOptions = (data) => useMemo8(
   () => flattenAccounts(data?.accounts || []).sort((a, b) => a?.name && b?.name ? a.name.localeCompare(b.name) : 0).map((x) => {
     return {
       label: x.name,
@@ -7679,7 +8033,7 @@ var ChartOfAccountsForm = () => {
     apiError
   } = useContext9(ChartOfAccountsContext);
   const parentOptions = useParentOptions(data);
-  const entry = useMemo8(() => {
+  const entry = useMemo9(() => {
     if (form?.action === "edit" && form.accountId) {
       return flattenAccounts(data?.accounts || []).find(
         (x) => x.id === form.accountId
@@ -7866,19 +8220,19 @@ var ChartOfAccountsTable = ({
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
 import React95, {
   useContext as useContext13,
-  useEffect as useEffect15,
-  useMemo as useMemo10,
-  useState as useState23
+  useEffect as useEffect17,
+  useMemo as useMemo11,
+  useState as useState25
 } from "react";
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
-import React93, { useContext as useContext11, useMemo as useMemo9 } from "react";
+import React93, { useContext as useContext11, useMemo as useMemo10 } from "react";
 
 // src/components/Card/Card.tsx
 import React89 from "react";
-import classNames32 from "classnames";
+import classNames33 from "classnames";
 var Card = ({ children, className }) => {
-  return /* @__PURE__ */ React89.createElement("div", { className: classNames32("Layer__card", className) }, children);
+  return /* @__PURE__ */ React89.createElement("div", { className: classNames33("Layer__card", className) }, children);
 };
 
 // src/components/DateTime/DateTime.tsx
@@ -7920,14 +8274,14 @@ var DateTime = ({
 
 // src/components/DetailsList/DetailsList.tsx
 import React91 from "react";
-import classNames33 from "classnames";
+import classNames34 from "classnames";
 var DetailsList = ({
   title,
   children,
   className,
   actions
 }) => {
-  return /* @__PURE__ */ React91.createElement("div", { className: classNames33("Layer__details-list", className) }, title && /* @__PURE__ */ React91.createElement(Header, null, /* @__PURE__ */ React91.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ React91.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ React91.createElement("ul", { className: "Layer__details-list__list" }, children));
+  return /* @__PURE__ */ React91.createElement("div", { className: classNames34("Layer__details-list", className) }, title && /* @__PURE__ */ React91.createElement(Header, null, /* @__PURE__ */ React91.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ React91.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ React91.createElement("ul", { className: "Layer__details-list__list" }, children));
 };
 
 // src/components/DetailsList/DetailsListItem.tsx
@@ -7983,7 +8337,7 @@ var SourceDetailView = ({ source }) => {
 };
 var LedgerAccountEntryDetails = () => {
   const { entryData, isLoadingEntry, closeSelectedEntry, errorEntry } = useContext11(LedgerAccountsContext);
-  const { totalDebit, totalCredit } = useMemo9(() => {
+  const { totalDebit, totalCredit } = useMemo10(() => {
     let totalDebit2 = 0;
     let totalCredit2 = 0;
     entryData?.line_items?.forEach((item) => {
@@ -8024,8 +8378,8 @@ var LedgerAccountEntryDetails = () => {
 };
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
-import React94, { useContext as useContext12, useEffect as useEffect14, useState as useState22 } from "react";
-import classNames34 from "classnames";
+import React94, { useContext as useContext12, useEffect as useEffect16, useState as useState24 } from "react";
+import classNames35 from "classnames";
 import { parseISO as parseISO10, format as formatTime8 } from "date-fns";
 var LedgerAccountRow = ({
   row,
@@ -8034,8 +8388,8 @@ var LedgerAccountRow = ({
   view
 }) => {
   const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext12(LedgerAccountsContext);
-  const [showComponent, setShowComponent] = useState22(false);
-  useEffect14(() => {
+  const [showComponent, setShowComponent] = useState24(false);
+  useEffect16(() => {
     if (initialLoad) {
       const timeoutId = setTimeout(() => {
         setShowComponent(true);
@@ -8049,7 +8403,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ React94.createElement(
       "tr",
       {
-        className: classNames34(
+        className: classNames35(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -8082,7 +8436,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ React94.createElement(
       "tr",
       {
-        className: classNames34(
+        className: classNames35(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -8111,7 +8465,7 @@ var LedgerAccountRow = ({
   return /* @__PURE__ */ React94.createElement(
     "tr",
     {
-      className: classNames34(
+      className: classNames35(
         "Layer__table-row",
         row.entry_id === selectedEntryId && "Layer__table-row--active",
         initialLoad && "initial-load",
@@ -8137,14 +8491,14 @@ var LedgerAccountRow = ({
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-import classNames35 from "classnames";
+import classNames36 from "classnames";
 var LedgerAccount = ({
   containerRef,
   pageSize = 15,
   view
 }) => {
-  const [currentPage, setCurrentPage] = useState23(1);
-  const [initialLoad, setInitialLoad] = useState23(true);
+  const [currentPage, setCurrentPage] = useState25(1);
+  const [initialLoad, setInitialLoad] = useState25(true);
   const { data: accountData } = useContext13(ChartOfAccountsContext);
   const {
     data: rawData,
@@ -8157,7 +8511,7 @@ var LedgerAccount = ({
     closeSelectedEntry,
     refetch
   } = useContext13(LedgerAccountsContext);
-  useEffect15(() => {
+  useEffect17(() => {
     if (!isLoading) {
       const timeoutLoad = setTimeout(() => {
         setInitialLoad(false);
@@ -8165,16 +8519,16 @@ var LedgerAccount = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [isLoading]);
-  const baseClassName = classNames35(
+  const baseClassName = classNames36(
     "Layer__ledger-account__index",
     accountId && "open"
   );
-  const entry = useMemo10(() => {
+  const entry = useMemo11(() => {
     return flattenAccounts(accountData?.accounts || []).find(
       (x) => x.id === accountId
     );
   }, [accountId]);
-  const data = useMemo10(() => {
+  const data = useMemo11(() => {
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
     return rawData?.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))?.slice(firstPageIndex, lastPageIndex);
@@ -8311,7 +8665,7 @@ var ChartOfAccounts = (props) => {
 };
 var ChartOfAccountsContent = ({ asWidget }) => {
   const { accountId } = useContext14(LedgerAccountsContext);
-  const [view, setView] = useState24("desktop");
+  const [view, setView] = useState26("desktop");
   const containerRef = useElementSize((_a, _b, { width }) => {
     if (width) {
       if (width >= BREAKPOINTS.TABLET && view !== "desktop") {
@@ -8327,7 +8681,7 @@ var ChartOfAccountsContent = ({ asWidget }) => {
 };
 
 // src/providers/LayerProvider/LayerProvider.tsx
-import React97, { useReducer, useEffect as useEffect16 } from "react";
+import React97, { useReducer, useEffect as useEffect18 } from "react";
 import { add as add2, isBefore } from "date-fns";
 import useSWR8, { SWRConfig } from "swr";
 var reducer = (state, action) => {
@@ -8392,7 +8746,7 @@ var LayerProvider = ({
     }),
     defaultSWRConfig
   ) : { data: void 0 };
-  useEffect16(() => {
+  useEffect18(() => {
     if (businessAccessToken) {
       dispatch({
         type: "LayerContext.setAuth" /* setAuth */,