refactor: change location of search-command

apps/dokploy/components/dashboard/projects/search-command.tsx

@@ -1,114 +0,0 @@
-"use client"
-
-import React from "react";
-import {Command, CommandEmpty, CommandList, CommandGroup, CommandInput, CommandItem,CommandDialog, CommandSeparator} from "@/components/ui/command";
-import { useRouter } from 'next/router'
-import {extractServices, type Services} from "@/pages/dashboard/project/[projectId]";
-import type {findProjectById} from "@dokploy/server/services/project";
-import {BookIcon, CircuitBoard, GlobeIcon} from "lucide-react";
-import {
-    MariadbIcon,
-    MongodbIcon,
-    MysqlIcon,
-    PostgresqlIcon,
-    RedisIcon,
-} from "@/components/icons/data-tools-icons";
-
-// export type Services = {
-//     name: string;
-//     type:
-//         | "mariadb"
-//         | "application"
-//         | "postgres"
-//         | "mysql"
-//         | "mongo"
-//         | "redis"
-//         | "compose";
-//     description?: string | null;
-//     id: string;
-//     createdAt: string;
-//     status?: "idle" | "running" | "done" | "error";
-// };
-
-type Project = Awaited<ReturnType<typeof findProjectById>>;
-
-interface Props {
-    data: Project[];
-}
-
-export const SearchCommand = ({data}: Props) => {
-    const router = useRouter()
-    const [open, setOpen] = React.useState(false)
-
-    React.useEffect(() => {
-        const down = (e: KeyboardEvent) => {
-            if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
-                e.preventDefault()
-                setOpen((open) => !open)
-            }
-        }
-
-        document.addEventListener("keydown", down)
-        return () => document.removeEventListener("keydown", down)
-    }, [])
-
-    console.log("DEBUG: data: ", data);
-
-    return (
-        <div>
-            <CommandDialog open={open} onOpenChange={setOpen}>
-                <CommandInput placeholder={"Search projects"}/>
-                <CommandList>
-                    <CommandEmpty>No projects added yet. Click on Create project.</CommandEmpty>
-                    <CommandGroup heading={"Projects"}>
-                        <CommandList>
-                            {data?.map((project) => (
-                                <CommandItem onSelect={() => router.push(project.projectId)}>
-                                    <BookIcon className="size-4 text-muted-foreground mr-2" />
-                                    {project.name}
-                                </CommandItem>
-                            ))}
-                        </CommandList>
-                    </CommandGroup>
-                    <CommandSeparator />
-                    <CommandGroup heading={"Services"}>
-                        <CommandList>
-                            {data?.map((project) => {
-                                const applications: Services[] = extractServices(project);
-                                return (
-                                    applications.map((application) => (
-                                        <CommandItem
-                                            onSelect={() => router.push(`/dashboard/project/${project.projectId}/services/${application.type}/${application.id}`)}>
-                                            {application.type === "postgres" && (
-                                                <PostgresqlIcon className="h-6 w-6 mr-2" />
-                                            )}
-                                            {application.type === "redis" && (
-                                                <RedisIcon className="h-6 w-6 mr-2" />
-                                            )}
-                                            {application.type === "mariadb" && (
-                                                <MariadbIcon className="h-6 w-6 mr-2" />
-                                            )}
-                                            {application.type === "mongo" && (
-                                                <MongodbIcon className="h-6 w-6 mr-2" />
-                                            )}
-                                            {application.type === "mysql" && (
-                                                <MysqlIcon className="h-6 w-6 mr-2" />
-                                            )}
-                                            {application.type === "application" && (
-                                                <GlobeIcon className="h-6 w-6 mr-2" />
-                                            )}
-                                            {application.type === "compose" && (
-                                                <CircuitBoard className="h-6 w-6 mr-2" />
-                                            )}
-                                            {application.name}
-                                        </CommandItem>
-                                    ))
-                                );
-                            })}
-                        </CommandList>
-                    </CommandGroup>
-                </CommandList>
-            </CommandDialog>
-        </div>
-    )
-}

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

@@ -36,7 +36,7 @@ import { Fragment } from "react";
 import { toast } from "sonner";
 import { ProjectEnviroment } from "./project-enviroment";
 import { UpdateProject } from "./update";
-import {SearchCommand} from "@/components/dashboard/projects/search-command";
+import { SearchCommand } from "@/components/dashboard/search-command";
 
 export const ShowProjects = () => {
   const utils = api.useUtils();
@@ -48,15 +48,12 @@ export const ShowProjects = () => {
     },
     {
       enabled: !!auth?.id && auth?.rol === "user",
-		},
+    }
   );
   const { mutateAsync } = api.project.remove.useMutation();
 
-
-
   return (
     <>
-
       {/*@ts-expect-error Type mismatch*/}
       <SearchCommand data={data} />
 
@@ -94,7 +91,7 @@ export const ShowProjects = () => {
           ];
 
           const renderDomainsDropdown = (
-						item: typeof project.compose | typeof project.applications,
+            item: typeof project.compose | typeof project.applications
           ) =>
             item[0] ? (
               <DropdownMenuGroup>
@@ -116,7 +113,9 @@ export const ShowProjects = () => {
                           <Link
                             className="space-x-4 text-xs cursor-pointer justify-between"
                             target="_blank"
-														href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
+                            href={`${domain.https ? "https" : "http"}://${
+                              domain.host
+                            }${domain.path}`}
                           >
                             <span>{domain.host}</span>
                             <ExternalLink className="size-4 shrink-0" />
@@ -160,7 +159,9 @@ export const ShowProjects = () => {
                       onClick={(e) => e.stopPropagation()}
                     >
                       <Link
-												href={`${flattedDomains[0].https ? "https" : "http"}://${flattedDomains[0].host}${flattedDomains[0].path}`}
+                        href={`${
+                          flattedDomains[0].https ? "https" : "http"
+                        }://${flattedDomains[0].host}${flattedDomains[0].path}`}
                         target="_blank"
                       >
                         <ExternalLinkIcon className="size-3.5" />
@@ -250,12 +251,12 @@ export const ShowProjects = () => {
                                           })
                                             .then(() => {
                                               toast.success(
-																								"Project delete succesfully",
+                                                "Project delete succesfully"
                                               );
                                             })
                                             .catch(() => {
                                               toast.error(
-																								"Error to delete this project",
+                                                "Error to delete this project"
                                               );
                                             })
                                             .finally(() => {

apps/dokploy/components/dashboard/search-command.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import React from "react";
+import {
+  Command,
+  CommandEmpty,
+  CommandList,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandDialog,
+  CommandSeparator,
+} from "@/components/ui/command";
+import { useRouter } from "next/router";
+import {
+  extractServices,
+  type Services,
+} from "@/pages/dashboard/project/[projectId]";
+import type { findProjectById } from "@dokploy/server/services/project";
+import { BookIcon, CircuitBoard, GlobeIcon } from "lucide-react";
+import {
+  MariadbIcon,
+  MongodbIcon,
+  MysqlIcon,
+  PostgresqlIcon,
+  RedisIcon,
+} from "@/components/icons/data-tools-icons";
+
+type Project = Awaited<ReturnType<typeof findProjectById>>;
+
+interface Props {
+  data: Project[];
+}
+
+export const SearchCommand = ({ data }: Props) => {
+  const router = useRouter();
+  const [open, setOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((open) => !open);
+      }
+    };
+
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  console.log("DEBUG: data: ", data);
+
+  return (
+    <div>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder={"Search projects"} />
+        <CommandList>
+          <CommandEmpty>
+            No projects added yet. Click on Create project.
+          </CommandEmpty>
+          <CommandGroup heading={"Application"}>
+            <CommandItem
+              onSelect={() => {
+                router.push("/dashboard/projects");
+                setOpen(false);
+              }}
+            >
+              Projects
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                router.push("/dashboard/monitoring");
+                setOpen(false);
+              }}
+            >
+              Monitoring
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                router.push("/dashboard/traefik");
+                setOpen(false);
+              }}
+            >
+              Treafik
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                router.push("/dashboard/docker");
+                setOpen(false);
+              }}
+            >
+              Docker
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                router.push("/dashboard/requests");
+                setOpen(false);
+              }}
+            >
+              Requests
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                router.push("/dashboard/profile");
+                setOpen(false);
+              }}
+            >
+              Settings
+            </CommandItem>
+          </CommandGroup>
+          <CommandGroup heading={"Projects"}>
+            <CommandList>
+              {data?.map((project) => (
+                <CommandItem
+                  key={project.projectId}
+                  onSelect={() => router.push(project.projectId)}
+                >
+                  <BookIcon className="size-4 text-muted-foreground mr-2" />
+                  {project.name}
+                </CommandItem>
+              ))}
+            </CommandList>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading={"Services"}>
+            <CommandList>
+              {data?.map((project) => {
+                const applications: Services[] = extractServices(project);
+                return applications.map((application) => (
+                  <CommandItem
+                    key={application.id}
+                    onSelect={() =>
+                      router.push(
+                        `/dashboard/project/${project.projectId}/services/${application.type}/${application.id}`
+                      )
+                    }
+                  >
+                    {application.type === "postgres" && (
+                      <PostgresqlIcon className="h-6 w-6 mr-2" />
+                    )}
+                    {application.type === "redis" && (
+                      <RedisIcon className="h-6 w-6 mr-2" />
+                    )}
+                    {application.type === "mariadb" && (
+                      <MariadbIcon className="h-6 w-6 mr-2" />
+                    )}
+                    {application.type === "mongo" && (
+                      <MongodbIcon className="h-6 w-6 mr-2" />
+                    )}
+                    {application.type === "mysql" && (
+                      <MysqlIcon className="h-6 w-6 mr-2" />
+                    )}
+                    {application.type === "application" && (
+                      <GlobeIcon className="h-6 w-6 mr-2" />
+                    )}
+                    {application.type === "compose" && (
+                      <CircuitBoard className="h-6 w-6 mr-2" />
+                    )}
+                    {application.name}
+                  </CommandItem>
+                ));
+              })}
+            </CommandList>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    </div>
+  );
+};