@layerfi/components 0.1.12 → 0.1.14

package/dist/esm/index.js

@@ -780,7 +780,6 @@ var debounce = (fnc, timeout = 300) => {
     }, timeout);
   };
 };
-var convertToStableName = (name) => name.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, "").replace(/\W+/g, " ").split(/ |\B(?=[A-Z])/).map((word) => word.toLowerCase()).join("_");
 
 // src/components/BankTransactionListItem/BankTransactionListItem.tsx
 import React48, { useEffect as useEffect6, useRef as useRef11, useState as useState9 } from "react";
@@ -2210,6 +2209,7 @@ import React37 from "react";
 import ReactSelect, {
   components as components2
 } from "react-select";
+import classNames14 from "classnames";
 var DropdownIndicator2 = (props) => {
   return /* @__PURE__ */ React37.createElement(components2.DropdownIndicator, { ...props }, /* @__PURE__ */ React37.createElement(ChevronDownFill_default, null));
 };
@@ -2221,13 +2221,20 @@ var Select2 = ({
   value,
   onChange,
   disabled,
-  placeholder
+  placeholder,
+  isInvalid,
+  errorMessage
 }) => {
-  return /* @__PURE__ */ React37.createElement(
+  const baseClassName = classNames14(
+    "Layer__select",
+    isInvalid ? "Layer__select--error" : "",
+    className
+  );
+  return /* @__PURE__ */ React37.createElement(Tooltip, { disabled: !isInvalid || !errorMessage }, /* @__PURE__ */ React37.createElement(TooltipTrigger, { className: "Layer__input-tooltip" }, /* @__PURE__ */ React37.createElement(
     ReactSelect,
     {
       name,
-      className: `Layer__select ${className ?? ""}`,
+      className: baseClassName,
       classNamePrefix,
       placeholder: placeholder ?? "Select...",
       options,
@@ -2238,7 +2245,7 @@ var Select2 = ({
       components: { DropdownIndicator: DropdownIndicator2 },
       isDisabled: disabled
     }
-  );
+  )), /* @__PURE__ */ React37.createElement(TooltipContent, { className: "Layer__tooltip" }, errorMessage));
 };
 
 // src/components/MatchForm/MatchForm.tsx
@@ -2268,7 +2275,7 @@ var MatchBadge = ({
 };
 
 // src/components/MatchForm/MatchForm.tsx
-import classNames14 from "classnames";
+import classNames15 from "classnames";
 import { parseISO as parseISO4, format as formatTime3 } from "date-fns";
 var MatchForm = ({
   classNamePrefix,
@@ -2287,7 +2294,7 @@ var MatchForm = ({
       "div",
       {
         key: idx,
-        className: classNames14(
+        className: classNames15(
           `${classNamePrefix}__match-row`,
           match.id === selectedMatchId ? `${classNamePrefix}__match-row--selected` : ""
         ),
@@ -2346,12 +2353,12 @@ var MatchForm = ({
 
 // src/components/Textarea/Textarea.tsx
 import React40 from "react";
-import classNames15 from "classnames";
+import classNames16 from "classnames";
 var Textarea = ({
   className,
   ...props
 }) => {
-  const baseClassName = classNames15("Layer__textarea", className);
+  const baseClassName = classNames16("Layer__textarea", className);
   return /* @__PURE__ */ React40.createElement("textarea", { ...props, className: baseClassName });
 };
 
@@ -2360,7 +2367,7 @@ import React41, {
   useEffect as useEffect2,
   useState as useState5
 } from "react";
-import classNames16 from "classnames";
+import classNames17 from "classnames";
 var Toggle = ({
   name,
   options,
@@ -2377,7 +2384,7 @@ var Toggle = ({
     }
   });
   const selectedValue = selected || options[0].value;
-  const baseClassName = classNames16(
+  const baseClassName = classNames17(
     "Layer__toggle",
     `Layer__toggle--${size}`,
     initialized ? "Layer__toggle--initialized" : ""
@@ -2628,7 +2635,7 @@ var Notification = ({
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-import classNames17 from "classnames";
+import classNames18 from "classnames";
 var hasMatch = (bankTransaction) => {
   return Boolean(
     bankTransaction?.suggested_matches && bankTransaction?.suggested_matches?.length > 0 || bankTransaction?.match
@@ -2881,7 +2888,7 @@ var ExpandedBankTransactionRow = forwardRef2(
         /* @__PURE__ */ React44.createElement("div", { className: `${className}__content-panels` }, /* @__PURE__ */ React44.createElement(
           "div",
           {
-            className: classNames17(
+            className: classNames18(
               `${className}__match`,
               `${className}__content-panel`,
               purpose === "match" /* match */ ? `${className}__content-panel--active` : ""
@@ -2903,7 +2910,7 @@ var ExpandedBankTransactionRow = forwardRef2(
         ), /* @__PURE__ */ React44.createElement(
           "div",
           {
-            className: classNames17(
+            className: classNames18(
               `${className}__splits`,
               `${className}__content-panel`,
               purpose === "categorize" /* categorize */ ? `${className}__content-panel--active` : ""
@@ -3042,7 +3049,7 @@ var SplitTooltipDetails = ({
 };
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-import classNames18 from "classnames";
+import classNames19 from "classnames";
 import { parseISO as parseISO5, format as formatTime4 } from "date-fns";
 var isCredit = ({ direction }) => direction === "CREDIT" /* CREDIT */;
 var extractDescriptionForSplit = (category) => {
@@ -3141,7 +3148,7 @@ var BankTransactionRow = ({
   }
   const className = "Layer__bank-transaction-row";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = classNames18(
+  const rowClassName = classNames19(
     className,
     bankTransaction.recently_categorized && editable ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
@@ -3215,7 +3222,7 @@ var BankTransactionRow = ({
     /* @__PURE__ */ React46.createElement(
       "td",
       {
-        className: classNames18(
+        className: classNames19(
           "Layer__table-cell",
           "Layer__table-cell__category-col",
           `${className}__actions-cell`,
@@ -3370,7 +3377,7 @@ var Assignment = ({ bankTransaction }) => {
 };
 
 // src/components/BankTransactionListItem/BankTransactionListItem.tsx
-import classNames19 from "classnames";
+import classNames20 from "classnames";
 import { parseISO as parseISO7, format as formatTime6 } from "date-fns";
 var isCredit2 = ({ direction }) => direction === "CREDIT" /* CREDIT */;
 var BankTransactionListItem = ({
@@ -3429,7 +3436,7 @@ var BankTransactionListItem = ({
   }
   const className = "Layer__bank-transaction-list-item";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = classNames19(
+  const rowClassName = classNames20(
     className,
     bankTransaction.recently_categorized ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
@@ -3736,10 +3743,10 @@ var hslToHex = (hsl) => {
 };
 
 // src/components/Container/Container.tsx
-import classNames20 from "classnames";
+import classNames21 from "classnames";
 var Container = forwardRef3(
   ({ name, className, children, asWidget, elevated = false }, ref) => {
-    const baseClassName = classNames20(
+    const baseClassName = classNames21(
       "Layer__component Layer__component-container",
       `Layer__${name}`,
       elevated && "Layer__component--elevated",
@@ -3754,10 +3761,10 @@ var Container = forwardRef3(
 
 // src/components/Container/Header.tsx
 import React50, { forwardRef as forwardRef4 } from "react";
-import classNames21 from "classnames";
+import classNames22 from "classnames";
 var Header = forwardRef4(
   ({ className, children, style }, ref) => {
-    const baseClassName = classNames21("Layer__component-header", className);
+    const baseClassName = classNames22("Layer__component-header", className);
     return /* @__PURE__ */ React50.createElement("header", { ref, className: baseClassName, style }, children);
   }
 );
@@ -4308,7 +4315,7 @@ var useLinkedAccounts = () => {
   const exchangePublicToken = async (publicToken, metadata) => {
     await Layer.exchangePlaidPublicToken(apiUrl, auth?.access_token, {
       params: { businessId },
-      body: { public_token: publicToken, institution_id: metadata.institution }
+      body: { public_token: publicToken, institution: metadata.institution }
     });
     refetchAccounts();
   };
@@ -4467,7 +4474,7 @@ var MoreVertical_default = MoreVertical;
 
 // src/components/HoverMenu/HoverMenu.tsx
 import React60, { useEffect as useEffect9, useRef as useRef12, useState as useState12 } from "react";
-import classNames22 from "classnames";
+import classNames23 from "classnames";
 var HoverMenu = ({
   children,
   config,
@@ -4476,7 +4483,7 @@ var HoverMenu = ({
 }) => {
   const [openMenu, setOpenMenu] = useState12(false);
   const hoverMenuRef = useRef12(null);
-  const hoverMenuClassName = classNames22(
+  const hoverMenuClassName = classNames23(
     "Layer__hover-menu",
     openMenu && "Layer__hover-menu--open"
   );
@@ -4839,13 +4846,13 @@ var InstitutionIcon = ({ size = 18, ...props }) => /* @__PURE__ */ React62.creat
 var InstitutionIcon_default = InstitutionIcon;
 
 // src/components/LinkedAccountThumb/LinkedAccountThumb.tsx
-import classNames23 from "classnames";
+import classNames24 from "classnames";
 var AccountNumber = ({ accountNumber }) => /* @__PURE__ */ React63.createElement("div", { className: "account-number" }, /* @__PURE__ */ React63.createElement(Text, { size: "sm" }, "\u2022\u2022\u2022 ", accountNumber));
 var LinkedAccountThumb = ({
   account,
   asWidget
 }) => {
-  const linkedAccountThumbClassName = classNames23(
+  const linkedAccountThumbClassName = classNames24(
     "Layer__linked-account-thumb",
     asWidget && "--as-widget"
   );
@@ -4890,7 +4897,7 @@ var LinkedAccountThumb = ({
 };
 
 // src/components/LinkedAccounts/LinkedAccounts.tsx
-import classNames24 from "classnames";
+import classNames25 from "classnames";
 var COMPONENT_NAME2 = "linked-accounts";
 var LinkedAccounts = ({ asWidget, elevated }) => {
   const {
@@ -4907,7 +4914,7 @@ var LinkedAccounts = ({ asWidget, elevated }) => {
     { name: "Renew link", action: renewLinkAccount },
     { name: "Unlink", action: unlinkAccount }
   ];
-  const linkedAccountsNewAccountClassName = classNames24(
+  const linkedAccountsNewAccountClassName = classNames25(
     "Layer__linked-accounts__new-account",
     asWidget && "--as-widget"
   );
@@ -5008,12 +5015,12 @@ var applyShare = (items, total) => {
   });
 };
 
-// src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
+// src/hooks/useProfitAndLoss/useProfitAndLossQuery.tsx
 import { startOfMonth, endOfMonth, formatISO } from "date-fns";
 import useSWR5 from "swr";
-var useProfitAndLoss = ({
-  startDate: initialStartDate,
-  endDate: initialEndDate,
+var useProfitAndLossQuery = ({
+  startDate,
+  endDate,
   tagFilter,
   reportingBasis
 } = {
@@ -5021,17 +5028,6 @@ var useProfitAndLoss = ({
   endDate: endOfMonth(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [startDate, setStartDate] = useState13(
-    initialStartDate || startOfMonth(Date.now())
-  );
-  const [endDate, setEndDate] = useState13(
-    initialEndDate || endOfMonth(Date.now())
-  );
-  const [filters, setFilters] = useState13({
-    expenses: void 0,
-    revenue: void 0
-  });
-  const [sidebarScope, setSidebarScope] = useState13(void 0);
   const {
     data: rawData,
     isLoading,
@@ -5045,15 +5041,83 @@ var useProfitAndLoss = ({
     Layer.getProfitAndLoss(apiUrl, auth?.access_token, {
       params: {
         businessId,
-        startDate: formatISO(startDate),
-        endDate: formatISO(endDate),
+        startDate: formatISO(startDate.valueOf()),
+        endDate: formatISO(endDate.valueOf()),
         tagKey: tagFilter?.key,
         tagValues: tagFilter?.values?.join(","),
         reportingBasis
       }
     })
   );
-  const { data, error } = rawData || {};
+  const refetch = () => {
+    mutate();
+  };
+  return {
+    startDate,
+    endDate,
+    data: rawData?.data,
+    isLoading,
+    isValidating,
+    error: rawError,
+    refetch
+  };
+};
+
+// src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
+import { startOfMonth as startOfMonth2, endOfMonth as endOfMonth2 } from "date-fns";
+var useProfitAndLoss = ({
+  startDate: initialStartDate,
+  endDate: initialEndDate,
+  tagFilter,
+  reportingBasis,
+  fetchMultipleMonths = false
+} = {
+  startDate: startOfMonth2(/* @__PURE__ */ new Date()),
+  endDate: endOfMonth2(/* @__PURE__ */ new Date())
+}) => {
+  const [startDate, setStartDate] = useState13(
+    initialStartDate || startOfMonth2(Date.now())
+  );
+  const [endDate, setEndDate] = useState13(
+    initialEndDate || endOfMonth2(Date.now())
+  );
+  const [filters, setFilters] = useState13({
+    expenses: void 0,
+    revenue: void 0
+  });
+  const [sidebarScope, setSidebarScope] = useState13(void 0);
+  const { data, isLoading, isValidating, error, refetch } = useProfitAndLossQuery({
+    startDate,
+    endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const changeDateRange = ({
+    startDate: newStartDate,
+    endDate: newEndDate
+  }) => {
+    newStartDate && setStartDate(newStartDate);
+    newEndDate && setEndDate(newEndDate);
+  };
+  const sortBy = (scope, field, direction) => {
+    setFilters({
+      ...filters,
+      [scope]: {
+        ...filters[scope],
+        sortBy: field,
+        sortDirection: direction ?? filters[scope]?.sortDirection === "desc" ? "asc" : "desc"
+      }
+    });
+  };
+  const setFilterTypes = (scope, types) => {
+    setFilters({
+      ...filters,
+      [scope]: {
+        ...filters[scope],
+        types
+      }
+    });
+  };
   const { filteredDataRevenue, filteredTotalRevenue } = useMemo3(() => {
     if (!data) {
       return { filteredDataRevenue: [], filteredTotalRevenue: void 0 };
@@ -5128,35 +5192,6 @@ var useProfitAndLoss = ({
     const withShare = applyShare(sorted, total);
     return { filteredDataExpenses: withShare, filteredTotalExpenses: total };
   }, [data, startDate, filters, sidebarScope]);
-  const changeDateRange = ({
-    startDate: newStartDate,
-    endDate: newEndDate
-  }) => {
-    newStartDate && setStartDate(newStartDate);
-    newEndDate && setEndDate(newEndDate);
-  };
-  const refetch = () => {
-    mutate();
-  };
-  const sortBy = (scope, field, direction) => {
-    setFilters({
-      ...filters,
-      [scope]: {
-        ...filters[scope],
-        sortBy: field,
-        sortDirection: direction ?? filters[scope]?.sortDirection === "desc" ? "asc" : "desc"
-      }
-    });
-  };
-  const setFilterTypes = (scope, types) => {
-    setFilters({
-      ...filters,
-      [scope]: {
-        ...filters[scope],
-        types
-      }
-    });
-  };
   return {
     data,
     filteredDataRevenue,
@@ -5165,7 +5200,7 @@ var useProfitAndLoss = ({
     filteredTotalExpenses,
     isLoading,
     isValidating,
-    error: error || rawError,
+    error,
     dateRange: { startDate, endDate },
     refetch,
     changeDateRange,
@@ -5178,7 +5213,350 @@ var useProfitAndLoss = ({
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-import React66, { useContext as useContext2, useMemo as useMemo4, useState as useState14 } from "react";
+import React66, { useContext as useContext2, useEffect as useEffect12, useMemo as useMemo5, useState as useState16 } from "react";
+
+// src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
+import { useEffect as useEffect10, useMemo as useMemo4, useState as useState14 } from "react";
+import { startOfMonth as startOfMonth3, endOfMonth as endOfMonth3, sub } from "date-fns";
+var buildDates = ({ currentDate }) => {
+  const list = [];
+  for (let i = 11; i > 0; i--) {
+    const startDateWithOffset = startOfMonth3(sub(currentDate, { months: i }));
+    const endDateWithOffset = endOfMonth3(sub(currentDate, { months: i }));
+    list.push({
+      startDate: startDateWithOffset,
+      endDate: endDateWithOffset
+    });
+  }
+  list.push({
+    startDate: startOfMonth3(currentDate),
+    endDate: endOfMonth3(currentDate)
+  });
+  return list;
+};
+var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
+  currentDate: /* @__PURE__ */ new Date()
+}) => {
+  const { businessId } = useLayerContext();
+  const [loaded, setLoaded] = useState14("initial");
+  const dates = useMemo4(() => {
+    return buildDates({ currentDate });
+  }, [currentDate, businessId, tagFilter, reportingBasis]);
+  const {
+    data: data0,
+    isLoading: isLoading0,
+    error: error0,
+    startDate: startDate0,
+    endDate: endDate0
+  } = useProfitAndLossQuery({
+    startDate: dates[0].startDate,
+    endDate: dates[0].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data1,
+    isLoading: isLoading1,
+    error: error1,
+    startDate: startDate1,
+    endDate: endDate1
+  } = useProfitAndLossQuery({
+    startDate: dates[1].startDate,
+    endDate: dates[1].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data2,
+    isLoading: isLoading2,
+    error: error2,
+    startDate: startDate2,
+    endDate: endDate2
+  } = useProfitAndLossQuery({
+    startDate: dates[2].startDate,
+    endDate: dates[2].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data3,
+    isLoading: isLoading3,
+    error: error3,
+    startDate: startDate3,
+    endDate: endDate3
+  } = useProfitAndLossQuery({
+    startDate: dates[3].startDate,
+    endDate: dates[3].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data4,
+    isLoading: isLoading4,
+    error: error4,
+    startDate: startDate4,
+    endDate: endDate4
+  } = useProfitAndLossQuery({
+    startDate: dates[4].startDate,
+    endDate: dates[4].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data5,
+    isLoading: isLoading5,
+    error: error5,
+    startDate: startDate5,
+    endDate: endDate5
+  } = useProfitAndLossQuery({
+    startDate: dates[5].startDate,
+    endDate: dates[5].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data6,
+    isLoading: isLoading6,
+    error: error6,
+    startDate: startDate6,
+    endDate: endDate6
+  } = useProfitAndLossQuery({
+    startDate: dates[6].startDate,
+    endDate: dates[6].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data7,
+    isLoading: isLoading7,
+    error: error7,
+    startDate: startDate7,
+    endDate: endDate7
+  } = useProfitAndLossQuery({
+    startDate: dates[7].startDate,
+    endDate: dates[7].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data8,
+    isLoading: isLoading8,
+    error: error8,
+    startDate: startDate8,
+    endDate: endDate8
+  } = useProfitAndLossQuery({
+    startDate: dates[8].startDate,
+    endDate: dates[8].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data9,
+    isLoading: isLoading9,
+    error: error9,
+    startDate: startDate9,
+    endDate: endDate9
+  } = useProfitAndLossQuery({
+    startDate: dates[9].startDate,
+    endDate: dates[9].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data10,
+    isLoading: isLoading10,
+    error: error10,
+    startDate: startDate10,
+    endDate: endDate10
+  } = useProfitAndLossQuery({
+    startDate: dates[10].startDate,
+    endDate: dates[10].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const {
+    data: data11,
+    isLoading: isLoading11,
+    error: error11,
+    startDate: startDate11,
+    endDate: endDate11
+  } = useProfitAndLossQuery({
+    startDate: dates[11].startDate,
+    endDate: dates[11].endDate,
+    tagFilter,
+    reportingBasis
+  });
+  const { data, isLoading, error } = useMemo4(() => {
+    return {
+      data: [
+        {
+          data: data0,
+          isLoading: isLoading0,
+          error: error0,
+          startDate: startDate0,
+          endDate: endDate0
+        },
+        {
+          data: data1,
+          isLoading: isLoading1,
+          error: error1,
+          startDate: startDate1,
+          endDate: endDate1
+        },
+        {
+          data: data2,
+          isLoading: isLoading2,
+          error: error2,
+          startDate: startDate2,
+          endDate: endDate2
+        },
+        {
+          data: data3,
+          isLoading: isLoading3,
+          error: error3,
+          startDate: startDate3,
+          endDate: endDate3
+        },
+        {
+          data: data4,
+          isLoading: isLoading4,
+          error: error4,
+          startDate: startDate4,
+          endDate: endDate4
+        },
+        {
+          data: data5,
+          isLoading: isLoading5,
+          error: error5,
+          startDate: startDate5,
+          endDate: endDate5
+        },
+        {
+          data: data6,
+          isLoading: isLoading6,
+          error: error6,
+          startDate: startDate6,
+          endDate: endDate6
+        },
+        {
+          data: data7,
+          isLoading: isLoading7,
+          error: error7,
+          startDate: startDate7,
+          endDate: endDate7
+        },
+        {
+          data: data8,
+          isLoading: isLoading8,
+          error: error8,
+          startDate: startDate8,
+          endDate: endDate8
+        },
+        {
+          data: data9,
+          isLoading: isLoading9,
+          error: error9,
+          startDate: startDate9,
+          endDate: endDate9
+        },
+        {
+          data: data10,
+          isLoading: isLoading10,
+          error: error10,
+          startDate: startDate10,
+          endDate: endDate10
+        },
+        {
+          data: data11,
+          isLoading: isLoading11,
+          error: error11,
+          startDate: startDate11,
+          endDate: endDate11
+        }
+      ],
+      error: [
+        error0,
+        error1,
+        error2,
+        error3,
+        error4,
+        error5,
+        error6,
+        error7,
+        error8,
+        error9,
+        error10,
+        error11
+      ].find((x) => !!x),
+      isLoading: [
+        isLoading0,
+        isLoading1,
+        isLoading2,
+        isLoading3,
+        isLoading4,
+        isLoading5,
+        isLoading6,
+        isLoading7,
+        isLoading8,
+        isLoading9,
+        isLoading10,
+        isLoading11
+      ].find((x) => !!x)
+    };
+  }, [
+    data0,
+    data1,
+    data2,
+    data3,
+    data4,
+    data5,
+    data6,
+    data7,
+    data8,
+    data9,
+    data10,
+    data11,
+    isLoading0,
+    isLoading1,
+    isLoading2,
+    isLoading3,
+    isLoading4,
+    isLoading5,
+    isLoading6,
+    isLoading7,
+    isLoading8,
+    isLoading9,
+    isLoading10,
+    isLoading11,
+    error0,
+    error1,
+    error2,
+    error3,
+    error4,
+    error5,
+    error6,
+    error7,
+    error8,
+    error9,
+    error10,
+    error11
+  ]);
+  useEffect10(() => {
+    if (isLoading && loaded === "initial") {
+      setLoaded("loading");
+      return;
+    }
+    if (!isLoading && data && !data.find((x) => !x.data && !x.error)) {
+      setLoaded("complete");
+    }
+  }, [data, isLoading]);
+  return {
+    data,
+    isLoading,
+    loaded,
+    error
+  };
+};
 
 // src/utils/format.ts
 var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
@@ -5219,46 +5597,69 @@ var humanizeEnum = (text) => {
 };
 
 // src/components/ProfitAndLossChart/Indicator.tsx
-import React65, { useEffect as useEffect10 } from "react";
+import React65, { useEffect as useEffect11, useState as useState15 } from "react";
 var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
 var Indicator = ({
-  viewBox = {},
   className,
   animateFrom,
-  setAnimateFrom
+  setAnimateFrom,
+  customCursorSize,
+  setCustomCursorSize,
+  viewBox = {}
 }) => {
   if (!className?.match(/selected/)) {
     return null;
   }
+  const [opacityIndicator, setOpacityIndicator] = useState15(0);
   const { x: animateTo = 0, width = 0 } = "x" in viewBox ? viewBox : emptyViewBox;
   const margin = width > 12 ? 4 : 1;
   const boxWidth = width * 2 + margin;
   const multiplier = width > 12 ? 1.2 : 1;
   const xOffset = (boxWidth * multiplier - boxWidth) / 2;
-  const borderRadius = width > 16 ? 8 : width / 2;
-  useEffect10(() => {
+  const borderRadius = 6;
+  const rectWidth = `${boxWidth * multiplier}px`;
+  const rectHeight = "calc(100% - 38px)";
+  useEffect11(() => {
+    if (Math.abs(animateTo - animateFrom) < 30) {
+      setOpacityIndicator(0);
+    }
     setAnimateFrom(animateTo);
+    setTimeout(() => {
+      setOpacityIndicator(1);
+    }, 200);
   }, [animateTo]);
+  const rectRef = (ref) => {
+    if (ref) {
+      const refRectWidth = ref.getBoundingClientRect().width;
+      const refRectHeight = ref.getBoundingClientRect().height;
+      if (customCursorSize.width !== refRectWidth || customCursorSize.height !== refRectHeight) {
+        setCustomCursorSize(refRectWidth, refRectHeight, actualX - xOffset);
+      }
+    }
+  };
   const actualX = animateFrom === -1 ? animateTo : animateFrom;
   return /* @__PURE__ */ React65.createElement(
     "rect",
     {
+      ref: rectRef,
       className: "Layer__profit-and-loss-chart__selection-indicator",
       rx: borderRadius,
       ry: borderRadius,
       style: {
-        width: `${boxWidth * multiplier}px`,
+        width: rectWidth,
         // @ts-expect-error -- y is fine but x apparently isn't!
         x: actualX - xOffset,
-        y: 22,
-        height: "calc(100% - 38px)"
+        y: 1,
+        height: rectHeight,
+        opacity: opacityIndicator
       }
     }
   );
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-import { endOfMonth as endOfMonth2, format as format4, parseISO as parseISO8, startOfMonth as startOfMonth2, sub } from "date-fns";
+import classNames26 from "classnames";
+import { format as format4, parseISO as parseISO8, startOfMonth as startOfMonth4 } from "date-fns";
 import {
   BarChart,
   XAxis,
@@ -5276,82 +5677,24 @@ var barSize = 20;
 var ProfitAndLossChart = () => {
   const { getColor } = useLayerContext();
   const { changeDateRange, dateRange } = useContext2(ProfitAndLoss.Context);
-  const thisMonth = startOfMonth2(Date.now());
+  const [customCursorSize, setCustomCursorSize] = useState16({
+    width: 0,
+    height: 0,
+    x: 0
+  });
+  const [barAnimActive, setBarAnimActive] = useState16(true);
   const startSelectionMonth = dateRange.startDate.getMonth();
   const endSelectionMonth = dateRange.endDate.getMonth();
-  const monthData = [];
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 11 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 11 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 10 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 10 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 9 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 9 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 8 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 8 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 7 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 7 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 6 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 6 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 5 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 5 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 4 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 4 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 3 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 3 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 2 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 2 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: startOfMonth2(sub(thisMonth, { months: 1 })),
-      endDate: endOfMonth2(sub(thisMonth, { months: 1 }))
-    })?.data
-  );
-  monthData.push(
-    useProfitAndLoss({
-      startDate: thisMonth,
-      endDate: endOfMonth2(thisMonth)
-    })?.data
-  );
+  const { data, loaded } = useProfitAndLossLTM({
+    currentDate: startOfMonth4(Date.now())
+  });
+  useEffect12(() => {
+    if (loaded === "complete") {
+      setTimeout(() => {
+        setBarAnimActive(false);
+      }, 1e3);
+    }
+  }, [loaded]);
   const getMonthName = (pnl) => pnl ? format4(parseISO8(pnl.start_date), "LLL") : "";
   const summarizePnL = (pnl) => ({
     name: getMonthName(pnl),
@@ -5361,56 +5704,68 @@ var ProfitAndLossChart = () => {
     selected: !!pnl && parseISO8(pnl.start_date).getMonth() >= startSelectionMonth && parseISO8(pnl.end_date).getMonth() <= endSelectionMonth
   });
   const onClick = ({ activeTooltipIndex }) => {
-    const selection = monthData[activeTooltipIndex || -1];
-    if (selection) {
-      const { start_date: startDate, end_date: endDate } = selection;
+    const selection = data[activeTooltipIndex || -1];
+    if (selection && selection.data) {
+      const { start_date, end_date } = selection.data;
       changeDateRange({
-        startDate: parseISO8(startDate),
-        endDate: parseISO8(endDate)
+        startDate: parseISO8(start_date),
+        endDate: parseISO8(end_date)
       });
     }
   };
-  const CustomTooltip = ({
-    active,
-    payload,
-    label
-  }) => {
+  const CustomTooltip = ({ active, payload }) => {
     if (active && payload && payload.length) {
       const netProfit = payload[0].payload.netProfit ?? 0;
       const netProfitClass = netProfit > 0 ? "positive" : netProfit < 0 ? "negative" : "";
-      return /* @__PURE__ */ React66.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ React66.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ React66.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ React66.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0)))), /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, "Net Profit"), /* @__PURE__ */ React66.createElement("span", { className: `Layer__chart__tooltip-value ${netProfitClass}` }, "$", centsToDollars(netProfit)))));
+      return /* @__PURE__ */ React66.createElement("div", { className: "Layer__chart__tooltip" }, loaded !== "complete" ? /* @__PURE__ */ React66.createElement(Text, null, "Loading...") : /* @__PURE__ */ React66.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ React66.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ React66.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0)))), /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, "Net Profit"), /* @__PURE__ */ React66.createElement(
+        "span",
+        {
+          className: `Layer__chart__tooltip-value ${netProfitClass}`
+        },
+        "$",
+        centsToDollars(netProfit)
+      ))));
     }
     return null;
   };
   const CustomizedCursor = (props) => {
-    const { x, width, height } = props;
+    const { x, y } = props;
+    const { width, height } = customCursorSize;
+    const offsetX = width * 0.1;
     return /* @__PURE__ */ React66.createElement(
       Rectangle,
       {
-        fill: getColor(900)?.hex ?? "#333",
+        fill: "#F7F8FA",
         stroke: "none",
-        x: x + width / 2 - 11,
-        y: height + 44,
-        radius: 2,
-        width: 22,
-        height: 2,
+        x: x + offsetX,
+        y,
+        width,
+        height,
+        radius: 6,
         className: "Layer__chart__tooltip-cursor"
       }
     );
   };
-  const data = useMemo4(
-    () => monthData.map(summarizePnL),
-    [
-      startSelectionMonth,
-      endSelectionMonth,
-      ...monthData.map((m) => m?.net_profit)
-    ]
-  );
-  const [animateFrom, setAnimateFrom] = useState14(-1);
+  const theData = useMemo5(() => {
+    if (loaded !== "complete") {
+      return data?.map((x) => ({
+        name: format4(x.startDate, "LLL"),
+        revenue: 1,
+        expenses: 1,
+        netProfit: 0,
+        selected: false
+      }));
+    }
+    return data?.map((x) => summarizePnL(x.data));
+  }, [startSelectionMonth, endSelectionMonth, loaded]);
+  const [animateFrom, setAnimateFrom] = useState16(-1);
   return /* @__PURE__ */ React66.createElement(
     ResponsiveContainer,
     {
-      className: "Layer__chart-container",
+      className: classNames26(
+        "Layer__chart-container",
+        loaded !== "complete" && "Layer__chart-container--loading"
+      ),
       width: "100%",
       height: "100%",
       minHeight: 200
@@ -5419,7 +5774,7 @@ var ProfitAndLossChart = () => {
       BarChart,
       {
         margin: { left: 12, right: 12, bottom: 12 },
-        data,
+        data: theData,
         onClick,
         barGap,
         className: "Layer__profit-and-loss-chart"
@@ -5445,9 +5800,9 @@ var ProfitAndLossChart = () => {
       /* @__PURE__ */ React66.createElement(
         Legend,
         {
-          verticalAlign: "top",
+          verticalAlign: "bottom",
           align: "left",
-          wrapperStyle: { top: -24 },
+          wrapperStyle: { bottom: 0 },
           payload: [
             {
               value: "Revenue",
@@ -5468,7 +5823,7 @@ var ProfitAndLossChart = () => {
         {
           dataKey: "revenue",
           barSize,
-          isAnimationActive: false,
+          isAnimationActive: barAnimActive,
           radius: [2, 2, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--income"
         },
@@ -5478,30 +5833,34 @@ var ProfitAndLossChart = () => {
             content: /* @__PURE__ */ React66.createElement(
               Indicator,
               {
+                setCustomCursorSize: (width, height, x) => setCustomCursorSize({ width, height, x }),
+                customCursorSize,
                 animateFrom,
                 setAnimateFrom
               }
             )
           }
         ),
-        data.map((entry) => /* @__PURE__ */ React66.createElement(
-          Cell,
-          {
-            key: entry.name,
-            className: entry.selected ? "Layer__profit-and-loss-chart__cell--selected" : ""
-          }
-        ))
+        theData?.map((entry) => {
+          return /* @__PURE__ */ React66.createElement(
+            Cell,
+            {
+              key: entry.name,
+              className: entry.selected ? "Layer__profit-and-loss-chart__cell--selected" : ""
+            }
+          );
+        })
       ),
       /* @__PURE__ */ React66.createElement(
         Bar,
         {
           dataKey: "expenses",
           barSize,
-          isAnimationActive: false,
+          isAnimationActive: barAnimActive,
           radius: [2, 2, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--expenses"
         },
-        data.map((entry) => /* @__PURE__ */ React66.createElement(
+        theData.map((entry) => /* @__PURE__ */ React66.createElement(
           Cell,
           {
             key: entry.name,
@@ -5514,19 +5873,19 @@ var ProfitAndLossChart = () => {
 };
 
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
-import React67, { useContext as useContext3, useState as useState15, useEffect as useEffect11 } from "react";
-import { add, endOfMonth as endOfMonth3, format as format5, startOfMonth as startOfMonth3 } from "date-fns";
+import React67, { useContext as useContext3, useState as useState17, useEffect as useEffect13 } from "react";
+import { add, endOfMonth as endOfMonth4, format as format5, startOfMonth as startOfMonth5 } from "date-fns";
 var ProfitAndLossDatePicker = () => {
   const { changeDateRange, dateRange } = useContext3(ProfitAndLoss.Context);
-  const [isAnimating, setIsAnimating] = useState15(false);
-  const [localDate, setLocalDate] = useState15(dateRange.startDate);
-  const [nextOpacity, setNextOpacity] = useState15(0);
-  const [currentOpacity, setCurrentOpacity] = useState15(1);
-  const [transformStyle, setTransformStyle] = useState15({
+  const [isAnimating, setIsAnimating] = useState17(false);
+  const [localDate, setLocalDate] = useState17(dateRange.startDate);
+  const [nextOpacity, setNextOpacity] = useState17(0);
+  const [currentOpacity, setCurrentOpacity] = useState17(1);
+  const [transformStyle, setTransformStyle] = useState17({
     transform: "translateX(33%)",
     transition: "ease"
   });
-  useEffect11(() => {
+  useEffect13(() => {
     if (dateRange.startDate !== localDate && !isAnimating) {
       setLocalDate(dateRange.startDate);
       setTransformStyle({ transform: "translateX(33%)", transition: "none" });
@@ -5542,8 +5901,8 @@ var ProfitAndLossDatePicker = () => {
       setCurrentOpacity(0);
     }
     changeDateRange({
-      startDate: startOfMonth3(newDate),
-      endDate: endOfMonth3(newDate)
+      startDate: startOfMonth5(newDate),
+      endDate: endOfMonth4(newDate)
     });
     const translateXValue = monthsToAdd > 0 ? "0%" : "66%";
     setTransformStyle({
@@ -5564,64 +5923,64 @@ var ProfitAndLossDatePicker = () => {
   const currentLabel = format5(localDate, "LLLL, y");
   const prevLabel = format5(add(localDate, { months: -1 }), "LLLL, y");
   const nextLabel = format5(add(localDate, { months: 1 }), "LLLL, y");
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React67.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ React67.createElement(
     "div",
     {
-      className: "Layer__profit-and-loss-date-picker"
+      className: "Layer__profit-and-loss-date-picker__labels-container",
+      style: transformStyle
     },
-    /* @__PURE__ */ React67.createElement("div", { className: "Layer__profit-and-loss-date-picker__labels-container", style: transformStyle }, /* @__PURE__ */ React67.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, prevLabel), /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React67.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, prevLabel),
+    /* @__PURE__ */ React67.createElement(
       "span",
       {
         className: "Layer__profit-and-loss-date-picker__label",
         style: { opacity: currentOpacity }
       },
       currentLabel
-    ), /* @__PURE__ */ React67.createElement(
+    ),
+    /* @__PURE__ */ React67.createElement(
       "span",
       {
         className: "Layer__profit-and-loss-date-picker__label",
         style: { opacity: nextOpacity }
       },
       nextLabel
-    )),
+    )
+  ), /* @__PURE__ */ React67.createElement(
+    "button",
+    {
+      "aria-label": "View Previous Month",
+      className: "Layer__profit-and-loss-date-picker__button",
+      onClick: () => change(-1),
+      disabled: isAnimating
+    },
     /* @__PURE__ */ React67.createElement(
-      "button",
+      ChevronLeft_default,
       {
-        "aria-label": "View Previous Month",
-        className: "Layer__profit-and-loss-date-picker__button",
-        onClick: () => change(-1),
-        disabled: isAnimating
-      },
-      /* @__PURE__ */ React67.createElement(
-        ChevronLeft_default,
-        {
-          className: "Layer__profit-and-loss-date-picker__button-icon",
-          size: 16
-        }
-      )
-    ),
+        className: "Layer__profit-and-loss-date-picker__button-icon",
+        size: 16
+      }
+    )
+  ), /* @__PURE__ */ React67.createElement(
+    "button",
+    {
+      "aria-label": "View Next Month",
+      className: "Layer__profit-and-loss-date-picker__button",
+      onClick: () => change(1),
+      disabled: isAnimating
+    },
     /* @__PURE__ */ React67.createElement(
-      "button",
+      ChevronRight_default,
       {
-        "aria-label": "View Next Month",
-        className: "Layer__profit-and-loss-date-picker__button",
-        onClick: () => change(1),
-        disabled: isAnimating
-      },
-      /* @__PURE__ */ React67.createElement(
-        ChevronRight_default,
-        {
-          className: "Layer__profit-and-loss-date-picker__button-icon",
-          size: 16
-        }
-      )
-    ),
-    /* @__PURE__ */ React67.createElement("div", { className: "Layer__profit-and-loss-date-picker__effect-blur" })
-  );
+        className: "Layer__profit-and-loss-date-picker__button-icon",
+        size: 16
+      }
+    )
+  ), /* @__PURE__ */ React67.createElement("div", { className: "Layer__profit-and-loss-date-picker__effect-blur" }));
 };
 
 // src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
-import React73, { useContext as useContext4, useState as useState16 } from "react";
+import React73, { useContext as useContext4, useState as useState18 } from "react";
 
 // src/icons/X.tsx
 import * as React68 from "react";
@@ -5657,7 +6016,7 @@ var X = ({ size = 18, ...props }) => /* @__PURE__ */ React68.createElement(
 var X_default = X;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
-import React69, { useMemo as useMemo5 } from "react";
+import React69, { useMemo as useMemo6 } from "react";
 
 // src/config/charts.ts
 var INACTIVE_OPACITY_LEVELS = [
@@ -5763,7 +6122,7 @@ var DetailedChart = ({
   date,
   isLoading
 }) => {
-  const chartData = useMemo5(() => {
+  const chartData = useMemo6(() => {
     if (!filteredData) {
       return [];
     }
@@ -6034,7 +6393,7 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React70.createElem
     width: size,
     height: size
   },
-  /* @__PURE__ */ React70.createElement("g", { "clip-path": "url(#clip0_1758_75388)" }, /* @__PURE__ */ React70.createElement(
+  /* @__PURE__ */ React70.createElement("g", { clipPath: "url(#clip0_1758_75388)" }, /* @__PURE__ */ React70.createElement(
     "path",
     {
       d: "M1.33325 8.5L3.99992 11.1667L6.66659 8.5",
@@ -6084,7 +6443,7 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React70.createElem
 var SortArrows_default = SortArrows;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
-import classNames25 from "classnames";
+import classNames27 from "classnames";
 var DetailedTable = ({
   filteredData,
   sidebarScope,
@@ -6094,7 +6453,7 @@ var DetailedTable = ({
   setHoveredItem
 }) => {
   const buildColClass = (column) => {
-    return classNames25(
+    return classNames27(
       "Layer__sortable-col",
       sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
     );
@@ -6129,7 +6488,7 @@ var DetailedTable = ({
       "tr",
       {
         key: `pl-side-table-item-${idx}`,
-        className: classNames25(
+        className: classNames27(
           "Layer__profit-and-loss-detailed-table__row",
           hoveredItem && hoveredItem === item.display_name ? "active" : ""
         ),
@@ -6214,7 +6573,7 @@ var ProfitAndLossDetailedCharts = ({
   const theScope = scope ? scope : sidebarScope;
   const data = theScope === "revenue" ? filteredDataRevenue : filteredDataExpenses;
   const total = theScope === "revenue" ? filteredTotalRevenue : filteredTotalExpenses;
-  const [hoveredItem, setHoveredItem] = useState16();
+  const [hoveredItem, setHoveredItem] = useState18();
   return /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ React73.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header" }, /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ React73.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(theScope)), /* @__PURE__ */ React73.createElement(Text, { size: "sm" /* sm */, className: "date" }, format6(dateRange.startDate, "LLLL, y")), showDatePicker && /* @__PURE__ */ React73.createElement(ProfitAndLossDatePicker, null)), !hideClose && /* @__PURE__ */ React73.createElement(
     Button,
     {
@@ -6256,17 +6615,17 @@ var ProfitAndLossDetailedCharts = ({
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import React76, { useContext as useContext5, useMemo as useMemo6 } from "react";
+import React76, { useContext as useContext5, useMemo as useMemo7 } from "react";
 
 // src/components/SkeletonLoader/SkeletonLoader.tsx
 import React74 from "react";
-import classNames26 from "classnames";
+import classNames28 from "classnames";
 var SkeletonLoader = ({
   height,
   width,
   className
 }) => {
-  const baseClassName = classNames26(
+  const baseClassName = classNames28(
     "Layer__skeleton-loader Layer__anim--skeleton-loading",
     className
   );
@@ -6310,7 +6669,7 @@ var MiniChart = ({ data }) => {
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import classNames27 from "classnames";
+import classNames29 from "classnames";
 var CHART_PLACEHOLDER = [
   {
     name: "placeholder",
@@ -6348,13 +6707,14 @@ var ProfitAndLossSummaries = ({
     setSidebarScope,
     sidebarScope
   } = useContext5(ProfitAndLoss.Context);
-  const expensesChartData = useMemo6(() => {
-    return buildMiniChartData("expenses", storedData);
+  const dataItem = Array.isArray(storedData) ? storedData[storedData.length - 1] : storedData;
+  const expensesChartData = useMemo7(() => {
+    return buildMiniChartData("expenses", dataItem);
   }, [storedData]);
-  const revenueChartData = useMemo6(() => {
-    return buildMiniChartData("revenue", storedData);
+  const revenueChartData = useMemo7(() => {
+    return buildMiniChartData("revenue", dataItem);
   }, [storedData]);
-  const data = storedData ? storedData : { income: { value: NaN }, net_profit: NaN };
+  const data = dataItem ? dataItem : { income: { value: NaN }, net_profit: NaN };
   const incomeDirectionClass = (data.income.value ?? NaN) < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
   const expensesDirectionClass = (data?.income?.value ?? NaN) - data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
   const netProfitDirectionClass = data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
@@ -6366,7 +6726,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ React76.createElement(
       "div",
       {
-        className: classNames27(
+        className: classNames29(
           "Layer__profit-and-loss-summaries__summary",
           actionable && "Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--income",
@@ -6388,7 +6748,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ React76.createElement(
       "div",
       {
-        className: classNames27(
+        className: classNames29(
           "Layer__profit-and-loss-summaries__summary",
           actionable && "Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--expenses",
@@ -6412,7 +6772,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ React76.createElement(
       "div",
       {
-        className: classNames27(
+        className: classNames29(
           "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit",
           actionable && "Layer__actionable"
         )
@@ -6432,7 +6792,7 @@ var ProfitAndLossSummaries = ({
 import React79, { useContext as useContext6 } from "react";
 
 // src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-import React78, { useState as useState17 } from "react";
+import React78, { useState as useState19 } from "react";
 
 // src/icons/PieChart.tsx
 import * as React77 from "react";
@@ -6481,7 +6841,7 @@ var ProfitAndLossRow = ({
     return null;
   }
   const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = useState17(true);
+  const [expanded, setExpanded] = useState19(true);
   const amount = value ?? 0;
   const amountString = centsToDollars(Math.abs(amount));
   const labelClasses = [
@@ -6603,19 +6963,20 @@ var empty_profit_and_loss_report_default = {
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-import classNames28 from "classnames";
+import classNames30 from "classnames";
 var ProfitAndLossTable = ({ lockExpanded, asContainer }) => {
   const {
     data: actualData,
     isLoading,
     setSidebarScope
   } = useContext6(ProfitAndLoss.Context);
-  const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
+  const currentData = Array.isArray(actualData) ? actualData[actualData.length - 1] : actualData;
+  const data = !currentData || isLoading ? empty_profit_and_loss_report_default : currentData;
   if (isLoading || actualData === void 0) {
     return /* @__PURE__ */ React79.createElement(
       "div",
       {
-        className: classNames28(
+        className: classNames30(
           "Layer__profit-and-loss-table__loader-container",
           asContainer && "Layer__component-container"
         )
@@ -6626,7 +6987,7 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer }) => {
   return /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement(
     "div",
     {
-      className: classNames28(
+      className: classNames30(
         "Layer__profit-and-loss-table Layer__profit-and-loss-table--main",
         asContainer && "Layer__component-container"
       )
@@ -6729,7 +7090,7 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer }) => {
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-import { endOfMonth as endOfMonth4, startOfMonth as startOfMonth4 } from "date-fns";
+import { endOfMonth as endOfMonth5, startOfMonth as startOfMonth6 } from "date-fns";
 var PNLContext = createContext2({
   data: void 0,
   filteredDataRevenue: [],
@@ -6740,8 +7101,8 @@ var PNLContext = createContext2({
   isValidating: false,
   error: void 0,
   dateRange: {
-    startDate: startOfMonth4(/* @__PURE__ */ new Date()),
-    endDate: endOfMonth4(/* @__PURE__ */ new Date())
+    startDate: startOfMonth6(/* @__PURE__ */ new Date()),
+    endDate: endOfMonth5(/* @__PURE__ */ new Date())
   },
   changeDateRange: () => {
   },
@@ -6779,8 +7140,8 @@ ProfitAndLoss.DetailedCharts = ProfitAndLossDetailedCharts;
 import React82, { useContext as useContext7, useRef as useRef14 } from "react";
 
 // src/components/Panel/Panel.tsx
-import React81, { useEffect as useEffect12, useState as useState18 } from "react";
-import classNames29 from "classnames";
+import React81, { useEffect as useEffect14, useState as useState20 } from "react";
+import classNames31 from "classnames";
 var Panel = ({
   children,
   className,
@@ -6789,8 +7150,8 @@ var Panel = ({
   sidebarIsOpen,
   parentRef
 }) => {
-  const [sidebarHeight, setSidebarHeight] = useState18(0);
-  useEffect12(() => {
+  const [sidebarHeight, setSidebarHeight] = useState20(0);
+  useEffect14(() => {
     if (parentRef?.current?.offsetHeight) {
       setSidebarHeight(parentRef?.current?.offsetHeight - 1);
     }
@@ -6798,7 +7159,7 @@ var Panel = ({
   return /* @__PURE__ */ React81.createElement(
     "div",
     {
-      className: classNames29(
+      className: classNames31(
         "Layer__panel",
         className,
         sidebarIsOpen && "Layer__panel--open"
@@ -6876,10 +7237,213 @@ var Components = ({
 };
 
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
-import React96, { createContext as createContext3, useContext as useContext14, useState as useState24 } from "react";
+import React96, { createContext as createContext3, useContext as useContext14, useState as useState26 } from "react";
+
+// src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
+import { useState as useState21 } from "react";
+
+// src/components/ChartOfAccountsForm/constants.ts
+var LEDGER_ACCOUNT_TYPES = [
+  {
+    value: "ASSET",
+    label: "Assets"
+  },
+  {
+    value: "LIABILITY",
+    label: "Liabilities"
+  },
+  {
+    value: "EQUITY",
+    label: "Equities"
+  },
+  {
+    value: "REVENUE",
+    label: "Revenue"
+  },
+  {
+    value: "EXPENSE",
+    label: "Expenses"
+  }
+];
+var DEFAULT_ACCOUNT_TYPE_DIRECTION = {
+  ASSET: "DEBIT" /* DEBIT */,
+  LIABILITY: "CREDIT" /* CREDIT */,
+  EQUITY: "CREDIT" /* CREDIT */,
+  REVENUE: "CREDIT" /* CREDIT */,
+  EXPENSE: "DEBIT" /* DEBIT */
+};
+var NORMALITY_OPTIONS = [
+  {
+    value: "DEBIT" /* DEBIT */,
+    label: "Debit"
+  },
+  {
+    value: "CREDIT" /* CREDIT */,
+    label: "Credit"
+  }
+];
+var ASSET_LEDGER_ACCOUNT_SUBTYPES = [
+  {
+    value: "BANK_ACCOUNTS",
+    label: "Bank Accounts"
+  },
+  {
+    value: "ACCOUNTS_RECEIVABLE",
+    label: "Accounts Receivable"
+  },
+  {
+    value: "INVENTORY",
+    label: "Inventory"
+  },
+  {
+    value: "PAYMENT_PROCESSOR_CLEARING_ACCOUNT",
+    label: "Payment Processor Clearing Accounts"
+  },
+  {
+    value: "FIXED_ASSET",
+    label: "Fixed Assets"
+  },
+  {
+    value: "CASH",
+    label: "Cash"
+  },
+  {
+    value: "UNDEPOSITED_FUNDS",
+    label: "Undeposited Funds"
+  }
+];
+var LIABILITY_LEDGER_ACCOUNT_SUBTYPES = [
+  {
+    value: "LIABILITY",
+    label: "Liabilities"
+  },
+  {
+    value: "ACCOUNTS_PAYABLE",
+    label: "Accounts Payable"
+  },
+  {
+    value: "CREDIT_CARD",
+    label: "Credit Cards"
+  },
+  {
+    value: "SHAREHOLDER_LOAN",
+    label: "Shareholder Loans"
+  },
+  {
+    value: "PAYROLL_LIABILITY",
+    label: "Payroll Liabilities"
+  },
+  {
+    value: "SALES_TAXES_PAYABLE",
+    label: "Sales Taxes Payable"
+  },
+  {
+    value: "LINE_OF_CREDIT",
+    label: "Lines of Credit"
+  },
+  {
+    value: "NOTES_PAYABLE",
+    label: "Notes Payable"
+  },
+  {
+    value: "TIPS",
+    label: "Tips"
+  },
+  {
+    value: "UNEARNED_REVENUE",
+    label: "Unearned Revenue"
+  },
+  {
+    value: "UNDEPOSITED_OUTFLOWS",
+    label: "Undeposited Outflows"
+  }
+];
+var EQUITY_LEDGER_ACCOUNT_SUBTYPES = [
+  {
+    value: "CONTRIBUTIONS",
+    label: "Contributions"
+  },
+  {
+    value: "DISTRIBUTIONS",
+    label: "Distributions"
+  },
+  {
+    value: "COMMON_STOCK",
+    label: "Common Stock"
+  },
+  {
+    value: "ADDITIONAL_PAID_IN_CAPITAL",
+    label: "Additional Paid In Capital"
+  },
+  {
+    value: "RETAINED_EARNINGS",
+    label: "Retained Earnings"
+  },
+  {
+    value: "ACCUMULATED_ADJUSTMENTS",
+    label: "Accumulated Adjustments"
+  },
+  {
+    value: "OPENING_BALANCE_EQUITY",
+    label: "Opening Balance Equity"
+  }
+];
+var REVENUE_LEDGER_ACCOUNT_SUBTYPES = [
+  {
+    value: "SALES",
+    label: "Sales"
+  },
+  {
+    value: "UNCATEGORIZED_REVENUE",
+    label: "Uncategorized Revenue"
+  },
+  {
+    value: "RETURNS_ALLOWANCES",
+    label: "Returns & Allowances"
+  }
+];
+var EXPENSE_LEDGER_ACCOUNT_SUBTYPES = [
+  {
+    value: "COGS",
+    label: "COGS"
+  },
+  {
+    value: "OPERATING_EXPENSES",
+    label: "Operating Expenses"
+  },
+  {
+    value: "PAYROLL",
+    label: "Payroll"
+  },
+  {
+    value: "TAXES_LICENSES",
+    label: "Taxes & Licenses"
+  },
+  {
+    value: "BAD_DEBT",
+    label: "Bad Debt"
+  },
+  {
+    value: "CHARITABLE_CONTRIBUTIONS",
+    label: "Charitable Contributions"
+  }
+];
+var LEDGER_ACCOUNT_SUBTYPES = [
+  ...ASSET_LEDGER_ACCOUNT_SUBTYPES,
+  ...LIABILITY_LEDGER_ACCOUNT_SUBTYPES,
+  ...EQUITY_LEDGER_ACCOUNT_SUBTYPES,
+  ...REVENUE_LEDGER_ACCOUNT_SUBTYPES,
+  ...EXPENSE_LEDGER_ACCOUNT_SUBTYPES
+];
+var LEDGER_ACCOUNT_SUBTYPES_FOR_TYPE = {
+  ASSET: ASSET_LEDGER_ACCOUNT_SUBTYPES,
+  LIABILITY: LIABILITY_LEDGER_ACCOUNT_SUBTYPES,
+  EQUITY: EQUITY_LEDGER_ACCOUNT_SUBTYPES,
+  REVENUE: REVENUE_LEDGER_ACCOUNT_SUBTYPES,
+  EXPENSE: EXPENSE_LEDGER_ACCOUNT_SUBTYPES
+};
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
-import { useState as useState19 } from "react";
 import useSWR6 from "swr";
 var validate = (formData) => {
   const errors = [];
@@ -6887,6 +7451,14 @@ var validate = (formData) => {
   if (nameError) {
     errors.push(nameError);
   }
+  const normalityError = validateNormality(formData);
+  if (normalityError) {
+    errors.push(normalityError);
+  }
+  const typeError = validateType(formData);
+  if (typeError) {
+    errors.push(typeError);
+  }
   return errors;
 };
 var revalidateField = (fieldName, formData) => {
@@ -6898,10 +7470,48 @@ var revalidateField = (fieldName, formData) => {
       }
       return (formData?.errors || []).filter((x) => x.field !== fieldName);
     }
+    case "normality": {
+      const normalityError = validateNormality(formData);
+      if (normalityError) {
+        return (formData?.errors || []).filter((x) => x.field !== fieldName).concat([normalityError]);
+      }
+      return (formData?.errors || []).filter((x) => x.field !== fieldName);
+    }
+    case "type": {
+      const typeError = validateType(formData);
+      if (typeError) {
+        return (formData?.errors || []).filter((x) => x.field !== fieldName).concat([typeError]);
+      }
+      return (formData?.errors || []).filter((x) => x.field !== fieldName);
+    }
     default:
       return formData?.errors;
   }
 };
+var validateType = (formData) => {
+  if (!formData?.data.type?.value) {
+    return {
+      field: "type",
+      message: "Must be selected"
+    };
+  }
+  return;
+};
+var validateNormality = (formData) => {
+  const stringValueNormality = formData?.data.normality?.value?.toString();
+  if (stringValueNormality === void 0) {
+    return {
+      field: "normality",
+      message: "Must be selected"
+    };
+  } else if (!["DEBIT", "CREDIT"].includes(stringValueNormality)) {
+    return {
+      field: "normality",
+      message: "Must be selected"
+    };
+  }
+  return;
+};
 var validateName = (formData) => {
   if (!formData?.data.name?.trim()) {
     return {
@@ -6914,9 +7524,9 @@ var validateName = (formData) => {
 var flattenAccounts = (accounts) => accounts.flatMap((a) => [a, flattenAccounts(a.sub_accounts || [])]).flat().filter((id) => id);
 var useChartOfAccounts = () => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [form, setForm] = useState19();
-  const [sendingForm, setSendingForm] = useState19(false);
-  const [apiError, setApiError] = useState19(void 0);
+  const [form, setForm] = useState21();
+  const [sendingForm, setSendingForm] = useState21(false);
+  const [apiError, setApiError] = useState21(void 0);
   const { data, isLoading, isValidating, error, mutate } = useSWR6(
     businessId && auth?.access_token && `chart-of-accounts-${businessId}`,
     Layer.getLedgerAccountBalances(apiUrl, auth?.access_token, {
@@ -6942,14 +7552,8 @@ var useChartOfAccounts = () => {
   const update = async (accountData, accountId) => {
     setSendingForm(true);
     setApiError(void 0);
-    const stable_name = convertToStableName(accountData.name);
     const newAccountData = {
-      ...accountData,
-      stable_name,
-      pnl_category: "INCOME",
-      //this field will be deprecated soon, but is still required
-      always_show_in_pnl: false
-      //this field will be deprecated soon, but is still required
+      ...accountData
     };
     try {
       await Layer.updateAccount(apiUrl, auth?.access_token, {
@@ -6978,13 +7582,14 @@ var useChartOfAccounts = () => {
     }
     const data2 = {
       name: form.data.name ?? "",
-      normality: form.data.subType?.value,
+      stable_name: form.data.stable_name,
       parent_id: form.data.parent ? {
         type: "AccountId",
         id: form.data.parent.value
       } : void 0,
       account_type: form.data.type.value.toString(),
-      account_subtype: form.data.subType?.value.toString()
+      account_subtype: form.data.subType?.value.toString(),
+      normality: form.data.normality?.value
     };
     if (form.action === "new") {
       create(data2);
@@ -7001,10 +7606,8 @@ var useChartOfAccounts = () => {
     data: {
       parent: void 0,
       name: void 0,
-      type: {
-        value: "ASSETS",
-        label: "Assets"
-      },
+      type: void 0,
+      normality: void 0,
       subType: void 0
     }
   });
@@ -7025,12 +7628,19 @@ var useChartOfAccounts = () => {
           value: parent.id,
           label: parent.name
         } : void 0,
+        stable_name: found.stable_name,
         name: found.name,
         type: {
-          value: "ASSETS",
-          label: "Assets"
+          value: found.account_type.value,
+          label: found.account_type.display_name
         },
-        subType: void 0
+        subType: found.account_subtype ? {
+          value: found.account_subtype?.value,
+          label: found.account_subtype?.display_name
+        } : void 0,
+        normality: NORMALITY_OPTIONS.find(
+          (normalityOption) => normalityOption.value == found.normality
+        )
       }
     });
   };
@@ -7039,13 +7649,41 @@ var useChartOfAccounts = () => {
     if (!form) {
       return;
     }
-    const newFormData = {
+    let newFormData = {
       ...form,
       data: {
         ...form.data,
         [fieldName]: value
       }
     };
+    if (fieldName === "parent") {
+      const allAccounts = flattenAccounts(data?.data?.accounts || []);
+      const foundParent = allAccounts?.find(
+        (x) => x.id === value.value
+      );
+      if (foundParent) {
+        newFormData = {
+          ...newFormData,
+          data: {
+            ...newFormData.data,
+            /* Inherit the parent's type */
+            type: {
+              value: foundParent.account_type.value,
+              label: foundParent.account_type.display_name
+            },
+            /* If the parent has a subtype, inherit it */
+            subType: foundParent.account_subtype ? {
+              value: foundParent.account_subtype?.value,
+              label: foundParent.account_subtype?.display_name
+            } : void 0,
+            /* Inherit the parent's normality */
+            normality: NORMALITY_OPTIONS.find(
+              (normalityOption) => normalityOption.value == foundParent.normality
+            )
+          }
+        };
+      }
+    }
     const errors = revalidateField(fieldName, newFormData);
     setForm({
       ...newFormData,
@@ -7072,12 +7710,12 @@ var useChartOfAccounts = () => {
 };
 
 // src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
-import { useState as useState20 } from "react";
+import { useState as useState22 } from "react";
 import useSWR7 from "swr";
 var useLedgerAccounts = () => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [accountId, setAccountId] = useState20();
-  const [selectedEntryId, setSelectedEntryId] = useState20();
+  const [accountId, setAccountId] = useState22();
+  const [selectedEntryId, setSelectedEntryId] = useState22();
   const { data, isLoading, isValidating, error, mutate } = useSWR7(
     businessId && accountId && auth?.access_token && `ledger-accounts-lines-${businessId}-${accountId}`,
     Layer.getLedgerAccountsLines(apiUrl, auth?.access_token, {
@@ -7123,7 +7761,7 @@ var useLedgerAccounts = () => {
 import React88, { useContext as useContext10 } from "react";
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-import React84, { useContext as useContext8, useEffect as useEffect13, useState as useState21 } from "react";
+import React84, { useContext as useContext8, useEffect as useEffect15, useState as useState23 } from "react";
 
 // src/icons/Edit2.tsx
 import * as React83 from "react";
@@ -7150,7 +7788,7 @@ var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React83.createElement(
 var Edit2_default = Edit2;
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-import classNames30 from "classnames";
+import classNames32 from "classnames";
 var INDENTATION = 24;
 var MOBILE_INDENTATION = 12;
 var EXPANDED_STYLE = {
@@ -7184,7 +7822,7 @@ var ChartOfAccountsRow = ({
   const { form, editAccount } = useContext8(ChartOfAccountsContext);
   const { setAccountId } = useContext8(LedgerAccountsContext);
   const baseStyle = view === "desktop" ? EXPANDED_STYLE : EXPANDED_MOBILE_STYLE;
-  const [isOpen, setIsOpen] = useState21(defaultOpen);
+  const [isOpen, setIsOpen] = useState23(defaultOpen);
   const style = expanded ? {
     ...baseStyle,
     transitionDelay: `${15 * index}ms`
@@ -7192,14 +7830,14 @@ var ChartOfAccountsRow = ({
     ...COLLAPSED_STYLE,
     transitionDelay: `${acountsLength - 15 * index}ms`
   };
-  const [showComponent, setShowComponent] = useState21(false);
-  useEffect13(() => {
+  const [showComponent, setShowComponent] = useState23(false);
+  useEffect15(() => {
     const timeoutId = setTimeout(() => {
       setShowComponent(true);
     }, cumulativeIndex * 50);
     return () => clearTimeout(timeoutId);
   }, []);
-  const baseClass = classNames30(
+  const baseClass = classNames32(
     "Layer__table-row",
     isOpen ? "Layer__table-row--expanded" : "Layer__table-row--collapsed",
     !expanded && "Layer__table-row--hidden",
@@ -7207,11 +7845,11 @@ var ChartOfAccountsRow = ({
     form?.accountId === account.id && "Layer__table-row--active",
     !showComponent && "Layer__table-row--anim-starting-state"
   );
-  const desktopRowClass = classNames30(
+  const desktopRowClass = classNames32(
     baseClass,
     "Layer__chart-of-accounts__row---desktop"
   );
-  const mobileRowClass = classNames30(
+  const mobileRowClass = classNames32(
     baseClass,
     "Layer__chart-of-accounts__row---mobile"
   );
@@ -7369,23 +8007,11 @@ var ChartOfAccountsRow = ({
 import React87 from "react";
 
 // src/components/ChartOfAccountsForm/ChartOfAccountsForm.tsx
-import React86, { useContext as useContext9, useMemo as useMemo8 } from "react";
-
-// src/components/ChartOfAccountsForm/constants.ts
-var SUB_TYPE_OPTIONS = [
-  {
-    value: "DEBIT" /* DEBIT */,
-    label: "Debit"
-  },
-  {
-    value: "CREDIT" /* CREDIT */,
-    label: "Credit"
-  }
-];
+import React86, { useContext as useContext9, useMemo as useMemo9 } from "react";
 
 // src/components/ChartOfAccountsForm/useParentOptions.ts
-import { useMemo as useMemo7 } from "react";
-var useParentOptions = (data) => useMemo7(
+import { useMemo as useMemo8 } from "react";
+var useParentOptions = (data) => useMemo8(
   () => flattenAccounts(data?.accounts || []).sort((a, b) => a?.name && b?.name ? a.name.localeCompare(b.name) : 0).map((x) => {
     return {
       label: x.name,
@@ -7407,7 +8033,7 @@ var ChartOfAccountsForm = () => {
     apiError
   } = useContext9(ChartOfAccountsContext);
   const parentOptions = useParentOptions(data);
-  const entry = useMemo8(() => {
+  const entry = useMemo9(() => {
     if (form?.action === "edit" && form.accountId) {
       return flattenAccounts(data?.accounts || []).find(
         (x) => x.id === form.accountId
@@ -7486,19 +8112,33 @@ var ChartOfAccountsForm = () => {
     )), /* @__PURE__ */ React86.createElement(InputGroup, { name: "type", label: "Type", inline: true }, /* @__PURE__ */ React86.createElement(
       Select2,
       {
-        options: [],
-        disabled: true,
+        options: LEDGER_ACCOUNT_TYPES,
         value: form?.data.type,
-        onChange: (sel) => changeFormData("type", sel)
+        onChange: (sel) => changeFormData("type", sel),
+        isInvalid: Boolean(form?.errors?.find((x) => x.field === "type")),
+        errorMessage: form?.errors?.find((x) => x.field === "type")?.message,
+        disabled: sendingForm || form.action === "edit" || form.data.parent !== void 0
       }
     )), /* @__PURE__ */ React86.createElement(InputGroup, { name: "subType", label: "Sub-Type", inline: true }, /* @__PURE__ */ React86.createElement(
       Select2,
       {
-        options: SUB_TYPE_OPTIONS,
+        options: form?.data.type?.value !== void 0 ? LEDGER_ACCOUNT_SUBTYPES_FOR_TYPE[form?.data.type?.value] : LEDGER_ACCOUNT_SUBTYPES,
         value: form?.data.subType,
         onChange: (sel) => changeFormData("subType", sel),
         disabled: sendingForm
       }
+    )), /* @__PURE__ */ React86.createElement(InputGroup, { name: "normality", label: "Normality", inline: true }, /* @__PURE__ */ React86.createElement(
+      Select2,
+      {
+        options: NORMALITY_OPTIONS,
+        value: form?.data.normality,
+        isInvalid: Boolean(
+          form?.errors?.find((x) => x.field === "normality")
+        ),
+        errorMessage: form?.errors?.find((x) => x.field === "normality")?.message,
+        onChange: (sel) => changeFormData("normality", sel),
+        disabled: sendingForm
+      }
     )))
   );
 };
@@ -7580,19 +8220,19 @@ var ChartOfAccountsTable = ({
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
 import React95, {
   useContext as useContext13,
-  useEffect as useEffect15,
-  useMemo as useMemo10,
-  useState as useState23
+  useEffect as useEffect17,
+  useMemo as useMemo11,
+  useState as useState25
 } from "react";
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
-import React93, { useContext as useContext11, useMemo as useMemo9 } from "react";
+import React93, { useContext as useContext11, useMemo as useMemo10 } from "react";
 
 // src/components/Card/Card.tsx
 import React89 from "react";
-import classNames31 from "classnames";
+import classNames33 from "classnames";
 var Card = ({ children, className }) => {
-  return /* @__PURE__ */ React89.createElement("div", { className: classNames31("Layer__card", className) }, children);
+  return /* @__PURE__ */ React89.createElement("div", { className: classNames33("Layer__card", className) }, children);
 };
 
 // src/components/DateTime/DateTime.tsx
@@ -7634,14 +8274,14 @@ var DateTime = ({
 
 // src/components/DetailsList/DetailsList.tsx
 import React91 from "react";
-import classNames32 from "classnames";
+import classNames34 from "classnames";
 var DetailsList = ({
   title,
   children,
   className,
   actions
 }) => {
-  return /* @__PURE__ */ React91.createElement("div", { className: classNames32("Layer__details-list", className) }, title && /* @__PURE__ */ React91.createElement(Header, null, /* @__PURE__ */ React91.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ React91.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ React91.createElement("ul", { className: "Layer__details-list__list" }, children));
+  return /* @__PURE__ */ React91.createElement("div", { className: classNames34("Layer__details-list", className) }, title && /* @__PURE__ */ React91.createElement(Header, null, /* @__PURE__ */ React91.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ React91.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ React91.createElement("ul", { className: "Layer__details-list__list" }, children));
 };
 
 // src/components/DetailsList/DetailsListItem.tsx
@@ -7697,7 +8337,7 @@ var SourceDetailView = ({ source }) => {
 };
 var LedgerAccountEntryDetails = () => {
   const { entryData, isLoadingEntry, closeSelectedEntry, errorEntry } = useContext11(LedgerAccountsContext);
-  const { totalDebit, totalCredit } = useMemo9(() => {
+  const { totalDebit, totalCredit } = useMemo10(() => {
     let totalDebit2 = 0;
     let totalCredit2 = 0;
     entryData?.line_items?.forEach((item) => {
@@ -7722,7 +8362,7 @@ var LedgerAccountEntryDetails = () => {
         }
       )
     },
-    /* @__PURE__ */ React93.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ React93.createElement(Badge, null, entryData?.source?.type)),
+    /* @__PURE__ */ React93.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ React93.createElement(Badge, null, entryData?.source?.entity_name)),
     entryData?.source?.display_description && /* @__PURE__ */ React93.createElement(SourceDetailView, { source: entryData?.source })
   ), /* @__PURE__ */ React93.createElement(
     DetailsList,
@@ -7738,8 +8378,8 @@ var LedgerAccountEntryDetails = () => {
 };
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
-import React94, { useContext as useContext12, useEffect as useEffect14, useState as useState22 } from "react";
-import classNames33 from "classnames";
+import React94, { useContext as useContext12, useEffect as useEffect16, useState as useState24 } from "react";
+import classNames35 from "classnames";
 import { parseISO as parseISO10, format as formatTime8 } from "date-fns";
 var LedgerAccountRow = ({
   row,
@@ -7748,8 +8388,8 @@ var LedgerAccountRow = ({
   view
 }) => {
   const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext12(LedgerAccountsContext);
-  const [showComponent, setShowComponent] = useState22(false);
-  useEffect14(() => {
+  const [showComponent, setShowComponent] = useState24(false);
+  useEffect16(() => {
     if (initialLoad) {
       const timeoutId = setTimeout(() => {
         setShowComponent(true);
@@ -7763,7 +8403,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ React94.createElement(
       "tr",
       {
-        className: classNames33(
+        className: classNames35(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -7796,7 +8436,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ React94.createElement(
       "tr",
       {
-        className: classNames33(
+        className: classNames35(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -7825,7 +8465,7 @@ var LedgerAccountRow = ({
   return /* @__PURE__ */ React94.createElement(
     "tr",
     {
-      className: classNames33(
+      className: classNames35(
         "Layer__table-row",
         row.entry_id === selectedEntryId && "Layer__table-row--active",
         initialLoad && "initial-load",
@@ -7851,14 +8491,14 @@ var LedgerAccountRow = ({
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-import classNames34 from "classnames";
+import classNames36 from "classnames";
 var LedgerAccount = ({
   containerRef,
   pageSize = 15,
   view
 }) => {
-  const [currentPage, setCurrentPage] = useState23(1);
-  const [initialLoad, setInitialLoad] = useState23(true);
+  const [currentPage, setCurrentPage] = useState25(1);
+  const [initialLoad, setInitialLoad] = useState25(true);
   const { data: accountData } = useContext13(ChartOfAccountsContext);
   const {
     data: rawData,
@@ -7871,7 +8511,7 @@ var LedgerAccount = ({
     closeSelectedEntry,
     refetch
   } = useContext13(LedgerAccountsContext);
-  useEffect15(() => {
+  useEffect17(() => {
     if (!isLoading) {
       const timeoutLoad = setTimeout(() => {
         setInitialLoad(false);
@@ -7879,16 +8519,16 @@ var LedgerAccount = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [isLoading]);
-  const baseClassName = classNames34(
+  const baseClassName = classNames36(
     "Layer__ledger-account__index",
     accountId && "open"
   );
-  const entry = useMemo10(() => {
+  const entry = useMemo11(() => {
     return flattenAccounts(accountData?.accounts || []).find(
       (x) => x.id === accountId
     );
   }, [accountId]);
-  const data = useMemo10(() => {
+  const data = useMemo11(() => {
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
     return rawData?.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))?.slice(firstPageIndex, lastPageIndex);
@@ -8025,7 +8665,7 @@ var ChartOfAccounts = (props) => {
 };
 var ChartOfAccountsContent = ({ asWidget }) => {
   const { accountId } = useContext14(LedgerAccountsContext);
-  const [view, setView] = useState24("desktop");
+  const [view, setView] = useState26("desktop");
   const containerRef = useElementSize((_a, _b, { width }) => {
     if (width) {
       if (width >= BREAKPOINTS.TABLET && view !== "desktop") {
@@ -8041,7 +8681,7 @@ var ChartOfAccountsContent = ({ asWidget }) => {
 };
 
 // src/providers/LayerProvider/LayerProvider.tsx
-import React97, { useReducer, useEffect as useEffect16 } from "react";
+import React97, { useReducer, useEffect as useEffect18 } from "react";
 import { add as add2, isBefore } from "date-fns";
 import useSWR8, { SWRConfig } from "swr";
 var reducer = (state, action) => {
@@ -8106,7 +8746,7 @@ var LayerProvider = ({
     }),
     defaultSWRConfig
   ) : { data: void 0 };
-  useEffect16(() => {
+  useEffect18(() => {
     if (businessAccessToken) {
       dispatch({
         type: "LayerContext.setAuth" /* setAuth */,