@layerfi/components 0.1.37 → 0.1.38

package/dist/esm/index.js

@@ -397,9 +397,9 @@ function useSizeClass() {
   const [width] = useWindowSize();
   const sizeClass = useMemo(() => {
     switch (true) {
-      case width < BREAKPOINTS.MOBILE:
+      case width <= BREAKPOINTS.MOBILE:
         return "mobile";
-      case width < BREAKPOINTS.TABLET:
+      case width <= BREAKPOINTS.TABLET:
         return "tablet";
       default:
         return "desktop";
@@ -551,8 +551,25 @@ var DEPENDENCIES = {
   ["STATEMENT_OF_CASH_FLOWS" /* STATEMENT_OF_CASH_FLOWS */]: ALL_TOUCHABLE
 };
 var useDataSync = () => {
-  const [syncTimestamps, setSyncTimestamps] = useState2({});
-  const [readTimestamps, setReadTimestamps] = useState2({});
+  const initialTimestamp = Date.now();
+  const [syncTimestamps, setSyncTimestamps] = useState2({
+    ["BALANCE_SHEET" /* BALANCE_SHEET */]: initialTimestamp,
+    ["CHART_OF_ACCOUNTS" /* CHART_OF_ACCOUNTS */]: initialTimestamp,
+    ["JOURNAL" /* JOURNAL */]: initialTimestamp,
+    ["LEDGER_ACCOUNTS" /* LEDGER_ACCOUNTS */]: initialTimestamp,
+    ["LINKED_ACCOUNTS" /* LINKED_ACCOUNTS */]: initialTimestamp,
+    ["PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */]: initialTimestamp,
+    ["STATEMENT_OF_CASH_FLOWS" /* STATEMENT_OF_CASH_FLOWS */]: initialTimestamp
+  });
+  const [readTimestamps, setReadTimestamps] = useState2({
+    ["BALANCE_SHEET" /* BALANCE_SHEET */]: initialTimestamp,
+    ["CHART_OF_ACCOUNTS" /* CHART_OF_ACCOUNTS */]: initialTimestamp,
+    ["JOURNAL" /* JOURNAL */]: initialTimestamp,
+    ["LEDGER_ACCOUNTS" /* LEDGER_ACCOUNTS */]: initialTimestamp,
+    ["LINKED_ACCOUNTS" /* LINKED_ACCOUNTS */]: initialTimestamp,
+    ["PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */]: initialTimestamp,
+    ["STATEMENT_OF_CASH_FLOWS" /* STATEMENT_OF_CASH_FLOWS */]: initialTimestamp
+  });
   const touch = (model) => {
     setSyncTimestamps({
       ...syncTimestamps,
@@ -7544,7 +7561,7 @@ var isDateAllowedToBrowse = (date, business) => {
 };
 
 // src/components/DatePicker/DatePicker.tsx
-import React100, { useEffect as useEffect18, useState as useState23 } from "react";
+import React100, { useEffect as useEffect18, useRef as useRef13, useState as useState23 } from "react";
 import ReactDatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 
@@ -7694,7 +7711,7 @@ var DatePicker = ({
   selected,
   onChange,
   mode = "dayPicker",
-  dateFormat = mode === "monthPicker" || mode === "monthRangePicker" ? "MMMM, yyyy" : mode === "timePicker" ? "h:mm aa" : "MMMM d, yyyy",
+  dateFormat = mode === "monthPicker" || mode === "monthRangePicker" ? "MMM, yyyy" : mode === "timePicker" ? "h:mm aa" : "MMM d, yyyy",
   timeIntervals = 15,
   timeCaption,
   placeholderText,
@@ -7703,11 +7720,15 @@ var DatePicker = ({
   calendarClassName,
   popperClassName,
   minDate,
+  maxDate = /* @__PURE__ */ new Date(),
   currentDateOption = true,
+  navigateArrows = mode === "monthPicker",
   ...props
 }) => {
+  const pickerRef = useRef13(null);
   const [updatePickerDate, setPickerDate] = useState23(false);
   const [selectedDates, setSelectedDates] = useState23(selected);
+  const { isDesktop } = useSizeClass();
   const [startDate, setStartDate] = useState23(
     getDefaultRangeDate("start", mode, selected) ?? /* @__PURE__ */ new Date()
   );
@@ -7747,7 +7768,8 @@ var DatePicker = ({
   }, [startDate, endDate]);
   const wrapperClassNames = classNames37(
     "Layer__datepicker__wrapper",
-    mode === "timePicker" && "Layer__datepicker__time__wrapper"
+    mode === "timePicker" && "Layer__datepicker__time__wrapper",
+    navigateArrows && "Layer__datepicker__wrapper--arrows"
   );
   const datePickerWrapperClassNames = classNames37(
     "Layer__datepicker",
@@ -7760,6 +7782,7 @@ var DatePicker = ({
   );
   const popperClassNames = classNames37(
     "Layer__datepicker__popper",
+    mode === "timePicker" && "Layer__datepicker__time__popper",
     popperClassName
   );
   const handleDateChange = (date) => {
@@ -7790,9 +7813,35 @@ var DatePicker = ({
       );
     }
   };
+  const isTodayOrAfter = Boolean(
+    selectedDates instanceof Date && selectedDates >= /* @__PURE__ */ new Date()
+  );
+  const isBeforeMinDate = Boolean(
+    minDate && selectedDates instanceof Date && selectedDates <= minDate
+  );
+  const changeDate = (value) => {
+    if (mode === "dayPicker") {
+      setSelectedDates(
+        new Date(
+          selectedDates.setDate(
+            selectedDates.getDate() + value
+          )
+        )
+      );
+    } else if (mode === "monthPicker") {
+      setSelectedDates(
+        new Date(
+          selectedDates.setMonth(
+            selectedDates.getMonth() + value
+          )
+        )
+      );
+    }
+  };
   return /* @__PURE__ */ React100.createElement("div", { className: wrapperClassNames }, /* @__PURE__ */ React100.createElement(
     ReactDatePicker,
     {
+      ref: pickerRef,
       wrapperClassName: datePickerWrapperClassNames,
       startDate: isRangeMode(mode) ? startDate : void 0,
       endDate: isRangeMode(mode) ? endDate : void 0,
@@ -7808,10 +7857,33 @@ var DatePicker = ({
       renderDayContents: (day) => /* @__PURE__ */ React100.createElement("span", { className: "Layer__datepicker__day-contents" }, day),
       timeIntervals,
       timeCaption,
+      timeFormat: "h mm aa",
       showTimeSelect: mode === "timePicker",
       showTimeSelectOnly: mode === "timePicker",
       minDate,
-      maxDate: /* @__PURE__ */ new Date(),
+      maxDate,
+      withPortal: !isDesktop,
+      onCalendarOpen: () => {
+        if (!isDesktop) {
+          setTimeout(() => {
+            document.getElementById("Layer__datepicker__portal")?.classList.remove("Layer__datepicker__portal--closed");
+            document.getElementById("Layer__datepicker__portal")?.classList.add("Layer__datepicker__portal--opened");
+          }, 10);
+        }
+      },
+      onCalendarClose: () => {
+        if (!isDesktop) {
+          document.getElementById("Layer__datepicker__portal")?.classList.add("Layer__datepicker__portal--closed");
+          document.getElementById("Layer__datepicker__portal")?.classList.remove("Layer__datepicker__portal--opened");
+        }
+      },
+      portalId: "Layer__datepicker__portal",
+      onFocus: (e) => e.target.readOnly = true,
+      onInputClick: () => {
+        if (pickerRef.current && !isDesktop) {
+          pickerRef.current.setOpen(!pickerRef.current.isCalendarOpen);
+        }
+      },
       ...props
     },
     mode === "dayRangePicker" && /* @__PURE__ */ React100.createElement(
@@ -7821,7 +7893,39 @@ var DatePicker = ({
         setSelectedDate: setSelectedDates
       }
     )
-  ), currentDateOption && (mode === "dayPicker" || mode === "monthPicker") && /* @__PURE__ */ React100.createElement(
+  ), navigateArrows && !isDesktop && /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
+    Button,
+    {
+      "aria-label": "Previous Date",
+      className: classNames37(
+        "Layer__datepicker__prev-button",
+        isBeforeMinDate && "Layer__datepicker__button--disabled"
+      ),
+      onClick: () => changeDate(-1),
+      variant: "secondary" /* secondary */,
+      disabled: isBeforeMinDate
+    },
+    /* @__PURE__ */ React100.createElement(ChevronLeft_default, { className: "Layer__datepicker__button-icon", size: 16 })
+  ), /* @__PURE__ */ React100.createElement(
+    Button,
+    {
+      "aria-label": "Next Date",
+      variant: "secondary" /* secondary */,
+      className: classNames37(
+        "Layer__datepicker__next-button",
+        isTodayOrAfter ? "Layer__datepicker__button--disabled" : void 0
+      ),
+      onClick: () => changeDate(1),
+      disabled: isTodayOrAfter
+    },
+    /* @__PURE__ */ React100.createElement(
+      ChevronRight_default,
+      {
+        className: "Layer__datepicker__button-icon",
+        size: 16
+      }
+    )
+  )), currentDateOption && (mode === "dayPicker" || mode === "monthPicker") && /* @__PURE__ */ React100.createElement(
     Button,
     {
       className: "Layer__datepicker__current-button",
@@ -8293,7 +8397,7 @@ var BankTransactionsContent = ({
         setDateRange: (v) => setDateRange(v)
       }
     ),
-    !listView && /* @__PURE__ */ React106.createElement(
+    !listView && /* @__PURE__ */ React106.createElement("div", { className: "Layer__bank-transactions__table-wrapper" }, /* @__PURE__ */ React106.createElement(
       BankTransactionsTable,
       {
         categorizeView,
@@ -8306,7 +8410,7 @@ var BankTransactionsContent = ({
         showDescriptions,
         showReceiptUploads
       }
-    ),
+    )),
     isLoading && !bankTransactions ? /* @__PURE__ */ React106.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ React106.createElement(Loader2, null)) : null,
     !isLoading && listView && mobileComponent !== "mobileList" ? /* @__PURE__ */ React106.createElement(
       BankTransactionList,
@@ -8358,7 +8462,7 @@ var BankTransactionsContent = ({
 import React107 from "react";
 
 // src/hooks/useQuickbooks/useQuickbooks.ts
-import { useEffect as useEffect21, useRef as useRef13, useState as useState27 } from "react";
+import { useEffect as useEffect21, useRef as useRef14, useState as useState27 } from "react";
 var DEBUG2 = true;
 var useQuickbooks = () => {
   const { auth, businessId, apiUrl } = useLayerContext();
@@ -8366,7 +8470,7 @@ var useQuickbooks = () => {
   const [quickbooksIsLinked, setQuickbooksIsLinked] = useState27(
     null
   );
-  const syncStatusIntervalRef = useRef13(null);
+  const syncStatusIntervalRef = useRef14(null);
   useEffect21(() => {
     if (isSyncingFromQuickbooks && syncStatusIntervalRef.current === null) {
       const interval = setInterval(() => fetchIsSyncingFromQuickbooks(), 2e3);
@@ -8792,6 +8896,7 @@ var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
             totalExpenses: 0,
             uncategorizedInflows: 0,
             uncategorizedOutflows: 0,
+            uncategorized_transactions: 0,
             isLoading: true
           });
         }
@@ -8842,12 +8947,16 @@ var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
       mutate();
     }
   }, [syncTimestamps]);
+  const refetch = () => {
+    mutate();
+  };
   return {
     data,
     isLoading,
     loaded,
     error,
-    pullData
+    pullData,
+    refetch
   };
 };
 
@@ -11041,7 +11150,7 @@ var TableRow = ({
 };
 
 // src/components/Table/Table.tsx
-import React131, { useEffect as useEffect28, useRef as useRef14 } from "react";
+import React131, { useEffect as useEffect28, useRef as useRef15 } from "react";
 import classNames47 from "classnames";
 var Table = ({
   componentName,
@@ -11049,8 +11158,8 @@ var Table = ({
   borderCollapse = "separate",
   bottomSpacing = true
 }) => {
-  const tableRef = useRef14(null);
-  const prevChildrenRef = useRef14([]);
+  const tableRef = useRef15(null);
+  const prevChildrenRef = useRef15([]);
   useEffect28(() => {
     if (tableRef.current) {
       const tbody = tableRef.current.querySelector("tbody");
@@ -14737,7 +14846,7 @@ var BookkeepingOverview = ({
 import React175, { useState as useState55 } from "react";
 
 // src/components/TransactionToReviewCard/TransactionToReviewCard.tsx
-import React174, { useContext as useContext37, useEffect as useEffect43, useMemo as useMemo20 } from "react";
+import React174, { useContext as useContext37, useEffect as useEffect43, useState as useState54 } from "react";
 
 // src/components/BadgeLoader/BadgeLoader.tsx
 import React172 from "react";
@@ -14764,27 +14873,33 @@ var NotificationCard = ({
 };
 
 // src/components/TransactionToReviewCard/TransactionToReviewCard.tsx
+import { getMonth, getYear, startOfMonth as startOfMonth14 } from "date-fns";
 var TransactionToReviewCard = ({
   onClick,
   usePnlDateRange
 }) => {
-  const {
-    data,
-    isLoading,
-    loadingStatus,
-    error,
-    refetch,
-    activate: activateBankTransactions
-  } = useBankTransactionsContext();
   const { dateRange: contextDateRange } = useContext37(ProfitAndLoss.Context);
   const dateRange = usePnlDateRange ? contextDateRange : void 0;
+  const [toReview, setToReview] = useState54(0);
+  const { data, loaded, error, refetch } = useProfitAndLossLTM({
+    currentDate: dateRange ? dateRange.startDate : startOfMonth14(/* @__PURE__ */ new Date())
+  });
   useEffect43(() => {
-    activateBankTransactions();
+    checkTransactionsToReview();
   }, []);
-  const toReview = useMemo20(
-    () => countTransactionsToReview({ transactions: data, dateRange }),
-    [data, isLoading, dateRange]
-  );
+  useEffect43(() => {
+    checkTransactionsToReview();
+  }, [dateRange, loaded]);
+  const checkTransactionsToReview = () => {
+    if (data && dateRange) {
+      const monthTx = data.filter(
+        (x) => x.month - 1 === getMonth(dateRange.startDate) && x.year === getYear(dateRange.startDate)
+      );
+      if (monthTx.length > 0) {
+        setToReview(monthTx[0].uncategorized_transactions);
+      }
+    }
+  };
   return /* @__PURE__ */ React174.createElement(
     NotificationCard,
     {
@@ -14792,8 +14907,8 @@ var TransactionToReviewCard = ({
       onClick: () => onClick && onClick()
     },
     /* @__PURE__ */ React174.createElement(Text, { size: "sm" /* sm */ }, "Transactions to review"),
-    loadingStatus === "initial" || loadingStatus === "loading" ? /* @__PURE__ */ React174.createElement(BadgeLoader, null) : null,
-    loadingStatus === "complete" && error ? /* @__PURE__ */ React174.createElement(
+    loaded === "initial" || loaded === "loading" ? /* @__PURE__ */ React174.createElement(BadgeLoader, null) : null,
+    loaded === "complete" && error ? /* @__PURE__ */ React174.createElement(
       Badge,
       {
         variant: "error" /* ERROR */,
@@ -14803,7 +14918,7 @@ var TransactionToReviewCard = ({
       },
       "Refresh"
     ) : null,
-    loadingStatus === "complete" && !error && toReview > 0 ? /* @__PURE__ */ React174.createElement(
+    loaded === "complete" && !error && toReview > 0 ? /* @__PURE__ */ React174.createElement(
       Badge,
       {
         variant: "warning" /* WARNING */,
@@ -14813,7 +14928,7 @@ var TransactionToReviewCard = ({
       toReview,
       " pending"
     ) : null,
-    loadingStatus === "complete" && !error && toReview === 0 ? /* @__PURE__ */ React174.createElement(
+    loaded === "complete" && !error && toReview === 0 ? /* @__PURE__ */ React174.createElement(
       Badge,
       {
         variant: "success" /* SUCCESS */,
@@ -14950,7 +15065,7 @@ var GeneralLedgerView = ({
 };
 
 // src/views/Reports/Reports.tsx
-import React178, { useContext as useContext38, useRef as useRef15, useState as useState57 } from "react";
+import React178, { useContext as useContext38, useRef as useRef16, useState as useState57 } from "react";
 var DownloadButton2 = () => {
   const { dateRange } = useContext38(ProfitAndLoss.Context);
   const { auth, businessId, apiUrl } = useLayerContext();
@@ -15000,7 +15115,7 @@ var DownloadButton2 = () => {
   );
 };
 var Reports = ({ title = "Reports" }) => {
-  const containerRef = useRef15(null);
+  const containerRef = useRef16(null);
   const [activeTab, setActiveTab] = useState57("profitAndLoss");
   return /* @__PURE__ */ React178.createElement(View, { title }, /* @__PURE__ */ React178.createElement("div", { className: "Layer__component Layer__header__actions" }, /* @__PURE__ */ React178.createElement(
     Toggle,
@@ -15040,10 +15155,10 @@ var ReportsPanel = ({ containerRef, openReport }) => {
 };
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
-import React179, { useContext as useContext39, useRef as useRef16 } from "react";
+import React179, { useContext as useContext39, useRef as useRef17 } from "react";
 var COMPONENT_NAME7 = "profit-and-loss";
 var ProfitAndLossView = (props) => {
-  const containerRef = useRef16(null);
+  const containerRef = useRef17(null);
   return /* @__PURE__ */ React179.createElement(Container, { name: COMPONENT_NAME7, ref: containerRef }, /* @__PURE__ */ React179.createElement(ProfitAndLoss, null, /* @__PURE__ */ React179.createElement(ProfitAndLossPanel, { containerRef, ...props })));
 };
 var ProfitAndLossPanel = ({