@layerfi/components 0.1.37 → 0.1.38

package/dist/index.d.ts

@@ -1536,8 +1536,10 @@ declare module '@layerfi/components/components/DatePicker/DatePicker' {
       popperClassName?: string;
       currentDateOption?: boolean;
       minDate?: Date;
+      maxDate?: Date;
+      navigateArrows?: boolean;
   }
-  export const DatePicker: ({ selected, onChange, mode, dateFormat, timeIntervals, timeCaption, placeholderText, options, wrapperClassName, calendarClassName, popperClassName, minDate, currentDateOption, ...props }: DatePickerProps) => React.JSX.Element;
+  export const DatePicker: ({ selected, onChange, mode, dateFormat, timeIntervals, timeCaption, placeholderText, options, wrapperClassName, calendarClassName, popperClassName, minDate, maxDate, currentDateOption, navigateArrows, ...props }: DatePickerProps) => React.JSX.Element;
   export {};
 
 }
@@ -3647,6 +3649,7 @@ declare module '@layerfi/components/hooks/useProfitAndLoss/useProfitAndLossLTM'
       loaded?: LoadedStatus;
       error?: any;
       pullData: (date: Date) => void;
+      refetch: () => void;
   };
   /**
    * Hooks fetch Last Twelve Months sending 12 requests (one for each month).
@@ -4815,6 +4818,7 @@ declare module '@layerfi/components/types/profit_and_loss' {
       uncategorizedOutflows: number;
       operatingExpensesInverse?: number;
       uncategorizedOutflowsInverse?: number;
+      uncategorized_transactions: number;
   }
   export interface ProfitAndLossSummaries {
       type: 'Profit_And_Loss_Summaries';

package/dist/index.js

@@ -454,9 +454,9 @@ function useSizeClass() {
   const [width] = useWindowSize();
   const sizeClass = (0, import_react2.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";
@@ -608,8 +608,25 @@ var DEPENDENCIES = {
   ["STATEMENT_OF_CASH_FLOWS" /* STATEMENT_OF_CASH_FLOWS */]: ALL_TOUCHABLE
 };
 var useDataSync = () => {
-  const [syncTimestamps, setSyncTimestamps] = (0, import_react7.useState)({});
-  const [readTimestamps, setReadTimestamps] = (0, import_react7.useState)({});
+  const initialTimestamp = Date.now();
+  const [syncTimestamps, setSyncTimestamps] = (0, import_react7.useState)({
+    ["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] = (0, import_react7.useState)({
+    ["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,
@@ -7709,7 +7726,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,
@@ -7718,11 +7735,15 @@ var DatePicker = ({
   calendarClassName,
   popperClassName,
   minDate,
+  maxDate = /* @__PURE__ */ new Date(),
   currentDateOption = true,
+  navigateArrows = mode === "monthPicker",
   ...props
 }) => {
+  const pickerRef = (0, import_react86.useRef)(null);
   const [updatePickerDate, setPickerDate] = (0, import_react86.useState)(false);
   const [selectedDates, setSelectedDates] = (0, import_react86.useState)(selected);
+  const { isDesktop } = useSizeClass();
   const [startDate, setStartDate] = (0, import_react86.useState)(
     getDefaultRangeDate("start", mode, selected) ?? /* @__PURE__ */ new Date()
   );
@@ -7762,7 +7783,8 @@ var DatePicker = ({
   }, [startDate, endDate]);
   const wrapperClassNames = (0, import_classnames38.default)(
     "Layer__datepicker__wrapper",
-    mode === "timePicker" && "Layer__datepicker__time__wrapper"
+    mode === "timePicker" && "Layer__datepicker__time__wrapper",
+    navigateArrows && "Layer__datepicker__wrapper--arrows"
   );
   const datePickerWrapperClassNames = (0, import_classnames38.default)(
     "Layer__datepicker",
@@ -7775,6 +7797,7 @@ var DatePicker = ({
   );
   const popperClassNames = (0, import_classnames38.default)(
     "Layer__datepicker__popper",
+    mode === "timePicker" && "Layer__datepicker__time__popper",
     popperClassName
   );
   const handleDateChange = (date) => {
@@ -7805,9 +7828,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__ */ import_react86.default.createElement("div", { className: wrapperClassNames }, /* @__PURE__ */ import_react86.default.createElement(
     import_react_datepicker.default,
     {
+      ref: pickerRef,
       wrapperClassName: datePickerWrapperClassNames,
       startDate: isRangeMode(mode) ? startDate : void 0,
       endDate: isRangeMode(mode) ? endDate : void 0,
@@ -7823,10 +7872,33 @@ var DatePicker = ({
       renderDayContents: (day) => /* @__PURE__ */ import_react86.default.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__ */ import_react86.default.createElement(
@@ -7836,7 +7908,39 @@ var DatePicker = ({
         setSelectedDate: setSelectedDates
       }
     )
-  ), currentDateOption && (mode === "dayPicker" || mode === "monthPicker") && /* @__PURE__ */ import_react86.default.createElement(
+  ), navigateArrows && !isDesktop && /* @__PURE__ */ import_react86.default.createElement(import_react86.default.Fragment, null, /* @__PURE__ */ import_react86.default.createElement(
+    Button,
+    {
+      "aria-label": "Previous Date",
+      className: (0, import_classnames38.default)(
+        "Layer__datepicker__prev-button",
+        isBeforeMinDate && "Layer__datepicker__button--disabled"
+      ),
+      onClick: () => changeDate(-1),
+      variant: "secondary" /* secondary */,
+      disabled: isBeforeMinDate
+    },
+    /* @__PURE__ */ import_react86.default.createElement(ChevronLeft_default, { className: "Layer__datepicker__button-icon", size: 16 })
+  ), /* @__PURE__ */ import_react86.default.createElement(
+    Button,
+    {
+      "aria-label": "Next Date",
+      variant: "secondary" /* secondary */,
+      className: (0, import_classnames38.default)(
+        "Layer__datepicker__next-button",
+        isTodayOrAfter ? "Layer__datepicker__button--disabled" : void 0
+      ),
+      onClick: () => changeDate(1),
+      disabled: isTodayOrAfter
+    },
+    /* @__PURE__ */ import_react86.default.createElement(
+      ChevronRight_default,
+      {
+        className: "Layer__datepicker__button-icon",
+        size: 16
+      }
+    )
+  )), currentDateOption && (mode === "dayPicker" || mode === "monthPicker") && /* @__PURE__ */ import_react86.default.createElement(
     Button,
     {
       className: "Layer__datepicker__current-button",
@@ -8308,7 +8412,7 @@ var BankTransactionsContent = ({
         setDateRange: (v) => setDateRange(v)
       }
     ),
-    !listView && /* @__PURE__ */ import_react91.default.createElement(
+    !listView && /* @__PURE__ */ import_react91.default.createElement("div", { className: "Layer__bank-transactions__table-wrapper" }, /* @__PURE__ */ import_react91.default.createElement(
       BankTransactionsTable,
       {
         categorizeView,
@@ -8321,7 +8425,7 @@ var BankTransactionsContent = ({
         showDescriptions,
         showReceiptUploads
       }
-    ),
+    )),
     isLoading && !bankTransactions ? /* @__PURE__ */ import_react91.default.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ import_react91.default.createElement(Loader2, null)) : null,
     !isLoading && listView && mobileComponent !== "mobileList" ? /* @__PURE__ */ import_react91.default.createElement(
       BankTransactionList,
@@ -8807,6 +8911,7 @@ var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
             totalExpenses: 0,
             uncategorizedInflows: 0,
             uncategorizedOutflows: 0,
+            uncategorized_transactions: 0,
             isLoading: true
           });
         }
@@ -8857,12 +8962,16 @@ var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
       mutate();
     }
   }, [syncTimestamps]);
+  const refetch = () => {
+    mutate();
+  };
   return {
     data,
     isLoading,
     loaded,
     error,
-    pullData
+    pullData,
+    refetch
   };
 };
 
@@ -14740,27 +14849,33 @@ var NotificationCard = ({
 };
 
 // src/components/TransactionToReviewCard/TransactionToReviewCard.tsx
+var import_date_fns34 = require("date-fns");
 var TransactionToReviewCard = ({
   onClick,
   usePnlDateRange
 }) => {
-  const {
-    data,
-    isLoading,
-    loadingStatus,
-    error,
-    refetch,
-    activate: activateBankTransactions
-  } = useBankTransactionsContext();
   const { dateRange: contextDateRange } = (0, import_react169.useContext)(ProfitAndLoss.Context);
   const dateRange = usePnlDateRange ? contextDateRange : void 0;
+  const [toReview, setToReview] = (0, import_react169.useState)(0);
+  const { data, loaded, error, refetch } = useProfitAndLossLTM({
+    currentDate: dateRange ? dateRange.startDate : (0, import_date_fns34.startOfMonth)(/* @__PURE__ */ new Date())
+  });
   (0, import_react169.useEffect)(() => {
-    activateBankTransactions();
+    checkTransactionsToReview();
   }, []);
-  const toReview = (0, import_react169.useMemo)(
-    () => countTransactionsToReview({ transactions: data, dateRange }),
-    [data, isLoading, dateRange]
-  );
+  (0, import_react169.useEffect)(() => {
+    checkTransactionsToReview();
+  }, [dateRange, loaded]);
+  const checkTransactionsToReview = () => {
+    if (data && dateRange) {
+      const monthTx = data.filter(
+        (x) => x.month - 1 === (0, import_date_fns34.getMonth)(dateRange.startDate) && x.year === (0, import_date_fns34.getYear)(dateRange.startDate)
+      );
+      if (monthTx.length > 0) {
+        setToReview(monthTx[0].uncategorized_transactions);
+      }
+    }
+  };
   return /* @__PURE__ */ import_react169.default.createElement(
     NotificationCard,
     {
@@ -14768,8 +14883,8 @@ var TransactionToReviewCard = ({
       onClick: () => onClick && onClick()
     },
     /* @__PURE__ */ import_react169.default.createElement(Text, { size: "sm" /* sm */ }, "Transactions to review"),
-    loadingStatus === "initial" || loadingStatus === "loading" ? /* @__PURE__ */ import_react169.default.createElement(BadgeLoader, null) : null,
-    loadingStatus === "complete" && error ? /* @__PURE__ */ import_react169.default.createElement(
+    loaded === "initial" || loaded === "loading" ? /* @__PURE__ */ import_react169.default.createElement(BadgeLoader, null) : null,
+    loaded === "complete" && error ? /* @__PURE__ */ import_react169.default.createElement(
       Badge,
       {
         variant: "error" /* ERROR */,
@@ -14779,7 +14894,7 @@ var TransactionToReviewCard = ({
       },
       "Refresh"
     ) : null,
-    loadingStatus === "complete" && !error && toReview > 0 ? /* @__PURE__ */ import_react169.default.createElement(
+    loaded === "complete" && !error && toReview > 0 ? /* @__PURE__ */ import_react169.default.createElement(
       Badge,
       {
         variant: "warning" /* WARNING */,
@@ -14789,7 +14904,7 @@ var TransactionToReviewCard = ({
       toReview,
       " pending"
     ) : null,
-    loadingStatus === "complete" && !error && toReview === 0 ? /* @__PURE__ */ import_react169.default.createElement(
+    loaded === "complete" && !error && toReview === 0 ? /* @__PURE__ */ import_react169.default.createElement(
       Badge,
       {
         variant: "success" /* SUCCESS */,