@layerfi/components 0.1.117 → 0.1.118

package/dist/cjs/index.cjs

@@ -57,11 +57,11 @@ const react = require("react");
 const zustand = require("zustand");
 const reactPlaidLink = require("react-plaid-link");
 const dateFns = require("date-fns");
+const effect = require("effect");
 const date = require("@internationalized/date");
 const useSWR = require("swr");
 const classNames = require("classnames");
 const index = require("effect/index");
-const effect = require("effect");
 const useSWRInfinite = require("swr/infinite");
 const traditional = require("zustand/traditional");
 const react$1 = require("@floating-ui/react");
@@ -149,6 +149,13 @@ function toSnakeCase(input) {
   const segments = (_a = input.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)) != null ? _a : [];
   return segments.map((segment) => segment.toLowerCase()).join("_");
 }
+effect.Schema.Union(
+  effect.Schema.Date,
+  effect.Schema.String,
+  effect.Schema.Array(effect.Schema.String),
+  effect.Schema.Number,
+  effect.Schema.Boolean
+);
 function toDefinedSearchParameters(input) {
   const definedParameterPairs = Object.entries(input).flatMap(([key, value]) => {
     if (value === null || value === void 0) {
@@ -202,7 +209,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.117";
+const version = "0.1.118";
 const pkg = {
   version
 };
@@ -4632,10 +4639,6 @@ function clampToPresentOrPast(date2, cutoff = dateFns.endOfDay(/* @__PURE__ */ n
   return dateFns.min([date2, cutoff]);
 }
 const RANGE_MODE_LOOKUP = {
-  date: {
-    getStartDate: ({ startDate }) => dateFns.startOfMonth(startDate),
-    getEndDate: ({ endDate }) => clampToPresentOrPast(dateFns.endOfDay(endDate))
-  },
   full: {
     getStartDate: ({ startDate }) => startDate,
     getEndDate: ({ endDate }) => clampToPresentOrPast(dateFns.endOfDay(endDate))
@@ -4662,8 +4665,8 @@ function buildStore$2() {
       return next;
     };
     const setDate = ({ date: date2 }) => {
-      const s = RANGE_MODE_LOOKUP.date.getStartDate({ startDate: date2 });
-      const e = RANGE_MODE_LOOKUP.date.getEndDate({ endDate: date2 });
+      const s = RANGE_MODE_LOOKUP.month.getStartDate({ startDate: date2 });
+      const e = RANGE_MODE_LOOKUP.full.getEndDate({ endDate: date2 });
       return apply2({ startDate: s, endDate: e });
     };
     const setDateRange = withCorrectedRange(({ startDate, endDate }) => {
@@ -4676,30 +4679,11 @@ function buildStore$2() {
       const e = RANGE_MODE_LOOKUP.month.getEndDate({ endDate: startDate });
       return apply2({ startDate: s, endDate: e });
     };
-    const setRangeWithExplicitDisplayMode = ({
-      startDate,
-      endDate,
-      displayMode
-    }) => {
-      switch (displayMode) {
-        case "date":
-          return setDate({ date: endDate });
-        case "full":
-          return setDateRange({ startDate, endDate });
-        case "month":
-          return setMonth({ startDate });
-        default:
-          unsafeAssertUnreachable({
-            message: "Invalid `displayMode`"
-          });
-      }
-    };
     return {
       startDate: dateFns.startOfMonth(now2),
       endDate: clampToPresentOrPast(dateFns.endOfMonth(now2)),
       actions: {
         setDate,
-        setRangeWithExplicitDisplayMode,
         setDateRange,
         setMonth,
         setMonthByPeriod: ({ monthNumber, yearNumber }) => {
@@ -4711,10 +4695,17 @@ function buildStore$2() {
   });
 }
 const GlobalDateStoreContext = react.createContext(buildStore$2());
-function useGlobalDate() {
+const getEffectiveDateForMode = (mode, { date: date2 }) => {
+  const rangeModifierForMode = RANGE_MODE_LOOKUP[mode];
+  return { date: rangeModifierForMode.getEndDate({ endDate: date2 }) };
+};
+function useGlobalDate({ dateSelectionMode = "full" } = {}) {
   const store = react.useContext(GlobalDateStoreContext);
-  const date2 = useStoreWithDateSelected(store, ({ endDate }) => endDate);
-  return { date: date2 };
+  const rawDate = useStoreWithDateSelected(store, ({ endDate }) => endDate);
+  return react.useMemo(
+    () => getEffectiveDateForMode(dateSelectionMode, { date: rawDate }),
+    [dateSelectionMode, rawDate]
+  );
 }
 function useGlobalDateActions() {
   const store = react.useContext(GlobalDateStoreContext);
@@ -4728,28 +4719,23 @@ const getEffectiveDateRangeForMode = (mode, { startDate, endDate }) => {
     endDate: rangeModifierForMode.getEndDate({ endDate })
   };
 };
-function useGlobalDateRange({ displayMode }) {
+function useGlobalDateRange({ dateSelectionMode }) {
   const store = react.useContext(GlobalDateStoreContext);
   const rawStartDate = useStoreWithDateSelected(store, ({ startDate }) => startDate);
   const rawEndDate = useStoreWithDateSelected(store, ({ endDate }) => endDate);
   return react.useMemo(
     () => getEffectiveDateRangeForMode(
-      displayMode,
+      dateSelectionMode,
       { startDate: rawStartDate, endDate: rawEndDate }
     ),
-    [displayMode, rawEndDate, rawStartDate]
+    [dateSelectionMode, rawEndDate, rawStartDate]
   );
 }
 function useGlobalDateRangeActions() {
   const store = react.useContext(GlobalDateStoreContext);
-  const setRangeWithExplicitDisplayMode = zustand.useStore(
-    store,
-    ({ actions: { setRangeWithExplicitDisplayMode: setRangeWithExplicitDisplayMode2 } }) => setRangeWithExplicitDisplayMode2
-  );
   const setDateRange = zustand.useStore(store, ({ actions: { setDateRange: setDateRange2 } }) => setDateRange2);
   const setMonth = zustand.useStore(store, ({ actions: { setMonth: setMonth2 } }) => setMonth2);
   return {
-    setRangeWithExplicitDisplayMode,
     setDateRange,
     setMonth
   };
@@ -4767,7 +4753,7 @@ function GlobalDateStoreProvider({
 }
 const useBankTransactionsFilters = (params) => {
   const dateFilterMode = (params == null ? void 0 : params.applyGlobalDateRange) ? BankTransactionsDateFilterMode.GlobalDateRange : (params == null ? void 0 : params.monthlyView) ? BankTransactionsDateFilterMode.MonthlyView : void 0;
-  const globalDateRange = useGlobalDateRange({ displayMode: "full" });
+  const globalDateRange = useGlobalDateRange({ dateSelectionMode: "full" });
   const defaultDateRange = {
     startDate: dateFns.startOfMonth(/* @__PURE__ */ new Date()),
     endDate: dateFns.endOfMonth(/* @__PURE__ */ new Date())
@@ -12754,6 +12740,10 @@ const InvoicePaymentLedgerEntrySourceSchema = effect.Schema.Struct({
     effect.Schema.propertySignature(effect.Schema.String),
     effect.Schema.fromKey("invoice_id")
   ),
+  invoicePaymentId: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.String),
+    effect.Schema.fromKey("invoice_payment_id")
+  ),
   invoiceNumber: effect.pipe(
     effect.Schema.propertySignature(effect.Schema.NullOr(effect.Schema.String)),
     effect.Schema.fromKey("invoice_number")
@@ -13216,6 +13206,10 @@ const BillPaymentLedgerEntrySourceSchema = effect.Schema.Struct({
     effect.Schema.optional(effect.Schema.NullOr(effect.Schema.String)),
     effect.Schema.fromKey("external_id")
   ),
+  billPaymentId: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.String),
+    effect.Schema.fromKey("bill_payment_id")
+  ),
   billId: effect.pipe(
     effect.Schema.propertySignature(effect.Schema.String),
     effect.Schema.fromKey("bill_id")
@@ -13341,7 +13335,7 @@ const convertLedgerEntrySourceToLinkingMetadata = (ledgerEntrySource) => {
       baseMetadata.id = ledgerEntrySource.manualEntryId;
       break;
     case "Invoice_Payment_Ledger_Entry_Source":
-      baseMetadata.id = ledgerEntrySource.invoiceId;
+      baseMetadata.id = ledgerEntrySource.invoicePaymentId;
       baseMetadata.entityName = EntityName.InvoicePayment;
       if (ledgerEntrySource.invoiceIdentifiers) {
         baseMetadata.relatedEntityLinkingMetadata = ledgerEntrySource.invoiceIdentifiers.map((identifier) => ({
@@ -13447,7 +13441,7 @@ const convertLedgerEntrySourceToLinkingMetadata = (ledgerEntrySource) => {
       baseMetadata.entityName = EntityName.Bill;
       break;
     case "Bill_Payment_Ledger_Entry_Source":
-      baseMetadata.id = ledgerEntrySource.billId;
+      baseMetadata.id = ledgerEntrySource.billPaymentId;
       baseMetadata.entityName = EntityName.BillPayment;
       if (ledgerEntrySource.billIdentifiers) {
         baseMetadata.relatedEntityLinkingMetadata = ledgerEntrySource.billIdentifiers.map((identifier) => ({
@@ -14182,11 +14176,13 @@ const CSS_PREFIX$1 = "Layer__UI__Table";
 const getClassName = (component, additionalClassNames, withHidden) => classNames(`${CSS_PREFIX$1}-${component}`, withHidden && `${CSS_PREFIX$1}-${component}--hidden`, additionalClassNames);
 const Table$1 = react.forwardRef(
   (_rb, ref) => {
-    var _sb = _rb, { children, className } = _sb, restProps = __objRest(_sb, ["children", "className"]);
+    var _sb = _rb, { children, className, nonAria, slot } = _sb, restProps = __objRest(_sb, ["children", "className", "nonAria", "slot"]);
+    const TableComponent = nonAria ? "table" : reactAriaComponents.Table;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      reactAriaComponents.Table,
+      TableComponent,
       __spreadProps(__spreadValues({
-        className: getClassName("Table", className)
+        className: getClassName("Table", className),
+        slot: slot != null ? slot : void 0
       }, restProps), {
         ref,
         children
@@ -14196,9 +14192,10 @@ const Table$1 = react.forwardRef(
 );
 Table$1.displayName = "Table";
 const TableHeaderInner = (_tb, ref) => {
-  var _ub = _tb, { children, className, hideHeader } = _ub, restProps = __objRest(_ub, ["children", "className", "hideHeader"]);
+  var _ub = _tb, { children, className, hideHeader, nonAria } = _ub, restProps = __objRest(_ub, ["children", "className", "hideHeader", "nonAria"]);
+  const TableHeaderComponent = nonAria ? "thead" : reactAriaComponents.TableHeader;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.TableHeader,
+    TableHeaderComponent,
     __spreadProps(__spreadValues({
       className: getClassName("TableHeader", className, hideHeader)
     }, restProps), {
@@ -14210,9 +14207,10 @@ const TableHeaderInner = (_tb, ref) => {
 const TableHeader = react.forwardRef(TableHeaderInner);
 TableHeader.displayName = "TableHeader";
 const TableBodyInner = (_vb, ref) => {
-  var _wb = _vb, { children, className } = _wb, restProps = __objRest(_wb, ["children", "className"]);
+  var _wb = _vb, { children, className, nonAria } = _wb, restProps = __objRest(_wb, ["children", "className", "nonAria"]);
+  const TableBodyComponent = nonAria ? "tbody" : reactAriaComponents.TableBody;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.TableBody,
+    TableBodyComponent,
     __spreadProps(__spreadValues({
       className: getClassName("TableBody", className)
     }, restProps), {
@@ -14224,14 +14222,16 @@ const TableBodyInner = (_vb, ref) => {
 const TableBody$1 = react.forwardRef(TableBodyInner);
 TableBody$1.displayName = "TableBody";
 const RowInner = (_xb, ref) => {
-  var _yb = _xb, { children, className, depth = 0 } = _yb, restProps = __objRest(_yb, ["children", "className", "depth"]);
+  var _yb = _xb, { children, className, depth = 0, nonAria, id } = _yb, restProps = __objRest(_yb, ["children", "className", "depth", "nonAria", "id"]);
   const dataProperties = toDataProperties({ depth });
+  const RowComponent = nonAria ? "tr" : reactAriaComponents.Row;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.Row,
+    RowComponent,
     __spreadProps(__spreadValues(__spreadValues({
       className: getClassName("Row", className)
     }, restProps), dataProperties), {
       ref,
+      id: id == null ? void 0 : id.toString(),
       children: withRenderProp(children, (node) => node)
     })
   );
@@ -14240,14 +14240,18 @@ const Row = react.forwardRef(RowInner);
 Row.displayName = "Row";
 const Column = react.forwardRef(
   (_zb, ref) => {
-    var _Ab = _zb, { children, className, textAlign = "left" } = _Ab, restProps = __objRest(_Ab, ["children", "className", "textAlign"]);
+    var _Ab = _zb, { children, className, nonAria, id, textAlign = "left", colSpan = 1 } = _Ab, restProps = __objRest(_Ab, ["children", "className", "nonAria", "id", "textAlign", "colSpan"]);
     const dataProperties = toDataProperties({ "text-align": textAlign });
+    const columnClassName = getClassName("Column", className);
+    const ColumnComponent = nonAria ? "th" : reactAriaComponents.Column;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      reactAriaComponents.Column,
+      ColumnComponent,
       __spreadProps(__spreadValues(__spreadValues({
-        className: getClassName("Column", className)
+        className: columnClassName
       }, restProps), dataProperties), {
         ref,
+        id: id == null ? void 0 : id.toString(),
+        colSpan,
         children: withRenderProp(children, (node) => node)
       })
     );
@@ -14256,19 +14260,44 @@ const Column = react.forwardRef(
 Column.displayName = "Column";
 const Cell = react.forwardRef(
   (_Bb, ref) => {
-    var _Cb = _Bb, { children, className } = _Cb, restProps = __objRest(_Cb, ["children", "className"]);
+    var _Cb = _Bb, { children, className, nonAria, id } = _Cb, restProps = __objRest(_Cb, ["children", "className", "nonAria", "id"]);
+    const CellComponent = nonAria ? "td" : reactAriaComponents.Cell;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      reactAriaComponents.Cell,
+      CellComponent,
       __spreadProps(__spreadValues({
         className: getClassName("Cell", className)
       }, restProps), {
         ref,
+        id: id == null ? void 0 : id.toString(),
         children: withRenderProp(children, (node) => node)
       })
     );
   }
 );
 Cell.displayName = "Cell";
+const isLeafColumn = (col) => {
+  return "cell" in col;
+};
+const getColumnDefs = (columnConfig) => {
+  const columnHelper = reactTable.createColumnHelper();
+  return columnConfig.map((col) => {
+    if (isLeafColumn(col)) {
+      return columnHelper.display({
+        id: col.id,
+        header: () => col.header,
+        cell: ({ row }) => col.cell(row),
+        meta: {
+          isRowHeader: col.isRowHeader || false
+        }
+      });
+    }
+    return columnHelper.group({
+      id: col.id,
+      header: () => col.header,
+      columns: getColumnDefs(col.columns)
+    });
+  });
+};
 const Loader = ({ children, size = 28 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "Layer__loader", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Loader$1, { size, className: "Layer__anim--rotating" }),
@@ -14304,19 +14333,8 @@ const VirtualizedDataTable = ({
     const calculatedHeight = actualRowCount * rowHeight + HEADER_HEIGHT + 1;
     return Math.min(height, calculatedHeight);
   }, [data, height, rowHeight, shrinkHeightToFitRows]);
-  const columnHelper = reactTable.createColumnHelper();
-  const columns = Object.values(columnConfig);
   const tableData = data != null ? data : EMPTY_ARRAY$2;
-  const columnDefs = columns.map((col) => {
-    return columnHelper.display({
-      id: col.id,
-      header: () => col.header,
-      cell: ({ row }) => col.cell(row.original),
-      meta: {
-        isRowHeader: col.isRowHeader || false
-      }
-    });
-  });
+  const columnDefs = getColumnDefs(columnConfig);
   const table2 = reactTable.useReactTable({
     data: tableData,
     columns: columnDefs,
@@ -14414,43 +14432,34 @@ const AffectedTransactionsTable = ({
   isLoading = false,
   isError = false
 }) => {
-  const columnConfig = react.useMemo(() => ({
-    [
-      "Date"
-      /* Date */
-    ]: {
+  const columnConfig = react.useMemo(() => [
+    {
       id: "Date",
       header: "Date",
       cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(
         DateTime,
         {
-          valueAsDate: row.date,
+          valueAsDate: row.original.date,
           onlyDate: true,
           slotProps: { Date: { size: TextSize.md, weight: TextWeight.normal, variant: "subtle" } }
         }
       )
     },
-    [
-      "Description"
-      /* Description */
-    ]: {
+    {
       id: "Description",
       header: "Description",
-      cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { withTooltip: true, children: row.counterpartyName || row.description || "-" }),
+      cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { withTooltip: true, children: row.original.counterpartyName || row.original.description || "-" }),
       isRowHeader: true
     },
-    [
-      "Amount"
-      /* Amount */
-    ]: {
+    {
       id: "Amount",
       header: "Amount",
       cell: (row) => {
-        const amount = row.direction === BankTransactionDirection.Credit ? row.amount : -row.amount;
+        const amount = row.original.direction === BankTransactionDirection.Credit ? row.original.amount : -row.original.amount;
         return /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { amount });
       }
     }
-  }), []);
+  ], []);
   return /* @__PURE__ */ jsxRuntime.jsx(VStack, { className: "Layer__AffectedTransactionsTable", children: /* @__PURE__ */ jsxRuntime.jsx(
     VirtualizedDataTable,
     {
@@ -17826,7 +17835,7 @@ const ExpandedBankTransactionRow = ({
       className: `${className} ${className}--${isOpen ? "expanded" : "collapsed"}`,
       children: isOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${className}__wrapper`, ref: bodyRef, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pis: variant === "row" ? "md" : void 0, pbs: "sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${className}__wrapper`, ref: bodyRef, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pis: variant === "row" ? "md" : void 0, pbs: "sm", pbe: "md", children: [
           categorizationEnabled && /* @__PURE__ */ jsxRuntime.jsx(HStack, { pi: "md", pbe: "md", pbs: "3xs", children: /* @__PURE__ */ jsxRuntime.jsx(
             Toggle,
             {
@@ -18484,7 +18493,7 @@ const BankTransactionsListItem = ({
         onValidityChange: setIsExpandedRowValid
       }
     ) }, `expanded-${bankTransaction.id}`) }),
-    categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", gap: "md", pb: "md", justify: "end", children: [
+    categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", gap: "md", pbe: "md", justify: "end", children: [
       !openExpandedRow && /* @__PURE__ */ jsxRuntime.jsx(
         BankTransactionCategoryComboBox,
         {
@@ -18953,20 +18962,37 @@ const BankTransactionsMobileListBusinessForm = ({
     )
   ] });
 };
-var PersonalCategories = /* @__PURE__ */ ((PersonalCategories2) => {
-  PersonalCategories2["INCOME"] = "PERSONAL_INFLOWS";
-  PersonalCategories2["EXPENSES"] = "PERSONAL_EXPENSES";
-  return PersonalCategories2;
-})(PersonalCategories || {});
+var PersonalStableName = /* @__PURE__ */ ((PersonalStableName2) => {
+  PersonalStableName2["CREDIT"] = "CONTRIBUTIONS";
+  PersonalStableName2["DEBIT"] = "PERSONAL_EXPENSES";
+  return PersonalStableName2;
+})(PersonalStableName || {});
+var LegacyPersonalCategories = /* @__PURE__ */ ((LegacyPersonalCategories2) => {
+  LegacyPersonalCategories2["INCOME"] = "PERSONAL_INFLOWS";
+  LegacyPersonalCategories2["EXPENSES"] = "PERSONAL_EXPENSES";
+  return LegacyPersonalCategories2;
+})(LegacyPersonalCategories || {});
 const isAlreadyAssigned = (bankTransaction) => {
   if (bankTransaction.categorization_status === CategorizationStatus.MATCHED || (bankTransaction == null ? void 0 : bankTransaction.categorization_status) === CategorizationStatus.SPLIT) {
     return false;
   }
-  return Boolean(
-    bankTransaction.category && Object.values(PersonalCategories).includes(
-      bankTransaction.category.display_name
-    )
-  );
+  if (!bankTransaction.category) {
+    return false;
+  }
+  const category = bankTransaction.category;
+  if (category.type === "Account" && "stable_name" in category) {
+    const stableName = category.stable_name;
+    if (stableName === PersonalStableName.CREDIT || stableName === PersonalStableName.DEBIT) {
+      return true;
+    }
+  }
+  if (category.type === "Exclusion") {
+    const displayName = category.display_name;
+    if (Object.values(LegacyPersonalCategories).includes(displayName)) {
+      return true;
+    }
+  }
+  return false;
 };
 const BankTransactionsMobileListPersonalForm = ({
   bankTransaction,
@@ -18995,8 +19021,8 @@ const BankTransactionsMobileListPersonalForm = ({
       {
         type: "Category",
         category: {
-          type: "Exclusion",
-          exclusionType: isCredit(bankTransaction) ? PersonalCategories.INCOME : PersonalCategories.EXPENSES
+          type: "StableName",
+          stableName: isCredit(bankTransaction) ? PersonalStableName.CREDIT : PersonalStableName.DEBIT
         }
       },
       true
@@ -19534,9 +19560,24 @@ const BankTransactionsMobileListItemExpandedRow = ({
     )
   ] });
 };
+const isPersonalCategory = (category) => {
+  if (!category) {
+    return false;
+  }
+  if (category.type === "Account" && "stable_name" in category) {
+    const stableName = category.stable_name;
+    if (stableName === PersonalStableName.CREDIT || stableName === PersonalStableName.DEBIT) {
+      return true;
+    }
+  }
+  if (category.type === "Exclusion") {
+    return true;
+  }
+  return false;
+};
 const getInitialPurpose = (bankTransaction) => {
   if (bankTransaction.category) {
-    if (bankTransaction.category.type === "Exclusion") {
+    if (isPersonalCategory(bankTransaction.category)) {
       return Purpose.personal;
     }
     if (bankTransaction.categorization_status === CategorizationStatus.SPLIT) {
@@ -20069,43 +20110,56 @@ function useArchiveCategorizationRule() {
   });
 }
 const DataTable = ({
-  columnConfig,
-  data,
   isLoading,
   isError,
   componentName,
   ariaLabel,
   slots,
   hideHeader,
-  dependencies
+  dependencies,
+  data,
+  headerGroups,
+  numColumns
 }) => {
-  const columns = Object.values(columnConfig);
+  const nonAria = headerGroups.length > 1;
   const { EmptyState: EmptyState2, ErrorState: ErrorState2 } = slots;
   const isEmptyTable = (data == null ? void 0 : data.length) === 0;
   const renderTableBody = react.useMemo(() => {
     if (isError) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Row, { className: "Layer__DataTable__EmptyState__Row", children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: "Layer__DataTable__EmptyState__Cell", colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx(ErrorState2, {}) }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Row, { className: "Layer__DataTable__EmptyState__Row", nonAria, children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: "Layer__DataTable__EmptyState__Cell", colSpan: numColumns, nonAria, children: /* @__PURE__ */ jsxRuntime.jsx(ErrorState2, {}) }) });
     }
     if (isLoading) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Row, { className: "Layer__DataTable__EmptyState__Row", children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: "Layer__DataTable__EmptyState__Cell", colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Row, { className: "Layer__DataTable__EmptyState__Row", nonAria, children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: "Layer__DataTable__EmptyState__Cell", colSpan: numColumns, nonAria, children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) }) });
     }
     if (isEmptyTable) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Row, { className: "Layer__DataTable__EmptyState__Row", children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: "Layer__DataTable__EmptyState__Cell", colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState2, {}) }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Row, { className: "Layer__DataTable__EmptyState__Row", nonAria, children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: "Layer__DataTable__EmptyState__Cell", colSpan: numColumns, nonAria, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState2, {}) }) });
     }
-    const RowRenderer = (row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { depth: row == null ? void 0 : row.depth, children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: data == null ? void 0 : data.map((row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { depth: row.depth, nonAria, children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(
       Cell,
       {
-        className: `Layer__UI__Table-Cell__${componentName}--${col.id}`,
-        children: col.cell(row)
+        className: `Layer__UI__Table-Cell__${componentName}--${cell.column.id}`,
+        nonAria,
+        children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
       },
-      `${row.id}-${col.id}`
-    )) }, row.id);
-    RowRenderer.displayName = "Row";
-    return RowRenderer;
-  }, [isError, isLoading, isEmptyTable, columns, ErrorState2, EmptyState2, componentName]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { "aria-label": ariaLabel, className: `Layer__UI__Table__${componentName}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { columns, hideHeader, children: ({ id, header, isRowHeader }) => /* @__PURE__ */ jsxRuntime.jsx(Column, { isRowHeader, className: `Layer__UI__Table-Column__${componentName}--${id}`, children: header }, id) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TableBody$1, { items: data, dependencies, children: renderTableBody })
+      `${row.id}-${cell.id}`
+    )) }, row.id)) });
+  }, [isError, isLoading, isEmptyTable, data, nonAria, numColumns, ErrorState2, EmptyState2, componentName]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { "aria-label": ariaLabel, className: `Layer__UI__Table__${componentName}`, nonAria, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { hideHeader, nonAria, children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(Row, { nonAria, children: headerGroup.headers.map((header) => {
+      var _a;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Column,
+        {
+          isRowHeader: (_a = header.column.columnDef.meta) == null ? void 0 : _a.isRowHeader,
+          className: `Layer__UI__Table-Column__${componentName}--${header.id}`,
+          nonAria,
+          colSpan: header.colSpan,
+          children: header.isPlaceholder ? null : typeof header.column.columnDef.header === "function" ? header.column.columnDef.header(header.getContext()) : header.column.columnDef.header
+        },
+        header.id
+      );
+    }) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TableBody$1, { dependencies, nonAria, children: renderTableBody })
   ] });
 };
 var Dots = /* @__PURE__ */ ((Dots2) => {
@@ -20259,15 +20313,7 @@ function PaginatedTable({
   var _a;
   const { pageSize = 20, hasMore, fetchMore, initialPage = 0, onSetPage, autoResetPageIndexRef } = paginationProps;
   const [pagination, setPagination] = react.useState({ pageIndex: initialPage, pageSize });
-  const columnHelper = reactTable.createColumnHelper();
-  const columns = Object.values(columnConfig);
-  const columnDefs = columns.map((col) => {
-    return columnHelper.display({
-      id: col.id,
-      header: () => col.header,
-      cell: ({ row }) => col.cell(row.original)
-    });
-  });
+  const columnDefs = getColumnDefs(columnConfig);
   const table2 = reactTable.useReactTable({
     data: data != null ? data : [],
     columns: columnDefs,
@@ -20282,21 +20328,23 @@ function PaginatedTable({
     autoResetPageIndex: (_a = autoResetPageIndexRef == null ? void 0 : autoResetPageIndexRef.current) != null ? _a : false
   });
   const { rows } = table2.getRowModel();
-  const rowData = react.useMemo(() => rows.map((r) => r.original), [rows]);
   const onPageChange = react.useCallback((page) => {
     table2.setPageIndex(page - 1);
   }, [table2]);
+  const headerGroups = table2.getHeaderGroups();
+  const numColumns = table2.getVisibleLeafColumns().length;
   return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       DataTable,
       {
         ariaLabel,
-        columnConfig,
-        data: rowData,
+        numColumns,
+        data: rows,
         isLoading,
         isError,
         componentName,
-        slots
+        slots,
+        headerGroups
       }
     ),
     !isError && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(
@@ -20386,34 +20434,25 @@ const CategorizationRulesTable = () => {
       spacing: true
     }
   ), [refetch]);
-  const columnConfig = react.useMemo(() => ({
-    [
-      "Counterparty"
-      /* Counterparty */
-    ]: {
+  const columnConfig = react.useMemo(() => [
+    {
       id: "Counterparty",
       header: "Counterparty",
       cell: (row) => {
         var _a2;
-        return /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: (_a2 = row.counterpartyFilter) == null ? void 0 : _a2.name });
+        return /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: (_a2 = row.original.counterpartyFilter) == null ? void 0 : _a2.name });
       }
     },
-    [
-      "Category"
-      /* Category */
-    ]: {
+    {
       id: "Category",
       header: "Category",
       cell: (row) => {
-        const accountIdentifier = row.category;
+        const accountIdentifier = row.original.category;
         return accountIdentifier && /* @__PURE__ */ jsxRuntime.jsx(CategoryDisplay, { accountIdentifier, options: options2 });
       },
       isRowHeader: true
     },
-    [
-      "Delete"
-      /* Delete */
-    ]: {
+    {
       id: "Delete",
       cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(
         Button,
@@ -20421,7 +20460,7 @@ const CategorizationRulesTable = () => {
           inset: true,
           icon: true,
           onPress: () => {
-            setSelectedRule(row);
+            setSelectedRule(row.original);
             setShowDeletionConfirmationModal(true);
           },
           "aria-label": "Delete rule",
@@ -20430,7 +20469,7 @@ const CategorizationRulesTable = () => {
         }
       )
     }
-  }), [options2]);
+  ], [options2]);
   return /* @__PURE__ */ jsxRuntime.jsxs(Container, { name: "CategorizationRulesTable", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       PaginatedTable,
@@ -22548,7 +22587,7 @@ const DatePicker = ({
 const getIsDateInvalid = (date2, { minDate, maxDate }) => {
   if (date2 === null) return "Cannot select empty date";
   if (minDate && date2.compare(minDate) < 0) return "Cannot select date before the business activation date";
-  if (maxDate && date2.compare(maxDate) > 0) return "Cannot select date after current date";
+  if (maxDate && date2.compare(maxDate) > 0) return "Cannot select date in the future";
   return null;
 };
 const useDatePickerState = ({ date: date2, setDate, minDate = null, maxDate = null }) => {
@@ -23066,8 +23105,8 @@ const sortPnlLineItemsAndCalculateTotal = (items, filter) => {
 };
 const useProfitAndLoss = ({ tagFilter, reportingBasis }) => {
   var _a;
-  const [displayMode, setDisplayMode] = react.useState("month");
-  const dateRange = useGlobalDateRange({ displayMode });
+  const [dateSelectionMode, setDateSelectionMode] = react.useState("month");
+  const dateRange = useGlobalDateRange({ dateSelectionMode });
   const [filters, setFilters] = react.useState({
     expenses: void 0,
     revenue: void 0
@@ -23126,8 +23165,8 @@ const useProfitAndLoss = ({ tagFilter, reportingBasis }) => {
     dateRange,
     selectedLineItem,
     setSelectedLineItem,
-    setDisplayMode,
-    displayMode
+    setDateSelectionMode,
+    dateSelectionMode
   };
 };
 function isArrayWithAtLeastOne(list) {
@@ -23314,9 +23353,9 @@ const ProfitAndLossContext = react.createContext({
   selectedLineItem: null,
   setSelectedLineItem: () => {
   },
-  setDisplayMode: () => {
+  setDateSelectionMode: () => {
   },
-  displayMode: "month"
+  dateSelectionMode: "month"
 });
 const isNotOnlyNoneTag = (compareOptions) => {
   return Boolean(
@@ -23348,8 +23387,8 @@ function useProfitAndLossComparison({
 }) {
   var _a;
   const [comparisonPeriodMode, setComparisonPeriodMode] = react.useState(DateGroupBy.AllTime);
-  const { displayMode } = react.useContext(ProfitAndLossContext);
-  const { startDate, endDate } = useGlobalDateRange({ displayMode: "month" });
+  const { dateSelectionMode } = react.useContext(ProfitAndLossContext);
+  const { startDate, endDate } = useGlobalDateRange({ dateSelectionMode: "month" });
   const comparePeriods = react.useMemo(() => {
     if (!comparisonPeriodMode || comparisonPeriodMode === DateGroupBy.AllTime) {
       return 1;
@@ -23362,7 +23401,7 @@ function useProfitAndLossComparison({
   const [selectedCompareOptions, setSelectedCompareOptionsState] = react.useState(
     (comparisonConfig == null ? void 0 : comparisonConfig.defaultTagFilter) ? [comparisonConfig == null ? void 0 : comparisonConfig.defaultTagFilter] : []
   );
-  const dateRange = useGlobalDateRange({ displayMode });
+  const dateRange = useGlobalDateRange({ dateSelectionMode });
   const compareModeActive = react.useMemo(() => comparePeriods > 1 || selectedCompareOptions.length > 1 || selectedCompareOptions.length === 1 && isNotOnlyNoneTag(selectedCompareOptions), [comparePeriods, selectedCompareOptions]);
   const setSelectedCompareOptions = (values) => {
     const options2 = values.map(
@@ -23710,7 +23749,7 @@ const ProfitAndLossChart = ({
   const [compactView, setCompactView] = react.useState(false);
   const barSize = compactView ? 10 : 20;
   const { getColor, business } = useLayerContext();
-  const dateRange = useGlobalDateRange({ displayMode: "month" });
+  const dateRange = useGlobalDateRange({ dateSelectionMode: "month" });
   const { setMonth } = useGlobalDateRangeActions();
   const [customCursorSize, setCustomCursorSize] = react.useState({
     width: 0,
@@ -24343,14 +24382,19 @@ 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 = ({ truncateMonth }) => {
+function useGlobalDatePickerBounds() {
   const rawActivationDate = useBusinessActivationDate();
-  const activationDate = react.useMemo(() => rawActivationDate ? dateFns.startOfDay(rawActivationDate) : null, [rawActivationDate]);
+  const minDate = react.useMemo(() => rawActivationDate ? dateFns.startOfDay(rawActivationDate) : null, [rawActivationDate]);
+  const maxDate = react.useMemo(() => dateFns.endOfDay(/* @__PURE__ */ new Date()), []);
+  return react.useMemo(() => ({ minDate, maxDate }), [minDate, maxDate]);
+}
+const GlobalMonthPicker = ({ truncateMonth }) => {
+  const { minDate, maxDate } = useGlobalDatePickerBounds();
   const { setMonth } = useGlobalDateRangeActions();
-  const { date: date2 } = useGlobalDate();
+  const { date: date2 } = useGlobalDate({ dateSelectionMode: "month" });
   const dateZdt = react.useMemo(() => convertDateToZonedDateTime(date2), [date2]);
-  const minDateZdt = react.useMemo(() => activationDate ? convertDateToZonedDateTime(activationDate) : null, [activationDate]);
-  const maxDateZdt = react.useMemo(() => convertDateToZonedDateTime(dateFns.endOfToday()), []);
+  const minDateZdt = react.useMemo(() => minDate ? convertDateToZonedDateTime(minDate) : null, [minDate]);
+  const maxDateZdt = react.useMemo(() => convertDateToZonedDateTime(maxDate), [maxDate]);
   const onChange = react.useCallback((val) => {
     setMonth({ startDate: val.toDate() });
   }, [setMonth]);
@@ -25657,30 +25701,24 @@ const ProfitAndLossDetailReport = ({
       total: runningBalance
     };
   }, [data == null ? void 0 : data.lines]);
-  const columnConfig = react.useMemo(() => ({
-    [
-      "Date"
-      /* Date */
-    ]: {
+  const columnConfig = react.useMemo(() => [
+    {
       id: "Date",
       header: (stringOverrides == null ? void 0 : stringOverrides.dateColumnHeader) || "Date",
       cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(
         DateTime,
         {
-          value: row.date,
+          value: row.original.date,
           onlyDate: true,
           slotProps: { Date: { size: TextSize.md, weight: TextWeight.normal, variant: "subtle" } }
         }
       )
     },
-    [
-      "Type"
-      /* Type */
-    ]: {
+    {
       id: "Type",
       header: (stringOverrides == null ? void 0 : stringOverrides.typeColumnHeader) || "Type",
       cell: (row) => {
-        const { source } = row;
+        const { source } = row.original;
         return source ? /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
@@ -25691,10 +25729,7 @@ const ProfitAndLossDetailReport = ({
         ) : "-";
       }
     },
-    [
-      "Account"
-      /* Account */
-    ]: {
+    {
       id: "Account",
       header: (stringOverrides == null ? void 0 : stringOverrides.accountColumnHeader) || "Account",
       cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -25703,14 +25738,11 @@ const ProfitAndLossDetailReport = ({
           as: "span",
           withDeprecatedTooltip: TextUseTooltip.whenTruncated,
           ellipsis: true,
-          children: row.account.name || "-"
+          children: row.original.account.name || "-"
         }
       )
     },
-    [
-      "Description"
-      /* Description */
-    ]: {
+    {
       id: "Description",
       header: (stringOverrides == null ? void 0 : stringOverrides.descriptionColumnHeader) || "Description",
       cell: (row) => {
@@ -25721,33 +25753,27 @@ const ProfitAndLossDetailReport = ({
             as: "span",
             withDeprecatedTooltip: TextUseTooltip.whenTruncated,
             ellipsis: true,
-            children: ((_a = row.source) == null ? void 0 : _a.displayDescription) || row.account.accountSubtype.displayName || "-"
+            children: ((_a = row.original.source) == null ? void 0 : _a.displayDescription) || row.original.account.accountSubtype.displayName || "-"
           }
         );
       },
       isRowHeader: true
     },
-    [
-      "Amount"
-      /* Amount */
-    ]: {
+    {
       id: "Amount",
       header: (stringOverrides == null ? void 0 : stringOverrides.amountColumnHeader) || "Amount",
       cell: (row) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { amount: row.direction === Direction.CREDIT ? row.amount : -row.amount });
+        return /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { amount: row.original.direction === Direction.CREDIT ? row.original.amount : -row.original.amount });
       }
     },
-    [
-      "Balance"
-      /* Balance */
-    ]: {
+    {
       id: "Balance",
       header: (stringOverrides == null ? void 0 : stringOverrides.balanceColumnHeader) || "Balance",
       cell: (row) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { amount: row.runningBalance });
+        return /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { amount: row.original.runningBalance });
       }
     }
-  }), [stringOverrides, handleSourceClick]);
+  ], [stringOverrides, handleSourceClick]);
   const Header3 = react.useCallback(() => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       DetailReportBreadcrumb,
@@ -26067,7 +26093,7 @@ const options$3 = Object.values(dateSelectionOptionConfig).filter((opt) => opt.v
 const DateSelectionComboBox = () => {
   const [lastPreset, setLastPreset] = react.useState(null);
   const { business } = useLayerContext();
-  const dateRange = useGlobalDateRange({ displayMode: "full" });
+  const dateRange = useGlobalDateRange({ dateSelectionMode: "full" });
   const { setDateRange } = useGlobalDateRangeActions();
   const selectedPreset = presetForDateRange(dateRange, lastPreset, getActivationDate(business));
   const selectedOption = dateSelectionOptionConfig[selectedPreset != null ? selectedPreset : DatePreset.Custom];
@@ -26090,10 +26116,10 @@ const DateSelectionComboBox = () => {
     }
   );
 };
-const DateRangeSelection = ({ minDate, maxDate }) => {
-  const { startDate: globalStartDate, endDate: globalEndDate } = useGlobalDateRange({ displayMode: "full" });
+const GlobalDateRangePicker = () => {
+  const { startDate: globalStartDate, endDate: globalEndDate } = useGlobalDateRange({ dateSelectionMode: "full" });
   const { setDateRange: setGlobalDateRange } = useGlobalDateRangeActions();
-  const { value } = useSizeClass();
+  const { minDate, maxDate } = useGlobalDatePickerBounds();
   const {
     localDate: localStartDate,
     onChange: onChangeStartDate,
@@ -26125,6 +26151,39 @@ const DateRangeSelection = ({ minDate, maxDate }) => {
     const next = { startDate: localStartDate.toDate(), endDate: localEndDate.toDate() };
     setGlobalDateRange(next);
   }, [startDateInvalid, endDateInvalid, localStartDate, localEndDate, setGlobalDateRange]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DatePicker,
+      {
+        label: "Start Date",
+        showLabel: false,
+        date: localStartDate,
+        onChange: onChangeStartDate,
+        minDate: minStartDate,
+        maxDate: maxStartDate,
+        isInvalid: startDateInvalid,
+        errorText: startDateErrorText,
+        onBlur: onBlurStartDate
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DatePicker,
+      {
+        label: "End Date",
+        showLabel: false,
+        date: localEndDate,
+        onChange: onChangeEndDate,
+        minDate: minEndDate,
+        maxDate: maxEndDate,
+        isInvalid: endDateInvalid,
+        errorText: endDateErrorText,
+        onBlur: onBlurEndDate
+      }
+    )
+  ] });
+};
+const DateRangeSelection = () => {
+  const { value } = useSizeClass();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     HStack,
     {
@@ -26133,34 +26192,7 @@ const DateRangeSelection = ({ minDate, maxDate }) => {
       }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(DateSelectionComboBox, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DatePicker,
-          {
-            label: "Start Date",
-            showLabel: false,
-            date: localStartDate,
-            onChange: onChangeStartDate,
-            minDate: minStartDate,
-            maxDate: maxStartDate,
-            isInvalid: startDateInvalid,
-            errorText: startDateErrorText,
-            onBlur: onBlurStartDate
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DatePicker,
-          {
-            label: "End Date",
-            showLabel: false,
-            date: localEndDate,
-            onChange: onChangeEndDate,
-            minDate: minEndDate,
-            maxDate: maxEndDate,
-            isInvalid: endDateInvalid,
-            errorText: endDateErrorText,
-            onBlur: onBlurEndDate
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx(GlobalDateRangePicker, {})
       ]
     }
   );
@@ -26485,7 +26517,7 @@ const ProfitAndLossCompareOptions = () => {
     comparisonPeriodMode,
     setComparisonPeriodMode
   } = react.useContext(ProfitAndLossComparisonContext);
-  const { displayMode } = react.useContext(ProfitAndLossContext);
+  const { dateSelectionMode } = react.useContext(ProfitAndLossContext);
   const tagComparisonSelectOptions = compareOptions.map(
     (tagComparisonOption) => {
       return {
@@ -26498,7 +26530,7 @@ const ProfitAndLossCompareOptions = () => {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "xs", children: [
-    displayMode === "full" && /* @__PURE__ */ jsxRuntime.jsx(DateGroupByComboBox, { value: comparisonPeriodMode, onValueChange: setComparisonPeriodMode }),
+    dateSelectionMode === "full" && /* @__PURE__ */ jsxRuntime.jsx(DateGroupByComboBox, { value: comparisonPeriodMode, onValueChange: setComparisonPeriodMode }),
     /* @__PURE__ */ jsxRuntime.jsx(
       MultiSelect,
       {
@@ -26673,7 +26705,7 @@ const useTableExpandRow = () => {
 const ProfitAndLossCompareTable = ({
   stringOverrides
 }) => {
-  const { dateRange, displayMode } = react.useContext(ProfitAndLossContext);
+  const { dateRange, dateSelectionMode } = react.useContext(ProfitAndLossContext);
   const {
     data: comparisonData,
     isLoading,
@@ -26690,7 +26722,7 @@ const ProfitAndLossCompareTable = ({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__profit-and-loss-table__loader-container", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) });
   }
   const getBookkeepingPeriodStatus = (date2) => {
-    if (!bookkeepingPeriods || displayMode !== "month") {
+    if (!bookkeepingPeriods || dateSelectionMode !== "month") {
       return;
     }
     const currentMonth = date2.getMonth() + 1;
@@ -27119,11 +27151,11 @@ const ProfitAndLossReport = ({
   hideHeader
 }) => {
   var _a;
-  const { selectedLineItem, setSelectedLineItem, setDisplayMode } = react.useContext(ProfitAndLossContext);
+  const { selectedLineItem, setSelectedLineItem, setDateSelectionMode } = react.useContext(ProfitAndLossContext);
   const { comparisonConfig } = react.useContext(ProfitAndLossComparisonContext);
   react.useEffect(() => {
-    setDisplayMode(dateSelectionMode);
-  }, [dateSelectionMode, setDisplayMode]);
+    setDateSelectionMode(dateSelectionMode);
+  }, [dateSelectionMode, setDateSelectionMode]);
   const breadcrumbIndexMap = react.useMemo(() => {
     if (!selectedLineItem) return {};
     return selectedLineItem.breadcrumbPath.reduce((acc, item, index2) => {
@@ -27470,7 +27502,7 @@ function Internal_ProfitAndLossSummaries({
     setSidebarScope,
     sidebarScope
   } = react.useContext(ProfitAndLossContext);
-  const { startDate, endDate: _endDate } = useGlobalDateRange({ displayMode: "month" });
+  const { startDate, endDate: _endDate } = useGlobalDateRange({ dateSelectionMode: "month" });
   const previousMonthStart = dateFns.sub(startDate, { months: 1 });
   const { data: previousData } = useProfitAndLossSummaries({
     startYear: previousMonthStart.getFullYear(),
@@ -27977,18 +28009,16 @@ const BalanceSheetTable = ({
   ] });
 };
 const GlobalDatePicker = () => {
-  const { date: date2 } = useGlobalDate();
+  const { date: date2 } = useGlobalDate({ dateSelectionMode: "full" });
   const { setDate: setGlobalDate } = useGlobalDateActions();
-  const rawActivationDate = useBusinessActivationDate();
-  const activationDate = react.useMemo(() => rawActivationDate ? dateFns.startOfDay(rawActivationDate) : null, [rawActivationDate]);
-  const maxDate = react.useMemo(() => dateFns.endOfDay(/* @__PURE__ */ new Date()), []);
+  const { minDate, maxDate } = useGlobalDatePickerBounds();
   const setDate = react.useCallback((date22) => {
     setGlobalDate({ date: date22 });
   }, [setGlobalDate]);
   const { localDate, onChange, minDateZdt, maxDateZdt, errorText, onBlur, isInvalid } = useDatePickerState({
     date: date2,
     setDate,
-    minDate: activationDate,
+    minDate,
     maxDate
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -28023,7 +28053,7 @@ const DateSelection = () => {
 };
 const CombinedDateSelection = ({ mode }) => {
   if (mode === "month") {
-    return /* @__PURE__ */ jsxRuntime.jsx(GlobalDatePicker, {});
+    return /* @__PURE__ */ jsxRuntime.jsx(GlobalMonthPicker, {});
   }
   return /* @__PURE__ */ jsxRuntime.jsx(DateSelection, {});
 };
@@ -28043,7 +28073,7 @@ const BalanceSheetView = ({
   stringOverrides,
   dateSelectionMode = "full"
 }) => {
-  const { date: effectiveDate } = useGlobalDate();
+  const { date: effectiveDate } = useGlobalDate({ dateSelectionMode });
   const { data, isLoading } = useBalanceSheet({ effectiveDate });
   const { view, containerRef } = useElementViewSize();
   if (asWidget) {
@@ -28358,7 +28388,7 @@ const StatementOfCashFlowView = ({
   stringOverrides,
   dateSelectionMode = "full"
 }) => {
-  const dateRange = useGlobalDateRange({ displayMode: dateSelectionMode });
+  const dateRange = useGlobalDateRange({ dateSelectionMode });
   const { data, isLoading } = useStatementOfCashFlow(dateRange);
   const { view, containerRef } = useElementViewSize();
   return /* @__PURE__ */ jsxRuntime.jsx(TableProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -29024,7 +29054,7 @@ const useChartOfAccounts = ({ withDates = false } = {}) => {
   const { businessId } = useLayerContext();
   const { apiUrl } = useEnvironment();
   const { data: auth } = useAuth();
-  const { startDate, endDate } = useGlobalDateRange({ displayMode: "month" });
+  const { startDate, endDate } = useGlobalDateRange({ dateSelectionMode: "month" });
   const [form, setForm] = react.useState();
   const [sendingForm, setSendingForm] = react.useState(false);
   const [apiError, setApiError] = react.useState(void 0);
@@ -37006,56 +37036,38 @@ const AmountCell = ({ invoice }) => {
     }
   }
 };
-const getColumnConfig$1 = (onSelectInvoice) => ({
-  [
-    "SentAt"
-    /* SentAt */
-  ]: {
+const getColumnConfig$1 = (onSelectInvoice) => [
+  {
     id: "SentAt",
     header: "Sent Date",
-    cell: (row) => row.sentAt ? formatDate(row.sentAt) : null
+    cell: (row) => row.original.sentAt ? formatDate(row.original.sentAt) : null
   },
-  [
-    "InvoiceNo"
-    /* InvoiceNo */
-  ]: {
+  {
     id: "InvoiceNo",
     header: "No.",
-    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: row.invoiceNumber }),
+    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: row.original.invoiceNumber }),
     isRowHeader: true
   },
-  [
-    "Customer"
-    /* Customer */
-  ]: {
+  {
     id: "Customer",
     header: "Customer",
-    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: getCustomerName(row.customer) })
+    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: getCustomerName(row.original.customer) })
   },
-  [
-    "Total"
-    /* Total */
-  ]: {
+  {
     id: "Total",
     header: "Amount",
-    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(AmountCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(AmountCell, { invoice: row.original })
   },
-  [
-    "Status"
-    /* Status */
-  ]: {
+  {
     id: "Status",
     header: "Status",
-    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(InvoiceStatusCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(InvoiceStatusCell, { invoice: row.original })
   },
-  [
-    "Expand"
-    /* Expand */
-  ]: {
+  {
     id: "Expand",
-    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Button, { inset: true, icon: true, onPress: () => onSelectInvoice(row), "aria-label": "View invoice", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightFill, {}) })
+    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Button, { inset: true, icon: true, onPress: () => onSelectInvoice(row.original), "aria-label": "View invoice", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightFill, {}) })
   }
-});
+];
 const UNPAID_STATUSES$1 = [InvoiceStatus.Sent, InvoiceStatus.PartiallyPaid];
 const getStatusFilterParams = (statusFilter) => {
   switch (statusFilter) {
@@ -39765,15 +39777,72 @@ effect.Schema.Union(
   DateQueryParamsSchema,
   DateRangeQueryParamsSchema
 );
+const unifiedReportColumnFields = {
+  columnKey: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.String),
+    effect.Schema.fromKey("column_key")
+  ),
+  displayName: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.String),
+    effect.Schema.fromKey("display_name")
+  )
+};
+const UnifiedReportColumnSchema = effect.Schema.Struct(__spreadProps(__spreadValues({}, unifiedReportColumnFields), {
+  columns: effect.Schema.optional(
+    effect.Schema.Array(
+      effect.Schema.suspend(() => UnifiedReportColumnSchema)
+    )
+  )
+}));
+const UnifiedCellValueAmountSchema = effect.Schema.Struct({
+  type: effect.Schema.Literal("Amount"),
+  value: effect.Schema.Number
+});
+const UnifiedCellValueEmptySchema = effect.Schema.Struct({
+  type: effect.Schema.Literal("Empty")
+});
+const UnifiedCellValueUnknownSchema = effect.Schema.Struct({
+  type: effect.Schema.String,
+  value: effect.Schema.optional(effect.Schema.Unknown)
+});
+const UnifiedCellValueSchema = effect.Schema.Union(
+  UnifiedCellValueAmountSchema,
+  UnifiedCellValueEmptySchema,
+  UnifiedCellValueUnknownSchema
+);
+const isAmountCellValue = (value) => value.type === "Amount";
+const isEmptyCellValue = (value) => value.type === "Empty";
+const UnifiedReportCellSchema = effect.Schema.Struct({
+  value: UnifiedCellValueSchema
+});
+const unifiedReportRowFields = {
+  rowKey: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.String),
+    effect.Schema.fromKey("row_key")
+  ),
+  displayName: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.String),
+    effect.Schema.fromKey("display_name")
+  ),
+  cells: effect.Schema.Record({
+    key: effect.Schema.String,
+    value: effect.Schema.NullishOr(UnifiedReportCellSchema)
+  })
+};
+const UnifiedReportRowSchema = effect.Schema.Struct(__spreadProps(__spreadValues({}, unifiedReportRowFields), {
+  rows: effect.Schema.optional(
+    effect.Schema.Array(
+      effect.Schema.suspend(() => UnifiedReportRowSchema)
+    )
+  )
+}));
 const UnifiedReportSchema = effect.Schema.Struct({
   businessId: effect.pipe(
     effect.Schema.propertySignature(effect.Schema.UUID),
     effect.Schema.fromKey("business_id")
   ),
-  lineItems: effect.pipe(
-    effect.Schema.propertySignature(effect.Schema.Array(LineItemSchema)),
-    effect.Schema.fromKey("line_items")
-  )
+  columns: effect.Schema.Array(UnifiedReportColumnSchema),
+  rows: effect.Schema.Array(UnifiedReportRowSchema)
 });
 var UnifiedReportDateVariant = /* @__PURE__ */ ((UnifiedReportDateVariant2) => {
   UnifiedReportDateVariant2["Date"] = "Date";
@@ -39795,10 +39864,10 @@ function useUnifiedReportDateVariant() {
   const report = zustand.useStore(store, (state) => state.report);
   return reportToDateVariantMap[report];
 }
-function useUnifiedReportWithDateParams() {
+function useUnifiedReportWithDateParams({ dateSelectionMode }) {
   const store = react.useContext(UnifiedReportStoreContext);
-  const { date: effectiveDate } = useGlobalDate();
-  const { startDate, endDate } = useGlobalDateRange({ displayMode: "full" });
+  const { date: effectiveDate } = useGlobalDate({ dateSelectionMode });
+  const { startDate, endDate } = useGlobalDateRange({ dateSelectionMode });
   const report = zustand.useStore(store, (state) => state.report);
   const dateVariant = reportToDateVariantMap[report];
   switch (dateVariant) {
@@ -39858,33 +39927,13 @@ function ExpandableDataTable({
   ariaLabel,
   slots,
   hideHeader,
-  getSubRows: getSubRows2
+  getSubRows: getSubRows2,
+  getRowId
 }) {
-  const columnHelper = reactTable.createColumnHelper();
-  const columns = Object.values(columnConfig);
   const { expanded, setExpanded } = react.useContext(ExpandableDataTableContext);
-  const columnDefs = columns.map((col) => {
-    return columnHelper.display({
-      id: col.id,
-      header: () => col.header,
-      cell: ({ row }) => col.cell(row)
-    });
-  });
-  const table2 = reactTable.useReactTable({
-    data: data != null ? data : EMPTY_ARRAY,
-    columns: columnDefs,
-    getSubRows: getSubRows2,
-    getCoreRowModel: reactTable.getCoreRowModel(),
-    getExpandedRowModel: reactTable.getExpandedRowModel(),
-    state: { expanded },
-    onExpandedChange: setExpanded,
-    autoResetPageIndex: false,
-    getRowId: (row) => row.id
-  });
-  const { rows } = table2.getExpandedRowModel();
   const wrappedColumnConfig = react.useMemo(() => {
-    if (!columns.length) return columnConfig;
-    const [first, ...rest] = columns;
+    const [first, ...rest] = columnConfig;
+    if (!first || !isLeafColumn(first)) return columnConfig;
     const originalFirstCell = first.cell;
     const firstWithChevron = __spreadProps(__spreadValues({}, first), {
       cell: (row) => {
@@ -39897,26 +39946,37 @@ function ExpandableDataTable({
         ] }) });
       }
     });
-    return __spreadValues(__spreadProps(__spreadValues({}, columnConfig), {
-      [first.id]: firstWithChevron
-    }), rest.reduce((acc, col) => {
-      acc[col.id] = col;
-      return acc;
-    }, {}));
-  }, [columns, columnConfig]);
+    return [firstWithChevron, ...rest];
+  }, [columnConfig]);
+  const columnDefs = getColumnDefs(wrappedColumnConfig);
+  const table2 = reactTable.useReactTable({
+    data: data != null ? data : EMPTY_ARRAY,
+    columns: columnDefs,
+    getSubRows: getSubRows2,
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getExpandedRowModel: reactTable.getExpandedRowModel(),
+    state: { expanded },
+    onExpandedChange: setExpanded,
+    autoResetPageIndex: false,
+    getRowId
+  });
+  const { rows } = table2.getExpandedRowModel();
   const dependencies = react.useMemo(() => [expanded], [expanded]);
+  const headerGroups = table2.getHeaderGroups();
+  const numColumns = table2.getVisibleLeafColumns().length;
   return /* @__PURE__ */ jsxRuntime.jsx(
     DataTable,
     {
       ariaLabel,
-      columnConfig: wrappedColumnConfig,
+      numColumns,
       data: rows,
       isLoading,
       isError,
       componentName,
       slots,
       hideHeader,
-      dependencies
+      dependencies,
+      headerGroups
     }
   );
 }
@@ -39948,10 +40008,6 @@ const getUnifiedReport = get$1((_md) => {
   const parameters = toDefinedSearchParameters(__spreadValues({}, dateParams));
   return `/v1/businesses/${businessId}/reports/unified/${report}?${parameters}`;
 });
-const addIdToLineItem = (li) => __spreadProps(__spreadValues({}, li), {
-  id: li.name,
-  lineItems: li.lineItems.map(addIdToLineItem)
-});
 class UnifiedReportSWRResponse {
   constructor(swrResponse) {
     __publicField(this, "swrResponse");
@@ -39986,45 +40042,64 @@ function useUnifiedReport(_od) {
     }), dateParams)),
     ({ accessToken, apiUrl: apiUrl2, businessId: businessId2 }) => getUnifiedReport(apiUrl2, accessToken, {
       params: __spreadValues({ businessId: businessId2, report }, dateParams)
-    })().then(
-      ({ data }) => effect.Schema.decodeUnknownPromise(UnifiedReportSchema)(data).then((rep) => __spreadProps(__spreadValues({}, rep), {
-        lineItems: rep.lineItems.map(addIdToLineItem)
-      }))
-    )
+    })().then(({ data }) => effect.Schema.decodeUnknownPromise(UnifiedReportSchema)(data))
   );
   return new UnifiedReportSWRResponse(swrResponse);
 }
 const COMPONENT_NAME$2 = "UnifiedReport";
-const COLUMN_CONFIG = {
-  [
-    "DisplayName"
-    /* DisplayName */
-  ]: {
-    id: "DisplayName",
-    header: "Line Item",
+const makeLeafColumn = (col) => ({
+  id: col.columnKey,
+  header: col.displayName,
+  cell: (row) => {
+    var _a;
+    const cellValue = (_a = row.original.cells[col.columnKey]) == null ? void 0 : _a.value;
+    if (!cellValue || isEmptyCellValue(cellValue)) {
+      return null;
+    }
+    if (isAmountCellValue(cellValue)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { ellipsis: true, amount: cellValue.value });
+    }
+    if (isEmptyCellValue(cellValue)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: String(cellValue.value) });
+  }
+});
+const makeGroupColumn = (col) => ({
+  id: col.columnKey,
+  header: col.displayName,
+  columns: buildNestedColumnConfig(col.columns)
+});
+const isGroupColumn = (col) => col.columns !== void 0 && col.columns.length > 0;
+const buildNestedColumnConfig = (columns) => {
+  return columns.map((col) => {
+    if (isGroupColumn(col)) {
+      return makeGroupColumn(col);
+    }
+    return makeLeafColumn(col);
+  });
+};
+const buildColumnConfig = (columns) => {
+  const displayNameColumn = {
+    id: "displayName",
+    header: "",
     cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { weight: row.depth === 0 ? "bold" : "normal", ellipsis: true, children: row.original.displayName }),
     isRowHeader: true
-  },
-  [
-    "Value"
-    /* Value */
-  ]: {
-    id: "Value",
-    header: "Amount",
-    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { amount: row.original.value })
-  }
+  };
+  return [displayNameColumn, ...buildNestedColumnConfig(columns)];
 };
-const getSubRows = (lineItem) => asMutable(lineItem.lineItems);
-const UnifiedReportTable = () => {
-  const _a = useUnifiedReportWithDateParams(), { report } = _a, dateParams = __objRest(_a, ["report"]);
+const getSubRows = (row) => row.rows ? asMutable(row.rows) : void 0;
+const UnifiedReportTable = ({ dateSelectionMode }) => {
+  const _a = useUnifiedReportWithDateParams({ dateSelectionMode }), { report } = _a, dateParams = __objRest(_a, ["report"]);
   const { data, isLoading, isError, refetch } = useUnifiedReport(__spreadValues({ report }, dateParams));
   const { setExpanded } = react.useContext(ExpandableDataTableContext);
-  const mutableLineItems = data ? asMutable(data == null ? void 0 : data.lineItems) : void 0;
+  const mutableRows = (data == null ? void 0 : data.rows) ? asMutable(data.rows) : void 0;
+  const columnConfig = react.useMemo(() => data ? buildColumnConfig(data.columns) : [], [data]);
   react.useEffect(() => {
-    if (mutableLineItems !== void 0) {
-      setExpanded(Object.fromEntries(mutableLineItems.map((d) => [d.id, true])));
+    if (mutableRows !== void 0) {
+      setExpanded(Object.fromEntries(mutableRows.map((d) => [d.rowKey, true])));
     }
-  }, [mutableLineItems, setExpanded]);
+  }, [mutableRows, setExpanded]);
   const UnifiedReportEmptyState = react.useCallback(() => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       DataState,
@@ -40052,17 +40127,17 @@ const UnifiedReportTable = () => {
     ExpandableDataTable,
     {
       ariaLabel: "Report",
-      data: mutableLineItems,
+      data: mutableRows,
       isLoading: data === void 0 || isLoading,
       isError,
-      columnConfig: COLUMN_CONFIG,
+      columnConfig,
       componentName: COMPONENT_NAME$2,
       slots: {
         ErrorState: UnifiedReportErrorState,
         EmptyState: UnifiedReportEmptyState
       },
       getSubRows,
-      hideHeader: true
+      getRowId: (row) => row.rowKey
     }
   );
 };
@@ -40141,10 +40216,10 @@ function downloadReport(apiUrl, accessToken, businessId, unifiedReportParams) {
       });
   }
 }
-function useUnifiedReportDownload({ onSuccess } = {}) {
+function useUnifiedReportDownload({ dateSelectionMode, onSuccess }) {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
-  const reportWithDateParams = useUnifiedReportWithDateParams();
+  const reportWithDateParams = useUnifiedReportWithDateParams({ dateSelectionMode });
   const rawMutationResponse = useSWRMutation(
     () => buildKey$a(__spreadProps(__spreadValues({}, auth), {
       businessId,
@@ -40161,9 +40236,10 @@ function useUnifiedReportDownload({ onSuccess } = {}) {
   );
   return new DownloadUnifiedReportSWRResponse(rawMutationResponse);
 }
-function UnifiedReportDownloadButton() {
+function UnifiedReportDownloadButton({ dateSelectionMode }) {
   const { invisibleDownloadRef, triggerInvisibleDownload } = useInvisibleDownload();
   const { trigger, isMutating, isError } = useUnifiedReportDownload({
+    dateSelectionMode,
     onSuccess: ({ presignedUrl }) => triggerInvisibleDownload({ url: presignedUrl })
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -40185,7 +40261,7 @@ function UnifiedReportDownloadButton() {
     /* @__PURE__ */ jsxRuntime.jsx(InvisibleDownload, { ref: invisibleDownloadRef })
   ] });
 }
-const UnifiedReportTableHeader = () => {
+const UnifiedReportTableHeader = ({ dateSelectionMode }) => {
   const dateVariant = useUnifiedReportDateVariant();
   const { expanded, setExpanded } = react.useContext(ExpandableDataTableContext);
   const shouldCollapse = expanded === true;
@@ -40197,17 +40273,17 @@ const UnifiedReportTableHeader = () => {
     }
   }, [setExpanded, shouldCollapse]);
   return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { fluid: true, justify: "space-between", align: "center", className: "Layer__UnifiedReport__Header", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(HStack, { pi: "md", children: dateVariant === UnifiedReportDateVariant.DateRange ? /* @__PURE__ */ jsxRuntime.jsx(DateRangeSelection, {}) : /* @__PURE__ */ jsxRuntime.jsx(DateSelection, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(HStack, { pi: "md", children: dateVariant === UnifiedReportDateVariant.DateRange ? /* @__PURE__ */ jsxRuntime.jsx(CombinedDateRangeSelection, { mode: dateSelectionMode }) : /* @__PURE__ */ jsxRuntime.jsx(CombinedDateSelection, { mode: dateSelectionMode }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", className: "Layer__UnifiedReport__Header__SecondaryActions", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outlined", onClick: onClickExpandOrCollapse, children: shouldCollapse ? "Collapse All" : "Expand All" }),
-      /* @__PURE__ */ jsxRuntime.jsx(UnifiedReportDownloadButton, {})
+      /* @__PURE__ */ jsxRuntime.jsx(UnifiedReportDownloadButton, { dateSelectionMode })
     ] })
   ] });
 };
-const UnifiedReport = () => {
+const UnifiedReport = ({ dateSelectionMode }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Container, { name: "UnifiedReport", children: /* @__PURE__ */ jsxRuntime.jsx(UnifiedReportStoreProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(ExpandableDataTableProvider, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(UnifiedReportTableHeader, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(UnifiedReportTable, {})
+    /* @__PURE__ */ jsxRuntime.jsx(UnifiedReportTableHeader, { dateSelectionMode }),
+    /* @__PURE__ */ jsxRuntime.jsx(UnifiedReportTable, { dateSelectionMode })
   ] }) }) });
 };
 const AccountingOverview = ({
@@ -43950,80 +44026,59 @@ const TripsTableHeaderMenu = () => {
   );
 };
 const COMPONENT_NAME = "TripsTable";
-const getColumnConfig = ({ onSelectTrip, onDeleteTrip }) => ({
-  [
-    "TripDate"
-    /* TripDate */
-  ]: {
+const getColumnConfig = ({ onSelectTrip, onDeleteTrip }) => [
+  {
     id: "TripDate",
     header: "Date",
-    cell: (row) => formatCalendarDate(row.tripDate)
+    cell: (row) => formatCalendarDate(row.original.tripDate)
   },
-  [
-    "Vehicle"
-    /* Vehicle */
-  ]: {
+  {
     id: "Vehicle",
     header: "Vehicle",
-    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, withTooltip: true, children: getVehicleDisplayName(row.vehicle) }),
+    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, withTooltip: true, children: getVehicleDisplayName(row.original.vehicle) }),
     isRowHeader: true
   },
-  [
-    "Distance"
-    /* Distance */
-  ]: {
+  {
     id: "Distance",
     header: "Distance",
-    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { align: "right", children: formatDistance(row.distance) })
+    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { align: "right", children: formatDistance(row.original.distance) })
   },
-  [
-    "Purpose"
-    /* Purpose */
-  ]: {
+  {
     id: "Purpose",
     header: "Purpose",
-    cell: (row) => getPurposeLabel(row.purpose)
+    cell: (row) => getPurposeLabel(row.original.purpose)
   },
-  [
-    "Address"
-    /* Address */
-  ]: {
+  {
     id: "Address",
     header: "Address",
     cell: (row) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", overflow: "auto", children: [
-        row.startAddress && /* @__PURE__ */ jsxRuntime.jsxs(Span, { ellipsis: true, size: "sm", withTooltip: true, children: [
+        row.original.startAddress && /* @__PURE__ */ jsxRuntime.jsxs(Span, { ellipsis: true, size: "sm", withTooltip: true, children: [
           /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Start:" }),
           " ",
-          row.startAddress
+          row.original.startAddress
         ] }),
-        row.endAddress && /* @__PURE__ */ jsxRuntime.jsxs(Span, { ellipsis: true, size: "sm", withTooltip: true, children: [
+        row.original.endAddress && /* @__PURE__ */ jsxRuntime.jsxs(Span, { ellipsis: true, size: "sm", withTooltip: true, children: [
           /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "End:" }),
           " ",
-          row.endAddress
+          row.original.endAddress
         ] })
       ] });
     }
   },
-  [
-    "Description"
-    /* Description */
-  ]: {
+  {
     id: "Description",
     header: "Description",
-    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, withTooltip: true, children: row.description })
+    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, withTooltip: true, children: row.original.description })
   },
-  [
-    "Actions"
-    /* Actions */
-  ]: {
+  {
     id: "Actions",
     cell: (row) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "3xs", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { inset: true, icon: true, onPress: () => onSelectTrip(row), "aria-label": "View trip", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { size: 20 }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { inset: true, icon: true, onPress: () => onDeleteTrip(row), "aria-label": "Delete trip", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 20 }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { inset: true, icon: true, onPress: () => onSelectTrip(row.original), "aria-label": "View trip", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { size: 20 }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { inset: true, icon: true, onPress: () => onDeleteTrip(row.original), "aria-label": "Delete trip", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 20 }) })
     ] })
   }
-});
+];
 const TripsTable = () => {
   var _a;
   const [isTripDrawerOpen, setIsTripDrawerOpen] = react.useState(false);
@@ -45506,7 +45561,7 @@ const BusinessProvider = ({
     hasBeenTouched,
     resetCaches
   } = useDataSync();
-  const globalDateRange = useGlobalDateRange({ displayMode: "full" });
+  const globalDateRange = useGlobalDateRange({ dateSelectionMode: "full" });
   const { setDateRange } = useGlobalDateRangeActions();
   const dateRange = react.useMemo(() => ({
     range: globalDateRange,