@onehat/ui 0.4.96 → 0.4.97

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.96",
+	"version": "0.4.97",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Container/Container.js

@@ -118,77 +118,81 @@ function Container(props) {
 		westWidthRef = useRef(westInitialWidth),
 		[isReady, setIsReady] = useState(false),
 		[isComponentsDisabled, setIsComponentsDisabled] = useState(false),
-		[localNorthIsCollapsed, setLocalNorthIsCollapsed] = useState(northInitialIsCollapsed),
-		[localSouthIsCollapsed, setLocalSouthIsCollapsed] = useState(southInitialIsCollapsed),
-		[localEastIsCollapsed, setLocalEastIsCollapsed] = useState(eastInitialIsCollapsed),
-		[localWestIsCollapsed, setLocalWestIsCollapsed] = useState(westInitialIsCollapsed),
+		localNorthIsCollapsedRef = useRef(northInitialIsCollapsed),
+		localSouthIsCollapsedRef = useRef(southInitialIsCollapsed),
+		localEastIsCollapsedRef = useRef(eastInitialIsCollapsed),
+		localWestIsCollapsedRef = useRef(westInitialIsCollapsed),
 		setNorthIsCollapsed = (bool) => {
 			if (setExternalNorthIsCollapsed) {
 				setExternalNorthIsCollapsed(bool);
 			} else {
-				setLocalNorthIsCollapsed(bool);
+				localNorthIsCollapsedRef.current = bool;
 			}
 
 			if (id) {
 				setSaved(id + '-northIsCollapsed', bool);
 			}
+			forceUpdate();
 		},
 		getNorthIsCollapsed = () => {
 			if (setExternalNorthIsCollapsed) {
 				return northIsCollapsed;
 			}
-			return localNorthIsCollapsed;
+			return localNorthIsCollapsedRef.current;
 		},
 		setSouthIsCollapsed = (bool) => {
 			if (setExternalSouthIsCollapsed) {
 				setExternalSouthIsCollapsed(bool);
 			} else {
-				setLocalSouthIsCollapsed(bool);
+				localSouthIsCollapsedRef.current = bool;
 			}
 
 			if (id) {
 				setSaved(id + '-southIsCollapsed', bool);
 			}
+			forceUpdate();
 		},
 		getSouthIsCollapsed = () => {
 			if (setExternalSouthIsCollapsed) {
 				return southIsCollapsed;
 			}
-			return localSouthIsCollapsed;
+			return localSouthIsCollapsedRef.current;
 		},
 		setEastIsCollapsed = (bool) => {
 			if (setExternalEastIsCollapsed) {
 				setExternalEastIsCollapsed(bool);
 			} else {
-				setLocalEastIsCollapsed(bool);
+				localEastIsCollapsedRef.current = bool;
 			}
 
 			if (id) {
 				setSaved(id + '-eastIsCollapsed', bool);
 			}
+			forceUpdate();
 		},
 		getEastIsCollapsed = () => {
 			if (setExternalEastIsCollapsed) {
 				return eastIsCollapsed;
 			}
-			return localEastIsCollapsed;
+			return localEastIsCollapsedRef.current;
 		},
 		setWestIsCollapsed = (bool) => {
 			if (setExternalWestIsCollapsed) {
 				setExternalWestIsCollapsed(bool);
 			} else {
-				setLocalWestIsCollapsed(bool);
+				localWestIsCollapsedRef.current = bool;
 			}
 
 			if (id) {
 				setSaved(id + '-westIsCollapsed', bool);
 			}
+			forceUpdate();
 		},
 		getWestIsCollapsed = () => {
 			if (setExternalWestIsCollapsed) {
 				return westIsCollapsed;
 			}
-			return localWestIsCollapsed;
+			return localWestIsCollapsedRef.current;
 		},
 		setNorthHeight = (height) => {
 			if (!getNorthIsCollapsed()) {
@@ -348,7 +352,7 @@ function Container(props) {
 		return null;
 	}
 	
-	let componentProps = {},
+	let componentProps = { _panel: { ...center?.props?._panel }, },
 		wrapperProps = null,
 		centerComponent = null,
 		northComponent = null,
@@ -360,15 +364,15 @@ function Container(props) {
 		westComponent = null,
 		westSplitter = null;
 
-	componentProps.isCollapsible = false;
-	componentProps.isDisabled = isDisabled || isComponentsDisabled;
+	componentProps._panel.isCollapsible = false;
+	componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
 	centerComponent = cloneElement(center, componentProps);
 	if (north) {
-		componentProps = {};
+		componentProps = { _panel: { ...north.props?._panel }, };
 		wrapperProps = {};
 		
-		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = 'h-full w-full ' + (north.props.className || '');
+		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps._panel.className = 'h-full w-full ' + (north.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
 			if (height && height !== northHeight) {
@@ -387,9 +391,9 @@ function Container(props) {
 				wrapperProps.style = { height: northHeight, };
 			}
 		}
-		componentProps.collapseDirection = VERTICAL;
-		componentProps.isCollapsed = getNorthIsCollapsed();
-		componentProps.setIsCollapsed = setNorthIsCollapsed;
+		componentProps._panel.collapseDirection = VERTICAL;
+		componentProps._panel.isCollapsed = getNorthIsCollapsed();
+		componentProps._panel.setIsCollapsed = setNorthIsCollapsed;
 		if (isWeb && northIsResizable) {
 			northSplitter = <Splitter
 								mode={VERTICAL}
@@ -402,11 +406,11 @@ function Container(props) {
 						</BoxNative>;
 	}
 	if (south) {
-		componentProps = {};
+		componentProps = { _panel: { ...south.props?._panel }, };
 		wrapperProps = {};
 		
-		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = 'h-full w-full ' + (south.props.className || '');
+		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps._panel.className = 'h-full w-full ' + (south.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const height = parseFloat(e.nativeEvent.layout.height);
 			if (height && height !== getSouthHeight()) {
@@ -425,9 +429,9 @@ function Container(props) {
 				wrapperProps.style = { height: southHeight, };
 			}
 		}
-		componentProps.collapseDirection = VERTICAL;
-		componentProps.isCollapsed = getSouthIsCollapsed();
-		componentProps.setIsCollapsed = setSouthIsCollapsed;
+		componentProps._panel.collapseDirection = VERTICAL;
+		componentProps._panel.isCollapsed = getSouthIsCollapsed();
+		componentProps._panel.setIsCollapsed = setSouthIsCollapsed;
 		if (isWeb && southIsResizable) {
 			southSplitter = <Splitter
 								mode={VERTICAL}
@@ -440,11 +444,11 @@ function Container(props) {
 						</BoxNative>;
 	}
 	if (east) {
-		componentProps = {};
+		componentProps = { _panel: { ...east.props?._panel }, };
 		wrapperProps = {};
 		
-		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = 'h-full w-full ' + (east.props.className || '');
+		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps._panel.className = 'h-full w-full ' + (east.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getEastWidth()) {
@@ -463,9 +467,9 @@ function Container(props) {
 				wrapperProps.style = { width: eastWidth, };
 			}
 		}
-		componentProps.collapseDirection = HORIZONTAL;
-		componentProps.isCollapsed = getEastIsCollapsed();
-		componentProps.setIsCollapsed = setEastIsCollapsed;
+		componentProps._panel.collapseDirection = HORIZONTAL;
+		componentProps._panel.isCollapsed = getEastIsCollapsed();
+		componentProps._panel.setIsCollapsed = setEastIsCollapsed;
 		if (isWeb && eastIsResizable) {
 			eastSplitter = <Splitter
 								mode={HORIZONTAL}
@@ -478,11 +482,11 @@ function Container(props) {
 						</BoxNative>;
 	}
 	if (west) {
-		componentProps = {};
+		componentProps = { _panel: { ...west.props?._panel }, };
 		wrapperProps = {};
 		
-		componentProps.isDisabled = isDisabled || isComponentsDisabled;
-		componentProps.className = 'h-full w-full ' + (west.props.className || '');
+		componentProps._panel.isDisabled = isDisabled || isComponentsDisabled;
+		componentProps._panel.className = 'h-full w-full ' + (west.props.className || '');
 		wrapperProps.onLayout = (e) => {
 			const width = parseFloat(e.nativeEvent.layout.width);
 			if (width && width !== getWestWidth()) {
@@ -501,9 +505,9 @@ function Container(props) {
 				wrapperProps.style = { width: westWidth, };
 			}
 		}
-		componentProps.collapseDirection = HORIZONTAL;
-		componentProps.isCollapsed = getWestIsCollapsed();
-		componentProps.setIsCollapsed = setWestIsCollapsed;
+		componentProps._panel.collapseDirection = HORIZONTAL;
+		componentProps._panel.isCollapsed = getWestIsCollapsed();
+		componentProps._panel.setIsCollapsed = setWestIsCollapsed;
 		if (isWeb && westIsResizable) {
 			westSplitter = <Splitter
 								mode={HORIZONTAL}
@@ -517,17 +521,17 @@ function Container(props) {
 	}
 	return <VStack className="Container-all w-full flex-1">
 				{northComponent}
-				{!northIsCollapsed && !localNorthIsCollapsed && northSplitter}
+				{!getNorthIsCollapsed() && northSplitter}
 				<HStack className="Container-mid w-full flex-[100]">
 					{westComponent}
-					{!westIsCollapsed && !localWestIsCollapsed && westSplitter}
+					{!getWestIsCollapsed() && westSplitter}
 					<VStack className="Container-center h-full overflow-auto flex-[100]">
 						{centerComponent}
 					</VStack>
-					{!eastIsCollapsed && !localEastIsCollapsed && eastSplitter}
+					{!getEastIsCollapsed() && eastSplitter}
 					{eastComponent}
 				</HStack>
-				{!southIsCollapsed && !localSouthIsCollapsed && southSplitter}
+				{!getSouthIsCollapsed() && southSplitter}
 				{southComponent}
 			</VStack>;
 }

package/src/Components/Form/Form.js

@@ -522,6 +522,8 @@ function Form(props) {
 			}
 			let {
 					type,
+					editorType: itemEditorType,
+					viewerType,
 					title,
 					name,
 					isEditable = true,
@@ -560,12 +562,18 @@ function Form(props) {
 			}
 			if (!type) {
 				if (isEditable) {
-					const {
-							type: t,
-							...p
-						} = propertyDef?.editorType;
-					type = t;
-					editorTypeProps = p;
+					if (itemEditorType) {
+						type = itemEditorType;
+					} else {
+						const {
+								type: t,
+								...p
+							} = propertyDef?.editorType;
+						type = t;
+						editorTypeProps = p;
+					}
+				} else if (viewerType) {
+					type = viewerType;
 				} else if (propertyDef?.viewerType) {
 					const {
 							type: t,

package/src/Components/Grid/Grid.js

@@ -423,7 +423,16 @@ function GridComponent(props) {
 			}
 		},
 		getFooterToolbarItems = () => {
-			const items = _.map(additionalToolbarButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
+			// Process additionalToolbarButtons to evaluate getIsButtonDisabled functions
+			const processedButtons = _.map(additionalToolbarButtons, (config) => {
+				const processedConfig = { ...config };
+				// If the button has an getIsButtonDisabled function, evaluate it with current selection
+				if (_.isFunction(config.getIsButtonDisabled)) {
+					processedConfig.isDisabled = config.getIsButtonDisabled(selection);
+				}
+				return processedConfig;
+			});
+			const items = _.map(processedButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
 			if (canRowsReorder && CURRENT_MODE === UI_MODE_WEB) { // DND is currently web-only  TODO: implement for RN
 				items.unshift(<IconButton
 					{...testProps('reorderBtn')}
@@ -476,33 +485,41 @@ function GridComponent(props) {
 									}
 									break;
 								case DOUBLE_CLICK:
-									if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
-										onRowClick(item, e); // so reselect it
-									}
-
-									if (UiGlobals.doubleClickingGridRowOpensEditorInViewMode) { // global setting
-										if (onView) {
-											if (canUser && !canUser(VIEW)) { // permissions
-												return;
-											}
-											onView(!props.isEditorViewOnly);
+									if (editorType === EDITOR_TYPE__SIDE) {
+										// For side-editors, a double-click just acts like a single click
+										if (!getIsEditorShown()) {
+											onRowClick(item, e); // sets selection
 										}
 									} else {
-										let canDoEdit = false,
-											canDoView = false;
-										if (onEdit && canUser && canUser(EDIT) && (!canRecordBeEdited || canRecordBeEdited(selection)) && !props.disableEdit && !isEditorViewOnly) {
-											canDoEdit = true;
-										} else
-										if (onView && canUser && canUser(VIEW) && !props.disableView) {
-											canDoView = true;
+										if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
+											onRowClick(item, e); // so reselect it
 										}
+										if (UiGlobals.doubleClickingGridRowOpensEditorInViewMode) { // global setting
+											if (onView) {
+												if (canUser && !canUser(VIEW)) { // permissions
+													return;
+												}
+												onView(!props.isEditorViewOnly);
+											}
+										} else {
+											let canDoEdit = false,
+												canDoView = false;
+											if (onEdit && canUser && canUser(EDIT) && (!canRecordBeEdited || canRecordBeEdited(selection)) && !props.disableEdit && !isEditorViewOnly) {
+												canDoEdit = true;
+											} else
+											if (onView && canUser && canUser(VIEW) && !props.disableView) {
+												canDoView = true;
+											}
 
-										if (canDoEdit) {
-											onEdit();
-										} else if (canDoView) {
-											onView();
+											if (canDoEdit) {
+												onEdit();
+											} else if (canDoView) {
+												onView();
+											}
 										}
+
 									}
+
 									break;
 								case TRIPLE_CLICK:
 									break;
@@ -1562,10 +1579,19 @@ function GridComponent(props) {
 		const
 			currentLength = entities?.length || 0,
 			wasEmpty = previousEntitiesLength.current === 0,
-			isNowPopulated = currentLength > 0;
+			isNowPopulated = currentLength > 0,
+			hasPhantomRecord = entities?.some(entity => entity?.isPhantom);
+			
+		// NOTE: The Repository was reloading when a phantom record was added,
+		// and this broke the Editor because selection was being reset to zero.
+		// This is because adjustPageSizeToHeight calls setPageSize,
+		// which calls _onChangePagination, which calls reload.
+		// The reloaded repository doesn’t get the new phantom record,
+		// so it’s not found, and selection goes to zero.
+		// So we skip this adjustment when there is a phantom record.
 		
 		// Only remeasure the FIRST time rows appear after being empty
-		if (autoAdjustPageSizeToHeight && wasEmpty && isNowPopulated && !hasRemeasuredAfterRowsAppeared.current) {
+		if (!hasPhantomRecord && autoAdjustPageSizeToHeight && wasEmpty && isNowPopulated && !hasRemeasuredAfterRowsAppeared.current) {
 			// Rows just appeared for the first time - restart measurement cycle to use actual heights
 			if (DEBUG) {
 				console.log(`${getMeasurementPhase()}, useEffect 5 - rows appeared for first time, restarting measurement cycle`);
@@ -1602,13 +1628,24 @@ function GridComponent(props) {
 		// first time through, render a placeholder so we can get container dimensions
 		return <VStackNative
 					onLayout={(e) => {
-						if (DEBUG) {
-							console.log(`${getMeasurementPhase()}, placeholder onLayout, call adjustPageSizeToHeight()`);
-						}
-						const containerHeight = e.nativeEvent.layout.height;
-						adjustPageSizeToHeight(containerHeight);
-						if (DEBUG) {
-							console.log(`${getMeasurementPhase()}, placeholder onLayout, call setIsInited(true)`);
+						const hasPhantomRecord = entities?.some(entity => entity?.isPhantom);
+						if (!hasPhantomRecord) {
+							// NOTE: The Repository was reloading when a phantom record was added,
+							// and this broke the Editor because selection was being reset to zero.
+							// This is because adjustPageSizeToHeight calls setPageSize,
+							// which calls _onChangePagination, which calls reload.
+							// The reloaded repository doesn’t get the new phantom record,
+							// so it’s not found, and selection goes to zero.
+							// So we skip this adjustment when there is a phantom record.
+
+							if (DEBUG) {
+								console.log(`${getMeasurementPhase()}, placeholder onLayout, call adjustPageSizeToHeight()`);
+							}
+							const containerHeight = e.nativeEvent.layout.height;
+							adjustPageSizeToHeight(containerHeight);
+							if (DEBUG) {
+								console.log(`${getMeasurementPhase()}, placeholder onLayout, call setIsInited(true)`);
+							}
 						}
 						setIsInited(true);
 					}}
@@ -1785,14 +1822,11 @@ function GridComponent(props) {
 							)}
 						>
 							{grid}
-							{/* Loading overlay during measurement phases to prevent visual flashing */}
-							{autoAdjustPageSizeToHeight && 
-							(getMeasurementPhase() === PHASES__INITIAL || getMeasurementPhase() === PHASES__MEASURING) && 
-							entities?.length > 0 && (
+							{/* Load overlay during initial phase to prevent visual flashing * /
+							autoAdjustPageSizeToHeight && getMeasurementPhase() === PHASES__INITIAL && 
 								<VStack className="absolute inset-0 z-10 bg-white">
 									<Loading />
-								</VStack>
-							)}
+								</VStack>*/}
 						</VStack>
 
 						{listFooterComponent}

package/src/Components/Hoc/withEditor.js

@@ -38,6 +38,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				disableDuplicate = false,
 				disableView = false,
 				useRemoteDuplicate = false, // call specific copyToNew function on server, rather than simple duplicate on client
+				getDuplicateValues, // fn(entity) to get default values for duplication
 				getRecordIdentifier = (selection) => {
 					if (selection.length > 1) {
 						return 'records?';
@@ -89,6 +90,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			editorModeRef = useRef(initialEditorMode),
 			isIgnoreNextSelectionChangeRef = useRef(false),
 			isEditorShownRef = useRef(false),
+			defaultValuesRef = useRef(defaultValues),
 			canEditorBeInEditModeRef = useRef(true), // whether the editor is allowed to be in edit mode based on canRecordBeEdited
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isAdding, setIsAdding] = useState(false),
@@ -111,6 +113,12 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			getIsEditorShown = () => {
 				return isEditorShownRef.current;
 			},
+			getDefaultValues = () => {
+				return defaultValuesRef.current;
+			},
+			setDefaultValues = (vals) => {
+				defaultValuesRef.current = vals;
+			},
 			setCanEditorBeInEditMode = (bool) => {
 				canEditorBeInEditModeRef.current = bool;
 				forceUpdate();
@@ -164,6 +172,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			getNewEntityDisplayValue = () => {
 				return newEntityDisplayValueRef.current;
 			},
+			setNewEntityDisplayValue = (val) => {
+				newEntityDisplayValueRef.current = val;
+			},
 			doAdd = async (e, values) => {
 				if (canUser && !canUser(ADD)) {
 					showPermissionsError(ADD);
@@ -191,8 +202,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					// 2. Use the repository's default values (defined on each property as 'defaultValue'), or
 					// 3. Individually override the repository's default values with submitted 'defaultValues' (given as a prop to this HOC)
 					let defaultValuesToUse = Repository.getSchema().getDefaultValues();
-					if (defaultValues) {
-						_.merge(defaultValuesToUse, defaultValues);
+					if (getDefaultValues()) {
+						_.merge(defaultValuesToUse, getDefaultValues());
 					}
 					addValues = {...defaultValuesToUse};
 				}
@@ -458,7 +469,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					const
 						entity = selection[0],
 						idProperty = Repository.getSchema().model.idProperty,
-						rawValues = _.omit(entity.getOriginalData(), idProperty);
+						rawValues = getDuplicateValues ? getDuplicateValues(entity) : _.omit(entity.getOriginalData(), idProperty);
 					rawValues.id = null; // unset the id of the duplicate
 
 					setIsWaitModalShown(true);
@@ -738,7 +749,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			self.duplicate = doDuplicate;
 			self.setIsEditorShown = setIsEditorShown;
 		}
-		newEntityDisplayValueRef.current = newEntityDisplayValue;
+		setNewEntityDisplayValue(newEntityDisplayValue);
+		setDefaultValues(defaultValues);
 
 		if (lastSelection !== selection) {
 			// NOTE: If I don't calculate this on the fly for selection changes,

package/src/Components/Panel/TabPanel.js

@@ -7,7 +7,7 @@ export default function TabPanel(props) {
 			_panel = {},
 			_tab = {},
 		} = props;
-	return <Panel className="w-full flex" {..._panel}>
+	return <Panel {...props} className="w-full flex" {..._panel}>
 				<TabBar {...props} {..._tab} />
 			</Panel>;
 }

package/src/Components/Panel/TreePanel.js

@@ -26,7 +26,7 @@ export function TreePanel(props) {
 		}
 	}
 
-	return <Panel {..._panel}>
+	return <Panel {...props} {..._panel}>
 				<WhichTree {...props} {..._tree} />
 			</Panel>;
 }

package/src/Components/Tree/Tree.js

@@ -654,9 +654,23 @@ function TreeComponent(props) {
 				return;
 			}
 
-			// Create datum for the new entity and add it to parent's children
 			const newDatum = buildTreeNodeDatum(entity);
-			parentDatum.children.push(newDatum);
+
+			let isInserted = false;
+			if (entity._originalData?.previousSiblingId) {
+				// Insert datum in the correct position among parent's children
+				const siblingDatum = getDatumById(entity._originalData.previousSiblingId);
+				if (siblingDatum) {
+					const siblingIndex = parentDatum.children.findIndex(child => child.item.id === siblingDatum.item.id);
+					parentDatum.children.splice(siblingIndex + 1, 0, newDatum);
+					isInserted = true;
+				}
+			}
+			if (!isInserted) {
+				// Insert datum at end of parent's children
+				parentDatum.children.push(newDatum);
+			}
+
 			
 			// Update parent to show it has children and expand if needed
 			if (!entity.parent.hasChildren) {
@@ -1052,7 +1066,16 @@ function TreeComponent(props) {
 			return items;
 		},
 		getFooterToolbarItems = () => {
-			return _.map(additionalToolbarButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
+			// Process additionalToolbarButtons to evaluate getIsButtonDisabled functions
+			const processedButtons = _.map(additionalToolbarButtons, (config) => {
+				const processedConfig = { ...config };
+				// If the button has an getIsButtonDisabled function, evaluate it with current selection
+				if (_.isFunction(config.getIsButtonDisabled)) {
+					processedConfig.isDisabled = config.getIsButtonDisabled(selection);
+				}
+				return processedConfig;
+			});
+			return _.map(processedButtons, (config, ix) => getIconButtonFromConfig(config, ix, self));
 		},
 		renderTreeNode = (datum) => {
 			if (!datum.isVisible) {

package/src/Components/Tree/TreeNode.js

@@ -148,6 +148,9 @@ export default function TreeNode(props) {
 		if (props.className) {
 			className += ' ' + props.className;
 		}
+		if (nodeProps.className) {
+			className += ' ' + nodeProps.className;
+		}
 	
 		return <HStackNative
 					{...testProps('node' + (isSelected ? '-selected' : ''))}

package/src/Components/Viewer/DateTimeViewer.js

@@ -0,0 +1,25 @@
+import DisplayField from '../Form/Field/DisplayField.js';
+import clsx from 'clsx';
+import {
+	MOMENT_DATE_FORMAT_1,
+} from '../../Constants/Dates';
+
+export default function DateTimeViewer(props) {
+	const {
+			moment,
+		} = props;
+	if (!moment || !moment.isValid()) {
+		return null;
+	}
+	let className = clsx(
+		'flex-none',
+	);
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <DisplayField
+				text={moment.format(MOMENT_DATE_FORMAT_1)}
+				{...props}
+				className={className}
+			/>;
+}

package/src/Components/Viewer/DateViewer.js

@@ -0,0 +1,25 @@
+import DisplayField from '../Form/Field/DisplayField.js';
+import clsx from 'clsx';
+import {
+	MOMENT_DATE_FORMAT_4,
+} from '../../Constants/Dates';
+
+export default function DateViewer(props) {
+	const {
+			moment,
+		} = props;
+	if (!moment || !moment.isValid()) {
+		return null;
+	}
+	let className = clsx(
+		'flex-none',
+	);
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <DisplayField
+				text={moment.format(MOMENT_DATE_FORMAT_4)}
+				{...props}
+				className={className}
+			/>;
+}

package/src/Components/Viewer/PmCalcDebugViewer.js

@@ -0,0 +1,299 @@
+import {
+	Text,
+	VStack,
+} from '@project-components/Gluestack';
+import clsx from 'clsx';
+import {
+	MOMENT_DATE_FORMAT_6,
+} from '../../Constants/Dates.js';
+import {
+	PM_SCHEDULE_MODES__HISTORICAL_USAGE,
+	PM_SCHEDULE_MODES__EXPECTED_USAGE,
+	PM_SCHEDULE_MODES__NO_ESTIMATION,
+	PM_SCHEDULE_MODES__WILL_CALL,
+} from '../../Constants/PmScheduleModes.js';
+import {
+	PM_STATUSES__OK,
+	PM_STATUSES__PM_DUE,
+	PM_STATUSES__DELAYED,
+	PM_STATUSES__WILL_CALL,
+	PM_STATUSES__SCHEDULED,
+	PM_STATUSES__OVERDUE,
+	PM_STATUSES__COMPLETED,
+} from '../../Constants/PmStatuses.js';
+import {
+	METER_TYPES__HOURS,
+	METER_TYPES__HOURS_UNITS,
+	METER_TYPES__HOURS_TEXT,
+	METER_TYPES__MILES,
+	METER_TYPES__MILES_UNITS,
+	METER_TYPES__MILES_TEXT,
+} from '../../Constants/MeterTypes.js';
+import Button from '../Buttons/Button.js';
+import Json from '../Form/Field/Json.js';
+import Panel from '../Panel/Panel.js';
+import Footer from '../Layout/Footer.js';
+import Viewer from '../Viewer/Viewer.js';
+import testProps from '../../Functions/testProps.js';
+import moment from 'moment';
+import _ from 'lodash';
+
+export default function PmCalcDebugViewer(props) {
+
+	const {
+			metersPmSchedule,
+			onClose,
+		} = props,
+		json = metersPmSchedule?.properties.meters_pm_schedules__debug_json.json,
+		flatten = (obj, prefix = '', result = {}) => {
+			for (const key in obj) {
+				if (obj.hasOwnProperty(key)) {
+					const
+						newKey = prefix ? `${prefix}.${key}` : key,
+						value = obj[key];
+					
+					if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+						// Recursively flatten nested objects
+						flatten(value, newKey, result);
+					} else if (Array.isArray(value)) {
+						// Flatten arrays using index as key
+						value.forEach((item, index) => {
+							const arrayKey = `${newKey}.${index}`;
+							if (item !== null && typeof item === 'object') {
+								flatten(item, arrayKey, result);
+							} else {
+								result[arrayKey] = item;
+							}
+						});
+					} else {
+						// Assign primitive values and null
+						result[newKey] = value;
+					}
+				}
+			}
+			return result;
+		},
+		ucfirst = (string) => {
+			return string.charAt(0).toUpperCase() + string.slice(1);
+		},
+		getPmScheduleMode = (pm_schedule_mode_id) => {
+			switch(pm_schedule_mode_id) {
+				case PM_SCHEDULE_MODES__HISTORICAL_USAGE:
+					return 'Historical Usage';
+				case PM_SCHEDULE_MODES__EXPECTED_USAGE:
+					return 'Expected Usage';
+				case PM_SCHEDULE_MODES__NO_ESTIMATION:
+					return 'No Estimation';
+				case PM_SCHEDULE_MODES__WILL_CALL:
+					return 'Will Call';
+				default:
+					return 'Unknown Mode';
+			}
+		},
+		flattenedJson = flatten(json),
+		formatDaysValue = (value, record, self) => {
+			if (value === null || value === undefined) {
+				return value;
+			}
+			return parseInt(_.round(value), 10);
+		},
+		formatMeterValue = (value, record, self) => {
+			if (value === null || value === undefined) {
+				return value;
+			}
+			let ret;
+			const meterType = parseInt(record?.meter_type, 10);
+			switch(meterType) {
+				case METER_TYPES__HOURS:
+					ret = `${value} ${METER_TYPES__HOURS_UNITS}`;
+					break;
+				case METER_TYPES__MILES:
+					ret = `${value} ${METER_TYPES__MILES_UNITS}`;
+					break;
+			}
+			return ret;
+		},
+		formatDateValue = (value, record, self) => {
+			if (value === null || value === undefined) {
+				return value;
+			}
+
+			// convert from datetime to pretty-printed date
+			return moment(value).format(MOMENT_DATE_FORMAT_6);
+		},
+		items = [
+			{
+				"type": "Column",
+				"flex": 1,
+				"defaults": {
+					labelWidth: 300,
+				},
+				"items": [
+					{
+						"type": "FieldSet",
+						"title": "General",
+						"reference": "general",
+						"defaults": {},
+						"items": [
+							{
+								label: 'PM Schedule',
+								name: 'pmSchedule.name',
+							},
+							{
+								label: 'Status',
+								name: 'pm_status_name',
+							},
+							{
+								label: 'Next PM Date',
+								name: 'nextPmDate',
+								viewerFormatter: formatDateValue,
+							},
+							json?.overduePms > 0 && {
+								label: 'Overdue PMs',
+								name: 'overduePms',
+							},
+						],
+					},
+					{
+						"type": "FieldSet",
+						"title": "Calculation Details",
+						"reference": "calcDetails",
+						"defaults": {},
+						"items": [
+							{
+								label: 'Controlling Method',
+								name: 'controllingMethod',
+								tooltip: 'Indicates whether the calculation was based on days or usage (meter). ' +
+										'If both methods are applicable, the one resulting in the earlier PM date is chosen.',
+							},
+							(json?.pm_status_id === PM_STATUSES__OVERDUE || json?.pm_status_id === PM_STATUSES__PM_DUE) && {
+								label: 'Grace Period End Date',
+								name: 'maxGracePeriodDateTime',
+								viewerFormatter: formatDateValue,
+							},
+							{
+								label: 'Last Reset Date',
+								name: 'resetDate',
+								tooltip: 'Indicates whether the calculation was based on days or usage (meter). ' +
+										'If both methods are applicable, the one resulting in the earlier PM date is chosen.',
+								viewerFormatter: formatDateValue,
+							},
+							json?.workOrder?.title && {
+								label: 'Work Order',
+								name: 'workOrder.title',
+							},
+							json?.workOrder?.service_order && {
+								label: 'Work Order',
+								name: 'workOrder.service_order',
+							},
+							{
+								label: 'Meter Accrued Since Last PM',
+								name: 'meterAccruedSinceLatestPm',
+								viewerFormatter: formatMeterValue,
+							},
+							{
+								label: 'Meter Remaining Until Next PM',
+								name: 'meterRemainingUntilNextPm',
+								viewerFormatter: formatMeterValue,
+							},
+							{
+								label: 'Days Since Last PM',
+								name: 'daysSinceLatestPm',
+								viewerFormatter: formatDaysValue,
+							},
+							{
+								label: 'Days Left Until Next PM',
+								name: 'daysLeft',
+								viewerFormatter: formatDaysValue,
+							},
+							// json?.isDelayed && {
+							// 	label: 'Is Delayed',
+							// 	name: 'isDelayed',
+							// },
+							// json?.isOverride && {
+							// 	label: 'Is Override',
+							// 	name: 'isOverride',
+							// },
+						]
+					},
+					{
+						"type": "FieldSet",
+						"title": "PM Schedule Config",
+						"reference": "pmSchedule",
+						"defaults": {},
+						"items": [
+							json?.pmSchedule?.interval_days && {
+								label: 'Interval Days',
+								name: 'pmSchedule.interval_days',
+							},
+							json?.pmSchedule?.interval_meter && {
+								label: 'Interval Meter',
+								name: 'pmSchedule.interval_meter',
+								viewerFormatter: formatMeterValue,
+							},
+							{
+								label: 'Mode',
+								name: 'pmScheduleMode',
+							},
+						]
+					},
+					{
+						"type": "FieldSet",
+						"title": "Equipment",
+						"reference": "equipment",
+						"defaults": {},
+						"items": [
+							{
+								label: 'In Service Date',
+								name: 'inServiceDate',
+								viewerFormatter: formatDateValue,
+							},
+							{
+								label: 'Latest Meter Reading',
+								name: 'latestMeterReading',
+								viewerFormatter: formatMeterValue,
+							},
+							{
+								label: 'Avg Daily Meter',
+								name: 'avgDailyMeter',
+								viewerFormatter: formatMeterValue,
+							},
+						]
+					},
+
+				]
+			}
+		];
+
+	flattenedJson.pmScheduleMode = getPmScheduleMode(json?.pmSchedule.pm_schedule_mode_id);
+
+	return <Panel
+				title="PM Calculation Info"
+				className="PmCalcViewer-Panel"
+				isScrollable={true}
+				footer={<Footer className="justify-end">
+								<Button
+									{...testProps('closeBtn')}
+									key="closeBtn"
+									onPress={onClose}
+									className="text-white"
+									text="Close"
+								/>
+						</Footer>}
+			>
+				<Viewer
+					record={flattenedJson}
+					items={items}
+				/>
+				{/* <VStack className="PmCalcDebugViewer-VStack p-4">
+					
+					<Text>Equipment: {metersPmSchedule.meters__nickname}</Text>
+					<Json
+						value={metersPmSchedule.meters_pm_schedules__debug_json}
+						displaySize="expanded"
+						editable={false}
+						collapsed={2}
+					/>
+				</VStack> */}
+			</Panel>;
+}

package/src/Components/Viewer/PmStatusesViewer.js

@@ -0,0 +1,51 @@
+import DisplayField from '../Form/Field/DisplayField.js';
+import clsx from 'clsx';
+import {
+	PM_STATUSES__OK,
+	PM_STATUSES__PM_DUE,
+	PM_STATUSES__DELAYED,
+	PM_STATUSES__WILL_CALL,
+	PM_STATUSES__SCHEDULED,
+	PM_STATUSES__OVERDUE,
+	PM_STATUSES__COMPLETED,
+} from '../../Constants/PmStatuses.js';
+
+export default function PmStatusesViewer(props) {
+	let text = '';
+	switch(props.id) {
+		case PM_STATUSES__OK:
+			text = 'OK';
+			break;
+		case PM_STATUSES__PM_DUE:
+			text = 'Due';
+			break;
+		case PM_STATUSES__DELAYED:
+			text = 'Delayed';
+			break;
+		case PM_STATUSES__WILL_CALL:
+			text = 'Will Call';
+			break;
+		case PM_STATUSES__SCHEDULED:
+			text = 'Scheduled';
+			break;
+		case PM_STATUSES__OVERDUE:
+			text = 'Overdue';
+			break;
+		case PM_STATUSES__COMPLETED:
+			text = 'Completed';
+			break;
+		default:
+			text = 'Unknown';
+	}
+	let className = clsx(
+		'flex-none',
+	);
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <DisplayField
+				text={text}
+				{...props}
+				className={className}
+			/>;
+}

package/src/Components/Viewer/TimeViewer.js

@@ -0,0 +1,25 @@
+import DisplayField from '../Form/Field/DisplayField.js';
+import clsx from 'clsx';
+import {
+	MOMENT_DATE_FORMAT_5,
+} from '../../Constants/Dates';
+
+export default function TimeViewer(props) {
+	const {
+			moment,
+		} = props;
+	if (!moment || !moment.isValid()) {
+		return null;
+	}
+	let className = clsx(
+		'flex-none',
+	);
+	if (props.className) {
+		className += ' ' + props.className;
+	}
+	return <DisplayField
+				text={moment.format(MOMENT_DATE_FORMAT_5)}
+				{...props}
+				className={className}
+			/>;
+}

package/src/Components/Viewer/Viewer.js

@@ -114,6 +114,7 @@ function Viewer(props) {
 			}
 			let {
 					type,
+					viewerType,
 					title,
 					name,
 					label,
@@ -122,6 +123,7 @@ function Viewer(props) {
 					isHidden = false,
 					isHiddenInViewMode = false,
 					getDynamicProps,
+					viewerFormatter = null,
 					...itemPropsToPass
 				} = item,
 				viewerTypeProps = {};
@@ -137,7 +139,9 @@ function Viewer(props) {
 			}
 			const propertyDef = name && Repository?.getSchema().getPropertyDefinition(name);
 			if (!type) {
-				if (propertyDef?.viewerType?.type) {
+				if (viewerType) {
+					type = viewerType;
+				} else if (propertyDef?.viewerType?.type) {
 					const
 						{
 							type: t,
@@ -274,6 +278,9 @@ function Viewer(props) {
 					value = record.properties[fkDisplayField].displayValue;
 				}
 			}
+			if (viewerFormatter) {
+				value = viewerFormatter(value, record, self);
+			}
 
 			let elementClassName = clsx(
 				'Viewer-field',

package/src/Components/index.js

@@ -255,6 +255,8 @@ import Container from './Container/Container.js';
 import ContainerColumn from './Container/ContainerColumn.js';
 import DataMgt from './Screens/DataMgt.js';
 import Date from './Form/Field/Date.js';
+import DateViewer from './Viewer/DateViewer.js';
+import DateTimeViewer from './Viewer/DateTimeViewer.js';
 import DateRange from './Filter/DateRange.js';
 import DisplayField from './Form/Field/DisplayField.js';
 import ExpandButton from './Buttons/ExpandButton.js';
@@ -278,6 +280,8 @@ import NumberRange from './Filter/NumberRange.js';
 import Panel from './Panel/Panel.js';
 // import Picker from './Panel/Picker.js';
 import PlusMinusButton from './Buttons/PlusMinusButton.js';
+import PmCalcDebugViewer from './Viewer/PmCalcDebugViewer.js';
+import PmStatusesViewer from './Viewer/PmStatusesViewer.js';
 import RadioGroup from './Form/Field/RadioGroup/RadioGroup.js';
 // import Slider from './Form/Field/Slider.js'; // Currently, Slider is not compatible with the new React architecture. Temporarily remove it from index.js to prevent issues.
 import SquareButton from './Buttons/SquareButton.js';
@@ -286,6 +290,7 @@ import Tag from './Form/Field/Tag/Tag.js';
 import TextArea from './Form/Field/TextArea.js';
 import Text from './Form/Field/Text.js';
 import TextWithLinks from './Viewer/TextWithLinks.js';
+import TimeViewer from './Viewer/TimeViewer.js';
 import TimezonesCombo from './Form/Field/Combo/TimezonesCombo.js';
 import Toggle from './Form/Field/Toggle.js';
 import Toolbar from './Toolbar/Toolbar.js';
@@ -550,6 +555,8 @@ const components = {
 	ContainerColumn,
 	DataMgt,
 	Date,
+	DateViewer,
+	DateTimeViewer,
 	DateRange,
 	DisplayField,
 	ExpandButton,
@@ -573,6 +580,8 @@ const components = {
 	Panel,
 	// Picker,
 	PlusMinusButton,
+	PmCalcDebugViewer,
+	PmStatusesViewer,
 	RadioGroup,
 	// Slider,
 	SquareButton,
@@ -581,6 +590,7 @@ const components = {
 	Text,
 	TextArea,
 	TextWithLinks,
+	TimeViewer,
 	TimezonesCombo,
 	Toggle,
 	Toolbar,

package/src/Constants/Dates.js

@@ -18,3 +18,4 @@ export const MOMENT_DATE_FORMAT_2 = 'MMM D YYYY, h:mm:ssa'; // pretty datetime
 export const MOMENT_DATE_FORMAT_3 = 'h:mma'; // pretty time
 export const MOMENT_DATE_FORMAT_4 = 'YYYY-MM-DD';
 export const MOMENT_DATE_FORMAT_5 = 'HH:mm:ss';
+export const MOMENT_DATE_FORMAT_6 = 'MMM D, YYYY'; // pretty date

package/src/Constants/EditorModes.js

@@ -0,0 +1,2 @@
+export const EDITOR_MODE_ADD = 'EDITOR_MODE_ADD';
+export const EDITOR_MODE_EDIT = 'EDITOR_MODE_EDIT';

package/src/Constants/MeterSources.js

@@ -0,0 +1,5 @@
+export const METER_SOURCES__INITIAL_SETUP = 1;
+export const METER_SOURCES__WORK_ORDER = 2;
+export const METER_SOURCES__PM_EVENT = 3;
+export const METER_SOURCES__TELEMETRY = 4;
+export const METER_SOURCES__MANUAL_ENTRY = 5;

package/src/Constants/MeterTypes.js

@@ -1,4 +1,6 @@
 export const METER_TYPES__HOURS = 1;
+export const METER_TYPES__HOURS_UNITS = 'hrs';
+export const METER_TYPES__HOURS_TEXT = 'Time (' + METER_TYPES__HOURS_UNITS + ')';
 export const METER_TYPES__MILES = 2;
-export const METER_TYPES__HOURS_TEXT = 'Time (hrs)';
-export const METER_TYPES__MILES_TEXT = 'Distance (mi/km)';
+export const METER_TYPES__MILES_UNITS = 'mi-km';
+export const METER_TYPES__MILES_TEXT = 'Distance (' + METER_TYPES__MILES_UNITS + ')';

package/src/Constants/PmEventTypes.js

@@ -0,0 +1,11 @@
+export const PM_EVENT_TYPES__INITIAL = 1;
+export const PM_EVENT_TYPES__WORK_ORDER = 2;
+export const PM_EVENT_TYPES__ALERT = 3;
+export const PM_EVENT_TYPES__COMPLETE = 4;
+export const PM_EVENT_TYPES__RESET = 5;
+export const PM_EVENT_TYPES__DELAY_BY_DAYS = 6;
+export const PM_EVENT_TYPES__DELAY_BY_METER = 7;
+export const PM_EVENT_TYPES__SCHEDULE_PM = 8;
+export const PM_EVENT_TYPES__WILL_CALL = 9;
+export const PM_EVENT_TYPES__ASSIGN_TECHNICIAN = 10;
+export const PM_EVENT_TYPES__COMMENT = 11;

package/src/Constants/PmScheduleModes.js

@@ -0,0 +1,4 @@
+export const PM_SCHEDULE_MODES__HISTORICAL_USAGE = 1;
+export const PM_SCHEDULE_MODES__EXPECTED_USAGE = 2;
+export const PM_SCHEDULE_MODES__NO_ESTIMATION = 3;
+export const PM_SCHEDULE_MODES__WILL_CALL = 4;

package/src/Constants/PmStatuses.js

@@ -0,0 +1,7 @@
+export const PM_STATUSES__OK = 1;
+export const PM_STATUSES__PM_DUE = 2;
+export const PM_STATUSES__DELAYED = 3;
+export const PM_STATUSES__WILL_CALL = 4;
+export const PM_STATUSES__SCHEDULED = 5;
+export const PM_STATUSES__OVERDUE = 6;
+export const PM_STATUSES__COMPLETED = 7;

package/src/PlatformImports/Web/Attachments.js

@@ -819,6 +819,7 @@ function AttachmentsElement(props) {
 	}
 
 	if (self) {
+		self.repository = Attachments;
 		self.getFiles = getFiles;
 		self.setFiles = setFiles;
 		self.clearFiles = clearFiles;