@layerfi/components 0.1.106-alpha.1 → 0.1.107-alpha

package/dist/esm/index.mjs

@@ -3779,7 +3779,7 @@ var require_lodash = __commonJS({
         }
         function reject(collection, predicate) {
           var func = isArray(collection) ? arrayFilter : baseFilter;
-          return func(collection, negate(getIteratee(predicate, 3)));
+          return func(collection, negate2(getIteratee(predicate, 3)));
         }
         function sample(collection) {
           var func = isArray(collection) ? arraySample : baseSample;
@@ -3893,17 +3893,17 @@ var require_lodash = __commonJS({
           result2.placeholder = curryRight.placeholder;
           return result2;
         }
-        function debounce7(func, wait, options) {
+        function debounce7(func, wait, options2) {
           var lastArgs, lastThis, maxWait, result2, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
           if (typeof func != "function") {
             throw new TypeError2(FUNC_ERROR_TEXT);
           }
           wait = toNumber(wait) || 0;
-          if (isObject(options)) {
-            leading = !!options.leading;
-            maxing = "maxWait" in options;
-            maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-            trailing = "trailing" in options ? !!options.trailing : trailing;
+          if (isObject(options2)) {
+            leading = !!options2.leading;
+            maxing = "maxWait" in options2;
+            maxWait = maxing ? nativeMax(toNumber(options2.maxWait) || 0, wait) : maxWait;
+            trailing = "trailing" in options2 ? !!options2.trailing : trailing;
           }
           function invokeFunc(time) {
             var args = lastArgs, thisArg = lastThis;
@@ -4000,7 +4000,7 @@ var require_lodash = __commonJS({
           return memoized;
         }
         memoize.Cache = MapCache;
-        function negate(predicate) {
+        function negate2(predicate) {
           if (typeof predicate != "function") {
             throw new TypeError2(FUNC_ERROR_TEXT);
           }
@@ -4064,14 +4064,14 @@ var require_lodash = __commonJS({
             return apply(func, this, otherArgs);
           });
         }
-        function throttle(func, wait, options) {
+        function throttle(func, wait, options2) {
           var leading = true, trailing = true;
           if (typeof func != "function") {
             throw new TypeError2(FUNC_ERROR_TEXT);
           }
-          if (isObject(options)) {
-            leading = "leading" in options ? !!options.leading : leading;
-            trailing = "trailing" in options ? !!options.trailing : trailing;
+          if (isObject(options2)) {
+            leading = "leading" in options2 ? !!options2.leading : leading;
+            trailing = "trailing" in options2 ? !!options2.trailing : trailing;
           }
           return debounce7(func, wait, {
             "leading": leading,
@@ -4161,7 +4161,7 @@ var require_lodash = __commonJS({
         function isEqual2(value, other) {
           return baseIsEqual(value, other);
         }
-        function isEqualWith(value, other, customizer) {
+        function isEqualWith2(value, other, customizer) {
           customizer = typeof customizer == "function" ? customizer : undefined2;
           var result2 = customizer ? customizer(value, other) : undefined2;
           return result2 === undefined2 ? baseIsEqual(value, other, undefined2, customizer) : !!result2;
@@ -4469,7 +4469,7 @@ var require_lodash = __commonJS({
           return result2;
         });
         function omitBy(object, predicate) {
-          return pickBy(object, negate(getIteratee(predicate)));
+          return pickBy(object, negate2(getIteratee(predicate)));
         }
         var pick = flatRest(function(object, paths) {
           return object == null ? {} : basePick(object, paths);
@@ -4714,20 +4714,20 @@ var require_lodash = __commonJS({
           target = baseToString(target);
           return string.slice(position, position + target.length) == target;
         }
-        function template(string, options, guard) {
+        function template(string, options2, guard) {
           var settings = lodash.templateSettings;
-          if (guard && isIterateeCall(string, options, guard)) {
-            options = undefined2;
+          if (guard && isIterateeCall(string, options2, guard)) {
+            options2 = undefined2;
           }
           string = toString(string);
-          options = assignInWith({}, options, settings, customDefaultsAssignIn);
-          var imports = assignInWith({}, options.imports, settings.imports, customDefaultsAssignIn), importsKeys = keys(imports), importsValues = baseValues(imports, importsKeys);
-          var isEscaping, isEvaluating, index = 0, interpolate = options.interpolate || reNoMatch, source = "__p += '";
+          options2 = assignInWith({}, options2, settings, customDefaultsAssignIn);
+          var imports = assignInWith({}, options2.imports, settings.imports, customDefaultsAssignIn), importsKeys = keys(imports), importsValues = baseValues(imports, importsKeys);
+          var isEscaping, isEvaluating, index = 0, interpolate = options2.interpolate || reNoMatch, source = "__p += '";
           var reDelimiters = RegExp2(
-            (options.escape || reNoMatch).source + "|" + interpolate.source + "|" + (interpolate === reInterpolate ? reEsTemplate : reNoMatch).source + "|" + (options.evaluate || reNoMatch).source + "|$",
+            (options2.escape || reNoMatch).source + "|" + interpolate.source + "|" + (interpolate === reInterpolate ? reEsTemplate : reNoMatch).source + "|" + (options2.evaluate || reNoMatch).source + "|$",
             "g"
           );
-          var sourceURL = "//# sourceURL=" + (hasOwnProperty.call(options, "sourceURL") ? (options.sourceURL + "").replace(/\s/g, " ") : "lodash.templateSources[" + ++templateCounter + "]") + "\n";
+          var sourceURL = "//# sourceURL=" + (hasOwnProperty.call(options2, "sourceURL") ? (options2.sourceURL + "").replace(/\s/g, " ") : "lodash.templateSources[" + ++templateCounter + "]") + "\n";
           string.replace(reDelimiters, function(match, escapeValue, interpolateValue, esTemplateValue, evaluateValue, offset2) {
             interpolateValue || (interpolateValue = esTemplateValue);
             source += string.slice(index, offset2).replace(reUnescapedString, escapeStringChar);
@@ -4746,7 +4746,7 @@ var require_lodash = __commonJS({
             return match;
           });
           source += "';\n";
-          var variable = hasOwnProperty.call(options, "variable") && options.variable;
+          var variable = hasOwnProperty.call(options2, "variable") && options2.variable;
           if (!variable) {
             source = "with (obj) {\n" + source + "\n}\n";
           } else if (reForbiddenIdentifierChars.test(variable)) {
@@ -4802,12 +4802,12 @@ var require_lodash = __commonJS({
           var strSymbols = stringToArray(string), start = charsStartIndex(strSymbols, stringToArray(chars));
           return castSlice(strSymbols, start).join("");
         }
-        function truncate(string, options) {
+        function truncate(string, options2) {
           var length = DEFAULT_TRUNC_LENGTH, omission = DEFAULT_TRUNC_OMISSION;
-          if (isObject(options)) {
-            var separator = "separator" in options ? options.separator : separator;
-            length = "length" in options ? toInteger(options.length) : length;
-            omission = "omission" in options ? baseToString(options.omission) : omission;
+          if (isObject(options2)) {
+            var separator = "separator" in options2 ? options2.separator : separator;
+            length = "length" in options2 ? toInteger(options2.length) : length;
+            omission = "omission" in options2 ? baseToString(options2.omission) : omission;
           }
           string = toString(string);
           var strLength = string.length;
@@ -4932,15 +4932,15 @@ var require_lodash = __commonJS({
             return baseInvoke(object, path, args);
           };
         });
-        function mixin(object, source, options) {
+        function mixin(object, source, options2) {
           var props = keys(source), methodNames = baseFunctions(source, props);
-          if (options == null && !(isObject(source) && (methodNames.length || !props.length))) {
-            options = source;
+          if (options2 == null && !(isObject(source) && (methodNames.length || !props.length))) {
+            options2 = source;
             source = object;
             object = this;
             methodNames = baseFunctions(source, keys(source));
           }
-          var chain2 = !(isObject(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object);
+          var chain2 = !(isObject(options2) && "chain" in options2) || !!options2.chain, isFunc = isFunction(object);
           arrayEach(methodNames, function(methodName) {
             var func = source[methodName];
             object[methodName] = func;
@@ -5136,7 +5136,7 @@ var require_lodash = __commonJS({
         lodash.method = method;
         lodash.methodOf = methodOf;
         lodash.mixin = mixin;
-        lodash.negate = negate;
+        lodash.negate = negate2;
         lodash.nthArg = nthArg;
         lodash.omit = omit;
         lodash.omitBy = omitBy;
@@ -5272,7 +5272,7 @@ var require_lodash = __commonJS({
         lodash.isElement = isElement;
         lodash.isEmpty = isEmpty;
         lodash.isEqual = isEqual2;
-        lodash.isEqualWith = isEqualWith;
+        lodash.isEqualWith = isEqualWith2;
         lodash.isError = isError;
         lodash.isFinite = isFinite;
         lodash.isFunction = isFunction;
@@ -5443,7 +5443,7 @@ var require_lodash = __commonJS({
           });
         });
         LazyWrapper.prototype.reject = function(predicate) {
-          return this.filter(negate(getIteratee(predicate)));
+          return this.filter(negate2(getIteratee(predicate)));
         };
         LazyWrapper.prototype.slice = function(start, end) {
           start = toInteger(start);
@@ -5570,7 +5570,7 @@ import { useState as useState5 } from "react";
 import { useReducer, useEffect as useEffect2 } from "react";
 
 // package.json
-var version = "0.1.106-alpha.1";
+var version = "0.1.107-alpha";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -5616,21 +5616,21 @@ var CUSTOM_PREFIX = "Layer-";
 var CUSTOM_HEADERS = {
   [`${CUSTOM_PREFIX}React-Version`]: version
 };
-var get = (url) => (baseUrl, accessToken, options) => () => fetch(`${baseUrl}${url((options == null ? void 0 : options.params) || {})}`, {
+var get = (url) => (baseUrl, accessToken, options2) => () => fetch(`${baseUrl}${url((options2 == null ? void 0 : options2.params) || {})}`, {
   headers: __spreadValues({
     "Authorization": "Bearer " + (accessToken || ""),
     "Content-Type": "application/json"
   }, CUSTOM_HEADERS),
   method: "GET"
 }).then((res) => handleResponse(res)).catch((error) => handleException(error));
-var request = (verb) => (url) => (baseUrl, accessToken, options) => fetch(`${baseUrl}${url((options == null ? void 0 : options.params) || {})}`, {
+var request = (verb) => (url) => (baseUrl, accessToken, options2) => fetch(`${baseUrl}${url((options2 == null ? void 0 : options2.params) || {})}`, {
   headers: __spreadValues({
     "Authorization": "Bearer " + (accessToken || ""),
     "Content-Type": "application/json",
     "Cache-Control": "no-cache"
   }, CUSTOM_HEADERS),
   method: verb.toUpperCase(),
-  body: JSON.stringify(options == null ? void 0 : options.body)
+  body: JSON.stringify(options2 == null ? void 0 : options2.body)
 }).then((res) => handleResponse(res)).catch((error) => handleException(error));
 var patch = request("patch");
 var post = request("post");
@@ -5937,6 +5937,7 @@ var breakPlaidItemConnection = post(
 
 // src/utils/time/timeUtils.ts
 import { differenceInDays, formatISO as formatISO2 } from "date-fns";
+import { ZonedDateTime } from "@internationalized/date";
 var toLocalDateString = (date) => formatISO2(date.valueOf(), { representation: "date" });
 function getDueDifference(dueDate) {
   const today = /* @__PURE__ */ new Date();
@@ -5945,6 +5946,9 @@ function getDueDifference(dueDate) {
   normalizedDue.setHours(0, 0, 0, 0);
   return differenceInDays(normalizedDue, today);
 }
+function isZonedDateTime(val) {
+  return val instanceof ZonedDateTime;
+}
 
 // src/api/layer/profit_and_loss.ts
 var getProfitAndLoss = (apiUrl, accessToken, params) => {
@@ -7097,7 +7101,7 @@ function clampToPresentOrPast(date, cutoff = endOfDay(/* @__PURE__ */ new Date()
 }
 var RANGE_MODE_LOOKUP = {
   dayPicker: {
-    getStart: ({ start }) => start,
+    getStart: ({ start }) => startOfMonth(start),
     getEnd: ({ end }) => clampToPresentOrPast(endOfDay(end))
   },
   dayRangePicker: {
@@ -7118,12 +7122,12 @@ var RANGE_MODE_LOOKUP = {
   }
 };
 function withCorrectedRange(fn) {
-  return (options) => {
-    const { start, end } = options;
+  return (options2) => {
+    const { start, end } = options2;
     if (start > end) {
-      return fn(__spreadProps(__spreadValues({}, options), { start: end, end: start }));
+      return fn(__spreadProps(__spreadValues({}, options2), { start: end, end: start }));
     }
-    return fn(__spreadProps(__spreadValues({}, options), { start, end }));
+    return fn(__spreadProps(__spreadValues({}, options2), { start, end }));
   };
 }
 function buildStore() {
@@ -7356,7 +7360,8 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
     connection_external_id: "11111",
     connection_needs_repair_as_of: null,
     is_syncing: true,
-    user_created: false
+    user_created: false,
+    reconnect_with_new_credentials: false
   },
   {
     id: "f98ec50a-c370-484d-a35b-d00207436075",
@@ -7381,7 +7386,8 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
     connection_external_id: "11111",
     connection_needs_repair_as_of: null,
     is_syncing: false,
-    user_created: false
+    user_created: false,
+    reconnect_with_new_credentials: false
   },
   {
     id: "843f1748-fdaa-422d-a73d-2489a40c8dc7",
@@ -7406,7 +7412,8 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
     connection_external_id: "11111",
     connection_needs_repair_as_of: "2024-03-06T16:44:35.715458Z",
     is_syncing: false,
-    user_created: false
+    user_created: false,
+    reconnect_with_new_credentials: false
   },
   {
     id: "8f430e29-e339-4d71-a08a-fce469c7a7c1",
@@ -7431,7 +7438,8 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
     connection_external_id: "11111",
     connection_needs_repair_as_of: null,
     is_syncing: false,
-    user_created: false
+    user_created: false,
+    reconnect_with_new_credentials: false
   }
 ];
 
@@ -9211,10 +9219,10 @@ import { jsx as jsx21 } from "react/jsx-runtime";
 var Tooltip = (_a) => {
   var _b = _a, {
     children
-  } = _b, options = __objRest(_b, [
+  } = _b, options2 = __objRest(_b, [
     "children"
   ]);
-  const tooltip = useTooltip(options);
+  const tooltip = useTooltip(options2);
   return /* @__PURE__ */ jsx21(TooltipContext.Provider, { value: tooltip, children });
 };
 var TooltipTrigger = forwardRef3(function TooltipTrigger2(_a, propRef) {
@@ -10405,6 +10413,7 @@ var DataState = ({
   icon,
   spacing,
   inline,
+  titleSize = inline ? "sm" /* sm */ : "lg" /* lg */,
   className
 }) => {
   const baseClassName = classNames18(
@@ -10422,7 +10431,7 @@ var DataState = ({
         Text,
         {
           as: "span",
-          size: inline ? "sm" /* sm */ : "lg" /* lg */,
+          size: titleSize,
           weight: "bold" /* bold */,
           className: "Layer__data-state__title",
           children: title
@@ -11812,6 +11821,7 @@ var LinkedAccountItemThumb = ({
 }) => {
   var _a;
   const {
+    addConnection,
     removeConnection,
     repairConnection,
     confirmAccount: confirmAccount2,
@@ -11848,10 +11858,16 @@ var LinkedAccountItemThumb = ({
           name: "Repair connection",
           action: () => {
             if (account.connection_external_id) {
-              void repairConnection(
-                account.external_account_source,
-                account.connection_external_id
-              );
+              if (account.reconnect_with_new_credentials) {
+                addConnection(
+                  account.external_account_source
+                );
+              } else {
+                repairConnection(
+                  account.external_account_source,
+                  account.connection_external_id
+                );
+              }
             }
           }
         }
@@ -12585,7 +12601,7 @@ import classNames28 from "classnames";
 import { jsx as jsx84, jsxs as jsxs49 } from "react/jsx-runtime";
 var Select = ({
   name,
-  options,
+  options: options2,
   className,
   classNamePrefix = "Layer__select",
   value,
@@ -12613,7 +12629,7 @@ var Select = ({
         className: baseClassName,
         classNamePrefix,
         placeholder: placeholder != null ? placeholder : "Select...",
-        options,
+        options: options2,
         formatOptionLabel: formatOptionLabel2,
         value,
         onChange: (newValue) => newValue && onChange(newValue),
@@ -12641,7 +12657,7 @@ import classNames30 from "classnames";
 import { jsx as jsx86, jsxs as jsxs51 } from "react/jsx-runtime";
 var MultiSelect = ({
   name,
-  options,
+  options: options2,
   className,
   classNamePrefix = "Layer__select",
   value,
@@ -12670,7 +12686,7 @@ var MultiSelect = ({
         className: baseClassName,
         classNamePrefix,
         placeholder: placeholder != null ? placeholder : "Select...",
-        options,
+        options: options2,
         value,
         defaultValue: defaultValue2,
         onChange: (newValue) => newValue && onChange(newValue),
@@ -13403,7 +13419,7 @@ function useBulkSetOpeningBalanceAndDate(data, { onSuccess }) {
 // src/utils/format.ts
 import { parseISO as parseISO3, format as formatDateFns } from "date-fns";
 var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
-var formatPercent = (value, options) => {
+var formatPercent = (value, options2) => {
   if (!value && value !== 0) {
     return;
   }
@@ -13430,7 +13446,7 @@ var formatPercent = (value, options) => {
       maximumFractionDigits: 0
     };
   }
-  return val.toLocaleString("en-US", __spreadValues(__spreadValues({}, defaultOptions), options));
+  return val.toLocaleString("en-US", __spreadValues(__spreadValues({}, defaultOptions), options2));
 };
 var humanizeEnum = (text) => {
   return capitalizeFirstLetter(text.replace(/_/gi, " ").toLowerCase());
@@ -14147,12 +14163,12 @@ import { useState as useState21 } from "react";
 import classNames33 from "classnames";
 import { jsx as jsx100, jsxs as jsxs61 } from "react/jsx-runtime";
 var ActionableList = ({
-  options,
+  options: options2,
   onClick,
   selectedId,
   showDescriptions = false
 }) => {
-  return /* @__PURE__ */ jsx100("ul", { className: "Layer__actionable-list", children: options.map((x, idx) => /* @__PURE__ */ jsxs61(
+  return /* @__PURE__ */ jsx100("ul", { className: "Layer__actionable-list", children: options2.map((x, idx) => /* @__PURE__ */ jsxs61(
     "li",
     {
       role: "button",
@@ -14584,7 +14600,7 @@ var CategorySelect = ({
     }
   ] : [];
   const categoryOptions = flattenCategories2(categories != null ? categories : []);
-  const options = [
+  const options2 = [
     ...matchOptions,
     ...suggestedOptions,
     ...allCategoriesDivider,
@@ -14611,7 +14627,7 @@ var CategorySelect = ({
       classNames: {
         menu: () => "Layer__select__menu--lg"
       },
-      options,
+      options: options2,
       isSearchable: true,
       placeholder,
       defaultValue: selected,
@@ -15489,7 +15505,7 @@ import { jsx as jsx114, jsxs as jsxs73 } from "react/jsx-runtime";
 import { createElement } from "react";
 var Toggle = ({
   name,
-  options,
+  options: options2,
   selected,
   onChange,
   size = "medium" /* medium */
@@ -15498,8 +15514,8 @@ var Toggle = ({
   const [thumbPos, setThumbPos] = useState23({ left: 0, width: 0 });
   const [initialized, setInitialized] = useState23(false);
   const activeOption = useMemo14(() => {
-    return selected ? selected : options.length > 0 ? options[0].value : void 0;
-  }, [selected, options]);
+    return selected ? selected : options2.length > 0 ? options2[0].value : void 0;
+  }, [selected, options2]);
   const toggleRef = useElementSize((_a, _b, c) => {
     if (c.width && (c == null ? void 0 : c.width) !== currentWidth) {
       setCurrentWidth(c.width);
@@ -15549,7 +15565,7 @@ var Toggle = ({
     updateThumbPosition(selectedIndex);
   }, [currentWidth]);
   const getSelectedIndex = () => {
-    const selectedIndex = options.findIndex(
+    const selectedIndex = options2.findIndex(
       (option) => option.value === activeOption
     );
     if (selectedIndex === -1) {
@@ -15558,7 +15574,7 @@ var Toggle = ({
     return selectedIndex;
   };
   return /* @__PURE__ */ jsxs73("div", { className: baseClassName, ref: toggleRef, children: [
-    options.map((option, index) => {
+    options2.map((option, index) => {
       var _a;
       return /* @__PURE__ */ createElement(
         ToggleOption,
@@ -16505,7 +16521,7 @@ function ComboBox(_a) {
     className,
     selectedValue,
     onSelectedValueChange,
-    options,
+    options: options2,
     groups,
     onInputValueChange,
     placeholder,
@@ -16517,6 +16533,7 @@ function ComboBox(_a) {
     isMutating,
     isSearchable = true,
     isClearable = true,
+    isReadOnly = false,
     displayDisabledAsSelected
   } = _b, ariaProps = __objRest(_b, [
     "className",
@@ -16534,6 +16551,7 @@ function ComboBox(_a) {
     "isMutating",
     "isSearchable",
     "isClearable",
+    "isReadOnly",
     "displayDisabledAsSelected"
   ]);
   const internalInputId = useId();
@@ -16567,7 +16585,7 @@ function ComboBox(_a) {
       }, ariaProps), {
         value: selectedValue,
         onChange: onSelectedValueChange,
-        options: options != null ? options : groups,
+        options: options2 != null ? options2 : groups,
         onInputChange: onInputValueChange,
         escapeClearsValue: true,
         placeholder,
@@ -16579,11 +16597,15 @@ function ComboBox(_a) {
           control: ({ isFocused, isDisabled: isDisabled2 }) => classNames41(
             COMBO_BOX_CLASS_NAMES.CONTROL,
             isFocused && `${COMBO_BOX_CLASS_NAMES.CONTROL}--focused`,
-            isDisabled2 && `${COMBO_BOX_CLASS_NAMES.CONTROL}--disabled`
+            isDisabled2 && `${COMBO_BOX_CLASS_NAMES.CONTROL}--disabled`,
+            isReadOnly && `${COMBO_BOX_CLASS_NAMES.CONTROL}--readonly`
           ),
           valueContainer: () => COMBO_BOX_CLASS_NAMES.VALUE_CONTAINER,
           placeholder: () => COMBO_BOX_CLASS_NAMES.PLACEHOLDER,
-          indicatorsContainer: () => COMBO_BOX_CLASS_NAMES.INDICATORS_CONTAINER,
+          indicatorsContainer: () => classNames41(
+            COMBO_BOX_CLASS_NAMES.INDICATORS_CONTAINER,
+            isReadOnly && `${COMBO_BOX_CLASS_NAMES.INDICATORS_CONTAINER}--readonly`
+          ),
           menu: () => COMBO_BOX_CLASS_NAMES.MENU,
           menuList: () => COMBO_BOX_CLASS_NAMES.MENU_LIST,
           group: () => COMBO_BOX_CLASS_NAMES.GROUP
@@ -16598,10 +16620,11 @@ function ComboBox(_a) {
           DropdownIndicator: CustomDropdownIndicatorRef.current,
           SingleValue: CustomSingleValue
         },
-        isClearable,
+        isClearable: isClearable && !isReadOnly,
         isDisabled,
         isLoading: isLoading || isMutating,
-        isSearchable
+        isSearchable: isSearchable && !isReadOnly,
+        openMenuOnClick: !isReadOnly
       })
     ),
     isError ? /* @__PURE__ */ jsx118(HStack, { justify: "end", children: ErrorMessage != null ? ErrorMessage : /* @__PURE__ */ jsx118(
@@ -18139,7 +18162,6 @@ var ExpandedBankTransactionRow = forwardRef15(
                             TextButton,
                             {
                               onClick: addSplit,
-                              disabled: rowState.splits.length > 5,
                               children: "Add new split"
                             }
                           ) : /* @__PURE__ */ jsx128(
@@ -18148,7 +18170,6 @@ var ExpandedBankTransactionRow = forwardRef15(
                               onClick: addSplit,
                               rightIcon: /* @__PURE__ */ jsx128(ScissorsFullOpen_default, { size: 14 }),
                               variant: "secondary" /* secondary */,
-                              disabled: rowState.splits.length > 5,
                               children: "Split"
                             }
                           ) }) : /* @__PURE__ */ jsx128(Fragment16, {})
@@ -19140,16 +19161,16 @@ var BusinessForm = ({
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
-  const options = useMemo25(() => {
+  const options2 = useMemo25(() => {
     var _a;
-    const options2 = ((_a = bankTransaction == null ? void 0 : bankTransaction.categorization_flow) == null ? void 0 : _a.type) === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? bankTransaction.categorization_flow.suggestions.map(
+    const options3 = ((_a = bankTransaction == null ? void 0 : bankTransaction.categorization_flow) == null ? void 0 : _a.type) === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? bankTransaction.categorization_flow.suggestions.map(
       (x) => mapCategoryToOption(x)
     ) : [];
-    if (selectedCategory && !options2.find((x) => x.id === (selectedCategory == null ? void 0 : selectedCategory.id))) {
-      options2.unshift(selectedCategory);
+    if (selectedCategory && !options3.find((x) => x.id === (selectedCategory == null ? void 0 : selectedCategory.id))) {
+      options3.unshift(selectedCategory);
     }
-    if (options2.length) {
-      options2.push({
+    if (options3.length) {
+      options3.push({
         label: "See all categories",
         id: "SELECT_CATEGORY",
         value: {
@@ -19159,7 +19180,7 @@ var BusinessForm = ({
         asLink: true
       });
     }
-    return options2;
+    return options3;
   }, [bankTransaction, selectedCategory]);
   const onDrawerCategorySelect = (value) => {
     close2();
@@ -19214,7 +19235,7 @@ var BusinessForm = ({
     showCategorization ? /* @__PURE__ */ jsx140(
       ActionableList,
       {
-        options,
+        options: options2,
         onClick: onCategorySelect,
         selectedId: selectedCategory == null ? void 0 : selectedCategory.id,
         showDescriptions: showTooltips
@@ -19258,7 +19279,7 @@ var BusinessForm = ({
           icon: /* @__PURE__ */ jsx140(Paperclip_default, {})
         }
       ),
-      options.length === 0 ? /* @__PURE__ */ jsx140(
+      options2.length === 0 ? /* @__PURE__ */ jsx140(
         Button,
         {
           onClick: openDrawer,
@@ -19267,7 +19288,7 @@ var BusinessForm = ({
           children: "Select category"
         }
       ) : null,
-      showCategorization && options.length > 0 ? /* @__PURE__ */ jsx140(
+      showCategorization && options2.length > 0 ? /* @__PURE__ */ jsx140(
         Button,
         {
           onClick: save,
@@ -19704,7 +19725,7 @@ var SplitForm = ({
           TextButton,
           {
             onClick: addSplit,
-            disabled: rowState.splits.length > 5 || isLoading,
+            disabled: isLoading,
             className: "Layer__add-new-split",
             children: "Add new split"
           }
@@ -20633,9 +20654,9 @@ function runDelayedSync(block, delayMs = DEFAULT_DELAY_MS) {
 import { jsx as jsx159 } from "react/jsx-runtime";
 function useInvisibleDownload() {
   const invisibleDownloadRef = useRef20(null);
-  const triggerInvisibleDownload = useCallback18((options) => {
+  const triggerInvisibleDownload = useCallback18((options2) => {
     var _a;
-    void ((_a = invisibleDownloadRef.current) == null ? void 0 : _a.trigger(options));
+    void ((_a = invisibleDownloadRef.current) == null ? void 0 : _a.trigger(options2));
   }, []);
   return { invisibleDownloadRef, triggerInvisibleDownload };
 }
@@ -20835,7 +20856,7 @@ import classNames53 from "classnames";
 import { jsx as jsx161, jsxs as jsxs102 } from "react/jsx-runtime";
 var CreatableSelect = ({
   name,
-  options,
+  options: options2,
   className,
   classNamePrefix = "Layer__select",
   value,
@@ -20868,7 +20889,7 @@ var CreatableSelect = ({
         className: baseClassName,
         classNamePrefix,
         placeholder: placeholder != null ? placeholder : "Select...",
-        options,
+        options: options2,
         formatOptionLabel: formatOptionLabel2,
         value,
         onChange: (newValue) => onChange(newValue),
@@ -21615,7 +21636,12 @@ var MAX_NUM_ROWS = 8;
 var HEADER_HEIGHT = 41;
 var CONTAINER_HEIGHT = ROW_HEIGHT * MAX_NUM_ROWS + HEADER_HEIGHT - 1;
 var CSS_PREFIX = "Layer__csv-upload__validate-csv-table";
-function ValidateCsvTable({ data, headers, formatters: formatters2, className }) {
+function ValidateCsvTable({
+  data,
+  headers,
+  formatters: formatters2,
+  className
+}) {
   const columns = useMemo30(
     () => {
       const columnDefs = [{
@@ -21630,8 +21656,9 @@ function ValidateCsvTable({ data, headers, formatters: formatters2, className })
         header: () => /* @__PURE__ */ jsx168("span", { className: `${CSS_PREFIX}__header-cell-content`, children: headers[key] }),
         cell: (info) => {
           const field = info.row.original[key];
-          let value = field.raw;
-          if (field.is_valid) {
+          let value = field == null ? void 0 : field.raw;
+          const isValid2 = field && field.is_valid;
+          if (isValid2) {
             const formatter2 = formatters2 == null ? void 0 : formatters2[key];
             value = formatter2 ? formatter2(field.parsed) : field.parsed;
           }
@@ -21641,7 +21668,7 @@ function ValidateCsvTable({ data, headers, formatters: formatters2, className })
               className: classNames57(
                 "Layer__table-cell-content",
                 `${CSS_PREFIX}__cell-content`,
-                !field.is_valid && `${CSS_PREFIX}__cell-content--error`
+                !isValid2 && `${CSS_PREFIX}__cell-content--error`
               ),
               children: value
             }
@@ -21718,7 +21745,11 @@ function ValidateCsvTable({ data, headers, formatters: formatters2, className })
     ] })
   ] }) });
 }
-var ValidateCsvTableRow = ({ row, virtualRow, rowVirtualizer }) => /* @__PURE__ */ jsx168(
+var ValidateCsvTableRow = ({
+  row,
+  virtualRow,
+  rowVirtualizer
+}) => /* @__PURE__ */ jsx168(
   "tr",
   {
     className: classNames57(
@@ -21757,6 +21788,21 @@ var formatters = {
     return (_a = convertCentsToCurrency(parsed)) != null ? _a : "";
   }
 };
+var generateDynamicHeaders = (transactionsPreview) => {
+  const hasExternalId = transactionsPreview.some(
+    (transaction) => {
+      var _a;
+      return ((_a = transaction.external_id) == null ? void 0 : _a.parsed) != null;
+    }
+  );
+  const hasReferenceNumber = transactionsPreview.some(
+    (transaction) => {
+      var _a;
+      return ((_a = transaction.reference_number) == null ? void 0 : _a.parsed) != null;
+    }
+  );
+  return __spreadValues(__spreadValues(__spreadValues({}, hasExternalId && { external_id: "External ID" }), hasReferenceNumber && { reference_number: "Reference No." }), templateHeaders);
+};
 function UploadTransactionsValidateCsvStep({ parseCsvResponse, selectedAccountId, onSelectFile, onUploadTransactionsSuccess }) {
   const { previous, next } = useWizard();
   const { trigger: uploadTransactions, isMutating, error: uploadTransactionsError } = useCreateCustomAccountTransactions();
@@ -21771,6 +21817,7 @@ function UploadTransactionsValidateCsvStep({ parseCsvResponse, selectedAccountId
     invalid_transactions_count: invalidTransactionsCount,
     total_transactions_count: totalTransactionsCount
   } = parseCsvResponse;
+  const dynamicHeaders = generateDynamicHeaders(transactionsPreview);
   const onClickUploadTransactions = useCallback25(() => {
     void uploadTransactions(__spreadProps(__spreadValues({}, transactionsRequest), {
       customAccountId: selectedAccountId
@@ -21792,7 +21839,7 @@ function UploadTransactionsValidateCsvStep({ parseCsvResponse, selectedAccountId
         {
           className: "Layer__upload-transactions__preview_table",
           data: transactionsPreview,
-          headers: templateHeaders,
+          headers: dynamicHeaders,
           formatters
         }
       )
@@ -23640,15 +23687,15 @@ function useProfitAndLossComparison({
   const effectiveComparePeriods = isPeriodsSelectEnabled ? comparePeriods : 1;
   const compareModeActive = useMemo36(() => effectiveComparePeriods > 1 || selectedCompareOptions.length > 1 || selectedCompareOptions.length === 1 && isNotOnlyNoneTag(selectedCompareOptions), [effectiveComparePeriods, selectedCompareOptions]);
   const setSelectedCompareOptions = (values) => {
-    const options = values.map(
+    const options2 = values.map(
       (option) => comparisonConfig == null ? void 0 : comparisonConfig.tagComparisonOptions.find(
         (t) => JSON.stringify(t.tagFilterConfig) === option.value
       )
     ).filter(Boolean);
-    if (options.length === 0 && (comparisonConfig == null ? void 0 : comparisonConfig.defaultTagFilter)) {
+    if (options2.length === 0 && (comparisonConfig == null ? void 0 : comparisonConfig.defaultTagFilter)) {
       setSelectedCompareOptionsState([comparisonConfig == null ? void 0 : comparisonConfig.defaultTagFilter]);
     } else {
-      setSelectedCompareOptionsState(options);
+      setSelectedCompareOptionsState(options2);
     }
   };
   const { businessId } = useLayerContext();
@@ -26726,7 +26773,7 @@ var ProfitAndLossTableComponent = ({
   } = useContext40(ProfitAndLoss.Context);
   const { isOpen, setIsOpen } = useTableExpandRow();
   useEffect31(() => {
-    setIsOpen(["income", "cost_of_goods_sold", "expenses"]);
+    setIsOpen(["income", "cost_of_goods_sold", "expenses", "other_activity"]);
   }, []);
   const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
   if (isLoading || actualData === void 0) {
@@ -26746,7 +26793,8 @@ var ProfitAndLossTableComponent = ({
     depth,
     rowKey,
     rowIndex,
-    variant
+    variant,
+    showValue = true
   }) => {
     const expandable = !!lineItem.line_items && lineItem.line_items.length > 0;
     const expanded = expandable ? isOpen(rowKey) : true;
@@ -26769,7 +26817,7 @@ var ProfitAndLossTableComponent = ({
                 children: lineItem.display_name
               }
             ),
-            /* @__PURE__ */ jsx227(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */, children: Number.isNaN(lineItem.value) ? 0 : lineItem.value })
+            showValue && /* @__PURE__ */ jsx227(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */, children: Number.isNaN(lineItem.value) ? 0 : lineItem.value })
           ]
         }
       ),
@@ -26790,12 +26838,12 @@ var ProfitAndLossTableComponent = ({
       rowKey: "income",
       rowIndex: 0
     }),
-    data.cost_of_goods_sold ? renderLineItem({
+    data.cost_of_goods_sold && renderLineItem({
       lineItem: data.cost_of_goods_sold,
       depth: 0,
       rowKey: "cost_of_goods_sold",
       rowIndex: 1
-    }) : null,
+    }),
     renderLineItem({
       lineItem: {
         value: data.gross_profit,
@@ -26835,21 +26883,28 @@ var ProfitAndLossTableComponent = ({
       },
       depth: 0,
       rowKey: "net_profit",
-      rowIndex: 5,
+      rowIndex: 6,
       variant: "summation"
     }),
-    data.personal_expenses ? renderLineItem({
+    data.personal_expenses && renderLineItem({
       lineItem: data.personal_expenses,
       depth: 0,
       rowKey: "personal_expenses",
       rowIndex: 7
-    }) : null,
-    data.other_outflows ? renderLineItem({
+    }),
+    data.other_outflows && renderLineItem({
       lineItem: data.other_outflows,
       depth: 0,
       rowKey: "other_outflows",
-      rowIndex: 6
-    }) : null
+      rowIndex: 8
+    }),
+    data.custom_line_items && renderLineItem({
+      lineItem: data.custom_line_items,
+      depth: 0,
+      rowKey: "other_activity",
+      rowIndex: 9,
+      showValue: false
+    })
   ] }) });
 };
 
@@ -30816,7 +30871,7 @@ var JournalEntryDetails = () => {
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx254("div", { className: "Layer__journal__entry-details__reverse-btn-container", children: /* @__PURE__ */ jsx254(
+      (entry == null ? void 0 : entry.entry_type) === "MANUAL" && /* @__PURE__ */ jsx254("div", { className: "Layer__journal__entry-details__reverse-btn-container", children: /* @__PURE__ */ jsx254(
         Button,
         {
           rightIcon: reverseEntryError ? /* @__PURE__ */ jsx254(AlertCircle_default, { size: 12 }) : /* @__PURE__ */ jsx254(RefreshCcw_default, { size: 12 }),
@@ -32810,11 +32865,11 @@ import classNames81 from "classnames";
 import { jsx as jsx277, jsxs as jsxs178 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 var STARTING_PADDING = 12;
-var Tabs = ({ name, options, selected, onChange }) => {
+var Tabs = ({ name, options: options2, selected, onChange }) => {
   const [initialized, setInitialized] = useState71(false);
   const [thumbPos, setThumbPos] = useState71({ left: 0, width: 0 });
   const [currentWidth, setCurrentWidth] = useState71(0);
-  const selectedValue = selected || options[0].value;
+  const selectedValue = selected || options2[0].value;
   const baseClassName = classNames81(
     "Layer__tabs",
     initialized && "Layer__tabs--initialized"
@@ -32860,7 +32915,7 @@ var Tabs = ({ name, options, selected, onChange }) => {
     updateSelectPosition(selectedIndex);
   }, [selectedValue, currentWidth]);
   const getSelectedIndex = () => {
-    const selectedIndex = options.findIndex(
+    const selectedIndex = options2.findIndex(
       (option) => option.value === selectedValue
     );
     if (selectedIndex === -1) {
@@ -32869,7 +32924,7 @@ var Tabs = ({ name, options, selected, onChange }) => {
     return selectedIndex;
   };
   return /* @__PURE__ */ jsx277("div", { className: "Layer__tabs__container", children: /* @__PURE__ */ jsxs178("div", { className: baseClassName, ref: elementRef, children: [
-    options.map((option, index) => {
+    options2.map((option, index) => {
       var _a;
       return /* @__PURE__ */ createElement2(
         Tab,
@@ -33901,11 +33956,11 @@ var FormSection = ({ children, title }) => {
 
 // src/components/Input/BusinessTypeSelect.tsx
 import { jsx as jsx291 } from "react/jsx-runtime";
-var findSelectOption = (options, value) => {
+var findSelectOption = (options2, value) => {
   if (!value) {
     return void 0;
   }
-  return options.find((o) => o.value === value);
+  return options2.find((o) => o.value === value);
 };
 var BusinessTypeSelect = ({ value, onChange }) => {
   const entityTypeOptions = ENTITY_TYPES;
@@ -33977,11 +34032,11 @@ var US_STATES = [
 
 // src/components/Input/USStateSelect.tsx
 import { jsx as jsx292 } from "react/jsx-runtime";
-var findSelectOption2 = (options, selected) => {
+var findSelectOption2 = (options2, selected) => {
   if (!selected) {
     return void 0;
   }
-  return options.find(
+  return options2.find(
     (o) => String(o.value).toLowerCase() === String(selected).toLowerCase() || String(o.label).toLowerCase() === String(selected).toLowerCase()
   );
 };
@@ -37107,8 +37162,8 @@ var Reports = ({
   var _a;
   const [activeTab, setActiveTab] = useState81(enabledReports[0]);
   const { view, containerRef } = useElementViewSize();
-  const options = getOptions(enabledReports);
-  const defaultTitle4 = enabledReports.length > 1 ? "Reports" : (_a = options.find((option) => option.value === enabledReports[0])) == null ? void 0 : _a.label;
+  const options2 = getOptions(enabledReports);
+  const defaultTitle4 = enabledReports.length > 1 ? "Reports" : (_a = options2.find((option) => option.value === enabledReports[0])) == null ? void 0 : _a.label;
   const initialModeForProfitAndLoss = profitAndLossConfig ? getInitialDateRangePickerMode(profitAndLossConfig) : "monthPicker";
   const initialModeForStatementOfCashFlows = statementOfCashFlowConfig ? getInitialDateRangePickerMode(statementOfCashFlowConfig) : "monthPicker";
   const initialModes = {
@@ -37126,7 +37181,7 @@ var Reports = ({
           Toggle,
           {
             name: "reports-tabs",
-            options,
+            options: options2,
             selected: activeTab,
             onChange: (opt) => setActiveTab(opt.target.value)
           }
@@ -37268,10 +37323,10 @@ var Components = ({
 };
 
 // src/components/Invoices/Invoices.tsx
-import { useCallback as useCallback58, useState as useState87 } from "react";
+import { useCallback as useCallback61, useState as useState88 } from "react";
 
 // src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
-import { useCallback as useCallback54 } from "react";
+import { useCallback as useCallback57, useRef as useRef32, useState as useState85 } from "react";
 
 // src/components/BaseDetailView/BaseDetailView.tsx
 import { jsx as jsx326, jsxs as jsxs210 } from "react/jsx-runtime";
@@ -37286,12 +37341,19 @@ var BaseDetailView = ({ name, onGoBack, slots, children }) => {
   ] });
 };
 
+// src/components/Invoices/InvoiceForm/InvoiceForm.tsx
+import { forwardRef as forwardRef25, useCallback as useCallback56, useEffect as useEffect43, useImperativeHandle as useImperativeHandle4, useRef as useRef31 } from "react";
+import classNames92 from "classnames";
+
 // src/components/Invoices/InvoiceForm/useInvoiceForm.ts
-import { useState as useState84 } from "react";
+import { useCallback as useCallback54, useMemo as useMemo72, useState as useState84, useRef as useRef30 } from "react";
 import { useStore as useStore7 } from "@tanstack/react-form";
 
 // src/features/forms/hooks/useForm.tsx
-import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
+import {
+  createFormHookContexts,
+  createFormHook
+} from "@tanstack/react-form";
 
 // src/components/ui/Form/Form.tsx
 import { forwardRef as forwardRef20 } from "react";
@@ -37328,11 +37390,12 @@ var FieldError = forwardRef20(
 import { jsx as jsx328, jsxs as jsxs211 } from "react/jsx-runtime";
 function BaseFormTextField({
   label,
-  className,
   inline = false,
   showLabel = true,
   showFieldError = true,
   isTextArea = false,
+  isReadOnly = false,
+  className,
   children
 }) {
   const field = useFieldContext();
@@ -37342,11 +37405,32 @@ function BaseFormTextField({
   const errorMessage = errors.length !== 0 ? errors[0] : void 0;
   const shouldShowErrorMessage = showFieldError && errorMessage;
   const additionalAriaProps = !showLabel && { "aria-label": label };
-  return /* @__PURE__ */ jsxs211(TextField, __spreadProps(__spreadValues({ name, isInvalid: !isValid2, inline, className, textarea: isTextArea }, additionalAriaProps), { children: [
-    showLabel && /* @__PURE__ */ jsx328(Label, __spreadProps(__spreadValues({ size: "sm", htmlFor: name }, !inline && { pbe: "3xs" }), { children: label })),
-    children,
-    shouldShowErrorMessage && /* @__PURE__ */ jsx328(FieldError, { children: errorMessage })
-  ] }));
+  return /* @__PURE__ */ jsxs211(
+    TextField,
+    __spreadProps(__spreadValues({
+      name,
+      isInvalid: !isValid2,
+      inline,
+      className,
+      textarea: isTextArea,
+      isReadOnly
+    }, additionalAriaProps), {
+      children: [
+        showLabel && /* @__PURE__ */ jsx328(
+          Label,
+          __spreadProps(__spreadValues({
+            slot: "label",
+            size: "sm",
+            htmlFor: name
+          }, !inline && { pbe: "3xs" }), {
+            children: label
+          })
+        ),
+        children,
+        shouldShowErrorMessage && /* @__PURE__ */ jsx328(FieldError, { children: errorMessage })
+      ]
+    })
+  );
 }
 
 // src/features/forms/components/FormBigDecimalField.tsx
@@ -37374,7 +37458,7 @@ var InputGroup2 = forwardRef21(
 );
 
 // src/features/forms/components/FormBigDecimalField.tsx
-import { BigDecimal as BD2, Option as Option4 } from "effect";
+import { BigDecimal as BD2, Option as Option5 } from "effect";
 
 // src/components/ui/Input/Input.tsx
 import { forwardRef as forwardRef22 } from "react";
@@ -37396,12 +37480,22 @@ var Input2 = forwardRef22(
 );
 
 // src/utils/bigDecimalUtils.ts
-import { BigDecimal as BD } from "effect";
+import { BigDecimal as BD, Option as Option4 } from "effect";
 var BIG_DECIMAL_ZERO = BD.fromBigInt(BigInt(0));
 var BIG_DECIMAL_ONE = BD.fromBigInt(BigInt(1));
+var BIG_DECIMAL_NEG_ONE = BD.fromBigInt(BigInt(-1));
 var BIG_DECIMAL_ONE_HUNDRED = BD.fromBigInt(BigInt(100));
-var DECIMAL_CHARS_REGEX = /^[\d.,-]+$/;
-var NON_NEGATIVE_DECIMAL_CHARS_REGEX = /^[\d.,]+$/;
+var buildDecimalCharRegex = ({
+  allowNegative = true,
+  allowPercent = false,
+  allowDollar = false
+} = {}) => {
+  let allowed = "\\d.,";
+  if (allowNegative) allowed += "\\-";
+  if (allowPercent) allowed += "%";
+  if (allowDollar) allowed += "\\$";
+  return new RegExp(`^[${allowed}]+$`);
+};
 var convertBigDecimalToCents = (amount) => {
   const scaled = BD.multiply(amount, BIG_DECIMAL_ONE_HUNDRED);
   const rounded = BD.round(scaled, { scale: 0 });
@@ -37411,14 +37505,38 @@ var convertCentsToBigDecimal = (cents) => {
   const decimalCents = BD.fromBigInt(BigInt(cents));
   return BD.unsafeDivide(decimalCents, BIG_DECIMAL_ONE_HUNDRED);
 };
-function formatBigDecimalToString(value, maxDecimalPlaces = 10) {
+var convertPercentToDecimal = (percent) => {
+  return BD.unsafeDivide(percent, BIG_DECIMAL_ONE_HUNDRED);
+};
+var roundDecimalToCents = (decimal) => {
+  return BD.round(decimal, { scale: 2 });
+};
+var safeDivide = (dividend, divisor) => {
+  const maybeQuotient = BD.divide(dividend, divisor);
+  const quotient = Option4.match(maybeQuotient, {
+    onNone: () => BIG_DECIMAL_ZERO,
+    onSome: (innerQuotient) => innerQuotient
+  });
+  return quotient;
+};
+var negate = (value) => {
+  return BD.multiply(value, BIG_DECIMAL_NEG_ONE);
+};
+function formatBigDecimalToString(value, options2 = {
+  mode: "decimal",
+  minDecimalPlaces: 0,
+  maxDecimalPlaces: 3
+}) {
   const normalizedBigDecimal = BD.normalize(value);
+  const { mode, minDecimalPlaces, maxDecimalPlaces } = options2;
   const formatter2 = new Intl.NumberFormat(
     "en-US",
-    {
-      minimumFractionDigits: 0,
+    __spreadProps(__spreadValues(__spreadValues({
+      style: "decimal"
+    }, mode === "percent" && { style: "percent" }), mode === "currency" && { style: "currency", currency: "USD" }), {
+      minimumFractionDigits: minDecimalPlaces,
       maximumFractionDigits: maxDecimalPlaces
-    }
+    })
   );
   let decimalAsNumber = 0;
   try {
@@ -37430,34 +37548,59 @@ function formatBigDecimalToString(value, maxDecimalPlaces = 10) {
 
 // src/features/forms/components/FormBigDecimalField.tsx
 import { jsx as jsx331 } from "react/jsx-runtime";
-var DEFAULT_MAX_INPUT_LENGTH = 10;
-function FormBigDecimalField({
-  slotProps,
-  maxInputLength = DEFAULT_MAX_INPUT_LENGTH,
-  allowNegative = false
-}) {
+var DEFAULT_MAX_VALUE = 1e7;
+var DEFAULT_MIN_DECIMAL_PLACES = 0;
+var DEFAULT_MAX_DECIMAL_PLACES = 3;
+var DECORATOR_CHARS_REGEX = /[,%$]/g;
+var withForceUpdate = (value) => __spreadProps(__spreadValues({}, value), {
+  __forceUpdate: Symbol()
+});
+function FormBigDecimalField(_a) {
+  var _b = _a, {
+    mode = "decimal",
+    allowNegative = false,
+    maxValue = mode === "percent" ? 1 : DEFAULT_MAX_VALUE,
+    minDecimalPlaces = mode === "currency" ? 2 : DEFAULT_MIN_DECIMAL_PLACES,
+    maxDecimalPlaces = mode === "currency" ? 2 : DEFAULT_MAX_DECIMAL_PLACES
+  } = _b, restProps = __objRest(_b, [
+    "mode",
+    "allowNegative",
+    "maxValue",
+    "minDecimalPlaces",
+    "maxDecimalPlaces"
+  ]);
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
-  const [inputValue, setInputValue] = useState82(formatBigDecimalToString(value, maxInputLength));
+  const maxBigDecimalValue = BD2.unsafeFromNumber(maxValue);
+  const formattingProps = useMemo71(() => ({
+    minDecimalPlaces,
+    maxDecimalPlaces,
+    mode
+  }), [maxDecimalPlaces, minDecimalPlaces, mode]);
+  const [inputValue, setInputValue] = useState82(formatBigDecimalToString(value, formattingProps));
   const onInputChange = useCallback48((e) => {
     setInputValue(e.target.value);
   }, []);
   const onInputBlur = useCallback48(() => {
-    const cleaned = inputValue.replace(/,/g, "");
-    const maybeDecimal = BD2.fromString(cleaned);
-    const decimal = Option4.match(maybeDecimal, {
+    const sanitizedInput = inputValue.replace(DECORATOR_CHARS_REGEX, "");
+    const maybeDecimal = BD2.fromString(sanitizedInput);
+    const decimal = Option5.match(maybeDecimal, {
       onNone: () => BIG_DECIMAL_ZERO,
-      onSome: (amount) => amount
+      onSome: (value2) => value2
     });
-    const normalizedDecimal = BD2.normalize(decimal);
-    handleChange(normalizedDecimal);
+    const adjustedForPercent = mode === "percent" ? convertPercentToDecimal(decimal) : decimal;
+    const normalized = BD2.normalize(adjustedForPercent);
+    const clamped = BD2.min(normalized, maxBigDecimalValue);
+    if (!BD2.equals(clamped, value)) {
+      handleChange(withForceUpdate(clamped));
+    }
     handleBlur();
-    setInputValue(formatBigDecimalToString(normalizedDecimal, maxInputLength));
-  }, [inputValue, handleBlur, handleChange, maxInputLength]);
+    setInputValue(formatBigDecimalToString(clamped, formattingProps));
+  }, [inputValue, mode, maxBigDecimalValue, value, handleBlur, formattingProps, handleChange]);
   const allowedChars = useMemo71(
-    () => allowNegative ? DECIMAL_CHARS_REGEX : NON_NEGATIVE_DECIMAL_CHARS_REGEX,
-    [allowNegative]
+    () => buildDecimalCharRegex({ allowNegative, allowPercent: mode === "percent", allowDollar: mode === "currency" }),
+    [allowNegative, mode]
   );
   const onBeforeInput = useCallback48((e) => {
     if (e.data && !allowedChars.test(e.data)) {
@@ -37471,9 +37614,9 @@ function FormBigDecimalField({
     }
   }, [allowedChars]);
   useEffect41(() => {
-    setInputValue(formatBigDecimalToString(value, maxInputLength));
-  }, [value, maxInputLength]);
-  return /* @__PURE__ */ jsx331(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { inputMode: "decimal", children: /* @__PURE__ */ jsx331(InputGroup2, { children: /* @__PURE__ */ jsx331(
+    setInputValue(formatBigDecimalToString(value, formattingProps));
+  }, [value, formattingProps]);
+  return /* @__PURE__ */ jsx331(BaseFormTextField, __spreadProps(__spreadValues({}, restProps), { inputMode: "decimal", children: /* @__PURE__ */ jsx331(InputGroup2, { slot: "input", children: /* @__PURE__ */ jsx331(
     Input2,
     {
       inset: true,
@@ -37482,77 +37625,180 @@ function FormBigDecimalField({
       value: inputValue,
       onChange: onInputChange,
       onBlur: onInputBlur,
-      maxLength: maxInputLength,
       onBeforeInput,
       onPaste
     }
   ) }) }));
 }
 
-// src/features/forms/components/FormCurrencyField.tsx
-import { useCallback as useCallback49, useEffect as useEffect42, useState as useState83 } from "react";
-import CurrencyInput2 from "react-currency-input-field";
-import { BigDecimal as BD3, Option as Option5 } from "effect";
+// src/features/forms/components/FormCheckboxField.tsx
+import classNames89 from "classnames";
 import { jsx as jsx332 } from "react/jsx-runtime";
-var ZERO_CENTS_INPUT_VALUE = "0.00";
-var getCurrencyInputValueFromCents = (cents) => !Number.isNaN(cents) ? centsToDollarsWithoutCommas(cents) : ZERO_CENTS_INPUT_VALUE;
-function FormCurrencyField({ slotProps }) {
+var FORM_CHECKBOX_FIELD_CLASSNAME = "Layer__FormCheckboxField";
+function FormCheckboxField({
+  label,
+  className,
+  inline = false,
+  showLabel = true,
+  showFieldError = true,
+  isReadOnly = false
+}) {
   const field = useFieldContext();
-  const label = slotProps.BaseFormTextField.label;
   const { name, state, handleChange, handleBlur } = field;
-  const { value } = state;
-  const [inputValue, setInputValue] = useState83(getCurrencyInputValueFromCents(value));
-  const onInputChange = useCallback49((newValue) => {
-    setInputValue(newValue != null ? newValue : ZERO_CENTS_INPUT_VALUE);
-  }, []);
-  const onInputBlur = useCallback49(() => {
-    const maybeAmount = BD3.fromString(inputValue);
-    const cents = Option5.match(maybeAmount, {
-      onNone: () => 0,
-      onSome: (amount) => convertBigDecimalToCents(amount)
-    });
-    handleChange(cents);
-    handleBlur();
-    setInputValue(getCurrencyInputValueFromCents(cents));
-  }, [inputValue, handleChange, handleBlur]);
+  const { meta, value } = state;
+  const { errors, isValid: isValid2 } = meta;
+  const errorMessage = errors.length !== 0 ? errors[0] : void 0;
+  const tooltipProps = showFieldError ? { tooltip: errorMessage } : {};
+  const additionalAriaProps = !showLabel && { "aria-label": label };
+  const checkboxClassNames = classNames89(
+    FORM_CHECKBOX_FIELD_CLASSNAME,
+    inline && `${FORM_CHECKBOX_FIELD_CLASSNAME}--inline`,
+    className
+  );
+  return /* @__PURE__ */ jsx332(
+    CheckboxWithTooltip,
+    __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+      className: checkboxClassNames,
+      isSelected: value,
+      isInvalid: !isValid2,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      name,
+      value: name,
+      size: "lg",
+      isReadOnly
+    }, tooltipProps), additionalAriaProps), !isValid2 && { variant: "error" }), {
+      children: showLabel && /* @__PURE__ */ jsx332(Label, { slot: "label", size: "sm", htmlFor: name, children: label })
+    })
+  );
+}
+
+// src/features/forms/components/FormDateField.tsx
+import { useState as useState83, useEffect as useEffect42, useCallback as useCallback49 } from "react";
+
+// src/components/ui/Date/Date.tsx
+import { forwardRef as forwardRef23 } from "react";
+import classNames90 from "classnames";
+import {
+  DateField as ReactAriaDateField,
+  DateSegment as ReactAriaDateSegment,
+  DateInput as ReactAriaDateInput
+} from "react-aria-components";
+import { jsx as jsx333 } from "react/jsx-runtime";
+var DATE_FIELD_CLASS_NAME = "Layer__UI__DateField";
+var DateField = forwardRef23(
+  function DateField2(_a, ref) {
+    var _b = _a, { inline, className, isReadOnly } = _b, restProps = __objRest(_b, ["inline", "className", "isReadOnly"]);
+    const dataProperties = toDataProperties({ inline, readonly: isReadOnly });
+    return /* @__PURE__ */ jsx333(
+      ReactAriaDateField,
+      __spreadProps(__spreadValues(__spreadValues({}, dataProperties), restProps), {
+        isReadOnly,
+        className: classNames90(DATE_FIELD_CLASS_NAME, className),
+        ref
+      })
+    );
+  }
+);
+var DATE_INPUT_CLASS_NAME = "Layer__UI__DateInput";
+var DateInput = forwardRef23(
+  function DateInput2(_a, ref) {
+    var _b = _a, { inset } = _b, restProps = __objRest(_b, ["inset"]);
+    const dataProperties = toDataProperties({ inset });
+    return /* @__PURE__ */ jsx333(
+      ReactAriaDateInput,
+      __spreadProps(__spreadValues(__spreadValues({}, dataProperties), restProps), {
+        className: classNames90(DATE_INPUT_CLASS_NAME),
+        ref
+      })
+    );
+  }
+);
+var DATE_SEGMENT_CLASS_NAME = "Layer__UI__DateSegment";
+var DateSegment = forwardRef23(
+  function DateSegment2(_a, ref) {
+    var _b = _a, { isReadOnly } = _b, restProps = __objRest(_b, ["isReadOnly"]);
+    const dataProperties = toDataProperties({ interactive: !isReadOnly });
+    return /* @__PURE__ */ jsx333(
+      ReactAriaDateSegment,
+      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
+        className: DATE_SEGMENT_CLASS_NAME,
+        ref
+      })
+    );
+  }
+);
+
+// src/features/forms/components/FormDateField.tsx
+import { jsx as jsx334, jsxs as jsxs212 } from "react/jsx-runtime";
+function FormDateField({
+  label,
+  className,
+  inline = false,
+  showLabel = true,
+  showFieldError = true,
+  isReadOnly = false
+}) {
+  const field = useFieldContext();
+  const { name, state, handleChange, handleBlur } = field;
+  const { meta, value } = state;
+  const { errors, isValid: isValid2 } = meta;
+  const [localDate, setLocalDate] = useState83(value);
   useEffect42(() => {
-    setInputValue(getCurrencyInputValueFromCents(value));
+    setLocalDate(value);
   }, [value]);
-  return /* @__PURE__ */ jsx332(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { children: /* @__PURE__ */ jsx332(InputGroup2, { children: /* @__PURE__ */ jsx332(
-    CurrencyInput2,
-    {
+  const onBlur = useCallback49(() => {
+    const nextDate = isZonedDateTime(localDate) ? localDate : null;
+    handleChange(nextDate);
+    handleBlur();
+  }, [handleBlur, handleChange, localDate]);
+  const errorMessage = errors.length !== 0 ? errors[0] : void 0;
+  const shouldShowErrorMessage = showFieldError && errorMessage;
+  const additionalAriaProps = !showLabel && { "aria-label": label };
+  return /* @__PURE__ */ jsxs212(
+    DateField,
+    __spreadProps(__spreadValues({
       name,
-      intlConfig: {
-        locale: "en-US",
-        currency: "USD"
-      },
-      prefix: "$",
-      decimalScale: 2,
-      decimalsLimit: 2,
-      disableAbbreviations: true,
-      value: inputValue,
-      onValueChange: onInputChange,
-      onBlur: onInputBlur,
-      className: "Layer__UI__Input",
-      "data-inset": "true",
-      "aria-label": label
-    }
-  ) }) }));
+      granularity: "day",
+      value: localDate,
+      isInvalid: !isValid2,
+      inline,
+      className,
+      onChange: setLocalDate,
+      onBlur,
+      isReadOnly
+    }, additionalAriaProps), {
+      children: [
+        showLabel && /* @__PURE__ */ jsx334(
+          Label,
+          __spreadProps(__spreadValues({
+            slot: "label",
+            size: "sm",
+            htmlFor: name
+          }, !inline && { pbe: "3xs" }), {
+            children: label
+          })
+        ),
+        /* @__PURE__ */ jsx334(InputGroup2, { slot: "input", children: /* @__PURE__ */ jsx334(DateInput, { inset: true, children: (segment) => /* @__PURE__ */ jsx334(DateSegment, { isReadOnly, segment }) }) }),
+        shouldShowErrorMessage && /* @__PURE__ */ jsx334(FieldError, { children: errorMessage })
+      ]
+    })
+  );
 }
 
 // src/features/forms/components/FormTextAreaField.tsx
 import { useCallback as useCallback50 } from "react";
 
 // src/components/ui/Input/TextArea.tsx
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef24 } from "react";
 import { TextArea as ReactAriaTextArea } from "react-aria-components";
-import { jsx as jsx333 } from "react/jsx-runtime";
+import { jsx as jsx335 } from "react/jsx-runtime";
 var TEXTAREA_CLASS_NAME = "Layer__UI__TextArea";
-var TextArea = forwardRef23(
+var TextArea = forwardRef24(
   function TextArea2(_a, ref) {
     var _b = _a, { resize = "none" } = _b, restProps = __objRest(_b, ["resize"]);
     const dataProperties = toDataProperties({ resize });
-    return /* @__PURE__ */ jsx333(
+    return /* @__PURE__ */ jsx335(
       ReactAriaTextArea,
       __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
         className: TEXTAREA_CLASS_NAME,
@@ -37563,37 +37809,58 @@ var TextArea = forwardRef23(
 );
 
 // src/features/forms/components/FormTextAreaField.tsx
-import { jsx as jsx334 } from "react/jsx-runtime";
-function FormTextAreaField({ slotProps }) {
+import { jsx as jsx336 } from "react/jsx-runtime";
+function FormTextAreaField(props) {
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
   const onChange = useCallback50((e) => {
     handleChange(e.target.value);
   }, [handleChange]);
-  return /* @__PURE__ */ jsx334(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { children: /* @__PURE__ */ jsx334(TextArea, { id: name, name, value, onChange, onBlur: handleBlur }) }));
+  return /* @__PURE__ */ jsx336(BaseFormTextField, __spreadProps(__spreadValues({}, props), { isTextArea: true, children: /* @__PURE__ */ jsx336(
+    TextArea,
+    {
+      slot: "input",
+      id: name,
+      name,
+      value,
+      onChange,
+      onBlur: handleBlur
+    }
+  ) }));
 }
 
 // src/features/forms/components/FormTextField.tsx
 import { useCallback as useCallback51 } from "react";
-import { jsx as jsx335 } from "react/jsx-runtime";
-function FormTextField({ slotProps }) {
+import { jsx as jsx337 } from "react/jsx-runtime";
+function FormTextField(props) {
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
   const onChange = useCallback51((e) => {
     handleChange(e.target.value);
   }, [handleChange]);
-  return /* @__PURE__ */ jsx335(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { children: /* @__PURE__ */ jsx335(InputGroup2, { children: /* @__PURE__ */ jsx335(Input2, { inset: true, id: name, name, value, onChange, onBlur: handleBlur }) }) }));
+  return /* @__PURE__ */ jsx337(BaseFormTextField, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx337(InputGroup2, { slot: "input", children: /* @__PURE__ */ jsx337(
+    Input2,
+    {
+      id: name,
+      name,
+      value,
+      onChange,
+      onBlur: handleBlur,
+      inset: true
+    }
+  ) }) }));
 }
 
 // src/features/forms/hooks/useForm.tsx
 var { fieldContext, useFieldContext, formContext, useFormContext } = createFormHookContexts();
-var { useAppForm, withForm } = createFormHook({
+var { useAppForm: useInternalAppForm } = createFormHook({
   fieldComponents: {
     BaseFormTextField,
     FormBigDecimalField,
-    FormCurrencyField,
+    FormCheckboxField,
+    FormDateField,
     FormTextAreaField,
     FormTextField
   },
@@ -37603,9 +37870,104 @@ var { useAppForm, withForm } = createFormHook({
   fieldContext,
   formContext
 });
+function useAppForm(props) {
+  return useInternalAppForm(props);
+}
+
+// src/features/invoices/invoiceSchemas.ts
+import { Schema as Schema10, pipe as pipe5 } from "effect";
+
+// src/components/Invoices/InvoiceTermsComboBox/InvoiceTermsComboBox.tsx
+import { useCallback as useCallback52, useId as useId5 } from "react";
+import { differenceInDays as differenceInDays4, startOfDay as startOfDay2 } from "date-fns";
+import { jsx as jsx338, jsxs as jsxs213 } from "react/jsx-runtime";
+var InvoiceTermsValues = /* @__PURE__ */ ((InvoiceTermsValues2) => {
+  InvoiceTermsValues2["Net10"] = "Net10";
+  InvoiceTermsValues2["Net15"] = "Net15";
+  InvoiceTermsValues2["Net30"] = "Net30";
+  InvoiceTermsValues2["Net60"] = "Net60";
+  InvoiceTermsValues2["Net90"] = "Net90";
+  InvoiceTermsValues2["Custom"] = "Custom";
+  return InvoiceTermsValues2;
+})(InvoiceTermsValues || {});
+var InvoiceTermsOptionConfig = {
+  ["Net10" /* Net10 */]: { label: "Net 10", value: "Net10" /* Net10 */ },
+  ["Net15" /* Net15 */]: { label: "Net 15", value: "Net15" /* Net15 */ },
+  ["Net30" /* Net30 */]: { label: "Net 30", value: "Net30" /* Net30 */ },
+  ["Net60" /* Net60 */]: { label: "Net 60", value: "Net60" /* Net60 */ },
+  ["Net90" /* Net90 */]: { label: "Net 90", value: "Net90" /* Net90 */ },
+  ["Custom" /* Custom */]: { label: "Custom", value: "Custom" /* Custom */ }
+};
+var options = Object.values(InvoiceTermsOptionConfig);
+var getDurationInDaysFromTerms = (terms) => {
+  switch (terms) {
+    case "Net10" /* Net10 */:
+      return 10;
+    case "Net15" /* Net15 */:
+      return 15;
+    case "Net30" /* Net30 */:
+      return 30;
+    case "Net60" /* Net60 */:
+      return 60;
+    case "Net90" /* Net90 */:
+      return 90;
+    case "Custom" /* Custom */:
+    default:
+      return void 0;
+  }
+};
+var getInvoiceTermsFromDates = (sentAt, dueAt) => {
+  if (!sentAt || !dueAt) return "Custom" /* Custom */;
+  const days = differenceInDays4(
+    startOfDay2(dueAt.toDate()),
+    startOfDay2(sentAt.toDate())
+  );
+  switch (days) {
+    case 10:
+      return "Net10" /* Net10 */;
+    case 15:
+      return "Net15" /* Net15 */;
+    case 30:
+      return "Net30" /* Net30 */;
+    case 60:
+      return "Net60" /* Net60 */;
+    case 90:
+      return "Net90" /* Net90 */;
+    default:
+      return "Custom" /* Custom */;
+  }
+};
+var InvoiceTermsComboBox = ({ value, onValueChange, isReadOnly }) => {
+  const selectedOption = InvoiceTermsOptionConfig[value];
+  const onSelectedValueChange = useCallback52((option) => {
+    onValueChange((option == null ? void 0 : option.value) || null);
+  }, [onValueChange]);
+  const inputId = useId5();
+  return /* @__PURE__ */ jsxs213(HStack, { className: "Layer__InvoiceForm__TermsComboBox Layer__InvoiceForm__Field__Terms", children: [
+    /* @__PURE__ */ jsx338(Label, { size: "sm", htmlFor: inputId, children: "Terms" }),
+    /* @__PURE__ */ jsx338(
+      ComboBox,
+      {
+        options,
+        onSelectedValueChange,
+        selectedValue: selectedOption,
+        isSearchable: false,
+        isClearable: false,
+        inputId,
+        isReadOnly
+      }
+    )
+  ] });
+};
+
+// src/utils/schema/utils.ts
+import { Schema as Schema9 } from "effect";
+import { ZonedDateTime as ZonedDateTime2 } from "@internationalized/date";
+var ZonedDateTimeFromSelf = Schema9.declare(
+  (input) => input instanceof ZonedDateTime2
+);
 
 // src/features/invoices/invoiceSchemas.ts
-import { Schema as Schema9, pipe as pipe5 } from "effect";
 var InvoiceStatus = /* @__PURE__ */ ((InvoiceStatus3) => {
   InvoiceStatus3["Voided"] = "VOIDED";
   InvoiceStatus3["Paid"] = "PAID";
@@ -37615,10 +37977,10 @@ var InvoiceStatus = /* @__PURE__ */ ((InvoiceStatus3) => {
   InvoiceStatus3["Sent"] = "SENT";
   return InvoiceStatus3;
 })(InvoiceStatus || {});
-var InvoiceStatusSchema = Schema9.Enums(InvoiceStatus);
-var TransformedInvoiceStatusSchema = Schema9.transform(
-  Schema9.NonEmptyTrimmedString,
-  Schema9.typeSchema(InvoiceStatusSchema),
+var InvoiceStatusSchema = Schema10.Enums(InvoiceStatus);
+var TransformedInvoiceStatusSchema = Schema10.transform(
+  Schema10.NonEmptyTrimmedString,
+  Schema10.typeSchema(InvoiceStatusSchema),
   {
     decode: (input) => {
       if (Object.values(InvoiceStatusSchema.enums).includes(input)) {
@@ -37629,153 +37991,175 @@ var TransformedInvoiceStatusSchema = Schema9.transform(
     encode: (input) => input
   }
 );
-var InvoiceLineItemSchema = Schema9.Struct({
-  id: Schema9.UUID,
+var InvoiceLineItemSchema = Schema10.Struct({
+  id: Schema10.UUID,
   externalId: pipe5(
-    Schema9.propertySignature(Schema9.NullOr(Schema9.String)),
-    Schema9.fromKey("external_id")
+    Schema10.propertySignature(Schema10.NullOr(Schema10.String)),
+    Schema10.fromKey("external_id")
   ),
   invoiceId: pipe5(
-    Schema9.propertySignature(Schema9.UUID),
-    Schema9.fromKey("invoice_id")
+    Schema10.propertySignature(Schema10.UUID),
+    Schema10.fromKey("invoice_id")
   ),
-  description: Schema9.NullOr(Schema9.String),
-  product: Schema9.NullOr(Schema9.String),
+  description: Schema10.NullOr(Schema10.String),
+  product: Schema10.NullOr(Schema10.String),
   unitPrice: pipe5(
-    Schema9.propertySignature(Schema9.Number),
-    Schema9.fromKey("unit_price")
+    Schema10.propertySignature(Schema10.Number),
+    Schema10.fromKey("unit_price")
   ),
-  quantity: Schema9.BigDecimal,
-  subtotal: Schema9.Number,
+  quantity: Schema10.BigDecimal,
+  subtotal: Schema10.Number,
   discountAmount: pipe5(
-    Schema9.propertySignature(Schema9.Number),
-    Schema9.fromKey("discount_amount")
+    Schema10.propertySignature(Schema10.Number),
+    Schema10.fromKey("discount_amount")
   ),
   salesTaxTotal: pipe5(
-    Schema9.propertySignature(Schema9.Number),
-    Schema9.fromKey("sales_taxes_total")
+    Schema10.propertySignature(Schema10.Number),
+    Schema10.fromKey("sales_taxes_total")
   ),
   totalAmount: pipe5(
-    Schema9.propertySignature(Schema9.Number),
-    Schema9.fromKey("total_amount")
+    Schema10.propertySignature(Schema10.Number),
+    Schema10.fromKey("total_amount")
   ),
-  memo: Schema9.NullOr(Schema9.String)
+  memo: Schema10.NullOr(Schema10.String)
 });
-var InvoiceSchema = Schema9.Struct({
-  id: Schema9.UUID,
+var InvoiceSchema = Schema10.Struct({
+  id: Schema10.UUID,
   businessId: pipe5(
-    Schema9.propertySignature(Schema9.UUID),
-    Schema9.fromKey("business_id")
+    Schema10.propertySignature(Schema10.UUID),
+    Schema10.fromKey("business_id")
   ),
   externalId: pipe5(
-    Schema9.propertySignature(Schema9.NullOr(Schema9.String)),
-    Schema9.fromKey("external_id")
+    Schema10.propertySignature(Schema10.NullOr(Schema10.String)),
+    Schema10.fromKey("external_id")
   ),
   status: TransformedInvoiceStatusSchema,
   sentAt: pipe5(
-    Schema9.propertySignature(Schema9.NullOr(Schema9.Date)),
-    Schema9.fromKey("sent_at")
+    Schema10.propertySignature(Schema10.NullOr(Schema10.Date)),
+    Schema10.fromKey("sent_at")
   ),
   dueAt: pipe5(
-    Schema9.propertySignature(Schema9.NullOr(Schema9.Date)),
-    Schema9.fromKey("due_at")
+    Schema10.propertySignature(Schema10.NullOr(Schema10.Date)),
+    Schema10.fromKey("due_at")
   ),
   paidAt: pipe5(
-    Schema9.propertySignature(Schema9.NullOr(Schema9.Date)),
-    Schema9.fromKey("paid_at")
+    Schema10.propertySignature(Schema10.NullOr(Schema10.Date)),
+    Schema10.fromKey("paid_at")
   ),
   voidedAt: pipe5(
-    Schema9.propertySignature(Schema9.NullOr(Schema9.Date)),
-    Schema9.fromKey("voided_at")
+    Schema10.propertySignature(Schema10.NullOr(Schema10.Date)),
+    Schema10.fromKey("voided_at")
   ),
   invoiceNumber: pipe5(
-    Schema9.propertySignature(Schema9.NullOr(Schema9.String)),
-    Schema9.fromKey("invoice_number")
+    Schema10.propertySignature(Schema10.NullOr(Schema10.String)),
+    Schema10.fromKey("invoice_number")
   ),
   recipientName: pipe5(
-    Schema9.propertySignature(Schema9.NullOr(Schema9.String)),
-    Schema9.fromKey("recipient_name")
+    Schema10.propertySignature(Schema10.NullOr(Schema10.String)),
+    Schema10.fromKey("recipient_name")
   ),
-  customer: Schema9.NullOr(CustomerSchema),
+  customer: Schema10.NullOr(CustomerSchema),
   lineItems: pipe5(
-    Schema9.propertySignature(Schema9.Array(InvoiceLineItemSchema)),
-    Schema9.fromKey("line_items")
+    Schema10.propertySignature(Schema10.Array(InvoiceLineItemSchema)),
+    Schema10.fromKey("line_items")
   ),
-  subtotal: Schema9.Number,
+  subtotal: Schema10.Number,
   additionalDiscount: pipe5(
-    Schema9.propertySignature(Schema9.Number),
-    Schema9.fromKey("additional_discount")
+    Schema10.propertySignature(Schema10.Number),
+    Schema10.fromKey("additional_discount")
   ),
   additionalSalesTaxesTotal: pipe5(
-    Schema9.propertySignature(Schema9.Number),
-    Schema9.fromKey("additional_sales_taxes_total")
+    Schema10.propertySignature(Schema10.Number),
+    Schema10.fromKey("additional_sales_taxes_total")
   ),
   totalAmount: pipe5(
-    Schema9.propertySignature(Schema9.Number),
-    Schema9.fromKey("total_amount")
+    Schema10.propertySignature(Schema10.Number),
+    Schema10.fromKey("total_amount")
   ),
   outstandingBalance: pipe5(
-    Schema9.propertySignature(Schema9.Number),
-    Schema9.fromKey("outstanding_balance")
+    Schema10.propertySignature(Schema10.Number),
+    Schema10.fromKey("outstanding_balance")
   ),
   importedAt: pipe5(
-    Schema9.propertySignature(Schema9.Date),
-    Schema9.fromKey("imported_at")
+    Schema10.propertySignature(Schema10.Date),
+    Schema10.fromKey("imported_at")
   ),
   updatedAt: pipe5(
-    Schema9.propertySignature(Schema9.NullOr(Schema9.Date)),
-    Schema9.fromKey("updated_at")
+    Schema10.propertySignature(Schema10.NullOr(Schema10.Date)),
+    Schema10.fromKey("updated_at")
   ),
-  memo: Schema9.NullOr(Schema9.String)
+  memo: Schema10.NullOr(Schema10.String)
 });
-var UpsertInvoiceTaxLineItemSchema = Schema9.Struct({
-  amount: Schema9.Number
+var UpsertInvoiceTaxLineItemSchema = Schema10.Struct({
+  amount: Schema10.Number
 });
-var UpsertInvoiceLineItemSchema = Schema9.Struct({
-  description: Schema9.String,
-  product: Schema9.String,
+var UpsertInvoiceLineItemSchema = Schema10.Struct({
+  description: Schema10.String,
+  product: Schema10.String,
   unitPrice: pipe5(
-    Schema9.propertySignature(Schema9.Number),
-    Schema9.fromKey("unit_price")
+    Schema10.propertySignature(Schema10.Number),
+    Schema10.fromKey("unit_price")
   ),
-  quantity: Schema9.BigDecimal
+  quantity: Schema10.BigDecimal,
+  salesTaxes: pipe5(
+    Schema10.propertySignature(Schema10.UndefinedOr(Schema10.Array(UpsertInvoiceTaxLineItemSchema))),
+    Schema10.fromKey("sales_taxes")
+  )
 });
-var UpsertInvoiceSchema = Schema9.Struct({
+var UpsertInvoiceSchema = Schema10.Struct({
   sentAt: pipe5(
-    Schema9.propertySignature(Schema9.Date),
-    Schema9.fromKey("sent_at")
+    Schema10.propertySignature(Schema10.Date),
+    Schema10.fromKey("sent_at")
   ),
   dueAt: pipe5(
-    Schema9.propertySignature(Schema9.Date),
-    Schema9.fromKey("due_at")
+    Schema10.propertySignature(Schema10.Date),
+    Schema10.fromKey("due_at")
   ),
   invoiceNumber: pipe5(
-    Schema9.propertySignature(Schema9.UndefinedOr(Schema9.String)),
-    Schema9.fromKey("invoice_number")
+    Schema10.propertySignature(Schema10.UndefinedOr(Schema10.String)),
+    Schema10.fromKey("invoice_number")
   ),
   customerId: pipe5(
-    Schema9.propertySignature(Schema9.UUID),
-    Schema9.fromKey("customer_id")
+    Schema10.propertySignature(Schema10.UUID),
+    Schema10.fromKey("customer_id")
   ),
-  memo: Schema9.NullOr(Schema9.String),
+  memo: Schema10.NullOr(Schema10.String),
   lineItems: pipe5(
-    Schema9.propertySignature(Schema9.Array(UpsertInvoiceLineItemSchema)),
-    Schema9.fromKey("line_items")
+    Schema10.propertySignature(Schema10.Array(UpsertInvoiceLineItemSchema)),
+    Schema10.fromKey("line_items")
   ),
   additionalDiscount: pipe5(
-    Schema9.propertySignature(Schema9.UndefinedOr(Schema9.Number)),
-    Schema9.fromKey("additional_discount")
-  ),
-  additionalSalesTaxes: pipe5(
-    Schema9.propertySignature(Schema9.UndefinedOr(Schema9.Array(UpsertInvoiceTaxLineItemSchema))),
-    Schema9.fromKey("additional_sales_taxes")
+    Schema10.propertySignature(Schema10.UndefinedOr(Schema10.Number)),
+    Schema10.fromKey("additional_discount")
   )
 });
+var InvoiceFormLineItemSchema = Schema10.Struct({
+  description: Schema10.String,
+  product: Schema10.String,
+  unitPrice: Schema10.BigDecimal,
+  quantity: Schema10.BigDecimal,
+  amount: Schema10.BigDecimal,
+  isTaxable: Schema10.Boolean
+});
+var InvoiceTermsValuesSchema = Schema10.Enums(InvoiceTermsValues);
+var InvoiceFormSchema = Schema10.Struct({
+  terms: InvoiceTermsValuesSchema,
+  sentAt: Schema10.NullOr(ZonedDateTimeFromSelf),
+  dueAt: Schema10.NullOr(ZonedDateTimeFromSelf),
+  invoiceNumber: Schema10.String,
+  customer: Schema10.NullOr(CustomerSchema),
+  email: Schema10.String,
+  address: Schema10.String,
+  lineItems: Schema10.Array(InvoiceFormLineItemSchema),
+  discountRate: Schema10.BigDecimal,
+  taxRate: Schema10.BigDecimal,
+  memo: Schema10.String
+});
 
 // src/features/invoices/api/useUpsertInvoice.tsx
-import { useCallback as useCallback52 } from "react";
+import { useCallback as useCallback53 } from "react";
 import useSWRMutation26 from "swr/mutation";
-import { Schema as Schema10, Effect } from "effect";
+import { Schema as Schema11, Effect } from "effect";
 var UPSERT_INVOICES_TAG_KEY = "#upsert-invoice";
 var createInvoice = post(({ businessId }) => `/v1/businesses/${businessId}/invoices`);
 var updateInvoice = put(({ businessId, invoiceId }) => `/v1/businesses/${businessId}/invoices/${invoiceId}`);
@@ -37795,7 +38179,7 @@ function buildKey39({
     };
   }
 }
-var UpsertInvoiceReturnSchema = Schema10.Struct({
+var UpsertInvoiceReturnSchema = Schema11.Struct({
   data: InvoiceSchema
 });
 var UpsertInvoiceSWRResponse = class {
@@ -37816,19 +38200,19 @@ var UpsertInvoiceSWRResponse = class {
     return this.swrResponse.error !== void 0;
   }
 };
-var CreateParamsSchema = Schema10.Struct({
-  businessId: Schema10.String
+var CreateParamsSchema = Schema11.Struct({
+  businessId: Schema11.String
 });
-var UpdateParamsSchema = Schema10.Struct({
-  businessId: Schema10.String,
-  invoiceId: Schema10.String
+var UpdateParamsSchema = Schema11.Struct({
+  businessId: Schema11.String,
+  invoiceId: Schema11.String
 });
 var isParamsValidForMode = (mode, params) => {
   if (mode === "Update" /* Update */) {
-    return Effect.runSync(Effect.either(Schema10.decodeUnknown(UpdateParamsSchema)(params)))._tag === "Right";
+    return Effect.runSync(Effect.either(Schema11.decodeUnknown(UpdateParamsSchema)(params)))._tag === "Right";
   }
   if (mode === "Create" /* Create */) {
-    return Effect.runSync(Effect.either(Schema10.decodeUnknown(CreateParamsSchema)(params)))._tag === "Right";
+    return Effect.runSync(Effect.either(Schema11.decodeUnknown(CreateParamsSchema)(params)))._tag === "Right";
   }
   return false;
 };
@@ -37861,15 +38245,16 @@ var useUpsertInvoice = (props) => {
         apiUrl,
         accessToken,
         body
-      }).then(Schema10.decodeUnknownPromise(UpsertInvoiceReturnSchema));
+      }).then(Schema11.decodeUnknownPromise(UpsertInvoiceReturnSchema));
     },
     {
-      revalidate: false
+      revalidate: false,
+      throwOnError: true
     }
   );
   const mutationResponse = new UpsertInvoiceSWRResponse(rawMutationResponse);
   const originalTrigger = mutationResponse.trigger;
-  const stableProxiedTrigger = useCallback52(
+  const stableProxiedTrigger = useCallback53(
     (...triggerParameters) => __async(null, null, function* () {
       const triggerResult = yield originalTrigger(...triggerParameters);
       return triggerResult;
@@ -37887,65 +38272,283 @@ var useUpsertInvoice = (props) => {
 };
 
 // src/components/Invoices/InvoiceForm/useInvoiceForm.ts
-import { BigDecimal as BD4, Schema as Schema11 } from "effect";
-var EMPTY_LINE_ITEM = {
+import { Schema as Schema12 } from "effect";
+
+// src/components/Invoices/InvoiceForm/totalsUtils.ts
+import { BigDecimal as BD3 } from "effect";
+function computeSubtotal(lineItems) {
+  return lineItems.reduce((sum, item) => BD3.sum(sum, item.amount), BIG_DECIMAL_ZERO);
+}
+var computeRawTaxableSubtotal = (lineItems) => lineItems.filter((item) => item.isTaxable).reduce((sum, item) => BD3.sum(sum, item.amount), BIG_DECIMAL_ZERO);
+function computeAdditionalDiscount({
+  subtotal,
+  discountRate
+}) {
+  const rawDiscountAmount = BD3.multiply(subtotal, discountRate);
+  const additionalDiscount = roundDecimalToCents(rawDiscountAmount);
+  return additionalDiscount;
+}
+function computeTaxableSubtotal({
+  rawTaxableSubtotal,
+  discountRate
+}) {
+  const discountForTaxableSubtotal = BD3.multiply(rawTaxableSubtotal, discountRate);
+  const taxableSubtotal = BD3.subtract(rawTaxableSubtotal, discountForTaxableSubtotal);
+  return taxableSubtotal;
+}
+function computeTaxes({
+  taxableSubtotal,
+  taxRate
+}) {
+  const rawTaxAmount = BD3.multiply(taxableSubtotal, taxRate);
+  const taxes = roundDecimalToCents(rawTaxAmount);
+  return taxes;
+}
+function computeGrandTotal({
+  subtotal,
+  additionalDiscount,
+  taxes
+}) {
+  const subtotalLessDiscounts = BD3.subtract(subtotal, additionalDiscount);
+  const grandTotal = BD3.sum(subtotalLessDiscounts, taxes);
+  return grandTotal;
+}
+var getGrandTotalFromInvoice = (invoice) => {
+  const { lineItems, discountRate, taxRate } = invoice;
+  const subtotal = computeSubtotal(lineItems);
+  const rawTaxableSubtotal = computeRawTaxableSubtotal(lineItems);
+  const taxableSubtotal = computeTaxableSubtotal({ rawTaxableSubtotal, discountRate });
+  const taxes = computeTaxes({ taxableSubtotal, taxRate });
+  const additionalDiscount = computeAdditionalDiscount({ subtotal, discountRate });
+  const grandTotal = computeGrandTotal({ subtotal, additionalDiscount, taxes });
+  return grandTotal;
+};
+
+// src/components/Invoices/InvoiceForm/formUtils.ts
+import { BigDecimal as BD4 } from "effect";
+import { startOfToday } from "date-fns";
+import { getLocalTimeZone, fromDate } from "@internationalized/date";
+var import_lodash6 = __toESM(require_lodash2());
+var getEmptyLineItem = () => ({
   product: "",
   description: "",
-  unitPrice: 0,
+  unitPrice: BIG_DECIMAL_ZERO,
   quantity: BIG_DECIMAL_ONE,
-  amount: 0
-};
-var DEFAULT_FORM_VALUES = {
-  invoiceNumber: "",
-  customer: null,
-  email: "",
-  address: "",
-  lineItems: [EMPTY_LINE_ITEM]
+  amount: BIG_DECIMAL_ZERO,
+  isTaxable: false
+});
+var getInvoiceFormDefaultValues = () => {
+  const sentAt = fromDate(startOfToday(), getLocalTimeZone());
+  const dueAt = sentAt.add({ days: 30 });
+  return {
+    invoiceNumber: "",
+    terms: "Net30" /* Net30 */,
+    sentAt,
+    dueAt,
+    customer: null,
+    email: "",
+    address: "",
+    lineItems: [getEmptyLineItem()],
+    memo: "",
+    discountRate: BIG_DECIMAL_ZERO,
+    taxRate: BIG_DECIMAL_ZERO
+  };
 };
 var getInvoiceLineItemAmount = (lineItem) => {
   const { unitPrice, quantity } = lineItem;
-  return convertBigDecimalToCents(BD4.multiply(quantity, convertCentsToBigDecimal(unitPrice)));
+  return BD4.multiply(quantity, convertCentsToBigDecimal(unitPrice));
 };
-var getAugmentedInvoiceFormLineItem = (lineItem) => {
-  return __spreadProps(__spreadValues({}, lineItem), {
-    amount: getInvoiceLineItemAmount(lineItem)
-  });
+var getInvoiceFormLineItem = (lineItem) => {
+  const { product, description, unitPrice, quantity } = lineItem;
+  return {
+    product: product || "",
+    description: description || "",
+    quantity: BD4.normalize(quantity),
+    unitPrice: convertCentsToBigDecimal(unitPrice),
+    amount: getInvoiceLineItemAmount(lineItem),
+    isTaxable: lineItem.salesTaxTotal > 0
+  };
 };
-var getInvoiceFormDefaultValues = (invoice) => {
+var getInvoiceFormInitialValues = (invoice) => {
   var _a, _b;
+  const invoiceFormLineItems = invoice.lineItems.map(getInvoiceFormLineItem);
+  const subtotal = computeSubtotal(invoiceFormLineItems);
+  const rawTaxableSubtotal = computeRawTaxableSubtotal(invoiceFormLineItems);
+  const additionalDiscount = convertCentsToBigDecimal(invoice.additionalDiscount);
+  const discountRate = safeDivide(additionalDiscount, subtotal);
+  const taxableSubtotal = computeTaxableSubtotal({ rawTaxableSubtotal, discountRate });
+  const taxes = invoice.lineItems.reduce(
+    (sum, item) => BD4.sum(sum, convertCentsToBigDecimal(item.salesTaxTotal)),
+    BIG_DECIMAL_ZERO
+  );
+  const taxRate = safeDivide(taxes, taxableSubtotal);
+  const sentAt = invoice.sentAt ? fromDate(invoice.sentAt, "UTC") : null;
+  const dueAt = invoice.dueAt ? fromDate(invoice.dueAt, "UTC") : null;
   return {
-    invoiceNumber: invoice.invoiceNumber,
+    terms: getInvoiceTermsFromDates(sentAt, dueAt),
+    invoiceNumber: invoice.invoiceNumber || "",
+    sentAt,
+    dueAt,
     customer: invoice.customer,
-    email: (_a = invoice.customer) == null ? void 0 : _a.email,
-    address: (_b = invoice.customer) == null ? void 0 : _b.addressString,
-    lineItems: invoice.lineItems.map(getAugmentedInvoiceFormLineItem)
+    email: ((_a = invoice.customer) == null ? void 0 : _a.email) || "",
+    address: ((_b = invoice.customer) == null ? void 0 : _b.addressString) || "",
+    lineItems: invoiceFormLineItems,
+    discountRate,
+    taxRate,
+    memo: invoice.memo || ""
   };
 };
+var getIsEqualLineItems = (a, b) => {
+  return (0, import_lodash6.isEqualWith)(a, b, (val1, val2, key) => {
+    if (key === "unitPrice" || key === "quantity" || key === "amount") {
+      return BD4.isBigDecimal(val1) && BD4.isBigDecimal(val2) && BD4.equals(val1, val2);
+    }
+    return void 0;
+  });
+};
+var validateOnSubmit = ({ value: invoice }) => {
+  const errors = [];
+  if (invoice.customer === null) {
+    errors.push({ customer: "Customer is a required field." });
+  }
+  if (!invoice.invoiceNumber.trim()) {
+    errors.push({ invoiceNumber: "Invoice number is a required field." });
+  }
+  if (invoice.sentAt === null) {
+    errors.push({ sentAt: "Invoice date is a required field." });
+  }
+  if (invoice.dueAt === null) {
+    errors.push({ dueAt: "Due date is a required field." });
+  }
+  if (invoice.lineItems.length === 0) {
+    errors.push({ lineItems: "Invoice requires at least one line item." });
+  }
+  const emptyLineItem = getEmptyLineItem();
+  invoice.lineItems.some((item) => {
+    if (!getIsEqualLineItems(item, emptyLineItem) && item.product === "") {
+      errors.push({ lineItems: "Invoice has incomplete line items. Please include required field Product/Service." });
+      return true;
+    }
+  });
+  const grandTotal = getGrandTotalFromInvoice(invoice);
+  if (BD4.isNegative(grandTotal)) {
+    errors.push({ lineItems: "Invoice has a negative total." });
+  }
+  return errors.length > 0 ? errors : null;
+};
+function flattenValidationErrors(errors) {
+  return Object.values(errors).filter(
+    (value) => Array.isArray(value) && value.every((entry) => typeof entry === "object" && entry !== null)
+  ).flatMap(
+    (errorArray) => errorArray.flatMap(
+      (entry) => Object.values(entry)
+    )
+  );
+}
+var convertInvoiceFormToParams = (form) => {
+  var _a, _b, _c;
+  return __spreadValues({
+    customerId: (_a = form.customer) == null ? void 0 : _a.id,
+    dueAt: (_b = form.dueAt) == null ? void 0 : _b.toDate(),
+    sentAt: (_c = form.sentAt) == null ? void 0 : _c.toDate(),
+    invoiceNumber: form.invoiceNumber || void 0,
+    memo: form.memo,
+    lineItems: form.lineItems.map((item) => {
+      const baseLineItem = {
+        description: item.description,
+        product: item.product,
+        unitPrice: convertBigDecimalToCents(item.unitPrice),
+        quantity: item.quantity
+      };
+      return !BD4.equals(form.taxRate, BIG_DECIMAL_ZERO) && item.isTaxable ? __spreadProps(__spreadValues({}, baseLineItem), {
+        salesTaxes: [
+          {
+            amount: convertBigDecimalToCents(
+              BD4.multiply(item.amount, form.taxRate)
+            )
+          }
+        ]
+      }) : baseLineItem;
+    })
+  }, !BD4.equals(form.discountRate, BIG_DECIMAL_ZERO) && {
+    additionalDiscount: convertBigDecimalToCents(
+      BD4.multiply(computeSubtotal(form.lineItems), form.discountRate)
+    )
+  });
+};
+
+// src/components/Invoices/InvoiceForm/useInvoiceForm.ts
+function isUpdateMode(props) {
+  return props.mode === "Update" /* Update */;
+}
 var useInvoiceForm = (props) => {
   const [submitError, setSubmitError] = useState84(void 0);
   const { onSuccess, mode } = props;
   const upsertInvoiceProps = mode === "Update" /* Update */ ? { mode, invoiceId: props.invoice.id } : { mode };
   const { trigger: upsertInvoice } = useUpsertInvoice(upsertInvoiceProps);
-  const defaultValues = mode === "Update" /* Update */ ? getInvoiceFormDefaultValues(props.invoice) : DEFAULT_FORM_VALUES;
-  const form = useAppForm({
-    defaultValues,
-    onSubmit: (_0) => __async(null, [_0], function* ({ value }) {
-      var _a;
-      try {
-        const payload = __spreadProps(__spreadValues({}, value), {
-          customerId: (_a = value == null ? void 0 : value.customer) == null ? void 0 : _a.id
-        });
-        const invoiceParams = Schema11.validateSync(UpsertInvoiceSchema)(payload);
-        const { data: invoice } = yield upsertInvoice(invoiceParams);
-        setSubmitError(void 0);
-        onSuccess == null ? void 0 : onSuccess(invoice);
-      } catch (e) {
-        setSubmitError("Something went wrong. Please try again.");
-      }
-    })
-  });
+  const defaultValuesRef = useRef30(
+    isUpdateMode(props) ? getInvoiceFormInitialValues(props.invoice) : getInvoiceFormDefaultValues()
+  );
+  const defaultValues = defaultValuesRef.current;
+  const onSubmit = useCallback54((_0) => __async(null, [_0], function* ({ value }) {
+    try {
+      const upsertInvoiceParams = convertInvoiceFormToParams(value);
+      const upsertInvoiceRequest = Schema12.encodeUnknownSync(UpsertInvoiceSchema)(upsertInvoiceParams);
+      const { data: invoice } = yield upsertInvoice(upsertInvoiceRequest);
+      setSubmitError(void 0);
+      onSuccess == null ? void 0 : onSuccess(invoice);
+    } catch (e) {
+      console.error(e);
+      setSubmitError("Something went wrong. Please try again.");
+    }
+  }), [onSuccess, upsertInvoice]);
+  const validators = useMemo72(() => ({
+    onSubmit: validateOnSubmit
+  }), []);
+  const form = useAppForm({ defaultValues, onSubmit, validators });
   const isFormValid = useStore7(form.store, (state) => state.isValid);
-  return { form, submitError, isFormValid };
+  const isSubmitting = useStore7(form.store, (state) => state.isSubmitting);
+  const formState = useMemo72(() => ({
+    isFormValid,
+    isSubmitting,
+    submitError
+  }), [isFormValid, isSubmitting, submitError]);
+  const discountRate = useStore7(form.store, (state) => state.values.discountRate);
+  const taxRate = useStore7(form.store, (state) => state.values.taxRate);
+  const { subtotal, rawTaxableSubtotal } = useStore7(form.store, (state) => {
+    const lineItems = state.values.lineItems;
+    return {
+      subtotal: computeSubtotal(lineItems),
+      rawTaxableSubtotal: computeRawTaxableSubtotal(lineItems)
+    };
+  });
+  const additionalDiscount = useMemo72(
+    () => computeAdditionalDiscount({ subtotal, discountRate }),
+    [subtotal, discountRate]
+  );
+  const taxableSubtotal = useMemo72(
+    () => computeTaxableSubtotal({ rawTaxableSubtotal, discountRate }),
+    [rawTaxableSubtotal, discountRate]
+  );
+  const taxes = useMemo72(
+    () => computeTaxes({ taxableSubtotal, taxRate }),
+    [taxableSubtotal, taxRate]
+  );
+  const grandTotal = useMemo72(
+    () => computeGrandTotal({ subtotal, additionalDiscount, taxes }),
+    [subtotal, additionalDiscount, taxes]
+  );
+  const totals = useMemo72(() => ({
+    subtotal,
+    additionalDiscount,
+    taxableSubtotal,
+    taxes,
+    grandTotal
+  }), [additionalDiscount, grandTotal, subtotal, taxableSubtotal, taxes]);
+  return useMemo72(
+    () => ({ form, formState, totals }),
+    [form, formState, totals]
+  );
 };
 
 // src/components/Invoices/InvoiceForm/InvoiceForm.tsx
@@ -37953,9 +38556,9 @@ import { Plus as Plus2, Trash as Trash2 } from "lucide-react";
 import { BigDecimal as BD5 } from "effect";
 
 // src/features/customers/components/CustomerSelector.tsx
-import { useCallback as useCallback53, useId as useId5, useMemo as useMemo72 } from "react";
-import classNames89 from "classnames";
-import { jsx as jsx336, jsxs as jsxs212 } from "react/jsx-runtime";
+import { useCallback as useCallback55, useId as useId6, useMemo as useMemo73 } from "react";
+import classNames91 from "classnames";
+import { jsx as jsx339, jsxs as jsxs214 } from "react/jsx-runtime";
 function getCustomerName(customer) {
   var _a, _b, _c;
   return (_c = (_b = (_a = customer.individualName) != null ? _a : customer.companyName) != null ? _b : customer.externalId) != null ? _c : "Unknown Customer";
@@ -37986,7 +38589,7 @@ function CustomerSelector({
   inline,
   className
 }) {
-  const combinedClassName = classNames89(
+  const combinedClassName = classNames91(
     "Layer__CustomerSelector",
     inline && "Layer__CustomerSelector--inline",
     className
@@ -37996,12 +38599,12 @@ function CustomerSelector({
   });
   const effectiveSearchQuery = searchQuery === "" ? void 0 : searchQuery;
   const { data, isLoading, isError } = useListCustomers({ query: effectiveSearchQuery });
-  const options = useMemo72(
+  const options2 = useMemo73(
     () => (data == null ? void 0 : data.flatMap(({ data: data2 }) => data2).map((customer) => new CustomerAsOption(customer))) || [],
     [data]
   );
   const selectedCustomerId = selectedCustomer == null ? void 0 : selectedCustomer.id;
-  const handleSelectionChange = useCallback53(
+  const handleSelectionChange = useCallback55(
     (selectedOption) => {
       if (selectedOption === null) {
         handleInputChange("");
@@ -38010,7 +38613,7 @@ function CustomerSelector({
         }
         return;
       }
-      const selectedCustomer2 = options.find(({ id }) => id === selectedOption.value);
+      const selectedCustomer2 = options2.find(({ id }) => id === selectedOption.value);
       if (selectedCustomer2) {
         const selectedCustomerWithType = selectedCustomer2.original;
         if (selectedCustomer2.id !== selectedCustomerId) {
@@ -38020,9 +38623,9 @@ function CustomerSelector({
         return;
       }
     },
-    [options, handleInputChange, selectedCustomerId, onSelectedCustomerChange]
+    [options2, handleInputChange, selectedCustomerId, onSelectedCustomerChange]
   );
-  const selectedCustomerForComboBox = useMemo72(
+  const selectedCustomerForComboBox = useMemo73(
     () => {
       if (selectedCustomer === null) {
         return null;
@@ -38034,12 +38637,12 @@ function CustomerSelector({
     },
     [selectedCustomer]
   );
-  const EmptyMessage = useMemo72(
-    () => /* @__PURE__ */ jsx336(P, { variant: "subtle", children: "No matching customer" }),
+  const EmptyMessage = useMemo73(
+    () => /* @__PURE__ */ jsx339(P, { variant: "subtle", children: "No matching customer" }),
     []
   );
-  const ErrorMessage = useMemo72(
-    () => /* @__PURE__ */ jsx336(
+  const ErrorMessage = useMemo73(
+    () => /* @__PURE__ */ jsx339(
       P,
       {
         size: "xs",
@@ -38049,142 +38652,287 @@ function CustomerSelector({
     ),
     []
   );
-  const inputId = useId5();
-  const isFiltered = effectiveSearchQuery !== void 0;
-  const noCustomersExist = !isLoading && !isFiltered && data !== void 0 && data.every(({ data: data2 }) => data2.length === 0);
-  const shouldHideComponent = noCustomersExist || isReadOnly && selectedCustomer === null;
-  if (shouldHideComponent) {
-    return null;
-  }
+  const inputId = useId6();
   const isLoadingWithoutFallback = isLoading && !data;
   const shouldDisableComboBox = isLoadingWithoutFallback || isError;
-  return /* @__PURE__ */ jsxs212(VStack, { className: combinedClassName, children: [
-    /* @__PURE__ */ jsx336(Label, { htmlFor: inputId, size: "sm", children: "Customer" }),
-    /* @__PURE__ */ jsx336(
+  return /* @__PURE__ */ jsxs214(VStack, { className: combinedClassName, children: [
+    /* @__PURE__ */ jsx339(Label, { htmlFor: inputId, size: "sm", children: "Customer" }),
+    /* @__PURE__ */ jsx339(
       ComboBox,
       {
         selectedValue: selectedCustomerForComboBox,
         onSelectedValueChange: handleSelectionChange,
-        options,
+        options: options2,
         onInputValueChange: handleInputChange,
         inputId,
         placeholder,
         slots: { EmptyMessage, ErrorMessage },
-        isDisabled: isReadOnly || shouldDisableComboBox,
+        isDisabled: shouldDisableComboBox,
         isError,
-        isLoading: isLoadingWithoutFallback
+        isLoading: isLoadingWithoutFallback,
+        isReadOnly
       }
     )
   ] });
 }
 
 // src/components/Invoices/InvoiceForm/InvoiceForm.tsx
-import { jsx as jsx337, jsxs as jsxs213 } from "react/jsx-runtime";
+import { AlertTriangle } from "lucide-react";
+import { jsx as jsx340, jsxs as jsxs215 } from "react/jsx-runtime";
 var INVOICE_FORM_CSS_PREFIX = "Layer__InvoiceForm";
 var INVOICE_FORM_FIELD_CSS_PREFIX = `${INVOICE_FORM_CSS_PREFIX}__Field`;
-var InvoiceForm = (props) => {
-  const { onSuccess, mode } = props;
-  const { form } = useInvoiceForm(
+var getDueAtChanged = (dueAt, previousDueAt) => dueAt === null && previousDueAt !== null || dueAt !== null && previousDueAt === null || dueAt !== null && previousDueAt !== null && dueAt.compare(previousDueAt) !== 0;
+var InvoiceFormTotalRow = ({ label, value, children }) => {
+  const className = classNames92(
+    `${INVOICE_FORM_CSS_PREFIX}__TotalRow`,
+    children && `${INVOICE_FORM_CSS_PREFIX}__TotalRow--withField`
+  );
+  return /* @__PURE__ */ jsxs215(HStack, { className, align: "center", gap: "md", children: [
+    /* @__PURE__ */ jsx340(Span, { children: label }),
+    children,
+    /* @__PURE__ */ jsx340(Span, { align: "right", children: convertCentsToCurrency(convertBigDecimalToCents(value)) })
+  ] });
+};
+var InvoiceForm = forwardRef25((props, ref) => {
+  const { onSuccess, onChangeFormState, isReadOnly, mode } = props;
+  const { form, formState, totals } = useInvoiceForm(
     __spreadValues({ onSuccess }, mode === "Update" /* Update */ ? { mode, invoice: props.invoice } : { mode })
   );
-  return /* @__PURE__ */ jsxs213(Form, { className: INVOICE_FORM_CSS_PREFIX, children: [
-    /* @__PURE__ */ jsxs213(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__Metadata`, gap: "xs", children: [
-      /* @__PURE__ */ jsx337(
-        form.Field,
-        {
-          name: "customer",
-          listeners: {
-            onChange: ({ value: customer }) => {
-              form.setFieldValue("email", customer == null ? void 0 : customer.email);
-              form.setFieldValue("address", customer == null ? void 0 : customer.addressString);
-            }
-          },
-          children: (field) => /* @__PURE__ */ jsx337(
-            CustomerSelector,
-            {
-              className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Customer`,
-              selectedCustomer: field.state.value,
-              onSelectedCustomerChange: field.handleChange,
-              inline: true
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx337(form.AppField, { name: "email", children: (field) => /* @__PURE__ */ jsx337(field.FormTextField, { slotProps: { BaseFormTextField: { label: "Email", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Email` } } }) }),
-      /* @__PURE__ */ jsx337(form.AppField, { name: "address", children: (field) => /* @__PURE__ */ jsx337(field.FormTextAreaField, { slotProps: { BaseFormTextField: { label: "Billing address", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Address` } } }) })
-    ] }),
-    /* @__PURE__ */ jsx337(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__LineItems`, gap: "xs", children: /* @__PURE__ */ jsx337(form.AppField, { name: "lineItems", mode: "array", children: (field) => /* @__PURE__ */ jsxs213(VStack, { gap: "xs", align: "baseline", children: [
-      field.state.value.map((_, index) => /* @__PURE__ */ jsxs213(HStack, { gap: "xs", align: "end", className: `${INVOICE_FORM_CSS_PREFIX}__LineItem`, children: [
-        /* @__PURE__ */ jsx337(form.AppField, { name: `lineItems[${index}].product`, children: (innerField) => /* @__PURE__ */ jsx337(innerField.FormTextField, { slotProps: { BaseFormTextField: { label: "Product", showLabel: index === 0 } } }) }),
-        /* @__PURE__ */ jsx337(form.AppField, { name: `lineItems[${index}].description`, children: (innerField) => /* @__PURE__ */ jsx337(innerField.FormTextField, { slotProps: { BaseFormTextField: { label: "Description", showLabel: index === 0 } } }) }),
-        /* @__PURE__ */ jsx337(
-          form.AppField,
+  const { subtotal, additionalDiscount, taxableSubtotal, taxes, grandTotal } = totals;
+  const lastDueAtRef = useRef31(null);
+  const updateDueAtFromTermsAndSentAt = useCallback56((terms, sentAt) => {
+    if (sentAt == null) return;
+    const duration = getDurationInDaysFromTerms(terms);
+    if (!duration) return;
+    const newDueAt = sentAt.add({ days: duration });
+    const dueAtChanged = getDueAtChanged(lastDueAtRef.current, newDueAt);
+    if (dueAtChanged) {
+      form.setFieldValue("dueAt", newDueAt);
+      lastDueAtRef.current = newDueAt;
+    }
+  }, [form]);
+  const blockNativeOnSubmit = useCallback56((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  useImperativeHandle4(ref, () => ({
+    submit: () => form.handleSubmit()
+  }));
+  useEffect43(() => {
+    onChangeFormState == null ? void 0 : onChangeFormState(formState);
+  }, [formState, onChangeFormState]);
+  return /* @__PURE__ */ jsxs215(Form, { className: INVOICE_FORM_CSS_PREFIX, onSubmit: blockNativeOnSubmit, children: [
+    /* @__PURE__ */ jsx340(form.Subscribe, { selector: (state) => state.errorMap, children: (errorMap) => {
+      const validationErrors = flattenValidationErrors(errorMap);
+      if (validationErrors.length > 0) {
+        return /* @__PURE__ */ jsx340(HStack, { className: "Layer__InvoiceForm__FormError", children: /* @__PURE__ */ jsx340(
+          DataState,
           {
-            name: `lineItems[${index}].quantity`,
+            className: "Layer__InvoiceForm__FormError__DataState",
+            icon: /* @__PURE__ */ jsx340(AlertTriangle, { size: 16 }),
+            status: "failed" /* failed */,
+            title: validationErrors[0],
+            titleSize: "md" /* md */,
+            inline: true
+          }
+        ) });
+      }
+    } }),
+    /* @__PURE__ */ jsxs215(HStack, { gap: "xl", className: `${INVOICE_FORM_CSS_PREFIX}__Terms`, children: [
+      /* @__PURE__ */ jsxs215(VStack, { gap: "xs", children: [
+        /* @__PURE__ */ jsx340(
+          form.Field,
+          {
+            name: "customer",
             listeners: {
-              onBlur: ({ value: quantity }) => {
-                const unitPrice = form.getFieldValue(`lineItems[${index}].unitPrice`);
-                const nextAmount = BD5.multiply(convertCentsToBigDecimal(unitPrice), quantity);
-                form.setFieldValue(`lineItems[${index}].amount`, convertBigDecimalToCents(nextAmount));
+              onChange: ({ value: customer }) => {
+                form.setFieldValue("email", (customer == null ? void 0 : customer.email) || "");
+                form.setFieldValue("address", (customer == null ? void 0 : customer.addressString) || "");
               }
             },
-            children: (innerField) => /* @__PURE__ */ jsx337(innerField.FormBigDecimalField, { slotProps: { BaseFormTextField: { label: "Quantity", showLabel: index === 0 } } })
+            children: (field) => /* @__PURE__ */ jsx340(
+              CustomerSelector,
+              {
+                className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Customer`,
+                selectedCustomer: field.state.value,
+                onSelectedCustomerChange: field.handleChange,
+                isReadOnly,
+                inline: true
+              }
+            )
           }
         ),
-        /* @__PURE__ */ jsx337(
+        /* @__PURE__ */ jsx340(form.AppField, { name: "email", children: (field) => /* @__PURE__ */ jsx340(field.FormTextField, { label: "Email", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Email`, isReadOnly: true }) }),
+        /* @__PURE__ */ jsx340(form.AppField, { name: "address", children: (field) => /* @__PURE__ */ jsx340(field.FormTextAreaField, { label: "Billing address", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Address`, isReadOnly: true }) })
+      ] }),
+      /* @__PURE__ */ jsxs215(VStack, { gap: "xs", children: [
+        /* @__PURE__ */ jsx340(form.AppField, { name: "invoiceNumber", children: (field) => /* @__PURE__ */ jsx340(field.FormTextField, { label: "Invoice number", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__InvoiceNo`, isReadOnly }) }),
+        /* @__PURE__ */ jsx340(
+          form.Field,
+          {
+            name: "terms",
+            listeners: {
+              onChange: ({ value: terms }) => {
+                const sentAt = form.getFieldValue("sentAt");
+                updateDueAtFromTermsAndSentAt(terms, sentAt);
+              }
+            },
+            children: (field) => /* @__PURE__ */ jsx340(
+              InvoiceTermsComboBox,
+              {
+                value: field.state.value,
+                onValueChange: (value) => {
+                  if (value !== null) {
+                    field.handleChange(value);
+                  }
+                },
+                isReadOnly
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx340(
           form.AppField,
           {
-            name: `lineItems[${index}].unitPrice`,
+            name: "sentAt",
             listeners: {
-              onBlur: ({ value: unitPrice }) => {
-                const quantity = form.getFieldValue(`lineItems[${index}].quantity`);
-                const nextAmount = BD5.multiply(convertCentsToBigDecimal(unitPrice), quantity);
-                form.setFieldValue(`lineItems[${index}].amount`, convertBigDecimalToCents(nextAmount));
+              onBlur: ({ value: sentAt }) => {
+                const terms = form.getFieldValue("terms");
+                updateDueAtFromTermsAndSentAt(terms, sentAt);
               }
             },
-            children: (innerField) => /* @__PURE__ */ jsx337(innerField.FormCurrencyField, { slotProps: { BaseFormTextField: { label: "Rate", showLabel: index === 0 } } })
+            children: (field) => /* @__PURE__ */ jsx340(field.FormDateField, { label: "Invoice date", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__SentAt`, isReadOnly })
           }
         ),
-        /* @__PURE__ */ jsx337(
+        /* @__PURE__ */ jsx340(
           form.AppField,
           {
-            name: `lineItems[${index}].amount`,
+            name: "dueAt",
             listeners: {
-              onBlur: ({ value: amount }) => {
-                const quantity = form.getFieldValue(`lineItems[${index}].quantity`);
-                let nextUnitPrice = BIG_DECIMAL_ZERO;
-                try {
-                  nextUnitPrice = BD5.unsafeDivide(convertCentsToBigDecimal(amount), quantity);
-                } catch (e) {
+              onBlur: ({ value: dueAt }) => {
+                const terms = form.getFieldValue("terms");
+                const previousDueAt = lastDueAtRef.current;
+                const dueAtChanged = getDueAtChanged(dueAt, previousDueAt);
+                if (terms !== "Custom" /* Custom */ && dueAtChanged) {
+                  form.setFieldValue("terms", "Custom" /* Custom */);
+                  lastDueAtRef.current = dueAt;
                 }
-                form.setFieldValue(`lineItems[${index}].unitPrice`, convertBigDecimalToCents(nextUnitPrice));
               }
             },
-            children: (innerField) => /* @__PURE__ */ jsx337(innerField.FormCurrencyField, { slotProps: { BaseFormTextField: { label: "Amount", showLabel: index === 0 } } })
+            children: (field) => /* @__PURE__ */ jsx340(field.FormDateField, { label: "Due date", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__DueAt`, isReadOnly })
           }
-        ),
-        /* @__PURE__ */ jsx337(Button2, { variant: "outlined", icon: true, "aria-label": "Delete line item", onClick: () => field.removeValue(index), children: /* @__PURE__ */ jsx337(Trash2, { size: 16 }) })
-      ] }, `lineItems[${index}]`)),
-      /* @__PURE__ */ jsxs213(Button2, { variant: "outlined", onClick: () => field.pushValue(EMPTY_LINE_ITEM), children: [
-        "Add line item",
-        /* @__PURE__ */ jsx337(Plus2, { size: 16 })
+        )
       ] })
-    ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs215(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__LineItems`, gap: "md", children: [
+      /* @__PURE__ */ jsx340(form.Field, { name: "lineItems", mode: "array", children: (field) => /* @__PURE__ */ jsxs215(VStack, { gap: "xs", align: "baseline", children: [
+        field.state.value.map((_value, index) => (
+          /**
+           * A more correct implementation would use a UUID as the key for this HStack. Specifically, it is an antipattern in
+           * React to use array indices as keys. However, there are some ongoing issues with @tanstack/react-form related to
+           * deleting an element from an array field. In particular, the form values for the remaining array items may become
+           * momentarily undefined as they re-render due to re-indexing. Thus, we use indices here for now.
+           * See here for more information: https://github.com/TanStack/form/issues/1518.
+           */
+          /* @__PURE__ */ jsxs215(
+            HStack,
+            {
+              gap: "xs",
+              align: "end",
+              className: classNames92(`${INVOICE_FORM_CSS_PREFIX}__LineItem`, isReadOnly && `${INVOICE_FORM_CSS_PREFIX}__LineItem--readonly`),
+              children: [
+                /* @__PURE__ */ jsx340(form.AppField, { name: `lineItems[${index}].product`, children: (innerField) => /* @__PURE__ */ jsx340(innerField.FormTextField, { label: "Product/Service", showLabel: index === 0, isReadOnly }) }),
+                /* @__PURE__ */ jsx340(form.AppField, { name: `lineItems[${index}].description`, children: (innerField) => /* @__PURE__ */ jsx340(innerField.FormTextField, { label: "Description", showLabel: index === 0, isReadOnly }) }),
+                /* @__PURE__ */ jsx340(
+                  form.AppField,
+                  {
+                    name: `lineItems[${index}].quantity`,
+                    listeners: {
+                      onBlur: ({ value: quantity }) => {
+                        const amount = form.getFieldValue(`lineItems[${index}].amount`);
+                        const unitPrice = form.getFieldValue(`lineItems[${index}].unitPrice`);
+                        const nextAmount = BD5.multiply(unitPrice, quantity);
+                        if (!BD5.equals(amount, nextAmount)) {
+                          form.setFieldValue(`lineItems[${index}].amount`, withForceUpdate(nextAmount));
+                        }
+                      }
+                    },
+                    children: (innerField) => /* @__PURE__ */ jsx340(innerField.FormBigDecimalField, { label: "Quantity", showLabel: index === 0, isReadOnly })
+                  }
+                ),
+                /* @__PURE__ */ jsx340(
+                  form.AppField,
+                  {
+                    name: `lineItems[${index}].unitPrice`,
+                    listeners: {
+                      onBlur: ({ value: unitPrice }) => {
+                        const amount = form.getFieldValue(`lineItems[${index}].amount`);
+                        const quantity = form.getFieldValue(`lineItems[${index}].quantity`);
+                        const nextAmount = BD5.multiply(unitPrice, quantity);
+                        if (!BD5.equals(amount, nextAmount)) {
+                          form.setFieldValue(`lineItems[${index}].amount`, withForceUpdate(nextAmount));
+                        }
+                      }
+                    },
+                    children: (innerField) => /* @__PURE__ */ jsx340(innerField.FormBigDecimalField, { label: "Rate", mode: "currency", showLabel: index === 0, allowNegative: true, isReadOnly })
+                  }
+                ),
+                /* @__PURE__ */ jsx340(
+                  form.AppField,
+                  {
+                    name: `lineItems[${index}].amount`,
+                    listeners: {
+                      onBlur: ({ value: amount }) => {
+                        const unitPrice = form.getFieldValue(`lineItems[${index}].unitPrice`);
+                        const quantity = form.getFieldValue(`lineItems[${index}].quantity`);
+                        const nextUnitPrice = safeDivide(amount, quantity);
+                        if (!BD5.equals(unitPrice, nextUnitPrice)) {
+                          form.setFieldValue(`lineItems[${index}].unitPrice`, withForceUpdate(nextUnitPrice));
+                        }
+                      }
+                    },
+                    children: (innerField) => /* @__PURE__ */ jsx340(innerField.FormBigDecimalField, { label: "Amount", mode: "currency", showLabel: index === 0, allowNegative: true, isReadOnly })
+                  }
+                ),
+                /* @__PURE__ */ jsx340(form.AppField, { name: `lineItems[${index}].isTaxable`, children: (innerField) => /* @__PURE__ */ jsx340(innerField.FormCheckboxField, { label: "Tax", showLabel: index === 0, isReadOnly }) }),
+                !isReadOnly && /* @__PURE__ */ jsx340(Button2, { variant: "outlined", icon: true, "aria-label": "Delete line item", onClick: () => field.removeValue(index), children: /* @__PURE__ */ jsx340(Trash2, { size: 16 }) })
+              ]
+            },
+            index
+          )
+        )),
+        !isReadOnly && /* @__PURE__ */ jsxs215(Button2, { variant: "outlined", onClick: () => field.pushValue(getEmptyLineItem()), children: [
+          "Add line item",
+          /* @__PURE__ */ jsx340(Plus2, { size: 16 })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx340(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__Metadata`, pbs: "md", children: /* @__PURE__ */ jsxs215(HStack, { justify: "space-between", gap: "xl", children: [
+        /* @__PURE__ */ jsx340(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__AdditionalTextFields`, children: /* @__PURE__ */ jsx340(form.AppField, { name: "memo", children: (field) => /* @__PURE__ */ jsx340(field.FormTextAreaField, { label: "Memo", isReadOnly }) }) }),
+        /* @__PURE__ */ jsxs215(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__TotalFields`, fluid: true, children: [
+          /* @__PURE__ */ jsx340(InvoiceFormTotalRow, { label: "Subtotal", value: subtotal }),
+          /* @__PURE__ */ jsx340(InvoiceFormTotalRow, { label: "Discount", value: negate(additionalDiscount), children: /* @__PURE__ */ jsx340(form.AppField, { name: "discountRate", children: (field) => /* @__PURE__ */ jsx340(field.FormBigDecimalField, { label: "Discount", showLabel: false, mode: "percent", isReadOnly }) }) }),
+          /* @__PURE__ */ jsx340(InvoiceFormTotalRow, { label: "Taxable subtotal", value: taxableSubtotal }),
+          /* @__PURE__ */ jsx340(InvoiceFormTotalRow, { label: "Tax rate", value: taxes, children: /* @__PURE__ */ jsx340(form.AppField, { name: "taxRate", children: (field) => /* @__PURE__ */ jsx340(field.FormBigDecimalField, { label: "Tax Rate", showLabel: false, mode: "percent", isReadOnly }) }) }),
+          /* @__PURE__ */ jsx340(InvoiceFormTotalRow, { label: "Total", value: grandTotal })
+        ] })
+      ] }) })
+    ] })
   ] });
-};
+});
+InvoiceForm.displayName = "InvoiceForm";
 
 // src/components/DataPoint/DataPoint.tsx
-import { jsx as jsx338, jsxs as jsxs214 } from "react/jsx-runtime";
+import { jsx as jsx341, jsxs as jsxs216 } from "react/jsx-runtime";
 var DataPoint = ({ label, children }) => {
-  return /* @__PURE__ */ jsxs214(VStack, { gap: "3xs", children: [
-    /* @__PURE__ */ jsx338(Span, { variant: "subtle", size: "xs", children: label }),
+  return /* @__PURE__ */ jsxs216(VStack, { gap: "3xs", children: [
+    /* @__PURE__ */ jsx341(Span, { variant: "subtle", size: "xs", children: label }),
     children
   ] });
 };
 
 // src/components/Invoices/InvoiceStatusCell/InvoiceStatusCell.tsx
 import pluralize6 from "pluralize";
-import { jsx as jsx339, jsxs as jsxs215 } from "react/jsx-runtime";
+import { jsx as jsx342, jsxs as jsxs217 } from "react/jsx-runtime";
 var getDueStatusConfig = (invoice, { inline }) => {
   const badgeSize = inline ? "xs" /* EXTRA_SMALL */ : "small" /* SMALL */;
   const iconSize = inline ? 10 : 12;
@@ -38198,7 +38946,7 @@ var getDueStatusConfig = (invoice, { inline }) => {
     case "PAID" /* Paid */: {
       return {
         text: "Paid",
-        badge: /* @__PURE__ */ jsx339(Badge, { variant: "success" /* SUCCESS */, size: badgeSize, icon: /* @__PURE__ */ jsx339(CheckCircle_default, { size: iconSize }), iconOnly: true })
+        badge: /* @__PURE__ */ jsx342(Badge, { variant: "success" /* SUCCESS */, size: badgeSize, icon: /* @__PURE__ */ jsx342(CheckCircle_default, { size: iconSize }), iconOnly: true })
       };
     }
     case "VOIDED" /* Voided */: {
@@ -38221,7 +38969,7 @@ var getDueStatusConfig = (invoice, { inline }) => {
         return {
           text: "Overdue",
           subText: `Due ${pluralize6("day", Math.abs(dueDifference), true)} ago`,
-          badge: /* @__PURE__ */ jsx339(Badge, { variant: "warning" /* WARNING */, size: badgeSize, icon: /* @__PURE__ */ jsx339(AlertCircle_default, { size: iconSize }), iconOnly: true })
+          badge: /* @__PURE__ */ jsx342(Badge, { variant: "warning" /* WARNING */, size: badgeSize, icon: /* @__PURE__ */ jsx342(AlertCircle_default, { size: iconSize }), iconOnly: true })
         };
       }
       return {
@@ -38241,73 +38989,117 @@ var InvoiceStatusCell = ({ invoice, inline = false }) => {
   const dueStatus = getDueStatusConfig(invoice, { inline });
   const Stack3 = inline ? HStack : VStack;
   const subText = inline && dueStatus.subText ? `(${dueStatus.subText})` : dueStatus.subText;
-  return /* @__PURE__ */ jsxs215(HStack, { gap: "xs", align: "center", children: [
+  return /* @__PURE__ */ jsxs217(HStack, { gap: "xs", align: "center", children: [
     dueStatus.badge,
-    /* @__PURE__ */ jsxs215(Stack3, __spreadProps(__spreadValues({}, inline && { gap: "3xs", align: "center" }), { children: [
-      /* @__PURE__ */ jsx339(Span, { children: dueStatus.text }),
-      subText && /* @__PURE__ */ jsx339(Span, { variant: "subtle", size: "sm", children: subText })
+    /* @__PURE__ */ jsxs217(Stack3, __spreadProps(__spreadValues({}, inline && { gap: "3xs", align: "center" }), { children: [
+      /* @__PURE__ */ jsx342(Span, { children: dueStatus.text }),
+      subText && /* @__PURE__ */ jsx342(Span, { variant: "subtle", size: "sm", children: subText })
     ] }))
   ] });
 };
 
 // src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
-import { jsx as jsx340, jsxs as jsxs216 } from "react/jsx-runtime";
+import { SquarePen } from "lucide-react";
+import { jsx as jsx343, jsxs as jsxs218 } from "react/jsx-runtime";
 var InvoiceDetail = (props) => {
-  const _a = props, { onSuccess: _onSuccess, onGoBack } = _a, restProps = __objRest(_a, ["onSuccess", "onGoBack"]);
-  const Header6 = useCallback54(() => {
-    return /* @__PURE__ */ jsx340(InvoiceDetailHeader, __spreadValues({}, restProps));
-  }, [restProps]);
-  return /* @__PURE__ */ jsxs216(BaseDetailView, { slots: { Header: Header6 }, name: "Invoice Detail View", onGoBack, children: [
-    restProps.mode === "Update" /* Update */ && /* @__PURE__ */ jsx340(InvoiceDetailSubHeader, { invoice: restProps.invoice }),
-    /* @__PURE__ */ jsx340(InvoiceForm, __spreadValues({}, props))
+  const _a = props, { onSuccess, onGoBack } = _a, restProps = __objRest(_a, ["onSuccess", "onGoBack"]);
+  const [isReadOnly, setIsReadOnly] = useState85(props.mode === "Update" /* Update */);
+  const formRef = useRef32(null);
+  const onSubmit = useCallback57(() => {
+    var _a2;
+    return (_a2 = formRef.current) == null ? void 0 : _a2.submit();
+  }, []);
+  const [formState, setFormState] = useState85({
+    isFormValid: true,
+    isSubmitting: false,
+    submitError: void 0
+  });
+  const onChangeFormState = useCallback57((nextState) => {
+    setFormState(nextState);
+  }, []);
+  const Header6 = useCallback57(() => {
+    return /* @__PURE__ */ jsx343(
+      InvoiceDetailHeader,
+      __spreadValues({
+        onSubmit,
+        isReadOnly,
+        formState,
+        setIsReadOnly
+      }, restProps)
+    );
+  }, [onSubmit, isReadOnly, formState, restProps]);
+  return /* @__PURE__ */ jsxs218(BaseDetailView, { slots: { Header: Header6 }, name: "Invoice Detail View", onGoBack, children: [
+    restProps.mode === "Update" /* Update */ && /* @__PURE__ */ jsx343(InvoiceDetailSubHeader, { invoice: restProps.invoice }),
+    /* @__PURE__ */ jsx343(
+      InvoiceForm,
+      __spreadProps(__spreadValues({
+        isReadOnly,
+        onSuccess,
+        onChangeFormState
+      }, restProps), {
+        ref: formRef
+      })
+    )
   ] });
 };
 var InvoiceDetailHeader = (props) => {
-  const { mode } = props;
+  const { mode, onSubmit, formState, isReadOnly, setIsReadOnly } = props;
+  const { isSubmitting } = formState;
   if (mode === "Create" /* Create */) {
-    return /* @__PURE__ */ jsx340(Heading2, { children: "Create Invoice" });
+    return /* @__PURE__ */ jsxs218(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", children: [
+      /* @__PURE__ */ jsx343(Heading2, { children: "Create Invoice" }),
+      /* @__PURE__ */ jsx343(Button2, { isPending: isSubmitting, onPress: onSubmit, children: "Review & Send" })
+    ] });
   }
   const invoice = props.invoice;
   const { invoiceNumber } = invoice;
-  return /* @__PURE__ */ jsx340(Heading2, { children: invoiceNumber ? `Invoice ${invoiceNumber}` : "View Invoice" });
+  return /* @__PURE__ */ jsxs218(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", children: [
+    /* @__PURE__ */ jsx343(Heading2, { children: invoiceNumber ? `Invoice ${invoiceNumber}` : "View Invoice" }),
+    isReadOnly ? /* @__PURE__ */ jsxs218(Button2, { onPress: () => {
+      setIsReadOnly(false);
+    }, children: [
+      "Edit Invoice",
+      /* @__PURE__ */ jsx343(SquarePen, { size: 14 })
+    ] }) : /* @__PURE__ */ jsx343(Button2, { isPending: isSubmitting, onPress: onSubmit, children: "Review & Resend" })
+  ] });
 };
 var InvoiceDetailSubHeader = ({ invoice }) => {
   const { outstandingBalance, totalAmount } = invoice;
-  return /* @__PURE__ */ jsx340(HStack, { className: "Layer__InvoiceDetail__SubHeader", children: /* @__PURE__ */ jsxs216(HStack, { gap: "5xl", children: [
-    /* @__PURE__ */ jsx340(DataPoint, { label: "Balance due", children: /* @__PURE__ */ jsx340(Span, { children: convertCentsToCurrency(outstandingBalance) }) }),
-    /* @__PURE__ */ jsx340(DataPoint, { label: "Open balance", children: /* @__PURE__ */ jsx340(Span, { children: convertCentsToCurrency(totalAmount) }) }),
-    /* @__PURE__ */ jsx340(DataPoint, { label: "Status", children: /* @__PURE__ */ jsx340(InvoiceStatusCell, { invoice, inline: true }) })
+  return /* @__PURE__ */ jsx343(HStack, { className: "Layer__InvoiceDetail__SubHeader", children: /* @__PURE__ */ jsxs218(HStack, { gap: "5xl", children: [
+    /* @__PURE__ */ jsx343(DataPoint, { label: "Balance due", children: /* @__PURE__ */ jsx343(Span, { children: convertCentsToCurrency(outstandingBalance) }) }),
+    /* @__PURE__ */ jsx343(DataPoint, { label: "Open balance", children: /* @__PURE__ */ jsx343(Span, { children: convertCentsToCurrency(totalAmount) }) }),
+    /* @__PURE__ */ jsx343(DataPoint, { label: "Status", children: /* @__PURE__ */ jsx343(InvoiceStatusCell, { invoice, inline: true }) })
   ] }) });
 };
 
 // src/components/Invoices/InvoicesTable/InvoicesTable.tsx
-import { useCallback as useCallback57, useMemo as useMemo76, useState as useState86 } from "react";
+import { useCallback as useCallback60, useMemo as useMemo77, useState as useState87 } from "react";
 
 // src/features/invoices/api/useListInvoices.tsx
 import useSWRInfinite7 from "swr/infinite";
-var import_lodash6 = __toESM(require_lodash2());
-import { useCallback as useCallback55, useMemo as useMemo73 } from "react";
-import { Schema as Schema13 } from "effect";
+var import_lodash7 = __toESM(require_lodash2());
+import { useCallback as useCallback58, useMemo as useMemo74 } from "react";
+import { Schema as Schema14 } from "effect";
 
 // src/types/utility/pagination.ts
-import { Schema as Schema12, pipe as pipe6 } from "effect";
-var PaginatedResponseMetaSchema = Schema12.Struct({
-  cursor: Schema12.NullOr(Schema12.String),
+import { Schema as Schema13, pipe as pipe6 } from "effect";
+var PaginatedResponseMetaSchema = Schema13.Struct({
+  cursor: Schema13.NullOr(Schema13.String),
   hasMore: pipe6(
-    Schema12.propertySignature(Schema12.Boolean),
-    Schema12.fromKey("has_more")
+    Schema13.propertySignature(Schema13.Boolean),
+    Schema13.fromKey("has_more")
   ),
   totalCount: pipe6(
-    Schema12.propertySignature(Schema12.UndefinedOr(Schema12.Number)),
-    Schema12.fromKey("total_count")
+    Schema13.propertySignature(Schema13.UndefinedOr(Schema13.Number)),
+    Schema13.fromKey("total_count")
   )
 });
 
 // src/features/invoices/api/useListInvoices.tsx
 var LIST_INVOICES_TAG_KEY = "#list-invoices";
-var ListInvoicesReturnSchema = Schema13.Struct({
-  data: Schema13.Array(InvoiceSchema),
-  meta: Schema13.Struct({
+var ListInvoicesReturnSchema = Schema14.Struct({
+  data: Schema14.Array(InvoiceSchema),
+  meta: Schema14.Struct({
     pagination: PaginatedResponseMetaSchema
   })
 });
@@ -38435,7 +39227,7 @@ function useListInvoices({
           showTotalCount: showTotalCount2
         }
       }
-    )().then(Schema13.decodeUnknownPromise(ListInvoicesReturnSchema)),
+    )().then(Schema14.decodeUnknownPromise(ListInvoicesReturnSchema)),
     {
       keepPreviousData: true,
       revalidateFirstPage: false,
@@ -38454,10 +39246,10 @@ import {
 } from "@tanstack/react-table";
 
 // src/components/DataTable/DataTable.tsx
-import { useMemo as useMemo74 } from "react";
+import { useMemo as useMemo75 } from "react";
 
 // src/components/ui/Table/Table.tsx
-import { forwardRef as forwardRef24 } from "react";
+import { forwardRef as forwardRef26 } from "react";
 import {
   Cell as ReactAriaCell,
   Column as ReactAriaColumn,
@@ -38466,14 +39258,14 @@ import {
   TableBody as ReactAriaTableBody,
   TableHeader as ReactAriaTableHeader
 } from "react-aria-components";
-import classNames90 from "classnames";
-import { jsx as jsx341 } from "react/jsx-runtime";
+import classNames93 from "classnames";
+import { jsx as jsx344 } from "react/jsx-runtime";
 var CSS_PREFIX2 = "Layer__UI__Table";
-var getClassName = (component, additionalClassNames) => classNames90(`${CSS_PREFIX2}-${component}`, additionalClassNames);
-var Table2 = forwardRef24(
+var getClassName = (component, additionalClassNames) => classNames93(`${CSS_PREFIX2}-${component}`, additionalClassNames);
+var Table2 = forwardRef26(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ jsx341(
+    return /* @__PURE__ */ jsx344(
       ReactAriaTable,
       __spreadProps(__spreadValues({
         className: getClassName("Table" /* Table */, className)
@@ -38487,7 +39279,7 @@ var Table2 = forwardRef24(
 Table2.displayName = "Table" /* Table */;
 var TableHeaderInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ jsx341(
+  return /* @__PURE__ */ jsx344(
     ReactAriaTableHeader,
     __spreadProps(__spreadValues({
       className: getClassName("TableHeader" /* TableHeader */, className)
@@ -38497,11 +39289,11 @@ var TableHeaderInner = (_a, ref) => {
     })
   );
 };
-var TableHeader = forwardRef24(TableHeaderInner);
+var TableHeader = forwardRef26(TableHeaderInner);
 TableHeader.displayName = "TableHeader" /* TableHeader */;
 var TableBodyInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ jsx341(
+  return /* @__PURE__ */ jsx344(
     ReactAriaTableBody,
     __spreadProps(__spreadValues({
       className: getClassName("TableBody" /* TableBody */, className)
@@ -38511,11 +39303,11 @@ var TableBodyInner = (_a, ref) => {
     })
   );
 };
-var TableBody2 = forwardRef24(TableBodyInner);
+var TableBody2 = forwardRef26(TableBodyInner);
 TableBody2.displayName = "TableBody" /* TableBody */;
 var RowInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ jsx341(
+  return /* @__PURE__ */ jsx344(
     ReactAriaTableRow,
     __spreadProps(__spreadValues({
       className: getClassName("Row" /* Row */, className)
@@ -38525,13 +39317,13 @@ var RowInner = (_a, ref) => {
     })
   );
 };
-var Row2 = forwardRef24(RowInner);
+var Row2 = forwardRef26(RowInner);
 Row2.displayName = "Row" /* Row */;
-var Column = forwardRef24(
+var Column = forwardRef26(
   (_a, ref) => {
     var _b = _a, { children, className, textAlign = "left" } = _b, restProps = __objRest(_b, ["children", "className", "textAlign"]);
     const dataProperties = toDataProperties({ "text-align": textAlign });
-    return /* @__PURE__ */ jsx341(
+    return /* @__PURE__ */ jsx344(
       ReactAriaColumn,
       __spreadProps(__spreadValues(__spreadValues({
         className: getClassName("Column" /* Column */, className)
@@ -38543,10 +39335,10 @@ var Column = forwardRef24(
   }
 );
 Column.displayName = "Column" /* Column */;
-var Cell5 = forwardRef24(
+var Cell5 = forwardRef26(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ jsx341(
+    return /* @__PURE__ */ jsx344(
       ReactAriaCell,
       __spreadProps(__spreadValues({
         className: getClassName("Cell" /* Cell */, className)
@@ -38560,7 +39352,7 @@ var Cell5 = forwardRef24(
 Cell5.displayName = "Cell" /* Cell */;
 
 // src/components/DataTable/DataTable.tsx
-import { jsx as jsx342, jsxs as jsxs217 } from "react/jsx-runtime";
+import { jsx as jsx345, jsxs as jsxs219 } from "react/jsx-runtime";
 var DataTable = ({
   columnConfig,
   data,
@@ -38573,17 +39365,17 @@ var DataTable = ({
   const columns = Object.values(columnConfig);
   const { EmptyState, ErrorState } = slots;
   const isEmptyTable = (data == null ? void 0 : data.length) === 0;
-  const renderTableBody = useMemo74(() => {
+  const renderTableBody = useMemo75(() => {
     if (isError) {
-      return /* @__PURE__ */ jsx342(Row2, { children: /* @__PURE__ */ jsx342(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx342(ErrorState, {}) }) });
+      return /* @__PURE__ */ jsx345(Row2, { children: /* @__PURE__ */ jsx345(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx345(ErrorState, {}) }) });
     }
     if (isLoading) {
-      return /* @__PURE__ */ jsx342(Row2, { children: /* @__PURE__ */ jsx342(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx342(Loader2, {}) }) });
+      return /* @__PURE__ */ jsx345(Row2, { children: /* @__PURE__ */ jsx345(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx345(Loader2, {}) }) });
     }
     if (isEmptyTable) {
-      return /* @__PURE__ */ jsx342(Row2, { children: /* @__PURE__ */ jsx342(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx342(EmptyState, {}) }) });
+      return /* @__PURE__ */ jsx345(Row2, { children: /* @__PURE__ */ jsx345(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx345(EmptyState, {}) }) });
     }
-    const RowRenderer = (row) => /* @__PURE__ */ jsx342(Row2, { children: columns.map((col) => /* @__PURE__ */ jsx342(
+    const RowRenderer = (row) => /* @__PURE__ */ jsx345(Row2, { children: columns.map((col) => /* @__PURE__ */ jsx345(
       Cell5,
       {
         className: `Layer__UI__Table-Cell__${componentName}--${col.id}`,
@@ -38594,15 +39386,15 @@ var DataTable = ({
     RowRenderer.displayName = "Row";
     return RowRenderer;
   }, [isError, isLoading, isEmptyTable, columns, ErrorState, EmptyState, componentName]);
-  return /* @__PURE__ */ jsxs217(Table2, { "aria-label": ariaLabel, className: `Layer__UI__Table__${componentName}`, children: [
-    /* @__PURE__ */ jsx342(TableHeader, { columns, children: ({ id, header, isRowHeader }) => /* @__PURE__ */ jsx342(Column, { isRowHeader, className: `Layer__UI__Table-Column__${componentName}--${id}`, children: header }, id) }),
-    /* @__PURE__ */ jsx342(TableBody2, { items: data, children: renderTableBody })
+  return /* @__PURE__ */ jsxs219(Table2, { "aria-label": ariaLabel, className: `Layer__UI__Table__${componentName}`, children: [
+    /* @__PURE__ */ jsx345(TableHeader, { columns, children: ({ id, header, isRowHeader }) => /* @__PURE__ */ jsx345(Column, { isRowHeader, className: `Layer__UI__Table-Column__${componentName}--${id}`, children: header }, id) }),
+    /* @__PURE__ */ jsx345(TableBody2, { items: data, children: renderTableBody })
   ] });
 };
 
 // src/components/DataTable/PaginatedTable.tsx
-import { useCallback as useCallback56, useMemo as useMemo75, useState as useState85 } from "react";
-import { jsx as jsx343, jsxs as jsxs218 } from "react/jsx-runtime";
+import { useCallback as useCallback59, useMemo as useMemo76, useState as useState86 } from "react";
+import { jsx as jsx346, jsxs as jsxs220 } from "react/jsx-runtime";
 var EMPTY_ARRAY = [];
 function PaginatedTable({
   data,
@@ -38615,7 +39407,7 @@ function PaginatedTable({
   slots
 }) {
   const { pageSize = 20, hasMore, fetchMore } = paginationProps;
-  const [pagination, setPagination] = useState85({ pageIndex: 0, pageSize });
+  const [pagination, setPagination] = useState86({ pageIndex: 0, pageSize });
   const columnHelper = createColumnHelper();
   const columns = Object.values(columnConfig);
   const columnDefs = columns.map((col) => {
@@ -38635,12 +39427,12 @@ function PaginatedTable({
     autoResetPageIndex: false
   });
   const { rows } = table.getRowModel();
-  const rowData = useMemo75(() => rows.map((r) => r.original), [rows]);
-  const onPageChange = useCallback56((page) => {
+  const rowData = useMemo76(() => rows.map((r) => r.original), [rows]);
+  const onPageChange = useCallback59((page) => {
     table.setPageIndex(page - 1);
   }, [table]);
-  return /* @__PURE__ */ jsxs218(VStack, { children: [
-    /* @__PURE__ */ jsx343(
+  return /* @__PURE__ */ jsxs220(VStack, { children: [
+    /* @__PURE__ */ jsx346(
       DataTable,
       {
         ariaLabel,
@@ -38652,7 +39444,7 @@ function PaginatedTable({
         slots
       }
     ),
-    !isError && !isLoading && /* @__PURE__ */ jsx343(
+    !isError && !isLoading && /* @__PURE__ */ jsx346(
       Pagination,
       {
         currentPage: table.getState().pagination.pageIndex + 1,
@@ -38667,10 +39459,10 @@ function PaginatedTable({
 }
 
 // src/icons/ChevronRightFill.tsx
-import { jsx as jsx344, jsxs as jsxs219 } from "react/jsx-runtime";
+import { jsx as jsx347, jsxs as jsxs221 } from "react/jsx-runtime";
 var ChevronRightFill = (_a) => {
   var _b = _a, { size = 18 } = _b, props = __objRest(_b, ["size"]);
-  return /* @__PURE__ */ jsxs219(
+  return /* @__PURE__ */ jsxs221(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -38680,8 +39472,8 @@ var ChevronRightFill = (_a) => {
       width: size,
       height: size,
       children: [
-        /* @__PURE__ */ jsx344("path", { d: "M6.75 4.5L11.25 9L6.75 13.5", fill: "currentColor" }),
-        /* @__PURE__ */ jsx344(
+        /* @__PURE__ */ jsx347("path", { d: "M6.75 4.5L11.25 9L6.75 13.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsx347(
           "path",
           {
             d: "M6.75 4.5L11.25 9L6.75 13.5Z",
@@ -38700,34 +39492,34 @@ var ChevronRightFill_default = ChevronRightFill;
 import { HandCoins, Search as Search2, Plus as Plus3 } from "lucide-react";
 
 // src/components/DataTable/DataTableHeader.tsx
-import { jsx as jsx345, jsxs as jsxs220 } from "react/jsx-runtime";
+import { jsx as jsx348, jsxs as jsxs222 } from "react/jsx-runtime";
 var DataTableHeader = ({ name, count, slotProps = {}, slots = {} }) => {
   const { showCount, totalCount } = count != null ? count : {};
   const { Filters: Filters2, HeaderActions, HeaderFilters } = slots;
-  return /* @__PURE__ */ jsxs220(VStack, { children: [
-    /* @__PURE__ */ jsxs220(HStack, { justify: "space-between", align: "center", className: "Layer__DataTableHeader__Header", children: [
-      /* @__PURE__ */ jsxs220(HStack, { pis: "md", align: "center", gap: "xl", children: [
-        /* @__PURE__ */ jsxs220(HStack, { align: "center", gap: "sm", children: [
-          /* @__PURE__ */ jsx345(Span, { weight: "bold", size: "lg", children: name }),
-          showCount && (totalCount ? /* @__PURE__ */ jsx345(Badge, { variant: "default" /* DEFAULT */, size: "medium" /* MEDIUM */, children: totalCount }) : /* @__PURE__ */ jsx345(BadgeLoader, {}))
+  return /* @__PURE__ */ jsxs222(VStack, { children: [
+    /* @__PURE__ */ jsxs222(HStack, { justify: "space-between", align: "center", className: "Layer__DataTableHeader__Header", children: [
+      /* @__PURE__ */ jsxs222(HStack, { pis: "md", align: "center", gap: "xl", children: [
+        /* @__PURE__ */ jsxs222(HStack, { align: "center", gap: "sm", children: [
+          /* @__PURE__ */ jsx348(Span, { weight: "bold", size: "lg", children: name }),
+          showCount && (totalCount ? /* @__PURE__ */ jsx348(Badge, { variant: "default" /* DEFAULT */, size: "medium" /* MEDIUM */, children: totalCount }) : /* @__PURE__ */ jsx348(BadgeLoader, {}))
         ] }),
-        HeaderFilters && /* @__PURE__ */ jsx345(HeaderFilters, {})
+        HeaderFilters && /* @__PURE__ */ jsx348(HeaderFilters, {})
       ] }),
-      /* @__PURE__ */ jsxs220(HStack, { pie: "md", align: "center", gap: "3xs", children: [
-        slotProps.SearchField && /* @__PURE__ */ jsx345(SearchField, __spreadValues({}, slotProps.SearchField)),
-        HeaderActions && /* @__PURE__ */ jsx345(HeaderActions, {})
+      /* @__PURE__ */ jsxs222(HStack, { pie: "md", align: "center", gap: "3xs", children: [
+        slotProps.SearchField && /* @__PURE__ */ jsx348(SearchField, __spreadValues({}, slotProps.SearchField)),
+        HeaderActions && /* @__PURE__ */ jsx348(HeaderActions, {})
       ] })
     ] }),
-    Filters2 && /* @__PURE__ */ jsxs220(HStack, { pis: "md", pie: "md", justify: "space-between", align: "center", className: "Layer__DataTableHeader__Filters", children: [
-      /* @__PURE__ */ jsx345(Filters2, {}),
-      slotProps.ClearFiltersButton && /* @__PURE__ */ jsx345(Button2, __spreadProps(__spreadValues({ variant: "outlined" }, slotProps.ClearFiltersButton), { children: "Clear All Filters" }))
+    Filters2 && /* @__PURE__ */ jsxs222(HStack, { pis: "md", pie: "md", justify: "space-between", align: "center", className: "Layer__DataTableHeader__Filters", children: [
+      /* @__PURE__ */ jsx348(Filters2, {}),
+      slotProps.ClearFiltersButton && /* @__PURE__ */ jsx348(Button2, __spreadProps(__spreadValues({ variant: "outlined" }, slotProps.ClearFiltersButton), { children: "Clear All Filters" }))
     ] })
   ] });
 };
 
 // src/components/Invoices/InvoicesTable/InvoicesTable.tsx
-import { startOfToday, endOfYesterday } from "date-fns";
-import { jsx as jsx346, jsxs as jsxs221 } from "react/jsx-runtime";
+import { startOfToday as startOfToday2, endOfYesterday } from "date-fns";
+import { jsx as jsx349, jsxs as jsxs223 } from "react/jsx-runtime";
 var COMPONENT_NAME10 = "InvoicesTable";
 var InvoiceStatusOptionConfig = {
   ["All" /* All */]: { label: "All", value: "All" /* All */ },
@@ -38748,12 +39540,12 @@ var AmountCell = ({ invoice }) => {
     case "WRITTEN_OFF" /* WrittenOff */:
     case "VOIDED" /* Voided */:
     case "SENT" /* Sent */: {
-      return /* @__PURE__ */ jsx346(VStack, { children: /* @__PURE__ */ jsx346(Span, { align: "right", children: totalAmount }) });
+      return /* @__PURE__ */ jsx349(VStack, { children: /* @__PURE__ */ jsx349(Span, { align: "right", children: totalAmount }) });
     }
     case "PARTIALLY_PAID" /* PartiallyPaid */: {
-      return /* @__PURE__ */ jsxs221(VStack, { children: [
-        /* @__PURE__ */ jsx346(Span, { align: "right", children: totalAmount }),
-        /* @__PURE__ */ jsxs221(Span, { align: "right", variant: "subtle", size: "sm", children: [
+      return /* @__PURE__ */ jsxs223(VStack, { children: [
+        /* @__PURE__ */ jsx349(Span, { align: "right", children: totalAmount }),
+        /* @__PURE__ */ jsxs223(Span, { align: "right", variant: "subtle", size: "sm", children: [
           outstandingBalance,
           " ",
           "outstanding"
@@ -38770,7 +39562,7 @@ var AmountCell = ({ invoice }) => {
 };
 var getCustomerName2 = (invoice) => {
   const { recipientName, customer } = invoice;
-  return recipientName || (customer == null ? void 0 : customer.individualName) || (customer == null ? void 0 : customer.companyName);
+  return (customer == null ? void 0 : customer.individualName) || (customer == null ? void 0 : customer.companyName) || recipientName;
 };
 var getColumnConfig = (onSelectInvoice) => ({
   ["SentAt" /* SentAt */]: {
@@ -38792,16 +39584,16 @@ var getColumnConfig = (onSelectInvoice) => ({
   ["Total" /* Total */]: {
     id: "Total" /* Total */,
     header: "Amount",
-    cell: (row) => /* @__PURE__ */ jsx346(AmountCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ jsx349(AmountCell, { invoice: row })
   },
   ["Status" /* Status */]: {
     id: "Status" /* Status */,
     header: "Status",
-    cell: (row) => /* @__PURE__ */ jsx346(InvoiceStatusCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ jsx349(InvoiceStatusCell, { invoice: row })
   },
   ["Expand" /* Expand */]: {
     id: "Expand" /* Expand */,
-    cell: (row) => /* @__PURE__ */ jsx346(Button2, { inset: true, icon: true, onPress: () => onSelectInvoice(row), "aria-label": "View invoice", variant: "ghost", children: /* @__PURE__ */ jsx346(ChevronRightFill_default, {}) })
+    cell: (row) => /* @__PURE__ */ jsx349(Button2, { inset: true, icon: true, onPress: () => onSelectInvoice(row), "aria-label": "View invoice", variant: "ghost", children: /* @__PURE__ */ jsx349(ChevronRightFill_default, {}) })
   }
 });
 var UNPAID_STATUSES2 = ["SENT" /* Sent */, "PARTIALLY_PAID" /* PartiallyPaid */];
@@ -38815,7 +39607,7 @@ var getListInvoiceParams = ({ statusFilter }) => {
     case "Overdue" /* Overdue */:
       return { status: UNPAID_STATUSES2, dueAtEnd: endOfYesterday() };
     case "Sent" /* Sent */:
-      return { status: UNPAID_STATUSES2, dueAtStart: startOfToday() };
+      return { status: UNPAID_STATUSES2, dueAtStart: startOfToday2() };
     case "Paid" /* Paid */:
       return { status: ["PAID" /* Paid */, "PARTIALLY_WRITTEN_OFF" /* PartiallyWrittenOff */] };
     case "Written Off" /* WrittenOff */:
@@ -38830,8 +39622,8 @@ var getListInvoiceParams = ({ statusFilter }) => {
   }
 };
 var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
-  const [selectedInvoiceStatusOption, setSelectedInvoiceStatusOption] = useState86(ALL_OPTION);
-  const listInvoiceParams = useMemo76(
+  const [selectedInvoiceStatusOption, setSelectedInvoiceStatusOption] = useState87(ALL_OPTION);
+  const listInvoiceParams = useMemo77(
     () => getListInvoiceParams({ statusFilter: selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.value }),
     [selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.value]
   );
@@ -38839,29 +39631,29 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
   const invoices = data == null ? void 0 : data.flatMap(({ data: data2 }) => data2);
   const paginationMeta = data == null ? void 0 : data[data.length - 1].meta.pagination;
   const hasMore = paginationMeta == null ? void 0 : paginationMeta.hasMore;
-  const fetchMore = useCallback57(() => {
+  const fetchMore = useCallback60(() => {
     if (hasMore) {
       void setSize(size + 1);
     }
   }, [hasMore, setSize, size]);
-  const paginationProps = useMemo76(() => {
+  const paginationProps = useMemo77(() => {
     return {
       pageSize: 10,
       hasMore,
       fetchMore
     };
   }, [fetchMore, hasMore]);
-  const options = useMemo76(() => Object.values(InvoiceStatusOptionConfig), []);
-  const SelectedValue = useMemo76(() => {
+  const options2 = useMemo77(() => Object.values(InvoiceStatusOptionConfig), []);
+  const SelectedValue = useMemo77(() => {
     const label = selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.label;
     return label ? `Status: ${label}` : "Status";
   }, [selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.label]);
-  const StatusFilter = useCallback57(
-    () => /* @__PURE__ */ jsx346(
+  const StatusFilter = useCallback60(
+    () => /* @__PURE__ */ jsx349(
       ComboBox,
       {
         className: "Layer__InvoicesTable__StatusFilter",
-        options,
+        options: options2,
         onSelectedValueChange: (option) => setSelectedInvoiceStatusOption(option),
         selectedValue: selectedInvoiceStatusOption,
         isSearchable: false,
@@ -38871,29 +39663,29 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
         "aria-label": "Status Filter"
       }
     ),
-    [SelectedValue, options, selectedInvoiceStatusOption]
+    [SelectedValue, options2, selectedInvoiceStatusOption]
   );
-  const CreateInvoiceButton = useCallback57(
-    () => /* @__PURE__ */ jsxs221(Button2, { onPress: onCreateInvoice, children: [
+  const CreateInvoiceButton = useCallback60(
+    () => /* @__PURE__ */ jsxs223(Button2, { onPress: onCreateInvoice, children: [
       "Create Invoice",
-      /* @__PURE__ */ jsx346(Plus3, { size: 16 })
+      /* @__PURE__ */ jsx349(Plus3, { size: 16 })
     ] }),
     [onCreateInvoice]
   );
-  const InvoicesTableEmptyState = useCallback57(() => {
+  const InvoicesTableEmptyState = useCallback60(() => {
     const isFiltered = selectedInvoiceStatusOption && selectedInvoiceStatusOption !== ALL_OPTION;
-    return /* @__PURE__ */ jsx346(
+    return /* @__PURE__ */ jsx349(
       DataState,
       {
         status: "allDone" /* allDone */,
         title: isFiltered ? "No results found" : "No invoices yet",
         description: isFiltered ? "We couldn\u2019t find any invoices with the current filters. Try changing or clearing them to see more results." : "Add your first invoice to start tracking what your customers owe you.",
-        icon: isFiltered ? /* @__PURE__ */ jsx346(Search2, {}) : /* @__PURE__ */ jsx346(HandCoins, {}),
+        icon: isFiltered ? /* @__PURE__ */ jsx349(Search2, {}) : /* @__PURE__ */ jsx349(HandCoins, {}),
         spacing: true
       }
     );
   }, [selectedInvoiceStatusOption]);
-  const InvoicesTableErrorState = useCallback57(() => /* @__PURE__ */ jsx346(
+  const InvoicesTableErrorState = useCallback60(() => /* @__PURE__ */ jsx349(
     DataState,
     {
       status: "failed" /* failed */,
@@ -38905,9 +39697,9 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
       spacing: true
     }
   ), [refetch]);
-  const columnConfig = useMemo76(() => getColumnConfig(onSelectInvoice), [onSelectInvoice]);
-  return /* @__PURE__ */ jsxs221(Container, { name: "InvoicesTable", children: [
-    /* @__PURE__ */ jsx346(
+  const columnConfig = useMemo77(() => getColumnConfig(onSelectInvoice), [onSelectInvoice]);
+  return /* @__PURE__ */ jsxs223(Container, { name: "InvoicesTable", children: [
+    /* @__PURE__ */ jsx349(
       DataTableHeader,
       {
         name: "Invoices",
@@ -38917,7 +39709,7 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx346(
+    /* @__PURE__ */ jsx349(
       PaginatedTable,
       {
         ariaLabel: "Invoices",
@@ -38937,38 +39729,38 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
 };
 
 // src/components/Invoices/Invoices.tsx
-import { jsx as jsx347 } from "react/jsx-runtime";
+import { jsx as jsx350 } from "react/jsx-runtime";
 var unstable_Invoices = ({
   showTitle = true,
   stringOverrides
 }) => {
-  const [invoiceFormMode, setInvoiceFormMode] = useState87(null);
-  const goBackToInvoicesTable = useCallback58(() => {
+  const [invoiceFormMode, setInvoiceFormMode] = useState88(null);
+  const goBackToInvoicesTable = useCallback61(() => {
     setInvoiceFormMode(null);
   }, []);
-  const onCreateInvoice = useCallback58(() => {
+  const onCreateInvoice = useCallback61(() => {
     setInvoiceFormMode({ mode: "Create" /* Create */ });
   }, []);
-  const onSelectInvoice = useCallback58((invoice) => {
+  const onSelectInvoice = useCallback61((invoice) => {
     setInvoiceFormMode({ mode: "Update" /* Update */, invoice });
   }, []);
-  return /* @__PURE__ */ jsx347(
+  return /* @__PURE__ */ jsx350(
     View,
     {
       title: (stringOverrides == null ? void 0 : stringOverrides.title) || "Invoices",
       showHeader: showTitle,
-      children: invoiceFormMode !== null ? /* @__PURE__ */ jsx347(InvoiceDetail, __spreadProps(__spreadValues({}, invoiceFormMode), { onGoBack: goBackToInvoicesTable })) : /* @__PURE__ */ jsx347(InvoicesTable, { onCreateInvoice, onSelectInvoice })
+      children: invoiceFormMode !== null ? /* @__PURE__ */ jsx350(InvoiceDetail, __spreadProps(__spreadValues({}, invoiceFormMode), { onGoBack: goBackToInvoicesTable })) : /* @__PURE__ */ jsx350(InvoicesTable, { onCreateInvoice, onSelectInvoice })
     }
   );
 };
 
 // src/providers/BankTransactionsProvider/BankTransactionsProvider.tsx
-import { jsx as jsx348 } from "react/jsx-runtime";
+import { jsx as jsx351 } from "react/jsx-runtime";
 var BankTransactionsProvider = ({
   children
 }) => {
   const bankTransactionsContextData = useAugmentedBankTransactions();
-  return /* @__PURE__ */ jsx348(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
+  return /* @__PURE__ */ jsx351(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
 };
 export {
   AccountingOverview,