+ {/* Workflow Picker */}
+
+
+ {selectedWorkflow ? (
+
+ {selectedWorkflow.title}
+
+
+ ) : (
+ <>
+
setWorkflowSearch(e.target.value)}
+ onFocus={() => setWorkflowPickerOpen(true)}
+ placeholder="Search workflows..."
+ />
+ {workflowPickerOpen && (
+
+ {workflows.map((wf) => (
+
+ ))}
+ {workflows.length === 0 && (
+
+ No workflows found
+
+ )}
+
+ )}
+ >
+ )}
+
+
+ {/* Schedule Name & Description */}
+
+
+ setScheduleName(e.target.value)}
+ />
+
+
+
+ setScheduleDescription(e.target.value)}
+ />
+
+
+ {/* Cron Presets */}
+
+
+
+ {CRON_PRESETS.map((preset) => (
+
+ ))}
+
+
+
+ {/* Custom Cron Input */}
+
+
+
setCronExpression(e.target.value)}
+ placeholder="* * * * *"
+ className={cn(!valid && cronExpression && "border-destructive")}
+ />
+ {humanReadable && (
+
{humanReadable}
+ )}
+ {!valid && cronExpression && (
+
+ Invalid cron expression
+
+ )}
+
+
+ {/* Timezone Selector */}
+
+
+
setTimezoneFilter(e.target.value)}
+ onFocus={(e) => e.currentTarget.select()}
+ onBlur={() => {
+ if (
+ filteredTimezones.length === 1 &&
+ filteredTimezones[0] !== undefined
+ ) {
+ setTimezone(filteredTimezones[0]);
+ }
+ setTimezoneFilter(null);
+ }}
+ placeholder="Search timezones..."
+ />
+ {timezoneFilter !== null && (
+
+ {filteredTimezones.slice(0, 20).map((tz) => (
+
+ ))}
+ {filteredTimezones.length === 0 && (
+
+ No timezones found
+
+ )}
+
+ )}
+
Current: {timezone}
+
+
+ {/* Next Runs Preview */}
+ {nextRuns.length > 0 && (
+
+
+
+ {nextRuns.map((run) => (
+
+ {formatNextRun(run, timezone)}
+
+ ))}
+
+
+ )}
+
+
+