Merge branch 'canary' of https://github.com/kdurek/dokploy into feat/server-ip

2025-06-26 18:27:59 +00:00 · 2024-11-17 18:37:28 +01:00
parent 74374bd643 58338380ab
commit bd55e3751f
58 changed files with 2332 additions and 54 deletions
--- a/apps/dokploy/components/dashboard/settings/appearance-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/appearance-form.tsx
@@ -20,6 +20,15 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import useLocale from "@/utils/hooks/use-locale";
+import { useTranslation } from "next-i18next";
 import { useTheme } from "next-themes";
 import { useEffect } from "react";
 import { toast } from "sonner";
@@ -28,6 +37,9 @@ const appearanceFormSchema = z.object({
 	theme: z.enum(["light", "dark", "system"], {
 		required_error: "Please select a theme.",
 	}),
+	language: z.enum(["en", "zh-Hans"], {
+		required_error: "Please select a language.",
+	}),
 });

 type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;
@@ -35,10 +47,14 @@ type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;
 // This can come from your database or API.
 const defaultValues: Partial<AppearanceFormValues> = {
 	theme: "system",
+	language: "en",
 };

 export function AppearanceForm() {
 	const { setTheme, theme } = useTheme();
+	const { locale, setLocale } = useLocale();
+	const { t } = useTranslation("settings");
+
 	const form = useForm<AppearanceFormValues>({
 		resolver: zodResolver(appearanceFormSchema),
 		defaultValues,
@@ -47,19 +63,23 @@ export function AppearanceForm() {
 	useEffect(() => {
 		form.reset({
 			theme: (theme ?? "system") as AppearanceFormValues["theme"],
+			language: locale,
 		});
-	}, [form, theme]);
+	}, [form, theme, locale]);
 	function onSubmit(data: AppearanceFormValues) {
 		setTheme(data.theme);
+		setLocale(data.language);
 		toast.success("Preferences Updated");
 	}

 	return (
 		<Card className="bg-transparent">
 			<CardHeader>
-				<CardTitle className="text-xl">Appearance</CardTitle>
+				<CardTitle className="text-xl">
+					{t("settings.appearance.title")}
+				</CardTitle>
 				<CardDescription>
-					Customize the theme of your dashboard.
+					{t("settings.appearance.description")}
 				</CardDescription>
 			</CardHeader>
 			<CardContent className="space-y-2">
@@ -72,9 +92,9 @@ export function AppearanceForm() {
 							render={({ field }) => {
 								return (
 									<FormItem className="space-y-1 ">
-										<FormLabel>Theme</FormLabel>
+										<FormLabel>{t("settings.appearance.theme")}</FormLabel>
 										<FormDescription>
-											Select a theme for your dashboard
+											{t("settings.appearance.themeDescription")}
 										</FormDescription>
 										<FormMessage />
 										<RadioGroup
@@ -92,7 +112,7 @@ export function AppearanceForm() {
 														<img src="/images/theme-light.svg" alt="light" />
 													</div>
 													<span className="block w-full p-2 text-center font-normal">
-														Light
+														{t("settings.appearance.themes.light")}
 													</span>
 												</FormLabel>
 											</FormItem>
@@ -105,7 +125,7 @@ export function AppearanceForm() {
 														<img src="/images/theme-dark.svg" alt="dark" />
 													</div>
 													<span className="block w-full p-2 text-center font-normal">
-														Dark
+														{t("settings.appearance.themes.dark")}
 													</span>
 												</FormLabel>
 											</FormItem>
@@ -121,7 +141,7 @@ export function AppearanceForm() {
 														<img src="/images/theme-system.svg" alt="system" />
 													</div>
 													<span className="block w-full p-2 text-center font-normal">
-														System
+														{t("settings.appearance.themes.system")}
 													</span>
 												</FormLabel>
 											</FormItem>
@@ -131,7 +151,43 @@ export function AppearanceForm() {
 							}}
 						/>

-						<Button type="submit">Save</Button>
+						<FormField
+							control={form.control}
+							name="language"
+							defaultValue={form.control._defaultValues.language}
+							render={({ field }) => {
+								return (
+									<FormItem className="space-y-1">
+										<FormLabel>{t("settings.appearance.language")}</FormLabel>
+										<FormDescription>
+											{t("settings.appearance.languageDescription")}
+										</FormDescription>
+										<FormMessage />
+										<Select
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+											value={field.value}
+										>
+											<SelectTrigger>
+												<SelectValue placeholder="No preset selected" />
+											</SelectTrigger>
+											<SelectContent>
+												{[
+													{ label: "English", value: "en" },
+													{ label: "简体中文", value: "zh-Hans" },
+												].map((preset) => (
+													<SelectItem key={preset.label} value={preset.value}>
+														{preset.label}
+													</SelectItem>
+												))}
+											</SelectContent>
+										</Select>
+									</FormItem>
+								);
+							}}
+						/>
+
+						<Button type="submit">{t("settings.common.save")}</Button>
 					</form>
 				</Form>
 			</CardContent>
--- a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
@@ -18,6 +18,7 @@ import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -51,6 +52,7 @@ const randomImages = [
 export const ProfileForm = () => {
 	const { data, refetch } = api.auth.get.useQuery();
 	const { mutateAsync, isLoading } = api.auth.update.useMutation();
+	const { t } = useTranslation("settings");

 	const form = useForm<Profile>({
 		defaultValues: {
@@ -91,10 +93,10 @@ export const ProfileForm = () => {
 		<Card className="bg-transparent">
 			<CardHeader className="flex flex-row gap-2 flex-wrap justify-between items-center">
 				<div>
-					<CardTitle className="text-xl">Account</CardTitle>
-					<CardDescription>
-						Change the details of your profile here.
-					</CardDescription>
+					<CardTitle className="text-xl">
+						{t("settings.profile.title")}
+					</CardTitle>
+					<CardDescription>{t("settings.profile.description")}</CardDescription>
 				</div>
 				{!data?.is2FAEnabled ? <Enable2FA /> : <Disable2FA />}
 			</CardHeader>
@@ -107,9 +109,12 @@ export const ProfileForm = () => {
 								name="email"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Email</FormLabel>
+										<FormLabel>{t("settings.profile.email")}</FormLabel>
 										<FormControl>
-											<Input placeholder="Email" {...field} />
+											<Input
+												placeholder={t("settings.profile.email")}
+												{...field}
+											/>
 										</FormControl>
 										<FormMessage />
 									</FormItem>
@@ -120,11 +125,11 @@ export const ProfileForm = () => {
 								name="password"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Password</FormLabel>
+										<FormLabel>{t("settings.profile.password")}</FormLabel>
 										<FormControl>
 											<Input
 												type="password"
-												placeholder="Password"
+												placeholder={t("settings.profile.password")}
 												{...field}
 												value={field.value || ""}
 											/>
@@ -139,7 +144,7 @@ export const ProfileForm = () => {
 								name="image"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Avatar</FormLabel>
+										<FormLabel>{t("settings.profile.avatar")}</FormLabel>
 										<FormControl>
 											<RadioGroup
 												onValueChange={(e) => {
@@ -177,7 +182,7 @@ export const ProfileForm = () => {
 						</div>
 						<div>
 							<Button type="submit" isLoading={isLoading}>
-								Save
+								{t("settings.common.save")}
 							</Button>
 						</div>
 					</form>
--- a/apps/dokploy/components/dashboard/settings/servers/actions/show-dokploy-actions.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/actions/show-dokploy-actions.tsx
@@ -12,10 +12,13 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { api } from "@/utils/api";
+import { useTranslation } from "next-i18next";
 import { toast } from "sonner";
 import { ShowModalLogs } from "../../web-server/show-modal-logs";
+import { GPUSupportModal } from "../gpu-support-modal";

 export const ShowDokployActions = () => {
+	const { t } = useTranslation("settings");
 	const { mutateAsync: reloadServer, isLoading } =
 		api.settings.reloadServer.useMutation();

@@ -23,11 +26,13 @@ export const ShowDokployActions = () => {
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild disabled={isLoading}>
 				<Button isLoading={isLoading} variant="outline">
-					Server
+					{t("settings.server.webServer.server.label")}
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent className="w-56" align="start">
-				<DropdownMenuLabel>Actions</DropdownMenuLabel>
+				<DropdownMenuLabel>
+					{t("settings.server.webServer.actions")}
+				</DropdownMenuLabel>
 				<DropdownMenuSeparator />
 				<DropdownMenuGroup>
 					<DropdownMenuItem
@@ -42,16 +47,17 @@ export const ShowDokployActions = () => {
 						}}
 						className="cursor-pointer"
 					>
-						Reload
+						<span>{t("settings.server.webServer.reload")}</span>
 					</DropdownMenuItem>
 					<ShowModalLogs appName="dokploy">
 						<DropdownMenuItem
 							className="cursor-pointer"
 							onSelect={(e) => e.preventDefault()}
 						>
-							Watch Logs
+							{t("settings.server.webServer.watchLogs")}
 						</DropdownMenuItem>
 					</ShowModalLogs>
+					<GPUSupportModal />
 					<UpdateServerIp>
 						<DropdownMenuItem
 							className="cursor-pointer"
--- a/apps/dokploy/components/dashboard/settings/servers/actions/show-storage-actions.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/actions/show-storage-actions.tsx
@@ -11,12 +11,14 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { api } from "@/utils/api";
+import { useTranslation } from "next-i18next";
 import { toast } from "sonner";

 interface Props {
 	serverId?: string;
 }
 export const ShowStorageActions = ({ serverId }: Props) => {
+	const { t } = useTranslation("settings");
 	const { mutateAsync: cleanAll, isLoading: cleanAllIsLoading } =
 		api.settings.cleanAll.useMutation();

@@ -64,11 +66,13 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 					}
 					variant="outline"
 				>
-					Space
+					{t("settings.server.webServer.storage.label")}
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent className="w-64" align="start">
-				<DropdownMenuLabel>Actions</DropdownMenuLabel>
+				<DropdownMenuLabel>
+					{t("settings.server.webServer.actions")}
+				</DropdownMenuLabel>
 				<DropdownMenuSeparator />
 				<DropdownMenuGroup>
 					<DropdownMenuItem
@@ -85,7 +89,9 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 								});
 						}}
 					>
-						<span>Clean Unused Images</span>
+						<span>
+							{t("settings.server.webServer.storage.cleanUnusedImages")}
+						</span>
 					</DropdownMenuItem>
 					<DropdownMenuItem
 						className="w-full cursor-pointer"
@@ -101,7 +107,9 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 								});
 						}}
 					>
-						<span>Clean Unused Volumes</span>
+						<span>
+							{t("settings.server.webServer.storage.cleanUnusedVolumes")}
+						</span>
 					</DropdownMenuItem>

 					<DropdownMenuItem
@@ -118,7 +126,9 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 								});
 						}}
 					>
-						<span>Clean Stopped Containers</span>
+						<span>
+							{t("settings.server.webServer.storage.cleanStoppedContainers")}
+						</span>
 					</DropdownMenuItem>

 					<DropdownMenuItem
@@ -135,7 +145,9 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 								});
 						}}
 					>
-						<span>Clean Docker Builder & System</span>
+						<span>
+							{t("settings.server.webServer.storage.cleanDockerBuilder")}
+						</span>
 					</DropdownMenuItem>
 					{!serverId && (
 						<DropdownMenuItem
@@ -150,7 +162,9 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 									});
 							}}
 						>
-							<span>Clean Monitoring </span>
+							<span>
+								{t("settings.server.webServer.storage.cleanMonitoring")}
+							</span>
 						</DropdownMenuItem>
 					)}

@@ -168,7 +182,7 @@ export const ShowStorageActions = ({ serverId }: Props) => {
 								});
 						}}
 					>
-						<span>Clean All</span>
+						<span>{t("settings.server.webServer.storage.cleanAll")}</span>
 					</DropdownMenuItem>
 				</DropdownMenuGroup>
 			</DropdownMenuContent>
--- a/apps/dokploy/components/dashboard/settings/servers/actions/show-traefik-actions.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/actions/show-traefik-actions.tsx
@@ -23,6 +23,7 @@ import { api } from "@/utils/api";
 import { toast } from "sonner";

 import { cn } from "@/lib/utils";
+import { useTranslation } from "next-i18next";
 import { EditTraefikEnv } from "../../web-server/edit-traefik-env";
 import { ShowModalLogs } from "../../web-server/show-modal-logs";

@@ -30,6 +31,7 @@ interface Props {
 	serverId?: string;
 }
 export const ShowTraefikActions = ({ serverId }: Props) => {
+	const { t } = useTranslation("settings");
 	const { mutateAsync: reloadTraefik, isLoading: reloadTraefikIsLoading } =
 		api.settings.reloadTraefik.useMutation();

@@ -51,11 +53,13 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 					isLoading={reloadTraefikIsLoading || toggleDashboardIsLoading}
 					variant="outline"
 				>
-					Traefik
+					{t("settings.server.webServer.traefik.label")}
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent className="w-56" align="start">
-				<DropdownMenuLabel>Actions</DropdownMenuLabel>
+				<DropdownMenuLabel>
+					{t("settings.server.webServer.actions")}
+				</DropdownMenuLabel>
 				<DropdownMenuSeparator />
 				<DropdownMenuGroup>
 					<DropdownMenuItem
@@ -72,14 +76,14 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 						}}
 						className="cursor-pointer"
 					>
-						<span>Reload</span>
+						<span>{t("settings.server.webServer.reload")}</span>
 					</DropdownMenuItem>
 					<ShowModalLogs appName="dokploy-traefik" serverId={serverId}>
 						<DropdownMenuItem
 							onSelect={(e) => e.preventDefault()}
 							className="cursor-pointer"
 						>
-							Watch Logs
+							{t("settings.server.webServer.watchLogs")}
 						</DropdownMenuItem>
 					</ShowModalLogs>
 					<EditTraefikEnv serverId={serverId}>
@@ -87,7 +91,7 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 							onSelect={(e) => e.preventDefault()}
 							className="cursor-pointer"
 						>
-							<span>Modify Env</span>
+							<span>{t("settings.server.webServer.traefik.modifyEnv")}</span>
 						</DropdownMenuItem>
 					</EditTraefikEnv>

--- a/apps/dokploy/components/dashboard/settings/servers/gpu-support-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/gpu-support-modal.tsx
@@ -0,0 +1,36 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { useState } from "react";
+import { GPUSupport } from "./gpu-support";
+
+export const GPUSupportModal = () => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer"
+					onSelect={(e) => e.preventDefault()}
+				>
+					<span>GPU Setup</span>
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-4xl overflow-y-auto max-h-screen">
+				<DialogHeader>
+					<DialogTitle className="flex items-center gap-2">
+						Dokploy Server GPU Setup
+					</DialogTitle>
+				</DialogHeader>
+
+				<GPUSupport serverId="" />
+			</DialogContent>
+		</Dialog>
+	);
+};
--- a/apps/dokploy/components/dashboard/settings/servers/gpu-support.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/gpu-support.tsx
@@ -0,0 +1,282 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { TRPCClientError } from "@trpc/client";
+import { CheckCircle2, Cpu, Loader2, RefreshCw, XCircle } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+interface GPUSupportProps {
+	serverId?: string;
+}
+
+export function GPUSupport({ serverId }: GPUSupportProps) {
+	const [isLoading, setIsLoading] = useState(false);
+	const [isRefreshing, setIsRefreshing] = useState(false);
+	const utils = api.useContext();
+
+	const {
+		data: gpuStatus,
+		isLoading: isChecking,
+		refetch,
+	} = api.settings.checkGPUStatus.useQuery(
+		{ serverId },
+		{
+			enabled: serverId !== undefined,
+		},
+	);
+
+	const setupGPU = api.settings.setupGPU.useMutation({
+		onMutate: () => {
+			setIsLoading(true);
+		},
+		onSuccess: async () => {
+			toast.success("GPU support enabled successfully");
+			setIsLoading(false);
+			await utils.settings.checkGPUStatus.invalidate({ serverId });
+		},
+		onError: (error) => {
+			toast.error(
+				error.message ||
+					"Failed to enable GPU support. Please check server logs.",
+			);
+			setIsLoading(false);
+		},
+	});
+
+	const handleRefresh = async () => {
+		setIsRefreshing(true);
+		try {
+			await utils.settings.checkGPUStatus.invalidate({ serverId });
+			await refetch();
+		} catch (error) {
+			toast.error("Failed to refresh GPU status");
+		} finally {
+			setIsRefreshing(false);
+		}
+	};
+	useEffect(() => {
+		handleRefresh();
+	}, []);
+
+	const handleEnableGPU = async () => {
+		if (serverId === undefined) {
+			toast.error("No server selected");
+			return;
+		}
+
+		try {
+			await setupGPU.mutateAsync({ serverId });
+		} catch (error) {
+			// Error handling is done in mutation's onError
+		}
+	};
+
+	return (
+		<CardContent className="p-0">
+			<div className="flex flex-col gap-4">
+				<Card className="bg-background">
+					<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+						<div className="flex flex-row gap-2 justify-between w-full items-end max-sm:flex-col">
+							<div className="flex flex-col gap-1">
+								<div className="flex items-center gap-2">
+									<Cpu className="size-5" />
+									<CardTitle className="text-xl">GPU Configuration</CardTitle>
+								</div>
+								<CardDescription>
+									Configure and monitor GPU support
+								</CardDescription>
+							</div>
+							<div className="flex items-center gap-2">
+								<DialogAction
+									title="Enable GPU Support?"
+									description="This will enable GPU support for Docker Swarm on this server. Make sure you have the required hardware and drivers installed."
+									onClick={handleEnableGPU}
+								>
+									<Button
+										isLoading={isLoading}
+										disabled={isLoading || serverId === undefined || isChecking}
+									>
+										{isLoading
+											? "Enabling GPU..."
+											: gpuStatus?.swarmEnabled
+												? "Reconfigure GPU"
+												: "Enable GPU"}
+									</Button>
+								</DialogAction>
+								<Button
+									size="icon"
+									onClick={handleRefresh}
+									disabled={isChecking || isRefreshing}
+								>
+									<RefreshCw
+										className={`h-5 w-5 ${isChecking || isRefreshing ? "animate-spin" : ""}`}
+									/>
+								</Button>
+							</div>
+						</div>
+					</CardHeader>
+
+					<CardContent className="flex flex-col gap-4">
+						<AlertBlock type="info">
+							<div className="font-medium mb-2">System Requirements:</div>
+							<ul className="list-disc list-inside text-sm space-y-1">
+								<li>NVIDIA GPU hardware must be physically installed</li>
+								<li>
+									NVIDIA drivers must be installed and running (check with
+									nvidia-smi)
+								</li>
+								<li>
+									NVIDIA Container Runtime must be installed
+									(nvidia-container-runtime)
+								</li>
+								<li>User must have sudo/administrative privileges</li>
+								<li>System must support CUDA for GPU acceleration</li>
+							</ul>
+						</AlertBlock>
+
+						{isChecking ? (
+							<div className="flex items-center justify-center text-muted-foreground py-4">
+								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+								<span>Checking GPU status...</span>
+							</div>
+						) : (
+							<div className="grid gap-4">
+								{/* Prerequisites Section */}
+								<div className="border rounded-lg p-4">
+									<h3 className="text-lg font-semibold mb-1">Prerequisites</h3>
+									<p className="text-sm text-muted-foreground mb-4">
+										Shows all software checks and available hardware
+									</p>
+									<div className="grid gap-2.5">
+										<StatusRow
+											label="NVIDIA Driver"
+											isEnabled={gpuStatus?.driverInstalled}
+											description={
+												gpuStatus?.driverVersion
+													? `Installed (v${gpuStatus.driverVersion})`
+													: "Not Installed"
+											}
+										/>
+										<StatusRow
+											label="GPU Model"
+											value={gpuStatus?.gpuModel || "Not Detected"}
+											showIcon={false}
+										/>
+										<StatusRow
+											label="GPU Memory"
+											value={gpuStatus?.memoryInfo || "Not Available"}
+											showIcon={false}
+										/>
+										<StatusRow
+											label="Available GPUs"
+											value={gpuStatus?.availableGPUs || 0}
+											showIcon={false}
+										/>
+										<StatusRow
+											label="CUDA Support"
+											isEnabled={gpuStatus?.cudaSupport}
+											description={
+												gpuStatus?.cudaVersion
+													? `Available (v${gpuStatus.cudaVersion})`
+													: "Not Available"
+											}
+										/>
+										<StatusRow
+											label="NVIDIA Container Runtime"
+											isEnabled={gpuStatus?.runtimeInstalled}
+											description={
+												gpuStatus?.runtimeInstalled
+													? "Installed"
+													: "Not Installed"
+											}
+										/>
+									</div>
+								</div>
+
+								{/* Configuration Status */}
+								<div className="border rounded-lg p-4">
+									<h3 className="text-lg font-semibold mb-1">
+										Docker Swarm GPU Status
+									</h3>
+									<p className="text-sm text-muted-foreground mb-4">
+										Shows the configuration state that changes with the Enable
+										GPU
+									</p>
+									<div className="grid gap-2.5">
+										<StatusRow
+											label="Runtime Configuration"
+											isEnabled={gpuStatus?.runtimeConfigured}
+											description={
+												gpuStatus?.runtimeConfigured
+													? "Default Runtime"
+													: "Not Default Runtime"
+											}
+										/>
+										<StatusRow
+											label="Swarm GPU Support"
+											isEnabled={gpuStatus?.swarmEnabled}
+											description={
+												gpuStatus?.swarmEnabled
+													? `Enabled (${gpuStatus.gpuResources} GPU${gpuStatus.gpuResources !== 1 ? "s" : ""})`
+													: "Not Enabled"
+											}
+										/>
+									</div>
+								</div>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+			</div>
+		</CardContent>
+	);
+}
+
+interface StatusRowProps {
+	label: string;
+	isEnabled?: boolean;
+	description?: string;
+	value?: string | number;
+	showIcon?: boolean;
+}
+
+export function StatusRow({
+	label,
+	isEnabled,
+	description,
+	value,
+	showIcon = true,
+}: StatusRowProps) {
+	return (
+		<div className="flex items-center justify-between">
+			<span className="text-sm">{label}</span>
+			<div className="flex items-center gap-2">
+				{showIcon ? (
+					<>
+						{isEnabled ? (
+							<CheckCircle2 className="size-4 text-green-500" />
+						) : (
+							<XCircle className="size-4 text-red-500" />
+						)}
+						<span
+							className={`text-sm ${isEnabled ? "text-green-500" : "text-red-500"}`}
+						>
+							{description || (isEnabled ? "Installed" : "Not Installed")}
+						</span>
+					</>
+				) : (
+					<span className="text-sm text-muted-foreground">{value}</span>
+				)}
+			</div>
+		</div>
+	);
+}
--- a/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
@@ -32,6 +32,7 @@ import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
 import { ShowDeployment } from "../../application/deployments/show-deployment";
+import { GPUSupport } from "./gpu-support";

 interface Props {
 	serverId: string;
@@ -89,9 +90,10 @@ export const SetupServer = ({ serverId }: Props) => {
 				) : (
 					<div id="hook-form-add-gitlab" className="grid w-full gap-1">
 						<Tabs defaultValue="ssh-keys">
-							<TabsList className="grid grid-cols-2 w-[400px]">
+							<TabsList className="grid grid-cols-3 w-[400px]">
 								<TabsTrigger value="ssh-keys">SSH Keys</TabsTrigger>
 								<TabsTrigger value="deployments">Deployments</TabsTrigger>
+								<TabsTrigger value="gpu-setup">GPU Setup</TabsTrigger>
 							</TabsList>
 							<TabsContent
 								value="ssh-keys"
@@ -291,6 +293,14 @@ export const SetupServer = ({ serverId }: Props) => {
 									</div>
 								</CardContent>
 							</TabsContent>
+							<TabsContent
+								value="gpu-setup"
+								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+							>
+								<div className="flex flex-col gap-2 text-sm text-muted-foreground pt-3">
+									<GPUSupport serverId={serverId} />
+								</div>
+							</TabsContent>
 						</Tabs>
 					</div>
 				)}
--- a/apps/dokploy/components/dashboard/settings/web-domain.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-domain.tsx
@@ -24,6 +24,7 @@ import {
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -49,6 +50,7 @@ const addServerDomain = z
 type AddServerDomain = z.infer<typeof addServerDomain>;

 export const WebDomain = () => {
+	const { t } = useTranslation("settings");
 	const { data: user, refetch } = api.admin.one.useQuery();
 	const { mutateAsync, isLoading } =
 		api.settings.assignDomainServer.useMutation();
@@ -89,9 +91,11 @@ export const WebDomain = () => {
 		<div className="w-full">
 			<Card className="bg-transparent">
 				<CardHeader>
-					<CardTitle className="text-xl">Server Domain</CardTitle>
+					<CardTitle className="text-xl">
+						{t("settings.server.domain.title")}
+					</CardTitle>
 					<CardDescription>
-						Add a domain to your server application.
+						{t("settings.server.domain.description")}
 					</CardDescription>
 				</CardHeader>
 				<CardContent className="flex w-full flex-col gap-4">
@@ -106,7 +110,9 @@ export const WebDomain = () => {
 								render={({ field }) => {
 									return (
 										<FormItem>
-											<FormLabel>Domain</FormLabel>
+											<FormLabel>
+												{t("settings.server.domain.form.domain")}
+											</FormLabel>
 											<FormControl>
 												<Input
 													className="w-full"
@@ -126,7 +132,9 @@ export const WebDomain = () => {
 								render={({ field }) => {
 									return (
 										<FormItem>
-											<FormLabel>Letsencrypt Email</FormLabel>
+											<FormLabel>
+												{t("settings.server.domain.form.letsEncryptEmail")}
+											</FormLabel>
 											<FormControl>
 												<Input
 													className="w-full"
@@ -145,20 +153,32 @@ export const WebDomain = () => {
 								render={({ field }) => {
 									return (
 										<FormItem className="md:col-span-2">
-											<FormLabel>Certificate</FormLabel>
+											<FormLabel>
+												{t("settings.server.domain.form.certificate.label")}
+											</FormLabel>
 											<Select
 												onValueChange={field.onChange}
 												value={field.value}
 											>
 												<FormControl>
 													<SelectTrigger>
-														<SelectValue placeholder="Select a certificate" />
+														<SelectValue
+															placeholder={t(
+																"settings.server.domain.form.certificate.placeholder",
+															)}
+														/>
 													</SelectTrigger>
 												</FormControl>
 												<SelectContent>
-													<SelectItem value={"none"}>None</SelectItem>
+													<SelectItem value={"none"}>
+														{t(
+															"settings.server.domain.form.certificateOptions.none",
+														)}
+													</SelectItem>
 													<SelectItem value={"letsencrypt"}>
-														Letsencrypt (Default)
+														{t(
+															"settings.server.domain.form.certificateOptions.letsencrypt",
+														)}
 													</SelectItem>
 												</SelectContent>
 											</Select>
@@ -169,7 +189,7 @@ export const WebDomain = () => {
 							/>
 							<div>
 								<Button isLoading={isLoading} type="submit">
-									Save
+									{t("settings.common.save")}
 								</Button>
 							</div>
 						</form>
--- a/apps/dokploy/components/dashboard/settings/web-server.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server.tsx
@@ -7,6 +7,7 @@ import {
 } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
+import { useTranslation } from "next-i18next";
 import React from "react";
 import { ShowDokployActions } from "./servers/actions/show-dokploy-actions";
 import { ShowStorageActions } from "./servers/actions/show-storage-actions";
@@ -18,6 +19,7 @@ interface Props {
 	className?: string;
 }
 export const WebServer = ({ className }: Props) => {
+	const { t } = useTranslation("settings");
 	const { data } = api.admin.one.useQuery();

 	const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
@@ -25,8 +27,12 @@ export const WebServer = ({ className }: Props) => {
 	return (
 		<Card className={cn("rounded-lg w-full bg-transparent p-0", className)}>
 			<CardHeader>
-				<CardTitle className="text-xl">Web server settings</CardTitle>
-				<CardDescription>Reload or clean the web server.</CardDescription>
+				<CardTitle className="text-xl">
+					{t("settings.server.webServer.title")}
+				</CardTitle>
+				<CardDescription>
+					{t("settings.server.webServer.description")}
+				</CardDescription>
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4 ">
 				<div className="grid md:grid-cols-2 gap-4">