fixes

frontend/src/pages/dashboard/components/recently-viewed.tsx

@@ -1,12 +1,67 @@
 import { useGetRecentlyViewed } from "@hooks";
-import { Card, CardContent, CardHeader, CardTitle } from "@ui/card";
-import { BuildCard, DeploymentCard, ServerCard } from "..";
+import { BuildCard, DeploymentCard, NewDeployment, ServerCard } from "..";
+import { useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@ui/dropdown";
+import { Button } from "@ui/button";
+import { ChevronDown, PlusCircle } from "lucide-react";
+
+const NewButton = () => {
+  const [open, set] = useState<"deployment" | "build" | "server" | boolean>(
+    false
+  );
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button
+            className="w-[200px] flex items-center justify-between"
+            variant="outline"
+          >
+            <div className="flex items-center gap-2">
+              <PlusCircle className="w-4 h-4 text-green-500" />
+              Create Resource
+            </div>
+            <ChevronDown className="w-4 h-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-[200px]">
+          <DropdownMenuLabel className="text-xs">
+            Resource Type
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem onClick={() => set("deployment")}>
+              Deployment
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => set("build")}>
+              Build
+            </DropdownMenuItem>
+            <DropdownMenuItem> Server </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <NewDeployment open={open === "deployment"} set={set} />
+      {/* <NewBuild open={open === "build"} set={set} /> */}
+    </>
+  );
+};
 
 export const RecentlyViewed = () => {
   const recents = useGetRecentlyViewed();
   return (
     <div className="w-full flex flex-col gap-6">
-      <h2 className="text-xl">Recently Viewed</h2>
+      <div className="flex justify-between">
+        <h2 className="text-xl">Recently Viewed</h2>
+        <NewButton />
+      </div>
       <div className="flex flex-col gap-4">
         {recents.map(({ type, id }) => {
           if (type === "Deployment") return <DeploymentCard key={id} id={id} />;

frontend/src/pages/dashboard/index.tsx

@@ -6,21 +6,11 @@ import {
   CardHeader,
   CardTitle,
 } from "@ui/card";
-import { readableVersion, version_to_string } from "@util/helpers";
+import { version_to_string } from "@util/helpers";
 import { ServersChart } from "./components/servers-chart";
 import { DeploymentsChart } from "./components/deployments-chart";
 import { Input } from "@ui/input";
-import { ChevronDown, PlusCircle } from "lucide-react";
 import { Link } from "react-router-dom";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@ui/dropdown";
 import { Button } from "@ui/button";
 import {
   Dialog,
@@ -33,7 +23,7 @@ import { useState } from "react";
 import { RecentlyViewed } from "./components/recently-viewed";
 import { ServerStats, ServerStatusIcon } from "@pages/server";
 
-const NewDeployment = ({
+export const NewDeployment = ({
   open,
   set,
 }: {
@@ -123,47 +113,6 @@ const NewBuild = ({
   );
 };
 
-const NewButton = () => {
-  const [open, set] = useState<"deployment" | "build" | "server" | boolean>(
-    false
-  );
-  return (
-    <>
-      <DropdownMenu>
-        <DropdownMenuTrigger>
-          <Button
-            className="w-[200px] flex items-center justify-between"
-            variant="outline"
-          >
-            <div className="flex items-center gap-2">
-              <PlusCircle className="w-4 h-4 text-green-500" />
-              Add New
-            </div>
-            <ChevronDown className="w-4 h-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[200px]">
-          <DropdownMenuLabel className="text-xs">
-            Resource Type
-          </DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuGroup>
-            <DropdownMenuItem onClick={() => set("deployment")}>
-              Deployment
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => set("build")}>
-              Build
-            </DropdownMenuItem>
-            <DropdownMenuItem> Server </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <NewDeployment open={open === "deployment"} set={set} />
-      <NewBuild open={open === "build"} set={set} />
-    </>
-  );
-};
-
 export const DeploymentCard = ({ id }: { id: string }) => {
   const deployments = useRead({ type: "ListDeployments", params: {} }).data;
   const deployment = deployments?.find((d) => d.id === id);
@@ -182,19 +131,6 @@ export const DeploymentCard = ({ id }: { id: string }) => {
   );
 };
 
-const DeploymentsList = () => {
-  const deployments = useRead({ type: "ListDeployments", params: {} }).data;
-
-  return (
-    <div className="flex flex-col gap-2 w-full border-r pr-4">
-      <h2 className="text-lg">Deployments</h2>
-      {deployments?.map(({ id }) => (
-        <DeploymentCard key={id} id={id} />
-      ))}
-    </div>
-  );
-};
-
 export const ServerCard = ({ id }: { id: string }) => {
   const servers = useRead({ type: "ListServers", params: {} }).data;
   const server = servers?.find((server) => server.id === id);
@@ -218,19 +154,6 @@ export const ServerCard = ({ id }: { id: string }) => {
   );
 };
 
-const ServersList = () => {
-  const servers = useRead({ type: "ListServers", params: {} }).data;
-
-  return (
-    <div className="flex flex-col gap-2 w-full border-r pr-4">
-      <h2 className="text-lg">Deployments</h2>
-      {servers?.map((server) => (
-        <ServerCard key={server.id} id={server.id} />
-      ))}
-    </div>
-  );
-};
-
 export const BuildCard = ({ id }: { id: string }) => {
   const builds = useRead({ type: "ListBuilds", params: {} }).data;
   const build = builds?.find((server) => server.id === id);
@@ -253,43 +176,19 @@ export const BuildCard = ({ id }: { id: string }) => {
   );
 };
 
-const BuildsList = () => {
-  const builds = useRead({ type: "ListBuilds", params: {} }).data;
-
-  return (
-    <div className="flex flex-col gap-2 w-full">
-      <h2 className="text-lg">Builds</h2>
-      {builds?.map((build) => (
-        <BuildCard id={build.id} key={build.id} />
-      ))}
-    </div>
-  );
-};
-
 export const Dashboard = () => {
   const user = useUser().data;
 
   return (
-    <>
-      <div className="flex items-center justify-between">
-        <h1 className="text-xl"> Hello, {user?.username}.</h1>
-        <div className="flex gap-4">
-          <Input className="w-[300px]" placeholder="Search" />
-          <NewButton />
-        </div>
-      </div>
-      <div className="flex gap-8">
+    <div className="flex gap-24">
+      <div className="flex flex-col gap-6 w-full">
+        <h1 className="text-3xl"> Hello, {user?.username}.</h1>
         <div className="flex  gap-4 w-full h-fit">
           <DeploymentsChart />
           <ServersChart />
         </div>
-        <RecentlyViewed />
       </div>
-      {/* <div className="flex gap-4">
-        <DeploymentsList />
-        <ServersList />
-        <BuildsList />
-      </div> */}
-    </>
+      <RecentlyViewed />
+    </div>
   );
 };

frontend/src/pages/deployments/index.tsx

@@ -30,7 +30,7 @@ export const Deployments = () => {
           </Button>
         </div>
       </div>
-      <div className="grid grid-cols-4 gap-8">
+      <div className="grid grid-cols-3 gap-8">
         {deployments?.map(
           ({ id, name }) =>
             (search.includes(name) || name.includes(search)) && (

frontend/src/pages/servers/index.tsx

@@ -1,16 +1,42 @@
 import { useRead } from "@hooks";
 import { ServerCard } from "@pages/dashboard";
+import { Button } from "@ui/button";
+import { Input } from "@ui/input";
+import { PlusCircle } from "lucide-react";
+import { useState } from "react";
 
 export const Servers = () => {
   const servers = useRead({ type: "ListServers", params: {} }).data;
+  const [search, set] = useState("");
 
   return (
     <div className="flex flex-col gap-12">
-      <h1 className="text-3xl">Servers</h1>
-      <div className="grid grid-cols-4 gap-8">
-        {servers?.map(({ id }) => (
-          <ServerCard key={id} id={id} />
-        ))}
+      <div className="flex justify-between">
+        <h1 className="text-3xl">Servers</h1>
+        <div className="flex gap-4">
+          <Input
+            className="w-[300px]"
+            placeholder="Search"
+            value={search}
+            onChange={(e) => set(e.target.value)}
+          />
+          <Button
+            className="w-[200px] flex items-center gap-2"
+            variant="outline"
+            intent="success"
+          >
+            <PlusCircle className="w-4 h-4 text-green-500" />
+            New Server
+          </Button>
+        </div>
+      </div>{" "}
+      <div className="grid grid-cols-3 gap-8">
+        {servers?.map(
+          ({ id, name }) =>
+            (search.includes(name) || name.includes(search)) && (
+              <ServerCard key={id} id={id} />
+            )
+        )}
       </div>
     </div>
   );