Refactor ShowSchedulesLogs and ShowSchedules components

- Updated the ShowSchedulesLogs component to replace the trigger prop with children for better flexibility in rendering.
- Enhanced the display logic in ShowSchedulesLogs to show a message when no logs are found, improving user feedback.
- Added a Play icon to the ShowSchedules component for the manual run action, along with a tooltip for better user guidance.
- Refactored the delete schedule button to provide success notifications upon deletion, enhancing user experience.

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

@@ -13,17 +13,18 @@ import {
 import type { RouterOutputs } from "@/utils/api";
 import { useState } from "react";
 import { ShowDeployment } from "../deployments/show-deployment";
+import { ClipboardList } from "lucide-react";
 
 interface Props {
 	deployments: RouterOutputs["deployment"]["all"];
 	serverId?: string;
-	trigger?: React.ReactNode;
+	children?: React.ReactNode;
 }
 
 export const ShowSchedulesLogs = ({
 	deployments,
 	serverId,
-	trigger,
+	children,
 }: Props) => {
 	const [activeLog, setActiveLog] = useState<
 		RouterOutputs["deployment"]["all"][number] | null
@@ -32,8 +33,8 @@ export const ShowSchedulesLogs = ({
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				{trigger ? (
-					trigger
+				{children ? (
+					children
 				) : (
 					<Button className="sm:w-auto w-full" size="sm" variant="outline">
 						View Logs
@@ -47,45 +48,53 @@ export const ShowSchedulesLogs = ({
 						See all the logs for this schedule
 					</DialogDescription>
 				</DialogHeader>
-				<div className="grid gap-4">
-					{deployments?.map((deployment, index) => (
-						<div
-							key={deployment.deploymentId}
-							className="flex items-center justify-between rounded-lg border p-4 gap-2"
-						>
-							<div className="flex flex-col">
-								<span className="flex items-center gap-4 font-medium capitalize text-foreground">
-									{index + 1} {deployment.status}
-									<StatusTooltip
-										status={deployment?.status}
-										className="size-2.5"
-									/>
-								</span>
-								<span className="text-sm text-muted-foreground">
-									{deployment.title}
-								</span>
-								{deployment.description && (
-									<span className="break-all text-sm text-muted-foreground">
-										{deployment.description}
+				{deployments.length > 0 ? (
+					<div className="grid gap-4">
+						{deployments.map((deployment, index) => (
+							<div
+								key={deployment.deploymentId}
+								className="flex items-center justify-between rounded-lg border p-4 gap-2"
+							>
+								<div className="flex flex-col">
+									<span className="flex items-center gap-4 font-medium capitalize text-foreground">
+										{index + 1} {deployment.status}
+										<StatusTooltip
+											status={deployment?.status}
+											className="size-2.5"
+										/>
 									</span>
-								)}
-							</div>
-							<div className="flex flex-col items-end gap-2">
-								<div className="text-sm capitalize text-muted-foreground">
-									<DateTooltip date={deployment.createdAt} />
+									<span className="text-sm text-muted-foreground">
+										{deployment.title}
+									</span>
+									{deployment.description && (
+										<span className="break-all text-sm text-muted-foreground">
+											{deployment.description}
+										</span>
+									)}
 								</div>
+								<div className="flex flex-col items-end gap-2">
+									<div className="text-sm capitalize text-muted-foreground">
+										<DateTooltip date={deployment.createdAt} />
+									</div>
 
-								<Button
-									onClick={() => {
-										setActiveLog(deployment);
-									}}
-								>
-									View
-								</Button>
+									<Button
+										onClick={() => {
+											setActiveLog(deployment);
+										}}
+									>
+										View
+									</Button>
+								</div>
 							</div>
-						</div>
-					))}
-				</div>
+						))}
+					</div>
+				) : (
+					<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+						<ClipboardList className="size-12 mb-4" />
+						<p className="text-lg font-medium">No logs found</p>
+						<p className="text-sm">This schedule hasn't been executed yet</p>
+					</div>
+				)}
 			</DialogContent>
 			<ShowDeployment
 				serverId={serverId || ""}

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

@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/table";
 import { api } from "@/utils/api";
 import { HandleSchedules } from "./handle-schedules";
-import { Clock, Terminal, Trash2 } from "lucide-react";
+import { Clock, Play, Terminal, Trash2 } from "lucide-react";
 import {
 	Card,
 	CardContent,
@@ -20,6 +20,12 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { toast } from "sonner";
 import { ShowSchedulesLogs } from "./show-schedules-logs";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface Props {
 	applicationId: string;
@@ -29,20 +35,21 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 	const { data: schedules } = api.schedule.list.useQuery({
 		applicationId,
 	});
+	const utils = api.useUtils();
 
-	const { mutate: deleteSchedule } = api.schedule.delete.useMutation({
-		onSuccess: () => {
-			utils.schedule.list.invalidate({ applicationId });
-		},
-	});
+	const { mutateAsync: deleteSchedule, isLoading: isDeleting } =
+		api.schedule.delete.useMutation({
+			onSuccess: () => {
+				utils.schedule.list.invalidate({ applicationId });
+			},
+		});
 
-	const { mutateAsync: runManually } = api.schedule.runManually.useMutation({
-		onSuccess: () => {
-			utils.schedule.list.invalidate({ applicationId });
-		},
-	});
-
-	const utils = api.useContext();
+	const { mutateAsync: runManually, isLoading } =
+		api.schedule.runManually.useMutation({
+			onSuccess: () => {
+				utils.schedule.list.invalidate({ applicationId });
+			},
+		});
 
 	return (
 		<Card className="border px-4 shadow-none bg-transparent">
@@ -114,27 +121,40 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 														deployments={deployments || []}
 														serverId={application.serverId || undefined}
 													/>
-													<Button
-														variant="ghost"
-														size="sm"
-														onClick={async () => {
-															await runManually({
-																scheduleId: schedule.scheduleId,
-															})
-																.then(() => {
-																	toast.success("Schedule run successfully");
-																})
-																.catch((error) => {
-																	toast.error(
-																		error instanceof Error
-																			? error.message
-																			: "Error running schedule",
-																	);
-																});
-														}}
-													>
-														Run Manual Schedule
-													</Button>
+
+													<TooltipProvider delayDuration={0}>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Button
+																	type="button"
+																	variant="ghost"
+																	isLoading={isLoading}
+																	onClick={async () => {
+																		await runManually({
+																			scheduleId: schedule.scheduleId,
+																		})
+																			.then(() => {
+																				toast.success(
+																					"Schedule run successfully",
+																				);
+																			})
+																			.catch((error) => {
+																				toast.error(
+																					error instanceof Error
+																						? error.message
+																						: "Error running schedule",
+																				);
+																			});
+																	}}
+																>
+																	<Play className="size-4" />
+																</Button>
+															</TooltipTrigger>
+															<TooltipContent>
+																Run Manual Schedule
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
 
 													<HandleSchedules
 														scheduleId={schedule.scheduleId}
@@ -145,11 +165,24 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 														variant="ghost"
 														size="sm"
 														className="text-destructive hover:text-destructive"
-														onClick={() =>
-															deleteSchedule({
+														isLoading={isDeleting}
+														onClick={async () => {
+															await deleteSchedule({
 																scheduleId: schedule.scheduleId,
 															})
-														}
+																.then(() => {
+																	toast.success(
+																		"Schedule deleted successfully",
+																	);
+																})
+																.catch((error) => {
+																	toast.error(
+																		error instanceof Error
+																			? error.message
+																			: "Error deleting schedule",
+																	);
+																});
+														}}
 													>
 														<Trash2 className="w-4 h-4" />
 														<span className="sr-only">Delete</span>