@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/CronBuilderDialog.tsx

@@ -0,0 +1,2145 @@
+import React, { useEffect, useState } from 'react';
+import Button from '../../lib/button/Button';
+import {
+	EntityWithValueState,
+	LiteralValueState,
+	ProjectState,
+	StateMutationAction,
+	ChangeSet
+} from '@elyx-code/project-logic-tree';
+import {
+	DynamicValueTypes,
+	IValueStoreClient
+} from '../../services/editor/value-store';
+import { EditorService } from '../../services/editor';
+import { handleLiteralValueChange } from '../../services/execution/value-resolution';
+import { getParentCanvasEntity } from '@elyx-code/project-logic-tree';
+import {
+	FormControlLabel,
+	Radio,
+	RadioGroup,
+	TextField,
+	Tabs,
+	Tab,
+	Box,
+	Typography,
+	Popover,
+	IconButton,
+	Tooltip,
+	Select,
+	MenuItem,
+	InputLabel,
+	FormControl
+} from '@mui/material';
+
+function formatHour(hStr: string): string {
+	const h = parseInt(hStr, 10);
+	if (isNaN(h)) return hStr;
+	if (h === 0) return '12:00 AM';
+	if (h === 12) return '12:00 PM';
+	if (h < 12) return `${h}:00 AM`;
+	return `${h - 12}:00 PM`;
+}
+
+function formatCronToHumanReadable(fields: string[]): string {
+	if (fields.length !== 6) return 'Invalid cron expression format.';
+
+	const [min, hr, dom, mon, dow, yr] = fields;
+
+	let timeStr = '';
+	if (hr === '*' && min === '*') timeStr = 'every minute';
+	else if (hr === '*') {
+		if (min.includes('/') || min.includes('-') || min.includes(',')) {
+			timeStr = `every hour, ${formatCronFieldToReadable(0, min).toLowerCase()}`;
+		} else {
+			timeStr = `at minute ${min} past every hour`;
+		}
+	} else if (min === '*') {
+		if (hr.includes('/') || hr.includes('-') || hr.includes(',')) {
+			timeStr = `every minute of ${formatCronFieldToReadable(1, hr).toLowerCase()}`;
+		} else {
+			timeStr = `every minute past ${formatHour(hr).toLowerCase()}`;
+		}
+	} else if (
+		!hr.includes('-') &&
+		!hr.includes('/') &&
+		!hr.includes(',') &&
+		!min.includes('-') &&
+		!min.includes('/') &&
+		!min.includes(',')
+	) {
+		const hNum = parseInt(hr, 10);
+		const suffix = hNum >= 12 ? 'PM' : 'AM';
+		const h12 = hNum === 0 ? 12 : hNum > 12 ? hNum - 12 : hNum;
+		timeStr = `at ${h12}:${min.padStart(2, '0')} ${suffix}`;
+	} else {
+		const hStr = formatCronFieldToReadable(1, hr).toLowerCase();
+		const mStr = formatCronFieldToReadable(0, min).toLowerCase();
+		timeStr = `${mStr}, ${hStr.replace('every', 'and every')}`;
+	}
+
+	let dateStr = '';
+	let daySpecified = false;
+	if (dom === '*' && dow === '?') {
+		// unspecified
+	} else if (dom !== '?' && dom !== '*') {
+		dateStr = formatCronFieldToReadable(2, dom).toLowerCase();
+		daySpecified = true;
+	} else if (dow !== '?' && dow !== '*') {
+		dateStr = formatCronFieldToReadable(4, dow).toLowerCase();
+		daySpecified = true;
+	} else if (dom === '?' && dow === '*') {
+		// unspecified
+	}
+
+	let monthSpecified = mon !== '*';
+	let yearSpecified = yr !== '*';
+	let yearStr = `in year ${yr}`;
+
+	const parts = [];
+	if (timeStr) parts.push(timeStr);
+
+	let addedUnspecified = false;
+
+	if (daySpecified) {
+		parts.push(dateStr);
+	} else {
+		if (!addedUnspecified) {
+			parts.push('every day');
+			addedUnspecified = true;
+		}
+	}
+
+	if (monthSpecified) {
+		// formatCronFieldToReadable handles full word parsing now
+		const mStr = formatCronFieldToReadable(3, mon).toLowerCase();
+		parts.push(`in ${mStr.replace('in ', '')}`);
+	} else {
+		if (!addedUnspecified) {
+			parts.push('every month');
+			addedUnspecified = true;
+		}
+	}
+
+	if (yearSpecified) {
+		parts.push(yearStr);
+	} else {
+		if (!addedUnspecified) {
+			parts.push('every year');
+			addedUnspecified = true;
+		}
+	}
+
+	const sentence = parts.filter(Boolean).join(', ');
+	return sentence.charAt(0).toUpperCase() + sentence.slice(1) + '.';
+}
+
+function getOrdinalNum(n: string): string {
+	if (n === '11' || n === '12' || n === '13') return `${n}th`;
+	if (n.endsWith('1')) return `${n}st`;
+	if (n.endsWith('2')) return `${n}nd`;
+	if (n.endsWith('3')) return `${n}rd`;
+	return `${n}th`;
+}
+
+function formatCronFieldToReadable(index: number, value: string): string {
+	const fieldNames = [
+		'minute',
+		'hour',
+		'day of the month',
+		'month',
+		'day of the week',
+		'year'
+	];
+	const name = fieldNames[index];
+
+	if (index === 3) {
+		const monthMap: Record<string, string> = {
+			JAN: 'January',
+			FEB: 'February',
+			MAR: 'March',
+			APR: 'April',
+			MAY: 'May',
+			JUN: 'June',
+			JUL: 'July',
+			AUG: 'August',
+			SEP: 'September',
+			OCT: 'October',
+			NOV: 'November',
+			DEC: 'December'
+		};
+		// Replace all occurrences of JAN-DEC with full names
+		let res = value;
+		Object.keys(monthMap).forEach((k) => {
+			res = res.replace(new RegExp(`\\b${k}\\b`, 'g'), monthMap[k]);
+		});
+		value = res;
+	}
+	if (index === 4) {
+		const dowMap: Record<string, string> = {
+			SUN: 'Sunday',
+			MON: 'Monday',
+			TUE: 'Tuesday',
+			WED: 'Wednesday',
+			THU: 'Thursday',
+			FRI: 'Friday',
+			SAT: 'Saturday'
+		};
+		let res = value;
+		Object.keys(dowMap).forEach((k) => {
+			res = res.replace(new RegExp(`\\b${k}\\b`, 'g'), dowMap[k]);
+		});
+		value = res;
+	}
+
+	if (value === '*') return `Every ${name}`;
+
+	if (value === '?') return 'Not specified';
+
+	if (value.includes('/')) {
+		const [start, step] = value.split('/');
+		const stepNum = parseInt(step, 10);
+		if (index === 0 || index === 1) {
+			const pName = index === 0 ? 'minutes' : 'hours';
+			const singName = index === 0 ? 'minute' : 'hour';
+			const startLabel =
+				index === 1 && start !== '*'
+					? formatHour(start)
+					: `${singName} ${start}`;
+
+			if (start === '0' || start === '*')
+				return `Every ${step} ${stepNum === 1 ? singName : pName}`;
+			return `Every ${step} ${stepNum === 1 ? singName : pName}, starting at ${startLabel.toLowerCase()}`;
+		}
+		if (index === 2)
+			return `Every ${step} days, starting on the ${getOrdinalNum(start)}`;
+		if (index === 3)
+			return `Every ${step} months, starting in month ${start}`;
+		if (index === 4)
+			return `Every ${step} days of the week, starting from day ${start}`;
+		if (index === 5)
+			return `Every ${step} years, starting from year ${start}`;
+		return `Every ${step} ${name}s starting at ${start}`;
+	}
+
+	if (value.includes('-')) {
+		const [from, to] = value.split('-');
+		if (index === 0) return `From minute ${from} to ${to}`;
+		if (index === 1)
+			return `From ${formatHour(from).toLowerCase()} to ${formatHour(to).toLowerCase()}`;
+		return `From ${from} to ${to}`;
+	}
+
+	if (value.includes(',')) {
+		if (index === 1)
+			return `Specific hours: ${value
+				.split(',')
+				.map((h) => formatHour(h))
+				.join(', ')}`;
+		return `Specific ${name}s: ${value.split(',').join(', ')}`;
+	}
+
+	if (index === 2) {
+		if (value === 'L') return 'Last day of the month';
+		if (value.endsWith('W'))
+			return `Nearest weekday to the ${getOrdinalNum(value.replace('W', ''))}`;
+		return `On the ${getOrdinalNum(value)} day of the month`;
+	}
+
+	if (index === 4) {
+		const dayMap: Record<string, string> = {
+			'1': 'Sunday',
+			'2': 'Monday',
+			'3': 'Tuesday',
+			'4': 'Wednesday',
+			'5': 'Thursday',
+			'6': 'Friday',
+			'7': 'Saturday'
+		};
+		if (value.endsWith('L')) {
+			const dayName =
+				dayMap[value.replace('L', '')] ||
+				`day ${value.replace('L', '')}`;
+			return `Last ${dayName} of the month`;
+		}
+		if (value.includes('#')) {
+			const [d, n] = value.split('#');
+			const dayName = dayMap[d] || `day ${d}`;
+			const nth =
+				n === '1'
+					? 'first'
+					: n === '2'
+						? 'second'
+						: n === '3'
+							? 'third'
+							: n === '4'
+								? 'fourth'
+								: n === '5'
+									? 'fifth'
+									: `${n}th`;
+			return `The ${nth} ${dayName} of the month`;
+		}
+		return `On ${dayMap[value] || value}`;
+	}
+
+	if (index === 3) return `In ${value}`;
+
+	return `At ${index === 1 ? formatHour(value).toLowerCase() : index === 0 ? `minute ${value}` : `${name} ${value}`}`;
+}
+
+interface ICronBuilderDialogProps {
+	onClose: (event: React.MouseEvent | null) => void;
+	valueOwner: EntityWithValueState;
+	value?: LiteralValueState;
+	valueType?: DynamicValueTypes;
+	draggableObject?: any;
+	project: EditorService;
+	onlyDefault?: boolean;
+}
+
+const CRON_TABS = [
+	'Minutes',
+	'Hours',
+	'Day-of-month',
+	'Month',
+	'Day-of-week',
+	'Year'
+];
+const DEFAULT_CRON_STRING = '0 0 1 * ? *';
+
+const renderRadioLabel = (title: string, sublabel: string) => (
+	<Box display="flex" flexDirection="column">
+		<Typography variant="body1">{title}</Typography>
+		<Typography variant="caption" color="textSecondary">
+			{sublabel}
+		</Typography>
+	</Box>
+);
+
+const RadioLabelWithHelp = ({
+	title,
+	sublabel,
+	explanation,
+	fieldName
+}: {
+	title: string;
+	sublabel: string;
+	explanation: React.ReactNode;
+	fieldName: string;
+}) => {
+	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+	const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+		setAnchorEl(event.currentTarget);
+		event.preventDefault();
+		event.stopPropagation();
+	};
+
+	const handlePopoverClose = (event: React.MouseEvent<HTMLElement>) => {
+		setAnchorEl(null);
+		event.preventDefault();
+		event.stopPropagation();
+	};
+
+	const open = Boolean(anchorEl);
+
+	return (
+		<Box display="flex" flexDirection="column">
+			<Box display="flex" alignItems="center" gap={1}>
+				<Typography variant="body1">{title}</Typography>
+				{explanation && (
+					<>
+						<IconButton
+							size="small"
+							onClick={handlePopoverOpen}
+							style={{ padding: 2 }}
+						>
+							<i
+								className="fa-regular fa-circle-question"
+								style={{
+									fontSize: 14,
+									color: 'rgba(0,0,0,0.4)'
+								}}
+							/>
+						</IconButton>
+						<Popover
+							open={open}
+							anchorEl={anchorEl}
+							onClose={handlePopoverClose}
+							anchorOrigin={{
+								vertical: 'bottom',
+								horizontal: 'left'
+							}}
+							transformOrigin={{
+								vertical: 'top',
+								horizontal: 'left'
+							}}
+							onClick={(e) => {
+								e.preventDefault();
+								e.stopPropagation();
+							}}
+						>
+							<Box p={2} maxWidth={300}>
+								<Typography
+									variant="subtitle2"
+									style={{
+										fontWeight: 600,
+										marginBottom: 8
+									}}
+								>
+									{fieldName} - {title}
+								</Typography>
+								<Typography variant="body2">
+									{explanation}
+								</Typography>
+							</Box>
+						</Popover>
+					</>
+				)}
+			</Box>
+			<Typography variant="caption" color="textSecondary">
+				{sublabel}
+			</Typography>
+		</Box>
+	);
+};
+
+const RangeInputs = ({
+	value,
+	onChange,
+	label1,
+	label2,
+	defaultStart,
+	defaultEnd,
+	isNumber,
+	min,
+	max
+}: {
+	value: string;
+	onChange: (val: string) => void;
+	label1: string;
+	label2: string;
+	defaultStart: string;
+	defaultEnd: string;
+	isNumber?: boolean;
+	min?: number;
+	max?: number;
+}) => {
+	const parts = value.includes('-')
+		? value.split('-')
+		: [defaultStart, defaultEnd];
+	const start = parts[0] || defaultStart;
+	const end = parts[1] || defaultEnd;
+
+	return (
+		<Box display="flex" gap={2} alignItems="center">
+			<TextField
+				size="small"
+				label={label1}
+				value={start}
+				onChange={(e) =>
+					onChange(
+						`${isNumber ? clamp(e.target.value, min, max) : e.target.value}-${end}`
+					)
+				}
+				sx={{ width: 140 }}
+				type={isNumber ? 'number' : 'text'}
+				inputProps={{ min, max }}
+			/>
+			<Typography variant="body1" color="textSecondary">
+				-
+			</Typography>
+			<TextField
+				size="small"
+				label={label2}
+				value={end}
+				onChange={(e) =>
+					onChange(
+						`${start}-${isNumber ? clamp(e.target.value, min, max) : e.target.value}`
+					)
+				}
+				sx={{ width: 140 }}
+				type={isNumber ? 'number' : 'text'}
+				inputProps={{ min, max }}
+			/>
+		</Box>
+	);
+};
+
+const IncrementInputs = ({
+	value,
+	onChange,
+	label1,
+	label2,
+	defaultStart,
+	defaultStep,
+	isNumber,
+	min,
+	max
+}: {
+	value: string;
+	onChange: (val: string) => void;
+	label1: string;
+	label2: string;
+	defaultStart: string;
+	defaultStep: string;
+	isNumber?: boolean;
+	min?: number;
+	max?: number;
+}) => {
+	const parts = value.includes('/')
+		? value.split('/')
+		: [defaultStart, defaultStep];
+	const start = parts[0] || defaultStart;
+	const step = parts[1] || defaultStep;
+
+	return (
+		<Box display="flex" gap={2} alignItems="center">
+			<TextField
+				size="small"
+				label={label1}
+				value={start}
+				onChange={(e) =>
+					onChange(
+						`${isNumber ? clamp(e.target.value, min, max) : e.target.value}/${step}`
+					)
+				}
+				sx={{ width: 140 }}
+				type={isNumber ? 'number' : 'text'}
+				inputProps={{ min, max }}
+			/>
+			<Typography variant="body1" color="textSecondary">
+				/
+			</Typography>
+			<TextField
+				size="small"
+				label={label2}
+				value={step}
+				onChange={(e) =>
+					onChange(
+						`${start}/${isNumber ? clamp(e.target.value, min, max) : e.target.value}`
+					)
+				}
+				sx={{ width: 140 }}
+				type={isNumber ? 'number' : 'text'}
+				inputProps={{ min, max }}
+			/>
+		</Box>
+	);
+};
+
+const clamp = (val: string, min?: number, max?: number) => {
+	if (val === '') return '';
+	const num = parseInt(val, 10);
+	if (isNaN(num)) return val;
+	if (max !== undefined && num > max) return String(max);
+	return String(num);
+};
+
+const monthOptions = [
+	{ label: 'January', value: 'JAN' },
+	{ label: 'February', value: 'FEB' },
+	{ label: 'March', value: 'MAR' },
+	{ label: 'April', value: 'APR' },
+	{ label: 'May', value: 'MAY' },
+	{ label: 'June', value: 'JUN' },
+	{ label: 'July', value: 'JUL' },
+	{ label: 'August', value: 'AUG' },
+	{ label: 'September', value: 'SEP' },
+	{ label: 'October', value: 'OCT' },
+	{ label: 'November', value: 'NOV' },
+	{ label: 'December', value: 'DEC' }
+];
+
+const dowOptionsNumeric = [
+	{ label: 'Sunday', value: '1' },
+	{ label: 'Monday', value: '2' },
+	{ label: 'Tuesday', value: '3' },
+	{ label: 'Wednesday', value: '4' },
+	{ label: 'Thursday', value: '5' },
+	{ label: 'Friday', value: '6' },
+	{ label: 'Saturday', value: '7' }
+];
+
+const dowOptions = [
+	{ label: 'Sunday', value: 'SUN' },
+	{ label: 'Monday', value: 'MON' },
+	{ label: 'Tuesday', value: 'TUE' },
+	{ label: 'Wednesday', value: 'WED' },
+	{ label: 'Thursday', value: 'THU' },
+	{ label: 'Friday', value: 'FRI' },
+	{ label: 'Saturday', value: 'SAT' }
+];
+
+const EnumRangeInputs = ({
+	value,
+	onChange,
+	label1,
+	label2,
+	defaultStart,
+	defaultEnd,
+	options
+}: {
+	value: string;
+	onChange: (val: string) => void;
+	label1: string;
+	label2: string;
+	defaultStart: string;
+	defaultEnd: string;
+	options: { label: string; value: string }[];
+}) => {
+	const parts = value.includes('-')
+		? value.split('-')
+		: [defaultStart, defaultEnd];
+	const start = parts[0] || defaultStart;
+	const end = parts[1] || defaultEnd;
+
+	return (
+		<Box display="flex" gap={2} alignItems="center">
+			<FormControl size="small" sx={{ width: 140 }}>
+				<InputLabel>{label1}</InputLabel>
+				<Select
+					value={start}
+					label={label1}
+					onChange={(e) => onChange(`${e.target.value}-${end}`)}
+				>
+					{options.map((opt) => (
+						<MenuItem key={opt.value} value={opt.value}>
+							{opt.label}
+						</MenuItem>
+					))}
+				</Select>
+			</FormControl>
+			<Typography variant="body1" color="textSecondary">
+				-
+			</Typography>
+			<FormControl size="small" sx={{ width: 140 }}>
+				<InputLabel>{label2}</InputLabel>
+				<Select
+					value={end}
+					label={label2}
+					onChange={(e) => onChange(`${start}-${e.target.value}`)}
+				>
+					{options.map((opt) => (
+						<MenuItem key={opt.value} value={opt.value}>
+							{opt.label}
+						</MenuItem>
+					))}
+				</Select>
+			</FormControl>
+		</Box>
+	);
+};
+
+const EnumIncrementInputs = ({
+	value,
+	onChange,
+	label1,
+	label2,
+	defaultStart,
+	defaultStep,
+	options
+}: {
+	value: string;
+	onChange: (val: string) => void;
+	label1: string;
+	label2: string;
+	defaultStart: string;
+	defaultStep: string;
+	options: { label: string; value: string }[];
+}) => {
+	const parts = value.includes('/')
+		? value.split('/')
+		: [defaultStart, defaultStep];
+	const start = parts[0] || defaultStart;
+	const step = parts[1] || defaultStep;
+
+	return (
+		<Box display="flex" gap={2} alignItems="center">
+			<FormControl size="small" sx={{ width: 140 }}>
+				<InputLabel>{label1}</InputLabel>
+				<Select
+					value={start}
+					label={label1}
+					onChange={(e) => onChange(`${e.target.value}/${step}`)}
+				>
+					{options.map((opt) => (
+						<MenuItem key={opt.value} value={opt.value}>
+							{opt.label}
+						</MenuItem>
+					))}
+				</Select>
+			</FormControl>
+			<Typography variant="body1" color="textSecondary">
+				/
+			</Typography>
+			<TextField
+				size="small"
+				label={label2}
+				value={step}
+				onChange={(e) => onChange(`${start}/${e.target.value}`)}
+				sx={{ width: 140 }}
+				type="number"
+				inputProps={{ min: 1 }}
+			/>
+		</Box>
+	);
+};
+
+const SpecificListInputs = ({
+	value,
+	onChange,
+	label,
+	isNumber,
+	min,
+	max,
+	options
+}: {
+	value: string;
+	onChange: (val: string) => void;
+	label: string;
+	isNumber?: boolean;
+	min?: number;
+	max?: number;
+	options?: { label: string; value: string }[];
+}) => {
+	const items = value ? value.split(',') : [];
+
+	const handleItemChange = (index: number, newVal: string) => {
+		const newItems = [...items];
+		newItems[index] = newVal;
+		onChange(newItems.join(','));
+	};
+
+	const handleItemDelete = (index: number) => {
+		const newItems = items.filter((_, i) => i !== index);
+		onChange(newItems.length > 0 ? newItems.join(',') : '');
+	};
+
+	const handleItemAdd = () => {
+		const defVal = options
+			? options[0].value
+			: min !== undefined
+				? String(min)
+				: '0';
+		onChange(items.length > 0 ? `${value},${defVal}` : defVal);
+	};
+
+	return (
+		<Box
+			display="flex"
+			flexDirection="column"
+			gap={1}
+			alignItems="flex-start"
+		>
+			{items.map((item, idx) => (
+				<Box key={idx} display="flex" gap={1} alignItems="center">
+					{options ? (
+						<FormControl size="small" sx={{ width: 140 }}>
+							<InputLabel>{label}</InputLabel>
+							<Select
+								value={item}
+								label={label}
+								onChange={(e) =>
+									handleItemChange(
+										idx,
+										e.target.value as string
+									)
+								}
+							>
+								{options.map((opt) => (
+									<MenuItem key={opt.value} value={opt.value}>
+										{opt.label}
+									</MenuItem>
+								))}
+							</Select>
+						</FormControl>
+					) : (
+						<TextField
+							size="small"
+							label={label}
+							value={item}
+							onChange={(e) =>
+								handleItemChange(
+									idx,
+									isNumber
+										? clamp(e.target.value, min, max)
+										: e.target.value
+								)
+							}
+							sx={{ width: 140 }}
+							type={isNumber ? 'number' : 'text'}
+							inputProps={{ min, max }}
+						/>
+					)}
+					<Tooltip
+						title={
+							items.length <= 1
+								? 'At least one value is required'
+								: ''
+						}
+						placement="top"
+					>
+						<span>
+							<IconButton
+								size="small"
+								onClick={() => handleItemDelete(idx)}
+								disabled={items.length <= 1}
+							>
+								<i
+									className="fa-regular fa-trash-can"
+									style={{
+										fontSize: 16,
+										color:
+											items.length <= 1
+												? 'rgba(0,0,0,0.2)'
+												: 'rgba(0,0,0,0.6)'
+									}}
+								/>
+							</IconButton>
+						</span>
+					</Tooltip>
+				</Box>
+			))}
+			<Button
+				variant="text"
+				size="small"
+				onClick={handleItemAdd}
+				style={{ marginTop: 8 }}
+			>
+				+ Add option
+			</Button>
+		</Box>
+	);
+};
+
+const parseMode = (val: string, index: number) => {
+	if (val === '*') return 'every';
+	if (val === '?') return 'not_specified';
+	if (index === 2 && val === 'L') return 'last';
+	if (index === 2 && val.includes('W')) return 'weekday';
+	if (index === 4 && val.includes('L')) return 'last';
+	if (index === 4 && val.includes('#')) return 'nth';
+	if (val.includes('-')) return 'range';
+	if (val.includes('/')) return 'increment';
+	return 'specific';
+};
+
+export const CronBuilderDialog: React.FC<ICronBuilderDialogProps> = (props) => {
+	const onlyDefault = props.onlyDefault || false;
+	const initialValue = props.value?.value
+		? String(props.value.value)
+		: DEFAULT_CRON_STRING;
+
+	const [activeTab, setActiveTab] = useState(0);
+	const [cronString, setCronString] = useState(initialValue);
+	const [parsedFields, setParsedFields] = useState<string[]>(
+		initialValue.split(' ').filter(Boolean)
+	);
+	const [fieldModes, setFieldModes] = useState<string[]>(() => {
+		const fields = initialValue.split(' ').filter(Boolean);
+		return fields.map((val, idx) => parseMode(val, idx));
+	});
+
+	const [validationErrors, setValidationErrors] = useState<any[]>([]);
+
+	useEffect(() => {
+		// @ts-ignore
+		const validationResult = props.valueOwner?.codeNativeValueValidation?.(
+			props.valueOwner,
+			cronString
+		);
+		if (validationResult && validationResult.errors) {
+			setValidationErrors(validationResult.errors);
+		} else {
+			setValidationErrors([]);
+		}
+	}, [cronString, props.valueOwner]);
+
+	const handleRawCronStringChange = (newString: string) => {
+		setCronString(newString);
+		const fields = newString.split(' ').filter(Boolean);
+		if (fields.length === 6) {
+			setParsedFields(fields);
+			setFieldModes(fields.map((val, idx) => parseMode(val, idx)));
+		}
+	};
+
+	const updateField = (index: number, newValue: string) => {
+		const newFields = [...parsedFields];
+		newFields[index] = newValue;
+
+		// Handle AWS constraint between DOM and DOW
+		setFieldModes((prev) => {
+			const m = [...prev];
+			if (index === 2 && newValue !== '?') {
+				newFields[4] = '?';
+				m[4] = 'not_specified';
+			} else if (index === 4 && newValue !== '?') {
+				newFields[2] = '?';
+				m[2] = 'not_specified';
+			}
+			return m;
+		});
+
+		setParsedFields(newFields);
+		setCronString(newFields.join(' '));
+	};
+
+	const renderMinutesTab = () => {
+		const val = parsedFields[0] || '*';
+		const mode = fieldModes[0] || 'every';
+
+		return (
+			<Box display="flex" flexDirection="column" gap={4}>
+				<RadioGroup
+					sx={{ gap: '12px' }}
+					value={mode}
+					onChange={(e) => {
+						const newModes = [...fieldModes];
+						newModes[0] = e.target.value;
+						setFieldModes(newModes);
+						if (e.target.value === 'every') updateField(0, '*');
+						if (e.target.value === 'specific') updateField(0, '0');
+						if (e.target.value === 'range') updateField(0, '1-5');
+						if (e.target.value === 'increment')
+							updateField(0, '0/5');
+					}}
+				>
+					<FormControlLabel
+						value="every"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Minutes"
+								title="Every minute"
+								sublabel="Execute every single minute"
+								explanation={
+									<span>
+										The job will execute every single
+										minute. <br />
+										<br />
+										<b>Example:</b> <code>*</code> means 0,
+										1, 2, 3... 59.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="specific"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Minutes"
+								title="Specific minute(s)"
+								sublabel="Choose exact minutes for execution"
+								explanation={
+									<span>
+										The job will execute at the exact
+										minute(s) you specify.
+										<br />
+										<br />
+										<b>Example:</b> <code>5,10</code> means
+										it will execute at 5 minutes past the
+										hour, and 10 minutes past the hour.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="range"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Minutes"
+								title="Range"
+								sublabel="Executes on every single increment within that range, inclusive"
+								explanation={
+									<span>
+										The job will execute on every minute
+										within the given range, inclusive.
+										<br />
+										<br />
+										<b>Example:</b> <code>1-5</code> means
+										it will execute at minute 1, 2, 3, 4,
+										and 5.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="increment"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Minutes"
+								title="Increments"
+								sublabel="Execute at regular minute intervals"
+								explanation={
+									<span>
+										The job will execute at regular
+										intervals. The format is{' '}
+										<code>
+											StartingValue/IncrementValue
+										</code>
+										.<br />
+										<br />
+										<b>Example:</b> <code>0/15</code> means
+										it will start at minute 0 and execute
+										every 15 minutes (0, 15, 30, 45).
+									</span>
+								}
+							/>
+						}
+					/>
+				</RadioGroup>
+				{/* <div
+					style={{
+						marginTop: 8
+					}}
+				> */}
+				{mode === 'specific' && (
+					<SpecificListInputs
+						value={val}
+						onChange={(v) => updateField(0, v)}
+						label="Minute"
+						isNumber
+						min={0}
+						max={59}
+					/>
+				)}
+				{mode === 'range' && (
+					<RangeInputs
+						value={val}
+						onChange={(v) => updateField(0, v)}
+						label1="From Minute"
+						label2="To Minute"
+						defaultStart="1"
+						defaultEnd="5"
+						isNumber
+						min={1}
+						max={31}
+					/>
+				)}
+				{mode === 'increment' && (
+					<IncrementInputs
+						value={val}
+						onChange={(v) => updateField(0, v)}
+						label1="Starting Minute"
+						label2="Every N Minutes"
+						defaultStart="0"
+						defaultStep="15"
+						isNumber
+						min={0}
+						max={59}
+					/>
+				)}
+				{/* </div> */}
+			</Box>
+		);
+	};
+
+	const renderHoursTab = () => {
+		const val = parsedFields[1] || '*';
+		const mode = fieldModes[1] || 'every';
+
+		return (
+			<Box display="flex" flexDirection="column" gap={4}>
+				<RadioGroup
+					sx={{ gap: '12px' }}
+					value={mode}
+					onChange={(e) => {
+						const newModes = [...fieldModes];
+						newModes[1] = e.target.value;
+						setFieldModes(newModes);
+						if (e.target.value === 'every') updateField(1, '*');
+						if (e.target.value === 'specific') updateField(1, '0');
+						if (e.target.value === 'range') updateField(1, '1-5');
+						if (e.target.value === 'increment')
+							updateField(1, '0/2');
+					}}
+				>
+					<FormControlLabel
+						value="every"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Hours"
+								title="Every hour"
+								sublabel="Execute every single hour"
+								explanation={
+									<span>
+										The job will execute every single hour.
+										<br />
+										<br />
+										<b>Example:</b> <code>*</code> means
+										0:00, 1:00, 2:00... 23:00.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="specific"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Hours"
+								title="Specific hour(s)"
+								sublabel="Choose exact hours for execution"
+								explanation={
+									<span>
+										The job will execute at the exact
+										hour(s) you specify.
+										<br />
+										<br />
+										<b>Example:</b> <code>5,12</code> means
+										it will execute at 5:00 AM and 12:00 PM.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="range"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Hours"
+								title="Range"
+								sublabel="Specify a range of hours to execute on"
+								explanation={
+									<span>
+										The job will execute on every hour
+										within the given range, inclusive.
+										<br />
+										<br />
+										<b>Example:</b> <code>9-17</code> means
+										it will execute every hour from 9:00 AM
+										to 5:00 PM.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="increment"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Hours"
+								title="Increments"
+								sublabel="Execute at regular hour intervals"
+								explanation={
+									<span>
+										The job will execute at regular hour
+										intervals. The format is{' '}
+										<code>
+											StartingValue/IncrementValue
+										</code>
+										.<br />
+										<br />
+										<b>Example:</b> <code>0/4</code> means
+										it will start at hour 0 and execute
+										every 4 hours (0, 4, 8, 12, 16, 20).
+									</span>
+								}
+							/>
+						}
+					/>
+				</RadioGroup>
+				{mode === 'specific' && (
+					<SpecificListInputs
+						value={val}
+						onChange={(v) => updateField(1, v)}
+						label="Hour"
+						isNumber
+						min={0}
+						max={23}
+					/>
+				)}
+				{mode === 'range' && (
+					<RangeInputs
+						value={val}
+						onChange={(v) => updateField(1, v)}
+						label1="From Hour"
+						label2="To Hour"
+						defaultStart="9"
+						defaultEnd="17"
+						isNumber
+						min={0}
+						max={23}
+					/>
+				)}
+				{mode === 'increment' && (
+					<IncrementInputs
+						value={val}
+						onChange={(v) => updateField(1, v)}
+						label1="Starting Hour"
+						label2="Every N Hours"
+						defaultStart="0"
+						defaultStep="4"
+						isNumber
+						min={0}
+						max={23}
+					/>
+				)}
+			</Box>
+		);
+	};
+
+	const renderDayOfMonthTab = () => {
+		const val = parsedFields[2] || '*';
+		const mode = fieldModes[2] || 'every';
+
+		return (
+			<Box display="flex" flexDirection="column" gap={4}>
+				<RadioGroup
+					sx={{ gap: '12px' }}
+					value={mode}
+					onChange={(e) => {
+						const newModes = [...fieldModes];
+						newModes[2] = e.target.value;
+						setFieldModes(newModes);
+						if (e.target.value === 'every') updateField(2, '*');
+						if (e.target.value === 'not_specified')
+							updateField(2, '?');
+						if (e.target.value === 'specific') updateField(2, '1');
+						if (e.target.value === 'range') updateField(2, '1-5');
+						if (e.target.value === 'increment')
+							updateField(2, '1/5');
+						if (e.target.value === 'last') updateField(2, 'L');
+						if (e.target.value === 'weekday') updateField(2, '15W');
+					}}
+				>
+					<FormControlLabel
+						value="every"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Day of Month"
+								title="Every day"
+								sublabel="Execute every single day of the month"
+								explanation={
+									<span>
+										The job will execute every single day of
+										the month.
+										<br />
+										<br />
+										<b>Example:</b> <code>*</code> means the
+										1st, 2nd, 3rd... 31st.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="not_specified"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Day of Month"
+								title="Not specified"
+								sublabel="Don't specify a day of the month"
+								explanation={
+									<span>
+										This field is ignored. This is typically
+										used when you want to specify a Day of
+										the week instead, as you can only
+										specify one or the other in Elyx Cron
+										syntax.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="specific"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								title="Specific day(s)"
+								fieldName="Day of Month"
+								sublabel="Choose exact days of the month"
+								explanation={
+									<span>
+										The job will execute on the exact day(s)
+										of the month you specify.
+										<br />
+										<br />
+										<b>Example:</b> <code>1,15</code> means
+										the 1st and 15th of the month.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="range"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								title="Range"
+								fieldName="Day of Month"
+								sublabel="Specify a range of days"
+								explanation={
+									<span>
+										The job will execute on every day within
+										the given range, inclusive.
+										<br />
+										<br />
+										<b>Example:</b> <code>1-5</code> means
+										the 1st through the 5th of the month.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="increment"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								title="Increments"
+								fieldName="Day of Month"
+								sublabel="Execute at regular day intervals"
+								explanation={
+									<span>
+										The job will execute at regular day
+										intervals. The format is{' '}
+										<code>
+											StartingValue/IncrementValue
+										</code>
+										.<br />
+										<br />
+										<b>Example:</b> <code>1/5</code> means
+										it will start on the 1st and execute
+										every 5 days.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="last"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Day of Month"
+								title="Last day of the month"
+								sublabel="Execute on the last day of the month"
+								explanation={
+									<span>
+										The job will execute on the last day of
+										the month.
+										<br />
+										<br />
+										<b>Example:</b> <code>L</code> means the
+										31st of January, 28th/29th of February,
+										etc.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="weekday"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								title="Nearest weekday"
+								fieldName="Day of Month"
+								sublabel="Execute on the nearest weekday to a specific day"
+								explanation={
+									<span>
+										The job will execute on the nearest
+										weekday to the given day.
+										<br />
+										<br />
+										<b>Example:</b> <code>15W</code> means
+										if the 15th is a Saturday, it will
+										execute on Friday the 14th.
+									</span>
+								}
+							/>
+						}
+					/>
+				</RadioGroup>
+				{mode === 'specific' && (
+					<SpecificListInputs
+						value={val}
+						onChange={(v) => updateField(2, v)}
+						label="Day of Month"
+						isNumber
+						min={1}
+						max={31}
+					/>
+				)}
+				{mode === 'range' && (
+					<RangeInputs
+						value={val}
+						onChange={(v) => updateField(2, v)}
+						label1="From Day"
+						label2="To Day"
+						defaultStart="1"
+						defaultEnd="5"
+						isNumber
+						min={1}
+						max={31}
+					/>
+				)}
+				{mode === 'increment' && (
+					<IncrementInputs
+						value={val}
+						onChange={(v) => updateField(2, v)}
+						label1="Starting Day"
+						label2="Every N Days"
+						defaultStart="1"
+						defaultStep="5"
+						isNumber
+						min={1}
+						max={31}
+					/>
+				)}
+				{mode === 'weekday' && (
+					<TextField
+						size="small"
+						label="Nearest weekday to Day"
+						value={val.replace('W', '')}
+						onChange={(e) =>
+							updateField(2, `${clamp(e.target.value, 1, 31)}W`)
+						}
+						type="number"
+						inputProps={{ min: 1, max: 31 }}
+						sx={{ width: 180 }}
+					/>
+				)}
+			</Box>
+		);
+	};
+
+	const renderMonthTab = () => {
+		const val = parsedFields[3] || '*';
+		const mode = fieldModes[3] || 'every';
+
+		return (
+			<Box display="flex" flexDirection="column" gap={4}>
+				<RadioGroup
+					sx={{ gap: '12px' }}
+					value={mode}
+					onChange={(e) => {
+						const newModes = [...fieldModes];
+						newModes[3] = e.target.value;
+						setFieldModes(newModes);
+						if (e.target.value === 'every') updateField(3, '*');
+						if (e.target.value === 'specific')
+							updateField(3, 'JAN');
+						if (e.target.value === 'range')
+							updateField(3, 'JAN-DEC');
+						if (e.target.value === 'increment')
+							updateField(3, '1/2');
+					}}
+				>
+					<FormControlLabel
+						value="every"
+						control={<Radio />}
+						label={renderRadioLabel(
+							'Every month (*)',
+							'Execute every single month'
+						)}
+					/>
+					<FormControlLabel
+						value="specific"
+						control={<Radio />}
+						label={renderRadioLabel(
+							'Specific month(s)',
+							'Choose exact months for execution'
+						)}
+					/>
+					<FormControlLabel
+						value="range"
+						control={<Radio />}
+						label={renderRadioLabel(
+							'Range',
+							'Specify a range of months'
+						)}
+					/>
+					<FormControlLabel
+						value="increment"
+						control={<Radio />}
+						label={renderRadioLabel(
+							'Increments',
+							'Execute at regular month intervals'
+						)}
+					/>
+				</RadioGroup>
+				{mode === 'specific' && (
+					<SpecificListInputs
+						value={val}
+						onChange={(v) => updateField(3, v)}
+						label="Month"
+						options={monthOptions}
+					/>
+				)}
+				{mode === 'range' && (
+					<EnumRangeInputs
+						value={val}
+						onChange={(v) => updateField(3, v)}
+						label1="From Month"
+						label2="To Month"
+						defaultStart="JAN"
+						defaultEnd="DEC"
+						options={monthOptions}
+					/>
+				)}
+				{mode === 'increment' && (
+					<EnumIncrementInputs
+						value={val}
+						onChange={(v) => updateField(3, v)}
+						label1="Starting Month"
+						label2="Every N Months"
+						defaultStart="JAN"
+						defaultStep="3"
+						options={monthOptions}
+					/>
+				)}
+			</Box>
+		);
+	};
+
+	const renderDayOfWeekTab = () => {
+		const val = parsedFields[4] || '?';
+		const mode = fieldModes[4] || 'every';
+
+		return (
+			<Box display="flex" flexDirection="column" gap={4}>
+				<RadioGroup
+					sx={{ gap: '12px' }}
+					value={mode}
+					onChange={(e) => {
+						const newModes = [...fieldModes];
+						newModes[4] = e.target.value;
+						setFieldModes(newModes);
+						if (e.target.value === 'every') updateField(4, '*');
+						if (e.target.value === 'not_specified')
+							updateField(4, '?');
+						if (e.target.value === 'specific')
+							updateField(4, 'MON');
+						if (e.target.value === 'range')
+							updateField(4, 'MON-FRI');
+						if (e.target.value === 'increment')
+							updateField(4, '1/2');
+						if (e.target.value === 'last') updateField(4, '2L');
+						if (e.target.value === 'nth') updateField(4, '2#2');
+					}}
+				>
+					<FormControlLabel
+						value="every"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Day of Week"
+								title="Every day of week"
+								sublabel="Execute every day of the week"
+								explanation={
+									<span>
+										The job will execute every day of the
+										week.
+										<br />
+										<br />
+										<b>Example:</b> <code>*</code> means
+										MON, TUE, WED... SUN.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="not_specified"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Day of Week"
+								title="Not specified"
+								sublabel="Don't specify a day of the week"
+								explanation={
+									<span>
+										This field is ignored. This is typically
+										used when you want to specify a Day of
+										the month instead, as you can only
+										specify one or the other in Elyx Cron
+										syntax.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="specific"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Day of Week"
+								title="Specific day(s)"
+								sublabel="Choose exact days of the week"
+								explanation={
+									<span>
+										The job will execute on the exact day(s)
+										of the week you specify.
+										<br />
+										<br />
+										<b>Example:</b> <code>MON,FRI</code>{' '}
+										means Monday and Friday.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="range"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								title="Range"
+								fieldName="Day of Week"
+								sublabel="Specify a range of days of the week"
+								explanation={
+									<span>
+										The job will execute on every day within
+										the given range, inclusive.
+										<br />
+										<br />
+										<b>Example:</b> <code>MON-FRI</code>{' '}
+										means Monday through Friday.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="increment"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								title="Increments"
+								fieldName="Day of Week"
+								sublabel="Execute at regular intervals of days of the week"
+								explanation={
+									<span>
+										The job will execute at regular day of
+										the week intervals. The format is{' '}
+										<code>
+											StartingValue/IncrementValue
+										</code>
+										.<br />
+										<br />
+										<b>Example:</b> <code>1/2</code> means
+										it will start on Monday and execute
+										every 2 days.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="last"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Day of Week"
+								title="Last occurrence"
+								sublabel="Execute on the last occurrence of a specific day in the month"
+								explanation={
+									<span>
+										The job will execute on the last
+										occurrence of a specific day of the week
+										in the month.
+										<br />
+										<br />
+										<b>Example:</b> <code>2L</code> means
+										the last Tuesday of the month.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="nth"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Day of Week"
+								title="Nth occurrence"
+								sublabel="Execute on the Nth occurrence of a specific day in the month"
+								explanation={
+									<span>
+										The job will execute on the Nth
+										occurrence of a specific day of the week
+										in the month.
+										<br />
+										<br />
+										<b>Example:</b> <code>2#2</code> means
+										the second Tuesday of the month.
+									</span>
+								}
+							/>
+						}
+					/>
+				</RadioGroup>
+				{mode === 'specific' && (
+					<SpecificListInputs
+						value={val}
+						onChange={(v) => updateField(4, v)}
+						label="Day of Week"
+						options={dowOptions}
+					/>
+				)}
+				{mode === 'range' && (
+					<EnumRangeInputs
+						value={val}
+						onChange={(v) => updateField(4, v)}
+						label1="From Day"
+						label2="To Day"
+						defaultStart="MON"
+						defaultEnd="FRI"
+						options={dowOptions}
+					/>
+				)}
+				{mode === 'increment' && (
+					<EnumIncrementInputs
+						value={val}
+						onChange={(v) => updateField(4, v)}
+						label1="Starting Day"
+						label2="Every N Days"
+						defaultStart="MON"
+						defaultStep="2"
+						options={dowOptions}
+					/>
+				)}
+				{mode === 'last' && (
+					<FormControl size="small" sx={{ width: 180 }}>
+						<InputLabel>Last occurrence of</InputLabel>
+						<Select
+							value={val.replace('L', '') || '2'}
+							label="Last occurrence of"
+							onChange={(e) =>
+								updateField(4, `${e.target.value}L`)
+							}
+						>
+							{dowOptionsNumeric.map((opt) => (
+								<MenuItem key={opt.value} value={opt.value}>
+									{opt.label}
+								</MenuItem>
+							))}
+						</Select>
+					</FormControl>
+				)}
+				{mode === 'nth' && (
+					<Box display="flex" gap={2} alignItems="center">
+						<FormControl size="small" sx={{ width: 140 }}>
+							<InputLabel>Day of Week</InputLabel>
+							<Select
+								value={
+									val.includes('#') ? val.split('#')[0] : '2'
+								}
+								label="Day of Week"
+								onChange={(e) =>
+									updateField(
+										4,
+										`${e.target.value}#${val.includes('#') ? val.split('#')[1] : '1'}`
+									)
+								}
+							>
+								{dowOptionsNumeric.map((opt) => (
+									<MenuItem key={opt.value} value={opt.value}>
+										{opt.label}
+									</MenuItem>
+								))}
+							</Select>
+						</FormControl>
+						<Typography variant="body1" color="textSecondary">
+							#
+						</Typography>
+						<TextField
+							size="small"
+							label="Occurrence (1-5)"
+							value={val.includes('#') ? val.split('#')[1] : '1'}
+							onChange={(e) =>
+								updateField(
+									4,
+									`${val.includes('#') ? val.split('#')[0] : '2'}#${clamp(e.target.value, 1, 5)}`
+								)
+							}
+							type="number"
+							inputProps={{ min: 1, max: 5 }}
+							sx={{ width: 140 }}
+						/>
+					</Box>
+				)}
+			</Box>
+		);
+	};
+
+	const renderYearTab = () => {
+		const val = parsedFields[5] || '*';
+		const mode = fieldModes[5] || 'every';
+
+		return (
+			<Box display="flex" flexDirection="column" gap={4}>
+				<RadioGroup
+					sx={{ gap: '12px' }}
+					value={mode}
+					onChange={(e) => {
+						const newModes = [...fieldModes];
+						newModes[5] = e.target.value;
+						setFieldModes(newModes);
+						if (e.target.value === 'every') updateField(5, '*');
+						if (e.target.value === 'specific')
+							updateField(5, '2024');
+						if (e.target.value === 'range')
+							updateField(5, '2024-2030');
+						if (e.target.value === 'increment')
+							updateField(5, '2024/2');
+					}}
+				>
+					<FormControlLabel
+						value="every"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Year"
+								title="Every year"
+								sublabel="Execute every single year"
+								explanation={
+									<span>
+										The job will execute every single year.
+										<br />
+										<br />
+										<b>Example:</b> <code>*</code> means
+										2024, 2025, 2026...
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="specific"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Year"
+								title="Specific year(s)"
+								sublabel="Choose exact years for execution"
+								explanation={
+									<span>
+										The job will execute in the exact
+										year(s) you specify.
+										<br />
+										<br />
+										<b>Example:</b> <code>2024,2025</code>.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="range"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Year"
+								title="Range"
+								sublabel="Specify a range of years"
+								explanation={
+									<span>
+										The job will execute on every year
+										within the given range, inclusive.
+										<br />
+										<br />
+										<b>Example:</b> <code>2024-2030</code>{' '}
+										means 2024 through 2030.
+									</span>
+								}
+							/>
+						}
+					/>
+					<FormControlLabel
+						value="increment"
+						control={<Radio />}
+						label={
+							<RadioLabelWithHelp
+								fieldName="Year"
+								title="Increments"
+								sublabel="Execute at regular year intervals"
+								explanation={
+									<span>
+										The job will execute at regular year
+										intervals. The format is{' '}
+										<code>
+											StartingValue/IncrementValue
+										</code>
+										.<br />
+										<br />
+										<b>Example:</b> <code>2024/2</code>{' '}
+										means it will start in 2024 and execute
+										every 2 years (2024, 2026, 2028...).
+									</span>
+								}
+							/>
+						}
+					/>
+				</RadioGroup>
+				{mode === 'specific' && (
+					<SpecificListInputs
+						value={val}
+						onChange={(v) => updateField(5, v)}
+						label="Year"
+						isNumber
+						min={1970}
+						max={2199}
+					/>
+				)}
+				{mode === 'range' && (
+					<RangeInputs
+						value={val}
+						onChange={(v) => updateField(5, v)}
+						label1="From Year"
+						label2="To Year"
+						defaultStart="2024"
+						defaultEnd="2030"
+						isNumber
+						min={1970}
+						max={2199}
+					/>
+				)}
+				{mode === 'increment' && (
+					<IncrementInputs
+						value={val}
+						onChange={(v) => updateField(5, v)}
+						label1="Starting Year"
+						label2="Every N Years"
+						defaultStart="2024"
+						defaultStep="2"
+						isNumber
+						min={1970}
+						max={2199}
+					/>
+				)}
+			</Box>
+		);
+	};
+
+	const saveValue = (e: any) => {
+		let storage: ChangeSet | IValueStoreClient =
+			props.project.localTestValues;
+
+		if (onlyDefault) {
+			storage = props.project.logic.addChangeSet(
+				new ChangeSet(
+					props.project.logic,
+					ProjectState.sessionAuthor,
+					new Date().toISOString(),
+					props.valueOwner,
+					false,
+					StateMutationAction.SetPrimitiveDefaultValue
+				)
+			);
+		}
+
+		const changeSet = handleLiteralValueChange(
+			cronString,
+			props.valueOwner,
+			props.project.logic,
+			storage
+		);
+
+		if (!!changeSet) {
+			props.project.renderAndCloseChangeSet(changeSet);
+		}
+
+		const valueOwnerCanvasParentEntity = getParentCanvasEntity(
+			props.valueOwner
+		);
+		props.project.emit(valueOwnerCanvasParentEntity.id, {});
+		props.project.test?.validate();
+
+		props.onClose?.(e);
+	};
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				gap: '4px',
+				paddingTop: '40px',
+				paddingBottom: '40px'
+			}}
+		>
+			<span style={{ padding: '0 40px' }}>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: '16px'
+					}}
+				>
+					<button
+						className="dialog_back_button"
+						onClick={(e) => props.onClose?.(e)}
+					>
+						<i className="fa-solid fa-arrow-left"></i>
+					</button>
+					<h1
+						style={{
+							margin: '0px',
+							fontWeight: 500,
+							fontSize: '28px'
+						}}
+					>
+						Cron Expression Builder
+					</h1>
+				</div>
+			</span>
+
+			<Box flex={1} overflow="auto" mt={4}>
+				<Box
+					sx={{
+						borderBottom: 1,
+						borderColor: 'divider',
+						padding: '0 40px'
+					}}
+				>
+					<Tabs
+						value={activeTab}
+						onChange={(e, val) => setActiveTab(val)}
+					>
+						{CRON_TABS.map((tab, idx) => (
+							<Tab
+								key={idx}
+								label={
+									<div
+										style={{
+											display: 'flex',
+											flexDirection: 'column',
+											alignItems: 'flex-start'
+										}}
+									>
+										<div
+											style={{
+												display: 'flex',
+												alignItems: 'center',
+												gap: 6
+											}}
+										>
+											{tab}
+											<span
+												style={{
+													background:
+														'rgba(0,0,0,0.08)',
+													borderRadius: 10,
+													minWidth: 20,
+													padding: '0 6px',
+													height: 20,
+													display: 'flex',
+													alignItems: 'center',
+													justifyContent: 'center',
+													fontSize: 10,
+													color: 'rgba(0,0,0,0.6)'
+												}}
+											>
+												{parsedFields[idx] || '*'}
+											</span>
+										</div>
+										<span
+											style={{
+												fontSize: 10,
+												color: 'rgba(0,0,0,0.6)',
+												textTransform: 'none',
+												marginTop: 4
+											}}
+										>
+											{formatCronFieldToReadable(
+												idx,
+												parsedFields[idx] || '*'
+											)}
+										</span>
+									</div>
+								}
+							/>
+						))}
+					</Tabs>
+				</Box>
+
+				<Box p={3} minHeight={300} style={{ padding: '24px 80px' }}>
+					{activeTab === 0 && renderMinutesTab()}
+					{activeTab === 1 && renderHoursTab()}
+					{activeTab === 2 && renderDayOfMonthTab()}
+					{activeTab === 3 && renderMonthTab()}
+					{activeTab === 4 && renderDayOfWeekTab()}
+					{activeTab === 5 && renderYearTab()}
+				</Box>
+
+				<hr
+					style={{
+						margin: '20px 0 0 0',
+						border: '1px solid rgba(0,0,0,0.08)'
+					}}
+				/>
+
+				<Box p={3} style={{ padding: '24px 80px' }}>
+					<h2
+						style={{
+							fontWeight: 400,
+							margin: '0 0 16px 0',
+							fontSize: '18px',
+							color: 'rgba(0,0,0,0.8)'
+						}}
+					>
+						{formatCronToHumanReadable(parsedFields)}
+					</h2>
+					<TextField
+						fullWidth
+						label="Raw Cron Expression"
+						value={cronString}
+						error={validationErrors.length > 0}
+						helperText={
+							validationErrors.length > 0
+								? validationErrors[0].message
+								: 'Edit the raw cron expression directly (6 fields)'
+						}
+						onChange={(e) =>
+							handleRawCronStringChange(e.target.value)
+						}
+						variant="outlined"
+					/>
+				</Box>
+			</Box>
+
+			<section
+				style={{
+					alignSelf: 'flex-start',
+					display: 'flex',
+					flexDirection: 'row',
+					justifyContent: 'flex-end',
+					width: '100%',
+					gap: '16px',
+					padding: '0 40px'
+				}}
+			>
+				<Button onClick={(e: any) => props.onClose?.(e)} variant="text">
+					Cancel
+				</Button>
+				<Button onClick={saveValue} variant="contained" color="primary">
+					Save
+				</Button>
+			</section>
+		</div>
+	);
+};
+
+export default CronBuilderDialog;