fix: improve volume backup validation and refactor component props

- Added validation to ensure service name is required when service type is "compose" in the volume backup form schema.
- Refactored the ShowVolumeBackups component to use a more consistent prop name for volume backup type, enhancing clarity and maintainability.
- Updated related components to align with the new prop structure, ensuring seamless integration across the application.

apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx

@@ -78,6 +78,14 @@ const formSchema = z
 				path: ["serviceName"],
 			});
 		}
+
+		if (data.serviceType === "compose" && !data.serviceName) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Service name is required",
+				path: ["serviceName"],
+			});
+		}
 	});
 
 interface Props {

apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx

@@ -17,7 +17,6 @@ import {
 import { api } from "@/utils/api";
 import {
 	ClipboardList,
-	Clock,
 	DatabaseBackup,
 	Loader2,
 	Play,
@@ -29,19 +28,10 @@ import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
 
 interface Props {
 	id: string;
-	volumeBackupType?:
+	type?: "application" | "compose" | "postgres" | "mariadb" | "mongo" | "mysql";
-		| "application"
-		| "compose"
-		| "postgres"
-		| "mariadb"
-		| "mongo"
-		| "mysql";
 }
 
-export const ShowVolumeBackups = ({
+export const ShowVolumeBackups = ({ id, type = "application" }: Props) => {
-	id,
-	volumeBackupType = "application",
-}: Props) => {
 	const {
 		data: volumeBackups,
 		isLoading: isLoadingVolumeBackups,
@@ -49,7 +39,7 @@ export const ShowVolumeBackups = ({
 	} = api.volumeBackups.list.useQuery(
 		{
 			id: id || "",
-			volumeBackupType,
+			volumeBackupType: type,
 		},
 		{
 			enabled: !!id,
@@ -79,7 +69,7 @@ export const ShowVolumeBackups = ({
 					</div>
 
 					{volumeBackups && volumeBackups.length > 0 && (
-						<HandleVolumeBackups id={id} volumeBackupType={volumeBackupType} />
+						<HandleVolumeBackups id={id} volumeBackupType={type} />
 					)}
 				</div>
 			</CardHeader>
@@ -109,7 +99,7 @@ export const ShowVolumeBackups = ({
 								>
 									<div className="flex items-start gap-3">
 										<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/5">
-											<Clock className="size-4 text-primary/70" />
+											<DatabaseBackup className="size-4 text-primary/70" />
 										</div>
 										<div className="space-y-1.5">
 											<div className="flex items-center gap-2">
@@ -184,7 +174,7 @@ export const ShowVolumeBackups = ({
 										<HandleVolumeBackups
 											volumeBackupId={volumeBackup.volumeBackupId}
 											id={id}
-											volumeBackupType={volumeBackupType}
+											volumeBackupType={type}
 										/>
 
 										<DialogAction
@@ -198,7 +188,7 @@ export const ShowVolumeBackups = ({
 													.then(() => {
 														utils.volumeBackups.list.invalidate({
 															id,
-															volumeBackupType,
+															volumeBackupType: type,
 														});
 														toast.success("Volume backup deleted successfully");
 													})
@@ -230,7 +220,7 @@ export const ShowVolumeBackups = ({
 						<p className="text-sm text-muted-foreground mt-1">
 							Create your first volume backup to automate your workflows
 						</p>
-						<HandleVolumeBackups id={id} volumeBackupType={volumeBackupType} />
+						<HandleVolumeBackups id={id} volumeBackupType={type} />
 					</div>
 				)}
 			</CardContent>

apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx

@@ -336,15 +336,9 @@ const Service = (
 									<TabsContent value="volume-backups" className="w-full pt-2.5">
 										<div className="flex flex-col gap-4  border rounded-lg">
 											<ShowVolumeBackups
-												id={applicationId}
-												volumeBackupType="application"
-											/>
-											{/* <ShowDeployments
 												id={applicationId}
 												type="application"
-												serverId={data?.serverId || ""}
+											/>
-												refreshToken={data?.refreshToken || ""}
-											/> */}
 										</div>
 									</TabsContent>
 									<TabsContent value="preview-deployments" className="w-full">

apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx

@@ -4,6 +4,7 @@ import { ShowDeployments } from "@/components/dashboard/application/deployments/
 import { ShowDomains } from "@/components/dashboard/application/domains/show-domains";
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show-enviroment";
 import { ShowSchedules } from "@/components/dashboard/application/schedules/show-schedules";
+import { ShowVolumeBackups } from "@/components/dashboard/application/volume-backups/show-volume-backups";
 import { AddCommandCompose } from "@/components/dashboard/compose/advanced/add-command";
 import { DeleteService } from "@/components/dashboard/compose/delete-service";
 import { ShowGeneralCompose } from "@/components/dashboard/compose/general/show";
@@ -57,7 +58,8 @@ type TabState =
 	| "advanced"
 	| "deployments"
 	| "domains"
-	| "monitoring";
+	| "monitoring"
+	| "volumeBackups";
 
 const Service = (
 	props: InferGetServerSidePropsType<typeof getServerSideProps>,
@@ -226,6 +228,9 @@ const Service = (
 											<TabsTrigger value="deployments">Deployments</TabsTrigger>
 											<TabsTrigger value="backups">Backups</TabsTrigger>
 											<TabsTrigger value="schedules">Schedules</TabsTrigger>
+											<TabsTrigger value="volumeBackups">
+												Volume Backups
+											</TabsTrigger>
 											<TabsTrigger value="logs">Logs</TabsTrigger>
 											{((data?.serverId && isCloud) || !data?.server) && (
 												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
@@ -255,7 +260,11 @@ const Service = (
 											<ShowSchedules id={composeId} scheduleType="compose" />
 										</div>
 									</TabsContent>
-
+									<TabsContent value="volumeBackups">
+										<div className="flex flex-col gap-4 pt-2.5">
+											<ShowVolumeBackups id={composeId} type="compose" />
+										</div>
+									</TabsContent>
 									<TabsContent value="monitoring">
 										<div className="pt-2.5">
 											<div className="flex flex-col border rounded-lg ">
@@ -342,6 +351,7 @@ const Service = (
 											<ShowDomains id={composeId} type="compose" />
 										</div>
 									</TabsContent>
+
 									<TabsContent value="advanced">
 										<div className="flex flex-col gap-4 pt-2.5">
 											<AddCommandCompose composeId={composeId} />