@layerfi/components 0.1.14 → 0.1.15

package/dist/esm/index.js

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