@layerfi/components 0.1.106-alpha → 0.1.106

package/dist/esm/index.mjs

@@ -5570,7 +5570,7 @@ import { useState as useState5 } from "react";
 import { useReducer, useEffect as useEffect2 } from "react";
 
 // package.json
-var version = "0.1.106-alpha";
+var version = "0.1.106";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -7045,19 +7045,12 @@ import { SWRConfig } from "swr";
 
 // src/providers/GlobalDateStore/GlobalDateStoreProvider.tsx
 import {
-  addDays,
-  differenceInDays as differenceInDays2,
-  differenceInMonths,
   endOfDay,
   endOfMonth,
   endOfYear,
   min,
-  startOfDay,
   startOfMonth,
-  startOfYear,
-  subDays,
-  subMonths,
-  subYears
+  startOfYear
 } from "date-fns";
 import { useState as useState4, createContext as createContext5, useContext as useContext6 } from "react";
 import { createStore, useStore } from "zustand";
@@ -7099,48 +7092,28 @@ var _RANGE_PICKER_MODES = [
 var isDateRangePickerMode = (mode) => {
   return _RANGE_PICKER_MODES.includes(mode);
 };
-function startOfNextDay(date) {
-  return startOfDay(addDays(date, 1));
-}
 function clampToPresentOrPast(date, cutoff = endOfDay(/* @__PURE__ */ new Date())) {
   return 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 }) => startOfMonth(start),
+    getEnd: ({ end }) => clampToPresentOrPast(endOfDay(end))
+  },
   dayRangePicker: {
     getStart: ({ start }) => start,
-    getShiftedStart: withShiftedEnd(({ currentStart, shiftedCurrentEnd, shiftedNewEnd }) => {
-      const fullDayCount = differenceInDays2(shiftedCurrentEnd, currentStart);
-      return subDays(shiftedNewEnd, fullDayCount);
-    }),
     getEnd: ({ end }) => clampToPresentOrPast(endOfDay(end))
   },
   monthPicker: {
     getStart: ({ start }) => startOfMonth(start),
-    getShiftedStart: withShiftedEnd(({ shiftedNewEnd }) => {
-      return subMonths(shiftedNewEnd, 1);
-    }),
     getEnd: ({ end }) => clampToPresentOrPast(endOfMonth(end))
   },
   monthRangePicker: {
     getStart: ({ start }) => startOfMonth(start),
-    getShiftedStart: withShiftedEnd(({ currentStart, shiftedCurrentEnd, shiftedNewEnd }) => {
-      const fullMonthCount = differenceInMonths(shiftedCurrentEnd, currentStart);
-      return subMonths(shiftedNewEnd, fullMonthCount);
-    }),
     getEnd: ({ end }) => clampToPresentOrPast(endOfMonth(end))
   },
   yearPicker: {
     getStart: ({ start }) => startOfYear(start),
-    getShiftedStart: withShiftedEnd(({ shiftedNewEnd }) => {
-      return subYears(shiftedNewEnd, 1);
-    }),
     getEnd: ({ end }) => clampToPresentOrPast(endOfYear(end))
   }
 };
@@ -7156,6 +7129,12 @@ function withCorrectedRange(fn) {
 function buildStore() {
   const now = /* @__PURE__ */ new Date();
   return 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 }),
@@ -7183,9 +7162,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;
@@ -7200,8 +7182,8 @@ function buildStore() {
           break;
         default:
           safeAssertUnreachable({
-            value: rangeDisplayMode,
-            message: "Invalid `rangeDisplayMode`"
+            value: displayMode,
+            message: "Invalid `displayMode`"
           });
       }
     };
@@ -7209,22 +7191,7 @@ function buildStore() {
       start: startOfMonth(now),
       end: clampToPresentOrPast(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,
@@ -12317,8 +12284,7 @@ var LinkedAccountsContent = ({
   asWidget,
   showLedgerBalance,
   showUnlinkItem,
-  showBreakConnection,
-  showAddAccount
+  showBreakConnection
 }) => {
   const { data, addConnection } = useContext13(LinkedAccountsContext);
   const linkedAccountsNewAccountClassName = classNames25(
@@ -12341,7 +12307,7 @@ var LinkedAccountsContent = ({
         },
         index
       )),
-      showAddAccount && /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx78(
         "div",
         {
           role: "button",
@@ -12818,9 +12784,9 @@ import {
   startOfMonth as startOfMonth4,
   startOfQuarter,
   startOfYear as startOfYear2,
-  subMonths as subMonths2,
+  subMonths,
   subQuarters,
-  subYears as subYears2
+  subYears
 } from "date-fns";
 import { Fragment as Fragment13, jsx as jsx89 } from "react/jsx-runtime";
 var DatePickerOptions = ({
@@ -12832,8 +12798,8 @@ var DatePickerOptions = ({
     },
     {
       label: "Last month",
-      startDate: startOfMonth4(subMonths2(/* @__PURE__ */ new Date(), 1)),
-      endDate: endOfMonth3(subMonths2(/* @__PURE__ */ new Date(), 1))
+      startDate: startOfMonth4(subMonths(/* @__PURE__ */ new Date(), 1)),
+      endDate: endOfMonth3(subMonths(/* @__PURE__ */ new Date(), 1))
     },
     {
       label: "This quarter",
@@ -12852,8 +12818,8 @@ var DatePickerOptions = ({
     },
     {
       label: "Last year",
-      startDate: startOfYear2(subYears2(/* @__PURE__ */ new Date(), 1)),
-      endDate: endOfYear2(subYears2(/* @__PURE__ */ new Date(), 1))
+      startDate: startOfYear2(subYears(/* @__PURE__ */ new Date(), 1)),
+      endDate: endOfYear2(subYears(/* @__PURE__ */ new Date(), 1))
     }
   ],
   setSelectedDate
@@ -12916,6 +12882,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,
@@ -12923,7 +12908,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,
@@ -13228,7 +13213,7 @@ var DatePicker = (_a) => {
 };
 
 // src/components/LinkedAccounts/AccountFormBox/AccountFormBox.tsx
-import { isEqual, startOfDay as startOfDay2 } from "date-fns";
+import { isEqual, startOfDay } from "date-fns";
 import { jsx as jsx91, jsxs as jsxs54 } from "react/jsx-runtime";
 var CLASS_NAME5 = "Layer__caobfb";
 var AccountFormBox = ({
@@ -13289,7 +13274,7 @@ var AccountFormBox = ({
                 onChange(__spreadProps(__spreadValues({}, value), { openingDate: v }));
               }
             },
-            selected: (_e = value.openingDate) != null ? _e : startOfDay2(/* @__PURE__ */ new Date()),
+            selected: (_e = value.openingDate) != null ? _e : startOfDay(/* @__PURE__ */ new Date()),
             currentDateOption: false,
             disabled: !disableConfirmExclude && !value.isConfirmed
           }
@@ -13647,11 +13632,10 @@ var LinkedAccounts = (props) => {
 };
 var LinkedAccountsComponent = ({
   asWidget,
-  elevated,
+  elevated = false,
   showLedgerBalance = true,
   showUnlinkItem = false,
   showBreakConnection = false,
-  showAddAccount = true,
   stringOverrides
 }) => {
   const {
@@ -13686,8 +13670,7 @@ var LinkedAccountsComponent = ({
         asWidget,
         showLedgerBalance,
         showUnlinkItem,
-        showBreakConnection,
-        showAddAccount
+        showBreakConnection
       }
     ) : null,
     /* @__PURE__ */ jsx93(OpeningBalanceModal, {})
@@ -16492,6 +16475,7 @@ function buildCustomPlaceholder({ placeholder }) {
     } = _b, restProps = __objRest(_b, [
       "children"
     ]);
+    if (!placeholder) return null;
     return /* @__PURE__ */ jsx118(
       components4.Placeholder,
       __spreadProps(__spreadValues({}, restProps), {
@@ -21632,7 +21616,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 = useMemo30(
+  const columns = useMemo30(
     () => {
       const columnDefs = [{
         id: "row",
@@ -21686,7 +21670,7 @@ function ValidateCsvTable({ data, headers, formatters: formatters2, className })
   }), []);
   const table = useReactTable({
     data,
-    columns: columns2,
+    columns,
     state,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel()
@@ -22945,12 +22929,11 @@ var Integrations = (props) => {
   return /* @__PURE__ */ jsx189(QuickbooksContextProvider, { children: /* @__PURE__ */ jsx189(IntegrationsComponent, __spreadValues({}, props)) });
 };
 var IntegrationsComponent = ({
-  elevated,
   stringOverrides
 }) => {
   const { quickbooksConnectionStatus } = useContext30(QuickbooksContext);
   const isLoading = quickbooksConnectionStatus === void 0;
-  return /* @__PURE__ */ jsxs122(Container, { name: COMPONENT_NAME3, elevated, children: [
+  return /* @__PURE__ */ jsxs122(Container, { name: COMPONENT_NAME3, children: [
     /* @__PURE__ */ jsxs122(Header, { className: "Layer__linked-accounts__header", children: [
       /* @__PURE__ */ jsx189(
         Heading,
@@ -23282,6 +23265,7 @@ var defaultModeByReport = {
 };
 var ReportsModeStoreContext = createContext18(
   createStore3(() => ({
+    resetPnLModeToDefaultOnMount: true,
     modeByReport: {},
     actions: {
       setModeForReport: () => {
@@ -23289,6 +23273,10 @@ var ReportsModeStoreContext = createContext18(
     }
   }))
 );
+function useReportModeStore() {
+  const store = useContext31(ReportsModeStoreContext);
+  return useStore4(store);
+}
 function useReportMode(report) {
   const store = useContext31(ReportsModeStoreContext);
   return useStore4(store, (state) => state.modeByReport[report]);
@@ -23304,11 +23292,13 @@ function useReportModeWithFallback(report, fallback) {
 }
 function ReportsModeStoreProvider({
   children,
-  initialModes
+  initialModes,
+  resetPnLModeToDefaultOnMount = true
 }) {
   const [store] = useState50(
     () => createStore3((set2) => ({
       modeByReport: __spreadValues(__spreadValues({}, defaultModeByReport), initialModes),
+      resetPnLModeToDefaultOnMount,
       actions: {
         setModeForReport: (report, mode) => set2((state) => ({
           modeByReport: __spreadProps(__spreadValues({}, state.modeByReport), {
@@ -23488,7 +23478,7 @@ var useProfitAndLoss = ({
 import { useMemo as useMemo36, useState as useState52 } from "react";
 
 // src/hooks/useProfitAndLossComparison/utils.ts
-import { getMonth, getYear as getYear2, startOfMonth as startOfMonth9, startOfYear as startOfYear4, subMonths as subMonths3, subYears as subYears3 } from "date-fns";
+import { getMonth, getYear as getYear2, startOfMonth as startOfMonth9, startOfYear as startOfYear4, subMonths as subMonths2, subYears as subYears2 } from "date-fns";
 
 // src/utils/array/range.ts
 function range2(start, end) {
@@ -23548,7 +23538,7 @@ function prepareFiltersBody(compareOptions) {
 function preparePeriodsBodyForMonths(dateRange, comparePeriods) {
   const adjustedStartDate = startOfMonth9(dateRange.startDate);
   const rawPeriods = range2(0, comparePeriods).map((index) => {
-    const currentPeriod = subMonths3(adjustedStartDate, index);
+    const currentPeriod = subMonths2(adjustedStartDate, index);
     return {
       year: getYear2(currentPeriod),
       month: getMonth(currentPeriod) + 1
@@ -23571,7 +23561,7 @@ function preparePeriodsBodyForMonths(dateRange, comparePeriods) {
 function preparePeriodsBodyForYears(dateRange, comparePeriods) {
   const adjustedStartDate = startOfYear4(dateRange.startDate);
   const rawPeriods = range2(0, comparePeriods).map((index) => {
-    const currentPeriod = subYears3(adjustedStartDate, index);
+    const currentPeriod = subYears2(adjustedStartDate, index);
     return {
       year: getYear2(currentPeriod)
     };
@@ -23833,7 +23823,7 @@ var Indicator = ({
 import classNames61 from "classnames";
 import {
   add,
-  differenceInMonths as differenceInMonths2,
+  differenceInMonths,
   endOfMonth as endOfMonth8,
   format as format3,
   startOfMonth as startOfMonth10,
@@ -23863,22 +23853,22 @@ var getChartWindow = ({
   const today = startOfMonth10(Date.now());
   const yearAgo = sub2(today, { months: 11 });
   const current = startOfMonth10(new Date(currentYear, currentMonth - 1, 1));
-  if (differenceInMonths2(startOfMonth10(chartWindow.start), current) < 0 && differenceInMonths2(startOfMonth10(chartWindow.end), current) > 1) {
+  if (differenceInMonths(startOfMonth10(chartWindow.start), current) < 0 && differenceInMonths(startOfMonth10(chartWindow.end), current) > 1) {
     return chartWindow;
   }
-  if (differenceInMonths2(startOfMonth10(chartWindow.start), current) === 0) {
+  if (differenceInMonths(startOfMonth10(chartWindow.start), current) === 0) {
     return {
       start: startOfMonth10(sub2(current, { months: 1 })),
       end: endOfMonth8(add(current, { months: 11 }))
     };
   }
-  if (differenceInMonths2(endOfMonth8(chartWindow.end), endOfMonth8(current)) === 1 && differenceInMonths2(today, current) >= 1) {
+  if (differenceInMonths(endOfMonth8(chartWindow.end), endOfMonth8(current)) === 1 && differenceInMonths(today, current) >= 1) {
     return {
       start: startOfMonth10(sub2(current, { months: 10 })),
       end: endOfMonth8(add(current, { months: 2 }))
     };
   }
-  if (differenceInMonths2(current, startOfMonth10(chartWindow.end)) === 0 && differenceInMonths2(current, startOfMonth10(today)) > 0) {
+  if (differenceInMonths(current, startOfMonth10(chartWindow.end)) === 0 && differenceInMonths(current, startOfMonth10(today)) > 0) {
     return {
       start: startOfMonth10(sub2(current, { months: 11 })),
       end: endOfMonth8(add(current, { months: 1 }))
@@ -23896,7 +23886,7 @@ var getChartWindow = ({
       end: endOfMonth8(current)
     };
   }
-  if (differenceInMonths2(current, startOfMonth10(chartWindow.start)) < 0) {
+  if (differenceInMonths(current, startOfMonth10(chartWindow.start)) < 0) {
     return {
       start: startOfMonth10(current),
       end: endOfMonth8(add(current, { months: 11 }))
@@ -24069,16 +24059,16 @@ var ProfitAndLossChart = ({
       }
       return x;
     })) == null ? void 0 : _a.filter(
-      (x) => differenceInMonths2(
+      (x) => differenceInMonths(
         startOfMonth10(new Date(x.year, x.month - 1, 1)),
         chartWindow.start
-      ) >= 0 && differenceInMonths2(
+      ) >= 0 && differenceInMonths(
         startOfMonth10(new Date(x.year, x.month - 1, 1)),
         chartWindow.start
-      ) < 12 && differenceInMonths2(
+      ) < 12 && differenceInMonths(
         chartWindow.end,
         startOfMonth10(new Date(x.year, x.month - 1, 1))
-      ) >= 0 && differenceInMonths2(
+      ) >= 0 && differenceInMonths(
         chartWindow.end,
         startOfMonth10(new Date(x.year, x.month - 1, 1))
       ) <= 12
@@ -24724,21 +24714,11 @@ function useGlobalDateRangePicker({ displayMode, setDisplayMode }) {
       setDisplayMode(newMode);
     }
   }, [setDisplayMode]);
-  const { dateFormat, dateOrDateRange } = useMemo39(() => {
+  const dateOrDateRange = useMemo39(() => {
     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,
@@ -24747,10 +24727,9 @@ function useGlobalDateRangePicker({ displayMode, setDisplayMode }) {
   const onChangeDateOrDateRange = useCallback32((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,
@@ -24768,24 +24747,24 @@ var ProfitAndLossDatePicker = ({
   const isMounted = useRef25(false);
   const { business } = useLayerContext();
   const displayMode = useReportModeWithFallback("ProfitAndLoss" /* ProfitAndLoss */, "monthPicker");
+  const { resetPnLModeToDefaultOnMount } = useReportModeStore();
   const { setModeForReport } = useReportModeActions();
   const setDisplayMode = useCallback33((mode) => {
     setModeForReport("ProfitAndLoss" /* ProfitAndLoss */, mode);
   }, [setModeForReport]);
   useEffect27(() => {
     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__ */ jsx197(
@@ -24799,7 +24778,6 @@ var ProfitAndLossDatePicker = ({
       slots: {
         ModeSelector: DatePickerModeSelector
       },
-      dateFormat,
       customDateRanges,
       minDate
     }
@@ -26329,7 +26307,7 @@ var useTableExpandRow = () => {
 };
 
 // src/utils/profitAndLossComparisonUtils.ts
-import { format as format5, subMonths as subMonths4, subYears as subYears4 } from "date-fns";
+import { format as format5, subMonths as subMonths3, subYears as subYears3 } from "date-fns";
 var generateComparisonPeriods = (startDate, numberOfPeriods, rangeDisplayMode) => {
   switch (rangeDisplayMode) {
     case "yearPicker":
@@ -26340,13 +26318,13 @@ var generateComparisonPeriods = (startDate, numberOfPeriods, rangeDisplayMode) =
 };
 var generateComparisonMonths = (startDate, numberOfMonths) => {
   return Array.from({ length: numberOfMonths }, (_, index) => {
-    const currentMonth = subMonths4(startDate, numberOfMonths - index - 1);
+    const currentMonth = subMonths3(startDate, numberOfMonths - index - 1);
     return { date: currentMonth, label: format5(currentMonth, "MMM") };
   });
 };
 var generateComparisonYears = (startDate, numberOfYears) => {
   return Array.from({ length: numberOfYears }, (_, index) => {
-    const currentMonth = subYears4(startDate, numberOfYears - index - 1);
+    const currentMonth = subYears3(startDate, numberOfYears - index - 1);
     return { date: currentMonth, label: format5(currentMonth, "yyyy") };
   });
 };
@@ -27550,7 +27528,6 @@ function StatementOfCashFlowDatePicker({
     setModeForReport("StatementOfCashFlows" /* StatementOfCashFlows */, mode);
   }, [setModeForReport]);
   const {
-    dateFormat,
     rangeDisplayMode,
     onChangeMode,
     dateOrDateRange,
@@ -27569,7 +27546,6 @@ function StatementOfCashFlowDatePicker({
       slots: {
         ModeSelector: DatePickerModeSelector
       },
-      dateFormat,
       customDateRanges,
       minDate
     }
@@ -29614,7 +29590,7 @@ var DetailsListItem = ({
 }) => {
   return /* @__PURE__ */ jsxs157("li", { className: "Layer__details-list-item", children: [
     /* @__PURE__ */ jsx249("label", { className: "Layer__details-list-item__label", children: label }),
-    /* @__PURE__ */ jsx249("span", { className: "Layer__details-list-item__value", children: isLoading ? /* @__PURE__ */ jsx249(SkeletonLoader, {}) : renderValue(children) })
+    /* @__PURE__ */ jsx249("div", { className: "Layer__details-list-item__value", children: isLoading ? /* @__PURE__ */ jsx249(SkeletonLoader, {}) : renderValue(children) })
   ] });
 };
 
@@ -30734,7 +30710,10 @@ var JournalEntryDetails = () => {
     /* @__PURE__ */ jsxs161(
       DetailsList,
       {
-        title: `Journal Entry ${entry ? entryNumber(entry) : ""}`,
+        title: /* @__PURE__ */ jsxs161(VStack, { children: [
+          /* @__PURE__ */ jsx254(Span, { children: "Journal Entry" }),
+          entry && /* @__PURE__ */ jsx254(Span, { variant: "subtle", size: "xs", children: `Journal ID #${entryNumber(entry)}` })
+        ] }),
         className: "Layer__border-top",
         children: [
           /* @__PURE__ */ jsx254(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry, children: humanizeEnum((_c = entry == null ? void 0 : entry.entry_type) != null ? _c : "") }),
@@ -34548,7 +34527,6 @@ var BookkeepingOverview = ({
               {
                 name: "bookkeeping-overview-profit-and-loss",
                 asWidget: true,
-                elevated: true,
                 style: {
                   position: "relative",
                   zIndex: 2
@@ -34686,7 +34664,6 @@ var AccountingOverview = ({
               {
                 name: "accounting-overview-profit-and-loss",
                 asWidget: true,
-                elevated: true,
                 children: [
                   /* @__PURE__ */ jsx301(
                     ProfitAndLoss.Header,
@@ -34773,7 +34750,7 @@ var BankTransactionsWithLinkedAccounts = ({
   title,
   // deprecated
   showTitle = true,
-  elevatedLinkedAccounts = true,
+  elevatedLinkedAccounts = false,
   mode,
   showBreakConnection = false,
   showCustomerVendor = false,
@@ -34784,7 +34761,6 @@ var BankTransactionsWithLinkedAccounts = ({
   showTooltips = false,
   showUnlinkItem = false,
   showUploadOptions = false,
-  showAddAccount = true,
   mobileComponent,
   stringOverrides
 }) => {
@@ -34801,7 +34777,6 @@ var BankTransactionsWithLinkedAccounts = ({
             showLedgerBalance,
             showUnlinkItem,
             showBreakConnection,
-            showAddAccount,
             stringOverrides: stringOverrides == null ? void 0 : stringOverrides.linkedAccounts
           }
         ),
@@ -36085,7 +36060,7 @@ var BillSummaryPaid = ({ bill }) => {
 
 // src/components/Bills/BillSummaryUnpaid.tsx
 import { useMemo as useMemo68 } from "react";
-import { differenceInDays as differenceInDays3, parseISO as parseISO17 } from "date-fns";
+import { differenceInDays as differenceInDays2, parseISO as parseISO17 } from "date-fns";
 import { jsx as jsx313, jsxs as jsxs202 } from "react/jsx-runtime";
 function buildDifference(due_at) {
   const d = parseISO17(due_at).setHours(0, 0, 0, 0);
@@ -36093,7 +36068,7 @@ function buildDifference(due_at) {
     return { text: "" };
   }
   const today = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0);
-  const daysDiff = differenceInDays3(today, d);
+  const daysDiff = differenceInDays2(today, d);
   if (daysDiff === 0) {
     return {
       text: "Due today",
@@ -36512,7 +36487,7 @@ import { Fragment as Fragment53 } from "react";
 
 // src/components/DueStatus/DueStatus.tsx
 import { useMemo as useMemo69 } from "react";
-import { parseISO as parseISO19, differenceInDays as differenceInDays4 } from "date-fns";
+import { parseISO as parseISO19, differenceInDays as differenceInDays3 } from "date-fns";
 import { jsx as jsx316, jsxs as jsxs204 } from "react/jsx-runtime";
 var dueStatusTitle = (daysDiff, paid) => {
   if (paid && daysDiff > 0) {
@@ -36573,7 +36548,7 @@ var getDiff = (refDate) => {
     return null;
   }
   const today = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0);
-  return differenceInDays4(today, d);
+  return differenceInDays3(today, d);
 };
 var DueStatus = ({ dueDate, paidAt, size = "md" }) => {
   const date = useMemo69(() => {
@@ -37156,7 +37131,7 @@ var Reports = ({
             onChange: (opt) => setActiveTab(opt.target.value)
           }
         ) }),
-        /* @__PURE__ */ jsx324(Container, { name: "reports", ref: containerRef, children: /* @__PURE__ */ jsx324(ReportsModeStoreProvider, { initialModes, children: /* @__PURE__ */ jsx324(ProfitAndLoss, { asContainer: false, comparisonConfig, withReportsModeProvider: false, children: /* @__PURE__ */ jsx324(
+        /* @__PURE__ */ jsx324(Container, { name: "reports", ref: containerRef, children: /* @__PURE__ */ jsx324(ReportsModeStoreProvider, { initialModes, resetPnLModeToDefaultOnMount: false, children: /* @__PURE__ */ jsx324(ProfitAndLoss, { asContainer: false, comparisonConfig, withReportsModeProvider: false, children: /* @__PURE__ */ jsx324(
           ReportsPanel,
           {
             openReport: activeTab,
@@ -37292,31 +37267,393 @@ var Components = ({
   ] });
 };
 
-// src/components/Invoices/InvoicesTable.tsx
-import { useCallback as useCallback50, useMemo as useMemo74, useState as useState83 } from "react";
+// src/components/Invoices/Invoices.tsx
+import { useCallback as useCallback59, useState as useState87 } from "react";
+
+// src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
+import { useCallback as useCallback55 } from "react";
+
+// src/components/BaseDetailView/BaseDetailView.tsx
+import { jsx as jsx326, jsxs as jsxs210 } from "react/jsx-runtime";
+var BaseDetailView = ({ name, onGoBack, slots, children }) => {
+  const { Header: Header6 } = slots;
+  return /* @__PURE__ */ jsxs210(Container, { name, className: "Layer__BaseDetailView", children: [
+    /* @__PURE__ */ jsxs210(HStack, { align: "center", gap: "md", className: "Layer__BaseDetailView__Header", children: [
+      /* @__PURE__ */ jsx326(Button2, { variant: "outlined", icon: true, onPress: onGoBack, children: /* @__PURE__ */ jsx326(BackArrow_default, {}) }),
+      /* @__PURE__ */ jsx326(Header6, {})
+    ] }),
+    children
+  ] });
+};
+
+// src/components/Invoices/InvoiceForm/useInvoiceForm.ts
+import { useState as useState84 } from "react";
+import { useStore as useStore7 } from "@tanstack/react-form";
 
-// src/features/invoices/api/useListInvoices.tsx
-import useSWRInfinite7 from "swr/infinite";
-var import_lodash6 = __toESM(require_lodash2());
-import { useCallback as useCallback48, useMemo as useMemo71 } from "react";
-import { Schema as Schema11 } from "effect";
+// src/features/forms/hooks/useForm.tsx
+import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
 
-// src/types/utility/pagination.ts
-import { Schema as Schema9, pipe as pipe5 } from "effect";
-var PaginatedResponseMetaSchema = Schema9.Struct({
-  cursor: Schema9.NullOr(Schema9.String),
-  hasMore: pipe5(
-    Schema9.propertySignature(Schema9.Boolean),
-    Schema9.fromKey("has_more")
-  ),
-  totalCount: pipe5(
-    Schema9.propertySignature(Schema9.UndefinedOr(Schema9.Number)),
-    Schema9.fromKey("total_count")
-  )
+// src/components/ui/Form/Form.tsx
+import { forwardRef as forwardRef20 } from "react";
+import {
+  Form as ReactAriaForm,
+  TextField as ReactAriaTextField,
+  FieldError as ReactAriaFieldError
+} from "react-aria-components";
+import classNames88 from "classnames";
+import { jsx as jsx327 } from "react/jsx-runtime";
+var FORM_CLASS_NAME = "Layer__UI__Form";
+var Form = forwardRef20(
+  function Form2(_a, ref) {
+    var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ jsx327(ReactAriaForm, __spreadProps(__spreadValues({}, restProps), { className: classNames88(FORM_CLASS_NAME, className), ref, children }));
+  }
+);
+var TEXT_FIELD_CLASS_NAME = "Layer__UI__TextField";
+var TextField = forwardRef20(
+  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__ */ jsx327(ReactAriaTextField, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames88(TEXT_FIELD_CLASS_NAME, className), ref, children: withRenderProp(children, (node) => node) }));
+  }
+);
+var FIELD_ERROR_CLASS_NAME = "Layer__UI__FieldError";
+var FieldError = forwardRef20(
+  function FieldError2({ children }, ref) {
+    return /* @__PURE__ */ jsx327(ReactAriaFieldError, { className: FIELD_ERROR_CLASS_NAME, ref, children: withRenderProp(children, (node) => node) });
+  }
+);
+
+// src/features/forms/components/BaseFormTextField.tsx
+import { jsx as jsx328, jsxs as jsxs211 } from "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__ */ jsxs211(TextField, __spreadProps(__spreadValues({ name, isInvalid: !isValid2, inline, className, textarea: isTextArea }, additionalAriaProps), { children: [
+    showLabel && /* @__PURE__ */ jsx328(Label, __spreadProps(__spreadValues({ size: "sm", htmlFor: name }, !inline && { pbe: "3xs" }), { children: label })),
+    children,
+    shouldShowErrorMessage && /* @__PURE__ */ jsx328(FieldError, { children: errorMessage })
+  ] }));
+}
+
+// src/features/forms/components/FormBigDecimalField.tsx
+import { useCallback as useCallback48, useEffect as useEffect41, useMemo as useMemo71, useState as useState82 } from "react";
+
+// src/components/ui/Input/InputGroup.tsx
+import { forwardRef as forwardRef21 } from "react";
+import {
+  Group as ReactAriaGroup
+} from "react-aria-components";
+import { jsx as jsx329 } from "react/jsx-runtime";
+var INPUT_GROUP_CLASS_NAME = "Layer__InputGroup";
+var InputGroup2 = forwardRef21(
+  function InputGroup3(_a, ref) {
+    var _b = _a, { actionCount } = _b, restProps = __objRest(_b, ["actionCount"]);
+    const dataProperties = toDataProperties({ "action-count": actionCount });
+    return /* @__PURE__ */ jsx329(
+      ReactAriaGroup,
+      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
+        className: INPUT_GROUP_CLASS_NAME,
+        ref
+      })
+    );
+  }
+);
+
+// src/features/forms/components/FormBigDecimalField.tsx
+import { BigDecimal as BD2, Option as Option4 } from "effect";
+
+// src/components/ui/Input/Input.tsx
+import { forwardRef as forwardRef22 } from "react";
+import { Input as ReactAriaInput2 } from "react-aria-components";
+import { jsx as jsx330 } from "react/jsx-runtime";
+var INPUT_CLASS_NAME = "Layer__UI__Input";
+var Input2 = forwardRef22(
+  function Input3(_a, ref) {
+    var _b = _a, { inset, placement } = _b, restProps = __objRest(_b, ["inset", "placement"]);
+    const dataProperties = toDataProperties({ inset, placement });
+    return /* @__PURE__ */ jsx330(
+      ReactAriaInput2,
+      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
+        className: INPUT_CLASS_NAME,
+        ref
+      })
+    );
+  }
+);
+
+// src/utils/bigDecimalUtils.ts
+import { BigDecimal as BD } from "effect";
+var BIG_DECIMAL_ZERO = BD.fromBigInt(BigInt(0));
+var BIG_DECIMAL_ONE = BD.fromBigInt(BigInt(1));
+var BIG_DECIMAL_ONE_HUNDRED = BD.fromBigInt(BigInt(100));
+var DECIMAL_CHARS_REGEX = /^[\d.,-]+$/;
+var NON_NEGATIVE_DECIMAL_CHARS_REGEX = /^[\d.,]+$/;
+var convertBigDecimalToCents = (amount) => {
+  const scaled = BD.multiply(amount, BIG_DECIMAL_ONE_HUNDRED);
+  const rounded = BD.round(scaled, { scale: 0 });
+  return Number(rounded.value);
+};
+var convertCentsToBigDecimal = (cents) => {
+  const decimalCents = BD.fromBigInt(BigInt(cents));
+  return BD.unsafeDivide(decimalCents, BIG_DECIMAL_ONE_HUNDRED);
+};
+function formatBigDecimalToString(value, maxDecimalPlaces = 10) {
+  const normalizedBigDecimal = BD.normalize(value);
+  const formatter2 = new Intl.NumberFormat(
+    "en-US",
+    {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: maxDecimalPlaces
+    }
+  );
+  let decimalAsNumber = 0;
+  try {
+    decimalAsNumber = BD.unsafeToNumber(normalizedBigDecimal);
+  } catch (e) {
+  }
+  return formatter2.format(decimalAsNumber);
+}
+
+// src/features/forms/components/FormBigDecimalField.tsx
+import { jsx as jsx331 } from "react/jsx-runtime";
+var DEFAULT_MAX_INPUT_LENGTH = 10;
+function FormBigDecimalField(_a) {
+  var _b = _a, {
+    maxInputLength = DEFAULT_MAX_INPUT_LENGTH,
+    allowNegative = false
+  } = _b, restProps = __objRest(_b, [
+    "maxInputLength",
+    "allowNegative"
+  ]);
+  const field = useFieldContext();
+  const { name, state, handleChange, handleBlur } = field;
+  const { value } = state;
+  const [inputValue, setInputValue] = useState82(formatBigDecimalToString(value, maxInputLength));
+  const onInputChange = useCallback48((e) => {
+    setInputValue(e.target.value);
+  }, []);
+  const onInputBlur = useCallback48(() => {
+    const cleaned = inputValue.replace(/,/g, "");
+    const maybeDecimal = BD2.fromString(cleaned);
+    const decimal = Option4.match(maybeDecimal, {
+      onNone: () => BIG_DECIMAL_ZERO,
+      onSome: (amount) => amount
+    });
+    const normalizedDecimal = BD2.normalize(decimal);
+    handleChange(normalizedDecimal);
+    handleBlur();
+    setInputValue(formatBigDecimalToString(normalizedDecimal, maxInputLength));
+  }, [inputValue, handleBlur, handleChange, maxInputLength]);
+  const allowedChars = useMemo71(
+    () => allowNegative ? DECIMAL_CHARS_REGEX : NON_NEGATIVE_DECIMAL_CHARS_REGEX,
+    [allowNegative]
+  );
+  const onBeforeInput = useCallback48((e) => {
+    if (e.data && !allowedChars.test(e.data)) {
+      e.preventDefault();
+    }
+  }, [allowedChars]);
+  const onPaste = useCallback48((e) => {
+    const pastedText = e.clipboardData.getData("text");
+    if (!allowedChars.test(pastedText)) {
+      e.preventDefault();
+    }
+  }, [allowedChars]);
+  useEffect41(() => {
+    setInputValue(formatBigDecimalToString(value, maxInputLength));
+  }, [value, maxInputLength]);
+  return /* @__PURE__ */ jsx331(BaseFormTextField, __spreadProps(__spreadValues({}, restProps), { inputMode: "decimal", children: /* @__PURE__ */ jsx331(InputGroup2, { children: /* @__PURE__ */ jsx331(
+    Input2,
+    {
+      inset: true,
+      id: name,
+      name,
+      value: inputValue,
+      onChange: onInputChange,
+      onBlur: onInputBlur,
+      maxLength: maxInputLength,
+      onBeforeInput,
+      onPaste
+    }
+  ) }) }));
+}
+
+// src/features/forms/components/FormCheckboxField.tsx
+import { useCallback as useCallback49 } from "react";
+import classNames89 from "classnames";
+import { jsx as jsx332 } from "react/jsx-runtime";
+var FORM_CHECKBOX_FIELD_CLASSNAME = "Layer__FormCheckboxField";
+function FormCheckboxField({
+  label,
+  className,
+  inline = false,
+  showLabel = true,
+  showErrorInTooltip = true
+}) {
+  const field = useFieldContext();
+  const { name, state, handleChange, handleBlur } = field;
+  const { meta, value } = state;
+  const { errors, isValid: isValid2 } = meta;
+  const errorMessage = errors.length !== 0 ? errors[0] : void 0;
+  const tooltipProps = showErrorInTooltip ? { tooltip: errorMessage } : {};
+  const additionalAriaProps = !showLabel && { "aria-label": label };
+  const checkboxClassNames = classNames89(
+    FORM_CHECKBOX_FIELD_CLASSNAME,
+    inline && `${FORM_CHECKBOX_FIELD_CLASSNAME}--inline`,
+    className
+  );
+  const onChange = useCallback49((isSelected) => {
+    handleChange(isSelected);
+  }, [handleChange]);
+  return /* @__PURE__ */ jsx332(
+    CheckboxWithTooltip,
+    __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+      className: checkboxClassNames,
+      isSelected: value,
+      isInvalid: !isValid2,
+      onChange,
+      onBlur: handleBlur,
+      name,
+      value: name,
+      size: "lg"
+    }, tooltipProps), additionalAriaProps), !isValid2 && { variant: "error" }), {
+      children: showLabel && /* @__PURE__ */ jsx332(Label, { slot: "label", size: "sm", htmlFor: name, children: label })
+    })
+  );
+}
+
+// src/features/forms/components/FormCurrencyField.tsx
+import { useCallback as useCallback50, useEffect as useEffect42, useState as useState83 } from "react";
+import CurrencyInput2 from "react-currency-input-field";
+import { BigDecimal as BD3, Option as Option5 } from "effect";
+import { jsx as jsx333 } from "react/jsx-runtime";
+var ZERO_CENTS_INPUT_VALUE = "0.00";
+var getCurrencyInputValueFromCents = (cents) => !Number.isNaN(cents) ? centsToDollarsWithoutCommas(cents) : ZERO_CENTS_INPUT_VALUE;
+function FormCurrencyField(props) {
+  const field = useFieldContext();
+  const { label } = props;
+  const { name, state, handleChange, handleBlur } = field;
+  const { value } = state;
+  const [inputValue, setInputValue] = useState83(getCurrencyInputValueFromCents(value));
+  const onInputChange = useCallback50((newValue) => {
+    setInputValue(newValue != null ? newValue : ZERO_CENTS_INPUT_VALUE);
+  }, []);
+  const onInputBlur = useCallback50(() => {
+    const maybeAmount = BD3.fromString(inputValue);
+    const cents = Option5.match(maybeAmount, {
+      onNone: () => 0,
+      onSome: (amount) => convertBigDecimalToCents(amount)
+    });
+    handleChange(cents);
+    handleBlur();
+    setInputValue(getCurrencyInputValueFromCents(cents));
+  }, [inputValue, handleChange, handleBlur]);
+  useEffect42(() => {
+    setInputValue(getCurrencyInputValueFromCents(value));
+  }, [value]);
+  return /* @__PURE__ */ jsx333(BaseFormTextField, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx333(InputGroup2, { children: /* @__PURE__ */ jsx333(
+    CurrencyInput2,
+    {
+      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
+import { useCallback as useCallback51 } from "react";
+
+// src/components/ui/Input/TextArea.tsx
+import { forwardRef as forwardRef23 } from "react";
+import { TextArea as ReactAriaTextArea } from "react-aria-components";
+import { jsx as jsx334 } from "react/jsx-runtime";
+var TEXTAREA_CLASS_NAME = "Layer__UI__TextArea";
+var TextArea = forwardRef23(
+  function TextArea2(_a, ref) {
+    var _b = _a, { resize = "none" } = _b, restProps = __objRest(_b, ["resize"]);
+    const dataProperties = toDataProperties({ resize });
+    return /* @__PURE__ */ jsx334(
+      ReactAriaTextArea,
+      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
+        className: TEXTAREA_CLASS_NAME,
+        ref
+      })
+    );
+  }
+);
+
+// src/features/forms/components/FormTextAreaField.tsx
+import { jsx as jsx335 } from "react/jsx-runtime";
+function FormTextAreaField(props) {
+  const field = useFieldContext();
+  const { name, state, handleChange, handleBlur } = field;
+  const { value } = state;
+  const onChange = useCallback51((e) => {
+    handleChange(e.target.value);
+  }, [handleChange]);
+  return /* @__PURE__ */ jsx335(BaseFormTextField, __spreadProps(__spreadValues({}, props), { isTextArea: true, children: /* @__PURE__ */ jsx335(TextArea, { id: name, name, value, onChange, onBlur: handleBlur }) }));
+}
+
+// src/features/forms/components/FormTextField.tsx
+import { useCallback as useCallback52 } from "react";
+import { jsx as jsx336 } from "react/jsx-runtime";
+function FormTextField(props) {
+  const field = useFieldContext();
+  const { name, state, handleChange, handleBlur } = field;
+  const { value } = state;
+  const onChange = useCallback52((e) => {
+    handleChange(e.target.value);
+  }, [handleChange]);
+  return /* @__PURE__ */ jsx336(BaseFormTextField, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx336(InputGroup2, { children: /* @__PURE__ */ jsx336(Input2, { inset: true, id: name, name, value, onChange, onBlur: handleBlur }) }) }));
+}
+
+// src/features/forms/hooks/useForm.tsx
+var { fieldContext, useFieldContext, formContext, useFormContext } = createFormHookContexts();
+var { useAppForm, withForm } = createFormHook({
+  fieldComponents: {
+    BaseFormTextField,
+    FormBigDecimalField,
+    FormCheckboxField,
+    FormCurrencyField,
+    FormTextAreaField,
+    FormTextField
+  },
+  formComponents: {
+    // TODO: define a submit button component
+  },
+  fieldContext,
+  formContext
 });
 
 // src/features/invoices/invoiceSchemas.ts
-import { Schema as Schema10, pipe as pipe6 } from "effect";
+import { Schema as Schema9, pipe as pipe5 } from "effect";
 var InvoiceStatus = /* @__PURE__ */ ((InvoiceStatus3) => {
   InvoiceStatus3["Voided"] = "VOIDED";
   InvoiceStatus3["Paid"] = "PAID";
@@ -37326,10 +37663,10 @@ var InvoiceStatus = /* @__PURE__ */ ((InvoiceStatus3) => {
   InvoiceStatus3["Sent"] = "SENT";
   return InvoiceStatus3;
 })(InvoiceStatus || {});
-var InvoiceStatusSchema = Schema10.Enums(InvoiceStatus);
-var TransformedInvoiceStatusSchema = Schema10.transform(
-  Schema10.NonEmptyTrimmedString,
-  Schema10.typeSchema(InvoiceStatusSchema),
+var InvoiceStatusSchema = Schema9.Enums(InvoiceStatus);
+var TransformedInvoiceStatusSchema = Schema9.transform(
+  Schema9.NonEmptyTrimmedString,
+  Schema9.typeSchema(InvoiceStatusSchema),
   {
     decode: (input) => {
       if (Object.values(InvoiceStatusSchema.enums).includes(input)) {
@@ -37340,163 +37677,688 @@ var TransformedInvoiceStatusSchema = Schema10.transform(
     encode: (input) => input
   }
 );
-var InvoiceLineItemSchema = Schema10.Struct({
-  id: Schema10.UUID,
-  externalId: pipe6(
-    Schema10.propertySignature(Schema10.NullOr(Schema10.String)),
-    Schema10.fromKey("external_id")
+var InvoiceLineItemSchema = Schema9.Struct({
+  id: Schema9.UUID,
+  externalId: pipe5(
+    Schema9.propertySignature(Schema9.NullOr(Schema9.String)),
+    Schema9.fromKey("external_id")
   ),
-  invoiceId: pipe6(
-    Schema10.propertySignature(Schema10.UUID),
-    Schema10.fromKey("invoice_id")
+  invoiceId: pipe5(
+    Schema9.propertySignature(Schema9.UUID),
+    Schema9.fromKey("invoice_id")
   ),
-  description: Schema10.NullOr(Schema10.String),
-  product: Schema10.NullOr(Schema10.String),
-  unitPrice: pipe6(
-    Schema10.propertySignature(Schema10.Number),
-    Schema10.fromKey("unit_price")
+  description: Schema9.NullOr(Schema9.String),
+  product: Schema9.NullOr(Schema9.String),
+  unitPrice: pipe5(
+    Schema9.propertySignature(Schema9.Number),
+    Schema9.fromKey("unit_price")
   ),
-  quantity: Schema10.BigDecimal,
-  subtotal: Schema10.Number,
-  discountAmount: pipe6(
-    Schema10.propertySignature(Schema10.Number),
-    Schema10.fromKey("discount_amount")
+  quantity: Schema9.BigDecimal,
+  subtotal: Schema9.Number,
+  discountAmount: pipe5(
+    Schema9.propertySignature(Schema9.Number),
+    Schema9.fromKey("discount_amount")
   ),
-  salesTaxTotal: pipe6(
-    Schema10.propertySignature(Schema10.Number),
-    Schema10.fromKey("sales_taxes_total")
+  salesTaxTotal: pipe5(
+    Schema9.propertySignature(Schema9.Number),
+    Schema9.fromKey("sales_taxes_total")
   ),
-  totalAmount: pipe6(
-    Schema10.propertySignature(Schema10.Number),
-    Schema10.fromKey("total_amount")
+  totalAmount: pipe5(
+    Schema9.propertySignature(Schema9.Number),
+    Schema9.fromKey("total_amount")
   ),
-  memo: Schema10.NullOr(Schema10.String)
+  memo: Schema9.NullOr(Schema9.String)
 });
-var InvoiceSchema = Schema10.Struct({
-  id: Schema10.UUID,
-  businessId: pipe6(
-    Schema10.propertySignature(Schema10.UUID),
-    Schema10.fromKey("business_id")
+var InvoiceSchema = Schema9.Struct({
+  id: Schema9.UUID,
+  businessId: pipe5(
+    Schema9.propertySignature(Schema9.UUID),
+    Schema9.fromKey("business_id")
   ),
-  externalId: pipe6(
-    Schema10.propertySignature(Schema10.NullOr(Schema10.String)),
-    Schema10.fromKey("external_id")
+  externalId: pipe5(
+    Schema9.propertySignature(Schema9.NullOr(Schema9.String)),
+    Schema9.fromKey("external_id")
   ),
   status: TransformedInvoiceStatusSchema,
-  sentAt: pipe6(
-    Schema10.propertySignature(Schema10.NullOr(Schema10.Date)),
-    Schema10.fromKey("sent_at")
+  sentAt: pipe5(
+    Schema9.propertySignature(Schema9.NullOr(Schema9.Date)),
+    Schema9.fromKey("sent_at")
   ),
-  dueAt: pipe6(
-    Schema10.propertySignature(Schema10.NullOr(Schema10.Date)),
-    Schema10.fromKey("due_at")
+  dueAt: pipe5(
+    Schema9.propertySignature(Schema9.NullOr(Schema9.Date)),
+    Schema9.fromKey("due_at")
   ),
-  paidAt: pipe6(
-    Schema10.propertySignature(Schema10.NullOr(Schema10.Date)),
-    Schema10.fromKey("paid_at")
+  paidAt: pipe5(
+    Schema9.propertySignature(Schema9.NullOr(Schema9.Date)),
+    Schema9.fromKey("paid_at")
   ),
-  voidedAt: pipe6(
-    Schema10.propertySignature(Schema10.NullOr(Schema10.Date)),
-    Schema10.fromKey("voided_at")
+  voidedAt: pipe5(
+    Schema9.propertySignature(Schema9.NullOr(Schema9.Date)),
+    Schema9.fromKey("voided_at")
   ),
-  invoiceNumber: pipe6(
-    Schema10.propertySignature(Schema10.NullOr(Schema10.String)),
-    Schema10.fromKey("invoice_number")
+  invoiceNumber: pipe5(
+    Schema9.propertySignature(Schema9.NullOr(Schema9.String)),
+    Schema9.fromKey("invoice_number")
   ),
-  recipientName: pipe6(
-    Schema10.propertySignature(Schema10.NullOr(Schema10.String)),
-    Schema10.fromKey("recipient_name")
+  recipientName: pipe5(
+    Schema9.propertySignature(Schema9.NullOr(Schema9.String)),
+    Schema9.fromKey("recipient_name")
   ),
-  customer: Schema10.NullOr(CustomerSchema),
-  lineItems: pipe6(
-    Schema10.propertySignature(Schema10.Array(InvoiceLineItemSchema)),
-    Schema10.fromKey("line_items")
+  customer: Schema9.NullOr(CustomerSchema),
+  lineItems: pipe5(
+    Schema9.propertySignature(Schema9.Array(InvoiceLineItemSchema)),
+    Schema9.fromKey("line_items")
   ),
-  subtotal: Schema10.Number,
-  additionalDiscount: pipe6(
-    Schema10.propertySignature(Schema10.Number),
-    Schema10.fromKey("additional_discount")
+  subtotal: Schema9.Number,
+  additionalDiscount: pipe5(
+    Schema9.propertySignature(Schema9.Number),
+    Schema9.fromKey("additional_discount")
   ),
-  additionalSalesTaxesTotal: pipe6(
-    Schema10.propertySignature(Schema10.Number),
-    Schema10.fromKey("additional_sales_taxes_total")
+  additionalSalesTaxesTotal: pipe5(
+    Schema9.propertySignature(Schema9.Number),
+    Schema9.fromKey("additional_sales_taxes_total")
   ),
-  totalAmount: pipe6(
-    Schema10.propertySignature(Schema10.Number),
-    Schema10.fromKey("total_amount")
+  totalAmount: pipe5(
+    Schema9.propertySignature(Schema9.Number),
+    Schema9.fromKey("total_amount")
   ),
-  outstandingBalance: pipe6(
-    Schema10.propertySignature(Schema10.Number),
-    Schema10.fromKey("outstanding_balance")
+  outstandingBalance: pipe5(
+    Schema9.propertySignature(Schema9.Number),
+    Schema9.fromKey("outstanding_balance")
   ),
-  importedAt: pipe6(
-    Schema10.propertySignature(Schema10.Date),
-    Schema10.fromKey("imported_at")
+  importedAt: pipe5(
+    Schema9.propertySignature(Schema9.Date),
+    Schema9.fromKey("imported_at")
   ),
-  updatedAt: pipe6(
-    Schema10.propertySignature(Schema10.NullOr(Schema10.Date)),
-    Schema10.fromKey("updated_at")
+  updatedAt: pipe5(
+    Schema9.propertySignature(Schema9.NullOr(Schema9.Date)),
+    Schema9.fromKey("updated_at")
   ),
-  memo: Schema10.NullOr(Schema10.String)
+  memo: Schema9.NullOr(Schema9.String)
 });
-var UpsertInvoiceTaxLineItemSchema = Schema10.Struct({
-  amount: Schema10.NumberFromString.pipe(Schema10.int())
+var UpsertInvoiceTaxLineItemSchema = Schema9.Struct({
+  amount: Schema9.Number
 });
-var UpsertInvoiceLineItemSchema = Schema10.Struct({
-  description: pipe6(
-    Schema10.propertySignature(Schema10.UndefinedOr(Schema10.String)),
-    Schema10.fromKey("description")
-  ),
-  product: pipe6(
-    Schema10.propertySignature(Schema10.String),
-    Schema10.fromKey("product")
+var UpsertInvoiceLineItemSchema = Schema9.Struct({
+  description: Schema9.String,
+  product: Schema9.String,
+  unitPrice: pipe5(
+    Schema9.propertySignature(Schema9.Number),
+    Schema9.fromKey("unit_price")
   ),
-  unitPrice: pipe6(
-    Schema10.propertySignature(Schema10.NumberFromString.pipe(Schema10.int())),
-    Schema10.fromKey("unit_price")
-  ),
-  quantity: pipe6(
-    Schema10.propertySignature(Schema10.BigDecimal),
-    Schema10.fromKey("quantity")
-  )
+  quantity: Schema9.BigDecimal
 });
-var UpsertInvoiceSchema = Schema10.Struct({
-  sentAt: pipe6(
-    Schema10.propertySignature(Schema10.Date),
-    Schema10.fromKey("sent_at")
+var UpsertInvoiceSchema = Schema9.Struct({
+  sentAt: pipe5(
+    Schema9.propertySignature(Schema9.Date),
+    Schema9.fromKey("sent_at")
   ),
-  dueAt: pipe6(
-    Schema10.propertySignature(Schema10.Date),
-    Schema10.fromKey("due_at")
+  dueAt: pipe5(
+    Schema9.propertySignature(Schema9.Date),
+    Schema9.fromKey("due_at")
   ),
-  invoiceNumber: pipe6(
-    Schema10.propertySignature(Schema10.UndefinedOr(Schema10.String)),
-    Schema10.fromKey("invoice_number")
+  invoiceNumber: pipe5(
+    Schema9.propertySignature(Schema9.UndefinedOr(Schema9.String)),
+    Schema9.fromKey("invoice_number")
   ),
-  customerId: pipe6(
-    Schema10.propertySignature(Schema10.UUID),
-    Schema10.fromKey("customer_id")
+  customerId: pipe5(
+    Schema9.propertySignature(Schema9.UUID),
+    Schema9.fromKey("customer_id")
   ),
-  memo: Schema10.NullOr(Schema10.String),
-  lineItems: pipe6(
-    Schema10.propertySignature(Schema10.Array(UpsertInvoiceLineItemSchema)),
-    Schema10.fromKey("line_items")
+  memo: Schema9.NullOr(Schema9.String),
+  lineItems: pipe5(
+    Schema9.propertySignature(Schema9.Array(UpsertInvoiceLineItemSchema)),
+    Schema9.fromKey("line_items")
   ),
-  additionalDiscount: pipe6(
-    Schema10.propertySignature(Schema10.UndefinedOr(Schema10.NumberFromString.pipe(Schema10.int()))),
-    Schema10.fromKey("additional_discount")
+  additionalDiscount: pipe5(
+    Schema9.propertySignature(Schema9.UndefinedOr(Schema9.Number)),
+    Schema9.fromKey("additional_discount")
+  ),
+  additionalSalesTaxes: pipe5(
+    Schema9.propertySignature(Schema9.UndefinedOr(Schema9.Array(UpsertInvoiceTaxLineItemSchema))),
+    Schema9.fromKey("additional_sales_taxes")
+  )
+});
+
+// src/features/invoices/api/useUpsertInvoice.tsx
+import { useCallback as useCallback53 } from "react";
+import useSWRMutation26 from "swr/mutation";
+import { Schema as Schema10, Effect } from "effect";
+var UPSERT_INVOICES_TAG_KEY = "#upsert-invoice";
+var createInvoice = post(({ businessId }) => `/v1/businesses/${businessId}/invoices`);
+var updateInvoice = put(({ businessId, invoiceId }) => `/v1/businesses/${businessId}/invoices/${invoiceId}`);
+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 = Schema10.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 = Schema10.Struct({
+  businessId: Schema10.String
+});
+var UpdateParamsSchema = Schema10.Struct({
+  businessId: Schema10.String,
+  invoiceId: Schema10.String
+});
+var isParamsValidForMode = (mode, params) => {
+  if (mode === "Update" /* Update */) {
+    return Effect.runSync(Effect.either(Schema10.decodeUnknown(UpdateParamsSchema)(params)))._tag === "Right";
+  }
+  if (mode === "Create" /* Create */) {
+    return Effect.runSync(Effect.either(Schema10.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 = useSWRMutation26(
+    () => 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(Schema10.decodeUnknownPromise(UpsertInvoiceReturnSchema));
+    },
+    {
+      revalidate: false
+    }
+  );
+  const mutationResponse = new UpsertInvoiceSWRResponse(rawMutationResponse);
+  const originalTrigger = mutationResponse.trigger;
+  const stableProxiedTrigger = useCallback53(
+    (...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
+import { BigDecimal as BD4, Schema as Schema11 } from "effect";
+var EMPTY_LINE_ITEM = {
+  product: "",
+  description: "",
+  unitPrice: 0,
+  quantity: BIG_DECIMAL_ONE,
+  amount: 0,
+  isTaxable: false
+};
+var DEFAULT_FORM_VALUES = {
+  invoiceNumber: "",
+  customer: null,
+  email: "",
+  address: "",
+  lineItems: [EMPTY_LINE_ITEM]
+};
+var getInvoiceLineItemAmount = (lineItem) => {
+  const { unitPrice, quantity } = lineItem;
+  return convertBigDecimalToCents(BD4.multiply(quantity, convertCentsToBigDecimal(unitPrice)));
+};
+var getAugmentedInvoiceFormLineItem = (lineItem) => {
+  return __spreadProps(__spreadValues({}, lineItem), {
+    amount: getInvoiceLineItemAmount(lineItem),
+    isTaxable: lineItem.salesTaxTotal > 0
+  });
+};
+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] = useState84(void 0);
+  const { onSuccess, mode } = props;
+  const upsertInvoiceProps = mode === "Update" /* Update */ ? { mode, invoiceId: props.invoice.id } : { mode };
+  const { trigger: upsertInvoice } = useUpsertInvoice(upsertInvoiceProps);
+  const defaultValues = mode === "Update" /* Update */ ? getInvoiceFormDefaultValues(props.invoice) : DEFAULT_FORM_VALUES;
+  const form = useAppForm({
+    defaultValues,
+    onSubmit: (_0) => __async(null, [_0], function* ({ value }) {
+      var _a;
+      try {
+        const payload = __spreadProps(__spreadValues({}, value), {
+          customerId: (_a = value == null ? void 0 : value.customer) == null ? void 0 : _a.id
+        });
+        const invoiceParams = Schema11.validateSync(UpsertInvoiceSchema)(payload);
+        const { data: invoice } = yield upsertInvoice(invoiceParams);
+        setSubmitError(void 0);
+        onSuccess == null ? void 0 : onSuccess(invoice);
+      } catch (e) {
+        setSubmitError("Something went wrong. Please try again.");
+      }
+    })
+  });
+  const isFormValid = useStore7(form.store, (state) => state.isValid);
+  return { form, submitError, isFormValid };
+};
+
+// src/components/Invoices/InvoiceForm/InvoiceForm.tsx
+import { Plus as Plus2, Trash as Trash2 } from "lucide-react";
+import { BigDecimal as BD5 } from "effect";
+
+// src/features/customers/components/CustomerSelector.tsx
+import { useCallback as useCallback54, useId as useId5, useMemo as useMemo72 } from "react";
+import classNames90 from "classnames";
+import { jsx as jsx337, jsxs as jsxs212 } from "react/jsx-runtime";
+function getCustomerName(customer) {
+  var _a, _b, _c;
+  return (_c = (_b = (_a = customer.individualName) != null ? _a : customer.companyName) != null ? _b : customer.externalId) != null ? _c : "Unknown Customer";
+}
+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 = classNames90(
+    "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 = useMemo72(
+    () => (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 = useCallback54(
+    (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 = useMemo72(
+    () => {
+      if (selectedCustomer === null) {
+        return null;
+      }
+      return {
+        label: getCustomerName(selectedCustomer),
+        value: selectedCustomer.id
+      };
+    },
+    [selectedCustomer]
+  );
+  const EmptyMessage = useMemo72(
+    () => /* @__PURE__ */ jsx337(P, { variant: "subtle", children: "No matching customer" }),
+    []
+  );
+  const ErrorMessage = useMemo72(
+    () => /* @__PURE__ */ jsx337(
+      P,
+      {
+        size: "xs",
+        status: "error",
+        children: "An error occurred while loading customers."
+      }
+    ),
+    []
+  );
+  const inputId = useId5();
+  const isFiltered = effectiveSearchQuery !== void 0;
+  const noCustomersExist = !isLoading && !isFiltered && data !== void 0 && data.every(({ data: data2 }) => data2.length === 0);
+  const shouldHideComponent = noCustomersExist || isReadOnly && selectedCustomer === null;
+  if (shouldHideComponent) {
+    return null;
+  }
+  const isLoadingWithoutFallback = isLoading && !data;
+  const shouldDisableComboBox = isLoadingWithoutFallback || isError;
+  return /* @__PURE__ */ jsxs212(VStack, { className: combinedClassName, children: [
+    /* @__PURE__ */ jsx337(Label, { htmlFor: inputId, size: "sm", children: "Customer" }),
+    /* @__PURE__ */ jsx337(
+      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
+import { jsx as jsx338, jsxs as jsxs213 } from "react/jsx-runtime";
+var INVOICE_FORM_CSS_PREFIX = "Layer__InvoiceForm";
+var INVOICE_FORM_FIELD_CSS_PREFIX = `${INVOICE_FORM_CSS_PREFIX}__Field`;
+var InvoiceForm = (props) => {
+  const { onSuccess, mode } = props;
+  const { form } = useInvoiceForm(
+    __spreadValues({ onSuccess }, mode === "Update" /* Update */ ? { mode, invoice: props.invoice } : { mode })
+  );
+  return /* @__PURE__ */ jsxs213(Form, { className: INVOICE_FORM_CSS_PREFIX, children: [
+    /* @__PURE__ */ jsxs213(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__Metadata`, gap: "xs", children: [
+      /* @__PURE__ */ jsx338(
+        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__ */ jsx338(
+            CustomerSelector,
+            {
+              className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Customer`,
+              selectedCustomer: field.state.value,
+              onSelectedCustomerChange: field.handleChange,
+              inline: true
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx338(form.AppField, { name: "email", children: (field) => /* @__PURE__ */ jsx338(field.FormTextField, { label: "Email", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Email` }) }),
+      /* @__PURE__ */ jsx338(form.AppField, { name: "address", children: (field) => /* @__PURE__ */ jsx338(field.FormTextAreaField, { label: "Billing address", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Address` }) })
+    ] }),
+    /* @__PURE__ */ jsx338(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__LineItems`, gap: "xs", children: /* @__PURE__ */ jsx338(form.AppField, { name: "lineItems", mode: "array", children: (field) => /* @__PURE__ */ jsxs213(VStack, { gap: "xs", align: "baseline", children: [
+      field.state.value.map((_, index) => /* @__PURE__ */ jsxs213(HStack, { gap: "xs", align: "end", className: `${INVOICE_FORM_CSS_PREFIX}__LineItem`, children: [
+        /* @__PURE__ */ jsx338(form.AppField, { name: `lineItems[${index}].product`, children: (innerField) => /* @__PURE__ */ jsx338(innerField.FormTextField, { label: "Product", showLabel: index === 0 }) }),
+        /* @__PURE__ */ jsx338(form.AppField, { name: `lineItems[${index}].description`, children: (innerField) => /* @__PURE__ */ jsx338(innerField.FormTextField, { label: "Description", showLabel: index === 0 }) }),
+        /* @__PURE__ */ jsx338(
+          form.AppField,
+          {
+            name: `lineItems[${index}].quantity`,
+            listeners: {
+              onBlur: ({ value: quantity }) => {
+                const unitPrice = form.getFieldValue(`lineItems[${index}].unitPrice`);
+                const nextAmount = BD5.multiply(convertCentsToBigDecimal(unitPrice), quantity);
+                form.setFieldValue(`lineItems[${index}].amount`, convertBigDecimalToCents(nextAmount));
+              }
+            },
+            children: (innerField) => /* @__PURE__ */ jsx338(innerField.FormBigDecimalField, { label: "Quantity", showLabel: index === 0 })
+          }
+        ),
+        /* @__PURE__ */ jsx338(
+          form.AppField,
+          {
+            name: `lineItems[${index}].unitPrice`,
+            listeners: {
+              onBlur: ({ value: unitPrice }) => {
+                const quantity = form.getFieldValue(`lineItems[${index}].quantity`);
+                const nextAmount = BD5.multiply(convertCentsToBigDecimal(unitPrice), quantity);
+                form.setFieldValue(`lineItems[${index}].amount`, convertBigDecimalToCents(nextAmount));
+              }
+            },
+            children: (innerField) => /* @__PURE__ */ jsx338(innerField.FormCurrencyField, { label: "Rate", showLabel: index === 0 })
+          }
+        ),
+        /* @__PURE__ */ jsx338(
+          form.AppField,
+          {
+            name: `lineItems[${index}].amount`,
+            listeners: {
+              onBlur: ({ value: amount }) => {
+                const quantity = form.getFieldValue(`lineItems[${index}].quantity`);
+                let nextUnitPrice = BIG_DECIMAL_ZERO;
+                try {
+                  nextUnitPrice = BD5.unsafeDivide(convertCentsToBigDecimal(amount), quantity);
+                } catch (e) {
+                }
+                form.setFieldValue(`lineItems[${index}].unitPrice`, convertBigDecimalToCents(nextUnitPrice));
+              }
+            },
+            children: (innerField) => /* @__PURE__ */ jsx338(innerField.FormCurrencyField, { label: "Amount", showLabel: index === 0 })
+          }
+        ),
+        /* @__PURE__ */ jsx338(form.AppField, { name: `lineItems[${index}].isTaxable`, children: (innerField) => /* @__PURE__ */ jsx338(innerField.FormCheckboxField, { label: "Tax", showLabel: index === 0 }) }),
+        /* @__PURE__ */ jsx338(Button2, { variant: "outlined", icon: true, "aria-label": "Delete line item", onClick: () => field.removeValue(index), children: /* @__PURE__ */ jsx338(Trash2, { size: 16 }) })
+      ] }, `lineItems[${index}]`)),
+      /* @__PURE__ */ jsxs213(Button2, { variant: "outlined", onClick: () => field.pushValue(EMPTY_LINE_ITEM), children: [
+        "Add line item",
+        /* @__PURE__ */ jsx338(Plus2, { size: 16 })
+      ] })
+    ] }) }) })
+  ] });
+};
+
+// src/components/DataPoint/DataPoint.tsx
+import { jsx as jsx339, jsxs as jsxs214 } from "react/jsx-runtime";
+var DataPoint = ({ label, children }) => {
+  return /* @__PURE__ */ jsxs214(VStack, { gap: "3xs", children: [
+    /* @__PURE__ */ jsx339(Span, { variant: "subtle", size: "xs", children: label }),
+    children
+  ] });
+};
+
+// src/components/Invoices/InvoiceStatusCell/InvoiceStatusCell.tsx
+import pluralize6 from "pluralize";
+import { jsx as jsx340, jsxs as jsxs215 } from "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__ */ jsx340(Badge, { variant: "success" /* SUCCESS */, size: badgeSize, icon: /* @__PURE__ */ jsx340(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 ${pluralize6("day", Math.abs(dueDifference), true)} ago`,
+          badge: /* @__PURE__ */ jsx340(Badge, { variant: "warning" /* WARNING */, size: badgeSize, icon: /* @__PURE__ */ jsx340(AlertCircle_default, { size: iconSize }), iconOnly: true })
+        };
+      }
+      return {
+        text: "Sent",
+        subText: `Due in ${pluralize6("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__ */ jsxs215(HStack, { gap: "xs", align: "center", children: [
+    dueStatus.badge,
+    /* @__PURE__ */ jsxs215(Stack3, __spreadProps(__spreadValues({}, inline && { gap: "3xs", align: "center" }), { children: [
+      /* @__PURE__ */ jsx340(Span, { children: dueStatus.text }),
+      subText && /* @__PURE__ */ jsx340(Span, { variant: "subtle", size: "sm", children: subText })
+    ] }))
+  ] });
+};
+
+// src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
+import { jsx as jsx341, jsxs as jsxs216 } from "react/jsx-runtime";
+var InvoiceDetail = (props) => {
+  const _a = props, { onSuccess: _onSuccess, onGoBack } = _a, restProps = __objRest(_a, ["onSuccess", "onGoBack"]);
+  const Header6 = useCallback55(() => {
+    return /* @__PURE__ */ jsx341(InvoiceDetailHeader, __spreadValues({}, restProps));
+  }, [restProps]);
+  return /* @__PURE__ */ jsxs216(BaseDetailView, { slots: { Header: Header6 }, name: "Invoice Detail View", onGoBack, children: [
+    restProps.mode === "Update" /* Update */ && /* @__PURE__ */ jsx341(InvoiceDetailSubHeader, { invoice: restProps.invoice }),
+    /* @__PURE__ */ jsx341(InvoiceForm, __spreadValues({}, props))
+  ] });
+};
+var InvoiceDetailHeader = (props) => {
+  const { mode } = props;
+  if (mode === "Create" /* Create */) {
+    return /* @__PURE__ */ jsx341(Heading2, { children: "Create Invoice" });
+  }
+  const invoice = props.invoice;
+  const { invoiceNumber } = invoice;
+  return /* @__PURE__ */ jsx341(Heading2, { children: invoiceNumber ? `Invoice ${invoiceNumber}` : "View Invoice" });
+};
+var InvoiceDetailSubHeader = ({ invoice }) => {
+  const { outstandingBalance, totalAmount } = invoice;
+  return /* @__PURE__ */ jsx341(HStack, { className: "Layer__InvoiceDetail__SubHeader", children: /* @__PURE__ */ jsxs216(HStack, { gap: "5xl", children: [
+    /* @__PURE__ */ jsx341(DataPoint, { label: "Balance due", children: /* @__PURE__ */ jsx341(Span, { children: convertCentsToCurrency(outstandingBalance) }) }),
+    /* @__PURE__ */ jsx341(DataPoint, { label: "Open balance", children: /* @__PURE__ */ jsx341(Span, { children: convertCentsToCurrency(totalAmount) }) }),
+    /* @__PURE__ */ jsx341(DataPoint, { label: "Status", children: /* @__PURE__ */ jsx341(InvoiceStatusCell, { invoice, inline: true }) })
+  ] }) });
+};
+
+// src/components/Invoices/InvoicesTable/InvoicesTable.tsx
+import { useCallback as useCallback58, useMemo as useMemo76, useState as useState86 } from "react";
+
+// src/features/invoices/api/useListInvoices.tsx
+import useSWRInfinite7 from "swr/infinite";
+var import_lodash6 = __toESM(require_lodash2());
+import { useCallback as useCallback56, useMemo as useMemo73 } from "react";
+import { Schema as Schema13 } from "effect";
+
+// src/types/utility/pagination.ts
+import { Schema as Schema12, pipe as pipe6 } from "effect";
+var PaginatedResponseMetaSchema = Schema12.Struct({
+  cursor: Schema12.NullOr(Schema12.String),
+  hasMore: pipe6(
+    Schema12.propertySignature(Schema12.Boolean),
+    Schema12.fromKey("has_more")
   ),
-  additionalSalesTaxes: pipe6(
-    Schema10.propertySignature(Schema10.UndefinedOr(Schema10.Array(UpsertInvoiceTaxLineItemSchema))),
-    Schema10.fromKey("additional_sales_taxes")
+  totalCount: pipe6(
+    Schema12.propertySignature(Schema12.UndefinedOr(Schema12.Number)),
+    Schema12.fromKey("total_count")
   )
 });
 
 // src/features/invoices/api/useListInvoices.tsx
 var LIST_INVOICES_TAG_KEY = "#list-invoices";
-var ListInvoicesReturnSchema = Schema11.Struct({
-  data: Schema11.Array(InvoiceSchema),
-  meta: Schema11.Struct({
+var ListInvoicesReturnSchema = Schema13.Struct({
+  data: Schema13.Array(InvoiceSchema),
+  meta: Schema13.Struct({
     pagination: PaginatedResponseMetaSchema
   })
 });
@@ -37624,7 +38486,7 @@ function useListInvoices({
           showTotalCount: showTotalCount2
         }
       }
-    )().then(Schema11.decodeUnknownPromise(ListInvoicesReturnSchema)),
+    )().then(Schema13.decodeUnknownPromise(ListInvoicesReturnSchema)),
     {
       keepPreviousData: true,
       revalidateFirstPage: false,
@@ -37643,10 +38505,10 @@ import {
 } from "@tanstack/react-table";
 
 // src/components/DataTable/DataTable.tsx
-import { useMemo as useMemo72 } from "react";
+import { useMemo as useMemo74 } from "react";
 
 // src/components/ui/Table/Table.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef24 } from "react";
 import {
   Cell as ReactAriaCell,
   Column as ReactAriaColumn,
@@ -37655,14 +38517,14 @@ import {
   TableBody as ReactAriaTableBody,
   TableHeader as ReactAriaTableHeader
 } from "react-aria-components";
-import classNames88 from "classnames";
-import { jsx as jsx326 } from "react/jsx-runtime";
+import classNames91 from "classnames";
+import { jsx as jsx342 } from "react/jsx-runtime";
 var CSS_PREFIX2 = "Layer__UI__Table";
-var getClassName = (component, additionalClassNames) => classNames88(`${CSS_PREFIX2}-${component}`, additionalClassNames);
-var Table2 = forwardRef20(
+var getClassName = (component, additionalClassNames) => classNames91(`${CSS_PREFIX2}-${component}`, additionalClassNames);
+var Table2 = forwardRef24(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ jsx326(
+    return /* @__PURE__ */ jsx342(
       ReactAriaTable,
       __spreadProps(__spreadValues({
         className: getClassName("Table" /* Table */, className)
@@ -37676,7 +38538,7 @@ var Table2 = forwardRef20(
 Table2.displayName = "Table" /* Table */;
 var TableHeaderInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ jsx326(
+  return /* @__PURE__ */ jsx342(
     ReactAriaTableHeader,
     __spreadProps(__spreadValues({
       className: getClassName("TableHeader" /* TableHeader */, className)
@@ -37686,11 +38548,11 @@ var TableHeaderInner = (_a, ref) => {
     })
   );
 };
-var TableHeader = forwardRef20(TableHeaderInner);
+var TableHeader = forwardRef24(TableHeaderInner);
 TableHeader.displayName = "TableHeader" /* TableHeader */;
 var TableBodyInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ jsx326(
+  return /* @__PURE__ */ jsx342(
     ReactAriaTableBody,
     __spreadProps(__spreadValues({
       className: getClassName("TableBody" /* TableBody */, className)
@@ -37700,11 +38562,11 @@ var TableBodyInner = (_a, ref) => {
     })
   );
 };
-var TableBody2 = forwardRef20(TableBodyInner);
+var TableBody2 = forwardRef24(TableBodyInner);
 TableBody2.displayName = "TableBody" /* TableBody */;
 var RowInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ jsx326(
+  return /* @__PURE__ */ jsx342(
     ReactAriaTableRow,
     __spreadProps(__spreadValues({
       className: getClassName("Row" /* Row */, className)
@@ -37714,13 +38576,13 @@ var RowInner = (_a, ref) => {
     })
   );
 };
-var Row2 = forwardRef20(RowInner);
+var Row2 = forwardRef24(RowInner);
 Row2.displayName = "Row" /* Row */;
-var Column = forwardRef20(
+var Column = forwardRef24(
   (_a, ref) => {
     var _b = _a, { children, className, textAlign = "left" } = _b, restProps = __objRest(_b, ["children", "className", "textAlign"]);
     const dataProperties = toDataProperties({ "text-align": textAlign });
-    return /* @__PURE__ */ jsx326(
+    return /* @__PURE__ */ jsx342(
       ReactAriaColumn,
       __spreadProps(__spreadValues(__spreadValues({
         className: getClassName("Column" /* Column */, className)
@@ -37732,10 +38594,10 @@ var Column = forwardRef20(
   }
 );
 Column.displayName = "Column" /* Column */;
-var Cell5 = forwardRef20(
+var Cell5 = forwardRef24(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ jsx326(
+    return /* @__PURE__ */ jsx342(
       ReactAriaCell,
       __spreadProps(__spreadValues({
         className: getClassName("Cell" /* Cell */, className)
@@ -37749,7 +38611,7 @@ var Cell5 = forwardRef20(
 Cell5.displayName = "Cell" /* Cell */;
 
 // src/components/DataTable/DataTable.tsx
-import { jsx as jsx327, jsxs as jsxs210 } from "react/jsx-runtime";
+import { jsx as jsx343, jsxs as jsxs217 } from "react/jsx-runtime";
 var DataTable = ({
   columnConfig,
   data,
@@ -37759,19 +38621,20 @@ var DataTable = ({
   ariaLabel,
   slots
 }) => {
-  const columns2 = Object.values(columnConfig);
+  const columns = Object.values(columnConfig);
   const { EmptyState, ErrorState } = slots;
-  const renderTableBody = useMemo72(() => {
+  const isEmptyTable = (data == null ? void 0 : data.length) === 0;
+  const renderTableBody = useMemo74(() => {
     if (isError) {
-      return /* @__PURE__ */ jsx327(Row2, { children: /* @__PURE__ */ jsx327(Cell5, { colSpan: columns2.length, children: /* @__PURE__ */ jsx327(ErrorState, {}) }) });
+      return /* @__PURE__ */ jsx343(Row2, { children: /* @__PURE__ */ jsx343(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx343(ErrorState, {}) }) });
     }
     if (isLoading) {
-      return /* @__PURE__ */ jsx327(Row2, { children: /* @__PURE__ */ jsx327(Cell5, { colSpan: columns2.length, children: /* @__PURE__ */ jsx327(Loader2, {}) }) });
+      return /* @__PURE__ */ jsx343(Row2, { children: /* @__PURE__ */ jsx343(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx343(Loader2, {}) }) });
     }
-    if ((data == null ? void 0 : data.length) === 0) {
-      return /* @__PURE__ */ jsx327(Row2, { children: /* @__PURE__ */ jsx327(Cell5, { colSpan: columns2.length, children: /* @__PURE__ */ jsx327(EmptyState, {}) }) });
+    if (isEmptyTable) {
+      return /* @__PURE__ */ jsx343(Row2, { children: /* @__PURE__ */ jsx343(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx343(EmptyState, {}) }) });
     }
-    const RowRenderer = (row) => /* @__PURE__ */ jsx327(Row2, { children: columns2.map((col) => /* @__PURE__ */ jsx327(
+    const RowRenderer = (row) => /* @__PURE__ */ jsx343(Row2, { children: columns.map((col) => /* @__PURE__ */ jsx343(
       Cell5,
       {
         className: `Layer__UI__Table-Cell__${componentName}--${col.id}`,
@@ -37781,16 +38644,16 @@ var DataTable = ({
     )) }, row.id);
     RowRenderer.displayName = "Row";
     return RowRenderer;
-  }, [isLoading, data, columns2, EmptyState, componentName]);
-  return /* @__PURE__ */ jsxs210(Table2, { "aria-label": ariaLabel, className: `Layer__UI__Table__${componentName}`, children: [
-    /* @__PURE__ */ jsx327(TableHeader, { columns: columns2, children: ({ id, header, isRowHeader }) => /* @__PURE__ */ jsx327(Column, { isRowHeader, className: `Layer__UI__Table-Column__${componentName}--${id}`, children: header }, id) }),
-    /* @__PURE__ */ jsx327(TableBody2, { items: data, children: renderTableBody })
+  }, [isError, isLoading, isEmptyTable, columns, ErrorState, EmptyState, componentName]);
+  return /* @__PURE__ */ jsxs217(Table2, { "aria-label": ariaLabel, className: `Layer__UI__Table__${componentName}`, children: [
+    /* @__PURE__ */ jsx343(TableHeader, { columns, children: ({ id, header, isRowHeader }) => /* @__PURE__ */ jsx343(Column, { isRowHeader, className: `Layer__UI__Table-Column__${componentName}--${id}`, children: header }, id) }),
+    /* @__PURE__ */ jsx343(TableBody2, { items: data, children: renderTableBody })
   ] });
 };
 
 // src/components/DataTable/PaginatedTable.tsx
-import { useCallback as useCallback49, useMemo as useMemo73, useState as useState82 } from "react";
-import { jsx as jsx328, jsxs as jsxs211 } from "react/jsx-runtime";
+import { useCallback as useCallback57, useMemo as useMemo75, useState as useState85 } from "react";
+import { jsx as jsx344, jsxs as jsxs218 } from "react/jsx-runtime";
 var EMPTY_ARRAY = [];
 function PaginatedTable({
   data,
@@ -37803,10 +38666,10 @@ function PaginatedTable({
   slots
 }) {
   const { pageSize = 20, hasMore, fetchMore } = paginationProps;
-  const [pagination, setPagination] = useState82({ pageIndex: 0, pageSize });
+  const [pagination, setPagination] = useState85({ pageIndex: 0, pageSize });
   const columnHelper = 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,
@@ -37823,12 +38686,12 @@ function PaginatedTable({
     autoResetPageIndex: false
   });
   const { rows } = table.getRowModel();
-  const rowData = useMemo73(() => rows.map((r) => r.original), [rows]);
-  const onPageChange = useCallback49((page) => {
+  const rowData = useMemo75(() => rows.map((r) => r.original), [rows]);
+  const onPageChange = useCallback57((page) => {
     table.setPageIndex(page - 1);
   }, [table]);
-  return /* @__PURE__ */ jsxs211(VStack, { children: [
-    /* @__PURE__ */ jsx328(
+  return /* @__PURE__ */ jsxs218(VStack, { children: [
+    /* @__PURE__ */ jsx344(
       DataTable,
       {
         ariaLabel,
@@ -37840,7 +38703,7 @@ function PaginatedTable({
         slots
       }
     ),
-    !isError && !isLoading && /* @__PURE__ */ jsx328(
+    !isError && !isLoading && /* @__PURE__ */ jsx344(
       Pagination,
       {
         currentPage: table.getState().pagination.pageIndex + 1,
@@ -37854,14 +38717,11 @@ function PaginatedTable({
   ] });
 }
 
-// src/components/Invoices/InvoicesTable.tsx
-import pluralize6 from "pluralize";
-
 // src/icons/ChevronRightFill.tsx
-import { jsx as jsx329, jsxs as jsxs212 } from "react/jsx-runtime";
+import { jsx as jsx345, jsxs as jsxs219 } from "react/jsx-runtime";
 var ChevronRightFill = (_a) => {
   var _b = _a, { size = 18 } = _b, props = __objRest(_b, ["size"]);
-  return /* @__PURE__ */ jsxs212(
+  return /* @__PURE__ */ jsxs219(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -37871,8 +38731,8 @@ var ChevronRightFill = (_a) => {
       width: size,
       height: size,
       children: [
-        /* @__PURE__ */ jsx329("path", { d: "M6.75 4.5L11.25 9L6.75 13.5", fill: "currentColor" }),
-        /* @__PURE__ */ jsx329(
+        /* @__PURE__ */ jsx345("path", { d: "M6.75 4.5L11.25 9L6.75 13.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsx345(
           "path",
           {
             d: "M6.75 4.5L11.25 9L6.75 13.5Z",
@@ -37887,38 +38747,38 @@ var ChevronRightFill = (_a) => {
 };
 var ChevronRightFill_default = ChevronRightFill;
 
-// src/components/Invoices/InvoicesTable.tsx
-import { HandCoins, Search as Search2, Plus as Plus2 } from "lucide-react";
+// src/components/Invoices/InvoicesTable/InvoicesTable.tsx
+import { HandCoins, Search as Search2, Plus as Plus3 } from "lucide-react";
 
 // src/components/DataTable/DataTableHeader.tsx
-import { jsx as jsx330, jsxs as jsxs213 } from "react/jsx-runtime";
+import { jsx as jsx346, jsxs as jsxs220 } from "react/jsx-runtime";
 var DataTableHeader = ({ name, count, slotProps = {}, slots = {} }) => {
   const { showCount, totalCount } = count != null ? count : {};
   const { Filters: Filters2, HeaderActions, HeaderFilters } = slots;
-  return /* @__PURE__ */ jsxs213(VStack, { children: [
-    /* @__PURE__ */ jsxs213(HStack, { justify: "space-between", align: "center", className: "Layer__DataTableHeader__Header", children: [
-      /* @__PURE__ */ jsxs213(HStack, { pis: "md", align: "center", gap: "xl", children: [
-        /* @__PURE__ */ jsxs213(HStack, { align: "center", gap: "sm", children: [
-          /* @__PURE__ */ jsx330(Span, { weight: "bold", size: "lg", children: name }),
-          showCount && (totalCount ? /* @__PURE__ */ jsx330(Badge, { variant: "default" /* DEFAULT */, size: "medium" /* MEDIUM */, children: totalCount }) : /* @__PURE__ */ jsx330(BadgeLoader, {}))
+  return /* @__PURE__ */ jsxs220(VStack, { children: [
+    /* @__PURE__ */ jsxs220(HStack, { justify: "space-between", align: "center", className: "Layer__DataTableHeader__Header", children: [
+      /* @__PURE__ */ jsxs220(HStack, { pis: "md", align: "center", gap: "xl", children: [
+        /* @__PURE__ */ jsxs220(HStack, { align: "center", gap: "sm", children: [
+          /* @__PURE__ */ jsx346(Span, { weight: "bold", size: "lg", children: name }),
+          showCount && (totalCount ? /* @__PURE__ */ jsx346(Badge, { variant: "default" /* DEFAULT */, size: "medium" /* MEDIUM */, children: totalCount }) : /* @__PURE__ */ jsx346(BadgeLoader, {}))
         ] }),
-        HeaderFilters && /* @__PURE__ */ jsx330(HeaderFilters, {})
+        HeaderFilters && /* @__PURE__ */ jsx346(HeaderFilters, {})
       ] }),
-      /* @__PURE__ */ jsxs213(HStack, { pie: "md", align: "center", gap: "3xs", children: [
-        slotProps.SearchField && /* @__PURE__ */ jsx330(SearchField, __spreadValues({}, slotProps.SearchField)),
-        HeaderActions && /* @__PURE__ */ jsx330(HeaderActions, {})
+      /* @__PURE__ */ jsxs220(HStack, { pie: "md", align: "center", gap: "3xs", children: [
+        slotProps.SearchField && /* @__PURE__ */ jsx346(SearchField, __spreadValues({}, slotProps.SearchField)),
+        HeaderActions && /* @__PURE__ */ jsx346(HeaderActions, {})
       ] })
     ] }),
-    Filters2 && /* @__PURE__ */ jsxs213(HStack, { pis: "md", pie: "md", justify: "space-between", align: "center", className: "Layer__DataTableHeader__Filters", children: [
-      /* @__PURE__ */ jsx330(Filters2, {}),
-      slotProps.ClearFiltersButton && /* @__PURE__ */ jsx330(Button2, __spreadProps(__spreadValues({ variant: "outlined" }, slotProps.ClearFiltersButton), { children: "Clear All Filters" }))
+    Filters2 && /* @__PURE__ */ jsxs220(HStack, { pis: "md", pie: "md", justify: "space-between", align: "center", className: "Layer__DataTableHeader__Filters", children: [
+      /* @__PURE__ */ jsx346(Filters2, {}),
+      slotProps.ClearFiltersButton && /* @__PURE__ */ jsx346(Button2, __spreadProps(__spreadValues({ variant: "outlined" }, slotProps.ClearFiltersButton), { children: "Clear All Filters" }))
     ] })
   ] });
 };
 
-// src/components/Invoices/InvoicesTable.tsx
+// src/components/Invoices/InvoicesTable/InvoicesTable.tsx
 import { startOfToday, endOfYesterday } from "date-fns";
-import { jsx as jsx331, jsxs as jsxs214 } from "react/jsx-runtime";
+import { jsx as jsx347, jsxs as jsxs221 } from "react/jsx-runtime";
 var COMPONENT_NAME10 = "InvoicesTable";
 var InvoiceStatusOptionConfig = {
   ["All" /* All */]: { label: "All", value: "All" /* All */ },
@@ -37939,12 +38799,12 @@ var AmountCell = ({ invoice }) => {
     case "WRITTEN_OFF" /* WrittenOff */:
     case "VOIDED" /* Voided */:
     case "SENT" /* Sent */: {
-      return /* @__PURE__ */ jsx331(VStack, { children: /* @__PURE__ */ jsx331(Span, { align: "right", children: totalAmount }) });
+      return /* @__PURE__ */ jsx347(VStack, { children: /* @__PURE__ */ jsx347(Span, { align: "right", children: totalAmount }) });
     }
     case "PARTIALLY_PAID" /* PartiallyPaid */: {
-      return /* @__PURE__ */ jsxs214(VStack, { children: [
-        /* @__PURE__ */ jsx331(Span, { align: "right", children: totalAmount }),
-        /* @__PURE__ */ jsxs214(Span, { align: "right", variant: "subtle", size: "sm", children: [
+      return /* @__PURE__ */ jsxs221(VStack, { children: [
+        /* @__PURE__ */ jsx347(Span, { align: "right", children: totalAmount }),
+        /* @__PURE__ */ jsxs221(Span, { align: "right", variant: "subtle", size: "sm", children: [
           outstandingBalance,
           " ",
           "outstanding"
@@ -37959,71 +38819,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__ */ jsx331(Badge, { variant: "success" /* SUCCESS */, size: "small" /* SMALL */, icon: /* @__PURE__ */ jsx331(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 ${pluralize6("day", Math.abs(dueDifference), true)} ago`,
-          badge: /* @__PURE__ */ jsx331(Badge, { variant: "warning" /* WARNING */, size: "small" /* SMALL */, icon: /* @__PURE__ */ jsx331(AlertCircle_default, { size: 12 }), iconOnly: true })
-        };
-      }
-      return {
-        text: "Sent",
-        subText: `Due in ${pluralize6("day", Math.abs(dueDifference), true)}`
-      };
-    }
-    default: {
-      unsafeAssertUnreachable({
-        value: invoice.status,
-        message: "Unexpected invoice status"
-      });
-    }
-  }
-};
-var StatusCell = ({ invoice }) => {
-  const dueStatus = getDueStatusConfig(invoice);
-  return /* @__PURE__ */ jsxs214(HStack, { gap: "xs", align: "center", children: [
-    dueStatus.badge,
-    /* @__PURE__ */ jsxs214(VStack, { children: [
-      /* @__PURE__ */ jsx331(Span, { children: dueStatus.text }),
-      /* @__PURE__ */ jsx331(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",
@@ -38038,35 +38838,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__ */ jsx331(AmountCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ jsx347(AmountCell, { invoice: row })
   },
   ["Status" /* Status */]: {
     id: "Status" /* Status */,
     header: "Status",
-    cell: (row) => /* @__PURE__ */ jsx331(StatusCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ jsx347(InvoiceStatusCell, { invoice: row })
   },
   ["Expand" /* Expand */]: {
     id: "Expand" /* Expand */,
-    cell: (_row) => /* @__PURE__ */ jsx331(Button2, { inset: true, icon: true, "aria-label": "View invoice", variant: "ghost", children: /* @__PURE__ */ jsx331(ChevronRightFill_default, {}) })
+    cell: (row) => /* @__PURE__ */ jsx347(Button2, { inset: true, icon: true, onPress: () => onSelectInvoice(row), "aria-label": "View invoice", variant: "ghost", children: /* @__PURE__ */ jsx347(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: endOfYesterday() };
+      return { status: UNPAID_STATUSES2, dueAtEnd: endOfYesterday() };
     case "Sent" /* Sent */:
-      return { status: unpaidStatuses, dueAtStart: startOfToday() };
+      return { status: UNPAID_STATUSES2, dueAtStart: startOfToday() };
     case "Paid" /* Paid */:
       return { status: ["PAID" /* Paid */, "PARTIALLY_WRITTEN_OFF" /* PartiallyWrittenOff */] };
     case "Written Off" /* WrittenOff */:
@@ -38080,9 +38880,9 @@ var getListInvoiceParams = ({ statusFilter }) => {
       });
   }
 };
-var InvoicesTable = () => {
-  const [selectedInvoiceStatusOption, setSelectedInvoiceStatusOption] = useState83(ALL_OPTION);
-  const listInvoiceParams = useMemo74(
+var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
+  const [selectedInvoiceStatusOption, setSelectedInvoiceStatusOption] = useState86(ALL_OPTION);
+  const listInvoiceParams = useMemo76(
     () => getListInvoiceParams({ statusFilter: selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.value }),
     [selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.value]
   );
@@ -38090,25 +38890,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 = useCallback50(() => {
+  const fetchMore = useCallback58(() => {
     if (hasMore) {
       void setSize(size + 1);
     }
   }, [hasMore, setSize, size]);
-  const paginationProps = useMemo74(() => {
+  const paginationProps = useMemo76(() => {
     return {
       pageSize: 10,
       hasMore,
       fetchMore
     };
   }, [fetchMore, hasMore]);
-  const options = useMemo74(() => Object.values(InvoiceStatusOptionConfig), []);
-  const SelectedValue = useMemo74(() => {
+  const options = useMemo76(() => Object.values(InvoiceStatusOptionConfig), []);
+  const SelectedValue = useMemo76(() => {
     const label = selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.label;
     return label ? `Status: ${label}` : "Status";
   }, [selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.label]);
-  const StatusFilter = useCallback50(
-    () => /* @__PURE__ */ jsx331(
+  const StatusFilter = useCallback58(
+    () => /* @__PURE__ */ jsx347(
       ComboBox,
       {
         className: "Layer__InvoicesTable__StatusFilter",
@@ -38124,27 +38924,27 @@ var InvoicesTable = () => {
     ),
     [SelectedValue, options, selectedInvoiceStatusOption]
   );
-  const CreateInvoiceButton = useCallback50(
-    () => /* @__PURE__ */ jsxs214(Button2, { children: [
+  const CreateInvoiceButton = useCallback58(
+    () => /* @__PURE__ */ jsxs221(Button2, { onPress: onCreateInvoice, children: [
       "Create Invoice",
-      /* @__PURE__ */ jsx331(Plus2, { size: 16 })
+      /* @__PURE__ */ jsx347(Plus3, { size: 16 })
     ] }),
-    []
+    [onCreateInvoice]
   );
-  const InvoicesTableEmptyState = useCallback50(() => {
+  const InvoicesTableEmptyState = useCallback58(() => {
     const isFiltered = selectedInvoiceStatusOption && selectedInvoiceStatusOption !== ALL_OPTION;
-    return /* @__PURE__ */ jsx331(
+    return /* @__PURE__ */ jsx347(
       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__ */ jsx331(Search2, {}) : /* @__PURE__ */ jsx331(HandCoins, {}),
+        icon: isFiltered ? /* @__PURE__ */ jsx347(Search2, {}) : /* @__PURE__ */ jsx347(HandCoins, {}),
         spacing: true
       }
     );
   }, [selectedInvoiceStatusOption]);
-  const InvoicesTableErrorState = useCallback50(() => /* @__PURE__ */ jsx331(
+  const InvoicesTableErrorState = useCallback58(() => /* @__PURE__ */ jsx347(
     DataState,
     {
       status: "failed" /* failed */,
@@ -38156,8 +38956,9 @@ var InvoicesTable = () => {
       spacing: true
     }
   ), [refetch]);
-  return /* @__PURE__ */ jsxs214(Container, { name: "InvoicesTable", children: [
-    /* @__PURE__ */ jsx331(
+  const columnConfig = useMemo76(() => getColumnConfig(onSelectInvoice), [onSelectInvoice]);
+  return /* @__PURE__ */ jsxs221(Container, { name: "InvoicesTable", children: [
+    /* @__PURE__ */ jsx347(
       DataTableHeader,
       {
         name: "Invoices",
@@ -38167,14 +38968,14 @@ var InvoicesTable = () => {
         }
       }
     ),
-    /* @__PURE__ */ jsx331(
+    /* @__PURE__ */ jsx347(
       PaginatedTable,
       {
         ariaLabel: "Invoices",
         data: invoices,
         isLoading: data === void 0 || isLoading,
         isError,
-        columnConfig: columns,
+        columnConfig,
         paginationProps,
         componentName: COMPONENT_NAME10,
         slots: {
@@ -38187,28 +38988,38 @@ var InvoicesTable = () => {
 };
 
 // src/components/Invoices/Invoices.tsx
-import { jsx as jsx332 } from "react/jsx-runtime";
+import { jsx as jsx348 } from "react/jsx-runtime";
 var unstable_Invoices = ({
   showTitle = true,
   stringOverrides
 }) => {
-  return /* @__PURE__ */ jsx332(
+  const [invoiceFormMode, setInvoiceFormMode] = useState87(null);
+  const goBackToInvoicesTable = useCallback59(() => {
+    setInvoiceFormMode(null);
+  }, []);
+  const onCreateInvoice = useCallback59(() => {
+    setInvoiceFormMode({ mode: "Create" /* Create */ });
+  }, []);
+  const onSelectInvoice = useCallback59((invoice) => {
+    setInvoiceFormMode({ mode: "Update" /* Update */, invoice });
+  }, []);
+  return /* @__PURE__ */ jsx348(
     View,
     {
       title: (stringOverrides == null ? void 0 : stringOverrides.title) || "Invoices",
       showHeader: showTitle,
-      children: /* @__PURE__ */ jsx332(InvoicesTable, {})
+      children: invoiceFormMode !== null ? /* @__PURE__ */ jsx348(InvoiceDetail, __spreadProps(__spreadValues({}, invoiceFormMode), { onGoBack: goBackToInvoicesTable })) : /* @__PURE__ */ jsx348(InvoicesTable, { onCreateInvoice, onSelectInvoice })
     }
   );
 };
 
 // src/providers/BankTransactionsProvider/BankTransactionsProvider.tsx
-import { jsx as jsx333 } from "react/jsx-runtime";
+import { jsx as jsx349 } from "react/jsx-runtime";
 var BankTransactionsProvider = ({
   children
 }) => {
   const bankTransactionsContextData = useAugmentedBankTransactions();
-  return /* @__PURE__ */ jsx333(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
+  return /* @__PURE__ */ jsx349(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
 };
 export {
   AccountingOverview,