Skip to content

ui: dashboard redesign #4117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
190km wants to merge 39 commits into
base: canary
Choose a base branch
from
Open

ui: dashboard redesign #4117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
ec8160b
update design tokens and tailwind config
190km Mar 31, 2026
4c36a75
restyle button, input, and card components
190km Mar 31, 2026
2aacd8d
restyle badge, dialog, sheet, alert-dialog
190km Mar 31, 2026
442b55b
restyle table, tabs, tooltip, select, textarea
190km Mar 31, 2026
0735301
restyle checkbox, switch, radio, popover, dropdown, progress, sidebar
190km Mar 31, 2026
c1700f8
add colorpicker and input-group components
190km Mar 31, 2026
d66da4c
simplify time badge
190km Mar 31, 2026
d0b41d1
add notification bell component for header
190km Mar 31, 2026
dff2527
update dashboard layout, sidebar, and header
190km Mar 31, 2026
c76b5c3
add compact mode and chevrons to user nav
190km Mar 31, 2026
f126c34
restyle breadcrumb headers with slash separators
190km Mar 31, 2026
dd860f5
update tag filter popover with create tag button
190km Mar 31, 2026
f583eac
clean up projects page layout
190km Mar 31, 2026
323f82e
restyle deployments page with search bar
190km Mar 31, 2026
ea219d7
restyle monitoring page and sub-components
190km Mar 31, 2026
ceb0ddc
restyle schedules, docker, traefik, swarm, requests pages
190km Mar 31, 2026
a2168b6
restyle all settings pages
190km Mar 31, 2026
9477a52
restyle environment and service pages
190km Mar 31, 2026
46c3c00
add collapsible filter panel to log viewers
190km Mar 31, 2026
1654e57
add filter panel to audit logs
190km Mar 31, 2026
67d560b
misc style fixes across dashboard
190km Mar 31, 2026
41bf198
chore: biome lint fixes
190km Mar 31, 2026
fe48491
fix users page: move buttons next to titles, remove border-t, consist…
190km Mar 31, 2026
569a795
add tabs to users page (users, invitations, roles)
190km Mar 31, 2026
b7e4050
make users tabs layout consistent across all three tabs
190km Mar 31, 2026
61f5414
fix missing closing divs in users and invitations components
190km Mar 31, 2026
74d2535
fix broken div nesting in users components
190km Mar 31, 2026
bb9180a
move action buttons to page header, change based on active tab
190km Mar 31, 2026
c8a547d
center action button next to title like projects page
190km Mar 31, 2026
aa5a54a
show create role button in header when roles tab is active
190km Mar 31, 2026
254ae85
match create role button style to add invitation
190km Mar 31, 2026
9869c7e
reorder settings sidebar items by category
190km Mar 31, 2026
bd24524
add settings category labels in sidebar (account, infrastructure, int…
190km Mar 31, 2026
d7911aa
Revert "add settings category labels in sidebar (account, infrastruct…
190km Mar 31, 2026
1c98301
restore original settings order in sidebar
190km Mar 31, 2026
b89c7a0
[autofix.ci] apply automated fixes
autofix-ci[bot] Mar 31, 2026
f3c97c1
fix typecheck and lint errors in docker logs, notification bell, and …
190km Mar 31, 2026
79c0383
restyle deploy settings, domain cards, switch component and hide crea…
190km Mar 31, 2026
e20fc0f
[autofix.ci] apply automated fixes
autofix-ci[bot] Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/dokploy/__test__/permissions/enterprise-only-resources.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { describe, it, expect } from "vitest";
import {
enterpriseOnlyResources,
statements,
} from "@dokploy/server/lib/access-control";
import { describe, expect, it } from "vitest";

const FREE_TIER_RESOURCES = [
"organization",
Expand Down
4 changes: 2 additions & 2 deletions apps/dokploy/components/dashboard/application/advanced/import/show-import.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export const ShowImport = ({ composeId }: Props) => {
<Dialog open={showModal} onOpenChange={setShowModal}>
<DialogContent className="max-w-[50vw]">
<DialogHeader>
<DialogTitle className="text-2xl font-bold">
<DialogTitle className="text-2xl font-semibold">
Template Information
</DialogTitle>
<DialogDescription className="space-y-2">
Expand Down Expand Up @@ -322,7 +322,7 @@ export const ShowImport = ({ composeId }: Props) => {
<Dialog open={showMountContent} onOpenChange={setShowMountContent}>
<DialogContent className="max-w-[50vw]">
<DialogHeader>
<DialogTitle className="text-xl font-bold">
<DialogTitle className="text-base font-medium">
{selectedMount?.filePath}
</DialogTitle>
<DialogDescription>Mount File Content</DialogDescription>
Expand Down
2 changes: 1 addition & 1 deletion apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ export const AddVolumes = ({

return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger className="" asChild>
<DialogTrigger asChild>
<Button>{children}</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-3xl">
Expand Down
2 changes: 1 addition & 1 deletion apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import copy from "copy-to-clipboard";
import {
ChevronDown,
ChevronUp,
Expand All @@ -11,7 +12,6 @@ import {
} from "lucide-react";
import React, { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import copy from "copy-to-clipboard";
import { AlertBlock } from "@/components/shared/alert-block";
import { DateTooltip } from "@/components/shared/date-tooltip";
import { DialogAction } from "@/components/shared/dialog-action";
Expand Down
4 changes: 1 addition & 3 deletions apps/dokploy/components/dashboard/application/domains/handle-domain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,9 +297,7 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
};
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger className="" asChild>
{children}
</DialogTrigger>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent className="sm:max-w-2xl">
<DialogHeader>
<DialogTitle>Domain</DialogTitle>
Expand Down
2 changes: 1 addition & 1 deletion apps/dokploy/components/dashboard/application/domains/show-domains.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export const ShowDomains = ({ id, type }: Props) => {
return (
<Card
key={item.domainId}
className="relative overflow-hidden w-full border transition-all hover:shadow-md bg-transparent h-fit"
className="group/card relative overflow-hidden w-full rounded-lg border border-border/50 bg-card transition-all duration-200 hover:border-border hover:bg-card/80 h-fit"
>
<CardContent className="p-6">
<div className="flex flex-col gap-4">
Expand Down
2 changes: 1 addition & 1 deletion apps/dokploy/components/dashboard/application/environment/show-enviroment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
name="environment"
render={({ field }) => (
<FormItem>
<FormControl className="">
<FormControl>
<CodeEditor
style={
{
Expand Down
6 changes: 3 additions & 3 deletions apps/dokploy/components/dashboard/application/general/generic/show.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {

if (isLoading) {
return (
<Card className="group relative w-full bg-transparent">
<Card className="group relative w-full bg-transparent border-border/50">
<CardHeader>
<CardTitle className="flex items-start justify-between">
<div className="flex flex-col gap-2">
Expand Down Expand Up @@ -106,7 +106,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
application.sourceType !== "drop"
) {
return (
<Card className="group relative w-full bg-transparent">
<Card className="group relative w-full bg-transparent border-border/50">
<CardHeader>
<CardTitle className="flex items-start justify-between">
<div className="flex flex-col gap-2">
Expand All @@ -131,7 +131,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
}

return (
<Card className="group relative w-full bg-transparent">
<Card className="group relative w-full bg-transparent border-border/50">
<CardHeader>
<CardTitle className="flex items-start justify-between">
<div className="flex flex-col gap-2">
Expand Down
52 changes: 29 additions & 23 deletions apps/dokploy/components/dashboard/application/general/show.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,11 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {

return (
<>
<Card className="bg-background">
<Card className="bg-background border-border/50">
<CardHeader>
<CardTitle className="text-xl">Deploy Settings</CardTitle>
</CardHeader>
<CardContent className="flex flex-row gap-4 flex-wrap">
<CardContent className="flex flex-row gap-2 flex-wrap">
<TooltipProvider delayDuration={0} disableHoverableContent={false}>
{canDeploy && (
<DialogAction
Expand All @@ -83,13 +83,14 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
>
<Button
variant="default"
size="sm"
isLoading={data?.applicationStatus === "running"}
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
className="h-8 gap-1.5 text-sm"
>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center">
<Rocket className="size-4 mr-1" />
<Rocket className="size-3.5 mr-1" />
Deploy
</div>
</TooltipTrigger>
Expand Down Expand Up @@ -126,13 +127,14 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
>
<Button
variant="secondary"
size="sm"
isLoading={isReloading}
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
className="h-8 gap-1.5 text-sm"
>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center">
<RefreshCcw className="size-4 mr-1" />
<RefreshCcw className="size-3.5 mr-1" />
Reload
</div>
</TooltipTrigger>
Expand Down Expand Up @@ -165,13 +167,14 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
>
<Button
variant="secondary"
size="sm"
isLoading={data?.applicationStatus === "running"}
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
className="h-8 gap-1.5 text-sm"
>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center">
<Hammer className="size-4 mr-1" />
<Hammer className="size-3.5 mr-1" />
Rebuild
</div>
</TooltipTrigger>
Expand Down Expand Up @@ -208,13 +211,14 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
>
<Button
variant="secondary"
size="sm"
isLoading={isStarting}
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
className="h-8 gap-1.5 text-sm"
>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center">
<CheckCircle2 className="size-4 mr-1" />
<CheckCircle2 className="size-3.5 mr-1" />
Start
</div>
</TooltipTrigger>
Expand Down Expand Up @@ -248,13 +252,14 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
>
<Button
variant="destructive"
size="sm"
isLoading={isStopping}
className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
className="h-8 gap-1.5 text-sm"
>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center">
<Ban className="size-4 mr-1" />
<Ban className="size-3.5 mr-1" />
Stop
</div>
</TooltipTrigger>
Expand All @@ -272,17 +277,16 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
appName={data?.appName || ""}
serverId={data?.serverId || ""}
>
<Button
variant="outline"
className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
>
<Terminal className="size-4 mr-1" />
<Button variant="outline" size="sm" className="h-8 gap-1.5 text-sm">
<Terminal className="size-3.5 mr-1" />
Open Terminal
</Button>
</DockerTerminalModal>
{canUpdateService && (
<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
<span className="text-sm font-medium">Autodeploy</span>
<div className="flex flex-row items-center gap-2 rounded-md h-8 px-3 border border-border/50">
<span className="text-sm font-medium text-muted-foreground">
Autodeploy
</span>
<Switch
aria-label="Toggle autodeploy"
checked={data?.autoDeploy || false}
Expand All @@ -299,14 +303,16 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
toast.error("Error updating Auto Deploy");
});
}}
className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
size="sm"
/>
</div>
)}

{canUpdateService && (
<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
<span className="text-sm font-medium">Clean Cache</span>
<div className="flex flex-row items-center gap-2 rounded-md h-8 px-3 border border-border/50">
<span className="text-sm font-medium text-muted-foreground">
Clean Cache
</span>
<Switch
aria-label="Toggle clean cache"
checked={data?.cleanCache || false}
Expand All @@ -323,7 +329,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
toast.error("Error updating Clean Cache");
});
}}
className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
size="sm"
/>
</div>
)}
Expand Down
Loading
Loading