@layerfi/components 0.1.116-alpha → 0.1.116-alpha.1

package/README.md

@@ -390,7 +390,7 @@ The full list of variables is listed in the [`variables.css`](https://github.com
 --text-sm: 12px;
 --text-md: 14px;
 --text-lg: 16px;
---text-heading: 24px;
+--text-heading: 24px; // 20px on mobile (max-width: 768px)
 --text-heading-sm: 16px;
 --font-weight-normal: 460;
 --font-weight-bold: 540;

package/dist/cjs/index.cjs

@@ -202,7 +202,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.116-alpha";
+const version = "0.1.116-alpha.1";
 const pkg = {
   version
 };
@@ -5934,7 +5934,16 @@ const OnboardingContent = ({
     }
   ) }) });
 };
-const DATE_FORMAT$1 = "LLL d, yyyy";
+const MONTH_FORMAT = "MMMM";
+const MONTH_FORMAT_SHORT = "MMM";
+const MONTH_FORMAT_ABBREVIATED = "LLL";
+const MONTH_FORMAT_NARROW = "LLLLL";
+const MONTH_DAY_FORMAT = "LLL d";
+const MONTH_DAY_FORMAT_SHORT = "MMM d";
+const MONTH_YEAR_FORMAT = "MMMM yyyy";
+const MONTH_YEAR_FORMAT_SHORT = "MMM yyyy";
+const MONTH_YEAR_FORMAT_FULL = "LLLL, y";
+const DATE_FORMAT = "LLL d, yyyy";
 const DATE_FORMAT_SHORT = "M/d/yyyy";
 const DATE_FORMAT_WITH_TIME_READABLE = "LLLL do, yyyy 'at' h:mm a";
 const TIME_FORMAT = "p";
@@ -6568,6 +6577,37 @@ function useDebounce(fn) {
   }, []);
   return debouncedCallback;
 }
+const useWindowSize = () => {
+  const [size, setSize] = react.useState([0, 0]);
+  react.useLayoutEffect(() => {
+    function updateSize() {
+      setSize([window.innerWidth, window.innerHeight]);
+    }
+    window.addEventListener("resize", updateSize);
+    updateSize();
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
+  return size;
+};
+function useSizeClass() {
+  const [width] = useWindowSize();
+  const sizeClass = react.useMemo(() => {
+    switch (true) {
+      case width <= BREAKPOINTS.MOBILE:
+        return "mobile";
+      case width <= BREAKPOINTS.TABLET:
+        return "tablet";
+      default:
+        return "desktop";
+    }
+  }, [width]);
+  return {
+    value: sizeClass,
+    isMobile: sizeClass === "mobile",
+    isTablet: sizeClass === "tablet",
+    isDesktop: sizeClass === "desktop"
+  };
+}
 const CLASS_NAME$b = "Layer__LoadingSpinner";
 function LoadingSpinner({ size }) {
   return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: CLASS_NAME$b, size });
@@ -8155,7 +8195,7 @@ const DateTime = ({
   if (format) {
     return /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "Layer__datetime", children: dateFns.format(dateValue, format) });
   }
-  const date2 = dateFns.format(dateValue, dateFormat != null ? dateFormat : DATE_FORMAT$1);
+  const date2 = dateFns.format(dateValue, dateFormat != null ? dateFormat : DATE_FORMAT);
   const time = dateFns.format(dateValue, timeFormat != null ? timeFormat : TIME_FORMAT);
   return /* @__PURE__ */ jsxRuntime.jsxs(Text, { className: "Layer__datetime", children: [
     !onlyTime && /* @__PURE__ */ jsxRuntime.jsx(Span, __spreadProps(__spreadValues({}, slotProps.Date), { children: date2 })),
@@ -9179,7 +9219,7 @@ const convertCentsToCurrency = (amount) => {
     return void 0;
   }
 };
-const formatDate = (date2, dateFormat = DATE_FORMAT$1) => {
+const formatDate = (date2, dateFormat = DATE_FORMAT) => {
   try {
     if (!date2) {
       return "";
@@ -11401,37 +11441,6 @@ const Header$1 = react.forwardRef(
   }
 );
 Header$1.displayName = "Header";
-const useWindowSize = () => {
-  const [size, setSize] = react.useState([0, 0]);
-  react.useLayoutEffect(() => {
-    function updateSize() {
-      setSize([window.innerWidth, window.innerHeight]);
-    }
-    window.addEventListener("resize", updateSize);
-    updateSize();
-    return () => window.removeEventListener("resize", updateSize);
-  }, []);
-  return size;
-};
-function useSizeClass() {
-  const [width] = useWindowSize();
-  const sizeClass = react.useMemo(() => {
-    switch (true) {
-      case width <= BREAKPOINTS.MOBILE:
-        return "mobile";
-      case width <= BREAKPOINTS.TABLET:
-        return "tablet";
-      default:
-        return "desktop";
-    }
-  }, [width]);
-  return {
-    value: sizeClass,
-    isMobile: sizeClass === "mobile",
-    isTablet: sizeClass === "tablet",
-    isDesktop: sizeClass === "desktop"
-  };
-}
 const MONTHS = [
   "January",
   "February",
@@ -11602,23 +11611,33 @@ const MonthPicker = ({
   date: date2,
   onChange,
   minDate = null,
-  maxDate = null
+  maxDate = null,
+  truncateMonth = false
 }) => {
   const triggerRef = react.useRef(null);
   const [isPopoverOpen, setPopoverOpen] = react.useState(false);
-  const { value } = useSizeClass();
+  const { value, isMobile } = useSizeClass();
   const onChangeMonth = react.useCallback((val) => {
     onChange(val);
     setPopoverOpen(false);
   }, [onChange]);
-  const inputValue = dateFns.format(date2.toDate(), "MMMM yyyy");
+  const inputValue = dateFns.format(date2.toDate(), truncateMonth ? MONTH_YEAR_FORMAT_SHORT : MONTH_YEAR_FORMAT);
   const additionalAriaProps = !showLabel && { "aria-label": label };
   return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.DialogTrigger, { isOpen: isPopoverOpen, onOpenChange: setPopoverOpen, children: [
     showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs(InputGroup$1, { ref: triggerRef, slot: "input", className: "Layer__MonthPicker__InputGroup", onClick: () => setPopoverOpen(true), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Input$1, __spreadProps(__spreadValues({ inset: true }, additionalAriaProps), { value: inputValue, readOnly: true })),
-      /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "3xs", align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { icon: true, inset: true, variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 20 }) }) })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      InputGroup$1,
+      {
+        ref: triggerRef,
+        slot: "input",
+        className: classNames("Layer__MonthPicker__InputGroup", { "Layer__MonthPicker__InputGroup--mobile": isMobile }),
+        onClick: () => setPopoverOpen(true),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Input$1, __spreadProps(__spreadValues({ inset: true }, additionalAriaProps), { value: inputValue, readOnly: true })),
+          /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "3xs", align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { icon: true, inset: true, variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 20 }) }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(ResponsivePopover, { triggerRef, children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { children: /* @__PURE__ */ jsxRuntime.jsx(
       MonthCalendar,
       {
@@ -11839,6 +11858,7 @@ const BankTransactionsHeader = ({
     filters,
     dateFilterMode
   } = useBankTransactionsFiltersContext();
+  const { value: sizeClass } = useSizeClass();
   const withDatePicker = dateFilterMode === BankTransactionsDateFilterMode.MonthlyView;
   const monthPickerDate = (filters == null ? void 0 : filters.dateRange) ? convertDateToZonedDateTime(filters.dateRange.startDate) : null;
   const setDateRange = react.useCallback((newMonth) => {
@@ -11879,7 +11899,8 @@ const BankTransactionsHeader = ({
         date: monthPickerDate,
         onChange: setDateRange,
         minDate: activationDate ? convertDateToZonedDateTime(activationDate) : null,
-        maxDate: convertDateToZonedDateTime(/* @__PURE__ */ new Date())
+        maxDate: convertDateToZonedDateTime(/* @__PURE__ */ new Date()),
+        truncateMonth: sizeClass === "mobile"
       }
     )
   ] }), [
@@ -11890,7 +11911,8 @@ const BankTransactionsHeader = ({
     monthPickerDate,
     setDateRange,
     stringOverrides == null ? void 0 : stringOverrides.header,
-    withDatePicker
+    withDatePicker,
+    sizeClass
   ]);
   const onCategorizationDisplayChange = (value) => {
     setFilters({
@@ -15495,7 +15517,7 @@ const Trash = (_Lb) => {
 };
 const readDate = (date2) => {
   if (!date2) return void 0;
-  return date2 && dateFns.format(dateFns.parseISO(date2), DATE_FORMAT$1);
+  return date2 && dateFns.format(dateFns.parseISO(date2), DATE_FORMAT);
 };
 const RECEIPT_ALLOWED_UPLOAD_FILE_TYPES = [
   "image/jpeg",
@@ -15578,7 +15600,7 @@ const useReceipts = ({
           url: void 0,
           status: "failed",
           name: file.name,
-          date: dateFns.format(dateFns.parseISO((/* @__PURE__ */ new Date()).toISOString()), DATE_FORMAT$1),
+          date: dateFns.format(dateFns.parseISO((/* @__PURE__ */ new Date()).toISOString()), DATE_FORMAT),
           error: "Invalid file type. Please upload an image or PDF."
         }
       ]);
@@ -15598,7 +15620,7 @@ const useReceipts = ({
       url: void 0,
       status: "pending",
       name: renamedFile.name,
-      date: dateFns.format(dateFns.parseISO((/* @__PURE__ */ new Date()).toISOString()), DATE_FORMAT$1)
+      date: dateFns.format(dateFns.parseISO((/* @__PURE__ */ new Date()).toISOString()), DATE_FORMAT)
     };
     try {
       setReceiptUrls((prev) => [...prev, newReceipt]);
@@ -16112,7 +16134,7 @@ const MatchForm = ({
             setSelectedMatch(suggestedMatch);
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `Layer__nowrap ${classNamePrefix}__match-table__date`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: dateFns.format(dateFns.parseISO(suggestedMatch.details.date), DATE_FORMAT$1) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `Layer__nowrap ${classNamePrefix}__match-table__date`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: dateFns.format(dateFns.parseISO(suggestedMatch.details.date), DATE_FORMAT) }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classNamePrefix}__match-table__desc`, children: /* @__PURE__ */ jsxRuntime.jsx(
               Text,
               {
@@ -16136,7 +16158,7 @@ const MatchForm = ({
                   {
                     classNamePrefix,
                     bankTransaction,
-                    dateFormat: DATE_FORMAT$1,
+                    dateFormat: DATE_FORMAT,
                     text: isTransferMatch(bankTransaction) ? "Transfer" : "Matched"
                   }
                 )
@@ -18484,7 +18506,7 @@ const BankTransactionsList = ({
         BankTransactionsListItem,
         {
           index: index2,
-          dateFormat: DATE_FORMAT$1,
+          dateFormat: DATE_FORMAT,
           bankTransaction,
           editable,
           removeTransaction,
@@ -18558,7 +18580,6 @@ const BankTransactionsMobileBulkActionsHeader = ({
     }
   );
 };
-const DATE_FORMAT = "LLL d";
 const BankTransactionsAmountDate = ({ amount, date: date2, slotProps }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     VStack,
@@ -18577,7 +18598,7 @@ const BankTransactionsAmountDate = ({ amount, date: date2, slotProps }) => {
           DateTime,
           {
             value: date2,
-            dateFormat: DATE_FORMAT,
+            dateFormat: MONTH_DAY_FORMAT,
             onlyDate: true,
             slotProps: {
               Date: __spreadValues({
@@ -19868,7 +19889,7 @@ const BankTransactionsTable = ({
               {
                 index: index2,
                 editable,
-                dateFormat: DATE_FORMAT$1,
+                dateFormat: DATE_FORMAT,
                 bankTransaction,
                 removeTransaction,
                 showDescriptions,
@@ -21002,7 +21023,7 @@ const getQuickbooksConnectionSyncUiState = (quickbooksConnectionStatus) => {
 const formatLastSyncedAt = (datetime) => {
   const parsed = new Date(datetime);
   if (!dateFns.isValid(parsed)) return "";
-  return `${dateFns.format(parsed, "MMMM d, yyyy")} at ${dateFns.format(parsed, "h:mm a")}`;
+  return `${dateFns.format(parsed, `${MONTH_FORMAT} d, yyyy`)} at ${dateFns.format(parsed, "h:mm a")}`;
 };
 const getFooterConfig = (quickbooksUiState, lastSyncedAt) => {
   switch (quickbooksUiState) {
@@ -23709,7 +23730,7 @@ const ProfitAndLossChart = ({
   }, [hasLoadedData]);
   const getMonthName = react.useCallback((pnl) => pnl ? dateFns.format(
     new Date(pnl.year, pnl.month - 1, 1),
-    compactView ? "LLLLL" : "LLL"
+    compactView ? MONTH_FORMAT_NARROW : MONTH_FORMAT_ABBREVIATED
   ) : "", [compactView]);
   const summarizePnL = react.useCallback((pnl) => ({
     name: getMonthName(pnl),
@@ -23733,7 +23754,7 @@ const ProfitAndLossChart = ({
       for (let i = 11; i >= 0; i--) {
         const currentDate = dateFns.sub(today, { months: i });
         loadingData.push({
-          name: dateFns.format(currentDate, compactView ? "LLLLL" : "LLL"),
+          name: dateFns.format(currentDate, compactView ? MONTH_FORMAT_NARROW : MONTH_FORMAT_ABBREVIATED),
           revenue: 0,
           revenueUncategorized: 0,
           totalExpensesInverse: 0,
@@ -24265,7 +24286,7 @@ const BackButton = (_Ec) => {
   const baseClassName2 = classNames("Layer__btn", "Layer__back-btn", className);
   return /* @__PURE__ */ jsxRuntime.jsx("button", __spreadProps(__spreadValues({}, props), { className: baseClassName2, children: textOnly ? "Back" : /* @__PURE__ */ jsxRuntime.jsx(BackArrow, { size: 16 }) }));
 };
-const GlobalMonthPicker = () => {
+const GlobalMonthPicker = ({ truncateMonth }) => {
   const rawActivationDate = useBusinessActivationDate();
   const activationDate = react.useMemo(() => rawActivationDate ? dateFns.startOfDay(rawActivationDate) : null, [rawActivationDate]);
   const { setMonth } = useGlobalDateRangeActions();
@@ -24284,7 +24305,8 @@ const GlobalMonthPicker = () => {
       date: dateZdt,
       onChange,
       minDate: minDateZdt,
-      maxDate: maxDateZdt
+      maxDate: maxDateZdt,
+      truncateMonth
     }
   );
 };
@@ -24398,10 +24420,10 @@ const ValueIcon = ({
               width: "3",
               height: "3",
               patternUnits: "userSpaceOnUse",
-              children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "1", height: "1", opacity: 0.76 })
+              children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "1", height: "1", opacity: 0.76, className: "Layer__charts__dots-pattern-legend__dot" })
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "12", height: "12", id: "layer-pie-dots-pattern-bg", rx: "2" }),
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "12", height: "12", id: "layer-pie-dots-pattern-bg", rx: "2", className: "Layer__charts__dots-pattern-legend__bg" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
@@ -24438,21 +24460,26 @@ const DetailedTable = ({
   stringOverrides,
   onValueClick
 }) => {
-  const buildColClass = (column) => {
-    var _a, _b, _c;
-    return classNames(
-      "Layer__sortable-col",
-      sidebarScope && ((_a = filters[sidebarScope]) == null ? void 0 : _a.sortBy) === column ? `sort--${(_c = sidebarScope && ((_b = filters[sidebarScope]) == null ? void 0 : _b.sortDirection)) != null ? _c : "desc"}` : ""
-    );
-  };
   const typeColorMapping = mapTypesToColors(filteredData, chartColorsList);
   const positiveTotal = filteredData.filter((x) => x.value > 0).reduce((sum, x) => sum + x.value, 0);
+  const buildColClass = react.useCallback((column) => {
+    var _a, _b, _c;
+    if (!sidebarScope || !((_a = filters[sidebarScope]) == null ? void 0 : _a.sortDirection)) {
+      return "";
+    }
+    if (((_b = filters[sidebarScope]) == null ? void 0 : _b.sortBy) === column) {
+      return `sort--${(_c = filters[sidebarScope]) == null ? void 0 : _c.sortDirection}`;
+    }
+    return "";
+  }, [sidebarScope, filters]);
+  const { isMobile } = useSizeClass();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "details-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("th", {}),
       /* @__PURE__ */ jsxRuntime.jsxs(
         "th",
         {
-          className: buildColClass("category"),
+          className: classNames("Layer__sortable-col", buildColClass("category")),
           onClick: () => sortBy(sidebarScope != null ? sidebarScope : "expenses", "category"),
           children: [
             (stringOverrides == null ? void 0 : stringOverrides.categoryColumnHeader) || "Category",
@@ -24461,10 +24488,10 @@ const DetailedTable = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      !isMobile && /* @__PURE__ */ jsxRuntime.jsxs(
         "th",
         {
-          className: buildColClass("type"),
+          className: classNames("Layer__sortable-col", buildColClass("type")),
           onClick: () => sortBy(sidebarScope != null ? sidebarScope : "expenses", "type"),
           children: [
             (stringOverrides == null ? void 0 : stringOverrides.typeColumnHeader) || "Type",
@@ -24473,11 +24500,10 @@ const DetailedTable = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("th", {}),
       /* @__PURE__ */ jsxRuntime.jsxs(
         "th",
         {
-          className: buildColClass("value"),
+          className: classNames("Layer__sortable-col", buildColClass("value"), "value-col"),
           onClick: () => sortBy(sidebarScope != null ? sidebarScope : "expenses", "value"),
           children: [
             (stringOverrides == null ? void 0 : stringOverrides.valueColumnHeader) || "Value",
@@ -24485,7 +24511,8 @@ const DetailedTable = ({
             /* @__PURE__ */ jsxRuntime.jsx(SortArrows, { className: "Layer__sort-arrows" })
           ]
         }
-      )
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "percent-col" })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: filteredData.map((item, idx) => {
       const share = item.value > 0 ? item.value / positiveTotal : 0;
@@ -24499,8 +24526,16 @@ const DetailedTable = ({
           onMouseEnter: () => setHoveredItem(item),
           onMouseLeave: () => setHoveredItem(void 0),
           children: [
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "color-col", children: /* @__PURE__ */ jsxRuntime.jsx(
+              ValueIcon,
+              {
+                item,
+                typeColorMapping,
+                idx
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsx("td", { className: "category-col", children: item.displayName }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "type-col", children: item.type }),
+            !isMobile && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "type-col", children: item.type }),
             /* @__PURE__ */ jsxRuntime.jsx("td", { className: "value-col", children: /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
@@ -24510,17 +24545,7 @@ const DetailedTable = ({
                 children: /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { size: "sm", amount: item.value })
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "share-col", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "share-cell-content", children: [
-              item.value < 0 ? "-" : `${formatPercent(share)}%`,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ValueIcon,
-                {
-                  item,
-                  typeColorMapping,
-                  idx
-                }
-              )
-            ] }) })
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "percent-col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "share-text", children: item.value < 0 ? "-" : `${formatPercent(share)}%` }) })
           ]
         },
         `pl-side-table-item-${idx}`
@@ -25543,8 +25568,8 @@ const ProfitAndLossDetailReport = ({
     return breadcrumbPath || [{ name: lineItemName, display_name: lineItemName }];
   }, [breadcrumbPath, lineItemName]);
   const formatDateRange = (startDate, endDate) => {
-    const start = dateFns.format(startDate, "MMM d");
-    const end = dateFns.format(endDate, "MMM d");
+    const start = dateFns.format(startDate, MONTH_DAY_FORMAT_SHORT);
+    const end = dateFns.format(endDate, MONTH_DAY_FORMAT_SHORT);
     return `${start} - ${end}`;
   };
   const { data, isLoading, isError } = useProfitAndLossDetailLines({
@@ -25766,6 +25791,13 @@ const ProfitAndLossDetailedCharts = ({
   const theScope = scope ? scope : sidebarScope;
   const data = theScope === "revenue" ? filteredDataRevenue : filteredDataExpenses;
   const total = theScope === "revenue" ? filteredTotalRevenue : filteredTotalExpenses;
+  const isEmpty = react.useMemo(() => {
+    if (isLoading) return false;
+    const chartData = data.map((x) => __spreadProps(__spreadValues({}, x), {
+      value: x.value > 0 ? x.value : 0
+    }));
+    return chartData.length === 0 || !chartData.find((x) => x.value !== 0);
+  }, [data, isLoading]);
   const [hoveredItem, setHoveredItem] = react.useState(void 0);
   const [selectedItem, setSelectedItem] = react.useState(null);
   const [isModalOpen, setIsModalOpen] = react.useState(false);
@@ -25780,7 +25812,7 @@ const ProfitAndLossDetailedCharts = ({
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "Layer__profit-and-loss-detailed-charts__header", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__profit-and-loss-detailed-charts__head", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.lg, weight: TextWeight.bold, className: "title", children: humanizeTitle(theScope, stringOverrides == null ? void 0 : stringOverrides.detailedChartStringOverrides) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.sm, className: "date", children: dateFns.format(dateRange.startDate, "LLLL, y") }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.sm, className: "date", children: dateFns.format(dateRange.startDate, MONTH_YEAR_FORMAT_FULL) }),
         showDatePicker && /* @__PURE__ */ jsxRuntime.jsx(GlobalMonthPicker, {})
       ] }),
       !hideClose && /* @__PURE__ */ jsxRuntime.jsx(
@@ -25797,10 +25829,16 @@ const ProfitAndLossDetailedCharts = ({
       !hideClose && /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: () => setSidebarScope(void 0) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__profit-and-loss-detailed-charts__head", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.lg, weight: TextWeight.bold, className: "title", children: humanizeTitle(theScope, stringOverrides == null ? void 0 : stringOverrides.detailedChartStringOverrides) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.sm, className: "date", children: dateFns.format(dateRange.startDate, "LLLL, y") })
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.sm, className: "date", children: dateFns.format(dateRange.startDate, MONTH_YEAR_FORMAT_FULL) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__profit-and-loss-detailed-charts__content", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__profit-and-loss-detailed-charts__content", children: isEmpty ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__profit-and-loss-detailed-charts__empty-chart", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { align: "center", justify: "center", gap: "md", className: "Layer__profit-and-loss-detailed-charts__empty-chart-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Hourglass, { size: 36, className: "Layer__profit-and-loss-detailed-charts__empty-chart-icon" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Span, { size: TextSize.md, weight: TextWeight.bold, variant: "subtle", children: "No transactions found" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(HStack, { align: "center", justify: "center", gap: "md", pb: "md", className: "Layer__profit-and-loss-detailed-charts__table-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { size: TextSize.md, variant: "subtle", children: "Upload your transactions or wait for transactions to be synced from your bank." }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         DetailedChart,
         {
@@ -25829,7 +25867,7 @@ const ProfitAndLossDetailedCharts = ({
           onValueClick: handleValueClick
         }
       ) })
-    ] }),
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       DetailReportModal,
       {
@@ -26476,7 +26514,7 @@ const generateComparisonPeriods = (params) => {
 const generateComparisonMonths = (endDate, numberOfMonths) => {
   return Array.from({ length: numberOfMonths }, (_, index2) => {
     const currentMonth = dateFns.subMonths(endDate, numberOfMonths - index2 - 1);
-    return { date: currentMonth, label: dateFns.format(currentMonth, "MMM yyyy") };
+    return { date: currentMonth, label: dateFns.format(currentMonth, MONTH_YEAR_FORMAT_SHORT) };
   });
 };
 const generateComparisonYears = (endDate, numberOfYears) => {
@@ -26486,7 +26524,7 @@ const generateComparisonYears = (endDate, numberOfYears) => {
   });
 };
 const generateComparisonDateRange = (startDate, endDate) => {
-  const label = `${dateFns.format(startDate, DATE_FORMAT$1)} - ${dateFns.format(endDate, DATE_FORMAT$1)}`;
+  const label = `${dateFns.format(startDate, DATE_FORMAT)} - ${dateFns.format(endDate, DATE_FORMAT)}`;
   return [{ date: startDate, endDate, label }];
 };
 const getComparisonValue = (name, depth, cellData) => {
@@ -27410,7 +27448,7 @@ function Internal_ProfitAndLossSummaries({
       revenuePercentChange: calculatePercentageChange(currentRevenue, previousRevenue),
       expensesPercentChange: calculatePercentageChange(currentExpenses, previousExpenses),
       netProfitPercentChange: calculatePercentageChange(currentNetProfit, previousNetProfit),
-      comparisonMonth: dateFns.format(previousMonthStart, "MMM")
+      comparisonMonth: dateFns.format(previousMonthStart, MONTH_FORMAT_SHORT)
     };
   }, [previousData, effectiveData, previousMonthStart]);
   const {
@@ -30232,7 +30270,7 @@ const LedgerAccountRow = ({
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "Layer__table-cell-content", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__ledger-account-table__tablet-main-col__date", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { children: row.date && dateFns.format(dateFns.parseISO(row.date), DATE_FORMAT$1) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Text, { children: row.date && dateFns.format(dateFns.parseISO(row.date), DATE_FORMAT) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 Text,
                 {
@@ -30270,7 +30308,7 @@ const LedgerAccountRow = ({
         },
         children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "Layer__table-cell-content", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__ledger-account-table__tablet-main-col__date", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Text, { children: row.date && dateFns.format(dateFns.parseISO(row.date), DATE_FORMAT$1) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { children: row.date && dateFns.format(dateFns.parseISO(row.date), DATE_FORMAT) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Text,
               {
@@ -30319,7 +30357,7 @@ const LedgerAccountRow = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "Layer__table-cell", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__table-cell-content", children: row.date && dateFns.format(dateFns.parseISO(row.date), DATE_FORMAT$1) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "Layer__table-cell", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__table-cell-content", children: row.date && dateFns.format(dateFns.parseISO(row.date), DATE_FORMAT) }) }),
         /* @__PURE__ */ jsxRuntime.jsx("td", { className: "Layer__table-cell", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__table-cell-content", children: lineEntryNumber(row) }) }),
         /* @__PURE__ */ jsxRuntime.jsx("td", { className: "Layer__table-cell", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__table-cell-content", children: (_g = ledgerEntrySource == null ? void 0 : ledgerEntrySource.displayDescription) != null ? _g : "" }) }),
         nodeType !== LedgerAccountNodeType.Leaf && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "Layer__table-cell", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__table-cell-content", children: (_i = (_h = row.account) == null ? void 0 : _h.name) != null ? _i : "" }) }),
@@ -32180,7 +32218,7 @@ const JournalTableContent = ({
                 children: entryNumber(row)
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: row.entry_at && dateFns.format(dateFns.parseISO(row.entry_at), DATE_FORMAT$1) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: row.entry_at && dateFns.format(dateFns.parseISO(row.entry_at), DATE_FORMAT) }),
             /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: humanizeEnum(row.entry_type) }),
             enableAccountNumbers && /* @__PURE__ */ jsxRuntime.jsx(TableCell, {}),
             /* @__PURE__ */ jsxRuntime.jsxs(TableCell, { children: [
@@ -33216,7 +33254,7 @@ function TasksMonthSelector() {
       };
       const total = (_b = (_a = taskData.tasks) == null ? void 0 : _a.length) != null ? _b : 0;
       return __spreadValues({
-        monthStr: dateFns.format(date22, "MMM"),
+        monthStr: dateFns.format(date22, MONTH_FORMAT_SHORT),
         date: date22,
         completed: getCompletedTasks(taskData.tasks).length,
         total
@@ -33421,7 +33459,7 @@ const TasksPending = () => {
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__tasks-pending", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__tasks-pending-header", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Heading, { size: HeadingSize.secondary, children: dateFns.format(date2, "MMMM yyyy") }),
+      /* @__PURE__ */ jsxRuntime.jsx(Heading, { size: HeadingSize.secondary, children: dateFns.format(date2, MONTH_YEAR_FORMAT) }),
       (activePeriod == null ? void 0 : activePeriod.tasks) && activePeriod.tasks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__tasks-pending-bar", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: TextSize.sm, children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: taskStatusClassName, children: completedTaskCount }),
@@ -40129,6 +40167,7 @@ const AccountingOverview = ({
 }) => {
   var _a, _b, _c, _d, _e;
   const [pnlToggle, setPnlToggle] = react.useState("expenses");
+  const { value: sizeClass } = useSizeClass();
   const profitAndLossSummariesVariants = (_b = (_a = slotProps == null ? void 0 : slotProps.profitAndLoss) == null ? void 0 : _a.summaries) == null ? void 0 : _b.variants;
   return /* @__PURE__ */ jsxRuntime.jsx(
     ProfitAndLoss,
@@ -40140,7 +40179,7 @@ const AccountingOverview = ({
         {
           title: (stringOverrides == null ? void 0 : stringOverrides.title) || title,
           showHeader: showTitle,
-          header: /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderRow, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(GlobalMonthPicker, {}) }) }) }),
+          header: /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderRow, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(GlobalMonthPicker, { truncateMonth: sizeClass === "mobile" }) }) }) }),
           children: [
             enableOnboarding && /* @__PURE__ */ jsxRuntime.jsx(
               Onboarding,