standard search bar location

frontend/src/pages/home/dashboard.tsx

@@ -1,5 +1,5 @@
 import { OpenAlerts } from "@components/alert";
-import { Page } from "@components/layouts";
+import { Page, Section } from "@components/layouts";
 import { ResourceComponents } from "@components/resources";
 import { TagsWithBadge } from "@components/tags";
 import { AllUpdates } from "@components/updates/resource";
@@ -8,20 +8,22 @@ import { usableResourcePath } from "@lib/utils";
 import { UsableResource } from "@types";
 import { Card } from "@ui/card";
 import { Separator } from "@ui/separator";
-import { History } from "lucide-react";
+import { Boxes, History } from "lucide-react";
 import { Link } from "react-router-dom";
 
 export const Dashboard = () => {
   return (
-    <Page title="">
+    <Page>
       <OpenAlerts />
       <AllUpdates />
 
-      <ResourceRow type="Deployment" />
-      <ResourceRow type="Build" />
-      <ResourceRow type="Repo" />
-      <ResourceRow type="Server" />
-      <ResourceRow type="Procedure" />
+      <Section title="Resources" icon={<Boxes className="w-4 h-4" />}>
+        <ResourceRow type="Deployment" />
+        <ResourceRow type="Build" />
+        <ResourceRow type="Repo" />
+        <ResourceRow type="Server" />
+        <ResourceRow type="Procedure" />
+      </Section>
     </Page>
   );
 };

frontend/src/pages/resources.tsx

@@ -17,21 +17,21 @@ export const Resources = () => {
       title={`${name}s`}
       icon={<Components.BigIcon />}
       actions={
-        <div className="grid gap-4 justify-items-end">
-          <div className="flex gap-4">
-            <TagsFilter />
-            <Components.New />
-          </div>
-          <Input
-            value={search}
-            onChange={(e) => set(e.target.value)}
-            placeholder="search..."
-            className="w-96"
-          />
+        <div className="flex gap-4">
+          <TagsFilter />
+          <Components.New />
         </div>
       }
     >
-      <Components.Table search={search} />
+      <div className="flex flex-col gap-4">
+        <Input
+          value={search}
+          onChange={(e) => set(e.target.value)}
+          placeholder="search..."
+          className="w-[200px] lg:w-[300px]"
+        />
+        <Components.Table search={search} />
+      </div>
     </Page>
   );
 };

frontend/src/pages/tags.tsx

@@ -29,41 +29,39 @@ export const Tags = () => {
     <Page
       title="Tags"
       icon={<Tag className="w-8 h-8" />}
-      actions={
-        <div className="flex gap-4">
-          <Input
-            placeholder="search"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            className="w-[200px] lg:w-[300px]"
-          />
-          <CreateTag />
-        </div>
-      }
+      actions={<CreateTag />}
     >
-      <DataTable
-        tableKey="tags"
-        data={tags?.filter((tag) => tag.name.includes(search)) ?? []}
-        columns={[
-          {
-            header: "Name",
-            accessorKey: "name",
-          },
-          {
-            header: "Owner",
-            cell: ({ row }) =>
-              row.original.owner ? (
-                <UpdateUser user_id={row.original.owner} />
-              ) : (
-                "Unknown"
-              ),
-          },
-          {
-            header: "Delete",
-            cell: ({ row }) => <DeleteTag tag_id={row.original._id!.$oid} />,
-          },
-        ]}
-      />
+      <div className="flex flex-col gap-4">
+        <Input
+          placeholder="search..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="w-[200px] lg:w-[300px]"
+        />
+        <DataTable
+          tableKey="tags"
+          data={tags?.filter((tag) => tag.name.includes(search)) ?? []}
+          columns={[
+            {
+              header: "Name",
+              accessorKey: "name",
+            },
+            {
+              header: "Owner",
+              cell: ({ row }) =>
+                row.original.owner ? (
+                  <UpdateUser user_id={row.original.owner} />
+                ) : (
+                  "Unknown"
+                ),
+            },
+            {
+              header: "Delete",
+              cell: ({ row }) => <DeleteTag tag_id={row.original._id!.$oid} />,
+            },
+          ]}
+        />
+      </div>
     </Page>
   );
 };

frontend/src/pages/variables.tsx

@@ -52,83 +52,81 @@ export const Variables = () => {
     <Page
       title="Variables"
       icon={<Variable className="w-8 h-8" />}
-      actions={
-        <div className="flex gap-4">
-          <Input
-            placeholder="search"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            className="w-[200px] lg:w-[300px]"
-          />
-          <CreateVariable />
-        </div>
-      }
+      actions={<CreateVariable />}
     >
-      <DataTable
-        tableKey="variables"
-        data={filtered}
-        columns={[
-          {
-            accessorKey: "name",
-            header: ({ column }) => (
-              <SortableHeader column={column} title="Name" />
-            ),
-          },
-          {
-            accessorKey: "value",
-            header: ({ column }) => (
-              <SortableHeader column={column} title="Value" />
-            ),
-            cell: ({ row }) => {
-              return (
-                <TextUpdateMenu
-                  title={`${row.original.name} - Value`}
-                  placeholder="Set value"
-                  value={row.original.value}
-                  onUpdate={(value) => {
-                    if (row.original.value === value) {
-                      return;
-                    }
-                    updateValue({ name: row.original.name, value });
-                  }}
-                  triggerClassName="w-full"
-                  disabled={disabled}
-                  fullWidth
-                />
-              );
+      <div className="flex flex-col gap-4">
+        <Input
+          placeholder="search..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="w-[200px] lg:w-[300px]"
+        />
+        <DataTable
+          tableKey="variables"
+          data={filtered}
+          columns={[
+            {
+              accessorKey: "name",
+              header: ({ column }) => (
+                <SortableHeader column={column} title="Name" />
+              ),
             },
-          },
-          {
-            accessorKey: "description",
-            header: "Description",
-            cell: ({ row }) => {
-              return (
-                <TextUpdateMenu
-                  title={`${row.original.name} - Description`}
-                  placeholder="Set description"
-                  value={row.original.description}
-                  onUpdate={(description) => {
-                    if (row.original.description === description) {
-                      return;
-                    }
-                    updateDescription({
-                      name: row.original.name,
-                      description,
-                    });
-                  }}
-                  triggerClassName="w-full"
-                  disabled={disabled}
-                  fullWidth
-                />
-              );
+            {
+              accessorKey: "value",
+              header: ({ column }) => (
+                <SortableHeader column={column} title="Value" />
+              ),
+              cell: ({ row }) => {
+                return (
+                  <TextUpdateMenu
+                    title={`${row.original.name} - Value`}
+                    placeholder="Set value"
+                    value={row.original.value}
+                    onUpdate={(value) => {
+                      if (row.original.value === value) {
+                        return;
+                      }
+                      updateValue({ name: row.original.name, value });
+                    }}
+                    triggerClassName="w-full"
+                    disabled={disabled}
+                    fullWidth
+                  />
+                );
+              },
             },
-          },
-          {
-            header: "Delete",
-            cell: ({ row }) => <DeleteVariable name={row.original.name} />,
-          },
-        ]}
-      />
+            {
+              accessorKey: "description",
+              header: "Description",
+              cell: ({ row }) => {
+                return (
+                  <TextUpdateMenu
+                    title={`${row.original.name} - Description`}
+                    placeholder="Set description"
+                    value={row.original.description}
+                    onUpdate={(description) => {
+                      if (row.original.description === description) {
+                        return;
+                      }
+                      updateDescription({
+                        name: row.original.name,
+                        description,
+                      });
+                    }}
+                    triggerClassName="w-full"
+                    disabled={disabled}
+                    fullWidth
+                  />
+                );
+              },
+            },
+            {
+              header: "Delete",
+              cell: ({ row }) => <DeleteVariable name={row.original.name} />,
+            },
+          ]}
+        />
+      </div>
     </Page>
   );
 };