Update drizzle-zod dependency and enhance deployment tracking features

- Downgraded the drizzle-zod package from version 0.7.1 to 0.5.1 for compatibility.
- Added new fields `startedAt` and `finishedAt` to the deployment schema to track deployment timing.
- Enhanced deployment creation logic to set `startedAt` and `finishedAt` timestamps during deployment processes.
- Improved the ShowDeployments and ShowSchedulesLogs components to display deployment duration using a new Badge component.
- Refactored deployment removal logic to streamline the process of cleaning up old deployments.

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

@@ -9,12 +9,13 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { type RouterOutputs, api } from "@/utils/api";
-import { RocketIcon } from "lucide-react";
+import { RocketIcon, Clock } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { CancelQueues } from "./cancel-queues";
 import { RefreshToken } from "./refresh-token";
 import { ShowDeployment } from "./show-deployment";
-
+import { Badge } from "@/components/ui/badge";
+import { formatDuration } from "../schedules/show-schedules-logs";
 interface Props {
 	applicationId: string;
 }
@@ -96,8 +97,23 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 									)}
 								</div>
 								<div className="flex flex-col items-end gap-2">
-									<div className="text-sm capitalize text-muted-foreground">
+									<div className="text-sm capitalize text-muted-foreground flex items-center gap-2">
 										<DateTooltip date={deployment.createdAt} />
+										{deployment.startedAt && deployment.finishedAt && (
+											<Badge
+												variant="outline"
+												className="text-[10px] gap-1 flex items-center"
+											>
+												<Clock className="size-3" />
+												{formatDuration(
+													Math.floor(
+														(new Date(deployment.finishedAt).getTime() -
+															new Date(deployment.startedAt).getTime()) /
+															1000,
+													),
+												)}
+											</Badge>
+										)}
 									</div>
 
 									<Button

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

@@ -13,7 +13,8 @@ import {
 import type { RouterOutputs } from "@/utils/api";
 import { useState } from "react";
 import { ShowDeployment } from "../deployments/show-deployment";
-import { ClipboardList } from "lucide-react";
+import { ClipboardList, Clock } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 
 interface Props {
 	deployments: RouterOutputs["deployment"]["all"];
@@ -21,6 +22,13 @@ interface Props {
 	children?: React.ReactNode;
 }
 
+export const formatDuration = (seconds: number) => {
+	if (seconds < 60) return `${seconds}s`;
+	const minutes = Math.floor(seconds / 60);
+	const remainingSeconds = seconds % 60;
+	return `${minutes}m ${remainingSeconds}s`;
+};
+
 export const ShowSchedulesLogs = ({
 	deployments,
 	serverId,
@@ -73,8 +81,23 @@ export const ShowSchedulesLogs = ({
 									)}
 								</div>
 								<div className="flex flex-col items-end gap-2">
-									<div className="text-sm capitalize text-muted-foreground">
+									<div className="flex items-center gap-2 text-sm text-muted-foreground">
 										<DateTooltip date={deployment.createdAt} />
+										{deployment.startedAt && deployment.finishedAt && (
+											<Badge
+												variant="outline"
+												className="text-[10px] gap-1 flex items-center"
+											>
+												<Clock className="size-3" />
+												{formatDuration(
+													Math.floor(
+														(new Date(deployment.finishedAt).getTime() -
+															new Date(deployment.startedAt).getTime()) /
+															1000,
+													),
+												)}
+											</Badge>
+										)}
 									</div>
 
 									<Button

apps/dokploy/components/dashboard/compose/deployments/show-deployments-compose.tsx

@@ -9,12 +9,13 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { type RouterOutputs, api } from "@/utils/api";
-import { RocketIcon } from "lucide-react";
+import { RocketIcon, Clock } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { CancelQueuesCompose } from "./cancel-queues-compose";
 import { RefreshTokenCompose } from "./refresh-token-compose";
 import { ShowDeploymentCompose } from "./show-deployment-compose";
-
+import { Badge } from "@/components/ui/badge";
+import { formatDuration } from "@/components/dashboard/application/schedules/show-schedules-logs";
 interface Props {
 	composeId: string;
 }
@@ -96,8 +97,23 @@ export const ShowDeploymentsCompose = ({ composeId }: Props) => {
 									)}
 								</div>
 								<div className="flex flex-col items-end gap-2">
-									<div className="text-sm capitalize text-muted-foreground">
+									<div className="text-sm capitalize text-muted-foreground flex items-center gap-2">
 										<DateTooltip date={deployment.createdAt} />
+										{deployment.startedAt && deployment.finishedAt && (
+											<Badge
+												variant="outline"
+												className="text-[10px] gap-1 flex items-center"
+											>
+												<Clock className="size-3" />
+												{formatDuration(
+													Math.floor(
+														(new Date(deployment.finishedAt).getTime() -
+															new Date(deployment.startedAt).getTime()) /
+															1000,
+													),
+												)}
+											</Badge>
+										)}
 									</div>
 
 									<Button