@powerhousedao/design-system 6.0.0-dev.152 → 6.0.0-dev.154

package/dist/rwa/index.js

@@ -0,0 +1,2685 @@
+import { Fragment, createContext, forwardRef, memo, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { twJoin, twMerge } from "tailwind-merge";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Icon, Modal, Pagination, PowerhouseButton, mergeClassNameProps, usePagination } from "@powerhousedao/design-system";
+import { Content, List, Root, Trigger } from "@radix-ui/react-tabs";
+import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form";
+import { NumericFormat } from "react-number-format";
+import { all, create } from "mathjs";
+import { formatInTimeZone } from "date-fns-tz/formatInTimeZone";
+import { orderBy } from "natural-orderby";
+import { Combobox, ConnectTooltip, ConnectTooltipProvider, EditorActionButtons } from "@powerhousedao/design-system/connect";
+const tableNames = {
+	SERVICE_PROVIDER_FEE_TYPE: "SERVICE_PROVIDER_FEE_TYPE",
+	FIXED_INCOME_TYPE: "FIXED_INCOME_TYPE",
+	ACCOUNT: "ACCOUNT",
+	TRANSACTION: "TRANSACTION",
+	ASSET: "ASSET",
+	SPV: "SPV"
+};
+const tableLabels = {
+	SERVICE_PROVIDER_FEE_TYPE: "Service Provider Fee Type",
+	FIXED_INCOME_TYPE: "Fixed Income Asset Type",
+	ACCOUNT: "Account",
+	TRANSACTION: "Transaction",
+	ASSET: "Asset",
+	SPV: "SPV"
+};
+const editorStateKeysByTableName = {
+	SERVICE_PROVIDER_FEE_TYPE: "serviceProviderFeeTypes",
+	FIXED_INCOME_TYPE: "fixedIncomeTypes",
+	ACCOUNT: "accounts",
+	TRANSACTION: "transactions",
+	ASSET: "portfolio",
+	SPV: "spvs"
+};
+const deleteEditorActionInputsByTableName = {
+	SERVICE_PROVIDER_FEE_TYPE: "DELETE_SERVICE_PROVIDER_FEE_TYPE",
+	FIXED_INCOME_TYPE: "DELETE_FIXED_INCOME_TYPE",
+	ACCOUNT: "DELETE_ACCOUNT",
+	TRANSACTION: "DELETE_TRANSACTION",
+	ASSET: "DELETE_ASSET",
+	SPV: "DELETE_SPV"
+};
+//#endregion
+//#region src/rwa/constants/table.ts
+const defaultColumnCountByTableWidth = {
+	1520: 10,
+	1394: 9,
+	1239: 8,
+	1112: 7,
+	984: 6
+};
+const cashTransactionSignByTransactionType = {
+	AssetSale: 1,
+	PrincipalDraw: 1,
+	AssetPurchase: -1,
+	PrincipalReturn: -1,
+	FeesIncome: 1,
+	FeesPayment: -1,
+	InterestIncome: 1,
+	InterestPayment: -1
+};
+const assetTransactionSignByTransactionType = {
+	AssetSale: -1,
+	AssetPurchase: 1
+};
+function getStateKeyForTableName(tableName) {
+	return {
+		ASSET: "portfolio",
+		TRANSACTION: "transactions",
+		ACCOUNT: "accounts",
+		FIXED_INCOME_TYPE: "fixedIncomeTypes",
+		SERVICE_PROVIDER_FEE_TYPE: "serviceProviderFeeTypes",
+		SPV: "spvs"
+	}[tableName];
+}
+function getTableNameFor(action) {
+	return action.type.split("_").slice(1).join("_");
+}
+function getActionOperationType(action) {
+	return action.type.split("_")[0];
+}
+//#endregion
+//#region src/rwa/components/formatted-number.tsx
+function FormattedNumber(props) {
+	const { value, currency, decimalScale = 2, thousandSeparator = ",", fixedDecimalScale = true } = props;
+	return /* @__PURE__ */ jsx(NumericFormat, {
+		decimalScale,
+		displayType: "text",
+		fixedDecimalScale,
+		prefix: currency === "USD" ? "$" : void 0,
+		thousandSeparator,
+		value
+	});
+}
+//#endregion
+//#region src/rwa/constants/transactions.ts
+const ASSET_PURCHASE = "AssetPurchase";
+const ASSET_SALE = "AssetSale";
+const PRINCIPAL_DRAW = "PrincipalDraw";
+const PRINCIPAL_RETURN = "PrincipalReturn";
+const INTEREST_INCOME = "InterestIncome";
+const INTEREST_PAYMENT = "InterestPayment";
+const FEES_INCOME = "FeesIncome";
+const FEES_PAYMENT = "FeesPayment";
+const principalGroupTransactions = [PRINCIPAL_DRAW, PRINCIPAL_RETURN];
+const assetGroupTransactions = [ASSET_PURCHASE, ASSET_SALE];
+const feesTransactions = [FEES_INCOME, FEES_PAYMENT];
+const interestTransactions = [INTEREST_INCOME, INTEREST_PAYMENT];
+const allGroupTransactionTypes = [
+	...principalGroupTransactions,
+	...assetGroupTransactions,
+	...feesTransactions,
+	...interestTransactions
+];
+const groupTransactionTypeLabels = {
+	AssetPurchase: "Asset purchase",
+	AssetSale: "Asset sale",
+	PrincipalDraw: "Principal draw",
+	PrincipalReturn: "Principal return",
+	InterestIncome: "Interest income",
+	InterestPayment: "Interest payment",
+	FeesIncome: "Fees income",
+	FeesPayment: "Fees payment"
+};
+//#endregion
+//#region src/rwa/utils/calculations.ts
+function sumTotalForProperty(items, property) {
+	return items.reduce((acc, item) => acc + Number(item[property]), 0);
+}
+const math = create(all, { number: "BigNumber" });
+function calculateCurrentValue(props) {
+	const { asset, transactions, fixedIncomeTypes, currentDate = /* @__PURE__ */ new Date() } = props;
+	if (!asset?.maturity) return null;
+	const fixedIncomeType = fixedIncomeTypes.find(({ id }) => id === asset.fixedIncomeTypeId);
+	if (!fixedIncomeType) return null;
+	if (fixedIncomeType.name !== "Treasury Bill") return null;
+	const purchaseTransactionsForAsset = transactions.filter(({ type, fixedIncomeTransaction }) => type === "AssetPurchase" && fixedIncomeTransaction?.assetId === asset.id);
+	const saleTransactionsForAsset = transactions.filter(({ type, fixedIncomeTransaction }) => type === "AssetSale" && fixedIncomeTransaction?.assetId === asset.id);
+	if (!purchaseTransactionsForAsset.length && !saleTransactionsForAsset.length) return null;
+	const currentDateMs = math.bignumber(currentDate.getTime());
+	const maturityDateMs = math.bignumber(new Date(asset.maturity).getTime());
+	if (maturityDateMs.lessThan(currentDateMs)) return null;
+	const purchaseDateMs = math.bignumber(new Date(asset.purchaseDate).getTime());
+	const sumQuantities = calculateSumQuantity(purchaseTransactionsForAsset).sub(calculateSumQuantity(saleTransactionsForAsset));
+	const salesProceeds = math.bignumber(asset.salesProceeds);
+	const realizedSurplus = math.bignumber(asset.realizedSurplus);
+	const currentPurchaseProceeds = math.bignumber(asset.purchaseProceeds).sub(salesProceeds).add(realizedSurplus);
+	const totalDiscount = sumQuantities.sub(currentPurchaseProceeds);
+	return currentDateMs.sub(purchaseDateMs).div(maturityDateMs.sub(purchaseDateMs)).mul(totalDiscount).add(currentPurchaseProceeds).toNumber();
+}
+function calculateSumQuantity(transactions) {
+	return transactions.reduce((sum, { fixedIncomeTransaction }) => {
+		if (!fixedIncomeTransaction) return sum;
+		return sum.add(math.bignumber(fixedIncomeTransaction.amount));
+	}, math.bignumber(0));
+}
+//#endregion
+//#region src/rwa/utils/date.ts
+function formatDateForDisplay(date, displayTime = true, isUTC = false) {
+	const formatString = displayTime ? "yyyy/MM/dd, HH:mm:ss zzz" : "yyyy/MM/dd";
+	return formatInTimeZone(date, isUTC ? "UTC" : getTimeZone(), formatString);
+}
+function isISODate(str) {
+	if (!/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/.test(str)) return false;
+	const d = new Date(str);
+	return d instanceof Date && !isNaN(d.getTime()) && d.toISOString() === str;
+}
+function getTimeZone() {
+	return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+function isoDateStringToDateInput(isoDateString, withTime = false) {
+	const format = withTime ? "yyyy-MM-dd'T'HH:mm:ss" : "yyyy-MM-dd";
+	return formatInTimeZone(isoDateString, getTimeZone(), format);
+}
+//#endregion
+//#region src/rwa/utils/validators.ts
+function isAssetGroupTransactionType(type) {
+	return assetGroupTransactions.includes(type);
+}
+function isFixedIncomeAsset(asset) {
+	if (!asset) return false;
+	if (asset.type === "FixedIncome") return true;
+	if ("fixedIncomeId" in asset) return true;
+	return false;
+}
+function isCashAsset(asset) {
+	if (!asset) return false;
+	if (asset.type === "Cash") return true;
+	if ("currency" in asset) return true;
+	return false;
+}
+function getFixedIncomeAssets(portfolio) {
+	return portfolio.filter((a) => isFixedIncomeAsset(a));
+}
+function getCashAsset(portfolio) {
+	const cashAsset = portfolio.find((a) => isCashAsset(a));
+	if (!cashAsset) throw new Error("Cash asset not found");
+	return cashAsset;
+}
+//#endregion
+//#region src/rwa/utils/table.tsx
+function handleDateInTable(maybeDate, displayTime = true) {
+	if (maybeDate instanceof Date || isISODate(maybeDate)) return formatDateForDisplay(maybeDate instanceof Date ? maybeDate.toISOString() : maybeDate, displayTime);
+	return maybeDate;
+}
+function handleTableDatum(datum, decimalScale = 2, displayTime = true) {
+	if (datum === null || datum === void 0) return "--";
+	if (typeof datum === "number") return /* @__PURE__ */ jsx(FormattedNumber, {
+		decimalScale,
+		value: datum
+	});
+	return handleDateInTable(datum, displayTime);
+}
+function calculateUnitPrice(cashAmount, fixedIncomeAmount) {
+	if (!cashAmount || !fixedIncomeAmount) return 0;
+	return cashAmount / fixedIncomeAmount;
+}
+function calculateCashBalanceChange(transactionType, cashAmount, fees) {
+	if (!cashAmount || !transactionType) return 0;
+	const sign = cashTransactionSignByTransactionType[transactionType];
+	const totalFees = (fees?.map((fee) => fee.amount).filter(Boolean) ?? []).reduce((acc, fee) => acc + fee, 0);
+	return cashAmount * sign - totalFees;
+}
+function makeFixedIncomeTypesTableData(state) {
+	const { fixedIncomeTypes } = state;
+	return addItemNumber(fixedIncomeTypes);
+}
+function makeSPVsTableData(state) {
+	const { spvs } = state;
+	return addItemNumber(spvs);
+}
+function makeAssetsTableData(state) {
+	const { portfolio, transactions, fixedIncomeTypes } = state;
+	const currentDate = /* @__PURE__ */ new Date();
+	return addItemNumber(getFixedIncomeAssets(portfolio).map((fixedIncome) => {
+		const currentValue = calculateCurrentValue({
+			asset: fixedIncome,
+			currentDate,
+			transactions,
+			fixedIncomeTypes
+		});
+		return {
+			...fixedIncome,
+			currentValue
+		};
+	}));
+}
+function maybeAddSignToAmount(amount, sign) {
+	if (!amount) return amount;
+	return amount * sign;
+}
+function makeGroupTransactionsTableData(state) {
+	const { transactions, portfolio } = state;
+	const fixedIncomes = getFixedIncomeAssets(portfolio);
+	return addItemNumber(transactions.map((transaction) => {
+		const id = transaction.id;
+		const entryTime = transaction.entryTime;
+		const asset = fixedIncomes.find((asset) => asset.id === transaction.fixedIncomeTransaction?.assetId)?.name;
+		const type = transaction.type;
+		const typeLabel = groupTransactionTypeLabels[type];
+		const cashTransactionSign = cashTransactionSignByTransactionType[type];
+		const assetTransactionSign = isAssetGroupTransactionType(type) ? assetTransactionSignByTransactionType[type] : 1;
+		const quantity = maybeAddSignToAmount(transaction.fixedIncomeTransaction?.amount, assetTransactionSign);
+		const cashAmount = maybeAddSignToAmount(transaction.cashTransaction.amount, cashTransactionSign);
+		const totalFees = feesTransactions.includes(transaction.type) ? maybeAddSignToAmount(transaction.cashTransaction.amount, transaction.type === "FeesIncome" ? -1 : 1) ?? 0 : transaction.fees?.reduce((acc, fee) => acc + fee.amount, 0) ?? 0;
+		const cashBalanceChange = transaction.cashBalanceChange;
+		return {
+			...transaction,
+			id,
+			type,
+			typeLabel,
+			entryTime,
+			asset,
+			quantity,
+			cashAmount,
+			totalFees,
+			cashBalanceChange
+		};
+	}));
+}
+function makeAccountsTableData(state) {
+	const { accounts, principalLenderAccountId } = state;
+	return addItemNumber(accounts.filter((account) => account.id !== principalLenderAccountId));
+}
+function makeServiceProviderFeeTypesTableData(state) {
+	const { serviceProviderFeeTypes, accounts } = state;
+	return addItemNumber(serviceProviderFeeTypes.map((serviceProviderFeeType) => {
+		const account = accounts.find((account) => account.id === serviceProviderFeeType.accountId);
+		return {
+			...serviceProviderFeeType,
+			accountName: account?.label,
+			accountReference: account?.reference
+		};
+	}));
+}
+function addItemNumber(items) {
+	return items.map((item, index) => ({
+		...item,
+		itemNumber: index + 1
+	}));
+}
+function makeTableData(tableName, state) {
+	return tableDataMakersByTableName[tableName](state);
+}
+const tableDataMakersByTableName = {
+	ASSET: makeAssetsTableData,
+	TRANSACTION: makeGroupTransactionsTableData,
+	ACCOUNT: makeAccountsTableData,
+	FIXED_INCOME_TYPE: makeFixedIncomeTypesTableData,
+	SERVICE_PROVIDER_FEE_TYPE: makeServiceProviderFeeTypesTableData,
+	SPV: makeSPVsTableData
+};
+//#endregion
+//#region src/rwa/context/editor-context.tsx
+const EditorContext = createContext({
+	accounts: [],
+	fixedIncomeTypes: [],
+	portfolio: [],
+	principalLenderAccountId: "",
+	serviceProviderFeeTypes: [],
+	spvs: [],
+	transactions: [],
+	fixedIncomes: [],
+	cashAsset: {
+		id: "",
+		type: "Cash",
+		currency: "USD",
+		balance: 0,
+		spvId: ""
+	},
+	isAllowedToCreateDocuments: false,
+	isAllowedToEditDocuments: false,
+	canUndo: false,
+	canRedo: false,
+	operation: null,
+	onSwitchboardLinkClick: void 0,
+	selectedTableItem: null,
+	selectedTableName: null,
+	getIsFormOpen: () => false,
+	clearSelected: () => {},
+	viewItem: () => {},
+	createItem: () => {},
+	editItem: () => {},
+	onExport: () => {},
+	onClose: () => {},
+	handleUndo: () => {},
+	handleRedo: () => {},
+	onShowRevisionHistory: () => {},
+	handleAction: () => {}
+});
+EditorContext.displayName = "EditorContext";
+function tableReducer(state, action) {
+	switch (action.type) {
+		case "VIEW_ITEM": return {
+			selectedTableItem: action.item,
+			selectedTableName: action.tableName,
+			operation: "view"
+		};
+		case "CREATE_ITEM": return {
+			selectedTableItem: null,
+			selectedTableName: action.tableName,
+			operation: "create"
+		};
+		case "EDIT_ITEM": return {
+			selectedTableItem: action.item,
+			selectedTableName: action.tableName,
+			operation: "edit"
+		};
+		case "CLEAR_SELECTED": return {
+			selectedTableItem: null,
+			selectedTableName: null,
+			operation: null
+		};
+		default: return state;
+	}
+}
+function RWAEditorContextProvider(props) {
+	const { children, state, isAllowedToCreateDocuments, isAllowedToEditDocuments, canUndo, canRedo, undo, redo, editorDispatcher, onExport, onClose, onSwitchboardLinkClick, onShowRevisionHistory } = props;
+	const [editorState, setEditorState] = useState(state);
+	const stateRef = useRef(state);
+	const [tableState, tableDispatch] = useReducer(tableReducer, {
+		selectedTableItem: null,
+		selectedTableName: null,
+		operation: null
+	});
+	const { selectedTableItem, selectedTableName, operation } = tableState;
+	useEffect(() => {
+		if (operation === null || operation === "view") setEditorState(stateRef.current);
+	}, [operation, state]);
+	useEffect(() => {
+		stateRef.current = state;
+	}, [state]);
+	const { accounts, fixedIncomeTypes, portfolio, principalLenderAccountId, serviceProviderFeeTypes, spvs, transactions } = editorState;
+	const cashAsset = useMemo(() => getCashAsset(portfolio), [portfolio]);
+	const fixedIncomes = useMemo(() => getFixedIncomeAssets(portfolio), [portfolio]);
+	const handleUndo = useCallback(() => {
+		if (!canUndo) return;
+		undo();
+	}, [canUndo, undo]);
+	const handleRedo = useCallback(() => {
+		if (!canRedo) return;
+		redo();
+	}, [canRedo, redo]);
+	const getIsFormOpen = useCallback((tableName) => selectedTableName === tableName, [selectedTableName]);
+	const viewItem = useCallback((item, tableName) => {
+		tableDispatch({
+			type: "VIEW_ITEM",
+			item,
+			tableName
+		});
+	}, []);
+	const createItem = useCallback((tableName) => {
+		tableDispatch({
+			type: "CREATE_ITEM",
+			tableName
+		});
+	}, []);
+	const editItem = useCallback((item, tableName) => {
+		tableDispatch({
+			type: "EDIT_ITEM",
+			item,
+			tableName
+		});
+	}, []);
+	const clearSelected = useCallback(() => {
+		tableDispatch({ type: "CLEAR_SELECTED" });
+		setEditorState(stateRef.current);
+	}, []);
+	const handleAction = useCallback((action) => {
+		try {
+			const result = editorDispatcher(action);
+			const actionOperationType = getActionOperationType(action);
+			if (actionOperationType === "DELETE" || !result) {
+				clearSelected();
+				return;
+			}
+			const tableName = getTableNameFor(action);
+			const stateKey = getStateKeyForTableName(tableName);
+			const currentStateForKey = stateRef.current[stateKey];
+			if (typeof currentStateForKey === "string") return;
+			if (actionOperationType === "CREATE") {
+				const newStateForKey = [...currentStateForKey, result];
+				const newState = {
+					...stateRef.current,
+					[stateKey]: newStateForKey
+				};
+				stateRef.current = newState;
+				setEditorState(newState);
+				if (tableName === selectedTableName) {
+					const newTableItem = makeTableData(tableName, newState).find((item) => item.id === result.id);
+					if (newTableItem) viewItem(newTableItem, tableName);
+				}
+			}
+			if (actionOperationType === "EDIT") {
+				const newStateForKey = currentStateForKey.map((item) => item.id === result.id ? result : item);
+				const newState = {
+					...stateRef.current,
+					[stateKey]: newStateForKey
+				};
+				stateRef.current = newState;
+				setEditorState(newState);
+				const newTableItem = makeTableData(tableName, newState).find((item) => item.id === result.id);
+				if (newTableItem) editItem(newTableItem, tableName);
+			}
+		} catch (error) {
+			console.error(`Failed to dispatch action ${action.type}`, error);
+		}
+	}, [
+		clearSelected,
+		editorDispatcher,
+		editItem,
+		selectedTableName,
+		viewItem
+	]);
+	const value = useMemo(() => ({
+		accounts,
+		fixedIncomeTypes,
+		portfolio,
+		principalLenderAccountId,
+		serviceProviderFeeTypes,
+		spvs,
+		transactions,
+		cashAsset,
+		fixedIncomes,
+		canUndo,
+		canRedo,
+		isAllowedToCreateDocuments,
+		isAllowedToEditDocuments,
+		selectedTableItem,
+		selectedTableName,
+		operation,
+		handleAction,
+		handleUndo,
+		handleRedo,
+		viewItem,
+		createItem,
+		editItem,
+		clearSelected,
+		getIsFormOpen,
+		onExport,
+		onClose,
+		onSwitchboardLinkClick,
+		onShowRevisionHistory
+	}), [
+		accounts,
+		canRedo,
+		canUndo,
+		cashAsset,
+		clearSelected,
+		createItem,
+		editItem,
+		fixedIncomeTypes,
+		fixedIncomes,
+		getIsFormOpen,
+		handleAction,
+		handleRedo,
+		handleUndo,
+		isAllowedToCreateDocuments,
+		isAllowedToEditDocuments,
+		onClose,
+		onExport,
+		onShowRevisionHistory,
+		onSwitchboardLinkClick,
+		operation,
+		portfolio,
+		principalLenderAccountId,
+		selectedTableItem,
+		selectedTableName,
+		serviceProviderFeeTypes,
+		spvs,
+		transactions,
+		viewItem
+	]);
+	return /* @__PURE__ */ jsx(EditorContext.Provider, {
+		value,
+		children
+	});
+}
+function useEditorContext() {
+	return useContext(EditorContext);
+}
+//#endregion
+//#region src/rwa/components/table-cell.tsx
+const RWATableCell = (props) => /* @__PURE__ */ jsx("td", {
+	...props,
+	className: twMerge("truncate border-l border-gray-300 px-3 py-2 text-xs font-medium text-gray-900 first:border-l-0", props.className)
+});
+function ItemNumberCell(props) {
+	return /* @__PURE__ */ jsx(RWATableCell, {
+		className: "w-4",
+		children: props.itemNumber
+	});
+}
+function MoreDetailsCell(props) {
+	const { isSelected, tableName, tableItem } = props;
+	const { viewItem, clearSelected } = useEditorContext();
+	return /* @__PURE__ */ jsx(RWATableCell, {
+		className: "w-4",
+		children: /* @__PURE__ */ jsx("button", {
+			className: "flex size-full items-center justify-center",
+			onClick: useCallback(() => {
+				if (isSelected) {
+					clearSelected();
+					return;
+				}
+				viewItem(tableItem, tableName);
+			}, [
+				clearSelected,
+				isSelected,
+				tableItem,
+				tableName,
+				viewItem
+			]),
+			children: /* @__PURE__ */ jsx(Icon, {
+				className: twMerge("text-gray-600", isSelected && "rotate-180"),
+				name: "CaretDown",
+				size: 16
+			})
+		})
+	});
+}
+//#endregion
+//#region src/rwa/components/table-row.tsx
+const RWATableRow = forwardRef(function RWATableRow(props, ref) {
+	const { children, className, ...delegated } = props;
+	return /* @__PURE__ */ jsx("tr", {
+		...delegated,
+		className: twMerge("odd:bg-white even:bg-gray-50", className),
+		ref,
+		children
+	});
+});
+//#endregion
+//#region src/rwa/hooks/useSortTableItems.ts
+/**
+* Takes a list of items and returns a sorted list of items and a sort descriptor.
+* @param items - The list of items to sort.
+* @returns An object containing the sorted items and a sort handler func
+*/
+function useSortTableItems(items) {
+	const [sortedItems, setSortedItems] = useState(items);
+	const [column, setColumn] = useState();
+	const [direction, setDirection] = useState("asc");
+	const sortHandler = useCallback((column, direction) => {
+		setColumn(column);
+		setDirection(direction);
+	}, []);
+	useEffect(() => {
+		if (!items) return;
+		if (!column) {
+			setSortedItems(items);
+			return;
+		}
+		setSortedItems(orderBy(items, [column], [direction]));
+	}, [
+		column,
+		direction,
+		items,
+		sortHandler
+	]);
+	return useMemo(() => ({
+		sortedItems,
+		sortHandler
+	}), [sortedItems, sortHandler]);
+}
+//#endregion
+//#region src/rwa/hooks/useTableData.tsx
+function useTableData(tableName) {
+	const inputs = useEditorContext();
+	const { sortedItems, sortHandler } = useSortTableItems(useMemo(() => {
+		return makeTableData(tableName, inputs);
+	}, [inputs, tableName]));
+	return useMemo(() => ({
+		tableData: sortedItems ?? [],
+		sortHandler
+	}), [sortedItems, sortHandler]);
+}
+//#endregion
+//#region src/rwa/constants/dependent-items.ts
+function useDependentItemProps(tableName, itemId) {
+	const { fixedIncomes, serviceProviderFeeTypes, transactions } = useEditorContext();
+	return useMemo(() => {
+		if (!itemId) return [];
+		switch (tableName) {
+			case "TRANSACTION": return [];
+			case "SPV": return [{
+				dependentTableName: "ASSET",
+				dependentItems: makeDependentAssetsList(tableName, itemId, fixedIncomes)
+			}];
+			case "FIXED_INCOME_TYPE": return [{
+				dependentTableName: "ASSET",
+				dependentItems: makeDependentAssetsList(tableName, itemId, fixedIncomes)
+			}];
+			case "ASSET": return [{
+				dependentTableName: "TRANSACTION",
+				dependentItems: makeDependentTransactionsList(tableName, itemId, transactions)
+			}];
+			case "SERVICE_PROVIDER_FEE_TYPE": return [{
+				dependentTableName: "TRANSACTION",
+				dependentItems: makeDependentTransactionsList(tableName, itemId, transactions)
+			}];
+			case "ACCOUNT": return [{
+				dependentTableName: "TRANSACTION",
+				dependentItems: makeDependentTransactionsList(tableName, itemId, transactions)
+			}, {
+				dependentTableName: "SERVICE_PROVIDER_FEE_TYPE",
+				dependentItems: makeDependentServiceProviderFeeTypesList(itemId, serviceProviderFeeTypes)
+			}];
+		}
+	}, [
+		fixedIncomes,
+		itemId,
+		serviceProviderFeeTypes,
+		tableName,
+		transactions
+	]);
+}
+function makeDependentServiceProviderFeeTypesList(itemId, serviceProviderFeeTypes) {
+	const makeLabel = (asset) => ({
+		id: asset.id,
+		label: asset.name
+	});
+	return serviceProviderFeeTypes.filter((f) => f.accountId === itemId).map(makeLabel);
+}
+function makeDependentAssetsList(tableName, itemId, assets) {
+	const makeLabel = (asset) => ({
+		id: asset.id,
+		label: asset.name
+	});
+	switch (tableName) {
+		case "FIXED_INCOME_TYPE": return assets.filter((asset) => asset.fixedIncomeTypeId === itemId).map(makeLabel);
+		case "SPV": return assets.filter((asset) => asset.spvId === itemId).map(makeLabel);
+	}
+}
+function makeDependentTransactionsList(tableName, itemId, transactions) {
+	const makeLabel = (t, index) => ({
+		id: t.id,
+		label: `Transaction #${index + 1}`
+	});
+	switch (tableName) {
+		case "ASSET": return transactions.filter((t) => t.fixedIncomeTransaction?.assetId === itemId).map(makeLabel);
+		case "ACCOUNT": return transactions.filter((t) => t.cashTransaction.accountId === itemId || t.fixedIncomeTransaction?.accountId === itemId).map(makeLabel);
+		case "SERVICE_PROVIDER_FEE_TYPE": return transactions.filter((t) => t.fees?.some((f) => f.serviceProviderFeeTypeId === itemId)).map(makeLabel);
+	}
+}
+//#endregion
+//#region src/rwa/components/cash-balance-change.tsx
+function CashBalanceChange(props) {
+	const { control } = props;
+	const cashAmount = useWatch({
+		control,
+		name: "cashAmount"
+	});
+	const cashBalanceChange = calculateCashBalanceChange(useWatch({
+		control,
+		name: "type"
+	}), cashAmount, useWatch({
+		control,
+		name: "fees"
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between border-t border-gray-300 bg-gray-100 p-3 font-semibold text-gray-800",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "mr-6 text-sm text-gray-600",
+				children: "Cash Balance Change $USD"
+			}),
+			/* @__PURE__ */ jsx("div", { className: "h-px flex-1 border-b border-dashed border-gray-400" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "pl-8 text-sm text-gray-900",
+				children: /* @__PURE__ */ jsx(FormattedNumber, { value: cashBalanceChange })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/rwa/components/entry-time-label.tsx
+function EntryTimeLabel({ control }) {
+	const value = useWatch({
+		control,
+		name: "entryTime"
+	});
+	return value ? formatDateForDisplay(new Date(value), true, true) : null;
+}
+//#endregion
+//#region src/rwa/components/text-input.tsx
+const RWATableTextInput = forwardRef(function RWATableTextInput(props, ref) {
+	const invalid = props["aria-invalid"] === "true";
+	const { errorMessage, labelClassName, inputClassName, errorMessageClassName, ...inputProps } = props;
+	return /* @__PURE__ */ jsxs("label", {
+		className: labelClassName,
+		children: [/* @__PURE__ */ jsx("input", {
+			...inputProps,
+			className: twMerge("h-8 w-full rounded-md border border-transparent bg-gray-100 p-3 text-right placeholder:text-gray-500 disabled:bg-transparent disabled:p-0 disabled:text-left", invalid && "border-red-900 outline-red-900 placeholder:text-red-800", inputClassName),
+			ref,
+			type: "text"
+		}), invalid && !!errorMessage ? /* @__PURE__ */ jsx("p", {
+			className: twMerge("text-sm text-red-900", errorMessageClassName),
+			role: "alert",
+			children: errorMessage
+		}) : null]
+	});
+});
+//#endregion
+//#region src/rwa/components/number-input.tsx
+function RWANumberInput(props) {
+	const { name, control, currency, rules, errorMessage, errorMessageClassName, numericFormatProps, value: _, onChange: __, ...inputProps } = props;
+	const { allowNegative = false, decimalScale = 2, thousandSeparator = ",", fixedDecimalScale = true } = numericFormatProps ?? {};
+	const prefix = currency === "USD" ? "$" : void 0;
+	const invalid = props["aria-invalid"] === "true";
+	return /* @__PURE__ */ jsx(Controller, {
+		control,
+		name,
+		render: ({ field: { onChange, value, ref } }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(NumericFormat, {
+			...inputProps,
+			allowNegative,
+			customInput: RWATableTextInput,
+			decimalScale,
+			fixedDecimalScale,
+			getInputRef: ref,
+			onValueChange: ({ floatValue }) => onChange(floatValue),
+			prefix,
+			thousandSeparator,
+			value
+		}), invalid && !!errorMessage ? /* @__PURE__ */ jsx("p", {
+			className: twMerge("text-sm text-red-900", errorMessageClassName),
+			role: "alert",
+			children: errorMessage
+		}) : null] }),
+		rules
+	});
+}
+//#endregion
+//#region src/rwa/components/select.tsx
+function RWATableSelect(props) {
+	const { options, name, control, rules, errorMessage, errorMessageClassName, disabled = false, ...restProps } = props;
+	const invalid = props["aria-invalid"] === "true";
+	return /* @__PURE__ */ jsx(Controller, {
+		control,
+		name,
+		render: ({ field: { onChange, onBlur, value } }) => disabled ? /* @__PURE__ */ jsx(Fragment$1, { children: options.find((option) => option.value === value)?.label }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Combobox, {
+			isDisabled: disabled,
+			onBlur,
+			onChange: (option) => !!option && typeof option === "object" && "value" in option && onChange(option.value),
+			options,
+			value: options.find((option) => option.value === value) ?? null,
+			...restProps
+		}), invalid && !!errorMessage ? /* @__PURE__ */ jsx("p", {
+			className: twMerge("text-sm text-red-900", errorMessageClassName),
+			role: "alert",
+			children: errorMessage
+		}) : null] }),
+		rules
+	});
+}
+//#endregion
+//#region src/rwa/components/fee-transactions-table.tsx
+function FeeTransactionsTable(props) {
+	const headings = [
+		"Fees",
+		"Service Provider",
+		"Amount",
+		""
+	];
+	const { canHaveTransactionFees, serviceProviderFeeTypes, serviceProviderFeeTypeOptions, control, errors, isViewOnly, showCreateServiceProviderFeeTypeModal } = props;
+	const { fields, append, remove } = useFieldArray({
+		control,
+		name: "fees"
+	});
+	if (!canHaveTransactionFees) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [fields.length > 0 && /* @__PURE__ */ jsx("div", {
+		className: "bg-gray-50 pl-5 pt-3",
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full border-separate text-xs font-medium",
+			children: [/* @__PURE__ */ jsx("thead", {
+				className: "mb-2",
+				children: /* @__PURE__ */ jsx("tr", { children: headings.map((heading) => /* @__PURE__ */ jsx("th", {
+					className: twMerge("py-2 text-left font-medium text-gray-600", heading === "Amount" && !isViewOnly && "text-right"),
+					children: heading
+				}, heading)) })
+			}), /* @__PURE__ */ jsx("tbody", { children: fields.map((feeInput, index) => {
+				return /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("td", { className: "w-52" }),
+					/* @__PURE__ */ jsx("td", {
+						className: "w-96",
+						children: /* @__PURE__ */ jsx(RWATableSelect, {
+							addItemButtonProps: {
+								onClick: showCreateServiceProviderFeeTypeModal,
+								label: "Add Service Provider"
+							},
+							"aria-invalid": errors.fees?.[index]?.serviceProviderFeeTypeId ? "true" : "false",
+							control,
+							disabled: isViewOnly,
+							name: `fees.${index}.serviceProviderFeeTypeId`,
+							options: serviceProviderFeeTypeOptions,
+							rules: { required: "Service provider is required" }
+						})
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "w-52",
+						children: /* @__PURE__ */ jsx(RWANumberInput, {
+							"aria-invalid": errors.fees?.[index]?.amount ? "true" : "false",
+							control,
+							currency: "USD",
+							disabled: isViewOnly,
+							name: `fees.${index}.amount`,
+							placeholder: "E.g. $1,000.00",
+							rules: {
+								required: "Amount is required",
+								validate: { positive: (value) => !!value && Number(value) > 0 || "Fee amount must be greater than zero" }
+							}
+						})
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "",
+						children: !isViewOnly && /* @__PURE__ */ jsx("button", {
+							className: "flex items-center",
+							onClick: () => remove(index),
+							type: "button",
+							children: /* @__PURE__ */ jsx(Icon, {
+								className: "text-gray-900",
+								name: "Xmark"
+							})
+						})
+					})
+				] }, feeInput.id);
+			}) })]
+		})
+	}), !isViewOnly && /* @__PURE__ */ jsxs("button", {
+		className: "ml-[234px] mt-1 flex w-fit items-center justify-center gap-x-2 rounded-lg bg-white pb-6 text-sm font-semibold text-gray-900",
+		onClick: () => append({
+			amount: null,
+			serviceProviderFeeTypeId: serviceProviderFeeTypes[0]?.id
+		}),
+		children: [/* @__PURE__ */ jsx("span", { children: "Add Fee" }), /* @__PURE__ */ jsx(Icon, {
+			name: "Plus",
+			size: 16
+		})]
+	})] });
+}
+//#endregion
+//#region src/services/viem.ts
+function getIsTransaction(hash) {
+	if (!isHexString(hash)) return false;
+	return hash.length === 66;
+}
+function isHexString(value) {
+	return typeof value === "string" && value.startsWith("0x");
+}
+//#endregion
+//#region src/rwa/components/transaction-reference.tsx
+const TransactionReference = forwardRef(function TransactionReference(props, ref) {
+	const { control, disabled } = props;
+	const value = useWatch({
+		control,
+		name: "txRef"
+	});
+	const maxLength = 46;
+	const maybeShortenedValue = typeof value === "string" && value.length >= maxLength ? `${value.slice(0, maxLength)}...` : value;
+	const isTransaction = getIsTransaction(value);
+	const tooltipContent = /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", { children: value }), isTransaction ? /* @__PURE__ */ jsx("p", {
+		className: "mt-2 text-center",
+		children: /* @__PURE__ */ jsx("a", {
+			className: "text-blue-900 underline",
+			href: `https://etherscan.io/tx/${value}`,
+			children: "View on Etherscan"
+		})
+	}) : null] });
+	if (disabled) return /* @__PURE__ */ jsx(ConnectTooltipProvider, { children: /* @__PURE__ */ jsx(ConnectTooltip, {
+		content: tooltipContent,
+		children: /* @__PURE__ */ jsx("span", { children: maybeShortenedValue })
+	}) });
+	return /* @__PURE__ */ jsx(RWATableTextInput, {
+		...props,
+		ref
+	});
+});
+//#endregion
+//#region src/rwa/components/unit-price.tsx
+function UnitPrice(props) {
+	const { control } = props;
+	const unitPrice = calculateUnitPrice(useWatch({
+		control,
+		name: "cashAmount"
+	}), useWatch({
+		control,
+		name: "fixedIncomeAmount"
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: twMerge("mt-1 w-fit", !props.isViewOnly && "ml-auto"),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-gray-600",
+				children: "Unit Price"
+			}),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "text-gray-900",
+				children: /* @__PURE__ */ jsx(FormattedNumber, {
+					decimalScale: 6,
+					value: unitPrice
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/rwa/components/modal-context.ts
+const ModalContext = createContext({
+	showModal: () => {},
+	closeModal: () => {}
+});
+//#endregion
+//#region src/rwa/components/use-modal.ts
+const useModal = () => {
+	return useContext(ModalContext);
+};
+//#endregion
+//#region src/rwa/utils/form.ts
+function makeFixedIncomeOptionLabel(fixedIncome) {
+	let label = fixedIncome.name;
+	if (fixedIncome.ISIN) label += ` - ${fixedIncome.ISIN}`;
+	if (fixedIncome.CUSIP) label += ` - ${fixedIncome.CUSIP}`;
+	return label;
+}
+//#endregion
+//#region src/rwa/hooks/useFormInputs.tsx
+function useFormInputs(props) {
+	const { tableName, operation, formState: _formState, tableItem: _tableItem, register: _register, watch: _watch, control: _control } = props;
+	const { fixedIncomeTypes, spvs, serviceProviderFeeTypes, accounts, fixedIncomes } = useEditorContext();
+	const { showModal } = useModal();
+	const showCreateItemModal = useCallback((tableName) => () => {
+		showModal("createItem", { tableName });
+	}, [showModal]);
+	return useMemo(() => {
+		switch (tableName) {
+			case tableNames.ASSET: {
+				const tableItem = _tableItem;
+				const register = _register;
+				const { errors } = _formState;
+				const control = _control;
+				const derivedInputsToDisplay = operation !== "create" && !!tableItem ? [
+					{
+						label: "Notional",
+						Input: () => /* @__PURE__ */ jsx(Fragment$1, { children: handleTableDatum(tableItem.notional) })
+					},
+					{
+						label: "Purchase Date",
+						Input: () => /* @__PURE__ */ jsx(Fragment$1, { children: handleTableDatum(tableItem.purchaseDate) })
+					},
+					{
+						label: "Purchase Price",
+						Input: () => /* @__PURE__ */ jsx(Fragment$1, { children: handleTableDatum(tableItem.purchasePrice, 6) })
+					},
+					{
+						label: "Purchase Proceeds",
+						Input: () => /* @__PURE__ */ jsx(Fragment$1, { children: handleTableDatum(tableItem.purchaseProceeds) })
+					}
+				] : [];
+				return { inputs: [
+					{
+						label: "Asset Name",
+						Input: () => /* @__PURE__ */ jsx(RWATableTextInput, {
+							...register("name", {
+								disabled: operation === "view",
+								required: "Asset name is required"
+							}),
+							"aria-invalid": errors.name ? "true" : "false",
+							errorMessage: errors.name?.message,
+							inputClassName: "text-left",
+							placeholder: "E.g. My Asset"
+						})
+					},
+					{
+						label: "CUSIP",
+						Input: () => operation === "view" ? tableItem?.CUSIP ?? "Not available" : /* @__PURE__ */ jsx(RWATableTextInput, {
+							...register("CUSIP", {
+								maxLength: {
+									value: 9,
+									message: "CUSIP cannot be longer than 9 characters"
+								},
+								minLength: {
+									value: 9,
+									message: "CUSIP cannot be shorter than 9 characters"
+								},
+								pattern: {
+									value: /^[a-zA-Z0-9]*$/,
+									message: "CUSIP must be alphanumeric"
+								}
+							}),
+							"aria-invalid": errors.CUSIP ? "true" : "false",
+							errorMessage: errors.CUSIP?.message,
+							placeholder: "E.g. A2345B789"
+						})
+					},
+					{
+						label: "ISIN",
+						Input: () => operation === "view" ? tableItem?.ISIN ?? "Not available" : /* @__PURE__ */ jsx(RWATableTextInput, {
+							...register("ISIN", {
+								maxLength: {
+									value: 12,
+									message: "ISIN cannot be longer than 12 characters"
+								},
+								minLength: {
+									value: 12,
+									message: "ISIN cannot be shorter than 12 characters"
+								},
+								pattern: {
+									value: /^[a-zA-Z0-9]*$/,
+									message: "ISIN must be alphanumeric"
+								}
+							}),
+							"aria-invalid": errors.ISIN ? "true" : "false",
+							errorMessage: errors.ISIN?.message,
+							placeholder: "E.g. 123456789ABC"
+						})
+					},
+					{
+						label: "Maturity",
+						Input: () => /* @__PURE__ */ jsx("input", {
+							className: "h-8 w-full rounded-md bg-gray-100 px-3 disabled:bg-transparent disabled:p-0",
+							step: 1,
+							type: "date",
+							...register("maturity", { disabled: operation === "view" })
+						}),
+						inputLabel: tableItem?.maturity ? formatDateForDisplay(tableItem.maturity, true) : null
+					},
+					{
+						label: "Asset Type",
+						Input: () => /* @__PURE__ */ jsx(RWATableSelect, {
+							addItemButtonProps: {
+								onClick: showCreateItemModal("ASSET"),
+								label: "Create Fixed Income Type"
+							},
+							"aria-invalid": errors.fixedIncomeTypeId ? "true" : "false",
+							control,
+							disabled: operation === "view",
+							errorMessage: errors.fixedIncomeTypeId?.message,
+							name: "fixedIncomeTypeId",
+							options: fixedIncomeTypes.map((t) => ({
+								...t,
+								value: t.id,
+								label: t.name
+							})),
+							rules: { required: "Asset type is required" }
+						})
+					},
+					{
+						label: "SPV",
+						Input: () => /* @__PURE__ */ jsx(RWATableSelect, {
+							addItemButtonProps: {
+								onClick: showCreateItemModal("SPV"),
+								label: "Create SPV"
+							},
+							"aria-invalid": errors.spvId ? "true" : "false",
+							control,
+							disabled: operation === "view",
+							errorMessage: errors.spvId?.message,
+							name: "spvId",
+							options: spvs.map((t) => ({
+								...t,
+								value: t.id,
+								label: t.name
+							})),
+							rules: { required: "SPV is required" }
+						})
+					},
+					...derivedInputsToDisplay
+				] };
+			}
+			case tableNames.TRANSACTION: {
+				const register = _register;
+				const watch = _watch;
+				const { errors } = _formState;
+				const control = _control;
+				const type = watch("type");
+				const isFeesTransaction = !!type && feesTransactions.includes(type);
+				const isAssetTransaction = !!type && assetGroupTransactions.includes(type);
+				const canHaveTransactionFees = !isFeesTransaction;
+				const transactionTypeOptions = allGroupTransactionTypes.map((type) => ({
+					label: groupTransactionTypeLabels[type],
+					value: type
+				}));
+				const fixedIncomeOptions = fixedIncomes.map((fixedIncome) => ({
+					label: makeFixedIncomeOptionLabel(fixedIncome),
+					value: fixedIncome.id
+				}));
+				const serviceProviderFeeTypeOptions = serviceProviderFeeTypes.map((spft) => ({
+					label: `${spft.name} — ${spft.feeType} — ${accounts.find((account) => account.id === spft.accountId)?.reference}`,
+					value: spft.id
+				}));
+				return {
+					inputs: [
+						{
+							label: "Transaction Type",
+							Input: () => /* @__PURE__ */ jsx(RWATableSelect, {
+								"aria-invalid": errors.type ? "true" : "false",
+								control,
+								disabled: operation === "view",
+								errorMessage: errors.type?.message,
+								name: "type",
+								options: transactionTypeOptions,
+								rules: { required: "Transaction type is required" }
+							})
+						},
+						{
+							label: "Entry Time",
+							Input: () => /* @__PURE__ */ jsx("input", {
+								className: "h-8 w-full rounded-md bg-gray-100 px-3 disabled:bg-transparent disabled:p-0",
+								step: 1,
+								type: "datetime-local",
+								...register("entryTime", {
+									disabled: operation === "view",
+									required: "Entry time is required"
+								})
+							}),
+							inputLabel: /* @__PURE__ */ jsx(EntryTimeLabel, { control })
+						},
+						isFeesTransaction ? {
+							label: "Service Provider",
+							Input: () => /* @__PURE__ */ jsx(RWATableSelect, {
+								addItemButtonProps: {
+									onClick: showCreateItemModal("SERVICE_PROVIDER_FEE_TYPE"),
+									label: "Add Service Provider"
+								},
+								control,
+								disabled: operation === "view",
+								name: "serviceProviderFeeTypeId",
+								options: serviceProviderFeeTypeOptions
+							})
+						} : null,
+						isAssetTransaction ? {
+							label: "Asset name",
+							Input: () => /* @__PURE__ */ jsx(RWATableSelect, {
+								addItemButtonProps: {
+									onClick: showCreateItemModal("ASSET"),
+									label: "Create Asset"
+								},
+								"aria-invalid": errors.type ? "true" : "false",
+								control,
+								disabled: operation === "view",
+								errorMessage: errors.type?.message,
+								name: "fixedIncomeId",
+								options: fixedIncomeOptions,
+								rules: { required: "Asset name is required" }
+							})
+						} : void 0,
+						isAssetTransaction ? {
+							label: "Quantity",
+							Input: () => /* @__PURE__ */ jsx(RWANumberInput, {
+								"aria-invalid": errors.fixedIncomeAmount ? "true" : "false",
+								control,
+								disabled: operation === "view",
+								errorMessage: errors.fixedIncomeAmount?.message,
+								name: "fixedIncomeAmount",
+								placeholder: "E.g. 1,000.00",
+								rules: {
+									required: "Quantity is required",
+									validate: { positive: (value) => !!value && Number(value) > 0 || "Asset proceeds must be greater than zero" }
+								}
+							})
+						} : void 0,
+						{
+							label: isAssetTransaction ? "Asset Proceeds" : "Cash Amount",
+							Input: () => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RWANumberInput, {
+								"aria-invalid": errors.cashAmount ? "true" : "false",
+								control,
+								currency: "USD",
+								disabled: operation === "view",
+								errorMessage: errors.cashAmount?.message,
+								name: "cashAmount",
+								placeholder: "E.g. $1,000.00",
+								rules: {
+									required: "Asset proceeds is required",
+									validate: { positive: (value) => !!value && Number(value) > 0 || "Asset proceeds must be greater than zero" }
+								}
+							}), isAssetTransaction ? /* @__PURE__ */ jsx(UnitPrice, {
+								control,
+								isViewOnly: operation === "view"
+							}) : null] })
+						},
+						{
+							label: "Transaction reference",
+							Input: () => /* @__PURE__ */ jsx(TransactionReference, {
+								...register("txRef", { disabled: operation === "view" }),
+								"aria-invalid": errors.txRef ? "true" : "false",
+								control,
+								errorMessage: errors.txRef?.message,
+								placeholder: "E.g. 0x123..."
+							})
+						}
+					].filter(Boolean),
+					additionalInputs: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FeeTransactionsTable, {
+						canHaveTransactionFees,
+						control,
+						errors,
+						isViewOnly: operation === "view",
+						serviceProviderFeeTypeOptions,
+						serviceProviderFeeTypes,
+						showCreateServiceProviderFeeTypeModal: showCreateItemModal("SERVICE_PROVIDER_FEE_TYPE")
+					}), /* @__PURE__ */ jsx(CashBalanceChange, { control })] })
+				};
+			}
+			case tableNames.ACCOUNT: {
+				const register = _register;
+				const { errors } = _formState;
+				return { inputs: [{
+					label: "Account Label",
+					Input: () => /* @__PURE__ */ jsx(RWATableTextInput, {
+						...register("label", {
+							disabled: operation === "view",
+							required: "Account label is required"
+						}),
+						"aria-invalid": errors.label?.type === "required" ? "true" : "false",
+						errorMessage: errors.label?.message,
+						placeholder: "E.g. My Label"
+					})
+				}, {
+					label: "Account Reference",
+					Input: () => /* @__PURE__ */ jsx(RWATableTextInput, {
+						...register("reference", {
+							disabled: operation === "view",
+							required: "Account reference is required"
+						}),
+						"aria-invalid": errors.reference?.type === "required" ? "true" : "false",
+						errorMessage: errors.reference?.message,
+						placeholder: "E.g. bank account number or ETH address"
+					})
+				}] };
+			}
+			case tableNames.SPV: {
+				const register = _register;
+				const { errors } = _formState;
+				return { inputs: [{
+					label: "SPV name",
+					Input: () => /* @__PURE__ */ jsx(RWATableTextInput, {
+						...register("name", {
+							disabled: operation === "view",
+							required: "SPV name is required"
+						}),
+						"aria-invalid": errors.name?.type === "required" ? "true" : "false",
+						errorMessage: errors.name?.message,
+						placeholder: "E.g. My SPV name"
+					})
+				}] };
+			}
+			case tableNames.FIXED_INCOME_TYPE: {
+				const register = _register;
+				const { errors } = _formState;
+				return { inputs: [{
+					label: "Fixed Income Type Name",
+					Input: () => /* @__PURE__ */ jsx(RWATableTextInput, {
+						...register("name", {
+							disabled: operation === "view",
+							required: "Fixed Income Type name is required"
+						}),
+						"aria-invalid": errors.name?.type === "required" ? "true" : "false",
+						errorMessage: errors.name?.message,
+						placeholder: "E.g. My Fixed Income Type name"
+					})
+				}] };
+			}
+			case tableNames.SERVICE_PROVIDER_FEE_TYPE: {
+				const register = _register;
+				const { errors } = _formState;
+				const control = _control;
+				const makeAccountLabel = (account) => {
+					return `${account.label} (${account.reference})`;
+				};
+				const makeAccountOptions = (accounts) => {
+					return accounts.map((account) => ({
+						...account,
+						value: account.id,
+						label: makeAccountLabel(account)
+					}));
+				};
+				return { inputs: [
+					{
+						label: "Service Provider Name",
+						Input: () => /* @__PURE__ */ jsx(RWATableTextInput, {
+							...register("name", {
+								disabled: operation === "view",
+								required: "Service provider name is required"
+							}),
+							"aria-invalid": errors.name?.type === "required" ? "true" : "false",
+							errorMessage: errors.name?.message,
+							placeholder: "E.g. My Service Provider"
+						})
+					},
+					{
+						label: "Fee Type",
+						Input: () => /* @__PURE__ */ jsx(RWATableTextInput, {
+							...register("feeType", {
+								disabled: operation === "view",
+								required: "Fee type is required"
+							}),
+							"aria-invalid": errors.name?.type === "required" ? "true" : "false",
+							errorMessage: errors.name?.message,
+							placeholder: "E.g. My Fee Type"
+						})
+					},
+					{
+						label: "Account",
+						Input: () => /* @__PURE__ */ jsx(RWATableSelect, {
+							addItemButtonProps: {
+								onClick: showCreateItemModal("ACCOUNT"),
+								label: "Create Account"
+							},
+							"aria-invalid": errors.accountId ? "true" : "false",
+							control,
+							disabled: operation === "view",
+							errorMessage: errors.accountId?.message,
+							name: "accountId",
+							options: makeAccountOptions(accounts),
+							rules: { required: "Account is required" }
+						})
+					}
+				] };
+			}
+		}
+	}, [
+		_formState,
+		_control,
+		_register,
+		_tableItem,
+		_watch,
+		accounts,
+		fixedIncomeTypes,
+		fixedIncomes,
+		operation,
+		serviceProviderFeeTypes,
+		showCreateItemModal,
+		spvs,
+		tableName
+	]);
+}
+//#endregion
+//#region src/rwa/hooks/useDefaultFormValues.ts
+function useDefaultFormValues(args) {
+	const { tableName, tableItem, fixedIncomeTypes, spvs, accounts } = args;
+	return useMemo(() => {
+		if (!tableItem) switch (tableName) {
+			case tableNames.ASSET: return {
+				fixedIncomeTypeId: fixedIncomeTypes[0]?.id ?? null,
+				spvId: spvs[0]?.id ?? null,
+				name: null,
+				maturity: null,
+				ISIN: null,
+				CUSIP: null,
+				coupon: null
+			};
+			case tableNames.TRANSACTION: return {
+				type: allGroupTransactionTypes[0],
+				entryTime: isoDateStringToDateInput((/* @__PURE__ */ new Date()).toISOString(), true),
+				cashAmount: null,
+				fixedIncomeId: null,
+				fixedIncomeAmount: null,
+				serviceProviderFeeTypeId: null,
+				fees: null,
+				txRef: null
+			};
+			case tableNames.SPV: return { name: null };
+			case tableNames.SERVICE_PROVIDER_FEE_TYPE: return {
+				name: null,
+				feeType: null,
+				accountId: accounts[0]?.id ?? null
+			};
+			case tableNames.FIXED_INCOME_TYPE: return { name: null };
+			case tableNames.ACCOUNT: return {
+				label: null,
+				reference: null
+			};
+		}
+		switch (tableName) {
+			case tableNames.ASSET: {
+				const item = tableItem;
+				return {
+					id: item.id,
+					fixedIncomeTypeId: item.fixedIncomeTypeId,
+					spvId: item.spvId,
+					name: item.name,
+					maturity: item.maturity ? isoDateStringToDateInput(item.maturity) : null,
+					ISIN: item.ISIN,
+					CUSIP: item.CUSIP,
+					coupon: item.coupon
+				};
+			}
+			case tableNames.TRANSACTION: {
+				const item = tableItem;
+				return {
+					id: item.id,
+					type: item.type,
+					entryTime: item.entryTime ? isoDateStringToDateInput(item.entryTime, true) : null,
+					cashAmount: item.cashTransaction.amount ?? null,
+					fixedIncomeId: item.fixedIncomeTransaction?.assetId ?? null,
+					fixedIncomeAmount: item.fixedIncomeTransaction?.amount ?? null,
+					serviceProviderFeeTypeId: item.serviceProviderFeeTypeId ?? null,
+					fees: item.fees ?? null,
+					txRef: item.txRef ?? null
+				};
+			}
+			case tableNames.SPV: {
+				const item = tableItem;
+				return {
+					id: item.id,
+					name: item.name
+				};
+			}
+			case tableNames.SERVICE_PROVIDER_FEE_TYPE: {
+				const item = tableItem;
+				return {
+					id: item.id,
+					name: item.name,
+					feeType: item.feeType,
+					accountId: item.accountId
+				};
+			}
+			case tableNames.FIXED_INCOME_TYPE: {
+				const item = tableItem;
+				return {
+					id: item.id,
+					name: item.name
+				};
+			}
+			case tableNames.ACCOUNT: {
+				const item = tableItem;
+				return {
+					id: item.id,
+					label: item.label,
+					reference: item.reference
+				};
+			}
+		}
+	}, [
+		accounts,
+		fixedIncomeTypes,
+		spvs,
+		tableItem,
+		tableName
+	]);
+}
+//#endregion
+//#region src/rwa/hooks/useSubmit.ts
+function useWrappedForm(defaultValues) {
+	return useForm({ defaultValues });
+}
+function useSubmit(props) {
+	const { operation, tableName, tableItem } = props;
+	const { handleAction, fixedIncomeTypes, spvs, accounts } = useEditorContext();
+	const defaultValues = useDefaultFormValues({
+		tableName,
+		tableItem,
+		fixedIncomeTypes,
+		spvs,
+		accounts
+	});
+	const action = operation === "create" ? "CREATE" : "EDIT";
+	const formValues = defaultValues;
+	const { register, handleSubmit, reset, watch, control, formState } = useWrappedForm(formValues);
+	useEffect(() => {
+		reset(formValues);
+	}, [formValues, reset]);
+	const submit = handleSubmit(useCallback((payload) => {
+		handleAction({
+			type: `${action}_${tableName}`,
+			payload
+		});
+	}, [
+		action,
+		handleAction,
+		tableName
+	]));
+	return useMemo(() => ({
+		register,
+		reset,
+		watch,
+		control,
+		formState,
+		submit
+	}), [
+		control,
+		formState,
+		register,
+		reset,
+		submit,
+		watch
+	]);
+}
+//#endregion
+//#region src/rwa/hooks/useTableForm.tsx
+function useTableForm(props) {
+	const { operation, tableName, tableItem } = props;
+	const { submit, reset, register, control, formState, watch } = useSubmit({
+		operation,
+		tableName,
+		tableItem
+	});
+	const formInputs = useFormInputs({
+		formState,
+		operation,
+		control,
+		watch,
+		tableItem,
+		tableName,
+		register
+	});
+	return useMemo(() => {
+		return {
+			submit,
+			reset,
+			register,
+			control,
+			formInputs,
+			formState
+		};
+	}, [
+		submit,
+		reset,
+		register,
+		control,
+		formInputs,
+		formState
+	]);
+}
+//#endregion
+//#region src/rwa/components/button.tsx
+const RWAButton = (props) => {
+	return /* @__PURE__ */ jsx(PowerhouseButton, {
+		color: "light",
+		size: "small",
+		...mergeClassNameProps(props, "border border-solid border-gray-300 bg-white px-3 py-1 text-sm text-gray-900"),
+		children: props.children
+	});
+};
+//#endregion
+//#region src/rwa/components/form-inputs.tsx
+function FormInputs(props) {
+	const { inputs } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-md bg-white text-xs font-medium",
+		children: inputs.map(({ label, Input, inputLabel }, index) => /* @__PURE__ */ jsxs("div", {
+			className: twJoin("grid min-h-11 grid-cols-[208px,380px] items-center px-6 text-gray-600 last:rounded-b-md", index % 2 !== 0 && "bg-gray-50"),
+			children: [/* @__PURE__ */ jsx("div", { children: label }), /* @__PURE__ */ jsxs("div", {
+				className: "h-max py-2 text-gray-900",
+				children: [/* @__PURE__ */ jsx(Input, {}), inputLabel ? /* @__PURE__ */ jsx("div", {
+					className: "text-left text-gray-500",
+					children: inputLabel
+				}) : null]
+			}, index)]
+		}, label))
+	});
+}
+//#endregion
+//#region src/rwa/components/item-details.tsx
+const ItemDetails = memo(function ItemDetails(props) {
+	const { tableName } = props;
+	const { showModal, closeModal } = useModal();
+	const { selectedTableItem, operation, viewItem, editItem, clearSelected, handleAction, isAllowedToCreateDocuments, isAllowedToEditDocuments, principalLenderAccountId } = useEditorContext();
+	const dependentItemProps = useDependentItemProps(tableName, selectedTableItem?.id);
+	const hasDependentItems = dependentItemProps.some((p) => p.dependentItems.length > 0);
+	const isEditOperation = operation === "edit";
+	const isCreateOperation = operation === "create";
+	const isViewOperation = operation === "view";
+	const isAllowedToCreateOrEdit = isAllowedToCreateDocuments || isAllowedToEditDocuments;
+	const isAllowedToDeleteItem = !(tableName === "ACCOUNT" && selectedTableItem?.id === principalLenderAccountId);
+	const showCancelButton = !isViewOperation && isAllowedToCreateOrEdit;
+	const showSubmitButton = !isViewOperation && isAllowedToCreateOrEdit;
+	const showDeleteButton = isEditOperation && isAllowedToEditDocuments && isAllowedToDeleteItem;
+	const showEditButton = isViewOperation && isAllowedToEditDocuments;
+	const showCloseButton = isViewOperation;
+	const tableLabel = tableLabels[tableName];
+	const { submit, reset, formInputs: { inputs, additionalInputs } } = useTableForm({
+		tableName,
+		tableItem: selectedTableItem,
+		operation
+	});
+	const handleClose = useCallback(() => {
+		reset();
+		clearSelected();
+	}, [clearSelected, reset]);
+	const handleCancel = useCallback(() => {
+		if (operation === "edit" && !!selectedTableItem) {
+			viewItem(selectedTableItem, tableName);
+			return;
+		}
+		handleClose();
+	}, [
+		handleClose,
+		operation,
+		selectedTableItem,
+		tableName,
+		viewItem
+	]);
+	const showDeleteModal = useCallback(() => {
+		if (!isAllowedToDeleteItem || !hasDependentItems) return;
+		showModal("deleteItem", {
+			tableName,
+			dependentItemProps
+		});
+	}, [
+		isAllowedToDeleteItem,
+		hasDependentItems,
+		showModal,
+		tableName,
+		dependentItemProps
+	]);
+	const handleDelete = useCallback(() => {
+		if (!selectedTableItem) return;
+		if (hasDependentItems) {
+			showDeleteModal();
+			return;
+		}
+		handleAction({
+			type: `DELETE_${tableName}`,
+			payload: selectedTableItem
+		});
+		clearSelected();
+		closeModal();
+	}, [
+		selectedTableItem,
+		hasDependentItems,
+		tableName,
+		handleAction,
+		clearSelected,
+		closeModal,
+		showDeleteModal
+	]);
+	const onEditButtonClick = useCallback(() => {
+		if (!selectedTableItem) return;
+		editItem(selectedTableItem, tableName);
+	}, [
+		selectedTableItem,
+		editItem,
+		tableName
+	]);
+	const closeButton = /* @__PURE__ */ jsx(RWAButton, {
+		className: "text-gray-600",
+		onClick: handleClose,
+		children: "Close"
+	});
+	const cancelButton = /* @__PURE__ */ jsx(RWAButton, {
+		className: "text-gray-600",
+		onClick: handleCancel,
+		children: "Cancel"
+	});
+	const submitButton = /* @__PURE__ */ jsx(RWAButton, {
+		icon: /* @__PURE__ */ jsx(Icon, {
+			name: "Save",
+			size: 16
+		}),
+		iconPosition: "right",
+		onClick: submit,
+		children: isCreateOperation ? "Save" : "Save Edits"
+	});
+	const deleteButton = /* @__PURE__ */ jsx("button", {
+		onClick: handleDelete,
+		children: /* @__PURE__ */ jsx(Icon, {
+			className: "ml-3 text-red-800",
+			name: "Trash",
+			size: 22
+		})
+	});
+	const editButton = /* @__PURE__ */ jsxs(RWAButton, {
+		icon: /* @__PURE__ */ jsx(Icon, {
+			name: "Pencil",
+			size: 16
+		}),
+		iconPosition: "right",
+		onClick: onEditButtonClick,
+		children: ["Edit ", tableLabel]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col rounded-md border border-gray-300 bg-white",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between rounded-t-md border-b border-gray-300 bg-gray-100 p-3 font-semibold text-gray-800",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex items-center",
+					children: selectedTableItem?.itemNumber ? `${tableLabel} #${selectedTableItem.itemNumber}` : `New ${tableLabel}`
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-x-2",
+					children: [
+						showCancelButton ? cancelButton : null,
+						showCloseButton ? closeButton : null,
+						showSubmitButton ? submitButton : null,
+						showDeleteButton ? deleteButton : null,
+						showEditButton ? editButton : null
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(FormInputs, { inputs }),
+			additionalInputs
+		]
+	});
+});
+//#endregion
+//#region src/rwa/constants/columns.ts
+const columnsByTableName = {
+	ASSET: [
+		{
+			key: "name",
+			label: "Name",
+			allowSorting: true
+		},
+		{
+			key: "purchaseDate",
+			label: "Purchase Date",
+			allowSorting: true
+		},
+		{
+			key: "maturity",
+			label: "Maturity",
+			allowSorting: true,
+			displayTime: false
+		},
+		{
+			key: "notional",
+			label: "Notional",
+			allowSorting: true,
+			isNumberColumn: true
+		},
+		{
+			key: "currentValue",
+			label: "Current Value",
+			allowSorting: true,
+			isNumberColumn: true
+		},
+		{
+			key: "purchasePrice",
+			label: "Purchase Price",
+			allowSorting: true,
+			isNumberColumn: true,
+			decimalScale: 6
+		},
+		{
+			key: "purchaseProceeds",
+			label: "Purchase Proceeds",
+			allowSorting: true,
+			isNumberColumn: true
+		},
+		{
+			key: "salesProceeds",
+			label: "Sales Proceeds",
+			allowSorting: true,
+			isNumberColumn: true
+		},
+		{
+			key: "totalDiscount",
+			label: "Total Discount",
+			allowSorting: true,
+			isNumberColumn: true
+		},
+		{
+			key: "realizedSurplus",
+			label: "Realized Surplus",
+			allowSorting: true,
+			isNumberColumn: true
+		}
+	],
+	TRANSACTION: [
+		{
+			key: "typeLabel",
+			label: "Type",
+			allowSorting: true
+		},
+		{
+			key: "entryTime",
+			label: "Entry Time",
+			allowSorting: true
+		},
+		{
+			key: "asset",
+			label: "Asset",
+			allowSorting: true
+		},
+		{
+			key: "quantity",
+			label: "Quantity",
+			allowSorting: true,
+			isNumberColumn: true
+		},
+		{
+			key: "cashAmount",
+			label: "Cash Amount ($)",
+			allowSorting: true,
+			isNumberColumn: true
+		},
+		{
+			key: "totalFees",
+			label: "Total Fees ($)",
+			allowSorting: true,
+			isNumberColumn: true
+		},
+		{
+			key: "cashBalanceChange",
+			label: "Cash Balance Change ($)",
+			allowSorting: true,
+			isNumberColumn: true
+		}
+	],
+	FIXED_INCOME_TYPE: [{
+		key: "name",
+		label: "Name",
+		allowSorting: true
+	}],
+	SPV: [{
+		key: "name",
+		label: "Name",
+		allowSorting: true
+	}],
+	SERVICE_PROVIDER_FEE_TYPE: [
+		{
+			key: "name",
+			label: "Name",
+			allowSorting: true
+		},
+		{
+			key: "feeType",
+			label: "Fee Type",
+			allowSorting: true
+		},
+		{
+			key: "accountName",
+			label: "Account Name",
+			allowSorting: true
+		},
+		{
+			key: "accountReference",
+			label: "Account Reference",
+			allowSorting: true
+		}
+	],
+	ACCOUNT: [{
+		key: "label",
+		label: "Label",
+		allowSorting: true
+	}, {
+		key: "reference",
+		label: "Reference",
+		allowSorting: true
+	}]
+};
+//#endregion
+//#region src/rwa/hooks/useColumnPriority.ts
+/**
+* Hook to handle dropping columns for smaller screens.
+*
+* @param columns - Array of columns to display, column must satisfy TableColumn. The columns will be displayed in the order they are provided.
+* @param columnCountByTableWidth - Object that specifies how many columns to show at different screen widths
+* @param tableContainerRef - Ref to the table container element
+* @param hasIndexColumn - When true, adds an "index" column with the index of the row as the _first column_. This column is exempt from being dropped.
+* @param hasMoreDetailsColumn - When true, adds a "more details" column as the _last column_. This column is exempt from being dropped. This column has no header label by default.
+*/
+function useColumnPriority(props) {
+	const { columnCountByTableWidth, tableContainerRef, columns, hasItemNumberColumn = true, hasMoreDetailsColumn = true } = props;
+	const [parentWidth, setParentWidth] = useState(0);
+	const indexColumn = useMemo(() => hasItemNumberColumn ? {
+		key: "itemNumber",
+		label: "#",
+		allowSorting: true,
+		isSpecialColumn: true
+	} : void 0, [hasItemNumberColumn]);
+	const moreDetailsColumn = useMemo(() => hasMoreDetailsColumn ? {
+		key: "moreDetails",
+		label: "",
+		isSpecialColumn: true
+	} : void 0, [hasMoreDetailsColumn]);
+	const [columnsToShow, setColumnsToShow] = useState([]);
+	const handleResize = useCallback(() => {
+		if (tableContainerRef.current?.parentElement) setParentWidth(tableContainerRef.current.parentElement.offsetWidth);
+	}, [tableContainerRef]);
+	const handleDropColumns = useCallback(() => {
+		const columnCount = getColumnCount(parentWidth, columnCountByTableWidth);
+		setColumnsToShow([
+			indexColumn,
+			...columns?.slice(0, columnCount) ?? [],
+			moreDetailsColumn
+		].filter(Boolean));
+	}, [
+		parentWidth,
+		columns,
+		columnCountByTableWidth,
+		indexColumn,
+		moreDetailsColumn
+	]);
+	useEffect(() => {
+		handleResize();
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, [handleResize]);
+	useEffect(() => {
+		handleDropColumns();
+	}, [handleDropColumns, parentWidth]);
+	return useMemo(() => columnsToShow, [columnsToShow]);
+}
+function getColumnCount(parentElementWidth, columnCountByTableWidth) {
+	let closestKey = 1520;
+	let smallestDifference = Infinity;
+	Object.keys(columnCountByTableWidth).forEach((columnWidthKey) => {
+		const columnWidth = parseInt(columnWidthKey);
+		const difference = Math.abs(parentElementWidth - columnWidth);
+		if (difference < smallestDifference) {
+			smallestDifference = difference;
+			closestKey = parseInt(columnWidthKey);
+		}
+	});
+	return columnCountByTableWidth[closestKey];
+}
+//#endregion
+//#region src/rwa/hooks/useTableHeight.ts
+const defaultRowHeight = 34;
+const defaultHeaderHeight = 42;
+const defaultTwentyRowsPlusHeaderHeight = defaultRowHeight * 20 + defaultHeaderHeight;
+function useTableHeight(props) {
+	const { selectedItemNumber, tableContainerRef, rowRefs, headerRef, hasSpecialLastRow = false } = props;
+	const [maxHeight, setMaxHeight] = useState(`${defaultTwentyRowsPlusHeaderHeight}px`);
+	const selectedRowNumber = selectedItemNumber ? selectedItemNumber - 1 + (hasSpecialLastRow ? 1 : 0) : void 0;
+	const rowHeight = rowRefs.current[1]?.offsetHeight ?? defaultRowHeight;
+	const headerHeight = headerRef.current?.offsetHeight ?? defaultHeaderHeight;
+	const updateTableHeight = useCallback(() => {
+		if (selectedRowNumber === void 0) {
+			setMaxHeight(`${rowHeight * 20 + headerHeight}px`);
+			return;
+		}
+		const tableContainerRect = tableContainerRef.current?.getBoundingClientRect();
+		const rowRect = rowRefs.current[selectedRowNumber]?.getBoundingClientRect();
+		if (rowRect && tableContainerRect) setMaxHeight(`${rowRect.bottom - tableContainerRect.top}px`);
+	}, [
+		headerHeight,
+		rowHeight,
+		rowRefs,
+		selectedRowNumber,
+		tableContainerRef
+	]);
+	useEffect(() => {
+		updateTableHeight();
+	}, [updateTableHeight]);
+	useEffect(() => {
+		const handleScroll = () => {
+			updateTableHeight();
+		};
+		const tableContainerElement = tableContainerRef.current;
+		if (tableContainerElement) tableContainerElement.addEventListener("scroll", handleScroll);
+		return () => {
+			if (tableContainerElement) tableContainerElement.removeEventListener("scroll", handleScroll);
+		};
+	}, [tableContainerRef, updateTableHeight]);
+	return maxHeight;
+}
+//#endregion
+//#region src/rwa/components/table-base.tsx
+/**
+* Base table component
+*
+* @type TItem - Table item type, any record with an "id" field and any string keys
+* @type TableColumn - Specifies how to render a column. Must have a `key` which is a key of TItem, and a `label` which is the column header
+* @param tableData - Array of data to display, data must satisfy TItem
+* @param columns - Array of columns to display, column must satisfy TableColumn. The columns will be displayed in the order they are provided. Use the `useColumnPriority` hook to handle dropping columns for smaller screens.
+* @param children - Content to render above the table rows
+* @param footer - Content to render below the table rows
+* @param renderRow - Function to render a row, must return a React element
+* @param onClickSort - Function to handle sorting, called with key and direction
+* @param hasExpandedRow - Whether the table has an expanded row
+* @param specialFirstRow - Function to render a special first row (like the cash asset for instance), must return a React element
+*/
+function TableBase(props) {
+	const { children, ref, tableData, columns, footer, renderRow, onClickSort, specialFirstRow, specialLastRow, maxHeight, headerRef, hasSelectedItem } = props;
+	const [sortDirection, setSortDirection] = useState(null);
+	const [sortKey, setSortKey] = useState(null);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: twJoin("relative rounded-lg border border-gray-300 bg-white", hasSelectedItem ? "overflow-hidden" : "overflow-scroll"),
+		ref,
+		style: { maxHeight },
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full",
+			children: [/* @__PURE__ */ jsx("thead", {
+				className: "sticky top-0 isolate select-none text-nowrap border-b border-gray-300 bg-gray-100",
+				ref: headerRef,
+				children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", {
+					className: twMerge("group border-l border-gray-300 py-3 pl-3 text-start text-xs font-medium text-gray-600 first:border-l-0", column.allowSorting && "cursor-pointer hover:text-gray-900"),
+					onClick: () => {
+						if (!column.allowSorting) return;
+						let sortDir = "asc";
+						if (sortKey === column.key && sortDirection === "asc") sortDir = "desc";
+						setSortDirection(sortDir);
+						setSortKey(column.key);
+						onClickSort(column.key, sortDir);
+					},
+					children: /* @__PURE__ */ jsxs("div", {
+						className: twMerge("group flex items-center", column.isNumberColumn && "justify-end"),
+						children: [column.label, column.allowSorting ? /* @__PURE__ */ jsx(Icon, {
+							className: twMerge("invisible ml-1 rotate-90", sortKey === column.key && "group-hover:visible", sortDirection === "asc" && "rotate-[270deg]"),
+							name: "ArrowFilledRight",
+							size: 6
+						}) : null]
+					})
+				}, column.key)) })
+			}), /* @__PURE__ */ jsxs("tbody", { children: [
+				children,
+				specialFirstRow?.(columns),
+				tableData?.map((item, index) => renderRow(item, columns, index)),
+				specialLastRow?.(columns)
+			] })]
+		})
+	}), footer] });
+}
+//#endregion
+//#region src/rwa/components/table.tsx
+function Table(props) {
+	const { tableName, tableData, columnCountByTableWidth = defaultColumnCountByTableWidth, sortHandler, specialFirstRow, specialLastRow } = props;
+	const columns = columnsByTableName[tableName];
+	const { operation, selectedTableItem, isAllowedToCreateDocuments, createItem } = useEditorContext();
+	const tableContainerRef = useRef(null);
+	const rowRefs = useRef([]);
+	const headerRef = useRef(null);
+	const columnsToShow = useColumnPriority({
+		columns,
+		columnCountByTableWidth,
+		tableContainerRef
+	});
+	const maxHeight = useTableHeight({
+		tableContainerRef,
+		rowRefs,
+		headerRef,
+		selectedItemNumber: selectedTableItem?.itemNumber,
+		hasSpecialLastRow: !!specialLastRow
+	});
+	const tableLabel = tableLabels[tableName];
+	const onCreateItemClick = useCallback(() => {
+		createItem(tableName);
+	}, [createItem, tableName]);
+	const renderRow = useCallback((tableItem, columns, index) => {
+		const isSelected = selectedTableItem?.id === tableItem.id;
+		return /* @__PURE__ */ jsx(RWATableRow, {
+			ref: (el) => rowRefs.current[index] = el,
+			children: columns.map((column) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				column.key === "itemNumber" && /* @__PURE__ */ jsx(ItemNumberCell, { itemNumber: tableItem.itemNumber }),
+				column.key !== "itemNumber" && column.key !== "moreDetails" && /* @__PURE__ */ jsx(RWATableCell, {
+					className: column.isNumberColumn ? "text-right" : "",
+					children: handleTableDatum(tableItem[column.key], column.decimalScale, column.displayTime)
+				}, column.key),
+				column.key === "moreDetails" && /* @__PURE__ */ jsx(MoreDetailsCell, {
+					isSelected,
+					tableItem,
+					tableName
+				})
+			] }, column.key))
+		}, tableItem.id);
+	}, [selectedTableItem?.id, tableName]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TableBase, {
+		columns: columnsToShow,
+		hasSelectedItem: !!selectedTableItem,
+		headerRef,
+		maxHeight,
+		onClickSort: sortHandler,
+		ref: tableContainerRef,
+		renderRow,
+		specialFirstRow,
+		specialLastRow,
+		tableData
+	}), isAllowedToCreateDocuments && !operation ? /* @__PURE__ */ jsxs("button", {
+		className: "mt-4 flex h-11 w-full items-center justify-center gap-x-2 rounded-lg border border-gray-300 bg-white text-sm font-semibold text-gray-900",
+		onClick: onCreateItemClick,
+		children: [/* @__PURE__ */ jsxs("span", { children: ["Create ", tableLabel] }), /* @__PURE__ */ jsx(Icon, {
+			name: "Plus",
+			size: 14
+		})]
+	}) : null] });
+}
+//#endregion
+//#region src/rwa/components/table-with-form.tsx
+function TableWithForm(props) {
+	const { tableName, specialFirstRow, specialLastRow } = props;
+	const { getIsFormOpen } = useEditorContext();
+	const showForm = getIsFormOpen(tableName);
+	const { tableData, sortHandler } = useTableData(tableName);
+	const shouldPaginate = tableData.length > 20;
+	const { pageItems, pages, goToPage, goToNextPage, goToPreviousPage, goToFirstPage, goToLastPage, hiddenNextPages, isNextPageAvailable, isPreviousPageAvailable } = usePagination(tableData);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: "mb-2 flex w-full justify-end",
+			children: shouldPaginate ? /* @__PURE__ */ jsx(Pagination, {
+				goToFirstPage,
+				goToLastPage,
+				goToNextPage,
+				goToPage,
+				goToPreviousPage,
+				hiddenNextPages,
+				isNextPageAvailable,
+				isPreviousPageAvailable,
+				nextPageLabel: "Next",
+				pages,
+				previousPageLabel: "Previous"
+			}) : null
+		}),
+		/* @__PURE__ */ jsx(Table, {
+			sortHandler,
+			specialFirstRow,
+			specialLastRow,
+			tableData: pageItems,
+			tableName
+		}),
+		showForm ? /* @__PURE__ */ jsx("div", {
+			className: "mt-4 rounded-md bg-white",
+			children: /* @__PURE__ */ jsx(ItemDetails, { tableName })
+		}) : null
+	] });
+}
+//#endregion
+//#region src/rwa/components/accounts-table.tsx
+function AccountsTable() {
+	const { accounts, principalLenderAccountId } = useEditorContext();
+	const principalLenderAccount = accounts.find((account) => account.id === principalLenderAccountId);
+	const renderPrincipalLenderRow = useCallback((c) => /* @__PURE__ */ jsx(RWATableRow, { children: c.map((column) => /* @__PURE__ */ jsx(Fragment$1, { children: column.key === "label" ? /* @__PURE__ */ jsxs(RWATableCell, { children: [principalLenderAccount?.label, /* @__PURE__ */ jsxs("span", {
+		className: "ml-2 inline-flex items-center gap-1 rounded bg-green-100 px-1 font-extralight",
+		children: ["Lender ", /* @__PURE__ */ jsx(Icon, {
+			name: "CheckCircle",
+			size: 14
+		})]
+	})] }) : /* @__PURE__ */ jsx(RWATableCell, {}) }, column.key)) }), [principalLenderAccount?.label]);
+	return /* @__PURE__ */ jsx(TableWithForm, {
+		specialFirstRow: principalLenderAccount?.label ? renderPrincipalLenderRow : void 0,
+		tableName: tableNames.ACCOUNT
+	});
+}
+//#endregion
+//#region src/rwa/components/assets-table.tsx
+function AssetsTable() {
+	const tableName = tableNames.ASSET;
+	const { selectedTableItem, fixedIncomes, cashAsset } = useEditorContext();
+	const cashAssetFormattedAsTableItem = useMemo(() => ({
+		id: "special-first-row",
+		name: "Cash $USD",
+		fixedIncomeTypeId: "--",
+		spvId: "--",
+		maturity: "--",
+		ISIN: "--",
+		CUSIP: "--",
+		coupon: null,
+		notional: cashAsset.balance ?? 0,
+		purchaseDate: "--",
+		purchasePrice: "--",
+		purchaseProceeds: "--",
+		salesProceeds: "--",
+		totalDiscount: "--",
+		realizedSurplus: "--",
+		currentValue: "--"
+	}), [cashAsset.balance]);
+	const totalPurchaseProceeds = sumTotalForProperty(fixedIncomes, "purchaseProceeds");
+	const totalSalesProceeds = sumTotalForProperty(fixedIncomes, "salesProceeds");
+	const totalTotalDiscount = sumTotalForProperty(fixedIncomes, "totalDiscount");
+	const totalRealizedSurplus = sumTotalForProperty(fixedIncomes, "realizedSurplus");
+	return /* @__PURE__ */ jsx(TableWithForm, {
+		specialFirstRow: useCallback((c) => /* @__PURE__ */ jsx(RWATableRow, { children: c.map((column) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			column.key === "name" && /* @__PURE__ */ jsx(RWATableCell, { children: "Cash $USD" }),
+			column.key === "notional" && /* @__PURE__ */ jsx(RWATableCell, {
+				className: "text-right",
+				children: handleTableDatum(cashAssetFormattedAsTableItem[column.key])
+			}, column.key),
+			column.key !== "name" && column.key !== "notional" && /* @__PURE__ */ jsx(RWATableCell, {})
+		] }, column.key)) }), [cashAssetFormattedAsTableItem]),
+		specialLastRow: useCallback((c) => /* @__PURE__ */ jsx(RWATableRow, {
+			className: "sticky bottom-0",
+			children: c.map((column) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				column.key === "name" && /* @__PURE__ */ jsx(RWATableCell, { children: "Totals" }),
+				column.key === "purchaseProceeds" && /* @__PURE__ */ jsx(RWATableCell, {
+					className: "text-right",
+					children: handleTableDatum(totalPurchaseProceeds)
+				}, column.key),
+				column.key === "salesProceeds" && /* @__PURE__ */ jsx(RWATableCell, {
+					className: "text-right",
+					children: handleTableDatum(totalSalesProceeds)
+				}, column.key),
+				column.key === "totalDiscount" && /* @__PURE__ */ jsx(RWATableCell, {
+					className: "text-right",
+					children: handleTableDatum(totalTotalDiscount)
+				}, column.key),
+				column.key === "realizedSurplus" && /* @__PURE__ */ jsx(RWATableCell, {
+					className: "text-right",
+					children: handleTableDatum(totalRealizedSurplus)
+				}, column.key),
+				column.key !== "name" && column.key !== "purchaseProceeds" && column.key !== "salesProceeds" && column.key !== "totalDiscount" && column.key !== "realizedSurplus" && /* @__PURE__ */ jsx(RWATableCell, {})
+			] }, column.key))
+		}), [
+			selectedTableItem,
+			totalPurchaseProceeds,
+			totalRealizedSurplus,
+			totalSalesProceeds,
+			totalTotalDiscount
+		]),
+		tableName
+	});
+}
+//#endregion
+//#region src/rwa/components/modal-form-inputs.tsx
+function ModalFormInputs(props) {
+	const { inputs } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: "bg-white text-xs font-medium",
+		children: inputs.map(({ label, Input }, index) => /* @__PURE__ */ jsxs("div", {
+			className: "mb-4 mt-2 grid gap-1",
+			children: [/* @__PURE__ */ jsx("label", {
+				className: "text-base",
+				children: label
+			}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Input, {}) }, index)]
+		}, label))
+	});
+}
+//#endregion
+//#region src/rwa/components/create-item-modal.tsx
+const RWACreateItemModal = memo(function RWACreateItemModal(props) {
+	const { tableName, open, onOpenChange } = props;
+	const { reset, submit, formInputs: { inputs, additionalInputs } } = useTableForm({
+		operation: "create",
+		tableName
+	});
+	const tableLabel = tableLabels[tableName];
+	const handleCancel = useCallback(() => {
+		reset();
+		onOpenChange(false);
+	}, [onOpenChange, reset]);
+	const handleSubmit = useCallback(async () => {
+		try {
+			await submit();
+			onOpenChange(false);
+		} catch (error) {
+			console.error(error);
+		}
+	}, [onOpenChange, submit]);
+	const buttonStyles = "min-h-[48px] min-w-[142px] text-base font-semibold py-3 px-6 rounded-xl outline-none active:opacity-75 hover:scale-105 transform transition-all";
+	return /* @__PURE__ */ jsx(Modal, {
+		contentProps: { className: "rounded-3xl" },
+		onOpenChange,
+		open,
+		overlayProps: { className: "top-10" },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "w-[400px] p-6 text-slate-300",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "mb-6 flex justify-between",
+					children: [/* @__PURE__ */ jsxs("h1", {
+						className: "text-xl font-bold",
+						children: ["Create ", tableLabel]
+					}), /* @__PURE__ */ jsx("button", {
+						className: "flex size-8 items-center justify-center rounded-md bg-gray-100 text-gray-500 outline-none hover:text-gray-900",
+						onClick: handleCancel,
+						tabIndex: -1,
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "XmarkLight",
+							size: 24
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx(ModalFormInputs, { inputs }),
+				additionalInputs,
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-8 flex justify-between gap-3",
+					children: [/* @__PURE__ */ jsx("button", {
+						className: twMerge(buttonStyles, "flex-1 bg-slate-50 text-slate-800"),
+						onClick: handleCancel,
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx("button", {
+						className: twMerge(buttonStyles, "flex-1 bg-gray-800 text-gray-50"),
+						onClick: handleSubmit,
+						children: "Save"
+					})]
+				})
+			]
+		})
+	});
+});
+//#endregion
+//#region src/rwa/components/delete-item-modal.tsx
+const RWADeleteItemModal = memo(function RWADeleteItemModal(props) {
+	const { tableName, dependentItemProps, onOpenChange, open } = props;
+	const tableLabel = tableLabels[tableName].toLowerCase();
+	const handleCancel = useCallback(() => {
+		onOpenChange?.(false);
+	}, [onOpenChange]);
+	return /* @__PURE__ */ jsx(Modal, {
+		contentProps: { className: "rounded-3xl" },
+		onOpenChange,
+		open,
+		overlayProps: { className: "top-10" },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "w-[400px] p-6 text-slate-300",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "border-b border-slate-50 pb-2 text-2xl font-bold text-gray-800",
+					children: ["Cannot delete ", tableName]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "my-6 flex gap-2 rounded-md bg-orange-100 p-4 text-orange-800",
+					children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Icon, {
+						className: "mt-1 text-orange-800",
+						name: "Error"
+					}) }), /* @__PURE__ */ jsxs("div", { children: [
+						"Warning! Cannot delete this ",
+						tableLabel,
+						" because there are items that depend on it. Please change or delete those first."
+					] })]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "my-6 rounded-md bg-slate-50 p-4 text-slate-200",
+					children: dependentItemProps.map(({ dependentTableName, dependentItems }) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+						className: "mb-0.5 font-semibold",
+						children: `${tableLabels[dependentTableName]}s: `
+					}, 1), dependentItems.map(({ id, label }) => /* @__PURE__ */ jsx("div", { children: label }, id))] }, dependentTableName))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-8 flex justify-between gap-3",
+					children: /* @__PURE__ */ jsx("button", {
+						className: "min-h-12 min-w-36 flex-1 rounded-xl bg-gray-800 px-6 py-3 text-base font-semibold text-gray-50 outline-none transition-all hover:scale-105 active:opacity-75",
+						onClick: handleCancel,
+						children: "Back"
+					})
+				})
+			]
+		})
+	});
+});
+//#endregion
+//#region src/rwa/components/modal-components.ts
+const modals = {
+	createItem: RWACreateItemModal,
+	deleteItem: RWADeleteItemModal
+};
+//#endregion
+//#region src/rwa/components/modal-manager.tsx
+const ModalManager = (props) => {
+	const { children } = props;
+	const [modalProps, setModalProps] = useState();
+	const [modalType, setModalType] = useState();
+	const [open, setOpen] = useState(false);
+	const showModal = useCallback((modalType, props) => {
+		setOpen(true);
+		setModalProps(props);
+		setModalType(modalType);
+	}, []);
+	const closeModal = useCallback(() => {
+		setOpen(false);
+	}, []);
+	const ModalComponent = modalType ? modals[modalType] : null;
+	const value = useMemo(() => ({
+		showModal,
+		closeModal
+	}), [closeModal, showModal]);
+	return /* @__PURE__ */ jsxs(ModalContext.Provider, {
+		value,
+		children: [children, ModalComponent ? /* @__PURE__ */ jsx(ModalComponent, {
+			...modalProps,
+			onOpenChange: setOpen,
+			open
+		}) : null]
+	});
+};
+//#endregion
+//#region src/rwa/components/other-tab.tsx
+function OtherTab() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-rows-4 gap-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("h2", {
+					className: "mb-2 text-lg font-bold",
+					children: "Accounts"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mb-4 text-xs text-gray-600",
+					children: "Add and manage accounts that can be associated with transactions and fees."
+				}),
+				/* @__PURE__ */ jsx(AccountsTable, {})
+			] }),
+			/* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("h2", {
+					className: "mb-2 text-lg font-bold",
+					children: "Fixed Income Types"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mb-4 text-xs text-gray-600",
+					children: "Add and manage fixed income asset types."
+				}),
+				/* @__PURE__ */ jsx(TableWithForm, { tableName: tableNames.FIXED_INCOME_TYPE })
+			] }),
+			/* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("h2", {
+					className: "mb-2 text-lg font-bold",
+					children: "SPVs"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mb-4 text-xs text-gray-600",
+					children: "Add and manage special purpose vehicles (SPVs)."
+				}),
+				/* @__PURE__ */ jsx(TableWithForm, { tableName: tableNames.SPV })
+			] }),
+			/* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("h2", {
+					className: "mb-2 text-lg font-bold",
+					children: "Service Provider Fee Types"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mb-4 text-xs text-gray-600",
+					children: "Add and manage service providers and their associated fee types."
+				}),
+				/* @__PURE__ */ jsx(TableWithForm, { tableName: tableNames.SERVICE_PROVIDER_FEE_TYPE })
+			] })
+		]
+	});
+}
+//#endregion
+//#region src/rwa/components/rwa-tab-content.tsx
+function RwaTabContent(props) {
+	const { label, description, children } = props;
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("h1", {
+			className: "mb-2 text-lg font-bold",
+			children: label
+		}),
+		/* @__PURE__ */ jsx("p", {
+			className: "mb-4 text-xs text-gray-600",
+			children: description
+		}),
+		children
+	] });
+}
+//#endregion
+//#region src/rwa/components/portfolio-tab.tsx
+function PortfolioTab() {
+	return /* @__PURE__ */ jsx(RwaTabContent, {
+		description: "Details on the distribution of assets among different financial institutions or investment vehicles.",
+		label: "Portfolio",
+		children: /* @__PURE__ */ jsx(AssetsTable, {})
+	});
+}
+//#endregion
+//#region src/rwa/components/group-transactions-table.tsx
+function GroupTransactionsTable() {
+	const tableName = tableNames.TRANSACTION;
+	const { getIsFormOpen, fixedIncomes } = useEditorContext();
+	const showForm = getIsFormOpen(tableName);
+	const { tableData, sortHandler } = useTableData(tableName);
+	const [filteredTableData, setFilteredTableData] = useState(tableData);
+	const [filterAssetId, setFilterAssetId] = useState();
+	const [filterTypes, setFilterTypes] = useState([]);
+	const shouldPaginate = filteredTableData.length > 20;
+	useEffect(() => {
+		if (!filterAssetId && !filterTypes.length) {
+			setFilteredTableData(tableData);
+			return;
+		}
+		setFilteredTableData(tableData.filter((transaction) => {
+			if (filterAssetId && filterTypes.length) return transaction.fixedIncomeTransaction?.assetId === filterAssetId && filterTypes.includes(transaction.type);
+			if (filterAssetId) return transaction.fixedIncomeTransaction?.assetId === filterAssetId;
+			if (filterTypes.length) return filterTypes.includes(transaction.type);
+		}));
+	}, [
+		filterAssetId,
+		filterTypes,
+		tableData
+	]);
+	const filterByAssetOptions = useMemo(() => fixedIncomes.map((asset) => ({
+		label: makeFixedIncomeOptionLabel(asset),
+		value: asset.id
+	})), [fixedIncomes]);
+	const filterByTypeOptions = useMemo(() => allGroupTransactionTypes.map((type) => ({
+		label: groupTransactionTypeLabels[type],
+		value: type
+	})), []);
+	const { pageItems, pages, goToPage, goToNextPage, goToPreviousPage, goToFirstPage, goToLastPage, hiddenNextPages, isNextPageAvailable, isPreviousPageAvailable } = usePagination(filteredTableData);
+	const handleFilterByAssetChange = useCallback((update) => {
+		if (!update || !(typeof update === "object") || !("value" in update)) {
+			setFilterAssetId(void 0);
+			return;
+		}
+		const { value: assetId } = update;
+		setFilterAssetId(assetId);
+	}, []);
+	const handleFilterByTypeChange = useCallback((update) => {
+		if (!update || !Array.isArray(update)) {
+			setFilterTypes([]);
+			return;
+		}
+		setFilterTypes(update.map(({ value }) => value));
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "mb-2 flex gap-2",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "min-w-72 max-w-96",
+					children: /* @__PURE__ */ jsx(Combobox, {
+						isClearable: true,
+						onChange: handleFilterByAssetChange,
+						options: filterByAssetOptions,
+						placeholder: "Filter by Asset"
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "min-w-72 max-w-96",
+					children: /* @__PURE__ */ jsx(Combobox, {
+						isClearable: true,
+						isMulti: true,
+						onChange: handleFilterByTypeChange,
+						options: filterByTypeOptions,
+						placeholder: "Filter by Type"
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex w-full justify-end",
+					children: shouldPaginate ? /* @__PURE__ */ jsx(Pagination, {
+						goToFirstPage,
+						goToLastPage,
+						goToNextPage,
+						goToPage,
+						goToPreviousPage,
+						hiddenNextPages,
+						isNextPageAvailable,
+						isPreviousPageAvailable,
+						nextPageLabel: "Next",
+						pages,
+						previousPageLabel: "Previous"
+					}) : null
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx(Table, {
+			sortHandler,
+			tableData: pageItems,
+			tableName
+		}),
+		showForm ? /* @__PURE__ */ jsx("div", {
+			className: "mt-4 rounded-md bg-white",
+			children: /* @__PURE__ */ jsx(ItemDetails, { tableName })
+		}) : null
+	] });
+}
+//#endregion
+//#region src/rwa/components/transactions-tab.tsx
+function TransactionsTab() {
+	return /* @__PURE__ */ jsx(RwaTabContent, {
+		description: "Details on the distribution of assets among different financial institutions or investment vehicles.",
+		label: "Transactions",
+		children: /* @__PURE__ */ jsx(GroupTransactionsTable, {})
+	});
+}
+//#endregion
+//#region src/rwa/components/tabs.tsx
+function RWATabs() {
+	const tabs = [
+		"Portfolio",
+		"Transactions",
+		"Other"
+	];
+	const { onSwitchboardLinkClick, onExport, onClose, onShowRevisionHistory, clearSelected } = useEditorContext();
+	return /* @__PURE__ */ jsxs(Root, {
+		defaultValue: "Portfolio",
+		onValueChange: useCallback(() => {
+			clearSelected();
+		}, [clearSelected]),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between",
+			children: [/* @__PURE__ */ jsx(List, {
+				className: "flex gap-x-2 rounded-xl bg-slate-50 p-1 text-sm font-semibold text-gray-600 outline-none",
+				children: tabs.map((tab) => /* @__PURE__ */ jsx(Trigger, {
+					className: "data-[state='active']:tab-shadow data-disabled:cursor-not-allowed data-disabled:text-gray-400 h-7 w-32 rounded-lg transition duration-300 data-[state='active']:bg-gray-50 data-[state='active']:text-gray-900",
+					value: tab,
+					children: tab
+				}, tab))
+			}), /* @__PURE__ */ jsx(EditorActionButtons, {
+				onClose,
+				onExport,
+				onShowRevisionHistory,
+				onSwitchboardLinkClick
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-3 rounded-md bg-slate-50 p-8",
+			children: [
+				/* @__PURE__ */ jsx(Content, {
+					value: "Portfolio",
+					children: /* @__PURE__ */ jsx(PortfolioTab, {})
+				}),
+				/* @__PURE__ */ jsx(Content, {
+					value: "Transactions",
+					children: /* @__PURE__ */ jsx(TransactionsTab, {})
+				}),
+				/* @__PURE__ */ jsx(Content, {
+					value: "Other",
+					children: /* @__PURE__ */ jsx(OtherTab, {})
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/rwa/components/editor.tsx
+function RWAEditor() {
+	return /* @__PURE__ */ jsx(ModalManager, { children: /* @__PURE__ */ jsx(RWATabs, {}) });
+}
+//#endregion
+//#region src/rwa/components/form-row.tsx
+const RWAFormRow = ({ label, value, ...divProps }) => /* @__PURE__ */ jsxs("div", {
+	...mergeClassNameProps(divProps, "flex items-center px-6 text-xs"),
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "text-gray-600",
+		children: label
+	}), /* @__PURE__ */ jsx("div", {
+		className: "text-gray-900",
+		children: value ? value : "--"
+	})]
+});
+//#endregion
+//#region src/rwa/components/header-label.tsx
+const RWATableHeaderLabel = (props) => {
+	const { label, ...divProps } = props;
+	return /* @__PURE__ */ jsx("th", {
+		scope: "col",
+		...divProps,
+		children: label
+	});
+};
+//#endregion
+export { ASSET_PURCHASE, ASSET_SALE, AccountsTable, AssetsTable, CashBalanceChange, EntryTimeLabel, FEES_INCOME, FEES_PAYMENT, FeeTransactionsTable, FormInputs, FormattedNumber, GroupTransactionsTable, INTEREST_INCOME, INTEREST_PAYMENT, ItemDetails, ItemNumberCell, ModalContext, ModalFormInputs, ModalManager, MoreDetailsCell, OtherTab, PRINCIPAL_DRAW, PRINCIPAL_RETURN, PortfolioTab, RWAButton, RWACreateItemModal, RWADeleteItemModal, RWAEditor, RWAEditorContextProvider, RWAFormRow, RWANumberInput, RWATableCell, RWATableHeaderLabel, RWATableRow, RWATableSelect, RWATableTextInput, RWATabs, RwaTabContent, Table, TableBase, TableWithForm, TransactionReference, TransactionsTab, UnitPrice, allGroupTransactionTypes, assetGroupTransactions, assetTransactionSignByTransactionType, calculateCashBalanceChange, calculateCurrentValue, calculateSumQuantity, calculateUnitPrice, cashTransactionSignByTransactionType, columnsByTableName, defaultColumnCountByTableWidth, deleteEditorActionInputsByTableName, editorStateKeysByTableName, feesTransactions, formatDateForDisplay, getActionOperationType, getCashAsset, getColumnCount, getFixedIncomeAssets, getStateKeyForTableName, getTableNameFor, getTimeZone, groupTransactionTypeLabels, handleDateInTable, handleTableDatum, interestTransactions, isAssetGroupTransactionType, isCashAsset, isFixedIncomeAsset, isISODate, isoDateStringToDateInput, makeDependentAssetsList, makeDependentServiceProviderFeeTypesList, makeDependentTransactionsList, makeFixedIncomeOptionLabel, makeTableData, math, modals, principalGroupTransactions, sumTotalForProperty, tableDataMakersByTableName, tableLabels, tableNames, useColumnPriority, useDefaultFormValues, useDependentItemProps, useEditorContext, useFormInputs, useModal, useSortTableItems, useSubmit, useTableData, useTableForm, useTableHeight };
+
+//# sourceMappingURL=index.js.map