From 6c3f3cf326c31b3bd2aa8931c169c86238d9ad88 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <77892330+PritishBudhiraja@users.noreply.github.com>
Date: Tue, 12 Dec 2023 12:20:09 +0530
Subject: [PATCH 1/3] refactor: dead code removal. (#92)

---
 src/components/MultiLineInputBox.res          |  140 -
 src/components/NProgressIndicator.res         |    6 -
 src/components/Navbar.res                     |  100 -
 src/components/NewCalendarList.res            |   12 -
 src/components/NewDateRangePicker.res         |    2 +-
 src/components/NewPagination.res              |    7 -
 src/components/NoDataFound.res                |   14 +-
 src/components/NoteUI.res                     |    8 -
 src/components/Pagination.res                 |    6 -
 src/components/PaginationRevamp.res           |  203 --
 src/components/PopOver.res                    |   50 -
 src/components/RedirectSearchInput.res        |   11 -
 src/components/RemoteFiltersUtils.res         |  168 +-
 src/components/RouterTabs.res                 |   68 -
 src/components/SDKFunnelChart.res             |  732 -----
 src/components/SankeyUtils.res                |   37 +-
 src/components/SectionAccordion.res           |  105 -
 src/components/ServerComponent.res            |   14 -
 src/components/SidebarStyleUtils.res          |   55 -
 src/components/StagedProgressBar.res          |   93 -
 src/components/StaticTable.res                |  211 --
 src/components/SynchronizedCharts.res         |  294 --
 src/components/ThemeSelector.res              |   82 -
 src/components/ThemeToggle.res                |   41 -
 src/components/TimeInput.res                  |   17 -
 src/components/TimeRangeInput.res             |  242 --
 src/components/TimeRangeInputUtils.res        |   33 -
 src/components/Timer.res                      |   27 -
 src/components/TopActions.res                 |  146 -
 src/components/UploadImage.res                |   50 -
 .../hyperswitch/HyperSwitchApp.res            |   11 +-
 src/genericUtils/AtomsStorage.res             |    8 -
 src/genericUtils/BreadCrumbNavigation.res     |    2 -
 src/genericUtils/UseEvent.res                 |   12 -
 src/hooks/AnalyticsHooks.res                  |  174 -
 src/hooks/AuthHooks.res                       |  227 +-
 src/hooks/DateRefreshHooks.res                |    2 +-
 src/hooks/ModalsState.res                     |   13 -
 src/hooks/NewThemeHooks.res                   |   42 -
 .../AnalyticsCommonComponents.res             | 2809 -----------------
 40 files changed, 31 insertions(+), 6243 deletions(-)
 delete mode 100644 src/components/MultiLineInputBox.res
 delete mode 100644 src/components/NProgressIndicator.res
 delete mode 100644 src/components/NoteUI.res
 delete mode 100644 src/components/PaginationRevamp.res
 delete mode 100644 src/components/PopOver.res
 delete mode 100644 src/components/RouterTabs.res
 delete mode 100644 src/components/SDKFunnelChart.res
 delete mode 100644 src/components/SectionAccordion.res
 delete mode 100644 src/components/ServerComponent.res
 delete mode 100644 src/components/SidebarStyleUtils.res
 delete mode 100644 src/components/StagedProgressBar.res
 delete mode 100644 src/components/StaticTable.res
 delete mode 100644 src/components/SynchronizedCharts.res
 delete mode 100644 src/components/ThemeSelector.res
 delete mode 100644 src/components/ThemeToggle.res
 delete mode 100644 src/components/TimeRangeInput.res
 delete mode 100644 src/components/TimeRangeInputUtils.res
 delete mode 100644 src/components/Timer.res
 delete mode 100644 src/components/TopActions.res
 delete mode 100644 src/components/UploadImage.res
 delete mode 100644 src/genericUtils/AtomsStorage.res
 delete mode 100644 src/hooks/NewThemeHooks.res
 delete mode 100644 src/screens/analyticsScreens/AnalyticsCommonComponents.res

diff --git a/src/components/MultiLineInputBox.res b/src/components/MultiLineInputBox.res
deleted file mode 100644
index 166cffabc..000000000
--- a/src/components/MultiLineInputBox.res
+++ /dev/null
@@ -1,140 +0,0 @@
-@react.component
-let make = (
-  ~input: ReactFinalForm.fieldRenderPropsInput,
-  ~placeholder,
-  ~isDisabled,
-  ~rows=?,
-  ~cols=?,
-  ~customClass="",
-  ~readOnly=?,
-  ~maxLength=?,
-  ~class="",
-  ~roundedBorder=false,
-  ~prefix=?,
-  ~handleRemove=_ => (),
-  ~setShow=_ => (),
-) => {
-  let (focus, setFocus) = React.useState(_ => false)
-  let (error, setError) = React.useState(_ => None)
-  let cursorClass = if isDisabled {
-    "cursor-not-allowed"
-  } else {
-    ""
-  }
-
-  let handleRemove = _ => {
-    input.onChange(""->Identity.stringToFormReactEvent)
-    setError(_ => None)
-    setFocus(_ => false)
-    handleRemove()
-  }
-
-  let className = `rounded-md border border-jp-gray-lightmode_steelgray border-opacity-75 font-normal p-2 text-jp-gray-900  text-opacity-75 placeholder-jp-gray-900 placeholder-opacity-25 hover:bg-jp-gray-lightmode_steelgray hover:bg-opacity-20 hover:border-jp-gray-900 hover:border-opacity-20 focus:text-opacity-100 focus:outline-none focus:border-blue-800 focus:border-opacity-100 dark:text-jp-gray-text_darktheme dark:text-opacity-75 dark:border-jp-gray-960 dark:hover:border-jp-gray-960 dark:hover:bg-jp-gray-970 dark:bg-jp-gray-darkgray_background dark:placeholder-jp-gray-text_darktheme dark:placeholder-opacity-25 dark:focus:text-opacity-100 dark:focus:border-blue-800 ${cursorClass} ${customClass}`
-  let value = switch input.value->Js.Json.classify {
-  | JSONString(str) => str
-  | JSONNumber(num) => num->Belt.Float.toString
-  | _ => ""
-  }
-
-  let onBlur = _ => {
-    let value = value->Js_string.trim
-
-    let lengthError =
-      maxLength->Belt.Option.flatMap(length =>
-        value->Js_string.length <= length
-          ? None
-          : Some(`Maximum length should be ${length->Belt.Int.toString}`)
-      )
-
-    let error = lengthError
-
-    if value === "" || error->Belt.Option.isNone {
-      setFocus(_ => false)
-      input.onChange(value->Identity.stringToFormReactEvent)
-      setShow(_ => false)
-    } else {
-      setError(_ => error)
-      setShow(_ => false)
-    }
-  }
-
-  let isError = error->Belt.Option.isSome
-
-  let borderColor = isError
-    ? "border rounded-md border-red-600 dark:border-red-600"
-    : focus
-    ? "border-opacity-100 border-blue-800"
-    : roundedBorder
-    ? "border-gray-300 dark:border-jp-gray-800"
-    : "border-opacity-75 border-gray-300 dark:border-jp-gray-800"
-
-  let textAreaComponent =
-    <textarea
-      className
-      name={input.name}
-      onBlur
-      onChange={input.onChange}
-      onFocus={_ => {
-        setError(_ => None)
-        setFocus(_ => true)
-        setShow(_ => true)
-      }}
-      value
-      disabled={isDisabled}
-      placeholder={placeholder}
-      autoFocus=focus
-      type_="text"
-      inputMode="text"
-      ?rows
-      ?cols
-      ?readOnly
-    />
-
-  if focus || value === "" {
-    <div className="flex flex-col gap-1 w-full">
-      <div className="w-full flex flex-row gap-2 items-center">
-        <div className={`flex flex-row w-full pb-1 ${borderColor}`}>
-          {switch prefix {
-          | Some(text) =>
-            <div
-              className={`bg-transparent px-2 h-10 flex flex-row items-center bg-gray-200 dark:bg-jp-gray-800 text-gray-700 dark:text-gray-100 rounded-l-md`}>
-              {React.string(text)}
-            </div>
-          | None => React.null
-          }}
-          textAreaComponent
-        </div>
-      </div>
-      {switch error {
-      | Some(errorMessage) =>
-        <div className="text-red-600 ml-1 text-base"> {errorMessage->React.string} </div>
-      | None => React.null
-      }}
-    </div>
-  } else {
-    let alignItems = roundedBorder ? "items-center" : "items-end"
-    <div className={`${class} flex flex-row gap-4 ml-1 ${alignItems}`}>
-      <div
-        className={`text-gray-500 dark:text-gray-300 text-md font-semibold text-ellipsis overflow-hidden`}>
-        {React.string(prefix->Belt.Option.getWithDefault("") ++ value)}
-      </div>
-      <div style={ReactDOMStyle.make(~minWidth="2rem", ())}>
-        <Icon
-          name="edit-pen"
-          size=22
-          onClick={_ => setFocus(_ => true)}
-          themeBased=true
-          className="cursor-pointer"
-        />
-      </div>
-      <div style={ReactDOMStyle.make(~minWidth="2rem", ())}>
-        <Icon
-          onClick=handleRemove
-          name="trash"
-          size=17
-          className="text-jp-gray-800 dark:text-jp-gray-400 opacity-50 mb-1 ml-2 cursor-pointer"
-        />
-      </div>
-    </div>
-  }
-}
diff --git a/src/components/NProgressIndicator.res b/src/components/NProgressIndicator.res
deleted file mode 100644
index 80be8e6cf..000000000
--- a/src/components/NProgressIndicator.res
+++ /dev/null
@@ -1,6 +0,0 @@
-@react.component
-let make = () => {
-  ApiProgressHooks.useReqProgressIndicator()
-
-  React.null
-}
diff --git a/src/components/Navbar.res b/src/components/Navbar.res
index 18e5b2392..cb69a1287 100644
--- a/src/components/Navbar.res
+++ b/src/components/Navbar.res
@@ -1,6 +1,4 @@
-type appType = UPI | EULER
 let bgClass = "bg-white hover:bg-jp-gray-100"
-@val @scope(("window", "location")) external pathName: string = "pathname"
 
 module MenuOption = {
   @react.component
@@ -19,104 +17,6 @@ module MenuOption = {
   }
 }
 
-module NameIcon = {
-  @react.component
-  let make = (~name, ~onClick=?) => {
-    let words =
-      name
-      ->Js.String2.toUpperCase
-      ->Js.String2.replaceByRe(%re("/_/g"), " ")
-      ->Js.String2.split(" ")
-      ->Js.Array2.filter(x => x !== "")
-    let firstLetters =
-      words->Js.Array2.map(word => Js.String2.charAt(word, 0))->Js.Array2.joinWith("")
-    <div ?onClick className="flex items-center justify-center h-8 w-8 rounded-full bg-gray-200">
-      {firstLetters->Js.String2.slice(~from=0, ~to_=2)->React.string}
-    </div>
-  }
-}
-
-module FeedbackModal = {
-  @react.component
-  let make = (~setShowModal, ~showModal) => {
-    let makeFieldInfo = FormRenderer.makeFieldInfo
-    let field = makeFieldInfo(
-      ~label="",
-      ~name="feedbacks",
-      ~placeholder="Please provide your feedback/suggestions here ...",
-      ~customInput=InputFields.multiLineTextInput(
-        ~isDisabled=false,
-        ~rows=Some(6),
-        ~cols=Some(4),
-        (),
-      ),
-      (),
-    )
-
-    let selectBetween = makeFieldInfo(
-      ~name="category",
-      ~label="",
-      ~customInput=InputFields.radioInput(
-        ~options=["Suggestion", "Bugs", "Other"]->SelectBox.makeOptions,
-        ~buttonText="options",
-        ~isHorizontal=true,
-        (),
-      ),
-      (),
-    )
-
-    let validate = values => {
-      let errors = Js.Dict.empty()
-      let values = values->LogicUtils.getDictFromJsonObject
-      if values->LogicUtils.getString("feedbacks", "") === "" {
-        errors->Js.Dict.set("feedbacks", "Please give the feedback"->Js.Json.string)
-      }
-      if values->LogicUtils.getString("category", "") === "" {
-        errors->Js.Dict.set("category", "Please select the category"->Js.Json.string)
-      }
-      if values->LogicUtils.getInt("rating", -1) === -1 {
-        errors->Js.Dict.set("rating", "Please rate"->Js.Json.string)
-      }
-      errors->Js.Json.object_
-    }
-
-    let onSubmit = (_, _) => {
-      setShowModal(_ => false)
-      Js.Nullable.null->Js.Promise.resolve
-    }
-
-    <Modal
-      modalHeading="Send Us Your Feedback"
-      modalHeadingDescription="Tell us what you liked most and if you have a suggestion or found some bug, let us know in the field below"
-      headingClass="!bg-transparent"
-      showModal
-      setShowModal
-      borderBottom=true
-      closeOnOutsideClick=true
-      modalClass="md:w-2/5 mx-auto my-8 p-4 pb-8">
-      <ReactFinalForm.Form
-        subscription=ReactFinalForm.subscribeToValues
-        onSubmit
-        validate
-        render={({handleSubmit}) => {
-          <form onSubmit={handleSubmit}>
-            <div className="flex flex-col justify-center mb-2">
-              <RatingOptions
-                icons=["angry", "frown", "smile", "smile-beam", "grin-hearts"] size=45
-              />
-              <FormRenderer.FieldRenderer field />
-              <FormRenderer.FieldRenderer field=selectBetween />
-              <div className="flex justify-end p-1 mt-4">
-                <FormRenderer.SubmitButton text="Send Feedback" />
-              </div>
-            </div>
-          </form>
-        }}
-      />
-    </Modal>
-  }
-}
-
 @react.component
 let make = (
   ~headerActions=?,
diff --git a/src/components/NewCalendarList.res b/src/components/NewCalendarList.res
index 5f5d3a277..0098d19d2 100644
--- a/src/components/NewCalendarList.res
+++ b/src/components/NewCalendarList.res
@@ -2,18 +2,6 @@ open DateTimeUtils
 external ffInputToSelectInput: ReactFinalForm.fieldRenderPropsInput => ReactFinalForm.fieldRenderPropsCustomInput<
   array<string>,
 > = "%identity"
-let getStrArray = jsonArr => {
-  jsonArr->Js.Array2.reduce((acc, jsonElement) => {
-    switch jsonElement->Js.Json.decodeString {
-    | Some(str) => {
-        let _ = Js.Array2.push(acc, str)
-      }
-
-    | None => ()
-    }
-    acc
-  }, [])
-}
 
 open NewCalendar
 @react.component
diff --git a/src/components/NewDateRangePicker.res b/src/components/NewDateRangePicker.res
index 7a94ab608..49353c710 100644
--- a/src/components/NewDateRangePicker.res
+++ b/src/components/NewDateRangePicker.res
@@ -16,7 +16,7 @@ let useErroryValueResetter = (
   React.useEffect1(() => {
     let isErroryTimeValue = value => {
       try {
-        let _checkEnd = value->isoStringToCustomTimeZone
+        let _ = value->isoStringToCustomTimeZone
         false
       } catch {
       | _error => true
diff --git a/src/components/NewPagination.res b/src/components/NewPagination.res
index 38034528d..9141bddea 100644
--- a/src/components/NewPagination.res
+++ b/src/components/NewPagination.res
@@ -1,10 +1,3 @@
-module PaginationButton = {
-  @react.component
-  let make = (~onClick, ~text) => {
-    <button onClick> {text->React.string} </button>
-  }
-}
-
 @react.component
 let make = (~resultsPerPage, ~totalResults, ~currentPage, ~paginate, ~btnCount=4) => {
   let pageNumbers = []
diff --git a/src/components/NoDataFound.res b/src/components/NoDataFound.res
index a2f17c2aa..e9e1ce65b 100644
--- a/src/components/NoDataFound.res
+++ b/src/components/NoDataFound.res
@@ -1,4 +1,4 @@
-type renderType = InfoBox | Painting | NotFound | Locked | LoadError | UPINoDataFoundPage
+type renderType = InfoBox | Painting | NotFound | Locked | LoadError
 
 @react.component
 let make = (
@@ -19,7 +19,6 @@ let make = (
     | Locked => "mt-32 p-16"
     | LoadError => "mt-32 p-16"
     | InfoBox => ""
-    | UPINoDataFoundPage => "mt-32 p-16"
     }
     isMobileView ? "" : marginPaddingClass
   }
@@ -99,17 +98,6 @@ let make = (
               }}
             </div>
           </div>
-        | UPINoDataFoundPage =>
-          <div className={`${containerClass}`}>
-            <img className="w-1/2" src={`icons/upilogo2.svg`} />
-            <div className="p-2 mt-8 text-black text-2xl text-bold"> {React.string(message)} </div>
-            <div>
-              {switch children {
-              | Some(child) => child
-              | None => React.null
-              }}
-            </div>
-          </div>
         }}
       </div>
     </div>}
diff --git a/src/components/NoteUI.res b/src/components/NoteUI.res
deleted file mode 100644
index 6e682fe25..000000000
--- a/src/components/NoteUI.res
+++ /dev/null
@@ -1,8 +0,0 @@
-@react.component
-let make = (~note: string, ~isInfo=false, ~textSize="text-fs-12") => {
-  <div
-    className={`ml-6 ${textSize} mb-5 block p-2 not-italic font-normal text-black dark:text-white bg-blue-info dark:bg-blue-info dark:bg-opacity-20`}
-    style={ReactDOMStyle.make(~borderLeft="6px solid #2196F3", ~maxWidth="max-content", ())}>
-    <div className="flex flex-row gap-2"> {note->React.string} </div>
-  </div>
-}
diff --git a/src/components/Pagination.res b/src/components/Pagination.res
index d6976d316..db14cf252 100644
--- a/src/components/Pagination.res
+++ b/src/components/Pagination.res
@@ -1,9 +1,3 @@
-module PaginationButton = {
-  @react.component
-  let make = (~onClick, ~text) => {
-    <button onClick> {text->React.string} </button>
-  }
-}
 external formEventToInt: ReactEvent.Form.t => int = "%identity"
 
 @react.component
diff --git a/src/components/PaginationRevamp.res b/src/components/PaginationRevamp.res
deleted file mode 100644
index cf192eff7..000000000
--- a/src/components/PaginationRevamp.res
+++ /dev/null
@@ -1,203 +0,0 @@
-external formEventToInt: ReactEvent.Form.t => int = "%identity"
-
-@react.component
-let make = (~resultsPerPage, ~totalResults, ~currentPage, ~paginate, ~btnCount=4) => {
-  let pageNumbers = []
-  let isMobileView = MatchMedia.useMobileChecker()
-  let (dropDownVal, setDropDownVal) = React.useState(_ => "1-10")
-  let total = Js.Math.ceil(Belt.Int.toFloat(totalResults) /. Belt.Int.toFloat(resultsPerPage))
-
-  for x in 1 to total {
-    Js.Array2.push(pageNumbers, x)->ignore
-  }
-
-  let pageToLeft =
-    btnCount - (total - currentPage) < btnCount / 2
-      ? btnCount / 2
-      : btnCount - (total - currentPage)
-
-  let arr = []
-  for x in 1 to totalResults {
-    arr->Js.Array2.push(x)->ignore
-  }
-  let rangeNum =
-    arr
-    ->Js.Array2.map(ele => {
-      mod(ele, 10) === 0 ? Js.Array2.indexOf(arr, ele + 1) : 0
-    })
-    ->Js.Array2.filter(i => i !== 0)
-
-  let ranges = []
-
-  rangeNum->Js.Array2.forEach(ele => {
-    ranges->Js.Array2.push((ele - 9)->Belt.Int.toString ++ "-" ++ ele->Belt.Int.toString)->ignore
-  })
-  let lastNum =
-    rangeNum->Belt.Array.get(Js.Array2.length(rangeNum) - 1)->Belt.Option.getWithDefault(0)
-  if totalResults > lastNum {
-    let start = lastNum + (totalResults - lastNum)
-    start === totalResults
-      ? ranges->Js.Array2.push(start->Belt.Int.toString)->ignore
-      : ranges
-        ->Js.Array2.push(start->Belt.Int.toString ++ "-" ++ totalResults->Belt.Int.toString)
-        ->ignore
-  }
-
-  let startIndex = Js.Math.max_int(1, currentPage - pageToLeft)
-  let endIndex = Js.Math.min_int(startIndex + btnCount, total)
-
-  let nonEmpty = s => s >= startIndex && s <= endIndex
-
-  let buttonType: Button.buttonType = Secondary
-  let leftArrowCursorClass = currentPage > 1 ? "cursor-pointer" : "cursor-not-allowed opacity-50"
-  let leftArrowOnClick =
-    currentPage > 1 ? _evt => paginate(Js.Math.max_int(1, currentPage - 1)) : _ => ()
-
-  let rightArrowCursorClass =
-    currentPage < Belt.Array.length(pageNumbers)
-      ? "cursor-pointer"
-      : "cursor-not-allowed opacity-50"
-  let rightArrowOnClick =
-    currentPage < Belt.Array.length(pageNumbers) ? _evt => paginate(currentPage + 1) : _ => ()
-
-  let selectedClass = "text-fs-12 font-medium text-jp-2-light-primary-600 px-2.5 py-1 bg-jp-2-light-primary-100 rounded-lg"
-  let nonSelectedClass = "text-fs-12 font-medium text-jp-2-light-gray-1200 hover:text-jp-2-light-primary-600 px-2.5 py-1 rounded-lg cursor-pointer"
-  let pageOnclick = (isSelected, number) => {
-    isSelected ? _ => () : _evt => paginate(number)
-  }
-
-  let pageInput1: ReactFinalForm.fieldRenderPropsInput = {
-    name: "pageSelector-1",
-    onBlur: _ev => (),
-    onChange: ev => {
-      ev->formEventToInt->paginate
-    },
-    onFocus: _ev => (),
-    value: currentPage->Belt.Int.toFloat->Js.Json.number,
-    checked: true,
-  }
-  let pageInput2: ReactFinalForm.fieldRenderPropsInput = {
-    name: "pageSelector-2",
-    onBlur: _ev => (),
-    onChange: ev => {
-      ev->formEventToInt->paginate
-    },
-    onFocus: _ev => (),
-    value: currentPage->Belt.Int.toFloat->Js.Json.number,
-    checked: true,
-  }
-
-  if !isMobileView {
-    <div className="flex gap-3 items-center px-6">
-      <Icon
-        name="leftArrow"
-        size=20
-        className={`p-1.5 ${leftArrowCursorClass}`}
-        onClick=leftArrowOnClick
-      />
-      {if total > 5 {
-        let pageN = []
-        if currentPage <= 3 {
-          Js.Array2.pushMany(pageN, [1, 2, 3, 4, -2, total])->ignore
-        } else if currentPage >= total - 2 {
-          Js.Array2.pushMany(pageN, [1, -1, total - 3, total - 2, total - 1, total])->ignore
-        } else {
-          Js.Array2.pushMany(
-            pageN,
-            [1, -1, currentPage - 1, currentPage, currentPage + 1, -2, total],
-          )->ignore
-        }
-
-        pageN
-        ->Js.Array2.mapi((number, idx) => {
-          let isSelected = number === currentPage
-
-          if number < 0 {
-            let input = number === -1 ? pageInput1 : pageInput2
-            let prevValue = pageN->LogicUtils.getValueFromArray(idx - 1, 0)
-            let nextValue = pageN->LogicUtils.getValueFromArray(idx + 1, 0)
-            let dropDownOptions =
-              Belt.Array.range(prevValue + 1, nextValue - 1)
-              ->Js.Array2.map(int => int->Belt.Int.toString)
-              ->SelectBox.makeOptions
-            <div key={idx->string_of_int}>
-              <SelectBox.BaseDropdown
-                allowMultiSelect=false
-                hideMultiSelectButtons=true
-                buttonText="..."
-                input
-                baseComponent={<div className="font-semibold text-jp-2-gray-1200 cursor-pointer">
-                  {"..."->React.string}
-                </div>}
-                options=dropDownOptions
-                searchable=false
-                showClearAll=false
-                showSelectAll=false
-              />
-            </div>
-          } else {
-            <div
-              key={idx->string_of_int}
-              className={isSelected ? selectedClass : nonSelectedClass}
-              onClick={pageOnclick(isSelected, number)}>
-              {React.string(number->string_of_int)}
-            </div>
-          }
-        })
-        ->React.array
-      } else {
-        pageNumbers
-        ->Js.Array2.filter(nonEmpty)
-        ->Js.Array2.mapi((number, idx) => {
-          let isSelected = number === currentPage
-
-          <div
-            key={idx->string_of_int}
-            className={isSelected ? selectedClass : nonSelectedClass}
-            onClick={pageOnclick(isSelected, number)}>
-            {React.string(number->string_of_int)}
-          </div>
-        })
-        ->React.array
-      }}
-      <Icon
-        name="leftArrow"
-        size=20
-        className={`p-1.5 rotate-180 ${rightArrowCursorClass}`}
-        onClick=rightArrowOnClick
-      />
-    </div>
-  } else {
-    let dropDownOptions = ranges->Js.Array2.mapi((item, idx): SelectBox.dropdownOption => {
-      {
-        label: item,
-        value: (idx + 1)->Belt.Int.toString,
-      }
-    })
-
-    let selectInput: ReactFinalForm.fieldRenderPropsInput = {
-      name: "dummy-name",
-      onBlur: _ev => (),
-      onChange: _evt => {
-        let val =
-          ranges->Belt.Array.get(_evt->formEventToInt - 1)->Belt.Option.getWithDefault("1-10")
-        setDropDownVal(_ => val)
-        paginate(_evt->formEventToInt)
-      },
-      onFocus: _ev => (),
-      value: ""->Js.Json.string,
-      checked: true,
-    }
-
-    <SelectBox.BaseDropdown
-      options=dropDownOptions
-      searchable=false
-      input=selectInput
-      hideMultiSelectButtons=true
-      deselectDisable=true
-      buttonType
-      allowMultiSelect=false
-      buttonText=dropDownVal
-    />
-  }
-}
diff --git a/src/components/PopOver.res b/src/components/PopOver.res
deleted file mode 100644
index c9e54d26b..000000000
--- a/src/components/PopOver.res
+++ /dev/null
@@ -1,50 +0,0 @@
-type popOverSize = Small | Medium
-
-@react.component
-let make = (
-  ~title="",
-  ~description="",
-  ~descriptionElement=?,
-  ~popOverSize=Small,
-  ~dismissable=false,
-  ~popOverPosition: option<ToolTip.toolTipPosition>=?,
-  ~popOverFor=?,
-  ~popOverArrowSize=5,
-) => {
-  let paddingClass = switch popOverSize {
-  | Small => "p-4"
-  | Medium => "px-4 py-5"
-  }
-  let gapClass = switch popOverSize {
-  | Small => "gap-1.5"
-  | Medium => "gap-2"
-  }
-
-  let titleClass = switch popOverSize {
-  | Small => "text-fs-16 font-medium text-jp-2-dark-gray-2000"
-  | Medium => "text-fs-20 font-medium text-jp-2-dark-gray-2000"
-  }
-  let descriptionClass = switch popOverSize {
-  | Small => "text-fs-12 font-normal text-jp-2-dark-gray-2000"
-  | Medium => "text-fs-14 font-normal text-jp-2-dark-gray-2000"
-  }
-  let descriptionComponent = switch descriptionElement {
-  | Some(element) => element
-  | None =>
-    <div className={`flex flex-col w-80 ${gapClass} ${paddingClass}`}>
-      <span className=titleClass> {React.string(title)} </span>
-      <span className=descriptionClass> {React.string(description)} </span>
-    </div>
-  }
-
-  <ToolTip
-    descriptionComponent
-    toolTipPosition=?popOverPosition
-    tooltipWidthClass="w-fit"
-    hoverOnToolTip=true
-    dismissable
-    descriptionComponentClass="flex flex-row-reverse items-start"
-    toolTipFor=?popOverFor
-    tooltipArrowSize=popOverArrowSize
-  />
-}
diff --git a/src/components/RedirectSearchInput.res b/src/components/RedirectSearchInput.res
index 2cb6408c6..3eec1fe18 100644
--- a/src/components/RedirectSearchInput.res
+++ b/src/components/RedirectSearchInput.res
@@ -47,14 +47,3 @@ module SearchInput = {
     />
   }
 }
-
-let redirectSearchInput = (
-  ~input: ReactFinalForm.fieldRenderPropsInput,
-  ~placeholder,
-  ~redirectUrl,
-  ~widthMatchwithPlaceholderLength=None,
-  ~customStyle="",
-  (),
-) => {
-  <SearchInput input placeholder redirectUrl widthMatchwithPlaceholderLength customStyle />
-}
diff --git a/src/components/RemoteFiltersUtils.res b/src/components/RemoteFiltersUtils.res
index 85035816f..d95549c91 100644
--- a/src/components/RemoteFiltersUtils.res
+++ b/src/components/RemoteFiltersUtils.res
@@ -1,69 +1,15 @@
 type urlKEyType = Boolean | Float | Int
 
-let getQueryParamsDict = searchParams => {
-  let dict = Js.Dict.empty()
-
-  if searchParams->Js.String2.includes("=") {
-    searchParams
-    ->Js.String2.split("&")
-    ->Js.Array2.forEach(paramStr => {
-      let keyValArr = Js.String2.split(paramStr, "=")
-      let key = keyValArr[0]->Belt.Option.getWithDefault("")
-      let value = if keyValArr->Js.Array2.length > 0 {
-        keyValArr[1]->Belt.Option.getWithDefault("")
-      } else {
-        ""
-      }
-      Js.Dict.set(dict, key, value)
-    })
-  }
-  dict
-}
-
-let getQueryFinalUrl = (uri, searchParams, offset, limit) => {
-  let splitUri = Js.String2.split(uri, "?")
-  if searchParams === "" {
-    uri
-  } else {
-    let queryParamsDict = getQueryParamsDict(searchParams)
-    queryParamsDict->Js.Dict.set("offset", offset->Belt.Int.toString)
-    queryParamsDict->Js.Dict.set("limit", limit->Belt.Int.toString)
-
-    let queryParams =
-      queryParamsDict
-      ->Js.Dict.entries
-      ->Js.Array2.map(entry => {
-        let (key, value) = entry
-        let modifiedValue = switch key {
-        | "offset" => {
-            let floatValue = switch value->Belt.Float.fromString {
-            | Some(val) => val
-            | _ => 0.
-            }
-            let pageNo = (floatValue /. limit->Belt.Float.fromInt)->Js.Math.floor_int
-            (pageNo * limit)->string_of_int
-          }
-        | _ => value
-        }
-        `${key}=${modifiedValue}`
-      })
-      ->Js.Array2.joinWith("&")
-      ->LogicUtils.stringReplaceAll("%20", " ")
-
-    `${splitUri[0]->Belt.Option.getWithDefault("")}?${queryParams}`
-  }
-}
-
 let getFinalDict = (
   ~filterJson,
   ~filtersFromUrl,
-  ~options: array<EntityType.optionType<'t>>=[],
-  ~isEulerOrderEntity=false,
-  ~dropdownSearchKeyValueNames=[],
-  ~searchkeysDict=Js.Dict.empty(),
-  ~isSearchKeyArray=false,
+  ~options: array<EntityType.optionType<'t>>,
+  ~isEulerOrderEntity,
+  ~dropdownSearchKeyValueNames,
+  ~searchkeysDict,
+  ~isSearchKeyArray,
   ~defaultKeysAllowed=["offset", "order", "orderType", "merchantId"],
-  ~urlKeyTypeDict=Js.Dict.empty(),
+  ~urlKeyTypeDict,
   (),
 ) => {
   let unflattenDict = filtersFromUrl->JsonFlattenUtils.unflattenObject
@@ -211,67 +157,6 @@ let getFinalDict = (
   }
 }
 
-let updateUrlWith = (
-  url: RescriptReactRouter.url,
-  dict: Js.Dict.t<string>,
-  tableName: option<Js.String.t>,
-) => {
-  let path = url.path->Belt.List.toArray->Js.Array2.joinWith("/")
-  let tableName = tableName->Belt.Option.getWithDefault("")
-  let keys = Js.Dict.keys(dict)
-  let values = Js.Dict.values(dict)
-  let urlKeys =
-    url.search
-    ->Js.String2.split("&")
-    ->Js.Array2.map(item => {Js.String.split("=", item)[0]->Belt.Option.getWithDefault("")})
-
-  let queryParamsString = keys->Js.Array2.reducei((acc, key, idx) => {
-    let tableKey = Js.String.length(tableName) > 0 ? Js.String.concat(`-${key}`, tableName) : key
-    let keyIndex = tableKey->Js.Array.indexOf(urlKeys)
-    if keyIndex !== -1 {
-      let oldValue =
-        Js.String.split(
-          "=",
-          Js.String.split("&", acc)[keyIndex]->Belt.Option.getWithDefault(""),
-        )[1]->Belt.Option.getWithDefault("")
-      let acc =
-        acc->Js.String2.replace(
-          `${tableKey}=${oldValue}`,
-          `${tableKey}=${values[idx]->Belt.Option.getWithDefault("")}`,
-        )
-      acc
-    } else {
-      let acc = Js.String.length(acc) > 0 ? Js.String.concat(`&`, acc) : acc
-      let acc = Js.String.concat(`${tableKey}=${values[idx]->Belt.Option.getWithDefault("")}`, acc)
-      Js.Array.push(tableKey, urlKeys)->ignore
-      acc
-    }
-  }, url.search)
-
-  RescriptReactRouter.push(`/${path}?${queryParamsString}`)
-}
-
-let getOffsetFromUrl = (searchParams, defaultOffset, ~tableName=?, ()) => {
-  let tableKey = switch tableName {
-  | Some(tn) => tn->Js.String.length > 0 ? Js.String.concat(`-offset`, tn) : "offset"
-  | None => "offset"
-  }
-
-  if searchParams->Js.String.length > 0 {
-    let optionalOffsetValue =
-      searchParams
-      ->getQueryParamsDict
-      ->Js.Dict.get(tableKey)
-      ->Belt.Option.flatMap(Belt.Int.fromString)
-    switch optionalOffsetValue {
-    | Some(intNum) => intNum
-    | None => defaultOffset
-    }
-  } else {
-    defaultOffset
-  }
-}
-
 let getStrFromJson = (key, val) => {
   switch val->Js.Json.classify {
   | JSONString(str) => str
@@ -281,28 +166,6 @@ let getStrFromJson = (key, val) => {
   }
 }
 
-let getTableNamesFromURL = () => {
-  let url = RescriptReactRouter.useUrl().search
-  if url->Js.String2.length > 0 {
-    url
-    ->Js.String2.split("&")
-    ->Js.Array2.map(key => {
-      key
-      ->Js.String2.split("=")
-      ->Belt.Array.get(0)
-      ->Belt.Option.getWithDefault("")
-      ->Js.String2.split("-")
-      ->Js.Array2.slice(~start=0, ~end_=-1)
-      ->Js.Array2.map(word => {
-        word->Js.String2.charAt(0)->Js.String2.toUpperCase ++ word->Js.String2.sliceToEnd(~from=1)
-      })
-      ->Js.Array2.joinWith(" ")
-    })
-  } else {
-    []
-  }
-}
-
 let getInitialValuesFromUrl = (
   ~searchParams,
   ~initialFilters: array<EntityType.initialFilters<'t>>,
@@ -367,8 +230,8 @@ let getLocalFiltersData = (
   ~resArr: Js.Array2.t<Js.Nullable.t<'t>>,
   ~searchParams,
   ~initialFilters: array<EntityType.initialFilters<'t>>,
-  ~dateRangeFilterDict: Js.Dict.t<Js.Json.t>=Js.Dict.empty(),
-  ~options: array<EntityType.optionType<'t>>=[],
+  ~dateRangeFilterDict: Js.Dict.t<Js.Json.t>,
+  ~options: array<EntityType.optionType<'t>>,
   (),
 ) => {
   let res = ref(resArr)
@@ -567,18 +430,3 @@ let applyFilters = (
     }
   }
 }
-
-let updateUrlWithSort = (url: RescriptReactRouter.url, sortKey: string, sortValue: string) => {
-  let path = url.path->Belt.List.toArray->Js.Array2.joinWith("/")
-
-  let filters =
-    url.search
-    ->Js.String2.split("&")
-    ->Js.Array2.filter(item => !(item->Js.String2.includes("sortBy_")) && item != "")
-
-  filters->Js.Array2.push(`${sortKey}=${sortValue}`)->ignore
-
-  let queryParamsString = filters->Js.Array2.joinWith("&")
-
-  RescriptReactRouter.push(`/${path}?${queryParamsString}`)
-}
diff --git a/src/components/RouterTabs.res b/src/components/RouterTabs.res
deleted file mode 100644
index ec818ccc6..000000000
--- a/src/components/RouterTabs.res
+++ /dev/null
@@ -1,68 +0,0 @@
-type routeTab = {
-  title: string,
-  route: string,
-  access: AuthTypes.authorization,
-}
-
-let getDefaultIndex = routes => {
-  let currPath = RescriptReactRouter.useUrl().path
-  let urlArr = []
-  currPath->Js.List.iter((. str) => urlArr->Js.Array2.push(str)->ignore, _)
-  let urlStr = `/${urlArr->Js.Array2.joinWith("/")}`
-
-  let (_, index) = routes->Js.Array2.reducei((acc, {route}, i) => {
-    let route = route->Js.String2.split("?")->Belt.Array.get(0)->Belt.Option.getWithDefault(route)
-    let (oldDiff, _) = acc
-    let diff = urlStr->Js.String2.length - route->Js.String2.length
-
-    urlStr->Js.String2.includes(route) && diff < oldDiff ? (diff, i) : acc
-  }, (urlStr->Js.String2.length, 0))
-
-  index
-}
-
-@react.component
-let make = (
-  ~routeTabs as allRouteTabs: array<routeTab>,
-  ~isScrollIntoViewRequired=false,
-  ~lightThemeColor: string="blue-800",
-  ~showBorder: bool=true,
-  ~backgroundStyle: string="bg-gradient-to-b",
-  ~tabContainerClass="",
-  ~bottomMargin=?,
-) => {
-  let urlPrefix = LogicUtils.useUrlPrefix()
-  let routeTabs = allRouteTabs->Js.Array2.filter(routeTab => {
-    routeTab.access !== NoAccess
-  })
-
-  let defaultIndex = getDefaultIndex(routeTabs)
-
-  let (initialIndex, setInitialIndex) = React.useState(() => defaultIndex)
-
-  React.useEffect1(() => {
-    setInitialIndex(_ => defaultIndex)
-    None
-  }, [defaultIndex])
-
-  let tabs = routeTabs->Js.Array2.map((routeTab): Tabs.tab => {
-    {title: routeTab.title, renderContent: () => React.null}
-  })
-
-  <Tabs
-    tabs
-    isScrollIntoViewRequired
-    lightThemeColor
-    showBorder
-    backgroundStyle
-    ?bottomMargin
-    initialIndex={initialIndex >= 0 ? initialIndex : 0}
-    onTitleClick={i => {
-      switch routeTabs->Belt.Array.get(i) {
-      | Some(routeTab) => RescriptReactRouter.push(`${urlPrefix}${routeTab.route}`)
-      | None => ()
-      }
-    }}
-    tabContainerClass
-  />
-}
diff --git a/src/components/SDKFunnelChart.res b/src/components/SDKFunnelChart.res
deleted file mode 100644
index e8900edec..000000000
--- a/src/components/SDKFunnelChart.res
+++ /dev/null
@@ -1,732 +0,0 @@
-open HighchartFunnelChart
-open LogicUtils
-type colType =
-  | Initiate
-  | Render
-  | MethodSelected
-  | ProceedToPayClicked
-  | TxnStatus
-  | QuickPayRender
-  | QuickPayOpt
-  | QuickPayChange
-  | QuickPayOverLayClick
-  | QuickPayOverLayDrop
-  | FunnelSteps
-let defaultColumns = [Initiate, Render, MethodSelected, ProceedToPayClicked, TxnStatus]
-
-let getHeading = colType => {
-  switch colType {
-  | Initiate =>
-    Table.makeHeaderInfo(
-      ~key="initiate",
-      ~title="Payment Page Requested",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | Render =>
-    Table.makeHeaderInfo(
-      ~key="render",
-      ~title="Payment Page Rendered",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | MethodSelected =>
-    Table.makeHeaderInfo(
-      ~key="methodSelecyed",
-      ~title="Payment Option Selected",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | ProceedToPayClicked =>
-    Table.makeHeaderInfo(
-      ~key="clicked",
-      ~title="Proceed to Pay Clicked",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | TxnStatus =>
-    Table.makeHeaderInfo(
-      ~key="txnStatus",
-      ~title="Order Success",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-
-  | FunnelSteps =>
-    Table.makeHeaderInfo(
-      ~key="funnelSteps",
-      ~title="Funnel Steps",
-      ~showSort=false,
-      ~headerElement=<div className="font-medium flex flex-row gap-4 text-sm">
-        {React.string("Funnel Steps")}
-        <Icon name="arrow-right" size=12 />
-      </div>,
-      ~showFilter=false,
-      (),
-    )
-  | QuickPayRender =>
-    Table.makeHeaderInfo(
-      ~key="quickPayRender",
-      ~title="Quickpay Rendered",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | QuickPayOpt =>
-    Table.makeHeaderInfo(
-      ~key="quickPayOpt",
-      ~title="Quickpay Opted",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | QuickPayChange =>
-    Table.makeHeaderInfo(
-      ~key="quickPayChange",
-      ~title="Quickpay Changed",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | QuickPayOverLayClick =>
-    Table.makeHeaderInfo(
-      ~key="quickpayoverlayclick",
-      ~title="Quickpay Overlay Clicked",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  | QuickPayOverLayDrop =>
-    Table.makeHeaderInfo(
-      ~key="qpay",
-      ~title="Quickpay overlay Dropped",
-      ~showSort=false,
-      ~showFilter=false,
-      (),
-    )
-  }
-}
-
-module ShowDate = {
-  let parseDateRange = (dateRangeStr: string): string => {
-    /* Split the date range string into start and end date parts */
-    let dateParts = Js.String.split(" to ", dateRangeStr)
-
-    switch dateParts {
-    | [startStr, endStr] =>
-      /* Convert date strings to Date objects */
-      let startDate = Js.Date.fromString(startStr)
-      let endDate = Js.Date.fromString(endStr)
-
-      /* Format dates into a human-readable format */
-
-      let startDateStr = Js.Date.toDateString(startDate)
-      let endDateStr = Js.Date.toDateString(endDate)
-
-      /* Create the human-readable date range */
-      let dateRangeReadable = startDateStr ++ " to " ++ endDateStr
-      dateRangeReadable
-    | _ => /* Handle invalid input */
-      "Invalid date range format"
-    }
-  }
-  @react.component
-  let make = (~data, ~selectedRow, ~setSelectedRow) => {
-    let value = data->Belt.Array.get(0)->Belt.Option.getWithDefault("")
-    let onClick = _ => setSelectedRow(_ => value)
-    <>
-      <div className="flex cursor-pointer" onClick>
-        <RadioIcon isSelected={value == selectedRow} />
-        <div className={`pl-2 ${value == selectedRow ? "text-blue-800" : ""}`}>
-          {React.string(value->parseDateRange)}
-        </div>
-      </div>
-      <UIUtils.RenderIf condition={value == selectedRow}>
-        <div className={`text-sm text-[#B9B7B7]  ml-6 mt-1`}>
-          {React.string("Reference Date")}
-        </div>
-      </UIUtils.RenderIf>
-    </>
-  }
-}
-module RenderCompare = {
-  @react.component
-  let make = (~val1, ~val2) => {
-    let value1 = val1->Belt.Float.fromString->Belt.Option.getWithDefault(0.)
-    let value2 = val2->Belt.Float.fromString->Belt.Option.getWithDefault(0.)
-
-    if value1 > value2 {
-      //increase
-      let change = value1 -. value2
-      let percentageChange = change /. value2
-      let str = (percentageChange *. 100.0)->Js.Math.round->Belt.Float.toString
-      <div
-        className="text-green-800 p-0.5 mt-1 bg-green-200 w-fit rounded-2xl text-[10px] flex pr-2">
-        <Icon name="arrow-up" size=8 className={`mx-1 fill-[#B9BABE] dark:fill-slate-500`} />
-        {React.string(`${str}%`)}
-      </div>
-    } else {
-      let change = value2 -. value1
-      let percentageChange = change /. value2
-      let str = (percentageChange *. 100.0)->Js.Math.round->Belt.Float.toString
-      <div className="text-red-800 p-0.5 mt-1 bg-red-200 w-fit rounded-2xl text-[10px] flex pr-2">
-        <Icon name="arrow-down" size=8 className={`mx-1 fill-[#B9BABE] dark:fill-slate-500`} />
-        {React.string(`${str}%`)}
-      </div>
-    }
-  }
-  // Module contents
-}
-module ShowData = {
-  // Module contents
-  @react.component
-  let make = (~data, ~index, ~selectedRow, ~actualData) => {
-    let valueDt = data->Belt.Array.get(0)->Belt.Option.getWithDefault("")
-    let value = data->Belt.Array.get(index)->Belt.Option.getWithDefault("")
-    let refData =
-      actualData
-      ->Js.Array2.filter(x => x->Belt.Array.get(0)->Belt.Option.getWithDefault("") == selectedRow)
-      ->Belt.Array.get(0)
-      ->Belt.Option.getWithDefault([])
-    let refVal = refData->Belt.Array.get(index)->Belt.Option.getWithDefault("")
-    let pctDrop = if index == 1 {
-      0.0
-    } else {
-      let pastVal =
-        data
-        ->Belt.Array.get(index - 1)
-        ->Belt.Option.getWithDefault("")
-        ->Belt.Float.fromString
-        ->Belt.Option.getWithDefault(0.)
-      let currVal = value->Belt.Float.fromString->Belt.Option.getWithDefault(0.)
-      let val = (pastVal -. currVal) /. pastVal
-      if currVal == 0. {
-        0.0
-      } else {
-        (val *. 100.0)->Js.Math.round
-      }
-    }
-    <>
-      <div className="flex">
-        {React.string(
-          shortNum(
-            ~labelValue=value->Belt.Float.fromString->Belt.Option.getWithDefault(0.0),
-            ~numberFormat=IND,
-            (),
-          ),
-        )}
-        <div className="pl-2 text-gray-500">
-          {pctDrop == 0.0
-            ? React.null
-            : {React.string(`(-${pctDrop->Js.Math.abs_float->Js.Float.toString}%)`)}}
-        </div>
-      </div>
-      <UIUtils.RenderIf condition={valueDt != selectedRow && value != "0" && refVal != "0"}>
-        <ToolTip
-          description="In comparision with reference date data"
-          toolTipFor={<RenderCompare val1=value val2=refVal />}
-          contentAlign=Left
-          justifyClass="justify-start"
-        />
-      </UIUtils.RenderIf>
-    </>
-  }
-}
-let getIndexOfStep = (categories, keyName) => {
-  Js.Array.indexOf(keyName, categories) + 1
-}
-
-let getCell = (selectedRow, setSelectedRow, actualData, categories, data, colType): Table.cell => {
-  Js.log(categories)
-  switch colType {
-  | FunnelSteps => CustomCell(<ShowDate data selectedRow setSelectedRow />, "true")
-  | Initiate =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Payment Page Requested")} selectedRow actualData
-      />,
-      "",
-    )
-  | Render =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Payment Page Rendered")} selectedRow actualData
-      />,
-      "",
-    )
-  | MethodSelected =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Payment Option Selected")} selectedRow actualData
-      />,
-      "",
-    )
-  | ProceedToPayClicked =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Proceed to Pay Clicked")} selectedRow actualData
-      />,
-      "",
-    )
-  | TxnStatus =>
-    CustomCell(
-      <ShowData data index={getIndexOfStep(categories, "Order Success")} selectedRow actualData />,
-      "",
-    )
-  | QuickPayRender =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Quickpay Rendered")} selectedRow actualData
-      />,
-      "",
-    )
-  | QuickPayOpt =>
-    CustomCell(
-      <ShowData data index={getIndexOfStep(categories, "Quickpay Opted")} selectedRow actualData />,
-      "",
-    )
-  | QuickPayChange =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Quickpay Change")} selectedRow actualData
-      />,
-      "",
-    )
-  | QuickPayOverLayClick =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Quickpay Overlay Clicked")} selectedRow actualData
-      />,
-      "",
-    )
-  | QuickPayOverLayDrop =>
-    CustomCell(
-      <ShowData
-        data index={getIndexOfStep(categories, "Quickpay Overlay Drop")} selectedRow actualData
-      />,
-      "",
-    )
-  }
-}
-let categoryToColMapper = category => {
-  switch category {
-  | "Payment Page Requested" => Initiate
-  | "Payment Page Rendered" => Render
-  | "Quickpay Rendered" => QuickPayRender
-  | "Quickpay Opted" => QuickPayOpt
-  | "Quickpay Change" => QuickPayChange
-  | "Quickpay Overlay Clicked" => QuickPayOverLayClick
-  | "Quickpay Overlay Drop" => QuickPayOverLayDrop
-  | "Payment Option Selected" => MethodSelected
-  | "Proceed to Pay Clicked" => ProceedToPayClicked
-  | _ => TxnStatus
-  }
-}
-type series = {name: string}
-type data = {val: string}
-type formatterType = {
-  x: int,
-  y: int,
-  series: series,
-}
-
-type primaryDataLabel =
-  | PERCENT
-  | ABS_VOLUME
-type finalSummaryLabel =
-  | RATE
-  | FINAL_STEP_VOLUME
-type stepComparisonRule =
-  | PREVIOUS_STEP
-  | FIRST_STEP
-
-type dataSetType = {
-  fromPreviousStep: array<float>,
-  fromFirstStep: array<float>,
-  volume: array<float>,
-}
-@react.component
-let make = (
-  ~chartColors: array<string>=[],
-  ~showTable: bool=true,
-  ~dataSet: Js.Dict.t<array<float>>=Js.Dict.fromArray([("val", [7650., 4064., 1987., 976.])]),
-  ~categories: array<string>=["Awareness", "Interest", "Consideration", "Purchase"],
-  ~primaryDataLabel: primaryDataLabel=PERCENT,
-  ~finalSummaryLabel: finalSummaryLabel=RATE,
-  ~stepComparisonRule: stepComparisonRule=PREVIOUS_STEP,
-  ~selectStepsUi=React.null,
-) => {
-  // will uncomment it for testing purpose
-  // let dataSet: Js.Dict.t<array<float>> = Js.Dict.fromArray([
-  //   ("val", [7650., 4064., 1987., 976.]),
-  //   ("val2", [7050., 3064., 987., 1976.]),
-  // ])
-  // let categories: array<string> = ["Awareness", "Interest", "Consideration", "Purchase"]
-  let formattedDict = Js.Dict.empty()
-  dataSet
-  ->DictionaryUtils.copyOfDict
-  ->Js.Dict.entries
-  ->Js.Array2.forEach(item => {
-    let (key, value) = item
-    let updateValueFromFirst = value->Js.Array2.mapi((item, index) => {
-      if index === 0 {
-        100.
-      } else {
-        item *. 100. /. value->Belt.Array.get(0)->Belt.Option.getWithDefault(0.)
-      }
-    })
-    let updateValueFromPrevious = value->Js.Array2.mapi((item, index) => {
-      if index === 0 {
-        100.
-      } else {
-        item *. 100. /. value->Belt.Array.get(index - 1)->Belt.Option.getWithDefault(0.)
-      }
-    })
-    formattedDict->Js.Dict.set(
-      key,
-      {
-        fromPreviousStep: updateValueFromPrevious,
-        fromFirstStep: updateValueFromFirst,
-        volume: value,
-      },
-    )
-  })
-
-  let dataSet = if primaryDataLabel === PERCENT {
-    dataSet
-    ->Js.Dict.entries
-    ->Js.Array2.map(item => {
-      let (key, value) = item
-      let updateValueFromFirst = value->Js.Array2.mapi((item, index) => {
-        if index === 0 {
-          100.
-        } else {
-          item *. 100. /. value->Belt.Array.get(0)->Belt.Option.getWithDefault(0.)
-        }
-      })
-      (key, updateValueFromFirst)
-    })
-    ->Js.Dict.fromArray
-  } else {
-    dataSet
-  }
-
-  let mergedDict = Js.Dict.empty()
-
-  dataSet
-  ->Js.Dict.values
-  ->Js.Array2.forEach(arrVal => {
-    arrVal->Js.Array2.forEachi((item, index) => {
-      DictionaryUtils.appnedDataToKey(mergedDict, index->Belt.Int.toString, item)
-    })
-  })
-
-  let formatter: Js_OO.Callback.arity1<Js.Json.t => string> =
-    @this
-    (pointsJson: Js.Json.t) => {
-      let pointsDict = pointsJson->getDictFromJsonObject
-      let x_axis = pointsDict->getInt("x", 0)
-
-      let color = pointsDict->getString("color", "")
-
-      let deltaArr = if x_axis === 0 {
-        let getValues =
-          mergedDict->Js.Dict.get(x_axis->Belt.Int.toString)->Belt.Option.getWithDefault([])
-        getValues->Js.Array2.mapi((item, index) => {
-          let absValue = {shortNum(~labelValue=item, ~numberFormat=IND, ())}
-          let value = primaryDataLabel === PERCENT ? `${absValue}%` : absValue
-          let color = chartColors->Belt.Array.get(index)->Belt.Option.getWithDefault(color)
-          `<div style='' class="flex flex-row justify-between items-center">
-              <div class='flex h-2 w-2 rounded-full self-center mr-2' style='background-color: ${color}'"></div>
-              <div>
-                ${value}
-              </div>
-          </div>`
-        })
-      } else {
-        let getValues =
-          mergedDict->Js.Dict.get(x_axis->Belt.Int.toString)->Belt.Option.getWithDefault([])
-
-        getValues->Js.Array2.mapi((item, index) => {
-          let absValue = {shortNum(~labelValue=item, ~numberFormat=IND, ())}
-          let value = primaryDataLabel === PERCENT ? `${absValue}%` : absValue
-          let color = chartColors->Belt.Array.get(index)->Belt.Option.getWithDefault(color)
-
-          `<div style='' class="flex flex-row justify-between items-center">
-              <div class='flex h-2 w-2 rounded-full self-center mr-2' style='background-color: ${color}'"></div>
-              <div>
-                ${value}
-              </div>
-            </div>`
-        })
-      }
-
-      `<div class='flex flex-row gap-2' style='padding: 8px; border-radius: 8px; border: 1px solid var(--Grey-900, #E5E7EB); background: rgba(255, 255, 255, 0.90); backdrop-filter: blur(1px);'>
-        ${deltaArr->Js.Array2.joinWith(
-          "<div style=' border-left: 1px solid rgba(234, 232, 232, 1); float: left;'></div>",
-        )}
-        </div>`
-    }
-
-  let tooltipFormatter = (points: HighchartFunnelChart.tooltipPoints) => {
-    let highlight = "font-weight:900; font-size:13px;"
-    let fromFirstValueArr = formattedDict->Js.Dict.values
-    let formattedDictKeys = formattedDict->Js.Dict.keys
-
-    let fromPreviousStep =
-      fromFirstValueArr
-      ->Js.Array2.map(item => {
-        `<td>${shortNum(
-            ~labelValue=item.fromPreviousStep
-            ->Belt.Array.get(points.x)
-            ->Belt.Option.getWithDefault(0.),
-            ~numberFormat=IND,
-            (),
-          )}%</td>`
-      })
-      ->Js.Array2.joinWith("<th></th>")
-
-    let fromFirstStep =
-      fromFirstValueArr
-      ->Js.Array2.map(item => {
-        `<td>${shortNum(
-            ~labelValue=item.fromFirstStep
-            ->Belt.Array.get(points.x)
-            ->Belt.Option.getWithDefault(0.),
-            ~numberFormat=IND,
-            (),
-          )}%</td>`
-      })
-      ->Js.Array2.joinWith("<th></th>")
-
-    let fromValues =
-      fromFirstValueArr
-      ->Js.Array2.map(item => {
-        `<td>${shortNum(
-            ~labelValue=item.volume->Belt.Array.get(points.x)->Belt.Option.getWithDefault(0.),
-            ~numberFormat=IND,
-            (),
-          )}</td>`
-      })
-      ->Js.Array2.joinWith("<th></th>")
-    let formattedHeading =
-      formattedDict
-      ->Js.Dict.keys
-      ->Js.Array2.mapi((_, index) =>
-        `<th><span style='color:${chartColors
-          ->Belt.Array.get(index)
-          ->Belt.Option.getWithDefault("")}; ${highlight}'> ${"\u25CF"} </span>Range${(index + 1)
-            ->Belt.Int.toString}</th>`
-      )
-      ->Js.Array2.joinWith("<th></th>")
-
-    if points.x === categories->Js.Array2.length {
-      ""
-    } else if points.name === formattedDictKeys->Belt.Array.get(0)->Belt.Option.getWithDefault("") {
-      `<table>
-        <tr>
-          <th> </th>
-          ${formattedHeading}
-        </tr>
-        <tr>
-          <td><span>Conversion Rate from the Start</span></td>
-          ${fromFirstStep}
-        </tr>
-        <tr>
-          <td><span>Conversion Rate from the Previous</span></td>
-          ${fromPreviousStep}
-        </tr>
-        <tr>
-          <td><span>Total Volume</span></td>
-          ${fromValues}
-        </tr>
-    </table>`
-    } else {
-      ""
-    }
-  }
-
-  let yAxisLabelFormatter = value => {
-    let value = if primaryDataLabel === PERCENT {
-      LineChartUtils.formatStatsAccToMetrix(Rate, value)
-    } else {
-      LineChartUtils.formatStatsAccToMetrix(Volume, value)
-    }
-    value
-  }
-
-  let _legendFormatter = (this: HighchartFunnelChart.legendObj) => {
-    let (fromFirstStepRate, volumeArr) = switch formattedDict->Js.Dict.get(this.userOptions.name) {
-    | Some(value) => (value.fromFirstStep, value.volume)
-    | None => ([], [])
-    }
-
-    if finalSummaryLabel === RATE {
-      `<div style='background: ${this.color};color: var(--table-typography-body, #111); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal;' class='py-1 px-3 rounded'>
-        ${shortNum(
-          ~labelValue=fromFirstStepRate
-          ->Belt.Array.get(fromFirstStepRate->Js.Array2.length - 1)
-          ->Belt.Option.getWithDefault(0.),
-          ~numberFormat=IND,
-          (),
-        )}%
-      </div>`
-    } else {
-      `<div style='background: ${this.color};color: var(--table-typography-body, #111); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal;' class='py-1 px-3 rounded'>
-         ${shortNum(
-          ~labelValue=volumeArr
-          ->Belt.Array.get(fromFirstStepRate->Js.Array2.length - 1)
-          ->Belt.Option.getWithDefault(0.),
-          ~numberFormat=IND,
-          (),
-        )}
-      </div>`
-    }
-  }
-  let legendTitle = if finalSummaryLabel === RATE {
-    "Conversion Rate"
-  } else {
-    "Conversion Volume"
-  }
-  <>
-    <div className="flex flex-row justify-between mb-5">
-      {selectStepsUi}
-      <div
-        className="flex flex-row justify-between p-3 border-[1px] rounded-lg gap-2 items-center  border-[#E5E7EB]">
-        <div
-          style={ReactDOMStyle.make(
-            ~color="#6D7280",
-            ~fontFamily="Inter",
-            ~fontSize="14px",
-            ~fontStyle="normal",
-            ~fontWeight="500",
-            ~lineHeight="normal",
-            (),
-          )}>
-          {legendTitle->React.string}
-        </div>
-        {formattedDict
-        ->Js.Dict.entries
-        ->Js.Array2.mapi((item, index) => {
-          let (_, value) = item
-          let {fromFirstStep, volume} = value
-          if finalSummaryLabel === RATE {
-            <div
-              key={index->Belt.Int.toString}
-              style={ReactDOMStyle.make(
-                ~backgroundColor=chartColors->Belt.Array.get(index)->Belt.Option.getWithDefault(""),
-                ~color="var(--table-typography-body, #111)",
-                ~fontFamily="Inter",
-                ~fontSize="16px",
-                ~fontStyle="normal",
-                ~fontWeight="600",
-                ~lineHeight="normal",
-                (),
-              )}
-              className="py-1 px-2 rounded">
-              {`${shortNum(
-                  ~labelValue=fromFirstStep
-                  ->Belt.Array.get(fromFirstStep->Js.Array2.length - 1)
-                  ->Belt.Option.getWithDefault(0.),
-                  ~numberFormat=IND,
-                  (),
-                )}%`->React.string}
-            </div>
-          } else {
-            <div
-              style={ReactDOMStyle.make(
-                ~backgroundColor=chartColors->Belt.Array.get(index)->Belt.Option.getWithDefault(""),
-                ~color="var(--table-typography-body, #111)0",
-                ~fontFamily="Inter",
-                ~fontSize="16px",
-                ~fontStyle="normal",
-                ~fontWeight="600",
-                ~lineHeight="normal",
-                (),
-              )}
-              className="py-1 px-3 rounded">
-              {`${shortNum(
-                  ~labelValue=volume
-                  ->Belt.Array.get(volume->Js.Array2.length - 1)
-                  ->Belt.Option.getWithDefault(0.),
-                  ~numberFormat=IND,
-                  (),
-                )}%`->React.string}
-            </div>
-          }
-        })
-        ->React.array}
-      </div>
-    </div>
-    <HighchartFunnelChart
-      dataSet
-      categories
-      chartColors
-      formatter
-      // legendFormatter
-      // legendTitle
-      tooltipFormatter
-      yAxisLabelFormatter
-    />
-  </>
-}
-
-let getData: Js.Json.t => array<array<string>> = _json => {
-  []
-}
-module SDKFunnelTable = {
-  @react.component
-  let make = (~funnelStepsValue: Js.Dict.t<array<float>>, ~categories) => {
-    let (selectedRow, setSelectedRow) = React.useState(_ => "")
-    let dataKeys = Js.Dict.keys(funnelStepsValue)
-    let actualDataR =
-      dataKeys->Js.Array2.map(key =>
-        Js.Array2.concat(
-          [key],
-          Js.Dict.get(funnelStepsValue, key)
-          ->Belt.Option.getWithDefault([])
-          ->Js.Array2.map(x => x->Belt.Float.toString),
-        )
-      )
-    let actualData = actualDataR->Js.Array2.map(Js.Nullable.return)
-    let (offset, setOffset) = React.useState(_ => 10)
-    Js.log(actualData)
-    let defaultColumns =
-      categories->Js.Array2.map(ele => ele->categoryToColMapper)->Js.Array.concat([FunnelSteps])
-    React.useEffect1(() => {
-      let defaultSelect = dataKeys->Belt.Array.get(0)->Belt.Option.getWithDefault("")
-      setSelectedRow(_ => defaultSelect)
-
-      None
-    }, [funnelStepsValue])
-    let entity = EntityType.makeEntity(
-      ~uri="",
-      ~getObjects=getData,
-      ~defaultColumns,
-      ~getHeading,
-      ~getCell=getCell(selectedRow, setSelectedRow, actualDataR, categories),
-      ~dataKey="",
-      (),
-    )
-    <LoadedTable
-      entity
-      actualData
-      title="dummy"
-      totalResults=2
-      resultsPerPage=10
-      headBottomMargin="!gap-0"
-      tableDataBorderClass="border-1 border-jp-2-light-gray-300"
-      customCellColor="bg-[#F6F6F6]"
-      selectedRowColor=""
-      offset
-      setOffset
-      currrentFetchCount=10
-      hideTitle=true
-    />
-  }
-}
diff --git a/src/components/SankeyUtils.res b/src/components/SankeyUtils.res
index 0756c0764..2ca6489df 100644
--- a/src/components/SankeyUtils.res
+++ b/src/components/SankeyUtils.res
@@ -5,39 +5,6 @@ type nodeConfigs = {
   total_vol_metrix: string,
 }
 
-let sankeyConfig: nodeConfigs = {
-  success_vol_metrix: "success_volume",
-  total_vol_metrix: "total_volume",
-}
-
-let sankeyAlphabeticalSortFn = (e1, e2) => {
-  let (a1, b1, _) = e1
-  let (a2, b2, _) = e2
-  if a1 > a2 {
-    1
-  } else if a1 < a2 {
-    -1
-  } else if b1 > b2 {
-    1
-  } else if b1 < b2 {
-    -1
-  } else {
-    0
-  }
-}
-
-let sankeyvolSortFn = (e1, e2) => {
-  let (_, _, v1) = e1
-  let (_, _, v2) = e2
-  if v1 < v2 {
-    1
-  } else if v1 > v2 {
-    -1
-  } else {
-    0
-  }
-}
-
 let numericArraySortComperator = (a, b) => {
   let (_, val1) = a
   let (_, val2) = b
@@ -51,9 +18,9 @@ let numericArraySortComperator = (a, b) => {
 }
 
 let convertToSankeyFormat = (
-  ~lastStageAdd=true,
+  ~lastStageAdd,
   ~arr: array<Js.Json.t>,
-  ~sankeyConfig: nodeConfigs=sankeyConfig,
+  ~sankeyConfig: nodeConfigs,
   ~snakeyActiveTab: array<string>,
   ~topN: int,
 ) => {
diff --git a/src/components/SectionAccordion.res b/src/components/SectionAccordion.res
deleted file mode 100644
index d1b4b563b..000000000
--- a/src/components/SectionAccordion.res
+++ /dev/null
@@ -1,105 +0,0 @@
-open NewThemeUtils
-type mobileRenderType = Modal | Accordion
-@react.component
-let make = (
-  ~title="",
-  ~titleSize: headingSize=Large,
-  ~subtext="",
-  ~children,
-  ~mobileRenderType: mobileRenderType=Accordion,
-  ~hideHeaderWeb=false,
-  ~hideHeading=false,
-  ~isMobileView=false,
-  ~setShow=_ => (),
-  ~show="",
-) => {
-  let titleClass = "md:font-bold font-medium md:text-fs-16 text-fs-13 text-jp-gray-900 text-opacity-75 dark:text-white  dark:text-opacity-75"
-
-  let (isExpanded, setIsExpanded) = React.useState(_ => !isMobileView)
-
-  let url = RescriptReactRouter.useUrl()
-  let path =
-    url.path->Belt.List.toArray->Js.Array2.joinWith("/")->Js.Global.decodeURI->Js.String2.split("/")
-  let urlTitle = path[path->Js.Array2.length - 1]->Belt.Option.getWithDefault("")
-
-  let bgCss = "bg-white dark:bg-jp-gray-lightgray_background"
-
-  let checkTitle = isExpanded ? show === title ? "hidden" : "block" : "block"
-  let noBorder =
-    checkTitle === "hidden" ? "border-none" : "border-t-2 dark:border-jp-gray-950 md:border-0"
-  let expandCondition = show !== "show" ? isExpanded ? "" : "hidden" : "hidden"
-
-  React.useEffect1(_ => {
-    if show !== "show" {
-      setIsExpanded(_ => true)
-    } else {
-      setIsExpanded(_ => false)
-    }
-    None
-  }, [show])
-  let customBorder = Js.Array2.includes(["Configured Payment Methods"], show)
-    ? "border m-4"
-    : "border-none"
-  let titleBorder = Js.Array2.includes(["Configured Payment Methods"], show) ? "border-b pb-4" : ""
-  let borderCss = isExpanded ? customBorder : "border"
-
-  <AddDataAttributes attributes=[("data-section", title)]>
-    <div className={`${borderCss} md:border-0 dark:border-jp-gray-950 dark:bg-transparent`}>
-      {if isMobileView {
-        <div
-          className={`${titleClass} ${bgCss} px-4 py-3 flex justify-start text-jp-gray-900 text-opacity-75 ${checkTitle}`}
-          onClick={_ => {
-            RescriptReactRouter.push(`/settings/${urlTitle}/${title}`)
-            isMobileView
-              ? {
-                  setIsExpanded(prev => !prev)
-                  setShow(title)
-                }
-              : ()
-          }}>
-          <div className={`py-1 !text-lg ${checkTitle}`}> {title->React.string} </div>
-          <div
-            className={`cursor-pointer flex justify-center align-center text-jp-gray-900 text-right text-opacity-50 dark:text-jp-gray-text_darktheme dark:text-opacity-50 ml-auto ${checkTitle}`}>
-            <Icon name={isExpanded ? "angle-down" : "angle-right"} size=15 />
-          </div>
-        </div>
-      } else if !hideHeaderWeb {
-        <h3 className={`mt-7 text-fs-16 font-bold`}> {title->React.string} </h3>
-      } else {
-        React.null
-      }}
-      <DesktopView>
-        <UIUtils.RenderIf condition={!hideHeaderWeb}>
-          <p
-            className="mt-2 text-gray-900 text-opacity-50 dark:text-jp-gray-text_darktheme dark:text-opacity-50">
-            {subtext->React.string}
-          </p>
-        </UIUtils.RenderIf>
-      </DesktopView>
-      {if isMobileView {
-        switch mobileRenderType {
-        | Modal =>
-          <Modal
-            modalHeading=title
-            showModal=isExpanded
-            setShowModal=setIsExpanded
-            borderBottom=true
-            childClass="">
-            <div className="mx-4 mb-4"> {children} </div>
-          </Modal>
-        | Accordion =>
-          <div className={`${expandCondition} ${noBorder}`}>
-            <div className={`${titleBorder}`}>
-              <UIUtils.RenderIf condition={!hideHeading}>
-                <div className={"text-fs-16 font-bold mt-4 ml-5"}> {title->React.string} </div>
-              </UIUtils.RenderIf>
-            </div>
-            {children}
-          </div>
-        }
-      } else {
-        children
-      }}
-    </div>
-  </AddDataAttributes>
-}
diff --git a/src/components/ServerComponent.res b/src/components/ServerComponent.res
deleted file mode 100644
index 3f2b5614e..000000000
--- a/src/components/ServerComponent.res
+++ /dev/null
@@ -1,14 +0,0 @@
-@module("react-dom/server")
-external renderToStaticMarkup: React.element => string = "renderToStaticMarkup"
-
-let getPaymentFormStr = () => {
-  renderToStaticMarkup(<div />)
-}
-
-let getRedirectPage = () => {
-  renderToStaticMarkup(<div />)
-}
-
-let getMetatagsStr = () => {
-  renderToStaticMarkup(<div />)
-}
diff --git a/src/components/SidebarStyleUtils.res b/src/components/SidebarStyleUtils.res
deleted file mode 100644
index 3d2d4c3d7..000000000
--- a/src/components/SidebarStyleUtils.res
+++ /dev/null
@@ -1,55 +0,0 @@
-let getSideBarOptionStyle = (isSelected, isNewTheme) =>
-  if isNewTheme {
-    if isSelected {
-      "text-fs-14 font-bold text-white"
-    } else {
-      "text-fs-14 font-medium text-jp-2-gray-60"
-    }
-  } else if isSelected {
-    "text-base font-semibold text-black dark:text-jp-gray-text_darktheme"
-  } else {
-    "text-base font-semibold text-infra-gray-700 dark:text-jp-gray-text_darktheme text-opacity-40 dark:text-opacity-40"
-  }
-
-let getSelectedIconColor = (isSelected, isNewTheme) =>
-  isNewTheme ? isSelected ? "text-white brightness-200" : "text-jp-2-gray-60" : ""
-
-let defaultIconColor = (isAnySubItemSelected, isNewTheme) =>
-  isNewTheme ? isAnySubItemSelected ? "text-white" : "text-jp-2-gray-60" : ""
-
-let getSidebarSubOptionStyle = (isSelected, isNewTheme) =>
-  if isNewTheme {
-    if isSelected {
-      "text-white text-base"
-    } else {
-      "text-jp-2-gray-60 text-base"
-    }
-  } else {
-    "text-base pl-10"
-  }
-
-let textColor = isNewTheme => isNewTheme ? "text-white" : "dark:text-blue-800"
-
-let getIconSize = buttonType => {
-  switch buttonType {
-  | "small" => 16
-  | "medium" => 18
-  | _ => 20
-  }
-}
-
-let hoverColor = (isSelected, isNewTheme) =>
-  if isNewTheme {
-    `rounded-lg ${!isSelected
-        ? "hover:bg-jp-gray-text_darktheme hover:bg-opacity-5"
-        : "hover:bg-none"}`
-  } else {
-    "rounded-lg dark:hover:bg-jp-gray-text_darktheme dark:hover:bg-opacity-5"
-  }
-
-let getSelectedClass = (isExpanded, isNewTheme) =>
-  if isNewTheme {
-    isExpanded ? "bg-sidebar-slected py-1" : ""
-  } else {
-    "dark:bg-jp-gray-text_darktheme dark:bg-opacity-5"
-  }
diff --git a/src/components/StagedProgressBar.res b/src/components/StagedProgressBar.res
deleted file mode 100644
index fb97add21..000000000
--- a/src/components/StagedProgressBar.res
+++ /dev/null
@@ -1,93 +0,0 @@
-type progressPointerPosition = Start(bool) | Middle
-
-@react.component
-let make = (~selectedIdx, ~items, ~wrapperClass="", ~progressPointerPosition=Start(false)) => {
-  let isMobileView = MatchMedia.useMatchMedia("(max-width: 700px)")
-  let radius = isMobileView ? "h-2 w-2" : "h-3 w-3"
-
-  let itemWidthClass = switch progressPointerPosition {
-  | Middle => "flex-1"
-  | Start(isLast) => isLast ? "" : "w-full"
-  }
-
-  let barWidthClass = switch progressPointerPosition {
-  | Middle => "w-full"
-  | Start(isLast) => isLast ? "" : "w-full"
-  }
-
-  let textClass = switch progressPointerPosition {
-  | Middle => ` font-semibold ${isMobileView ? "text-xs" : ""} flex justify-center`
-  | Start(_) => `w-max font-semibold ${isMobileView ? "text-xs" : ""}`
-  }
-
-  <div className={`flex flex-row items-center justify-around ${wrapperClass}`}>
-    {items
-    ->Js.Array2.mapi((item, index) => {
-      let isLast = items->Js.Array2.length - 1 === index
-      let highlighted = index <= selectedIdx
-      <div key={string_of_int(index)} className={`${itemWidthClass} flex flex-col my-2`}>
-        <div className={`${barWidthClass} flex flex-row items-center my-2`}>
-          {switch progressPointerPosition {
-          | Start(_) =>
-            <>
-              <div
-                className={`${highlighted
-                    ? "bg-blue-800"
-                    : "bg-jp-gray-300"} ${radius} rounded-full`}
-              />
-              {if isLast {
-                React.null
-              } else {
-                <div
-                  className={`${index < selectedIdx ? "bg-blue-800" : "bg-jp-gray-300"} w-full h-1`}
-                />
-              }}
-            </>
-          | Middle =>
-            if isLast {
-              <div className="flex-1 flex items-center">
-                <div
-                  className={`${index < selectedIdx ? "bg-blue-800" : "bg-jp-gray-300"} flex-1 h-1`}
-                />
-                <div
-                  className={`${highlighted
-                      ? "bg-blue-800"
-                      : "bg-jp-gray-300"} ${radius} rounded-full`}
-                />
-                <div className={"flex-1"} />
-              </div>
-            } else if index == 0 {
-              <div className="flex-1 flex items-center">
-                <div className={"flex-1"} />
-                <div
-                  className={`${highlighted
-                      ? "bg-blue-800"
-                      : "bg-jp-gray-300"} ${radius} rounded-full`}
-                />
-                <div
-                  className={`${index < selectedIdx ? "bg-blue-800" : "bg-jp-gray-300"} flex-1 h-1`}
-                />
-              </div>
-            } else {
-              <div className="flex-1 flex items-center">
-                <div className={`${highlighted ? "bg-blue-800" : "bg-jp-gray-300"} flex-1 h-1`} />
-                <div
-                  className={`${highlighted
-                      ? "bg-blue-800"
-                      : "bg-jp-gray-300"} ${radius} rounded-full`}
-                />
-                <div
-                  className={`${index < selectedIdx ? "bg-blue-800" : "bg-jp-gray-300"} flex-1 h-1`}
-                />
-              </div>
-            }
-          }}
-        </div>
-        <div className={`${highlighted ? "text-blue-800" : "text-gray-300"} ${textClass}`}>
-          {React.string(item)}
-        </div>
-      </div>
-    })
-    ->React.array}
-  </div>
-}
diff --git a/src/components/StaticTable.res b/src/components/StaticTable.res
deleted file mode 100644
index f95769476..000000000
--- a/src/components/StaticTable.res
+++ /dev/null
@@ -1,211 +0,0 @@
-type view = Table | Card
-
-let getValue = (val: Table.cell) => {
-  switch val {
-  | Label(label) => label.title
-  | Text(str) => str === "No Value" ? "" : str
-  | _ => ""
-  }
-}
-
-let getValueWithType = (val: Table.cell) => {
-  switch val {
-  | Label(label) => (label.title, "numeric")
-  | Text(str) => (str, str->Belt.Float.fromString->Js.Option.isSome ? "numeric" : "string")
-  | _ => ("", "")
-  }
-}
-
-let sortRows = (
-  rowData: array<Js.Array2.t<Table.cell>>,
-  key,
-  sortOrder: Table.sortOrder,
-  heading,
-) => {
-  let index = heading->Js.Array2.findIndex((head: Table.header) => head.key === key)
-  rowData->Js.Array2.sortInPlaceWith((item1, item2) => {
-    if index === -1 {
-      1
-    } else {
-      let (value1, type1) = item1->Js.Array2.unsafe_get(index)->getValueWithType
-      let (value2, type2) = item2->Js.Array2.unsafe_get(index)->getValueWithType
-      if type1 === "numeric" || type2 === "numeric" {
-        let (value1, value2) = (
-          value1->Belt.Float.fromString->Belt.Option.getWithDefault(-1.0),
-          value2->Belt.Float.fromString->Belt.Option.getWithDefault(-1.0),
-        )
-        if value1 === value2 {
-          0
-        } else if value1 > value2 {
-          sortOrder === DEC ? 1 : -1
-        } else if sortOrder === DEC {
-          -1
-        } else {
-          1
-        }
-      } else if value1 === value2 {
-        0
-      } else if value1 > value2 {
-        sortOrder === DEC ? 1 : -1
-      } else if sortOrder === DEC {
-        -1
-      } else {
-        1
-      }
-    }
-  })
-}
-
-let filterRows = (
-  rowData: array<Js.Array2.t<Table.cell>>,
-  filterObj: array<Table.filterObject>,
-) => {
-  rowData->Js.Array2.filter(item => {
-    filterObj->Js.Array2.reduce((acc, filterOfColumn) => {
-      if (
-        filterOfColumn.options->Js.Array2.length === 0 ||
-          filterOfColumn.selected->Js.Array2.length === 0
-      ) {
-        true && acc
-      } else {
-        switch filterOfColumn.key->Belt.Int.fromString {
-        | Some(index) =>
-          switch item->Js.Array2.findi((_, idx) => idx === index) {
-          | Some(val) => {
-              let rowOfColumn = val->getValue
-              filterOfColumn.selected->Js.Array2.includes(rowOfColumn) && acc
-            }
-
-          | None => true && acc
-          }
-        | None => true && acc
-        }
-      }
-    }, true)
-  })
-}
-
-@react.component
-let make = (
-  ~tableHeading=?,
-  ~data,
-  ~handleRowClick,
-  ~heading,
-  ~getRowFromData,
-  ~sortedObj=?,
-  ~filterObj=?,
-  ~resultsPerPage=5,
-  ~showPagination=true,
-) => {
-  let isMobileView = MatchMedia.useMatchMedia("(max-width: 700px)")
-  let (dataView, setDataView) = React.useState(_ => isMobileView ? Card : Table)
-  let (offset, setOffset) = React.useState(() => 0)
-  let (sortedObj, setSortedObj) = React.useState(() => sortedObj)
-  let initialFilterObj = filterObj
-  let (filterObj, setFilterObj) = React.useState(() => filterObj)
-  let totalResults = {data->Js.Array.length}
-  let resultsPerPage = showPagination ? resultsPerPage : totalResults
-
-  let start = offset + 1
-  let toNum = resultsPerPage + start > totalResults ? totalResults : resultsPerPage + start - 1
-  let currentPage = offset / resultsPerPage + 1
-
-  React.useEffect1(() => {
-    setDataView(_prev => isMobileView ? Card : Table)
-    None
-  }, [isMobileView])
-
-  let paginate = React.useCallback3(pageNumber => {
-    let total = Js.Math.ceil(Belt.Int.toFloat(totalResults) /. Belt.Int.toFloat(resultsPerPage))
-    let defaultPageNumber = Js.Math.min_int(total, pageNumber)
-    let page = defaultPageNumber
-    let newOffset = (page - 1) * resultsPerPage
-    setOffset(_ => newOffset)
-  }, (setOffset, resultsPerPage, totalResults))
-
-  let rows = data->Belt.Array.keepMap(getRowFromData)
-
-  let heading = heading->Js.Array2.mapi((head: Table.header, index) => {
-    let getValue = row =>
-      row->Belt.Array.get(index)->Belt.Option.mapWithDefault("", Table.getTableCellValue)
-
-    let default = switch rows[0] {
-    | Some(row) => getValue(row)
-    | None => ""
-    }
-    let head: Table.header = {
-      ...head,
-      showSort: head.showSort &&
-      rows->Js.Array2.length > 0 &&
-      rows->Js.Array2.some(row => getValue(row) !== default),
-    }
-    head
-  })
-
-  let rows = rows->Js.Array2.slice(~start=offset, ~end_=toNum)
-
-  let filteredRows = switch filterObj {
-  | Some(obj: array<Table.filterObject>) => filterRows(rows, obj)
-  | None => rows
-  }
-
-  let sortedRows = switch sortedObj {
-  | Some(obj: Table.sortedObject) => sortRows(filteredRows, obj.key, obj.order, heading)
-  | None => filteredRows
-  }
-
-  <>
-    {switch tableHeading {
-    | Some(head) => <div className="font-bold text-3xl"> {React.string(head)} </div>
-    | None => React.null
-    }}
-    {if sortedRows->Js.Array2.length > 0 {
-      <div className="w-full overflow-x-scroll">
-        {switch dataView {
-        | Table =>
-          <Table
-            heading
-            rows={sortedRows}
-            onRowClick=handleRowClick
-            offset
-            showScrollBar=true
-            ?sortedObj
-            setSortedObj
-            ?filterObj
-          />
-        | Card => <CardTable heading rows={sortedRows} onRowClick=handleRowClick offset />
-        }}
-        {if showPagination {
-          <div className="flex flex-row justify-between mt-4">
-            <div className="text-gray-500 my-4">
-              {React.string(
-                `Showing ${start->string_of_int} to ${toNum->string_of_int} of ${totalResults->string_of_int} `,
-              )}
-            </div>
-            {if totalResults > resultsPerPage {
-              <div className="flex flex-row">
-                <Pagination totalResults currentPage resultsPerPage paginate />
-              </div>
-            } else {
-              React.null
-            }}
-          </div>
-        } else {
-          React.null
-        }}
-      </div>
-    } else if rows->Js.Array2.length > 0 {
-      <div
-        className="flex flex-col flex-1 items-center justify-center text-center text-2xl font-bold w-full m-4 gap-4">
-        {React.string("No Data Found!!")}
-        <Button
-          leftIcon={FontAwesome("arrow-alt-circle-left")}
-          onClick={_ => setFilterObj(_ => initialFilterObj)}
-          text="Clear filters"
-        />
-      </div>
-    } else {
-      React.null
-    }}
-  </>
-}
diff --git a/src/components/SynchronizedCharts.res b/src/components/SynchronizedCharts.res
deleted file mode 100644
index 3d7dc9c47..000000000
--- a/src/components/SynchronizedCharts.res
+++ /dev/null
@@ -1,294 +0,0 @@
-%%raw(`require("./highcharts.css")`)
-
-open LogicUtils
-type highcharts
-type tooltipPosition = {
-  x: int,
-  y: int,
-}
-type tooltipPoint = {
-  plotX: int,
-  plotY: int,
-}
-
-external chartsToDict: highcharts => Js.Dict.t<Js.Json.t> = "%identity"
-@send
-external setState: (Js.Json.t, string, bool) => unit = "setState"
-@send
-external drawCrosshair: (Js.Json.t, Js.Json.t, Js.Json.t) => unit = "drawCrosshair"
-@send
-external hideCrosshair: (Js.Json.t, unit) => unit = "hideCrosshair"
-@send
-external refresh: (Js.Dict.t<Js.Json.t>, array<Js.Json.t>) => unit = "refresh"
-@send
-external hide: (Js.Dict.t<Js.Json.t>, unit) => unit = "hide"
-@send
-external show: (Js.Dict.t<Js.Json.t>, unit) => unit = "show"
-@send
-external getPosition: (Js.Json.t, int, int, tooltipPoint) => tooltipPosition = "getPosition"
-@send
-external getChartPosition: Js.Json.t => Js.Json.t = "getChartPosition"
-
-@module("highcharts") external highchartsModule: highcharts = "default"
-
-type animation = {duration?: int}
-
-type style = {
-  color?: string,
-  fontWeight?: int,
-  fontSize?: int,
-  fontFamily?: string,
-  lineWidth?: int,
-  lineHeight?: float,
-  zIndex?: int,
-  width?: string,
-}
-
-type chart = {
-  \"type"?: string,
-  height?: int,
-  zoomType?: string,
-  panning?: bool,
-  className?: string,
-  borderColor?: string,
-  backgroundColor?: string,
-  borderWidth?: int,
-  borderRadius?: int,
-  spacingTop?: int,
-  spacingBottom?: int,
-  spacingLeft?: int,
-  spacingRight?: int,
-  animation?: animation,
-  fontFamily?: string,
-  style?: style,
-}
-
-type title = {
-  text?: string,
-  useHTML?: bool,
-  align?: string,
-  floating?: bool,
-  x?: int,
-  y?: int,
-  style?: style,
-}
-
-type crosshair = {color?: string, zIndex?: int}
-
-type xAxis = {
-  \"type"?: string,
-  lineColor?: string,
-  crosshair?: crosshair,
-}
-
-type yAxisRecord = {value: float}
-
-type labels = {
-  formatter?: Js_OO.Callback.arity1<yAxisRecord => string>,
-  enabled?: bool,
-  useHTML?: bool,
-}
-type tickPositionerYaxis = {dataMin: float, dataMax: float}
-type yAxis = {
-  title?: title,
-  tickPositioner?: Js_OO.Callback.arity1<tickPositionerYaxis => array<float>>,
-  opposite?: bool,
-  gridZIndex?: int,
-  gridLineColor?: string,
-  gridLineDashStyle?: string,
-  lineColor?: string,
-  lineWidth?: int,
-  visible?: bool,
-  labels?: labels,
-}
-
-type tooltip = {
-  xDateFormat?: string,
-  shared?: bool,
-  useHTML?: bool,
-  hideDelay?: int,
-  positioner?: Js_OO.Callback.arity4<(Js.Json.t, int, int, tooltipPoint) => tooltipPosition>,
-  formatter?: Js_OO.Callback.arity1<Js.Json.t => string>,
-  stickOnContact?: bool,
-  borderWidth?: int,
-  borderRadius?: int,
-  backgroundColor?: string,
-  shadow?: bool,
-  outside?: bool,
-  followPointer?: bool,
-  className?: string,
-  style?: style,
-}
-
-type legend = {enabled?: bool}
-type credits = {enabled?: bool}
-type halo = {size?: int}
-type hover = {
-  lineWidth?: int,
-  lineWidthPlus?: int,
-  enabled?: bool,
-  halo?: halo,
-}
-
-type inactive = {enabled?: bool}
-
-type states = {hover?: hover, inactive?: inactive}
-
-type area = {
-  fillOpacity?: float,
-  lineWidth?: int,
-  states?: states,
-}
-
-type boxplot = {visible?: bool}
-type marker = {
-  enabled?: bool,
-  radius?: float,
-  symbol?: string,
-}
-type events = {
-  mouseOver?: Js_OO.Callback.arity1<Js.Json.t => unit>,
-  mouseOut?: Js_OO.Callback.arity1<Js.Json.t => unit>,
-  click?: Js_OO.Callback.arity1<Js.Json.t => unit>,
-}
-
-type point = {events?: events}
-type series = {
-  marker?: marker,
-  states?: states,
-  point?: point,
-  cursor?: string,
-}
-
-type plotOptions = {
-  area?: area,
-  boxplot?: boxplot,
-  series?: series,
-}
-
-type seriesLine = {
-  name?: string,
-  data?: array<(float, float)>,
-  dashStyle?: string,
-  animation?: animation,
-  color?: string,
-  legendIndex?: int,
-  lineWidth?: float,
-  opacity?: float,
-  zIndex?: int,
-  marker?: marker,
-}
-
-type options = {
-  chart?: chart,
-  title?: title,
-  subtitle?: title,
-  xAxis?: xAxis,
-  yAxis?: yAxis,
-  tooltip?: tooltip,
-  legend?: legend,
-  credits?: credits,
-  plotOptions?: plotOptions,
-  series?: array<seriesLine>,
-}
-
-module HighchartsReact = {
-  @module("highcharts-react-official") @react.component
-  external make: (~highcharts: highcharts, ~options: options=?) => React.element = "default"
-}
-
-let getMatchedPoint = (points, xAxis) => {
-  points->Js.Array2.find(point => {
-    point->getDictFromJsonObject->getFloat("x", 0.) === xAxis
-  })
-}
-
-let setHighlightState = (~hideTitle=false, ()) =>
-  @this
-  (point: Js.Json.t) => {
-    let charts =
-      highchartsModule
-      ->chartsToDict
-      ->getArrayFromDict("charts", [])
-      ->Belt.Array.keepMap(Js.Json.decodeObject)
-    let currentSeries = point->getDictFromJsonObject->getObj("series", Js.Dict.empty())
-    let currentChart = currentSeries->getObj("chart", Js.Dict.empty())
-    let xAxisPoint = point->getDictFromJsonObject->getFloat("x", 0.)
-    charts->Js.Array2.forEach(chart => {
-      let title = chart->getObj("title", Js.Dict.empty())
-      if !(title->Js.Json.object_->checkEmptyJson) && hideTitle {
-        title->hide()
-      }
-      if chart !== currentChart {
-        let matchedPoints = []
-        let series = chart->getArrayFromDict("series", [])
-        series->Js.Array2.forEach(s => {
-          let pointsArr = s->getDictFromJsonObject->getArrayFromDict("points", [])
-          let matchedPoint =
-            pointsArr
-            ->getMatchedPoint(xAxisPoint)
-            ->Belt.Option.getWithDefault(Js.Dict.empty()->Js.Json.object_)
-
-          if !(matchedPoint->checkEmptyJson) {
-            matchedPoints->Js.Array2.push(matchedPoint)->ignore
-            matchedPoint->setState("hover", false)
-          }
-        })
-        let xAxisArr = chart->getArrayFromDict("xAxis", [])
-        let xAxis =
-          xAxisArr->Belt.Array.get(0)->Belt.Option.getWithDefault(Js.Dict.empty()->Js.Json.object_)
-
-        let matchedPoint_0 =
-          matchedPoints
-          ->Belt.Array.get(0)
-          ->Belt.Option.getWithDefault(Js.Dict.empty()->Js.Json.object_)
-        let tooltip = chart->getObj("tooltip", Js.Dict.empty())
-        if !(tooltip->Js.Json.object_->checkEmptyJson) && !(xAxis->checkEmptyJson) {
-          tooltip->refresh(matchedPoints)
-          xAxis->drawCrosshair(Js.Dict.empty()->Js.Json.object_, matchedPoint_0)
-        }
-      }
-    })
-  }
-
-let hideHighlightState = (~showTitle=false, ()) =>
-  @this
-  (point: Js.Json.t) => {
-    let charts =
-      highchartsModule
-      ->chartsToDict
-      ->getArrayFromDict("charts", [])
-      ->Js.Array2.map(getDictFromJsonObject)
-    let currentSeries = point->getDictFromJsonObject->getObj("series", Js.Dict.empty())
-    let currentChart = currentSeries->getObj("chart", Js.Dict.empty())
-    let xAxisPoint = point->getDictFromJsonObject->getFloat("x", 0.)
-    charts->Js.Array2.forEach(chart => {
-      let title = chart->getObj("title", Js.Dict.empty())
-      if !(title->Js.Json.object_->checkEmptyJson) && showTitle {
-        title->show()
-      }
-      if chart !== currentChart {
-        let series = chart->getArrayFromDict("series", [])
-        series->Js.Array2.forEach(s => {
-          let pointsArr = s->getDictFromJsonObject->getArrayFromDict("points", [])
-          let matchedPoint =
-            pointsArr
-            ->getMatchedPoint(xAxisPoint)
-            ->Belt.Option.getWithDefault(Js.Dict.empty()->Js.Json.object_)
-          if !(matchedPoint->checkEmptyJson) {
-            matchedPoint->setState("", false)
-          }
-        })
-        let xAxis =
-          chart
-          ->getArrayFromDict("xAxis", [])
-          ->Belt.Array.get(0)
-          ->Belt.Option.getWithDefault(Js.Dict.empty()->Js.Json.object_)
-        let tooltip = chart->getObj("tooltip", Js.Dict.empty())
-        if !(tooltip->Js.Json.object_->checkEmptyJson) {
-          tooltip->hide()
-          xAxis->hideCrosshair()
-        }
-      }
-    })
-  }
diff --git a/src/components/ThemeSelector.res b/src/components/ThemeSelector.res
deleted file mode 100644
index ddea54caa..000000000
--- a/src/components/ThemeSelector.res
+++ /dev/null
@@ -1,82 +0,0 @@
-type theme = Light | Dark
-
-type record = {
-  key: string,
-  title: string,
-  value: bool,
-}
-
-module MenuOption = {
-  @react.component
-  let make = (~text, ~onClick=?, ~isSelected=false) => {
-    let bgClass = "bg-white dark:bg-jp-gray-950 hover:bg-jp-gray-100 dark:hover:bg-jp-gray-900"
-
-    <button
-      className={`px-4 py-3 flex text-sm text-gray-700 dark:text-gray-400 justify-between cursor-pointer ${bgClass}`}
-      ?onClick>
-      {React.string(text)}
-      <div className="mt-1">
-        <Tick isSelected />
-      </div>
-    </button>
-  }
-}
-
-@react.component
-let make = (~setIsAppearancePopupOpen, ~setisBrowserTheme=?) => {
-  let (theme, setTheme) = React.useContext(ThemeProvider.themeContext)
-  let (selectedTheme, setSelectedTheme) = React.useState(_ => {
-    switch LocalStorage.getItem("theme")->Js.Nullable.toOption {
-    | Some(str) => str
-    | None => "LightTheme"
-    }
-  })
-
-  let setIsSelected = React.useCallback2(newBoolValue => {
-    setTheme(
-      if newBoolValue {
-        Dark
-      } else {
-        Light
-      },
-    )
-  }, (theme, setTheme))
-
-  let isCurrentlyDark = MatchMedia.useMatchMedia("(prefers-color-scheme: dark)")
-
-  let themeList = [
-    {key: "BrowserTheme", title: "Use Device Theme", value: isCurrentlyDark},
-    {key: "DarkTheme", title: "Dark Theme", value: true},
-    {key: "LightTheme", title: "Light Theme", value: false},
-  ]
-
-  <>
-    <div className="flex mx-3 mb-3">
-      <div className="cursor-pointer" onClick={_ => setIsAppearancePopupOpen(_ => false)}>
-        <Icon className="mr-3 mt-1" size=12 name="chevron-left" />
-      </div>
-      <div className="text-black dark:text-white"> {React.string("Appearance")} </div>
-    </div>
-    <div className="m-3 text-sm text-gray-500 dark:text-gray-400">
-      {React.string("Settings applies to this browser only")}
-    </div>
-    {themeList
-    ->Js.Array2.mapi((obj, index) => {
-      <MenuOption
-        key={index->string_of_int}
-        onClick={_ => {
-          setIsSelected(obj.value)
-          setSelectedTheme(_ => obj.key)
-          switch setisBrowserTheme {
-          | Some(setisBrowserTheme) => setisBrowserTheme(_ => obj.key === "BrowserTheme")
-          | _ => ()
-          }
-          LocalStorage.setItem("theme", obj.key)
-        }}
-        text=obj.title
-        isSelected={selectedTheme === obj.key}
-      />
-    })
-    ->React.array}
-  </>
-}
diff --git a/src/components/ThemeToggle.res b/src/components/ThemeToggle.res
deleted file mode 100644
index bf130237b..000000000
--- a/src/components/ThemeToggle.res
+++ /dev/null
@@ -1,41 +0,0 @@
-@react.component
-let make = (~setIsAppearancePopupOpen, ~setisBrowserTheme) => {
-  let (theme, setTheme) = React.useContext(ThemeProvider.themeContext)
-  let toggleSetTheme = isDark => {
-    setisBrowserTheme(_ => false)
-    switch isDark {
-    | false => setTheme(Dark)
-    | true => setTheme(Light)
-    }
-  }
-
-  React.useEffect1(() => {
-    let selectedTheme = "LightTheme"
-
-    LocalStorage.setItem("theme", selectedTheme)
-    None
-  }, [theme])
-
-  <div className="flex pr-4">
-    <div
-      className="w-full py-3 pl-4 flex text-sm text-gray-700 dark:text-gray-400 cursor-pointer bg-white dark:bg-jp-gray-950 hover:bg-jp-gray-100 dark:hover:bg-jp-gray-900 justify-between"
-      onClick={_ => toggleSetTheme(theme === Dark)}>
-      {React.string("Dark Mode")}
-      <BoolInput.BaseComponent isSelected={theme === Dark} setIsSelected={a => toggleSetTheme(a)} />
-    </div>
-    <div className="pl-2 cursor-pointer justify-center flex">
-      <ToolTip
-        tooltipWidthClass="w:24"
-        description="Appearance Advance settings"
-        toolTipFor={<Icon
-          name="settings"
-          size=15
-          onClick={_ => setIsAppearancePopupOpen(_ => true)}
-          className="text-jp-gray-700 dark:hover:text-white hover:text-jp-gray-900 "
-        />}
-        toolTipPosition=Left
-        tooltipPositioning=#absolute
-      />
-    </div>
-  </div>
-}
diff --git a/src/components/TimeInput.res b/src/components/TimeInput.res
index d37eed727..acdb8517b 100644
--- a/src/components/TimeInput.res
+++ b/src/components/TimeInput.res
@@ -37,21 +37,6 @@ let make = (
 ) => {
   let _ = position
   let _ = icon
-  let {isFirst, isLast} = React.useContext(ButtonGroupContext.buttonGroupContext)
-  let cursorClass = if isDisabled {
-    "cursor-not-allowed"
-  } else {
-    ""
-  }
-  let roundingClass = if isFirst && isLast {
-    "rounded-md"
-  } else if isFirst {
-    "rounded-l-md"
-  } else if isLast {
-    "rounded-r-md"
-  } else {
-    ""
-  }
   let value = switch input.value->Js.Json.decodeString {
   | Some(str) => str
   | None => ""
@@ -78,8 +63,6 @@ let make = (
   let onMinuteChange = React.useCallback1(changeVal(1), [changeVal])
   let onSecondsChange = React.useCallback1(changeVal(2), [changeVal])
 
-  let _className = `${roundingClass} ${cursorClass} border border-jp-gray-lightmode_steelgray border-opacity-75 h-8 w-48 font-semibold pl-3 pt-3 pb-3 text-jp-gray-900 text-lg text-opacity-75 placeholder-jp-gray-900 placeholder-opacity-25 hover:bg-jp-gray-lightmode_steelgray hover:bg-opacity-20 hover:border-jp-gray-900 hover:border-opacity-20 focus:text-opacity-100 focus:outline-none focus:border-blue-800 focus:border-opacity-100 dark:text-jp-gray-text_darktheme dark:text-opacity-75 dark:border-jp-gray-960 dark:hover:border-jp-gray-960 dark:hover:bg-jp-gray-970 dark:bg-jp-gray-lightgray_background dark:placeholder-jp-gray-text_darktheme dark:placeholder-opacity-25 dark:focus:text-opacity-100 dark:focus:border-blue-800 `
-
   <div className="h-8 max-w-min flex flex-row gap-1 text-sm">
     {switch label {
     | Some(str) => <div className="font-semibold mr-1"> {React.string(str)} </div>
diff --git a/src/components/TimeRangeInput.res b/src/components/TimeRangeInput.res
deleted file mode 100644
index d5b0eead2..000000000
--- a/src/components/TimeRangeInput.res
+++ /dev/null
@@ -1,242 +0,0 @@
-external intToFormEvent: int => ReactEvent.Form.t = "%identity"
-
-open TimeRangeInputUtils
-module BaseTimeComponent = {
-  @react.component
-  let make = (~value, ~setVal, ~fontStyle="") => {
-    let passedTime = Js.String2.slice(~from=0, ~to_=5, value)
-    let splitValue = Js.String2.split(passedTime, ":")
-    let defaultHour = switch Belt.Array.get(splitValue, 0) {
-    | Some(a) => a == "" ? "12" : a
-    | None => "01"
-    }
-    let defaultMinute = switch Belt.Array.get(splitValue, 1) {
-    | Some(a) => a
-    | None => "00"
-    }
-    let getMeridianFromValue = Js.String2.slice(~from=5, ~to_=value->Js.String2.length, value)
-    let defaultMeridian = switch getMeridianFromValue->Js.String2.length {
-    | 0 => "am"
-    | _ => getMeridianFromValue
-    }
-
-    let hoursArr = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]
-    let minutesArr = ["00", "15", "29", "30", "45", "59"]
-    let ampmArr = SelectBox.makeUpdatedOptions(["AM", "PM"], ["am", "pm"])
-
-    let (hours, setHours) = React.useState(() => defaultHour)
-    let (min, setMin) = React.useState(() => defaultMinute)
-    let (ampm, setAmpm) = React.useState(() => defaultMeridian)
-
-    React.useEffect3(() => {
-      setVal(`${hours}:${min}${ampm}`)
-      None
-    }, (hours, min, ampm))
-
-    let handleHourChange = ev => {
-      let target = ev->ReactEvent.Form.target
-      let value = target["value"]
-      setHours(value)
-    }
-
-    let handleMinChange = ev => {
-      let target = ev->ReactEvent.Form.target
-      let value = target["value"]
-      setMin(value)
-    }
-    let handleAmpmChange = ev => {
-      let target = ev->ReactEvent.Form.target
-      let value = target["value"]
-      setAmpm(value)
-    }
-
-    <div className="flex w-min">
-      <select
-        name="hours"
-        value={hours}
-        onChange=handleHourChange
-        className={`bg-transparent appearance-none outline-none ${fontStyle}`}>
-        {hoursArr
-        ->Js.Array2.mapi((item: string, i) => {
-          <option key={string_of_int(i)} value=item> {React.string(item)} </option>
-        })
-        ->React.array}
-      </select>
-      <span className="mx-0.5"> {React.string(":")} </span>
-      <select
-        name="minutes"
-        value={min}
-        onChange={handleMinChange}
-        className={`bg-transparent appearance-none outline-none mr-3 ${fontStyle}`}>
-        {minutesArr
-        ->Js.Array2.mapi((item: string, i) => {
-          <option key={string_of_int(i)} value=item> {React.string(item)} </option>
-        })
-        ->React.array}
-      </select>
-      <select
-        name="ampm"
-        value={ampm}
-        onChange={handleAmpmChange}
-        className={`bg-transparent appearance-none outline-none ${fontStyle}`}>
-        {ampmArr
-        ->Js.Array2.mapi((item: SelectBox.dropdownOption, i) => {
-          <option key={string_of_int(i)} value={item.value}> {React.string(item.label)} </option>
-        })
-        ->React.array}
-      </select>
-    </div>
-  }
-}
-
-let getTimein24Format = time => {
-  let temptime2 = if Js.String2.includes(time, "am") {
-    let temp = Js.String2.split(time, "am")
-    let temp2 = Js.String2.split(temp[0]->Belt.Option.getWithDefault(""), ":")
-    let mins = temp2[1]->Belt.Option.getWithDefault("")
-    let hour = temp2[0]->Belt.Option.getWithDefault("")
-    if hour == "12" {
-      Js.String2.split(`00:${mins}`, ":")
-    } else {
-      Js.String2.split(temp[0]->Belt.Option.getWithDefault(""), ":")
-    }
-  } else {
-    let temp = Js.String2.split(time, "pm")
-    let temp2 = Js.String2.split(temp[0]->Belt.Option.getWithDefault(""), ":")
-    let mins = temp2[1]->Belt.Option.getWithDefault("")
-    let hour = switch Belt.Int.fromString(temp2[0]->Belt.Option.getWithDefault("")) {
-    | Some(a) => a != 12 ? Belt.Int.toString(a + 12) : Belt.Int.toString(a)
-    | None => ""
-    }
-    Js.String2.split(`${hour}:${mins}`, ":")
-  }
-  temptime2
-}
-
-type valType = {start: string, end: string}
-external ffInputToStringInput: ReactFinalForm.fieldRenderPropsInput => ReactFinalForm.fieldRenderPropsCustomInput<
-  string,
-> = "%identity"
-let getTimein12Format = time => {
-  let arr = Js.String2.split(time, ":")
-  let hr = switch Belt.Int.fromString(arr[0]->Belt.Option.getWithDefault("00")) {
-  | Some(a) => a
-  | None => 0
-  }
-  let minutePart = arr[1]->Belt.Option.getWithDefault("00")
-  let amPm = hr >= 12 ? "pm" : "am"
-
-  let hourPart = {
-    let newHours = if hr === 0 {
-      12
-    } else if hr > 12 {
-      hr - 12
-    } else {
-      hr
-    }
-    newHours->Js.Int.toString->padZeroes2
-  }
-  `${hourPart}:${minutePart}${amPm}`
-}
-
-@react.component
-let make = (~fieldsArray: array<ReactFinalForm.fieldRenderProps>) => {
-  let customTimezoneToISOString = TimeZoneHook.useCustomTimeZoneToIsoString()
-  let isoStringToCustomTimeZone = TimeZoneHook.useIsoStringToCustomTimeZone()
-
-  let durationAmount = ReactFinalForm.useField("rule_dsl.schedule.duration_amount").input
-
-  let startDate =
-    (
-      fieldsArray[0]->Belt.Option.getWithDefault(ReactFinalForm.fakeFieldRenderProps)
-    ).input->ffInputToStringInput
-  let endDate =
-    (
-      fieldsArray[1]->Belt.Option.getWithDefault(ReactFinalForm.fakeFieldRenderProps)
-    ).input->ffInputToStringInput
-
-  let startDateValue = startDate.value
-  let endDateValue = endDate.value
-
-  let getTimefromStartandEndDate = date => {
-    let customTimeZone = isoStringToCustomTimeZone(date)
-    if Js.String2.length(date) > 0 {
-      let convertedStr = getTimein12Format(
-        `${customTimeZone.hour}:${customTimeZone.minute}:${customTimeZone.second}`,
-      )
-      convertedStr
-    } else {
-      "12:00:am"
-    }
-  }
-  let intStartTime = getTimefromStartandEndDate(startDate.value->Js.String2.make)
-  let intEndTime = getTimefromStartandEndDate(endDate.value->Js.String2.make)
-  let (val, setVal) = React.useState(_ => {
-    start: {
-      startDate.value->Js.String2.make != "" ? intStartTime : "12:00am"
-    },
-    end: {
-      endDate.value->Js.String2.make != "" ? intEndTime : "11:59pm"
-    },
-  })
-
-  let updateDuration = (stSec, endSec) => {
-    let diffOfstartAndEnd = if endSec >= stSec {
-      endSec - stSec
-    } else {
-      endSec - stSec + 86400
-    }
-    durationAmount.onChange(diffOfstartAndEnd->intToFormEvent)
-  }
-
-  let changeStart = a => {
-    let startDateTime = isoStringToCustomTimeZone(startDate.value->Js.String2.make)
-    let formattedTime = getTimein24Format(a)
-    let startDateTimeCheck = customTimezoneToISOString(
-      startDateTime.year,
-      startDateTime.month,
-      startDateTime.date,
-      formattedTime[0]->Belt.Option.getWithDefault("00"),
-      formattedTime[1]->Belt.Option.getWithDefault("00"),
-      "00",
-    )
-
-    let startTimeInSec = getDateTimeInSec(startDateTimeCheck)
-    let endTimeInSec = getDateTimeInSec(endDateValue->LogicUtils.getStringFromJson(""))
-    updateDuration(startTimeInSec, endTimeInSec)
-    startDate.onChange(startDateTimeCheck)
-    setVal(prev => {start: a, end: prev.end})
-  }
-  let changeEnd = a => {
-    let endDateTime = isoStringToCustomTimeZone(endDate.value->Js.String2.make)
-    let formattedTime = getTimein24Format(a)
-    let endDateTimeCheck = customTimezoneToISOString(
-      endDateTime.year,
-      endDateTime.month,
-      endDateTime.date,
-      formattedTime[0]->Belt.Option.getWithDefault("00"),
-      formattedTime[1]->Belt.Option.getWithDefault("00"),
-      "00",
-    )
-    let startTimeInSec = getDateTimeInSec(startDateValue->LogicUtils.getStringFromJson(""))
-    let endTimeInSec = getDateTimeInSec(endDateTimeCheck)
-    updateDuration(startTimeInSec, endTimeInSec)
-
-    endDate.onChange(endDateTimeCheck)
-    setVal(prev => {start: prev.start, end: a})
-  }
-  let time = `${val.start}  "-" ${val.end}`
-  <AddDataAttributes attributes=[("data-time-range", time)]>
-    <div className="flex p-3 w-min border border-jp-gray-500 rounded-lg">
-      <div className="flex items-center mr-2">
-        <Icon size=16 name="clock" className="" />
-      </div>
-      <div className="w-2" />
-      <BaseTimeComponent value=val.start setVal=changeStart />
-      <div className="flex items-center mr-3 ml-3">
-        <Icon size=16 name="arrow-right" className="stroke-current stroke-0" />
-      </div>
-      <BaseTimeComponent value=val.end setVal=changeEnd />
-    </div>
-  </AddDataAttributes>
-}
diff --git a/src/components/TimeRangeInputUtils.res b/src/components/TimeRangeInputUtils.res
deleted file mode 100644
index 698b93eb7..000000000
--- a/src/components/TimeRangeInputUtils.res
+++ /dev/null
@@ -1,33 +0,0 @@
-let convertIntoSec = timeArray => {
-  if timeArray->Js.Array2.length > 0 {
-    let hr =
-      timeArray[0]
-      ->Belt.Option.getWithDefault("00")
-      ->Belt.Int.fromString
-      ->Belt.Option.getWithDefault(0)
-    let min =
-      timeArray[1]
-      ->Belt.Option.getWithDefault("00")
-      ->Belt.Int.fromString
-      ->Belt.Option.getWithDefault(0)
-    hr * 60 * 60 + min * 60
-  } else {
-    0
-  }
-}
-
-let getDateTimeInSec = dateValue => {
-  let timeDateArray = dateValue->Js.String2.split("T")
-  let timeArray = timeDateArray[1]->Belt.Option.getWithDefault("00:00")->Js.String2.split(":")
-  convertIntoSec(timeArray)
-}
-
-let padZeroes2 = str => {
-  if str->Js.String2.length == 0 {
-    "00"
-  } else if str->Js.String2.length == 1 {
-    `0${str}`
-  } else {
-    str
-  }
-}
diff --git a/src/components/Timer.res b/src/components/Timer.res
deleted file mode 100644
index dd465c40e..000000000
--- a/src/components/Timer.res
+++ /dev/null
@@ -1,27 +0,0 @@
-type timerId
-@val external setInterval: (unit => unit, int) => int = "setInterval"
-@val external clearInterval: int => unit = "clearInterval"
-
-@react.component
-let make = (~initialTime) => {
-  let (_, setIsTimeOver) = React.useState(_ => false)
-  let (timer, setTimer) = React.useState(_ => initialTime)
-  let (intervalId, setIntervalId) = React.useState(_ => 0)
-  let countdown = _ => {
-    setTimer(timer => timer - 1)
-  }
-  React.useEffect1(() => {
-    if timer == 0 {
-      clearInterval(intervalId)
-      setIsTimeOver(_ => true)
-      setTimer(_ => 0)
-    } else {
-      setTimer(_ => initialTime)
-      let intervalid = setInterval(() => countdown(timer), 1000)
-      setIntervalId(_ => intervalid)
-    }
-    None
-  }, [])
-
-  <div className="mx-2"> {timer->Belt.Int.toString->React.string} </div>
-}
diff --git a/src/components/TopActions.res b/src/components/TopActions.res
deleted file mode 100644
index a5b52bf9f..000000000
--- a/src/components/TopActions.res
+++ /dev/null
@@ -1,146 +0,0 @@
-@react.component
-let make = (
-  ~selectedStage: 'a,
-  ~setSelectedStage,
-  ~enableStage,
-  ~setEnableStage,
-  ~list: array<'a>,
-  ~mapper: 'a => string,
-  ~isSubmit=true,
-  ~customNextClick=_ => (),
-  ~buttonText="Submit",
-  ~submitButton=?,
-  ~showBackButton=true,
-) => {
-  let selectedIdx = list->Js.Array2.indexOf(selectedStage)
-  let setSelectedIdx = offset => {
-    let newStageIndex = selectedIdx + offset
-    switch list[0] {
-    | Some(ele) => {
-        let newStage = list->Belt.Array.get(newStageIndex)->Belt.Option.getWithDefault(ele)
-        setSelectedStage(_ => newStage)
-      }
-    | None => ()
-    }
-  }
-
-  let backButton = if selectedIdx > 0 && showBackButton {
-    <div className="mr-2">
-      <Button
-        text="Back"
-        buttonType={isSubmit ? Secondary : Primary}
-        leftIcon={CustomIcon(
-          <Icon
-            name="back"
-            size=15
-            className="mr-1 jp-gray-900 fill-opacity-50 dark:jp-gray-text_darktheme"
-          />,
-        )}
-        buttonSize=Small
-        onClick={_ =>
-          if selectedIdx > -1 {
-            setSelectedIdx(-1)
-            setEnableStage(_ => false)
-          }}
-      />
-    </div>
-  } else {
-    React.null
-  }
-
-  let nextButton = if selectedIdx !== Js.Array2.length(list) - 1 {
-    <Button
-      text={"Next Step"}
-      rightIcon={CustomIcon(
-        <Icon
-          name="arrow_right"
-          size=15
-          className="ml-1 jp-gray-900 fill-opacity-50 dark:jp-gray-text_darktheme"
-        />,
-      )}
-      buttonType=Primary
-      buttonSize=Small
-      onClick={_ => {
-        customNextClick()
-        if selectedIdx != Js.Array2.length(list) - 1 {
-          setSelectedIdx(1)
-          setEnableStage(_ => false)
-        }
-      }}
-      buttonState={if enableStage {
-        Normal
-      } else {
-        Disabled
-      }}
-    />
-  } else if isSubmit {
-    switch submitButton {
-    | Some(btn) => btn
-    | None =>
-      <FormRenderer.SubmitButton
-        text=buttonText
-        customSumbitButtonStyle="w-30 !h-10"
-        toolTipPosition={TopLeft}
-        icon={Button.FontAwesome("save")}
-      />
-    }
-  } else {
-    React.null
-  }
-  let marginClass = "p-2 mb-3"
-  <div
-    className={`flex flex-row bg-white border dark:bg-jp-gray-lightgray_background border-jp-gray-lightmode_steelgray border-opacity-75 dark:border-jp-gray-960 rounded dark:shadow-generic_shadow_dark justify-between ${marginClass}`}>
-    <div className="flex flex-row items-center gap-10">
-      {list
-      ->Js.Array2.map(mapper)
-      ->Js.Array2.mapi((item, index) => {
-        let font_highlight = if selectedIdx > index {
-          "font-semibold text-black"
-        } else {
-          "font-regular text-jp-gray-900 text-opacity-50"
-        }
-        let textColor = if selectedIdx === index {
-          "text-blue-800"
-        } else {
-          ""
-        }
-        <div
-          key={index->string_of_int}
-          className={`flex ${font_highlight} flex-row   dark:text-jp-gray-text_darktheme md:mr-5 mr-0 items-center `}>
-          <div
-            className={`mr-2
-               ${index <= selectedIdx && index != selectedIdx
-                ? "bg-green-800 text-white "
-                : selectedIdx === index
-                ? "bg-blue-800 text-white "
-                : "bg-jp-gray-600 dark:bg-jp-gray-800 text-jp-gray-200 dark:text-gray-300"}  rounded-full h-7 w-7 flex items-center justify-center`}>
-            {index <= selectedIdx && index != selectedIdx
-              ? <Icon className="align-middle" name="check" size=12 />
-              : React.string((index + 1)->string_of_int)}
-          </div>
-          <div className={`text-small px-2 ${textColor} dark:text-gray-400`}>
-            {React.string(item)}
-          </div>
-          <div className="md:pl-12 pl-2">
-            {if index == list->Js.Array2.length - 1 {
-              React.null
-            } else {
-              <Icon
-                className="align-middle text-gray-300 dark:text-gray-600"
-                size=14
-                name="chevron-right"
-              />
-            }}
-          </div>
-        </div>
-      })
-      ->React.array}
-    </div>
-    <div className="flex flex-row  text-semibold">
-      <div className="flex flex-row gap-2">
-        backButton
-        nextButton
-      </div>
-    </div>
-  </div>
-}
diff --git a/src/components/UploadImage.res b/src/components/UploadImage.res
deleted file mode 100644
index ca4a98e69..000000000
--- a/src/components/UploadImage.res
+++ /dev/null
@@ -1,50 +0,0 @@
-type t
-type append
-external toString: 't => string = "%identity"
-external toRef: 'a => 't = "%identity"
-@new external formData: unit => t = "FormData"
-@send external append: (t, string, 'a) => unit = "append"
-@send external delete: (t, string) => unit = "delete"
-@send external click: Dom.element => unit = "click"
-
-type advanceFile = {
-  file: Js.Json.t,
-  fileName: string,
-}
-
-module FancyInput = {
-  @react.component
-  let make = (~children, ~onChange, ~inputRef) =>
-    <div>
-      <input
-        type_="file" accept="image/*,.pdf" hidden=true onChange ref={inputRef->ReactDOM.Ref.domRef}
-      />
-      children
-    </div>
-}
-
-@react.component
-let make = (~buttonText, ~onFileUpload) => {
-  let inputRef = React.useRef(Js.Nullable.null)
-
-  let focusInput = () =>
-    inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(input => input->click)
-  let onClick = _ => focusInput()
-
-  let onChange = evt => {
-    let target = ReactEvent.Form.target(evt)
-
-    if target["files"]->Js.Array2.length > 0 {
-      let file = target["files"]["0"]
-      onFileUpload(file, file["name"])
-    }
-  }
-
-  <div>
-    <FancyInput inputRef onChange>
-      <div className="">
-        <Button text=buttonText onClick />
-      </div>
-    </FancyInput>
-  </div>
-}
diff --git a/src/entryPoints/hyperswitch/HyperSwitchApp.res b/src/entryPoints/hyperswitch/HyperSwitchApp.res
index f0be4b3a4..0ee20d991 100644
--- a/src/entryPoints/hyperswitch/HyperSwitchApp.res
+++ b/src/entryPoints/hyperswitch/HyperSwitchApp.res
@@ -1,4 +1,3 @@
-type modeType = LiveModeDropDown | TestModeDropDown
 open UIUtils
 open HSwitchUtils
 open HSLocalStorage
@@ -111,13 +110,13 @@ let make = () => {
 
   let setUpDashboard = async () => {
     try {
-      let _wasmResult = await Window.connectorWasmInit()
-      let _profileDetails = await fetchBusinessProfiles()
-      let _connectorList = await fetchConnectorListResponse()
-      let _merchantDetails = await fetchMerchantAccountDetails()
+      let _ = await Window.connectorWasmInit()
+      let _ = await fetchBusinessProfiles()
+      let _ = await fetchConnectorListResponse()
+      let _ = await fetchMerchantAccountDetails()
 
       if featureFlagDetails.quickStart {
-        let _featureFlag = await fetchInitialEnums()
+        let _ = await fetchInitialEnums()
       }
 
       if featureFlagDetails.isLiveMode {
diff --git a/src/genericUtils/AtomsStorage.res b/src/genericUtils/AtomsStorage.res
deleted file mode 100644
index 5d297a50c..000000000
--- a/src/genericUtils/AtomsStorage.res
+++ /dev/null
@@ -1,8 +0,0 @@
-module Euler = {
-  let parentContextRecoil: Recoil.recoilAtom<string> = Recoil.atom(. "parentContext", "")
-
-  let merchantAccessRecoil: Recoil.recoilAtom<array<Js.Json.t>> = Recoil.atom(.
-    "merchantAccess",
-    [],
-  )
-}
diff --git a/src/genericUtils/BreadCrumbNavigation.res b/src/genericUtils/BreadCrumbNavigation.res
index bea7456fa..f1d05a33e 100644
--- a/src/genericUtils/BreadCrumbNavigation.res
+++ b/src/genericUtils/BreadCrumbNavigation.res
@@ -10,8 +10,6 @@ let arrowDivider =
     <Icon className="align-middle  text-jp-gray-930" size=8 name="chevron-right" />
   </span>
 
-let slashDivider = <Icon size=16 name="slash" className="text-jp-2-gray-40" />
-
 @react.component
 let make = (
   ~path: array<breadcrumb>=[],
diff --git a/src/genericUtils/UseEvent.res b/src/genericUtils/UseEvent.res
index 64eb1a7cb..355a30fc4 100644
--- a/src/genericUtils/UseEvent.res
+++ b/src/genericUtils/UseEvent.res
@@ -10,15 +10,3 @@ let useEvent0 = callback => {
     callbackRef.current()
   })
 }
-let useEvent1 = callback => {
-  let callbackRef = React.useRef(callback)
-  React.useEffect1(() => {
-    callbackRef.current = callback
-
-    None
-  }, [callback])
-
-  React.useCallback0(a => {
-    callbackRef.current(a)
-  })
-}
diff --git a/src/hooks/AnalyticsHooks.res b/src/hooks/AnalyticsHooks.res
index 69d35698b..6fa654e43 100644
--- a/src/hooks/AnalyticsHooks.res
+++ b/src/hooks/AnalyticsHooks.res
@@ -3,18 +3,6 @@ type response = Error(option<string>) | Success
 type timeType = {startTime: string, endTime: string}
 let defaultFilter = Recoil.atom(. "defaultFilter", "")
 
-let filterToKeyMapper = json => {
-  let arrjson =
-    json
-    ->getDictFromJsonObject
-    ->getArrayFromDict("queryData", [])
-    ->Belt.Array.keepMap(item => {
-      let strr = item->getDictFromJsonObject->getString("dimension", "")
-      strr == "" ? None : Some(strr)
-    })
-  arrjson
-}
-
 let handleError = (json: Js.Json.t) => {
   switch Js.Json.decodeObject(json) {
   | Some(jsonDict) => {
@@ -31,39 +19,6 @@ let handleError = (json: Js.Json.t) => {
   }
 }
 
-let useGetCalendarTime = () => {
-  let url = RescriptReactRouter.useUrl()
-  let urlSplit =
-    url.search
-    ->Js.Global.decodeURI
-    ->Js.String2.split("&")
-    ->Js.Array2.map(item => {
-      let arr = Js.String.split("=", item)
-      (
-        arr->Belt.Array.get(0)->Belt.Option.getWithDefault(""),
-        arr->Belt.Array.get(1)->Belt.Option.getWithDefault(""),
-      )
-    })
-    ->Js.Dict.fromArray
-
-  let startTime = switch Js.Dict.get(urlSplit, "startTime") {
-  | Some(a) => a
-  | None => ""
-  }
-
-  let endTime = switch Js.Dict.get(urlSplit, "endTime") {
-  | Some(b) => b
-  | None => ""
-  }
-  let calendarTime = React.useMemo2(() => {
-    {
-      startTime,
-      endTime,
-    }
-  }, (startTime, endTime))
-  calendarTime
-}
-
 let useGetFiltersData = () => {
   let (filterData, setFilterData) = React.useState(_ => None)
   let timeFilters = UrlUtils.useGetFilterDictFromUrl("")
@@ -99,88 +54,6 @@ let useGetFiltersData = () => {
   }
 }
 
-let useGetLiveFiltersData = () => {
-  let (filterData, setFilterData) = React.useState(_ => None)
-
-  let addLogsAroundFetch = EulerAnalyticsLogUtils.useAddLogsAroundFetch()
-
-  let fetchApi = AuthHooks.useApiFetcher()
-
-  (uri, method, filterBody) => {
-    open Promise
-
-    React.useEffect1(() => {
-      let endTimeVal = Js.Date.make()->Js.Date.toISOString
-      let endTimeInMs = Js.Date.make()->Js.Date.getTime
-      let ttlTime = 1.0 *. 3600.0 *. 1000.0
-      let startTimeInMs = endTimeInMs -. ttlTime
-      let startTimeVal = Js.Date.fromFloat(startTimeInMs)->Js.Date.toISOString
-      setFilterData(_ => None)
-
-      if startTimeVal !== "" && endTimeVal !== "" {
-        fetchApi(
-          uri,
-          ~method_=method,
-          ~bodyStr=filterBody,
-          ~headers=[("QueryType", "Filter")]->Js.Dict.fromArray,
-          (),
-        )
-        ->addLogsAroundFetch(~logTitle="Filter Data Api")
-        ->thenResolve(json => setFilterData(_ => json->Some))
-        ->catch(_err => resolve())
-        ->ignore
-      }
-      None
-    }, [filterBody])
-    filterData
-  }
-}
-
-let useAnalyticsFetch = () => {
-  let fetchApi = AuthHooks.useApiFetcher()
-  let fetchChartData = (~url, ~body, ~setState, ~setDataLoading) => {
-    setDataLoading(_ => true)
-    open Promise
-    fetchApi(url, ~method_=Fetch.Post, ~bodyStr=body, ())
-    ->then(Fetch.Response.json)
-    ->then(json => {
-      // get total volume and time series and pass that on
-      let dataRaw =
-        json->getDictFromJsonObject->getJsonObjectFromDict("queryData")->getArrayFromJson([])
-
-      setState(dataRaw)
-      setDataLoading(_ => false)
-      resolve()
-    })
-    ->catch(_err => {
-      setDataLoading(_ => false)
-      resolve()
-    })
-    ->ignore
-  }
-  fetchChartData
-}
-
-let useSaveView = () => {
-  let fetchApi = AuthHooks.useApiFetcher()
-  (~bodyStr: string) => {
-    let url = "/api/ec/v1/savedView"
-
-    open Promise
-    fetchApi(url, ~bodyStr, ~method_=Post, ())
-    ->then(res => {
-      if res->Fetch.Response.status == 200 {
-        resolve(Success)
-      } else {
-        Fetch.Response.json(res)->thenResolve(json => {
-          json->handleError->Error
-        })
-      }
-    })
-    ->catch(_ => resolve(Error(Some("Something went wrong"))))
-  }
-}
-
 let useUpdateSaveView = () => {
   let fetchApi = AuthHooks.useApiFetcher()
   (~bodyStr: string, ~id: string) => {
@@ -258,50 +131,3 @@ type tabsetHookType = {
   activeTab: option<array<string>>,
   updateUrlWithPrefix: Js.Dict.t<string> => unit,
 }
-
-let useTabHooks = (~moduleName, ~segmentsOptions) => {
-  let {updateExistingKeys} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-  let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-  let (activeTav, setActiveTab) = React.useState(_ =>
-    getModuleFilters->getStrArrayFromDict(
-      `${moduleName}.tabName`,
-      [segmentsOptions->Belt.Array.get(0)->Belt.Option.getWithDefault("")],
-    )
-  )
-  let setActiveTab = React.useMemo1(() => {
-    (str: string) => {
-      setActiveTab(_ => str->Js.String2.split(","))
-    }
-  }, [setActiveTab])
-
-  let updateUrlWithPrefix = React.useMemo1(() => {
-    (dict: Js.Dict.t<string>) => {
-      let currentDict =
-        dict
-        ->Js.Dict.entries
-        ->Belt.Array.keepMap(item => {
-          let (key, value) = item
-          if value !== "" {
-            Some((`${moduleName}.${key}`, value))
-          } else {
-            None
-          }
-        })
-      updateExistingKeys(currentDict->Js.Dict.fromArray)
-    }
-  }, [updateExistingKeys])
-  let activeTab = React.useMemo1(() => {
-    Some(
-      getModuleFilters
-      ->getOptionStrArrayFromDict(`${moduleName}.tabName`)
-      ->Belt.Option.getWithDefault(activeTav)
-      ->Js.Array2.filter(item => item !== ""),
-    )
-  }, [getModuleFilters])
-
-  {
-    setActiveTab,
-    activeTab,
-    updateUrlWithPrefix,
-  }
-}
diff --git a/src/hooks/AuthHooks.res b/src/hooks/AuthHooks.res
index 5d60501df..7768a85be 100644
--- a/src/hooks/AuthHooks.res
+++ b/src/hooks/AuthHooks.res
@@ -1,9 +1,4 @@
 open Promise
-open LogicUtils
-@val @scope(("window", "localStorage"))
-external clearLocalStorage: unit => unit = "clear"
-@val @scope(("window", "location")) external pathName: string = "pathname"
-@val @scope(("window", "location")) external hostname: string = "hostname"
 type sessionStorage = {
   getItem: (. string) => Js.Nullable.t<string>,
   setItem: (. string, string) => unit,
@@ -14,140 +9,28 @@ type sessionStorage = {
 
 external dictToObj: Js.Dict.t<'a> => {..} = "%identity"
 @val external atob: string => string = "atob"
-let getAgentId = _ => {
-  switch LocalStorage.getItem("agentId")->Js.Nullable.toOption {
-  | Some(str) => str
-  | None => ""
-  }
-}
-
-let getKey = keyType => {
-  switch LocalStorage.getItem(keyType)->Js.Nullable.toOption {
-  | Some(str) => str
-  | None => "__failed"
-  }
-}
-let getHeadersJson = (
-  ~uri,
-  ~headers=Js.Dict.empty(),
-  ~isLogin,
-  key,
-  ~requestId,
-  ~storageKey: option<string>,
-  (),
-) => {
-  let isLsp = uri->Js.String2.includes("dashboard") ? false : true
-  let isFirstVerify = uri->Js.String2.includes("lspotp/verify") ? true : false
-  let isTriggerAPI = uri->Js.String2.includes("lspotp/trigger") ? true : false
-
-  let localStorageData = switch storageKey {
-  | Some(key) =>
-    switch LocalStorage.getItem(key)->Js.Nullable.toOption {
-    | Some(str) => str->safeParse->Js.Json.decodeObject->Belt.Option.getWithDefault(Js.Dict.empty())
-    | None => Js.Dict.empty()
-    }
-  | None => Js.Dict.empty()
-  }
-
-  let sessionToken = switch LocalStorage.getItem("sessionToken")->Js.Nullable.toOption {
-  | Some(str) => str
-  | None => ""
-  }
-  let merchantId = switch LocalStorage.getItem("merchant-id")->Js.Nullable.toOption {
-  | Some(str) => str
-  | None => ""
-  }
 
-  let headerObj = headers
-
-  switch isLsp {
-  | true =>
-    if isFirstVerify {
-      Js.Dict.set(headerObj, "X-RequestId", requestId->Js.Json.string)
-      Js.Dict.set(headerObj, "X-App-Id", merchantId->Js.Json.string)
-      Js.Dict.set(headerObj, "X-Merchant-Id", merchantId->Js.Json.string)
-      Js.Dict.set(headerObj, "X-Agent-Session-Token", sessionToken->Js.Json.string)
-      Js.Dict.set(
-        headerObj,
-        "X-Device-Token",
-        key
-        ->Js.String2.replace("-----BEGIN PUBLIC KEY-----\n", "")
-        ->Js.String2.replace("\n-----END PUBLIC KEY-----", "")
-        ->Identity.genericTypeToJson,
-      )
-    } else {
-      Js.Dict.set(headerObj, "X-RequestId", requestId->Js.Json.string)
-      Js.Dict.set(headerObj, "X-App-Id", merchantId->Js.Json.string)
-      Js.Dict.set(
-        headerObj,
-        "X-Session-Token",
-        localStorageData->getString("sessionToken", "")->Js.Json.string,
-      )
-      Js.Dict.set(headerObj, "X-Merchant-Id", merchantId->Js.Json.string)
-      Js.Dict.set(headerObj, "X-Agent-Session-Token", sessionToken->Js.Json.string)
-      Js.Dict.set(headerObj, "X-User-Id", localStorageData->getString("userId", "")->Js.Json.string)
-      if isTriggerAPI {
-        Js.Dict.set(
-          headerObj,
-          "X-Device-Token",
-          key
-          ->Js.String2.replace("-----BEGIN PUBLIC KEY-----\n", "")
-          ->Js.String2.replace("\n-----END PUBLIC KEY-----", "")
-          ->Identity.genericTypeToJson,
-        )
-      }
-    }
-  | false => {
-      Js.Dict.set(headerObj, "Content-Type", "application/json"->Js.Json.string)
-      if sessionToken !== "" {
-        Js.Dict.set(headerObj, "Session-Token", sessionToken->Js.Json.string)
-      }
-      if isLogin {
-        Js.Dict.set(
-          headerObj,
-          "X-Device-Token",
-          key
-          ->Js.String2.replace("-----BEGIN PUBLIC KEY-----\n", "")
-          ->Js.String2.replace("\n-----END PUBLIC KEY-----", "")
-          ->Identity.genericTypeToJson,
-        )
-      }
-    }
-  }
-
-  headerObj->Js.Json.object_
-}
-
-let getHeaders = (~uri=?, ~headers=Js.Dict.empty(), ()) => {
+let getHeaders = (~uri, ~headers, ()) => {
   let hyperSwitchToken = LocalStorage.getItem("login")->Js.Nullable.toOption
-  let isMixpanel = switch uri {
-  | Some(uri) => uri->Js.String2.includes("mixpanel") ? true : false
-  | None => false
-  }
-  switch isMixpanel {
-  | true =>
+  let isMixpanel = uri->Js.String2.includes("mixpanel")
+
+  if isMixpanel {
     let headerObj = {
       "Content-Type": "application/x-www-form-urlencoded",
       "accept": "application/json",
     }
     Fetch.HeadersInit.make(headerObj)
-
-  | false =>
+  } else {
     let headerObj =
       headers->Js.Dict.get("api-key")->Belt.Option.getWithDefault("")->Js.String2.length > 0
-        ? true
-        : false
 
-    switch headerObj {
-    | true => {
-        let headerObj = {
-          "Content-Type": "application/json",
-          "api-key": headers->Js.Dict.get("api-key")->Belt.Option.getWithDefault(""),
-        }
-        Fetch.HeadersInit.make(headerObj)
+    if headerObj {
+      let headerObj = {
+        "Content-Type": "application/json",
+        "api-key": headers->Js.Dict.get("api-key")->Belt.Option.getWithDefault(""),
       }
-
-    | false =>
+      Fetch.HeadersInit.make(headerObj)
+    } else {
       switch hyperSwitchToken {
       | Some(token) =>
         if token !== "" {
@@ -175,86 +58,6 @@ let getHeaders = (~uri=?, ~headers=Js.Dict.empty(), ()) => {
   }
 }
 
-let getPublicKey = ""
-
-let getKid = ""
-
-let handleForbidden = (resp, showToast: ToastState.showToastFn, isJuspay) => {
-  resp
-  ->Fetch.Response.clone
-  ->Fetch.Response.json
-  ->then(json => {
-    open Belt.Option
-
-    json
-    ->Js.Json.decodeObject
-    ->flatMap(dict => {
-      let messageJson = switch dict->Js.Dict.get("errorMessage") {
-      | Some(msg) =>
-        isJuspay && msg === "Unauthorized. IP address is not allowed"->Js.Json.string
-          ? `Please Connect to VPN`->Js.Json.string->Some
-          : `Access Denied`->Js.Json.string->Some
-      | None => dict->Js.Dict.get("errorMessage")
-      }
-      messageJson->flatMap(Js.Json.decodeString)
-    })
-    ->getWithDefault("Forbidden")
-    ->resolve
-  })
-  ->catch(_ => resp->Fetch.Response.clone->Fetch.Response.text)
-  ->then(message => {
-    showToast(~toastType=ToastError, ~message, ~autoClose=false, ())
-
-    resolve(resp)
-  })
-}
-
-let addResellerKey = (bodyStr, optionalMerchantId) => {
-  try {
-    let bodyJson = bodyStr->safeParse
-    switch Js.Json.classify(bodyJson) {
-    | Js.Json.JSONObject(bodyDict) =>
-      switch optionalMerchantId {
-      | Some(merchantId) =>
-        bodyDict->Js.Dict.set("merchantId", merchantId->Js.Json.string)
-
-        bodyDict->Js.Json.object_->Js.Json.stringify
-      | _ => bodyStr
-      }
-
-    | Js.Json.JSONArray(bodyArr) =>
-      let newBodyArr = Js.Array.map(ob => {
-        let optDict = Js.Json.decodeObject(ob->Js.Json.stringify->safeParse)
-
-        switch optDict {
-        | Some(dict) =>
-          switch optionalMerchantId {
-          | Some(merchantId) =>
-            let mDict = Js.Dict.empty()
-            Js.Dict.set(mDict, "merchantId", [merchantId->Js.Json.string]->Js.Json.array)
-            dict->Js.Dict.set("filters", mDict->Js.Json.object_)
-            dict->Js.Json.object_
-          | _ => ob
-          }
-        | None => ob
-        }
-      }, bodyArr)
-      newBodyArr->Js.Json.array->Js.Json.stringify
-    | Js.Json.JSONNull =>
-      switch optionalMerchantId {
-      | Some(merchantId) =>
-        let bodyDict = Js.Dict.empty()
-        bodyDict->Js.Dict.set("merchantId", merchantId->Js.Json.string)
-        bodyDict->Js.Json.object_->Js.Json.stringify
-      | _ => bodyStr
-      }
-    | _ => bodyStr
-    }
-  } catch {
-  | _ => bodyStr
-  }
-}
-
 @val @scope(("window", "location"))
 external hostName: string = "host"
 
@@ -264,10 +67,6 @@ type betaEndpoint = {
   replaceStr: string,
 }
 
-let getUriModifier = uri => {
-  uri
-}
-
 let useApiFetcher = () => {
   let (authStatus, setAuthStatus) = React.useContext(AuthInfoProvider.authStatusContext)
 
@@ -327,9 +126,9 @@ let useApiFetcher = () => {
             if resp->Fetch.Response.status === 401 {
               switch authStatus {
               | LoggedIn(_) =>
-                clearLocalStorage()
+                LocalStorage.clear()
                 setAuthStatus(LoggedOut)
-                RescriptReactRouter.push("/home")
+                RescriptReactRouter.push("/login")
                 resolve(resp)
 
               | _ => resolve(resp)
diff --git a/src/hooks/DateRefreshHooks.res b/src/hooks/DateRefreshHooks.res
index 3e74266af..dc949efd4 100644
--- a/src/hooks/DateRefreshHooks.res
+++ b/src/hooks/DateRefreshHooks.res
@@ -25,7 +25,7 @@ let useConstructQueryOnBasisOfOpt = () => {
         | "next_month" => NextMonth
         | st => {
             let arr = st->Js.String2.split("_")
-            let _future = arr[0]->Belt.Option.getWithDefault("") == "next"
+            let _ = arr[0]->Belt.Option.getWithDefault("") == "next"
             let anchor = arr[2]->Belt.Option.getWithDefault("")
             let val = arr[1]->Belt.Option.getWithDefault("")
             switch anchor {
diff --git a/src/hooks/ModalsState.res b/src/hooks/ModalsState.res
index 2d426e522..21bbc62ec 100644
--- a/src/hooks/ModalsState.res
+++ b/src/hooks/ModalsState.res
@@ -5,19 +5,6 @@ type modalProps = {
   closeOnClickOutside: bool,
 }
 
-let makeModalProps = (~title, ~getContent, ~closeOnClickOutside=false, ()) => {
-  title,
-  getContent,
-  closeOnClickOutside,
-}
-
 let defaultOpenModals: array<modalProps> = []
 
 let openModals = Recoil.atom(. "openModals", defaultOpenModals)
-
-let useShowModal = () => {
-  let setOpenModals = Recoil.useSetRecoilState(openModals)
-  React.useCallback1(modalProps => {
-    setOpenModals(.prevArr => prevArr->Js.Array2.concat([modalProps]))
-  }, [setOpenModals])
-}
diff --git a/src/hooks/NewThemeHooks.res b/src/hooks/NewThemeHooks.res
deleted file mode 100644
index 82ea0756a..000000000
--- a/src/hooks/NewThemeHooks.res
+++ /dev/null
@@ -1,42 +0,0 @@
-let useNewThemeCheckFromEvent = () => {
-  let (eventTheme, setEventTheme) = React.useState(_ => None)
-
-  React.useEffect0(() => {
-    let setEventThemeVal = (eventName, dict) => {
-      if eventName === "AuthenticationDetails" {
-        let payloadDict = dict->Js.Dict.get("payload")->Belt.Option.flatMap(Js.Json.decodeObject)
-        let theme =
-          payloadDict->Belt.Option.mapWithDefault("", finalDict =>
-            LogicUtils.getString(finalDict, "newTheme", "")
-          )
-        setEventTheme(_ => Some(theme))
-      } else if eventName == "newThemeToggle" {
-        let theme = LogicUtils.getString(dict, "payload", "")
-        setEventTheme(_ => Some(theme))
-      } else {
-        Js.log2(`Event name is ${eventName}`, dict)
-      }
-    }
-
-    let handleEventMessage = (ev: Dom.event) => {
-      let optionalDict = HandlingEvents.getEventDict(ev)
-      switch optionalDict {
-      | Some(dict) => {
-          let optionalEventName =
-            dict->Js.Dict.get("eventType")->Belt.Option.flatMap(Js.Json.decodeString)
-          switch optionalEventName {
-          | Some(eventName) => setEventThemeVal(eventName, dict)
-          | None => Js.log2("Event Data is not found", dict)
-          }
-        }
-
-      | None => ()
-      }
-    }
-
-    Window.addEventListener("message", handleEventMessage)
-    Some(() => Window.removeEventListener("message", handleEventMessage))
-  })
-
-  eventTheme
-}
diff --git a/src/screens/analyticsScreens/AnalyticsCommonComponents.res b/src/screens/analyticsScreens/AnalyticsCommonComponents.res
deleted file mode 100644
index e0af3a513..000000000
--- a/src/screens/analyticsScreens/AnalyticsCommonComponents.res
+++ /dev/null
@@ -1,2809 +0,0 @@
-@get external keyCode: 'a => int = "keyCode"
-
-type window
-@val external window: window = "window"
-@scope("window") @val external parent: window = "parent"
-
-open LogicUtils
-open Promise
-type modalView = SavedList | SaveNew
-module SavedViewTable = {
-  @react.component
-  let make = (~actualData, ~modifiedTableEntity) => {
-    let (offset, setOffset) = React.useState(_ => 0)
-    let searchText = ReactFinalForm.useField("searchTable").input.value
-    let search_class = "text-gray-400 dark:text-gray-600"
-    let searchTable = FormRenderer.makeFieldInfo(
-      ~label="",
-      ~name="searchTable",
-      ~placeholder="Search ",
-      ~customInput=InputFields.textInput(
-        ~customStyle="w-64",
-        ~autoComplete="off",
-        ~leftIcon=<Icon size=16 className=search_class name="search" />,
-        (),
-      ),
-      (),
-    )
-
-    let actualData = React.useMemo2(() => {
-      actualData->SaveViewEntity.filterBySearchText(searchText)
-    }, (searchText, actualData))
-    <>
-      <FormRenderer.FieldRenderer field=searchTable fieldWrapperClass="w-64 sm:ml-0 ml-2" />
-      <LoadedTable
-        actualData
-        title="Saved Filters"
-        entity=modifiedTableEntity
-        hideTitle=true
-        offset
-        setOffset
-        currrentFetchCount={actualData->Js.Array2.length}
-        totalResults={actualData->Js.Array2.length}
-        resultsPerPage=15
-        ignoreHeaderBg=true
-      />
-    </>
-  }
-}
-
-module AnalyticsSaveViewNew = {
-  @react.component
-  let make = (
-    ~moduleName: string,
-    ~tabNames: array<string>,
-    ~startTimeFilterKey,
-    ~endTimeFilterKey,
-  ) => {
-    let isMobileView = MatchMedia.useMobileChecker()
-    let {updateExistingKeys} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-    let deleteSaveView = AnalyticsHooks.useDeleteSaveView()
-
-    let {
-      savedViewList,
-      setRefetchCounter,
-      isDefaultSaveViewPresent,
-      defaultSaveView,
-      appliedSaveView,
-      applySaveView,
-      setAppliedSaveView,
-    } = React.useContext(SaveViewContext.defaultContext)
-    let urlDict = UrlUtils.useGetFilterDictFromUrl("")
-    let url = RescriptReactRouter.useUrl()
-    let showToast = ToastState.useShowToast()
-    let saveView = AnalyticsHooks.useSaveView()
-    let updateSaveView = AnalyticsHooks.useUpdateSaveView()
-    let (showModal, setShowModal) = React.useState(_ => false)
-    let (selectedView, setSelectedView) = React.useState(_ => "")
-    let (editView, setEditView) = React.useState(_ => appliedSaveView)
-    let filterDict = Js.Dict.empty()
-    tabNames->Js.Array2.forEach(key => {
-      filterDict->Js.Dict.set(key, "")
-    })
-    let dateCreatedObject =
-      AnalyticsUtils.getDateCreatedObject()
-      ->Js.Dict.entries
-      ->Js.Array2.map(entry => {
-        let (key, value) = entry
-        let value = value->getStringFromJson("")
-        (key, value)
-      })
-      ->Js.Dict.fromArray
-
-    let defaultSearchDict = DictionaryUtils.mergeDicts([dateCreatedObject, filterDict])
-
-    let disableSaveButton = React.useMemo2(() => {
-      let excludeKeys = appliedSaveView.includeDateRange
-        ? []
-        : [startTimeFilterKey, endTimeFilterKey]
-      let dict1 = SaveViewEntity.getFilterDict(
-        ~url=appliedSaveView.url,
-        ~prefix="",
-        ~excludeKeys,
-        (),
-      )
-      let dict2 = SaveViewEntity.getFilterDict(
-        ~url=url.search->Js.Global.decodeURI,
-        ~prefix="",
-        ~excludeKeys,
-        (),
-      )
-
-      DictionaryUtils.equalDicts(dict1, dict2)
-    }, (url.search, appliedSaveView))
-
-    let options = React.useMemo1(() => {
-      [
-        {
-          let opt: SelectBox.dropdownOption = {
-            label: "Base View",
-            value: "baseView",
-            icon: CustomRightIcon(
-              <Button
-                text=""
-                leftIcon={CustomIcon(<Icon name="new-edit" size=16 />)}
-                showBorder=false
-                customButtonStyle="invisible"
-                buttonType={NonFilled}
-                buttonSize={XSmall}
-                buttonVariant=Rounded
-              />,
-            ),
-          }
-          opt
-        },
-      ]->Js.Array2.concat(
-        savedViewList->Js.Array2.map(ele => {
-          let opt: SelectBox.dropdownOption = {
-            label: ele.name,
-            value: ele.name,
-            textColor: "group",
-            icon: CustomRightIcon(
-              <Button
-                text=""
-                leftIcon={CustomIcon(<Icon name="new-edit" size=16 />)}
-                showBorder=false
-                customButtonStyle="invisible group-hover:visible p-2"
-                onClick={ev => {
-                  ev->ReactEvent.Mouse.stopPropagation
-                  ev->ReactEvent.Mouse.preventDefault
-                  setEditView(_ => ele)
-                  setShowModal(_ => true)
-                }}
-                buttonType={NonFilled}
-                buttonSize={XSmall}
-                buttonVariant=Rounded
-              />,
-            ),
-          }
-          opt
-        }),
-      )
-    }, [savedViewList->Array.joinWith(",")])
-
-    let modalHeading = "Save Dashboard View"
-    let modalHeadingDescription = ""
-    let submitButtonText = editView.id === "" ? "Save Dashboard View" : "Update Dashboard View"
-    let submitButtonIcon = "new-save"
-    let loadingText = "Saving..."
-
-    let saveView = bodyDict => {
-      let name = bodyDict->getString("name", "Default View")
-      if name === appliedSaveView.name {
-        updateSaveView(
-          ~bodyStr=bodyDict->Js.Json.object_->Js.Json.stringify,
-          ~id=appliedSaveView.id,
-        )
-      } else {
-        saveView(~bodyStr=bodyDict->Js.Json.object_->Js.Json.stringify)
-      }
-      ->then(response => {
-        switch response {
-        | Success => {
-            showToast(~message="Saved Successfully", ~toastType=ToastSuccess, ())
-            setRefetchCounter(prev => prev + 1)
-            setShowModal(_ => false)
-          }
-
-        | Error(errorMessage) => {
-            let errorMessage = errorMessage->Belt.Option.getWithDefault("")
-            showToast(~message=errorMessage, ~toastType=ToastError, ())
-          }
-        }
-        Js.Nullable.null->resolve
-      })
-      ->catch(_err => {
-        Js.Nullable.null->resolve
-      })
-    }
-
-    let saveViewFn = bodyDict => {
-      if isDefaultSaveViewPresent {
-        let bodyStr =
-          [("isDefault", false->Js.Json.boolean)]
-          ->Js.Dict.fromArray
-          ->Js.Json.object_
-          ->Js.Json.stringify
-        updateSaveView(~bodyStr, ~id=defaultSaveView.id)
-        ->then(response => {
-          switch response {
-          | Success => saveView(bodyDict)
-          | Error(errorMessage) => {
-              let errorMessage = errorMessage->Belt.Option.getWithDefault("")
-              showToast(~message=errorMessage, ~toastType=ToastError, ())
-              Js.Nullable.null->resolve
-            }
-          }
-        })
-        ->catch(_err => {
-          Js.Nullable.null->resolve
-        })
-      } else {
-        saveView(bodyDict)
-      }
-    }
-
-    let initialValues = React.useMemo1(() => {
-      if editView.id === "" {
-        Js.Json.null
-      } else {
-        let selectors = []
-        if editView.includeDateRange {
-          selectors->Js.Array2.push("Save with current timestamp"->Js.Json.string)->ignore
-        }
-        if editView.isDefault {
-          selectors->Js.Array2.push("Make this view Default"->Js.Json.string)->ignore
-        }
-        let initialValues =
-          [
-            ("name", editView.name->Js.Json.string),
-            ("description", editView.description->Js.Json.string),
-            ("selectors", selectors->Js.Json.array),
-          ]
-          ->Js.Dict.fromArray
-          ->Js.Json.object_
-        initialValues
-      }
-    }, [editView])
-
-    let validate = (values: Js.Json.t) => {
-      let errors = Js.Dict.empty()
-      let valuesDict = values->getDictFromJsonObject
-
-      ["name"]->Js.Array2.forEach(key => {
-        let value = valuesDict->getString(key, "")
-        if value == "" {
-          errors->Js.Dict.set(key, `${key->capitalizeString} Required`->Js.Json.string)
-        }
-        if (
-          savedViewList->Js.Array2.map(ele => ele.name)->Js.Array2.includes(value) &&
-            editView.id === ""
-        ) {
-          errors->Js.Dict.set(key, `${key->capitalizeString} already exits`->Js.Json.string)
-        }
-      })
-
-      errors->Js.Json.object_
-    }
-
-    let onSubmit = (values, _) => {
-      let valuesDict = values->getDictFromJsonObject
-
-      let name = valuesDict->getString("name", "")
-      let description = valuesDict->getString("description", "")
-      let selectors = valuesDict->getStrArrayFromDict("selectors", [])
-      let isDefault = selectors->Js.Array2.includes("Make this view Default")
-      let includeDateRange = selectors->Js.Array2.includes("Save with current timestamp")
-      let url = {
-        urlDict
-        ->Js.Dict.entries
-        ->Belt.Array.keepMap(entry => {
-          let (key, value) = entry
-          let value = switch value->Js.Json.classify {
-          | JSONFalse => "false"
-          | JSONTrue => "true"
-          | JSONNull => ""
-          | JSONString(string) => string
-          | JSONNumber(float) => float->Belt.Float.toString
-          | JSONObject(_) => ""
-          | JSONArray(array) => `[${array->Js.Array2.toString}]`
-          }
-          if (key !== "startTime" && key !== "endTime") || includeDateRange {
-            Some(`${key}=${value}`)
-          } else {
-            None
-          }
-        })
-        ->Js.Array2.joinWith("&")
-      }
-
-      let bodyDict = Js.Dict.empty()
-      bodyDict->Js.Dict.set("tab", moduleName->Js.Json.string)
-      bodyDict->Js.Dict.set("url", url->Js.Json.string)
-      bodyDict->Js.Dict.set("name", name->Js.Json.string)
-      bodyDict->Js.Dict.set("description", description->Js.Json.string)
-      if includeDateRange {
-        bodyDict->Js.Dict.set("includeDateRange", includeDateRange->Js.Json.boolean)
-      }
-      if isDefault {
-        bodyDict->Js.Dict.set("isDefault", isDefault->Js.Json.boolean)
-      }
-      saveViewFn(bodyDict)
-    }
-
-    let handleDelete = () => {
-      deleteSaveView(~id=editView.id)
-      ->then(response => {
-        switch response {
-        | Success => {
-            showToast(~message=`${editView.name} deleted Successfully`, ~toastType=ToastSuccess, ())
-            setEditView(_ => defaultSaveView)
-            setRefetchCounter(prev => prev + 1)
-            setShowModal(_ => false)
-          }
-
-        | Error(errorMessage) => {
-            let errorMessage = errorMessage->Belt.Option.getWithDefault("")
-            showToast(~message=errorMessage, ~toastType=ToastError, ())
-          }
-        }
-        Js.Nullable.null->resolve
-      })
-      ->catch(_err => {
-        Js.Nullable.null->resolve
-      })
-      ->ignore
-    }
-
-    let modalWidth = "sm:w-128"
-
-    let savedViewInput: ReactFinalForm.fieldRenderPropsInput = {
-      name: "savedView",
-      onBlur: _ev => (),
-      onChange: ev => {
-        let appliedVal = ev->Identity.formReactEventToString
-        if appliedVal === "baseView" {
-          updateExistingKeys(defaultSearchDict)
-          setAppliedSaveView(_ => SaveViewEntity.defaultSaveView)
-        } else {
-          switch savedViewList->Js.Array2.find(ele => ele.name === appliedVal) {
-          | Some(view) => applySaveView(view)
-          | None => ()
-          }
-        }
-        setSelectedView(_ => appliedVal)
-      },
-      onFocus: _ev => (),
-      value: selectedView->Js.Json.string,
-      checked: true,
-    }
-    let saveViewButton = {
-      <Button
-        text={isMobileView ? "" : "Save View"}
-        leftIcon=FontAwesome("new-save")
-        buttonState={disableSaveButton ? Disabled : Normal}
-        buttonType={Dropdown}
-        onClick={_ => {
-          setShowModal(_ => true)
-        }}
-        customIconMargin={isMobileView ? "mr-1" : "ml-1"}
-      />
-    }
-    <div>
-      <Portal to="savedView">
-        <div className="flex gap-2">
-          {if savedViewList->Js.Array2.length > 0 {
-            <SelectBox.BaseDropdown
-              allowMultiSelect=false
-              hideMultiSelectButtons=true
-              buttonText="Analytics View"
-              defaultLeftIcon=FontAwesome("new-save")
-              input={savedViewInput}
-              options
-              deselectDisable=true
-              fullLength=true
-              showCustomBtnAtEnd=true
-              customButtonStyle="w-46 justify-between"
-              customButton={<Button
-                text={"Create new view"}
-                leftIcon=CustomIcon(
-                  <Icon name="new-save" className="stroke-jp-2-light-primary-600" size=16 />,
-                )
-                buttonState={disableSaveButton ? Disabled : Normal}
-                buttonType={FilterAdd}
-                onClick={_ => {
-                  setEditView(_ => defaultSaveView)
-                  setShowModal(_ => true)
-                }}
-                customButtonStyle="w-full"
-                customIconMargin={isMobileView ? "mr-1" : "ml-1"}
-              />}
-            />
-          } else {
-            saveViewButton
-          }}
-        </div>
-        <Modal
-          modalHeading
-          modalHeadingDescription
-          showModal
-          closeOnOutsideClick=true
-          setShowModal
-          modalHeadingClass="text-jp-2-light-gray-2000"
-          modalClass={`w-full ${modalWidth} overflow-auto p mx-auto`}
-          childClass="p-6">
-          <Form
-            onSubmit
-            validate
-            initialValues
-            formClass="flex flex-col gap-4 w-full relative overflow-auto">
-            {<>
-              <FormRenderer.FieldRenderer
-                field={AnalyticsUtils.nameViewField(~isDisabled={editView.id !== ""})}
-              />
-              <FormRenderer.FieldRenderer field=AnalyticsUtils.descriptionField />
-              <FormRenderer.FieldRenderer
-                field={AnalyticsUtils.selectorsField(~isHorizontal=true)} labelClass="hidden"
-              />
-            </>}
-            <div className="border-t">
-              <div className={`flex flex-row justify-end pt-6 gap-2`}>
-                <UIUtils.RenderIf condition={editView.id !== ""}>
-                  <Button
-                    buttonType=SecondaryFilled
-                    buttonSize=Small
-                    text=""
-                    rightIcon={FontAwesome("new-trash")}
-                    onClick={_ => handleDelete()}
-                  />
-                </UIUtils.RenderIf>
-                <FormRenderer.SubmitButton
-                  text=submitButtonText
-                  loadingText
-                  buttonType=Primary
-                  icon=FontAwesome(submitButtonIcon)
-                  buttonSize={isMobileView ? XSmall : Small}
-                />
-              </div>
-            </div>
-          </Form>
-        </Modal>
-      </Portal>
-      <PortalCapture key="filter" name="filter" customStyle="flex items-center" />
-    </div>
-  }
-}
-
-module AnalyticsSaveView = {
-  @react.component
-  let make = (
-    ~moduleName: string,
-    ~tabNames: array<string>,
-    ~startTimeFilterKey,
-    ~endTimeFilterKey,
-  ) => {
-    let isMobileView = MatchMedia.useMobileChecker()
-    let {updateExistingKeys, filterValueJson} = React.useContext(
-      AnalyticsUrlUpdaterContext.urlUpdaterContext,
-    )
-
-    let (startTime, endTime) = React.useMemo1(() => {
-      (
-        filterValueJson->getString(startTimeFilterKey, ""),
-        filterValueJson->getString(endTimeFilterKey, ""),
-      )
-    }, [filterValueJson])
-
-    let dateFilterUrl = React.useMemo2(() => {
-      `&${startTimeFilterKey}=${startTime}&${endTimeFilterKey}=${endTime}`
-    }, (startTime, endTime))
-
-    let {
-      savedViewList,
-      refetchCounter,
-      setRefetchCounter,
-      isDefaultSaveViewPresent,
-      defaultSaveView,
-      appliedSaveView,
-      applySaveView,
-      setAppliedSaveView,
-    } = React.useContext(SaveViewContext.defaultContext)
-    let urlDict = UrlUtils.useGetFilterDictFromUrl("")
-    let url = RescriptReactRouter.useUrl()
-    let showToast = ToastState.useShowToast()
-    let saveView = AnalyticsHooks.useSaveView()
-    let updateSaveView = AnalyticsHooks.useUpdateSaveView()
-    let (showModal, setShowModal) = React.useState(_ => false)
-    let (newSave, setNewSave) = React.useState(_ => true)
-    let (modalView, setModalView) = React.useState(_ => SavedList)
-    let filterDict = Js.Dict.empty()
-    tabNames->Js.Array2.forEach(key => {
-      filterDict->Js.Dict.set(key, "")
-    })
-    let dateCreatedObject =
-      AnalyticsUtils.getDateCreatedObject()
-      ->Js.Dict.entries
-      ->Js.Array2.map(entry => {
-        let (key, value) = entry
-        let value = value->getStringFromJson("")
-        (key, value)
-      })
-      ->Js.Dict.fromArray
-
-    let defaultSearchDict = DictionaryUtils.mergeDicts([dateCreatedObject, filterDict])
-
-    let disableSaveButton = React.useMemo2(() => {
-      let excludeKeys = appliedSaveView.includeDateRange
-        ? []
-        : [startTimeFilterKey, endTimeFilterKey]
-      let dict1 = SaveViewEntity.getFilterDict(
-        ~url=appliedSaveView.url,
-        ~prefix="",
-        ~excludeKeys,
-        (),
-      )
-      let dict2 = SaveViewEntity.getFilterDict(
-        ~url=url.search->Js.Global.decodeURI,
-        ~prefix="",
-        ~excludeKeys,
-        (),
-      )
-
-      DictionaryUtils.equalDicts(dict1, dict2)
-    }, (url.search, appliedSaveView))
-
-    let saveViewName = React.useMemo1(() => {
-      appliedSaveView.name
-    }, [appliedSaveView])
-
-    let actualData = React.useMemo1(() => {
-      savedViewList->Js.Array2.map(Js.Nullable.return)
-    }, [savedViewList])
-
-    let modifiedTableEntity = React.useMemo4(() => {
-      ...SaveViewEntity.saveFilterListEntity,
-      getCell: SaveViewEntity.getCell(
-        dateFilterUrl,
-        setRefetchCounter,
-        isDefaultSaveViewPresent,
-        defaultSaveView,
-        setShowModal,
-        applySaveView,
-      ),
-    }, (refetchCounter, isDefaultSaveViewPresent, defaultSaveView, dateFilterUrl))
-
-    let (
-      modalHeading,
-      modalHeadingDescription,
-      submitButtonText,
-      submitButtonIcon,
-      loadingText,
-    ) = switch modalView {
-    | SavedList => (
-        "Load Dashboard View",
-        "Load a set of applied filters, selected dimensions and data mode from your saved views",
-        "Load Base View",
-        "undo-alt",
-        "Loading...",
-      )
-    | SaveNew => (
-        "Save Dashboard View",
-        "You can save the configuration of the current dashboard as a default view or with a timestamp and load it whenever needed.",
-        newSave ? "Save New View" : "Update View",
-        "plus",
-        "Saving...",
-      )
-    }
-
-    let saveView = bodyDict => {
-      let name = bodyDict->getString("name", "Default View")
-      if name === appliedSaveView.name {
-        updateSaveView(
-          ~bodyStr=bodyDict->Js.Json.object_->Js.Json.stringify,
-          ~id=appliedSaveView.id,
-        )
-      } else {
-        saveView(~bodyStr=bodyDict->Js.Json.object_->Js.Json.stringify)
-      }
-      ->then(response => {
-        switch response {
-        | Success => {
-            showToast(~message="Saved Successfully", ~toastType=ToastSuccess, ())
-            setRefetchCounter(prev => prev + 1)
-            setShowModal(_ => false)
-          }
-
-        | Error(errorMessage) => {
-            let errorMessage = errorMessage->Belt.Option.getWithDefault("")
-            showToast(~message=errorMessage, ~toastType=ToastError, ())
-          }
-        }
-        Js.Nullable.null->resolve
-      })
-      ->catch(_err => {
-        Js.Nullable.null->resolve
-      })
-    }
-
-    let saveViewFn = bodyDict => {
-      if isDefaultSaveViewPresent {
-        let bodyStr =
-          [("isDefault", false->Js.Json.boolean)]
-          ->Js.Dict.fromArray
-          ->Js.Json.object_
-          ->Js.Json.stringify
-        updateSaveView(~bodyStr, ~id=defaultSaveView.id)
-        ->then(response => {
-          switch response {
-          | Success => saveView(bodyDict)
-          | Error(errorMessage) => {
-              let errorMessage = errorMessage->Belt.Option.getWithDefault("")
-              showToast(~message=errorMessage, ~toastType=ToastError, ())
-              Js.Nullable.null->resolve
-            }
-          }
-        })
-        ->catch(_err => {
-          Js.Nullable.null->resolve
-        })
-      } else {
-        saveView(bodyDict)
-      }
-    }
-
-    let initialValues = React.useMemo1(() => {
-      if appliedSaveView.name === "Default View" {
-        Js.Json.null
-      } else {
-        let selectors = []
-        if appliedSaveView.includeDateRange {
-          selectors->Js.Array2.push("Save with current time interval"->Js.Json.string)->ignore
-        }
-        if appliedSaveView.isDefault {
-          selectors->Js.Array2.push("Make this view Default"->Js.Json.string)->ignore
-        }
-        let initialValues =
-          [
-            ("name", appliedSaveView.name->Js.Json.string),
-            ("description", appliedSaveView.description->Js.Json.string),
-            ("selectors", selectors->Js.Json.array),
-          ]
-          ->Js.Dict.fromArray
-          ->Js.Json.object_
-        initialValues
-      }
-    }, [appliedSaveView])
-
-    let validate = (values: Js.Json.t) => {
-      let errors = Js.Dict.empty()
-      let valuesDict = values->getDictFromJsonObject
-
-      switch modalView {
-      | SaveNew =>
-        let name = valuesDict->getString("name", "Default View")
-        setNewSave(_ => name !== appliedSaveView.name)
-        ["name"]->Js.Array2.forEach(key => {
-          let value = valuesDict->getString(key, "")
-          if value == "" {
-            errors->Js.Dict.set(key, `${key->capitalizeString} Required`->Js.Json.string)
-          }
-        })
-      | SavedList => ()
-      }
-
-      errors->Js.Json.object_
-    }
-
-    let onSubmit = (values, _) => {
-      let valuesDict = values->getDictFromJsonObject
-
-      switch modalView {
-      | SaveNew => {
-          let name = valuesDict->getString("name", "")
-          let description = valuesDict->getString("description", "")
-          let selectors = valuesDict->getStrArrayFromDict("selectors", [])
-          let isDefault = selectors->Js.Array2.includes("Make this view Default")
-          let includeDateRange = selectors->Js.Array2.includes("Save with current time interval")
-          let url = {
-            urlDict
-            ->Js.Dict.entries
-            ->Belt.Array.keepMap(entry => {
-              let (key, value) = entry
-              let value = switch value->Js.Json.classify {
-              | JSONFalse => "false"
-              | JSONTrue => "true"
-              | JSONNull => ""
-              | JSONString(string) => string
-              | JSONNumber(float) => float->Belt.Float.toString
-              | JSONObject(_) => ""
-              | JSONArray(array) => `[${array->Js.Array2.toString}]`
-              }
-              if (key !== "startTime" && key !== "endTime") || includeDateRange {
-                Some(`${key}=${value}`)
-              } else {
-                None
-              }
-            })
-            ->Js.Array2.joinWith("&")
-          }
-
-          let bodyDict = Js.Dict.empty()
-          bodyDict->Js.Dict.set("tab", moduleName->Js.Json.string)
-          bodyDict->Js.Dict.set("url", url->Js.Json.string)
-          bodyDict->Js.Dict.set("name", name->Js.Json.string)
-          bodyDict->Js.Dict.set("description", description->Js.Json.string)
-          if includeDateRange {
-            bodyDict->Js.Dict.set("includeDateRange", includeDateRange->Js.Json.boolean)
-          }
-          if isDefault {
-            bodyDict->Js.Dict.set("isDefault", isDefault->Js.Json.boolean)
-          }
-          saveViewFn(bodyDict)
-        }
-
-      | SavedList => {
-          updateExistingKeys(defaultSearchDict)
-          setAppliedSaveView(_ => SaveViewEntity.defaultSaveView)
-          setShowModal(_ => false)
-          Js.Nullable.null->resolve
-        }
-      }
-    }
-
-    let savedViewComp =
-      <div className={`flex gap-2 mt-4`}>
-        {if actualData->Js.Array2.length > 0 {
-          <ToolTip
-            description="open previously saved views"
-            toolTipFor={<div className="flex flex-col relative">
-              <UIUtils.RenderIf
-                condition={!disableSaveButton || appliedSaveView.name === "Default View"}>
-                <div className="w-2 h-2 bg-red-800 absolute rounded-full z-10 right-0 mr-7 mt-2" />
-              </UIUtils.RenderIf>
-              <Button
-                text={isMobileView ? "" : saveViewName}
-                leftIcon=Euler("saveView")
-                rightIcon=FontAwesome("angle-down")
-                onClick={_ => {
-                  setModalView(_ => SavedList)
-                  setShowModal(_ => true)
-                }}
-              />
-            </div>}
-            tooltipWidthClass="w-fit"
-          />
-        } else {
-          React.null
-        }}
-        <Button
-          text={isMobileView ? "" : "Save"}
-          leftIcon=FontAwesome("save")
-          buttonState={disableSaveButton ? Disabled : Normal}
-          onClick={_ => {
-            setModalView(_ => SaveNew)
-            setShowModal(_ => true)
-          }}
-          customIconMargin={isMobileView ? "mr-1" : "ml-1"}
-        />
-      </div>
-    <div>
-      savedViewComp
-      <Modal
-        modalHeading
-        modalHeadingDescription
-        showModal
-        closeOnOutsideClick=true
-        setShowModal
-        modalClass="lg:w-3/5 sm:w-2/3 overflow-auto w-full mx-auto p-4">
-        <Form
-          onSubmit
-          validate
-          initialValues
-          formClass="flex flex-col gap-4 w-full relative overflow-auto">
-          {switch modalView {
-          | SaveNew =>
-            <>
-              <FormRenderer.FieldRenderer field={AnalyticsUtils.nameViewField(~isDisabled=false)} />
-              <FormRenderer.FieldRenderer field=AnalyticsUtils.descriptionField />
-              <FormRenderer.FieldRenderer
-                field={AnalyticsUtils.selectorsField(~isHorizontal=false)} labelClass="hidden"
-              />
-            </>
-
-          | SavedList =>
-            <div className="mb-8">
-              <SavedViewTable actualData modifiedTableEntity />
-            </div>
-          }}
-          <div className="self-end">
-            <FormRenderer.SubmitButton
-              text=submitButtonText
-              loadingText
-              buttonType=Pagination
-              icon=FontAwesome(submitButtonIcon)
-              buttonSize={isMobileView ? XSmall : Small}
-            />
-          </div>
-        </Form>
-      </Modal>
-    </div>
-  }
-}
-
-module FiltersComponent = {
-  @react.component
-  let make = (
-    ~filterEntity: AnalyticsUtils.filterEntity<'t>,
-    ~downloadDataButtonUi: React.element=React.null,
-  ) => {
-    open AnalyticsUtils
-    let iframe_padding = parent !== window ? "px-5" : ""
-    let getFilterData = AnalyticsHooks.useGetFiltersData()
-    let {updateExistingKeys, filterValue} = React.useContext(
-      AnalyticsUrlUpdaterContext.urlUpdaterContext,
-    )
-
-    let {
-      initialFilters,
-      filterDropDownOptions,
-      initialFixedFilters,
-      defaultFilterKeys,
-      filterKeys,
-    } = filterEntity
-
-    let filterBody = switch filterEntity {
-    | {filterBody} => filterBody
-    | _ => AnalyticsUtils.filterBody
-    }
-
-    let source = switch filterEntity {
-    | {source} => source
-    | _ => "BATCH"
-    }
-    let customFilterKey = switch filterEntity {
-    | {customFilterKey} => customFilterKey
-    | _ => ""
-    }
-
-    let filterKeys = filterKeys
-    let filteredTabKeys = filterKeys
-
-    let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-    let startTimeVal = getModuleFilters->getString(startTimeFilterKey, "")
-
-    let endTimeVal = getModuleFilters->getString(endTimeFilterKey, "")
-
-    let filterBody = React.useMemo3(() => {
-      let filterBodyEntity: AnalyticsUtils.filterBodyEntity = {
-        startTime: startTimeVal,
-        endTime: endTimeVal,
-        groupByNames: filteredTabKeys,
-        source,
-        mode: ?filterValue->Js.Dict.get("mode"),
-      }
-      filterBody(filterBodyEntity)
-    }, (startTimeVal, endTimeVal, filteredTabKeys->Js.Array2.joinWith(",")))
-
-    let filterDataOrig = getFilterData(filterEntity.uri, Fetch.Post, filterBody)
-    let filterData = filterDataOrig->Belt.Option.getWithDefault(Js.Json.object_(Js.Dict.empty()))
-
-    let filterDataOrigTabNames = React.useMemo2(() => {
-      switch filterDataOrig {
-      | Some(filterData) =>
-        Some(
-          {
-            "queryData": filterData
-            ->getDictFromJsonObject
-            ->getJsonObjectFromDict("queryData")
-            ->getArrayFromJson([])
-            ->Js.Array2.filter(item => {
-              let itemDict = item->getDictFromJsonObject
-              let dimension = itemDict->getString("dimension", "")
-              filteredTabKeys->Js.Array2.includes(dimension)
-            })
-            ->Js.Json.array,
-          }->Identity.genericObjectOrRecordToJson,
-        )
-      | None => None
-      }
-    }, (filterDataOrig, filteredTabKeys))
-
-    switch filterDataOrigTabNames {
-    | Some(filterData) =>
-      <div className={`flex flex-row ${iframe_padding}`}>
-        <DynamicFilter
-          initialFilters={initialFilters(filterData)}
-          options={filterDropDownOptions(filterData)}
-          popupFilterFields={filterDropDownOptions(filterData)}
-          initialFixedFilters={initialFixedFilters(filterData)}
-          defaultFilterKeys
-          tabNames=filteredTabKeys
-          updateUrlWith=updateExistingKeys //
-          key="0"
-          showCustomFilter=true
-          customViewTop=downloadDataButtonUi
-          moduleName=filterEntity.moduleName
-          customFilterKey
-          filterFieldsPortalName=""
-          showSelectFiltersSearch=true
-        />
-      </div>
-    | None =>
-      <div className={`flex flex-row ${iframe_padding}`}>
-        <DynamicFilter
-          initialFilters=[]
-          options=[]
-          popupFilterFields=[]
-          initialFixedFilters={initialFixedFilters(filterData)}
-          defaultFilterKeys
-          tabNames=filteredTabKeys
-          updateUrlWith=updateExistingKeys //
-          key="1"
-          showCustomFilter=false
-          customViewTop=downloadDataButtonUi
-          moduleName=filterEntity.moduleName
-          customFilterKey
-          filterFieldsPortalName=""
-          showSelectFiltersSearch=true
-        />
-      </div>
-    }
-  }
-}
-
-module FiltersComponentNew = {
-  @react.component
-  let make = (
-    ~filterEntity: AnalyticsUtils.filterEntityNew<'t>,
-    ~downloadDataButtonUi: React.element=React.null,
-    ~domain="txns",
-  ) => {
-    open AnalyticsUtils
-    let betaEndPointConfig = React.useContext(BetaEndPointConfigProvider.betaEndPointConfig)
-    let iframe_padding = parent !== window ? "px-5" : ""
-    let parentToken = AuthWrapperUtils.useTokenParent(Original)
-
-    let sortingParams = React.useMemo1((): option<AnalyticsNewUtils.sortedBasedOn> => {
-      switch filterEntity {
-      | {sortingColumnLegend} =>
-        Some({
-          sortDimension: sortingColumnLegend,
-          ordering: #Desc,
-        })
-      | _ => None
-      }
-    }, [filterEntity.sortingColumnLegend])
-
-    let obj = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-    let updateExistingKeys = obj.updateExistingKeys
-
-    let {initialFilters, initialFixedFilters, defaultFilterKeys, filterKeys} = filterEntity
-    let (initialFilterVals, setInitialFilterVals) = React.useState(_ =>
-      filterKeys
-      ->Js.Array2.map(ele => (ele, ["Loading..."->Js.Json.string]->Js.Json.array))
-      ->Js.Dict.fromArray
-    )
-
-    let customFilterKey = switch filterEntity {
-    | {customFilterKey} => customFilterKey
-    | _ => ""
-    }
-
-    let filteredTabKeys = filterKeys
-
-    let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-    let startTimeVal = getModuleFilters->getString(startTimeFilterKey, "")
-    let fetchApi = AuthHooks.useApiFetcher(~betaEndpointConfig=?betaEndPointConfig, ())
-    let addLogsAroundFetch = EulerAnalyticsLogUtils.useAddLogsAroundFetchNew()
-    let endTimeVal = getModuleFilters->getString(endTimeFilterKey, "")
-    let buttonOnClick = React.useCallback4(metric => {
-      let timeObj = Js.Dict.fromArray([
-        ("start", startTimeVal->Js.Json.string),
-        ("end", endTimeVal->Js.Json.string),
-      ])
-      let tableBody = AnalyticsNewUtils.apiBodyMaker(
-        ~timeObj,
-        ~metric,
-        ~groupBy=[metric],
-        ~sortingParams?,
-        ~domain,
-        ~dataLimit=300.,
-        (),
-      )
-      if (
-        initialFilterVals
-        ->getArrayFromDict(metric, [])
-        ->Js.Array2.includes("Loading..."->Js.Json.string)
-      ) {
-        fetchApi(
-          `/api/q/analyticsEndPoint`,
-          ~method_=Post,
-          ~bodyStr=tableBody->Js.Json.stringify,
-          ~authToken=parentToken,
-          ~headers=[("QueryType", "Filter")]->Js.Dict.fromArray,
-          (),
-        )
-        ->addLogsAroundFetch(~logTitle="Filter Api")
-        ->then(text => {
-          let jsonObj = convertNewLineSaperatedDataToArrayOfJson(text)
-          let resArr =
-            jsonObj
-            ->Js.Array2.reduce(
-              (arr, ele) => {
-                let dictValue =
-                  ele
-                  ->getDictFromJsonObject
-                  ->Js.Dict.values
-                  ->Js.Array2.map(
-                    item => {
-                      switch item->Js.Json.classify {
-                      | JSONString(str) => str
-                      | JSONNumber(num) => num->Belt.Float.toString
-                      | JSONTrue => "TRUE"
-                      | JSONFalse => "FALSE"
-                      | _ => ""
-                      }->Js.Json.string
-                    },
-                  )
-                arr->Js.Array2.concat(dictValue)
-              },
-              [],
-            )
-            ->Js.Array2.filter(
-              ele => {
-                ele->getStringFromJson("") !== ""
-              },
-            )
-          setInitialFilterVals(
-            prev => {
-              let newDict = prev->Js.Dict.entries->Js.Dict.fromArray
-              newDict->Js.Dict.set(metric, resArr->Js.Json.array)
-              newDict
-            },
-          )
-          resolve()
-        })
-        ->catch(_err => {
-          resolve()
-        })
-        ->ignore
-      }
-    }, (startTimeVal, endTimeVal, initialFilterVals, sortingParams))
-
-    <div className={`flex flex-row ${iframe_padding}`}>
-      <DynamicFilter
-        initialFilters={initialFilters(initialFilterVals->Js.Json.object_, buttonOnClick)}
-        options=[]
-        popupFilterFields=[]
-        initialFixedFilters={initialFixedFilters(Js.Json.null)}
-        defaultFilterKeys
-        tabNames=filteredTabKeys
-        updateUrlWith=updateExistingKeys //
-        key="0"
-        showCustomFilter=true
-        customViewTop=downloadDataButtonUi
-        moduleName=filterEntity.moduleName
-        customFilterKey
-        filterFieldsPortalName=""
-        showSelectFiltersSearch=true
-        revampedFilter=true
-      />
-    </div>
-  }
-}
-
-module DownloadCsv = {
-  @react.component
-  let make = (
-    ~title: string,
-    ~tableData: Js.Array2.t<Js.Nullable.t<'t>>,
-    ~visibleColumns: Js.Array2.t<'colType>,
-    ~colMapper,
-    ~getHeading: 'colType => Table.header,
-  ) => {
-    let isMobileView = MatchMedia.useMobileChecker()
-    let actualDataOrig =
-      tableData
-      ->Belt.Array.keepMap(item => item->Js.Nullable.toOption)
-      ->Js.Array2.map(Identity.genericTypeToJson)
-
-    let headerNames = visibleColumns->Belt.Array.keepMap(head => {
-      let item = head->getHeading
-      let title = head->colMapper
-      title !== "" ? Some(item.title) : None
-    })
-    let initialValues = visibleColumns->Belt.Array.keepMap(head => {
-      let title = head->colMapper
-      title !== "" ? Some(title) : None
-    })
-
-    let handleDownloadClick = _ev => {
-      let header = headerNames->Js.Array2.joinWith(",")
-
-      let csv =
-        actualDataOrig
-        ->Js.Array2.map(allRows => {
-          let allRowsDict =
-            Js.Json.decodeObject(allRows)->Belt.Option.getWithDefault(Js.Dict.empty())
-          initialValues
-          ->Js.Array2.map(col => {
-            let str =
-              Js.Dict.get(allRowsDict, col)
-              ->Belt.Option.getWithDefault(Js.Json.null)
-              ->Js.Json.stringify
-
-            let strArr = str->Js.String2.split(".")
-
-            let newStr = if (
-              strArr->Js.Array2.length === 2 && str->Belt.Float.fromString->Belt.Option.isSome
-            ) {
-              let newDecimal =
-                strArr
-                ->Belt.Array.get(1)
-                ->Belt.Option.getWithDefault("00")
-                ->Js.String2.slice(~from=0, ~to_=2)
-              strArr->Belt.Array.get(0)->Belt.Option.getWithDefault("0") ++ "." ++ newDecimal
-            } else {
-              str
-            }
-            newStr
-          })
-          ->Js.Array2.joinWith(",")
-        })
-        ->Js.Array2.joinWith("\n")
-      let finalCsv = header ++ "\n" ++ csv
-      let currentTime = Js.Date.now()->Js.Float.toString
-      DownloadUtils.downloadOld(~fileName=`${title}_${currentTime}.csv`, ~content=finalCsv)
-    }
-
-    <Button
-      text={isMobileView ? "" : "Export Table"}
-      leftIcon={FontAwesome("download")}
-      onClick=handleDownloadClick
-      buttonType={Dropdown}
-    />
-  }
-}
-
-module DownloadRawData = {
-  @react.component
-  let make = (
-    ~totalVolume,
-    ~downloadDataEntity: AnalyticsUtils.downloadDataEntity,
-    ~moduleName,
-  ) => {
-    let {addConfig, getConfig} = React.useContext(UserPrefContext.userPrefContext)
-    let previouslySelectedColumnsUserPrefKey = `download_data_column_${moduleName}`
-    let previouslySelectedDownloadData = switch getConfig(previouslySelectedColumnsUserPrefKey) {
-    | Some(jsonVal) =>
-      jsonVal
-      ->LogicUtils.getStrArryFromJson
-      ->Js.Array2.filter(item => {downloadDataEntity.downloadRawDataCols->Js.Array2.includes(item)})
-    | None => []
-    }
-    let fetchApi = AuthHooks.useApiFetcher()
-    let (showModal, setShowModal) = React.useState(_ => false)
-    let (downloadData, setDownloadData) = React.useState(() => previouslySelectedDownloadData)
-    let showToast = ToastState.useShowToast()
-    let (buttonState, setButtonState) = React.useState(_ => Button.Normal)
-    let isMobileView = MatchMedia.useMobileChecker()
-
-    let (isCheckboxSelected, setIsCheckboxSelected) = React.useState(_ => false)
-    let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-
-    let parentToken = AuthWrapperUtils.useTokenParent(Original)
-    let downloadDataUrl = downloadDataEntity.uri
-
-    let modalHeadingDescription = switch downloadDataEntity {
-    | {description} => description
-    | _ => ""
-    }
-
-    let {timeKeys, downloadRawDataCols, downloadDataBody} = downloadDataEntity
-
-    let {startTimeKey, endTimeKey} = timeKeys
-    let startDateTime = getModuleFilters->getString(startTimeKey, "")
-
-    let endDateTime = getModuleFilters->getString(endTimeKey, "")
-    let formattedOptions = React.useMemo1(() => {
-      downloadRawDataCols->Js.Array2.map((x): SelectBox.dropdownOption => {
-        {label: x->snakeToTitle, value: x}
-      })
-    }, [downloadRawDataCols])
-
-    let handleDownloadClick = _ev => {
-      setShowModal(_ => true)
-    }
-    let setIsCheckboxSelected = value => {
-      setIsCheckboxSelected(_ => value)
-    }
-
-    let onSubmit = values => {
-      setDownloadData(_ => values)
-      addConfig(previouslySelectedColumnsUserPrefKey, values->Js.Json.stringArray)
-      setButtonState(_ => Button.Loading)
-      setShowModal(_ => false)
-
-      let downloadDataEntity: AnalyticsUtils.downloadDataApiBodyEntity = {
-        startTime: startDateTime,
-        endTime: endDateTime,
-        columns: values,
-        compressed: isCheckboxSelected,
-      }
-
-      if downloadDataUrl !== "" {
-        fetchApi(
-          downloadDataUrl,
-          ~bodyStr=downloadDataBody(downloadDataEntity),
-          ~method_=Fetch.Post,
-          ~authToken=parentToken,
-          ~headers=[("QueryType", "DownloadData")]->Js.Dict.fromArray,
-          (),
-        )
-        ->then(resp => {
-          let statusCode = resp->Fetch.Response.status
-          setShowModal(_ => false)
-          setButtonState(_ => Button.Normal)
-          if statusCode !== 200 {
-            showToast(~toastType=ToastError, ~message=`Something went wrong`, ~autoClose=true, ())
-          }
-          resp->Fetch.Response.json
-        })
-        ->then(res => {
-          let downloadDataUrl = res->getDictFromJsonObject->getString("signedURL", "")
-          Webapi.Dom.window
-          ->Webapi.Dom.Window.open_(~url=downloadDataUrl, ~name="_blank", ())
-          ->ignore
-
-          resolve()
-        })
-        ->catch(_err => {
-          resolve()
-        })
-        ->ignore
-      }
-    }
-    if downloadRawDataCols->Js.Array2.length > 0 {
-      <>
-        {if isMobileView {
-          React.null
-        } else {
-          <div className="p-1">
-            <Button
-              text="Download Raw Data"
-              loadingText="Download Raw Data"
-              buttonSize=Small
-              buttonState
-              onClick=handleDownloadClick
-            />
-          </div>
-        }}
-        <DownloadSelectModal
-          modalHeading="Select Columns"
-          modalHeadingDescription
-          showModal
-          setShowModal
-          onSubmit
-          initialValues=downloadData
-          enableSelect=true
-          options=formattedOptions
-          submitButtonText="Download Report"
-          addCheckboxButton=true
-          checkboxButtonText="Compressed Data"
-          setIsCheckboxSelected
-          isCheckboxSelected
-          totalVolume
-        />
-      </>
-    } else {
-      React.null
-    }
-  }
-}
-
-module SankeyWithDropDown = {
-  @react.component
-  let make = (
-    ~data,
-    ~activeTab,
-    ~dataLoading,
-    ~sankeyConfig,
-    ~startNodeLable="Total Volume",
-    ~endNodeLable="Status",
-    ~loaderType: AnalyticsUtils.loaderType,
-  ) => {
-    let (sankeyCardinality, setSankeyCardinality) = React.useState(_ => 5)
-    let selectInput: ReactFinalForm.fieldRenderPropsInput = {
-      name: "snakey_cardinality",
-      onBlur: _ev => (),
-      onChange: ev => {
-        setSankeyCardinality(_ => {
-          ev->Identity.formReactEventToString->Belt.Int.fromString->Belt.Option.getWithDefault(5)
-        })
-      },
-      onFocus: _ev => (),
-      value: sankeyCardinality->Belt.Int.toString->Js.Json.string,
-      checked: true,
-    }
-    let selectInputOption = React.useMemo0(() => {
-      ["5", "10"]
-      ->SelectBox.makeOptions
-      ->Js.Array2.map(item => {
-        ...item,
-        label: `Top ${item.label}`,
-      })
-    })
-
-    let buttonText = React.useMemo1(() => {
-      `Top ${sankeyCardinality->Js.String.make} `
-    }, [sankeyCardinality])
-
-    let field =
-      <SelectBox.BaseDropdown
-        options=selectInputOption
-        buttonText
-        searchable=false
-        allowMultiSelect=false
-        input=selectInput
-        baseComponent={<Button
-          text=buttonText
-          buttonSize=Button.Small
-          rightIcon=Button.CustomIcon(<Icon className="pl-2 " size=20 name="chevron-down" />)
-          ellipsisOnly=true
-          customButtonStyle="min-w-full justify-between"
-        />}
-        hideMultiSelectButtons=true
-        deselectDisable=true
-        buttonType=Button.Primary
-        marginTop="mt-10 min-w-full" // mt-10 because the height of the small button is 10
-      />
-
-    <SankeyCharts
-      data
-      activeTab
-      sankeyDataLoading=dataLoading
-      sankeyConfig
-      field
-      topN=sankeyCardinality
-      startNodeLable
-      endNodeLable
-      loaderType
-    />
-  }
-}
-
-module ErrorModalContent = {
-  @react.component
-  let make = (
-    ~str: string,
-    ~entity: EntityType.entityType<'modalColType, 'modalTable>,
-    ~filterByData,
-    ~showModalBarChart: string,
-    ~colName: string,
-  ) => {
-    React.useEffect0(() => {
-      let onKeyDown = (event: 'a) => {
-        let key = event->keyCode
-        if key === 13 {
-          event->ReactEvent.Keyboard.preventDefault
-        }
-      }
-
-      Window.addEventListener("keydown", onKeyDown)
-
-      Some(() => Window.removeEventListener("keydown", onKeyDown))
-    })
-    let (offset, setOffset) = React.useState(() => 0)
-    let searchText = ReactFinalForm.useField("searchTable").input.value
-    let search_class = "text-gray-400 dark:text-gray-600"
-    let (theme, _setTheme) = React.useContext(ThemeProvider.themeContext)
-    let splitString =
-      Js.String2.split(str, "$$")->Js.Array2.map(errStr =>
-        Js.String2.splitByRe(Js.String2.trim(errStr), %re("/\s*[(%)]\s*/"))
-      )
-
-    let actualData12 = if Js.Array2.length(splitString[0]->Belt.Option.getWithDefault([])) > 1 {
-      splitString->Js.Array2.map(arr => {
-        let arr = Belt.Array.keepMap(arr, item => item)
-
-        Js.Dict.fromArray(
-          [
-            (colName, arr->Belt.Array.get(0)),
-            ("percent", arr->Belt.Array.get(1)),
-            ("volume", arr->Belt.Array.get(4)),
-          ]->Js.Array2.map(item => {
-            let (key, value) = item
-            (key, value->Belt.Option.getWithDefault("")->Js.Json.string)
-          }),
-        )
-      })
-    } else {
-      []
-    }
-    let data = if Js.Array2.length(actualData12) !== 0 {
-      actualData12
-      ->Js.Array2.map(arr => arr->Js.Json.object_)
-      ->Js.Json.array
-      ->entity.getObjects
-      ->Js.Array2.map(Js.Nullable.return)
-    } else {
-      []
-    }
-    let actualData = React.useMemo2(() => {
-      data->filterByData(searchText)
-    }, (searchText, data))
-
-    let searchTable = FormRenderer.makeFieldInfo(
-      ~label="",
-      ~name="searchTable",
-      ~placeholder="Search ",
-      ~customInput=InputFields.textInput(
-        ~customStyle="w-64",
-        ~autoComplete="off",
-        ~leftIcon=<Icon size=16 className=search_class name="search" />,
-        (),
-      ),
-      (),
-    )
-
-    // chart data
-
-    let categoryData = actualData12->Js.Array2.map(json => {
-      json->getString(colName, "")
-    })
-
-    let chartData = if Js.Array2.length(actualData12) !== 0 {
-      actualData12->Js.Array2.map(json => {
-        {
-          "unit": json->getString(colName, ""),
-          "y": json->getFloat("percent", 0.0),
-        }
-      })
-    } else {
-      []
-    }
-
-    let options: Js.Json.t = React.useMemo4(() => {
-      let data = [
-        {
-          "data": chartData,
-        },
-      ]
-      let categories = categoryData
-      let title = {snakeToTitle(colName)}
-      let gridLineColor = switch theme {
-      | Dark => "#2e2f39"
-      | Light => "#e6e6e6"
-      }
-      {
-        "chart": {
-          "type": "column",
-          "zoomType": "x",
-          "backgroundColor": Js.Nullable.null,
-        },
-        "title": {
-          "enabled": false,
-          "style": LineChartUtils.chartTitleStyle(theme),
-          "text": title,
-          "margin": 40,
-        },
-        "tooltip": {
-          "enabled": true,
-          "useHTML": true,
-          "pointFormat": `<div> <span style="padding-left:6px;font-size:14px;color: "black";opacity: 0.75;padding-top:10px">{point.y}%</span></div>`,
-          "headerFormat": "{point.key}"->Some,
-          "hideDelay": 0,
-          "backgroundColor": "white",
-          "valueDecimals": 2,
-          "outside": true,
-        },
-        "yAxis": {
-          "gridLineColor": gridLineColor,
-          "min": 0,
-          "title": {
-            "enabled": true,
-            "style": LineChartUtils.chartTitleStyle(theme),
-            "text": title,
-            "margin": 20,
-          },
-          "labels": {
-            "format": "{text}%"->Some,
-            "enabled": true,
-            "useHTML": true,
-          }->Some,
-        },
-        "xAxis": {
-          "categories": categories,
-        },
-        "plotOptions": {
-          "column": {
-            "stacking": "Normal",
-          },
-        },
-        "legend": {
-          "enabled": false,
-        },
-        "series": data,
-        "credits": {
-          "enabled": false,
-        },
-      }->Identity.genericObjectOrRecordToJson
-    }, (chartData, categoryData, colName, theme))
-    if showModalBarChart == "Table" {
-      <div className="-mt-6">
-        <FormRenderer.FieldRenderer field=searchTable />
-        <LoadedTable
-          actualData
-          totalResults={actualData->Js.Array2.length}
-          offset
-          setOffset
-          entity
-          defaultSort={
-            key: "volume",
-            order: Table.INC,
-          }
-          currrentFetchCount={actualData->Js.Array2.length}
-          title="Analytics Error Summary Table OnClickDetails"
-          hideTitle=true
-          resultsPerPage=10
-          highlightText={searchText->getStringFromJson("")}
-        />
-      </div>
-    } else {
-      <div
-        className="flex flex-row justify-between border-b  border-jp-gray-500 dark:border-jp-gray-960 dark:bg-jp-gray-950 text-gray-500 px-4 py-2 ">
-        <div className="flex-1 min-h-[400px] finChart">
-          <HighchartBarChart.RawBarChart options />
-        </div>
-      </div>
-    }
-  }
-}
-
-module ErrorOnCellClick = {
-  @react.component
-  let make = (
-    ~val,
-    ~str,
-    ~entity: EntityType.entityType<'modalColType, 'modalTable>,
-    ~filterByData,
-    ~colName: string,
-  ) => {
-    let topNValues = None
-    let (showErrorTableModal, setShowErrorTableModal) = React.useState(_ => false)
-    let (showModalBarChart, setShowModalBarChart) = React.useState(_ => "Table")
-    let (modalErrorHeading, setModalErrorHeading) = React.useState(_ => "")
-    let (defaultFilter, _) = Recoil.useRecoilState(AnalyticsHooks.defaultFilter)
-    let defaultFilterDict = defaultFilter->safeParse->getDictFromJsonObject
-    let activeTab =
-      defaultFilterDict
-      ->getArrayFromDict("activeTab", [])
-      ->Js.Array2.map(key => {
-        key->getStringFromJson("")
-      })
-    let defaultFilters = defaultFilterDict->getJsonObjectFromDict("filter")->getDictFromJsonObject
-    let dictKeys = val->Js.Dict.keys
-    let filters = defaultFilters->getJsonObjectFromDict("filters")->getDictFromJsonObject
-    let filterKeys = filters->Js.Dict.keys
-
-    let cellText = switch topNValues {
-    | Some(topNValues) =>
-      Js.String2.split(str, "$$")
-      ->Js.Array2.map(item => {
-        let itemU = item->Js.String2.split("(")
-        let lastElement =
-          itemU->Belt.Array.get(itemU->Js.Array2.length - 1)->Belt.Option.getWithDefault("")
-        let item = item->Js.String2.replace(`(${lastElement}`, "")
-        (
-          lastElement
-          ->Js.String2.replace(")", "")
-          ->Js.String.trim
-          ->Belt.Int.fromString
-          ->Belt.Option.getWithDefault(0),
-          item,
-        )
-      })
-      ->Js.Array2.sortInPlaceWith((item1, item2) => {
-        let (x1, _y1) = item1
-        let (x2, _y2) = item2
-        if x1 > x2 {
-          -1
-        } else if x1 == x2 {
-          0
-        } else {
-          1
-        }
-      })
-      ->Js.Array2.mapi((item, index) => {
-        let (_, value) = item
-        index < topNValues ? Some(value) : None
-      })
-      ->Belt.Array.keepMap(item => item)
-      ->Js.Array2.joinWith(`\n`)
-
-    | None => Js.String2.split(str, "$$")->Js.Array2.joinWith(`\n`)
-    }
-    let cellText = Js.String2.split(cellText, "(")->Js.Array2.joinWith(` (`)
-
-    activeTab->Js.Array2.forEach(key => {
-      if !(filterKeys->Js.Array2.includes(key)) {
-        filterKeys->Js.Array2.push(key)->ignore
-      }
-    })
-    filterKeys->Js.Array2.forEach(key => {
-      let value = val->getString(key, "")
-      if dictKeys->Js.Array2.includes(key) && value !== "" {
-        filters->Js.Dict.set(key, [value->Js.Json.string]->Js.Json.array)
-      }
-    })
-
-    let valStr =
-      activeTab
-      ->Js.Array2.map(key => {
-        val->getJsonObjectFromDict(key)
-      })
-      ->Js.Array2.joinWith(", ")
-
-    let keyStr = activeTab->Js.Array2.map(snakeToTitle)->Js.Array2.joinWith(", ")
-
-    let heading = `${keyStr} : ${valStr}`
-
-    let onClick = _ => {
-      setShowErrorTableModal(_ => true)
-      setModalErrorHeading(_ => heading)
-    }
-
-    let renderModalChart = ev => {
-      if ev == "Table" {
-        setShowModalBarChart(_ => "Table")
-      } else {
-        setShowModalBarChart(_ => "Bar Chart")
-      }
-    }
-
-    let modalInput: ReactFinalForm.fieldRenderPropsInput = {
-      name: "modalInput",
-      onBlur: _ev => (),
-      onChange: ev => renderModalChart(ev->Identity.formReactEventToString),
-      onFocus: _ev => (),
-      value: ""->Js.Json.string,
-      checked: true,
-    }
-
-    <>
-      <div onClick>
-        <ToolTip
-          tooltipForWidthClass="min-w-full"
-          contentAlign=Left
-          description=cellText
-          toolTipPosition=Left
-          textStyle="text-fs-13 ibm-plex font-medium"
-          textStyleGap="space-y-6"
-          toolTipFor={<div
-            className={`px-2 py-0.5 ibm-plex text-fs-13 font-normal text-sky-500 cursor-pointer truncate w-12 min-w-full`}>
-            {React.string(cellText)}
-          </div>}
-        />
-      </div>
-      {if showErrorTableModal {
-        <Modal
-          modalHeading=modalErrorHeading
-          headingClass="!bg-transparent dark:!bg-jp-gray-lightgray_background"
-          showModal=showErrorTableModal
-          closeOnOutsideClick=true
-          setShowModal=setShowErrorTableModal
-          borderBottom=true
-          modalClass="md:w-10/12 mx-auto my-8 dark:!bg-jp-gray-lightgray_background p-4 pb-8">
-          <Form>
-            <div className="flex relative flex-row flex-wrap mb-3">
-              <SelectBox.BaseDropdown
-                allowMultiSelect=false
-                hideMultiSelectButtons=true
-                buttonText=showModalBarChart
-                input={modalInput}
-                options={["Bar chart", "Table"]->SelectBox.makeOptions}
-                deselectDisable=false
-                autoApply=false
-              />
-            </div>
-            <ErrorModalContent str entity filterByData showModalBarChart colName />
-          </Form>
-        </Modal>
-      } else {
-        React.null
-      }}
-    </>
-  }
-}
-
-module OnCellClick = {
-  @react.component
-  let make = (
-    ~val,
-    ~num,
-    ~mapper,
-    ~tabValues: array<DynamicTabs.tab>,
-    ~domain: string,
-    ~customFilterKey: option<string>=?,
-    ~summaryTableOnClickEntity,
-    ~filterByData,
-  ) => {
-    let clearFormattingValue =
-      ReactFinalForm.useField("enableFormattedData").input.value
-      ->Js.Json.decodeBoolean
-      ->Belt.Option.getWithDefault(false)
-    let (showTableModal, setShowTableModal) = React.useState(_ => false)
-    let (modalHeading, setModalHeading) = React.useState(_ => "")
-    let (defaultFilter, _) = Recoil.useRecoilState(AnalyticsHooks.defaultFilter)
-    let {filterValue} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-    let defaultFilterDict = defaultFilter->safeParse->getDictFromJsonObject
-    let activeTab =
-      defaultFilterDict
-      ->getArrayFromDict("activeTab", [])
-      ->Js.Array2.map(key => {
-        key->getStringFromJson("")
-      })
-    let defaultFilters = defaultFilterDict->getJsonObjectFromDict("filter")->getDictFromJsonObject
-    let dictKeys = val->Js.Dict.keys
-    let filters = defaultFilters->getJsonObjectFromDict("filters")->getDictFromJsonObject
-    let filterKeys = filters->Js.Dict.keys
-    let getTitle = key => {
-      (
-        tabValues
-        ->Js.Array2.filter(item => {
-          item.value == key
-        })
-        ->Belt.Array.get(0)
-        ->Belt.Option.getWithDefault({title: "", value: "", isRemovable: false})
-      ).title
-    }
-
-    activeTab->Js.Array2.forEach(key => {
-      if !(filterKeys->Js.Array2.includes(key)) {
-        filterKeys->Js.Array2.push(key)->ignore
-      }
-    })
-    filterKeys->Js.Array2.forEach(key => {
-      let value = val->getString(key, "")
-      if dictKeys->Js.Array2.includes(key) && value !== "" {
-        filters->Js.Dict.set(key, [value->Js.Json.string]->Js.Json.array)
-      }
-    })
-    let currentCustomFilterValue = switch customFilterKey {
-    | Some(customFilterKey) =>
-      filterValue->Js.Dict.get(customFilterKey)->Belt.Option.getWithDefault("")
-    | None => ""
-    }
-
-    defaultFilters->Js.Dict.set("filters", filters->Js.Json.object_)
-    if currentCustomFilterValue !== "" {
-      defaultFilters->Js.Dict.set("customFilter", currentCustomFilterValue->Js.Json.string)
-    }
-
-    let valStr =
-      activeTab
-      ->Js.Array2.map(key => {
-        val->getJsonObjectFromDict(key)
-      })
-      ->Js.Array2.joinWith(", ")
-
-    let keyStr = activeTab->Js.Array2.map(getTitle)->Js.Array2.joinWith(", ")
-
-    let heading = `${keyStr} : ${valStr}`
-    let search_class = "text-gray-400 dark:text-gray-600"
-    let searchTable = FormRenderer.makeFieldInfo(
-      ~label="",
-      ~name="searchTable",
-      ~placeholder="Search ",
-      ~customInput=InputFields.textInput(
-        ~customStyle="w-64",
-        ~autoComplete="off",
-        ~leftIcon=<Icon size=16 className=search_class name="search" />,
-        (),
-      ),
-      (),
-    )
-
-    let onClick = _ => {
-      setShowTableModal(_ => true)
-      setModalHeading(_ => heading)
-    }
-    <>
-      <div
-        className="px-2 py-0.5 fira-code text-fs-13 font-normal text-sky-500 cursor-pointer"
-        onClick>
-        {React.string({clearFormattingValue ? num->Belt.Float.toString : num->mapper})}
-      </div>
-      {if showTableModal {
-        <Modal
-          modalHeading
-          headingClass="!bg-transparent dark:!bg-jp-gray-lightgray_background"
-          showModal=showTableModal
-          closeOnOutsideClick=true
-          setShowModal=setShowTableModal
-          borderBottom=true
-          modalClass="md:w-10/12 w-full md:mx-auto md:my-8 dark:!bg-jp-gray-lightgray_background p-4 pb-8 overflow-auto">
-          <Form>
-            <FormRenderer.FieldRenderer field=searchTable />
-            <AnalyticsUtils.TableModalContent
-              defaultFilters domain filterByData summayTableEntity=summaryTableOnClickEntity
-            />
-          </Form>
-        </Modal>
-      } else {
-        React.null
-      }}
-    </>
-  }
-}
-
-module BaseTableComponent = {
-  @react.component
-  let make = (
-    ~filters: (string, string),
-    ~tableData: Js.Json.t,
-    ~defaultSort: string,
-    ~tableDataLoading: bool,
-    ~transactionTableDefaultCols,
-    ~newDefaultCols: array<'colType>,
-    ~newAllCols: array<'colType>,
-    ~getTransactionTable: Js.Json.t => array<'t>,
-    ~colMapper: 'colType => string,
-    ~tableEntity: EntityType.entityType<'colType, 't>,
-    ~tableGlobalFilter: option<(array<Js.Nullable.t<'t>>, Js.Json.t) => array<Js.Nullable.t<'t>>>,
-    ~activeTab,
-    ~text,
-    ~showDeltaToggleUi: option<React.element>=?,
-    ~loaderType: AnalyticsUtils.loaderType,
-  ) => {
-    open DynamicTableUtils
-    let actualData = React.useMemo2(() => {
-      let data = tableData->getDictFromJsonObject
-      let value =
-        data
-        ->getJsonObjectFromDict("queryData")
-        ->getTransactionTable
-        ->Js.Array2.map(Js.Nullable.return)
-      value
-    }, (tableData, getTransactionTable))
-    let {parentAuthInfo} = React.useContext(TokenContextProvider.tokenContext)
-    let userInfoText = React.useMemo1(() => {
-      switch parentAuthInfo {
-      | Some(info) => `${info.merchantId}_tab_performance_table_table_${info.username}_currentTime` // tab name also need to be added based on tab currentTime need to be added
-      | None => ""
-      }
-    }, [parentAuthInfo])
-    let isMobileView = MatchMedia.useMobileChecker()
-    let (showColumnSelector, setShowColumnSelector) = React.useState(() => false)
-    let (offset, setOffset) = React.useState(_ => 0)
-    let (_, setCounter) = React.useState(_ => 1)
-    let refetch = React.useCallback1(_ => {
-      setCounter(p => p + 1)
-    }, [setCounter])
-    let {defaultColumns} = tableEntity
-    let visibleColumns = Recoil.useRecoilValueFromAtom(transactionTableDefaultCols)
-    let (startTimeFilter, endTimeFilter) = filters
-    let downloadDataText = `${userInfoText}_${startTimeFilter}_${endTimeFilter}`
-    let defaultSort: Table.sortedObject = {
-      key: defaultSort,
-      order: Table.INC,
-    }
-
-    let rightTitleElement = React.useMemo2(() => {
-      <Button
-        text={isMobileView ? "" : "Add/Remove Column"}
-        customButtonStyle="tableColumnButton"
-        leftIcon={CustomIcon(<Icon name="custom_column_table" size=15 className="mr-1" />)}
-        buttonType=SecondaryFilled
-        buttonSize=Small
-        onClick={_ => setShowColumnSelector(_ => true)}
-      />
-    }, (setShowColumnSelector, isMobileView))
-
-    let modifiedTableEntity = React.useMemo3(() => {
-      {
-        ...tableEntity,
-        defaultColumns: newDefaultCols,
-        allColumns: Some(newAllCols),
-      }
-    }, (tableEntity, newDefaultCols, newAllCols))
-
-    let filterKeysJson = ReactFinalForm.useField("searchField").input.value
-
-    let clearFormattingValue =
-      ReactFinalForm.useField("enableFormattedData").input.value
-      ->Js.Json.decodeBoolean
-      ->Belt.Option.getWithDefault(false)
-
-    let actualData = React.useMemo2(() => {
-      switch tableGlobalFilter {
-      | Some(tableGlobalFilter) => actualData->tableGlobalFilter(filterKeysJson)
-      | None => actualData
-      }
-    }, (actualData, filterKeysJson))
-    let search_class = "text-gray-400 dark:text-gray-600"
-
-    let clearFormattingToggleUi = FormRenderer.makeFieldInfo(
-      ~name="enableFormattedData",
-      ~label="Clear Formatting",
-      ~customInput=InputFields.boolInput(~isDisabled=false),
-      (),
-    )
-
-    let initialFilterFields = FormRenderer.makeFieldInfo(
-      ~label="",
-      ~name="searchField",
-      ~placeholder="Search",
-      ~customInput=InputFields.textInput(
-        ~customStyle=`w-64 tableSearch`,
-        ~autoComplete="off",
-        ~leftIcon=<Icon size={16} className=search_class name={"search"} />,
-        (),
-      ),
-      (),
-    )
-
-    let filt = React.useMemo6(() => {
-      <div className="flex flex-row gap-4">
-        <ChooseColumns
-          entity={modifiedTableEntity}
-          totalResults={actualData->Js.Array2.length}
-          defaultColumns
-          activeColumnsAtom={transactionTableDefaultCols}
-          setShowColumnSelector
-          showColumnSelector
-          sortingBasedOnDisabled=false
-          orderdColumnBasedOnDefaultCol=true
-          showSerialNumber=false
-          mandatoryOptions=activeTab
-        />
-      </div>
-    }, (
-      modifiedTableEntity,
-      actualData,
-      transactionTableDefaultCols,
-      setShowColumnSelector,
-      showColumnSelector,
-      defaultColumns,
-    ))
-
-    let clearFormattedDataButton = switch showDeltaToggleUi {
-    | Some(toggleUi) =>
-      <div className="flex flex-row gap-2">
-        <div className="flex flex-row items-center">
-          <FormRenderer.FieldWrapper label="Show Delta"> {React.null} </FormRenderer.FieldWrapper>
-          {toggleUi}
-        </div>
-        <FormRenderer.FieldRenderer
-          field=clearFormattingToggleUi fieldWrapperClass="flex flex-row items-center gap-1"
-        />
-      </div>
-    | None =>
-      <FormRenderer.FieldRenderer
-        field=clearFormattingToggleUi fieldWrapperClass="flex flex-row items-center gap-1"
-      />
-    }
-
-    let bottomMargin = "-mb-13"
-    let tableBorderClass = "border-collapse border border-jp-gray-940 border-solid border-2 rounded-sm border-opacity-30 dark:border-jp-gray-dark_table_border_color dark:border-opacity-30"
-    let downloadCsv =
-      <DownloadCsv
-        title=downloadDataText
-        tableData=actualData
-        visibleColumns
-        colMapper
-        getHeading=modifiedTableEntity.getHeading
-      />
-    let frozenIndex = activeTab->Js.Array2.length
-    <div className="flex flex-1 flex-col m-4">
-      <RefetchContextProvider value=refetch>
-        {if loaderType === Shimmer && tableDataLoading {
-          <Shimmer styleClass="w-full h-96 dark:bg-black bg-white" shimmerType={Big} />
-        } else {
-          {
-            <>
-              <div className="flex">
-                <AddDataAttributes attributes=[("data-header-text", text)]>
-                  <div
-                    className="font-bold text-xl text-black text-opacity-75 dark:text-white dark:text-opacity-75">
-                    {React.string(text)}
-                  </div>
-                </AddDataAttributes>
-                {if tableDataLoading && loaderType === SideLoader {
-                  <div className="animate-spin px-4">
-                    <Icon name="spinner" size=20 />
-                  </div>
-                } else {
-                  React.null
-                }}
-              </div>
-              <div className={`flex flex-1 -ml-1  ${isMobileView ? "" : bottomMargin}`}>
-                <FormRenderer.FieldRenderer field=initialFilterFields />
-              </div>
-              <AddDataAttributes attributes=[("data-loaded-table", text)]>
-                <div>
-                  <LoadedTable
-                    visibleColumns
-                    title=text
-                    hideTitle=true
-                    actualData
-                    entity=modifiedTableEntity
-                    resultsPerPage=10
-                    totalResults={actualData->Js.Array2.length}
-                    filters={filt}
-                    offset
-                    setOffset
-                    defaultSort
-                    rightTitleElement={rightTitleElement}
-                    currrentFetchCount={actualData->Js.Array2.length}
-                    clearFormattedDataButton
-                    downloadCsv={downloadCsv}
-                    tableLocalFilter=true
-                    tableheadingClass=tableBorderClass
-                    tableBorderClass
-                    tableDataBorderClass=tableBorderClass
-                    frozenUpto={isMobileView ? 1 : frozenIndex}
-                    highlightText={filterKeysJson->getStringFromJson("")}
-                    clearFormatting=clearFormattingValue
-                    isAnalyticsModule=true
-                    showTableOnMobileView=true
-                  />
-                </div>
-              </AddDataAttributes>
-            </>
-          }
-        }}
-      </RefetchContextProvider>
-    </div>
-  }
-}
-
-let useTableSankeyWrapper = (
-  ~sankeyEntity: option<SankeyCharts.sankeyEntity>,
-  ~colMapper: 'colType => string,
-  ~analyticsTableEntity: AnalyticsUtils.analyticsTableEntity<'colType, 't>,
-  ~text,
-) => {
-  let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-  let parentToken = AuthWrapperUtils.useTokenParent(Original)
-
-  let activeTab = React.useMemo1(() => {
-    getModuleFilters->getOptionStrArrayFromDict(`${analyticsTableEntity.moduleName}.tabName`)
-  }, [getModuleFilters])
-
-  let (activeTabState, setActiveTabState) = React.useState(_ => activeTab)
-
-  let {
-    tableEntity,
-    defaultSortCol,
-    deltaMetrics,
-    isIndustry,
-    distributionArray,
-    metrics,
-    tableUpdatedHeading,
-    tableGlobalFilter,
-    moduleName,
-    filterKeys,
-    timeKeys,
-    modeKey,
-    moduleNamePrefix,
-    source,
-  } = analyticsTableEntity
-  let tableSelectedColumnUserPrefKey = `dynamicTable_selected_columns_${moduleName}`
-  let tableMetrics = metrics
-
-  let tableCustomFilterKey = switch analyticsTableEntity {
-  | {customFilterKey} => customFilterKey
-  | _ => ""
-  }
-
-  let defaultSort = defaultSortCol
-  let {getObjects} = tableEntity
-  let getTransactionTable = getObjects
-  let (tableLoading, setTableLoading) = React.useState(_ => false)
-  let (tableHeaderLoading, setShowTableHeaderLoading) = React.useState(_ => false)
-  let {getHeading, allColumns, defaultColumns} = tableEntity
-  let allMetricColumn = defaultColumns
-  let activeTabStr = activeTab->Belt.Option.getWithDefault([])->Js.Array2.joinWith("-")
-  let {startTimeKey, endTimeKey} = timeKeys
-  let (startTimeFilterKey, endTimeFilterKey) = (startTimeKey, endTimeKey)
-  let (showDelta, setShowDelta) = React.useState(_ => false)
-  // with prefix will be specific for the component level filter but without prefix will be at the overall level filters
-  let getAllFilter = UrlUtils.useGetFilterDictFromUrl("")
-  let showDeltaInput: ReactFinalForm.fieldRenderPropsInput = {
-    name: "showDelta",
-    onBlur: _ev => (),
-    onChange: ev => setShowDelta(_ => ev->Identity.formReactEventToBool),
-    onFocus: _ev => (),
-    value: showDelta->Js.Json.boolean,
-    checked: false,
-  }
-
-  // without prefix only table related Filters
-  let getTopLevelFilter = React.useMemo1(() => {
-    getAllFilter
-    ->Js.Dict.entries
-    ->Belt.Array.keepMap(item => {
-      let (key, value) = item
-      let keyArr = key->Js.String2.split(".")
-      let prefix = keyArr->Belt.Array.get(0)->Belt.Option.getWithDefault("")
-      if prefix === moduleName && prefix !== "" {
-        None
-      } else {
-        Some((prefix, value))
-      }
-    })
-    ->Js.Dict.fromArray
-  }, [getAllFilter])
-
-  let allColumns = allColumns->Belt.Option.getWithDefault([])
-  let defaultTableColumn = switch analyticsTableEntity {
-  | {defaultColumn} => defaultColumn
-  | {tableEntity} => tableEntity.allColumns->Belt.Option.getWithDefault([])
-  }
-
-  let consumeSankeyFetchedData = React.useMemo1(() => {
-    switch sankeyEntity {
-    | Some(sankeyEntity) => sankeyEntity.fetchData
-    | None => false
-    }
-  }, [sankeyEntity])
-  // NOTE ideally these filters keys should be passed in datatable entity or if we make a entity for the table and sankey
-
-  let (_, setDefaultFilter) = Recoil.useRecoilState(AnalyticsHooks.defaultFilter)
-
-  let mode = switch modeKey {
-  | Some(modeKey) => Some(getTopLevelFilter->getString(modeKey, ""))
-  | None => Some("ORDER")
-  }
-
-  let allFilterKeys = Js.Array2.concat(
-    [startTimeFilterKey, endTimeFilterKey, mode->Belt.Option.getWithDefault("")],
-    filterKeys,
-  )
-
-  let (topFiltersToSearchParam, customFilter) = React.useMemo1(() => {
-    let filterSearchParam =
-      getTopLevelFilter
-      ->Js.Dict.entries
-      ->Belt.Array.keepMap(entry => {
-        let (key, value) = entry
-        if allFilterKeys->Js.Array2.includes(key) {
-          switch value->Js.Json.classify {
-          | JSONString(str) => `${key}=${str}`->Some
-          | JSONNumber(num) => `${key}=${num->Js.String.make}`->Some
-          | JSONArray(arr) => `${key}=[${arr->Js.String.make}]`->Some
-          | _ => None
-          }
-        } else {
-          None
-        }
-      })
-      ->Js.Array2.joinWith("&")
-
-    (filterSearchParam, getTopLevelFilter->LogicUtils.getString(tableCustomFilterKey, ""))
-  }, [getTopLevelFilter])
-
-  let filterValueFromUrl = React.useMemo1(() => {
-    getTopLevelFilter
-    ->Js.Dict.entries
-    ->Belt.Array.keepMap(entries => {
-      let (key, value) = entries
-      filterKeys->Js.Array2.includes(key) ? Some((key, value)) : None
-    })
-    ->Js.Dict.fromArray
-    ->Js.Json.object_
-    ->Some
-  }, [topFiltersToSearchParam])
-
-  let startTimeFromUrl = React.useMemo1(() => {
-    getTopLevelFilter->getString(startTimeFilterKey, "")
-  }, [topFiltersToSearchParam])
-  let endTimeFromUrl = React.useMemo1(() => {
-    getTopLevelFilter->getString(endTimeFilterKey, "")
-  }, [topFiltersToSearchParam])
-  let {addConfig, getConfig} = React.useContext(UserPrefContext.userPrefContext)
-  let fetchApi = AuthHooks.useApiFetcher()
-
-  let (statusDict, setStatusDict) = React.useState(_ => Js.Dict.empty())
-  let addLogsAroundFetch = EulerAnalyticsLogUtils.useAddLogsAroundFetch()
-  let (sankeyLoading, setSankeyLoading) = React.useState(_ => true)
-  let (sankeyFetchedData, setSankeyFetchedData) = React.useState(_ => None)
-  let (sankeyLoaderType, setSankeyLoaderType) = React.useState(_ => AnalyticsUtils.Shimmer)
-
-  let (tableData, setTableData) = React.useState(_ => None)
-  let (tableInfoData, setTableInfoData) = React.useState(_ => Js.Json.object_(Js.Dict.empty()))
-  let (tableLoaderType, setTableLoaderType) = React.useState(_ => AnalyticsUtils.Shimmer)
-
-  let defaultTableColumn = React.useMemo0(() => {
-    let defaultColumnsFromPref = switch getConfig(tableSelectedColumnUserPrefKey) {
-    | Some(jsonVal) => jsonVal->LogicUtils.getStrArryFromJson
-    | None => []
-    }
-
-    let defaultColumnFromUserPref = defaultTableColumn->Belt.Array.keepMap(item => {
-      let getHeadingType = item->getHeading
-      let key = getHeadingType.key
-      defaultColumnsFromPref->Js.Array2.includes(key) ? Some(item) : None
-    })
-
-    if defaultColumnFromUserPref->Js.Array2.length === 0 {
-      defaultTableColumn
-    } else {
-      defaultColumnFromUserPref
-    }
-  })
-
-  let newDefaultCols = React.useMemo1(() => {
-    activeTabState
-    ->Belt.Option.getWithDefault([])
-    ->Belt.Array.keepMap(item => {
-      allMetricColumn
-      ->Belt.Array.keepMap(
-        columnItem => {
-          let val = columnItem->getHeading
-          val.key === item ? Some(columnItem) : None
-        },
-      )
-      ->Belt.Array.get(0)
-    })
-    ->Belt.Array.concat(defaultTableColumn)
-  }, [activeTabState->Belt.Option.getWithDefault([])->Js.Array2.joinWith("-")])
-
-  let newAllCols = React.useMemo1(() => {
-    allMetricColumn
-    ->Belt.Array.keepMap(item => {
-      let val = item->getHeading
-      activeTabState->Belt.Option.getWithDefault([])->Js.Array2.includes(val.key)
-        ? Some(item)
-        : None
-    })
-    ->Belt.Array.concat(allColumns)
-  }, [activeTabState->Belt.Option.getWithDefault([])->Js.Array2.joinWith("-")])
-
-  let transactionTableDefaultCols = React.useMemo2(() => {
-    Recoil.atom(.
-      `${moduleName}${moduleNamePrefix}DefaultCols${activeTabState
-        ->Belt.Option.getWithDefault([])
-        ->Js.Array2.joinWith("-")}`,
-      newDefaultCols,
-    )
-  }, (
-    newDefaultCols,
-    `${moduleName}DefaultCols${activeTabState
-      ->Belt.Option.getWithDefault([])
-      ->Js.Array2.joinWith("-")}`,
-  ))
-
-  let visibleColumns = Recoil.useRecoilValueFromAtom(transactionTableDefaultCols)
-
-  React.useEffect1(() => {
-    let visibleColumnsUpdated =
-      visibleColumns
-      ->Belt.Array.keepMap(item => {
-        let item = item->getHeading
-        let itemKey = item.key
-        activeTabState->Belt.Option.getWithDefault([])->Js.Array2.includes(itemKey)
-          ? None
-          : Some(itemKey->Js.Json.string)
-      })
-      ->Js.Json.array
-    addConfig(tableSelectedColumnUserPrefKey, visibleColumnsUpdated)
-    None
-  }, [visibleColumns])
-
-  let deltaPrefixArr = switch analyticsTableEntity {
-  | {colDependentDeltaPrefixArr} =>
-    visibleColumns->Belt.Array.keepMap(item => item->colDependentDeltaPrefixArr)
-  | {deltaPrefixArr} => deltaPrefixArr
-  }
-
-  let tableOverallBodyEntity: AnalyticsUtils.tableApiBodyEntity = {
-    startTimeFromUrl,
-    endTimeFromUrl,
-    ?filterValueFromUrl,
-    deltaMetrics,
-    isIndustry,
-    deltaPrefixArr,
-    tableMetrics,
-    ?mode,
-    customFilter,
-    moduleName,
-    showDeltaMetrics: false,
-    source,
-  }
-
-  let overallBody = switch analyticsTableEntity {
-  | {tableSummaryBody} => tableSummaryBody(tableOverallBodyEntity)
-  | _ => AnalyticsUtils.generateTablePayloadFromEntity(tableOverallBodyEntity)
-  }
-
-  let tableApiBodyEntity = {
-    ...tableOverallBodyEntity,
-    currenltySelectedTab: ?activeTab,
-    ?distributionArray,
-    showDeltaMetrics: showDelta,
-  }
-  let tableBody = switch analyticsTableEntity {
-  | {tableBodyEntity} => tableBodyEntity(tableApiBodyEntity)
-  | _ => AnalyticsUtils.generateTablePayloadFromEntity(tableApiBodyEntity)
-  }
-
-  let (updatedCell, showDeltaToggleUi) = switch analyticsTableEntity {
-  | {getUpdatedCell} => (
-      getUpdatedCell(tableApiBodyEntity),
-      Some(InputFields.boolInput(~input=showDeltaInput, ~placeholder="", ~isDisabled=false)),
-    )
-  | {tableEntity} => (tableEntity.getCell, None)
-  }
-
-  React.useEffect5(() => {
-    // overall values in table header
-    setShowTableHeaderLoading(_ => true)
-    setSankeyLoading(_ => true)
-    setTableInfoData(_ => Js.Json.object_(Js.Dict.empty()))
-    if startTimeFromUrl !== "" && endTimeFromUrl !== "" && parentToken->Belt.Option.isSome {
-      fetchApi(
-        tableEntity.uri,
-        ~method_=Post,
-        ~bodyStr=overallBody,
-        ~authToken=parentToken,
-        ~headers=[("QueryType", "TableInfo")]->Js.Dict.fromArray,
-        (),
-      )
-      ->addLogsAroundFetch(~logTitle="Table info Data Api", ~setStatusDict)
-      ->thenResolve(json => {
-        setTableInfoData(_ => json)
-        setShowTableHeaderLoading(_ => false)
-      })
-      ->catch(_err => {
-        setTableInfoData(_ => Js.Json.object_(Js.Dict.empty()))
-        setShowTableHeaderLoading(_ => false)
-        resolve()
-      })
-      ->ignore
-    }
-    None
-  }, (
-    topFiltersToSearchParam,
-    parentToken,
-    customFilter,
-    mode,
-    deltaPrefixArr->Js.Array2.joinWith(""),
-  ))
-  React.useEffect6(() => {
-    setTableLoading(_ => true)
-    setSankeyLoading(_ => true)
-    if (
-      startTimeFromUrl !== "" &&
-      endTimeFromUrl !== "" &&
-      parentToken->Belt.Option.isSome &&
-      activeTab->Belt.Option.isSome
-    ) {
-      fetchApi(
-        tableEntity.uri,
-        ~method_=Post,
-        ~bodyStr=tableBody,
-        ~authToken=parentToken,
-        ~headers=[("QueryType", "TableSankey")]->Js.Dict.fromArray,
-        (),
-      )
-      ->addLogsAroundFetch(~logTitle="Table and Sankey Data Api", ~setStatusDict)
-      ->thenResolve(json => {
-        setActiveTabState(_ => activeTab)
-        setTableData(_ => json->Some)
-        if !consumeSankeyFetchedData {
-          setSankeyFetchedData(
-            _ => Some(
-              json->getDictFromJsonObject->getJsonObjectFromDict("queryData")->getArrayFromJson([]),
-            ),
-          )
-        }
-        setSankeyLoading(_ => false)
-        setTableLoading(_ => false)
-      })
-      ->catch(_err => {
-        setActiveTabState(_ => activeTab)
-        setTableData(_ => Js.Json.object_(Js.Dict.empty())->Some)
-        if !consumeSankeyFetchedData {
-          setSankeyFetchedData(_ => Some([]))
-        }
-        setSankeyLoading(_ => false)
-        setTableLoading(_ => false)
-        resolve()
-      })
-      ->ignore
-    }
-    None
-  }, (
-    topFiltersToSearchParam,
-    `${activeTabStr}${deltaPrefixArr->Js.Array2.joinWith("")}`,
-    parentToken,
-    customFilter,
-    mode,
-    showDelta,
-  ))
-
-  let tableEntity = React.useMemo3(() => {
-    let data = tableInfoData->getDictFromJsonObject
-    let tableInfoDesc =
-      tableData->Belt.Option.getWithDefault(Js.Json.object_(Js.Dict.empty()))->getDictFromJsonObject
-    let value = data->getJsonObjectFromDict("queryData")->getTransactionTable->Belt.Array.get(0)
-    let metaData =
-      tableInfoDesc->getArrayFromDict("metaData", [])->AnalyticsUtils.deltaTimeRangeMapper
-
-    let getHeading = switch tableUpdatedHeading {
-    | Some(tableUpdatedHeading) => tableUpdatedHeading(~item=value, ~dateObj=Some(metaData), ~mode)
-    | None => getHeading
-    }
-
-    {
-      ...tableEntity,
-      getHeading,
-      getCell: updatedCell,
-    }
-  }, (tableInfoData, showDelta, tableData))
-  let sampleAiBodyMaker =
-    analyticsTableEntity.sampleApiBody->Belt.Option.getWithDefault(AnalyticsUtils.sampleApiBody)
-  let sampleApiBody = {...tableApiBodyEntity, ?filterValueFromUrl}
-  let dict = sampleAiBodyMaker(sampleApiBody)
-
-  React.useEffect1(() => {
-    setDefaultFilter(._ => dict)
-    None
-  }, [dict])
-
-  // sankey fetch
-  React.useEffect4(() => {
-    setSankeyLoading(_ => true)
-    switch sankeyEntity {
-    | Some(sankeyEntity) =>
-      if sankeyEntity.fetchData {
-        if startTimeFromUrl !== "" && endTimeFromUrl !== "" && parentToken->Belt.Option.isSome {
-          fetchApi(
-            sankeyEntity.uri,
-            ~method_=Post,
-            ~bodyStr=[
-              AnalyticsUtils.getFilterRequestBody(
-                ~groupByNames=sankeyEntity.groupByNames,
-                ~filter=filterValueFromUrl,
-                ~metrics=sankeyEntity.sankeyMetrics,
-                ~delta=false,
-                ~mode,
-                ~startDateTime=startTimeFromUrl,
-                ~endDateTime=endTimeFromUrl,
-                ~customFilter,
-                ~source=sankeyEntity.source,
-                (),
-              )->Js.Json.object_,
-            ]
-            ->Js.Json.array
-            ->Js.Json.stringify,
-            ~authToken=parentToken,
-            ~headers=[("QueryType", "Sankey")]->Js.Dict.fromArray,
-            (),
-          )
-          ->addLogsAroundFetch(~logTitle="Sankey Data Api")
-          ->thenResolve(json => {
-            setSankeyFetchedData(
-              _ => Some(
-                json
-                ->getDictFromJsonObject
-                ->getJsonObjectFromDict("queryData")
-                ->getArrayFromJson([]),
-              ),
-            )
-
-            setSankeyLoading(_ => false)
-          })
-          ->catch(_err => {
-            setSankeyFetchedData(_ => Some([]))
-            setSankeyLoading(_ => false)
-            resolve()
-          })
-          ->ignore
-        }
-      }
-
-    | None => ()
-    }
-
-    None
-  }, (sankeyEntity, topFiltersToSearchParam, customFilter, mode))
-
-  let (sankeyLevels, startNodeLable, endNodeLable) = React.useMemo2(() => {
-    switch sankeyEntity {
-    | Some(sankeyEntity) =>
-      sankeyEntity.fetchData
-        ? (sankeyEntity.groupByNames, sankeyEntity.startNodeLable, sankeyEntity.endNodeLable)
-        : (activeTabState, "Total Volume", "Status")
-    | None => (activeTabState, "Total Volume", "Status")
-    }
-  }, (activeTabState, sankeyEntity))
-
-  let tableDataLoading = {tableLoading || tableHeaderLoading}
-  React.useEffect2(() => {
-    if tableData !== None && tableDataLoading === false {
-      setTableLoaderType(_ => SideLoader)
-    }
-    None
-  }, (tableData, tableDataLoading))
-  React.useEffect3(() => {
-    if sankeyFetchedData !== None && (sankeyLoading || tableDataLoading) == false {
-      setSankeyLoaderType(_ => SideLoader)
-    }
-    None
-  }, (sankeyFetchedData, tableDataLoading, sankeyLoading))
-
-  let tableSankeyUi = () => {
-    [
-      {
-        if statusDict->Js.Dict.values->Js.Array2.includes(504) {
-          <AnalyticsUtils.NoDataFoundPage />
-        } else {
-          <Form>
-            <BaseTableComponent
-              filters=(startTimeFromUrl, endTimeFromUrl)
-              text
-              tableData={tableData->Belt.Option.getWithDefault(Js.Json.object_(Js.Dict.empty()))}
-              tableDataLoading
-              transactionTableDefaultCols
-              defaultSort
-              newDefaultCols
-              newAllCols
-              tableEntity
-              getTransactionTable
-              colMapper
-              tableGlobalFilter
-              activeTab={activeTabState->Belt.Option.getWithDefault([])}
-              ?showDeltaToggleUi
-              loaderType=tableLoaderType
-            />
-          </Form>
-        }
-      },
-      {
-        switch sankeyEntity {
-        | Some(sankeyEntity) =>
-          <Form>
-            <SankeyWithDropDown
-              data={sankeyFetchedData->Belt.Option.getWithDefault([])}
-              activeTab={sankeyLevels->Belt.Option.getWithDefault([])}
-              dataLoading={sankeyLoading}
-              sankeyConfig=sankeyEntity.sankeyMetricsConfig
-              startNodeLable
-              endNodeLable
-              loaderType=sankeyLoaderType
-            />
-          </Form>
-        | None => React.null
-        }
-      },
-    ]
-  }
-  tableSankeyUi
-}
-
-module TabDetails = {
-  @react.component
-  let make = (
-    ~chartEntity: DynamicChart.entity,
-    ~activeTab,
-    ~sankeyEntity: option<SankeyCharts.sankeyEntity>,
-    ~colMapper: 'colType => string,
-    ~modeKey=?,
-    ~moduleName,
-    ~updateUrl: Js.Dict.t<string> => unit,
-    ~text="Summary Table",
-    ~analyticsTableEntity: option<AnalyticsUtils.analyticsTableEntity<'colType, 't>>,
-  ) => {
-    let tableSankeyWrapper = useTableSankeyWrapper()
-
-    <div className="h-full mt-4">
-      <DynamicChart
-        entity=chartEntity selectedTab=activeTab ?modeKey chartId=moduleName updateUrl
-      />
-      {switch analyticsTableEntity {
-      | Some(analyticsTableEntity) =>
-        <div className="h-full -mx-4 mt-4 overflow-scroll">
-          {tableSankeyWrapper(~sankeyEntity, ~colMapper, ~text, ~analyticsTableEntity)->React.array}
-        </div>
-      | None => React.null
-      }}
-    </div>
-  }
-}
-
-module ParentAnalyticsComponentV1 = {
-  @react.component
-  let make = (
-    ~chartEntity as _: DynamicChart.entity,
-    ~sankeyEntity as _: option<SankeyCharts.sankeyEntity>=?,
-    ~tabValues as _: array<DynamicTabs.tab>,
-    ~colMapper as _: 'colType => string,
-    ~stepsForModule=[],
-    ~modeKey as _: option<string>=?,
-    ~analyticsTableEntity as _: option<AnalyticsUtils.analyticsTableEntity<'colType, 't>>=?,
-    ~children=React.null,
-    ~totalVolume=0,
-    ~setTotalVolume=_ => (),
-  ) => {
-    let {filterValue} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-    let isMobileView = MatchMedia.useMobileChecker()
-
-    let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-
-    let {parentAuthInfo} = React.useContext(TokenContextProvider.tokenContext)
-
-    let authInfo = switch parentAuthInfo {
-    | Some(info) => info
-    | None => HyperSwitchAuthTypes.getDummyAuthInfoForToken("")
-    }
-
-    let updateComponentPrefrences = UrlUtils.useUpdateUrlWith(~prefix="")
-
-    React.useEffect1(() => {
-      updateComponentPrefrences(~dict=filterValue)
-      None
-    }, [filterValue])
-
-    // as there should be always date and mode so added this condition
-    if getModuleFilters->Js.Dict.entries->Js.Array2.length > 0 && authInfo.token !== "" {
-      <div
-        className={`flex flex-col h-full gap-4 relative ${isMobileView ? "overflow-scroll" : ""}`}>
-        // case when no filters but download data is required
-        <div className={`flex flex-col pb-5 ${isMobileView ? "" : "overflow-scroll"}`}>
-          <div> {children} </div>
-        </div>
-      </div>
-    } else {
-      React.null
-    }
-  }
-}
-
-module ParentAnalyticsComponentNew = {
-  @react.component
-  let make = (~stepsForModule=[], ~domain="txns", ~children=React.null, ~totalVolume=0) => {
-    let {filterValue} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-    let isMobileView = MatchMedia.useMobileChecker()
-
-    let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
-
-    let {parentAuthInfo} = React.useContext(TokenContextProvider.tokenContext)
-
-    let authInfo = switch parentAuthInfo {
-    | Some(info) => info
-    | None => HyperSwitchAuthTypes.getDummyAuthInfoForToken("")
-    }
-
-    let updateComponentPrefrences = UrlUtils.useUpdateUrlWith(~prefix="")
-
-    React.useEffect1(() => {
-      updateComponentPrefrences(~dict=filterValue)
-      None
-    }, [filterValue])
-
-    // as there should be always date and mode so added this condition
-    if getModuleFilters->Js.Dict.entries->Js.Array2.length > 0 && authInfo.token !== "" {
-      <div
-        className={`flex flex-col h-full gap-4 relative ${isMobileView ? "overflow-scroll" : ""}`}>
-        // case when no filters but download data is required
-        <div className={`flex flex-col pb-5 ${isMobileView ? "" : "overflow-x-hidden"}`}>
-          <div> {children} </div>
-        </div>
-      </div>
-    } else {
-      React.null
-    }
-  }
-}
-
-module OnCellClickDistribution = {
-  @react.component
-  let make = (
-    ~valDict,
-    ~value="Click to view",
-    ~tabValues: array<DynamicTabs.tab>,
-    ~domain: string,
-    ~customFilterKey: option<string>=?,
-    ~summaryTableOnClickEntity,
-    ~filterByData,
-    ~metrics,
-    ~groupBy,
-    ~defSort: Table.sortedObject,
-    ~defaultFiltersToModal=?,
-  ) => {
-    let (showTableModal, setShowTableModal) = React.useState(_ => false)
-    let (modalHeading, setModalHeading) = React.useState(_ => "")
-    let (defaultFilter, _) = Recoil.useRecoilState(AnalyticsHooks.defaultFilter)
-    let {filterValue} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
-    let defaultFilterDict = defaultFilter->safeParse->getDictFromJsonObject
-    let activeTab =
-      defaultFilterDict
-      ->getArrayFromDict("activeTab", [])
-      ->Js.Array2.map(key => {
-        key->getStringFromJson("")
-      })
-
-    let defaultFilters = defaultFilterDict->getJsonObjectFromDict("filter")->getDictFromJsonObject
-    let dictKeys = valDict->Js.Dict.keys
-    let filters = defaultFilters->getJsonObjectFromDict("filters")->getDictFromJsonObject
-    let filterKeys = filters->Js.Dict.keys
-    let getTitle = key => {
-      (
-        tabValues
-        ->Js.Array2.filter(item => {
-          item.value == key
-        })
-        ->Belt.Array.get(0)
-        ->Belt.Option.getWithDefault({title: "", value: "", isRemovable: false})
-      ).title
-    }
-
-    activeTab->Js.Array2.forEach(key => {
-      if !(filterKeys->Js.Array2.includes(key)) {
-        filterKeys->Js.Array2.push(key)->ignore
-      }
-    })
-    filterKeys->Js.Array2.forEach(key => {
-      let value = valDict->getString(key, "")
-      if dictKeys->Js.Array2.includes(key) && value !== "" {
-        filters->Js.Dict.set(key, [value->Js.Json.string]->Js.Json.array)
-      }
-    })
-    let currentCustomFilterValue = switch customFilterKey {
-    | Some(customFilterKey) =>
-      filterValue->Js.Dict.get(customFilterKey)->Belt.Option.getWithDefault("")
-    | None => ""
-    }
-
-    defaultFilters->Js.Dict.set("filters", filters->Js.Json.object_)
-    if currentCustomFilterValue !== "" {
-      defaultFilters->Js.Dict.set("customFilter", currentCustomFilterValue->Js.Json.string)
-    }
-
-    let valStr =
-      activeTab
-      ->Js.Array2.map(key => {
-        valDict->getJsonObjectFromDict(key)
-      })
-      ->Js.Array2.joinWith(", ")
-
-    let keyStr = activeTab->Js.Array2.map(getTitle)->Js.Array2.joinWith(", ")
-
-    let heading = `${keyStr} : ${valStr}`
-    let search_class = "text-gray-400 dark:text-gray-600"
-    let searchTable = FormRenderer.makeFieldInfo(
-      ~label="",
-      ~name="searchTable",
-      ~placeholder="Search ",
-      ~customInput=InputFields.textInput(
-        ~customStyle="w-64",
-        ~autoComplete="off",
-        ~leftIcon=<Icon size=16 className=search_class name="search" />,
-        (),
-      ),
-      (),
-    )
-
-    let onClick = _ => {
-      setShowTableModal(_ => true)
-      setModalHeading(_ => heading)
-    }
-    <>
-      <div
-        className="px-2 py-0.5 fira-code text-fs-13 font-normal text-sky-500 cursor-pointer"
-        onClick>
-        {React.string(`${value}`)}
-      </div>
-      {if showTableModal {
-        <Modal
-          modalHeading
-          headingClass="!bg-transparent dark:!bg-jp-gray-lightgray_background"
-          showModal=showTableModal
-          closeOnOutsideClick=true
-          setShowModal=setShowTableModal
-          borderBottom=true
-          modalClass="md:w-10/12 w-full md:mx-auto md:my-8 dark:!bg-jp-gray-lightgray_background p-4 pb-8 overflow-auto">
-          <Form>
-            <FormRenderer.FieldRenderer field=searchTable />
-            <AnalyticsUtils.TableErrorModalContent
-              defaultFilters
-              domain
-              filterByData
-              summayTableEntity=summaryTableOnClickEntity
-              metrics
-              customFilterValue=currentCustomFilterValue
-              groupBy
-              defSort
-              ?defaultFiltersToModal
-            />
-          </Form>
-        </Modal>
-      } else {
-        React.null
-      }}
-    </>
-  }
-}

From ff1b90b87f0188d7fca96cf9288465226317df9f Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <77892330+PritishBudhiraja@users.noreply.github.com>
Date: Tue, 12 Dec 2023 12:37:14 +0530
Subject: [PATCH 2/3] feat: Routing back to Integration Fields if Connector
 Label already exist. (#93)

---
 .../Connectors/ConnectorPaymentMethod.res         | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res b/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res
index be2e23d32..768f8ca69 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorPaymentMethod.res
@@ -8,11 +8,11 @@ let make = (
   ~isUpdateFlow,
   ~isPayoutFlow,
 ) => {
-  let hyperswitchMixPanel = HSMixPanel.useSendEvent()
   open ConnectorUtils
   open APIUtils
   open PageLoaderWrapper
   open LogicUtils
+  let hyperswitchMixPanel = HSMixPanel.useSendEvent()
   let url = RescriptReactRouter.useUrl()
   let _showAdvancedConfiguration = false
   let (paymentMethodsEnabled, setPaymentMethods) = React.useState(_ =>
@@ -22,7 +22,7 @@ let make = (
   let showToast = ToastState.useShowToast()
   let connectorID = initialValues->getDictFromJsonObject->getOptionString("merchant_connector_id")
   let (screenState, setScreenState) = React.useState(_ => Loading)
-  let updateAPIHook = useUpdateMethod()
+  let updateAPIHook = useUpdateMethod(~showErrorToast=false, ())
 
   let updateDetails = value => {
     setPaymentMethods(_ => value->Js.Array2.copy)
@@ -77,7 +77,16 @@ let make = (
     } catch {
     | Js.Exn.Error(e) => {
         let err = Js.Exn.message(e)->Belt.Option.getWithDefault("Something went wrong")
-        setScreenState(_ => PageLoaderWrapper.Error(err))
+        let errorCode = err->safeParse->getDictFromJsonObject->getString("code", "")
+        let errorMessage = err->safeParse->getDictFromJsonObject->getString("message", "")
+
+        if errorCode === "HE_01" {
+          showToast(~message="Connector label already exist!", ~toastType=ToastError, ())
+          setCurrentStep(_ => ConnectorTypes.IntegFields)
+        } else {
+          showToast(~message=errorMessage, ~toastType=ToastError, ())
+          setScreenState(_ => PageLoaderWrapper.Error(err))
+        }
       }
     }
   }

From 16a3e1850a658e397dc8f924f1bc07443e73ace5 Mon Sep 17 00:00:00 2001
From: Lokesh Jain <56452497+jainlokesh318@users.noreply.github.com>
Date: Tue, 12 Dec 2023 12:40:58 +0530
Subject: [PATCH 3/3] feat: sub steps (#56)

Co-authored-by: Lokesh Jain <lokesh.jain@juspay.in>
Co-authored-by: Jeeva Ramachandran <120017870+JeevaRamu0104@users.noreply.github.com>
---
 package-lock.json                             |  4 +-
 .../IntegrateYourApp/IntegrateFromScratch.res | 27 ++++++++----
 .../IntegrateYourAppUtils.res                 | 23 ++++++++++
 .../IntegrateYourApp/MigrateFromStripe.res    | 26 ++++++++----
 .../Home/QuickStart/QuickStartTypes.res       | 20 +++++++++
 .../Home/QuickStart/QuickStartUtils.res       | 42 +++++++++++++++----
 .../HyperSwitch/Hooks/EnumVariantHook.res     |  4 ++
 7 files changed, 121 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 195c36bdd..581a1335b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "rescript-euler-dashboard",
+  "name": "hyperswitch-dashboard",
   "version": "1.0.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "rescript-euler-dashboard",
+      "name": "hyperswitch-dashboard",
       "version": "1.0.5",
       "hasInstallScript": true,
       "license": "MIT",
diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res
index a85045ad2..073c4f22d 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res
@@ -14,6 +14,7 @@ let make = (
   let (currentStep, setCurrentStep) = React.useState(_ => DownloadTestAPIKey)
   let {setQuickStartPageState} = React.useContext(GlobalProvider.defaultContext)
   let isLastStep = currentStep === DisplayPaymentConfirmation
+  let updateEnumInRecoil = EnumVariantHook.useUpdateEnumInRecoil()
 
   let theme = switch ThemeProvider.useTheme() {
   | Dark => "vs-dark"
@@ -25,10 +26,18 @@ let make = (
       buttonState={Normal}
       buttonType={PrimaryOutline}
       text="Back"
-      onClick={_ =>
-        currentStep === DownloadTestAPIKey
-          ? setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION))
-          : setCurrentStep(_ => getNavigationStepForStandardIntegration(~currentStep, ()))}
+      onClick={_ => {
+        let prevStep = getNavigationStepForStandardIntegration(~currentStep, ())
+        if currentStep === DownloadTestAPIKey {
+          setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION))
+        } else {
+          let _ = updateEnumInRecoil([
+            (String("pending"), currentStep->getPolyMorphicVariantOfIntegrationSubStep),
+            (String("ongoing"), prevStep->getPolyMorphicVariantOfIntegrationSubStep),
+          ])
+          setCurrentStep(_ => prevStep)
+        }
+      }}
       buttonSize=Small
     />
 
@@ -40,9 +49,13 @@ let make = (
         if isLastStep {
           markAsDone()->ignore
         } else {
-          setCurrentStep(_ =>
-            getNavigationStepForStandardIntegration(~currentStep, ~forward=true, ())
-          )
+          let nextStep = getNavigationStepForStandardIntegration(~currentStep, ~forward=true, ())
+          let _ = updateEnumInRecoil([
+            (String("completed"), currentStep->getPolyMorphicVariantOfIntegrationSubStep),
+            (String("ongoing"), nextStep->getPolyMorphicVariantOfIntegrationSubStep),
+          ])
+
+          setCurrentStep(_ => nextStep)
         }
       }}
       buttonSize=Small
diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res
index 35abaf046..2b24edd6b 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res
@@ -45,3 +45,26 @@ let getNavigationStepForStandardIntegration = (
   | DisplayPaymentConfirmation => forward ? DisplayPaymentConfirmation : DisplayCheckout
   }
 }
+
+let getPolyMorphicVariantOfIntegrationSubStep: standardIntegrationSteps => QuickStartTypes.sectionHeadingVariant = (
+  currentStep: standardIntegrationSteps,
+) => {
+  switch currentStep {
+  | DownloadTestAPIKey => #DownloadTestAPIKey
+  | CreatePayment => #CreatePayment
+  | DisplayCheckout => #DisplayCheckout
+  | DisplayPaymentConfirmation => #DisplayPaymentConfirmation
+  }
+}
+
+let getPolyMorphicVariantOfMigrateFromStripe: migrateFromStripeSteps => QuickStartTypes.sectionHeadingVariant = (
+  currentStep: migrateFromStripeSteps,
+) => {
+  switch currentStep {
+  | DownloadAPIKey => #DownloadTestAPIKeyStripe
+  | InstallDeps => #InstallDeps
+  | ReplaceAPIKeys => #ReplaceAPIKeys
+  | ReconfigureCheckout => #ReconfigureCheckout
+  | LoadCheckout => #LoadCheckout
+  }
+}
diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res
index 0d1b1f156..562726bee 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res
@@ -14,6 +14,7 @@ let make = (
   let (currentStep, setCurrentStep) = React.useState(_ => DownloadAPIKey)
   let {setQuickStartPageState} = React.useContext(GlobalProvider.defaultContext)
   let isLastStep = currentStep === LoadCheckout
+  let updateEnumInRecoil = EnumVariantHook.useUpdateEnumInRecoil()
 
   let theme = switch ThemeProvider.useTheme() {
   | Dark => "vs-dark"
@@ -25,10 +26,18 @@ let make = (
       buttonState={Normal}
       buttonType={PrimaryOutline}
       text="Back"
-      onClick={_ =>
-        currentStep === DownloadAPIKey
-          ? setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION))
-          : setCurrentStep(_ => getNavigationStepForMigrateFromStripe(~currentStep, ()))}
+      onClick={_ => {
+        let prevStep = getNavigationStepForMigrateFromStripe(~currentStep, ())
+        if currentStep === DownloadAPIKey {
+          setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION))
+        } else {
+          let _ = updateEnumInRecoil([
+            (String("pending"), currentStep->getPolyMorphicVariantOfMigrateFromStripe),
+            (String("ongoing"), prevStep->getPolyMorphicVariantOfMigrateFromStripe),
+          ])
+          setCurrentStep(_ => prevStep)
+        }
+      }}
       buttonSize=Small
     />
 
@@ -40,9 +49,12 @@ let make = (
         if isLastStep {
           markAsDone()->ignore
         } else {
-          setCurrentStep(_ =>
-            getNavigationStepForMigrateFromStripe(~currentStep, ~forward=true, ())
-          )
+          let nextStep = getNavigationStepForMigrateFromStripe(~currentStep, ~forward=true, ())
+          let _ = updateEnumInRecoil([
+            (String("completed"), currentStep->getPolyMorphicVariantOfMigrateFromStripe),
+            (String("ongoing"), nextStep->getPolyMorphicVariantOfMigrateFromStripe),
+          ])
+          setCurrentStep(_ => nextStep)
         }
       }}
       buttonSize=Small
diff --git a/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res b/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res
index 34f0e65c2..caa84a5ac 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res
@@ -47,6 +47,10 @@ type sectionHeadingVariant = [
   | #TestPayment
   | #IntegrationMethod
   | #IntegrationCompleted
+  | #DownloadTestAPIKey
+  | #CreatePayment
+  | #DisplayCheckout
+  | #DisplayPaymentConfirmation
   | #StripeConnected
   | #PaypalConnected
   | #SPRoutingConfigured
@@ -56,6 +60,11 @@ type sectionHeadingVariant = [
   | #SetupWoocomWebhook
   | #IsMultipleConfiguration
   | #GoLive
+  | #DownloadTestAPIKeyStripe
+  | #InstallDeps
+  | #ReplaceAPIKeys
+  | #ReconfigureCheckout
+  | #LoadCheckout
 ]
 
 type processorType = {
@@ -85,7 +94,17 @@ type responseType = {
   configureWoocom: bool,
   setupWoocomWebhook: bool,
   isMultipleConfiguration: bool,
+  downloadTestAPIKeyStripe: string,
+  installDeps: string,
+  replaceAPIKeys: string,
+  reconfigureCheckout: string,
+  loadCheckout: string,
+  downloadTestAPIKey: string,
+  createPayment: string,
+  displayCheckout: string,
+  displayPaymentConfirmation: string,
 }
+
 type requestObjectType =
   | ProcesorType(processorType)
   | RoutingType(routingType)
@@ -93,5 +112,6 @@ type requestObjectType =
   | IntegrationMethod(integrationMethod)
   | ConnectorChoice(connectorChoice)
   | Boolean(bool)
+  | String(string)
 
 type valueType = String(string) | Boolean(bool)
diff --git a/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res b/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res
index 4ae161e6c..7de1e90e6 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res
@@ -169,6 +169,13 @@ let getTypedValueFromDict = valueString => {
     ->getDictfromDict(#IntegrationMethod->getStringFromVariant)
     ->getIntegrationType,
     integrationCompleted: value->getBool(#IntegrationCompleted->getStringFromVariant, false),
+    downloadTestAPIKey: value->getString(#DownloadTestAPIKey->getStringFromVariant, ""),
+    createPayment: value->getString(#CreatePayment->getStringFromVariant, ""),
+    displayCheckout: value->getString(#DisplayCheckout->getStringFromVariant, ""),
+    displayPaymentConfirmation: value->getString(
+      #DisplayPaymentConfirmation->getStringFromVariant,
+      "",
+    ),
     stripeConnected: value
     ->getDictfromDict(#StripeConnected->getStringFromVariant)
     ->getProcessorType,
@@ -183,6 +190,11 @@ let getTypedValueFromDict = valueString => {
     configureWoocom: value->getBool(#ConfigureWoocom->getStringFromVariant, false),
     setupWoocomWebhook: value->getBool(#SetupWoocomWebhook->getStringFromVariant, false),
     isMultipleConfiguration: value->getBool(#IsMultipleConfiguration->getStringFromVariant, false),
+    downloadTestAPIKeyStripe: value->getString(#DownloadTestAPIKeyStripe->getStringFromVariant, ""),
+    installDeps: value->getString(#InstallDeps->getStringFromVariant, ""),
+    replaceAPIKeys: value->getString(#ReplaceAPIKeys->getStringFromVariant, ""),
+    reconfigureCheckout: value->getString(#ReconfigureCheckout->getStringFromVariant, ""),
+    loadCheckout: value->getString(#LoadCheckout->getStringFromVariant, ""),
   }
   typedValue
 }
@@ -231,6 +243,17 @@ let getStatusValue = (comparator: valueType, enumVariant, dashboardPageState) =>
     boolValue ? COMPLETED : dashboardPageState === enumVariant ? ONGOING : PENDING
   }
 }
+
+let getStatusFromString = statusString => {
+  open HSSelfServeSidebar
+  switch statusString->Js.String2.toUpperCase {
+  | "PENDING" => PENDING
+  | "COMPLETED" => COMPLETED
+  | "ONGOING" => ONGOING
+  | _ => PENDING
+  }
+}
+
 let sidebarTextBasedOnVariant = choiceState =>
   switch choiceState {
   | #MigrateFromStripe => "Hyperswitch For Stripe Users"
@@ -276,23 +299,23 @@ let getSidebarOptionsForIntegrateYourApp: (
       subOptions: [
         {
           title: "Download Test API Keys",
-          status: PENDING,
+          status: enumValue.downloadTestAPIKeyStripe->getStatusFromString,
         },
         {
           title: "Install Dependencies",
-          status: PENDING,
+          status: enumValue.installDeps->getStatusFromString,
         },
         {
           title: "Replace API keys",
-          status: PENDING,
+          status: enumValue.replaceAPIKeys->getStatusFromString,
         },
         {
           title: "Reconfigure Checkout Form",
-          status: PENDING,
+          status: enumValue.reconfigureCheckout->getStatusFromString,
         },
         {
           title: "Load Hyperswitch Checkout",
-          status: PENDING,
+          status: enumValue.loadCheckout->getStatusFromString,
         },
       ],
     },
@@ -317,19 +340,19 @@ let getSidebarOptionsForIntegrateYourApp: (
       subOptions: [
         {
           title: "Download Test API Key",
-          status: PENDING,
+          status: enumValue.downloadTestAPIKey->getStatusFromString,
         },
         {
           title: "Create a Payment",
-          status: PENDING,
+          status: enumValue.createPayment->getStatusFromString,
         },
         {
           title: "Display Hyperswitch Checkout",
-          status: PENDING,
+          status: enumValue.displayCheckout->getStatusFromString,
         },
         {
           title: "Display Payment Confirmation",
-          status: PENDING,
+          status: enumValue.displayPaymentConfirmation->getStatusFromString,
         },
       ],
     },
@@ -571,6 +594,7 @@ let generateBodyBasedOnType = (parentVariant: sectionHeadingVariant, value: requ
     ]->getJsonFromArrayOfJson
 
   | Boolean(_) => (parentVariant :> string)->Js.Json.string
+  | String(str) => str->Js.Json.string
   }
 }
 
diff --git a/src/screens/HyperSwitch/Hooks/EnumVariantHook.res b/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
index ae31a0902..0a7ae6a37 100644
--- a/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
+++ b/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
@@ -48,6 +48,10 @@ let useUpdateEnumInRecoil = () => {
           let booleanDict = [((enumVariant :> string), true->Js.Json.boolean)]->Js.Dict.fromArray
           enumDictsArray->Array.push(booleanDict)
         }
+      | String(str) => {
+          let stringDict = [((enumVariant :> string), str->Js.Json.string)]->Js.Dict.fromArray
+          enumDictsArray->Array.push(stringDict)
+        }
       | _ => enumDictsArray->Array.push(bodyValForApi->getDictFromJsonObject)
       }
     })