@layerfi/components 0.1.116-alpha → 0.1.116

package/dist/esm/index.mjs

@@ -66,7 +66,7 @@ import { useStoreWithEqualityFn } from "zustand/traditional";
 import { useFloating, offset, flip, shift, autoUpdate, useHover, useFocus, useDismiss, useRole, useInteractions, useTransitionStyles, useMergeRefs, FloatingPortal } from "@floating-ui/react";
 import useSWRMutation from "swr/mutation";
 import { Button as Button$2, Header as Header$3, Label as Label$1, Text as Text$1, ModalOverlay as ModalOverlay$1, Modal as Modal$1, Dialog as Dialog$1, Heading as Heading$2, Group, SearchField as SearchField$1, Input as Input$2, Form as Form$1, TextField as TextField$1, FieldError as FieldError$1, Checkbox as Checkbox$1, DateField as DateField$1, DateInput as DateInput$1, DateSegment as DateSegment$1, DatePicker as DatePicker$2, NumberField as NumberField$1, Switch as Switch$1, TextArea as TextArea$1, MenuTrigger, Popover as Popover$1, Menu as Menu$1, MenuItem as MenuItem$2, GridList, GridListItem, DialogTrigger, ToggleButton, SelectionIndicator, ToggleButtonGroup, Table as Table$2, Column as Column$1, Cell as Cell$1, TableHeader as TableHeader$1, TableBody as TableBody$2, Row as Row$1, Calendar as Calendar$1, CalendarGrid as CalendarGrid$1, CalendarGridBody as CalendarGridBody$1, CalendarCell as CalendarCell$1, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell as CalendarHeaderCell$1, Meter as Meter$1, Link as Link$3 } from "react-aria-components";
-import { LoaderCircle, X as X$1, UploadCloud as UploadCloud$1, ChevronDown as ChevronDown$1, Layers2Icon, Search, ChevronLeft as ChevronLeft$1, CopyIcon, FileSpreadsheet, FileDownIcon, Minus, Check as Check$1, RefreshCcw as RefreshCcw$1, MenuIcon, ChevronRight as ChevronRight$1, PencilRuler, SearchX, Trash2, CheckIcon, AlertCircle as AlertCircle$1, TriangleAlert, List, AlertTriangle, Save as Save$1, Plus as Plus$1, HandCoins, Menu as Menu$2, Trash as Trash$1, Send, Calendar as Calendar$2, Download, Users, Milestone, Video, Clock as Clock$1, Link as Link$4, Car, Edit, RotateCcw, Archive } from "lucide-react";
+import { LoaderCircle, X as X$1, UploadCloud as UploadCloud$1, ChevronDown as ChevronDown$1, Layers2Icon, Search, ChevronLeft as ChevronLeft$1, CopyIcon, FileSpreadsheet, FileDownIcon, Minus, Check as Check$1, RefreshCcw as RefreshCcw$1, MenuIcon, ChevronRight as ChevronRight$1, PencilRuler, SearchX, Trash2, CheckIcon, AlertCircle as AlertCircle$1, TriangleAlert, Hourglass, List, AlertTriangle, Save as Save$1, Plus as Plus$1, HandCoins, Menu as Menu$2, Trash as Trash$1, Send, Calendar as Calendar$2, Download, Users, Milestone, Video, Clock as Clock$1, Link as Link$4, Car, Edit, RotateCcw, Archive } from "lucide-react";
 import pluralize from "pluralize";
 import { mergeRefs } from "react-merge-refs";
 import useResizeObserver from "@react-hook/resize-observer";
@@ -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";
 const pkg = {
   version
 };
@@ -4484,7 +4484,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";
@@ -5118,6 +5127,37 @@ function useDebounce(fn) {
   }, []);
   return debouncedCallback;
 }
+const useWindowSize = () => {
+  const [size, setSize] = useState([0, 0]);
+  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 = 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__ */ jsx(LoaderCircle, { className: CLASS_NAME$b, size });
@@ -6679,7 +6719,7 @@ const DateTime = ({
   if (format$1) {
     return /* @__PURE__ */ jsx(Text, { className: "Layer__datetime", children: format(dateValue, format$1) });
   }
-  const date = format(dateValue, dateFormat != null ? dateFormat : DATE_FORMAT$1);
+  const date = format(dateValue, dateFormat != null ? dateFormat : DATE_FORMAT);
   const time = format(dateValue, timeFormat != null ? timeFormat : TIME_FORMAT);
   return /* @__PURE__ */ jsxs(Text, { className: "Layer__datetime", children: [
     !onlyTime && /* @__PURE__ */ jsx(Span, __spreadProps(__spreadValues({}, slotProps.Date), { children: date })),
@@ -7703,7 +7743,7 @@ const convertCentsToCurrency = (amount) => {
     return void 0;
   }
 };
-const formatDate = (date, dateFormat = DATE_FORMAT$1) => {
+const formatDate = (date, dateFormat = DATE_FORMAT) => {
   try {
     if (!date) {
       return "";
@@ -9925,37 +9965,6 @@ const Header$1 = forwardRef(
   }
 );
 Header$1.displayName = "Header";
-const useWindowSize = () => {
-  const [size, setSize] = useState([0, 0]);
-  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 = 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",
@@ -10126,23 +10135,33 @@ const MonthPicker = ({
   date,
   onChange,
   minDate = null,
-  maxDate = null
+  maxDate = null,
+  truncateMonth = false
 }) => {
   const triggerRef = useRef(null);
   const [isPopoverOpen, setPopoverOpen] = useState(false);
-  const { value } = useSizeClass();
+  const { value, isMobile } = useSizeClass();
   const onChangeMonth = useCallback((val) => {
     onChange(val);
     setPopoverOpen(false);
   }, [onChange]);
-  const inputValue = format(date.toDate(), "MMMM yyyy");
+  const inputValue = format(date.toDate(), truncateMonth ? MONTH_YEAR_FORMAT_SHORT : MONTH_YEAR_FORMAT);
   const additionalAriaProps = !showLabel && { "aria-label": label };
   return /* @__PURE__ */ jsxs(DialogTrigger, { isOpen: isPopoverOpen, onOpenChange: setPopoverOpen, children: [
     showLabel && /* @__PURE__ */ jsx(Label, { children: label }),
-    /* @__PURE__ */ jsxs(InputGroup$1, { ref: triggerRef, slot: "input", className: "Layer__MonthPicker__InputGroup", onClick: () => setPopoverOpen(true), children: [
-      /* @__PURE__ */ jsx(Input$1, __spreadProps(__spreadValues({ inset: true }, additionalAriaProps), { value: inputValue, readOnly: true })),
-      /* @__PURE__ */ jsx(HStack, { gap: "3xs", align: "center", children: /* @__PURE__ */ jsx(Button, { icon: true, inset: true, variant: "ghost", children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) }) })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      InputGroup$1,
+      {
+        ref: triggerRef,
+        slot: "input",
+        className: classNames("Layer__MonthPicker__InputGroup", { "Layer__MonthPicker__InputGroup--mobile": isMobile }),
+        onClick: () => setPopoverOpen(true),
+        children: [
+          /* @__PURE__ */ jsx(Input$1, __spreadProps(__spreadValues({ inset: true }, additionalAriaProps), { value: inputValue, readOnly: true })),
+          /* @__PURE__ */ jsx(HStack, { gap: "3xs", align: "center", children: /* @__PURE__ */ jsx(Button, { icon: true, inset: true, variant: "ghost", children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(ResponsivePopover, { triggerRef, children: /* @__PURE__ */ jsx(Dialog$1, { children: /* @__PURE__ */ jsx(
       MonthCalendar,
       {
@@ -10363,6 +10382,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 = useCallback((newMonth) => {
@@ -10403,7 +10423,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"
       }
     )
   ] }), [
@@ -10414,7 +10435,8 @@ const BankTransactionsHeader = ({
     monthPickerDate,
     setDateRange,
     stringOverrides == null ? void 0 : stringOverrides.header,
-    withDatePicker
+    withDatePicker,
+    sizeClass
   ]);
   const onCategorizationDisplayChange = (value) => {
     setFilters({
@@ -14019,7 +14041,7 @@ const Trash = (_Lb) => {
 };
 const readDate = (date) => {
   if (!date) return void 0;
-  return date && format(parseISO(date), DATE_FORMAT$1);
+  return date && format(parseISO(date), DATE_FORMAT);
 };
 const RECEIPT_ALLOWED_UPLOAD_FILE_TYPES = [
   "image/jpeg",
@@ -14102,7 +14124,7 @@ const useReceipts = ({
           url: void 0,
           status: "failed",
           name: file.name,
-          date: format(parseISO((/* @__PURE__ */ new Date()).toISOString()), DATE_FORMAT$1),
+          date: format(parseISO((/* @__PURE__ */ new Date()).toISOString()), DATE_FORMAT),
           error: "Invalid file type. Please upload an image or PDF."
         }
       ]);
@@ -14122,7 +14144,7 @@ const useReceipts = ({
       url: void 0,
       status: "pending",
       name: renamedFile.name,
-      date: format(parseISO((/* @__PURE__ */ new Date()).toISOString()), DATE_FORMAT$1)
+      date: format(parseISO((/* @__PURE__ */ new Date()).toISOString()), DATE_FORMAT)
     };
     try {
       setReceiptUrls((prev) => [...prev, newReceipt]);
@@ -14636,7 +14658,7 @@ const MatchForm = ({
             setSelectedMatch(suggestedMatch);
           },
           children: [
-            /* @__PURE__ */ jsx("div", { className: `Layer__nowrap ${classNamePrefix}__match-table__date`, children: /* @__PURE__ */ jsx("span", { children: format(parseISO(suggestedMatch.details.date), DATE_FORMAT$1) }) }),
+            /* @__PURE__ */ jsx("div", { className: `Layer__nowrap ${classNamePrefix}__match-table__date`, children: /* @__PURE__ */ jsx("span", { children: format(parseISO(suggestedMatch.details.date), DATE_FORMAT) }) }),
             /* @__PURE__ */ jsx("div", { className: `${classNamePrefix}__match-table__desc`, children: /* @__PURE__ */ jsx(
               Text,
               {
@@ -14660,7 +14682,7 @@ const MatchForm = ({
                   {
                     classNamePrefix,
                     bankTransaction,
-                    dateFormat: DATE_FORMAT$1,
+                    dateFormat: DATE_FORMAT,
                     text: isTransferMatch(bankTransaction) ? "Transfer" : "Matched"
                   }
                 )
@@ -17008,7 +17030,7 @@ const BankTransactionsList = ({
         BankTransactionsListItem,
         {
           index,
-          dateFormat: DATE_FORMAT$1,
+          dateFormat: DATE_FORMAT,
           bankTransaction,
           editable,
           removeTransaction,
@@ -17082,7 +17104,6 @@ const BankTransactionsMobileBulkActionsHeader = ({
     }
   );
 };
-const DATE_FORMAT = "LLL d";
 const BankTransactionsAmountDate = ({ amount, date, slotProps }) => {
   return /* @__PURE__ */ jsxs(
     VStack,
@@ -17101,7 +17122,7 @@ const BankTransactionsAmountDate = ({ amount, date, slotProps }) => {
           DateTime,
           {
             value: date,
-            dateFormat: DATE_FORMAT,
+            dateFormat: MONTH_DAY_FORMAT,
             onlyDate: true,
             slotProps: {
               Date: __spreadValues({
@@ -18392,7 +18413,7 @@ const BankTransactionsTable = ({
               {
                 index,
                 editable,
-                dateFormat: DATE_FORMAT$1,
+                dateFormat: DATE_FORMAT,
                 bankTransaction,
                 removeTransaction,
                 showDescriptions,
@@ -19526,7 +19547,7 @@ const getQuickbooksConnectionSyncUiState = (quickbooksConnectionStatus) => {
 const formatLastSyncedAt = (datetime) => {
   const parsed = new Date(datetime);
   if (!isValid(parsed)) return "";
-  return `${format(parsed, "MMMM d, yyyy")} at ${format(parsed, "h:mm a")}`;
+  return `${format(parsed, `${MONTH_FORMAT} d, yyyy`)} at ${format(parsed, "h:mm a")}`;
 };
 const getFooterConfig = (quickbooksUiState, lastSyncedAt) => {
   switch (quickbooksUiState) {
@@ -22233,7 +22254,7 @@ const ProfitAndLossChart = ({
   }, [hasLoadedData]);
   const getMonthName = useCallback((pnl) => pnl ? format(
     new Date(pnl.year, pnl.month - 1, 1),
-    compactView ? "LLLLL" : "LLL"
+    compactView ? MONTH_FORMAT_NARROW : MONTH_FORMAT_ABBREVIATED
   ) : "", [compactView]);
   const summarizePnL = useCallback((pnl) => ({
     name: getMonthName(pnl),
@@ -22257,7 +22278,7 @@ const ProfitAndLossChart = ({
       for (let i = 11; i >= 0; i--) {
         const currentDate = sub(today2, { months: i });
         loadingData.push({
-          name: format(currentDate, compactView ? "LLLLL" : "LLL"),
+          name: format(currentDate, compactView ? MONTH_FORMAT_NARROW : MONTH_FORMAT_ABBREVIATED),
           revenue: 0,
           revenueUncategorized: 0,
           totalExpensesInverse: 0,
@@ -22789,7 +22810,7 @@ const BackButton = (_Ec) => {
   const baseClassName2 = classNames("Layer__btn", "Layer__back-btn", className);
   return /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues({}, props), { className: baseClassName2, children: textOnly ? "Back" : /* @__PURE__ */ jsx(BackArrow, { size: 16 }) }));
 };
-const GlobalMonthPicker = () => {
+const GlobalMonthPicker = ({ truncateMonth }) => {
   const rawActivationDate = useBusinessActivationDate();
   const activationDate = useMemo(() => rawActivationDate ? startOfDay(rawActivationDate) : null, [rawActivationDate]);
   const { setMonth } = useGlobalDateRangeActions();
@@ -22808,7 +22829,8 @@ const GlobalMonthPicker = () => {
       date: dateZdt,
       onChange,
       minDate: minDateZdt,
-      maxDate: maxDateZdt
+      maxDate: maxDateZdt,
+      truncateMonth
     }
   );
 };
@@ -22922,10 +22944,10 @@ const ValueIcon = ({
               width: "3",
               height: "3",
               patternUnits: "userSpaceOnUse",
-              children: /* @__PURE__ */ jsx("rect", { width: "1", height: "1", opacity: 0.76 })
+              children: /* @__PURE__ */ jsx("rect", { width: "1", height: "1", opacity: 0.76, className: "Layer__charts__dots-pattern-legend__dot" })
             }
           ) }),
-          /* @__PURE__ */ jsx("rect", { width: "12", height: "12", id: "layer-pie-dots-pattern-bg", rx: "2" }),
+          /* @__PURE__ */ jsx("rect", { width: "12", height: "12", id: "layer-pie-dots-pattern-bg", rx: "2", className: "Layer__charts__dots-pattern-legend__bg" }),
           /* @__PURE__ */ jsx(
             "rect",
             {
@@ -22962,21 +22984,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 = 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__ */ jsx("div", { className: "details-container", children: /* @__PURE__ */ jsx("div", { className: "table", children: /* @__PURE__ */ jsxs("table", { children: [
     /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", {}),
       /* @__PURE__ */ 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",
@@ -22985,10 +23012,10 @@ const DetailedTable = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs(
+      !isMobile && /* @__PURE__ */ 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",
@@ -22997,11 +23024,10 @@ const DetailedTable = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx("th", {}),
       /* @__PURE__ */ 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",
@@ -23009,7 +23035,8 @@ const DetailedTable = ({
             /* @__PURE__ */ jsx(SortArrows, { className: "Layer__sort-arrows" })
           ]
         }
-      )
+      ),
+      /* @__PURE__ */ jsx("th", { className: "percent-col" })
     ] }) }),
     /* @__PURE__ */ jsx("tbody", { children: filteredData.map((item, idx) => {
       const share = item.value > 0 ? item.value / positiveTotal : 0;
@@ -23023,8 +23050,16 @@ const DetailedTable = ({
           onMouseEnter: () => setHoveredItem(item),
           onMouseLeave: () => setHoveredItem(void 0),
           children: [
+            /* @__PURE__ */ jsx("td", { className: "color-col", children: /* @__PURE__ */ jsx(
+              ValueIcon,
+              {
+                item,
+                typeColorMapping,
+                idx
+              }
+            ) }),
             /* @__PURE__ */ jsx("td", { className: "category-col", children: item.displayName }),
-            /* @__PURE__ */ jsx("td", { className: "type-col", children: item.type }),
+            !isMobile && /* @__PURE__ */ jsx("td", { className: "type-col", children: item.type }),
             /* @__PURE__ */ jsx("td", { className: "value-col", children: /* @__PURE__ */ jsx(
               Button,
               {
@@ -23034,17 +23069,7 @@ const DetailedTable = ({
                 children: /* @__PURE__ */ jsx(MoneySpan, { size: "sm", amount: item.value })
               }
             ) }),
-            /* @__PURE__ */ jsx("td", { className: "share-col", children: /* @__PURE__ */ jsxs("span", { className: "share-cell-content", children: [
-              item.value < 0 ? "-" : `${formatPercent(share)}%`,
-              /* @__PURE__ */ jsx(
-                ValueIcon,
-                {
-                  item,
-                  typeColorMapping,
-                  idx
-                }
-              )
-            ] }) })
+            /* @__PURE__ */ jsx("td", { className: "percent-col", children: /* @__PURE__ */ jsx("span", { className: "share-text", children: item.value < 0 ? "-" : `${formatPercent(share)}%` }) })
           ]
         },
         `pl-side-table-item-${idx}`
@@ -24067,8 +24092,8 @@ const ProfitAndLossDetailReport = ({
     return breadcrumbPath || [{ name: lineItemName, display_name: lineItemName }];
   }, [breadcrumbPath, lineItemName]);
   const formatDateRange = (startDate, endDate) => {
-    const start = format(startDate, "MMM d");
-    const end = format(endDate, "MMM d");
+    const start = format(startDate, MONTH_DAY_FORMAT_SHORT);
+    const end = format(endDate, MONTH_DAY_FORMAT_SHORT);
     return `${start} - ${end}`;
   };
   const { data, isLoading, isError } = useProfitAndLossDetailLines({
@@ -24290,6 +24315,13 @@ const ProfitAndLossDetailedCharts = ({
   const theScope = scope ? scope : sidebarScope;
   const data = theScope === "revenue" ? filteredDataRevenue : filteredDataExpenses;
   const total = theScope === "revenue" ? filteredTotalRevenue : filteredTotalExpenses;
+  const isEmpty = 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] = useState(void 0);
   const [selectedItem, setSelectedItem] = useState(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -24304,7 +24336,7 @@ const ProfitAndLossDetailedCharts = ({
     /* @__PURE__ */ jsxs("header", { className: "Layer__profit-and-loss-detailed-charts__header", children: [
       /* @__PURE__ */ jsxs("div", { className: "Layer__profit-and-loss-detailed-charts__head", children: [
         /* @__PURE__ */ jsx(Text, { size: TextSize.lg, weight: TextWeight.bold, className: "title", children: humanizeTitle(theScope, stringOverrides == null ? void 0 : stringOverrides.detailedChartStringOverrides) }),
-        /* @__PURE__ */ jsx(Text, { size: TextSize.sm, className: "date", children: format(dateRange.startDate, "LLLL, y") }),
+        /* @__PURE__ */ jsx(Text, { size: TextSize.sm, className: "date", children: format(dateRange.startDate, MONTH_YEAR_FORMAT_FULL) }),
         showDatePicker && /* @__PURE__ */ jsx(GlobalMonthPicker, {})
       ] }),
       !hideClose && /* @__PURE__ */ jsx(
@@ -24321,10 +24353,16 @@ const ProfitAndLossDetailedCharts = ({
       !hideClose && /* @__PURE__ */ jsx(BackButton, { onClick: () => setSidebarScope(void 0) }),
       /* @__PURE__ */ jsxs("div", { className: "Layer__profit-and-loss-detailed-charts__head", children: [
         /* @__PURE__ */ jsx(Text, { size: TextSize.lg, weight: TextWeight.bold, className: "title", children: humanizeTitle(theScope, stringOverrides == null ? void 0 : stringOverrides.detailedChartStringOverrides) }),
-        /* @__PURE__ */ jsx(Text, { size: TextSize.sm, className: "date", children: format(dateRange.startDate, "LLLL, y") })
+        /* @__PURE__ */ jsx(Text, { size: TextSize.sm, className: "date", children: format(dateRange.startDate, MONTH_YEAR_FORMAT_FULL) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "Layer__profit-and-loss-detailed-charts__content", children: [
+    /* @__PURE__ */ jsx("div", { className: "Layer__profit-and-loss-detailed-charts__content", children: isEmpty ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "Layer__profit-and-loss-detailed-charts__empty-chart", children: /* @__PURE__ */ jsxs(VStack, { align: "center", justify: "center", gap: "md", className: "Layer__profit-and-loss-detailed-charts__empty-chart-content", children: [
+        /* @__PURE__ */ jsx(Hourglass, { size: 36, className: "Layer__profit-and-loss-detailed-charts__empty-chart-icon" }),
+        /* @__PURE__ */ jsx(Span, { size: TextSize.md, weight: TextWeight.bold, variant: "subtle", children: "No transactions found" })
+      ] }) }),
+      /* @__PURE__ */ jsx(HStack, { align: "center", justify: "center", gap: "md", pb: "md", className: "Layer__profit-and-loss-detailed-charts__table-wrapper", children: /* @__PURE__ */ jsx(Span, { size: TextSize.md, variant: "subtle", children: "Upload your transactions or wait for transactions to be synced from your bank." }) })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         DetailedChart,
         {
@@ -24353,7 +24391,7 @@ const ProfitAndLossDetailedCharts = ({
           onValueClick: handleValueClick
         }
       ) })
-    ] }),
+    ] }) }),
     /* @__PURE__ */ jsx(
       DetailReportModal,
       {
@@ -25000,7 +25038,7 @@ const generateComparisonPeriods = (params) => {
 const generateComparisonMonths = (endDate, numberOfMonths) => {
   return Array.from({ length: numberOfMonths }, (_, index) => {
     const currentMonth = subMonths(endDate, numberOfMonths - index - 1);
-    return { date: currentMonth, label: format(currentMonth, "MMM yyyy") };
+    return { date: currentMonth, label: format(currentMonth, MONTH_YEAR_FORMAT_SHORT) };
   });
 };
 const generateComparisonYears = (endDate, numberOfYears) => {
@@ -25010,7 +25048,7 @@ const generateComparisonYears = (endDate, numberOfYears) => {
   });
 };
 const generateComparisonDateRange = (startDate, endDate) => {
-  const label = `${format(startDate, DATE_FORMAT$1)} - ${format(endDate, DATE_FORMAT$1)}`;
+  const label = `${format(startDate, DATE_FORMAT)} - ${format(endDate, DATE_FORMAT)}`;
   return [{ date: startDate, endDate, label }];
 };
 const getComparisonValue = (name, depth, cellData) => {
@@ -25934,7 +25972,7 @@ function Internal_ProfitAndLossSummaries({
       revenuePercentChange: calculatePercentageChange(currentRevenue, previousRevenue),
       expensesPercentChange: calculatePercentageChange(currentExpenses, previousExpenses),
       netProfitPercentChange: calculatePercentageChange(currentNetProfit, previousNetProfit),
-      comparisonMonth: format(previousMonthStart, "MMM")
+      comparisonMonth: format(previousMonthStart, MONTH_FORMAT_SHORT)
     };
   }, [previousData, effectiveData, previousMonthStart]);
   const {
@@ -28756,7 +28794,7 @@ const LedgerAccountRow = ({
         children: [
           /* @__PURE__ */ jsx("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col", children: /* @__PURE__ */ jsxs("span", { className: "Layer__table-cell-content", children: [
             /* @__PURE__ */ jsxs("div", { className: "Layer__ledger-account-table__tablet-main-col__date", children: [
-              /* @__PURE__ */ jsx(Text, { children: row.date && format(parseISO(row.date), DATE_FORMAT$1) }),
+              /* @__PURE__ */ jsx(Text, { children: row.date && format(parseISO(row.date), DATE_FORMAT) }),
               /* @__PURE__ */ jsx(
                 Text,
                 {
@@ -28794,7 +28832,7 @@ const LedgerAccountRow = ({
         },
         children: /* @__PURE__ */ jsx("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col", children: /* @__PURE__ */ jsxs("span", { className: "Layer__table-cell-content", children: [
           /* @__PURE__ */ jsxs("div", { className: "Layer__ledger-account-table__tablet-main-col__date", children: [
-            /* @__PURE__ */ jsx(Text, { children: row.date && format(parseISO(row.date), DATE_FORMAT$1) }),
+            /* @__PURE__ */ jsx(Text, { children: row.date && format(parseISO(row.date), DATE_FORMAT) }),
             /* @__PURE__ */ jsx(
               Text,
               {
@@ -28843,7 +28881,7 @@ const LedgerAccountRow = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx("td", { className: "Layer__table-cell", children: /* @__PURE__ */ jsx("span", { className: "Layer__table-cell-content", children: row.date && format(parseISO(row.date), DATE_FORMAT$1) }) }),
+        /* @__PURE__ */ jsx("td", { className: "Layer__table-cell", children: /* @__PURE__ */ jsx("span", { className: "Layer__table-cell-content", children: row.date && format(parseISO(row.date), DATE_FORMAT) }) }),
         /* @__PURE__ */ jsx("td", { className: "Layer__table-cell", children: /* @__PURE__ */ jsx("span", { className: "Layer__table-cell-content", children: lineEntryNumber(row) }) }),
         /* @__PURE__ */ jsx("td", { className: "Layer__table-cell", children: /* @__PURE__ */ jsx("span", { className: "Layer__table-cell-content", children: (_g = ledgerEntrySource == null ? void 0 : ledgerEntrySource.displayDescription) != null ? _g : "" }) }),
         nodeType !== LedgerAccountNodeType.Leaf && /* @__PURE__ */ jsx("td", { className: "Layer__table-cell", children: /* @__PURE__ */ jsx("span", { className: "Layer__table-cell-content", children: (_i = (_h = row.account) == null ? void 0 : _h.name) != null ? _i : "" }) }),
@@ -30704,7 +30742,7 @@ const JournalTableContent = ({
                 children: entryNumber(row)
               }
             ),
-            /* @__PURE__ */ jsx(TableCell, { children: row.entry_at && format(parseISO(row.entry_at), DATE_FORMAT$1) }),
+            /* @__PURE__ */ jsx(TableCell, { children: row.entry_at && format(parseISO(row.entry_at), DATE_FORMAT) }),
             /* @__PURE__ */ jsx(TableCell, { children: humanizeEnum(row.entry_type) }),
             enableAccountNumbers && /* @__PURE__ */ jsx(TableCell, {}),
             /* @__PURE__ */ jsxs(TableCell, { children: [
@@ -31740,7 +31778,7 @@ function TasksMonthSelector() {
       };
       const total = (_b = (_a = taskData.tasks) == null ? void 0 : _a.length) != null ? _b : 0;
       return __spreadValues({
-        monthStr: format(date2, "MMM"),
+        monthStr: format(date2, MONTH_FORMAT_SHORT),
         date: date2,
         completed: getCompletedTasks(taskData.tasks).length,
         total
@@ -31945,7 +31983,7 @@ const TasksPending = () => {
   );
   return /* @__PURE__ */ jsxs("div", { className: "Layer__tasks-pending", children: [
     /* @__PURE__ */ jsxs("div", { className: "Layer__tasks-pending-header", children: [
-      /* @__PURE__ */ jsx(Heading, { size: HeadingSize.secondary, children: format(date, "MMMM yyyy") }),
+      /* @__PURE__ */ jsx(Heading, { size: HeadingSize.secondary, children: format(date, MONTH_YEAR_FORMAT) }),
       (activePeriod == null ? void 0 : activePeriod.tasks) && activePeriod.tasks.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "Layer__tasks-pending-bar", children: [
         /* @__PURE__ */ jsxs(Text, { size: TextSize.sm, children: [
           /* @__PURE__ */ jsx("span", { className: taskStatusClassName, children: completedTaskCount }),
@@ -38653,6 +38691,7 @@ const AccountingOverview = ({
 }) => {
   var _a, _b, _c, _d, _e;
   const [pnlToggle, setPnlToggle] = 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__ */ jsx(
     ProfitAndLoss,
@@ -38664,7 +38703,7 @@ const AccountingOverview = ({
         {
           title: (stringOverrides == null ? void 0 : stringOverrides.title) || title,
           showHeader: showTitle,
-          header: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(HeaderRow, { children: /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(GlobalMonthPicker, {}) }) }) }),
+          header: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(HeaderRow, { children: /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(GlobalMonthPicker, { truncateMonth: sizeClass === "mobile" }) }) }) }),
           children: [
             enableOnboarding && /* @__PURE__ */ jsx(
               Onboarding,