Merge pull request #2933 from AathilFelix/feat/server-time-clock

feat: add server time clock in the dashboard

Author: Siumauricio

apps/dokploy/components/dashboard/projects/show.tsx

@@ -14,6 +14,7 @@ import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
 import { DateTooltip } from "@/components/shared/date-tooltip";
+import { FocusShortcutInput } from "@/components/shared/focus-shortcut-input";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
 import {
 	AlertDialog,
@@ -44,20 +45,21 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { FocusShortcutInput } from "@/components/shared/focus-shortcut-input";
 import {
 	Select,
 	SelectContent,
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { TimeBadge } from "@/components/ui/time-badge";
 import { api } from "@/utils/api";
 import { HandleProject } from "./handle-project";
 import { ProjectEnvironment } from "./project-environment";
 
 export const ShowProjects = () => {
 	const utils = api.useUtils();
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data, isLoading } = api.project.all.useQuery();
 	const { data: auth } = api.user.get.useQuery();
 	const { mutateAsync } = api.project.remove.useMutation();
@@ -135,6 +137,11 @@ export const ShowProjects = () => {
 			<BreadcrumbSidebar
 				list={[{ name: "Projects", href: "/dashboard/projects" }]}
 			/>
+			{!isCloud && (
+				<div className="absolute top-5 right-5">
+					<TimeBadge />
+				</div>
+			)}
 			<div className="w-full">
 				<Card className="h-full bg-sidebar p-2.5 rounded-xl  ">
 					<div className="rounded-xl bg-background shadow-md ">
@@ -148,7 +155,6 @@ export const ShowProjects = () => {
 									Create and manage your projects
 								</CardDescription>
 							</CardHeader>
-
 							{(auth?.role === "owner" || auth?.canCreateProjects) && (
 								<div className="">
 									<HandleProject />
@@ -298,7 +304,13 @@ export const ShowProjects = () => {
 																										<Link
 																											className="space-x-4 text-xs cursor-pointer justify-between"
 																											target="_blank"
-																											href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
+																											href={`${
+																												domain.https
+																													? "https"
+																													: "http"
+																											}://${domain.host}${
+																												domain.path
+																											}`}
 																										>
 																											<span className="truncate">
 																												{domain.host}
@@ -340,7 +352,13 @@ export const ShowProjects = () => {
 																										<Link
 																											className="space-x-4 text-xs cursor-pointer justify-between"
 																											target="_blank"
-																											href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
+																											href={`${
+																												domain.https
+																													? "https"
+																													: "http"
+																											}://${domain.host}${
+																												domain.path
+																											}`}
 																										>
 																											<span className="truncate">
 																												{domain.host}

apps/dokploy/components/layouts/side.tsx

@@ -83,6 +83,7 @@ import { AddOrganization } from "../dashboard/organization/handle-organization";
 import { DialogAction } from "../shared/dialog-action";
 import { Logo } from "../shared/logo";
 import { Button } from "../ui/button";
+import { TimeBadge } from "../ui/time-badge";
 import { UpdateServerButton } from "./update-server";
 import { UserNav } from "./user-nav";
 
@@ -1125,6 +1126,7 @@ export default function Page({ children }: Props) {
 									</BreadcrumbList>
 								</Breadcrumb>
 							</div>
+							{!isCloud && <TimeBadge />}
 						</div>
 					</header>
 				)}

apps/dokploy/components/ui/time-badge.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { api } from "@/utils/api";
+
+export function TimeBadge() {
+	const { data: serverTime } = api.server.getServerTime.useQuery(undefined);
+	const [time, setTime] = useState<Date | null>(null);
+
+	useEffect(() => {
+		if (serverTime?.time) {
+			setTime(new Date(serverTime.time));
+		}
+	}, [serverTime]);
+
+	useEffect(() => {
+		const timer = setInterval(() => {
+			setTime((prevTime) => {
+				if (!prevTime) return null;
+				const newTime = new Date(prevTime.getTime() + 1000);
+				return newTime;
+			});
+		}, 1000);
+
+		return () => {
+			clearInterval(timer);
+		};
+	}, []);
+
+	if (!time || !serverTime?.timezone) {
+		return null;
+	}
+
+	const getUtcOffset = (timeZone: string) => {
+		const date = new Date();
+		const utcDate = new Date(date.toLocaleString("en-US", { timeZone: "UTC" }));
+		const tzDate = new Date(date.toLocaleString("en-US", { timeZone }));
+		const offset = (tzDate.getTime() - utcDate.getTime()) / (1000 * 60 * 60);
+		const sign = offset >= 0 ? "+" : "-";
+		const hours = Math.floor(Math.abs(offset));
+		const minutes = (Math.abs(offset) * 60) % 60;
+		return `UTC${sign}${hours.toString().padStart(2, "0")}:${minutes
+			.toString()
+			.padStart(2, "0")}`;
+	};
+
+	return (
+		<div className="inline-flex items-center gap-2 rounded-md border px-2 py-1 text-xs sm:text-sm whitespace-nowrap max-w-full overflow-hidden">
+			<span className="hidden sm:inline">Server Time:</span>
+			<span className="font-medium tabular-nums">
+				{time.toLocaleTimeString()}
+			</span>
+			<span className="hidden sm:inline text-muted-foreground">
+				({serverTime.timezone} | {getUtcOffset(serverTime.timezone)})
+			</span>
+		</div>
+	);
+}

apps/dokploy/server/api/routers/server.ts

@@ -383,6 +383,15 @@ export const serverRouter = createTRPCRouter({
 		const ip = await getPublicIpWithFallback();
 		return ip;
 	}),
+	getServerTime: protectedProcedure.query(() => {
+		if (IS_CLOUD) {
+			return null;
+		}
+		return {
+			time: new Date(),
+			timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+		};
+	}),
 	getServerMetrics: protectedProcedure
 		.input(
 			z.object({