[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" "use client" import CronJobScheduler from "../cron-job-scheduler" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="cron-job-scheduler.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Checkbox } from "@/components/ui/checkbox" import { Textarea } from "@/components/ui/textarea" import { Switch } from "@/components/ui/switch" import { Clock, Globe, Repeat, Calendar, Info } from "lucide-react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" interface JobSchedule { timezone: string expiresAt: number hours: number[] mdays: number[] minutes: number[] months: number[] wdays: number[] } const weekDays = [ { value: 0, 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" }, ] const months = [ { value: 1, label: "January" }, { value: 2, label: "February" }, { value: 3, label: "March" }, { value: 4, label: "April" }, { value: 5, label: "May" }, { value: 6, label: "June" }, { value: 7, label: "July" }, { value: 8, label: "August" }, { value: 9, label: "September" }, { value: 10, label: "October" }, { value: 11, label: "November" }, { value: 12, label: "December" }, ] const aiVoices = ["Male", "Female"] const languages = ["English", "Spanish", "French", "German", "Hindi", "Chinese"] const countryCodes = [ { code: "+91", flag: "🇮🇳", country: "India" }, { code: "+1", flag: "🇺🇸", country: "USA" }, { code: "+44", flag: "🇬🇧", country: "UK" }, { code: "+33", flag: "🇫🇷", country: "France" }, { code: "+49", flag: "🇩🇪", country: "Germany" }, { code: "+81", flag: "🇯🇵", country: "Japan" }, { code: "+86", flag: "🇨🇳", country: "China" }, ] export default function CronJobScheduler() { const [jobType, setJobType] = useState<"onetime" | "recurring">("recurring") const [recurringType, setRecurringType] = useState<"simple" | "advanced">("simple") // Goal Information Fields const [goalName, setGoalName] = useState("") const [aiVoice, setAiVoice] = useState("Male") const [language, setLanguage] = useState("English") const [countryCode, setCountryCode] = useState("+91") const [phoneNumber, setPhoneNumber] = useState("") const [aiPersona, setAiPersona] = useState("") const [reminderContext, setReminderContext] = useState("") const [isActive, setIsActive] = useState(true) // One-time job settings const [oneTimeDate, setOneTimeDate] = useState("") const [oneTimeTime, setOneTimeTime] = useState("") // Simple recurring settings const [simpleInterval, setSimpleInterval] = useState<"daily" | "weekly" | "monthly" | "yearly">("daily") const [simpleTime, setSimpleTime] = useState("09:00") const [weeklyDay, setWeeklyDay] = useState(1) const [monthlyDay, setMonthlyDay] = useState(1) const [yearlyMonth, setYearlyMonth] = useState(1) const [yearlyDay, setYearlyDay] = useState(1) // Advanced settings const [schedule, setSchedule] = useState({ timezone: "", expiresAt: 0, hours: [], mdays: [], minutes: [], months: [], wdays: [], }) const [expirationDate, setExpirationDate] = useState("") const [expirationTime, setExpirationTime] = useState("") // Auto-detect user's timezone useEffect(() => { const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone setSchedule((prev) => ({ ...prev, timezone: userTimezone })) }, []) const handleScheduleChange = (field: keyof JobSchedule, value: any) => { setSchedule((prev) => ({ ...prev, [field]: value })) } const toggleArrayValue = (field: keyof JobSchedule, value: number) => { const currentArray = schedule[field] as number[] const newArray = currentArray.includes(value) ? currentArray.filter((v) => v !== value) : [...currentArray, value].sort((a, b) => a - b) handleScheduleChange(field, newArray) } const generateScheduleFromSimple = (): JobSchedule => { const [hour, minute] = simpleTime.split(":").map(Number) switch (simpleInterval) { case "daily": return { ...schedule, hours: [hour], minutes: [minute], mdays: [-1], // every day months: [-1], // every month wdays: [-1], // every weekday } case "weekly": return { ...schedule, hours: [hour], minutes: [minute], mdays: [-1], months: [-1], wdays: [weeklyDay], } case "monthly": return { ...schedule, hours: [hour], minutes: [minute], mdays: [monthlyDay], months: [-1], wdays: [-1], } case "yearly": return { ...schedule, hours: [hour], minutes: [minute], mdays: [yearlyDay], months: [yearlyMonth], wdays: [-1], } default: return schedule } } const formatDateTimeToNumber = (date: string, time: string): number => { if (!date || !time) return 0 const dateTime = new Date(`${date}T${time}`) const year = dateTime.getFullYear() const month = String(dateTime.getMonth() + 1).padStart(2, "0") const day = String(dateTime.getDate()).padStart(2, "0") const hour = String(dateTime.getHours()).padStart(2, "0") const minute = String(dateTime.getMinutes()).padStart(2, "0") const second = String(dateTime.getSeconds()).padStart(2, "0") return Number.parseInt(`${year}${month}${day}${hour}${minute}${second}`) } const getSchedulePreview = (): string => { if (jobType === "onetime") { if (!oneTimeDate || !oneTimeTime) return "Please select date and time" const date = new Date(`${oneTimeDate}T${oneTimeTime}`) return `Reminder will be sent once on ${date.toLocaleDateString()} at ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}` } if (recurringType === "simple") { if (!simpleTime) return "Please select time" const [hour, minute] = simpleTime.split(":").map(Number) const timeStr = new Date(2000, 0, 1, hour, minute).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) switch (simpleInterval) { case "daily": return `Reminder will be sent every day at ${timeStr}` case "weekly": const dayName = weekDays.find((d) => d.value === weeklyDay)?.label || "Unknown" return `Reminder will be sent every ${dayName} at ${timeStr}` case "monthly": const suffix = getOrdinalSuffix(monthlyDay) return `Reminder will be sent every ${monthlyDay}${suffix} of the month at ${timeStr}` case "yearly": const monthName = months.find((m) => m.value === yearlyMonth)?.label || "Unknown" const daySuffix = getOrdinalSuffix(yearlyDay) return `Reminder will be sent every ${monthName} ${yearlyDay}${daySuffix} at ${timeStr}` default: return "Please configure schedule" } } // Advanced mode const { hours, minutes, mdays, months: schedMonths, wdays } = schedule if (hours.length === 0 || minutes.length === 0) { return "Please select at least one hour and minute" } let preview = "Reminder will be sent " // Frequency description const isEveryDay = mdays.includes(-1) || (mdays.length === 31 && mdays.every((d, i) => d === i + 1)) const isEveryMonth = schedMonths.includes(-1) || (schedMonths.length === 12 && schedMonths.every((m, i) => m === i + 1)) const isEveryWeekday = wdays.includes(-1) || wdays.length === 7 if (isEveryDay && isEveryMonth && isEveryWeekday) { preview += "every day" } else if (wdays.length > 0 && !wdays.includes(-1)) { const dayNames = wdays.map((d) => weekDays.find((wd) => wd.value === d)?.label).filter(Boolean) if (dayNames.length === 1) { preview += `every ${dayNames[0]}` } else if (dayNames.length === 7) { preview += "every day" } else { preview += `on ${dayNames.slice(0, -1).join(", ")} and ${dayNames[dayNames.length - 1]}` } } else if (mdays.length > 0 && !mdays.includes(-1)) { if (mdays.length === 1) { const suffix = getOrdinalSuffix(mdays[0]) preview += `on the ${mdays[0]}${suffix} of each month` } else { const dayList = mdays.map((d) => `${d}${getOrdinalSuffix(d)}`).join(", ") preview += `on the ${dayList} of each month` } } else { preview += "based on custom schedule" } // Time description if (hours.length === 1 && minutes.length === 1) { const timeStr = new Date(2000, 0, 1, hours[0], minutes[0]).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", }) preview += ` at ${timeStr}` } else if (hours.includes(-1) && minutes.includes(-1)) { preview += " every minute" } else if (hours.includes(-1)) { if (minutes.length === 1) { preview += ` at ${minutes[0]} minutes past every hour` } else { preview += ` at minutes ${minutes.join(", ")} of every hour` } } else if (minutes.includes(-1)) { if (hours.length === 1) { preview += ` every minute during hour ${hours[0]}` } else { preview += ` every minute during hours ${hours.join(", ")}` } } else { const times = hours .flatMap((h) => minutes.map((m) => new Date(2000, 0, 1, h, m).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })), ) .slice(0, 3) // Show max 3 times if (hours.length * minutes.length <= 3) { preview += ` at ${times.join(", ")}` } else { preview += ` at ${times.join(", ")} and ${hours.length * minutes.length - 3} more times` } } // Month restriction if (schedMonths.length > 0 && !schedMonths.includes(-1) && schedMonths.length < 12) { const monthNames = schedMonths.map((m) => months.find((month) => month.value === m)?.label).filter(Boolean) if (monthNames.length === 1) { preview += ` in ${monthNames[0]}` } else { preview += ` in ${monthNames.slice(0, -1).join(", ")} and ${monthNames[monthNames.length - 1]}` } } return preview } const getOrdinalSuffix = (num: number): string => { const j = num % 10 const k = num % 100 if (j === 1 && k !== 11) return "st" if (j === 2 && k !== 12) return "nd" if (j === 3 && k !== 13) return "rd" return "th" } const handleSubmit = () => { let finalSchedule: JobSchedule if (jobType === "onetime") { const [hour, minute] = oneTimeTime.split(":").map(Number) const executionDate = new Date(`${oneTimeDate}T${oneTimeTime}`) const day = executionDate.getDate() const month = executionDate.getMonth() + 1 finalSchedule = { ...schedule, hours: [hour], minutes: [minute], mdays: [day], months: [month], wdays: [-1], } } else { finalSchedule = recurringType === "simple" ? generateScheduleFromSimple() : { ...schedule, expiresAt: formatDateTimeToNumber(expirationDate, expirationTime), } } console.log("Goal Configuration:", { goalName, aiVoice, language, phoneNumber: `${countryCode}${phoneNumber}`, aiPersona, reminderContext, isActive, schedule: finalSchedule, }) // Here you would make the API call to cron-job.org alert("Goal reminder scheduled successfully! Check console for details.") } return (

Add Goal + Create goal and get reminded in specific time intervals {/* Basic Information Section */}

Basic Information

Set up your goal details

{/* Goal Name */}

Goal Name setGoalName(e.target.value)} />

{/* AI Voice */}

AI Voice

{/* Language */}

Language

{/* Phone Number */}

Phone Number

setPhoneNumber(e.target.value)} className="flex-1 rounded-l-none" />

{/* AI Persona */}

AI Persona setAiPersona(e.target.value)} />

{/* Reminder Context */}

Reminder context

setReminderContext(e.target.value)}
                rows={4}
              />
            </div>

{/* Status */}
            <div className="space-y-2">
              <Label className="flex items-center gap-2">
                Status
                <Info className="w-4 h-4 text-gray-400" />
              </Label>
              <div className="flex items-center gap-2">
                <Switch checked={isActive} onCheckedChange={setIsActive} />
                <span className="text-sm">{isActive ? "Active" : "Inactive"}</span>
              </div>
            </div>
          </div>

{/* Timezone Display */}
          <div className="space-y-2">
            <Label className="flex items-center gap-2">
              <Globe className="w-4 h-4" />
              Timezone (Auto-detected)
            </Label>
            <div className="p-2 bg-gray-50 rounded border text-sm">{schedule.timezone || "Detecting..."}</div>
          </div>

{/* Job Type Selection */}
          <div className="space-y-4">
            <Label className="text-base font-medium">Schedule Type</Label>
            <RadioGroup value={jobType} onValueChange={(value: "onetime" | "recurring") => setJobType(value)}>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="onetime" id="onetime" />
                <Label htmlFor="onetime" className="flex items-center gap-2">
                  <Calendar className="w-4 h-4" />
                  One-time execution
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="recurring" id="recurring" />
                <Label htmlFor="recurring" className="flex items-center gap-2">
                  <Repeat className="w-4 h-4" />
                  Recurring schedule
                </Label>
              </div>
            </RadioGroup>
          </div>

{/* One-time Job Configuration */}
          {jobType === "onetime" && (
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">One-time Execution</CardTitle>
              </CardHeader>
              <CardContent>
                {/* One-time Preview */}
                <div className="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
                  <div className="flex items-start gap-2">
                    <Calendar className="w-5 h-5 text-green-600 mt-0.5" />
                    <div>
                      <h4 className="font-medium text-green-900 mb-1">Execution Preview</h4>
                      <p className="text-green-800 text-sm">{getSchedulePreview()}</p>
                    </div>
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="oneTimeDate">Date</Label>
                    <Input
                      id="oneTimeDate"
                      type="date"
                      value={oneTimeDate}
                      onChange={(e) => setOneTimeDate(e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="oneTimeTime">Time</Label>
                    <Input
                      id="oneTimeTime"
                      type="time"
                      value={oneTimeTime}
                      onChange={(e) => setOneTimeTime(e.target.value)}
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

{/* Recurring Job Configuration */}
          {jobType === "recurring" && (
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Recurring Schedule</CardTitle>
              </CardHeader>
              <CardContent>
                {/* Schedule Preview */}
                <div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                  <div className="flex items-start gap-2">
                    <Clock className="w-5 h-5 text-blue-600 mt-0.5" />
                    <div>
                      <h4 className="font-medium text-blue-900 mb-1">Schedule Preview</h4>
                      <p className="text-blue-800 text-sm">{getSchedulePreview()}</p>
                    </div>
                  </div>
                </div>

<Tabs value={recurringType} onValueChange={(value: "simple" | "advanced") => setRecurringType(value)}>
                  <TabsList className="grid w-full grid-cols-2">
                    <TabsTrigger value="simple">Simple</TabsTrigger>
                    <TabsTrigger value="advanced">Advanced</TabsTrigger>
                  </TabsList>

<TabsContent value="simple" className="space-y-4">
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <Label>Repeat Interval</Label>
                        <Select
                          value={simpleInterval}
                          onValueChange={(value: "daily" | "weekly" | "monthly" | "yearly") => setSimpleInterval(value)}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="daily">Daily</SelectItem>
                            <SelectItem value="weekly">Weekly</SelectItem>
                            <SelectItem value="monthly">Monthly</SelectItem>
                            <SelectItem value="yearly">Yearly</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="simpleTime">Time</Label>
                        <Input
                          id="simpleTime"
                          type="time"
                          value={simpleTime}
                          onChange={(e) => setSimpleTime(e.target.value)}
                        />
                      </div>

{simpleInterval === "weekly" && (
                        <div className="space-y-2">
                          <Label>Day of Week</Label>
                          <Select
                            value={weeklyDay.toString()}
                            onValueChange={(value) => setWeeklyDay(Number.parseInt(value))}
                          >
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              {weekDays.map((day) => (
                                <SelectItem key={day.value} value={day.value.toString()}>
                                  {day.label}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                      )}

{simpleInterval === "monthly" && (
                        <div className="space-y-2">
                          <Label htmlFor="monthlyDay">Day of Month</Label>
                          <Input
                            id="monthlyDay"
                            type="number"
                            min="1"
                            max="31"
                            value={monthlyDay}
                            onChange={(e) => setMonthlyDay(Number.parseInt(e.target.value))}
                          />
                        </div>
                      )}

{simpleInterval === "yearly" && (
                        <div className="grid grid-cols-2 gap-4">
                          <div className="space-y-2">
                            <Label>Month</Label>
                            <Select
                              value={yearlyMonth.toString()}
                              onValueChange={(value) => setYearlyMonth(Number.parseInt(value))}
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                {months.map((month) => (
                                  <SelectItem key={month.value} value={month.value.toString()}>
                                    {month.label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor="yearlyDay">Day</Label>
                            <Input
                              id="yearlyDay"
                              type="number"
                              min="1"
                              max="31"
                              value={yearlyDay}
                              onChange={(e) => setYearlyDay(Number.parseInt(e.target.value))}
                            />
                          </div>
                        </div>
                      )}
                    </div>
                  </TabsContent>

<TabsContent value="advanced" className="space-y-6">
                    {/* Minutes */}
                    <div className="space-y-3">
                      <Label>Minutes (0-59)</Label>
                      <div className="grid grid-cols-12 gap-2">
                        {Array.from({ length: 60 }, (_, i) => (
                          <div key={i} className="flex items-center space-x-1">
                            <Checkbox
                              id={`minute-${i}`}
                              checked={schedule.minutes.includes(i)}
                              onCheckedChange={() => toggleArrayValue("minutes", i)}
                            />
                            <Label htmlFor={`minute-${i}`} className="text-xs">
                              {i}
                            </Label>
                          </div>
                        ))}
                      </div>
                      <Button variant="outline" size="sm" onClick={() => handleScheduleChange("minutes", [-1])}>
                        Every Minute
                      </Button>
                    </div>

{/* Hours */}
                    <div className="space-y-3">
                      <Label>Hours (0-23)</Label>
                      <div className="grid grid-cols-12 gap-2">
                        {Array.from({ length: 24 }, (_, i) => (
                          <div key={i} className="flex items-center space-x-1">
                            <Checkbox
                              id={`hour-${i}`}
                              checked={schedule.hours.includes(i)}
                              onCheckedChange={() => toggleArrayValue("hours", i)}
                            />
                            <Label htmlFor={`hour-${i}`} className="text-xs">
                              {i}
                            </Label>
                          </div>
                        ))}
                      </div>
                      <Button variant="outline" size="sm" onClick={() => handleScheduleChange("hours", [-1])}>
                        Every Hour
                      </Button>
                    </div>

{/* Days of Month */}
                    <div className="space-y-3">
                      <Label>Days of Month (1-31)</Label>
                      <div className="grid grid-cols-16 gap-2">
                        {Array.from({ length: 31 }, (_, i) => (
                          <div key={i + 1} className="flex items-center space-x-1">
                            <Checkbox
                              id={`mday-${i + 1}`}
                              checked={schedule.mdays.includes(i + 1)}
                              onCheckedChange={() => toggleArrayValue("mdays", i + 1)}
                            />
                            <Label htmlFor={`mday-${i + 1}`} className="text-xs">
                              {i + 1}
                            </Label>
                          </div>
                        ))}
                      </div>
                      <Button variant="outline" size="sm" onClick={() => handleScheduleChange("mdays", [-1])}>
                        Every Day
                      </Button>
                    </div>

{/* Months */}
                    <div className="space-y-3">
                      <Label>Months</Label>
                      <div className="grid grid-cols-4 gap-2">
                        {months.map((month) => (
                          <div key={month.value} className="flex items-center space-x-2">
                            <Checkbox
                              id={`month-${month.value}`}
                              checked={schedule.months.includes(month.value)}
                              onCheckedChange={() => toggleArrayValue("months", month.value)}
                            />
                            <Label htmlFor={`month-${month.value}`} className="text-sm">
                              {month.label}
                            </Label>
                          </div>
                        ))}
                      </div>
                      <Button variant="outline" size="sm" onClick={() => handleScheduleChange("months", [-1])}>
                        Every Month
                      </Button>
                    </div>

{/* Days of Week */}
                    <div className="space-y-3">
                      <Label>Days of Week</Label>
                      <div className="grid grid-cols-4 gap-2">
                        {weekDays.map((day) => (
                          <div key={day.value} className="flex items-center space-x-2">
                            <Checkbox
                              id={`wday-${day.value}`}
                              checked={schedule.wdays.includes(day.value)}
                              onCheckedChange={() => toggleArrayValue("wdays", day.value)}
                            />
                            <Label htmlFor={`wday-${day.value}`} className="text-sm">
                              {day.label}
                            </Label>
                          </div>
                        ))}
                      </div>
                      <Button variant="outline" size="sm" onClick={() => handleScheduleChange("wdays", [-1])}>
                        Every Day
                      </Button>
                    </div>

{/* Expiration */}
                    <div className="space-y-3">
                      <Label>Job Expiration (Optional)</Label>
                      <div className="grid grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="expirationDate">Expiration Date</Label>
                          <Input
                            id="expirationDate"
                            type="date"
                            value={expirationDate}
                            onChange={(e) => setExpirationDate(e.target.value)}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="expirationTime">Expiration Time</Label>
                          <Input
                            id="expirationTime"
                            type="time"
                            value={expirationTime}
                            onChange={(e) => setExpirationTime(e.target.value)}
                          />
                        </div>
                      </div>
                    </div>
                  </TabsContent>
                </Tabs>
              </CardContent>
            </Card>
          )}

{/* Submit Button */}
          <div className="flex justify-end">
            <Button onClick={handleSubmit} className="px-8">
              Create Goal Reminder
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}</article></body></html>