Refactor ShowSchedules component for improved layout and user interaction

- Replaced the table layout with a grid layout for better visual organization of schedules.
- Enhanced the display of schedule details, including status badges and command information.
- Updated action buttons for running schedules and managing them with improved icons and tooltips.
- Streamlined the code for better readability and maintainability.

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

@@ -1,15 +1,14 @@
 import { Button } from "@/components/ui/button";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
 import { api } from "@/utils/api";
 import { HandleSchedules } from "./handle-schedules";
-import { Clock, Play, Terminal, Trash2 } from "lucide-react";
+import {
+	Clock,
+	Play,
+	Terminal,
+	Trash2,
+	ClipboardList,
+	Loader2,
+} from "lucide-react";
 import {
 	Card,
 	CardContent,
@@ -33,7 +32,8 @@ interface Props {
 }
 
 export const ShowSchedules = ({ applicationId }: Props) => {
-	const { data: schedules } = api.schedule.list.useQuery({
+	const { data: schedules, isLoading: isLoadingSchedules } =
+		api.schedule.list.useQuery({
 			applicationId,
 		});
 	const utils = api.useUtils();
@@ -63,59 +63,74 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 				</div>
 			</CardHeader>
 			<CardContent className="px-0">
-				{schedules && schedules.length > 0 ? (
+				{isLoadingSchedules ? (
-					<div className="rounded-lg border">
+					<div className="flex gap-4  min-h-[35vh] w-full items-center justify-center text-center mx-auto">
-						<Table>
+						<Loader2 className="size-4 text-muted-foreground/70 transition-colors animate-spin self-center" />
-							<TableHeader>
+						<span className="text-sm text-muted-foreground/70">
-								<TableRow>
+							Loading scheduled tasks...
-									<TableHead>Task Name</TableHead>
+						</span>
-									<TableHead>Schedule</TableHead>
+					</div>
-									<TableHead>Shell</TableHead>
+				) : schedules && schedules.length > 0 ? (
-									<TableHead>Command</TableHead>
+					<div className="grid xl:grid-cols-2 gap-4 grid-cols-1 h-full">
-									<TableHead>Status</TableHead>
-									<TableHead className="text-right">Actions</TableHead>
-								</TableRow>
-							</TableHeader>
-							<TableBody>
 						{schedules.map((schedule) => {
 							const application = schedule.application;
 							const deployments = schedule.deployments;
 							return (
-										<TableRow key={schedule.scheduleId}>
+								<div
-											<TableCell className="font-medium">
+									key={schedule.scheduleId}
-												{schedule.name}
+									className=" flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
-											</TableCell>
+								>
-											<TableCell>
+									<div className="flex items-start gap-3">
-												<Badge variant="secondary" className="font-mono">
+										<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/5">
-													{schedule.cronExpression}
+											<Clock className="size-4 text-primary/70" />
-												</Badge>
-											</TableCell>
-											<TableCell>
-												<Badge variant="secondary" className="font-mono">
-													{schedule.shellType}
-												</Badge>
-											</TableCell>
-											<TableCell>
-												<div className="flex items-center gap-2">
-													<Terminal className="w-4 h-4 text-muted-foreground" />
-													<code className="bg-muted px-2 py-1 rounded text-sm">
-														{schedule.command}
-													</code>
 										</div>
-											</TableCell>
+										<div className="space-y-1.5">
-											<TableCell>
+											<div className="flex items-center gap-2">
+												<h3 className="text-sm font-medium leading-none">
+													{schedule.name}
+												</h3>
 												<Badge
 													variant={schedule.enabled ? "default" : "secondary"}
+													className="text-[10px] px-1 py-0"
 												>
 													{schedule.enabled ? "Enabled" : "Disabled"}
 												</Badge>
-											</TableCell>
+											</div>
-											<TableCell className="text-right">
+											<div className="flex items-center gap-2 text-sm text-muted-foreground">
-												<div className="flex justify-end gap-2">
+												<Badge
+													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}
+												</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>
+										</div>
+									</div>
+
+									<div className="flex items-center gap-1.5">
 										<ShowSchedulesLogs
 											deployments={deployments || []}
 											serverId={application.serverId || undefined}
-													/>
+										>
+											<Button variant="ghost" size="icon">
+												<ClipboardList className="size-4  transition-colors " />
+											</Button>
+										</ShowSchedulesLogs>
 
 										<TooltipProvider delayDuration={0}>
 											<Tooltip>
@@ -123,15 +138,14 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 													<Button
 														type="button"
 														variant="ghost"
+														size="icon"
 														isLoading={isLoading}
 														onClick={async () => {
 															await runManually({
 																scheduleId: schedule.scheduleId,
 															})
 																.then(() => {
-																				toast.success(
+																	toast.success("Schedule run successfully");
-																					"Schedule run successfully",
-																				);
 																	utils.schedule.list.invalidate({
 																		applicationId,
 																	});
@@ -144,12 +158,10 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 																});
 														}}
 													>
-																	<Play className="size-4" />
+														<Play className="size-4  transition-colors" />
 													</Button>
 												</TooltipTrigger>
-															<TooltipContent>
+												<TooltipContent>Run Manual Schedule</TooltipContent>
-																Run Manual Schedule
-															</TooltipContent>
 											</Tooltip>
 										</TooltipProvider>
 
@@ -170,9 +182,7 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 														utils.schedule.list.invalidate({
 															applicationId,
 														});
-																	toast.success(
+														toast.success("Schedule deleted successfully");
-																		"Schedule deleted successfully",
-																	);
 													})
 													.catch(() => {
 														toast.error("Error deleting schedule");
@@ -189,12 +199,9 @@ export const ShowSchedules = ({ applicationId }: Props) => {
 											</Button>
 										</DialogAction>
 									</div>
-											</TableCell>
+								</div>
-										</TableRow>
 							);
 						})}
-							</TableBody>
-						</Table>
 					</div>
 				) : (
 					<div className="flex flex-col gap-2 items-center justify-center py-12 border rounded-lg">