@solidstarters/solid-core-ui 1.1.15 → 1.1.17

package/src/components/auth/SolidChangeForcePassword.tsx

@@ -39,24 +39,34 @@ const SolidChangeForcePassword = () => {
             id: session?.data?.user?.user?.id,
         },
         validationSchema,
-        onSubmit: async (values) => {
+        onSubmit: async (values, { setErrors }) => {
             try {
                 const payload = {
                     id: values.id,
-                    email: values.email,
+                    email: session?.data?.user?.user?.email,
                     currentPassword: values.currentPassword,
                     newPassword: values.newPassword,
                 };
+                console.log("Payload:", payload);
+
                 // Call the mutation and handle the response
                 const response = await changePassword(payload).unwrap(); // Await the API call and unwrap to handle errors.
-                if (response?.statusCode === 200) {
+                if (response?.error) {
+                    showToast("error", "Error", response.error)
+                    setErrors({
+                        currentPassword: "Incorrect Current Password",
+                        newPassword: "Passwords must match",
+                        confirmPassword: "Passwords must match",
+                    })
+                } else {
                     showToast("success", "Force Password Change Success", "Password Change Successfully");
                     signOut({ callbackUrl: "/auth/login" })
-                } else (
-                    showToast("error", "Login Error", response.error)
-                )
-            } catch (err:any) {
+                }
+            } catch (err: any) {
                 showToast("error", "Login Failed", err?.data?.message);
+                setErrors({
+                    currentPassword: "Incorrect Current Password",
+                })
             }
         },
     });
@@ -68,31 +78,16 @@ const SolidChangeForcePassword = () => {
             <Toast ref={toast} />
 
             <form onSubmit={formik.handleSubmit} className='d-flex flex-column gap-3 auth-form'>
-                <div className="flex flex-column gap-2 mt-2">
-                    <label htmlFor="email" className="solid-auth-input-label">Email Id</label>
-                    <InputText
-                        id="email"
-                        name="email"
-                        placeholder="Email ID"
-                        value={formik.values.email}
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        readOnly
-                    />
-                </div>
-                <div className="flex flex-column gap-2 mt-4" style={{}}>
+                <div className="flex flex-column gap-2 mt-2" style={{}}>
                     <label htmlFor="currentPassword" className="solid-auth-input-label">Current Password</label>
                     <Password
                         id="currentPassword"
                         name="currentPassword"
-                        placeholder="***************"
                         value={formik.values.currentPassword}
                         onChange={formik.handleChange}
                         onBlur={formik.handleBlur}
                         toggleMask
-                        className={classNames("", {
-                            "p-invalid": isFormFieldValid(formik, "password"),
-                        })}
+                        invalid={!!formik.errors.currentPassword}
                         inputClassName="w-full"
                         feedback={false}
                     />
@@ -107,14 +102,11 @@ const SolidChangeForcePassword = () => {
                     <Password
                         id="newPassword"
                         name="newPassword"
-                        placeholder="***************"
                         value={formik.values.newPassword}
                         onChange={formik.handleChange}
                         onBlur={formik.handleBlur}
                         toggleMask
-                        className={classNames("", {
-                            "p-invalid": isFormFieldValid(formik, "newPassword"),
-                        })}
+                        invalid={!!formik.errors.newPassword}
                         inputClassName="w-full"
                         feedback={false}
                     />
@@ -129,14 +121,11 @@ const SolidChangeForcePassword = () => {
                     <Password
                         id="confirmPassword"
                         name="confirmPassword"
-                        placeholder="***************"
                         value={formik.values.confirmPassword}
                         onChange={formik.handleChange}
                         onBlur={formik.handleBlur}
                         toggleMask
-                        className={classNames("", {
-                            "p-invalid": isFormFieldValid(formik, "confirmPassword"),
-                        })}
+                        invalid={!!formik.errors.confirmPassword}
                         inputClassName="w-full"
                         feedback={false}
                     />

package/src/components/auth/SolidForgotPassword.tsx

@@ -106,14 +106,15 @@ const SolidForgotPassword = () => {
                     </div>
                     <div className="mt-4">
                         <Button className="w-full font-light auth-submit-button" label="Send OTP" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                        <Button type="button" label="Back" className="w-full auth-back-button text-center" link onClick={() => (window.location.href = '/auth/login')} />
                     </div>
                 </form>
             </div>
-            <div className="text-center mt-5">
+            {/* <div className="text-center mt-5">
                 <div className="text-sm text-400 secondary-dark-color">
                     {'<'} Back to <Link className="font-bold" href="/auth/login">Sign In</Link>
                 </div>
-            </div>
+            </div> */}
         </>
     );
 };

package/src/components/auth/SolidInitialLoginOtp.tsx

@@ -5,7 +5,7 @@ import { useConfirmOtpLoginMutation } from "@/redux/api/authApi";
 import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
 import { Form, Formik } from "formik";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "primereact/button";
 import { InputOtp } from "primereact/inputotp";
 import { Message } from "primereact/message";
@@ -13,7 +13,10 @@ import { Toast } from "primereact/toast";
 import { useEffect, useRef } from "react";
 import * as Yup from "yup";
 
-const SolidInitialLoginOtp = ({ email }: { email: string }) => {
+const SolidInitialLoginOtp = () => {
+    const searchParams = useSearchParams();
+    const tempEmail = searchParams.get('email');
+    const email = tempEmail ? decodeURIComponent(tempEmail) : '';
     const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
     useEffect(() => {
         trigger("")
@@ -67,7 +70,7 @@ const SolidInitialLoginOtp = ({ email }: { email: string }) => {
                             otp: "",
                         }}
                         validationSchema={validationSchema}
-                        onSubmit={async (values, { setSubmitting }) => {
+                        onSubmit={async (values, { setSubmitting, setErrors }) => {
                             try {
                                 const payload = {
                                     type: "email",
@@ -81,7 +84,10 @@ const SolidInitialLoginOtp = ({ email }: { email: string }) => {
                                     showToast("success", "Login Successfully", "Login");
                                     router.push(`/admin/core/solid-core/user/list`);
                                 } else {
-                                    showToast("error", "Login Error", response.error);
+                                    showToast("error", "Invalid OTP", response.error);
+                                    setErrors({
+                                        otp: "Invalid OTP",
+                                    });
                                 }
                             } catch (err: any) {
                                 showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
@@ -92,13 +98,14 @@ const SolidInitialLoginOtp = ({ email }: { email: string }) => {
                     >
                         {(formik) => (
                             <Form>
-                                <div className="flex flex-column gap-2 px-3">
+                                <div className="flex flex-column gap-2">
                                     <label htmlFor="otp" className="solid-auth-input-label">Enter OTP</label>
                                     <InputOtp
                                         value={formik.values.otp}
                                         onChange={(e) => formik.setFieldValue("otp", e.value)}
                                         length={6}
                                         style={{ width: '100%' }}
+                                        invalid={!!formik.errors.otp}
                                     />
                                     {isFormFieldValid(formik, "otp") && (
                                         <Message className="text-red-500 text-sm" severity="error" text={formik.errors.otp?.toString()} />
@@ -112,17 +119,18 @@ const SolidInitialLoginOtp = ({ email }: { email: string }) => {
                                 </div>
                                 <div className="mt-4">
                                     <Button type="submit" className="w-full font-light auth-submit-button" label="Verify" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                                    <Button type="button" label="Back" className="w-full auth-back-button text-center" link onClick={() => (window.location.href = '/auth/login')} />
                                 </div>
                             </Form>
                         )}
                     </Formik>
                 </>
             </div>
-            <div className="text-center mt-5">
+            {/* <div className="text-center mt-5">
                 <div className="text-sm text-400 secondary-dark-color">
-                    {'<'} Back to <Link className="font-bold" href="/auth/login">Sign In</Link>
+                    {'<'} Back to <Link className="font-bold" href="/auth/login">Back</Link>
                 </div>
-            </div>
+            </div> */}
         </>
     );
 };

package/src/components/auth/SolidInitiateRegisterOtp.tsx

@@ -5,7 +5,7 @@ import { useConfirmOtpRegisterMutation } from "@/redux/api/authApi";
 import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
 import { Form, Formik } from "formik";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "primereact/button";
 import { InputOtp } from "primereact/inputotp";
 import { Message } from "primereact/message";
@@ -13,7 +13,10 @@ import { Toast } from "primereact/toast";
 import { useEffect, useRef } from "react";
 import * as Yup from "yup";
 
-const SolidInitiateRegisterOtp = ({ email }: { email: string }) => {
+const SolidInitiateRegisterOtp = () => {
+    const searchParams = useSearchParams();
+    const tempEmail = searchParams.get('email');
+    const email = tempEmail ? decodeURIComponent(tempEmail) : '';
     const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
     useEffect(() => {
         trigger("")
@@ -67,7 +70,7 @@ const SolidInitiateRegisterOtp = ({ email }: { email: string }) => {
                             otp: "",
                         }}
                         validationSchema={validationSchema}
-                        onSubmit={async (values, { setSubmitting }) => {
+                        onSubmit={async (values, { setSubmitting, setErrors }) => {
                             try {
                                 const payload = {
                                     type: "email",
@@ -81,7 +84,10 @@ const SolidInitiateRegisterOtp = ({ email }: { email: string }) => {
                                     showToast("success", "Login Successfully", "Login");
                                     router.push(`/auth/login`);
                                 } else {
-                                    showToast("error", "Login Error", response.error);
+                                    showToast("error", "Invalid OTP", response.error);
+                                    setErrors({
+                                        otp: "Invalid OTP",
+                                    });
                                 }
                             } catch (err: any) {
                                 showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
@@ -92,13 +98,14 @@ const SolidInitiateRegisterOtp = ({ email }: { email: string }) => {
                     >
                         {(formik) => (
                             <Form>
-                                <div className="flex flex-column gap-2 px-3">
+                                <div className="flex flex-column gap-2">
                                     <label htmlFor="otp" className="solid-auth-input-label">Enter OTP</label>
                                     <InputOtp
                                         value={formik.values.otp}
                                         onChange={(e) => formik.setFieldValue("otp", e.value)}
                                         length={6}
                                         style={{ width: '100%' }}
+                                        invalid={!!formik.errors.otp}
                                     />
                                     {isFormFieldValid(formik, "otp") && (
                                         <Message className="text-red-500 text-sm" severity="error" text={formik.errors.otp?.toString()} />
@@ -112,17 +119,18 @@ const SolidInitiateRegisterOtp = ({ email }: { email: string }) => {
                                 </div>
                                 <div className="mt-4">
                                     <Button type="submit" className="w-full font-light auth-submit-button" label="Verify" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                                    <Button type="button" label="Back" className="w-full auth-back-button text-center" link onClick={() => (window.location.href = '/auth/login')} />
                                 </div>
                             </Form>
                         )}
                     </Formik>
                 </>
             </div>
-            <div className="text-center mt-5">
-                <div className="text-sm text-400 secondary-dark-color">
-                    {'<'} Back to <Link className="font-bold" href="/auth/login">Sign In</Link>
-                </div>
+            {/* <div className="text-center mt-5">
+            <div className="text-sm text-400 secondary-dark-color">
+                {'<'} Back to <Link className="font-bold" href="/auth/login">Sign In</Link>
             </div>
+        </div> */}
         </>
     );
 };

package/src/components/auth/SolidLogin.tsx

@@ -76,7 +76,7 @@ const SolidLogin = () => {
                                     .required("Email is required"),
                                 password: Yup.string().required("Password is required"),
                             })}
-                            onSubmit={async (values, { setSubmitting }) => {
+                            onSubmit={async (values, { setSubmitting, setErrors }) => {
                                 try {
                                     const response = await signIn("credentials", {
                                         redirect: false,
@@ -86,6 +86,10 @@ const SolidLogin = () => {
 
                                     if (response?.error) {
                                         showToast("error", "Login Error", response.error);
+                                        setErrors({
+                                            email: "Invalid email or password",
+                                            password: "Invalid email or password",
+                                        });
                                     } else {
                                         showToast("success", "Login Success", "Redirecting to dashboard...");
                                         router.push("/admin/core/solid-core/user/list");
@@ -107,6 +111,7 @@ const SolidLogin = () => {
                                             placeholder="Email ID"
                                             onChange={formik.handleChange}
                                             value={formik.values.email}
+                                            invalid={!!formik.errors.email}
                                         />
                                         {isFormFieldValid(formik, "email") && <Message
                                             className="text-red-500 text-sm"
@@ -114,20 +119,17 @@ const SolidLogin = () => {
                                             text={formik?.errors?.email?.toString()}
                                         />}
                                     </div>
-                                    <div className="flex flex-column gap-2 mt-4" style={{}}>
+                                    <div className="flex flex-column gap-1 mt-4" style={{}}>
                                         <label htmlFor="password" className="solid-auth-input-label">Password</label>
                                         <Password
                                             id="password"
-                                            placeholder="***************"
                                             value={password}
                                             onChange={(e) => {
                                                 setPassword(e.target.value);
                                                 formik.setFieldValue("password", e.target.value);
                                             }}
                                             toggleMask
-                                            className={classNames("", {
-                                                "p-invalid": isFormFieldValid(formik, "password"),
-                                            })}
+                                            invalid={!!formik.errors.password}
                                             inputClassName="w-full"
                                             feedback={false}
                                         />
@@ -138,9 +140,9 @@ const SolidLogin = () => {
                                         />}
                                     </div>
                                     {/* <div className="flex align-items-center mt-4">
-                                        <Checkbox inputId="remember" onChange={(e: any) => setChecked(e.checked)} checked={checked} />
-                                        <label htmlFor="remember" className="ml-2">Remember me</label>
-                                    </div> */}
+                                    <Checkbox inputId="remember" onChange={(e: any) => setChecked(e.checked)} checked={checked} />
+                                    <label htmlFor="remember" className="ml-2">Remember me</label>
+                                </div> */}
                                     <div className="mt-4 text-right">
                                         <Link href={"/auth/initiate-forgot-password"} className="solid-auth-input-label">Forgot Password?</Link>
                                     </div>
@@ -160,7 +162,7 @@ const SolidLogin = () => {
                                 email: Yup.string()
                                     .email("Invalid email address")
                             })}
-                            onSubmit={async (values, { setSubmitting }) => {
+                            onSubmit={async (values, { setSubmitting, setErrors }) => {
                                 try {
                                     const payload = {
                                         type: "email",
@@ -178,6 +180,9 @@ const SolidLogin = () => {
                                     }
                                 } catch (err: any) {
                                     showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
+                                    setErrors({
+                                        email: "Invalid email",
+                                    });
                                 } finally {
                                     setSubmitting(false);
                                 }
@@ -193,6 +198,7 @@ const SolidLogin = () => {
                                             placeholder="Email ID"
                                             onChange={formik.handleChange}
                                             value={formik.values.email}
+                                            invalid={!!formik.errors.email}
                                         />
                                         {isFormFieldValid(formik, "email") && <Message
                                             className="text-red-500 text-sm"

package/src/components/auth/SolidRegister.tsx

@@ -102,7 +102,7 @@ const SolidRegister = () => {
                         .required("Email is required"),
                     password: Yup.string().required("Password is required"),
                 })}
-                onSubmit={async (values, { setSubmitting }) => {
+                onSubmit={async (values, { setSubmitting, setErrors }) => {
                     try {
                         const userData = {
                             username: values.username,
@@ -113,12 +113,19 @@ const SolidRegister = () => {
                         const response = await register(userData).unwrap();
                         if (response?.statusCode === 200) {
                             showToast("success", "User Registered", response?.data?.message);
-                            router.push(`/auth/login`);
+                            setTimeout(() => {
+                                router.push(`/auth/login`);
+                            }, 3000);
                         } else {
                             showToast("error", "Login Error", response.error);
+                            // setErrors({
+                            //     username: 'Invalid email or password',
+                            //     email: "Invalid email or password",
+                            //     password: "Invalid email or password",
+                            // });
                         }
                     } catch (err: any) {
-                        showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
+                        showToast("error", "Login Conflict", err?.data ? err?.data?.message : "Something Went Wrong");
                     } finally {
                         setSubmitting(false);
                     }
@@ -134,6 +141,7 @@ const SolidRegister = () => {
                                 placeholder="username"
                                 onChange={formik.handleChange}
                                 value={formik.values.username}
+                                invalid={!!formik.errors.username}
                             />
                             {isFormFieldValid(formik, "username") && <Message
                                 className="text-red-500 text-sm"
@@ -149,6 +157,7 @@ const SolidRegister = () => {
                                 placeholder="Yourgmail@123.com"
                                 onChange={formik.handleChange}
                                 value={formik.values.email}
+                                invalid={!!formik.errors.email}
                             />
                             {isFormFieldValid(formik, "email") && <Message
                                 className="text-red-500 text-sm"
@@ -163,13 +172,10 @@ const SolidRegister = () => {
                                 name="password"
                                 value={formik.values.password}
                                 onChange={formik.handleChange}
-                                placeholder="***************"
                                 toggleMask
-                                className={classNames("", {
-                                    "p-invalid": isFormFieldValid(formik, "password"),
-                                })}
                                 inputClassName="w-full"
                                 feedback={false}
+                                invalid={!!formik.errors.password}
                             />
                             {isFormFieldValid(formik, "password") && <Message
                                 className="text-red-500 text-sm"
@@ -233,6 +239,7 @@ const SolidRegister = () => {
                                 placeholder="username"
                                 onChange={formik.handleChange}
                                 value={formik.values.username}
+                                invalid={!!formik.errors.username}
                             />
                             {isFormFieldValid(formik, "username") && <Message
                                 className="text-red-500 text-sm"
@@ -248,6 +255,7 @@ const SolidRegister = () => {
                                 placeholder="Yourgmail@123.com"
                                 onChange={formik.handleChange}
                                 value={formik.values.email}
+                                invalid={!!formik.errors.email}
                             />
                             {isFormFieldValid(formik, "email") && <Message
                                 className="text-red-500 text-sm"
@@ -264,7 +272,7 @@ const SolidRegister = () => {
         )
     }
 
-    const AuthTabs: React.FC<AuthTabsProps> = ({iamPasswordRegistrationEnabled, iamPasswordLessRegistrationEnabled}) => {
+    const AuthTabs: React.FC<AuthTabsProps> = ({ iamPasswordRegistrationEnabled, iamPasswordLessRegistrationEnabled }) => {
         if (iamPasswordRegistrationEnabled && iamPasswordLessRegistrationEnabled) {
             return (
                 <TabView className="solid-auth-tabview">
@@ -300,7 +308,7 @@ const SolidRegister = () => {
                         </div>
                     </div>
                 }
-                <h2 className={`solid-auth-title ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`}>Sign Up To Your Account</h2>
+                <h2 className={`solid-auth-title ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`}>Sign Up</h2>
                 {/* <p className="solid-auth-subtitle text-sm">By continuing, you agree to the <Link href={'#'}>Terms of Service</Link> and acknowledge you’ve read our  <Link href={'#'}>Privacy Policy.</Link> </p> */}
                 <AuthTabs iamPasswordRegistrationEnabled={solidSettingsData?.data?.iamPasswordRegistrationEnabled} iamPasswordLessRegistrationEnabled={solidSettingsData?.data?.iamPasswordLessRegistrationEnabled} />
                 {solidSettingsData?.data?.iamGoogleOAuthEnabled &&

package/src/components/auth/SolidResetPassword.tsx

@@ -5,7 +5,7 @@ import { useConfirmForgotPasswordMutation } from "@/redux/api/authApi";
 import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
 import { useFormik } from "formik";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "primereact/button";
 import { Message } from "primereact/message";
 import { Password } from "primereact/password";
@@ -14,7 +14,11 @@ import { classNames } from "primereact/utils";
 import { useEffect, useRef } from "react";
 import * as Yup from "yup";
 
-const SolidResetPassword = ({ verificationToken, username }: { verificationToken?: any, username?: any }) => {
+const SolidResetPassword = () => {
+    const searchParams = useSearchParams();
+    const verificationToken = searchParams.get('token');
+    const decodedUsername = searchParams.get('username');
+    const username = decodedUsername ? decodeURIComponent(decodedUsername) : '';
     const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
     useEffect(() => {
         trigger("")
@@ -52,6 +56,7 @@ const SolidResetPassword = ({ verificationToken, username }: { verificationToken
                     password: values.password,
                     verificationToken: values.verificationToken,
                 };
+                console.log("Paylod", payload);
                 const response = await confirmForgotPassword(payload).unwrap();
                 if (response?.statusCode === 200) {
                     showToast("success", "Login Successfull", "Password Updated Successfully")
@@ -60,6 +65,7 @@ const SolidResetPassword = ({ verificationToken, username }: { verificationToken
                     showToast("error", "Login Error", response.error)
                 )
             } catch (err: any) {
+                console.log("Error", err);
                 showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
             }
         },
@@ -71,7 +77,7 @@ const SolidResetPassword = ({ verificationToken, username }: { verificationToken
     return (
         <>
             <Toast ref={toast} />
-            <div className={`auth-container ${solidSettingsData?.data?.authPagesLayout === 'center'  ? 'center' : 'side'}`}>
+            <div className={`auth-container ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'center' : 'side'}`}>
                 {solidSettingsData?.data?.authPagesLayout === 'center' &&
                     <div className="flex justify-content-center">
                         <div className="solid-logo flex align-items-center gap-3">
@@ -109,7 +115,7 @@ const SolidResetPassword = ({ verificationToken, username }: { verificationToken
                             text={formik?.errors?.password?.toString()}
                         />}
                     </div>
-                    <div className="flex flex-column gap-2 mt-4" style={{}}>
+                    <div className="flex flex-column gap-1 mt-4" style={{}}>
                         <label htmlFor="password" className="solid-auth-input-label">Confirm Password</label>
                         <Password
                             id="confirmPassword"
@@ -137,14 +143,15 @@ const SolidResetPassword = ({ verificationToken, username }: { verificationToken
                                     </div> */}
                     <div className="mt-4">
                         <Button className="w-full font-light auth-submit-button" label="Reset Password" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                        <Button type="button" label="Back" className="w-full auth-back-button text-center" link onClick={() => (window.location.href = '/auth/login')} />
                     </div>
                 </form>
             </div>
-            <div className="text-center mt-5">
+            {/* <div className="text-center mt-5">
                 <div className="text-sm text-400 secondary-dark-color">
                     {'<'} Back to <Link className="font-bold" href="/auth/login">Sign In</Link>
                 </div>
-            </div>
+            </div> */}
         </>
     );
 };

package/src/components/common/GeneralSettings.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useCreateSolidSettingsMutation, useUpdateSolidSettingsMutation } from '@/redux/api/solidSettingsApi';
+import { useCreateSolidSettingsMutation, useLazyGetSolidSettingsQuery, useUpdateSolidSettingsMutation } from '@/redux/api/solidSettingsApi';
 import { useFormik } from 'formik';
 import { Button } from 'primereact/button';
 import { InputText } from 'primereact/inputtext';
@@ -11,7 +11,12 @@ import { RadioButton } from 'primereact/radiobutton';
 import { handleError } from '@/helpers/ToastContainer';
 import { usePathname } from 'next/navigation';
 
-export const GeneralSettings = ({ solidSettingsData }: { solidSettingsData: any }) => {
+export const GeneralSettings = () => {
+    const [trigger, { data: solidSettingsData }] = useLazyGetSolidSettingsQuery()
+
+    useEffect(() => {
+        trigger("") // Fetch settings on mount
+    }, [trigger])
     const pathname = usePathname();
     const [updateSolidSettings] = useUpdateSolidSettingsMutation();
     const [

package/src/components/common/NotFound.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import Link from "next/link";
+
+export const NotFound = () => {
+  return (
+    <div>
+      <div className="d-flex align-items-center justify-content-center vh-100">
+        <div className="text-center">
+          <h1 className="display-1 fw-bold">404</h1>
+          <p className="fs-3">
+            <span className="text-danger">Opps!</span> Page not found.
+          </p>
+          <p className="lead">The page you are looking for does not exist.</p>
+          <Link href="/" className="btn btn-primary">
+            Go Home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/common/SingleSelectAutoCompleteField.tsx

@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 // In case of relationType the Id field will always will be id   
 // Else the value will be whatever valuekey use passed 
 
-export const SingleSelectAutoCompleteField = ({ disabled, formik, isFormFieldValid, relationField, fieldName, fieldNameId, labelKey, valueKey, searchData, existingData, additionalAction }: any) => {
+export const SingleSelectAutoCompleteField = ({ disabled, formik, isFormFieldValid, relationField, fieldName, fieldNameId, labelKey, valueKey, searchData, existingData, additionalAction, formErrors }: any) => {
 
     const [selectedItem, setSelectedItem] = useState(existingData);
     const [filteredItem, setFilteredItem] = useState([]);
@@ -32,7 +32,7 @@ export const SingleSelectAutoCompleteField = ({ disabled, formik, isFormFieldVal
                 disabled={disabled ? disabled : false}
                 value={selectedItem}
                 suggestions={filteredItem}
-                invalid={isFormFieldValid(formik, fieldName)}
+                invalid={(isFormFieldValid(formik, fieldName) || (formErrors[fieldName]))}
                 completeMethod={searchItems}
                 virtualScrollerOptions={{ itemSize: 38 }}
                 // style={{