From 4ee220c1d8f3cd79073f9512b13af2650641702b Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Fri, 2 May 2025 16:19:30 -0600
Subject: [PATCH] Refactor HandleSchedules component for improved UI and user
 experience

- Updated the layout of the HandleSchedules component to enhance the selection of predefined schedules and custom cron expressions.
- Introduced a flexbox layout for better spacing and organization of form elements.
- Improved placeholder text for clarity in the schedule selection dropdown.
---
 .../schedules/handle-schedules.tsx            | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx b/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
index 1d5cf080c..8dd3a68fe 100644
--- a/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
+++ b/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx
@@ -185,30 +185,34 @@ export const HandleSchedules = ({ applicationId, scheduleId }: Props) => {
 											</Tooltip>
 										</TooltipProvider>
 									</FormLabel>
-									<Select
-										onValueChange={(value) => field.onChange(value)}
-										value={field.value}
-									>
-										<FormControl>
-											<SelectTrigger>
-												<SelectValue placeholder="Select or type a cron expression" />
-											</SelectTrigger>
-										</FormControl>
-										<SelectContent>
-											{commonCronExpressions.map((expr) => (
-												<SelectItem key={expr.value} value={expr.value}>
-													{expr.label} ({expr.value})
-												</SelectItem>
-											))}
-										</SelectContent>
-									</Select>
-									<FormControl>
-										<Input
-											placeholder="Custom cron expression (e.g., 0 0 * * *)"
-											{...field}
-											className="mt-2"
-										/>
-									</FormControl>
+									<div className="flex flex-col gap-2">
+										<Select
+											onValueChange={(value) => {
+												field.onChange(value);
+											}}
+										>
+											<FormControl>
+												<SelectTrigger>
+													<SelectValue placeholder="Select a predefined schedule" />
+												</SelectTrigger>
+											</FormControl>
+											<SelectContent>
+												{commonCronExpressions.map((expr) => (
+													<SelectItem key={expr.value} value={expr.value}>
+														{expr.label} ({expr.value})
+													</SelectItem>
+												))}
+											</SelectContent>
+										</Select>
+										<div className="relative">
+											<FormControl>
+												<Input
+													placeholder="Custom cron expression (e.g., 0 0 * * *)"
+													{...field}
+												/>
+											</FormControl>
+										</div>
+									</div>
 									<FormDescription>
 										Choose a predefined schedule or enter a custom cron
 										expression