@layerfi/components 0.1.114-alpha.6 → 0.1.115-alpha

package/dist/cjs/index.cjs

@@ -70,7 +70,7 @@ const reactAriaComponents = require("react-aria-components");
 const lucideReact = require("lucide-react");
 const pluralize = require("pluralize");
 const useResizeObserver = require("@react-hook/resize-observer");
-const Select$1 = require("react-select");
+const ReactSelect = require("react-select");
 const reactDropzone = require("react-dropzone");
 const reactForm = require("@tanstack/react-form");
 const BaseCreatableSelect = require("react-select/creatable");
@@ -202,7 +202,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.114-alpha.6";
+const version = "0.1.115-alpha";
 const pkg = {
   version
 };
@@ -673,7 +673,7 @@ function requestOAuthToken(_0) {
     }).then((res) => res.json());
   });
 }
-function buildKey$10({
+function buildKey$14({
   appId,
   appSecret,
   businessAccessToken,
@@ -716,7 +716,7 @@ function useAuth() {
     businessAccessToken
   } = useAuthInput();
   return useSWR(
-    () => buildKey$10({ appId, appSecret, businessAccessToken, apiUrl, authUrl, scope }),
+    () => buildKey$14({ appId, appSecret, businessAccessToken, apiUrl, authUrl, scope }),
     (key) => {
       if (key.mode === "explicit") {
         const { businessAccessToken: businessAccessToken2, apiUrl: apiUrl3 } = key;
@@ -751,7 +751,7 @@ const useLayerContext = () => {
   return ctx;
 };
 const EXTERNAL_ACCOUNTS_TAG_KEY = "#external-accounts";
-function buildKey$$({
+function buildKey$13({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -770,7 +770,7 @@ function useListExternalAccounts() {
   const { apiUrl } = useEnvironment();
   const { data: auth } = useAuth();
   return useSWR(
-    () => buildKey$$(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$13(__spreadProps(__spreadValues({}, auth), {
       apiUrl,
       businessId
     })),
@@ -4053,7 +4053,7 @@ const BANK_ACCOUNTS_TAG_KEY = "#bank-accounts";
 const getBankAccounts = get$1(
   ({ businessId }) => `/v1/businesses/${businessId}/bank-accounts`
 );
-function buildKey$_({
+function buildKey$12({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -4074,7 +4074,7 @@ const useBankAccounts = () => {
   const { apiUrl } = useEnvironment();
   const { data: auth } = useAuth();
   const { data, error, isLoading } = useSWR(
-    () => buildKey$_(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$12(__spreadProps(__spreadValues({}, auth), {
       apiUrl,
       businessId
     })),
@@ -5515,7 +5515,7 @@ class ProfitAndLossReportSWRResponse {
     return this.swrResponse.mutate;
   }
 }
-function buildKey$Z({
+function buildKey$11({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -5559,7 +5559,7 @@ function useProfitAndLossReport({ startDate, endDate, tagKey, tagValues, reporti
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const response = useSWR(
-    () => buildKey$Z(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$11(__spreadProps(__spreadValues({}, data), {
       businessId,
       startDate,
       endDate,
@@ -5625,7 +5625,7 @@ class ProfitAndLossSummariesSWRResponse {
     return this.swrResponse.mutate;
   }
 }
-function buildKey$Y({
+function buildKey$10({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -5672,7 +5672,7 @@ function useProfitAndLossSummaries({ startYear, startMonth, endYear, endMonth, t
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const response = useSWR(
-    () => buildKey$Y(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$10(__spreadProps(__spreadValues({}, data), {
       businessId,
       startYear,
       startMonth,
@@ -5742,7 +5742,7 @@ const useProfitAndLossGlobalInvalidator = () => {
   return { invalidateProfitAndLoss, debouncedInvalidateProfitAndLoss };
 };
 const CATEGORIZE_BANK_TRANSACTION_TAG = "#categorize-bank-transaction";
-function buildKey$X({
+function buildKey$$({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -5765,7 +5765,7 @@ function useCategorizeBankTransaction({
   const { debouncedInvalidateProfitAndLoss } = useProfitAndLossGlobalInvalidator();
   const { invalidatePnlDetailLines } = usePnlDetailLinesInvalidator();
   const mutationResponse = useSWRMutation(
-    () => buildKey$X({
+    () => buildKey$$({
       access_token: auth == null ? void 0 : auth.access_token,
       apiUrl: auth == null ? void 0 : auth.apiUrl,
       businessId
@@ -5813,7 +5813,7 @@ function useCategorizeBankTransaction({
   });
 }
 const MATCH_BANK_TRANSACTION_TAG = "#match-bank-transaction";
-function buildKey$W({
+function buildKey$_({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -5835,7 +5835,7 @@ function useMatchBankTransaction({
   const { mutate } = useSWR.useSWRConfig();
   const { debouncedInvalidateProfitAndLoss } = useProfitAndLossGlobalInvalidator();
   const mutationResponse = useSWRMutation(
-    () => buildKey$W({
+    () => buildKey$_({
       access_token: auth == null ? void 0 : auth.access_token,
       apiUrl: auth == null ? void 0 : auth.apiUrl,
       businessId
@@ -6301,16 +6301,24 @@ const useAugmentedBankTransactions = (params) => {
     }
     return filtered;
   }, [filters, data]);
-  const updateOneLocal = (newBankTransaction) => {
-    if (newBankTransaction.update_categorization_rules_suggestion) {
-      const decodedRuleSuggestion = decodeRulesSuggestion(newBankTransaction.update_categorization_rules_suggestion);
-      setRuleSuggestion(decodedRuleSuggestion);
+  const updateLocalBankTransactions = (newBankTransactions) => {
+    const transactionsById = new Map(
+      newBankTransactions.map((bt) => [bt.id, bt])
+    );
+    for (const bt of newBankTransactions) {
+      if (bt.update_categorization_rules_suggestion) {
+        const decodedRuleSuggestion = decodeRulesSuggestion(bt.update_categorization_rules_suggestion);
+        setRuleSuggestion(decodedRuleSuggestion);
+      }
     }
     const updatedData = rawResponseData == null ? void 0 : rawResponseData.map((page) => {
       var _a2;
       return __spreadProps(__spreadValues({}, page), {
         data: (_a2 = page.data) == null ? void 0 : _a2.map(
-          (bt) => bt.id === newBankTransaction.id ? newBankTransaction : bt
+          (bt) => {
+            var _a3;
+            return (_a3 = transactionsById.get(bt.id)) != null ? _a3 : bt;
+          }
         )
       });
     });
@@ -6322,25 +6330,29 @@ const useAugmentedBankTransactions = (params) => {
   const categorizeWithOptimisticUpdate = (bankTransactionId, newCategory, notify) => __async(null, null, function* () {
     const existingTransaction = data == null ? void 0 : data.find(({ id }) => id === bankTransactionId);
     if (existingTransaction) {
-      updateOneLocal(__spreadProps(__spreadValues({}, existingTransaction), { update_categorization_rules_suggestion: void 0, processing: true, error: void 0 }));
+      updateLocalBankTransactions([__spreadProps(__spreadValues({}, existingTransaction), {
+        update_categorization_rules_suggestion: void 0,
+        processing: true,
+        error: void 0
+      })]);
     }
     return categorizeBankTransaction2(__spreadValues({
       bankTransactionId
     }, newCategory)).then((updatedTransaction) => {
-      updateOneLocal(__spreadProps(__spreadValues({}, updatedTransaction), {
+      updateLocalBankTransactions([__spreadProps(__spreadValues({}, updatedTransaction), {
         processing: false,
         recently_categorized: true
-      }));
+      })]);
       if (notify) {
         addToast({ content: "Transaction confirmed" });
       }
     }).catch((error) => {
       const targetedTransaction = data == null ? void 0 : data.find(({ id }) => id === bankTransactionId);
       if (targetedTransaction) {
-        updateOneLocal(__spreadProps(__spreadValues({}, targetedTransaction), {
+        updateLocalBankTransactions([__spreadProps(__spreadValues({}, targetedTransaction), {
           error: error instanceof Error ? error.message : "An unknown error occurred",
           processing: false
-        }));
+        })]);
       }
     }).finally(() => {
       var _a2;
@@ -6350,71 +6362,76 @@ const useAugmentedBankTransactions = (params) => {
   const { trigger: matchBankTransaction2 } = useMatchBankTransaction({
     mutateBankTransactions: mutate
   });
-  const matchWithOptimisticUpdate = (bankTransactionId, suggestedMatchId, notify) => __async(null, null, function* () {
-    const existingTransaction = data == null ? void 0 : data.find(({ id }) => id === bankTransactionId);
-    if (existingTransaction) {
-      updateOneLocal(__spreadProps(__spreadValues({}, existingTransaction), {
-        processing: true,
-        error: void 0
-      }));
-    }
-    const transferBankTransaction = data == null ? void 0 : data.find(
-      ({ id, suggested_matches }) => id !== bankTransactionId && (suggested_matches == null ? void 0 : suggested_matches.some(({ id: id2 }) => id2 === suggestedMatchId))
+  const matchWithOptimisticUpdate = (bankTransaction, suggestedMatchId, notify) => __async(null, null, function* () {
+    var _a2, _b;
+    const suggestedMatch = (_a2 = bankTransaction.suggested_matches) == null ? void 0 : _a2.find(
+      (sm) => sm.id === suggestedMatchId
     );
-    if (transferBankTransaction) {
-      updateOneLocal(__spreadProps(__spreadValues({}, transferBankTransaction), {
+    const matchedTransferBankTransactionId = (_b = suggestedMatch == null ? void 0 : suggestedMatch.details) == null ? void 0 : _b.id;
+    const matchedTransferBankTransaction = matchedTransferBankTransactionId ? data == null ? void 0 : data.find(({ id }) => id === matchedTransferBankTransactionId) : void 0;
+    const transactionsToSetProcessing = [
+      __spreadProps(__spreadValues({}, bankTransaction), { processing: true, error: void 0 })
+    ];
+    if (matchedTransferBankTransaction) {
+      transactionsToSetProcessing.push(__spreadProps(__spreadValues({}, matchedTransferBankTransaction), {
         processing: true,
         error: void 0
       }));
     }
+    updateLocalBankTransactions(transactionsToSetProcessing);
     return matchBankTransaction2({
-      bankTransactionId,
+      bankTransactionId: bankTransaction.id,
       match_id: suggestedMatchId,
       type: "Confirm_Match"
     }).then((match) => {
-      const matchedTransaction = data == null ? void 0 : data.find(({ id }) => id === match.bank_transaction.id);
-      if (matchedTransaction) {
-        updateOneLocal(__spreadProps(__spreadValues({}, matchedTransaction), {
+      const transactionsToUpdate = [
+        __spreadProps(__spreadValues({}, bankTransaction), {
           categorization_status: CategorizationStatus.MATCHED,
           match,
           processing: false,
           recently_categorized: true
-        }));
-      }
-      const matchedTransferTransaction = data == null ? void 0 : data.find(
-        ({ id, suggested_matches }) => id !== bankTransactionId && (suggested_matches == null ? void 0 : suggested_matches.some(({ id: id2 }) => id2 === suggestedMatchId))
-      );
-      if (matchedTransferTransaction) {
-        updateOneLocal(__spreadProps(__spreadValues({}, matchedTransferTransaction), {
+        })
+      ];
+      if (matchedTransferBankTransaction) {
+        transactionsToUpdate.push(__spreadProps(__spreadValues({}, matchedTransferBankTransaction), {
+          categorization_status: CategorizationStatus.MATCHED,
+          match,
           processing: false,
           recently_categorized: true
         }));
       }
+      updateLocalBankTransactions(transactionsToUpdate);
       if (notify) {
         addToast({ content: "Transaction saved" });
       }
     }).catch((error) => {
-      const targetedTransaction = data == null ? void 0 : data.find(({ id }) => id === bankTransactionId);
-      if (targetedTransaction) {
-        updateOneLocal(__spreadProps(__spreadValues({}, targetedTransaction), {
+      const transactionsToResetProcessing = [
+        __spreadProps(__spreadValues({}, bankTransaction), {
           error: error instanceof Error ? error.message : "An unknown error occurred",
           processing: false
+        })
+      ];
+      if (matchedTransferBankTransaction) {
+        transactionsToResetProcessing.push(__spreadProps(__spreadValues({}, matchedTransferBankTransaction), {
+          error: void 0,
+          processing: false
         }));
       }
+      updateLocalBankTransactions(transactionsToResetProcessing);
     }).finally(() => {
-      var _a2;
-      (_a2 = eventCallbacks == null ? void 0 : eventCallbacks.onTransactionCategorized) == null ? void 0 : _a2.call(eventCallbacks);
+      var _a3;
+      (_a3 = eventCallbacks == null ? void 0 : eventCallbacks.onTransactionCategorized) == null ? void 0 : _a3.call(eventCallbacks);
     });
   });
   const shouldHideAfterCategorize = () => {
     return (filters == null ? void 0 : filters.categorizationStatus) === DisplayState.review;
   };
-  const removeAfterCategorize = (bankTransaction) => {
+  const removeAfterCategorize = (transactionIds) => {
     if (shouldHideAfterCategorize()) {
       const updatedData = rawResponseData == null ? void 0 : rawResponseData.map((page) => {
         var _a2;
         return __spreadProps(__spreadValues({}, page), {
-          data: (_a2 = page.data) == null ? void 0 : _a2.filter((bt) => bt.id !== bankTransaction.id)
+          data: (_a2 = page.data) == null ? void 0 : _a2.filter((bt) => !transactionIds.includes(bt.id))
         });
       });
       void mutate(updatedData, { revalidate: false });
@@ -6493,7 +6510,7 @@ const useAugmentedBankTransactions = (params) => {
     isError: !!responseError,
     categorize: categorizeWithOptimisticUpdate,
     match: matchWithOptimisticUpdate,
-    updateOneLocal,
+    updateLocalBankTransactions,
     shouldHideAfterCategorize,
     removeAfterCategorize,
     display,
@@ -7861,7 +7878,7 @@ const getBookkeepingStatus = get$1(({ businessId }) => {
 });
 const BOOKKEEPING_TAG_KEY = "#bookkeeping";
 const BOOKKEEPING_STATUS_TAG_KEY = "#bookkeeping-status";
-function buildKey$V({
+function buildKey$Z({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -7879,7 +7896,7 @@ function useBookkeepingStatus() {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
   return useSWR(
-    () => buildKey$V(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$Z(__spreadProps(__spreadValues({}, auth), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }) => getBookkeepingStatus(
@@ -7919,6 +7936,50 @@ function isCategorizationEnabledForStatus(status) {
     }
   }
 }
+const CATEGORIES_TAG_KEY = "#categories";
+function buildKey$Y({
+  access_token: accessToken,
+  apiUrl,
+  businessId,
+  mode
+}) {
+  if (accessToken && apiUrl) {
+    return {
+      accessToken,
+      apiUrl,
+      businessId,
+      mode,
+      tags: [CATEGORIES_TAG_KEY]
+    };
+  }
+}
+const getCategories = get$1(({ businessId, mode }) => {
+  const parameters = toDefinedSearchParameters({ mode });
+  return `/v1/businesses/${businessId}/categories?${parameters}`;
+});
+function useCategories({ mode } = {}) {
+  const { data: auth } = useAuth();
+  const { businessId } = useLayerContext();
+  return useSWR(
+    () => buildKey$Y(__spreadProps(__spreadValues({}, auth), {
+      businessId,
+      mode
+    })),
+    ({ accessToken, apiUrl, businessId: businessId2, mode: mode2 }) => getCategories(
+      apiUrl,
+      accessToken,
+      {
+        params: {
+          businessId: businessId2,
+          mode: mode2
+        }
+      }
+    )().then(({ data }) => effect.Schema.decodeUnknownPromise(CategoryListSchema)(data)).then((categoryList) => categoryList.categories)
+  );
+}
+function usePreloadCategories(options2) {
+  useCategories(options2);
+}
 const useElementSize = (callback) => {
   const ref = react.useRef(null);
   const resizeTimeout = react.useRef(null);
@@ -8046,15 +8107,15 @@ const BankTransactionsContext = react.createContext({
   isError: false,
   refetch: () => {
   },
-  categorize: () => Promise.resolve(void 0),
-  match: () => Promise.resolve(void 0),
+  categorize: () => Promise.resolve(),
+  match: () => Promise.resolve(),
   metadata: {
     pagination: {
       cursor: void 0,
       has_more: false
     }
   },
-  updateOneLocal: () => void 0,
+  updateLocalBankTransactions: () => void 0,
   shouldHideAfterCategorize: () => false,
   removeAfterCategorize: () => void 0,
   display: DisplayState.review,
@@ -8337,7 +8398,7 @@ const useBusinessActivationDate = () => {
   const { business } = useLayerContext();
   return react.useMemo(() => getActivationDate(business), [business]);
 };
-function buildKey$U({
+function buildKey$X({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -8355,7 +8416,7 @@ function useBankTransactionsDownload() {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   return useSWRMutation(
-    () => buildKey$U(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$X(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
     ({
@@ -8513,7 +8574,7 @@ const BulkCategorizeRequestSchema = effect.Schema.Struct({
   transactions: effect.Schema.Array(CategorizeTransactionRequestSchema$1)
 });
 const bulkCategorize = post(({ businessId }) => `/v1/businesses/${businessId}/bank-transactions/bulk-categorize`);
-function buildKey$T({
+function buildKey$W({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -8532,7 +8593,7 @@ const useBulkCategorize = () => {
   const { businessId, eventCallbacks } = useLayerContext();
   const { forceReloadBankTransactions } = useBankTransactionsGlobalCacheActions();
   const mutationResponse = useSWRMutation(
-    () => buildKey$T(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$W(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, { arg }) => bulkCategorize(
@@ -8802,50 +8863,6 @@ const Span = react.forwardRef(
     );
   }
 );
-const CATEGORIES_TAG_KEY = "#categories";
-function buildKey$S({
-  access_token: accessToken,
-  apiUrl,
-  businessId,
-  mode
-}) {
-  if (accessToken && apiUrl) {
-    return {
-      accessToken,
-      apiUrl,
-      businessId,
-      mode,
-      tags: [CATEGORIES_TAG_KEY]
-    };
-  }
-}
-const getCategories = get$1(({ businessId, mode }) => {
-  const parameters = toDefinedSearchParameters({ mode });
-  return `/v1/businesses/${businessId}/categories?${parameters}`;
-});
-function useCategories({ mode } = {}) {
-  const { data: auth } = useAuth();
-  const { businessId } = useLayerContext();
-  return useSWR(
-    () => buildKey$S(__spreadProps(__spreadValues({}, auth), {
-      businessId,
-      mode
-    })),
-    ({ accessToken, apiUrl, businessId: businessId2, mode: mode2 }) => getCategories(
-      apiUrl,
-      accessToken,
-      {
-        params: {
-          businessId: businessId2,
-          mode: mode2
-        }
-      }
-    )().then(({ data }) => effect.Schema.decodeUnknownPromise(CategoryListSchema)(data)).then((categoryList) => categoryList.categories)
-  );
-}
-function usePreloadCategories(options2) {
-  useCategories(options2);
-}
 const Check = (_R) => {
   var _S = _R, { size = 18 } = _S, props = __objRest(_S, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -8902,7 +8919,7 @@ function buildCustomGroupHeading({
     const defaultRenderedGroupHeading = react.useMemo(() => /* @__PURE__ */ jsxRuntime.jsx(Header$2, { size: "xs", variant: "subtle", children }), [children]);
     const content = GroupHeading ? /* @__PURE__ */ jsxRuntime.jsx(GroupHeading, { group: restProps.data, fallback: defaultRenderedGroupHeading }) : defaultRenderedGroupHeading;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Select$1.components.GroupHeading,
+      ReactSelect.components.GroupHeading,
       __spreadProps(__spreadValues({}, restProps), {
         className: COMBO_BOX_CLASS_NAMES.GROUP_HEADING,
         children: content
@@ -8927,7 +8944,7 @@ function buildCustomComboBoxOption({
       /* @__PURE__ */ jsxRuntime.jsx(Span, { variant: "inherit", children })
     ] }), [children]);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Select$1.components.Option,
+      ReactSelect.components.Option,
       __spreadProps(__spreadValues({}, restProps), {
         className: classNames(
           COMBO_BOX_CLASS_NAMES.OPTION,
@@ -8949,7 +8966,7 @@ function buildCustomClearIndicator() {
       "children"
     ]);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Select$1.components.ClearIndicator,
+      ReactSelect.components.ClearIndicator,
       __spreadProps(__spreadValues({}, restProps), {
         className: COMBO_BOX_CLASS_NAMES.CLEAR_INDICATOR,
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
@@ -8971,10 +8988,10 @@ function buildCustomDropdownIndicator() {
     ]);
     const { isDisabled } = restProps;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Select$1.components.DropdownIndicator,
+      ReactSelect.components.DropdownIndicator,
       __spreadProps(__spreadValues({}, restProps), {
         className: COMBO_BOX_CLASS_NAMES.DROPDOWN_INDICATOR,
-        children: !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
+        children: !isDisabled ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
       })
     );
   };
@@ -8987,7 +9004,7 @@ function buildCustomNoOptionsMessage({ EmptyMessage }) {
       "children"
     ]);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Select$1.components.NoOptionsMessage,
+      ReactSelect.components.NoOptionsMessage,
       __spreadProps(__spreadValues({}, restProps), {
         className: COMBO_BOX_CLASS_NAMES.NO_OPTIONS_MESSAGE,
         children: EmptyMessage != null ? EmptyMessage : /* @__PURE__ */ jsxRuntime.jsx(Span, { children: "No matching options" })
@@ -9004,7 +9021,7 @@ function buildCustomPlaceholder({ placeholder }) {
     ]);
     if (!placeholder) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Select$1.components.Placeholder,
+      ReactSelect.components.Placeholder,
       __spreadProps(__spreadValues({}, restProps), {
         className: COMBO_BOX_CLASS_NAMES.PLACEHOLDER,
         children: /* @__PURE__ */ jsxRuntime.jsx(Span, { variant: "placeholder", ellipsis: true, children: placeholder })
@@ -9020,7 +9037,7 @@ function buildCustomSingleValue({ SelectedValue }) {
       "children"
     ]);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Select$1.components.SingleValue,
+      ReactSelect.components.SingleValue,
       __spreadProps(__spreadValues({}, restProps), {
         children: SelectedValue != null ? SelectedValue : children
       })
@@ -9036,7 +9053,7 @@ function buildCustomMenuPortal() {
     ]);
     const dataProperties = toDataProperties({ "react-aria-top-layer": true });
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Select$1.components.MenuPortal,
+      ReactSelect.components.MenuPortal,
       __spreadProps(__spreadValues({}, restProps), {
         innerProps: dataProperties,
         children
@@ -9111,7 +9128,7 @@ function ComboBox(_T) {
   const CustomDropdownIndicatorRef = react.useRef(buildCustomDropdownIndicator());
   return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", fluid: true, className: className ? `${className}__Container` : void 0, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      Select$1,
+      ReactSelect,
       __spreadProps(__spreadValues({
         inputId: effectiveInputId
       }, ariaProps), {
@@ -10423,7 +10440,7 @@ const BankTransactionsCategorizeAllModal = ({
   const { selectedIds } = useSelectedIds();
   const { clearSelection } = useBulkSelectionActions();
   const [selectedCategory, setSelectedCategory] = react.useState(null);
-  const { trigger } = useBulkCategorize();
+  const { trigger, isMutating } = useBulkCategorize();
   const handleCategorizeModalClose = react.useCallback((isOpen2) => {
     onOpenChange(isOpen2);
     if (!isOpen2) {
@@ -10459,7 +10476,7 @@ const BankTransactionsCategorizeAllModal = ({
       title: mode === "Categorize" ? "Categorize all selected transactions?" : "Recategorize all selected transactions?",
       content: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: categorySelectId, children: "Select category" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { size: "sm", htmlFor: categorySelectId, children: "Select category" }),
           useCategorySelectDrawer ? /* @__PURE__ */ jsxRuntime.jsx(
             CategorySelectDrawerWithTrigger,
             {
@@ -10474,7 +10491,8 @@ const BankTransactionsCategorizeAllModal = ({
               inputId: categorySelectId,
               selectedValue: selectedCategory,
               onSelectedValueChange: setSelectedCategory,
-              includeSuggestedMatches: false
+              includeSuggestedMatches: false,
+              isDisabled: isMutating
             }
           )
         ] }),
@@ -10523,7 +10541,7 @@ const bulkMatchOrCategorize = post(
     return `/v1/businesses/${businessId}/bank-transactions/bulk-match-or-categorize?${parameters}`;
   }
 );
-function buildKey$R({
+function buildKey$V({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -10548,7 +10566,7 @@ const useBulkMatchOrCategorize = () => {
     return { transactions };
   }, [selectedIds, transactionCategories]);
   const mutationResponse = useSWRMutation(
-    () => buildKey$R(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$V(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, { arg }) => bulkMatchOrCategorize(
@@ -10618,7 +10636,7 @@ const BulkUncategorizeRequestSchema = effect.Schema.Struct({
   )
 });
 const bulkUncategorize = post(({ businessId }) => `/v1/businesses/${businessId}/bank-transactions/bulk-uncategorize`);
-function buildKey$Q({
+function buildKey$U({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -10637,7 +10655,7 @@ const useBulkUncategorize = () => {
   const { businessId, eventCallbacks } = useLayerContext();
   const { forceReloadBankTransactions } = useBankTransactionsGlobalCacheActions();
   const mutationResponse = useSWRMutation(
-    () => buildKey$Q(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$U(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, { arg }) => bulkUncategorize(
@@ -11041,7 +11059,7 @@ const mapRawCustomAccountToCustomAccount = (raw) => ({
   userCreated: raw.user_created
 });
 const CUSTOM_ACCOUNTS_TAG_KEY = "#custom-accounts";
-function buildKey$P({
+function buildKey$T({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -11068,7 +11086,7 @@ function useCustomAccounts({ userCreated } = {}) {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   return useSWR(
-    () => buildKey$P(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$T(__spreadProps(__spreadValues({}, data), {
       businessId,
       userCreated
     })),
@@ -11081,7 +11099,7 @@ function useCustomAccounts({ userCreated } = {}) {
     )().then(({ data: data2 }) => data2 == null ? void 0 : data2.custom_accounts.map((account) => mapRawCustomAccountToCustomAccount(account)))
   );
 }
-function buildKey$O({
+function buildKey$S({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -11114,7 +11132,7 @@ function useCustomAccountParseCsv() {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   return useSWRMutation(
-    () => buildKey$O(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$S(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, { arg: { customAccountId, file } }) => parseCsv(
@@ -11359,7 +11377,7 @@ function flattenValidationErrors(errors) {
   );
 }
 const createCustomAccount = post(({ businessId }) => `/v1/businesses/${businessId}/custom-accounts`);
-function buildKey$N({
+function buildKey$R({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -11378,7 +11396,7 @@ function useCreateCustomAccount() {
   const { businessId } = useLayerContext();
   const { mutate } = useSWR.useSWRConfig();
   const mutationResponse = useSWRMutation(
-    () => buildKey$N(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$R(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, { arg: body }) => createCustomAccount(
@@ -11915,10 +11933,63 @@ function FormNumberField({
     })
   );
 }
+const SWITCH_CLASS_NAME = "Layer__UI__Switch";
+const Switch = react.forwardRef((_Va, ref) => {
+  var _Wa = _Va, {
+    children,
+    className
+  } = _Wa, props = __objRest(_Wa, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Switch,
+    __spreadProps(__spreadValues({}, props), {
+      className: classNames(SWITCH_CLASS_NAME, className),
+      ref,
+      children: withRenderProp(children, (node) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "indicator" }),
+        node
+      ] }))
+    })
+  );
+});
+Switch.displayName = "Switch";
+const FORM_SWITCH_FIELD_CLASSNAME = "Layer__FormSwitchField";
+function FormSwitchField({
+  label,
+  className,
+  inline = false,
+  showLabel = true,
+  isReadOnly = false
+}) {
+  const field = useFieldContext();
+  const { name, state, handleChange } = field;
+  const { value } = state;
+  const additionalAriaProps = !showLabel && { "aria-label": label };
+  const switchClassNames = classNames(
+    FORM_SWITCH_FIELD_CLASSNAME,
+    inline && `${FORM_SWITCH_FIELD_CLASSNAME}--inline`,
+    className
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Switch,
+    __spreadProps(__spreadValues({
+      className: switchClassNames,
+      isSelected: value,
+      onChange: handleChange,
+      name,
+      isReadOnly,
+      slot: "switch"
+    }, additionalAriaProps), {
+      children: showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { slot: "label", size: "sm", htmlFor: name, children: label })
+    })
+  );
+}
 const TEXTAREA_CLASS_NAME = "Layer__UI__TextArea";
 const TextArea = react.forwardRef(
-  function TextArea2(_Va, ref) {
-    var _Wa = _Va, { resize = "none" } = _Wa, restProps = __objRest(_Wa, ["resize"]);
+  function TextArea2(_Xa, ref) {
+    var _Ya = _Xa, { resize = "none" } = _Ya, restProps = __objRest(_Ya, ["resize"]);
     const dataProperties = toDataProperties({ resize });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.TextArea,
@@ -11929,8 +12000,8 @@ const TextArea = react.forwardRef(
     );
   }
 );
-function FormTextAreaField(_Xa) {
-  var _Ya = _Xa, { placeholder } = _Ya, props = __objRest(_Ya, ["placeholder"]);
+function FormTextAreaField(_Za) {
+  var __a = _Za, { placeholder } = __a, props = __objRest(__a, ["placeholder"]);
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
@@ -11950,8 +12021,8 @@ function FormTextAreaField(_Xa) {
     }
   ) }));
 }
-function FormTextField(_Za) {
-  var __a = _Za, { placeholder } = __a, props = __objRest(__a, ["placeholder"]);
+function FormTextField(_$a) {
+  var _ab = _$a, { placeholder } = _ab, props = __objRest(_ab, ["placeholder"]);
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
@@ -11979,6 +12050,7 @@ const { useAppForm: useRawAppForm } = reactForm.createFormHook({
     FormCheckboxField,
     FormDateField,
     FormNumberField,
+    FormSwitchField,
     FormTextAreaField,
     FormTextField
   },
@@ -12039,13 +12111,13 @@ const useCustomAccountForm = ({ onSuccess }) => {
   const isFormValid = reactForm.useStore(form.store, (state) => state.isValid);
   return { form, submitError, isFormValid };
 };
-const Input = (_$a) => {
-  var _ab = _$a, {
+const Input = (_bb) => {
+  var _cb = _bb, {
     className,
     isInvalid,
     errorMessage,
     leftText
-  } = _ab, props = __objRest(_ab, [
+  } = _cb, props = __objRest(_cb, [
     "className",
     "isInvalid",
     "errorMessage",
@@ -12091,8 +12163,8 @@ const InputGroup = ({
     children
   ] });
 };
-const ChevronDownFill = (_bb) => {
-  var _cb = _bb, { size = 18 } = _cb, props = __objRest(_cb, ["size"]);
+const ChevronDownFill = (_db) => {
+  var _eb = _db, { size = 18 } = _eb, props = __objRest(_eb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -12117,6 +12189,21 @@ const ChevronDownFill = (_bb) => {
     })
   );
 };
+const SelectMenuPortal = (_fb) => {
+  var _gb = _fb, {
+    children
+  } = _gb, restProps = __objRest(_gb, [
+    "children"
+  ]);
+  const dataProperties = toDataProperties({ "react-aria-top-layer": true });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ReactSelect.components.MenuPortal,
+    __spreadProps(__spreadValues({}, restProps), {
+      innerProps: dataProperties,
+      children
+    })
+  );
+};
 const Select = ({
   name,
   options: options2,
@@ -12137,10 +12224,10 @@ const Select = ({
     isInvalid ? "Layer__select--error" : "",
     className
   );
-  const DropdownIndicator = react.useCallback((props) => /* @__PURE__ */ jsxRuntime.jsx(Select$1.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownFill, {}) })), []);
+  const DropdownIndicator = react.useCallback((props) => /* @__PURE__ */ jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownFill, {}) })), []);
   return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { disabled: !isInvalid || !errorMessage, children: [
     /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Select$1,
+      ReactSelect,
       {
         inputId,
         name,
@@ -12153,7 +12240,7 @@ const Select = ({
         onChange: (newValue) => newValue && onChange(newValue),
         menuPortalTarget: document.body,
         styles: { menuPortal: (base) => __spreadProps(__spreadValues({}, base), { zIndex: 9999 }) },
-        components: { DropdownIndicator },
+        components: { DropdownIndicator, MenuPortal: SelectMenuPortal },
         isLoading,
         isDisabled: disabled
       }
@@ -12161,8 +12248,8 @@ const Select = ({
     /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
   ] });
 };
-const ErrorText = (_db) => {
-  var _eb = _db, { className } = _eb, props = __objRest(_eb, ["className"]);
+const ErrorText = (_hb) => {
+  var _ib = _hb, { className } = _ib, props = __objRest(_ib, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(Text, __spreadProps(__spreadValues({}, props), { status: "error", className }));
 };
 const accountTypeOptions = [
@@ -12297,7 +12384,7 @@ const CreatableSelect = ({
     isInvalid ? "Layer__select--error" : "",
     className
   );
-  const DropdownIndicator = react.useCallback((props) => /* @__PURE__ */ jsxRuntime.jsx(Select$1.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownFill, {}) })), []);
+  const DropdownIndicator = react.useCallback((props) => /* @__PURE__ */ jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownFill, {}) })), []);
   return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { disabled: !isInvalid || !errorMessage, children: [
     /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(
       BaseCreatableSelect,
@@ -12316,7 +12403,7 @@ const CreatableSelect = ({
         formatCreateLabel: formatCreateLabel2,
         menuPortalTarget: document.body,
         styles: { menuPortal: (base) => __spreadProps(__spreadValues({}, base), { zIndex: 9999 }) },
-        components: { DropdownIndicator },
+        components: { DropdownIndicator, MenuPortal: SelectMenuPortal },
         isLoading,
         isDisabled: disabled,
         isClearable,
@@ -12501,7 +12588,7 @@ function UploadTransactionsUploadCsvStep({ selectedAccount, onSelectAccount, sel
 const createCustomAccountTransactions = post(
   ({ businessId, customAccountId }) => `/v1/businesses/${businessId}/custom-accounts/${customAccountId}/transactions`
 );
-function buildKey$M({
+function buildKey$Q({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -12520,7 +12607,7 @@ function useCreateCustomAccountTransactions() {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   return useSWRMutation(
-    () => buildKey$M(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$Q(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, _a) => {
@@ -13020,8 +13107,8 @@ const BulkActionsModule = ({ slots }) => {
     /* @__PURE__ */ jsxRuntime.jsx(slots.BulkActions, {})
   ] });
 };
-const DownloadCloud = (_fb) => {
-  var _gb = _fb, { size = 18 } = _gb, props = __objRest(_gb, ["size"]);
+const DownloadCloud = (_jb) => {
+  var _kb = _jb, { size = 18 } = _kb, props = __objRest(_kb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -13273,8 +13360,8 @@ function MonthCalendar({
 const POPOVER_CLASS_NAME = "Layer__Popover";
 const POPOVER_CLASS_NAMES = `Layer__Portal ${POPOVER_CLASS_NAME}`;
 const Popover = react.forwardRef(
-  function Popover2(_hb, ref) {
-    var _ib = _hb, { flexInline = false } = _ib, restProps = __objRest(_ib, ["flexInline"]);
+  function Popover2(_lb, ref) {
+    var _mb = _lb, { flexInline = false } = _mb, restProps = __objRest(_mb, ["flexInline"]);
     const dataProperties = toDataProperties({ "flex-inline": flexInline });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Popover,
@@ -13671,8 +13758,8 @@ const BankTransactionsHeader = ({
     }
   );
 };
-const Inbox = (_jb) => {
-  var _kb = _jb, { size = 18 } = _kb, props = __objRest(_kb, ["size"]);
+const Inbox = (_nb) => {
+  var _ob = _nb, { size = 18 } = _ob, props = __objRest(_ob, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -13756,7 +13843,7 @@ function BankTransactionsTableEmptyStates({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__table-state-container", children: StateComponent });
 }
 const REJECT_CATEGORIZATION_RULE_SUGGESTION_TAG = "#reject-categorization-rule-suggestion";
-function buildKey$L({
+function buildKey$P({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -13777,7 +13864,7 @@ function useRejectCategorizationRulesUpdateSuggestion() {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
   const mutationResponse = useSWRMutation(
-    () => buildKey$L({
+    () => buildKey$P({
       access_token: auth == null ? void 0 : auth.access_token,
       apiUrl: auth == null ? void 0 : auth.apiUrl,
       businessId
@@ -13996,7 +14083,7 @@ function useCategorizationRulesGlobalCacheActions() {
   return { patchCategorizationRuleByKey, forceReloadCategorizationRules };
 }
 const CREATE_CATEGORIZATION_RULE_TAG = "#create-categorization-rule";
-function buildKey$K({
+function buildKey$O({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -14024,7 +14111,7 @@ function useCreateCategorizationRule() {
   const { invalidatePnlDetailLines } = usePnlDetailLinesInvalidator();
   const { forceReloadCategorizationRules } = useCategorizationRulesGlobalCacheActions();
   const mutationResponse = useSWRMutation(
-    () => buildKey$K({
+    () => buildKey$O({
       access_token: auth == null ? void 0 : auth.access_token,
       apiUrl: auth == null ? void 0 : auth.apiUrl,
       businessId
@@ -14154,8 +14241,8 @@ function asMutable(a) {
 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(
-  (_lb, ref) => {
-    var _mb = _lb, { children, className } = _mb, restProps = __objRest(_mb, ["children", "className"]);
+  (_pb, ref) => {
+    var _qb = _pb, { children, className } = _qb, restProps = __objRest(_qb, ["children", "className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Table,
       __spreadProps(__spreadValues({
@@ -14168,8 +14255,8 @@ const Table$1 = react.forwardRef(
   }
 );
 Table$1.displayName = "Table";
-const TableHeaderInner = (_nb, ref) => {
-  var _ob = _nb, { children, className, hideHeader } = _ob, restProps = __objRest(_ob, ["children", "className", "hideHeader"]);
+const TableHeaderInner = (_rb, ref) => {
+  var _sb = _rb, { children, className, hideHeader } = _sb, restProps = __objRest(_sb, ["children", "className", "hideHeader"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.TableHeader,
     __spreadProps(__spreadValues({
@@ -14182,8 +14269,8 @@ const TableHeaderInner = (_nb, ref) => {
 };
 const TableHeader = react.forwardRef(TableHeaderInner);
 TableHeader.displayName = "TableHeader";
-const TableBodyInner = (_pb, ref) => {
-  var _qb = _pb, { children, className } = _qb, restProps = __objRest(_qb, ["children", "className"]);
+const TableBodyInner = (_tb, ref) => {
+  var _ub = _tb, { children, className } = _ub, restProps = __objRest(_ub, ["children", "className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.TableBody,
     __spreadProps(__spreadValues({
@@ -14196,8 +14283,8 @@ const TableBodyInner = (_pb, ref) => {
 };
 const TableBody$1 = react.forwardRef(TableBodyInner);
 TableBody$1.displayName = "TableBody";
-const RowInner = (_rb, ref) => {
-  var _sb = _rb, { children, className, depth = 0 } = _sb, restProps = __objRest(_sb, ["children", "className", "depth"]);
+const RowInner = (_vb, ref) => {
+  var _wb = _vb, { children, className, depth = 0 } = _wb, restProps = __objRest(_wb, ["children", "className", "depth"]);
   const dataProperties = toDataProperties({ depth });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Row,
@@ -14212,8 +14299,8 @@ const RowInner = (_rb, ref) => {
 const Row = react.forwardRef(RowInner);
 Row.displayName = "Row";
 const Column = react.forwardRef(
-  (_tb, ref) => {
-    var _ub = _tb, { children, className, textAlign = "left" } = _ub, restProps = __objRest(_ub, ["children", "className", "textAlign"]);
+  (_xb, ref) => {
+    var _yb = _xb, { children, className, textAlign = "left" } = _yb, restProps = __objRest(_yb, ["children", "className", "textAlign"]);
     const dataProperties = toDataProperties({ "text-align": textAlign });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Column,
@@ -14228,8 +14315,8 @@ const Column = react.forwardRef(
 );
 Column.displayName = "Column";
 const Cell = react.forwardRef(
-  (_vb, ref) => {
-    var _wb = _vb, { children, className } = _wb, restProps = __objRest(_wb, ["children", "className"]);
+  (_zb, ref) => {
+    var _Ab = _zb, { children, className } = _Ab, restProps = __objRest(_Ab, ["children", "className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Cell,
       __spreadProps(__spreadValues({
@@ -14254,7 +14341,7 @@ const DEFAULT_NUM_ROWS = 15;
 const HEADER_HEIGHT = 52;
 const DEFAULT_TABLE_HEIGHT = DEFAULT_ROW_HEIGHT * DEFAULT_NUM_ROWS + HEADER_HEIGHT - 2;
 const CSS_PREFIX = "Layer__UI__VirtualizedTable";
-const EMPTY_ARRAY$3 = [];
+const EMPTY_ARRAY$2 = [];
 const VirtualizedDataTable = ({
   columnConfig,
   data,
@@ -14279,7 +14366,7 @@ const VirtualizedDataTable = ({
   }, [data, height, rowHeight, shrinkHeightToFitRows]);
   const columnHelper = reactTable.createColumnHelper();
   const columns = Object.values(columnConfig);
-  const tableData = data != null ? data : EMPTY_ARRAY$3;
+  const tableData = data != null ? data : EMPTY_ARRAY$2;
   const columnDefs = columns.map((col) => {
     return columnHelper.display({
       id: col.id,
@@ -14570,7 +14657,7 @@ const useSaveBankTransactionRow = () => {
       return;
     }
     if (isSuggestedMatchAsOption(selectedCategory)) {
-      return matchBankTransaction2(bankTransaction.id, selectedCategory.original.id);
+      return matchBankTransaction2(bankTransaction, selectedCategory.original.id);
     }
     if (isSplitAsOption(selectedCategory)) {
       const splitCategorizationRequest = buildCategorizeBankTransactionPayloadForSplit(selectedCategory.original);
@@ -14606,8 +14693,8 @@ function useDelayedVisibility({
   );
   return { isVisible };
 }
-const File = (_xb) => {
-  var _yb = _xb, { size = 12 } = _yb, props = __objRest(_yb, ["size"]);
+const File = (_Bb) => {
+  var _Cb = _Bb, { size = 12 } = _Cb, props = __objRest(_Cb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -14690,14 +14777,14 @@ const variants = {
     }
   }
 };
-const AnimatedPresenceDiv = (_zb) => {
-  var _Ab = _zb, {
+const AnimatedPresenceDiv = (_Db) => {
+  var _Eb = _Db, {
     children,
     variant,
     isOpen,
     slotProps = { AnimatePresence: { initial: false } },
     key
-  } = _Ab, props = __objRest(_Ab, [
+  } = _Eb, props = __objRest(_Eb, [
     "children",
     "variant",
     "isOpen",
@@ -14772,7 +14859,7 @@ const getBookkeepingPeriods = get$1(({ businessId }) => {
   return `/v1/businesses/${businessId}/bookkeeping/periods`;
 });
 const BOOKKEEPING_PERIODS_TAG_KEY = "#bookkeeping-periods";
-function buildKey$J({
+function buildKey$N({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -14793,7 +14880,7 @@ function useBookkeepingPeriods() {
   const { data, isLoading: isLoadingBookkeepingStatus } = useBookkeepingStatus();
   const isActiveOrPaused = data ? isActiveOrPausedBookkeepingStatus(data.status) : false;
   const swrResponse = useSWR(
-    () => buildKey$J(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$N(__spreadProps(__spreadValues({}, auth), {
       businessId,
       isActiveOrPaused
     })),
@@ -14817,8 +14904,8 @@ function useBookkeepingPeriods() {
     }
   });
 }
-const Clock = (_Bb) => {
-  var _Cb = _Bb, { size = 18 } = _Cb, props = __objRest(_Cb, ["size"]);
+const Clock = (_Fb) => {
+  var _Gb = _Fb, { size = 18 } = _Gb, props = __objRest(_Gb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -15144,8 +15231,8 @@ const useSplitsForm = ({
     saveLocalSplitsToCategoryStore
   };
 };
-const ScissorsFullOpen = (_Db) => {
-  var _Eb = _Db, { size = 12 } = _Eb, props = __objRest(_Eb, ["size"]);
+const ScissorsFullOpen = (_Hb) => {
+  var _Ib = _Hb, { size = 12 } = _Ib, props = __objRest(_Ib, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -15210,8 +15297,8 @@ const ScissorsFullOpen = (_Db) => {
     })
   );
 };
-const Trash = (_Fb) => {
-  var _Gb = _Fb, { size = 18 } = _Gb, props = __objRest(_Gb, ["size"]);
+const Trash = (_Jb) => {
+  var _Kb = _Jb, { size = 18 } = _Kb, props = __objRest(_Kb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -15273,7 +15360,7 @@ const useReceipts = ({
   const { businessId } = useLayerContext();
   const { apiUrl } = useEnvironment();
   const { data: auth } = useAuth();
-  const { updateOneLocal: updateBankTransaction } = useBankTransactionsContext();
+  const { updateLocalBankTransactions } = useBankTransactionsContext();
   const [receiptUrls, setReceiptUrls] = react.useState([]);
   react.useEffect(() => {
     if (isActive && receiptUrls.length === 0 && hasReceipts(bankTransaction)) {
@@ -15329,10 +15416,10 @@ const useReceipts = ({
         documentType: "RECEIPT"
       });
       yield fetchDocuments();
-      if (updateBankTransaction && ((_a = result == null ? void 0 : result.data) == null ? void 0 : _a.id) && (bankTransaction == null ? void 0 : bankTransaction.document_ids) && bankTransaction.document_ids.length === 0) {
-        updateBankTransaction(__spreadProps(__spreadValues({}, bankTransaction), {
+      if (((_a = result == null ? void 0 : result.data) == null ? void 0 : _a.id) && (bankTransaction == null ? void 0 : bankTransaction.document_ids) && bankTransaction.document_ids.length === 0) {
+        updateLocalBankTransactions([__spreadProps(__spreadValues({}, bankTransaction), {
           document_ids: [result.data.id]
-        }));
+        })]);
       }
     } catch (_err) {
       const newReceiptUrls = receipts.map((url) => {
@@ -15406,8 +15493,8 @@ const ReceiptsProvider = ({
   const contextData = useReceipts({ bankTransaction, isActive });
   return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsContext.Provider, { value: contextData, children });
 };
-const Eye = (_Hb) => {
-  var _Ib = _Hb, { size = 18 } = _Ib, props = __objRest(_Ib, ["size"]);
+const Eye = (_Lb) => {
+  var _Mb = _Lb, { size = 18 } = _Mb, props = __objRest(_Mb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -15543,11 +15630,11 @@ const FileThumb = ({
     }
   );
 };
-const TextButton = (_Jb) => {
-  var _Kb = _Jb, {
+const TextButton = (_Nb) => {
+  var _Ob = _Nb, {
     className,
     children
-  } = _Kb, props = __objRest(_Kb, [
+  } = _Ob, props = __objRest(_Ob, [
     "className",
     "children"
   ]);
@@ -15631,8 +15718,8 @@ const openReceiptInNewTab = (url, index2) => (e) => {
       `);
   }
 };
-const BankTransactionReceiptsWithProvider = react.forwardRef((_Lb, ref) => {
-  var _Mb = _Lb, { bankTransaction, isActive } = _Mb, props = __objRest(_Mb, ["bankTransaction", "isActive"]);
+const BankTransactionReceiptsWithProvider = react.forwardRef((_Pb, ref) => {
+  var _Qb = _Pb, { bankTransaction, isActive } = _Qb, props = __objRest(_Qb, ["bankTransaction", "isActive"]);
   return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsProvider, { bankTransaction, isActive, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionReceipts, __spreadProps(__spreadValues({}, props), { ref })) });
 });
 BankTransactionReceiptsWithProvider.displayName = "BankTransactionReceiptsWithProvider";
@@ -15799,8 +15886,8 @@ const transformCurrencyValue = (rawValue) => {
   }
   return cleaned;
 };
-const AmountInput = (_Nb) => {
-  var _Ob = _Nb, {
+const AmountInput = (_Rb) => {
+  var _Sb = _Rb, {
     onChange,
     className,
     leftText,
@@ -15808,7 +15895,7 @@ const AmountInput = (_Nb) => {
     isInvalid,
     badge,
     placeholder = "$0.00"
-  } = _Ob, props = __objRest(_Ob, [
+  } = _Sb, props = __objRest(_Sb, [
     "onChange",
     "className",
     "leftText",
@@ -16128,7 +16215,7 @@ const ToggleOption = ({
   ] });
 };
 const GET_BANK_TRANSACTION_METADATA_TAG_KEY = "#bank-transaction-metadata";
-function buildKey$I({
+function buildKey$M({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -16148,7 +16235,7 @@ function useBankTransactionMetadata({ bankTransactionId }) {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
   return useSWR(
-    () => buildKey$I(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$M(__spreadProps(__spreadValues({}, auth), {
       businessId,
       bankTransactionId
     })),
@@ -16160,7 +16247,25 @@ function useBankTransactionMetadata({ bankTransactionId }) {
   );
 }
 const UPDATE_BANK_TRANSACTION_METADATA_TAG_KEY = "#update-bank-transaction-metadata";
-function buildKey$H({
+class UpdateBankTransactionMetadataSWRResponse {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get data() {
+    return this.swrResponse.data;
+  }
+  get trigger() {
+    return this.swrResponse.trigger;
+  }
+  get isMutating() {
+    return this.swrResponse.isMutating;
+  }
+  get isError() {
+    return this.swrResponse.error !== void 0;
+  }
+}
+function buildKey$L({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -16180,8 +16285,8 @@ function useUpdateBankTransactionMetadata({ bankTransactionId, onSuccess }) {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
   const { mutate } = useSWR.useSWRConfig();
-  const mutationResponse = useSWRMutation(
-    () => buildKey$H({
+  const rawMutationResponse = useSWRMutation(
+    () => buildKey$L({
       access_token: auth == null ? void 0 : auth.access_token,
       apiUrl: auth == null ? void 0 : auth.apiUrl,
       businessId,
@@ -16206,6 +16311,7 @@ function useUpdateBankTransactionMetadata({ bankTransactionId, onSuccess }) {
       throwOnError: false
     }
   );
+  const mutationResponse = new UpdateBankTransactionMetadataSWRResponse(rawMutationResponse);
   const { trigger: originalTrigger } = mutationResponse;
   const stableProxiedTrigger = react.useCallback(
     (...triggerParameters) => __async(null, null, function* () {
@@ -16231,28 +16337,44 @@ function useUpdateBankTransactionMetadata({ bankTransactionId, onSuccess }) {
   });
 }
 const useBankTransactionMemo = ({ bankTransactionId }) => {
-  const { trigger: updateBankTransactionMetadata2 } = useUpdateBankTransactionMetadata({ bankTransactionId });
-  const { data: bankTransactionMetadata } = useBankTransactionMetadata({ bankTransactionId });
+  const {
+    trigger: updateBankTransactionMetadata2,
+    isMutating: isUpdatingMemo,
+    isError: isErrorUpdatingMemo,
+    data: updateResult
+  } = useUpdateBankTransactionMetadata({ bankTransactionId });
+  const { data: bankTransactionMetadata, mutate: mutateBankTransactionMetadata } = useBankTransactionMetadata({ bankTransactionId });
   const form = reactForm.useForm({
     defaultValues: {
       memo: bankTransactionMetadata == null ? void 0 : bankTransactionMetadata.memo
     },
     onSubmit: (_0) => __async(null, [_0], function* ({ value }) {
-      var _a;
+      var _a, _b;
       if (value.memo !== void 0 && form.state.isDirty) {
-        yield updateBankTransactionMetadata2({ memo: (_a = value.memo) != null ? _a : "" });
-        form.reset(value);
+        const result = yield mutateBankTransactionMetadata(
+          updateBankTransactionMetadata2({ memo: (_a = value.memo) != null ? _a : "" }),
+          { optimisticData: { memo: (_b = value.memo) != null ? _b : "" }, revalidate: false }
+        );
+        if (result !== void 0) {
+          form.reset(value);
+        }
       }
     })
   });
-  return form;
+  const isSaved = !isUpdatingMemo && !isErrorUpdatingMemo && updateResult !== void 0 && !form.state.isDirty;
+  return react.useMemo(() => ({
+    form,
+    isUpdatingMemo,
+    isErrorUpdatingMemo,
+    isSaved
+  }), [form, isErrorUpdatingMemo, isUpdatingMemo, isSaved]);
 };
-const Textarea = (_Pb) => {
-  var _Qb = _Pb, {
+const Textarea = (_Tb) => {
+  var _Ub = _Tb, {
     className,
     isInvalid,
     errorMessage
-  } = _Qb, props = __objRest(_Qb, [
+  } = _Ub, props = __objRest(_Ub, [
     "className",
     "isInvalid",
     "errorMessage"
@@ -16268,24 +16390,26 @@ const Textarea = (_Pb) => {
   ] });
 };
 const BankTransactionMemo = ({ bankTransactionId }) => {
-  const form = useBankTransactionMemo({ bankTransactionId });
+  const { form, isUpdatingMemo, isErrorUpdatingMemo, isSaved } = useBankTransactionMemo({ bankTransactionId });
   return /* @__PURE__ */ jsxRuntime.jsx("form", { onBlur: () => void form.handleSubmit(), children: /* @__PURE__ */ jsxRuntime.jsx(form.Field, { name: "memo", children: (field) => {
     var _a;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      InputGroup,
-      {
-        name: "memo",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Textarea,
-          {
-            name: "memo",
-            placeholder: "Add description",
-            value: (_a = field.state.value) != null ? _a : void 0,
-            onChange: (e) => field.handleChange(e.target.value)
-          }
-        )
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "baseline", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "memo", size: "sm", weight: "bold", children: "Description" }),
+        isUpdatingMemo && /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", variant: "subtle", children: "Saving..." }),
+        !isUpdatingMemo && isSaved && /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", status: "success", children: "Saved" }),
+        !isUpdatingMemo && !isSaved && isErrorUpdatingMemo && /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", status: "error", children: "Error saving" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Textarea,
+        {
+          name: "memo",
+          placeholder: "Add description",
+          value: (_a = field.state.value) != null ? _a : void 0,
+          onChange: (e) => field.handleChange(e.target.value)
+        }
+      )
+    ] });
   } }) });
 };
 const range$1 = (start, end) => {
@@ -16343,7 +16467,7 @@ function useMinMutatingMutation({
   });
 }
 const SET_METADATA_ON_BANK_TRANSACTION_TAG_KEY = "#set-metadata-on-bank-transaction";
-function buildKey$G({
+function buildKey$K({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -16369,7 +16493,7 @@ function useSetMetadataOnBankTransaction({
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const mutationResponse = useSWRMutation(
-    () => buildKey$G(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$K(__spreadProps(__spreadValues({}, data), {
       businessId,
       bankTransactionId
     })),
@@ -16952,7 +17076,7 @@ function BankTransactionCustomerVendorVisibilityProvider({
 }
 const REMOVE_TAG_FROM_BANK_TRANSACTION_TAG_KEY = "#remove-tag-from-bank-transaction";
 const removeTagFromBankTransaction = del(({ businessId }) => `/v1/businesses/${businessId}/bank-transactions/tags`);
-function buildKey$F({
+function buildKey$J({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -16972,7 +17096,7 @@ function useRemoveTagFromBankTransaction({ bankTransactionId }) {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const mutationResponse = useSWRMutation(
-    () => buildKey$F(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$J(__spreadProps(__spreadValues({}, data), {
       businessId,
       bankTransactionId
     })),
@@ -17031,7 +17155,7 @@ function useRemoveTagFromBankTransaction({ bankTransactionId }) {
 }
 const TAG_BANK_TRANSACTION_TAG_KEY = "#tag-bank-transaction";
 const tagBankTransaction = post(({ businessId }) => `/v1/businesses/${businessId}/bank-transactions/tags`);
-function buildKey$E({
+function buildKey$I({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -17051,7 +17175,7 @@ function useTagBankTransaction({ bankTransactionId }) {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const mutationResponse = useSWRMutation(
-    () => buildKey$E(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$I(__spreadProps(__spreadValues({}, data), {
       businessId,
       bankTransactionId
     })),
@@ -17166,7 +17290,7 @@ const FallbackWithSkeletonLoader = ({
   return children;
 };
 const TAG_DIMENSION_BY_KEY_TAG_KEY = "#tag-dimension-by-key";
-function buildKey$D({
+function buildKey$H({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -17210,7 +17334,7 @@ function useTagDimensionByKey({ isEnabled = true, dimensionKey }) {
   const { apiUrl } = useEnvironment();
   const { businessId } = useLayerContext();
   const swrResponse = useSWR(
-    () => buildKey$D(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$H(__spreadProps(__spreadValues({}, auth), {
       apiUrl,
       isEnabled,
       businessId,
@@ -17425,10 +17549,7 @@ function BankTransactionFormFields({
         isReadOnly
       }
     ),
-    showDescriptions && /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", children: "Description" }),
-      /* @__PURE__ */ jsxRuntime.jsx(BankTransactionMemo, { bankTransactionId: bankTransaction.id })
-    ] })
+    showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionMemo, { bankTransactionId: bankTransaction.id }) })
   ] });
 }
 const ExpandedBankTransactionRow = react.forwardRef(
@@ -17556,7 +17677,7 @@ const ExpandedBankTransactionRow = react.forwardRef(
       if (!foundMatch) {
         return;
       }
-      yield matchBankTransaction2(bankTransaction.id, foundMatch.id);
+      yield matchBankTransaction2(bankTransaction, foundMatch.id);
       deselect(bankTransaction.id);
       close2();
     });
@@ -17657,8 +17778,7 @@ const ExpandedBankTransactionRow = react.forwardRef(
                                     onSelectedValueChange: (value) => {
                                       changeCategoryForSplitAtIndex(index2, value);
                                     },
-                                    isLoading: bankTransaction.processing,
-                                    isDisabled: !categorizationEnabled,
+                                    isDisabled: !categorizationEnabled || bankTransaction.processing,
                                     includeSuggestedMatches: false
                                   }
                                 ),
@@ -17837,6 +17957,8 @@ const BankTransactionRow = ({
   const { setTransactionCategory } = useBankTransactionsCategoryActions();
   const { selectedCategory } = useGetBankTransactionCategory(bankTransaction.id);
   const { saveBankTransactionRow } = useSaveBankTransactionRow();
+  const isBeingRemoved = bankTransaction.recently_categorized && shouldHideAfterCategorize();
+  const displayAsCategorized = isBeingRemoved ? false : categorized;
   react.useEffect(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
@@ -17870,7 +17992,7 @@ const BankTransactionRow = ({
   const openClassName = open ? `${className}--expanded` : "";
   const rowClassName = classNames(
     className,
-    bankTransaction.recently_categorized && editable && shouldHideAfterCategorize() ? "Layer__bank-transaction-row--removing" : "",
+    isBeingRemoved && editable ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
     initialLoad ? "initial-load" : "",
     isVisible ? "show" : ""
@@ -17979,12 +18101,12 @@ const BankTransactionRow = ({
                 className: "Layer__bank-transaction__submit-btn",
                 processing: bankTransaction.processing,
                 active: open,
-                action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+                action: displayAsCategorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
                 disabled: selectedCategory === null,
-                children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
+                children: displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
             ),
-            !categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "lg", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
+            !categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "lg", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               IconButton,
               {
@@ -18006,7 +18128,7 @@ const BankTransactionRow = ({
                 variant: "fade",
                 isOpen: categorizationEnabled && !categorized,
                 className: "Layer__BankTransactionRow__CategoryComboBoxMotionContent",
-                slotProps: { AnimatePresence: { mode: "wait" } },
+                slotProps: { AnimatePresence: { mode: "wait", initial: false } },
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   BankTransactionCategoryComboBox,
                   {
@@ -18016,20 +18138,20 @@ const BankTransactionRow = ({
                       setTransactionCategory(bankTransaction.id, selectedCategory2);
                       setShowRetry(false);
                     },
-                    isLoading: bankTransaction.processing
+                    isDisabled: bankTransaction.processing
                   }
                 )
               },
               "category-combobox"
             ),
-            categorized && /* @__PURE__ */ jsxRuntime.jsx(
+            displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx(
               BankTransactionsCategorizedSelectedValue,
               {
                 bankTransaction,
                 className: "Layer__bank-transaction-row__category"
               }
             ),
-            categorizationEnabled && !categorized && showRetry && /* @__PURE__ */ jsxRuntime.jsx(
+            !displayAsCategorized && categorizationEnabled && showRetry && /* @__PURE__ */ jsxRuntime.jsx(
               RetryButton,
               {
                 onClick: () => {
@@ -18043,7 +18165,7 @@ const BankTransactionRow = ({
                 children: "Retry"
               }
             ),
-            !categorized && categorizationEnabled && !showRetry && /* @__PURE__ */ jsxRuntime.jsx(
+            !displayAsCategorized && categorizationEnabled && !showRetry && !isBeingRemoved && /* @__PURE__ */ jsxRuntime.jsx(
               SubmitButton,
               {
                 onClick: () => {
@@ -18055,12 +18177,12 @@ const BankTransactionRow = ({
                 processing: bankTransaction.processing,
                 active: open,
                 disabled: selectedCategory === null,
-                action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
-                children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
+                action: displayAsCategorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+                children: displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
             ),
-            !categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "xs", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            !categorizationEnabled && !displayAsCategorized && !isBeingRemoved && /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "xs", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
+            !isBeingRemoved && /* @__PURE__ */ jsxRuntime.jsx(
               IconButton,
               {
                 onClick: toggleOpen,
@@ -18083,7 +18205,7 @@ const BankTransactionRow = ({
       {
         ref: expandedRowRef,
         bankTransaction,
-        categorized,
+        categorized: displayAsCategorized,
         isOpen: open,
         close: () => setOpen(false),
         containerWidth,
@@ -18189,6 +18311,7 @@ const BankTransactionsListItem = ({
   const bookkeepingStatus = useEffectiveBookkeepingStatus();
   const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
   const categorized = isCategorized(bankTransaction);
+  const displayAsCategorized = bankTransaction.recently_categorized && shouldHideAfterCategorize() ? false : categorized;
   const { isVisible } = useDelayedVisibility({ delay: index2 * 80 });
   const { select, deselect } = useBulkSelectionActions();
   const isSelected = useIdIsSelected();
@@ -18285,7 +18408,7 @@ const BankTransactionsListItem = ({
         }
       )
     ] }),
-    !categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
+    !categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__expanded-row", onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedPresenceDiv, { variant: "expand", isOpen: openExpandedRow, children: /* @__PURE__ */ jsxRuntime.jsx(
       ExpandedBankTransactionRow,
       {
@@ -18293,9 +18416,9 @@ const BankTransactionsListItem = ({
         bankTransaction,
         isOpen: openExpandedRow,
         close: () => setOpenExpandedRow(false),
-        categorized,
+        categorized: displayAsCategorized,
         asListItem: true,
-        submitBtnText: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve",
+        submitBtnText: displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve",
         containerWidth,
         showDescriptions,
         showReceiptUploads,
@@ -18303,7 +18426,7 @@ const BankTransactionsListItem = ({
         variant: "list"
       }
     ) }, `expanded-${bankTransaction.id}`) }),
-    !openExpandedRow && categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", gap: "md", pb: "md", children: [
+    !openExpandedRow && categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", gap: "md", pb: "md", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         BankTransactionCategoryComboBox,
         {
@@ -18313,7 +18436,7 @@ const BankTransactionsListItem = ({
             setTransactionCategory(bankTransaction.id, selectedCategory2);
             setShowRetry(false);
           },
-          isLoading: bankTransaction.processing
+          isDisabled: bankTransaction.processing
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -18323,14 +18446,14 @@ const BankTransactionsListItem = ({
           onClick: handleSave,
           className: showRetry ? "Layer__bank-transaction__retry-btn" : "Layer__bank-transaction__submit-btn",
           processing: bankTransaction.processing,
-          action: !categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+          action: !displayAsCategorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
           withRetry: true,
           error: showRetry ? "Approval failed. Check connection and retry in few seconds." : void 0,
-          children: showRetry ? "Retry" : !categorized ? (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve" : (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update"
+          children: showRetry ? "Retry" : !displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve" : (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update"
         }
       )
     ] }) }),
-    !openExpandedRow && categorized && /* @__PURE__ */ jsxRuntime.jsx(
+    !openExpandedRow && displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx(
       BankTransactionsListItemCategory,
       {
         bankTransaction
@@ -18396,26 +18519,6 @@ const BankTransactionsList = ({
     ) })
   ] });
 };
-const SWITCH_CLASS_NAME = "Layer__Switch";
-const Switch = react.forwardRef((_Rb, ref) => {
-  var _Sb = _Rb, {
-    children
-  } = _Sb, props = __objRest(_Sb, [
-    "children"
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.Switch,
-    __spreadProps(__spreadValues({}, props), {
-      className: SWITCH_CLASS_NAME,
-      ref,
-      children: withRenderProp(children, (node) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "indicator" }),
-        node
-      ] }))
-    })
-  );
-});
-Switch.displayName = "Switch";
 const BankTransactionsMobileBulkActionsHeader = ({
   bankTransactions,
   bulkActionsEnabled,
@@ -18539,8 +18642,8 @@ const BankTransactionsMobileListItemCheckbox = ({
     }
   ) });
 };
-const Paperclip = (_Tb) => {
-  var _Ub = _Tb, { size = 20 } = _Ub, props = __objRest(_Ub, ["size"]);
+const Paperclip = (_Vb) => {
+  var _Wb = _Vb, { size = 20 } = _Wb, props = __objRest(_Wb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -18988,7 +19091,7 @@ const BankTransactionsMobileListMatchForm = ({
     if (!foundMatch) {
       return;
     }
-    yield matchBankTransaction2(bankTransaction.id, foundMatch.id, true);
+    yield matchBankTransaction2(bankTransaction, foundMatch.id, true);
   });
   const save = () => {
     var _a2;
@@ -19424,6 +19527,7 @@ const BankTransactionsMobileListItem = ({
   const { shouldHideAfterCategorize } = useBankTransactionsContext();
   const categorized = isCategorized(bankTransaction);
   const itemRef = react.useRef(null);
+  const displayAsCategorized = bankTransaction.recently_categorized && shouldHideAfterCategorize() ? false : categorized;
   const [open, setOpen] = react.useState(isFirstItem);
   const openNext = () => {
     if (editable && itemRef.current && itemRef.current.nextSibling) {
@@ -19510,11 +19614,11 @@ const BankTransactionsMobileListItem = ({
   const isTransactionSelected = isSelected(bankTransaction.id);
   const { renderInAppLink } = useInAppLinkContext();
   const inAppLink = react.useMemo(() => {
-    if (!categorized) {
+    if (!displayAsCategorized) {
       return null;
     }
     return getInAppLink(bankTransaction, renderInAppLink);
-  }, [categorized, bankTransaction, renderInAppLink]);
+  }, [displayAsCategorized, bankTransaction, renderInAppLink]);
   const { isVisible } = useDelayedVisibility({ delay: index2 * 20, initialVisibility: Boolean(initialLoad) });
   const className = "Layer__bank-transaction-mobile-list-item";
   const openClassName = open ? `${className}--expanded` : "";
@@ -19581,7 +19685,7 @@ const BankTransactionsMobileListItem = ({
               ]
             }
           ),
-          !open && (!categorizationEnabled && !categorized ? /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, { showAsBadge: true }) : /* @__PURE__ */ jsxRuntime.jsx(
+          !open && (!categorizationEnabled && !displayAsCategorized ? /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, { showAsBadge: true }) : /* @__PURE__ */ jsxRuntime.jsx(
             BankTransactionsListItemCategory,
             {
               bankTransaction,
@@ -19796,8 +19900,8 @@ const BankTransactionsTable = ({
     }
   );
 };
-const BackArrow = (_Vb) => {
-  var _Wb = _Vb, { size = 18 } = _Wb, props = __objRest(_Wb, ["size"]);
+const BackArrow = (_Xb) => {
+  var _Yb = _Xb, { size = 18 } = _Yb, props = __objRest(_Yb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -19830,7 +19934,7 @@ const BaseDetailView = ({ name, onGoBack, slots, children, borderless = false })
   ] });
 };
 const ARCHIVE_CATEGORIZATION_RULE_TAG = "#archive-categorization-rule";
-function buildKey$C({
+function buildKey$G({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -19855,7 +19959,7 @@ function useArchiveCategorizationRule() {
   const { businessId } = useLayerContext();
   const { forceReloadCategorizationRules } = useCategorizationRulesGlobalCacheActions();
   const mutationResponse = useSWRMutation(
-    () => buildKey$C({
+    () => buildKey$G({
       access_token: auth == null ? void 0 : auth.access_token,
       apiUrl: auth == null ? void 0 : auth.apiUrl,
       businessId
@@ -19965,8 +20069,8 @@ const usePaginationRange = ({
   }, [totalCount, pageSize, siblingCount, currentPage]);
   return paginationRange;
 };
-const ChevronLeft = (_Xb) => {
-  var props = __objRest(_Xb, []);
+const ChevronLeft = (_Zb) => {
+  var props = __objRest(_Zb, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -19988,8 +20092,8 @@ const ChevronLeft = (_Xb) => {
     })
   );
 };
-const PaginationButton = (_Yb) => {
-  var _Zb = _Yb, { children, isSelected } = _Zb, buttonProps = __objRest(_Zb, ["children", "isSelected"]);
+const PaginationButton = (__b) => {
+  var _$b = __b, { children, isSelected } = _$b, buttonProps = __objRest(_$b, ["children", "isSelected"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     __spreadProps(__spreadValues({
@@ -20071,7 +20175,6 @@ const Pagination = ({
     ) }, "page-next")
   ] }) }) });
 };
-const EMPTY_ARRAY$2 = [];
 function PaginatedTable({
   data,
   isLoading,
@@ -20082,7 +20185,8 @@ function PaginatedTable({
   paginationProps,
   slots
 }) {
-  const { pageSize = 20, hasMore, fetchMore, initialPage = 0, onSetPage } = paginationProps;
+  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);
@@ -20094,7 +20198,7 @@ function PaginatedTable({
     });
   });
   const table2 = reactTable.useReactTable({
-    data: data != null ? data : EMPTY_ARRAY$2,
+    data: data != null ? data : [],
     columns: columnDefs,
     state: { pagination },
     onPaginationChange: (updaterOrValue) => {
@@ -20104,7 +20208,7 @@ function PaginatedTable({
     },
     getPaginationRowModel: reactTable.getPaginationRowModel(),
     getCoreRowModel: reactTable.getCoreRowModel(),
-    autoResetPageIndex: false
+    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]);
@@ -20350,7 +20454,7 @@ const SuggestedCategorizationRuleUpdatesDrawer = ({
   ] }) });
 };
 const TAG_DIMENSIONS_TAG_KEY = "#tag-dimensions";
-function buildKey$B({
+function buildKey$F({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -20393,7 +20497,7 @@ function useTagDimensions({ isEnabled = true } = {}) {
   const { apiUrl } = useEnvironment();
   const { businessId } = useLayerContext();
   const swrResponse = useSWR(
-    () => buildKey$B(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$F(__spreadProps(__spreadValues({}, auth), {
       apiUrl,
       businessId,
       isEnabled
@@ -20418,8 +20522,8 @@ function usePreloadTagDimensions(parameters) {
   useTagDimensions(parameters);
 }
 const COMPONENT_NAME$c = "bank-transactions";
-const BankTransactions = (__b) => {
-  var _$b = __b, {
+const BankTransactions = (_ac) => {
+  var _bc = _ac, {
     onError,
     showTags = false,
     showCustomerVendor = false,
@@ -20427,7 +20531,7 @@ const BankTransactions = (__b) => {
     applyGlobalDateRange = false,
     mode,
     renderInAppLink
-  } = _$b, props = __objRest(_$b, [
+  } = _bc, props = __objRest(_bc, [
     "onError",
     "showTags",
     "showCustomerVendor",
@@ -20439,6 +20543,7 @@ const BankTransactions = (__b) => {
   usePreloadTagDimensions({ isEnabled: showTags });
   usePreloadCustomers({ isEnabled: showCustomerVendor });
   usePreloadVendors({ isEnabled: showCustomerVendor });
+  usePreloadCategories();
   return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { onError, children: /* @__PURE__ */ jsxRuntime.jsx(CategorizationRulesProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsRouteStoreProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
     BankTransactionsProvider,
     {
@@ -20585,7 +20690,7 @@ const BankTransactionsTableView = ({
   const [listView, setListView] = react.useState(false);
   const [containerWidth, setContainerWidth] = react.useState(0);
   const debounceContainerWidth = debounce(setContainerWidth, 500);
-  const removeTransaction = (bankTransaction) => removeAfterCategorize(bankTransaction);
+  const removeTransaction = (bankTransaction) => removeAfterCategorize([bankTransaction.id]);
   const containerRef = useElementSize((_el, _en, size) => {
     if ((size == null ? void 0 : size.height) && (size == null ? void 0 : size.height) >= 90) {
       const newShift = -Math.floor(size.height / 2) + 6;
@@ -20792,8 +20897,8 @@ function QuickbooksContextProvider({ children }) {
   const quickbooksContextData = useQuickbooks();
   return /* @__PURE__ */ jsxRuntime.jsx(QuickbooksContext.Provider, { value: quickbooksContextData, children });
 }
-const Cog = (_ac) => {
-  var _bc = _ac, { size = 12 } = _bc, props = __objRest(_bc, ["size"]);
+const Cog = (_cc) => {
+  var _dc = _cc, { size = 12 } = _dc, props = __objRest(_dc, ["size"]);
   const id = react.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -20814,8 +20919,8 @@ const Cog = (_ac) => {
     })
   );
 };
-const QuickbooksIcon = (_cc) => {
-  var _dc = _cc, { size = 24 } = _dc, props = __objRest(_dc, ["size"]);
+const QuickbooksIcon = (_ec) => {
+  var _fc = _ec, { size = 24 } = _fc, props = __objRest(_fc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -20974,8 +21079,8 @@ function IntegrationsQuickbooksUnlinkConfirmationModal({ isOpen, onOpenChange })
     }
   );
 }
-const MoreVertical = (_ec) => {
-  var _fc = _ec, { size = 18 } = _fc, props = __objRest(_fc, ["size"]);
+const MoreVertical = (_gc) => {
+  var _hc = _gc, { size = 18 } = _hc, props = __objRest(_hc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -21204,8 +21309,8 @@ const IntegrationsComponent = ({
     (quickbooksConnectionStatus == null ? void 0 : quickbooksConnectionStatus.is_connected) && /* @__PURE__ */ jsxRuntime.jsx(IntegrationsContent, {})
   ] });
 };
-const PlusIcon = (_gc) => {
-  var _hc = _gc, { size = 14 } = _hc, props = __objRest(_hc, ["size"]);
+const PlusIcon = (_ic) => {
+  var _jc = _ic, { size = 14 } = _jc, props = __objRest(_jc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -21247,8 +21352,8 @@ const PlusIcon = (_gc) => {
     })
   );
 };
-const InstitutionIcon = (_ic) => {
-  var _jc = _ic, { size = 18 } = _jc, props = __objRest(_jc, ["size"]);
+const InstitutionIcon = (_kc) => {
+  var _lc = _kc, { size = 18 } = _lc, props = __objRest(_lc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -21608,7 +21713,7 @@ function LinkedAccountToConfirm({
     ) })
   ] });
 }
-function buildKey$A({
+function buildKey$E({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -21666,7 +21771,7 @@ function useConfirmAndExcludeMultiple({ onSuccess }) {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
   return useSWRMutation(
-    () => buildKey$A({
+    () => buildKey$E({
       access_token: auth == null ? void 0 : auth.access_token,
       apiUrl: auth == null ? void 0 : auth.apiUrl,
       businessId
@@ -21866,8 +21971,8 @@ const MenuItem = react.forwardRef(
 );
 const PILL_CLASS_NAME = "Layer__Pill";
 const Pill = react.forwardRef(
-  function Pill2(_kc, ref) {
-    var _lc = _kc, { children, status } = _lc, restProps = __objRest(_lc, ["children", "status"]);
+  function Pill2(_mc, ref) {
+    var _nc = _mc, { children, status } = _nc, restProps = __objRest(_nc, ["children", "status"]);
     const dataProperties = toDataProperties({ status });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Button,
@@ -22230,8 +22335,8 @@ const LinkedAccountsContent = ({
 };
 const CALENDAR_CLASS_NAME = "Layer__UI__Calendar";
 const Calendar = react.forwardRef(
-  function Calendar2(_mc, ref) {
-    var _nc = _mc, { className, isReadOnly } = _nc, restProps = __objRest(_nc, ["className", "isReadOnly"]);
+  function Calendar2(_oc, ref) {
+    var _pc = _oc, { className, isReadOnly } = _pc, restProps = __objRest(_pc, ["className", "isReadOnly"]);
     const dataProperties = toDataProperties({ readonly: isReadOnly });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Calendar,
@@ -22245,8 +22350,8 @@ const Calendar = react.forwardRef(
 );
 const CALENDAR_GRID_CLASS_NAME = "Layer__UI__CalendarGrid";
 const CalendarGrid = react.forwardRef(
-  function CalendarGrid2(_oc, ref) {
-    var _pc = _oc, { className } = _pc, restProps = __objRest(_pc, ["className"]);
+  function CalendarGrid2(_qc, ref) {
+    var _rc = _qc, { className } = _rc, restProps = __objRest(_rc, ["className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarGrid,
       __spreadProps(__spreadValues({}, restProps), {
@@ -22258,8 +22363,8 @@ const CalendarGrid = react.forwardRef(
 );
 const CALENDAR_GRID_BODY_CLASS_NAME = "Layer__UI__CalendarGridBody";
 const CalendarGridBody = react.forwardRef(
-  function CalendarGridBody2(_qc, ref) {
-    var _rc = _qc, { className } = _rc, restProps = __objRest(_rc, ["className"]);
+  function CalendarGridBody2(_sc, ref) {
+    var _tc = _sc, { className } = _tc, restProps = __objRest(_tc, ["className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarGridBody,
       __spreadProps(__spreadValues({}, restProps), {
@@ -22271,8 +22376,8 @@ const CalendarGridBody = react.forwardRef(
 );
 const CALENDAR_CELL_CLASS_NAME = "Layer__UI__CalendarCell";
 const CalendarCell = react.forwardRef(
-  function CalendarCell2(_sc, ref) {
-    var _tc = _sc, { className, size = "sm" } = _tc, restProps = __objRest(_tc, ["className", "size"]);
+  function CalendarCell2(_uc, ref) {
+    var _vc = _uc, { className, size = "sm" } = _vc, restProps = __objRest(_vc, ["className", "size"]);
     const dataProperties = toDataProperties({ size });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarCell,
@@ -22285,8 +22390,8 @@ const CalendarCell = react.forwardRef(
 );
 const CALENDAR_GRID_HEADER_CLASS_NAME = "Layer__UI__CalendarGridHeader";
 const CalendarGridHeader = react.forwardRef(
-  function CalendarGridHeader2(_uc, ref) {
-    var _vc = _uc, { className } = _vc, restProps = __objRest(_vc, ["className"]);
+  function CalendarGridHeader2(_wc, ref) {
+    var _xc = _wc, { className } = _xc, restProps = __objRest(_xc, ["className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarGridHeader,
       __spreadProps(__spreadValues({}, restProps), {
@@ -22298,8 +22403,8 @@ const CalendarGridHeader = react.forwardRef(
 );
 const CALENDAR_HEADER_CELL_CLASS_NAME = "Layer__UI__CalendarHeaderCell";
 const CalendarHeaderCell = react.forwardRef(
-  function CalendarHeaderCell2(_wc, ref) {
-    var _xc = _wc, { className, size = "sm" } = _xc, restProps = __objRest(_xc, ["className", "size"]);
+  function CalendarHeaderCell2(_yc, ref) {
+    var _zc = _yc, { className, size = "sm" } = _zc, restProps = __objRest(_zc, ["className", "size"]);
     const dataProperties = toDataProperties({ size });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarHeaderCell,
@@ -22541,7 +22646,7 @@ const AccountFormBox = ({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS_NAME$3}__success-banner`, children: /* @__PURE__ */ jsxRuntime.jsx(CheckCircle, { size: 36 }) })
   ] }));
 };
-function buildKey$z({
+function buildKey$D({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -22597,7 +22702,7 @@ function useBulkSetOpeningBalanceAndDate(data, { onSuccess }) {
     return errors;
   };
   return useSWRMutation(
-    () => buildKey$z({ access_token: auth == null ? void 0 : auth.access_token, apiUrl: auth == null ? void 0 : auth.apiUrl, businessId, data }),
+    () => buildKey$D({ access_token: auth == null ? void 0 : auth.access_token, apiUrl: auth == null ? void 0 : auth.apiUrl, businessId, data }),
     ({ accessToken, apiUrl, businessId: businessId2, data: data2 }) => Promise.allSettled(
       data2.map(
         ({ accountId, openingDate, openingBalance, isDateInvalid }) => {
@@ -22869,6 +22974,33 @@ const applyShare = (items, total) => {
     });
   });
 };
+const createPnlLineItemComparator = (filters) => {
+  return (a, b) => {
+    switch (filters == null ? void 0 : filters.sortBy) {
+      case "category":
+        if ((filters == null ? void 0 : filters.sortDirection) === "asc") {
+          return a.displayName.localeCompare(b.displayName);
+        }
+        return b.displayName.localeCompare(a.displayName);
+      case "type":
+        if ((filters == null ? void 0 : filters.sortDirection) === "asc") {
+          return a.type.localeCompare(b.type);
+        }
+        return b.type.localeCompare(a.type);
+      default:
+        if ((filters == null ? void 0 : filters.sortDirection) === "asc") {
+          return a.value - b.value;
+        }
+        return b.value - a.value;
+    }
+  };
+};
+const sortPnlLineItemsAndCalculateTotal = (items, filter) => {
+  const sorted = items.sort(createPnlLineItemComparator(filter));
+  const total = sorted.reduce((x, { value }) => x + value, 0);
+  const withShare = applyShare(sorted, total);
+  return { items: withShare, total };
+};
 const useProfitAndLoss = ({ tagFilter, reportingBasis }) => {
   var _a;
   const [displayMode, setDisplayMode] = react.useState("month");
@@ -22894,85 +23026,20 @@ const useProfitAndLoss = ({ tagFilter, reportingBasis }) => {
       })
     }));
   };
-  const setFilterTypes = (scope, types) => {
-    setFilters(__spreadProps(__spreadValues({}, filters), {
-      [scope]: __spreadProps(__spreadValues({}, filters[scope]), {
-        types
-      })
-    }));
-  };
   const { filteredDataRevenue, filteredTotalRevenue } = react.useMemo(() => {
-    var _a2;
     if (!data) {
       return { filteredDataRevenue: [], filteredTotalRevenue: void 0 };
     }
     const items = collectRevenueItems(data);
-    const revenueTypeFilters = (_a2 = filters["revenue"]) == null ? void 0 : _a2.types;
-    const filtered = items.map((x) => {
-      if (revenueTypeFilters && revenueTypeFilters.length > 0 && !revenueTypeFilters.includes(x.type)) {
-        return __spreadProps(__spreadValues({}, x), { isHidden: true });
-      }
-      return x;
-    });
-    const sorted = filtered.sort((a, b) => {
-      var _a3, _b, _c, _d;
-      switch ((_a3 = filters["revenue"]) == null ? void 0 : _a3.sortBy) {
-        case "category":
-          if (((_b = filters["revenue"]) == null ? void 0 : _b.sortDirection) === "asc") {
-            return a.displayName.localeCompare(b.displayName);
-          }
-          return b.displayName.localeCompare(a.displayName);
-        case "type":
-          if (((_c = filters["revenue"]) == null ? void 0 : _c.sortDirection) === "asc") {
-            return a.type.localeCompare(b.type);
-          }
-          return b.type.localeCompare(a.type);
-        default:
-          if (((_d = filters["revenue"]) == null ? void 0 : _d.sortDirection) === "asc") {
-            return a.value - b.value;
-          }
-          return b.value - a.value;
-      }
-    });
-    const total = sorted.filter((x) => !x.isHidden).reduce((x, { value }) => x + value, 0);
-    const withShare = applyShare(sorted, total);
+    const { items: withShare, total } = sortPnlLineItemsAndCalculateTotal(items, filters["revenue"]);
     return { filteredDataRevenue: withShare, filteredTotalRevenue: total };
   }, [data, filters]);
   const { filteredDataExpenses, filteredTotalExpenses } = react.useMemo(() => {
-    var _a2;
     if (!data) {
       return { filteredDataExpenses: [], filteredTotalExpenses: void 0 };
     }
     const items = collectExpensesItems(data);
-    const expenseTypeFilters = (_a2 = filters["expenses"]) == null ? void 0 : _a2.types;
-    const filtered = items.map((x) => {
-      if (expenseTypeFilters && expenseTypeFilters.length > 0 && !expenseTypeFilters.includes(x.type)) {
-        return __spreadProps(__spreadValues({}, x), { isHidden: true });
-      }
-      return x;
-    });
-    const sorted = filtered.sort((a, b) => {
-      var _a3, _b, _c, _d;
-      switch ((_a3 = filters["expenses"]) == null ? void 0 : _a3.sortBy) {
-        case "category":
-          if (((_b = filters["expenses"]) == null ? void 0 : _b.sortDirection) === "asc") {
-            return a.displayName.localeCompare(b.displayName);
-          }
-          return b.displayName.localeCompare(a.displayName);
-        case "type":
-          if (((_c = filters["expenses"]) == null ? void 0 : _c.sortDirection) === "asc") {
-            return a.type.localeCompare(b.type);
-          }
-          return b.type.localeCompare(a.type);
-        default:
-          if (((_d = filters["expenses"]) == null ? void 0 : _d.sortDirection) === "asc") {
-            return a.value - b.value;
-          }
-          return b.value - a.value;
-      }
-    });
-    const total = sorted.filter((x) => !x.isHidden).reduce((x, { value }) => x + value, 0);
-    const withShare = applyShare(sorted, total);
+    const { items: withShare, total } = sortPnlLineItemsAndCalculateTotal(items, filters["expenses"]);
     return { filteredDataExpenses: withShare, filteredTotalExpenses: total };
   }, [data, filters]);
   const refetch = react.useCallback(() => {
@@ -22992,7 +23059,6 @@ const useProfitAndLoss = ({ tagFilter, reportingBasis }) => {
     setSidebarScope,
     sortBy,
     filters,
-    setFilterTypes,
     tagFilter,
     dateRange,
     selectedLineItem,
@@ -23177,8 +23243,6 @@ const ProfitAndLossContext = react.createContext({
   },
   sortBy: () => {
   },
-  setFilterTypes: () => {
-  },
   filters: {
     expenses: void 0,
     revenue: void 0
@@ -23196,7 +23260,7 @@ const isNotOnlyNoneTag = (compareOptions) => {
     compareOptions == null ? void 0 : compareOptions.some((option) => option.tagFilterConfig.tagFilters !== "None")
   );
 };
-function buildKey$y({
+function buildKey$C({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -23254,7 +23318,7 @@ function useProfitAndLossComparison({
   const { data: auth } = useAuth();
   const periods = preparePeriodsBody(dateRange, comparePeriods, comparisonPeriodMode);
   const tagFilters = prepareFiltersBody(selectedCompareOptions);
-  const queryKey = buildKey$y(__spreadProps(__spreadValues({}, auth), {
+  const queryKey = buildKey$C(__spreadProps(__spreadValues({}, auth), {
     businessId,
     periods,
     tagFilters,
@@ -23414,8 +23478,8 @@ const useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
     refetch
   };
 };
-const BarChart2 = (_yc) => {
-  var _zc = _yc, { size = 12 } = _zc, props = __objRest(_zc, ["size"]);
+const BarChart2 = (_Ac) => {
+  var _Bc = _Ac, { size = 12 } = _Bc, props = __objRest(_Bc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -24205,11 +24269,11 @@ const ProfitAndLossChart = ({
     isSyncing && !hasNonZeroData ? /* @__PURE__ */ jsxRuntime.jsx(ChartStateCard, {}) : null
   ] });
 };
-const BackButton = (_Ac) => {
-  var _Bc = _Ac, {
+const BackButton = (_Cc) => {
+  var _Dc = _Cc, {
     className,
     textOnly = false
-  } = _Bc, props = __objRest(_Bc, [
+  } = _Dc, props = __objRest(_Dc, [
     "className",
     "textOnly"
   ]);
@@ -24257,8 +24321,8 @@ const TASKS_CHARTS_COLORS = {
   done: "#3B9C63",
   pending: "#DFA000"
 };
-const SortArrows = (_Cc) => {
-  var _Dc = _Cc, { size = 13 } = _Dc, props = __objRest(_Dc, ["size"]);
+const SortArrows = (_Ec) => {
+  var _Fc = _Ec, { size = 13 } = _Fc, props = __objRest(_Fc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -24325,39 +24389,12 @@ const SortArrows = (_Cc) => {
   );
 };
 const UNCATEGORIZED_TYPES = ["UNCATEGORIZED_INFLOWS", "UNCATEGORIZED_OUTFLOWS"];
-const mapTypesToColors = (data, colorList = DEFAULT_CHART_COLOR_TYPE) => {
-  const typeToColor = {};
-  const typeToLastOpacity = {};
-  let colorIndex = 0;
-  return data.map((obj) => {
-    var _a;
-    const type = (_a = obj.name) != null ? _a : obj.type;
-    if (type === "Uncategorized") {
-      return {
-        color: "#EEEEF0",
-        opacity: 1
-      };
-    }
-    if (!typeToColor[type]) {
-      typeToColor[type] = colorList[colorIndex % colorList.length];
-      colorIndex++;
-      typeToLastOpacity[type] = 1;
-    } else {
-      typeToLastOpacity[type] -= 0.1;
-    }
-    const opacity = typeToLastOpacity[type];
-    return {
-      color: typeToColor[type],
-      opacity
-    };
-  });
-};
 const ValueIcon = ({
   item,
   typeColorMapping,
   idx
 }) => {
-  if (item.type === "Uncategorized") {
+  if (isLineItemUncategorized(item)) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
       {
@@ -24424,7 +24461,7 @@ const DetailedTable = ({
     );
   };
   const typeColorMapping = mapTypesToColors(filteredData, chartColorsList);
-  const positiveTotal = filteredData.filter((x) => !x.isHidden && x.value > 0).reduce((sum, x) => sum + x.value, 0);
+  const positiveTotal = filteredData.filter((x) => x.value > 0).reduce((sum, x) => sum + x.value, 0);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "details-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -24465,16 +24502,16 @@ const DetailedTable = ({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: filteredData.filter((x) => !x.isHidden).map((item, idx) => {
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: filteredData.map((item, idx) => {
       const share = item.value > 0 ? item.value / positiveTotal : 0;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "tr",
         {
           className: classNames(
             "Layer__profit-and-loss-detailed-table__row",
-            hoveredItem && hoveredItem === item.displayName ? "active" : ""
+            hoveredItem && hoveredItem.name === item.name ? "active" : ""
           ),
-          onMouseEnter: () => setHoveredItem(item.displayName),
+          onMouseEnter: () => setHoveredItem(item),
           onMouseLeave: () => setHoveredItem(void 0),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("td", { className: "category-col", children: item.displayName }),
@@ -24506,6 +24543,35 @@ const DetailedTable = ({
     }) })
   ] }) }) });
 };
+const isLineItemUncategorized = (item) => {
+  return UNCATEGORIZED_TYPES.includes(item.name);
+};
+const mapTypesToColors = (data, colorList = DEFAULT_CHART_COLOR_TYPE) => {
+  const nameToColor = {};
+  const nameToLastOpacity = {};
+  let colorIndex = 0;
+  return data.map((lineItem) => {
+    if (isLineItemUncategorized(lineItem)) {
+      return {
+        color: "#EEEEF0",
+        opacity: 1
+      };
+    }
+    const name = lineItem.name;
+    if (!nameToColor[name]) {
+      nameToColor[name] = colorList[colorIndex % colorList.length];
+      colorIndex++;
+      nameToLastOpacity[name] = 1;
+    } else {
+      nameToLastOpacity[name] -= 0.1;
+    }
+    const opacity = nameToLastOpacity[name];
+    return {
+      color: nameToColor[name],
+      opacity
+    };
+  });
+};
 const DetailedChart = ({
   filteredData,
   filteredTotal,
@@ -24516,18 +24582,9 @@ const DetailedChart = ({
   showDatePicker = true
 }) => {
   const chartData = react.useMemo(
-    () => filteredData.map((x) => {
-      if (x.isHidden) {
-        return __spreadProps(__spreadValues({}, x), {
-          name: x.displayName,
-          value: 0
-        });
-      }
-      return __spreadProps(__spreadValues({}, x), {
-        name: x.displayName,
-        value: x.value > 0 ? x.value : 0
-      });
-    }),
+    () => filteredData.map((x) => __spreadProps(__spreadValues({}, x), {
+      value: x.value > 0 ? x.value : 0
+    })),
     [filteredData]
   );
   const noValue = chartData.length === 0 || !chartData.find((x) => x.value !== 0);
@@ -24573,7 +24630,7 @@ const DetailedChart = ({
         {
           data: chartData,
           dataKey: "value",
-          nameKey: "name",
+          nameKey: "displayName",
           cx: "50%",
           cy: "50%",
           innerRadius: "91%",
@@ -24586,7 +24643,7 @@ const DetailedChart = ({
             chartData.map((entry, index2) => {
               let fill = typeColorMapping[index2].color;
               let active = true;
-              if (hoveredItem && entry.name !== hoveredItem) {
+              if (hoveredItem && entry.name !== hoveredItem.name) {
                 active = false;
                 fill = void 0;
               }
@@ -24596,13 +24653,13 @@ const DetailedChart = ({
                   className: classNames(
                     "Layer__profit-and-loss-detailed-charts__pie",
                     hoveredItem && active ? "active" : "inactive",
-                    entry.type === "Uncategorized" && "Layer__profit-and-loss-detailed-charts__pie--border"
+                    isLineItemUncategorized(entry) && "Layer__profit-and-loss-detailed-charts__pie--border"
                   ),
                   style: {
-                    fill: entry.type === "Uncategorized" && fill ? "url(#layer-pie-dots-pattern)" : fill
+                    fill: isLineItemUncategorized(entry) && fill ? "url(#layer-pie-dots-pattern)" : fill
                   },
                   opacity: typeColorMapping[index2].opacity,
-                  onMouseEnter: () => setHoveredItem(entry.name),
+                  onMouseEnter: () => setHoveredItem(entry),
                   onMouseLeave: () => setHoveredItem(void 0)
                 },
                 `cell-${index2}`
@@ -24628,7 +24685,7 @@ const DetailedChart = ({
                   };
                   let text = "Total";
                   if (hoveredItem) {
-                    text = hoveredItem;
+                    text = hoveredItem.displayName;
                   }
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     recharts.Text,
@@ -24661,7 +24718,7 @@ const DetailedChart = ({
                   let value = filteredTotal;
                   if (hoveredItem) {
                     value = (_b = filteredData.find(
-                      (x) => x.displayName === hoveredItem
+                      (x) => x.name === hoveredItem.name
                     )) == null ? void 0 : _b.value;
                   }
                   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -24695,7 +24752,7 @@ const DetailedChart = ({
                   };
                   if (hoveredItem) {
                     const item = filteredData.find(
-                      (x) => x.displayName === hoveredItem
+                      (x) => x.name === hoveredItem.name
                     );
                     const positiveTotal = chartData.reduce((sum, x) => sum + x.value, 0);
                     const value = (_b = item == null ? void 0 : item.value) != null ? _b : 0;
@@ -24720,7 +24777,7 @@ const DetailedChart = ({
         {
           data: [{ name: "Total", value: 1 }],
           dataKey: "value",
-          nameKey: "name",
+          nameKey: "displayName",
           cx: "50%",
           cy: "50%",
           innerRadius: "91%",
@@ -24750,7 +24807,7 @@ const DetailedChart = ({
                   };
                   let text = "Total";
                   if (hoveredItem) {
-                    text = hoveredItem;
+                    text = hoveredItem.displayName;
                   }
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     recharts.Text,
@@ -24783,7 +24840,7 @@ const DetailedChart = ({
                   let value = filteredTotal;
                   if (hoveredItem) {
                     value = (_b = filteredData.find(
-                      (x) => x.displayName === hoveredItem
+                      (x) => x.name === hoveredItem.name
                     )) == null ? void 0 : _b.value;
                   }
                   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -24804,7 +24861,7 @@ const DetailedChart = ({
         {
           data: [{ name: "loading...", value: 1 }],
           dataKey: "value",
-          nameKey: "name",
+          nameKey: "displayName",
           cx: "50%",
           cy: "50%",
           innerRadius: "91%",
@@ -24923,11 +24980,11 @@ const LedgerAccountsContext = react.createContext({
   fetchMore: () => {
   }
 });
-const CloseButton = (_Ec) => {
-  var _Fc = _Ec, {
+const CloseButton = (_Gc) => {
+  var _Hc = _Gc, {
     className,
     textOnly = false
-  } = _Fc, props = __objRest(_Fc, [
+  } = _Hc, props = __objRest(_Hc, [
     "className",
     "textOnly"
   ]);
@@ -25702,44 +25759,6 @@ function DetailReportModal({
     }
   );
 }
-const Filters = ({
-  filteredData,
-  sidebarScope,
-  filters,
-  setFilterTypes
-}) => {
-  var _a, _b, _c;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filters", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.sm, className: "Layer__label", children: "Filters" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Select$1,
-      {
-        className: "Layer__select type-select",
-        classNamePrefix: "Layer__select",
-        value: sidebarScope && ((_a = filters[sidebarScope]) == null ? void 0 : _a.types) ? sidebarScope && ((_c = (_b = filters[sidebarScope]) == null ? void 0 : _b.types) == null ? void 0 : _c.map((x) => ({
-          value: x,
-          label: x
-        }))) : [],
-        isMulti: true,
-        isClearable: false,
-        options: [...new Set(filteredData == null ? void 0 : filteredData.map((x) => x.type))].map((x) => ({
-          label: x,
-          value: x
-        })),
-        onChange: (selected) => {
-          setFilterTypes(
-            sidebarScope != null ? sidebarScope : "expenses",
-            selected.map((x) => x.value)
-          );
-        },
-        components: {
-          DropdownIndicator: (props) => /* @__PURE__ */ jsxRuntime.jsx(Select$1.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {}) })),
-          Placeholder: (props) => /* @__PURE__ */ jsxRuntime.jsx(Select$1.components.Placeholder, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__select__multi-all-placeholder-badge", children: "All" }) }))
-        }
-      }
-    )
-  ] });
-};
 const ProfitAndLossDetailedCharts = ({
   scope,
   hideClose = false,
@@ -25757,13 +25776,12 @@ const ProfitAndLossDetailedCharts = ({
     filters,
     dateRange,
     sidebarScope,
-    setSidebarScope,
-    setFilterTypes
+    setSidebarScope
   } = react.useContext(ProfitAndLossContext);
   const theScope = scope ? scope : sidebarScope;
   const data = theScope === "revenue" ? filteredDataRevenue : filteredDataExpenses;
   const total = theScope === "revenue" ? filteredTotalRevenue : filteredTotalExpenses;
-  const [hoveredItem, setHoveredItem] = react.useState();
+  const [hoveredItem, setHoveredItem] = react.useState(void 0);
   const [selectedItem, setSelectedItem] = react.useState(null);
   const [isModalOpen, setIsModalOpen] = react.useState(false);
   const handleValueClick = react.useCallback((item) => {
@@ -25812,31 +25830,20 @@ const ProfitAndLossDetailedCharts = ({
           showDatePicker
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__profit-and-loss-detailed-charts__table-wrapper", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Filters,
-          {
-            filteredData: data,
-            sidebarScope: theScope,
-            filters,
-            setFilterTypes
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DetailedTable,
-          {
-            filteredData: data,
-            sidebarScope: theScope,
-            filters,
-            sortBy,
-            hoveredItem,
-            setHoveredItem,
-            chartColorsList,
-            stringOverrides: stringOverrides == null ? void 0 : stringOverrides.detailedTableStringOverrides,
-            onValueClick: handleValueClick
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__profit-and-loss-detailed-charts__table-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
+        DetailedTable,
+        {
+          filteredData: data,
+          sidebarScope: theScope,
+          filters,
+          sortBy,
+          hoveredItem,
+          setHoveredItem,
+          chartColorsList,
+          stringOverrides: stringOverrides == null ? void 0 : stringOverrides.detailedTableStringOverrides,
+          onValueClick: handleValueClick
+        }
+      ) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       DetailReportModal,
@@ -26099,7 +26106,7 @@ const getProfitAndLossDetailLinesExcel = (apiUrl, accessToken, params) => {
     ({ businessId: businessId2 }) => `/v1/businesses/${businessId2}/reports/profit-and-loss/lines/exports/excel?${queryParams.toString()}`
   )(apiUrl, accessToken, { params: { businessId } });
 };
-function buildKey$x({
+function buildKey$B({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -26138,7 +26145,7 @@ function useProfitAndLossDetailLinesExport({
   const { businessId } = useLayerContext();
   const { apiUrl } = useEnvironment();
   return useSWRMutation(
-    () => buildKey$x(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$B(__spreadProps(__spreadValues({}, auth), {
       apiUrl,
       businessId,
       startDate,
@@ -26355,10 +26362,10 @@ const MultiSelect = ({
     isInvalid ? "Layer__select--error" : "",
     className
   );
-  const DropdownIndicator = react.useCallback((props) => /* @__PURE__ */ jsxRuntime.jsx(Select$1.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownFill, {}) })), []);
+  const DropdownIndicator = react.useCallback((props) => /* @__PURE__ */ jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownFill, {}) })), []);
   return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { disabled: !isInvalid || !errorMessage, children: [
     /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Select$1,
+      ReactSelect,
       {
         inputId,
         name,
@@ -26373,7 +26380,7 @@ const MultiSelect = ({
         styles: __spreadValues({
           menuPortal: (base) => __spreadProps(__spreadValues({}, base), { zIndex: 9999 })
         }, styles),
-        components: { DropdownIndicator },
+        components: { DropdownIndicator, MenuPortal: SelectMenuPortal },
         isLoading,
         isDisabled: disabled,
         isMulti: true
@@ -27174,7 +27181,13 @@ function ProfitAndLossSummariesMiniChart({
   chartColorsList,
   variants: variants2
 }) {
-  const typeColorMapping = mapTypesToColors(data, chartColorsList);
+  const chartData = react.useMemo(
+    () => data.map((x) => __spreadProps(__spreadValues({}, x), {
+      value: x.value > 0 ? x.value : 0
+    })),
+    [data]
+  );
+  const typeColorMapping = mapTypesToColors(chartData, chartColorsList);
   let chartDimension = 52;
   let innerRadius = 10;
   let outerRadius = 16;
@@ -27193,9 +27206,9 @@ function ProfitAndLossSummariesMiniChart({
   return /* @__PURE__ */ jsxRuntime.jsx(recharts.PieChart, { width: chartDimension, height: chartDimension, children: /* @__PURE__ */ jsxRuntime.jsx(
     recharts.Pie,
     {
-      data,
+      data: chartData,
       dataKey: "value",
-      nameKey: "name",
+      nameKey: "displayName",
       cx: "50%",
       cy: "50%",
       innerRadius,
@@ -27206,7 +27219,7 @@ function ProfitAndLossSummariesMiniChart({
       height: 36,
       animationDuration: 250,
       animationEasing: "ease-in-out",
-      children: data.map((entry, index2) => {
+      children: chartData.map((entry, index2) => {
         const colorConfig = typeColorMapping[index2];
         return /* @__PURE__ */ jsxRuntime.jsx(
           recharts.Cell,
@@ -27243,7 +27256,7 @@ function ProfitAndLossSummariesSummary({
   const showPercentChange = percentChange !== void 0 && percentChange !== null && comparisonMonth;
   const isGoodChange = showPercentChange && (isExpense ? percentChange < 0 : percentChange >= 0);
   const arrow = showPercentChange && percentChange >= 0 ? "↑" : "↓";
-  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", overflow: "hidden", children: [
     Chart && /* @__PURE__ */ jsxRuntime.jsx(
       HStack,
       {
@@ -27495,10 +27508,10 @@ function Internal_ProfitAndLossSummaries({
     unstable_AdditionalListItems.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossSummariesListItem, { children: item }, index2))
   ] }) });
 }
-function ProfitAndLossSummaries(_Gc) {
-  var _Hc = _Gc, {
+function ProfitAndLossSummaries(_Ic) {
+  var _Jc = _Ic, {
     onTransactionsToReviewClick
-  } = _Hc, restProps = __objRest(_Hc, [
+  } = _Jc, restProps = __objRest(_Jc, [
     "onTransactionsToReviewClick"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -27536,7 +27549,7 @@ ProfitAndLoss.Summaries = ProfitAndLossSummaries;
 ProfitAndLoss.DetailedCharts = ProfitAndLossDetailedCharts;
 ProfitAndLoss.Header = ProfitAndLossHeader;
 ProfitAndLoss.Report = ProfitAndLossReport;
-function buildKey$w({
+function buildKey$A({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -27559,7 +27572,7 @@ function useBalanceSheet({
   const { apiUrl } = useEnvironment();
   const { businessId } = useLayerContext();
   return useSWR(
-    () => buildKey$w(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$A(__spreadProps(__spreadValues({}, auth), {
       apiUrl,
       businessId,
       effectiveDate
@@ -27625,7 +27638,7 @@ const BALANCE_SHEET_ROWS = [
   }
 ];
 const DOWNLOAD_BALANCE_SHEET_TAG_KEY = "#download-balance-sheet";
-function buildKey$v({
+function buildKey$z({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -27648,7 +27661,7 @@ function useBalanceSheetDownload({
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
   return useSWRMutation(
-    () => buildKey$v(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$z(__spreadProps(__spreadValues({}, auth), {
       businessId,
       effectiveDate
     })),
@@ -27698,8 +27711,8 @@ function BalanceSheetDownloadButton({
     /* @__PURE__ */ jsxRuntime.jsx(InvisibleDownload, { ref: invisibleDownloadRef })
   ] });
 }
-const Collapse = (_Ic) => {
-  var props = __objRest(_Ic, []);
+const Collapse = (_Kc) => {
+  var props = __objRest(_Kc, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -27732,8 +27745,8 @@ const Collapse = (_Ic) => {
     })
   );
 };
-const Expand = (_Jc) => {
-  var props = __objRest(_Jc, []);
+const Expand = (_Lc) => {
+  var props = __objRest(_Lc, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -28003,7 +28016,7 @@ const BalanceSheetView = ({
     }
   ) });
 };
-function buildKey$u({
+function buildKey$y({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -28029,7 +28042,7 @@ function useStatementOfCashFlow({
   const { apiUrl } = useEnvironment();
   const { businessId } = useLayerContext();
   return useSWR(
-    buildKey$u(__spreadProps(__spreadValues({}, auth), {
+    buildKey$y(__spreadProps(__spreadValues({}, auth), {
       apiUrl,
       businessId,
       startDate,
@@ -28093,7 +28106,7 @@ const STATEMENT_OF_CASH_FLOW_ROWS = [
   }
 ];
 const DOWNLOAD_CASHFLOW_STATEMENT_TAG_KEY = "#download-cashflow-statement";
-function buildKey$t({
+function buildKey$x({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -28119,7 +28132,7 @@ function useCashflowStatementDownload({
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
   return useSWRMutation(
-    () => buildKey$t(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$x(__spreadProps(__spreadValues({}, auth), {
       businessId,
       startDate,
       endDate
@@ -28323,7 +28336,7 @@ const getLedgerAccountBalances = get$1(
     return `/v1/businesses/${businessId}/ledger/balances?${parameters}`;
   }
 );
-function buildKey$s({
+function buildKey$w({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -28345,7 +28358,7 @@ function useLedgerBalances(withDates, startDate, endDate) {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const response = useSWR(
-    () => buildKey$s(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$w(__spreadProps(__spreadValues({}, data), {
       businessId,
       startDate: withDates ? startDate : void 0,
       endDate: withDates ? endDate : void 0
@@ -28687,7 +28700,7 @@ const LEDGER_ACCOUNT_SUBTYPES_FOR_TYPE = {
   EXPENSE: EXPENSE_LEDGER_ACCOUNT_SUBTYPES
 };
 const deleteAccountFromLedger = del(({ businessId, accountId }) => `/v1/businesses/${businessId}/ledger/accounts/${accountId}`);
-function buildKey$r({
+function buildKey$v({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -28705,7 +28718,7 @@ function useDeleteAccountFromLedger() {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const mutationResponse = useSWRMutation(
-    () => buildKey$r(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$v(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, { arg: { accountId } }) => deleteAccountFromLedger(
@@ -29381,8 +29394,8 @@ const ChartOfAccountsContext = react.createContext(
     }
   }
 );
-const Plus = (_Kc) => {
-  var _Lc = _Kc, { size = 14 } = _Lc, props = __objRest(_Lc, ["size"]);
+const Plus = (_Mc) => {
+  var _Nc = _Mc, { size = 14 } = _Nc, props = __objRest(_Nc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -29415,7 +29428,7 @@ const Plus = (_Kc) => {
     })
   );
 };
-function buildKey$q({
+function buildKey$u({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -29441,7 +29454,7 @@ function useAccountBalancesDownload({
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
   return useSWRMutation(
-    () => buildKey$q(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$u(__spreadProps(__spreadValues({}, auth), {
       businessId,
       startCutoff,
       endCutoff
@@ -29749,8 +29762,8 @@ var LedgerAccountNodeType = /* @__PURE__ */ ((LedgerAccountNodeType2) => {
   LedgerAccountNodeType2["Parent"] = "Parent";
   return LedgerAccountNodeType2;
 })(LedgerAccountNodeType || {});
-const Edit2 = (_Mc) => {
-  var _Nc = _Mc, { size = 18 } = _Nc, props = __objRest(_Nc, ["size"]);
+const Edit2 = (_Oc) => {
+  var _Pc = _Oc, { size = 18 } = _Pc, props = __objRest(_Pc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -31473,7 +31486,7 @@ var UpsertJournalEntryMode = /* @__PURE__ */ ((UpsertJournalEntryMode2) => {
   return UpsertJournalEntryMode2;
 })(UpsertJournalEntryMode || {});
 const createJournalEntry = post(({ businessId }) => `/v1/businesses/${businessId}/ledger/journal-entries`);
-function buildKey$p({
+function buildKey$t({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -31500,7 +31513,7 @@ const useUpsertJournalEntry = (props) => {
   const { debouncedInvalidateProfitAndLossSummaries } = useProfitAndLossSummariesCacheActions();
   const { invalidate } = useGlobalCacheActions();
   const rawMutationResponse = useSWRMutation(
-    () => buildKey$p(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$t(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, { arg: body }) => {
@@ -31814,7 +31827,7 @@ const JournalEntryDrawerHeader = ({ onSubmit, formState }) => {
     ] })
   ] });
 };
-function buildKey$o({
+function buildKey$s({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -31840,7 +31853,7 @@ function useJournalEntriesDownload({
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
   return useSWRMutation(
-    () => buildKey$o(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$s(__spreadProps(__spreadValues({}, auth), {
       businessId,
       startCutoff,
       endCutoff
@@ -32431,8 +32444,8 @@ function usePaginatedList(list, pageSize) {
     reset
   };
 }
-const SmileIcon = (_Oc) => {
-  var _Pc = _Oc, { size = 12 } = _Pc, props = __objRest(_Pc, ["size"]);
+const SmileIcon = (_Qc) => {
+  var _Rc = _Qc, { size = 12 } = _Rc, props = __objRest(_Rc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -32528,7 +32541,7 @@ function completeTaskWithUpload(baseUrl, accessToken, {
     accessToken
   );
 }
-function buildKey$n({
+function buildKey$r({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -32547,7 +32560,7 @@ function useDeleteUploadsOnTask() {
   const { businessId } = useLayerContext();
   const { mutate } = useSWR.useSWRConfig();
   const mutationResponse = useSWRMutation(
-    () => buildKey$n(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$r(__spreadProps(__spreadValues({}, auth), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, { arg: { taskId } }) => deleteUploadsOnTask(
@@ -32586,7 +32599,7 @@ function useDeleteUploadsOnTask() {
     }
   });
 }
-function buildKey$m({
+function buildKey$q({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -32605,7 +32618,7 @@ function useSubmitUserResponseForTask() {
   const { businessId } = useLayerContext();
   const { mutate } = useSWR.useSWRConfig();
   const mutationResponse = useSWRMutation(
-    () => buildKey$m(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$q(__spreadProps(__spreadValues({}, auth), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, { arg: { taskId, userResponse } }) => submitUserResponseForTask(
@@ -32651,7 +32664,7 @@ function useSubmitUserResponseForTask() {
     }
   });
 }
-function buildKey$l({
+function buildKey$p({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -32670,7 +32683,7 @@ function useUpdateTaskUploadDescription() {
   const { businessId } = useLayerContext();
   const { mutate } = useSWR.useSWRConfig();
   const mutationResponse = useSWRMutation(
-    () => buildKey$l(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$p(__spreadProps(__spreadValues({}, auth), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, { arg: { taskId, description } }) => updateTaskUploadsDescription(
@@ -32713,7 +32726,7 @@ function useUpdateTaskUploadDescription() {
     }
   });
 }
-function buildKey$k({
+function buildKey$o({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -32732,7 +32745,7 @@ function useUploadDocumentsForTask() {
   const { businessId } = useLayerContext();
   const { mutate } = useSWR.useSWRConfig();
   const mutationResponse = useSWRMutation(
-    () => buildKey$k(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$o(__spreadProps(__spreadValues({}, auth), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, { arg: { taskId, files, description } }) => completeTaskWithUpload(
@@ -33277,8 +33290,8 @@ const useBookkeepingYearsStatus = () => {
     isLoading
   };
 };
-const ArrowRightCircle = (_Qc) => {
-  var _Rc = _Qc, { size = 18 } = _Rc, props = __objRest(_Rc, ["size"]);
+const ArrowRightCircle = (_Sc) => {
+  var _Tc = _Sc, { size = 18 } = _Tc, props = __objRest(_Tc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -34760,7 +34773,7 @@ class BookkeepingConfigurationSWRResponse {
     return this.swrResponse.mutate;
   }
 }
-function buildKey$j({
+function buildKey$n({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -34781,7 +34794,7 @@ function useBookkeepingConfiguration() {
   const { apiUrl } = useEnvironment();
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
-  const queryKey = buildKey$j(__spreadProps(__spreadValues({}, auth), {
+  const queryKey = buildKey$n(__spreadProps(__spreadValues({}, auth), {
     apiUrl,
     businessId
   }));
@@ -34968,7 +34981,7 @@ const BookOnboardingCallStep = ({ title = defaultTitle$3, description = defaultD
   ] });
 };
 const BUSINESS_TAG_KEY = "business";
-function buildKey$i({
+function buildKey$m({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -34987,7 +35000,7 @@ function useUpdateBusiness() {
   const { businessId } = useLayerContext();
   const { mutate } = useSWR.useSWRConfig();
   const mutationResponse = useSWRMutation(
-    () => buildKey$i(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$m(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, { arg: body }) => updateBusiness(
@@ -35038,7 +35051,7 @@ function isPersonnelRole(role) {
   return PERSONNEL_ROLES.includes(role);
 }
 const BUSINESS_PERSONNEL_TAG_KEY = "#business-personnel";
-function buildKey$h({
+function buildKey$l({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -35057,7 +35070,7 @@ function useBusinessPersonnel() {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   return useSWR(
-    () => buildKey$h(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$l(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }) => getBusinessPersonnel(
@@ -35095,7 +35108,7 @@ function useBusinessPersonnel() {
   );
 }
 const createBusinessPersonnel = post(({ businessId }) => `/v1/businesses/${businessId}/personnel`);
-function buildKey$g({
+function buildKey$k({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -35114,7 +35127,7 @@ function useCreateBusinessPersonnel() {
   const { businessId } = useLayerContext();
   const { mutate } = useSWR.useSWRConfig();
   const mutationResponse = useSWRMutation(
-    () => buildKey$g(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$k(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }, { arg: body }) => createBusinessPersonnel(
@@ -35157,7 +35170,7 @@ function useCreateBusinessPersonnel() {
 const updateBusinessPersonnel = post(({ businessId, businessPersonnelId }) => {
   return `/v1/businesses/${businessId}/personnel/${businessPersonnelId}/update`;
 });
-function buildKey$f({
+function buildKey$j({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -35178,7 +35191,7 @@ function useUpdateBusinessPersonnel({ businessPersonnelId }) {
   const { businessId } = useLayerContext();
   const { mutate } = useSWR.useSWRConfig();
   const mutationResponse = useSWRMutation(
-    () => buildKey$f(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$j(__spreadProps(__spreadValues({}, data), {
       businessId,
       businessPersonnelId
     })),
@@ -35326,12 +35339,12 @@ const FormSection = ({ children, title }) => {
     children
   ] });
 };
-const PhoneInput = (_Sc) => {
-  var _Tc = _Sc, {
+const PhoneInput = (_Uc) => {
+  var _Vc = _Uc, {
     value,
     onChange,
     placeholder = "Phone number"
-  } = _Tc, props = __objRest(_Tc, [
+  } = _Vc, props = __objRest(_Vc, [
     "value",
     "onChange",
     "placeholder"
@@ -35623,8 +35636,8 @@ const SummaryStep = ({ onNext, title = defaultTitle$1, description = defaultDesc
     /* @__PURE__ */ jsxRuntime.jsx(Button$1, { onClick: onNext, children: nextBtnText })
   ] });
 };
-const Document = (_Uc) => {
-  var _Vc = _Uc, { size = 20 } = _Vc, props = __objRest(_Vc, ["size"]);
+const Document = (_Wc) => {
+  var _Xc = _Wc, { size = 20 } = _Xc, props = __objRest(_Xc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -35729,8 +35742,8 @@ const Document = (_Uc) => {
     })
   );
 };
-const TrendingUp = (_Wc) => {
-  var _Xc = _Wc, { size = 20 } = _Xc, props = __objRest(_Xc, ["size"]);
+const TrendingUp = (_Yc) => {
+  var _Zc = _Yc, { size = 20 } = _Zc, props = __objRest(_Zc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -35987,8 +36000,8 @@ const PlatformOnboarding = ({ onComplete }) => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__platform-onboarding-layout__footer", children: renderStepFooter() })
   ] }) });
 };
-const CoffeeIcon = (_Yc) => {
-  var _Zc = _Yc, { size = 11 } = _Zc, props = __objRest(_Zc, ["size"]);
+const CoffeeIcon = (__c) => {
+  var _$c = __c, { size = 11 } = _$c, props = __objRest(_$c, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -36059,8 +36072,8 @@ const CoffeeIcon = (_Yc) => {
     })
   );
 };
-const Link$1 = (__c) => {
-  var _$c = __c, {
+const Link$1 = (_ad) => {
+  var _bd = _ad, {
     className,
     children,
     variant = ButtonVariant.primary,
@@ -36070,7 +36083,7 @@ const Link$1 = (__c) => {
     iconAsPrimary = false,
     justify = "center",
     fullWidth
-  } = _$c, props = __objRest(_$c, [
+  } = _bd, props = __objRest(_bd, [
     "className",
     "children",
     "variant",
@@ -36162,8 +36175,8 @@ const BookkeepingUpsellBar = ({
     onClick ? /* @__PURE__ */ jsxRuntime.jsx(Button$1, { variant: ButtonVariant.secondary, onClick, children: "Schedule a demo" }) : href ? /* @__PURE__ */ jsxRuntime.jsx(Link$1, { href, target: "_blank", variant: ButtonVariant.secondary, children: "Schedule a demo" }) : null
   ] });
 };
-const ChevronRightFill = (_ad) => {
-  var _bd = _ad, { size = 18 } = _bd, props = __objRest(_bd, ["size"]);
+const ChevronRightFill = (_cd) => {
+  var _dd = _cd, { size = 18 } = _dd, props = __objRest(_dd, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -36190,7 +36203,7 @@ const ChevronRightFill = (_ad) => {
 };
 const DataTableHeader = ({ name, count, slotProps = {}, slots = {} }) => {
   const { showCount, totalCount } = count != null ? count : {};
-  const { Filters: Filters2, HeaderActions, HeaderFilters } = slots;
+  const { Filters, HeaderActions, HeaderFilters } = slots;
   return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "center", gap: "xs", className: "Layer__DataTableHeader__Header", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pis: "md", align: "center", gap: "xl", children: [
@@ -36205,8 +36218,8 @@ const DataTableHeader = ({ name, count, slotProps = {}, slots = {} }) => {
         HeaderActions && /* @__PURE__ */ jsxRuntime.jsx(HeaderActions, {})
       ] })
     ] }),
-    Filters2 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pis: "md", pie: "md", justify: "space-between", align: "center", className: "Layer__DataTableHeader__Filters", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Filters2, {}),
+    Filters && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pis: "md", pie: "md", justify: "space-between", align: "center", className: "Layer__DataTableHeader__Filters", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Filters, {}),
       slotProps.ClearFiltersButton && /* @__PURE__ */ jsxRuntime.jsx(Button, __spreadProps(__spreadValues({ variant: "outlined" }, slotProps.ClearFiltersButton), { children: "Clear All Filters" }))
     ] })
   ] });
@@ -37131,7 +37144,7 @@ class InvoiceSummaryStatsSWRResponse {
     return this.swrResponse.error !== void 0;
   }
 }
-function buildKey$e({
+function buildKey$i({
   access_token: accessToken,
   apiUrl,
   businessId
@@ -37150,7 +37163,7 @@ function useInvoiceSummaryStats() {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const response = useSWR(
-    () => buildKey$e(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$i(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
     ({ accessToken, apiUrl, businessId: businessId2 }) => getInvoiceSummaryStats(
@@ -37181,7 +37194,7 @@ var UpsertInvoiceMode = /* @__PURE__ */ ((UpsertInvoiceMode2) => {
 })(UpsertInvoiceMode || {});
 const createInvoice = post(({ businessId }) => `/v1/businesses/${businessId}/invoices`);
 const updateInvoice = put(({ businessId, invoiceId }) => `/v1/businesses/${businessId}/invoices/${invoiceId}`);
-function buildKey$d({
+function buildKey$h({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -37253,7 +37266,7 @@ const useUpsertInvoice = (props) => {
   const { mode } = props;
   const invoiceId = mode === "Update" ? props.invoiceId : void 0;
   const rawMutationResponse = useSWRMutation(
-    () => buildKey$d(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$h(__spreadProps(__spreadValues({}, data), {
       businessId,
       invoiceId
     })),
@@ -37522,7 +37535,7 @@ const RefundInvoiceReturnSchema = effect.Schema.Struct({
   data: CustomerRefundSchema
 });
 const refundInvoice = post(({ businessId, invoiceId }) => `/v1/businesses/${businessId}/invoices/${invoiceId}/refund`);
-function buildKey$c({
+function buildKey$g({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -37567,7 +37580,7 @@ const useRefundInvoice = ({ invoiceId }) => {
     return updateInvoiceWithRefund(invoice);
   }, [invoiceId]);
   const rawMutationResponse = useSWRMutation(
-    () => buildKey$c(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$g(__spreadProps(__spreadValues({}, data), {
       businessId,
       invoiceId
     })),
@@ -37755,7 +37768,7 @@ const ResetInvoiceReturnSchema = effect.Schema.Struct({
   data: InvoiceSchema
 });
 const resetInvoice = post(({ businessId, invoiceId }) => `/v1/businesses/${businessId}/invoices/${invoiceId}/reset`);
-function buildKey$b({
+function buildKey$f({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -37793,7 +37806,7 @@ const useResetInvoice = ({ invoiceId }) => {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const rawMutationResponse = useSWRMutation(
-    () => buildKey$b(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$f(__spreadProps(__spreadValues({}, data), {
       businessId,
       invoiceId
     })),
@@ -37856,7 +37869,7 @@ const VoidInvoiceReturnSchema = effect.Schema.Struct({
   data: InvoiceSchema
 });
 const voidInvoice = post(({ businessId, invoiceId }) => `/v1/businesses/${businessId}/invoices/${invoiceId}/void`);
-function buildKey$a({
+function buildKey$e({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -37894,7 +37907,7 @@ const useVoidInvoice = ({ invoiceId }) => {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const rawMutationResponse = useSWRMutation(
-    () => buildKey$a(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$e(__spreadProps(__spreadValues({}, data), {
       businessId,
       invoiceId
     })),
@@ -38013,7 +38026,7 @@ const InvoiceWriteoffSchema = effect.Schema.Struct({
 });
 const CREATE_INVOICE_WRITEOFF_TAG_KEY = "#writeoff-invoice";
 const writeoffInvoice = post(({ businessId, invoiceId }) => `/v1/businesses/${businessId}/invoices/${invoiceId}/write-off`);
-function buildKey$9({
+function buildKey$d({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -38064,7 +38077,7 @@ const useWriteoffInvoice = ({ invoiceId }) => {
     return updateInvoiceWithWriteoff(invoice);
   }, [invoiceId]);
   const rawMutationResponse = useSWRMutation(
-    () => buildKey$9(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$d(__spreadProps(__spreadValues({}, data), {
       businessId,
       invoiceId
     })),
@@ -39060,7 +39073,7 @@ var UpsertDedicatedInvoicePaymentMode = /* @__PURE__ */ ((UpsertDedicatedInvoice
 })(UpsertDedicatedInvoicePaymentMode || {});
 const createDedicatedInvoicePayment = post(({ businessId, invoiceId }) => `/v1/businesses/${businessId}/invoices/${invoiceId}/payment/`);
 const updateDedicatedInvoicePayment = put(({ businessId, invoiceId, invoicePaymentId }) => `/v1/businesses/${businessId}/invoices/${invoiceId}/payment/${invoicePaymentId}`);
-function buildKey$8({
+function buildKey$c({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -39145,7 +39158,7 @@ const useUpsertDedicatedInvoicePayment = (props) => {
     return updateInvoiceWithPayment(invoice, invoicePayment);
   }, [invoiceId]);
   const rawMutationResponse = useSWRMutation(
-    () => buildKey$8(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$c(__spreadProps(__spreadValues({}, data), {
       businessId,
       invoiceId,
       invoicePaymentId
@@ -39445,8 +39458,8 @@ const getClassnameForSubComponent = (className, suffix) => {
 };
 const METER_CLASS_NAME = "Layer__Meter";
 const Meter = react.forwardRef(
-  function Meter2(_cd, ref) {
-    var _dd = _cd, { className, label, meterOnly } = _dd, restProps = __objRest(_dd, ["className", "label", "meterOnly"]);
+  function Meter2(_ed, ref) {
+    var _fd = _ed, { className, label, meterOnly } = _fd, restProps = __objRest(_fd, ["className", "label", "meterOnly"]);
     return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Meter, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, restProps), { className: classNames(METER_CLASS_NAME, className), ref }), meterOnly && { "aria-label": label }), { children: ({ percentage, valueText }) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", fluid: true, children: [
       !meterOnly && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Label, { slot: "label", children: label }),
@@ -39561,11 +39574,11 @@ const ProfitAndLossView = (props) => {
   const containerRef = react.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(Container, { name: COMPONENT_NAME$3, ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLoss, { children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossPanel, __spreadValues({ containerRef }, props)) }) });
 };
-const ProfitAndLossPanel = (_ed) => {
-  var _fd = _ed, {
+const ProfitAndLossPanel = (_gd) => {
+  var _hd = _gd, {
     containerRef,
     stringOverrides
-  } = _fd, props = __objRest(_fd, [
+  } = _hd, props = __objRest(_hd, [
     "containerRef",
     "stringOverrides"
   ]);
@@ -39828,13 +39841,13 @@ function ExpandableDataTable({
   );
 }
 const UNIFIED_REPORT_TAG_KEY = "#unified-report";
-function buildKey$7(_gd) {
-  var _hd = _gd, {
+function buildKey$b(_id) {
+  var _jd = _id, {
     access_token: accessToken,
     apiUrl,
     businessId,
     report
-  } = _hd, dateParams = __objRest(_hd, [
+  } = _jd, dateParams = __objRest(_jd, [
     "access_token",
     "apiUrl",
     "businessId",
@@ -39850,8 +39863,8 @@ function buildKey$7(_gd) {
     }, dateParams);
   }
 }
-const getUnifiedReport = get$1((_id) => {
-  var _jd = _id, { businessId, report } = _jd, dateParams = __objRest(_jd, ["businessId", "report"]);
+const getUnifiedReport = get$1((_kd) => {
+  var _ld = _kd, { businessId, report } = _ld, dateParams = __objRest(_ld, ["businessId", "report"]);
   const parameters = toDefinedSearchParameters(__spreadValues({}, dateParams));
   return `/v1/businesses/${businessId}/reports/unified/${report}?${parameters}`;
 });
@@ -39880,13 +39893,13 @@ class UnifiedReportSWRResponse {
     return this.swrResponse.mutate;
   }
 }
-function useUnifiedReport(_kd) {
-  var _ld = _kd, { report } = _ld, dateParams = __objRest(_ld, ["report"]);
+function useUnifiedReport(_md) {
+  var _nd = _md, { report } = _nd, dateParams = __objRest(_nd, ["report"]);
   const { data: auth } = useAuth();
   const { apiUrl } = useEnvironment();
   const { businessId } = useLayerContext();
   const swrResponse = useSWR(
-    () => buildKey$7(__spreadValues(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$b(__spreadValues(__spreadProps(__spreadValues({}, auth), {
       apiUrl,
       businessId,
       report
@@ -40002,7 +40015,7 @@ class DownloadUnifiedReportSWRResponse {
     return this.swrResponse.error !== void 0;
   }
 }
-function buildKey$6({
+function buildKey$a({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -40053,7 +40066,7 @@ function useUnifiedReportDownload({ onSuccess } = {}) {
   const { businessId } = useLayerContext();
   const reportWithDateParams = useUnifiedReportWithDateParams();
   const rawMutationResponse = useSWRMutation(
-    () => buildKey$6(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$a(__spreadProps(__spreadValues({}, auth), {
       businessId,
       reportWithDateParams
     })),
@@ -40429,7 +40442,7 @@ const useBills = () => {
     refetch
   };
 };
-function buildKey$5({
+function buildKey$9({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -40563,7 +40576,7 @@ const useBillsRecordPayment = ({ refetchAllBills }) => {
     };
   }, [billsToPay, paymentDate, paymentMethod]);
   const createPaymentMutation = useSWRMutation(
-    () => buildKey$5({
+    () => buildKey$9({
       access_token: auth == null ? void 0 : auth.access_token,
       apiUrl: auth == null ? void 0 : auth.apiUrl,
       businessId,
@@ -40892,7 +40905,7 @@ const BillsPaymentRecorded = ({
     ] })
   ] });
 };
-function buildKey$4({
+function buildKey$8({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -40913,7 +40926,7 @@ const useUnpaidBillsByVendor = ({ vendorId }) => {
   const { data: auth } = useAuth();
   const { apiUrl } = useEnvironment();
   return useSWR(
-    () => buildKey$4(__spreadProps(__spreadValues({}, auth), {
+    () => buildKey$8(__spreadProps(__spreadValues({}, auth), {
       apiUrl,
       businessId,
       vendorId
@@ -41411,19 +41424,19 @@ const VendorsProvider = ({ children }) => {
   const vendors = useVendors();
   return /* @__PURE__ */ jsxRuntime.jsx(VendorsContext.Provider, { value: vendors, children });
 };
-const SelectVendor = (_md) => {
-  var _nd = _md, { withContext = true } = _nd, props = __objRest(_nd, ["withContext"]);
+const SelectVendor = (_od) => {
+  var _pd = _od, { withContext = true } = _pd, props = __objRest(_pd, ["withContext"]);
   if (withContext) {
     return /* @__PURE__ */ jsxRuntime.jsx(VendorsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectVendorContent, __spreadValues({}, props)) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(SelectVendorContent, __spreadValues({}, props));
 };
-const SelectVendorContent = (_od) => {
-  var _pd = _od, {
+const SelectVendorContent = (_qd) => {
+  var _rd = _qd, {
     value,
     onChange,
     placeholder = "Select vendor"
-  } = _pd, props = __objRest(_pd, [
+  } = _rd, props = __objRest(_rd, [
     "value",
     "onChange",
     "placeholder"
@@ -42190,8 +42203,8 @@ const BillsTableWithPanel = ({
     }
   );
 };
-const Bills = (_qd) => {
-  var _rd = _qd, { context = true } = _rd, props = __objRest(_rd, ["context"]);
+const Bills = (_sd) => {
+  var _td = _sd, { context = true } = _td, props = __objRest(_td, ["context"]);
   if (context) {
     return /* @__PURE__ */ jsxRuntime.jsx(BillsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(BillsContent, __spreadValues({}, props)) });
   }
@@ -42249,8 +42262,8 @@ const getTimezoneDisplay = (date2) => {
 };
 const LINK_CLASS_NAME = "Layer__UI__Link";
 const Link = react.forwardRef(
-  function Link2(_sd, ref) {
-    var _td = _sd, {
+  function Link2(_ud, ref) {
+    var _vd = _ud, {
       children,
       size = "md",
       ellipsis,
@@ -42259,7 +42272,7 @@ const Link = react.forwardRef(
       href,
       target,
       rel
-    } = _td, restProps = __objRest(_td, [
+    } = _vd, restProps = __objRest(_vd, [
       "children",
       "size",
       "ellipsis",
@@ -42784,6 +42797,18 @@ const VehicleSchema = effect.Schema.Struct({
   deletedAt: effect.pipe(
     effect.Schema.propertySignature(effect.Schema.NullishOr(effect.Schema.Date)),
     effect.Schema.fromKey("deleted_at")
+  ),
+  archivedAt: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.NullishOr(effect.Schema.Date)),
+    effect.Schema.fromKey("archived_at")
+  ),
+  isPrimary: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.Boolean),
+    effect.Schema.fromKey("is_primary")
+  ),
+  isEligibleForDeletion: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.Boolean),
+    effect.Schema.fromKey("is_eligible_for_deletion")
   )
 });
 effect.Schema.Struct({
@@ -42791,7 +42816,8 @@ effect.Schema.Struct({
   year: effect.Schema.Number,
   licensePlate: effect.Schema.String,
   vin: effect.Schema.String,
-  description: effect.Schema.String
+  description: effect.Schema.String,
+  isPrimary: effect.Schema.Boolean
 });
 const UpsertVehicleSchema = effect.Schema.Struct({
   makeAndModel: effect.pipe(
@@ -42804,7 +42830,11 @@ const UpsertVehicleSchema = effect.Schema.Struct({
     effect.Schema.fromKey("license_plate")
   ),
   vin: effect.Schema.NullishOr(effect.Schema.String),
-  description: effect.Schema.NullishOr(effect.Schema.String)
+  description: effect.Schema.NullishOr(effect.Schema.String),
+  isPrimary: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.Boolean),
+    effect.Schema.fromKey("is_primary")
+  )
 });
 const CalendarDateFromSelf = effect.Schema.declare(
   (input) => input instanceof date.CalendarDate
@@ -42951,6 +42981,7 @@ const TripsRouteStoreContext = react.createContext(
       selectedVehicle: null,
       purposeFilter: TripPurposeFilterValue.All
     },
+    currentTripsPage: 0,
     setTableFilters: () => {
     },
     navigate: {
@@ -42958,6 +42989,10 @@ const TripsRouteStoreContext = react.createContext(
       },
       toVehicleManagement: () => {
       }
+    },
+    actions: {
+      setCurrentTripsPage: () => {
+      }
     }
   }))
 );
@@ -42975,6 +43010,15 @@ function useTripsNavigation() {
   const store = react.useContext(TripsRouteStoreContext);
   return zustand.useStore(store, (state) => state.navigate);
 }
+function useCurrentTripsPage() {
+  const store = react.useContext(TripsRouteStoreContext);
+  const currentTripsPage = zustand.useStore(store, (state) => state.currentTripsPage);
+  const setCurrentTripsPage = zustand.useStore(store, (state) => state.actions.setCurrentTripsPage);
+  return react.useMemo(
+    () => ({ currentTripsPage, setCurrentTripsPage }),
+    [currentTripsPage, setCurrentTripsPage]
+  );
+}
 function TripsRouteStoreProvider(props) {
   const [store] = react.useState(
     () => zustand.createStore((set) => ({
@@ -42987,6 +43031,7 @@ function TripsRouteStoreProvider(props) {
         selectedVehicle: null,
         purposeFilter: TripPurposeFilterValue.All
       },
+      currentTripsPage: 0,
       setTableFilters: (patchFilters) => {
         set((state) => ({
           tableFilters: __spreadValues(__spreadValues({}, state.tableFilters), patchFilters)
@@ -43009,65 +43054,28 @@ function TripsRouteStoreProvider(props) {
             }
           }));
         }
+      },
+      actions: {
+        setCurrentTripsPage: (page) => {
+          set({ currentTripsPage: page });
+        }
       }
     }))
   );
   return /* @__PURE__ */ jsxRuntime.jsx(TripsRouteStoreContext.Provider, { value: store, children: props.children });
 }
-const getTripFormDefaultValues = (trip) => {
-  if (trip) {
-    return {
-      vehicle: trip.vehicle,
-      tripDate: trip.tripDate,
-      distance: trip.distance,
-      purpose: trip.purpose,
-      startAddress: trip.startAddress || "",
-      endAddress: trip.endAddress || "",
-      description: trip.description || ""
-    };
-  }
-  return {
-    vehicle: null,
-    tripDate: date.today(date.getLocalTimeZone()),
-    distance: BIG_DECIMAL_ZERO,
-    purpose: TripPurpose.Business,
-    startAddress: "",
-    endAddress: "",
-    description: ""
-  };
-};
-const validateTripForm = ({ trip }) => {
-  const { vehicle, tripDate, distance, purpose } = trip;
-  const errors = [];
-  if (tripDate === null) {
-    errors.push({ tripDate: "Trip date is a required field." });
-  }
-  if (tripDate && tripDate.compare(date.today(date.getLocalTimeZone())) > 0) {
-    errors.push({ tripDate: "Trip date cannot be in the future." });
-  }
-  if (!effect.BigDecimal.isPositive(distance)) {
-    errors.push({ distance: "Distance must be greater than zero." });
-  }
-  if (!purpose) {
-    errors.push({ purpose: "Purpose is a required field." });
+function useAutoResetPageIndex(filters, data) {
+  const autoResetPageIndexRef = react.useRef(false);
+  const prevFiltersRef = react.useRef(filters);
+  if (prevFiltersRef.current !== filters) {
+    autoResetPageIndexRef.current = true;
+    prevFiltersRef.current = filters;
   }
-  if (vehicle === null) {
-    errors.push({ vehicle: "Vehicle is a required field." });
-  }
-  return errors.length > 0 ? errors : null;
-};
-const convertTripFormToUpsertTrip = (form) => {
-  var _a;
-  return {
-    vehicleId: (_a = form.vehicle) == null ? void 0 : _a.id,
-    tripDate: form.tripDate,
-    distance: form.distance,
-    purpose: form.purpose,
-    startAddress: form.startAddress.trim() || null,
-    endAddress: form.endAddress.trim() || null,
-    description: form.description.trim() || null
-  };
-};
+  react.useEffect(() => {
+    autoResetPageIndexRef.current = false;
+  }, [data]);
+  return autoResetPageIndexRef;
+}
 const LIST_TRIPS_TAG_KEY = "#list-trips";
 const ListTripsResponseSchema = effect.Schema.Struct({
   data: effect.Schema.Array(TripSchema),
@@ -43191,6 +43199,243 @@ function useTripsGlobalCacheActions() {
   );
   return { patchTripByKey, forceReloadTrips };
 }
+const ListVehiclesResponseSchema = effect.Schema.Struct({
+  data: effect.Schema.Array(VehicleSchema)
+});
+const listVehicles = get$1(({ businessId, allowArchived }) => {
+  const parameters = toDefinedSearchParameters({ allowArchived });
+  return `/v1/businesses/${businessId}/mileage/vehicles?${parameters}`;
+});
+const VEHICLES_TAG_KEY = "#list-vehicles";
+function buildKey$7({
+  access_token: accessToken,
+  apiUrl,
+  businessId,
+  allowArchived
+}) {
+  if (accessToken && apiUrl) {
+    return {
+      accessToken,
+      apiUrl,
+      businessId,
+      allowArchived,
+      tags: [VEHICLES_TAG_KEY]
+    };
+  }
+}
+class ListVehiclesSWRResponse {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get data() {
+    var _a;
+    return (_a = this.swrResponse.data) == null ? void 0 : _a.data;
+  }
+  get isLoading() {
+    return this.swrResponse.isLoading;
+  }
+  get isValidating() {
+    return this.swrResponse.isValidating;
+  }
+  get isError() {
+    return this.swrResponse.error !== void 0;
+  }
+}
+function useListVehicles({ allowArchived } = {}) {
+  const { data } = useAuth();
+  const { businessId } = useLayerContext();
+  const response = useSWR(
+    () => buildKey$7(__spreadProps(__spreadValues({}, data), {
+      businessId,
+      allowArchived
+    })),
+    ({ accessToken, apiUrl, businessId: businessId2, allowArchived: allowArchived2 }) => listVehicles(
+      apiUrl,
+      accessToken,
+      {
+        params: {
+          businessId: businessId2,
+          allowArchived: allowArchived2
+        }
+      }
+    )().then(effect.Schema.decodeUnknownPromise(ListVehiclesResponseSchema))
+  );
+  return new ListVehiclesSWRResponse(response);
+}
+const withUpdatedVehicle = (updated) => (vehicle) => vehicle.id === updated.id ? updated : vehicle;
+function useVehiclesGlobalCacheActions() {
+  const { patchCache, forceReload } = useGlobalCacheActions();
+  const patchVehicleByKey = react.useCallback(
+    (updatedVehicle) => patchCache(
+      (tags) => tags.includes(VEHICLES_TAG_KEY),
+      (currentData) => {
+        if (!currentData) return currentData;
+        return __spreadProps(__spreadValues({}, currentData), {
+          data: currentData.data.map(withUpdatedVehicle(updatedVehicle))
+        });
+      }
+    ),
+    [patchCache]
+  );
+  const forceReloadVehicles = react.useCallback(
+    () => forceReload((tags) => tags.includes(VEHICLES_TAG_KEY)),
+    [forceReload]
+  );
+  return { patchVehicleByKey, forceReloadVehicles };
+}
+const DELETE_TRIP_TAG_KEY = "#delete-trip";
+const deleteTrip = del(({ businessId, tripId }) => `/v1/businesses/${businessId}/mileage/trips/${tripId}`);
+function buildKey$6({
+  access_token: accessToken,
+  apiUrl,
+  businessId,
+  tripId
+}) {
+  if (accessToken && apiUrl) {
+    return {
+      accessToken,
+      apiUrl,
+      businessId,
+      tripId,
+      tags: [DELETE_TRIP_TAG_KEY]
+    };
+  }
+}
+class DeleteTripSWRResponse {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get trigger() {
+    return this.swrResponse.trigger;
+  }
+  get isMutating() {
+    return this.swrResponse.isMutating;
+  }
+  get isError() {
+    return this.swrResponse.error !== void 0;
+  }
+}
+const useDeleteTrip = ({ tripId }) => {
+  const { data } = useAuth();
+  const { businessId } = useLayerContext();
+  const rawMutationResponse = useSWRMutation(
+    () => buildKey$6(__spreadProps(__spreadValues({}, data), {
+      businessId,
+      tripId
+    })),
+    ({ accessToken, apiUrl, businessId: businessId2, tripId: tripId2 }) => {
+      return deleteTrip(
+        apiUrl,
+        accessToken,
+        { params: { businessId: businessId2, tripId: tripId2 } }
+      );
+    },
+    {
+      revalidate: false,
+      throwOnError: true
+    }
+  );
+  const mutationResponse = new DeleteTripSWRResponse(rawMutationResponse);
+  const { forceReloadTrips } = useTripsGlobalCacheActions();
+  const { forceReloadVehicles } = useVehiclesGlobalCacheActions();
+  const originalTrigger = mutationResponse.trigger;
+  const stableProxiedTrigger = react.useCallback(
+    (...triggerParameters) => __async(null, null, function* () {
+      const triggerResult = yield originalTrigger(...triggerParameters);
+      void forceReloadTrips();
+      void forceReloadVehicles();
+      return triggerResult;
+    }),
+    [originalTrigger, forceReloadTrips, forceReloadVehicles]
+  );
+  return new Proxy(mutationResponse, {
+    get(target, prop) {
+      if (prop === "trigger") {
+        return stableProxiedTrigger;
+      }
+      return Reflect.get(target, prop);
+    }
+  });
+};
+function TripDeleteConfirmationModal({
+  isOpen,
+  onOpenChange,
+  trip
+}) {
+  const { trigger: deleteTrip2 } = useDeleteTrip({ tripId: trip.id });
+  const onConfirm = react.useCallback(() => __async(null, null, function* () {
+    yield deleteTrip2();
+  }), [deleteTrip2]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseConfirmationModal,
+    {
+      isOpen,
+      onOpenChange,
+      title: "Delete this trip?",
+      description: "This trip will be permanently deleted. This action cannot be undone.",
+      onConfirm,
+      confirmLabel: "Delete trip",
+      cancelLabel: "Cancel",
+      errorText: "Failed to delete trip. Please check your connection and try again."
+    }
+  );
+}
+const getTripFormDefaultValues = (trip) => {
+  if (trip) {
+    return {
+      vehicle: trip.vehicle,
+      tripDate: trip.tripDate,
+      distance: trip.distance,
+      purpose: trip.purpose,
+      startAddress: trip.startAddress || "",
+      endAddress: trip.endAddress || "",
+      description: trip.description || ""
+    };
+  }
+  return {
+    vehicle: null,
+    tripDate: date.today(date.getLocalTimeZone()),
+    distance: BIG_DECIMAL_ZERO,
+    purpose: TripPurpose.Business,
+    startAddress: "",
+    endAddress: "",
+    description: ""
+  };
+};
+const validateTripForm = ({ trip }) => {
+  const { vehicle, tripDate, distance, purpose } = trip;
+  const errors = [];
+  if (tripDate === null) {
+    errors.push({ tripDate: "Trip date is a required field." });
+  }
+  if (tripDate && tripDate.compare(date.today(date.getLocalTimeZone())) > 0) {
+    errors.push({ tripDate: "Trip date cannot be in the future." });
+  }
+  if (!effect.BigDecimal.isPositive(distance)) {
+    errors.push({ distance: "Distance must be greater than zero." });
+  }
+  if (!purpose) {
+    errors.push({ purpose: "Purpose is a required field." });
+  }
+  if (vehicle === null) {
+    errors.push({ vehicle: "Vehicle is a required field." });
+  }
+  return errors.length > 0 ? errors : null;
+};
+const convertTripFormToUpsertTrip = (form) => {
+  var _a;
+  return {
+    vehicleId: (_a = form.vehicle) == null ? void 0 : _a.id,
+    tripDate: form.tripDate,
+    distance: form.distance,
+    purpose: form.purpose,
+    startAddress: form.startAddress.trim() || null,
+    endAddress: form.endAddress.trim() || null,
+    description: form.description.trim() || null
+  };
+};
 const UPSERT_TRIP_TAG_KEY = "#upsert-trip";
 var UpsertTripMode = /* @__PURE__ */ ((UpsertTripMode2) => {
   UpsertTripMode2["Create"] = "Create";
@@ -43199,7 +43444,7 @@ var UpsertTripMode = /* @__PURE__ */ ((UpsertTripMode2) => {
 })(UpsertTripMode || {});
 const createTrip = post(({ businessId }) => `/v1/businesses/${businessId}/mileage/trips`);
 const updateTrip = patch(({ businessId, tripId }) => `/v1/businesses/${businessId}/mileage/trips/${tripId}`);
-function buildKey$3({
+function buildKey$5({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -43271,7 +43516,7 @@ const useUpsertTrip = (props) => {
   const { mode } = props;
   const tripId = mode === "Update" ? props.tripId : void 0;
   const rawMutationResponse = useSWRMutation(
-    () => buildKey$3(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$5(__spreadProps(__spreadValues({}, data), {
       businessId,
       tripId
     })),
@@ -43290,6 +43535,7 @@ const useUpsertTrip = (props) => {
   );
   const mutationResponse = new UpsertTripSWRResponse(rawMutationResponse);
   const { patchTripByKey, forceReloadTrips } = useTripsGlobalCacheActions();
+  const { forceReloadVehicles } = useVehiclesGlobalCacheActions();
   const originalTrigger = mutationResponse.trigger;
   const stableProxiedTrigger = react.useCallback(
     (...triggerParameters) => __async(null, null, function* () {
@@ -43299,9 +43545,10 @@ const useUpsertTrip = (props) => {
       } else {
         void forceReloadTrips();
       }
+      void forceReloadVehicles();
       return triggerResult;
     }),
-    [originalTrigger, mode, patchTripByKey, forceReloadTrips]
+    [originalTrigger, mode, patchTripByKey, forceReloadTrips, forceReloadVehicles]
   );
   return new Proxy(mutationResponse, {
     get(target, prop) {
@@ -43404,67 +43651,6 @@ const TripPurposeComboBox = ({ value, onValueChange, isReadOnly, className }) =>
     )
   ] });
 };
-const ListVehiclesResponseSchema = effect.Schema.Struct({
-  data: effect.Schema.Array(VehicleSchema)
-});
-const listVehicles = get$1(({ businessId }) => {
-  return `/v1/businesses/${businessId}/mileage/vehicles`;
-});
-const VEHICLES_TAG_KEY = "#list-vehicles";
-function buildKey$2({
-  access_token: accessToken,
-  apiUrl,
-  businessId,
-  query
-}) {
-  if (accessToken && apiUrl) {
-    return {
-      accessToken,
-      apiUrl,
-      businessId,
-      query,
-      tags: [VEHICLES_TAG_KEY]
-    };
-  }
-}
-class ListVehiclesSWRResponse {
-  constructor(swrResponse) {
-    __publicField(this, "swrResponse");
-    this.swrResponse = swrResponse;
-  }
-  get data() {
-    var _a;
-    return (_a = this.swrResponse.data) == null ? void 0 : _a.data;
-  }
-  get isLoading() {
-    return this.swrResponse.isLoading;
-  }
-  get isValidating() {
-    return this.swrResponse.isValidating;
-  }
-  get isError() {
-    return this.swrResponse.error !== void 0;
-  }
-}
-function useListVehicles() {
-  const { data } = useAuth();
-  const { businessId } = useLayerContext();
-  const response = useSWR(
-    () => buildKey$2(__spreadProps(__spreadValues({}, data), {
-      businessId
-    })),
-    ({ accessToken, apiUrl, businessId: businessId2 }) => listVehicles(
-      apiUrl,
-      accessToken,
-      {
-        params: {
-          businessId: businessId2
-        }
-      }
-    )().then(effect.Schema.decodeUnknownPromise(ListVehiclesResponseSchema))
-  );
-  return new ListVehiclesSWRResponse(response);
-}
 const getVehicleDisplayName = (vehicle) => `${vehicle.year} ${vehicle.makeAndModel}`;
 class VehicleAsOption {
   constructor(vehicle) {
@@ -43683,7 +43869,7 @@ const TripsTableHeaderMenu = () => {
   );
 };
 const COMPONENT_NAME = "TripsTable";
-const getColumnConfig = (onSelectTrip) => ({
+const getColumnConfig = ({ onSelectTrip, onDeleteTrip }) => ({
   [
     "TripDate"
     /* TripDate */
@@ -43747,27 +43933,32 @@ const getColumnConfig = (onSelectTrip) => ({
     cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, withTooltip: true, children: row.description })
   },
   [
-    "Expand"
-    /* Expand */
+    "Actions"
+    /* Actions */
   ]: {
-    id: "Expand",
-    cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Button, { inset: true, icon: true, onPress: () => onSelectTrip(row), "aria-label": "View trip", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightFill, {}) })
+    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 }) })
+    ] })
   }
 });
 const TripsTable = () => {
   var _a;
   const [isTripDrawerOpen, setIsTripDrawerOpen] = react.useState(false);
   const [selectedTrip, setSelectedTrip] = react.useState(null);
+  const [tripToDelete, setTripToDelete] = react.useState(null);
   const { tableFilters, setTableFilters } = useTripsTableFilters();
   const { query, selectedVehicle, purposeFilter } = tableFilters;
+  const { currentTripsPage, setCurrentTripsPage } = useCurrentTripsPage();
   const { inputValue, searchQuery, handleInputChange } = useDebouncedSearchInput({ initialInputState: query });
   react.useEffect(() => {
     setTableFilters({ query: searchQuery });
   }, [searchQuery, setTableFilters]);
   const filterParams = react.useMemo(() => {
     const params = {};
-    if (searchQuery) {
-      params.query = searchQuery;
+    if (query) {
+      params.query = query;
     }
     if (selectedVehicle) {
       params.vehicleId = selectedVehicle.id;
@@ -43776,9 +43967,10 @@ const TripsTable = () => {
       params.purpose = purposeFilter;
     }
     return params;
-  }, [searchQuery, selectedVehicle, purposeFilter]);
+  }, [query, selectedVehicle, purposeFilter]);
   const { data, isLoading, isError, size, setSize } = useListTrips(filterParams);
   const trips = react.useMemo(() => data == null ? void 0 : data.flatMap(({ data: data2 }) => data2), [data]);
+  const autoResetPageIndexRef = useAutoResetPageIndex(filterParams, data);
   const paginationMeta = (_a = data == null ? void 0 : data[data.length - 1]) == null ? void 0 : _a.meta.pagination;
   const hasMore = paginationMeta == null ? void 0 : paginationMeta.hasMore;
   const fetchMore = react.useCallback(() => {
@@ -43790,17 +43982,23 @@ const TripsTable = () => {
     setSelectedTrip(trip);
     setIsTripDrawerOpen(true);
   }, []);
+  const onDeleteTrip = react.useCallback((trip) => {
+    setTripToDelete(trip);
+  }, []);
   const onRecordTrip = react.useCallback(() => {
     setSelectedTrip(null);
     setIsTripDrawerOpen(true);
   }, []);
   const paginationProps = react.useMemo(() => {
     return {
+      initialPage: currentTripsPage,
+      onSetPage: setCurrentTripsPage,
       pageSize: 20,
       hasMore,
-      fetchMore
+      fetchMore,
+      autoResetPageIndexRef
     };
-  }, [fetchMore, hasMore]);
+  }, [currentTripsPage, setCurrentTripsPage, fetchMore, hasMore, autoResetPageIndexRef]);
   const handlePurposeFilterChange = react.useCallback((newPurposeFilter) => {
     setTableFilters({ purposeFilter: newPurposeFilter });
   }, [setTableFilters]);
@@ -43851,7 +44049,7 @@ const TripsTable = () => {
       spacing: true
     }
   );
-  const columnConfig = react.useMemo(() => getColumnConfig(onSelectTrip), [onSelectTrip]);
+  const columnConfig = react.useMemo(() => getColumnConfig({ onSelectTrip, onDeleteTrip }), [onSelectTrip, onDeleteTrip]);
   const HeaderFilters = react.useCallback(() => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(PurposeToggle, {}),
     /* @__PURE__ */ jsxRuntime.jsx(VehicleFilter, {})
@@ -43920,6 +44118,18 @@ const TripsTable = () => {
           )
         ] })
       }
+    ),
+    tripToDelete && /* @__PURE__ */ jsxRuntime.jsx(
+      TripDeleteConfirmationModal,
+      {
+        isOpen: !!tripToDelete,
+        onOpenChange: (isOpen) => {
+          if (!isOpen) {
+            setTripToDelete(null);
+          }
+        },
+        trip: tripToDelete
+      }
     )
   ] });
 };
@@ -43930,7 +44140,8 @@ const getVehicleFormDefaultValues = (vehicle) => {
       year: vehicle.year,
       licensePlate: vehicle.licensePlate || "",
       vin: vehicle.vin || "",
-      description: vehicle.description || ""
+      description: vehicle.description || "",
+      isPrimary: vehicle.isPrimary
     };
   }
   return {
@@ -43938,7 +44149,8 @@ const getVehicleFormDefaultValues = (vehicle) => {
     year: Number.NaN,
     licensePlate: "",
     vin: "",
-    description: ""
+    description: "",
+    isPrimary: false
   };
 };
 const validateVehicleForm = ({ vehicle }) => {
@@ -43962,7 +44174,8 @@ const convertVehicleFormToUpsertVehicle = (form) => {
     year: form.year,
     licensePlate: form.licensePlate.trim() || null,
     vin: form.vin.trim() || null,
-    description: form.description.trim() || null
+    description: form.description.trim() || null,
+    isPrimary: form.isPrimary
   };
 };
 const UPSERT_VEHICLE_TAG_KEY = "#upsert-vehicle";
@@ -43973,7 +44186,7 @@ var UpsertVehicleMode = /* @__PURE__ */ ((UpsertVehicleMode2) => {
 })(UpsertVehicleMode || {});
 const createVehicle = post(({ businessId }) => `/v1/businesses/${businessId}/mileage/vehicles`);
 const updateVehicle = patch(({ businessId, vehicleId }) => `/v1/businesses/${businessId}/mileage/vehicles/${vehicleId}`);
-function buildKey$1({
+function buildKey$4({
   access_token: accessToken,
   apiUrl,
   businessId,
@@ -43992,6 +44205,24 @@ function buildKey$1({
 const UpsertVehicleReturnSchema = effect.Schema.Struct({
   data: VehicleSchema
 });
+class UpsertVehicleSWRResponse {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get trigger() {
+    return this.swrResponse.trigger;
+  }
+  get isMutating() {
+    return this.swrResponse.isMutating;
+  }
+  get data() {
+    return this.swrResponse.data;
+  }
+  get error() {
+    return this.swrResponse.error;
+  }
+}
 const CreateParamsSchema = effect.Schema.Struct({
   businessId: effect.Schema.UUID,
   vehicleId: effect.Schema.Undefined
@@ -44025,11 +44256,10 @@ function getRequestFn(mode, params) {
 const useUpsertVehicle = (props) => {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
-  const { mutate } = useSWR.useSWRConfig();
   const { mode } = props;
   const vehicleId = mode === "Update" ? props.vehicleId : void 0;
   const rawMutationResponse = useSWRMutation(
-    () => buildKey$1(__spreadProps(__spreadValues({}, data), {
+    () => buildKey$4(__spreadProps(__spreadValues({}, data), {
       businessId,
       vehicleId
     })),
@@ -44047,43 +44277,31 @@ const useUpsertVehicle = (props) => {
     }
   );
   const mutationResponse = new UpsertVehicleSWRResponse(rawMutationResponse);
+  const { patchVehicleByKey, forceReloadVehicles } = useVehiclesGlobalCacheActions();
+  const { forceReloadTrips } = useTripsGlobalCacheActions();
   const originalTrigger = mutationResponse.trigger;
   const stableProxiedTrigger = react.useCallback(
     (...triggerParameters) => __async(null, null, function* () {
       const triggerResult = yield originalTrigger(...triggerParameters);
-      void mutate((key) => {
-        if (typeof key === "object" && key !== null && "tags" in key) {
-          const tags = key.tags;
-          return tags.includes(VEHICLES_TAG_KEY);
-        }
-        return false;
-      });
+      if (mode === "Update") {
+        void patchVehicleByKey(triggerResult.data);
+        void forceReloadTrips();
+      } else {
+        void forceReloadVehicles();
+      }
       return triggerResult;
     }),
-    [originalTrigger, mutate]
+    [originalTrigger, mode, patchVehicleByKey, forceReloadTrips, forceReloadVehicles]
   );
-  return __spreadProps(__spreadValues({}, mutationResponse), {
-    trigger: stableProxiedTrigger
+  return new Proxy(mutationResponse, {
+    get(target, prop) {
+      if (prop === "trigger") {
+        return stableProxiedTrigger;
+      }
+      return Reflect.get(target, prop);
+    }
   });
 };
-class UpsertVehicleSWRResponse {
-  constructor(swrResponse) {
-    __publicField(this, "swrResponse");
-    this.swrResponse = swrResponse;
-  }
-  get trigger() {
-    return this.swrResponse.trigger;
-  }
-  get isMutating() {
-    return this.swrResponse.isMutating;
-  }
-  get data() {
-    return this.swrResponse.data;
-  }
-  get error() {
-    return this.swrResponse.error;
-  }
-}
 const useVehicleForm = (props) => {
   const [submitError, setSubmitError] = react.useState(void 0);
   const { onSuccess, vehicle } = props;
@@ -44199,6 +44417,15 @@ const VehicleForm = (props) => {
         className: `${VEHICLE_FORM_FIELD_CSS_PREFIX}__Description`
       }
     ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "isPrimary", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
+      field.FormSwitchField,
+      {
+        label: "Set as primary vehicle",
+        inline: true,
+        isReadOnly,
+        className: `${VEHICLE_FORM_FIELD_CSS_PREFIX}__IsPrimary`
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsx(VStack, { justify: "end", className: `${VEHICLE_FORM_CSS_PREFIX}__Submit`, children: /* @__PURE__ */ jsxRuntime.jsx(form.Subscribe, { selector: (state) => [state.canSubmit, state.isSubmitting], children: ([canSubmit, isSubmitting]) => /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
@@ -44213,6 +44440,309 @@ const VehicleForm = (props) => {
     ) }) })
   ] });
 };
+const ARCHIVE_VEHICLE_TAG_KEY = "#archive-vehicle";
+const ArchiveVehicleReturnSchema = effect.Schema.Struct({
+  data: VehicleSchema
+});
+const archiveVehicle = post(({ businessId, vehicleId }) => `/v1/businesses/${businessId}/mileage/vehicles/${vehicleId}/archive`);
+function buildKey$3({
+  access_token: accessToken,
+  apiUrl,
+  businessId,
+  vehicleId
+}) {
+  if (accessToken && apiUrl) {
+    return {
+      accessToken,
+      apiUrl,
+      businessId,
+      vehicleId,
+      tags: [ARCHIVE_VEHICLE_TAG_KEY]
+    };
+  }
+}
+class ArchiveVehicleSWRResponse {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get data() {
+    return this.swrResponse.data;
+  }
+  get trigger() {
+    return this.swrResponse.trigger;
+  }
+  get isMutating() {
+    return this.swrResponse.isMutating;
+  }
+  get isError() {
+    return this.swrResponse.error !== void 0;
+  }
+}
+const useArchiveVehicle = ({ vehicleId }) => {
+  const { data } = useAuth();
+  const { businessId } = useLayerContext();
+  const rawMutationResponse = useSWRMutation(
+    () => buildKey$3(__spreadProps(__spreadValues({}, data), {
+      businessId,
+      vehicleId
+    })),
+    ({ accessToken, apiUrl, businessId: businessId2, vehicleId: vehicleId2 }) => {
+      return archiveVehicle(
+        apiUrl,
+        accessToken,
+        { params: { businessId: businessId2, vehicleId: vehicleId2 } }
+      ).then(effect.Schema.decodeUnknownPromise(ArchiveVehicleReturnSchema));
+    },
+    {
+      revalidate: false,
+      throwOnError: true
+    }
+  );
+  const mutationResponse = new ArchiveVehicleSWRResponse(rawMutationResponse);
+  const { patchVehicleByKey } = useVehiclesGlobalCacheActions();
+  const originalTrigger = mutationResponse.trigger;
+  const stableProxiedTrigger = react.useCallback(
+    (...triggerParameters) => __async(null, null, function* () {
+      const triggerResult = yield originalTrigger(...triggerParameters);
+      void patchVehicleByKey(triggerResult.data);
+      return triggerResult;
+    }),
+    [originalTrigger, patchVehicleByKey]
+  );
+  return new Proxy(mutationResponse, {
+    get(target, prop) {
+      if (prop === "trigger") {
+        return stableProxiedTrigger;
+      }
+      return Reflect.get(target, prop);
+    }
+  });
+};
+function VehicleArchiveConfirmationModal({
+  isOpen,
+  onOpenChange,
+  vehicle
+}) {
+  const { trigger: archiveVehicle2 } = useArchiveVehicle({ vehicleId: vehicle.id });
+  const onConfirm = react.useCallback(() => __async(null, null, function* () {
+    yield archiveVehicle2();
+  }), [archiveVehicle2]);
+  const vehicleName = getVehicleDisplayName(vehicle);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseConfirmationModal,
+    {
+      isOpen,
+      onOpenChange,
+      title: "Archive this vehicle?",
+      description: `${vehicleName} will be hidden from your active vehicles list. You can reactivate it at any time.`,
+      onConfirm,
+      confirmLabel: "Archive vehicle",
+      cancelLabel: "Cancel",
+      errorText: "Failed to archive vehicle. Please check your connection and try again."
+    }
+  );
+}
+const DELETE_VEHICLE_TAG_KEY = "#delete-vehicle";
+const deleteVehicle = del(({ businessId, vehicleId }) => `/v1/businesses/${businessId}/mileage/vehicles/${vehicleId}`);
+function buildKey$2({
+  access_token: accessToken,
+  apiUrl,
+  businessId,
+  vehicleId
+}) {
+  if (accessToken && apiUrl) {
+    return {
+      accessToken,
+      apiUrl,
+      businessId,
+      vehicleId,
+      tags: [DELETE_VEHICLE_TAG_KEY]
+    };
+  }
+}
+class DeleteVehicleSWRResponse {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get trigger() {
+    return this.swrResponse.trigger;
+  }
+  get isMutating() {
+    return this.swrResponse.isMutating;
+  }
+  get isError() {
+    return this.swrResponse.error !== void 0;
+  }
+}
+const useDeleteVehicle = ({ vehicleId }) => {
+  const { data } = useAuth();
+  const { businessId } = useLayerContext();
+  const rawMutationResponse = useSWRMutation(
+    () => buildKey$2(__spreadProps(__spreadValues({}, data), {
+      businessId,
+      vehicleId
+    })),
+    ({ accessToken, apiUrl, businessId: businessId2, vehicleId: vehicleId2 }) => {
+      return deleteVehicle(
+        apiUrl,
+        accessToken,
+        { params: { businessId: businessId2, vehicleId: vehicleId2 } }
+      );
+    },
+    {
+      revalidate: false,
+      throwOnError: true
+    }
+  );
+  const mutationResponse = new DeleteVehicleSWRResponse(rawMutationResponse);
+  const { forceReloadVehicles } = useVehiclesGlobalCacheActions();
+  const originalTrigger = mutationResponse.trigger;
+  const stableProxiedTrigger = react.useCallback(
+    (...triggerParameters) => __async(null, null, function* () {
+      const triggerResult = yield originalTrigger(...triggerParameters);
+      void forceReloadVehicles();
+      return triggerResult;
+    }),
+    [originalTrigger, forceReloadVehicles]
+  );
+  return new Proxy(mutationResponse, {
+    get(target, prop) {
+      if (prop === "trigger") {
+        return stableProxiedTrigger;
+      }
+      return Reflect.get(target, prop);
+    }
+  });
+};
+function VehicleDeleteConfirmationModal({
+  isOpen,
+  onOpenChange,
+  vehicle
+}) {
+  const { trigger: deleteVehicle2 } = useDeleteVehicle({ vehicleId: vehicle.id });
+  const onConfirm = react.useCallback(() => __async(null, null, function* () {
+    yield deleteVehicle2();
+  }), [deleteVehicle2]);
+  const vehicleName = getVehicleDisplayName(vehicle);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseConfirmationModal,
+    {
+      isOpen,
+      onOpenChange,
+      title: "Delete this vehicle?",
+      description: `${vehicleName} will be permanently deleted. This action cannot be undone.`,
+      onConfirm,
+      confirmLabel: "Delete vehicle",
+      cancelLabel: "Cancel",
+      errorText: "Failed to delete vehicle. Please check your connection and try again."
+    }
+  );
+}
+const REACTIVATE_VEHICLE_TAG_KEY = "#reactivate-vehicle";
+const ReactivateVehicleReturnSchema = effect.Schema.Struct({
+  data: VehicleSchema
+});
+const reactivateVehicle = post(({ businessId, vehicleId }) => `/v1/businesses/${businessId}/mileage/vehicles/${vehicleId}/reactivate`);
+function buildKey$1({
+  access_token: accessToken,
+  apiUrl,
+  businessId,
+  vehicleId
+}) {
+  if (accessToken && apiUrl) {
+    return {
+      accessToken,
+      apiUrl,
+      businessId,
+      vehicleId,
+      tags: [REACTIVATE_VEHICLE_TAG_KEY]
+    };
+  }
+}
+class ReactivateVehicleSWRResponse {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get data() {
+    return this.swrResponse.data;
+  }
+  get trigger() {
+    return this.swrResponse.trigger;
+  }
+  get isMutating() {
+    return this.swrResponse.isMutating;
+  }
+  get isError() {
+    return this.swrResponse.error !== void 0;
+  }
+}
+const useReactivateVehicle = ({ vehicleId }) => {
+  const { data } = useAuth();
+  const { businessId } = useLayerContext();
+  const rawMutationResponse = useSWRMutation(
+    () => buildKey$1(__spreadProps(__spreadValues({}, data), {
+      businessId,
+      vehicleId
+    })),
+    ({ accessToken, apiUrl, businessId: businessId2, vehicleId: vehicleId2 }) => {
+      return reactivateVehicle(
+        apiUrl,
+        accessToken,
+        { params: { businessId: businessId2, vehicleId: vehicleId2 } }
+      ).then(effect.Schema.decodeUnknownPromise(ReactivateVehicleReturnSchema));
+    },
+    {
+      revalidate: false,
+      throwOnError: true
+    }
+  );
+  const mutationResponse = new ReactivateVehicleSWRResponse(rawMutationResponse);
+  const { patchVehicleByKey } = useVehiclesGlobalCacheActions();
+  const originalTrigger = mutationResponse.trigger;
+  const stableProxiedTrigger = react.useCallback(
+    (...triggerParameters) => __async(null, null, function* () {
+      const triggerResult = yield originalTrigger(...triggerParameters);
+      void patchVehicleByKey(triggerResult.data);
+      return triggerResult;
+    }),
+    [originalTrigger, patchVehicleByKey]
+  );
+  return new Proxy(mutationResponse, {
+    get(target, prop) {
+      if (prop === "trigger") {
+        return stableProxiedTrigger;
+      }
+      return Reflect.get(target, prop);
+    }
+  });
+};
+function VehicleReactivateConfirmationModal({
+  isOpen,
+  onOpenChange,
+  vehicle
+}) {
+  const { trigger: reactivateVehicle2 } = useReactivateVehicle({ vehicleId: vehicle.id });
+  const onConfirm = react.useCallback(() => __async(null, null, function* () {
+    yield reactivateVehicle2();
+  }), [reactivateVehicle2]);
+  const vehicleName = getVehicleDisplayName(vehicle);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseConfirmationModal,
+    {
+      isOpen,
+      onOpenChange,
+      title: "Reactivate this vehicle?",
+      description: `${vehicleName} will be restored to your active vehicles list and available for tracking trips.`,
+      onConfirm,
+      confirmLabel: "Reactivate vehicle",
+      cancelLabel: "Cancel",
+      errorText: "Failed to reactivate vehicle. Please check your connection and try again."
+    }
+  );
+}
 const VEHICLE_CARD_FIELDS = [
   { label: "Make and model", key: "makeAndModel" },
   { label: "Year", key: "year" },
@@ -44221,20 +44751,73 @@ const VEHICLE_CARD_FIELDS = [
   { label: "Description", key: "description" }
 ];
 const VehicleCard = ({ vehicle, onEdit }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "Layer__VehicleCard", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "md", pi: "md", pb: "md", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "center", gap: "md", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Heading$1, { size: "sm", ellipsis: true, children: getVehicleDisplayName(vehicle) }),
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Car, { size: 20, className: "Layer__VehicleCard__icon" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "xs", children: VEHICLE_CARD_FIELDS.map(({ label, key }) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", gap: "md", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", variant: "subtle", children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", withTooltip: true, children: vehicle[key] || "-" })
-    ] }, key)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "text", onPress: () => onEdit(vehicle), children: "Edit vehicle" })
-  ] }) });
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = react.useState(false);
+  const [isArchiveModalOpen, setIsArchiveModalOpen] = react.useState(false);
+  const [isReactivateModalOpen, setIsReactivateModalOpen] = react.useState(false);
+  const vehicleName = getVehicleDisplayName(vehicle);
+  const isArchived = vehicle.archivedAt !== null && vehicle.archivedAt !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "Layer__VehicleCard", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pi: "md", pbs: "md", pbe: "xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "md", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "center", gap: "md", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "Layer__VehicleCard__Header", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Heading$1, { size: "sm", ellipsis: true, children: vehicleName }),
+            vehicle.isPrimary && /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: BadgeSize.SMALL, variant: BadgeVariant.INFO, children: "Primary" }),
+            isArchived && /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: BadgeSize.SMALL, variant: BadgeVariant.WARNING, children: "Archived" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Car, { size: 20, className: "Layer__VehicleCard__Icon" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "xs", children: VEHICLE_CARD_FIELDS.map(({ label, key }) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", gap: "md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", variant: "subtle", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", withTooltip: true, children: vehicle[key] || "-" })
+        ] }, key)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(VStack, { pbs: "md", pbe: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(Separator, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "3xs", justify: "end", children: [
+        !isArchived && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onPress: () => onEdit(vehicle), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { size: 16 }),
+          "Edit"
+        ] }),
+        isArchived ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onPress: () => setIsReactivateModalOpen(true), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { size: 16 }),
+          "Reactivate"
+        ] }) : vehicle.isEligibleForDeletion ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onPress: () => setIsDeleteModalOpen(true), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 16 }),
+          "Delete"
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onPress: () => setIsArchiveModalOpen(true), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Archive, { size: 16 }),
+          "Archive"
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      VehicleDeleteConfirmationModal,
+      {
+        isOpen: isDeleteModalOpen,
+        onOpenChange: setIsDeleteModalOpen,
+        vehicle
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      VehicleArchiveConfirmationModal,
+      {
+        isOpen: isArchiveModalOpen,
+        onOpenChange: setIsArchiveModalOpen,
+        vehicle
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      VehicleReactivateConfirmationModal,
+      {
+        isOpen: isReactivateModalOpen,
+        onOpenChange: setIsReactivateModalOpen,
+        vehicle
+      }
+    )
+  ] });
 };
-const VehicleManagementGrid = ({ onEditVehicle }) => {
-  const { data, isLoading, isError } = useListVehicles();
+const VehicleManagementGrid = ({ onEditVehicle, showArchived }) => {
+  const { data, isLoading, isError } = useListVehicles({ allowArchived: showArchived });
   const vehicles = react.useMemo(() => data ? asMutable(data) : void 0, [data]);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(VStack, { align: "center", justify: "center", pi: "lg", pb: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) });
@@ -44264,9 +44847,12 @@ const VehicleManagementGrid = ({ onEditVehicle }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(HStack, { className: "Layer__VehicleManagementGrid", children: vehicles.map((vehicle) => /* @__PURE__ */ jsxRuntime.jsx(VehicleCard, { vehicle, onEdit: onEditVehicle }, vehicle.id)) });
 };
-const VehicleManagementDetailHeader = ({ onAddVehicle }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Heading$1, { size: "sm", children: "Manage vehicles" }),
+const VehicleManagementDetailHeader = ({ onAddVehicle, showArchived, onShowArchivedChange }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", gap: "3xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Heading$1, { size: "sm", children: "Manage vehicles" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Switch, { isSelected: showArchived, onChange: onShowArchivedChange, children: /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", noWrap: true, children: "Show archived" }) })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "solid", onPress: onAddVehicle, children: [
       "Add Vehicle",
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 14 })
@@ -44277,6 +44863,7 @@ const VehicleManagementDetail = () => {
   const { toTripsTable } = useTripsNavigation();
   const [isVehicleDrawerOpen, setIsVehicleDrawerOpen] = react.useState(false);
   const [selectedVehicle, setSelectedVehicle] = react.useState(void 0);
+  const [showArchived, setShowArchived] = react.useState(false);
   const handleAddVehicle = react.useCallback(() => {
     setSelectedVehicle(void 0);
     setIsVehicleDrawerOpen(true);
@@ -44289,9 +44876,20 @@ const VehicleManagementDetail = () => {
     setIsVehicleDrawerOpen(false);
     setSelectedVehicle(void 0);
   }, []);
-  const Header3 = react.useCallback(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx(VehicleManagementDetailHeader, { onAddVehicle: handleAddVehicle });
-  }, [handleAddVehicle]);
+  const stateRef = react.useRef({ showArchived, setShowArchived, handleAddVehicle });
+  stateRef.current = { showArchived, setShowArchived, handleAddVehicle };
+  const HeaderRef = react.useRef(() => {
+    const { showArchived: currentShowArchived, setShowArchived: currentSetShowArchived, handleAddVehicle: currentHandleAddVehicle } = stateRef.current;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      VehicleManagementDetailHeader,
+      {
+        onAddVehicle: currentHandleAddVehicle,
+        showArchived: currentShowArchived,
+        onShowArchivedChange: currentSetShowArchived
+      }
+    );
+  });
+  const Header3 = HeaderRef.current;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       BaseDetailView,
@@ -44299,7 +44897,7 @@ const VehicleManagementDetail = () => {
         slots: { Header: Header3, BackIcon: BackArrow },
         name: "VehicleManagementDetail",
         onGoBack: toTripsTable,
-        children: /* @__PURE__ */ jsxRuntime.jsx(VehicleManagementGrid, { onEditVehicle: handleEditVehicle })
+        children: /* @__PURE__ */ jsxRuntime.jsx(VehicleManagementGrid, { onEditVehicle: handleEditVehicle, showArchived })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(Drawer, { isOpen: isVehicleDrawerOpen, onOpenChange: setIsVehicleDrawerOpen, "aria-label": selectedVehicle ? "Vehicle details" : "Add vehicle", children: ({ close: close2 }) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pb: "lg", children: [
@@ -44378,7 +44976,7 @@ const ProjectProfitabilityView = ({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            Select$1,
+            ReactSelect,
             {
               className: "Layer__category-menu Layer__select",
               classNamePrefix: "Layer__select",
@@ -44965,14 +45563,14 @@ const BusinessProvider = ({
     }
   );
 };
-const LayerProvider = (_ud) => {
-  var _vd = _ud, {
+const LayerProvider = (_wd) => {
+  var _xd = _wd, {
     appId,
     appSecret,
     businessAccessToken,
     environment,
     usePlaidSandbox
-  } = _vd, restProps = __objRest(_vd, [
+  } = _xd, restProps = __objRest(_xd, [
     "appId",
     "appSecret",
     "businessAccessToken",