From 0f100c7bc8749b930fd5ee287f922b058a73b8c9 Mon Sep 17 00:00:00 2001 From: Aathil Felix Date: Sat, 1 Nov 2025 18:03:40 +0530 Subject: [PATCH 1/3] feat: add server time clock --- .../components/dashboard/projects/show.tsx | 952 ++++----- apps/dokploy/components/layouts/side.tsx | 1868 ++++++++--------- apps/dokploy/components/ui/time-badge.tsx | 60 + apps/dokploy/server/api/routers/server.ts | 6 + 4 files changed, 1463 insertions(+), 1423 deletions(-) create mode 100644 apps/dokploy/components/ui/time-badge.tsx diff --git a/apps/dokploy/components/dashboard/projects/show.tsx b/apps/dokploy/components/dashboard/projects/show.tsx index 783c5bb32..8531e6b97 100644 --- a/apps/dokploy/components/dashboard/projects/show.tsx +++ b/apps/dokploy/components/dashboard/projects/show.tsx @@ -1,13 +1,13 @@ import { - AlertTriangle, - ArrowUpDown, - BookIcon, - ExternalLinkIcon, - FolderInput, - Loader2, - MoreHorizontalIcon, - Search, - TrashIcon, + AlertTriangle, + ArrowUpDown, + BookIcon, + ExternalLinkIcon, + FolderInput, + Loader2, + MoreHorizontalIcon, + Search, + TrashIcon, } from "lucide-react"; import Link from "next/link"; import { useEffect, useMemo, useState } from "react"; @@ -16,497 +16,497 @@ import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar"; import { DateTooltip } from "@/components/shared/date-tooltip"; import { StatusTooltip } from "@/components/shared/status-tooltip"; import { - AlertDialog, - AlertDialogAction, - AlertDialogCancel, - AlertDialogContent, - AlertDialogDescription, - AlertDialogFooter, - AlertDialogHeader, - AlertDialogTitle, - AlertDialogTrigger, + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, } from "@/components/ui/card"; import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { FocusShortcutInput } from "@/components/shared/focus-shortcut-input"; import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, } from "@/components/ui/select"; import { api } from "@/utils/api"; import { HandleProject } from "./handle-project"; import { ProjectEnvironment } from "./project-environment"; +import { TimeBadge } from "@/components/ui/time-badge"; export const ShowProjects = () => { - const utils = api.useUtils(); - const { data, isLoading } = api.project.all.useQuery(); - const { data: auth } = api.user.get.useQuery(); - const { mutateAsync } = api.project.remove.useMutation(); - const [searchQuery, setSearchQuery] = useState(""); - const [sortBy, setSortBy] = useState(() => { - if (typeof window !== "undefined") { - return localStorage.getItem("projectsSort") || "createdAt-desc"; - } - return "createdAt-desc"; - }); + const utils = api.useUtils(); + const { data, isLoading } = api.project.all.useQuery(); + const { data: auth } = api.user.get.useQuery(); + const { mutateAsync } = api.project.remove.useMutation(); + const [searchQuery, setSearchQuery] = useState(""); + const [sortBy, setSortBy] = useState(() => { + if (typeof window !== "undefined") { + return localStorage.getItem("projectsSort") || "createdAt-desc"; + } + return "createdAt-desc"; + }); - useEffect(() => { - localStorage.setItem("projectsSort", sortBy); - }, [sortBy]); + useEffect(() => { + localStorage.setItem("projectsSort", sortBy); + }, [sortBy]); - const filteredProjects = useMemo(() => { - if (!data) return []; + const filteredProjects = useMemo(() => { + if (!data) return []; - // First filter by search query - const filtered = data.filter( - (project) => - project.name.toLowerCase().includes(searchQuery.toLowerCase()) || - project.description?.toLowerCase().includes(searchQuery.toLowerCase()), - ); + // First filter by search query + const filtered = data.filter( + (project) => + project.name.toLowerCase().includes(searchQuery.toLowerCase()) || + project.description?.toLowerCase().includes(searchQuery.toLowerCase()) + ); - // Then sort the filtered results - const [field, direction] = sortBy.split("-"); - return [...filtered].sort((a, b) => { - let comparison = 0; - switch (field) { - case "name": - comparison = a.name.localeCompare(b.name); - break; - case "createdAt": - comparison = - new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(); - break; - case "services": { - const aTotalServices = a.environments.reduce((total, env) => { - return ( - total + - (env.applications?.length || 0) + - (env.mariadb?.length || 0) + - (env.mongo?.length || 0) + - (env.mysql?.length || 0) + - (env.postgres?.length || 0) + - (env.redis?.length || 0) + - (env.compose?.length || 0) - ); - }, 0); - const bTotalServices = b.environments.reduce((total, env) => { - return ( - total + - (env.applications?.length || 0) + - (env.mariadb?.length || 0) + - (env.mongo?.length || 0) + - (env.mysql?.length || 0) + - (env.postgres?.length || 0) + - (env.redis?.length || 0) + - (env.compose?.length || 0) - ); - }, 0); - comparison = aTotalServices - bTotalServices; - break; - } - default: - comparison = 0; - } - return direction === "asc" ? comparison : -comparison; - }); - }, [data, searchQuery, sortBy]); + // Then sort the filtered results + const [field, direction] = sortBy.split("-"); + return [...filtered].sort((a, b) => { + let comparison = 0; + switch (field) { + case "name": + comparison = a.name.localeCompare(b.name); + break; + case "createdAt": + comparison = + new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(); + break; + case "services": { + const aTotalServices = a.environments.reduce((total, env) => { + return ( + total + + (env.applications?.length || 0) + + (env.mariadb?.length || 0) + + (env.mongo?.length || 0) + + (env.mysql?.length || 0) + + (env.postgres?.length || 0) + + (env.redis?.length || 0) + + (env.compose?.length || 0) + ); + }, 0); + const bTotalServices = b.environments.reduce((total, env) => { + return ( + total + + (env.applications?.length || 0) + + (env.mariadb?.length || 0) + + (env.mongo?.length || 0) + + (env.mysql?.length || 0) + + (env.postgres?.length || 0) + + (env.redis?.length || 0) + + (env.compose?.length || 0) + ); + }, 0); + comparison = aTotalServices - bTotalServices; + break; + } + default: + comparison = 0; + } + return direction === "asc" ? comparison : -comparison; + }); + }, [data, searchQuery, sortBy]); - return ( - <> - -
- -
-
- - - - Projects - - - Create and manage your projects - - + return ( + <> + +
+ +
+
+ +
+
+ + + + Projects + + + Create and manage your projects + + + {(auth?.role === "owner" || auth?.canCreateProjects) && ( +
+ +
+ )} +
- {(auth?.role === "owner" || auth?.canCreateProjects) && ( -
- -
- )} -
+ + {isLoading ? ( +
+ Loading... + +
+ ) : ( + <> +
+
+ setSearchQuery(e.target.value)} + className="pr-10" + /> - - {isLoading ? ( -
- Loading... - -
- ) : ( - <> -
-
- setSearchQuery(e.target.value)} - className="pr-10" - /> + +
+
+ + +
+
+ {filteredProjects?.length === 0 && ( +
+ + + No projects found + +
+ )} +
+ {filteredProjects?.map((project) => { + const emptyServices = project?.environments + .map( + (env) => + env.applications.length === 0 && + env.mariadb.length === 0 && + env.mongo.length === 0 && + env.mysql.length === 0 && + env.postgres.length === 0 && + env.redis.length === 0 && + env.applications.length === 0 && + env.compose.length === 0 + ) + .every(Boolean); - -
-
- - -
-
- {filteredProjects?.length === 0 && ( -
- - - No projects found - -
- )} -
- {filteredProjects?.map((project) => { - const emptyServices = project?.environments - .map( - (env) => - env.applications.length === 0 && - env.mariadb.length === 0 && - env.mongo.length === 0 && - env.mysql.length === 0 && - env.postgres.length === 0 && - env.redis.length === 0 && - env.applications.length === 0 && - env.compose.length === 0, - ) - .every(Boolean); + const totalServices = project?.environments + .map( + (env) => + env.mariadb.length + + env.mongo.length + + env.mysql.length + + env.postgres.length + + env.redis.length + + env.applications.length + + env.compose.length + ) + .reduce((acc, curr) => acc + curr, 0); - const totalServices = project?.environments - .map( - (env) => - env.mariadb.length + - env.mongo.length + - env.mysql.length + - env.postgres.length + - env.redis.length + - env.applications.length + - env.compose.length, - ) - .reduce((acc, curr) => acc + curr, 0); + const haveServicesWithDomains = project?.environments + .map( + (env) => + env.applications.length > 0 || + env.compose.length > 0 + ) + .some(Boolean); - const haveServicesWithDomains = project?.environments - .map( - (env) => - env.applications.length > 0 || - env.compose.length > 0, - ) - .some(Boolean); + return ( +
+ + + {haveServicesWithDomains ? ( + + + + + e.stopPropagation()}> + {project.environments.some( + (env) => env.applications.length > 0 + ) && ( + + + Applications + + {project.environments.map((env) => + env.applications.map((app) => ( +
+ + + + {app.name} + + + + {app.domains.map((domain) => ( + + + + {domain.host} + + + + + ))} + +
+ )) + )} + + )} + {project.environments.some( + (env) => env.compose.length > 0 + ) && ( + + + Compose + + {project.environments.map((env) => + env.compose.map((comp) => ( +
+ + + + {comp.name} + + + + {comp.domains.map((domain) => ( + + + + {domain.host} + + + + + ))} + +
+ )) + )} + + )} + + + ) : null} + + + +
+ + + {project.name} + +
- return ( -
- - - {haveServicesWithDomains ? ( - - - - - e.stopPropagation()} - > - {project.environments.some( - (env) => env.applications.length > 0, - ) && ( - - - Applications - - {project.environments.map((env) => - env.applications.map((app) => ( -
- - - - {app.name} - - - - {app.domains.map((domain) => ( - - - - {domain.host} - - - - - ))} - -
- )), - )} - - )} - {project.environments.some( - (env) => env.compose.length > 0, - ) && ( - - - Compose - - {project.environments.map((env) => - env.compose.map((comp) => ( -
- - - - {comp.name} - - - - {comp.domains.map((domain) => ( - - - - {domain.host} - - - - - ))} - -
- )), - )} - - )} - - - ) : null} - - - -
- - - {project.name} - -
+ + {project.description} + + +
+ + + + + e.stopPropagation()}> + + Actions + +
e.stopPropagation()}> + +
+
e.stopPropagation()}> + +
- - {project.description} - - -
- - - - - e.stopPropagation()} - > - - Actions - -
e.stopPropagation()} - > - -
-
e.stopPropagation()} - > - -
- -
e.stopPropagation()} - > - {(auth?.role === "owner" || - auth?.canDeleteProjects) && ( - - - - e.preventDefault() - } - > - - Delete - - - - - - Are you sure to delete this - project? - - {!emptyServices ? ( -
- - - You have active - services, please delete - them first - -
- ) : ( - - This action cannot be - undone - - )} - - - - Cancel - - { - await mutateAsync({ - projectId: - project.projectId, - }) - .then(() => { - toast.success( - "Project deleted successfully", - ); - }) - .catch(() => { - toast.error( - "Error deleting this project", - ); - }) - .finally(() => { - utils.project.all.invalidate(); - }); - }} - > - Delete - - - - - )} -
- - -
- - - -
- - Created - - - {totalServices}{" "} - {totalServices === 1 - ? "service" - : "services"} - -
- - - -
- ); - })} -
- - )} - -
- -
- - ); +
e.stopPropagation()}> + {(auth?.role === "owner" || + auth?.canDeleteProjects) && ( + + + + e.preventDefault() + }> + + Delete + + + + + + Are you sure to delete this + project? + + {!emptyServices ? ( +
+ + + You have active + services, please delete + them first + +
+ ) : ( + + This action cannot be + undone + + )} + + + + Cancel + + { + await mutateAsync({ + projectId: + project.projectId, + }) + .then(() => { + toast.success( + "Project deleted successfully" + ); + }) + .catch(() => { + toast.error( + "Error deleting this project" + ); + }) + .finally(() => { + utils.project.all.invalidate(); + }); + }}> + Delete + + + + + )} +
+ + +
+ + + +
+ + Created + + + {totalServices}{" "} + {totalServices === 1 + ? "service" + : "services"} + +
+ + + +
+ ); + })} +
+ + )} + +
+ +
+ + ); }; diff --git a/apps/dokploy/components/layouts/side.tsx b/apps/dokploy/components/layouts/side.tsx index d1d4ae273..9833766f0 100644 --- a/apps/dokploy/components/layouts/side.tsx +++ b/apps/dokploy/components/layouts/side.tsx @@ -1,78 +1,78 @@ "use client"; import type { inferRouterOutputs } from "@trpc/server"; import { - Activity, - BarChartHorizontalBigIcon, - Bell, - BlocksIcon, - BookIcon, - BotIcon, - Boxes, - ChevronRight, - ChevronsUpDown, - CircleHelp, - Clock, - CreditCard, - Database, - Folder, - Forward, - GalleryVerticalEnd, - GitBranch, - HeartIcon, - KeyRound, - Loader2, - type LucideIcon, - Package, - PieChart, - Server, - ShieldCheck, - Trash2, - User, - Users, + Activity, + BarChartHorizontalBigIcon, + Bell, + BlocksIcon, + BookIcon, + BotIcon, + Boxes, + ChevronRight, + ChevronsUpDown, + CircleHelp, + Clock, + CreditCard, + Database, + Folder, + Forward, + GalleryVerticalEnd, + GitBranch, + HeartIcon, + KeyRound, + Loader2, + type LucideIcon, + Package, + PieChart, + Server, + ShieldCheck, + Trash2, + User, + Users, } from "lucide-react"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { useEffect, useState } from "react"; import { toast } from "sonner"; import { - Breadcrumb, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbList, + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, } from "@/components/ui/breadcrumb"; import { - Collapsible, - CollapsibleContent, - CollapsibleTrigger, + Collapsible, + CollapsibleContent, + CollapsibleTrigger, } from "@/components/ui/collapsible"; import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Separator } from "@/components/ui/separator"; import { - SIDEBAR_COOKIE_NAME, - Sidebar, - SidebarContent, - SidebarFooter, - SidebarGroup, - SidebarGroupLabel, - SidebarHeader, - SidebarInset, - SidebarMenu, - SidebarMenuButton, - SidebarMenuItem, - SidebarMenuSub, - SidebarMenuSubButton, - SidebarMenuSubItem, - SidebarProvider, - SidebarRail, - SidebarTrigger, - useSidebar, + SIDEBAR_COOKIE_NAME, + Sidebar, + SidebarContent, + SidebarFooter, + SidebarGroup, + SidebarGroupLabel, + SidebarHeader, + SidebarInset, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, + SidebarProvider, + SidebarRail, + SidebarTrigger, + useSidebar, } from "@/components/ui/sidebar"; import { authClient } from "@/lib/auth-client"; import { cn } from "@/lib/utils"; @@ -82,6 +82,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"; @@ -89,11 +90,11 @@ import { UserNav } from "./user-nav"; type AuthQueryOutput = inferRouterOutputs["user"]["get"]; type SingleNavItem = { - isSingle?: true; - title: string; - url: string; - icon?: LucideIcon; - isEnabled?: (opts: { auth?: AuthQueryOutput; isCloud: boolean }) => boolean; + isSingle?: true; + title: string; + url: string; + icon?: LucideIcon; + isEnabled?: (opts: { auth?: AuthQueryOutput; isCloud: boolean }) => boolean; }; // NavItem type @@ -101,33 +102,33 @@ type SingleNavItem = { // If `isSingle` is true or undefined, the item is a single item // If `isSingle` is false, the item is a group of items type NavItem = - | SingleNavItem - | { - isSingle: false; - title: string; - icon: LucideIcon; - items: SingleNavItem[]; - isEnabled?: (opts: { - auth?: AuthQueryOutput; - isCloud: boolean; - }) => boolean; - }; + | SingleNavItem + | { + isSingle: false; + title: string; + icon: LucideIcon; + items: SingleNavItem[]; + isEnabled?: (opts: { + auth?: AuthQueryOutput; + isCloud: boolean; + }) => boolean; + }; // ExternalLink type // Represents an external link item (used for the help section) type ExternalLink = { - name: string; - url: string; - icon: React.ComponentType<{ className?: string }>; - isEnabled?: (opts: { auth?: AuthQueryOutput; isCloud: boolean }) => boolean; + name: string; + url: string; + icon: React.ComponentType<{ className?: string }>; + isEnabled?: (opts: { auth?: AuthQueryOutput; isCloud: boolean }) => boolean; }; // Menu type // Consists of home, settings, and help items type Menu = { - home: NavItem[]; - settings: NavItem[]; - help: ExternalLink[]; + home: NavItem[]; + settings: NavItem[]; + help: ExternalLink[]; }; // Menu items @@ -135,257 +136,257 @@ type Menu = { // The items are filtered based on the user's role and permissions // The `isEnabled` function is called to determine if the item should be displayed const MENU: Menu = { - home: [ - { - isSingle: true, - title: "Projects", - url: "/dashboard/projects", - icon: Folder, - }, - { - isSingle: true, - title: "Monitoring", - url: "/dashboard/monitoring", - icon: BarChartHorizontalBigIcon, - // Only enabled in non-cloud environments - isEnabled: ({ isCloud }) => !isCloud, - }, - { - isSingle: true, - title: "Schedules", - url: "/dashboard/schedules", - icon: Clock, - // Only enabled in non-cloud environments - isEnabled: ({ isCloud, auth }) => !isCloud && auth?.role === "owner", - }, - { - isSingle: true, - title: "Traefik File System", - url: "/dashboard/traefik", - icon: GalleryVerticalEnd, - // Only enabled for admins and users with access to Traefik files in non-cloud environments - isEnabled: ({ auth, isCloud }) => - !!( - (auth?.role === "owner" || auth?.canAccessToTraefikFiles) && - !isCloud - ), - }, - { - isSingle: true, - title: "Docker", - url: "/dashboard/docker", - icon: BlocksIcon, - // Only enabled for admins and users with access to Docker in non-cloud environments - isEnabled: ({ auth, isCloud }) => - !!((auth?.role === "owner" || auth?.canAccessToDocker) && !isCloud), - }, - { - isSingle: true, - title: "Swarm", - url: "/dashboard/swarm", - icon: PieChart, - // Only enabled for admins and users with access to Docker in non-cloud environments - isEnabled: ({ auth, isCloud }) => - !!((auth?.role === "owner" || auth?.canAccessToDocker) && !isCloud), - }, - { - isSingle: true, - title: "Requests", - url: "/dashboard/requests", - icon: Forward, - // Only enabled for admins and users with access to Docker in non-cloud environments - isEnabled: ({ auth, isCloud }) => - !!((auth?.role === "owner" || auth?.canAccessToDocker) && !isCloud), - }, + home: [ + { + isSingle: true, + title: "Projects", + url: "/dashboard/projects", + icon: Folder, + }, + { + isSingle: true, + title: "Monitoring", + url: "/dashboard/monitoring", + icon: BarChartHorizontalBigIcon, + // Only enabled in non-cloud environments + isEnabled: ({ isCloud }) => !isCloud, + }, + { + isSingle: true, + title: "Schedules", + url: "/dashboard/schedules", + icon: Clock, + // Only enabled in non-cloud environments + isEnabled: ({ isCloud, auth }) => !isCloud && auth?.role === "owner", + }, + { + isSingle: true, + title: "Traefik File System", + url: "/dashboard/traefik", + icon: GalleryVerticalEnd, + // Only enabled for admins and users with access to Traefik files in non-cloud environments + isEnabled: ({ auth, isCloud }) => + !!( + (auth?.role === "owner" || auth?.canAccessToTraefikFiles) && + !isCloud + ), + }, + { + isSingle: true, + title: "Docker", + url: "/dashboard/docker", + icon: BlocksIcon, + // Only enabled for admins and users with access to Docker in non-cloud environments + isEnabled: ({ auth, isCloud }) => + !!((auth?.role === "owner" || auth?.canAccessToDocker) && !isCloud), + }, + { + isSingle: true, + title: "Swarm", + url: "/dashboard/swarm", + icon: PieChart, + // Only enabled for admins and users with access to Docker in non-cloud environments + isEnabled: ({ auth, isCloud }) => + !!((auth?.role === "owner" || auth?.canAccessToDocker) && !isCloud), + }, + { + isSingle: true, + title: "Requests", + url: "/dashboard/requests", + icon: Forward, + // Only enabled for admins and users with access to Docker in non-cloud environments + isEnabled: ({ auth, isCloud }) => + !!((auth?.role === "owner" || auth?.canAccessToDocker) && !isCloud), + }, - // Legacy unused menu, adjusted to the new structure - // { - // isSingle: true, - // title: "Projects", - // url: "/dashboard/projects", - // icon: Folder, - // }, - // { - // isSingle: true, - // title: "Monitoring", - // icon: BarChartHorizontalBigIcon, - // url: "/dashboard/settings/monitoring", - // }, - // { - // isSingle: false, - // title: "Settings", - // icon: Settings2, - // items: [ - // { - // title: "Profile", - // url: "/dashboard/settings/profile", - // }, - // { - // title: "Users", - // url: "/dashboard/settings/users", - // }, - // { - // title: "SSH Key", - // url: "/dashboard/settings/ssh-keys", - // }, - // { - // title: "Git", - // url: "/dashboard/settings/git-providers", - // }, - // ], - // }, - // { - // isSingle: false, - // title: "Integrations", - // icon: BlocksIcon, - // items: [ - // { - // title: "S3 Destinations", - // url: "/dashboard/settings/destinations", - // }, - // { - // title: "Registry", - // url: "/dashboard/settings/registry", - // }, - // { - // title: "Notifications", - // url: "/dashboard/settings/notifications", - // }, - // ], - // }, - ], + // Legacy unused menu, adjusted to the new structure + // { + // isSingle: true, + // title: "Projects", + // url: "/dashboard/projects", + // icon: Folder, + // }, + // { + // isSingle: true, + // title: "Monitoring", + // icon: BarChartHorizontalBigIcon, + // url: "/dashboard/settings/monitoring", + // }, + // { + // isSingle: false, + // title: "Settings", + // icon: Settings2, + // items: [ + // { + // title: "Profile", + // url: "/dashboard/settings/profile", + // }, + // { + // title: "Users", + // url: "/dashboard/settings/users", + // }, + // { + // title: "SSH Key", + // url: "/dashboard/settings/ssh-keys", + // }, + // { + // title: "Git", + // url: "/dashboard/settings/git-providers", + // }, + // ], + // }, + // { + // isSingle: false, + // title: "Integrations", + // icon: BlocksIcon, + // items: [ + // { + // title: "S3 Destinations", + // url: "/dashboard/settings/destinations", + // }, + // { + // title: "Registry", + // url: "/dashboard/settings/registry", + // }, + // { + // title: "Notifications", + // url: "/dashboard/settings/notifications", + // }, + // ], + // }, + ], - settings: [ - { - isSingle: true, - title: "Web Server", - url: "/dashboard/settings/server", - icon: Activity, - // Only enabled for admins in non-cloud environments - isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && !isCloud), - }, - { - isSingle: true, - title: "Profile", - url: "/dashboard/settings/profile", - icon: User, - }, - { - isSingle: true, - title: "Remote Servers", - url: "/dashboard/settings/servers", - icon: Server, - // Only enabled for admins - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, - { - isSingle: true, - title: "Users", - icon: Users, - url: "/dashboard/settings/users", - // Only enabled for admins - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, - { - isSingle: true, - title: "SSH Keys", - icon: KeyRound, - url: "/dashboard/settings/ssh-keys", - // Only enabled for admins and users with access to SSH keys - isEnabled: ({ auth }) => - !!(auth?.role === "owner" || auth?.canAccessToSSHKeys), - }, - { - title: "AI", - icon: BotIcon, - url: "/dashboard/settings/ai", - isSingle: true, - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, - { - isSingle: true, - title: "Git", - url: "/dashboard/settings/git-providers", - icon: GitBranch, - // Only enabled for admins and users with access to Git providers - isEnabled: ({ auth }) => - !!(auth?.role === "owner" || auth?.canAccessToGitProviders), - }, - { - isSingle: true, - title: "Registry", - url: "/dashboard/settings/registry", - icon: Package, - // Only enabled for admins - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, - { - isSingle: true, - title: "S3 Destinations", - url: "/dashboard/settings/destinations", - icon: Database, - // Only enabled for admins - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, + settings: [ + { + isSingle: true, + title: "Web Server", + url: "/dashboard/settings/server", + icon: Activity, + // Only enabled for admins in non-cloud environments + isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && !isCloud), + }, + { + isSingle: true, + title: "Profile", + url: "/dashboard/settings/profile", + icon: User, + }, + { + isSingle: true, + title: "Remote Servers", + url: "/dashboard/settings/servers", + icon: Server, + // Only enabled for admins + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, + { + isSingle: true, + title: "Users", + icon: Users, + url: "/dashboard/settings/users", + // Only enabled for admins + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, + { + isSingle: true, + title: "SSH Keys", + icon: KeyRound, + url: "/dashboard/settings/ssh-keys", + // Only enabled for admins and users with access to SSH keys + isEnabled: ({ auth }) => + !!(auth?.role === "owner" || auth?.canAccessToSSHKeys), + }, + { + title: "AI", + icon: BotIcon, + url: "/dashboard/settings/ai", + isSingle: true, + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, + { + isSingle: true, + title: "Git", + url: "/dashboard/settings/git-providers", + icon: GitBranch, + // Only enabled for admins and users with access to Git providers + isEnabled: ({ auth }) => + !!(auth?.role === "owner" || auth?.canAccessToGitProviders), + }, + { + isSingle: true, + title: "Registry", + url: "/dashboard/settings/registry", + icon: Package, + // Only enabled for admins + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, + { + isSingle: true, + title: "S3 Destinations", + url: "/dashboard/settings/destinations", + icon: Database, + // Only enabled for admins + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, - { - isSingle: true, - title: "Certificates", - url: "/dashboard/settings/certificates", - icon: ShieldCheck, - // Only enabled for admins - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, - { - isSingle: true, - title: "Cluster", - url: "/dashboard/settings/cluster", - icon: Boxes, - // Only enabled for admins in non-cloud environments - isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && !isCloud), - }, - { - isSingle: true, - title: "Notifications", - url: "/dashboard/settings/notifications", - icon: Bell, - // Only enabled for admins - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, - { - isSingle: true, - title: "Billing", - url: "/dashboard/settings/billing", - icon: CreditCard, - // Only enabled for admins in cloud environments - isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && isCloud), - }, - ], + { + isSingle: true, + title: "Certificates", + url: "/dashboard/settings/certificates", + icon: ShieldCheck, + // Only enabled for admins + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, + { + isSingle: true, + title: "Cluster", + url: "/dashboard/settings/cluster", + icon: Boxes, + // Only enabled for admins in non-cloud environments + isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && !isCloud), + }, + { + isSingle: true, + title: "Notifications", + url: "/dashboard/settings/notifications", + icon: Bell, + // Only enabled for admins + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, + { + isSingle: true, + title: "Billing", + url: "/dashboard/settings/billing", + icon: CreditCard, + // Only enabled for admins in cloud environments + isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && isCloud), + }, + ], - help: [ - { - name: "Documentation", - url: "https://docs.dokploy.com/docs/core", - icon: BookIcon, - }, - { - name: "Support", - url: "https://discord.gg/2tBnJ3jDJc", - icon: CircleHelp, - }, - { - name: "Sponsor", - url: "https://opencollective.com/dokploy", - icon: ({ className }) => ( - - ), - }, - ], + help: [ + { + name: "Documentation", + url: "https://docs.dokploy.com/docs/core", + icon: BookIcon, + }, + { + name: "Support", + url: "https://discord.gg/2tBnJ3jDJc", + icon: CircleHelp, + }, + { + name: "Sponsor", + url: "https://opencollective.com/dokploy", + icon: ({ className }) => ( + + ), + }, + ], } as const; /** @@ -393,41 +394,41 @@ const MENU: Menu = { * @returns a menu object with the home, settings, and help items */ function createMenuForAuthUser(opts: { - auth?: AuthQueryOutput; - isCloud: boolean; + auth?: AuthQueryOutput; + isCloud: boolean; }): Menu { - return { - // Filter the home items based on the user's role and permissions - // Calls the `isEnabled` function if it exists to determine if the item should be displayed - home: MENU.home.filter((item) => - !item.isEnabled - ? true - : item.isEnabled({ - auth: opts.auth, - isCloud: opts.isCloud, - }), - ), - // Filter the settings items based on the user's role and permissions - // Calls the `isEnabled` function if it exists to determine if the item should be displayed - settings: MENU.settings.filter((item) => - !item.isEnabled - ? true - : item.isEnabled({ - auth: opts.auth, - isCloud: opts.isCloud, - }), - ), - // Filter the help items based on the user's role and permissions - // Calls the `isEnabled` function if it exists to determine if the item should be displayed - help: MENU.help.filter((item) => - !item.isEnabled - ? true - : item.isEnabled({ - auth: opts.auth, - isCloud: opts.isCloud, - }), - ), - }; + return { + // Filter the home items based on the user's role and permissions + // Calls the `isEnabled` function if it exists to determine if the item should be displayed + home: MENU.home.filter((item) => + !item.isEnabled + ? true + : item.isEnabled({ + auth: opts.auth, + isCloud: opts.isCloud, + }) + ), + // Filter the settings items based on the user's role and permissions + // Calls the `isEnabled` function if it exists to determine if the item should be displayed + settings: MENU.settings.filter((item) => + !item.isEnabled + ? true + : item.isEnabled({ + auth: opts.auth, + isCloud: opts.isCloud, + }) + ), + // Filter the help items based on the user's role and permissions + // Calls the `isEnabled` function if it exists to determine if the item should be displayed + help: MENU.help.filter((item) => + !item.isEnabled + ? true + : item.isEnabled({ + auth: opts.auth, + isCloud: opts.isCloud, + }) + ), + }; } /** @@ -435,24 +436,24 @@ function createMenuForAuthUser(opts: { * @returns true if the item url is active, false otherwise */ function isActiveRoute(opts: { - /** The url of the item. Usually obtained from `item.url` */ - itemUrl: string; - /** The current pathname. Usually obtained from `usePathname()` */ - pathname: string; + /** The url of the item. Usually obtained from `item.url` */ + itemUrl: string; + /** The current pathname. Usually obtained from `usePathname()` */ + pathname: string; }): boolean { - const normalizedItemUrl = opts.itemUrl?.replace("/projects", "/project"); - const normalizedPathname = opts.pathname?.replace("/projects", "/project"); + const normalizedItemUrl = opts.itemUrl?.replace("/projects", "/project"); + const normalizedPathname = opts.pathname?.replace("/projects", "/project"); - if (!normalizedPathname) return false; + if (!normalizedPathname) return false; - if (normalizedPathname === normalizedItemUrl) return true; + if (normalizedPathname === normalizedItemUrl) return true; - if (normalizedPathname.startsWith(normalizedItemUrl)) { - const nextChar = normalizedPathname.charAt(normalizedItemUrl.length); - return nextChar === "/"; - } + if (normalizedPathname.startsWith(normalizedItemUrl)) { + const nextChar = normalizedPathname.charAt(normalizedItemUrl.length); + return nextChar === "/"; + } - return false; + return false; } /** @@ -460,614 +461,587 @@ function isActiveRoute(opts: { * @returns the active nav item with `SingleNavItem` type or undefined if none is active */ function findActiveNavItem( - navItems: NavItem[], - pathname: string, + navItems: NavItem[], + pathname: string ): SingleNavItem | undefined { - const found = navItems.find((item) => - item.isSingle !== false - ? // The current item is single, so check if the item url is active - isActiveRoute({ itemUrl: item.url, pathname }) - : // The current item is not single, so check if any of the sub items are active - item.items.some((item) => - isActiveRoute({ itemUrl: item.url, pathname }), - ), - ); + const found = navItems.find((item) => + item.isSingle !== false + ? // The current item is single, so check if the item url is active + isActiveRoute({ itemUrl: item.url, pathname }) + : // The current item is not single, so check if any of the sub items are active + item.items.some((item) => + isActiveRoute({ itemUrl: item.url, pathname }) + ) + ); - if (found?.isSingle !== false) { - // The found item is single, so return it - return found; - } + if (found?.isSingle !== false) { + // The found item is single, so return it + return found; + } - // The found item is not single, so find the active sub item - return found?.items.find((item) => - isActiveRoute({ itemUrl: item.url, pathname }), - ); + // The found item is not single, so find the active sub item + return found?.items.find((item) => + isActiveRoute({ itemUrl: item.url, pathname }) + ); } interface Props { - children: React.ReactNode; + children: React.ReactNode; } function LogoWrapper() { - return ; + return ; } function SidebarLogo() { - const { state } = useSidebar(); - const { data: isCloud } = api.settings.isCloud.useQuery(); - const { data: user } = api.user.get.useQuery(); - const { data: session } = authClient.useSession(); + const { state } = useSidebar(); + const { data: isCloud } = api.settings.isCloud.useQuery(); + const { data: user } = api.user.get.useQuery(); + const { data: session } = authClient.useSession(); - const { - data: organizations, - refetch, - isLoading, - } = api.organization.all.useQuery(); - const { mutateAsync: deleteOrganization, isLoading: isRemoving } = - api.organization.delete.useMutation(); - const { isMobile } = useSidebar(); - const { data: activeOrganization } = authClient.useActiveOrganization(); - const _utils = api.useUtils(); + const { + data: organizations, + refetch, + isLoading, + } = api.organization.all.useQuery(); + const { mutateAsync: deleteOrganization, isLoading: isRemoving } = + api.organization.delete.useMutation(); + const { isMobile } = useSidebar(); + const { data: activeOrganization } = authClient.useActiveOrganization(); + const _utils = api.useUtils(); - const { data: invitations, refetch: refetchInvitations } = - api.user.getInvitations.useQuery(); + const { data: invitations, refetch: refetchInvitations } = + api.user.getInvitations.useQuery(); - const [_activeTeam, setActiveTeam] = useState< - typeof activeOrganization | null - >(null); + const [_activeTeam, setActiveTeam] = useState< + typeof activeOrganization | null + >(null); - useEffect(() => { - if (activeOrganization) { - setActiveTeam(activeOrganization); - } - }, [activeOrganization]); + useEffect(() => { + if (activeOrganization) { + setActiveTeam(activeOrganization); + } + }, [activeOrganization]); - return ( - <> - {isLoading ? ( -
- -
- ) : ( - - {/* Organization Logo and Selector */} - - - - -
-
- -
-
-

- {activeOrganization?.name ?? "Select Organization"} -

-
-
- - - - - - Organizations - - {organizations?.map((org) => ( -
- { - await authClient.organization.setActive({ - organizationId: org.id, - }); - window.location.reload(); - }} - className="w-full gap-2 p-2" - > -
{org.name}
-
- -
- - {org.ownerId === session?.user?.id && ( -
- - { - await deleteOrganization({ - organizationId: org.id, - }) - .then(() => { - refetch(); - toast.success( - "Organization deleted successfully", - ); - }) - .catch((error) => { - toast.error( - error?.message || - "Error deleting organization", - ); - }); - }} - > - - -
- )} -
- ))} - {(user?.role === "owner" || isCloud) && ( - <> - - - - )} - - - + return ( + <> + {isLoading ? ( +
+ +
+ ) : ( + + {/* Organization Logo and Selector */} + + + + +
+
+ +
+
+

+ {activeOrganization?.name ?? "Select Organization"} +

+
+
+ + + + + + Organizations + + {organizations?.map((org) => ( +
+ { + await authClient.organization.setActive({ + organizationId: org.id, + }); + window.location.reload(); + }} + className="w-full gap-2 p-2"> +
{org.name}
+
+ +
+ + {org.ownerId === session?.user?.id && ( +
+ + { + await deleteOrganization({ + organizationId: org.id, + }) + .then(() => { + refetch(); + toast.success( + "Organization deleted successfully" + ); + }) + .catch((error) => { + toast.error( + error?.message || + "Error deleting organization" + ); + }); + }}> + + +
+ )} +
+ ))} + {(user?.role === "owner" || isCloud) && ( + <> + + + + )} + + + - {/* Notification Bell */} - - - - - - - Pending Invitations -
- {invitations && invitations.length > 0 ? ( - invitations.map((invitation) => ( -
- e.preventDefault()} - > -
- {invitation?.organization?.name} -
-
- Expires:{" "} - {new Date(invitation.expiresAt).toLocaleString()} -
-
- Role: {invitation.role} -
- - { - const { error } = - await authClient.organization.acceptInvitation({ - invitationId: invitation.id, - }); + {/* Notification Bell */} + + + + + + + Pending Invitations +
+ {invitations && invitations.length > 0 ? ( + invitations.map((invitation) => ( +
+ e.preventDefault()}> +
+ {invitation?.organization?.name} +
+
+ Expires:{" "} + {new Date(invitation.expiresAt).toLocaleString()} +
+
+ Role: {invitation.role} +
+ + { + const { error } = + await authClient.organization.acceptInvitation({ + invitationId: invitation.id, + }); - if (error) { - toast.error( - error.message || "Error accepting invitation", - ); - } else { - toast.success("Invitation accepted successfully"); - await refetchInvitations(); - await refetch(); - } - }} - > - - -
- )) - ) : ( - - No pending invitations - - )} -
- - - - - )} - - ); + if (error) { + toast.error( + error.message || "Error accepting invitation" + ); + } else { + toast.success("Invitation accepted successfully"); + await refetchInvitations(); + await refetch(); + } + }}> + + +
+ )) + ) : ( + + No pending invitations + + )} +
+ + + + + )} + + ); } export default function Page({ children }: Props) { - const [defaultOpen, setDefaultOpen] = useState( - undefined, - ); - const [isLoaded, setIsLoaded] = useState(false); + const [defaultOpen, setDefaultOpen] = useState( + undefined + ); + const [isLoaded, setIsLoaded] = useState(false); - useEffect(() => { - const cookieValue = document.cookie - .split("; ") - .find((row) => row.startsWith(`${SIDEBAR_COOKIE_NAME}=`)) - ?.split("=")[1]; + useEffect(() => { + const cookieValue = document.cookie + .split("; ") + .find((row) => row.startsWith(`${SIDEBAR_COOKIE_NAME}=`)) + ?.split("=")[1]; - setDefaultOpen(cookieValue === undefined ? true : cookieValue === "true"); - setIsLoaded(true); - }, []); + setDefaultOpen(cookieValue === undefined ? true : cookieValue === "true"); + setIsLoaded(true); + }, []); - const pathname = usePathname(); - const { data: auth } = api.user.get.useQuery(); - const { data: dokployVersion } = api.settings.getDokployVersion.useQuery(); + const pathname = usePathname(); + const { data: auth } = api.user.get.useQuery(); + const { data: dokployVersion } = api.settings.getDokployVersion.useQuery(); - const includesProjects = pathname?.includes("/dashboard/project"); - const { data: isCloud } = api.settings.isCloud.useQuery(); + const includesProjects = pathname?.includes("/dashboard/project"); + const { data: isCloud } = api.settings.isCloud.useQuery(); - const { - home: filteredHome, - settings: filteredSettings, - help, - } = createMenuForAuthUser({ auth, isCloud: !!isCloud }); + const { + home: filteredHome, + settings: filteredSettings, + help, + } = createMenuForAuthUser({ auth, isCloud: !!isCloud }); - const activeItem = findActiveNavItem( - [...filteredHome, ...filteredSettings], - pathname, - ); + const activeItem = findActiveNavItem( + [...filteredHome, ...filteredSettings], + pathname + ); - if (!isLoaded) { - return
; // Placeholder mientras se carga - } + if (!isLoaded) { + return
; // Placeholder mientras se carga + } - return ( - { - setDefaultOpen(open); + return ( + { + setDefaultOpen(open); - document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}`; - }} - style={ - { - "--sidebar-width": "19.5rem", - "--sidebar-width-mobile": "19.5rem", - } as React.CSSProperties - } - > - - - {/* + + + {/* */} - - {/* */} - - - - Home - - {filteredHome.map((item) => { - const isSingle = item.isSingle !== false; - const isActive = isSingle - ? isActiveRoute({ itemUrl: item.url, pathname }) - : item.items.some((item) => - isActiveRoute({ itemUrl: item.url, pathname }), - ); + + {/* */} + + + + Home + + {filteredHome.map((item) => { + const isSingle = item.isSingle !== false; + const isActive = isSingle + ? isActiveRoute({ itemUrl: item.url, pathname }) + : item.items.some((item) => + isActiveRoute({ itemUrl: item.url, pathname }) + ); - return ( - - - {isSingle ? ( - - - {item.icon && ( - - )} - {item.title} - - - ) : ( - <> - - - {item.icon && } + return ( + + + {isSingle ? ( + + + {item.icon && ( + + )} + {item.title} + + + ) : ( + <> + + + {item.icon && } - {item.title} - {item.items?.length && ( - - )} - - - - - {item.items?.map((subItem) => ( - - - - {subItem.icon && ( - - - - )} - {subItem.title} - - - - ))} - - - - )} - - - ); - })} - - - - Settings - - {filteredSettings.map((item) => { - const isSingle = item.isSingle !== false; - const isActive = isSingle - ? isActiveRoute({ itemUrl: item.url, pathname }) - : item.items.some((item) => - isActiveRoute({ itemUrl: item.url, pathname }), - ); + {item.title} + {item.items?.length && ( + + )} + + + + + {item.items?.map((subItem) => ( + + + + {subItem.icon && ( + + + + )} + {subItem.title} + + + + ))} + + + + )} + + + ); + })} + + + + Settings + + {filteredSettings.map((item) => { + const isSingle = item.isSingle !== false; + const isActive = isSingle + ? isActiveRoute({ itemUrl: item.url, pathname }) + : item.items.some((item) => + isActiveRoute({ itemUrl: item.url, pathname }) + ); - return ( - - - {isSingle ? ( - - - {item.icon && ( - - )} - {item.title} - - - ) : ( - <> - - - {item.icon && } + return ( + + + {isSingle ? ( + + + {item.icon && ( + + )} + {item.title} + + + ) : ( + <> + + + {item.icon && } - {item.title} - {item.items?.length && ( - - )} - - - - - {item.items?.map((subItem) => ( - - - - {subItem.icon && ( - - - - )} - {subItem.title} - - - - ))} - - - - )} - - - ); - })} - - - - Extra - - {help.map((item: ExternalLink) => ( - - - - - - - {item.name} - - - - ))} - - - - - - {!isCloud && auth?.role === "owner" && ( - - - - )} - - - - {dokployVersion && ( - <> -
- Version {dokployVersion} -
-
- {dokployVersion} -
- - )} - - - - - - {!includesProjects && ( -
-
-
- - - - - - - - {activeItem?.title} - - - - - -
-
-
- )} + {item.title} + {item.items?.length && ( + + )} + + + + + {item.items?.map((subItem) => ( + + + + {subItem.icon && ( + + + + )} + {subItem.title} + + + + ))} + + + + )} + + + ); + })} + + + + Extra + + {help.map((item: ExternalLink) => ( + + + + + + + {item.name} + + + + ))} + + + + + + {!isCloud && auth?.role === "owner" && ( + + + + )} + + + + {dokployVersion && ( + <> +
+ Version {dokployVersion} +
+
+ {dokployVersion} +
+ + )} + + + + + + {!includesProjects && ( +
+
+
+ + + + + + + + {activeItem?.title} + + + + + +
+ +
+
+ )} -
{children}
- - - ); +
{children}
+ + + ); } diff --git a/apps/dokploy/components/ui/time-badge.tsx b/apps/dokploy/components/ui/time-badge.tsx new file mode 100644 index 000000000..8d47297ea --- /dev/null +++ b/apps/dokploy/components/ui/time-badge.tsx @@ -0,0 +1,60 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { api } from "@/utils/api"; + +export function TimeBadge() { + const { data: serverTime } = api.server.getServerTime.useQuery(undefined, { + refetchInterval: 60000, // Refetch every 60 seconds + }); + const [time, setTime] = useState(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 ( +
+ Server Time: + + {time.toLocaleTimeString()} + + + ({serverTime.timezone} | {getUtcOffset(serverTime.timezone)}) + +
+ ); +} diff --git a/apps/dokploy/server/api/routers/server.ts b/apps/dokploy/server/api/routers/server.ts index d6904a7ec..4eb75bdf0 100644 --- a/apps/dokploy/server/api/routers/server.ts +++ b/apps/dokploy/server/api/routers/server.ts @@ -383,6 +383,12 @@ export const serverRouter = createTRPCRouter({ const ip = await getPublicIpWithFallback(); return ip; }), + getServerTime: protectedProcedure.query(() => { + return { + time: new Date(), + timezone: Intl.DateTimeFormat().resolvedOptions().timeZone, + }; + }), getServerMetrics: protectedProcedure .input( z.object({ From 53b66e41e2d2b37f676dfe345f92dec05fcd453f Mon Sep 17 00:00:00 2001 From: Aathil Felix Date: Sat, 1 Nov 2025 19:09:58 +0530 Subject: [PATCH 2/3] chore(ui): apply Biome format to time badge and headers --- .../components/dashboard/projects/show.tsx | 965 ++++----- apps/dokploy/components/layouts/side.tsx | 1868 +++++++++-------- apps/dokploy/components/ui/time-badge.tsx | 94 +- 3 files changed, 1485 insertions(+), 1442 deletions(-) diff --git a/apps/dokploy/components/dashboard/projects/show.tsx b/apps/dokploy/components/dashboard/projects/show.tsx index 8531e6b97..92f7ed5cb 100644 --- a/apps/dokploy/components/dashboard/projects/show.tsx +++ b/apps/dokploy/components/dashboard/projects/show.tsx @@ -1,13 +1,13 @@ import { - AlertTriangle, - ArrowUpDown, - BookIcon, - ExternalLinkIcon, - FolderInput, - Loader2, - MoreHorizontalIcon, - Search, - TrashIcon, + AlertTriangle, + ArrowUpDown, + BookIcon, + ExternalLinkIcon, + FolderInput, + Loader2, + MoreHorizontalIcon, + Search, + TrashIcon, } from "lucide-react"; import Link from "next/link"; import { useEffect, useMemo, useState } from "react"; @@ -16,41 +16,41 @@ import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar"; import { DateTooltip } from "@/components/shared/date-tooltip"; import { StatusTooltip } from "@/components/shared/status-tooltip"; import { - AlertDialog, - AlertDialogAction, - AlertDialogCancel, - AlertDialogContent, - AlertDialogDescription, - AlertDialogFooter, - AlertDialogHeader, - AlertDialogTitle, - AlertDialogTrigger, + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, } from "@/components/ui/card"; import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { FocusShortcutInput } from "@/components/shared/focus-shortcut-input"; import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, } from "@/components/ui/select"; import { api } from "@/utils/api"; import { HandleProject } from "./handle-project"; @@ -58,455 +58,470 @@ import { ProjectEnvironment } from "./project-environment"; import { TimeBadge } from "@/components/ui/time-badge"; export const ShowProjects = () => { - const utils = api.useUtils(); - const { data, isLoading } = api.project.all.useQuery(); - const { data: auth } = api.user.get.useQuery(); - const { mutateAsync } = api.project.remove.useMutation(); - const [searchQuery, setSearchQuery] = useState(""); - const [sortBy, setSortBy] = useState(() => { - if (typeof window !== "undefined") { - return localStorage.getItem("projectsSort") || "createdAt-desc"; - } - return "createdAt-desc"; - }); + const utils = api.useUtils(); + const { data, isLoading } = api.project.all.useQuery(); + const { data: auth } = api.user.get.useQuery(); + const { mutateAsync } = api.project.remove.useMutation(); + const [searchQuery, setSearchQuery] = useState(""); + const [sortBy, setSortBy] = useState(() => { + if (typeof window !== "undefined") { + return localStorage.getItem("projectsSort") || "createdAt-desc"; + } + return "createdAt-desc"; + }); - useEffect(() => { - localStorage.setItem("projectsSort", sortBy); - }, [sortBy]); + useEffect(() => { + localStorage.setItem("projectsSort", sortBy); + }, [sortBy]); - const filteredProjects = useMemo(() => { - if (!data) return []; + const filteredProjects = useMemo(() => { + if (!data) return []; - // First filter by search query - const filtered = data.filter( - (project) => - project.name.toLowerCase().includes(searchQuery.toLowerCase()) || - project.description?.toLowerCase().includes(searchQuery.toLowerCase()) - ); + // First filter by search query + const filtered = data.filter( + (project) => + project.name.toLowerCase().includes(searchQuery.toLowerCase()) || + project.description?.toLowerCase().includes(searchQuery.toLowerCase()), + ); - // Then sort the filtered results - const [field, direction] = sortBy.split("-"); - return [...filtered].sort((a, b) => { - let comparison = 0; - switch (field) { - case "name": - comparison = a.name.localeCompare(b.name); - break; - case "createdAt": - comparison = - new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(); - break; - case "services": { - const aTotalServices = a.environments.reduce((total, env) => { - return ( - total + - (env.applications?.length || 0) + - (env.mariadb?.length || 0) + - (env.mongo?.length || 0) + - (env.mysql?.length || 0) + - (env.postgres?.length || 0) + - (env.redis?.length || 0) + - (env.compose?.length || 0) - ); - }, 0); - const bTotalServices = b.environments.reduce((total, env) => { - return ( - total + - (env.applications?.length || 0) + - (env.mariadb?.length || 0) + - (env.mongo?.length || 0) + - (env.mysql?.length || 0) + - (env.postgres?.length || 0) + - (env.redis?.length || 0) + - (env.compose?.length || 0) - ); - }, 0); - comparison = aTotalServices - bTotalServices; - break; - } - default: - comparison = 0; - } - return direction === "asc" ? comparison : -comparison; - }); - }, [data, searchQuery, sortBy]); + // Then sort the filtered results + const [field, direction] = sortBy.split("-"); + return [...filtered].sort((a, b) => { + let comparison = 0; + switch (field) { + case "name": + comparison = a.name.localeCompare(b.name); + break; + case "createdAt": + comparison = + new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(); + break; + case "services": { + const aTotalServices = a.environments.reduce((total, env) => { + return ( + total + + (env.applications?.length || 0) + + (env.mariadb?.length || 0) + + (env.mongo?.length || 0) + + (env.mysql?.length || 0) + + (env.postgres?.length || 0) + + (env.redis?.length || 0) + + (env.compose?.length || 0) + ); + }, 0); + const bTotalServices = b.environments.reduce((total, env) => { + return ( + total + + (env.applications?.length || 0) + + (env.mariadb?.length || 0) + + (env.mongo?.length || 0) + + (env.mysql?.length || 0) + + (env.postgres?.length || 0) + + (env.redis?.length || 0) + + (env.compose?.length || 0) + ); + }, 0); + comparison = aTotalServices - bTotalServices; + break; + } + default: + comparison = 0; + } + return direction === "asc" ? comparison : -comparison; + }); + }, [data, searchQuery, sortBy]); - return ( - <> - -
- -
-
- -
-
- - - - Projects - - - Create and manage your projects - - - {(auth?.role === "owner" || auth?.canCreateProjects) && ( -
- -
- )} -
+ return ( + <> + +
+ +
+
+ +
+
+ + + + Projects + + + Create and manage your projects + + + {(auth?.role === "owner" || auth?.canCreateProjects) && ( +
+ +
+ )} +
- - {isLoading ? ( -
- Loading... - -
- ) : ( - <> -
-
- setSearchQuery(e.target.value)} - className="pr-10" - /> + + {isLoading ? ( +
+ Loading... + +
+ ) : ( + <> +
+
+ setSearchQuery(e.target.value)} + className="pr-10" + /> - -
-
- - -
-
- {filteredProjects?.length === 0 && ( -
- - - No projects found - -
- )} -
- {filteredProjects?.map((project) => { - const emptyServices = project?.environments - .map( - (env) => - env.applications.length === 0 && - env.mariadb.length === 0 && - env.mongo.length === 0 && - env.mysql.length === 0 && - env.postgres.length === 0 && - env.redis.length === 0 && - env.applications.length === 0 && - env.compose.length === 0 - ) - .every(Boolean); + +
+
+ + +
+
+ {filteredProjects?.length === 0 && ( +
+ + + No projects found + +
+ )} +
+ {filteredProjects?.map((project) => { + const emptyServices = project?.environments + .map( + (env) => + env.applications.length === 0 && + env.mariadb.length === 0 && + env.mongo.length === 0 && + env.mysql.length === 0 && + env.postgres.length === 0 && + env.redis.length === 0 && + env.applications.length === 0 && + env.compose.length === 0, + ) + .every(Boolean); - const totalServices = project?.environments - .map( - (env) => - env.mariadb.length + - env.mongo.length + - env.mysql.length + - env.postgres.length + - env.redis.length + - env.applications.length + - env.compose.length - ) - .reduce((acc, curr) => acc + curr, 0); + const totalServices = project?.environments + .map( + (env) => + env.mariadb.length + + env.mongo.length + + env.mysql.length + + env.postgres.length + + env.redis.length + + env.applications.length + + env.compose.length, + ) + .reduce((acc, curr) => acc + curr, 0); - const haveServicesWithDomains = project?.environments - .map( - (env) => - env.applications.length > 0 || - env.compose.length > 0 - ) - .some(Boolean); + const haveServicesWithDomains = project?.environments + .map( + (env) => + env.applications.length > 0 || + env.compose.length > 0, + ) + .some(Boolean); - return ( -
- - - {haveServicesWithDomains ? ( - - - - - e.stopPropagation()}> - {project.environments.some( - (env) => env.applications.length > 0 - ) && ( - - - Applications - - {project.environments.map((env) => - env.applications.map((app) => ( -
- - - - {app.name} - - - - {app.domains.map((domain) => ( - - - - {domain.host} - - - - - ))} - -
- )) - )} - - )} - {project.environments.some( - (env) => env.compose.length > 0 - ) && ( - - - Compose - - {project.environments.map((env) => - env.compose.map((comp) => ( -
- - - - {comp.name} - - - - {comp.domains.map((domain) => ( - - - - {domain.host} - - - - - ))} - -
- )) - )} - - )} - - - ) : null} - - - -
- - - {project.name} - -
+ return ( +
+ + + {haveServicesWithDomains ? ( + + + + + e.stopPropagation()} + > + {project.environments.some( + (env) => env.applications.length > 0, + ) && ( + + + Applications + + {project.environments.map((env) => + env.applications.map((app) => ( +
+ + + + {app.name} + + + + {app.domains.map((domain) => ( + + + + {domain.host} + + + + + ))} + +
+ )), + )} + + )} + {project.environments.some( + (env) => env.compose.length > 0, + ) && ( + + + Compose + + {project.environments.map((env) => + env.compose.map((comp) => ( +
+ + + + {comp.name} + + + + {comp.domains.map((domain) => ( + + + + {domain.host} + + + + + ))} + +
+ )), + )} + + )} + + + ) : null} + + + +
+ + + {project.name} + +
- - {project.description} - - -
- - - - - e.stopPropagation()}> - - Actions - -
e.stopPropagation()}> - -
-
e.stopPropagation()}> - -
+ + {project.description} + + +
+ + + + + e.stopPropagation()} + > + + Actions + +
e.stopPropagation()} + > + +
+
e.stopPropagation()} + > + +
-
e.stopPropagation()}> - {(auth?.role === "owner" || - auth?.canDeleteProjects) && ( - - - - e.preventDefault() - }> - - Delete - - - - - - Are you sure to delete this - project? - - {!emptyServices ? ( -
- - - You have active - services, please delete - them first - -
- ) : ( - - This action cannot be - undone - - )} - - - - Cancel - - { - await mutateAsync({ - projectId: - project.projectId, - }) - .then(() => { - toast.success( - "Project deleted successfully" - ); - }) - .catch(() => { - toast.error( - "Error deleting this project" - ); - }) - .finally(() => { - utils.project.all.invalidate(); - }); - }}> - Delete - - - - - )} -
- - -
- - - -
- - Created - - - {totalServices}{" "} - {totalServices === 1 - ? "service" - : "services"} - -
- - - -
- ); - })} -
- - )} - -
- -
- - ); +
e.stopPropagation()} + > + {(auth?.role === "owner" || + auth?.canDeleteProjects) && ( + + + + e.preventDefault() + } + > + + Delete + + + + + + Are you sure to delete this + project? + + {!emptyServices ? ( +
+ + + You have active + services, please delete + them first + +
+ ) : ( + + This action cannot be + undone + + )} + + + + Cancel + + { + await mutateAsync({ + projectId: + project.projectId, + }) + .then(() => { + toast.success( + "Project deleted successfully", + ); + }) + .catch(() => { + toast.error( + "Error deleting this project", + ); + }) + .finally(() => { + utils.project.all.invalidate(); + }); + }} + > + Delete + + + + + )} +
+ + +
+ + + +
+ + Created + + + {totalServices}{" "} + {totalServices === 1 + ? "service" + : "services"} + +
+ + + +
+ ); + })} +
+ + )} + +
+ +
+ + ); }; diff --git a/apps/dokploy/components/layouts/side.tsx b/apps/dokploy/components/layouts/side.tsx index 9833766f0..3dae77de6 100644 --- a/apps/dokploy/components/layouts/side.tsx +++ b/apps/dokploy/components/layouts/side.tsx @@ -1,78 +1,78 @@ "use client"; import type { inferRouterOutputs } from "@trpc/server"; import { - Activity, - BarChartHorizontalBigIcon, - Bell, - BlocksIcon, - BookIcon, - BotIcon, - Boxes, - ChevronRight, - ChevronsUpDown, - CircleHelp, - Clock, - CreditCard, - Database, - Folder, - Forward, - GalleryVerticalEnd, - GitBranch, - HeartIcon, - KeyRound, - Loader2, - type LucideIcon, - Package, - PieChart, - Server, - ShieldCheck, - Trash2, - User, - Users, + Activity, + BarChartHorizontalBigIcon, + Bell, + BlocksIcon, + BookIcon, + BotIcon, + Boxes, + ChevronRight, + ChevronsUpDown, + CircleHelp, + Clock, + CreditCard, + Database, + Folder, + Forward, + GalleryVerticalEnd, + GitBranch, + HeartIcon, + KeyRound, + Loader2, + type LucideIcon, + Package, + PieChart, + Server, + ShieldCheck, + Trash2, + User, + Users, } from "lucide-react"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { useEffect, useState } from "react"; import { toast } from "sonner"; import { - Breadcrumb, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbList, + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, } from "@/components/ui/breadcrumb"; import { - Collapsible, - CollapsibleContent, - CollapsibleTrigger, + Collapsible, + CollapsibleContent, + CollapsibleTrigger, } from "@/components/ui/collapsible"; import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Separator } from "@/components/ui/separator"; import { - SIDEBAR_COOKIE_NAME, - Sidebar, - SidebarContent, - SidebarFooter, - SidebarGroup, - SidebarGroupLabel, - SidebarHeader, - SidebarInset, - SidebarMenu, - SidebarMenuButton, - SidebarMenuItem, - SidebarMenuSub, - SidebarMenuSubButton, - SidebarMenuSubItem, - SidebarProvider, - SidebarRail, - SidebarTrigger, - useSidebar, + SIDEBAR_COOKIE_NAME, + Sidebar, + SidebarContent, + SidebarFooter, + SidebarGroup, + SidebarGroupLabel, + SidebarHeader, + SidebarInset, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, + SidebarProvider, + SidebarRail, + SidebarTrigger, + useSidebar, } from "@/components/ui/sidebar"; import { authClient } from "@/lib/auth-client"; import { cn } from "@/lib/utils"; @@ -90,11 +90,11 @@ import { UserNav } from "./user-nav"; type AuthQueryOutput = inferRouterOutputs["user"]["get"]; type SingleNavItem = { - isSingle?: true; - title: string; - url: string; - icon?: LucideIcon; - isEnabled?: (opts: { auth?: AuthQueryOutput; isCloud: boolean }) => boolean; + isSingle?: true; + title: string; + url: string; + icon?: LucideIcon; + isEnabled?: (opts: { auth?: AuthQueryOutput; isCloud: boolean }) => boolean; }; // NavItem type @@ -102,33 +102,33 @@ type SingleNavItem = { // If `isSingle` is true or undefined, the item is a single item // If `isSingle` is false, the item is a group of items type NavItem = - | SingleNavItem - | { - isSingle: false; - title: string; - icon: LucideIcon; - items: SingleNavItem[]; - isEnabled?: (opts: { - auth?: AuthQueryOutput; - isCloud: boolean; - }) => boolean; - }; + | SingleNavItem + | { + isSingle: false; + title: string; + icon: LucideIcon; + items: SingleNavItem[]; + isEnabled?: (opts: { + auth?: AuthQueryOutput; + isCloud: boolean; + }) => boolean; + }; // ExternalLink type // Represents an external link item (used for the help section) type ExternalLink = { - name: string; - url: string; - icon: React.ComponentType<{ className?: string }>; - isEnabled?: (opts: { auth?: AuthQueryOutput; isCloud: boolean }) => boolean; + name: string; + url: string; + icon: React.ComponentType<{ className?: string }>; + isEnabled?: (opts: { auth?: AuthQueryOutput; isCloud: boolean }) => boolean; }; // Menu type // Consists of home, settings, and help items type Menu = { - home: NavItem[]; - settings: NavItem[]; - help: ExternalLink[]; + home: NavItem[]; + settings: NavItem[]; + help: ExternalLink[]; }; // Menu items @@ -136,257 +136,257 @@ type Menu = { // The items are filtered based on the user's role and permissions // The `isEnabled` function is called to determine if the item should be displayed const MENU: Menu = { - home: [ - { - isSingle: true, - title: "Projects", - url: "/dashboard/projects", - icon: Folder, - }, - { - isSingle: true, - title: "Monitoring", - url: "/dashboard/monitoring", - icon: BarChartHorizontalBigIcon, - // Only enabled in non-cloud environments - isEnabled: ({ isCloud }) => !isCloud, - }, - { - isSingle: true, - title: "Schedules", - url: "/dashboard/schedules", - icon: Clock, - // Only enabled in non-cloud environments - isEnabled: ({ isCloud, auth }) => !isCloud && auth?.role === "owner", - }, - { - isSingle: true, - title: "Traefik File System", - url: "/dashboard/traefik", - icon: GalleryVerticalEnd, - // Only enabled for admins and users with access to Traefik files in non-cloud environments - isEnabled: ({ auth, isCloud }) => - !!( - (auth?.role === "owner" || auth?.canAccessToTraefikFiles) && - !isCloud - ), - }, - { - isSingle: true, - title: "Docker", - url: "/dashboard/docker", - icon: BlocksIcon, - // Only enabled for admins and users with access to Docker in non-cloud environments - isEnabled: ({ auth, isCloud }) => - !!((auth?.role === "owner" || auth?.canAccessToDocker) && !isCloud), - }, - { - isSingle: true, - title: "Swarm", - url: "/dashboard/swarm", - icon: PieChart, - // Only enabled for admins and users with access to Docker in non-cloud environments - isEnabled: ({ auth, isCloud }) => - !!((auth?.role === "owner" || auth?.canAccessToDocker) && !isCloud), - }, - { - isSingle: true, - title: "Requests", - url: "/dashboard/requests", - icon: Forward, - // Only enabled for admins and users with access to Docker in non-cloud environments - isEnabled: ({ auth, isCloud }) => - !!((auth?.role === "owner" || auth?.canAccessToDocker) && !isCloud), - }, + home: [ + { + isSingle: true, + title: "Projects", + url: "/dashboard/projects", + icon: Folder, + }, + { + isSingle: true, + title: "Monitoring", + url: "/dashboard/monitoring", + icon: BarChartHorizontalBigIcon, + // Only enabled in non-cloud environments + isEnabled: ({ isCloud }) => !isCloud, + }, + { + isSingle: true, + title: "Schedules", + url: "/dashboard/schedules", + icon: Clock, + // Only enabled in non-cloud environments + isEnabled: ({ isCloud, auth }) => !isCloud && auth?.role === "owner", + }, + { + isSingle: true, + title: "Traefik File System", + url: "/dashboard/traefik", + icon: GalleryVerticalEnd, + // Only enabled for admins and users with access to Traefik files in non-cloud environments + isEnabled: ({ auth, isCloud }) => + !!( + (auth?.role === "owner" || auth?.canAccessToTraefikFiles) && + !isCloud + ), + }, + { + isSingle: true, + title: "Docker", + url: "/dashboard/docker", + icon: BlocksIcon, + // Only enabled for admins and users with access to Docker in non-cloud environments + isEnabled: ({ auth, isCloud }) => + !!((auth?.role === "owner" || auth?.canAccessToDocker) && !isCloud), + }, + { + isSingle: true, + title: "Swarm", + url: "/dashboard/swarm", + icon: PieChart, + // Only enabled for admins and users with access to Docker in non-cloud environments + isEnabled: ({ auth, isCloud }) => + !!((auth?.role === "owner" || auth?.canAccessToDocker) && !isCloud), + }, + { + isSingle: true, + title: "Requests", + url: "/dashboard/requests", + icon: Forward, + // Only enabled for admins and users with access to Docker in non-cloud environments + isEnabled: ({ auth, isCloud }) => + !!((auth?.role === "owner" || auth?.canAccessToDocker) && !isCloud), + }, - // Legacy unused menu, adjusted to the new structure - // { - // isSingle: true, - // title: "Projects", - // url: "/dashboard/projects", - // icon: Folder, - // }, - // { - // isSingle: true, - // title: "Monitoring", - // icon: BarChartHorizontalBigIcon, - // url: "/dashboard/settings/monitoring", - // }, - // { - // isSingle: false, - // title: "Settings", - // icon: Settings2, - // items: [ - // { - // title: "Profile", - // url: "/dashboard/settings/profile", - // }, - // { - // title: "Users", - // url: "/dashboard/settings/users", - // }, - // { - // title: "SSH Key", - // url: "/dashboard/settings/ssh-keys", - // }, - // { - // title: "Git", - // url: "/dashboard/settings/git-providers", - // }, - // ], - // }, - // { - // isSingle: false, - // title: "Integrations", - // icon: BlocksIcon, - // items: [ - // { - // title: "S3 Destinations", - // url: "/dashboard/settings/destinations", - // }, - // { - // title: "Registry", - // url: "/dashboard/settings/registry", - // }, - // { - // title: "Notifications", - // url: "/dashboard/settings/notifications", - // }, - // ], - // }, - ], + // Legacy unused menu, adjusted to the new structure + // { + // isSingle: true, + // title: "Projects", + // url: "/dashboard/projects", + // icon: Folder, + // }, + // { + // isSingle: true, + // title: "Monitoring", + // icon: BarChartHorizontalBigIcon, + // url: "/dashboard/settings/monitoring", + // }, + // { + // isSingle: false, + // title: "Settings", + // icon: Settings2, + // items: [ + // { + // title: "Profile", + // url: "/dashboard/settings/profile", + // }, + // { + // title: "Users", + // url: "/dashboard/settings/users", + // }, + // { + // title: "SSH Key", + // url: "/dashboard/settings/ssh-keys", + // }, + // { + // title: "Git", + // url: "/dashboard/settings/git-providers", + // }, + // ], + // }, + // { + // isSingle: false, + // title: "Integrations", + // icon: BlocksIcon, + // items: [ + // { + // title: "S3 Destinations", + // url: "/dashboard/settings/destinations", + // }, + // { + // title: "Registry", + // url: "/dashboard/settings/registry", + // }, + // { + // title: "Notifications", + // url: "/dashboard/settings/notifications", + // }, + // ], + // }, + ], - settings: [ - { - isSingle: true, - title: "Web Server", - url: "/dashboard/settings/server", - icon: Activity, - // Only enabled for admins in non-cloud environments - isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && !isCloud), - }, - { - isSingle: true, - title: "Profile", - url: "/dashboard/settings/profile", - icon: User, - }, - { - isSingle: true, - title: "Remote Servers", - url: "/dashboard/settings/servers", - icon: Server, - // Only enabled for admins - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, - { - isSingle: true, - title: "Users", - icon: Users, - url: "/dashboard/settings/users", - // Only enabled for admins - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, - { - isSingle: true, - title: "SSH Keys", - icon: KeyRound, - url: "/dashboard/settings/ssh-keys", - // Only enabled for admins and users with access to SSH keys - isEnabled: ({ auth }) => - !!(auth?.role === "owner" || auth?.canAccessToSSHKeys), - }, - { - title: "AI", - icon: BotIcon, - url: "/dashboard/settings/ai", - isSingle: true, - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, - { - isSingle: true, - title: "Git", - url: "/dashboard/settings/git-providers", - icon: GitBranch, - // Only enabled for admins and users with access to Git providers - isEnabled: ({ auth }) => - !!(auth?.role === "owner" || auth?.canAccessToGitProviders), - }, - { - isSingle: true, - title: "Registry", - url: "/dashboard/settings/registry", - icon: Package, - // Only enabled for admins - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, - { - isSingle: true, - title: "S3 Destinations", - url: "/dashboard/settings/destinations", - icon: Database, - // Only enabled for admins - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, + settings: [ + { + isSingle: true, + title: "Web Server", + url: "/dashboard/settings/server", + icon: Activity, + // Only enabled for admins in non-cloud environments + isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && !isCloud), + }, + { + isSingle: true, + title: "Profile", + url: "/dashboard/settings/profile", + icon: User, + }, + { + isSingle: true, + title: "Remote Servers", + url: "/dashboard/settings/servers", + icon: Server, + // Only enabled for admins + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, + { + isSingle: true, + title: "Users", + icon: Users, + url: "/dashboard/settings/users", + // Only enabled for admins + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, + { + isSingle: true, + title: "SSH Keys", + icon: KeyRound, + url: "/dashboard/settings/ssh-keys", + // Only enabled for admins and users with access to SSH keys + isEnabled: ({ auth }) => + !!(auth?.role === "owner" || auth?.canAccessToSSHKeys), + }, + { + title: "AI", + icon: BotIcon, + url: "/dashboard/settings/ai", + isSingle: true, + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, + { + isSingle: true, + title: "Git", + url: "/dashboard/settings/git-providers", + icon: GitBranch, + // Only enabled for admins and users with access to Git providers + isEnabled: ({ auth }) => + !!(auth?.role === "owner" || auth?.canAccessToGitProviders), + }, + { + isSingle: true, + title: "Registry", + url: "/dashboard/settings/registry", + icon: Package, + // Only enabled for admins + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, + { + isSingle: true, + title: "S3 Destinations", + url: "/dashboard/settings/destinations", + icon: Database, + // Only enabled for admins + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, - { - isSingle: true, - title: "Certificates", - url: "/dashboard/settings/certificates", - icon: ShieldCheck, - // Only enabled for admins - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, - { - isSingle: true, - title: "Cluster", - url: "/dashboard/settings/cluster", - icon: Boxes, - // Only enabled for admins in non-cloud environments - isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && !isCloud), - }, - { - isSingle: true, - title: "Notifications", - url: "/dashboard/settings/notifications", - icon: Bell, - // Only enabled for admins - isEnabled: ({ auth }) => !!(auth?.role === "owner"), - }, - { - isSingle: true, - title: "Billing", - url: "/dashboard/settings/billing", - icon: CreditCard, - // Only enabled for admins in cloud environments - isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && isCloud), - }, - ], + { + isSingle: true, + title: "Certificates", + url: "/dashboard/settings/certificates", + icon: ShieldCheck, + // Only enabled for admins + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, + { + isSingle: true, + title: "Cluster", + url: "/dashboard/settings/cluster", + icon: Boxes, + // Only enabled for admins in non-cloud environments + isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && !isCloud), + }, + { + isSingle: true, + title: "Notifications", + url: "/dashboard/settings/notifications", + icon: Bell, + // Only enabled for admins + isEnabled: ({ auth }) => !!(auth?.role === "owner"), + }, + { + isSingle: true, + title: "Billing", + url: "/dashboard/settings/billing", + icon: CreditCard, + // Only enabled for admins in cloud environments + isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && isCloud), + }, + ], - help: [ - { - name: "Documentation", - url: "https://docs.dokploy.com/docs/core", - icon: BookIcon, - }, - { - name: "Support", - url: "https://discord.gg/2tBnJ3jDJc", - icon: CircleHelp, - }, - { - name: "Sponsor", - url: "https://opencollective.com/dokploy", - icon: ({ className }) => ( - - ), - }, - ], + help: [ + { + name: "Documentation", + url: "https://docs.dokploy.com/docs/core", + icon: BookIcon, + }, + { + name: "Support", + url: "https://discord.gg/2tBnJ3jDJc", + icon: CircleHelp, + }, + { + name: "Sponsor", + url: "https://opencollective.com/dokploy", + icon: ({ className }) => ( + + ), + }, + ], } as const; /** @@ -394,41 +394,41 @@ const MENU: Menu = { * @returns a menu object with the home, settings, and help items */ function createMenuForAuthUser(opts: { - auth?: AuthQueryOutput; - isCloud: boolean; + auth?: AuthQueryOutput; + isCloud: boolean; }): Menu { - return { - // Filter the home items based on the user's role and permissions - // Calls the `isEnabled` function if it exists to determine if the item should be displayed - home: MENU.home.filter((item) => - !item.isEnabled - ? true - : item.isEnabled({ - auth: opts.auth, - isCloud: opts.isCloud, - }) - ), - // Filter the settings items based on the user's role and permissions - // Calls the `isEnabled` function if it exists to determine if the item should be displayed - settings: MENU.settings.filter((item) => - !item.isEnabled - ? true - : item.isEnabled({ - auth: opts.auth, - isCloud: opts.isCloud, - }) - ), - // Filter the help items based on the user's role and permissions - // Calls the `isEnabled` function if it exists to determine if the item should be displayed - help: MENU.help.filter((item) => - !item.isEnabled - ? true - : item.isEnabled({ - auth: opts.auth, - isCloud: opts.isCloud, - }) - ), - }; + return { + // Filter the home items based on the user's role and permissions + // Calls the `isEnabled` function if it exists to determine if the item should be displayed + home: MENU.home.filter((item) => + !item.isEnabled + ? true + : item.isEnabled({ + auth: opts.auth, + isCloud: opts.isCloud, + }), + ), + // Filter the settings items based on the user's role and permissions + // Calls the `isEnabled` function if it exists to determine if the item should be displayed + settings: MENU.settings.filter((item) => + !item.isEnabled + ? true + : item.isEnabled({ + auth: opts.auth, + isCloud: opts.isCloud, + }), + ), + // Filter the help items based on the user's role and permissions + // Calls the `isEnabled` function if it exists to determine if the item should be displayed + help: MENU.help.filter((item) => + !item.isEnabled + ? true + : item.isEnabled({ + auth: opts.auth, + isCloud: opts.isCloud, + }), + ), + }; } /** @@ -436,24 +436,24 @@ function createMenuForAuthUser(opts: { * @returns true if the item url is active, false otherwise */ function isActiveRoute(opts: { - /** The url of the item. Usually obtained from `item.url` */ - itemUrl: string; - /** The current pathname. Usually obtained from `usePathname()` */ - pathname: string; + /** The url of the item. Usually obtained from `item.url` */ + itemUrl: string; + /** The current pathname. Usually obtained from `usePathname()` */ + pathname: string; }): boolean { - const normalizedItemUrl = opts.itemUrl?.replace("/projects", "/project"); - const normalizedPathname = opts.pathname?.replace("/projects", "/project"); + const normalizedItemUrl = opts.itemUrl?.replace("/projects", "/project"); + const normalizedPathname = opts.pathname?.replace("/projects", "/project"); - if (!normalizedPathname) return false; + if (!normalizedPathname) return false; - if (normalizedPathname === normalizedItemUrl) return true; + if (normalizedPathname === normalizedItemUrl) return true; - if (normalizedPathname.startsWith(normalizedItemUrl)) { - const nextChar = normalizedPathname.charAt(normalizedItemUrl.length); - return nextChar === "/"; - } + if (normalizedPathname.startsWith(normalizedItemUrl)) { + const nextChar = normalizedPathname.charAt(normalizedItemUrl.length); + return nextChar === "/"; + } - return false; + return false; } /** @@ -461,587 +461,615 @@ function isActiveRoute(opts: { * @returns the active nav item with `SingleNavItem` type or undefined if none is active */ function findActiveNavItem( - navItems: NavItem[], - pathname: string + navItems: NavItem[], + pathname: string, ): SingleNavItem | undefined { - const found = navItems.find((item) => - item.isSingle !== false - ? // The current item is single, so check if the item url is active - isActiveRoute({ itemUrl: item.url, pathname }) - : // The current item is not single, so check if any of the sub items are active - item.items.some((item) => - isActiveRoute({ itemUrl: item.url, pathname }) - ) - ); + const found = navItems.find((item) => + item.isSingle !== false + ? // The current item is single, so check if the item url is active + isActiveRoute({ itemUrl: item.url, pathname }) + : // The current item is not single, so check if any of the sub items are active + item.items.some((item) => + isActiveRoute({ itemUrl: item.url, pathname }), + ), + ); - if (found?.isSingle !== false) { - // The found item is single, so return it - return found; - } + if (found?.isSingle !== false) { + // The found item is single, so return it + return found; + } - // The found item is not single, so find the active sub item - return found?.items.find((item) => - isActiveRoute({ itemUrl: item.url, pathname }) - ); + // The found item is not single, so find the active sub item + return found?.items.find((item) => + isActiveRoute({ itemUrl: item.url, pathname }), + ); } interface Props { - children: React.ReactNode; + children: React.ReactNode; } function LogoWrapper() { - return ; + return ; } function SidebarLogo() { - const { state } = useSidebar(); - const { data: isCloud } = api.settings.isCloud.useQuery(); - const { data: user } = api.user.get.useQuery(); - const { data: session } = authClient.useSession(); + const { state } = useSidebar(); + const { data: isCloud } = api.settings.isCloud.useQuery(); + const { data: user } = api.user.get.useQuery(); + const { data: session } = authClient.useSession(); - const { - data: organizations, - refetch, - isLoading, - } = api.organization.all.useQuery(); - const { mutateAsync: deleteOrganization, isLoading: isRemoving } = - api.organization.delete.useMutation(); - const { isMobile } = useSidebar(); - const { data: activeOrganization } = authClient.useActiveOrganization(); - const _utils = api.useUtils(); + const { + data: organizations, + refetch, + isLoading, + } = api.organization.all.useQuery(); + const { mutateAsync: deleteOrganization, isLoading: isRemoving } = + api.organization.delete.useMutation(); + const { isMobile } = useSidebar(); + const { data: activeOrganization } = authClient.useActiveOrganization(); + const _utils = api.useUtils(); - const { data: invitations, refetch: refetchInvitations } = - api.user.getInvitations.useQuery(); + const { data: invitations, refetch: refetchInvitations } = + api.user.getInvitations.useQuery(); - const [_activeTeam, setActiveTeam] = useState< - typeof activeOrganization | null - >(null); + const [_activeTeam, setActiveTeam] = useState< + typeof activeOrganization | null + >(null); - useEffect(() => { - if (activeOrganization) { - setActiveTeam(activeOrganization); - } - }, [activeOrganization]); + useEffect(() => { + if (activeOrganization) { + setActiveTeam(activeOrganization); + } + }, [activeOrganization]); - return ( - <> - {isLoading ? ( -
- -
- ) : ( - - {/* Organization Logo and Selector */} - - - - -
-
- -
-
-

- {activeOrganization?.name ?? "Select Organization"} -

-
-
- - - - - - Organizations - - {organizations?.map((org) => ( -
- { - await authClient.organization.setActive({ - organizationId: org.id, - }); - window.location.reload(); - }} - className="w-full gap-2 p-2"> -
{org.name}
-
- -
- - {org.ownerId === session?.user?.id && ( -
- - { - await deleteOrganization({ - organizationId: org.id, - }) - .then(() => { - refetch(); - toast.success( - "Organization deleted successfully" - ); - }) - .catch((error) => { - toast.error( - error?.message || - "Error deleting organization" - ); - }); - }}> - - -
- )} -
- ))} - {(user?.role === "owner" || isCloud) && ( - <> - - - - )} - - - + return ( + <> + {isLoading ? ( +
+ +
+ ) : ( + + {/* Organization Logo and Selector */} + + + + +
+
+ +
+
+

+ {activeOrganization?.name ?? "Select Organization"} +

+
+
+ + + + + + Organizations + + {organizations?.map((org) => ( +
+ { + await authClient.organization.setActive({ + organizationId: org.id, + }); + window.location.reload(); + }} + className="w-full gap-2 p-2" + > +
{org.name}
+
+ +
+ + {org.ownerId === session?.user?.id && ( +
+ + { + await deleteOrganization({ + organizationId: org.id, + }) + .then(() => { + refetch(); + toast.success( + "Organization deleted successfully", + ); + }) + .catch((error) => { + toast.error( + error?.message || + "Error deleting organization", + ); + }); + }} + > + + +
+ )} +
+ ))} + {(user?.role === "owner" || isCloud) && ( + <> + + + + )} + + + - {/* Notification Bell */} - - - - - - - Pending Invitations -
- {invitations && invitations.length > 0 ? ( - invitations.map((invitation) => ( -
- e.preventDefault()}> -
- {invitation?.organization?.name} -
-
- Expires:{" "} - {new Date(invitation.expiresAt).toLocaleString()} -
-
- Role: {invitation.role} -
- - { - const { error } = - await authClient.organization.acceptInvitation({ - invitationId: invitation.id, - }); + {/* Notification Bell */} + + + + + + + Pending Invitations +
+ {invitations && invitations.length > 0 ? ( + invitations.map((invitation) => ( +
+ e.preventDefault()} + > +
+ {invitation?.organization?.name} +
+
+ Expires:{" "} + {new Date(invitation.expiresAt).toLocaleString()} +
+
+ Role: {invitation.role} +
+ + { + const { error } = + await authClient.organization.acceptInvitation({ + invitationId: invitation.id, + }); - if (error) { - toast.error( - error.message || "Error accepting invitation" - ); - } else { - toast.success("Invitation accepted successfully"); - await refetchInvitations(); - await refetch(); - } - }}> - - -
- )) - ) : ( - - No pending invitations - - )} -
- - - - - )} - - ); + if (error) { + toast.error( + error.message || "Error accepting invitation", + ); + } else { + toast.success("Invitation accepted successfully"); + await refetchInvitations(); + await refetch(); + } + }} + > + + +
+ )) + ) : ( + + No pending invitations + + )} +
+ + + + + )} + + ); } export default function Page({ children }: Props) { - const [defaultOpen, setDefaultOpen] = useState( - undefined - ); - const [isLoaded, setIsLoaded] = useState(false); + const [defaultOpen, setDefaultOpen] = useState( + undefined, + ); + const [isLoaded, setIsLoaded] = useState(false); - useEffect(() => { - const cookieValue = document.cookie - .split("; ") - .find((row) => row.startsWith(`${SIDEBAR_COOKIE_NAME}=`)) - ?.split("=")[1]; + useEffect(() => { + const cookieValue = document.cookie + .split("; ") + .find((row) => row.startsWith(`${SIDEBAR_COOKIE_NAME}=`)) + ?.split("=")[1]; - setDefaultOpen(cookieValue === undefined ? true : cookieValue === "true"); - setIsLoaded(true); - }, []); + setDefaultOpen(cookieValue === undefined ? true : cookieValue === "true"); + setIsLoaded(true); + }, []); - const pathname = usePathname(); - const { data: auth } = api.user.get.useQuery(); - const { data: dokployVersion } = api.settings.getDokployVersion.useQuery(); + const pathname = usePathname(); + const { data: auth } = api.user.get.useQuery(); + const { data: dokployVersion } = api.settings.getDokployVersion.useQuery(); - const includesProjects = pathname?.includes("/dashboard/project"); - const { data: isCloud } = api.settings.isCloud.useQuery(); + const includesProjects = pathname?.includes("/dashboard/project"); + const { data: isCloud } = api.settings.isCloud.useQuery(); - const { - home: filteredHome, - settings: filteredSettings, - help, - } = createMenuForAuthUser({ auth, isCloud: !!isCloud }); + const { + home: filteredHome, + settings: filteredSettings, + help, + } = createMenuForAuthUser({ auth, isCloud: !!isCloud }); - const activeItem = findActiveNavItem( - [...filteredHome, ...filteredSettings], - pathname - ); + const activeItem = findActiveNavItem( + [...filteredHome, ...filteredSettings], + pathname, + ); - if (!isLoaded) { - return
; // Placeholder mientras se carga - } + if (!isLoaded) { + return
; // Placeholder mientras se carga + } - return ( - { - setDefaultOpen(open); + return ( + { + setDefaultOpen(open); - document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}`; - }} - style={ - { - "--sidebar-width": "19.5rem", - "--sidebar-width-mobile": "19.5rem", - } as React.CSSProperties - }> - - - {/* + + + {/* */} - - {/* */} - - - - Home - - {filteredHome.map((item) => { - const isSingle = item.isSingle !== false; - const isActive = isSingle - ? isActiveRoute({ itemUrl: item.url, pathname }) - : item.items.some((item) => - isActiveRoute({ itemUrl: item.url, pathname }) - ); + + {/* */} + + + + Home + + {filteredHome.map((item) => { + const isSingle = item.isSingle !== false; + const isActive = isSingle + ? isActiveRoute({ itemUrl: item.url, pathname }) + : item.items.some((item) => + isActiveRoute({ itemUrl: item.url, pathname }), + ); - return ( - - - {isSingle ? ( - - - {item.icon && ( - - )} - {item.title} - - - ) : ( - <> - - - {item.icon && } + return ( + + + {isSingle ? ( + + + {item.icon && ( + + )} + {item.title} + + + ) : ( + <> + + + {item.icon && } - {item.title} - {item.items?.length && ( - - )} - - - - - {item.items?.map((subItem) => ( - - - - {subItem.icon && ( - - - - )} - {subItem.title} - - - - ))} - - - - )} - - - ); - })} - - - - Settings - - {filteredSettings.map((item) => { - const isSingle = item.isSingle !== false; - const isActive = isSingle - ? isActiveRoute({ itemUrl: item.url, pathname }) - : item.items.some((item) => - isActiveRoute({ itemUrl: item.url, pathname }) - ); + {item.title} + {item.items?.length && ( + + )} + + + + + {item.items?.map((subItem) => ( + + + + {subItem.icon && ( + + + + )} + {subItem.title} + + + + ))} + + + + )} + + + ); + })} + + + + Settings + + {filteredSettings.map((item) => { + const isSingle = item.isSingle !== false; + const isActive = isSingle + ? isActiveRoute({ itemUrl: item.url, pathname }) + : item.items.some((item) => + isActiveRoute({ itemUrl: item.url, pathname }), + ); - return ( - - - {isSingle ? ( - - - {item.icon && ( - - )} - {item.title} - - - ) : ( - <> - - - {item.icon && } + return ( + + + {isSingle ? ( + + + {item.icon && ( + + )} + {item.title} + + + ) : ( + <> + + + {item.icon && } - {item.title} - {item.items?.length && ( - - )} - - - - - {item.items?.map((subItem) => ( - - - - {subItem.icon && ( - - - - )} - {subItem.title} - - - - ))} - - - - )} - - - ); - })} - - - - Extra - - {help.map((item: ExternalLink) => ( - - - - - - - {item.name} - - - - ))} - - - - - - {!isCloud && auth?.role === "owner" && ( - - - - )} - - - - {dokployVersion && ( - <> -
- Version {dokployVersion} -
-
- {dokployVersion} -
- - )} - - - - - - {!includesProjects && ( -
-
-
- - - - - - - - {activeItem?.title} - - - - - -
- -
-
- )} + {item.title} + {item.items?.length && ( + + )} + + + + + {item.items?.map((subItem) => ( + + + + {subItem.icon && ( + + + + )} + {subItem.title} + + + + ))} + + + + )} + + + ); + })} + + + + Extra + + {help.map((item: ExternalLink) => ( + + + + + + + {item.name} + + + + ))} + + + + + + {!isCloud && auth?.role === "owner" && ( + + + + )} + + + + {dokployVersion && ( + <> +
+ Version {dokployVersion} +
+
+ {dokployVersion} +
+ + )} + + + + + + {!includesProjects && ( +
+
+
+ + + + + + + + {activeItem?.title} + + + + + +
+ +
+
+ )} -
{children}
- - - ); +
{children}
+ + + ); } diff --git a/apps/dokploy/components/ui/time-badge.tsx b/apps/dokploy/components/ui/time-badge.tsx index 8d47297ea..b409bf703 100644 --- a/apps/dokploy/components/ui/time-badge.tsx +++ b/apps/dokploy/components/ui/time-badge.tsx @@ -4,57 +4,57 @@ import { useEffect, useState } from "react"; import { api } from "@/utils/api"; export function TimeBadge() { - const { data: serverTime } = api.server.getServerTime.useQuery(undefined, { - refetchInterval: 60000, // Refetch every 60 seconds - }); - const [time, setTime] = useState(null); + const { data: serverTime } = api.server.getServerTime.useQuery(undefined, { + refetchInterval: 60000, // Refetch every 60 seconds + }); + const [time, setTime] = useState(null); - useEffect(() => { - if (serverTime?.time) { - setTime(new Date(serverTime.time)); - } - }, [serverTime]); + 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); + useEffect(() => { + const timer = setInterval(() => { + setTime((prevTime) => { + if (!prevTime) return null; + const newTime = new Date(prevTime.getTime() + 1000); + return newTime; + }); + }, 1000); - return () => { - clearInterval(timer); - }; - }, []); + return () => { + clearInterval(timer); + }; + }, []); - if (!time || !serverTime?.timezone) { - return null; - } + 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")}`; - }; + 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 ( -
- Server Time: - - {time.toLocaleTimeString()} - - - ({serverTime.timezone} | {getUtcOffset(serverTime.timezone)}) - -
- ); + return ( +
+ Server Time: + + {time.toLocaleTimeString()} + + + ({serverTime.timezone} | {getUtcOffset(serverTime.timezone)}) + +
+ ); } From 1581defc3993641e549180f06ccad121f3b3204a Mon Sep 17 00:00:00 2001 From: Mauricio Siu Date: Sun, 16 Nov 2025 21:32:23 -0600 Subject: [PATCH 3/3] feat: conditionally render TimeBadge based on cloud status - Updated the ShowProjects and side layout components to only display the TimeBadge when not in cloud mode. - Modified the TimeBadge component to remove the refetch interval for server time when in cloud mode, returning null instead. - Enhanced the server API to return null for server time in cloud environments, improving performance and avoiding unnecessary queries. --- apps/dokploy/components/dashboard/projects/show.tsx | 13 ++++++++----- apps/dokploy/components/layouts/side.tsx | 2 +- apps/dokploy/components/ui/time-badge.tsx | 4 +--- apps/dokploy/server/api/routers/server.ts | 3 +++ 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/apps/dokploy/components/dashboard/projects/show.tsx b/apps/dokploy/components/dashboard/projects/show.tsx index 92f7ed5cb..5369a544e 100644 --- a/apps/dokploy/components/dashboard/projects/show.tsx +++ b/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,7 +45,6 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; -import { FocusShortcutInput } from "@/components/shared/focus-shortcut-input"; import { Select, SelectContent, @@ -52,13 +52,14 @@ import { 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"; -import { TimeBadge } from "@/components/ui/time-badge"; 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(); @@ -136,9 +137,11 @@ export const ShowProjects = () => { -
- -
+ {!isCloud && ( +
+ +
+ )}
diff --git a/apps/dokploy/components/layouts/side.tsx b/apps/dokploy/components/layouts/side.tsx index 01df80f18..7473fe586 100644 --- a/apps/dokploy/components/layouts/side.tsx +++ b/apps/dokploy/components/layouts/side.tsx @@ -1126,7 +1126,7 @@ export default function Page({ children }: Props) {
- + {!isCloud && }
)} diff --git a/apps/dokploy/components/ui/time-badge.tsx b/apps/dokploy/components/ui/time-badge.tsx index b409bf703..ea7f1f84e 100644 --- a/apps/dokploy/components/ui/time-badge.tsx +++ b/apps/dokploy/components/ui/time-badge.tsx @@ -4,9 +4,7 @@ import { useEffect, useState } from "react"; import { api } from "@/utils/api"; export function TimeBadge() { - const { data: serverTime } = api.server.getServerTime.useQuery(undefined, { - refetchInterval: 60000, // Refetch every 60 seconds - }); + const { data: serverTime } = api.server.getServerTime.useQuery(undefined); const [time, setTime] = useState(null); useEffect(() => { diff --git a/apps/dokploy/server/api/routers/server.ts b/apps/dokploy/server/api/routers/server.ts index 4eb75bdf0..8a01228f8 100644 --- a/apps/dokploy/server/api/routers/server.ts +++ b/apps/dokploy/server/api/routers/server.ts @@ -384,6 +384,9 @@ export const serverRouter = createTRPCRouter({ return ip; }), getServerTime: protectedProcedure.query(() => { + if (IS_CLOUD) { + return null; + } return { time: new Date(), timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,