From 232f11d14286be68602f177693a2d55dd2355d39 Mon Sep 17 00:00:00 2001
From: deepvasoya <deep.vasoya@bosctechlabs.com>
Date: Fri, 23 May 2025 13:38:06 +0530
Subject: [PATCH] feat: cr changes and improvements

---
 .../mainLayout/components/sideBarConfig.js    |  88 ++++----
 src/layouts/mainLayout/index.jsx              |   2 +-
 src/routes/index.js                           |   2 +
 .../component/GeneralInformation.jsx          |   6 +-
 src/views/ClinicDetails/index.jsx             |   6 +-
 src/views/ClinicsList/index.jsx               |  18 +-
 .../Dashboard/Tiles/SuperAdminTotals.jsx      |  26 +--
 .../Dashboard/components/PaymentConfig.jsx    |   6 +-
 src/views/Dashboard/components/SuperAdmin.jsx |   4 +-
 src/views/Dashboard/index.jsx                 |   2 +-
 src/views/Signup/YourDetailsForm.jsx          | 198 ++++++++++--------
 src/views/SignupCharges/index.jsx             |  33 +++
 .../SignupCharges/signupChargesStyles.js      | 119 +++++++++++
 13 files changed, 341 insertions(+), 169 deletions(-)
 create mode 100644 src/views/SignupCharges/index.jsx
 create mode 100644 src/views/SignupCharges/signupChargesStyles.js

diff --git a/src/layouts/mainLayout/components/sideBarConfig.js b/src/layouts/mainLayout/components/sideBarConfig.js
index 1592774..d1098b0 100644
--- a/src/layouts/mainLayout/components/sideBarConfig.js
+++ b/src/layouts/mainLayout/components/sideBarConfig.js
@@ -1,94 +1,102 @@
 // MUI Icons imports
-import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
-import HomeIcon from '@mui/icons-material/Home';
-import LocalHospitalOutlinedIcon from '@mui/icons-material/LocalHospitalOutlined';
-import LocalHospitalIcon from '@mui/icons-material/LocalHospital';
-import PeopleOutlineIcon from '@mui/icons-material/PeopleOutline';
-import PeopleIcon from '@mui/icons-material/People';
-import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
-import SettingsIcon from '@mui/icons-material/Settings';
-import ArticleIcon from '@mui/icons-material/Article';
-import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined';
-import PaymentIcon from '@mui/icons-material/Payment';
-import PaymentOutlinedIcon from '@mui/icons-material/PaymentOutlined';
-import { USER_ROLES } from '../../../constants';
+import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
+import HomeIcon from "@mui/icons-material/Home";
+import LocalHospitalOutlinedIcon from "@mui/icons-material/LocalHospitalOutlined";
+import LocalHospitalIcon from "@mui/icons-material/LocalHospital";
+import PeopleOutlineIcon from "@mui/icons-material/PeopleOutline";
+import PeopleIcon from "@mui/icons-material/People";
+import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import SettingsIcon from "@mui/icons-material/Settings";
+import ArticleIcon from "@mui/icons-material/Article";
+import ArticleOutlinedIcon from "@mui/icons-material/ArticleOutlined";
+import PaymentIcon from "@mui/icons-material/Payment";
+import PaymentOutlinedIcon from "@mui/icons-material/PaymentOutlined";
+import { USER_ROLES } from "../../../constants";
 
 // Define the sidebar configuration with proper permission fields
 export const SIDEBAR_CONFIG = [
   {
-    text: 'Dashboard',
-    path: '',
+    text: "Dashboard",
+    path: "",
     icon: HomeOutlinedIcon,
     activeIcon: HomeIcon,
     // Dashboard is accessible to all roles
-    roles: [USER_ROLES.SUPER_ADMIN, USER_ROLES.CLINIC_ADMIN]
+    roles: [USER_ROLES.SUPER_ADMIN, USER_ROLES.CLINIC_ADMIN],
   },
   {
-    text: 'Clinics List',
-    path: 'clinics',
+    text: "Clinics",
+    path: "clinics",
     icon: LocalHospitalOutlinedIcon,
     activeIcon: LocalHospitalIcon,
     // Only super admin can access clinics list
-    roles: [USER_ROLES.SUPER_ADMIN]
+    roles: [USER_ROLES.SUPER_ADMIN],
   },
   {
-    text: 'Admin Staff Management',
-    path: 'admin',
+    text: "Admin Staff Management",
+    path: "admin",
     icon: PeopleOutlineIcon,
     activeIcon: PeopleIcon,
     // Only super admin can access admin staff management
-    roles: [USER_ROLES.SUPER_ADMIN]
+    roles: [USER_ROLES.SUPER_ADMIN],
   },
   {
-    text: 'Master Data Management',
-    path: 'masterData',
+    text: "Master Data Management",
+    path: "masterData",
     icon: SettingsOutlinedIcon,
     activeIcon: SettingsIcon,
     // Only super admin can access admin staff management
-    roles: [USER_ROLES.SUPER_ADMIN]
+    roles: [USER_ROLES.SUPER_ADMIN],
   },
   {
-    text: 'Payment Management',
-    path: 'payment-management',
+    text: "Payment Management",
+    path: "payment-management",
     icon: PaymentOutlinedIcon,
     activeIcon: PaymentIcon,
     // Only super admin can access payment management
-    roles: [USER_ROLES.SUPER_ADMIN]
+    roles: [USER_ROLES.SUPER_ADMIN],
   },
   {
-    text: 'Doctor/Nurse Management',
-    path: 'doctor',
+    text: "Signup Charges",
+    path: "signup-charges",
+    icon: PaymentOutlinedIcon,
+    activeIcon: PaymentIcon,
+    // Only super admin can access payment management
+    roles: [USER_ROLES.SUPER_ADMIN],
+  },
+  {
+    text: "Doctor/Nurse Management",
+    path: "doctor",
     requireSaprateApp: false,
     icon: PeopleOutlineIcon,
     activeIcon: PeopleIcon,
     // Clinic admin can access user management
-    roles: [USER_ROLES.CLINIC_ADMIN]
+    roles: [USER_ROLES.CLINIC_ADMIN],
   },
   {
-    text: 'Clinic Setup',
-    path: 'clinicSetup',
+    text: "Clinic Setup",
+    path: "clinicSetup",
     requireSaprateApp: false,
     icon: SettingsOutlinedIcon,
     activeIcon: SettingsIcon,
     // Clinic admin can access clinic setup
-    roles: [USER_ROLES.CLINIC_ADMIN]
+    roles: [USER_ROLES.CLINIC_ADMIN],
   },
   {
-    text: 'Call Transcripts',
-    path: 'transcripts',
+    text: "Call Transcripts",
+    path: "transcripts",
     requireSaprateApp: false,
     icon: ArticleOutlinedIcon,
     activeIcon: ArticleIcon,
     // Clinic admin can access call transcripts
-    roles: [USER_ROLES.CLINIC_ADMIN]
+    roles: [USER_ROLES.CLINIC_ADMIN],
   },
   {
-    text: 'Clinic Documents',
-    path: 'docs',
+    text: "Clinic Documents",
+    path: "docs",
     requireSaprateApp: false,
     icon: ArticleOutlinedIcon,
     activeIcon: ArticleIcon,
     // Clinic admin can access call transcripts
-    roles: [USER_ROLES.CLINIC_ADMIN]
+    roles: [USER_ROLES.CLINIC_ADMIN],
   },
 ];
diff --git a/src/layouts/mainLayout/index.jsx b/src/layouts/mainLayout/index.jsx
index c238f48..bb674c2 100644
--- a/src/layouts/mainLayout/index.jsx
+++ b/src/layouts/mainLayout/index.jsx
@@ -141,7 +141,7 @@ function MainLayout() {
                 className={classes.functionalityNotAvailableText}
                 variant="h4"
               >
-                This section will launch soon.
+                This section will accessible after approval
               </Typography>
               <LoadingButton
                 variant="contained"
diff --git a/src/routes/index.js b/src/routes/index.js
index 084fa0f..5fe51bf 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -15,6 +15,7 @@ import PaymentManagement from "../views/PaymentManagement";
 import ClinicDocUpdater from "../views/ClinicDocUpdate";
 import ForgotPassword from "../views/ForgotPassword";
 import ResetPassword from "../views/ResetPassword";
+import SignupCharges from "../views/SignupCharges";
 
 export const routesData = [
   {
@@ -31,6 +32,7 @@ export const routesData = [
       { path: "/masterData", component: MasterDataManagement },
       { path: "/payment-management", component: PaymentManagement },
       { path: "/docs", component: ClinicDocUpdater },
+      { path: "/signup-charges", component: SignupCharges },
     ],
     isProtected: true,
   },
diff --git a/src/views/ClinicDetails/component/GeneralInformation.jsx b/src/views/ClinicDetails/component/GeneralInformation.jsx
index bdc7b22..6f33197 100644
--- a/src/views/ClinicDetails/component/GeneralInformation.jsx
+++ b/src/views/ClinicDetails/component/GeneralInformation.jsx
@@ -32,8 +32,8 @@ const GeneralInformation = ({ clinicData, clinicAdminData }) => {
         <Grid item xs={3}>
           <Typography className={classes.generalInfoUploaded}>
             Uploaded:{' '}
-            {clinicData?.updatedAt
-              ? format(new Date(clinicData?.createdAt), 'dd MMM yyyy')
+            {clinicData?.update_time
+              ? format(new Date(clinicData?.update_time), 'dd MMM yyyy')
               : ''}
           </Typography>
         </Grid>
@@ -92,7 +92,7 @@ const GeneralInformation = ({ clinicData, clinicAdminData }) => {
         <Box>
           <Typography className={classes.companyUserDetailsTitle}>
             {clinicAdminData?.designation
-              ? clinicAdminData?.designation
+              ? clinicAdminData?.designation.toUpperCase()
               : NOT_AVAILABLE_TEXT}
           </Typography>
           <Typography className={classes.companyUserDetailsSubTitle}>
diff --git a/src/views/ClinicDetails/index.jsx b/src/views/ClinicDetails/index.jsx
index b44de18..2895798 100644
--- a/src/views/ClinicDetails/index.jsx
+++ b/src/views/ClinicDetails/index.jsx
@@ -80,7 +80,7 @@ function ClinicDetails() {
       path: "/",
     },
     {
-      label: "Clinic List",
+      label: "Clinics",
       path: "/clinics",
       query: { tab: queryParams.get("tab") || "UNREGISTERED" },
     },
@@ -363,7 +363,7 @@ function ClinicDetails() {
                     </Box>
                   </Box>
                   {/* ..........on hold Button..... */}
-                  <Button
+                  {/* <Button
                     disableTouchRipple={isOnHoldButtonShow ? false : true}
                     className={
                       isOnHoldButtonShow
@@ -382,7 +382,7 @@ function ClinicDetails() {
                       alt="On Hold Button Icon"
                     />
                     On Hold
-                  </Button>
+                  </Button> */}
 
                   {/* ......accept button...... */}
                   <Button
diff --git a/src/views/ClinicsList/index.jsx b/src/views/ClinicsList/index.jsx
index 7b1cf23..754272e 100644
--- a/src/views/ClinicsList/index.jsx
+++ b/src/views/ClinicsList/index.jsx
@@ -2,7 +2,6 @@ import React, { useState, useMemo, useEffect, useRef } from "react";
 import { useTheme } from "@emotion/react";
 import { useLocation, useNavigate, Link } from "react-router-dom";
 import StoreIcon from "@mui/icons-material/Store";
-import BlockIcon from "@mui/icons-material/Block";
 import {
   Box,
   Chip,
@@ -65,16 +64,14 @@ const ClinicsList = () => {
       [
         // ..............sro number column......................
         {
-          size: 50,
-          isBold: true,
+          size: 100,
           header: "Sr. No.",
           Cell: (props) => {
             const tableState = props?.table?.getState();
             const serialNumber = (
               props?.row?.index +
               1 +
-              tableState?.pagination?.pageIndex *
-                tableState?.pagination?.pageSize
+              tableState?.pagination?.pageIndex * tableState?.pagination?.pageSize
             )
               ?.toString()
               ?.padStart(2, "0");
@@ -86,7 +83,7 @@ const ClinicsList = () => {
         {
           enableColumnFilter: false,
           enableSorting: true,
-          size: "260px",
+          size: "220px",
           accessorKey: "name",
           header: "Clinic Name",
           Cell: ({ row }) => (
@@ -195,10 +192,11 @@ const ClinicsList = () => {
         },
         // .................Company status column..................
         {
-          enableSorting: true,
+          enableSorting: false,
           accessorKey: "status",
           header: "Status",
           size: 100,
+          enableColumnFilter: false,
           Filter: ({ header }) => (
             <TableSelect
               name="Status"
@@ -465,7 +463,7 @@ const ClinicsList = () => {
       path: "/",
     },
     {
-      label: "Clinic List",
+      label: "Clinics",
       path: "/clinics",
       query: { tab: queryParams.get("tab") || "UNREGISTERED" },
     },
@@ -480,7 +478,7 @@ const ClinicsList = () => {
     <>
       <Box>
         <PageHeader
-          pageTitle="Clinic List"
+          pageTitle="Clinics"
           hideAddButton
           addButtonIcon={<FileDownloadIcon />}
           extraComponent={
@@ -505,7 +503,7 @@ const ClinicsList = () => {
               variant="outlined"
               loading={isDownloading}
               startIcon={<FileDownloadIcon />}
-              // onClick={handleExport}
+              onClick={handleExport}
             >
               Download Excel
             </LoadingButton>
diff --git a/src/views/Dashboard/Tiles/SuperAdminTotals.jsx b/src/views/Dashboard/Tiles/SuperAdminTotals.jsx
index 0874ee6..ee10082 100644
--- a/src/views/Dashboard/Tiles/SuperAdminTotals.jsx
+++ b/src/views/Dashboard/Tiles/SuperAdminTotals.jsx
@@ -19,44 +19,40 @@ const SuperAdminTotals = ({ isLoading, data }) => {
 
   return (
     <ProtectedComponent>
-      <Grid container className={classes.numbers} spacing={2.3}>
+      <Grid container className={classes.numbers} spacing={2}>
         <Grid item>
           <TotalNumber
-            heading={"Total Accounts"}
-            isLoading={isLoading}
-            value={totalAccounts}
-            helperText={"Clinics"}
-          />
-        </Grid>
-        <Grid item>
-          <TotalNumber
-            heading={`Registration Request`}
+            heading={`Pending Requests`}
             isLoading={isLoading}
             viewAllClick={() => viewAllClick(true)}
             value={registrationRequest}
-            helperText={"Clinics"}
           />
         </Grid>
         <Grid item>
           <TotalNumber
-            heading={`Approved`}
+            heading={`Approved Requests`}
             isLoading={isLoading}
             viewAllClick={() => viewAllClick(false)}
             value={registered}
-            helperText={"Clinics"}
             color={theme.palette.grey[52]}
           />
         </Grid>
         <Grid item>
           <TotalNumber
-            heading={`Rejected`}
+            heading={`Rejected Requests`}
             isLoading={isLoading}
             viewAllClick={() => viewAllClick(false)}
             value={rejected}
-            helperText={"Clinics"}
             color={theme.palette.grey[57]}
           />
         </Grid>
+        <Grid item>
+          <TotalNumber
+            heading={"Total Requests"}
+            isLoading={isLoading}
+            value={totalAccounts}
+          />
+        </Grid>
       </Grid>
     </ProtectedComponent>
   );
diff --git a/src/views/Dashboard/components/PaymentConfig.jsx b/src/views/Dashboard/components/PaymentConfig.jsx
index ed78ef2..6f73484 100644
--- a/src/views/Dashboard/components/PaymentConfig.jsx
+++ b/src/views/Dashboard/components/PaymentConfig.jsx
@@ -107,7 +107,7 @@ const PaymentConfig = () => {
     <Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: 2 }}>
       <Box mb={2}>
         <Typography variant="h6" fontWeight="bold">
-          Payment Configuration
+          Signup Charges
         </Typography>
         <Typography variant="body2" color="text.secondary">
           Configure payment details for new clinic registrations
@@ -146,13 +146,13 @@ const PaymentConfig = () => {
         <Grid item xs={12} md={4}>
           <TextField
             fullWidth
-            label="Per Call Charges"
+            label="Per Minute Charges"
             name="per_call_charges"
             value={paymentConfig.per_call_charges}
             onChange={handleInputChange}
             InputProps={{
               startAdornment: <InputAdornment position="start">$</InputAdornment>,
-              endAdornment: <InputAdornment position="end">/call</InputAdornment>,
+              endAdornment: <InputAdornment position="end">/min</InputAdornment>,
             }}
             variant="outlined"
           />
diff --git a/src/views/Dashboard/components/SuperAdmin.jsx b/src/views/Dashboard/components/SuperAdmin.jsx
index 644cc3f..8ed438c 100644
--- a/src/views/Dashboard/components/SuperAdmin.jsx
+++ b/src/views/Dashboard/components/SuperAdmin.jsx
@@ -49,9 +49,9 @@ const SuperAdmin = () => {
       </Box>
       
       {/* Payment Configuration Section */}
-      <Box mt={4}>
+      {/* <Box mt={4}>
         <PaymentConfig />
-      </Box>
+      </Box> */}
     </Box>
   );
 };
diff --git a/src/views/Dashboard/index.jsx b/src/views/Dashboard/index.jsx
index 96aad86..443eac7 100644
--- a/src/views/Dashboard/index.jsx
+++ b/src/views/Dashboard/index.jsx
@@ -108,7 +108,7 @@ function Dashboard() {
   const clinicAdmin = (
     <Box>
       {!isActive && (
-        <ThankYou canClose={false} />
+        <ThankYou />
       )}
       <Box>
         <Box>
diff --git a/src/views/Signup/YourDetailsForm.jsx b/src/views/Signup/YourDetailsForm.jsx
index f24ec19..e902f10 100644
--- a/src/views/Signup/YourDetailsForm.jsx
+++ b/src/views/Signup/YourDetailsForm.jsx
@@ -94,10 +94,9 @@ function YourDetailsForm() {
   const selectedLocalityRef = useRef();
   const [testConnection, setTestConnDone] = useState(false);
 
-
   const errorStatus = new URLSearchParams(window.location.search).get("status");
 
-  console.log(errorStatus)
+  console.log(errorStatus);
 
   useEffect(() => {
     setIsLoading(true);
@@ -154,10 +153,10 @@ function YourDetailsForm() {
     // Clinic details
     companyName: "",
     designation: "",
-    businessPhonePrefix: "",
+    businessPhonePrefix: mobilePrefixOptions[0].name,
     businessPhone: "",
     emergencyBusinessPhone: "",
-    emergencyBusinessPhonePrefix: "",
+    emergencyBusinessPhonePrefix: mobilePrefixOptions[0].name,
     businessFax: "",
     clinicLogo: "",
     businessEmail: "",
@@ -213,10 +212,11 @@ function YourDetailsForm() {
   };
 
   if (yourDetailsFormData) {
-    defaultFormData.current = { ...yourDetailsFormData };
-    console.log(yourDetailsFormData)
-    // setLocalityOption([yourDetailsFormData?.locality])
-    selectedLocalityRef.current = yourDetailsFormData?.locality;
+    Object.keys(defaultFormData.current).forEach((field) => {
+      if (yourDetailsFormData[field]) {
+        defaultFormData.current[field] = yourDetailsFormData[field];
+      }
+    });
   }
 
   const validationSchema = Yup.object().shape({
@@ -266,11 +266,6 @@ function YourDetailsForm() {
     businessEmail: Yup.string()
       .required("Business Email is required")
       .email("Please enter valid Email Address"),
-    businessFax: Yup.string()
-      .required("Business Fax is required")
-      .matches(/^[0-9]+$/, "Business Fax must be a valid number")
-      .min(10, "Business Fax number should have 10 digits only.")
-      .max(10, "Business Fax number should have 10 digits only."),
     practiceManagementSystem: Yup.string()
       .required("Practice Management System is required")
       .typeError("Practice Management System must be string"),
@@ -349,23 +344,23 @@ function YourDetailsForm() {
     setOtpField(true);
     const payload = {
       email: formik.values.email,
-    }
+    };
     const response = await getEmailOtp(payload);
     if (response?.data?.error) {
       pushNotification(response?.data?.message, NOTIFICATION.ERROR);
       return;
     }
-    pushNotification(response?.data?.message, NOTIFICATION.SUCCESS);
+    pushNotification("OTP sent successfully to your email", NOTIFICATION.SUCCESS);
   };
 
   const verifyOTP = async (e) => {
     e.preventDefault();
-    console.log(otp)
+    console.log(otp);
     console.log("OTP verified");
     const payload = {
       email: formik.values.email,
       otp: otp,
-    }
+    };
     const response = await verifyOtp(payload);
     if (response?.data?.error) {
       pushNotification(response?.data?.message, NOTIFICATION.ERROR);
@@ -381,10 +376,15 @@ function YourDetailsForm() {
   const handleFormSubmit = async () => {
     dispatch(updateFormDetails(formik.values));
 
-      if(!otpVerified){
-        pushNotification("Please verify OTP first", NOTIFICATION.ERROR);
-        return;
-      }
+    if (!otpField) {
+      pushNotification("Please Request OTP first", NOTIFICATION.ERROR);
+      return;
+    }
+
+    if (!otpVerified) {
+      pushNotification("Please verify OTP first", NOTIFICATION.ERROR);
+      return;
+    }
 
     const body = formatedData(formik.values);
 
@@ -400,7 +400,7 @@ function YourDetailsForm() {
       dispatch(resetFormData());
       navigate("/auth/signup/payment");
     } catch (error) {
-      console.error('Error signing up:', error);
+      console.error("Error signing up:", error);
     } finally {
       formik.isSubmitting(false);
     }
@@ -467,16 +467,17 @@ function YourDetailsForm() {
         file_name: value.name,
       };
 
-      const presignedUrlResponseClinicLogo = await getPresignedUrl(
-        filePayload,
-      );
+      const presignedUrlResponseClinicLogo = await getPresignedUrl(filePayload);
 
       await uploadToS3(
         value,
         presignedUrlResponseClinicLogo?.data?.data?.api_url
       );
 
-      formik.setFieldValue("clinicLogo", presignedUrlResponseClinicLogo?.data?.data?.key);
+      formik.setFieldValue(
+        "clinicLogo",
+        presignedUrlResponseClinicLogo?.data?.data?.key
+      );
 
       // Return a temporary local URL for preview purposes
       return URL.createObjectURL(value);
@@ -574,15 +575,13 @@ function YourDetailsForm() {
 
   // Set uploaded file URL
   const setUploadedFileUrl = (documentName, fileUrl) => {
-    console.log('Document Name:', documentName);
-    console.log('File URL:', fileUrl);
-    console.log('File URL Type:', typeof fileUrl);
-    
     if (documentName && fileUrl !== undefined) {
       formik.setFieldValue(documentName, fileUrl);
-      console.log('After setting value:', formik.values[documentName]);
     } else {
-      console.error('Invalid parameters for setUploadedFileUrl:', { documentName, fileUrl });
+      console.error("Invalid parameters for setUploadedFileUrl:", {
+        documentName,
+        fileUrl,
+      });
     }
   };
 
@@ -629,6 +628,10 @@ function YourDetailsForm() {
   }
 
   const handleSaveAndNext = async () => {
+    if (!otpField) {
+      pushNotification("Please Request OTP first", NOTIFICATION.ERROR);
+      return;
+    }
     if (!otpVerified) {
       pushNotification("Please verify OTP first", NOTIFICATION.ERROR);
       otpButtonRef.current?.focus();
@@ -649,8 +652,6 @@ function YourDetailsForm() {
 
     const errors = Object.keys(formikError);
 
-    console.log(errors)
-
     if (errors.length) {
       // Find the first invalid field and focus it
       const firstErrorField = errors[0];
@@ -766,50 +767,6 @@ function YourDetailsForm() {
                             />
                           </Grid>
 
-                          {/* email id grid */}
-                          <Grid item md={4} sm={6} xs={12}>
-                            <InputLabel className={classes.inputLabel}>
-                              Your Official Email ID*
-                            </InputLabel>
-                            <TextField
-                              fullWidth
-                              placeholder="Enter Your Email"
-                              color="secondary"
-                              variant="outlined"
-                              name="email"
-                              value={formik.values.email}
-                              onChange={formik.handleChange}
-                              onBlur={formik.handleBlur}
-                              inputRef={fieldRefs.email}
-                              error={Boolean(
-                                formik.errors.email && formik.touched.email
-                              )}
-                              helperText={
-                                formik.errors.email && formik.touched.email
-                                  ? formik.errors.email
-                                  : ""
-                              }
-                              InputProps={{
-                                endAdornment: (
-                                  <InputAdornment position="end">
-                                    <Button
-                                      variant="text"
-                                      color="info"
-                                      disabled={!formik.values.email}
-                                      onClick={handleOTPButton}
-                                      ref={otpButtonRef}
-                                    >
-                                      Request OTP
-                                    </Button>
-                                  </InputAdornment>
-                                ),
-                              }}
-                            />
-                            <Typography className={classes.emailNote}>
-                              Note: This will be your login ID.
-                            </Typography>
-                          </Grid>
-
                           {/* mobile numer grid */}
                           <Grid item md={4} sm={6} xs={12}>
                             <InputLabel className={classes.inputLabel}>
@@ -846,7 +803,6 @@ function YourDetailsForm() {
                                         onChange={formik.handleChange}
                                         onBlur={formik.handleBlur}
                                         inputRef={fieldRefs.mobilePrefix}
-                                        defaultValue={"61"}
                                       >
                                         {mobilePrefixOptions.map((option) => (
                                           <MenuItem
@@ -855,7 +811,7 @@ function YourDetailsForm() {
                                               border: "none",
                                             }}
                                             key={option.id}
-                                            value={option.id}
+                                            value={option.name}
                                           >
                                             {option.name}
                                           </MenuItem>
@@ -879,6 +835,53 @@ function YourDetailsForm() {
                             />
                           </Grid>
 
+                          {/* email id grid */}
+                          <Grid item md={4} sm={6} xs={12}>
+                            <InputLabel className={classes.inputLabel}>
+                              Your Official Email ID*
+                            </InputLabel>
+                            <TextField
+                              fullWidth
+                              placeholder="Enter Your Email"
+                              color="secondary"
+                              variant="outlined"
+                              name="email"
+                              value={formik.values.email}
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              disabled={otpVerified}
+                              inputRef={fieldRefs.email}
+                              error={Boolean(
+                                formik.errors.email && formik.touched.email
+                              )}
+                              helperText={
+                                formik.errors.email && formik.touched.email
+                                  ? formik.errors.email
+                                  : ""
+                              }
+                              InputProps={{
+                                endAdornment: (
+                                  <InputAdornment position="end">
+                                    <Button
+                                      variant="text"
+                                      color="info"
+                                      disabled={
+                                        !formik.values.email || otpVerified
+                                      }
+                                      onClick={handleOTPButton}
+                                      ref={otpButtonRef}
+                                    >
+                                      Request OTP
+                                    </Button>
+                                  </InputAdornment>
+                                ),
+                              }}
+                            />
+                            <Typography className={classes.emailNote}>
+                              Note: This will be your login ID.
+                            </Typography>
+                          </Grid>
+
                           {/* otp verification grid */}
                           {otpField && (
                             <Grid item md={4} sm={6} xs={12}>
@@ -894,10 +897,17 @@ function YourDetailsForm() {
                                 value={otp}
                                 onChange={(e) => setOtp(e.target.value)}
                                 onBlur={formik.handleBlur}
+                                disabled={otpVerified}
                                 InputProps={{
                                   type: "text",
                                   pattern: "[0-9]*",
-                                  endAdornment: (
+                                  endAdornment: otpVerified ? (
+                                    <InputAdornment position="end">
+                                      <VerifiedIcon
+                                        className={classes.verifyIcon}
+                                      />
+                                    </InputAdornment>
+                                  ) : (
                                     <InputAdornment position="end">
                                       <Button
                                         variant="text"
@@ -1143,12 +1153,12 @@ function YourDetailsForm() {
                           {/* Business Phone grid */}
                           <Grid item md={4} sm={6} xs={12}>
                             <InputLabel className={classes.inputLabel}>
-                              Business PhoneNumber*
+                              Business Phone Number*
                             </InputLabel>
                             <TextField
                               className={classes.mobileNumberInput}
                               fullWidth
-                              placeholder="Enter Mobile Number"
+                              placeholder="Enter Business Phone Number"
                               color="secondary"
                               variant="outlined"
                               name="businessPhone"
@@ -1178,7 +1188,6 @@ function YourDetailsForm() {
                                         onChange={formik.handleChange}
                                         onBlur={formik.handleBlur}
                                         inputRef={fieldRefs.businessPhonePrefix}
-                                        defaultValue={"61"}
                                       >
                                         {mobilePrefixOptions.map((option) => (
                                           <MenuItem
@@ -1252,7 +1261,6 @@ function YourDetailsForm() {
                                         inputRef={
                                           fieldRefs.emergencyBusinessPhonePrefix
                                         }
-                                        defaultValue={"61"}
                                       >
                                         {mobilePrefixOptions.map((option) => (
                                           <MenuItem
@@ -1288,7 +1296,7 @@ function YourDetailsForm() {
                           {/* Business Fax grid */}
                           <Grid item md={4} sm={6} xs={12}>
                             <InputLabel className={classes.inputLabel}>
-                              Business Fax Number*
+                              Business Fax Number
                             </InputLabel>
                             <TextField
                               // className={classes.mobileNumberInput}
@@ -1399,7 +1407,6 @@ function YourDetailsForm() {
                             </InputLabel>
                             <TextField
                               fullWidth
-                              label="PMS ID"
                               name="practiceId"
                               value={formik.values.practiceId}
                               onChange={formik.handleChange}
@@ -1425,7 +1432,6 @@ function YourDetailsForm() {
                             </InputLabel>
                             <TextField
                               fullWidth
-                              label="Practice Name"
                               name="practiceName"
                               value={formik.values.practiceName}
                               onChange={formik.handleChange}
@@ -1458,7 +1464,14 @@ function YourDetailsForm() {
 
                           {/* Clinic logo grid */}
                           <Grid item md={5} sm={12}>
-                            <InputLabel className={classes.inputLabel}>
+                            <InputLabel
+                              sx={{
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                              }}
+                              className={classes.inputLabel}
+                            >
                               Add Business Logo
                               {(logoImage || formik.values.clinicLogo) && (
                                 <div>
@@ -1886,7 +1899,7 @@ function YourDetailsForm() {
                           >
                             <Box mr={2}>
                               <Tooltip title="Download the contract template">
-                                <Button>Download Template</Button>
+                                <Button>Download Contract Template</Button>
                               </Tooltip>
                             </Box>
                             <CustomFileUpload
@@ -1925,7 +1938,10 @@ function YourDetailsForm() {
                                   name="termsAccepted"
                                 />
                               </Box>
-                              <Typography className={classes.checkBoxLabel}>
+                              <Typography
+                                ref={fieldRefs.termsAccepted}
+                                className={classes.checkBoxLabel}
+                              >
                                 I agree to{" "}
                                 <span>
                                   {" "}
diff --git a/src/views/SignupCharges/index.jsx b/src/views/SignupCharges/index.jsx
new file mode 100644
index 0000000..d5685cf
--- /dev/null
+++ b/src/views/SignupCharges/index.jsx
@@ -0,0 +1,33 @@
+import { Box } from "@mui/system";
+import React from "react";
+import { useStyles } from "./signupChargesStyles";
+import PageHeader from "../../components/PageHeader";
+import PaymentConfig from "../Dashboard/components/PaymentConfig";
+
+const SignupCharges = () => {
+  const classes = useStyles();
+
+  const breadcrumbs = [
+    {
+      label: "Dashboard",
+      path: "/",
+    },
+    {
+      label: "Signup Charges",
+      path: "/signup-charges",
+    },
+  ];
+
+  return (
+    <Box>
+      <Box>
+        <PageHeader pageTitle="Signup Charges" hideAddButton />
+        <Box>
+          <PaymentConfig />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default SignupCharges;
diff --git a/src/views/SignupCharges/signupChargesStyles.js b/src/views/SignupCharges/signupChargesStyles.js
new file mode 100644
index 0000000..a2a130e
--- /dev/null
+++ b/src/views/SignupCharges/signupChargesStyles.js
@@ -0,0 +1,119 @@
+import makeStyles from '@mui/styles/makeStyles';
+import { pxToRem } from '../../theme/typography';
+
+export const useStyles = makeStyles((theme) => ({
+  chipClass: {
+    height: 'fit-content',
+    minHeight: '30px',
+    padding: '2px',
+    alignItems: 'center',
+  },
+  statusColor: {
+    color: theme.palette.primary.main,
+    fontSize: pxToRem(10),
+  },
+  tabsBox: {
+    display: 'flex',
+    justifyContent: ' space-around',
+    // width: '55%',
+    marginTop: theme.spacing(0.5),
+    marginRight: theme.spacing(5.0),
+    alignItems: 'center',
+  },
+  secondaryButton: {
+    width: '200px',
+    height: '46px',
+    borderRadius: '8px',
+    justifyContent: 'space-evenly',
+    fontSize: pxToRem(16),
+  },
+  tableActionIcons: {
+    marginRight: theme.spacing(1.4),
+    width: '15px',
+  },
+  companyNameTableColumn: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  companyName: {
+    marginLeft: theme.spacing(1),
+    fontSize: pxToRem(14),
+    objectFit: 'contain',
+    width: '260px',
+  },
+  companyNameLink: {
+    textDecoration: 'none',
+    color: theme.palette.grey[10],
+    '&:hover': {
+      color: theme.palette.info.main,
+      textDecoration: 'underline',
+    },
+  },
+  companyWebsiteLabel: {
+    fontSize: pxToRem(12),
+  },
+  companyNameLogo: {
+    height: '40px',
+    width: '40px',
+    borderRadius: theme.shape.borderRadiusComponent,
+    objectFit: 'contain',
+  },
+  sendEmailStatus: {
+    fontSize: pxToRem(14),
+    color: theme.palette.primary.main,
+  },
+  sendEmailLastSentMailDate: {
+    fontSize: pxToRem(12),
+  },
+  addDiscountCodeLink: {
+    fontSize: pxToRem(12),
+    color: theme.palette.primary.main,
+  },
+  addDiscountCodeLabel: {
+    fontSize: pxToRem(14),
+    backgroundColor: theme.palette.common.white,
+    color: theme.palette.common.black,
+  },
+  customModel: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%',
+  },
+  customModelBox: {
+    paddingLeft: theme.spacing(5),
+    paddingRight: theme.spacing(5),
+    textAlign: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    // height: '100%',
+    border: 'none',
+  },
+  newPlanTitleText: {
+    fontSize: pxToRem(28),
+    fontFamily: theme.fontFamily.bold,
+  },
+  newPlanSubTitleText: {
+    fontSize: pxToRem(18),
+    padding: theme.spacing(1),
+  },
+  addPlanSuccessIcon: {
+    padding: theme.spacing(2),
+    paddingTop: theme.spacing(1),
+  },
+  planAddedText: {
+    fontSize: pxToRem(12),
+    color: theme.palette.grey[54],
+    display: 'flex',
+    alignItems: 'center',
+    alignSelf: 'center',
+  },
+  verifyIcon: {
+    marginLeft: theme.spacing(0.3),
+    fontSize: pxToRem(12),
+    color: theme.palette.grey[54],
+  },
+}));