🐛 fix paths

src/app/[orgId]/settings/clients/machine/[clientId]/credentials/page.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import RegenerateCredentialsModal from "@app/components/RegenerateCredentialsModal";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger
+} from "@app/components/ui/tooltip";
+import { useClientContext } from "@app/hooks/useClientContext";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient } from "@app/lib/api";
+import { build } from "@server/build";
+import { PickClientDefaultsResponse } from "@server/routers/client";
+import { useTranslations } from "next-intl";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function CredentialsPage() {
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+    const { orgId } = useParams();
+    const router = useRouter();
+    const t = useTranslations();
+    const { client } = useClientContext();
+
+    const [modalOpen, setModalOpen] = useState(false);
+    const [clientDefaults, setClientDefaults] =
+        useState<PickClientDefaultsResponse | null>(null);
+
+    const { licenseStatus, isUnlocked } = useLicenseStatusContext();
+    const subscription = useSubscriptionStatusContext();
+
+    const isSecurityFeatureDisabled = () => {
+        const isEnterpriseNotLicensed = build === "enterprise" && !isUnlocked();
+        const isSaasNotSubscribed =
+            build === "saas" && !subscription?.isSubscribed();
+        return isEnterpriseNotLicensed || isSaasNotSubscribed;
+    };
+
+    const handleConfirmRegenerate = async () => {
+        const res = await api.get(`/org/${orgId}/pick-client-defaults`);
+        if (res && res.status === 200) {
+            const data = res.data.data;
+            setClientDefaults(data);
+
+            await api.post(
+                `/re-key/${client?.clientId}/regenerate-client-secret`,
+                {
+                    olmId: data.olmId,
+                    secret: data.olmSecret
+                }
+            );
+
+            toast({
+                title: t("credentialsSaved"),
+                description: t("credentialsSavedDescription")
+            });
+
+            router.refresh();
+        }
+    };
+
+    const getCredentials = () => {
+        if (clientDefaults) {
+            return {
+                Id: clientDefaults.olmId,
+                Secret: clientDefaults.olmSecret
+            };
+        }
+        return undefined;
+    };
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("generatedcredentials")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("regenerateCredentials")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <div className="inline-block">
+                                    <Button
+                                        onClick={() => setModalOpen(true)}
+                                        disabled={isSecurityFeatureDisabled()}
+                                    >
+                                        {t("regeneratecredentials")}
+                                    </Button>
+                                </div>
+                            </TooltipTrigger>
+
+                            {isSecurityFeatureDisabled() && (
+                                <TooltipContent side="top">
+                                    {t("featureDisabledTooltip")}
+                                </TooltipContent>
+                            )}
+                        </Tooltip>
+                    </TooltipProvider>
+                </SettingsSectionBody>
+            </SettingsSection>
+
+            <RegenerateCredentialsModal
+                open={modalOpen}
+                onOpenChange={setModalOpen}
+                type="client-olm"
+                onConfirmRegenerate={handleConfirmRegenerate}
+                dashboardUrl={env.app.dashboardUrl}
+                credentials={getCredentials()}
+            />
+        </SettingsContainer>
+    );
+}

src/app/[orgId]/settings/clients/machine/[clientId]/general/page.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { useClientContext } from "@app/hooks/useClientContext";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ListSitesResponse } from "@server/routers/site";
+import { AxiosResponse } from "axios";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const GeneralFormSchema = z.object({
+    name: z.string().nonempty("Name is required")
+});
+
+type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
+
+export default function GeneralPage() {
+    const t = useTranslations();
+    const { client, updateClient } = useClientContext();
+    const api = createApiClient(useEnvContext());
+    const [loading, setLoading] = useState(false);
+    const router = useRouter();
+
+    const form = useForm({
+        resolver: zodResolver(GeneralFormSchema),
+        defaultValues: {
+            name: client?.name
+        },
+        mode: "onChange"
+    });
+
+    // Fetch available sites and client's assigned sites
+    useEffect(() => {
+        const fetchSites = async () => {
+            try {
+                // Fetch all available sites
+                const res = await api.get<AxiosResponse<ListSitesResponse>>(
+                    `/org/${client?.orgId}/sites/`
+                );
+            } catch (e) {
+                toast({
+                    variant: "destructive",
+                    title: "Failed to fetch sites",
+                    description: formatAxiosError(
+                        e,
+                        "An error occurred while fetching sites."
+                    )
+                });
+            }
+        };
+
+        if (client?.clientId) {
+            fetchSites();
+        }
+    }, [client?.clientId, client?.orgId, api, form]);
+
+    async function onSubmit(data: GeneralFormValues) {
+        setLoading(true);
+
+        try {
+            await api.post(`/client/${client?.clientId}`, {
+                name: data.name
+            });
+
+            updateClient({ name: data.name });
+
+            toast({
+                title: t("clientUpdated"),
+                description: t("clientUpdatedDescription")
+            });
+
+            router.refresh();
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("clientUpdateFailed"),
+                description: formatAxiosError(e, t("clientUpdateError"))
+            });
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("generalSettings")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("generalSettingsDescription")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+
+                <SettingsSectionBody>
+                    <SettingsSectionForm>
+                        <Form {...form}>
+                            <form
+                                onSubmit={form.handleSubmit(onSubmit)}
+                                className="space-y-4"
+                                id="general-settings-form"
+                            >
+                                <FormField
+                                    control={form.control}
+                                    name="name"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>{t("name")}</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </form>
+                        </Form>
+                    </SettingsSectionForm>
+                </SettingsSectionBody>
+
+                <SettingsSectionFooter>
+                    <Button
+                        type="submit"
+                        form="general-settings-form"
+                        loading={loading}
+                        disabled={loading}
+                    >
+                        {t("saveSettings")}
+                    </Button>
+                </SettingsSectionFooter>
+            </SettingsSection>
+        </SettingsContainer>
+    );
+}

src/app/[orgId]/settings/clients/machine/[clientId]/layout.tsx

@@ -0,0 +1,67 @@
+import ClientInfoCard from "@app/components/ClientInfoCard";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import ClientProvider from "@app/providers/ClientProvider";
+import { build } from "@server/build";
+import { GetClientResponse } from "@server/routers/client";
+import { AxiosResponse } from "axios";
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+
+type SettingsLayoutProps = {
+    children: React.ReactNode;
+    params: Promise<{ clientId: number | string; orgId: string }>;
+};
+
+export default async function SettingsLayout(props: SettingsLayoutProps) {
+    const params = await props.params;
+
+    const { children } = props;
+
+    let client = null;
+    try {
+        const res = await internal.get<AxiosResponse<GetClientResponse>>(
+            `/client/${params.clientId}`,
+            await authCookieHeader()
+        );
+        client = res.data.data;
+    } catch (error) {
+        console.error("Error fetching client data:", error);
+        redirect(`/${params.orgId}/settings/clients`);
+    }
+
+    const t = await getTranslations();
+
+    const navItems = [
+        {
+            title: t("general"),
+            href: `/{orgId}/settings/clients/machine/{clientId}/general`
+        },
+        ...(build === "enterprise"
+            ? [
+                  {
+                      title: t("credentials"),
+                      href: `/{orgId}/settings/clients/machine/{clientId}/credentials`
+                  }
+              ]
+            : [])
+    ];
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={`${client?.name} Settings`}
+                description="Configure the settings on your site"
+            />
+
+            <ClientProvider client={client}>
+                <div className="space-y-6">
+                    <ClientInfoCard />
+                    <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
+                </div>
+            </ClientProvider>
+        </>
+    );
+}

src/app/[orgId]/settings/clients/machine/[clientId]/page.tsx

@@ -0,0 +1,10 @@
+import { redirect } from "next/navigation";
+
+export default async function ClientPage(props: {
+    params: Promise<{ orgId: string; clientId: number | string }>;
+}) {
+    const params = await props.params;
+    redirect(
+        `/${params.orgId}/settings/clients/machine/${params.clientId}/general`
+    );
+}