feat: add badge component to display container state with color coding

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -30,6 +31,21 @@ export const DockerLogs = dynamic(
 	},
 );
 
+const badgeStateColor = (state: string) => {
+	switch (state) {
+		case "running":
+			return "green";
+		case "exited":
+		case "shutdown":
+			return "red";
+		case "accepted":
+		case "created":
+			return "blue";
+		default:
+			return "default";
+	}
+};
+
 interface Props {
 	appName: string;
 	serverId?: string;
@@ -123,7 +139,9 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 											value={container.containerId}
 										>
 											{container.name} ({container.containerId}){" "}
-											{container.state}
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
 										</SelectItem>
 									))}
 								</div>
@@ -135,7 +153,10 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 											value={container.containerId}
 										>
 											{container.name} ({container.containerId}@{container.node}
-											) {container.state}
+											)
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
 										</SelectItem>
 									))}
 								</>

apps/dokploy/components/dashboard/compose/logs/show-stack.tsx

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -35,6 +36,21 @@ interface Props {
 	serverId?: string;
 }
 
+const badgeStateColor = (state: string) => {
+	switch (state) {
+		case "running":
+			return "green";
+		case "exited":
+		case "shutdown":
+			return "red";
+		case "accepted":
+		case "created":
+			return "blue";
+		default:
+			return "default";
+	}
+};
+
 export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 	const [option, setOption] = useState<"swarm" | "native">("native");
 	const [containerId, setContainerId] = useState<string | undefined>();
@@ -123,7 +139,9 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 											value={container.containerId}
 										>
 											{container.name} ({container.containerId}){" "}
-											{container.state}
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
 										</SelectItem>
 									))}
 								</div>
@@ -135,7 +153,10 @@ export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
 											value={container.containerId}
 										>
 											{container.name} ({container.containerId}@{container.node}
-											) {container.state}
+											)
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
 										</SelectItem>
 									))}
 								</>

apps/dokploy/components/dashboard/compose/logs/show.tsx

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -35,6 +36,21 @@ interface Props {
 	appType: "stack" | "docker-compose";
 }
 
+const badgeStateColor = (state: string) => {
+	switch (state) {
+		case "running":
+			return "green";
+		case "exited":
+		case "shutdown":
+			return "red";
+		case "accepted":
+		case "created":
+			return "blue";
+		default:
+			return "default";
+	}
+};
+
 export const ShowDockerLogsCompose = ({
 	appName,
 	appType,
@@ -87,7 +103,10 @@ export const ShowDockerLogsCompose = ({
 									key={container.containerId}
 									value={container.containerId}
 								>
-									{container.name} ({container.containerId}) {container.state}
+									{container.name} ({container.containerId}){" "}
+									<Badge variant={badgeStateColor(container.state)}>
+										{container.state}
+									</Badge>
 								</SelectItem>
 							))}
 							<SelectLabel>Containers ({data?.length})</SelectLabel>