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

package/dist/cjs/index.cjs

@@ -5603,7 +5603,7 @@ var import_react12 = require("react");
 var import_react10 = require("react");
 
 // package.json
-var version = "0.1.106-alpha";
+var version = "0.1.106-alpha.1";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -7118,48 +7118,28 @@ var _RANGE_PICKER_MODES = [
 var isDateRangePickerMode = (mode) => {
   return _RANGE_PICKER_MODES.includes(mode);
 };
-function startOfNextDay(date) {
-  return (0, import_date_fns3.startOfDay)((0, import_date_fns3.addDays)(date, 1));
-}
 function clampToPresentOrPast(date, cutoff = (0, import_date_fns3.endOfDay)(/* @__PURE__ */ new Date())) {
   return (0, import_date_fns3.min)([date, cutoff]);
 }
-function withShiftedEnd(fn) {
-  return ({ currentStart, currentEnd, newEnd }) => {
-    const shiftedCurrentEnd = startOfNextDay(currentEnd);
-    const shiftedNewEnd = clampToPresentOrPast(startOfNextDay(newEnd), startOfNextDay(/* @__PURE__ */ new Date()));
-    return fn({ currentStart, shiftedCurrentEnd, shiftedNewEnd });
-  };
-}
 var RANGE_MODE_LOOKUP = {
+  dayPicker: {
+    getStart: ({ start }) => start,
+    getEnd: ({ end }) => clampToPresentOrPast((0, import_date_fns3.endOfDay)(end))
+  },
   dayRangePicker: {
     getStart: ({ start }) => start,
-    getShiftedStart: withShiftedEnd(({ currentStart, shiftedCurrentEnd, shiftedNewEnd }) => {
-      const fullDayCount = (0, import_date_fns3.differenceInDays)(shiftedCurrentEnd, currentStart);
-      return (0, import_date_fns3.subDays)(shiftedNewEnd, fullDayCount);
-    }),
     getEnd: ({ end }) => clampToPresentOrPast((0, import_date_fns3.endOfDay)(end))
   },
   monthPicker: {
     getStart: ({ start }) => (0, import_date_fns3.startOfMonth)(start),
-    getShiftedStart: withShiftedEnd(({ shiftedNewEnd }) => {
-      return (0, import_date_fns3.subMonths)(shiftedNewEnd, 1);
-    }),
     getEnd: ({ end }) => clampToPresentOrPast((0, import_date_fns3.endOfMonth)(end))
   },
   monthRangePicker: {
     getStart: ({ start }) => (0, import_date_fns3.startOfMonth)(start),
-    getShiftedStart: withShiftedEnd(({ currentStart, shiftedCurrentEnd, shiftedNewEnd }) => {
-      const fullMonthCount = (0, import_date_fns3.differenceInMonths)(shiftedCurrentEnd, currentStart);
-      return (0, import_date_fns3.subMonths)(shiftedNewEnd, fullMonthCount);
-    }),
     getEnd: ({ end }) => clampToPresentOrPast((0, import_date_fns3.endOfMonth)(end))
   },
   yearPicker: {
     getStart: ({ start }) => (0, import_date_fns3.startOfYear)(start),
-    getShiftedStart: withShiftedEnd(({ shiftedNewEnd }) => {
-      return (0, import_date_fns3.subYears)(shiftedNewEnd, 1);
-    }),
     getEnd: ({ end }) => clampToPresentOrPast((0, import_date_fns3.endOfYear)(end))
   }
 };
@@ -7175,6 +7155,12 @@ function withCorrectedRange(fn) {
 function buildStore() {
   const now = /* @__PURE__ */ new Date();
   return (0, import_zustand.createStore)((set2) => {
+    const setDate = ({ date }) => {
+      set2({
+        start: RANGE_MODE_LOOKUP.dayPicker.getStart({ start: date }),
+        end: RANGE_MODE_LOOKUP.dayPicker.getEnd({ end: date })
+      });
+    };
     const setDateRange = withCorrectedRange(({ start, end }) => {
       set2({
         start: RANGE_MODE_LOOKUP.dayRangePicker.getStart({ start }),
@@ -7202,9 +7188,12 @@ function buildStore() {
     const setRangeWithExplicitDisplayMode = ({
       start,
       end,
-      rangeDisplayMode
+      displayMode
     }) => {
-      switch (rangeDisplayMode) {
+      switch (displayMode) {
+        case "dayPicker":
+          setDate({ date: end });
+          break;
         case "dayRangePicker":
           setDateRange({ start, end });
           break;
@@ -7219,8 +7208,8 @@ function buildStore() {
           break;
         default:
           safeAssertUnreachable({
-            value: rangeDisplayMode,
-            message: "Invalid `rangeDisplayMode`"
+            value: displayMode,
+            message: "Invalid `displayMode`"
           });
       }
     };
@@ -7228,22 +7217,7 @@ function buildStore() {
       start: (0, import_date_fns3.startOfMonth)(now),
       end: clampToPresentOrPast((0, import_date_fns3.endOfMonth)(now)),
       actions: {
-        setDate: ({ date }) => {
-          set2(({
-            start: currentStart,
-            end: currentEnd
-          }) => {
-            const newEnd = RANGE_MODE_LOOKUP.dayRangePicker.getEnd({ end: date });
-            return {
-              start: RANGE_MODE_LOOKUP.dayRangePicker.getShiftedStart({
-                currentStart,
-                currentEnd,
-                newEnd
-              }),
-              end: newEnd
-            };
-          });
-        },
+        setDate,
         setRangeWithExplicitDisplayMode,
         setDateRange,
         setMonth,
@@ -12307,8 +12281,7 @@ var LinkedAccountsContent = ({
   asWidget,
   showLedgerBalance,
   showUnlinkItem,
-  showBreakConnection,
-  showAddAccount
+  showBreakConnection
 }) => {
   const { data, addConnection } = (0, import_react48.useContext)(LinkedAccountsContext);
   const linkedAccountsNewAccountClassName = (0, import_classnames25.default)(
@@ -12331,7 +12304,7 @@ var LinkedAccountsContent = ({
         },
         index
       )),
-      showAddAccount && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         "div",
         {
           role: "button",
@@ -12892,6 +12865,25 @@ var highlightNextArrow = ({
   }
   return false;
 };
+var getDateFormat = (mode) => {
+  switch (mode) {
+    case "dayPicker":
+    case "dayRangePicker":
+      return "MMM d, yyyy";
+    case "monthPicker":
+    case "monthRangePicker":
+      return "MMM yyyy";
+    case "yearPicker":
+      return "yyyy";
+    case "timePicker":
+      return "h:mm aa";
+    default:
+      unsafeAssertUnreachable({
+        value: mode,
+        message: "Invalid datepicker mode"
+      });
+  }
+};
 var DatePicker = (_a) => {
   var _b = _a, {
     selected,
@@ -12899,7 +12891,7 @@ var DatePicker = (_a) => {
     disabled,
     displayMode = "dayPicker",
     allowedModes,
-    dateFormat = displayMode === "monthPicker" || displayMode === "monthRangePicker" ? "MMM, yyyy" : displayMode === "timePicker" ? "h:mm aa" : "MMM d, yyyy",
+    dateFormat = getDateFormat(displayMode),
     timeIntervals = 15,
     timeCaption,
     placeholderText: _placeholderText,
@@ -13623,11 +13615,10 @@ var LinkedAccounts = (props) => {
 };
 var LinkedAccountsComponent = ({
   asWidget,
-  elevated,
+  elevated = false,
   showLedgerBalance = true,
   showUnlinkItem = false,
   showBreakConnection = false,
-  showAddAccount = true,
   stringOverrides
 }) => {
   const {
@@ -13662,8 +13653,7 @@ var LinkedAccountsComponent = ({
         asWidget,
         showLedgerBalance,
         showUnlinkItem,
-        showBreakConnection,
-        showAddAccount
+        showBreakConnection
       }
     ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(OpeningBalanceModal, {})
@@ -16455,6 +16445,7 @@ function buildCustomPlaceholder({ placeholder }) {
     } = _b, restProps = __objRest(_b, [
       "children"
     ]);
+    if (!placeholder) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
       import_react_select4.components.Placeholder,
       __spreadProps(__spreadValues({}, restProps), {
@@ -21562,7 +21553,7 @@ 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 }) {
-  const columns2 = (0, import_react107.useMemo)(
+  const columns = (0, import_react107.useMemo)(
     () => {
       const columnDefs = [{
         id: "row",
@@ -21616,7 +21607,7 @@ function ValidateCsvTable({ data, headers, formatters: formatters2, className })
   }), []);
   const table = (0, import_react_table.useReactTable)({
     data,
-    columns: columns2,
+    columns,
     state,
     getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
     getSortedRowModel: (0, import_react_table.getSortedRowModel)()
@@ -22875,12 +22866,11 @@ var Integrations = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(QuickbooksContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(IntegrationsComponent, __spreadValues({}, props)) });
 };
 var IntegrationsComponent = ({
-  elevated,
   stringOverrides
 }) => {
   const { quickbooksConnectionStatus } = (0, import_react123.useContext)(QuickbooksContext);
   const isLoading = quickbooksConnectionStatus === void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(Container, { name: COMPONENT_NAME3, elevated, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(Container, { name: COMPONENT_NAME3, children: [
     /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(Header, { className: "Layer__linked-accounts__header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
         Heading,
@@ -23212,6 +23202,7 @@ var defaultModeByReport = {
 };
 var ReportsModeStoreContext = (0, import_react127.createContext)(
   (0, import_zustand3.createStore)(() => ({
+    resetPnLModeToDefaultOnMount: true,
     modeByReport: {},
     actions: {
       setModeForReport: () => {
@@ -23219,6 +23210,10 @@ var ReportsModeStoreContext = (0, import_react127.createContext)(
     }
   }))
 );
+function useReportModeStore() {
+  const store = (0, import_react127.useContext)(ReportsModeStoreContext);
+  return (0, import_zustand3.useStore)(store);
+}
 function useReportMode(report) {
   const store = (0, import_react127.useContext)(ReportsModeStoreContext);
   return (0, import_zustand3.useStore)(store, (state) => state.modeByReport[report]);
@@ -23234,11 +23229,13 @@ function useReportModeWithFallback(report, fallback) {
 }
 function ReportsModeStoreProvider({
   children,
-  initialModes
+  initialModes,
+  resetPnLModeToDefaultOnMount = true
 }) {
   const [store] = (0, import_react127.useState)(
     () => (0, import_zustand3.createStore)((set2) => ({
       modeByReport: __spreadValues(__spreadValues({}, defaultModeByReport), initialModes),
+      resetPnLModeToDefaultOnMount,
       actions: {
         setModeForReport: (report, mode) => set2((state) => ({
           modeByReport: __spreadProps(__spreadValues({}, state.modeByReport), {
@@ -24633,21 +24630,11 @@ function useGlobalDateRangePicker({ displayMode, setDisplayMode }) {
       setDisplayMode(newMode);
     }
   }, [setDisplayMode]);
-  const { dateFormat, dateOrDateRange } = (0, import_react132.useMemo)(() => {
+  const dateOrDateRange = (0, import_react132.useMemo)(() => {
     if (displayMode === "monthPicker") {
-      return {
-        dateOrDateRange: start,
-        dateFormat: void 0
-      };
+      return start;
     }
-    return {
-      /*
-       * This intentionally needs to be cast to a mutable array. The `DatePicker`
-       * component should accept a readonly array, but that refactor is out of scope.
-       */
-      dateOrDateRange: [start, end],
-      dateFormat: "MMM d"
-    };
+    return [start, end];
   }, [
     start,
     end,
@@ -24656,10 +24643,9 @@ function useGlobalDateRangePicker({ displayMode, setDisplayMode }) {
   const onChangeDateOrDateRange = (0, import_react132.useCallback)((dates) => {
     var _a;
     const dateProps = dates instanceof Date ? { start: dates, end: dates } : { start: dates[0], end: (_a = dates[1]) != null ? _a : dates[0] };
-    setRangeWithExplicitDisplayMode(__spreadProps(__spreadValues({}, dateProps), { rangeDisplayMode: displayMode }));
+    setRangeWithExplicitDisplayMode(__spreadProps(__spreadValues({}, dateProps), { displayMode }));
   }, [displayMode, setRangeWithExplicitDisplayMode]);
   return {
-    dateFormat,
     rangeDisplayMode: displayMode,
     onChangeMode,
     dateOrDateRange,
@@ -24677,24 +24663,24 @@ var ProfitAndLossDatePicker = ({
   const isMounted = (0, import_react133.useRef)(false);
   const { business } = useLayerContext();
   const displayMode = useReportModeWithFallback("ProfitAndLoss" /* ProfitAndLoss */, "monthPicker");
+  const { resetPnLModeToDefaultOnMount } = useReportModeStore();
   const { setModeForReport } = useReportModeActions();
   const setDisplayMode = (0, import_react133.useCallback)((mode) => {
     setModeForReport("ProfitAndLoss" /* ProfitAndLoss */, mode);
   }, [setModeForReport]);
   (0, import_react133.useEffect)(() => {
     const initialDatePickerMode = getInitialDateRangePickerMode({ allowedDatePickerModes, defaultDatePickerMode });
-    if (!isMounted.current && displayMode !== initialDatePickerMode) {
+    if (!isMounted.current && resetPnLModeToDefaultOnMount && displayMode !== initialDatePickerMode) {
       setDisplayMode(initialDatePickerMode);
     }
     isMounted.current = true;
-  }, [allowedDatePickerModes, defaultDatePickerMode, displayMode, setDisplayMode]);
+  }, [resetPnLModeToDefaultOnMount, allowedDatePickerModes, defaultDatePickerMode, displayMode, setDisplayMode]);
   const cleanedAllowedModes = getAllowedDateRangePickerModes({ allowedDatePickerModes, defaultDatePickerMode });
   const {
     rangeDisplayMode,
     onChangeMode,
     dateOrDateRange,
-    onChangeDateOrDateRange,
-    dateFormat
+    onChangeDateOrDateRange
   } = useGlobalDateRangePicker({ displayMode, setDisplayMode });
   const minDate = getEarliestDateToBrowse(business);
   return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
@@ -24708,7 +24694,6 @@ var ProfitAndLossDatePicker = ({
       slots: {
         ModeSelector: DatePickerModeSelector
       },
-      dateFormat,
       customDateRanges,
       minDate
     }
@@ -27450,7 +27435,6 @@ function StatementOfCashFlowDatePicker({
     setModeForReport("StatementOfCashFlows" /* StatementOfCashFlows */, mode);
   }, [setModeForReport]);
   const {
-    dateFormat,
     rangeDisplayMode,
     onChangeMode,
     dateOrDateRange,
@@ -27469,7 +27453,6 @@ function StatementOfCashFlowDatePicker({
       slots: {
         ModeSelector: DatePickerModeSelector
       },
-      dateFormat,
       customDateRanges,
       minDate
     }
@@ -29510,7 +29493,7 @@ var DetailsListItem = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)("li", { className: "Layer__details-list-item", children: [
     /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("label", { className: "Layer__details-list-item__label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("span", { className: "Layer__details-list-item__value", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(SkeletonLoader, {}) : renderValue(children) })
+    /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("div", { className: "Layer__details-list-item__value", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(SkeletonLoader, {}) : renderValue(children) })
   ] });
 };
 
@@ -30630,7 +30613,10 @@ var JournalEntryDetails = () => {
     /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(
       DetailsList,
       {
-        title: `Journal Entry ${entry ? entryNumber(entry) : ""}`,
+        title: /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(VStack, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Span, { children: "Journal Entry" }),
+          entry && /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Span, { variant: "subtle", size: "xs", children: `Journal ID #${entryNumber(entry)}` })
+        ] }),
         className: "Layer__border-top",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry, children: humanizeEnum((_c = entry == null ? void 0 : entry.entry_type) != null ? _c : "") }),
@@ -34444,7 +34430,6 @@ var BookkeepingOverview = ({
               {
                 name: "bookkeeping-overview-profit-and-loss",
                 asWidget: true,
-                elevated: true,
                 style: {
                   position: "relative",
                   zIndex: 2
@@ -34582,7 +34567,6 @@ var AccountingOverview = ({
               {
                 name: "accounting-overview-profit-and-loss",
                 asWidget: true,
-                elevated: true,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
                     ProfitAndLoss.Header,
@@ -34669,7 +34653,7 @@ var BankTransactionsWithLinkedAccounts = ({
   title,
   // deprecated
   showTitle = true,
-  elevatedLinkedAccounts = true,
+  elevatedLinkedAccounts = false,
   mode,
   showBreakConnection = false,
   showCustomerVendor = false,
@@ -34680,7 +34664,6 @@ var BankTransactionsWithLinkedAccounts = ({
   showTooltips = false,
   showUnlinkItem = false,
   showUploadOptions = false,
-  showAddAccount = true,
   mobileComponent,
   stringOverrides
 }) => {
@@ -34697,7 +34680,6 @@ var BankTransactionsWithLinkedAccounts = ({
             showLedgerBalance,
             showUnlinkItem,
             showBreakConnection,
-            showAddAccount,
             stringOverrides: stringOverrides == null ? void 0 : stringOverrides.linkedAccounts
           }
         ),
@@ -37052,7 +37034,7 @@ var Reports = ({
             onChange: (opt) => setActiveTab(opt.target.value)
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(Container, { name: "reports", ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(ReportsModeStoreProvider, { initialModes, children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(ProfitAndLoss, { asContainer: false, comparisonConfig, withReportsModeProvider: false, children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(Container, { name: "reports", ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(ReportsModeStoreProvider, { initialModes, resetPnLModeToDefaultOnMount: false, children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(ProfitAndLoss, { asContainer: false, comparisonConfig, withReportsModeProvider: false, children: /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
           ReportsPanel,
           {
             openReport: activeTab,
@@ -37188,31 +37170,339 @@ var Components = ({
   ] });
 };
 
-// src/components/Invoices/InvoicesTable.tsx
-var import_react224 = require("react");
+// src/components/Invoices/Invoices.tsx
+var import_react237 = require("react");
 
-// src/features/invoices/api/useListInvoices.tsx
-var import_infinite7 = __toESM(require("swr/infinite"));
+// src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
+var import_react231 = require("react");
+
+// src/components/BaseDetailView/BaseDetailView.tsx
+var import_jsx_runtime327 = require("react/jsx-runtime");
+var BaseDetailView = ({ name, onGoBack, slots, children }) => {
+  const { Header: Header6 } = slots;
+  return /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)(Container, { name, className: "Layer__BaseDetailView", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)(HStack, { align: "center", gap: "md", className: "Layer__BaseDetailView__Header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(Button2, { variant: "outlined", icon: true, onPress: onGoBack, children: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(BackArrow_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(Header6, {})
+    ] }),
+    children
+  ] });
+};
+
+// src/components/Invoices/InvoiceForm/useInvoiceForm.ts
+var import_react229 = require("react");
+var import_react_form7 = require("@tanstack/react-form");
+
+// src/features/forms/hooks/useForm.tsx
+var import_react_form6 = require("@tanstack/react-form");
+
+// src/components/ui/Form/Form.tsx
 var import_react220 = require("react");
-var import_lodash6 = __toESM(require_lodash());
-var import_effect11 = require("effect");
+var import_react_aria_components14 = require("react-aria-components");
+var import_classnames88 = __toESM(require("classnames"));
+var import_jsx_runtime328 = require("react/jsx-runtime");
+var FORM_CLASS_NAME = "Layer__UI__Form";
+var Form = (0, import_react220.forwardRef)(
+  function Form2(_a, ref) {
+    var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(import_react_aria_components14.Form, __spreadProps(__spreadValues({}, restProps), { className: (0, import_classnames88.default)(FORM_CLASS_NAME, className), ref, children }));
+  }
+);
+var TEXT_FIELD_CLASS_NAME = "Layer__UI__TextField";
+var TextField = (0, import_react220.forwardRef)(
+  function TextField2(_a, ref) {
+    var _b = _a, { children, inline, textarea, className } = _b, restProps = __objRest(_b, ["children", "inline", "textarea", "className"]);
+    const dataProperties = toDataProperties({ inline, textarea });
+    return /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(import_react_aria_components14.TextField, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: (0, import_classnames88.default)(TEXT_FIELD_CLASS_NAME, className), ref, children: withRenderProp(children, (node) => node) }));
+  }
+);
+var FIELD_ERROR_CLASS_NAME = "Layer__UI__FieldError";
+var FieldError = (0, import_react220.forwardRef)(
+  function FieldError2({ children }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(import_react_aria_components14.FieldError, { className: FIELD_ERROR_CLASS_NAME, ref, children: withRenderProp(children, (node) => node) });
+  }
+);
 
-// src/types/utility/pagination.ts
+// src/features/forms/components/BaseFormTextField.tsx
+var import_jsx_runtime329 = require("react/jsx-runtime");
+function BaseFormTextField({
+  label,
+  className,
+  inline = false,
+  showLabel = true,
+  showFieldError = true,
+  isTextArea = false,
+  children
+}) {
+  const field = useFieldContext();
+  const { name, state } = field;
+  const { meta } = state;
+  const { errors, isValid: isValid2 } = meta;
+  const errorMessage = errors.length !== 0 ? errors[0] : void 0;
+  const shouldShowErrorMessage = showFieldError && errorMessage;
+  const additionalAriaProps = !showLabel && { "aria-label": label };
+  return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)(TextField, __spreadProps(__spreadValues({ name, isInvalid: !isValid2, inline, className, textarea: isTextArea }, additionalAriaProps), { children: [
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(Label, __spreadProps(__spreadValues({ size: "sm", htmlFor: name }, !inline && { pbe: "3xs" }), { children: label })),
+    children,
+    shouldShowErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(FieldError, { children: errorMessage })
+  ] }));
+}
+
+// src/features/forms/components/FormBigDecimalField.tsx
+var import_react223 = require("react");
+
+// src/components/ui/Input/InputGroup.tsx
+var import_react221 = require("react");
+var import_react_aria_components15 = require("react-aria-components");
+var import_jsx_runtime330 = require("react/jsx-runtime");
+var INPUT_GROUP_CLASS_NAME = "Layer__InputGroup";
+var InputGroup2 = (0, import_react221.forwardRef)(
+  function InputGroup3(_a, ref) {
+    var _b = _a, { actionCount } = _b, restProps = __objRest(_b, ["actionCount"]);
+    const dataProperties = toDataProperties({ "action-count": actionCount });
+    return /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
+      import_react_aria_components15.Group,
+      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
+        className: INPUT_GROUP_CLASS_NAME,
+        ref
+      })
+    );
+  }
+);
+
+// src/features/forms/components/FormBigDecimalField.tsx
+var import_effect10 = require("effect");
+
+// src/components/ui/Input/Input.tsx
+var import_react222 = require("react");
+var import_react_aria_components16 = require("react-aria-components");
+var import_jsx_runtime331 = require("react/jsx-runtime");
+var INPUT_CLASS_NAME = "Layer__UI__Input";
+var Input2 = (0, import_react222.forwardRef)(
+  function Input3(_a, ref) {
+    var _b = _a, { inset, placement } = _b, restProps = __objRest(_b, ["inset", "placement"]);
+    const dataProperties = toDataProperties({ inset, placement });
+    return /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(
+      import_react_aria_components16.Input,
+      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
+        className: INPUT_CLASS_NAME,
+        ref
+      })
+    );
+  }
+);
+
+// src/utils/bigDecimalUtils.ts
 var import_effect9 = require("effect");
-var PaginatedResponseMetaSchema = import_effect9.Schema.Struct({
-  cursor: import_effect9.Schema.NullOr(import_effect9.Schema.String),
-  hasMore: (0, import_effect9.pipe)(
-    import_effect9.Schema.propertySignature(import_effect9.Schema.Boolean),
-    import_effect9.Schema.fromKey("has_more")
-  ),
-  totalCount: (0, import_effect9.pipe)(
-    import_effect9.Schema.propertySignature(import_effect9.Schema.UndefinedOr(import_effect9.Schema.Number)),
-    import_effect9.Schema.fromKey("total_count")
-  )
+var BIG_DECIMAL_ZERO = import_effect9.BigDecimal.fromBigInt(BigInt(0));
+var BIG_DECIMAL_ONE = import_effect9.BigDecimal.fromBigInt(BigInt(1));
+var BIG_DECIMAL_ONE_HUNDRED = import_effect9.BigDecimal.fromBigInt(BigInt(100));
+var DECIMAL_CHARS_REGEX = /^[\d.,-]+$/;
+var NON_NEGATIVE_DECIMAL_CHARS_REGEX = /^[\d.,]+$/;
+var convertBigDecimalToCents = (amount) => {
+  const scaled = import_effect9.BigDecimal.multiply(amount, BIG_DECIMAL_ONE_HUNDRED);
+  const rounded = import_effect9.BigDecimal.round(scaled, { scale: 0 });
+  return Number(rounded.value);
+};
+var convertCentsToBigDecimal = (cents) => {
+  const decimalCents = import_effect9.BigDecimal.fromBigInt(BigInt(cents));
+  return import_effect9.BigDecimal.unsafeDivide(decimalCents, BIG_DECIMAL_ONE_HUNDRED);
+};
+function formatBigDecimalToString(value, maxDecimalPlaces = 10) {
+  const normalizedBigDecimal = import_effect9.BigDecimal.normalize(value);
+  const formatter2 = new Intl.NumberFormat(
+    "en-US",
+    {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: maxDecimalPlaces
+    }
+  );
+  let decimalAsNumber = 0;
+  try {
+    decimalAsNumber = import_effect9.BigDecimal.unsafeToNumber(normalizedBigDecimal);
+  } catch (e) {
+  }
+  return formatter2.format(decimalAsNumber);
+}
+
+// src/features/forms/components/FormBigDecimalField.tsx
+var import_jsx_runtime332 = require("react/jsx-runtime");
+var DEFAULT_MAX_INPUT_LENGTH = 10;
+function FormBigDecimalField({
+  slotProps,
+  maxInputLength = DEFAULT_MAX_INPUT_LENGTH,
+  allowNegative = false
+}) {
+  const field = useFieldContext();
+  const { name, state, handleChange, handleBlur } = field;
+  const { value } = state;
+  const [inputValue, setInputValue] = (0, import_react223.useState)(formatBigDecimalToString(value, maxInputLength));
+  const onInputChange = (0, import_react223.useCallback)((e) => {
+    setInputValue(e.target.value);
+  }, []);
+  const onInputBlur = (0, import_react223.useCallback)(() => {
+    const cleaned = inputValue.replace(/,/g, "");
+    const maybeDecimal = import_effect10.BigDecimal.fromString(cleaned);
+    const decimal = import_effect10.Option.match(maybeDecimal, {
+      onNone: () => BIG_DECIMAL_ZERO,
+      onSome: (amount) => amount
+    });
+    const normalizedDecimal = import_effect10.BigDecimal.normalize(decimal);
+    handleChange(normalizedDecimal);
+    handleBlur();
+    setInputValue(formatBigDecimalToString(normalizedDecimal, maxInputLength));
+  }, [inputValue, handleBlur, handleChange, maxInputLength]);
+  const allowedChars = (0, import_react223.useMemo)(
+    () => allowNegative ? DECIMAL_CHARS_REGEX : NON_NEGATIVE_DECIMAL_CHARS_REGEX,
+    [allowNegative]
+  );
+  const onBeforeInput = (0, import_react223.useCallback)((e) => {
+    if (e.data && !allowedChars.test(e.data)) {
+      e.preventDefault();
+    }
+  }, [allowedChars]);
+  const onPaste = (0, import_react223.useCallback)((e) => {
+    const pastedText = e.clipboardData.getData("text");
+    if (!allowedChars.test(pastedText)) {
+      e.preventDefault();
+    }
+  }, [allowedChars]);
+  (0, import_react223.useEffect)(() => {
+    setInputValue(formatBigDecimalToString(value, maxInputLength));
+  }, [value, maxInputLength]);
+  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { inputMode: "decimal", children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(InputGroup2, { children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+    Input2,
+    {
+      inset: true,
+      id: name,
+      name,
+      value: inputValue,
+      onChange: onInputChange,
+      onBlur: onInputBlur,
+      maxLength: maxInputLength,
+      onBeforeInput,
+      onPaste
+    }
+  ) }) }));
+}
+
+// src/features/forms/components/FormCurrencyField.tsx
+var import_react224 = require("react");
+var import_react_currency_input_field2 = __toESM(require("react-currency-input-field"));
+var import_effect11 = require("effect");
+var import_jsx_runtime333 = require("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 }) {
+  const field = useFieldContext();
+  const label = slotProps.BaseFormTextField.label;
+  const { name, state, handleChange, handleBlur } = field;
+  const { value } = state;
+  const [inputValue, setInputValue] = (0, import_react224.useState)(getCurrencyInputValueFromCents(value));
+  const onInputChange = (0, import_react224.useCallback)((newValue) => {
+    setInputValue(newValue != null ? newValue : ZERO_CENTS_INPUT_VALUE);
+  }, []);
+  const onInputBlur = (0, import_react224.useCallback)(() => {
+    const maybeAmount = import_effect11.BigDecimal.fromString(inputValue);
+    const cents = import_effect11.Option.match(maybeAmount, {
+      onNone: () => 0,
+      onSome: (amount) => convertBigDecimalToCents(amount)
+    });
+    handleChange(cents);
+    handleBlur();
+    setInputValue(getCurrencyInputValueFromCents(cents));
+  }, [inputValue, handleChange, handleBlur]);
+  (0, import_react224.useEffect)(() => {
+    setInputValue(getCurrencyInputValueFromCents(value));
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { children: /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(InputGroup2, { children: /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+    import_react_currency_input_field2.default,
+    {
+      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
+    }
+  ) }) }));
+}
+
+// src/features/forms/components/FormTextAreaField.tsx
+var import_react226 = require("react");
+
+// src/components/ui/Input/TextArea.tsx
+var import_react225 = require("react");
+var import_react_aria_components17 = require("react-aria-components");
+var import_jsx_runtime334 = require("react/jsx-runtime");
+var TEXTAREA_CLASS_NAME = "Layer__UI__TextArea";
+var TextArea = (0, import_react225.forwardRef)(
+  function TextArea2(_a, ref) {
+    var _b = _a, { resize = "none" } = _b, restProps = __objRest(_b, ["resize"]);
+    const dataProperties = toDataProperties({ resize });
+    return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+      import_react_aria_components17.TextArea,
+      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
+        className: TEXTAREA_CLASS_NAME,
+        ref
+      })
+    );
+  }
+);
+
+// src/features/forms/components/FormTextAreaField.tsx
+var import_jsx_runtime335 = require("react/jsx-runtime");
+function FormTextAreaField({ slotProps }) {
+  const field = useFieldContext();
+  const { name, state, handleChange, handleBlur } = field;
+  const { value } = state;
+  const onChange = (0, import_react226.useCallback)((e) => {
+    handleChange(e.target.value);
+  }, [handleChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(TextArea, { id: name, name, value, onChange, onBlur: handleBlur }) }));
+}
+
+// src/features/forms/components/FormTextField.tsx
+var import_react227 = require("react");
+var import_jsx_runtime336 = require("react/jsx-runtime");
+function FormTextField({ slotProps }) {
+  const field = useFieldContext();
+  const { name, state, handleChange, handleBlur } = field;
+  const { value } = state;
+  const onChange = (0, import_react227.useCallback)((e) => {
+    handleChange(e.target.value);
+  }, [handleChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(InputGroup2, { children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(Input2, { inset: true, id: name, name, value, onChange, onBlur: handleBlur }) }) }));
+}
+
+// src/features/forms/hooks/useForm.tsx
+var { fieldContext, useFieldContext, formContext, useFormContext } = (0, import_react_form6.createFormHookContexts)();
+var { useAppForm, withForm } = (0, import_react_form6.createFormHook)({
+  fieldComponents: {
+    BaseFormTextField,
+    FormBigDecimalField,
+    FormCurrencyField,
+    FormTextAreaField,
+    FormTextField
+  },
+  formComponents: {
+    // TODO: define a submit button component
+  },
+  fieldContext,
+  formContext
 });
 
 // src/features/invoices/invoiceSchemas.ts
-var import_effect10 = require("effect");
+var import_effect12 = require("effect");
 var InvoiceStatus = /* @__PURE__ */ ((InvoiceStatus3) => {
   InvoiceStatus3["Voided"] = "VOIDED";
   InvoiceStatus3["Paid"] = "PAID";
@@ -37222,10 +37512,10 @@ var InvoiceStatus = /* @__PURE__ */ ((InvoiceStatus3) => {
   InvoiceStatus3["Sent"] = "SENT";
   return InvoiceStatus3;
 })(InvoiceStatus || {});
-var InvoiceStatusSchema = import_effect10.Schema.Enums(InvoiceStatus);
-var TransformedInvoiceStatusSchema = import_effect10.Schema.transform(
-  import_effect10.Schema.NonEmptyTrimmedString,
-  import_effect10.Schema.typeSchema(InvoiceStatusSchema),
+var InvoiceStatusSchema = import_effect12.Schema.Enums(InvoiceStatus);
+var TransformedInvoiceStatusSchema = import_effect12.Schema.transform(
+  import_effect12.Schema.NonEmptyTrimmedString,
+  import_effect12.Schema.typeSchema(InvoiceStatusSchema),
   {
     decode: (input) => {
       if (Object.values(InvoiceStatusSchema.enums).includes(input)) {
@@ -37236,163 +37526,685 @@ var TransformedInvoiceStatusSchema = import_effect10.Schema.transform(
     encode: (input) => input
   }
 );
-var InvoiceLineItemSchema = import_effect10.Schema.Struct({
-  id: import_effect10.Schema.UUID,
-  externalId: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.NullOr(import_effect10.Schema.String)),
-    import_effect10.Schema.fromKey("external_id")
+var InvoiceLineItemSchema = import_effect12.Schema.Struct({
+  id: import_effect12.Schema.UUID,
+  externalId: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.NullOr(import_effect12.Schema.String)),
+    import_effect12.Schema.fromKey("external_id")
   ),
-  invoiceId: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.UUID),
-    import_effect10.Schema.fromKey("invoice_id")
+  invoiceId: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.UUID),
+    import_effect12.Schema.fromKey("invoice_id")
   ),
-  description: import_effect10.Schema.NullOr(import_effect10.Schema.String),
-  product: import_effect10.Schema.NullOr(import_effect10.Schema.String),
-  unitPrice: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.Number),
-    import_effect10.Schema.fromKey("unit_price")
+  description: import_effect12.Schema.NullOr(import_effect12.Schema.String),
+  product: import_effect12.Schema.NullOr(import_effect12.Schema.String),
+  unitPrice: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Number),
+    import_effect12.Schema.fromKey("unit_price")
   ),
-  quantity: import_effect10.Schema.BigDecimal,
-  subtotal: import_effect10.Schema.Number,
-  discountAmount: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.Number),
-    import_effect10.Schema.fromKey("discount_amount")
+  quantity: import_effect12.Schema.BigDecimal,
+  subtotal: import_effect12.Schema.Number,
+  discountAmount: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Number),
+    import_effect12.Schema.fromKey("discount_amount")
   ),
-  salesTaxTotal: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.Number),
-    import_effect10.Schema.fromKey("sales_taxes_total")
+  salesTaxTotal: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Number),
+    import_effect12.Schema.fromKey("sales_taxes_total")
   ),
-  totalAmount: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.Number),
-    import_effect10.Schema.fromKey("total_amount")
+  totalAmount: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Number),
+    import_effect12.Schema.fromKey("total_amount")
   ),
-  memo: import_effect10.Schema.NullOr(import_effect10.Schema.String)
+  memo: import_effect12.Schema.NullOr(import_effect12.Schema.String)
 });
-var InvoiceSchema = import_effect10.Schema.Struct({
-  id: import_effect10.Schema.UUID,
-  businessId: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.UUID),
-    import_effect10.Schema.fromKey("business_id")
+var InvoiceSchema = import_effect12.Schema.Struct({
+  id: import_effect12.Schema.UUID,
+  businessId: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.UUID),
+    import_effect12.Schema.fromKey("business_id")
   ),
-  externalId: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.NullOr(import_effect10.Schema.String)),
-    import_effect10.Schema.fromKey("external_id")
+  externalId: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.NullOr(import_effect12.Schema.String)),
+    import_effect12.Schema.fromKey("external_id")
   ),
   status: TransformedInvoiceStatusSchema,
-  sentAt: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.NullOr(import_effect10.Schema.Date)),
-    import_effect10.Schema.fromKey("sent_at")
+  sentAt: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.NullOr(import_effect12.Schema.Date)),
+    import_effect12.Schema.fromKey("sent_at")
   ),
-  dueAt: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.NullOr(import_effect10.Schema.Date)),
-    import_effect10.Schema.fromKey("due_at")
+  dueAt: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.NullOr(import_effect12.Schema.Date)),
+    import_effect12.Schema.fromKey("due_at")
   ),
-  paidAt: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.NullOr(import_effect10.Schema.Date)),
-    import_effect10.Schema.fromKey("paid_at")
+  paidAt: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.NullOr(import_effect12.Schema.Date)),
+    import_effect12.Schema.fromKey("paid_at")
   ),
-  voidedAt: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.NullOr(import_effect10.Schema.Date)),
-    import_effect10.Schema.fromKey("voided_at")
+  voidedAt: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.NullOr(import_effect12.Schema.Date)),
+    import_effect12.Schema.fromKey("voided_at")
   ),
-  invoiceNumber: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.NullOr(import_effect10.Schema.String)),
-    import_effect10.Schema.fromKey("invoice_number")
+  invoiceNumber: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.NullOr(import_effect12.Schema.String)),
+    import_effect12.Schema.fromKey("invoice_number")
   ),
-  recipientName: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.NullOr(import_effect10.Schema.String)),
-    import_effect10.Schema.fromKey("recipient_name")
+  recipientName: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.NullOr(import_effect12.Schema.String)),
+    import_effect12.Schema.fromKey("recipient_name")
   ),
-  customer: import_effect10.Schema.NullOr(CustomerSchema),
-  lineItems: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.Array(InvoiceLineItemSchema)),
-    import_effect10.Schema.fromKey("line_items")
+  customer: import_effect12.Schema.NullOr(CustomerSchema),
+  lineItems: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Array(InvoiceLineItemSchema)),
+    import_effect12.Schema.fromKey("line_items")
   ),
-  subtotal: import_effect10.Schema.Number,
-  additionalDiscount: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.Number),
-    import_effect10.Schema.fromKey("additional_discount")
+  subtotal: import_effect12.Schema.Number,
+  additionalDiscount: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Number),
+    import_effect12.Schema.fromKey("additional_discount")
   ),
-  additionalSalesTaxesTotal: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.Number),
-    import_effect10.Schema.fromKey("additional_sales_taxes_total")
+  additionalSalesTaxesTotal: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Number),
+    import_effect12.Schema.fromKey("additional_sales_taxes_total")
   ),
-  totalAmount: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.Number),
-    import_effect10.Schema.fromKey("total_amount")
+  totalAmount: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Number),
+    import_effect12.Schema.fromKey("total_amount")
   ),
-  outstandingBalance: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.Number),
-    import_effect10.Schema.fromKey("outstanding_balance")
+  outstandingBalance: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Number),
+    import_effect12.Schema.fromKey("outstanding_balance")
   ),
-  importedAt: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.Date),
-    import_effect10.Schema.fromKey("imported_at")
+  importedAt: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Date),
+    import_effect12.Schema.fromKey("imported_at")
   ),
-  updatedAt: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.NullOr(import_effect10.Schema.Date)),
-    import_effect10.Schema.fromKey("updated_at")
+  updatedAt: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.NullOr(import_effect12.Schema.Date)),
+    import_effect12.Schema.fromKey("updated_at")
   ),
-  memo: import_effect10.Schema.NullOr(import_effect10.Schema.String)
+  memo: import_effect12.Schema.NullOr(import_effect12.Schema.String)
 });
-var UpsertInvoiceTaxLineItemSchema = import_effect10.Schema.Struct({
-  amount: import_effect10.Schema.NumberFromString.pipe(import_effect10.Schema.int())
+var UpsertInvoiceTaxLineItemSchema = import_effect12.Schema.Struct({
+  amount: import_effect12.Schema.Number
 });
-var UpsertInvoiceLineItemSchema = import_effect10.Schema.Struct({
-  description: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.UndefinedOr(import_effect10.Schema.String)),
-    import_effect10.Schema.fromKey("description")
-  ),
-  product: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.String),
-    import_effect10.Schema.fromKey("product")
+var UpsertInvoiceLineItemSchema = import_effect12.Schema.Struct({
+  description: import_effect12.Schema.String,
+  product: import_effect12.Schema.String,
+  unitPrice: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Number),
+    import_effect12.Schema.fromKey("unit_price")
   ),
-  unitPrice: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.NumberFromString.pipe(import_effect10.Schema.int())),
-    import_effect10.Schema.fromKey("unit_price")
-  ),
-  quantity: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.BigDecimal),
-    import_effect10.Schema.fromKey("quantity")
-  )
+  quantity: import_effect12.Schema.BigDecimal
 });
-var UpsertInvoiceSchema = import_effect10.Schema.Struct({
-  sentAt: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.Date),
-    import_effect10.Schema.fromKey("sent_at")
+var UpsertInvoiceSchema = import_effect12.Schema.Struct({
+  sentAt: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Date),
+    import_effect12.Schema.fromKey("sent_at")
   ),
-  dueAt: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.Date),
-    import_effect10.Schema.fromKey("due_at")
+  dueAt: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Date),
+    import_effect12.Schema.fromKey("due_at")
   ),
-  invoiceNumber: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.UndefinedOr(import_effect10.Schema.String)),
-    import_effect10.Schema.fromKey("invoice_number")
+  invoiceNumber: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.UndefinedOr(import_effect12.Schema.String)),
+    import_effect12.Schema.fromKey("invoice_number")
   ),
-  customerId: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.UUID),
-    import_effect10.Schema.fromKey("customer_id")
+  customerId: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.UUID),
+    import_effect12.Schema.fromKey("customer_id")
   ),
-  memo: import_effect10.Schema.NullOr(import_effect10.Schema.String),
-  lineItems: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.Array(UpsertInvoiceLineItemSchema)),
-    import_effect10.Schema.fromKey("line_items")
+  memo: import_effect12.Schema.NullOr(import_effect12.Schema.String),
+  lineItems: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.Array(UpsertInvoiceLineItemSchema)),
+    import_effect12.Schema.fromKey("line_items")
   ),
-  additionalDiscount: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.UndefinedOr(import_effect10.Schema.NumberFromString.pipe(import_effect10.Schema.int()))),
-    import_effect10.Schema.fromKey("additional_discount")
+  additionalDiscount: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.UndefinedOr(import_effect12.Schema.Number)),
+    import_effect12.Schema.fromKey("additional_discount")
   ),
-  additionalSalesTaxes: (0, import_effect10.pipe)(
-    import_effect10.Schema.propertySignature(import_effect10.Schema.UndefinedOr(import_effect10.Schema.Array(UpsertInvoiceTaxLineItemSchema))),
-    import_effect10.Schema.fromKey("additional_sales_taxes")
+  additionalSalesTaxes: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.UndefinedOr(import_effect12.Schema.Array(UpsertInvoiceTaxLineItemSchema))),
+    import_effect12.Schema.fromKey("additional_sales_taxes")
+  )
+});
+
+// src/features/invoices/api/useUpsertInvoice.tsx
+var import_react228 = require("react");
+var import_mutation26 = __toESM(require("swr/mutation"));
+var import_effect13 = require("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}`);
+function buildKey39({
+  access_token: accessToken,
+  apiUrl,
+  businessId,
+  invoiceId = void 0
+}) {
+  if (accessToken && apiUrl) {
+    return {
+      accessToken,
+      apiUrl,
+      businessId,
+      invoiceId,
+      tags: [UPSERT_INVOICES_TAG_KEY]
+    };
+  }
+}
+var UpsertInvoiceReturnSchema = import_effect13.Schema.Struct({
+  data: InvoiceSchema
+});
+var UpsertInvoiceSWRResponse = class {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get data() {
+    return this.swrResponse.data;
+  }
+  get trigger() {
+    return this.swrResponse.trigger;
+  }
+  get isMutating() {
+    return this.swrResponse.isMutating;
+  }
+  get isError() {
+    return this.swrResponse.error !== void 0;
+  }
+};
+var CreateParamsSchema = import_effect13.Schema.Struct({
+  businessId: import_effect13.Schema.String
+});
+var UpdateParamsSchema = import_effect13.Schema.Struct({
+  businessId: import_effect13.Schema.String,
+  invoiceId: import_effect13.Schema.String
+});
+var isParamsValidForMode = (mode, params) => {
+  if (mode === "Update" /* Update */) {
+    return import_effect13.Effect.runSync(import_effect13.Effect.either(import_effect13.Schema.decodeUnknown(UpdateParamsSchema)(params)))._tag === "Right";
+  }
+  if (mode === "Create" /* Create */) {
+    return import_effect13.Effect.runSync(import_effect13.Effect.either(import_effect13.Schema.decodeUnknown(CreateParamsSchema)(params)))._tag === "Right";
+  }
+  return false;
+};
+function getRequestFn(mode, params) {
+  if (mode === "Update" /* Update */) {
+    if (!isParamsValidForMode("Update" /* Update */, params)) {
+      throw new Error("Invalid params for upsert mode");
+    }
+    return ({ apiUrl, accessToken, body }) => updateInvoice(apiUrl, accessToken, { params, body });
+  } else {
+    if (!isParamsValidForMode("Create" /* Create */, params)) {
+      throw new Error("Invalid params for create mode");
+    }
+    return ({ apiUrl, accessToken, body }) => createInvoice(apiUrl, accessToken, { params, body });
+  }
+}
+var useUpsertInvoice = (props) => {
+  const { data } = useAuth();
+  const { businessId } = useLayerContext();
+  const { mode } = props;
+  const invoiceId = mode === "Update" /* Update */ ? props.invoiceId : void 0;
+  const rawMutationResponse = (0, import_mutation26.default)(
+    () => buildKey39(__spreadProps(__spreadValues({}, data), {
+      businessId,
+      invoiceId
+    })),
+    ({ accessToken, apiUrl, businessId: businessId2, invoiceId: invoiceId2 }, { arg: body }) => {
+      const request2 = getRequestFn(mode, { businessId: businessId2, invoiceId: invoiceId2 });
+      return request2({
+        apiUrl,
+        accessToken,
+        body
+      }).then(import_effect13.Schema.decodeUnknownPromise(UpsertInvoiceReturnSchema));
+    },
+    {
+      revalidate: false
+    }
+  );
+  const mutationResponse = new UpsertInvoiceSWRResponse(rawMutationResponse);
+  const originalTrigger = mutationResponse.trigger;
+  const stableProxiedTrigger = (0, import_react228.useCallback)(
+    (...triggerParameters) => __async(null, null, function* () {
+      const triggerResult = yield originalTrigger(...triggerParameters);
+      return triggerResult;
+    }),
+    [originalTrigger]
+  );
+  return new Proxy(mutationResponse, {
+    get(target, prop) {
+      if (prop === "trigger") {
+        return stableProxiedTrigger;
+      }
+      return Reflect.get(target, prop);
+    }
+  });
+};
+
+// src/components/Invoices/InvoiceForm/useInvoiceForm.ts
+var import_effect14 = require("effect");
+var EMPTY_LINE_ITEM = {
+  product: "",
+  description: "",
+  unitPrice: 0,
+  quantity: BIG_DECIMAL_ONE,
+  amount: 0
+};
+var DEFAULT_FORM_VALUES = {
+  invoiceNumber: "",
+  customer: null,
+  email: "",
+  address: "",
+  lineItems: [EMPTY_LINE_ITEM]
+};
+var getInvoiceLineItemAmount = (lineItem) => {
+  const { unitPrice, quantity } = lineItem;
+  return convertBigDecimalToCents(import_effect14.BigDecimal.multiply(quantity, convertCentsToBigDecimal(unitPrice)));
+};
+var getAugmentedInvoiceFormLineItem = (lineItem) => {
+  return __spreadProps(__spreadValues({}, lineItem), {
+    amount: getInvoiceLineItemAmount(lineItem)
+  });
+};
+var getInvoiceFormDefaultValues = (invoice) => {
+  var _a, _b;
+  return {
+    invoiceNumber: invoice.invoiceNumber,
+    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)
+  };
+};
+var useInvoiceForm = (props) => {
+  const [submitError, setSubmitError] = (0, import_react229.useState)(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 = import_effect14.Schema.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 isFormValid = (0, import_react_form7.useStore)(form.store, (state) => state.isValid);
+  return { form, submitError, isFormValid };
+};
+
+// src/components/Invoices/InvoiceForm/InvoiceForm.tsx
+var import_lucide_react16 = require("lucide-react");
+var import_effect15 = require("effect");
+
+// src/features/customers/components/CustomerSelector.tsx
+var import_react230 = require("react");
+var import_classnames89 = __toESM(require("classnames"));
+var import_jsx_runtime337 = require("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";
+}
+var CustomerAsOption = class {
+  constructor(customer) {
+    __publicField(this, "internalCustomer");
+    this.internalCustomer = customer;
+  }
+  get original() {
+    return this.internalCustomer;
+  }
+  get label() {
+    return getCustomerName(this.internalCustomer);
+  }
+  get id() {
+    return this.internalCustomer.id;
+  }
+  get value() {
+    return this.internalCustomer.id;
+  }
+};
+function CustomerSelector({
+  selectedCustomer,
+  onSelectedCustomerChange,
+  placeholder,
+  isReadOnly,
+  inline,
+  className
+}) {
+  const combinedClassName = (0, import_classnames89.default)(
+    "Layer__CustomerSelector",
+    inline && "Layer__CustomerSelector--inline",
+    className
+  );
+  const { searchQuery, handleInputChange } = useDebouncedSearchInput({
+    initialInputState: () => ""
+  });
+  const effectiveSearchQuery = searchQuery === "" ? void 0 : searchQuery;
+  const { data, isLoading, isError } = useListCustomers({ query: effectiveSearchQuery });
+  const options = (0, import_react230.useMemo)(
+    () => (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 = (0, import_react230.useCallback)(
+    (selectedOption) => {
+      if (selectedOption === null) {
+        handleInputChange("");
+        if (selectedCustomerId) {
+          onSelectedCustomerChange(null);
+        }
+        return;
+      }
+      const selectedCustomer2 = options.find(({ id }) => id === selectedOption.value);
+      if (selectedCustomer2) {
+        const selectedCustomerWithType = selectedCustomer2.original;
+        if (selectedCustomer2.id !== selectedCustomerId) {
+          onSelectedCustomerChange(selectedCustomerWithType);
+        }
+        handleInputChange("");
+        return;
+      }
+    },
+    [options, handleInputChange, selectedCustomerId, onSelectedCustomerChange]
+  );
+  const selectedCustomerForComboBox = (0, import_react230.useMemo)(
+    () => {
+      if (selectedCustomer === null) {
+        return null;
+      }
+      return {
+        label: getCustomerName(selectedCustomer),
+        value: selectedCustomer.id
+      };
+    },
+    [selectedCustomer]
+  );
+  const EmptyMessage = (0, import_react230.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(P, { variant: "subtle", children: "No matching customer" }),
+    []
+  );
+  const ErrorMessage = (0, import_react230.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+      P,
+      {
+        size: "xs",
+        status: "error",
+        children: "An error occurred while loading customers."
+      }
+    ),
+    []
+  );
+  const inputId = (0, import_react230.useId)();
+  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 isLoadingWithoutFallback = isLoading && !data;
+  const shouldDisableComboBox = isLoadingWithoutFallback || isError;
+  return /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)(VStack, { className: combinedClassName, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(Label, { htmlFor: inputId, size: "sm", children: "Customer" }),
+    /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+      ComboBox,
+      {
+        selectedValue: selectedCustomerForComboBox,
+        onSelectedValueChange: handleSelectionChange,
+        options,
+        onInputValueChange: handleInputChange,
+        inputId,
+        placeholder,
+        slots: { EmptyMessage, ErrorMessage },
+        isDisabled: isReadOnly || shouldDisableComboBox,
+        isError,
+        isLoading: isLoadingWithoutFallback
+      }
+    )
+  ] });
+}
+
+// src/components/Invoices/InvoiceForm/InvoiceForm.tsx
+var import_jsx_runtime338 = require("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(
+    __spreadValues({ onSuccess }, mode === "Update" /* Update */ ? { mode, invoice: props.invoice } : { mode })
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime338.jsxs)(Form, { className: INVOICE_FORM_CSS_PREFIX, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime338.jsxs)(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__Metadata`, gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+        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__ */ (0, import_jsx_runtime338.jsx)(
+            CustomerSelector,
+            {
+              className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Customer`,
+              selectedCustomer: field.state.value,
+              onSelectedCustomerChange: field.handleChange,
+              inline: true
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(form.AppField, { name: "email", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(field.FormTextField, { slotProps: { BaseFormTextField: { label: "Email", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Email` } } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(form.AppField, { name: "address", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(field.FormTextAreaField, { slotProps: { BaseFormTextField: { label: "Billing address", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Address` } } }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__LineItems`, gap: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(form.AppField, { name: "lineItems", mode: "array", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime338.jsxs)(VStack, { gap: "xs", align: "baseline", children: [
+      field.state.value.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime338.jsxs)(HStack, { gap: "xs", align: "end", className: `${INVOICE_FORM_CSS_PREFIX}__LineItem`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(form.AppField, { name: `lineItems[${index}].product`, children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(innerField.FormTextField, { slotProps: { BaseFormTextField: { label: "Product", showLabel: index === 0 } } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(form.AppField, { name: `lineItems[${index}].description`, children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(innerField.FormTextField, { slotProps: { BaseFormTextField: { label: "Description", showLabel: index === 0 } } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+          form.AppField,
+          {
+            name: `lineItems[${index}].quantity`,
+            listeners: {
+              onBlur: ({ value: quantity }) => {
+                const unitPrice = form.getFieldValue(`lineItems[${index}].unitPrice`);
+                const nextAmount = import_effect15.BigDecimal.multiply(convertCentsToBigDecimal(unitPrice), quantity);
+                form.setFieldValue(`lineItems[${index}].amount`, convertBigDecimalToCents(nextAmount));
+              }
+            },
+            children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(innerField.FormBigDecimalField, { slotProps: { BaseFormTextField: { label: "Quantity", showLabel: index === 0 } } })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+          form.AppField,
+          {
+            name: `lineItems[${index}].unitPrice`,
+            listeners: {
+              onBlur: ({ value: unitPrice }) => {
+                const quantity = form.getFieldValue(`lineItems[${index}].quantity`);
+                const nextAmount = import_effect15.BigDecimal.multiply(convertCentsToBigDecimal(unitPrice), quantity);
+                form.setFieldValue(`lineItems[${index}].amount`, convertBigDecimalToCents(nextAmount));
+              }
+            },
+            children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(innerField.FormCurrencyField, { slotProps: { BaseFormTextField: { label: "Rate", showLabel: index === 0 } } })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+          form.AppField,
+          {
+            name: `lineItems[${index}].amount`,
+            listeners: {
+              onBlur: ({ value: amount }) => {
+                const quantity = form.getFieldValue(`lineItems[${index}].quantity`);
+                let nextUnitPrice = BIG_DECIMAL_ZERO;
+                try {
+                  nextUnitPrice = import_effect15.BigDecimal.unsafeDivide(convertCentsToBigDecimal(amount), quantity);
+                } catch (e) {
+                }
+                form.setFieldValue(`lineItems[${index}].unitPrice`, convertBigDecimalToCents(nextUnitPrice));
+              }
+            },
+            children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(innerField.FormCurrencyField, { slotProps: { BaseFormTextField: { label: "Amount", showLabel: index === 0 } } })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(Button2, { variant: "outlined", icon: true, "aria-label": "Delete line item", onClick: () => field.removeValue(index), children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(import_lucide_react16.Trash, { size: 16 }) })
+      ] }, `lineItems[${index}]`)),
+      /* @__PURE__ */ (0, import_jsx_runtime338.jsxs)(Button2, { variant: "outlined", onClick: () => field.pushValue(EMPTY_LINE_ITEM), children: [
+        "Add line item",
+        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(import_lucide_react16.Plus, { size: 16 })
+      ] })
+    ] }) }) })
+  ] });
+};
+
+// src/components/DataPoint/DataPoint.tsx
+var import_jsx_runtime339 = require("react/jsx-runtime");
+var DataPoint = ({ label, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime339.jsxs)(VStack, { gap: "3xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(Span, { variant: "subtle", size: "xs", children: label }),
+    children
+  ] });
+};
+
+// src/components/Invoices/InvoiceStatusCell/InvoiceStatusCell.tsx
+var import_pluralize6 = __toESM(require("pluralize"));
+var import_jsx_runtime340 = require("react/jsx-runtime");
+var getDueStatusConfig = (invoice, { inline }) => {
+  const badgeSize = inline ? "xs" /* EXTRA_SMALL */ : "small" /* SMALL */;
+  const iconSize = inline ? 10 : 12;
+  switch (invoice.status) {
+    case "WRITTEN_OFF" /* WrittenOff */: {
+      return { text: "Written Off" };
+    }
+    case "PARTIALLY_WRITTEN_OFF" /* PartiallyWrittenOff */: {
+      return { text: "Partially Written Off" };
+    }
+    case "PAID" /* Paid */: {
+      return {
+        text: "Paid",
+        badge: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(Badge, { variant: "success" /* SUCCESS */, size: badgeSize, icon: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(CheckCircle_default, { size: iconSize }), iconOnly: true })
+      };
+    }
+    case "VOIDED" /* Voided */: {
+      return { text: "Voided" };
+    }
+    case "SENT" /* Sent */:
+    case "PARTIALLY_PAID" /* PartiallyPaid */: {
+      if (invoice.dueAt === null) {
+        return {
+          text: invoice.status === "PARTIALLY_PAID" /* PartiallyPaid */ ? "Partially Paid" : "Sent"
+        };
+      }
+      const dueDifference = getDueDifference(invoice.dueAt);
+      if (dueDifference === 0) {
+        return {
+          text: "Due Today"
+        };
+      }
+      if (dueDifference < 0) {
+        return {
+          text: "Overdue",
+          subText: `Due ${(0, import_pluralize6.default)("day", Math.abs(dueDifference), true)} ago`,
+          badge: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(Badge, { variant: "warning" /* WARNING */, size: badgeSize, icon: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(AlertCircle_default, { size: iconSize }), iconOnly: true })
+        };
+      }
+      return {
+        text: "Sent",
+        subText: `Due in ${(0, import_pluralize6.default)("day", Math.abs(dueDifference), true)}`
+      };
+    }
+    default: {
+      unsafeAssertUnreachable({
+        value: invoice.status,
+        message: "Unexpected invoice status"
+      });
+    }
+  }
+};
+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__ */ (0, import_jsx_runtime340.jsxs)(HStack, { gap: "xs", align: "center", children: [
+    dueStatus.badge,
+    /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)(Stack3, __spreadProps(__spreadValues({}, inline && { gap: "3xs", align: "center" }), { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(Span, { children: dueStatus.text }),
+      subText && /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(Span, { variant: "subtle", size: "sm", children: subText })
+    ] }))
+  ] });
+};
+
+// src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
+var import_jsx_runtime341 = require("react/jsx-runtime");
+var InvoiceDetail = (props) => {
+  const _a = props, { onSuccess: _onSuccess, onGoBack } = _a, restProps = __objRest(_a, ["onSuccess", "onGoBack"]);
+  const Header6 = (0, import_react231.useCallback)(() => {
+    return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(InvoiceDetailHeader, __spreadValues({}, restProps));
+  }, [restProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(BaseDetailView, { slots: { Header: Header6 }, name: "Invoice Detail View", onGoBack, children: [
+    restProps.mode === "Update" /* Update */ && /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(InvoiceDetailSubHeader, { invoice: restProps.invoice }),
+    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(InvoiceForm, __spreadValues({}, props))
+  ] });
+};
+var InvoiceDetailHeader = (props) => {
+  const { mode } = props;
+  if (mode === "Create" /* Create */) {
+    return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Heading2, { children: "Create Invoice" });
+  }
+  const invoice = props.invoice;
+  const { invoiceNumber } = invoice;
+  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Heading2, { children: invoiceNumber ? `Invoice ${invoiceNumber}` : "View Invoice" });
+};
+var InvoiceDetailSubHeader = ({ invoice }) => {
+  const { outstandingBalance, totalAmount } = invoice;
+  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(HStack, { className: "Layer__InvoiceDetail__SubHeader", children: /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(HStack, { gap: "5xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(DataPoint, { label: "Balance due", children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Span, { children: convertCentsToCurrency(outstandingBalance) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(DataPoint, { label: "Open balance", children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Span, { children: convertCentsToCurrency(totalAmount) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(DataPoint, { label: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(InvoiceStatusCell, { invoice, inline: true }) })
+  ] }) });
+};
+
+// src/components/Invoices/InvoicesTable/InvoicesTable.tsx
+var import_react236 = require("react");
+
+// src/features/invoices/api/useListInvoices.tsx
+var import_infinite7 = __toESM(require("swr/infinite"));
+var import_react232 = require("react");
+var import_lodash6 = __toESM(require_lodash());
+var import_effect17 = require("effect");
+
+// src/types/utility/pagination.ts
+var import_effect16 = require("effect");
+var PaginatedResponseMetaSchema = import_effect16.Schema.Struct({
+  cursor: import_effect16.Schema.NullOr(import_effect16.Schema.String),
+  hasMore: (0, import_effect16.pipe)(
+    import_effect16.Schema.propertySignature(import_effect16.Schema.Boolean),
+    import_effect16.Schema.fromKey("has_more")
+  ),
+  totalCount: (0, import_effect16.pipe)(
+    import_effect16.Schema.propertySignature(import_effect16.Schema.UndefinedOr(import_effect16.Schema.Number)),
+    import_effect16.Schema.fromKey("total_count")
   )
 });
 
 // src/features/invoices/api/useListInvoices.tsx
 var LIST_INVOICES_TAG_KEY = "#list-invoices";
-var ListInvoicesReturnSchema = import_effect11.Schema.Struct({
-  data: import_effect11.Schema.Array(InvoiceSchema),
-  meta: import_effect11.Schema.Struct({
+var ListInvoicesReturnSchema = import_effect17.Schema.Struct({
+  data: import_effect17.Schema.Array(InvoiceSchema),
+  meta: import_effect17.Schema.Struct({
     pagination: PaginatedResponseMetaSchema
   })
 });
@@ -37520,7 +38332,7 @@ function useListInvoices({
           showTotalCount: showTotalCount2
         }
       }
-    )().then(import_effect11.Schema.decodeUnknownPromise(ListInvoicesReturnSchema)),
+    )().then(import_effect17.Schema.decodeUnknownPromise(ListInvoicesReturnSchema)),
     {
       keepPreviousData: true,
       revalidateFirstPage: false,
@@ -37534,20 +38346,20 @@ function useListInvoices({
 var import_react_table2 = require("@tanstack/react-table");
 
 // src/components/DataTable/DataTable.tsx
-var import_react222 = require("react");
+var import_react234 = require("react");
 
 // src/components/ui/Table/Table.tsx
-var import_react221 = require("react");
-var import_react_aria_components14 = require("react-aria-components");
-var import_classnames88 = __toESM(require("classnames"));
-var import_jsx_runtime327 = require("react/jsx-runtime");
+var import_react233 = require("react");
+var import_react_aria_components18 = require("react-aria-components");
+var import_classnames90 = __toESM(require("classnames"));
+var import_jsx_runtime342 = require("react/jsx-runtime");
 var CSS_PREFIX2 = "Layer__UI__Table";
-var getClassName = (component, additionalClassNames) => (0, import_classnames88.default)(`${CSS_PREFIX2}-${component}`, additionalClassNames);
-var Table2 = (0, import_react221.forwardRef)(
+var getClassName = (component, additionalClassNames) => (0, import_classnames90.default)(`${CSS_PREFIX2}-${component}`, additionalClassNames);
+var Table2 = (0, import_react233.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
-      import_react_aria_components14.Table,
+    return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+      import_react_aria_components18.Table,
       __spreadProps(__spreadValues({
         className: getClassName("Table" /* Table */, className)
       }, restProps), {
@@ -37560,8 +38372,8 @@ var Table2 = (0, import_react221.forwardRef)(
 Table2.displayName = "Table" /* Table */;
 var TableHeaderInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
-    import_react_aria_components14.TableHeader,
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+    import_react_aria_components18.TableHeader,
     __spreadProps(__spreadValues({
       className: getClassName("TableHeader" /* TableHeader */, className)
     }, restProps), {
@@ -37570,12 +38382,12 @@ var TableHeaderInner = (_a, ref) => {
     })
   );
 };
-var TableHeader = (0, import_react221.forwardRef)(TableHeaderInner);
+var TableHeader = (0, import_react233.forwardRef)(TableHeaderInner);
 TableHeader.displayName = "TableHeader" /* TableHeader */;
 var TableBodyInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
-    import_react_aria_components14.TableBody,
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+    import_react_aria_components18.TableBody,
     __spreadProps(__spreadValues({
       className: getClassName("TableBody" /* TableBody */, className)
     }, restProps), {
@@ -37584,12 +38396,12 @@ var TableBodyInner = (_a, ref) => {
     })
   );
 };
-var TableBody2 = (0, import_react221.forwardRef)(TableBodyInner);
+var TableBody2 = (0, import_react233.forwardRef)(TableBodyInner);
 TableBody2.displayName = "TableBody" /* TableBody */;
 var RowInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
-    import_react_aria_components14.Row,
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+    import_react_aria_components18.Row,
     __spreadProps(__spreadValues({
       className: getClassName("Row" /* Row */, className)
     }, restProps), {
@@ -37598,14 +38410,14 @@ var RowInner = (_a, ref) => {
     })
   );
 };
-var Row2 = (0, import_react221.forwardRef)(RowInner);
+var Row2 = (0, import_react233.forwardRef)(RowInner);
 Row2.displayName = "Row" /* Row */;
-var Column = (0, import_react221.forwardRef)(
+var Column = (0, import_react233.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, textAlign = "left" } = _b, restProps = __objRest(_b, ["children", "className", "textAlign"]);
     const dataProperties = toDataProperties({ "text-align": textAlign });
-    return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
-      import_react_aria_components14.Column,
+    return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+      import_react_aria_components18.Column,
       __spreadProps(__spreadValues(__spreadValues({
         className: getClassName("Column" /* Column */, className)
       }, restProps), dataProperties), {
@@ -37616,11 +38428,11 @@ var Column = (0, import_react221.forwardRef)(
   }
 );
 Column.displayName = "Column" /* Column */;
-var Cell5 = (0, import_react221.forwardRef)(
+var Cell5 = (0, import_react233.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
-      import_react_aria_components14.Cell,
+    return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+      import_react_aria_components18.Cell,
       __spreadProps(__spreadValues({
         className: getClassName("Cell" /* Cell */, className)
       }, restProps), {
@@ -37633,7 +38445,7 @@ var Cell5 = (0, import_react221.forwardRef)(
 Cell5.displayName = "Cell" /* Cell */;
 
 // src/components/DataTable/DataTable.tsx
-var import_jsx_runtime328 = require("react/jsx-runtime");
+var import_jsx_runtime343 = require("react/jsx-runtime");
 var DataTable = ({
   columnConfig,
   data,
@@ -37643,19 +38455,20 @@ var DataTable = ({
   ariaLabel,
   slots
 }) => {
-  const columns2 = Object.values(columnConfig);
+  const columns = Object.values(columnConfig);
   const { EmptyState, ErrorState } = slots;
-  const renderTableBody = (0, import_react222.useMemo)(() => {
+  const isEmptyTable = (data == null ? void 0 : data.length) === 0;
+  const renderTableBody = (0, import_react234.useMemo)(() => {
     if (isError) {
-      return /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(Cell5, { colSpan: columns2.length, children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(ErrorState, {}) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(ErrorState, {}) }) });
     }
     if (isLoading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(Cell5, { colSpan: columns2.length, children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(Loader2, {}) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Loader2, {}) }) });
     }
-    if ((data == null ? void 0 : data.length) === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(Cell5, { colSpan: columns2.length, children: /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(EmptyState, {}) }) });
+    if (isEmptyTable) {
+      return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(EmptyState, {}) }) });
     }
-    const RowRenderer = (row) => /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(Row2, { children: columns2.map((col) => /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
+    const RowRenderer = (row) => /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Row2, { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
       Cell5,
       {
         className: `Layer__UI__Table-Cell__${componentName}--${col.id}`,
@@ -37665,16 +38478,16 @@ var DataTable = ({
     )) }, row.id);
     RowRenderer.displayName = "Row";
     return RowRenderer;
-  }, [isLoading, data, columns2, EmptyState, componentName]);
-  return /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)(Table2, { "aria-label": ariaLabel, className: `Layer__UI__Table__${componentName}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(TableHeader, { columns: columns2, children: ({ id, header, isRowHeader }) => /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(Column, { isRowHeader, className: `Layer__UI__Table-Column__${componentName}--${id}`, children: header }, id) }),
-    /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(TableBody2, { items: data, children: renderTableBody })
+  }, [isError, isLoading, isEmptyTable, columns, ErrorState, EmptyState, componentName]);
+  return /* @__PURE__ */ (0, import_jsx_runtime343.jsxs)(Table2, { "aria-label": ariaLabel, className: `Layer__UI__Table__${componentName}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(TableHeader, { columns, children: ({ id, header, isRowHeader }) => /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Column, { isRowHeader, className: `Layer__UI__Table-Column__${componentName}--${id}`, children: header }, id) }),
+    /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(TableBody2, { items: data, children: renderTableBody })
   ] });
 };
 
 // src/components/DataTable/PaginatedTable.tsx
-var import_react223 = require("react");
-var import_jsx_runtime329 = require("react/jsx-runtime");
+var import_react235 = require("react");
+var import_jsx_runtime344 = require("react/jsx-runtime");
 var EMPTY_ARRAY = [];
 function PaginatedTable({
   data,
@@ -37687,10 +38500,10 @@ function PaginatedTable({
   slots
 }) {
   const { pageSize = 20, hasMore, fetchMore } = paginationProps;
-  const [pagination, setPagination] = (0, import_react223.useState)({ pageIndex: 0, pageSize });
+  const [pagination, setPagination] = (0, import_react235.useState)({ pageIndex: 0, pageSize });
   const columnHelper = (0, import_react_table2.createColumnHelper)();
-  const columns2 = Object.values(columnConfig);
-  const columnDefs = columns2.map((col) => {
+  const columns = Object.values(columnConfig);
+  const columnDefs = columns.map((col) => {
     return columnHelper.display({
       id: col.id,
       header: () => col.header,
@@ -37707,12 +38520,12 @@ function PaginatedTable({
     autoResetPageIndex: false
   });
   const { rows } = table.getRowModel();
-  const rowData = (0, import_react223.useMemo)(() => rows.map((r) => r.original), [rows]);
-  const onPageChange = (0, import_react223.useCallback)((page) => {
+  const rowData = (0, import_react235.useMemo)(() => rows.map((r) => r.original), [rows]);
+  const onPageChange = (0, import_react235.useCallback)((page) => {
     table.setPageIndex(page - 1);
   }, [table]);
-  return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)(VStack, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(VStack, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
       DataTable,
       {
         ariaLabel,
@@ -37724,7 +38537,7 @@ function PaginatedTable({
         slots
       }
     ),
-    !isError && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
+    !isError && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
       Pagination,
       {
         currentPage: table.getState().pagination.pageIndex + 1,
@@ -37738,14 +38551,11 @@ function PaginatedTable({
   ] });
 }
 
-// src/components/Invoices/InvoicesTable.tsx
-var import_pluralize6 = __toESM(require("pluralize"));
-
 // src/icons/ChevronRightFill.tsx
-var import_jsx_runtime330 = require("react/jsx-runtime");
+var import_jsx_runtime345 = require("react/jsx-runtime");
 var ChevronRightFill = (_a) => {
   var _b = _a, { size = 18 } = _b, props = __objRest(_b, ["size"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime330.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -37755,8 +38565,8 @@ var ChevronRightFill = (_a) => {
       width: size,
       height: size,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime330.jsx)("path", { d: "M6.75 4.5L11.25 9L6.75 13.5", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("path", { d: "M6.75 4.5L11.25 9L6.75 13.5", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
           "path",
           {
             d: "M6.75 4.5L11.25 9L6.75 13.5Z",
@@ -37771,38 +38581,38 @@ var ChevronRightFill = (_a) => {
 };
 var ChevronRightFill_default = ChevronRightFill;
 
-// src/components/Invoices/InvoicesTable.tsx
-var import_lucide_react16 = require("lucide-react");
+// src/components/Invoices/InvoicesTable/InvoicesTable.tsx
+var import_lucide_react17 = require("lucide-react");
 
 // src/components/DataTable/DataTableHeader.tsx
-var import_jsx_runtime331 = require("react/jsx-runtime");
+var import_jsx_runtime346 = require("react/jsx-runtime");
 var DataTableHeader = ({ name, count, slotProps = {}, slots = {} }) => {
   const { showCount, totalCount } = count != null ? count : {};
   const { Filters: Filters2, HeaderActions, HeaderFilters } = slots;
-  return /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(VStack, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(HStack, { justify: "space-between", align: "center", className: "Layer__DataTableHeader__Header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(HStack, { pis: "md", align: "center", gap: "xl", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(HStack, { align: "center", gap: "sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(Span, { weight: "bold", size: "lg", children: name }),
-          showCount && (totalCount ? /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(Badge, { variant: "default" /* DEFAULT */, size: "medium" /* MEDIUM */, children: totalCount }) : /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(BadgeLoader, {}))
+  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(VStack, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(HStack, { justify: "space-between", align: "center", className: "Layer__DataTableHeader__Header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(HStack, { pis: "md", align: "center", gap: "xl", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(HStack, { align: "center", gap: "sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Span, { weight: "bold", size: "lg", children: name }),
+          showCount && (totalCount ? /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Badge, { variant: "default" /* DEFAULT */, size: "medium" /* MEDIUM */, children: totalCount }) : /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(BadgeLoader, {}))
         ] }),
-        HeaderFilters && /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(HeaderFilters, {})
+        HeaderFilters && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(HeaderFilters, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(HStack, { pie: "md", align: "center", gap: "3xs", children: [
-        slotProps.SearchField && /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(SearchField, __spreadValues({}, slotProps.SearchField)),
-        HeaderActions && /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(HeaderActions, {})
+      /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(HStack, { pie: "md", align: "center", gap: "3xs", children: [
+        slotProps.SearchField && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(SearchField, __spreadValues({}, slotProps.SearchField)),
+        HeaderActions && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(HeaderActions, {})
       ] })
     ] }),
-    Filters2 && /* @__PURE__ */ (0, import_jsx_runtime331.jsxs)(HStack, { pis: "md", pie: "md", justify: "space-between", align: "center", className: "Layer__DataTableHeader__Filters", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(Filters2, {}),
-      slotProps.ClearFiltersButton && /* @__PURE__ */ (0, import_jsx_runtime331.jsx)(Button2, __spreadProps(__spreadValues({ variant: "outlined" }, slotProps.ClearFiltersButton), { children: "Clear All Filters" }))
+    Filters2 && /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(HStack, { pis: "md", pie: "md", justify: "space-between", align: "center", className: "Layer__DataTableHeader__Filters", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Filters2, {}),
+      slotProps.ClearFiltersButton && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Button2, __spreadProps(__spreadValues({ variant: "outlined" }, slotProps.ClearFiltersButton), { children: "Clear All Filters" }))
     ] })
   ] });
 };
 
-// src/components/Invoices/InvoicesTable.tsx
+// src/components/Invoices/InvoicesTable/InvoicesTable.tsx
 var import_date_fns51 = require("date-fns");
-var import_jsx_runtime332 = require("react/jsx-runtime");
+var import_jsx_runtime347 = require("react/jsx-runtime");
 var COMPONENT_NAME10 = "InvoicesTable";
 var InvoiceStatusOptionConfig = {
   ["All" /* All */]: { label: "All", value: "All" /* All */ },
@@ -37823,12 +38633,12 @@ var AmountCell = ({ invoice }) => {
     case "WRITTEN_OFF" /* WrittenOff */:
     case "VOIDED" /* Voided */:
     case "SENT" /* Sent */: {
-      return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(VStack, { children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(Span, { align: "right", children: totalAmount }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(VStack, { children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(Span, { align: "right", children: totalAmount }) });
     }
     case "PARTIALLY_PAID" /* PartiallyPaid */: {
-      return /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)(VStack, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(Span, { align: "right", children: totalAmount }),
-        /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)(Span, { align: "right", variant: "subtle", size: "sm", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(VStack, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(Span, { align: "right", children: totalAmount }),
+        /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(Span, { align: "right", variant: "subtle", size: "sm", children: [
           outstandingBalance,
           " ",
           "outstanding"
@@ -37843,71 +38653,11 @@ var AmountCell = ({ invoice }) => {
     }
   }
 };
-var getDueStatusConfig = (invoice) => {
-  switch (invoice.status) {
-    case "WRITTEN_OFF" /* WrittenOff */: {
-      return { text: "Written Off" };
-    }
-    case "PARTIALLY_WRITTEN_OFF" /* PartiallyWrittenOff */: {
-      return { text: "Partially Written Off" };
-    }
-    case "PAID" /* Paid */: {
-      return {
-        text: "Paid",
-        badge: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(Badge, { variant: "success" /* SUCCESS */, size: "small" /* SMALL */, icon: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(CheckCircle_default, { size: 12 }), iconOnly: true })
-      };
-    }
-    case "VOIDED" /* Voided */: {
-      return { text: "Voided" };
-    }
-    case "SENT" /* Sent */:
-    case "PARTIALLY_PAID" /* PartiallyPaid */: {
-      if (invoice.dueAt === null) {
-        return {
-          text: invoice.status === "PARTIALLY_PAID" /* PartiallyPaid */ ? "Partially Paid" : "Sent"
-        };
-      }
-      const dueDifference = getDueDifference(invoice.dueAt);
-      if (dueDifference === 0) {
-        return {
-          text: "Due Today"
-        };
-      }
-      if (dueDifference < 0) {
-        return {
-          text: "Overdue",
-          subText: `Due ${(0, import_pluralize6.default)("day", Math.abs(dueDifference), true)} ago`,
-          badge: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(Badge, { variant: "warning" /* WARNING */, size: "small" /* SMALL */, icon: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(AlertCircle_default, { size: 12 }), iconOnly: true })
-        };
-      }
-      return {
-        text: "Sent",
-        subText: `Due in ${(0, import_pluralize6.default)("day", Math.abs(dueDifference), true)}`
-      };
-    }
-    default: {
-      unsafeAssertUnreachable({
-        value: invoice.status,
-        message: "Unexpected invoice status"
-      });
-    }
-  }
-};
-var StatusCell = ({ invoice }) => {
-  const dueStatus = getDueStatusConfig(invoice);
-  return /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)(HStack, { gap: "xs", align: "center", children: [
-    dueStatus.badge,
-    /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)(VStack, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(Span, { children: dueStatus.text }),
-      /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(Span, { variant: "subtle", size: "sm", children: dueStatus.subText })
-    ] })
-  ] });
-};
-var getCustomerName = (invoice) => {
+var getCustomerName2 = (invoice) => {
   const { recipientName, customer } = invoice;
   return recipientName || (customer == null ? void 0 : customer.individualName) || (customer == null ? void 0 : customer.companyName);
 };
-var columns = {
+var getColumnConfig = (onSelectInvoice) => ({
   ["SentAt" /* SentAt */]: {
     id: "SentAt" /* SentAt */,
     header: "Sent Date",
@@ -37922,35 +38672,35 @@ var columns = {
   ["Customer" /* Customer */]: {
     id: "Customer" /* Customer */,
     header: "Customer",
-    cell: (row) => getCustomerName(row)
+    cell: (row) => getCustomerName2(row)
   },
   ["Total" /* Total */]: {
     id: "Total" /* Total */,
     header: "Amount",
-    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(AmountCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(AmountCell, { invoice: row })
   },
   ["Status" /* Status */]: {
     id: "Status" /* Status */,
     header: "Status",
-    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(StatusCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(InvoiceStatusCell, { invoice: row })
   },
   ["Expand" /* Expand */]: {
     id: "Expand" /* Expand */,
-    cell: (_row) => /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(Button2, { inset: true, icon: true, "aria-label": "View invoice", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(ChevronRightFill_default, {}) })
+    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(Button2, { inset: true, icon: true, onPress: () => onSelectInvoice(row), "aria-label": "View invoice", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(ChevronRightFill_default, {}) })
   }
-};
-var unpaidStatuses = ["SENT" /* Sent */, "PARTIALLY_PAID" /* PartiallyPaid */];
+});
+var UNPAID_STATUSES2 = ["SENT" /* Sent */, "PARTIALLY_PAID" /* PartiallyPaid */];
 var getListInvoiceParams = ({ statusFilter }) => {
   if (!statusFilter) return {};
   switch (statusFilter) {
     case "All" /* All */:
       return {};
     case "Unpaid" /* Unpaid */:
-      return { status: unpaidStatuses };
+      return { status: UNPAID_STATUSES2 };
     case "Overdue" /* Overdue */:
-      return { status: unpaidStatuses, dueAtEnd: (0, import_date_fns51.endOfYesterday)() };
+      return { status: UNPAID_STATUSES2, dueAtEnd: (0, import_date_fns51.endOfYesterday)() };
     case "Sent" /* Sent */:
-      return { status: unpaidStatuses, dueAtStart: (0, import_date_fns51.startOfToday)() };
+      return { status: UNPAID_STATUSES2, dueAtStart: (0, import_date_fns51.startOfToday)() };
     case "Paid" /* Paid */:
       return { status: ["PAID" /* Paid */, "PARTIALLY_WRITTEN_OFF" /* PartiallyWrittenOff */] };
     case "Written Off" /* WrittenOff */:
@@ -37964,9 +38714,9 @@ var getListInvoiceParams = ({ statusFilter }) => {
       });
   }
 };
-var InvoicesTable = () => {
-  const [selectedInvoiceStatusOption, setSelectedInvoiceStatusOption] = (0, import_react224.useState)(ALL_OPTION);
-  const listInvoiceParams = (0, import_react224.useMemo)(
+var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
+  const [selectedInvoiceStatusOption, setSelectedInvoiceStatusOption] = (0, import_react236.useState)(ALL_OPTION);
+  const listInvoiceParams = (0, import_react236.useMemo)(
     () => getListInvoiceParams({ statusFilter: selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.value }),
     [selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.value]
   );
@@ -37974,25 +38724,25 @@ var InvoicesTable = () => {
   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 = (0, import_react224.useCallback)(() => {
+  const fetchMore = (0, import_react236.useCallback)(() => {
     if (hasMore) {
       void setSize(size + 1);
     }
   }, [hasMore, setSize, size]);
-  const paginationProps = (0, import_react224.useMemo)(() => {
+  const paginationProps = (0, import_react236.useMemo)(() => {
     return {
       pageSize: 10,
       hasMore,
       fetchMore
     };
   }, [fetchMore, hasMore]);
-  const options = (0, import_react224.useMemo)(() => Object.values(InvoiceStatusOptionConfig), []);
-  const SelectedValue = (0, import_react224.useMemo)(() => {
+  const options = (0, import_react236.useMemo)(() => Object.values(InvoiceStatusOptionConfig), []);
+  const SelectedValue = (0, import_react236.useMemo)(() => {
     const label = selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.label;
     return label ? `Status: ${label}` : "Status";
   }, [selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.label]);
-  const StatusFilter = (0, import_react224.useCallback)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+  const StatusFilter = (0, import_react236.useCallback)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
       ComboBox,
       {
         className: "Layer__InvoicesTable__StatusFilter",
@@ -38008,27 +38758,27 @@ var InvoicesTable = () => {
     ),
     [SelectedValue, options, selectedInvoiceStatusOption]
   );
-  const CreateInvoiceButton = (0, import_react224.useCallback)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)(Button2, { children: [
+  const CreateInvoiceButton = (0, import_react236.useCallback)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(Button2, { onPress: onCreateInvoice, children: [
       "Create Invoice",
-      /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(import_lucide_react16.Plus, { size: 16 })
+      /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(import_lucide_react17.Plus, { size: 16 })
     ] }),
-    []
+    [onCreateInvoice]
   );
-  const InvoicesTableEmptyState = (0, import_react224.useCallback)(() => {
+  const InvoicesTableEmptyState = (0, import_react236.useCallback)(() => {
     const isFiltered = selectedInvoiceStatusOption && selectedInvoiceStatusOption !== ALL_OPTION;
-    return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
       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__ */ (0, import_jsx_runtime332.jsx)(import_lucide_react16.Search, {}) : /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(import_lucide_react16.HandCoins, {}),
+        icon: isFiltered ? /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(import_lucide_react17.Search, {}) : /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(import_lucide_react17.HandCoins, {}),
         spacing: true
       }
     );
   }, [selectedInvoiceStatusOption]);
-  const InvoicesTableErrorState = (0, import_react224.useCallback)(() => /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+  const InvoicesTableErrorState = (0, import_react236.useCallback)(() => /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
     DataState,
     {
       status: "failed" /* failed */,
@@ -38040,8 +38790,9 @@ var InvoicesTable = () => {
       spacing: true
     }
   ), [refetch]);
-  return /* @__PURE__ */ (0, import_jsx_runtime332.jsxs)(Container, { name: "InvoicesTable", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+  const columnConfig = (0, import_react236.useMemo)(() => getColumnConfig(onSelectInvoice), [onSelectInvoice]);
+  return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(Container, { name: "InvoicesTable", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
       DataTableHeader,
       {
         name: "Invoices",
@@ -38051,14 +38802,14 @@ var InvoicesTable = () => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
       PaginatedTable,
       {
         ariaLabel: "Invoices",
         data: invoices,
         isLoading: data === void 0 || isLoading,
         isError,
-        columnConfig: columns,
+        columnConfig,
         paginationProps,
         componentName: COMPONENT_NAME10,
         slots: {
@@ -38071,28 +38822,38 @@ var InvoicesTable = () => {
 };
 
 // src/components/Invoices/Invoices.tsx
-var import_jsx_runtime333 = require("react/jsx-runtime");
+var import_jsx_runtime348 = require("react/jsx-runtime");
 var unstable_Invoices = ({
   showTitle = true,
   stringOverrides
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+  const [invoiceFormMode, setInvoiceFormMode] = (0, import_react237.useState)(null);
+  const goBackToInvoicesTable = (0, import_react237.useCallback)(() => {
+    setInvoiceFormMode(null);
+  }, []);
+  const onCreateInvoice = (0, import_react237.useCallback)(() => {
+    setInvoiceFormMode({ mode: "Create" /* Create */ });
+  }, []);
+  const onSelectInvoice = (0, import_react237.useCallback)((invoice) => {
+    setInvoiceFormMode({ mode: "Update" /* Update */, invoice });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
     View,
     {
       title: (stringOverrides == null ? void 0 : stringOverrides.title) || "Invoices",
       showHeader: showTitle,
-      children: /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(InvoicesTable, {})
+      children: invoiceFormMode !== null ? /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(InvoiceDetail, __spreadProps(__spreadValues({}, invoiceFormMode), { onGoBack: goBackToInvoicesTable })) : /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(InvoicesTable, { onCreateInvoice, onSelectInvoice })
     }
   );
 };
 
 // src/providers/BankTransactionsProvider/BankTransactionsProvider.tsx
-var import_jsx_runtime334 = require("react/jsx-runtime");
+var import_jsx_runtime349 = require("react/jsx-runtime");
 var BankTransactionsProvider = ({
   children
 }) => {
   const bankTransactionsContextData = useAugmentedBankTransactions();
-  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {