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 ? (
+				{children ? (
-					trigger
+					children
 				) : (
 					<Button className="sm:w-auto w-full" size="sm" variant="outline">
 						View Logs
@@ -47,8 +48,9 @@ export const ShowSchedulesLogs = ({
 						See all the logs for this schedule
 					</DialogDescription>
 				</DialogHeader>
+				{deployments.length > 0 ? (
 					<div className="grid gap-4">
-					{deployments?.map((deployment, index) => (
+						{deployments.map((deployment, index) => (
 							<div
 								key={deployment.deploymentId}
 								className="flex items-center justify-between rounded-lg border p-4 gap-2"
@@ -86,6 +88,13 @@ export const ShowSchedulesLogs = ({
 							</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,21 +35,22 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 	const { data: schedules } = api.schedule.list.useQuery({
 		applicationId,
 	});
+	const utils = api.useUtils();
 
-	const { mutate: deleteSchedule } = api.schedule.delete.useMutation({
+	const { mutateAsync: deleteSchedule, isLoading: isDeleting } =
+		api.schedule.delete.useMutation({
 			onSuccess: () => {
 				utils.schedule.list.invalidate({ applicationId });
 			},
 		});
 
-	const { mutateAsync: runManually } = api.schedule.runManually.useMutation({
+	const { mutateAsync: runManually, isLoading } =
+		api.schedule.runManually.useMutation({
 			onSuccess: () => {
 				utils.schedule.list.invalidate({ applicationId });
 			},
 		});
 
-	const utils = api.useContext();
-
 	return (
 		<Card className="border px-4 shadow-none bg-transparent">
 			<CardHeader className="px-0">
@@ -114,15 +121,22 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 														deployments={deployments || []}
 														serverId={application.serverId || undefined}
 													/>
+
+													<TooltipProvider delayDuration={0}>
+														<Tooltip>
+															<TooltipTrigger asChild>
 																<Button
+																	type="button"
 																	variant="ghost"
-														size="sm"
+																	isLoading={isLoading}
 																	onClick={async () => {
 																		await runManually({
 																			scheduleId: schedule.scheduleId,
 																		})
 																			.then(() => {
-																	toast.success("Schedule run successfully");
+																				toast.success(
+																					"Schedule run successfully",
+																				);
 																			})
 																			.catch((error) => {
 																				toast.error(
@@ -133,8 +147,14 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 																			});
 																	}}
 																>
-														Run Manual 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={() =>
+														isLoading={isDeleting}
-															deleteSchedule({
+														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>