init some manual configs

frontend/src/components/config/manual-config.tsx

@@ -0,0 +1,59 @@
+import { Button } from "@ui/button";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@ui/card";
+import { useState } from "react";
+
+interface Layout {
+  [tab_name: string]: {
+    components: Array<{
+      title: string;
+      element: React.JSX.Element;
+      description?: string;
+    }>;
+    description?: string;
+  };
+}
+
+export const ManualConfig = <L extends Layout>({ layout }: { layout: L }) => {
+  const tab_names = Object.keys(layout);
+  const [show, setShow] = useState(tab_names[0]);
+
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col gap-4 w-[300px]">
+        {tab_names.map((key) => (
+          <Button
+            key={key}
+            onClick={() => setShow(key)}
+            variant={key === show ? "secondary" : "outline"}
+            className="capitalize justify-start"
+          >
+            {key}
+          </Button>
+        ))}
+      </div>
+      <Card className="w-full">
+        <CardHeader>
+          <CardTitle className="capitalize"> {show} </CardTitle>
+          <CardDescription> {layout[show].description} </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {layout[show].components.map((item) => (
+            <div
+              className="flex justify-between items-center border-b pb-4"
+              key={item.title}
+            >
+              <div className="capitalize"> {item.title} </div>
+              {item.element}
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

frontend/src/resources/server/config.tsx

@@ -1,12 +1,86 @@
 import { Configuration } from "@components/config";
+import { ConfirmUpdate } from "@components/config/confirm-update";
+import { ManualConfig } from "@components/config/manual-config";
 import { useRead, useWrite } from "@hooks";
 import { Section } from "@layouts/page";
 import { Types } from "@monitor/client";
 import { Button } from "@ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@ui/card";
+import { Input } from "@ui/input";
 import { Settings, Save, History } from "lucide-react";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 
+type ServerUpdate = Partial<Types.ServerConfig>;
+
+export const SerCon = ({ id }: { id: string }) => {
+  const config = useRead("GetServer", { id }).data?.config;
+  const { mutate, isLoading } = useWrite("UpdateServer");
+  const [update, set] = useState<ServerUpdate>({});
+  const up = <K extends keyof Types.ServerConfig, V = Types.ServerConfig[K]>(
+    k: K,
+    v: V
+  ) => set((p) => ({ ...p, [k]: v }));
+
+  if (!config) return null;
+
+  return (
+    <Section
+      title="Config"
+      icon={<Settings className="w-4 h-4" />}
+      actions={
+        <div className="flex gap-4">
+          <Button variant="outline" intent="warning" onClick={() => set({})}>
+            <History className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="outline"
+            intent="success"
+            onClick={() => mutate({ config: update, id })}
+          >
+            <Save className="w-4 h-4" />
+          </Button>
+        </div>
+      }
+    >
+      <ManualConfig
+        layout={{
+          general: {
+            components: [
+              {
+                title: "Address",
+                element: (
+                  <Input
+                    value={update.address ?? config.address}
+                    onChange={(e) => up("address", e.target.value)}
+                    className="max-w-[400px]"
+                  />
+                ),
+              },
+              {
+                title: "Region",
+                element: (
+                  <Input
+                    value={update.region ?? config.region}
+                    onChange={(e) => up("region", e.target.value)}
+                    className="max-w-[400px]"
+                  />
+                ),
+              },
+            ],
+          },
+        }}
+      />
+    </Section>
+  );
+};
+
 export const ServerConfig = () => {
   const id = useParams().serverId;
   const server = useRead("GetServer", { id }).data;
@@ -23,13 +97,10 @@ export const ServerConfig = () => {
             <Button variant="outline" intent="warning" onClick={() => set({})}>
               <History className="w-4 h-4" />
             </Button>
-            <Button
-              variant="outline"
-              intent="success"
-              onClick={() => mutate({ config: update, id })}
-            >
-              <Save className="w-4 h-4" />
-            </Button>
+            <ConfirmUpdate
+              content={JSON.stringify(update, null, 2)}
+              onConfirm={() => mutate({ config: update, id })}
+            />
           </div>
         }
       >
@@ -50,7 +121,6 @@ export const ServerConfig = () => {
               "mem_critical",
             ],
           }}
-          // overrides={}
         />
       </Section>
     );

frontend/src/resources/server/index.tsx

@@ -4,7 +4,7 @@ import { ResourceCard } from "@layouts/card";
 import { Resource } from "@layouts/resource";
 import { CardDescription } from "@ui/card";
 import { useParams, Link } from "react-router-dom";
-import { ServerConfig } from "./config";
+import { SerCon, ServerConfig } from "./config";
 import { ServerStats } from "./stats";
 import {
   ServerName,
@@ -33,7 +33,7 @@ export const ServerPage = () => {
     >
       <ResourceUpdates type="Server" id={id} />
       <ServerStats />
-      <ServerConfig />
+      <SerCon id={id} />
     </Resource>
   );
 };