From d0aa37930cd2dca46aa9b4adec140f86f54fea76 Mon Sep 17 00:00:00 2001
From: Rohit Kini <rohit.kini@contentstack.com>
Date: Thu, 11 Jul 2024 17:22:57 +0530
Subject: [PATCH 01/10] added comments on some UI files and looger windows
 functionality

---
 api/src/server.ts                             |   3 +-
 ui/src/common/assets/icons.tsx                |   4 +
 ui/src/common/assets/index.ts                 |   3 +
 .../AccountPage/accountPage.interface.ts      |   3 +
 ui/src/components/AccountPage/index.scss      |  28 ++++
 ui/src/components/AccountPage/index.tsx       |   7 +
 .../advanceProperties.interface.ts            |  62 ++++++++
 .../components/AdvancePropertise/index.scss   |  31 +++-
 ui/src/components/AdvancePropertise/index.tsx |  27 +++-
 ui/src/components/Card/card.interface.ts      |   3 +
 ui/src/components/Card/card.scss              |  80 ++++++++++-
 ui/src/components/Card/index.tsx              |   6 +
 .../Common/AddStack/addStack.interface.ts     |  30 ++++
 .../components/Common/AddStack/addStack.scss  |  14 ++
 .../components/Common/AddStack/addStack.tsx   |   7 +
 .../components/Common/Card/card.interface.ts  |  22 +++
 ui/src/components/Common/Card/card.scss       |  43 ++++--
 ui/src/components/Common/Card/card.tsx        |   8 +-
 .../Common/DeleteProjectModal/index.tsx       |  16 ++-
 ui/src/components/Common/DocLink/DocLink.tsx  |  15 ++
 .../Common/FileUpload/fileupload.scss         |  21 +++
 ui/src/components/Common/FileUpload/index.tsx |  40 ++++++
 .../components/Common/FileUpload/upload.scss  |  36 +++++
 .../components/Common/FileUpload/upload.tsx   |   4 +
 .../Common/Modal/FilterModal/FilterModal.scss |  96 ++++++++++---
 .../Common/Modal/FilterModal/FilterModal.tsx  |   8 ++
 .../FilterModal/filterModal.interface.ts      |   3 +
 .../Common/NotificationModal/index.tsx        |  44 +++---
 .../components/Common/ProgressBar/index.tsx   |   7 +
 .../Common/ProgressBar/progressBar.scss       |  21 ++-
 .../components/Common/Settings/Settings.scss  |  83 +++++++----
 ui/src/components/Common/Settings/index.tsx   |   4 +
 .../Common/Settings/setting.interface.ts      |   3 +
 .../Common/WordWrapper/WordWrapper.tsx        |   6 +
 ui/src/components/Common/private-route.tsx    |   8 ++
 ui/src/components/Common/router.tsx           |   4 +
 .../ContentMapper/contentMapper.interface.ts  |  16 +++
 ui/src/components/ContentMapper/index.scss    |  32 +++++
 ui/src/components/ContentMapper/index.tsx     |   4 +
 .../Actions/LoadOrganisation.tsx              |  80 ++++-------
 .../LegacyCms/Actions/LoadFileFormat.tsx      |   2 +-
 ui/src/components/LogScreen/index.scss        |  60 +++++---
 ui/src/components/LogScreen/index.tsx         | 133 +++++++++++++-----
 uplaode-api/src/config/index.ts               |   4 +-
 44 files changed, 923 insertions(+), 208 deletions(-)

diff --git a/api/src/server.ts b/api/src/server.ts
index 678121af..d8fbb2e8 100644
--- a/api/src/server.ts
+++ b/api/src/server.ts
@@ -55,7 +55,8 @@ try {
       logger.info(`Server listening at port ${config.PORT}`)
     );
     // Chokidar - Watch for log file changes
-    const logFilePath = "/Users/sayali.joshi/Projects/migration-v2-node-server/api/combine.log"; // Replace with the actual path to your log file
+    ///Users/rohit/migration-v2-node-server/api/combine.log
+    const logFilePath = "/Users/rohit/migration-v2-node-server/api/combine.log"; // Replace with the actual path to your log file
     const watcher = chokidar.watch(logFilePath);
     // Socket.IO - Send logs to client
     const io = new Server(
diff --git a/ui/src/common/assets/icons.tsx b/ui/src/common/assets/icons.tsx
index 179668e2..e7a7b67e 100644
--- a/ui/src/common/assets/icons.tsx
+++ b/ui/src/common/assets/icons.tsx
@@ -1,3 +1,6 @@
+/**
+ * This file contains the definition of the SVG icon component.
+ */
 export const NO_PROJECTS_SEARCH = (
   <svg
     width="300"
@@ -408,6 +411,7 @@ export const NO_PROJECTS_SEARCH = (
   </svg>
 );
 
+
 export const NO_PROJECTS = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
diff --git a/ui/src/common/assets/index.ts b/ui/src/common/assets/index.ts
index 838008a0..20ce5eff 100644
--- a/ui/src/common/assets/index.ts
+++ b/ui/src/common/assets/index.ts
@@ -1 +1,4 @@
+/**
+ * This module exports all the icons from the './icons' module.
+ */
 export * from './icons';
diff --git a/ui/src/components/AccountPage/accountPage.interface.ts b/ui/src/components/AccountPage/accountPage.interface.ts
index 76199129..a9e11bcc 100644
--- a/ui/src/components/AccountPage/accountPage.interface.ts
+++ b/ui/src/components/AccountPage/accountPage.interface.ts
@@ -1,5 +1,8 @@
 import { LoginType } from '../../pages/Login/login.interface';
 
+/**
+ * Represents an account object.
+ */
 export interface AccountObj {
   children: React.ReactNode;
   data: LoginType;
diff --git a/ui/src/components/AccountPage/index.scss b/ui/src/components/AccountPage/index.scss
index 9af38e4f..b436f265 100644
--- a/ui/src/components/AccountPage/index.scss
+++ b/ui/src/components/AccountPage/index.scss
@@ -1,3 +1,31 @@
+/**
+ * Styles for the AccountPage component.
+ *
+ * This SCSS file contains styles for the AccountPage component, which is a container component
+ * that displays the account page of the application. It includes styles for the layout, logo,
+ * background image, action section, content section, heading, circles, and copyright text.
+ *
+ * @import '../../scss/variables'; - Imports the SCSS variables file.
+ *
+ * CSS Classes:
+ *  - .AccountPage - The main container for the account page.
+ *    - &__logo - The logo section within the account page.
+ *    - &__intro - The introduction section within the account page.
+ *    - &__action - The action section within the account page.
+ *    - &__content - The content section within the account page.
+ *    - &__heading - The heading section within the account page.
+ *      - &_title - The title within the heading section.
+ *      - &_subtitle - The subtitle within the heading section.
+ *    - &__circle - The circle elements within the account page.
+ *      - &_one - The first circle element.
+ *      - &_two - The second circle element.
+ *      - &_three - The third circle element.
+ *      - &_four - The fourth circle element.
+ *      - &_five - The fifth circle element.
+ *      - &_six - The sixth circle element.
+ *      - &_seven - The seventh circle element.
+ *  - .copyright_text - The copyright text.
+ */
 @import '../../scss/variables';
 
 .AccountPage {
diff --git a/ui/src/components/AccountPage/index.tsx b/ui/src/components/AccountPage/index.tsx
index 4b131667..fbfd83a0 100644
--- a/ui/src/components/AccountPage/index.tsx
+++ b/ui/src/components/AccountPage/index.tsx
@@ -4,6 +4,13 @@ import { AccountObj } from './accountPage.interface';
 // Styles
 import './index.scss';
 
+/**
+ * Renders the AccountPage component.
+ * 
+ * @param {AccountObj} props - The props object containing data for the component.
+ * @returns {JSX.Element} The rendered AccountPage component.
+ */
+
 const AccountPage = (props: AccountObj): JSX.Element => {
   const { heading, copyrightText } = props.data;
 
diff --git a/ui/src/components/AdvancePropertise/advanceProperties.interface.ts b/ui/src/components/AdvancePropertise/advanceProperties.interface.ts
index 6ce7ae7f..854de204 100644
--- a/ui/src/components/AdvancePropertise/advanceProperties.interface.ts
+++ b/ui/src/components/AdvancePropertise/advanceProperties.interface.ts
@@ -34,20 +34,82 @@ export interface Props {
   handleToggle?: (field: string, value: boolean, checkBoxChanged: boolean) => void;
 }
 
+/**
+ * Represents the state type for advanced properties.
+ */
 export interface StateType {
+  /**
+   * The minimum number of characters allowed.
+   */
   minChars?: string;
+
+  /**
+   * The maximum number of characters allowed.
+   */
   maxChars?: number;
+
+  /**
+   * The minimum range allowed.
+   */
   minRange?: number;
+
+  /**
+   * The maximum range allowed.
+   */
   maxRange?: number;
+
+  /**
+   * The minimum size allowed.
+   */
   minSize?: string;
+
+  /**
+   * The maximum size allowed.
+   */
   maxSize?: number;
+
+  /**
+   * The default value.
+   */
   defaultValue?: string;
+
+  /**
+   * The validation regular expression.
+   */
   validationRegex?: string;
+
+  /**
+   * The title.
+   */
   title?: string;
+
+  /**
+   * The URL.
+   */
   url?: string;
+
+  /**
+   * Indicates if the field is mandatory.
+   */
   mandatory?: boolean;
+
+  /**
+   * Indicates if only images are allowed.
+   */
   allowImagesOnly?: boolean;
+
+  /**
+   * Indicates if the field is non-localizable.
+   */
   nonLocalizable?: boolean;
+
+  /**
+   * Indicates if the object should be embedded.
+   */
   embedObject?: boolean;
+
+  /**
+   * Indicates if the assets should be embedded.
+   */
   embedAssests?: boolean;
 }
\ No newline at end of file
diff --git a/ui/src/components/AdvancePropertise/index.scss b/ui/src/components/AdvancePropertise/index.scss
index 212c06f8..5fa6c7ef 100644
--- a/ui/src/components/AdvancePropertise/index.scss
+++ b/ui/src/components/AdvancePropertise/index.scss
@@ -1,3 +1,7 @@
+/**
+ * Styles for the AdvancePropertise component.
+ */
+
 @import '../../scss/variables';
 
 .options-class {
@@ -9,36 +13,46 @@
   grid-template-columns: 1fr;
   gap: 20px;
 }
+
 .option-label {
   margin-bottom: $px-10;
 }
+
 .non-localizable-message {
   margin-top: 0;
   margin-left: 30px;
 }
+
 .modal-data {
   padding: 0.75rem;
+
   .radio-field {
     margin-bottom: 0.75rem;
   }
+
   .Radio {
     width: calc(33.33333% - .66667rem);
     padding: .5rem;
     margin: 0 !important;
   }
+
   .FieldLabel {
     margin-bottom: $px-8;
   }
+
   .info-style {
     margin-top: .75rem;
     margin-bottom: 1.5rem;
+
     .Info__border {
       border-left-color: #0469e3;
     }
   }
+
   .options-class {
     line-height: $line-height-reset;
   }
+
   .nl-note {
     color: $color-font-base;
     font-size: $size-font-large;
@@ -46,17 +60,21 @@
     margin-left: 2.75rem;
     margin-top: -.25rem !important;
   }
+
   .ToggleWrap {
     margin-top: 0.5rem;
-    padding: 0 0.5rem
+    padding: 0 0.5rem;
   }
+
   .Field {
     margin-bottom: $px-24;
   }
+
   .fields-group-separator {
     color: $color-base-black-base;
     margin: 0 16px;
   }
+
   .Select {
     .Select__menu {
       .Select__menu-list {
@@ -65,20 +83,23 @@
             align-items: center;
             display: flex;
           }
+
           .Checkbox__label {
             height: auto;
           }
-        } 
+        }
       }
-    } 
-  } 
+    }
+  }
+
   .Select__menu {
     position: relative;
     z-index: 10000;
   }
+
   .Select__control--menu-is-open {
     position: relative;
     border: 2px solid red;
     z-index: 10000;
-  } 
+  }
 }
diff --git a/ui/src/components/AdvancePropertise/index.tsx b/ui/src/components/AdvancePropertise/index.tsx
index 373737a5..060d9f93 100644
--- a/ui/src/components/AdvancePropertise/index.tsx
+++ b/ui/src/components/AdvancePropertise/index.tsx
@@ -22,7 +22,13 @@ import { ContentType } from '../ContentMapper/contentMapper.interface';
 // Styles
 import './index.scss';
 
+/**
+ * Component for displaying advanced properties.
+ * @param props - The schema properties.
+ * @returns The rendered component.
+ */
 const AdvancePropertise = (props: SchemaProps) => {
+  // State for toggle states
   const [toggleStates, setToggleStates] = useState({
     minChars: props?.value?.MinChars,
     maxChars: props?.value?.MaxChars,
@@ -41,6 +47,7 @@ const AdvancePropertise = (props: SchemaProps) => {
     embedAssests: true
   });
 
+  // State for content types
   const [contentTypes, setContentTypes] = useState<ContentType[]>([]);
   const [ctValue, setCTValue] = useState(null);
 
@@ -48,13 +55,22 @@ const AdvancePropertise = (props: SchemaProps) => {
     fetchContentTypes('');
   }, [])
 
-  // Fetch content types list
+  /**
+   * Fetches the content types list.
+   * @param searchText - The search text.
+   */
   const fetchContentTypes = async (searchText: string) => {
     const { data } = await getContentTypes(props?.projectId ?? '', 0, 10, searchText || ''); //org id will always present
 
     setContentTypes(data?.contentTypes);
   };
 
+  /**
+   * Handles the change event for input fields.
+   * @param field - The field name.
+   * @param event - The change event.
+   * @param checkBoxChanged - Indicates if the checkbox was changed.
+   */
   const handleOnChange = (field: string, event: React.ChangeEvent<HTMLInputElement>, checkBoxChanged: boolean) => {
     setToggleStates((prevStates) => ({
       ...prevStates,
@@ -76,6 +92,12 @@ const AdvancePropertise = (props: SchemaProps) => {
     );
   };
 
+  /**
+   * Handles the toggle change event.
+   * @param field - The field name.
+   * @param value - The new value.
+   * @param checkBoxChanged - Indicates if the checkbox was changed.
+   */
   const handleToggleChange = (field: string, value: boolean, checkBoxChanged: boolean) => {
     setToggleStates((prevStates) => ({
       ...prevStates,
@@ -97,13 +119,14 @@ const AdvancePropertise = (props: SchemaProps) => {
     );
   };
 
+  // Option for content types
   const option = Array.isArray(contentTypes)
     ? contentTypes.map((option) => ({ label: option?.otherCmsTitle, value: option?.otherCmsTitle }))
     : [{ label: contentTypes, value: contentTypes }];
 
   return (
     <>
-      <ModalHeader title={`${props?.fieldtype} propertise`} closeModal={props?.closeModal} className="text-capitalize" />
+      <ModalHeader title={`${props?.fieldtype} properties`} closeModal={props?.closeModal} className="text-capitalize" />
       <ModalBody>
         <div className='modal-data'>
           {(props?.fieldtype === 'Single Line Textbox' || props?.fieldtype === 'Multi Line Textbox') && (
diff --git a/ui/src/components/Card/card.interface.ts b/ui/src/components/Card/card.interface.ts
index 74c43df1..fe72a87b 100644
--- a/ui/src/components/Card/card.interface.ts
+++ b/ui/src/components/Card/card.interface.ts
@@ -1,5 +1,8 @@
 import { ProjectsObj } from '../../pages/Projects/projects.interface';
 
+/**
+ * Represents the project type.
+ */
 export interface ProjectType {
   project?: ProjectsObj;
 }
diff --git a/ui/src/components/Card/card.scss b/ui/src/components/Card/card.scss
index 8a3917ea..a186d11a 100644
--- a/ui/src/components/Card/card.scss
+++ b/ui/src/components/Card/card.scss
@@ -1,5 +1,7 @@
 @import '../../scss/variables';
-
+/**
+ * Styles for the ProjectCard component.
+ */
 .ProjectCard {
   background: $color-brand-white-base;
   border-radius: 0.6rem;
@@ -7,14 +9,26 @@
   transition: box-shadow 0.3s ease;
   width: 20rem;
 }
+
+/**
+ * Styles for the wrapper of the ProjectCard component.
+ */
 .ProjectCardWrapper {
   padding: 18px;
 }
+
+/**
+ * Styles for the heading of the ProjectCard component.
+ */
 .ProjectCard__heading {
   display: flex;
   margin-bottom: $px-20;
   padding: 0;
 }
+
+/**
+ * Styles for the title of the ProjectCard component.
+ */
 .ProjectCard__title {
   color: $color-font-base;
   display: -webkit-box;
@@ -28,6 +42,10 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+
+/**
+ * Styles for the footer of the ProjectCard component.
+ */
 .ProjectCard__footer {
   display: flex;
   position: relative;
@@ -39,14 +57,26 @@
   padding: 0.9375rem 1.875rem;
   align-items: center;
 }
+
+/**
+ * Styles for the content of the ProjectCard component.
+ */
 .ProjectCard__content {
   // margin: 0 1rem 2rem;
   padding: 0;
   text-align: center;
 }
+
+/**
+ * Styles for the status unit of the ProjectCard component.
+ */
 .ProjectCard__Staus-unit {
   padding: 0 1em;
 }
+
+/**
+ * Styles for the unit of the ProjectCard component.
+ */
 .ProjectCard__unit {
   border-left: 1px solid $color-brand-secondary-lightest;
   padding: 0 1em;
@@ -60,6 +90,10 @@
   justify-content: center;
   padding-bottom: $px-10;
 }
+
+/**
+ * Styles for the stats category of the ProjectCard component.
+ */
 .ProjectCard__stats-category {
   border: 1px solid $color-brand-secondary-lightest;
   border-radius: 8px;
@@ -84,15 +118,55 @@
     background-color: $color-brand-attention-light;
   }
 }
+
+/**
+ * Styles for the draft stats category of the ProjectCard component.
+ */
+.ProjectCard__stats-category.draft {
+  background-color: $color-base-white-10;
+}
+
+/**
+ * Styles for the completed stats category of the ProjectCard component.
+ */
+.ProjectCard__stats-category.completed {
+  background-color: $color-brand-success-light;
+}
+
+/**
+ * Styles for the failed stats category of the ProjectCard component.
+ */
+.ProjectCard__stats-category.failed {
+  background-color: $color-brand-fail-light;
+}
+
+/**
+ * Styles for the pending stats category of the ProjectCard component.
+ */
+.ProjectCard__stats-category.pending {
+  background-color: $color-brand-attention-light;
+}
+
+/**
+ * Styles for the stats title of the ProjectCard component.
+ */
 .ProjectCard__stats-Title {
   color: $color-stepper-title;
   display: block;
   font-size: $size-font-small;
   margin-bottom: $space-4;
 }
+
+/**
+ * Styles for the validation color of the ProjectCard component.
+ */
 .validation-color {
   color: $color-brand-warning-medium;
 }
+
+/**
+ * Styles for the CMS of the ProjectCard component.
+ */
 .ProjectCard__cms {
   border: 1px solid $color-brand-secondary-lightest;
   border-radius: 8px;
@@ -101,6 +175,10 @@
   padding: 4px 8px;
   text-transform: capitalize;
 }
+
+/**
+ * Styles for the modified date of the ProjectCard component.
+ */
 .ProjectCard__modified-date {
   color: $color-stepper-title;
   display: block;
diff --git a/ui/src/components/Card/index.tsx b/ui/src/components/Card/index.tsx
index 44bc169f..09e1c623 100644
--- a/ui/src/components/Card/index.tsx
+++ b/ui/src/components/Card/index.tsx
@@ -12,6 +12,12 @@ import { getProject } from '../../services/api/project.service';
 import './card.scss';
 import { RootState } from '../../store';
 
+/**
+ * Renders a card component for a project in a list.
+ * @param {ProjectType} project - The project object.
+ * @returns {JSX.Element} The card component.
+ */
+
 const CardList = ({ project }: ProjectType) => {
   const navigate = useNavigate();
 
diff --git a/ui/src/components/Common/AddStack/addStack.interface.ts b/ui/src/components/Common/AddStack/addStack.interface.ts
index da16ddc9..a1e64fa0 100644
--- a/ui/src/components/Common/AddStack/addStack.interface.ts
+++ b/ui/src/components/Common/AddStack/addStack.interface.ts
@@ -19,19 +19,49 @@ export interface SecondaryCta {
   title: string;
 }
 
+/**
+ * Interface representing the default data for AddStackCMSData.
+ */
 export const defaultAddStackCMSData: AddStackCMSData = {
+  /**
+   * The title of the primary call-to-action button.
+   */
   primary_cta: {
     title: ''
   },
+  /**
+   * The title of the secondary call-to-action button.
+   */
   secondary_cta: {
     title: ''
   },
+  /**
+   * The description of the stack.
+   */
   stack_description: '',
+  /**
+   * The placeholder for the stack description.
+   */
   stack_description_placeholder: '',
+  /**
+   * The locale-specific description of the stack.
+   */
   stack_locale_description: '',
+  /**
+   * The locales supported by the stack.
+   */
   stack_locales: '',
+  /**
+   * The name of the stack.
+   */
   stack_name: '',
+  /**
+   * The placeholder for the stack name.
+   */
   stack_name_placeholder: '',
+  /**
+   * The title of the stack.
+   */
   title: ''
 };
 
diff --git a/ui/src/components/Common/AddStack/addStack.scss b/ui/src/components/Common/AddStack/addStack.scss
index 5a6647c8..4d85d21a 100644
--- a/ui/src/components/Common/AddStack/addStack.scss
+++ b/ui/src/components/Common/AddStack/addStack.scss
@@ -1,3 +1,17 @@
+/**
+ * FILEPATH: /Users/rohit/migration-v2-node-server/ui/src/components/Common/AddStack/addStack.scss
+ *
+ * Styles for the ReactModal component used in the AddStack component.
+ *
+ * .ReactModal__add-stack - Styles for the parent container of the ReactModal component in the AddStack component.
+ *   .Description-field > textarea - Styles for the textarea element inside the .Description-field class.
+ *     resize: none; - Disables the ability to resize the textarea.
+ *   .Select__single-value - Styles for the single-value element inside the .Select class.
+ *     width: 200px !important; - Sets the width of the single-value element to 200 pixels, overriding any other styles.
+ *
+ * .ReactModal__Overlay .ReactModal__Content .ReactModal__Content__body.selectWrapperBody - Styles for the selectWrapperBody element inside the ReactModal component.
+ *   overflow: visible; - Sets the overflow property of the selectWrapperBody element to visible.
+ */
 .ReactModal__add-stack {
   .Description-field > textarea {
     resize: none;
diff --git a/ui/src/components/Common/AddStack/addStack.tsx b/ui/src/components/Common/AddStack/addStack.tsx
index f1cd4300..d7599e51 100644
--- a/ui/src/components/Common/AddStack/addStack.tsx
+++ b/ui/src/components/Common/AddStack/addStack.tsx
@@ -37,6 +37,13 @@ export interface Stack {
   locale: string;
 }
 
+/**
+ * Renders the AddStack component.
+ *
+ * @param props - The component props.
+ * @returns The JSX element representing the AddStack component.
+ */
+
 const AddStack = (props: any): JSX.Element => {
   const [isProcessing, setIsProcessing] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
diff --git a/ui/src/components/Common/Card/card.interface.ts b/ui/src/components/Common/Card/card.interface.ts
index c4847848..25ea31bf 100644
--- a/ui/src/components/Common/Card/card.interface.ts
+++ b/ui/src/components/Common/Card/card.interface.ts
@@ -1,8 +1,30 @@
+/**
+ * Represents the interface for a card type.
+ */
 export interface ICardType {
+  /**
+   * The title of the card.
+   */
   title: string;
+
+  /**
+   * The group name of the card.
+   */
   group_name?: string;
+
+  /**
+   * The description of the card.
+   */
   description?: string;
+
+  /**
+   * The CMS ID of the card.
+   */
   cms_id?: string;
+
+  /**
+   * The file format ID of the card.
+   */
   fileformat_id?: string;
 }
 
diff --git a/ui/src/components/Common/Card/card.scss b/ui/src/components/Common/Card/card.scss
index 6d90f282..c69f942d 100644
--- a/ui/src/components/Common/Card/card.scss
+++ b/ui/src/components/Common/Card/card.scss
@@ -1,5 +1,9 @@
 @import '../../../scss/variables';
+/**
+ * Styles for the card component.
+ */
 
+// Styles for the service list container
 .service_list {
   text-align: center;
   display: flex;
@@ -9,21 +13,33 @@
   margin-bottom: 10px;
 }
 
+// Styles for the trigger list container
 .trigger_list {
   min-width: 120px !important;
 }
 
-.connector_list .tippy-box-light {
-  max-width: $px-360 !important;
-  padding: $px-15 !important;
-  line-height: 130%;
-  font-size: $px-12;
-  font-weight: $font-weight-regular;
+// Styles for the connector list container
+.connector_list {
+  // Styles for the tooltip box within the connector list
+  .tippy-box-light {
+    max-width: $px-360 !important;
+    padding: $px-15 !important;
+    line-height: 130%;
+    font-size: $px-12;
+    font-weight: $font-weight-regular;
+  }
+
+  // Styles for the help text within the connector list tooltip box
+  .tippy-box-light #automationConnectorsHelpText {
+    cursor: default;
+    color: $color-base-gray-20;
+  }
 }
 
-.connector_list,
+// Styles for the action list and trigger list containers
 .action_list,
 .trigger_list {
+  // Styles for the container border
   //border: 1px solid $color-base-gray-40;
   border: 1px solid #6C5CE766;
   border-radius: $px-6;
@@ -35,19 +51,17 @@
   gap: 12px;
 }
 
-.connector_list .tippy-box-light #automationConnectorsHelpText {
-  cursor: default;
-  color: $color-base-gray-20;
-}
-
+// Styles for the connector list container on hover
 .connector_list:hover {
   box-shadow: 0 3px $px-5 $px-2 rgb(215 215 215);
 }
 
+// Styles for the service icon
 .service_icon {
   padding: $space-20 0;
 }
 
+// Styles for the service title
 .service_title {
   padding: $px-5 $px-5;
   min-height: $px-40;
@@ -59,6 +73,7 @@
   background: $color-base-white-10;
 }
 
+// Styles for the full-screen page layout head
 .PageLayout--full-screen .PageLayout__head {
   position: relative;
   border-bottom: 1px solid rgb(226, 235, 248);
@@ -67,6 +82,8 @@
   margin-top: 3.5rem;
   z-index: 8;
 }
-.centered-card-title{
+
+// Styles for the centered card title
+.centered-card-title {
   margin: 10px;
 }
diff --git a/ui/src/components/Common/Card/card.tsx b/ui/src/components/Common/Card/card.tsx
index fc0a9b7e..8cbd82b5 100644
--- a/ui/src/components/Common/Card/card.tsx
+++ b/ui/src/components/Common/Card/card.tsx
@@ -13,7 +13,13 @@ type CardProps = {
   cardType?: string;
 };
 
-const Card = ({ data, selectedCard, onCardClick, cardType, idField = 'id' }: CardProps) => {
+/**
+ * Represents a card component.
+ *
+ * @param {CardProps} props - The props for the card component.
+ * @returns {JSX.Element} The rendered card component.
+ */
+const Card = ({ data, selectedCard, onCardClick, cardType, idField = 'id' }: CardProps): JSX.Element => {
   const imgStyle = {
     width: cardType === 'legacyCMS' ? '60px' : '46px',
     height: cardType === 'legacyCMS' ? '60px' : '46px'
diff --git a/ui/src/components/Common/DeleteProjectModal/index.tsx b/ui/src/components/Common/DeleteProjectModal/index.tsx
index d5abbf78..b4d63a43 100644
--- a/ui/src/components/Common/DeleteProjectModal/index.tsx
+++ b/ui/src/components/Common/DeleteProjectModal/index.tsx
@@ -15,6 +15,13 @@ import { deleteProject } from '../../../services/api/project.service';
 // Interfaces
 import { SettingsModalProps } from '../../../components/Modal/modal.interface';
 
+/**
+ * Component for the Delete Project Modal.
+ *
+ * @component
+ * @param {SettingsModalProps} props - The props for the DeleteProjectModal component.
+ * @returns {JSX.Element} The JSX element representing the DeleteProjectModal component.
+ */
 const DeleteProjectModal = (props: SettingsModalProps) => {
   const {
     closeModal,
@@ -24,7 +31,13 @@ const DeleteProjectModal = (props: SettingsModalProps) => {
     selectedOrg
   } = props;
 
-  const handleDeleteProject = async (closeModal: () => void) => {
+  /**
+   * Handles the deletion of the project.
+   *
+   * @param {() => void} closeModal - The function to close the modal.
+   * @returns {Promise<void>} A promise that resolves when the project is deleted.
+   */
+  const handleDeleteProject = async (closeModal: () => void): Promise<void> => {
     const response = await deleteProject(selectedOrg?.value || '', projectId ?? '',);
 
     if (response?.status === 200) {
@@ -44,6 +57,7 @@ const DeleteProjectModal = (props: SettingsModalProps) => {
       }, 1200)
     }
   }
+
   return (
     <>
       <ModalHeader
diff --git a/ui/src/components/Common/DocLink/DocLink.tsx b/ui/src/components/Common/DocLink/DocLink.tsx
index d0fde507..c99613e5 100644
--- a/ui/src/components/Common/DocLink/DocLink.tsx
+++ b/ui/src/components/Common/DocLink/DocLink.tsx
@@ -11,6 +11,21 @@ interface IProps {
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
+/**
+ * Renders a component that displays a link and a checkbox.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Object} props.cta - The link details.
+ * @param {string} props.cta.href - The URL of the link.
+ * @param {string} props.cta.title - The title of the link.
+ * @param {boolean} props.isCheckedBoxChecked - Indicates whether the checkbox is checked.
+ * @param {boolean} props.isDisable - Indicates whether the component is disabled.
+ * @param {string} props.label - The label for the checkbox.
+ * @param {boolean} props.isLabelFullWidth - Indicates whether the label should take up the full width.
+ * @param {function} props.onChange - The callback function to be called when the checkbox value changes.
+ * @returns {JSX.Element} The rendered component.
+ */
 const DocLink = ({
   cta,
   isCheckedBoxChecked,
diff --git a/ui/src/components/Common/FileUpload/fileupload.scss b/ui/src/components/Common/FileUpload/fileupload.scss
index 6a2e32bd..00eea59c 100644
--- a/ui/src/components/Common/FileUpload/fileupload.scss
+++ b/ui/src/components/Common/FileUpload/fileupload.scss
@@ -1,4 +1,7 @@
 @import '../../../scss/variables';
+/**
+ * Styles for the file upload container.
+ */
 .file-upload-container {
   display: flex;
   height: 21.25rem;
@@ -10,6 +13,9 @@
   border-radius: 0.25rem;
   border: 0.125rem dashed $color-base-gray-40;
 
+  /**
+   * Styles for the file upload element.
+   */
   .file-upload {
     display: flex;
     height: 4.5rem;
@@ -20,6 +26,9 @@
     flex-shrink: 0;
   }
 
+  /**
+   * Styles for the text inside the file upload element.
+   */
   .file-upload-text {
     text-align: center;
     font-family: Inter;
@@ -30,6 +39,9 @@
     letter-spacing: 0.16px;
   }
 
+  /**
+   * Styles for the image inside the file upload container.
+   */
   .file-upload-image {
     width: 15rem;
     height: 15rem;
@@ -37,14 +49,23 @@
   }
 }
 
+/**
+ * Styles for the hover effect on the file upload container.
+ */
 .hover {
   border: 0.125rem dashed $color-base-purple;
 }
 
+/**
+ * Styles for hiding an element.
+ */
 .hidden {
   display: none;
 }
 
+/**
+ * Styles for the validation container.
+ */
 .validation-container {
   display: flex;
   background-color: $color-base-white-5;
diff --git a/ui/src/components/Common/FileUpload/index.tsx b/ui/src/components/Common/FileUpload/index.tsx
index 1945e995..184bb1bb 100644
--- a/ui/src/components/Common/FileUpload/index.tsx
+++ b/ui/src/components/Common/FileUpload/index.tsx
@@ -11,16 +11,30 @@ type FileUploadProps = {
   projectId: string;
 };
 
+/**
+ * FileUpload component for uploading files.
+ *
+ * @param {FileUploadProps} props - The props for the FileUpload component.
+ * @returns {JSX.Element} The rendered FileUpload component.
+ */
 const FileUpload = (props: FileUploadProps) => {
   const [isDragOver, setIsDragOver] = useState<boolean>(false);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
   const targetRef = useRef<any>(null);
 
+  /**
+   * Empty method to handle setting upload modal to false.
+   */
   const handleSetUploadModalFalse = (): any => {
     // Empty Method
   };
 
+  /**
+   * Reads the files selected for upload.
+   *
+   * @param {FileList | null} filesList - The list of files selected for upload.
+   */
   const readFiles = (filesList: FileList | null) => {
     //handle Null check
     if (!filesList) return;
@@ -49,6 +63,11 @@ const FileUpload = (props: FileUploadProps) => {
     setIsDragOver(false);
   };
 
+  /**
+   * Handles the drop event when files are dropped onto the component.
+   *
+   * @param {DragEvent<HTMLDivElement>} e - The drop event.
+   */
   const handleDrop = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -57,22 +76,43 @@ const FileUpload = (props: FileUploadProps) => {
     e.dataTransfer.clearData();
   };
 
+  /**
+   * Handles the drag toggle event when dragging files over the component.
+   *
+   * @param {boolean} flag - The flag indicating whether the files are being dragged over the component.
+   * @returns {Function} The event handler function.
+   */
   const handleDragToggle = (flag: boolean) => (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     setIsDragOver(flag);
   };
 
+  /**
+   * Handles the file change event when files are selected using the file input.
+   *
+   * @param {ChangeEvent<HTMLInputElement>} e - The file change event.
+   */
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     e.preventDefault();
 
     readFiles(e?.target?.files);
   };
 
+  /**
+   * Handles the file select event when the "Choose file" link is clicked.
+   *
+   * @param {any} e - The file select event.
+   */
   const handleFileSelect = (e: any) => {
     e.preventDefault();
     fileInputRef?.current?.click();
   };
 
+  /**
+   * Handles the onClose event after file upload.
+   *
+   * @param {IFile[]} files - The uploaded files.
+   */
   const onCloseAfterUpload = (files: IFile[]) => {
     props.handleOnFileUpload(files);
   };
diff --git a/ui/src/components/Common/FileUpload/upload.scss b/ui/src/components/Common/FileUpload/upload.scss
index b6b680fb..99feb555 100644
--- a/ui/src/components/Common/FileUpload/upload.scss
+++ b/ui/src/components/Common/FileUpload/upload.scss
@@ -1,3 +1,39 @@
+/**
+ * Styles for the asset upload component.
+ *
+ * This SCSS file contains styles for the asset upload window component.
+ * It includes styles for the heading, body, and various elements within the component.
+ * The component is used for uploading files and displaying their progress.
+ *
+ * @import '../../../scss/variables'; - Imports the SCSS variables file.
+ *
+ * CSS classes:
+ * - .asset-upload - The main container for the asset upload component.
+ * - .asset-upload__heading - The heading section of the asset upload component.
+ * - .asset-upload__heading.in-progress - Applied when the upload is in progress.
+ * - .asset-upload__heading.success - Applied when the upload is successful.
+ * - .asset-upload__heading.attention - Applied when attention is required.
+ * - .asset-upload__heading.warning - Applied when there is a warning.
+ * - .asset-upload__actions - Container for the upload actions.
+ * - .asset-upload__actions__cancel - Cancel upload action button.
+ * - .asset-upload__actions__minimize - Minimize upload action button.
+ * - .asset-upload__actions__maximize - Maximize upload action button.
+ * - .asset-upload__count - Displays the count of uploaded files.
+ * - .asset-upload__body - The body section of the asset upload component.
+ * - .asset-upload__file - Container for each uploaded file.
+ * - .asset-upload__file__name - Displays the name of the uploaded file.
+ * - .asset-upload__file__actions - Container for file actions.
+ * - .asset-upload__file__actions__progress - Container for file upload progress.
+ * - .asset-upload__file__actions__progress .file-loaded - Displays the loaded file size.
+ * - .asset-upload__file__actions__progress .total-size - Displays the total file size.
+ * - .asset-upload__file__actions .cancel-upload - Cancel upload action button for a file.
+ *
+ * @example
+ * <div class="asset-upload">
+ *   <div class="asset-upload__heading">...</div>
+ *   <div class="asset-upload__body">...</div>
+ * </div>
+ */
 @import '../../../scss/variables';
 
 /* Asset upload window css */
diff --git a/ui/src/components/Common/FileUpload/upload.tsx b/ui/src/components/Common/FileUpload/upload.tsx
index fcae15a4..6c40f28a 100644
--- a/ui/src/components/Common/FileUpload/upload.tsx
+++ b/ui/src/components/Common/FileUpload/upload.tsx
@@ -100,6 +100,10 @@ const InterruptUpload = (props: any) => {
   );
 };
 
+/**
+ * Component for handling file uploads.
+ */
+
 class Upload extends Component<any, any> {
   state = {
     fileList: this.props.fileList,
diff --git a/ui/src/components/Common/Modal/FilterModal/FilterModal.scss b/ui/src/components/Common/Modal/FilterModal/FilterModal.scss
index a39ada6a..f304bf2d 100644
--- a/ui/src/components/Common/Modal/FilterModal/FilterModal.scss
+++ b/ui/src/components/Common/Modal/FilterModal/FilterModal.scss
@@ -1,6 +1,8 @@
 @import '../../../../scss/variables';
-
-.Filter__modal {
+/**
+ * Styles for the FilterModal component.
+ */
+ .Filter__modal {
   width: $px-400;
   z-index: 40;
   position: absolute;
@@ -9,30 +11,48 @@
   border-radius: $px-10;
 }
 
-.Filter__modal .Checkbox input:checked ~ .Checkbox__tick,
-.Filter__modal .Checkbox .Checkbox__box {
-  margin-top: $px-4;
-  font-size: $px-16;
-}
+/**
+ * Styles for the checkboxes inside the FilterModal component.
+ */
+ .Filter__modal .Checkbox input:checked ~ .Checkbox__tick,
+ .Filter__modal .Checkbox .Checkbox__box {
+   margin-top: $px-4;
+   font-size: $px-16;
+ }
 
-.Filter__modal .Filter__item {
+/**
+ * Styles for each filter item inside the FilterModal component.
+ */
+ .Filter__modal .Filter__item {
   cursor: pointer;
   padding: $px-10 $px-20;
 }
 
-.Filter__modal .Filter__item:hover {
+/**
+ * Styles for the filter item when hovered inside the FilterModal component.
+ */
+ .Filter__modal .Filter__item:hover {
   background-color: $color-base-white-10;
 }
 
-.Filter__modal .Filter__item:hover .WordWrapper {
+/**
+ * Styles for the WordWrapper element when the filter item is hovered inside the FilterModal component.
+ */
+ .Filter__modal .Filter__item:hover .WordWrapper {
   color: $color-brand-primary-base;
 }
 
-.Filter__modal .Filter__item:hover .Checkbox__box {
+/**
+ * Styles for the Checkbox__box element when the filter item is hovered inside the FilterModal component.
+ */
+ .Filter__modal .Filter__item:hover .Checkbox__box {
   border: 1.5px solid $color-brand-primary-base;
 }
 
-.Filter__modal-header {
+/**
+ * Styles for the header of the FilterModal component.
+ */
+ .Filter__modal-header {
   background: $color-base-white-10;
   border-bottom: 1px solid $color-brand-secondary-lightest;
   font-size: $px-20;
@@ -41,7 +61,10 @@
   padding: $px-14 $px-16;
 }
 
-.Filter__modal-header .Filter__modal-header-container {
+/**
+ * Styles for the container of the header in the FilterModal component.
+ */
+ .Filter__modal-header .Filter__modal-header-container {
   align-items: center;
   display: flex;
   color: #222;
@@ -53,11 +76,17 @@
   font-weight: 600;
 }
 
-.Filter__modal-header .Filter__modal-header-container .Filter__modal-header-title {
+/**
+ * Styles for the title in the header of the FilterModal component.
+ */
+ .Filter__modal-header .Filter__modal-header-container .Filter__modal-header-title {
   font-weight: 600;
 }
 
-.Filter__modal-header .Filter__modal-header-container .Filter__modal-header-counter {
+/**
+ * Styles for the counter in the header of the FilterModal component.
+ */
+ .Filter__modal-header .Filter__modal-header-container .Filter__modal-header-counter {
   border: 1px solid $color-brand-secondary-lightest;
   border-radius: 1rem;
   color: $color-stepper-title;
@@ -74,26 +103,44 @@
   width: fit-content;
 }
 
-.Filter__searchbox .Search--primary .Search__input {
+/**
+ * Styles for the search box inside the FilterModal component.
+ */
+ .Filter__searchbox .Search--primary .Search__input {
   height: $px-35;
 }
 
-.Filter__modal-content {
+/**
+ * Styles for the content area of the FilterModal component.
+ */
+ .Filter__modal-content {
   overflow: scroll;
   max-height: $px-250;
   overflow-x: hidden;
 }
 
-.Filter__icon {
+/**
+ * Styles for the filter icon in the FilterModal component.
+ */
+ .Filter__icon {
   cursor: pointer !important;
   padding: $px-5;
   border-radius: 10%;
 }
 
-.Filter__icon:hover {
+/**
+ * Styles for the background color of the filter icon in the FilterModal component.
+ */
+ .Filter__icon:hover {
   background-color: rgba(108, 92, 231, 0.1);
 }
 
+/**
+ * Styles for the cancel button in the header of the FilterModal component.
+ */
+ .Filter__icon_bg_color {
+  background-color: rgba(108, 92, 231, 0.1);
+}
 .Filter__icon_bg_color {
   background-color: rgba(108, 92, 231, 0.1);
 }
@@ -108,8 +155,10 @@
 .Filter__modal-header-cancel:hover {
   background-color: $color-brand-secondary-lightest;
 }
-
-.Filter__modal-footer {
+/**
+ * Styles for the footer of the FilterModal component.
+ */
+ .Filter__modal-footer {
   display: flex;
   border-top: 1px solid $color-brand-secondary-lightest;
   height: $px-70;
@@ -117,7 +166,10 @@
   padding: $px-20;
 }
 
-.Filter__no-found {
+/**
+ * Styles for the "no results found" message in the FilterModal component.
+ */
+ .Filter__no-found {
   text-align: center;
   vertical-align: middle;
   line-height: $px-50;
diff --git a/ui/src/components/Common/Modal/FilterModal/FilterModal.tsx b/ui/src/components/Common/Modal/FilterModal/FilterModal.tsx
index 56b3e5d2..33669028 100644
--- a/ui/src/components/Common/Modal/FilterModal/FilterModal.tsx
+++ b/ui/src/components/Common/Modal/FilterModal/FilterModal.tsx
@@ -20,6 +20,14 @@ type Props = {
   iconSize?: 'original' | 'tiny' | 'mini' | 'small' | 'large' | 'medium' | 'extraSmall';
 };
 
+/**
+ * Represents a filter modal component.
+ *
+ * @component
+ * @param {Props} props - The props for the FilterModal component.
+ * @returns {JSX.Element} The rendered FilterModal component.
+ */
+
 export const FilterModal = (props: Props) => {
   const {
     title,
diff --git a/ui/src/components/Common/Modal/FilterModal/filterModal.interface.ts b/ui/src/components/Common/Modal/FilterModal/filterModal.interface.ts
index 311d0aab..f5c43b55 100644
--- a/ui/src/components/Common/Modal/FilterModal/filterModal.interface.ts
+++ b/ui/src/components/Common/Modal/FilterModal/filterModal.interface.ts
@@ -1,3 +1,6 @@
+/**
+ * Represents the interface for a filter type.
+ */
 export interface IFilterType {
   value: string;
   label: string;
diff --git a/ui/src/components/Common/NotificationModal/index.tsx b/ui/src/components/Common/NotificationModal/index.tsx
index 3ea4bddc..19d78b55 100644
--- a/ui/src/components/Common/NotificationModal/index.tsx
+++ b/ui/src/components/Common/NotificationModal/index.tsx
@@ -13,26 +13,32 @@ interface Props {
     goBack : () => void;
 }
 
-const NotificationModal = (props:Props) => {
-    return(
-        <>
-        <ModalHeader title={'Save Changes'} closeModal={props?.closeModal} className="text-capitalize" />
-        <ModalBody>
-          <div className='modal-data'>             
-            <Paragraph tagName="p" text={'You have unsaved changes on this page. Do you want to go back without saving?'} variant={"p1"}/>
-          </div>
-        </ModalBody>
-        <ModalFooter>
+/**
+ * NotificationModal component displays a modal with a notification message.
+ * @param props - The component props.
+ * @param props.closeModal - A function to close the modal.
+ * @param props.goBack - A function to go back.
+ * @returns The rendered NotificationModal component.
+ */
+const NotificationModal = (props: Props) => {
+  return (
+    <>
+      <ModalHeader title={'Save Changes'} closeModal={props?.closeModal} className="text-capitalize" />
+      <ModalBody>
+        <div className='modal-data'>
+          <Paragraph tagName="p" text={'You have unsaved changes on this page. Do you want to go back without saving?'} variant={"p1"} />
+        </div>
+      </ModalBody>
+      <ModalFooter>
         <ButtonGroup>
-            <Button buttonType="light"version={"v2"}  onClick={() => props.closeModal()}> 
-               Cancel
-           </Button>
-            <Button version={"v2"} onClick={()=> {props?.goBack(), props.closeModal()}}>Yes, go back</Button>
-          </ButtonGroup>
-        </ModalFooter>
-      </>
-    )
-
+          <Button buttonType="light" version={"v2"} onClick={() => props.closeModal()}>
+            Cancel
+          </Button>
+          <Button version={"v2"} onClick={() => { props?.goBack(), props.closeModal() }}>Yes, go back</Button>
+        </ButtonGroup>
+      </ModalFooter>
+    </>
+  );
 }
 
 export default NotificationModal;
\ No newline at end of file
diff --git a/ui/src/components/Common/ProgressBar/index.tsx b/ui/src/components/Common/ProgressBar/index.tsx
index f15ae7d4..81260efc 100644
--- a/ui/src/components/Common/ProgressBar/index.tsx
+++ b/ui/src/components/Common/ProgressBar/index.tsx
@@ -24,6 +24,13 @@ type IStyle = {
   [key: string]: string
 }
 
+/**
+ * Renders a progress bar component.
+ *
+ * @component
+ * @param {ProgressBarProps} props - The props for the ProgressBar component.
+ * @returns {JSX.Element} - The rendered ProgressBar component.
+ */
 const ProgressBar = (props: ProgressBarProps) => {
   const { percentage, color, height, borderRadius, type, radius, stroke, bgColor } = props
 
diff --git a/ui/src/components/Common/ProgressBar/progressBar.scss b/ui/src/components/Common/ProgressBar/progressBar.scss
index fc0310e2..3ffaabe0 100644
--- a/ui/src/components/Common/ProgressBar/progressBar.scss
+++ b/ui/src/components/Common/ProgressBar/progressBar.scss
@@ -1,16 +1,31 @@
 @import '../../../scss//variables';
-
+/**
+ * Styles for the ProgressBar component.
+ *
+ * @class ProgressBar
+ */
 .ProgressBar {
 	border-radius: $space-4;
 	
 	overflow: hidden;
+	
+	/**
+	 * Styles for the progress bar element.
+	 *
+	 * @class ProgressBar__bar
+	 */
 	&__bar {
-		
 		border-radius: inherit;
 		height: inherit;
 		transition: width 100ms linear;
 	}
-	&__circle{
+	
+	/**
+	 * Styles for the progress circle element.
+	 *
+	 * @class ProgressBar__circle
+	 */
+	&__circle {
 		stroke-width: 5%;
 		transform: rotate(-90deg);
 		transform-origin: 50% 50%;
diff --git a/ui/src/components/Common/Settings/Settings.scss b/ui/src/components/Common/Settings/Settings.scss
index 4c6377a3..c5875a94 100644
--- a/ui/src/components/Common/Settings/Settings.scss
+++ b/ui/src/components/Common/Settings/Settings.scss
@@ -1,19 +1,40 @@
+/**
+ * This SCSS file contains styles for the Settings component.
+ */
+
 @import '../../../scss/variables';
 
 #setting-page {
   display: flex;
   width: 100%;
+
+  /**
+   * Styles for the section header.
+   */
   .SectionHeader {
     color: $color-stepper-title;
     font-weight: $font-weight-semi-bold;
     margin-bottom: 2rem;
   }
+
+  /**
+   * Styles for the page layout.
+   */
   .PageLayout {
     width: 100%;
   }
-  .PageLayout__head, .PageLayout__leftSidebar {
+
+  /**
+   * Styles for the page layout's head and left sidebar.
+   */
+  .PageLayout__head,
+  .PageLayout__leftSidebar {
     border-top: 0 none;
   }
+
+  /**
+   * Styles for the primary page layout.
+   */
   .PageLayout--primary {
     .PageLayout__content {
       .PageLayout__body {
@@ -21,12 +42,20 @@
         margin-left: 15rem;
         padding-top: $px-8;
       }
-    } 
-  } 
+    }
+  }
+
+  /**
+   * Styles for the action component title.
+   */
   .action-component-title {
     justify-content: space-between;
     width: calc(100vw - 326px);
   }
+
+  /**
+   * Styles for the content block.
+   */
   .content-block {
     margin-right: 0;
     padding: 1.5rem;
@@ -34,28 +63,30 @@
   }
 }
 
+/**
+ * Styles for the field.
+ */
 .Field {
   margin-bottom: $px-40;
 }
+
+/**
+ * Styles for hiding the left sidebar.
+ */
 .PageLayout__leftSidebar--hide {
   display: none;
 }
 
+/**
+ * Styles for the left sidebar.
+ */
 .leftsidebar {
   margin-top: 0 !important;
 }
 
-// .content-body .white-box-container {
-//   background-color: $color-brand-white-base;
-//   padding: 20px;
-//   margin-top: 50px !important;
-//   margin-left: 240px;
-//   margin-right: auto;
-//   position: relative;
-//   z-index: 10;
-//   height: 600px;
-// }
-
+/**
+ * Styles for the stack settings heading.
+ */
 .stack-settings__heading {
   color: $color-base-black-base;
   font-size: 0.875rem;
@@ -65,26 +96,16 @@
   margin-bottom: $px-20;
 }
 
-// .toggle-class {
-//   width: calc(100% - 18.4375rem) !important;
-// }
-// .layout-container.specific-context .PageLayout__head {
-//   z-index: 10 !important;
-//   margin-left: 240px;
-//   width: 100% !important;
-// }
-// .SaveButton {
-//   padding: 30px 10px;
-// }
-
-// .layout-container.content-body .PageLayout__body {
-//   margin-top: 90px !important;
-//   margin-left: 227px !important;
-// }
-
+/**
+ * Styles for the page layout's left sidebar.
+ */
 .PageLayout__leftSidebar {
   background-color: #f7f9fc !important;
 }
+
+/**
+ * Styles for the active list row.
+ */
 .ListRowV2--active {
   background-color: #fff;
   border-left: 0.125rem solid;
diff --git a/ui/src/components/Common/Settings/index.tsx b/ui/src/components/Common/Settings/index.tsx
index 7103fb79..4f9d0d98 100644
--- a/ui/src/components/Common/Settings/index.tsx
+++ b/ui/src/components/Common/Settings/index.tsx
@@ -34,6 +34,10 @@ import DeleteProjectModal from '../DeleteProjectModal';
 import './Settings.scss';
 import { RootState } from '../../../store';
 
+/**
+ * Renders the Settings component.
+ * This component is responsible for displaying and updating project settings.
+ */
 const Settings = () => {
   const params: Params<string> = useParams();
   
diff --git a/ui/src/components/Common/Settings/setting.interface.ts b/ui/src/components/Common/Settings/setting.interface.ts
index f0abcc5e..0d6a420e 100644
--- a/ui/src/components/Common/Settings/setting.interface.ts
+++ b/ui/src/components/Common/Settings/setting.interface.ts
@@ -1,3 +1,6 @@
+/**
+ * Represents a project.
+ */
 interface IProject {
   title: string;
   name: string;
diff --git a/ui/src/components/Common/WordWrapper/WordWrapper.tsx b/ui/src/components/Common/WordWrapper/WordWrapper.tsx
index f9ca6238..9b86a8e3 100644
--- a/ui/src/components/Common/WordWrapper/WordWrapper.tsx
+++ b/ui/src/components/Common/WordWrapper/WordWrapper.tsx
@@ -10,6 +10,12 @@ type Props = {
   position?: string;
 };
 
+/**
+ * Renders a component that wraps text and provides a tooltip if the text exceeds a maximum length.
+ *
+ * @param {Props} props - The component props.
+ * @returns {JSX.Element} The rendered WordWrapper component.
+ */
 function WordWrapper(props: Props) {
   const { maxLength, tooltipcontent, position = 'right' } = props;
   const text = props.text || '';
diff --git a/ui/src/components/Common/private-route.tsx b/ui/src/components/Common/private-route.tsx
index 3ba2ce34..11ff6d63 100644
--- a/ui/src/components/Common/private-route.tsx
+++ b/ui/src/components/Common/private-route.tsx
@@ -7,6 +7,14 @@ type IProps = {
   redirectTo: string;
 };
 
+/**
+ * Renders a private route component that checks if the user is authenticated.
+ * If the user is authenticated, it renders the child components.
+ * If the user is not authenticated, it redirects to the specified route.
+ *
+ * @param redirectTo - The route to redirect to if the user is not authenticated.
+ * @returns The private route component.
+ */
 const PrivateRoute: FC<IProps> = ({ redirectTo }: IProps) => {
   const isAuthenticated = !!getDataFromLocalStorage('app_token');
 
diff --git a/ui/src/components/Common/router.tsx b/ui/src/components/Common/router.tsx
index 6df9932c..0fffa4a2 100644
--- a/ui/src/components/Common/router.tsx
+++ b/ui/src/components/Common/router.tsx
@@ -19,6 +19,10 @@ const MigrationLazyLoad = lazy(() => import('../../pages/Migration'));
 const ProjectsLazyLoad = lazy(() => import('../../pages/Projects'));
 const SettingsLazyLoad = lazy(() => import ('../Common/Settings'))
 
+/**
+ * Renders the application router.
+ * @returns The application router component.
+ */
 const AppRouter = () => {
   return (
     <Routes>
diff --git a/ui/src/components/ContentMapper/contentMapper.interface.ts b/ui/src/components/ContentMapper/contentMapper.interface.ts
index a247930a..00b75055 100644
--- a/ui/src/components/ContentMapper/contentMapper.interface.ts
+++ b/ui/src/components/ContentMapper/contentMapper.interface.ts
@@ -50,19 +50,35 @@ export interface ContentType {
   fieldMapping?: FieldMapType[] | [];
 }
 
+/**
+ * Represents the field mapping type for ContentMapper.
+ */
 export interface FieldMapType {
+  /** The Contentstack field type. */
   ContentstackFieldType: string;
+  /** The child field mappings. */
   child?: FieldMapType[] | undefined;
+  /** The backup field type. */
   backupFieldType: string;
+  /** The Contentstack field name. */
   contentstackField: string;
+  /** The Contentstack field UID. */
   contentstackFieldUid: string;
+  /** Indicates if the field is deleted. */
   isDeleted: boolean;
+  /** The field name in another CMS. */
   otherCmsField: string;
+  /** The field type in another CMS. */
   otherCmsType: string;
+  /** The UID of the field mapping. */
   uid: string;
+  /** The ID of the field mapping. */
   id: string;
+  /** Indicates if the field can be selected. */
   _canSelect?: boolean;
+  /** Advanced field options. */
   advanced?: Advanced;
+  /** The Contentstack UID. */
   contentstackUid: string;
 }
 
diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss
index cf03e88c..92d13e73 100644
--- a/ui/src/components/ContentMapper/index.scss
+++ b/ui/src/components/ContentMapper/index.scss
@@ -1,3 +1,35 @@
+/**
+ * FILEPATH: /Users/rohit/migration-v2-node-server/ui/src/components/ContentMapper/index.scss
+ * 
+ * This SCSS file contains styles for the ContentMapper component.
+ * The ContentMapper component is responsible for mapping content types and fields.
+ * It includes styles for the content types list, search bar, list items, options, table, and other UI elements.
+ * 
+ * Styles are organized into different sections:
+ * - .content-types-list-wrapper: Styles for the wrapper of the content types list.
+ * - .content-types-list-header: Styles for the header of the content types list.
+ * - .ct-search-wrapper: Styles for the search bar wrapper.
+ * - .ct-list-wrapper: Styles for the wrapper of the content types list.
+ * - .ct-list: Styles for the content types list.
+ * - .mapped-icon: Styles for the mapped icon.
+ * - .dropdown-align: Styles for aligning the dropdown menu.
+ * - .content-type-list: Styles for the content type list.
+ * - .content-types-fields-wrapper: Styles for the wrapper of the content types fields.
+ * - .cta-wrapper: Styles for the call-to-action wrapper.
+ * - .table-container: Styles for the table container.
+ * - .table-wrapper: Styles for the table wrapper.
+ * - .disabled-field: Styles for disabled fields.
+ * - .action-btn-wrapper: Styles for the action button wrapper.
+ * - .action-component-body: Styles for the action component body.
+ * - .step-container: Styles for the step container.
+ * - .saveButton: Styles for the save button.
+ * - .btnWrapper: Styles for the button wrapper.
+ * - div .select: Styles for the select dropdown.
+ * - div .table-row: Styles for the table row.
+ * - .status-wrapper: Styles for the status wrapper.
+ * - .filter-wrapper: Styles for the filter wrapper.
+ * - .no-content: Styles for the no content message.
+ */
 @import '../../scss/App.scss';
 @import '../../scss/variables';
 
diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx
index 932ed583..7e365ae6 100644
--- a/ui/src/components/ContentMapper/index.tsx
+++ b/ui/src/components/ContentMapper/index.tsx
@@ -99,6 +99,10 @@ const Fields: Mapping = {
   global_field: 'Global'
 };
 
+/**
+ * Component for mapping content types.
+ */
+
 const ContentMapper = () => {
   /** ALL CONTEXT HERE */
 
diff --git a/ui/src/components/DestinationStack/Actions/LoadOrganisation.tsx b/ui/src/components/DestinationStack/Actions/LoadOrganisation.tsx
index cc31ab3d..a78ab6c2 100644
--- a/ui/src/components/DestinationStack/Actions/LoadOrganisation.tsx
+++ b/ui/src/components/DestinationStack/Actions/LoadOrganisation.tsx
@@ -1,60 +1,51 @@
-import { ChangeEvent, useEffect, useState } from 'react';
+// Importing necessary React hooks and Redux functions for state management.
+import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+
+// Importing type definitions for dropdown and migration data structures.
 import { IDropDown, INewMigration } from '../../../context/app/app.interface';
+
+// Importing UI components from @contentstack/venus-components.
 import { TextInput } from '@contentstack/venus-components';
 
+// Importing stylesheet for the DestinationStack component.
 import '../DestinationStack.scss';
+
+// Utility function to check for empty strings.
 import { isEmptyString } from '../../../utilities/functions';
+
+// RootState type for accessing the Redux store's state.
 import { RootState } from '../../../store';
+
+// Action creator for updating migration data in the Redux store.
 import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice';
 
+// Interface defining the props expected by the LoadOrganisation component.
 interface LoadOrganisationProps {
-  stepComponentProps: any;
-  currentStep: number;
-  handleStepChange: (stepIndex: number, closeStep?: boolean) => void;
+  stepComponentProps: any; // Props for the step component, type not specified.
+  currentStep: number; // The current step in a multi-step process.
+  handleStepChange: (stepIndex: number, closeStep?: boolean) => void; // Function to handle step changes.
 }
 
+// The LoadOrganisation component is responsible for loading and displaying the selected organisation.
 const LoadOrganisation = (props: LoadOrganisationProps) => {
-  /****  ALL HOOKS HERE  ****/
-
-  const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
-  const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation);
-  // const organisationsList = useSelector((state:RootState)=>state?.authentication?.organisationsList);
-
+  // State and dispatch hooks for interacting with the Redux store.
+  const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
+  const selectedOrganisation = useSelector((state: RootState) => state?.authentication?.selectedOrganisation);
   const dispatch = useDispatch();
 
+  // Local state for tracking the selected organisation.
   const [selectedOrg, setSelectedOrg] = useState<IDropDown>();
-  /****  ALL METHODS HERE  ****/
 
-  //update new  Migration Data
+  // Function to update the new migration data in the Redux store.
   const setNewMigrationData = (data: INewMigration) => {
-    dispatch(updateNewMigrationData((data)));
+    dispatch(updateNewMigrationData(data));
   };
-   
-
-  //Handle Organisation selection
-  // const handleDropdownChange = (data: ChangeEvent<HTMLInputElement>) =>  {
-  //   if (selectedOrg?.value !== data?.value) {
-  //     setSelectedOrg(() => ({ ...data }));
-
-  //     setNewMigrationData({
-  //       ...newMigrationData,
-  //       destination_stack: {
-  //         ...newMigrationData.destination_stack,
-  //         selectedOrg: { ...data }
-  //       }
-  //     });
-  //   }
-
-  //   call for Step Change
-  //   props.handleStepChange(props.currentStep);
-  // };
-
-  /****  ALL USEEffects  HERE  ****/
 
+  // Effect hook to initialize the selected organisation based on the Redux store or local state.
   useEffect(() => {
     const org = !isEmptyString(newMigrationData.destination_stack.selectedOrg.label)
-      ? newMigrationData?.destination_stack?.selectedOrg
+      ? newMigrationData.destination_stack.selectedOrg
       : selectedOrganisation;
 
     setSelectedOrg(org as any);
@@ -67,22 +58,10 @@ const LoadOrganisation = (props: LoadOrganisationProps) => {
       }
     });
   }, []);
-  
+
+  // Render function for the LoadOrganisation component.
   return (
     <div className="action-content-wrapper p-3">
-      {/* <div className="Dropdown-wrapper p-0">
-        <Select
-          version={'v2'}
-          options={organisationsList}
-          onChange={handleDropdownChange}
-          value={selectedOrg}
-          width='600'
-          isSearchable={true}
-          isDisabled={true}
-          placeholder={'Organisation'}
-        />
-      
-      </div> */}
       <TextInput 
         version={'v2'}
         value={selectedOrg?.label || 'Organisation'}
@@ -95,4 +74,5 @@ const LoadOrganisation = (props: LoadOrganisationProps) => {
   );
 };
 
-export default LoadOrganisation;
+// Exporting the LoadOrganisation component as the default export.
+export default LoadOrganisation;
\ No newline at end of file
diff --git a/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx b/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
index a3d54c6c..590777ed 100644
--- a/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
@@ -76,7 +76,7 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
   };
 
   const getFileExtension = (filePath: string): string => {
-    const ext = filePath.split('.').pop();
+    const ext = filePath?.split('.')?.pop();
     return ext ? `${ext}` : 'zip';
   };
 
diff --git a/ui/src/components/LogScreen/index.scss b/ui/src/components/LogScreen/index.scss
index 479c674b..8efb6746 100644
--- a/ui/src/components/LogScreen/index.scss
+++ b/ui/src/components/LogScreen/index.scss
@@ -1,4 +1,7 @@
 @import '../../scss/variables';
+/**
+ * Styles for the LogScreen component.
+ */
 
 .logs-container {
   font-family: Arial, sans-serif;
@@ -8,8 +11,13 @@
   margin: 0 $px-24 $px-24;
   position: relative;
 }
+
 .logs-wrapper {
   position: relative;
+  
+  /**
+   * Styles for the action items within the LogScreen component.
+   */
   .action-items {
     position: absolute;
     right: 48px;
@@ -17,13 +25,16 @@
   }
 }
 
-
+/**
+ * Styles for each log entry within the LogScreen component.
+ */
 .log-entry {
   align-items: center;
   background-color: $color-base-white-10;
   display: flex;
   padding: 5px 0;
   position: relative;
+  
   &::before {
     background-color: $color-base-white-5;
     border-right: 1px solid $color-brand-secondary-lightest;
@@ -36,30 +47,33 @@
     width: 50px;
   }
   
-  .log-number, .log-time, .log-message {
+  /**
+   * Styles for the log number within each log entry.
+   */
+  .log-number {
+    text-align: center;
+    min-width: 50px;
+    color: $color-font-active;
+    position: relative;
+  }
+  
+  /**
+   * Styles for the log time within each log entry.
+   */
+  .log-time {
+    color: $color-font-active;
     font-family: "IBM Plex Mono", monospace;
     font-size: $size-font-medium;
     font-weight: $font-weight-medium;
+    padding: 0 $px-16;
+  }
+  
+  /**
+   * Styles for the log message within each log entry.
+   */
+  .log-message {
+    color: $color-black-222;
+    flex-grow: 1;
+    padding: 0 $px-16;
   }
-}
-
-.log-number {
-  text-align: center;
-  min-width: 50px;
-  color: $color-font-active;
-  position: relative;
-}
-
-.log-time {
-  color: $color-font-active;
-  font-family: "IBM Plex Mono", monospace;
-  font-size: $size-font-medium;
-  font-weight: $font-weight-medium;
-  padding: 0 $px-16;
-}
-
-.log-message {
-  color: $color-black-222;
-  flex-grow: 1;
-  padding: 0 $px-16;
 }
diff --git a/ui/src/components/LogScreen/index.tsx b/ui/src/components/LogScreen/index.tsx
index 81a60160..0f8cfb07 100644
--- a/ui/src/components/LogScreen/index.tsx
+++ b/ui/src/components/LogScreen/index.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Icon } from '@contentstack/venus-components';
 import io from 'socket.io-client';
 
@@ -17,61 +17,128 @@ type LogsType = {
   serverPath: string;
 }
 
-const LogViewer = ({serverPath}: LogsType) => {
+/**
+ * LogViewer component displays logs received from the server.
+ * @param {string} serverPath - The path of the server to connect to.
+ */
+const LogViewer = ({ serverPath }: LogsType) => {
   const [logs, setLogs] = useState(["Loading logs..."]);
 
   useEffect(() => {
     const socket = io(serverPath || ''); // Connect to the server
+
+    /**
+     * Event listener for 'logUpdate' event.
+     * @param {string} newLogs - The new logs received from the server.
+     */
     socket.on('logUpdate', (newLogs: string) => {
       console.log("new logs", newLogs);
-      
+
       const logArray = newLogs.split('\n');
       console.log(logArray);
       setLogs(logArray);
-
     });
-  
+
     return () => {
       socket.disconnect(); // Cleanup on component unmount
     };
   }, []);
-  
-  //SCROLL LISTENER
-  useEffect(() => {
-    window.addEventListener("scroll", handleScrollToTop);
-  });
 
-  const refScrollUp = useRef<HTMLDivElement>(null);
+  /**
+   * Scrolls to the top of the logs container.
+   */
   const handleScrollToTop = () => {
-    console.log("=============", refScrollUp, refScrollUp?.current);
-    
-    refScrollUp?.current?.scrollIntoView({ behavior: "smooth" });
+    const logsContainer = document.querySelector('.logs-container');
+    if (logsContainer) {
+      logsContainer.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }
+  }
+
+  /**
+   * Scrolls to the bottom of the logs container.
+   */
+  const handleScrollToBottom = () => {
+    const logsContainer = document.querySelector('.logs-container');
+    if (logsContainer) {
+      logsContainer.scrollTo({
+        top: logsContainer.scrollHeight,
+        behavior: 'smooth',
+      });
+    }
   }
+
+  /**
+   * Copies the logs to the clipboard.
+   */
+  const handleCopyLogs = () => {
+    const logsContainer = document.querySelector('.logs-container');
+    if (logsContainer) {
+      const range = document.createRange();
+      range.selectNode(logsContainer);
+      window.getSelection()?.removeAllRanges();
+      window.getSelection()?.addRange(range);
+      navigator.clipboard.writeText(logsContainer.textContent || '');
+      window.getSelection()?.removeAllRanges();
+    }
+  }
+
+  const [zoomLevel, setZoomLevel] = useState(1);
+
+  /**
+   * Zooms in the logs container.
+   */
+  const handleZoomIn = () => {
+    const logsContainer = document.querySelector('.logs-magnify') as HTMLElement;
+    if (logsContainer) {
+      setZoomLevel(prevZoomLevel => prevZoomLevel + 0.1);
+      logsContainer.style.transform = `scale(${zoomLevel})`;
+    }
+  };
+
+  /**
+   * Zooms out the logs container.
+   */
+  const handleZoomOut = () => {
+    const logsContainer = document.querySelector('.logs-magnify') as HTMLElement;
+    if (logsContainer) {
+      setZoomLevel(prevZoomLevel => prevZoomLevel - 0.1);
+      logsContainer.style.transform = `scale(${zoomLevel})`;
+    }
+  };
+
   return (
     <div className='logs-wrapper'>
       <div className="logs-container" style={{ height: '400px', overflowY: 'auto' }}>
-        {logs?.map((log, index) => {
-          console.log(log);
-          try {
-            const logObject = JSON.parse(log);
-            const level = logObject.level;
-            const timestamp = logObject.timestamp;
-            const message = logObject.message;
-            return (
-              <div key={index} style={logStyles[level] || logStyles.info} className="log-entry" ref={index === 0 ? refScrollUp : null}>
-                <div className="log-number">{index}</div>
-                <div className="log-time">{new Date(timestamp).toTimeString().split(' ')[0]}</div>
-                <div className="log-message">{message}</div>
-              </div>
-            );
-          } catch (error) {
-            console.error('Invalid JSON string', error);
-          }
-        })}
-        
+        <div className="logs-magnify">
+          {logs?.map((log, index) => {
+            // console.log(log);
+            try {
+              const logObject = JSON.parse(log);
+              const level = logObject.level;
+              const timestamp = logObject.timestamp;
+              const message = logObject.message;
+              return (
+                <div key={index} style={logStyles[level] || logStyles.info} className="log-entry">
+                  <div className="log-number">{index}</div>
+                  <div className="log-time">{new Date(timestamp).toTimeString().split(' ')[0]}</div>
+                  <div className="log-message">{message}</div>
+                </div>
+              );
+            } catch (error) {
+              console.error('Invalid JSON string', error);
+            }
+          })}
+        </div>
       </div>
       <div className='action-items'>
         <Icon icon="ArrowUp" version='v2' onClick={handleScrollToTop} />
+        <Icon icon="ArrowDown" version='v2' onClick={handleScrollToBottom} />
+        <Icon icon="Search" version='v2' onClick={handleZoomIn} />
+        <Icon icon="ZoomOut" version='v2' onClick={handleZoomOut} />
+        <Icon icon="File" version='v2' onClick={handleCopyLogs} />
       </div>
     </div>
   );
diff --git a/uplaode-api/src/config/index.ts b/uplaode-api/src/config/index.ts
index d0722ca5..3ecf77d8 100644
--- a/uplaode-api/src/config/index.ts
+++ b/uplaode-api/src/config/index.ts
@@ -9,5 +9,5 @@ export default {
     bucketName: 'migartion-test',
     buketKey: 'project/package 45.zip'
   },
-  localPath: '/Users/snehal.pimple/Desktop/package 45.zip'
-};
+  localPath: '/Users/rohit/Desktop/package 45.zip'
+};
\ No newline at end of file

From 978b9d40baf52b19a08094eca4da3314e315da36 Mon Sep 17 00:00:00 2001
From: Rohit Kini <rohit.kini@contentstack.com>
Date: Thu, 11 Jul 2024 17:23:42 +0530
Subject: [PATCH 02/10] added comments on some UI files and looger windows
 functionality

---
 .../projects.contentMapper.controller.ts      |  9 ++++---
 api/src/services/contentMapper.service.ts     | 25 ++++++++++---------
 api/src/services/projects.service.ts          |  4 +--
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/api/src/controllers/projects.contentMapper.controller.ts b/api/src/controllers/projects.contentMapper.controller.ts
index 6a22299c..c0623d22 100644
--- a/api/src/controllers/projects.contentMapper.controller.ts
+++ b/api/src/controllers/projects.contentMapper.controller.ts
@@ -37,10 +37,13 @@ const resetContentType = async (req: Request, res: Response): Promise<void> => {
 //   res.status(200).json(resp);
 // };
 
-const removeContentMapper = async (req: Request, res: Response): Promise<void> => {
+const removeContentMapper = async (
+  req: Request,
+  res: Response
+): Promise<void> => {
   const resp = await contentMapperService.removeContentMapper(req);
   res.status(200).json(resp);
-}
+};
 
 const getSingleContentTypes = async (
   req: Request,
@@ -59,5 +62,5 @@ export const contentMapperController = {
   resetContentType,
   // removeMapping,
   getSingleContentTypes,
-  removeContentMapper
+  removeContentMapper,
 };
diff --git a/api/src/services/contentMapper.service.ts b/api/src/services/contentMapper.service.ts
index 050e5580..788feb29 100644
--- a/api/src/services/contentMapper.service.ts
+++ b/api/src/services/contentMapper.service.ts
@@ -26,7 +26,7 @@ import { ContentTypesMapper } from "../models/contentTypesMapper-lowdb.js";
 // Developer service to create dummy contentmapping data
 const putTestData = async (req: Request) => {
   const projectId = req.params.projectId;
-  const contentTypes = req.body.contentTypes; 
+  const contentTypes = req.body.contentTypes;
 
   await FieldMapperModel.read();
   contentTypes.map((type: any, index: any) => {
@@ -45,7 +45,7 @@ const putTestData = async (req: Request) => {
   await ContentTypesMapperModelLowdb.read();
   const contentIds: string[] = [];
   const contentType = contentTypes.map((item: any) => {
-    const id = item?.id  || uuidv4();
+    const id = item?.id || uuidv4();
     contentIds.push(id);
     return { ...item, id };
   });
@@ -532,7 +532,7 @@ const resetAllContentTypesMapping = async (projectId: string) => {
   try {
     const contentTypes = cData;
     for (const contentType of contentTypes) {
-      if (contentType &&  !isEmpty(contentType.fieldMapping)) {
+      if (contentType && !isEmpty(contentType.fieldMapping)) {
         for (const field of contentType.fieldMapping) {
           await FieldMapperModel.read();
           const fieldData = FieldMapperModel.chain
@@ -569,10 +569,8 @@ const resetAllContentTypesMapping = async (projectId: string) => {
           });
         }
       }
-
     }
 
-
     return projectDetails;
   } catch (error: any) {
     logger.error(
@@ -735,13 +733,16 @@ const removeContentMapper = async (req: Request) => {
     throw new BadRequestError(HTTP_TEXTS.PROJECT_NOT_FOUND);
   }
   await ContentTypesMapperModelLowdb.read();
-  const cData: ContentTypesMapper[] = projectDetails?.content_mapper.map((cId: string) => {
-    const contentTypeData: ContentTypesMapper = ContentTypesMapperModelLowdb.chain
-      .get("ContentTypesMappers")
-      .find({ id: cId })
-      .value();
-    return contentTypeData;
-  });
+  const cData: ContentTypesMapper[] = projectDetails?.content_mapper.map(
+    (cId: string) => {
+      const contentTypeData: ContentTypesMapper =
+        ContentTypesMapperModelLowdb.chain
+          .get("ContentTypesMappers")
+          .find({ id: cId })
+          .value();
+      return contentTypeData;
+    }
+  );
 
   try {
     const contentTypes: ContentTypesMapper[] = cData;
diff --git a/api/src/services/projects.service.ts b/api/src/services/projects.service.ts
index b76e604f..e42eef39 100644
--- a/api/src/services/projects.service.ts
+++ b/api/src/services/projects.service.ts
@@ -27,8 +27,8 @@ const getAllProjects = async (req: Request) => {
   const orgId = req?.params?.orgId;
 
   const decodedToken = req.body.token_payload;
-  const { user_id = "", region = "" } = decodedToken; 
-   
+  const { user_id = "", region = "" } = decodedToken;
+
   await ProjectModelLowdb.read();
   const projects = ProjectModelLowdb.chain
     .get("projects")

From 5815ac24c2f39ae89df6ac2f0fb4788e054f1e4b Mon Sep 17 00:00:00 2001
From: Rohit Kini <rohit.kini@contentstack.com>
Date: Thu, 11 Jul 2024 17:52:56 +0530
Subject: [PATCH 03/10] comments added

---
 api/src/services/projects.service.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/api/src/services/projects.service.ts b/api/src/services/projects.service.ts
index 223573b0..723a8fba 100644
--- a/api/src/services/projects.service.ts
+++ b/api/src/services/projects.service.ts
@@ -354,7 +354,14 @@ const affixConfirmation = async (req: Request) => {
 
 const updateFileFormat = async (req: Request) => {
   const { orgId, projectId } = req.params;
-  const { token_payload, file_format,file_path,is_localPath,is_fileValid,awsDetails } = req.body;
+  const {
+    token_payload,
+    file_format,
+    file_path,
+    is_localPath,
+    is_fileValid,
+    awsDetails,
+  } = req.body;
   const srcFunc = "updateFileFormat";
   const projectIndex = (await getProjectUtil(
     projectId,

From 1b9f3aff832efbc1693981f572dda435b5a4a1b1 Mon Sep 17 00:00:00 2001
From: Rohit Kini <rohit.kini@contentstack.com>
Date: Fri, 12 Jul 2024 21:34:28 +0530
Subject: [PATCH 04/10] added documenting

---
 api/src/config/dev.config.ts                  |   3 +-
 api/src/config/index.ts                       |   3 +-
 api/src/config/prod.config.ts                 |   3 +-
 api/src/controllers/auth.controller.ts        |   4 +-
 .../projects.contentMapper.controller.ts      |   8 +-
 api/src/controllers/projects.controller.ts    |  26 +--
 api/src/controllers/user.controller.ts        |   2 +-
 api/src/middlewares/req-headers.middleware.ts |   2 +-
 .../unmatched-routes.middleware.ts            |   2 +-
 api/src/models/contentTypesMapper-lowdb.ts    |   1 -
 api/src/models/types.ts                       |   1 -
 api/src/server.ts                             |   1 -
 api/src/services/contentMapper.service.ts     |   1 -
 api/src/utils/async-router.utils.ts           |   2 +-
 api/src/utils/custom-errors.utils.ts          | 148 +++++++++---------
 15 files changed, 102 insertions(+), 105 deletions(-)

diff --git a/api/src/config/dev.config.ts b/api/src/config/dev.config.ts
index 34ae6a52..cdd2363d 100644
--- a/api/src/config/dev.config.ts
+++ b/api/src/config/dev.config.ts
@@ -10,5 +10,6 @@ export const devConfig = {
     AZURE_NA: "https://azure-na-app.contentstack.com/#!",
     AZURE_EU: "https://azure-eu-app.contentstack.com/#!",
   },
-  LOG_FILE_PATH: process.platform === "win32" ? ".\\combine.log" : "./combine.log", // Replace with the actual path to your log file
+  LOG_FILE_PATH:
+    process.platform === "win32" ? ".\\combine.log" : "./combine.log", // Replace with the actual path to your log file
 };
diff --git a/api/src/config/index.ts b/api/src/config/index.ts
index ba9aea29..f714b380 100644
--- a/api/src/config/index.ts
+++ b/api/src/config/index.ts
@@ -17,7 +17,7 @@ export type ConfigType = {
   PORT: string;
   APP_ENV: string;
   MONGODB_URI: string;
-  LOG_FILE_PATH : string;
+  LOG_FILE_PATH: string;
   CS_API: {
     NA: string;
     EU: string;
@@ -64,4 +64,3 @@ export const config: ConfigType = {
 
   ...(process.env.NODE_ENV === "production" ? prodConfig : devConfig),
 };
-
diff --git a/api/src/config/prod.config.ts b/api/src/config/prod.config.ts
index 44e9899e..7a49fdbd 100644
--- a/api/src/config/prod.config.ts
+++ b/api/src/config/prod.config.ts
@@ -11,5 +11,6 @@ export const prodConfig = {
     AZURE_NA: "https://azure-na-app.contentstack.com/#!",
     AZURE_EU: "https://azure-eu-app.contentstack.com/#!",
   },
-  LOG_FILE_PATH: process.platform === "win32" ? ".\\combine.log" : "./combine.log", // Replace with the actual path to your log file
+  LOG_FILE_PATH:
+    process.platform === "win32" ? ".\\combine.log" : "./combine.log", // Replace with the actual path to your log file
 };
diff --git a/api/src/controllers/auth.controller.ts b/api/src/controllers/auth.controller.ts
index 6373fa1f..8c72d70c 100644
--- a/api/src/controllers/auth.controller.ts
+++ b/api/src/controllers/auth.controller.ts
@@ -3,7 +3,7 @@ import { authService } from "../services/auth.service.js";
 
 /**
  * Handles the login request.
- * 
+ *
  * @param req The request object.
  * @param res The response object.
  */
@@ -14,7 +14,7 @@ const login = async (req: Request, res: Response) => {
 
 /**
  * Handles the request for sending an SMS.
- * 
+ *
  * @param req The request object.
  * @param res The response object.
  */
diff --git a/api/src/controllers/projects.contentMapper.controller.ts b/api/src/controllers/projects.contentMapper.controller.ts
index 9b572a04..9ed85f85 100644
--- a/api/src/controllers/projects.contentMapper.controller.ts
+++ b/api/src/controllers/projects.contentMapper.controller.ts
@@ -106,10 +106,10 @@ const getSingleContentTypes = async (
  * @param req - The request object.
  * @param res - The response object.
  * @returns Promise<void>
- */ 
-// const removeMapping = async (req: Request, res: Response): Promise<void> => {    
-//   const resp = await contentMapperService.removeMapping(req);  
-//   res.status(200).json(resp);  
+ */
+// const removeMapping = async (req: Request, res: Response): Promise<void> => {
+//   const resp = await contentMapperService.removeMapping(req);
+//   res.status(200).json(resp);
 // };
 
 export const contentMapperController = {
diff --git a/api/src/controllers/projects.controller.ts b/api/src/controllers/projects.controller.ts
index 5e7c7b51..684ae5a3 100644
--- a/api/src/controllers/projects.controller.ts
+++ b/api/src/controllers/projects.controller.ts
@@ -3,7 +3,7 @@ import { projectService } from "../services/projects.service.js";
 
 /**
  * Retrieves all projects.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  * @returns A promise that resolves to void.
@@ -15,7 +15,7 @@ const getAllProjects = async (req: Request, res: Response): Promise<void> => {
 
 /**
  * Retrieves a project.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  * @returns A promise that resolves to void.
@@ -27,7 +27,7 @@ const getProject = async (req: Request, res: Response): Promise<void> => {
 
 /**
  * Creates a project.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  * @returns A promise that resolves to void.
@@ -39,7 +39,7 @@ const createProject = async (req: Request, res: Response): Promise<void> => {
 
 /**
  * Updates a project.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  * @returns A promise that resolves to void.
@@ -51,7 +51,7 @@ const updateProject = async (req: Request, res: Response): Promise<void> => {
 
 /**
  * Updates a legacy CMS.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  * @returns A promise that resolves to void.
@@ -63,7 +63,7 @@ const updateLegacyCMS = async (req: Request, res: Response) => {
 
 /**
  * Updates an affix.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  * @returns A promise that resolves to void.
@@ -75,7 +75,7 @@ const updateAffix = async (req: Request, res: Response) => {
 
 /**
  * Affix confirmation.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  * @returns A promise that resolves to void.
@@ -87,7 +87,7 @@ const affixConfirmation = async (req: Request, res: Response) => {
 
 /**
  * Updates a file format.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  * @returns A promise that resolves to void.
@@ -99,7 +99,7 @@ const updateFileFormat = async (req: Request, res: Response) => {
 
 /**
  * File format confirmation.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  * @returns A promise that resolves to void.
@@ -111,7 +111,7 @@ const fileformatConfirmation = async (req: Request, res: Response) => {
 
 /**
  * Updates a destination stack.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  * @returns A promise that resolves to void.
@@ -123,7 +123,7 @@ const updateDestinationStack = async (req: Request, res: Response) => {
 
 /**
  * Updates the current step of a project.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  * @returns A promise that resolves to void.
@@ -135,7 +135,7 @@ const updateCurrentStep = async (req: Request, res: Response) => {
 
 /**
  * Deletes a project.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  * @returns A promise that resolves to void.
@@ -147,7 +147,7 @@ const deleteProject = async (req: Request, res: Response): Promise<void> => {
 
 /**
  * Reverts a project.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  * @returns A promise that resolves to void.
diff --git a/api/src/controllers/user.controller.ts b/api/src/controllers/user.controller.ts
index d5b3c792..9c3f1d65 100644
--- a/api/src/controllers/user.controller.ts
+++ b/api/src/controllers/user.controller.ts
@@ -3,7 +3,7 @@ import { userService } from "../services/user.service.js";
 
 /**
  * Retrieves the user profile.
- * 
+ *
  * @param req - The request object.
  * @param res - The response object.
  */
diff --git a/api/src/middlewares/req-headers.middleware.ts b/api/src/middlewares/req-headers.middleware.ts
index a1b4b3e6..aa1f425e 100644
--- a/api/src/middlewares/req-headers.middleware.ts
+++ b/api/src/middlewares/req-headers.middleware.ts
@@ -2,7 +2,7 @@ import { Request, Response, NextFunction } from "express";
 
 /**
  * Middleware to set the request headers.
- * 
+ *
  * @param req The request object.
  * @param res The response object.
  * @param next The next function.
diff --git a/api/src/middlewares/unmatched-routes.middleware.ts b/api/src/middlewares/unmatched-routes.middleware.ts
index 241961d1..79a67de3 100644
--- a/api/src/middlewares/unmatched-routes.middleware.ts
+++ b/api/src/middlewares/unmatched-routes.middleware.ts
@@ -3,7 +3,7 @@ import { HTTP_CODES, HTTP_TEXTS } from "../constants/index.js";
 
 /**
  * Handles the unmatched routes.
- * 
+ *
  * @param req The request object.
  * @param res The response object.
  */
diff --git a/api/src/models/contentTypesMapper-lowdb.ts b/api/src/models/contentTypesMapper-lowdb.ts
index 7fa647b6..ee56688e 100644
--- a/api/src/models/contentTypesMapper-lowdb.ts
+++ b/api/src/models/contentTypesMapper-lowdb.ts
@@ -16,7 +16,6 @@ export interface ContentTypesMapper {
   fieldMapping: [];
 }
 
-
 // interface ContentTypesMapper {
 //   id: string;
 //   projectId: string;
diff --git a/api/src/models/types.ts b/api/src/models/types.ts
index 713e18ea..6febaaf9 100644
--- a/api/src/models/types.ts
+++ b/api/src/models/types.ts
@@ -1,4 +1,3 @@
-
 /**
  * Represents a user.
  */
diff --git a/api/src/server.ts b/api/src/server.ts
index 72a1e948..fbaf4cb6 100644
--- a/api/src/server.ts
+++ b/api/src/server.ts
@@ -21,7 +21,6 @@ import { Server } from "socket.io";
 import http from "http";
 import fs from "fs";
 
-
 try {
   const app = express();
   app.use(
diff --git a/api/src/services/contentMapper.service.ts b/api/src/services/contentMapper.service.ts
index 1f13b90b..e5731e9c 100644
--- a/api/src/services/contentMapper.service.ts
+++ b/api/src/services/contentMapper.service.ts
@@ -23,7 +23,6 @@ import { v4 as uuidv4 } from "uuid";
 import ContentTypesMapperModelLowdb from "../models/contentTypesMapper-lowdb.js";
 import { ContentTypesMapper } from "../models/contentTypesMapper-lowdb.js";
 
-
 /**
  * Updates the test data for a given project.
  *
diff --git a/api/src/utils/async-router.utils.ts b/api/src/utils/async-router.utils.ts
index 818db6d7..921a4593 100644
--- a/api/src/utils/async-router.utils.ts
+++ b/api/src/utils/async-router.utils.ts
@@ -2,7 +2,7 @@ import { Request, Response, NextFunction } from "express";
 
 /**
  * Wraps an asynchronous route handler function with error handling middleware.
- * 
+ *
  * @param fn - The asynchronous route handler function.
  * @returns A middleware function that handles asynchronous errors.
  */
diff --git a/api/src/utils/custom-errors.utils.ts b/api/src/utils/custom-errors.utils.ts
index e9296090..b66b8610 100644
--- a/api/src/utils/custom-errors.utils.ts
+++ b/api/src/utils/custom-errors.utils.ts
@@ -1,94 +1,94 @@
 import { HTTP_CODES, HTTP_TEXTS } from "../constants/index.js";
 
-  /**
-   * Represents an application error.
-   * Extends the base AppError class.
-   */
-  export class AppError extends Error {
-    constructor(public statusCode: number, message: string) {
-      super(message);
-      Object.setPrototypeOf(this, AppError.prototype);
-    }
+/**
+ * Represents an application error.
+ * Extends the base AppError class.
+ */
+export class AppError extends Error {
+  constructor(public statusCode: number, message: string) {
+    super(message);
+    Object.setPrototypeOf(this, AppError.prototype);
   }
+}
 
-  /**
-   * Represents a custom error for a resource not found.
-   * Extends the base AppError class.
-   */
-  export class NotFoundError extends AppError {
-    constructor(message: string = "Not Found") {
-      super(HTTP_CODES.NOT_FOUND, message);
-    }
+/**
+ * Represents a custom error for a resource not found.
+ * Extends the base AppError class.
+ */
+export class NotFoundError extends AppError {
+  constructor(message: string = "Not Found") {
+    super(HTTP_CODES.NOT_FOUND, message);
   }
+}
 
-  /**
-   * Represents a custom error for a bad request.
-   * Extends the base AppError class.
-   */
-  export class BadRequestError extends AppError {
-    constructor(message: string = "Bad Request") {
-      super(HTTP_CODES.BAD_REQUEST, message);
-    }
+/**
+ * Represents a custom error for a bad request.
+ * Extends the base AppError class.
+ */
+export class BadRequestError extends AppError {
+  constructor(message: string = "Bad Request") {
+    super(HTTP_CODES.BAD_REQUEST, message);
   }
+}
 
-  /**
-   * Represents a custom error for a database error.
-   * Extends the base AppError class.
-   */
-  export class DatabaseError extends AppError {
-    constructor(message: string = "DB error") {
-      super(HTTP_CODES.SERVER_ERROR, message);
-    }
+/**
+ * Represents a custom error for a database error.
+ * Extends the base AppError class.
+ */
+export class DatabaseError extends AppError {
+  constructor(message: string = "DB error") {
+    super(HTTP_CODES.SERVER_ERROR, message);
   }
+}
 
-  /**
-   * Represents a custom error for a validation error.
-   * Extends the base AppError class.
-   */
-  export class ValidationError extends AppError {
-    constructor(message: string = "User validation error") {
-      super(HTTP_CODES.UNPROCESSABLE_CONTENT, message);
-    }
+/**
+ * Represents a custom error for a validation error.
+ * Extends the base AppError class.
+ */
+export class ValidationError extends AppError {
+  constructor(message: string = "User validation error") {
+    super(HTTP_CODES.UNPROCESSABLE_CONTENT, message);
   }
+}
 
-  /**
-   * Represents a custom error for an internal server error.
-   * Extends the base AppError class
-   */
-  export class InternalServerError extends AppError {
-    constructor(message: string = HTTP_TEXTS.INTERNAL_ERROR) {
-      super(HTTP_CODES.SERVER_ERROR, message);
-    }
+/**
+ * Represents a custom error for an internal server error.
+ * Extends the base AppError class
+ */
+export class InternalServerError extends AppError {
+  constructor(message: string = HTTP_TEXTS.INTERNAL_ERROR) {
+    super(HTTP_CODES.SERVER_ERROR, message);
   }
+}
 
-  /**
-   * Represents a custom error for an unauthorized request.
-   * Extends the base AppError class
-   */
-  export class UnauthorizedError extends AppError {
-    constructor(message: string = HTTP_TEXTS.UNAUTHORIZED) {
-      super(HTTP_CODES.UNAUTHORIZED, message);
-    }
+/**
+ * Represents a custom error for an unauthorized request.
+ * Extends the base AppError class
+ */
+export class UnauthorizedError extends AppError {
+  constructor(message: string = HTTP_TEXTS.UNAUTHORIZED) {
+    super(HTTP_CODES.UNAUTHORIZED, message);
   }
+}
 
-  /**
-   * Represents a custom error for an S3 error.
-   * Extends the base AppError class
-   */
-  export class S3Error extends AppError {
-    constructor(message: string = HTTP_TEXTS.S3_ERROR) {
-      super(HTTP_CODES.SERVER_ERROR, message);
-    }
+/**
+ * Represents a custom error for an S3 error.
+ * Extends the base AppError class
+ */
+export class S3Error extends AppError {
+  constructor(message: string = HTTP_TEXTS.S3_ERROR) {
+    super(HTTP_CODES.SERVER_ERROR, message);
   }
+}
 
-  /**
-   * Represents a custom error for a function exception.
-   * Extends the base AppError class
-   */
-  export class ExceptionFunction extends AppError {
-    constructor(message: string, httpStatus: number) {
-      super(httpStatus, message);
-    }
+/**
+ * Represents a custom error for a function exception.
+ * Extends the base AppError class
+ */
+export class ExceptionFunction extends AppError {
+  constructor(message: string, httpStatus: number) {
+    super(httpStatus, message);
   }
+}
 
-  // Add more custom error classes as needed
+// Add more custom error classes as needed

From 2bc18d8fd77bc4f7e3aab43a23f9a80c1d8fe8d8 Mon Sep 17 00:00:00 2001
From: Rohit Kini <rohit.kini@contentstack.com>
Date: Fri, 12 Jul 2024 21:39:22 +0530
Subject: [PATCH 05/10] added documenting

---
 .../DestinationStack/DestinationStack.scss    | 39 -------------------
 1 file changed, 39 deletions(-)

diff --git a/ui/src/components/DestinationStack/DestinationStack.scss b/ui/src/components/DestinationStack/DestinationStack.scss
index 9da97b44..224fb5bb 100644
--- a/ui/src/components/DestinationStack/DestinationStack.scss
+++ b/ui/src/components/DestinationStack/DestinationStack.scss
@@ -85,16 +85,9 @@
     border: 1px solid $color-brand-secondary-lightest;
     border-radius: 4px;
     background-color: $color-brand-white-base;
-<<<<<<< Updated upstream
     .description {
       line-height: 24px;
     }
-=======
-
-    /**
-     * Styles for the step_block class.
-     */
->>>>>>> Stashed changes
     .step_block {
       padding: 0 !important;
       margin: 0;
@@ -114,7 +107,6 @@
       font-weight: $font-weight-semi-bold;
       line-height: 21px;
     }
-<<<<<<< Updated upstream
     .orgWrapper, .title {
       .asterisk_input::after {
         content: '';
@@ -124,12 +116,6 @@
         font-weight: 400;
       }
     }
-=======
-
-    /**
-     * Styles for the action-content-wrapper class.
-     */
->>>>>>> Stashed changes
     .action-content-wrapper {
       box-shadow: none;
       border: 0 none;
@@ -158,7 +144,6 @@
     .Select__menu {
       width: 100%;
       margin: 0;
-<<<<<<< Updated upstream
       padding: 0; 
       .createStack {
         background-color: $color-brand-white-base;
@@ -171,13 +156,6 @@
         line-height: 24px;
         padding: 1rem;
       }
-=======
-      padding-bottom: 0;
-
-      /**
-       * Styles for the Select__option class.
-       */
->>>>>>> Stashed changes
       .Select__v2 .Select__menu .Select__menu-list .Select__option {
         padding: 12px !important;
         &:hover {
@@ -210,26 +188,9 @@
        */
       .Select__option {
         position: relative;
-<<<<<<< Updated upstream
       }
     }
 
-=======
-
-        &:last-child {
-          border-top: 1px solid $color-brand-secondary-lightest;
-          position: sticky;
-          bottom: 0;
-          color: $color-brand-primary-base;
-          font-weight: $font-weight-semi-bold;
-        }
-      }
-    }
-
-    /**
-     * Styles for the TextInput--disabled class.
-     */
->>>>>>> Stashed changes
     .TextInput--disabled .TextInput__v2 {
       background-color: #F9F8FF !important;
     }

From f594909ece660d4575bbf684103d4d08cc95f409 Mon Sep 17 00:00:00 2001
From: Rohit Kini <rohit.kini@contentstack.com>
Date: Fri, 12 Jul 2024 21:41:37 +0530
Subject: [PATCH 06/10] added documenting

---
 ui/src/components/MainHeader/index.tsx | 35 --------------------------
 1 file changed, 35 deletions(-)

diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx
index 5cb9c607..d6d728ea 100644
--- a/ui/src/components/MainHeader/index.tsx
+++ b/ui/src/components/MainHeader/index.tsx
@@ -49,7 +49,6 @@ const MainHeader = () => {
   const [orgsList, setOrgsList] = useState<IDropDown[]>([]);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-
   const location = useLocation();
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -115,7 +114,6 @@ const MainHeader = () => {
     setDataInLocalStorage('organization', data?.value);
   };
 
-<<<<<<< Updated upstream
   useEffect(()=>{ 
     const handlePopState = (event: PopStateEvent) => {
       event.preventDefault();
@@ -138,19 +136,11 @@ const MainHeader = () => {
 
 
   const handleonClick = async () => { 
-=======
-  /**
-   * Handles the click event on the main header.
-   * Navigates to the appropriate page based on the current step and selected organization.
-   */
-  const handleonClick = async () => {
->>>>>>> Stashed changes
     const currentIndex = newMigrationData?.legacy_cms?.currentStep + 1;
     const pathSegments = location?.pathname.split('/');
     const lastPathSegment = pathSegments[pathSegments.length - 4];
     const response = await getProject(selectedOrganisation?.uid || '', lastPathSegment);
     const current_step = response?.data?.current_step;
-<<<<<<< Updated upstream
     if(isModalOpen) return;
 
     const goback = () => {
@@ -178,31 +168,6 @@ const MainHeader = () => {
     }
     else{
       dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION))
-=======
-
-    const goback = () => {
-      dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION));
-      navigate(`/projects`, { replace: true });
-    };
-
-    if (
-      -1 < currentIndex &&
-      currentIndex < 4 &&
-      (!isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) ||
-        !isEmptyString(newMigrationData?.legacy_cms?.affix) ||
-        newMigrationData?.legacy_cms?.uploadedFile?.isValidated) &&
-      current_step === 1
-    ) {
-      return cbModal({
-        component: (props: ModalObj) => <NotificationModal goBack={goback} {...props} />,
-        modalProps: {
-          size: 'xsmall',
-          shouldCloseOnOverlayClick: false
-        }
-      });
-    } else {
-      dispatch(updateNewMigrationData(DEFAULT_NEW_MIGRATION));
->>>>>>> Stashed changes
       navigate(`/projects`, { replace: true });
     }
   };

From 668b7cac51e3c242e5fc514a807662815bc1a55e Mon Sep 17 00:00:00 2001
From: Vishal Patel <48822143+v1shalpatel@users.noreply.github.com>
Date: Mon, 15 Jul 2024 15:58:41 +0530
Subject: [PATCH 07/10] Revert "Feature/dev after commenting"

---
 api/src/config/dev.config.ts                  |   2 -
 api/src/config/index.ts                       |  31 +-
 api/src/config/prod.config.ts                 |   2 -
 api/src/controllers/auth.controller.ts        |  12 -
 api/src/controllers/migration.controller.ts   |  12 -
 api/src/controllers/org.controller.ts         |  20 -
 .../projects.contentMapper.controller.ts      |  78 +--
 api/src/controllers/projects.controller.ts    |  93 ---
 api/src/controllers/user.controller.ts        |   6 -
 api/src/database.ts                           |   6 -
 api/src/middlewares/auth.middleware.ts        |   6 -
 .../auth.uploadService.middleware.ts          |   6 -
 api/src/middlewares/error.middleware.ts       |   7 -
 api/src/middlewares/logger.middleware.ts      |   4 +-
 api/src/middlewares/req-headers.middleware.ts |   7 -
 .../unmatched-routes.middleware.ts            |   6 -
 api/src/models/FieldMapper.ts                 |   9 -
 api/src/models/authentication.ts              |  11 -
 api/src/models/contentTypesMapper-lowdb.ts    |  12 -
 api/src/models/project-lowdb.ts               |  18 -
 api/src/models/types.ts                       |  32 +-
 api/src/routes/auth.routes.ts                 |   5 +-
 api/src/routes/contentMapper.routes.ts        |   7 +-
 api/src/routes/migration.routes.ts            |  22 +-
 api/src/routes/org.routes.ts                  |  27 +-
 api/src/routes/projects.routes.ts             |  76 +--
 api/src/routes/user.routes.ts                 |   7 +-
 api/src/server.ts                             |  11 +-
 api/src/services/auth.service.ts              |  21 -
 api/src/services/contentMapper.service.ts     |  92 +--
 api/src/services/migration.service.ts         |  14 -
 api/src/services/org.service.ts               |  47 +-
 api/src/services/projects.service.ts          |  94 +--
 api/src/services/user.service.ts              |   7 -
 api/src/utils/async-router.utils.ts           |   6 -
 api/src/utils/auth.utils.ts                   |   7 -
 api/src/utils/custom-errors.utils.ts          |  36 --
 api/src/utils/get-project.utils.ts            |  10 -
 api/src/utils/https.utils.ts                  |   7 -
 api/src/utils/index.ts                        |  25 +-
 api/src/utils/jwt.utils.ts                    |   6 -
 api/src/utils/logger.ts                       |   5 +-
 api/src/utils/lowdb-lodash.utils.ts           |   4 -
 .../affix-confirmation.validator.ts           |   5 -
 api/src/validators/affix.validator.ts         |   5 -
 api/src/validators/auth.validator.ts          |   5 -
 api/src/validators/cms.validator.ts           |   5 -
 .../validators/destination-stack.validator.ts |   5 -
 api/src/validators/file-format.validator.ts   |   5 -
 .../fileformat-confirmation.validator.ts      |   5 -
 api/src/validators/index.ts                   |   5 -
 api/src/validators/project.validator.ts       |   5 -
 ui/src/common/assets/icons.tsx                |   4 -
 ui/src/common/assets/index.ts                 |   3 -
 .../AccountPage/accountPage.interface.ts      |   3 -
 ui/src/components/AccountPage/index.scss      |  25 -
 ui/src/components/AccountPage/index.tsx       |   7 -
 .../advanceProperties.interface.ts            |  71 ---
 .../components/AdvancePropertise/index.scss   |  31 +-
 ui/src/components/AdvancePropertise/index.tsx |  27 +-
 ui/src/components/Card/card.interface.ts      |   3 -
 ui/src/components/Card/card.scss              |  80 +--
 ui/src/components/Card/index.tsx              |   6 -
 .../Common/AddStack/addStack.interface.ts     |  68 --
 .../components/Common/AddStack/addStack.scss  |  13 -
 .../components/Common/AddStack/addStack.tsx   |   7 -
 .../components/Common/Card/card.interface.ts  |  25 -
 ui/src/components/Common/Card/card.scss       |  43 +-
 ui/src/components/Common/Card/card.tsx        |   8 +-
 .../Common/DeleteProjectModal/index.tsx       |  16 +-
 ui/src/components/Common/DocLink/DocLink.tsx  |  15 -
 .../Common/FileUpload/fileupload.scss         |  21 -
 ui/src/components/Common/FileUpload/index.tsx |  40 --
 .../components/Common/FileUpload/upload.scss  |  33 -
 .../components/Common/FileUpload/upload.tsx   |  24 -
 .../Common/Modal/FilterModal/FilterModal.scss |  96 +--
 .../Common/Modal/FilterModal/FilterModal.tsx  |   8 -
 .../FilterModal/filterModal.interface.ts      |   3 -
 .../components/Common/ProgressBar/index.tsx   |   7 -
 .../Common/ProgressBar/progressBar.scss       |  21 +-
 .../components/Common/Settings/Settings.scss  |  83 +--
 .../Common/Settings/setting.interface.ts      |   3 -
 .../Common/WordWrapper/WordWrapper.tsx        |   6 -
 ui/src/components/Common/private-route.tsx    |   8 -
 ui/src/components/Common/router.tsx           |   4 -
 .../ContentMapper/contentMapper.interface.ts  |  16 -
 ui/src/components/ContentMapper/index.scss    |  31 -
 ui/src/components/ContentMapper/index.tsx     |   4 -
 .../Actions/LoadOrganisation.tsx              |  48 +-
 .../DestinationStack/Actions/LoadStacks.tsx   |   5 -
 .../DestinationStack/DestinationStack.scss    | 102 +--
 .../DestinationStack/StepperSteps.ts          |  17 -
 .../Summary/OrganisationSummary.tsx           |  10 -
 .../Summary/StacksSummary.tsx                 |   6 -
 .../DestinationStack/Summary/summary.scss     |  12 -
 ui/src/components/DestinationStack/index.tsx  | 135 ++--
 ui/src/components/ErrorBoundary/index.tsx     |   3 -
 ui/src/components/ImageTag/index.tsx          |  11 -
 .../LegacyCms/Actions/LoadFileFormat.tsx      |  98 ++-
 .../LegacyCms/Actions/LoadPrefix.tsx          |   6 -
 .../LegacyCms/Actions/LoadSelectCms.tsx       |   7 -
 .../LegacyCms/Actions/LoadUploadFile.tsx      |  26 +-
 ui/src/components/LegacyCms/StepperSteps.ts   |  16 -
 .../LegacyCms/Summary/FileFormatSummary.tsx   |   6 -
 .../LegacyCms/Summary/PreFixSummary.tsx       |   6 -
 .../LegacyCms/Summary/SelectCmsSummary.tsx    |   6 -
 .../LegacyCms/Summary/UploadFileSummary.tsx   |  16 +-
 .../components/LegacyCms/Summary/summary.scss |  34 -
 ui/src/components/LegacyCms/index.tsx         |   9 -
 ui/src/components/LegacyCms/legacyCms.scss    | 118 +---
 ui/src/components/LogScreen/index.scss        |  60 +-
 ui/src/components/LogScreen/index.tsx         | 136 ++--
 ui/src/components/MainHeader/index.scss       |  11 -
 ui/src/components/MainHeader/index.tsx        | 110 ++--
 .../MainHeader/mainheader.interface.ts        |   3 -
 .../MigrationExecution.scss                   |   8 -
 .../components/MigrationExecution/index.scss  |   9 -
 .../components/MigrationExecution/index.tsx   |   8 -
 ui/src/components/MigrationFlow/index.scss    |   7 -
 ui/src/components/MigrationFlow/index.tsx     |  11 -
 .../MigrationFlow/migrationFlow.interface.ts  |  22 -
 .../components/MigrationFlowHeader/index.scss |   7 -
 .../components/MigrationFlowHeader/index.tsx  |   9 -
 .../Migrations/NewMigration/ActionTitle.tsx   |   8 -
 .../NewMigration/NewMigrationWrapper.scss     |   5 -
 .../NewMigration/NewMigrationWrapper.tsx      |   4 -
 ui/src/components/Modal/index.tsx             |   8 -
 ui/src/components/Modal/modal.interface.ts    |  43 --
 ui/src/components/ProfileHeader/index.scss    |  38 +-
 ui/src/components/ProfileHeader/index.tsx     |  15 +-
 ui/src/components/ProjectsHeader/index.tsx    |  20 +-
 .../projectsHeader.interface.ts               |  35 --
 ui/src/components/SchemaModal/index.scss      |   7 -
 ui/src/components/SchemaModal/index.tsx       |  38 +-
 .../SchemaModal/schemaModal.interface.ts      |  19 -
 ui/src/components/SideBar/index.scss          |   6 -
 ui/src/components/SideBar/index.tsx           |   6 -
 .../Stepper/FlowStepper/FlowBlock.tsx         |  12 -
 .../Stepper/FlowStepper/FlowBlockItem.tsx     |  10 -
 .../Stepper/FlowStepper/FlowStepper.scss      |  11 -
 .../Stepper/FlowStepper/FlowStepper.tsx       |  14 -
 .../Stepper/FlowStepper/StepIcon.tsx          |  17 -
 .../Stepper/FlowStepper/StepTitle.tsx         |  28 -
 .../Stepper/FlowStepper/flowStep.interface.ts |  47 --
 .../HorizontalStepper/HorizontalStepper.scss  |  36 +-
 .../HorizontalStepper/HorizontalStepper.tsx   |  78 ---
 .../VerticalStepper/AutoVerticalStepper.scss  |  75 +--
 .../VerticalStepper/AutoVerticalStepper.tsx   |  52 +-
 ui/src/components/TestMigration/index.scss    |   7 -
 ui/src/components/TestMigration/index.tsx     |   5 -
 .../TestMigration/testMigration.interface.ts  |  13 -
 ui/src/components/layout/AppLayout/index.tsx  |   6 -
 ui/src/context/app/app.interface.ts           | 590 ------------------
 ui/src/context/app/app.provider.tsx           |   9 -
 ui/src/hooks/index.ts                         |   6 -
 ui/src/pages/Errors/error.interface.ts        |   3 -
 ui/src/pages/Errors/index.tsx                 |  10 -
 ui/src/pages/Home/home.interface.ts           |  21 -
 ui/src/pages/Home/index.tsx                   |   6 -
 ui/src/pages/Login/index.tsx                  |   9 -
 ui/src/pages/Login/login.interface.ts         |  69 --
 ui/src/pages/Migration/index.tsx              |   7 -
 ui/src/pages/MigrationEditor/index.scss       |  18 -
 ui/src/pages/MigrationEditor/index.tsx        |   3 -
 ui/src/pages/Projects/index.scss              |   6 -
 ui/src/pages/Projects/index.tsx               |   5 -
 ui/src/pages/Projects/projects.interface.ts   |  38 --
 ui/src/pages/RegionalLogin/index.scss         |  53 --
 ui/src/pages/RegionalLogin/index.tsx          |  11 -
 .../RegionalLogin/regionalLogin.interface.ts  |  17 -
 ui/src/services/api/login.service.ts          |  10 -
 ui/src/services/api/migration.service.ts      | 121 ----
 ui/src/services/api/project.service.ts        |  36 --
 ui/src/services/api/service.interface.ts      |  18 -
 ui/src/services/api/service.ts                |  33 -
 ui/src/services/api/stacks.service.ts         |  24 -
 ui/src/services/api/upload.service.ts         |  34 -
 ui/src/services/api/user.service.ts           |   9 -
 ui/src/store/index.tsx                        |  17 -
 ui/src/store/middleware/authMiddleware.tsx    |   5 -
 ui/src/store/slice/authSlice.tsx              | 117 ++--
 ui/src/store/slice/migrationDataSlice.tsx     |  34 +-
 ui/src/types/common.interface.ts              |  35 --
 ui/src/utilities/functions.ts                 | 114 ----
 .../migration-sitecore/libs/configuration.js  |  14 +-
 .../migration-sitecore/libs/contenttypes.js   |  25 -
 uplaode-api/src/config/index.ts               |   4 +-
 uplaode-api/src/controllers/sitecore/index.ts |  18 +-
 188 files changed, 520 insertions(+), 4614 deletions(-)

diff --git a/api/src/config/dev.config.ts b/api/src/config/dev.config.ts
index cdd2363d..86cf8191 100644
--- a/api/src/config/dev.config.ts
+++ b/api/src/config/dev.config.ts
@@ -10,6 +10,4 @@ export const devConfig = {
     AZURE_NA: "https://azure-na-app.contentstack.com/#!",
     AZURE_EU: "https://azure-eu-app.contentstack.com/#!",
   },
-  LOG_FILE_PATH:
-    process.platform === "win32" ? ".\\combine.log" : "./combine.log", // Replace with the actual path to your log file
 };
diff --git a/api/src/config/index.ts b/api/src/config/index.ts
index f714b380..4f152360 100644
--- a/api/src/config/index.ts
+++ b/api/src/config/index.ts
@@ -7,9 +7,6 @@ dotenv.config({
   path: path.resolve(process.cwd(), `${process.env.NODE_ENV}.env`),
 });
 
-/**
- * Configuration type for the application.
- */
 export type ConfigType = {
   APP_TOKEN_EXP: string;
   APP_TOKEN_KEY: string;
@@ -17,7 +14,6 @@ export type ConfigType = {
   PORT: string;
   APP_ENV: string;
   MONGODB_URI: string;
-  LOG_FILE_PATH: string;
   CS_API: {
     NA: string;
     EU: string;
@@ -32,35 +28,12 @@ export type ConfigType = {
   };
 };
 
-/**
- * Loads the configuration from environment variables and returns the configuration object.
- * @returns The configuration object.
- */
 export const config: ConfigType = {
-  /**
-   * Expiration time for the application token.
-   */
   APP_TOKEN_EXP: "1d",
-  /**
-   * Key used to sign the application token.
-   */
-  APP_TOKEN_KEY: process.env.APP_TOKEN_KEY!,
-  /**
-   * Key used for file uploads.
-   */
-  FILE_UPLOAD_KEY: process.env.FILE_UPLOAD_KEY!,
-  /**
-   * Port on which the server will listen.
-   */
   PORT: process.env.PORT!,
-  /**
-   * Environment in which the application is running.
-   */
   APP_ENV: process.env.NODE_ENV!,
-  /**
-   * MongoDB connection URI.
-   */
+  APP_TOKEN_KEY: process.env.APP_TOKEN_KEY!,
+  FILE_UPLOAD_KEY: process.env.FILE_UPLOAD_KEY!,
   MONGODB_URI: process.env.MONGODB_URI!,
-
   ...(process.env.NODE_ENV === "production" ? prodConfig : devConfig),
 };
diff --git a/api/src/config/prod.config.ts b/api/src/config/prod.config.ts
index 7a49fdbd..2a124479 100644
--- a/api/src/config/prod.config.ts
+++ b/api/src/config/prod.config.ts
@@ -11,6 +11,4 @@ export const prodConfig = {
     AZURE_NA: "https://azure-na-app.contentstack.com/#!",
     AZURE_EU: "https://azure-eu-app.contentstack.com/#!",
   },
-  LOG_FILE_PATH:
-    process.platform === "win32" ? ".\\combine.log" : "./combine.log", // Replace with the actual path to your log file
 };
diff --git a/api/src/controllers/auth.controller.ts b/api/src/controllers/auth.controller.ts
index 8c72d70c..55e092e1 100644
--- a/api/src/controllers/auth.controller.ts
+++ b/api/src/controllers/auth.controller.ts
@@ -1,23 +1,11 @@
 import { Request, Response } from "express";
 import { authService } from "../services/auth.service.js";
 
-/**
- * Handles the login request.
- *
- * @param req The request object.
- * @param res The response object.
- */
 const login = async (req: Request, res: Response) => {
   const resp = await authService.login(req);
   res.status(resp?.status).json(resp?.data);
 };
 
-/**
- * Handles the request for sending an SMS.
- *
- * @param req The request object.
- * @param res The response object.
- */
 const RequestSms = async (req: Request, res: Response) => {
   const resp = await authService.requestSms(req);
   res.status(resp.status).json(resp.data);
diff --git a/api/src/controllers/migration.controller.ts b/api/src/controllers/migration.controller.ts
index d779bf44..9816c5fe 100644
--- a/api/src/controllers/migration.controller.ts
+++ b/api/src/controllers/migration.controller.ts
@@ -1,23 +1,11 @@
 import { Request, Response } from "express";
 import { migrationService } from "../services/migration.service.js";
 
-/**
- * Creates a test stack.
- * @param {Request} req - The request object.
- * @param {Response} res - The response object.
- * @returns {Promise<void>} - A promise that resolves when the operation is complete.
- */
 const createTestStack = async (req: Request, res: Response): Promise<void> => {
   const resp = await migrationService.createTestStack(req);
   res.status(200).json(resp);
 };
 
-/**
- * Deletes a test stack.
- * @param {Request} req - The request object.
- * @param {Response} res - The response object.
- * @returns {Promise<void>} - A promise that resolves when the operation is complete.
- */
 const deleteTestStack = async (req: Request, res: Response): Promise<void> => {
   const resp = await migrationService.deleteTestStack(req);
   res.status(200).json(resp);
diff --git a/api/src/controllers/org.controller.ts b/api/src/controllers/org.controller.ts
index c07b3773..a826ab48 100644
--- a/api/src/controllers/org.controller.ts
+++ b/api/src/controllers/org.controller.ts
@@ -1,41 +1,21 @@
 import { Request, Response } from "express";
 import { orgService } from "../services/org.service.js";
 
-/**
- * Get all stacks
- * @param req - Express request object
- * @param res - Express response object
- */
 const getAllStacks = async (req: Request, res: Response) => {
   const resp = await orgService.getAllStacks(req);
   res.status(resp?.status).json(resp?.data);
 };
 
-/**
- * Create a new stack
- * @param req - Express request object
- * @param res - Express response object
- */
 const createStack = async (req: Request, res: Response) => {
   const resp = await orgService.createStack(req);
   res.status(resp.status).json(resp.data);
 };
 
-/**
- * Get all locales
- * @param req - Express request object
- * @param res - Express response object
- */
 const getLocales = async (req: Request, res: Response) => {
   const resp = await orgService.getLocales(req);
   res.status(resp.status).json(resp.data);
 };
 
-/**
- * Get stack status
- * @param req - Express request object
- * @param res - Express response object
- */
 const getStackStatus = async (req: Request, res: Response) => {
   const resp = await orgService.getStackStatus(req);
   res.status(resp.status).json(resp.data);
diff --git a/api/src/controllers/projects.contentMapper.controller.ts b/api/src/controllers/projects.contentMapper.controller.ts
index 9ed85f85..6a22299c 100644
--- a/api/src/controllers/projects.contentMapper.controller.ts
+++ b/api/src/controllers/projects.contentMapper.controller.ts
@@ -1,45 +1,18 @@
 import { Request, Response } from "express";
 import { contentMapperService } from "../services/contentMapper.service.js";
-
-/**
- * Puts test data.
- * @param req - The request object.
- * @param res - The response object.
- * @returns Promise<void>
- */
 const putTestData = async (req: Request, res: Response): Promise<void> => {
   const resp = await contentMapperService.putTestData(req);
   res.status(200).json(resp);
 };
 
-/**
- * Gets content types.
- * @param req - The request object.
- * @param res - The response object.
- * @returns Promise<void>
- */
 const getContentTypes = async (req: Request, res: Response): Promise<void> => {
   const resp = await contentMapperService.getContentTypes(req);
   res.status(200).json(resp);
 };
-
-/**
- * Gets field mapping.
- * @param req - The request object.
- * @param res - The response object.
- * @returns Promise<void>
- */
 const getFieldMapping = async (req: Request, res: Response): Promise<void> => {
   const resp = await contentMapperService.getFieldMapping(req);
   res.status(200).json(resp);
 };
-
-/**
- * Gets existing content types.
- * @param req - The request object.
- * @param res - The response object.
- * @returns Promise<void>
- */
 const getExistingContentTypes = async (
   req: Request,
   res: Response
@@ -47,13 +20,6 @@ const getExistingContentTypes = async (
   const resp = await contentMapperService.getExistingContentTypes(req);
   res.status(201).json(resp);
 };
-
-/**
- * Puts content type fields.
- * @param req - The request object.
- * @param res - The response object.
- * @returns Promise<void>
- */
 const putContentTypeFields = async (
   req: Request,
   res: Response
@@ -61,38 +27,21 @@ const putContentTypeFields = async (
   const resp = await contentMapperService.updateContentType(req);
   res.status(200).json(resp);
 };
-
-/**
- * Resets content type.
- * @param req - The request object.
- * @param res - The response object.
- * @returns Promise<void>
- */
 const resetContentType = async (req: Request, res: Response): Promise<void> => {
   const resp = await contentMapperService.resetToInitialMapping(req);
   res.status(200).json(resp);
 };
+// TODO Will remove if not required
+// const removeMapping = async (req: Request, res: Response): Promise<void> => {
+//   const resp = await contentMapperService.removeMapping(req);
+//   res.status(200).json(resp);
+// };
 
-/**
- * Removes content mapper.
- * @param req - The request object.
- * @param res - The response object.
- * @returns Promise<void>
- */
-const removeContentMapper = async (
-  req: Request,
-  res: Response
-): Promise<void> => {
+const removeContentMapper = async (req: Request, res: Response): Promise<void> => {
   const resp = await contentMapperService.removeContentMapper(req);
   res.status(200).json(resp);
-};
+}
 
-/**
- * Gets single content types.
- * @param req - The request object.
- * @param res - The response object.
- * @returns Promise<void>
- */
 const getSingleContentTypes = async (
   req: Request,
   res: Response
@@ -101,17 +50,6 @@ const getSingleContentTypes = async (
   res.status(201).json(resp);
 };
 
-/**
- * Removes mapping.
- * @param req - The request object.
- * @param res - The response object.
- * @returns Promise<void>
- */
-// const removeMapping = async (req: Request, res: Response): Promise<void> => {
-//   const resp = await contentMapperService.removeMapping(req);
-//   res.status(200).json(resp);
-// };
-
 export const contentMapperController = {
   getContentTypes,
   getFieldMapping,
@@ -121,5 +59,5 @@ export const contentMapperController = {
   resetContentType,
   // removeMapping,
   getSingleContentTypes,
-  removeContentMapper,
+  removeContentMapper
 };
diff --git a/api/src/controllers/projects.controller.ts b/api/src/controllers/projects.controller.ts
index 684ae5a3..dbe1abb9 100644
--- a/api/src/controllers/projects.controller.ts
+++ b/api/src/controllers/projects.controller.ts
@@ -1,157 +1,64 @@
 import { Request, Response } from "express";
 import { projectService } from "../services/projects.service.js";
 
-/**
- * Retrieves all projects.
- *
- * @param req - The request object.
- * @param res - The response object.
- * @returns A promise that resolves to void.
- */
 const getAllProjects = async (req: Request, res: Response): Promise<void> => {
   const allProjects = await projectService.getAllProjects(req);
   res.status(200).json(allProjects);
 };
 
-/**
- * Retrieves a project.
- *
- * @param req - The request object.
- * @param res - The response object.
- * @returns A promise that resolves to void.
- */
 const getProject = async (req: Request, res: Response): Promise<void> => {
   const project = await projectService.getProject(req);
   res.status(200).json(project);
 };
 
-/**
- * Creates a project.
- *
- * @param req - The request object.
- * @param res - The response object.
- * @returns A promise that resolves to void.
- */
 const createProject = async (req: Request, res: Response): Promise<void> => {
   const project = await projectService.createProject(req);
   res.status(201).json(project);
 };
 
-/**
- * Updates a project.
- *
- * @param req - The request object.
- * @param res - The response object.
- * @returns A promise that resolves to void.
- */
 const updateProject = async (req: Request, res: Response): Promise<void> => {
   const project = await projectService.updateProject(req);
   res.status(200).json(project);
 };
-
-/**
- * Updates a legacy CMS.
- *
- * @param req - The request object.
- * @param res - The response object.
- * @returns A promise that resolves to void.
- */
 const updateLegacyCMS = async (req: Request, res: Response) => {
   const resp = await projectService.updateLegacyCMS(req);
   res.status(resp.status).json(resp.data);
 };
 
-/**
- * Updates an affix.
- *
- * @param req - The request object.
- * @param res - The response object.
- * @returns A promise that resolves to void.
- */
 const updateAffix = async (req: Request, res: Response) => {
   const resp = await projectService.updateAffix(req);
   res.status(resp.status).json(resp.data);
 };
 
-/**
- * Affix confirmation.
- *
- * @param req - The request object.
- * @param res - The response object.
- * @returns A promise that resolves to void.
- */
 const affixConfirmation = async (req: Request, res: Response) => {
   const resp = await projectService.affixConfirmation(req);
   res.status(resp.status).json(resp.data);
 };
 
-/**
- * Updates a file format.
- *
- * @param req - The request object.
- * @param res - The response object.
- * @returns A promise that resolves to void.
- */
 const updateFileFormat = async (req: Request, res: Response) => {
   const resp = await projectService.updateFileFormat(req);
   res.status(resp.status).json(resp.data);
 };
 
-/**
- * File format confirmation.
- *
- * @param req - The request object.
- * @param res - The response object.
- * @returns A promise that resolves to void.
- */
 const fileformatConfirmation = async (req: Request, res: Response) => {
   const resp = await projectService.fileformatConfirmation(req);
   res.status(resp.status).json(resp.data);
 };
 
-/**
- * Updates a destination stack.
- *
- * @param req - The request object.
- * @param res - The response object.
- * @returns A promise that resolves to void.
- */
 const updateDestinationStack = async (req: Request, res: Response) => {
   const resp = await projectService.updateDestinationStack(req);
   res.status(resp.status).json(resp.data);
 };
-
-/**
- * Updates the current step of a project.
- *
- * @param req - The request object.
- * @param res - The response object.
- * @returns A promise that resolves to void.
- */
 const updateCurrentStep = async (req: Request, res: Response) => {
   const project = await projectService.updateCurrentStep(req);
   res.status(200).json(project);
 };
 
-/**
- * Deletes a project.
- *
- * @param req - The request object.
- * @param res - The response object.
- * @returns A promise that resolves to void.
- */
 const deleteProject = async (req: Request, res: Response): Promise<void> => {
   const project = await projectService.deleteProject(req);
   res.status(200).json(project);
 };
 
-/**
- * Reverts a project.
- *
- * @param req - The request object.
- * @param res - The response object.
- * @returns A promise that resolves to void.
- */
 const revertProject = async (req: Request, res: Response): Promise<void> => {
   const project = await projectService.revertProject(req);
   res.status(project.status).json(project);
diff --git a/api/src/controllers/user.controller.ts b/api/src/controllers/user.controller.ts
index 9c3f1d65..d7493637 100644
--- a/api/src/controllers/user.controller.ts
+++ b/api/src/controllers/user.controller.ts
@@ -1,12 +1,6 @@
 import { Request, Response } from "express";
 import { userService } from "../services/user.service.js";
 
-/**
- * Retrieves the user profile.
- *
- * @param req - The request object.
- * @param res - The response object.
- */
 const getUserProfile = async (req: Request, res: Response) => {
   const resp = await userService.getUserProfile(req);
   res.status(resp?.status).json(resp?.data);
diff --git a/api/src/database.ts b/api/src/database.ts
index 8682aac4..859a3b0e 100644
--- a/api/src/database.ts
+++ b/api/src/database.ts
@@ -2,12 +2,6 @@
 import logger from "./utils/logger.js";
 import fs from "fs";
 
-/**
- * Connects to the database.
- * If the database folder does not exist, it creates it.
- * @returns {Promise<void>} A promise that resolves when the connection is successful.
- * @throws {Error} If there is an error while connecting to the database.
- */
 const connectToDatabase = async () => {
   try {
     //check if the database folder exists
diff --git a/api/src/middlewares/auth.middleware.ts b/api/src/middlewares/auth.middleware.ts
index 94cc63d5..17987a3e 100644
--- a/api/src/middlewares/auth.middleware.ts
+++ b/api/src/middlewares/auth.middleware.ts
@@ -4,12 +4,6 @@ import jwt from "jsonwebtoken";
 import { config } from "../config/index.js";
 import { HTTP_CODES } from "../constants/index.js";
 
-/**
- * Authenticates the user.
- * @param req - Express request object.
- * @param res - Express response object.
- * @param next - Express next function.
- */
 export const authenticateUser = (
   req: Request,
   res: Response,
diff --git a/api/src/middlewares/auth.uploadService.middleware.ts b/api/src/middlewares/auth.uploadService.middleware.ts
index 8af2c00d..c2345849 100644
--- a/api/src/middlewares/auth.uploadService.middleware.ts
+++ b/api/src/middlewares/auth.uploadService.middleware.ts
@@ -2,12 +2,6 @@ import { Request, Response, NextFunction } from "express";
 import { HTTP_CODES } from "../constants/index.js";
 import { config } from "../config/index.js";
 
-/**
- * Authenticates the upload service.
- * @param req - Express request object.
- * @param res - Express response object.
- * @param next - Express next function.
- */
 export const authenticateUploadService = (
   req: Request,
   res: Response,
diff --git a/api/src/middlewares/error.middleware.ts b/api/src/middlewares/error.middleware.ts
index 5cf7b23e..19915289 100644
--- a/api/src/middlewares/error.middleware.ts
+++ b/api/src/middlewares/error.middleware.ts
@@ -2,13 +2,6 @@ import { Request, Response, NextFunction } from "express";
 import { AppError } from "../utils/custom-errors.utils.js";
 import logger from "../utils/logger.js";
 
-/**
- * Error middleware
- * @param err - Error object
- * @param req - Express request object
- * @param res - Express response object
- * @param next - Express next function
- */
 export const errorMiddleware = (
   err: Error,
   req: Request,
diff --git a/api/src/middlewares/logger.middleware.ts b/api/src/middlewares/logger.middleware.ts
index a7a34af1..0ccecbf7 100644
--- a/api/src/middlewares/logger.middleware.ts
+++ b/api/src/middlewares/logger.middleware.ts
@@ -1,9 +1,7 @@
 import expressWinston from "express-winston";
 import logger from "../utils/logger.js";
 
-/**
- * Logger middleware to log all incoming requests.
- */
+//Logger Middleware to log every request
 const loggerMiddleware = expressWinston.logger({
   level: "info",
   colorize: true,
diff --git a/api/src/middlewares/req-headers.middleware.ts b/api/src/middlewares/req-headers.middleware.ts
index aa1f425e..6a71f52b 100644
--- a/api/src/middlewares/req-headers.middleware.ts
+++ b/api/src/middlewares/req-headers.middleware.ts
@@ -1,12 +1,5 @@
 import { Request, Response, NextFunction } from "express";
 
-/**
- * Middleware to set the request headers.
- *
- * @param req The request object.
- * @param res The response object.
- * @param next The next function.
- */
 export const requestHeadersMiddleware = (
   req: Request,
   res: Response,
diff --git a/api/src/middlewares/unmatched-routes.middleware.ts b/api/src/middlewares/unmatched-routes.middleware.ts
index 79a67de3..02cd8530 100644
--- a/api/src/middlewares/unmatched-routes.middleware.ts
+++ b/api/src/middlewares/unmatched-routes.middleware.ts
@@ -1,12 +1,6 @@
 import { Request, Response } from "express";
 import { HTTP_CODES, HTTP_TEXTS } from "../constants/index.js";
 
-/**
- * Handles the unmatched routes.
- *
- * @param req The request object.
- * @param res The response object.
- */
 export const unmatchedRoutesMiddleware = (req: Request, res: Response) => {
   const status = HTTP_CODES.NOT_FOUND;
   res.status(status).json({
diff --git a/api/src/models/FieldMapper.ts b/api/src/models/FieldMapper.ts
index e31820ac..f37f6bff 100644
--- a/api/src/models/FieldMapper.ts
+++ b/api/src/models/FieldMapper.ts
@@ -1,9 +1,6 @@
 import { JSONFile } from "lowdb/node";
 import LowWithLodash from "../utils/lowdb-lodash.utils.js";
 
-/**
- * Represents the advanced configuration options for a field mapper.
- */
 interface Advanced {
   validationRegex: string;
   Mandatory: boolean;
@@ -12,9 +9,6 @@ interface Advanced {
   NonLocalizable: boolean;
 }
 
-/**
- * Represents a field mapper object.
- */
 interface FieldMapper {
   field_mapper: {
     id: string;
@@ -33,9 +27,6 @@ interface FieldMapper {
 
 const defaultData: FieldMapper = { field_mapper: [] };
 
-/**
- * Represents the database instance for the field mapper.
- */
 const db = new LowWithLodash(
   new JSONFile<FieldMapper>("database/field-mapper.json"),
   defaultData
diff --git a/api/src/models/authentication.ts b/api/src/models/authentication.ts
index ac038831..57bfd6f4 100644
--- a/api/src/models/authentication.ts
+++ b/api/src/models/authentication.ts
@@ -1,11 +1,6 @@
 // src/models/Authentication.ts
-
 import { JSONFile } from "lowdb/node";
 import LowWithLodash from "../utils/lowdb-lodash.utils.js";
-
-/**
- * Represents the structure of the authentication document.
- */
 interface AuthenticationDocument {
   users: {
     user_id: string;
@@ -16,14 +11,8 @@ interface AuthenticationDocument {
   }[];
 }
 
-/**
- * Represents the default data for the authentication document.
- */
 const defaultData: AuthenticationDocument = { users: [] };
 
-/**
- * Represents the database instance for the authentication document.
- */
 const db = new LowWithLodash(
   new JSONFile<AuthenticationDocument>("database/authentication.json"),
   defaultData
diff --git a/api/src/models/contentTypesMapper-lowdb.ts b/api/src/models/contentTypesMapper-lowdb.ts
index ee56688e..77c3897a 100644
--- a/api/src/models/contentTypesMapper-lowdb.ts
+++ b/api/src/models/contentTypesMapper-lowdb.ts
@@ -1,9 +1,6 @@
 import { JSONFile } from "lowdb/node";
 import LowWithLodash from "../utils/lowdb-lodash.utils.js";
 
-/**
- * Represents a content type mapper.
- */
 export interface ContentTypesMapper {
   id: string;
   otherCmsTitle: string;
@@ -22,21 +19,12 @@ export interface ContentTypesMapper {
 //   contentTypes: [contentTypes];
 // }
 
-/**
- * Represents a content type mapper document.
- */
 interface ContentTypeMapperDocument {
   ContentTypesMappers: ContentTypesMapper[];
 }
 
-/**
- * Default data for the ContentTypeMapperDocument.
- */
 const defaultData: ContentTypeMapperDocument = { ContentTypesMappers: [] };
 
-/**
- * Represents the database instance for the content types mapper.
- */
 const db = new LowWithLodash(
   new JSONFile<ContentTypeMapperDocument>("database/contentTypesMapper.json"),
   defaultData
diff --git a/api/src/models/project-lowdb.ts b/api/src/models/project-lowdb.ts
index a6b8b5ea..233e7f5d 100644
--- a/api/src/models/project-lowdb.ts
+++ b/api/src/models/project-lowdb.ts
@@ -1,9 +1,6 @@
 import { JSONFile } from "lowdb/node";
 import LowWithLodash from "../utils/lowdb-lodash.utils.js";
 
-/**
- * Represents the LegacyCMS object.
- */
 interface LegacyCMS {
   cms: string;
   affix: string;
@@ -27,17 +24,11 @@ interface LegacyCMS {
   is_localPath: boolean;
 }
 
-/**
- * Represents an ExecutionLog object.
- */
 interface ExecutionLog {
   log_url: string;
   date: Date;
 }
 
-/**
- * Represents a Project object.
- */
 interface Project {
   id: string;
   region: string;
@@ -61,21 +52,12 @@ interface Project {
   isDeleted: boolean;
 }
 
-/**
- * Represents a Project Document.
- */
 interface ProjectDocument {
   projects: Project[];
 }
 
-/**
- * Represents the default data for the project document.
- */
 const defaultData: ProjectDocument = { projects: [] };
 
-/**
- * Represents the database instance for the project document.
- */
 const db = new LowWithLodash(
   new JSONFile<ProjectDocument>("database/project.json"),
   defaultData
diff --git a/api/src/models/types.ts b/api/src/models/types.ts
index 6febaaf9..ed5d6d69 100644
--- a/api/src/models/types.ts
+++ b/api/src/models/types.ts
@@ -1,33 +1,21 @@
-/**
- * Represents a user.
- */
 export interface User {
-  email: string; // The email of the user.
-  password: string; // The password of the user.
+  email: string;
+  password: string;
 }
 
-/**
- * Represents the payload of an app token.
- */
 export interface AppTokenPayload {
-  region: string; // The region of the app token.
-  user_id: string; // The user ID associated with the app token.
+  region: string;
+  user_id: string;
 }
 
-/**
- * Represents the response from a login service.
- */
 export interface LoginServiceType {
-  data: any; // The data returned by the login service.
-  status: number; // The status code of the response.
+  data: any;
+  status: number;
 }
 
-/**
- * Represents a migration query.
- */
 export interface MigrationQueryType {
-  id: string; // The ID of the migration query.
-  org_id: string; // The organization ID associated with the migration query.
-  region: string; // The region of the migration query.
-  owner: string; // The owner of the migration query.
+  id: string;
+  org_id: string;
+  region: string;
+  owner: string;
 }
diff --git a/api/src/routes/auth.routes.ts b/api/src/routes/auth.routes.ts
index 9b080a42..29608bca 100644
--- a/api/src/routes/auth.routes.ts
+++ b/api/src/routes/auth.routes.ts
@@ -3,12 +3,9 @@ import { authController } from "../controllers/auth.controller.js";
 import { asyncRouter } from "../utils/async-router.utils.js";
 import validator from "../validators/index.js";
 
-/**
- * Express router for handling authentication routes.
- */
 const router = express.Router();
 
-// User session route
+// Login route
 router.post(
   "/user-session",
   validator("auth"),
diff --git a/api/src/routes/contentMapper.routes.ts b/api/src/routes/contentMapper.routes.ts
index b3c98f8a..a92401e6 100644
--- a/api/src/routes/contentMapper.routes.ts
+++ b/api/src/routes/contentMapper.routes.ts
@@ -15,37 +15,32 @@ router.get(
   "/contentTypes/:projectId/:skip/:limit/:searchText?",
   asyncRouter(contentMapperController.getContentTypes)
 );
-
 //Get FieldMapping List
 router.get(
   "/fieldMapping/:contentTypeId/:skip/:limit/:searchText?",
   asyncRouter(contentMapperController.getFieldMapping)
 );
-
 //Get Existing ContentTypes List
+
 router.get(
   "/:projectId",
   asyncRouter(contentMapperController.getExistingContentTypes)
 );
-
 //Update FieldMapping or contentType
 router.put(
   "/contentTypes/:orgId/:projectId/:contentTypeId",
   asyncRouter(contentMapperController.putContentTypeFields)
 );
-
 //Reset FieldMapping or contentType
 router.put(
   "/resetFields/:orgId/:projectId/:contentTypeId",
   asyncRouter(contentMapperController.resetContentType)
 );
-
 //get Single contenttype data
 router.get(
   "/:projectId/:contentTypeUid",
   asyncRouter(contentMapperController.getSingleContentTypes)
 );
-
 //remove content mapper
 router.get(
   "/:orgId/:projectId/content-mapper",
diff --git a/api/src/routes/migration.routes.ts b/api/src/routes/migration.routes.ts
index 1288b4e9..3239ff98 100644
--- a/api/src/routes/migration.routes.ts
+++ b/api/src/routes/migration.routes.ts
@@ -3,34 +3,14 @@ import express from "express";
 import { asyncRouter } from "../utils/async-router.utils.js";
 import { migrationController } from "../controllers/migration.controller.js";
 
-/**
- * Express router for handling migration routes.
- */
 const router = express.Router({ mergeParams: true });
-
-/**
- * Route for creating a new test stack.
- * @route POST /test-stack/:orgId/:projectId
- * @group Migration
- * @param {string} orgId - The ID of the organization.
- * @param {string} projectId - The ID of the project.
- * @returns {Promise<void>} - A promise that resolves when the test stack is created.
- */
+// Create a new project route
 router.post(
   "/test-stack/:orgId/:projectId",
   asyncRouter(migrationController.createTestStack)
 );
-
-/**
- * Route for deleting a test stack.
- * @route POST /test-stack/:projectId
- * @group Migration
- * @param {string} projectId - The ID of the project.
- * @returns {Promise<void>} - A promise that resolves when the test stack is deleted.
- */
 router.post(
   "/test-stack/:projectId",
   asyncRouter(migrationController.deleteTestStack)
 );
-
 export default router;
diff --git a/api/src/routes/org.routes.ts b/api/src/routes/org.routes.ts
index 340240a8..2e8a3c57 100644
--- a/api/src/routes/org.routes.ts
+++ b/api/src/routes/org.routes.ts
@@ -5,39 +5,20 @@ import validator from "../validators/index.js";
 
 const router = express.Router({ mergeParams: true });
 
-/**
- * GET all org stacks route
- * @route GET /stacks/:searchText?
- * @param {string} searchText - Optional search text
- * @returns {Promise<void>}
- */
+// GET all org stacks route
 router.get("/stacks/:searchText?", asyncRouter(orgController.getAllStacks));
 
-/**
- * Create a new stack route
- * @route POST /stacks
- * @param {object} project - The project data
- * @returns {Promise<void>}
- */
+// Create a new stack route
 router.post(
   "/stacks",
   validator("project"),
   asyncRouter(orgController.createStack)
 );
 
-/**
- * GET all contentstack locales route
- * @route GET /locales
- * @returns {Promise<void>}
- */
+// GET all contentstack locales route
 router.get("/locales", asyncRouter(orgController.getLocales));
 
-/**
- * GET Content_types count
- * @route POST /stack_status
- * @param {object} destination_stack - The destination stack data
- * @returns {Promise<void>}
- */
+// GET Content_types count
 router.post(
   "/stack_status",
   validator("destination_stack"),
diff --git a/api/src/routes/projects.routes.ts b/api/src/routes/projects.routes.ts
index 2846d496..5c7a5409 100644
--- a/api/src/routes/projects.routes.ts
+++ b/api/src/routes/projects.routes.ts
@@ -5,120 +5,70 @@ import validator from "../validators/index.js";
 
 const router = express.Router({ mergeParams: true });
 
-/**
- * GET all projects route
- * @route GET /projects
- */
+// GET all projects route
 router.get("/", asyncRouter(projectController.getAllProjects));
 
-/**
- * GET a single project route
- * @route GET /projects/:projectId
- * @param {string} projectId - The ID of the project
- */
+// GET a single project route
 router.get("/:projectId", asyncRouter(projectController.getProject));
 
-/**
- * Create a new project route
- * @route POST /projects
- */
+// Create a new project route
 router.post("/", asyncRouter(projectController.createProject));
 
-/**
- * Update a project route
- * @route PUT /projects/:projectId
- * @param {string} projectId - The ID of the project
- */
+// Update a project route
 router.put("/:projectId", asyncRouter(projectController.updateProject));
 
-/**
- * Update project's legacy-cms
- * @route PUT /projects/:projectId/legacy-cms
- * @param {string} projectId - The ID of the project
- */
+// Update project's legacy-cms
 router.put(
   "/:projectId/legacy-cms",
   validator("cms"),
   asyncRouter(projectController.updateLegacyCMS)
 );
 
-/**
- * Update project's Affix
- * @route PUT /projects/:projectId/affix
- * @param {string} projectId - The ID of the project
- */
+// Update project's Affix
 router.put(
   "/:projectId/affix",
   validator("affix"),
   asyncRouter(projectController.updateAffix)
 );
 
-/**
- * Update project's Affix confirmation
- * @route PUT /projects/:projectId/affix_confirmation
- * @param {string} projectId - The ID of the project
- */
+// Update project's Affix confirmation
 router.put(
   "/:projectId/affix_confirmation",
   validator("affix_confirmation_validator"),
   asyncRouter(projectController.affixConfirmation)
 );
 
-/**
- * Update project's file format
- * @route PUT /projects/:projectId/file-format
- * @param {string} projectId - The ID of the project
- */
+// Update project's file format
 router.put(
   "/:projectId/file-format",
   validator("file_format"),
   asyncRouter(projectController.updateFileFormat)
 );
 
-/**
- * Update project's fileformat confirmation
- * @route PUT /projects/:projectId/fileformat_confirmation
- * @param {string} projectId - The ID of the project
- */
+// Update project's fileformat confirmation
 router.put(
   "/:projectId/fileformat_confirmation",
   validator("fileformat_confirmation_validator"),
   asyncRouter(projectController.fileformatConfirmation)
 );
 
-/**
- * Update project's destination-cms
- * @route PUT /projects/:projectId/destination-stack
- * @param {string} projectId - The ID of the project
- */
+// Update project's destination-cms
 router.put(
   "/:projectId/destination-stack",
   validator("destination_stack"),
   asyncRouter(projectController.updateDestinationStack)
 );
 
-/**
- * Update project's current step
- * @route PUT /projects/:projectId/current-step
- * @param {string} projectId - The ID of the project
- */
+// Update project's current step
 router.put(
   "/:projectId/current-step",
   asyncRouter(projectController.updateCurrentStep)
 );
 
-/**
- * Delete a project route
- * @route DELETE /projects/:projectId
- * @param {string} projectId - The ID of the project
- */
+// Delete a project route
 router.delete("/:projectId", asyncRouter(projectController.deleteProject));
 
-/**
- * Revert Project Route
- * @route PATCH /projects/:projectId
- * @param {string} projectId - The ID of the project
- */
+//revert Project Route
 router.patch("/:projectId", asyncRouter(projectController.revertProject));
 
 export default router;
diff --git a/api/src/routes/user.routes.ts b/api/src/routes/user.routes.ts
index bc1659c6..6e4e0bd4 100644
--- a/api/src/routes/user.routes.ts
+++ b/api/src/routes/user.routes.ts
@@ -4,12 +4,7 @@ import { asyncRouter } from "../utils/async-router.utils.js";
 
 const router = express.Router();
 
-/**
- * Route for getting user profile.
- * @route GET /profile
- * @group User
- * @returns {Promise<void>} - A promise that resolves when the user profile is retrieved.
- */
+// Profile route
 router.get("/profile", asyncRouter(userController.getUserProfile));
 
 export default router;
diff --git a/api/src/server.ts b/api/src/server.ts
index fbaf4cb6..678121af 100644
--- a/api/src/server.ts
+++ b/api/src/server.ts
@@ -20,7 +20,6 @@ import chokidar from "chokidar";
 import { Server } from "socket.io";
 import http from "http";
 import fs from "fs";
-
 try {
   const app = express();
   app.use(
@@ -56,17 +55,9 @@ try {
       logger.info(`Server listening at port ${config.PORT}`)
     );
     // Chokidar - Watch for log file changes
-    const logFilePath = config.LOG_FILE_PATH;
+    const logFilePath = "/Users/sayali.joshi/Projects/migration-v2-node-server/api/combine.log"; // Replace with the actual path to your log file
     const watcher = chokidar.watch(logFilePath);
     // Socket.IO - Send logs to client
-    /**
-     * The Socket.IO server instance.
-     *
-     * @remarks
-     * This server instance is responsible for handling real-time communication between the client and the server using the Socket.IO library.
-     *
-     * @type {Server}
-     */
     const io = new Server(
       server,
       (http,
diff --git a/api/src/services/auth.service.ts b/api/src/services/auth.service.ts
index c46900d0..5e911d18 100644
--- a/api/src/services/auth.service.ts
+++ b/api/src/services/auth.service.ts
@@ -13,26 +13,12 @@ import {
 import AuthenticationModel from "../models/authentication.js";
 import logger from "../utils/logger.js";
 
-/**
- * Logs in a user with the provided credentials.
- *
- * @param req - The request object containing user data.
- * @returns A promise that resolves to the login service response.
- * @throws ExceptionFunction if an error occurs during the login process.
- */
 const login = async (req: Request): Promise<LoginServiceType> => {
   const srcFun = "Login";
 
   try {
     const userData = req?.body;
 
-    /**
-     * Authenticates the user by making a POST request to the user-session endpoint.
-     * Includes the user's organizations and roles in the response.
-     *
-     * @param userData - The user data object containing email, password, and optional tfa_token.
-     * @returns A Promise that resolves to an array containing an error object and the response object.
-     */
     const [err, res] = await safePromise(
       https({
         method: "POST",
@@ -129,13 +115,6 @@ const login = async (req: Request): Promise<LoginServiceType> => {
   }
 };
 
-/**
- * Requests an SMS token for the user.
- *
- * @param req - The request object containing user data.
- * @returns A promise that resolves to the login service response.
- * @throws InternalServerError if an error occurs during the requestSms process.
- */
 const requestSms = async (req: Request): Promise<LoginServiceType> => {
   const srcFun = "requestSms";
 
diff --git a/api/src/services/contentMapper.service.ts b/api/src/services/contentMapper.service.ts
index e5731e9c..bd2151a0 100644
--- a/api/src/services/contentMapper.service.ts
+++ b/api/src/services/contentMapper.service.ts
@@ -23,15 +23,10 @@ import { v4 as uuidv4 } from "uuid";
 import ContentTypesMapperModelLowdb from "../models/contentTypesMapper-lowdb.js";
 import { ContentTypesMapper } from "../models/contentTypesMapper-lowdb.js";
 
-/**
- * Updates the test data for a given project.
- *
- * @param req - The request object containing the project ID and content types.
- * @returns The updated project data.
- */
+// Developer service to create dummy contentmapping data
 const putTestData = async (req: Request) => {
   const projectId = req.params.projectId;
-  const contentTypes = req.body.contentTypes;
+  const contentTypes = req.body.contentTypes; 
 
   await FieldMapperModel.read();
   contentTypes.map((type: any, index: any) => {
@@ -50,7 +45,7 @@ const putTestData = async (req: Request) => {
   await ContentTypesMapperModelLowdb.read();
   const contentIds: string[] = [];
   const contentType = contentTypes.map((item: any) => {
-    const id = item?.id || uuidv4();
+    const id = item?.id  || uuidv4();
     contentIds.push(id);
     return { ...item, id };
   });
@@ -77,12 +72,6 @@ const putTestData = async (req: Request) => {
   return pData;
 };
 
-/**
- * Retrieves the content types for a given project.
- *
- * @param req - The request object containing the project ID.
- * @returns The content types for the project.
- */
 const getContentTypes = async (req: Request) => {
   const sourceFn = "getContentTypes";
   const projectId = req?.params?.projectId;
@@ -145,12 +134,6 @@ const getContentTypes = async (req: Request) => {
   return { count: totalCount, contentTypes: result };
 };
 
-/**
- * Retrieves the field mapping for a given content type.
- *
- * @param req - The request object containing the content type ID.
- * @returns The field mapping for the content type.
- */
 const getFieldMapping = async (req: Request) => {
   const srcFunc = "getFieldMapping";
   const contentTypeId = req?.params?.contentTypeId;
@@ -204,12 +187,6 @@ const getFieldMapping = async (req: Request) => {
   return { count: totalCount, fieldMapping: result };
 };
 
-/**
- * Retrieves the existing content types for a given project.
- *
- * @param req - The request object containing the project ID.
- * @returns The existing content types for the project.
- */
 const getExistingContentTypes = async (req: Request) => {
   const projectId = req?.params?.projectId;
 
@@ -255,13 +232,6 @@ const getExistingContentTypes = async (req: Request) => {
   //Add logic to get Project from DB
   return { contentTypes };
 };
-
-/**
- * Updates the content type for a given project.
- *
- * @param req - The request object containing the project ID and content type data.
- * @returns The updated content type data.
- */
 const updateContentType = async (req: Request) => {
   const srcFun = "udateContentType";
   const { orgId, projectId, contentTypeId } = req.params;
@@ -414,13 +384,6 @@ const updateContentType = async (req: Request) => {
     );
   }
 };
-
-/**
- * Resets the field mapping to the initial mapping for a given content type.
- *
- * @param req - The request object containing the project ID, content type ID, and user token.
- * @returns The message indicating the reset of the field mapping.
- */
 const resetToInitialMapping = async (req: Request) => {
   const srcFunc = "resetToInitialMapping";
   const { orgId, projectId, contentTypeId } = req.params;
@@ -529,13 +492,6 @@ const resetToInitialMapping = async (req: Request) => {
     );
   }
 };
-
-/**
- * Resets all the content types mapping for a given project.
- *
- * @param projectId - The project ID.
- * @returns The project details.
- */
 const resetAllContentTypesMapping = async (projectId: string) => {
   const srcFunc = "resetAllContentTypesMapping";
 
@@ -576,7 +532,7 @@ const resetAllContentTypesMapping = async (projectId: string) => {
   try {
     const contentTypes = cData;
     for (const contentType of contentTypes) {
-      if (contentType && !isEmpty(contentType.fieldMapping)) {
+      if (contentType &&  !isEmpty(contentType.fieldMapping)) {
         for (const field of contentType.fieldMapping) {
           await FieldMapperModel.read();
           const fieldData = FieldMapperModel.chain
@@ -613,8 +569,10 @@ const resetAllContentTypesMapping = async (projectId: string) => {
           });
         }
       }
+
     }
 
+
     return projectDetails;
   } catch (error: any) {
     logger.error(
@@ -631,13 +589,6 @@ const resetAllContentTypesMapping = async (projectId: string) => {
     );
   }
 };
-
-/**
- * Removes the content mapping for a given project.
- *
- * @param projectId - The project ID.
- * @returns The project details.
- */
 const removeMapping = async (projectId: string) => {
   const srcFunc = "removeMapping";
   await ProjectModelLowdb.read();
@@ -724,13 +675,6 @@ const removeMapping = async (projectId: string) => {
     );
   }
 };
-
-/**
- * Retrieves the content type for a given project.
- *
- * @param req - The request object containing the project ID and content type UID.
- * @returns The content type data.
- */
 const getSingleContentTypes = async (req: Request) => {
   const projectId = req?.params?.projectId;
   const contentTypeUID = req?.params?.contentTypeUid;
@@ -772,13 +716,6 @@ const getSingleContentTypes = async (req: Request) => {
     schema: res?.data?.content_type?.schema,
   };
 };
-
-/**
- * Removes the content mapping for a given project.
- *
- * @param req - The request object containing the project ID.
- * @returns The project details.
- */
 const removeContentMapper = async (req: Request) => {
   const projectId = req?.params?.projectId;
   const srcFunc = "removeMapping";
@@ -798,16 +735,13 @@ const removeContentMapper = async (req: Request) => {
     throw new BadRequestError(HTTP_TEXTS.PROJECT_NOT_FOUND);
   }
   await ContentTypesMapperModelLowdb.read();
-  const cData: ContentTypesMapper[] = projectDetails?.content_mapper.map(
-    (cId: string) => {
-      const contentTypeData: ContentTypesMapper =
-        ContentTypesMapperModelLowdb.chain
-          .get("ContentTypesMappers")
-          .find({ id: cId })
-          .value();
-      return contentTypeData;
-    }
-  );
+  const cData: ContentTypesMapper[] = projectDetails?.content_mapper.map((cId: string) => {
+    const contentTypeData: ContentTypesMapper = ContentTypesMapperModelLowdb.chain
+      .get("ContentTypesMappers")
+      .find({ id: cId })
+      .value();
+    return contentTypeData;
+  });
 
   try {
     const contentTypes: ContentTypesMapper[] = cData;
diff --git a/api/src/services/migration.service.ts b/api/src/services/migration.service.ts
index bbccaa12..9c74fbf2 100644
--- a/api/src/services/migration.service.ts
+++ b/api/src/services/migration.service.ts
@@ -9,13 +9,6 @@ import { HTTP_TEXTS, HTTP_CODES } from "../constants/index.js";
 import { ExceptionFunction } from "../utils/custom-errors.utils.js";
 import ProjectModelLowdb from "../models/project-lowdb.js";
 
-/**
- * Creates a new test stack.
- *
- * @param req - The request object containing the project data.
- * @returns A promise that resolves to the login service response.
- * @throws ExceptionFunction if an error occurs during the stack creation process.
- */
 const createTestStack = async (req: Request): Promise<LoginServiceType> => {
   const srcFun = "createTestStack";
   const orgId = req?.params?.orgId;
@@ -106,13 +99,6 @@ const createTestStack = async (req: Request): Promise<LoginServiceType> => {
   }
 };
 
-/**
- * Deletes a test stack.
- *
- * @param req - The request object containing the project data.
- * @returns A promise that resolves to the login service response.
- * @throws ExceptionFunction if an error occurs during the stack deletion process.
- */
 const deleteTestStack = async (req: Request): Promise<LoginServiceType> => {
   const srcFun = "deleteTestStack";
   const projectId = req?.params?.projectId;
diff --git a/api/src/services/org.service.ts b/api/src/services/org.service.ts
index d4329438..90324fb3 100644
--- a/api/src/services/org.service.ts
+++ b/api/src/services/org.service.ts
@@ -9,13 +9,6 @@ import { HTTP_TEXTS, HTTP_CODES } from "../constants/index.js";
 import { ExceptionFunction } from "../utils/custom-errors.utils.js";
 import { BadRequestError } from "../utils/custom-errors.utils.js";
 
-/**
- * Gets all stacks of an organization.
- *
- * @param req - The request object containing the organization ID.
- * @returns A promise that resolves to the login service response.
- * @throws ExceptionFunction if an error occurs during the stack retrieval process.
- */
 const getAllStacks = async (req: Request): Promise<LoginServiceType> => {
   const srcFun = "getAllStacks";
   const orgId = req?.params?.orgId;
@@ -89,13 +82,6 @@ const getAllStacks = async (req: Request): Promise<LoginServiceType> => {
   }
 };
 
-/**
- * Creates a new stack.
- *
- * @param req - The request object containing the organization ID, stack name, description, and master locale.
- * @returns A promise that resolves to the login service response.
- * @throws ExceptionFunction if an error occurs during the stack creation process.
- */
 const createStack = async (req: Request): Promise<LoginServiceType> => {
   const srcFun = "createStack";
   const orgId = req?.params?.orgId;
@@ -164,13 +150,6 @@ const createStack = async (req: Request): Promise<LoginServiceType> => {
   }
 };
 
-/**
- * Gets all locales.
- *
- * @param req - The request object containing the organization ID.
- * @returns A promise that resolves to the login service response.
- * @throws ExceptionFunction if an error occurs during the locale retrieval process.
- */
 const getLocales = async (req: Request): Promise<LoginServiceType> => {
   const srcFun = "getLocales";
   const { token_payload } = req.body;
@@ -225,13 +204,6 @@ const getLocales = async (req: Request): Promise<LoginServiceType> => {
   }
 };
 
-/**
- * Gets the status of a stack.
- *
- * @param req - The request object containing the organization ID and stack API key.
- * @returns A promise that resolves to the login service response.
- * @throws ExceptionFunction if an error occurs during the stack status retrieval process.
- */
 const getStackStatus = async (req: Request) => {
   const { orgId } = req.params;
   const { token_payload, stack_api_key } = req.body;
@@ -313,23 +285,16 @@ const getStackStatus = async (req: Request) => {
     );
   }
 };
-
-/**
- * Gets the locales of a stack.
- *
- * @param token_payload - The token payload containing the region and user ID.
- * @param data - The stack data.
- * @returns A promise that resolves to the stack locales.
- */
+//get all locals of particular stack
 const getStackLocal = async (token_payload: any, data: any) => {
   const srcFun = "getStackLocal";
-  return new Promise(async (resolve) => {
+  return new Promise(async (resolve, reject) => {
     const authtoken = await getAuthtoken(
       token_payload?.region,
       token_payload?.user_id
     );
-    const stacks = [];
-    for (const stack of data) {
+    let stacks = [];
+    for (let stack of data) {
       const [err, res] = await safePromise(
         https({
           method: "GET",
@@ -357,7 +322,7 @@ const getStackLocal = async (token_payload: any, data: any) => {
           status: err.response.status,
         };
       }
-      const localesArr: any = [];
+      let localesArr: any = [];
       res?.data?.locales.map((lang: any) => {
         return localesArr.push({
           code: lang.code,
@@ -365,7 +330,7 @@ const getStackLocal = async (token_payload: any, data: any) => {
         });
       });
 
-      const obj = {
+      let obj = {
         name: stack.name,
         api_key: stack.api_key,
         master_locale: stack.master_locale,
diff --git a/api/src/services/projects.service.ts b/api/src/services/projects.service.ts
index 37a81d03..f6cb13bb 100644
--- a/api/src/services/projects.service.ts
+++ b/api/src/services/projects.service.ts
@@ -20,22 +20,15 @@ import getAuthtoken from "../utils/auth.utils.js";
 import https from "../utils/https.utils.js";
 import getProjectUtil from "../utils/get-project.utils.js";
 import logger from "../utils/logger.js";
-// import { contentMapperService } from "./contentMapper.service.js";
+import { contentMapperService } from "./contentMapper.service.js";
 import { v4 as uuidv4 } from "uuid";
 
-/**
- * Retrieves all projects based on the provided request object.
- *
- * @param req - The request object containing the orgId and token_payload.
- * @returns A Promise that resolves to an array of projects.
- * @throws {NotFoundError} If no projects are found.
- */
 const getAllProjects = async (req: Request) => {
   const orgId = req?.params?.orgId;
 
   const decodedToken = req.body.token_payload;
-  const { user_id = "", region = "" } = decodedToken;
-
+  const { user_id = "", region = "" } = decodedToken; 
+   
   await ProjectModelLowdb.read();
   const projects = ProjectModelLowdb.chain
     .get("projects")
@@ -52,11 +45,6 @@ const getAllProjects = async (req: Request) => {
   return projects;
 };
 
-/**
- * Retrieves a project based on the provided request.
- * @param req - The request object containing the orgId, projectId, and token_payload.
- * @returns A Promise that resolves to the retrieved project.
- */
 const getProject = async (req: Request) => {
   const orgId = req?.params?.orgId;
   const projectId = req?.params?.projectId;
@@ -77,12 +65,6 @@ const getProject = async (req: Request) => {
   return project;
 };
 
-/**
- * Creates a new project.
- * @param req - The request object containing the project details.
- * @returns An object with the status, message, and project details.
- * @throws ExceptionFunction if there is an error creating the project.
- */
 const createProject = async (req: Request) => {
   const orgId = req?.params?.orgId;
   const { name, description } = req.body;
@@ -161,12 +143,6 @@ const createProject = async (req: Request) => {
   }
 };
 
-/**
- * Updates an existing project.
- * @param req - The request object containing the orgId, projectId, and updateData.
- * @returns An object with the status, message, and updated project details.
- * @throws ExceptionFunction if there is an error updating the project.
- */
 const updateProject = async (req: Request) => {
   const orgId = req?.params?.orgId;
   const projectId = req?.params?.projectId;
@@ -235,12 +211,6 @@ const updateProject = async (req: Request) => {
   }
 };
 
-/**
- * Updates the legacy CMS details for a project.
- * @param req - The request object containing the orgId, projectId, and legacy_cms.
- * @returns An object with the status and message.
- * @throws ExceptionFunction if there is an error updating the legacy CMS.
- */
 const updateLegacyCMS = async (req: Request) => {
   const { orgId, projectId } = req.params;
   const { token_payload, legacy_cms } = req.body;
@@ -319,12 +289,6 @@ const updateLegacyCMS = async (req: Request) => {
   }
 };
 
-/**
- * Updates the affix for a project.
- * @param req - The request object containing the orgId, projectId, and affix.
- * @returns An object with the status and message.
- * @throws ExceptionFunction if there is an error updating the affix.
- */
 const updateAffix = async (req: Request) => {
   const srcFunc = "updateAffix";
   const { orgId, projectId } = req.params;
@@ -356,12 +320,6 @@ const updateAffix = async (req: Request) => {
   };
 };
 
-/**
- * Updates the affix confirmation for a project.
- * @param req - The request object containing the orgId, projectId, and affix_confirmation.
- * @returns An object with the status and message.
- * @throws ExceptionFunction if there is an error updating the affix confirmation.
- */
 const affixConfirmation = async (req: Request) => {
   const srcFunc = "affixConfirmation";
   const { orgId, projectId } = req.params;
@@ -394,22 +352,9 @@ const affixConfirmation = async (req: Request) => {
   };
 };
 
-/**
- * Updates the file format for a project.
- * @param req - The request object containing the orgId, projectId, and file_format.
- * @returns An object with the status and message.
- * @throws ExceptionFunction if there is an error updating the file format.
- */
 const updateFileFormat = async (req: Request) => {
   const { orgId, projectId } = req.params;
-  const {
-    token_payload,
-    file_format,
-    file_path,
-    is_localPath,
-    is_fileValid,
-    awsDetails,
-  } = req.body;
+  const { token_payload, file_format,file_path,is_localPath,is_fileValid,awsDetails } = req.body;
   const srcFunc = "updateFileFormat";
   const projectIndex = (await getProjectUtil(
     projectId,
@@ -496,12 +441,6 @@ const updateFileFormat = async (req: Request) => {
   }
 };
 
-/**
- * Updates the file format confirmation for a project.
- * @param req - The request object containing the orgId, projectId, and fileformat_confirmation.
- * @returns An object with the status and message.
- * @throws ExceptionFunction if there is an error updating the file format confirmation.
- */
 const fileformatConfirmation = async (req: Request) => {
   const srcFunc = "fileformat";
   const { orgId, projectId } = req.params;
@@ -534,12 +473,6 @@ const fileformatConfirmation = async (req: Request) => {
   };
 };
 
-/**
- * Updates the destination stack for a project.
- * @param req - The request object containing the orgId, projectId, and stack_api_key.
- * @returns An object with the status and message.
- * @throws ExceptionFunction if there is an error updating the destination stack.
- */
 const updateDestinationStack = async (req: Request) => {
   const { orgId, projectId } = req.params;
   const { token_payload, stack_api_key } = req.body;
@@ -651,12 +584,6 @@ const updateDestinationStack = async (req: Request) => {
   }
 };
 
-/**
- * Updates the current step for a project.
- * @param req - The request object containing the orgId and projectId.
- * @returns The updated project.
- * @throws ExceptionFunction if there is an error updating the current step.
- */
 const updateCurrentStep = async (req: Request) => {
   const { orgId, projectId } = req.params;
   const token_payload = req.body.token_payload;
@@ -752,12 +679,6 @@ const updateCurrentStep = async (req: Request) => {
   }
 };
 
-/**
- * Deletes a project.
- * @param req - The request object containing the orgId and projectId.
- * @returns An object with the status and message.
- * @throws ExceptionFunction if there is an error deleting the project.
- */
 const deleteProject = async (req: Request) => {
   const { orgId, projectId } = req.params;
   const decodedToken = req.body.token_payload;
@@ -843,12 +764,6 @@ const deleteProject = async (req: Request) => {
   };
 };
 
-/**
- * Reverts a project.
- * @param req - The request object containing the orgId and projectId.
- * @returns An object with the status, message, and project details.
- * @throws NotFoundError if the project is not found.
- */
 const revertProject = async (req: Request) => {
   const { orgId, projectId } = req.params;
   const decodedToken = req.body.token_payload;
@@ -891,7 +806,6 @@ const revertProject = async (req: Request) => {
     };
   }
 };
-
 export const projectService = {
   getAllProjects,
   getProject,
diff --git a/api/src/services/user.service.ts b/api/src/services/user.service.ts
index 9c9a0467..3d4d511a 100644
--- a/api/src/services/user.service.ts
+++ b/api/src/services/user.service.ts
@@ -11,13 +11,6 @@ import AuthenticationModel from "../models/authentication.js";
 import { safePromise, getLogMessage } from "../utils/index.js";
 import logger from "../utils/logger.js";
 
-/**
- * Retrieves the user profile based on the provided request.
- * @param req - The request object containing the token payload.
- * @returns A promise that resolves to the user profile.
- * @throws {BadRequestError} If the user is not found.
- * @throws {ExceptionFunction} If an error occurs while retrieving the user profile.
- */
 const getUserProfile = async (req: Request): Promise<LoginServiceType> => {
   const srcFun = "getUserProfile";
   const appTokenPayload: AppTokenPayload = req?.body?.token_payload;
diff --git a/api/src/utils/async-router.utils.ts b/api/src/utils/async-router.utils.ts
index 921a4593..3ebb4233 100644
--- a/api/src/utils/async-router.utils.ts
+++ b/api/src/utils/async-router.utils.ts
@@ -1,11 +1,5 @@
 import { Request, Response, NextFunction } from "express";
 
-/**
- * Wraps an asynchronous route handler function with error handling middleware.
- *
- * @param fn - The asynchronous route handler function.
- * @returns A middleware function that handles asynchronous errors.
- */
 export const asyncRouter =
   (fn: any) => (req: Request, res: Response, next: NextFunction) => {
     Promise.resolve(fn(req, res, next)).catch(next);
diff --git a/api/src/utils/auth.utils.ts b/api/src/utils/auth.utils.ts
index 30df2075..6ac51514 100644
--- a/api/src/utils/auth.utils.ts
+++ b/api/src/utils/auth.utils.ts
@@ -1,13 +1,6 @@
 import AuthenticationModel from "../models/authentication.js";
 import { UnauthorizedError } from "../utils/custom-errors.utils.js";
 
-/**
- * Retrieves the authentication token for a given user in a specific region.
- * @param region - The region of the user.
- * @param userId - The ID of the user.
- * @returns The authentication token for the user.
- * @throws UnauthorizedError if the user is not found or the authentication token is missing.
- */
 export default async (region: string, userId: string) => {
   await AuthenticationModel.read();
   const userIndex = AuthenticationModel.chain
diff --git a/api/src/utils/custom-errors.utils.ts b/api/src/utils/custom-errors.utils.ts
index b66b8610..4b33d15f 100644
--- a/api/src/utils/custom-errors.utils.ts
+++ b/api/src/utils/custom-errors.utils.ts
@@ -1,9 +1,5 @@
 import { HTTP_CODES, HTTP_TEXTS } from "../constants/index.js";
 
-/**
- * Represents an application error.
- * Extends the base AppError class.
- */
 export class AppError extends Error {
   constructor(public statusCode: number, message: string) {
     super(message);
@@ -11,80 +7,48 @@ export class AppError extends Error {
   }
 }
 
-/**
- * Represents a custom error for a resource not found.
- * Extends the base AppError class.
- */
 export class NotFoundError extends AppError {
   constructor(message: string = "Not Found") {
     super(HTTP_CODES.NOT_FOUND, message);
   }
 }
 
-/**
- * Represents a custom error for a bad request.
- * Extends the base AppError class.
- */
 export class BadRequestError extends AppError {
   constructor(message: string = "Bad Request") {
     super(HTTP_CODES.BAD_REQUEST, message);
   }
 }
 
-/**
- * Represents a custom error for a database error.
- * Extends the base AppError class.
- */
 export class DatabaseError extends AppError {
   constructor(message: string = "DB error") {
     super(HTTP_CODES.SERVER_ERROR, message);
   }
 }
 
-/**
- * Represents a custom error for a validation error.
- * Extends the base AppError class.
- */
 export class ValidationError extends AppError {
   constructor(message: string = "User validation error") {
     super(HTTP_CODES.UNPROCESSABLE_CONTENT, message);
   }
 }
 
-/**
- * Represents a custom error for an internal server error.
- * Extends the base AppError class
- */
 export class InternalServerError extends AppError {
   constructor(message: string = HTTP_TEXTS.INTERNAL_ERROR) {
     super(HTTP_CODES.SERVER_ERROR, message);
   }
 }
 
-/**
- * Represents a custom error for an unauthorized request.
- * Extends the base AppError class
- */
 export class UnauthorizedError extends AppError {
   constructor(message: string = HTTP_TEXTS.UNAUTHORIZED) {
     super(HTTP_CODES.UNAUTHORIZED, message);
   }
 }
 
-/**
- * Represents a custom error for an S3 error.
- * Extends the base AppError class
- */
 export class S3Error extends AppError {
   constructor(message: string = HTTP_TEXTS.S3_ERROR) {
     super(HTTP_CODES.SERVER_ERROR, message);
   }
 }
 
-/**
- * Represents a custom error for a function exception.
- * Extends the base AppError class
- */
 export class ExceptionFunction extends AppError {
   constructor(message: string, httpStatus: number) {
     super(httpStatus, message);
diff --git a/api/src/utils/get-project.utils.ts b/api/src/utils/get-project.utils.ts
index 543b720f..350cfd98 100644
--- a/api/src/utils/get-project.utils.ts
+++ b/api/src/utils/get-project.utils.ts
@@ -10,16 +10,6 @@ import { getLogMessage } from "../utils/index.js";
 import logger from "./logger.js";
 import { validate } from "uuid";
 
-/**
- * Retrieves a project based on the provided projectId and query.
- * @param projectId - The ID of the project to retrieve.
- * @param query - The query to filter the projects.
- * @param srcFunc - The source function name (optional).
- * @param isIndex - Indicates whether to search by index (optional).
- * @returns The project that matches the provided projectId and query.
- * @throws BadRequestError if the projectId is invalid or the project is not found.
- * @throws ExceptionFunction if an error occurs during the retrieval process.
- */
 export default async (
   projectId: string,
   query: MigrationQueryType,
diff --git a/api/src/utils/https.utils.ts b/api/src/utils/https.utils.ts
index 1f12a552..0ab6a892 100644
--- a/api/src/utils/https.utils.ts
+++ b/api/src/utils/https.utils.ts
@@ -11,13 +11,6 @@ type httpType = {
   data?: any;
   timeout?: number;
 };
-
-/**
- * Sends an HTTP request using Axios.
- *
- * @param obj - The HTTP request object.
- * @returns An object containing the response headers, status, and data.
- */
 export default async (obj: httpType) => {
   const { url, method, headers, data, timeout } = obj;
   const res = await axios(url, {
diff --git a/api/src/utils/index.ts b/api/src/utils/index.ts
index 9f5bee73..40823eac 100644
--- a/api/src/utils/index.ts
+++ b/api/src/utils/index.ts
@@ -1,40 +1,17 @@
-/**
- * Throws an error with a custom message and status code.
- * @param message - The error message.
- * @param statusCode - The HTTP status code associated with the error.
- * @throws {Error} - The error object with the specified message and status code.
- */
 export const throwError = (message: string, statusCode: number) => {
   throw Object.assign(new Error(message), { statusCode });
 };
 
-/**
- * Checks if a value is empty.
- * @param val - The value to check.
- * @returns True if the value is empty, false otherwise.
- */
 export const isEmpty = (val: unknown) =>
   val === undefined ||
   val === null ||
   (typeof val === "object" && !Object.keys(val).length) ||
   (typeof val === "string" && !val.trim().length);
 
-/**
- * Wraps a promise with error handling.
- * @param promise - The promise to wrap.
- * @returns A new promise that resolves with an array containing the error (if any) and the result of the original promise.
- */
 export const safePromise = (promise: Promise<any>): Promise<any> =>
   promise.then((res) => [null, res]).catch((err) => [err]);
 
-/**
- * Creates a log message object.
- * @param methodName - The name of the method.
- * @param message - The log message.
- * @param user - The user object (optional).
- * @param error - The error object (optional).
- * @returns The log message object.
- */
+//Generic method to get log message object
 export const getLogMessage = (
   methodName: string,
   message: string,
diff --git a/api/src/utils/jwt.utils.ts b/api/src/utils/jwt.utils.ts
index 82e364bc..d6f59aa7 100644
--- a/api/src/utils/jwt.utils.ts
+++ b/api/src/utils/jwt.utils.ts
@@ -4,12 +4,6 @@ import { AppTokenPayload } from "../models/types.js";
 import { config } from "../config/index.js";
 
 // @typescript-eslint/no-explicit-any
-/**
- * Generates a JWT token with the provided payload.
- *
- * @param payload - The payload to be included in the token.
- * @returns The generated JWT token.
- */
 export const generateToken = (payload: AppTokenPayload): string => {
   return jwt.sign(payload, config.APP_TOKEN_KEY, {
     expiresIn: config.APP_TOKEN_EXP,
diff --git a/api/src/utils/logger.ts b/api/src/utils/logger.ts
index c903692c..cbde4f7b 100644
--- a/api/src/utils/logger.ts
+++ b/api/src/utils/logger.ts
@@ -1,9 +1,6 @@
 import { createLogger, format, transports } from "winston";
 
-/**
- * The logger instance for logging messages.
- * Logger for custom logs
- */
+//Logger for custom logs
 const logger = createLogger({
   level: "info",
   format: format.combine(format.timestamp(), format.json()),
diff --git a/api/src/utils/lowdb-lodash.utils.ts b/api/src/utils/lowdb-lodash.utils.ts
index 81bd511f..b87088a0 100644
--- a/api/src/utils/lowdb-lodash.utils.ts
+++ b/api/src/utils/lowdb-lodash.utils.ts
@@ -1,10 +1,6 @@
 import lodash from "lodash";
 import { Low } from "lowdb";
 
-/**
- * Represents a class that extends the Low class with Lodash functionality.
- * @template T - The type of data stored in the LowWithLodash instance.
- */
 export default class LowWithLodash<T> extends Low<T> {
   chain: lodash.ExpChain<this["data"]> = lodash.chain(this).get("data");
 }
diff --git a/api/src/validators/affix-confirmation.validator.ts b/api/src/validators/affix-confirmation.validator.ts
index aea82e47..5bbea21a 100644
--- a/api/src/validators/affix-confirmation.validator.ts
+++ b/api/src/validators/affix-confirmation.validator.ts
@@ -1,11 +1,6 @@
 import { checkSchema } from "express-validator";
 import { VALIDATION_ERRORS } from "../constants/index.js";
 
-/**
- * Validates the affix_confirmation property in the request body.
- *
- * @returns {Object} The validation schema for affix_confirmation.
- */
 export default checkSchema({
   affix_confirmation: {
     in: "body",
diff --git a/api/src/validators/affix.validator.ts b/api/src/validators/affix.validator.ts
index 1dc70b5c..62cf4af8 100644
--- a/api/src/validators/affix.validator.ts
+++ b/api/src/validators/affix.validator.ts
@@ -1,11 +1,6 @@
 import { checkSchema } from "express-validator";
 import { VALIDATION_ERRORS, AFFIX_REGEX } from "../constants/index.js";
 
-/**
- * Validates the 'affix' property in the request body.
- *
- * @returns {Object} The validation schema for the 'affix' property.
- */
 export default checkSchema({
   affix: {
     in: "body",
diff --git a/api/src/validators/auth.validator.ts b/api/src/validators/auth.validator.ts
index 53c3cf00..8ba097fe 100644
--- a/api/src/validators/auth.validator.ts
+++ b/api/src/validators/auth.validator.ts
@@ -1,11 +1,6 @@
 import { checkSchema } from "express-validator";
 import { VALIDATION_ERRORS, CS_REGIONS } from "../constants/index.js";
 
-/**
- * Validates the authentication request body.
- *
- * @returns {Object} The validation schema for the authentication request body.
- */
 export default checkSchema({
   email: {
     in: "body",
diff --git a/api/src/validators/cms.validator.ts b/api/src/validators/cms.validator.ts
index b0ddc2d9..3b04f062 100644
--- a/api/src/validators/cms.validator.ts
+++ b/api/src/validators/cms.validator.ts
@@ -1,11 +1,6 @@
 import { checkSchema } from "express-validator";
 import { VALIDATION_ERRORS } from "../constants/index.js";
 
-/**
- * Validates the 'legacy_cms' property in the request body.
- *
- * @returns {Object} The validation schema for the 'legacy_cms' property.
- */
 export default checkSchema({
   legacy_cms: {
     in: "body",
diff --git a/api/src/validators/destination-stack.validator.ts b/api/src/validators/destination-stack.validator.ts
index d39dc64c..3c48f193 100644
--- a/api/src/validators/destination-stack.validator.ts
+++ b/api/src/validators/destination-stack.validator.ts
@@ -1,11 +1,6 @@
 import { checkSchema } from "express-validator";
 import { VALIDATION_ERRORS } from "../constants/index.js";
 
-/**
- * Validates the 'stack_api_key' property in the request body.
- *
- * @returns {Object} The validation schema for the 'stack_api_key' property.
- */
 export default checkSchema({
   stack_api_key: {
     in: "body",
diff --git a/api/src/validators/file-format.validator.ts b/api/src/validators/file-format.validator.ts
index 7ff351ef..22aa06b1 100644
--- a/api/src/validators/file-format.validator.ts
+++ b/api/src/validators/file-format.validator.ts
@@ -1,11 +1,6 @@
 import { checkSchema } from "express-validator";
 import { VALIDATION_ERRORS } from "../constants/index.js";
 
-/**
- * Validates the 'file_format' property in the request body.
- *
- * @returns {Object} The validation schema for the 'file_format' property.
- */
 export default checkSchema({
   file_format: {
     in: "body",
diff --git a/api/src/validators/fileformat-confirmation.validator.ts b/api/src/validators/fileformat-confirmation.validator.ts
index 1607f908..19926096 100644
--- a/api/src/validators/fileformat-confirmation.validator.ts
+++ b/api/src/validators/fileformat-confirmation.validator.ts
@@ -1,11 +1,6 @@
 import { checkSchema } from "express-validator";
 import { VALIDATION_ERRORS } from "../constants/index.js";
 
-/**
- * Validates the 'fileformat_confirmation' property in the request body.
- *
- * @returns {Object} The validation schema for the 'fileformat_confirmation' property.
- */
 export default checkSchema({
   fileformat_confirmation: {
     in: "body",
diff --git a/api/src/validators/index.ts b/api/src/validators/index.ts
index fdd4b3f8..269e5893 100644
--- a/api/src/validators/index.ts
+++ b/api/src/validators/index.ts
@@ -10,11 +10,6 @@ import affixValidator from "./affix.validator.js";
 import affixConfirmationValidator from "./affix-confirmation.validator.js";
 import fileformatConfirmationValidator from "./fileformat-confirmation.validator.js";
 
-/**
- * Middleware function that validates the request based on the specified route.
- * @param route - The route to determine the validator to use.
- * @returns The async middleware function.
- */
 export default (route: string = "") =>
   asyncRouter(async (req: Request, res: Response, next: NextFunction) => {
     const appValidators = {
diff --git a/api/src/validators/project.validator.ts b/api/src/validators/project.validator.ts
index 2df47ac1..d3e97973 100644
--- a/api/src/validators/project.validator.ts
+++ b/api/src/validators/project.validator.ts
@@ -1,11 +1,6 @@
 import { checkSchema } from "express-validator";
 import { VALIDATION_ERRORS } from "../constants/index.js";
 
-/**
- * Validates the project data.
- *
- * @returns {Object} The validation schema for the project data.
- */
 export default checkSchema({
   name: {
     in: "body",
diff --git a/ui/src/common/assets/icons.tsx b/ui/src/common/assets/icons.tsx
index e7a7b67e..179668e2 100644
--- a/ui/src/common/assets/icons.tsx
+++ b/ui/src/common/assets/icons.tsx
@@ -1,6 +1,3 @@
-/**
- * This file contains the definition of the SVG icon component.
- */
 export const NO_PROJECTS_SEARCH = (
   <svg
     width="300"
@@ -411,7 +408,6 @@ export const NO_PROJECTS_SEARCH = (
   </svg>
 );
 
-
 export const NO_PROJECTS = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
diff --git a/ui/src/common/assets/index.ts b/ui/src/common/assets/index.ts
index 20ce5eff..838008a0 100644
--- a/ui/src/common/assets/index.ts
+++ b/ui/src/common/assets/index.ts
@@ -1,4 +1 @@
-/**
- * This module exports all the icons from the './icons' module.
- */
 export * from './icons';
diff --git a/ui/src/components/AccountPage/accountPage.interface.ts b/ui/src/components/AccountPage/accountPage.interface.ts
index a9e11bcc..76199129 100644
--- a/ui/src/components/AccountPage/accountPage.interface.ts
+++ b/ui/src/components/AccountPage/accountPage.interface.ts
@@ -1,8 +1,5 @@
 import { LoginType } from '../../pages/Login/login.interface';
 
-/**
- * Represents an account object.
- */
 export interface AccountObj {
   children: React.ReactNode;
   data: LoginType;
diff --git a/ui/src/components/AccountPage/index.scss b/ui/src/components/AccountPage/index.scss
index 3e3f3970..9af38e4f 100644
--- a/ui/src/components/AccountPage/index.scss
+++ b/ui/src/components/AccountPage/index.scss
@@ -1,28 +1,3 @@
-/**
- * Styles for the AccountPage component.
- *
- * This SCSS file contains styles for the AccountPage component, which is a container component
- * that displays the account page of the application. It includes styles for the layout, logo,
- * background image, action section, content section, heading, circles, and copyright text.
- * CSS Classes:
- *  - .AccountPage - The main container for the account page.
- *    - &__logo - The logo section within the account page.
- *    - &__intro - The introduction section within the account page.
- *    - &__action - The action section within the account page.
- *    - &__content - The content section within the account page.
- *    - &__heading - The heading section within the account page.
- *      - &_title - The title within the heading section.
- *      - &_subtitle - The subtitle within the heading section.
- *    - &__circle - The circle elements within the account page.
- *      - &_one - The first circle element.
- *      - &_two - The second circle element.
- *      - &_three - The third circle element.
- *      - &_four - The fourth circle element.
- *      - &_five - The fifth circle element.
- *      - &_six - The sixth circle element.
- *      - &_seven - The seventh circle element.
- *  - .copyright_text - The copyright text.
- */
 @import '../../scss/variables';
 
 .AccountPage {
diff --git a/ui/src/components/AccountPage/index.tsx b/ui/src/components/AccountPage/index.tsx
index fbfd83a0..4b131667 100644
--- a/ui/src/components/AccountPage/index.tsx
+++ b/ui/src/components/AccountPage/index.tsx
@@ -4,13 +4,6 @@ import { AccountObj } from './accountPage.interface';
 // Styles
 import './index.scss';
 
-/**
- * Renders the AccountPage component.
- * 
- * @param {AccountObj} props - The props object containing data for the component.
- * @returns {JSX.Element} The rendered AccountPage component.
- */
-
 const AccountPage = (props: AccountObj): JSX.Element => {
   const { heading, copyrightText } = props.data;
 
diff --git a/ui/src/components/AdvancePropertise/advanceProperties.interface.ts b/ui/src/components/AdvancePropertise/advanceProperties.interface.ts
index dac129eb..6ce7ae7f 100644
--- a/ui/src/components/AdvancePropertise/advanceProperties.interface.ts
+++ b/ui/src/components/AdvancePropertise/advanceProperties.interface.ts
@@ -1,8 +1,5 @@
 import { Advanced, FieldMapType } from '../ContentMapper/contentMapper.interface';
 
-/**
- * Represents the schema properties.
- */
 export interface SchemaProps {
   fieldtype: string;
   value: UpdatedSettings;
@@ -14,9 +11,6 @@ export interface SchemaProps {
   projectId?: string;
 }
 
-/**
- * Represents the updated settings.
- */
 export interface UpdatedSettings {
   MinChars?: string;
   MaxChars?: number;
@@ -33,9 +27,6 @@ export interface UpdatedSettings {
   NonLocalizable?: boolean;
 }
 
-/**
- * Represents the props.
- */
 export interface Props {
   data: SchemaProps;
   states?: StateType;
@@ -43,82 +34,20 @@ export interface Props {
   handleToggle?: (field: string, value: boolean, checkBoxChanged: boolean) => void;
 }
 
-/**
- * Represents the state type for advanced properties.
- */
 export interface StateType {
-  /**
-   * The minimum number of characters allowed.
-   */
   minChars?: string;
-
-  /**
-   * The maximum number of characters allowed.
-   */
   maxChars?: number;
-
-  /**
-   * The minimum range allowed.
-   */
   minRange?: number;
-
-  /**
-   * The maximum range allowed.
-   */
   maxRange?: number;
-
-  /**
-   * The minimum size allowed.
-   */
   minSize?: string;
-
-  /**
-   * The maximum size allowed.
-   */
   maxSize?: number;
-
-  /**
-   * The default value.
-   */
   defaultValue?: string;
-
-  /**
-   * The validation regular expression.
-   */
   validationRegex?: string;
-
-  /**
-   * The title.
-   */
   title?: string;
-
-  /**
-   * The URL.
-   */
   url?: string;
-
-  /**
-   * Indicates if the field is mandatory.
-   */
   mandatory?: boolean;
-
-  /**
-   * Indicates if only images are allowed.
-   */
   allowImagesOnly?: boolean;
-
-  /**
-   * Indicates if the field is non-localizable.
-   */
   nonLocalizable?: boolean;
-
-  /**
-   * Indicates if the object should be embedded.
-   */
   embedObject?: boolean;
-
-  /**
-   * Indicates if the assets should be embedded.
-   */
   embedAssests?: boolean;
 }
\ No newline at end of file
diff --git a/ui/src/components/AdvancePropertise/index.scss b/ui/src/components/AdvancePropertise/index.scss
index 5fa6c7ef..212c06f8 100644
--- a/ui/src/components/AdvancePropertise/index.scss
+++ b/ui/src/components/AdvancePropertise/index.scss
@@ -1,7 +1,3 @@
-/**
- * Styles for the AdvancePropertise component.
- */
-
 @import '../../scss/variables';
 
 .options-class {
@@ -13,46 +9,36 @@
   grid-template-columns: 1fr;
   gap: 20px;
 }
-
 .option-label {
   margin-bottom: $px-10;
 }
-
 .non-localizable-message {
   margin-top: 0;
   margin-left: 30px;
 }
-
 .modal-data {
   padding: 0.75rem;
-
   .radio-field {
     margin-bottom: 0.75rem;
   }
-
   .Radio {
     width: calc(33.33333% - .66667rem);
     padding: .5rem;
     margin: 0 !important;
   }
-
   .FieldLabel {
     margin-bottom: $px-8;
   }
-
   .info-style {
     margin-top: .75rem;
     margin-bottom: 1.5rem;
-
     .Info__border {
       border-left-color: #0469e3;
     }
   }
-
   .options-class {
     line-height: $line-height-reset;
   }
-
   .nl-note {
     color: $color-font-base;
     font-size: $size-font-large;
@@ -60,21 +46,17 @@
     margin-left: 2.75rem;
     margin-top: -.25rem !important;
   }
-
   .ToggleWrap {
     margin-top: 0.5rem;
-    padding: 0 0.5rem;
+    padding: 0 0.5rem
   }
-
   .Field {
     margin-bottom: $px-24;
   }
-
   .fields-group-separator {
     color: $color-base-black-base;
     margin: 0 16px;
   }
-
   .Select {
     .Select__menu {
       .Select__menu-list {
@@ -83,23 +65,20 @@
             align-items: center;
             display: flex;
           }
-
           .Checkbox__label {
             height: auto;
           }
-        }
+        } 
       }
-    }
-  }
-
+    } 
+  } 
   .Select__menu {
     position: relative;
     z-index: 10000;
   }
-
   .Select__control--menu-is-open {
     position: relative;
     border: 2px solid red;
     z-index: 10000;
-  }
+  } 
 }
diff --git a/ui/src/components/AdvancePropertise/index.tsx b/ui/src/components/AdvancePropertise/index.tsx
index 060d9f93..373737a5 100644
--- a/ui/src/components/AdvancePropertise/index.tsx
+++ b/ui/src/components/AdvancePropertise/index.tsx
@@ -22,13 +22,7 @@ import { ContentType } from '../ContentMapper/contentMapper.interface';
 // Styles
 import './index.scss';
 
-/**
- * Component for displaying advanced properties.
- * @param props - The schema properties.
- * @returns The rendered component.
- */
 const AdvancePropertise = (props: SchemaProps) => {
-  // State for toggle states
   const [toggleStates, setToggleStates] = useState({
     minChars: props?.value?.MinChars,
     maxChars: props?.value?.MaxChars,
@@ -47,7 +41,6 @@ const AdvancePropertise = (props: SchemaProps) => {
     embedAssests: true
   });
 
-  // State for content types
   const [contentTypes, setContentTypes] = useState<ContentType[]>([]);
   const [ctValue, setCTValue] = useState(null);
 
@@ -55,22 +48,13 @@ const AdvancePropertise = (props: SchemaProps) => {
     fetchContentTypes('');
   }, [])
 
-  /**
-   * Fetches the content types list.
-   * @param searchText - The search text.
-   */
+  // Fetch content types list
   const fetchContentTypes = async (searchText: string) => {
     const { data } = await getContentTypes(props?.projectId ?? '', 0, 10, searchText || ''); //org id will always present
 
     setContentTypes(data?.contentTypes);
   };
 
-  /**
-   * Handles the change event for input fields.
-   * @param field - The field name.
-   * @param event - The change event.
-   * @param checkBoxChanged - Indicates if the checkbox was changed.
-   */
   const handleOnChange = (field: string, event: React.ChangeEvent<HTMLInputElement>, checkBoxChanged: boolean) => {
     setToggleStates((prevStates) => ({
       ...prevStates,
@@ -92,12 +76,6 @@ const AdvancePropertise = (props: SchemaProps) => {
     );
   };
 
-  /**
-   * Handles the toggle change event.
-   * @param field - The field name.
-   * @param value - The new value.
-   * @param checkBoxChanged - Indicates if the checkbox was changed.
-   */
   const handleToggleChange = (field: string, value: boolean, checkBoxChanged: boolean) => {
     setToggleStates((prevStates) => ({
       ...prevStates,
@@ -119,14 +97,13 @@ const AdvancePropertise = (props: SchemaProps) => {
     );
   };
 
-  // Option for content types
   const option = Array.isArray(contentTypes)
     ? contentTypes.map((option) => ({ label: option?.otherCmsTitle, value: option?.otherCmsTitle }))
     : [{ label: contentTypes, value: contentTypes }];
 
   return (
     <>
-      <ModalHeader title={`${props?.fieldtype} properties`} closeModal={props?.closeModal} className="text-capitalize" />
+      <ModalHeader title={`${props?.fieldtype} propertise`} closeModal={props?.closeModal} className="text-capitalize" />
       <ModalBody>
         <div className='modal-data'>
           {(props?.fieldtype === 'Single Line Textbox' || props?.fieldtype === 'Multi Line Textbox') && (
diff --git a/ui/src/components/Card/card.interface.ts b/ui/src/components/Card/card.interface.ts
index fe72a87b..74c43df1 100644
--- a/ui/src/components/Card/card.interface.ts
+++ b/ui/src/components/Card/card.interface.ts
@@ -1,8 +1,5 @@
 import { ProjectsObj } from '../../pages/Projects/projects.interface';
 
-/**
- * Represents the project type.
- */
 export interface ProjectType {
   project?: ProjectsObj;
 }
diff --git a/ui/src/components/Card/card.scss b/ui/src/components/Card/card.scss
index a186d11a..8a3917ea 100644
--- a/ui/src/components/Card/card.scss
+++ b/ui/src/components/Card/card.scss
@@ -1,7 +1,5 @@
 @import '../../scss/variables';
-/**
- * Styles for the ProjectCard component.
- */
+
 .ProjectCard {
   background: $color-brand-white-base;
   border-radius: 0.6rem;
@@ -9,26 +7,14 @@
   transition: box-shadow 0.3s ease;
   width: 20rem;
 }
-
-/**
- * Styles for the wrapper of the ProjectCard component.
- */
 .ProjectCardWrapper {
   padding: 18px;
 }
-
-/**
- * Styles for the heading of the ProjectCard component.
- */
 .ProjectCard__heading {
   display: flex;
   margin-bottom: $px-20;
   padding: 0;
 }
-
-/**
- * Styles for the title of the ProjectCard component.
- */
 .ProjectCard__title {
   color: $color-font-base;
   display: -webkit-box;
@@ -42,10 +28,6 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
-
-/**
- * Styles for the footer of the ProjectCard component.
- */
 .ProjectCard__footer {
   display: flex;
   position: relative;
@@ -57,26 +39,14 @@
   padding: 0.9375rem 1.875rem;
   align-items: center;
 }
-
-/**
- * Styles for the content of the ProjectCard component.
- */
 .ProjectCard__content {
   // margin: 0 1rem 2rem;
   padding: 0;
   text-align: center;
 }
-
-/**
- * Styles for the status unit of the ProjectCard component.
- */
 .ProjectCard__Staus-unit {
   padding: 0 1em;
 }
-
-/**
- * Styles for the unit of the ProjectCard component.
- */
 .ProjectCard__unit {
   border-left: 1px solid $color-brand-secondary-lightest;
   padding: 0 1em;
@@ -90,10 +60,6 @@
   justify-content: center;
   padding-bottom: $px-10;
 }
-
-/**
- * Styles for the stats category of the ProjectCard component.
- */
 .ProjectCard__stats-category {
   border: 1px solid $color-brand-secondary-lightest;
   border-radius: 8px;
@@ -118,55 +84,15 @@
     background-color: $color-brand-attention-light;
   }
 }
-
-/**
- * Styles for the draft stats category of the ProjectCard component.
- */
-.ProjectCard__stats-category.draft {
-  background-color: $color-base-white-10;
-}
-
-/**
- * Styles for the completed stats category of the ProjectCard component.
- */
-.ProjectCard__stats-category.completed {
-  background-color: $color-brand-success-light;
-}
-
-/**
- * Styles for the failed stats category of the ProjectCard component.
- */
-.ProjectCard__stats-category.failed {
-  background-color: $color-brand-fail-light;
-}
-
-/**
- * Styles for the pending stats category of the ProjectCard component.
- */
-.ProjectCard__stats-category.pending {
-  background-color: $color-brand-attention-light;
-}
-
-/**
- * Styles for the stats title of the ProjectCard component.
- */
 .ProjectCard__stats-Title {
   color: $color-stepper-title;
   display: block;
   font-size: $size-font-small;
   margin-bottom: $space-4;
 }
-
-/**
- * Styles for the validation color of the ProjectCard component.
- */
 .validation-color {
   color: $color-brand-warning-medium;
 }
-
-/**
- * Styles for the CMS of the ProjectCard component.
- */
 .ProjectCard__cms {
   border: 1px solid $color-brand-secondary-lightest;
   border-radius: 8px;
@@ -175,10 +101,6 @@
   padding: 4px 8px;
   text-transform: capitalize;
 }
-
-/**
- * Styles for the modified date of the ProjectCard component.
- */
 .ProjectCard__modified-date {
   color: $color-stepper-title;
   display: block;
diff --git a/ui/src/components/Card/index.tsx b/ui/src/components/Card/index.tsx
index 09e1c623..44bc169f 100644
--- a/ui/src/components/Card/index.tsx
+++ b/ui/src/components/Card/index.tsx
@@ -12,12 +12,6 @@ import { getProject } from '../../services/api/project.service';
 import './card.scss';
 import { RootState } from '../../store';
 
-/**
- * Renders a card component for a project in a list.
- * @param {ProjectType} project - The project object.
- * @returns {JSX.Element} The card component.
- */
-
 const CardList = ({ project }: ProjectType) => {
   const navigate = useNavigate();
 
diff --git a/ui/src/components/Common/AddStack/addStack.interface.ts b/ui/src/components/Common/AddStack/addStack.interface.ts
index 325d385c..da16ddc9 100644
--- a/ui/src/components/Common/AddStack/addStack.interface.ts
+++ b/ui/src/components/Common/AddStack/addStack.interface.ts
@@ -1,51 +1,13 @@
 import { IDropDown } from '../../../context/app/app.interface';
-/**
- * Represents the data structure for adding a stack in CMS.
- */
 export interface AddStackCMSData {
-  /**
-   * The primary call-to-action for the stack.
-   */
   primary_cta: PrimaryCta;
-  
-  /**
-   * The secondary call-to-action for the stack.
-   */
   secondary_cta: SecondaryCta;
-  
-  /**
-   * The description of the stack.
-   */
   stack_description: string;
-  
-  /**
-   * The placeholder text for the stack description input field.
-   */
   stack_description_placeholder: string;
-  
-  /**
-   * The localized description of the stack.
-   */
   stack_locale_description: string;
-  
-  /**
-   * The locales supported by the stack.
-   */
   stack_locales: string;
-  
-  /**
-   * The name of the stack.
-   */
   stack_name: string;
-  
-  /**
-   * The placeholder text for the stack name input field.
-   */
   stack_name_placeholder: string;
-  
-  /**
-   * The title of the stack.
-   */
   title: string;
 }
 
@@ -57,49 +19,19 @@ export interface SecondaryCta {
   title: string;
 }
 
-/**
- * Interface representing the default data for AddStackCMSData.
- */
 export const defaultAddStackCMSData: AddStackCMSData = {
-  /**
-   * The title of the primary call-to-action button.
-   */
   primary_cta: {
     title: ''
   },
-  /**
-   * The title of the secondary call-to-action button.
-   */
   secondary_cta: {
     title: ''
   },
-  /**
-   * The description of the stack.
-   */
   stack_description: '',
-  /**
-   * The placeholder for the stack description.
-   */
   stack_description_placeholder: '',
-  /**
-   * The locale-specific description of the stack.
-   */
   stack_locale_description: '',
-  /**
-   * The locales supported by the stack.
-   */
   stack_locales: '',
-  /**
-   * The name of the stack.
-   */
   stack_name: '',
-  /**
-   * The placeholder for the stack name.
-   */
   stack_name_placeholder: '',
-  /**
-   * The title of the stack.
-   */
   title: ''
 };
 
diff --git a/ui/src/components/Common/AddStack/addStack.scss b/ui/src/components/Common/AddStack/addStack.scss
index a146ab6b..5a6647c8 100644
--- a/ui/src/components/Common/AddStack/addStack.scss
+++ b/ui/src/components/Common/AddStack/addStack.scss
@@ -1,16 +1,3 @@
-/**
- * Styles for the AddStack component.
- * Styles for the ReactModal component used in the AddStack component.
- *
- * .ReactModal__add-stack - Styles for the parent container of the ReactModal component in the AddStack component.
- *   .Description-field > textarea - Styles for the textarea element inside the .Description-field class.
- *     resize: none; - Disables the ability to resize the textarea.
- *   .Select__single-value - Styles for the single-value element inside the .Select class.
- *     width: 200px !important; - Sets the width of the single-value element to 200 pixels, overriding any other styles.
- *
- * .ReactModal__Overlay .ReactModal__Content .ReactModal__Content__body.selectWrapperBody - Styles for the selectWrapperBody element inside the ReactModal component.
- *   overflow: visible; - Sets the overflow property of the selectWrapperBody element to visible.
- */
 .ReactModal__add-stack {
   .Description-field > textarea {
     resize: none;
diff --git a/ui/src/components/Common/AddStack/addStack.tsx b/ui/src/components/Common/AddStack/addStack.tsx
index 7f355f89..a8dc2ef2 100644
--- a/ui/src/components/Common/AddStack/addStack.tsx
+++ b/ui/src/components/Common/AddStack/addStack.tsx
@@ -37,13 +37,6 @@ export interface Stack {
   locale: string;
 }
 
-/**
- * Renders the AddStack component.
- *
- * @param props - The component props.
- * @returns The JSX element representing the AddStack component.
- */
-
 const AddStack = (props: any): JSX.Element => {
   const [isProcessing, setIsProcessing] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
diff --git a/ui/src/components/Common/Card/card.interface.ts b/ui/src/components/Common/Card/card.interface.ts
index db2068ec..c4847848 100644
--- a/ui/src/components/Common/Card/card.interface.ts
+++ b/ui/src/components/Common/Card/card.interface.ts
@@ -1,36 +1,11 @@
-/**
- * Represents the interface for a card type.
- */
 export interface ICardType {
-  /**
-   * The title of the card.
-   */
   title: string;
-
-  /**
-   * The group name of the card.
-   */
   group_name?: string;
-
-  /**
-   * The description of the card.
-   */
   description?: string;
-
-  /**
-   * The CMS ID of the card.
-   */
   cms_id?: string;
-
-  /**
-   * The file format ID of the card.
-   */
   fileformat_id?: string;
 }
 
-/**
- * Represents the default card type.
- */
 export const defaultCardType: ICardType = {
   title: '',
   group_name: '',
diff --git a/ui/src/components/Common/Card/card.scss b/ui/src/components/Common/Card/card.scss
index c69f942d..6d90f282 100644
--- a/ui/src/components/Common/Card/card.scss
+++ b/ui/src/components/Common/Card/card.scss
@@ -1,9 +1,5 @@
 @import '../../../scss/variables';
-/**
- * Styles for the card component.
- */
 
-// Styles for the service list container
 .service_list {
   text-align: center;
   display: flex;
@@ -13,33 +9,21 @@
   margin-bottom: 10px;
 }
 
-// Styles for the trigger list container
 .trigger_list {
   min-width: 120px !important;
 }
 
-// Styles for the connector list container
-.connector_list {
-  // Styles for the tooltip box within the connector list
-  .tippy-box-light {
-    max-width: $px-360 !important;
-    padding: $px-15 !important;
-    line-height: 130%;
-    font-size: $px-12;
-    font-weight: $font-weight-regular;
-  }
-
-  // Styles for the help text within the connector list tooltip box
-  .tippy-box-light #automationConnectorsHelpText {
-    cursor: default;
-    color: $color-base-gray-20;
-  }
+.connector_list .tippy-box-light {
+  max-width: $px-360 !important;
+  padding: $px-15 !important;
+  line-height: 130%;
+  font-size: $px-12;
+  font-weight: $font-weight-regular;
 }
 
-// Styles for the action list and trigger list containers
+.connector_list,
 .action_list,
 .trigger_list {
-  // Styles for the container border
   //border: 1px solid $color-base-gray-40;
   border: 1px solid #6C5CE766;
   border-radius: $px-6;
@@ -51,17 +35,19 @@
   gap: 12px;
 }
 
-// Styles for the connector list container on hover
+.connector_list .tippy-box-light #automationConnectorsHelpText {
+  cursor: default;
+  color: $color-base-gray-20;
+}
+
 .connector_list:hover {
   box-shadow: 0 3px $px-5 $px-2 rgb(215 215 215);
 }
 
-// Styles for the service icon
 .service_icon {
   padding: $space-20 0;
 }
 
-// Styles for the service title
 .service_title {
   padding: $px-5 $px-5;
   min-height: $px-40;
@@ -73,7 +59,6 @@
   background: $color-base-white-10;
 }
 
-// Styles for the full-screen page layout head
 .PageLayout--full-screen .PageLayout__head {
   position: relative;
   border-bottom: 1px solid rgb(226, 235, 248);
@@ -82,8 +67,6 @@
   margin-top: 3.5rem;
   z-index: 8;
 }
-
-// Styles for the centered card title
-.centered-card-title {
+.centered-card-title{
   margin: 10px;
 }
diff --git a/ui/src/components/Common/Card/card.tsx b/ui/src/components/Common/Card/card.tsx
index 8cbd82b5..fc0a9b7e 100644
--- a/ui/src/components/Common/Card/card.tsx
+++ b/ui/src/components/Common/Card/card.tsx
@@ -13,13 +13,7 @@ type CardProps = {
   cardType?: string;
 };
 
-/**
- * Represents a card component.
- *
- * @param {CardProps} props - The props for the card component.
- * @returns {JSX.Element} The rendered card component.
- */
-const Card = ({ data, selectedCard, onCardClick, cardType, idField = 'id' }: CardProps): JSX.Element => {
+const Card = ({ data, selectedCard, onCardClick, cardType, idField = 'id' }: CardProps) => {
   const imgStyle = {
     width: cardType === 'legacyCMS' ? '60px' : '46px',
     height: cardType === 'legacyCMS' ? '60px' : '46px'
diff --git a/ui/src/components/Common/DeleteProjectModal/index.tsx b/ui/src/components/Common/DeleteProjectModal/index.tsx
index b4d63a43..d5abbf78 100644
--- a/ui/src/components/Common/DeleteProjectModal/index.tsx
+++ b/ui/src/components/Common/DeleteProjectModal/index.tsx
@@ -15,13 +15,6 @@ import { deleteProject } from '../../../services/api/project.service';
 // Interfaces
 import { SettingsModalProps } from '../../../components/Modal/modal.interface';
 
-/**
- * Component for the Delete Project Modal.
- *
- * @component
- * @param {SettingsModalProps} props - The props for the DeleteProjectModal component.
- * @returns {JSX.Element} The JSX element representing the DeleteProjectModal component.
- */
 const DeleteProjectModal = (props: SettingsModalProps) => {
   const {
     closeModal,
@@ -31,13 +24,7 @@ const DeleteProjectModal = (props: SettingsModalProps) => {
     selectedOrg
   } = props;
 
-  /**
-   * Handles the deletion of the project.
-   *
-   * @param {() => void} closeModal - The function to close the modal.
-   * @returns {Promise<void>} A promise that resolves when the project is deleted.
-   */
-  const handleDeleteProject = async (closeModal: () => void): Promise<void> => {
+  const handleDeleteProject = async (closeModal: () => void) => {
     const response = await deleteProject(selectedOrg?.value || '', projectId ?? '',);
 
     if (response?.status === 200) {
@@ -57,7 +44,6 @@ const DeleteProjectModal = (props: SettingsModalProps) => {
       }, 1200)
     }
   }
-
   return (
     <>
       <ModalHeader
diff --git a/ui/src/components/Common/DocLink/DocLink.tsx b/ui/src/components/Common/DocLink/DocLink.tsx
index c99613e5..d0fde507 100644
--- a/ui/src/components/Common/DocLink/DocLink.tsx
+++ b/ui/src/components/Common/DocLink/DocLink.tsx
@@ -11,21 +11,6 @@ interface IProps {
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
-/**
- * Renders a component that displays a link and a checkbox.
- *
- * @component
- * @param {Object} props - The component props.
- * @param {Object} props.cta - The link details.
- * @param {string} props.cta.href - The URL of the link.
- * @param {string} props.cta.title - The title of the link.
- * @param {boolean} props.isCheckedBoxChecked - Indicates whether the checkbox is checked.
- * @param {boolean} props.isDisable - Indicates whether the component is disabled.
- * @param {string} props.label - The label for the checkbox.
- * @param {boolean} props.isLabelFullWidth - Indicates whether the label should take up the full width.
- * @param {function} props.onChange - The callback function to be called when the checkbox value changes.
- * @returns {JSX.Element} The rendered component.
- */
 const DocLink = ({
   cta,
   isCheckedBoxChecked,
diff --git a/ui/src/components/Common/FileUpload/fileupload.scss b/ui/src/components/Common/FileUpload/fileupload.scss
index 00eea59c..6a2e32bd 100644
--- a/ui/src/components/Common/FileUpload/fileupload.scss
+++ b/ui/src/components/Common/FileUpload/fileupload.scss
@@ -1,7 +1,4 @@
 @import '../../../scss/variables';
-/**
- * Styles for the file upload container.
- */
 .file-upload-container {
   display: flex;
   height: 21.25rem;
@@ -13,9 +10,6 @@
   border-radius: 0.25rem;
   border: 0.125rem dashed $color-base-gray-40;
 
-  /**
-   * Styles for the file upload element.
-   */
   .file-upload {
     display: flex;
     height: 4.5rem;
@@ -26,9 +20,6 @@
     flex-shrink: 0;
   }
 
-  /**
-   * Styles for the text inside the file upload element.
-   */
   .file-upload-text {
     text-align: center;
     font-family: Inter;
@@ -39,9 +30,6 @@
     letter-spacing: 0.16px;
   }
 
-  /**
-   * Styles for the image inside the file upload container.
-   */
   .file-upload-image {
     width: 15rem;
     height: 15rem;
@@ -49,23 +37,14 @@
   }
 }
 
-/**
- * Styles for the hover effect on the file upload container.
- */
 .hover {
   border: 0.125rem dashed $color-base-purple;
 }
 
-/**
- * Styles for hiding an element.
- */
 .hidden {
   display: none;
 }
 
-/**
- * Styles for the validation container.
- */
 .validation-container {
   display: flex;
   background-color: $color-base-white-5;
diff --git a/ui/src/components/Common/FileUpload/index.tsx b/ui/src/components/Common/FileUpload/index.tsx
index 184bb1bb..1945e995 100644
--- a/ui/src/components/Common/FileUpload/index.tsx
+++ b/ui/src/components/Common/FileUpload/index.tsx
@@ -11,30 +11,16 @@ type FileUploadProps = {
   projectId: string;
 };
 
-/**
- * FileUpload component for uploading files.
- *
- * @param {FileUploadProps} props - The props for the FileUpload component.
- * @returns {JSX.Element} The rendered FileUpload component.
- */
 const FileUpload = (props: FileUploadProps) => {
   const [isDragOver, setIsDragOver] = useState<boolean>(false);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
   const targetRef = useRef<any>(null);
 
-  /**
-   * Empty method to handle setting upload modal to false.
-   */
   const handleSetUploadModalFalse = (): any => {
     // Empty Method
   };
 
-  /**
-   * Reads the files selected for upload.
-   *
-   * @param {FileList | null} filesList - The list of files selected for upload.
-   */
   const readFiles = (filesList: FileList | null) => {
     //handle Null check
     if (!filesList) return;
@@ -63,11 +49,6 @@ const FileUpload = (props: FileUploadProps) => {
     setIsDragOver(false);
   };
 
-  /**
-   * Handles the drop event when files are dropped onto the component.
-   *
-   * @param {DragEvent<HTMLDivElement>} e - The drop event.
-   */
   const handleDrop = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -76,43 +57,22 @@ const FileUpload = (props: FileUploadProps) => {
     e.dataTransfer.clearData();
   };
 
-  /**
-   * Handles the drag toggle event when dragging files over the component.
-   *
-   * @param {boolean} flag - The flag indicating whether the files are being dragged over the component.
-   * @returns {Function} The event handler function.
-   */
   const handleDragToggle = (flag: boolean) => (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     setIsDragOver(flag);
   };
 
-  /**
-   * Handles the file change event when files are selected using the file input.
-   *
-   * @param {ChangeEvent<HTMLInputElement>} e - The file change event.
-   */
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     e.preventDefault();
 
     readFiles(e?.target?.files);
   };
 
-  /**
-   * Handles the file select event when the "Choose file" link is clicked.
-   *
-   * @param {any} e - The file select event.
-   */
   const handleFileSelect = (e: any) => {
     e.preventDefault();
     fileInputRef?.current?.click();
   };
 
-  /**
-   * Handles the onClose event after file upload.
-   *
-   * @param {IFile[]} files - The uploaded files.
-   */
   const onCloseAfterUpload = (files: IFile[]) => {
     props.handleOnFileUpload(files);
   };
diff --git a/ui/src/components/Common/FileUpload/upload.scss b/ui/src/components/Common/FileUpload/upload.scss
index 8d5e49a3..b6b680fb 100644
--- a/ui/src/components/Common/FileUpload/upload.scss
+++ b/ui/src/components/Common/FileUpload/upload.scss
@@ -1,36 +1,3 @@
-/**
- * Styles for the asset upload component.
- *
- * This SCSS file contains styles for the asset upload window component.
- * It includes styles for the heading, body, and various elements within the component.
- * The component is used for uploading files and displaying their progress.
- * CSS classes:
- * - .asset-upload - The main container for the asset upload component.
- * - .asset-upload__heading - The heading section of the asset upload component.
- * - .asset-upload__heading.in-progress - Applied when the upload is in progress.
- * - .asset-upload__heading.success - Applied when the upload is successful.
- * - .asset-upload__heading.attention - Applied when attention is required.
- * - .asset-upload__heading.warning - Applied when there is a warning.
- * - .asset-upload__actions - Container for the upload actions.
- * - .asset-upload__actions__cancel - Cancel upload action button.
- * - .asset-upload__actions__minimize - Minimize upload action button.
- * - .asset-upload__actions__maximize - Maximize upload action button.
- * - .asset-upload__count - Displays the count of uploaded files.
- * - .asset-upload__body - The body section of the asset upload component.
- * - .asset-upload__file - Container for each uploaded file.
- * - .asset-upload__file__name - Displays the name of the uploaded file.
- * - .asset-upload__file__actions - Container for file actions.
- * - .asset-upload__file__actions__progress - Container for file upload progress.
- * - .asset-upload__file__actions__progress .file-loaded - Displays the loaded file size.
- * - .asset-upload__file__actions__progress .total-size - Displays the total file size.
- * - .asset-upload__file__actions .cancel-upload - Cancel upload action button for a file.
- *
- * @example
- * <div class="asset-upload">
- *   <div class="asset-upload__heading">...</div>
- *   <div class="asset-upload__body">...</div>
- * </div>
- */
 @import '../../../scss/variables';
 
 /* Asset upload window css */
diff --git a/ui/src/components/Common/FileUpload/upload.tsx b/ui/src/components/Common/FileUpload/upload.tsx
index e6f5bcbb..fcae15a4 100644
--- a/ui/src/components/Common/FileUpload/upload.tsx
+++ b/ui/src/components/Common/FileUpload/upload.tsx
@@ -19,14 +19,6 @@ import { returnFileSize, shortName } from '../../../utilities/functions';
 import { UPLOAD_FILE_URL } from '../../../utilities/constants';
 import './upload.scss';
 
-/**
- * Renders a file component.
- *
- * @param {Object} props - The component props.
- * @param {Object} props.file - The file object.
- * @param {Function} props.handleRemove - The function to handle file removal.
- * @returns {JSX.Element} The file component.
- */
 const File = ({ file, handleRemove }: any) => {
   return (
     <div className="asset-upload__file flex-v-center">
@@ -51,12 +43,6 @@ const File = ({ file, handleRemove }: any) => {
   );
 };
 
-/**
- * Renders an error file component.
- * @param file - The file object.
- * @param handleRemove - The function to handle file removal.
- * @returns The JSX element representing the error file component.
- */
 const ErrorFile = ({ file, handleRemove }: any) => {
   return (
     <div className="asset-upload__file flex-v-center">
@@ -76,12 +62,6 @@ const ErrorFile = ({ file, handleRemove }: any) => {
   );
 };
 
-/**
- * Renders a component for interrupting the file upload process.
- *
- * @param props - The component props.
- * @returns The rendered component.
- */
 const InterruptUpload = (props: any) => {
   const handleProceed = () => {
     props.closeModal({ cancelUpload: true });
@@ -120,10 +100,6 @@ const InterruptUpload = (props: any) => {
   );
 };
 
-/**
- * Component for handling file uploads.
- */
-
 class Upload extends Component<any, any> {
   state = {
     fileList: this.props.fileList,
diff --git a/ui/src/components/Common/Modal/FilterModal/FilterModal.scss b/ui/src/components/Common/Modal/FilterModal/FilterModal.scss
index f304bf2d..a39ada6a 100644
--- a/ui/src/components/Common/Modal/FilterModal/FilterModal.scss
+++ b/ui/src/components/Common/Modal/FilterModal/FilterModal.scss
@@ -1,8 +1,6 @@
 @import '../../../../scss/variables';
-/**
- * Styles for the FilterModal component.
- */
- .Filter__modal {
+
+.Filter__modal {
   width: $px-400;
   z-index: 40;
   position: absolute;
@@ -11,48 +9,30 @@
   border-radius: $px-10;
 }
 
-/**
- * Styles for the checkboxes inside the FilterModal component.
- */
- .Filter__modal .Checkbox input:checked ~ .Checkbox__tick,
- .Filter__modal .Checkbox .Checkbox__box {
-   margin-top: $px-4;
-   font-size: $px-16;
- }
+.Filter__modal .Checkbox input:checked ~ .Checkbox__tick,
+.Filter__modal .Checkbox .Checkbox__box {
+  margin-top: $px-4;
+  font-size: $px-16;
+}
 
-/**
- * Styles for each filter item inside the FilterModal component.
- */
- .Filter__modal .Filter__item {
+.Filter__modal .Filter__item {
   cursor: pointer;
   padding: $px-10 $px-20;
 }
 
-/**
- * Styles for the filter item when hovered inside the FilterModal component.
- */
- .Filter__modal .Filter__item:hover {
+.Filter__modal .Filter__item:hover {
   background-color: $color-base-white-10;
 }
 
-/**
- * Styles for the WordWrapper element when the filter item is hovered inside the FilterModal component.
- */
- .Filter__modal .Filter__item:hover .WordWrapper {
+.Filter__modal .Filter__item:hover .WordWrapper {
   color: $color-brand-primary-base;
 }
 
-/**
- * Styles for the Checkbox__box element when the filter item is hovered inside the FilterModal component.
- */
- .Filter__modal .Filter__item:hover .Checkbox__box {
+.Filter__modal .Filter__item:hover .Checkbox__box {
   border: 1.5px solid $color-brand-primary-base;
 }
 
-/**
- * Styles for the header of the FilterModal component.
- */
- .Filter__modal-header {
+.Filter__modal-header {
   background: $color-base-white-10;
   border-bottom: 1px solid $color-brand-secondary-lightest;
   font-size: $px-20;
@@ -61,10 +41,7 @@
   padding: $px-14 $px-16;
 }
 
-/**
- * Styles for the container of the header in the FilterModal component.
- */
- .Filter__modal-header .Filter__modal-header-container {
+.Filter__modal-header .Filter__modal-header-container {
   align-items: center;
   display: flex;
   color: #222;
@@ -76,17 +53,11 @@
   font-weight: 600;
 }
 
-/**
- * Styles for the title in the header of the FilterModal component.
- */
- .Filter__modal-header .Filter__modal-header-container .Filter__modal-header-title {
+.Filter__modal-header .Filter__modal-header-container .Filter__modal-header-title {
   font-weight: 600;
 }
 
-/**
- * Styles for the counter in the header of the FilterModal component.
- */
- .Filter__modal-header .Filter__modal-header-container .Filter__modal-header-counter {
+.Filter__modal-header .Filter__modal-header-container .Filter__modal-header-counter {
   border: 1px solid $color-brand-secondary-lightest;
   border-radius: 1rem;
   color: $color-stepper-title;
@@ -103,44 +74,26 @@
   width: fit-content;
 }
 
-/**
- * Styles for the search box inside the FilterModal component.
- */
- .Filter__searchbox .Search--primary .Search__input {
+.Filter__searchbox .Search--primary .Search__input {
   height: $px-35;
 }
 
-/**
- * Styles for the content area of the FilterModal component.
- */
- .Filter__modal-content {
+.Filter__modal-content {
   overflow: scroll;
   max-height: $px-250;
   overflow-x: hidden;
 }
 
-/**
- * Styles for the filter icon in the FilterModal component.
- */
- .Filter__icon {
+.Filter__icon {
   cursor: pointer !important;
   padding: $px-5;
   border-radius: 10%;
 }
 
-/**
- * Styles for the background color of the filter icon in the FilterModal component.
- */
- .Filter__icon:hover {
+.Filter__icon:hover {
   background-color: rgba(108, 92, 231, 0.1);
 }
 
-/**
- * Styles for the cancel button in the header of the FilterModal component.
- */
- .Filter__icon_bg_color {
-  background-color: rgba(108, 92, 231, 0.1);
-}
 .Filter__icon_bg_color {
   background-color: rgba(108, 92, 231, 0.1);
 }
@@ -155,10 +108,8 @@
 .Filter__modal-header-cancel:hover {
   background-color: $color-brand-secondary-lightest;
 }
-/**
- * Styles for the footer of the FilterModal component.
- */
- .Filter__modal-footer {
+
+.Filter__modal-footer {
   display: flex;
   border-top: 1px solid $color-brand-secondary-lightest;
   height: $px-70;
@@ -166,10 +117,7 @@
   padding: $px-20;
 }
 
-/**
- * Styles for the "no results found" message in the FilterModal component.
- */
- .Filter__no-found {
+.Filter__no-found {
   text-align: center;
   vertical-align: middle;
   line-height: $px-50;
diff --git a/ui/src/components/Common/Modal/FilterModal/FilterModal.tsx b/ui/src/components/Common/Modal/FilterModal/FilterModal.tsx
index 33669028..56b3e5d2 100644
--- a/ui/src/components/Common/Modal/FilterModal/FilterModal.tsx
+++ b/ui/src/components/Common/Modal/FilterModal/FilterModal.tsx
@@ -20,14 +20,6 @@ type Props = {
   iconSize?: 'original' | 'tiny' | 'mini' | 'small' | 'large' | 'medium' | 'extraSmall';
 };
 
-/**
- * Represents a filter modal component.
- *
- * @component
- * @param {Props} props - The props for the FilterModal component.
- * @returns {JSX.Element} The rendered FilterModal component.
- */
-
 export const FilterModal = (props: Props) => {
   const {
     title,
diff --git a/ui/src/components/Common/Modal/FilterModal/filterModal.interface.ts b/ui/src/components/Common/Modal/FilterModal/filterModal.interface.ts
index f5c43b55..311d0aab 100644
--- a/ui/src/components/Common/Modal/FilterModal/filterModal.interface.ts
+++ b/ui/src/components/Common/Modal/FilterModal/filterModal.interface.ts
@@ -1,6 +1,3 @@
-/**
- * Represents the interface for a filter type.
- */
 export interface IFilterType {
   value: string;
   label: string;
diff --git a/ui/src/components/Common/ProgressBar/index.tsx b/ui/src/components/Common/ProgressBar/index.tsx
index 81260efc..f15ae7d4 100644
--- a/ui/src/components/Common/ProgressBar/index.tsx
+++ b/ui/src/components/Common/ProgressBar/index.tsx
@@ -24,13 +24,6 @@ type IStyle = {
   [key: string]: string
 }
 
-/**
- * Renders a progress bar component.
- *
- * @component
- * @param {ProgressBarProps} props - The props for the ProgressBar component.
- * @returns {JSX.Element} - The rendered ProgressBar component.
- */
 const ProgressBar = (props: ProgressBarProps) => {
   const { percentage, color, height, borderRadius, type, radius, stroke, bgColor } = props
 
diff --git a/ui/src/components/Common/ProgressBar/progressBar.scss b/ui/src/components/Common/ProgressBar/progressBar.scss
index 3ffaabe0..fc0310e2 100644
--- a/ui/src/components/Common/ProgressBar/progressBar.scss
+++ b/ui/src/components/Common/ProgressBar/progressBar.scss
@@ -1,31 +1,16 @@
 @import '../../../scss//variables';
-/**
- * Styles for the ProgressBar component.
- *
- * @class ProgressBar
- */
+
 .ProgressBar {
 	border-radius: $space-4;
 	
 	overflow: hidden;
-	
-	/**
-	 * Styles for the progress bar element.
-	 *
-	 * @class ProgressBar__bar
-	 */
 	&__bar {
+		
 		border-radius: inherit;
 		height: inherit;
 		transition: width 100ms linear;
 	}
-	
-	/**
-	 * Styles for the progress circle element.
-	 *
-	 * @class ProgressBar__circle
-	 */
-	&__circle {
+	&__circle{
 		stroke-width: 5%;
 		transform: rotate(-90deg);
 		transform-origin: 50% 50%;
diff --git a/ui/src/components/Common/Settings/Settings.scss b/ui/src/components/Common/Settings/Settings.scss
index c5875a94..4c6377a3 100644
--- a/ui/src/components/Common/Settings/Settings.scss
+++ b/ui/src/components/Common/Settings/Settings.scss
@@ -1,40 +1,19 @@
-/**
- * This SCSS file contains styles for the Settings component.
- */
-
 @import '../../../scss/variables';
 
 #setting-page {
   display: flex;
   width: 100%;
-
-  /**
-   * Styles for the section header.
-   */
   .SectionHeader {
     color: $color-stepper-title;
     font-weight: $font-weight-semi-bold;
     margin-bottom: 2rem;
   }
-
-  /**
-   * Styles for the page layout.
-   */
   .PageLayout {
     width: 100%;
   }
-
-  /**
-   * Styles for the page layout's head and left sidebar.
-   */
-  .PageLayout__head,
-  .PageLayout__leftSidebar {
+  .PageLayout__head, .PageLayout__leftSidebar {
     border-top: 0 none;
   }
-
-  /**
-   * Styles for the primary page layout.
-   */
   .PageLayout--primary {
     .PageLayout__content {
       .PageLayout__body {
@@ -42,20 +21,12 @@
         margin-left: 15rem;
         padding-top: $px-8;
       }
-    }
-  }
-
-  /**
-   * Styles for the action component title.
-   */
+    } 
+  } 
   .action-component-title {
     justify-content: space-between;
     width: calc(100vw - 326px);
   }
-
-  /**
-   * Styles for the content block.
-   */
   .content-block {
     margin-right: 0;
     padding: 1.5rem;
@@ -63,30 +34,28 @@
   }
 }
 
-/**
- * Styles for the field.
- */
 .Field {
   margin-bottom: $px-40;
 }
-
-/**
- * Styles for hiding the left sidebar.
- */
 .PageLayout__leftSidebar--hide {
   display: none;
 }
 
-/**
- * Styles for the left sidebar.
- */
 .leftsidebar {
   margin-top: 0 !important;
 }
 
-/**
- * Styles for the stack settings heading.
- */
+// .content-body .white-box-container {
+//   background-color: $color-brand-white-base;
+//   padding: 20px;
+//   margin-top: 50px !important;
+//   margin-left: 240px;
+//   margin-right: auto;
+//   position: relative;
+//   z-index: 10;
+//   height: 600px;
+// }
+
 .stack-settings__heading {
   color: $color-base-black-base;
   font-size: 0.875rem;
@@ -96,16 +65,26 @@
   margin-bottom: $px-20;
 }
 
-/**
- * Styles for the page layout's left sidebar.
- */
+// .toggle-class {
+//   width: calc(100% - 18.4375rem) !important;
+// }
+// .layout-container.specific-context .PageLayout__head {
+//   z-index: 10 !important;
+//   margin-left: 240px;
+//   width: 100% !important;
+// }
+// .SaveButton {
+//   padding: 30px 10px;
+// }
+
+// .layout-container.content-body .PageLayout__body {
+//   margin-top: 90px !important;
+//   margin-left: 227px !important;
+// }
+
 .PageLayout__leftSidebar {
   background-color: #f7f9fc !important;
 }
-
-/**
- * Styles for the active list row.
- */
 .ListRowV2--active {
   background-color: #fff;
   border-left: 0.125rem solid;
diff --git a/ui/src/components/Common/Settings/setting.interface.ts b/ui/src/components/Common/Settings/setting.interface.ts
index 0d6a420e..f0abcc5e 100644
--- a/ui/src/components/Common/Settings/setting.interface.ts
+++ b/ui/src/components/Common/Settings/setting.interface.ts
@@ -1,6 +1,3 @@
-/**
- * Represents a project.
- */
 interface IProject {
   title: string;
   name: string;
diff --git a/ui/src/components/Common/WordWrapper/WordWrapper.tsx b/ui/src/components/Common/WordWrapper/WordWrapper.tsx
index 9b86a8e3..f9ca6238 100644
--- a/ui/src/components/Common/WordWrapper/WordWrapper.tsx
+++ b/ui/src/components/Common/WordWrapper/WordWrapper.tsx
@@ -10,12 +10,6 @@ type Props = {
   position?: string;
 };
 
-/**
- * Renders a component that wraps text and provides a tooltip if the text exceeds a maximum length.
- *
- * @param {Props} props - The component props.
- * @returns {JSX.Element} The rendered WordWrapper component.
- */
 function WordWrapper(props: Props) {
   const { maxLength, tooltipcontent, position = 'right' } = props;
   const text = props.text || '';
diff --git a/ui/src/components/Common/private-route.tsx b/ui/src/components/Common/private-route.tsx
index 11ff6d63..3ba2ce34 100644
--- a/ui/src/components/Common/private-route.tsx
+++ b/ui/src/components/Common/private-route.tsx
@@ -7,14 +7,6 @@ type IProps = {
   redirectTo: string;
 };
 
-/**
- * Renders a private route component that checks if the user is authenticated.
- * If the user is authenticated, it renders the child components.
- * If the user is not authenticated, it redirects to the specified route.
- *
- * @param redirectTo - The route to redirect to if the user is not authenticated.
- * @returns The private route component.
- */
 const PrivateRoute: FC<IProps> = ({ redirectTo }: IProps) => {
   const isAuthenticated = !!getDataFromLocalStorage('app_token');
 
diff --git a/ui/src/components/Common/router.tsx b/ui/src/components/Common/router.tsx
index 0fffa4a2..6df9932c 100644
--- a/ui/src/components/Common/router.tsx
+++ b/ui/src/components/Common/router.tsx
@@ -19,10 +19,6 @@ const MigrationLazyLoad = lazy(() => import('../../pages/Migration'));
 const ProjectsLazyLoad = lazy(() => import('../../pages/Projects'));
 const SettingsLazyLoad = lazy(() => import ('../Common/Settings'))
 
-/**
- * Renders the application router.
- * @returns The application router component.
- */
 const AppRouter = () => {
   return (
     <Routes>
diff --git a/ui/src/components/ContentMapper/contentMapper.interface.ts b/ui/src/components/ContentMapper/contentMapper.interface.ts
index 00b75055..a247930a 100644
--- a/ui/src/components/ContentMapper/contentMapper.interface.ts
+++ b/ui/src/components/ContentMapper/contentMapper.interface.ts
@@ -50,35 +50,19 @@ export interface ContentType {
   fieldMapping?: FieldMapType[] | [];
 }
 
-/**
- * Represents the field mapping type for ContentMapper.
- */
 export interface FieldMapType {
-  /** The Contentstack field type. */
   ContentstackFieldType: string;
-  /** The child field mappings. */
   child?: FieldMapType[] | undefined;
-  /** The backup field type. */
   backupFieldType: string;
-  /** The Contentstack field name. */
   contentstackField: string;
-  /** The Contentstack field UID. */
   contentstackFieldUid: string;
-  /** Indicates if the field is deleted. */
   isDeleted: boolean;
-  /** The field name in another CMS. */
   otherCmsField: string;
-  /** The field type in another CMS. */
   otherCmsType: string;
-  /** The UID of the field mapping. */
   uid: string;
-  /** The ID of the field mapping. */
   id: string;
-  /** Indicates if the field can be selected. */
   _canSelect?: boolean;
-  /** Advanced field options. */
   advanced?: Advanced;
-  /** The Contentstack UID. */
   contentstackUid: string;
 }
 
diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss
index 3ad57d74..cf03e88c 100644
--- a/ui/src/components/ContentMapper/index.scss
+++ b/ui/src/components/ContentMapper/index.scss
@@ -1,34 +1,3 @@
-/**
- * 
- * This SCSS file contains styles for the ContentMapper component.
- * The ContentMapper component is responsible for mapping content types and fields.
- * It includes styles for the content types list, search bar, list items, options, table, and other UI elements.
- * 
- * Styles are organized into different sections:
- * - .content-types-list-wrapper: Styles for the wrapper of the content types list.
- * - .content-types-list-header: Styles for the header of the content types list.
- * - .ct-search-wrapper: Styles for the search bar wrapper.
- * - .ct-list-wrapper: Styles for the wrapper of the content types list.
- * - .ct-list: Styles for the content types list.
- * - .mapped-icon: Styles for the mapped icon.
- * - .dropdown-align: Styles for aligning the dropdown menu.
- * - .content-type-list: Styles for the content type list.
- * - .content-types-fields-wrapper: Styles for the wrapper of the content types fields.
- * - .cta-wrapper: Styles for the call-to-action wrapper.
- * - .table-container: Styles for the table container.
- * - .table-wrapper: Styles for the table wrapper.
- * - .disabled-field: Styles for disabled fields.
- * - .action-btn-wrapper: Styles for the action button wrapper.
- * - .action-component-body: Styles for the action component body.
- * - .step-container: Styles for the step container.
- * - .saveButton: Styles for the save button.
- * - .btnWrapper: Styles for the button wrapper.
- * - div .select: Styles for the select dropdown.
- * - div .table-row: Styles for the table row.
- * - .status-wrapper: Styles for the status wrapper.
- * - .filter-wrapper: Styles for the filter wrapper.
- * - .no-content: Styles for the no content message.
- */
 @import '../../scss/App.scss';
 @import '../../scss/variables';
 
diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx
index 7e365ae6..932ed583 100644
--- a/ui/src/components/ContentMapper/index.tsx
+++ b/ui/src/components/ContentMapper/index.tsx
@@ -99,10 +99,6 @@ const Fields: Mapping = {
   global_field: 'Global'
 };
 
-/**
- * Component for mapping content types.
- */
-
 const ContentMapper = () => {
   /** ALL CONTEXT HERE */
 
diff --git a/ui/src/components/DestinationStack/Actions/LoadOrganisation.tsx b/ui/src/components/DestinationStack/Actions/LoadOrganisation.tsx
index a78ab6c2..fc33d2c4 100644
--- a/ui/src/components/DestinationStack/Actions/LoadOrganisation.tsx
+++ b/ui/src/components/DestinationStack/Actions/LoadOrganisation.tsx
@@ -1,51 +1,41 @@
-// Importing necessary React hooks and Redux functions for state management.
-import { useEffect, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-
-// Importing type definitions for dropdown and migration data structures.
 import { IDropDown, INewMigration } from '../../../context/app/app.interface';
-
-// Importing UI components from @contentstack/venus-components.
 import { TextInput } from '@contentstack/venus-components';
 
-// Importing stylesheet for the DestinationStack component.
 import '../DestinationStack.scss';
-
-// Utility function to check for empty strings.
 import { isEmptyString } from '../../../utilities/functions';
-
-// RootState type for accessing the Redux store's state.
 import { RootState } from '../../../store';
-
-// Action creator for updating migration data in the Redux store.
 import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice';
 
-// Interface defining the props expected by the LoadOrganisation component.
 interface LoadOrganisationProps {
-  stepComponentProps: any; // Props for the step component, type not specified.
-  currentStep: number; // The current step in a multi-step process.
-  handleStepChange: (stepIndex: number, closeStep?: boolean) => void; // Function to handle step changes.
+  stepComponentProps: any;
+  currentStep: number;
+  handleStepChange: (stepIndex: number, closeStep?: boolean) => void;
 }
 
-// The LoadOrganisation component is responsible for loading and displaying the selected organisation.
 const LoadOrganisation = (props: LoadOrganisationProps) => {
-  // State and dispatch hooks for interacting with the Redux store.
-  const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
-  const selectedOrganisation = useSelector((state: RootState) => state?.authentication?.selectedOrganisation);
+  /****  ALL HOOKS HERE  ****/
+
+  const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
+  const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation);
+
   const dispatch = useDispatch();
 
-  // Local state for tracking the selected organisation.
   const [selectedOrg, setSelectedOrg] = useState<IDropDown>();
+  /****  ALL METHODS HERE  ****/
 
-  // Function to update the new migration data in the Redux store.
+  //update new  Migration Data
   const setNewMigrationData = (data: INewMigration) => {
-    dispatch(updateNewMigrationData(data));
+    dispatch(updateNewMigrationData((data)));
   };
+   
+
+  /****  ALL USEEffects  HERE  ****/
 
-  // Effect hook to initialize the selected organisation based on the Redux store or local state.
   useEffect(() => {
     const org = !isEmptyString(newMigrationData.destination_stack.selectedOrg.label)
-      ? newMigrationData.destination_stack.selectedOrg
+      ? newMigrationData?.destination_stack?.selectedOrg
       : selectedOrganisation;
 
     setSelectedOrg(org as any);
@@ -58,8 +48,7 @@ const LoadOrganisation = (props: LoadOrganisationProps) => {
       }
     });
   }, []);
-
-  // Render function for the LoadOrganisation component.
+  
   return (
     <div className="action-content-wrapper p-3">
       <TextInput 
@@ -74,5 +63,4 @@ const LoadOrganisation = (props: LoadOrganisationProps) => {
   );
 };
 
-// Exporting the LoadOrganisation component as the default export.
-export default LoadOrganisation;
\ No newline at end of file
+export default LoadOrganisation;
diff --git a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
index bef438cc..a7d41d94 100644
--- a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
+++ b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
@@ -27,11 +27,6 @@ const defaultStack = {
   name: ''
 };
 
-/**
- * Component for loading stacks.
- * @param props - The component props.
- * @returns The LoadStacks component.
- */
 const LoadStacks = (props: LoadFileFormatProps) => {
   const ref = useRef<HTMLDivElement>(null);
   /****  ALL HOOKS HERE  ****/
diff --git a/ui/src/components/DestinationStack/DestinationStack.scss b/ui/src/components/DestinationStack/DestinationStack.scss
index 224fb5bb..3a6abb71 100644
--- a/ui/src/components/DestinationStack/DestinationStack.scss
+++ b/ui/src/components/DestinationStack/DestinationStack.scss
@@ -1,24 +1,13 @@
 @import '../../scss/variables';
 
-/**
- * Styles for the service list container.
- *
- * The service list container is used to display a list of services.
- * It aligns the text to the left, uses flexbox to wrap the items,
- * sets a gap of 12px between the items, and applies a margin of
- * 0 0 20px 10px to the container.
- */
 .service_list {
   text-align: left;
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
-  margin: 0 0 20px 10px !important;
+  margin: 0 0 20px 10px !important
 }
 
-/**
- * Styles for the DestinationStack component.
- */
 .title {
   margin: 20px 0 5px;
   padding: 0 8px;
@@ -27,59 +16,32 @@
   font-weight: $font-weight-semi-bold;
   line-height: 21px;
 }
-
-/**
- * Styles for the stackTitle class.
- */
 .stackTitle {
   color: $color-black-2121;
   font-size: $size-font-large;
   font-weight: $font-weight-semi-bold;
   padding-bottom: 20px;
 }
-
-/**
- * Styles for the pl-40 class.
- */
 .pl-40 {
   padding-left: $px-40;
 }
-
-/**
- * Styles for the Dropdown-wrapper class.
- */
 .Dropdown-wrapper {
-  /**
-   * Styles for the css-b8ldur-Input class.
-   */
   .css-b8ldur-Input {
-    margin: 0;
-    padding: 0;
+   margin: 0;
+   padding: 0;
   }
   .Select__v2 .Select__menu .Select__menu-list {
     padding: 1px;
   }
 }
-
-/**
- * Styles for the stackselect class.
- */
 .stackselect {
   min-width: 600px !important;
   max-width: 600px !important;
   border: 1px solid $color-brand-secondary-lightest;
   border-radius: 4px;
 }
-
-/**
- * Styles for the destination-stack-container class.
- */
 .destination-stack-container {
   padding: 20px;
-
-  /**
-   * Styles for the migration-vertical-stepper class.
-   */
   .migration-vertical-stepper {
     padding: 24px 30px;
     border: 1px solid $color-brand-secondary-lightest;
@@ -95,10 +57,6 @@
       border: 0 none;
       border-radius: 0;
     }
-
-    /**
-     * Styles for the stepper-title class.
-     */
     .stepper-title {
       margin: 20px 0 5px;
       padding: 0 8px;
@@ -120,28 +78,17 @@
       box-shadow: none;
       border: 0 none;
       border-radius: 0;
-      padding: 0 !important;
+      padding:0 !important;
     }
-
-    /**
-     * Styles for the migration-vertical-stepper-container class.
-     */
     .migration-vertical-stepper-container {
       border-bottom: 0 none;
     }
-
-    /**
-     * Styles for the orgInput class.
-     */
     .orgInput {
       max-width: 600px;
       width: 100%;
     }
-
-    /**
-     * Styles for the Select__menu class.
-     */
     .Select__menu {
+      // max-width: 430px;
       width: 100%;
       margin: 0;
       padding: 0; 
@@ -171,21 +118,12 @@
           color: $color-brand-primary-base;
         }
       }
-
-      /**
-       * Styles for the Select__value-container class.
-       */
-      .Select .Select__control .Select__value-container input,
-      .Select__single-value input[text] {
+      .Select .Select__control .Select__value-container input, .Select__single-value input[text]{
         font-size: 16px !important;
         line-height: 24px !important;
         color: $color-placeholder !important;
         width: 100% !important;
       }
-
-      /**
-       * Styles for the Select__option class.
-       */
       .Select__option {
         position: relative;
       }
@@ -194,38 +132,22 @@
     .TextInput--disabled .TextInput__v2 {
       background-color: #F9F8FF !important;
     }
-
-    /**
-     * Styles for the #Step2 ID.
-     */
     #Step2 {
-      /**
-       * Styles for the action-summary-wrapper class.
-       */
       .action-summary-wrapper {
         background-color: $color-brand-white-base;
         margin-left: 2px;
         padding: 0 !important;
       }
     }
-
-    /**
-     * Styles for the errorMessage class.
-     */
     .errorMessage {
       color: $color-brand-warning-medium;
       font-size: $size-font-small;
     }
+   
+
   }
 }
-
-/**
- * Styles for the action-summary-wrapper class.
- */
 .action-summary-wrapper {
-  /**
-   * Styles for the Select__value-container class.
-   */
   .Select .Select__control .Select__value-container.Select__value-container--has-value .Select__single-value input {
     width: 100% !important;
     background-color: $color-brand-white-base;
@@ -234,19 +156,13 @@
     font-weight: $font-weight-regular;
     line-height: 24px;
   }
-
-  /**
-   * Styles for the TextInput--disabled class.
-   */
   .TextInput--disabled .TextInput__v2 {
     background-color: $color-base-white-5 !important;
     color: $color-black-2121;
   }
 }
 
-/**
- * Styles for the locale-container class.
- */
+
 .locale-container {
   display: flex;
   background-color: $color-base-white-5;
diff --git a/ui/src/components/DestinationStack/StepperSteps.ts b/ui/src/components/DestinationStack/StepperSteps.ts
index af174b7f..76e2db96 100644
--- a/ui/src/components/DestinationStack/StepperSteps.ts
+++ b/ui/src/components/DestinationStack/StepperSteps.ts
@@ -6,15 +6,6 @@ import OrganisationSummary from './Summary/OrganisationSummary';
 import StacksSummary from './Summary/StacksSummary';
 import { IStep } from '../../context/app/app.interface';
 
-/**
- * Returns an updated step object based on the provided parameters.
- *
- * @param step - The original step object.
- * @param isCompleted - A boolean indicating whether the step is completed.
- * @param isMigrationLocked - A boolean indicating whether the migration is locked.
- * @param isPrevStepLocked - A boolean indicating whether the previous step is locked. Default is false.
- * @returns The updated step object.
- */
 const getComponentObject = (
   step: IStep,
   isCompleted: boolean,
@@ -56,14 +47,6 @@ const getComponentObject = (
   return updatedStep;
 };
 
-/**
- * Returns an array of component objects representing the steps in the destination stack.
- *
- * @param isCompleted - A boolean indicating whether the migration is completed.
- * @param isMigrationLocked - A boolean indicating whether the migration is locked.
- * @param allSteps - An array of IStep objects representing all the steps in the destination stack.
- * @returns An array of component objects representing the steps in the destination stack.
- */
 export const getDestinationStackSteps = (
   isCompleted: boolean,
   isMigrationLocked: boolean,
diff --git a/ui/src/components/DestinationStack/Summary/OrganisationSummary.tsx b/ui/src/components/DestinationStack/Summary/OrganisationSummary.tsx
index 04bcbb78..56d0a384 100644
--- a/ui/src/components/DestinationStack/Summary/OrganisationSummary.tsx
+++ b/ui/src/components/DestinationStack/Summary/OrganisationSummary.tsx
@@ -6,20 +6,10 @@ import { IStep } from '../../../context/app/app.interface';
 import './summary.scss';
 import { RootState } from '../../../store';
 
-/**
- * Props for the OrganisationSummary component.
- */
 interface OrganisationSummaryProps {
   stepData: IStep;
 }
 
-/**
- * Renders the summary of the selected organization in the destination stack.
- *
- * @component
- * @param {OrganisationSummaryProps} props - The props for the OrganisationSummary component.
- * @returns {JSX.Element} The rendered OrganisationSummary component.
- */
 const OrganisationSummary = (props: OrganisationSummaryProps): JSX.Element => {
 
   const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
diff --git a/ui/src/components/DestinationStack/Summary/StacksSummary.tsx b/ui/src/components/DestinationStack/Summary/StacksSummary.tsx
index a751fc4e..e5082ad6 100644
--- a/ui/src/components/DestinationStack/Summary/StacksSummary.tsx
+++ b/ui/src/components/DestinationStack/Summary/StacksSummary.tsx
@@ -14,12 +14,6 @@ interface StacksSummaryProps {
   stepData: IStep;
 }
 
-/**
- * Renders the summary of stacks in the destination stack component.
- *
- * @param {StacksSummaryProps} props - The props for the StacksSummary component.
- * @returns {JSX.Element} The rendered StacksSummary component.
- */
 const StacksSummary = (props: StacksSummaryProps): JSX.Element => {
 
   const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
diff --git a/ui/src/components/DestinationStack/Summary/summary.scss b/ui/src/components/DestinationStack/Summary/summary.scss
index 7875eccd..43f3cb92 100644
--- a/ui/src/components/DestinationStack/Summary/summary.scss
+++ b/ui/src/components/DestinationStack/Summary/summary.scss
@@ -1,8 +1,5 @@
 @import '../../../scss/variables';
 
-/**
- * Styles for the summary title.
- */
 .summary-title {
   font-family: $font-family-primary;
   font-style: normal;
@@ -14,9 +11,6 @@
   margin-top: 3px;
 }
 
-/**
- * Styles for the action summary wrapper in Step 2.
- */
 #Step2 .action-summary-wrapper {
   background-color: rgb(247, 249, 252);
   border: none;
@@ -26,16 +20,10 @@
   top: 50%;
 }
 
-/**
- * Styles for the step in the StepperWrapper in Step 2.
- */
 #Step2 .StepperWrapper__step {
   padding: 0 !important;
 }
 
-/**
- * Styles for the col-12 class.
- */
 .col-12 {
   text-align: left;
   padding: 0;
diff --git a/ui/src/components/DestinationStack/index.tsx b/ui/src/components/DestinationStack/index.tsx
index a36be625..81c41102 100644
--- a/ui/src/components/DestinationStack/index.tsx
+++ b/ui/src/components/DestinationStack/index.tsx
@@ -18,100 +18,63 @@ import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
 import { RootState } from '../../store';
 import { updateMigrationData, updateNewMigrationData } from '../../store/slice/migrationDataSlice';
 
-/**
- * Props for the DestinationStackComponent.
- */
 type DestinationStackComponentProps = {
   destination_stack: string;
   org_id: string;
   isCompleted: boolean;
   projectData: MigrationResponse;
   handleStepChange: (currentStep: number) => void;
-  handleOnAllStepsComplete: (flag: boolean) => void;
+  handleOnAllStepsComplete:(flag : boolean)=>void;
 };
 
-/**
- * Renders the DestinationStackComponent.
- * @param destination_stack - The destination stack value.
- * @param org_id - The organization ID.
- * @param projectData - The project data.
- * @param isCompleted - Flag indicating if the component is completed.
- * @param handleOnAllStepsComplete - Callback function for handling all steps completion.
- */
 const DestinationStackComponent = ({
   destination_stack,
   org_id,
   projectData,
   isCompleted,
+  // handleStepChange,
   handleOnAllStepsComplete,
 }: DestinationStackComponentProps) => {
   /** ALL HOOKS HERE */
-
-  /**
-   * Flag indicating if the component is loading.
-   */
   const [isLoading, setIsLoading] = useState<boolean>(true);
-
-  /**
-   * Flag indicating if the component is migration locked.
-   */
+  // const [isCompleted, setIsCompleted] = useState<boolean>(false);
   const [isMigrationLocked, setIsMigrationLocked] = useState<boolean>(false);
-
-  /**
-   * The key for the stepper component.
-   */
   const [stepperKey, setStepperKey] = useState<string>('v-mig-destination-step');
-
-  /**
-   * The internal active step index.
-   */
   const [internalActiveStepIndex, setInternalActiveStepIndex] = useState<number>(-1);
 
-  /**
-   * Reference to the autoVerticalStepperComponent.
-   */
   const autoVerticalStepperComponent = useRef<any>(null);
 
   /** ALL CONTEXT HERE */
+  const migrationData = useSelector((state:RootState)=>state?.migration?.migrationData);
+  const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
+  const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation);
+  const organisationsList = useSelector((state:RootState)=>state?.authentication?.organisationsList);
+  const dispatch = useDispatch();
 
-  /**
-   * The migration data from the Redux store.
-   */
-  const migrationData = useSelector((state: RootState) => state?.migration?.migrationData);
-
-  /**
-   * The new migration data from the Redux store.
-   */
-  const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
-
-  /**
-   * The selected organization from the Redux store.
-   */
-  const selectedOrganisation = useSelector((state: RootState) => state?.authentication?.selectedOrganisation);
-
-  /**
-   * The list of organizations from the Redux store.
-   */
-  const organisationsList = useSelector((state: RootState) => state?.authentication?.organisationsList);
+  // const { projectId = '' } = useParams();
 
-  /**
-   * The Redux dispatch function.
-   */
-  const dispatch = useDispatch();
+  // const navigate = useNavigate();
 
-  /**
-   * Handles all steps completion.
-   * @param flag - Flag indicating if all steps are completed.
-   */
   const handleAllStepsComplete = (flag = false) => {
     handleOnAllStepsComplete(flag);
   };
 
-  /**
-   * Updates the destination stack data.
-   */
+  // const handleOnClick = async (event: MouseEvent) => {
+  //   event?.preventDefault();
+  //   //Update Data in backend
+  //   await updateDestinationStack(selectedOrganisation?.value, projectId, {
+  //     stack_api_key: newMigrationData?.destination_stack?.selectedStack?.value
+  //   });
+  //   handleStepChange(2);
+  //   const res = await updateCurrentStepData(selectedOrganisation?.value, projectId);
+  //   if (res) {
+  //     const url = `/projects/${projectId}/migration/steps/3`;
+  //     navigate(url, { replace: true });
+  //   }
+  // };
+
   const updateDestinationStackData = async () => {
-    // Update New Migration data
+    //Update New Migration data
 
     const selectedOrganisationData = validateArray(organisationsList)
       ? organisationsList?.find((org: IDropDown) => org?.value === org_id)
@@ -122,19 +85,20 @@ const DestinationStackComponent = ({
       label: '',
       master_locale: '',
       locales: [],
-      created_at: '',
+      created_at: ''
     };
 
-    // If stack is already selected and exist in backend, then fetch all stack list and filter selected stack.
+    //If stack is already selected and exist in backend, then fetch all stack list and filter selected stack.
     if (!isEmptyString(destination_stack)) {
       const stackData: any = await getAllStacksInOrg(
-        selectedOrganisationData?.value || selectedOrganisation?.value,
-        ''
+        selectedOrganisationData?.value || selectedOrganisation?.value,''
       );
 
       const stack =
         validateArray(stackData?.data?.stacks) &&
-        stackData?.data?.stacks?.find((stack: StackResponse) => stack?.api_key === destination_stack);
+        stackData?.data?.stacks?.find(
+          (stack: StackResponse) => stack?.api_key === destination_stack
+        );
 
       if (stack) {
         selectedStackData = {
@@ -142,45 +106,45 @@ const DestinationStackComponent = ({
           value: stack?.api_key,
           master_locale: stack?.master_locale,
           locales: stack?.locales,
-          created_at: stack?.created_at,
+          created_at: stack?.created_at
         };
       }
     }
 
-    // Make First Step Complete
+    //Make First Step Complete
     if (!isEmptyString(selectedOrganisationData?.value)) {
       setInternalActiveStepIndex(0);
     }
 
-    // Complete step if all step are selected.
+    //Complete step if all step are selected.
     if (
       !isEmptyString(selectedOrganisationData?.value) &&
       !isEmptyString(selectedStackData?.value)
     ) {
       setInternalActiveStepIndex(1);
+      // setIsCompleted(true);
     }
 
-    // Update newMigration Data for destination stack
+    //Update newMigration Data for destination stack
     const newMigData: IDestinationStack = {
       ...newMigrationData?.destination_stack,
       selectedOrg: selectedOrganisationData || selectedOrganisation,
-      selectedStack: selectedStackData,
+      selectedStack: selectedStackData
     };
 
     dispatch(updateNewMigrationData({ destination_stack: newMigData }));
   };
 
   /********** ALL USEEFFECT HERE *************/
-
   useEffect(() => {
-    /**
-     * Fetches the CMS data and updates the component state.
-     */
     const fetchCMSData = async () => {
-      // Check if offline CMS data field is set to true, if then read data from cms data file.
+      //check if offline CMS data field is set to true, if then read data from cms data file.
       const data = await getCMSDataFromFile(CS_ENTRIES?.DESTINATION_STACK);
 
-      // Check for null
+      //fetch Legacy CMS Component Data from Contentstack CMS
+      //const data = await getEntries({ contentType: CS_ENTRIES.DESTINATION_STACK })
+
+      //Check for null
       if (!data) {
         dispatch(updateMigrationData({ destinationStackData: DEFAULT_DESTINATION_STACK_DATA }));
         setIsLoading(false);
@@ -189,18 +153,19 @@ const DestinationStackComponent = ({
 
       const destinationStackDataMapped: IDestinationStackComponent = {
         ...data,
-        all_steps: getDestinationStackSteps(isCompleted, isMigrationLocked, data?.all_steps),
+        all_steps: getDestinationStackSteps(isCompleted, isMigrationLocked, data?.all_steps)
       };
 
+      //updateDestinationStackData();
+
       dispatch(updateMigrationData({ destinationStackData: destinationStackDataMapped }));
 
       setIsLoading(false);
 
-      // Check for migration Status and lock.
+      //Check for migration Status and lock.
       // Status where Migration is to be Locked:
       setIsMigrationLocked(projectData?.status === 2 || projectData?.status === 5);
     };
-
     fetchCMSData();
   }, []);
 
@@ -228,11 +193,7 @@ const DestinationStackComponent = ({
         );
       }
     }
-  }, [internalActiveStepIndex]);
-
-  /**
-   * Renders the DestinationStackComponent.
-   */
+  }, [internalActiveStepIndex]); 
   return (
     <>
       {isLoading ? (
@@ -243,7 +204,7 @@ const DestinationStackComponent = ({
         </div>
       ) : (
         <div className="destination-stack-container">
-          <div className="stackTitle">{migrationData?.destinationStackData?.title}</div>
+          <div className='stackTitle'>{migrationData?.destinationStackData?.title}</div>
           <AutoVerticalStepper
             key={stepperKey}
             steps={getDestinationStackSteps(
diff --git a/ui/src/components/ErrorBoundary/index.tsx b/ui/src/components/ErrorBoundary/index.tsx
index 92c29bb9..fe541dca 100644
--- a/ui/src/components/ErrorBoundary/index.tsx
+++ b/ui/src/components/ErrorBoundary/index.tsx
@@ -10,9 +10,6 @@ interface State {
   hasError: boolean;
 }
 
-/**
- * ErrorBoundary component that catches and handles errors thrown by its children.
- */
 class ErrorBoundary extends Component<Props, State> {
   public state: State = {
     hasError: false
diff --git a/ui/src/components/ImageTag/index.tsx b/ui/src/components/ImageTag/index.tsx
index 8ee40846..75854d97 100644
--- a/ui/src/components/ImageTag/index.tsx
+++ b/ui/src/components/ImageTag/index.tsx
@@ -8,16 +8,6 @@ interface ImageType {
   noWebP?: boolean;
 }
 
-/**
- * Renders an image tag with optional webP format support.
- *
- * @param classes - The CSS classes to apply to the image tag.
- * @param image - The image object containing the URL and title.
- * @param imageUrl - The URL of the image.
- * @param alt - The alternative text for the image.
- * @param noWebP - A flag indicating whether to disable webP format.
- * @returns The rendered image tag.
- */
 const ImageTag = ({ classes, image, imageUrl, alt = '', noWebP = false }: ImageType) => {
   let imageLink = image?.url ? image.url : imageUrl;
   const altText = alt ? alt : image?.title;
@@ -27,5 +17,4 @@ const ImageTag = ({ classes, image, imageUrl, alt = '', noWebP = false }: ImageT
   }
   return <img loading="lazy" decoding="async" className={classes} src={imageLink} alt={altText} />;
 };
-
 export default ImageTag;
diff --git a/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx b/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
index 2d6d06be..78b6091d 100644
--- a/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx
@@ -27,14 +27,8 @@ interface LoadFileFormatProps {
   handleStepChange: (stepIndex: number, closeStep?: boolean) => void;
 }
 
-/**
- * Component for loading file format.
- * @param {LoadFileFormatProps} props - The component props.
- * @returns {JSX.Element} The rendered component.
- */
 const LoadFileFormat = (props: LoadFileFormatProps) => {
 
-  // State variables
   const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
   const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation); 
   const migrationData = useSelector((state:RootState)=>state?.migration?.migrationData);
@@ -49,9 +43,99 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
   const [fileIcon, setFileIcon]  = useState(newMigrationData?.legacy_cms?.selectedFileFormat?.title);
   const [isError, setIsError] = useState<boolean>(false);
   const [error, setError] = useState<string>('');
+  
+  const { projectId = '' } = useParams();
 
-  // Other code...
 
+  /****  ALL METHODS HERE  ****/
+
+  const handleBtnClick = async () => {
+    
+    if (!isEmptyString(selectedCard?.fileformat_id) && isCheckedBoxChecked) {
+      dispatch(updateNewMigrationData({
+        ...newMigrationData,
+        legacy_cms: {
+          ...newMigrationData?.legacy_cms,
+          isFileFormatCheckboxChecked: isCheckedBoxChecked
+        }
+      }));
+      await fileformatConfirmation(selectedOrganisation?.value, projectId, {
+        fileformat_confirmation: true
+      });
+
+      //call for Step Change
+      props.handleStepChange(props?.currentStep);
+    }
+  };
+
+  // Toggles checkbox selection
+  const handleCheckBoxChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { checked } = e.target;
+    setIsCheckedBoxChecked(checked);
+  };
+
+  const getFileExtension = (filePath: string): string => {
+    const ext = filePath.split('.').pop();
+    return ext ? `${ext}` : 'zip';
+  };
+
+  const handleFileFormat = async() =>{
+    const apiRes: any = await getConfig();
+    const cmsType = !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent) ? newMigrationData?.legacy_cms?.selectedCms?.parent : apiRes?.data?.cmsType?.toLowerCase();
+    const filePath = apiRes?.data?.localPath?.toLowerCase();
+    const fileFormat =  getFileExtension(filePath);
+    if(! isEmptyString(selectedCard?.fileformat_id)){
+      setFileIcon(selectedCard?.title);
+    }
+    else{
+      const { all_cms = [] } = migrationData?.legacyCMSData || {}; 
+    let filteredCmsData:any = all_cms;
+    if (cmsType) {
+      filteredCmsData = all_cms?.filter((cms: any) => cms?.parent?.toLowerCase() === cmsType?.toLowerCase());
+    }
+ 
+    const isFormatValid = filteredCmsData[0]?.allowed_file_formats?.find((format:any)=>{ 
+      const isValid = format?.fileformat_id?.toLowerCase() === fileFormat?.toLowerCase();    
+      return isValid;
+    });
+ 
+    if(! isFormatValid){
+      setIsError(true);
+      setError('File format does not support, please add the correct file format.');
+    }
+  
+    const selectedFileFormatObj = {
+      description: "",
+      fileformat_id: fileFormat,
+      group_name: fileFormat,
+      isactive: true,
+      title: fileFormat === 'zip' ? fileFormat?.charAt(0)?.toUpperCase() + fileFormat?.slice(1) : fileFormat?.toUpperCase()
+    }
+    
+    
+    const newMigrationDataObj = {
+      ...newMigrationData,
+      legacy_cms: {
+        ...newMigrationData?.legacy_cms,
+        selectedFileFormat: selectedFileFormatObj
+      }
+    };
+    
+    setFileIcon(fileFormat === 'zip' ? fileFormat?.charAt(0).toUpperCase() + fileFormat.slice(1) : fileFormat?.toUpperCase());
+    dispatch(updateNewMigrationData(newMigrationDataObj));
+
+    }
+    
+    
+  }
+  
+  /****  ALL USEEffects  HERE  ****/
+  useEffect(()=>{
+    handleFileFormat();
+    handleBtnClick();
+  },[]);
+
+  
   return (
     <div className="p-3">
         <div className="col-12">
diff --git a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx b/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx
index b5d0cd4c..af7c68a3 100644
--- a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx
@@ -29,12 +29,6 @@ interface LoadSelectCmsProps {
   handleStepChange: (stepIndex: number, closeStep?: boolean) => void;
 }
 
-/**
- * Component for loading and handling the prefix in the Legacy CMS.
- * @param {LoadSelectCmsProps} props - The component props.
- * @returns {JSX.Element} The rendered component.
- */
-
 const LoadPreFix = (props: LoadSelectCmsProps) => {
   /****  ALL HOOKS HERE  ****/
   const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
diff --git a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
index 960ead8d..3c9ea52d 100644
--- a/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadSelectCms.tsx
@@ -33,13 +33,6 @@ interface LoadSelectCmsProps {
   handleStepChange: (stepIndex: number, closeStep?: boolean) => void;
 }
 
-/**
- * Component for loading and selecting CMS data.
- *
- * @component
- * @param {LoadSelectCmsProps} props - The component props.
- * @returns {JSX.Element} The rendered component.
- */
 const LoadSelectCms = (props: LoadSelectCmsProps) => {
   /****  ALL HOOKS HERE  ****/
   const migrationData = useSelector((state:RootState)=>state?.migration?.migrationData);
diff --git a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
index aa3c62d8..ba112b78 100644
--- a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
@@ -21,11 +21,6 @@ interface Props {
   fileDetails: FileDetails;
 }
 
-/**
- * Renders the file component based on the file details.
- * @param {Props} fileDetails - The file details object.
- * @returns {JSX.Element} The rendered file component.
- */
 const FileComponent = ({fileDetails}:Props ) => { 
   
   return (
@@ -46,32 +41,15 @@ const FileComponent = ({fileDetails}:Props ) => {
   );
 };
 
-/**
- * Saves the state to the local storage.
- * @param state - The state object to be saved.
- * @param projectId - The ID of the project.
- */
-const saveStateToLocalStorage = (state: any, projectId: string) => {
+const saveStateToLocalStorage = (state:any, projectId : string) => {
   sessionStorage.setItem(`uploadProgressState_${projectId}`, JSON.stringify(state));
 };
 
-/**
- * Retrieves the upload progress state from the session storage for a specific project.
- * @param projectId - The ID of the project.
- * @returns The upload progress state if found, otherwise null.
- */
-const getStateFromLocalStorage = (projectId: string) => {
+const getStateFromLocalStorage = (projectId : string) => {
   const state = sessionStorage.getItem(`uploadProgressState_${projectId}`);
   return state ? JSON.parse(state) : null;
 };
 
-/**
- * Component for loading and uploading a file.
- *
- * @component
- * @param {LoadUploadFileProps} props - The component props.
- * @returns {JSX.Element} The rendered component.
- */
 const LoadUploadFile = (props: LoadUploadFileProps) => {
   /****  ALL HOOKS HERE  ****/
   
diff --git a/ui/src/components/LegacyCms/StepperSteps.ts b/ui/src/components/LegacyCms/StepperSteps.ts
index 0dd02b51..423bc0ce 100644
--- a/ui/src/components/LegacyCms/StepperSteps.ts
+++ b/ui/src/components/LegacyCms/StepperSteps.ts
@@ -10,14 +10,6 @@ import UploadFileSummary from './Summary/UploadFileSummary';
 import LoadPreFix from './Actions/LoadPrefix';
 import PreFixSummary from './Summary/PreFixSummary';
 
-/**
- * Returns an updated step object based on the provided parameters.
- *
- * @param step - The original step object.
- * @param isCompleted - A boolean indicating whether the step is completed.
- * @param isMigrationLocked - A boolean indicating whether the migration is locked.
- * @returns The updated step object.
- */
 const getComponentObject = (
   step: IStep,
   isCompleted: boolean,
@@ -78,14 +70,6 @@ const getComponentObject = (
   return updatedStep;
 };
 
-/**
- * Retrieves the legacy CMS steps based on the provided parameters.
- *
- * @param isCompleted - A boolean indicating whether the steps are completed.
- * @param isMigrationLocked - A boolean indicating whether the migration is locked.
- * @param allSteps - An array of IStep objects representing all the steps.
- * @returns An array of component objects representing the legacy CMS steps.
- */
 export const getLegacyCMSSteps = (
   isCompleted: boolean,
   isMigrationLocked: boolean,
diff --git a/ui/src/components/LegacyCms/Summary/FileFormatSummary.tsx b/ui/src/components/LegacyCms/Summary/FileFormatSummary.tsx
index 3e63a1e4..fe7311c2 100644
--- a/ui/src/components/LegacyCms/Summary/FileFormatSummary.tsx
+++ b/ui/src/components/LegacyCms/Summary/FileFormatSummary.tsx
@@ -14,12 +14,6 @@ interface FileFormatSummaryProps {
   stepData: IStep;
 }
 
-/**
- * Renders the file format summary component.
- *
- * @param {FileFormatSummaryProps} props - The component props.
- * @returns {JSX.Element} The file format summary component.
- */
 const FileFormatSummary = ({ stepData }: FileFormatSummaryProps): JSX.Element => {
 
   const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
diff --git a/ui/src/components/LegacyCms/Summary/PreFixSummary.tsx b/ui/src/components/LegacyCms/Summary/PreFixSummary.tsx
index 1d8da297..de15eebe 100644
--- a/ui/src/components/LegacyCms/Summary/PreFixSummary.tsx
+++ b/ui/src/components/LegacyCms/Summary/PreFixSummary.tsx
@@ -13,12 +13,6 @@ interface PreFixSummaryProps {
   stepData: IStep;
 }
 
-/**
- * Renders the PreFixSummary component.
- *
- * @param {PreFixSummaryProps} props - The component props.
- * @returns {JSX.Element} The rendered PreFixSummary component.
- */
 const PreFixSummary = (props: PreFixSummaryProps): JSX.Element => {
   
   const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
diff --git a/ui/src/components/LegacyCms/Summary/SelectCmsSummary.tsx b/ui/src/components/LegacyCms/Summary/SelectCmsSummary.tsx
index bbb0dcc7..9d8d4beb 100644
--- a/ui/src/components/LegacyCms/Summary/SelectCmsSummary.tsx
+++ b/ui/src/components/LegacyCms/Summary/SelectCmsSummary.tsx
@@ -12,12 +12,6 @@ interface SelectCmsSummaryProps {
   stepData: IStep;
 }
 
-/**
- * Renders the summary component for selecting CMS.
- *
- * @param {SelectCmsSummaryProps} props - The component props.
- * @returns {JSX.Element} The rendered component.
- */
 const SelectCmsSummary = (props: SelectCmsSummaryProps): JSX.Element => {
 
   const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
diff --git a/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx b/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx
index ff1f63ec..11a16035 100644
--- a/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx
+++ b/ui/src/components/LegacyCms/Summary/UploadFileSummary.tsx
@@ -18,13 +18,6 @@ interface Props {
   fileDetails: FileDetails;
 }
 
-/**
- * Renders the file component based on the provided file details.
- *
- * @param {Props} props - The component props.
- * @param {FileDetails} props.fileDetails - The details of the file.
- * @returns {React.ReactElement} The rendered file component.
- */
 export const FileComponent: React.FC<Props> = ({ fileDetails }) => {
 
   return (
@@ -45,20 +38,13 @@ export const FileComponent: React.FC<Props> = ({ fileDetails }) => {
   );
 };
 
-/**
- * Renders the summary component for uploading a file.
- *
- * @param {UploadFileSummaryProps} props - The component props.
- * @returns {JSX.Element} The rendered component.
- */
 const UploadFileSummary = ({
   stepComponentProps,
   stepData
 }: UploadFileSummaryProps): JSX.Element => {
 
   const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);
-  const [isLoading, setIsLoading] = useState(false);
-
+ const [isLoading, setIsLoading] = useState(false);
   return (
     <div className="row bg-white">
       {!isEmptyString(newMigrationData?.legacy_cms?.uploadedFile?.name) ? (
diff --git a/ui/src/components/LegacyCms/Summary/summary.scss b/ui/src/components/LegacyCms/Summary/summary.scss
index eccce6ad..bb9cb6e9 100644
--- a/ui/src/components/LegacyCms/Summary/summary.scss
+++ b/ui/src/components/LegacyCms/Summary/summary.scss
@@ -1,7 +1,4 @@
 @import '../../../scss/variables';
-/**
- * Styles for the summary title.
- */
 .summary-title {
   //font-family: $font-family-primary;
   font-style: normal;
@@ -13,61 +10,30 @@
   margin-top: 3px;
 }
 
-/**
- * Styles for the disabled checkbox label.
- */
 .Checkbox input:disabled ~ .Checkbox__label {
   opacity: 1;
 }
-
-/**
- * Styles for the checked checkbox.
- */
 .Checkbox.Checkbox--state-checked {
   display: flex;
 }
-
-/**
- * Styles for the checkbox tick SVG.
- */
 .Checkbox .Checkbox__tick svg {
   display: block;
 }
-
-/**
- * Styles for the checked and disabled checkbox.
- */
 .Checkbox.Checkbox--state-checked.Checkbox--state-disabled {
   color: #212121;
   opacity: 1;
 }
-
-/**
- * Styles for the checkbox wrapper.
- */
 .Checkbox-wrapper .Checkbox {
   display: flex;
 }
-
-/**
- * Styles for the checkbox label within the checkbox wrapper.
- */
 .Checkbox-wrapper .Checkbox .Checkbox__label {
   margin-top: -2px;
 }
-
-/**
- * Styles for the disabled and checked checkbox label.
- */
 .Checkbox input:disabled:checked ~ .Checkbox__label,
 .Checkbox input:disabled:indeterminate ~ .Checkbox__label {
   color: #212121;
   opacity: 1;
 }
-
-/**
- * Styles for the affix container.
- */
 .affix-container {
   display: flex;
   background-color: $color-base-white-5;
diff --git a/ui/src/components/LegacyCms/index.tsx b/ui/src/components/LegacyCms/index.tsx
index af8e1cb5..bea44d7f 100644
--- a/ui/src/components/LegacyCms/index.tsx
+++ b/ui/src/components/LegacyCms/index.tsx
@@ -33,15 +33,6 @@ type LegacyCMSComponentProps = {
   handleOnAllStepsComplete:(flag : boolean)=>void;
 };
 
-/**
- * Represents the LegacyCMSComponent.
- * @param legacyCMSData - The legacy CMS data.
- * @param projectData - The project data.
- * @param isCompleted - Indicates if the migration is completed.
- * @param handleOnAllStepsComplete - The callback function for handling all steps completion.
- * @param ref - The ref object.
- * @returns The LegacyCMSComponent.
- */
 const LegacyCMSComponent = forwardRef(({ legacyCMSData, projectData, isCompleted, handleOnAllStepsComplete, }: LegacyCMSComponentProps, ref) => {
   //react-redux apis
   const migrationData = useSelector((state:RootState)=>state?.migration?.migrationData);
diff --git a/ui/src/components/LegacyCms/legacyCms.scss b/ui/src/components/LegacyCms/legacyCms.scss
index f01ece1e..647dfcd0 100644
--- a/ui/src/components/LegacyCms/legacyCms.scss
+++ b/ui/src/components/LegacyCms/legacyCms.scss
@@ -1,8 +1,4 @@
 @import '../../scss/variables';
-/**
- * Styles for the legacy CMS component.
- */
-
 .service_list_legacy {
   text-align: center;
   display: flex;
@@ -11,105 +7,67 @@
   margin: 20px 20px ;
 }
 
-/**
- * Adds left padding of 40 pixels.
- */
 .pl-40 {
   padding-left: $px-40;
 }
 
-/**
- * Centers the element vertically.
- */
 .center-align {
   margin-top: calc(100vh - 65%);
 }
 
-/**
- * Styles for a small circular loader.
- */
 .CircularLoader--size-small {
   width: $px-80 !important;
   height: $px-80 !important;
 }
 
-/**
- * Styles for a circular loader.
- */
 .CircularLoader {
   display: inline-block !important;
   border-top: $px-5 solid $color-brand-primary-base !important;
 }
-
-/**
- * Styles for the legacy CMS container.
- */
 .legacy-cms-container {
+
   padding-left: 25px !important;
   padding-top: 26px;
   padding-right: 30px;
+
   overflow-y: auto;
   overflow-x: hidden;
   max-height: 70vh;
   background-color: $color-base-white-10;
+  
 }
 
-/**
- * Styles for the search section in the legacy CMS.
- */
 .service_list_search {
   display: flex;
   margin: $space-15;
 }
 
-/**
- * Styles for the search bar in the legacy CMS.
- */
 .service_list_search_bar {
   flex: 15;
   margin-right: $px-15;
   height: $px-35;
 }
 
-/**
- * Styles for the search input in the search bar.
- */
 .service_list_search_bar .Search-input-show {
   width: 100%;
 }
 
-/**
- * Styles for the search button in the legacy CMS.
- */
 .service_list_search_button {
   flex: 1;
 }
 
-/**
- * Styles for the filter modal in the search button.
- */
 .service_list_search_button .Filter__modal {
   right: $px-15;
 }
 
-/**
- * Styles for the filter wrapper in the search button.
- */
 .service_list_search_button .Filter__wrapper {
   position: absolute;
 }
 
-/**
- * Styles for the filter icon in the search button.
- */
 .service_list_search_button .Filter__icon {
   min-height: $px-40;
   top: -8px;
 }
-
-/**
- * Styles for the validation container.
- */
 .validation-container {
   display: flex;
   flex-direction: column;
@@ -120,20 +78,13 @@
   margin-left: 20px !important;
   border: 1px solid $color-brand-secondary-lightest;
   border-radius: var(--TermCount, 5px);
+  
 }
-
-/**
- * Styles for the elements inside the validation container.
- */
 .validation-container > * {
   margin-right: 10px;
   margin-left: 15px;
 }
-
-/**
- * Styles for the error container.
- */
-.error-container {
+.error-container{
   display: flex;
   background-color: $color-base-white-5;
   height: 72px;
@@ -144,50 +95,27 @@
   border: 1px solid $color-brand-fail-base;
   border-radius: var(--TermCount, 5px);
 }
-
-/**
- * Styles for the elements inside the error container.
- */
 .error-container > * {
   margin-left: 10px;
   margin-top: 5px;
 }
 
-/**
- * Styles for the error message.
- */
 .errorMessage {
   color: $color-brand-warning-medium;
   font-size: 12px;
 }
-
-/**
- * Styles for the validation call-to-action.
- */
-.validation-cta {
+.validation-cta{
   margin: $space-24 $space-20 0;
   line-height: 24px;
 }
-
-/**
- * Styles for the success message.
- */
-.success {
+.success{
   color: $color-brand-success-base;
   margin-top: 5px;
 }
-
-/**
- * Styles for the error message.
- */
-.error {
+.error{
   color: $color-brand-fail-base;
 }
-
-/**
- * Styles for the link description.
- */
-.link-discription {
+.link-discription{
   font-family: $font-family-primary;
   font-style: normal;
   font-weight: $font-weight-regular;
@@ -197,41 +125,27 @@
   margin-bottom: $space-10;
   margin-top: $space-10;
 }
-
-/**
- * Styles for the bar container.
- */
-.bar-container { 
+.bar-container{ 
   height: 10px;
   width: 592px;
   align-items: center;
   margin-left: 20px !important;
   margin-top: 10px;
 }
-
-/**
- * Styles for the file icon group.
- */
-.file-icon-group {
-  display: flex;
+.file-icon-group{
+  display:flex;
   flex-direction: row;
   gap: 30px;
 }
-
-/**
- * Styles for the loader.
- */
-.loader {
+.loader{
   margin-left: 20px;
-  .CircularLoader--size-small {
+  .CircularLoader--size-small{
     width: 2rem !important;
     height: 2rem !important;
   }
+  
 }
 
-/**
- * Styles for the processing test.
- */
-.processing-test {
+.processing-test{
   margin-top: 5px;
 }
\ No newline at end of file
diff --git a/ui/src/components/LogScreen/index.scss b/ui/src/components/LogScreen/index.scss
index 8efb6746..479c674b 100644
--- a/ui/src/components/LogScreen/index.scss
+++ b/ui/src/components/LogScreen/index.scss
@@ -1,7 +1,4 @@
 @import '../../scss/variables';
-/**
- * Styles for the LogScreen component.
- */
 
 .logs-container {
   font-family: Arial, sans-serif;
@@ -11,13 +8,8 @@
   margin: 0 $px-24 $px-24;
   position: relative;
 }
-
 .logs-wrapper {
   position: relative;
-  
-  /**
-   * Styles for the action items within the LogScreen component.
-   */
   .action-items {
     position: absolute;
     right: 48px;
@@ -25,16 +17,13 @@
   }
 }
 
-/**
- * Styles for each log entry within the LogScreen component.
- */
+
 .log-entry {
   align-items: center;
   background-color: $color-base-white-10;
   display: flex;
   padding: 5px 0;
   position: relative;
-  
   &::before {
     background-color: $color-base-white-5;
     border-right: 1px solid $color-brand-secondary-lightest;
@@ -47,33 +36,30 @@
     width: 50px;
   }
   
-  /**
-   * Styles for the log number within each log entry.
-   */
-  .log-number {
-    text-align: center;
-    min-width: 50px;
-    color: $color-font-active;
-    position: relative;
-  }
-  
-  /**
-   * Styles for the log time within each log entry.
-   */
-  .log-time {
-    color: $color-font-active;
+  .log-number, .log-time, .log-message {
     font-family: "IBM Plex Mono", monospace;
     font-size: $size-font-medium;
     font-weight: $font-weight-medium;
-    padding: 0 $px-16;
-  }
-  
-  /**
-   * Styles for the log message within each log entry.
-   */
-  .log-message {
-    color: $color-black-222;
-    flex-grow: 1;
-    padding: 0 $px-16;
   }
 }
+
+.log-number {
+  text-align: center;
+  min-width: 50px;
+  color: $color-font-active;
+  position: relative;
+}
+
+.log-time {
+  color: $color-font-active;
+  font-family: "IBM Plex Mono", monospace;
+  font-size: $size-font-medium;
+  font-weight: $font-weight-medium;
+  padding: 0 $px-16;
+}
+
+.log-message {
+  color: $color-black-222;
+  flex-grow: 1;
+  padding: 0 $px-16;
+}
diff --git a/ui/src/components/LogScreen/index.tsx b/ui/src/components/LogScreen/index.tsx
index ad0dbae5..81a60160 100644
--- a/ui/src/components/LogScreen/index.tsx
+++ b/ui/src/components/LogScreen/index.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Icon } from '@contentstack/venus-components';
 import io from 'socket.io-client';
 
@@ -17,127 +17,61 @@ type LogsType = {
   serverPath: string;
 }
 
-/**
- * LogViewer component displays logs received from the server.
- * @param {string} serverPath - The path of the server to connect to.
- */
-const LogViewer = ({ serverPath }: LogsType) => {
+const LogViewer = ({serverPath}: LogsType) => {
   const [logs, setLogs] = useState(["Loading logs..."]);
 
   useEffect(() => {
     const socket = io(serverPath || ''); // Connect to the server
-
-    /**
-     * Event listener for 'logUpdate' event.
-     * @param {string} newLogs - The new logs received from the server.
-     */
     socket.on('logUpdate', (newLogs: string) => {
-      // console.log("new logs", newLogs);
+      console.log("new logs", newLogs);
+      
       const logArray = newLogs.split('\n');
-      // console.log(logArray);
+      console.log(logArray);
       setLogs(logArray);
-    });
 
+    });
+  
     return () => {
       socket.disconnect(); // Cleanup on component unmount
     };
   }, []);
+  
+  //SCROLL LISTENER
+  useEffect(() => {
+    window.addEventListener("scroll", handleScrollToTop);
+  });
 
-  /**
-   * Scrolls to the top of the logs container.
-   */
+  const refScrollUp = useRef<HTMLDivElement>(null);
   const handleScrollToTop = () => {
-    const logsContainer = document.querySelector('.logs-container');
-    if (logsContainer) {
-      logsContainer.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
-    }
-  }
-
-  /**
-   * Scrolls to the bottom of the logs container.
-   */
-  const handleScrollToBottom = () => {
-    const logsContainer = document.querySelector('.logs-container');
-    if (logsContainer) {
-      logsContainer.scrollTo({
-        top: logsContainer.scrollHeight,
-        behavior: 'smooth',
-      });
-    }
+    console.log("=============", refScrollUp, refScrollUp?.current);
+    
+    refScrollUp?.current?.scrollIntoView({ behavior: "smooth" });
   }
-
-  /**
-   * Copies the logs to the clipboard.
-   */
-  const handleCopyLogs = () => {
-    const logsContainer = document.querySelector('.logs-container');
-    if (logsContainer) {
-      const range = document.createRange();
-      range.selectNode(logsContainer);
-      window.getSelection()?.removeAllRanges();
-      window.getSelection()?.addRange(range);
-      navigator.clipboard.writeText(logsContainer.textContent || '');
-      window.getSelection()?.removeAllRanges();
-    }
-  }
-
-  const [zoomLevel, setZoomLevel] = useState(1);
-
-  /**
-   * Zooms in the logs container.
-   */
-  const handleZoomIn = () => {
-    const logsContainer = document.querySelector('.logs-magnify') as HTMLElement;
-    if (logsContainer) {
-      setZoomLevel(prevZoomLevel => prevZoomLevel + 0.1);
-      logsContainer.style.transform = `scale(${zoomLevel})`;
-    }
-  };
-
-  /**
-   * Zooms out the logs container.
-   */
-  const handleZoomOut = () => {
-    const logsContainer = document.querySelector('.logs-magnify') as HTMLElement;
-    if (logsContainer) {
-      setZoomLevel(prevZoomLevel => prevZoomLevel - 0.1);
-      logsContainer.style.transform = `scale(${zoomLevel})`;
-    }
-  };
-
   return (
     <div className='logs-wrapper'>
       <div className="logs-container" style={{ height: '400px', overflowY: 'auto' }}>
-        <div className="logs-magnify">
-          {logs?.map((log, index) => {
-            // console.log(log);
-            try {
-              const logObject = JSON.parse(log);
-              const level = logObject.level;
-              const timestamp = logObject.timestamp;
-              const message = logObject.message;
-              return (
-                <div key={index} style={logStyles[level] || logStyles.info} className="log-entry">
-                  <div className="log-number">{index}</div>
-                  <div className="log-time">{new Date(timestamp).toTimeString().split(' ')[0]}</div>
-                  <div className="log-message">{message}</div>
-                </div>
-              );
-            } catch (error) {
-              console.error('Invalid JSON string', error);
-            }
-          })}
-        </div>
+        {logs?.map((log, index) => {
+          console.log(log);
+          try {
+            const logObject = JSON.parse(log);
+            const level = logObject.level;
+            const timestamp = logObject.timestamp;
+            const message = logObject.message;
+            return (
+              <div key={index} style={logStyles[level] || logStyles.info} className="log-entry" ref={index === 0 ? refScrollUp : null}>
+                <div className="log-number">{index}</div>
+                <div className="log-time">{new Date(timestamp).toTimeString().split(' ')[0]}</div>
+                <div className="log-message">{message}</div>
+              </div>
+            );
+          } catch (error) {
+            console.error('Invalid JSON string', error);
+          }
+        })}
+        
       </div>
       <div className='action-items'>
         <Icon icon="ArrowUp" version='v2' onClick={handleScrollToTop} />
-        <Icon icon="ArrowDown" version='v2' onClick={handleScrollToBottom} />
-        <Icon icon="Search" version='v2' onClick={handleZoomIn} />
-        <Icon icon="ZoomOut" version='v2' onClick={handleZoomOut} />
-        <Icon icon="File" version='v2' onClick={handleCopyLogs} />
       </div>
     </div>
   );
diff --git a/ui/src/components/MainHeader/index.scss b/ui/src/components/MainHeader/index.scss
index cc0cef2a..14a769e9 100644
--- a/ui/src/components/MainHeader/index.scss
+++ b/ui/src/components/MainHeader/index.scss
@@ -1,16 +1,5 @@
 @import '../../scss/variables';
 
-/**
- * 
- * This SCSS file contains styles for the MainHeader component.
- * The MainHeader component is a fixed header that appears at the top of the page.
- * It includes a logo, organization wrapper, and dropdown menu.
- * 
- * The styles in this file define the layout, colors, and behavior of the MainHeader component.
- * It also includes styles for the dropdown menu items and the logo.
- * 
- * The MainHeader component is used in the UI of the application to provide a consistent header across pages.
- */
 .mainheader {
   [class*="Profile_card"] {
     [class*="Dropdown__menu__list"] {
diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx
index d6d728ea..f1391406 100644
--- a/ui/src/components/MainHeader/index.tsx
+++ b/ui/src/components/MainHeader/index.tsx
@@ -33,46 +33,36 @@ import NotificationModal from '../Common/NotificationModal';
 // Styles
 import './index.scss';
 
-/**
- * MainHeader component displays the main header of the application.
- * It includes user information, organization selection, and logo.
- */
 const MainHeader = () => {
-  // Selecting data from the Redux store
-  const user = useSelector((state: RootState) => state?.authentication?.user);
-  const organisationsList = useSelector((state: RootState) => state?.authentication?.organisationsList);
-  const selectedOrganisation = useSelector((state: RootState) => state?.authentication?.selectedOrganisation);
-  const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
+  const user = useSelector((state:RootState)=>state?.authentication?.user);
+  const organisationsList = useSelector((state:RootState)=>state?.authentication?.organisationsList);
+  const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation);
+  const newMigrationData = useSelector((state:RootState)=> state?.migration?.newMigrationData);
 
-  // State variables
   const [data, setData] = useState<MainHeaderType>({});
   const [orgsList, setOrgsList] = useState<IDropDown[]>([]);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+
   const location = useLocation();
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
   const { logo, organization_label: organizationLabel } = data;
 
-  // Generating user initials
   const name = `${user?.first_name?.charAt(0)}${user?.last_name?.charAt(0)}`.toUpperCase() ?? '';
-
-  /**
-   * Updates the organization list state.
-   * Sets the selected organization as default and updates the organization in local storage.
-   */
+   
   const updateOrganisationListState = () => {
     if (organisationsList) {
-      // Set selected org as default
+      //set selected org as default
       const list = organisationsList.map((org: IDropDown) => ({
         ...org,
         default: org?.value === selectedOrganisation?.value
       }));
-
+  
       setOrgsList(list);
-
-      // Set organization in local storage, first check if selectedOrg.value exists, if not get org id from local storage and set.
+  
+      //Set organization in local storage, first check if selectedOrg.value exists, if not get org id from local storage and set.
       setDataInLocalStorage(
         'organization',
         selectedOrganisation?.value || getDataFromLocalStorage('organization')
@@ -80,12 +70,8 @@ const MainHeader = () => {
     }
   };
 
-  /**
-   * Fetches data for the main header.
-   * Reads data from CMS data file if the offline CMS data field is set to true.
-   */
   const fetchData = async () => {
-    // Check if offline CMS data field is set to true, if so, read data from CMS data file.
+    //check if offline CMS data field is set to true, if then read data from cms data file.
     getCMSDataFromFile(CS_ENTRIES.MAIN_HEADER)
       .then((data) => setData(data))
       .catch((err) => {
@@ -101,12 +87,7 @@ const MainHeader = () => {
   useEffect(() => {
     updateOrganisationListState();
   }, [selectedOrganisation]);
-
-  /**
-   * Handles the dropdown change event.
-   * Dispatches the selected organization and updates the organization in local storage.
-   * @param data - The selected dropdown item.
-   */
+  
   const handleOnDropDownChange = (data: IDropDown) => {
     if (data.value === selectedOrganisation.value) return;
 
@@ -171,24 +152,22 @@ const MainHeader = () => {
       navigate(`/projects`, { replace: true });
     }
   };
-
   return (
     <div className="mainheader">
-      <div className="d-flex align-items-center" onClick={handleonClick}>
-        {logo?.image?.url ? (
-          <div className="logo">
-            <Tooltip position="right" content="Projects" wrapperElementType="div">
-              {/* <Link to={`${logo?.url}`}> */}
-              <img src={logo?.image?.url} width={32} alt="Contentstack" />
-              {/* </Link> */}
-            </Tooltip>
-          </div>
-        ) : (
-          ''
-        )}
-
-        {location.pathname === '/projects' && (
-          <div className="organisationWrapper">
+          <div className="d-flex align-items-center" onClick={handleonClick}>
+            {logo?.image?.url ? (
+              <div className="logo">
+                <Tooltip position="right" content="Projects" wrapperElementType="div">
+                  {/* <Link to={`${logo?.url}`}> */}
+                    <img src={logo?.image?.url} width={32} alt="Contentstack" />
+                  {/* </Link> */}
+                </Tooltip>
+              </div>
+            ) : (
+              ''
+            )}
+
+            {location.pathname === '/projects' && <div className="organisationWrapper">
             <Dropdown
               withSearch
               headerLabel={organizationLabel}
@@ -199,28 +178,25 @@ const MainHeader = () => {
               withArrow
               onChange={handleOnDropDownChange}
             ></Dropdown>
+            </div>}
           </div>
-        )}
-      </div>
 
-      {(location.pathname == '/projects' || location.pathname.includes('/projects/')) && (
-        <div className="flex-end">
-          <div className="Dropdown-wrapper">
-            <Dropdown
-              list={[
-                {
-                  default: true,
-                  label: <ProfileCard />
-                }
-              ]}
-              type="click"
-              className="Profile_card"
-            >
-              <div className="user-short-name flex-v-center flex-h-center">{name}</div>
-            </Dropdown>
-          </div>
-        </div>
-      )}
+          {(location.pathname == '/projects' || location.pathname.includes('/projects/')) && <div className="flex-end">
+            <div className="Dropdown-wrapper">
+              <Dropdown
+                list={[
+                  {
+                    default: true,
+                    label: <ProfileCard/>,
+                  }
+                ]}
+                type="click"
+                className="Profile_card"
+              >
+                <div className="user-short-name flex-v-center flex-h-center">{name}</div>
+              </Dropdown>
+            </div>
+          </div>}
     </div>
   );
 };
diff --git a/ui/src/components/MainHeader/mainheader.interface.ts b/ui/src/components/MainHeader/mainheader.interface.ts
index d4d1d134..df7d11cf 100644
--- a/ui/src/components/MainHeader/mainheader.interface.ts
+++ b/ui/src/components/MainHeader/mainheader.interface.ts
@@ -1,8 +1,5 @@
 import { Logo } from '../../types/common.interface';
 
-/**
- * Represents the type definition for the MainHeader component.
- */
 export interface MainHeaderType {
   log_out?: string;
   logo?: Logo;
diff --git a/ui/src/components/MigrationExecution/MigrationExecution.scss b/ui/src/components/MigrationExecution/MigrationExecution.scss
index 3dd85eb0..09cc16c8 100644
--- a/ui/src/components/MigrationExecution/MigrationExecution.scss
+++ b/ui/src/components/MigrationExecution/MigrationExecution.scss
@@ -1,17 +1,12 @@
 @import '../../scss/App.scss';
 @import '../../scss/variables';
 
-/**
- * Styles for the MigrationExecution component.
- */
-
 .select-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-around;
   margin-left: 5px;
 }
-
 .terminal-container {
   background-color: #000;
   color: #fff;
@@ -28,7 +23,6 @@ div .step-component .action-component-body {
   width: 100% !important;
   margin-left: 0px !important;
 }
-
 .cta-wrapper {
   border-top: 1px solid $color-base-gray-40;
   bottom: 0;
@@ -40,13 +34,11 @@ div .step-component .action-component-body {
   width: 100%;
   z-index: 1;
 }
-
 .selectedOptions {
   color: $color-base-gray-20;
   padding: 5px 10px;
   margin: 5px;
 }
-
 .icon-wrapper {
   display: flex;
   margin-left: 30px; /* Adds space to the left of the icon */
diff --git a/ui/src/components/MigrationExecution/index.scss b/ui/src/components/MigrationExecution/index.scss
index b41e866b..42f81c48 100644
--- a/ui/src/components/MigrationExecution/index.scss
+++ b/ui/src/components/MigrationExecution/index.scss
@@ -1,10 +1,6 @@
 @import '../../scss/App.scss';
 @import '../../scss/variables';
 
-/**
- * Styles for the MigrationExecution component.
- */
-
 .select-wrapper {
   display: flex;
   align-items: center;
@@ -12,11 +8,9 @@
     margin-bottom: 0;
   }
 }
-
 .content-body.step-desc {
   padding: 1rem 1.5rem;
 }
-
 .terminal-container {
   background-color: #000;
   color: #fff;
@@ -33,7 +27,6 @@ div .step-component .action-component-body {
   width: 100% !important;
   margin-left: 0px !important;
 }
-
 .cta-wrapper {
   border-top: 1px solid $color-base-gray-40;
   bottom: 0;
@@ -45,13 +38,11 @@ div .step-component .action-component-body {
   width: 100%;
   z-index: 1;
 }
-
 .selectedOptions {
   color: $color-base-gray-20;
   padding: 5px 10px;
   margin: 5px;
 }
-
 .arrow-wrapper {
   align-items: center;
   display: flex;
diff --git a/ui/src/components/MigrationExecution/index.tsx b/ui/src/components/MigrationExecution/index.tsx
index ffb6064a..2706f78c 100644
--- a/ui/src/components/MigrationExecution/index.tsx
+++ b/ui/src/components/MigrationExecution/index.tsx
@@ -19,9 +19,6 @@ import { DEFAULT_MIGRATION_EXECUTION } from '../../context/app/app.interface';
 //stylesheet
 import './index.scss';
 
-/**
- * Component for handling migration execution.
- */
 const MigrationExecution = () => {
   //const { migrationData, updateMigrationData, newMigrationData } = useContext(AppContext);
   const dispatch = useDispatch();
@@ -51,11 +48,6 @@ const MigrationExecution = () => {
       });
   }, []);
 
-  /**
-   * Get the placeholder value based on the title.
-   * @param title - The title of the field.
-   * @returns The placeholder value.
-   */
   const getPlaceHolder = (title: string) => {
     switch (title) {
       case 'Uploaded CMS':
diff --git a/ui/src/components/MigrationFlow/index.scss b/ui/src/components/MigrationFlow/index.scss
index edc4ca96..32586b5a 100644
--- a/ui/src/components/MigrationFlow/index.scss
+++ b/ui/src/components/MigrationFlow/index.scss
@@ -1,9 +1,5 @@
 @import '../../scss/variables';
 
-/**
- * Styles for the MigrationFlow component.
- */
-
 .basicinfo-tab {
   cursor: pointer;
   padding-bottom: $space-20;
@@ -20,7 +16,6 @@
     }
   }
 }
-
 .basic-info-block {
   margin: $space-10 $space-10 0;
   padding-left: $space-12;
@@ -31,7 +26,6 @@
     color: $color-font-base;
   }
 }
-
 .basic-info-block-active {
   background: $color-brand-white-base;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -46,7 +40,6 @@
     font-weight: $font-weight-semi-bold;
   }
 }
-
 .step-wrapper {
   padding: 15px 0;
 }
diff --git a/ui/src/components/MigrationFlow/index.tsx b/ui/src/components/MigrationFlow/index.tsx
index 9fcc7f9b..a20085b8 100644
--- a/ui/src/components/MigrationFlow/index.tsx
+++ b/ui/src/components/MigrationFlow/index.tsx
@@ -13,17 +13,6 @@ import { CARET_RIGHT } from '../../common/assets';
 // Style
 import './index.scss';
 
-/**
- * Renders the MigrationFlow component.
- *
- * @param {Object} props - The component props.
- * @param {string} props.settingsText - The text for the settings.
- * @param {Function} props.settingsClick - The click event handler for the settings.
- * @param {boolean} props.showInfo - Indicates whether to show the info.
- * @param {string} props.migrationStepsText - The text for the migration steps.
- * @param {number} props.currentStep - The current step of the migration.
- * @returns {JSX.Element} The rendered MigrationFlow component.
- */
 const MigrationFlow = ({
   settingsText,
   settingsClick,
diff --git a/ui/src/components/MigrationFlow/migrationFlow.interface.ts b/ui/src/components/MigrationFlow/migrationFlow.interface.ts
index f6ced3e9..bbc4c001 100644
--- a/ui/src/components/MigrationFlow/migrationFlow.interface.ts
+++ b/ui/src/components/MigrationFlow/migrationFlow.interface.ts
@@ -1,29 +1,7 @@
-/**
- * Represents the props for the MigrationFlow component.
- */
 export interface MigrationFlowProps {
-  /**
-   * The text to display for the settings.
-   */
   settingsText: string;
-
-  /**
-   * The text to display for the migration steps.
-   */
   migrationStepsText: string;
-
-  /**
-   * A callback function that is called when the settings are clicked.
-   */
   settingsClick: () => void;
-
-  /**
-   * A boolean value indicating whether to show the info.
-   */
   showInfo: boolean;
-
-  /**
-   * The current step of the migration flow.
-   */
   currentStep: number;
 }
diff --git a/ui/src/components/MigrationFlowHeader/index.scss b/ui/src/components/MigrationFlowHeader/index.scss
index ee1a9bd1..61d7897a 100644
--- a/ui/src/components/MigrationFlowHeader/index.scss
+++ b/ui/src/components/MigrationFlowHeader/index.scss
@@ -1,12 +1,5 @@
 @import '../../scss/variables';
 
-/**
- * Styles for the MigrationFlowHeader component.
- *
- * The MigrationFlowHeader component represents the header section of the migration flow.
- * It provides styling for the background color, border, padding, position, width, and z-index.
- * It also includes styling for the back button within the header.
- */
 .migration-flow-header {
   background-color: $color-base-white-10;
   border-bottom: 1px solid $color-base-gray-40;
diff --git a/ui/src/components/MigrationFlowHeader/index.tsx b/ui/src/components/MigrationFlowHeader/index.tsx
index a0456a20..6187a1d2 100644
--- a/ui/src/components/MigrationFlowHeader/index.tsx
+++ b/ui/src/components/MigrationFlowHeader/index.tsx
@@ -27,15 +27,6 @@ type MigrationFlowHeaderProps = {
   legacyCMSRef: React.MutableRefObject<any>; 
 };
 
-/**
- * MigrationFlowHeader component displays the header of the migration flow.
- * It includes the project name and a button to save and continue the migration process.
- *
- * @param handleOnClick - The function to handle the click event of the save and continue button.
- * @param isLoading - A boolean indicating whether the save and continue button is in a loading state.
- * @param isCompleted - A boolean indicating whether the migration process is completed.
- * @param legacyCMSRef - A reference to the legacy CMS component.
- */
 const MigrationFlowHeader = ({ handleOnClick, isLoading, isCompleted , legacyCMSRef}: MigrationFlowHeaderProps) => {
   const [projectName, setProjectName] = useState('');
   const [currentStep, setCurrentStep] = useState<number>(0);
diff --git a/ui/src/components/Migrations/NewMigration/ActionTitle.tsx b/ui/src/components/Migrations/NewMigration/ActionTitle.tsx
index 6f47dfc0..2f3cb2e6 100644
--- a/ui/src/components/Migrations/NewMigration/ActionTitle.tsx
+++ b/ui/src/components/Migrations/NewMigration/ActionTitle.tsx
@@ -1,13 +1,5 @@
 import { Tooltip } from '@contentstack/venus-components';
 
-/**
- * Renders the action title component.
- * 
- * @param {Object} props - The component props.
- * @param {string} props.title - The title of the action.
- * @param {string} props.stepName - The name of the step.
- * @returns {JSX.Element} The rendered action title component.
- */
 export const ActionTitle = ({ title, stepName }: IActionTitleParams) => {
   return (
     <>
diff --git a/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.scss b/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.scss
index 926f0b30..db2d19a2 100644
--- a/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.scss
+++ b/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.scss
@@ -1,9 +1,5 @@
 @import '../../../scss/variables';
 
-/**
- * Styles for the NewMigrationWrapper component.
- */
-
 .step-component .action-component-title {
   // height: 60px;
   // background: $color-brand-white-base;
@@ -45,7 +41,6 @@
   font-weight: $font-weight-semi-bold;
   flex: 2;
 }
-
 #newMigration {
   .PageLayout.PageLayout--primary {
     display: flex;
diff --git a/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.tsx b/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.tsx
index 60a44af4..8847dbf8 100644
--- a/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.tsx
+++ b/ui/src/components/Migrations/NewMigration/NewMigrationWrapper.tsx
@@ -52,10 +52,6 @@ const MigrationExecutionComponentLazyLoaded = lazy(
 );
 
 
-/**
- * Renders the wrapper component for creating a new migration.
- * This component fetches project data and handles the flow steps.
- */
 const NewMigrationWrapper = () => {
   const params: Params<string> = useParams();
   const navigate = useNavigate();
diff --git a/ui/src/components/Modal/index.tsx b/ui/src/components/Modal/index.tsx
index b85d2f45..3ec3cc86 100644
--- a/ui/src/components/Modal/index.tsx
+++ b/ui/src/components/Modal/index.tsx
@@ -22,14 +22,6 @@ import { useState } from 'react';
 import { createProject } from '../../services/api/project.service';
 
 
-/**
- * Modal component for creating a project.
- *
- * @component
- * @param {ProjectModalProps} props - The props for the Modal component.
- * @returns {JSX.Element} The rendered Modal component.
- */
-
 const Modal = (props: ProjectModalProps) => {
   const {
     closeModal,
diff --git a/ui/src/components/Modal/modal.interface.ts b/ui/src/components/Modal/modal.interface.ts
index 116108d8..aeba5d27 100644
--- a/ui/src/components/Modal/modal.interface.ts
+++ b/ui/src/components/Modal/modal.interface.ts
@@ -1,62 +1,19 @@
 import { IDropDown } from '../../context/app/app.interface';
 import { ModalType } from '../../pages/Projects/projects.interface';
 
-/**
- * Represents a modal object.
- */
 export interface ModalObj {
-  /**
-   * Closes the modal.
-   */
   closeModal: () => void;
 }
 
-/**
- * Represents the props for the ProjectModal component.
- */
 export interface ProjectModalProps {
-  /**
-   * The data for the modal.
-   */
   modalData: ModalType;
-  
-  /**
-   * The selected organization from the dropdown.
-   */
   selectedOrg: IDropDown;
-  
-  /**
-   * A function to close the modal.
-   */
   closeModal: () => void;
 }
-/**
- * Represents the props for the SettingsModal component.
- */
 export interface SettingsModalProps {
-  /**
-   * The selected organization from the dropdown.
-   */
   selectedOrg: IDropDown;
-
-  /**
-   * The ID of the project.
-   */
   projectId?: string;
-
-  /**
-   * The name of the project.
-   */
   projectName?: string;
-
-  /**
-   * Callback function to close the modal.
-   */
   closeModal: () => void;
-
-  /**
-   * Function to navigate to a specific URL.
-   * @param url - The URL to navigate to.
-   */
   navigate: (url: string) => void;
 }
diff --git a/ui/src/components/ProfileHeader/index.scss b/ui/src/components/ProfileHeader/index.scss
index 67f69b67..193fd188 100644
--- a/ui/src/components/ProfileHeader/index.scss
+++ b/ui/src/components/ProfileHeader/index.scss
@@ -1,26 +1,18 @@
 @import '../../scss/variables';
 
-/**
- * Styles for the profile card component.
- */
 .profile-card {
   width: 300px;
   padding: 16px;
+  // background-color: #f8f9fa;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   text-align: center;
 }
 
-/**
- * Styles for the avatar in the profile card.
- */
 .profile-card__avatar {
   margin-bottom: 16px;
 }
 
-/**
- * Styles for the initials in the avatar.
- */
 .profile-card__initials {
   width: 64px;
   height: 64px;
@@ -32,18 +24,13 @@
   justify-content: center;
   font-size: 24px;
   margin: 12px auto;
+  
 }
 
-/**
- * Styles for the details section in the profile card.
- */
 .profile-card__details {
   margin-bottom: 16px;
 }
 
-/**
- * Styles for the name in the details section.
- */
 .profile-card__name {
   font-size: 16px;
   font-weight: 500;
@@ -51,45 +38,30 @@
   margin-bottom: 5px;
 }
 
-/**
- * Styles for the email in the details section.
- */
 .profile-card__email {
   font-size: 14px;
   color: #7f8c8d;
   margin-bottom: 5px;
 }
 
-/**
- * Styles for the logout section in the profile card.
- */
 .profile-card__logout {
   display: flex;
   align-items: center;
   cursor: pointer;
   color: #2c3e50;
   font-size: 14px;
-  height: 56px;
+  height:56px;
 }
 
-/**
- * Styles for the logout icon in the logout section.
- */
 .profile-card__logout-icon {
   margin-right: 8px;
   font-size: 16px;
 }
 
-/**
- * Styles for the logout text in the logout section.
- */
 .profile-card__logout-text {
   text-decoration: underline;
 }
 
-/**
- * Styles for the gray background element.
- */
 .profile-gray-background {
   min-height: 20px;
   position: absolute;
@@ -100,10 +72,6 @@
   background-color: #F9F8FF;
   z-index: 1;
 }
-
-/**
- * Styles for the avatar element in the profile card.
- */
 .profile-card__avatar {
   z-index: 2;
   position: relative;
diff --git a/ui/src/components/ProfileHeader/index.tsx b/ui/src/components/ProfileHeader/index.tsx
index 42b98c65..63c3a941 100644
--- a/ui/src/components/ProfileHeader/index.tsx
+++ b/ui/src/components/ProfileHeader/index.tsx
@@ -9,25 +9,16 @@ import {
 // Styles
 import './index.scss';
 import { LOG_OUT } from '../../common/assets';
-
-/**
- * Renders the profile card component.
- * @returns JSX element representing the profile card.
- */
 const ProfileCard = () => {
-  const user = useSelector((state: RootState) => state?.authentication?.user);
+  const user = useSelector((state:RootState)=>state?.authentication?.user);
   const name = `${user?.first_name?.charAt(0)}${user?.last_name?.charAt(0)}`.toUpperCase() ?? '';
   const navigate = useNavigate();
-
-  /**
-   * Handles the logout functionality.
-   */
-  const handleLogout = () => {
+   // Function for Logout
+   const handleLogout = () => {
     if (clearLocalStorage()) {
       navigate('/', { replace: true });
     }
   };
-
   return (
     <div className="profile-card">
       <div className='profile-gray-background'/>
diff --git a/ui/src/components/ProjectsHeader/index.tsx b/ui/src/components/ProjectsHeader/index.tsx
index a99f8cc0..e52a4a05 100644
--- a/ui/src/components/ProjectsHeader/index.tsx
+++ b/ui/src/components/ProjectsHeader/index.tsx
@@ -4,19 +4,6 @@ import { Button, Icon, PageHeader, Search } from '@contentstack/venus-components
 // Interface
 import { ProjectsHeaderType } from './projectsHeader.interface';
 
-/**
- * Renders the ProjectsHeader component.
- *
- * @param {Object} props - The component props.
- * @param {string} props.headingText - The heading text.
- * @param {string} props.searchText - The search text.
- * @param {Function} props.setSearchText - The function to set the search text.
- * @param {string} props.searchPlaceholder - The search input placeholder text.
- * @param {Object} props.cta - The call-to-action object.
- * @param {Array} props.allProject - The array of all projects.
- * @param {Function} props.handleModal - The function to handle modal.
- * @returns {JSX.Element} The rendered ProjectsHeader component.
- */
 const ProjectsHeader = ({
   headingText,
   searchText,
@@ -27,10 +14,6 @@ const ProjectsHeader = ({
   handleModal
 }: ProjectsHeaderType) => {
   let interval: ReturnType<typeof setTimeout>;
-
-  /**
-   * Sets focus on the search input element.
-   */
   function setFocus() {
     clearTimeout(interval);
     interval = setTimeout(() => {
@@ -93,6 +76,7 @@ const ProjectsHeader = ({
     </>
   );
 
+
   const pageActions: any = [
     {
       label: cta && cta?.title && (
@@ -113,7 +97,7 @@ const ProjectsHeader = ({
       type: 'primary'
     }
   ];
-
+  
   return (
     <>
       <PageHeader
diff --git a/ui/src/components/ProjectsHeader/projectsHeader.interface.ts b/ui/src/components/ProjectsHeader/projectsHeader.interface.ts
index 3851eee1..ebd19de7 100644
--- a/ui/src/components/ProjectsHeader/projectsHeader.interface.ts
+++ b/ui/src/components/ProjectsHeader/projectsHeader.interface.ts
@@ -1,48 +1,13 @@
 import { CTA } from '../../types/common.interface';
 import { ProjectsObj } from '../../pages/Projects/projects.interface';
 
-/**
- * Represents the type definition for the ProjectsHeader component.
- */
 export interface ProjectsHeaderType {
-  /**
-   * The call-to-action button for the ProjectsHeader component.
-   */
   cta?: CTA;
-
-  /**
-   * The restore call-to-action button for the ProjectsHeader component.
-   */
   restore_cta?: CTA;
-
-  /**
-   * The heading text for the ProjectsHeader component.
-   */
   headingText: string | undefined;
-
-  /**
-   * The search text for the ProjectsHeader component.
-   */
   searchText: string;
-
-  /**
-   * A function to set the search text for the ProjectsHeader component.
-   * @param value - The value to set as the search text.
-   */
   setSearchText: (value: string) => void;
-
-  /**
-   * The placeholder text for the search input in the ProjectsHeader component.
-   */
   searchPlaceholder: string;
-
-  /**
-   * A function to handle the modal in the ProjectsHeader component.
-   */
   handleModal?: () => void;
-
-  /**
-   * An array of projects for the ProjectsHeader component.
-   */
   allProject: ProjectsObj[] | null;
 }
diff --git a/ui/src/components/SchemaModal/index.scss b/ui/src/components/SchemaModal/index.scss
index 868e9bde..8065e9dd 100644
--- a/ui/src/components/SchemaModal/index.scss
+++ b/ui/src/components/SchemaModal/index.scss
@@ -1,12 +1,5 @@
 @import '../../scss/variables';
 
-/**
- * Styles for the SchemaModal component.
- *
- * The SchemaModal component is responsible for rendering a modal that displays a schema.
- * It contains styles for various elements within the modal, such as the schema entries, icons, and chevrons.
- *
- */
 .schema {
   min-height: 290px;
 }
diff --git a/ui/src/components/SchemaModal/index.tsx b/ui/src/components/SchemaModal/index.tsx
index 557c6c31..27bf9b88 100644
--- a/ui/src/components/SchemaModal/index.tsx
+++ b/ui/src/components/SchemaModal/index.tsx
@@ -10,11 +10,6 @@ import { FieldMapType } from '../ContentMapper/contentMapper.interface';
 import './index.scss';
 
 // Function for get icons
-/**
- * Retrieves the corresponding icon for a given field type.
- * @param field - The field object containing the ContentstackFieldType property.
- * @returns The icon name associated with the field type.
- */
 const getTopLevelIcons = (field: FieldMapType) => {
   const icons: Icons = {
     title: 'StarSmall',
@@ -93,10 +88,6 @@ const getTopLevelIcons = (field: FieldMapType) => {
   return icons[field?.ContentstackFieldType as keyof Icons];
 };
 
-/**
- * Renders a tree view component based on the provided schema.
- * @param schema - The schema data used to generate the tree view.
- */
 const TreeView = ({ schema = [] }: schemaType) => {
   const [nestedList, setNestedList] = useState<FieldMapType[]>([]);
 
@@ -123,29 +114,16 @@ const TreeView = ({ schema = [] }: schemaType) => {
     setNestedList(data);
   }, [schema]);
 
-  /**
-   * Checks if a field has nested child fields.
-   * @param field - The field to check.
-   * @returns True if the field has nested child fields, false otherwise.
-   */
+  // Check if schema is nested
   const hasNestedValue = (field: FieldMapType) => field && field?.child && field?.child?.length > 0;
 
-  /**
-   * Removes the group name from a child field name.
-   * @param text - The child field name.
-   * @param groupName - The group name.
-   * @returns The child field name without the group name.
-   */
+  // Remove Group name from its child
   const getChildFieldName = (text?: string, groupName?: string) => {
     if (text?.startsWith(groupName + ' > ')) {
       return text?.replace(groupName + ' > ', '');
     }
   };
 
-  /**
-   * Handles the click event on a tree view item.
-   * @param event - The click event.
-   */
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     if (document?.querySelector('.iconsholder.active')) {
       document?.querySelector('.iconsholder.active')?.classList.remove('active');
@@ -167,12 +145,6 @@ const TreeView = ({ schema = [] }: schemaType) => {
     }
   };
 
-  /**
-   * Generates the nested outline for a field.
-   * @param item - The field to generate the outline for.
-   * @param index - The index of the field.
-   * @returns The nested outline JSX.
-   */
   const generateNestedOutline = (item: FieldMapType, index: number) => {
     return (
       <ul className={item && item?.child && item?.child?.length > 0 ? '' : 'close'}>
@@ -261,12 +233,6 @@ const TreeView = ({ schema = [] }: schemaType) => {
   );
 };
 
-/**
- * Renders a modal component for displaying a schema preview.
- *
- * @param props - The props for the SchemaModal component.
- * @returns The rendered SchemaModal component.
- */
 const SchemaModal = (props: SchemaProps) => {
   return (
     <>
diff --git a/ui/src/components/SchemaModal/schemaModal.interface.ts b/ui/src/components/SchemaModal/schemaModal.interface.ts
index 30d1cf26..69bebfdd 100644
--- a/ui/src/components/SchemaModal/schemaModal.interface.ts
+++ b/ui/src/components/SchemaModal/schemaModal.interface.ts
@@ -1,9 +1,5 @@
 import { FieldMapType } from '../ContentMapper/contentMapper.interface';
 
-/**
- * Represents the Icons interface.
- * This interface defines the structure of an object that contains various icon names.
- */
 export interface Icons {
   title?: string;
   text?: string;
@@ -26,24 +22,9 @@ export interface Icons {
   tag?: string;
   experience_container?: string;
 }
-
-/**
- * Represents the props for the SchemaModal component.
- */
 export interface SchemaProps {
-  /**
-   * The content type of the schema.
-   */
   contentType?: string;
-  
-  /**
-   * A function to close the modal.
-   */
   closeModal: () => void;
-  
-  /**
-   * The schema data as an array of FieldMapType.
-   */
   schemaData: FieldMapType[];
 }
 
diff --git a/ui/src/components/SideBar/index.scss b/ui/src/components/SideBar/index.scss
index e5577565..dc581bd6 100644
--- a/ui/src/components/SideBar/index.scss
+++ b/ui/src/components/SideBar/index.scss
@@ -1,10 +1,4 @@
 @import '../../scss/variables';
-/**
- * Styles for the .recycle-wrapper class.
- *
- * The .recycle-wrapper class is used to style the wrapper element for the recycle component in the sidebar.
- * It sets the margin-top to -1px, background-color to $color-brand-white-base, and z-index to 99.
- */
 .recycle-wrapper {
     margin-top: -1px;
     background-color: $color-brand-white-base;
diff --git a/ui/src/components/SideBar/index.tsx b/ui/src/components/SideBar/index.tsx
index 968282bf..149ca958 100644
--- a/ui/src/components/SideBar/index.tsx
+++ b/ui/src/components/SideBar/index.tsx
@@ -9,12 +9,6 @@ type SettingIconProp = {
   projectId: string;
 }
 
-/**
- * Renders the SideBar component.
- *
- * @param {SettingIconProp} props - The props object containing the projectId.
- * @returns {JSX.Element} The rendered SideBar component.
- */
 const SideBar = ({projectId}: SettingIconProp) => {
   const navigate = useNavigate();
 
diff --git a/ui/src/components/Stepper/FlowStepper/FlowBlock.tsx b/ui/src/components/Stepper/FlowStepper/FlowBlock.tsx
index f30aee17..35a56243 100644
--- a/ui/src/components/Stepper/FlowStepper/FlowBlock.tsx
+++ b/ui/src/components/Stepper/FlowStepper/FlowBlock.tsx
@@ -1,23 +1,11 @@
 import React, { ReactNode } from 'react';
 
-/**
- * Props for the FlowBlock component.
- */
 type FlowBlockProps = {
   children?: ReactNode;
   spear?: string;
   className?: string;
 };
 
-/**
- * Represents a block in the flow stepper component.
- *
- * @param {FlowBlockProps} props - The props for the FlowBlock component.
- * @param {ReactNode} props.children - The content of the FlowBlock component.
- * @param {string} [props.spear=''] - The spear value for the FlowBlock component.
- * @param {string} [props.className=''] - The additional CSS class name for the FlowBlock component.
- * @returns {JSX.Element} The rendered FlowBlock component.
- */
 const FlowBlock = ({ children, spear = '', className = '' }: FlowBlockProps) => {
   return <div className={`${spear ? 'ft-spear-head-bg-line' : ''} ${className}`}>{children}</div>;
 };
diff --git a/ui/src/components/Stepper/FlowStepper/FlowBlockItem.tsx b/ui/src/components/Stepper/FlowStepper/FlowBlockItem.tsx
index faddf4d2..b7f330e7 100644
--- a/ui/src/components/Stepper/FlowStepper/FlowBlockItem.tsx
+++ b/ui/src/components/Stepper/FlowStepper/FlowBlockItem.tsx
@@ -12,9 +12,6 @@ import StepTitle from './StepTitle';
 // Assets
 import { CARET_RIGHT } from '../../../common/assets';
 
-/**
- * Props for the FlowBlockItem component.
- */
 interface FlowBlockItemProps {
   isActive?: boolean;
   isCompleted?: boolean;
@@ -22,17 +19,10 @@ interface FlowBlockItemProps {
   onStepClick: (step: IFlowStep, isCompleted: boolean) => () => void;
 }
 
-/**
- * Represents a single block item in the flow stepper component.
- */
 const FlowBlockItem: FC<FlowBlockItemProps> = (props: FlowBlockItemProps) => {
 
   const [isHovered, setIsHovered] = useState<boolean>(false);
 
-  /**
-   * Toggles the hover state of the block item.
-   * @param flag - The flag indicating whether the block item is being hovered.
-   */
   const handleHoveredToggle = (flag: boolean) => () => {
     setIsHovered(flag);
   };
diff --git a/ui/src/components/Stepper/FlowStepper/FlowStepper.scss b/ui/src/components/Stepper/FlowStepper/FlowStepper.scss
index 459713c9..cada94e2 100644
--- a/ui/src/components/Stepper/FlowStepper/FlowStepper.scss
+++ b/ui/src/components/Stepper/FlowStepper/FlowStepper.scss
@@ -1,11 +1,6 @@
 @import '../../../scss/variables';
 
-/**
- * Styles for the FlowStepper component.
- */
-
 .ft-block {
-  /* Background gradient for the block */
   background: linear-gradient(
       rgb(247, 249, 252) $space-30,
       $color-base-gray-40 $space-20,
@@ -21,7 +16,6 @@
 }
 
 .ft-block-disabled {
-  /* Background gradient for the disabled block */
   background: linear-gradient(
       rgb(247, 249, 252) $space-30,
       $color-base-gray-40 $space-20,
@@ -55,7 +49,6 @@
 }
 
 .ft-step-block-head:hover {
-  /* Hover styles for the step block head */
   background: $color-brand-white-base;
   cursor: pointer;
   min-height: 78px;
@@ -70,7 +63,6 @@
 }
 
 .ft-step-block-head-active {
-  /* Styles for the active step block head */
   background-color: white;
   border: 1px solid $color-base-gray-40;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -80,15 +72,12 @@
   margin-left: -$space-10;
   min-height: 78px;
 }
-
 .ft-block-item:has(.ft-step-block-head-disabled) {
   cursor: not-allowed;
 }
-
 .ft-step-block-head-disabled {
   pointer-events: none;
 }
-
 .ft-step-block-head-active:hover {
   background-color: white !important;
   cursor: pointer;
diff --git a/ui/src/components/Stepper/FlowStepper/FlowStepper.tsx b/ui/src/components/Stepper/FlowStepper/FlowStepper.tsx
index 3bad24b3..70bba969 100644
--- a/ui/src/components/Stepper/FlowStepper/FlowStepper.tsx
+++ b/ui/src/components/Stepper/FlowStepper/FlowStepper.tsx
@@ -26,13 +26,6 @@ type IProp = {
   currentStep: number;
 };
 
-/**
- * FlowStepper component displays a stepper for the migration flow steps.
- *
- * @param {IProp} props - The component props.
- * @param {number} props.currentStep - The current step of the migration flow.
- * @returns {JSX.Element} The rendered FlowStepper component.
- */
 const FlowStepper = ({ currentStep }: IProp) => {
   /** ALL HOOKS Here */
   const params = useParams();
@@ -41,13 +34,6 @@ const FlowStepper = ({ currentStep }: IProp) => {
   
   const migrationData = useSelector((state:any)=>state?.migration?.migrationData)
 
-  /**
-   * Handles the click event when a step is clicked in the stepper.
-   *
-   * @param {IFlowStep} step - The step object.
-   * @param {boolean} isCompleted - Indicates if the step is completed.
-   * @returns {Promise<void>} A Promise that resolves when the click event is handled.
-   */
   const onStepClick = (step: IFlowStep, isCompleted: boolean) => async () => {
     if (params?.stepId === `${step?.name}`) return;
     dispatch(updateMigrationData({ currentFlowStep: step }))
diff --git a/ui/src/components/Stepper/FlowStepper/StepIcon.tsx b/ui/src/components/Stepper/FlowStepper/StepIcon.tsx
index eef48ad8..d7003e05 100644
--- a/ui/src/components/Stepper/FlowStepper/StepIcon.tsx
+++ b/ui/src/components/Stepper/FlowStepper/StepIcon.tsx
@@ -1,28 +1,11 @@
 import React from 'react';
 import { addDomainInPath } from '../../../utilities/functions';
 
-/**
- * Props for the StepIcon component.
- */
 type StepIconProps = {
-  /**
-   * The icon to be displayed.
-   */
   icon?: string;
-
-  /**
-   * Additional class name for the component.
-   */
   className?: string;
 };
 
-/**
- * Renders a step icon component.
- *
- * @param icon - The icon name.
- * @param className - Additional CSS class names for the component.
- * @returns The rendered step icon component.
- */
 const StepIcon = ({ icon = 'lightning', className = '' }: StepIconProps) => {
   return (
     <img
diff --git a/ui/src/components/Stepper/FlowStepper/StepTitle.tsx b/ui/src/components/Stepper/FlowStepper/StepTitle.tsx
index da5c4919..138a04d7 100644
--- a/ui/src/components/Stepper/FlowStepper/StepTitle.tsx
+++ b/ui/src/components/Stepper/FlowStepper/StepTitle.tsx
@@ -1,40 +1,12 @@
 import React from 'react';
 
-/**
- * Props for the StepTitle component.
- */
 type StepTitleProps = {
-  /**
-   * The title of the step.
-   */
   title: string;
-  
-  /**
-   * The description of the step.
-   */
   desc: string;
-  
-  /**
-   * Indicates whether the step is currently active.
-   */
   stepActive: boolean;
-  
-  /**
-   * Indicates whether the step is being hovered over.
-   */
   isHovered: boolean;
 };
 
-/**
- * Renders the title and description of a step in the flow stepper.
- *
- * @param {StepTitleProps} props - The component props.
- * @param {string} props.title - The title of the step.
- * @param {string} props.desc - The description of the step.
- * @param {boolean} [props.stepActive=false] - Indicates if the step is currently active.
- * @param {boolean} [props.isHovered=false] - Indicates if the step is currently being hovered over.
- * @returns {JSX.Element} The rendered StepTitle component.
- */
 const StepTitle = ({ title, desc, stepActive = false, isHovered = false }: StepTitleProps) => {
   return (
     <div>
diff --git a/ui/src/components/Stepper/FlowStepper/flowStep.interface.ts b/ui/src/components/Stepper/FlowStepper/flowStep.interface.ts
index 014db5c4..15122194 100644
--- a/ui/src/components/Stepper/FlowStepper/flowStep.interface.ts
+++ b/ui/src/components/Stepper/FlowStepper/flowStep.interface.ts
@@ -1,64 +1,17 @@
-/**
- * Represents a flow step in the application.
- */
 export interface IFlowStep {
-  /**
-   * The group name of the flow step.
-   */
   group_name?: string;
-
-  /**
-   * The title of the flow step.
-   */
   title: string;
-
-  /**
-   * The description of the flow step.
-   */
   description: string;
-
-  /**
-   * The name of the flow step.
-   */
   name: string;
-
-  /**
-   * The ID of the flow that the step belongs to.
-   */
   flow_id: string;
-
-  /**
-   * Indicates whether the flow step is completed or not.
-   */
   isCompleted: boolean;
 }
 
-/**
- * Represents the default flow step object.
- */
 export const DEFAULT_IFLOWSTEP: IFlowStep = {
-  /**
-   * The title of the flow step.
-   */
   title: 'Legacy CMS',
-  /**
-   * The description of the flow step.
-   */
   description: '',
-  /**
-   * The name of the flow step.
-   */
   name: '1',
-  /**
-   * The ID of the flow.
-   */
   flow_id: '',
-  /**
-   * The group name of the flow step.
-   */
   group_name: '',
-  /**
-   * Indicates whether the flow step is completed or not.
-   */
   isCompleted: false
 };
diff --git a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss
index d4616ab0..62e0b33d 100644
--- a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss
+++ b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss
@@ -1,14 +1,9 @@
 @import '../../../scss/variables';
 
-/**
- * Styles for the horizontal stepper component.
- */
-
 .stepper-wrapper {
   margin-top: 73px;
   position: fixed;
 }
-
 .stepper {
   border-bottom: 1px solid $color-base-gray-40;
   display: flex;
@@ -16,12 +11,12 @@
   justify-content: space-between;
   gap: 0px;
   padding: 10px;
-
   @media (max-width: 768px) {
     flex-direction: column;
     align-items: flex-start;
   }
-}
+  
+}   
 
 .stepWrapperContainer {
   display: flex;
@@ -29,7 +24,8 @@
   justify-content: center;
   position: relative;
   flex: 0.6;
-  margin: 0;
+  margin: 0 ;
+
 }
 
 .stepWrapper {
@@ -40,10 +36,9 @@
   position: relative;
   z-index: 1;
 
-  &.completed .badge {
-    background-color: $color-brand-primary-base;
+  &.completed .badge{
+    background-color:$color-brand-primary-base;
   }
-
   &.active .badge {
     background-color: white;
     border: $px-2 solid $color-brand-primary-base;
@@ -72,15 +67,14 @@
     overflow: hidden;
     white-space: nowrap;
     font-family: Inter;
+    
   }
-
-  &.disableEvents {
+  &.disableEvents{
     cursor: not-allowed;
-    opacity: 1 !important;
+    opacity: 1 !important; 
     color: #475161 !important;
   }
 }
-
 .stepWrapperContainer:has(.disableEvents) {
   cursor: not-allowed;
 }
@@ -89,7 +83,7 @@
   height: 4px;
   background-color: $color-brand-primary-base;
   flex-grow: 1;
-  margin: 0;
+  margin: 0; 
   margin-bottom: 30px;
   border-radius: 4px;
   margin-left: -40px;
@@ -101,16 +95,14 @@
   flex-direction: column;
   align-items: center;
 }
-
-.icon-wrapper {
+.icon-wrapper{
   width: 16px;
   height: 11px;
 }
-
-.disabled-connector {
+.disabled-connector{
   background-color: $color-base-gray-40;
   flex-grow: 1;
-  margin: 0;
+  margin: 0; 
   margin-bottom: 30px;
   border-radius: 4px;
   height: 4px;
@@ -119,7 +111,6 @@
 }
 
 /******************* Custom Classes *******************/
-
 .stepper-position {
   background-color: $color-brand-white-base;
   margin-top: 73px;
@@ -128,7 +119,6 @@
   width: calc(100% - 56px);
   z-index: 9;
 }
-
 .stepContent {
   background-color: $color-base-white-10;
   height: calc(100vh - 56px);
diff --git a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx
index c4513264..02ebf723 100644
--- a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx
+++ b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx
@@ -3,101 +3,34 @@ import { useNavigate, useParams } from 'react-router-dom';
 import './HorizontalStepper.scss';
 import { Icon } from '@contentstack/venus-components';
 
-/**
- * Enum representing the status of a step in a horizontal stepper.
- */
 export enum StepStatus {
-    /**
-     * The step is currently active.
-     */
     ACTIVE = "ACTIVE",
-    /**
-     * The step has been completed.
-     */
     COMPLETED = "COMPLETED",
-    /**
-     * The step is disabled and cannot be accessed.
-     */
     DISABLED = "DISABLED"
 }
 
-/**
- * Represents an array of steps in a horizontal stepper.
- */
 export type stepsArray = {
-    /**
-     * The unique identifier for the step.
-     */
     id: string;
-    /**
-     * The title of the step.
-     */
     title?: JSX.Element | string;
-    /**
-     * The data associated with the step.
-     */
     data?: React.ReactElement;
-    /**
-     * The status of the step.
-     */
     status?: StepStatus;
 };
 
-/**
- * Props for the HorizontalStepper component.
- */
 export type stepperProps = {
-    /**
-     * An array of steps for the stepper.
-     */
     steps: Array<stepsArray>;
-    /**
-     * Optional class name for the stepper component.
-     */
     className?: string;
-    /**
-     * Optional message or JSX element to display when the stepper is empty.
-     */
     emptyStateMsg?: string | JSX.Element;
-    /**
-     * Additional props to be passed to each step component.
-     */
     stepComponentProps?: any;
-    /**
-     * Determines whether to hide the tab view in the stepper.
-     */
     hideTabView?: boolean;
-    /**
-     * Optional class name for the step content container.
-     */
     stepContentClassName?: string;
-    /**
-     * Optional class name for the step title.
-     */
     stepTitleClassName?: string;
-    /**
-     * Optional test ID for the stepper component.
-     */
     testId?: string;
 };
 
-/**
- * Represents the handles for the HorizontalStepper component.
- */
 export type HorizontalStepperHandles = {
-    /**
-     * Callback function to handle step change.
-     * @param currentStep - The current step number.
-     */
     handleStepChange: (currentStep: number) => void;
 };
 
-/**
- * A horizontal stepper component that displays a series of steps and allows navigation between them.
- * @param props - The props for the HorizontalStepper component.
- * @param ref - A ref object that can be used to access the imperative methods of the HorizontalStepper component.
- * @returns The rendered HorizontalStepper component.
- */
 const HorizontalStepper = forwardRef(
     (props: stepperProps, ref: React.ForwardedRef<HorizontalStepperHandles>) => {
         const { steps, className, emptyStateMsg, stepComponentProps, hideTabView, testId } = props;
@@ -126,10 +59,6 @@ const HorizontalStepper = forwardRef(
         }, [stepId]);
 
         useImperativeHandle(ref, () => ({
-            /**
-             * Changes the current step of the HorizontalStepper component.
-             * @param currentStep - The index of the step to change to.
-             */
             handleStepChange: (currentStep: number) => {
                 setShowStep(currentStep+ 1);
                 setStepsCompleted(prev => {
@@ -144,10 +73,6 @@ const HorizontalStepper = forwardRef(
             }
         }));
 
-        /**
-         * Sets the active step of the HorizontalStepper component and navigates to the corresponding URL.
-         * @param idx - The index of the step to set as active.
-         */
         const setTabStep = (idx: number) => {
             
             if (stepsCompleted?.includes(idx) || stepsCompleted?.length === idx) {
@@ -157,9 +82,6 @@ const HorizontalStepper = forwardRef(
             }
         };
 
-        /**
-         * Renders the titles and circles for each step in the HorizontalStepper component.
-         */
         const StepsTitleCreator: React.FC = () => (
             <div className="stepper stepper-position">
                 {steps?.map(({ id, title }, idx: number) => {
diff --git a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss
index 19f514be..c185de9c 100644
--- a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss
+++ b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss
@@ -1,29 +1,23 @@
 @import '../../../scss/variables';
 
-/**
- * Styles for the migration vertical stepper container.
- */
 .migration-vertical-stepper-container {
   display: flex;
   align-items: baseline;
   justify-content: flex-start;
   border-bottom: 1px solid $color-brand-secondary-lightest;
   gap: 8px;
+
+
 }
 
-/**
- * Styles for the stepper title.
- */
 .migration-vertical-stepper .stepper-title {
   margin-bottom: $space-10;
   margin: 10px 20px;
   color: $color-font-base;
   line-height: 21px;
+
 }
 
-/**
- * Styles for the stepper description.
- */
 .migration-vertical-stepper .stepper-discription {
   font-family: 'Inter';
   font-style: normal;
@@ -35,9 +29,6 @@
   margin: 10px 20px;
 }
 
-/**
- * Styles for the summery edit and summery lock icons.
- */
 .migration-vertical-stepper .summery-edit,
 .migration-vertical-stepper .summery-lock {
   position: absolute;
@@ -45,17 +36,11 @@
   right: $space-20;
 }
 
-/**
- * Styles for the summery edit and action icons.
- */
 .summery-edit,
 .action {
   top: 50%;
 }
 
-/**
- * Styles for the vertical stepper list items.
- */
 .StepperWrapper ol.Vertical > li:before {
   width: 2rem;
   height: 2rem;
@@ -64,30 +49,18 @@
   color: #475161 !important;
 }
 
-/**
- * Styles for the stepper title note.
- */
 .stepper-titleNote {
   font-size: $size-font-large;
 }
 
-/**
- * Styles for the active to disabled list item.
- */
 .StepperWrapper ol.Vertical > li.active__to__disabled {
   border-image: linear-gradient(0deg, #c0c0cd 0%, #0469e3 100%);
 }
 
-/**
- * Styles for the completed to active list item.
- */
 .StepperWrapper ol.Vertical > li.completed__to__active {
   border-image: linear-gradient(0deg, #6e6b86 0%, #007a52 100%);
 }
 
-/**
- * Styles for the list item bullet.
- */
 .StepperWrapper ol.Vertical > li::before {
   content: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2223%22%20height%3D%2223%22%20rx%3D%2211.5%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2223%22%20height%3D%2223%22%20rx%3D%2211.5%22%20stroke%3D%22%236E6B86%22%2F%3E%3C%2Fsvg%3E');
   height: $space-24;
@@ -96,31 +69,19 @@
   background-color: transparent;
 }
 
-/**
- * Styles for the active list item bullet.
- */
 .StepperWrapper ol.Vertical > li.active::before {
   content: url('data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2224%22%20viewBox%3D%220%200%2025%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%221%22%20y%3D%220.5%22%20width%3D%2223%22%20height%3D%2223%22%20rx%3D%2211.5%22%20fill%3D%22%23F5FDFF%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.8889%2014.2536C6.73737%2014.4051%206.64671%2014.607%206.63413%2014.8209L6.50155%2017.0748C6.47078%2017.5978%206.90341%2018.0305%207.42642%2017.9997L9.68032%2017.8671C9.89425%2017.8545%2010.0961%2017.7639%2010.2477%2017.6123L18.245%209.61504C18.5867%209.27333%2018.5867%208.71931%2018.245%208.3776L16.1236%206.25628C15.7819%205.91457%2015.2279%205.91457%2014.8862%206.25628L6.8889%2014.2536ZM7.38283%2014.865C7.38463%2014.8344%207.39758%2014.8056%207.41923%2014.7839L13.9668%208.23635L16.1635%2010.433C16.1994%2010.469%2016.2408%2010.4961%2016.285%2010.5144L9.71733%2017.082C9.69568%2017.1037%209.66684%2017.1166%209.63628%2017.1184L7.38238%2017.251C7.30766%2017.2554%207.24586%2017.1936%207.25025%2017.1189L7.38283%2014.865ZM16.7751%2010.0242L17.7146%209.08471C17.7634%209.03589%2017.7634%208.95675%2017.7146%208.90793L15.5933%206.78661C15.5445%206.7378%2015.4654%206.7378%2015.4165%206.78661L14.4971%207.70602L16.6938%209.90271C16.7297%209.93862%2016.7568%209.98002%2016.7751%2010.0242Z%22%20fill%3D%22%230469E3%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%220.5%22%20width%3D%2223%22%20height%3D%2223%22%20rx%3D%2211.5%22%20stroke%3D%22%230469E3%22%2F%3E%3C%2Fsvg%3E');
 }
 
-/**
- * Styles for the completed list item bullet.
- */
 .StepperWrapper ol.Vertical > li.completed::before {
   content: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2223%22%20height%3D%2223%22%20rx%3D%2211.5%22%20fill%3D%22%23F5FFFC%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17.7652%208.23483C17.9116%208.38128%2017.9116%208.61872%2017.7652%208.76517L10.7652%2015.7652C10.6187%2015.9116%2010.3813%2015.9116%2010.2348%2015.7652L6.73483%2012.2652C6.58839%2012.1187%206.58839%2011.8813%206.73483%2011.7348C6.88128%2011.5884%207.11872%2011.5884%207.26517%2011.7348L10.5%2014.9697L17.2348%208.23483C17.3813%208.08839%2017.6187%208.08839%2017.7652%208.23483Z%22%20fill%3D%22%23007A52%22%2F%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2223%22%20height%3D%2223%22%20rx%3D%2211.5%22%20stroke%3D%22%23007A52%22%2F%3E%3C%2Fsvg%3E');
   border: none;
 }
 
-/**
- * Styles for the stepper step.
- */
 .StepperWrapper__step {
   padding: $space-10;
 }
 
-/**
- * Styles for the action summary wrapper.
- */
 .action-summary-wrapper {
   padding: $space-4 $space-24;
   align-items: center;
@@ -129,9 +90,6 @@
   background: $color-brand-white-base;
 }
 
-/**
- * Styles for the action content wrapper.
- */
 .action-content-wrapper {
   box-shadow: rgba(0, 0, 0, 0.1) 0 $space-20 $space-30 0;
   opacity: 1;
@@ -140,30 +98,19 @@
   border-radius: 10px;
 }
 
-/**
- * Styles for the configure action logo.
- */
 .configure_action_logo {
   width: $space-24;
   height: $space-24;
   margin-right: $space-10;
 }
-
-/**
- * Styles for the step block.
- */
-.step_block {
+.step_block{
   border-radius: 4px;
   border: 1px solid $color-brand-secondary-lightest;
   background-color: $color-brand-white-base;
-  padding: 24px 30px, 24px, 30px;
+  padding:  24px 30px, 24px, 30px;
   gap: 24px;
   margin-bottom: 40px;
 }
-
-/**
- * Styles for the organization wrapper.
- */
 .orgWrapper {
   display: flex;
   align-items: baseline;
@@ -172,15 +119,11 @@
     color: $color-stepper-title;
   }
 }
-
-/**
- * Styles for the asterisk input.
- */
 .asterisk_input::after {
-  content: " *";
+  content:" *"; 
   color: $color-brand-warning-medium;
-  margin: 2px 0px 0px -15px;
-  font-size: medium;
-  padding: 10px 5px 0 0 !important;
+  margin: 2px 0px 0px -15px; 
+  font-size:medium; 
+  padding: 10px 5px 0 0 !important; 
   padding-left: .25em;
 }
\ No newline at end of file
diff --git a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx
index 139e1b57..7c524f3f 100644
--- a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx
+++ b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.tsx
@@ -3,76 +3,26 @@ import './AutoVerticalStepper.scss';
 import { Heading, Paragraph } from '@contentstack/venus-components';
 
 
-/**
- * Enum representing the status of a step in a vertical stepper.
- */
 export enum StepStatus {
-  /**
-   * The step is currently active.
-   */
   ACTIVE = 'ACTIVE',
-  /**
-   * The step has been completed.
-   */
   COMPLETED = 'COMPLETED',
-  /**
-   * The step is disabled and cannot be accessed.
-   */
   DISABLED = 'DISABLED'
 }
 
-/**
- * Props for the AutoVerticalStepper component.
- */
 type AutoVerticalStepperProps = {
   steps: any[];
   className?: string;
   description?: string;
   stepComponentProps?: any;
   isEdit: boolean;
-  isRequired: boolean;
+  isRequired:boolean;
   handleOnAllStepsComplete: (flag: boolean) => void;
 };
 
-/**
- * Represents the handles for the AutoVerticalStepper component.
- */
 export type AutoVerticalStepperComponentHandles = {
-  /**
-   * Handles the dynamic step change in the AutoVerticalStepper.
-   * @param stepIndex - The index of the step to change to.
-   * @param closeStep - Optional parameter to indicate if the step should be closed.
-   */
   handleDynamicStepChange: (stepIndex: number, closeStep?: boolean) => void;
 };
 
-/**
- * Represents a vertical stepper component that automatically manages the steps and their statuses.
- *
- * @component
- * @example
- * ```tsx
- * <AutoVerticalStepper
- *   steps={steps}
- *   className="stepper"
- *   description="This is a stepper component"
- *   stepComponentProps={stepComponentProps}
- *   isEdit={false}
- *   handleOnAllStepsComplete={() => {
- *     console.log('All steps completed');
- *   }}
- * />
- * ```
- *
- * @param props - The component props.
- * @param props.steps - An array of step objects.
- * @param props.className - The CSS class name for the stepper component.
- * @param props.description - The description for the stepper component.
- * @param props.stepComponentProps - Additional props to be passed to the step components.
- * @param props.isEdit - A boolean indicating whether the stepper is in edit mode.
- * @param props.handleOnAllStepsComplete - A callback function to be called when all steps are completed.
- * @returns The rendered `AutoVerticalStepper` component.
- */
 const AutoVerticalStepper = React.forwardRef<
   AutoVerticalStepperComponentHandles,
   React.PropsWithChildren<AutoVerticalStepperProps>
diff --git a/ui/src/components/TestMigration/index.scss b/ui/src/components/TestMigration/index.scss
index 1f559265..8a8473c1 100644
--- a/ui/src/components/TestMigration/index.scss
+++ b/ui/src/components/TestMigration/index.scss
@@ -1,13 +1,6 @@
 @import '../../scss/App.scss';
 @import '../../scss/variables';
 
-/**
- * Styles for the migration step container.
- *
- * The migration step container is a container element that holds the content of a migration step.
- * It has a maximum height of 70% of the viewport height and enables vertical scrolling when the content exceeds the container's height.
- * Horizontal scrolling is disabled.
- */
 .migration-step-container {
   max-height: 70vh;
   overflow-y: auto;
diff --git a/ui/src/components/TestMigration/index.tsx b/ui/src/components/TestMigration/index.tsx
index 6f0d18a8..a4bdf8b7 100644
--- a/ui/src/components/TestMigration/index.tsx
+++ b/ui/src/components/TestMigration/index.tsx
@@ -17,11 +17,6 @@ import LogViewer from '../LogScreen';
 // CSS
 import './index.scss';
 
-/**
- * TestMigration component.
- * This component displays the UID and allows the user to select their current Content Management System.
- * It also displays the execution logs using the LogViewer component.
- */
 const TestMigration = () => {
   const [data, setData] = useState<MigrationType>({});
 
diff --git a/ui/src/components/TestMigration/testMigration.interface.ts b/ui/src/components/TestMigration/testMigration.interface.ts
index 086bdb2c..cfc3427f 100644
--- a/ui/src/components/TestMigration/testMigration.interface.ts
+++ b/ui/src/components/TestMigration/testMigration.interface.ts
@@ -1,22 +1,9 @@
-/**
- * Represents the migration type.
- */
 export interface MigrationType {
   cta?: CTA;
   subtitle?: string;
 }
 
-/**
- * Represents a Call to Action (CTA) button.
- */
 export interface CTA {
-  /**
-   * The title of the CTA button.
-   */
   title?: string;
-
-  /**
-   * The URL that the CTA button should navigate to.
-   */
   url?: string;
 }
diff --git a/ui/src/components/layout/AppLayout/index.tsx b/ui/src/components/layout/AppLayout/index.tsx
index dd17126e..9fe95556 100644
--- a/ui/src/components/layout/AppLayout/index.tsx
+++ b/ui/src/components/layout/AppLayout/index.tsx
@@ -13,12 +13,6 @@ type IProps = {
   children?: ReactNode;
 };
 
-/**
- * Represents the layout component for the application.
- * @param {Object} props - The component props.
- * @param {React.ReactNode} props.children - The child components to render.
- * @returns {JSX.Element} The rendered layout component.
- */
 const AppLayout: FC<IProps> = ({ children }) => {
   const location = useLocation();
   const dispatch = useDispatch();
diff --git a/ui/src/context/app/app.interface.ts b/ui/src/context/app/app.interface.ts
index 278665a7..52277bfe 100644
--- a/ui/src/context/app/app.interface.ts
+++ b/ui/src/context/app/app.interface.ts
@@ -6,335 +6,94 @@ import { ICardType, defaultCardType } from '../../components/Common/Card/card.in
 import { CTA } from '../../types/common.interface';
 import { IFilterType } from '../../components/Common/Modal/FilterModal/filterModal.interface';
 
-/**
- * Represents a Call-to-Action (CTA) object.
- */
 export interface ICTA {
-  /**
-   * The title of the CTA.
-   */
   title: string;
-  
-  /**
-   * The URL or href of the CTA.
-   */
   href: string;
 }
 
-/**
- * Represents a map of content types.
- * The keys are strings and the values are also strings.
- */
 interface ContentTypeMap {
   [key: string]: string;
 }
 
-/**
- * Represents an organization.
- */
 export interface Organization {
-  /**
-   * The unique identifier of the organization.
-   */
   uid: string;
-
-  /**
-   * The name of the organization.
-   */
   name: string;
-
-  /**
-   * The plan ID of the organization.
-   */
   plan_id: string;
-
-  /**
-   * The expiration date of the organization's plan.
-   */
   expires_on: string;
-
-  /**
-   * Indicates whether the organization is enabled or not.
-   */
   enabled: boolean;
-
-  /**
-   * Indicates whether over-usage is allowed for the organization.
-   */
   is_over_usage_allowed: boolean;
-
-  /**
-   * The date and time when the organization was created.
-   */
   created_at: string;
-
-  /**
-   * The date and time when the organization was last updated.
-   */
   updated_at: string;
-
-  /**
-   * The tags associated with the organization.
-   */
   tags: string[];
 }
 
-/**
- * Represents a user in the application.
- */
 export interface User {
-  /**
-   * The email address of the user.
-   */
   email: string;
-
-  /**
-   * The username of the user.
-   */
   username: string;
-
-  /**
-   * The first name of the user.
-   */
   first_name: string;
-
-  /**
-   * The last name of the user.
-   */
   last_name: string;
-
-  /**
-   * The mobile number of the user.
-   */
   mobile_number: string;
-
-  /**
-   * The country code associated with the user's mobile number.
-   */
   country_code: string;
-
-  /**
-   * The organizations the user belongs to.
-   */
   organizations: Organization[];
 }
-
-/**
- * Represents the details of a file.
- */
 export interface FileDetails {
-  /**
-   * Specifies whether the file path is a local path.
-   */
   isLocalPath?: boolean;
-
-  /**
-   * Specifies the type of CMS (Content Management System) for the file.
-   */
   cmsType?: string;
-
-  /**
-   * Specifies the local path of the file.
-   */
   localPath?: string;
-
-  /**
-   * Specifies the AWS (Amazon Web Services) data for the file.
-   */
   awsData?: {
-    /**
-     * Specifies the AWS region for the file.
-     */
     awsRegion?: string;
-
-    /**
-     * Specifies the AWS bucket name for the file.
-     */
     bucketName?: string;
-
-    /**
-     * Specifies the AWS bucket key for the file.
-     */
     buketKey?: string;
   };
 }
-
-/**
- * Represents a file object.
- */
 export interface IFile {
-  /**
-   * The unique identifier of the file.
-   */
   id?: string;
-
-  /**
-   * The name of the file.
-   */
   name: string;
-
-  /**
-   * The size of the file in bytes.
-   */
   size?: number;
-
-  /**
-   * The type of the file.
-   */
   type?: string;
-
-  /**
-   * The URL of the file.
-   */
   url?: string;
-
-  /**
-   * The validation status of the file.
-   */
   validation?: string;
-
-  /**
-   * The details of the file.
-   */
   file_details?: FileDetails;
-
-  /**
-   * Indicates whether the file has been validated.
-   */
   isValidated: boolean;
 }
 
-/**
- * Represents a CMS Type.
- * Extends the ICardType interface.
- */
 export interface ICMSType extends ICardType {
   allowed_file_formats: ICardType[];
   doc_url: ICTA;
   parent: string;
 }
 
-/**
- * Represents a step in the application.
- */
 export interface IStep {
-  /**
-   * The unique identifier of the step.
-   */
   step_id: string;
-
-  /**
-   * The title of the step.
-   */
   title: string;
-
-  /**
-   * The description of the step.
-   */
   description: string;
-
-  /**
-   * The text to display when the step is locked.
-   */
   step_lock_text?: string;
-
-  /**
-   * The status of the step.
-   */
   status?: string;
-
-  /**
-   * Indicates whether the step is locked.
-   */
   lock: boolean;
-
-  /**
-   * Indicates whether the step is active.
-   */
   active?: boolean;
-
-  /**
-   * The data component to render for the step.
-   */
   data?: (props: any) => JSX.Element;
-
-  /**
-   * The summary component to render for the step.
-   */
   summery?: (props: any) => JSX.Element;
-
-  /**
-   * The placeholder text to display when the step is empty.
-   */
   empty_step_placeholder?: string;
 }
 
-/**
- * Represents a URL type with a title and href.
- */
 export interface IURLType {
   title: string;
   href: string;
 }
 
-/**
- * Represents a legacy CMS component.
- */
 export interface ILegacyCMSComponent {
-  /**
-   * The title of the component.
-   */
   title: string;
-
-  /**
-   * An array of CMS types.
-   */
   all_cms: ICMSType[];
-
-  /**
-   * The call-to-action text.
-   */
   cta: string;
-
-  /**
-   * An array of steps.
-   */
   all_steps: IStep[];
-
-  /**
-   * The restricted keyword link.
-   */
   restricted_keyword_link: IURLType;
-
-  /**
-   * The text for the restricted keyword checkbox.
-   */
   restricted_keyword_checkbox_text: string;
-
-  /**
-   * The text for the file format checkbox.
-   */
   file_format_checkbox_text: string;
-
-  /**
-   * An array of filter types for CMS.
-   */
   cmsFilterList: IFilterType[];
-
-  /**
-   * The affix call-to-action text.
-   */
   affix_cta: string;
-
-  /**
-   * The file format call-to-action text.
-   */
   file_format_cta: string;
 }
 
-/**
- * Represents the interface for the destination stack component.
- */
 export interface IDestinationStackComponent {
   title: string;
   description: string;
@@ -346,10 +105,6 @@ export interface IDestinationStackComponent {
   };
   all_steps: IStep[];
 }
-
-/**
- * Represents the interface for content mapping.
- */
 export interface IContentMapping {
   content_types_heading: string;
   description: string;
@@ -360,64 +115,33 @@ export interface IContentMapping {
   table_search_placeholder: '';
 }
 
-/**
- * Represents the interface for MigrationExecution.
- */
 export interface MigrationExecution {
   disable: boolean;
   title: string;
   width: string;
 }
-
-/**
- * Represents the migration execution information.
- */
 export interface IMigrationExecution {
   migration_information: MigrationExecution[];
 }
 
-/**
- * Represents an action call-to-action (CTA).
- */
 interface ActionCta {
-  /**
-   * The title of the CTA.
-   */
   title: string;
-
-  /**
-   * The theme of the CTA.
-   */
   theme: string;
 }
 
-/**
- * Represents the fields of a Contentstack object.
- */
 interface ContentstackFields {
   title: string;
   field_types: FieldTypes[];
 }
 
-/**
- * Represents the types of fields.
- */
 interface FieldTypes {
   label: string;
   value: string;
 }
-
-/**
- * Represents a locale.
- */
 interface locales {
   code: string;
   name: string;
 }
-
-/**
- * Represents the interface for the legacy CMS.
- */
 export interface ILegacyCms {
   selectedCms: ICMSType;
   selectedFileFormat: ICardType;
@@ -427,25 +151,14 @@ export interface ILegacyCms {
   isFileFormatCheckboxChecked: boolean;
   currentStep:number
 }
-
-/**
- * Represents the destination stack information.
- */
 export interface IDestinationStack {
   selectedOrg: IDropDown;
   selectedStack: IDropDown;
 }
-
-/**
- * Represents the interface for the content mapper.
- */
 export interface IContentMapper {
   content_type_mapping: ContentTypeMap;
 }
 
-/**
- * Represents the interface for a new migration.
- */
 export interface INewMigration {
   legacy_cms: ILegacyCms;
   destination_stack: IDestinationStack;
@@ -453,59 +166,18 @@ export interface INewMigration {
   test_migration: ITestMigration;
 }
 
-/**
- * Represents the data structure for migration data.
- */
 export interface IMigrationData {
-  /**
-   * An array of all flow steps.
-   */
   allFlowSteps: IFlowStep[];
-
-  /**
-   * The current flow step.
-   */
   currentFlowStep: IFlowStep;
-
-  /**
-   * The legacy CMS component data.
-   */
   legacyCMSData: ILegacyCMSComponent;
-
-  /**
-   * The destination stack component data.
-   */
   destinationStackData: IDestinationStackComponent;
-
-  /**
-   * The content mapping data.
-   */
   contentMappingData: IContentMapping;
-
-  /**
-   * The migration execution data.
-   */
   migrationexecution: IMigrationExecution;
-
-  /**
-   * The settings data.
-   */
   settings: string;
-
-  /**
-   * The heading for migration steps.
-   */
   migration_steps_heading: string;
-
-  /**
-   * The test migration data.
-   */
   testmigrationData: ITestMigration;
 }
 
-/**
- * Represents a dropdown item.
- */
 export interface IDropDown {
   uid?: string;
   label: string;
@@ -515,100 +187,27 @@ export interface IDropDown {
   locales: locales[];
   created_at: string;
 }
-
-/**
- * Represents the interface for the migration test.
- */
 export interface ITestMigration {
   stack_link: string;
   stack_api_key: string;
 }
-
-/**
- * Represents the interface for the application context.
- */
 export interface IAppContext {
-  /**
-   * The authentication token.
-   */
   authToken: string;
-
-  /**
-   * Sets the authentication token.
-   * @param token - The authentication token.
-   */
   setAuthToken: (token: string) => void;
-
-  /**
-   * The user object.
-   */
   user: User;
-
-  /**
-   * Updates the user object.
-   * @param user - The updated user object.
-   */
   updateUser: (user: User) => void;
-
-  /**
-   * The list of organisations as dropdown options.
-   */
   organisationsList: IDropDown[];
-
-  /**
-   * Updates the list of organisations.
-   * @param list - The updated list of organisations.
-   */
   updateOrganisationsList: (list: IDropDown[]) => void;
-
-  /**
-   * The selected organisation as a dropdown option.
-   */
   selectedOrganisation: IDropDown;
-
-  /**
-   * Updates the selected organisation.
-   * @param dropdown - The updated selected organisation.
-   */
   updateSelectedOrganisation: (dropdown: IDropDown) => void;
-
-  /**
-   * Indicates whether the user is authenticated or not.
-   */
   isAuthenticated: boolean;
-
-  /**
-   * Sets the authentication flag.
-   * @param flag - The authentication flag.
-   */
   setIsAuthenticated: (flag: boolean) => void;
-
-  /**
-   * The data for a new migration.
-   */
   newMigrationData: INewMigration;
-
-  /**
-   * Updates the data for a new migration.
-   * @param data - The updated data for a new migration.
-   */
   updateNewMigrationData: (data: Partial<INewMigration>) => void;
-
-  /**
-   * The data for a migration.
-   */
   migrationData: IMigrationData;
-
-  /**
-   * Updates the data for a migration.
-   * @param data - The updated data for a migration.
-   */
   updateMigrationData: (data: Partial<IMigrationData>) => void;
 }
 
-/**
- * Represents the default dropdown configuration.
- */
 export const DEFAULT_DROPDOWN: IDropDown = {
   label: '',
   value: '',
@@ -619,9 +218,6 @@ export const DEFAULT_DROPDOWN: IDropDown = {
   created_at: ''
 };
 
-/**
- * Represents the default organization.
- */
 export const DEFAULT_ORGANISATION: Organization = {
   uid: '',
   name: '',
@@ -634,9 +230,6 @@ export const DEFAULT_ORGANISATION: Organization = {
   tags: []
 };
 
-/**
- * Represents the default user object.
- */
 export const DEFAULT_USER: User = {
   email: '',
   username: '',
@@ -647,114 +240,36 @@ export const DEFAULT_USER: User = {
   organizations: []
 };
 
-/**
- * Represents a file with its details.
- */
 export const DEFAULT_FILE: IFile = {
-  /**
-   * The unique identifier of the file.
-   */
   id: '',
-  /**
-   * The name of the file.
-   */
   name: '',
-  /**
-   * The size of the file in bytes.
-   */
   size: 0,
-  /**
-   * The type of the file.
-   */
   type: '',
-  /**
-   * Additional details about the file.
-   */
   file_details: {
-    /**
-     * Indicates if the file is a local path.
-     */
     isLocalPath: false,
-    /**
-     * The type of the CMS (Content Management System) associated with the file.
-     */
     cmsType: '',
-    /**
-     * The local path of the file.
-     */
     localPath: '',
-    /**
-     * AWS (Amazon Web Services) data associated with the file.
-     */
     awsData: {
-      /**
-       * The AWS region where the file is stored.
-       */
       awsRegion: '',
-      /**
-       * The name of the AWS S3 bucket where the file is stored.
-       */
       bucketName: '',
-      /**
-       * The key of the file in the AWS S3 bucket.
-       */
       buketKey: ''
     }
   },
-  /**
-   * Indicates if the file has been validated.
-   */
   isValidated: false
 };
 
-/**
- * Represents the default CMS type.
- */
 export const DEFAULT_CMS_TYPE: ICMSType = {
-  /**
-   * The allowed file formats for the CMS type.
-   */
   allowed_file_formats: [],
-
-  /**
-   * The title of the CMS type.
-   */
   title: '',
-
-  /**
-   * The description of the CMS type.
-   */
   description: '',
-
-  /**
-   * The group name of the CMS type.
-   */
   group_name: '',
-
-  /**
-   * The documentation URL for the CMS type.
-   */
   doc_url: {
-    /**
-     * The href of the documentation URL.
-     */
     href: '',
-
-    /**
-     * The title of the documentation URL.
-     */
     title: ''
   },
-
-  /**
-   * The parent of the CMS type.
-   */
   parent: ''
 };
 
-/**
- * Represents the default legacy CMS configuration.
- */
 export const DEFAULT_LEGACY_CMS: ILegacyCms = {
   selectedCms: DEFAULT_CMS_TYPE,
   selectedFileFormat: defaultCardType,
@@ -765,32 +280,20 @@ export const DEFAULT_LEGACY_CMS: ILegacyCms = {
   currentStep:-1,
 };
 
-/**
- * Represents the default destination stack.
- */
 export const DEFAULT_DESTINATION_STACK: IDestinationStack = {
   selectedOrg: DEFAULT_DROPDOWN,
   selectedStack: DEFAULT_DROPDOWN
 };
 
-/**
- * Default content mapper object.
- */
 export const DEFAULT_CONTENT_MAPPER: IContentMapper = {
   content_type_mapping: {}
 };
 
-/**
- * Default test migration object.
- */
 export const DEFAULT_TEST_MIGRATION: ITestMigration = {
   stack_link: '',
   stack_api_key: ''
 };
 
-/**
- * Default new migration object.
- */
 export const DEFAULT_NEW_MIGRATION: INewMigration = {
   legacy_cms: DEFAULT_LEGACY_CMS,
   destination_stack: DEFAULT_DESTINATION_STACK,
@@ -798,63 +301,24 @@ export const DEFAULT_NEW_MIGRATION: INewMigration = {
   test_migration: DEFAULT_TEST_MIGRATION
 };
 
-/**
- * Represents the default URL type.
- */
 export const DEFAULT_URL_TYPE: IURLType = {
   title: '',
   href: ''
 };
 
-/**
- * Represents the default legacy CMS data.
- */
 export const DEFAULT_LEGACY_CMS_DATA: ILegacyCMSComponent = {
-  /**
-   * The title of the legacy CMS component.
-   */
   title: '',
-  /**
-   * An array of all CMS items.
-   */
   all_cms: [],
-  /**
-   * The call-to-action text.
-   */
   cta: '',
-  /**
-   * An array of all steps.
-   */
   all_steps: [],
-  /**
-   * The restricted keyword link.
-   */
   restricted_keyword_link: DEFAULT_URL_TYPE,
-  /**
-   * The list of CMS filter items.
-   */
   cmsFilterList: [],
-  /**
-   * The text for the restricted keyword checkbox.
-   */
   restricted_keyword_checkbox_text: '',
-  /**
-   * The text for the file format checkbox.
-   */
   file_format_checkbox_text: '',
-  /**
-   * The affix call-to-action text.
-   */
   affix_cta: '',
-  /**
-   * The file format call-to-action text.
-   */
   file_format_cta: ''
 };
 
-/**
- * Represents the default destination stack data.
- */
 export const DEFAULT_DESTINATION_STACK_DATA: IDestinationStackComponent = {
   title: '',
   cta: '',
@@ -867,9 +331,6 @@ export const DEFAULT_DESTINATION_STACK_DATA: IDestinationStackComponent = {
   all_steps: []
 };
 
-/**
- * Represents the default content mapping data.
- */
 export const DEFAULT_CONTENT_MAPPING_DATA: IContentMapping = {
   content_types_heading: '',
   description: '',
@@ -886,9 +347,6 @@ export const DEFAULT_CONTENT_MAPPING_DATA: IContentMapping = {
   table_search_placeholder: ''
 };
 
-/**
- * Represents the default migration execution object.
- */
 export const DEFAULT_MIGRATION_EXECUTION: IMigrationExecution = {
   migration_information: [
     {
@@ -899,9 +357,6 @@ export const DEFAULT_MIGRATION_EXECUTION: IMigrationExecution = {
   ]
 };
 
-/**
- * Default migration data object.
- */
 export const DEFAULT_MIGRATION_DATA: IMigrationData = {
   allFlowSteps: [],
   currentFlowStep: DEFAULT_IFLOWSTEP,
@@ -914,77 +369,32 @@ export const DEFAULT_MIGRATION_DATA: IMigrationData = {
   testmigrationData: DEFAULT_TEST_MIGRATION
 };
 
-/**
- * Default application context object.
- */
 export const DEFAULT_APP_CONTEXT: IAppContext = {
-  /**
-   * Authentication token.
-   */
   authToken: '',
-  /**
-   * Function to set the authentication token.
-   */
   setAuthToken: function (): void {
     return;
   },
-  /**
-   * User object.
-   */
   user: DEFAULT_USER,
-  /**
-   * Function to update the user object.
-   */
   updateUser: function (): void {
     return;
   },
-  /**
-   * Flag indicating whether the user is authenticated.
-   */
   isAuthenticated: false,
-  /**
-   * Function to set the authentication status.
-   */
   setIsAuthenticated: function (): void {
     return;
   },
-  /**
-   * New migration data object.
-   */
   newMigrationData: DEFAULT_NEW_MIGRATION,
-  /**
-   * Function to update the new migration data object.
-   */
   updateNewMigrationData: function (): void {
     return;
   },
-  /**
-   * Migration data object.
-   */
   migrationData: DEFAULT_MIGRATION_DATA,
-  /**
-   * Function to update the migration data object.
-   */
   updateMigrationData: function (): void {
     return;
   },
-  /**
-   * List of organisations.
-   */
   organisationsList: [],
-  /**
-   * Function to update the list of organisations.
-   */
   updateOrganisationsList: function () {
     return;
   },
-  /**
-   * Selected organisation object.
-   */
   selectedOrganisation: DEFAULT_DROPDOWN,
-  /**
-   * Function to update the selected organisation object.
-   */
   updateSelectedOrganisation: function (): void {
     return;
   }
diff --git a/ui/src/context/app/app.provider.tsx b/ui/src/context/app/app.provider.tsx
index 0ebc2ba5..855669ca 100644
--- a/ui/src/context/app/app.provider.tsx
+++ b/ui/src/context/app/app.provider.tsx
@@ -35,15 +35,6 @@ type IProps = {
   children?: ReactNode;
 };
 
-/**
- * Provides the AppContext for the application.
- *
- * @component
- * @param {Object} props - The component props.
- * @param {React.ReactNode} props.children - The child components.
- * @returns {JSX.Element} The rendered component.
- */
-
 const AppContextProvider: FC<IProps> = ({ children }) => {
   //********* ALL STATES HERE  *********/
   const [authToken, setAuthToken] = useState<string>('');
diff --git a/ui/src/hooks/index.ts b/ui/src/hooks/index.ts
index 1a55a7ec..74c7e86b 100644
--- a/ui/src/hooks/index.ts
+++ b/ui/src/hooks/index.ts
@@ -1,10 +1,4 @@
 // Use this hook for any frequent changes , that impect on performance
-/**
- * Creates a debounced version of a callback function.
- * @param callback The callback function to be debounced.
- * @param wait The debounce wait time in milliseconds (default: 250ms).
- * @returns A debounced version of the callback function.
- */
 export function useDebouncer<Params extends any[]>(callback: (...args: Params) => any, wait = 250) {
   let timeoutId: any = null;
   return (...args: Params) => {
diff --git a/ui/src/pages/Errors/error.interface.ts b/ui/src/pages/Errors/error.interface.ts
index a1f8fa97..db60669e 100644
--- a/ui/src/pages/Errors/error.interface.ts
+++ b/ui/src/pages/Errors/error.interface.ts
@@ -1,6 +1,3 @@
-/**
- * Represents the error type.
- */
 export interface ErrorType {
   section_title: string;
   description: string;
diff --git a/ui/src/pages/Errors/index.tsx b/ui/src/pages/Errors/index.tsx
index 4806d976..2e484f07 100644
--- a/ui/src/pages/Errors/index.tsx
+++ b/ui/src/pages/Errors/index.tsx
@@ -18,21 +18,11 @@ type IErrorProps = {
   children?: ReactNode;
 };
 
-/**
- * Represents the ErrorPage component.
- * @param {IErrorProps} props - The props for the ErrorPage component.
- * @param {string} props.contentType - The content type.
- * @param {ReactNode} props.children - The children of the ErrorPage component.
- * @returns {JSX.Element} The rendered ErrorPage component.
- */
 const ErrorPage: FC<IErrorProps> = ({ contentType, children }: IErrorProps) => {
   const [data, setData] = useState<ErrorType>(default_error_type);
 
   const { url, type } = contentType;
 
-  /**
-   * Fetches data for the ErrorPage component.
-   */
   const fetchData = () => {
     // getContentByURL({
     //   contentType: type,
diff --git a/ui/src/pages/Home/home.interface.ts b/ui/src/pages/Home/home.interface.ts
index 716ce7b7..1ae83303 100644
--- a/ui/src/pages/Home/home.interface.ts
+++ b/ui/src/pages/Home/home.interface.ts
@@ -1,33 +1,12 @@
-/**
- * Represents the type for the homepage.
- */
 export interface HomepageType {
   cta?: CTA;
   description?: string;
   heading?: string;
 }
 
-/**
- * Represents a Call to Action (CTA) item.
- */
 export interface CTA {
-  /**
-   * The title of the CTA.
-   */
   title?: string;
-
-  /**
-   * The URL of the CTA.
-   */
   url?: string;
-
-  /**
-   * The theme of the CTA.
-   */
   theme?: string;
-
-  /**
-   * Indicates whether the CTA should be displayed with an icon.
-   */
   with_icon?: boolean;
 }
diff --git a/ui/src/pages/Home/index.tsx b/ui/src/pages/Home/index.tsx
index cee71e63..2436eaf7 100644
--- a/ui/src/pages/Home/index.tsx
+++ b/ui/src/pages/Home/index.tsx
@@ -13,15 +13,9 @@ import { CS_ENTRIES } from '../../utilities/constants';
 // Interface
 import { HomepageType } from './home.interface';
 
-/**
- * Represents the Home page component.
- */
 const Home = () => {
   const [data, setData] = useState<HomepageType>({});
 
-  /**
-   * Fetches data for the Home page.
-   */
   const fetchData = async () => {
     //check if offline CMS data field is set to true, if then read data from cms data file.
     getCMSDataFromFile(CS_ENTRIES.HOME_PAGE)
diff --git a/ui/src/pages/Login/index.tsx b/ui/src/pages/Login/index.tsx
index aca3c73f..0f343717 100644
--- a/ui/src/pages/Login/index.tsx
+++ b/ui/src/pages/Login/index.tsx
@@ -39,15 +39,6 @@ import './index.scss';
 
 import { AppContext } from '../../context/app/app.context';
 
-/**
- * Login component for user authentication.
- *
- * @component
- * @example
- * return (
- *   <Login />
- * )
- */
 const Login: FC<IProps> = () => {
   const [data, setData] = useState<LoginType>({});
 
diff --git a/ui/src/pages/Login/login.interface.ts b/ui/src/pages/Login/login.interface.ts
index 266f54f0..6eec0465 100644
--- a/ui/src/pages/Login/login.interface.ts
+++ b/ui/src/pages/Login/login.interface.ts
@@ -2,33 +2,11 @@ import { NotificationItemProps } from '@contentstack/venus-components/build/comp
 import { ReactNode } from 'react';
 import { CTA } from '../../types/common.interface';
 
-/**
- * Represents the login type.
- */
 export interface LoginType {
-  /**
-   * The heading of the login page.
-   */
   heading?: string;
-
-  /**
-   * The login details.
-   */
   login?: Login;
-
-  /**
-   * The subtitle of the login page.
-   */
   subtitle?: string;
-
-  /**
-   * The two-factor authentication details.
-   */
   two_factor_authentication?: TFA;
-
-  /**
-   * The copyright text.
-   */
   copyrightText?: string;
 }
 interface Login {
@@ -59,9 +37,6 @@ interface SMS {
   pre_link_text?: string;
 }
 
-/**
- * Represents the interface for the login states.
- */
 export type IStates = {
   sso_loading: boolean;
   error: any;
@@ -75,16 +50,10 @@ export type IStates = {
   submitted: boolean;
 };
 
-/**
- * Represents the props for the Login component.
- */
 export interface IProps {
   children?: ReactNode;
 }
 
-/**
- * Represents the default states for the login interface.
- */
 export const defaultStates: IStates = {
   sso_loading: false,
   activeTab: 0,
@@ -101,62 +70,24 @@ export const defaultStates: IStates = {
   submitted: false
 };
 
-/**
- * Represents a user object.
- */
 export interface User {
-  /**
-   * The email address of the user.
-   */
   email: string;
-
-  /**
-   * The password of the user.
-   */
   password: string;
-
-  /**
-   * The region of the user. (Optional)
-   */
   region?: string | null;
-
-  /**
-   * The two-factor authentication token of the user. (Optional)
-   */
   tfa_token?: string | null;
 }
 
-/**
- * Represents the response object returned by the server when a user logs in.
- */
 export interface UserRes {
-  /**
-   * The message associated with the response.
-   */
   message?: string;
-
-  /**
-   * The status code of the response.
-   */
   status?: number;
-
-  /**
-   * The data payload of the response.
-   */
   data?: Response;
 }
 
-/**
- * Represents the response object returned from the login API.
- */
 interface Response {
   notice?: string;
   error_message?: string;
 }
 
-/**
- * Represents the SMS token used for login.
- */
 export interface SmsToken {
   email: string;
   password: string;
diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx
index 7a3f78f9..8fb6b009 100644
--- a/ui/src/pages/Migration/index.tsx
+++ b/ui/src/pages/Migration/index.tsx
@@ -36,13 +36,6 @@ import TestMigration from '../../components/TestMigration';
 import MigrationExecution from '../../components/MigrationExecution';
 import { Notification } from '@contentstack/venus-components';
 
-/**
- * Represents the Migration component.
- * This component is responsible for managing the migration process.
- * It fetches data from the CMS file, updates the app context, and handles the step changes.
- * It also renders the migration steps and provides navigation between them.
- */
-
 const Migration = () => {
   const [projectData, setProjectData] = useState<MigrationResponse>();
   const [isLoading, setIsLoading] = useState(false);
diff --git a/ui/src/pages/MigrationEditor/index.scss b/ui/src/pages/MigrationEditor/index.scss
index 3959ee3f..3cc4e410 100644
--- a/ui/src/pages/MigrationEditor/index.scss
+++ b/ui/src/pages/MigrationEditor/index.scss
@@ -1,11 +1,5 @@
 @import '../../scss/variables';
-/**
- * Styles for the MigrationEditor page.
- */
 .migration-container {
-  /**
-   * Styles for the body section of the page layout.
-   */
   #PageLayout__body {
     //display: flex;
     margin-left: 0;
@@ -14,10 +8,6 @@
     padding: 0;
     overflow: hidden;
   }
-
-  /**
-   * Styles for the page title.
-   */
   .PageTitle {
     margin-left: 1rem;
     font-weight: 700;
@@ -28,10 +18,6 @@
     white-space: nowrap;
     line-height: normal;
   }
-
-  /**
-   * Styles for the step flow wrapper tree area.
-   */
   .step-flow-wrapper-tree-area {
     // border-right: 1px solid $color-base-gray-40;
     display: flex;
@@ -40,10 +26,6 @@
     max-height: 94vh;
     min-height: calc(100vh - 115px);
   }
-
-  /**
-   * Styles for the step flow wrapper content area.
-   */
   .step-flow-wrapper-content-area {
     display: flex;
     flex-direction: column;
diff --git a/ui/src/pages/MigrationEditor/index.tsx b/ui/src/pages/MigrationEditor/index.tsx
index ecc85f94..9fbceeee 100644
--- a/ui/src/pages/MigrationEditor/index.tsx
+++ b/ui/src/pages/MigrationEditor/index.tsx
@@ -18,9 +18,6 @@ import NewMigrationWrapper from '../../components/Migrations/NewMigration/NewMig
 import './index.scss';
 import {  updateNewMigrationData } from '../../store/slice/migrationDataSlice';
 
-/**
- * Represents the Migration Editor page.
- */
 const MigrationEditor = () => {
   const navigate = useNavigate();
   const params: Params<string> = useParams();
diff --git a/ui/src/pages/Projects/index.scss b/ui/src/pages/Projects/index.scss
index 7266190a..f814d301 100644
--- a/ui/src/pages/Projects/index.scss
+++ b/ui/src/pages/Projects/index.scss
@@ -1,9 +1,5 @@
 @import '../../scss/variables';
 
-/**
- * Styles for the Projects page.
- */
-
 .project-search-wrapper {
   margin-left: $px-12;
   .Search {
@@ -36,7 +32,6 @@
     }
   }
 }
-
 .EmptyState__description {
   p {
     color: $color-font-base;
@@ -53,7 +48,6 @@
     }
   }
 }
-
 .EmptyStateWrapper {
   .EmptyState {
     max-width: 35rem !important;
diff --git a/ui/src/pages/Projects/index.tsx b/ui/src/pages/Projects/index.tsx
index d85fdc26..bfc9f6fc 100644
--- a/ui/src/pages/Projects/index.tsx
+++ b/ui/src/pages/Projects/index.tsx
@@ -36,11 +36,6 @@ import './index.scss';
 import { getUserDetails } from '../../store/slice/authSlice';
 
 
-/**
- * Renders the Projects page.
- * 
- * @returns The Projects component.
- */
 const Projects = () => {
   const [data, setData] = useState<ProjectsType>({});
   const {
diff --git a/ui/src/pages/Projects/projects.interface.ts b/ui/src/pages/Projects/projects.interface.ts
index e88afb1d..8f6aacfc 100644
--- a/ui/src/pages/Projects/projects.interface.ts
+++ b/ui/src/pages/Projects/projects.interface.ts
@@ -1,8 +1,5 @@
 import { CTA } from '../../types/common.interface';
 
-/**
- * Represents the type definition for the ProjectsType interface.
- */
 export interface ProjectsType {
   cta?: CTA;
   restore_cta?: CTA;
@@ -12,9 +9,6 @@ export interface ProjectsType {
   create_project_modal?: ModalType;
 }
 
-/**
- * Represents the interface for the ModalType object.
- */
 export interface ModalType {
   cta?: CTA[];
   description?: string;
@@ -26,10 +20,6 @@ export interface ModalType {
   primary_cta?: CTA;
   secondary_cta?: CTA;
 }
-
-/**
- * Represents the empty state of a project.
- */
 interface EmptyState {
   cta?: CTA[];
   description: string;
@@ -38,40 +28,12 @@ interface EmptyState {
   empty_search_heading: string;
   empty_search_description: string;
 }
-
-/**
- * Represents a project object.
- */
 export interface ProjectsObj {
-  /**
-   * The unique identifier of the project.
-   */
   uid: string;
-
-  /**
-   * The name of the project.
-   */
   name: string;
-
-  /**
-   * The creation date of the project.
-   */
   created_at: string;
-
-  /**
-   * The last update date of the project.
-   */
   updated_at: string;
-
-  /**
-   * The optional identifier of the project.
-   */
   id?: string;
-
-  /**
-   * The status of the project.
-   */
   status: string;
-
   // tags?: TagPill[];
 }
diff --git a/ui/src/pages/RegionalLogin/index.scss b/ui/src/pages/RegionalLogin/index.scss
index f57ee8b0..2e8ad1f3 100644
--- a/ui/src/pages/RegionalLogin/index.scss
+++ b/ui/src/pages/RegionalLogin/index.scss
@@ -1,25 +1,15 @@
 @import '../../scss/variables';
 
-/**
- * Styles for the RegionalLogin page.
- */
 .mainWrapper {
   display: flex;
 }
 
-/**
- * Styles for the cmsImageWrapper element.
- */
 .cmsImageWrapper {
   background-color: #6c5ce7;
   height: 100vh;
   max-width: 35%;
   flex: 0 0 35%;
 }
-
-/**
- * Styles for the formWrapper element.
- */
 .formWrapper {
   align-items: center;
   display: flex;
@@ -28,16 +18,9 @@
   max-width: 65%;
 }
 
-/**
- * Styles for the textStone600 class.
- */
 .textStone600 {
   color: $color-font-gray;
 }
-
-/**
- * Styles for the card element.
- */
 .card {
   border: 3px solid transparent;
   box-shadow: 0 $space-4 $space-20 0 rgba(0, 0, 0, 0.1);
@@ -49,73 +32,37 @@
   background-color: $color-base-white-5;
   background-clip: border-box;
   border-radius: 0.5rem;
-
-  /**
-   * Styles for the card element when hovered.
-   */
   &:hover {
     border: 3px solid #7c4dff;
-
-    /**
-     * Styles for link-arrow elements inside the card element when hovered.
-     */
     [class*='link-arrow'] {
       &:after {
         margin-left: $space-4;
       }
     }
-
-    /**
-     * Styles for anchor elements inside the card element when hovered.
-     */
     a {
       text-decoration: none;
     }
   }
-
-  /**
-   * Styles for the cardBody element inside the card element.
-   */
   .cardBody {
     color: $color-font-black;
     flex: 1 1 auto;
     padding: 1.25rem 1.25rem;
-
-    /**
-     * Styles for the h2 element inside the cardBody element.
-     */
     h2 {
       font-size: 1.25rem;
       font-weight: 700;
       letter-spacing: 0;
     }
-
-    /**
-     * Styles for the p element inside the cardBody element.
-     */
     p {
       color: $color-font-black;
     }
   }
-
-  /**
-   * Styles for the CardFooter element inside the card element.
-   */
   .CardFooter {
     background-color: rgba(0, 0, 0, 0);
     border-top: 0 solid rgba(34, 34, 34, 0.125);
     padding: 0.625rem 1.25rem;
-
-    /**
-     * Styles for the stretched-link class inside the CardFooter element.
-     */
     .stretched-link {
       line-height: $line-height-default;
     }
-
-    /**
-     * Styles for link-arrow elements inside the CardFooter element.
-     */
     [class*='link-arrow'] {
       &:after {
         top: 6px;
diff --git a/ui/src/pages/RegionalLogin/index.tsx b/ui/src/pages/RegionalLogin/index.tsx
index ecbe8df6..2af72a93 100644
--- a/ui/src/pages/RegionalLogin/index.tsx
+++ b/ui/src/pages/RegionalLogin/index.tsx
@@ -16,17 +16,11 @@ import { RegionType } from './regionalLogin.interface';
 // Style
 import './index.scss';
 
-/**
- * Component for regional login.
- */
 const RegionalLogin = () => {
   const [data, setData] = useState<RegionType>({});
 
   const navigate = useNavigate();
 
-  /**
-   * Fetches data from CMS.
-   */
   const fetchData = async () => {
     //check if offline CMS data field is set to true, if then read data from cms data file.
     await getCMSDataFromFile(CS_ENTRIES.REGIONS)
@@ -41,11 +35,6 @@ const RegionalLogin = () => {
     fetchData();
   }, []);
 
-  /**
-   * Handles the login click event.
-   * @param regionName - The name of the region.
-   * @param serviceName - The name of the service.
-   */
   const loginClick = (regionName: string, serviceName: string) => {
     let loginUrl: string;
 
diff --git a/ui/src/pages/RegionalLogin/regionalLogin.interface.ts b/ui/src/pages/RegionalLogin/regionalLogin.interface.ts
index 87f9ba98..9d5d60ea 100644
--- a/ui/src/pages/RegionalLogin/regionalLogin.interface.ts
+++ b/ui/src/pages/RegionalLogin/regionalLogin.interface.ts
@@ -1,28 +1,11 @@
 // Interface
 import { Image, CTA } from '../../types/common.interface';
-/**
- * Represents the type of a region.
- */
 export interface RegionType {
-  /**
-   * The description of the region type.
-   */
   description?: string;
-  
-  /**
-   * The heading of the region type.
-   */
   heading?: string;
-  
-  /**
-   * The regions associated with the region type.
-   */
   regions?: Region[];
 }
 
-/**
- * Represents a region.
- */
 interface Region {
   cta?: CTA;
   region_title?: string;
diff --git a/ui/src/services/api/login.service.ts b/ui/src/services/api/login.service.ts
index 4a44a72a..69ee0dc4 100644
--- a/ui/src/services/api/login.service.ts
+++ b/ui/src/services/api/login.service.ts
@@ -3,11 +3,6 @@ import { User, SmsToken } from '../../pages/Login/login.interface';
 
 import { postCall } from './service';
 
-/**
- * Creates a user session by making a POST request to the '/user-session' endpoint.
- * @param data - The user data to be sent in the request body.
- * @returns A Promise that resolves to the response from the server, or an error object if the request fails.
- */
 export const userSession = (data: User) => {
   try {
     return postCall(`${AUTH_ROUTES}/user-session`, data);
@@ -16,11 +11,6 @@ export const userSession = (data: User) => {
   }
 };
 
-/**
- * Requests an SMS token.
- * @param data - The data for the SMS token request.
- * @returns A Promise that resolves to the response of the API call.
- */
 export const requestSMSToken = (data: SmsToken) => {
   try {
     return postCall(`${AUTH_ROUTES}/request-token-sms`, data);
diff --git a/ui/src/services/api/migration.service.ts b/ui/src/services/api/migration.service.ts
index 6bb72ff0..ecbf72ac 100644
--- a/ui/src/services/api/migration.service.ts
+++ b/ui/src/services/api/migration.service.ts
@@ -8,12 +8,6 @@ const options = {
   }
 };
 
-/**
- * Retrieves migration data for a specific organization and project.
- * @param orgId - The ID of the organization.
- * @param projectId - The ID of the project.
- * @returns A Promise that resolves to the migration data.
- */
 export const getMigrationData = (orgId: string, projectId: string) => {
   try {
     return getCall(`${API_VERSION}/org/${orgId}/project/${projectId}/`, options);
@@ -22,14 +16,6 @@ export const getMigrationData = (orgId: string, projectId: string) => {
   }
 };
 
-/**
- * Updates the legacy CMS data for a specific organization and project.
- * 
- * @param orgId - The ID of the organization.
- * @param projectId - The ID of the project.
- * @param data - The data to be updated.
- * @returns The result of the update operation.
- */
 export const updateLegacyCMSData = (orgId: string, projectId: string, data: any) => {
   try {
     return putCall(`${API_VERSION}/org/${orgId}/project/${projectId}/legacy-cms`, data, options);
@@ -38,14 +24,6 @@ export const updateLegacyCMSData = (orgId: string, projectId: string, data: any)
   }
 };
 
-/**
- * Updates the affix data for a specific organization and project.
- * 
- * @param orgId - The ID of the organization.
- * @param projectId - The ID of the project.
- * @param data - The data to be updated.
- * @returns A promise that resolves to the updated data or an error object.
- */
 export const updateAffixData = (orgId: string, projectId: string, data: any) => {
   try {
     return putCall(`${API_VERSION}/org/${orgId}/project/${projectId}/affix`, data, options);
@@ -54,14 +32,6 @@ export const updateAffixData = (orgId: string, projectId: string, data: any) =>
   }
 };
 
-/**
- * Updates the file format data for a specific organization and project.
- * 
- * @param orgId - The ID of the organization.
- * @param projectId - The ID of the project.
- * @param data - The data to be updated.
- * @returns The result of the update operation.
- */
 export const updateFileFormatData = (orgId: string, projectId: string, data: any) => {
   try {
     return putCall(`${API_VERSION}/org/${orgId}/project/${projectId}/file-format`, data, options);
@@ -70,14 +40,6 @@ export const updateFileFormatData = (orgId: string, projectId: string, data: any
   }
 };
 
-/**
- * Updates the destination stack for a given organization and project.
- * 
- * @param orgId - The ID of the organization.
- * @param projectId - The ID of the project.
- * @param data - The data to be sent in the request body.
- * @returns A Promise that resolves to the result of the API call or an error object.
- */
 export const updateDestinationStack = (orgId: string, projectId: string, data: any) => {
   try {
     return putCall(
@@ -90,14 +52,6 @@ export const updateDestinationStack = (orgId: string, projectId: string, data: a
   }
 };
 
-/**
- * Updates the current step data for a specific organization and project.
- * 
- * @param orgId - The ID of the organization.
- * @param projectId - The ID of the project.
- * @param data - The data to be updated. Defaults to an empty object.
- * @returns A promise that resolves to the updated data or an error object.
- */
 export const updateCurrentStepData = (orgId: string, projectId: string, data: any = {}) => {
   try {
     return putCall(`${API_VERSION}/org/${orgId}/project/${projectId}/current-step`, data, options);
@@ -106,13 +60,6 @@ export const updateCurrentStepData = (orgId: string, projectId: string, data: an
   }
 };
 
-/**
- * Affixes confirmation to a project in an organization.
- * @param orgId - The ID of the organization.
- * @param projectId - The ID of the project.
- * @param data - Additional data to be sent with the request.
- * @returns A promise that resolves to the result of the API call or an error object.
- */
 export const affixConfirmation = (orgId: string, projectId: string, data: any = {}) => {
   try {
     return putCall(
@@ -125,13 +72,6 @@ export const affixConfirmation = (orgId: string, projectId: string, data: any =
   }
 };
 
-/**
- * Sends a file format confirmation request to the server.
- * @param orgId - The ID of the organization.
- * @param projectId - The ID of the project.
- * @param data - Additional data to be sent with the request.
- * @returns A promise that resolves to the response from the server, or an error object if an error occurs.
- */
 export const fileformatConfirmation = (orgId: string, projectId: string, data: any = {}) => {
   try {
     return putCall(
@@ -144,15 +84,6 @@ export const fileformatConfirmation = (orgId: string, projectId: string, data: a
   }
 };
 
-/**
- * Retrieves content types from the server.
- *
- * @param projectId - The ID of the project.
- * @param skip - The number of items to skip.
- * @param limit - The maximum number of items to retrieve.
- * @param searchText - The text to search for.
- * @returns A Promise that resolves to the retrieved content types or an error.
- */
 export const getContentTypes = (
   projectId: string,
   skip: number,
@@ -169,15 +100,6 @@ export const getContentTypes = (
   }
 };
 
-/**
- * Retrieves the field mapping for a given content type.
- *
- * @param contentTypeId - The ID of the content type.
- * @param skip - The number of records to skip.
- * @param limit - The maximum number of records to retrieve.
- * @param searchText - The text to search for in the field mapping.
- * @returns A Promise that resolves to the field mapping data.
- */
 export const getFieldMapping = async (
   contentTypeId: string,
   skip: number,
@@ -194,11 +116,6 @@ export const getFieldMapping = async (
   }
 };
 
-/**
- * Retrieves the existing content types for a given project.
- * @param projectId - The ID of the project.
- * @returns A Promise that resolves to the existing content types, or an error if the request fails.
- */
 export const getExistingContentTypes = async (projectId: string) => {
   try {
     return await getCall(`${API_VERSION}/mapper/${projectId}`, options);
@@ -207,15 +124,6 @@ export const getExistingContentTypes = async (projectId: string) => {
   }
 };
 
-/**
- * Updates the content type with the specified ID.
- * 
- * @param orgId - The ID of the organization.
- * @param projectId - The ID of the project.
- * @param contentTypeId - The ID of the content type.
- * @param data - The data to update the content type with.
- * @returns A Promise that resolves to the updated content type, or an error if the update fails.
- */
 export const updateContentType = async (
   orgId: string,
   projectId: string,
@@ -233,15 +141,6 @@ export const updateContentType = async (
   }
 };
 
-/**
- * Resets the fields of a content type to their initial mapping.
- * 
- * @param orgId - The ID of the organization.
- * @param projectId - The ID of the project.
- * @param contentTypeId - The ID of the content type.
- * @param data - The data to be sent in the request body.
- * @returns A promise that resolves to the response from the server, or an error object if the request fails.
- */
 export const resetToInitialMapping = async (
   orgId: string,
   projectId: string,
@@ -259,13 +158,6 @@ export const resetToInitialMapping = async (
   }
 };
 
-/**
- * Creates a test stack for migration.
- * @param orgId - The ID of the organization.
- * @param projectId - The ID of the project.
- * @param data - The data for the test stack.
- * @returns A promise that resolves to the result of the API call.
- */
 export const createTestStack = async (orgId: string, projectId: string, data: any) => {
   try {
     return await postCall(
@@ -278,13 +170,6 @@ export const createTestStack = async (orgId: string, projectId: string, data: an
   }
 };
 
-/**
- * Fetches an existing content type from the server.
- * 
- * @param projectId - The ID of the project.
- * @param contentTypeUid - The UID of the content type.
- * @returns A promise that resolves to the fetched content type, or an error if the request fails.
- */
 export const fetchExistingContentType = async (projectId: string, contentTypeUid: string) => {
   try {
     return await getCall(`${API_VERSION}/mapper/${projectId}/${contentTypeUid}`, options);
@@ -293,12 +178,6 @@ export const fetchExistingContentType = async (projectId: string, contentTypeUid
   }
 }
 
-/**
- * Retrieves the content mapper for a specific organization and project.
- * @param orgId - The ID of the organization.
- * @param projectId - The ID of the project.
- * @returns A Promise that resolves to the content mapper.
- */
 export const removeContentMapper = async(orgId: string, projectId: string) => {
   try {
     return await getCall(`${API_VERSION}/mapper/${orgId}/${projectId}/content-mapper`, options);   
diff --git a/ui/src/services/api/project.service.ts b/ui/src/services/api/project.service.ts
index e4f8f3c2..dfc36891 100644
--- a/ui/src/services/api/project.service.ts
+++ b/ui/src/services/api/project.service.ts
@@ -2,22 +2,12 @@ import { API_VERSION } from '../../utilities/constants';
 import { getDataFromLocalStorage } from '../../utilities/functions';
 import { getCall, postCall, putCall, deleteCall } from './service';
 
-/**
- * Returns the options object for API requests.
- * The options object includes the headers with the app token.
- * @returns The options object.
- */
 const options = () => ({
   headers: {
     app_token: getDataFromLocalStorage('app_token')
   }
 });
 
-/**
- * Retrieves all projects for a given organization.
- * @param orgId - The ID of the organization.
- * @returns A promise that resolves to the list of projects, or an error if the request fails.
- */
 export const getAllProjects = async (orgId: string) => {
   try {
     return await getCall(`${API_VERSION}/org/${orgId}/project`, options());
@@ -26,12 +16,6 @@ export const getAllProjects = async (orgId: string) => {
   }
 };
 
-/**
- * Retrieves a project by its organization ID and project ID.
- * @param orgId The ID of the organization.
- * @param projectId The ID of the project.
- * @returns A Promise that resolves to the project data, or an error if the request fails.
- */
 export const getProject = async (orgId: string, projectId: string) => {
   try {
     return await getCall(`${API_VERSION}/org/${orgId}/project/${projectId}`, options());
@@ -40,13 +24,6 @@ export const getProject = async (orgId: string, projectId: string) => {
   }
 };
 
-/**
- * Creates a new project for the specified organization.
- * 
- * @param orgId - The ID of the organization.
- * @param data - The data for the new project.
- * @returns A Promise that resolves to the created project, or an error if the request fails.
- */
 export const createProject = async (orgId: string, data: any) => {
   try {
     return await postCall(`${API_VERSION}/org/${orgId}/project/`, data, options());
@@ -55,13 +32,6 @@ export const createProject = async (orgId: string, data: any) => {
   }
 };
 
-/**
- * Updates a project.
- * @param orgId - The ID of the organization.
- * @param projectId - The ID of the project.
- * @param data - The data to update the project with.
- * @returns A promise that resolves to the updated project, or an error if the update fails.
- */
 export const updateProject = async (orgId: string, projectId: string, data: any) => {
   try {
     return await putCall(`${API_VERSION}/org/${orgId}/project/${projectId}`, data, options());
@@ -70,12 +40,6 @@ export const updateProject = async (orgId: string, projectId: string, data: any)
   }
 };
 
-/**
- * Deletes a project.
- * @param {string} orgId - The ID of the organization.
- * @param {string} projectId - The ID of the project to delete.
- * @returns {Promise<any>} - A promise that resolves to the result of the delete operation, or an error object if an error occurs.
- */
 export const deleteProject = async (orgId: string, projectId: string) => {
   try {
     return await deleteCall(`${API_VERSION}/org/${orgId}/project/${projectId}`, options());
diff --git a/ui/src/services/api/service.interface.ts b/ui/src/services/api/service.interface.ts
index 3d1ee4ef..f52ef611 100644
--- a/ui/src/services/api/service.interface.ts
+++ b/ui/src/services/api/service.interface.ts
@@ -1,22 +1,13 @@
-/**
- * Represents an error object.
- */
 export interface Error {
   code: number;
   message: string;
 }
 
-/**
- * Represents the response object for an organisation.
- */
 export interface OrganisationResponse {
   org_id: string;
   org_name: string;
 }
 
-/**
- * Represents the response object returned by the stack API.
- */
 export interface StackResponse {
   name: string;
   api_key: string;
@@ -25,9 +16,6 @@ export interface StackResponse {
   created_at: string;
 }
 
-/**
- * Represents the response object for a migration.
- */
 export interface MigrationResponse {
   legacy_cms: LegacyCms;
   _id: string;
@@ -46,17 +34,11 @@ export interface MigrationResponse {
   current_step: number;
 }
 
-/**
- * Represents the Legacy CMS interface.
- */
 export interface LegacyCms {
   cms: string;
   file_format: string;
 }
 
-/**
- * Represents the default migration response object.
- */
 export const defaultMigrationResponse: MigrationResponse = {
   legacy_cms: {
     cms: '',
diff --git a/ui/src/services/api/service.ts b/ui/src/services/api/service.ts
index 9da8483a..4381ee4d 100644
--- a/ui/src/services/api/service.ts
+++ b/ui/src/services/api/service.ts
@@ -2,12 +2,6 @@ import axios from 'axios';
 import { BASE_API_URL } from '../../utilities/constants';
 
 // ALL Axios Call
-/**
- * Makes a GET request to the specified URL.
- * @param url - The URL to make the GET request to.
- * @param options - Optional configuration for the request.
- * @returns A Promise that resolves to the response data, or rejects with the error response.
- */
 export const getCall = async (url: string, options?: any) => {
   try {
     return await axios.get(`${BASE_API_URL}${url}`, { ...options });
@@ -16,13 +10,6 @@ export const getCall = async (url: string, options?: any) => {
   }
 };
 
-/**
- * Makes a POST request to the specified URL with the provided data and options.
- * @param url - The URL to make the POST request to.
- * @param data - The data to send in the request body.
- * @param options - Optional additional options for the request.
- * @returns A Promise that resolves to the response data, or rejects with the error response.
- */
 export const postCall = async (url: string, data: any, options?: any) => {
   try {
     return await axios.post(`${BASE_API_URL}${url}`, data, options);
@@ -31,13 +18,6 @@ export const postCall = async (url: string, data: any, options?: any) => {
   }
 };
 
-/**
- * Makes a PUT request to the specified URL with the provided data and options.
- * @param url - The URL to send the PUT request to.
- * @param data - The data to send in the request body.
- * @param options - Additional options for the request.
- * @returns A Promise that resolves to the response data, or rejects with the error response.
- */
 export const putCall = async (url: string, data: any, options?: any) => {
   try {
     return await axios.put(`${BASE_API_URL}${url}`, data, options);
@@ -46,12 +26,6 @@ export const putCall = async (url: string, data: any, options?: any) => {
   }
 };
 
-/**
- * Sends a DELETE request to the specified URL with optional request options.
- * @param url - The URL to send the DELETE request to.
- * @param options - Optional request options.
- * @returns A Promise that resolves to the response data if the request is successful, or the error response if the request fails.
- */
 export const deleteCall = async (url: string, options?: any) => {
   try {
     return await axios.delete(`${BASE_API_URL}${url}`, options);
@@ -60,13 +34,6 @@ export const deleteCall = async (url: string, options?: any) => {
   }
 };
 
-/**
- * Makes a PATCH request to the specified URL with the provided data and options.
- * @param url - The URL to send the PATCH request to.
- * @param data - The data to be sent in the request body.
- * @param options - Additional options for the request (optional).
- * @returns A Promise that resolves to the response data if the request is successful, or the error response if the request fails.
- */
 export const patchCall = async (url: string, data: any, options?: any) => {
   try {
     return await axios.patch(`${BASE_API_URL}${url}`, data, options);
diff --git a/ui/src/services/api/stacks.service.ts b/ui/src/services/api/stacks.service.ts
index 15c4af7d..334b2b7a 100644
--- a/ui/src/services/api/stacks.service.ts
+++ b/ui/src/services/api/stacks.service.ts
@@ -2,23 +2,12 @@ import { API_VERSION } from '../../utilities/constants';
 import { getDataFromLocalStorage } from '../../utilities/functions';
 import { getCall, postCall } from './service';
 
-/**
- * Options for the API request.
- * @property {Object} headers - The headers for the request.
- * @property {string} headers.app_token - The app token retrieved from local storage.
- */
 const options = {
   headers: {
     app_token: getDataFromLocalStorage('app_token')
   }
 };
 
-/**
- * Retrieves all stacks in an organization based on the provided organization ID and search text.
- * @param orgId - The ID of the organization.
- * @param searchText - The search text used to filter the stacks.
- * @returns A promise that resolves to the result of the API call.
- */
 export const getAllStacksInOrg = async (orgId: string,searchText: string) => {
   try {
     return await getCall(`${API_VERSION}/org/${orgId}/stacks/${searchText}?`, options);
@@ -27,13 +16,6 @@ export const getAllStacksInOrg = async (orgId: string,searchText: string) => {
   }
 };
 
-/**
- * Creates stacks in an organization.
- * 
- * @param orgId - The ID of the organization.
- * @param data - The data for creating the stacks.
- * @returns A promise that resolves to the result of the API call.
- */
 export const createStacksInOrg = async (orgId: string, data: any) => {
   try {
     return await postCall(`${API_VERSION}/org/${orgId}/stacks`, data, options);
@@ -42,12 +24,6 @@ export const createStacksInOrg = async (orgId: string, data: any) => {
   }
 };
 
-/**
- * Retrieves the status of a stack.
- * @param orgId - The ID of the organization.
- * @param data - The stack API key.
- * @returns A Promise that resolves to the stack status.
- */
 export const getStackStatus = async (orgId: string, data: string) => {
   try {
     const stack_api = {
diff --git a/ui/src/services/api/upload.service.ts b/ui/src/services/api/upload.service.ts
index 7baaae41..ead7f3f2 100644
--- a/ui/src/services/api/upload.service.ts
+++ b/ui/src/services/api/upload.service.ts
@@ -5,12 +5,6 @@ import { API_VERSION } from '../../utilities/constants';
 import { getDataFromLocalStorage } from '../../utilities/functions';
 
 //Axios Calls for Upload server
-/**
- * Makes a GET request to the specified URL with optional request options.
- * @param url - The URL to make the GET request to.
- * @param options - Optional request options.
- * @returns A Promise that resolves to the response data if the request is successful, or the error response if the request fails.
- */
 export const getCall = async (url: string, options?: any) => {
   try {
     const response = await axios.get(url, { ...options });
@@ -20,13 +14,6 @@ export const getCall = async (url: string, options?: any) => {
   }
 };
 
-/**
- * Makes a POST request to the specified URL with the provided data.
- * @param url - The URL to make the POST request to.
- * @param data - The data to send in the request body.
- * @param options - Additional options for the request.
- * @returns A Promise that resolves to the response from the server.
- */
 export const postCall = async (url: string, data: User, options?: any) => {
   try {
     const response = await axios.post(url, data, options);
@@ -36,13 +23,6 @@ export const postCall = async (url: string, data: User, options?: any) => {
   }
 };
 
-/**
- * Makes a PUT request to the specified URL with the provided data and options.
- * @param url - The URL to send the PUT request to.
- * @param data - The data to be sent in the request body.
- * @param options - Optional additional options for the request.
- * @returns A Promise that resolves to the response from the server, or rejects with an error response.
- */
 export const putCall = async (url: string, data: User, options?: any) => {
   try {
     const response = await axios.put(url, data, options);
@@ -53,19 +33,10 @@ export const putCall = async (url: string, data: User, options?: any) => {
 };
 
 //upload file to s3
-/**
- * Returns the upload file path.
- * @returns The upload file path.
- */
 export const uploadFilePath = () => {
   return `${UPLOAD_FILE_RELATIVE_URL}upload`;
 };
 
-/**
- * Validates a file for a specific project.
- * @param projectId - The ID of the project.
- * @returns A Promise that resolves to the result of the file validation.
- */
 export const fileValidation = (projectId: string) => {
   try {
     const options = {
@@ -81,11 +52,6 @@ export const fileValidation = (projectId: string) => {
   }
 };
 
-/**
- * Retrieves the configuration for uploading files.
- * @returns {Promise<any>} A promise that resolves to the configuration object.
- * @throws {Error} If an error occurs while retrieving the configuration.
- */
 export const getConfig = () => {
   try {
     return getCall(`${UPLOAD_FILE_RELATIVE_URL}config`);
diff --git a/ui/src/services/api/user.service.ts b/ui/src/services/api/user.service.ts
index 041af1de..f9668f6b 100644
--- a/ui/src/services/api/user.service.ts
+++ b/ui/src/services/api/user.service.ts
@@ -2,10 +2,6 @@ import { API_VERSION } from '../../utilities/constants';
 import { getDataFromLocalStorage } from '../../utilities/functions';
 import { getCall } from './service';
 
-/**
- * Retrieves user profile data from the server.
- * @returns {Promise<any>} A promise that resolves to the user profile data.
- */
 export const getUser = async () => {
   const options = {
     headers: {
@@ -20,11 +16,6 @@ export const getUser = async () => {
   }
 };
 
-/**
- * Retrieves all locales for a given organization.
- * @param orgId - The ID of the organization.
- * @returns A Promise that resolves to the locales data, or an error if the request fails.
- */
 export const getAllLocales = async (orgId: string) => {
   const options = {
     headers: {
diff --git a/ui/src/store/index.tsx b/ui/src/store/index.tsx
index 40fef852..8ba9b818 100644
--- a/ui/src/store/index.tsx
+++ b/ui/src/store/index.tsx
@@ -10,21 +10,12 @@ import { persistReducer, persistStore } from 'redux-persist';
 import authMiddleware from './middleware/authMiddleware';
 
 
-/**
- * Configuration object for persisting the Redux store.
- * @property {string} key - The key to use for storing the state in the storage.
- * @property {Object} storage - The storage engine to use for persisting the state.
- */
 const persistConfig = {
   key: 'root',
   storage,
 };
 
 // Combine reducers
-/**
- * Root reducer function that combines all the reducers for the Redux store.
- * @returns The combined reducer object.
- */
 const rootReducer = combineReducers({
   migration: migrationDataSlice,
   authentication: authSlice,
@@ -33,14 +24,6 @@ const rootReducer = combineReducers({
 const persistedReducer = persistReducer(persistConfig, rootReducer);
 
 // Create the store
-/**
- * Creates the Redux store with the specified reducer and middleware.
- *
- * @param {Object} options - The options for configuring the store.
- * @param {Function} options.reducer - The root reducer function for the store.
- * @param {Function} options.middleware - The middleware function for the store.
- * @returns {Object} The Redux store object.
- */
 const store = configureStore({
   reducer: persistedReducer,
   middleware: (getDefaultMiddleware:any) =>
diff --git a/ui/src/store/middleware/authMiddleware.tsx b/ui/src/store/middleware/authMiddleware.tsx
index 94c89355..3b7b3b6c 100644
--- a/ui/src/store/middleware/authMiddleware.tsx
+++ b/ui/src/store/middleware/authMiddleware.tsx
@@ -5,11 +5,6 @@ import { getUserDetails } from '../slice/authSlice'; // Adjust import path
 
 // Your other imports...
 
-/**
- * Middleware function that handles authentication-related actions.
- * @param {Object} store - The Redux store object.
- * @returns {Function} - The next middleware function in the chain.
- */
 const authMiddleware: Middleware = ({dispatch}) => (next) => (action: any) => { 
   if (action.type === '@@INIT') {    
     dispatch(getUserDetails());
diff --git a/ui/src/store/slice/authSlice.tsx b/ui/src/store/slice/authSlice.tsx
index cc9e5d5f..4abe1409 100644
--- a/ui/src/store/slice/authSlice.tsx
+++ b/ui/src/store/slice/authSlice.tsx
@@ -13,26 +13,18 @@ import { getUser } from '../../services/api/user.service';
 import { OrganisationResponse } from '../../services/api/service.interface';
 
 
-/**
- * Represents the initial state of the authentication slice.
- */
 const initialState = {
-  authToken: getDataFromLocalStorage('app_token'),
-  user : DEFAULT_USER,
-  isAuthenticated:false,
-  organisationsList: [],
-  selectedOrganisation: DEFAULT_DROPDOWN
+    authToken: getDataFromLocalStorage('app_token'),
+    user : DEFAULT_USER,
+    isAuthenticated:false,
+    organisationsList: [],
+    selectedOrganisation: DEFAULT_DROPDOWN
+    
 }
 
-/**
- * Async thunk function to get user details.
- * @param _ - The payload (not used in this case)
- * @param dispatch - The Redux dispatch function
- * @returns A Promise that resolves to an object containing user details, organisations list, and selected organisation
- */
-const getUserDetails: any = createAsyncThunk(
+const getUserDetails:any = createAsyncThunk(
   'get/getUserDetails',
-  async (_, { dispatch }) => {
+  async (_,{dispatch}) => {
     try {
       const response = await getUser();
 
@@ -79,66 +71,45 @@ const getUserDetails: any = createAsyncThunk(
   }
 );
 
-/**
- * Represents the authentication slice of the Redux store.
- */
 const authSlice = createSlice({
-  name:'authentication',
-  initialState,
-  reducers:{
-    /**
-     * Sets the authentication token and updates the authentication status.
-     * @param state - The current state of the authentication slice.
-     * @param action - The Redux action containing the payload.
-     */
-    setAuthToken : (state, action)=>{
-      state.authToken = action?.payload;
-      state.isAuthenticated = !!action?.payload;
-    },
-    /**
-     * Sets the user object in the authentication slice.
-     * @param state - The current state of the authentication slice.
-     * @param action - The Redux action containing the payload.
-     */
-    setUser : (state, action) => {
-      state.user = action?.payload;
-    },
-    /**
-     * Reinitializes the state of the authentication slice to its default values.
-     * @param state - The current state of the authentication slice.
-     */
-    reInitiliseState: (state) => {
-      state.authToken = '';
-      state.user = DEFAULT_USER;
-      state.isAuthenticated = false;
-      state.organisationsList = [];
-      state.selectedOrganisation = DEFAULT_DROPDOWN;
+    name:'authentication',
+    initialState,
+    reducers:{
+        setAuthToken : (state, action)=>{
+            state.authToken = action?.payload;
+            state.isAuthenticated = !!action?.payload;
+        },
+        setUser : (state, action) => {
+            state.user = action?.payload;
+        },
+        reInitiliseState: (state) => {
+            state.authToken = '';
+            state.user = DEFAULT_USER;
+            state.isAuthenticated = false;
+            state.organisationsList = [];
+            state.selectedOrganisation = DEFAULT_DROPDOWN;
+        },
+        setOrganisationsList: (state, action)=>{
+            state.organisationsList = action?.payload
+
+        },
+        setSelectedOrganisation: (state, action) => {
+            state.selectedOrganisation = action?.payload;
+        }
+
+
     },
-    /**
-     * Sets the list of organizations in the authentication slice.
-     * @param state - The current state of the authentication slice.
-     * @param action - The Redux action containing the payload.
-     */
-    setOrganisationsList: (state, action)=>{
-      state.organisationsList = action?.payload;
+    extraReducers: (builder) => {
+        builder.addCase(getUserDetails?.fulfilled,(state, action:any)=>{          
+            state.user = action?.payload?.user;
+            state.organisationsList = action?.payload?.organisationsList;
+            state.selectedOrganisation = action?.payload?.selectedOrganisation ;
+            state.isAuthenticated = !isEmptyString(state?.authToken || '');
+            
+
+        })
+        
     },
-    /**
-     * Sets the selected organization in the authentication slice.
-     * @param state - The current state of the authentication slice.
-     * @param action - The Redux action containing the payload.
-     */
-    setSelectedOrganisation: (state, action) => {
-      state.selectedOrganisation = action?.payload;
-    }
-  },
-  extraReducers: (builder) => {
-    builder.addCase(getUserDetails?.fulfilled,(state, action:any)=>{
-      state.user = action?.payload?.user;
-      state.organisationsList = action?.payload?.organisationsList;
-      state.selectedOrganisation = action?.payload?.selectedOrganisation ;
-      state.isAuthenticated = !isEmptyString(state?.authToken || '');
-    })
-  },
 })
 export const { setAuthToken, reInitiliseState, setOrganisationsList, setSelectedOrganisation, setUser } = authSlice.actions;
 
diff --git a/ui/src/store/slice/migrationDataSlice.tsx b/ui/src/store/slice/migrationDataSlice.tsx
index db5090c8..cfd2733e 100644
--- a/ui/src/store/slice/migrationDataSlice.tsx
+++ b/ui/src/store/slice/migrationDataSlice.tsx
@@ -5,54 +5,28 @@ import { createSlice } from '@reduxjs/toolkit'
 import {  DEFAULT_CONTENT_MAPPING_DATA, DEFAULT_DESTINATION_STACK_DATA, DEFAULT_LEGACY_CMS_DATA, DEFAULT_MIGRATION_DATA, DEFAULT_MIGRATION_EXECUTION, DEFAULT_NEW_MIGRATION, DEFAULT_TEST_MIGRATION, IMigrationData, INewMigration} from '../../context/app/app.interface';
 import { DEFAULT_IFLOWSTEP } from '../../components/Stepper/FlowStepper/flowStep.interface';
 
-/**
- * Represents the initial state of the migration data slice.
- */
 const initialState = {
-    migrationData: DEFAULT_MIGRATION_DATA,
-    newMigrationData: DEFAULT_NEW_MIGRATION,
-};
+    migrationData: DEFAULT_MIGRATION_DATA ,
+    newMigrationData: DEFAULT_NEW_MIGRATION 
+} 
 
-
-/**
- * Represents the migration data slice.
- */
 const migrationSlice = createSlice({
     name:'migration',
     initialState,
     reducers:{
-        /**
-         * Sets the new migration data.
-         * @param state - The current state.
-         * @param action - The action containing the payload.
-         */
         setNewMigrationData: (state, action) => {
             state.newMigrationData = action?.payload;
         },
-        /**
-         * Updates the new migration data.
-         * @param state - The current state.
-         * @param action - The action containing the payload.
-         */
         updateNewMigrationData: (state, action)=>{
             state.newMigrationData = {...state?.newMigrationData,...action?.payload};
         },
-        /**
-         * Sets the migration data.
-         * @param state - The current state.
-         * @param action - The action containing the payload.
-         */
         setMigrationData: (state, action) => {
             state.migrationData = action?.payload;
         },
-        /**
-         * Updates the migration data.
-         * @param state - The current state.
-         * @param action - The action containing the payload.
-         */
         updateMigrationData: (state, action) => {
             state.migrationData = {...state?.migrationData, ...action?.payload};
         }
+
     }
 })
 
diff --git a/ui/src/types/common.interface.ts b/ui/src/types/common.interface.ts
index 0a92d620..11e8b35c 100644
--- a/ui/src/types/common.interface.ts
+++ b/ui/src/types/common.interface.ts
@@ -1,51 +1,16 @@
-/**
- * Represents a Call-to-Action (CTA) element.
- */
 export interface CTA {
-  /**
-   * The title of the CTA.
-   */
   title?: string;
-
-  /**
-   * The URL that the CTA should navigate to.
-   */
   url?: string;
-
-  /**
-   * The theme or style of the CTA.
-   */
   theme?: string;
-
-  /**
-   * Indicates whether the CTA should be displayed with an icon.
-   */
   with_icon?: boolean;
-
-  /**
-   * Indicates whether the CTA is a secondary button.
-   */
   secondary_button?: boolean;
 }
 
-/**
- * Represents an image.
- */
 export interface Image {
-  /**
-   * The title of the image.
-   */
   title?: string;
-  
-  /**
-   * The URL of the image.
-   */
   url: string;
 }
 
-/**
- * Represents a logo with an image and a URL.
- */
 export interface Logo {
   image: Image;
   url: string;
diff --git a/ui/src/utilities/functions.ts b/ui/src/utilities/functions.ts
index 291ecab9..7035f1e3 100644
--- a/ui/src/utilities/functions.ts
+++ b/ui/src/utilities/functions.ts
@@ -1,49 +1,17 @@
 import { Notification } from '@contentstack/venus-components';
 import { WEBSITE_BASE_URL } from './constants';
 
-/**
- * Represents a collection of locale codes and their corresponding values.
- */
 export const Locales = {
-  /**
-   * English locale code.
-   */
   en: 'en-us',
-  /**
-   * French locale code.
-   */
   fr: 'fr-fr',
-  /**
-   * German locale code.
-   */
   de: 'de-de',
-  /**
-   * Japanese locale code.
-   */
   jp: 'ja-jp',
-  /**
-   * Korean locale code.
-   */
   kr: 'ko-kr',
-  /**
-   * Chinese locale code.
-   */
   cn: 'zh-cn',
-  /**
-   * Spanish locale code.
-   */
   es: 'es-mx',
-  /**
-   * Portuguese locale code.
-   */
   pt: 'pt-br'
 };
 
-/**
- * Returns the locale code based on the provided locale.
- * @param loc The locale for which to retrieve the locale code. Defaults to 'en'.
- * @returns The locale code corresponding to the provided locale.
- */
 export const getLocaleCode = (loc = 'en') => {
   return Locales[loc as keyof typeof Locales];
 };
@@ -58,18 +26,8 @@ export const validateArray = <T>(array: T[]) => Array.isArray(array) && array.le
 // Use: validateSingleImage(image)
 export const validateImage = (image: any) => image && image?.url;
 
-/**
- * Validates a link by checking if it exists and has a URL.
- * @param link - The link to validate.
- * @returns True if the link is valid, false otherwise.
- */
 export const validateLink = (link: any) => link && link?.url;
 
-/**
- * Replaces the domain URL of an image with the website base URL.
- * @param url - The URL of the image.
- * @returns The modified URL with the website base URL.
- */
 export const imageWithSiteDomainUrl = (url: string) => {
   if (WEBSITE_BASE_URL && url?.indexOf('https://images.contentstack.io') > -1) {
     return url.replace('https://images.contentstack.io', WEBSITE_BASE_URL);
@@ -80,19 +38,10 @@ export const imageWithSiteDomainUrl = (url: string) => {
   return url;
 };
 
-/**
- * Adds the domain to the given path.
- * @param path - The path to which the domain needs to be added.
- * @returns The updated path with the domain added.
- */
 export const addDomainInPath = (path: string) => {
   return `${WEBSITE_BASE_URL}${path}`;
 };
 
-/**
- * Displays a failure notification with the given error message.
- * @param errorMessage - The error message to display.
- */
 export const failtureNotification = (errorMessage: string) => {
   Notification({
     text: errorMessage,
@@ -106,31 +55,16 @@ export const failtureNotification = (errorMessage: string) => {
   });
 };
 
-/**
- * Clears performance marks.
- * @param markName - The name of the mark to clear.
- * @param clearAll - Optional. If true, clears all marks. Defaults to false.
- */
 export const clearMarks = (markName: string, clearAll?: boolean) => {
   if (clearAll) performance.clearMarks();
   else performance.clearMarks(markName);
 };
 
-/**
- * Clears the performance measures.
- * @param measreName - The name of the measure to clear.
- * @param clearAll - Optional. If true, clears all measures. Defaults to false.
- */
 export const clearMeasures = (measreName: string, clearAll?: boolean) => {
   if (clearAll) performance.clearMeasures();
   else performance.clearMeasures(measreName);
 };
 
-/**
- * Extracts the window object from a given string containing HTML script tags.
- * @param str - The string containing HTML script tags.
- * @returns The extracted window object as a string, or null if not found.
- */
 export const extractWindowObj = (str: string): string | null => {
   const re = /<script\b[^>]*>([\s\S]*?)<\/script>/g;
 
@@ -143,20 +77,11 @@ export const extractWindowObj = (str: string): string | null => {
   return null;
 };
 
-/**
- * Clears the local storage.
- * @returns {boolean} - Returns true if the local storage is cleared successfully, otherwise false.
- */
 export const clearLocalStorage = () => {
   localStorage.clear();
   return localStorage.length === 0;
 };
 
-/**
- * Retrieves data from the local storage based on the provided key.
- * @param key - The key used to retrieve the data from the local storage.
- * @returns The data stored in the local storage for the provided key, or null if the key does not exist.
- */
 export const getDataFromLocalStorage = (key: string) => {
   if (localStorage.getItem(key)) {
     return localStorage.getItem(key);
@@ -165,12 +90,6 @@ export const getDataFromLocalStorage = (key: string) => {
   return null;
 };
 
-/**
- * Sets data in the local storage with the specified key.
- * @param key - The key to set the data with.
- * @param data - The data to be stored in the local storage.
- * @returns True if the data was successfully set in the local storage, false otherwise.
- */
 export const setDataInLocalStorage = (key: string, data: any) => {
   localStorage.setItem(key, data);
 
@@ -181,13 +100,6 @@ export const setDataInLocalStorage = (key: string, data: any) => {
   return true;
 };
 
-/**
- * Calculates the time difference between the given day and the present day.
- * Returns a string representation of the time difference in a human-readable format.
- *
- * @param day - The day to calculate the time difference from.
- * @returns A string representation of the time difference.
- */
 export const getDays = (day: any) => {
   const presentDay = new Date().getTime();
   const projectDate = new Date(day).getTime();
@@ -215,23 +127,9 @@ export const getDays = (day: any) => {
   });
 };
 
-/**
- * Checks if a string is empty or consists of only whitespace characters.
- * @param str - The string to check.
- * @returns `true` if the string is empty or consists of only whitespace characters, `false` otherwise.
- */
 export const isEmptyString = (str: string | undefined) =>
   str === undefined || str === null || str.trim().length < 1;
 
-/**
- * Returns a shortened version of the given name if it exceeds 25 characters.
- * The shortened name will include the first 15 characters, followed by an ellipsis,
- * and the last 8 characters of the original name.
- * If the name is 25 characters or less, it will be returned as is.
- * 
- * @param name - The name to be shortened.
- * @returns The shortened name if it exceeds 25 characters, otherwise the original name.
- */
 export const shortName = (name: string) => {
   if (name && name.length > 25) {
     name = `${name.slice(0, 15)}...${name.slice(name.length - 8, name.length)}`;
@@ -241,11 +139,6 @@ export const shortName = (name: string) => {
   return name;
 };
 
-/**
- * Returns the file size in a human-readable format.
- * @param number - The file size in bytes.
- * @returns The file size in a human-readable format (bytes, KB, or MB).
- */
 export const returnFileSize = (number: number) => {
   if (number < 1024) {
     return number + 'bytes';
@@ -256,13 +149,6 @@ export const returnFileSize = (number: number) => {
   }
 };
 
-/**
- * Checks if the given data is a valid prefix.
- * A valid prefix should consist of 2 to 5 alphabetic characters (uppercase or lowercase).
- *
- * @param data - The data to be checked.
- * @returns True if the data is a valid prefix, false otherwise.
- */
 export const isValidPrefix = (data: string): boolean => {
   const regEx = /^[a-z A-Z]{2,5}$/;
 
diff --git a/uplaode-api/migration-sitecore/libs/configuration.js b/uplaode-api/migration-sitecore/libs/configuration.js
index 9c21aa8c..7875dde0 100644
--- a/uplaode-api/migration-sitecore/libs/configuration.js
+++ b/uplaode-api/migration-sitecore/libs/configuration.js
@@ -4,23 +4,15 @@ const read = require("fs-readdir-recursive");
 const helper = require("../utils/helper");
 
 
-/**
- * Assigns a folder name based on the provided path.
- *
- * @param {Object} options - The options object.
- * @param {string} options.path - The path to be processed.
- * @returns {string} The modified path with the folder name.
- */
 const assignFolderName = ({ path }) => {
   const spliter = "/sitecore";
   const newPath = path.split(spliter)?.[1];
   return `${spliter}${newPath}`;
 }
 
-/**
- * Extracts configuration data from the specified sitecore_folder.
- * @param {string} sitecore_folder - The path to the sitecore_folder.
- */
+
+
+
 function ExtractConfiguration(sitecore_folder) {
   const xml_folder = read(sitecore_folder);
   const obj = {};
diff --git a/uplaode-api/migration-sitecore/libs/contenttypes.js b/uplaode-api/migration-sitecore/libs/contenttypes.js
index a4b7e5f3..570384ec 100644
--- a/uplaode-api/migration-sitecore/libs/contenttypes.js
+++ b/uplaode-api/migration-sitecore/libs/contenttypes.js
@@ -9,24 +9,10 @@ const configChecker = "/content/Common/Configuration";
 const append = "a"
 
 
-/**
- * Checks if a given key is present in the timeZones array.
- *
- * @param {string} keyToFind - The key to search for.
- * @param {Array} timeZones - The array of time zones to search in.
- * @returns {boolean} - Returns true if the key is present in any of the time zones, otherwise returns false.
- */
 function isKeyPresent(keyToFind, timeZones) {
   return timeZones?.some?.(timeZone => Object?.keys?.(timeZone)?.includes?.(keyToFind));
 }
 
-/**
- * Creates a template based on the provided components.
- *
- * @param {Object} options - The options object.
- * @param {Object} options.components - The components object.
- * @returns {Object} - The created template object.
- */
 const createTemplate = ({ components }) => {
   components.item.$.field = components?.item?.fields?.field
   return components?.item?.$
@@ -361,17 +347,6 @@ const groupFlat = (data, item) => {
 }
 
 
-/**
- * Maps the content types based on the provided parameters.
- *
- * @param {Object} options - The options object.
- * @param {Array} options.components - The components array.
- * @param {Object} options.standardValues - The standard values object.
- * @param {string} options.content_type - The content type string.
- * @param {string} options.basePath - The base path string.
- * @param {string} options.sitecore_folder - The sitecore folder string.
- * @returns {Array} - The mapped content types array.
- */
 const contentTypeMapper = ({ components, standardValues, content_type, basePath, sitecore_folder }) => {
   const source = helper.readFile(
     path.join(process.cwd(), "/sitecoreMigrationData/MapperData/configuration.json")
diff --git a/uplaode-api/src/config/index.ts b/uplaode-api/src/config/index.ts
index 3ecf77d8..d0722ca5 100644
--- a/uplaode-api/src/config/index.ts
+++ b/uplaode-api/src/config/index.ts
@@ -9,5 +9,5 @@ export default {
     bucketName: 'migartion-test',
     buketKey: 'project/package 45.zip'
   },
-  localPath: '/Users/rohit/Desktop/package 45.zip'
-};
\ No newline at end of file
+  localPath: '/Users/snehal.pimple/Desktop/package 45.zip'
+};
diff --git a/uplaode-api/src/controllers/sitecore/index.ts b/uplaode-api/src/controllers/sitecore/index.ts
index 1438b917..2ca0823d 100644
--- a/uplaode-api/src/controllers/sitecore/index.ts
+++ b/uplaode-api/src/controllers/sitecore/index.ts
@@ -7,16 +7,6 @@ import { HTTP_CODES, HTTP_TEXTS } from "../../constants";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { contentTypes, ExtractConfiguration, reference, ExtractFiles } = require('migration-sitecore');
 
-/**
- * Creates a Sitecore mapper by performing various operations such as extracting files, extracting configuration,
- * retrieving content types, and creating dummy data for a given project ID.
- *
- * @param filePath - The file path where the items are located.
- * @param projectId - The ID of the project.
- * @param app_token - The application token.
- * @returns A Promise that resolves when the Sitecore mapper is created successfully.
- * @throws If any error occurs during the process.
- */
 const createSitecoreMapper = async (filePath: string = "", projectId: string | string[], app_token: string | string[]) => {
   try {
     const path = `${filePath}/items`;
@@ -28,13 +18,7 @@ const createSitecoreMapper = async (filePath: string = "", projectId: string | s
       const fieldMapping: any = { contentTypes: [] };
       for await (const contentType of infoMap?.contentTypeUids ?? []) {
         fieldMapping?.contentTypes?.push(
-          JSON.parse(readFileSync(`${infoMap?.path}/content_types/${contentType}`, 'utf8')),
-        );
-      }
-
-      for await (const globalField of infoMap?.globalFieldUids ?? []) {
-        fieldMapping?.globalFields?.push(
-          JSON.parse(readFileSync(`${infoMap?.path}/global_fields/${globalField}`, 'utf8')),
+          JSON.parse(readFileSync(`${infoMap?.path}/content_types/${contentType}`, 'utf8'))
         );
       }
       const config = {

From deac8346ad9c6cb6d70f1508db66982def5063f6 Mon Sep 17 00:00:00 2001
From: Rohit Kini <rohit.kini@contentstack.com>
Date: Mon, 15 Jul 2024 17:03:03 +0530
Subject: [PATCH 08/10] logger magnify demagnify functionality

---
 api/src/config/dev.config.ts           |   4 +-
 api/src/config/prod.config.ts          |   2 +
 api/src/server.ts                      |  13 ++-
 ui/src/common/assets/icons.tsx         |  19 +++-
 ui/src/components/LogScreen/index.scss |  62 ++++++-----
 ui/src/components/LogScreen/index.tsx  | 139 ++++++++++++++++++-------
 6 files changed, 176 insertions(+), 63 deletions(-)

diff --git a/api/src/config/dev.config.ts b/api/src/config/dev.config.ts
index 86cf8191..00f69565 100644
--- a/api/src/config/dev.config.ts
+++ b/api/src/config/dev.config.ts
@@ -10,4 +10,6 @@ export const devConfig = {
     AZURE_NA: "https://azure-na-app.contentstack.com/#!",
     AZURE_EU: "https://azure-eu-app.contentstack.com/#!",
   },
-};
+  LOG_FILE_PATH:
+    process.platform === "win32" ? ".\\combine.log" : "./combine.log", // Replace with the actual path to your log file
+};
\ No newline at end of file
diff --git a/api/src/config/prod.config.ts b/api/src/config/prod.config.ts
index 2a124479..7a49fdbd 100644
--- a/api/src/config/prod.config.ts
+++ b/api/src/config/prod.config.ts
@@ -11,4 +11,6 @@ export const prodConfig = {
     AZURE_NA: "https://azure-na-app.contentstack.com/#!",
     AZURE_EU: "https://azure-eu-app.contentstack.com/#!",
   },
+  LOG_FILE_PATH:
+    process.platform === "win32" ? ".\\combine.log" : "./combine.log", // Replace with the actual path to your log file
 };
diff --git a/api/src/server.ts b/api/src/server.ts
index 678121af..7e9f0cf4 100644
--- a/api/src/server.ts
+++ b/api/src/server.ts
@@ -20,6 +20,7 @@ import chokidar from "chokidar";
 import { Server } from "socket.io";
 import http from "http";
 import fs from "fs";
+
 try {
   const app = express();
   app.use(
@@ -55,9 +56,17 @@ try {
       logger.info(`Server listening at port ${config.PORT}`)
     );
     // Chokidar - Watch for log file changes
-    const logFilePath = "/Users/sayali.joshi/Projects/migration-v2-node-server/api/combine.log"; // Replace with the actual path to your log file
+    const logFilePath = config.LOG_FILE_PATH;
     const watcher = chokidar.watch(logFilePath);
     // Socket.IO - Send logs to client
+    /**
+     * The Socket.IO server instance.
+     *
+     * @remarks
+     * This server instance is responsible for handling real-time communication between the client and the server using the Socket.IO library.
+     *
+     * @type {Server}
+     */
     const io = new Server(
       server,
       (http,
@@ -94,4 +103,4 @@ try {
 } catch (e) {
   logger.error("Error while starting the server!");
   logger.error(e);
-}
+}
\ No newline at end of file
diff --git a/ui/src/common/assets/icons.tsx b/ui/src/common/assets/icons.tsx
index 179668e2..0b7f5d6c 100644
--- a/ui/src/common/assets/icons.tsx
+++ b/ui/src/common/assets/icons.tsx
@@ -770,4 +770,21 @@ export const LOG_OUT = (
   <path fillRule="evenodd" clipRule="evenodd" d="M9.1875 12C9.1875 11.6893 9.43934 11.4375 9.75 11.4375H20.25C20.5607 11.4375 20.8125 11.6893 20.8125 12C20.8125 12.3107 20.5607 12.5625 20.25 12.5625H9.75C9.43934 12.5625 9.1875 12.3107 9.1875 12Z" fill="#475161"/>
   <path fillRule="evenodd" clipRule="evenodd" d="M4.5 4.3125C4.45027 4.3125 4.40258 4.33225 4.36742 4.36742C4.33225 4.40258 4.3125 4.45027 4.3125 4.5V19.5C4.3125 19.5497 4.33225 19.5974 4.36742 19.6326C4.40258 19.6677 4.45027 19.6875 4.5 19.6875H9.75C10.0607 19.6875 10.3125 19.9393 10.3125 20.25C10.3125 20.5607 10.0607 20.8125 9.75 20.8125H4.5C4.1519 20.8125 3.81806 20.6742 3.57192 20.4281C3.32578 20.1819 3.1875 19.8481 3.1875 19.5V4.5C3.1875 4.1519 3.32578 3.81806 3.57192 3.57192C3.81806 3.32578 4.1519 3.1875 4.5 3.1875H9.75C10.0607 3.1875 10.3125 3.43934 10.3125 3.75C10.3125 4.06066 10.0607 4.3125 9.75 4.3125H4.5Z" fill="#475161"/>
   </svg>
-);  
\ No newline at end of file
+);  
+
+export const MAGNIFY = (
+<svg width="20" height="20" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.625 11.25C13.625 11.0429 13.4571 10.875 13.25 10.875C13.0429 10.875 12.875 11.0429 12.875 11.25V12.875H11.25C11.0429 12.875 10.875 13.0429 10.875 13.25C10.875 13.4571 11.0429 13.625 11.25 13.625H12.875V15.25C12.875 15.4571 13.0429 15.625 13.25 15.625C13.4571 15.625 13.625 15.4571 13.625 15.25V13.625H15.25C15.4571 13.625 15.625 13.4571 15.625 13.25C15.625 13.0429 15.4571 12.875 15.25 12.875H13.625V11.25Z" fill="#475161"/>
+  <path fillRule="evenodd" clipRule="evenodd" d="M7.625 13.25C7.625 10.1434 10.1434 7.625 13.25 7.625C16.3566 7.625 18.875 10.1434 18.875 13.25C18.875 14.6683 18.3501 15.9641 17.4838 16.9535L20.2652 19.7349C20.4116 19.8813 20.4116 20.1187 20.2652 20.2652C20.1187 20.4116 19.8813 20.4116 19.7349 20.2652L16.9535 17.4838C15.9641 18.3501 14.6683 18.875 13.25 18.875C10.1434 18.875 7.625 16.3566 7.625 13.25ZM13.25 8.375C10.5576 8.375 8.375 10.5576 8.375 13.25C8.375 15.9424 10.5576 18.125 13.25 18.125C15.9424 18.125 18.125 15.9424 18.125 13.25C18.125 10.5576 15.9424 8.375 13.25 8.375Z" fill="#475161"/>
+</svg>
+);
+
+export const DEMAGNIFY = (
+  <svg width="20" height="20" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.25 13.625H15.25C15.4571 13.625 15.625 13.4571 15.625 13.25C15.625 13.0429 15.4571 12.875 15.25 12.875H11.25C11.0429 12.875 10.875 13.0429 10.875 13.25C10.875 13.4571 11.0429 13.625 11.25 13.625Z" fill="#475161"/>
+  <path fillRule="evenodd" clipRule="evenodd" d="M7.625 13.25C7.625 10.1434 10.1434 7.625 13.25 7.625C16.3566 7.625 18.875 10.1434 18.875 13.25C18.875 14.6683 18.3501 15.9641 17.4838 16.9535L20.2652 19.7349C20.4116 19.8813 20.4116 20.1187 20.2652 20.2652C20.1187 20.4116 19.8813 20.4116 19.7349 20.2652L16.9535 17.4838C15.9641 18.3501 14.6683 18.875 13.25 18.875C10.1434 18.875 7.625 16.3566 7.625 13.25ZM13.25 8.375C10.5576 8.375 8.375 10.5576 8.375 13.25C8.375 15.9424 10.5576 18.125 13.25 18.125C15.9424 18.125 18.125 15.9424 18.125 13.25C18.125 10.5576 15.9424 8.375 13.25 8.375Z" fill="#475161"/>
+</svg>
+
+);
+
+
diff --git a/ui/src/components/LogScreen/index.scss b/ui/src/components/LogScreen/index.scss
index 479c674b..ae1c11f2 100644
--- a/ui/src/components/LogScreen/index.scss
+++ b/ui/src/components/LogScreen/index.scss
@@ -1,4 +1,7 @@
 @import '../../scss/variables';
+/**
+ * Styles for the LogScreen component.
+ */
 
 .logs-container {
   font-family: Arial, sans-serif;
@@ -8,8 +11,13 @@
   margin: 0 $px-24 $px-24;
   position: relative;
 }
+
 .logs-wrapper {
   position: relative;
+  
+  /**
+   * Styles for the action items within the LogScreen component.
+   */
   .action-items {
     position: absolute;
     right: 48px;
@@ -17,13 +25,16 @@
   }
 }
 
-
+/**
+ * Styles for each log entry within the LogScreen component.
+ */
 .log-entry {
   align-items: center;
   background-color: $color-base-white-10;
   display: flex;
   padding: 5px 0;
   position: relative;
+  
   &::before {
     background-color: $color-base-white-5;
     border-right: 1px solid $color-brand-secondary-lightest;
@@ -36,30 +47,33 @@
     width: 50px;
   }
   
-  .log-number, .log-time, .log-message {
+  /**
+   * Styles for the log number within each log entry.
+   */
+  .log-number {
+    text-align: center;
+    min-width: 50px;
+    color: $color-font-active;
+    position: relative;
+  }
+  
+  /**
+   * Styles for the log time within each log entry.
+   */
+  .log-time {
+    color: $color-font-active;
     font-family: "IBM Plex Mono", monospace;
     font-size: $size-font-medium;
     font-weight: $font-weight-medium;
+    padding: 0 $px-16;
   }
-}
-
-.log-number {
-  text-align: center;
-  min-width: 50px;
-  color: $color-font-active;
-  position: relative;
-}
-
-.log-time {
-  color: $color-font-active;
-  font-family: "IBM Plex Mono", monospace;
-  font-size: $size-font-medium;
-  font-weight: $font-weight-medium;
-  padding: 0 $px-16;
-}
-
-.log-message {
-  color: $color-black-222;
-  flex-grow: 1;
-  padding: 0 $px-16;
-}
+  
+  /**
+   * Styles for the log message within each log entry.
+   */
+  .log-message {
+    color: $color-black-222;
+    flex-grow: 1;
+    padding: 0 $px-16;
+  }
+}
\ No newline at end of file
diff --git a/ui/src/components/LogScreen/index.tsx b/ui/src/components/LogScreen/index.tsx
index 81a60160..66170972 100644
--- a/ui/src/components/LogScreen/index.tsx
+++ b/ui/src/components/LogScreen/index.tsx
@@ -1,11 +1,13 @@
 // Libraries
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Icon } from '@contentstack/venus-components';
 import io from 'socket.io-client';
 
 // CSS
 import './index.scss';
 
+import { MAGNIFY,DEMAGNIFY } from '../../common/assets';
+
 const logStyles: { [key: string]: React.CSSProperties } = {
   info: { backgroundColor: '#f1f1f1' },
   warn: { backgroundColor: '#ffeeba', color: '#856404' },
@@ -17,61 +19,128 @@ type LogsType = {
   serverPath: string;
 }
 
-const LogViewer = ({serverPath}: LogsType) => {
+/**
+ * LogViewer component displays logs received from the server.
+ * @param {string} serverPath - The path of the server to connect to.
+ */
+const LogViewer = ({ serverPath }: LogsType) => {
   const [logs, setLogs] = useState(["Loading logs..."]);
 
   useEffect(() => {
     const socket = io(serverPath || ''); // Connect to the server
+
+    /**
+     * Event listener for 'logUpdate' event.
+     * @param {string} newLogs - The new logs received from the server.
+     */
     socket.on('logUpdate', (newLogs: string) => {
-      console.log("new logs", newLogs);
-      
+      // console.log("new logs", newLogs);
       const logArray = newLogs.split('\n');
-      console.log(logArray);
+      // console.log(logArray);
       setLogs(logArray);
-
     });
-  
+
     return () => {
       socket.disconnect(); // Cleanup on component unmount
     };
   }, []);
-  
-  //SCROLL LISTENER
-  useEffect(() => {
-    window.addEventListener("scroll", handleScrollToTop);
-  });
 
-  const refScrollUp = useRef<HTMLDivElement>(null);
+  /**
+   * Scrolls to the top of the logs container.
+   */
   const handleScrollToTop = () => {
-    console.log("=============", refScrollUp, refScrollUp?.current);
-    
-    refScrollUp?.current?.scrollIntoView({ behavior: "smooth" });
+    const logsContainer = document.querySelector('.logs-container');
+    if (logsContainer) {
+      logsContainer.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }
+  }
+
+  /**
+   * Scrolls to the bottom of the logs container.
+   */
+  const handleScrollToBottom = () => {
+    const logsContainer = document.querySelector('.logs-container');
+    if (logsContainer) {
+      logsContainer.scrollTo({
+        top: logsContainer.scrollHeight,
+        behavior: 'smooth',
+      });
+    }
   }
+
+  /**
+   * Copies the logs to the clipboard.
+   */
+  const handleCopyLogs = () => {
+    const logsContainer = document.querySelector('.logs-container');
+    if (logsContainer) {
+      const range = document.createRange();
+      range.selectNode(logsContainer);
+      window.getSelection()?.removeAllRanges();
+      window.getSelection()?.addRange(range);
+      navigator.clipboard.writeText(logsContainer.textContent || '');
+      window.getSelection()?.removeAllRanges();
+    }
+  }
+
+  const [zoomLevel, setZoomLevel] = useState(1);
+
+  /**
+   * Zooms in the logs container.
+   */
+  const handleZoomIn = () => {
+    const logsContainer = document.querySelector('.logs-magnify') as HTMLElement;
+    if (logsContainer) {
+      setZoomLevel(prevZoomLevel => prevZoomLevel + 0.1);
+      logsContainer.style.transform = `scale(${zoomLevel})`;
+    }
+  };
+
+  /**
+   * Zooms out the logs container.
+   */
+  const handleZoomOut = () => {
+    const logsContainer = document.querySelector('.logs-magnify') as HTMLElement;
+    if (logsContainer) {
+      setZoomLevel(prevZoomLevel => prevZoomLevel - 0.1);
+      logsContainer.style.transform = `scale(${zoomLevel})`;
+    }
+  };
+
   return (
     <div className='logs-wrapper'>
       <div className="logs-container" style={{ height: '400px', overflowY: 'auto' }}>
-        {logs?.map((log, index) => {
-          console.log(log);
-          try {
-            const logObject = JSON.parse(log);
-            const level = logObject.level;
-            const timestamp = logObject.timestamp;
-            const message = logObject.message;
-            return (
-              <div key={index} style={logStyles[level] || logStyles.info} className="log-entry" ref={index === 0 ? refScrollUp : null}>
-                <div className="log-number">{index}</div>
-                <div className="log-time">{new Date(timestamp).toTimeString().split(' ')[0]}</div>
-                <div className="log-message">{message}</div>
-              </div>
-            );
-          } catch (error) {
-            console.error('Invalid JSON string', error);
-          }
-        })}
-        
+        <div className="logs-magnify">
+          {logs?.map((log, index) => {
+            // console.log(log);
+            try {
+              const logObject = JSON.parse(log);
+              const level = logObject.level;
+              const timestamp = logObject.timestamp;
+              const message = logObject.message;
+              return (
+                <div key={index} style={logStyles[level] || logStyles.info} className="log-entry">
+                  <div className="log-number">{index}</div>
+                  <div className="log-time">{new Date(timestamp).toTimeString().split(' ')[0]}</div>
+                  <div className="log-message">{message}</div>
+                </div>
+              );
+            } catch (error) {
+              console.error('Invalid JSON string', error);
+            }
+          })}
+        </div>
       </div>
       <div className='action-items'>
         <Icon icon="ArrowUp" version='v2' onClick={handleScrollToTop} />
+        <Icon icon="ArrowDown" version='v2' onClick={handleScrollToBottom} />
+        <span onClick={handleZoomIn}>{MAGNIFY}</span>
+        <span onClick={handleZoomOut}>{DEMAGNIFY}</span>
+        <Icon icon="ZoomOut" version='v2' onClick={handleZoomOut} />
+        <Icon icon="File" version='v2' onClick={handleCopyLogs} />
       </div>
     </div>
   );

From e308069ae613345d3f6327dd7bdccb35efcdb361 Mon Sep 17 00:00:00 2001
From: AishDani <aishwarya.dani@contentstack.com>
Date: Mon, 15 Jul 2024 18:07:44 +0530
Subject: [PATCH 09/10] refactor:content mapper bugs

---
 ui/src/components/ContentMapper/index.tsx     | 126 ++++++++++++++++--
 .../LegacyCms/Actions/LoadUploadFile.tsx      |  14 +-
 ui/src/components/MainHeader/index.tsx        |   1 +
 ui/src/pages/Migration/index.tsx              |   2 +-
 ui/src/services/api/migration.service.ts      |   8 +-
 5 files changed, 125 insertions(+), 26 deletions(-)

diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx
index 932ed583..d7ae1430 100644
--- a/ui/src/components/ContentMapper/index.tsx
+++ b/ui/src/components/ContentMapper/index.tsx
@@ -60,6 +60,85 @@ import AdvanceSettings from '../AdvancePropertise';
 
 // Styles
 import './index.scss';
+const dummy_obj:any = {
+  'single_line_text':{
+    label : 'Single Line Textbox',
+    options : {
+      'Single Line Textbox':'single_line_text',
+      'Multi Line Textbox':'multi_line_text',
+      'HTML Rich text Editor':'html',
+      'JSON Rich Text Editor':'json'}
+  },
+  'multi_line_text':{
+    label : 'Multi Line Textbox',
+    options : {
+      'HTML Rich text Editor': 'html',
+      'JSON Rich Text Editor':'json'}
+  },
+  'json':{
+    label:'JSON Rich Text Editor',
+    options : {
+      'JSON Rich Text Editor':'json'}
+  },
+  'html':{
+    label : 'HTML Rich text Editor',
+    options : {
+      'HTML Rich text Editor': 'html',
+      'JSON Rich Text Editor':'json'}
+
+  },
+  'text':{
+    label : 'Single Line Textbox',
+    options: {'Single Line Textbox':'single_line_text'}
+  },
+  'url': {
+    label: 'URL',
+    options:{'URL':'url'}
+  },
+  'file': {
+    label:'File',
+    options: {'File':'file'}
+  },
+  'number': { 
+    label:'Number',
+    options: {'Number':'number'}
+  },
+  'isodate': { label :'Date',
+    options: {'Date':'isodate'}
+  },
+  'boolean': {
+    label: 'Boolean',
+    options: {'Boolean':'boolean'}
+  },
+  'link': {
+    label:'Link',
+    options: {'Link':'link'}
+  },
+  'reference':{
+    label: 'Reference',
+    options: {'Reference':'reference'}
+  },
+  'dropdown': {
+    label:'Dropdown',
+    options: {'Dropdown':'dropdown'}
+  },
+  'radio': {
+    label :'Select',
+    options: {'Select':'select'}
+  },
+  'CheckBox': {
+    label:'Select',
+    options: {'Select':'checkbox'}
+  },
+  'global_field':{
+    label : 'Global',
+    options: {'Global':'global_field'}},
+  'group': {
+    label: 'Group',
+    options: {'Group':'group'}
+  }
+
+}
 
 const Fields: Mapping = {
   'Single Line Textbox': [
@@ -162,6 +241,7 @@ const ContentMapper = () => {
   const [contentTypeSchema, setContentTypeSchema] = useState<ContentTypesSchema[]>([]);
   const [showFilter, setShowFilter] = useState<boolean>(false);
   const [filteredContentTypes, setFilteredContentTypes] = useState<ContentType[]>([])
+  const [count, setCount] = useState<number>(0);
 
   /** ALL HOOKS Here */
   const { projectId = '' } = useParams();
@@ -244,6 +324,7 @@ const ContentMapper = () => {
     const { data } = await getContentTypes(projectId || '', 0, 5000, searchContentType || ''); //org id will always present
     
     setContentTypes(data?.contentTypes);
+    setCount(data?.contentTypes?.length);
     setFilteredContentTypes(data?.contentTypes);
     setSelectedContentType(data?.contentTypes?.[0]);
     setTotalCounts(data?.contentTypes?.[0]?.fieldMapping?.length);
@@ -480,21 +561,36 @@ const ContentMapper = () => {
     });
   };
   const SelectAccessor = (data: FieldMapType) => {
-    const OptionsForRow = Fields[data?.backupFieldType as keyof Mapping];
-
-    const option = Array.isArray(OptionsForRow)
-      ? OptionsForRow.map((option) => ({ label: option, value: option }))
-      : [{ label: OptionsForRow, value: OptionsForRow }];
+    
+    //const OptionsForRow = Fields[data?.backupFieldType as keyof Mapping];
+    const OptionsForRow = dummy_obj?.[data?.backupFieldType]?.options ;
+    const initialOption = {
+      label: dummy_obj?.[data?.ContentstackFieldType]?.label,
+      value: dummy_obj?.[data?.ContentstackFieldType]?.label,
+    };
+    let option:any;
+    if (Array.isArray(OptionsForRow)) {
+       option = OptionsForRow.map((option) => ({
+        label: option,
+        value: option,
+      }));
+    } else if (typeof OptionsForRow === 'object') {
+      option = Object.entries(OptionsForRow).map(([label, value]) => ({
+        label,
+        value,
+      }));
+    }else{
+      option = [{ label: OptionsForRow, value: OptionsForRow }]
+    }
 
       const fieldLabel = data?.ContentstackFieldType === 'url' || data?.ContentstackFieldType === 'group'
         ? data?.ContentstackFieldType : option?.[0]?.label
-        
     return (
       <div className="table-row">
         <div className="select">
           <Select
             id={data?.uid}
-            value={{ label: data?.ContentstackFieldType, value: fieldValue }}
+            value={initialOption || fieldValue}
             onChange={(selectedOption: FieldTypes) => handleValueChange(selectedOption, data?.uid)}
             placeholder="Select Field"
             version={'v2'}
@@ -925,13 +1021,15 @@ const ContentMapper = () => {
     }
     
     (e?.target as HTMLElement)?.closest('li')?.classList?.add('active-filter');
-    const filteredCT = contentTypes?.filter((ct) => CONTENT_MAPPING_STATUS[ct?.status] === value);
-
+    const filteredCT = contentTypes?.filter((ct) => {return CONTENT_MAPPING_STATUS[ct?.status] === value});
+    
     if (value !== 'All') {
-      setFilteredContentTypes(filteredCT)
+      setFilteredContentTypes(filteredCT);
+      setCount(filteredCT?.length);
     } else {
-      setFilteredContentTypes(contentTypes)
-    }
+      setFilteredContentTypes(contentTypes);
+      setCount(contentTypes?.length);
+    }   
     setShowFilter(false);
   }
 
@@ -952,7 +1050,7 @@ const ContentMapper = () => {
     return result;
   }
   const tableHeight = calcHeight();
-
+   
   return (
     <div className="step-container">
       <div className="d-flex flex-wrap table-container">
@@ -960,7 +1058,7 @@ const ContentMapper = () => {
         <div className="content-types-list-wrapper">
           <div className="content-types-list-header d-flex align-items-center justify-content-between">
             {contentTypesHeading && <h2>{contentTypesHeading}</h2> }
-            {contentTypes && validateArray(contentTypes) && contentTypes?.length }
+            {contentTypes && validateArray(contentTypes) &&  count }
           </div>
 
           <div className='ct-search-wrapper'>
diff --git a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
index ba112b78..d6a47ac3 100644
--- a/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
+++ b/ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx
@@ -130,11 +130,9 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
     dispatch(updateNewMigrationData(newMigrationDataObj));
 
     if(res?.status === 200){ 
-      setTimeout(()=>{
-        setIsValidated(true);
-        setValidationMessage('Validation is successful');
-
-      },1000);     
+      setIsValidated(true);
+      setValidationMessage('Validation is successful');
+   
       setIsDisabled(true); 
       
       if(! isEmptyString(newMigrationData?.legacy_cms?.affix) && ! isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) && ! isEmptyString(newMigrationData?.legacy_cms?.selectedFileFormat?.fileformat_id)){
@@ -339,7 +337,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
       setFileFormat(savedState.fileFormat);
       setProcessing(savedState.processing);
     }
-    if (savedState && savedState.isLoading) {
+    if (savedState && savedState.isLoading && !newMigrationData?.legacy_cms?.uploadedFile?.isValidated) {
 
       handleOnFileUploadCompletion();
     }
@@ -376,7 +374,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
   ]);
 
   useEffect(()=>{ 
-    if(newMigrationData?.legacy_cms?.uploadedFile?.isValidated)
+    if(newMigrationData?.legacy_cms?.uploadedFile?.isValidated && ! showProgress)
     {   
       
       setIsValidated(true);
@@ -431,7 +429,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
               <CircularLoader/>
              </div>
              }
-            {showMessage  &&
+            {showMessage  && ! showProgress &&
               (
               <>
                 <Paragraph className={`${validationClassName}` } tagName='p' variant="p2" text={validationMessgae}/>
diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx
index f1391406..71efbf71 100644
--- a/ui/src/components/MainHeader/index.tsx
+++ b/ui/src/components/MainHeader/index.tsx
@@ -98,6 +98,7 @@ const MainHeader = () => {
   useEffect(()=>{ 
     const handlePopState = (event: PopStateEvent) => {
       event.preventDefault();
+      window.history.pushState(null, '', window.location.href);
       handleonClick();
       
     };
diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx
index 8fb6b009..7fadece0 100644
--- a/ui/src/pages/Migration/index.tsx
+++ b/ui/src/pages/Migration/index.tsx
@@ -215,7 +215,7 @@ const Migration = () => {
               result = 'Imported File';
               break;
           }
-          if (currentIndex !== 3) {
+          if (currentIndex !== 3 || currentIndex !== 4) {
             Notification({
               notificationContent: { text: `Please complete ${result} step` },
               type: 'warning'
diff --git a/ui/src/services/api/migration.service.ts b/ui/src/services/api/migration.service.ts
index ecbf72ac..e680370a 100644
--- a/ui/src/services/api/migration.service.ts
+++ b/ui/src/services/api/migration.service.ts
@@ -89,10 +89,11 @@ export const getContentTypes = (
   skip: number,
   limit: number,
   searchText: string
-) => {
+) => { 
   try {
+    const encodedSearchText = encodeURIComponent(searchText) ; 
     return getCall(
-      `${API_VERSION}/mapper/contentTypes/${projectId}/${skip}/${limit}/${searchText}?`,
+      `${API_VERSION}/mapper/contentTypes/${projectId}/${skip}/${limit}/${encodedSearchText}?`,
       options
     );
   } catch (error: any) {
@@ -107,8 +108,9 @@ export const getFieldMapping = async (
   searchText: string
 ) => {
   try {
+    const encodedSearchText = encodeURIComponent(searchText) ;
     return await getCall(
-      `${API_VERSION}/mapper/fieldMapping/${contentTypeId}/${skip}/${limit}/${searchText}?`,
+      `${API_VERSION}/mapper/fieldMapping/${contentTypeId}/${skip}/${limit}/${encodedSearchText}?`,
       options
     );
   } catch (error: any) {

From 3c9bef1fb1cc2b09614045777530972c77f1c06a Mon Sep 17 00:00:00 2001
From: snehalsankhe <snehal.pimple@contentstack.com>
Date: Mon, 15 Jul 2024 18:26:57 +0530
Subject: [PATCH 10/10] solved bugs

---
 .../DestinationStack/Actions/LoadStacks.tsx   | 57 +++++++++++--------
 .../DestinationStack/DestinationStack.scss    |  2 +-
 ui/src/pages/Migration/index.tsx              |  6 +-
 3 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
index a7d41d94..2b8d688f 100644
--- a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
+++ b/ui/src/components/DestinationStack/Actions/LoadStacks.tsx
@@ -35,10 +35,8 @@ const LoadStacks = (props: LoadFileFormatProps) => {
   const selectedOrganisation = useSelector((state:RootState)=>state?.authentication?.selectedOrganisation);
   const dispatch = useDispatch();
   /****  ALL UseStates HERE  ****/
-  const [selectedStack, setSelectedStack] = useState<IDropDown>(
-    !isEmptyString(newMigrationData?.destination_stack?.selectedOrg?.value)
-      ? newMigrationData?.destination_stack?.selectedStack
-      : DEFAULT_DROPDOWN
+  const [selectedStack, setSelectedStack] = useState<any>(
+    null
   );  
 
   /****  ALL METHODS HERE  ****/
@@ -51,15 +49,15 @@ const LoadStacks = (props: LoadFileFormatProps) => {
   const [errorMessage, setErrorMessage] = useState<string>('');
   const [placeholder, setPlaceholder] = useState('Select a stack');
   const [asyncMount, setAsyncMount] = useState(true)
-
-
+  const [ isSelectOpen, setIsSelectOpen ] = useState<boolean>(false)
   const { projectId = '' }: Params<string> = useParams();
+  
   useEffect(()=>{
     if(!isEmptyString(newMigrationData?.destination_stack?.selectedStack?.value)){
       setSelectedStack(newMigrationData?.destination_stack?.selectedStack);
     }
   },[newMigrationData?.destination_stack?.selectedStack])
-
+  
   //Handle new stack details
   const handleOnSave = async (data: Stack) => {
     if (isSaving) return false;
@@ -75,7 +73,7 @@ const LoadStacks = (props: LoadFileFormatProps) => {
       ...data,
       master_locale: data?.locale
     });
-
+    
     setIsSaving(false);
 
     if (resp.status === 201) {
@@ -118,10 +116,10 @@ const LoadStacks = (props: LoadFileFormatProps) => {
 
   //Handle Legacy cms selection
   const handleDropdownChange = (name: string) => (data: IDropDown) => {
-    const stackCleared = data?.value === '' || data?.value === null || data === null;
-    
+    const stackCleared = data?.value === '' || data?.value === null || data === null;  
     if (stackCleared === true) {
-      setPlaceholder('Select a stack');
+      setIsError(true);
+      setErrorMessage("Please select a stack");
     }
         
     if (name === 'stacks' && data?.value != '+ Create a new Stack') {
@@ -136,6 +134,7 @@ const LoadStacks = (props: LoadFileFormatProps) => {
       
       dispatch(updateNewMigrationData((newMigrationDataObj)));
       if (!stackCleared) {
+        setIsError(false)
         if (props?.handleStepChange) {
           props?.handleStepChange(props?.currentStep, true);
         }
@@ -176,10 +175,8 @@ const LoadStacks = (props: LoadFileFormatProps) => {
         if (stackData?.data?.stacks?.length === 0 && (!stackData?.data?.stack)) {
           setIsError(true);
           setErrorMessage("Please create new stack there is no stack available");
-        } else {
-          setIsError(true)
-          setErrorMessage("Please select a stack")
-        }
+        } 
+
         stackArray.sort((a: IDropDown, b: IDropDown) => {
           return new Date(b?.created_at).getTime() - new Date(a?.created_at).getTime();
         });
@@ -218,13 +215,13 @@ const LoadStacks = (props: LoadFileFormatProps) => {
         },
         onClose: () => {
           resetAsyncSelect();
+          setIsError(false)
           return;
         }
       }
     });
   };
 
-  const [ isSelectOpen, setIsSelectOpen ] = useState<boolean>(false)
 
   useEffect(() => {
     // Fetch the select element using its class name or testId
@@ -237,26 +234,40 @@ const LoadStacks = (props: LoadFileFormatProps) => {
       div.onclick = handleCreateNewStack
       selectElement.appendChild(div)
     }
-  }, [asyncMount, isSelectOpen]);  
+  }, [asyncMount, isSelectOpen]); 
 
+  useEffect(() => {
+    const checkIfClickedOutside = (e: MouseEvent) => {
+      // If the menu is open and the clicked target is not within the menu,
+      // then close the menu
+      if (isSelectOpen && ref.current && !ref.current.contains(e.target as Node)) {
+        setIsSelectOpen(false);
+      }
+    };
+
+    document.body.addEventListener('mousedown', checkIfClickedOutside);
+
+    return () => {
+      // Cleanup the event listener
+      document.body.removeEventListener('mousedown', checkIfClickedOutside);
+    };
+  }, [isSelectOpen]);
   const handleDivClick = () => {
     setIsSelectOpen(!isSelectOpen)
   }
-
   return (
     <div className="">
       <div className="action-summary-wrapper ">
         <div className="service_list ">
           <div className="row">
             <div className="col-12">
-                <div  className="Dropdown-wrapper p-0 active selectElementlabel">
+                <div className="Dropdown-wrapper p-0 active selectElementlabel">
                   {asyncMount ? 
-                  <div onClick={handleDivClick}>
+                  <div ref={ref} onClick={handleDivClick} style={{ maxWidth: '600px' }}>
                     <AsyncSelect
                       version={'v2'}
                       loadMoreOptions={loadMoreOptions}
                       onChange={handleDropdownChange('stacks')}
-                      canEditOption={true}
                       value={selectedStack}
                       isSearchable={true}
                       isClearable={!emptyStackValue ? true : false }
@@ -266,7 +277,7 @@ const LoadStacks = (props: LoadFileFormatProps) => {
                       placeholder={placeholder}
                       limit={10}
                       updateOption={()=> undefined}
-                      error={isLoading ? false : emptyStackValue ? true : false }
+                      error={isLoading ? false : isError ? true : false }
                       defaultOptions={true}
                       debounceTimeout={0}
                       menuIsOpen={isSelectOpen}
@@ -275,7 +286,7 @@ const LoadStacks = (props: LoadFileFormatProps) => {
                     : null
                   }
                 </div>
-                {(emptyStackValue && !isLoading) && <div className='errorMessage'>{errorMessage}</div>}
+                {(isError && !isLoading) && <div className='errorMessage'>{errorMessage}</div>}
             </div> 
             <div className="col-12">
               <label className="title">Master Locale <span className='asterisk_input'></span>
diff --git a/ui/src/components/DestinationStack/DestinationStack.scss b/ui/src/components/DestinationStack/DestinationStack.scss
index 3a6abb71..3e799eed 100644
--- a/ui/src/components/DestinationStack/DestinationStack.scss
+++ b/ui/src/components/DestinationStack/DestinationStack.scss
@@ -31,7 +31,7 @@
    padding: 0;
   }
   .Select__v2 .Select__menu .Select__menu-list {
-    padding: 1px;
+    max-height: 130px;
   }
 }
 .stackselect {
diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx
index 8fb6b009..f9571a0d 100644
--- a/ui/src/pages/Migration/index.tsx
+++ b/ui/src/pages/Migration/index.tsx
@@ -201,8 +201,8 @@ const Migration = () => {
       else{
         setIsLoading(false);
 
-        if (legacyCMSRef.current) {
-          const currentIndex = legacyCMSRef.current.getInternalActiveStepIndex() + 1;         
+        if (legacyCMSRef?.current) {
+          const currentIndex = legacyCMSRef?.current?.getInternalActiveStepIndex() + 1;                
           let result;
           switch (currentIndex ) {
             case 0:
@@ -215,7 +215,7 @@ const Migration = () => {
               result = 'Imported File';
               break;
           }
-          if (currentIndex !== 3) {
+          if (currentIndex !== 3 || currentIndex !== 4) {
             Notification({
               notificationContent: { text: `Please complete ${result} step` },
               type: 'warning'