Add Metrics settings tab with metrics push toggle

src/app/(dashboard)/settings/page.tsx

@@ -4,6 +4,7 @@ import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { VerticalTabs } from "@components/VerticalTabs";
 import {
   AlertOctagonIcon,
+  ChartNoAxesCombined,
   FingerprintIcon,
   FolderGit2Icon,
   LockIcon,
@@ -24,6 +25,7 @@ import IdentityProvidersTab from "@/modules/settings/IdentityProvidersTab";
 import NetworkSettingsTab from "@/modules/settings/NetworkSettingsTab";
 import PermissionsTab from "@/modules/settings/PermissionsTab";
 import GroupsSettings from "@/modules/settings/GroupsSettings";
+import MetricsTab from "@/modules/settings/MetricsTab";
 
 export default function NetBirdSettings() {
   const queryParams = useSearchParams();
@@ -78,6 +80,10 @@ export default function NetBirdSettings() {
                 <MonitorSmartphoneIcon size={14} />
                 Clients
               </VerticalTabs.Trigger>
+              <VerticalTabs.Trigger value="metrics">
+                <ChartNoAxesCombined size={14} />
+                Metrics
+              </VerticalTabs.Trigger>
             </>
           )}
 
@@ -95,6 +101,7 @@ export default function NetBirdSettings() {
             {account && <GroupsSettings account={account} />}
             {account && <NetworkSettingsTab account={account} />}
             {account && <ClientSettingsTab account={account} />}
+            {account && <MetricsTab account={account} />}
             {account && <DangerZoneTab account={account} />}
           </div>
         </RestrictedAccess>

src/interfaces/Account.ts

@@ -27,6 +27,7 @@ export interface Account {
     embedded_idp_enabled?: boolean;
     auto_update_version: string;
     auto_update_always: boolean;
+    metrics_push_enabled?: boolean;
     local_auth_disabled?: boolean;
   };
   onboarding?: AccountOnboarding;

src/modules/settings/MetricsTab.tsx

@@ -0,0 +1,108 @@
+import Breadcrumbs from "@components/Breadcrumbs";
+import FancyToggleSwitch from "@components/FancyToggleSwitch";
+import InlineLink from "@components/InlineLink";
+import { notify } from "@components/Notification";
+import Paragraph from "@components/Paragraph";
+import * as Tabs from "@radix-ui/react-tabs";
+import { useApiCall } from "@utils/api";
+import {
+  ChartNoAxesCombined,
+  ExternalLinkIcon,
+} from "lucide-react";
+import React, { useState } from "react";
+import { useSWRConfig } from "swr";
+import SettingsIcon from "@/assets/icons/SettingsIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import { Account } from "@/interfaces/Account";
+
+type Props = {
+  account: Account;
+};
+
+export default function MetricsTab({ account }: Readonly<Props>) {
+  const { permission } = usePermissions();
+  const { mutate } = useSWRConfig();
+  const saveRequest = useApiCall<Account>("/accounts/" + account.id, true);
+
+  const [metricsPushEnabled, setMetricsPushEnabled] = useState(
+    account.settings?.metrics_push_enabled ?? false,
+  );
+
+  const toggleMetricsPush = async (toggle: boolean) => {
+    notify({
+      title: "Metrics",
+      description: `Metrics push successfully ${
+        toggle ? "enabled" : "disabled"
+      }.`,
+      promise: saveRequest
+        .put({
+          id: account.id,
+          settings: {
+            ...account.settings,
+            metrics_push_enabled: toggle,
+          },
+        })
+        .then(() => {
+          setMetricsPushEnabled(toggle);
+          mutate("/accounts");
+        }),
+      loadingMessage: "Updating metrics setting...",
+    });
+  };
+
+  return (
+    <Tabs.Content value={"metrics"}>
+      <div className={"p-default py-6 max-w-2xl"}>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            href={"/settings"}
+            label={"Settings"}
+            icon={<SettingsIcon size={13} />}
+          />
+          <Breadcrumbs.Item
+            href={"/settings?tab=metrics"}
+            label={"Metrics"}
+            icon={<ChartNoAxesCombined size={14} />}
+            active
+          />
+        </Breadcrumbs>
+        <div>
+          <h1>Metrics</h1>
+          <Paragraph>
+            Help us improve NetBird by sharing performance metrics
+            such as connection timing, sync duration, and login latency.
+          </Paragraph>
+          <Paragraph>
+            Learn more about{" "}
+            <InlineLink
+              href={
+                "https://docs.netbird.io/manage/client-metrics"
+              }
+              target={"_blank"}
+            >
+              Client Metrics
+              <ExternalLinkIcon size={12} />
+            </InlineLink>
+            in our documentation.
+          </Paragraph>
+        </div>
+
+        <FancyToggleSwitch
+          className={"mt-6"}
+          value={metricsPushEnabled}
+          onChange={toggleMetricsPush}
+          label={
+            <>
+              <ChartNoAxesCombined size={15} />
+              Share performance metrics
+            </>
+          }
+          helpText={
+            "When enabled, clients will periodically send performance data to help us identify and fix issues."
+          }
+          disabled={!permission.settings.update}
+        />
+      </div>
+    </Tabs.Content>
+  );
+}