@solidstarters/solid-core-ui 1.1.210 → 1.1.211

package/src/components/common/GeneralSettings.tsx

@@ -0,0 +1,1233 @@
+"use client"
+// import { useBulkUpdateSolidSettingsMutation, useCreateSolidSettingsMutation, useLazyGetSolidSettingsQuery, useUpdateSolidSettingsMutation } from '../../redux/api/solidSettingsApi';
+import { useFormik } from 'formik';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { Toast } from 'primereact/toast';
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { CancelButton } from './CancelButton';
+import { InputSwitch } from 'primereact/inputswitch';
+import { RadioButton } from 'primereact/radiobutton';
+import { usePathname } from 'next/navigation';
+import { InputTextarea } from 'primereact/inputtextarea';
+import SolidLogo from '../../resources/images/SolidXLogo.svg'
+import AuthScreenRightBackgroundImage from '../../resources/images/auth/solid-left-layout-bg.png';
+import AuthScreenLeftBackgroundImage from '../../resources/images/auth/solid-right-layout-bg.png';
+import AuthScreenCenterBackgroundImage from '../../resources/images/auth/solid-login-light.png';
+import { useDropzone } from 'react-dropzone';
+import { Divider } from 'primereact/divider';
+import { SettingDropzoneActivePlaceholder } from './SolidSettings/SettingDropzoneActivePlaceholder';
+import { SolidUploadedImage } from './SolidSettings/SolidUploadedImage';
+import { SettingsImageRemoveButton } from './SolidSettings/SettingsImageRemoveButton';
+import { Dropdown } from 'primereact/dropdown';
+import { OpenAiProviderComponent } from './SolidSettings/LlmSettings/OpenAiProviderComponent';
+import { AnthropicProviderComponent } from './SolidSettings/LlmSettings/AnthropicProviderComponent';
+import { useDispatch, useSelector } from 'react-redux';
+import { handleError } from '../../helpers/ToastContainer';
+import { ERROR_MESSAGES } from '../../constants/error-messages';
+import { useBulkUpdateSolidSettingsMutation, useLazyGetSolidSettingsQuery } from '../../redux/api/solidSettingsApi';
+import { setSolidSettings } from '../../redux/features/settingsSlice';
+
+
+export const GeneralSettings = () => {
+    const [appLogoPreview, setAppLogoPreview] = useState<string | null>(null);
+    const [companyLogoPreview, setCompanyLogoPreview] = useState<string | null>(null);
+    const [authScreenRightBackgroundImagePreview, setAuthScreenRightBackgroundImagePreview] = useState<string | null>(null);
+    const [authScreenLeftBackgroundImagePreview, setAuthScreenLeftBackgroundImagePreview] = useState<string | null>(null);
+    const [authScreenCenterBackgroundImagePreview, setAuthScreenCenterBackgroundImagePreview] = useState<string | null>(null);
+    const dispatch = useDispatch()
+
+    const [trigger, { data: solidSettingsDataInitialData }] = useLazyGetSolidSettingsQuery();
+    const solidSettingsData = useSelector((state: any) => state.settingsState?.solidSettings);
+    useEffect(() => {
+        if (solidSettingsDataInitialData) {
+            dispatch(setSolidSettings(solidSettingsDataInitialData?.data));
+        }
+    }, [solidSettingsDataInitialData]);
+
+
+    useEffect(() => {
+        trigger("") // Fetch settings on mount
+    }, [trigger])
+    const pathname = usePathname();
+    const [bulkUpdateSolidSettings] = useBulkUpdateSolidSettingsMutation();
+    const toast = useRef<Toast>(null);
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+                ? { sticky: true }            // stays until user closes
+                : { life: 3000 }),
+        });
+    };
+
+    const initialValues = {
+        appLogo: solidSettingsData?.appLogo ?? null,
+        companylogo: solidSettingsData?.companylogo ?? null,
+        passwordlessRegistrationValidateWhat: solidSettingsData?.passwordlessRegistrationValidateWhat ?? "email",
+        allowPublicRegistration: solidSettingsData?.allowPublicRegistration ?? false,
+        passwordBasedAuth: solidSettingsData?.passwordBasedAuth ?? false,
+        passwordLessAuth: solidSettingsData?.passwordLessAuth ?? false,
+        activateUserOnRegistration: solidSettingsData?.activateUserOnRegistration ?? false,
+        iamGoogleOAuthEnabled: solidSettingsData?.iamGoogleOAuthEnabled ?? false,
+        shouldQueueEmails: solidSettingsData?.shouldQueueEmails ?? false,
+        shouldQueueSms: solidSettingsData?.shouldQueueSms ?? false,
+        authPagesTheme: solidSettingsData?.authPagesTheme ?? "light",
+        authPagesLayout: solidSettingsData?.authPagesLayout ?? "center",
+        defaultRole: solidSettingsData?.defaultRole ?? "Admin",
+        appLogoPosition: solidSettingsData?.appLogoPosition ?? "in_form_view",
+        showAuthContent: solidSettingsData?.showAuthContent ?? false,
+        appTitle: solidSettingsData?.appTitle ?? "SolidX",
+        appSubtitle: solidSettingsData?.appSubtitle ?? "Welcome To",
+        appDescription: solidSettingsData?.appDescription ?? "appDescription",
+        showLegalLinks: solidSettingsData?.showLegalLinks ?? false,
+        appTnc: solidSettingsData?.appTnc ?? null,
+        appPrivacyPolicy: solidSettingsData?.appPrivacyPolicy ?? null,
+        enableDarkMode: solidSettingsData?.enableDarkMode ?? false,
+        copyright: solidSettingsData?.copyright ?? null,
+        forceChangePasswordOnFirstLogin: solidSettingsData?.forceChangePasswordOnFirstLogin ?? false,
+        contactSupportEmail: solidSettingsData?.contactSupportEmail ?? null,
+        contactSupportDisplayName: solidSettingsData?.contactSupportDisplayName ?? null,
+        contactSupportIcon: solidSettingsData?.contactSupportIcon ?? null,
+        authScreenRightBackgroundImage: solidSettingsData?.authScreenRightBackgroundImage ?? null,
+        authScreenLeftBackgroundImage: solidSettingsData?.authScreenLeftBackgroundImage ?? null,
+        authScreenCenterBackgroundImage: solidSettingsData?.authScreenCenterBackgroundImage ?? null,
+        solidXGenAiCodeBuilderConfig: solidSettingsData?.solidXGenAiCodeBuilderConfig ?? {
+            defaultProvider: "",
+            availableProviders: []
+        }
+        // llmProvider: solidSettingsData?.llmProvider ?? null,
+        // llModelName: solidSettingsData?.llModelName ?? null,
+        // llmProviderApiKey: solidSettingsData?.llmProviderApiKey ?? null,
+        // llmProviderBaseURL: solidSettingsData?.llmProviderBaseURL ?? null,
+        // llmModelIdentifier: solidSettingsData?.llmModelIdentifier ?? null
+
+
+    };
+    const formik = useFormik({
+        initialValues: initialValues,
+        enableReinitialize: true,
+        onSubmit: async (values) => {
+            try {
+
+                const profiles = values.solidXGenAiCodeBuilderConfig.availableProviders;
+                console.log("profiles", profiles);
+                // ✅ Only set defaultProvider if it's empty AND there is at least one profile
+                if (!values.solidXGenAiCodeBuilderConfig.defaultProvider && profiles && profiles.length > 0) {
+                    values.solidXGenAiCodeBuilderConfig.defaultProvider = profiles[0].provider;
+                }
+
+                const updatedSettingsArray: Array<{ key: string; value: string; type: string }> = [];
+                const currentSettings = solidSettingsData || {};
+
+                const formData = new FormData();
+
+                // Compare changed fields
+                Object.entries(values).forEach(([key, value]) => {
+                    const currentValue = currentSettings[key];
+
+                    const normalizedCurrent = currentValue ?? "";
+                    const normalizedValue = value ?? "";
+
+                    if (normalizedCurrent !== normalizedValue) {
+                        // If file, append to formData and use placeholder value in JSON
+                        if (value instanceof File) {
+                            formData.append(key, value);
+                            updatedSettingsArray.push({
+                                key,
+                                value: "",
+                                type: "system",
+                            });
+                        } else {
+                            updatedSettingsArray.push({
+                                key,
+                                value: typeof value === "string" ? value : JSON.stringify(value),
+                                type: "system",
+                            });
+                        }
+                    }
+                });
+
+                if (updatedSettingsArray.length === 0) {
+                    showToast("success", "No Changes", "No settings were updated");
+                    return;
+                }
+
+                // Append settings array to formData
+                formData.append("settings", JSON.stringify(updatedSettingsArray));
+
+                // Call API
+                const response = await bulkUpdateSolidSettings({ data: formData }).unwrap();
+
+                if (response.statusCode === 200) {
+                    showToast("success", "Updated", "Settings updated");
+                    trigger("")
+                }
+
+            } catch (error) {
+                console.log("Error updating settings:", error);
+                showToast("error", ERROR_MESSAGES.FAILED, ERROR_MESSAGES.SOMETHING_WRONG);
+            }
+        },
+    });
+
+
+    const showError = async () => {
+        const errors = await formik.validateForm();
+        const errorMessages = Object.values(errors);
+
+        if (errorMessages.length > 0 && toast.current) {
+            handleError(errorMessages)
+        }
+    }
+    useEffect(() => {
+
+    }, [pathname])
+
+    const positionMap: Record<'left' | 'center' | 'right', string> = {
+        left: 'The form will appear on the left side of the screen, while the banner will be positioned on the right side.',
+        center: 'The form will be centered in the middle of the screen for balanced alignment.',
+        right: 'The form will appear on the right side of the screen, and the banner will be positioned on the left side.'
+    };
+
+    const onAppLogoDrop = useCallback(
+        (acceptedFiles: File[]) => {
+            const file = acceptedFiles[0];
+            if (file) {
+                if (file.size > 2 * 1024 * 1024) {
+                    toast.current?.show({
+                        severity: "error",
+                        summary: "File too large",
+                        detail: "Maximum file size is 2MB",
+                        sticky: true
+                    });
+                    return;
+                }
+                formik.setFieldValue("appLogo", file);
+                setAppLogoPreview(URL.createObjectURL(file));
+            }
+        },
+        [formik]
+    );
+
+    const onCompanyLogoDrop = useCallback((acceptedFiles: File[]) => {
+        const file = acceptedFiles[0];
+        if (file) {
+            if (file.size > 2 * 1024 * 1024) {
+                toast.current?.show({
+                    severity: "error",
+                    summary: "File too large",
+                    detail: "Maximum file size is 2MB",
+                    sticky: true
+                });
+                return;
+            }
+            formik.setFieldValue("companylogo", file);
+            setCompanyLogoPreview(URL.createObjectURL(file));
+        }
+    }, [formik]);
+
+    const {
+        getRootProps: getAppLogoRootProps,
+        getInputProps: getAppLogoInputProps,
+        isDragActive: isAppLogoDragActive
+    } = useDropzone({
+        accept: {
+            'image/png': ['.png'],
+            'image/jpeg': ['.jpeg', '.jpg'],
+            'image/svg+xml': ['.svg'],
+            'image/webp': ['.webp']
+        },
+        multiple: false,
+        onDrop: onAppLogoDrop
+    });
+    const {
+        getRootProps: getCompanyLogoRootProps,
+        getInputProps: getCompanyLogoInputProps,
+        isDragActive: isCompanyLogoDragActive
+    } = useDropzone({
+        accept: {
+            'image/png': ['.png'],
+            'image/jpeg': ['.jpeg', '.jpg'],
+            'image/svg+xml': ['.svg'],
+            'image/webp': ['.webp']
+        },
+        multiple: false,
+        onDrop: onCompanyLogoDrop
+    });
+
+    const removeAppLogo = () => {
+        formik.setFieldValue("appLogo", null);
+        if (appLogoPreview) {
+            URL.revokeObjectURL(appLogoPreview);
+            setAppLogoPreview(null);
+        }
+    };
+
+    const removeCompanyLogo = () => {
+        formik.setFieldValue("companylogo", null);
+        if (companyLogoPreview) {
+            URL.revokeObjectURL(companyLogoPreview);
+            setCompanyLogoPreview(null);
+        }
+    };
+
+
+    const onAuthScreenRightBackgroundImageDrop = useCallback(
+        (acceptedFiles: File[]) => {
+            const file = acceptedFiles[0];
+            if (file) {
+                if (file.size > 2 * 1024 * 1024) {
+                    toast.current?.show({
+                        severity: "error",
+                        summary: ERROR_MESSAGES.FILE_LARGE,
+                        detail: ERROR_MESSAGES.MAX_FILE_SIZE,
+                        sticky: true
+                    });
+                    return;
+                }
+                formik.setFieldValue("authScreenRightBackgroundImage", file);
+                setAuthScreenRightBackgroundImagePreview(URL.createObjectURL(file));
+            }
+        },
+        [formik]
+    );
+
+    const onAuthScreenLeftBackgroundImageDrop = useCallback((acceptedFiles: File[]) => {
+        const file = acceptedFiles[0];
+        if (file) {
+            if (file.size > 2 * 1024 * 1024) {
+                toast.current?.show({
+                    severity: "error",
+                    summary: ERROR_MESSAGES.FILE_LARGE,
+                    detail: ERROR_MESSAGES.MAX_FILE_SIZE,
+                    sticky: true,
+                });
+                return;
+            }
+            formik.setFieldValue("authScreenLeftBackgroundImage", file);
+            setAuthScreenLeftBackgroundImagePreview(URL.createObjectURL(file));
+        }
+    }, [formik]);
+
+    const onAuthScreenCenterBackgroundImageDrop = useCallback((acceptedFiles: File[]) => {
+        const file = acceptedFiles[0];
+        if (file) {
+            if (file.size > 2 * 1024 * 1024) {
+                toast.current?.show({
+                    severity: "error",
+                    summary: ERROR_MESSAGES.FILE_LARGE,
+                    detail: ERROR_MESSAGES.MAX_FILE_SIZE,
+                    sticky: true,
+                });
+                return;
+            }
+            formik.setFieldValue("authScreenCenterBackgroundImage", file);
+            setAuthScreenCenterBackgroundImagePreview(URL.createObjectURL(file));
+        }
+    }, [formik]);
+
+    const {
+        getRootProps: getAuthScreenRightBackgroundImageRootProps,
+        getInputProps: getAuthScreenRightBackgroundImageInputProps,
+        isDragActive: isAuthScreenRightBackgroundImageDragActive
+    } = useDropzone({
+        accept: {
+            'image/png': ['.png'],
+            'image/jpeg': ['.jpeg', '.jpg'],
+            'image/svg+xml': ['.svg'],
+            'image/webp': ['.webp']
+        },
+        multiple: false,
+        onDrop: onAuthScreenRightBackgroundImageDrop
+    });
+
+    const {
+        getRootProps: getAuthScreenLeftBackgroundImageRootProps,
+        getInputProps: getAuthScreenLeftBackgroundImageInputProps,
+        isDragActive: isAuthScreenLeftBackgroundImageDragActive
+    } = useDropzone({
+        accept: {
+            'image/png': ['.png'],
+            'image/jpeg': ['.jpeg', '.jpg'],
+            'image/svg+xml': ['.svg'],
+            'image/webp': ['.webp']
+        },
+        multiple: false,
+        onDrop: onAuthScreenLeftBackgroundImageDrop
+    });
+
+    const {
+        getRootProps: getAuthScreenCenterBackgroundImageRootProps,
+        getInputProps: getAuthScreenCenterBackgroundImageInputProps,
+        isDragActive: isAuthScreenCenterBackgroundImageDragActive
+    } = useDropzone({
+        accept: {
+            'image/png': ['.png'],
+            'image/jpeg': ['.jpeg', '.jpg'],
+            'image/svg+xml': ['.svg'],
+            'image/webp': ['.webp']
+        },
+        multiple: false,
+        onDrop: onAuthScreenCenterBackgroundImageDrop
+    });
+
+    const removeAuthScreenRightBackgroundImage = () => {
+        formik.setFieldValue("authScreenRightBackgroundImage", null);
+        if (authScreenRightBackgroundImagePreview) {
+            URL.revokeObjectURL(authScreenRightBackgroundImagePreview);
+            setAuthScreenRightBackgroundImagePreview(null);
+        }
+    };
+
+    const removeAuthScreenLeftBackgroundImage = () => {
+        formik.setFieldValue("authScreenLeftBackgroundImage", null);
+        if (authScreenLeftBackgroundImagePreview) {
+            URL.revokeObjectURL(authScreenLeftBackgroundImagePreview);
+            setAuthScreenLeftBackgroundImagePreview(null);
+        }
+    };
+
+    const removeAuthScreenCenterBackgroundImage = () => {
+        formik.setFieldValue("authScreenCenterBackgroundImage", null);
+        if (authScreenCenterBackgroundImagePreview) {
+            URL.revokeObjectURL(authScreenCenterBackgroundImagePreview);
+            setAuthScreenCenterBackgroundImagePreview(null);
+        }
+    };
+
+
+
+    // const [currentProfile, setcurrentProfile] = useState<string>("");
+
+    const handleProviderSelect = (value: string) => {
+        // 🔄 Add profile if doesn't exist
+        const profiles = formik.values.solidXGenAiCodeBuilderConfig.availableProviders;
+        const exists = profiles.some((p: any) => p.provider === value);
+
+        const newProfiles = exists
+            ? profiles
+            : [
+                ...profiles,
+                {
+                    id: Date.now().toString(),
+                    provider: ""
+                },
+            ];
+
+
+        formik.setFieldValue("solidXGenAiCodeBuilderConfig.defaultProvider", value);
+        formik.setFieldValue("solidXGenAiCodeBuilderConfig.availableProviders", newProfiles);
+    };
+
+    const handleProfileUpdate = (key: string, value: string) => {
+        const config = formik.values.solidXGenAiCodeBuilderConfig ?? {
+            availableProviders: [],
+            defaultProvider: "",
+        };
+
+        const profiles = config.availableProviders ?? [];
+        const defaultProvider = config.defaultProvider;
+
+        let updatedProfiles: any[];
+
+        // ✅ If profile exists → update it immutably
+        if (profiles.some((p: any) => p.provider === defaultProvider)) {
+            updatedProfiles = profiles.map((p: any) =>
+                p.provider === defaultProvider ? { ...p, [key]: value } : p
+            );
+        } else {
+            // ✅ If profile doesn't exist → create it and set this key
+            updatedProfiles = [
+                ...profiles,
+                {
+                    id: Date.now().toString(),
+                    provider: defaultProvider,
+                    [key]: value,
+                },
+            ];
+        }
+
+        // ✅ New array reference → Formik dirty check will pass
+        formik.setFieldValue(
+            "solidXGenAiCodeBuilderConfig.availableProviders",
+            updatedProfiles
+        );
+    };
+
+    const currentProfile =
+        (formik.values.solidXGenAiCodeBuilderConfig.availableProviders ?? []).find(
+            (p: any) => p.provider === formik.values.solidXGenAiCodeBuilderConfig.defaultProvider
+        ) || null;
+
+
+    return (
+        <div className="page-parent-wrapper">
+            <Toast ref={toast} />
+            <div className="solid-form-wrapper">
+                <div className="solid-form-section">
+                    <form onSubmit={formik.handleSubmit}>
+                        <div className="page-header secondary-border-bottom">
+                            <div className="form-wrapper-title ">Settings</div>
+                            <div className="gap-3 flex">
+                                {formik.dirty &&
+                                    <Button label="Save" size="small" onClick={() => showError()} type="submit" />
+                                }
+                                <CancelButton />
+                            </div>
+                        </div>
+                        <div className="px-4 py-3 md:p-4 solid-form-content">
+                            {pathname.includes("app-settings") &&
+                                <>
+                                    <div className='formgrid grid'>
+                                        <div className='col-12 lg:col-10 xl:col-8'>
+                                            <div className="formgrid grid">
+                                                <div className="col-12 md:col-6">
+                                                    <p className='font-bold ' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>App Logo </p>
+                                                    <div>
+                                                        <div {...getAppLogoRootProps()} className="solid-dropzone-wrapper" style={{ borderRadius: 8 }}>
+                                                            <input {...getAppLogoInputProps()} />
+                                                            {/* {isAppLogoDragActive && */}
+                                                            <SettingDropzoneActivePlaceholder />
+                                                            {/* } */}
+                                                        </div>
+                                                        <div className="mt-2">
+                                                            {(() => {
+                                                                const logoSrc = (SolidLogo as any).src || SolidLogo;
+
+                                                                let src = appLogoPreview
+                                                                    ? appLogoPreview
+                                                                    : formik.values.appLogo
+                                                                        ? formik.values.appLogo
+                                                                        : logoSrc
+
+                                                                const isBlobOrAbsolute = src?.startsWith("blob:") || src?.startsWith("http");
+
+                                                                if (!isBlobOrAbsolute && !src.startsWith("/")) {
+                                                                    src = `${process.env.API_URL}/${src}`;
+                                                                }
+                                                                return (
+                                                                    <SolidUploadedImage src={src} className='solid-app-logo' />
+                                                                );
+                                                            })()}
+                                                        </div>
+                                                        {formik.values.appLogo && (
+                                                            <SettingsImageRemoveButton onClick={removeAppLogo} />
+                                                        )}
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 md:col-6">
+                                                    <p className='font-bold ' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Company Logo </p>
+                                                    <div>
+                                                        <div {...getCompanyLogoRootProps()} className="solid-dropzone-wrapper" style={{ borderRadius: 8 }}>
+                                                            <input {...getCompanyLogoInputProps()} />
+                                                            {/* {isCompanyLogoDragActive && */}
+                                                            <SettingDropzoneActivePlaceholder />
+                                                            {/* } */}
+                                                        </div>
+                                                        <div className="mt-2">
+                                                            {(() => {
+                                                                const logoSrc = (SolidLogo as any).src || SolidLogo;
+
+                                                                let src = companyLogoPreview
+                                                                    ? companyLogoPreview
+                                                                    : formik.values.companylogo
+                                                                        ? formik.values.companylogo
+                                                                        : logoSrc
+
+                                                                const isBlobOrAbsolute = src?.startsWith("blob:") || src?.startsWith("http");
+
+                                                                if (!isBlobOrAbsolute && !src.startsWith("/")) {
+                                                                    src = `${process.env.API_URL}/${src}`;
+                                                                }
+
+                                                                return (
+                                                                    <SolidUploadedImage src={src} className='solid-compony-logo' />
+                                                                );
+                                                            })()}
+                                                        </div>
+                                                        {formik.values.companylogo && (
+                                                            <SettingsImageRemoveButton onClick={removeCompanyLogo} />
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>App Logo Position</p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-12 lg:col-10 xl:col-8'>
+                                            <div className="flex align-items-center gap-3">
+                                                <div className="flex align-items-center">
+                                                    <RadioButton
+                                                        inputId="appLogoPosition-in_form_view"
+                                                        name="appLogoPosition"
+                                                        value="in_form_view"
+                                                        checked={formik.values.appLogoPosition === "in_form_view"}
+                                                        onChange={(e) => formik.setFieldValue("appLogoPosition", e.value)}
+                                                    />
+                                                    <label htmlFor="appLogoPosition-in_form_view" className="ml-2">In Form View</label>
+                                                </div>
+                                                <div className="flex align-items-center">
+                                                    <RadioButton
+                                                        inputId="appLogoPosition-in_image_view"
+                                                        name="appLogoPosition"
+                                                        value="in_image_view"
+                                                        checked={formik.values.appLogoPosition === "in_image_view"}
+                                                        onChange={(e) => formik.setFieldValue("appLogoPosition", e.value)}
+                                                    />
+                                                    <label htmlFor="appLogoPosition-in_image_view" className="ml-2">In Image View</label>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
+                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Title & Description Details </p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-12 lg:col-10 xl:col-8'>
+                                            <div className="formgrid grid">
+                                                <div className="col-12 md:col-6">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-10 sm:col-9 lg:col-5 pb-2 md:pb-0">
+                                                            <label className="form-field-label">Show Details on Authentication Screen</label>
+                                                        </div>
+                                                        <div className="col-2 sm:col-3 lg:col-7">
+                                                            <InputSwitch
+                                                                name="showAuthContent"
+                                                                checked={formik.values.showAuthContent}
+                                                                onChange={(e) => formik.setFieldValue("showAuthContent", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 md:col-6">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-12 md:col-5 pb-2 md:pb-0">
+                                                            <label className="form-field-label">App Title</label>
+                                                        </div>
+                                                        <div className="col-12 md:col-7">
+                                                            <InputText
+                                                                type="text"
+                                                                id="appTitle"
+                                                                name="appTitle"
+                                                                onChange={formik.handleChange}
+                                                                value={formik.values.appTitle}
+                                                                className='w-full'
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 md:col-6 mt-4">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-12 md:col-5 pb-2 md:pb-0">
+                                                            <label className="form-field-label">App Subtitle</label>
+                                                        </div>
+                                                        <div className="col-12 md:col-7">
+                                                            <InputText
+                                                                type="text"
+                                                                id="appSubtitle"
+                                                                name="appSubtitle"
+                                                                onChange={formik.handleChange}
+                                                                value={formik.values.appSubtitle}
+                                                                className='w-full'
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 md:col-6 mt-4">
+                                                    <div className="formgrid grid align-items-start">
+                                                        <div className="col-12 md:col-5 pb-2 md:pb-0">
+                                                            <label className="form-field-label">Description</label>
+                                                        </div>
+                                                        <div className="col-12 md:col-7">
+                                                            <InputTextarea
+                                                                rows={3}
+                                                                id="appDescription"
+                                                                name="appDescription"
+                                                                onChange={formik.handleChange}
+                                                                value={formik.values.appDescription}
+                                                                className='w-full'
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 md:col-6 mt-4">
+                                                    <div className="formgrid grid align-items-start">
+                                                        <div className="col-12 md:col-5 pb-2 md:pb-0">
+                                                            <label className="form-field-label">Copyright</label>
+                                                        </div>
+                                                        <div className="col-12 md:col-7">
+                                                            <InputTextarea
+                                                                rows={3}
+                                                                id="copyright"
+                                                                name="copyright"
+                                                                onChange={formik.handleChange}
+                                                                value={formik.values.copyright}
+                                                                className='w-full'
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
+
+                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Legal Links</p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-12 lg:col-10 xl:col-8'>
+                                            <div className="formgrid grid">
+                                                <div className="col-12 md:col-6">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-10 sm:col-9 lg:col-5">
+                                                            <label className="form-field-label">Show Legal Links</label>
+                                                        </div>
+                                                        <div className="col-2 sm:col-3 lg:col-7">
+                                                            <InputSwitch
+                                                                name="showLegalLinks"
+                                                                checked={formik.values.showLegalLinks}
+                                                                onChange={(e) => formik.setFieldValue("showLegalLinks", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 md:col-6">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-12 md:col-5 py-2 md:py-0">
+                                                            <label className="form-field-label">Terms and Conditions Link</label>
+                                                        </div>
+                                                        <div className="col-12 md:col-7">
+                                                            <InputText
+                                                                type="text"
+                                                                id="appTnc"
+                                                                name="appTnc"
+                                                                onChange={formik.handleChange}
+                                                                value={formik.values.appTnc}
+                                                                className='w-full'
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 md:col-6 mt-3">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-12 md:col-5 pb-2 md:pb-0">
+                                                            <label className="form-field-label">Privacy Policy Link</label>
+                                                        </div>
+                                                        <div className="col-12 md:col-7">
+                                                            <InputText
+                                                                type="text"
+                                                                id="appPrivacyPolicy"
+                                                                name="appPrivacyPolicy"
+                                                                onChange={formik.handleChange}
+                                                                value={formik.values.appPrivacyPolicy}
+                                                                className='w-full'
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
+                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Theme</p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-12 lg:col-10 xl:col-8'>
+                                            <div className="formgrid grid">
+                                                <div className="col-12 md:col-6">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-10 sm:col-10 lg:col-5">
+                                                            <label className="form-field-label">Enable Dark Mode</label>
+                                                        </div>
+                                                        <div className="col-2 sm:col-3 lg:col-7">
+                                                            <InputSwitch
+                                                                name="enableDarkMode"
+                                                                checked={formik.values.enableDarkMode}
+                                                                onChange={(e) => formik.setFieldValue("enableDarkMode", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </>
+                            }
+                            {pathname.includes("authentication-settings") &&
+                                <>
+                                    <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>User Authentication  </p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-12 lg:col-10 xl:col-8'>
+                                            <div className="formgrid grid">
+                                                <div className="col-12">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-10 sm:col-9 lg:col-5">
+                                                            <label className="form-field-label">Public Registration</label>
+                                                        </div>
+                                                        <div className="col-2 sm:col-3 lg:col-7">
+                                                            <InputSwitch
+                                                                name="allowPublicRegistration"
+                                                                checked={formik.values.allowPublicRegistration}
+                                                                onChange={(e) => formik.setFieldValue("allowPublicRegistration", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 mt-3">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-10 sm:col-9 lg:col-5">
+                                                            <label className="form-field-label">Password Based Authentication</label>
+                                                        </div>
+                                                        <div className="col-2 sm:col-3 lg:col-7">
+                                                            <InputSwitch
+                                                                name="passwordBasedAuth"
+                                                                checked={formik.values.passwordBasedAuth}
+                                                                onChange={(e) => formik.setFieldValue("passwordBasedAuth", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 mt-3">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-10 sm:col-9 lg:col-5">
+                                                            <label className="form-field-label">Password Less Authentication</label>
+                                                        </div>
+                                                        <div className="col-2 sm:col-3 lg:col-7">
+                                                            <InputSwitch
+                                                                name="passwordLessAuth"
+                                                                checked={formik.values.passwordLessAuth}
+                                                                onChange={(e) => formik.setFieldValue("passwordLessAuth", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 mt-3">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-10 sm:col-9 lg:col-5">
+                                                            <label className="form-field-label">Auto Activate User on Registration </label>
+                                                        </div>
+                                                        <div className="col-2 sm:col-3 lg:col-7">
+                                                            <InputSwitch
+                                                                name="activateUserOnRegistration"
+                                                                checked={formik.values.activateUserOnRegistration}
+                                                                onChange={(e) => formik.setFieldValue("activateUserOnRegistration", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 mt-3">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-10 sm:col-9 lg:col-5">
+                                                            <label className="form-field-label">Allow Login/ Signup with Google </label>
+                                                        </div>
+                                                        <div className="col-2 sm:col-3 lg:col-7">
+                                                            <InputSwitch
+                                                                name="iamGoogleOAuthEnabled"
+                                                                checked={formik.values.iamGoogleOAuthEnabled}
+                                                                onChange={(e) => formik.setFieldValue("iamGoogleOAuthEnabled", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 mt-3">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-10 sm:col-9 lg:col-5">
+                                                            <label className="form-field-label">Force Password change on first Login </label>
+                                                        </div>
+                                                        <div className="col-2 sm:col-3 lg:col-7">
+                                                            <InputSwitch
+                                                                name="forceChangePasswordOnFirstLogin"
+                                                                checked={formik.values.forceChangePasswordOnFirstLogin}
+                                                                onChange={(e) => formik.setFieldValue("forceChangePasswordOnFirstLogin", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                {formik.values.passwordLessAuth === true &&
+                                                    <div className="col-12 mt-3">
+                                                        <div className="formgrid grid align-items-center">
+                                                            <div className="col-12 sm:col-12 lg:col-5 xl:col-5">
+                                                                <label className="form-field-label">Password Less Authentication Method</label>
+                                                            </div>
+                                                            <div className='col-12 sm:col-12 lg:col-6 xl:col-6'>
+                                                                <div className="flex align-items-center gap-3 mt-3 lg:mt-0">
+                                                                    <div className="flex align-items-center">
+                                                                        <RadioButton
+                                                                            inputId="passwordlessRegistrationValidateWhat-email"
+                                                                            name="passwordlessRegistrationValidateWhat"
+                                                                            value="email"
+                                                                            checked={formik.values.passwordlessRegistrationValidateWhat === "email"}
+                                                                            onChange={(e) => formik.setFieldValue("passwordlessRegistrationValidateWhat", e.value)}
+                                                                        />
+                                                                        <label htmlFor="passwordlessRegistrationValidateWhat-email" className="ml-2">Email</label>
+                                                                    </div>
+                                                                    <div className="flex align-items-center">
+                                                                        <RadioButton
+                                                                            inputId="passwordlessRegistrationValidateWhat-mobile"
+                                                                            name="passwordlessRegistrationValidateWhat"
+                                                                            value="mobile"
+                                                                            checked={formik.values.passwordlessRegistrationValidateWhat === "mobile"}
+                                                                            onChange={(e) => formik.setFieldValue("passwordlessRegistrationValidateWhat", e.value)}
+                                                                        />
+                                                                        <label htmlFor="passwordlessRegistrationValidateWhat-mobile" className="ml-2">Mobile</label>
+                                                                    </div>
+                                                                    <div className="flex align-items-center">
+                                                                        <RadioButton
+                                                                            inputId="passwordlessRegistrationValidateWhat-transactional"
+                                                                            name="passwordlessRegistrationValidateWhat"
+                                                                            value="transactional"
+                                                                            checked={formik.values.passwordlessRegistrationValidateWhat === "transactional"}
+                                                                            onChange={(e) => formik.setFieldValue("passwordlessRegistrationValidateWhat", e.value)}
+                                                                        />
+                                                                        <label htmlFor="passwordlessRegistrationValidateWhat-transactional" className="ml-2">Transactional</label>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        {formik.values.passwordlessRegistrationValidateWhat === "transactional" &&
+                                                            <p className="mt-3 text-sm font-bold">Note : In this method, you can pass the authentication method from the ui with possible values being either email or mobile. You can also pass both the values here</p>
+                                                        }
+                                                    </div>
+                                                }
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
+                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Authentication Screen Layout</p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-12 lg:col-10 xl:col-8'>
+                                            <div className="flex align-items-center gap-3">
+                                                <div className="flex align-items-center">
+                                                    <RadioButton
+                                                        inputId="authPagesLayout-left"
+                                                        name="authPagesLayout"
+                                                        value="left"
+                                                        checked={formik.values.authPagesLayout === "left"}
+                                                        onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
+                                                    />
+                                                    <label htmlFor="authPagesLayout-left" className="ml-2">Left</label>
+                                                </div>
+                                                <div className="flex align-items-center">
+                                                    <RadioButton
+                                                        inputId="authPagesLayout-center"
+                                                        name="authPagesLayout"
+                                                        value="center"
+                                                        checked={formik.values.authPagesLayout === "center"}
+                                                        onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
+                                                    />
+                                                    <label htmlFor="authPagesLayout-center" className="ml-2">Center</label>
+                                                </div>
+                                                <div className="flex align-items-center">
+                                                    <RadioButton
+                                                        inputId="authPagesLayout-right"
+                                                        name="authPagesLayout"
+                                                        value="right"
+                                                        checked={formik.values.authPagesLayout === "right"}
+                                                        onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
+                                                    />
+                                                    <label htmlFor="authPagesLayout-right" className="ml-2">Right</label>
+                                                </div>
+                                            </div>
+                                            <p className="mt-3 text-sm font-bold">Note : {positionMap[formik.values.authPagesLayout as 'left' | 'center' | 'right']}</p>
+                                        </div>
+                                    </div>
+                                    {formik.values.authPagesLayout === "center" && <></>}
+                                    <div className='formgrid grid'>
+                                        <div className='col-12 lg:col-10 xl:col-8'>
+                                            <div className="formgrid grid">
+                                                <div className="col-12 md:col-8 lg:col-6">
+                                                    <p className='font-bold ' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>{formik.values.authPagesLayout === "center" ? "Background" : "Banner"} Image</p>
+                                                    {formik.values.authPagesLayout === "left" &&
+                                                        <div>
+                                                            <div {...getAuthScreenLeftBackgroundImageRootProps()} className="solid-dropzone-wrapper" style={{ borderRadius: 8 }}>
+                                                                <input {...getAuthScreenLeftBackgroundImageInputProps()} />
+                                                                {/* {isAuthScreenLeftBackgroundImageDragActive && */}
+                                                                <SettingDropzoneActivePlaceholder note={"Recommended: 724×724px | Aspect ratio: 1:1"} />
+                                                                {/* } */}
+                                                            </div>
+                                                            <div className="mt-2">
+                                                                {(() => {
+                                                                    const logoSrc = (AuthScreenLeftBackgroundImage as any).src || AuthScreenLeftBackgroundImage;
+
+                                                                    let src = authScreenLeftBackgroundImagePreview
+                                                                        ? authScreenLeftBackgroundImagePreview
+                                                                        : formik.values.authScreenLeftBackgroundImage
+                                                                            ? formik.values.authScreenLeftBackgroundImage
+                                                                            : logoSrc
+
+                                                                    const isBlobOrAbsolute = src?.startsWith("blob:") || src?.startsWith("http");
+
+                                                                    if (!isBlobOrAbsolute && !src.startsWith("/")) {
+                                                                        src = `${process.env.API_URL}/${src}`;
+                                                                    }
+                                                                    return (
+                                                                        <SolidUploadedImage src={src} height={400} width={400} maxHeight={400} />
+                                                                    );
+                                                                })()}
+                                                            </div>
+                                                            {formik.values.authScreenLeftBackgroundImage && (
+                                                                <SettingsImageRemoveButton onClick={removeAuthScreenLeftBackgroundImage} />
+                                                            )}
+                                                        </div>
+                                                    }
+                                                    {formik.values.authPagesLayout === "right" &&
+                                                        <div>
+                                                            <div {...getAuthScreenRightBackgroundImageRootProps()} className="solid-dropzone-wrapper" style={{ borderRadius: 8 }}>
+                                                                <input {...getAuthScreenRightBackgroundImageInputProps()} />
+                                                                {/* {isAuthScreenRightBackgroundImageDragActive && */}
+                                                                <SettingDropzoneActivePlaceholder note={"Recommended: 724×724px | Aspect ratio: 1:1"} />
+                                                                {/* } */}
+                                                            </div>
+                                                            <div className="mt-2">
+                                                                {(() => {
+                                                                    const logoSrc = (AuthScreenRightBackgroundImage as any).src || AuthScreenRightBackgroundImage;
+
+                                                                    let src = authScreenRightBackgroundImagePreview
+                                                                        ? authScreenRightBackgroundImagePreview
+                                                                        : formik.values.authScreenRightBackgroundImage
+                                                                            ? formik.values.authScreenRightBackgroundImage
+                                                                            : logoSrc
+
+                                                                    const isBlobOrAbsolute = src?.startsWith("blob:") || src?.startsWith("http");
+
+                                                                    if (!isBlobOrAbsolute && !src.startsWith("/")) {
+                                                                        src = `${process.env.API_URL}/${src}`;
+                                                                    }
+                                                                    return (
+                                                                        <SolidUploadedImage src={src} height={400} width={400} maxHeight={400} />
+                                                                    );
+                                                                })()}
+                                                            </div>
+                                                            {formik.values.authScreenRightBackgroundImage && (
+                                                                <SettingsImageRemoveButton onClick={removeAuthScreenRightBackgroundImage} />
+                                                            )}
+                                                        </div>
+                                                    }
+                                                    {formik.values.authPagesLayout === "center" &&
+                                                        <div>
+                                                            <div {...getAuthScreenCenterBackgroundImageRootProps()} className="solid-dropzone-wrapper" style={{ borderRadius: 8 }}>
+                                                                <input {...getAuthScreenCenterBackgroundImageInputProps()} />
+                                                                <SettingDropzoneActivePlaceholder note={"Recommended: 1440px × 724px | Aspect ratio: 2:1"} />
+                                                            </div>
+                                                            <div className="mt-2">
+                                                                {(() => {
+                                                                    const logoSrc = (AuthScreenCenterBackgroundImage as any).src || AuthScreenCenterBackgroundImage;
+
+                                                                    let src = authScreenCenterBackgroundImagePreview
+                                                                        ? authScreenCenterBackgroundImagePreview
+                                                                        : formik.values.authScreenCenterBackgroundImage
+                                                                            ? formik.values.authScreenCenterBackgroundImage
+                                                                            : logoSrc
+
+                                                                    const isBlobOrAbsolute = src?.startsWith("blob:") || src?.startsWith("http");
+
+                                                                    if (!isBlobOrAbsolute && !src.startsWith("/")) {
+                                                                        src = `${process.env.API_URL}/${src}`;
+                                                                    }
+                                                                    return (
+                                                                        <SolidUploadedImage src={src} height={300} width={600} maxHeight={300} />
+                                                                    );
+                                                                })()}
+                                                            </div>
+                                                            {formik.values.authScreenCenterBackgroundImage && (
+                                                                <SettingsImageRemoveButton onClick={removeAuthScreenCenterBackgroundImage} />
+                                                            )}
+                                                        </div>
+                                                    }
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className='mt-2 lg:mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
+                                    {solidSettingsData?.enableDarkMode === true &&
+                                        <>
+                                            <p className='font-bold mt-3 lg:mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Authentication Screen Theme</p>
+                                            <div className='formgrid grid'>
+                                                <div className='col-12 lg:col-10 xl:col-8'>
+                                                    <div className="flex align-items-center gap-3">
+                                                        <div className="flex align-items-center">
+                                                            <RadioButton
+                                                                inputId="theme-light"
+                                                                name="authPagesTheme"
+                                                                value="light"
+                                                                checked={formik.values.authPagesTheme === "light"}
+                                                                onChange={(e) => formik.setFieldValue("authPagesTheme", e.value)}
+                                                            />
+                                                            <label htmlFor="theme-light" className="ml-2">Solid Light</label>
+                                                        </div>
+                                                        <div className="flex align-items-center">
+                                                            <RadioButton
+                                                                inputId="theme-dark"
+                                                                name="authPagesTheme"
+                                                                value="dark"
+                                                                checked={formik.values.authPagesTheme === "dark"}
+                                                                onChange={(e) => formik.setFieldValue("authPagesTheme", e.value)}
+                                                            />
+                                                            <label htmlFor="theme-dark" className="ml-2">Solid Dark</label>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </>
+                                    }
+                                </>
+                            }
+
+                            {pathname.includes("misc-settings") &&
+                                <>
+                                    <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Misc Details</p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-12 lg:col-10 xl:col-8'>
+                                            <div className="formgrid grid">
+                                                <div className="col-12 md:col-6 pb-3 md:pb-0">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-10 sm:col-9 lg:col-5 ">
+                                                            <label className="form-field-label">Use queue for sending emails</label>
+                                                        </div>
+                                                        <div className="col-2 sm:col-3 lg:col-7">
+                                                            <InputSwitch
+                                                                name="shouldQueueEmails"
+                                                                checked={formik.values.shouldQueueEmails}
+                                                                onChange={(e) => formik.setFieldValue("shouldQueueEmails", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 md:col-5 pb-2">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-10 sm:col-9 lg:col-5">
+                                                            <label className="form-field-label">Use queue for sending SMS</label>
+                                                        </div>
+                                                        <div className="col-2 sm:col-3 lg:col-7">
+                                                            <InputSwitch
+                                                                name="shouldQueueSms"
+                                                                checked={formik.values.shouldQueueSms}
+                                                                onChange={(e) => formik.setFieldValue("shouldQueueSms", e.value)}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <Divider />
+                                    <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Contact Support</p>
+                                    <div className='formgrid grid'>
+                                        <div className="col-12 lg:col-10 xl:col-8">
+                                            <div className='formgrid grid'>
+                                                <div className="col-12 md:col-6 pb-3 md:pb-0">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-12 md:col-5 pb-2 md:pb-0">
+                                                            <label className="form-field-label">Contact Support Email</label>
+                                                        </div>
+                                                        <div className="col-12 md:col-7">
+                                                            <InputText
+                                                                type="text"
+                                                                id="contactSupportEmail"
+                                                                name="contactSupportEmail"
+                                                                onChange={formik.handleChange}
+                                                                value={formik.values.contactSupportEmail}
+                                                                className='w-full'
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div className="col-12 md:col-6">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-12 md:col-5 pb-2 md:pb-0">
+                                                            <label className="form-field-label">Display Name</label>
+                                                        </div>
+                                                        <div className="col-12 md:col-7">
+                                                            <InputText
+                                                                type="text"
+                                                                id="contactSupportDisplayName"
+                                                                name="contactSupportDisplayName"
+                                                                onChange={formik.handleChange}
+                                                                value={formik.values.contactSupportDisplayName}
+                                                                className='w-full'
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </>
+                            }
+                            {pathname.includes("ai-settings") &&
+                                <>
+                                    <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Ai Details</p>
+                                    <div className='formgrid grid'>
+                                        <div className='col-12 lg:col-10 xl:col-8'>
+                                            <div className="formgrid grid">
+                                                <div className="col-12 md:col-10 lg:col-6 mt-3 md:mt-4">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-12 md:col-3 pb-2 md:pb-0">
+                                                            <label className="form-field-label">Default Provider</label>
+                                                        </div>
+                                                        <div className="col-12 md:col-9">
+                                                            <Dropdown
+                                                                className='w-full'
+                                                                value={formik.values.solidXGenAiCodeBuilderConfig.defaultProvider}
+                                                                options={[
+                                                                    { label: "OpenAI", value: "openai" },
+                                                                    { label: "Anthropic", value: "anthropic" },
+                                                                ]}
+                                                                onChange={(e) => handleProviderSelect(e.value)}
+                                                                placeholder="Select Provider"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                {/* <div className="col-6 mt-4">
+                                                    <div className="formgrid grid align-items-center">
+                                                        <div className="col-5">
+                                                            <label className="form-field-label">Model Name</label>
+                                                        </div>
+                                                        <div className="col-7">
+                                                            <InputText
+                                                                type="text"
+                                                                id="llModelName"
+                                                                name="llModelName"
+                                                                onChange={formik.handleChange}
+                                                                value={formik.values.llModelName}
+                                                                className='w-full'
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>  */}
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <Divider />
+                                    <div className='grid'>
+                                        <div className='col-12 md:col-6'>
+                                            {formik.values.solidXGenAiCodeBuilderConfig.defaultProvider && (
+                                                <>
+                                                    {formik.values.solidXGenAiCodeBuilderConfig.defaultProvider === "openai" && (
+                                                        <OpenAiProviderComponent
+                                                            profile={currentProfile}
+                                                            onUpdate={handleProfileUpdate}
+                                                        />
+                                                    )}
+                                                    {formik.values.solidXGenAiCodeBuilderConfig.defaultProvider === "anthropic" && (
+                                                        <AnthropicProviderComponent
+                                                            profile={currentProfile}
+                                                            onUpdate={handleProfileUpdate}
+                                                        />
+                                                    )}
+                                                </>
+                                            )}
+                                        </div>
+                                    </div>
+                                </>
+                            }
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    )
+}