@layerfi/components 0.1.26 → 0.1.27

package/dist/esm/index.js

@@ -928,7 +928,29 @@ function hasSuggestions(categorization) {
   return categorization.suggestions !== void 0;
 }
 
+// src/components/BankTransactions/constants.ts
+var CategorizedCategories = [
+  "CATEGORIZED" /* CATEGORIZED */,
+  "JOURNALING" /* JOURNALING */,
+  "SPLIT" /* SPLIT */,
+  "MATCHED" /* MATCHED */
+];
+var ReviewCategories = [
+  "READY_FOR_INPUT" /* READY_FOR_INPUT */,
+  "LAYER_REVIEW" /* LAYER_REVIEW */
+];
+
+// src/components/BankTransactions/utils.ts
+var filterVisibility = (display, bankTransaction) => {
+  const categorized = CategorizedCategories.includes(
+    bankTransaction.categorization_status
+  );
+  const inReview = ReviewCategories.includes(bankTransaction.categorization_status) && !bankTransaction.recently_categorized;
+  return display === "review" /* review */ && inReview || display === "categorized" /* categorized */ && categorized;
+};
+
 // src/utils/bankTransactions.ts
+import { endOfMonth, isWithinInterval, parseISO as parseISO2, startOfMonth } from "date-fns";
 var hasMatch = (bankTransaction) => {
   return Boolean(
     bankTransaction?.suggested_matches && bankTransaction?.suggested_matches?.length > 0 || bankTransaction?.match
@@ -944,6 +966,40 @@ var isAlreadyMatched = (bankTransaction) => {
   }
   return void 0;
 };
+var countTransactionsToReview = ({
+  transactions,
+  currentMonthOnly
+}) => {
+  if (transactions && transactions.length > 0) {
+    if (currentMonthOnly) {
+      const currentMonth = {
+        start: startOfMonth(/* @__PURE__ */ new Date()),
+        end: endOfMonth(/* @__PURE__ */ new Date())
+      };
+      return transactions.filter((tx) => {
+        try {
+          return filterVisibility("review" /* review */, tx) && isWithinInterval(parseISO2(tx.date), currentMonth);
+        } catch (_err) {
+          return false;
+        }
+      }).length;
+    }
+    return transactions.filter((tx) => filterVisibility("review" /* review */, tx)).length;
+  }
+  return 0;
+};
+var getCategorizePayload = (category) => {
+  if (category?.payload && "id" in category.payload && category.payload.id) {
+    return {
+      type: "AccountId",
+      id: category.payload.id
+    };
+  }
+  return {
+    type: "StableName",
+    stable_name: category?.payload.stable_name || ""
+  };
+};
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
 import React51, { useEffect as useEffect7, useRef as useRef9, useState as useState10 } from "react";
@@ -1860,7 +1916,7 @@ var MinimizeTwo_default = MinimizeTwo;
 
 // src/components/CategorySelect/CategorySelect.tsx
 import classNames9 from "classnames";
-import { parseISO as parseISO2, format as formatTime } from "date-fns";
+import { parseISO as parseISO3, format as formatTime } from "date-fns";
 var mapCategoryToOption = (category) => {
   return {
     type: "category" /* CATEGORY */,
@@ -1912,7 +1968,7 @@ var Option = (props) => {
         ...props,
         className: `${props.className} Layer__select__option-content__match`
       },
-      /* @__PURE__ */ React29.createElement("div", { className: "Layer__select__option-content__match__main-row" }, /* @__PURE__ */ React29.createElement("span", { className: "Layer__select__option-content__match__date" }, props.data.payload.date && formatTime(parseISO2(props.data.payload.date), DATE_FORMAT)), /* @__PURE__ */ React29.createElement("span", { className: "Layer__select__option-content__match__description" }, props.data.payload.display_name)),
+      /* @__PURE__ */ React29.createElement("div", { className: "Layer__select__option-content__match__main-row" }, /* @__PURE__ */ React29.createElement("span", { className: "Layer__select__option-content__match__date" }, props.data.payload.date && formatTime(parseISO3(props.data.payload.date), DATE_FORMAT)), /* @__PURE__ */ React29.createElement("span", { className: "Layer__select__option-content__match__description" }, props.data.payload.display_name)),
       /* @__PURE__ */ React29.createElement("div", { className: "Layer__select__option-content__match__amount-row" }, /* @__PURE__ */ React29.createElement("span", { className: "Layer__select__option-content__match__amount" }, "$", centsToDollars(props.data.payload.amount)))
     );
   }
@@ -2499,7 +2555,7 @@ import React43 from "react";
 
 // src/components/BankTransactionRow/MatchBadge.tsx
 import React42 from "react";
-import { parseISO as parseISO3, format as formatTime2 } from "date-fns";
+import { parseISO as parseISO4, format as formatTime2 } from "date-fns";
 var MatchBadge = ({
   bankTransaction,
   classNamePrefix,
@@ -2512,7 +2568,7 @@ var MatchBadge = ({
       Badge,
       {
         icon: /* @__PURE__ */ React42.createElement(MinimizeTwo_default, { size: 11 }),
-        tooltip: /* @__PURE__ */ React42.createElement("span", { className: `${classNamePrefix}__match-tooltip` }, /* @__PURE__ */ React42.createElement("div", { className: `${classNamePrefix}__match-tooltip__date` }, formatTime2(parseISO3(date), dateFormat)), /* @__PURE__ */ React42.createElement("div", { className: `${classNamePrefix}__match-tooltip__description` }, bankTransaction.match?.details?.description ?? ""), /* @__PURE__ */ React42.createElement("div", { className: `${classNamePrefix}__match-tooltip__amount` }, "$", centsToDollars(amount)))
+        tooltip: /* @__PURE__ */ React42.createElement("span", { className: `${classNamePrefix}__match-tooltip` }, /* @__PURE__ */ React42.createElement("div", { className: `${classNamePrefix}__match-tooltip__date` }, formatTime2(parseISO4(date), dateFormat)), /* @__PURE__ */ React42.createElement("div", { className: `${classNamePrefix}__match-tooltip__description` }, bankTransaction.match?.details?.description ?? ""), /* @__PURE__ */ React42.createElement("div", { className: `${classNamePrefix}__match-tooltip__amount` }, "$", centsToDollars(amount)))
       },
       text
     );
@@ -2522,7 +2578,7 @@ var MatchBadge = ({
 
 // src/components/MatchForm/MatchForm.tsx
 import classNames18 from "classnames";
-import { parseISO as parseISO4, format as formatTime3 } from "date-fns";
+import { parseISO as parseISO5, format as formatTime3 } from "date-fns";
 var MatchForm = ({
   classNamePrefix,
   bankTransaction,
@@ -2557,7 +2613,7 @@ var MatchForm = ({
         {
           className: `Layer__nowrap ${classNamePrefix}__match-table__date`
         },
-        /* @__PURE__ */ React43.createElement("span", null, formatTime3(parseISO4(match.details.date), DATE_FORMAT)),
+        /* @__PURE__ */ React43.createElement("span", null, formatTime3(parseISO5(match.details.date), DATE_FORMAT)),
         /* @__PURE__ */ React43.createElement("span", { className: "amount-next-to-date" }, "$", centsToDollars(match.details.amount))
       ),
       /* @__PURE__ */ React43.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, /* @__PURE__ */ React43.createElement(
@@ -2600,7 +2656,7 @@ var MatchForm = ({
 // src/components/MatchForm/MatchFormMobile.tsx
 import React44 from "react";
 import classNames19 from "classnames";
-import { parseISO as parseISO5, format as formatTime4 } from "date-fns";
+import { parseISO as parseISO6, format as formatTime4 } from "date-fns";
 var MatchFormMobile = ({
   classNamePrefix,
   bankTransaction,
@@ -2647,7 +2703,7 @@ var MatchFormMobile = ({
           size: "sm" /* sm */,
           as: "span"
         },
-        formatTime4(parseISO5(match.details.date), MONTH_DAY_FORMAT)
+        formatTime4(parseISO6(match.details.date), MONTH_DAY_FORMAT)
       ))),
       /* @__PURE__ */ React44.createElement("div", { className: `${classNamePrefix}__match-item__col-status` }, selectedMatchId && selectedMatchId === match.id ? /* @__PURE__ */ React44.createElement(
         Check_default,
@@ -3121,16 +3177,13 @@ var ExpandedBankTransactionRow = forwardRef2(
       }
       await categorizeBankTransaction2(
         bankTransaction.id,
-        rowState.splits.length === 1 ? {
+        rowState.splits.length === 1 && rowState?.splits[0].category ? {
           type: "Category",
-          category: {
-            type: "StableName",
-            stable_name: rowState?.splits[0].category?.payload.stable_name
-          }
+          category: getCategorizePayload(rowState?.splits[0].category)
         } : {
           type: "Split",
           entries: rowState.splits.map((split) => ({
-            category: split.category?.payload.stable_name,
+            category: split.category ? getCategorizePayload(split.category) : "",
             amount: split.amount
           }))
         }
@@ -3382,7 +3435,7 @@ var SplitTooltipDetails = ({
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
 import classNames23 from "classnames";
-import { parseISO as parseISO6, format as formatTime5 } from "date-fns";
+import { parseISO as parseISO7, format as formatTime5 } from "date-fns";
 var extractDescriptionForSplit = (category) => {
   if (!category.entries) {
     return "";
@@ -3469,10 +3522,7 @@ var BankTransactionRow = ({
     }
     await categorizeBankTransaction2(bankTransaction.id, {
       type: "Category",
-      category: {
-        type: "StableName",
-        stable_name: selectedCategory?.payload.stable_name || ""
-      }
+      category: getCategorizePayload(selectedCategory)
     });
     setOpen(false);
   };
@@ -3507,7 +3557,7 @@ var BankTransactionRow = ({
         className: "Layer__table-cell  Layer__bank-transaction-table__date-col",
         ...openRow
       },
-      /* @__PURE__ */ React51.createElement("span", { className: "Layer__table-cell-content" }, formatTime5(parseISO6(bankTransaction.date), dateFormat))
+      /* @__PURE__ */ React51.createElement("span", { className: "Layer__table-cell-content" }, formatTime5(parseISO7(bankTransaction.date), dateFormat))
     ),
     /* @__PURE__ */ React51.createElement(
       "td",
@@ -3601,7 +3651,7 @@ var BankTransactionRow = ({
             dateFormat
           }
         ), /* @__PURE__ */ React51.createElement("span", { className: `${className}__category-text__text` }, `${formatTime5(
-          parseISO6(bankTransaction.match.bank_transaction.date),
+          parseISO7(bankTransaction.match.bank_transaction.date),
           dateFormat
         )}, ${bankTransaction.match?.details?.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ React51.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
         editable && !open && showRetry ? /* @__PURE__ */ React51.createElement(
@@ -3676,7 +3726,7 @@ var BankTransactionRow = ({
 
 // src/components/BankTransactionList/Assignment.tsx
 import React52 from "react";
-import { parseISO as parseISO7, format as formatTime6 } from "date-fns";
+import { parseISO as parseISO8, format as formatTime6 } from "date-fns";
 var Assignment = ({ bankTransaction }) => {
   if (bankTransaction.match && bankTransaction.categorization_status === "MATCHED" /* MATCHED */) {
     return /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(
@@ -3688,7 +3738,7 @@ var Assignment = ({ bankTransaction }) => {
         text: "Matched"
       }
     ), /* @__PURE__ */ React52.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, `${formatTime6(
-      parseISO7(bankTransaction.match.bank_transaction.date),
+      parseISO8(bankTransaction.match.bank_transaction.date),
       DATE_FORMAT
     )}, ${bankTransaction.match.bank_transaction.description}`));
   }
@@ -3713,7 +3763,7 @@ var Assignment = ({ bankTransaction }) => {
 
 // src/components/BankTransactionList/BankTransactionListItem.tsx
 import classNames24 from "classnames";
-import { parseISO as parseISO8, format as formatTime7 } from "date-fns";
+import { parseISO as parseISO9, format as formatTime7 } from "date-fns";
 var BankTransactionListItem = ({
   index = 0,
   dateFormat,
@@ -3761,10 +3811,7 @@ var BankTransactionListItem = ({
     }
     categorizeBankTransaction2(bankTransaction.id, {
       type: "Category",
-      category: {
-        type: "StableName",
-        stable_name: selectedCategory?.payload.stable_name || ""
-      }
+      category: getCategorizePayload(selectedCategory)
     });
   };
   if (removed) {
@@ -3778,7 +3825,7 @@ var BankTransactionListItem = ({
     open ? openClassName : "",
     showComponent ? "show" : ""
   );
-  return /* @__PURE__ */ React53.createElement("li", { className: rowClassName }, /* @__PURE__ */ React53.createElement("span", { className: `${className}__heading` }, /* @__PURE__ */ React53.createElement("div", { className: `${className}__heading__main` }, /* @__PURE__ */ React53.createElement("span", { className: `${className}__heading-date` }, formatTime7(parseISO8(bankTransaction.date), dateFormat)), /* @__PURE__ */ React53.createElement("span", { className: `${className}__heading-separator` }), /* @__PURE__ */ React53.createElement("span", { className: `${className}__heading-account-name` }, bankTransaction.account_name ?? "")), /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React53.createElement("li", { className: rowClassName }, /* @__PURE__ */ React53.createElement("span", { className: `${className}__heading` }, /* @__PURE__ */ React53.createElement("div", { className: `${className}__heading__main` }, /* @__PURE__ */ React53.createElement("span", { className: `${className}__heading-date` }, formatTime7(parseISO9(bankTransaction.date), dateFormat)), /* @__PURE__ */ React53.createElement("span", { className: `${className}__heading-separator` }), /* @__PURE__ */ React53.createElement("span", { className: `${className}__heading-account-name` }, bankTransaction.account_name ?? "")), /* @__PURE__ */ React53.createElement(
     "div",
     {
       onClick: toggleOpen,
@@ -4103,14 +4150,18 @@ var BusinessForm = ({ bankTransaction }) => {
     if (!selectedCategory || !selectedCategory.value.payload) {
       return;
     }
+    const payload = selectedCategory?.value?.payload?.id ? {
+      type: "AccountId",
+      id: selectedCategory.value.payload.id
+    } : {
+      type: "StableName",
+      stable_name: selectedCategory.value.payload?.stable_name || ""
+    };
     categorizeBankTransaction2(
       bankTransaction.id,
       {
         type: "Category",
-        category: {
-          type: "StableName",
-          stable_name: selectedCategory.value.payload.stable_name || ""
-        }
+        category: payload
       },
       true
     );
@@ -4400,16 +4451,13 @@ var SplitForm = ({
     }
     await categorizeBankTransaction2(
       bankTransaction.id,
-      rowState.splits.length === 1 ? {
+      rowState.splits.length === 1 && rowState?.splits[0].category ? {
         type: "Category",
-        category: {
-          type: "StableName",
-          stable_name: rowState?.splits[0].category?.payload.stable_name
-        }
+        category: getCategorizePayload(rowState?.splits[0].category)
       } : {
         type: "Split",
         entries: rowState.splits.map((split) => ({
-          category: split.category?.payload.stable_name,
+          category: split.category ? getCategorizePayload(split.category) : "",
           amount: split.amount
         }))
       },
@@ -4544,7 +4592,7 @@ var TransactionToOpenContext = createContext3({
 
 // src/components/BankTransactionMobileList/BankTransactionMobileListItem.tsx
 import classNames27 from "classnames";
-import { parseISO as parseISO9, format as formatTime8 } from "date-fns";
+import { parseISO as parseISO10, format as formatTime8 } from "date-fns";
 var DATE_FORMAT2 = "LLL d";
 var getAssignedValue2 = (bankTransaction) => {
   if (bankTransaction.categorization_status === "SPLIT" /* SPLIT */) {
@@ -4670,7 +4718,7 @@ var BankTransactionMobileListItem = ({
         },
         isCredit(bankTransaction) ? "+$" : " $",
         centsToDollars(bankTransaction.amount)
-      ), /* @__PURE__ */ React64.createElement("span", { className: `${className}__heading__date` }, formatTime8(parseISO9(bankTransaction.date), DATE_FORMAT2))))
+      ), /* @__PURE__ */ React64.createElement("span", { className: `${className}__heading__date` }, formatTime8(parseISO10(bankTransaction.date), DATE_FORMAT2))))
     ),
     /* @__PURE__ */ React64.createElement("div", { className: `${className}__expanded-row`, style: { height } }, open && /* @__PURE__ */ React64.createElement(
       "div",
@@ -5212,11 +5260,11 @@ var Pagination = ({
 import React75, { useState as useState23 } from "react";
 
 // src/utils/business.ts
-import { differenceInCalendarMonths, parseISO as parseISO10, startOfMonth } from "date-fns";
+import { differenceInCalendarMonths, parseISO as parseISO11, startOfMonth as startOfMonth2 } from "date-fns";
 var getActivationDate = (business) => {
   try {
     if (business && business.activation_at) {
-      return parseISO10(business.activation_at);
+      return parseISO11(business.activation_at);
     }
     return;
   } catch (_err) {
@@ -5226,7 +5274,7 @@ var getActivationDate = (business) => {
 var getEarliestDateToBrowse = (business) => {
   const activationDate = getActivationDate(business);
   if (activationDate) {
-    return startOfMonth(activationDate);
+    return startOfMonth2(activationDate);
   }
   return;
 };
@@ -5238,7 +5286,7 @@ var isDateAllowedToBrowse = (date, business) => {
   if (!activationDate) {
     return true;
   }
-  return differenceInCalendarMonths(startOfMonth(date), activationDate) >= 0;
+  return differenceInCalendarMonths(startOfMonth2(date), activationDate) >= 0;
 };
 
 // src/components/DateMonthPicker/DateMonthPicker.tsx
@@ -5280,7 +5328,7 @@ function useSizeClass() {
 
 // src/components/DateMonthPicker/DateMonthPicker.tsx
 import classNames30 from "classnames";
-import { add, endOfMonth, format as format4, startOfMonth as startOfMonth2 } from "date-fns";
+import { add, endOfMonth as endOfMonth2, format as format4, startOfMonth as startOfMonth3 } from "date-fns";
 var DateMonthPicker = ({
   dateRange,
   changeDateRange,
@@ -5314,8 +5362,8 @@ var DateMonthPicker = ({
       setCurrentOpacity(0);
     }
     changeDateRange({
-      startDate: startOfMonth2(newDate),
-      endDate: endOfMonth(newDate)
+      startDate: startOfMonth3(newDate),
+      endDate: endOfMonth2(newDate)
     });
     const translateXValue = monthsToAdd > 0 ? "0%" : "66%";
     setTransformStyle({
@@ -5336,15 +5384,15 @@ var DateMonthPicker = ({
   const currentLabel = format4(localDate, "LLLL, y");
   const prevLabel = format4(add(localDate, { months: -1 }), "LLLL, y");
   const nextLabel = format4(add(localDate, { months: 1 }), "LLLL, y");
-  const today = startOfMonth2(Date.now());
+  const today = startOfMonth3(Date.now());
   const isTodayOrAfter = Boolean(
     localDate.getFullYear() === today.getFullYear() && localDate.getMonth() === today.getMonth()
   );
   const setCurrentDate = () => {
     setLocalDate(today);
     changeDateRange({
-      startDate: startOfMonth2(today),
-      endDate: endOfMonth(today)
+      startDate: startOfMonth3(today),
+      endDate: endOfMonth2(today)
     });
   };
   useEffect14(() => {
@@ -5546,18 +5594,6 @@ var Tabs = ({ name, options, selected, onChange }) => {
   )), /* @__PURE__ */ React74.createElement("span", { className: "Layer__tabs__thumb", style: { ...thumbPos } }));
 };
 
-// src/components/BankTransactions/constants.ts
-var CategorizedCategories = [
-  "CATEGORIZED" /* CATEGORIZED */,
-  "JOURNALING" /* JOURNALING */,
-  "SPLIT" /* SPLIT */,
-  "MATCHED" /* MATCHED */
-];
-var ReviewCategories = [
-  "READY_FOR_INPUT" /* READY_FOR_INPUT */,
-  "LAYER_REVIEW" /* LAYER_REVIEW */
-];
-
 // src/components/BankTransactions/BankTransactionsHeader.tsx
 import classNames32 from "classnames";
 var DownloadButton = () => {
@@ -5780,17 +5816,8 @@ var DataStates = ({
   )) : null);
 };
 
-// src/components/BankTransactions/utils.ts
-var filterVisibility = (display, bankTransaction) => {
-  const categorized = CategorizedCategories.includes(
-    bankTransaction.categorization_status
-  );
-  const inReview = ReviewCategories.includes(bankTransaction.categorization_status) && !bankTransaction.recently_categorized;
-  return display === "review" /* review */ && inReview || display === "categorized" /* categorized */ && categorized;
-};
-
 // src/components/BankTransactions/BankTransactions.tsx
-import { endOfMonth as endOfMonth2, parseISO as parseISO11, startOfMonth as startOfMonth3 } from "date-fns";
+import { endOfMonth as endOfMonth3, parseISO as parseISO12, startOfMonth as startOfMonth4 } from "date-fns";
 var COMPONENT_NAME = "bank-transactions";
 var BankTransactions = ({
   asWidget = false,
@@ -5808,8 +5835,8 @@ var BankTransactions = ({
   const [removedTxs, setRemovedTxs] = useState24([]);
   const [initialLoad, setInitialLoad] = useState24(true);
   const [dateRange, setDateRange] = useState24({
-    startDate: startOfMonth3(/* @__PURE__ */ new Date()),
-    endDate: endOfMonth2(/* @__PURE__ */ new Date())
+    startDate: startOfMonth4(/* @__PURE__ */ new Date()),
+    endDate: endOfMonth3(/* @__PURE__ */ new Date())
   });
   const { data, isLoading, loadingStatus, error, isValidating, refetch } = useBankTransactions();
   const bankTransactionsByFilter = data?.filter(
@@ -5826,7 +5853,7 @@ var BankTransactions = ({
   const bankTransactions = useMemo4(() => {
     if (monthlyView) {
       return bankTransactionsByFilter?.filter(
-        (x) => parseISO11(x.date) >= dateRange.startDate && parseISO11(x.date) <= dateRange.endDate
+        (x) => parseISO12(x.date) >= dateRange.startDate && parseISO12(x.date) <= dateRange.endDate
       );
     }
     const firstPageIndex = (currentPage - 1) * pageSize;
@@ -7090,7 +7117,7 @@ var applyShare = (items, total) => {
 };
 
 // src/hooks/useProfitAndLoss/useProfitAndLossQuery.tsx
-import { startOfMonth as startOfMonth4, endOfMonth as endOfMonth3, formatISO } from "date-fns";
+import { startOfMonth as startOfMonth5, endOfMonth as endOfMonth4, formatISO } from "date-fns";
 import useSWR5 from "swr";
 var useProfitAndLossQuery = ({
   startDate,
@@ -7098,8 +7125,8 @@ var useProfitAndLossQuery = ({
   tagFilter,
   reportingBasis
 } = {
-  startDate: startOfMonth4(/* @__PURE__ */ new Date()),
-  endDate: endOfMonth3(/* @__PURE__ */ new Date())
+  startDate: startOfMonth5(/* @__PURE__ */ new Date()),
+  endDate: endOfMonth4(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl } = useLayerContext();
   const {
@@ -7138,21 +7165,21 @@ var useProfitAndLossQuery = ({
 };
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { startOfMonth as startOfMonth5, endOfMonth as endOfMonth4 } from "date-fns";
+import { startOfMonth as startOfMonth6, endOfMonth as endOfMonth5 } from "date-fns";
 var useProfitAndLoss = ({
   startDate: initialStartDate,
   endDate: initialEndDate,
   tagFilter,
   reportingBasis
 } = {
-  startDate: startOfMonth5(/* @__PURE__ */ new Date()),
-  endDate: endOfMonth4(/* @__PURE__ */ new Date())
+  startDate: startOfMonth6(/* @__PURE__ */ new Date()),
+  endDate: endOfMonth5(/* @__PURE__ */ new Date())
 }) => {
   const [startDate, setStartDate] = useState27(
-    initialStartDate || startOfMonth5(Date.now())
+    initialStartDate || startOfMonth6(Date.now())
   );
   const [endDate, setEndDate] = useState27(
-    initialEndDate || endOfMonth4(Date.now())
+    initialEndDate || endOfMonth5(Date.now())
   );
   const [filters, setFilters] = useState27({
     expenses: void 0,
@@ -7290,14 +7317,14 @@ import React93, { useContext as useContext6, useEffect as useEffect21, useMemo a
 
 // src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
 import { useEffect as useEffect19, useMemo as useMemo6, useState as useState28 } from "react";
-import { startOfMonth as startOfMonth6, sub } from "date-fns";
+import { startOfMonth as startOfMonth7, sub } from "date-fns";
 import useSWR6 from "swr";
 var buildDates = ({ currentDate }) => {
   return {
-    startYear: startOfMonth6(currentDate).getFullYear() - 1,
-    startMonth: startOfMonth6(currentDate).getMonth() + 1,
-    endYear: startOfMonth6(currentDate).getFullYear(),
-    endMonth: startOfMonth6(currentDate).getMonth() + 1
+    startYear: startOfMonth7(currentDate).getFullYear() - 1,
+    startMonth: startOfMonth7(currentDate).getMonth() + 1,
+    endYear: startOfMonth7(currentDate).getFullYear(),
+    endMonth: startOfMonth7(currentDate).getMonth() + 1
   };
 };
 var buildMonthsArray = (startDate, endDate) => {
@@ -7479,9 +7506,9 @@ import classNames37 from "classnames";
 import {
   add as add2,
   differenceInMonths,
-  endOfMonth as endOfMonth6,
+  endOfMonth as endOfMonth7,
   format as format5,
-  startOfMonth as startOfMonth7,
+  startOfMonth as startOfMonth8,
   sub as sub2
 } from "date-fns";
 import {
@@ -7504,46 +7531,46 @@ var getChartWindow = ({
   currentYear,
   currentMonth
 }) => {
-  const today = startOfMonth7(Date.now());
+  const today = startOfMonth8(Date.now());
   const yearAgo = sub2(today, { months: 11 });
-  const current = startOfMonth7(new Date(currentYear, currentMonth - 1, 1));
-  if (differenceInMonths(startOfMonth7(chartWindow.start), current) < 0 && differenceInMonths(startOfMonth7(chartWindow.end), current) > 1) {
+  const current = startOfMonth8(new Date(currentYear, currentMonth - 1, 1));
+  if (differenceInMonths(startOfMonth8(chartWindow.start), current) < 0 && differenceInMonths(startOfMonth8(chartWindow.end), current) > 1) {
     return chartWindow;
   }
-  if (differenceInMonths(startOfMonth7(chartWindow.start), current) === 0) {
+  if (differenceInMonths(startOfMonth8(chartWindow.start), current) === 0) {
     return {
-      start: startOfMonth7(sub2(current, { months: 1 })),
-      end: endOfMonth6(add2(current, { months: 11 }))
+      start: startOfMonth8(sub2(current, { months: 1 })),
+      end: endOfMonth7(add2(current, { months: 11 }))
     };
   }
-  if (differenceInMonths(endOfMonth6(chartWindow.end), endOfMonth6(current)) === 1 && differenceInMonths(today, current) >= 1) {
+  if (differenceInMonths(endOfMonth7(chartWindow.end), endOfMonth7(current)) === 1 && differenceInMonths(today, current) >= 1) {
     return {
-      start: startOfMonth7(sub2(current, { months: 10 })),
-      end: endOfMonth6(add2(current, { months: 2 }))
+      start: startOfMonth8(sub2(current, { months: 10 })),
+      end: endOfMonth7(add2(current, { months: 2 }))
     };
   }
-  if (differenceInMonths(current, startOfMonth7(chartWindow.end)) === 0 && differenceInMonths(current, startOfMonth7(today)) > 0) {
+  if (differenceInMonths(current, startOfMonth8(chartWindow.end)) === 0 && differenceInMonths(current, startOfMonth8(today)) > 0) {
     return {
-      start: startOfMonth7(sub2(current, { months: 11 })),
-      end: endOfMonth6(add2(current, { months: 1 }))
+      start: startOfMonth8(sub2(current, { months: 11 })),
+      end: endOfMonth7(add2(current, { months: 1 }))
     };
   }
   if (current >= yearAgo) {
     return {
-      start: startOfMonth7(yearAgo),
-      end: endOfMonth6(today)
+      start: startOfMonth8(yearAgo),
+      end: endOfMonth7(today)
     };
   }
   if (Number(current) > Number(chartWindow.end)) {
     return {
-      start: startOfMonth7(sub2(current, { months: 12 })),
-      end: endOfMonth6(current)
+      start: startOfMonth8(sub2(current, { months: 12 })),
+      end: endOfMonth7(current)
     };
   }
-  if (differenceInMonths(current, startOfMonth7(chartWindow.start)) < 0) {
+  if (differenceInMonths(current, startOfMonth8(chartWindow.start)) < 0) {
     return {
-      start: startOfMonth7(current),
-      end: endOfMonth6(add2(current, { months: 11 }))
+      start: startOfMonth8(current),
+      end: endOfMonth7(add2(current, { months: 11 }))
     };
   }
   return chartWindow;
@@ -7577,8 +7604,8 @@ var ProfitAndLossChart = () => {
   });
   const [barAnimActive, setBarAnimActive] = useState30(true);
   const [chartWindow, setChartWindow] = useState30({
-    start: startOfMonth7(sub2(Date.now(), { months: 11 })),
-    end: endOfMonth6(Date.now())
+    start: startOfMonth8(sub2(Date.now(), { months: 11 })),
+    end: endOfMonth7(Date.now())
   });
   const selectionMonth = useMemo7(
     () => ({
@@ -7593,24 +7620,24 @@ var ProfitAndLossChart = () => {
     }
   }, [dateRange]);
   const { data, loaded, pullData } = useProfitAndLossLTM({
-    currentDate: startOfMonth7(Date.now())
+    currentDate: startOfMonth8(Date.now())
   });
   const loadingValue = useMemo7(() => getLoadingValue(data), [data]);
   useEffect21(() => {
     if (loaded === "complete" && data) {
       const foundCurrent = data.find(
-        (x) => Number(startOfMonth7(new Date(x.year, x.month - 1, 1))) >= Number(localDateRange.startDate) && Number(startOfMonth7(new Date(x.year, x.month - 1, 1))) < Number(localDateRange.endDate)
+        (x) => Number(startOfMonth8(new Date(x.year, x.month - 1, 1))) >= Number(localDateRange.startDate) && Number(startOfMonth8(new Date(x.year, x.month - 1, 1))) < Number(localDateRange.endDate)
       );
       if (!foundCurrent) {
-        const newDate = startOfMonth7(localDateRange.startDate);
+        const newDate = startOfMonth8(localDateRange.startDate);
         pullData(newDate);
         return;
       }
       const foundBefore = data.find(
-        (x) => Number(startOfMonth7(new Date(x.year, x.month - 1, 1))) >= Number(sub2(localDateRange.startDate, { months: 1 })) && Number(startOfMonth7(new Date(x.year, x.month - 1, 1))) < Number(sub2(localDateRange.endDate, { months: 1 }))
+        (x) => Number(startOfMonth8(new Date(x.year, x.month - 1, 1))) >= Number(sub2(localDateRange.startDate, { months: 1 })) && Number(startOfMonth8(new Date(x.year, x.month - 1, 1))) < Number(sub2(localDateRange.endDate, { months: 1 }))
       );
       if (!foundBefore) {
-        const newDate = startOfMonth7(
+        const newDate = startOfMonth8(
           sub2(localDateRange.startDate, { months: 1 })
         );
         pullData(newDate);
@@ -7677,17 +7704,17 @@ var ProfitAndLossChart = () => {
     }
     return data?.filter(
       (x) => differenceInMonths(
-        startOfMonth7(new Date(x.year, x.month - 1, 1)),
+        startOfMonth8(new Date(x.year, x.month - 1, 1)),
         chartWindow.start
       ) >= 0 && differenceInMonths(
-        startOfMonth7(new Date(x.year, x.month - 1, 1)),
+        startOfMonth8(new Date(x.year, x.month - 1, 1)),
         chartWindow.start
       ) < 12 && differenceInMonths(
         chartWindow.end,
-        startOfMonth7(new Date(x.year, x.month - 1, 1))
+        startOfMonth8(new Date(x.year, x.month - 1, 1))
       ) >= 0 && differenceInMonths(
         chartWindow.end,
-        startOfMonth7(new Date(x.year, x.month - 1, 1))
+        startOfMonth8(new Date(x.year, x.month - 1, 1))
       ) <= 12
     ).map((x) => summarizePnL(x));
   }, [selectionMonth, chartWindow, data, loaded, compactView]);
@@ -7701,7 +7728,7 @@ var ProfitAndLossChart = () => {
       if (isMonthAllowed) {
         changeDateRange({
           startDate: new Date(year, month - 1, 1),
-          endDate: endOfMonth6(new Date(year, month - 1, 1))
+          endDate: endOfMonth7(new Date(year, month - 1, 1))
         });
       }
     }
@@ -9250,7 +9277,7 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer }) => {
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-import { endOfMonth as endOfMonth7, startOfMonth as startOfMonth8 } from "date-fns";
+import { endOfMonth as endOfMonth8, startOfMonth as startOfMonth9 } from "date-fns";
 var PNLContext = createContext5({
   data: void 0,
   filteredDataRevenue: [],
@@ -9261,8 +9288,8 @@ var PNLContext = createContext5({
   isValidating: false,
   error: void 0,
   dateRange: {
-    startDate: startOfMonth8(/* @__PURE__ */ new Date()),
-    endDate: endOfMonth7(/* @__PURE__ */ new Date())
+    startDate: startOfMonth9(/* @__PURE__ */ new Date()),
+    endDate: endOfMonth8(/* @__PURE__ */ new Date())
   },
   changeDateRange: () => {
   },
@@ -9401,7 +9428,7 @@ import React124, { useContext as useContext19, useState as useState40 } from "re
 
 // src/contexts/ChartOfAccountsContext/ChartOfAccountsContext.tsx
 import { createContext as createContext6 } from "react";
-import { endOfMonth as endOfMonth8, startOfMonth as startOfMonth9 } from "date-fns";
+import { endOfMonth as endOfMonth9, startOfMonth as startOfMonth10 } from "date-fns";
 var ChartOfAccountsContext = createContext6(
   {
     data: void 0,
@@ -9424,8 +9451,8 @@ var ChartOfAccountsContext = createContext6(
     submitForm: () => {
     },
     dateRange: {
-      startDate: startOfMonth9(/* @__PURE__ */ new Date()),
-      endDate: endOfMonth8(/* @__PURE__ */ new Date())
+      startDate: startOfMonth10(/* @__PURE__ */ new Date()),
+      endDate: endOfMonth9(/* @__PURE__ */ new Date())
     },
     changeDateRange: () => {
     }
@@ -9660,7 +9687,7 @@ var LEDGER_ACCOUNT_SUBTYPES_FOR_TYPE = {
 };
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
-import { endOfMonth as endOfMonth9, formatISO as formatISO2, startOfMonth as startOfMonth10 } from "date-fns";
+import { endOfMonth as endOfMonth10, formatISO as formatISO2, startOfMonth as startOfMonth11 } from "date-fns";
 import useSWR7 from "swr";
 var validate = (formData) => {
   const errors = [];
@@ -9741,18 +9768,18 @@ var validateName = (formData) => {
 var flattenAccounts = (accounts) => accounts.flatMap((a) => [a, flattenAccounts(a.sub_accounts || [])]).flat().filter((id) => id);
 var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: initialEndDate } = {
   withDates: false,
-  startDate: startOfMonth10(/* @__PURE__ */ new Date()),
-  endDate: endOfMonth9(/* @__PURE__ */ new Date())
+  startDate: startOfMonth11(/* @__PURE__ */ new Date()),
+  endDate: endOfMonth10(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl } = useLayerContext();
   const [form, setForm] = useState34();
   const [sendingForm, setSendingForm] = useState34(false);
   const [apiError, setApiError] = useState34(void 0);
   const [startDate, setStartDate] = useState34(
-    initialStartDate ?? startOfMonth10(Date.now())
+    initialStartDate ?? startOfMonth11(Date.now())
   );
   const [endDate, setEndDate] = useState34(
-    initialEndDate ?? endOfMonth9(Date.now())
+    initialEndDate ?? endOfMonth10(Date.now())
   );
   const { data, isLoading, isValidating, error, mutate } = useSWR7(
     businessId && auth?.access_token && `chart-of-accounts-${businessId}-${startDate?.valueOf()}-${endDate?.valueOf()}`,
@@ -10519,7 +10546,7 @@ var Card = ({ children, className }) => {
 
 // src/components/DateTime/DateTime.tsx
 import React118 from "react";
-import { parseISO as parseISO12, format as formatTime9 } from "date-fns";
+import { parseISO as parseISO13, format as formatTime9 } from "date-fns";
 var DateTime = ({
   value,
   format: format7,
@@ -10529,10 +10556,10 @@ var DateTime = ({
   onlyTime
 }) => {
   if (format7) {
-    return /* @__PURE__ */ React118.createElement(Text, { className: "Layer__datetime" }, formatTime9(parseISO12(value), format7));
+    return /* @__PURE__ */ React118.createElement(Text, { className: "Layer__datetime" }, formatTime9(parseISO13(value), format7));
   }
-  const date = formatTime9(parseISO12(value), dateFormat ?? DATE_FORMAT);
-  const time = formatTime9(parseISO12(value), timeFormat ?? TIME_FORMAT);
+  const date = formatTime9(parseISO13(value), dateFormat ?? DATE_FORMAT);
+  const time = formatTime9(parseISO13(value), timeFormat ?? TIME_FORMAT);
   return /* @__PURE__ */ React118.createElement(Text, { className: "Layer__datetime" }, !onlyTime && /* @__PURE__ */ React118.createElement(
     Text,
     {
@@ -10662,7 +10689,7 @@ var LedgerAccountEntryDetails = () => {
 // src/components/LedgerAccount/LedgerAccountRow.tsx
 import React122, { useContext as useContext17, useEffect as useEffect24, useState as useState38 } from "react";
 import classNames46 from "classnames";
-import { parseISO as parseISO13, format as formatTime10 } from "date-fns";
+import { parseISO as parseISO14, format as formatTime10 } from "date-fns";
 var LedgerAccountRow = ({
   row,
   index,
@@ -10701,7 +10728,7 @@ var LedgerAccountRow = ({
           }
         }
       },
-      /* @__PURE__ */ React122.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React122.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React122.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React122.createElement(Text, null, row.date && formatTime10(parseISO13(row.date), DATE_FORMAT)), /* @__PURE__ */ React122.createElement(
+      /* @__PURE__ */ React122.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React122.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React122.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React122.createElement(Text, null, row.date && formatTime10(parseISO14(row.date), DATE_FORMAT)), /* @__PURE__ */ React122.createElement(
         Text,
         {
           weight: "normal" /* normal */,
@@ -10734,7 +10761,7 @@ var LedgerAccountRow = ({
           }
         }
       },
-      /* @__PURE__ */ React122.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React122.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React122.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React122.createElement(Text, null, row.date && formatTime10(parseISO13(row.date), DATE_FORMAT)), /* @__PURE__ */ React122.createElement(
+      /* @__PURE__ */ React122.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React122.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React122.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React122.createElement(Text, null, row.date && formatTime10(parseISO14(row.date), DATE_FORMAT)), /* @__PURE__ */ React122.createElement(
         Text,
         {
           weight: "normal" /* normal */,
@@ -10763,7 +10790,7 @@ var LedgerAccountRow = ({
         }
       }
     },
-    /* @__PURE__ */ React122.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React122.createElement("span", { className: "Layer__table-cell-content" }, row.date && formatTime10(parseISO13(row.date), DATE_FORMAT))),
+    /* @__PURE__ */ React122.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React122.createElement("span", { className: "Layer__table-cell-content" }, row.date && formatTime10(parseISO14(row.date), DATE_FORMAT))),
     /* @__PURE__ */ React122.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React122.createElement("span", { className: "Layer__table-cell-content" }, row.entry_id.substring(0, 5))),
     /* @__PURE__ */ React122.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React122.createElement("span", { className: "Layer__table-cell-content" }, row.source?.display_description ?? "")),
     /* @__PURE__ */ React122.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React122.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)),
@@ -11534,7 +11561,7 @@ import React135, { useContext as useContext26, useMemo as useMemo15, useState as
 // src/components/JournalRow/JournalRow.tsx
 import React130, { useContext as useContext21, useEffect as useEffect28, useState as useState44 } from "react";
 import classNames49 from "classnames";
-import { parseISO as parseISO14, format as formatTime11 } from "date-fns";
+import { parseISO as parseISO15, format as formatTime11 } from "date-fns";
 var INDENTATION2 = 24;
 var EXPANDED_STYLE2 = {
   height: "100%",
@@ -11647,7 +11674,7 @@ var JournalRow = ({
         )
       ))),
       /* @__PURE__ */ React130.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React130.createElement("span", { className: "Layer__table-cell-content" }, row.id.substring(0, 5))),
-      /* @__PURE__ */ React130.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React130.createElement("span", { className: "Layer__table-cell-content" }, row.date && formatTime11(parseISO14(row.date), DATE_FORMAT))),
+      /* @__PURE__ */ React130.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React130.createElement("span", { className: "Layer__table-cell-content" }, row.date && formatTime11(parseISO15(row.date), DATE_FORMAT))),
       /* @__PURE__ */ React130.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React130.createElement("span", { className: "Layer__table-cell-content" }, humanizeEnum(row.entry_type))),
       /* @__PURE__ */ React130.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React130.createElement("span", { className: "Layer__table-cell-content" }, `(${row.line_items.length})`)),
       /* @__PURE__ */ React130.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React130.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, "$", centsToDollars(
@@ -12103,18 +12130,18 @@ var JournalContent = ({
 };
 
 // src/components/Onboarding/Onboarding.tsx
-import React144, { useContext as useContext28, useEffect as useEffect29, useState as useState47 } from "react";
+import React145, { useContext as useContext28, useEffect as useEffect29, useState as useState47 } from "react";
 
 // src/components/Onboarding/ConnectAccount.tsx
-import React143, { useContext as useContext27, useMemo as useMemo16 } from "react";
+import React144, { useContext as useContext27, useMemo as useMemo16 } from "react";
 
-// src/icons/CreditCard.tsx
+// src/icons/Bell.tsx
 import * as React137 from "react";
-var CreditCard = ({ size = 12, ...props }) => /* @__PURE__ */ React137.createElement(
+var Bell = ({ size = 18, ...props }) => /* @__PURE__ */ React137.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 12 12",
+    viewBox: "0 0 18 18",
     fill: "none",
     ...props,
     width: size,
@@ -12123,13 +12150,46 @@ var CreditCard = ({ size = 12, ...props }) => /* @__PURE__ */ React137.createEle
   /* @__PURE__ */ React137.createElement(
     "path",
     {
-      d: "M10.5 2H1.5C0.947715 2 0.5 2.44772 0.5 3V9C0.5 9.55228 0.947715 10 1.5 10H10.5C11.0523 10 11.5 9.55228 11.5 9V3C11.5 2.44772 11.0523 2 10.5 2Z",
+      d: "M13.5 6C13.5 4.80653 13.0259 3.66193 12.182 2.81802C11.3381 1.97411 10.1935 1.5 9 1.5C7.80653 1.5 6.66193 1.97411 5.81802 2.81802C4.97411 3.66193 4.5 4.80653 4.5 6C4.5 11.25 2.25 12.75 2.25 12.75H15.75C15.75 12.75 13.5 11.25 13.5 6Z",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   ),
   /* @__PURE__ */ React137.createElement(
+    "path",
+    {
+      d: "M10.2975 15.75C10.1656 15.9773 9.97638 16.166 9.74867 16.2971C9.52096 16.4283 9.26278 16.4973 9 16.4973C8.73721 16.4973 8.47904 16.4283 8.25133 16.2971C8.02362 16.166 7.83436 15.9773 7.7025 15.75",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var Bell_default = Bell;
+
+// src/icons/CreditCard.tsx
+import * as React138 from "react";
+var CreditCard = ({ size = 12, ...props }) => /* @__PURE__ */ React138.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React138.createElement(
+    "path",
+    {
+      d: "M10.5 2H1.5C0.947715 2 0.5 2.44772 0.5 3V9C0.5 9.55228 0.947715 10 1.5 10H10.5C11.0523 10 11.5 9.55228 11.5 9V3C11.5 2.44772 11.0523 2 10.5 2Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React138.createElement(
     "path",
     {
       d: "M0.5 5H11.5",
@@ -12142,8 +12202,8 @@ var CreditCard = ({ size = 12, ...props }) => /* @__PURE__ */ React137.createEle
 var CreditCard_default = CreditCard;
 
 // src/icons/Folder.tsx
-import * as React138 from "react";
-var Folder = ({ size = 12, ...props }) => /* @__PURE__ */ React138.createElement(
+import * as React139 from "react";
+var Folder = ({ size = 12, ...props }) => /* @__PURE__ */ React139.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -12153,7 +12213,7 @@ var Folder = ({ size = 12, ...props }) => /* @__PURE__ */ React138.createElement
     width: size,
     height: size
   },
-  /* @__PURE__ */ React138.createElement(
+  /* @__PURE__ */ React139.createElement(
     "path",
     {
       d: "M11 9.5C11 9.76522 10.8946 10.0196 10.7071 10.2071C10.5196 10.3946 10.2652 10.5 10 10.5H2C1.73478 10.5 1.48043 10.3946 1.29289 10.2071C1.10536 10.0196 1 9.76522 1 9.5V2.5C1 2.23478 1.10536 1.98043 1.29289 1.79289C1.48043 1.60536 1.73478 1.5 2 1.5H4.5L5.5 3H10C10.2652 3 10.5196 3.10536 10.7071 3.29289C10.8946 3.48043 11 3.73478 11 4V9.5Z",
@@ -12166,8 +12226,8 @@ var Folder = ({ size = 12, ...props }) => /* @__PURE__ */ React138.createElement
 var Folder_default = Folder;
 
 // src/icons/Link.tsx
-import * as React139 from "react";
-var Link = ({ size = 18, ...props }) => /* @__PURE__ */ React139.createElement(
+import * as React140 from "react";
+var Link = ({ size = 18, ...props }) => /* @__PURE__ */ React140.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -12177,7 +12237,7 @@ var Link = ({ size = 18, ...props }) => /* @__PURE__ */ React139.createElement(
     width: size,
     height: size
   },
-  /* @__PURE__ */ React139.createElement(
+  /* @__PURE__ */ React140.createElement(
     "path",
     {
       d: "M7.5 9.75C7.82209 10.1806 8.23302 10.5369 8.70491 10.7947C9.17681 11.0525 9.69863 11.2058 10.235 11.2442C10.7713 11.2827 11.3097 11.2053 11.8135 11.0173C12.3173 10.8294 12.7748 10.5353 13.155 10.155L15.405 7.905C16.0881 7.19774 16.4661 6.25048 16.4575 5.26724C16.449 4.284 16.0546 3.34346 15.3593 2.64818C14.664 1.9529 13.7235 1.55851 12.7403 1.54997C11.757 1.54143 10.8098 1.9194 10.1025 2.6025L8.8125 3.885",
@@ -12186,7 +12246,7 @@ var Link = ({ size = 18, ...props }) => /* @__PURE__ */ React139.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React139.createElement(
+  /* @__PURE__ */ React140.createElement(
     "path",
     {
       d: "M10.5 8.25C10.1779 7.8194 9.76698 7.46311 9.29508 7.2053C8.82319 6.94748 8.30137 6.79416 7.76501 6.75575C7.22865 6.71734 6.69031 6.79473 6.18649 6.98266C5.68267 7.1706 5.22516 7.4647 4.845 7.845L2.595 10.095C1.9119 10.8023 1.53393 11.7495 1.54247 12.7328C1.55101 13.716 1.9454 14.6565 2.64068 15.3518C3.33596 16.0471 4.2765 16.4415 5.25974 16.45C6.24298 16.4586 7.19024 16.0806 7.8975 15.3975L9.18 14.115",
@@ -12199,9 +12259,9 @@ var Link = ({ size = 18, ...props }) => /* @__PURE__ */ React139.createElement(
 var Link_default = Link;
 
 // src/icons/PlaidIcon.tsx
-import React140 from "react";
+import React141 from "react";
 var PlaidIcon = () => {
-  return /* @__PURE__ */ React140.createElement(
+  return /* @__PURE__ */ React141.createElement(
     "img",
     {
       src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAQDSURBVHgB7VbpK65bFP+9XJTMJGPGDIVIpjIln2S4SIr4AxSOIZFwPxA+HUf5rhAZb3xQylCUizKLD+I1ROYpZcq+e63u+9S5t573XN1z3nvr/or97GVba+3fmrYGf8DBwSHx/f09VH7a4DvD2Nj414uLi1X61tAvOzu7z0KIT/iB0Gg0bdfX12UaafyTNP4ZBoB0okxja2u7L789YRhoyQEBA8IIBsZ/0wF7e3tYWVkpe2tra8hQ4iP46VsOWVpaIiYmBrGxsYiKikJERASWl5eRnZ0NU1NT9PX1ISwsDCsrK5iZmcHi4iKmpqbw+vqqV7feJCwsLERbW5uyX19fx/7+PjIyMrC5uQkTExP4+/tjZGQEvr6+CA4OVs6Wlpaiq6sLqiAH1H4GBgaEDqmpqYq8qalJkdfX1yvyrKwscXd3x/L+/n6hT79eBnZ3d3F6egobGxtInUhPT8f9/T3fWHfb7e1tpKSk8JmxsTGWPT4+wsnJCV5eXqoEqCYhUSo7JXp6epCWlkadC5OTkxgaGmLjFRUVKC8vR2BgIEZHR9k4OUlnJXOcnO7u7vhwCKqqqpjKxMRE3tOqQ3Nzs3KutbWVZU9PT0IywbKEhASW1dbWqoZAlQHKbEJISAiXXnt7O+/Pz8+Rn58PDw8PeHp6Ii8vDzLuMDMzQ0tLC988Li6Oz/r5+X2cARcXF7G1tcU3OTk54bWyslJIx8Tx8bGQ00wcHR2Jw8NDERoaKsrKyviMzBleZcUIZ2dnVQb0VkF0dLR4fn5mhbLeFXlBQYESDsnAX6rm5eWF/1efflUHXF1d+RY6BuSDRRQXF/NtdTe/ubnhb5JVV1d/xYCsDuHm5vZxB2QTYUU1NTVCxprDQU6QUR3tFA5y4OzsTKHdx8dHyOrgfW9v78eTcGdnh9e5uTlOMukI3t7euN47OztxcHAArVaL7u5uODo68lnJEGRuYHWVX1zcntWgOguothsbG5GcnIyHhwd0dHRA3hS3t7eoq6vD5eUlzM3NIalnQ9R0qPVSs4qPj2cd09PTaib0zwLq+9QJLSwseE/KZQgwPj6OgIAAlm1sbPBsIGbIaWpGxJisIm5matA7jicmJtgQ1XZJSQlTTsplbJUzw8PDzAr9raioiLtfUFAQT0R90DuOZ2dnkZOTwyOZDK2trWFvbw+ZmZk8AygnGhoaIBMS3t7eX01Dyh19+KY3IY3cpKQkREZGQrZjZfbn5ubyzB8cHER4eDiWlpawsLDAhufn5zlv/hEH/gzdZKRQEIgdephcXV3h7+L/V/G/wgEtDAetkUymLzAQyLaxfMX8JtspPeqj8QMhn3dfZEf9RaMTyNIKNTIy+hnfGXKa3splVXbOGdr/DtMw0L76HoUPAAAAAElFTkSuQmCC",
@@ -12212,8 +12272,8 @@ var PlaidIcon = () => {
 var PlaidIcon_default = PlaidIcon;
 
 // src/icons/Sunrise.tsx
-import * as React141 from "react";
-var Sunrise = ({ size = 12, ...props }) => /* @__PURE__ */ React141.createElement(
+import * as React142 from "react";
+var Sunrise = ({ size = 12, ...props }) => /* @__PURE__ */ React142.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -12223,7 +12283,7 @@ var Sunrise = ({ size = 12, ...props }) => /* @__PURE__ */ React141.createElemen
     width: size,
     height: size
   },
-  /* @__PURE__ */ React141.createElement(
+  /* @__PURE__ */ React142.createElement(
     "path",
     {
       d: "M8.5 9C8.5 8.33696 8.23661 7.70107 7.76777 7.23223C7.29893 6.76339 6.66304 6.5 6 6.5C5.33696 6.5 4.70107 6.76339 4.23223 7.23223C3.76339 7.70107 3.5 8.33696 3.5 9",
@@ -12232,7 +12292,7 @@ var Sunrise = ({ size = 12, ...props }) => /* @__PURE__ */ React141.createElemen
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React141.createElement(
+  /* @__PURE__ */ React142.createElement(
     "path",
     {
       d: "M6 3.3335V4.66683",
@@ -12241,7 +12301,7 @@ var Sunrise = ({ size = 12, ...props }) => /* @__PURE__ */ React141.createElemen
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React141.createElement(
+  /* @__PURE__ */ React142.createElement(
     "path",
     {
       d: "M2.11 5.10986L2.82 5.81986",
@@ -12250,7 +12310,7 @@ var Sunrise = ({ size = 12, ...props }) => /* @__PURE__ */ React141.createElemen
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React141.createElement(
+  /* @__PURE__ */ React142.createElement(
     "path",
     {
       d: "M0.5 9H1.5",
@@ -12259,7 +12319,7 @@ var Sunrise = ({ size = 12, ...props }) => /* @__PURE__ */ React141.createElemen
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React141.createElement(
+  /* @__PURE__ */ React142.createElement(
     "path",
     {
       d: "M10.5 9H11.5",
@@ -12268,7 +12328,7 @@ var Sunrise = ({ size = 12, ...props }) => /* @__PURE__ */ React141.createElemen
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React141.createElement(
+  /* @__PURE__ */ React142.createElement(
     "path",
     {
       d: "M9.17999 5.81986L9.88999 5.10986",
@@ -12277,7 +12337,7 @@ var Sunrise = ({ size = 12, ...props }) => /* @__PURE__ */ React141.createElemen
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React141.createElement(
+  /* @__PURE__ */ React142.createElement(
     "path",
     {
       d: "M11.5 11H0.5",
@@ -12290,19 +12350,19 @@ var Sunrise = ({ size = 12, ...props }) => /* @__PURE__ */ React141.createElemen
 var Sunrise_default = Sunrise;
 
 // src/components/ActionableRow/ActionableRow.tsx
-import React142 from "react";
+import React143 from "react";
 var renderIcon = (icon, iconBox) => {
   if (iconBox) {
     return iconBox;
   }
   if (icon) {
-    return /* @__PURE__ */ React142.createElement("span", { className: "Layer__actionable_row__icon" }, icon);
+    return /* @__PURE__ */ React143.createElement("span", { className: "Layer__actionable_row__icon" }, icon);
   }
   return;
 };
 var renderTitle = (title) => {
   if (title && typeof title === "string") {
-    return /* @__PURE__ */ React142.createElement(Text, { className: "Layer__actionable_row__title" }, title);
+    return /* @__PURE__ */ React143.createElement(Text, { className: "Layer__actionable_row__title" }, title);
   }
   if (title) {
     return title;
@@ -12311,7 +12371,7 @@ var renderTitle = (title) => {
 };
 var renderDescription = (description) => {
   if (description && typeof description === "string") {
-    return /* @__PURE__ */ React142.createElement(Text, { className: "Layer__actionable_row__description" }, description);
+    return /* @__PURE__ */ React143.createElement(Text, { className: "Layer__actionable_row__description" }, description);
   }
   if (description) {
     return description;
@@ -12326,11 +12386,11 @@ var ActionableRow = ({
   button,
   onClick
 }) => {
-  return /* @__PURE__ */ React142.createElement("div", { className: "Layer__actionable_row" }, /* @__PURE__ */ React142.createElement("div", { className: "Layer__actionable_row__main" }, renderIcon(icon, iconBox), /* @__PURE__ */ React142.createElement("div", { className: "Layer__actionable_row__main__text" }, renderTitle(title), renderDescription(description))), /* @__PURE__ */ React142.createElement("div", { className: "Layer__actionable_row__action" }, button && button, !button && onClick ? /* @__PURE__ */ React142.createElement(
+  return /* @__PURE__ */ React143.createElement("div", { className: "Layer__actionable_row" }, /* @__PURE__ */ React143.createElement("div", { className: "Layer__actionable_row__main" }, renderIcon(icon, iconBox), /* @__PURE__ */ React143.createElement("div", { className: "Layer__actionable_row__main__text" }, renderTitle(title), renderDescription(description))), /* @__PURE__ */ React143.createElement("div", { className: "Layer__actionable_row__action" }, button && button, !button && onClick ? /* @__PURE__ */ React143.createElement(
     IconButton,
     {
       onClick,
-      icon: /* @__PURE__ */ React142.createElement(ChevronRight_default, { size: 11 }),
+      icon: /* @__PURE__ */ React143.createElement(ChevronRight_default, { size: 11 }),
       withBorder: true
     }
   ) : null));
@@ -12339,55 +12399,63 @@ var ActionableRow = ({
 // src/components/Onboarding/ConnectAccount.tsx
 var ConnectAccount = ({
   onboardingStep,
-  onTransactionsToReviewClick
+  onTransactionsToReviewClick,
+  currentMonthOnly = true
 }) => {
   const { addConnection } = useContext27(LinkedAccountsContext);
   const { data, isLoading } = useBankTransactions();
-  const transactionsToReview = useMemo16(() => {
-    if (data && data.length > 0) {
-      return data.filter((tx) => filterVisibility("review" /* review */, tx)).length;
-    }
-    return 0;
-  }, [data, isLoading]);
+  const transactionsToReview = useMemo16(
+    () => countTransactionsToReview({ transactions: data, currentMonthOnly }),
+    [data, isLoading]
+  );
   if (onboardingStep === "connectAccount") {
-    return /* @__PURE__ */ React143.createElement(React143.Fragment, null, /* @__PURE__ */ React143.createElement(
+    return /* @__PURE__ */ React144.createElement(React144.Fragment, null, /* @__PURE__ */ React144.createElement(
       DataState,
       {
         status: "info" /* info */,
-        icon: /* @__PURE__ */ React143.createElement(CreditCard_default, { size: 12 }),
+        icon: /* @__PURE__ */ React144.createElement(CreditCard_default, { size: 12 }),
         title: "No accounts connected",
         description: "Populate your accounting dashboard in 3 steps"
       }
-    ), /* @__PURE__ */ React143.createElement(
+    ), /* @__PURE__ */ React144.createElement(
       ActionableRow,
       {
-        iconBox: /* @__PURE__ */ React143.createElement(PlaidIcon_default, null),
+        iconBox: /* @__PURE__ */ React144.createElement(PlaidIcon_default, null),
         title: "Connect accounts",
         description: "Import data with one simple integration.",
-        button: /* @__PURE__ */ React143.createElement(
+        button: /* @__PURE__ */ React144.createElement(
           Button,
           {
             onClick: () => addConnection("PLAID"),
-            rightIcon: /* @__PURE__ */ React143.createElement(Link_default, { size: 12 })
+            rightIcon: /* @__PURE__ */ React144.createElement(Link_default, { size: 12 })
           },
           "Connect"
         )
       }
     ));
   }
-  return /* @__PURE__ */ React143.createElement(React143.Fragment, null, /* @__PURE__ */ React143.createElement(
+  return /* @__PURE__ */ React144.createElement(React144.Fragment, null, /* @__PURE__ */ React144.createElement(
     DataState,
     {
       status: "success" /* success */,
-      icon: /* @__PURE__ */ React143.createElement(Sunrise_default, { size: 12 }),
+      icon: /* @__PURE__ */ React144.createElement(Sunrise_default, { size: 12 }),
       title: "Account linked successfully",
       description: "Your transactions are now available on the platform, to see all data on the charts, categorise transactions."
     }
-  ), onTransactionsToReviewClick && transactionsToReview > 0 ? /* @__PURE__ */ React143.createElement(
+  ), onTransactionsToReviewClick && transactionsToReview > 0 ? /* @__PURE__ */ React144.createElement(
     ActionableRow,
     {
-      icon: /* @__PURE__ */ React143.createElement(Folder_default, { size: 12 }),
-      title: /* @__PURE__ */ React143.createElement(Text, null, "Categorise transactions", " ", /* @__PURE__ */ React143.createElement(Badge, { variant: "warning" /* WARNING */, size: "small" /* SMALL */ }, transactionsToReview, " pending")),
+      icon: /* @__PURE__ */ React144.createElement(Folder_default, { size: 12 }),
+      title: /* @__PURE__ */ React144.createElement(Text, null, "Categorise transactions", " ", /* @__PURE__ */ React144.createElement(
+        Badge,
+        {
+          variant: "warning" /* WARNING */,
+          size: "small" /* SMALL */,
+          icon: /* @__PURE__ */ React144.createElement(Bell_default, { size: 12 })
+        },
+        transactionsToReview,
+        " pending"
+      )),
       description: "Once your data is on the platform categorize them in Bank Transactions tab",
       onClick: () => onTransactionsToReviewClick()
     }
@@ -12407,7 +12475,7 @@ var EXPANDED_STYLE3 = {
   transform: "scale(1)",
   overflow: "hidden"
 };
-var Onboarding = (props) => /* @__PURE__ */ React144.createElement(LinkedAccountsProvider, null, /* @__PURE__ */ React144.createElement(OnboardingContent, { ...props }));
+var Onboarding = (props) => /* @__PURE__ */ React145.createElement(LinkedAccountsProvider, null, /* @__PURE__ */ React145.createElement(OnboardingContent, { ...props }));
 var OnboardingContent = ({
   onTransactionsToReviewClick
 }) => {
@@ -12435,7 +12503,7 @@ var OnboardingContent = ({
   if (!onboardingStep) {
     return null;
   }
-  return /* @__PURE__ */ React144.createElement(Container, { name: "onboarding", style }, /* @__PURE__ */ React144.createElement("div", { className: "Layer__onboarding__content" }, /* @__PURE__ */ React144.createElement(
+  return /* @__PURE__ */ React145.createElement(Container, { name: "onboarding", style }, /* @__PURE__ */ React145.createElement("div", { className: "Layer__onboarding__content" }, /* @__PURE__ */ React145.createElement(
     ConnectAccount,
     {
       onboardingStep,
@@ -12445,7 +12513,7 @@ var OnboardingContent = ({
 };
 
 // src/components/Tasks/Tasks.tsx
-import React151, { useContext as useContext33 } from "react";
+import React152, { useContext as useContext33 } from "react";
 
 // src/contexts/TasksContext/TasksContext.tsx
 import { createContext as createContext10 } from "react";
@@ -12493,11 +12561,11 @@ var useTasks = () => {
 };
 
 // src/components/TasksHeader/TasksHeader.tsx
-import React146, { useContext as useContext29 } from "react";
+import React147, { useContext as useContext29 } from "react";
 
 // src/icons/ProgressIcon.tsx
-import * as React145 from "react";
-var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React145.createElement(
+import * as React146 from "react";
+var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React146.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -12507,7 +12575,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React145.createE
     width: size,
     height: size
   },
-  /* @__PURE__ */ React145.createElement(
+  /* @__PURE__ */ React146.createElement(
     "path",
     {
       d: "M9 1.5V4.5",
@@ -12516,7 +12584,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React145.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React145.createElement(
+  /* @__PURE__ */ React146.createElement(
     "path",
     {
       d: "M9 13.5V16.5",
@@ -12525,7 +12593,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React145.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React145.createElement(
+  /* @__PURE__ */ React146.createElement(
     "path",
     {
       d: "M3.6975 3.6975L5.82 5.82",
@@ -12534,7 +12602,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React145.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React145.createElement(
+  /* @__PURE__ */ React146.createElement(
     "path",
     {
       d: "M12.18 12.18L14.3025 14.3025",
@@ -12543,7 +12611,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React145.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React145.createElement(
+  /* @__PURE__ */ React146.createElement(
     "path",
     {
       d: "M1.5 9H4.5",
@@ -12552,7 +12620,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React145.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React145.createElement(
+  /* @__PURE__ */ React146.createElement(
     "path",
     {
       d: "M13.5 9H16.5",
@@ -12561,7 +12629,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React145.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React145.createElement(
+  /* @__PURE__ */ React146.createElement(
     "path",
     {
       d: "M3.6975 14.3025L5.82 12.18",
@@ -12570,7 +12638,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React145.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React145.createElement(
+  /* @__PURE__ */ React146.createElement(
     "path",
     {
       d: "M12.18 5.82L14.3025 3.6975",
@@ -12585,17 +12653,17 @@ var ProgressIcon_default = ProgressIcon;
 // src/components/TasksHeader/TasksHeader.tsx
 var ICONS = {
   done: {
-    icon: /* @__PURE__ */ React146.createElement(Check_default, { size: 12 }),
+    icon: /* @__PURE__ */ React147.createElement(Check_default, { size: 12 }),
     text: "Done",
     badge: "success" /* SUCCESS */
   },
   pending: {
-    icon: /* @__PURE__ */ React146.createElement(ProgressIcon_default, { size: 12 }),
+    icon: /* @__PURE__ */ React147.createElement(ProgressIcon_default, { size: 12 }),
     text: "In progress",
     badge: "warning" /* WARNING */
   },
   refresh: {
-    icon: /* @__PURE__ */ React146.createElement(RefreshCcw_default, { size: 12 }),
+    icon: /* @__PURE__ */ React147.createElement(RefreshCcw_default, { size: 12 }),
     text: "Refresh",
     badge: "default" /* DEFAULT */
   }
@@ -12604,7 +12672,7 @@ var TasksHeader = () => {
   const { data: tasks, refetch, error } = useContext29(TasksContext);
   const completedTasks = tasks?.filter((task) => task.status === "COMPLETED").length;
   const badgeVariant = completedTasks === tasks?.length ? ICONS.done : ICONS.pending;
-  return /* @__PURE__ */ React146.createElement("div", { className: "Layer__tasks-header" }, /* @__PURE__ */ React146.createElement(Text, { size: "lg" /* lg */ }, "December Books"), !tasks || error ? /* @__PURE__ */ React146.createElement(
+  return /* @__PURE__ */ React147.createElement("div", { className: "Layer__tasks-header" }, /* @__PURE__ */ React147.createElement(Text, { size: "lg" /* lg */ }, "December Books"), !tasks || error ? /* @__PURE__ */ React147.createElement(
     Badge,
     {
       onClick: () => refetch(),
@@ -12612,15 +12680,15 @@ var TasksHeader = () => {
       icon: ICONS.refresh.icon
     },
     ICONS.refresh.text
-  ) : /* @__PURE__ */ React146.createElement(Badge, { variant: badgeVariant.badge, icon: badgeVariant.icon }, badgeVariant.text));
+  ) : /* @__PURE__ */ React147.createElement(Badge, { variant: badgeVariant.badge, icon: badgeVariant.icon }, badgeVariant.text));
 };
 
 // src/components/TasksList/TasksList.tsx
-import React149, { useContext as useContext31, useMemo as useMemo17, useState as useState49 } from "react";
+import React150, { useContext as useContext31, useMemo as useMemo17, useState as useState49 } from "react";
 
 // src/icons/SmileIcon.tsx
-import * as React147 from "react";
-var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React147.createElement(
+import * as React148 from "react";
+var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React148.createElement(
   "svg",
   {
     viewBox: "0 0 12 12",
@@ -12630,7 +12698,7 @@ var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React147.createElem
     width: size,
     height: size
   },
-  /* @__PURE__ */ React147.createElement(
+  /* @__PURE__ */ React148.createElement(
     "path",
     {
       d: "M6.5 11.5C9.26142 11.5 11.5 9.26142 11.5 6.5C11.5 3.73858 9.26142 1.5 6.5 1.5C3.73858 1.5 1.5 3.73858 1.5 6.5C1.5 9.26142 3.73858 11.5 6.5 11.5Z",
@@ -12639,7 +12707,7 @@ var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React147.createElem
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React147.createElement(
+  /* @__PURE__ */ React148.createElement(
     "path",
     {
       d: "M4.5 7.5C4.5 7.5 5.25 8.5 6.5 8.5C7.75 8.5 8.5 7.5 8.5 7.5",
@@ -12648,7 +12716,7 @@ var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React147.createElem
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React147.createElement(
+  /* @__PURE__ */ React148.createElement(
     "path",
     {
       d: "M5 5H5.005",
@@ -12657,7 +12725,7 @@ var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React147.createElem
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React147.createElement(
+  /* @__PURE__ */ React148.createElement(
     "path",
     {
       d: "M8 5H8.005",
@@ -12670,7 +12738,7 @@ var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React147.createElem
 var SmileIcon_default = SmileIcon;
 
 // src/components/TasksListItem/TasksListItem.tsx
-import React148, { useContext as useContext30, useState as useState48 } from "react";
+import React149, { useContext as useContext30, useState as useState48 } from "react";
 import classNames50 from "classnames";
 var TasksListItem = ({
   task,
@@ -12692,14 +12760,14 @@ var TasksListItem = ({
     "Layer__tasks-list-item",
     isOpen && "Layer__tasks-list-item__expanded"
   );
-  return /* @__PURE__ */ React148.createElement("div", { className: "Layer__tasks-list-item-wrapper" }, /* @__PURE__ */ React148.createElement("div", { className: taskItemClassName }, /* @__PURE__ */ React148.createElement(
+  return /* @__PURE__ */ React149.createElement("div", { className: "Layer__tasks-list-item-wrapper" }, /* @__PURE__ */ React149.createElement("div", { className: taskItemClassName }, /* @__PURE__ */ React149.createElement(
     "div",
     {
       className: "Layer__tasks-list-item__head",
       onClick: () => setIsOpen(!isOpen)
     },
-    /* @__PURE__ */ React148.createElement("div", { className: taskHeadClassName }, /* @__PURE__ */ React148.createElement("div", { className: "Layer__tasks-list-item__head-info__status" }, task.status === "COMPLETED" ? /* @__PURE__ */ React148.createElement(Check_default, { size: 12 }) : /* @__PURE__ */ React148.createElement(AlertCircle_default, { size: 12 })), /* @__PURE__ */ React148.createElement(Text, { size: "md" /* md */ }, task.title)),
-    /* @__PURE__ */ React148.createElement(
+    /* @__PURE__ */ React149.createElement("div", { className: taskHeadClassName }, /* @__PURE__ */ React149.createElement("div", { className: "Layer__tasks-list-item__head-info__status" }, task.status === "COMPLETED" ? /* @__PURE__ */ React149.createElement(Check_default, { size: 12 }) : /* @__PURE__ */ React149.createElement(AlertCircle_default, { size: 12 })), /* @__PURE__ */ React149.createElement(Text, { size: "md" /* md */ }, task.title)),
+    /* @__PURE__ */ React149.createElement(
       ChevronDownFill_default,
       {
         size: 16,
@@ -12709,14 +12777,14 @@ var TasksListItem = ({
         }
       }
     )
-  ), /* @__PURE__ */ React148.createElement("div", { className: taskBodyClassName }, /* @__PURE__ */ React148.createElement("div", { className: "Layer__tasks-list-item__body-info" }, /* @__PURE__ */ React148.createElement(Text, { size: "sm" /* sm */ }, task.question), /* @__PURE__ */ React148.createElement(
+  ), /* @__PURE__ */ React149.createElement("div", { className: taskBodyClassName }, /* @__PURE__ */ React149.createElement("div", { className: "Layer__tasks-list-item__body-info" }, /* @__PURE__ */ React149.createElement(Text, { size: "sm" /* sm */ }, task.question), /* @__PURE__ */ React149.createElement(
     Textarea,
     {
       disabled: task.status === "COMPLETED",
       placeholder: userResponse,
       onChange: (e) => setUserResponse(e.target.value)
     }
-  ), /* @__PURE__ */ React148.createElement("div", { className: "Layer__tasks-list-item__actions" }, /* @__PURE__ */ React148.createElement(
+  ), /* @__PURE__ */ React149.createElement("div", { className: "Layer__tasks-list-item__actions" }, /* @__PURE__ */ React149.createElement(
     Button,
     {
       disabled: task.status === "COMPLETED" || userResponse.length === 0,
@@ -12728,7 +12796,7 @@ var TasksListItem = ({
 };
 
 // src/components/TasksList/TasksList.tsx
-var TasksEmptyState = () => /* @__PURE__ */ React149.createElement("div", { className: "Layer__tasks-empty-state" }, /* @__PURE__ */ React149.createElement("div", { className: "Layer__tasks-icon" }, /* @__PURE__ */ React149.createElement(SmileIcon_default, null)), /* @__PURE__ */ React149.createElement(Text, { size: "sm" /* sm */ }, "There are no pending tasks!", /* @__PURE__ */ React149.createElement("br", null), " Great job!"));
+var TasksEmptyState = () => /* @__PURE__ */ React150.createElement("div", { className: "Layer__tasks-empty-state" }, /* @__PURE__ */ React150.createElement("div", { className: "Layer__tasks-icon" }, /* @__PURE__ */ React150.createElement(SmileIcon_default, null)), /* @__PURE__ */ React150.createElement(Text, { size: "sm" /* sm */ }, "There are no pending tasks!", /* @__PURE__ */ React150.createElement("br", null), " Great job!"));
 var TasksList = ({ pageSize = 10 }) => {
   const [currentPage, setCurrentPage] = useState49(1);
   const { data: tasks, error } = useContext31(TasksContext);
@@ -12737,7 +12805,7 @@ var TasksList = ({ pageSize = 10 }) => {
     const lastPageIndex = firstPageIndex + pageSize;
     return tasks?.sort((a) => a.status === "COMPLETED" ? 1 : -1)?.slice(firstPageIndex, lastPageIndex);
   }, [tasks, currentPage]);
-  return /* @__PURE__ */ React149.createElement("div", { className: "Layer__tasks-list" }, sortedTasks && sortedTasks.length > 0 ? /* @__PURE__ */ React149.createElement(React149.Fragment, null, sortedTasks.map((task, index) => /* @__PURE__ */ React149.createElement(TasksListItem, { key: index, task, index })), tasks && /* @__PURE__ */ React149.createElement("div", { className: "Layer__tasks__pagination" }, /* @__PURE__ */ React149.createElement(
+  return /* @__PURE__ */ React150.createElement("div", { className: "Layer__tasks-list" }, sortedTasks && sortedTasks.length > 0 ? /* @__PURE__ */ React150.createElement(React150.Fragment, null, sortedTasks.map((task, index) => /* @__PURE__ */ React150.createElement(TasksListItem, { key: index, task, index })), tasks && /* @__PURE__ */ React150.createElement("div", { className: "Layer__tasks__pagination" }, /* @__PURE__ */ React150.createElement(
     Pagination,
     {
       currentPage,
@@ -12745,11 +12813,11 @@ var TasksList = ({ pageSize = 10 }) => {
       pageSize,
       onPageChange: (page) => setCurrentPage(page)
     }
-  ))) : /* @__PURE__ */ React149.createElement(React149.Fragment, null, error ? /* @__PURE__ */ React149.createElement(ErrorText, null, "Approval failed. Check connection and retry in few seconds.") : /* @__PURE__ */ React149.createElement(TasksEmptyState, null)));
+  ))) : /* @__PURE__ */ React150.createElement(React150.Fragment, null, error ? /* @__PURE__ */ React150.createElement(ErrorText, null, "Approval failed. Check connection and retry in few seconds.") : /* @__PURE__ */ React150.createElement(TasksEmptyState, null)));
 };
 
 // src/components/TasksPending/TasksPending.tsx
-import React150, { useContext as useContext32 } from "react";
+import React151, { useContext as useContext32 } from "react";
 import classNames51 from "classnames";
 import { Cell as Cell4, Pie as Pie3, PieChart as PieChart4 } from "recharts";
 var TasksPending = () => {
@@ -12768,7 +12836,7 @@ var TasksPending = () => {
   const taskStatusClassName = classNames51(
     completedTasks && completedTasks > 0 ? "Layer__tasks-pending-bar__status--done" : "Layer__tasks-pending-bar__status--pending"
   );
-  return /* @__PURE__ */ React150.createElement("div", { className: "Layer__tasks-pending" }, /* @__PURE__ */ React150.createElement(Text, { size: "lg" /* lg */ }, "Bookkeeping Tasks"), /* @__PURE__ */ React150.createElement("div", { className: "Layer__tasks-pending-bar" }, /* @__PURE__ */ React150.createElement(Text, { size: "sm" /* sm */ }, /* @__PURE__ */ React150.createElement("span", { className: taskStatusClassName }, completedTasks), "/", data?.length, " done"), /* @__PURE__ */ React150.createElement(PieChart4, { width: 24, height: 24, className: "mini-chart" }, /* @__PURE__ */ React150.createElement(
+  return /* @__PURE__ */ React151.createElement("div", { className: "Layer__tasks-pending" }, /* @__PURE__ */ React151.createElement(Text, { size: "lg" /* lg */ }, "Bookkeeping Tasks"), /* @__PURE__ */ React151.createElement("div", { className: "Layer__tasks-pending-bar" }, /* @__PURE__ */ React151.createElement(Text, { size: "sm" /* sm */ }, /* @__PURE__ */ React151.createElement("span", { className: taskStatusClassName }, completedTasks), "/", data?.length, " done"), /* @__PURE__ */ React151.createElement(PieChart4, { width: 24, height: 24, className: "mini-chart" }, /* @__PURE__ */ React151.createElement(
     Pie3,
     {
       data: chartData,
@@ -12786,7 +12854,7 @@ var TasksPending = () => {
       animationEasing: "ease-in-out"
     },
     chartData.map((task, index) => {
-      return /* @__PURE__ */ React150.createElement(
+      return /* @__PURE__ */ React151.createElement(
         Cell4,
         {
           key: `cell-${index}`,
@@ -12801,11 +12869,11 @@ var TasksPending = () => {
 // src/components/Tasks/Tasks.tsx
 var Tasks = () => {
   const contextData = useTasks();
-  return /* @__PURE__ */ React151.createElement(TasksContext.Provider, { value: contextData }, /* @__PURE__ */ React151.createElement(TasksComponent, null));
+  return /* @__PURE__ */ React152.createElement(TasksContext.Provider, { value: contextData }, /* @__PURE__ */ React152.createElement(TasksComponent, null));
 };
 var TasksComponent = () => {
   const { isLoading, data } = useContext33(TasksContext);
-  return /* @__PURE__ */ React151.createElement(Container, { name: "tasks-component" }, /* @__PURE__ */ React151.createElement(TasksHeader, null), isLoading || !data ? /* @__PURE__ */ React151.createElement("div", { className: `Layer__tasks__loader-container` }, /* @__PURE__ */ React151.createElement(Loader2, null)) : /* @__PURE__ */ React151.createElement(React151.Fragment, null, data.length > 0 && /* @__PURE__ */ React151.createElement(TasksPending, null), /* @__PURE__ */ React151.createElement(TasksList, null)));
+  return /* @__PURE__ */ React152.createElement(Container, { name: "tasks-component" }, /* @__PURE__ */ React152.createElement(TasksHeader, null), isLoading || !data ? /* @__PURE__ */ React152.createElement("div", { className: `Layer__tasks__loader-container` }, /* @__PURE__ */ React152.createElement(Loader2, null)) : /* @__PURE__ */ React152.createElement(React152.Fragment, null, data.length > 0 && /* @__PURE__ */ React152.createElement(TasksPending, null), /* @__PURE__ */ React152.createElement(TasksList, null)));
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
@@ -12814,39 +12882,6 @@ import React158, { useState as useState51 } from "react";
 // src/components/TransactionToReviewCard/TransactionToReviewCard.tsx
 import React155, { useEffect as useEffect30, useMemo as useMemo18, useState as useState50 } from "react";
 
-// src/icons/Bell.tsx
-import * as React152 from "react";
-var Bell = ({ size = 18, ...props }) => /* @__PURE__ */ React152.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 18 18",
-    fill: "none",
-    ...props,
-    width: size,
-    height: size
-  },
-  /* @__PURE__ */ React152.createElement(
-    "path",
-    {
-      d: "M13.5 6C13.5 4.80653 13.0259 3.66193 12.182 2.81802C11.3381 1.97411 10.1935 1.5 9 1.5C7.80653 1.5 6.66193 1.97411 5.81802 2.81802C4.97411 3.66193 4.5 4.80653 4.5 6C4.5 11.25 2.25 12.75 2.25 12.75H15.75C15.75 12.75 13.5 11.25 13.5 6Z",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ React152.createElement(
-    "path",
-    {
-      d: "M10.2975 15.75C10.1656 15.9773 9.97638 16.166 9.74867 16.2971C9.52096 16.4283 9.26278 16.4973 9 16.4973C8.73721 16.4973 8.47904 16.4283 8.25133 16.2971C8.02362 16.166 7.83436 15.9773 7.7025 15.75",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )
-);
-var Bell_default = Bell;
-
 // src/components/BadgeLoader/BadgeLoader.tsx
 import React153 from "react";
 var BadgeLoader = ({ children }) => {
@@ -12873,7 +12908,8 @@ var NotificationCard = ({
 
 // src/components/TransactionToReviewCard/TransactionToReviewCard.tsx
 var TransactionToReviewCard = ({
-  onClick
+  onClick,
+  currentMonthOnly = true
 }) => {
   const [loaded, setLoaded] = useState50("initiated");
   const { data, isLoading, error, refetch } = useBankTransactions();
@@ -12891,12 +12927,10 @@ var TransactionToReviewCard = ({
       return;
     }
   }, [isLoading]);
-  const toReview = useMemo18(() => {
-    if (data && data.length > 0) {
-      return data.filter((tx) => filterVisibility("review" /* review */, tx)).length;
-    }
-    return 0;
-  }, [data, isLoading]);
+  const toReview = useMemo18(
+    () => countTransactionsToReview({ transactions: data, currentMonthOnly }),
+    [data, isLoading]
+  );
   return /* @__PURE__ */ React155.createElement(
     NotificationCard,
     {
@@ -12964,7 +12998,12 @@ var AccountingOverview = ({
   onTransactionsToReviewClick
 }) => {
   const [pnlToggle, setPnlToggle] = useState51("revenue");
-  return /* @__PURE__ */ React158.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React158.createElement(View3, { title, headerControls: /* @__PURE__ */ React158.createElement(ProfitAndLoss.DatePicker, null) }, enableOnboarding && /* @__PURE__ */ React158.createElement(Onboarding, null), /* @__PURE__ */ React158.createElement("div", { className: "Layer__accounting-overview__summaries-row" }, /* @__PURE__ */ React158.createElement(ProfitAndLoss.Summaries, { actionable: false }), /* @__PURE__ */ React158.createElement(TransactionToReviewCard, { onClick: onTransactionsToReviewClick })), /* @__PURE__ */ React158.createElement(
+  return /* @__PURE__ */ React158.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React158.createElement(View3, { title, headerControls: /* @__PURE__ */ React158.createElement(ProfitAndLoss.DatePicker, null) }, enableOnboarding && /* @__PURE__ */ React158.createElement(
+    Onboarding,
+    {
+      onTransactionsToReviewClick
+    }
+  ), /* @__PURE__ */ React158.createElement("div", { className: "Layer__accounting-overview__summaries-row" }, /* @__PURE__ */ React158.createElement(ProfitAndLoss.Summaries, { actionable: false }), /* @__PURE__ */ React158.createElement(TransactionToReviewCard, { onClick: onTransactionsToReviewClick })), /* @__PURE__ */ React158.createElement(
     Container,
     {
       name: "accounting-overview-profit-and-loss",
@@ -13018,7 +13057,8 @@ var BankTransactionsWithLinkedAccounts = ({
   elevatedLinkedAccounts = true,
   showLedgerBalance = true,
   showDescriptions,
-  showReceiptUploads
+  showReceiptUploads,
+  mobileComponent
 }) => {
   return /* @__PURE__ */ React159.createElement(View3, { title }, /* @__PURE__ */ React159.createElement(
     LinkedAccounts,
@@ -13031,7 +13071,8 @@ var BankTransactionsWithLinkedAccounts = ({
     {
       asWidget: true,
       showDescriptions,
-      showReceiptUploads
+      showReceiptUploads,
+      mobileComponent
     }
   ));
 };