@onehat/ui 0.4.95 → 0.4.97

package/src/Components/Hoc/withEditor.js

@@ -30,12 +30,15 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				userCanView = true,
 				canEditorViewOnly = false, // whether the editor can *ever* change state out of 'View' mode
 				canProceedWithCrud, // fn returns bool on if the CRUD operation can proceed
+				canRecordBeEdited, // fn(selection) returns bool on if the current record(s) can be edited
+				canRecordBeDeleted, // fn(selection) returns bool on if the current record(s) can be deleted
 				disableAdd = false,
 				disableEdit = false,
 				disableDelete = 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?';
@@ -87,6 +90,8 @@ 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),
 			[isSaving, setIsSaving] = useState(false),
@@ -108,6 +113,19 @@ 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();
+			},
+			getCanEditorBeInEditMode = () => {
+				return canEditorBeInEditModeRef.current;
+			},
 			setIsWaitModalShown = (bool) => {
 				const
 					dispatch = UiGlobals.redux?.dispatch,
@@ -154,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);
@@ -181,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};
 				}
@@ -448,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);
@@ -624,6 +645,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				});
 			},
 			calculateEditorMode = () => {
+				if (!getCanEditorBeInEditMode()) { // this is a result of canRecordBeEdited returning false
+					return EDITOR_MODE__VIEW;
+				}
 
 				let isIgnoreNextSelectionChange = getIsIgnoreNextSelectionChange(),
 					doStayInEditModeOnSelectionChange = stayInEditModeOnSelectionChange;
@@ -691,7 +715,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 		useEffect(() => {
 
 			if (editorType === EDITOR_TYPE__SIDE) {
-				if (selection?.length) { //  || isAdding
+				if (selection?.length) { // || isAdding
 					// there is a selection, so show the editor
 					setIsEditorShown(true);
 				} else {
@@ -700,6 +724,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 			}
 
+			if (canRecordBeEdited && canRecordBeEdited(selection) === false) {
+				setCanEditorBeInEditMode(false);
+			} else {
+				setCanEditorBeInEditMode(true);
+			}
 			setEditorMode(calculateEditorMode());
 			setLastSelection(selection);
 			
@@ -720,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,
@@ -749,8 +779,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					setIsEditorShown={setIsEditorShown}
 					setIsIgnoreNextSelectionChange={setIsIgnoreNextSelectionChange}
 					onAdd={(!userCanEdit || disableAdd) ? null : doAdd}
-					onEdit={(!userCanEdit || disableEdit) ? null : doEdit}
-					onDelete={(!userCanEdit || disableDelete) ? null : doDelete}
+					onEdit={(!userCanEdit || disableEdit || (canRecordBeEdited && !canRecordBeEdited(selection))) ? null : doEdit}
+					onDelete={(!userCanEdit || disableDelete || (canRecordBeDeleted && !canRecordBeDeleted(selection))) ? null : doDelete}
 					onView={doView}
 					onDuplicate={doDuplicate}
 					onEditorSave={doEditorSave}

package/src/Components/Hoc/withPresetButtons.js

@@ -48,7 +48,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 		}
 
 		const {
-				// extract and pass
+				// for local use
 				contextMenuItems = [],
 				additionalToolbarButtons = [],
 				useUploadDownload = false,
@@ -59,18 +59,18 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				downloadHeaders,
 				downloadParams,
 				onChangeColumnsConfig,
-				canRecordBeEdited,
-				canRecordBeDeleted,
-				canRecordBeDuplicated,
 				...propsToPass
 			} = props,
 			{
-				// for local use
+				// extract and pass down
 				isEditor = false,
 				isTree = false,
 				canDeleteRootNode = false,
 				isSideEditor = false,
 				canEditorViewOnly = false,
+				canRecordBeEdited, // fn(selection) returns bool on if the current record(s) can be edited
+				canRecordBeDeleted, // fn(selection) returns bool on if the current record(s) can be deleted
+				canRecordBeDuplicated, // fn(selection) returns bool on if the current record(s) can be duplicated
 				disableAdd = !isEditor,
 				disableEdit = !isEditor,
 				disableDelete = !isEditor,

package/src/Components/Panel/GridPanel.js

@@ -12,6 +12,7 @@ export function GridPanel(props) {
 			isEditor = false,
 			editorType = EDITOR_TYPE__WINDOWED,
 			_panel = {},
+			_grid = {},
 		} = props;
 
 	let WhichGrid = Grid;
@@ -30,7 +31,7 @@ export function GridPanel(props) {
 	}
 
 	return <Panel {...props} {..._panel}>
-				<WhichGrid {...props} />
+				<WhichGrid {...props} {..._grid} />
 			</Panel>;
 }
 

package/src/Components/Panel/TabPanel.js

@@ -3,8 +3,11 @@ import Panel from './Panel.js';
 
 
 export default function TabPanel(props) {
-	const panelProps = props._panel || {};
-	return <Panel className="w-full flex" {...panelProps}>
-				<TabBar {...props} {...props._tab} />
+	const {
+			_panel = {},
+			_tab = {},
+		} = props;
+	return <Panel {...props} className="w-full flex" {..._panel}>
+				<TabBar {...props} {..._tab} />
 			</Panel>;
 }

package/src/Components/Panel/TreePanel.js

@@ -11,6 +11,7 @@ export function TreePanel(props) {
 			isEditor = false,
 			editorType = EDITOR_TYPE__WINDOWED,
 			_panel = {},
+			_tree = {},
 		} = props;
 
 	let WhichTree = Tree;
@@ -25,8 +26,8 @@ export function TreePanel(props) {
 		}
 	}
 
-	return <Panel {..._panel}>
-				<WhichTree {...props} {..._panel} />
+	return <Panel {...props} {..._panel}>
+				<WhichTree {...props} {..._tree} />
 			</Panel>;
 }
 

package/src/Components/Tree/Tree.js

@@ -3,6 +3,7 @@ import {
 	HStack,
 	Pressable,
 	ScrollView,
+	Text,
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
@@ -133,7 +134,17 @@ function TreeComponent(props) {
 			canNodeMoveInternally, // optional fn to customize whether each node can be dragged INternally
 			canNodeMoveExternally, // optional fn to customize whether each node can be dragged EXternally
 			canNodeAcceptDrop, // optional fn to customize whether each node can accept a dropped item: (targetItem, draggedItem) => boolean
-			getCustomDragProxy, // optional fn to render custom drag preview: (item, selection) => ReactElement
+			dragProxyField,
+			getCustomDragProxy = (item, selection) => { // optional fn to render custom drag preview: (item, selection) => ReactElement
+				let selectionCount = selection?.length || 1,
+					displayText = dragProxyField ? item[dragProxyField] : (item.displayValue || 'Selected TreeNode');
+				return <VStack className="bg-white border border-gray-300 rounded-lg p-3 shadow-lg max-w-[200px]">
+							<Text className="font-semibold text-gray-800">{displayText}</Text>
+							{selectionCount > 1 && 
+								<Text className="text-sm text-gray-600">(+{selectionCount -1} more item{selectionCount > 2 ? 's' : ''})</Text>
+							}
+						</VStack>;
+			},
 			dragPreviewOptions, // optional object for drag preview positioning options
 			areNodesDragSource = false,
 			nodeDragSourceType,
@@ -643,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) {
@@ -1041,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}
+			/>;
+}