@layerfi/components 0.1.42 → 0.1.44

package/.eslintrc.js

@@ -18,7 +18,7 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  plugins: ['react', '@typescript-eslint', 'prettier'],
+  plugins: ['react', '@typescript-eslint', 'prettier', 'import'],
   rules: {
     'prettier/prettier': 'error',
     indent: ['off', 2, { SwitchCase: 1 }],
@@ -37,4 +37,17 @@ module.exports = {
       },
     ],
   },
+  overrides: [
+    {
+      files: ['*.tsx'],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            patterns: ['*.css'],
+          },
+        ],
+      },
+    },
+  ],
 }

package/dist/esm/index.js

@@ -5361,7 +5361,8 @@ var MatchForm = ({
   bankTransaction,
   selectedMatchId,
   setSelectedMatchId,
-  matchFormError
+  matchFormError,
+  readOnly = false
 }) => {
   return /* @__PURE__ */ React75.createElement("div", { className: `${classNamePrefix}__match-table` }, /* @__PURE__ */ React75.createElement("div", { className: `${classNamePrefix}__match-table__header` }, /* @__PURE__ */ React75.createElement("div", { className: `${classNamePrefix}__match-table__date` }, "Date"), /* @__PURE__ */ React75.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, "Description"), /* @__PURE__ */ React75.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "Amount"), /* @__PURE__ */ React75.createElement(
     "div",
@@ -5378,6 +5379,9 @@ var MatchForm = ({
           match.id === selectedMatchId ? `${classNamePrefix}__match-row--selected` : ""
         ),
         onClick: () => {
+          if (readOnly === true) {
+            return;
+          }
           if (selectedMatchId === match.id) {
             setSelectedMatchId(void 0);
             return;
@@ -5789,6 +5793,7 @@ var ExpandedBankTransactionRow = forwardRef5(
     submitBtnText = "Save",
     containerWidth,
     showDescriptions,
+    mode,
     showReceiptUploads,
     hardRefreshPnlOnCategorize
   }, ref) => {
@@ -5861,7 +5866,7 @@ var ExpandedBankTransactionRow = forwardRef5(
     };
     const sanitizeNumberInput = (input) => {
       let sanitized = input.replace(/[^0-9.]/g, "");
-      let parts = sanitized.split(".");
+      const parts = sanitized.split(".");
       if (parts.length > 2) {
         sanitized = parts[0] + "." + parts.slice(1).join("");
       }
@@ -6051,7 +6056,7 @@ var ExpandedBankTransactionRow = forwardRef5(
         style: { height },
         onTransitionEnd: handleTransitionEnd
       },
-      shouldHide ? null : /* @__PURE__ */ React80.createElement("span", { className: `${className}__wrapper`, ref: bodyRef }, /* @__PURE__ */ React80.createElement("div", { className: `${className}__content-toggle` }, /* @__PURE__ */ React80.createElement(
+      shouldHide ? null : /* @__PURE__ */ React80.createElement("span", { className: `${className}__wrapper`, ref: bodyRef }, categorizationEnabled(mode) ? /* @__PURE__ */ React80.createElement("div", { className: `${className}__content-toggle` }, /* @__PURE__ */ React80.createElement(
         Toggle,
         {
           name: `purpose-${bankTransaction.id}${asListItem ? "-li" : ""}`,
@@ -6071,7 +6076,7 @@ var ExpandedBankTransactionRow = forwardRef5(
           selected: purpose,
           onChange: onChangePurpose
         }
-      )), /* @__PURE__ */ React80.createElement(
+      )) : /* @__PURE__ */ React80.createElement(React80.Fragment, null), /* @__PURE__ */ React80.createElement(
         "div",
         {
           className: `${className}__content`,
@@ -6092,6 +6097,7 @@ var ExpandedBankTransactionRow = forwardRef5(
               classNamePrefix: className,
               bankTransaction,
               selectedMatchId,
+              readOnly: !categorizationEnabled(mode),
               setSelectedMatchId: (id) => {
                 setMatchFormError(void 0);
                 setSelectedMatchId(id);
@@ -6119,7 +6125,7 @@ var ExpandedBankTransactionRow = forwardRef5(
               {
                 type: "text",
                 name: `split-${index}${asListItem ? "-li" : ""}`,
-                disabled: index === 0,
+                disabled: index === 0 || !categorizationEnabled(mode),
                 onChange: updateAmounts(index),
                 value: split.inputValue,
                 onBlur,
@@ -6141,7 +6147,7 @@ var ExpandedBankTransactionRow = forwardRef5(
                   value: split.category,
                   onChange: (value) => changeCategory(index, value),
                   className: "Layer__category-menu--full",
-                  disabled: bankTransaction.processing,
+                  disabled: bankTransaction.processing || !categorizationEnabled(mode),
                   excludeMatches: true
                 }
               ),
@@ -6169,7 +6175,7 @@ var ExpandedBankTransactionRow = forwardRef5(
                 )
               )}`
             }
-          ), /* @__PURE__ */ React80.createElement("div", { className: `${className}__splits-buttons` }, rowState.splits.length > 1 ? /* @__PURE__ */ React80.createElement(
+          ), categorizationEnabled(mode) ? /* @__PURE__ */ React80.createElement("div", { className: `${className}__splits-buttons` }, rowState.splits.length > 1 ? /* @__PURE__ */ React80.createElement(
             TextButton,
             {
               onClick: addSplit,
@@ -6185,7 +6191,7 @@ var ExpandedBankTransactionRow = forwardRef5(
               disabled: rowState.splits.length > 5
             },
             "Split"
-          ))))
+          )) : /* @__PURE__ */ React80.createElement(React80.Fragment, null)))
         )),
         showDescriptions && /* @__PURE__ */ React80.createElement(
           InputGroup,
@@ -6305,6 +6311,7 @@ var BankTransactionRow = ({
   editable,
   dateFormat,
   bankTransaction,
+  mode,
   removeTransaction,
   containerWidth,
   initialLoad,
@@ -6524,7 +6531,7 @@ var BankTransactionRow = ({
         /* @__PURE__ */ React82.createElement("span", null, "Unsaved"),
         /* @__PURE__ */ React82.createElement(AlertCircle_default, { size: 12 })
       ) : null,
-      !categorized && (open || !open && !showRetry) || categorized && open ? /* @__PURE__ */ React82.createElement(
+      !categorized && (open || !open && !showRetry) || categorizationEnabled(mode) && categorized && open ? /* @__PURE__ */ React82.createElement(
         SubmitButton,
         {
           onClick: () => {
@@ -6561,6 +6568,7 @@ var BankTransactionRow = ({
       bankTransaction,
       categorized,
       isOpen: open,
+      mode,
       close: () => setOpen(false),
       containerWidth,
       showDescriptions,
@@ -6615,6 +6623,7 @@ var BankTransactionListItem = ({
   dateFormat,
   bankTransaction,
   editable,
+  mode,
   showDescriptions,
   showReceiptUploads,
   hardRefreshPnlOnCategorize,
@@ -6710,6 +6719,7 @@ var BankTransactionListItem = ({
       ref: expandedRowRef,
       bankTransaction,
       isOpen: open,
+      mode,
       close: () => setOpen(false),
       categorized,
       asListItem: true,
@@ -6765,6 +6775,7 @@ var BankTransactionList = ({
   bankTransactions,
   editable,
   removeTransaction,
+  mode,
   containerWidth,
   showDescriptions = false,
   showReceiptUploads = false,
@@ -6779,6 +6790,7 @@ var BankTransactionList = ({
         key: bankTransaction.id,
         dateFormat: DATE_FORMAT,
         bankTransaction,
+        mode,
         editable,
         removeTransaction,
         containerWidth,
@@ -7287,6 +7299,7 @@ var BankTransactionMobileListItem = ({
   bankTransaction,
   removeTransaction,
   editable,
+  mode,
   initialLoad,
   hardRefreshPnlOnCategorize = false
 }) => {
@@ -7377,31 +7390,29 @@ var BankTransactionMobileListItem = ({
     open ? openClassName : "",
     showComponent ? "show" : ""
   );
-  return /* @__PURE__ */ React92.createElement(
-    "li",
+  return /* @__PURE__ */ React92.createElement("li", { ref: itemRef, className: rowClassName, "data-item": bankTransaction.id }, /* @__PURE__ */ React92.createElement(
+    "span",
     {
-      ref: itemRef,
-      className: rowClassName,
-      "data-item": bankTransaction.id
+      className: `${className}__heading`,
+      onClick: toggleOpen,
+      role: "button",
+      style: { height: headingHeight }
     },
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React92.createElement("div", { className: `${className}__heading__content`, ref: headingRowRef }, /* @__PURE__ */ React92.createElement("div", { className: `${className}__heading__main` }, /* @__PURE__ */ React92.createElement(Text, { as: "span", className: `${className}__heading__tx-name` }, bankTransaction.counterparty_name ?? bankTransaction.description), /* @__PURE__ */ React92.createElement(Text, { as: "span", className: `${className}__heading__account-name` }, categorized && bankTransaction.categorization_status ? getAssignedValue2(bankTransaction) : null, !categorized && bankTransaction.account_name), categorized && open && /* @__PURE__ */ React92.createElement(Text, { as: "span", className: `${className}__categorized-name` }, bankTransaction.account_name)), /* @__PURE__ */ React92.createElement("div", { className: `${className}__heading__amount` }, /* @__PURE__ */ React92.createElement(
       "span",
       {
-        className: `${className}__heading`,
-        onClick: toggleOpen,
-        role: "button",
-        style: { height: headingHeight }
+        className: `${className}__amount-${isCredit(bankTransaction) ? "credit" : "debit"}`
       },
-      /* @__PURE__ */ React92.createElement("div", { className: `${className}__heading__content`, ref: headingRowRef }, /* @__PURE__ */ React92.createElement("div", { className: `${className}__heading__main` }, /* @__PURE__ */ React92.createElement(Text, { as: "span", className: `${className}__heading__tx-name` }, bankTransaction.counterparty_name ?? bankTransaction.description), /* @__PURE__ */ React92.createElement(Text, { as: "span", className: `${className}__heading__account-name` }, categorized && bankTransaction.categorization_status ? getAssignedValue2(bankTransaction) : null, !categorized && bankTransaction.account_name), categorized && open && /* @__PURE__ */ React92.createElement(Text, { as: "span", className: `${className}__categorized-name` }, bankTransaction.account_name)), /* @__PURE__ */ React92.createElement("div", { className: `${className}__heading__amount` }, /* @__PURE__ */ React92.createElement(
-        "span",
-        {
-          className: `${className}__amount-${isCredit(bankTransaction) ? "credit" : "debit"}`
-        },
-        isCredit(bankTransaction) ? "+$" : " $",
-        centsToDollars(bankTransaction.amount)
-      ), /* @__PURE__ */ React92.createElement("span", { className: `${className}__heading__date` }, formatTime8(parseISO10(bankTransaction.date), DATE_FORMAT2))))
-    ),
-    /* @__PURE__ */ React92.createElement("div", { className: `${className}__expanded-row`, style: { height: !open || removeAnim ? 0 : height } }, open && /* @__PURE__ */ React92.createElement(
+      isCredit(bankTransaction) ? "+$" : " $",
+      centsToDollars(bankTransaction.amount)
+    ), /* @__PURE__ */ React92.createElement("span", { className: `${className}__heading__date` }, formatTime8(parseISO10(bankTransaction.date), DATE_FORMAT2))))
+  ), categorizationEnabled(mode) ? /* @__PURE__ */ React92.createElement(
+    "div",
+    {
+      className: `${className}__expanded-row`,
+      style: { height: !open || removeAnim ? 0 : height }
+    },
+    open && /* @__PURE__ */ React92.createElement(
       "div",
       {
         className: `${className}__expanded-row__content`,
@@ -7416,17 +7427,20 @@ var BankTransactionMobileListItem = ({
             {
               value: "business",
               label: "Business",
-              style: { minWidth: 84 }
+              style: { minWidth: 84 },
+              disabled: categorizationEnabled(mode)
             },
             {
               value: "personal",
               label: "Personal",
-              style: { minWidth: 84 }
+              style: { minWidth: 84 },
+              disabled: categorizationEnabled(mode)
             },
             {
               value: "more",
               label: "More",
-              style: { minWidth: 84 }
+              style: { minWidth: 84 },
+              disabled: categorizationEnabled(mode)
             }
           ],
           selected: purpose,
@@ -7441,8 +7455,8 @@ var BankTransactionMobileListItem = ({
           hardRefreshPnlOnCategorize
         }
       )
-    ))
-  );
+    )
+  ) : /* @__PURE__ */ React92.createElement(React92.Fragment, null));
 };
 
 // src/components/BankTransactionMobileList/BankTransactionMobileList.tsx
@@ -7451,6 +7465,7 @@ var BankTransactionMobileList = ({
   removeTransaction,
   editable,
   initialLoad,
+  mode,
   hardRefreshPnlOnCategorize
 }) => {
   const transactionToOpenContextData = useTransactionToOpen();
@@ -7459,6 +7474,7 @@ var BankTransactionMobileList = ({
       BankTransactionMobileListItem,
       {
         index,
+        mode,
         key: bankTransaction.id,
         bankTransaction,
         editable,
@@ -7598,6 +7614,7 @@ var BankTransactionsTable = ({
   editable,
   isLoading,
   bankTransactions,
+  mode,
   initialLoad,
   containerWidth,
   removeTransaction,
@@ -7626,6 +7643,7 @@ var BankTransactionsTable = ({
           initialLoad,
           index,
           editable,
+          mode,
           key: bankTransaction.id,
           dateFormat: DATE_FORMAT,
           bankTransaction,
@@ -7928,7 +7946,6 @@ var isDateAllowedToBrowse = (date, business) => {
 // src/components/DatePicker/DatePicker.tsx
 import React105, { useEffect as useEffect19, useRef as useRef13, useState as useState24 } from "react";
 import ReactDatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
 
 // src/components/DatePicker/DatePickerOptions.tsx
 import React104 from "react";
@@ -8522,12 +8539,12 @@ var BankTransactionsHeader = ({
         minDate: getEarliestDateToBrowse(business)
       }
     ) : null),
-    /* @__PURE__ */ React108.createElement("div", { className: "Layer__header__actions-wrapper" }, !categorizedOnly && !(mobileComponent == "mobileList" && listView) && categorizeView && /* @__PURE__ */ React108.createElement("div", { className: "Layer__header__actions" }, /* @__PURE__ */ React108.createElement(
+    /* @__PURE__ */ React108.createElement("div", { className: "Layer__header__actions-wrapper" }, /* @__PURE__ */ React108.createElement("div", { className: "Layer__header__actions" }, /* @__PURE__ */ React108.createElement(
       DownloadButton,
       {
         downloadButtonTextOverride: stringOverrides?.downloadButton
       }
-    ), /* @__PURE__ */ React108.createElement(
+    ), !categorizedOnly && !(mobileComponent == "mobileList" && listView) && categorizeView && /* @__PURE__ */ React108.createElement(
       Toggle,
       {
         name: "bank-transaction-display",
@@ -8628,6 +8645,12 @@ import { endOfMonth as endOfMonth3, parseISO as parseISO12, startOfMonth as star
 var COMPONENT_NAME2 = "bank-transactions";
 var TEST_EMPTY_STATE = false;
 var POLL_INTERVAL = 1e4;
+var categorizationEnabled = (mode) => {
+  if (mode === "bookkeeping-client") {
+    return false;
+  }
+  return true;
+};
 var BankTransactions = ({
   onError,
   ...props
@@ -8637,8 +8660,7 @@ var BankTransactions = ({
 var BankTransactionsContent = ({
   asWidget = false,
   pageSize = 20,
-  categorizedOnly = false,
-  categorizeView = true,
+  mode = "self-serve",
   showDescriptions = false,
   showReceiptUploads = false,
   hardRefreshPnlOnCategorize = false,
@@ -8654,6 +8676,7 @@ var BankTransactionsContent = ({
     startDate: startOfMonth5(/* @__PURE__ */ new Date()),
     endDate: endOfMonth3(/* @__PURE__ */ new Date())
   });
+  const categorizeView = categorizationEnabled(mode);
   const {
     activate,
     data,
@@ -8713,7 +8736,7 @@ var BankTransactionsContent = ({
           ...inputFilters,
           categorizationStatus: "review" /* review */
         });
-      } else if (!filters?.categorizationStatus && categorizedOnly) {
+      } else if (!filters?.categorizationStatus && !categorizationEnabled(mode)) {
         setFilters({
           ...filters,
           ...inputFilters,
@@ -8726,12 +8749,12 @@ var BankTransactionsContent = ({
       setFilters({
         categorizationStatus: "review" /* review */
       });
-    } else if (!filters?.categorizationStatus && categorizedOnly) {
+    } else if (!filters?.categorizationStatus && !categorizationEnabled(mode)) {
       setFilters({
         categorizationStatus: "categorized" /* categorized */
       });
     }
-  }, [inputFilters, categorizeView, categorizedOnly]);
+  }, [inputFilters, categorizeView, mode]);
   useEffect21(() => {
     if (loadingStatus === "complete") {
       const timeoutLoad = setTimeout(() => {
@@ -8794,7 +8817,7 @@ var BankTransactionsContent = ({
       {
         shiftStickyHeader,
         asWidget,
-        categorizedOnly,
+        categorizedOnly: !categorizationEnabled(mode),
         categorizeView,
         display,
         onCategorizationDisplayChange,
@@ -8816,6 +8839,7 @@ var BankTransactionsContent = ({
         isLoading,
         isSyncing,
         bankTransactions,
+        mode,
         initialLoad,
         containerWidth,
         removeTransaction,
@@ -8831,6 +8855,7 @@ var BankTransactionsContent = ({
     !isLoading && listView && mobileComponent !== "mobileList" ? /* @__PURE__ */ React111.createElement(
       BankTransactionList,
       {
+        mode,
         bankTransactions,
         editable,
         removeTransaction,
@@ -8844,6 +8869,7 @@ var BankTransactionsContent = ({
       {
         bankTransactions,
         editable,
+        mode,
         removeTransaction,
         initialLoad,
         hardRefreshPnlOnCategorize
@@ -9466,9 +9492,9 @@ var ProfitAndLossChart = ({
     name: getMonthName(pnl),
     revenue: pnl?.income || 0,
     revenueUncategorized: pnl?.uncategorizedInflows || 0,
-    expenses: -(pnl?.operatingExpenses || 0),
+    expenses: -(pnl?.totalExpenses || 0),
     expensesUncategorized: -(pnl?.uncategorizedOutflows || 0),
-    operatingExpensesInverse: pnl?.operatingExpensesInverse || 0,
+    totalExpensesInverse: pnl?.totalExpensesInverse || 0,
     uncategorizedOutflowsInverse: pnl?.uncategorizedOutflowsInverse || 0,
     netProfit: pnl?.netProfit || 0,
     selected: !!pnl && pnl.month === selectionMonth.month + 1 && pnl.year === selectionMonth.year,
@@ -9488,7 +9514,7 @@ var ProfitAndLossChart = ({
           name: format(currentDate, compactView ? "LLLLL" : "LLL"),
           revenue: 0,
           revenueUncategorized: 0,
-          operatingExpensesInverse: 0,
+          totalExpensesInverse: 0,
           uncategorizedOutflowsInverse: 0,
           expenses: 0,
           expensesUncategorized: 0,
@@ -9508,9 +9534,9 @@ var ProfitAndLossChart = ({
       if (totalExpenses < 0 || x.uncategorizedOutflows < 0) {
         return {
           ...x,
-          operatingExpenses: totalExpenses < 0 ? 0 : totalExpenses,
+          totalExpenses: totalExpenses < 0 ? 0 : totalExpenses,
           uncategorizedOutflows: x.uncategorizedOutflows < 0 ? 0 : x.uncategorizedOutflows,
-          operatingExpensesInverse: totalExpenses < 0 ? -totalExpenses : 0,
+          totalExpensesInverse: totalExpenses < 0 ? -totalExpenses : 0,
           uncategorizedOutflowsInverse: x.uncategorizedOutflows < 0 ? -x.uncategorizedOutflows : 0
         };
       }
@@ -9806,7 +9832,7 @@ var ProfitAndLossChart = ({
       /* @__PURE__ */ React114.createElement(
         Bar,
         {
-          dataKey: "operatingExpensesInverse",
+          dataKey: "totalExpensesInverse",
           barSize,
           isAnimationActive: barAnimActive,
           animationDuration: 100,
@@ -10919,17 +10945,18 @@ var ProfitAndLossRow = ({
   variant,
   lineItem,
   depth = 0,
-  maxDepth = 1,
+  maxDepth = 8,
   direction = "DEBIT" /* DEBIT */,
   lockExpanded = false,
   scope,
-  setSidebarScope
+  setSidebarScope,
+  defaultExpanded = false
 }) => {
   if (!lineItem) {
     return null;
   }
   const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = useState34(true);
+  const [expanded, setExpanded] = useState34(lockExpanded || defaultExpanded);
   const amount = value ?? 0;
   const amountString = centsToDollars(Math.abs(amount));
   const labelClasses = [
@@ -10964,7 +10991,10 @@ var ProfitAndLossRow = ({
     "div",
     {
       className: labelClasses.join(" "),
-      onClick: () => !lockExpanded && toggleExpanded()
+      onClick: () => !lockExpanded && toggleExpanded(),
+      style: {
+        paddingLeft: depth === 0 && !hasChildren ? 28 : 16 * (depth + 1) + 2
+      }
     },
     /* @__PURE__ */ React125.createElement("span", { className: "Layer__profit-and-loss-row__label__title" }, !lockExpanded && variant !== "summation" ? /* @__PURE__ */ React125.createElement(
       ChevronDownFill_default,
@@ -11052,7 +11082,11 @@ var empty_profit_and_loss_report_default = {
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
 import classNames45 from "classnames";
-var ProfitAndLossTable = ({ lockExpanded, asContainer, stringOverrides }) => {
+var ProfitAndLossTable = ({
+  lockExpanded,
+  asContainer,
+  stringOverrides
+}) => {
   const {
     data: actualData,
     isLoading,
@@ -11087,7 +11121,8 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer, stringOverrides }) => {
         direction: "CREDIT" /* CREDIT */,
         lockExpanded,
         scope: "revenue",
-        setSidebarScope
+        setSidebarScope,
+        defaultExpanded: true
       }
     ),
     /* @__PURE__ */ React126.createElement(
@@ -11097,7 +11132,8 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer, stringOverrides }) => {
         direction: "DEBIT" /* DEBIT */,
         lockExpanded,
         scope: "expenses",
-        setSidebarScope
+        setSidebarScope,
+        defaultExpanded: true
       }
     ),
     /* @__PURE__ */ React126.createElement(
@@ -11111,7 +11147,8 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer, stringOverrides }) => {
         direction: "CREDIT" /* CREDIT */,
         lockExpanded,
         scope: "revenue",
-        setSidebarScope
+        setSidebarScope,
+        defaultExpanded: true
       }
     ),
     /* @__PURE__ */ React126.createElement(
@@ -11121,7 +11158,8 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer, stringOverrides }) => {
         direction: "DEBIT" /* DEBIT */,
         lockExpanded,
         scope: "expenses",
-        setSidebarScope
+        setSidebarScope,
+        defaultExpanded: true
       }
     ),
     /* @__PURE__ */ React126.createElement(
@@ -11135,7 +11173,8 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer, stringOverrides }) => {
         direction: "CREDIT" /* CREDIT */,
         lockExpanded,
         scope: "revenue",
-        setSidebarScope
+        setSidebarScope,
+        defaultExpanded: true
       }
     ),
     /* @__PURE__ */ React126.createElement(
@@ -11145,7 +11184,8 @@ var ProfitAndLossTable = ({ lockExpanded, asContainer, stringOverrides }) => {
         direction: "DEBIT" /* DEBIT */,
         lockExpanded,
         scope: "expenses",
-        setSidebarScope
+        setSidebarScope,
+        defaultExpanded: true
       }
     ),
     /* @__PURE__ */ React126.createElement(
@@ -15435,7 +15475,7 @@ var BankTransactionsWithLinkedAccounts = ({
   showLedgerBalance = true,
   showUnlinkItem = false,
   showBreakConnection = false,
-  categorizedOnly = false,
+  mode = "self-serve",
   hardRefreshPnlOnCategorize = false,
   showDescriptions,
   showReceiptUploads,
@@ -15458,7 +15498,7 @@ var BankTransactionsWithLinkedAccounts = ({
       showDescriptions,
       showReceiptUploads,
       mobileComponent,
-      categorizedOnly,
+      mode,
       hardRefreshPnlOnCategorize,
       stringOverrides: stringOverrides?.bankTransactions
     }
@@ -15502,7 +15542,9 @@ var GeneralLedgerView = ({
 
 // src/views/Reports/Reports.tsx
 import React182, { useContext as useContext38, useRef as useRef16, useState as useState58 } from "react";
-var DownloadButton2 = ({ stringOverrides }) => {
+var DownloadButton2 = ({
+  stringOverrides
+}) => {
   const { dateRange } = useContext38(ProfitAndLoss.Context);
   const { auth, businessId, apiUrl } = useLayerContext();
   const [requestFailed, setRequestFailed] = useState58(false);
@@ -15550,33 +15592,64 @@ var DownloadButton2 = ({ stringOverrides }) => {
     stringOverrides?.downloadButtonText || "Download"
   );
 };
-var Reports = ({ title, stringOverrides }) => {
+var getOptions = (enabledReports) => {
+  return [
+    enabledReports.includes("profitAndLoss") ? {
+      value: "profitAndLoss",
+      label: "Profit & Loss"
+    } : null,
+    enabledReports.includes("balanceSheet") ? {
+      value: "balanceSheet",
+      label: "Balance Sheet"
+    } : null,
+    enabledReports.includes("statementOfCashFlow") ? {
+      value: "statementOfCashFlow",
+      label: "Statement of Cash Flow"
+    } : null
+  ].filter((o) => !!o);
+};
+var Reports = ({
+  title,
+  stringOverrides,
+  enabledReports = ["profitAndLoss", "balanceSheet", "statementOfCashFlow"]
+}) => {
   const containerRef = useRef16(null);
-  const [activeTab, setActiveTab] = useState58("profitAndLoss");
-  return /* @__PURE__ */ React182.createElement(View, { title: stringOverrides?.title || title || "Reports" }, /* @__PURE__ */ React182.createElement("div", { className: "Layer__component Layer__header__actions" }, /* @__PURE__ */ React182.createElement(
+  const [activeTab, setActiveTab] = useState58(enabledReports[0]);
+  const options = getOptions(enabledReports);
+  const defaultTitle = enabledReports.length > 1 ? "Reports" : options.find((option) => option.value = enabledReports[0])?.label;
+  return /* @__PURE__ */ React182.createElement(View, { title: stringOverrides?.title || title || defaultTitle }, enabledReports.length > 1 && /* @__PURE__ */ React182.createElement("div", { className: "Layer__component Layer__header__actions" }, /* @__PURE__ */ React182.createElement(
     Toggle,
     {
       name: "reports-tabs",
-      options: [
-        { value: "profitAndLoss", label: "Profit & loss" },
-        { value: "balanceSheet", label: "Balance sheet" },
-        {
-          value: "statementOfCashFlow",
-          label: "Statement of Cash Flow"
-        }
-      ],
+      options,
       selected: activeTab,
       onChange: (opt) => setActiveTab(opt.target.value)
     }
-  )), /* @__PURE__ */ React182.createElement(Container, { name: "reports", ref: containerRef }, /* @__PURE__ */ React182.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React182.createElement(ReportsPanel, { containerRef, openReport: activeTab, stringOverrides }))));
+  )), /* @__PURE__ */ React182.createElement(Container, { name: "reports", ref: containerRef }, /* @__PURE__ */ React182.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React182.createElement(
+    ReportsPanel,
+    {
+      containerRef,
+      openReport: activeTab,
+      stringOverrides
+    }
+  ))));
 };
-var ReportsPanel = ({ containerRef, openReport, stringOverrides }) => {
+var ReportsPanel = ({
+  containerRef,
+  openReport,
+  stringOverrides
+}) => {
   const { sidebarScope } = useContext38(ProfitAndLoss.Context);
   return /* @__PURE__ */ React182.createElement(React182.Fragment, null, openReport === "profitAndLoss" && /* @__PURE__ */ React182.createElement(
     View,
     {
       type: "panel",
-      headerControls: /* @__PURE__ */ React182.createElement(React182.Fragment, null, /* @__PURE__ */ React182.createElement(ProfitAndLoss.DatePicker, null), /* @__PURE__ */ React182.createElement(DownloadButton2, { stringOverrides: stringOverrides?.downloadButton }))
+      headerControls: /* @__PURE__ */ React182.createElement(React182.Fragment, null, /* @__PURE__ */ React182.createElement(ProfitAndLoss.DatePicker, null), /* @__PURE__ */ React182.createElement(
+        DownloadButton2,
+        {
+          stringOverrides: stringOverrides?.downloadButton
+        }
+      ))
     },
     /* @__PURE__ */ React182.createElement(
       Panel,
@@ -15599,7 +15672,12 @@ var ReportsPanel = ({ containerRef, openReport, stringOverrides }) => {
         }
       )
     )
-  ), openReport === "balanceSheet" && /* @__PURE__ */ React182.createElement(BalanceSheet, { stringOverrides: stringOverrides?.balanceSheet }), openReport === "statementOfCashFlow" && /* @__PURE__ */ React182.createElement(StatementOfCashFlow, { stringOverrides: stringOverrides?.statementOfCashflow }));
+  ), openReport === "balanceSheet" && /* @__PURE__ */ React182.createElement(BalanceSheet, { stringOverrides: stringOverrides?.balanceSheet }), openReport === "statementOfCashFlow" && /* @__PURE__ */ React182.createElement(
+    StatementOfCashFlow,
+    {
+      stringOverrides: stringOverrides?.statementOfCashflow
+    }
+  ));
 };
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx