feat(provider): settings feature

apps/provider-console/src/components/layout/Sidebar.tsx

@@ -78,9 +78,9 @@ export const Sidebar: React.FC<Props> = ({ isMobileOpen, handleDrawerToggle, isN
         {
           title: "Settings",
           icon: props => <Settings {...props} />,
-          url: "#",
-          activeRoutes: ["#"],
-          disabled: true
+          url: UrlService.settings(),
+          activeRoutes: [UrlService.settings()],
+          disabled: false
         }
       ]
     },

apps/provider-console/src/pages/settings/index.tsx

@@ -0,0 +1,112 @@
+import { useState } from "react";
+import { Alert, Button, Input } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
+import { z } from "zod";
+
+import { Layout } from "@src/components/layout/Layout";
+import { Title } from "@src/components/shared/Title";
+import { withAuth } from "@src/components/shared/withAuth";
+import { useControlMachine } from "@src/context/ControlMachineProvider";
+import { useProvider } from "@src/context/ProviderContext";
+import restClient from "@src/utils/restClient";
+import { sanitizeMachineAccess } from "@src/utils/sanityUtils";
+import { stripProviderPrefixAndPort } from "@src/utils/urlUtils";
+
+const urlSchema = z.string().url();
+
+const SettingsPage: React.FC = () => {
+  const [url, setUrl] = useState("");
+  const [urlError, setUrlError] = useState("");
+  const [isRestartLoading, setIsRestartLoading] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const { providerDetails } = useProvider();
+  const { activeControlMachine } = useControlMachine();
+
+  const handleUrlUpdate = () => {
+    try {
+      urlSchema.parse(url);
+
+      // TODO: call update provider url api here
+      setUrlError("");
+    } catch (error) {
+      setUrlError("Please enter a valid URL");
+    }
+  };
+
+  const restartProvider = async () => {
+    try {
+      setIsRestartLoading(true);
+      const request = {
+        control_machine: sanitizeMachineAccess(activeControlMachine)
+      };
+      const response = await restClient.post("/restart-provider", request);
+      if (response) {
+        setShowSuccess(true);
+        setTimeout(() => setShowSuccess(false), 20000);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsRestartLoading(false);
+    }
+  };
+
+  const upgradeProvider = () => {
+    // TODO: call upgrade provider api here
+  };
+
+  if (!activeControlMachine) {
+    return (
+      <Layout>
+        <Alert>Please update control machine before accessing provider settings</Alert>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <div className="flex items-center">
+        <div className="w-10 flex-1">
+          <Title>Settings</Title>
+        </div>
+      </div>
+
+      <div className="mt-8 space-y-8">
+        <div className="rounded-lg border p-6">
+          <h2 className="text-xl font-semibold">Restart Provider</h2>
+          <p className="mt-2 text-gray-600">Restart your provider instance. This may cause temporary service interruption.</p>
+          <Button onClick={() => restartProvider()} className="mt-4" disabled={isRestartLoading}>
+            {isRestartLoading ? "Restarting..." : "Restart Provider"}
+          </Button>
+          <div className="mt-4">{showSuccess && <div className="text-green-500">Provider restarted successfully</div>}</div>
+        </div>
+
+        <div className="rounded-lg border p-6">
+          <h2 className="text-xl font-semibold">Upgrade Provider</h2>
+          <p className="mt-2 text-gray-600">Upgrade your provider to the latest version.</p>
+          <Button onClick={() => upgradeProvider()} className="mt-4" variant="outline">
+            Upgrade Provider
+          </Button>
+        </div>
+
+        <div className="rounded-lg border p-6">
+          <h2 className="text-xl font-semibold">Provider URL</h2>
+          <p className="mt-2 text-gray-600">Update the URL for your provider service.</p>
+          <div className="mt-4 flex gap-4">
+            <Input
+              value={url || stripProviderPrefixAndPort(providerDetails?.hostUri || "")}
+              onChange={e => setUrl(e.target.value)}
+              placeholder={"Enter new URL"}
+              error={urlError ? true : undefined}
+              className={cn("min-w-[400px]")}
+            />
+            <Button onClick={handleUrlUpdate}>Update URL</Button>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default withAuth(SettingsPage);

apps/provider-console/src/utils/urlUtils.ts

@@ -18,9 +18,16 @@ export class UrlService {
   static home = () => "/";
   static deployments = () => "/deployments";
   static attributes = () => "/attributes";
+  static settings = () => "/settings";
   static getStarted = () => "/get-started";
   static privacyPolicy = () => "/privacy-policy";
   static termsOfService = () => "/terms-of-service";
   static actions = () => "/actions";
   static pricing = () => "/pricing";
-}
+}
+
+export const stripProviderPrefixAndPort = (url: string) => {
+  return url
+    .replace(/^https?:\/\/provider\./, '') // Remove https://provider. or http://provider.
+    .replace(/:\d+$/, ''); // Remove port number at the end
+};