Enhance schedule management with new fields and improved components

- Introduced new fields in the schedule schema: `serviceName`, `scheduleType`, and `script`, allowing for more flexible schedule configurations.
- Updated the `HandleSchedules` component to incorporate the new fields, enhancing user input options for schedule creation and updates.
- Refactored the `ShowSchedules` component to support the new `scheduleType` and display relevant information based on the selected type.
- Improved API handling for schedule creation and updates to accommodate the new fields, ensuring proper validation and error handling.
- Added a new `ShowSchedulesModal` component for better integration of schedule viewing in server settings, enhancing user experience.

apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx

@@ -13,7 +13,15 @@ import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
-import { Clock, Terminal, Info, PlusCircle, PenBoxIcon } from "lucide-react";
+import {
+	Clock,
+	Terminal,
+	Info,
+	PlusCircle,
+	PenBoxIcon,
+	RefreshCw,
+	DatabaseZap,
+} from "lucide-react";
 import {
 	Select,
 	SelectContent,
@@ -37,7 +45,10 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { toast } from "sonner";
-
+import type { CacheType } from "../../compose/domains/add-domain";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { cn } from "@/lib/utils";
 const commonCronExpressions = [
 	{ label: "Every minute", value: "* * * * *" },
 	{ label: "Every hour", value: "0 * * * *" },
@@ -48,21 +59,66 @@ const commonCronExpressions = [
 	{ label: "Every weekday at midnight", value: "0 0 * * 1-5" },
 ];
 
-const formSchema = z.object({
-	name: z.string().min(1, "Name is required"),
-	cronExpression: z.string().min(1, "Cron expression is required"),
-	shellType: z.enum(["bash", "sh"]).default("bash"),
-	command: z.string().min(1, "Command is required"),
-	enabled: z.boolean().default(true),
-});
+const formSchema = z
+	.object({
+		name: z.string().min(1, "Name is required"),
+		cronExpression: z.string().min(1, "Cron expression is required"),
+		shellType: z.enum(["bash", "sh"]).default("bash"),
+		command: z.string(),
+		enabled: z.boolean().default(true),
+		serviceName: z.string(),
+		scheduleType: z.enum([
+			"application",
+			"compose",
+			"server",
+			"dokploy-server",
+		]),
+		script: z.string(),
+	})
+	.superRefine((data, ctx) => {
+		if (data.scheduleType === "compose" && !data.serviceName) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Service name is required",
+				path: ["serviceName"],
+			});
+		}
+
+		if (
+			(data.scheduleType === "dokploy-server" ||
+				data.scheduleType === "server") &&
+			!data.script
+		) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Script is required",
+				path: ["script"],
+			});
+		}
+
+		if (
+			(data.scheduleType === "application" ||
+				data.scheduleType === "compose") &&
+			!data.command
+		) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Command is required",
+				path: ["command"],
+			});
+		}
+	});
 
 interface Props {
-	applicationId?: string;
+	id?: string;
 	scheduleId?: string;
+	scheduleType?: "application" | "compose" | "server" | "dokploy-server";
 }
 
-export const HandleSchedules = ({ applicationId, scheduleId }: Props) => {
+export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
+	const [cacheType, setCacheType] = useState<CacheType>("cache");
+
 	const utils = api.useUtils();
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
@@ -72,14 +128,36 @@ export const HandleSchedules = ({ applicationId, scheduleId }: Props) => {
 			shellType: "bash",
 			command: "",
 			enabled: true,
+			serviceName: "",
+			scheduleType: scheduleType || "application",
+			script: "",
 		},
 	});
 
+	const scheduleTypeForm = form.watch("scheduleType");
+
 	const { data: schedule } = api.schedule.one.useQuery(
 		{ scheduleId: scheduleId || "" },
 		{ enabled: !!scheduleId },
 	);
 
+	const {
+		data: services,
+		isFetching: isLoadingServices,
+		error: errorServices,
+		refetch: refetchServices,
+	} = api.compose.loadServices.useQuery(
+		{
+			composeId: id || "",
+			type: cacheType,
+		},
+		{
+			retry: false,
+			refetchOnWindowFocus: false,
+			enabled: !!id && scheduleType === "compose",
+		},
+	);
+
 	useEffect(() => {
 		if (scheduleId && schedule) {
 			form.reset({
@@ -88,6 +166,9 @@ export const HandleSchedules = ({ applicationId, scheduleId }: Props) => {
 				shellType: schedule.shellType,
 				command: schedule.command,
 				enabled: schedule.enabled,
+				serviceName: schedule.serviceName || "",
+				scheduleType: schedule.scheduleType,
+				script: schedule.script || "",
 			});
 		}
 	}, [form, schedule, scheduleId]);
@@ -97,18 +178,32 @@ export const HandleSchedules = ({ applicationId, scheduleId }: Props) => {
 		: api.schedule.create.useMutation();
 
 	const onSubmit = async (values: z.infer<typeof formSchema>) => {
-		if (!applicationId && !scheduleId) return;
+		if (!id && !scheduleId) return;
 
 		await mutateAsync({
 			...values,
 			scheduleId: scheduleId || "",
-			applicationId: applicationId || "",
+			...(scheduleType === "application" && {
+				applicationId: id || "",
+			}),
+			...(scheduleType === "compose" && {
+				composeId: id || "",
+			}),
+			...(scheduleType === "server" && {
+				serverId: id || "",
+			}),
+			...(scheduleType === "dokploy-server" && {
+				userId: id || "",
+			}),
 		})
 			.then(() => {
 				toast.success(
 					`Schedule ${scheduleId ? "updated" : "created"} successfully`,
 				);
-				utils.schedule.list.invalidate({ applicationId });
+				utils.schedule.list.invalidate({
+					id,
+					scheduleType,
+				});
 				setIsOpen(false);
 			})
 			.catch((error) => {
@@ -136,12 +231,130 @@ export const HandleSchedules = ({ applicationId, scheduleId }: Props) => {
 					</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent>
+			<DialogContent
+				className={cn(
+					"max-h-screen overflow-y-auto",
+					scheduleTypeForm === "dokploy-server" || scheduleTypeForm === "server"
+						? "max-h-[95vh] sm:max-w-2xl"
+						: " sm:max-w-lg",
+				)}
+			>
 				<DialogHeader>
 					<DialogTitle>{scheduleId ? "Edit" : "Create"} Schedule</DialogTitle>
 				</DialogHeader>
 				<Form {...form}>
 					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+						{scheduleTypeForm === "compose" && (
+							<div className="flex flex-col w-full gap-4">
+								{errorServices && (
+									<AlertBlock
+										type="warning"
+										className="[overflow-wrap:anywhere]"
+									>
+										{errorServices?.message}
+									</AlertBlock>
+								)}
+								<FormField
+									control={form.control}
+									name="serviceName"
+									render={({ field }) => (
+										<FormItem className="w-full">
+											<FormLabel>Service Name</FormLabel>
+											<div className="flex gap-2">
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value || ""}
+												>
+													<FormControl>
+														<SelectTrigger>
+															<SelectValue placeholder="Select a service name" />
+														</SelectTrigger>
+													</FormControl>
+
+													<SelectContent>
+														{services?.map((service, index) => (
+															<SelectItem
+																value={service}
+																key={`${service}-${index}`}
+															>
+																{service}
+															</SelectItem>
+														))}
+														<SelectItem value="none" disabled>
+															Empty
+														</SelectItem>
+													</SelectContent>
+												</Select>
+												<TooltipProvider delayDuration={0}>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<Button
+																variant="secondary"
+																type="button"
+																isLoading={isLoadingServices}
+																onClick={() => {
+																	if (cacheType === "fetch") {
+																		refetchServices();
+																	} else {
+																		setCacheType("fetch");
+																	}
+																}}
+															>
+																<RefreshCw className="size-4 text-muted-foreground" />
+															</Button>
+														</TooltipTrigger>
+														<TooltipContent
+															side="left"
+															sideOffset={5}
+															className="max-w-[10rem]"
+														>
+															<p>
+																Fetch: Will clone the repository and load the
+																services
+															</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+												<TooltipProvider delayDuration={0}>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<Button
+																variant="secondary"
+																type="button"
+																isLoading={isLoadingServices}
+																onClick={() => {
+																	if (cacheType === "cache") {
+																		refetchServices();
+																	} else {
+																		setCacheType("cache");
+																	}
+																}}
+															>
+																<DatabaseZap className="size-4 text-muted-foreground" />
+															</Button>
+														</TooltipTrigger>
+														<TooltipContent
+															side="left"
+															sideOffset={5}
+															className="max-w-[10rem]"
+														>
+															<p>
+																Cache: If you previously deployed this compose,
+																it will read the services from the last
+																deployment/fetch from the repository
+															</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											</div>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</div>
+						)}
+
 						<FormField
 							control={form.control}
 							name="name"
@@ -222,59 +435,86 @@ export const HandleSchedules = ({ applicationId, scheduleId }: Props) => {
 							)}
 						/>
 
-						<FormField
-							control={form.control}
-							name="shellType"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel className="flex items-center gap-2">
-										<Terminal className="w-4 h-4" />
-										Shell Type
-									</FormLabel>
-									<Select
-										onValueChange={field.onChange}
-										defaultValue={field.value}
-									>
-										<FormControl>
-											<SelectTrigger>
-												<SelectValue placeholder="Select shell type" />
-											</SelectTrigger>
-										</FormControl>
-										<SelectContent>
-											<SelectItem value="bash">Bash</SelectItem>
-											<SelectItem value="sh">Sh</SelectItem>
-										</SelectContent>
-									</Select>
-									<FormDescription>
-										Choose the shell to execute your command
-									</FormDescription>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
+						{(scheduleTypeForm === "application" ||
+							scheduleTypeForm === "compose") && (
+							<>
+								<FormField
+									control={form.control}
+									name="shellType"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel className="flex items-center gap-2">
+												<Terminal className="w-4 h-4" />
+												Shell Type
+											</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												defaultValue={field.value}
+											>
+												<FormControl>
+													<SelectTrigger>
+														<SelectValue placeholder="Select shell type" />
+													</SelectTrigger>
+												</FormControl>
+												<SelectContent>
+													<SelectItem value="bash">Bash</SelectItem>
+													<SelectItem value="sh">Sh</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormDescription>
+												Choose the shell to execute your command
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="command"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel className="flex items-center gap-2">
+												<Terminal className="w-4 h-4" />
+												Command
+											</FormLabel>
+											<FormControl>
+												<Input placeholder="npm run backup" {...field} />
+											</FormControl>
+											<FormDescription>
+												The command to execute in your container
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</>
+						)}
 
-						<FormField
-							control={form.control}
-							name="command"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel className="flex items-center gap-2">
-										<Terminal className="w-4 h-4" />
-										Command
-									</FormLabel>
-									<FormControl>
-										<Input
-											placeholder="docker exec my-container npm run backup"
-											{...field}
-										/>
-									</FormControl>
-									<FormDescription>
-										The command to execute in your container
-									</FormDescription>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
+						{(scheduleTypeForm === "dokploy-server" ||
+							scheduleTypeForm === "server") && (
+							<FormField
+								control={form.control}
+								name="script"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Script</FormLabel>
+										<FormControl>
+											<FormControl>
+												<CodeEditor
+													language="shell"
+													placeholder={`# This is a comment
+echo "Hello, world!"
+`}
+													className="h-96 font-mono"
+													{...field}
+												/>
+											</FormControl>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
 
 						<FormField
 							control={form.control}
@@ -292,15 +532,8 @@ export const HandleSchedules = ({ applicationId, scheduleId }: Props) => {
 							)}
 						/>
 
-						<Button type="submit" disabled={isLoading} className="w-full">
-							{isLoading ? (
-								<>
-									<Clock className="mr-2 h-4 w-4 animate-spin" />
-									{scheduleId ? "Updating..." : "Creating..."}
-								</>
-							) : (
-								<>{scheduleId ? "Update" : "Create"} Schedule</>
-							)}
+						<Button type="submit" isLoading={isLoading} className="w-full">
+							{scheduleId ? "Update" : "Create"} Schedule
 						</Button>
 					</form>
 				</Form>

apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx

@@ -28,14 +28,25 @@ import {
 import { DialogAction } from "@/components/shared/dialog-action";
 
 interface Props {
-	applicationId: string;
+	id: string;
+	scheduleType?: "application" | "compose" | "server" | "dokploy-server";
 }
 
-export const ShowSchedules = ({ applicationId }: Props) => {
-	const { data: schedules, isLoading: isLoadingSchedules } =
-		api.schedule.list.useQuery({
-			applicationId,
-		});
+export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
+	const {
+		data: schedules,
+		isLoading: isLoadingSchedules,
+		refetch: refetchSchedules,
+	} = api.schedule.list.useQuery(
+		{
+			id: id || "",
+			scheduleType,
+		},
+		{
+			enabled: !!id,
+		},
+	);
+
 	const utils = api.useUtils();
 
 	const { mutateAsync: deleteSchedule, isLoading: isDeleting } =
@@ -45,7 +56,7 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 		api.schedule.runManually.useMutation();
 
 	return (
-		<Card className="border px-4 shadow-none bg-transparent">
+		<Card className="border px-6 shadow-none bg-transparent h-full min-h-[50vh]">
 			<CardHeader className="px-0">
 				<div className="flex justify-between items-center">
 					<div className="flex flex-col gap-2">
@@ -58,13 +69,13 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 					</div>
 
 					{schedules && schedules.length > 0 && (
-						<HandleSchedules applicationId={applicationId} />
+						<HandleSchedules id={id} scheduleType={scheduleType} />
 					)}
 				</div>
 			</CardHeader>
 			<CardContent className="px-0">
 				{isLoadingSchedules ? (
-					<div className="flex gap-4  min-h-[35vh] w-full items-center justify-center text-center mx-auto">
+					<div className="flex gap-4   w-full items-center justify-center text-center mx-auto">
 						<Loader2 className="size-4 text-muted-foreground/70 transition-colors animate-spin self-center" />
 						<span className="text-sm text-muted-foreground/70">
 							Loading scheduled tasks...
@@ -73,7 +84,10 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 				) : schedules && schedules.length > 0 ? (
 					<div className="grid xl:grid-cols-2 gap-4 grid-cols-1 h-full">
 						{schedules.map((schedule) => {
-							const application = schedule.application;
+							const serverId =
+								schedule.serverId ||
+								schedule.application?.serverId ||
+								schedule.compose?.serverId;
 							const deployments = schedule.deployments;
 							return (
 								<div
@@ -101,31 +115,38 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 													variant="outline"
 													className="font-mono text-[10px] bg-transparent"
 												>
-													{schedule.cronExpression}
-												</Badge>
-												<span className="text-xs text-muted-foreground/50">
-													•
-												</span>
-												<Badge
-													variant="outline"
-													className="font-mono text-[10px] bg-transparent"
-												>
-													{schedule.shellType}
+													Cron: {schedule.cronExpression}
 												</Badge>
+												{schedule.scheduleType !== "server" &&
+													schedule.scheduleType !== "dokploy-server" && (
+														<>
+															<span className="text-xs text-muted-foreground/50">
+																•
+															</span>
+															<Badge
+																variant="outline"
+																className="font-mono text-[10px] bg-transparent"
+															>
+																{schedule.shellType}
+															</Badge>
+														</>
+													)}
 											</div>
-											<div className="flex items-center gap-2">
-												<Terminal className="size-3.5 text-muted-foreground/70" />
-												<code className="font-mono text-[10px] text-muted-foreground/70">
-													{schedule.command}
-												</code>
-											</div>
+											{schedule.command && (
+												<div className="flex items-center gap-2">
+													<Terminal className="size-3.5 text-muted-foreground/70" />
+													<code className="font-mono text-[10px] text-muted-foreground/70">
+														{schedule.command}
+													</code>
+												</div>
+											)}
 										</div>
 									</div>
 
 									<div className="flex items-center gap-1.5">
 										<ShowSchedulesLogs
 											deployments={deployments || []}
-											serverId={application.serverId || undefined}
+											serverId={serverId}
 										>
 											<Button variant="ghost" size="icon">
 												<ClipboardList className="size-4  transition-colors " />
@@ -146,15 +167,10 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 															})
 																.then(() => {
 																	toast.success("Schedule run successfully");
-																	utils.schedule.list.invalidate({
-																		applicationId,
-																	});
+																	refetchSchedules();
 																})
-																.catch((error) => {
-																	console.log(error);
-																	toast.error(
-																		`Error running schedule: ${error}`,
-																	);
+																.catch(() => {
+																	toast.error("Error running schedule:");
 																});
 														}}
 													>
@@ -167,7 +183,8 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 
 										<HandleSchedules
 											scheduleId={schedule.scheduleId}
-											applicationId={applicationId}
+											id={id}
+											scheduleType={scheduleType}
 										/>
 
 										<DialogAction
@@ -180,7 +197,8 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 												})
 													.then(() => {
 														utils.schedule.list.invalidate({
-															applicationId,
+															id,
+															scheduleType,
 														});
 														toast.success("Schedule deleted successfully");
 													})
@@ -204,7 +222,7 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 						})}
 					</div>
 				) : (
-					<div className="flex flex-col gap-2 items-center justify-center py-12 border rounded-lg">
+					<div className="flex flex-col gap-2 items-center justify-center py-12  rounded-lg">
 						<Clock className="size-8 mb-4 text-muted-foreground" />
 						<p className="text-lg font-medium text-muted-foreground">
 							No scheduled tasks
@@ -212,7 +230,7 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 						<p className="text-sm text-muted-foreground mt-1">
 							Create your first scheduled task to automate your workflows
 						</p>
-						<HandleSchedules applicationId={applicationId} />
+						<HandleSchedules id={id} scheduleType={scheduleType} />
 					</div>
 				)}
 			</CardContent>

apps/dokploy/components/dashboard/settings/servers/show-schedules-modal.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { ShowSchedules } from "@/components/dashboard/application/schedules/show-schedules";
+
+interface Props {
+	serverId: string;
+}
+
+export const ShowSchedulesModal = ({ serverId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer "
+					onSelect={(e) => e.preventDefault()}
+				>
+					Show Schedules
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-5xl  overflow-y-auto max-h-screen ">
+				<ShowSchedules id={serverId} scheduleType="server" />
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/servers/show-servers.tsx

@@ -43,6 +43,7 @@ import { ShowMonitoringModal } from "./show-monitoring-modal";
 import { ShowSwarmOverviewModal } from "./show-swarm-overview-modal";
 import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
 import { WelcomeSuscription } from "./welcome-stripe/welcome-suscription";
+import { ShowSchedulesModal } from "./show-schedules-modal";
 
 export const ShowServers = () => {
 	const { t } = useTranslation("settings");
@@ -332,6 +333,10 @@ export const ShowServers = () => {
 																						<ShowNodesModal
 																							serverId={server.serverId}
 																						/>
+
+																						<ShowSchedulesModal
+																							serverId={server.serverId}
+																						/>
 																					</>
 																				)}
 																			</DropdownMenuContent>

apps/dokploy/components/layouts/side.tsx

@@ -10,6 +10,7 @@ import {
 	ChevronRight,
 	ChevronsUpDown,
 	CircleHelp,
+	Clock,
 	CreditCard,
 	Database,
 	Folder,
@@ -158,6 +159,14 @@ const MENU: Menu = {
 			// Only enabled in non-cloud environments
 			isEnabled: ({ isCloud }) => !isCloud,
 		},
+		{
+			isSingle: true,
+			title: "Schedules",
+			url: "/dashboard/schedules",
+			icon: Clock,
+			// Only enabled in non-cloud environments
+			isEnabled: ({ isCloud }) => !isCloud,
+		},
 		{
 			isSingle: true,
 			title: "Traefik File System",