@layerfi/components 0.1.48 → 0.1.50

package/dist/esm/index.js

@@ -793,12 +793,12 @@ var useBankTransactions = (params) => {
     }
     if (!prevData?.meta?.pagination?.cursor) {
       return [
-        businessId && auth?.access_token && `bank-transactions${filters?.categorizationStatus ? `-scope-${filters?.categorizationStatus}` : ""}-${businessId}`,
+        businessId && auth?.access_token && `bank-transactions-${businessId}`,
         void 0
       ];
     }
     return [
-      businessId && auth?.access_token && `bank-transactions${filters?.categorizationStatus ? `-scope-${filters?.categorizationStatus}` : ""}-${businessId}-${prevData.meta.pagination.cursor}`,
+      businessId && auth?.access_token && `bank-transactions-${businessId}-${prevData.meta.pagination.cursor}`,
       prevData.meta.pagination.cursor
     ];
   };
@@ -817,8 +817,7 @@ var useBankTransactions = (params) => {
         return Layer.getBankTransactions(apiUrl, auth?.access_token, {
           params: {
             businessId,
-            cursor: nextCursor,
-            categorized: filters?.categorizationStatus ? filters?.categorizationStatus === "categorized" /* categorized */ ? "true" : "false" : ""
+            cursor: nextCursor
           }
         }).call(false);
       }
@@ -987,13 +986,6 @@ var useBankTransactions = (params) => {
     mutate(updatedData, { revalidate: false });
   };
   const removeAfterCategorize = (bankTransaction) => {
-    const updatedData = rawResponseData?.map((page) => {
-      return {
-        ...page,
-        data: page.data?.filter((bt) => bt.id !== bankTransaction.id)
-      };
-    });
-    mutate(updatedData, { revalidate: false });
   };
   const refetch = () => {
     mutate();
@@ -8723,10 +8715,10 @@ var Quickbooks = () => {
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-import React125, { createContext as createContext6 } from "react";
+import React131, { createContext as createContext7 } from "react";
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { useMemo as useMemo7, useState as useState27 } from "react";
+import { useMemo as useMemo8, useState as useState28 } from "react";
 
 // src/utils/profitAndLossUtils.ts
 var doesLineItemQualifies = (item) => {
@@ -8781,17 +8773,175 @@ var applyShare = (items, total) => {
   });
 };
 
-// src/hooks/useProfitAndLoss/useProfitAndLossQuery.tsx
-import { useEffect as useEffect21 } from "react";
-import { startOfMonth as startOfMonth5, endOfMonth as endOfMonth4, formatISO } from "date-fns";
+// src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
+import { useEffect as useEffect21, useMemo as useMemo7, useState as useState27 } from "react";
+import { startOfMonth as startOfMonth5, sub } from "date-fns";
 import useSWR3 from "swr";
+var buildDates = ({ currentDate }) => {
+  return {
+    startYear: startOfMonth5(currentDate).getFullYear() - 1,
+    startMonth: startOfMonth5(currentDate).getMonth() + 1,
+    endYear: startOfMonth5(currentDate).getFullYear(),
+    endMonth: startOfMonth5(currentDate).getMonth() + 1
+  };
+};
+var buildMonthsArray = (startDate, endDate) => {
+  if (startDate >= endDate) {
+    return [];
+  }
+  var dates = [];
+  for (var d = startDate; d <= endDate; d.setMonth(d.getMonth() + 1)) {
+    dates.push(new Date(d));
+  }
+  return dates;
+};
+var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
+  currentDate: startOfMonth5(Date.now())
+}) => {
+  const {
+    businessId,
+    auth,
+    apiUrl,
+    syncTimestamps,
+    read,
+    readTimestamps,
+    hasBeenTouched
+  } = useLayerContext();
+  const [date, setDate] = useState27(currentDate);
+  const [loaded, setLoaded] = useState27("initial");
+  const [data, setData] = useState27([]);
+  const { startYear, startMonth, endYear, endMonth } = useMemo7(() => {
+    return buildDates({ currentDate: date });
+  }, [date, businessId, tagFilter, reportingBasis]);
+  const queryKey = businessId && Boolean(startYear) && Boolean(startMonth) && Boolean(endYear) && Boolean(endMonth) && auth?.access_token && `profit-and-loss-summaries-${businessId}-${startYear.toString()}-${startMonth.toString()}-${tagFilter?.key}-${tagFilter?.values?.join(
+    ","
+  )}-${reportingBasis}`;
+  const {
+    data: rawData,
+    isLoading,
+    isValidating,
+    error,
+    mutate
+  } = useSWR3(
+    queryKey,
+    Layer.getProfitAndLossSummaries(apiUrl, auth?.access_token, {
+      params: {
+        businessId,
+        startYear: startYear.toString(),
+        startMonth: startMonth.toString(),
+        endYear: endYear.toString(),
+        endMonth: endMonth.toString(),
+        tagKey: tagFilter?.key,
+        tagValues: tagFilter?.values?.join(","),
+        reportingBasis
+      }
+    })
+  );
+  useEffect21(() => {
+    const newData = data.slice();
+    const newPeriod = buildMonthsArray(sub(date, { years: 1 }), date);
+    if (newData && newPeriod) {
+      newPeriod.forEach((x) => {
+        if (!newData?.find(
+          (n) => x.getMonth() + 1 === n.month && x.getFullYear() === n.year
+        )) {
+          newData.push({
+            year: x.getFullYear(),
+            month: x.getMonth() + 1,
+            income: 0,
+            costOfGoodsSold: 0,
+            grossProfit: 0,
+            operatingExpenses: 0,
+            profitBeforeTaxes: 0,
+            taxes: 0,
+            netProfit: 0,
+            fullyCategorized: false,
+            totalExpenses: 0,
+            uncategorizedInflows: 0,
+            uncategorizedOutflows: 0,
+            uncategorized_transactions: 0,
+            isLoading: true
+          });
+        }
+      });
+    }
+    if (newData) {
+      setData(
+        newData.sort(
+          (a, b) => Number(new Date(a.year, a.month, 1)) - Number(new Date(b.year, b.month, 1))
+        )
+      );
+    }
+  }, [startYear, startMonth]);
+  useEffect21(() => {
+    const newData = rawData?.data?.months?.slice();
+    if (data && newData) {
+      data.forEach((x) => {
+        if (!newData?.find((n) => x.month === n.month && x.year === n.year)) {
+          newData.push({ ...x });
+        }
+      });
+    }
+    if (newData) {
+      setData(
+        newData.sort(
+          (a, b) => Number(new Date(a.year, a.month, 1)) - Number(new Date(b.year, b.month, 1))
+        )
+      );
+    }
+  }, [rawData]);
+  useEffect21(() => {
+    if (isLoading && loaded === "initial") {
+      setLoaded("loading");
+      return;
+    }
+    if (!isLoading && rawData) {
+      setLoaded("complete");
+    }
+  }, [data, isLoading]);
+  const pullData = (date2) => setDate(date2);
+  useEffect21(() => {
+    if (queryKey && (isLoading || isValidating)) {
+      read("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */, queryKey);
+    }
+  }, [isLoading, isValidating]);
+  useEffect21(() => {
+    if (queryKey && hasBeenTouched(queryKey)) {
+      mutate();
+    }
+  }, [
+    syncTimestamps,
+    startYear,
+    startMonth,
+    endYear,
+    endMonth,
+    tagFilter,
+    reportingBasis
+  ]);
+  const refetch = () => {
+    mutate();
+  };
+  return {
+    data,
+    isLoading,
+    loaded,
+    error,
+    pullData,
+    refetch
+  };
+};
+
+// src/hooks/useProfitAndLoss/useProfitAndLossQuery.tsx
+import { useEffect as useEffect22 } from "react";
+import { startOfMonth as startOfMonth6, endOfMonth as endOfMonth4, formatISO } from "date-fns";
+import useSWR4 from "swr";
 var useProfitAndLossQuery = ({
   startDate,
   endDate,
   tagFilter,
   reportingBasis
 } = {
-  startDate: startOfMonth5(/* @__PURE__ */ new Date()),
+  startDate: startOfMonth6(/* @__PURE__ */ new Date()),
   endDate: endOfMonth4(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl, syncTimestamps, read, hasBeenTouched } = useLayerContext();
@@ -8804,7 +8954,7 @@ var useProfitAndLossQuery = ({
     isValidating,
     error: rawError,
     mutate
-  } = useSWR3(
+  } = useSWR4(
     queryKey,
     Layer.getProfitAndLoss(apiUrl, auth?.access_token, {
       params: {
@@ -8820,12 +8970,12 @@ var useProfitAndLossQuery = ({
   const refetch = () => {
     mutate();
   };
-  useEffect21(() => {
+  useEffect22(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -8842,33 +8992,36 @@ var useProfitAndLossQuery = ({
 };
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { startOfMonth as startOfMonth6, endOfMonth as endOfMonth5 } from "date-fns";
+import { startOfMonth as startOfMonth7, endOfMonth as endOfMonth5 } from "date-fns";
 var useProfitAndLoss = ({
   startDate: initialStartDate,
   endDate: initialEndDate,
   tagFilter,
   reportingBasis
 } = {
-  startDate: startOfMonth6(/* @__PURE__ */ new Date()),
+  startDate: startOfMonth7(/* @__PURE__ */ new Date()),
   endDate: endOfMonth5(/* @__PURE__ */ new Date())
 }) => {
-  const [startDate, setStartDate] = useState27(
-    initialStartDate || startOfMonth6(Date.now())
+  const [startDate, setStartDate] = useState28(
+    initialStartDate || startOfMonth7(Date.now())
   );
-  const [endDate, setEndDate] = useState27(
+  const [endDate, setEndDate] = useState28(
     initialEndDate || endOfMonth5(Date.now())
   );
-  const [filters, setFilters] = useState27({
+  const [filters, setFilters] = useState28({
     expenses: void 0,
     revenue: void 0
   });
-  const [sidebarScope, setSidebarScope] = useState27(void 0);
+  const [sidebarScope, setSidebarScope] = useState28(void 0);
   const { data, isLoading, isValidating, error, refetch } = useProfitAndLossQuery({
     startDate,
     endDate,
     tagFilter,
     reportingBasis
   });
+  const { data: summaryData } = useProfitAndLossLTM({
+    currentDate: startDate ? startDate : startOfMonth7(/* @__PURE__ */ new Date())
+  });
   const changeDateRange = ({
     startDate: newStartDate,
     endDate: newEndDate
@@ -8895,7 +9048,7 @@ var useProfitAndLoss = ({
       }
     });
   };
-  const { filteredDataRevenue, filteredTotalRevenue } = useMemo7(() => {
+  const { filteredDataRevenue, filteredTotalRevenue } = useMemo8(() => {
     if (!data) {
       return { filteredDataRevenue: [], filteredTotalRevenue: void 0 };
     }
@@ -8909,6 +9062,19 @@ var useProfitAndLoss = ({
       }
       return x;
     });
+    const month = startDate.getMonth() + 1;
+    const year = startDate.getFullYear();
+    const found = summaryData.find((x) => x.month === month && x.year === year);
+    if (found && (found.uncategorizedInflows ?? 0) > 0) {
+      filtered.push({
+        name: "uncategorized",
+        display_name: "Uncategorized",
+        value: found.uncategorizedInflows,
+        type: "Uncategorized",
+        share: 0,
+        hidden: false
+      });
+    }
     const sorted = filtered.sort((a, b) => {
       switch (filters["revenue"]?.sortBy) {
         case "category":
@@ -8931,8 +9097,8 @@ var useProfitAndLoss = ({
     const total = sorted.filter((x) => !x.hidden).reduce((x, { value }) => x + value, 0);
     const withShare = applyShare(sorted, total);
     return { filteredDataRevenue: withShare, filteredTotalRevenue: total };
-  }, [data, startDate, filters, sidebarScope]);
-  const { filteredDataExpenses, filteredTotalExpenses } = useMemo7(() => {
+  }, [data, startDate, filters, sidebarScope, summaryData]);
+  const { filteredDataExpenses, filteredTotalExpenses } = useMemo8(() => {
     if (!data) {
       return { filteredDataExpenses: [], filteredTotalExpenses: void 0 };
     }
@@ -8946,6 +9112,19 @@ var useProfitAndLoss = ({
       }
       return x;
     });
+    const month = startDate.getMonth() + 1;
+    const year = startDate.getFullYear();
+    const found = summaryData.find((x) => x.month === month && x.year === year);
+    if (found && (found.uncategorizedOutflows ?? 0) > 0) {
+      filtered.push({
+        name: "uncategorized",
+        display_name: "Uncategorized",
+        value: found.uncategorizedOutflows,
+        type: "Uncategorized",
+        share: 0,
+        hidden: false
+      });
+    }
     const sorted = filtered.sort((a, b) => {
       switch (filters["expenses"]?.sortBy) {
         case "category":
@@ -8968,7 +9147,7 @@ var useProfitAndLoss = ({
     const total = sorted.filter((x) => !x.hidden).reduce((x, { value }) => x + value, 0);
     const withShare = applyShare(sorted, total);
     return { filteredDataExpenses: withShare, filteredTotalExpenses: total };
-  }, [data, startDate, filters, sidebarScope]);
+  }, [data, startDate, filters, sidebarScope, summaryData]);
   return {
     data,
     filteredDataRevenue,
@@ -8992,201 +9171,43 @@ var useProfitAndLoss = ({
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
 import React112, { useContext as useContext12, useEffect as useEffect24, useMemo as useMemo9, useState as useState30 } from "react";
 
-// src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
-import { useEffect as useEffect22, useMemo as useMemo8, useState as useState28 } from "react";
-import { startOfMonth as startOfMonth7, sub } from "date-fns";
-import useSWR4 from "swr";
-var buildDates = ({ currentDate }) => {
-  return {
-    startYear: startOfMonth7(currentDate).getFullYear() - 1,
-    startMonth: startOfMonth7(currentDate).getMonth() + 1,
-    endYear: startOfMonth7(currentDate).getFullYear(),
-    endMonth: startOfMonth7(currentDate).getMonth() + 1
-  };
-};
-var buildMonthsArray = (startDate, endDate) => {
-  if (startDate >= endDate) {
-    return [];
-  }
-  var dates = [];
-  for (var d = startDate; d <= endDate; d.setMonth(d.getMonth() + 1)) {
-    dates.push(new Date(d));
-  }
-  return dates;
-};
-var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
-  currentDate: startOfMonth7(Date.now())
+// src/components/ProfitAndLossChart/Indicator.tsx
+import React111, { useEffect as useEffect23, useState as useState29 } from "react";
+var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
+var Indicator = ({
+  className,
+  animateFrom,
+  setAnimateFrom,
+  customCursorSize,
+  setCustomCursorSize,
+  viewBox = {}
 }) => {
-  const {
-    businessId,
-    auth,
-    apiUrl,
-    syncTimestamps,
-    read,
-    readTimestamps,
-    hasBeenTouched
-  } = useLayerContext();
-  const [date, setDate] = useState28(currentDate);
-  const [loaded, setLoaded] = useState28("initial");
-  const [data, setData] = useState28([]);
-  const { startYear, startMonth, endYear, endMonth } = useMemo8(() => {
-    return buildDates({ currentDate: date });
-  }, [date, businessId, tagFilter, reportingBasis]);
-  const queryKey = businessId && Boolean(startYear) && Boolean(startMonth) && Boolean(endYear) && Boolean(endMonth) && auth?.access_token && `profit-and-loss-summaries-${businessId}-${startYear.toString()}-${startMonth.toString()}-${tagFilter?.key}-${tagFilter?.values?.join(
-    ","
-  )}-${reportingBasis}`;
-  const {
-    data: rawData,
-    isLoading,
-    isValidating,
-    error,
-    mutate
-  } = useSWR4(
-    queryKey,
-    Layer.getProfitAndLossSummaries(apiUrl, auth?.access_token, {
-      params: {
-        businessId,
-        startYear: startYear.toString(),
-        startMonth: startMonth.toString(),
-        endYear: endYear.toString(),
-        endMonth: endMonth.toString(),
-        tagKey: tagFilter?.key,
-        tagValues: tagFilter?.values?.join(","),
-        reportingBasis
-      }
-    })
-  );
-  useEffect22(() => {
-    const newData = data.slice();
-    const newPeriod = buildMonthsArray(sub(date, { years: 1 }), date);
-    if (newData && newPeriod) {
-      newPeriod.forEach((x) => {
-        if (!newData?.find(
-          (n) => x.getMonth() + 1 === n.month && x.getFullYear() === n.year
-        )) {
-          newData.push({
-            year: x.getFullYear(),
-            month: x.getMonth() + 1,
-            income: 0,
-            costOfGoodsSold: 0,
-            grossProfit: 0,
-            operatingExpenses: 0,
-            profitBeforeTaxes: 0,
-            taxes: 0,
-            netProfit: 0,
-            fullyCategorized: false,
-            totalExpenses: 0,
-            uncategorizedInflows: 0,
-            uncategorizedOutflows: 0,
-            uncategorized_transactions: 0,
-            isLoading: true
-          });
-        }
-      });
-    }
-    if (newData) {
-      setData(
-        newData.sort(
-          (a, b) => Number(new Date(a.year, a.month, 1)) - Number(new Date(b.year, b.month, 1))
-        )
-      );
-    }
-  }, [startYear, startMonth]);
-  useEffect22(() => {
-    const newData = rawData?.data?.months?.slice();
-    if (data && newData) {
-      data.forEach((x) => {
-        if (!newData?.find((n) => x.month === n.month && x.year === n.year)) {
-          newData.push({ ...x });
-        }
-      });
-    }
-    if (newData) {
-      setData(
-        newData.sort(
-          (a, b) => Number(new Date(a.year, a.month, 1)) - Number(new Date(b.year, b.month, 1))
-        )
-      );
-    }
-  }, [rawData]);
-  useEffect22(() => {
-    if (isLoading && loaded === "initial") {
-      setLoaded("loading");
-      return;
-    }
-    if (!isLoading && rawData) {
-      setLoaded("complete");
-    }
-  }, [data, isLoading]);
-  const pullData = (date2) => setDate(date2);
-  useEffect22(() => {
-    if (queryKey && (isLoading || isValidating)) {
-      read("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */, queryKey);
-    }
-  }, [isLoading, isValidating]);
-  useEffect22(() => {
-    if (queryKey && hasBeenTouched(queryKey)) {
-      mutate();
-    }
-  }, [
-    syncTimestamps,
-    startYear,
-    startMonth,
-    endYear,
-    endMonth,
-    tagFilter,
-    reportingBasis
-  ]);
-  const refetch = () => {
-    mutate();
-  };
-  return {
-    data,
-    isLoading,
-    loaded,
-    error,
-    pullData,
-    refetch
-  };
-};
-
-// src/components/ProfitAndLossChart/Indicator.tsx
-import React111, { useEffect as useEffect23, useState as useState29 } from "react";
-var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
-var Indicator = ({
-  className,
-  animateFrom,
-  setAnimateFrom,
-  customCursorSize,
-  setCustomCursorSize,
-  viewBox = {}
-}) => {
-  if (!className?.match(/selected/)) {
-    return null;
-  }
-  const [opacityIndicator, setOpacityIndicator] = useState29(0);
-  const { x: animateTo = 0, width = 0 } = "x" in viewBox ? viewBox : emptyViewBox;
-  const margin = width > 12 ? 12 : 6;
-  const boxWidth = width + margin;
-  const xOffset = boxWidth / 2;
-  const borderRadius = 6;
-  const rectWidth = `${boxWidth}px`;
-  const rectHeight = "calc(100% - 38px)";
-  useEffect23(() => {
-    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);
+  if (!className?.match(/selected/)) {
+    return null;
+  }
+  const [opacityIndicator, setOpacityIndicator] = useState29(0);
+  const { x: animateTo = 0, width = 0 } = "x" in viewBox ? viewBox : emptyViewBox;
+  const margin = width > 12 ? 12 : 6;
+  const boxWidth = width + margin;
+  const xOffset = boxWidth / 2;
+  const borderRadius = 6;
+  const rectWidth = `${boxWidth}px`;
+  const rectHeight = "calc(100% - 38px)";
+  useEffect23(() => {
+    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);
       }
     }
   };
@@ -10148,6 +10169,12 @@ var mapTypesToColors = (data, colorList = DEFAULT_CHART_COLOR_TYPE) => {
   let colorIndex = 0;
   return data.map((obj) => {
     const type = obj.type;
+    if (type === "Uncategorized") {
+      return {
+        color: "#EEEEF0",
+        opacity: 1
+      };
+    }
     if (!typeToColor[type]) {
       typeToColor[type] = colorList[colorIndex % colorList.length];
       colorIndex++;
@@ -10162,6 +10189,57 @@ var mapTypesToColors = (data, colorList = DEFAULT_CHART_COLOR_TYPE) => {
     };
   });
 };
+var ValueIcon = ({
+  item,
+  typeColorMapping,
+  idx
+}) => {
+  if (item.type === "Uncategorized") {
+    return /* @__PURE__ */ React116.createElement(
+      "svg",
+      {
+        viewBox: "0 0 12 12",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "12",
+        height: "12"
+      },
+      /* @__PURE__ */ React116.createElement("defs", null, /* @__PURE__ */ React116.createElement(
+        "pattern",
+        {
+          id: "layer-pie-dots-pattern-legend",
+          x: "0",
+          y: "0",
+          width: "3",
+          height: "3",
+          patternUnits: "userSpaceOnUse"
+        },
+        /* @__PURE__ */ React116.createElement("rect", { width: "1", height: "1", opacity: 0.76 })
+      )),
+      /* @__PURE__ */ React116.createElement("rect", { width: "12", height: "12", id: "layer-pie-dots-pattern-bg", rx: "2" }),
+      /* @__PURE__ */ React116.createElement(
+        "rect",
+        {
+          x: "1",
+          y: "1",
+          width: "10",
+          height: "10",
+          fill: "url(#layer-pie-dots-pattern-legend)"
+        }
+      )
+    );
+  }
+  return /* @__PURE__ */ React116.createElement(
+    "div",
+    {
+      className: "share-icon",
+      style: {
+        background: typeColorMapping[idx].color,
+        opacity: typeColorMapping[idx].opacity
+      }
+    }
+  );
+};
 var DetailedTable = ({
   filteredData,
   sidebarScope,
@@ -10223,13 +10301,11 @@ var DetailedTable = ({
       /* @__PURE__ */ React116.createElement("td", { className: "type-col" }, item.type),
       /* @__PURE__ */ React116.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
       /* @__PURE__ */ React116.createElement("td", { className: "share-col" }, /* @__PURE__ */ React116.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ React116.createElement(
-        "div",
+        ValueIcon,
         {
-          className: "share-icon",
-          style: {
-            background: typeColorMapping[idx].color,
-            opacity: typeColorMapping[idx].opacity
-          }
+          item,
+          typeColorMapping,
+          idx
         }
       )))
     );
@@ -10237,6 +10313,7 @@ var DetailedTable = ({
 };
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
+import classNames43 from "classnames";
 import {
   PieChart,
   Pie,
@@ -10277,7 +10354,32 @@ var DetailedChart = ({
   }, [filteredData, isLoading]);
   const noValue = chartData.length === 0 || !chartData.find((x) => x.value !== 0);
   const typeColorMapping = mapTypesToColors(chartData, chartColorsList);
-  return /* @__PURE__ */ React117.createElement("div", { className: "chart-field" }, /* @__PURE__ */ React117.createElement("div", { className: "header--tablet" }, showDatePicker && /* @__PURE__ */ React117.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ React117.createElement("div", { className: "chart-container" }, /* @__PURE__ */ React117.createElement(ResponsiveContainer2, null, /* @__PURE__ */ React117.createElement(PieChart, null, !isLoading && !noValue ? /* @__PURE__ */ React117.createElement(
+  return /* @__PURE__ */ React117.createElement("div", { className: "chart-field" }, /* @__PURE__ */ React117.createElement("div", { className: "header--tablet" }, showDatePicker && /* @__PURE__ */ React117.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ React117.createElement("div", { className: "chart-container" }, /* @__PURE__ */ React117.createElement(ResponsiveContainer2, null, /* @__PURE__ */ React117.createElement(PieChart, null, /* @__PURE__ */ React117.createElement("defs", null, /* @__PURE__ */ React117.createElement(
+    "pattern",
+    {
+      id: "layer-pie-stripe-pattern",
+      x: "0",
+      y: "0",
+      width: "4",
+      height: "4",
+      patternTransform: "rotate(45)",
+      patternUnits: "userSpaceOnUse"
+    },
+    /* @__PURE__ */ React117.createElement("rect", { width: "4", height: "4", opacity: 0.16 }),
+    /* @__PURE__ */ React117.createElement("line", { x1: "0", y: "0", x2: "0", y2: "4", strokeWidth: "2" })
+  ), /* @__PURE__ */ React117.createElement(
+    "pattern",
+    {
+      id: "layer-pie-dots-pattern",
+      x: "0",
+      y: "0",
+      width: "3",
+      height: "3",
+      patternUnits: "userSpaceOnUse"
+    },
+    /* @__PURE__ */ React117.createElement("rect", { width: "3", height: "3", opacity: 0.46, className: "bg" }),
+    /* @__PURE__ */ React117.createElement("rect", { width: "1", height: "1", opacity: 0.56 })
+  )), !isLoading && !noValue ? /* @__PURE__ */ React117.createElement(
     Pie,
     {
       data: chartData,
@@ -10303,8 +10405,14 @@ var DetailedChart = ({
         Cell2,
         {
           key: `cell-${index}`,
-          className: `Layer__profit-and-loss-detailed-charts__pie ${hoveredItem && active ? "active" : "inactive"}`,
-          style: { fill },
+          className: classNames43(
+            "Layer__profit-and-loss-detailed-charts__pie",
+            hoveredItem && active ? "active" : "inactive",
+            entry.type === "Uncategorized" && "Layer__profit-and-loss-detailed-charts__pie--border"
+          ),
+          style: {
+            fill: entry.type === "Uncategorized" && fill ? "url(#layer-pie-dots-pattern)" : fill
+          },
           opacity: typeColorMapping[index].opacity,
           onMouseEnter: () => setHoveredItem(entry.name),
           onMouseLeave: () => setHoveredItem(void 0)
@@ -10660,7 +10768,7 @@ var MiniChart = ({ data }) => {
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import classNames43 from "classnames";
+import classNames44 from "classnames";
 var CHART_PLACEHOLDER = [
   {
     name: "placeholder",
@@ -10719,7 +10827,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ React121.createElement(
       "div",
       {
-        className: classNames43(
+        className: classNames44(
           "Layer__profit-and-loss-summaries__summary",
           actionable && "Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--income",
@@ -10741,7 +10849,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ React121.createElement(
       "div",
       {
-        className: classNames43(
+        className: classNames44(
           "Layer__profit-and-loss-summaries__summary",
           actionable && "Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--expenses",
@@ -10765,7 +10873,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ React121.createElement(
       "div",
       {
-        className: classNames43(
+        className: classNames44(
           "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit",
           actionable && "Layer__actionable"
         )
@@ -10781,15 +10889,91 @@ var ProfitAndLossSummaries = ({
   );
 };
 
-// src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-import React124, { useContext as useContext16 } from "react";
+// src/components/ProfitAndLossTable/ProfitAndLossTableWithProvider.tsx
+import React130 from "react";
+
+// src/contexts/TableContext/TableContext.tsx
+import React122, { createContext as createContext6, useState as useState32 } from "react";
+var defaultValue = {
+  expandedRows: [],
+  setExpandedRows: () => {
+  },
+  expandAllRows: () => {
+  },
+  expandedAllRows: false,
+  setExpandedAllRows: () => {
+  }
+};
+var TableContext = createContext6(defaultValue);
+var TableProvider = ({ children }) => {
+  const [expandedRows, setExpandedRowsState] = useState32([]);
+  const [expandedAllRows, setExpandedAllRows] = useState32(false);
+  const toggleRow = (rowKey) => {
+    setExpandedRowsState((prevRows) => {
+      const rows = [...prevRows];
+      if (rows.includes(rowKey)) {
+        rows.splice(rows.indexOf(rowKey), 1);
+      } else {
+        rows.push(rowKey);
+      }
+      return rows;
+    });
+  };
+  const expandAllRows = (rowKeys) => {
+    setExpandedRowsState(rowKeys);
+  };
+  const contextValue = {
+    expandedRows,
+    setExpandedRows: toggleRow,
+    expandAllRows,
+    expandedAllRows,
+    setExpandedAllRows
+  };
+  return /* @__PURE__ */ React122.createElement(TableContext.Provider, { value: contextValue }, children);
+};
+
+// src/components/ProfitAndLossTable/ProfitAndLossTableComponent.tsx
+import React129, { useContext as useContext17, useEffect as useEffect27 } from "react";
 
-// src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-import React123, { useState as useState32 } from "react";
+// src/hooks/useTableExpandRow/useTableExpandRow.tsx
+import { useContext as useContext16 } from "react";
+var useTableExpandRow = () => {
+  const {
+    expandedAllRows,
+    setExpandedAllRows,
+    expandAllRows,
+    expandedRows,
+    setExpandedRows
+  } = useContext16(TableContext);
+  const toggleAllRows = () => {
+    if (expandedAllRows) {
+      setIsOpen([]);
+      return setExpandedAllRows(false);
+    } else {
+      return setExpandedAllRows(true);
+    }
+  };
+  const setIsOpen = (rowKey, withoutAllRowsUpdate) => {
+    if (!withoutAllRowsUpdate && expandedAllRows) {
+      setExpandedAllRows(false);
+    }
+    if (Array.isArray(rowKey)) {
+      return expandAllRows(rowKey);
+    }
+    return setExpandedRows(rowKey);
+  };
+  const isOpen = (rowKey) => expandedRows.includes(rowKey);
+  return {
+    isOpen,
+    setIsOpen,
+    expandedAllRows,
+    toggleAllRows
+  };
+};
 
 // src/icons/PieChart.tsx
-import * as React122 from "react";
-var PieChart3 = ({ size = 12, ...props }) => /* @__PURE__ */ React122.createElement(
+import * as React123 from "react";
+var PieChart3 = ({ size = 12, ...props }) => /* @__PURE__ */ React123.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -10799,7 +10983,7 @@ var PieChart3 = ({ size = 12, ...props }) => /* @__PURE__ */ React122.createElem
     width: size,
     height: size
   },
-  /* @__PURE__ */ React122.createElement("g", null, /* @__PURE__ */ React122.createElement(
+  /* @__PURE__ */ React123.createElement("g", null, /* @__PURE__ */ React123.createElement(
     "path",
     {
       d: "M10.2213 7.78271C9.92969 8.47226 9.47363 9.07989 8.89297 9.55247C8.3123 10.0251 7.62471 10.3482 6.89031 10.4936C6.1559 10.6391 5.39705 10.6024 4.68009 10.3869C3.96313 10.1713 3.30989 9.78337 2.77749 9.25701C2.24509 8.73065 1.84973 8.08189 1.62598 7.36744C1.40223 6.65298 1.3569 5.8946 1.49396 5.15858C1.63102 4.42257 1.94629 3.73133 2.41221 3.14531C2.87813 2.55928 3.48051 2.09631 4.16669 1.79688",
@@ -10807,7 +10991,7 @@ var PieChart3 = ({ size = 12, ...props }) => /* @__PURE__ */ React122.createElem
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React122.createElement(
+  ), /* @__PURE__ */ React123.createElement(
     "path",
     {
       d: "M10.5833 6.00033C10.5833 5.39843 10.4648 4.80244 10.2344 4.24636C10.0041 3.69028 9.66651 3.18502 9.24091 2.75942C8.8153 2.33382 8.31004 1.99621 7.75397 1.76588C7.19789 1.53554 6.60189 1.41699 6 1.41699V6.00033H10.5833Z",
@@ -10819,96 +11003,139 @@ var PieChart3 = ({ size = 12, ...props }) => /* @__PURE__ */ React122.createElem
 );
 var PieChart_default = PieChart3;
 
-// src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-var ProfitAndLossRow = ({
-  variant,
-  lineItem,
-  depth = 0,
-  maxDepth = 8,
-  direction = "DEBIT" /* DEBIT */,
-  lockExpanded = false,
-  scope,
-  setSidebarScope,
-  defaultExpanded = false
+// src/components/TableBody/TableBody.tsx
+import React124 from "react";
+var TableBody = ({ children }) => {
+  return /* @__PURE__ */ React124.createElement("tbody", { className: "Layer__table-body" }, children);
+};
+
+// src/components/TableCell/TableCell.tsx
+import React125 from "react";
+import classNames45 from "classnames";
+var TableCell = ({
+  children,
+  isHeaderCell,
+  isCurrency,
+  primary,
+  withExpandIcon = false,
+  fullWidth
 }) => {
-  if (!lineItem) {
-    return null;
-  }
-  const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = useState32(lockExpanded || defaultExpanded);
-  const amount = value ?? 0;
+  const amount = typeof children === "number" ? children : 0;
+  const isPositive = amount >= 0;
   const amountString = centsToDollars(Math.abs(amount));
-  const labelClasses = [
-    "Layer__profit-and-loss-row",
-    "Layer__profit-and-loss-row__label"
-  ];
-  const valueClasses = [
-    "Layer__profit-and-loss-row",
-    "Layer__profit-and-loss-row__value"
-  ];
-  const positive = amount === 0 || direction === "CREDIT" /* CREDIT */ && amount > 0 || direction === "DEBIT" /* DEBIT */ && amount < 0;
-  valueClasses.push(
-    positive ? "Layer__profit-and-loss-row__value--amount-positive" : "Layer__profit-and-loss-row__value--amount-negative"
-  );
-  labelClasses.push(`Layer__profit-and-loss-row__label--depth-${depth}`);
-  valueClasses.push(`Layer__profit-and-loss-row__value--depth-${depth}`);
-  variant && labelClasses.push(`Layer__profit-and-loss-row__label--variant-${variant}`);
-  variant && valueClasses.push(`Layer__profit-and-loss-row__value--variant-${variant}`);
-  const toggleExpanded = () => setExpanded(!expanded);
-  const canGoDeeper = depth < maxDepth;
-  const hasChildren = (line_items?.length ?? 0) > 0;
-  const displayChildren = hasChildren && canGoDeeper;
-  labelClasses.push(
-    `Layer__profit-and-loss-row__label--display-children-${displayChildren}`
-  );
-  valueClasses.push(
-    `Layer__profit-and-loss-row__value--display-children-${displayChildren}`
-  );
-  displayChildren && expanded && labelClasses.push("Layer__profit-and-loss-row__label--expanded");
-  displayChildren && expanded && valueClasses.push("Layer__profit-and-loss-row__value--expanded");
-  return /* @__PURE__ */ React123.createElement(React123.Fragment, null, /* @__PURE__ */ React123.createElement(
-    "div",
+  const cellClassNames = classNames45(
+    "Layer__table-cell",
+    (primary || isHeaderCell) && "Layer__table-cell--primary",
+    isCurrency && "Layer__table-cell-amount",
+    isCurrency && isPositive && "Layer__table-cell-amount--positive",
+    isCurrency && !isPositive && "Layer__table-cell-amount--negative"
+  );
+  if (isHeaderCell) {
+    return /* @__PURE__ */ React125.createElement("th", { className: cellClassNames }, /* @__PURE__ */ React125.createElement("span", { className: "Layer__table-cell-content" }, children));
+  }
+  return /* @__PURE__ */ React125.createElement(
+    "td",
     {
-      className: labelClasses.join(" "),
-      onClick: () => !lockExpanded && toggleExpanded(),
-      style: {
-        paddingLeft: depth === 0 && !hasChildren ? 28 : 16 * (depth + 1) + 2
-      }
+      className: cellClassNames,
+      style: fullWidth ? { width: "100%" } : void 0
     },
-    /* @__PURE__ */ React123.createElement("span", { className: "Layer__profit-and-loss-row__label__title" }, !lockExpanded && variant !== "summation" ? /* @__PURE__ */ React123.createElement(
+    /* @__PURE__ */ React125.createElement("span", { className: "Layer__table-cell-content" }, withExpandIcon && /* @__PURE__ */ React125.createElement(
       ChevronDownFill_default,
       {
-        size: 16,
-        className: "Layer__profit-and-loss-row__label__chevron"
+        className: "Layer__table-row--expand-icon",
+        size: 16
       }
-    ) : null, /* @__PURE__ */ React123.createElement(Text, null, display_name)),
-    setSidebarScope && /* @__PURE__ */ React123.createElement(
-      "span",
-      {
-        className: "Layer__profit-and-loss-row__detailed-chart-btn",
-        onClick: (e) => {
-          e.stopPropagation();
-          setSidebarScope && setSidebarScope(scope ?? "expenses");
+    ), isCurrency ? amountString : children, " ")
+  );
+};
+
+// src/components/TableHead/TableHead.tsx
+import React126 from "react";
+var TableHead = ({ children }) => {
+  return /* @__PURE__ */ React126.createElement("thead", { className: "Layer__table-header" }, children);
+};
+
+// src/components/TableRow/TableRow.tsx
+import React127 from "react";
+import classNames46 from "classnames";
+var TableRow = ({
+  rowKey,
+  children,
+  depth = 0,
+  expandable = false,
+  isExpanded = false,
+  handleExpand,
+  variant = expandable ? "expandable" : "default",
+  withDivider,
+  withDividerPosition = "top",
+  isHeadRow = false
+}) => {
+  const toggleExpanded = () => {
+    if (variant === "summation" || !expandable)
+      return;
+    handleExpand && handleExpand();
+  };
+  const rowClassNames = classNames46([
+    "Layer__table-row",
+    !isHeadRow && `Layer__table-row--depth-${depth}`,
+    !isHeadRow && `Layer__table-row--variant-${variant}`,
+    !isHeadRow && expandable && (isExpanded ? "Layer__table-row--expanded" : "Layer__table-row--collapsed")
+  ]);
+  return /* @__PURE__ */ React127.createElement(React127.Fragment, null, withDivider && withDividerPosition === "top" && /* @__PURE__ */ React127.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React127.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })), /* @__PURE__ */ React127.createElement("tr", { "data-key": rowKey, className: rowClassNames, onClick: toggleExpanded }, children), withDivider && withDividerPosition === "bottom" && /* @__PURE__ */ React127.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React127.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })));
+};
+
+// src/components/Table/Table.tsx
+import React128, { useEffect as useEffect26, useRef as useRef15 } from "react";
+import classNames47 from "classnames";
+var Table = ({
+  componentName,
+  children,
+  borderCollapse = "separate",
+  bottomSpacing = true
+}) => {
+  const tableRef = useRef15(null);
+  const prevChildrenRef = useRef15([]);
+  useEffect26(() => {
+    if (tableRef.current) {
+      const tbody = tableRef.current.querySelector("tbody");
+      const rows = tbody ? Array.from(tbody.querySelectorAll("tr")) : [];
+      const prevChildrenArray = prevChildrenRef.current;
+      const currentChildren = rows.map(
+        (child) => child.getAttribute("data-key") && {
+          key: child.getAttribute("data-key"),
+          child
         }
-      },
-      /* @__PURE__ */ React123.createElement(PieChart_default, null)
-    )
-  ), /* @__PURE__ */ React123.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ React123.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ React123.createElement(
-    "div",
-    {
-      className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
-    },
-    /* @__PURE__ */ React123.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ React123.createElement(
-      ProfitAndLossRow,
-      {
-        key: line_item.display_name,
-        lineItem: line_item,
-        depth: depth + 1,
-        maxDepth,
-        direction
-      }
-    )))
-  ));
+      );
+      const newChildrenKeys = [];
+      const newChildrenArray = currentChildren.filter((el) => {
+        if (el && el.key) {
+          newChildrenKeys.push(el.key);
+        }
+        return el && el.key && !prevChildrenArray.includes(el.key);
+      });
+      newChildrenArray.forEach((row, index) => {
+        const rowKey = row && row.key;
+        if (rowKey && !row.child.classList.contains("Layer__table-empty-row")) {
+          row.child.classList.add("Layer__table-row--anim-starting-state");
+          setTimeout(() => {
+            row.child.classList.add("Layer__table-row--anim-complete-state");
+            row.child.classList.remove("Layer__table-row--anim-starting-state");
+          }, 15 * index);
+        }
+      });
+      prevChildrenRef.current = newChildrenKeys;
+    }
+  }, [children]);
+  const tableWrapperClassNames = classNames47(
+    "Layer__table-wrapper",
+    bottomSpacing && "Layer__table-wrapper--bottom-spacing"
+  );
+  const tableClassNames = classNames47(
+    "Layer__table",
+    componentName && `Layer__${componentName}__table`,
+    borderCollapse && `Layer__table__${borderCollapse}-rows`
+  );
+  return /* @__PURE__ */ React128.createElement("div", { className: tableWrapperClassNames }, /* @__PURE__ */ React128.createElement("table", { className: tableClassNames, ref: tableRef }, children));
 };
 
 // src/components/ProfitAndLossTable/empty_profit_and_loss_report.ts
@@ -10959,10 +11186,9 @@ var empty_profit_and_loss_report_default = {
   fully_categorized: false
 };
 
-// src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-import classNames44 from "classnames";
-var ProfitAndLossTable = ({
-  lockExpanded,
+// src/components/ProfitAndLossTable/ProfitAndLossTableComponent.tsx
+import classNames48 from "classnames";
+var ProfitAndLossTableComponent = ({
   asContainer,
   stringOverrides
 }) => {
@@ -10970,135 +11196,134 @@ var ProfitAndLossTable = ({
     data: actualData,
     isLoading,
     setSidebarScope
-  } = useContext16(ProfitAndLoss.Context);
+  } = useContext17(ProfitAndLoss.Context);
+  const { isOpen, setIsOpen } = useTableExpandRow();
+  useEffect27(() => {
+    setIsOpen(["income", "cost_of_goods_sold", "expenses"]);
+  }, []);
   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__ */ React124.createElement(
+    return /* @__PURE__ */ React129.createElement(
       "div",
       {
-        className: classNames44(
+        className: classNames48(
           "Layer__profit-and-loss-table__loader-container",
           asContainer && "Layer__component-container"
         )
       },
-      /* @__PURE__ */ React124.createElement(Loader2, null)
+      /* @__PURE__ */ React129.createElement(Loader2, null)
     );
   }
-  return /* @__PURE__ */ React124.createElement(React124.Fragment, null, /* @__PURE__ */ React124.createElement(
-    "div",
-    {
-      className: classNames44(
-        "Layer__profit-and-loss-table Layer__profit-and-loss-table--main",
-        asContainer && "Layer__component-container"
-      )
-    },
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: data.income,
-        direction: "CREDIT" /* CREDIT */,
-        lockExpanded,
-        scope: "revenue",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: data.cost_of_goods_sold,
-        direction: "DEBIT" /* DEBIT */,
-        lockExpanded,
-        scope: "expenses",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: {
-          value: data.gross_profit,
-          display_name: stringOverrides?.grossProfitLabel || "Gross Profit"
-        },
-        variant: "summation",
-        direction: "CREDIT" /* CREDIT */,
-        lockExpanded,
-        scope: "revenue",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: data.expenses,
-        direction: "DEBIT" /* DEBIT */,
-        lockExpanded,
-        scope: "expenses",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: {
-          value: data.profit_before_taxes,
-          display_name: stringOverrides?.profitBeforeTaxesLabel || "Profit Before Taxes"
-        },
-        variant: "summation",
-        direction: "CREDIT" /* CREDIT */,
-        lockExpanded,
-        scope: "revenue",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: data.taxes,
-        direction: "DEBIT" /* DEBIT */,
-        lockExpanded,
-        scope: "expenses",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
+  const renderLineItem = (lineItem, depth, rowKey, rowIndex, scope, setSidebarScope2, variant) => {
+    const expandable = !!lineItem.line_items && lineItem.line_items.length > 0;
+    const expanded = expandable ? isOpen(rowKey) : true;
+    return /* @__PURE__ */ React129.createElement(React129.Fragment, { key: rowKey + "-" + rowIndex }, /* @__PURE__ */ React129.createElement(
+      TableRow,
       {
-        lineItem: {
-          value: data.net_profit,
-          display_name: stringOverrides?.netProfitLabel || "Net Profit"
+        rowKey: rowKey + "-" + rowIndex,
+        expandable,
+        isExpanded: expanded,
+        depth,
+        variant: variant ? variant : expandable ? "expandable" : "default",
+        handleExpand: () => setIsOpen(rowKey)
+      },
+      /* @__PURE__ */ React129.createElement(
+        TableCell,
+        {
+          primary: true,
+          withExpandIcon: expandable,
+          fullWidth: !!setSidebarScope2
         },
-        variant: "summation",
-        direction: "CREDIT" /* CREDIT */,
-        lockExpanded
-      }
-    )
-  ), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ React124.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ React124.createElement(
-    ProfitAndLossRow,
+        lineItem.display_name,
+        " ",
+        setSidebarScope2 && /* @__PURE__ */ React129.createElement(
+          "span",
+          {
+            className: "Layer__profit-and-loss-row__detailed-chart-btn",
+            onClick: (e) => {
+              e.stopPropagation();
+              setSidebarScope2 && setSidebarScope2(scope ?? "expenses");
+            }
+          },
+          /* @__PURE__ */ React129.createElement(PieChart_default, null)
+        )
+      ),
+      /* @__PURE__ */ React129.createElement(TableCell, { isCurrency: true, primary: true }, lineItem.value)
+    ), expanded && lineItem.line_items ? lineItem.line_items.map(
+      (child, i) => renderLineItem(
+        child,
+        depth + 1,
+        child.display_name + "-" + rowIndex,
+        i
+      )
+    ) : null);
+  };
+  return /* @__PURE__ */ React129.createElement(Table, { borderCollapse: "collapse", bottomSpacing: false }, /* @__PURE__ */ React129.createElement(TableBody, null, renderLineItem(
+    data.income,
+    0,
+    "income",
+    0,
+    "revenue",
+    setSidebarScope
+  ), renderLineItem(
+    data.cost_of_goods_sold,
+    0,
+    "cost_of_goods_sold",
+    1,
+    "expenses",
+    setSidebarScope
+  ), renderLineItem(
     {
-      lineItem: data.other_outflows,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded
-    }
-  ), /* @__PURE__ */ React124.createElement(
-    ProfitAndLossRow,
+      value: data.gross_profit,
+      display_name: stringOverrides?.grossProfitLabel || "Gross Profit"
+    },
+    0,
+    "gross_profit",
+    2,
+    "revenue",
+    setSidebarScope,
+    "summation"
+  ), renderLineItem(
+    data.expenses,
+    0,
+    "expenses",
+    3,
+    "expenses",
+    setSidebarScope
+  ), renderLineItem(
     {
-      lineItem: data.personal_expenses,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded
-    }
-  )) : null);
+      value: data.profit_before_taxes,
+      display_name: stringOverrides?.profitBeforeTaxesLabel || "Profit Before Taxes"
+    },
+    0,
+    "profit_before_taxes",
+    4,
+    "revenue",
+    setSidebarScope,
+    "summation"
+  ), renderLineItem(data.taxes, 0, "taxes", 5, "expenses", setSidebarScope), renderLineItem(
+    {
+      value: data.net_profit,
+      display_name: stringOverrides?.netProfitLabel || "Net Profit"
+    },
+    0,
+    "net_profit",
+    5,
+    void 0,
+    void 0,
+    "summation"
+  ), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ React129.createElement(React129.Fragment, null, renderLineItem(data.other_outflows, 0, "other_outflows", 6), renderLineItem(data.personal_expenses, 0, "personal_expenses", 7)) : null));
+};
+
+// src/components/ProfitAndLossTable/ProfitAndLossTableWithProvider.tsx
+var ProfitAndLossTableWithProvider = (props) => {
+  return /* @__PURE__ */ React130.createElement(TableProvider, null, /* @__PURE__ */ React130.createElement(ProfitAndLossTableComponent, { ...props }));
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
 import { endOfMonth as endOfMonth8, startOfMonth as startOfMonth10 } from "date-fns";
-var PNLContext = createContext6({
+var PNLContext = createContext7({
   data: void 0,
   filteredDataRevenue: [],
   filteredTotalRevenue: void 0,
@@ -11123,81 +11348,41 @@ var PNLContext = createContext6({
   setFilterTypes: () => {
   },
   filters: {
-    expenses: void 0,
-    revenue: void 0
-  }
-});
-var ProfitAndLoss = ({
-  children,
-  tagFilter,
-  reportingBasis,
-  asContainer = true
-}) => {
-  const contextData = useProfitAndLoss({ tagFilter, reportingBasis });
-  return /* @__PURE__ */ React125.createElement(PNLContext.Provider, { value: contextData }, asContainer ? /* @__PURE__ */ React125.createElement(Container, { name: "profit-and-loss" }, children) : children);
-};
-ProfitAndLoss.Chart = ProfitAndLossChart;
-ProfitAndLoss.Context = PNLContext;
-ProfitAndLoss.DatePicker = ProfitAndLossDatePicker;
-ProfitAndLoss.Summaries = ProfitAndLossSummaries;
-ProfitAndLoss.Table = ProfitAndLossTable;
-ProfitAndLoss.DetailedCharts = ProfitAndLossDetailedCharts;
-
-// src/components/BalanceSheet/BalanceSheet.tsx
-import React138, { useEffect as useEffect30, useState as useState35 } from "react";
-
-// src/contexts/BalanceSheetContext/BalanceSheetContext.tsx
-import { createContext as createContext7 } from "react";
-var BalanceSheetContext = createContext7({
-  data: void 0,
-  isLoading: false,
-  error: void 0,
-  refetch: () => {
-  }
-});
-
-// src/contexts/TableContext/TableContext.tsx
-import React126, { createContext as createContext8, useState as useState33 } from "react";
-var defaultValue = {
-  expandedRows: [],
-  setExpandedRows: () => {
-  },
-  expandAllRows: () => {
-  },
-  expandedAllRows: false,
-  setExpandedAllRows: () => {
-  }
-};
-var TableContext = createContext8(defaultValue);
-var TableProvider = ({ children }) => {
-  const [expandedRows, setExpandedRowsState] = useState33([]);
-  const [expandedAllRows, setExpandedAllRows] = useState33(false);
-  const toggleRow = (rowKey) => {
-    setExpandedRowsState((prevRows) => {
-      const rows = [...prevRows];
-      if (rows.includes(rowKey)) {
-        rows.splice(rows.indexOf(rowKey), 1);
-      } else {
-        rows.push(rowKey);
-      }
-      return rows;
-    });
-  };
-  const expandAllRows = (rowKeys) => {
-    setExpandedRowsState(rowKeys);
-  };
-  const contextValue = {
-    expandedRows,
-    setExpandedRows: toggleRow,
-    expandAllRows,
-    expandedAllRows,
-    setExpandedAllRows
-  };
-  return /* @__PURE__ */ React126.createElement(TableContext.Provider, { value: contextValue }, children);
+    expenses: void 0,
+    revenue: void 0
+  }
+});
+var ProfitAndLoss = ({
+  children,
+  tagFilter,
+  reportingBasis,
+  asContainer = true
+}) => {
+  const contextData = useProfitAndLoss({ tagFilter, reportingBasis });
+  return /* @__PURE__ */ React131.createElement(PNLContext.Provider, { value: contextData }, asContainer ? /* @__PURE__ */ React131.createElement(Container, { name: "profit-and-loss" }, children) : children);
 };
+ProfitAndLoss.Chart = ProfitAndLossChart;
+ProfitAndLoss.Context = PNLContext;
+ProfitAndLoss.DatePicker = ProfitAndLossDatePicker;
+ProfitAndLoss.Summaries = ProfitAndLossSummaries;
+ProfitAndLoss.Table = ProfitAndLossTableWithProvider;
+ProfitAndLoss.DetailedCharts = ProfitAndLossDetailedCharts;
+
+// src/components/BalanceSheet/BalanceSheet.tsx
+import React138, { useEffect as useEffect31, useState as useState34 } from "react";
+
+// src/contexts/BalanceSheetContext/BalanceSheetContext.tsx
+import { createContext as createContext8 } from "react";
+var BalanceSheetContext = createContext8({
+  data: void 0,
+  isLoading: false,
+  error: void 0,
+  refetch: () => {
+  }
+});
 
 // src/hooks/useBalanceSheet/useBalanceSheet.tsx
-import { useEffect as useEffect26 } from "react";
+import { useEffect as useEffect28 } from "react";
 import { format as format3, startOfDay } from "date-fns";
 import useSWR5 from "swr";
 var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
@@ -11216,12 +11401,12 @@ var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
   const refetch = () => {
     mutate();
   };
-  useEffect26(() => {
+  useEffect28(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("BALANCE_SHEET" /* BALANCE_SHEET */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect26(() => {
+  useEffect28(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -11230,12 +11415,12 @@ var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
 };
 
 // src/components/BalanceSheetDatePicker/BalanceSheetDatePicker.tsx
-import React127 from "react";
+import React132 from "react";
 var BalanceSheetDatePicker = ({
   effectiveDate,
   setEffectiveDate
 }) => {
-  return /* @__PURE__ */ React127.createElement(React127.Fragment, null, /* @__PURE__ */ React127.createElement(
+  return /* @__PURE__ */ React132.createElement(React132.Fragment, null, /* @__PURE__ */ React132.createElement(
     DatePicker,
     {
       selected: effectiveDate,
@@ -11246,181 +11431,14 @@ var BalanceSheetDatePicker = ({
 };
 
 // src/components/BalanceSheetExpandAllButton/BalanceSheetExpandAllButton.tsx
-import React128 from "react";
-
-// src/hooks/useTableExpandRow/useTableExpandRow.tsx
-import { useContext as useContext17 } from "react";
-var useTableExpandRow = () => {
-  const {
-    expandedAllRows,
-    setExpandedAllRows,
-    expandAllRows,
-    expandedRows,
-    setExpandedRows
-  } = useContext17(TableContext);
-  const toggleAllRows = () => {
-    if (expandedAllRows) {
-      setIsOpen([]);
-      return setExpandedAllRows(false);
-    } else {
-      return setExpandedAllRows(true);
-    }
-  };
-  const setIsOpen = (rowKey, withoutAllRowsUpdate) => {
-    if (!withoutAllRowsUpdate && expandedAllRows) {
-      setExpandedAllRows(false);
-    }
-    if (Array.isArray(rowKey)) {
-      return expandAllRows(rowKey);
-    }
-    return setExpandedRows(rowKey);
-  };
-  const isOpen = (rowKey) => expandedRows.includes(rowKey);
-  return {
-    isOpen,
-    setIsOpen,
-    expandedAllRows,
-    toggleAllRows
-  };
-};
-
-// src/components/BalanceSheetExpandAllButton/BalanceSheetExpandAllButton.tsx
+import React133 from "react";
 var BalanceSheetExpandAllButton = () => {
   const { expandedAllRows, toggleAllRows } = useTableExpandRow();
-  return /* @__PURE__ */ React128.createElement(Button, { onClick: () => toggleAllRows(), variant: "secondary" /* secondary */ }, !expandedAllRows ? "Expand all rows" : "Collapse all rows");
-};
-
-// src/components/BalanceSheetTable/BalanceSheetTable.tsx
-import React134, { useEffect as useEffect28 } from "react";
-
-// src/components/TableBody/TableBody.tsx
-import React129 from "react";
-var TableBody = ({ children }) => {
-  return /* @__PURE__ */ React129.createElement("tbody", { className: "Layer__table-body" }, children);
-};
-
-// src/components/TableCell/TableCell.tsx
-import React130 from "react";
-import classNames45 from "classnames";
-var TableCell = ({
-  children,
-  isHeaderCell,
-  isCurrency,
-  primary,
-  withExpandIcon = false
-}) => {
-  const amount = typeof children === "number" ? children : 0;
-  const isPositive = amount >= 0;
-  const amountString = centsToDollars(Math.abs(amount));
-  const cellClassNames = classNames45(
-    "Layer__table-cell",
-    (primary || isHeaderCell) && "Layer__table-cell--primary",
-    isCurrency && "Layer__table-cell-amount",
-    isCurrency && isPositive && "Layer__table-cell-amount--positive",
-    isCurrency && !isPositive && "Layer__table-cell-amount--negative"
-  );
-  if (isHeaderCell) {
-    return /* @__PURE__ */ React130.createElement("th", { className: cellClassNames }, /* @__PURE__ */ React130.createElement("span", { className: "Layer__table-cell-content" }, children));
-  }
-  return /* @__PURE__ */ React130.createElement("td", { className: cellClassNames }, /* @__PURE__ */ React130.createElement("span", { className: "Layer__table-cell-content" }, withExpandIcon && /* @__PURE__ */ React130.createElement(
-    ChevronDownFill_default,
-    {
-      className: "Layer__table-row--expand-icon",
-      size: 16
-    }
-  ), isCurrency ? amountString : children, " "));
-};
-
-// src/components/TableHead/TableHead.tsx
-import React131 from "react";
-var TableHead = ({ children }) => {
-  return /* @__PURE__ */ React131.createElement("thead", { className: "Layer__table-header" }, children);
-};
-
-// src/components/TableRow/TableRow.tsx
-import React132 from "react";
-import classNames46 from "classnames";
-var TableRow = ({
-  rowKey,
-  children,
-  depth = 0,
-  expandable = false,
-  isExpanded = false,
-  handleExpand,
-  variant = expandable ? "expandable" : "default",
-  withDivider,
-  withDividerPosition = "top",
-  isHeadRow = false
-}) => {
-  const toggleExpanded = () => {
-    if (variant === "summation" || !expandable)
-      return;
-    handleExpand && handleExpand();
-  };
-  const rowClassNames = classNames46([
-    "Layer__table-row",
-    !isHeadRow && `Layer__table-row--depth-${depth}`,
-    !isHeadRow && `Layer__table-row--variant-${variant}`,
-    !isHeadRow && expandable && (isExpanded ? "Layer__table-row--expanded" : "Layer__table-row--collapsed")
-  ]);
-  return /* @__PURE__ */ React132.createElement(React132.Fragment, null, withDivider && withDividerPosition === "top" && /* @__PURE__ */ React132.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React132.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })), /* @__PURE__ */ React132.createElement("tr", { "data-key": rowKey, className: rowClassNames, onClick: toggleExpanded }, children), withDivider && withDividerPosition === "bottom" && /* @__PURE__ */ React132.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React132.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })));
-};
-
-// src/components/Table/Table.tsx
-import React133, { useEffect as useEffect27, useRef as useRef15 } from "react";
-import classNames47 from "classnames";
-var Table = ({
-  componentName,
-  children,
-  borderCollapse = "separate",
-  bottomSpacing = true
-}) => {
-  const tableRef = useRef15(null);
-  const prevChildrenRef = useRef15([]);
-  useEffect27(() => {
-    if (tableRef.current) {
-      const tbody = tableRef.current.querySelector("tbody");
-      const rows = tbody ? Array.from(tbody.querySelectorAll("tr")) : [];
-      const prevChildrenArray = prevChildrenRef.current;
-      const currentChildren = rows.map(
-        (child) => child.getAttribute("data-key") && {
-          key: child.getAttribute("data-key"),
-          child
-        }
-      );
-      const newChildrenKeys = [];
-      const newChildrenArray = currentChildren.filter((el) => {
-        if (el && el.key) {
-          newChildrenKeys.push(el.key);
-        }
-        return el && el.key && !prevChildrenArray.includes(el.key);
-      });
-      newChildrenArray.forEach((row, index) => {
-        const rowKey = row && row.key;
-        if (rowKey && !row.child.classList.contains("Layer__table-empty-row")) {
-          row.child.classList.add("Layer__table-row--anim-starting-state");
-          setTimeout(() => {
-            row.child.classList.add("Layer__table-row--anim-complete-state");
-            row.child.classList.remove("Layer__table-row--anim-starting-state");
-          }, 15 * index);
-        }
-      });
-      prevChildrenRef.current = newChildrenKeys;
-    }
-  }, [children]);
-  const tableWrapperClassNames = classNames47(
-    "Layer__table-wrapper",
-    bottomSpacing && "Layer__table-wrapper--bottom-spacing"
-  );
-  const tableClassNames = classNames47(
-    "Layer__table",
-    componentName && `Layer__${componentName}__table`,
-    borderCollapse && `Layer__table__${borderCollapse}-rows`
-  );
-  return /* @__PURE__ */ React133.createElement("div", { className: tableWrapperClassNames }, /* @__PURE__ */ React133.createElement("table", { className: tableClassNames, ref: tableRef }, children));
+  return /* @__PURE__ */ React133.createElement(Button, { onClick: () => toggleAllRows(), variant: "secondary" /* secondary */ }, !expandedAllRows ? "Expand all rows" : "Collapse all rows");
 };
 
 // src/components/BalanceSheetTable/BalanceSheetTable.tsx
+import React134, { useEffect as useEffect29 } from "react";
 var BalanceSheetTable = ({
   data,
   config,
@@ -11428,12 +11446,12 @@ var BalanceSheetTable = ({
 }) => {
   const { isOpen, setIsOpen, expandedAllRows } = useTableExpandRow();
   const allRowKeys = [];
-  useEffect28(() => {
+  useEffect29(() => {
     if (expandedAllRows) {
       setIsOpen(allRowKeys, true);
     }
   }, [expandedAllRows]);
-  useEffect28(() => {
+  useEffect29(() => {
     setIsOpen(["assets"]);
   }, []);
   const renderLineItem = (lineItem, depth = 0, rowKey, rowIndex) => {
@@ -11498,8 +11516,8 @@ var ViewHeader = ({ title, controls }) => {
 };
 
 // src/components/Panel/Panel.tsx
-import React136, { useEffect as useEffect29, useState as useState34 } from "react";
-import classNames48 from "classnames";
+import React136, { useEffect as useEffect30, useState as useState33 } from "react";
+import classNames49 from "classnames";
 var Panel = ({
   children,
   className,
@@ -11509,20 +11527,20 @@ var Panel = ({
   parentRef,
   defaultSidebarHeight = false
 }) => {
-  const [sidebarHeight, setSidebarHeight] = useState34(0);
-  useEffect29(() => {
+  const [sidebarHeight, setSidebarHeight] = useState33(0);
+  useEffect30(() => {
     if (parentRef?.current?.offsetHeight) {
       setSidebarHeight(parentRef?.current?.offsetHeight - 1);
     }
   }, [parentRef?.current?.offsetHeight, sidebarIsOpen]);
-  const sidebarClass = classNames48(
+  const sidebarClass = classNames49(
     "Layer__panel__sidebar",
     defaultSidebarHeight && "Layer__panel__sidebar--default"
   );
   return /* @__PURE__ */ React136.createElement(
     "div",
     {
-      className: classNames48(
+      className: classNames49(
         "Layer__panel",
         className,
         sidebarIsOpen && "Layer__panel--open"
@@ -11543,7 +11561,7 @@ var Panel = ({
 };
 
 // src/components/View/View.tsx
-import classNames49 from "classnames";
+import classNames50 from "classnames";
 var View = ({
   title,
   children,
@@ -11555,7 +11573,7 @@ var View = ({
 }) => {
   const { theme } = useLayerContext();
   const styles = parseStylesFromThemeConfig(theme);
-  const viewClassNames = classNames49(
+  const viewClassNames = classNames50(
     "Layer__view",
     type === "panel" && "Layer__view--panel",
     viewClassName
@@ -11596,9 +11614,9 @@ var BalanceSheetView = ({
   asWidget = false,
   stringOverrides
 }) => {
-  const [effectiveDate, setEffectiveDate] = useState35(startOfDay2(/* @__PURE__ */ new Date()));
+  const [effectiveDate, setEffectiveDate] = useState34(startOfDay2(/* @__PURE__ */ new Date()));
   const { data, isLoading, refetch } = useBalanceSheet(effectiveDate);
-  useEffect30(() => {
+  useEffect31(() => {
     const d1 = effectiveDate && format4(startOfDay2(effectiveDate), "yyyy-MM-dd'T'HH:mm:ssXXX");
     const d2 = data?.effective_date && format4(
       startOfDay2(
@@ -11657,7 +11675,7 @@ var BalanceSheetView = ({
 };
 
 // src/components/StatementOfCashFlow/StatementOfCashFlow.tsx
-import React140, { useState as useState36 } from "react";
+import React140, { useState as useState35 } from "react";
 
 // src/contexts/StatementOfCashContext/StatementOfCashFlowContext.tsx
 import { createContext as createContext9 } from "react";
@@ -11670,7 +11688,7 @@ var StatementOfCashFlowContext = createContext9({
 });
 
 // src/hooks/useStatementOfCashFlow/useStatementOfCashFlow.tsx
-import { useEffect as useEffect31 } from "react";
+import { useEffect as useEffect32 } from "react";
 import { format as format5, startOfDay as startOfDay3 } from "date-fns";
 import useSWR6 from "swr";
 var useStatementOfCashFlow = (startDate = /* @__PURE__ */ new Date(), endDate = /* @__PURE__ */ new Date()) => {
@@ -11694,12 +11712,12 @@ var useStatementOfCashFlow = (startDate = /* @__PURE__ */ new Date(), endDate =
   const refetch = () => {
     mutate();
   };
-  useEffect31(() => {
+  useEffect32(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("STATEMENT_OF_CASH_FLOWS" /* STATEMENT_OF_CASH_FLOWS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect31(() => {
+  useEffect32(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -11815,10 +11833,10 @@ var StatementOfCashFlow = ({ stringOverrides }) => {
   return /* @__PURE__ */ React140.createElement(StatementOfCashFlowContext.Provider, { value: cashContextData }, /* @__PURE__ */ React140.createElement(StatementOfCashFlowView, { stringOverrides }));
 };
 var StatementOfCashFlowView = ({ stringOverrides }) => {
-  const [startDate, setStartDate] = useState36(
+  const [startDate, setStartDate] = useState35(
     startOfDay4(subWeeks(/* @__PURE__ */ new Date(), 4))
   );
-  const [endDate, setEndDate] = useState36(startOfDay4(/* @__PURE__ */ new Date()));
+  const [endDate, setEndDate] = useState35(startOfDay4(/* @__PURE__ */ new Date()));
   const { data, isLoading, refetch } = useStatementOfCashFlow(
     startDate,
     endDate
@@ -11860,7 +11878,7 @@ var StatementOfCashFlowView = ({ stringOverrides }) => {
 };
 
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
-import React155, { useContext as useContext25, useState as useState43 } from "react";
+import React155, { useContext as useContext25, useState as useState42 } from "react";
 
 // src/contexts/ChartOfAccountsContext/ChartOfAccountsContext.tsx
 import { createContext as createContext10 } from "react";
@@ -11919,7 +11937,7 @@ var LedgerAccountsContext = createContext11({
 });
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
-import { useEffect as useEffect32, useState as useState37 } from "react";
+import { useEffect as useEffect33, useState as useState36 } from "react";
 
 // src/components/ChartOfAccountsForm/constants.ts
 var LEDGER_ACCOUNT_TYPES = [
@@ -12216,13 +12234,13 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
     syncTimestamps,
     hasBeenTouched
   } = useLayerContext();
-  const [form, setForm] = useState37();
-  const [sendingForm, setSendingForm] = useState37(false);
-  const [apiError, setApiError] = useState37(void 0);
-  const [startDate, setStartDate] = useState37(
+  const [form, setForm] = useState36();
+  const [sendingForm, setSendingForm] = useState36(false);
+  const [apiError, setApiError] = useState36(void 0);
+  const [startDate, setStartDate] = useState36(
     initialStartDate ?? startOfMonth12(Date.now())
   );
-  const [endDate, setEndDate] = useState37(
+  const [endDate, setEndDate] = useState36(
     initialEndDate ?? endOfMonth10(Date.now())
   );
   const queryKey = businessId && auth?.access_token && `chart-of-accounts-${businessId}-${startDate?.valueOf()}-${endDate?.valueOf()}`;
@@ -12403,12 +12421,12 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
     newEndDate && setEndDate(newEndDate);
   };
   const refetch = () => mutate();
-  useEffect32(() => {
+  useEffect33(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("CHART_OF_ACCOUNTS" /* CHART_OF_ACCOUNTS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -12434,12 +12452,12 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
 };
 
 // src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
-import { useEffect as useEffect33, useState as useState38 } from "react";
+import { useEffect as useEffect34, useState as useState37 } from "react";
 import useSWR8 from "swr";
 var useLedgerAccounts = () => {
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
-  const [accountId, setAccountId] = useState38();
-  const [selectedEntryId, setSelectedEntryId] = useState38();
+  const [accountId, setAccountId] = useState37();
+  const [selectedEntryId, setSelectedEntryId] = useState37();
   const queryKey = businessId && accountId && auth?.access_token && `ledger-accounts-lines-${businessId}-${accountId}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR8(
     queryKey,
@@ -12464,12 +12482,12 @@ var useLedgerAccounts = () => {
     setSelectedEntryId(void 0);
     mutateEntryData();
   };
-  useEffect33(() => {
+  useEffect34(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("LEDGER_ACCOUNTS" /* LEDGER_ACCOUNTS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -12493,7 +12511,7 @@ var useLedgerAccounts = () => {
 };
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
-import React147, { useContext as useContext21, useState as useState40 } from "react";
+import React147, { useContext as useContext21, useState as useState39 } from "react";
 
 // src/components/ChartOfAccountsDatePicker/ChartOfAccountsDatePicker.tsx
 import React141, { useContext as useContext18 } from "react";
@@ -12518,7 +12536,7 @@ var ChartOfAccountsDatePicker = () => {
 };
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-import React143, { useContext as useContext19, useEffect as useEffect34, useState as useState39 } from "react";
+import React143, { useContext as useContext19, useEffect as useEffect35, useState as useState38 } from "react";
 
 // src/icons/Edit2.tsx
 import * as React142 from "react";
@@ -12545,7 +12563,7 @@ var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React142.createElement(
 var Edit2_default = Edit2;
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-import classNames50 from "classnames";
+import classNames51 from "classnames";
 var INDENTATION = 24;
 var EXPANDED_STYLE2 = {
   height: 52,
@@ -12579,7 +12597,7 @@ var ChartOfAccountsRow = ({
   const { form, editAccount } = useContext19(ChartOfAccountsContext);
   const { setAccountId } = useContext19(LedgerAccountsContext);
   const baseStyle = view === "desktop" ? EXPANDED_STYLE2 : EXPANDED_MOBILE_STYLE;
-  const [isOpen, setIsOpen] = useState39(defaultOpen);
+  const [isOpen, setIsOpen] = useState38(defaultOpen);
   const style = expanded ? {
     ...baseStyle,
     transitionDelay: `${15 * index}ms`
@@ -12587,20 +12605,20 @@ var ChartOfAccountsRow = ({
     ...COLLAPSED_STYLE2,
     transitionDelay: `${acountsLength - 15 * index}ms`
   };
-  const [showComponent, setShowComponent] = useState39(false);
-  const [prevExpandedAll, setPrevExpandedAll] = useState39(expandAll);
-  useEffect34(() => {
+  const [showComponent, setShowComponent] = useState38(false);
+  const [prevExpandedAll, setPrevExpandedAll] = useState38(expandAll);
+  useEffect35(() => {
     const timeoutId = setTimeout(() => {
       setShowComponent(true);
     }, cumulativeIndex * 50);
     return () => clearTimeout(timeoutId);
   }, []);
-  useEffect34(() => {
+  useEffect35(() => {
     if (prevExpandedAll !== expandAll && expandAll) {
       setIsOpen(expandAll === "collapsed" ? false : true);
     }
   }, [expandAll]);
-  const baseClass = classNames50(
+  const baseClass = classNames51(
     "Layer__table-row",
     isOpen ? "Layer__table-row--expanded" : "Layer__table-row--collapsed",
     !expanded && "Layer__table-row--hidden",
@@ -12608,11 +12626,11 @@ var ChartOfAccountsRow = ({
     form?.accountId === account.id && "Layer__table-row--active",
     !showComponent && "Layer__table-row--anim-starting-state"
   );
-  const desktopRowClass = classNames50(
+  const desktopRowClass = classNames51(
     baseClass,
     "Layer__chart-of-accounts__row---desktop"
   );
-  const mobileRowClass = classNames50(
+  const mobileRowClass = classNames51(
     baseClass,
     "Layer__chart-of-accounts__row---mobile"
   );
@@ -12953,7 +12971,7 @@ var ChartOfAccountsTable = ({
   stringOverrides
 }) => {
   const { data, isLoading, addAccount, error, isValidating, refetch, form } = useContext21(ChartOfAccountsContext);
-  const [expandAll, setExpandAll] = useState40();
+  const [expandAll, setExpandAll] = useState39();
   let cumulativeIndex = 0;
   const accountsLength = data?.accounts.length ?? 0;
   return /* @__PURE__ */ React147.createElement(
@@ -13047,9 +13065,9 @@ var ChartOfAccountsTable = ({
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
 import React154, {
   useContext as useContext24,
-  useEffect as useEffect36,
+  useEffect as useEffect37,
   useMemo as useMemo15,
-  useState as useState42
+  useState as useState41
 } from "react";
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
@@ -13057,9 +13075,9 @@ import React152, { useContext as useContext22, useMemo as useMemo14 } from "reac
 
 // src/components/Card/Card.tsx
 import React148 from "react";
-import classNames51 from "classnames";
+import classNames52 from "classnames";
 var Card = ({ children, className }) => {
-  return /* @__PURE__ */ React148.createElement("div", { className: classNames51("Layer__card", className) }, children);
+  return /* @__PURE__ */ React148.createElement("div", { className: classNames52("Layer__card", className) }, children);
 };
 
 // src/components/DateTime/DateTime.tsx
@@ -13101,14 +13119,14 @@ var DateTime = ({
 
 // src/components/DetailsList/DetailsList.tsx
 import React150 from "react";
-import classNames52 from "classnames";
+import classNames53 from "classnames";
 var DetailsList = ({
   title,
   children,
   className,
   actions
 }) => {
-  return /* @__PURE__ */ React150.createElement("div", { className: classNames52("Layer__details-list", className) }, title && /* @__PURE__ */ React150.createElement(Header, null, /* @__PURE__ */ React150.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ React150.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ React150.createElement("ul", { className: "Layer__details-list__list" }, children));
+  return /* @__PURE__ */ React150.createElement("div", { className: classNames53("Layer__details-list", className) }, title && /* @__PURE__ */ React150.createElement(Header, null, /* @__PURE__ */ React150.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ React150.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ React150.createElement("ul", { className: "Layer__details-list__list" }, children));
 };
 
 // src/components/DetailsList/DetailsListItem.tsx
@@ -13240,8 +13258,8 @@ var LedgerAccountEntryDetails = ({ stringOverrides }) => {
 };
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
-import React153, { useContext as useContext23, useEffect as useEffect35, useState as useState41 } from "react";
-import classNames53 from "classnames";
+import React153, { useContext as useContext23, useEffect as useEffect36, useState as useState40 } from "react";
+import classNames54 from "classnames";
 import { parseISO as parseISO14, format as formatTime10 } from "date-fns";
 var LedgerAccountRow = ({
   row,
@@ -13250,8 +13268,8 @@ var LedgerAccountRow = ({
   view
 }) => {
   const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext23(LedgerAccountsContext);
-  const [showComponent, setShowComponent] = useState41(false);
-  useEffect35(() => {
+  const [showComponent, setShowComponent] = useState40(false);
+  useEffect36(() => {
     if (initialLoad) {
       const timeoutId = setTimeout(() => {
         setShowComponent(true);
@@ -13265,7 +13283,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ React153.createElement(
       "tr",
       {
-        className: classNames53(
+        className: classNames54(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -13298,7 +13316,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ React153.createElement(
       "tr",
       {
-        className: classNames53(
+        className: classNames54(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -13327,7 +13345,7 @@ var LedgerAccountRow = ({
   return /* @__PURE__ */ React153.createElement(
     "tr",
     {
-      className: classNames53(
+      className: classNames54(
         "Layer__table-row",
         row.entry_id === selectedEntryId && "Layer__table-row--active",
         initialLoad && "initial-load",
@@ -13353,15 +13371,15 @@ var LedgerAccountRow = ({
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-import classNames54 from "classnames";
+import classNames55 from "classnames";
 var LedgerAccount = ({
   containerRef,
   pageSize = 15,
   view,
   stringOverrides
 }) => {
-  const [currentPage, setCurrentPage] = useState42(1);
-  const [initialLoad, setInitialLoad] = useState42(true);
+  const [currentPage, setCurrentPage] = useState41(1);
+  const [initialLoad, setInitialLoad] = useState41(true);
   const { data: accountData } = useContext24(ChartOfAccountsContext);
   const {
     data: rawData,
@@ -13374,7 +13392,7 @@ var LedgerAccount = ({
     closeSelectedEntry,
     refetch
   } = useContext24(LedgerAccountsContext);
-  useEffect36(() => {
+  useEffect37(() => {
     if (!isLoading) {
       const timeoutLoad = setTimeout(() => {
         setInitialLoad(false);
@@ -13382,7 +13400,7 @@ var LedgerAccount = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [isLoading]);
-  const baseClassName = classNames54(
+  const baseClassName = classNames55(
     "Layer__ledger-account__index",
     accountId && "open"
   );
@@ -13488,7 +13506,7 @@ var ChartOfAccountsContent = ({
   stringOverrides
 }) => {
   const { accountId } = useContext25(LedgerAccountsContext);
-  const [view, setView] = useState43("desktop");
+  const [view, setView] = useState42("desktop");
   const containerRef = useElementSize((_a, _b, { width }) => {
     if (width) {
       if (width >= BREAKPOINTS.TABLET && view !== "desktop") {
@@ -13514,7 +13532,7 @@ var ChartOfAccountsContent = ({
 };
 
 // src/components/Journal/Journal.tsx
-import React162, { useState as useState47 } from "react";
+import React162, { useState as useState46 } from "react";
 
 // src/contexts/JournalContext/JournalContext.tsx
 import { createContext as createContext12 } from "react";
@@ -13551,7 +13569,7 @@ var JournalContext = createContext12({
 });
 
 // src/hooks/useJournal/useJournal.tsx
-import { useEffect as useEffect37, useState as useState44 } from "react";
+import { useEffect as useEffect38, useState as useState43 } from "react";
 
 // src/utils/journal.ts
 var getAccountIdentifierPayload = (journalLineItem) => {
@@ -13582,11 +13600,11 @@ var useJournal = () => {
     syncTimestamps,
     hasBeenTouched
   } = useLayerContext();
-  const [selectedEntryId, setSelectedEntryId] = useState44();
-  const [form, setForm] = useState44();
-  const [addingEntry, setAddingEntry] = useState44(false);
-  const [sendingForm, setSendingForm] = useState44(false);
-  const [apiError, setApiError] = useState44(void 0);
+  const [selectedEntryId, setSelectedEntryId] = useState43();
+  const [form, setForm] = useState43();
+  const [addingEntry, setAddingEntry] = useState43(false);
+  const [sendingForm, setSendingForm] = useState43(false);
+  const [apiError, setApiError] = useState43(void 0);
   const queryKey = businessId && auth?.access_token && `journal-lines-${businessId}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR9(
     queryKey,
@@ -13812,12 +13830,12 @@ var useJournal = () => {
       }
     });
   };
-  useEffect37(() => {
+  useEffect38(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("JOURNAL" /* JOURNAL */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect37(() => {
+  useEffect38(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -13848,11 +13866,11 @@ var useJournal = () => {
 };
 
 // src/components/JournalTable/JournalTable.tsx
-import React161, { useContext as useContext31, useMemo as useMemo17, useState as useState46 } from "react";
+import React161, { useContext as useContext31, useMemo as useMemo17, useState as useState45 } from "react";
 
 // src/components/JournalRow/JournalRow.tsx
-import React156, { useContext as useContext26, useEffect as useEffect38, useState as useState45 } from "react";
-import classNames55 from "classnames";
+import React156, { useContext as useContext26, useEffect as useEffect39, useState as useState44 } from "react";
+import classNames56 from "classnames";
 import { parseISO as parseISO15, format as formatTime11 } from "date-fns";
 var INDENTATION2 = 24;
 var EXPANDED_STYLE3 = {
@@ -13890,7 +13908,7 @@ var JournalRow = ({
   selectedEntries = false
 }) => {
   const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext26(JournalContext);
-  const [isOpen, setIsOpen] = useState45(index === 0 ? true : defaultOpen);
+  const [isOpen, setIsOpen] = useState44(index === 0 ? true : defaultOpen);
   const style = expanded ? {
     ...EXPANDED_STYLE3,
     transitionDelay: `${15 * index}ms`
@@ -13898,8 +13916,8 @@ var JournalRow = ({
     ...COLLAPSED_STYLE3,
     transitionDelay: `${lineItemsLength - 15 * index}ms`
   };
-  const [showComponent, setShowComponent] = useState45(false);
-  const baseClass = classNames55(
+  const [showComponent, setShowComponent] = useState44(false);
+  const baseClass = classNames56(
     "Layer__journal-table-row",
     rowId(row) === selectedEntryId && "Layer__table-row--active",
     initialLoad && "initial-load",
@@ -13907,7 +13925,7 @@ var JournalRow = ({
     showComponent ? "show" : "Layer__table-row--anim-starting-state",
     isOpen && "Layer__journal__table-row--expanded"
   );
-  const journalEntryLineClass = classNames55(
+  const journalEntryLineClass = classNames56(
     "Layer__journal-entry-table-row",
     selectedEntries && "Layer__table-row--active",
     initialLoad && "initial-load",
@@ -13916,7 +13934,7 @@ var JournalRow = ({
     "Layer__journal-line__table-row",
     !expanded && "Layer__table-row--hidden"
   );
-  useEffect38(() => {
+  useEffect39(() => {
     if (initialLoad) {
       const timeoutId = setTimeout(() => {
         setShowComponent(true);
@@ -14384,7 +14402,7 @@ var JournalTable = ({
   config,
   stringOverrides
 }) => {
-  const [currentPage, setCurrentPage] = useState46(1);
+  const [currentPage, setCurrentPage] = useState45(1);
   const {
     data: rawData,
     isLoading,
@@ -14457,7 +14475,7 @@ var JournalContent = ({
   config = JOURNAL_CONFIG,
   stringOverrides
 }) => {
-  const [view, setView] = useState47("desktop");
+  const [view, setView] = useState46("desktop");
   const containerRef = useElementSize((_a, _b, { width }) => {
     if (width) {
       if (width >= BREAKPOINTS.TABLET && view !== "desktop") {
@@ -14484,9 +14502,9 @@ var JournalContent = ({
 import React169, {
   createContext as createContext14,
   useContext as useContext36,
-  useEffect as useEffect42,
+  useEffect as useEffect43,
   useMemo as useMemo19,
-  useState as useState51
+  useState as useState50
 } from "react";
 
 // src/contexts/TasksContext/TasksContext.tsx
@@ -14503,10 +14521,10 @@ var TasksContext = createContext13({
 });
 
 // src/hooks/useTasks/useTasks.tsx
-import { useEffect as useEffect39, useState as useState48 } from "react";
+import { useEffect as useEffect40, useState as useState47 } from "react";
 import useSWR10 from "swr";
 var useTasks = () => {
-  const [loadedStatus, setLoadedStatus] = useState48("initial");
+  const [loadedStatus, setLoadedStatus] = useState47("initial");
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
   const queryKey = businessId && auth?.access_token && `tasks-${businessId}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR10(
@@ -14515,7 +14533,7 @@ var useTasks = () => {
       params: { businessId }
     })
   );
-  useEffect39(() => {
+  useEffect40(() => {
     if (isLoading && loadedStatus === "initial") {
       setLoadedStatus("loading");
     } else if (!isLoading && loadedStatus === "loading") {
@@ -14535,12 +14553,12 @@ var useTasks = () => {
       body: data2
     }).then(() => refetch());
   };
-  useEffect39(() => {
+  useEffect40(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("TASKS" /* TASKS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect39(() => {
+  useEffect40(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -14696,7 +14714,7 @@ var TasksHeader = ({
 };
 
 // src/components/TasksList/TasksList.tsx
-import React167, { useContext as useContext34, useMemo as useMemo18, useState as useState50 } from "react";
+import React167, { useContext as useContext34, useMemo as useMemo18, useState as useState49 } from "react";
 
 // src/icons/SmileIcon.tsx
 import * as React165 from "react";
@@ -14750,30 +14768,30 @@ var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React165.createElem
 var SmileIcon_default = SmileIcon;
 
 // src/components/TasksListItem/TasksListItem.tsx
-import React166, { useContext as useContext33, useEffect as useEffect40, useState as useState49 } from "react";
-import classNames56 from "classnames";
+import React166, { useContext as useContext33, useEffect as useEffect41, useState as useState48 } from "react";
+import classNames57 from "classnames";
 var TasksListItem = ({
   task,
   goToNextPageIfAllComplete,
   defaultOpen
 }) => {
-  const [isOpen, setIsOpen] = useState49(defaultOpen);
-  const [userResponse, setUserResponse] = useState49(task.user_response || "");
+  const [isOpen, setIsOpen] = useState48(defaultOpen);
+  const [userResponse, setUserResponse] = useState48(task.user_response || "");
   const { submitResponseToTask: submitResponseToTask2 } = useContext33(TasksContext);
-  const taskBodyClassName = classNames56(
+  const taskBodyClassName = classNames57(
     "Layer__tasks-list-item__body",
     isOpen && "Layer__tasks-list-item__body--expanded",
     isComplete(task.status) && "Layer__tasks-list-item--completed"
   );
-  const taskHeadClassName = classNames56(
+  const taskHeadClassName = classNames57(
     "Layer__tasks-list-item__head-info",
     isComplete(task.status) ? "Layer__tasks-list-item--completed" : "Layer__tasks-list-item--pending"
   );
-  const taskItemClassName = classNames56(
+  const taskItemClassName = classNames57(
     "Layer__tasks-list-item",
     isOpen && "Layer__tasks-list-item__expanded"
   );
-  useEffect40(() => {
+  useEffect41(() => {
     setIsOpen(defaultOpen);
   }, [defaultOpen]);
   return /* @__PURE__ */ React166.createElement("div", { className: "Layer__tasks-list-item-wrapper" }, /* @__PURE__ */ React166.createElement("div", { className: taskItemClassName }, /* @__PURE__ */ React166.createElement(
@@ -14830,7 +14848,7 @@ var TasksList = ({ pageSize = 10 }) => {
     tasks || [],
     pageSize
   ).findIndex((page) => page.some((task) => !isComplete(task.status)));
-  const [currentPage, setCurrentPage] = useState50(
+  const [currentPage, setCurrentPage] = useState49(
     firstPageWithIincompleteTasks === -1 ? 1 : firstPageWithIincompleteTasks + 1
   );
   const sortedTasks = useMemo18(() => {
@@ -14868,7 +14886,7 @@ var TasksList = ({ pageSize = 10 }) => {
 
 // src/components/TasksPending/TasksPending.tsx
 import React168, { useContext as useContext35 } from "react";
-import classNames57 from "classnames";
+import classNames58 from "classnames";
 import { format as format6 } from "date-fns";
 import { Cell as Cell4, Pie as Pie3, PieChart as PieChart4 } from "recharts";
 var TasksPending = () => {
@@ -14884,7 +14902,7 @@ var TasksPending = () => {
       value: data?.filter((task) => !isComplete(task.status)).length
     }
   ];
-  const taskStatusClassName = classNames57(
+  const taskStatusClassName = classNames58(
     completedTasks && completedTasks > 0 ? "Layer__tasks-pending-bar__status--done" : "Layer__tasks-pending-bar__status--pending"
   );
   return /* @__PURE__ */ React168.createElement("div", { className: "Layer__tasks-pending" }, /* @__PURE__ */ React168.createElement(Text, { size: "lg" /* lg */ }, format6(Date.now(), "MMMM")), /* @__PURE__ */ React168.createElement("div", { className: "Layer__tasks-pending-bar" }, /* @__PURE__ */ React168.createElement(Text, { size: "sm" /* sm */ }, /* @__PURE__ */ React168.createElement("span", { className: taskStatusClassName }, completedTasks), "/", data?.length, " done"), /* @__PURE__ */ React168.createElement(PieChart4, { width: 24, height: 24, className: "mini-chart" }, /* @__PURE__ */ React168.createElement(
@@ -14918,7 +14936,7 @@ var TasksPending = () => {
 };
 
 // src/components/Tasks/Tasks.tsx
-import classNames58 from "classnames";
+import classNames59 from "classnames";
 var UseTasksContext = createContext14({
   data: void 0,
   isLoading: void 0,
@@ -14971,10 +14989,10 @@ var TasksComponent = ({
     }
     return false;
   }, [data, isLoading]);
-  const [open, setOpen] = useState51(
+  const [open, setOpen] = useState50(
     defaultCollapsed || collapsedWhenComplete ? false : true
   );
-  useEffect42(() => {
+  useEffect43(() => {
     if (allComplete && open && collapsedWhenComplete && loadedStatus === "complete") {
       setOpen(false);
     }
@@ -14990,7 +15008,7 @@ var TasksComponent = ({
   ), /* @__PURE__ */ React169.createElement(
     "div",
     {
-      className: classNames58(
+      className: classNames59(
         "Layer__tasks__content",
         !open && "Layer__tasks__content--collapsed"
       )
@@ -15089,14 +15107,14 @@ var BookkeepingUpsellBar = ({
 };
 
 // src/views/BookkeepingOverview/BookkeepingOverview.tsx
-import React173, { useState as useState52 } from "react";
-import classNames59 from "classnames";
+import React173, { useState as useState51 } from "react";
+import classNames60 from "classnames";
 var BookkeepingOverview = ({
   title,
   // deprecated
   stringOverrides
 }) => {
-  const [pnlToggle, setPnlToggle] = useState52("expenses");
+  const [pnlToggle, setPnlToggle] = useState51("expenses");
   const [width] = useWindowSize();
   return /* @__PURE__ */ React173.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React173.createElement(TasksProvider, null, /* @__PURE__ */ React173.createElement(
     View,
@@ -15150,7 +15168,7 @@ var BookkeepingOverview = ({
     ), /* @__PURE__ */ React173.createElement(
       Container,
       {
-        name: classNames59(
+        name: classNames60(
           "bookkeeping-overview-profit-and-loss-chart",
           pnlToggle !== "revenue" && "bookkeeping-overview-profit-and-loss-chart--hidden"
         )
@@ -15166,7 +15184,7 @@ var BookkeepingOverview = ({
     ), /* @__PURE__ */ React173.createElement(
       Container,
       {
-        name: classNames59(
+        name: classNames60(
           "bookkeeping-overview-profit-and-loss-chart",
           pnlToggle !== "expenses" && "bookkeeping-overview-profit-and-loss-chart--hidden"
         )
@@ -15184,10 +15202,10 @@ var BookkeepingOverview = ({
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
-import React177, { useState as useState54 } from "react";
+import React177, { useState as useState53 } from "react";
 
 // src/components/TransactionToReviewCard/TransactionToReviewCard.tsx
-import React176, { useContext as useContext37, useEffect as useEffect43, useState as useState53 } from "react";
+import React176, { useContext as useContext37, useEffect as useEffect44, useState as useState52 } from "react";
 
 // src/components/BadgeLoader/BadgeLoader.tsx
 import React174 from "react";
@@ -15197,13 +15215,13 @@ var BadgeLoader = ({ children }) => {
 
 // src/components/NotificationCard/NotificationCard.tsx
 import React175 from "react";
-import classNames60 from "classnames";
+import classNames61 from "classnames";
 var NotificationCard = ({
   onClick,
   children,
   className
 }) => {
-  return /* @__PURE__ */ React175.createElement("div", { className: classNames60("Layer__notification-card", className) }, /* @__PURE__ */ React175.createElement("div", { className: "Layer__notification-card__main" }, children), /* @__PURE__ */ React175.createElement(
+  return /* @__PURE__ */ React175.createElement("div", { className: classNames61("Layer__notification-card", className) }, /* @__PURE__ */ React175.createElement("div", { className: "Layer__notification-card__main" }, children), /* @__PURE__ */ React175.createElement(
     IconButton,
     {
       icon: /* @__PURE__ */ React175.createElement(ChevronRight_default, null),
@@ -15221,14 +15239,14 @@ var TransactionToReviewCard = ({
 }) => {
   const { dateRange: contextDateRange } = useContext37(ProfitAndLoss.Context);
   const dateRange = usePnlDateRange ? contextDateRange : void 0;
-  const [toReview, setToReview] = useState53(0);
+  const [toReview, setToReview] = useState52(0);
   const { data, loaded, error, refetch } = useProfitAndLossLTM({
     currentDate: dateRange ? dateRange.startDate : startOfMonth14(/* @__PURE__ */ new Date())
   });
-  useEffect43(() => {
+  useEffect44(() => {
     checkTransactionsToReview();
   }, []);
-  useEffect43(() => {
+  useEffect44(() => {
     checkTransactionsToReview();
   }, [dateRange, loaded]);
   const checkTransactionsToReview = () => {
@@ -15282,7 +15300,7 @@ var TransactionToReviewCard = ({
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
-import classNames61 from "classnames";
+import classNames62 from "classnames";
 var AccountingOverview = ({
   title = "Accounting overview",
   enableOnboarding = false,
@@ -15291,7 +15309,7 @@ var AccountingOverview = ({
   chartColorsList,
   stringOverrides
 }) => {
-  const [pnlToggle, setPnlToggle] = useState54("expenses");
+  const [pnlToggle, setPnlToggle] = useState53("expenses");
   return /* @__PURE__ */ React177.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React177.createElement(View, { title, headerControls: /* @__PURE__ */ React177.createElement(ProfitAndLoss.DatePicker, null) }, enableOnboarding && /* @__PURE__ */ React177.createElement(
     Onboarding,
     {
@@ -15337,7 +15355,7 @@ var AccountingOverview = ({
   ), /* @__PURE__ */ React177.createElement(
     Container,
     {
-      name: classNames61(
+      name: classNames62(
         "accounting-overview-profit-and-loss-chart",
         pnlToggle !== "revenue" && "accounting-overview-profit-and-loss-chart--hidden"
       )
@@ -15354,7 +15372,7 @@ var AccountingOverview = ({
   ), /* @__PURE__ */ React177.createElement(
     Container,
     {
-      name: classNames61(
+      name: classNames62(
         "accounting-overview-profit-and-loss-chart",
         pnlToggle !== "expenses" && "accounting-overview-profit-and-loss-chart--hidden"
       )
@@ -15409,13 +15427,13 @@ var BankTransactionsWithLinkedAccounts = ({
 };
 
 // src/views/GeneralLedger/GeneralLedger.tsx
-import React179, { useState as useState55 } from "react";
+import React179, { useState as useState54 } from "react";
 var GeneralLedgerView = ({
   title,
   // deprecated
   stringOverrides
 }) => {
-  const [activeTab, setActiveTab] = useState55("chartOfAccounts");
+  const [activeTab, setActiveTab] = useState54("chartOfAccounts");
   return /* @__PURE__ */ React179.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React179.createElement(View, { title: stringOverrides?.title || title || "General Ledger" }, /* @__PURE__ */ React179.createElement(
     Toggle,
     {
@@ -15444,13 +15462,13 @@ var GeneralLedgerView = ({
 };
 
 // src/views/Reports/Reports.tsx
-import React180, { useContext as useContext38, useRef as useRef16, useState as useState56 } from "react";
+import React180, { useContext as useContext38, useRef as useRef16, useState as useState55 } from "react";
 var DownloadButton2 = ({
   stringOverrides
 }) => {
   const { dateRange } = useContext38(ProfitAndLoss.Context);
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [requestFailed, setRequestFailed] = useState56(false);
+  const [requestFailed, setRequestFailed] = useState55(false);
   const handleClick = async () => {
     const month = (dateRange.startDate.getMonth() + 1).toString();
     const year = dateRange.startDate.getFullYear().toString();
@@ -15517,7 +15535,7 @@ var Reports = ({
   enabledReports = ["profitAndLoss", "balanceSheet", "statementOfCashFlow"]
 }) => {
   const containerRef = useRef16(null);
-  const [activeTab, setActiveTab] = useState56(enabledReports[0]);
+  const [activeTab, setActiveTab] = useState55(enabledReports[0]);
   const options = getOptions(enabledReports);
   const defaultTitle = enabledReports.length > 1 ? "Reports" : options.find((option) => option.value = enabledReports[0])?.label;
   return /* @__PURE__ */ React180.createElement(View, { title: stringOverrides?.title || title || defaultTitle }, enabledReports.length > 1 && /* @__PURE__ */ React180.createElement("div", { className: "Layer__component Layer__header__actions" }, /* @__PURE__ */ React180.createElement(