Function CronJobModal

src/components/CronJobModal.tsx:79–556

({ isOpen, onClose, onSave, editingJob }: CronJobModalProps)

}

export function CronJobModal({ isOpen, onClose, onSave, editingJob }: CronJobModalProps) {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [schedule, setSchedule] = useState("0 9 * * *");
  const [timezone, setTimezone] = useState(DEFAULT_TIMEZONE);
  const [frequencyMode, setFrequencyMode] = useState<FrequencyMode>("daily");
  const [showPresets, setShowPresets] = useState(false);
  const [showTemplates, setShowTemplates] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isSaving, setIsSaving] = useState(false);

  // Visual builder state
  const [everyMinutes, setEveryMinutes] = useState(15);
  const [selectedHour, setSelectedHour] = useState(9);
  const [selectedMinute, setSelectedMinute] = useState(0);
  const [selectedDays, setSelectedDays] = useState<number[]>([1]); // Monday
  const [selectedDayOfMonth, setSelectedDayOfMonth] = useState(1);

  useEffect(() => {
    if (isOpen) {
      if (editingJob) {
        setName(editingJob.name);
        setDescription(editingJob.description);
        setSchedule(typeof editingJob.schedule === "string" ? editingJob.schedule : String(editingJob.schedule));
        setTimezone(editingJob.timezone);
        setFrequencyMode("custom");
      } else {
        setName("");
        setDescription("");
        setSchedule("0 9 * * *");
        setTimezone(DEFAULT_TIMEZONE);
        setFrequencyMode("daily");
      }
      setErrors({});
    }
  }, [isOpen, editingJob]);

  // Update schedule when visual builder changes
  useEffect(() => {
    if (frequencyMode === "custom") return;
    const newSchedule = buildCron(frequencyMode, {
      minutes: everyMinutes,
      minute: selectedMinute,
      hour: selectedHour,
      days: selectedDays,
      day: selectedDayOfMonth,
    });
    setSchedule(newSchedule);
  }, [frequencyMode, everyMinutes, selectedHour, selectedMinute, selectedDays, selectedDayOfMonth]);

  const validate = (): boolean => {
    const newErrors: Record<string, string> = {};
    if (!name.trim()) newErrors.name = "Name is required";
    if (!schedule.trim()) newErrors.schedule = "Schedule is required";
    else if (!isValidCron(schedule)) newErrors.schedule = "Invalid cron expression";
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };